/* 나라 가계부 — 공통 스타일
   방향: 밝고 화려한 시민 계기판(2026-08-21 2차 개편). 숫자는 모노 · 좌측 레일은 그대로다.
   원칙도 그대로다 — 데이터 밀도 우선, 숫자는 tabular-nums. 다만 '보고서 같다'는
   지적을 받아 ① 밝은 쪽을 기본으로 뒤집고 ② 블록(카드·타일·묶음)마다 장식 색을
   입히고 ③ 글자를 한 단씩 키웠다.

   **어두운 쪽이 기본이다**(2026-08-25). 그 팔레트는 아래 [data-theme="dark"] 에 있고
   기본으로 걸린다. 스위치를 끄면 이 :root 의 밝은 쪽이 드러난다. 두 상태뿐이다 — prefers-color-scheme 을
   따르는 세 번째 상태는 두지 않았다. 기본을 정해 둔 이상 '시스템 따름'은
   그 결정을 도로 흐린다.

   **장식 색(--h-*)과 시각화 색(--s*·--seq-*)은 다른 계층이다.** 장식 색은 블록의
   정체(어느 묶음인가)를 말하고, 시각화 색은 데이터를 말한다. 차트 안에 장식 색을
   쓰지 말 것 — 8슬롯·순차·발산 규칙은 개편 대상이 아니다. */

/* 숫자용 모노. 라틴 자소만 자체호스팅한다(3종 45KB).
   한글은 시스템 글꼴로 떨어지므로 '1,243만원' 은 숫자만 모노가 된다 — 의도한 것이다.
   한글까지 웹폰트로 하면 굵기 하나에 1MB를 넘긴다. */
/* 헤드라인용 명조. **고정 문장만** 서브셋한다(tools/build_headfont.py) — 히어로 문장과
   화면 이름(쉬운 말·원래 용어)에 나오는 글자뿐이라 수십 KB 다. 화면 이름을 바꾸면
   서브셋을 다시 만들어야 한다(빠진 글자는 시스템 명조로 떨어져 티가 난다). */
/* Head Serif(제목 명조)는 뺐다(2026-08-24) — 본문이 Pretendard 로 정돈되자
   혼자 이질적으로 읽혔다("이 폰트는 왜 달라?"). 서브셋 파일과 build_headfont.py 는
   남겨 둔다 — 여기서 안 부르므로 내려받지 않는다. */

@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/plex-mono-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/plex-mono-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/plex-mono-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  color-scheme: light;

  /* 바탕을 순백이 아니라 푸른 기 도는 회백으로 두고 카드를 흰색으로 띄운다 —
     흰 종이 위 검은 글자(보고서)로 돌아가지 않기 위한 최소 장치다. */
  --surface-0:#eef1f7;   /* 페이지 바탕 */
  --surface-1:#ffffff;   /* 카드·차트 표면 */
  --surface-2:#e9edf5;   /* 강조 배경 · hover */
  --rail-bg:#ffffff;     /* 레일·상단 띠 */
  --field:#ffffff;       /* 입력칸 */

  --rule:#dde2ec;
  --rule-strong:#c2c9d8;
  --rule-faint:#eaedf4;  /* 표 안쪽 줄처럼 촘촘히 반복되는 괘선 */

  --text-1:#111827;
  --text-2:#465066;
  /* text-3 은 캡션·타일 이름·축 라벨에 쓴다. 흰 카드 위 4.5:1 이상을 지킨다.
     장식용(구분 기호·비활성 표식)만 --text-4 를 쓴다. */
  --text-3:#5f6a80;
  --text-4:#8b94a8;

  --accent:#1264c0;
  --accent-2:#0d4f9c;
  --warn:#8a6100;        /* 주의 · 단서 */
  /* 강조색을 칠한 위에 얹는 글자색. 밝은 쪽 강조색은 짙은 파랑이라 흰색이 읽히고,
     어두운 쪽 강조색은 밝은 하늘색이라 바탕색이 읽힌다 — 방향이 반대라 토큰으로 뺐다. */
  --on-accent:#ffffff;
  --mark-1:#7ba7bd;      /* 표식 왼쪽 막대. 강조색보다 한 단 죽인 값 */

  /* ── 묶음 장식 색 (2026-08-21 2차 개편) ────────────────────
     블록의 정체를 말하는 색이다. 데이터를 말하는 색(--s*·--seq-*)과 계층이 다르며
     **차트 안에는 쓰지 않는다.** 다섯 묶음 = 나라 / 동네 / 씀씀이 / 살림 / 도구. */
  --h-central:#2563eb;   /* 나라 전체 — 파랑 */
  --h-local:#0d9f6e;     /* 우리 동네 — 초록 */
  --h-use:#ea580c;       /* 씀씀이 — 주황 */
  --h-living:#7c3aed;    /* 살림 형편 — 보라 */
  --h-tool:#0891b2;      /* 도구 — 청록 */

  /* ── 시각화 색 (개편 대상 아님) ───────────────────────────
     8슬롯 고정 순서 · 순환 금지 · 순차/발산 용도 구분.
     꾸밈이 아니라 차트가 거짓말하지 않게 하는 규칙이라 검증본 값 그대로다. */
  --pos:#2a78d6;   /* 증액 */
  --neg:#e34948;   /* 감액 */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --s-other:#9a9892;
  --seq-1:#cde2fb; --seq-2:#9ec5f4; --seq-3:#6da7ec; --seq-4:#3987e5;
  --seq-5:#256abf; --seq-6:#184f95; --seq-7:#0d366b;

  /* 간격은 4px 그리드로만 쓴다. 예전에는 6/7/9/10/11/14 가 섞여 있었다. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --gap:16px;          /* 카드 사이 · 그리드 칸 사이 */
  --pad:18px;          /* 카드 안쪽 */
  --edge:28px;         /* 페이지 좌우 여백 */
  --radius:10px;       /* 계기판의 3px 에서 올렸다 — 각진 모서리가 '보고서'의 절반이었다 */
  --radius-s:6px;      /* 단추·입력칸·배지 등 작은 것 */
  --rail-w:236px;
  --top-h:48px;
  /* 카드 그림자. 어두운 쪽은 테두리가 일하므로 거의 없앤다 */
  --card-sh:0 1px 2px rgba(15,23,42,.05),0 4px 16px rgba(15,23,42,.06);
  --card-sh-up:0 2px 4px rgba(15,23,42,.06),0 10px 28px rgba(15,23,42,.10);

  /* 히어로 패널 — 그라데이션 금지 목록에 걸리지 않는 **단색** 컬러 블록.
     밝은 쪽은 진한 남색 패널에 흰 글자, 어두운 쪽은 바탕보다 한 단 밝은 남색. */
  --panel-bg:#16335f;
  --panel-ink:#ffffff;
  --panel-sub:rgba(255,255,255,.76);
  --panel-num:#bfdcff;

  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:'Pretendard Variable',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}

/* 어두운 쪽. 상단 띠의 스위치가 <html data-theme="dark"> 를 걸어 켠다.
   여기서 다시 정의하는 것은 **색뿐이다** — 간격·글꼴·크기를 여기 넣으면
   두 테마의 배치가 갈라져 한쪽만 고치는 일이 생긴다. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-0:#0b0c0e; --surface-1:#101216; --surface-2:#191c21;
  --rail-bg:#0e1013; --field:#131519;
  --rule:#23272e; --rule-strong:#2b3038; --rule-faint:#191c21;
  --text-1:#eceef1; --text-2:#9aa2ab; --text-3:#7b838c; --text-4:#5b636b;
  --accent:#56b5e0; --accent-2:#8ccdec; --warn:#d9a441;
  --on-accent:#0b0c0e; --mark-1:#3f7f9c;
  --h-central:#5b9cf6; --h-local:#34d399; --h-use:#fb923c;
  --h-living:#a78bfa; --h-tool:#22d3ee;
  --pos:#3987e5; --neg:#e66767;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --s-other:#6b6a65;
  --seq-1:#0d366b; --seq-2:#184f95; --seq-3:#256abf; --seq-4:#3987e5;
  --seq-5:#6da7ec; --seq-6:#9ec5f4; --seq-7:#cde2fb;
  --card-sh:none;
  --card-sh-up:0 0 0 1px var(--rule-strong);
  --panel-bg:#152a4e; --panel-ink:#f2f6fc;
  --panel-sub:rgba(242,246,252,.72); --panel-num:#9ec5f4;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  /* 배경 색 번짐(radial gradient 두 장)을 깔았다가 걷어냈다(2026-08-21 저녁 되먹임) —
     그라데이션 장식은 'AI 가 만든 사이트'로 읽힌다. 바탕은 푸른 회백 단색으로 충분하다. */
  background:var(--surface-0);
  color:var(--text-1);
  font-family:var(--sans);
  /* 13.5 → 15. "폰트를 키워 가독성을 높여 달라"(2026-08-21). 아래 개별 크기도
     전부 한 단씩 따라 올랐다 — 위계(제목 > 본문 > 부제)는 그대로다. */
  font-size:15px; line-height:1.65;
  /* 무게감 한 단(2026-08-24) — 가변 폰트라 460 이 된다. 근거 없는 굵기 남발 대신
     본문 전체를 반 단 눌러 앉히고 위계는 그대로 둔다. */
  font-weight:460;
  -webkit-font-smoothing:antialiased;
  /* 한글은 어절 단위로 끊는다. 기본값(break-all 에 가까운 동작)으로 두면
     '봅니다'가 '봅니 / 다'로 갈린다 — 글자는 다 있는데 읽는 속도가 떨어진다. */
  word-break:keep-all;
  overflow-wrap:break-word;   /* 다만 끊을 데 없는 긴 이름은 넘치지 않게 풀어 준다 */
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
      background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 묶음 색 ────────────────────────────────────────────
   레일 묶음·갈래 카드가 자기 묶음의 장식 색을 --gh 로 받는다.
   클래스는 _head.php(레일)와 home.php(갈래 고르기)가 Home::$NAV 의 키로 붙인다. */
.g-central{--gh:var(--h-central)}
.g-local{--gh:var(--h-local)}
.g-use{--gh:var(--h-use)}
.g-living{--gh:var(--h-living)}
.g-tool{--gh:var(--h-tool)}

/* ── 껍데기 ─────────────────────────────────────────────
   레일 + 본문 두 칸. 레일은 화면에 붙어 있고 본문만 스크롤한다. */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.col{min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* ── 좌측 레일 ──────────────────────────────────────────
   2단 가로 탭이던 것을 세로로 세웠다. 가로 탭은 한 군이 7개를 넘으면
   데스크톱 폭 한계(939px)에 닿았고, 화면을 더 못 늘렸다. */
.rail{
  background:var(--rail-bg);border-right:1px solid var(--rule);
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 0 28px;scrollbar-width:thin
}
.rail::-webkit-scrollbar{width:7px}
.rail::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:4px}

.brand{
  display:flex;align-items:center;gap:9px;padding:2px var(--pad) 14px;
  color:var(--text-1);font-size:15px;font-weight:700;letter-spacing:-.025em
}
.brand:hover{text-decoration:none;color:var(--text-1)}
/* 표식은 예산 세 해를 세운 막대다. 가운데가 강조색, 오른쪽이 주의색 */
.brand .mark rect:nth-child(1){fill:var(--mark-1)}
.brand .mark rect:nth-child(2){fill:var(--accent)}
.brand .mark rect:nth-child(3){fill:var(--warn)}

/* ── 찾기 상자 ──────────────────────────────────────────
   레일 안에 둔다. 결과는 띄우지 않고 **화면 목록 자리를 대신 차지한다** —
   레일은 이미 스크롤 영역이라 위에 띄우면 모바일 서랍에서 잘리고,
   목록과 결과를 동시에 볼 이유도 없다. */
.find{position:relative;margin:0 10px 10px;display:flex;align-items:center}
.find-i{position:absolute;left:9px;color:var(--text-4);fill:none;
        stroke:currentColor;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.find-q{
  width:100%;font:inherit;font-size:13.5px;color:var(--text-1);
  padding:6px 9px 6px 27px;background:var(--field);
  border:1px solid var(--rule);border-radius:var(--radius);
  -webkit-appearance:none;appearance:none
}
.find-q::placeholder{color:var(--text-4)}
.find-q:focus{border-color:var(--rule-strong);outline:2px solid var(--accent);outline-offset:1px}
/* 사파리·크롬이 붙이는 지우기 단추는 우리 X 와 겹친다 */
.find-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.find-out{padding:0 10px 8px}
.find-out .g{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-3);
  padding:10px 8px 4px;border-top:1px solid var(--rule);margin-top:6px
}
.find-out>.g:first-child{margin-top:0;border-top:0;padding-top:2px}
.find-out a{
  display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:var(--radius-s);
  font-size:13.5px;color:var(--text-2);line-height:1.45;border-left:2px solid transparent
}
.find-out a .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 어느 시도의 '중구'인지는 이 칸이 말한다 — 같은 이름이 여섯 곳까지 있다. */
.find-out a .mt{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--text-4)}
.find-out a:hover,.find-out a.on{
  background:var(--surface-2);color:var(--text-1);text-decoration:none
}
.find-out a:hover .mt,.find-out a.on .mt{color:var(--text-3)}
/* 찾은 글자를 굵게. 어느 글자 때문에 걸렸는지 안 보이면 목록이 무작위로 읽힌다. */
.find-out mark{background:none;color:var(--accent);font-weight:600}
.find-none{padding:10px 8px;font-size:13px;color:var(--text-3);line-height:1.6}
body.finding .rail-nav,body.finding .rail-ft{display:none}

.rail-nav{padding:0 10px}
/* 묶음 이름. 화면 이름과 같은 크기로 두면 어느 쪽이 상위인지 안 보인다
   → 작게 · 자간을 벌려 · 위에 괘선. 2단 탭에서 두 줄의 생김새를 다르게 둔 것과 같은 이유다. */
.rail-g{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-3);
  padding:12px 8px 5px;margin-top:6px;border-top:1px solid var(--rule)
}
/* 묶음마다 자기 색 점을 단다 — 목차가 다섯 덩어리라는 것이 색으로 먼저 보인다 */
.rail-g::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
                margin-right:7px;vertical-align:1px;background:var(--gh,var(--text-4))}
.rail-nav>.rail-g:first-child{margin-top:0;border-top:0;padding-top:4px}
.rail-nav a{
  display:block;padding:6px 9px;border-radius:var(--radius-s);
  font-size:14px;color:var(--text-2);line-height:1.45;
  border-left:2px solid transparent
}
.rail-nav a:hover{background:var(--surface-2);color:var(--text-1);text-decoration:none}
/* 켜진 항목은 묶음 색 물들임 + 굵기로 알린다. 왼쪽 색 막대는 달았다가 뗐다
   (2026-08-21 저녁) — 카드 띠와 함께 'AI 클리셰'로 지목된 요소다.
   border-left 자리 자체는 남겨 둔다(hover/on 에서 폭이 흔들리지 않게). */
.rail-nav a.on{
  background:color-mix(in srgb,var(--gh,var(--accent)) 12%,transparent);
  color:var(--text-1);font-weight:600
}
.rail-ft{
  padding:18px var(--pad) 0;margin:16px 10px 0;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.6;color:var(--text-4)
}

/* ── 상단 띠 ────────────────────────────────────────────
   '지금 어디에 있나'와 말 전환만 둔다. 서비스 이름은 레일에 있으므로
   데스크톱에서는 여기 다시 적지 않는다. */
.topbar{
  position:sticky;top:0;z-index:30;height:var(--top-h);
  display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--edge);
  background:color-mix(in srgb,var(--rail-bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)
}
.where{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-3);min-width:0}
.where i{font-style:normal;color:var(--text-4)}
.where b{color:var(--text-1);font-weight:600;font-size:13.5px;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-brand{display:none;font-weight:700;font-size:15px;color:var(--text-1);letter-spacing:-.025em;
              min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-brand:hover{text-decoration:none}

/* 찾기로 고른 동네. 지역·살림 화면을 옮겨 다녀도 링크에 붙어 따라온다 —
   그 사실을 여기서 보여 주지 않으면 표가 왜 그 동네를 집어 주는지 알 수 없다. */
/* **[hidden] 을 display 로 덮으면 안 된다.** 브라우저 기본 스타일의 [hidden]{display:none}
   은 특정도가 0 이라 아래 .pickedu 의 inline-flex 에 밀린다 — 빈 칩이 늘 떠 있었다.
   display 를 주는 규칙 옆에는 [hidden] 을 같이 적는다. */
.pickedu[hidden]{display:none}
.pickedu{display:inline-flex;align-items:center;gap:6px;
         /* **줄지 않는 칸으로 두면 안 된다.** flex:0 0 auto 로 뒀더니 390px 에서
            햄버거 단추가 32→14px 로 뭉개졌다(칩만 159px 를 그대로 쥐고 있었다).
            줄어드는 쪽은 이 칩이고, 단추는 줄지 않는다. */
         flex:0 1 auto;min-width:0;
         padding:2px 4px 2px 8px;border:1px solid var(--rule-strong);
         border-radius:var(--radius-s);background:var(--surface-2);font-size:12.5px}
.pickedu .k{color:var(--text-3);white-space:nowrap}
.pickedu b{color:var(--text-1);font-weight:600;
           min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickedu button{border:0;background:none;font:inherit;font-size:14px;line-height:1;
                color:var(--text-3);cursor:pointer;padding:1px 4px}
.pickedu button:hover{color:var(--text-1)}

/* 레일 여는 버튼 — 모바일에서만 보인다 */
.rail-btn{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  /* 브라우저 기본 스타일이 button 에 align-items:center 를 걸어 둔다.
     그대로 두면 빈 span 셋이 폭 0 이 되어 줄이 아예 안 그려진다. */
  align-items:stretch;
  flex:0 0 auto;                       /* 옆 칸이 밀려도 단추 크기는 지킨다 */
  width:32px;height:30px;padding:0 6px;cursor:pointer;
  background:none;border:1px solid var(--rule);border-radius:var(--radius)
}
.rail-btn span{display:block;width:100%;height:1.5px;background:var(--text-2);border-radius:1px}
.rail-veil{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60}

/* 말 전환.
   쉬운 말로 덮기만 하면 정부 공시 자료에서 같은 숫자를 찾으려는 사람이 길을 잃는다.
   원래 용어를 지우지 않고 data-term 에 담아 두고, 이 스위치가 다시 앞에 세운다. */
.wordsw{margin-left:auto;display:inline-flex;border:1px solid var(--rule-strong);
        border-radius:var(--radius);overflow:hidden;flex:0 0 auto}
.wordsw button{
  border:0;background:var(--rail-bg);color:var(--text-2);font:inherit;font-size:12.5px;
  padding:4px 10px;cursor:pointer;border-left:1px solid var(--rule-strong)
}
.wordsw button:first-child{border-left:0}
.wordsw button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.wordsw button:hover:not(.on){background:var(--surface-2);color:var(--text-1)}

/* 밝은/어두운 화면 전환.
   말 전환처럼 두 칸짜리 스위치로 두면 상단 띠가 좁은 화면에서 넘친다
   → 아이콘 한 칸으로 두고, 지금 상태가 아니라 **누르면 될 상태**를 그린다
     (밝은 화면이면 달을 그린다 — 누르면 어두워진다는 뜻이다).
   아이콘만 있는 단추라 이름은 aria-label 에 있고 shell.js 가 상태에 맞춰 바꾼다. */
.themesw{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:24px;padding:0;cursor:pointer;
  background:var(--rail-bg);color:var(--text-2);
  border:1px solid var(--rule-strong);border-radius:var(--radius)
}
.themesw:hover{background:var(--surface-2);color:var(--text-1)}
.themesw svg{display:block;width:14px;height:14px;fill:none;
             stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* 두 아이콘을 다 넣어 두고 테마가 하나를 고른다. JS 가 마크업을 갈아 끼우면
   전환 순간에 아이콘이 사라졌다 나타난다. */
.themesw .sun{display:none}
:root[data-theme="dark"] .themesw .sun{display:block}
:root[data-theme="dark"] .themesw .moon{display:none}


.wrap{max-width:1260px;margin:0 auto;padding:var(--sp-5) var(--edge) 64px;width:100%;flex:1}

/* ── 도입부 한 줄 ───────────────────────────────────────
   페이지의 유일한 h1. 제목과 문장을 한 줄에 두어 첫 카드를 아래로 밀지 않는다.
   길이를 78ch 로 묶은 것은 넓은 화면에서 한 줄이 끝까지 늘어지면
   눈이 다음 줄 첫 글자를 못 찾기 때문이다. */
.lead{margin:0 0 var(--sp-5);max-width:78ch;
      font-size:15px;font-weight:400;line-height:1.7;color:var(--text-2)}
.lead b{font-size:24px;font-weight:800;color:var(--text-1);letter-spacing:-.02em;margin-right:10px}
/* 원래 용어. 쉬운 이름 옆에 작게 붙여 둔다 — 이 줄이 [쉬운 말/원래 용어] 두 층의
   가장 짧은 형태다. 여기까지 지우면 공시 자료와 이어지지 않는다. */
.lead .term{
  font-style:normal;font-size:12px;color:var(--text-3);font-family:var(--mono);
  border:1px solid var(--rule);border-radius:var(--radius);padding:1px 6px;
  margin-right:10px;vertical-align:2px;white-space:nowrap
}


/* ── 첫 화면 히어로 ─────────────────────────────────────
   '조'가 아니라 '한 사람 몫'을 세운다. 1,615조는 아무도 실감하지 못한다.
   왼쪽이 말, 오른쪽이 스무 해 그래프다. 좁아지면 위아래로 쌓인다. */
.hero{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);
      gap:44px;align-items:start;margin:8px 0 40px}
.hero h1{margin:0;font-size:35px;font-weight:800;letter-spacing:-.03em;line-height:1.4;color:var(--text-1)}
.hero-box{margin-top:22px;padding:22px 24px;border-radius:var(--radius);
          /* 옅은 물들임 상자로는 시선이 앉을 데가 없었다("아직 밍밍하다") →
             **단색 남색 패널**로 세운다. 그라데이션 금지 목록과 충돌하지 않는
             플랫 컬러 블로킹이고, 첫 화면의 유일한 진한 덩어리라 위계가 선다. */
          background:var(--panel-bg);
          border:0;
          box-shadow:var(--card-sh)}
.hero-box .k{font-size:13.5px;color:var(--panel-sub)}
.hero-box .k b{color:var(--panel-ink);font-weight:600}
.hero-box .v{margin-top:8px;display:flex;align-items:baseline;gap:6px;
             font-family:var(--mono);font-variant-numeric:tabular-nums;
             /* 그라데이션 글자로 했다가 단색으로 — AI 클리셰 지적. 남색 패널 위라
                밝은 하늘색 모노 숫자가 계기판처럼 선다. */
             font-size:56px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--panel-num)}
.hero-box .v em{font-family:var(--sans);font-style:normal;font-size:21px;
                font-weight:600;color:var(--panel-ink);letter-spacing:0}
.hero-box .d{margin-top:12px;font-size:13px;line-height:1.65;color:var(--panel-sub)}
.hero-box .d .num{color:var(--panel-ink)}
/* 그 한 사람 몫이 어디로 갔나.
   히어로 왼쪽 칸이 오른쪽 그래프보다 148~345px 짧아 아래가 비어 있었다.
   빈자리를 여백으로 두는 대신 **h1 이 던진 질문에 그 자리에서 답하게** 했다.
   기준은 큰 숫자와 같다(총지출 결산) — 더하면 1,243만원이 된다. */
.hero-mix{margin-top:22px}
.hero-mix-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
             font-size:14px;font-weight:600;color:var(--text-1);
             padding-bottom:6px;border-bottom:1px solid var(--rule)}
.hero-mix-hd b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--accent)}
.hero-mix-hd .sub{margin-left:auto;font-weight:400;font-size:12px;color:var(--text-3)}
.hero-mix ul{list-style:none;margin:0;padding:0}
/* 이름 · 막대 · 값 · 단위. 이름 칸만 남는 폭을 먹고, 긴 이름은 말줄임한다
   ('산업·중소기업및에너지'가 430px 칸에서 두 줄이 되면 줄 높이가 들쭉날쭉해진다). */
.hero-mix li{display:grid;grid-template-columns:minmax(0,1fr) 72px 68px;
             align-items:center;gap:9px;padding:5px 0;font-size:14px;
             border-top:1px solid var(--rule-faint)}
.hero-mix li:first-child{border-top:0}
.hero-mix .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.hero-mix li.rest .n{color:var(--text-3)}
.hero-mix i{display:block;height:6px;background:var(--surface-2);border-radius:1px}
.hero-mix i span{display:block;height:100%;border-radius:1px}
/* 숫자는 오른쪽 끝을 맞춘다 — 54 와 429 가 왼쪽 맞춤이면 자릿수가 안 보인다 */
.hero-mix li>b{font-family:var(--mono);font-variant-numeric:tabular-nums;
               font-weight:600;color:var(--text-1);text-align:right}
.hero-mix small{font-family:var(--sans);font-size:12px;font-weight:400;
                color:var(--text-3);margin-left:3px}

.hero-lead{margin:16px 0 0;font-size:15.5px;line-height:1.8;color:var(--text-2)}
.hero-lead b{color:var(--text-1);font-weight:600}
.hero-cta{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}
.btn{padding:11px 20px;border:1px solid var(--rule-strong);border-radius:var(--radius-s);
     font-size:14.5px;color:var(--text-2)}
.btn:hover{background:var(--surface-2);color:var(--text-1);text-decoration:none}
.btn-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn-on:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}

/* 히어로의 차트는 카드에 넣지 않는다. 테두리를 두르면 히어로가 두 덩어리로 갈린다. */
.hero-chart-hd{display:flex;align-items:baseline;justify-content:space-between;
               gap:12px;flex-wrap:wrap;margin-bottom:10px}
.hero-chart-hd h2{margin:0;font-size:17.5px;font-weight:600;letter-spacing:-.025em}
.hero-chart-hd .sub{font-size:13px;color:var(--text-3)}
.hero-chart .hist{border:1px solid var(--rule);border-radius:var(--radius);margin-top:12px}

/* ── 갈래 고르기 ────────────────────────────────────────
   레일에도 같은 목록이 있지만 레일은 '목차'로만 읽힌다.
   여기서는 묶음마다 한 줄 설명을 붙여 무엇을 고르는 것인지 알린다. */
.pick{margin-bottom:var(--sp-6)}
.pick-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
         padding-bottom:14px;border-bottom:1px solid var(--rule)}
.pick-hd h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pick-hd span{font-size:13px;color:var(--text-3)}
.pick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
           background:var(--rule);border:1px solid var(--rule);border-top:0}
.pick-c{display:block;background:var(--surface-1);padding:20px 18px 18px;color:var(--text-2);
        transition:background .15s ease,transform .15s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .pick-c:hover{transform:translateY(-2px)}
}
.pick-c:hover{background:color-mix(in srgb,var(--gh,var(--accent)) 7%,var(--surface-1));text-decoration:none}
/* 아이콘을 묶음 색 칩에 앉힌다 — 다섯 갈래가 색으로 먼저 갈린다 */
.pick-c .ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
             background:color-mix(in srgb,var(--gh,var(--accent)) 14%,transparent);
             color:var(--gh,var(--accent))}
.pick-c svg{display:block}
.pick-c .ls span::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
             margin-right:7px;vertical-align:2px;background:color-mix(in srgb,var(--gh,var(--accent)) 55%,transparent)}
.pick-c .nm{font-size:16px;font-weight:600;margin-top:12px;
            letter-spacing:-.02em;color:var(--text-1)}
.pick-c .ds{font-size:13px;color:var(--text-3);margin-top:6px;line-height:1.6;min-height:2lh}
.pick-c .ls{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.pick-c .ls span{font-size:13px;color:var(--text-2)}
.pick-c:hover .ls span{color:var(--text-1)}

/* ── 카드 ───────────────────────────────────────────────
   제목 15.5 > 본문 13.5 > 부제 12. 제목이 본문보다 작으면
   페이지 전체가 한 덩어리로 평평하게 보인다. */
.card{background:var(--surface-1);border:1px solid var(--rule);
      border-radius:var(--radius);margin-bottom:var(--gap);
      box-shadow:var(--card-sh);transition:box-shadow .18s ease}
@media(hover:hover){.card:hover{box-shadow:var(--card-sh-up)}}
/* 블록마다 다른 색 — 다섯 장식 색을 nth-of-type 으로 순환한다(데이터와 무관한 장식).
   **카드 윗머리 3px 그라데이션 띠는 달았다가 뗐다**(2026-08-21 저녁 되먹임) —
   '색→투명' 띠는 요즘 AI 생성 사이트의 클리셰라 사용자가 콕 집어 뺐다.
   순환 변수는 남긴다 — 카드 머리 4%·캡션 3% 물들임이 쓴다. */
.card{--ch:var(--h-central)}
.card:nth-of-type(5n+2){--ch:var(--h-local)}
.card:nth-of-type(5n+3){--ch:var(--h-use)}
.card:nth-of-type(5n+4){--ch:var(--h-living)}
.card:nth-of-type(5n){--ch:var(--h-tool)}
.card-hd{padding:var(--sp-3) var(--pad);border-bottom:1px solid var(--rule);
         background:color-mix(in srgb,var(--ch,var(--accent)) 4%,transparent);
         display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card-hd h2{margin:0;font-size:17.5px;font-weight:680;letter-spacing:-.025em;line-height:1.3}
.card-hd .sub{font-size:13px;color:var(--text-3);line-height:1.45}
.card-hd .tools{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card-bd{padding:var(--pad)}
/* 여백 없이 붙는 것(타일·소형다중·표)은 카드 모서리 안쪽으로 잘라 준다.
   overflow 는 여기에만 건다 — .card 에 걸면 표의 sticky th 가 붙을 스크롤 조상을 잃는다. */
.card-bd.tight{padding:0;overflow:hidden;border-radius:var(--radius)}
.card-hd + .card-bd.tight{border-radius:0 0 var(--radius) var(--radius)}

.grid{display:grid;gap:var(--gap)}
.grid>*{min-width:0}   /* 없으면 안쪽 표 폭만큼 칸이 부풀어 페이지가 가로로 넘친다 */
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:2fr 1fr}
@media(max-width:1000px){.g2,.g3{grid-template-columns:1fr}}

/* ── 컨트롤 ─────────────────────────────────────────────── */
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:var(--radius);overflow:hidden}
.seg button{
  border:0;background:var(--surface-1);color:var(--text-2);font:inherit;font-size:12.5px;
  padding:4px 10px;cursor:pointer;border-right:1px solid var(--rule)
}
.seg button:last-child{border-right:0}
/* 칠한 배경 위 글자는 --on-accent 다. 어두운 쪽에서는 바탕색, 밝은 쪽에서는 흰색이다. */
.seg button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.seg button:hover:not(.on){background:var(--surface-2);color:var(--text-1)}
select.ctl{
  font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--rule-strong);
  border-radius:var(--radius);background:var(--field);color:var(--text-1)
}

/* ── 스탯 타일 ──────────────────────────────────────────
   계기판의 눈금이다. 숫자는 모노 · 이름과 단서는 작게. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.tiles.t3{grid-template-columns:repeat(3,1fr)}   /* 3개짜리 묶음 — 빈 칸이 남지 않게 */
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
/* 타일도 다섯 색을 순환한다. **숫자는 물들이지 않는다** — +·− 가 있는 값에
   장식 색이 얹히면 부호로 읽힌다. 색은 **이름까지만** — 윗머리 색 바도 달았다가
   뗐다(카드 띠와 같은 클리셰 지적). */
.tile{--th:var(--h-central)}
.tile:nth-child(5n+2){--th:var(--h-local)}
.tile:nth-child(5n+3){--th:var(--h-use)}
.tile:nth-child(5n+4){--th:var(--h-living)}
.tile:nth-child(5n){--th:var(--h-tool)}
.tile{background:color-mix(in srgb,var(--th) 7%,var(--surface-1));padding:var(--pad) 18px}
.tile .k{font-size:12.5px;color:color-mix(in srgb,var(--th) 72%,var(--text-1));
          font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
         font-size:29px;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--text-1)}
.tile .v small{font-family:var(--sans);font-size:13.5px;font-weight:500;
               color:var(--text-2);margin-left:var(--sp-1);letter-spacing:0}
.tile .d{font-size:12.5px;color:var(--text-3);margin-top:7px;line-height:1.45}

/* ── 차트 ───────────────────────────────────────────────── */
.chart{width:100%}
/* 3D 지형의 HTML 범례. [hidden] 을 display 로 덮으면 안 된다 — 옆에 같이 적는다. */
/* 칸이 많아 좁은 화면에서 눌리는 차트는 표처럼 가로 스크롤로 둔다 */
.chart-scroll{overflow-x:auto}
.chart-scroll>.chart{min-width:760px}
.scroll-hint{display:none}
.spark-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
/* 칸 수를 항목 수에 맞춘다. 안 맞으면 빈 칸에 배경(--rule)이 드러나 회색 판이 된다. */
.spark-grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.spark-grid.c3{grid-template-columns:1fr}}
@media(max-width:1000px){.spark-grid{grid-template-columns:repeat(2,1fr)}}
.spark{background:var(--surface-1);padding:10px 12px 4px}
/* 찾기로 온 분야·부문·소관의 칸 */
.spark.pin{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.spark.pin .nm{color:var(--text-1)}
.spark .nm{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.spark .nm em{font-style:normal;color:var(--text-2);font-weight:500;
              font-family:var(--mono);font-variant-numeric:tabular-nums}
.spark .mt{font-size:11.5px;color:var(--text-3);margin-bottom:2px}
.spark .c{height:52px}

/* ── 표 ─────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th,table.tbl td{padding:6px 10px;border-bottom:1px solid var(--rule-faint);
                          text-align:left;white-space:nowrap}
table.tbl th{
  color:var(--text-3);font-weight:600;font-size:11.5px;letter-spacing:.03em;
  position:sticky;top:0;background:var(--surface-1);border-bottom:1px solid var(--rule-strong)
}
table.tbl td.r,table.tbl th.r{text-align:right}
table.tbl td.r{font-family:var(--mono);font-variant-numeric:tabular-nums}
table.tbl tbody tr:hover{background:var(--surface-2)}
/* 찾기로 고른 동네의 줄. 표는 어디서나 상위 25개만 그리므로 26등 아래는
   맨 끝에 따로 붙는다 — 그때도 이 표시로 '순위가 아니라 덧붙인 줄'임을 알린다. */
table.tbl tbody tr.pin>td{background:var(--surface-2);box-shadow:inset 0 0 0 9999px transparent}
table.tbl tbody tr.pin>td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
table.tbl tbody tr.pin>td{color:var(--text-1);font-weight:600}
table.tbl tbody tr.pin.add>td{border-top:1px solid var(--rule-strong)}
table.tbl td.nm{white-space:normal;min-width:220px}
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.hide{display:none}

/* ── 캡션 ───────────────────────────────────────────────
   차트가 왜 그렇게 생겼는지 적어 두는 곳이라 사실상 본문이다.

   **캡션은 두 단이다** — ul 앞의 문단이 '핵심'(이 차트가 말하는 것),
   ul 이 '주석'(그렇게 읽어야 하는 이유·단서·경고)이다.

   핵심을 본문 색(--text-1)으로 올린 것은 카드 제목 15.5 > 핵심 13 >
   주석 12 > 부제 12 순서를 만들기 위한 것이다.

   `.hist ul:first-child` 로 예외를 두려다 되레 깨뜨릴 뻔했다. CSS 의 :first-child 는
   텍스트 노드를 세지 않으므로 '핵심 문단 + <ul>' 인 캡션에서도 그 ul 이 first-child 다.
   실측 결과 캡션 132개 전부에 핵심 문단이 있고 ul 이 둘인 캡션은 없다
   — 예외 자체가 필요 없었다(도구: tools/audit_caption.mjs). */
.hist{font-size:14.5px;line-height:1.7;color:var(--text-1);
      border-top:1px solid var(--rule);padding:var(--sp-3) var(--pad);
      background:color-mix(in srgb,var(--ch,var(--accent)) 3%,var(--surface-1));
      border-radius:0 0 var(--radius) var(--radius)}
.hist b{color:var(--text-1);font-weight:600}
.hist ul{margin:var(--sp-3) 0 0;padding:10px 0 0 17px;
         border-top:1px solid var(--rule-faint);
         font-size:13.5px;line-height:1.65;color:var(--text-2)}
.hist li{margin-bottom:var(--sp-1)}
.hist li:last-child{margin-bottom:0}
.hist li::marker{color:var(--text-4)}
.hist .rel{
  display:inline-block;font-size:10.5px;font-family:var(--mono);padding:1px 5px;border-radius:2px;
  background:var(--surface-2);border:1px solid var(--rule);color:var(--text-2);margin-right:6px
}
.hist .rel.merge,.hist .rel.split,.hist .rel.reuse,
.hist .rel.restructure{border-color:var(--rule-strong);color:var(--text-1);font-weight:600}

/* ── 브레드크럼 ─────────────────────────────────────────── */
.crumb{font-size:13.5px;color:var(--text-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumb button{border:0;background:none;font:inherit;color:var(--accent);cursor:pointer;padding:0}
.crumb button:hover{text-decoration:underline}
.crumb i{font-style:normal;color:var(--text-4)}

/* ── 푸터 ───────────────────────────────────────────────── */
.ft{border-top:1px solid var(--rule);padding:var(--sp-5) var(--edge);
    font-size:12.5px;line-height:1.6;color:var(--text-4);background:var(--rail-bg)}
.ft-in{max-width:1260px;margin:0 auto;display:flex;gap:var(--sp-5);flex-wrap:wrap}
.ft b{color:var(--text-3);font-weight:600}
.ft-note{max-width:1260px;margin:var(--sp-3) auto 0;padding:0}


/* 다섯 칸이 좁아지는 구간 — 셋 + 둘로 접는다 */
@media (max-width:1240px){
  .pick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* **사이트에서 유일하게 두 칸 레이아웃 안에 든 스탯 타일**(/fiscal 국세·지방세).
     칸 하나가 131px 까지 좁아지는데 27px 숫자의 최소 폭이 136px 이라 3px 넘쳤다
     — 스윕이 1100px 에서만 잡아낸 것은 1000px 이하에서 .g2 가 한 칸으로 접히기
     때문이다(그 사이 구간이 가장 좁다). 여기서는 한 칸으로 세운다.
     **두 칸은 쓰지 않는다** — 셋을 두 칸에 넣으면 남는 칸에 괘선 바탕이 드러난다. */
  .grid.g2 .tiles.t3{grid-template-columns:1fr}
}
/* 히어로가 한 칸으로 접히는 폭. **1100 에서 1200 으로 올렸다** — 1101~1200px 에서는
   오른쪽 캡션이 좁은 칸 안에서 여러 줄로 불어 두 칸의 높이 차가 345px 까지 벌어졌다.
   두 칸을 유지하는 구간을 그 위로 올리면 차이가 크게 줄어든다. */
@media (max-width:1200px){
  .hero{grid-template-columns:1fr;gap:28px}
}

/* ── 좁은 화면 ───────────────────────────────────────────
   레일을 화면 밖으로 빼고 버튼으로 밀어 넣는다.
   메뉴를 늘릴 때마다 이 폭에서 다시 볼 것. */
@media (max-width:980px){
  .shell{display:block}
  .rail{
    position:fixed;top:0;left:0;bottom:0;width:262px;height:100%;z-index:70;
    transform:translateX(-101%);transition:transform .18s ease;
    box-shadow:0 0 0 1px var(--rule)
  }
  body.nav-open .rail{transform:none}
  .rail-btn{display:flex}
  .topbar-brand{display:inline}
  .where{display:none}
  .topbar{padding:0 14px;gap:10px}


  .wrap{padding:14px 14px 48px}
  .grid{gap:12px}
  .card{margin-bottom:12px}

  /* 좁은 화면에서 도입부는 두세 줄이 된다. 제목이 첫 줄을 혼자 쓰게 두면
     문장까지 넉 줄이 되어 차트가 화면 밖으로 밀린다 → 붙여 흘린다. */
  .lead{margin-bottom:var(--sp-4);font-size:14px}
  .lead b{font-size:19px;margin-right:7px}

  .card-hd{padding:var(--sp-3) 14px;gap:6px}
  .card-hd h2{font-size:16px}
  .card-hd .tools{margin-left:0;width:100%}
  .card-bd{padding:14px}
  .tile{padding:14px}
  .tile .v{font-size:24px}

  .hist{padding:var(--sp-3) 14px}
  .ft-in{gap:var(--sp-2);flex-direction:column}
  .ft{padding:18px 14px}


  /* 히어로는 말 먼저, 그래프 나중. 그래프를 위에 두면 첫 화면이 숫자 벽이 된다. */
  .hero{grid-template-columns:1fr;gap:26px;margin:4px 0 28px}
  .hero h1{font-size:26px}
  .hero-box .v{font-size:44px}
  .hero-lead{font-size:14.5px;line-height:1.75}
  .btn{padding:10px 16px;font-size:13.5px}
  .pick-grid{grid-template-columns:1fr}
  .pick-c{padding:16px 14px}
  .pick-c .ds{min-height:0}

  /* 항목이 많은 가로 순위·소형 다중은 좁은 화면에서 눌린다 */
  .spark-grid{grid-template-columns:repeat(2,1fr)}
  .spark .c{height:46px}
  .scroll-hint{display:inline;color:var(--text-3)}
}

/* 상단 띠에 실린 다섯(햄버거 · 이름 · 보는 동네 · 말 전환 · 테마)이 폭에 따라
   차례로 물러난다. **두 값은 실측이다** — 칩까지가 513px, 서비스 이름을 빼면 461px 다.
   먼저 '보는 동네' 라벨을 떼고(값이 이름을 대신 말한다), 그래도 모자라면 서비스
   이름을 접는다(이름은 레일 맨 위에 그대로 있다). */
@media (max-width:620px){
  .pickedu .k{display:none}
}
@media (max-width:520px){
  body.has-u .topbar-brand{display:none}
}

/* 히어로 단추 셋은 한 줄에 둔다 (2026-08-25) — 360px 폰에서 합계가 가용폭을
   37.8px 넘겨 '이야기로 보기'만 혼자 아래로 떨어졌다. 가로 여백과 글자만 줄인다.
   **세로 여백 10px 은 그대로 둔다** — 터치 타깃 44px 를 만드는 값이다(a32370d).
   nowrap 이 없으면 flex 가 단추를 눌러 글자를 단추 안에서 두 줄로 접는다. */
@media (max-width:420px){
  .hero-cta{gap:6px}
  .hero-cta .btn{padding:10.5px 11px;font-size:13px;white-space:nowrap}
}

/* 아주 좁은 화면 */
@media (max-width:360px){
  .tiles{grid-template-columns:1fr}
  .topbar-brand{font-size:13px}
  .wordsw button{padding:4px 7px;font-size:12px}
  .themesw{width:26px}
}

@media (prefers-reduced-motion:reduce){
  .rail{transition:none}
}

/* ── 화면 머리 한 문장 요약 ─────────────────────────────────
   viz.js 의 V.hero() 가 채우는 남색 패널. 첫 화면 히어로 상자와 같은 문법이다. */
.page-hero{background:var(--panel-bg);border-radius:var(--radius);box-shadow:var(--card-sh);
           padding:20px 26px;margin:2px 0 18px}
.page-hero .k{font-size:13.5px;color:var(--panel-sub)}
.page-hero .v{font-size:clamp(21px,2.8vw,29px);font-weight:700;color:var(--panel-ink);
              line-height:1.4;margin:6px 0 4px;word-break:keep-all}
.page-hero .v b{color:var(--panel-num);font-family:var(--mono);font-variant-numeric:tabular-nums;
                font-weight:600;font-size:1.22em;letter-spacing:-.03em}
.page-hero .d{font-size:13.5px;color:var(--panel-sub)}

/* ── 자료를 못 받았을 때 뜨는 띠 (viz.js V.loadFail) ─────────
   옛 기준 배너와 같은 결이되 그쪽은 '기준 안내'였고 이쪽은 '지금 실패했다'라
   더 세게 물들인다. 본문 맨 위에 끼워 넣으므로 아래 여백을 준다. */
.loadfail{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;
          margin:0 0 var(--sp-4);padding:14px 16px;border-radius:var(--radius);
          background:color-mix(in srgb,var(--warn) 12%,var(--surface-1));
          border:1px solid color-mix(in srgb,var(--warn) 34%,var(--surface-1));
          font-size:14px;color:var(--text-1)}
.loadfail b{color:var(--warn);font-weight:600;white-space:nowrap}
.loadfail span{color:var(--text-2)}
.loadfail-again{margin-left:auto;font:inherit;font-weight:600;cursor:pointer;
                padding:7px 14px;border-radius:var(--radius);
                background:var(--accent);color:var(--on-accent);border:0}
.loadfail-again:hover{background:var(--accent-2)}

/* ── 인쇄 ───────────────────────────────────────────────────
   조작 도구(레일·상단 띠·토글·찾기·CTA)는 종이에서 할 일이 없다. 차트 canvas 는
   그대로 찍힌다. **다크 테마의 배경은 일부러 안 바꾼다** — 차트가 이미 어두운
   잉크로 그려져 있어 종이만 희게 하면 차트가 안 읽힌다. */
@media print{
  .rail,.topbar,.rail-btn,.rail-veil,.tools,.seg,.themesw,
  .loadfail-again,.hero-cta,.find{display:none !important}
  .shell{display:block}
  .col{min-height:auto}
  .wrap{max-width:none;padding:0 0 24px}
  .card,.tile,.page-hero,.hero-box{break-inside:avoid;box-shadow:none;border:1px solid var(--rule)}
  a{text-decoration:none}
}

/* ── 터치 기기 — 탭 타깃 키우기 (2026-08-24 모바일 전수 검사) ──
   세그 토글 29px · 테마 단추 24px · 캡션 접기 21px 는 손가락 기준(40px 안팎)에
   작다. 포인터가 굵은 기기에서만 키운다 — 마우스 화면은 그대로다.
   캡션 접기는 겉보기 크기를 안 바꾸려 안쪽 여백만 주고 음수 마진으로 되돌린다. */
@media (pointer:coarse){
  .seg button{padding:9px 12px}
  .wordsw button{padding:8px 11px}
  .themesw{width:38px;height:36px}
  .themesw svg{width:16px;height:16px}
  select.ctl{padding:8px 10px}
  .loadfail-again{padding:9px 12px}
}