/* =============================================================
   Unaffordable Nostalgia
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Director";
  src: url("../fonts/Director-Bold.woff2") format("woff2"),
       url("../fonts/Director-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #12120d;
  --ink-soft:   #4a4a42;
  --ink-faint:  #8b8b80;
  --paper:      #e7e2ea;   /* pale lavender */
  --paper-2:    #ece8ee;
  --line:       rgba(18, 18, 13, 0.18);
  --line-soft:  rgba(18, 18, 13, 0.10);

  /* holographic accent */
  --holo: linear-gradient(100deg,
            #f4c4d6 0%, #d9c7ea 22%, #bcdcef 45%,
            #bfeecb 63%, #efe3c0 82%, #f4c4d6 100%);

  --maxw: 1500px;
  --gutter: clamp(18px, 5vw, 64px);

  --font-display: "Director", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Apple SD Gothic Neo", "Noto Sans KR",
               "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
               Arial, sans-serif;
  /* 통합 폰트: 라틴=Director, 한글=Sandoll Jebi2, 중문=Source Han Serif */
  --font-uni: "Director", "sandoll-jebi2", "Sandoll Jebi2",
              "source-han-serif-hk-subset", "Noto Serif TC",
              "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-snap-type: y mandatory;   /* 스크롤이 각 지점에 정확히 물림 */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden 는 position:sticky 를 깨므로 사용하지 않음.
     가로 넘침은 html { overflow-x: clip } 로 처리. */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }

/* language-specific typefaces
   ko: Sandoll Jebi2 (Adobe Fonts) · zh(번체): Source Han Serif TC = Noto Serif TC
   실제 적용을 보장하는 우선순위 규칙은 파일 맨 끝에 한 번 더 선언한다. */
[lang="zh"] { font-family: "Director", "source-han-serif-hk-subset", "Noto Serif TC", "Source Han Serif TC", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", serif; }
[lang="ko"] { font-family: "Director", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  padding-top: max(14px, env(safe-area-inset-top));
  mix-blend-mode: difference;      /* text stays legible over any bg */
  color: #fff;
  transition: background .35s ease, color .35s ease, mix-blend-mode .01s;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-header__title {
  font-family: var(--font-uni);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header__nav {
  display: none;
  gap: 26px;
  font-family: var(--font-uni);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-header__nav a { opacity: .8; transition: opacity .2s; }
.site-header__nav a:hover { opacity: 1; }

/* language switch */
.lang-switch {
  display: flex;
  gap: 2px;
  font-family: var(--font-uni);
}
.lang-switch button {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 4px 8px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s;
  line-height: 1;
}
.lang-switch button.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang-switch button:hover { opacity: .85; }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--gutter);
  padding-bottom: clamp(60px, 12vh, 120px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero__bg {
  position: absolute; inset: 0;
  background-image: url("../img/hero-mobile-gray.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(231,226,234,0) 40%, rgba(231,226,234,.15) 70%, rgba(231,226,234,.55) 100%);
}
.hero__inner { position: relative; z-index: 2; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -0.02em;
  font-size: clamp(38px, 10.2vw, 150px);
  text-transform: none;
  color: var(--ink);
  mix-blend-mode: overlay;
  display: flex;
  flex-direction: column;
}
.hero__title span:nth-child(2) { padding-left: 0.06em; }

.hero__meta {
  margin-top: clamp(20px, 4vh, 40px);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px); /* 마지막 페이지(푸터) 정보와 동일 사이즈 */
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  max-width: none;
}
.hero__meta .hero__date { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -0.01em; }

/* KV 하단 정보 — 영문 1칼럼만 */
.hero__meta--cols { max-width: none; }
.hero__metacol p { margin: 0; font-weight: 700; }

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 22px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 12px;
  font-family: var(--font-uni);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__scroll-line {
  width: 60px; height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: scrollpulse 2.4s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleX(.4); opacity: .4; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* =============================================================
   SECTIONS  (rendered by JS)
   ============================================================= */
.section {
  position: relative;
  padding: clamp(64px, 12vh, 150px) 0;
  border-top: 1px solid var(--line-soft);
}
.section__wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* section heading row */
.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: clamp(28px, 5vh, 64px);
}
.section__index {
  font-family: var(--font-uni);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-faint);
}
.section__kicker {
  font-family: var(--font-uni);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.section__by {
  font-family: var(--font-uni);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* artist name plate */
.artist__plate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.artist__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 8vw, 88px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.artist__role {
  font-family: var(--font-uni);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* sub-block label (작업 소개 / 작가 소개) */
.subblock { margin-top: clamp(40px, 7vh, 90px); }
.subblock:first-of-type { margin-top: 0; }
.subblock__label {
  font-family: var(--font-uni);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 12px;
  margin-bottom: clamp(20px, 3vh, 34px);
  border-bottom: 1px solid var(--line);
}
.subblock__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.08;
  margin-bottom: clamp(20px, 3vh, 34px);
}

/* ---------- the trilingual columns ---------- */
.cols {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: 1 col */
  gap: clamp(28px, 4vw, 48px);
}
.col { min-width: 0; }
.col__lang {
  display: inline-block;
  font-family: var(--font-uni);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.col p {
  font-size: 15.5px;
  line-height: 1.85;
  margin-bottom: 1.1em;
  color: var(--ink);
  text-wrap: pretty;
}
.col p:last-child { margin-bottom: 0; }
/* 영문 단어 중간 하이픈 분절 금지 (아래 언어별 줄바꿈 블록에서 hyphens:none) */

/* On mobile, show only the active language column */
.col { display: none; }
body[data-lang="ko"] .col[data-lang="ko"],
body[data-lang="en"] .col[data-lang="en"],
body[data-lang="zh"] .col[data-lang="zh"] { display: block; }

/* =============================================================
   STORY  — stepped scrollytelling
   각 문단 = 스크롤 스텝. 텍스트는 하단에 고정, 이미지는 크게.
   문단 전환 시 가우시안 블러 크로스페이드.
   ============================================================= */
.story { position: relative; }

/* pinned visual stage */
.story__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* transparent scroll drivers (snap points) laid over the sticky stage */
.story__steps { position: relative; margin-top: -100svh; z-index: 2; pointer-events: none; }
.story__step  { height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }

/* ---- media (big dummy image box) ---- */
.story__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--gutter);
  margin-bottom: 0;
}
.media__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(18,18,13,.035) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, #c4c1cb 0%, #b7b4c0 100%);
  color: var(--ink-soft);
  opacity: 0;
  filter: blur(22px);
  transform: scale(1.015);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.media__slide.is-active { opacity: 1; filter: blur(0); transform: none; }
.media__tag {
  text-align: center;
  font-family: var(--font-uni);
  letter-spacing: .12em;
  line-height: 1.7;
}
.media__tag b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 64px);
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 6px;
}
.media__tag small { font-size: 11px; text-transform: uppercase; color: var(--ink-faint); }
/* corner frame marks */
.media__slide::before, .media__slide::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--ink-soft); opacity: .5;
}
.media__slide::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.media__slide::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* ---- text panel pinned at the bottom third ---- */
.story__panel {
  flex: 0 0 auto;
  height: 40svh;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.4vh, 26px) var(--gutter) clamp(16px, 2.4vh, 26px);
  position: relative;
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1;
}
.panel__kicker {
  font-family: var(--font-uni);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 22px);
  line-height: 1.15;
  margin-left: auto;
  color: var(--ink-soft);
}

/* the swapping paragraph area */
.panel__body { position: relative; flex: 1 1 auto; min-height: 0; }
.pstep {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(16px);
  transform: translateY(6px);
  transition: opacity .55s ease, filter .55s ease, transform .55s ease;
  overflow: hidden;
  pointer-events: none;
}
.pstep.is-active { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }
.pstep .cols { gap: clamp(20px, 3vw, 44px); }
.pstep .col p {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
  margin: 0;
}
.pstep .col__lang { margin-bottom: 8px; }

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-uni);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.panel__count b { color: var(--ink); }
.panel__hint {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase;
}
.panel__hint::after {
  content: ""; width: 26px; height: 1px; background: currentColor;
  animation: scrollpulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .media__slide, .pstep { transition: none; }
  .panel__hint::after { animation: none; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 10vh, 120px) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
  scroll-snap-align: start;
}
.site-footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 9vw, 96px);
  line-height: .95;
  letter-spacing: -0.015em;
  margin-bottom: clamp(28px, 5vh, 56px);
  overflow-wrap: break-word;
}
.hero__title, .section__title, .artist__name, .subblock__title { overflow-wrap: break-word; }
.site-footer__info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  font-family: var(--font-uni);
  font-size: 12.5px;
  letter-spacing: .03em;
  max-width: 640px;
}
.site-footer__info > div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; }
.site-footer__info dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .12em; }
.site-footer__logos { margin: clamp(40px, 7vh, 80px) 0 28px; }
.site-footer__logos img { width: 100%; max-width: 720px; height: auto; opacity: .9; }
.site-footer__copy {
  font-family: var(--font-uni);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* =============================================================
   SCROLL PROGRESS RAIL
   ============================================================= */
.progress-rail {
  position: fixed;
  top: 0; right: 0;
  width: 3px; height: 100%;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progress-rail__fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--holo);
  background-size: 100% 300%;
}

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  .hero__scroll-line { animation: none; }
}

/* =============================================================
   RESPONSIVE — TABLET
   ============================================================= */
@media (min-width: 720px) {
  .hero__scroll { display: flex; }
  .site-footer__info { grid-template-columns: 1fr 1fr; gap: 22px 48px; }
}

/* =============================================================
   RESPONSIVE — DESKTOP (3 columns, all languages)
   ============================================================= */
@media (min-width: 1000px) {
  .site-header__nav { display: flex; }

  /* desktop uses the wide holographic key visual */
  .hero__bg { background-image: url("../img/hero-mobile-gray.jpg"); }

  /* show ALL three language columns side-by-side */
  .col { display: block !important; }
  .cols { grid-template-columns: repeat(3, 1fr); }

  /* language switch becomes a passive indicator on desktop */
  .lang-switch { display: none; }

  .section__head { grid-template-columns: 1fr; }
}

/* very wide */
@media (min-width: 1600px) {
  body { font-size: 17px; }
}

/* =============================================================
   NEW SECTION TYPES (info / statement / map / real images)
   real content pass — 2026-08
   ============================================================= */

/* hero subtitle */
.hero__subtitle {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3.4vw, 40px);
  letter-spacing: .12em;
  margin-top: 6px;
  color: var(--ink);
  mix-blend-mode: overlay;
}

/* ---- taller bottom panel so dense text fits; media flexes ---- */
.story__panel { height: clamp(340px, 56svh, 680px); }
.story__media { min-height: 30svh; }
.pstep { overflow-y: auto; scrollbar-width: none; }
.pstep::-webkit-scrollbar { display: none; }
.story:not(.story--full) .pstep .col p { font-size: 14px; }
.pstep__note {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-uni);
  font-size: 11px; letter-spacing: .04em; line-height: 1.6;
  color: var(--ink-faint);
}

/* ---- real image media (portraits / maps): contain, not cover ---- */
.media__slide--image {
  background: linear-gradient(160deg, #d7d4dc, #c7c4cf);
  padding: clamp(16px, 3vw, 40px);
}
.media__slide--image img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  object-position: center;
}
.media__slide--image::before, .media__slide--image::after { opacity: .35; }
/* MAP: 흰 박스·테두리·코너마크 없이 첨부한 도면(투명 PNG)만 종이 위에 표시 */
.media__slide--map { background: transparent; border: none; padding: 0; }
.media__slide--map::before, .media__slide--map::after { content: none; }
.media__slide--map img { object-position: center; }

/* ---- STATEMENT (no media, full-height panel) ---- */
.story--full .story__panel {
  height: 100svh;
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(40px, 8vh, 90px);
}
.story--full .panel__body { flex: 1 1 auto; }
.story--full .pstep { display: flex; align-items: center; }
.story--full .pstep .cols { width: 100%; }
.story--full .pstep .col p { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.8; }
.story--full .panel__head { border-bottom-color: var(--line); }

/* ---- INFO (holographic bg kept, info at bottom) ---- */
.story--info .story__sticky { background: var(--paper); }
.story__bg {
  position: absolute; inset: 0;
  background-image: url("../img/hero-mobile-gray.jpg");
  background-size: cover; background-position: center;
}
.story__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(231,226,234,0) 30%, rgba(231,226,234,.35) 55%, var(--paper) 88%);
}
.story__panel--info {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: auto; max-height: 74svh;
  background: linear-gradient(to top, var(--paper) 72%, rgba(231,226,234,0));
  padding-top: clamp(30px, 6vh, 60px);
}
.info-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vh, 34px);
  overflow-y: auto; scrollbar-width: none;
}
.info-grid::-webkit-scrollbar { display: none; }
.info-col__head {
  font-family: var(--font-uni); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.info-row { margin-bottom: 12px; }
.info-row:last-child { margin-bottom: 0; }
.info-row__label {
  font-family: var(--font-uni); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.info-row__value { font-size: 14px; line-height: 1.55; }

/* ---- MAP ---- */
.story--map .media__slide--map { border-color: var(--line); }
.map__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 34px); line-height: 1.1;
}

/* ---- panel link (instagram) ---- */
.panel__link {
  font-family: var(--font-uni); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-soft); text-decoration: none;
}
.panel__link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- DESKTOP overrides for new types ---- */
@media (min-width: 1000px) {
  .story__bg { background-image: url("../img/hero-mobile-gray.jpg"); }
  .info-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px); }
  .story--map .story__panel--map .panel__body { display: flex; align-items: flex-start; }
}

/* =============================================================
   OPENING (KV → INFO) : 배경 고정, 텍스트 레이어만 블러 교체
   ============================================================= */
.story--opening .story__sticky { background: var(--paper); }

/* the shared holographic background stays put inside the sticky */
.story--opening .hero__bg,
.story--opening .hero__scrim { position: absolute; inset: 0; }

/* foreground text layers crossfade with gaussian blur */
.opening__layer {
  position: absolute; inset: 0;
  opacity: 0; filter: blur(18px);
  transition: opacity .8s ease, filter .8s ease;
  pointer-events: none;
}
.opening__layer.is-active { opacity: 1; filter: blur(0); pointer-events: auto; }

/* layer 0 — KEY VISUAL, bottom-anchored */
.opening__layer--kv {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--gutter);
  padding-bottom: clamp(60px, 12vh, 120px);
}
.opening__layer--kv .hero__scroll { left: var(--gutter); bottom: 22px; }

/* layer 1 — INFO block at the bottom */
.opening__layer--info { pointer-events: none; }
.opening__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 84svh; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(to top, var(--paper) 70%, rgba(231,226,234,.65) 88%, rgba(231,226,234,0));
  padding: clamp(48px, 9vh, 110px) var(--gutter) clamp(24px, 5vh, 52px);
}
.opening__info::-webkit-scrollbar { display: none; }
.opening__layer--info.is-active .opening__info { pointer-events: auto; }
.opening__info .panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding-bottom: 12px; margin-bottom: clamp(18px, 3vh, 30px);
  border-bottom: 1px solid var(--line);
}

/* =============================================================
   STAGE : KV → INFO → STATEMENT (배경 페이드아웃 + 제자리 전환)
   ============================================================= */
.story--stage .story__sticky { background: var(--paper); }

/* 배경 레이어 — STATEMENT 로 넘어갈 때 페이드아웃 */
.stage__bg {
  position: absolute; inset: 0;
  opacity: 1;
  transition: opacity .8s ease;
  will-change: opacity;
}
.stage__bg.is-hidden { opacity: 0; }
.stage__bg .hero__bg,
.stage__bg .hero__scrim { position: absolute; inset: 0; }

/* lines.svg — 고정, 배경과 텍스트 사이 레이어의 라인 텍스처 (info부터 노출) */
.stage__lines {
  position: absolute;
  left: -7%; top: 50%;
  transform: translateY(-50%);
  width: 114%; height: auto;         /* SVG 좌우 여백(각 5%)을 화면 밖으로 밀어 그림이 좌우 끝까지 꽉 참(배경처럼). 세로는 넘치면 상·하단 짤림 */
  max-width: none;
  z-index: 1;                        /* 배경(#stageBg) 위, 텍스트 아래 */
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: multiply;
  transition: opacity .6s ease;
}
.stage__lines.is-off { opacity: 0; }  /* KV(1스크롤)에선 숨김 */

/* STATEMENT scene — 화면 전체 3칼럼 (배경 없이 종이 위) */
.opening__layer--statement { pointer-events: none; }
.opening__layer--statement.is-active { pointer-events: auto; }
.panel--statement {
  height: 100%;
  display: flex; flex-direction: column;
  padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(40px, 8vh, 90px);
}
.panel--statement .panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel--statement .panel__by {
  font-family: var(--font-uni); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-soft); margin-left: auto;
}
.panel--statement .panel__body { position: relative; flex: 1 1 auto; min-height: 0; }
.panel--statement .pstep { display: flex; align-items: center; }
/* 문단이 중앙 고정이 아니라 상단 → 중단 → 하단 순으로 채워지고 다시 반복 */
.panel--statement .pstep:nth-child(3n+1) { align-items: flex-start; }  /* 1·4·7 문단: 상단 */
.panel--statement .pstep:nth-child(3n+2) { align-items: center; }      /* 2·5·8 문단: 중단 */
.panel--statement .pstep:nth-child(3n)   { align-items: flex-end; }    /* 3·6   문단: 하단 */
.panel--statement .pstep .cols { width: 100%; }
.story--stage .panel--statement .pstep .col p {
  font-size: 16px;
}

/* STATEMENT = 타이틀 화면: "Unaffordable Nostalgia" + 하단 구분선(head), byline 하단 좌측 */
.statement__headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink);
}
.panel__foot--by { display: block; }
.panel__foot--by .cols { width: 100%; }
.statement__by {
  font-family: var(--font-uni); font-weight: 700;
  font-size: 12px; letter-spacing: .06em; color: var(--ink-soft);
}

/* =============================================================
   SCENE (media + bottom text) inside the shared stage
   ============================================================= */
.scene--media { display: flex; flex-direction: column; }

/* =============================================================
   WORK scene — 이미지 단독(3형태) ↔ 본문(Statement식 누적)
   ============================================================= */
.scene--work .work__media,
.scene--work .work__text { position: absolute; inset: 0; }

/* 이미지 레이어: 슬라이드가 겹쳐 있고 활성만 보임 */
.work__slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-content: stretch; align-items: stretch;   /* 이미지 상하단 화면 전체 채움 */
  padding: clamp(64px, 9vh, 100px) var(--gutter) clamp(32px, 5vh, 56px);
  opacity: 0; filter: blur(20px); transform: scale(1.015);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
  pointer-events: none;
}
.work__slide.is-active { opacity: 1; filter: blur(0); transform: none; }
/* 빗금 회색칸 (내부 글씨 없음) — 전체 높이 */
.work__box {
  width: 100%; height: 100%;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(18,18,13,.05) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #c4c1cb 0%, #b7b4c0 100%);
}
/* 실제 이미지가 들어오면: 빗금 배경 없이 이미지가 박스를 채움 (크레딧이 사진 아래로 나가야 하니 clip 안 함) */
.work__box--filled { border: none; background: none; position: relative; min-width: 0; min-height: 0; }
/* 촬영 크레딧 — 사진 '바로 아래' 좌측(사진 밖). top 은 JS(placeCredit)가 렌더 이미지 하단에 맞춰 지정.
   폰트/사이즈/색은 상단 네비게이터와 동일(difference 블렌드) */
.work__credit {
  position: absolute; left: 0; top: 100%; margin: 0; z-index: 2; white-space: nowrap;
  font-family: var(--font-uni); font-size: 11px; letter-spacing: .16em;
  color: #383838; pointer-events: none;
}
.work__img { width: 100%; height: 100%; object-fit: contain; object-position: top left; display: block; }
/* 폭만 다름(세로=1칼럼 / 정방·가로=1-2칼럼), 높이는 전체 */
.work__slide--v  .work__box { grid-column: 1 / 2; }  /* 1칼럼 */
.work__slide--sq .work__box { grid-column: 1 / 3; }  /* 1-2칼럼 */
.work__slide--h  .work__box { grid-column: 1 / 3; }  /* 1-2칼럼 */
.work__slide--col23 .work__box { grid-column: 2 / 4; grid-row: 1; }  /* 이미지 2-3칼럼(타이틀 1칼럼) */

/* 작가 소개(Bio) — 초상을 지정 칼럼(1/2/3)에 배치 */
.work__portrait {
  display: block;
  width: 100%; height: auto;
  max-width: 100%; max-height: 78svh;
  object-fit: contain; object-position: top left;
  align-self: start; justify-self: start;
}
.work__slide--col1   .work__portrait { grid-column: 1 / 2; }
.work__slide--col2   .work__portrait { grid-column: 2 / 3; }
.work__slide--col3   .work__portrait { grid-column: 3 / 4; }
.work__slide--col1-2 .work__portrait { grid-column: 1 / 3; }  /* 2칼럼 폭 */

/* 이미지 바로 옆 칼럼 = 작가명 + 작업 제목 (이미지 1칼럼→2칼럼 / 1-2칼럼→3칼럼) */
.work__cap { grid-column: 3 / 4; align-self: start; display: flex; flex-direction: column; font-family: var(--font-uni); }
.work__slide--v  .work__cap { grid-column: 2 / 3; }   /* 세로 이미지(1칼럼) → 2칼럼 */
.work__slide--sq .work__cap,
.work__slide--h  .work__cap { grid-column: 3 / 4; }   /* 1-2칼럼 이미지 → 3칼럼 */
.work__slide--col23 .work__cap { grid-column: 1 / 2; grid-row: 1; align-self: start; }   /* 이미지 2-3칼럼 → 타이틀 1칼럼 상단 */
.work__cap-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px); line-height: 1.05;
  color: var(--ink); margin-bottom: 6px;
}
.work__cap-title {
  display: block;
  font-weight: 700; font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.25; color: var(--ink-soft);
}
/* 데스크톱: 3언어 제목 모두 표시. 모바일(<1200px): 활성 언어 제목만 */
@media (max-width: 1199px) {
  .work__cap-title[data-lang] { display: none; }
  body[data-lang="ko"] .work__cap-title[data-lang="ko"],
  body[data-lang="en"] .work__cap-title[data-lang="en"],
  body[data-lang="zh"] .work__cap-title[data-lang="zh"] { display: block; }
}

/* 텍스트 레이어 (Statement식 전체화면 3칼럼) */
.work__text {
  display: flex; flex-direction: column;
  padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(40px, 8vh, 90px);
  transition: opacity .55s ease, filter .55s ease;
}
.work__text .panel__body { position: relative; flex: 1 1 auto; min-height: 0; }
.work__text .pstep { display: flex; }
.work__text .pstep .cols { width: 100%; }
.work__text .pstep.pos-top { align-items: flex-start; }
.work__text .pstep.pos-mid { align-items: center; }
.work__text .pstep.pos-bot { align-items: flex-end; }
.story--stage .work__text .pstep .col p { font-size: 16px; }

/* 이미지 비트일 때: 텍스트 감춤(이미지만), 텍스트 비트일 때: 슬라이드 전부 비활성 → 이미지 감춤 */
.scene--work.is-image .work__text { opacity: 0; filter: blur(12px); pointer-events: none; }

/* =============================================================
   FOOTER 장면 — 홀로그래픽 배경 위 3칼럼 크레딧 + 하단 로고/저작권
   전부 영문 Director, 크기는 섹션 헤더(구분선 위)와 동일
   ============================================================= */
.scene--footer2 {
  display: flex; flex-direction: column;
  padding: clamp(64px, 9vh, 100px) var(--gutter) clamp(32px, 5vh, 56px);
}
.footer2__cols {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 3vh, 40px) clamp(28px, 4vw, 48px);
  align-items: start;
}
.footer2__col { display: flex; flex-direction: column; }
.footer2__label,
.footer2__item {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink);
}
.footer2__label { margin-bottom: .25em; }
.footer2__label--gap { margin-top: .9em; }   /* 1칼럼 안 Artists ↔ Curators 사이 간격 */
.footer2__bottom { margin-top: auto; padding-top: clamp(24px, 5vh, 60px); }
/* 공식 로고 로크업 = 전체폭(1-3칼럼) */
.footer2__logos { display: block; width: 100%; max-width: 100%; height: auto; }
.footer2__copy {
  margin: clamp(14px, 2.5vh, 24px) 0 0;
  font-family: var(--font-uni); font-weight: 700;
  font-size: 12px; letter-spacing: .04em; color: var(--ink-soft);
}
@media (min-width: 1000px) {
  .footer2__cols { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   MAP — 도면 1-2칼럼, 3칼럼에 층 라벨(작업 캡션과 동일 폰트)
   ============================================================= */
.map2__slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-content: start; align-items: start;   /* 상단 정렬 */
  padding: clamp(64px, 9vh, 100px) var(--gutter) clamp(32px, 5vh, 56px);
  opacity: 0; filter: blur(20px);
  transition: opacity .7s ease, filter .7s ease;
  pointer-events: none;
}
.map2__slide.is-active { opacity: 1; filter: blur(0); }
.scene--map2 .work__cap { grid-column: 1 / 2; align-self: start; }   /* 텍스트 = 1칼럼 상단 */
.map2__img { grid-column: 2 / 4; }                                    /* 이미지 = 2-3칼럼 상단 */
.map2__img img {
  display: block;
  width: 100%; height: auto;
  max-height: 80svh;
  object-fit: contain; object-position: top;
}

@media (max-width: 999px) {
  .map2__slide { grid-template-columns: 1fr; }
  .scene--map2 .work__cap { grid-column: 1 / 2; margin-bottom: 18px; }
  .map2__img { grid-column: 1 / 2; }
}

/* =============================================================
   BIO 결합 레이아웃 — 상단 초상(1칼럼)+인스타(2칼럼), 하단 본문 3칼럼
   ============================================================= */
.scene--biocombo {
  display: flex; flex-direction: column;
  padding: clamp(64px, 9vh, 100px) var(--gutter) clamp(40px, 6vh, 70px);
}
.biocombo__top {
  flex: 0 0 auto; height: 42svh;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  margin-bottom: clamp(18px, 3vh, 30px);
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(14px, 2.5vh, 24px);
}
.biocombo__portrait { grid-column: 1 / 2; align-self: start; }
.biocombo__img {
  display: block;
  width: 100%; height: auto;
  max-height: 34svh;               /* 상단 영역(42svh)보다 작게 → 구분선 위로 확실히 */
  object-fit: contain; object-position: top left;
}
/* 2칼럼: 이름(상단) → 부제 → 인스타그램(아랫줄) */
.biocombo__meta { grid-column: 2 / 3; align-self: start; display: flex; flex-direction: column; }
.biocombo__name { margin-bottom: 4px; }
.biocombo__sub {
  font-family: var(--font-uni); font-size: 13px; letter-spacing: .04em;
  color: var(--ink-soft); margin-bottom: 12px;
}
.biocombo__ig { align-self: start; }
.biocombo__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.biocombo__body .panel__body { position: relative; flex: 1 1 auto; min-height: 0; }
.biocombo__body .pstep { display: flex; align-items: flex-start; }
.biocombo__body .pstep .cols { width: 100%; }
.story--stage .biocombo__body .pstep .col p { font-size: 16px; }

/* 큐레이터: 작가와 칼럼으로 구분 — 초상=3칼럼, 이름·정보=1칼럼 (데스크톱만)
   grid-row:1 명시 필수: 초상(col3)이 DOM상 먼저라 sparse 자동배치가 meta(col1)를 2행으로
   밀어내 body와 겹치던 버그 방지 → 둘 다 1행에 고정 */
@media (min-width: 1000px) {
  .scene--biocombo--curator .biocombo__portrait { grid-column: 3 / 4; grid-row: 1; }
  .scene--biocombo--curator .biocombo__meta { grid-column: 1 / 2; grid-row: 1; }
}

@media (max-width: 999px) {
  .biocombo__top { grid-template-columns: 1fr; height: auto; }
  .biocombo__portrait { grid-column: 1 / 2; max-height: 44svh; }
  .biocombo__meta { grid-column: 1 / 2; }   /* 모바일: 이름·정보도 1칼럼(팬텀 칼럼 방지, 작가·큐레이터 공통) */
}

/* 모바일·태블릿: 칼럼 붕괴 → 이미지 전체폭·전체높이, 설명은 그 아래
   (세로 이미지가 1/3 폭으로 작아지지 않도록 1200px 미만은 전부 전체폭) */
@media (max-width: 1199px) {
  .work__slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .work__slide--v  .work__box,
  .work__slide--sq .work__box,
  .work__slide--h  .work__box,
  .work__slide--col23 .work__box { grid-column: 1 / 2; grid-row: 1; }
  /* 캡션도 1칼럼·2행으로 (기존 --v/--sq/--h .work__cap 규칙과 동일 특정성으로 덮어씀) */
  .work__slide--v  .work__cap,
  .work__slide--sq .work__cap,
  .work__slide--h  .work__cap,
  .work__slide--col23 .work__cap { grid-column: 1 / 2; grid-row: 2; align-self: end; margin-top: 18px; }
  /* full 형태: 모바일에서도 캡션(1행) → 이미지(2행) 유지 */
  .work__slide--full .work__cap { grid-row: 1; align-self: start; margin: 0 0 14px; }
  .work__slide--full .work__box { grid-row: 2; }
}

/* "full" 형태(ubac): 캡션(이름+제목)=1칼럼 상단, 이미지=1-3칼럼 전체폭 아래 (파노라마 전체폭 배치)
   모바일 블록 뒤에 둬 소스 순서로 grid-template-rows 를 확실히 덮어씀 */
.work__slide--full { grid-template-rows: auto 1fr; }
.work__slide--full .work__cap { grid-column: 1 / 2; grid-row: 1; align-self: start; margin: 0 0 clamp(12px, 2vh, 20px); }
.work__slide--full .work__box { grid-column: 1 / -1; grid-row: 2; }

/* =============================================================
   TEXT STACKING — 직전 텍스트가 50% 블러 흔적으로 남는 연출
   ============================================================= */
/* 현재 장면은 위, 흔적 장면은 뒤 */
.opening__layer.is-active { z-index: 2; }
.opening__layer.is-ghost {
  opacity: .5;
  filter: blur(10px);
  z-index: 1;
  pointer-events: none;
  transition: opacity .8s ease, filter .8s ease;
}
/* 같은 장면 안 문단 흔적 */
.pstep.is-active { z-index: 2; }
.pstep.is-ghost {
  opacity: .5;
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

/* =============================================================
   LANGUAGE FONTS — override (heading 포함, 소스 순서로 우선)
   KV(.hero__*)는 lang 속성이 없어 Director 그대로 유지된다.
   ============================================================= */
[lang="zh"] { font-family: "Director", "source-han-serif-hk-subset", "Noto Serif TC", "Source Han Serif TC", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", serif; }
[lang="ko"] { font-family: "Director", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }

/* =============================================================
   KV TITLE as SVG (title-color) — 폰트 대신 벡터 로크업 사용
   ============================================================= */
.hero__title { mix-blend-mode: normal; display: block; }
/* 세로 중앙 · 왼쪽 배치 */
.opening__layer--kv .hero__title {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(calc(-50% - 64px));  /* 상단으로 64px 이동 (24 + 40) */
  margin: 0;
  z-index: 2;
}
.hero__titleimg {
  display: block;
  width: clamp(300px, 58vw, 820px);    /* 원본 크기 */
  height: auto;                        /* 비율 유지 */
  margin: 0;
}
/* 모바일: 메인 키비주얼 타이틀 SVG 30% 확대 (뷰포트를 넘지 않게 상한 캡 → 아주 좁은 폰은 화면폭에 맞춤) */
@media (max-width: 671px) {
  .hero__titleimg { width: min(390px, 94vw); }
}

/* =============================================================
   본문(칼럼) 라틴 = 영문 폰트(Director)로 통일
   Director 를 맨 앞에 두면 라틴 글자는 Director, 한글/중문 글자는
   그 다음 언어 폰트로 per-glyph 폴백된다. (KV 정보 등은 미적용)
   ============================================================= */
.col[lang="en"] { font-family: "Director", "Helvetica Neue", Arial, sans-serif; }
.col[lang="ko"] { font-family: "Director", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.col[lang="zh"] { font-family: "Director", "source-han-serif-hk-subset", "Noto Serif TC", "Source Han Serif TC", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", serif; }

/* 본문 칼럼 두께: 영문(Director 700)과 맞추기 위해 한/중 본문도 700 */
.col p { font-weight: 700; }

/* 중문 본문 두께 600 (어도비 프로젝트에 추가한 Source Han Serif HK 600) */
.col[lang="zh"] p { font-weight: 600; }

/* 언어별 본문 행간 (모든 본문 공통) */
.col[lang="ko"] p { line-height: 1.6; }
.col[lang="en"] p { line-height: 1.27; }
.col[lang="zh"] p { line-height: 1.65; }

/* 언어별 줄바꿈/정렬 처리
   한글·영문: 단어가 중간에 끊기지 않게. 중문: 양끝 정렬 */
.col[lang="ko"] p { word-break: keep-all; overflow-wrap: break-word; }
.col[lang="en"] p { word-break: normal; overflow-wrap: break-word; hyphens: none; }
.col[lang="zh"] p { text-align: justify; text-justify: inter-character; }

/* KV 좌측하단 정보(날짜·장소·시간)도 본문과 동일 폰트:
   라틴=Director, 한글=Sandoll Jebi2, 두께 700 (mono 대신) */
.hero__meta p {
  font-family: "Director", "sandoll-jebi2", "Sandoll Jebi2", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 700;
}

/* =============================================================
   두께 통일: 본문·라벨 구분 없이 전부 700을 기본값으로.
   (얇게 상속받던 mono 라벨·kicker·nav·카운터·byline 등도 700)
   중문 본문만 광학적 균형을 위해 600 예외 유지(위 .col[lang="zh"] p).
   ============================================================= */
body { font-weight: 700; }

/* info: 계층 구분에 다른 폰트(mono)를 쓰지 않고 전부 본문 폰트로 통일
   (라틴=Director, 한글=Sandoll, 중문=Source Han Serif). 계층은 크기·색으로만. */
.info-col__head, .info-row__label, .info-row__value {
  font-family: "Director", "sandoll-jebi2", "Sandoll Jebi2",
               "source-han-serif-hk-subset", "Noto Serif TC",
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}