/* heft — 콘크리트 야적장. 색·서체·간격은 tokens.css 의 변수만 쓴다.
   덩어리는 글자 1em = 1u(무대 단위)라 크기·위치를 u 로 적고, transform 하나로만 옮긴다. */

/* ── 리셋 ── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; }
:where(svg) { display: block; }
[hidden] { display: none !important; }

html { background: var(--color-bg); color: var(--color-ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
.mono, .num { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--spacing-4); top: var(--spacing-4); z-index: 50;
  padding: var(--spacing-2) var(--spacing-4); background: var(--color-plate); color: var(--color-on-ink);
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }
:focus-visible { outline: var(--spacing-border-heavy) solid var(--color-ink); outline-offset: 3px; }
button { touch-action: manipulation; }

/* ── 귀퉁이(corner-split) — 위 둘은 고정, 바탕 판 위에 ── */
.corner { position: fixed; top: var(--spacing-3); z-index: 30; }
.corner--tl { left: var(--spacing-edge); }
.corner--tr { right: var(--spacing-edge); }
.mark {
  display: inline-flex; flex-direction: column; gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2); background: var(--color-bg);
  text-decoration: none; color: var(--color-ink);
}
.mark__w { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: var(--tracking-block); }
.mark__s { font-size: var(--text-meta); line-height: var(--leading-tight); color: var(--color-ink-soft); }
.mark:hover .mark__w { text-decoration: underline; text-decoration-thickness: var(--spacing-border); text-underline-offset: 0.18em; }
.cnav { display: flex; gap: var(--spacing-1); background: var(--color-bg); padding: var(--spacing-1); }
.cl {
  display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 2.75rem;
  padding: 0 var(--spacing-3); font-size: var(--text-small); font-weight: 700;
  text-decoration: none; border: 0; background: none; cursor: pointer;
}
.cl .mono { font-size: var(--text-meta); font-weight: 400; letter-spacing: var(--tracking-meta); color: var(--color-ink-soft); }
.cl:hover { text-decoration: underline; text-decoration-thickness: var(--spacing-border); text-underline-offset: 0.3em; }
.cl[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--spacing-border-heavy); text-underline-offset: 0.3em; }
.cnav__menu { display: none; }
.menu {
  position: absolute; right: 0; top: calc(100% + var(--spacing-1)); min-width: 15rem;
  background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink);
}
.menu a {
  display: flex; align-items: center; gap: var(--spacing-3); min-height: 3.25rem; padding: 0 var(--spacing-4);
  font-weight: 700; text-decoration: none; border-top: var(--spacing-hair) solid var(--color-line);
}
.menu li:first-child a { border-top: 0; }
.menu a:hover { background: var(--color-plate); color: var(--color-on-ink); }
.menu .mono { font-size: var(--text-meta); }

/* ── 무대 공통 ── */
.stage { position: relative; }
.world { position: relative; }
.u-probe { position: absolute; left: 0; top: 0; width: var(--u); height: 0; visibility: hidden; pointer-events: none; }

/* 덩어리 — 크기·위치는 u. 레이아웃(d/m)마다 --x/--mx 를 고른다 */
.blk {
  --pw: var(--w); --ph: var(--h); --px: var(--x); --py: var(--y); --pa: var(--a, 0); --pfs: var(--fs, 1);
  position: absolute; left: 0; bottom: 0;
  display: grid; place-items: center;
  width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u));
  transform: translate(calc(var(--px) * var(--u) - 50%), calc(50% - var(--py) * var(--u))) rotate(calc(var(--pa) * -1deg));
  background: var(--color-surface); color: var(--color-ink);
  border: var(--spacing-border) solid var(--color-ink);
  font-family: var(--font-display); font-size: calc(var(--u) * var(--pfs));
  line-height: var(--leading-block); letter-spacing: var(--tracking-block);
  text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; cursor: grab;
}
.blk:hover { box-shadow: inset 0 0 0 var(--spacing-hair) var(--color-ink); }
/* 고름(조작판 대상)은 점선 + 테이프, 키보드 초점은 실선 3px — 둘이 같은 모양이면 초점이 두 개로 보인다 */
.blk.is-sel { outline: var(--spacing-border) dashed var(--color-ink); outline-offset: 6px; }
.blk:focus-visible, .blk.is-sel:focus-visible { outline: var(--spacing-border-heavy) solid var(--color-ink); outline-offset: 3px; }
.blk.is-held { cursor: grabbing; box-shadow: inset 0 0 0 var(--spacing-hair) var(--color-ink), var(--shadow-lift); }
/* 주황 테이프 — 힘이 걸린 덩어리(고름·잡힘)에만 */
.blk.is-sel::before, .blk.is-held::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--u) * -0.06);
  width: min(calc(var(--u) * 0.5), 70%); height: max(calc(var(--u) * 0.12), 0.5rem);
  translate: -50% 0; background: var(--color-accent-plate); pointer-events: none;
}
.blk__t { display: block; }
.blk--ball { border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-on-ink); --fs: 0.62; }
.blk--ball:hover { box-shadow: 0 0 0 var(--spacing-border) var(--color-surface) inset; }
.blk--ball.is-sel::before, .blk--ball.is-held::before {
  inset: -0.4rem; left: -0.4rem; top: -0.4rem; width: auto; height: auto; translate: none;
  background: none; border: var(--spacing-border) solid var(--color-accent); border-radius: var(--radius-full);
}
.blk--para {
  --fs: 0.14; --mfs: 0.19;
  place-items: start; padding: 0.62em 0.5em 0;
  font-family: var(--font-body); font-weight: 400; line-height: 1.35; letter-spacing: 0;
  border-width: var(--spacing-hair); white-space: normal;
}
.blk--para:hover { box-shadow: inset 0 0 0 var(--spacing-hair) var(--color-ink); }
.blk--steel {
  --fs: 0.13; --mfs: 0.19;
  justify-items: start; padding-left: 0.6em;
  background: var(--color-plate); color: var(--color-on-ink);
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0;
}
.blk--steel:hover { box-shadow: none; }
.blk--steel:hover .blk__t { text-decoration: underline; text-decoration-thickness: var(--spacing-border); text-underline-offset: 0.2em; }
.blk--steel:focus-visible { box-shadow: inset 0 0 0 var(--spacing-border) var(--color-surface); }
.blk--small { --fs: 0.12; --mfs: 0.16; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.blk--kg { --fs: 0.22; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; background: var(--color-plate); color: var(--color-on-ink); }
.blk--line {
  justify-items: start; padding-left: 0.5em;
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0; border-width: var(--spacing-hair);
}
.blk--pad { --fs: 0.17; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; color: var(--color-ink-soft); cursor: grab; }
.blk__s { font-size: 1em; }
.only-m { display: none; }

/* 무게표 — 덩어리 안 오른쪽 위(큰 덩어리) · 작은 덩어리는 바깥 오른쪽 */
.tag {
  position: absolute; top: 0.25rem; right: 0.25rem;
  padding: 0.0625rem 0.3125rem; background: var(--color-surface); color: var(--color-ink);
  border: var(--spacing-hair) solid var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-tag); font-weight: 700; line-height: 1.25;
  letter-spacing: 0; white-space: nowrap; pointer-events: none;
}
.tag .num { font-weight: 700; }
.tag-r .tag { top: 50%; right: auto; left: calc(100% + 0.25rem); translate: 0 -50%; }
.tag-r.tag-flip .tag { left: auto; right: calc(100% + 0.25rem); }
.blk--ball .tag {
  top: 50%; left: 50%; right: auto; translate: none; transform-origin: 0 0;
  transform: rotate(calc(var(--ra, 0) * 1rad)) translate(-50%, calc(var(--ph) * var(--u) / -2 - 100% - 0.25rem));
}
.blk.is-hit .tag { background: var(--color-accent-plate); color: var(--color-on-accent); }

/* 눈금 — 1u = 1 m 의 자 */
.ruler { position: absolute; inset: 0; pointer-events: none; }
.ruler__t {
  position: absolute; left: calc(var(--spacing-edge) * -0.6); bottom: calc(var(--y) * var(--u));
  padding-left: 0; font-size: var(--text-meta); line-height: 1; color: var(--color-ink-soft);
  border-bottom: var(--spacing-hair) solid var(--color-line); padding-bottom: var(--spacing-1); min-width: 1.75rem;
}
.ruler__t:first-child { border-bottom: 0; }
.floor-l {
  position: absolute; left: 50%; top: calc(100% + var(--spacing-2)); translate: -50% 0;
  font-size: var(--text-meta); line-height: 1; color: var(--color-ink-soft); white-space: nowrap;
}
.ruler__k { font-family: var(--font-body); }

/* ── ① 홈 무대 — 화면 전체, 위쪽은 던질 자리 ── */
.stage--pile {
  --u: min(var(--text-block), 17svh, calc(100vw / 7.8));
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  height: 100svh; min-height: 34rem;
}
.stage--pile .world { margin: 0 var(--spacing-edge); border-bottom: var(--spacing-border) solid var(--color-ink); }
.dock {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
  padding: var(--spacing-6) var(--spacing-edge) var(--spacing-4);
}
.meter {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2); background: var(--color-bg);
  font-size: var(--text-meta); line-height: 1.5;
}
.meter__k { color: var(--color-ink-soft); }
.meter.is-asleep [data-m="total"]::after { content: " 모두 잠듦"; font-family: var(--font-body); color: var(--color-ink-soft); }
.restack, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--spacing-4);
  background: var(--color-surface); color: var(--color-ink);
  border: var(--spacing-border) solid var(--color-ink); border-radius: var(--radius-none);
  font-family: var(--font-body); font-size: var(--text-small); font-weight: 700; line-height: 1.2;
  cursor: pointer; transition: transform var(--ease-time-press) var(--ease-out);
}
.restack:hover:not(:disabled), .btn:hover:not(:disabled) { background: var(--color-plate); color: var(--color-on-ink); }
.restack:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(2px); }
.restack:disabled, .btn:disabled { border-style: dashed; color: var(--color-ink-soft); cursor: not-allowed; }
.btn--tog[aria-pressed="true"], .btn[aria-pressed="true"] { background: var(--color-plate); color: var(--color-on-ink); }
.dock__ctl, .dock__top { display: none; }
.dock .restack { margin-left: auto; }

/* 조작판 — 홈 데스크톱은 무대 왼쪽 아래(고르면 나타남), 실험실은 무대 아래 한 줄 */
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-4); }
.ctl__sel { font-size: var(--text-small); }
.ctl__k { font-size: var(--text-meta); color: var(--color-ink-soft); }
.ctl__row { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.stage--pile .ctl {
  position: absolute; left: var(--spacing-edge); top: 5.5rem; z-index: 5; max-width: 33rem;
  padding: var(--spacing-3); background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink);
}
.stage--pile:not(.is-ctl) .ctl { display: none; }

/* ── 구간 ── */
.sec { padding: var(--spacing-section) var(--spacing-edge) 0; }
.sec__head { display: grid; gap: var(--spacing-3); max-width: 46rem; margin-bottom: var(--spacing-12); }
.sec__k { font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--color-ink-soft); }
.sec__h { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.01em; }
.sec__lede { font-size: var(--text-lede); max-width: 38rem; }
.go {
  display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 2.75rem;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: var(--spacing-border); text-underline-offset: 0.3em;
}
.arw { display: inline-block; transition: transform var(--ease-time-press) var(--ease-out); }
.go:hover .arw, .note__go:hover .arw { transform: translateX(4px); }

/* 실험 노트 — 볼트로 고정된 판(회전 0, 물리 덩어리와 구별) */
.notes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-6); align-items: start; }
.note {
  position: relative; grid-column: var(--col) / span var(--span); margin-top: calc(var(--shift) * 1rem);
  display: grid; gap: var(--spacing-3); padding: var(--spacing-8) var(--spacing-6) var(--spacing-6);
  background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink);
}
.note:has(.note__go:hover) { box-shadow: inset 0 0 0 var(--spacing-hair) var(--color-ink); }
.bolts i { position: absolute; width: 0.75rem; height: 0.75rem; }
.bolts i::before, .bolts i::after { content: ""; position: absolute; background: var(--color-ink); }
.bolts i::before { left: 0; right: 0; top: calc(50% - 1px); height: var(--spacing-border); }
.bolts i::after { top: 0; bottom: 0; left: calc(50% - 1px); width: var(--spacing-border); }
.bolts i:nth-child(1) { left: 0.5rem; top: 0.5rem; }
.bolts i:nth-child(2) { right: 0.5rem; top: 0.5rem; }
.bolts i:nth-child(3) { left: 0.5rem; bottom: 0.5rem; }
.bolts i:nth-child(4) { right: 0.5rem; bottom: 0.5rem; }
.note__n { font-size: var(--text-meta); color: var(--color-ink-soft); }
.note__h { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--text-word) * 1.5); line-height: 1; letter-spacing: var(--tracking-block); }
.note__hyp { max-width: 32rem; }
.note__k { font-size: var(--text-meta); color: var(--color-ink-soft); }
.note__fig { border-top: var(--spacing-hair) solid var(--color-line); padding-top: var(--spacing-3); }
.note__fig svg { width: 100%; max-width: 15rem; height: auto; fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: miter; }
.note__fig rect, .note__fig circle { fill: var(--color-bg); }
.note__go {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 2.75rem;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: var(--spacing-border); text-underline-offset: 0.3em;
}

/* 오늘의 저울 */
.today { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-6); align-items: start; }
.today__text { grid-column: 1 / span 5; display: grid; gap: var(--spacing-4); align-content: start; }
.today .scale { grid-column: 6 / span 7; }

/* 만든 사람 */
.method__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-6); align-items: start; }
.crew { grid-column: span 4; display: grid; gap: var(--spacing-2); padding: var(--spacing-6); border: var(--spacing-border) solid var(--color-ink); }
.crew:nth-child(2) { margin-top: var(--spacing-12); }
.crew__k { font-size: var(--text-meta); color: var(--color-ink-soft); }
.crew__n { font-size: 1.5rem; font-weight: 700; line-height: var(--leading-tight); }
.spec { grid-column: span 4; display: grid; gap: var(--spacing-3); padding: var(--spacing-6); background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink); }
.spec__h { font-size: var(--text-small); font-weight: 700; }
.spec__dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--spacing-3); padding: var(--spacing-2) 0; border-top: var(--spacing-hair) solid var(--color-line); font-size: var(--text-small); }
.spec__dl dt { color: var(--color-ink-soft); }

/* 꼬리 */
.foot { margin-top: var(--spacing-section); border-top: var(--spacing-border) solid var(--color-ink); }
.foot__in { display: grid; gap: var(--spacing-4); padding: var(--spacing-8) var(--spacing-edge) var(--spacing-24); max-width: 72rem; }
.foot__note { max-width: 40rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-6); }
.foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: var(--spacing-hair); text-underline-offset: 0.3em; }
.foot__links a:hover { text-decoration-thickness: var(--spacing-border); }
.foot__fonts { font-size: var(--text-meta); color: var(--color-ink-soft); }

/* ── 저울 — 들보는 운동학(스프링), 단어는 접시를 따라간다 ── */
.scale {
  --wfs: var(--text-word); --wh: max(calc(var(--wfs) * 1.2), 2.75rem); --cap: 4;
  --L: 58cqw; --th: 0;
  container-type: inline-size;
  display: grid; gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-6); border: var(--spacing-border) solid var(--color-ink);
}
.scale__board { position: relative; height: calc(var(--wh) * (var(--cap) + 1.4) + 7rem); }
.scale__post { position: absolute; left: 50%; top: 4rem; bottom: 0; width: var(--spacing-border); translate: -50% 0; background: var(--color-ink); }
.scale__post::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 4rem; height: var(--spacing-border); translate: -50% 0; background: var(--color-ink);
}
.scale__dial {
  position: absolute; left: 50%; top: 0; width: 9rem; height: 4rem; translate: -50% 0;
  display: flex; justify-content: space-between; align-items: end; padding: 0 var(--spacing-2) var(--spacing-1);
  background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink);
  font-size: var(--text-meta); color: var(--color-ink-soft);
}
.scale__ticks { position: absolute; left: 50%; top: 0; width: var(--spacing-hair); height: 0.75rem; background: var(--color-ink); }
.scale__needle {
  position: absolute; left: 50%; top: 0.5rem; width: 3px; height: 3.5rem; margin-left: -1.5px;
  background: var(--color-accent); transform-origin: 50% 100%; transform: rotate(calc(var(--th) * -1deg));
}
.scale__beam {
  position: absolute; left: 50%; top: 4rem; width: var(--L); height: 0.375rem; margin-left: calc(var(--L) / -2); margin-top: -0.1875rem;
  background: var(--color-ink); transform: rotate(calc(var(--th) * -1deg));
}
.pan {
  --s: calc(var(--wh) * (var(--cap) + 1.4) + 1rem);
  position: absolute; left: 50%; top: 4rem; width: 0; height: var(--s);
}
.pan--l { transform: translate(calc(var(--L) / -2 * cos(var(--th) * 1deg)), calc(var(--L) / 2 * sin(var(--th) * 1deg))); }
.pan--r { transform: translate(calc(var(--L) / 2 * cos(var(--th) * 1deg)), calc(var(--L) / -2 * sin(var(--th) * 1deg))); }
.pan__str { position: absolute; left: -1px; top: 0; bottom: 0; width: var(--spacing-border); background: var(--color-line); }
.pan__tray { position: absolute; left: calc(var(--wfs) * -1.9); right: calc(var(--wfs) * -1.9); bottom: 0; height: 0.625rem; background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink); }
.pan__stack {
  position: absolute; bottom: 0.625rem; left: 0; translate: -50% 0;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 0;
}
.scale__stand { display: grid; gap: var(--spacing-3); padding-top: var(--spacing-3); border-top: var(--spacing-border) solid var(--color-ink); }
.scale__standk { font-size: var(--text-meta); color: var(--color-ink-soft); }
.scale__words { display: flex; flex-wrap: wrap; gap: var(--spacing-6) var(--spacing-3); min-height: var(--wh); align-items: start; padding-bottom: var(--spacing-4); }
.scale__stand { --wfs: calc(var(--text-word) * 0.62); --wh: max(calc(var(--wfs) * 1.2), 2.75rem); }
.scale__stand .sw { min-width: 2.75rem; }
.scale__stand .sw .tag { top: calc(100% + 0.125rem); left: 0; translate: none; }
.sw {
  position: relative; display: inline-grid; place-items: center; height: var(--wh); padding: 0 0.14em;
  background: var(--color-surface); color: var(--color-ink); border: var(--spacing-border) solid var(--color-ink);
  font-family: var(--font-display); font-size: var(--wfs); line-height: var(--leading-block); letter-spacing: var(--tracking-block);
  white-space: nowrap; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.sw:hover { box-shadow: inset 0 0 0 var(--spacing-hair) var(--color-ink); }
.sw.is-sel { outline: var(--spacing-border) dashed var(--color-ink); outline-offset: 6px; }
.sw:focus-visible, .sw.is-sel:focus-visible { outline: var(--spacing-border-heavy) solid var(--color-ink); outline-offset: 3px; }
.sw.is-sel::before, .sw.is-held::before {
  content: ""; position: absolute; left: 50%; top: -0.2em; width: 1em; height: 0.24em; translate: -50% 0; background: var(--color-accent-plate);
}
.sw.is-held { z-index: 5; cursor: grabbing; box-shadow: var(--shadow-lift); }
.sw .tag { top: 50%; right: auto; left: calc(100% + 0.25rem); translate: 0 -50%; }
.scale__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-4); }
.scale__out { font-size: var(--text-small); }

/* ── ② 실험실 ── */
.is-lab main { padding-top: 5.5rem; }
.tabs { padding: 0 var(--spacing-edge); }
.tabs__list { display: flex; border: var(--spacing-border) solid var(--color-ink); background: var(--color-bg); }
.tabs__list li { flex: 1 1 0; min-width: 0; }
.tabs__list li + li { border-left: var(--spacing-border) solid var(--color-ink); }
.tab {
  display: flex; align-items: center; gap: var(--spacing-2); min-height: 3.25rem; padding: 0 var(--spacing-4);
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.tab .num { font-size: var(--text-meta); }
.tab:hover { background: var(--color-surface); }
.tab[aria-current="true"] { background: var(--color-plate); color: var(--color-on-ink); }
.exp {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-6) var(--spacing-8);
  padding: var(--spacing-6) var(--spacing-edge) 0; align-items: start;
}
.exp.is-in { animation: exp-in var(--ease-time-switch) var(--ease-in-out); }
@keyframes exp-in { from { opacity: 0; } to { opacity: 1; } }
.exp__note { grid-column: 1 / span 4; display: grid; gap: var(--spacing-4); align-content: start; }
.exp__stage { grid-column: 5 / span 8; container-type: inline-size; display: grid; gap: var(--spacing-4); position: sticky; top: 5.5rem; }
.exp__n { font-size: var(--text-meta); color: var(--color-ink-soft); }
.exp__h { font-family: var(--font-display); font-weight: 400; font-size: var(--text-exp); line-height: 1; letter-spacing: var(--tracking-block); }
.exp__k { display: inline-block; margin-right: var(--spacing-2); font-size: var(--text-meta); font-weight: 700; color: var(--color-ink-soft); }
.exp__dl { border-top: var(--spacing-border) solid var(--color-ink); }
.exp__dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--spacing-3); padding: var(--spacing-2) 0; border-bottom: var(--spacing-hair) solid var(--color-line); font-size: var(--text-small); }
.exp__dl dt { color: var(--color-ink-soft); }
.acts { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.exp__keys { font-size: var(--text-small); color: var(--color-ink-soft); }
.exp__obs { padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink); }
.exp__obs output { font-weight: 700; }
.exp__next { grid-column: 1 / -1; padding: var(--spacing-4) 0 var(--spacing-8); }

.stage--exp {
  --W: 10; --H: 6.4;
  --u: calc((100cqw - var(--spacing-border) * 2) / var(--W));
  border: var(--spacing-border) solid var(--color-ink); background: var(--color-bg);
}
.frame { transform: rotate(calc(var(--tilt, 0) * 1deg)) scale(var(--fit, 1)); transition: transform var(--ease-time-tilt) var(--ease-out); }
.stage--exp .world { width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); touch-action: pan-y; }
.stage--exp .world { overflow: clip; overflow-clip-margin: 0.5rem; }
.stage--friction .world { overflow: hidden; }
.exp .scale__out { display: none; }
.stage--exp .blk--word { --fs: 0.5; }
.stage--exp .blk--ball { --fs: 0.34; }
.stage--exp .blk--small { --fs: 0.2; --mfs: 0.2; }
.stage--exp .tag__mat { display: none; }
.stage--exp .tag { font-size: 0.625rem; padding: 0 0.1875rem; }
.stage--tilt .frame { box-shadow: inset 0 0 0 var(--spacing-hair) var(--color-line); }
.stage--tilt .world { box-shadow: inset 0 calc(var(--spacing-border) * -1) 0 var(--color-ink); }
.fix {
  --pw: var(--w); --ph: var(--h); --px: var(--x); --py: var(--y); --pa: var(--a, 0);
  position: absolute; left: 0; bottom: 0; width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u));
  transform: translate(calc(var(--px) * var(--u) - 50%), calc(50% - var(--py) * var(--u))) rotate(calc(var(--pa) * -1deg));
  border: var(--spacing-border) solid var(--color-ink); background: var(--color-surface); pointer-events: none;
}
.fix--ramp { background: var(--color-line); }
.fix--wedge { background: var(--color-ink); }
.fix--wedge.is-out { display: none; }
.fix--stop { background: var(--color-ink); }
.lbl {
  --px: var(--x); --py: var(--y);
  position: absolute; left: calc(var(--px) * var(--u)); bottom: calc(var(--py) * var(--u));
  font-size: var(--text-small); line-height: 1.2; white-space: nowrap; pointer-events: none;
}
.lbl__n { font-weight: 700; }
.stage--exp + .ctl { padding: var(--spacing-2) var(--spacing-3); border: var(--spacing-border) solid var(--color-ink); background: var(--color-surface); }
.is-lab .dock {
  position: fixed; left: var(--spacing-edge); right: var(--spacing-edge); bottom: var(--spacing-3); z-index: 20;
  padding: 0; pointer-events: none;
}
.is-lab .dock > * { pointer-events: auto; }
.is-lab .foot__in { padding-bottom: 7rem; }

/* ── 홈 무대 모바일 배치(<1024) — 더미는 4~5층으로 좁게, 위쪽은 손가락 스크롤 자리 ── */
@media (max-width: 1023.98px) {
  .stage--pile {
    --u: min(var(--text-block), calc((100svh - 7.5rem) * 0.115), calc(100vw / 4.4));
  }
  .stage--pile .blk { --pw: var(--mw, var(--w)); --ph: var(--mh, var(--h)); --px: var(--mx, var(--x)); --py: var(--my, var(--y)); --pa: var(--ma, 0); --pfs: var(--mfs, var(--fs, 1)); }
  .stage--pile [data-only="d"] { display: none; }
  .stage--pile .blk:not(.is-big) .tag__mat { display: none; }
  .stage--pile .only-d { display: none; }
  .stage--pile .only-m { display: inline; }
  .stage--pile .is-big .tag { top: 0; right: 0; padding: 0 0.25rem; border-width: 0 0 var(--spacing-hair) var(--spacing-hair); font-size: 0.5625rem; line-height: 1.2; }
  .stage--pile .blk--steel .tag { top: 50%; right: auto; left: calc(100% + 0.25rem); translate: 0 -50%; }
  .stage--pile .blk--small .tag { top: 0.125rem; right: 0.125rem; left: auto; translate: none; font-size: 0.5625rem; padding: 0 0.1875rem; }
  .notes__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .note { grid-column: auto / span 3; margin-top: 0; }
  .note:nth-child(5) { grid-column: span 6; }
  .today__text, .today .scale { grid-column: 1 / -1; }
  .crew, .spec { grid-column: span 6; }
  .crew:nth-child(2) { margin-top: 0; }
  .spec { grid-column: 1 / -1; }
  .exp__note, .exp__stage { grid-column: 1 / -1; }
  .exp__stage { order: -1; position: static; }
}

/* ── 폰(<720) — 귀퉁이 위는 흐르고, 아래는 전폭 띠 ── */
@media (max-width: 719.98px) {
  .corner { position: absolute; top: var(--spacing-2); }
  .corner--tl { left: var(--spacing-3); }
  .corner--tr { right: var(--spacing-3); }
  .mark { padding: var(--spacing-1); }
  .mark__w { font-size: 1.25rem; }
  .mark__x { display: none; }
  .cnav { padding: 0; }
  .cnav__wide { display: none; }
  .cnav__menu { display: block; }
  .cl { padding: 0 var(--spacing-2); }
  .is-home main { padding-top: 3.5rem; }
  .stage--pile { height: min(calc(100svh - 7.5rem), 46rem); min-height: 24rem; grid-template-rows: minmax(0, 1fr); }
  .stage--pile .world { margin: 0 var(--spacing-edge); }
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--spacing-2); align-items: center;
    height: calc(var(--spacing-strip) + env(safe-area-inset-bottom)); padding: 0 var(--spacing-3) env(safe-area-inset-bottom);
    background: var(--color-bg); border-top: var(--spacing-border) solid var(--color-ink);
  }
  .is-lab .dock { left: 0; right: 0; bottom: 0; padding: 0 var(--spacing-3) env(safe-area-inset-bottom); pointer-events: auto; }
  .meter { padding: 0; }
  .meter__sep, .meter__g, .meter__hit { display: none; }
  .meter .meter__k:first-child::after { content: ""; }
  .dock__ctl { display: inline-flex; }
  .dock .restack { justify-self: end; grid-column: 3; }
  .dock__ctl, .dock .restack, .dock__top {
    min-height: 2.75rem; padding: 0 var(--spacing-4); align-items: center;
    background: var(--color-surface); border: var(--spacing-border) solid var(--color-ink);
    font-size: var(--text-small); font-weight: 700; cursor: pointer;
  }
  .dock__ctl[aria-expanded="true"] { background: var(--color-plate); color: var(--color-on-ink); }
  .dock.is-away .restack { display: none; }
  .dock.is-away .dock__top { display: inline-flex; text-decoration: none; }
  .dock.is-away .dock__ctl { display: none; }
  .stage--pile .ctl, .stage--exp + .ctl {
    position: fixed; left: 0; right: 0; bottom: calc(var(--spacing-strip) + env(safe-area-inset-bottom)); z-index: 24; max-width: none; top: auto;
    padding: var(--spacing-3); background: var(--color-surface); border: 0; border-top: var(--spacing-border) solid var(--color-ink);
  }
  .stage--pile:not(.is-open) .ctl, .stage--exp:not(.is-open) + .ctl { display: none; }
  .stage--pile.is-open .ctl { display: grid; }
  .ctl__row .btn { flex: 1 1 auto; padding: 0 var(--spacing-3); }
  .sec__head { margin-bottom: var(--spacing-8); }
  .notes__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-6); }
  .note, .note:nth-child(5) { grid-column: 1 / -1; }
  .note:nth-child(even) { margin-left: var(--spacing-6); }
  .crew, .spec { grid-column: 1 / -1; }
  .scale { padding: var(--spacing-4); --cap: 3; --L: 46cqw; }
  .scale__words { gap: var(--spacing-8) var(--spacing-3); }
  .is-lab main { padding-top: 3.75rem; }
  .tabs { padding: 0; }
  .tabs__list { overflow-x: auto; scroll-padding-inline: var(--spacing-edge); scrollbar-width: none; border-left: 0; border-right: 0; }
  .tabs__list li { flex: 0 0 auto; }
  .stage--exp { --W: 7; --H: 7.5; }
  .stage--exp .blk, .stage--exp .fix { --pw: var(--mw, var(--w)); --ph: var(--mh, var(--h)); --px: var(--mx, var(--x)); --py: var(--my, var(--y)); --pa: var(--ma, 0); --pfs: var(--mfs, var(--fs, 1)); }
  .stage--exp .lbl { --px: var(--mx); --py: var(--my); }
  .stage--exp [data-only="d"] { display: none; }
  .foot__in { padding-bottom: calc(var(--spacing-strip) + var(--spacing-12)); }
  .is-lab .foot__in { padding-bottom: calc(var(--spacing-strip) + var(--spacing-12)); }
}

/* reduced-motion — 전환·누름 0, 엔진은 즉시 풀기(main.js) */
@media (prefers-reduced-motion: reduce) {
  .frame, .restack, .btn, .arw { transition: none; }
  .exp.is-in { animation: none; }
}
html.is-still .frame { transition: none; }
html.is-still .exp.is-in { animation: none; }