/* gwanjo.kr 화면 — 레이스 타이밍 타워 세계 (Ryan 11-02 선택 · 계획 4b Task 1) · 아스팔트 밤 바탕 · 개체 색(타워 줄마다 · 지도 브랜드마다 · Ryan 11-03 「다 파래서 구분이 안 돼」) · 추정 = 호박색 표지 · 숫자는 콘덴스드 고정폭 · 어두운 판 하나(밝은 판 없음) */
:root{
  color-scheme:dark;
  --bg:#0a0b0d;--surface:#121418;--surface-2:#1a1d23;--line:#262a31;--line-2:#343944;
  --fg:#eef0f3;--muted:#949ba6;--faint:#646b76;
  --dom:#4b8dff;--dom-fill:#2c64c9;--imp:#ff8a4c;--imp-fill:#d0602a;--none-fill:#3a3f48;
  --est:#f5b83d;--link:#9cc3ff;
  --hatch:#ffffff8c;--range:#eef0f3;
  --c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#9085e9;--c5:#d55181;--c6:#2e9a3a;--c7:#e66767;--c8:#b06ee0;--c9:#5c9e2f;--c10:#c2649b;   /* 개체 색 — dataviz 검증기 통과 순서(어두운 카드 · 인접 쌍) · 노랑 계열 없음(호박색 = 추정 전용) */
  --on-color:#0a0b0d;--on-color-2:#0a0b0dbf;
  --on-fill:#fff;--on-fill-2:#ffffffb3;--head-fill:#0a0b0dcc;--on-light-2:#0a0b0d99;--shadow:#0009;--shadow-2:#000a;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --num:"Barlow Semi Condensed","Pretendard Variable",Pretendard,sans-serif;
  --r:10px;
}
*{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}
.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)}
.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)}
.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)}
.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)}
.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)}
.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)}
.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)}
.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)}
.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)}
.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)}
.chart-svg .tone-c10 .fill{fill:var(--c10)}
.chart-svg [class*="tone-c"] :is(.lbl,.val){fill:var(--on-color)}
.chart-svg [class*="tone-c"] .rk{fill:var(--on-color-2)}

.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}
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)}

/* 관조 칸 — 이 페이지를 읽는 법 */
.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}}