/* countersign — 화면 규칙. 색·크기·간격·이징은 전부 tokens.css 의 변수만 쓴다.
 * 원칙 1: 초록 면은 [승인] 단추와 콘솔의 서명된 줄 한 줄뿐(한 화면 ≤2). 초록 글자·선은 서명선과 서명한 이름에만.
 * 모션 목록은 _design/DESIGN.md 모션 표가 정본이다 — 표에 없는 움직임은 여기 없다. */

/* ── 바탕 ─────────────────────────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(button, input) { font: inherit; color: inherit; }
:where(a) { color: inherit; }
:where(table) { border-collapse: collapse; }
[hidden] { display: none !important; }

html {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--spacing-bar) + var(--spacing-md));
}
body {
  min-height: 100svh;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
html { scrollbar-color: var(--color-line-strong) transparent; caret-color: var(--color-ink); }
::selection { background: var(--color-surface-raised); color: var(--color-ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--spacing-md); top: var(--spacing-md); z-index: 100;
  padding: var(--spacing-xs) var(--spacing-md); background: var(--color-ink); color: var(--color-bg);
  border-radius: var(--radius-sm); transform: translateY(-200%); text-decoration: none; font-weight: 600;
}
.skip:focus-visible { transform: none; }

.ic {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter;
}
.ic--sm { width: 0.875rem; height: 0.875rem; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.fig {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-figure);
  line-height: var(--text-figure--line-height); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.signed-ink { color: var(--color-accent); font-weight: 600; }

/* ── 워드마크 ──────────────────────────────────────────────────────── */
.wordmark { display: inline-flex; flex-direction: column; gap: 0.125rem; text-decoration: none; border-radius: var(--radius-sm); }
.wordmark__latin { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.02em; }
.wordmark__ko { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted); }

/* ── 누르는 부품 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  min-height: var(--spacing-hit); padding: 0 var(--spacing-md);
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none;
  font-size: var(--text-small); font-weight: 600; line-height: 1.2; color: var(--color-ink);
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; touch-action: manipulation;
  transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--color-ink-faint); cursor: not-allowed; }
.btn--line { border-color: var(--color-line-strong); }
.btn--line:hover:not(:disabled) { background: var(--color-surface-raised); }
.btn--quiet { color: var(--color-ink-muted); }
.btn--quiet:hover:not(:disabled) { background: var(--color-surface-raised); color: var(--color-ink); }
.btn--sm { padding: 0 var(--spacing-sm); font-weight: 500; }
/* 주 단추 — 초록 면 1 */
.btn--sign { background: var(--color-accent); color: var(--color-on-accent); min-width: 7rem; }
.btn--sign:hover:not(:disabled) { background: color-mix(in oklab, var(--color-accent), var(--color-ink) 15%); }
.btn--sign:focus-visible { outline-color: var(--color-ink); }
.btn--sign:disabled { background: none; border-color: var(--color-line-strong); color: var(--color-ink-faint); }
.btn--sign .kbd { color: var(--color-on-accent); border-color: color-mix(in oklab, var(--color-on-accent) 45%, transparent); }
.btn--sign:disabled .kbd { display: none; }

.iconbtn {
  display: inline-grid; place-items: center; width: var(--spacing-hit); height: var(--spacing-hit); flex: none;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-ink-muted); cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.iconbtn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface-raised); color: var(--color-ink); }
.iconbtn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
.iconbtn:disabled, .iconbtn[aria-disabled="true"] { color: var(--color-ink-faint); cursor: not-allowed; }
.bar__btn { width: auto; min-width: var(--spacing-hit); padding: 0 var(--spacing-sm); gap: var(--spacing-xs); display: inline-flex; align-items: center; font-size: var(--text-small); }

.kbd {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem;
  font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 500; line-height: 1; color: var(--color-ink-muted);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs);
}

.link {
  display: inline-flex; align-items: center; gap: var(--spacing-2xs);
  color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  text-decoration-color: var(--color-line-strong); border-radius: var(--radius-xs);
}
.link:hover { text-decoration-thickness: 2px; text-decoration-color: var(--color-ink); }

.chip {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: none;
  font-size: var(--text-small); color: var(--color-ink-muted); cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.chip:hover { background: var(--color-surface-raised); color: var(--color-ink); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"], .chip--on { border-color: var(--color-ink); color: var(--color-ink); }

.seg {
  display: inline-flex; flex-wrap: wrap; gap: var(--spacing-2xs); padding: var(--spacing-2xs);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
.seg__b {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; padding: 0 var(--spacing-sm);
  border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-ink-muted);
  font-size: var(--text-small); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out);
}
.seg__b:hover { color: var(--color-ink); }
.seg__b[aria-checked="true"], .seg__b[aria-current="true"] {
  background: var(--color-surface-raised); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-strong);
}
.seg__b:focus-visible { outline-offset: 0; }

/* 켜기 체크(ink 바탕 — 초록 아님) */
.check { position: relative; display: inline-grid; place-items: center; width: var(--spacing-hit); height: var(--spacing-hit); cursor: pointer; }
.check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.check__box {
  display: grid; place-items: center; width: 1.125rem; height: 1.125rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); color: var(--color-bg);
  transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.check__box .ic { width: 0.875rem; height: 0.875rem; stroke-width: 2; opacity: 0; }
.check:hover .check__box { border-color: var(--color-ink); }
.check input:checked + .check__box { background: var(--color-ink); border-color: var(--color-ink); }
.check input:checked + .check__box .ic { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check input:active + .check__box { transform: scale(0.97); }

.input {
  width: 100%; min-height: var(--spacing-hit); padding: 0 var(--spacing-sm);
  background: var(--color-surface-raised); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; color: var(--color-ink);
  transition: border-color var(--duration-quick) var(--ease-out);
}
.input:hover:not(:disabled) { border-color: var(--color-ink); }
.input:disabled { color: var(--color-ink-muted); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-danger); }

/* ── 위험 눈금 ─────────────────────────────────────────────────────── */
.risk { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; font-size: var(--text-small); }
.risk__ticks { display: inline-flex; gap: 2px; }
.risk__ticks i { width: 0.375rem; height: 0.875rem; background: var(--color-line); border-radius: 1px; }
.risk__ticks i.on { background: var(--color-ink); }
.risk__code { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 600; color: var(--color-ink); }
.risk__name { color: var(--color-ink-muted); }
.risk--sm .risk__ticks i { width: 0.3125rem; height: 0.75rem; }

/* ── 상태 표식 ─────────────────────────────────────────────────────── */
.mark { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; }
.mark--wait { color: var(--color-ink-faint); }
.mark--wait .ic { width: 0.75rem; height: 0.75rem; }
.mark--run, .mark--done { color: var(--color-ink); }
.mark--fail { color: var(--color-danger); }
.mark--skip { color: var(--color-ink-faint); }
.mark--run:not(.is-still) .ic { animation: spin 900ms var(--ease-linear) infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ── 서명란 3칸 ────────────────────────────────────────────────────── */
.sb {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); overflow: hidden;
}
.sb__cell {
  display: grid; grid-template-rows: auto minmax(2rem, 1fr) auto auto; align-content: start; justify-items: center;
  min-width: 0; padding: 0 var(--spacing-xs) var(--spacing-xs); text-align: center;
}
.sb__cell + .sb__cell { border-left: 1px solid var(--color-line-strong); }
.sb__label {
  justify-self: stretch; margin: 0 calc(var(--spacing-xs) * -1) var(--spacing-xs); padding: 0.25rem 0;
  border-bottom: 1px solid var(--color-line-strong); font-size: var(--text-micro); line-height: var(--text-micro--line-height);
  color: var(--color-ink-muted); letter-spacing: 0.08em;
}
.sb__who { font-size: var(--text-small); font-weight: 600; line-height: 1.3; color: var(--color-ink); max-width: 100%; overflow-wrap: anywhere; }
.sb__meta { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted); max-width: 100%; overflow-wrap: anywhere; }
.sb__cell--draft .sb__who { color: var(--color-ink-muted); align-self: center; }
.sb__cell--draft { grid-template-rows: auto minmax(2rem, 1fr) auto; }
.sb__cell--waived {
  background-image: repeating-linear-gradient(135deg, var(--color-line) 0 1px, transparent 1px 7px);
}
.sb__cell--waived .sb__label { background: var(--color-surface); }
.sb__cell--waived .sb__who, .sb__cell--waived .sb__meta { background: var(--color-surface); padding: 0 0.25rem; border-radius: var(--radius-xs); }
.sb__cell--waived .sb__who { align-self: center; color: var(--color-ink-muted); grid-row: 2; }
.sb__cell--waived .sb__meta { grid-row: 3; }
.sb__cell--open .sb__who { color: var(--color-ink-muted); font-weight: 500; }
.sb__cell--open .sb__meta { color: var(--color-ink-faint); }
.sb__cell--rejected .sb__who { color: var(--color-ink); align-self: center; grid-row: 2; }
.sb__cell--held .sb__who { color: var(--color-caution); align-self: center; grid-row: 2; }
.sig { width: 100%; max-width: 8.5rem; height: 2rem; overflow: visible; }
.sig path {
  fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.sb__cell--open .sig { border-bottom: 1px dashed var(--color-line-strong); }
.sb__cell--open .sig path { stroke-dashoffset: 1; }
.sb__cell--open.is-signed .sig path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-sign) var(--ease-sign); }
.sb__cell--open.is-signed .sig { border-bottom-color: transparent; }
.sb__cell--open.is-signed .sb__who { color: var(--color-accent); font-weight: 600; }
.sb__cell--open.is-signed .sb__meta { color: var(--color-ink-muted); }
.sb__cell--signed .sb__who { color: var(--color-accent); }
.sb__cell--open [data-sign-who], .sb__cell--open [data-sign-time] { transition: opacity var(--duration-quick) var(--ease-out); }
.sb__cell.is-filling [data-sign-who], .sb__cell.is-filling [data-sign-time] { opacity: 0; }

/* 서명된 줄 — 콘솔에서만 면(surface-signed), 홈·견본 벽은 선·글자만 */
.signed {
  display: flex; align-items: center; gap: var(--spacing-sm); min-height: var(--spacing-hit);
  padding: 0.375rem var(--spacing-sm); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  font-size: var(--text-small); line-height: 1.35;
}
.signed--face { background: var(--color-surface-signed); border-color: var(--color-surface-signed); }
.sig--mini { width: 3rem; height: 1.25rem; flex: none; }
.signed__who { color: var(--color-accent); font-weight: 600; white-space: nowrap; }
.signed__txt { color: var(--color-ink-muted); min-width: 0; }
@media (max-width: 719px) {
  .signed { padding-block: var(--spacing-2xs); }
  .signed__sep { display: none; }
  .signed__plan { display: block; }
}

/* ── 단계 4줄(읽기 전용) ───────────────────────────────────────────── */
.steps { border-top: 1px solid var(--color-line); }
.step {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-sm);
  padding: 0.625rem 0; border-bottom: 1px solid var(--color-line);
}
.step__n { font-family: var(--font-display); font-size: var(--text-small); font-weight: 500; color: var(--color-ink-muted); }
.step__name { font-size: 0.9375rem; line-height: 1.35; }
.step__note { display: block; font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-faint); margin-top: 0.125rem; }
.step.is-off .step__name { color: var(--color-ink-faint); text-decoration: line-through; }

/* ── 계획 편집 행 ──────────────────────────────────────────────────── */
.plan { border-top: 1px solid var(--color-line); }
.plan__row { position: relative; border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.docs .plan__row { background: var(--color-bg); }
.plan__line {
  display: grid; grid-template-columns: var(--spacing-hit) 1.5rem minmax(0, 1fr) auto var(--spacing-hit) var(--spacing-hit) var(--spacing-hit);
  align-items: center; column-gap: var(--spacing-xs); min-height: 3.5rem; padding-block: var(--spacing-2xs);
}
.plan__grip {
  display: grid; place-items: center; width: var(--spacing-hit); height: var(--spacing-hit);
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-ink-muted); cursor: grab; touch-action: none;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.plan__grip:hover { background: var(--color-surface-raised); color: var(--color-ink); }
.plan__grip:active { cursor: grabbing; }
.plan__n { font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); color: var(--color-ink-muted); text-align: center; }
.plan__name { font-size: 0.9375rem; line-height: 1.35; min-width: 0; }
.plan__why {
  display: flex; align-items: center; gap: 0.375rem;
  margin: 0 0 var(--spacing-xs) calc(var(--spacing-hit) + 1.5rem + var(--spacing-xs) * 2);
  font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted);
}
.plan__why .ic { color: var(--color-ink-faint); }
.plan__row.is-off .plan__name { color: var(--color-ink-faint); text-decoration: line-through; }
.plan__row.is-off .plan__name::after { content: " · 건너뜀"; text-decoration: none; display: inline; }
.plan__row.is-drag { z-index: 2; background: var(--color-surface-raised); box-shadow: var(--shadow-inset); }
.plan__row.is-drag .plan__name { color: var(--color-ink); }
.plan__row.is-drag .step__note, .plan__row.is-drag .plan__why { color: var(--color-ink-muted); }

/* ── 실행 단계 ─────────────────────────────────────────────────────── */
.run { border-top: 1px solid var(--color-line); }
.run__row { border-bottom: 1px solid var(--color-line); }
.run__head {
  display: grid; grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--spacing-sm);
  width: 100%; min-height: 3rem; padding: var(--spacing-2xs) var(--spacing-xs); border: 0; background: none; text-align: left;
  font-size: 0.9375rem; color: var(--color-ink);
}
button.run__head { cursor: pointer; border-radius: var(--radius-xs); transition: background-color var(--duration-quick) var(--ease-out); }
button.run__head:hover { background: var(--color-surface-raised); }
div.run__head { grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr) auto; }
.run__n { font-family: var(--font-display); font-size: var(--text-small); color: var(--color-ink-muted); text-align: center; }
.run__name { min-width: 0; }
.run__took { font-size: var(--text-small); color: var(--color-ink-muted); white-space: nowrap; }
.run__chev { color: var(--color-ink-muted); transition: transform var(--duration-base) var(--ease-out); }
.run__head[aria-expanded="true"] .run__chev { transform: rotate(90deg); }
.run__row--wait .run__name { color: var(--color-ink-faint); }
.run__row--skip .run__name { color: var(--color-ink-faint); text-decoration: line-through; }
.run__row--fail > .run__head { background: var(--color-surface-failed); }
.run__row--fail > .run__head .run__n, .run__row--fail > .run__head .run__took, .run__row--fail > .run__head .run__chev { color: var(--color-ink); }
.run__body { padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-md) calc(2.5rem + var(--spacing-sm) * 2); display: grid; gap: var(--spacing-sm); min-width: 0; }
.is-opening { animation: acc-in var(--duration-base) var(--ease-out); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }

.log {
  margin: 0; padding: var(--spacing-xs) var(--spacing-sm); min-width: 0;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-micro); line-height: 1.7; color: var(--color-ink-muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.log__line { display: block; }
.log__line:last-of-type:not([hidden]), .log__line.is-now { color: var(--color-ink); }
.log__line.is-fail { color: var(--color-danger); }

.fail__why { font-size: var(--text-small); }
.fail__tag { color: var(--color-danger); font-weight: 600; margin-right: var(--spacing-2xs); }
.fail__note { font-size: var(--text-small); color: var(--color-ink-muted); }
.fail__note strong { color: var(--color-ink); font-weight: 600; }
.field { display: grid; gap: var(--spacing-2xs); }
.field__label { font-size: var(--text-small); color: var(--color-ink-muted); }
.field__msg { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted); }
.field__msg.is-bad { color: var(--color-danger); }

.progress { height: 4px; background: var(--color-line); border-radius: var(--radius-xs); overflow: hidden; }
.progress__bar { display: block; height: 100%; background: var(--color-ink); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform var(--duration-base) var(--ease-out); }
.progress__txt { font-size: var(--text-small); color: var(--color-ink-muted); }

/* ── 표 ────────────────────────────────────────────────────────────── */
.tablewrap { position: relative; max-width: 100%; overflow-x: auto; }
.table { width: 100%; font-size: var(--text-small); line-height: 1.45; }
.table caption { caption-side: top; text-align: left; padding-bottom: var(--spacing-xs); font-size: var(--text-small); color: var(--color-ink-muted); }
.table th, .table td { padding: var(--spacing-sm) var(--spacing-sm); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th { font-size: var(--text-micro); font-weight: 500; color: var(--color-ink-muted); border-bottom-color: var(--color-line-strong); }
.table tbody th { font-weight: 600; }
.table .num { text-align: right; white-space: nowrap; }
.table tfoot th, .table tfoot td { border-bottom: 0; color: var(--color-ink-muted); }
.addr { font-size: var(--text-micro); overflow-wrap: anywhere; color: var(--color-ink-muted); }

/* ── 홈 골격 ───────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.side { display: none; }
.main { min-width: 0; }
.bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--spacing-sm);
  height: var(--spacing-bar); padding-inline: var(--spacing-gutter); padding-top: env(safe-area-inset-top);
  background: var(--color-bg); border-bottom: 1px solid var(--color-line);
}
.bar__mark .wordmark__latin { font-size: 1.125rem; }
.bar__mark .wordmark__ko { display: none; }
.bar__mark { margin-right: auto; }
.bar__link { display: none; font-size: var(--text-small); white-space: nowrap; }
.bar > .cmd { display: none; }

@media (min-width: 720px) {
  .bar > .cmd { display: flex; flex: 1; max-width: 32rem; }
  .bar__mark { margin-right: var(--spacing-sm); }
  .bar__search { display: none; }
}
@media (min-width: 1024px) {
  .shell { grid-template-columns: var(--spacing-sidebar) minmax(0, 1fr); }
  .side {
    position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg); border-right: 1px solid var(--color-line);
  }
  .bar__mark, .bar__toc { display: none; }
  .bar__link { display: inline-flex; margin-left: auto; }
}

.side__foot { margin-top: auto; display: grid; gap: var(--spacing-sm); }
.side__cta { justify-content: space-between; }
.side__note { font-size: var(--text-micro); color: var(--color-ink-faint); }
.toc ol, .toc--sheet { display: grid; gap: 0.125rem; }
.toc__a {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center;
  min-height: 2.5rem; padding: 0 var(--spacing-sm); border-radius: var(--radius-sm);
  font-size: var(--text-small); color: var(--color-ink-muted); text-decoration: none;
  transition: color var(--duration-quick) var(--ease-out);
}
.toc__a:hover { color: var(--color-ink); }
.toc__n { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-ink-faint); }
.toc__a.is-cur { color: var(--color-ink); }
.toc__a.is-cur::before {
  content: ""; position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem; width: 2px; background: var(--color-ink);
}
.toc__a.is-cur .toc__n { color: var(--color-ink-muted); }

/* 명령 막대(콤보박스) */
.cmd {
  position: relative; display: flex; align-items: center; gap: var(--spacing-xs); min-width: 0;
  height: 2.5rem; padding: 0 var(--spacing-xs) 0 var(--spacing-sm);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  transition: border-color var(--duration-quick) var(--ease-out);
}
.cmd:hover { border-color: var(--color-line-strong); }
.cmd:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-line-strong); }
.cmd__ic { color: var(--color-ink-muted); }
.cmd__input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 1rem; color: var(--color-ink); outline: none; }
.cmd__input::placeholder { color: var(--color-ink-faint); opacity: 1; }
.cmd__kbd { flex: none; }
.cmd__pop {
  position: absolute; top: calc(100% + 0.375rem); left: -1px; right: -1px; z-index: 30;
  padding: var(--spacing-2xs); background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.cmd__note { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted); }
.cmd__opt {
  position: relative; display: grid; gap: 0.125rem; min-height: var(--spacing-hit); padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.cmd__opt:hover:not([aria-disabled="true"]) { background: var(--color-surface-raised); }
.cmd__opt[aria-selected="true"] { background: var(--color-surface-raised); box-shadow: inset 2px 0 0 var(--color-ink); }
.cmd__opt:active:not([aria-disabled="true"]) { transform: scale(0.99); }
.cmd__opt[aria-disabled="true"] { cursor: not-allowed; }
.cmd__opt[aria-disabled="true"] .cmd__t { color: var(--color-ink-faint); }
.cmd__opt[aria-disabled="true"][aria-selected="true"] .cmd__t, .cmd__opt[aria-disabled="true"][aria-selected="true"] .cmd__m { color: var(--color-ink-muted); }
.cmd__t { font-size: 0.9375rem; color: var(--color-ink); }
.cmd__m { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted); }

/* ── 홈 본문 ───────────────────────────────────────────────────────── */
.page { width: 100%; max-width: var(--spacing-content); margin-inline: auto; padding-inline: var(--spacing-gutter); }
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "card" "links";
  gap: var(--spacing-lg); padding-block: var(--spacing-lg) 0;
}
.hero__text { grid-area: text; display: grid; gap: var(--spacing-sm); align-content: start; }
.hero__links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md) var(--spacing-lg); }
.hero__card { grid-area: card; align-self: start; }
.hero__h1 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-display);
  line-height: var(--text-display--line-height); letter-spacing: var(--text-display--letter-spacing);
}
.hero__lead { font-size: var(--text-body); line-height: 1.5; color: var(--color-ink-muted); max-width: 30em; }
@media (min-width: 720px) {
  .hero { grid-template-areas: "text" "links" "card"; padding-top: var(--spacing-2xl); }
  .hero__lead { font-size: var(--text-lead); line-height: var(--text-lead--line-height); }
  .hero__card { max-width: 40rem; }
}
@media (min-width: 1280px) {
  .hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1.4fr);
    column-gap: var(--spacing-2xl); grid-template-areas: ". card" "text card" "links card" ". card"; padding-top: var(--spacing-2xl);
  }
  .hero__links { align-self: start; }
  .hero__card { max-width: none; }
}

/* 히어로 승인 카드 */
.hero__card {
  display: grid; position: relative; min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  transition: border-color var(--duration-quick) var(--ease-out);
}
.hero__card:focus-within { border-color: var(--color-line-strong); }
.hero__card > .acard { grid-area: 1 / 1; min-width: 0; }
.acard { padding: var(--spacing-md); }
@media (min-width: 720px) { .acard { padding: var(--spacing-lg); } }
.acard__full { display: flex; flex-direction: column; gap: var(--spacing-md); }
.acard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--spacing-sm) var(--spacing-md); }
.acard__id { min-width: 0; display: grid; gap: 0.125rem; }
.acard__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.acard__meta { font-size: var(--text-small); color: var(--color-ink-muted); }
.acard__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spacing-xs) var(--spacing-md); }
.acard__hint { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-faint); margin-top: calc(var(--spacing-xs) * -1); }
.acard__hint .kbd { height: 1.125rem; min-width: 1.125rem; }
.acard__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2xs) var(--spacing-sm); }
.acard__sumtxt { font-size: var(--text-small); color: var(--color-ink-muted); }
.acard__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-sm); }
.acard__status {
  display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--text-small); color: var(--color-ink);
}
.acard__status::before { content: ""; width: 2px; height: 1em; background: var(--color-caution); flex: none; }
.acard__status.is-wait::before { background: var(--color-ink-muted); }
.acard__toggle {
  display: none; align-items: center; gap: var(--spacing-xs); min-height: var(--spacing-hit); padding: 0 var(--spacing-xs);
  margin-inline: calc(var(--spacing-xs) * -1); border: 0; border-radius: var(--radius-sm); background: none;
  font-size: var(--text-small); color: var(--color-ink); cursor: pointer; width: max-content;
  transition: background-color var(--duration-quick) var(--ease-out);
}
.acard__toggle:hover { background: var(--color-surface-raised); }
.acard__chev { color: var(--color-ink-muted); transition: transform var(--duration-base) var(--ease-out); }
.acard__toggle[aria-expanded="true"] .acard__chev, .rail__toggle[aria-expanded="true"] .acard__chev { transform: rotate(90deg); }

.clock { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.clock__label {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2xs); min-width: 4.75rem;
  font-size: var(--text-micro); color: var(--color-ink-muted); white-space: nowrap;
}
.clock.is-paused .clock__label, .clock.is-over .clock__label { color: var(--color-caution); }
.clock.is-paused .clock__label::before, .clock.is-over .clock__label::before { content: ""; width: 2px; height: 1em; background: var(--color-caution); }
.clock__btn [data-pause-label] { display: inline-block; min-width: 4em; text-align: left; }
.clock__num { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; min-width: 4.2ch; }
.clock.is-low .clock__num, .clock.is-paused .clock__num, .clock.is-over .clock__num { color: var(--color-caution); }
.clock__btn { padding: 0 var(--spacing-xs); gap: 0.375rem; }
.clock__btn .ic--play { display: none; }
.clock__btn[aria-pressed="true"] .ic--play { display: block; }
.clock__btn[aria-pressed="true"] .ic--pause { display: none; }
.clock__btn[aria-pressed="true"] { color: var(--color-caution); }
/* 일시정지·기한 지남의 긴 설명은 스크린리더 줄 — 화면은 라벨 자리만 바뀐다(qa-1 P2-2) */
.clock__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.reasons { display: grid; gap: var(--spacing-xs); padding-top: var(--spacing-sm); border-top: 1px solid var(--color-line); }
.reasons__q { font-size: var(--text-small); color: var(--color-ink-muted); }
.reasons__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }

/* 접힌 한 줄 기록 — Morph 동안 두 층을 겹친다 */
.acard.is-morphing { display: grid; }
.acard.is-morphing > [data-full], .acard.is-morphing > [data-record] { grid-area: 1 / 1; }
.acard.is-morphing > [data-record] { align-self: start; }
.acard__record { display: grid; gap: var(--spacing-sm); }
.record { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs) var(--spacing-sm); min-height: var(--spacing-hit); }
.record__title { font-weight: 600; }
.record__who { font-size: var(--text-small); color: var(--color-ink-muted); }
.record__again { margin-left: auto; }
.record__reason { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--text-small); color: var(--color-ink-muted); }
.record__done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); font-size: var(--text-small); }
.minirun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-xs); border-top: 1px solid var(--color-line); padding-top: var(--spacing-sm); }
.minirun li { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-small); color: var(--color-ink-muted); min-width: 0; }
.minirun li[data-st="wait"] { color: var(--color-ink-faint); }
.minirun li[data-st="done"], .minirun li[data-st="run"] { color: var(--color-ink); }

/* ── 구간 ──────────────────────────────────────────────────────────── */
.sec { padding-top: var(--spacing-section); }
.sec__head { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); max-width: 44rem; }
.sec__h { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: -0.015em; }
.sec__lead { color: var(--color-ink-muted); font-size: var(--text-lead); line-height: var(--text-lead--line-height); max-width: 36em; }

/* 작동 순서 3행 — 표 같은 행(카드 3칸 아님) */
.how__rows { border-top: 1px solid var(--color-line); }
.how__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md);
  padding-block: var(--spacing-xl); border-bottom: 1px solid var(--color-line);
}
.how__n { font-family: var(--font-display); font-weight: 300; font-size: var(--text-index); line-height: 1; color: var(--color-ink-faint); letter-spacing: -0.02em; }
.how__txt { display: grid; gap: var(--spacing-xs); align-content: start; max-width: 32rem; }
.how__txt h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.how__txt p { color: var(--color-ink-muted); }
.how__frag { padding: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); min-width: 0; }
.how__frag .sb { background: var(--color-surface); }
@media (min-width: 720px) {
  .how__row { grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--spacing-lg); }
  .how__frag { grid-column: 2; }
}
@media (min-width: 1280px) {
  .how__row { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--spacing-xl); align-items: start; }
  .how__frag { grid-column: auto; }
}

/* 상태 견본 벽 */
.wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
@media (min-width: 1280px) {
  .wall { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .wall__cell { grid-column: span var(--span); }
}
.wall__cell { display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.wall__head { display: flex; align-items: baseline; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-line); }
.wall__state { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-ink-muted); }
.wall__name { font-size: var(--text-small); font-weight: 600; }
.wall__body { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md); min-width: 0; flex: 1; }
@media (min-width: 720px) { .wall__body { padding: var(--spacing-lg); } }
.wall__foot { align-self: flex-start; margin: 0 var(--spacing-md) var(--spacing-md); font-size: var(--text-small); }
@media (min-width: 720px) { .wall__foot { margin: 0 var(--spacing-lg) var(--spacing-lg); } }
.wall__title { font-weight: 600; }
.wall__meta { font-weight: 400; color: var(--color-ink-muted); font-size: var(--text-small); }
.wall__clock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs) var(--spacing-md); }
.wall__clock .risk { margin-left: auto; }
.wall .acard__actions { justify-content: flex-start; }
.wall .btn { pointer-events: none; }
.wall .sb__cell--waived .sb__label, .wall .sb__cell--waived .sb__who, .wall .sb__cell--waived .sb__meta { background: var(--color-surface); }
.wall .run__body { padding-left: var(--spacing-xs); }
.receipt { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-muted); }

/* 위험 등급 표 */
.risktable td:nth-child(3) { color: var(--color-ink-muted); }
@media (min-width: 720px) {
  .risktable th:first-child { width: 11rem; }
}
@media (max-width: 719px) {
  .risktable thead { display: none; }
  .risktable tr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--spacing-sm); padding-block: var(--spacing-md); border-bottom: 1px solid var(--color-line); }
  .table.risktable th, .table.risktable td { border: 0; padding: 0.25rem 0; }
  .risktable th[scope="row"] { grid-column: 1 / -1; padding-bottom: var(--spacing-xs); }
  .risktable td { display: contents; }
  .risktable td::before { content: attr(data-l); font-size: var(--text-micro); color: var(--color-ink-muted); padding: 0.25rem 0; }
  .risktable td > span { padding: 0.125rem 0; }
}

/* 감사 기록 */
.audit__seg { margin-bottom: var(--spacing-sm); }
.audit__count { font-size: var(--text-small); color: var(--color-ink-muted); margin-bottom: var(--spacing-md); }
.audit__time { color: var(--color-ink-muted); white-space: nowrap; width: 4.5rem; }
.audit__signs { display: grid; gap: 0.125rem; }
.audit__sig { white-space: nowrap; color: var(--color-ink-muted); }
.audit__sig b { color: var(--color-accent); font-weight: 600; }
.audit__none { color: var(--color-ink-muted); }
.audit__res { color: var(--color-ink-muted); }
.audit__hash { color: var(--color-ink-faint); font-size: var(--text-micro); white-space: nowrap; }
.audit tr.is-off { display: none; }
.audit tr.is-new > * { animation: rise-in var(--duration-base) var(--ease-out); }
@keyframes rise-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 719px) {
  .audit thead { display: none; }
  .audit tr {
    display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; column-gap: var(--spacing-sm); row-gap: 0.25rem;
    grid-template-areas: "time job risk" ". sign sign" ". res hash"; padding-block: var(--spacing-md); border-bottom: 1px solid var(--color-line);
  }
  .table.audit tr > th, .table.audit tr > td { border: 0; padding: 0; }
  .audit .audit__time { grid-area: time; width: auto; }
  .audit .audit__job { grid-area: job; }
  .audit td:nth-child(3) { grid-area: risk; }
  .audit .audit__sign { grid-area: sign; }
  .audit .audit__res { grid-area: res; }
  .audit .audit__hash { grid-area: hash; align-self: end; }
}

/* 요금 */
.price thead th, .price thead td { vertical-align: bottom; padding-bottom: var(--spacing-md); border-bottom-color: var(--color-line-strong); }
.price thead th > span { display: block; }
.price__name { font-size: var(--text-small); font-weight: 600; color: var(--color-ink); }
.price thead .fig { color: var(--color-ink); margin-block: 0.25rem; }
.price__unit { font-size: var(--text-micro); color: var(--color-ink-muted); font-weight: 400; }
.price tbody th { font-weight: 500; color: var(--color-ink-muted); width: 24%; }
.price tbody td { width: 25.333%; }
.price tfoot td { padding-top: var(--spacing-lg); }
.pstack { display: none; }
@media (max-width: 719px) {
  .price__wide { display: none; }
  .pstack { display: grid; gap: var(--spacing-lg); }
  .pstack__plan { border-top: 1px solid var(--color-line-strong); padding-top: var(--spacing-md); }
  .pstack__head { display: grid; gap: 0.125rem; margin-bottom: var(--spacing-sm); }
  .pstack dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--spacing-sm); padding-block: var(--spacing-xs); border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
  .pstack dt { color: var(--color-ink-muted); }
  .pstack > .btn { justify-self: start; }
}

/* 묻는 말 */
.faq__list { max-width: 48rem; border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); min-height: 3.5rem;
  padding-block: var(--spacing-md); list-style: none; cursor: pointer; font-weight: 600; color: var(--color-ink-muted);
  border-radius: var(--radius-xs); transition: color var(--duration-quick) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover, .faq__item[open] summary { color: var(--color-ink); }
.faq__ic { position: relative; width: 0.875rem; height: 0.875rem; flex: none; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; background: currentColor; }
.faq__ic::before { left: 0; right: 0; top: calc(50% - 0.75px); height: 1.5px; }
.faq__ic::after { top: 0; bottom: 0; left: calc(50% - 0.75px); width: 1.5px; transition: transform var(--duration-base) var(--ease-out); }
.faq__item[open] .faq__ic::after { transform: scaleY(0); }
.faq__item p { padding-bottom: var(--spacing-lg); color: var(--color-ink-muted); max-width: 40em; }
.faq__item[open] p { animation: rise-in var(--duration-base) var(--ease-out); }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md) var(--spacing-xl);
  max-width: var(--spacing-content); margin: var(--spacing-section) auto 0; padding: var(--spacing-xl) var(--spacing-gutter) calc(var(--spacing-xl) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
}
.foot__mark .wordmark__latin { font-size: 1rem; }
.foot__txt { flex: 1 1 20rem; font-size: var(--text-small); color: var(--color-ink-muted); }

/* ── 시트(모바일 목차·명령·메뉴) ───────────────────────────────────── */
.sheet {
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0;
  padding: calc(var(--spacing-sm) + env(safe-area-inset-top)) var(--spacing-gutter) calc(var(--spacing-lg) + env(safe-area-inset-bottom));
  border: 0; background: var(--color-bg); color: var(--color-ink);
  overscroll-behavior: contain;
}
.sheet[open] { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.sheet::backdrop { background: color-mix(in oklab, var(--color-bg) 70%, transparent); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--spacing-hit); }
.sheet__t { font-weight: 600; }
.sheet .cmd { display: flex; flex-wrap: wrap; height: auto; padding: 0; border: 0; background: none; }
.sheet .cmd:focus-within { outline: none; }
.sheet .cmd__ic { position: absolute; left: var(--spacing-sm); top: 1rem; pointer-events: none; }
.sheet .cmd__input {
  flex: 1 1 100%; height: 3rem; padding: 0 var(--spacing-sm) 0 2.25rem;
  background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
}
.sheet .cmd__input:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sheet .cmd__pop { position: static; flex: 1 1 100%; margin-top: var(--spacing-sm); box-shadow: none; padding: 0; background: none; }
.sheet .cmd__kbd { display: none; }
.sheet .toc__a { min-height: var(--spacing-hit); font-size: 1rem; }
.sheet > .btn { align-self: flex-start; }
.sheet .seg--demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheet .seg--demo .seg__b { justify-content: center; min-height: var(--spacing-hit); }
.sheet .menu__a { min-height: var(--spacing-hit); }
.sheet .abar__demo { display: grid; gap: var(--spacing-xs); }
@media (min-width: 720px) {
  .sheet { width: min(26rem, 100%); margin-left: auto; border-left: 1px solid var(--color-line); }
}

/* ── 콘솔 골격 ─────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100svh; }
.aside { display: none; }
.app__main { min-width: 0; display: flex; flex-direction: column; }
.abar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--spacing-sm);
  height: var(--spacing-bar); padding-inline: var(--spacing-gutter); padding-top: env(safe-area-inset-top);
  background: var(--color-bg); border-bottom: 1px solid var(--color-line);
}
.abar__mark .wordmark__latin { font-size: 1.125rem; }
.abar__mark .wordmark__ko { display: none; }
.abar__count { margin-right: auto; font-size: var(--text-small); color: var(--color-ink-muted); white-space: nowrap; }
.abar__count b { color: var(--color-ink); font-weight: 600; }
.abar > .cmd, .abar > .abar__demo { display: none; }
.abar__demo { display: flex; align-items: center; gap: var(--spacing-sm); }
.abar__demo-l { font-size: var(--text-micro); color: var(--color-ink-muted); white-space: nowrap; }
@media (min-width: 1024px) {
  .app { grid-template-columns: var(--spacing-sidebar-app) minmax(0, 1fr); }
  .aside {
    position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg); border-right: 1px solid var(--color-line); background: var(--color-surface);
  }
  .abar__mark, .abar__count, .abar__search, .abar__menu { display: none; }
  .abar > .cmd { display: flex; flex: 1; max-width: 26rem; }
  .abar > .abar__demo { display: flex; margin-left: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .abar__demo-l { display: none; } }
.aside__mark { padding: var(--spacing-xs) var(--spacing-xs) 0; }
.aside__mark .wordmark__latin { font-size: 1.125rem; }
.aside__org { margin-top: calc(var(--spacing-md) * -1); padding-inline: var(--spacing-xs); font-size: var(--text-small); color: var(--color-ink-muted); }
.menu ul { display: grid; gap: 0.125rem; }
.menu__a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xs); width: 100%;
  min-height: 2.5rem; padding: 0 var(--spacing-sm); border: 0; border-radius: var(--radius-sm); background: none;
  font-size: var(--text-small); color: var(--color-ink-muted); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.menu__a:hover { background: var(--color-surface-raised); color: var(--color-ink); }
.menu__a:focus-visible { outline-offset: -2px; }
.menu__a.is-cur { background: var(--color-surface-raised); color: var(--color-ink); }
.badge {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.25rem; padding: 0 0.375rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); font-size: var(--text-micro); color: var(--color-ink-muted);
}
.menu__a.is-cur .badge { border-color: var(--color-ink); color: var(--color-ink); }
.aside__foot { margin-top: auto; display: grid; gap: var(--spacing-sm); }
.aside__user { display: flex; align-items: center; gap: var(--spacing-sm); padding-inline: var(--spacing-xs); font-size: var(--text-small); }
.aside__user small { display: block; font-size: var(--text-micro); color: var(--color-ink-muted); }
.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong); font-weight: 600; }
.aside__back { padding-inline: var(--spacing-xs); font-size: var(--text-small); justify-self: start; }

.app__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; flex: 1; min-width: 0; }
.docs { display: grid; min-width: 0; padding: var(--spacing-lg) var(--spacing-gutter) var(--spacing-2xl); }
.docs > .doc { grid-area: 1 / 1; min-width: 0; }
@media (min-width: 1024px) {
  .app__body { grid-template-columns: 17.5rem minmax(0, 1fr); align-items: start; }
  .queue { position: sticky; top: var(--spacing-bar); max-height: calc(100svh - var(--spacing-bar)); overflow-y: auto; border-right: 1px solid var(--color-line); }
  .docs { padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-3xl); }
  .rail { grid-column: 2; }
}
@media (min-width: 1280px) {
  .app__body { grid-template-columns: var(--spacing-queue) minmax(0, 1fr) var(--spacing-rail); }
  .rail { grid-column: auto; position: sticky; top: var(--spacing-bar); max-height: calc(100svh - var(--spacing-bar)); overflow-y: auto; border-left: 1px solid var(--color-line); }
}

/* 대기함 */
.queue { padding: var(--spacing-md); display: grid; gap: var(--spacing-xs); align-content: start; }
.queue__h { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-xs) 0; font-size: var(--text-small); font-weight: 600; }
.queue__h--sub { margin-top: var(--spacing-md); color: var(--color-ink-muted); font-weight: 500; }
.queue__list { display: grid; gap: 0.125rem; }
.queue__none p { padding: var(--spacing-sm) var(--spacing-xs); font-size: var(--text-small); color: var(--color-ink-muted); }
.qi {
  position: relative; display: grid; gap: 0.25rem; width: 100%; min-height: var(--spacing-hit); padding: var(--spacing-xs) var(--spacing-sm);
  border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out);
}
.qi:hover { background: var(--color-surface-raised); }
.qi:focus-visible { outline-offset: -2px; }
.qi.is-sel { background: var(--color-surface); box-shadow: inset 2px 0 0 var(--color-ink); }
.qi__t { font-size: var(--text-small); font-weight: 500; color: var(--color-ink); }
.qi__m { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--spacing-xs); font-size: var(--text-micro); color: var(--color-ink-muted); }
.qi__fail { color: var(--color-danger); }
.queue__list--done .qi__t { color: var(--color-ink-muted); font-weight: 400; }
.queue__list--done .qi:hover .qi__t, .queue__list--done .qi.is-sel .qi__t { color: var(--color-ink); }
@media (max-width: 1023px) {
  .queue {
    display: flex; align-items: stretch; gap: var(--spacing-xs); overflow-x: auto; scroll-snap-type: x proximity;
    padding: var(--spacing-sm) var(--spacing-gutter); scroll-padding-inline: var(--spacing-gutter); border-bottom: 1px solid var(--color-line);
  }
  .queue > .queue__h:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .queue { position: relative; }
  .queue__h--sub { flex: none; margin: 0 0 0 var(--spacing-sm); padding: 0; font-size: var(--text-micro); white-space: nowrap; }
  .queue__list { display: flex; gap: var(--spacing-xs); }
  .queue__list > li { flex: none; width: 14rem; scroll-snap-align: start; }
  .qi { padding-block: 0.375rem; }
  .queue__list > li.queue__none { width: auto; display: flex; align-items: center; }
  .queue__none p { white-space: nowrap; padding: 0 var(--spacing-2xs); }
  .qi { height: 100%; border: 1px solid var(--color-line); }
  .qi.is-sel { border-color: var(--color-line-strong); }
  body[data-state="empty"] .queue__list, body[data-state="done"] .queue__list { display: none; }
  body[data-state="empty"] .queue, body[data-state="done"] .queue { display: block; }
  body[data-state="empty"] .queue__h--sub, body[data-state="done"] .queue__h--sub { display: block; margin: 0; font-size: var(--text-small); color: var(--color-ink-muted); }
}

/* 문서 */
.doc { display: flex; flex-direction: column; gap: var(--spacing-lg); max-width: 46rem; outline: none; }
.doc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--spacing-sm) var(--spacing-lg); }
.doc__id { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.doc__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: var(--text-title--line-height); letter-spacing: -0.01em; border-radius: var(--radius-xs); }
.doc__meta { font-size: var(--text-small); color: var(--color-ink-muted); }
.doc__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spacing-xs) var(--spacing-md); }
.doc__line { font-size: var(--text-small); color: var(--color-ink-muted); margin-top: calc(var(--spacing-sm) * -1); }
.doc__hint { font-size: var(--text-micro); line-height: var(--text-micro--line-height); color: var(--color-ink-faint); margin-top: calc(var(--spacing-sm) * -1); }
.doc__sec { display: grid; gap: var(--spacing-sm); min-width: 0; }
.doc__h { font-size: var(--text-small); font-weight: 600; color: var(--color-ink-muted); }
.doc__hrow { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.doc__fixm { display: none; font-size: var(--text-small); }
.doc__fix { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--color-line-strong); }
.doc__fix:hover { text-decoration-thickness: 2px; text-decoration-color: var(--color-ink); }
.doc__sum { display: none; }
.doc__toggle { display: none; }
.doc__toggle--all { display: inline-flex; }
.run--folded:not(.is-open) { display: none; }
.doc__note { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--text-small); color: var(--color-ink); }
.doc__note::before { content: ""; width: 2px; height: 1em; background: var(--color-caution); flex: none; }
.doc__note .ic { display: none; }
.doc__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spacing-sm);
  padding-top: var(--spacing-md); border-top: 1px solid var(--color-line);
}
.doc__change { margin-right: auto; font-size: var(--text-small); color: var(--color-ink-muted); }
.doc__change.is-changed { color: var(--color-ink); }
.doc .sb { max-width: 30rem; }
.doc--empty { justify-content: flex-start; }
.empty { display: grid; gap: var(--spacing-xs); padding-block: var(--spacing-md); }
.empty__t { font-size: var(--text-title); }
.wall .empty__t { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.empty__s { font-size: var(--text-small); color: var(--color-ink-muted); }
.empty__q { margin-top: var(--spacing-lg); font-size: var(--text-small); color: var(--color-ink-muted); }
.examples { border-top: 1px solid var(--color-line); }
.examples li { border-bottom: 1px solid var(--color-line); }
.example {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); width: 100%;
  min-height: 3rem; padding: 0 var(--spacing-xs); border: 0; background: none; text-align: left; color: var(--color-ink); cursor: pointer;
  border-radius: var(--radius-xs); transition: background-color var(--duration-quick) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.example:hover { background: var(--color-surface-raised); }
.example:active { transform: scale(0.99); }
.example .ic { color: var(--color-ink-muted); }
.result { display: grid; border-top: 1px solid var(--color-line); }
.result > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--spacing-sm); align-items: baseline; padding-block: var(--spacing-sm); border-bottom: 1px solid var(--color-line); }
.result dt { font-size: var(--text-small); color: var(--color-ink-muted); }
.result dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2xs) var(--spacing-sm); }
.result .fig { font-size: 1.5rem; }
.result__sub { font-size: var(--text-small); color: var(--color-ink-muted); }
.result--one dd .result__sub { color: var(--color-ink); }

/* 승인 문서 — 1440×900 첫 화면에 서명란과 단추까지(wireframe §4) */
.doc .step { padding-block: 0.4375rem; }
.doc .step__note { display: inline; margin: 0 0 0 var(--spacing-xs); }
.doc .table th, .doc .table td { padding-block: 0.5rem; }
.doc__meta .risk { vertical-align: -0.125rem; margin-left: 0.125rem; }
@media (min-width: 720px) {
  .doc[data-doc="approval"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-lg); row-gap: var(--spacing-md); }
  .doc[data-doc="approval"] > * { grid-column: 1 / -1; }
  .doc[data-doc="approval"] > .doc__sign { grid-column: 1; order: 1; }
  .doc[data-doc="approval"] > .doc__actions {
    grid-column: 2; order: 1; align-self: end; flex-direction: column; align-items: stretch; padding-top: 0; border-top: 0;
  }
  .doc[data-doc="approval"] > .acard__status, .doc[data-doc="approval"] > .reasons, .doc[data-doc="approval"] > .doc__hint { order: 2; }
  .doc[data-doc="approval"] > .doc__hint { margin-top: 0; }
}

/* 기록 열 */
.rail { padding: var(--spacing-lg) var(--spacing-gutter) var(--spacing-2xl); border-top: 1px solid var(--color-line); min-width: 0; }
@media (min-width: 1024px) { .rail { padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl); } }
@media (min-width: 1280px) { .rail { border-top: 0; padding: var(--spacing-lg); } }
.rail__body { display: grid; gap: var(--spacing-xl); }
.rail__toggle { display: none; }
.rail__sec { display: grid; gap: var(--spacing-sm); align-content: start; }
.rail__h { font-size: var(--text-small); font-weight: 600; border-radius: var(--radius-xs); }
.trail { display: grid; }
.trail li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--spacing-xs); padding-block: 0.375rem; border-bottom: 1px solid var(--color-line); font-size: var(--text-small); color: var(--color-ink-muted); }
.trail li:last-child { color: var(--color-ink); }
.trail__t { font-family: var(--font-mono); font-size: var(--text-micro); padding-top: 0.125rem; color: var(--color-ink-faint); }
.perm li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--spacing-xs); padding-block: 0.375rem; font-size: var(--text-small); border-bottom: 1px solid var(--color-line); }
.perm__k { font-size: var(--text-micro); color: var(--color-ink-muted); padding-top: 0.125rem; }
.policy { font-size: var(--text-small); }

/* ── 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .acard__toggle, .doc__toggle { display: inline-flex; }
  .acard__steps:not(.is-open) { display: none; }
  .doc__steps .doc__h { display: none; }
  .doc__steps:has(.acard__steps:not(.is-open)) { display: none; }
  .acard__hint, .doc__hint { display: none; }
  .acard__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
  .acard__side { justify-content: space-between; }
  .acard__sum { order: -1; }
  .acard__head { order: -2; }
  .acard__sum .fig { font-size: 1.5rem; }
  .acard__actions .btn { flex: 1; }
  .sb__cell { padding: 0 0.375rem 0.375rem; }
  .sb__label { margin: 0 -0.375rem 0.375rem; }
  .sig { height: 1.5rem; }
  .sb__cell { grid-template-rows: auto minmax(1.5rem, 1fr) auto auto; }
  .plan__line { grid-template-columns: var(--spacing-hit) 1.25rem minmax(0, 1fr) var(--spacing-hit) var(--spacing-hit) var(--spacing-hit); row-gap: 0; }
  .plan__line .plan__grip { grid-row: 1 / 3; }
  .plan__line .plan__name { grid-column: 3 / -1; padding-top: var(--spacing-xs); }
  .plan__line .risk { grid-row: 2; grid-column: 3; }
  .plan__line .check { grid-row: 2; grid-column: 4; }
  .plan__line [data-move="up"] { grid-row: 2; grid-column: 5; }
  .plan__line [data-move="down"] { grid-row: 2; grid-column: 6; }
  .plan__why { margin-left: calc(var(--spacing-hit) + 1.25rem + var(--spacing-xs) * 2); }
  .run__body { padding-left: var(--spacing-xs); }
  .doc__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2xs) var(--spacing-sm); font-size: var(--text-small); color: var(--color-ink-muted); }
  .doc__sum .fig { font-size: 1.5rem; color: var(--color-ink); }
  .doc__fix { display: none; }
  .doc__fixm { display: inline-flex; }
  .doc[data-doc="approval"] > .doc__sign, .doc[data-doc="approval"] > .acard__status, .doc[data-doc="approval"] > .reasons { order: 1; }
  .doc[data-doc="approval"] > .doc__targets { order: 2; }
  .doc[data-doc="approval"] > .doc__actions { order: 3; }
  .acard__meta, .acard__side .risk__name { display: none; }
  .clock__btn [data-pause-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .clock__btn { min-width: var(--spacing-hit); }
  .clock__label { white-space: nowrap; }
  .doc__side { width: 100%; justify-content: flex-start; }
  .docs { padding-bottom: 0; }
  .doc { gap: var(--spacing-md); }
  .doc__actions {
    position: sticky; bottom: 0; z-index: 10; margin-inline: calc(var(--spacing-gutter) * -1);
    padding: var(--spacing-sm) var(--spacing-gutter) calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    background: var(--color-bg);
  }
  .doc__actions .btn { flex: 1; }
  .doc__actions [data-act="retry"] { flex-basis: 100%; order: -1; }
  .doc__change { flex-basis: 100%; }
  .rail__toggle { display: inline-flex; align-items: center; gap: var(--spacing-xs); min-height: var(--spacing-hit); padding: 0 var(--spacing-xs); margin-inline: calc(var(--spacing-xs) * -1); border: 0; border-radius: var(--radius-sm); background: none; font-weight: 600; cursor: pointer; }
  .rail__toggle:hover { background: var(--color-surface-raised); }
  .rail[data-collapsed] .rail__body { display: none; }
  .rail__body { padding-top: var(--spacing-md); }
  .table th, .table td { padding: var(--spacing-xs) var(--spacing-xs); }
}

/* 터치 기기: 단축키 표식은 쓸 수 없으니 숨기고, 작은 단추도 44px */
@media (hover: none) {
  .kbd { display: none; }
  .btn--sm, .chip, .seg__b, .menu__a, .link, .skip { min-height: var(--spacing-hit); }
  .skip { display: inline-flex; align-items: center; }
  .wordmark { min-height: var(--spacing-hit); justify-content: center; }
  .acard__hint .kbd, .doc__hint .kbd { display: none; }
}

/* ── 모션: 표의 reduce 대체 ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active:not(:disabled), .iconbtn:active, .chip:active, .example:active, .cmd__opt:active { transform: none !important; }
}