/* ══════════════════════════════════════════════════════════════════════════
   아스콘.com · v2
   정본 = 작업사항/raw/adversarial/rounds/PLAN1/redesign/DESIGN-SPEC.md
   레거시(assets/style.css · jobs.css · css/ui.css · css/renewal.css) 미참조.
   대비비는 2026-08-09 실측값 (카드 바탕 #fcfcfb / #1a1a19 기준)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 토큰 · 라이트 ─────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  --paper:#f9f9f7; --card:#fcfcfb; --card-sunken:#f2f1ed; --overlay:#ffffff;

  --ink:#0b0b0b;        /* 19.17:1 */
  --ink-2:#52514e;      /*  7.73:1 */
  --ink-3:#6e6c66;      /*  5.11:1 */
  --ink-4:#898781;      /*  3.50:1  ★글자 금지★ 격자·눈금·비활성 아이콘 전용 */
  --ink-inv:#fcfcfb;

  --line:#e1e0d9; --line-strong:#c3c2b7; --focus:#1c5cab;

  --grade-a:#0b0b0b; --grade-b:#52514e; --grade-empty:#898781;

  --action:#1c5cab; --action-ink:#fcfcfb; --action-wash:#eaf1fb;

  --mock-ink:#7a5a00; --mock-wash:#fff8e6;
  --mock-hatch:rgba(122,90,0,.30); --mock-cover:#f2f1ed;

  --st-fresh:#0ca30c;   --st-fresh-ink:#0a7c0a;
  --st-late:#fab219;    --st-late-ink:#8a6100;
  --st-stopped:#ec835a; --st-stopped-ink:#a8471e;
  --st-wrong:#d03b3b;   --st-wrong-ink:#b02525;

  --s1:#2a78d6; --s1-line:#1c5cab;
  --s2:#eb6834; --s2-line:#c24e1f;
  --s3:#1baf7a; --s3-line:#12805a;
  --s4:#eda100; --s4-line:#a87400;
  --s-mute:#c3c2b7;

  --ramp-1:#86b6ef; --ramp-2:#5598e7; --ramp-3:#2a78d6; --ramp-4:#1c5cab; --ramp-5:#0d366b;
  --div-neg:#1c5cab; --div-mid:#f0efec; --div-pos:#b02525;

  --font:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
         "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Noto Sans CJK KR",
         "Pretendard Variable", Pretendard, system-ui, sans-serif;

  --t-hero:700 44px/1.05 var(--font);
  --t-fig:650 32px/1.10 var(--font);
  --t-fig-s:600 24px/1.15 var(--font);
  --t-h1:700 26px/1.35 var(--font);
  --t-h2:600 20px/1.40 var(--font);
  --t-h3:600 18px/1.45 var(--font);
  --t-body:400 17px/1.70 var(--font);
  --t-body-s:400 15px/1.65 var(--font);
  --t-meta:500 13px/1.55 var(--font);
  --t-micro:600 12px/1.40 var(--font);
  --ls-hero:-0.02em; --ls-fig:-0.015em; --ls-micro:0.02em;
  --measure:34rem;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-1:4px; --r-2:8px; --r-3:12px; --r-data:4px; --r-full:999px;

  --sh-0:none;
  --sh-1:0 1px 2px rgba(11,11,11,.06);
  --sh-2:0 8px 24px rgba(11,11,11,.10), 0 1px 2px rgba(11,11,11,.06);

  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease-out:cubic-bezier(.2,.8,.25,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);

  --chart-max:720px; --rail-w:320px; --tap:44px; --axis-h:28px;
}

/* ── 2. 토큰 · 다크 (두 셀렉터 모두에 같은 선언) ───────────────────────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d0d0d; --card:#1a1a19; --card-sunken:#141413; --overlay:#232322;
    --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#9a9891; --ink-4:#6f6e69; --ink-inv:#0b0b0b;
    --line:#2c2c2a; --line-strong:#383835; --focus:#6da7ec;
    --grade-a:#ffffff; --grade-b:#c3c2b7; --grade-empty:#898781;
    --action:#3987e5; --action-ink:#0b0b0b; --action-wash:#16273d;
    --mock-ink:#fab219; --mock-wash:#2a2413;
    --mock-hatch:rgba(250,178,25,.28); --mock-cover:#232322;
    --st-fresh:#0ca30c;   --st-fresh-ink:#34c759;
    --st-late:#fab219;    --st-late-ink:#fab219;
    --st-stopped:#ec835a; --st-stopped-ink:#ec835a;
    --st-wrong:#d03b3b;   --st-wrong-ink:#f26d6d;
    --s1:#3987e5; --s1-line:#6da7ec;
    --s2:#d95926; --s2-line:#f0794a;
    --s3:#199e70; --s3-line:#35c58c;
    --s4:#c98500; --s4-line:#e0a22e;
    --s-mute:#52514e;
    --ramp-1:#184f95; --ramp-2:#256abf; --ramp-3:#3987e5; --ramp-4:#6da7ec; --ramp-5:#b7d3f6;
    --div-neg:#6da7ec; --div-mid:#383835; --div-pos:#f26d6d;
    --sh-0:none;
    --sh-1:0 0 0 1px rgba(255,255,255,.08);
    --sh-2:0 12px 32px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.10);
  }
}
:root[data-theme="dark"]{
  --paper:#0d0d0d; --card:#1a1a19; --card-sunken:#141413; --overlay:#232322;
  --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#9a9891; --ink-4:#6f6e69; --ink-inv:#0b0b0b;
  --line:#2c2c2a; --line-strong:#383835; --focus:#6da7ec;
  --grade-a:#ffffff; --grade-b:#c3c2b7; --grade-empty:#898781;
  --action:#3987e5; --action-ink:#0b0b0b; --action-wash:#16273d;
  --mock-ink:#fab219; --mock-wash:#2a2413;
  --mock-hatch:rgba(250,178,25,.28); --mock-cover:#232322;
  --st-fresh:#0ca30c;   --st-fresh-ink:#34c759;
  --st-late:#fab219;    --st-late-ink:#fab219;
  --st-stopped:#ec835a; --st-stopped-ink:#ec835a;
  --st-wrong:#d03b3b;   --st-wrong-ink:#f26d6d;
  --s1:#3987e5; --s1-line:#6da7ec;
  --s2:#d95926; --s2-line:#f0794a;
  --s3:#199e70; --s3-line:#35c58c;
  --s4:#c98500; --s4-line:#e0a22e;
  --s-mute:#52514e;
  --ramp-1:#184f95; --ramp-2:#256abf; --ramp-3:#3987e5; --ramp-4:#6da7ec; --ramp-5:#b7d3f6;
  --div-neg:#6da7ec; --div-mid:#383835; --div-pos:#f26d6d;
  --sh-0:none;
  --sh-1:0 0 0 1px rgba(255,255,255,.08);
  --sh-2:0 12px 32px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.10);
}

/* ── 3. 바닥 ──────────────────────────────────────────────────────────── */
html{ background:var(--paper); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:var(--t-body); text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:anywhere;
  padding-bottom:calc(var(--tap) + var(--sp-7));
}
*,*::before,*::after{ box-sizing:border-box; }
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-1);
}
h1,h2,h3,p,dl,dd,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:var(--action); }
.num{ font-variant-numeric:tabular-nums; }
.fig{ font:var(--t-fig); letter-spacing:var(--ls-fig); font-variant-numeric:normal; }
.hero{ font:var(--t-hero); letter-spacing:var(--ls-hero); font-variant-numeric:normal;
       color:var(--ink); margin:0 0 var(--sp-3); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--sp-3); top:-100px; z-index:50;
  background:var(--card); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:var(--r-1); padding:var(--sp-2) var(--sp-3); font:var(--t-body-s);
}
.skip:focus{ top:var(--sp-3); }

/* ── 4. 골격 ──────────────────────────────────────────────────────────── */
.wrap{ max-width:var(--measure); margin:0 auto; padding:0 var(--sp-4); }
.page-head{ padding:var(--sp-5) 0 var(--sp-4); }
.page-head h1{ font:var(--t-h1); color:var(--ink); margin:0 0 var(--sp-2); }
.page-head .q{ font:var(--t-body-s); color:var(--ink-2); margin:0; }
.sec{ margin:0 0 var(--sp-7); }
.sec__h{ font:var(--t-h2); color:var(--ink); margin:0 0 var(--sp-4); }

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  background:var(--card); border-bottom:1px solid var(--line);
}
.topbar__brand{ font:var(--t-h3); color:var(--ink); margin-right:auto; }
.topbar__note{
  font:var(--t-meta); color:var(--ink-3);
  max-width:var(--measure); margin:0 auto; padding:var(--sp-2) var(--sp-4) 0;
}
.chip{
  min-height:32px; display:inline-flex; align-items:center; gap:4px;
  font:var(--t-meta); color:var(--ink-2); background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--r-full);
  padding:var(--sp-1) var(--sp-3); cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.chip b{ color:var(--ink); font-weight:600; }
.chip[aria-pressed="true"]{ background:var(--action-wash); border-color:var(--action); color:var(--action); }

/* 하단 탭 5개 */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.tabs a{
  min-height:var(--tap); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  font:var(--t-micro); letter-spacing:var(--ls-micro);
  color:var(--ink-3); text-decoration:none; padding:var(--sp-2) 0;
}
.tabs a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 2px 0 var(--ink); }
.tabs i{ font-style:normal; font-size:16px; line-height:1; }

/* 떠 있는 버튼 */
.floatbtn{
  position:fixed; right:var(--sp-4); bottom:calc(var(--tap) + var(--sp-4)); z-index:25;
  min-height:var(--tap); display:inline-flex; align-items:center; gap:6px;
  background:var(--action); color:var(--action-ink); text-decoration:none;
  border:0; border-radius:var(--r-full); padding:var(--sp-2) var(--sp-4);
  font:var(--t-meta); box-shadow:var(--sh-2);
}

/* ── 5. ① 영수증 숫자 (EvidenceValue) ─────────────────────────────────── */
.ev{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-2); padding:var(--sp-4);
  padding-left:calc(var(--sp-4) + 3px); margin:0 0 var(--sp-5);
}
@media (min-width:600px){
  .ev{ padding:var(--sp-5); padding-left:calc(var(--sp-5) + 3px); }
}
.ev::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:0; background:var(--grade-a);
}
.ev--b::before{
  background:repeating-linear-gradient(to bottom,
    var(--grade-b) 0 4px, transparent 4px 7px);
}
.ev--empty{ border-style:dashed; border-color:var(--grade-empty); }
.ev--empty::before{ background:none; }

.ev__q{ font:var(--t-h3); color:var(--ink-2); margin:0 0 var(--sp-3); }
.ev__val{ margin:0 0 var(--sp-3); display:flex; align-items:baseline;
          gap:var(--sp-2); flex-wrap:wrap; }
.ev__val .fig{ font:var(--t-fig); letter-spacing:var(--ls-fig); color:var(--ink); }
.ev__unit{ font:var(--t-fig-s); color:var(--ink-2); }
.ev__val--range .fig{ font:var(--t-fig-s); }
.ev__dash{ color:var(--ink-3); padding:0 2px; }
.ev__say{ font:var(--t-body-s); color:var(--ink-2); margin:0 0 var(--sp-3); }

.ev__tear{
  border:0; border-top:1px dashed var(--line-strong);
  margin:var(--sp-3) calc(var(--sp-4) * -1);
}
@media (min-width:600px){ .ev__tear{ margin-inline:calc(var(--sp-5) * -1); } }

.ev__foot{ margin:var(--sp-3) 0 0; text-align:right; }

.ev--late .ev__val .fig,
.ev--stopped .ev__val .fig{ color:var(--ink-2); }
.ev--stopped{ border-left-color:var(--st-stopped); }
.ev--wrong .ev__val{ display:none; }
.ev__lock{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  background:var(--card-sunken); border-radius:var(--r-1); padding:var(--sp-3);
  font:var(--t-body-s); color:var(--st-wrong-ink); margin:0 0 var(--sp-3);
}
.ev--loading .ev__val::before{
  content:"— 불러오는 중이에요"; font:var(--t-fig-s); color:var(--ink-3);
}

/* ── 6. ② 영수증 줄 (ProvenanceBar) ───────────────────────────────────── */
.prov{
  margin:0; font:var(--t-meta); color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.prov>div{ display:grid; grid-template-columns:5.5em 1fr; gap:var(--sp-2); padding:2px 0; }
.prov dt{ color:var(--ink-3); }
.prov dd{ margin:0; color:var(--ink-2); }
.prov--fold .prov__sum{
  width:100%; min-height:var(--tap); display:flex; justify-content:space-between;
  align-items:center; gap:var(--sp-2); background:none; border:0; padding:var(--sp-2) 0;
  font:var(--t-meta); color:var(--ink-3); text-align:left; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.prov--fold[data-open="true"] .prov__caret{ transform:rotate(180deg); }
.prov__caret{ transition:transform var(--dur-2) var(--ease-out); }

/* ── 7. ③ 등급 배지 · ⑥ 신선도 도장 ──────────────────────────────────── */
.gbadge,.stamp{
  display:inline-flex; align-items:center; gap:5px;
  font:var(--t-micro); letter-spacing:var(--ls-micro);
  padding:4px 8px; border-radius:var(--r-1); white-space:nowrap;
}
.gbadge{ border:1px solid var(--line-strong); color:var(--ink-2); background:var(--card); }
.gbadge--a{ border-color:var(--ink); color:var(--ink); }
.gbadge--b{ border-style:dashed; }
.gbadge i,.stamp i{ font-style:normal; }
button.gbadge{ position:relative; cursor:pointer; }
button.gbadge::after{ content:""; position:absolute; inset:-10px; }

.stamp{ border:1px solid currentColor; }
.stamp--fresh  { color:var(--st-fresh-ink); }
.stamp--late   { color:var(--st-late-ink); }
.stamp--stopped{ color:var(--st-stopped-ink); }
.stamp--wrong  { color:var(--st-wrong-ink); }
.stamp--b      { color:var(--ink-2); border-style:dashed; }

/* ── 8. ④ 예시 도장 + 행동 잠금 (MockStamp) ───────────────────────────── */
.ev--mock{
  position:relative; overflow:hidden;
  background:var(--mock-wash); border-color:var(--mock-ink);
}
.ev--mock::before{ background:none; }
.ev--mock::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(45deg,
    transparent 0 6px, var(--mock-hatch) 6px 7px);
}
.ev--mock>*{ position:relative; z-index:1; }
.mock__stamp{
  position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  font:var(--t-micro); letter-spacing:var(--ls-micro);
  color:var(--mock-ink); border:1.5px solid var(--mock-ink);
  border-radius:0; padding:3px 7px; transform:rotate(-4deg);
}
.mock__hide{ display:none; }
.mock__cover{
  font:var(--t-fig-s); color:var(--mock-ink);
  background:var(--mock-cover); border:1px dashed var(--mock-ink);
  border-radius:var(--r-1); padding:4px 10px;
}
:root[data-dev="1"] .mock__hide{ display:inline; opacity:.45; }
:root[data-dev="1"] .mock__cover{ display:none; }
.mock__why{ font:var(--t-body-s); color:var(--mock-ink); margin:var(--sp-3) 0 0; }
.ev--mock .btn,
.ev--mock a[href]{
  pointer-events:none; opacity:.55; cursor:not-allowed;
  background:var(--card-sunken); color:var(--ink-3); border-color:var(--line-strong);
}
.ev--mock a[href]{ text-decoration:line-through; }

/* ── 9. ⑦ 빈칸 카드 ───────────────────────────────────────────────────── */
.ev--empty .ev__val .fig{ color:var(--ink-3); }
.blank__why{ font:var(--t-body-s); color:var(--ink-2); margin:0 0 var(--sp-3); }
.blank--policy{ border-style:dashed; border-color:var(--line-strong); background:var(--card-sunken); }
.blank--policy .ev__q{ color:var(--ink); }

/* ── 10. ⑧ 바꾼 문장 ──────────────────────────────────────────────────── */
.retract{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--line-strong);
  border-radius:var(--r-2); padding:var(--sp-4); margin:0 0 var(--sp-4);
}
.retract__h{ font:var(--t-h3); color:var(--ink-2); margin:0 0 var(--sp-3); }
.retract__old{ font:var(--t-body); color:var(--ink-3); margin:0 0 var(--sp-2); }
.retract__old s{ text-decoration-thickness:2px; }
.retract__new{ font:var(--t-body); color:var(--ink); margin:0 0 var(--sp-3); }
.retract__new b{ font-variant-numeric:tabular-nums; }
.retract__why{ font:var(--t-body-s); color:var(--ink-2); margin:0; }

/* ── 11. ⑨ 개찰시계 ───────────────────────────────────────────────────── */
.clock{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-3);
}
.clock__left{ min-width:0; flex:1; }
.clock__t{ font:var(--t-body); color:var(--ink); margin:0 0 2px; }
.clock__meta{ font:var(--t-meta); color:var(--ink-3); font-variant-numeric:tabular-nums; margin:0; }
.clock__cd{
  font:var(--t-fig-s); color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:right;
}
.clock__cd small{ display:block; font:var(--t-micro); color:var(--ink-3); letter-spacing:var(--ls-micro); }
.clock--past .clock__t,.clock--past .clock__cd{ color:var(--ink-3); }

/* ── 12. ⑤ 흔들림 자 · 그림 공통 ──────────────────────────────────────── */
.chart{
  margin:0 0 var(--sp-5); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-2);
  padding:var(--sp-4) 0;                 /* 그림은 카드 끝까지, 글만 안쪽 여백 */
  overflow:hidden;
}
.chart__cap,.chart__note,.chart__src{ padding:0 var(--sp-4); }
.chart__cap{ font:var(--t-h3); color:var(--ink-2); margin:0 0 var(--sp-3); }
.chart__note{ font:var(--t-body-s); color:var(--ink-2); margin:var(--sp-3) 0 0; }
.chart__src{ font:var(--t-meta); color:var(--ink-3); margin:var(--sp-2) 0 0;
             font-variant-numeric:tabular-nums; }
.chart__box{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chart svg{ display:block; width:100%; max-width:var(--chart-max); height:auto; margin:0 auto; }
.chart--wrong .chart__note{ color:var(--st-wrong-ink); }

.ruler{ margin:var(--sp-3) 0 0; }
.ruler__cap{ font:var(--t-meta); color:var(--ink-3); margin:0 0 var(--sp-2); }
.ruler__note{ font:var(--t-body-s); color:var(--ink-2); margin:var(--sp-2) 0 0; }
.ruler__note--wrong{ color:var(--st-wrong-ink); }
.ruler svg{ display:block; width:100%; height:auto; }

/* 원표 서랍 — 모든 그림에 의무 */
.table-drawer{ margin:var(--sp-3) var(--sp-4) 0; }
.table-drawer summary{
  min-height:var(--tap); display:flex; align-items:center; gap:6px;
  font:var(--t-meta); color:var(--action); cursor:pointer; list-style:none;
}
.table-drawer summary::-webkit-details-marker{ display:none; }
.table-drawer summary::before{ content:"▸"; transition:transform var(--dur-2) var(--ease-out); }
.table-drawer[open] summary::before{ transform:rotate(90deg); }
.dtable{
  width:100%; border-collapse:collapse; margin:var(--sp-2) 0 0;
  font:var(--t-meta); color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.dtable th,.dtable td{ text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
.dtable th{ color:var(--ink-3); font-weight:500; }
.dtable td.n,.dtable th.n{ text-align:right; }

/* ── 13. ⑪ 분포띠 · ⑫ 선넘김자 ───────────────────────────────────────── */
.diststrip{ display:block; width:100%; height:18px; }
.checker{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-2);
  padding:var(--sp-4); margin:0 0 var(--sp-5);
}
.checker__row{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin:0 0 var(--sp-3); }
.checker input[type="number"]{
  flex:1; min-width:8em; min-height:var(--tap);
  font:var(--t-body); font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--r-1);
  padding:var(--sp-2) var(--sp-3);
}
.checker__out{ font:var(--t-body-s); color:var(--ink-2); margin:var(--sp-3) 0 0; }
.checker__guard{
  font:var(--t-body-s); color:var(--ink-2); background:var(--card-sunken);
  border-radius:var(--r-1); padding:var(--sp-3); margin:var(--sp-3) 0 0;
}

/* ── 14. 버튼 · 표 · 목록 ─────────────────────────────────────────────── */
.btn{
  min-height:var(--tap); display:inline-flex; align-items:center; gap:6px;
  font:var(--t-meta); border-radius:var(--r-1); padding:var(--sp-2) var(--sp-4);
  background:var(--action); color:var(--action-ink); border:1px solid var(--action);
  text-decoration:none; cursor:pointer;
}
.btn--ghost{ background:none; color:var(--action); border-color:var(--line-strong); }
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--card-sunken); color:var(--ink-3);
  border-color:var(--line-strong); cursor:not-allowed;
}

/* 모바일 = 행 카드 (가로 스크롤 표 금지) */
.rowcards{ display:grid; gap:var(--sp-3); }
.rowcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-4);
}
.rowcard__t{ font:var(--t-h3); color:var(--ink); margin:0 0 var(--sp-2); }
.rowcard dl{ display:grid; grid-template-columns:6em 1fr; gap:var(--sp-1) var(--sp-2);
             font:var(--t-meta); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rowcard dd{ margin:0; color:var(--ink-2); }
.rowcard__foot{ margin:var(--sp-3) 0 0; text-align:right; }

.deflist{ display:grid; gap:var(--sp-3); }
.deflist>div{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-4);
}
.deflist dt{ font:var(--t-h3); color:var(--ink); margin:0 0 var(--sp-1); }
.deflist dd{ margin:0; font:var(--t-body-s); color:var(--ink-2); }

/* 2열 「못 보여주는 것」 */
.cantshow{ display:grid; gap:var(--sp-3); }
.cantshow>div{
  border:1px dashed var(--grade-empty); border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-4); background:var(--card);
}
.cantshow--policy{ border-style:solid; border-color:var(--line-strong); background:var(--card-sunken); }
.cantshow h3{ font:var(--t-h3); color:var(--ink); margin:0 0 var(--sp-2); }
.cantshow p{ font:var(--t-body-s); color:var(--ink-2); margin:0 0 var(--sp-1); }
.cantshow .when{ font:var(--t-meta); color:var(--ink-3); margin:0; }

/* ── 15. 넓은 화면 ────────────────────────────────────────────────────── */
@media (min-width:600px){
  .rowcards{ grid-template-columns:repeat(2,1fr); }
  .cantshow{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:960px){
  body{ padding-bottom:var(--sp-7); }
  .tabs{
    position:sticky; top:0; bottom:auto; z-index:19;
    grid-template-columns:repeat(9,auto); justify-content:center;
    border-top:0; border-bottom:1px solid var(--line);
  }
  .tabs a{ flex-direction:row; gap:6px; padding:var(--sp-2) var(--sp-4); font:var(--t-meta); }
  .tabs a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--ink); }
  .floatbtn{ bottom:var(--sp-5); }
  .layout{
    display:grid; grid-template-columns:minmax(0,var(--measure)) var(--rail-w);
    gap:var(--sp-7); max-width:calc(var(--measure) + var(--rail-w) + var(--sp-7));
    margin:0 auto; padding:0 var(--sp-4); align-items:start;
  }
  .layout .wrap{ padding:0; max-width:none; }
  .rail{ position:sticky; top:var(--sp-7); font:var(--t-meta); }
  .chart svg{ max-width:var(--chart-max); }
  .chart{ max-width:var(--chart-max); }
}
.rail{ display:none; }
@media (min-width:960px){ .rail{ display:block; } }
.rail__h{ font:var(--t-h3); color:var(--ink); margin:0 0 var(--sp-3); }
.rail ul{ display:grid; gap:var(--sp-2); }
.rail li{
  border-bottom:1px solid var(--line); padding:var(--sp-2) 0;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.rail b{ color:var(--ink); }

/* ── 16. 모션 ─────────────────────────────────────────────────────────── */
.chart.is-refetching svg{ opacity:.6; transition:opacity var(--dur-2) var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* ── 17. 인쇄 · 강제 색 — 빗금으로 전환 ───────────────────────────────── */
@media (forced-colors: active){
  .ev,.chart,.rowcard,.retract,.clock{ border:1px solid CanvasText; }
  .ev::before{ background:CanvasText; }
  .stamp,.gbadge{ border:1px solid CanvasText; color:CanvasText; }
}
@media print{
  .tabs,.floatbtn,.topbar{ display:none; }
  body{ padding-bottom:0; }
  .ev,.chart,.rowcard{ break-inside:avoid; border:1px solid #000; }
  .table-drawer[open] summary{ display:none; }
  .table-drawer{ display:block!important; }
  .prov{ color:#000; }
}

/* ── 18. 받아온 그대로인 값 — 등급을 안 매긴다 ────────────────────────
   목록을 그대로 센 건수처럼, 아무도 따로 다시 계산하지 않은 값.
   「따로 계산해도 같은 값」(A) 딱지를 붙이면 거짓 신뢰 표시가 된다. */
.ev--raw::before{ background:var(--line-strong); }