:root{--c1-ink:#3277ca;--c1-tint:#d7e7fa;--c1-on:#0a0b0d;--c2-ink:#c55123;--c2-tint:#f7ded4;--c2-on:#0a0b0d;--c3-ink:#15865f;--c3-tint:#d1ece2;--c3-on:#0a0b0d;--c4-ink:#756cbd;--c4-tint:#e9e7fb;--c4-on:#0a0b0d;--c5-ink:#c44b77;--c5-tint:#f7dce6;--c5-on:#0a0b0d;--c6-ink:#288833;--c6-tint:#d5ebd8;--c6-on:#0a0b0d;--c7-ink:#bf5555;--c7-tint:#fae1e1;--c7-on:#0a0b0d;--c8-ink:#965ebe;--c8-tint:#efe2f9;--c8-on:#0a0b0d;--c9-ink:#4c8327;--c9-tint:#deecd5;--c9-on:#0a0b0d;--c10-ink:#af5a8c;--c10-tint:#f3e0eb;--c10-on:#0a0b0d}.cat-car{--cat:#2b2bd9;--cat-on:#ffffff;--cat-ink:#2b2bd9}
/* FactInView 화면 — 흰 판 하나(옛 다크 셸 + v2 덮개를 합침 · 계획 3b Task 2 · 설계 시각 개선 §4.2) · 개체 색 = 이름표(그달 상위 10 · 타워 줄 · 지도 칸 · 시상대 면이 같은 모델 = 같은 색 · Ryan 11-03) · 옅은 면 + 진한 숫자(D4) · 추정 = 호박색 표지 · 숫자는 콘덴스드 고정폭
   금지 = 크림 바탕 · 4색 · 그림자 카드 · 알약 배지 · 번호 원 · 장식 그라데이션 · 제목 위 말머리 · 섹션 번호 (impeccable craft-floor) · 작은 글자 색은 -ink 판만 (흰 판 4.5:1 · tone.py 가 생성) */
:root{
  color-scheme:light;
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f4f4f4;--line:#ececec;--line-2:#dcdcdc;
  --fg:#121212;--muted:#5d5d5d;--faint:#767676;
  --dom:#3e74d1;--dom-fill:#2c64c9;--imp:#b26135;--imp-fill:#bf5827;--none-fill:#d7d7d7;   /* 흰 판 글자 4.5:1 판 (tone.ink · 계획 3b Task 0) · 칸 채움은 흰 글자 4.5:1 */
  --est:#957025;--link:#1f5fbf;                                       /* 추정 = 호박색의 진한 판 — #f5b83d 는 흰 판 1.78 */
  --hatch:#0000004d;--range:#121212;--ph:#e9e9e9;--ph-2:#f2f2f2;--tick:#c9c9c9;          /* 사진 자리 · 작은 사진 자리 · 연표 눈금 */
  --pop:#ffe14d;   /* 분야 칩 노랑 (발랄 v1 · Ryan 11-09 밤) */
  --c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#9085e9;--c5:#d55181;--c6:#2e9a3a;--c7:#e66767;--c8:#b06ee0;--c9:#5c9e2f;--c10:#c2649b;   /* 개체 색 정본(진한 판) — -ink·-tint·-on 은 tone.py 가 생성해 style.css 첫 줄에 싣는다 · 이웃 순위 ΔE ≥ 25(흰 판 실측 최소 28.5) · 노랑 계열 없음(호박색 = 추정 전용) */
  --on-fill:#ffffff;--on-fill-2:#ffffffd9;--head-fill:#121212cc;--on-light-2:#ffffffb3;--shadow:#0000;--shadow-2:#0000;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --num:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;
  --r:10px;
  --acc:var(--c1);--acc-ink:var(--c1-ink);--acc-tint:var(--c1-tint);
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.65 var(--sans);word-break:keep-all;font-feature-settings:"tnum"}
::selection{background:var(--dom);color:var(--on-fill)}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--on-fill)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:4px}
header,main,footer{max-width:1920px;margin:0 auto;padding:0 clamp(16px,2.5vw,40px)}

/* 셸 — 중계 화면 윗줄 */
header{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
header .brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--fg)}
header .brand small{font:600 13px/1 var(--num);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
header .brand::before{content:"";width:6px;height:18px;border-radius:2px;background:linear-gradient(var(--dom) 0 50%,var(--imp) 50% 100%)}
header nav{display:flex;gap:4px}
header nav a{padding:6px 10px;border-radius:6px;font-size:14px;color:var(--muted);text-decoration:none}
header nav a:hover{color:var(--fg);background:var(--surface-2)}
form.search{position:relative;margin-left:auto}
form.search input{font:inherit;font-size:14px;padding:7px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--fg);width:200px}
form.search input::placeholder{color:var(--faint)}
form.search .hits{position:absolute;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:4px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;z-index:5;min-width:240px;box-shadow:0 12px 32px var(--shadow)}
form.search .hits:empty{display:none}
form.search .hits a{display:block;padding:7px 10px;border-radius:6px;color:var(--fg);text-decoration:none}
form.search .hits a:hover{background:var(--surface)}

/* 본문 글 */
h1{font-size:22px;line-height:1.35;letter-spacing:-.02em;margin:26px 0 6px;text-wrap:pretty}
h2{font-size:17px;letter-spacing:-.01em;margin:36px 0 10px}
.lead{color:var(--muted);margin:0 0 4px}
.absent{color:var(--faint);font-size:13px;margin:28px 0 0}
.updated{color:var(--faint);font:500 13px/1.4 var(--num);letter-spacing:.03em;margin:0 0 18px}

/* 홈 앱 — 세션 띠(큰 숫자) · 칩 · 차트 둘 */
.app{margin:4px 0 8px}
dl.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.kpi{padding:12px 16px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi dt{font-size:12.5px;color:var(--muted)}
.kpi dd{margin:0}
.kpi dd:not(.kpi-note){font:700 30px/1.15 var(--num);letter-spacing:.005em;margin-top:2px}
.kpi:first-child dd:not(.kpi-note){font-size:38px}
.kpi-note{font-size:12px;color:var(--faint);margin-top:2px}
@media (max-width:560px){dl.kpis{grid-template-columns:1fr 1fr}.kpi{padding:8px 12px;border-bottom:1px solid var(--line)}.kpi:nth-child(even){border-right:0}.kpi:nth-last-child(-n+2){border-bottom:0}.kpi dt{font-size:11.5px}.kpi dd:not(.kpi-note){font-size:20px}.kpi:first-child dd:not(.kpi-note){font-size:22px}.kpi-note{font-size:11px;line-height:1.35}}
.chips{margin:0 0 14px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--line-2);padding:5px 12px;border-radius:999px;margin:0 6px 8px 0;cursor:pointer;font-size:13.5px;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.chips label small{font:600 12px/1 var(--num);color:var(--faint)}
.chips label:hover{color:var(--fg);border-color:var(--muted)}
.chips input:checked+label{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chips input:checked+label small{color:var(--on-light-2)}
.chips input:focus-visible+label{outline:2px solid var(--fg);outline-offset:2px}
.chips-note{font-size:12.5px;color:var(--faint);margin:2px 0 0}
.chart-svg [data-tags]{transition:opacity .2s ease-out}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin:16px 0;align-items:start}
.split-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.split-even>div{display:flex;flex-direction:column}
.split-even>div>figure.chart{flex:1}                                  /* 나란한 두 카드는 높이를 맞춘다 */
@media (max-width:980px){.split,.split-even{grid-template-columns:minmax(0,1fr)}}

/* 공유 카드 — 머리(관조 · 제목 · 기간) + SVG + 접힌 표 · 한 장만 떼어 가도 홀로 선다 */
figure.chart{margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 0 4px;overflow:hidden;scroll-margin-top:16px}
figure.chart:target{border-color:var(--muted)}
.card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.card-mark{font:800 11px/1 var(--sans);color:var(--bg);background:var(--fg);padding:4px 6px;border-radius:4px;letter-spacing:.02em}
.card-title{font-weight:700;font-size:15px;letter-spacing:-.01em}
.card-period{font:600 12.5px/1 var(--num);letter-spacing:.04em;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:4px 9px}
.card-copy{margin-left:auto;font:inherit;font-size:12.5px;color:var(--muted);background:none;border:1px solid var(--line-2);border-radius:6px;padding:4px 10px;cursor:pointer}
.card-copy:hover{color:var(--fg);border-color:var(--muted)}
.chart-svg{width:100%;height:auto;display:block;font:12px var(--sans);padding:10px 12px 0}
.chart-svg text{fill:var(--fg)}
.chart-svg .cap{fill:var(--muted);font-size:11px}
.chart-svg .wm{fill:var(--faint);font:600 10px var(--num);letter-spacing:.08em}
.chart-svg .tick{fill:var(--faint);font:600 11.5px var(--num);letter-spacing:.03em}
.chart-svg .rk-axis{fill:var(--faint)}
.chart-svg .grid{stroke:var(--line);stroke-width:1}
.chart-svg .axis{stroke:var(--line-2)}
.chart-svg .legend text{fill:var(--muted);font-size:11px}
.chart-svg .tone-dom .fill,.chart-svg .sw-0{fill:var(--dom-fill)}
.chart-svg .tone-imp .fill{fill:var(--imp-fill)}
.chart-svg .tone-none .fill{fill:var(--none-fill)}
.chart-svg .cell .lbl,.chart-svg .cell .val,.chart-svg .cell .rk{fill:var(--on-fill)}
.chart-svg .cell .lbl{font-weight:700;font-size:12.5px}
.chart-svg .cell .lbl-s{font-size:10px;font-weight:600}
.chart-svg .cell .val{font:600 13px var(--num)}
.chart-svg .cell .val-l{font-size:19px;font-weight:700}
.chart-svg .cell .rk{font:600 12px var(--num);fill:var(--on-fill-2)}
.chart-svg .edge{fill:none;stroke:var(--surface);stroke-width:1.5}
.chart-svg .brand-edge{fill:none;stroke:var(--surface);stroke-width:4}
.chart-svg .brand-head rect{fill:var(--head-fill)}
.chart-svg .brand-head text{fill:var(--on-fill);font:700 10px var(--sans);letter-spacing:.02em}
.chart-svg .hatch,.chart-svg .sw-1{fill:url(#gw-hatch)}
.chart-svg .sw-1{stroke:var(--line-2)}
.chart-svg .hatch-line{stroke:var(--hatch);stroke-width:2.5}
.chart-svg .est-tick{fill:var(--est)}
.chart-svg .range,.chart-svg .sw-2{fill:none;stroke:var(--range);stroke-dasharray:4 3;stroke-width:1.5}
.chart-svg .open,.chart-svg .sw-3{fill:none;stroke:var(--range);stroke-dasharray:2 3;stroke-width:2}
.chart-svg .bar .fill{rx:2}
.chart-svg .val{fill:var(--fg);font:600 12.5px var(--num)}
.chart-svg .lbl{font-weight:600}

/* 순위 변동 타워 */
.chart-svg .bump{stroke:var(--dom);stroke-width:2.25;stroke-linecap:round}
.chart-svg .bump.tone-imp{stroke:var(--imp)}
.chart-svg .bump.dashed{stroke-dasharray:5 4}
.chart-svg .dot{fill:var(--dom);stroke:var(--surface);stroke-width:2}
.chart-svg .dot.tone-imp{fill:var(--imp)}
.chart-svg .leader{fill:none;stroke:var(--dom);stroke-width:1;opacity:.55}
.chart-svg .leader.tone-imp{stroke:var(--imp)}
.chart-svg .row-name{font-weight:700;font-size:13px;fill:var(--fg)}
.chart-svg .row-name .rk{font:700 14px var(--num);fill:var(--dom)}
.chart-svg .bump.tone-c1{stroke:var(--c1)}
.chart-svg .dot.tone-c1{fill:var(--c1)}
.chart-svg .leader.tone-c1{stroke:var(--c1)}
.chart-svg .row-name.tone-c1 .rk{fill:var(--c1-ink)}
.chart-svg .tone-c1 .fill{fill:var(--c1)}
.chart-svg .bump.tone-c2{stroke:var(--c2)}
.chart-svg .dot.tone-c2{fill:var(--c2)}
.chart-svg .leader.tone-c2{stroke:var(--c2)}
.chart-svg .row-name.tone-c2 .rk{fill:var(--c2-ink)}
.chart-svg .tone-c2 .fill{fill:var(--c2)}
.chart-svg .bump.tone-c3{stroke:var(--c3)}
.chart-svg .dot.tone-c3{fill:var(--c3)}
.chart-svg .leader.tone-c3{stroke:var(--c3)}
.chart-svg .row-name.tone-c3 .rk{fill:var(--c3-ink)}
.chart-svg .tone-c3 .fill{fill:var(--c3)}
.chart-svg .bump.tone-c4{stroke:var(--c4)}
.chart-svg .dot.tone-c4{fill:var(--c4)}
.chart-svg .leader.tone-c4{stroke:var(--c4)}
.chart-svg .row-name.tone-c4 .rk{fill:var(--c4-ink)}
.chart-svg .tone-c4 .fill{fill:var(--c4)}
.chart-svg .bump.tone-c5{stroke:var(--c5)}
.chart-svg .dot.tone-c5{fill:var(--c5)}
.chart-svg .leader.tone-c5{stroke:var(--c5)}
.chart-svg .row-name.tone-c5 .rk{fill:var(--c5-ink)}
.chart-svg .tone-c5 .fill{fill:var(--c5)}
.chart-svg .bump.tone-c6{stroke:var(--c6)}
.chart-svg .dot.tone-c6{fill:var(--c6)}
.chart-svg .leader.tone-c6{stroke:var(--c6)}
.chart-svg .row-name.tone-c6 .rk{fill:var(--c6-ink)}
.chart-svg .tone-c6 .fill{fill:var(--c6)}
.chart-svg .bump.tone-c7{stroke:var(--c7)}
.chart-svg .dot.tone-c7{fill:var(--c7)}
.chart-svg .leader.tone-c7{stroke:var(--c7)}
.chart-svg .row-name.tone-c7 .rk{fill:var(--c7-ink)}
.chart-svg .tone-c7 .fill{fill:var(--c7)}
.chart-svg .bump.tone-c8{stroke:var(--c8)}
.chart-svg .dot.tone-c8{fill:var(--c8)}
.chart-svg .leader.tone-c8{stroke:var(--c8)}
.chart-svg .row-name.tone-c8 .rk{fill:var(--c8-ink)}
.chart-svg .tone-c8 .fill{fill:var(--c8)}
.chart-svg .bump.tone-c9{stroke:var(--c9)}
.chart-svg .dot.tone-c9{fill:var(--c9)}
.chart-svg .leader.tone-c9{stroke:var(--c9)}
.chart-svg .row-name.tone-c9 .rk{fill:var(--c9-ink)}
.chart-svg .tone-c9 .fill{fill:var(--c9)}
.chart-svg .bump.tone-c10{stroke:var(--c10)}
.chart-svg .dot.tone-c10{fill:var(--c10)}
.chart-svg .leader.tone-c10{stroke:var(--c10)}
.chart-svg .row-name.tone-c10 .rk{fill:var(--c10-ink)}
.chart-svg .tone-c10 .fill{fill:var(--c10)}
.chart-svg .tone-c1 :is(.lbl,.val,.rk){fill:var(--c1-on)}
.chart-svg .tone-c2 :is(.lbl,.val,.rk){fill:var(--c2-on)}
.chart-svg .tone-c3 :is(.lbl,.val,.rk){fill:var(--c3-on)}
.chart-svg .tone-c4 :is(.lbl,.val,.rk){fill:var(--c4-on)}
.chart-svg .tone-c5 :is(.lbl,.val,.rk){fill:var(--c5-on)}
.chart-svg .tone-c6 :is(.lbl,.val,.rk){fill:var(--c6-on)}
.chart-svg .tone-c7 :is(.lbl,.val,.rk){fill:var(--c7-on)}
.chart-svg .tone-c8 :is(.lbl,.val,.rk){fill:var(--c8-on)}
.chart-svg .tone-c9 :is(.lbl,.val,.rk){fill:var(--c9-on)}
.chart-svg .tone-c10 :is(.lbl,.val,.rk){fill:var(--c10-on)}
.chart-svg [class*="tone-c"] .rk{fill-opacity:.75}
.chart-svg .tone-none :is(.lbl,.val,.rk){fill:var(--fg)}                  /* 11~30위 회색 칸 = 검은 글자 (흰 글자는 흰 판 회색 위 1.44) */                 /* 칸 글자 = 칸마다 흰/검 (tone.on · D6 · 계획 3b Task 1) */

.chart-svg .row-name.tone-imp .rk{fill:var(--imp)}
.chart-svg .row-val{font:600 12px var(--num);fill:var(--muted);letter-spacing:.02em}
.chart-svg .chg.up{fill:var(--fg)}
.chart-svg .chg.down{fill:var(--faint)}
.chart-svg .row-chg{font:700 12px var(--num)}
.chart-svg .row-val.est,.chart-svg .legend .est-mark{fill:var(--est)}
.chart-svg .row-chg.up{fill:var(--fg)}
.chart-svg .row-chg.down{fill:var(--faint)}
.chart-svg .bump-line.steady :is(.bump,.dot,.leader){opacity:.45}
.chart-svg .thumb-edge{fill:none;stroke:var(--line-2);stroke-width:1}
.chart-svg .bump-line{transition:opacity .18s ease-out}
.chart-svg.hl .bump-line:not(.on){opacity:.18}
.chart-svg.hl .bump-line.on{opacity:1}
.chart-narrow .chart-svg .row-name{font-size:12px}
.chart-narrow .chart-svg .row-name .rk{font-size:13px}

/* 폰 판 / 넓은 판 */
figure.chart-narrow{display:none}
@media (max-width:480px){figure.chart-wide{display:none}figure.chart-narrow{display:block}.chart-svg{padding:8px 8px 0}}

/* 값 띄우기 (chart.js) */
.chart-tip{position:fixed;z-index:20;max-width:280px;pointer-events:none;background:var(--surface-2);color:var(--fg);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45;box-shadow:0 10px 28px var(--shadow-2)}

/* 접힌 표 */
.chart-table{margin:6px 14px 10px}
.chart-table summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}
.chart-table summary:hover{color:var(--fg)}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:left;font-weight:600;padding:6px 0}
.fold{margin:12px 0}.fold summary{cursor:pointer;font-weight:600}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12.5px}
td:first-child{white-space:nowrap;font:600 14px var(--num)}
tbody tr:hover{background:var(--surface)}
/* 트림 표 폰 폭 — 한 행 = 「트림 · 가격」 + 작은 둘째 줄(출력 · 연비 · 출처 / 동력 · 출처) · 출처는 줄이지 않고 다 보인다 (마무리 리뷰 · 390 폭 출처 칸 4줄) */
@media (max-width:560px){
table.trims thead{display:none}
table.trims tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;padding:9px 2px;border-bottom:1px solid var(--line)}
table.trims tr::before{content:"";order:2;flex-basis:100%;height:0}
table.trims td{border:0;padding:0;order:3;font-size:12.5px;color:var(--muted);white-space:normal}
table.trims.t5 td:nth-child(n+4)::before,table.trims.t4 td:nth-child(4)::before{content:"· "}
table.trims.t5 td:nth-child(1),table.trims.t4 td:nth-child(2){order:1;flex:1 1 0;min-width:0;font:600 14px var(--num);color:var(--fg)}
table.trims.t5 td:nth-child(2),table.trims.t4 td:nth-child(3){order:1;white-space:nowrap;font:600 14px var(--num);color:var(--fg)}
}

/* 관조 칸 — 이 페이지를 읽는 법 */
.gwanjo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:20px 0 24px;font-size:14.5px}
.gwanjo h2{font-size:12.5px;font-weight:700;margin:14px 0 4px;color:var(--muted);letter-spacing:.01em}
.gwanjo h2:first-child{margin-top:0}
.gwanjo p,.gwanjo ul{margin:0 0 4px}
.gwanjo ul{padding-left:18px}

/* 곧 나오는 차 */
.rail{margin:8px 0 16px}
.rail h2{margin-top:8px}
.rail .cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.rail .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.rail .card p{margin:0 0 4px}
.rail .card-title{font-weight:700}
.rail .stage,.rail .quote{color:var(--muted);font-size:13px}
.rail .dday{font:700 20px var(--num);color:var(--fg)}
.rail > p{color:var(--muted);background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);padding:12px 14px;max-width:none}

/* 모델 페이지 */
dl.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.tile dt{color:var(--muted);font-size:12.5px}
.tile dd{margin:2px 0 0;font:700 20px/1.25 var(--num)}
.badges{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px}
.badge{font-size:12px;border:1px solid var(--line-2);padding:1px 8px;border-radius:999px;color:var(--muted);white-space:nowrap}
figure.photo{margin:12px 0;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
figure.photo img{width:100%;height:auto;display:block}
figure.photo figcaption{color:var(--faint);font-size:12px;padding:6px 12px}

/* 지도 페이지 칩(라디오 패널) */
.filters input{position:absolute;opacity:0;pointer-events:none}
.filters label{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--line-2);padding:5px 12px;border-radius:999px;margin:0 6px 8px 0;cursor:pointer;font-size:13.5px;color:var(--muted)}
.filters label small{font:600 12px/1 var(--num);color:var(--faint)}
.filters input:checked+label{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.filters input:focus-visible+label{outline:2px solid var(--fg);outline-offset:2px}
.filters .panel{display:none}

/* 기타 */
.basis,.source{color:var(--muted);font-size:13px}
p.sentence{color:var(--muted);font-size:13px}
ul.links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
ul.links a{display:inline-block;padding:7px 12px;border:1px solid var(--line-2);border-radius:8px;text-decoration:none;color:var(--fg);font-size:14px}
ul.links a:hover{background:var(--surface-2)}
footer{margin-top:56px;padding-top:18px;padding-bottom:36px;border-top:1px solid var(--line);color:var(--faint);font-size:13px}
footer a{margin-right:14px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 옛 v2 덮개(모델 페이지 질문 1~4 · 머리 글자) — 옛 접두를 걷고 뒤에 둔다(같은 선택자는 뒤가 이긴다) ── */
main{max-width:1180px}
header{border-bottom:1px solid var(--line)}
h1{font-size:clamp(28px,6.2vw,44px);line-height:1.18;letter-spacing:-.035em;font-weight:800;margin:28px 0 8px;text-wrap:balance}
.lead{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 6px}
h2{font-size:clamp(22px,4.6vw,28px);line-height:1.3;letter-spacing:-.03em;font-weight:800;margin:52px 0 14px;text-wrap:balance}
.tone-c1{--acc:var(--c1);--acc-ink:var(--c1-ink);--acc-tint:var(--c1-tint)} .tone-c2{--acc:var(--c2);--acc-ink:var(--c2-ink);--acc-tint:var(--c2-tint)}
.tone-c3{--acc:var(--c3);--acc-ink:var(--c3-ink);--acc-tint:var(--c3-tint)} .tone-c4{--acc:var(--c4);--acc-ink:var(--c4-ink);--acc-tint:var(--c4-tint)}
.tone-c5{--acc:var(--c5);--acc-ink:var(--c5-ink);--acc-tint:var(--c5-tint)} .tone-c6{--acc:var(--c6);--acc-ink:var(--c6-ink);--acc-tint:var(--c6-tint)}
.tone-c7{--acc:var(--c7);--acc-ink:var(--c7-ink);--acc-tint:var(--c7-tint)} .tone-c8{--acc:var(--c8);--acc-ink:var(--c8-ink);--acc-tint:var(--c8-tint)}
.tone-c9{--acc:var(--c9);--acc-ink:var(--c9-ink);--acc-tint:var(--c9-tint)} .tone-c10{--acc:var(--c10);--acc-ink:var(--c10-ink);--acc-tint:var(--c10-tint)}
.tone-none{--acc:var(--muted);--acc-ink:var(--muted);--acc-tint:var(--surface-2)}

/* 질문 1 — 넘기는 세대 사진 연표 (사진 = 폰 폭 93% · PC 70% · 3:2 · 옆 장이 양 끝에 보인다) */
.timeline{margin:18px calc(-1 * clamp(16px,2.5vw,40px)) 0}
.slides{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.slides::-webkit-scrollbar{display:none}
.slides{cursor:grab;overscroll-behavior-x:contain}.slides.dragging{cursor:grabbing;user-select:none}.slides img{-webkit-user-drag:none;user-select:none}
.slide{flex:0 0 93%;scroll-snap-align:center;margin:0;scroll-margin-top:80px}
.slide:first-child{margin-left:3.5%}.slide:last-child{margin-right:3.5%}
@media (min-width:900px){.slide{flex-basis:70%}.slide:first-child{margin-left:15%}.slide:last-child{margin-right:15%}}
.slide .ph{position:relative;aspect-ratio:3/2;background:var(--ph);overflow:hidden}
.slide .ph img{width:100%;height:100%;object-fit:cover;display:block}
.slide .ph.empty{background:color-mix(in srgb,var(--acc) 12%,var(--bg));display:grid;place-items:center;text-align:center;padding:16px}
.slide .ph.empty p{margin:0;color:var(--acc-ink);font-size:15px;line-height:1.5;font-weight:600}
.slide .now{position:absolute;top:12px;right:12px;background:var(--acc);color:var(--on-fill);font-weight:800;font-size:13px;padding:5px 10px;border-radius:4px}
.slide figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 16px 0}
.slide .code{font:800 clamp(40px,9vw,64px)/.95 var(--num);letter-spacing:-.01em;color:var(--fg)}
.slide .meta{font:600 15px/1.2 var(--num);color:var(--muted);letter-spacing:.02em}
.slide .note{font-size:13px;font-weight:700;color:var(--acc-ink)}
.slide .credit{flex-basis:100%;font-size:11px;color:var(--faint)}
.slide .credit a{color:var(--faint)}
.years{display:flex;justify-content:space-between;gap:4px;padding:16px clamp(16px,2.5vw,40px) 0;position:relative;overflow-x:auto}
.years::before{content:"";position:absolute;left:clamp(24px,3vw,48px);right:clamp(24px,3vw,48px);top:24px;height:2px;background:var(--line)}
.years a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12.5px var(--num);color:var(--faint);text-decoration:none;min-width:36px}
.years a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--tick)}
.years a.on{color:var(--fg)} .years a.on::before{background:var(--acc);border-color:var(--acc);transform:scale(1.35)}
.years a:focus-visible{outline:2px solid var(--acc-ink);outline-offset:4px}
.tl-basis{font-size:12.5px;color:var(--faint);margin:10px 0 0;padding:0 clamp(16px,2.5vw,40px)}

/* 질문 2 — 순위 큰 숫자 하나 + 월별 막대 */
.rankline{font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.02em;margin:0}
.rankline .big{display:block;font:800 clamp(80px,22vw,112px)/.85 var(--num);color:var(--acc);letter-spacing:-.02em;margin-bottom:12px}
.rankline small{display:block;font-size:14px;color:var(--muted);font-weight:500;margin-top:8px}
figure.chart{background:var(--bg);border:0;border-radius:0;margin:18px 0 0}
figure.chart .bar.tone-none .fill{fill:var(--none-fill)}

/* 질문 3 — 세대당 한 줄 */
.gens{list-style:none;margin:0;padding:0}
.gens li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.gens img,.gens .ph-s{width:96px;height:64px;object-fit:cover;display:block;border-radius:3px;background:var(--ph-2)}
.gens h3{font:800 22px/1.15 var(--num);letter-spacing:-.005em;margin:0}
.gens .t{font-size:14px;color:var(--muted);margin:3px 0 0}
.gens .hl{display:inline-block;margin:5px 0 0;font-size:13px;font-weight:700;color:var(--acc-ink)}

/* 질문 4 — 같은 차체에서 순위가 가까운 차 (넘기는 사진 카드) */
.peers{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * clamp(16px,2.5vw,40px));padding:0 clamp(16px,2.5vw,40px)}
.peers::-webkit-scrollbar{display:none}
.peer{flex:0 0 min(70%,340px);scroll-snap-align:start;text-decoration:none;color:inherit}
.peer .ph{aspect-ratio:3/2;background:var(--ph-2);border-radius:4px;overflow:hidden;display:grid;place-items:center;color:var(--faint);font-size:13px}
.peer img{width:100%;height:100%;object-fit:cover}
.peer .n{margin:8px 0 0;font-weight:700;font-size:16px;color:var(--fg)}
.peer .r{font:800 20px var(--num);color:var(--fg);margin-right:6px}

/* 관조 칸 · 출처 — 독자 질문 아래 한 줄씩 */
.gwanjo{background:var(--bg);border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 0 0;margin:52px 0 0}
.gwanjo h2{font-size:13px;color:var(--muted);margin:14px 0 2px;letter-spacing:0}
dl.tiles dd{font-family:var(--num)}
ul.links a{background:var(--bg);border-color:var(--line-2)}
footer{border-top:1px solid var(--line)}

/* 시상대 — 홈·이번 달 순위 첫 화면 · 1위 폭 전체 · 2·3위 반쪽 · 면 = 그 모델 옅은 면 · 큰 순위 숫자 = 진한 판 · 누끼 차가 면 오른쪽으로 살짝 넘친다 (설계 시각 개선 §4.3 · 계획 3b Task 4) */
.podium{margin:18px 0 8px;overflow-x:clip}
.podium ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.pod{background:var(--acc-tint);border-radius:6px;padding:16px 16px 12px;display:flex;flex-direction:column}
.pod.p1{grid-column:1/-1}
.pod>a{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"r" "n" "v" "c";align-content:start;color:var(--fg);text-decoration:none;flex:1}
@media (min-width:720px){.pod.p1>a{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto auto 1fr;grid-template-areas:"r c" "n c" "v c"}
  .pod:not(.p1) .pc{max-width:420px}.pod .pv{align-self:start}}   /* PC 2·3위 차는 폭 상한 — 없으면 시상대가 1,133px (계획 3b 실렌더) */
.pod .pr{grid-area:r;font:800 clamp(64px,18vw,120px)/.85 var(--num);letter-spacing:-.02em;color:var(--acc-ink)}
.pod:not(.p1) .pr{font-size:clamp(44px,12vw,72px)}
.pod .pn{grid-area:n;font-weight:800;font-size:clamp(18px,4.4vw,24px);letter-spacing:-.02em;margin-top:8px}
.pod .pv{grid-area:v;font:600 15px/1.3 var(--num);color:var(--muted);letter-spacing:.02em}
.pod .pc{grid-area:c;display:block;align-self:end;justify-self:center;width:100%;margin-top:10px}
.pod .pc img{display:block;width:100%;height:auto}
.pod .pc.cut img{margin:0 auto}   /* 누끼는 칸 가운데 · 칸 밖으로 넘기지 않는다 (Ryan 11-06 · 옛 −6% 넘침은 실렌더에서 7~10px 삐짐) */
.pod .pc.none{font-weight:800;font-size:clamp(22px,6vw,36px);line-height:1.15;color:var(--acc-ink);padding:18px 0 10px;letter-spacing:-.02em}
.pod .pe{font-size:13px;line-height:1.5;color:var(--fg);margin:8px 0 0}
.pod .credit{display:block;font-size:11px;color:var(--faint);margin:6px 0 0}
.pod .credit a{color:var(--faint)}
.podium .more{margin:10px 0 0;font-weight:700}

/* 허브 — 카테고리 원색 틀(바깥 · --cat 은 tone.py 가 site.yaml domains[].color 에서 생성) + 흰 판(안 · 개체 색 규칙 그대로) · 칩 = 알약 + 오프셋 그림자 · 기울기 없음 (다카테고리 설계 v1.1 §3.2 · M7) */
.cats ul{list-style:none;margin:20px 0;padding:0;display:grid;gap:16px}
@media (min-width:900px){.cats ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat{background:var(--cat);padding:14px 14px 16px;border-radius:var(--r)}
.cat-chip{display:inline-block;background:var(--bg);color:var(--fg);font-weight:700;font-size:13px;line-height:1;padding:7px 14px;border-radius:999px;box-shadow:3px 3px 0 var(--fg);margin:0 0 12px}
.cat-panel{background:var(--bg);border-radius:calc(var(--r) - 4px);padding:18px}
.cat-q{font-size:19px;line-height:1.4;margin:0 0 6px}
.cat-a{font-size:17px;font-weight:700;margin:0 0 12px}
.cat-pic{display:block;margin:4px 0 8px;background:var(--acc-tint);border-radius:6px;padding:14px 14px 6px}   /* 누끼 칸 — 바탕·가운데·기울기는 아래 「발랄 v1」 이 덮는다 (Ryan 11-09 밤) */
.cat-pic img{display:block;width:100%;height:auto}
.cat-go{display:block;width:fit-content;margin-top:10px;font-weight:700;color:var(--cat-ink)}
.cats li:only-child{grid-column:1/-1}                           /* 분야가 하나면 가로 전체 (Ryan 11-06 「카드 한 장이면 넓게」) · 둘부터는 두 칸 */
.cats li:only-child .cat-pic img{max-width:720px}

/* 발랄 v1 — 납작 스티커(흰 테두리 · 그림자 0 · 가운데) + 살짝 기울기 + 진한 색 면·도트 + 알약 순위 배지 + 노란 분야 칩 (Ryan 11-09 밤 「그림자 없애고 스티커처럼 하얀 테두리 · 가운데 · 발랄」) */
.pod,.cat-pic{background-color:color-mix(in srgb,var(--acc) 30%,var(--bg));background-image:radial-gradient(color-mix(in srgb,var(--acc) 30%,transparent) 1.7px,transparent 2px);background-size:18px 18px;border-radius:20px}
.cat-pic{display:flex;justify-content:center;align-items:center;padding:22px 16px}
.cat-pic img,.cats li:only-child .cat-pic img{margin:0 auto}
.pod .pc.cut{display:flex;justify-content:center;align-items:center}
.pod .pc.cut img,.cat-pic img{transform:rotate(var(--tilt,-3deg));transition:transform .25s ease}
.pod.p2{--tilt:2deg}.pod.p3{--tilt:-2deg}
.pod>a:hover .pc.cut img,.cat-pic:hover img{transform:rotate(0deg) scale(1.03)}
.pod .pr{justify-self:start;font-size:clamp(46px,11vw,84px);line-height:1;background:var(--acc-ink);color:var(--bg);border:4px solid var(--bg);border-radius:999px;padding:.08em .34em .1em;transform:rotate(-4deg);margin:2px 0 4px}
.pod:not(.p1) .pr{font-size:clamp(34px,8vw,54px)}
.cat-chip{background:var(--pop);color:var(--fg);border:2px solid var(--fg);box-shadow:3px 3px 0 var(--fg);transform:rotate(-2deg);font-size:14px}
@media (prefers-reduced-motion:reduce){.pod .pc.cut img,.cat-pic img{transition:none}}