* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #000;
  --fg: #f5f5f7;
  --dim: #8e8e93;
  --line: #1c1c1e;
}

html, body { background: var(--bg); }

body {
  color: var(--fg);
  font-family: -apple-system, "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 갤러리 ---------------- */
.site-header {
  position: relative;
  text-align: center;
  padding: 44px 20px 28px;
  border-bottom: 1px solid var(--line);
}

.logo {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.logo span {
  font-weight: 300;
  color: var(--dim);
  margin-left: 6px;
}

.bio {
  margin-top: 9px;
  font-size: 13px;
  color: var(--dim);
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.tab-btn {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.on {
  color: var(--fg);
  background: rgba(255, 255, 255, .08);
}
.tab-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 999px;
}
.tab-btn.on .tab-count { color: var(--fg); background: rgba(255,255,255,.12); }

/* 모바일 — 탭이 한 줄로 가로 스크롤, 각 탭은 두 줄 안 깨짐 */
@media (max-width: 600px) {
  .tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 12px 6px;
    gap: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 10px;
    gap: 4px;
  }
  .tab-count { padding: 1px 5px; font-size: 9px; }
}

.grid {
  max-width: 935px;
  margin: 0 auto;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.cell {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  background: #111;
  overflow: hidden;
  text-decoration: none;
}

.cell .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.cell:hover .thumb {
  transform: scale(1.04);
  filter: brightness(.5);
}

/* 이미지 카드용 페이스북식 모자이크 (셀 안에서 1/2/3/4분할) */
.cell-mosaic {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 2px;
  background: #0a0a0d;
  transition: filter .35s ease;
}
.cell:hover .cell-mosaic { filter: brightness(.55); }
.cell-mosaic .cell-tm-cell {
  position: relative;
  overflow: hidden;
}
.cell-mosaic .cell-tm-cell img,
.cell-mosaic .cell-tm-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.cell-mosaic .cell-tm-cell.is-video { background: #000; }
.cell-mosaic .cell-tm-cell .vid-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.65);
  pointer-events: none;
  z-index: 1;
}
.cell:hover .cell-mosaic .cell-tm-cell img { transform: scale(1.03); }
.cell-mosaic .cell-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cell-mosaic.count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.cell-mosaic.count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.cell-mosaic.count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cell-mosaic.count-3 .cell-tm-cell:nth-child(1) { grid-row: 1 / span 2; }
.cell-mosaic.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.cell .badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

.cell .langs-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.cell .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 12px 12px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .92));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.cell:hover .cap { opacity: 1; }

.cell .cap-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.cell .cap-meta {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.brands-line {
  text-align: center;
  color: #5a5a5e;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 28px 20px 4px;
  line-height: 1.8;
}

/* ---- 브랜드 탭: wide 가로 카드, 2컬럼 (모바일 1컬럼) ---- */
.grid.brand-mode {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 8px 8px 4px;
}
@media (max-width: 600px) {
  .grid.brand-mode { grid-template-columns: 1fr; gap: 8px; }
}

.brand-cell {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #14141a;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .25s ease;
}
.brand-cell:hover { transform: translateY(-2px); }

/* 배경: 대표 썸네일을 흐리고 어둡게 → 글자가 잘 보이게 */
.brand-cell .brand-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(.42) saturate(1.3);
  transform: scale(1.15);  /* blur 가장자리 노출 방지 */
  transition: filter .35s ease;
}
.brand-cell:hover .brand-bg { filter: blur(10px) brightness(.55) saturate(1.4); }

/* 정보 패널 — 전체 카드 덮음 */
.brand-cell .brand-info {
  position: absolute;
  inset: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.brand-cell .brand-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  word-break: break-word;
}
@media (max-width: 600px) {
  .brand-cell .brand-name { font-size: 24px; }
}

.brand-cell .brand-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.brand-cell .brand-arrow {
  font-size: 18px;
  font-weight: 400;
  transition: transform .25s ease;
}
.brand-cell:hover .brand-arrow { transform: translateX(4px); color: #fff; }

/* 미니 스트립 — 그 브랜드 콘텐츠 썸네일 3장 + +N */
.brand-cell .brand-strip {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: auto;
}
.brand-cell .brand-strip img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.18);
  display: block;
}
.brand-cell .brand-more {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  padding: 0 4px;
  letter-spacing: 0.04em;
}

/* ---- Timeline 탭: 페북/링크드인식 세로 피드 ---- */
.grid.timeline-mode {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 12px 24px;
}
.tl-post {
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.tl-post:hover {
  border-color: rgba(255, 255, 255, .14);
}
.tl-post:hover .tl-open { color: var(--fg); }
.tl-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px 11px;
}
/* 소셜 피드식 아바타 (모노그램) */
.tl-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #3a3a40;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  overflow: hidden;
}
.tl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-head-info { flex: 1 1 auto; min-width: 0; }
.tl-author {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.tl-author span {
  font-weight: 300;
  color: var(--dim);
  margin-left: 4px;
}
.tl-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 2px;
}
.tl-meta > * + *::before {
  content: "·";
  margin-right: 7px;
  color: rgba(255,255,255,.25);
}
.tl-brand {
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* 포스트 우상단 공유 버튼 — 미니멀 (배경 없이 얇은 아이콘만) */
.tl-share {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .6;
  transition: opacity .15s, color .15s;
  margin: -2px -4px 0 0;
}
.tl-share:hover { opacity: 1; color: var(--fg); }
.tl-share svg { pointer-events: none; }
/* 공유 토스트 (갤러리 공용) */
.g-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(20, 20, 26, .96);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.g-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tl-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 18px 6px;
  line-height: 1.35;
  word-break: keep-all;
}
.tl-text {
  margin: 0 18px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  white-space: pre-line;
  word-break: keep-all;
  /* 3줄까지만 — 넘어가면 잘림. 카드 클릭하면 상세에서 전체. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.tl-text::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 40%;
  height: 1.6em;
  background: linear-gradient(90deg, transparent, #14141a 75%);
  pointer-events: none;
}
.tl-text-link,
.tl-text-link:visited,
.tl-text-link:active,
.desc-link,
.desc-link:visited,
.desc-link:active {
  color: #4a90ff;
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid rgba(74, 144, 255, .25);
  transition: border-color .15s, color .15s;
}
.tl-text-link:hover,
.desc-link:hover {
  color: #6aa9ff;
  border-bottom-color: rgba(106, 169, 255, .65);
}

/* 플레이어 사이드의 OG 카드 (info-og) */
.info-og:empty { display: none; }
.info-og {
  margin: 10px 0 0;
}
.og-card {
  display: flex;
  background: #14141a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.og-card:hover { border-color: rgba(255,255,255,.18); background: #1a1a22; }
.og-card-img {
  flex-shrink: 0;
  width: 90px;
  background: #1a1a22 center/cover no-repeat;
}
.og-card-body {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.og-card-host {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.og-card-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.og-card-desc {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* OG 미리보기 카드 — 본문과 미디어 사이. 빈 슬롯은 자리 안 차지 */
.tl-og:empty { display: none; }
.tl-og:not(:empty) { margin: 0 18px 14px; }
@media (max-width: 600px) {
  .tl-og:not(:empty) { margin: 0 14px 12px; }
}
.tl-og-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #0e0e14;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.tl-og-card:hover {
  border-color: rgba(255,255,255,.18);
  background: #14141c;
}
.tl-og-img {
  flex-shrink: 0;
  width: 100px;
  background: #1a1a22 center/cover no-repeat;
}
@media (max-width: 600px) {
  .tl-og-img { width: 80px; }
  .tl-og { margin: 0 14px 12px; }
}
.tl-og-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.tl-og-host {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.tl-og-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tl-og-desc {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tl-mosaic {
  display: grid;
  gap: 2px;
  background: #0a0a0d;
}
.tl-mosaic .cell-tm-cell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0a0a0d;
}
.tl-mosaic .cell-tm-cell img,
.tl-mosaic .cell-tm-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tl-mosaic .cell-tm-cell .vid-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.tl-mosaic .cell-tm-cell .cell-more {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.tl-mosaic.count-1 .cell-tm-cell { aspect-ratio: auto; max-height: 70vh; }
.tl-mosaic.count-1 .cell-tm-cell img,
.tl-mosaic.count-1 .cell-tm-cell video { object-fit: contain; background: #000; }
.tl-mosaic.count-1 { grid-template-columns: 1fr; }
.tl-mosaic.count-2 { grid-template-columns: 1fr 1fr; }
/* 3장: 가로 3등분 (빈 칸 없이 균등) */
.tl-mosaic.count-3 { grid-template-columns: 1fr 1fr 1fr; }
.tl-mosaic.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.tl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.tl-links {
  display: inline-flex;
  gap: 6px;
}
.tl-link {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.tl-link:hover { background: rgba(74, 144, 255, .25); color: #4a90ff; }
.tl-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  text-decoration: none;
  margin-left: auto;
  transition: color .15s;
}
.tl-open:hover { color: var(--fg); }

@media (max-width: 600px) {
  .grid.timeline-mode { padding: 8px 6px 20px; gap: 12px; }
  .tl-head, .tl-foot { padding-left: 14px; padding-right: 14px; }
  .tl-title { margin-left: 14px; margin-right: 14px; font-size: 15px; }
  .tl-text { margin-left: 14px; margin-right: 14px; font-size: 14px; }
}

/* ---- About 탭: 단일 컬럼 페이지 ---- */
.grid.about-mode {
  display: block;
  padding: 0;
  max-width: 720px;
  margin: 0 auto;
}
.about-page {
  padding: 24px 20px 40px;
  color: var(--fg);
}
.about-section {
  margin: 0 0 44px;
}
.about-section:last-child { margin-bottom: 0; }

.about-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 14px;
}

.about-headline {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  line-height: 1.05;
}
.about-headline span {
  font-weight: 300;
  color: var(--dim);
  letter-spacing: 0.01em;
}

.about-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  margin: 0;
  word-break: keep-all;
}

/* 채널 카드 */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .channel-grid { grid-template-columns: 1fr; }
}

/* About — 멤버(부부) 프로필 */
.member-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 600px) { .member-grid { grid-template-columns: 1fr; } }
.member-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c0c0e;
}
.member-avatar {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #3a3a40;
  color: #fff; font-weight: 800; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-info { min-width: 0; flex: 1 1 auto; }
.member-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.member-bio { font-size: 13px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.member-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.member-link {
  font-size: 11px; font-weight: 600;
  color: var(--ch-color, #aaa);
  border: 1px solid color-mix(in srgb, var(--ch-color, #888) 40%, transparent);
  padding: 3px 9px; border-radius: 999px;
  text-decoration: none;
  transition: background .15s;
}
.member-link:hover { background: color-mix(in srgb, var(--ch-color, #888) 15%, transparent); }
.channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, background .2s;
}
.channel-card:hover {
  border-color: var(--ch-color);
  transform: translateY(-2px);
  background: #181820;
}
.channel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ch-color);
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--ch-color);
}
.channel-info { flex: 1; min-width: 0; }
.channel-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.channel-handle {
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.channel-arrow {
  font-size: 16px;
  color: var(--dim);
  transition: transform .2s, color .2s;
}
.channel-card:hover .channel-arrow {
  color: var(--ch-color);
  transform: translate(2px, -2px);
}

/* 협업 contact */
.contact-note {
  margin-bottom: 14px !important;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.contact-email {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-email:hover { color: #4a90ff; }
.contact-copy {
  background: rgba(255,255,255,.06);
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: var(--dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.contact-copy:hover { background: rgba(255,255,255,.12); color: var(--fg); }
.contact-copy.copied {
  width: auto;
  padding: 0 10px;
  background: rgba(74,144,255,.15);
  color: #4a90ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* 활성 브랜드 필터 chip (탭 아래) */
.brand-chip {
  max-width: 935px;
  margin: 0 auto 4px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.brand-chip[hidden] { display: none; }
.brand-chip-label {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-chip-name {
  color: var(--fg);
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}
.brand-chip-x {
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.brand-chip-x:hover { background: rgba(255,255,255,.18); }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--dim);
  padding: 90px 20px;
  line-height: 1.8;
  font-size: 14px;
}

.site-footer {
  text-align: center;
  padding: 34px;
  font-size: 12px;
  color: #48484a;
}

/* ---------------- 언어 전환 (지구본 드롭다운) ---------------- */
.lang {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
}

/* 트리거 — 🌐 현재언어 ▾ */
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lang-trigger:hover { background: rgba(255, 255, 255, .12); border-color: #3a3a3a; }
.lang-globe { font-size: 13px; line-height: 1; }
.lang-cur { letter-spacing: -0.01em; }
.lang-caret {
  font-size: 9px;
  color: var(--dim);
  transition: transform .2s ease;
}
.lang-dd.open .lang-caret { transform: rotate(180deg); }

/* 드롭다운 메뉴 */
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 130px;
  background: #0d0d0f;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  z-index: 21;
}
.lang-menu[hidden] { display: none; }

.lang-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  padding: 8px 10px;
  border-radius: 7px;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.lang-opt:hover { background: rgba(255, 255, 255, .07); color: var(--fg); }
.lang-opt.on { color: var(--fg); font-weight: 700; }
.lang-check {
  width: 12px;
  flex: 0 0 auto;
  color: #4a90ff;
  font-size: 11px;
}
.lang-opt-name { flex: 1 1 auto; }
/* 영상 variant 없는 언어 (player 전용) — 살짝 dim + 표시 */
.lang-opt.no-variant .lang-opt-name { opacity: 0.6; }
.lang-opt.no-variant::after {
  content: "텍스트";
  font-size: 9px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
}

@media (max-width: 720px) {
  .lang { top: 10px; right: 10px; }
  .lang-trigger { font-size: 11px; padding: 5px 9px; }
}

/* ---------------- 플레이어 ---------------- */
/* ---------------- 플레이어 (공통) ---------------- */
body.player {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: 100vh;
  overflow: hidden;
}

.back {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 5;
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  opacity: .85;
}
.back:hover { opacity: 1; }

.stage-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: #000;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px 12px;
}

.stage video {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;  /* layout shift 방지 — 영상 전환 시 비율 고정 */
  background: #000;
  border-radius: 10px;
  object-fit: contain;
}

.img-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.img-stage[hidden] { display: none; }

/* 페이스북식 그리드 — 이미지 개수에 따라 레이아웃 변화 */
.img-grid {
  display: grid;
  gap: 4px;
  max-width: 100%;
  max-height: 100%;
  width: min(720px, 100%);
  aspect-ratio: 1 / 1;
}
.img-grid.count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 9 / 16; }
.img-grid.count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 9; }
.img-grid.count-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.img-grid.count-3 .img-grid-cell:nth-child(1) { grid-row: 1 / span 2; }
.img-grid.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.img-grid-cell {
  position: relative;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .15s;
}
.img-grid-cell:hover { opacity: .85; }
.img-grid-cell img,
.img-grid-cell video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.img-grid-cell.is-video { background: #000; }
.img-grid-cell .vid-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  pointer-events: none;
}
.img-more {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* Lightbox 풀스크린 오버레이 */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .94);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
body.lb-active { overflow: hidden; }

.lb-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
}
.lb-img[hidden] { display: none; }
.lb-video { background: #000; }
.lb-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.lb-close:hover { background: rgba(255,255,255,.2); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-nav.prev { left: 24px; }
.lb-nav.next { right: 24px; }

.lb-dots {
  position: absolute;
  left: 0; right: 0; bottom: 28px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.lb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.lb-dot.on { background: #fff; transform: scale(1.3); }

.msg {
  position: absolute;
  color: var(--dim);
  font-size: 14px;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.nav:disabled { opacity: .15; cursor: default; }
/* 화면 좌우 끝쪽 — 영상과 충분히 거리 */
.nav.prev { left: 24px; }
.nav.next { right: 24px; }

/* ---------------- PC: 우측 사이드 패널 ---------------- */
.info-panel {
  background: #050505;
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 60px 28px 28px;
}
.info-inner { display: flex; flex-direction: column; gap: 14px; }

.info-brand-row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.info-brand {
  color: #4a90ff;
  font-weight: 600;
}
.info-brand:empty { display: none; }
.info-date {
  font-variant-numeric: tabular-nums;
}

.info-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.info-title:empty::before {
  content: "(제목 없음)";
  color: var(--dim);
  font-weight: 400;
}

.info-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #c7c7cc;
  white-space: pre-wrap;
  word-break: break-word;
}
.info-desc:empty { display: none; }

.info-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.info-links:empty { display: none; }

.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.ext-link::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--dim);
}
.ext-link:hover { border-color: #3a3a3a; background: #111; }
.ext-link.ext-instagram::before { background: #e1306c; }
.ext-link.ext-youtube::before { background: #ff0000; }
.ext-link.ext-xiaohongshu::before { background: #ff2442; }
.ext-link.ext-bilibili::before { background: #00a1d6; }

.share-btn {
  align-self: flex-start;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.share-btn:hover { border-color: #3a3a3a; background: #111; }
.share-btn svg { opacity: .85; }

.share-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(255,255,255,.95);
  color: #000;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------- 모바일 (좁은 화면): 풀스크린 + 하단 오버레이 ---------------- */
@media (max-width: 900px) {
  body.player {
    display: block;
    position: relative;
  }
  .stage-wrap { height: 100vh; }
  .stage { padding: 52px 6px 6px; }

  .info-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    background: linear-gradient(transparent, rgba(0, 0, 0, .92) 50%);
    padding: 40px 16px 18px;
    overflow: visible;
    pointer-events: none;
  }
  .info-inner > * { pointer-events: auto; }
  .info-inner { gap: 8px; }
  .info-title { font-size: 16px; }
  .info-desc {
    font-size: 12px;
    color: #c7c7cc;
    max-height: 3.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ext-link { padding: 6px 10px; font-size: 11px; }

  /* 모바일은 화살표 숨김 — 스와이프로 처리 */
  .nav { display: none; }
}

@media (max-width: 600px) {
  .site-header { padding: 32px 16px 22px; }
}