/* =============================================================================
 *  미·중 관세 트래커 · 에디토리얼 리서치 페이퍼
 *  참조 룩: CSIS · The New York Times · The Wall Street Journal
 *  차트 팔레트는 dataviz 검증기(validate_palette.js) 라이트/다크 전 항목 통과.
 * ========================================================================== */

/* ---------- 토큰 ---------- */
:root {
  color-scheme: light;

  /* 지면: 눈부심을 줄인 밝은 회색 바탕 + 흰 요소로 층위 */
  --paper:      #f2f3f5;          /* 페이지 바탕 */
  --paper-2:    #ffffff;          /* 마스트헤드 · 호버 · 표 머리 */
  --paper-sunk: #e7e9ed;          /* 주석 블록 */
  --paper-rail: #ffffff;          /* 행 호버 */

  /* 잉크 */
  --ink:    #111111;
  --ink-2:  #444444;
  --ink-3:  #767676;
  --ink-4:  #9a9a9a;

  /* 괘선 */
  --rule:        #ced2d8;
  --rule-soft:   #dfe2e7;
  --rule-heavy:  #111111;

  /* 기관색: 네이비 1색 + 적색(경고 전용) */
  --navy:      #0d3b66;
  --navy-link: #14528f;
  --navy-wash: #eef3f8;
  --red:       #a4161a;
  --red-wash:  #fbeeee;

  /* 차트 시리즈 */
  --series-1: #2f6fb2;
  --series-2: #c2551f;
  --series-3: #009184;
  --series-4: #b07f0e;
  --series-5: #a02a5e;

  /* 타입: 고딕 한 벌로 통일. 위계는 굵기(900/700/500/400)가 담당 */
  --font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
          "Noto Sans KR", "Spoqa Han Sans Neo", -apple-system, BlinkMacSystemFont,
          "Malgun Gothic", "Segoe UI", sans-serif;
  /* 헤드라인: HY견고딕이 설치돼 있으면 그것을, 없으면 같은 고딕의 Heavy(900) */
  --font-display: "HY견고딕", "HYGothic-Extra", "Black Han Sans",
                  "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
                  "Noto Sans KR", sans-serif;

  --measure: 1180px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #111111;
  --paper-2:    #1b1b1b;
  --paper-sunk: #1b1b1b;
  --paper-rail: #191919;
  --ink:    #f2f0ec;
  --ink-2:  #b8b6b1;
  --ink-3:  #8e8c88;
  --ink-4:  #6e6c68;
  --rule:       #2f2f2f;
  --rule-soft:  #232323;
  --rule-heavy: #f2f0ec;
  --navy:      #8fb6dc;
  --navy-link: #9cc2e6;
  --navy-wash: #17232f;
  --red:       #e06c6c;
  --red-wash:  #2a1818;
  --series-1: #4d88ce;
  --series-2: #c96731;
  --series-3: #009b88;
  --series-4: #b88c1d;
  --series-5: #c05181;
}

/* 수치·메타: 모노 대신 같은 고딕 + 등폭 숫자 */
.brand .asof, .sec-num, .cd-days, .cd-date, .tl-date, .stack-title .hts,
.item-btn .tt, .bar-seg, .bar-axis, .layer-rate, .stack-total, .kpi-value,
.src-date, .src-pill .org, .auth-full, .watch-when, .chip .count,
.tip .t-rate, table.tbl td.num, table.tbl th.num, .footer code {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.brand .asof, .sec-num, .cd-date, .tl-date, .stack-title .hts,
.src-date, .src-pill .org, .auth-full, .watch-when {
  letter-spacing: .02em;
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--navy-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--navy-link); outline-offset: 2px; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 28px; }
@media (max-width: 860px) { .wrap { padding: 0 22px; } }
@media (max-width: 520px) { .wrap { padding: 0 17px; } }

/* 공용: 케스트너 라벨 (kicker / eyebrow) */
.kicker {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip:focus { left: 0; }

/* =========================================================================
 *  MASTHEAD
 * ====================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.topbar::before {
  content: ""; display: block; height: 3px; background: var(--rule-heavy);
}
.topbar-inner {
  max-width: var(--measure); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 22px; min-height: 54px;
}
@media (max-width: 860px) { .topbar-inner { padding: 0 22px; gap: 14px; } }
@media (max-width: 520px) { .topbar-inner { padding: 0 17px; gap: 10px; } }

.brand { display: flex; align-items: baseline; gap: 12px; flex-shrink: 0; }
.brand strong {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 900; letter-spacing: -0.03em;
}
.brand .asof {
  font-family: var(--font);
  font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3);
  white-space: nowrap; text-transform: uppercase;
}
@media (max-width: 760px) { .brand .asof { display: none; } }

.nav {
  display: flex; gap: 20px; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; padding: 17px 0 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink-2); white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--navy);
}

#printBtn { font-size: 9px; font-weight: 700; letter-spacing: .04em; width: 34px; }
/* 좁은 화면: 워드마크 한 줄, 내비게이션 아래 한 줄 (잘림 방지) */
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; min-height: 0; padding-top: 11px; }
  .brand { flex: 1 1 auto; }
  .nav {
    order: 10; flex: 0 0 100%; margin-left: 0; gap: 17px;
    border-top: 1px solid var(--rule-soft); margin-top: 10px;
  }
  .nav a { padding: 9px 0 8px; font-size: 13px; }
  .nav a.is-active::after { bottom: 0; }
}

.theme-toggle {
  flex-shrink: 0; width: 28px; height: 28px;
  display: grid; place-items: center;
  font-size: 13px; color: var(--ink-3);
  border: 1px solid var(--rule); background: var(--paper-2);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* =========================================================================
 *  HERO
 * ====================================================================== */
.hero { padding-top: 54px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 56px;
  align-items: start;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 28px; } }

.hero h1 {
  font-family: var(--font-display);
  margin: 10px 0 0;
  font-size: clamp(34px, 5vw, 55px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.045em;
}
.hero .deck {
  font-family: var(--font-display);
  margin: 18px 0 0;
  font-size: clamp(16px, 1.8vw, 19.5px);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  max-width: 44ch;
}
.hero .byline {
  margin: 26px 0 0; padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--ink-3);
  letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  max-width: 44ch;
}

/* 우측 레일: 임박 일정 */
.rail {
  border-top: 3px solid var(--rule-heavy);
  padding-top: 12px;
}
.rail-h {
  font-family: var(--font);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 4px;
}
.cd {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.cd:first-of-type { border-top: 0; }
.cd-days {
  font-family: var(--font);
  font-size: 15px;
  font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink);
}
.cd.t-critical .cd-days, .cd.t-serious .cd-days { color: var(--red); }
.cd-label { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.cd.is-past { opacity: .45; }
.cd.is-past .cd-days { color: var(--ink-3); font-size: 12px; }
.stale {
  margin-top: 12px; padding: 9px 11px;
  background: var(--red-wash); border-left: 3px solid var(--red);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
}
.stale strong { color: var(--red); font-weight: 800; margin-right: 4px; }
.cd-date {
  font-family: var(--font); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .02em; display: block; margin-top: 1px;
}

.standfirst {
  margin: 30px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.7; color: var(--ink-3);
  max-width: 96ch;
}
.standfirst b { color: var(--ink-2); font-weight: 600; }

/* =========================================================================
 *  SECTION
 * ====================================================================== */
.section { padding-top: 58px; }
.section-head {
  border-top: 3px solid var(--rule-heavy);
  padding-top: 14px; margin-bottom: 26px;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px;
}
@media (max-width: 640px) { .section-head { grid-template-columns: 1fr; gap: 6px; } }

.sec-num {
  font-family: var(--font);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--navy); padding-top: 6px;
}
.section-head h2 {
  font-family: var(--font-display);
  margin: 0; font-size: clamp(22px, 2.7vw, 28px); font-weight: 900;
  line-height: 1.3; letter-spacing: -0.04em;
}
.section-head p {
  margin: 8px 0 0; color: var(--ink-2); font-size: 14px;
  line-height: 1.68; max-width: 72ch;
}
.section-head .kicker { display: block; margin-bottom: 5px; }

/* =========================================================================
 *  01. KPI (지면 4단, 세로 괘선 구획)
 * ====================================================================== */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }

.kpi {
  padding: 20px 22px 18px; border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 7px;
}
.kpi:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
  .kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 520px) {
  .kpi { border-left: 0; padding-left: 0; }
  .kpi + .kpi { border-top: 1px solid var(--rule-soft); }
}

.kpi-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.kpi-value {
  font-family: var(--font);
  font-size: 41px; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi-value .unit {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-3); margin-left: 2px;
}
.kpi-value.is-long { font-size: 30px; letter-spacing: -0.03em; }
.kpi-value.is-critical { color: var(--red); }
.kpi-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.kpi .srclink { margin-top: auto; padding-top: 4px; }

.srclink {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--navy-link);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.srclink:hover { text-decoration: none; color: var(--ink); }
.srclink::after { content: " →"; }

/* =========================================================================
 *  01-B. 핵심 요약 (CSIS Key Points)
 * ====================================================================== */
.keypoints {
  list-style: none; margin: 0 0 30px; padding: 16px 0 4px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
@media (max-width: 860px) { .keypoints { grid-template-columns: 1fr; } }
.kp {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px;
  padding: 0 22px 16px 0; border-left: 1px solid var(--rule-soft);
  padding-left: 22px; align-items: start;
}
.kp:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 860px) {
  .kp { border-left: 0; padding-left: 0; padding-bottom: 14px; }
  .kp + .kp { border-top: 1px solid var(--rule-soft); padding-top: 14px; }
}
.kp-n {
  font-size: 11px; font-weight: 700; color: var(--paper-2);
  background: var(--navy); width: 18px; height: 18px;
  display: grid; place-items: center; margin-top: 2px;
}
.kp-lead { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.45; }
.kp-body { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }

/* =========================================================================
 *  FIGURE — 그래픽 공통 (제목 · 부제 · 출처/주)
 * ====================================================================== */
.figure { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.figure-sm { margin-top: 38px; }
.fig-title {
  margin: 0; font-size: 17.5px; font-weight: 800; letter-spacing: -0.032em;
  line-height: 1.4; max-width: 62ch;
}
.fig-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; max-width: 72ch; }
.fig-svg { display: block; width: 100%; height: auto; margin: 14px 0 0; overflow: visible; }

.chart-foot {
  margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 2px 24px;
}
.chart-foot p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--ink-3); max-width: 86ch; }
.cf-key {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); margin-right: 7px;
}
.cf-src a { color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.cf-src a:hover { color: var(--navy); text-decoration: none; }

.fig-actions { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }

/* SVG 마크 */
.fig-grid   { stroke: var(--rule-soft); stroke-width: 1; }
.fig-axis   { stroke: var(--baseline, var(--rule)); stroke-width: 1; }
.fig-tick   { fill: var(--ink-4); font-size: 10.5px; font-family: var(--font); }
.fig-area   { fill: var(--series-1); opacity: .10; }
.fig-line   { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; }
.fig-line-hide { display: none; }
.fig-line-proj { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-dasharray: 4 4; opacity: .62; }
.fig-dot      { fill: var(--series-1); stroke: var(--paper); stroke-width: 2; }
.fig-dot-proj { fill: var(--paper); stroke: var(--series-1); stroke-width: 2; }
.fig-cap      { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fig-cap-label{ fill: var(--red); font-size: 10.5px; font-weight: 700; font-family: var(--font); }
.fig-today    { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 3; }
.fig-today-label { fill: var(--ink-4); font-size: 9.5px; font-weight: 700; font-family: var(--font); letter-spacing: .08em; }
.fig-leader   { stroke: var(--ink-4); stroke-width: 1; }
.fig-anchor   { fill: var(--ink); }
.fig-anno     { fill: var(--ink); font-size: 11.5px; font-weight: 600; font-family: var(--font); letter-spacing: -0.02em; }
.fig-end      { fill: var(--series-1); font-size: 15px; font-weight: 800; font-family: var(--font); font-variant-numeric: tabular-nums; }
.fig-end-sub  { fill: var(--ink-3); font-size: 10px; font-family: var(--font); }

/* 범례 */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 12px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.lg-sw { width: 9px; height: 9px; border-radius: 1px; }

/* 스몰 멀티플 */
.sm-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) { .sm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sm-grid { grid-template-columns: 1fr; } }
.sm {
  text-align: left; padding: 13px 18px 15px; border-left: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft); transition: background .12s;
}
.sm:nth-child(4n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
  .sm { border-left: 1px solid var(--rule-soft); padding-left: 18px; }
  .sm:nth-child(4n+1) { border-left: 1px solid var(--rule-soft); padding-left: 18px; }
  .sm:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) { .sm, .sm:nth-child(n) { border-left: 0; padding-left: 0; } }
.sm:hover { background: var(--paper-2); }
.sm.is-sel { background: var(--paper-2); box-shadow: inset 0 -2px 0 var(--navy); }
.sm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sm-name { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.sm.is-sel .sm-name { color: var(--ink); font-weight: 700; }
.sm-val {
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sm.is-sel .sm-val { color: var(--navy); }
.sm-track { height: 9px; background: var(--paper-sunk); }
.sm-bar { display: flex; height: 100%; gap: 1px; }
.sm-seg { display: block; height: 100%; }

/* 표 인라인 바 (WSJ) */
.tbl-bar {
  display: block; height: 3px; background: var(--series-1);
  margin: 4px 0 0 auto; opacity: .55;
}

/* =========================================================================
 *  02. 세율 스택
 * ====================================================================== */
.stack-layout {
  display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0 44px;
  border-top: 1px solid var(--rule); padding-top: 0;
}
@media (max-width: 900px) { .stack-layout { grid-template-columns: 1fr; gap: 24px; } }

.item-list { border-right: 1px solid var(--rule); padding: 8px 28px 8px 0; }
@media (max-width: 900px) {
  .item-list {
    border-right: 0; border-bottom: 1px solid var(--rule);
    padding: 4px 0 6px;
  }
  /* 8개를 2단으로 나란히. 모두 같은 층위임이 드러나야 한다 */
  #itemList { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
}
@media (max-width: 560px) {
  #itemList { grid-template-columns: 1fr; }
}
.item-list-h {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); padding: 6px 0 8px;
}
@media (max-width: 900px) { .item-list-h { padding: 2px 0 6px; } }

.item-btn {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px;
  align-items: baseline; width: 100%; text-align: left;
  padding: 9px 0; border-top: 1px solid var(--rule-soft);
}
@media (max-width: 900px) {
  .item-btn {
    width: 100%; white-space: normal;
    border-left: 0; border-top: 1px solid var(--rule-soft);
    padding: 11px 0;
  }
}
.item-btn .nm { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.item-btn .tt {
  font-family: var(--font); font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.item-btn:hover .nm, .item-btn:hover .tt { color: var(--ink); }
.item-btn[aria-pressed="true"] .nm { color: var(--ink); font-weight: 700; }
.item-btn[aria-pressed="true"] .tt { color: var(--navy); font-weight: 600; }
.item-btn[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--navy); padding-left: 11px; }
@media (max-width: 900px) {
  .item-btn[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--navy); padding-left: 10px; }
}

.stack-panel { min-width: 0; padding: 22px 0 8px; }

.stack-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stack-title h3 {
  font-family: var(--font-display);
  margin: 0; font-size: 23px; font-weight: 900; letter-spacing: -0.04em;
}
.stack-title .hts {
  font-family: var(--font); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3); text-transform: uppercase;
}
.stack-total {
  font-family: var(--font);
  font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.045em;
  margin: 14px 0 3px; font-variant-numeric: tabular-nums lining-nums;
}
.stack-total .unit { font-size: 24px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
.stack-total-cap { font-size: 11.5px; color: var(--ink-3); margin-bottom: 22px; }

/* 스택 막대: 얇은 마크, 2px 지면 간격 */
.bar { display: flex; height: 26px; width: 100%; gap: 2px; }
.bar-seg {
  position: relative; display: grid; place-items: center; min-width: 2px;
  border-radius: 0; transition: opacity .12s;
  color: #fff; font-family: var(--font); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bar-seg:first-child { border-radius: 2px 0 0 2px; }
.bar-seg:last-child  { border-radius: 0 2px 2px 0; }
.bar-seg:hover, .bar-seg:focus-visible { opacity: .82; z-index: 2; }
.bar-seg .in-label { padding: 0 6px; white-space: nowrap; }
.bar-axis {
  display: flex; justify-content: space-between;
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--rule);
  font-family: var(--font); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 층위 목록 = 직접 라벨 */
.layer-rows { margin-top: 22px; border-top: 1px solid var(--rule); }
.layer-row {
  display: grid; grid-template-columns: 9px minmax(0,1fr) auto; gap: 0 12px;
  align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.layer-row.is-zero { color: var(--ink-4); }
.swatch { width: 9px; height: 9px; border-radius: 1px; transform: translateY(-1px); }
.layer-name { font-size: 13.5px; font-weight: 600; }
.layer-row.is-zero .layer-name { font-weight: 400; color: var(--ink-4); }
.layer-auth { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
.layer-rate {
  font-family: var(--font); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.layer-row.is-zero .layer-rate { font-weight: 400; font-size: 11.5px; }

.note-block {
  margin-top: 20px; padding: 14px 0 0; border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.note-block .lede-in {
  font-family: var(--font); font-weight: 700; color: var(--ink);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.note-fine { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }

.table-toggle {
  margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-link);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.table-toggle:hover { color: var(--ink); }

/* ---------- 표 ---------- */
.tbl-wrap { overflow-x: auto; margin-top: 20px; }
table.tbl {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
table.tbl caption {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding-bottom: 9px;
}
table.tbl th, table.tbl td {
  padding: 8px 12px 8px 0; text-align: left; vertical-align: baseline;
  border-bottom: 1px solid var(--rule-soft);
}
table.tbl thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; background: var(--paper-2);
}
table.tbl td.num, table.tbl th.num {
  text-align: right; font-family: var(--font);
  font-variant-numeric: tabular-nums; padding-right: 0;
}
table.tbl tbody tr.is-sel { background: var(--navy-wash); }
table.tbl tbody tr.is-sel td { font-weight: 600; }
table.tbl td.tot { font-weight: 700; border-left: 1px solid var(--rule); padding-left: 12px; }

/* ---------- 툴팁 ---------- */
.tip {
  position: fixed; z-index: 300; pointer-events: none; opacity: 0;
  left: -9999px; top: -9999px;   /* 초기엔 화면 밖 — 가로 스크롤 유발 방지 */
  transform: translate(-50%, -100%) translateY(-9px);
  background: var(--ink); color: var(--paper);
  padding: 8px 11px; font-size: 12px; max-width: 270px;
  transition: opacity .1s;
}
.tip.is-on { opacity: 1; }
.tip .t-name { font-weight: 700; margin-bottom: 1px; }
.tip .t-rate { font-family: var(--font); font-size: 14px; font-weight: 600; }
.tip .t-auth { font-size: 11px; opacity: .72; margin-top: 3px; line-height: 1.45; }

/* =========================================================================
 *  필터 바 (WSJ식 활자 토글)
 * ====================================================================== */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--rule);
}
.filterbar + .filterbar { border-top: 1px solid var(--rule-soft); }
.filter-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); flex-shrink: 0;
  width: 42px;
}
.chips { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chip {
  font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--navy); }
.chip .count {
  font-family: var(--font); font-size: 10px; color: var(--ink-4);
  margin-left: 4px; font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .count { color: var(--navy); }

.search { position: relative; margin-left: auto; flex: 0 1 260px; min-width: 180px; }
.search input {
  width: 100%; padding: 5px 26px 5px 16px; font: inherit; font-size: 12.5px;
  border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  color: var(--ink); border-radius: 0;
}
.search input:focus { outline: none; border-bottom-color: var(--ink); }
.search input::placeholder { color: var(--ink-4); }
.search .icon {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 12px; pointer-events: none;
}
.search .clear {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); width: 18px; height: 18px; display: none; place-items: center;
  font-size: 11px;
}
.search .clear:hover { color: var(--ink); }
.search.has-value .clear { display: grid; }

.bar-actions { margin-left: auto; }
.txt-btn {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-link); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.txt-btn:hover { color: var(--ink); }

/* =========================================================================
 *  03. 타임라인
 * ====================================================================== */
.tl { border-top: 1px solid var(--rule); }
.tl-year {
  display: flex; align-items: baseline; gap: 10px;
  padding: 22px 0 7px; border-bottom: 2px solid var(--ink);
}
.tl-item + .tl-year { margin-top: 10px; }
.tl-year-n {
  font-size: 26px; font-weight: 900; letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl-year-c {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4);
}
.tl-item { border-bottom: 1px solid var(--rule-soft); }
.tl-item.impact-high { border-bottom-color: var(--rule); }

.tl-head {
  display: grid; grid-template-columns: 108px minmax(0,1fr) 16px;
  gap: 0 22px; width: 100%; text-align: left; padding: 17px 0;
  align-items: start;
}
@media (max-width: 660px) {
  .tl-head { grid-template-columns: minmax(0,1fr) 16px; gap: 0 12px; }
  .tl-date-col { grid-column: 1 / -1; margin-bottom: 7px; }
}
.tl-head:hover .tl-title { color: var(--navy); }

.tl-date {
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.tl-item.is-upcoming .tl-date { color: var(--red); }
.tl-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.tag::before { content: "▪ "; color: var(--ink-4); }
.tag.t-301   { color: var(--series-1); }
.tag.t-232   { color: var(--series-5); }
.tag.t-ieepa { color: var(--red); }
.tag.t-122   { color: var(--series-4); }
.tag.t-court { color: var(--navy); }
.tag.t-china { color: var(--series-2); }
.tag.t-deal  { color: var(--series-3); }
.tag.t-up    { color: var(--red); }
.tag.t-301::before   { color: var(--series-1); }
.tag.t-232::before   { color: var(--series-5); }
.tag.t-ieepa::before { color: var(--red); }
.tag.t-122::before   { color: var(--series-4); }
.tag.t-court::before { color: var(--navy); }
.tag.t-china::before { color: var(--series-2); }
.tag.t-deal::before  { color: var(--series-3); }
.tag.t-up::before    { color: var(--red); }

.tl-title {
  font-family: var(--font-display);
  font-size: 17.5px; font-weight: 800; line-height: 1.45; letter-spacing: -0.032em;
  margin: -2px 0 5px; transition: color .12s;
}
.tl-item.impact-high .tl-title { font-size: 19.5px; font-weight: 900; }
.tl-sum { font-size: 13.5px; line-height: 1.66; color: var(--ink-2); margin: 0; max-width: 74ch; }
.tl-chev { color: var(--ink-4); font-size: 10px; margin-top: 6px; transition: transform .16s; }
.tl-item.is-open .tl-chev { transform: rotate(180deg); }

.tl-body { display: none; padding: 0 0 22px; }
.tl-item.is-open .tl-body { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 0 22px; }
@media (max-width: 660px) { .tl-item.is-open .tl-body { grid-template-columns: 1fr; } }
.tl-body-inner { grid-column: 2; }
@media (max-width: 660px) { .tl-body-inner { grid-column: 1; } }

.tl-detail {
  font-family: var(--font);
  font-size: 14.5px; font-weight: 400; line-height: 1.82; color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--navy);
  max-width: 70ch;
}

.srcs-h {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 7px;
}
.tl-srcs { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.src-pill {
  display: inline-grid; grid-template-columns: auto minmax(0,1fr);
  gap: 9px; align-items: baseline; max-width: 100%;
  font-size: 12.5px; color: var(--ink-2); padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.src-pill:hover { color: var(--navy); text-decoration: none; border-bottom-color: var(--rule); }
.src-pill .org {
  font-family: var(--font); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
.src-pill:hover .org { color: var(--navy); }
.src-pill .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-pill .ttl::after { content: " ↗"; font-size: 9px; color: var(--ink-4); }

.empty {
  padding: 46px 0; text-align: center; color: var(--ink-3); font-size: 13.5px;
  border-bottom: 1px solid var(--rule-soft);
}

.tl-more {
  display: block; width: 100%; padding: 16px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-link); border-bottom: 1px solid var(--rule);
}
.tl-more:hover { color: var(--ink); background: var(--paper-rail); }

/* =========================================================================
 *  04-A. 근거 이전 경로 (플로우 다이어그램)
 * ====================================================================== */
.figure-flow { margin-top: 0; padding-top: 0; border-top: 0; }
.figure-flow .fig-title { font-size: 18.5px; }

.flow {
  display: grid;
  grid-template-columns: 1fr 74px 1fr 74px 1fr 74px 1fr;
  align-items: stretch; margin: 20px 0 0;
}
@media (max-width: 1040px) { .flow { grid-template-columns: 1fr; } }

/* 노드 */
.flow-node {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink-4);
  padding: 13px 15px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.flow-node.st-void    { border-top-color: var(--red); }
.flow-node.st-expired { border-top-color: var(--ink-4); }
.flow-node.st-active  { border-top-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.flow-node.st-pending {
  border-style: dashed; border-top-style: solid; border-top-color: var(--series-4);
  background: transparent;
}

.fn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fn-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  padding: 2px 6px; background: var(--paper-sunk); color: var(--ink-2);
}
.st-void    .fn-tag { background: var(--red);      color: #fff; }
.st-active  .fn-tag { background: var(--navy);     color: #fff; }
.st-pending .fn-tag { background: transparent; color: var(--series-4); box-shadow: inset 0 0 0 1px currentColor; }
:root[data-theme="dark"] .st-void .fn-tag,
:root[data-theme="dark"] .st-active .fn-tag { color: #111; }

.fn-period {
  font-size: 10px; color: var(--ink-4); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fn-auth {
  margin: 4px 0 0; font-size: 17px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.2;
}
.st-void .fn-auth    { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.st-expired .fn-auth { color: var(--ink-3); }
.fn-desc { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.fn-rate {
  font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.st-void .fn-rate, .st-expired .fn-rate { color: var(--ink-4); }
.st-active .fn-rate  { color: var(--navy); }
.st-pending .fn-rate { color: var(--series-4); }

.fn-exp {
  margin: 6px 0 0; padding-top: 7px; border-top: 1px solid var(--rule-soft);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}
.fn-exp-k {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 1px;
}
.fn-src {
  margin-top: auto; padding-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-4);
}
.fn-src:hover { color: var(--navy); text-decoration: none; }
.fn-src::after { content: " ↗"; }

/* 연결자 */
.flow-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 0 4px;
}
.fl-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-align: center;
  color: var(--ink-3); line-height: 1.3;
}
.fl-arrow {
  position: relative; width: 100%; height: 1px; background: var(--ink-4);
}
.fl-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px; border-top: 1px solid var(--ink-4); border-right: 1px solid var(--ink-4);
  transform: translateY(-50%) rotate(45deg);
}
.flow-link.tone-critical .fl-label { color: var(--red); }
.flow-link.tone-critical .fl-arrow,
.flow-link.tone-critical .fl-arrow::after { background: var(--red); border-color: var(--red); }
.flow-link.tone-critical .fl-arrow::after { background: transparent; }
.flow-link.tone-pending .fl-label { color: var(--series-4); }
.flow-link.tone-pending .fl-arrow { background: none; border-top: 1px dashed var(--series-4); height: 0; }
.flow-link.tone-pending .fl-arrow::after { border-color: var(--series-4); }

@media (max-width: 1040px) {
  .flow-link { flex-direction: row; gap: 11px; padding: 11px 0; }
  .fl-label { flex-shrink: 0; }
  .fl-arrow { flex: 1; }
}

/* 요컨대 */
.flow-take {
  margin: 20px 0 0; padding: 14px 0 0 16px;
  border-top: 1px solid var(--rule); border-left: 3px solid var(--navy);
  font-size: 14.5px; line-height: 1.75; color: var(--ink); max-width: 84ch;
}
.flow-take-k {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 3px;
}

/* =========================================================================
 *  04. 법적 근거
 * ====================================================================== */
.auth-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
@media (max-width: 980px) { .auth-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .auth-grid { grid-template-columns: 1fr; } }

.auth {
  padding: 22px 24px 24px; border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.auth:nth-child(3n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 980px) {
  .auth { border-left: 1px solid var(--rule); padding-left: 24px; }
  .auth:nth-child(3n+1) { border-left: 1px solid var(--rule); padding-left: 24px; }
  .auth:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .auth, .auth:nth-child(3n+1), .auth:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

.auth-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.auth-head h3 {
  font-family: var(--font-display);
  margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.035em;
}
.badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; white-space: nowrap;
}
.badge.s-active  { background: var(--navy); color: #fff; }
.badge.s-void    { background: var(--red); color: #fff; }
.badge.s-expired { background: var(--paper-sunk); color: var(--ink-3); }
:root[data-theme="dark"] .badge.s-active,
:root[data-theme="dark"] .badge.s-void { color: #111; }

.auth-full {
  font-family: var(--font); font-size: 10.5px; letter-spacing: .03em;
  color: var(--ink-4); margin: -5px 0 0;
}
.auth-one {
  font-family: var(--font); font-size: 14.5px; font-weight: 700; line-height: 1.6;
  letter-spacing: -0.02em; margin: 3px 0 0; color: var(--ink);
}
.auth-body { font-size: 13px; line-height: 1.72; color: var(--ink-2); margin: 0; }
.auth-uses {
  margin: 0; padding: 12px 0 0; list-style: none;
  border-top: 1px solid var(--rule-soft);
}
.auth-uses li {
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
  padding: 4px 0 4px 15px; position: relative;
  font-variant-numeric: tabular-nums;
}
.auth-uses li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: var(--ink-4);
}
.auth .tl-srcs { margin-top: auto; padding-top: 10px; }

/* =========================================================================
 *  05. 워치리스트
 * ====================================================================== */
.watch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
@media (max-width: 980px) { .watch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .watch-grid { grid-template-columns: 1fr; } }

.watch {
  padding: 20px 24px 22px; border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.watch:nth-child(3n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 980px) {
  .watch { border-left: 1px solid var(--rule); padding-left: 24px; }
  .watch:nth-child(3n+1) { border-left: 1px solid var(--rule); padding-left: 24px; }
  .watch:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .watch, .watch:nth-child(3n+1), .watch:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

.watch-when {
  font-family: var(--font); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 7px;
}
.watch-when::before {
  content: ""; width: 20px; height: 2px; background: var(--ink-4); flex-shrink: 0;
}
.watch.tone-critical .watch-when { color: var(--red); }
.watch.tone-critical .watch-when::before { background: var(--red); }
.watch.tone-serious .watch-when::before { background: var(--series-2); }
.watch.tone-warning .watch-when::before { background: var(--series-4); }

.watch h3 {
  font-family: var(--font-display);
  margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.45; letter-spacing: -0.03em;
}
.watch dl { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.watch dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4);
}
.watch dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.watch .tl-srcs { margin-top: auto; padding-top: 8px; }

/* =========================================================================
 *  06. 원문 자료실
 * ====================================================================== */
.src-list { border-top: 1px solid var(--ink); }
.src-row {
  display: grid; grid-template-columns: 96px minmax(0,1fr) 14px;
  gap: 0 22px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft); color: inherit;
}
.src-row:hover { text-decoration: none; background: var(--paper-rail); }
.src-row:hover .src-ttl { color: var(--navy); }
@media (max-width: 660px) {
  .src-row { grid-template-columns: minmax(0,1fr) 14px; gap: 0 12px; }
  .src-meta { grid-column: 1 / -1; margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; }
}
.src-meta { display: flex; flex-direction: column; gap: 3px; }
.src-type {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.src-type.k-관보    { color: var(--series-1); }
.src-type.k-백악관  { color: var(--red); }
.src-type.k-USTR   { color: var(--series-3); }
.src-type.k-법원    { color: var(--navy); }
.src-type.k-중국    { color: var(--series-2); }
.src-type.k-추적    { color: var(--series-5); }
.src-date {
  font-family: var(--font); font-size: 10.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.src-main { min-width: 0; }
.src-ttl {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: -0.025em;
  margin: 0 0 3px; transition: color .12s;
}
.src-org {
  font-family: var(--font); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4); margin-right: 8px;
}
.src-desc { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 84ch; }
.src-go { color: var(--ink-4); font-size: 12px; }
.src-row:hover .src-go { color: var(--navy); }
.src-badge-primary {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: var(--paper); background: var(--ink); padding: 1px 4px;
  margin-left: 7px; vertical-align: 2px; white-space: nowrap;
}

/* =========================================================================
 *  FOOTER
 * ====================================================================== */
.footer {
  margin-top: 70px; padding-top: 20px; padding-bottom: 56px;
  border-top: 3px solid var(--rule-heavy);
  color: var(--ink-3); font-size: 11.5px; line-height: 1.75;
}
.footer p { margin: 0 0 8px; max-width: 92ch; }
.footer code {
  font-family: var(--font); font-size: 10.5px;
  background: var(--paper-sunk); padding: 1px 4px;
}

/* =========================================================================
 *  PRINT
 * ====================================================================== */
@media print {
  .topbar, .theme-toggle, .filterbar, .table-toggle, .tl-more, .tl-chev,
  .item-list, .rail, .fig-actions { display: none !important; }
  body { background: #fff; color: #000; font-size: 9.5pt; }
  .tl-body { display: grid !important; }
  .section { padding-top: 18pt; break-inside: auto; }
  .section-head, .auth, .watch, .tl-item, .src-row, .figure, .kp, .flow-node { break-inside: avoid; }
  .flow { grid-template-columns: 1fr !important; }
  .flow-link { flex-direction: row !important; padding: 8px 0 !important; }
  .sm-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .keypoints { grid-template-columns: 1fr !important; }
  .hero-grid, .stack-layout, .kpis, .auth-grid, .watch-grid { grid-template-columns: 1fr !important; }
  a { color: #000; }
  .src-row::after { content: " " attr(href); font-family: monospace; font-size: 7pt; color: #555; }
  .src-pill .ttl::after { content: " " attr(data-url); font-size: 7pt; color: #555; white-space: normal; }
}