/* mycelia — 젖은 흙 위 표본 대장. tokens.css 의 변수만 쓴다(raw 색 0, G2 #9).
 * 원칙: 판이 곧 길이다 · 강조색은 선에만(균사선·링크 밑줄·초점 링·라벨 띠 현재 쪽 밑줄) · 모든 머리는 라벨 문법.
 * 폭: ≥1024 쌓기(열린 판 2 + 등뼈 ≤3) · 720–1023 한 판(열린 판 1 + 등뼈 ≤4) · <720 판 한 장 + 지나온 판 띠.
 */

/* ── 리셋(:where 로 낮게) ─────────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
:where(button, input) { font: inherit; color: inherit; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(table) { border-collapse: collapse; }

html {
  background: var(--color-bg-deep);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100svh;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-leading-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--color-accent); color: var(--color-on-accent); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-1); }
:focus:not(:focus-visible) { outline: none; }
main:focus, [tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--spacing-3); top: var(--spacing-3); z-index: 100;
  padding: var(--spacing-2) var(--spacing-4); background: var(--color-ink); color: var(--color-bg-deep);
  transform: translateY(-200%); text-decoration: none; font-weight: 600;
}
.skip:focus { transform: none; }

.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.field {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400;
  letter-spacing: var(--text-tracking-label); line-height: 1.3;
  color: var(--color-ink-soft);
}
.m-only { display: none; }
.arw { font-family: var(--font-body); }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 var(--spacing-1);
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.6; text-align: center;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-1); color: var(--color-ink);
}

/* ── 성장 눈금 — CSS 상자 셋(글리프 아님) ─────────────────────────── */
.gauge { display: inline-flex; gap: 2px; vertical-align: -1px; }
.gauge i { display: block; width: 4px; height: 10px; border: 1px solid var(--color-line-strong); }
.gauge[data-fill="1"] i:nth-child(-n + 1),
.gauge[data-fill="2"] i:nth-child(-n + 2),
.gauge[data-fill="3"] i { background: var(--color-ink); border-color: var(--color-ink); }
.stage-mark { display: inline-flex; align-items: center; gap: var(--spacing-1); white-space: nowrap; }

/* ── 링크 — 잉크 글자 + 1px 강조 밑줄 + 모노 번호 ─────────────────────── */
.ln {
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-thickness var(--ease-duration-hover) var(--ease-out), color var(--ease-duration-press) var(--ease-press);
}
.ln:hover { text-decoration-thickness: 2px; }
.ln:active { color: var(--color-ink-soft); }
.ln.is-open { text-decoration-style: dotted; text-decoration-thickness: 2px; }
.ln__no {
  display: inline-block; /* 밑줄이 번호까지 번지지 않게(원자 인라인은 장식을 받지 않는다) */
  margin-inline-start: 0.15em;
  font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0;
  color: var(--color-ink-soft);
}
.more {
  display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-tap);
  color: var(--color-ink); font-size: var(--text-sm);
  text-decoration-line: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: text-decoration-thickness var(--ease-duration-hover) var(--ease-out);
}
.more:hover { text-decoration-thickness: 2px; }
.more--quiet { color: var(--color-ink-soft); text-decoration-color: var(--color-line-strong); }

/* ── 단추 ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  min-height: var(--spacing-tap); padding: 0 var(--spacing-4);
  border-radius: var(--radius-1); font-size: var(--text-sm); white-space: nowrap;
  text-decoration: none; color: var(--color-ink);
  transition: border-color var(--ease-duration-hover) var(--ease-out), background-color var(--ease-duration-hover) var(--ease-out), transform var(--ease-duration-press) var(--ease-press);
}
.btn:active { transform: scale(0.98); }
.btn .num { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.btn--line { border: 1px solid var(--color-line-strong); }
.btn--line:hover { border-color: var(--color-ink); }
.btn--line[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg-deep); }
.btn--line[aria-pressed="true"] .num { color: var(--color-bg-deep); }
.btn--line[aria-pressed="true"] .gauge i { border-color: var(--color-bg-deep); }
.btn--line[aria-pressed="true"] .gauge[data-fill="1"] i:nth-child(-n + 1),
.btn--line[aria-pressed="true"] .gauge[data-fill="2"] i:nth-child(-n + 2),
.btn--line[aria-pressed="true"] .gauge[data-fill="3"] i { background: var(--color-bg-deep); }
.btn--line[aria-disabled="true"] { color: var(--color-ink-soft); border-color: var(--color-line); cursor: default; }
.btn--line[aria-disabled="true"]:active { transform: none; }
.btn--solid { min-height: 3rem; padding: 0 var(--spacing-6); background: var(--color-ink); color: var(--color-bg-deep); font-weight: 600; font-size: var(--text-base); }
.btn--solid:hover { background: var(--color-ink-soft); }
.btn--solid:focus-visible { outline-offset: 3px; }
.btn--text {
  padding: 0 var(--spacing-2); color: var(--color-ink);
  text-decoration-line: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 0.3em;
}
.btn--text:hover { text-decoration-color: var(--color-ink); }

/* 가로 스크롤 줄 — 격자 안에서도 넘치지 않게(#38) */
.scroller {
  display: flex; gap: var(--spacing-2); min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--spacing-4);
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
/* 가로 스크롤 줄은 세로도 잘라 바깥 초점 링이 잘린다 — 안쪽으로 그린다 */
.scroller :focus-visible, .pane__chips :focus-visible { outline-offset: -3px; }

/* ══ 1-1 라벨 띠 ═══════════════════════════════════════════════════ */
.strip {
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-line);
  padding-top: env(safe-area-inset-top);
}
.strip__in { display: flex; height: var(--spacing-strip); }
.strip__cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; padding-inline: var(--spacing-4);
  border-right: 1px solid var(--color-line);
  color: var(--color-ink); text-decoration: none;
  transition: transform var(--ease-duration-press) var(--ease-press);
}
.strip__cell:focus-visible { outline-offset: -3px; border-radius: 0; }
a.strip__cell:active .strip__value { transform: translateY(1px); }
.strip__cell--sub { margin-inline-start: auto; border-left: 1px solid var(--color-line); border-right: 0; }
.strip__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--text-tracking-label); color: var(--color-ink-soft); line-height: 1.2; }
.strip__value { display: flex; align-items: baseline; gap: var(--spacing-2); font-size: var(--text-sm); line-height: 1.35; white-space: nowrap; }
a.strip__cell:hover .strip__value > :first-child,
a.strip__cell:hover .strip__value:not(:has(> span)) { text-decoration: underline 1px var(--color-ink); text-underline-offset: 0.25em; }
.strip__value .num { font-size: 1.0625rem; font-weight: 600; }
.strip__more { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.strip__line { font-size: var(--text-xs); color: var(--color-ink-soft); }
.strip__cell[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--spacing-4); right: var(--spacing-4); bottom: 6px;
  height: 2px; background: var(--color-accent);
}
.strip__cell--status { cursor: default; padding-inline-end: calc(var(--spacing-4) + var(--spacing-2)); } /* "4 / 4 · +1 접힘" 이 칸 경계에 붙지 않게 여유 8 (qa-1 P2-2) */
a.strip__cell--status { cursor: pointer; }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: var(--text-tracking-display); line-height: 1.2; color: var(--color-ink); }

/* ══ 1-2 판 무대 ═══════════════════════════════════════════════════ */
.stage {
  position: relative;
  background: var(--color-bg-deep);
  --open: min(var(--k), 2);
  --covered: calc(max(var(--k) - 2, 0) + var(--b));
}
.stage--home { height: min(calc(100svh - var(--spacing-strip) - 4rem), 48.75rem); min-height: 30rem; }
.stage--board { height: calc(100svh - var(--spacing-strip)); min-height: 30rem; }
.stage.is-loading .stage__track { opacity: 0; }

.stage__track {
  container-type: inline-size;
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--color-line) transparent;
  --pane-w: min(var(--spacing-pane), calc((100cqw - 7.5rem) / 2));
  --pad: var(--spacing-pane-pad);
}
.stage__track:focus-visible { outline-offset: -2px; }

.pane {
  flex: 0 0 var(--pane-w); width: var(--pane-w);
  position: sticky; left: calc((var(--i) + var(--b)) * var(--spacing-spine));
  height: 100%;
  display: grid; grid-template-columns: var(--spacing-spine) minmax(0, 1fr);
  background: var(--color-bg);
  transition: transform var(--ease-duration-pane) var(--ease-out), opacity var(--ease-duration-pane) var(--ease-out);
}
.pane + .pane, .bundle + .pane { box-shadow: var(--shadow-pane); }
.pane.is-entering { transform: translateX(24px); opacity: 0; transition: none; }

/* 등뼈 칸 — 판마다 왼쪽에 늘 있다. 덮이면 이 칸만 남는다 */
.pane__spine { background: var(--color-bg-deep); border-right: 1px solid var(--color-line); min-height: 0; }
.spine {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3);
  width: 100%; height: 100%; padding: var(--spacing-4) 0;
  color: var(--color-ink); overflow: hidden;
  transition: background-color var(--ease-duration-hover) var(--ease-out), transform var(--ease-duration-press) var(--ease-press);
}
.spine:hover { background: var(--color-bg); }
.spine:focus-visible { outline-offset: -3px; border-radius: 0; }
.spine:active { transform: scale(0.98); }
.spine__no { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; color: var(--color-ink); }
.spine__dot { width: 6px; height: 6px; border: 1px solid var(--color-line-strong); border-radius: 50%; }
.spine__title {
  writing-mode: vertical-rl;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--color-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; flex: 0 1 auto;
}

.pane__body {
  min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior-y: contain;
  padding: 0 var(--pad) var(--spacing-8);
  scrollbar-width: thin; scrollbar-color: var(--color-line) transparent;
}
.stage--home .pane__body { overscroll-behavior-y: auto; } /* 홈은 쪽이 아래로 이어진다 — 판 끝에서 쪽 스크롤로 넘겨준다 */
.pane__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spacing-2);
  min-height: 3.5rem; margin: 0 calc(var(--pad) * -1); padding: var(--spacing-2) var(--pad);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--text-tracking-label); line-height: 1.5;
  color: var(--color-ink-soft);
}
.pane__row { display: inline-flex; align-items: center; column-gap: var(--spacing-2); white-space: nowrap; }
.pane__no { font-size: var(--text-xs); color: var(--color-ink); }
.pane__no:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.pane__head .stage-mark__name { color: var(--color-ink); }
.pane__close {
  display: none; align-items: center; gap: var(--spacing-2);
  min-height: var(--spacing-tap); margin-inline-start: auto; padding: 0 var(--spacing-2);
  font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; color: var(--color-ink);
  transition: transform var(--ease-duration-press) var(--ease-press);
}
.js .pane__close { display: inline-flex; }
.js .pane__close[hidden] { display: none; }
.pane__close:hover { text-decoration: underline 1px var(--color-ink); text-underline-offset: 0.3em; }
.pane__close:active { transform: scale(0.98); }

.pane__title {
  margin-top: var(--spacing-6);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-pane);
  line-height: var(--text-leading-tight); letter-spacing: var(--text-tracking-display);
  text-wrap: balance;
}
.pane--feature .pane__title { font-size: var(--text-feature); }
.pane__meta { margin-top: var(--spacing-3); font-size: var(--text-xs); color: var(--color-ink-soft); }
.pane__meta time { font-family: var(--font-mono); font-size: var(--text-2xs); }
.pane__chips { display: none; }

.prose { margin-top: var(--spacing-5); max-width: 38em; }
.prose > * + * { margin-top: var(--spacing-4); }
.prose .lead { font-size: var(--text-lead); line-height: 1.7; }
.prose h3 { margin-top: var(--spacing-6); font-size: var(--text-h3); font-weight: 600; line-height: 1.4; }
.prose ul, .prose ol { display: grid; gap: var(--spacing-2); }
.prose ul > li, .prose ol > li { position: relative; padding-inline-start: var(--spacing-5); }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 10px; height: 1px; background: var(--color-line-strong); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: 0.2em; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.prose blockquote { padding-inline-start: var(--spacing-4); border-inline-start: 1px solid var(--color-line-strong); color: var(--color-ink-soft); font-size: var(--text-lead); }
.prose code { padding: 0 0.3em; font-family: var(--font-mono); font-size: 0.86em; background: var(--color-bg-deep); border-radius: var(--radius-1); }
.prose strong { font-weight: 600; }
.pane:not(.is-focus) .prose { transition: color var(--ease-duration-pane) var(--ease-out); }
.stage--board .pane.is-back .prose,
.stage--board .pane.is-back .path__quote { color: var(--color-ink-soft); }

.entry > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-2); }
.entry__stage { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }

.pane__sec { margin-top: var(--spacing-7); max-width: 38em; }
.pane__sec-title {
  display: flex; align-items: center; gap: var(--spacing-3);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; letter-spacing: var(--text-tracking-label);
  color: var(--color-ink-soft);
}
.pane__sec-title::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.pane__sec-title .num { font-family: var(--font-mono); color: var(--color-ink); }
.paths { margin-top: var(--spacing-2); }
.paths > li + li { border-top: 1px solid var(--color-line); }
.path {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--spacing-3);
  min-height: var(--spacing-tap); padding: var(--spacing-2) var(--spacing-2);
  color: var(--color-ink); text-decoration: none; font-size: var(--text-sm);
  transition: background-color var(--ease-duration-hover) var(--ease-out);
}
.path:hover { background: var(--color-bg-deep); }
.path:focus-visible { outline-offset: -2px; }
.path__no { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); }
.path .stage-mark { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.paths--back .path { grid-template-columns: 2.75rem minmax(0, 1fr); }
.path__quote { padding: 0 var(--spacing-2) var(--spacing-3) calc(2.75rem + var(--spacing-5)); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-soft); }
.pane__empty { margin-top: var(--spacing-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.pane__log { margin-top: var(--spacing-3); display: grid; gap: var(--spacing-2); font-size: var(--text-sm); }
.pane__log li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--spacing-3); }
.pane__log time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); padding-top: 0.1em; }
.change { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); white-space: nowrap; }
.pane__more { margin-top: var(--spacing-2); }

/* 꼬리 칸 — 다음 판 자리(점선) */
.stage__tail { flex: 0 0 max(0px, calc(100cqw - var(--open) * var(--pane-w) - var(--covered) * var(--spacing-spine))); overflow: hidden; container-type: inline-size; }
.stage__hint {
  height: calc(100% - var(--spacing-7) * 2); margin: var(--spacing-7) var(--spacing-4);
  display: flex; align-items: center; justify-content: center; padding: var(--spacing-4);
  border: 1px dashed var(--color-line-strong);
  font-size: var(--text-xs); line-height: 1.6; color: var(--color-ink-soft); text-align: center;
}
@container (max-width: 119px) { .stage__hint { font-size: 0; margin-inline: var(--spacing-2); } }
@container (max-width: 40px) { .stage__hint { display: none; } }

/* 강제 등뼈 묶음(5장 이상) */
.bundle {
  flex: 0 0 var(--spacing-spine); position: sticky; left: 0; z-index: 6; height: 100%;
  background: var(--color-bg-deep); border-right: 1px solid var(--color-line);
}
.bundle__btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2);
  width: 100%; height: 100%; padding: var(--spacing-4) 0;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.1; color: var(--color-ink-soft);
  transition: background-color var(--ease-duration-hover) var(--ease-out), transform var(--ease-duration-press) var(--ease-press);
}
.bundle__btn:hover { background: var(--color-bg); }
.bundle__btn:focus-visible { outline-offset: -3px; border-radius: 0; }
.bundle__btn:active { transform: scale(0.98); }
.bundle__plus { font-size: var(--text-xs); color: var(--color-ink); }
.bundle__ids { display: flex; flex-direction: column; gap: var(--spacing-1); }
.bundle__list {
  position: absolute; top: var(--spacing-3); left: calc(var(--spacing-spine) + var(--spacing-2)); z-index: 30;
  min-width: 17.5rem; padding: var(--spacing-2);
  background: var(--color-bg-deep); border: 1px solid var(--color-line-strong); border-radius: var(--radius-1);
  transform-origin: top left;
  transition: opacity var(--ease-duration-hover) var(--ease-out), transform var(--ease-duration-hover) var(--ease-out);
}
@starting-style { .bundle__list { opacity: 0; transform: scale(0.96); } }
.bundle__list[hidden] { display: none; }
.bundle__list .field { padding: var(--spacing-2) var(--spacing-2) var(--spacing-1); }
.bundle__pick {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; width: 100%; min-height: var(--spacing-tap);
  padding: 0 var(--spacing-2); text-align: start; font-size: var(--text-sm); color: var(--color-ink);
}
.bundle__pick:hover { background: var(--color-bg); }
.bundle__pick:focus-visible { outline-offset: -2px; }
.bundle__pick span:first-child { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); }

/* 균사선 — 무대 위 SVG 한 장 */
.threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 5; }
.thread { fill: none; stroke: var(--color-accent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.thread.is-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; }
.thread.is-drawn { stroke-dashoffset: 0; transition: stroke-dashoffset var(--ease-duration-thread) var(--ease-out) 120ms; }
.thread--err { stroke-dasharray: 4 4; }
.thread-end { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 1px; }
.thread-start { fill: var(--color-accent); }

/* 무대 아래 띠 · 대표 줄 */
.stage-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
  min-height: 4rem; padding: var(--spacing-2) var(--spacing-5);
  border-bottom: 1px solid var(--color-line);
}
.feature-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-1) var(--spacing-3); padding: var(--spacing-5); font-size: var(--text-sm); color: var(--color-ink-soft); border-bottom: 1px solid var(--color-line); }
.feature-line a { color: var(--color-ink); text-decoration: underline 1px var(--color-accent); text-underline-offset: 0.28em; }

/* 지나온 판 띠 — 모바일 전용 */
.trail { display: none; }

/* ══ 홈 블록 ═══════════════════════════════════════════════════════ */
.block { padding: var(--spacing-section) var(--spacing-5) 0; max-width: 90rem; margin-inline: auto; }
.block__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--spacing-4); }
.block__title { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-h3); font-weight: 600; line-height: 1.35; }
.block__tools { display: flex; align-items: center; gap: var(--spacing-3); min-width: 0; }
.block__tools .btn { gap: var(--spacing-2); }
.block__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1) var(--spacing-5); margin-top: var(--spacing-3); }
.ledger__more { display: none; padding-inline: 0; }

/* 대장 — 필드 열 정렬 */
.ledger { margin-top: var(--spacing-5); border-top: 1px solid var(--color-line-strong); }
.ledger__head, .row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 6rem 7.5rem 4rem 7rem;
  column-gap: var(--spacing-4); align-items: center;
}
.ledger--full .ledger__head, .ledger--full .row { grid-template-columns: 3.5rem minmax(0, 1fr) 6rem 7.5rem 8rem 4rem 7rem; }
.ledger__head { padding: var(--spacing-2) var(--spacing-3); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--text-tracking-label); color: var(--color-ink-soft); border-bottom: 1px solid var(--color-line); }
.ledger__item + .ledger__item { border-top: 1px solid var(--color-line); }
.ledger__item[hidden] { display: none; }
.row {
  min-height: 3.25rem; padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-ink); text-decoration: none; font-size: var(--text-sm);
  transition: background-color var(--ease-duration-hover) var(--ease-out);
}
.row:hover, .row:active { background: var(--color-bg-deep); }
.row:focus-visible { outline-offset: -2px; border-radius: 0; }
.row__no, .row__edits, .row__last, .row__links { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); }
.row__no { color: var(--color-ink); }
.row__title { font-weight: 600; font-size: var(--text-base); }
.row__stage { font-size: var(--text-xs); }
.row__topic { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* 지도 + 최근 고침 */
.map-log { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-8); }
.map__note { margin-top: var(--spacing-2); max-width: 34em; font-size: var(--text-sm); color: var(--color-ink-soft); }
.map__svg { display: block; width: 100%; height: auto; margin-top: var(--spacing-5); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.map__svg--m { display: none; }
.edge { stroke: var(--color-line-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke var(--ease-duration-hover) var(--ease-out); }
.edge.is-hot { stroke: var(--color-ink); }
.node__hit { fill: transparent; }
.node__ring { fill: none; stroke: transparent; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.node__dot { fill: var(--color-ink-soft); transition: fill var(--ease-duration-hover) var(--ease-out); }
.node--lead .node__dot, .node--near .node__dot { fill: var(--color-ink); }
.node__label { font-family: var(--font-mono); font-size: 11px; fill: var(--color-ink-soft); }
.node--lead .node__label, .node--near .node__label { fill: var(--color-ink); }
.node:hover .node__dot, .node.is-hot .node__dot { fill: var(--color-ink); }
.node:hover .node__ring { stroke: var(--color-ink); }
.node:focus { outline: none; }
.node:focus-visible .node__ring { stroke: var(--color-accent); }
.map__list { margin-top: var(--spacing-3); font-size: var(--text-sm); }
.map__list summary { display: inline-flex; align-items: center; min-height: var(--spacing-tap); cursor: pointer; color: var(--color-ink-soft); text-decoration: underline 1px var(--color-line-strong); text-underline-offset: 0.3em; }
.map__list ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-1) var(--spacing-5); margin-top: var(--spacing-2); }
.map__list a { color: var(--color-ink); text-decoration: none; }
.map__list a:hover { text-decoration: underline 1px var(--color-ink); }
.map__deg { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }

.logrows { display: grid; }
.logrow {
  display: grid; grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1.4fr) 6.5rem; column-gap: var(--spacing-4); align-items: baseline;
  padding: var(--spacing-3) 0; border-top: 1px solid var(--color-line); font-size: var(--text-sm);
}
.logrow__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-soft); }
.logrow__no {
  display: inline-flex; gap: var(--spacing-2); align-items: baseline; min-height: 1.75rem;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink); text-decoration: none;
}
.logrow__no:hover .logrow__title, .logrow__no:hover { text-decoration: underline 1px var(--color-ink); text-underline-offset: 0.25em; }
.logrow__title { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.logrow__change { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); text-align: end; }
.logrows--compact .logrow { grid-template-columns: 3rem 2.5rem minmax(0, 1fr); }
.logrows--compact .logrow__change { grid-column: 3; text-align: start; }
.logrows--compact .logrow__change--none { display: none; }
.recent { padding-top: 0; }
.recent .logrows { margin-top: var(--spacing-5); border-bottom: 1px solid var(--color-line); }

/* 저자 — 라벨 문법 4칸 */
.labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line); }
.labels__cell { padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0; display: grid; gap: var(--spacing-1); align-content: start; }
.labels__cell + .labels__cell { padding-inline-start: var(--spacing-4); border-inline-start: 1px solid var(--color-line); }
.labels__value { font-size: var(--text-base); }
.labels__value .more { min-height: 0; font-size: var(--text-base); }
.author__text { margin-top: var(--spacing-5); max-width: 36em; font-size: var(--text-lead); }

/* 구독(표현) */
.sub {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-6) var(--spacing-8); align-items: end;
  max-width: 90rem; margin: var(--spacing-section) auto 0; padding: var(--spacing-7) var(--spacing-5);
  border-top: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line);
}
.sub:focus { outline: none; }
.sub__title { margin-top: var(--spacing-1); font-size: var(--text-h3); font-weight: 600; }
.sub__lead { margin-top: var(--spacing-2); max-width: 32em; color: var(--color-ink-soft); font-size: var(--text-sm); }
.sub__box { display: grid; gap: var(--spacing-2); }
.sub__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--text-tracking-label); color: var(--color-ink-soft); }
.sub__row { display: flex; gap: var(--spacing-2); }
.sub__input {
  flex: 1; min-width: 0; height: 3rem; padding: 0 var(--spacing-4);
  background: var(--color-bg-deep); border: 1px solid var(--color-line-strong); border-radius: var(--radius-1);
  font-size: var(--text-base); color: var(--color-ink);
  transition: border-color var(--ease-duration-hover) var(--ease-out);
}
.sub__input::placeholder { color: var(--color-ink-soft); }
.sub__input:hover { border-color: var(--color-ink-soft); }
.sub__input:focus-visible { outline-offset: 2px; }
.sub__input[aria-invalid="true"] { border-color: var(--color-ink); }
.sub__err { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-sm); color: var(--color-ink); }
.sub__err::before { content: ""; width: 2px; height: 12px; background: var(--color-ink); }
.sub__err[hidden], .sub__done[hidden], .sub__box[hidden] { display: none; }
.sub__done { grid-column: 2; padding: var(--spacing-4) 0; font-size: var(--text-base); border-top: 1px solid var(--color-line); }

/* 꼬리 */
.tail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-4) var(--spacing-6);
  max-width: 90rem; margin: var(--spacing-section) auto 0; padding: var(--spacing-6) var(--spacing-5) calc(var(--spacing-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
}
.tail__left { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2) var(--spacing-4); }
.tail__note { font-size: var(--text-xs); color: var(--color-ink-soft); }
.tail__links { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-4); }
.tail__links a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; }
.tail__links a:hover { text-decoration: underline 1px var(--color-ink); text-underline-offset: 0.3em; }
.pg--board .tail { display: none; }

/* ══ 색인 · 고침 기록 · 소개 공용 머리 ═══════════════════════════════ */
.page-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-6) var(--spacing-8); align-items: end;
  max-width: 90rem; margin-inline: auto; padding: var(--spacing-8) var(--spacing-5) var(--spacing-6);
  border-bottom: 1px solid var(--color-line-strong);
}
.page-head--about { grid-template-columns: minmax(0, 1fr); }
.count { display: grid; gap: var(--spacing-1); }
.count__num { font-family: var(--font-display); font-weight: 500; font-size: var(--text-count); line-height: 0.86; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.page-head__side { display: grid; gap: var(--spacing-3); max-width: 46rem; }
.page-head--about .page-head__side { max-width: var(--spacing-measure); }
.page-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-page); line-height: var(--text-leading-tight); letter-spacing: var(--text-tracking-display); }
.page-lead { font-size: var(--text-base); color: var(--color-ink-soft); max-width: 36em; }
.page-head--about .page-lead:first-of-type { font-size: var(--text-lead); color: var(--color-ink); }

/* 색인 */
.dist { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; height: 1.5rem; margin-top: var(--spacing-2); }
.dist i { border: 1px solid var(--color-line-strong); }
.dist i[data-fill="2"] { background: var(--color-line-strong); }
.dist i[data-fill="3"] { background: var(--color-ink); border-color: var(--color-ink); }
.dist__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-5); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.dist__legend span { display: inline-flex; align-items: center; gap: var(--spacing-2); }

.filters { display: grid; gap: var(--spacing-3); max-width: 90rem; margin-inline: auto; padding: var(--spacing-6) var(--spacing-5) 0; }
.filters__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--spacing-3); }
.filters__count { font-size: var(--text-sm); color: var(--color-ink-soft); }
.filters__count .num { color: var(--color-ink); }
.pg--index .ledger, .weeks { max-width: 90rem; margin-inline: auto; }
.pg--index .ledger { margin-top: var(--spacing-4); padding-inline: var(--spacing-5); border-top: 0; }
.pg--index .ledger__head { border-top: 1px solid var(--color-line-strong); }
.empty { display: grid; justify-items: start; gap: var(--spacing-2); padding: var(--spacing-7) var(--spacing-3); border-top: 1px solid var(--color-line); }
.empty[hidden] { display: none; }
.empty__text { font-size: var(--text-lead); }

/* 고침 기록 */
.log-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); max-width: 90rem; margin: var(--spacing-5) auto 0; padding: var(--spacing-3) var(--spacing-5); border-bottom: 1px solid var(--color-line); }
.log-filter[hidden] { display: none; }
.log-filter__text { font-size: var(--text-base); }
.weeks { padding: 0 var(--spacing-5); }
.week { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--spacing-6); padding-top: var(--spacing-6); }
.week[hidden] { display: none; }
.week:focus { outline: none; }
.week__head { position: sticky; top: var(--spacing-4); align-self: start; display: grid; gap: var(--spacing-1); padding-top: var(--spacing-3); }
.week__link {
  display: inline-flex; align-items: center; min-height: var(--spacing-tap); align-self: start; justify-self: start;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.week__link:hover { text-decoration: underline 1px var(--color-ink); text-underline-offset: 0.3em; }
.week.is-target .week__link { border-bottom-color: var(--color-ink); }
.week__count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.week .logrows { border-bottom: 1px solid var(--color-line); }
.logrow[hidden] { display: none; }

/* 소개 */
.stage-table { width: 100%; max-width: 56rem; margin-top: var(--spacing-5); font-size: var(--text-sm); }
.stage-table th, .stage-table td { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) 0; text-align: start; vertical-align: baseline; border-top: 1px solid var(--color-line); }
.stage-table thead th { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; letter-spacing: var(--text-tracking-label); color: var(--color-ink-soft); border-top: 1px solid var(--color-line-strong); }
.stage-table tbody th { font-weight: 600; white-space: nowrap; width: 7rem; }
.stage-table td.num { width: 4rem; font-family: var(--font-mono); color: var(--color-ink-soft); }
.rules__list { display: grid; gap: var(--spacing-3); margin-top: var(--spacing-6); max-width: var(--spacing-measure); }
.rules__list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--spacing-3); align-items: baseline; }
.howto-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-8); align-items: start; margin-top: var(--spacing-5); }
.howto--big { display: grid; gap: var(--spacing-5); }
.howto--big li { display: grid; gap: var(--spacing-1); }
.howto__fig figcaption { margin-top: var(--spacing-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.howto__fig svg { display: block; width: 100%; height: auto; }
.fig__ground { fill: var(--color-bg-deep); }
.fig__pane { fill: var(--color-bg); stroke: var(--color-line); }
.fig__spine { fill: var(--color-bg-deep); stroke: var(--color-line); }
.fig__text rect { fill: var(--color-line); }
.fig__ul { stroke: var(--color-accent); stroke-width: 1.5; }
.fig__thread { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.fig__end { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 1.5; }
.fig__mono { font-family: var(--font-mono); font-size: 10px; fill: var(--color-ink); }
.fig__label { font-family: var(--font-mono); font-size: 12px; fill: var(--color-ink-soft); }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-8); margin-top: var(--spacing-5); }
.topic { display: grid; gap: var(--spacing-1); padding: var(--spacing-4) 0; border-top: 1px solid var(--color-line); }
.topic__line { font-size: var(--text-base); }
.topic__meta { font-size: var(--text-sm); color: var(--color-ink-soft); }
.topic__meta .num { color: var(--color-ink); }
.pg--about .sub { margin-top: var(--spacing-section); }

/* ══ 폭 ═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .stage__track { --pad: var(--spacing-pane-pad-s); }
  .pane__close kbd { display: none; } /* 1024 직후 판 머리(글자 칸 364)가 한 줄을 지키게 — Esc 는 소개·입구 판에 적혀 있다 */
}

@media (max-width: 1023px) {
  /* 한 판 모드 — 열린 판 1 + 등뼈 ≤4 */
  .stage { --open: min(var(--k), 1); --covered: calc(max(var(--k) - 1, 0) + var(--b)); }
  .stage__track { --pane-w: calc(100cqw - 10rem); }
  .prose, .pane__sec { max-width: 38em; }
  .strip__line, .strip__more:not(.strip__more--keep), .strip__cell--keeper { display: none; }
  .map-log { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-section); }
  .ledger__head, .row { grid-template-columns: 3rem minmax(0, 1fr) 5.5rem 6.5rem 6rem; }
  .ledger:not(.ledger--full) .ledger__head > :nth-child(5), .row__edits { display: none; }
  .ledger--full .ledger__head, .ledger--full .row { grid-template-columns: 3rem minmax(0, 1fr) 5.5rem 6rem 4.5rem 5.75rem; column-gap: var(--spacing-3); }
  .ledger--full .ledger__head > :nth-child(6) { display: none; }
  .howto-grid { grid-template-columns: minmax(0, 1fr); }
  .logrow { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr); }
  .logrow .logrow__change { grid-column: 3; text-align: start; }
  .logrow__change--none { display: none; }
}

@media (min-width: 720px) {
  .strip--stage { position: sticky; top: 0; z-index: 20; }
}

@media (max-width: 719px) {
  .m-only { display: inline; }
  .strip__in { height: var(--spacing-strip-m); }
  .strip__cell { padding-inline: var(--spacing-3); }
  .strip__cell--status, .strip__cell--keeper, .strip__cell--sub, .strip__line, .strip__more { display: none; }
  .strip__cell--log { border-right: 0; }
  .strip__cell--garden { flex: 1 1 auto; }
  .strip__cell[aria-current="page"]::after { left: var(--spacing-3); right: var(--spacing-3); bottom: 4px; }
  .wordmark { font-size: 1rem; }

  /* 판 한 장 + 지나온 판 띠, 판 안 스크롤 없음(쪽 스크롤) */
  .trail {
    display: flex; align-items: stretch; gap: var(--spacing-3);
    min-height: max(var(--spacing-trail), var(--spacing-tap)); padding-inline-start: var(--spacing-pane-pad-m);
    background: var(--color-bg); border-bottom: 1px solid var(--color-line);
  }
  .trail__label { align-self: center; flex: none; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--text-tracking-label); color: var(--color-ink-soft); }
  .trail__chips { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--spacing-4); padding-inline-end: var(--spacing-4); }
  .trail__chips::-webkit-scrollbar { display: none; }
  .trail__chips > li { display: flex; align-items: center; flex: none; }
  .trail__sep { padding-inline: var(--spacing-1); color: var(--color-ink-soft); font-size: var(--text-xs); }
  .trail__chip {
    display: inline-flex; align-items: center; gap: var(--spacing-2); height: 100%; min-height: var(--spacing-tap);
    padding: 0 var(--spacing-3) 0 0;
    border-block: 1px solid var(--color-line);
    color: var(--color-ink); text-decoration: none; font-size: var(--text-xs);
    transition: background-color var(--ease-duration-press) var(--ease-press);
  }
  a.trail__chip:active { background: var(--color-bg-deep); }
  a.trail__chip:focus-visible { outline-offset: -2px; border-radius: 0; }
  .trail__chip[aria-current] { border-block-color: transparent; color: var(--color-ink); font-weight: 600; }
  /* 누운 등뼈 — 번호 칸만 그늘 흙(판의 등뼈 칸과 같은 바탕) */
  .trail__no { align-self: stretch; display: flex; align-items: center; padding: 0 var(--spacing-2); background: var(--color-bg-deep); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink); font-weight: 400; }
  .trail__title { max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .stage, .stage--home, .stage--board { height: auto; min-height: 0; background: var(--color-bg); }
  .stage__track { display: block; height: auto; overflow: visible; container-type: normal; --pad: var(--spacing-pane-pad-m); }
  .stage__tail, .threads, .bundle { display: none; }
  .pane { display: none; position: static; width: auto; height: auto; grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  .pane + .pane, .bundle + .pane { box-shadow: none; }
  .pane.is-current { display: grid; }
  .pane.is-entering { transform: translateY(12px); }
  .pane__spine { display: none; }
  .pane__body { overflow: visible; padding-bottom: var(--spacing-7); }
  .pane__head {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0;
    min-height: 0; padding-block: var(--spacing-2);
  }
  .pane__row { grid-column: 1; }
  .pane__close { grid-column: 2; grid-row: 1 / span 2; }
  .stage--home .pane__close { display: none; } /* 홈 모바일의 판은 입구로 가는 길이 띠에 있다 — 닫기는 노트 판 쪽에서만 */
  .sep--wide { display: none; }
  .pane__title { margin-top: var(--spacing-4); }
  .pane__chips { display: block; margin: var(--spacing-4) calc(var(--pad) * -1) 0; }
  .pane__chips ul { display: flex; gap: var(--spacing-2); overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad) 0 calc(var(--pad) + 12px); scroll-padding-inline: var(--pad); }
  .pane__chips ul::-webkit-scrollbar { display: none; }
  .pane__chips li { flex: none; position: relative; }
  .pane__chips li:first-child::before {
    content: ""; position: absolute; right: 100%; top: 50%; width: 12px; height: 1px; background: var(--color-accent);
  }
  .chip {
    display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-tap); padding: 0 var(--spacing-3);
    border: 1px solid var(--color-line-strong); border-radius: var(--radius-1);
    color: var(--color-ink); text-decoration: none; font-size: var(--text-xs);
    transition: border-color var(--ease-duration-hover) var(--ease-out), transform var(--ease-duration-press) var(--ease-press);
  }
  .chip:hover { border-color: var(--color-ink); }
  .chip:active { transform: scale(0.98); }
  .chip__no { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-soft); }
  .chip__title { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prose { margin-top: var(--spacing-5); }
  .stage-band { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--spacing-2) var(--spacing-pane-pad-m); }
  .feature-line { padding: var(--spacing-4) var(--spacing-pane-pad-m); }
  .pg--board .tail { display: flex; }

  .block, .filters, .weeks { padding-inline: var(--spacing-pane-pad-m); }
  .block__tools { width: 100%; }
  .block__tools .scroller { margin-inline-end: calc(var(--spacing-pane-pad-m) * -1); padding-inline-end: var(--spacing-pane-pad-m); }

  .ledger__head { display: none; }
  .js .ledger__list[data-collapsed] .ledger__item--extra { display: none; }
  .js .ledger__more { display: inline-flex; }
  .row, .ledger--full .row {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-3); row-gap: var(--spacing-1);
    padding: var(--spacing-3) 0;
  }
  .pg--index .ledger { padding-inline: var(--spacing-pane-pad-m); }
  .row__title { order: 2; flex-basis: 100%; }
  .row__topic, .row__links, .row__edits, .row__last { order: 3; }
  .row__edits { display: inline; }

  .map__svg--d { display: none; }
  .map__svg--m { display: block; }
  .map__list ol { grid-template-columns: minmax(0, 1fr); }
  .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labels__cell:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .labels__cell:nth-child(n + 3) { border-top: 1px solid var(--color-line); }

  .sub { grid-template-columns: minmax(0, 1fr); padding-inline: var(--spacing-pane-pad-m); }
  .sub__row { flex-direction: column; }
  .sub__input { flex: none; width: 100%; }
  .sub__row .btn--solid { width: 100%; }
  .sub__done { grid-column: 1; }

  .tail { flex-direction: column; align-items: flex-start; padding-inline: var(--spacing-pane-pad-m); }

  .page-head { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); padding: var(--spacing-7) var(--spacing-pane-pad-m) var(--spacing-5); }
  .count { grid-template-columns: auto 1fr; align-items: end; gap: var(--spacing-3); }
  .count .field { order: 2; padding-bottom: var(--spacing-2); }
  .filters__row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-1); }
  .filters__row .scroller { margin-inline-end: calc(var(--spacing-pane-pad-m) * -1); padding-inline-end: var(--spacing-pane-pad-m); }

  .week { grid-template-columns: minmax(0, 1fr); padding-top: var(--spacing-5); }
  .week__head { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--spacing-3); padding-top: 0; }
  .logrow, .logrows--compact .logrow { grid-template-columns: 3rem minmax(0, 1fr); row-gap: var(--spacing-1); }
  .logrow__what, .logrow .logrow__change { grid-column: 2; text-align: start; }
  .logrows--compact .logrow__no { grid-column: 2; }
  .logrows--compact .logrow__what { grid-column: 2; }

  .topics { grid-template-columns: minmax(0, 1fr); }
  .stage-table tbody th { width: auto; }
}