/* ============================================================
   칸 미디어 체험관 v6 — Cinematic Dark Monochrome
   바이브코딩 3원칙: 제거·레퍼런스·목적
   ============================================================ */

/* ── 토큰 (v8: OKLCH + 시네마틱 깊이) ── */
:root {
  /* 배경 — 따뜻한 흑색 톤 (순수 #000 회피, reference 14장) */
  --bg:        oklch(0.10 0.005 60);          /* #0a0908 */
  --bg2:       oklch(0.13 0.006 65);          /* #131110 */
  --bg3:       oklch(0.17 0.008 70);          /* #1a1815 */
  --bg-elev:   oklch(0.21 0.010 70);          /* 카드 elevation */

  /* 텍스트 */
  --text:      oklch(0.97 0.008 80);          /* 약간 따뜻한 흰 */
  --sub:       oklch(0.72 0.010 75);
  --muted:     oklch(0.42 0.010 70);

  /* 액센트 — 따뜻한 골드 (1색만, reference 절제 원칙) */
  --accent:    oklch(0.78 0.13 75);           /* 황금 호박색 */
  --accent-dim: oklch(0.78 0.13 75 / 0.4);
  --accent-line: oklch(0.78 0.13 75 / 0.18);

  /* 라인 */
  --border:    oklch(0.97 0.008 80 / 0.10);
  --border-2:  oklch(0.97 0.008 80 / 0.18);

  /* 이징 (reference §8-4) */
  --ease:      cubic-bezier(.2,.8,.2,1);
  --out-expo:  cubic-bezier(.16,1,.3,1);
  --in-out:    cubic-bezier(.65,.05,.36,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);

  /* 폰트 패밀리 (v13: Inter 글로벌 표준 + Pretendard 한글 — 깔끔 단일 톤) */
  --f-display: 'Inter', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --f-body:    'Inter', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* 다층 그림자 (시네마틱) */
  --shadow-1:  0 1px 2px oklch(0 0 0 / .4), 0 4px 16px oklch(0 0 0 / .25);
  --shadow-2:  0 2px 4px oklch(0 0 0 / .35), 0 10px 30px oklch(0 0 0 / .4);
  --shadow-card: 0 1px 2px oklch(0 0 0 / .5), 0 8px 24px oklch(0 0 0 / .35), 0 24px 48px oklch(0 0 0 / .25);
  --shadow-hover: 0 2px 6px oklch(0 0 0 / .5), 0 14px 40px oklch(0 0 0 / .5), 0 32px 64px oklch(0 0 0 / .4), 0 0 1px var(--accent-line);

  --hdr-h:     72px;
}

/* v8.1: SVG 필름 그레인 오버레이 — 강화 (reference §3-1) */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.13;
  mix-blend-mode: overlay;
  filter: url(#grain);
  background: transparent;
}

/* v9.1: flow field + conic spin 제거 (PM 피드백: 시각 부담) */
#bg-flow { display: none !important; }

/* v11: WebGL 셰이더 배경 비활성 (PM 피드백: 움직이는 거 거슬림) */
#bg-shader { display: none !important; }
body { position: relative; background: var(--bg); }
body > *:not(#bg-shader):not(.grain-overlay):not(.scroll-progress):not(svg) {
  position: relative;
  z-index: 1;
}
/* Hero 영상이 셰이더보다 위에 있어야 (영상 우선) */
.hero { isolation: isolate; }
.hero-vid, .hero-vignette, .hero-c, .hero-scroll { z-index: 2; position: relative; }

/* 섹션은 반투명 배경으로 셰이더가 비치게 (다른 차원) */
.about, .concept, .midcta, .visit {
  background-color: oklch(0.10 0.006 60 / 0.62);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}
.story, .highlights, .partners, .press {
  background-color: oklch(0.10 0.006 60 / 0.68);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.footer { background-color: oklch(0.08 0.006 60 / 0.88); backdrop-filter: blur(12px); }
.exhibits { background-color: oklch(0.10 0.006 60 / 0.65); backdrop-filter: blur(8px); }

/* 카드 배경도 살짝 반투명 (셰이더 톤이 카드 안에서 미세하게 비침) */
.story-card, .partner-card, .highlight-card {
  background-color: oklch(0.17 0.008 70 / 0.85);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* ============================================================
   v14 — Hero 풀 너비 + 글씨 가독성 (PM "양옆 잘림·글씨 안보임" 해결)
   ============================================================ */

/* body 가로 스크롤 차단 (음수 마진 보호) */
html, body { overflow-x: hidden; }

/* Hero 풀 너비 강제 — 화면 양옆 완전히 채움 */
.hero {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}
.hero-vid {
  width: 100% !important;
  height: 100% !important;
  min-width: 100vw !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* backdrop-filter blur 제거 (텍스트 가독성 우선) */
body .about, body .concept, body .midcta, body .visit, body .exhibits,
body .story, body .highlights, body .partners, body .press {
  background: var(--bg2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body .footer {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.story-card, .partner-card, .highlight-card {
  background-color: var(--bg-elev) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inter 폰트 weight 가독성 — 헤드라인 700, 본문 400, light 300 */
body { font-weight: 400; -webkit-font-smoothing: antialiased; }
.hero-headline {
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}
.about-title, .concept-title, .story-title,
.highlights-title, .exhibits-title, .midcta-title,
.visit-title, .partners-title, .press-title {
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}
.stat-num, .partner-stat-num, .story-card-num {
  font-weight: 300 !important;
  letter-spacing: -.03em !important;
}
.spotlight-name, .partner-card-name, .highlight-card-title {
  font-weight: 600 !important;
}

/* 거대 인덱스 ::before 약화 — 가독성 ↑ (배경 노이즈로만) */
body .concept::before, body .story::before, body .highlights::before,
body .exhibits::before, body .visit::before, body .partners::before,
body .press::before {
  opacity: 0.25 !important;
  -webkit-text-stroke: 1px var(--accent-line) !important;
}

/* hero-headline letter blur 제거 — 단순 fade-in */
.hero-headline .ch {
  filter: none !important;
  transform: translateY(24px) !important;
}

/* hero text-shadow 제거 (Inter 또렷하게) */
.hero-headline { text-shadow: 0 2px 20px oklch(0 0 0 / .6); }

/* Hero 헤드라인 max-width 풀 너비 강제 */
.hero-c {
  max-width: 1100px !important;
  padding: 0 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Hero 내부 요소 간격 정돈 — 겹침 차단 */
.hero-eyebrow {
  margin: 0 0 24px 0 !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  color: var(--accent) !important;
  font-family: var(--f-mono) !important;
  font-weight: 500 !important;
}
.hero-headline {
  margin: 0 0 52px 0 !important;
  font-size: clamp(36px, 5.5vw, 76px) !important;
  line-height: 1.32 !important;             /* 한국어 가독성 — 줄간 충분히 */
  letter-spacing: -.025em !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 24px oklch(0 0 0 / .55);
  max-width: 900px;
  word-break: keep-all;
}
.hero-sub {
  margin: 0 0 40px 0 !important;
  padding-top: 0 !important;
  font-size: 13px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--sub) !important;
  font-family: var(--f-mono) !important;
}
.hero-headline .ch {
  /* animation 끝난 후 정적 위치 유지 (overlap 차단) */
  animation-fill-mode: forwards !important;
  display: inline-block;
  vertical-align: baseline;
}
.hero-headline .gold {
  display: inline-block;
  margin-top: 0.08em;
}
.hero .btn-cta { margin: 0 !important; }

/* Hero "공간" 골드 — 굵게 강조하지 않고 색만 (겹침 방지) */
.hero-headline .gold {
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  padding: 0 !important;
  letter-spacing: -.025em !important;
  background: none !important;
  white-space: nowrap !important;
}
.hero-headline .gold::after { content: none !important; }

/* letter-by-letter delay 축소 — 빠르게 다 등장 */
.hero-headline .ch {
  animation-duration: 0.6s !important;
  transform: translateY(16px) !important;
}

/* Hero eyebrow / sub / CTA 등장 시간 단축 */
.hero-eyebrow { animation: eyebrow-in 0.7s var(--out-expo) 0.1s forwards !important; }
.hero-sub { animation: eyebrow-in 0.7s var(--out-expo) 1.2s forwards !important; }
.hero .btn-cta { animation: eyebrow-in 0.7s var(--out-expo) 1.4s forwards !important; }


/* ============================================================
   v13 — Inter 단일 + Lenis smooth + 더 강한 시네마틱 임팩트
   ============================================================ */

/* Inter 폰트 weight 활용 — 헤드라인 굵게, 본문 light */
body { font-weight: 400; }
.hero-headline {
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.16 !important;   /* 한국어 다줄 헤드라인 겹침 방지 — 글자 높이>줄간격 금지 */
}
.about-title,
.concept-title,
.story-title,
.highlights-title,
.exhibits-title,
.midcta-title,
.visit-title,
.partners-title,
.press-title {
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1.0 !important;
}
.spotlight-name,
.partner-card-name,
.highlight-card-title {
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}
.story-card-num,
.stat-num,
.partner-stat-num {
  font-weight: 200 !important; /* Inter thin — 모던 디스플레이 */
  letter-spacing: -.04em !important;
}

/* 거대 인덱스 — 더 잘 보이게 (opacity ↑, stroke 강화) */
body .concept::before,
body .story::before,
body .highlights::before,
body .exhibits::before,
body .visit::before,
body .partners::before,
body .press::before {
  font-weight: 200;
  font-family: var(--f-display);
  -webkit-text-stroke: 2px oklch(0.78 0.13 75 / 0.35) !important;
  opacity: 0.85 !important;
  font-size: clamp(120px, 18vw, 280px) !important;
  top: 40px !important;
  right: 4% !important;
}

/* Hero 풀스크린 더 시네마틱 */
.hero {
  min-height: 100dvh;
  isolation: isolate;
}
.hero-headline { max-width: 1280px; }

/* 모든 섹션 padding 더 넉넉히 (시네마틱 호흡) */
body .about, body .concept, body .story, body .highlights,
body .exhibits, body .visit, body .partners, body .press {
  padding-top: clamp(120px, 14vh, 180px) !important;
  padding-bottom: clamp(120px, 14vh, 180px) !important;
}

/* 헤드라인 letter-by-letter 등장 — opacity 1까지 더 큰 변화 */
.hero-headline .ch {
  transform: translateY(60px) !important;
  filter: blur(8px);
  animation-duration: 1.1s !important;
}
@keyframes ch-in {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* 카드 hover 더 강하게 */
.story-card:hover,
.partner-card:hover,
.highlight-card:hover {
  transform: translateY(-10px) scale(1.025) !important;
  box-shadow: 0 4px 12px oklch(0 0 0 / .55), 0 24px 60px oklch(0 0 0 / .55),
              0 48px 96px oklch(0 0 0 / .45),
              0 0 0 1px var(--accent) !important;
}

/* btn-cta 더 크게 + 골드 base */
.btn-cta {
  padding: 18px 44px !important;
  font-size: 14px !important;
  letter-spacing: .18em !important;
  border-width: 1px !important;
  border-color: oklch(0.78 0.13 75 / 0.6) !important;
}

/* nav 모노 + 더 굵게 — 언어 전환 시 위치 고정 (min-width) */
.nav a {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  min-width: 110px;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
}
.nav { gap: 8px !important; }

/* Lenis smooth scroll 호환 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* v10: 좌측 vertical scroll progress (네이티브 scroll-timeline) */
.scroll-progress {
  position: fixed;
  left: 0; top: 0;
  width: 2px; height: 100vh;
  background: linear-gradient(to bottom,
    var(--accent) 0%, var(--accent) var(--scroll, 0%),
    transparent var(--scroll, 0%), transparent 100%);
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 0 12px var(--accent-dim);
}
@property --scroll { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@supports (animation-timeline: scroll()) {
  @keyframes scroll-fill { to { --scroll: 100%; } }
  .scroll-progress {
    animation: scroll-fill linear both;
    animation-timeline: scroll(root);
  }
}

/* v13: Hero "공간" 골드 강조 — italic 제거, Inter 굵게 */
.hero-headline .gold {
  color: var(--accent);
  font-weight: 800;
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 0.05em;
  letter-spacing: -.04em;
}
.hero-headline .gold::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 2px;
  background: var(--accent);
  opacity: 0.4;
  transform-origin: left;
  animation: gold-line 1.6s var(--out-expo) 1.8s both;
  transform: scaleX(0);
}
@keyframes gold-line { to { transform: scaleX(1); } }

/* v10: 헤드라인 letter splitter 등장 — 더 명확 */
.hero-headline .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(48px);
  animation: ch-in 0.9s var(--out-expo) forwards;
}
.hero-headline .ch.space {
  display: inline-block;
  width: 0.28em;
}
@keyframes ch-in {
  to { opacity: 1; transform: none; }
}

/* v10: hero-eyebrow도 살짝 등장 */
.hero-eyebrow {
  opacity: 0;
  animation: eyebrow-in 1.2s var(--out-expo) 0.3s forwards;
}
.hero-sub, .hero .btn-cta {
  opacity: 0;
  animation: eyebrow-in 1.2s var(--out-expo) 2.2s forwards;
}
@keyframes eyebrow-in { to { opacity: 1; } }

/* ============================================================
   v10 — 한눈에 보이는 고도화 (안 거슬리고 강력)
   ============================================================ */

/* ① Hero 영상 천천히 zoom-in (시네마틱) */
.hero-vid {
  animation: hero-zoom 22s ease-out forwards;
  transform-origin: center center;
}
@keyframes hero-zoom {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.10); }
}

/* ② 섹션 배경에 정적 골드 라디얼 ambient (Hero·Highlights·Partners 중심점) */
.highlights {
  background:
    radial-gradient(ellipse 60% 70% at 50% 10%, oklch(0.78 0.13 75 / 0.06) 0%, transparent 60%),
    var(--bg);
}
.partners {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, oklch(0.78 0.13 75 / 0.05) 0%, transparent 65%),
    var(--bg);
}
.press {
  background:
    radial-gradient(ellipse 50% 80% at 50% 50%, oklch(0.78 0.13 75 / 0.05) 0%, transparent 60%),
    var(--bg);
}

/* ③ 카드 hover 시 골드 1px outline + scale 1.015 (확실히 보임) */
.story-card,
.partner-card,
.highlight-card {
  transition: transform .55s var(--out-expo), box-shadow .55s var(--out-expo),
              border-color .55s var(--out-expo), outline-color .55s var(--out-expo);
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.story-card:hover,
.partner-card:hover,
.highlight-card:hover {
  transform: translateY(-6px) scale(1.015);
  outline-color: var(--accent);
}

/* ④ Hero 헤드라인 letter-by-letter staggered fade-in (JS가 .ch span 분리) */
.hero-headline .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: ch-in 0.9s var(--out-expo) forwards;
}
.hero-headline .ch.space {
  width: 0.3em;
}
@keyframes ch-in {
  to { opacity: 1; transform: none; }
}

/* ⑤ Section title이 view 진입 시 페이드 + slide-up (CSS scroll-driven 폴백 포함) */
@keyframes title-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.about-title,
.concept-title,
.story-title,
.highlights-title,
.exhibits-title,
.midcta-title,
.visit-title,
.partners-title,
.press-title {
  animation: title-in 1s var(--out-expo) both;
}

/* ⑥ 스포트라이트 영상 영역에 미세 골드 코너 (디테일) */
.spotlight-video-wrap {
  position: relative;
}
.spotlight-video-wrap::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--accent-line) 0%, transparent 30%, transparent 70%, var(--accent-line) 100%) 1;
  pointer-events: none;
  z-index: 3;
}

/* ⑦ btn-cta-sm (헤더 우상단)에도 골드 hover 적용 */
.btn-cta-sm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--out-expo), border-color .35s var(--out-expo), background .35s var(--out-expo);
}
.btn-cta-sm::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .5s var(--out-expo);
  z-index: -1;
}
.btn-cta-sm:hover::before { transform: translateX(0); }
.btn-cta-sm:hover {
  color: oklch(0.15 0.02 75);
  border-color: var(--accent);
}

/* v9: 가변폰트 hover wght 변화 (reference §2-7) */
.section-label,
.thumb-num,
.spotlight-num,
.partner-stat-label,
.stat-label,
.footer-key,
.midcta-eyebrow,
.hero-eyebrow {
  transition: letter-spacing .5s var(--out-expo);
}
.about-title,
.concept-title,
.story-title,
.exhibits-title,
.visit-title,
.partners-title,
.press-title,
.highlights-title,
.midcta-title {
  transition: font-variation-settings .8s var(--out-expo), letter-spacing .8s var(--out-expo);
}
.about-title:hover,
.concept-title:hover,
.story-title:hover,
.partners-title:hover,
.press-title:hover,
.highlights-title:hover {
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 600;
  letter-spacing: -.028em;
}

/* v9: highlight-card hover gooey 효과 (reference §3-2) */
.highlights-grid {
  position: relative;
}
.highlights-grid::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(60px);
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .6s var(--out-expo);
  z-index: -1;
}
.highlights-grid:hover::before { opacity: 0.15; }

/* v8: prefers-reduced-motion 존중 (reference §12) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain-overlay { display: none; }
}

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

/* ── 공통 타이포 ── */
.section-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--hdr-h);
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-scr {
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--border);
}
.hdr-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  /* 3존 그리드: 브랜드(좌) · nav(중앙 고정) · 액션(우 고정).
     언어별 브랜드/CTA 글자수가 달라도 nav 위치가 항상 중앙으로 고정 → 좌우 흔들림 없음 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
  justify-self: start;
}
.brand-mark { width: 26px; height: 26px; }
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-self: center;
}
.nav a {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sub);
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--text); }
.hdr-r {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  justify-self: end;
}
.lang {
  display: flex;
  gap: 2px;
}
.lang-b {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  padding: 4px 7px;
  border-radius: 2px;
  transition: color .2s, background .2s;
}
.lang-b.is-on {
  color: var(--text);
  background: var(--bg3);
}
.lang-b:hover { color: var(--text); }
.btn-cta-sm {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 18px;
  border-radius: 2px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  /* 언어 전환 시 라벨 길이가 달라도 폭 고정 → 헤더 메뉴 좌우 밀림 방지 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  box-sizing: border-box;
  white-space: nowrap;
}
.btn-cta-sm:hover {
  background: var(--bg3);
  border-color: var(--sub);
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.burger span {
  display: block;
  height: 1px;
  background: var(--text);
  transition: all .3s var(--ease);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
  opacity: 1;
}
.hero-vid.is-fading { opacity: 0; }
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(5,5,5,.7) 100%),
    linear-gradient(to bottom, rgba(5,5,5,.4) 0%, transparent 30%, transparent 60%, rgba(5,5,5,.75) 100%);
}
.hero-c {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
}
.hero-headline {
  font-family: var(--f-body);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 44px;
}
.btn-cta {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(250,250,250,.5);
  padding: 14px 36px;
  border-radius: 2px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.btn-cta:hover {
  background: rgba(250,250,250,.08);
  border-color: var(--text);
}
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .2em;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--muted), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  background: var(--bg2);
  padding: 120px 0;
}
.about-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px;
}
.about-label { margin-bottom: 32px; }
.about-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 28px;
}
.about-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--sub);
}

/* ============================================================
   EXHIBITS — 스포트라이트 갤러리
   ============================================================ */
.exhibits {
  background: var(--bg);
  padding: 120px 0;
}
.exhibits-head {
  max-width: 1280px;
  margin: 0 auto 56px;
  padding: 0 40px;
}
.exhibits-label { margin-bottom: 16px; }
.exhibits-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.spotlight {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 24px;
  align-items: start;
}

/* 좌측: 큰 영상 */
.spotlight-main {
  position: sticky;
  top: calc(var(--hdr-h) + 24px);
}
.spotlight-video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg3);
  overflow: hidden;
  border-radius: 2px;
}
.spotlight-video-wrap video,
.spotlight-video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s var(--ease);
}
.spotlight-video-wrap.is-fading video,
.spotlight-video-wrap.is-fading img {
  opacity: 0;
}
/* 종횡비가 다른 영상(예: 세로형)은 잘리지 않게 전체 표시 */
.spotlight-video-wrap video.is-contain {
  object-fit: contain;
  background: #0a0a0b;
}
.spotlight-info {
  margin-top: 20px;
  min-height: 72px;
}
.spotlight-num {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 6px;
}
.spotlight-name {
  font-family: var(--f-body);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.spotlight-floor {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* 우측: 썸네일 리스트 — 자연 높이로 흐르고 좌측 영상이 sticky 고정(전체 페이지 스크롤로 13작품 모두 노출) */
.spotlight-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spotlight-list::-webkit-scrollbar { display: none; }

.thumb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s var(--ease);
  border: 1px solid transparent;
}
.thumb-item:hover,
.thumb-item.is-active {
  background: var(--bg3);
  border-color: var(--border);
}
.thumb-img {
  flex-shrink: 0;
  width: 72px;
  height: 40px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg3);
}
.thumb-body { flex: 1; min-width: 0; }
.thumb-num {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}
.thumb-item.is-active .thumb-num { color: var(--text); }
.thumb-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.thumb-floor {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ============================================================
   VISIT
   ============================================================ */
.visit {
  background: var(--bg2);
  padding: 120px 0;
}
.visit-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.visit-label { margin-bottom: 32px; }
.visit-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 40px;
}
.visit-meta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 48px;
}
.visit-row { display: flex; flex-direction: column; gap: 4px; }
.visit-key {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.visit-val {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.visit-map {
  position: relative;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
}
.visit-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* 다크 럭셔리 톤에 맞춰 지도 반전·채도 억제 */
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.55);
}
.visit-map-link {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: .04em;
  font-family: var(--f-mono);
  color: var(--accent);
  background: rgba(8,8,8,.82);
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.visit-map-link:hover {
  background: var(--accent);
  color: #0a0a0a;
}

/* ============================================================
   FOOTER (v7.7 — 4-col 법인 정보)
   ============================================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 72px 0 28px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.footer-col p { margin: 0 0 4px; }
.footer-brand {
  font-family: var(--f-body);
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text) !important;
  margin-bottom: 14px !important;
  word-break: keep-all;
}
.footer-meta {
  font-size: 12px;
  color: var(--sub);
  letter-spacing: .02em;
  line-height: 1.7;
}
.footer-key {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px !important;
}
.footer-val {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65;
  word-break: keep-all;
}
.footer-val a {
  color: var(--sub);
  transition: color .25s var(--ease);
}
.footer-val a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-lang {
  display: flex;
  gap: 2px;
}
.footer-copy {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .footer { padding: 56px 0 24px; }
  .footer-inner { padding: 0 20px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   v8 — 세련화 (reference 기반): 다층 그림자 + scroll reveal + 모노 라벨 + 미세 인터랙션
   ============================================================ */

/* ── 라벨류는 모노스페이스 (reference §10: 3종 대비) ── */
.section-label,
.thumb-num,
.spotlight-num,
.partner-stat-label,
.stat-label,
.footer-key,
.midcta-eyebrow,
.hero-eyebrow {
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: .14em;
}

/* ── 헤드라인 — Fraunces + Noto Serif KR (한글 세리프) ── */
.hero-headline,
.about-title,
.concept-title,
.story-title,
.exhibits-title,
.visit-title,
.partners-title,
.press-title,
.highlights-title,
.midcta-title,
.spotlight-name,
.partner-card-name,
.highlight-card-title {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 500;
}
.hero-headline {
  font-weight: 500;
  letter-spacing: -.035em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 480;
  text-shadow: 0 2px 30px oklch(0 0 0 / .55);
}
.story-card-num,
.partner-stat-num,
.stat-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'wght' 400;
  font-feature-settings: 'tnum';
}

/* ── 액센트 — 핵심 1~2 곳만 (절제) ── */
.btn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--out-expo), border-color .4s var(--out-expo);
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .55s var(--out-expo);
  z-index: -1;
}
.btn-cta:hover::before { transform: translateX(0); }
.btn-cta:hover {
  color: oklch(0.15 0.02 75);
  border-color: var(--accent);
  background: transparent;
}
.brand-mark { transition: filter .4s var(--ease); }
.brand:hover .brand-mark { filter: drop-shadow(0 0 8px var(--accent-dim)); }

/* ── 카드 시네마틱 그림자 + hover 미세 모션 ── */
.story-card,
.partner-card,
.highlight-card {
  background: var(--bg-elev);
  box-shadow: var(--shadow-card);
  transition: transform .6s var(--out-expo), box-shadow .6s var(--out-expo), border-color .6s var(--out-expo);
  will-change: transform;
}
.story-card:hover,
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-2);
}
.highlight-card { box-shadow: var(--shadow-2); }
.highlight-card:hover { box-shadow: var(--shadow-hover); }

/* ── Hero vignette 다층 (시네마틱) ── */
.hero-vignette {
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, oklch(0 0 0 / .8) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% -10%, oklch(0 0 0 / .65) 0%, transparent 50%),
    radial-gradient(ellipse 130% 130% at 50% 50%, transparent 30%, oklch(0 0 0 / .55) 100%),
    linear-gradient(to bottom, oklch(0 0 0 / .35) 0%, transparent 25%, transparent 70%, oklch(0 0 0 / .82) 100%);
}

/* ── Nav 마이크로 인터랙션 (밑줄 lerp) ── */
.nav a {
  position: relative;
  padding-bottom: 4px;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right .45s var(--out-expo);
}
.nav a:hover::after { right: 0; }
.nav a:hover { color: var(--text); }

/* ── Section label에 골드 점 + 1px 선 (강조) ── */
.section-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
}
.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--accent-dim);
}

/* ── stat-num에 골드 살짝 (액센트 확장) ── */
.stat-num,
.partner-stat-num {
  background: linear-gradient(135deg, var(--text) 50%, oklch(0.85 0.10 75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Reveal animation (reference §2-5) — 페이지 로드 시 staggered fade-in ── */
@keyframes reveal-up {
  from { opacity: 0.001; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.stat-item,
.story-card,
.partner-card,
.highlight-card {
  animation: reveal-up 0.85s var(--out-expo) both;
}
.stat-item:nth-child(1) { animation-delay: .05s; }
.stat-item:nth-child(2) { animation-delay: .15s; }
.stat-item:nth-child(3) { animation-delay: .25s; }
.stat-item:nth-child(4) { animation-delay: .35s; }
.story-card:nth-child(1) { animation-delay: .1s; }
.story-card:nth-child(2) { animation-delay: .25s; }
.story-card:nth-child(3) { animation-delay: .4s; }
.highlight-card:nth-child(1) { animation-delay: .05s; }
.highlight-card:nth-child(2) { animation-delay: .15s; }
.highlight-card:nth-child(3) { animation-delay: .25s; }
.highlight-card:nth-child(4) { animation-delay: .35s; }
.highlight-card:nth-child(5) { animation-delay: .45s; }
.highlight-card:nth-child(6) { animation-delay: .55s; }
.partner-card:nth-child(1) { animation-delay: .1s; }
.partner-card:nth-child(2) { animation-delay: .25s; }

/* ── 스포트라이트 영상 hover 미세 색감 ── */
.spotlight-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0 0 0 / .45) 0%, transparent 35%);
  pointer-events: none;
}
.spotlight-info { padding: 0 4px; }
.spotlight-num { color: var(--accent); }
.spotlight-name { letter-spacing: -.015em; }

/* ── Thumb 호버 미세 모션 ── */
.thumb-item {
  transition: background .35s var(--out-expo), border-color .35s var(--out-expo), padding-left .35s var(--out-expo);
}
.thumb-item.is-active {
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  border-color: transparent;
  background: var(--bg-elev);
}
.thumb-item.is-active .thumb-num { color: var(--accent); }
.thumb-num { font-size: 10px; }

/* ── Mid-CTA — 글래스 살짝 ── */
.midcta {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, oklch(0.78 0.13 75 / 0.04) 0%, transparent 70%),
    var(--bg2);
}
.midcta-title { color: var(--text); }

/* ── Footer brand 골드 hover ── */
.footer-val a { position: relative; }
.footer-val a:hover { color: var(--accent); }

/* ── Hero CTA 가운데 정렬 + 보조 라벨 ── */
.hero-eyebrow { color: var(--accent); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .spotlight {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .spotlight-main { position: static; }
  .spotlight-list {
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .thumb-item {
    flex-direction: column;
    align-items: flex-start;
    min-width: 140px;
    padding: 10px 12px;
  }
  .thumb-img { width: 100%; height: 78px; }
}
@media (max-width: 768px) {
  :root { --hdr-h: 60px; }
  .about, .exhibits, .visit { padding: 80px 0; }
  .about-inner { padding: 0 20px; }
  .exhibits-head { padding: 0 20px; }
  .visit-inner { padding: 0 20px; grid-template-columns: 1fr; gap: 40px; }
  .hdr-inner { padding: 0 20px; }
  .nav {
    position: fixed;
    top: var(--hdr-h); left: 0; right: 0;
    background: rgba(5,5,5,.97);
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    gap: 24px;
    transform: translateY(-120%);
    transition: transform .35s var(--ease);
    border-bottom: 1px solid var(--border);
    margin-left: 0;
  }
  .nav.is-open { transform: translateY(0); }
  .btn-cta-sm { display: none; }
  .burger { display: flex; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
  .hero-headline { font-size: 36px; }
}

/* ============================================================
   v7 — 콘텐츠 보강 섹션 (Concept / Story / Partners / FAQ / Press)
   디자인 원칙: 절제 / 검·흰·회 3톤 / 액센트 0건 / 화이트스페이스 우선
   ============================================================ */

/* ── Concept ── */
.concept {
  background: var(--bg);
  padding: 140px 0;
  border-top: 1px solid var(--border);
}
.concept-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
}
.concept-label { margin-bottom: 32px; }
.concept-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 48px;
  word-break: keep-all;
}
.concept-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.concept-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--sub);
  word-break: keep-all;
}
.concept-body p:first-child {
  font-size: 18px;
  color: var(--text);
  line-height: 1.75;
}

/* ── Story (3F / 2F / 1F) ── */
.story {
  background: var(--bg2);
  padding: 140px 0;
}
.story-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.story-head {
  max-width: 720px;
  margin-bottom: 72px;
}
.story-label { margin-bottom: 16px; }
.story-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  word-break: keep-all;
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.story-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 40px 36px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.story-card-num {
  font-family: var(--f-body);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--muted);
  line-height: 1;
}
.story-card-label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}
.story-card-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sub);
  word-break: keep-all;
}

/* ── Spotlight 부제 (Exhibits 보강) ── */
.spotlight-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--sub);
  margin-top: 10px;
  max-width: 480px;
  word-break: keep-all;
}
.thumb-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb-item.is-active .thumb-sub { color: var(--sub); }

/* ── Visit 보강 ── */
.visit-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  margin-bottom: 48px;
}
.visit-meta-grid .visit-row { gap: 6px; }

/* ── Partners ── */
.partners {
  background: var(--bg);
  padding: 140px 0;
  border-top: 1px solid var(--border);
}
.partners-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.partners-head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.partners-label { margin-bottom: 16px; }
.partners-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 24px;
  word-break: keep-all;
}
.partners-lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sub);
  word-break: keep-all;
}
.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 64px;
}
.partner-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 48px 40px;
  border-radius: 2px;
}
.partner-card-name {
  font-family: var(--f-body);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--text);
  margin-bottom: 14px;
}
.partner-card-role {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sub);
  word-break: keep-all;
}
.partners-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.partner-stat { text-align: left; }
.partner-stat-num {
  font-family: var(--f-body);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 10px;
}
.partner-stat-label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── FAQ ── */
.faq {
  background: var(--bg2);
  padding: 140px 0;
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;
}
.faq-head {
  margin-bottom: 56px;
}
.faq-label { margin-bottom: 16px; }
.faq-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  word-break: keep-all;
}
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  word-break: keep-all;
  transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--sub); }
.faq-q-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}
.faq-q-icon::before,
.faq-q-icon::after {
  content: '';
  position: absolute;
  background: var(--sub);
  transition: transform .3s var(--ease);
}
.faq-q-icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
}
.faq-q-icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.faq-item.is-open .faq-q-icon::after { transform: translateX(-50%) scaleY(0); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.faq-a-inner {
  padding: 0 0 28px 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--sub);
  word-break: keep-all;
  max-width: 720px;
}
.faq-item.is-open .faq-a { max-height: 360px; }

/* ── Press ── */
.press {
  background: var(--bg);
  padding: 140px 0;
  border-top: 1px solid var(--border);
}
.press-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.press-label { margin-bottom: 16px; }
.press-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 24px;
  word-break: keep-all;
}
.press-lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sub);
  margin-bottom: 36px;
  word-break: keep-all;
}
.press-mail {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 24px;
  letter-spacing: .01em;
  color: var(--text);
  margin-bottom: 28px;
}

/* ── 보도자료/소개서 PDF 다운로드 3종 (한·영·몽) ── */
.press-downloads {
  margin-top: 40px;
}
.press-dl-title {
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 600;
  margin-bottom: 24px;
}
.press-dl-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.press-dl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 148px;
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg2);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.press-dl-btn:hover {
  border-color: var(--accent-line);
  background: var(--bg3);
  transform: translateY(-2px);
}
.press-dl-lang {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}
.press-dl-ext {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--accent);
  font-family: var(--f-mono);
}
@media (max-width: 560px) {
  .press-dl-row { flex-direction: column; align-items: stretch; }
  .press-dl-btn { min-width: 0; flex-direction: row; justify-content: space-between; }
}

/* ── Responsive 보강 ── */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 20px; }
  .partners-grid { grid-template-columns: 1fr; }
  .partners-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .visit-meta-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 768px) {
  .concept, .story, .partners, .press { padding: 88px 0; }
  .concept-inner, .story-inner, .partners-inner, .press-inner { padding: 0 20px; }
  .story-card { padding: 32px 28px; }
  .story-card-num { font-size: 44px; }
  .partner-card { padding: 36px 28px; }
  .partner-stat-num { font-size: 32px; }
}

/* ============================================================
   v7.1 — 폰트 세련화 + 그리드 중앙정렬 + About stat 그리드화
   ============================================================ */

/* ── 글로벌 폰트 보강 ── */
body {
  font-family: var(--f-body);
  letter-spacing: -.005em;
}
/* Pretendard 헤드라인 — 깔끔한 모던 산세리프 톤, OpenType ss05 활성 */
.hero-headline,
.about-title,
.concept-title,
.story-title,
.exhibits-title,
.visit-title,
.partners-title,
.press-title,
.highlights-title,
.midcta-title,
.spotlight-name,
.partner-card-name,
.partner-stat-num,
.story-card-num,
.highlight-card-title,
.footer-brand,
.brand {
  font-feature-settings: 'ss05', 'ss06', 'cv01', 'tnum';
}
.hero-headline { font-weight: 600; letter-spacing: -.035em; }
.concept-title,
.story-title,
.about-title,
.partners-title,
.press-title,
.exhibits-title,
.visit-title,
.highlights-title,
.midcta-title { font-weight: 600; letter-spacing: -.025em; }
.spotlight-name,
.partner-card-name,
.story-card-num,
.partner-stat-num,
.stat-num,
.highlight-card-title { font-weight: 600; letter-spacing: -.02em; }

/* ── About: 4 stat 그리드화 + 중앙 정렬 ── */
.about-inner { max-width: 860px; text-align: center; }
.about-label { margin-bottom: 24px; }
.about-title { text-align: center; }
.about-body { font-size: 17px; line-height: 1.85; }
.stat-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -.015em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 10px;
}
.stat-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Partners: stats 중앙 정렬 + grid 균등 ── */
.partners-stats { text-align: center; }
.partner-stat { text-align: center; }
.partners-grid { max-width: 1080px; margin-left: auto; margin-right: auto; margin-bottom: 64px; }
.partner-card { text-align: center; }
.partner-card-name { letter-spacing: -.005em; }
.partner-card-role { max-width: 380px; margin-left: auto; margin-right: auto; }

/* ── Story: card 내부도 중앙 정렬 ── */
.story-head { margin-left: auto; margin-right: auto; text-align: center; }
.story-card { text-align: center; align-items: center; }
.story-card-num { letter-spacing: -.04em; }
.story-card-body { max-width: 280px; margin: 0 auto; }

/* ── Concept: 가운데 정렬 ── */
.concept-inner { text-align: center; }
.concept-body { max-width: 640px; margin: 0 auto; }

/* ── Press 가운데(이미 적용) 강화 ── */
.press-lead { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 36px; }

/* ── Hero headline 한글 표시 보강 ── */
@supports (font-variation-settings: normal) {
  .hero-headline { font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0; }
}

/* ── 모바일 stat 그리드 ── */
@media (max-width: 700px) {
  .stat-block { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .stat-num { font-size: 30px; }
}

/* ============================================================
   v7.2 — Highlights (루브르 asymmetric grid 차용) + Mid-CTA
   ============================================================ */

/* ── Highlights: 2x3 asymmetric, 첫 카드 큼 ── */
.highlights {
  background: var(--bg);
  padding: 140px 0;
  border-top: 1px solid var(--border);
}
.highlights-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.highlights-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.highlights-label { margin-bottom: 16px; }
.highlights-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -.018em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 20px;
  word-break: keep-all;
}
.highlights-lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sub);
  max-width: 580px;
  margin: 0 auto;
  word-break: keep-all;
}
.highlights-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 220px;
  gap: 16px;
}
.highlight-card {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg3);
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .6s var(--ease);
}
.highlight-card.is-feature {
  grid-column: span 1;
  grid-row: span 2;
}
.highlight-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), opacity .4s var(--ease);
  opacity: .82;
}
.highlight-card:hover .highlight-card-img {
  transform: scale(1.04);
  opacity: 1;
}
.highlight-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,5,0) 30%, rgba(5,5,5,.7) 75%, rgba(5,5,5,.92) 100%);
  pointer-events: none;
}
.highlight-card-body {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  z-index: 2;
}
.highlight-card-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,250,250,.7);
  margin-bottom: 8px;
}
.highlight-card-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--text);
  word-break: keep-all;
}
.highlight-card.is-feature .highlight-card-title {
  font-size: 32px;
  line-height: 1.1;
}
.highlight-card.is-feature .highlight-card-label {
  font-size: 11px;
}

/* ── Mid-CTA 띠 ── */
.midcta {
  background: var(--bg2);
  padding: 96px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.midcta-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.midcta-text { flex: 1; min-width: 260px; }
.midcta-eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.midcta-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -.014em;
  line-height: 1.2;
  color: var(--text);
  word-break: keep-all;
}

/* ── Highlights 모바일 ── */
@media (max-width: 900px) {
  .highlights-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }
  .highlight-card.is-feature {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 4/3;
  }
  .highlight-card.is-feature { grid-row: auto; }
  .highlight-card.is-feature .highlight-card-title { font-size: 26px; }
}
@media (max-width: 768px) {
  .highlights { padding: 88px 0; }
  .highlights-inner { padding: 0 20px; }
  .midcta { padding: 64px 0; }
  .midcta-inner { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ============================================================
   v17 — 초고도화: 스크롤 reveal · 접근성 포커스 · 카운트업 · 폴리시
   (PM 절제 방향 유지 — 배경 모션 추가 없음, 진입 시 1회 fade-up만)
   ============================================================ */

/* JS 활성 시에만 reveal 적용 (no-JS·구형 브라우저는 즉시 노출) */
html.js-on .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .9s var(--out-expo),
    transform .9s var(--out-expo);
  transition-delay: var(--reveal-d, 0ms);
  will-change: opacity, transform;
}
html.js-on .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* IO가 제어하므로 로드 시점 일괄 애니메이션 비활성 (fold 아래 손실 방지) */
html.js-on .reveal {
  animation: none !important;
}
/* reveal 완료 후 will-change 해제 (메모리) */
html.js-on .reveal.is-in {
  will-change: auto;
}

/* ── 접근성: 키보드 포커스 골드 링 (마우스 클릭엔 안 뜸) ── */
a:focus-visible,
button:focus-visible,
.lang-b:focus-visible,
.thumb-item:focus-visible,
.highlight-card:focus-visible,
.visit-map-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* 마우스 클릭 시 잔여 outline 제거 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ── Skip to content (스크린리더·키보드 첫 진입) ── */
.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 10000;
  padding: 10px 20px;
  background: var(--accent);
  color: oklch(0.16 0.02 70);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  transition: transform .25s var(--out-expo);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: none;
}

/* ── 카운트업 중 폭 흔들림 방지 (tabular 숫자) ── */
.stat-num,
.partner-stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── reduced-motion: reveal 즉시 노출 (transition 무력화는 위 공통 규칙이 처리) ── */
@media (prefers-reduced-motion: reduce) {
  html.js-on .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   v18 — Hero 금색 단어 겹침 최종 수정 (정본 override, 파일 맨 끝 = 최고 우선)
   누적된 .gold 규칙들(inline-block + margin-top + position:relative)이
   인라인블록 수직정렬을 깨뜨려 "공간"이 윗줄로 떠올라 겹침.
   금색 단어를 일반 인라인 텍스트로 흐르게 해 주변 글자와 같은 라인박스 공유.
   ============================================================ */
.hero-headline .gold {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  vertical-align: baseline !important;
  letter-spacing: inherit !important;
  color: var(--accent) !important;
  font-weight: inherit !important;
  font-style: normal !important;
  background: none !important;
}
.hero-headline .gold::after { content: none !important; }
.hero-headline .gold .ch {
  vertical-align: baseline !important;
  animation-fill-mode: forwards !important;
}

/* ════════════════════════════════════════════════════════════════
   v18 — Hero 금색 단어 겹침 최종 해결 (단일 권위 override)
   누적된 .gold 규칙들(inline-block + margin-top + position:relative)이
   인라인블록 baseline 정렬을 깨 "공간"이 윗줄로 떠올라 1행과 겹쳤다.
   금색 단어를 일반 인라인 텍스트로 흐르게 해 같은 줄 baseline에 정렬.
   ════════════════════════════════════════════════════════════════ */
.hero-headline .gold {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  vertical-align: baseline !important;
  top: auto !important;
  letter-spacing: inherit !important;
  color: var(--accent) !important;
  font-weight: inherit !important;
  background: none !important;
}
.hero-headline .gold::after { content: none !important; }
/* 금색 단어 내부 글자도 머리글자와 동일 인라인블록 정렬 */
.hero-headline .gold .ch {
  display: inline-block !important;
  vertical-align: baseline !important;
  animation-fill-mode: forwards !important;
}



/* ============================================================
   v19 — Exhibits 층별 탭(3F/2F/1F) + 2열 그리드
   한 층씩만 노출(4~5개) → 우측 리스트 늘어짐 제거.
   ============================================================ */
.spotlight-right { display: flex; flex-direction: column; min-width: 0; }
.floor-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.floor-tab {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.floor-tab:hover { color: var(--text); }
.floor-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.floor-tab-cnt { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.floor-tab.is-active .floor-tab-cnt { color: var(--accent); }
.floor-theme {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 18px;
  min-height: 18px;
}
.spotlight-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-direction: unset !important;
  max-height: none !important;
  overflow: visible !important;
}
.thumb-item {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px !important;
}
.thumb-item.is-hidden { display: none !important; }
.thumb-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
.thumb-body { width: 100%; }
.thumb-title {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .spotlight-list {
    grid-template-columns: 1fr 1fr;
    flex-direction: unset !important;
    overflow-x: visible !important;
  }
  .thumb-item { min-width: 0 !important; }
  .thumb-img { width: 100% !important; height: auto !important; }
}