/* valor — style.css. tokens.css 의 변수만 쓴다(raw 색 0). 층 5단: ① .wall ② .veil·.veil-dim ③ 판 ④ display ⑤ UI.
   브레이크포인트: <768 모바일 · 768–1199 태블릿 · ≥1200 데스크톱(레일). Hero 배치는 "세로 화면 = 위 묶음" / "가로 화면 = 아래 왼쪽". */

/* ── 리셋 (:where — 특이도 0, #49) ─────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html, body, h1, h2, h3, p, figure, ol, ul) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(img) { display: block; max-width: 100%; height: auto; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

html {
  background: var(--color-night);
  color: var(--color-mist);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.menu-open { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

:focus-visible { outline: 2px solid var(--color-mist); outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: var(--spacing-gutter);
  top: var(--spacing-3);
  z-index: var(--z-cursor);
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  padding: 0 var(--spacing-4);
  background: var(--color-night);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ── 글자 부품 ─────────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-mist);
}
.display .line { display: block; white-space: nowrap; }

.index, .rail, .menu-toggle, .text-link, .ring, .work-nav, .meta, .work-panel__num,
.scroll-cue, .back, .project__next, .social, .menu__close, .menu__num, .foot__top, .contact__label, .methods__num {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  line-height: var(--leading-tight);
}

.index { display: flex; align-items: center; gap: var(--spacing-3); font-variant-numeric: tabular-nums; }
.index__rule { width: 32px; height: 1px; background: currentColor; }
.index__num + .index__label::before { content: "·"; margin-inline-end: var(--spacing-3); }

.meta { font-variant-numeric: tabular-nums; }
.meta span { margin-inline: var(--spacing-2); }
.lead { font-size: var(--text-lead); line-height: var(--leading-body); }

.arrow { display: inline-block; font-family: var(--font-sans); transition: transform var(--duration-ui) var(--ease-ui); }
.ring .arrow, .text-link .arrow, .project__next .arrow, .back .arrow { font-size: var(--text-body); letter-spacing: 0; line-height: 1; }

/* 텍스트 링크 — 밑줄 Scale X + 화살표 8px (320ms) */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--size-tap);
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: var(--spacing-2);
  height: 1px;
  background: var(--color-sand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-ui) var(--ease-ui);
}
.text-link:focus-visible::after { transform: scaleX(1); }
.text-link:focus-visible .arrow { transform: translateX(8px); }

/* 원형 버튼 — 1px 원 + 라벨 + 화살표 */
.ring {
  width: var(--size-ring-sm);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-ring);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--spacing-2);
  text-align: center;
  transition: border-color var(--duration-ui) var(--ease-ui);
}
.ring:focus-visible { border-color: var(--color-sand); }
.ring:focus-visible .arrow { transform: translateX(8px); }
.ring small { font-size: var(--text-label); letter-spacing: 0.08em; text-transform: none; font-weight: 400; }
.ring--demo { cursor: default; }

@media (hover: hover) {
  .text-link:hover::after { transform: scaleX(1); }
  .text-link:hover .arrow, a.ring:hover .arrow { transform: translateX(8px); }
  a.ring:hover { border-color: var(--color-sand); }
}

/* ── ① 월페이퍼 · ② 덮개 ──────────────────────────────────────────────── */
.wall {
  position: fixed;
  inset: 0;
  z-index: var(--z-wall);
  overflow: hidden;
  background: var(--color-night);
}
.wall picture { display: block; width: 100%; height: 100%; }
.wall__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;           /* 모바일: 가운데 · 위 */
}
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .wall__img { object-position: 50% 50%; }   /* 태블릿: 가운데 */
}
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .wall__img { object-position: 56% 45%; }   /* 데스크톱: 가운데 · 살짝 왼쪽(사람이 글자 오른쪽 아래) */
}

.veil, .veil-dim {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
}
/* 세로 화면(모바일·태블릿 세로): 글자가 위쪽 하늘에 얹힌다 → 위 스크림을 길게 */
.veil {
  background:
    linear-gradient(to bottom, var(--color-scrim-top) 0%, var(--color-scrim-mid) 30%, transparent 62%),
    linear-gradient(to top, var(--color-scrim-bottom), transparent 34%),
    var(--color-veil-mobile);
}
@media (max-width: 767px) and (max-height: 700px) {
  .veil {
    background:
      linear-gradient(to bottom, var(--color-scrim-top) 0%, var(--color-scrim-mid) 34%, transparent 70%),
      linear-gradient(to top, var(--color-scrim-bottom), transparent 34%),
      var(--color-veil-short);
  }
}
/* 가로 화면: 글자가 왼쪽 아래 → 왼쪽·아래 스크림, ≥1200 은 오른쪽 레일 몫 */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .veil {
    background:
      linear-gradient(to bottom, var(--color-scrim-top), transparent 16%),
      linear-gradient(to top, var(--color-scrim-bottom), transparent 45%),
      linear-gradient(to right, var(--color-scrim-left-md), transparent 72%),
      var(--color-veil);
  }
}
@media (min-width: 1200px) {
  .veil {
    background:
      linear-gradient(to bottom, var(--color-scrim-top), transparent 16%),
      linear-gradient(to top, var(--color-scrim-bottom), transparent 45%),
      linear-gradient(to right, var(--color-scrim), transparent 70%),
      linear-gradient(to left, var(--color-scrim-right), transparent 22%),
      var(--color-veil);
  }
}
.veil-dim { background: var(--color-dim); opacity: 0; }

main, .foot { position: relative; z-index: var(--z-plate); }

/* 첫 로드 Orchestration — 월페이퍼 Scale · 제목 Stagger · UI Fade. backwards 라 끝난 뒤 값을 붙잡지 않는다 */
@media (prefers-reduced-motion: no-preference) {
  .wall__img { animation: wall-in 1800ms var(--ease-cinema) backwards; }
  .hero__title .line { animation: rise 600ms var(--ease-cinema) backwards; animation-delay: calc(240ms + var(--i, 0) * var(--stagger-step)); }
  .hero__index, .hero__desc, .hero__ring, .scroll-cue, .masthead, .rail { animation: fade 600ms var(--ease-ui) 480ms backwards; }
}
@keyframes wall-in { from { transform: scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 0.18em, 0); } }
@keyframes fade { from { opacity: 0; } }

/* ── ⑤ 머리 · 레일 ─────────────────────────────────────────────────────── */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-ui);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(var(--spacing-header), env(safe-area-inset-top)) var(--spacing-gutter) 0;
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
/* 고정 머리 아래로 지나가는 글자는 어둠 속으로 사라진다 — 머리 글자와 겹쳐 읽히지 않게 */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + var(--spacing-8));
  background: linear-gradient(to bottom, var(--color-scrim-deep), var(--color-scrim) 45%, transparent);
  pointer-events: none;
  z-index: -1;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  font-size: var(--text-label-lg);
  letter-spacing: var(--tracking-brand);
  font-weight: 600;
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
  min-height: var(--size-tap);
  min-width: var(--size-tap);
  transition: color var(--duration-ui) var(--ease-ui);
}
.menu-toggle__lines { display: grid; gap: 6px; justify-items: end; }
.menu-toggle__lines i { display: block; width: 24px; height: 1px; background: currentColor; transition: transform var(--duration-ui) var(--ease-ui); transform-origin: right; }
.menu-toggle__lines i + i { transform: scaleX(0.667); }
@media (hover: hover) {
  .menu-toggle:hover { color: var(--color-sand); }
  .menu-toggle:hover .menu-toggle__lines i + i { transform: none; }
  .brand:hover { color: var(--color-sand); }
}

.rail { display: none; }
@media (min-width: 1200px) {
  .rail {
    display: block;
    position: fixed;
    z-index: var(--z-ui);
    right: var(--spacing-gutter);
    top: 58svh;
    transition: opacity var(--duration-ui) var(--ease-ui), visibility 0s linear 0s;
  }
  .rail ol { display: grid; justify-items: end; }
  .rail a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 30px;
    transition: color var(--duration-ui) var(--ease-ui);
  }
  .rail a::before {
    content: "";
    width: 12px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-ui) var(--ease-ui);
  }
  .rail a[aria-current="true"] { color: var(--color-sand); }
  .rail a[aria-current="true"]::before { transform: none; }
  .rail a:hover { color: var(--color-sand); }
  /* Work 트랙 안에서는 Work 자체 번호 내비가 있다 → 레일은 비킨다(강조 2점 원칙) */
  body[data-scene="work"] .rail {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-ui) var(--ease-ui), visibility 0s linear var(--duration-ui);
  }
}

/* ── Scene 01 Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "index" "title" "desc" "." "ring";
  padding:
    calc(max(var(--spacing-header), env(safe-area-inset-top)) + var(--size-tap) + var(--spacing-8))
    var(--spacing-gutter)
    max(var(--spacing-8), env(safe-area-inset-bottom));
}
.hero__index { grid-area: index; }
.hero__title {
  grid-area: title;
  margin-top: var(--spacing-4);
  font-size: var(--text-display-xl);
  will-change: auto;
}
.hero__title .line:nth-child(2) { padding-inline-start: var(--spacing-step-2); }
.hero__desc { grid-area: desc; max-width: 30ch; margin-top: var(--spacing-6); }
.hero__ring { grid-area: ring; }
.scroll-cue {
  position: absolute;
  right: var(--spacing-gutter);
  bottom: max(var(--spacing-8), env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: var(--spacing-3);
}
.scroll-cue i { display: block; width: 1px; height: 48px; background: var(--color-line-strong); }

@media (max-width: 767px) and (max-height: 700px) {
  .hero { padding-top: calc(max(var(--spacing-header), env(safe-area-inset-top)) + var(--size-tap) + var(--spacing-4)); }
  .hero__desc { margin-top: var(--spacing-4); }
  .scroll-cue i { height: 32px; }
}
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero__title { font-size: var(--text-display-xl-md); }
  .hero__ring { width: var(--size-ring); }
  .hero__desc { font-size: var(--text-lead); }
}
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .hero {
    grid-template-columns: minmax(0, 34ch) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas: ". ." "index index" "title title" "desc ring";
    column-gap: var(--spacing-12);
    padding-bottom: clamp(var(--spacing-12), 12svh, var(--spacing-32));
  }
  .hero__title { font-size: var(--text-display-xl-md); margin-bottom: clamp(var(--spacing-6), 6svh, var(--spacing-16)); }
  .hero__title .line:nth-child(2) { padding-inline-start: var(--spacing-step-1); }
  .hero__title .line:nth-child(3) { padding-inline-start: var(--spacing-step-2); }
  .hero__desc { align-self: center; margin: 0; font-size: var(--text-lead); }
  .hero__ring { width: var(--size-ring); justify-self: start; }
}
@media (min-width: 1200px) {
  .hero__title { font-size: var(--text-display-xl-lg); }
}

/* ── 판(plate) 공통 — 테두리·그림자·모서리 없음 ───────────────────────── */
.plate { position: relative; overflow: hidden; background: var(--color-deep); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate[data-parallax] img {
  position: absolute;
  left: 0;
  top: -8%;
  height: 116%;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* 등장(Scroll reveal) — clip-path 로 숨기지 않는다(#46). .js 이고 동작 줄이기가 아닐 때만 */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .line,
  .js [data-reveal-block] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 600ms var(--ease-cinema), transform 600ms var(--ease-cinema);
    transition-delay: calc(var(--i, 0) * var(--stagger-step));
  }
  .js [data-reveal-block] { transition-delay: 240ms; }
  .js [data-reveal].is-in .line,
  .js [data-reveal-block].is-in { opacity: 1; transform: none; }
}

/* ── Scene 02 Ideas ────────────────────────────────────────────────────── */
.ideas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--spacing-scene) var(--spacing-gutter);
}
.ideas__a {
  margin: var(--spacing-8) calc(var(--spacing-gutter) * -1) 0;
  aspect-ratio: 4 / 5;
}
.ideas__a img { object-position: 74% 50%; }
.ideas__a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-scrim-bottom), transparent 40%), var(--color-veil);
}
.ideas__title {
  position: relative;
  z-index: 1;
  margin-top: -0.62em;
  font-size: var(--text-display-l);
}
.ideas__title .line:nth-child(3) { padding-inline-start: var(--spacing-step-3); }
.ideas__text { margin-top: var(--spacing-8); max-width: 36ch; display: grid; gap: var(--spacing-4); justify-items: start; }
.ideas__b {
  justify-self: end;
  width: 56vw;
  aspect-ratio: 4 / 5;
  margin-top: var(--spacing-12);
}
.ideas__b::after { content: ""; position: absolute; inset: 0; background: var(--color-veil); }

@media (min-width: 768px) {
  .ideas__a { aspect-ratio: 16 / 10; }
  .ideas__title { font-size: var(--text-display-l-md); }
  .ideas__text { font-size: var(--text-lead); }
  .ideas__b { width: 40vw; margin-top: calc(var(--spacing-24) * -1); justify-self: end; }
  .ideas__text { max-width: 30ch; }
}
@media (min-width: 1200px) {
  .ideas {
    grid-template-columns: 40vw 22vw minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding-inline: 0 calc(var(--spacing-gutter) + var(--spacing-rail));
  }
  .ideas__index { grid-column: 1 / -1; padding-inline-start: var(--spacing-gutter); }
  .ideas__a {
    grid-column: 1 / 3;
    grid-row: 2;
    margin: var(--spacing-8) 0 0;
    aspect-ratio: auto;
    height: 78svh;
  }
  .ideas__a img { object-position: 64% 50%; }
  .ideas__a::after {
    background:
      linear-gradient(to left, var(--color-scrim-bottom) 0%, var(--color-scrim) 22%, transparent 52%),
      var(--color-veil);
  }
  .ideas__title {
    grid-column: 2 / 4;
    grid-row: 2;
    align-self: end;
    margin: 0 0 7svh;
    font-size: var(--text-display-l-lg);
  }
  .ideas__text { grid-column: 3; grid-row: 3; padding-top: var(--spacing-8); }
  .ideas__b {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    width: 22vw;
    margin: -10svh 0 0 calc(var(--spacing-gutter) + 8vw);
  }
}

/* ── Scene 03 Work ─────────────────────────────────────────────────────── */
.work__head { padding: var(--spacing-scene) var(--spacing-gutter) var(--spacing-16); display: grid; gap: var(--spacing-4); }
.work__intro { max-width: 34ch; }
.work__track { position: relative; }
.work-anchor {
  position: absolute;
  left: 0;
  top: calc(var(--n) * 100svh);
  width: 1px;
  height: 1px;
  scroll-margin-top: 0;
}

/* 판이 판을 덮는다 — sticky 겹침. 덮이는 판은 JS 가 --p(0→1)로 Scale 1→0.94 + 어둠 */
.work-panel {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--color-night);
  cursor: pointer;
}
.work-panel__frame {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 - 0.06 * var(--p, 0)));
  transform-origin: 50% 30%;
}
.work-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-night);
  opacity: calc(var(--p, 0) * 0.55);
  pointer-events: none;
}
.work-panel__media { position: absolute; inset: 0; }
.work-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.work-panel[data-fit="bleed"] .work-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--color-scrim-top), transparent 18%),
    linear-gradient(to top, var(--color-scrim-deep) 0%, var(--color-scrim-bottom) 24%, var(--color-scrim-mid) 55%, transparent 80%),
    var(--color-veil);
}
.work-panel[data-n="1"] .work-panel__media img { object-position: 42% 50%; }
.work-panel[data-n="4"] .work-panel__media img { object-position: 62% 60%; }

.work-panel__body {
  position: absolute;
  left: var(--spacing-gutter);
  right: var(--spacing-gutter);
  bottom: calc(max(var(--spacing-6), env(safe-area-inset-bottom)) + var(--size-tap) + var(--spacing-4));
  display: grid;
  justify-items: start;
  gap: var(--spacing-3);
  max-width: 40rem;
  transform: translate3d(0, calc(var(--p, 0) * -4%), 0);
  cursor: auto;
}
.work-panel__num { font-variant-numeric: tabular-nums; }
.work-panel__of { opacity: 0.7; }
/* 제목 아래는 글리프 꼬리(Q·y)만큼 더 띄운다 — 행간 0.88 이라 꼬리가 줄 상자 밖으로 내려와 메타에 닿았다(qa-1 P2-2) */
.work-panel__title { font-size: var(--text-display-l); margin-block: var(--spacing-2) 0.24em; }
.work-panel__title .line:nth-child(2) { padding-inline-start: var(--spacing-step-3); }
.work-panel__desc { max-width: 38ch; }

/* 판(plate) 구성 — 02 오른쪽 · 03 왼쪽(데스크톱). 세로 화면은 판이 위에서 남는 높이를 다 채우고, 글자가 아래 */
.work-panel[data-fit="plate"] .work-panel__frame {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding:
    calc(max(var(--spacing-header), env(safe-area-inset-top)) + var(--size-tap) + var(--spacing-6))
    var(--spacing-gutter)
    calc(max(var(--spacing-6), env(safe-area-inset-bottom)) + var(--size-tap) + var(--spacing-4));
}
.work-panel[data-fit="plate"] .work-panel__media { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.work-panel[data-fit="plate"] .work-panel__body { position: relative; inset: auto; flex: none; }

@media (min-width: 768px) {
  .work-panel__title { font-size: var(--text-display-l-md); }
  .work-panel__desc { font-size: var(--text-lead); }
}

@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  .work-panel__body { bottom: clamp(var(--spacing-12), 11svh, var(--spacing-24)); right: auto; max-width: min(46rem, 52vw); }
  .work-panel[data-fit="bleed"] .work-panel__media::after {
    background:
      linear-gradient(to bottom, var(--color-scrim-top), transparent 16%),
      linear-gradient(to top, var(--color-scrim-bottom), transparent 52%),
      linear-gradient(to right, var(--color-scrim-deep) 0%, var(--color-scrim) 36%, transparent 72%),
      linear-gradient(to left, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 5%, var(--color-scrim) 12%, transparent 30%),
      var(--color-veil);
  }
  .work-panel[data-fit="plate"] .work-panel__frame { display: block; padding: 0; }
  .work-panel[data-fit="plate"] .work-panel__body { position: absolute; inset: auto auto clamp(var(--spacing-12), 11svh, var(--spacing-24)) var(--spacing-gutter); }
  .work-panel[data-fit="plate"] .work-panel__media {
    position: absolute;
    top: 50%;
    bottom: auto;
    aspect-ratio: auto;
    width: var(--spacing-plate);
    height: min(74svh, 820px);
    transform: translateY(-50%);
  }
  .work-panel[data-side="right"] .work-panel__media { left: auto; right: calc(var(--spacing-gutter) + 7rem); }
  .work-panel[data-side="left"] .work-panel__media { left: var(--spacing-gutter); right: auto; }
  .work-panel[data-side="left"] .work-panel__body { left: calc(var(--spacing-gutter) + var(--spacing-plate) + 4vw); }
}
@media (min-width: 1200px) {
  .work-panel__title { font-size: var(--text-display-l-lg); }
}

/* Work 번호 내비 — 트랙 내내 붙는 한 벌(sticky). 세로 화면: 아래 가로 ‹ 01 / 04 › · 가로 화면: 오른쪽 세로 */
/* 트랙 전체를 덮는 절대 위치 상자 안에서 sticky — 음수 margin 으로 붙이면 margin 상자만큼 트랙 밖으로 삐져나온다(4단계 실측) */
.work-nav-rail { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.work-nav {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 calc(var(--spacing-gutter) - var(--spacing-3)) max(var(--spacing-6), env(safe-area-inset-bottom));
  pointer-events: none;
}
.work-nav > * { pointer-events: auto; }
.work-nav__list { display: none; }
.work-nav__count {
  display: flex;
  align-items: center;
  min-height: var(--size-tap);
  padding-inline: var(--spacing-1);
  font-variant-numeric: tabular-nums;
}
.work-nav__count [data-work-out] { color: var(--color-sand); }
.work-nav__step {
  display: grid;
  place-items: center;
  width: var(--size-tap);
  height: var(--size-tap);
  transition: color var(--duration-ui) var(--ease-ui), opacity var(--duration-ui) var(--ease-ui);
}
.work-nav__step--prev .chev { transform: rotate(90deg); }
.work-nav__step--next .chev { transform: rotate(-90deg); }
.work-nav__step[aria-disabled="true"] { opacity: 0.35; }
@media (hover: hover) {
  .work-nav__step:hover, .work-nav__list a:hover { color: var(--color-sand); }
}
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  .work-nav {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 0 calc(var(--spacing-gutter) - var(--spacing-3)) 0 0;
  }
  .work-nav__list { display: grid; justify-items: end; }
  .work-nav__list a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: var(--size-tap);
    padding-inline: var(--spacing-3);
    font-variant-numeric: tabular-nums;
    transition: color var(--duration-ui) var(--ease-ui);
  }
  .work-nav__list a::before {
    content: "";
    width: 12px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-ui) var(--ease-inout);
  }
  .work-nav__list a[aria-current="true"] { color: var(--color-sand); }
  .work-nav__list a[aria-current="true"]::before { transform: none; }
  .work-nav__count { display: none; }
  .work-nav__step--prev .chev { transform: rotate(180deg); }
  .work-nav__step--next .chev { transform: none; }
}

/* ── Scene 04 Studio ───────────────────────────────────────────────────── */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--spacing-8);
  padding: var(--spacing-scene) var(--spacing-gutter);
}
.studio__title { font-size: var(--text-display-l); margin-top: calc(var(--spacing-8) * -1 + var(--spacing-4)); }
.studio__title .line:nth-child(2) { padding-inline-start: var(--spacing-step-3); }
.studio__about { display: grid; gap: var(--spacing-4); max-width: 40ch; scroll-margin-top: calc(var(--size-tap) + var(--spacing-16)); }
.studio__media {
  display: grid;
  grid-template-columns: 26fr 62fr;
  gap: 4vw;
  align-items: start;
}
.studio__canyon { aspect-ratio: 1 / 2.6; margin-top: var(--spacing-16); }
.studio__portrait { aspect-ratio: 4 / 5; }
.studio__portrait img { object-position: 60% 30%; }
.studio__canyon::after, .studio__portrait::after { content: ""; position: absolute; inset: 0; background: var(--color-veil); }
.methods { border-top: 1px solid var(--color-line); }
.methods li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas: "num name" "num line";
  column-gap: var(--spacing-4);
  padding-block: var(--spacing-4);
  border-bottom: 1px solid var(--color-line);
}
.methods__num { grid-area: num; padding-top: 0.3em; font-variant-numeric: tabular-nums; }
.methods__name { grid-area: name; font-family: var(--font-display); font-size: var(--text-lead); letter-spacing: 0.04em; text-transform: uppercase; line-height: var(--leading-tight); }
.methods__line { grid-area: line; }

@media (min-width: 768px) {
  .studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; grid-template-areas: "index index" "title title" "about media" "list media"; align-items: start; }
  .studio__index { grid-area: index; }
  .studio__title { grid-area: title; font-size: var(--text-display-l-md); }
  .studio__about { grid-area: about; }
  .studio__media { grid-area: media; grid-template-columns: 11fr 26fr; gap: 2vw; }
  .methods { grid-area: list; }
  .studio__about .lead { font-size: var(--text-lead); }
}
@media (min-width: 1200px) {
  .studio { padding-inline-end: calc(var(--spacing-gutter) + var(--spacing-rail)); }
  .studio__title { font-size: var(--text-display-l-lg); }
  .studio__canyon { aspect-ratio: auto; height: 64svh; margin-top: 18svh; }
}

/* ── Scene 05 Contact — 전면 판이 월페이퍼를 덮는다 ───────────────────── */
.contact {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding:
    calc(max(var(--spacing-header), env(safe-area-inset-top)) + var(--size-tap) + var(--spacing-12))
    var(--spacing-gutter)
    max(var(--spacing-12), env(safe-area-inset-bottom));
  overflow: hidden;
}
.contact__media { position: absolute; inset: 0; z-index: -1; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; }
.contact__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--color-scrim-top), transparent 18%),
    linear-gradient(to top, var(--color-scrim-deep) 0%, var(--color-scrim-bottom) 30%, transparent 72%),
    var(--color-veil-short);
}
.contact__body { display: grid; gap: var(--spacing-8); }
.contact__title { font-size: var(--text-display-m); }
.contact__title .line--pair > span { display: block; }
.contact__title .line--solo { font-size: var(--text-display-m-solo); margin-top: 0.12em; }
.contact__row { display: grid; gap: var(--spacing-8); justify-items: start; }
.contact__mail { display: grid; gap: var(--spacing-2); }
.mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  font-size: var(--text-lead);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui);
}
@media (hover: hover) { .mail:hover { border-color: var(--color-sand); } }
/* 모바일은 세로 목록 — 가로로 두면 LINKEDIN 만 한 줄 떨어져 느슨해진다(qa-1 P3-4) */
.social { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 768px) { .social { flex-direction: row; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-6); } }
.social__item { display: inline-flex; align-items: baseline; gap: var(--spacing-1); min-height: var(--size-tap); align-items: center; }
.social small { font-size: var(--text-label); letter-spacing: 0.04em; text-transform: none; font-weight: 400; }

@media (min-width: 768px) {
  .contact__media::after {
    background:
      linear-gradient(to bottom, var(--color-scrim-top), transparent 16%),
      linear-gradient(to top, var(--color-scrim-bottom), transparent 50%),
      linear-gradient(to right, var(--color-scrim-deep) 0%, var(--color-scrim) 34%, transparent 66%),
      linear-gradient(to left, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 5%, var(--color-scrim) 12%, transparent 30%),
      var(--color-veil-plate);
  }
  .contact__media img { object-position: 6% 50%; }   /* 768–1199 가로: 해를 제목 끝 오른쪽으로 민다(1024 실측 60%→2.42 · 20%→2.82) */
  .contact__title { font-size: var(--text-display-m-md); }
  .contact__title .line--pair > span { display: inline; }
  .contact__title .line:nth-child(2) { padding-inline-start: var(--spacing-step-4); }
  .contact__title .line--solo { font-size: inherit; margin-top: 0; }
  .contact__row { grid-template-columns: auto auto; align-items: center; column-gap: var(--spacing-16); }
  .contact__social { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .contact { padding-inline-end: calc(var(--spacing-gutter) + var(--spacing-rail)); }
  .contact__title { font-size: var(--text-display-m-lg); }
  .contact__media img { object-position: 60% 50%; }
  .contact__ring { width: var(--size-ring); }
  .contact__row { grid-template-columns: auto auto minmax(0, 1fr); }
  .contact__social { grid-column: auto; justify-self: end; }
}

/* ── 꼬리 ─────────────────────────────────────────────────────────────── */
.foot {
  background: var(--color-deep);
  color: var(--color-muted);
  font-size: var(--text-small);
  padding: var(--spacing-12) var(--spacing-gutter) max(var(--spacing-12), env(safe-area-inset-bottom));
  display: grid;
  gap: var(--spacing-3);
}
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-3); }
.foot__brand { color: var(--color-mist); }
.foot__top { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--size-tap); color: var(--color-mist); }
.foot__notice { max-width: 60ch; }
@media (hover: hover) { .foot__top:hover { color: var(--color-sand); } }
@media (min-width: 1200px) {
  .foot { padding-inline-end: calc(var(--spacing-gutter) + var(--spacing-rail)); }
}

/* ── 메뉴 오버레이 ─────────────────────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  row-gap: var(--spacing-8);
  padding: max(var(--spacing-header), env(safe-area-inset-top)) var(--spacing-gutter) max(var(--spacing-8), env(safe-area-inset-bottom));
  background: var(--color-night);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 300ms var(--ease-ui);
}
.menu.is-open { opacity: 1; transition-duration: 400ms; }
.menu__bar { display: flex; justify-content: space-between; align-items: center; }
.menu__close { display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: var(--size-tap); min-width: var(--size-tap); justify-content: flex-end; }
.menu__x { font-size: var(--text-lead); line-height: 1; letter-spacing: 0; }
.menu__nav { align-self: center; position: relative; z-index: 1; }
.menu__nav ol { display: grid; gap: var(--spacing-2); }
.menu__nav li {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity var(--duration-menu) var(--ease-cinema), transform var(--duration-menu) var(--ease-cinema);
  transition-delay: calc(120ms + var(--i, 0) * var(--stagger-menu));
}
.menu.is-open .menu__nav li { opacity: 1; transform: none; }
.menu__nav a { display: inline-flex; align-items: baseline; gap: var(--spacing-4); transition: color var(--duration-ui) var(--ease-ui); }
.menu__num { font-variant-numeric: tabular-nums; min-width: 2.2em; }
.menu__word {
  font-family: var(--font-display);
  font-size: var(--text-menu);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
@media (hover: hover) { .menu__nav a:hover { color: var(--color-sand); } }
.menu__arch { display: none; }
.menu__foot { display: grid; gap: var(--spacing-3); color: var(--color-muted); }
.menu__line { color: var(--color-mist); }
.menu__social { color: var(--color-mist); }
.menu__notice { font-size: var(--text-small); }

@media (min-width: 768px) {
  .menu__word { font-size: var(--text-menu-md); }
}
@media (min-width: 1024px) {
  .menu__nav { max-width: 55vw; }
  .menu__word { font-size: var(--text-menu-lg); }
  .menu__arch {
    display: block;
    position: absolute;
    right: var(--spacing-gutter);
    top: 50%;
    height: 64svh;
    aspect-ratio: 3 / 4;
    max-width: 34vw;
    margin-top: -32svh;
    border-radius: var(--radius-arch);
    overflow: hidden;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 900ms var(--ease-cinema) 220ms;
  }
  .menu__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .menu.is-open .menu__arch { clip-path: inset(0); }
  .menu__foot { grid-template-columns: auto auto; justify-content: space-between; align-items: end; column-gap: var(--spacing-12); }
  .menu__notice { grid-column: 1 / -1; }
}

/* ── 커스텀 커서 (데스크톱 · 고운 포인터만) ─────────────────────────────── */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor .work-panel { cursor: none; }
  .cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-ui) var(--ease-ui);
  }
  .cursor.is-on { opacity: 1; }
  .cursor__dot, .cursor__ring, .cursor__label { position: absolute; left: 0; top: 0; }
  .cursor__dot {
    width: var(--size-cursor);
    height: var(--size-cursor);
    margin: calc(var(--size-cursor) / -2);
    border-radius: var(--radius-full);
    background: var(--color-mist);
    transition: transform var(--duration-ui) var(--ease-ui);
  }
  .cursor__ring {
    width: var(--size-cursor-open);
    height: var(--size-cursor-open);
    margin: calc(var(--size-cursor-open) / -2);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-mist);
    opacity: 0;
    transform: scale(0.2);
    transition: transform var(--duration-ui) var(--ease-ui), opacity var(--duration-ui) var(--ease-ui);
  }
  .cursor__label {
    transform: translate(-50%, -50%);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    font-weight: 500;
    text-transform: uppercase;
    padding-inline-start: var(--tracking-label);
    opacity: 0;
    transition: opacity var(--duration-ui) var(--ease-ui);
  }
  .cursor[data-state] .cursor__dot { transform: scale(0); }
  .cursor[data-state] .cursor__ring, .cursor[data-state] .cursor__label { opacity: 1; }
  .cursor[data-state="view"] .cursor__ring { transform: scale(0.737); }
  .cursor[data-state="open"] .cursor__ring { transform: none; }
}

/* ── 프로젝트 상세 ─────────────────────────────────────────────────────── */
.detail-wall { position: fixed; inset: 0; z-index: var(--z-wall); background: var(--color-night); overflow: hidden; }
.detail-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--color-scrim-top), transparent 18%),
    linear-gradient(to top, var(--color-scrim-deep) 0%, var(--color-scrim-bottom) 30%, var(--color-scrim-mid) 62%, transparent 86%),
    var(--color-veil-short);
}
/* 지금 장면 하나만 보인다(나머지는 display:none — 받지도 않는다). 바꿀 때만 둘이 겹쳐 Crossfade */
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  transition: opacity 600ms var(--ease-inout);
}
.shot.is-active { display: block; }
.shot.is-showing, .shot.is-leaving { display: block; opacity: 0; }
.shot[data-name="pool-wide"] { object-position: 64% 50%; }
.shot[data-name="cliffhouse-wide"] { object-position: 82% 50%; }
.shot[data-name="cliffhouse-tall"] { object-position: 62% 60%; }

.detail {
  position: relative;
  z-index: var(--z-plate);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding:
    calc(max(var(--spacing-header), env(safe-area-inset-top)) + var(--size-tap) + var(--spacing-4))
    var(--spacing-gutter)
    max(var(--spacing-8), env(safe-area-inset-bottom));
}
.back { display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: var(--size-tap); align-self: flex-start; }
.arrow--back { transition: transform var(--duration-ui) var(--ease-ui); }
@media (hover: hover) { .back:hover .arrow--back { transform: translateX(-8px); } .back:hover { color: var(--color-sand); } }
.project { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: var(--spacing-8); }
.project__body { display: grid; justify-items: start; gap: var(--spacing-4); }
.project__title { font-size: var(--text-detail); margin-block: var(--spacing-2) 0.24em; text-transform: none; }
.project__desc { max-width: 42ch; }
/* 원형 버튼과 썸네일은 글자 단 안에 한 줄로 — 오른쪽 아래에 두면 사진의 주 피사체(사람·집·의자)를 가린다(qa-1 P2-3) */
.project__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-6); justify-items: start; margin-top: var(--spacing-2); width: 100%; }
.project__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); width: 100%; max-width: 30rem; }
.thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; outline-offset: 3px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transition: opacity var(--duration-ui) var(--ease-ui); }
.thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color var(--duration-ui) var(--ease-ui); }
.thumb[aria-pressed="true"] img { opacity: 1; }
.thumb[aria-pressed="true"]::after { border-color: var(--color-mist); }
@media (hover: hover) { .thumb:hover img { opacity: 1; } }
.project__next { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--size-tap); justify-self: start; }
.project__next-title { color: var(--color-mist); }
@media (hover: hover) { .project__next:hover .arrow { transform: translateX(8px); } }

.detail-nav ol { display: flex; gap: var(--spacing-1); }
.detail-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-tap);
  min-height: var(--size-tap);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-ui) var(--ease-ui);
}
/* 현재 번호: sand + 굵기 + 선 — 색만으로 전하지 않는다(qa-1 P3-2). 모바일은 밑줄, 가로 화면은 앞 선 */
.detail-nav a { position: relative; gap: var(--spacing-2); }
.detail-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 16px;
  height: 1px;
  margin-left: -8px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--duration-ui) var(--ease-inout);
}
.detail-nav a[aria-current="page"] { color: var(--color-sand); font-weight: 700; }
.detail-nav a[aria-current="page"]::after { transform: none; }
@media (hover: hover) { .detail-nav a:hover { color: var(--color-sand); } }

@media (min-width: 768px) {
  .project__title { font-size: var(--text-detail-md); }
}
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .project__title .line { display: inline; }
  .project__title .line + .line::before { content: " "; }
  .project__desc { font-size: var(--text-lead); }
  .project__body .ring { width: var(--size-ring); }
  .detail-wall::after {
    background:
      linear-gradient(to bottom, var(--color-scrim-top), transparent 16%),
      linear-gradient(to top, var(--color-scrim-bottom), transparent 50%),
      linear-gradient(to right, var(--color-scrim-deep) 0%, var(--color-scrim) 34%, transparent 64%),
      linear-gradient(to left, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 5%, var(--color-scrim) 12%, transparent 30%),
      var(--color-veil);
  }
  .shot[data-name="cliffhouse-wide"] { object-position: 60% 50%; }
}
@media (min-width: 1024px) {
  .detail { padding-inline-end: calc(var(--spacing-gutter) + 6rem); }
  .project__body { max-width: 50vw; }
  .project__row { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: var(--spacing-8); }
  .project__shots { grid-template-columns: repeat(2, 10rem); width: auto; }
  .detail-nav { position: fixed; right: calc(var(--spacing-gutter) - var(--spacing-3)); top: 50%; transform: translateY(-50%); z-index: var(--z-ui); }
  .detail-nav ol { flex-direction: column; align-items: flex-end; }
  .detail-nav a { justify-content: flex-end; padding-inline: var(--spacing-3); }
  .detail-nav a::after { left: auto; right: calc(100% - var(--spacing-3)); bottom: 50%; width: 12px; margin-left: 0; transform-origin: right; }
}
@media (min-width: 1200px) {
  .project__title { font-size: var(--text-detail-lg); }
}

/* ── 동작 줄이기 — 패럴랙스·Scale·Stagger 끔, 메뉴·장면은 opacity 만 ≤200ms ── */
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open { transition-duration: 200ms; }
  .menu__nav li { opacity: 1; transform: none; transition: none; }
  .menu__arch { clip-path: none; transition: none; }
  .work-panel__frame, .work-panel__body { transform: none; }
  .plate[data-parallax] img { transform: none; }
  .shot { transition-duration: 200ms; }
  .arrow, .text-link::after, .cursor__dot, .cursor__ring { transition: none; }
}