/* onionskin — 라이트박스 위 동화지. 색·서체·간격은 tokens.css 변수만 쓴다.
   기본(스크립트 없음·reduced-motion) = 장면 다섯이 정지 컷으로 세로로 쌓인다. html.motion 아래에서만 sticky 무대가 된다. */

:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ol, ul, figure, table) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }

html {
  background: var(--color-table);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--spacing-header) + env(safe-area-inset-top));
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
button, .seg, .btn, .hd-link { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--spacing-gutter); top: var(--spacing-2); z-index: 60;
  padding: var(--spacing-3) var(--spacing-4); min-height: var(--spacing-touch); background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- 글자 부품 ---------- */
.micro {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-pencil);
}
/* 긴 판독 줄(35자 넘음) — 글자는 원고에서 이미 대문자, 크기 12px · 자간 좁혀 문장처럼 읽힌다 */
.micro.ml { text-transform: none; font-size: 0.75rem; letter-spacing: 0.03em; }
.stage .micro { font-size: 0.75rem; }
.stage .micro.ml { font-size: 0.8125rem; }
.small { font-size: var(--text-small); line-height: var(--leading-body); }
.lead { font-size: var(--text-lead); line-height: 1.45; }
.h2 {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
}
.tlink {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-touch);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--spacing-12); padding: 0 var(--spacing-6);
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  transition: transform var(--duration-press) var(--ease-out-quart);
}
.btn:active { transform: scale(0.97); }
.btn-paper { background: var(--color-paper); color: var(--color-ink); }
.btn-paper:focus-visible { box-shadow: var(--shadow-focus-ink); }

/* 자리표시자 — 비율·용도가 보여야 한다 */
.ph {
  aspect-ratio: 16 / 9;
  background: var(--color-paper-back);
  border: 1px dashed var(--color-edge);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-1);
  padding: var(--spacing-4); text-align: center;
}
.ph-k { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); color: var(--color-ink); }
.ph-u { font-size: var(--text-small); color: var(--color-pencil); }
.ph-ink { background: var(--color-ink); border-color: var(--color-on-ink-soft); }
.ph-ink .ph-k { color: var(--color-paper); }
.ph-ink .ph-u { color: var(--color-on-ink-soft); }

/* ---------- 머리 — 페그 바 = 프레임 눈금 자 ---------- */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: calc(var(--spacing-header) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--spacing-gutter) 0;
  display: flex; align-items: stretch; gap: var(--spacing-6);
  background: var(--color-table);
  border-bottom: 1px solid var(--color-ink);
}
.hd-wm {
  align-self: center;
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: var(--spacing-touch);
}
.ruler { position: relative; flex: 1 1 auto; min-width: 0; }
.ruler-segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 100%; }
.ruler-segs li { min-width: 0; }
.seg {
  display: block; height: 100%;
  border-left: 1px solid var(--color-ink);
  padding: var(--spacing-3) var(--spacing-2) 0;
  text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro);
  color: var(--color-pencil); white-space: nowrap; overflow: hidden;
}
.ruler-segs li:last-child .seg { border-right: 1px solid var(--color-ink); }
.seg[aria-current="step"] { color: var(--color-ink); font-weight: 700; }
.seg:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); }
.ruler-ticks { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--spacing-ruler); pointer-events: none; overflow: visible; }
.ruler-ticks .tk { stroke: var(--color-pencil); stroke-width: 1; }
.ruler-ticks .dr { fill: var(--color-ink); }
.ruler-ticks .hold { stroke: var(--color-ink); stroke-width: 2; }
.ruler-ticks .key { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.ruler-head {
  position: absolute; left: 0; bottom: 0; width: 2px; height: calc(var(--spacing-ruler) + 6px);
  background: var(--color-accent);
  transform: translateX(var(--head-x, 0px));
  pointer-events: none;
}
.ruler-head::before {
  content: ""; position: absolute; left: -5px; top: -1px; width: 12px; height: 7px;
  background: var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hd-link {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro);
}
.hd-link:hover, .hd-wm:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.hd-fr {
  align-self: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro);
  font-variant-numeric: tabular-nums;
}
.hd-pause {
  align-self: center; min-width: var(--spacing-touch); height: var(--spacing-touch);
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase;
  border-bottom: 1px solid var(--color-pencil);
  height: var(--spacing-8);
  padding: 0 var(--spacing-1);
  position: relative;
}
.hd-pause::after { content: ""; position: absolute; inset: -6px -4px; } /* 누름 칸 44 */
.pz-s { display: none; }
.hd-pegs { position: absolute; left: 50%; bottom: -15px; width: 17.5rem; height: 14px; margin-left: -8.75rem; pointer-events: none; overflow: visible; }
.hd-pegs path { fill: var(--color-ink); }

@media (max-width: 1199px) { .seg-t { display: none; } }
@media (max-width: 1023px) { .hd-wm { display: none; } }
@media (max-width: 719px) {
  .hd { height: calc(var(--spacing-header-m) + env(safe-area-inset-top)); gap: var(--spacing-2); }
  .hd-link, .hd-fr-k, .seg-r { display: none; }
  .seg { padding-top: var(--spacing-2); text-align: center; }
  .pz-l { display: none; }
  .pz-s { display: inline; }
  .hd-pause { border-bottom: 0; height: var(--spacing-touch); }
  .hd-pegs { display: none; }
}
@media (max-width: 374px) { .hd { gap: var(--spacing-1); } }

/* ---------- 무대 ---------- */
.reel { position: relative; }
.stage {
  position: relative;
  height: 100svh; min-height: 34rem;
  overflow: hidden;
  --hdr: calc(var(--spacing-header) + env(safe-area-inset-top));
}
@media (max-width: 719px) { .stage { --hdr: calc(var(--spacing-header-m) + env(safe-area-inset-top)); min-height: 36rem; } }
.art { position: absolute; inset: 0; z-index: 0; }
.copy { position: absolute; z-index: 2; }
.cp { position: absolute; left: 0; top: 0; width: 100%; }

/* 넓은 화면 — 왼쪽 1–5칸 글자 칸, 시트 6–12칸 */
@media (min-width: 1024px) {
  .copy {
    left: var(--spacing-gutter);
    top: var(--sheet-top, calc(var(--hdr) + var(--spacing-10)));
    width: calc((100% - 2 * var(--spacing-gutter) - 11 * var(--spacing-col-gap)) / 12 * 5 + 4 * var(--spacing-col-gap));
    bottom: var(--spacing-8);
  }
  /* 장면 3 에서 시트 A 가 글자 칸 밑으로 빠질 때 페그 구멍 줄(시트 위 끝 + 9~23px)이 도장과 겹치지 않게 — 장면 2~5 글자는 그 아래에서 시작 */
  .cp:not(.cp-key) { top: var(--spacing-10); }
}
/* 좁은 화면 — 위 글자 띠, 아래 시트 */
@media (max-width: 1023px) {
  .copy { left: var(--spacing-gutter); right: var(--spacing-gutter); top: calc(var(--hdr) + var(--spacing-3) + var(--band-off, 0px)); height: var(--band-h, 10rem); }
}

.title {
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 800;
  font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title);
  margin: var(--spacing-4) 0 var(--spacing-6);
  color: var(--color-ink);
}
.tl { display: block; }
.tl > span { display: inline-block; }
.cp-key .lead { max-width: 26ch; }
.cp-key .meta { margin-top: var(--spacing-4); }
.cp-key .hint { margin-top: var(--spacing-2); }
.h-d { display: none; }
.hint .h-s { display: block; }

@media (max-width: 1023px) {
  .title { font-size: var(--text-title-m); margin: var(--spacing-2) 0 var(--spacing-3); }
  .tl { display: inline; }
  .cp-key .lead { display: none; }
  .cp-key .meta { margin-top: 0; }
}
@media (max-width: 719px) {
  .title { font-size: var(--text-title-s); line-height: 0.92; margin: var(--spacing-1) 0 var(--spacing-2); }
  .m-d { display: none; }
  .cp-key .hint { position: absolute; left: 0; top: calc(var(--sheet-bot, 40rem) - var(--hdr) - var(--band-off, 0px)); }
  .hint > :not(.h-s) { display: none; }
}

.stamp { font-weight: 400; }
.stamp-r { display: block; }
.stamp-w {
  display: block; margin-top: var(--spacing-1);
  font-family: var(--font-display); font-weight: 700; font-stretch: var(--stamp-stretch, var(--stretch-display));
  font-size: var(--text-reel); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-ink);
  white-space: nowrap;
}
.memos { position: relative; margin-top: var(--spacing-6); min-height: 3.2em; }
.memo {
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.5;
  color: var(--color-ink); max-width: 38ch;
}
.memos .memo { position: absolute; left: 0; top: 0; }
.memo-k { display: inline-block; width: 4px; height: 4px; background: var(--color-ink); margin-right: var(--spacing-2); vertical-align: 0.2em; }
.memo-fixed { margin-top: var(--spacing-6); }
.note { margin-top: var(--spacing-4); font-size: var(--text-small); color: var(--color-pencil); max-width: 36ch; }
.hold {
  display: block; white-space: nowrap;
  margin-top: var(--spacing-1);
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 800;
  font-size: var(--text-hold); line-height: var(--leading-title); letter-spacing: var(--tracking-title);
}
.hold-txt { margin-top: var(--spacing-6); max-width: 34ch; }
.hold-lead { color: var(--color-pencil); }
.logline { margin-top: var(--spacing-3); }
.land-act { margin-top: var(--spacing-6); }
.land-act .ph { width: 100%; }
.land-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-6); margin-top: var(--spacing-4); }

@media (max-width: 1023px) {
  .memos { margin-top: var(--spacing-3); min-height: 3em; }
  .note { display: none; }
  .memo-fixed { margin-top: var(--spacing-3); }
  .hold { margin-top: var(--spacing-2); }
  .hold-txt { margin-top: var(--spacing-2); max-width: none; }
  .hold-lead { display: none; }
  .logline { margin-top: 0; font-size: var(--text-small); }
  .land-act { margin-top: var(--spacing-2); }
  .land-act .ph, .land-act .btn { display: none; }
  .land-btns { margin-top: 0; }
}

/* 시트 B 의 글자 — 시트 B 가 멈춘 자리(--sb*)에 겹친다 */
.sb-copy {
  position: absolute; z-index: 2;
  left: var(--sbx, 0px); top: var(--sby, 0px); width: var(--sbw, 0px); height: var(--sbh, 0px);
  padding: calc(var(--spacing-sheet-pad) + var(--spacing-4)) var(--spacing-sheet-pad) 0;
  pointer-events: none;
}
.sb-copy > * { pointer-events: auto; }
.sb-date {
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 800;
  font-size: var(--text-date); line-height: 1; letter-spacing: var(--tracking-title);
  margin: var(--spacing-2) 0 var(--spacing-3); white-space: nowrap;
}
.sb-v { color: var(--color-pencil); }
.sb-btn { display: none; }
.sb-btn:focus-visible { box-shadow: var(--shadow-focus-paper); }
@media (max-width: 719px) {
  .sb-copy { padding: var(--spacing-8) var(--spacing-4) 0; }
  .sb-date { font-size: var(--text-date-m); margin: var(--spacing-1) 0 var(--spacing-2); }
  .sb-v { max-width: 22ch; }
  .sb-btn { display: inline-flex; position: absolute; right: var(--spacing-4); top: 44%; height: var(--spacing-touch); padding: 0 var(--spacing-4); }
}

/* ---------- 그림 층 (main.js 가 짓는다) ---------- */
.skew { position: absolute; inset: 0; transform-origin: 0 50%; }
.cam { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.sheet { position: absolute; overflow: hidden; }
.leaf { position: absolute; inset: 0; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-edge); }
.leaf svg, .sheet > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-ghost .s-0 { fill: none; }
.ch-ghost .s-3 { fill: var(--color-ink); }
.flap { fill: var(--color-paper-back); fill-opacity: 0.82; stroke: var(--color-edge); stroke-width: 1; } /* 동화지는 반투명 — 접힌 뒷면 너머로 그림이 비친다 */
.fly { position: absolute; left: 0; top: 0; overflow: visible; }

.peg { fill: var(--color-table); stroke: var(--color-ink); stroke-width: 1; }
.base { stroke: var(--color-ink); stroke-width: 1.5; opacity: 0.8; }
.sc { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--color-pencil); }
.fr { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 800; font-size: 20px; fill: var(--color-ink); font-variant-numeric: tabular-nums; }
.ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }

.ch path { fill: none; stroke: var(--color-ink); stroke-width: var(--stroke-clean); stroke-linecap: round; stroke-linejoin: round; }
.ch .s-0 { fill: var(--color-paper); }
.ch .s-3 { fill: var(--color-ink); }
.sk path { fill: none; stroke: var(--color-blue); stroke-width: var(--stroke-rough); stroke-linecap: round; stroke-linejoin: round; }
.sk-1 { opacity: var(--skin-1); }
.sk-2 { opacity: var(--skin-2); }
.sk-3 { opacity: var(--skin-3); }
.reg { stroke: var(--color-edge); stroke-width: 1; }
.arc { fill: none; stroke: var(--color-blue); stroke-width: 1; stroke-dasharray: 2 4; }
.arc-tk { stroke: var(--color-blue); stroke-width: 1; }
.speed, .dust { fill: none; stroke: var(--color-ink); stroke-width: var(--stroke-rough); stroke-linecap: round; }
.fg rect { fill: none; stroke: var(--color-blue); stroke-width: 1; opacity: 0.5; }
.fg rect.fg-k { stroke-width: 1.5; opacity: 1; }
.fg path { fill: none; stroke: var(--color-blue); stroke-width: 1; }
.fg text { font-family: var(--font-mono); font-size: 10px; fill: var(--color-pencil); letter-spacing: 0.06em; }

/* ---------- 모션 경로 — sticky 무대 하나 + 투명 구간 다섯 ---------- */
html.motion .reel { height: calc(720 * 1svh); }
html.motion .stage { position: sticky; top: 0; }
html.motion .scn { position: absolute; left: 0; width: 1px; top: calc(var(--t) * 1svh); height: calc((var(--l) + 100) * 1svh); pointer-events: none; }
#key { --t: 0; --l: 80; }
#flip { --t: 80; --l: 180; }
#takeoff { --t: 260; --l: 120; }
#hold { --t: 380; --l: 100; }
#land { --t: 480; --l: 140; }
@media (max-width: 719px) {
  html.motion .reel { height: calc(630 * 1svh); }
  #key { --l: 60; }
  #flip { --t: 60; --l: 160; }
  #takeoff { --t: 220; --l: 100; }
  #hold { --t: 320; --l: 80; }
  #land { --t: 400; --l: 130; }
}
html.motion .cp { visibility: hidden; }
html.motion .cp.on { visibility: visible; }
html.motion .sb-copy { visibility: hidden; }
html.motion .sb-copy.on { visibility: visible; }
html.motion .hd { opacity: 0; }
html.motion.ready .hd { opacity: 1; transition: opacity 240ms var(--ease-out-quart); }
html.motion:not(.ready) .stage .copy,
html.motion:not(.ready) .stage .art { visibility: hidden; }

/* 정지 경로 — 스크립트가 무대를 장면마다 하나씩 쌓는다(.panel). 스크립트가 없으면 글자만 차례로 */
html:not(.motion) .scn { position: relative; }
html:not(.motion) .scn:empty { display: none; }
html:not(.motion) .memos .memo { position: static; margin-bottom: var(--spacing-2); }
html:not(.motion) .memos { min-height: 0; }
.panel { border-top: 1px solid var(--color-ink); height: min(100svh, 56.25rem); } /* 정지 판 — 아주 큰 창(전체 높이 컷)에서도 판 하나가 900 을 넘지 않는다 */
html:not(.js) .copy { position: static; padding: calc(var(--hdr) + var(--spacing-8)) var(--spacing-gutter) var(--spacing-8); }
html:not(.js) .cp { position: static; margin-bottom: var(--spacing-12); }
html:not(.js) .memos .memo { position: static; }
html:not(.js) .stage { height: auto; }
html:not(.js) .sb-copy { position: static; padding: 0 var(--spacing-gutter) var(--spacing-12); }

/* ---------- Drawings ---------- */
.drawings, .credits { padding: var(--spacing-24) var(--spacing-gutter) var(--spacing-16); border-top: 1px solid var(--color-ink); }
.drawings { padding-top: var(--spacing-6); border-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-3) var(--spacing-8); margin-bottom: var(--spacing-10); }
.sec-head .micro { padding-bottom: 0.4em; }
.pass { display: inline-flex; margin-left: auto; }
.pass button {
  height: var(--spacing-touch); min-width: 5.5rem; padding: 0 var(--spacing-4);
  border: 1px solid var(--color-ink); margin-left: -1px;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase;
  transition: background-color var(--duration-fade) var(--ease-out-quart), color var(--duration-fade) var(--ease-out-quart), transform var(--duration-press) var(--ease-out-quart);
}
.pass button:active { transform: scale(0.97); }
.pass button[aria-checked="true"] { background: var(--color-ink); color: var(--color-paper); }
.pass button:focus-visible { position: relative; z-index: 1; }
.dw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-10) var(--spacing-col-gap); }
.dw-sheet { aspect-ratio: 4 / 3; background: var(--color-paper); border: 1px solid var(--color-edge); position: relative; }
.dw-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dw figcaption { display: grid; gap: var(--spacing-1); margin-top: var(--spacing-3); }
.dw figcaption .small { color: var(--color-ink); }
.dw .clean { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dw .clean.s-0 { fill: var(--color-paper); }
.dw .clean.s-3 { fill: var(--color-ink); }
.dw .rough { fill: none; stroke: var(--color-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dw .r2 { opacity: 0.45; }
.dw .cons { fill: none; stroke: var(--color-blue); stroke-width: 1; opacity: 0.5; }
.dw .g-rough, .dw .g-clean { transition: opacity var(--duration-fade) var(--ease-out-quart); }
.drawings[data-pass="clean"] .g-rough { opacity: 0; }
.drawings[data-pass="rough"] .g-clean { opacity: 0; }
.drawings[data-pass="onion"] .g-rough { opacity: 0.5; }
.drawings[data-pass="onion"] .g-clean { transform: translate(2px, -2px); }
@media (max-width: 1023px) { .dw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .drawings { padding-inline: 0; }
  .sec-head { padding-inline: var(--spacing-gutter); }
  .pass { margin-left: 0; }
  .dw-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--spacing-gutter);
    padding: 0 var(--spacing-gutter) var(--spacing-4); position: relative;
    overscroll-behavior-x: contain;
  }
  .dw { scroll-snap-align: start; }
}
.dw-row:focus-visible { box-shadow: var(--shadow-focus); }

/* ---------- Credits ---------- */
.credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-16) var(--spacing-col-gap); }
.cr-col .h2 { margin-bottom: var(--spacing-8); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-weight: 400; padding: 0 var(--spacing-3) var(--spacing-2) 0;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--color-pencil);
}
.tbl td { border-top: 1px solid var(--color-ink); padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0; vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 1px solid var(--color-ink); }
.tbl-cr td:first-child { color: var(--color-pencil); width: 42%; }
.nw { white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-small); }
.city { font-weight: 600; }
.venue { color: var(--color-pencil); }
.cr-stat, .cr-note { margin-top: var(--spacing-4); }
.cr-note { color: var(--color-pencil); }
@media (max-width: 1023px) { .credits { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) {
  .city, .venue { display: block; }
  .tbl-sc th:nth-child(3), .tbl-sc td:nth-child(3) { width: 30%; }
}

/* ---------- 꼬리 ---------- */
.ft {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-col-gap);
  padding: var(--spacing-10) var(--spacing-gutter) calc(var(--spacing-10) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-ink);
}
.ft-name { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.ft-mid { display: grid; gap: var(--spacing-1); align-content: start; }
.ft-end { display: grid; justify-items: end; align-content: start; gap: var(--spacing-1); }
.ft-pause {
  min-height: var(--spacing-touch); padding: 0 var(--spacing-4); border: 1px solid var(--color-pencil);
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase;
}
@media (max-width: 719px) { .ft { grid-template-columns: minmax(0, 1fr); } .ft-end { justify-items: start; } }

/* ---------- 예고편 덮개 ---------- */
.trailer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--color-ink); color: var(--color-paper);
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--spacing-gutter);
}
.trailer[hidden] { display: none; }
.tr-in { width: min(60rem, 100%); display: grid; gap: var(--spacing-4); justify-items: start; }
.tr-in .ph { width: 100%; }
.tr-t { color: var(--color-on-ink-soft); }
.trailer :focus-visible { box-shadow: var(--shadow-focus-ink); }

/* ---------- 등장(모션 경로만, 한 번) ---------- */
html.motion .dw.pre, html.motion .tbl tr.pre > td { clip-path: inset(0 0 100% 0); }
html.motion .dw.go, html.motion .tbl tr.go > td {
  clip-path: inset(0 0 0 0);
  transition: clip-path 360ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 50ms);
}
html.motion .tbl tr.go > td { transition-duration: 300ms; transition-delay: calc(var(--i, 0) * 30ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}