/* isobar — 스타일. 색·서체·크기·간격은 tokens.css 변수만(raw 색 0).
 * 두 겹: 기본 규칙 = 정지 카탈로그(장면마다 구운 정지 컷 + 글자) · html.motion = sticky 3D 무대 + 장면 트랙 + 줄 마스크.
 * 마스크 전 상태(줄 숨김)는 html.motion 아래에만 있다 — 스크립트가 막혀도 숨은 글자 0.
 * 글자 뒤 받침 판·그라데이션·블러 0: 글자 칸은 바람의 장애물이라 입자가 칸 안에 들어오지 않는다(scene.js). */

/* ── 리셋 ─────────────────────────────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ul, ol, dl, dd, figure, pre) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(img, picture, canvas) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; border: 0; border-radius: var(--radius-none); background: none; cursor: pointer; }
:where(a) { color: inherit; }

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--spacing-ticker);
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
button, .btn { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: 20;
  left: var(--spacing-4);
  top: calc(var(--spacing-ticker) + var(--spacing-2));
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; }
.sm { display: none; }

/* 공용 글자 */
.field,
.code-k {
  font-family: var(--font-mono);
  font-size: var(--text-field);
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  color: var(--color-mute);
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--spacing-4);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-ticker);
  font-weight: 700;
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 120ms var(--ease-out-quad);
}
.btn:active { transform: scale(0.97); }
.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--text-ticker);
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ── 머리 ticker ─────────────────────────────────────────────────────── */
.ticker {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  gap: 1px;
  height: calc(var(--spacing-ticker) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.tk {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
  padding-inline: var(--spacing-4);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-ticker);
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  white-space: nowrap;
}
.tk-mark { gap: var(--spacing-3); text-decoration: none; }
.led { width: 6px; height: 6px; background: var(--color-mute); }
.wm { font-family: var(--font-mono); font-weight: 700; letter-spacing: var(--tracking-wordmark); }
.tk-clock { min-width: 5.5rem; }
.tk-layer .k { color: var(--color-mute); }
.tk-feed { position: relative; overflow: hidden; padding-inline: 0; text-transform: none; } /* 판독 줄은 원문이 대문자 — 변환을 겹치지 않는다 */
.marquee { display: none; }
.feed-still { padding-inline: var(--spacing-4); color: var(--color-mute); overflow: hidden; text-overflow: ellipsis; }
.tk-read { display: none; }
.tk-hold { display: none; }
.tk-key { background: var(--color-ink); color: var(--color-bg); font-weight: 700; text-decoration: none; }
.tk-key:active { transform: scale(0.97); }
.v-live { display: none; }

/* ── 무대 — 기본(카탈로그)에서는 없다 ─────────────────────────────────── */
.stage { display: none; }

/* ── 정지 카탈로그 (기본 배치) ───────────────────────────────────────── */
.scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-6);
  padding: var(--spacing-12) var(--spacing-gutter);
  border-top: 1px solid var(--color-line);
}
.s-calm { padding-top: calc(var(--spacing-ticker) + var(--spacing-12)); border-top: 0; }
.still { background: var(--color-panel); border: 1px solid var(--color-line); }
.still img { width: 100%; height: auto; }
/* 카탈로그의 한 칸 컷 — 칸이 큰 빈 바탕 안에서 작아 보여 칸 자리를 중심으로 1.6배(qa-1 P3-3). 칸 중심 = 가로 컷 44% · 세로 컷 24% */
.s-endpoint .still { overflow: hidden; }
.s-endpoint .still img { transform: scale(1.6); transform-origin: 50% 24%; }
@media (min-width: 720px) {
  .s-endpoint .still img { transform-origin: 50% 44%; }
}
.copy { position: relative; display: flex; flex-direction: column; gap: var(--spacing-6); }
.m { display: block; }
.mi { display: block; }
.hl {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.hero-sub { display: flex; flex-direction: column; gap: var(--spacing-4); max-width: 34rem; }
.lead { font-size: var(--text-lead); line-height: 1.45; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-6); }
.fict { font-size: var(--text-small); color: var(--color-mute); }
.meta { display: grid; gap: var(--spacing-1); font-family: var(--font-mono); font-size: var(--text-field); letter-spacing: var(--tracking-field); text-transform: uppercase; }
.meta .mi { display: grid; grid-template-columns: 6.5rem auto; }
.meta .k { color: var(--color-mute); }
.cue { display: none; }
.block { display: flex; flex-direction: column; max-width: 34rem; }
.name {
  margin-top: var(--spacing-3);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-scene);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.name .ln { display: block; }
.para { margin-top: var(--spacing-6); font-size: var(--text-lead); line-height: 1.45; }
.read { display: none; }
.block .field,
.ep-field { text-transform: none; } /* 원문이 대문자 */
.figs { margin-top: var(--spacing-6); }
.figs dl { display: flex; gap: var(--spacing-8); }
.figs dt,
.spec dt {
  font-family: var(--font-mono);
  font-size: var(--text-field);
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  color: var(--color-mute);
}
.figs dd { font-family: var(--font-mono); font-size: var(--text-figure); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ep-field { font-family: var(--font-mono); font-size: var(--text-field); letter-spacing: var(--tracking-field); text-transform: uppercase; color: var(--color-mute); }
.ep { display: flex; flex-direction: column; gap: var(--spacing-4); }
.call { font-family: var(--font-mono); font-size: var(--text-call); line-height: 1.4; }
.call .seg { display: inline; }
.resp {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-mute);
  white-space: pre;
}
.resp .m { display: block; }
.ep-cta .cta { justify-content: center; }
@media (min-width: 1024px) {
  .scene { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-12); align-items: end; padding-block: var(--spacing-16); }
  .s-calm { padding-top: calc(var(--spacing-ticker) + var(--spacing-16)); }
  :where(html:not(.motion)) .s-calm .hl { font-size: var(--text-scene); }
}

/* ── 정적 구간 ───────────────────────────────────────────────────────── */
.static { position: relative; background: var(--color-bg); }
.sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-8) var(--spacing-gutter);
  padding: var(--spacing-24) var(--spacing-gutter);
  border-top: 1px solid var(--color-line);
}
.sec-head { display: flex; flex-direction: column; gap: var(--spacing-4); }
.h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.vm, .vmi { display: block; }
.sec-lead { max-width: 30rem; color: var(--color-mute); }
.sec-body { display: flex; flex-direction: column; gap: var(--spacing-6); min-width: 0; }

.tabs { display: flex; gap: 1px; width: max-content; max-width: 100%; background: var(--color-line); border: 1px solid var(--color-line); }
.tab {
  min-height: 44px;
  padding-inline: var(--spacing-4);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-ticker);
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  transition: background-color 160ms var(--ease-out-quad), color 160ms var(--ease-out-quad);
}
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-bg); }
.panel { display: grid; gap: var(--spacing-4); }
.panel[hidden] { display: none; }
.panel.swap { animation: fade 160ms var(--ease-out-quad); }
.code { min-width: 0; background: var(--color-panel); border: 1px solid var(--color-line); }
.code-k { padding: var(--spacing-2) var(--spacing-4); border-bottom: 1px solid var(--color-line); }
.code pre {
  overflow-x: auto;
  padding: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 1.65;
  color: var(--color-ink);
}
.c-k { font-weight: 700; }
.c-s { color: var(--color-mute); }
.c-a { color: var(--color-accent); }
.spec { display: grid; border-top: 1px solid var(--color-line); }
.spec div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--spacing-4); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-line); }
.spec dd { font-family: var(--font-mono); font-size: var(--text-small); }
.dim { color: var(--color-mute); }

.case-grid,
.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.case,
.tier { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-8) var(--spacing-6); background: var(--color-bg); }
.case h3 { font-size: var(--text-lead); font-weight: 700; }
.case .fig { margin-top: auto; padding-top: var(--spacing-6); font-family: var(--font-mono); font-size: var(--text-figure); line-height: 1.2; }
.case .fig span,
.price span { display: block; margin-top: var(--spacing-1); font-size: var(--text-field); letter-spacing: var(--tracking-field); text-transform: uppercase; color: var(--color-mute); }
.price { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-price); line-height: 1; letter-spacing: var(--tracking-display); }
.price span { font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--tracking-field); }
.pick { box-shadow: inset 0 2px 0 var(--color-accent); }
.incl { display: grid; border-top: 1px solid var(--color-line); }
.incl li { padding-block: var(--spacing-2); border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
.tier .btn,
.tier .link { margin-top: auto; align-self: flex-start; }
.note { font-size: var(--text-small); color: var(--color-mute); }

.qa { border-top: 1px solid var(--color-line); }
.qa details { border-bottom: 1px solid var(--color-line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 56px;
  padding-block: var(--spacing-3);
  font-size: var(--text-lead);
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  line-height: 1;
  transition: transform 160ms var(--ease-out-quad);
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { max-width: 38rem; padding-bottom: var(--spacing-6); color: var(--color-mute); }

.foot {
  display: grid;
  gap: var(--spacing-4);
  padding: var(--spacing-16) var(--spacing-gutter) calc(var(--spacing-16) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  font-size: var(--text-small);
  color: var(--color-mute);
}
.foot .wm { color: var(--color-ink); font-size: var(--text-ticker); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--spacing-6); color: var(--color-ink); }

@media (min-width: 720px) {
  .case-grid,
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sec { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sec-head { grid-column: 1 / span 5; }
  .sec-body,
  .qa { grid-column: 6 / -1; }
  .case-grid,
  .tiers,
  .cases .note,
  .pricing .note { grid-column: 1 / -1; }
  .docs .sec-body { padding-top: var(--spacing-2); }
}

/* ── 좁은 화면 머리 ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .tk-layer .k { display: none; }
}
@media (max-width: 719px) {
  .ticker {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    height: calc(var(--spacing-ticker-m) + 1px + env(safe-area-inset-top)); /* 아래 1px 선 — 칸 자체는 44px */
  }
  .tk { padding-inline: var(--spacing-3); }
  .tk-feed,
  .tk-key { display: none; }
  .tk-layer .lg { display: none; }
  .tk-layer .sm { display: inline; }
  .lg { display: none; }
  .sm { display: inline; }
  .btn { min-height: 48px; }
  html { scroll-padding-top: var(--spacing-ticker-m); }
  .s-calm { padding-top: calc(var(--spacing-ticker-m) + var(--spacing-8)); }
  .call .seg { display: block; }
}

/* ══ html.motion — 3D 무대 + 장면 트랙 ══════════════════════════════════ */
.motion .v-live { display: inline; }
.motion .v-still { display: none; }
.motion .led { background: var(--color-accent); }
.motion.held .led { background: var(--color-mute); }
.motion .tk-hold { display: flex; }
.motion .tk-hold[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.motion .marquee { display: flex; width: max-content; animation: feed var(--feed-dur, 84s) linear infinite; }
/* 양끝 12px 페이드 — 판독이 칸 끝에서 글자 중간으로 잘려 시작하지 않게(qa-1 P3-1). 마스크는 알파만 쓴다 */
.motion .tk-feed {
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-ink) 12px, var(--color-ink) calc(100% - 12px), transparent);
  mask-image: linear-gradient(90deg, transparent, var(--color-ink) 12px, var(--color-ink) calc(100% - 12px), transparent);
}
.motion .feed-still { display: none; }
.motion .run { display: flex; padding-right: var(--spacing-8); }
.motion .run span { padding-inline: var(--spacing-4); color: var(--color-mute); }
.motion .run span + span { border-left: 1px solid var(--color-line); }
.motion .ticker:hover .marquee,
.motion.held .marquee { animation-play-state: paused; }
@keyframes feed { to { transform: translateX(-50%); } }
.motion .ticker { animation: fade 240ms var(--ease-out-expo) both; }
@keyframes fade { from { opacity: 0; } }

.motion .walk { position: relative; }
.motion .stage {
  display: block;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--color-bg);
}
.motion .poster,
.motion .poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .poster img { object-fit: cover; }
.motion .poster .veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: pan-y;
  cursor: crosshair;
  transition: opacity 300ms var(--ease-out-quad);
}
.motion .stage.live canvas { opacity: 1; }
.motion .stage .poster canvas { opacity: 1; transition: none; cursor: auto; }
.motion .stage.settled .poster { visibility: hidden; }

/* 탐침 — 십자(1px 먹) + 판독 칸(바탕 단색 + 1px 선). 판독 칸도 장애물 */
.probe { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; will-change: transform; }
.probe.on { opacity: 1; }
.cross { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; }
.cross::before,
.cross::after { content: ""; position: absolute; background: var(--color-ink); }
.cross::before { left: 0; right: 0; top: 5.5px; height: 1px; }
.cross::after { top: 0; bottom: 0; left: 5.5px; width: 1px; }
.probe-read {
  position: absolute;
  left: 16px;
  top: 12px;
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-field);
  white-space: nowrap;
}
.iso-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-field);
  letter-spacing: var(--tracking-field);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.motion .track { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; }
.motion .scene { display: block; padding: 0; border: 0; height: calc((var(--len) + 100) * 1svh); }
.motion .scene + .scene { margin-top: -100svh; }
.motion .s-calm { --len: 120; }
.motion .s-cyclone { --len: 170; }
.motion .s-isobars { --len: 170; }
.motion .s-thermal { --len: 150; }
.motion .s-jetstream { --len: 170; }
.motion .s-endpoint { --len: 150; height: calc((var(--len) + 200) * 1svh); }
.motion .scene .still { display: none; }
.motion .copy { position: sticky; top: 0; height: 100svh; display: block; }
.motion .copy a,
.motion .copy button { pointer-events: auto; }
.motion [data-ob] .m { width: fit-content; max-width: 100%; overflow: clip; overflow-clip-margin: 0.06em; }
.motion .scene:not(.s-calm) .mi { transform: translateY(105%); }
.motion .hl .in { display: block; animation: rise 480ms var(--ease-out-expo) both; }
.motion .hl .m + .m .in { animation-delay: 80ms; }
@keyframes rise { from { transform: translateY(105%); } }

/* 장면 1 — 왼쪽 아래 헤드라인 + 리드, 오른쪽 위 장 메타, 오른쪽 아래 안내 */
.motion .s-calm .copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--spacing-gutter) 8svh; }
.motion .hero { max-width: var(--spacing-hero); }
.motion .hero-sub { margin-top: var(--spacing-6); max-width: var(--spacing-copy); }
@media (max-width: 1023px) {
  .motion .hero,
  .motion .hero-sub { max-width: none; }
}
.motion .meta { position: absolute; right: var(--spacing-gutter); top: calc(var(--spacing-ticker) + var(--spacing-6)); }
.motion .cue {
  display: grid;
  justify-items: end;
  gap: var(--spacing-1);
  position: absolute;
  right: var(--spacing-gutter);
  bottom: 8svh;
  font-family: var(--font-mono);
  font-size: var(--text-field);
  letter-spacing: var(--tracking-field);
  text-transform: uppercase;
  color: var(--color-mute);
}

/* 장면 2~5 — 글자 블록 왼쪽 아래(1024+) */
.motion .block { position: absolute; left: var(--spacing-gutter); bottom: 10svh; width: var(--spacing-copy); max-width: none; }

/* 장면 6 — 칸 위 필드 줄, 칸 아래 API 한 줄과 응답 */
.motion .s-endpoint .copy { text-align: center; }
.motion .ep-field { position: absolute; left: 0; right: 0; top: 17svh; }
.motion .ep-field .m { margin-inline: auto; }
.motion .ep { position: absolute; left: var(--spacing-gutter); right: var(--spacing-gutter); top: 66svh; align-items: center; gap: var(--spacing-3); }
.motion .ep .m { margin-inline: auto; }
.motion .resp { text-align: left; }
.motion .resp .m { margin-inline: 0; }

/* 정적 구간 — 무대를 아래에서 덮는다(자기 층: 덮이기 전 무대가 비어 보이지 않게) */
.motion .static { z-index: 2; margin-top: -100svh; will-change: transform; }
.motion .sec .vm { overflow: clip; }
.motion .sec .vmi { transform: translateY(105%); transition: transform 480ms var(--ease-out-expo); }
.motion .sec.in .vmi { transform: none; }
.motion .case,
.motion .tier { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease-out-quad), transform 320ms var(--ease-out-quad); }
.motion .sec.in .case,
.motion .sec.in .tier { opacity: 1; transform: none; }
.motion .sec.in .case:nth-child(2) { transition-delay: 60ms; }
.motion .sec.in .case:nth-child(3) { transition-delay: 120ms; }
.motion .sec.in .tier:nth-child(2) { transition-delay: 50ms; }
.motion .sec.in .tier:nth-child(3) { transition-delay: 100ms; }

@media (max-width: 1023px) {
  .motion .meta { display: none; }
  .motion .s-calm .copy { padding-bottom: max(var(--spacing-6), env(safe-area-inset-bottom)); }
  .motion .block { left: var(--spacing-gutter); right: var(--spacing-gutter); width: auto; bottom: max(var(--spacing-6), env(safe-area-inset-bottom)); }
  .motion .cue { top: calc(var(--spacing-ticker) + var(--spacing-3)); bottom: auto; }
  .motion .probe-hint { display: none; }
}
@media (max-width: 719px) {
  .motion .s-cyclone { --len: 120; }
  .motion .s-isobars { --len: 120; }
  .motion .s-thermal { --len: 110; }
  .motion .s-jetstream { --len: 120; }
  .motion .s-endpoint { --len: 110; }
  .motion .s-calm { --len: 90; }
  .motion .cue { top: calc(var(--spacing-ticker-m) + var(--spacing-3)); }
  .motion .para p { display: none; }
  .motion .para.open p { display: block; }
  .motion .read {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: var(--text-ticker);
    letter-spacing: var(--tracking-field);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  .motion .para { margin-top: var(--spacing-2); }
  .motion .figs { margin-top: var(--spacing-3); }
  .motion .hero-sub { margin-top: var(--spacing-4); gap: var(--spacing-3); }
}
/* 한 칸 장면 — 세로 화면은 카메라가 칸을 위로 올린다(scene.js 렌즈 이동과 같은 기준: 가로세로비) */
@media (max-aspect-ratio: 1/1) {
  .motion .ep-field { top: 45svh; }
  .motion .ep { top: 50svh; }
}
@media (max-width: 719px) and (max-height: 700px) {
  .motion .fict { display: none; }
}

/* 굽기(#bake=) — 정지 컷을 만들 때 DOM 글자·머리를 숨긴다(자리는 남아 장애물 사각이 그대로) */
.bake .ticker,
.bake .copy,
.bake .poster,
.bake .probe,
.bake .iso-label,
.bake .skip { visibility: hidden; }
.bake .stage canvas { transition: none; }
.bake .hl .in { animation: none; }