/* 매크로 관측실 — 단말기 화면 (2026-10-08)
   금융 단말기의 문법을 빌렸다: 검정 바탕, 호박색 숫자, 명령줄, 번호가 붙은 노란 기능 키, 흐르는 시세 띠.
   그래프도 같은 문법: 검정 바탕, 점선 격자, 빛 번짐 없는 가는 선(흰색·호박색·하늘색), 오른쪽 끝에 선 색으로 칠한 최근 값 상자.
   계속 움직이는 것은 시세 띠와 시계, 그리고 갱신이 실패·지연일 때 깜박이는 수신 표시뿐이다. 나머지는 켤 때 한 번(값이 들어오는
   깜박임), 또는 누를 때만. 움직임을 끄면 시세 띠·깜박임이 멈추고 시계는 분 단위로만 바뀐다.
   움직임은 머리의 '움직임' 버튼으로 켜고 끈다 — 기기가 '움직임 줄이기'로 설정돼 있으면 꺼진 채로 시작한다. 글꼴: IBM Plex Sans KR(글) + IBM Plex Mono(숫자·명령). */
:root {
  --black: #000; --panel: #0a0a0a; --bar: #171717; --rule: #2c2c2c;
  --amber: #ff9e1b; --ink: #e9e6df; --dim: #8f8f8f;
  --blue: #5ab1ff; --key: #f6d200; --go: #36d07f; --alert: #ff5449;
  --gold: #d3a45f; --gold-cell: #1f1810;   /* 흐름도(읽는 법) 전용 — 호박색보다 차분한 금색 테두리 · 표 머리 칸의 갈색 바탕 */
  /* 한국 시장 절(korea.js가 그리는 표·탭)이 쓰는 이름. 아랫줄 --ch-*는 그래프 색 — 검정 위 대비 3:1 이상, 선 셋은 밝기와 색상이 모두 다르다 */
  --bg: var(--black); --fg: var(--ink); --muted: var(--dim); --line: var(--rule); --card: var(--black); --link: var(--blue);
  --ch-1: #f4f4f4; --ch-2: #ff9e1b; --ch-3: #3ec6ff; --ch-ref: #808080; --ch-th: var(--key); --ch-grid: #2e2e2e; --ch-axis: #6a6a6a;
  --f-text: "IBM Plex Sans KR", "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --f-mono: "IBM Plex Mono", "D2Coding", "Cascadia Mono", "Consolas", "Menlo", monospace;
  --head-h: 86px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--head-h) + 44px); background: var(--black); }
body { margin: 0; background: var(--black); color: var(--ink); font: 14px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-underline-offset: 3px; }
a, button, summary, select, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, svg:focus-visible {
  outline: 2px solid var(--key); outline-offset: 2px;
}
h1, h2, h3 { margin: 0; font-family: var(--f-text); font-weight: 600; }
.sub, .muted, small { color: var(--dim); }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 30; padding: 8px 12px; background: var(--key); color: #000; }
.skip-link:focus { top: 8px; }
/* 화면에는 안 보이고 화면 읽기에만 읽히는 글자 */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 머리: 명령줄 · 기능 키 · 시세 띠 ── */
.term-head { position: sticky; top: 0; z-index: 8; background: var(--black); border-bottom: 1px solid var(--rule); }
.cmdbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 16px 6px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--amber); text-decoration: none; font: 600 15px var(--f-text); white-space: nowrap; }
.brand::before { content: ""; width: 9px; height: 9px; background: var(--amber); }
.cmd { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 8px; border: 1px solid var(--rule); background: var(--panel); }
.cmd label { color: var(--amber); font: 600 14px var(--f-mono); }
.cmd input {
  flex: 1; min-width: 0; padding: 2px 0; border: 0; outline: 0; background: transparent; color: var(--amber);
  font: 500 14px var(--f-mono); caret-color: var(--amber);
}
.cmd input::placeholder { color: #a3814a; }
.cmd-msg { color: var(--key); font: 500 12px var(--f-text); white-space: nowrap; }
.cmd-msg:empty { display: none; }
.cmd:focus-within { border-color: var(--amber); }
.cmd button { padding: 2px 9px; border: 0; cursor: pointer; background: var(--go); color: #000; font: 600 12px var(--f-text); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.clocks { display: flex; align-items: center; gap: 14px; font: 500 12.5px var(--f-mono); color: var(--dim); white-space: nowrap; }
.clocks time, .clocks #since { color: var(--ink); font-variant-numeric: tabular-nums; }
.link-lamp { display: inline-flex; align-items: center; gap: 6px; }
.motion-toggle { padding: 1px 8px; cursor: pointer; background: #000; color: var(--dim); border: 1px solid var(--rule); font: 500 12px var(--f-text); }
.motion-toggle[aria-pressed="true"] { color: var(--go); border-color: var(--go); }
.link-lamp::before { content: ""; width: 8px; height: 8px; background: #444; }
.link-lamp[data-state="ok"]::before { background: var(--go); }
.link-lamp[data-state="bad"] { color: var(--alert); }
.link-lamp[data-state="bad"]::before { background: var(--alert); animation: blink 1s steps(2, jump-none) infinite; }

#category-nav { display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
#category-nav::-webkit-scrollbar { display: none; }
#category-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 4px 4px; text-decoration: none;
  background: var(--key); color: #000; font: 600 12.5px var(--f-text); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .32);
}
#category-nav a[data-view="all"] { background: var(--go); }
#category-nav kbd { min-width: 17px; padding: 0 4px; text-align: center; background: #000; color: var(--key); font: 600 11.5px var(--f-mono); }
#category-nav a[data-view="all"] kbd { color: var(--go); }
#category-nav a span { font: 500 11px var(--f-mono); opacity: .62; }
#category-nav a:active { transform: translateY(1px); box-shadow: none; }
#category-nav a[aria-current="page"] { background: #000; color: var(--key); box-shadow: inset 0 0 0 1px var(--key); }
#category-nav a[data-view="all"][aria-current="page"] { color: var(--go); box-shadow: inset 0 0 0 1px var(--go); }
#category-nav a[aria-current="page"] kbd { background: var(--key); color: #000; }
#category-nav a[data-view="all"][aria-current="page"] kbd { background: var(--go); }

.tape { overflow: hidden; border-top: 1px solid var(--rule); background: #050505; font: 500 12.5px var(--f-mono); white-space: nowrap; }
.tape-track { display: inline-flex; gap: 34px; padding: 5px 0 5px 34px; animation: tape 70s linear infinite; }
.tape:hover .tape-track, .tape:focus-within .tape-track { animation-play-state: paused; }
.tape-run { display: inline-flex; gap: 34px; }
.tape-item { display: inline-flex; gap: 8px; align-items: baseline; }
.tape-item span { color: var(--dim); font-family: var(--f-text); }
.tape-item strong { color: var(--amber); font-weight: 500; font-variant-numeric: tabular-nums; }
.tape-item small { color: #8a8a8a; }
.tape:focus-visible { outline-offset: -2px; }

main { max-width: 1360px; margin: 0 auto; padding: 16px 16px 48px; }
main > section, main > .page-header, main > .bridge { margin-bottom: 22px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 8px;
  padding: 4px 10px; background: var(--bar); border-left: 3px solid var(--amber); }
.section-heading h2, #sources-wrap > h2 { font-size: 14px; color: var(--amber); }
#sources-wrap > h2 { padding: 4px 10px; background: var(--bar); border-left: 3px solid var(--amber); }
.section-heading span, .section-heading p { margin: 0; font-size: 12px; color: var(--dim); }
.reference-label { color: var(--key) !important; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 2px 0 0; }
.page-header h1 { font-size: 22px; }
.page-header .sub { margin: 2px 0 0; }
.update-label { font: 500 12px var(--f-mono); color: var(--dim); white-space: nowrap; }
.banner { margin: 0 0 12px; padding: 8px 12px; background: #2a0907; color: #ffd9d4; border: 1px solid var(--alert); border-left-width: 4px; }
.empty-state { padding: 16px; border: 1px dashed var(--rule); color: var(--dim); }

/* ── 첫 화면: 국면 모니터 + 수신 상태 ── */
.bridge { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.box { border: 1px solid var(--rule); background: var(--panel); min-width: 0; overflow-x: auto; }
.box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 10px; background: var(--bar); }
.box-head h2 { font-size: 14px; color: var(--amber); }
.box-head span { font: 500 11.5px var(--f-mono); color: var(--dim); white-space: nowrap; }
.monitor { width: 100%; border-collapse: collapse; font-size: 13px; }
.monitor th, .monitor td { padding: 5px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid #1c1c1c; }
.monitor thead th { font-weight: 500; font-size: 11.5px; color: var(--dim); }
.monitor tbody tr:last-child td, .monitor tbody tr:last-child th { border-bottom: 0; }
.monitor tbody th { font-weight: 500; white-space: normal; }
.monitor tbody th a { color: var(--ink); text-decoration: none; }
.monitor tbody tr:hover { background: #151004; }
.monitor tbody tr:hover th a, .monitor tbody th a:focus-visible { color: var(--key); }
.monitor .topic { color: var(--dim); font-size: 12px; }
.monitor .num { text-align: right; color: var(--amber); font: 500 13.5px var(--f-mono); font-variant-numeric: tabular-nums; }
.monitor .asof { color: #8a8a8a; font: 400 11.5px var(--f-mono); }
.monitor .num small.when { display: none; font: 400 10.5px var(--f-mono); color: #8a8a8a; }
.monitor .num.none { color: var(--dim); font: 400 12.5px var(--f-text); }
.monitor tbody th small { display: block; font-size: 11px; font-weight: 400; color: var(--dim); }
.monitor thead .num, .monitor thead .asof { font: 500 11.5px var(--f-text); color: var(--dim); }
.monitor .spark { width: 124px; padding-top: 2px; padding-bottom: 2px; }
.spark svg { display: block; width: 112px; height: 24px; overflow: visible; }
.spark path { fill: none; stroke: var(--ch-1); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.monitor tr.met .spark path { stroke: var(--amber); }
.monitor tr.met th a { color: var(--amber); }
.tag { display: inline-block; min-width: 62px; padding: 0 7px; text-align: center; font: 600 11.5px/1.7 var(--f-text); color: var(--dim); box-shadow: inset 0 0 0 1px #3a3a3a; white-space: nowrap; }
.tag.met { background: var(--amber); color: #000; box-shadow: none; }
.tag.unknown { box-shadow: none; border: 1px dashed #666; }
.feed { padding: 10px 12px 12px; }
.feed h1 { font-size: 20px; line-height: 1.3; margin-bottom: 4px; }
.feed .sub { margin: 0 0 10px; font-size: 13px; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 10px; padding: 0; list-style: none; background: var(--rule); border: 1px solid var(--rule); }
.tally li { padding: 6px 8px 7px; background: var(--black); }
.tally strong { display: block; font: 600 22px/1.15 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tally .met strong { color: var(--amber); }
.tally span { font-size: 11.5px; color: var(--dim); }
.status { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 6px; padding: 5px 10px; font-size: 12.5px; color: var(--dim);
  border: 1px solid var(--rule); background: var(--panel); }
.status strong { color: var(--amber); font: 500 13px var(--f-mono); }
#notice { margin: 0 0 14px; font-size: 12px; }

/* ── 주요 지표 ── */
.snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.metric { display: grid; gap: 1px; padding: 9px 12px 10px; background: var(--panel); color: var(--ink); text-decoration: none; }
.metric span { font-size: 12px; color: var(--dim); }
.metric strong { font: 600 24px/1.2 var(--f-mono); color: var(--amber); font-variant-numeric: tabular-nums; }
.metric small { font: 400 11.5px var(--f-mono); color: #8a8a8a; }
.metric:hover, .metric:focus-visible { background: #151004; }
.reading-note { margin: 8px 0 0; font-size: 12px; color: var(--dim); }

/* ── 그래프 — 단말기 방식 ── */
.panel, .rule figure.ch { position: relative; background: var(--black); border: 1px solid var(--rule); }
.panel { padding: 10px 12px; margin: 0 0 12px; }
#overview, #ktb-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#overview .panel, #ktb-charts .panel { margin: 0; }
#ktb-charts { margin-bottom: 8px; }
figure.ch { margin: 0; }
.rule figure.ch { margin: 10px 0 0; padding: 8px 8px 6px; }
.ch-title { margin: -10px -12px 8px; padding: 4px 10px; background: var(--bar); font: 600 13.5px var(--f-text); color: var(--amber); }
.ch-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 4px; font-size: 12px; color: var(--ink); }
.ch-key { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.ch-plot { position: relative; }
.ch-plot svg { display: block; overflow: visible; touch-action: pan-y; }
.ch-grid { stroke: var(--ch-grid); stroke-width: 1; stroke-dasharray: 1 3; shape-rendering: crispEdges; }
.ch-zero { stroke: var(--ch-axis); stroke-width: 1; shape-rendering: crispEdges; }
.ch-th { stroke: var(--ch-th); stroke-width: 1; stroke-dasharray: 5 4; }
.ch-tick { fill: #9a9a9a; font: 400 11px var(--f-mono); font-variant-numeric: tabular-nums; }
.ch-th-label { fill: var(--ch-th); font: 500 11px var(--f-text); paint-order: stroke; stroke: var(--black); stroke-width: 3px; stroke-linejoin: round; }
.ch-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
figure.ch.ch-fresh .ch-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
figure.ch.ch-fresh.ch-seen .ch-line { animation: trace 1.1s cubic-bezier(.3, .1, .2, 1) forwards; }
.ch-dot { stroke: var(--black); stroke-width: 1.5; }
.ch-end { fill: #000; font: 600 11.5px var(--f-mono); font-variant-numeric: tabular-nums; }
.ch-end.ref { fill: var(--ink); font-weight: 500; }
.ch-end-box.ref { fill: #000 !important; stroke: #808080; stroke-width: 1; }
.ch-cross { stroke: var(--key); stroke-width: 1; stroke-dasharray: 2 3; }
.ch-tip { position: absolute; z-index: 2; pointer-events: none; padding: 5px 8px; white-space: nowrap; font-size: 12px; line-height: 1.5;
  background: #000; border: 1px solid var(--amber); }
.ch-tip-date, .ch-tip-asof { color: var(--dim); font-family: var(--f-mono); }
.ch-tip strong { margin-right: 6px; font: 500 12.5px var(--f-mono); color: var(--amber); }
.ch-note { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.notices { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); }
.notices p { margin: 2px 0; overflow-wrap: anywhere; }
details.ch-table { margin: 4px 0 0; }
details.ch-table summary, .rule-detail summary { font-size: 12px; color: var(--dim); cursor: pointer; }
.ch-scroll { max-height: 240px; overflow: auto; margin-top: 4px; }
.ch-scroll table { border-collapse: collapse; font: 400 12px var(--f-mono); font-variant-numeric: tabular-nums; }
.ch-scroll th, .ch-scroll td { padding: 2px 12px 2px 0; text-align: right; white-space: nowrap; border-bottom: 1px solid #1c1c1c; }
.ch-scroll th:first-child, .ch-scroll td:first-child { text-align: left; }
.ch-scroll thead th { position: sticky; top: 0; background: var(--black); font-family: var(--f-text); font-weight: 500; }

/* ── 한국 국고채(참고) ── */
#ktb-wrap .panel:first-of-type { background: var(--panel); padding: 8px 12px; }
table.ktb { border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.ktb th, table.ktb td { padding: 4px 26px 4px 0; text-align: right; white-space: nowrap; border-bottom: 1px solid #1c1c1c; }
table.ktb th:first-child, table.ktb td:first-child { text-align: left; }
table.ktb thead th { font-weight: 500; font-size: 11.5px; color: var(--dim); }
table.ktb tbody th { font-weight: 500; }
table.ktb td { font: 500 13.5px var(--f-mono); }
table.ktb td:nth-child(2) { color: var(--amber); font-size: 15px; }
#ktb-head { margin: 0 0 8px; font-size: 12.5px; }

/* ── 규칙 카드 ── */
.rule-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: 12px; color: var(--dim); }
.rule-toolbar label { color: var(--ink); font-weight: 500; }
.rule-toolbar select { padding: 3px 8px; color: var(--amber); background: var(--black); border: 1px solid var(--rule); font: 500 12.5px var(--f-text); }
.rule-group { margin: 0 0 20px; }
.group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.group-heading h3 { font-size: 14px; color: var(--key); }
.group-heading p { margin: 0; font-size: 12px; color: var(--dim); }
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rule { padding: 0 12px 10px; border: 1px solid var(--rule); background: var(--panel); min-width: 0; }
.rule h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -12px 8px; padding: 4px 10px; background: var(--bar); font-size: 13.5px; color: var(--ink); }
.rule p { margin: 6px 0; }
.rule-context { font-size: 12.5px; color: var(--dim); }
.pill { flex: 0 0 auto; min-width: 62px; padding: 0 7px; text-align: center; font: 600 11.5px/1.7 var(--f-text); color: var(--dim); box-shadow: inset 0 0 0 1px #3a3a3a; white-space: nowrap; }
.pill.met { background: var(--amber); color: #000; box-shadow: none; }
.pill.unknown { box-shadow: none; border: 1px dashed #666; }
.observations { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; margin: 8px 0 0; background: var(--rule); border: 1px solid var(--rule); }
.observations div { padding: 5px 9px 6px; background: var(--black); }
.observations dt { font-size: 11.5px; color: var(--dim); }
.observations dd { margin: 0; }
.observations strong { display: block; font: 600 16px var(--f-mono); color: var(--amber); font-variant-numeric: tabular-nums; }
.observations small { font: 400 11px var(--f-mono); color: #8a8a8a; }
.rule-detail { margin: 8px 0 0; font-size: 12.5px; }
.rule-guide p { margin: 6px 0 0; line-height: 1.7; }
.rule-guide strong { color: var(--fg); font-weight: 600; }
.source-link { font-size: 12px; }
/* 읽는 법의 흐름도 — 검정 바탕 · 금색 가는 테두리 · 흰 글자 · 직각으로만 꺾는 흰 점선. 움직이지 않는다.
   그림 좌표는 viewBox 440 기준이고 어느 화면에서도 1:1(440px)까지만 커진다. 휴대폰 폭(480px 이하)에서만 카드 안쪽 여백까지 넓혀 글자를 키운다 */
.tp-flow { margin: 12px 0 2px; }
.tp-flow svg { display: block; width: 100%; max-width: 440px; height: auto; background: var(--black); border: 1px solid var(--rule); }
.tp-flow figcaption { max-width: 440px; font-size: 12px; color: var(--dim); }
.rule-guide .tp-flow figcaption p { margin: 6px 0 0; line-height: 1.6; }
.tp-flow ul { margin: 2px 0 0; padding-left: 16px; line-height: 1.6; }
.tpf text { font: 400 13px var(--f-text); fill: var(--ink); }
.tpf .tpf-title { font-size: 20px; font-weight: 600; fill: var(--gold); }
.tpf .tpf-head { font-size: 14px; font-weight: 600; }
.tpf .tpf-unit { font: 600 15px var(--f-mono); }
.tpf .tpf-plus { font: 400 15px var(--f-mono); fill: var(--dim); }
.tpf .tpf-sub, .tpf .tpf-n, .tpf .tpf-src { fill: var(--dim); }
.tpf .tpf-s { fill: var(--gold); font-weight: 600; }
.tpf .tpf-c { fill: var(--ink); font-weight: 600; }
.tpf rect { stroke-width: 1; }
.tpf .tpf-box { fill: var(--black); stroke: var(--ink); }
.tpf .tpf-group { fill: none; stroke: #5c5c5c; }
.tpf .tpf-dash { fill: none; stroke: var(--ink); stroke-dasharray: 5 4; }
.tpf .tpf-frame { fill: var(--black); stroke: var(--gold); }
.tpf .tpf-th { fill: var(--gold-cell); stroke: var(--gold); }
.tpf .tpf-arrow { fill: var(--black); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: miter; }
.tpf .tpf-link { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: square; }
.tpf .tpf-obs { fill: none; stroke: var(--gold); stroke-width: 1; }   /* TFP → 'TFP를 보는 값' — 영향이 아니라 관측이라 점선과 다르게 */
/* 수급 참고(읽는 법 안, 흐름도 바로 뒤) — 판정에 쓰지 않는 두 지표의 숫자 두 줄과 작은 그래프. 금색은 흐름도의 것이라 쓰지 않는다.
   숫자 줄은 좁은 화면에서 아무 데서나 접는다(390px에서 가로로 넘치지 않게). 그래프는 카드의 다른 그래프와 같은 틀(.rule figure.ch) */
.supply { margin: 14px 0 2px; padding-top: 8px; border-top: 1px solid var(--rule); }
.rule-guide .supply p { margin: 4px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.rule-guide .supply .supply-name { margin-top: 12px; }
.supply-head { font-size: 13px; }
.supply-name small { font: 400 11.5px var(--f-mono); }
.supply-num { color: var(--amber); font-variant-numeric: tabular-nums; }
.supply-flag { color: var(--key); }
.supply-late { color: var(--alert); }

/* ── 출처 ── */
.source-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0; }
.source-guide article { padding: 10px 12px; border: 1px solid var(--rule); background: var(--panel); }
.source-guide h3 { font-size: 13.5px; color: var(--key); }
.source-guide p { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }
.health { padding-left: 18px; font-size: 12.5px; }
.health li, #warnings li { overflow-wrap: anywhere; }
footer { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--dim); }
footer p { margin: 3px 0; overflow-wrap: anywhere; }

/* ── 움직임 ── */
body.ready .monitor .num, body.ready .metric strong, body.ready .tally strong { animation: tick .9s steps(3, jump-none) both; }
main.switching > section:not([hidden]), main.switching > .bridge:not([hidden]) { animation: screen-in .22s ease-out backwards; }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes tick { 0% { background: var(--amber); color: #000; } 60% { background: #5a3a0c; } 100% { background: transparent; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes screen-in { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }

/* ── 좁은 화면 ── */
@media (max-width: 1080px) {
  .bridge { grid-template-columns: minmax(0, 1fr); }
  .rule-grid, #overview, #ktb-charts { grid-template-columns: minmax(0, 1fr); }
  .snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-guide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --head-h: 104px; }
  .cmdbar { grid-template-columns: auto 1fr; gap: 8px 10px; padding: 8px 12px 6px; }
  .cmd { grid-column: 1 / -1; order: 3; }
  .clocks { justify-self: end; gap: 10px; }
  .clocks .since, .link-lamp { display: none; }
  #category-nav { padding: 0 12px 8px; }
  main { padding: 12px 12px 40px; }
  .monitor .topic, .monitor .asof, .monitor thead .topic, .monitor thead .asof { display: none; }
  .monitor .num small.when { display: block; }
  .monitor th, .monitor td { padding: 5px 7px; }
  .monitor .spark { width: 72px; }
  .spark svg { width: 64px; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .cmd input, .rule-toolbar select { font-size: 16px; }             /* 아이폰이 누를 때 화면을 확대하지 않게 */
  #category-nav a span { display: none; }
  .ch-tip { max-width: calc(100vw - 64px); white-space: normal; }
}
/* 휴대폰 폭에서만 흐름도를 카드 안쪽 여백(12px)까지 — 390px에서 글자 10px 남짓. 더 넓은 화면(태블릿·가로 휴대폰)은 440px 상한 그대로 */
@media (max-width: 480px) {
  .tp-flow svg { width: calc(100% + 24px); max-width: none; margin: 0 -12px; border-width: 1px 0; }
}
/* 낮은 화면(가로로 돌린 휴대폰)에서는 머리를 고정하지 않는다 — 화면의 절반을 가린다 */
@media (max-height: 520px) { .term-head { position: static; } }
/* 움직임 끔 — 머리의 버튼, 또는 기기의 '움직임 줄이기' 설정(처음 값) */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .tape { overflow-x: auto; scrollbar-width: none; }
html[data-motion="off"] .tape::-webkit-scrollbar { display: none; }
html[data-motion="off"] .tape-run[aria-hidden] { display: none; }
html[data-motion="off"] figure.ch.ch-fresh .ch-line { stroke-dasharray: none; stroke-dashoffset: 0; }

/* Korean market study panels */
.market-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 12px}.market-tabs a{padding:9px 16px;border:1px solid var(--line);border-radius:0;text-decoration:none;color:var(--fg);background:var(--card)}.market-tabs a[aria-current]{background:var(--bar);color:var(--amber);border-color:var(--amber)}.market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.market-card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:0;padding:20px}.market-card h3,.auction-grid h3{margin:0;font-size:1rem}.market-question{font-size:.85rem;color:var(--muted);min-height:2.8em}.market-value{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}.market-value>strong{font-size:1.65rem;font-variant-numeric:tabular-nums}.market-value>span{font-size:.8rem}.market-deltas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.market-deltas span,.market-deltas strong{display:block;font-size:.78rem;overflow-wrap:anywhere}.market-deltas span{color:var(--muted)}.market-deltas strong{font-size:.92rem;font-variant-numeric:tabular-nums}.market-source{font-size:.75rem;color:var(--muted);overflow-wrap:anywhere}.market-range{font-size:.8rem;margin-top:12px}.market-range p{margin-bottom:8px}.range-track{height:6px;background:var(--rule);border-radius:8px;position:relative;margin:12px 5px}.range-dot{width:12px;height:12px;background:var(--amber);border:2px solid var(--card);border-radius:50%;position:absolute;top:-3px;transform:translateX(-50%)}.market-warning{font-size:.8rem;color:var(--alert)}.market-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.auction-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}.market-scroll{overflow-x:auto;margin-top:14px}.market-table{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}.market-table td,.market-table th{text-align:right;border-bottom:1px solid var(--line);padding:10px;white-space:nowrap}.market-table td:first-child,.market-table th:first-child{text-align:left}.market-table th{color:var(--muted);font-weight:500}.market-group h2{margin-top:20px}
@media(max-width:700px){.market-grid,.market-summary{grid-template-columns:1fr}.market-card{padding:16px}.market-tabs{flex-wrap:nowrap;overflow-x:auto}.market-tabs a{white-space:nowrap;padding:8px 11px;font-size:.86rem}.market-table{font-size:.78rem}.market-deltas strong{font-size:.84rem}}

.market-value>strong,.market-deltas strong,.market-table td{font-family:var(--f-mono)}
.market-value>strong,.market-card h3{color:var(--amber)}
/* 인쇄 — 아직 화면에 들어온 적 없는 그래프도 선이 보이게, 흐르는 띠는 뺀다 */
/* 저녁판·읽기 노트는 아침 갱신(FRED 규칙 점검)과 따로 도는 화면이다 — 아침 상태 줄·안내·실패 배너를 그 화면의 것처럼 보이지 않게 감춘다 */
main[data-view="evening"] > :is(#status, #notice, #banner), main[data-view="notes"] > :is(#status, #notice, #banner) { display: none; }
/* 화면 키의 초점 테두리가 가로 스크롤 상자에 잘리지 않게 안쪽으로 */
#category-nav a:focus-visible { outline-offset: -3px; }
/* 강제 색(Windows 고대비) — 배경색·그림자로만 하던 구분을 테두리로. 실제 고대비 화면에서는 아직 확인하지 못했다 */
@media (forced-colors: active) {
  #category-nav a[aria-current] { outline: 2px solid Highlight; outline-offset: -3px; }
  .cmd input:focus-visible { outline: 2px solid Highlight; }
  .ch-key { forced-color-adjust: none; }
}
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* 검은 바탕째 찍어 흰 선·노란 글자가 보이게 */
  figure.ch.ch-fresh .ch-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .term-head { position: static; }
  .tape { display: none; }
}