/* Oyatie Console tokens — colours from the Design System project `tokens/colors.css`
 * (extracted from Oyatie Console.dc.html:26-72). Type scale deliberately evolved:
 * 12px floor / 14px body instead of the prototype's 9.5–13px band (plan D5). */
:root {
  --canvas: #f2f4f7; --surface: #ffffff; --muted: #eceff3; --border: #dbe1e8; --border-soft: #e8ecf1;
  --ink: #141a21; --steel: #566475; --faint: #5f6b79;
  --primary: #2247d8; --primary-hover: #1c3cbb; --primary-soft: #eef2ff; --primary-bd: #c7d2fe; --on-primary: #ffffff;
  --signal: #f6b521; --signal-deep: #e2a30d; --teal: #0f766e;
  --danger-bg: #fef2f2; --danger-bd: #fca5a5; --danger-tx: #b91c1c; --danger-solid: #dc2626;
  --warn-bg: #fffbeb; --warn-bd: #fcd34d; --warn-tx: #92400e; --warn-solid: #b45309;
  --ok-bg: #ecfdf5; --ok-bd: #6ee7b7; --ok-tx: #065f46; --ok-solid: #059669;
  --info-bg: #eff6ff; --info-bd: #93c5fd; --info-tx: #1e40af;
  --accent-bg: #fffbeb; --accent-bd: #f6b521; --accent-tx: #78350f;
  --purple-bg: #f5f3ff; --purple-bd: #c4b5fd; --purple-tx: #5b21b6;
  --shadow: 0 1px 2px rgba(20, 26, 33, 0.05);
  --shadow-pop: 0 12px 32px rgba(20, 26, 33, 0.16);
  /* Non-text contrast (WCAG 1.4.11): ≥3:1 against --surface and --canvas in both themes. */
  --control-border: #7b8797; --on-danger: #ffffff; --on-signal: #141a21;
  --selected-bar: inset 3px 0 0 var(--primary); --tab-selected: inset 0 -2px 0 var(--primary);

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px; --text-sm: 13px; --text-body: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px;
  --fw-body: 400; --fw-medium: 600; --fw-strong: 700;
  --lh-base: 1.5; --tracking-label: 0.4px;

  /* H1+ state colour grammar (design/h1plus/system.css). Role names, not hues; aliases follow the theme.
   *   due = LEGAL clock D-n ≤ 14 only, never plain dates · over = overdue legal item
   *   exception = 예외 처리 mark only · derived = 자동 value, editable only with a reason */
  --due-bg: var(--accent-bg); --due-bd: var(--accent-bd); --due-tx: var(--accent-tx);
  --over-bg: var(--danger-bg); --over-bd: var(--danger-bd); --over-tx: var(--danger-tx);
  --exception-bg: var(--purple-bg); --exception-bd: var(--purple-bd); --exception-tx: var(--purple-tx);
  --derived-bg: var(--muted); --derived-tx: var(--steel); --kbd-bg: var(--muted);
  --scrim: rgba(20, 26, 33, 0.32);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
  --row-h: 40px; --rail-w: 220px; --topbar-h: 48px; --panel-w: 440px;
  --qrow-h: 64px; --queue-w: 400px; --card-w: 640px; --sheet-w: 560px;
  --target: 32px; --target-touch: 44px; --chip-h: 22px;
  /* Compact table rows (roster) and toolbar / page-head controls (tabs, 기준일, find box): design-language §2. */
  --row-h-compact: 32px; --control-h-sm: 36px;
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
  color-scheme: light;
}

/* Dark --primary is lifted to keep ≥4.5:1 on --primary-soft / --muted (active nav, selected rows; axe color-contrast). */
:root[data-theme="dark"] {
  --canvas: #0e1319; --surface: #161c24; --muted: #1f2731; --border: #2b3542; --border-soft: #232c37;
  --ink: #e8edf4; --steel: #9cabbc; --faint: #8b9aab;
  --primary: #6d8bff; --primary-hover: #8aa2ff; --primary-soft: #1a2540; --primary-bd: #2f4694; --on-primary: #0b1020;
  --signal: #f6b521; --signal-deep: #ffc93d; --teal: #2dd4bf;
  --danger-bg: #3a1214; --danger-bd: #7f2b2b; --danger-tx: #fda4a4; --danger-solid: #f87171;
  --warn-bg: #3a2606; --warn-bd: #92610a; --warn-tx: #fcd34d; --warn-solid: #fbbf24;
  --ok-bg: #062e22; --ok-bd: #0b6e51; --ok-tx: #6ee7b7; --ok-solid: #34d399;
  --info-bg: #14243f; --info-bd: #2d5eb8; --info-tx: #93c5fd;
  --accent-bg: #362605; --accent-bd: #a97b06; --accent-tx: #fcd34d;
  --purple-bg: #271449; --purple-bd: #6d43c0; --purple-tx: #c4b5fd;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.55);
  --control-border: #66748a; --on-danger: #0b1020; --on-signal: #141a21;
  color-scheme: dark;
}

/* ui/banner: the one tinted message box (kit .banner / .alert / .notice). Tokens only. */
.banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid; border-radius: var(--radius); font-size: var(--text-sm); }
.banner[data-placement="page"] { align-items: center; padding: var(--space-2) var(--space-4); border-width: 0 0 1px; border-radius: 0; }
.banner[data-tone="info"] { border-color: var(--info-bd); background: var(--info-bg); color: var(--info-tx); }
.banner[data-tone="warn"] { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn-tx); }
.banner[data-tone="danger"] { border-color: var(--danger-bd); background: var(--danger-bg); color: var(--danger-tx); }
.banner[data-tone="ok"] { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok-tx); }
.banner[data-tone="past"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
/* Centred on the first line of text (line-height × the small size), whatever the line count. */
.icon { flex: none; margin-top: calc((var(--text-sm) * var(--lh-base) - var(--space-4)) / 2); }
.body { display: flex; flex: 1 1 calc(var(--panel-w) / 2); flex-direction: column; gap: var(--space-1); min-width: 0; }
.title { font-weight: var(--fw-strong); }
.text { display: flex; flex-direction: column; gap: var(--space-1); }
.text p { margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ui/card: a titled surface and the section head inside it (kit .card / .card__h / .card__b / .sec__h). Tokens only. */
.card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.card[data-look] { box-shadow: none; border-radius: var(--radius); }
.card[data-look="dashed"] { border-style: dashed; border-color: var(--control-border); background: var(--canvas); }
.card[data-look="muted"] { background: var(--muted); }
.card[data-look] > .body { padding: var(--space-3); gap: var(--space-2); }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: calc(var(--row-h) + var(--space-3)); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.title { margin: 0; font-size: var(--text-body); font-weight: var(--fw-strong); }
.meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--steel); font-size: var(--text-sm); }
.grow { flex: 1; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4); }
.body[data-flush] { padding: 0; gap: 0; overflow-x: auto; }
.sectionHead { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target); }
.sectionTitle { margin: 0; color: var(--steel); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-label); white-space: nowrap; }
.rule { flex: 1; height: 1px; background: var(--border-soft); }

/* ui/item-list: compact rows split by hairlines (kit .mlist). Tokens only. */
.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--row-h-compact); border-top: 1px solid var(--border-soft); font-size: var(--text-sm); }
.item:first-child { border-top: 0; }
.mark { display: inline-flex; flex: none; color: var(--steel); }
.item[data-tone="ok"] .mark { color: var(--ok-solid); }
.item[data-tone="warn"] .mark { color: var(--warn-solid); }
.item[data-tone="danger"] .mark { color: var(--danger-solid); }
.text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.end { flex: none; color: var(--steel); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --canvas: #0e1319; --surface: #161c24; --muted: #1f2731; --border: #2b3542; --border-soft: #232c37;
  --ink: #e8edf4; --steel: #9cabbc; --faint: #8b9aab;
  --primary: #6d8bff; --primary-hover: #8aa2ff; --primary-soft: #1a2540; --primary-bd: #2f4694; --on-primary: #0b1020;
  --signal: #f6b521; --signal-deep: #ffc93d; --teal: #2dd4bf;
  --danger-bg: #3a1214; --danger-bd: #7f2b2b; --danger-tx: #fda4a4; --danger-solid: #f87171;
  --warn-bg: #3a2606; --warn-bd: #92610a; --warn-tx: #fcd34d; --warn-solid: #fbbf24;
  --ok-bg: #062e22; --ok-bd: #0b6e51; --ok-tx: #6ee7b7; --ok-solid: #34d399;
  --info-bg: #14243f; --info-bd: #2d5eb8; --info-tx: #93c5fd;
  --accent-bg: #362605; --accent-bd: #a97b06; --accent-tx: #fcd34d;
  --purple-bg: #271449; --purple-bd: #6d43c0; --purple-tx: #c4b5fd;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.55);
  --control-border: #66748a; --on-danger: #0b1020; --on-signal: #141a21;
  color-scheme: dark;
}

}
/* Public layout only; component CSS and tokens are read from the shared UI kit. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-body)/var(--lh-base) var(--font-sans); }
a { color: var(--primary); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-sm); }
header { padding: var(--space-4) var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface); }
header > a { color: var(--ink); font-weight: var(--fw-strong); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
nav a { display: inline-flex; align-items: center; min-height: var(--target-touch); }
nav [role="group"] { display: flex; gap: var(--space-3); }
main, footer { max-width: calc(var(--card-w) + 2 * var(--space-6)); margin: auto; padding: var(--space-6); }
main { display: flex; flex-direction: column; gap: var(--space-6); }
footer { border-top: 1px solid var(--border); color: var(--steel); font-size: var(--text-sm); }
h1, h2, p { margin: 0; }
h1 { font-size: var(--text-xl); line-height: 1.4; }
h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
p + p, h1 + p { margin-top: var(--space-2); }
.head h1, .head h2 { margin-bottom: var(--space-2); }
.banner { padding: var(--space-4); }
.banner p { color: var(--ink); }
.item { min-height: calc(var(--target-touch) + var(--space-4)); flex-wrap: wrap; }
[data-component-history] { flex-basis: 100%; }
[data-public-text] { white-space: pre-wrap; overflow-wrap: anywhere; }
[data-public-text] > span { display: block; }
[data-update] + [data-update] { border-top: 1px solid var(--border-soft); padding-top: var(--space-4); }
[data-overdue] { color: var(--warn-tx); }
[data-status="ok"] { color: var(--ok-tx); }
[data-status="partial"], [data-status="degraded"] { color: var(--warn-tx); }
[data-status="major"] { color: var(--danger-tx); }
[data-status="maint"], [data-status="unknown"] { color: var(--info-tx); }
[data-history-bar] { display: flex; align-items: end; gap: 1px; height: var(--space-5); }
[data-history-bar] > span { flex: 1; min-width: 0; height: 40%; background: var(--ok-solid); }
[data-history-bar] > [data-status="none"] { height: 1px; background: var(--control-border); }
[data-history-bar] > [data-status="degraded"] { height: 65%; background: var(--warn-solid); }
[data-history-bar] > [data-status="partial"] { height: 82%; background: var(--warn-solid); }
[data-history-bar] > [data-status="major"] { height: 100%; background: var(--danger-solid); }
[data-history-bar] > [data-status="maint"] { height: 65%; background: var(--info-tx); }
[data-history-bar] > [data-status="unknown"] { height: 1px; background: var(--control-border); }
[data-skip] { position: absolute; top: -100px; left: var(--space-4); background: var(--surface); padding: var(--space-3); z-index: 1; }
[data-skip]:focus { top: var(--space-2); }
[data-nojs-status], [data-nojs-verdict] { display: none; }
@media (max-width: 600px) {
  header { padding: var(--space-3) var(--space-4); }
  main, footer { padding: var(--space-5) var(--space-4); }
  main { gap: var(--space-5); }
}