/* Layout: a departures-board header over a paper itinerary; content column ~72ch, cases page splits list | detail */
:root {
  --paper: #f5f6f8;
  --card: #ffffff;
  --ink: #16202e;
  --muted: #5b6676;
  --line: #d9dee6;
  --board: #121a26;
  --board-ink: #f2f4f7;
  --amber: #e8a317;
  --amber-ink: #8a5a00;
  --soft: #eef1f5;
  --ok: #1f7a4d;
  --warn: #a35a00;
  --bad: #b3261e;
  --basic: #2f6fb3;
  --reactive: #a35a00;
  --forecast: #6b4fb3;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-display: "Black Han Sans", "IBM Plex Sans KR", "Apple SD Gothic Neo", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f141c; --card: #171e29; --ink: #e6eaf0; --muted: #9aa5b5; --line: #2a3442;
    --board: #0a0e14; --board-ink: #f2f4f7; --amber: #f0b43a; --amber-ink: #f0b43a; --soft: #1d2533;
    --ok: #5cc28f; --warn: #f0a24a; --bad: #ff8a80; --basic: #7fb0e6; --reactive: #f0a24a; --forecast: #b39bf0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f141c; --card: #171e29; --ink: #e6eaf0; --muted: #9aa5b5; --line: #2a3442;
  --board: #0a0e14; --board-ink: #f2f4f7; --amber: #f0b43a; --amber-ink: #f0b43a; --soft: #1d2533;
  --ok: #5cc28f; --warn: #f0a24a; --bad: #ff8a80; --basic: #7fb0e6; --reactive: #f0a24a; --forecast: #b39bf0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: inherit; text-decoration-color: var(--amber); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
code, .mono { font-family: var(--f-mono); font-size: .9em; }
code { background: var(--soft); padding: .1em .35em; border-radius: 4px; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; }

/* Top board */
.board { background: var(--board); color: var(--board-ink); padding-inline: 16px; }
.board-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 14px; }
.brand { font-family: var(--f-mono); font-weight: 600; letter-spacing: .08em; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.brand .flap { background: var(--amber); color: #121a26; padding: 2px 8px; border-radius: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 6px 12px; border-radius: 6px; font-size: 14px; color: #c6ceda; }
.nav a[aria-current="page"] { background: #ffffff1a; color: #fff; }
.nav a:hover { color: #fff; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.prose { max-width: 760px; }

/* Hero */
.hero { background: var(--board); color: var(--board-ink); padding-inline: 16px; padding-block: 28px 44px; border-bottom: 4px solid var(--amber); }
.hero .wrap { padding-inline: 0; }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.hero h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 5.4vw, 52px); margin: 10px 0 14px; letter-spacing: -.01em; }
.hero p { color: #c6ceda; max-width: 680px; margin: 0; font-size: 17px; }
.flight-strip { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 1px; background: #ffffff22; border: 1px solid #ffffff22; border-radius: 8px; overflow: hidden; max-width: 860px; }
.flight-strip div { flex: 1 1 140px; background: var(--board); padding: 10px 14px; }
.flight-strip .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: #8b97a8; text-transform: uppercase; }
.flight-strip .v { font-family: var(--f-mono); font-size: 18px; color: var(--board-ink); }
.flight-strip .v.cx { color: #ff8a80; text-decoration: line-through; }
.flight-strip .v.am { color: var(--amber); }

/* Sections */
main { padding-block: 8px 64px; }
section.block { padding-block: 40px 8px; border-bottom: 1px solid var(--line); }
section.block:last-of-type { border-bottom: 0; }
.sec-head { display: flex; gap: 14px; align-items: baseline; }
.sec-head .num { font-family: var(--f-mono); color: var(--amber-ink); font-size: 13px; }
.sec-head h2 { font-size: 24px; margin: 0 0 12px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-block: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-block: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.tile h4 { margin: 0 0 4px; font-size: 15px; }
.tile p { margin: 0; font-size: 14.5px; color: var(--muted); }
.tile .tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.callout { background: var(--soft); border-left: 3px solid var(--amber); padding: 12px 16px; border-radius: 0 8px 8px 0; margin-block: 14px; font-size: 15px; }

.tbl-wrap { overflow-x: auto; margin-block: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--soft); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .mono, td.mono { white-space: nowrap; }

.pill { display: inline-block; font-family: var(--f-mono); font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.6; }
.t-basic { color: var(--basic); } .t-reactive { color: var(--reactive); } .t-forecast { color: var(--forecast); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }

/* Timeline SVG */
.timeline { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; margin-block: 14px; }
.timeline svg { display: block; min-width: 620px; width: 100%; height: auto; }
.timeline text { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.timeline .lbl { font-family: var(--f-body); font-size: 12.5px; fill: var(--ink); font-weight: 600; }
.timeline .axis { stroke: var(--line); }

.score-bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; margin-block: 10px 6px; font-family: var(--f-mono); font-size: 12px; }
.score-bar span { display: flex; align-items: center; justify-content: center; color: var(--paper); white-space: nowrap; overflow: hidden; }
.formula { font-family: var(--f-mono); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; white-space: pre; font-size: 14px; }

.cta { display: inline-flex; align-items: center; gap: 8px; background: var(--amber); color: #121a26; text-decoration: none; font-weight: 600; padding: 10px 16px; border-radius: 8px; margin-top: 8px; }

footer { border-top: 1px solid var(--line); padding-block: 20px 40px; color: var(--muted); font-size: 13px; }

/* Cases page */
.cases-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; padding-block: 20px 60px; align-items: start; }
.sidebar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.filters { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters input { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.case-list { overflow-y: auto; list-style: none; margin: 0; padding: 4px; }
.case-list button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.case-list button:hover { background: var(--soft); }
.case-list button[aria-current="true"] { background: var(--soft); box-shadow: inset 3px 0 0 var(--amber); }
.case-list button:focus-visible { outline: 2px solid var(--amber); }
.case-list .cid { font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; }
.case-list .dest { font-size: 12.5px; color: var(--muted); grid-column: 1 / -1; }
.list-count { font-size: 12px; color: var(--muted); padding: 6px 12px; border-top: 1px solid var(--line); }

.detail { min-width: 0; display: grid; gap: 18px; }
.detail-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.detail-head h1 { font-family: var(--f-mono); font-size: 24px; margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.facts > div { flex: 1 1 170px; background: var(--card); padding: 10px 12px; min-width: 0; }
.facts .k { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.facts .v { font-family: var(--f-mono); font-size: 16px; font-weight: 600; }
.request { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.75; word-break: normal; }
mark { background: color-mix(in srgb, var(--amber) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
mark.code { background: color-mix(in srgb, var(--forecast) 22%, transparent); font-family: var(--f-mono); font-size: .92em; }
.src { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; min-width: 0; }
.src .src-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.src .src-h b { font-family: var(--f-mono); font-size: 13.5px; }
.src p { margin: 0; font-size: 14.5px; word-break: normal; }
.detail h2 { font-size: 17px; margin: 6px 0 -6px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
tr.late td { color: var(--muted); }
.legend { font-size: 13px; color: var(--muted); }

@media (max-width: 820px) {
  .cases-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; max-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }