/* Korean Company Atlas — design tokens & components (V4 기준) */
/* ══════════════════════════════════════════════════════════════════════════
   팔레트 — Style Guide v2 (beige-free / white / Pretendard)
   2026-08-03 개편. 이전 팔레트는 웜 크림(#f7f5f1)과 베이지 라인이었다.
   그 조합이 AI 기본값처럼 읽힌다는 지적을 받아 전부 쿨 중립으로 교체했다.

   규칙 셋
     1) 라이트 배경은 순백. 중립색은 전부 쿨 그레이. 웜 크림·베이지 금지.
     2) 서체는 Pretendard 하나. 세리프·모노 제거. 위계는 두께·크기·자간으로.
     3) 액센트는 시그널 블루 하나. 도메인 4색(기업·언론·정부·국회)은
        점·좌측선·텍스트에만 쓰고 큰 면으로 칠하지 않는다.

   이전 토큰 이름을 그대로 유지한다 — atlas.js 가 인라인 스타일에서 같은
   이름을 참조하므로(var(--c-me) 등), 값만 갈아 끼우면 JS 를 손대지 않아도 된다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --sunken:#f4f5f7;
  --ink:#14161b; --ink2:#3c414b; --ink3:#5a606b; --muted:#6e7581;
  --line:#e7e9ee; --line2:#d6dae1; --rule:#eef0f3;
  /* 구 토큰 호환 — rule2 는 rule 과 line 사이, rule-strong 은 먹색 그대로 */
  --rule2:#e7e9ee; --rule-strong:#14161b; --hover:#f4f5f7; --stroke:#3c414b;
  --chip-bg:#f4f5f7; --chip-bd:#d6dae1; --notch:rgba(255,255,255,.5);
  /* 입력 필드 테두리 — 필드는 테두리로 식별되므로 3:1 을 넘겨야 한다 */
  --field-bd:#8c93a0;
  --accent:#2f56c7; --accent-ink:#1e3a94; --accent-bg:#eaeefb;
  --link:#2f56c7; --link-hover:#1e3a94;
  --c-co:#a9781f; --c-me:#2f56c7; --c-go:#1a8a63; --c-as:#6b52c9;
  --c-co-t:#7d5814; --c-me-t:#1e3a94; --c-go-t:#12664a; --c-as-t:#513c9c;
  /* 브랜드 A 마크의 네 조각 (2026-08-06). 도메인 색(--c-*)과 사촌이지만 같지
     않다 — 디자인에서 받은 값 그대로다. 헤더 워드마크와 푸터 로고가 쓴다.
     파비콘·홈화면·공유 카드는 고정 배경이므로 SVG 에 이 값을 직접 박는다
     (tools/social-card/brand-a.mjs). 라이트에서만 브랜드 값이고, 다크에서는
     아래에서 밝힌 값으로 덮는다 — 짙은 남색·자색은 어두운 바닥에서 묻는다. */
  --a-co:#d79f29; --a-me:#204391; --a-go:#3f8062; --a-as:#4d2f8c;
  --fact-fg:#16794f; --fact-bg:#e4f2ec; --est-fg:#8a5e10; --est-line:#d9a94a;
  --est-bg:transparent;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(20,22,27,.05),0 2px 8px rgba(20,22,27,.06);
  --shadow-2:0 8px 24px rgba(20,22,27,.10),0 2px 8px rgba(20,22,27,.06);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:150ms;
  --focus:0 0 0 3px var(--accent-bg),0 0 0 1px var(--accent);
}
html[data-theme="dark"]{
  --bg:#131519; --surface:#191c22; --card:#1b1f26; --sunken:#15181d;
  --ink:#eef0f4; --ink2:#c3c8d1; --ink3:#a1a7b3; --muted:#848a96;
  --line:#292d36; --line2:#353a45; --rule:#22262e;
  --rule2:#292d36; --rule-strong:#454b58; --hover:#20242b; --stroke:#a1a7b3;
  --chip-bg:#20242b; --chip-bd:#353a45; --notch:rgba(19,21,25,.62);
  --field-bd:#5d6472;
  --accent:#7d97f0; --accent-ink:#a9bcf6; --accent-bg:#1f2740;
  --link:#7d97f0; --link-hover:#a9bcf6;
  --c-co:#d3a250; --c-me:#7d97f0; --c-go:#4cbb8e; --c-as:#a08ff0;
  --c-co-t:#dcb069; --c-me-t:#a9bcf6; --c-go-t:#63c79f; --c-as-t:#b3a6f4;
  /* 브랜드 A 마크 — 다크. 브랜드 값의 남색(#204391)과 자색(#4d2f8c)은 어두운
     바닥에서 형체가 사라진다. 같은 네 도메인의 다크 색을 그대로 쓴다. */
  --a-co:#d3a250; --a-me:#7d97f0; --a-go:#4cbb8e; --a-as:#a08ff0;
  --fact-fg:#5fd0a2; --fact-bg:#12291f; --est-fg:#e0b364; --est-line:#8a6b2e;
  --est-bg:transparent;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.34);
  --shadow-2:0 10px 30px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
/* 버튼·입력은 서체를 상속하지 않으므로 강제한다 */
button,input,select,textarea{font-family:inherit}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
/* 서체 유틸 — 세 갈래였던 것을 하나로 합쳤다. 클래스 이름은 유지해 마크업을
   건드리지 않는다. 숫자가 줄을 맞춰야 하는 곳(구 .mono)만 tabular-nums 를 켠다. */
.sans,.serif{font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.mono{font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 한글 조판: 음수 자간 해제, 어절 단위 줄바꿈 */
html[data-lang="ko"] h1,html[data-lang="ko"] .lede,html[data-lang="ko"] svg text{letter-spacing:normal!important}
html[data-lang="ko"] h1,html[data-lang="ko"] .lede{word-break:keep-all}

.wrap{max-width:1460px;margin:0 auto;padding:0 36px}
header{border-top:4px solid var(--rule-strong);border-bottom:1px solid var(--line);background:var(--surface)}
.hbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 0}
.brand{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.brand .name{font:700 27px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:-.01em;display:inline-flex;align-items:baseline}
/* 워드마크의 A. 파비콘과 같은 아트워크다(atlas.js 의 A_MARK · brand-a.mjs).
   2026-08-06 에 마크를 갈면서 가로세로비가 0.958 에서 1.160 으로 넓어졌다 —
   폭이 auto 이므로 규칙은 그대로 두고 실제로 넓게 나온다.
   height 0.707em 은 Pretendard 의 대문자 높이 비율을 실측한 값이다(400px 로 그려
   'H' 의 잉크 높이를 쟀다). 그래서 옆의 'tlas' 와 윗변이 맞는다.
   .name 이 inline-flex + align-items:baseline 이고 SVG 는 베이스라인이 없는
   대체 요소라, 밑변 margin edge 가 글자 베이스라인에 붙는다. 실측 결과 차이가
   0.31px 이었고 그것은 손으로 넣었던 top 보정값 때문이었다 — 보정을 빼면 0 이다.
   폭은 auto 로 둔다. viewBox 가 A 의 잉크 상자라서 비율이 그대로 나온다. */
.brand-a{height:.707em;width:auto;display:block;margin-right:.02em}
.brand .tag{font:600 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--surface);background:var(--ink);padding:3px 5px;border-radius:var(--r-sm)}
.vsep{width:1px;height:22px;background:var(--line)}
.brandline{font:400 13px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);letter-spacing:.01em}
nav.primary{margin-left:auto;display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
nav.primary a{font:500 14px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);text-decoration:none}
nav.primary a:hover{text-decoration:underline;color:var(--ink)}
.assetof{font:400 12px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}

.seg{display:flex;border:1px solid var(--field-bd);border-radius:var(--r-sm);overflow:hidden}
.seg button{font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.02em;color:var(--ink);background:var(--surface);border:0;padding:7px 10px;cursor:pointer}
.seg button+button{border-left:1px solid var(--field-bd)}
.seg button[aria-pressed="true"]{color:var(--surface);background:var(--ink)}
.theme-btn{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.02em;color:var(--ink);background:var(--surface);border:1px solid var(--field-bd);border-radius:var(--r-sm);padding:7px 10px;cursor:pointer}
.theme-btn:hover{border-color:var(--ink)}

/* ── 색인 검색 (헤더 안의 별도 줄) ──
   .hbar 와 같은 줄에 두면 데스크톱에서 내비 8개와 폭을 다퉈 첫 페이지 헤더가
   줄바꿈된다. 그래서 헤더 안의 독립된 줄로 둔다. */
.hfind{border-top:1px solid var(--rule)}
.hfind-in{max-width:1460px;margin:0 auto;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:9px 36px}
.hfind-lab{flex:none;font:600 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hfind-box{position:relative;flex:1 1 340px;min-width:0;max-width:620px}
.hfind-i{width:100%;box-sizing:border-box;font:400 14px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);background:var(--bg);border:1px solid var(--field-bd);border-radius:var(--r-sm);padding:8px 34px 8px 11px}
.hfind-i::placeholder{color:var(--muted);opacity:1}
.hfind-i:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.hfind-x{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;font:400 17px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);background:none;border:0;border-radius:var(--r-sm);cursor:pointer}
.hfind-x:hover{color:var(--ink);background:var(--hover)}
.hfind-hint{flex:none;font:400 11.5px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
.hfind-list{position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;margin:0;padding:4px;list-style:none;max-height:min(62vh,430px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2)}
.hfind-list [role="option"]{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.hfind-list [role="option"]:hover,.hfind-list [role="option"].on{background:var(--hover)}
.hfind-list [role="option"].on{outline:1px solid var(--line2)}
.fr-kind{flex:none;min-width:64px;font:600 10px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fr-body{flex:1 1 auto;min-width:0}
.fr-name{display:block;font:600 14.5px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);word-break:keep-all}
.fr-sub{display:block;margin-top:2px;font:400 12px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3);word-break:keep-all}
.fr-go{flex:none;font:400 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}
.hfind-none,.hfind-more{padding:10px 11px;font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3);word-break:keep-all}
.hfind-more{border-top:1px solid var(--rule);font-size:12px;color:var(--muted)}
@media(max-width:720px){
  .hfind-in{padding:8px 16px;gap:8px 10px}
  .hfind-lab,.hfind-hint{display:none}
  .hfind-box{flex-basis:100%;max-width:none}
  .fr-kind{min-width:52px}
}
.eyebrow{font:600 13px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1{font:700 clamp(32px,3.8vw,52px)/1.08 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:-.015em;margin:10px 0 12px;max-width:1100px;text-wrap:pretty}
.lede{font:400 20px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);max-width:62ch;margin:0;text-wrap:pretty}

/* 첫 화면(지형도) 압축 인트로 — Fig.1이 폴드 위로 올라오도록 상단 높이를 낮게 유지 */
.page-intro{margin-bottom:12px}
.page-intro .eyebrow{font-size:12px}
.page-intro h1{font-size:clamp(24px,2.2vw,34px);line-height:1.12;margin:5px 0 0}
.lede-below{font-size:16px;line-height:1.5;margin:24px 0 6px;max-width:80ch}

/* 그림 하단부 — 범례와 읽는 법은 그림을 본 다음에 필요하므로 아래에 둔다 */
.fig-foot{margin-top:8px;padding-top:10px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.fig-foot .fig-note{margin-left:0}

/* 헤더 한 줄 유지(데스크톱) — 1000px 이상에선 줄바꿈 없이, 좁은 폭에선 브랜드라인 생략 */
@media(min-width:1000px){
  .hbar{flex-wrap:nowrap}
  nav.primary{flex-wrap:nowrap}
}
@media(min-width:1000px) and (max-width:1379px){
  .brandline{display:none}
  .brand+.vsep{display:none}
  .hbar{gap:12px}
  nav.primary{gap:13px}
  nav.primary a{font-size:13px}
}

.layout{display:flex;flex-direction:row-reverse;flex-wrap:wrap;gap:36px;align-items:flex-start}
.main-col{flex:999 1 620px;min-width:0}
aside{flex:1 1 184px;min-width:0}

.figcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);padding:14px 22px 12px}
.fig-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fig-no{font:600 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--surface);background:var(--ink);padding:4px 7px;border-radius:var(--r-sm)}
.fig-title{font:600 19px/1.2 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.fig-note{margin-left:auto;font:400 14px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3)}

.badge{display:inline-block;font:600 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge.fact{color:var(--fact-fg);background:var(--fact-bg);border:1px solid transparent}
.badge.est{color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-line)}
.badge.sample{color:var(--ink3);background:var(--chip-bg);border:1px dashed var(--chip-bd)}

.ctrl-row{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-top:8px}

/* 한 줄 컨트롤 바 — 출발·확장 + 접힘 토글(경로·관련 기록) */
.ctrl-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:2px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.ctrl-bar .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ctrl-sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.row-toggle{display:inline-flex;align-items:center;gap:5px;font:500 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);background:var(--surface);border:1px solid var(--field-bd);border-radius:var(--r-sm);padding:7px 10px;cursor:pointer}
.row-toggle:hover{border-color:var(--ink);color:var(--ink)}
.row-toggle[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.row-toggle .arr{font-size:10px;color:var(--muted)}
.ctrl-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl-label{font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 14px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);background:var(--surface);border:1px solid var(--field-bd);padding:7px 12px;border-radius:var(--r-sm);cursor:pointer}
.chip[aria-pressed="true"]{color:var(--surface);background:var(--ink);border-color:var(--ink)}
.chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.hop{font:500 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);background:var(--surface);border:1px solid var(--field-bd);padding:7px 10px;border-radius:var(--r-sm);cursor:pointer}
.hop[aria-pressed="true"]{color:var(--surface);background:var(--ink);border-color:var(--ink)}
.caption-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.caption-row[hidden],.sats-row[hidden]{display:none}

/* 모바일 스와이프 힌트 — 관계도가 가로 스크롤일 때만 의미가 있으므로 720px 이하에서만 표시 */
.swipe-hint{display:none}
@media(max-width:720px){
  .swipe-hint{display:flex;align-items:center;gap:6px;margin:4px 0 2px;font:400 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
}
.caption{font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink2);letter-spacing:.01em}

.diagram-scroll{overflow-x:auto;margin-top:2px}
svg.loop{display:block;width:100%;max-width:780px;margin:0 auto;min-width:560px;height:auto}
svg.loop .arrow-line{stroke:var(--stroke);stroke-width:2.5}
svg.loop .arrow-head{fill:var(--stroke)}
svg.loop .edge-label{font:italic 17px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--ink3)}
svg.loop .diag-label{font:italic 15px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--ink2)}
svg.loop .node-name{font:700 25px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:-.01em}
svg.loop .node-sub{font:400 17px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--ink2)}
svg.loop .node-unit{font:500 13px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em}
svg.loop g.node{cursor:pointer}

.kicker{font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:920px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fig-item{border-top:2px solid var(--rule-strong);padding-top:12px}
.fig-num{font:500 clamp(19px,1.9vw,27px)/1.1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fig-desc{font:400 15px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin-top:8px;text-wrap:pretty}
.fig-src-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.fig-src{font:400 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}

.prov{border-top:1px solid var(--line);margin-top:32px;padding-top:14px;display:flex;flex-wrap:wrap;gap:10px 32px;align-items:center}
.prov-kicker{font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.prov-item{display:inline-flex;align-items:center;gap:8px}
.prov-item .desc{font:400 14px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2)}

.acc-btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--field-bd);padding:9px 10px;border-radius:var(--r-sm);font:600 13px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);cursor:pointer;margin:0 0 6px}
.acc-btn:hover{border-color:var(--ink)}
.acc-btn .arr{font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;width:13px;color:var(--ink)}
.acc-btn .lbl{flex:1;white-space:pre-line;word-break:keep-all;overflow-wrap:break-word;min-width:0;hyphens:auto}
.acc-btn .cnt{font:400 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
.acc-body{margin:0 0 8px 13px;border-left:1px solid var(--rule2);padding-left:12px;display:flex;flex-direction:column}
.acc-body[hidden]{display:none}
.acc-body>a{font:400 12px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);text-decoration:none;padding:5px 8px;border-radius:var(--r-sm);word-break:keep-all;overflow-wrap:break-word;hyphens:auto}
.acc-body>a:hover{background:var(--hover);color:var(--ink)}
.acc-more{font:400 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);padding:5px 8px}
.inst-link{display:block;padding:7px 8px;border-radius:var(--r-sm);text-decoration:none}
.inst-link:hover{background:var(--hover)}
.inst-name{display:flex;align-items:center;gap:7px;font:400 14px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.inst-name .dot{width:8px;height:8px;border-radius:50%;flex:none}
.inst-sub{display:block;font:400 11px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:1px 0 0 16px;word-break:keep-all;overflow-wrap:break-word;hyphens:auto}
.explorer{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px;border:1px solid var(--field-bd);border-radius:var(--r-sm);text-decoration:none;background:var(--surface)}
.explorer:hover{border-color:var(--ink)}
.explorer .lbl{flex:1;font:600 14px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.rail-toggle{display:flex;align-items:flex-start;gap:8px;width:100%;background:var(--surface);border:1px solid var(--field-bd);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;font:600 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:0 0 14px;text-align:left}
.rail-toggle .rt-lab{flex:1;white-space:normal;word-break:keep-all}
.rail-toggle:hover{border-color:var(--ink)}
.rail-toggle .arr{font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;width:13px;color:var(--ink)}
aside.collapsed{flex:0 0 36px;max-width:36px}
aside.collapsed>*:not(.rail-toggle){display:none}
aside.collapsed .rail-toggle{padding:10px 0;justify-content:center}
aside.collapsed .rail-toggle .rt-lab{display:none}

footer .fbar{margin-top:40px;padding:16px 0 44px;border-top:1px solid var(--rule-strong);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:baseline}
footer .copy{font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}
footer .links{display:flex;gap:20px;flex-wrap:wrap}
footer .links a{font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}

/* ── Fable 추가: 언어 스팬 · 화면 라우팅 · 상세 화면 ───────────────────── */
html[data-lang="en"] [data-l="ko"]{display:none}
html[data-lang="ko"] [data-l="en"]{display:none}
:root{--ax-regul:#cf5f52;--ax-entity:var(--c-co);--ax-legis:var(--c-as);--ax-media:var(--c-me);--ax-admin:var(--c-go);--ax-data:#5e8f9c;--ax-note:#8a8f9a}
html[data-theme="dark"]{--ax-regul:#e08477;--ax-data:#7fb1bf;--ax-note:#a5aab5}
.screen[hidden]{display:none}
.screen-detail{padding-top:30px;padding-bottom:8px}
.d-eyebrow{display:flex;align-items:center;gap:8px}
.d-eyebrow .dot{width:9px;height:9px;border-radius:50%;flex:none}
.d-note{font:400 14px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:10px 0 0}
.facts{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:74ch}
.facts li{display:flex;gap:10px;align-items:baseline;font:400 15px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2)}
.ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:26px}
.ncard{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--line2);border-radius:var(--r);padding:14px 16px}
.ncard:hover{box-shadow:var(--shadow-1)}
.ncard .n-name{font:600 17px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.ncard .n-sub{font:400 14px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3);margin-top:4px}
.ncard .n-meta{margin-top:10px;display:flex;gap:8px;align-items:center}
.ncard.hl{outline:2px solid var(--ink);outline-offset:2px}
.edgelist{margin-top:28px;border-top:1px solid var(--rule);padding-top:14px}
.edgelist .row{font:400 14px/1.9 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2)}
.edgelist .row em{font-style:italic;color:var(--muted)}
.d-sources{font:400 14px/1.65 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3);max-width:88ch;margin:26px 0 0}
.rel-row{margin-top:34px;border-top:1px solid var(--rule-strong);padding-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.rel-row a{font:500 14px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.backlink{margin:22px 0 6px;font:500 14px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.wheel-detail-link{text-decoration:none;margin-left:auto}
/* ── 연동 확장: 원 선택 관련 기록 · 전체 목차 레일 · 확장 푸터 · 카드 연결 ── */
a.chip{text-decoration:none}
.sats-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}
.ncard .n-links{margin-top:9px;padding-top:8px;border-top:1px solid var(--rule);font:400 13px/1.7 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.ncard .n-links .lk-lab{font:600 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.ncard .n-links a{color:var(--ink2);text-decoration:none}
.ncard .n-links a:hover{text-decoration:underline;color:var(--ink)}
.rail-item-aff{font:500 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-line);padding:0 5px;border-radius:999px;margin-left:6px}
.foot-main{border-top:1px solid var(--rule-strong);padding-top:24px;margin-top:44px}
/* 푸터 두 기둥 (2026-08-07)
   왼쪽 — 첫 화면은 다섯 줄 검정 카드(.foot-card), 다른 화면은 로고 락업(.foot-brand)
   오른쪽 — 제목 · 부제 · 폴더 목차(.cols) · 출처 문단(.foot-src)
   목차를 오른쪽 기둥에 넣는다. 종전처럼 전체 폭으로 두면 카드(높이 500px 남짓)
   오른쪽이 제목 두 줄만 남고 통째로 빈다.
   min-width:0 은 좁아질 때 오른쪽 기둥이 제 내용 폭 아래로 줄어들게 한다 —
   없으면 격자가 밀려 가로 스크롤이 생긴다. */
.foot-head{display:flex;align-items:flex-start;gap:28px}
.foot-headtext{flex:1;min-width:0}
.foot-headtext>.foot-src{margin-bottom:0}
/* 카드는 눌리지 않는다. 420px 은 카드 안 세 칸(머리글자 22 · 이름 84 · 설명)이
   설명 한 줄을 담는 최소 폭이다 — 더 줄이면 설명이 두 줄로 접혀 카드가 길어진다. */
.foot-card{flex:none;width:420px}
/* 1080px 아래에서는 두 기둥이 서로를 눌러 목차가 두 칸으로 떨어진다. 세로로 쌓는다. */
@media(max-width:1080px){
  .foot-head{flex-direction:column;gap:22px}
  .foot-card{width:100%;max-width:420px}
}
.foot-title{font:600 21px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:-.01em}
.foot-title .mut{color:var(--muted);font-weight:400}
.foot-sub{font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin-top:6px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:20px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.cols h5{font:600 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.cols a{display:block;font:400 14px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);text-decoration:none;padding:2.5px 0}
.cols a:hover{text-decoration:underline}
.foot-src{font:400 13px/1.65 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:20px 0 0;max-width:100ch}
.foot-tiny{font:400 12px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:12px}
.foot-main + .fbar{margin-top:20px;border-top:1px solid var(--rule)}

/* ══════════════════════════════════════════════════════════════════════════
   브랜드 로고 락업 (2026-08-06 · 같은 날 고쳐 씀)
   디자인에서 받은 로고 파일을 그대로 놓는다. 마크업은 atlas.js 의
   brandLockup() 이 만들고, 공유 카드(tools/social-card/og-src.html)도 같은
   파일을 쓴다.
     brand/atlas-lockup-master.png   받은 원본 (손대지 않는다)
     atlas/atlas-lockup.png          투명 여백만 잘라 낸 것 1862x1808
     만드는 법: node tools/social-card/place-lockup.mjs

   ══════════════════════════════════════════════════════════════════════════
   로고에는 조판할 것이 없다. 여기에 font 선언을 다시 넣지 말 것.
   ══════════════════════════════════════════════════════════════════════════
   되돌린 것 — 초판은 이 자리에 이렇게 적었다.
       .lockup-word{font:600 max(20px,.2714em)/1 Pretendard;letter-spacing:.02em}
       .lockup-by  {font:600 max(9px,.0607em)/1 Pretendard;letter-spacing:.155em}
   'ATLAS' 와 'SEOUL ECONOMIC DAILY' 를 Pretendard 600 으로 다시 찍고 자간을
   손으로 맞춘 것이다. 받은 로고와 서체·두께·자간이 달랐고, 무엇보다 A 마크와
   글자의 비례가 달랐다. 받은 파일에서 A 마크는 락업 폭의 .6745 배다.
   초판은 공유 카드에서 1.0 배(마크 280 · 락업 280), 푸터에서 .837 배였다 —
   마크가 크고 글자가 작은, 원본과 다른 로고가 됐다.
   지금은 받은 파일의 화소를 그대로 낸다. 크기는 폭 하나로만 정한다.

   치수 — 폭만 준다
     img 에 원본 화소 치수(width=1862 height=1808)가 적혀 있으므로 브라우저가
     가로세로비 1.02987 을 스스로 지킨다. 높이를 따로 주면 눌리거나 늘어난다.
     height 를 주지 말 것. object-fit·transform·filter 도 쓰지 말 것.

   흰 판에 대하여
     로고의 글자는 먹색이다(받은 파일 그대로). 어두운 바닥에서는 글자가 사라지므로
     로고가 놓일 흰 바닥을 깔아 준다. 로고의 색을 바꾸는 것이 아니다 — 받은 파일도
     흰 바닥에 놓인 로고이고, 파비콘 타일도 같은 까닭으로 흰색이다.
     라이트 테마에서는 페이지 배경이 순백(--bg:#fff)이라 이 판이 보이지 않는다.
     그래서 테마로 갈라 쓰지 않고 어디서나 같은 규칙을 둔다 — 갈라 쓰면 한쪽만
     고쳐지는 일이 생긴다.

   폭을 --lk-w 로 받는 까닭
     여백을 padding:7% 로 적으면 안 된다. 백분율 padding 은 자기 폭이 아니라
     담는 상자의 폭을 기준으로 한다. 로고를 담는 상자가 본문 폭만큼 넓으면
     7% 가 70px 을 넘어 로고가 판 안에서 쪼그라든다. 그래서 자리마다 --lk-w
     를 주고 여백을 calc 로 그 폭에서 뽑는다.
     판 높이는 폭의 .9751 배다 (.86 / 1.02987 + .14).
   ══════════════════════════════════════════════════════════════════════════ */
.lockup{display:block;width:var(--lk-w);padding:calc(var(--lk-w) * .07);
  background:#fff;border-radius:var(--r)}
.lockup-img{display:block;width:100%;height:auto}

/* 푸터 왼쪽 기둥의 로고 — index 를 뺀 화면들 (2026-08-07)
   첫 화면은 이 자리에 다섯 줄 카드가 오고, 그 카드 안에 같은 락업이 있다.
   다른 화면에는 카드가 없으므로 락업만 놓는다.
   폭 120px 이면 흰 판 높이가 117px 이다. 이보다 더 줄이면 락업 안의
   'SEOUL ECONOMIC DAILY' 가 뭉개진다 — 받은 파일에서 그 줄은 락업 폭의
   .0607 배 높이다(120px 에서 7.3px). */
.foot-brand{flex:none;--lk-w:min(120px,26vw)}

nav.primary a.on{text-decoration:underline;text-underline-offset:4px;font-weight:600}
/* ── 콘텐츠 지도 (웹아카이브 콘텐츠 모델 시각화) ── */
.cmap{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 10px 6px}
.cmap svg{display:block;width:100%;max-width:840px;margin:0 auto;height:auto}
.cm-e{fill:none;stroke:var(--stroke);stroke-width:1;opacity:.1}
.cm-e.mid{opacity:.42;stroke-width:1.2}
.cm-e.hot{opacity:.95;stroke-width:1.7}
.cm-n{cursor:pointer}
.cm-n circle{stroke:var(--card);stroke-width:1.5}
.cm-t{font:500 11px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--ink2)}
.cm-n.dim{opacity:.22}
.cm-n.hot .cm-t{font-weight:700;fill:var(--ink)}
.cm-n:hover .cm-t{fill:var(--ink)}
/* 관계도 아래 상세 설명 (2026-08-05).
   종전에는 .cmap-cap 한 줄이 이름과 부제만 냈다. 이제 그림 아래에서 그 기록의
   폴더·유형·연결을 모두 편다. 문법은 .node-inspect 와 같은 상자를 쓴다. */
.cm-insp{margin:8px 8px 4px;padding:14px 16px;border-top:1px solid var(--rule)}
.cm-insp:not(.idle){margin:10px 0 2px;padding:15px 17px;border:1px solid var(--line2);border-top:1px solid var(--line2);border-left:4px solid var(--ink);border-radius:var(--r);background:var(--card)}
.cm-hint{margin:0;font:400 13px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3);max-width:88ch}
html[data-lang="ko"] .cm-hint,html[data-lang="ko"] .cm-sub,html[data-lang="ko"] .cm-relside{word-break:keep-all}
.cm-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-h{font:700 20px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:9px 0 0;word-break:keep-all}
.cm-sub{font:400 13.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:5px 0 0;max-width:72ch}
/* 늘린 설명 (2026-08-05) — 산문 한 문단 · 연결 수 순위 · 2단계 안내 */
.cm-lede{font:400 13.5px/1.68 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:11px 0 0;max-width:76ch}
.cm-rank{font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink3);margin:6px 0 0;max-width:76ch}
.cm-hint2{font:400 12px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:0 0 7px;max-width:76ch}
html[data-lang="ko"] .cm-lede,html[data-lang="ko"] .cm-rank,html[data-lang="ko"] .cm-hint2{word-break:keep-all}
/* 이름이 붙은 관계 — A — 지정 → B */
.cm-rel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 0;border-bottom:1px dotted var(--rule2);font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2)}
.cm-rel:last-of-type{border-bottom:0}
.cm-rel em{font-style:italic;color:var(--muted)}
.cm-relside{color:var(--ink)}
.cm-arr{color:var(--muted)}
/* 폴더별 연결 */
.cm-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
@media(max-width:760px){.cm-groups{grid-template-columns:1fr}}
.cm-group{min-width:0}
.cm-glab{display:flex;align-items:center;gap:6px;font:600 12px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
/* SVG 안의 단추는 box-shadow 포커스 링이 듣지 않는다 — 테두리로 낸다 */
.cm-n:focus-visible,.sat-n:focus-visible{outline:none}
.cm-n:focus-visible>circle:first-of-type,.sat-n:focus-visible>circle,.sat-n:focus-visible>rect,.sat-n:focus-visible>path{stroke:var(--accent);stroke-width:3}
/* ── 상법 개정 타임라인 ── */
.tl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 8px;margin-top:10px}
.tl-scroll{overflow-x:auto}
/* 타임라인 그림만 화면 폭으로 키운다.
   `.tl-card svg` 로 두면 같은 카드 안 .fig-foot 의 범례 점(14px SVG 2개)까지 걸려
   거대한 원 두 개가 됐다(2026-08-01 발견). 선택자를 .tl-scroll 직계로 좁힌다. */
.tl-card > .tl-scroll > svg{display:block;width:100%;max-width:780px;margin:0 auto;height:auto;min-width:540px}
/* 범례 점은 인라인 크기(width/height 속성)를 그대로 지킨다 */
.tl-card .fig-foot svg{width:14px;height:14px;min-width:0;max-width:none;margin:0;display:inline-block;flex:none}
.tl-line{stroke:var(--stroke);stroke-width:2}
.tl-dot{fill:var(--c-as);stroke:var(--card);stroke-width:2}
.tl-dot.pub{fill:var(--muted)}
.tl-d{font:600 12px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;fill:var(--ink)}
.tl-t{font:500 13px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--ink2)}
/* ── 뉴스–주가 정합 바 ── */
.rbars{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:10px;display:grid;gap:12px}
.rbar{display:grid;grid-template-columns:minmax(120px,200px) 1fr auto auto;gap:12px;align-items:center}
@media(max-width:560px){.rbar{grid-template-columns:1fr auto auto}.rb-track{grid-column:1/-1}}
.rb-lab{font:500 14px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.rb-track{height:10px;background:var(--chip-bg);border-radius:2px;overflow:hidden}
.rb-fill{height:100%;background:var(--c-me);border-radius:2px}
.rb-val{font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.rb-note{font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:2px 0 0}
/* ── 50개 정책 그리드 + 이중선 차트 (0730 판 .pgrid/.pcell 복구) ──
   글자색은 atlas.js inkOn() 이 섹터 색 명도를 보고 인라인으로 정한다.
   다섯 섹터 색 모두 흰색·먹색 중 한쪽으로 4.8:1 이상이 나온다. */
/* 칸에 코드와 정책 이름을 함께 적는다 (2026-08-07)
   종전에는 aspect-ratio:1/1 인 정사각형이 10칸 x 5줄로 서고 코드(P01)만 적혔다.
   이름을 넣으려면 정사각형으로는 안 된다 — 1000px 폭에서 한 칸이 95px 인데 가장 긴
   한국어 이름('코로나19 치료제·백신 개발 지원', 표시폭 30)이 그 안에 들어가지 않는다.
   그래서 열 수를 못 박지 않고 auto-fill 로 바꿨다. 160px 이면 본문 1000px 에서
   6칸, 732px 에서 4칸, 390px 에서 2칸이 선다 — @media 로 열 수를 따로 적을 필요가
   없어져 720px 규칙을 걷었다.
   섹터 색은 그대로 칸 배경이다. 50칸을 한눈에 훑는 성질을 잃지 않는다. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin:0 0 4px}
.pcell{display:grid;gap:3px;align-content:start;text-align:left;
  border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;padding:8px 10px 9px;
  transition:transform .08s ease,box-shadow .08s ease}
/* 칸의 세 줄 — 섹터 · 정책명 · 발표일 (2026-08-10).
   종전에는 첫 줄이 코드(P01)였다. 식별자일 뿐 읽는 사람에게 알려 주는 것이 없어
   섹터 이름으로 갈았다. 색이 이미 섹터를 뜻하지만, 색만으로는 무슨 섹터인지 알 수
   없으므로 글로도 적는다. */
.pcell-s{font:600 10px/1.2 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.04em;opacity:.85}
/* 발표일. 표 숫자처럼 폭이 고정되게 tabular-nums 를 준다 — 칸마다 자리가 흔들리면
   50칸이 지저분해 보인다. */
.pcell-d{font:500 10.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.8}
/* 이름은 두 줄까지. 두 줄 높이를 못 박아(11.5 x 1.35 x 2 = 31px) 칸 높이가 이름
   길이에 따라 들쭉날쭉해지지 않게 한다. 두 줄을 넘는 이름은 잘리지만 title 과
   aria-label 에 전문이 있고, 누르면 아래 차트 머리에 제목이 그대로 나온다. */
.pcell-n{font:600 11.5px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  min-height:31px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-lang="ko"] .pcell-n{word-break:keep-all}
.pcell:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.pcell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pcell.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
/* ── 차트 짚어 보기 (2026-08-10) ─────────────────────────────────────────
   판독줄은 자리가 고정이다. 떠다니는 상자로 두면 선을 덮고 좁은 화면에서 잘린다.
   높이를 min-height 로 잡아 두어 값이 들고 날 때 카드가 들썩이지 않는다. */
.pc-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;min-height:34px;
  margin:0 0 6px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--sunken);
  font:400 12.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;color:var(--ink2)}
.pc-read-hint{color:var(--muted)}
html[data-lang="ko"] .pc-read-hint{word-break:keep-all}
.pc-read-body{display:contents}
.pc-read-d{color:var(--ink);letter-spacing:.01em}
.pc-read-rel{color:var(--muted);font-weight:500;margin-left:4px}
.pc-read-v b{font-weight:700}
/* 값의 색을 그 선의 색과 맞춘다 — 어느 숫자가 어느 선인지 글로 또 적지 않아도 된다 */
.pc-read-n{color:var(--c-me-t)}
.pc-read-c{color:var(--c-co-t)}
.pc-read-v i{font-style:normal;color:var(--muted)}
/* 십자선과 점 */
.pc-cross-l{stroke:var(--ink3);stroke-width:1.2;stroke-dasharray:3 3}
.pc-dot-n{fill:var(--c-me);stroke:var(--card);stroke-width:2}
.pc-dot-c{fill:var(--c-co);stroke:var(--card);stroke-width:2}
/* 마우스를 받는 판. 보이지 않지만 사건은 받아야 한다 — fill:none 이면 안 받는다. */
.pc-hit{fill:transparent;cursor:crosshair;outline:none}
.pc-hit:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.pchart-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 8px;margin-top:18px}
.pc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px}
.pc-code{flex:none;font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:5px 8px;border-radius:var(--r-sm)}
.pc-name{margin:0;font:600 20px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);word-break:keep-all}
.pc-meta{margin:8px 0 12px;font:400 13px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink2);word-break:keep-all}
.pc-scroll{overflow-x:auto}
.pchart-card > .pc-scroll > svg{display:block;width:100%;max-width:900px;margin:0 auto;height:auto;min-width:560px}
/* 범례 선분은 인라인 크기를 지킨다 — .tl-card 에서 겪은 거대한 원 문제 재발 방지 */
.pchart-card .fig-foot svg{width:22px;height:10px;min-width:0;max-width:none;margin:0;display:inline-block;flex:none}
.pc-ax{font:500 11.5px 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;fill:var(--muted)}
.pol-jump{margin-top:9px;font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--link);background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 2px;cursor:pointer}
.pol-jump:hover{color:var(--link-hover)}

/* ── 연결된 인터랙티브 대표 카드 ── */
a.feat{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:18px 20px;margin-top:26px;text-decoration:none;color:var(--ink)}
a.feat:hover{border-color:var(--line2);border-left-color:var(--accent);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.feat .ft-main{flex:1 1 380px;min-width:0;display:block}
.feat .ft-kicker{display:block;font:600 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase}
.feat .ft-title{display:block;font:600 20px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;margin-top:5px}
.feat .ft-desc{display:block;font:400 14px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin-top:6px;max-width:70ch}
.feat .ft-cta{flex:none;font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.02em;color:var(--surface);background:var(--ink);padding:11px 15px;border-radius:var(--r-sm);white-space:nowrap}

/* ── 섹터별 인터랙티브 카드 그리드 ── */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.feat-grid a.feat-sm{margin-top:0;padding:15px 17px;align-items:flex-start}
.feat-sm .ft-title{font-size:16px;margin-top:6px}
.feat-sm .ft-desc{font-size:13px;margin-top:5px}
.feat-sm .ft-open{display:inline-block;margin-top:10px;font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.02em}
.feat-sm:hover .ft-open{text-decoration:underline}

.ctrl-hint{font:400 13px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}

/* ── 상세 화면 압축 인트로 — 첫 화면과 같은 한 줄 제목 스케일 ── */
.screen-detail .d-intro{margin-bottom:14px}
.screen-detail .d-intro h1{font-size:clamp(24px,2.2vw,34px);line-height:1.12;margin:6px 0 10px}
.screen-detail .d-intro .lede{font-size:16px;line-height:1.55;max-width:80ch}
.screen-detail .d-intro .facts{margin-top:14px}
.screen-detail .d-intro .facts li{font-size:14px;line-height:1.6}

/* ── 기록 표 — 축마다 같은 형식, 출처는 표 아래 ── */
.rt-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
table.rec-table{border-collapse:collapse;width:100%;min-width:560px}
table.rec-table th,table.rec-table td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--rule);word-break:keep-all;overflow-wrap:break-word}
table.rec-table thead th{font:600 11px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--sunken);border-bottom:1px solid var(--line2);white-space:nowrap}
table.rec-table tbody th{font:600 15px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);white-space:nowrap}
table.rec-table td{font:400 14px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2)}
table.rec-table tbody tr:last-child th,table.rec-table tbody tr:last-child td{border-bottom:0}
table.rec-table tbody tr:hover{background:var(--sunken)}
.rt-empty{font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
.axis-note{font:400 15px/1.65 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);max-width:74ch;margin:16px 0 0;word-break:keep-all}
/* 표 제목 — 화면에는 숨기고 스크린리더에만 전달 */
.rt-cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 섹션 제목을 실제 h2/h3로 내면서 기존 kicker 외형은 유지 */
h2.sec-h,h3.sec-h{margin:30px 0 10px;font-weight:600}
h3.sec-h{font-size:11px}

/* ── 모바일(≤620px): 표를 카드로 쌓는다 — 5열 가로 스크롤을 없앤다 ── */
@media(max-width:620px){
  .rt-wrap{overflow-x:visible;border:0;border-top:0;background:transparent;border-radius:0}
  /* max-width:100% 가 없으면 min-width:0 을 줘도 표가 520px 로 남는다.
     <table> 은 display:block 을 줘도 내부 폭 계산이 min-content 를 따라가서,
     .rt-wrap(358px) 을 넘어 문서 전체에 가로 스크롤 146px 을 만들었다
     (2026-08-01 390px 실측 — laws·groups·regulators·access·method·policies 전부).
     .rt-wrap 은 이 구간에서 overflow-x:visible 이라 잘라 주지도 못했다.
     max-width 로 상한을 못 박는다. 실측 결과 표 358px, 넘침 0. */
  table.rec-table{min-width:0;max-width:100%;display:block}
  table.rec-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.rec-table tbody,table.rec-table tr,table.rec-table th,table.rec-table td{display:block;width:auto}
  table.rec-table tr{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--line2);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
  table.rec-table tbody th{border:0;padding:0 0 8px;font:600 17px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;white-space:normal}
  table.rec-table tbody td{border:0;padding:7px 0 0;font-size:14px}
  table.rec-table tbody td+td{border-top:1px solid var(--rule);margin-top:7px}
  table.rec-table tbody td::before{display:block;margin-bottom:3px;font:600 10px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  html[data-lang="en"] table.rec-table tbody td::before{content:attr(data-label-en)}
  html[data-lang="ko"] table.rec-table tbody td::before{content:attr(data-label-ko)}
  table.rec-table tbody tr:hover{background:var(--card)}
}

/* ── 원천 기록·관계도: 기본 화면에서는 접고 필요할 때 펼친다 ── */
.record-details{margin-top:28px;border-top:1px solid var(--rule-strong);padding-top:0}
.record-details summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:12px 0;
  font:600 12px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.record-details summary::-webkit-details-marker{display:none}
.record-details summary::before{content:'▸';font-size:11px;color:var(--muted)}
.record-details[open] summary::before{content:'▾'}
.record-details .sum-hint{margin-left:auto;font:400 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
.record-details[open] .sum-hint{display:none}
.record-details .ncards{margin-top:4px}
.map-details{margin-top:10px}
.map-details .cmap{margin-top:4px}
@media(max-width:620px){.record-details{margin-top:20px}.record-details summary{padding:11px 0}}

@media(max-width:720px){
  table.rec-table th,table.rec-table td{padding:9px 11px}
  table.rec-table tbody th{font-size:14px}
  table.rec-table td{font-size:13px}
}
/* min-width:520px 는 표가 아직 진짜 표인 구간(621~720px)에서만 필요하다.
   ≤720px 전체에 걸어 두면, 620px 이하에서 표를 카드로 쌓는 위 규칙의
   min-width:0 을 이 규칙이 뒤에서 덮어써(같은 특이도, 나중 선언 우선) 표가
   520px 로 남는다. 그 결과 390px 기준으로 문서 전체에 가로 스크롤 146px 이
   생겼다 — laws·groups·regulators·access·method·policies 전부에서 실측됐다.
   구간을 621px 이상으로 좁힌다. */
@media(min-width:621px) and (max-width:720px){
  table.rec-table{min-width:520px}
}

svg.loop .flow{stroke:var(--bg);stroke-width:3;stroke-dasharray:4 16;stroke-linecap:round;opacity:0;transition:opacity .3s;animation:flowdash 1.2s linear infinite}
svg.loop .flow.rev{animation-direction:reverse}
@keyframes flowdash{to{stroke-dashoffset:-20}}
@keyframes ringspin{to{transform:rotate(360deg)}}
#tick-c,#tick-m,#tick-g,#tick-a{transform-box:fill-box;transform-origin:center;animation:ringspin 70s linear infinite}
@media (prefers-reduced-motion: reduce){svg.loop .flow,#tick-c,#tick-m,#tick-g,#tick-a{animation:none}}

/* ── 모바일 최적화 ─────────────────────────────────────── */
@media(max-width:720px){
  .wrap{padding:0 16px}
  .hbar{gap:10px 14px;padding:11px 0}
  .brand .name{font-size:23px}
  .brandline,.vsep{display:none}
  nav.primary{order:5;flex-basis:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:16px;padding:2px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.primary::-webkit-scrollbar{display:none}
  nav.primary a{font-size:13px;white-space:nowrap;padding:6px 0}
  .seg{margin-left:auto}
  h1{font-size:clamp(25px,7.2vw,34px);word-break:keep-all}
  .lede{font-size:16px;line-height:1.55;word-break:keep-all}
  .eyebrow{font-size:11px;letter-spacing:.12em;word-break:keep-all}
  .figcard{padding:16px 14px 14px}
  .fig-title{font-size:17px}
  .fig-note{flex-basis:100%;word-break:keep-all}
  .ctrl-row{gap:10px 18px}
  .ctrl-sep{display:none}
  .ctrl-bar{gap:8px}
  .chip,.hop{padding:8px 10px;font-size:12px;white-space:normal;word-break:keep-all}
  .layout{gap:26px}
  aside{flex-basis:100%}
  .rail-toggle{display:none}
  aside.collapsed{flex:1 1 100%;max-width:none}
  aside.collapsed>*:not(.rail-toggle){display:revert}
  aside.collapsed .acc-body,aside.collapsed .chips{display:flex}
  .figures{grid-template-columns:1fr 1fr;gap:14px}
  .fig-desc,.acc-btn .lbl,.inst-sub{word-break:keep-all}
  svg.loop{min-width:520px}
  .prov{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .caption{word-break:keep-all}
}
@media(max-width:430px){
  .figures{grid-template-columns:1fr}
  .fig-num{font-size:22px}
}

/* ══════════════════════════════════════════════════════════════════════════
   병합 시 다시 붙인 블록 (기존 규칙은 건드리지 않고 추가만 한다)
     .pkg     인터랙티브 패키지 — 여러 편이 하나의 기획으로 읽히게
     .n-story 스토리 페이지를 가진 기록 카드 (현대차 → hyundai.html)
     .asm     국회 본회의 실측 기록 (data/assembly.json)
   색·서체는 기존 변수만 참조한다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 인터랙티브 패키지 ── */
.pkg{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.pkg-head{padding:20px 22px 18px;border-bottom:1px solid var(--line);background:var(--chip-bg)}
.pkg-kicker{display:flex;align-items:center;gap:9px;font:600 11px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.pkg-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);color:var(--surface);font:700 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}
.pkg-title{font:600 22px/1.28 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:9px 0 0}
.pkg-lede{font:400 14px/1.66 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:9px 0 0;max-width:78ch;word-break:keep-all}
.pkg-stats{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.pkg-stats li{font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;white-space:nowrap}
.pkg-list{list-style:none;margin:0;padding:0}
.pkg-list > li + li{border-top:1px solid var(--rule)}
a.pkg-card{display:flex;flex-wrap:nowrap;gap:16px;align-items:flex-start;padding:15px 20px 15px 17px;border-left:4px solid var(--pk,var(--accent));text-decoration:none;color:var(--ink);background:var(--card)}
a.pkg-card:hover{background:var(--chip-bg);color:var(--ink)}
.pkg-card .pk-num{flex:none;width:44px;font:700 15px/1.15 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--pk,var(--ink));padding-top:2px}
.pkg-card .pk-num i{display:block;font:500 10.5px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-style:normal;color:var(--muted)}
.pkg-card .pk-body{flex:1 1 auto;min-width:0;display:block}
.pkg-card .pk-sector{display:block;font:600 11px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--pk,var(--ink2))}
.pkg-card .pk-title{display:block;font:600 17px/1.32 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;margin-top:4px;word-break:keep-all}
.pkg-card .pk-metric{display:block;font:500 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:6px}
.pkg-card .pk-desc{display:block;font:400 13.5px/1.58 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin-top:6px;max-width:72ch;word-break:keep-all}
.pkg-card .pk-go{flex:none;align-self:center;font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.05em;color:var(--ink2);white-space:nowrap}
a.pkg-card:hover .pk-go{color:var(--ink);text-decoration:underline}
.pkg-foot{font:400 12.5px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:0;padding:13px 22px;border-top:1px solid var(--line);background:var(--chip-bg);word-break:keep-all}

/* ── 스토리 페이지를 가진 기록 카드 ── */
.ncard.has-story{border-top-color:var(--accent)}
.ncard .n-name a.n-story-link{color:var(--ink);text-decoration:none}
.ncard .n-name a.n-story-link:hover{text-decoration:underline}
a.n-story{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--chip-bg);text-decoration:none;color:var(--ink)}
a.n-story:hover{border-color:var(--ink);color:var(--ink)}
a.n-story .n-story-t{font:500 12.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;min-width:0;word-break:keep-all}
a.n-story .n-story-go{flex:none;font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.05em;white-space:nowrap}
a.n-story:hover .n-story-go{text-decoration:underline}

/* ── 국회 본회의 실측 기록 ── */
.asm{margin-top:14px;border:1px solid var(--line);border-left:3px solid var(--ax-legis,var(--ink));border-radius:var(--r);background:var(--card);padding:16px 18px}
.asm-stat{font:600 15px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:0;word-break:keep-all}
.asm-cov{font:500 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.asm-list{list-style:none;margin:12px 0 0;padding:0}
.asm-list li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule)}
.asm-name{font:600 13.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);flex:0 0 auto;min-width:120px}
.asm-count{font:500 12px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.asm-latest{font:400 12.5px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);flex:1 1 240px;min-width:0;word-break:keep-all}

@media (max-width:640px){
  .pkg-head{padding:16px 15px 15px}
  .pkg-title{font-size:19px}
  .pkg-lede{font-size:13.5px}
  a.pkg-card{flex-wrap:wrap;gap:4px 12px;padding:14px 15px 14px 13px}
  .pkg-card .pk-num{width:auto;display:flex;align-items:baseline;gap:5px;font-size:13px}
  .pkg-card .pk-num i{display:inline}
  .pkg-card .pk-body{flex:1 1 100%}
  .pkg-card .pk-title{font-size:16px}
  .pkg-card .pk-go{flex:1 1 100%;align-self:flex-start;margin-top:9px}
  .pkg-foot{padding:12px 15px}
  .asm{padding:13px 14px}
  .asm-name{min-width:0;flex:1 1 100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   페이지 설명 섹션 (.explain) — atlas.js 의 explainHtml() 이 만든다.
   상세 페이지가 박스 + 콘텐츠 지도뿐이라 설명이 없던 문제를 메운다.
   본문 폭을 74ch 로 묶어 긴 산문이 읽히게 하고, 섹션마다 번호를 단다.
   ══════════════════════════════════════════════════════════════════════════ */
.explain{margin-top:34px;border-top:1px solid var(--rule-strong);padding-top:6px}
/* scroll-margin — 색인 검색이 #xp-… 로 착지할 때 제목이 화면 맨 위에 붙지 않게 */
.explain .xp{padding:26px 0;border-bottom:1px solid var(--rule);scroll-margin-top:18px}
.explain .xp:last-child{border-bottom:0;padding-bottom:8px}

.xp-head{display:flex;align-items:baseline;gap:11px}
.xp-no{flex:none;font:700 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--surface);background:var(--ink);border-radius:var(--r-sm);padding:5px 7px;letter-spacing:.02em}
.xp-kicker{font:600 11px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.xp-h{font:600 24px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:11px 0 0;max-width:44ch}
.xp-lede{font:400 15px/1.68 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:12px 0 0;max-width:74ch}

/* 나란히 놓는 설명 상자 */
.xp-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:18px}
.xp-panel{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line2);border-radius:var(--r);padding:15px 17px}
.xp-panel h4{font:600 15px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:0}
.xp-panel p{font:400 13.5px/1.62 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:7px 0 0}

/* 강조 박스 — 독자가 오해하기 쉬운 지점에만 쓴다 */
.xp-callout{margin-top:18px;background:var(--chip-bg);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:15px 18px}
.xp-callout p{font:400 14px/1.66 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:0;max-width:72ch}
.xp-callout b{font-weight:600}

/* 단서·한계 */
.xp-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);max-width:76ch}
.xp-note .badge{flex:none;margin-top:1px}
.xp-note b{color:var(--ink2);font-weight:600}

/* 날짜가 붙은 경과 */
.xp-steps{list-style:none;margin:18px 0 0;padding:0;border-left:2px solid var(--rule-strong)}
.xp-steps li{position:relative;padding:0 0 18px 20px}
.xp-steps li:last-child{padding-bottom:2px}
.xp-steps li::before{content:'';position:absolute;left:-6px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--ink);border:2px solid var(--surface)}
.xs-d{display:block;font:600 11.5px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:.03em}
.xs-t{display:block;font:600 15.5px/1.36 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin-top:4px}
.xs-b{display:block;font:400 13.5px/1.62 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin-top:5px;max-width:72ch}

/* 정의 표 */
.xp-table-wrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.xp-table{width:100%;border-collapse:collapse;font:400 13.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.xp-table thead th{text-align:left;font:600 10.5px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 14px 8px 0;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.xp-table tbody th{text-align:left;vertical-align:top;font:600 13.5px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);padding:11px 18px 11px 0;border-bottom:1px solid var(--rule);min-width:140px}
.xp-table tbody td{vertical-align:top;color:var(--ink2);padding:11px 0;border-bottom:1px solid var(--rule)}
.xp-table tbody tr:last-child th,.xp-table tbody tr:last-child td{border-bottom:0}

/* 다른 화면으로 보내는 줄 */
.xp-link{margin:16px 0 0}
.xp-link a{font:600 12.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:3px}
.xp-link a:hover{border-bottom-color:var(--ink)}

@media (max-width:640px){
  .explain{margin-top:26px}
  .explain .xp{padding:20px 0}
  .xp-h{font-size:20px}
  .xp-lede{font-size:14px}
  .xp-panels{grid-template-columns:1fr;gap:10px}
  .xp-callout{padding:13px 14px}
  .xp-callout p{font-size:13.5px}
  .xp-table tbody th{min-width:110px;padding-right:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   바퀴 인스펙터 (.wheel-inspect) — atlas.js 가 첫 페이지에 주입한다.
   바퀴를 누르면 그 축이 무엇인지 리드 문장과 사실 목록으로 읽힌다.
   index.html 은 건드리지 않는다(첫 페이지 파일 불변).
   ══════════════════════════════════════════════════════════════════════════ */
.wheel-inspect{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.wheel-inspect:empty{display:none}
.wi-head{display:flex;align-items:center;gap:8px}
.wi-dot{flex:none;width:9px;height:9px;border-radius:50%}
.wi-kicker{font:600 11px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.wi-title{font:600 19px/1.32 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:8px 0 0;word-break:keep-all}
.wi-lede{font:400 14px/1.62 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:8px 0 0;max-width:68ch;word-break:keep-all}
.wi-facts{list-style:none;margin:12px 0 0;padding:0}
.wi-facts li{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font:400 13px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);word-break:keep-all}
.wi-facts li .badge{flex:none;margin-top:2px}
.wi-cta{margin:13px 0 0}
.wi-cta a{display:inline-block;font:600 12.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--surface);background:var(--ink);padding:10px 14px;border-radius:var(--r-sm);text-decoration:none}
.wi-cta a:hover{opacity:.88;color:var(--surface)}
#asm-wheel:not(:empty){margin-top:14px}
#asm-wheel .asm{margin-top:0}

@media (max-width:640px){
  .wheel-inspect{padding:13px 14px}
  .wi-title{font-size:17px}
  .wi-lede{font-size:13.5px}
}

/* ══════════════════════════════════════════════════════════════════════════
   기록 노드 설명 패널 (.node-inspect) — 관계도 바로 아래 (2026-08-05)
   위성 노드를 누르면 여기에 그 기록이 열린다. 바퀴 인스펙터(.wheel-inspect)와
   같은 상자 문법을 쓰되, 고른 기록이 먼저 읽히도록 위에 놓고 테두리를 진하게 한다.
   ══════════════════════════════════════════════════════════════════════════ */
.node-inspect{margin-top:14px;padding:16px 18px;border:1px solid var(--line2);border-left:4px solid var(--ink);border-radius:var(--r);background:var(--card)}
.node-inspect:empty{display:none}
.ni-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ni-x{margin-left:auto;font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);background:var(--chip-bg);border:1px solid var(--chip-bd);border-radius:var(--r-sm);padding:6px 9px;cursor:pointer}
.ni-x:hover{border-color:var(--ink);color:var(--ink)}
.ni-title{font:700 22px/1.28 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);margin:9px 0 0;word-break:keep-all}
.ni-sub{font:400 14px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);margin:6px 0 0;max-width:70ch;word-break:keep-all}
.ni-meta{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;padding:0;
  font:400 12.5px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink3)}
.ni-meta li{position:relative}
.ni-meta li+li::before{content:'·';position:absolute;left:-10px;color:var(--line2)}
.ni-k{font:600 10.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--rule)}

/* 네 바퀴와의 연결 — 네 칸을 나란히 */
.ni-wheels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:900px){.ni-wheels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ni-wheels{grid-template-columns:1fr}}
.ni-w{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;min-width:0}
.ni-w.home{background:var(--card);border-color:var(--line2)}
.ni-wh{display:flex;align-items:center;gap:6px;font:600 12px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.ni-wc{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:400}
.ni-home{font:400 9.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:3px;padding:2px 4px}
.ni-cd{flex:none;width:8px;height:8px;border-radius:50%}
.ni-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ni-none{display:block;margin-top:7px;font:400 11.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}
.ni-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font:500 12px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink);background:var(--card);border:1px solid var(--chip-bd);border-radius:999px;padding:5px 9px;cursor:pointer;text-align:left;word-break:keep-all}
.ni-chip:hover{border-color:var(--ink)}
.ni-chip.sm{font-size:11.5px;padding:4px 8px}
.ni-chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* 네 바퀴까지의 최단 경로 */
.ni-paths{display:flex;flex-direction:column;gap:8px}
.ni-path{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding-bottom:8px;border-bottom:1px dotted var(--rule2)}
.ni-path:last-child{border-bottom:0;padding-bottom:0}
.ni-pl{display:inline-flex;align-items:center;gap:6px;min-width:104px;font:600 12px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2)}
.ni-pr{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.ni-arr{color:var(--muted);font:400 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.ni-hops{font:400 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);margin-left:2px}
.ni-note{font:400 12px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);margin:12px 0 0;max-width:78ch;word-break:keep-all}

@media (max-width:640px){
  .node-inspect{padding:13px 14px}
  .ni-title{font-size:19px}
  .ni-sub{font-size:13.5px}
  .ni-pl{min-width:0;width:100%}
}

/* 관계도 조작 안내 — 범례와 주석 사이 */
.fig-hint{margin:8px 0 0;font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3);max-width:88ch}
html[data-lang="ko"] .fig-hint{word-break:keep-all}

/* 위성 노드 — 라벨은 회전하는 동안만 사라진다 */
.sat-n .sat-lbl{transition:opacity .14s ease}
@media (prefers-reduced-motion:reduce){.sat-n .sat-lbl{transition-duration:.001ms}}

/* 바퀴 인스펙터 안 — 자체 스토리 페이지를 가진 노드를 따로 드러낸다.
   위성 그래프의 점만으로는 아무도 못 찾는다. */
.wi-stories{margin-top:13px;padding-top:12px;border-top:1px solid var(--rule)}
.wi-stories-lab{display:block;font:600 10.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
a.wi-story{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;padding:9px 11px;margin-top:6px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--chip-bg);text-decoration:none;color:var(--ink)}
a.wi-story:hover{border-color:var(--ink);color:var(--ink)}
.wi-story-n{font:600 13.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.wi-story-s{font:400 12px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);min-width:0;word-break:keep-all}
a.wi-story:hover .wi-story-s{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════════════════
   인터랙션 — 스타일 가이드 v2
   마우스에는 미세한 눌림/떠오름, 키보드에는 또렷한 포커스 링. 움직임을 줄이도록
   설정한 사용자에게는 전부 끈다.
   ══════════════════════════════════════════════════════════════════════════ */
.chip,.hop,.row-toggle,.theme-btn,.seg button,.acc-btn,.rail-toggle,.explorer,
.feat .ft-cta,.wi-cta a,.hfind-x,.hfind-i{
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.chip:active,.hop:active,.row-toggle:active,.theme-btn:active,.seg button:active,
.acc-btn:active,.rail-toggle:active{transform:translateY(1px)}
a.feat,a.pkg-card,.ncard,.pcell{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .chip,.hop,.row-toggle,.theme-btn,.seg button,.acc-btn,.rail-toggle,.explorer,
  .feat .ft-cta,.wi-cta a,.hfind-x,.hfind-i,a.feat,a.pkg-card,.ncard,.pcell{
    transition-duration:.001ms}
  a.feat:hover,.pcell:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   첫 화면 주요 기능 시연 (2026-08-04 · 2026-08-06 인라인으로 전환)
   시연 한 편(.ds*) = 머리 + 도판(.dg*) + 네 단계 설명 + 실제 화면 iframe.

   왜 바꿨나 — 종전에는 런처 카드 4장(.dl*)을 눌러야 팝업(.dm*)이 열렸다.
   누른 사람만 시연을 봤다. 클릭을 없애고 첫 화면에 그대로 펴 놓는다.
   첫 화면이 길어지는 것은 감수한다(국장님 지시, 2026-08-06).
   .dl* · .dm* 규칙과 <dialog> 는 그래서 지웠다 — 참조하는 곳이 없다.

   클래스 이름을 전부 접두사로 묶었다. 시안에서 쓴 .cell/.cap/.steps/.pop 같은
   일반 이름은 이 공용 시트에서 다른 것과 부딪힐 수 있어 쓰지 않는다.

   주의 — 도판에서 색을 덮어쓸 때는 fill=/stroke= 표현 속성이 아니라
   인라인 style 을 써야 한다. 표현 속성은 아래 .dg-* 클래스 규칙에 밀린다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--ring:#b3261e;--shadow-3:0 24px 70px rgba(20,22,27,.28),0 4px 14px rgba(20,22,27,.14)}
html[data-theme="dark"]{--ring:#f0918a;--shadow-3:0 24px 70px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.5)}

/* ── 묶음 머리 ────────────────────────────────────────────────────────── */
.ds-sec{margin-top:40px;border-top:1px solid var(--rule-strong);padding-top:22px}
.ds-shead{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
/* 설명은 언제나 제 줄을 가진다(flex-basis 100%). 종전 320px 로는 넓은 화면에서
   머리글 · 멈춤 단추 · 설명이 한 줄에 끼어 앉아 단추가 글 사이에 박혀 보였다. */
.ds-sub{font:400 14px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink3);flex:1 1 100%;min-width:0;margin:0;max-width:104ch}
/* 묶음 끝에서 나머지 인터랙티브(전체 목차)로 넘기는 한 줄 */
.ds-note{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--muted);max-width:96ch}
html[data-lang="ko"] .ds-sub,html[data-lang="ko"] .ds-note,html[data-lang="ko"] .ds-title,
html[data-lang="ko"] .ds-desc,html[data-lang="ko"] .ds-cap-t,html[data-lang="ko"] .ds-src{word-break:keep-all}

/* ── 시연 한 편 ───────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   자동 시연 무대 (.shw) — 2026-08-06 3판
   왼쪽 레일에 기능 목록, 오른쪽 무대에 지금 편 하나. 저절로 넘어간다.
   진행은 atlas.js 의 show* 함수가 몬다. 여기서는 자리와 띠만 만든다.

   2판은 .ds 여섯 편을 세로로 쌓았다(각 편에 위 테두리를 두른 구분선). 그래서
   이 구역만 4,000px 을 넘었고 아래쪽 편은 아무도 보지 않았다. 지금은 한 자리다.

   숨은 편을 display:none 으로 두는 까닭 — visibility 나 opacity 로 감추면 자리를
   그대로 먹어서 무대가 여섯 편 높이가 된다. display:none 은 자리를 없애면서도
   iframe 을 내리지 않으므로, 한 번 실은 실제 화면이 다시 받아지지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── 폭을 뷰포트가 아니라 이 구역의 폭으로 판단한다 ──────────────────────
   첫 화면은 본문 + 오른쪽 목차 레일의 두 칸이다. 그래서 뷰포트가 1024px 일 때
   이 구역에 실제로 주어지는 폭은 610px 남짓이다. 처음에는 @media(max-width:980px)
   로 갈랐다가 1024px 에서 문서가 1140px 로 넘쳤다 — 뷰포트는 넓은데 자리는 좁은
   경우를 뷰포트 기준으로는 알 수 없다. 컨테이너 질의로 바꾼다.
   저장소에 이미 같은 방식이 있다(.foot-brand 의 container-type). */
.shw{container-type:inline-size}
/* 기본은 좁은 자리 — 레일을 무대 위의 가로 목록으로 눕힌다. 세로로 두면 목록만으로
   한 화면을 먹는다. 가로 스크롤은 지금 편을 보이는 자리로 끌어 준다. */
.shw-body{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px;align-items:start}
.shw-rail{list-style:none;margin:0;padding:0 0 4px;display:flex;flex-direction:row;gap:8px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shw-rail > li{flex:0 0 auto;scroll-snap-align:start}
.shw-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;width:186px;
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px 12px;color:var(--ink2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
/* 넓은 자리 — 레일을 왼쪽에 세운다 */
@container (min-width:760px){
  .shw-body{grid-template-columns:minmax(196px,252px) minmax(0,1fr);gap:18px 24px}
  .shw-rail{flex-direction:column;gap:5px;overflow:visible;padding:0}
  .shw-item{width:100%;background:transparent;border-color:transparent}
  .shw-item[aria-pressed="true"]{background:var(--sunken);border-color:var(--line)}
}
.shw-item:hover{background:var(--hover);color:var(--ink)}
/* 지금 편. 왼쪽에 그 편의 색으로 기둥을 세운다 — 무대의 도판·단계 색과 같은 값이다. */
.shw-item[aria-pressed="true"]{background:var(--sunken);border-color:var(--line);color:var(--ink)}
.shw-item[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ac,var(--accent))}
.shw-no{grid-row:1 / span 2;align-self:center;font:700 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:.04em}
.shw-item[aria-pressed="true"] .shw-no{color:var(--ac,var(--accent))}
.shw-tx{min-width:0}
.shw-k{display:block;font:600 9.5px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.shw-t{display:block;margin-top:3px;font:600 13px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  /* 제목이 길다(무대의 h3 와 같은 글이다). 레일에서는 두 줄로 자른다 — 자르지
     않으면 목록이 다섯 줄짜리 칸으로 늘어나 '목록' 으로 읽히지 않는다. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-lang="ko"] .shw-t{word-break:keep-all}
/* 남은 시간 띠. 지나간 편은 꽉 차 있고 앞으로 올 편은 비어 있다 — 그래서 목록이
   진행 상황을 그대로 보인다. 너비는 JS 가 단계마다 옮기고 여기서 그 사이를 잇는다. */
.shw-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.shw-bar > i{display:block;height:100%;width:0;background:var(--ac,var(--accent));
  transition:width .3s linear}
/* 멈췄을 때. 띠가 그냥 서 있으면 고장으로 읽히므로 옅게 눌러 둔다. */
.shw-off .shw-bar > i{opacity:.4}
.shw-play{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink2);background:var(--chip-bg);border:1px solid var(--chip-bd);
  border-radius:999px;padding:6px 11px}
.shw-play:hover{border-color:var(--ink);color:var(--ink)}
.shw-ico{font-size:9px;line-height:1}
/* 무대 — 여섯 편을 한 칸에 겹쳐 놓고 지금 편만 보인다.
   ══════════════════════════════════════════════════════════════════════════
   display:none 으로 감추지 않는 까닭 — 편이 넘어갈 때 페이지가 튄다.
   ══════════════════════════════════════════════════════════════════════════
   처음에는 숨은 편을 display:none 으로 두었다. 그러면 무대 높이가 지금 편의
   높이가 되고, 편마다 높이가 다르므로(실측 1005 · 1412 · 1435 · 1480px) 넘어갈
   때마다 페이지 전체가 최대 475px 씩 튀었다. 아래쪽 목차를 읽는 사람에게는
   글이 저절로 움직이는 것으로 보인다.
   지금은 여섯 편을 같은 격자 칸(grid-area:1/1)에 겹쳐 두고 visibility 로만
   가린다. 그래서 무대 높이가 '가장 높은 편' 으로 한 번에 정해지고 다시 바뀌지
   않는다. 언어나 폭이 바뀌어도 CSS 가 알아서 다시 정하므로 JS 로 높이를 재서
   박아 둘 필요가 없다.
   visibility:hidden 은 (1) 자리를 지키고 (2) iframe 을 내리지 않으며
   (3) 그 안의 단추를 탭 순서와 화면 읽개에서 함께 뺀다. 세 가지가 모두 필요하다.
   opacity 를 같이 쓰는 것은 넘어갈 때 툭 끊기지 않게 하려는 것뿐이다. */
/* 무대도 컨테이너로 삼는다 — 편 안쪽(.ds-body)이 무대 폭을 기준으로 갈려야 한다.
   뷰포트로 재면 1024px 에서 무대는 610px 인데도 두 칸을 그리려 들어 넘친다. */
.shw-stage{min-width:0;display:grid;container-type:inline-size}
/* min-width:0 이 반드시 있어야 한다.
   격자 항목의 기본 최소 크기는 auto 이고, 그것은 '내용의 min-content 보다 작아질
   수 없다' 는 뜻이다. 2판에서 .ds 는 보통 블록이었으므로 칸 폭을 그대로 받고
   내용이 안에서 줄바꿈했다. 무대를 격자로 바꾸면서 이 규칙이 붙어, 390px 폭에서
   .ds 가 608px 로 버티고 문서가 624px 로 넘쳤다(실측). 0 으로 풀어 준다. */
.shw-stage > .ds{grid-area:1 / 1;min-width:0;visibility:hidden;opacity:0;
  transition:opacity .24s var(--ease),visibility .24s}
.shw-stage > .ds.on{visibility:visible;opacity:1}
.ds{margin:0}
/* 머리 아래에 그 편의 색으로 실선을 하나 긋는다 — 참조한 영문 사이트의 손버릇이다.
   번호 · 제목 · 규모가 한 덩어리로 묶여 다음 편과 섞이지 않는다. */
.ds-hd{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;
  padding-bottom:9px;border-bottom:1.5px solid var(--ac,var(--accent))}
.ds-no{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ac,var(--accent));color:#fff;
  font:700 12.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
html[data-theme="dark"] .ds-no{color:#14161b}
.ds-ht{flex:1 1 320px;min-width:0}
.ds-kick{font:600 11px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ac,var(--accent))}
.ds-title{margin:4px 0 0;font:600 21px/1.28 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.ds-desc{margin:6px 0 0;font:400 14px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink2)}
/* 머리 오른쪽 끝의 규모 한 줄. 제목이 길어 줄바꿈되면 아래로 떨어진다.
   그래서 text-align 을 걸어 두 경우 모두 오른쪽에 붙게 한다. */
.ds-meta{flex:0 1 auto;margin-left:auto;text-align:right;
  font:600 10.5px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* 좁아지면 머리가 줄바꿈되어 번호가 제 줄로 올라간다. 그때는 규모도 제목과 같이
   왼쪽 끝에 맞춘다 — 들여쓰면 어디에도 걸리지 않는 줄이 된다. */
@media(max-width:640px){.ds-meta{margin-left:0;text-align:left}}

/* 도판은 왼쪽, 네 단계 설명은 오른쪽. 좁아지면 위아래로 쌓인다.
   설명을 한 줄씩 갈아 끼우지 않고 네 줄을 전부 펴 둔다 — 기다리지 않아도 읽힌다. */
/* 도판 | 단계 설명. 기준은 무대(.shw-stage)의 폭이다 — 뷰포트가 아니다.
   아래 @container 가 넓을 때만 두 칸으로 만든다. */
.ds-body{display:grid;grid-template-columns:1fr;gap:16px 26px;
  margin-top:16px;align-items:start}
/* 무대가 이만큼 넓으면 도판과 단계 설명을 나란히 둔다. 좁으면 도판 아래로 내린다.
   종전에는 @media(max-width:980px) 였다 — 뷰포트 기준이라 무대가 좁아도 뷰포트가
   넓으면 두 칸을 그려서 1024px 에서 가로로 넘쳤다. */
@container (min-width:620px){
  .ds-body{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.ds-fig{min-width:0}
/* 두 구역의 머리표 — 도판 위의 '도식' 과 틀 바의 '실제 화면'(.ds-fk).
   같은 크기·같은 색으로 두어 읽는 사람이 지금 무엇을 보고 있는지 헷갈리지 않게
   한다. 이 그림이 도식이라는 것, 즉 실제 화면이 아니라는 것을 먼저 밝힌다. */
.ds-zk{margin:0 0 7px;font:600 10px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--accent))}

/* ── 무대와 단계 ──────────────────────────────────────────────────────── */
.ds-stage{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:6px 6px 2px;position:relative}
.ds-stage svg{display:block;width:100%;height:auto}
.ds-tag{position:absolute;top:9px;right:11px;font:600 10px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:4px 8px}

.ds-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px}
.ds-dot{width:26px;height:5px;border-radius:3px;background:var(--line2);border:0;padding:0;cursor:pointer;
  transition:background var(--dur) var(--ease)}
.ds-dot[aria-current="true"]{background:var(--ac,var(--accent))}
.ds-dot:hover{background:var(--ink3)}
.ds-rep{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink);background:var(--card);border:1px solid var(--field-bd);border-radius:var(--r-sm);padding:8px 11px;cursor:pointer}
.ds-rep:hover{border-color:var(--ink)}

/* 네 단계 설명을 전부 편다. 지금 단계만 진하게 켜고, 눌러서 그 단계로 갈 수 있다. */
.ds-caps{list-style:none;margin:0;padding:0}
.ds-caps li{border-left:2px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ds-caps li+li{margin-top:4px}
.ds-caps li[aria-current="true"]{border-left-color:var(--ac,var(--accent));background:var(--sunken)}
.ds-cap{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:9px 11px;color:var(--ink3);
  font:400 14px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.ds-caps li[aria-current="true"] .ds-cap,.ds-all .ds-cap{color:var(--ink2)}
.ds-cap:hover{color:var(--ink)}
.ds-cap b{color:var(--ink);font-weight:600}
.ds-num{flex:none;display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--line2);color:var(--ink2);margin-top:2px;
  font:700 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.ds-caps li[aria-current="true"] .ds-num{background:var(--ink);color:var(--surface)}

.ds-stats{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.ds-stats li{font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;white-space:nowrap}
.ds-src{margin:12px 0 0;font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}

/* ── 실제 화면 끼워 넣기 ───────────────────────────────────────────────────
   시연 아래에 그 인터랙티브를 iframe 으로 그대로 붙인다. 캡처가 아니다.
   기본은 덮개(.ds-shade)가 씌워져 있다 — 그래야 휠과 손가락이 이 페이지를
   계속 넘긴다. 덮개를 누르면 그 화면으로 가고, '틀 안에서 조작' 을 켜면
   덮개가 걷혀 틀 안을 직접 만질 수 있다(데스크톱만).
   ══════════════════════════════════════════════════════════════════════════ */
.ds-live{margin-top:16px;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.ds-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 12px;border-bottom:1px solid var(--line)}
.ds-fk{flex:none;font:600 10px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--accent))}
.ds-furl{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 11.5px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.ds-fint{flex:none;font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink2);background:var(--card);border:1px solid var(--field-bd);border-radius:999px;padding:7px 11px;cursor:pointer}
.ds-fint:hover{border-color:var(--ink);color:var(--ink)}
.ds-live.on .ds-fint{background:var(--ink);border-color:var(--ink);color:var(--surface)}
/* 틀 안의 층을 못 박아 둔다. DOM 순서에 맡기면 '불러옵니다…'(.ds-load)가
   iframe 아래로 내려가 실리는 동안 흰 바닥에 가려진다.
   아래에서 위로: iframe(0) · 불러옵니다(1) · 덮개(2) */
/* 3판에서 높이를 clamp(380,58vh,660) 에서 낮췄다. 무대가 저절로 9초마다 넘어가는
   자리이므로 그 사이에 틀 안을 붙잡고 쓰는 사람은 없다 — 무엇을 하는 화면인지
   보이는 만큼이면 되고, 전체는 '전체 화면으로 열기' 가 맡는다.
   이 값은 .ds-onp 의 min-height 와 같이 두어야 한다 — 어긋나면 이 화면 안에 있는
   두 편(관계도 · 색인)에만 빈 자리가 남는다. */
.ds-frame{position:relative;height:clamp(340px,46vh,500px);background:var(--surface)}
.ds-frame iframe{display:block;position:relative;z-index:0;width:100%;height:100%;border:0}
/* 실리기 전의 자리. iframe 은 스크롤이 가까워질 때 비로소 src 를 받는다
   (atlas.js demoMount) — 네 화면을 첫 로드에 함께 내려받지 않기 위해서다.
   다 실리면 atlas.js 가 .ds-live 에 .ready 를 붙여 이 자리를 걷는다.

   틀 전체를 덮는다(inset:0). 가운데 한 점에 두고 transform 으로 당기는 방식을
   쓰지 않는다 — inset 과 transform 이 함께 걸리면 상자가 제 폭의 절반만큼
   왼쪽으로 밀려 글자가 틀 왼쪽 끝에서 잘린다(실측). 덮어야 빈 틀의 흰 바닥도
   함께 가려진다. */
.ds-load{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;padding:20px;
  font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--muted);background:var(--sunken)}
.ds-live.ready .ds-load{display:none}
.ds-shade{position:absolute;inset:0;z-index:2;display:block;text-decoration:none;background:transparent}
.ds-live.on .ds-shade{display:none}
.ds-pill{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;
  font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:999px;
  padding:11px 16px;box-shadow:var(--shadow-2)}
.ds-shade:hover .ds-pill{border-color:var(--ink)}
/* 이 첫 화면이 다시 iframe 안에 들어간 경우(atlas.js demoMount). 틀 안에 틀을
   겹치지 않고, 그 자리를 눌러 여는 띠 하나로 접는다. */
.ds-live.ds-flat .ds-frame{height:auto}
.ds-live.ds-flat .ds-frame iframe{display:none}
.ds-live.ds-flat .ds-shade{position:static;display:grid;place-items:center;padding:26px 16px;background:var(--sunken)}
.ds-live.ds-flat .ds-pill{position:static;left:auto;bottom:auto;transform:none}
.ds-live.ds-flat .ds-fint{display:none}
/* 이 화면 안에 있는 기능(관계도 · 색인) — 틀 대신 그 자리로 보내는 단추를 낸다.
   자기 자신을 iframe 으로 겹치지 않는다.
   그 자리는 비워 두지 않고 그 기능에 딸린 실제 것으로 채운다(atlas.js 의
   demoWheelListHtml · demoKindListHtml · demoTryListHtml).

   height 가 아니라 min-height 인 까닭
     아래 값은 .ds-frame 과 같다 — 이 두 편이 다른 넷보다 낮으면 무대가 '가장 높은
     편' 으로 고정된 뒤 이 편에서만 빈 자리가 크게 남기 때문이다(실측 475px).
     그런데 못 박아 두면(height) 좁은 폭에서 목록이 세로로 길어질 때 잘린다 —
     390px 에서 폴더 7줄 · 종류 6줄이 한 칸으로 서면 이 값을 넘긴다(실측).
     min-height 로 두면 바닥은 지키면서 넘칠 때만 늘어난다. 늘어나도 무대 높이는
     '가장 높은 편' 으로 한 번 정해지는 것이라 넘어갈 때 튀지 않는다. */
/* grid-template-columns:minmax(0,1fr) 가 반드시 있어야 한다.
   적지 않으면 암시적 칸이 auto 로 잡히고, justify-content:center 아래에서 auto 는
   max-content 로 부푼다 — 상자 폭에 묶이지 않는다. 390px 에서 안내문이 462px,
   폴더 목록이 570px 로 서서 356px 상자를 좌우로 각각 53px · 107px 씩 삐져나갔다
   (실측). 넘친 쪽이 왼쪽이라 문서 폭(scrollWidth)으로는 잡히지도 않는다.
   1fr 로 못 박으면 칸이 상자 폭이 되고, 가운데 정렬은 justify-items 가 맡는다. */
.ds-onp{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:center;justify-items:center;
  text-align:center;padding:22px 18px;background:var(--sunken);min-height:clamp(340px,46vh,500px)}
.ds-onp-note{margin:0;max-width:62ch;font:400 12.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}
html[data-lang="ko"] .ds-onp-note{word-break:keep-all}
.ds-onp-go{cursor:pointer;font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--surface);background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:10px 16px}
.ds-onp-go:hover{background:var(--ink2);border-color:var(--ink2)}
/* 관계도 편 — 네 바퀴에 붙은 폴더와 기록 수. 두 줄 격자로 눕혀 세로를 줄인다. */
.ds-onp-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:2px 18px;width:100%;max-width:600px}
.ds-onp-list li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dotted var(--rule2);text-align:left}
.ds-onp-dot{flex:none;width:8px;height:8px;border-radius:50%}
.ds-onp-n{flex:1 1 auto;min-width:0;font:500 12.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);word-break:keep-all}
.ds-onp-c{flex:none;font:400 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
.ds-onp-sum{margin:0;font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.04em;color:var(--ink2)}
/* 색인 편 — 실제로 걸리는 질의. 누르면 머리의 찾기 칸에 그대로 쳐 준다. */
.ds-onp-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ds-onp-q{cursor:pointer;font:500 12.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:8px 13px}
.ds-onp-q:hover{border-color:var(--ink)}
.ds-onp-q::before{content:"/ ";color:var(--muted)}
.ds-ffoot{display:flex;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.ds-full{font:600 13px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:var(--link);text-decoration:none}
.ds-full:hover{text-decoration:underline}
@media(max-width:720px){
  /* 모바일에서 틀 안 조작을 켜면 손가락이 틀에 갇혀 페이지가 넘어가지 않는다 */
  .ds-fint{display:none}
  /* 두 값을 함께 고친다 — 어긋나면 이 두 편에만 빈 자리가 남는다.
     .ds-onp 는 min- 이다(위의 설명 참고). 좁은 폭에서는 목록이 세로로 서므로
     여기서 넘어가는 쪽은 대개 .ds-onp 다. */
  .ds-frame{height:clamp(300px,52vh,430px)}
  .ds-onp{min-height:clamp(300px,52vh,430px)}
  .ds-title{font-size:18px}
  .ds-body{gap:14px}
}

/* ── 도판과 단계 애니메이션 ────────────────────────────────────────────── */
/* 아래 시간들은 atlas.js 의 SHW_STEP_MS(단계 체류, 지금 1100ms)와 한 벌이다.
   체류 시간보다 길면 그림이 끝나기 전에 다음 단계로 넘어가 미완성으로 보인다.
   한쪽만 고치지 말 것. */
.ds-stage [data-from],.ds-stage [data-only]{opacity:0;transition:opacity .32s var(--ease),transform .32s var(--ease)}
.ds-stage [data-from].on,.ds-stage [data-only].on{opacity:1}
.ds-stage .dg-pop{transform-box:fill-box;transform-origin:center;transform:scale(.55)}
.ds-stage .dg-pop.on{transform:scale(1)}
.ds-stage .dg-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--ease),opacity .28s var(--ease)}
/* .on 이 그룹에 붙는 경우도 있으므로 자손 선택자까지 함께 켠다 */
.ds-stage .dg-draw.on,.ds-stage [data-from].on .dg-draw,.ds-stage [data-only].on .dg-draw{stroke-dashoffset:0}
.ds-stage .dg-slow.dg-draw{transition-duration:.9s}
.ds-stage .dg-lift{transform-box:fill-box;transform-origin:center;transform:translateY(9px)}
.ds-stage .dg-lift.on{transform:translateY(0)}
.ds-stage text{font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
.dg-node{fill:var(--card);stroke:var(--ink2);stroke-width:1.6}
.dg-lbl{font:600 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--ink);text-anchor:middle}
.dg-sub{font:400 10px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;fill:var(--muted);text-anchor:middle}
.dg-pct{font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  fill:var(--ink2);text-anchor:middle;font-variant-numeric:tabular-nums}
.dg-edge{fill:none;stroke:var(--line2);stroke-width:1.6}
.dg-note{font:600 11px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  fill:var(--muted);text-anchor:middle;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){
  .ds-stage [data-from],.ds-stage [data-only],.ds-stage .dg-pop,.ds-stage .dg-draw,.ds-stage .dg-lift{transition:none!important}
  .ds-stage .dg-pop{transform:none}.ds-stage .dg-draw{stroke-dashoffset:0}.ds-stage .dg-lift{transform:none}
  .ds-caps li,.ds-num,.ds-dot{transition:none}
  /* 무대 자체도 움직이지 않는다 — 편은 바로 갈리고 띠는 차오르지 않는다.
     자동 진행도 켜지 않는다(atlas.js showInit 이 demoStill() 로 판단한다). */
  .shw-stage > .ds{transition:none}
  .shw-bar > i{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   전체 화면 밴드 (.pgal) — 첫 화면 하단 (2026-08-10)
   문서 19개(index 제외)를 이름 붙은 밴드 네 개로 나눠 카드로 편다.
   내용은 atlas.js 의 buildBands() 가 만들고, 밴드 정의와 카드 문구는
   data/atlas-data.js 의 ATLAS.bands · ATLAS.pageCards 에 있다.

   짜임은 뉴욕타임스 홈의 제품 밴드를 따른다 — 밴드마다 이름 · 개수 · 한 줄 설명을
   같은 줄에 놓고(좁아지면 설명이 아래로 떨어진다), 그 아래 카드 격자를 둔다.
   카드 한 장은 그림 → 아이브로 → 제목 → 요약 → 규모 순서다.

   밴드 색은 --ac 로 흘려 넣는다(네 바퀴의 도메인 색). 카드의 아이브로 · 머리
   실선 · 인터랙티브 표가 그 색을 받는다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   네 바퀴 아래 세 구역의 공통 폭 (2026-08-11)
   주요 기능 시연(.ds-sec) · 전체 화면 밴드(.pgal) · 기록 색인(.ftoc).
   셋을 같은 폭으로 묶어 가운데 둔다. 왼쪽 선이 서로 맞아야 한 페이지로 읽히고,
   좌우 여백이 저절로 같아진다.

   1060px 으로 정한 근거 — 밴드가 한 줄에 카드 세 장을 놓으므로
     (1060 - 간격 14 x 2) / 3 = 344px
   이 값이 종전 4열 시절의 281px 과 같은 무게다. 전체 폭(1388px)에 3열을 놓았을
   때는 453px 이 되어 카드가 너무 크고 여백이 사라졌다(국장님 지적).
   1460px 화면에서 좌우 여백은 각각 200px 으로 같다.

   이 한 수만 고치면 세 구역이 함께 움직인다. 좁히거나 넓히려면 여기만 만진다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--below-measure:1060px}
.ds-sec,.pgal,.ftoc{max-width:var(--below-measure);margin-left:auto;margin-right:auto}

.pgal{margin-top:40px;border-top:1px solid var(--rule-strong);padding-top:22px}
.pgal-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.pgal-sub{flex:1 1 340px;min-width:0;margin:0;font:400 13.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink3)}
.pgal-foot{margin:24px 0 0;padding-top:12px;border-top:1px solid var(--rule);font:400 12px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);max-width:96ch}

/* ── 밴드 하나 ─────────────────────────────────────────────────────────── */
.pg-band{margin-top:28px}
.pg-bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-bottom:9px;border-bottom:1.5px solid var(--ac,var(--accent))}
.pg-bd{flex:none;align-self:center;width:9px;height:9px;border-radius:50%;background:var(--ac,var(--accent))}
.pg-bt{margin:0;font:600 17px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);word-break:keep-all}
.pg-bc{font:400 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
/* 설명은 이름 오른쪽에 붙는다. 좁아지면 flex-basis 가 못 버텨 아래로 떨어진다 —
   NYT 의 'The Athletic — Sports coverage' 와 같은 자리다. */
.pg-bs{flex:1 1 320px;min-width:0;margin:0;font:400 13px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3)}

/* ── 카드 격자 (2026-08-11 고쳐 씀) ────────────────────────────────────────
   한 줄에 세 장. 마지막 줄에 한두 장만 남으면 그 카드들을 세 장짜리 줄과 같은
   크기로 두고 가운데에 놓는다 — 좌우 여백이 대칭이 된다.

   왜 grid 가 아니라 flex 인가
     grid-template-columns:repeat(3,...) 는 칸을 못 박으므로 남는 카드가 왼쪽에
     붙고 오른쪽이 통째로 빈다(실측: 카드 2장이 남은 줄의 오른쪽에 591px). 칸을
     못 박은 상태에서 마지막 줄만 가운데로 보내는 방법이 CSS grid 에는 없다.
     flex-wrap + justify-content:center 는 그것을 그냥 해 준다. 세 장이 꽉 찬 줄은
     남는 공간이 없어 가운데 정렬이 아무 일도 하지 않으므로, 두 경우가 한 규칙으로
     처리된다.

   폭을 calc 로 못 박는 까닭
     flex:1 로 늘리면 남은 카드 두 장이 줄 전체를 채우려고 커진다. 국장님 지시는
     '세 장짜리 줄과 같은 크기' 이므로 늘어나지 않게 0 0 으로 고정한다.
     간격 14px 두 개를 빼고 3 으로 나눈다. 소수점에서 세 장이 한 줄에 안 들어가는
     일을 막으려고 0.02px 을 덜어 둔다.
   ─────────────────────────────────────────────────────────────────────── */
.pg-grid{--pg-gap:14px;--pg-cols:3;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:var(--pg-gap);margin-top:14px}
.pg-grid>.pg-card{
  flex:0 0 calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols) - .02px);
  max-width:calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols) - .02px)}
/* 열을 줄이는 지점은 카드 폭으로 되짚어 정한다. 세 구역의 폭이 1060px 로 묶여
   있으므로 카드는 (min(1060, 화면-72) - 28) / 3 이다.
     1000px -> 300px   820px -> 233px   700px -> 200px
   200px 이면 썸네일과 제목이 함께 서지 못한다. 그래서 820px 에서 두 열로 내린다.
   1000px 에서 두 열로 내렸더니 카드가 457px 이 되어, 화면이 좁아지는데 카드는
   커지는 이상한 일이 생겼다(1460px 에서 344px 인데). */
@media(max-width:820px){.pg-grid{--pg-cols:2}}
@media(max-width:620px){.pg-grid{--pg-cols:1}}

/* ── 카드 한 장 ──────────────────────────────────────────────────────────
   바깥이 <div> 이고 링크는 제목을 감싼 .pg-hit 하나다. 그 ::after 를 카드 전체로
   늘려 어디를 눌러도 그 화면으로 간다. 카드를 <a> 로 감싸지 않는 까닭은 안에
   '이어지는 기록' 단추가 들어왔기 때문이다 — <a> 안의 <button> 은 잘못된
   마크업이고 키보드 이동이 깨진다. 참조한 뉴욕타임스 홈도 같은 기법을 쓴다.
   ─────────────────────────────────────────────────────────────────────── */
.pg-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pg-card:hover{border-color:var(--ink);box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* 카드 전체를 누를 수 있게 늘린 링크. 단추(.pg-rel)는 이보다 위 층에 둔다. */
a.pg-hit{text-decoration:none;color:inherit}
a.pg-hit::after{content:'';position:absolute;inset:0;z-index:1}
/* 초점 테두리. 기본값은 링크 자신에 두른다 — 어느 브라우저에서든 보여야 한다.
   :has() 를 쓸 수 있는 곳에서만 그것을 카드 전체로 옮긴다. @supports 로 감싸지
   않고 링크 쪽 테두리를 그냥 지우면, :has() 를 모르는 브라우저에서 초점이 아무
   표시 없이 사라진다 — 키보드로 쓰는 사람이 제 자리를 잃는다. */
a.pg-hit:focus-visible{box-shadow:var(--focus)}
@supports selector(:has(*)){
  a.pg-hit:focus-visible{box-shadow:none;outline:none}
  .pg-card:has(a.pg-hit:focus-visible){box-shadow:var(--focus);border-color:var(--accent)}
}

/* 그림 자리. 비율을 못 박아 두어 PNG 가 들어와도 레이아웃이 밀리지 않는다.
   object-position 을 위로 붙이는 까닭 — 잘라 낸 도판은 위쪽이 본문이다. */
.pg-shot{position:relative;display:block;aspect-ratio:672/420;background:var(--sunken);border-bottom:1px solid var(--line);overflow:hidden}
.pg-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
/* 그려 낸 표지 (2026-08-11). 찍을 도판이 없는 화면에 쓴다.
   dg* 계열과 같은 viewBox(560x280 = 2:1)이고 칸은 672x420(1.6:1)이므로 위아래에
   여백이 남는다. 그것을 가운데에 놓고 바닥은 sunken 으로 깔아, 찍은 그림(꽉 찬
   사각형)과 한눈에 구별되게 한다 — 그린 것을 찍은 척하지 않는다. */
.pg-shot-fig{display:block;background:var(--sunken)}
/* viewBox 가 칸과 같은 비율(560x350 = 1.6:1)이므로 폭만 100% 로 두면 꽉 찬다 */
.pg-shot-fig svg{display:block;width:100%;height:100%}
.pg-shot-fig text{font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif}
/* ── 표지 안의 상자 글자는 언어별로 크기를 다르게 둔다 (2026-08-11) ─────────
   SVG 글자는 줄바꿈이 없어서 상자를 그냥 넘어 나간다. 그리고 영문이 한국어보다
   훨씬 길다 — 'Promulgated' 대 '공포', 'Committee' 대 '소위'. 한 크기로 두면
   한국어에 맞추면 영문이 넘치고, 영문에 맞추면 한국어가 상자 안에서 작아진다.
   실제로 18px 한 크기로 두었다가 영문 'Promulgated' 가 상자를 6px 넘쳤다
   (verify-bands.mjs 의 넘침 검사가 잡았다).
   크기를 인라인 style 로 박으면 이 규칙이 지므로, 생성기에서는 클래스만 준다.
   선택자를 .pg-shot-fig 로 한 단계 감싸 .dg-lbl 보다 구체적으로 만든다.
   ─────────────────────────────────────────────────────────────────────── */
.pg-shot-fig .cv-step{font-size:18px}
html[data-lang="en"] .pg-shot-fig .cv-step{font-size:13.5px}
.pg-shot-fig .cv-org{font-size:15px}
html[data-lang="en"] .pg-shot-fig .cv-org{font-size:13px}
/* '도식' 표. 종류 표(.pg-tag)는 오른쪽 위이므로 이것은 왼쪽 위에 둔다. */
.pg-zk{position:absolute;top:9px;left:9px;font:600 9.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 8px}
html[data-lang="ko"] .pg-zk{letter-spacing:.02em}

/* 아직 굽지 않은 자리. 밴드 색 띠 한 줄과 파일명만 낸다 — 카드가 이미 글로 적은
   것을 되풀이하지 않으므로 마크업에서 aria-hidden 이다. */
.pg-shot-ph{display:grid;place-items:center;box-shadow:inset 0 3px 0 var(--ac,var(--accent))}
.pg-ph-f{font:500 12.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--muted)}
/* 모서리 표 — 인터랙티브인지 화면인지. 12편과 7개를 눈으로 가르는 유일한 표시다. */
.pg-tag{position:absolute;top:9px;right:9px;font:600 9.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 8px}
.pg-int .pg-tag{color:var(--ac,var(--accent));border-color:var(--ac,var(--accent))}

.pg-body{flex:1;display:flex;flex-direction:column;padding:12px 14px 13px}
.pg-k{font:600 9.5px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--accent))}
/* 제목 3줄 · 요약 2줄에서 끊는다. 인터랙티브의 원문 설명은 200낱말이 넘어서
   그대로 두면 카드 높이가 제멋대로가 된다. */
.pg-t,.pg-d{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.pg-t{-webkit-line-clamp:3;margin-top:6px;font:600 15px/1.38 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink)}
.pg-card:hover .pg-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pg-d{-webkit-line-clamp:2;margin-top:6px;font:400 12.5px/1.55 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink3)}

/* ── 이어지는 기록 (2026-08-10) ───────────────────────────────────────────
   그 화면이 관계도에서 실제로 이어지는 기록 이름을 낱개 단추로 낸다. 누르면 이
   페이지 맨 위 네 바퀴 도판에서 그 기록이 열린다(pickNodeInGraph).
   구분자로 이어 붙이지 않는 까닭 — 기록 이름 자체에 가운뎃점이 든 것이 있다
   ('공정거래법 31조 · 지정'). 단추로 끊어야 몇 건인지 읽힌다.
   z-index 2 는 카드 전체로 늘린 링크(.pg-hit::after, z-index 1) 위다.
   ─────────────────────────────────────────────────────────────────────── */
.pg-rel{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:11px}
.pg-rl{flex-basis:100%;font:600 9px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.pg-rb{font:500 11px/1.3 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink2);background:var(--chip-bg);border:1px solid var(--chip-bd);border-radius:999px;padding:4px 9px;cursor:pointer;word-break:keep-all;max-width:100%;text-align:left}
.pg-rb:hover{border-color:var(--ac,var(--ink));color:var(--ink)}

/* 규모 줄은 카드 맨 밑에 붙는다(margin-top:auto) — 그래야 제목 길이가 달라도
   한 줄에 놓인 카드들의 밑변이 맞는다. NYT 의 '7 min read' 자리다.
   눈금 한 줄은 flex-basis:100% 로 제 줄을 차지하고, 그 아래에 규모와 출처
   배지가 나란히 온다. */
.pg-m{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.pg-m::before{content:'';flex-basis:100%;height:1.5px;max-width:26px;background:var(--ac,var(--accent));margin-bottom:7px}
/* 규모 줄에는 text-transform 을 걸지 않는다. 이 줄은 라벨이 아니라 값이고,
   그 안에 대소문자가 뜻을 가진 기호가 있다 — '평균 r = 0.718' 의 r 은 상관계수다.
   uppercase 를 걸면 R 이 되어 다른 값을 가리킨다(실제로 그렇게 나왔다).
   대문자는 라벨인 .pg-k · .pg-rl 에만 둔다. */
.pg-mt{flex:1 1 auto;min-width:0;font:600 10.5px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--muted)}
.pg-pv{flex:none;display:inline-flex;align-items:center;gap:5px}
.pg-pv .badge{font-size:9px;padding:2px 6px}
.pg-pn{font:500 9.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}

/* 한글 조판 — 자간을 벌리면 낱자가 흩어져 읽힌다(.fv-foot 과 같은 사정이다) */
html[data-lang="ko"] .pg-k,html[data-lang="ko"] .pg-mt,html[data-lang="ko"] .pg-rl{letter-spacing:.02em}
html[data-lang="ko"] .pgal-sub,html[data-lang="ko"] .pgal-foot,html[data-lang="ko"] .pg-bs,
html[data-lang="ko"] .pg-t,html[data-lang="ko"] .pg-d{word-break:keep-all}
@media (prefers-reduced-motion:reduce){
  .pg-card{transition:none}
  .pg-card:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   기록 색인 (.ftoc) — 첫 화면 맨 밑 (2026-08-05 · 2026-08-10 두 블록 이관)
   오른쪽 레일은 접힌 아코디언이고 푸터는 폴더마다 5개만 낸다. 여기서 화면 8개와
   폴더별 기록 전부(부제까지), 인터랙티브 화면을 한 번에 편다.
   내용은 atlas.js 의 buildFullToc() 이 만든다.
   ══════════════════════════════════════════════════════════════════════════ */
.ftoc{margin-top:40px;border-top:1px solid var(--rule-strong);padding-top:22px}
.ftoc-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.ftoc-sub{flex:1 1 340px;min-width:0;margin:0;font:400 13.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink3)}
html[data-lang="ko"] .ftoc-sub,html[data-lang="ko"] .ftoc .ft-s,html[data-lang="ko"] .ftoc-foot{word-break:keep-all}

/* 폴더별 기록 전부.
   2026-08-10: 이 위에 있던 .ftoc-pages(화면 8개 카드) 블록과 아래에 있던
   .ftoc-int(인터랙티브 12편 카드) 블록을 지웠다. 같은 것을 전체 화면 밴드
   (.pgal)가 썸네일과 규모 줄까지 붙여 내므로 중복이었다. 자세한 사정은
   atlas.js 의 buildFullToc() 위 주석에 적었다. */
.ftoc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 22px}
@media(max-width:1180px){.ftoc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.ftoc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ftoc-grid{grid-template-columns:1fr}}
.ft-col{min-width:0}
.ft-h{display:flex;align-items:center;gap:7px;margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--rule-strong);font:600 13px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--ink);word-break:keep-all}
.ft-dot{flex:none;width:8px;height:8px;border-radius:50%}
.ft-c{margin-left:auto;font:400 12px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
.ft-list{list-style:none;margin:0;padding:0}
.ft-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:5px 0;border-bottom:1px dotted var(--rule2)}
.ft-list li:last-child{border-bottom:0}
a.ft-i{flex:1 1 auto;min-width:0;text-decoration:none;color:var(--ink)}
a.ft-i:hover .ft-n{text-decoration:underline}
.ft-n{display:block;font:500 13.5px/1.4 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;word-break:keep-all}
.ft-s{display:block;margin-top:1px;font:400 11.5px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted)}
.ft-list .badge{flex:none;font-size:9.5px;padding:2px 6px}
.ft-go{flex:none;font:500 10.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.04em;color:var(--ink2);background:var(--chip-bg);border:1px solid var(--chip-bd);border-radius:999px;padding:4px 8px;cursor:pointer}
.ft-go:hover{border-color:var(--ink);color:var(--ink)}
.ft-note{margin:8px 0 0;font:400 11.5px/1.5 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);word-break:keep-all}
.ft-all{margin:9px 0 0;font:600 11.5px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;letter-spacing:.03em}

.ftoc-foot{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--rule);font:400 12px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;color:var(--muted);max-width:96ch}
/* ══════════════════════════════════════════════════════════════════════════
   다섯 줄 카드 — 푸터 왼쪽 기둥 (2026-08-06 · 2026-08-07 자리·크기 고침)
   맨 위의 로고는 받은 파일을 그대로 놓는다(.lockup). 다섯 줄은 우리가 쓰는
   글이므로 마크업으로 짠다. 그 선을 어디에 긋는지는 atlas.js 의
   buildFiveCard() 위 주석에 적었다.

   2026-08-07 — 크기를 줄여 푸터로 옮겼다
     종전에는 본문 맨 밑에 본문 폭(1000px 넘는다)으로 누워 있었고, 제목이
     clamp(30px,4.1vw,54px) 이라 화면 폭에 따라 54px 까지 커졌다. 지금은 폭
     420px 칸(.foot-card) 안에 들어가므로 치수를 그 폭에 맞춰 다시 잡았다.
       바깥 여백 40px → 22px      제목 54px → 22px      머리글자 30px → 21px
       로고 237px → 96px          이름 19px → 14px      설명 15px → 12.5px
     줄인 것은 치수뿐이다 — 다섯 줄, 문구, 대비, 마크업 구조는 그대로다.

   배경은 테마와 무관하게 먹색이다. 시안이 그렇고, 푸터 왼쪽에서 브랜드
   덩어리가 된다. 그래서 이 안의 색은 var(--ink) 같은 테마 토큰을 쓰지 않고
   고정값으로 박는다 — 라이트에서 --ink 는 먹색이라 검정 위에서 사라진다.

   로고에는 그 예외를 두지 않는다. 받은 파일의 색을 바꾸지 않고, 로고가 놓일
   흰 판을 깔아 준다(.lockup 의 background). 시안에서도 이 자리는 흰 사각형이었다.
   ══════════════════════════════════════════════════════════════════════════ */
.fivecard{background:#0a0b0d;border:1px solid #24272e;border-radius:var(--r-lg);
  padding:22px 24px 18px;color:#fff}
/* 카드가 좁아졌으므로 로고도 왼쪽에 맞춘다 — 가운데에 두면 제목·다섯 줄과
   왼쪽 선이 어긋난다. 96px 이면 흰 판이 94px 이고 락업의 'SEOUL ECONOMIC DAILY'
   줄이 5.8px 로 아직 읽힌다. */
.fv-mark{display:flex;justify-content:flex-start;--lk-w:96px}
.fv-h{margin:16px 0 0;font:700 22px/1.2 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:-.02em;color:#fff}
html[data-lang="ko"] .fv-h{letter-spacing:-.01em;word-break:keep-all}
.fv-list{list-style:none;margin:16px 0 0;padding:0}
/* 세 칸 — 머리글자 · 이름 · 설명. 420px 카드의 속 폭 372px 에서
   22 + 12 + 84 + 12 = 130 을 쓰고 설명에 242px 이 남는다. */
.fv-row{display:grid;grid-template-columns:22px 84px 1fr;align-items:baseline;
  gap:0 12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.16)}
.fv-row:first-child{border-top:0}
/* 머리글자 A·T·L·A·S. 오른쪽 이름의 첫 글자를 크게 세운 장식이라 aria-hidden 이다. */
.fv-l{font:700 21px/1 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:0;color:#fff}
.fv-t{font:700 14px/1.35 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  color:#fff;word-break:keep-all}
/* 한국어 화면의 영문 병기 (2026-08-07). 영어를 위, 한국어를 아래로 세운다.
   한 줄에 나란히 두지 않는 까닭 — 이름 칸이 84px 이라 'Articles 기사' 가 아무
   데서나 접힌다. 블록으로 두면 접히는 자리가 정해진다.
   영어를 위에 두는 것은 왼쪽 머리글자와 같은 줄에 오게 하려는 것이다
   (.fv-row 가 align-items:baseline 이라 첫 줄의 기준선에 그 글자가 맞는다).
   색은 설명과 같은 #b7bcc6 이다 — #0a0b0d 바닥 대비 10.3 : 1 로 AAA 를 넘긴다. */
.fv-t .fv-en{display:block;font:600 11px/1.25 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.01em;color:#b7bcc6}
/* 설명은 흰색을 낮춘 회색이다. #0a0b0d 바닥 대비 10.3 : 1 로 AAA 를 넘긴다.
   아래 .fv-foot 의 #9aa0ab 는 7.6 : 1 이다. 글자를 줄였어도 대비는 그대로다. */
.fv-d{font:400 12.5px/1.45 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;color:#b7bcc6;word-break:keep-all}
.fv-foot{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  font:600 9.5px/1.6 'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#9aa0ab}
.fv-foot .fv-dot{margin:0 6px;color:#5b606b}
.fv-url{text-transform:none;letter-spacing:.04em}
/* 한글은 자간을 벌리면 낱자가 흩어져 읽힌다 — '기 업  지 형 도' 처럼 보였다 */
html[data-lang="ko"] .fv-foot{letter-spacing:.02em;font-size:10.5px}
/* 카드가 화면 폭을 따라 줄어드는 구간(.foot-card 가 100% 가 되는 1080px 아래).
   설명을 이름 밑으로 내린다 — 세 칸을 지키면 설명이 한 낱말씩 끊긴다. */
@media(max-width:520px){
  .fivecard{padding:18px 16px 14px}
  .fv-row{grid-template-columns:22px 1fr;gap:2px 10px}
  .fv-d{grid-column:2}
}