/* tokens.css — oino-core 검진 원장 토큰
 * SSOT = ./DESIGN.md (v0.1.3, 2026-09-15). 값은 전부 DESIGN.md §3~§6·§9 에서 왔다.
 * 승인된 시안(`mockups/tokens.css`)을 제품으로 옮긴 것이며, 제품에서 더한 것은
 * 번들 폰트 @font-face · OS 기본 다크 · 1024 미만 하단 탭 · 인쇄 규칙뿐이다.
 * 외부 요청 0 — 폰트는 번들 파일, 아이콘은 인라인 SVG. CDN 참조 없음(§4·§10).
 */

/* ── §4 타이포 — 번들 가변 폰트 하나. 외부 CDN 금지 ─────── */
@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
}

/* ── §3 색 ───────────────────────────────────────────────── */
:root {
  --bg:            #fafafa;
  --surface:       #ffffff;
  --surface-2:     #f4f4f5;
  --line:          #e4e4e7;
  /* v0.1.2: #d4d4d8 → #71717a. 1px 입력 테두리가 §9-b 의 UI 3:1 을 넘게 한다.
   * DESIGN.md §3 은 이 변수를 한 블록에서 두 번 적어 뒤 값으로 덮지만, 죽은 선언을
   * 남기지 않으려고 여기서는 최종 값 한 줄로 쓴다(계산값 동일). */
  --line-strong:   #71717a;
  --ink:           #18181b;
  --ink-2:         #52525b;
  --ink-3:         #a1a1aa;
  --accent:        #2563eb;
  --accent-soft:   #eff6ff;
  --ok:            #16a34a;  --ok-soft:     #f0fdf4;
  --warn:          #d97706;  --warn-soft:   #fffbeb;
  --danger:        #dc2626;  --danger-soft: #fef2f2;
  --focus:         0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  /* v0.1.2 — §9-b 대비(본문 4.5:1 / UI 3:1) 충족용. 칩·인라인 메시지의 **글자**만
   * 전용 변수로 내리고 소프트 바탕은 그대로 둔다. --accent·--ok·--warn·--danger 는
   * 점·선·테두리 같은 UI 요소에 계속 쓰인다. */
  --chip-accent-ink:   #2563eb;
  --chip-ok-ink:       #15803d;
  --chip-warn-ink:     #b45309;
  --chip-danger-ink:   #b91c1c;
  --inline-danger-ink: #b91c1c;
  /* 강조 바탕 위의 글자와 그 바탕. DESIGN.md §6 Button primary 가 「흰 글자」로 정한
   * 값이며, 바탕을 변수로 둬서 다크에서도 같은 어두운 파랑을 유지한다(§3 v0.1.2). */
  --btn-primary-bg: #2563eb;
  --on-accent:     #ffffff;
  /* 팝오버·팔레트 뒤 막. §5 의 그림자와 같은 계열의 한 값이다. */
  --scrim:         rgba(9, 9, 11, .32);

  /* §5 간격 스케일 — 4 · 8 · 12 · 16 · 24 · 32 그 외 금지 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* §5 모서리 */
  --r-ctl: 6px;   /* 입력·버튼·칩 */
  --r-srf: 8px;   /* 패널·팝오버 */
  /* §5 그림자 — 팝오버·명령 팔레트에만 */
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .12);

  /* §2 골격 치수 */
  --w-sidebar: 220px;
  --h-header: 44px;
  --w-panel: 480px;
  --h-row: 36px;

  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Noto Sans KR", system-ui, sans-serif;
}

/* §9-b 다크. 같은 값을 두 자리에서 쓴다.
 *  (1) 운영자가 다크를 **고른** 경우   → [data-theme="dark"]
 *  (2) 고른 것이 없고 OS 가 다크인 경우 → data-theme 속성 없음 + prefers-color-scheme
 * (2)를 CSS 가 직접 판정하기 때문에 기본 상태는 스크립트를 기다리지 않는다(FOUC 0). */
[data-theme="dark"],
:root:not([data-theme]) {
  --dark-bg: #09090b; --dark-surface: #18181b; --dark-surface-2: #27272a;
  --dark-line: #27272a; --dark-line-strong: #3f3f46;
  --dark-ink: #fafafa; --dark-ink-2: #a1a1aa; --dark-ink-3: #71717a;
  --dark-accent: #3b82f6; --dark-accent-soft: #172554;
  --dark-ok: #22c55e; --dark-ok-soft: #052e16;
  --dark-warn: #f59e0b; --dark-warn-soft: #451a03;
  --dark-danger: #ef4444; --dark-danger-soft: #450a0a;
  --dark-shadow-pop: 0 8px 24px rgba(0, 0, 0, .48);
  --dark-scrim: rgba(0, 0, 0, .56);
  /* v0.1.2 다크 — 소프트 바탕 위에서 4.5:1 을 넘는 한 단계 밝은 글자색 */
  --dark-chip-accent-ink: #60a5fa;
  --dark-chip-ok-ink:     #22c55e;
  --dark-chip-warn-ink:   #f59e0b;
  --dark-chip-danger-ink: #f87171;
  --dark-inline-danger-ink: #f87171;
  /* 다크에서도 기본 버튼 바탕은 라이트와 같은 어두운 파랑이라 흰 글자가 4.5:1 을 넘는다 */
  --dark-btn-primary-bg: #2563eb;
  /* 입력 테두리는 두 테마 같은 값 하나로 양쪽에서 3:1 을 넘는다 */
  --dark-line-strong: #71717a;
}

[data-theme="dark"] {
  --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2);
  --line: var(--dark-line); --line-strong: var(--dark-line-strong);
  --chip-accent-ink: var(--dark-chip-accent-ink);
  --chip-ok-ink: var(--dark-chip-ok-ink);
  --chip-warn-ink: var(--dark-chip-warn-ink);
  --chip-danger-ink: var(--dark-chip-danger-ink);
  --inline-danger-ink: var(--dark-inline-danger-ink);
  --btn-primary-bg: var(--dark-btn-primary-bg);
  --ink: var(--dark-ink); --ink-2: var(--dark-ink-2); --ink-3: var(--dark-ink-3);
  --accent: var(--dark-accent); --accent-soft: var(--dark-accent-soft);
  --ok: var(--dark-ok); --ok-soft: var(--dark-ok-soft);
  --warn: var(--dark-warn); --warn-soft: var(--dark-warn-soft);
  --danger: var(--dark-danger); --danger-soft: var(--dark-danger-soft);
  --shadow-pop: var(--dark-shadow-pop);
  --scrim: var(--dark-scrim);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2);
    --line: var(--dark-line); --line-strong: var(--dark-line-strong);
    --chip-accent-ink: var(--dark-chip-accent-ink);
    --chip-ok-ink: var(--dark-chip-ok-ink);
    --chip-warn-ink: var(--dark-chip-warn-ink);
    --chip-danger-ink: var(--dark-chip-danger-ink);
    --inline-danger-ink: var(--dark-inline-danger-ink);
    --btn-primary-bg: var(--dark-btn-primary-bg);
    --ink: var(--dark-ink); --ink-2: var(--dark-ink-2); --ink-3: var(--dark-ink-3);
    --accent: var(--dark-accent); --accent-soft: var(--dark-accent-soft);
    --ok: var(--dark-ok); --ok-soft: var(--dark-ok-soft);
    --warn: var(--dark-warn); --warn-soft: var(--dark-warn-soft);
    --danger: var(--dark-danger); --danger-soft: var(--dark-danger-soft);
    --shadow-pop: var(--dark-shadow-pop);
    --scrim: var(--dark-scrim);
    color-scheme: dark;
  }
}

[data-theme="light"] { color-scheme: light; }

/* ── 바탕 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px; line-height: 20px; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* §4 타이포 — 정해진 6단계만 쓴다 */
.t-table  { font-size: 13px; line-height: 20px; font-weight: 400; }
.t-body   { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-label  { font-size: 12px; line-height: 16px; font-weight: 500; }
.t-panel  { font-size: 15px; line-height: 22px; font-weight: 600; }
.t-page   { font-size: 18px; line-height: 26px; font-weight: 600; }
.t-num    { font-size: 24px; line-height: 32px; font-weight: 600; }

.muted  { color: var(--ink-2); }
.muted3 { color: var(--ink-3); }
.mono-id { font-size: 12px; line-height: 16px; color: var(--ink-3); letter-spacing: .01em; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

svg { display: block; flex: none; }
.ic { width: 16px; height: 16px; stroke: currentColor; fill: none;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* §8 포커스 — 링은 항상 보이게, `outline: none` 을 쓰지 않는다.
 * 기본 outline 은 `--focus` 링과 겹쳐 보이므로 투명하게 두되 **선언은 남긴다** —
 * 강제 색 모드(Windows 고대비)에서는 box-shadow 가 버려지고 outline 만 살아남아
 * 시스템 색으로 다시 칠해지므로, 그 모드에서도 포커스가 보인다. */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus);
  border-radius: var(--r-ctl);
}

::placeholder { color: var(--ink-3); }

/* ── §2 앱 골격 ───────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--w-sidebar) minmax(0, 1fr);
  height: 100vh;
}

.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0;
}

.sidebar__top {
  height: var(--h-header);
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.sidebar__name { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
.sidebar__org  { font-size: 12px; line-height: 16px; color: var(--ink-3); }

.nav { padding: var(--s2); display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.nav__sep {
  height: 1px; background: var(--line);
  margin: var(--s2) var(--s3);
}
.nav__head {
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink-3); padding: var(--s2) var(--s3) var(--s1);
}
.nav__item {
  display: flex; align-items: center; gap: var(--s2);
  height: 28px; padding: 0 var(--s2);
  border-radius: var(--r-ctl);
  color: var(--ink-2);
  font-size: 13px; line-height: 20px; font-weight: 500;
  border: 0; background: none; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
}
.nav__item:hover { background: var(--surface); color: var(--ink); }
.nav__item[aria-current="page"] {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nav__item[aria-disabled="true"] {
  color: var(--ink-3); cursor: not-allowed; background: none;
}
.nav__item[aria-disabled="true"]:hover { background: none; color: var(--ink-3); }
.nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__count { font-size: 12px; line-height: 16px; color: var(--ink-3); }

.sidebar__foot {
  margin-top: auto; padding: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 16px; color: var(--ink-3);
}

/* ── 헤더 ─────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.header {
  height: var(--h-header); flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.header__date {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.header__spacer { flex: 1; min-width: var(--s3); }
.header__right { display: flex; align-items: center; gap: var(--s3); }

.datestep { display: flex; align-items: center; gap: 2px; }

.search {
  position: relative; display: flex; align-items: center;
  width: 280px; max-width: 34vw;
}
.search .ic { position: absolute; left: var(--s2); color: var(--ink-3); }
.search input {
  width: 100%; height: 32px;
  padding: 0 var(--s2) 0 var(--s6);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; line-height: 20px;
}
.search kbd { position: absolute; right: var(--s2); }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--s1);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--ink-3);
  font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 500;
}

/* §6 Banner(합성 경고) — 전폭 배너 폐기, 헤더 우측 작은 라벨 */
.synthetic-label {
  display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--chip-warn-ink);
  font-size: 12px; line-height: 16px; font-weight: 500;
}

.user {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2);
}
.user__avatar {
  width: 20px; height: 20px; border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 16px; font-weight: 500;
}

/* §6 SaveStatus */
.save {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2);
}
.save::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
}
.save--saved::before   { background: var(--ok); }
.save--pending::before { background: var(--warn); }
.save--error::before, .save--conflict::before { background: var(--danger); }
.save--error, .save--conflict { color: var(--inline-danger-ink); }

/* ── §6 Button ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 32px; padding: 0 var(--s3);
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  background: none; color: var(--ink);
  font-family: inherit; font-size: 13px; line-height: 20px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--btn-primary-bg); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(.94); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { background: var(--surface); border-color: var(--line-strong); color: var(--inline-danger-ink); }
.btn--danger:hover { background: var(--danger-soft); }
.btn[disabled], .btn[aria-disabled="true"] {
  color: var(--ink-3); cursor: not-allowed; background: var(--surface-2);
  border-color: var(--line);
}
.btn--icon { width: 32px; height: 32px; padding: 0; color: var(--ink-2); }
.btn--icon:hover { background: var(--surface-2); color: var(--ink); }

/* ── §6 Input · Select · Textarea ─────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field > label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.field .help { font-size: 12px; line-height: 16px; color: var(--ink-3); }

.input, .select, .textarea {
  height: 32px; padding: 0 var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.textarea { height: auto; min-height: 64px; padding: var(--s2); line-height: 20px; resize: vertical; }
.select {
  appearance: none; padding-right: var(--s5);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-3); }

/* ── §6 Chip (상태, §7 색표) ──────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  height: 20px; padding: 0 var(--s2);
  border-radius: var(--r-ctl);
  font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--reserved { color: var(--ink-2);  background: var(--surface-2); }
.chip--accent   { color: var(--chip-accent-ink); background: var(--accent-soft); }
.chip--warn     { color: var(--chip-warn-ink);   background: var(--warn-soft); }
.chip--ok       { color: var(--chip-ok-ink);     background: var(--ok-soft); }
.chip--danger   { color: var(--chip-danger-ink); background: var(--danger-soft); }
/* §7 v0.1.3: 표에 없는 상태값의 기본 칩. `--ink-3` 은 비활성 컨트롤 색이라 라이트에서
 * `--surface-2` 위 2.33:1 이고, 이 칩은 비활성이 아니라 **현재 상태**를 말하므로 본문
 * 4.5:1 이 필요하다. 그래서 잉크만 `--ink-2` 로 올린다(라이트 7.03 / 다크 5.81). */
.chip--off      { color: var(--ink-2);  background: var(--surface-2); }
.chip--plain::before { display: none; }

/* ── §6 StepBar ───────────────────────────────────────────── */
.stepbar { display: flex; align-items: center; width: 100%; }
.stepbar__step { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.stepbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); flex: none;
}
.stepbar__name {
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink-3); white-space: nowrap;
}
.stepbar__link { flex: 1; height: 1px; background: var(--line); margin: 0 var(--s2); min-width: var(--s3); }
.stepbar__step--done .stepbar__dot { background: var(--ok); }
.stepbar__step--done .stepbar__name { color: var(--ink-2); }
.stepbar__step--done + .stepbar__link { background: var(--ok); }
.stepbar__step--now .stepbar__dot {
  width: 10px; height: 10px; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.stepbar__step--now .stepbar__name { color: var(--ink); font-weight: 600; }

/* ── §5·§6 Table ──────────────────────────────────────────── */
.table-wrap { overflow: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th {
  height: 28px; padding: 0 var(--s3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2);
  text-align: left; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tbl td {
  height: var(--h-row); padding: 0 var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 20px;
  vertical-align: middle; white-space: nowrap;
}
table.tbl tbody tr { cursor: pointer; }
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl tbody tr[aria-selected="true"] td { background: var(--accent-soft); }
table.tbl tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.tbl tbody tr[aria-selected="true"]:hover td { background: var(--accent-soft); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.col-time { width: 64px; }
.col-pkg { max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.col-count { width: 72px; }
.cell-sub { color: var(--ink-3); }
.cell-dim td { color: var(--ink-3); }

/* 빈 상태 — 한 줄 문장 + 기본 행동 버튼 하나 */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s6) var(--s4);
  color: var(--ink-2); font-size: 14px; line-height: 20px;
}

/* ── §6 Panel ─────────────────────────────────────────────── */
.work { flex: 1; display: flex; min-height: 0; }
.list { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; background: var(--surface); }
.list > * { flex: none; }

.panel {
  width: var(--w-panel); min-width: 420px; max-width: 560px;
  flex: none; display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  animation: panel-in 150ms ease-out;
}
@keyframes panel-in { from { transform: translateX(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }
.panel[hidden] { display: none; }

.panel__head {
  height: var(--h-header); flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.panel__title { font-size: 15px; line-height: 22px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel__body { overflow: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s5); }

/* ── 섹션 ─────────────────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: var(--s3); }
.section__head {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 20px;
}
.section__title { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.section__title--panel { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.section__spacer { flex: 1; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── §6 PropertyList ──────────────────────────────────────── */
.props { display: grid; grid-template-columns: 88px minmax(0, 1fr); row-gap: var(--s2); column-gap: var(--s3); }
.props dt { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); padding-top: 2px; }
.props dd { margin: 0; font-size: 13px; line-height: 20px; min-width: 0; }

/* ── §6 Timeline ──────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.tl {
  position: relative;
  padding: 0 0 var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: var(--s1);
}
.tl::before {
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 0;
  width: 1px; background: var(--line);
}
.tl:last-child { padding-bottom: 0; }
.tl:last-child::before { display: none; }
.tl::after {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
}
.tl--ok::after     { background: var(--ok); }
.tl--accent::after { background: var(--accent); }
.tl--warn::after   { background: var(--warn); }
.tl--danger::after { background: var(--danger); }
.tl__meta { font-size: 12px; line-height: 16px; color: var(--ink-3); display: flex; gap: var(--s2); }
.tl__body { font-size: 13px; line-height: 20px; color: var(--ink); }
.tl__diff { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.tl__diff s { color: var(--ink-3); text-decoration-thickness: 1px; }

/* ── §6 CommandPalette ────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 96px; z-index: 40;
}
.palette {
  width: 560px; max-width: calc(100vw - var(--s6));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-srf);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.palette__input {
  display: flex; align-items: center; gap: var(--s2);
  height: 44px; padding: 0 var(--s3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}
.palette__input input {
  flex: 1; border: 0; background: none; color: var(--ink);
  font-family: inherit; font-size: 14px; line-height: 20px;
}
/* 팔레트 입력은 테두리가 없어 바깥 링이 팝오버를 넘어간다. 링을 없애지 않고 안쪽으로
 * 넣는다 — §8 은 포커스 링을 「항상 보이게」로 정한다. */
.palette__input input:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.palette__list { max-height: 480px; overflow: auto; padding: var(--s2) 0; }
.palette__group {
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3);
  padding: var(--s2) var(--s3) var(--s1);
}
.palette__item {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--h-row); padding: 0 var(--s3);
  font-size: 13px; line-height: 20px; color: var(--ink-2);
}
.palette__item .ic { color: var(--ink-3); }
.palette__item[aria-selected="true"] { background: var(--accent-soft); color: var(--ink); }
.palette__item[aria-selected="true"] .ic { color: var(--accent); }
.palette__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.palette__foot {
  display: flex; align-items: center; gap: var(--s3);
  height: 32px; padding: 0 var(--s3);
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 16px; color: var(--ink-3);
}

/* ── §6 Toast (저장 실패·충돌만) ──────────────────────────── */
.toast {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 50;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-srf); box-shadow: var(--shadow-pop);
  font-size: 13px; line-height: 20px; color: var(--ink);
}
.toast .ic { color: var(--inline-danger-ink); }

/* ── 레코드 페이지(02) ────────────────────────────────────── */
.record { overflow: auto; flex: 1; }
.record__head {
  padding: var(--s4) var(--s5) var(--s3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s3);
}
.record__title-row { display: flex; align-items: center; gap: var(--s3); }
.record__name { font-size: 18px; line-height: 26px; font-weight: 600; }
.record__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0; align-items: start;
}
.record__left { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.record__right {
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5);
  border-left: 1px solid var(--line); min-height: calc(100vh - 140px);
  background: var(--surface);
}

/* 항목 행(검사·결과·통보·메모 공통) */
.rows { border: 1px solid var(--line); border-radius: var(--r-srf); overflow: hidden; background: var(--surface); }
.row-item {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--h-row); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 20px;
}
.rows .row-item:last-child { border-bottom: 0; }
.row-item:hover { background: var(--surface-2); }
.row-item__name { min-width: 128px; font-weight: 500; }
.row-item__sub { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.row-item > .t-label { white-space: nowrap; }
.row-item__spacer { flex: 1; min-width: var(--s2); }
.row-item--block { display: block; }
.row-item--danger { background: var(--danger-soft); }
.row-item--danger:hover { background: var(--danger-soft); }

.result-edit { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }

.check {
  width: 16px; height: 16px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex: none;
  color: var(--surface);
}
.check--on { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.check--now { border-color: var(--accent); }
.check .ic { width: 12px; height: 12px; stroke-width: 2; }

/* ── 설정 화면(03) ────────────────────────────────────────── */
.settings { flex: 1; display: flex; min-height: 0; }
.subnav {
  width: 200px; flex: none; padding: var(--s4) var(--s2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
}
.settings__body { flex: 1; overflow: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.settings__body > * { flex: none; }
.settings__body > header { display: flex; flex-direction: column; gap: var(--s1); }

/* 설정 화면에서만 카드 허용(DESIGN.md §1) */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-srf);
  overflow: hidden;
}
.card__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.card__title { font-size: 15px; line-height: 22px; font-weight: 600; }
.card__desc { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.card__body--flush { padding: 0; }
.card__foot {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px; line-height: 16px; color: var(--ink-3);
}

/* 요일 기본값 표 */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  height: 28px; padding: 0 var(--s3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2);
  text-align: center; white-space: nowrap;
}
table.grid th:first-child { text-align: left; }
table.grid td {
  height: var(--h-row); padding: 0 var(--s1);
  border-bottom: 1px solid var(--line);
  text-align: center; font-size: 13px; line-height: 20px;
}
table.grid td:first-child {
  text-align: left; padding: 0 var(--s3);
  font-size: 13px; line-height: 20px; white-space: nowrap;
}
table.grid th:not(:first-child), table.grid td:not(:first-child) { width: 96px; }
table.grid th:first-child, table.grid td:first-child { border-right: 1px solid var(--line); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: var(--surface-2); }
.eq-code { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-left: var(--s2); }

.cell-input {
  width: 56px; height: 32px; padding: 0 var(--s1);
  text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; line-height: 20px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-input:hover { border-color: var(--ink-3); }
.cell-input--unset {
  border-style: dashed; color: var(--ink-3);
  font-family: inherit; cursor: pointer;
}
.cell-input--full {
  border-color: var(--warn); color: var(--chip-warn-ink); background: var(--warn-soft);
}
.cell-note { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: 2px; }
.cell-note--full { color: var(--chip-warn-ink); }

/* 토글 */
.switch {
  position: relative; width: 36px; height: 20px; flex: none;
  border-radius: 10px; background: var(--line-strong);
  border: 0; padding: 0; cursor: pointer;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  transition: transform 150ms ease-out;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

.inline-warn {
  display: flex; align-items: flex-start; gap: var(--s2);
  color: var(--chip-warn-ink); font-size: 12px; line-height: 16px; font-weight: 500;
}
.inline-warn .ic { width: 14px; height: 14px; margin-top: 1px; }

.stack { display: flex; flex-direction: column; gap: var(--s3); }
.inline { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.inline--tight { gap: var(--s2); }

/* ── §9 반응형 ────────────────────────────────────────────── */
/* §9 는 「≥1400」을 패널 480 + 전체 열로 정한다. `max-width: 1400px` 는 정확히 1400px
 * 에서도 이 블록을 적용해 1px 어긋난다. 소수 상한으로 1400 을 위쪽 규칙에 남긴다. */
@media (max-width: 1399.98px) {
  .panel { width: 420px; }
  /* 좁아지면 열을 줄인다(밀도 유지). 담당은 상세 패널에 그대로 있다. */
  .col-owner { display: none; }
}

@media (max-width: 1279px) {
  .app { grid-template-columns: 56px minmax(0, 1fr); }
  .sidebar__org, .nav__label, .nav__count, .nav__head, .sidebar__foot { display: none; }
  .sidebar__name { font-size: 13px; }
  .nav__item { justify-content: center; padding: 0; }
  .panel { width: 420px; min-width: 380px; }
  .search { width: 200px; }
  .record__cols { grid-template-columns: minmax(0, 1fr) 280px; }
  .subnav { width: 168px; }
}

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .panel {
    position: fixed; inset: 0; width: auto; min-width: 0; max-width: none;
    z-index: 30; border-left: 0;
  }
  .record__cols { grid-template-columns: minmax(0, 1fr); }
  .record__right { border-left: 0; border-top: 1px solid var(--line); min-height: 0; }
  .settings { flex-direction: column; }
  .subnav { width: auto; flex-direction: row; overflow: auto; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ── §9 <1024 — 사이드바를 하단 탭으로 ───────────────────── */
/* 위 @media (max-width: 1023px) 는 데스크톱 사이드바를 숨긴다. 같은 폭에서 하단 탭이
 * 그 자리를 대신한다(DESIGN.md §9 「사이드바는 하단 탭」). 1024 이상에서는 없다. */
.tabbar { display: none; }

@media (max-width: 1023px) {
  .tabbar {
    display: flex; align-items: stretch;
    height: 48px; flex: none;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
  }
  .tabbar__item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 500;
    color: var(--ink-3);
  }
  .tabbar__item[aria-current="page"] { color: var(--accent); }
  .tabbar__item[aria-disabled="true"] { color: var(--ink-3); opacity: .55; cursor: not-allowed; }
  .tabbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  /* 패널이 전체 화면 시트가 되므로 하단 탭보다 위에 온다. */
  .panel { z-index: 30; }
}

/* ── 인쇄 — 항상 라이트, 화면 골격은 빠진다 (DESIGN.md §9-b) ── */
@media print {
  :root, [data-theme="dark"], [data-theme="light"], :root:not([data-theme]) {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff;
    --line: #cccccc; --line-strong: #999999;
    --ink: #000000; --ink-2: #333333; --ink-3: #666666;
    --accent: #000000; --accent-soft: #ffffff;
    --ok: #000000; --ok-soft: #ffffff;
    --warn: #000000; --warn-soft: #ffffff;
    --danger: #000000; --danger-soft: #ffffff;
    /* v0.1.2 가 더한 칩·인라인·기본 버튼 변수도 함께 흑백으로 덮는다. 빠뜨리면 다크에서
     * 인쇄할 때 칩 글자와 기본 단추가 유채색으로 남는다(위 --accent 계열과 같은 이유). */
    --chip-accent-ink: #000000; --chip-ok-ink: #000000;
    --chip-warn-ink: #000000; --chip-danger-ink: #000000;
    --inline-danger-ink: #000000;
    --btn-primary-bg: #ffffff; --on-accent: #000000;
    --scrim: rgba(0, 0, 0, .32);
    --shadow-pop: none;
    color-scheme: light;
  }
  body { background: #ffffff; color: #000000; }
  /* 인쇄에서 무엇을 남기고 무엇을 뺄지는 `app.css` 의 인쇄 블록이 정한다 —
   * 결과지 인쇄는 명시적으로 무장한 경우에만 내용을 내보낸다. 여기서는 색만 라이트로 고정한다. */
}