/* afterlight — style.css
 * tokens.css 의 var() 만 쓴다. 구간은 바탕 명도 3단과 2px 틈으로 나눈다 — 1px 선·둥근 모서리·그림자·그라데이션 0.
 * 모션은 스크럽·하드 컷·24fps 틱·맞밀기 와이프뿐이다(DESIGN 원칙 1). 등장 연출 0.
 */

/* ── 리셋 — :where() 로 특이도 0 (#49) ───────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ul, ol, dl, dd, figure, table) { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
:where(img, svg, video) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(a) { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
:where(table) { border-collapse: collapse; border-spacing: 0; }
:where([hidden]) { display: none !important; }

html {
  background: var(--color-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}
html.is-locked { overflow: hidden; }

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

.skip {
  position: absolute;
  left: var(--spacing-page);
  top: calc(var(--spacing) * -24);
  z-index: 30;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: var(--font-weight-strong);
}
.skip:focus { top: calc(var(--spacing) * 2); }

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

.d {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}
.mono {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--spacing) * 420);
  margin-inline: auto;
  padding-inline: var(--spacing-page);
}

.img { width: 100%; height: 100%; object-fit: cover; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 자리표시자 — 결함처럼 비어 보이지 않게 번호·이름·비율·용도를 싣는다 ─ */
.ph {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--spacing) * 1);
  width: 100%;
  height: 100%;
  min-height: calc(var(--spacing) * 24);
  padding: calc(var(--spacing) * 4);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  text-align: center;
}
.ph--after { background: var(--color-surface); }
.ph__n { font-family: var(--font-mono); font-weight: var(--font-weight-mono); font-size: var(--text-h3); color: var(--color-ink); }
.ph__name { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-title); color: var(--color-ink); }
.ph__meta { font-size: var(--text-xs); }

/* ── 버튼·글 링크 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--spacing) * 12);
  padding: 0 calc(var(--spacing) * 5);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  border-radius: var(--radius-none);
}
.btn:hover { background: var(--color-ink-2); }
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-hit);
  font-weight: var(--font-weight-strong);
  text-decoration: underline;
}
.textlink:hover { color: var(--color-ink-2); }

/* ── 머리 띠 ─────────────────────────────────────────────────────────── */
.head {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  height: var(--spacing-head);
  padding-inline: var(--spacing-page);
  background: var(--color-bg);
}
.head__mark {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-display);
  font-size: var(--text-lg);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-hit);
}
.head__nav { display: none; }
.head__nav ul { display: flex; gap: calc(var(--spacing) * 6); }
.head__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-hit);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  color: var(--color-ink-2);
  text-decoration: none;
}
.head__nav a:hover,
.head__nav a[aria-current="page"] { color: var(--color-ink); }
.head__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--spacing) * 1);
  height: calc(var(--spacing-cut) * 1.5);
  background: var(--color-ink);
}
.head__tc {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  justify-self: end;
  font-size: var(--text-tc);
  color: var(--color-ink);
}
.rec {
  display: inline-block;
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}
.head__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-hit);
  min-height: var(--spacing-hit);
  padding-inline: calc(var(--spacing) * 2);
  margin-inline-end: calc(var(--spacing) * -2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  background: var(--color-surface-2);
}

@media (min-width: 720px) {
  .head { grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(var(--spacing) * 6); }
  .head__mark { font-size: var(--text-title); }
  .head__nav { display: block; justify-self: center; }
  .head__nav a { font-size: var(--text-base); }
  .head__menu { display: none; }
}
@media (min-width: 1024px) {
  .head { position: sticky; top: 0; }
}
/* 홈 < 1024: 머리는 무대와 같이 붙었다 같이 떠난다 — 붙는 것은 CSS, 떠나는 것은 main.js 가 transform 으로 */
@media (max-width: 1023px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  [data-page="home"] .head { position: sticky; top: 0; will-change: transform; }
}

/* ── 메뉴 덮개 (< 720, #menu) — 하드 컷으로 열고 닫는다 ─────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
  padding: 0 var(--spacing-page) calc(var(--spacing) * 8 + env(safe-area-inset-bottom));
  background: var(--color-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  min-height: var(--spacing-head);
}
.menu__tc { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-tc); }
.menu__close {
  min-width: var(--spacing-hit);
  min-height: var(--spacing-hit);
  padding-inline: calc(var(--spacing) * 2);
  margin-inline-end: calc(var(--spacing) * -2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  background: var(--color-surface-2);
}
.menu__list { display: grid; gap: var(--spacing-cut); }
.menu__list a {
  display: flex;
  align-items: center;
  min-height: calc(var(--spacing) * 18);
  padding-inline: calc(var(--spacing) * 4);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-display);
  font-size: calc(var(--spacing) * 10);
  line-height: 1;
  text-decoration: none;
}
.menu__list a[aria-current="page"] { background: var(--color-surface-2); }
.menu__notice { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 36em; }
@media (min-width: 720px) {
  .menu { display: none !important; }
}

/* ── 홈 무대 — 스크롤이 셔틀이다 ────────────────────────────────────── */
.track { position: relative; }
.stage {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  padding-block: 0 calc(var(--spacing) * 6);
}
.stage__screen { container: screen / inline-size; display: flex; flex-direction: column; min-width: 0; }

.monitor {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--color-plate);
  overflow: hidden;
}
.frame { position: absolute; inset: 0; visibility: hidden; }
.frame.is-on { visibility: visible; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.burn {
  position: absolute;
  top: calc(var(--spacing) * 2);
  left: calc(var(--spacing) * 2);
  right: calc(var(--spacing) * 2);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  pointer-events: none;
}
.burn__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  background: var(--color-plate);
  color: var(--color-ink);
  font-size: var(--text-tc);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.burn__f { display: none; }
.burn__ff { font-family: var(--font-display); font-weight: var(--font-weight-display); color: var(--color-accent); letter-spacing: 0; }
.wave {
  position: absolute;
  left: calc(var(--spacing) * 2);
  bottom: calc(var(--spacing) * 2);
  width: calc(var(--spacing) * 40);
  height: calc(var(--spacing) * 8);
  padding: calc(var(--spacing) * 1);
  background: var(--color-plate);
  fill: var(--color-ink-2);
}

.chapters {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--spacing-cut);
  margin-top: var(--spacing-cut);
}
.chapters__bar {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--spacing-cut);
  min-width: 0;
}
.chap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--spacing-hit);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: var(--text-2xs);
}
.chap__label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-hit);
}
/* 재생 헤드는 글자 뒤로 지나간다 — 글자에만 블록과 같은 바탕의 뒤판(보이지 않는 판)을 대고 헤드보다 위층에 둔다 */
.chap__n,
.chap__name { position: relative; z-index: 2; padding-inline: var(--spacing-cut); background: var(--color-surface-2); }
.chap__name { display: none; font-size: var(--text-xs); font-weight: var(--font-weight-strong); white-space: nowrap; }
/* 필름 스트립 — 여덟 단계가 한 장에 보인다(파랑 → 흑백 → 회색 → 호박). 흐림·필터 0, 현재 블록은 윗변 3px 하나 */
.chap__thumb { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-plate); }
@media (max-width: 719px), (min-width: 1024px) and (min-height: 821px) {
  .chap__thumb { display: block; }
  .chap__thumb + .chap__label { min-height: calc(var(--spacing) * 8); }
}
@media (max-width: 719px) {
  .chap__thumb + .chap__label { min-height: calc(var(--spacing) * 5); }
}
.chap:hover { color: var(--color-ink); }
.chap.is-now { color: var(--color-ink); }
.chap.is-now::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--spacing-cut) * 1.5);
  background: var(--color-accent);
}
.chapters__head {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--spacing-cut);
  background: var(--color-accent);
  pointer-events: none;
}
.chapters__head.is-off { visibility: hidden; }
.chapters__state {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: calc(var(--spacing) * 20);
  padding-inline: calc(var(--spacing) * 3);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-ink);
}

.cap {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  min-height: calc(var(--text-sm) * 1.3 * 2);
}
.cap__item { display: none; }
.cap__item.is-on { display: block; }
.cap__n { font-weight: var(--font-weight-strong); }
.stage__hint { margin-top: calc(var(--spacing) * 2); font-size: var(--text-xs); color: var(--color-ink-2); }

.stage__rail { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); min-width: 0; padding-inline: var(--spacing-page); }
.stage__title { font-size: var(--text-h1); }
.stage__lead { display: none; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 36em; }
.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-cut);
}
.field {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 8) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  min-height: calc(var(--spacing) * 12);
  padding: calc(var(--spacing) * 2);
  background: var(--color-surface);
}
.field__id {
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  color: var(--color-ink);
}
.field.is-now .field__id { background: var(--color-ink); color: var(--color-on-ink); }
.field__name { font-size: var(--text-title); line-height: 1; }
.field__desc { display: none; grid-column: 2; font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-snug); }
.stage__acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }

/* 1판(< 1024) — 모니터·챕터 바는 전폭(< 720), 캡션·레일은 페이지 여백 안 */
.stage__screen > .cap,
.stage__screen > .stage__hint { padding-inline: var(--spacing-page); }

@media (min-width: 720px) {
  .stage { padding-inline: var(--spacing-page); padding-top: calc(var(--spacing) * 2); }
  .stage__screen > .cap,
  .stage__screen > .stage__hint,
  .stage__rail { padding-inline: 0; }
  .monitor { width: min(100%, calc((100svh - 22rem) * 16 / 9)); }
  .chapters { width: min(100%, calc((100svh - 22rem) * 16 / 9)); }
  .burn__f { display: inline; }
  .fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--spacing-rail);
    gap: var(--spacing-gap);
    align-content: safe center;
    padding: calc(var(--spacing) * 6) var(--spacing-page);
    max-width: calc(var(--spacing) * 420);
    margin-inline: auto;
  }
  /* 14rem = 머리 56 + 무대 위아래 48 + 틈 2 + 챕터 바 44 + 캡션 48 + 힌트 24 (실측 222) */
  .monitor,
  .chapters { width: min(100%, calc((100svh - 14rem) * 16 / 9)); }
  .chapters__state { display: flex; }
  .stage__hint { margin-top: calc(var(--spacing) * 1); }
  .stage__rail {
    background: var(--color-surface);
    padding: var(--spacing-rail-pad);
    gap: calc(var(--spacing) * 5);
  }
  .stage__lead { display: block; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field { background: var(--color-surface-2); padding: calc(var(--spacing) * 3); row-gap: calc(var(--spacing) * 1); }
  .field__id { grid-row: span 2; background: var(--color-surface); }
  .field__desc { display: block; }
  .stage__acts { margin-top: auto; }
}
@container screen (min-width: 960px) {
  .chap__name { display: inline; }
  .chap { font-size: var(--text-xs); }
  .chap__label { justify-content: flex-start; padding-inline: calc(var(--spacing) * 3); }
}
/* 스트립이 붙는 높이(> 820) — 썸네일 높이(블록 폭 × 9/16)만큼 모니터를 줄인다. 블록 폭 = (W − 상태 칸 82 − 틈 14) / 8,
   글자 줄은 44 → 32 — 모니터 + 썸네일 ≤ 100svh − 13.5rem 을 W 로 풀면 이 식이다 */
@media (min-width: 1024px) and (min-height: 821px) {
  .has-strip > .monitor,
  .has-strip > .chapters { width: min(100%, calc(((100svh - 13.5rem) * 16 / 9 + var(--spacing) * 3) * 8 / 9)); }
}

/* 붙는 조건 — 이때만 트랙이 길어진다. 트랙 안에는 무대만 있다(#50) */
@media (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .track { height: calc(100svh - var(--spacing-head) + 9 * var(--ease-scrub-seg)); }
  .stage {
    position: sticky;
    top: var(--spacing-head);
    height: calc(100svh - var(--spacing-head));
    overflow: hidden;
  }
}
/* 낮은 화면 — 무대가 붙어 있는 동안 넘치지 않게 덜어 낸다. 빠진 버튼은 EDL 끝의 "작업 12편 전부 →" 와 내비가 대신한다 */
@media (max-width: 719px) and (max-height: 700px) {
  .stage__acts { display: none; }
}
@media (min-width: 720px) and (max-width: 1023px) and (max-height: 760px) {
  .monitor,
  .chapters { width: min(100%, calc((100svh - 25rem) * 16 / 9)); }
  .stage__acts { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .stage { padding-block: calc(var(--spacing) * 4); }
  .monitor,
  .chapters { width: min(100%, calc((100svh - 13.5rem) * 16 / 9)); }
  .stage__rail { gap: calc(var(--spacing) * 4); }
  .field { padding-block: calc(var(--spacing) * 2); }
  .field__desc { display: none; }
  .field__id { grid-row: auto; }
}
/* 더 낮으면(≤ 680) 리드 문장은 무대 밖 "네 개의 방" 머리로 옮긴다 — 모바일과 같은 자리 */
@media (min-width: 1024px) and (max-height: 680px) {
  .stage__lead { display: none; }
}

/* 영상이 붙고 동작 줄이기일 때만 생기는 재생 버튼 */
.play {
  position: absolute;
  right: calc(var(--spacing) * 2);
  bottom: calc(var(--spacing) * 2);
  min-width: var(--spacing-hit);
  min-height: var(--spacing-hit);
  padding-inline: calc(var(--spacing) * 3);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

/* ── 섹션 공통 ──────────────────────────────────────────────────────── */
.sec { margin-top: var(--spacing-section); }
.sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 10);
  margin-bottom: calc(var(--spacing) * 8);
}
.sec__title { font-size: var(--text-h2); }
.sec__title--sm { font-size: var(--text-h3); margin-bottom: calc(var(--spacing) * 6); }
.sec__lead { max-width: 36em; color: var(--color-ink-2); }
div.sec__lead { display: grid; gap: calc(var(--spacing) * 2); }
.sec__lead p { margin: 0; }
.lead-moved { color: var(--color-ink); }
@media (min-width: 1024px) and (min-height: 681px) {
  .lead-moved { display: none; }
}
@media (min-width: 1024px) {
  .sec__title--sm { font-size: calc(var(--text-h2) * 0.6); }
}
.more { margin-top: calc(var(--spacing) * 6); }

/* ── 네 개의 방 — 방 띠 ─────────────────────────────────────────────── */
.room { background: var(--color-bg); }
.room:nth-child(even) { background: var(--color-surface); }
.room__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 12);
}
.room__name { display: grid; gap: calc(var(--spacing) * 3); align-content: start; }
.room__id {
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
.room__word { font-size: var(--text-room); line-height: 1; }
.room__body { display: grid; gap: calc(var(--spacing) * 4); align-content: start; }
.room__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
.count { font-size: var(--text-count); line-height: 1; font-variant-numeric: tabular-nums; }
.room__unit { font-size: var(--text-lg); color: var(--color-ink-2); }
.room__desc { max-width: 36em; font-size: var(--text-lg); }
.room__subs { display: flex; flex-wrap: wrap; gap: var(--spacing-cut); }
.room__subs li {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
@media (min-width: 1024px) {
  .room__in { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--spacing-gap); padding-block: calc(var(--spacing) * 16); }
}

/* ── EDL — 편집 결정 목록. 지브라 + 2px 틈, 선 0 ─────────────────────── */
.edl__cols,
.edl__row {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 12) minmax(0, 1fr);
  column-gap: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 3);
}
.edl__cols {
  display: none;
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.edl { display: grid; gap: var(--spacing-cut); }
.edl__row {
  position: relative;
  width: 100%;
  align-items: center;
  row-gap: calc(var(--spacing) * 1);
  min-height: calc(var(--spacing) * 16);
  padding-block: calc(var(--spacing) * 3);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-ink);
}
.edl__row.is-alt { background: var(--color-surface); }
.edl__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--spacing) * 1);
  background: var(--color-accent);
  visibility: hidden;
}
.edl a.edl__row:hover::before,
.edl a.edl__row:focus-visible::before,
.edl__row.is-sel::before,
.edl__row[aria-expanded="true"]::before { visibility: visible; }
.edl__row:focus-visible { outline-offset: -2px; }
.edl__evt { font-size: var(--text-sm); color: var(--color-ink-2); grid-row: span 2; align-self: start; padding-top: calc(var(--spacing) * 1); }
.edl__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(var(--spacing) * 3); min-width: 0; }
.edl__ko { font-size: var(--text-title); }
.edl__en { font-size: var(--text-sm); color: var(--color-ink-2); }
.edl__tc { display: none; flex-basis: 100%; font-size: var(--text-xs); color: var(--color-ink-2); }
.edl__mw { display: none; }
/* < 1024: 두 줄 행 — 2줄째에 매체 · 분야 ID · 컷 · TC */
.edl__medium,
.edl__fields,
.edl__cuts,
.edl__wk { font-size: var(--text-sm); color: var(--color-ink-2); }
.edl__row > .edl__medium,
.edl__row > .edl__fields,
.edl__row > .edl__cuts { grid-column: 2; }
.edl__row { grid-template-areas: none; }
.edl__fko { display: none; }
.edl__wk { display: none; }
@media (max-width: 1023px) {
  .edl__row { grid-template-columns: calc(var(--spacing) * 12) auto auto minmax(0, 1fr); }
  .edl__title { grid-column: 2 / -1; }
  .edl__row > .edl__medium { grid-column: 2; }
  .edl__row > .edl__fields { grid-column: 3; }
  .edl__row > .edl__cuts { grid-column: 4; }
  .edl__row > .edl__medium::after,
  .edl__row > .edl__fields::after { content: " ·"; }
}
@media (min-width: 1024px) {
  .edl__cols { display: grid; }
  .edl__cols,
  .edl__row {
    grid-template-columns: calc(var(--spacing) * 14) minmax(0, 1fr) calc(var(--spacing) * 24) calc(var(--spacing) * 38) calc(var(--spacing) * 18) calc(var(--spacing) * 16);
    column-gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
  }
  .edl__evt { grid-row: auto; align-self: center; padding-top: 0; }
  .edl__row > .edl__medium,
  .edl__row > .edl__fields,
  .edl__row > .edl__cuts { grid-column: auto; }
  .edl__tc { display: block; }
  .edl__en { display: none; }
  .edl__wk { display: block; }
  .edl__fields { display: grid; gap: 0; line-height: var(--leading-snug); }
  .edl__fko { display: block; font-size: var(--text-xs); }
  .edl__fields .mono { color: var(--color-ink); }
  .edl__ko { font-size: var(--text-title); }
}
@media (min-width: 1440px) {
  .edl__en { display: inline; }
}

/* ── 한 줄의 파이프라인 ─────────────────────────────────────────────── */
.line { display: grid; gap: var(--spacing-cut); }
.line__seg {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 8) calc(var(--spacing) * 20) minmax(0, 1fr);
  grid-template-areas: "n name bar" "n dur bar";
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3);
  background: var(--color-surface-2);
}
.line__n { grid-area: n; font-size: var(--text-sm); color: var(--color-ink-2); }
.line__name { grid-area: name; font-size: var(--text-lg); }
.line__dur { grid-area: dur; font-size: var(--text-xs); color: var(--color-ink-2); }
.line__bar {
  grid-area: bar;
  display: block;
  height: calc(var(--spacing) * 3);
  width: max(calc(var(--spacing) * 2), calc(var(--w) / 16 * 100%));
  background: var(--color-ink-2);
}
@media (min-width: 720px) {
  .line { display: flex; }
  .line__seg {
    flex: var(--w) 1 0;
    min-width: calc(var(--spacing) * 24);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "n" "name" "dur";
    align-content: start;
    row-gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
    min-height: calc(var(--spacing) * 32);
  }
  .line__bar { display: none; }
}

/* ── 함께한 곳 — 타이틀 시퀀스 카드처럼 ─────────────────────────────── */
.clients__title { font-size: var(--text-base); font-weight: var(--font-weight-strong); margin-bottom: calc(var(--spacing) * 6); }
.clients__title span { font-weight: var(--font-weight-body); color: var(--color-ink-2); }
.clients__list { font-size: var(--text-h3); color: var(--color-ink-2); line-height: var(--leading-snug); max-width: 48em; }
.clients__item { white-space: nowrap; }
.clients__sep { color: var(--color-surface-2); }
@media (min-width: 720px) {
  .clients__list { font-size: calc(var(--spacing) * 8); }
}

/* ── 연락 슬레이트 ──────────────────────────────────────────────────── */
.contact__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 8); }
.contact__text { display: grid; gap: calc(var(--spacing) * 5); align-content: start; }
.contact__title { font-size: var(--text-h2); }
.contact__lead { max-width: 36em; color: var(--color-ink-2); }
.contact__list { display: grid; gap: var(--spacing-cut); }
.contact__list div { display: grid; grid-template-columns: calc(var(--spacing) * 16) minmax(0, 1fr); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background: var(--color-surface); align-items: center; }
.contact__list dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.contact__list a { font-weight: var(--font-weight-strong); display: inline-flex; min-height: var(--spacing-hit); align-items: center; overflow-wrap: anywhere; }
.contact__slate { display: grid; gap: calc(var(--spacing) * 4); align-content: start; }
.contact__acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }
.contact__acts .btn { flex: 1 1 auto; }
.notice-line { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 720px) {
  .contact__acts .btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .contact__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-gap); }
}
#contact { scroll-margin-top: calc(var(--spacing-head) + var(--spacing-gap)); }

.slate { background: var(--color-surface); }
.slate__stripe { display: block; width: 100%; height: calc(var(--spacing) * 6); }
.stripe-a { fill: var(--color-ink); }
.stripe-b { fill: var(--color-bg); }
.slate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-cut);
  padding: var(--spacing-cut);
}
.slate__cell {
  display: grid;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3);
  background: var(--color-bg);
}
.slate__cell--wide { grid-column: 1 / -1; }
.slate__cell dt { font-size: var(--text-xs); color: var(--color-ink-2); }
.slate__cell dd { font-size: var(--text-sm); }
.slate__blank { display: block; height: calc(var(--spacing) * 8); background: var(--color-surface-2); }
.slate__opts,
.slate__rooms { display: flex; flex-wrap: wrap; gap: var(--spacing-cut); }
.slate__opts span,
.slate__rooms span {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 2);
  background: var(--color-surface-2);
}
.slate__cap { padding: calc(var(--spacing) * 3); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── 꼬리 ────────────────────────────────────────────────────────────── */
.foot { margin-top: var(--spacing-section); background: var(--color-surface); padding-bottom: env(safe-area-inset-bottom); }
.foot__in {
  display: grid;
  gap: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 12);
  font-size: var(--text-sm);
}
.foot__notice { max-width: 36em; color: var(--color-ink); font-size: var(--text-base); }
.foot__nav ul { display: flex; flex-wrap: wrap; gap: 0 calc(var(--spacing) * 3); }
.foot__nav a { display: inline-flex; min-width: var(--spacing-hit); min-height: var(--spacing-hit); align-items: center; justify-content: center; font-weight: var(--font-weight-strong); }
.foot__contact,
.foot__copy { color: var(--color-ink-2); }
.foot__contact a { display: inline-flex; min-height: var(--spacing-hit); align-items: center; }
.foot__eof { font-size: var(--text-tc); }
.foot__eof .mono { display: inline-block; padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2); background: var(--color-plate); }
@media (min-width: 1024px) {
  .foot__in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .foot__nav,
  .foot__eof { justify-self: end; }
}

/* ── 쪽 머리(목록·파이프라인·스튜디오) ─────────────────────────────── */
.pagehead { padding-top: calc(var(--spacing) * 10); display: grid; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 8); }
.pagehead__title { font-size: var(--text-page); }
.pagehead__meta { font-size: var(--text-sm); color: var(--color-ink-2); }
.pagehead__lead { max-width: 36em; color: var(--color-ink-2); font-size: var(--text-lg); }
.only-wide { display: none; }
@media (min-width: 1200px) {
  .only-wide { display: inline; }
  .only-narrow { display: none; }
}
@media (min-width: 1024px) {
  .pagehead { padding-top: calc(var(--spacing) * 12); grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: calc(var(--spacing) * 10); }
  .pagehead__title { grid-column: 1; }
  .pagehead__meta { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: calc(var(--spacing) * 2); }
  .pagehead__lead { grid-column: 1 / -1; }
}

/* ── 작업 목록 ──────────────────────────────────────────────────────── */
.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 6);
}
.seg {
  display: flex;
  gap: var(--spacing-cut);
  overflow-x: auto;
  scroll-padding-inline: var(--spacing-page);
  scrollbar-width: none;
  min-width: 0;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  flex: none;
  min-height: var(--spacing-hit);
  padding-inline: calc(var(--spacing) * 4);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}
.seg__btn:hover { color: var(--color-ink); }
.seg__btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.filters__count { font-size: var(--text-sm); color: var(--color-ink-2); display: flex; align-items: center; min-height: var(--spacing-hit); }
.filters__count .mono { color: var(--color-ink); }
@media (min-width: 720px) {
  .filters { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--spacing) * 6); }
  .filters__count { justify-self: end; }
}

.worklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-gap); align-items: start; }
.edl--work .edl__row { cursor: pointer; }
.edl__more {
  display: grid;
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) calc(var(--spacing) * 4) calc(var(--spacing) * 18);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
.edl__credit { color: var(--color-ink-2); }
.edl__empty { padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4); background: var(--color-surface); color: var(--color-ink-2); }
.preview { display: none; }

@media (min-width: 1200px) {
  .worklist { grid-template-columns: minmax(0, 1fr) var(--spacing-preview); }
  .edl__more { display: none !important; }
  .preview { display: block; position: sticky; top: calc(var(--spacing-head) + var(--spacing-gap)); }
  /* 미리보기가 붙으면 목록 판이 좁아진다 — 매체·기간 열을 2줄째로 내린다(폭 표 §10) */
  .worklist .edl__cols,
  .worklist .edl__row { grid-template-columns: calc(var(--spacing) * 14) minmax(0, 1fr) calc(var(--spacing) * 38) calc(var(--spacing) * 18); }
  .worklist .edl__c-medium,
  .worklist .edl__c-wk,
  .worklist .edl__row > .edl__medium,
  .worklist .edl__row > .edl__wk { display: none; }
  .worklist .edl__mw { display: inline; }
}
@media (min-width: 1600px) {
  .worklist .edl__cols,
  .worklist .edl__row { grid-template-columns: calc(var(--spacing) * 14) minmax(0, 1fr) calc(var(--spacing) * 24) calc(var(--spacing) * 38) calc(var(--spacing) * 18) calc(var(--spacing) * 16); }
  .worklist .edl__c-medium,
  .worklist .edl__c-wk,
  .worklist .edl__row > .edl__medium,
  .worklist .edl__row > .edl__wk { display: block; }
  .worklist .edl__mw { display: none; }
}

.pv__monitor { position: relative; aspect-ratio: 16 / 9; background: var(--color-plate); overflow: hidden; display: grid; place-items: center; }
.pv__monitor > .img { position: absolute; inset: 0; }
.pv__monitor > .pv__img[height="686"] { position: static; height: auto; }
.pv__burn {
  position: absolute;
  top: calc(var(--spacing) * 2);
  left: calc(var(--spacing) * 2);
  right: calc(var(--spacing) * 2);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  pointer-events: none;
}
.pv__meta { display: grid; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 4); background: var(--color-surface); }
.pv__title .d { font-size: var(--text-title); }
.pv__en { font-size: var(--text-sm); color: var(--color-ink-2); }
.pv__line { font-size: var(--text-sm); }
.pv__credit { color: var(--color-ink-2); }
.pv__go { margin-top: calc(var(--spacing) * 3); }

.pvslate { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--color-surface); }
.pvslate .slate__stripe { height: calc(var(--spacing) * 5); }
.pvslate__title { align-self: center; padding-inline: calc(var(--spacing) * 5); font-size: var(--text-h3); padding-top: calc(var(--spacing) * 6); }
.pvslate__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-cut); padding: var(--spacing-cut); }
.pvslate__grid div { display: grid; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); background: var(--color-bg); }
.pvslate__grid dt { font-size: var(--text-2xs); color: var(--color-ink-2); }
.pvslate__grid dd { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 작업 상세 ──────────────────────────────────────────────────────── */
.workhead { padding-top: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 8); display: grid; gap: calc(var(--spacing) * 2); }
.crumb { font-size: var(--text-sm); color: var(--color-ink-2); display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.crumb a { display: inline-flex; min-height: var(--spacing-hit); align-items: center; color: var(--color-ink); }
.workhead__title { font-size: var(--text-work); }
.workhead__en { font-size: var(--text-lg); color: var(--color-ink-2); }
.workhead__meta { font-size: var(--text-sm); }

.bawrap { max-width: calc(var(--spacing) * 340 + var(--spacing-page) * 2); }
.bawrap__hint { margin-top: calc(var(--spacing) * 3); font-size: var(--text-xs); color: var(--color-ink-2); }
@media (max-width: 719px) {
  .bawrap { padding-inline: 0; }
  .bawrap__hint { padding-inline: var(--spacing-page); }
}

/* 비포/애프터 — clip-path 0. 바깥 판을 경계만큼 밀고 안 그림을 거꾸로 밀어 제자리에 둔다 */
.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-plate);
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.ba[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.ba__layer { position: absolute; inset: 0; }
/* 바깥 판(.ba)은 자르지 않는다 — 원본 판만 자르고, 그 안 그림은 정적 상자라 판 밖으로 새지 않는다.
 * 경계선·손잡이는 폭 0 상자를 cqw 로 민다(판 폭만큼 넘치는 상자를 만들지 않는다 — 가로 넘침 0) */
.ba__before { overflow: hidden; transform: translateX(calc(var(--ba) * 1% - 100%)); }
.ba__in { width: 100%; height: 100%; transform: translateX(calc(100% - var(--ba) * 1%)); }
.ba .img { pointer-events: none; -webkit-user-drag: none; }
.ba__label {
  position: absolute;
  top: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  background: var(--color-plate);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  pointer-events: none;
}
.ba__label--l { left: calc(var(--spacing) * 2); }
.ba__label--r { right: calc(var(--spacing) * 2); }
.ba__burn {
  position: absolute;
  left: calc(var(--spacing) * 2);
  bottom: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  background: var(--color-plate);
  font-size: var(--text-tc);
  pointer-events: none;
}
.ba__edge,
.ba__track { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transform: translateX(calc(var(--ba) * 1cqw)); pointer-events: none; }
.ba__line { position: absolute; left: calc(var(--spacing-cut) * -0.5); top: 0; bottom: 0; width: var(--spacing-cut); background: var(--color-accent); }
.ba__grip {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--spacing-hit);
  height: var(--spacing-hit);
  /* 끝(0 · 100)에서도 손잡이가 판 안에 남게 경계에서 반 칸씩 안쪽으로 당긴다 */
  translate: calc(-50% + var(--spacing-hit) * (50 - var(--ba)) / 100) -50%;
  background: var(--color-ink);
  color: var(--color-on-ink);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}
.ba__arrows { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-2xs); letter-spacing: 0; white-space: nowrap; }
.ba.is-nudge .ba__before,
.ba.is-nudge .ba__in,
.ba.is-nudge .ba__edge,
.ba.is-nudge .ba__track { transition: transform var(--ease-duration-nudge) var(--ease-out); }

.facts { margin-top: calc(var(--spacing) * 10); }
.facts__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-cut); }
.facts__cell { display: grid; gap: calc(var(--spacing) * 2); align-content: start; padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4); background: var(--color-surface); }
.facts__cell dt { order: 2; font-size: var(--text-sm); color: var(--color-ink-2); }
.facts__cell dd.d { order: 1; font-size: var(--text-count); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts__cell dd.facts__fmt { font-size: var(--text-h3); line-height: var(--leading-tight); white-space: normal; }
.facts__cell--role dd { order: 1; font-size: var(--text-base); font-weight: var(--font-weight-strong); line-height: var(--leading-snug); }
@media (min-width: 1024px) {
  .facts__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr); }
  .facts__cell--role dd { font-size: var(--text-lg); }
  .facts__cell dd.facts__fmt { font-size: var(--text-count); line-height: 1; white-space: nowrap; }
}

.steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72vw;
  gap: var(--spacing-cut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-page);
  margin-inline: calc(var(--spacing-page) * -1);
  padding-inline: var(--spacing-page);
  padding-bottom: calc(var(--spacing) * 2);
  overscroll-behavior-x: contain;
}
.step { position: relative; scroll-snap-align: start; min-width: 0; }
.step__btn { display: grid; width: 100%; background: var(--color-surface); outline-offset: -2px; }
.step__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-plate); }
.step__img .ph { min-height: 0; }
.step__label { display: flex; gap: calc(var(--spacing) * 2); align-items: center; min-height: var(--spacing-hit); padding-inline: calc(var(--spacing) * 3); font-size: var(--text-sm); font-weight: var(--font-weight-strong); }
.step__label .mono { color: var(--color-ink-2); font-weight: var(--font-weight-mono); }
.step__btn[aria-pressed="true"] .step__img { outline: var(--spacing-cut) solid var(--color-ink); outline-offset: calc(var(--spacing-cut) * -1); }
@media (min-width: 720px) {
  .steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
}

.notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-cut); }
.notes__pane { display: grid; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 6); background: var(--color-surface); font-size: var(--text-lg); }
.notes__pane:nth-child(2) { background: var(--color-surface-2); }
.notes__h { font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-h3); line-height: var(--leading-tight); }
@media (min-width: 1024px) {
  .notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.credits__h { font-size: var(--text-base); font-weight: var(--font-weight-strong); margin-bottom: calc(var(--spacing) * 6); }
.credits__h span { font-weight: var(--font-weight-body); color: var(--color-ink-2); }
.credits { display: grid; gap: calc(var(--spacing) * 3); }
.sec__title + .credits { margin-top: calc(var(--spacing) * 10); }
.credits div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--spacing-gap); align-items: baseline; }
.credits dt { text-align: right; color: var(--color-ink-2); font-size: var(--text-sm); }
.credits dd { font-weight: var(--font-weight-strong); font-size: var(--text-lg); }
.credits__end { margin-top: calc(var(--spacing) * 8); text-align: center; color: var(--color-ink-2); }
@media (min-width: 1024px) {
  .credits--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--spacing) * 16); }
}

.plate-notice { padding: calc(var(--spacing) * 6); background: var(--color-plate); color: var(--color-ink-2); font-size: var(--text-sm); max-width: none; }
.pager { margin-top: calc(var(--spacing) * 10); display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--spacing) * 3); }

/* ── 파이프라인 ─────────────────────────────────────────────────────── */
.dg { background: var(--color-surface); padding: calc(var(--spacing) * 4); }
.dg__svg { width: 100%; height: auto; overflow: visible; }
.dg__svg--wide { display: none; }
.dg__tid { font-family: var(--font-mono); font-weight: var(--font-weight-mono); font-size: 16px; fill: var(--color-ink); }
.dg__tko { font-family: var(--font-body); font-size: 13px; fill: var(--color-ink-2); }
.dg__bar rect { fill: var(--color-surface-2); }
.dg__bar text { font-family: var(--font-body); font-weight: var(--font-weight-strong); font-size: 14px; fill: var(--color-ink); }
.dg__bar:hover rect { fill: var(--color-ink-2); }
.dg__bar:hover text { fill: var(--color-on-ink); }
.dg__bar.is-sel rect { fill: var(--color-ink); }
.dg__bar.is-sel text { fill: var(--color-on-ink); }
.dg__bar:focus-visible { outline: none; }
.dg__bar:focus-visible rect { stroke: var(--color-accent); stroke-width: 3; }
.dg__arrow { fill: none; stroke: var(--color-ink-2); stroke-width: 2; }
.dg__tip { fill: var(--color-ink-2); }
.dg__tick,
.dg__unit { font-family: var(--font-mono); font-weight: var(--font-weight-mono); font-size: 13px; fill: var(--color-ink-2); }
.dg__svg--wide .dg__tick { text-anchor: middle; }
.dg__head { fill: var(--color-accent); }
.dg__cap { margin-top: calc(var(--spacing) * 3); font-size: var(--text-xs); color: var(--color-ink-2); }
/* 가로 도식(1200 폭)은 720 에서 0.55배 — 막대 글자가 8px 로 줄어 읽히지 않는다. 1024 전까지는 세운 도식을 480 폭까지 */
.dg__svg--tall { max-width: calc(var(--spacing) * 120); margin-inline: auto; }
@media (min-width: 720px) {
  .dg { padding: calc(var(--spacing) * 6); }
}
@media (min-width: 1024px) {
  .dg__svg--wide { display: block; }
  .dg__svg--tall { display: none; }
}

.stgs { display: grid; gap: var(--spacing-cut); }
.stg { background: var(--color-bg); }
.stg.is-alt { background: var(--color-surface); }
.stg__h { font: inherit; }
.stg__btn {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 10) minmax(0, 1fr) auto;
  grid-template-areas: "n name sign" "n meta sign";
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  width: 100%;
  min-height: calc(var(--spacing) * 18);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  outline-offset: -2px;
}
.stg__n { grid-area: n; font-size: var(--text-sm); color: var(--color-ink-2); }
.stg__name { grid-area: name; font-size: var(--text-title); }
.stg__dur,
.stg__room { grid-area: meta; font-size: var(--text-sm); color: var(--color-ink-2); }
.stg__room { justify-self: start; margin-left: calc(var(--spacing) * 14); }
.stg__sign {
  grid-area: sign;
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  background: var(--color-surface-2);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lg);
}
.stg__btn[aria-expanded="true"] .stg__sign { background: var(--color-ink); color: var(--color-on-ink); }
.stg__btn[aria-expanded="true"] .stg__sign::before { content: "−"; }
.stg__btn[aria-expanded="true"] .stg__sign { font-size: 0; }
.stg__btn[aria-expanded="true"] .stg__sign::before { font-size: var(--text-lg); }
.stg__body { display: grid; gap: calc(var(--spacing) * 5); padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 6); }
.stg__io { display: grid; gap: var(--spacing-cut); }
.stg__io div { display: grid; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background: var(--color-surface-2); }
.stg__io dt { font-size: var(--text-xs); color: var(--color-ink-2); }
.stg__text { max-width: 40em; font-size: var(--text-lg); }
@media (min-width: 1024px) {
  .stg__btn {
    grid-template-columns: calc(var(--spacing) * 14) minmax(0, 1fr) calc(var(--spacing) * 24) calc(var(--spacing) * 60) auto;
    grid-template-areas: "n name dur room sign";
  }
  .stg__dur { grid-area: dur; }
  .stg__room { grid-area: room; margin-left: 0; }
  .stg__body { padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 8) calc(var(--spacing) * 18); }
  .stg__io { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ztable { width: 100%; font-size: var(--text-base); }
.ztable caption { text-align: left; }
.ztable th,
.ztable td { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); text-align: left; vertical-align: top; }
.ztable thead th { font-size: var(--text-xs); font-weight: var(--font-weight-strong); color: var(--color-ink-2); padding-block: calc(var(--spacing) * 2); }
.ztable tbody tr:nth-child(odd) { background: var(--color-surface); }
.ztable tbody th { font-weight: var(--font-weight-strong); white-space: nowrap; width: calc(var(--spacing) * 24); }
.ztable td.mono { white-space: nowrap; text-align: right; }
.ztable thead th:last-child { text-align: right; }
.ztable--floor thead th:last-child { text-align: left; }
@media (max-width: 719px) {
  .ztable thead { display: none; }
  .ztable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); column-gap: calc(var(--spacing) * 3); }
  .ztable tbody th,
  .ztable tbody td { padding: 0; width: auto; }
  .ztable tbody th { grid-column: 1; font-size: var(--text-xs); color: var(--color-ink-2); }
  .ztable tbody td:not(.mono) { grid-column: 1; }
  .ztable td.mono { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ── 스튜디오 ──────────────────────────────────────────────────────── */
.photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-gap); align-items: start; }
.photo { display: grid; gap: calc(var(--spacing) * 2); }
.photo--wide > .img,
.photo--wide > .ph { aspect-ratio: 3 / 2; height: auto; }
.photo--tall > .img,
.photo--tall > .ph { aspect-ratio: 4 / 5; height: auto; }
.photo__cap { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 1024px) {
  .photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.where { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-gap); align-items: start; }
.where__map { background: var(--color-surface); }
.map__svg { width: 100%; height: auto; }
.map__svg--wide { display: none; }
.map__river { fill: var(--color-surface-2); }
.map__road { fill: var(--color-surface-2); }
.map__bld { fill: var(--color-bg); }
.map__stn { fill: var(--color-ink-2); }
.map__dot { fill: var(--color-accent); }
.map__label { font-family: var(--font-body); font-weight: var(--font-weight-strong); font-size: 15px; fill: var(--color-ink); }
.map__label--me { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 18px; }
.map__note { font-family: var(--font-body); font-size: 12px; fill: var(--color-ink-2); }
.where__list { display: grid; gap: var(--spacing-cut); }
.where__list div { display: grid; gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background: var(--color-surface); }
.where__list dt { font-size: var(--text-xs); color: var(--color-ink-2); }
@media (min-width: 720px) {
  .map__svg--wide { display: block; }
  .map__svg--tall { display: none; }
}
@media (min-width: 1024px) {
  .where { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ── 동작 줄이기 — 도는 것 0, 전환 0 ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}