/* Hallmark · redesign · genre modern-minimal · theme cobalt(instrument panel) · macro workbench+index rail · 2026-10-23
   Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
   GRVT 감시 — 핵심 한 장 · 통합 · (물량 지도는 머리 띠만) 공통. 규칙은 ../design.md */
:root {
  --color-paper: oklch(98.5% 0.004 250);
  --color-paper-2: oklch(96.4% 0.006 252);
  --color-ink: oklch(24% 0.02 258);
  --color-ink-2: oklch(36% 0.018 257);
  --color-muted: oklch(52% 0.016 257);
  --color-rule: oklch(90.5% 0.008 255);
  --color-rule-2: oklch(84% 0.01 255);
  --color-accent: oklch(55% 0.19 256);
  --color-accent-soft: oklch(55% 0.19 256 / 0.09);
  --color-focus: oklch(55% 0.19 256);
  --color-graphite: oklch(17% 0.014 262);
  --color-up: oklch(56% 0.14 160);
  --color-down: oklch(56% 0.19 25);
  --color-ok: oklch(60% 0.15 150);
  --color-warn: oklch(76% 0.15 85);
  --color-bad: oklch(58% 0.2 27);
  /* 꼬리표 — 뜻이 있는 색(온체인/GRVT/현물/선물/LP) */
  --tag-onchain: oklch(58% 0.17 256);
  --tag-grvt: oklch(56% 0.2 305);
  --tag-spot: oklch(58% 0.15 150);
  --tag-perp: oklch(66% 0.17 55);
  --tag-lp: oklch(62% 0.11 190);
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", Pretendard, ui-monospace, Consolas, monospace;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 28px; --space-xl: 48px;
  --radius: 6px;
  --rail: 196px;
  --top-h: 52px;
  /* 예전 페이지 안 인라인 스타일이 쓰던 이름 — 새 토큰으로 이어 둔다 */
  --bg: var(--color-paper); --card: var(--color-paper); --fg: var(--color-ink); --mut: var(--color-muted); --line: var(--color-rule);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(19% 0.012 260);
    --color-paper-2: oklch(22.5% 0.014 260);
    --color-ink: oklch(94% 0.008 255);
    --color-ink-2: oklch(84% 0.012 255);
    --color-muted: oklch(68% 0.014 255);
    --color-rule: oklch(30% 0.014 260);
    --color-rule-2: oklch(38% 0.016 260);
    --color-accent: oklch(70% 0.15 256);
    --color-accent-soft: oklch(70% 0.15 256 / 0.12);
    --color-focus: oklch(70% 0.15 256);
    --color-graphite: oklch(14% 0.012 262);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font: 15px/1.6 var(--font-body);
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-accent-soft); }

/* ── 머리 띠: 이름 · 페이지 탭 · 만든 때 */
.top { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: var(--space-lg);
  padding: 0 var(--space-md); background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-rule); }
.top .mark { font: 600 13px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; }
.top .mark i { display: inline-block; width: 8px; height: 8px; background: var(--color-accent); margin-right: 8px; vertical-align: 1px; }
.top nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top nav a { color: var(--color-muted); font-size: 14px; padding: 6px 12px; border-radius: var(--radius); white-space: nowrap; }
.top nav a:hover { color: var(--color-ink); background: var(--color-paper-2); text-decoration: none; }
.top nav a[aria-current="page"] { color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
.top .when { margin-left: auto; font: 12px/1 var(--font-mono); color: var(--color-muted); white-space: nowrap; }
@media (max-width: 640px) { .top { gap: var(--space-sm); } .top .when { display: none; } .top .mark span { display: none; } }

/* ── 뼈대: 왼쪽 목차 + 본문 */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); max-width: 1460px; margin: 0 auto; }
.toc { position: sticky; top: var(--top-h); align-self: start; max-height: calc(100vh - var(--top-h)); overflow-y: auto;
  padding: var(--space-lg) var(--space-md) var(--space-lg) var(--space-md); border-right: 1px solid var(--color-rule); }
.toc p { font: 600 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-md); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 5px 0; font-size: 13px; line-height: 1.35; color: var(--color-ink-2); }
.toc a b { font: 500 11px/1.5 var(--font-mono); color: var(--color-muted); }
.toc a:hover { color: var(--color-ink); text-decoration: none; }
.toc a.on { color: var(--color-accent); } .toc a.on b { color: var(--color-accent); }
main { min-width: 0; max-width: 1240px; padding: var(--space-lg) var(--space-lg) var(--space-xl); counter-reset: sec; }
@media (max-width: 1080px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .toc { position: sticky; top: var(--top-h); z-index: 20; max-height: none; padding: 0 var(--space-md); border-right: 0; border-bottom: 1px solid var(--color-rule);
    background: var(--color-paper); overflow-x: auto; scrollbar-width: none; }
  .toc p { display: none; }
  .toc ol { display: flex; gap: var(--space-md); }
  .toc a { display: flex; white-space: nowrap; padding: 10px 0; }
  main { padding: var(--space-md) var(--space-md) var(--space-xl); }
}

/* ── 글자 */
h1 { font: 700 22px/1.25 var(--font-body); color: var(--color-ink); letter-spacing: -.02em; margin: 0 0 var(--space-xs); overflow-wrap: anywhere; min-width: 0; }
h2 { font: 650 17px/1.35 var(--font-body); color: var(--color-ink); letter-spacing: -.01em; margin: var(--space-xl) 0 var(--space-sm);
  padding-top: var(--space-md); border-top: 1px solid var(--color-ink); overflow-wrap: anywhere; min-width: 0; }
h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: inline-block; min-width: 2.2em;
  font: 500 12px/1 var(--font-mono); color: var(--color-accent); vertical-align: 2px; }
details.fold > summary h2 { border-top: 0; padding-top: 0; margin: 0; }
.mut { color: var(--color-muted); font-size: 13px; }
p { max-width: 78ch; }
li { margin: 6px 0; }
b, strong { color: var(--color-ink); font-weight: 650; }
.up { color: var(--color-up); } .dn { color: var(--color-down); }

/* ── 숫자 줄 (예전 카드) — 상자 없이 세로 선으로 나눈 계기판 한 줄 */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0;
  border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); margin: var(--space-md) 0; }
.c { background: transparent; border: 0; border-left: 1px solid var(--color-rule); border-radius: 0; padding: var(--space-md); min-width: 0; }
.cards > .c:first-child { border-left: 0; padding-left: 0; }
.c > .mut:first-child { display: block; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.c b { display: block; font: 600 24px/1.25 var(--font-mono); color: var(--color-ink); letter-spacing: -.02em; margin: 4px 0 2px; overflow-wrap: anywhere; }
#판.c { border: 0; border-left: 2px solid var(--color-accent); padding: 4px 0 4px var(--space-md); }

/* ── 표 — 줄 선만, 숫자 오른쪽 · 고정폭 */
.wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: transparent; font-size: 14px; }
th { font: 500 11px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted);
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--color-rule-2); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--color-rule); text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
td:first-child, th:first-child { text-align: left; padding-left: 0; }
tbody tr:hover td, table tr:hover td { background: var(--color-paper-2); }
tr.head td { border-top: 1px solid var(--color-rule-2); }

/* ── 꼬리표: 버튼처럼 안 보이게 — 색 네모 + 글자 */
.tg { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1.6 var(--font-mono); letter-spacing: .02em;
  color: var(--color-muted); margin: 0 10px 2px 0; white-space: nowrap; }
.tg::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.tg-onchain::before { background: var(--tag-onchain); } .tg-grvt::before { background: var(--tag-grvt); }
.tg-spot::before { background: var(--tag-spot); } .tg-perp::before { background: var(--tag-perp); } .tg-lp::before { background: var(--tag-lp); }
h2 .tg { vertical-align: 2px; margin-left: 6px; }
.badge { font: 500 11.5px/1.6 var(--font-mono); padding: 0; border: 0; color: var(--color-muted); }
.badge::before { content: "● "; }
.badge.ok { color: var(--color-ok); } .badge.guess { color: var(--color-muted); } .badge.guess::before { content: "○ "; } .badge.warnb { color: var(--color-warn); }
.src { font: 500 11.5px/1.5 var(--font-mono); color: var(--color-muted); white-space: nowrap; }

/* ── 자료 기준 시각 */
.fr { display: inline-flex; align-items: baseline; gap: 6px; margin: 2px 18px 2px 0; font-size: 13px; color: var(--color-muted); }
.fr b { font: 500 12.5px var(--font-mono); color: var(--color-ink); }
.fr i { font: normal 11.5px var(--font-mono); padding: 0; background: none !important; }
.fr i::before { content: "■ "; }
.fr i.ok { color: var(--color-ok); } .fr i.warn { color: var(--color-warn); } .fr i.bad, .fr.bad { color: var(--color-bad); }

/* ── 접는 칸 */
details.fold { margin: var(--space-xl) 0 0; border-top: 1px solid var(--color-ink); padding-top: var(--space-md); }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "펼치기 +"; margin-left: auto; font: 500 11px var(--font-mono); color: var(--color-accent); }
details.fold[open] > summary::after { content: "접기 −"; }
details.fold > summary .mut { display: none; }
details.fold > summary:hover h2 { color: var(--color-accent); }

/* ── 터미널: 페이지의 단 하나 어두운 띠 */
.term { background: var(--color-graphite); border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--color-rule); }
.term > div { min-width: 980px; }
.svg { width: 100%; height: auto; background: transparent; border: 1px solid var(--color-rule); border-radius: var(--radius); }
.t { font-size: 11px; fill: var(--color-muted); font-family: var(--font-mono); } .g { stroke: var(--color-rule); }
.hv:hover { fill: var(--color-rule); opacity: .5; }
iframe { display: block; }
button { font: inherit; }