/* 통계 페이지 전용 — 사이트 공용 style.css 위에 얹는다.
   사이트는 다크 고정이지만 이 페이지는 앱 웹뷰에도 실리므로 라이트/다크를 모두 지원한다. */

.stats-page {
    --st-bg: #f6f7f9;
    --st-card: #ffffff;
    --st-line: #dde1e8;
    --st-text: #15181e;
    --st-muted: #5b6273;
    --st-null: #c9ced8;
    --st-stroke: #ffffff;
    --st-focus: #d0121a;
    /* 순차 팔레트(파랑 단색조) — 색각 이상에서도 명도로 구분됨 */
    --q0: #dbe9f6; --q1: #a9cce6; --q2: #6aa8d4; --q3: #2f7bbf; --q4: #0b4a8b;
    /* FSD 구성(범주) — Okabe-Ito 계열 */
    --c-purchased: #0072b2; --c-subscription: #e69f00; --c-trial: #009e73; --c-none: #b9bfca; --c-unknown: #e4e7ec;
    background: var(--st-bg);
    color: var(--st-text);
}
@media (prefers-color-scheme: dark) {
    .stats-page {
        --st-bg: #0b0d12;
        --st-card: #151821;
        --st-line: #2a2f3b;
        --st-text: #eef0f5;
        --st-muted: #9aa0b4;
        --st-null: #3a3f4b;
        --st-stroke: #0b0d12;
        --st-focus: #ff5a5f;
        /* 다크에선 높은 값이 밝게 */
        --q0: #1b3350; --q1: #22578a; --q2: #2f80c4; --q3: #66aee6; --q4: #b5dcff;
        --c-purchased: #56b4e9; --c-subscription: #e69f00; --c-trial: #2fc49a; --c-none: #59606e; --c-unknown: #3a3f4b;
    }
}
html:has(.stats-page), html:has(.stats-page) body { background: var(--st-bg); }
.stats-page a { color: var(--st-focus); }

.sample-banner {
    position: sticky; top: 56px; z-index: 49;
    background: repeating-linear-gradient(-45deg, #ffcc00 0 14px, #ffd633 14px 28px);
    color: #1a1400; text-align: center; padding: 9px 16px; font-size: 14px; line-height: 1.45; font-weight: 600;
    border-bottom: 2px solid #8a6d00;
}
@media (max-width: 600px) { .sample-banner { top: 52px; font-size: 13px; } }
html.embed .sample-banner { top: 0; }
.sample-only { display: none; }
html.is-sample .sample-only { display: block; }
html.is-sample span.sample-only { display: inline-block; }
.sample-badge {
    display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 800; letter-spacing: .5px;
    padding: 2px 8px; border-radius: 999px; background: #ffcc00; color: #1a1400; border: 1px solid #8a6d00;
}
.st-kpi-tag { margin: 14px 0 -6px; }

.st-main { padding-top: 24px; padding-bottom: 40px; padding-left: 16px; padding-right: 16px; }
.st-head h1 { font-size: 26px; line-height: 1.25; }
.st-sub { color: var(--st-muted); margin-top: 6px; font-size: 15px; }
.st-note { color: var(--st-muted); font-size: 13px; margin: 6px 0 10px; }
.st-h2 { font-size: 18px; margin-bottom: 10px; }

.stats-page section { padding: 0; border-bottom: 0; }
.st-card {
    background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px;
    padding: 16px !important; margin-top: 16px; min-width: 0;
}
.st-empty { text-align: center; padding: 36px 20px; }
.st-empty-ico { font-size: 40px; }
.st-empty h2 { font-size: 20px; margin: 8px 0; }
.st-empty p { color: var(--st-muted); }

.st-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (min-width: 760px) { .st-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-kpi { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.st-kpi-label { font-size: 12px; color: var(--st-muted); }
.st-kpi-val { font-size: 22px; font-weight: 800; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.st-kpi-val.sm { font-size: 15px; font-weight: 700; }
.st-kpi-val.mono, .mono { font-variant-numeric: tabular-nums; }
.st-kpi-foot { font-size: 11px; color: var(--st-muted); margin-top: 2px; }

.st-chips, .st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.st-chip, .st-tab {
    font: inherit; font-size: 13px; cursor: pointer; border-radius: 999px;
    padding: 6px 12px; border: 1px solid var(--st-line); background: transparent; color: var(--st-text);
}
.st-tab { border-radius: 8px; }
.st-chip[aria-checked="true"], .st-tab[aria-selected="true"] {
    background: var(--st-text); color: var(--st-card); border-color: var(--st-text); font-weight: 700;
}
.st-chip:focus-visible, .st-tab:focus-visible, .st-more:focus-visible, select:focus-visible,
.st-map path:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-metric-desc { font-size: 13px; color: var(--st-muted); margin: 2px 0 8px; }

.st-map-wrap { position: relative; max-width: 520px; margin: 0 auto; }
.st-map { width: 100%; height: auto; display: block; }
.st-map path { stroke: var(--st-stroke); stroke-width: 0.8; cursor: pointer; transition: opacity .12s; }
.st-map .inset rect { fill: none; stroke: var(--st-muted); stroke-width: 0.8; stroke-dasharray: 3 2; }
.st-map .inset text { font-size: 7.5px; fill: var(--st-muted); }
.st-map path.null { fill: var(--st-null); }
.st-map path.sel { stroke: var(--st-text); stroke-width: 2; }
.st-map path:hover { opacity: .82; }
.st-map path:focus { outline: none; }
.st-map path:focus-visible { stroke: var(--st-focus); stroke-width: 2.5; }
.st-tip {
    position: absolute; pointer-events: none; z-index: 5;
    background: var(--st-text); color: var(--st-card); font-size: 12px; line-height: 1.35;
    padding: 6px 9px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -110%);
}

.st-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--st-muted); margin: 10px 0; justify-content: center; }
.st-legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--st-line); }

.st-select-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--st-muted); margin: 6px 0 4px; }
.st-select-row select {
    flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 8px; border-radius: 8px;
    background: var(--st-card); color: var(--st-text); border: 1px solid var(--st-line);
}

.st-detail h3 { font-size: 16px; margin: 14px 0 4px; }
.st-table-wrap { width: 100%; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.st-table th, .st-table td { padding: 8px 4px; border-bottom: 1px solid var(--st-line); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.st-table th { font-size: 12px; color: var(--st-muted); font-weight: 600; }
.st-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.st-table.cities th:nth-child(1) { width: 26%; }
.st-table.cities th:nth-child(2) { width: 16%; }
.st-table .muted { color: var(--st-muted); }

.bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--c-unknown); }
.bar > span { display: block; height: 100%; }
.bar-cap { font-size: 11px; color: var(--st-muted); margin-top: 2px; }
.st-key { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--st-muted); margin: 6px 0; }
.st-key .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }

.status { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.status.rollout { color: #0072b2; }
.status.main { color: #009e73; }
.status.phaseout { color: var(--st-muted); }
@media (prefers-color-scheme: dark) { .status.rollout { color: #56b4e9; } .status.main { color: #2fc49a; } }
.share-bar { height: 4px; background: var(--q3); border-radius: 2px; margin-top: 3px; }

.st-more { margin-top: 10px; font: inherit; font-size: 13px; background: transparent; color: var(--st-text); border: 1px solid var(--st-line); border-radius: 8px; padding: 7px 12px; cursor: pointer; width: 100%; }

.st-rank { list-style: none; counter-reset: r; display: grid; gap: 8px; }
.st-rank li { counter-increment: r; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 10px; min-width: 0; }
.st-rank li::before { content: counter(r); font-weight: 800; width: 22px; text-align: center; color: var(--st-focus); flex: 0 0 22px; }
.st-rank .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.st-rank .nm small { color: var(--st-muted); display: block; font-size: 11px; }
.st-rank .v { font-weight: 800; font-variant-numeric: tabular-nums; }

.st-two { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .st-two { grid-template-columns: 1fr 1fr; } }
.st-transparency h3 { font-size: 14px; margin-bottom: 6px; }
.st-transparency h3.yes { color: #009e73; }
.st-transparency h3.no { color: var(--st-muted); }
.st-transparency ul { padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.st-credit { font-size: 12px; }

/* 앱 웹뷰 임베드: 사이트 헤더·푸터·외부 링크 숨김, 여백 축소 */
html.embed .site-chrome, html.embed a.ext { display: none !important; }
html.embed .st-main { padding: 10px 12px 20px; }
html.embed .st-head h1 { font-size: 21px; }
html.embed .st-card { margin-top: 10px; padding: 12px !important; }

.st-callout {
    margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; font-weight: 600;
    background: color-mix(in srgb, #0072b2 12%, var(--st-card)); border: 1px solid color-mix(in srgb, #0072b2 45%, var(--st-line));
}

/* ---------- 공유·앱 참여 ---------- */
.st-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.st-card-head .st-h2 { min-width: 0; }
.st-share-mini { display: flex; gap: 6px; flex: 0 0 auto; }
.st-icon-btn {
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 8px; border: 1px solid var(--st-line); background: transparent; color: var(--st-text);
}
.st-share { text-align: center; }
.st-share-big {
    font: inherit; font-size: 17px; font-weight: 800; width: 100%; padding: 14px; border-radius: 12px; cursor: pointer;
    border: 0; background: #e82127; color: #fff;
}
.st-share-sub { font: inherit; font-size: 14px; margin-top: 8px; width: 100%; padding: 10px; border-radius: 10px; cursor: pointer; background: transparent; color: var(--st-text); border: 1px solid var(--st-line); }
.st-icon-btn:focus-visible, .st-share-big:focus-visible, .st-share-sub:focus-visible, .st-store:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-join { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--st-line); }
.st-join-title { font-weight: 800; font-size: 16px; }
.st-stores { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.stats-page a.st-store {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; min-width: 150px;
    background: transparent; color: var(--st-text); border: 1px solid var(--st-line); text-decoration: none; text-align: left; line-height: 1.1; font-weight: 700; font-size: 16px;
}
.st-store small { display: block; font-size: 10px; font-weight: 500; opacity: .85; }
.st-store-ico { font-size: 20px; width: 20px; text-align: center; }
.st-store.primary { background: #e82127; border-color: #e82127; color: #fff; }
.st-store.dim { opacity: .55; }
html.embed .st-stores, html.embed .st-join { display: none; }
.st-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
    background: var(--st-text); color: var(--st-card); padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: calc(100vw - 32px);
}

.st-collect td.yes { color: #009e73; font-weight: 800; text-align: center; }
.st-collect td.no { color: var(--st-muted); font-weight: 800; text-align: center; }
.st-collect th:nth-child(1) { width: 34%; }
.st-collect th:nth-child(2) { width: 17%; text-align: center; }

/* ========== v2 배치: 지도 주인공 + 겹친 요약 칩 + 업데이트 흐름 ========== */
.st-eyebrow { color: var(--st-focus); font-weight: 800; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; }
.st-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.3px; }
.st-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .st-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } .st-side .st-card:first-child { margin-top: 0; } }
.st-side { min-width: 0; }
.st-mapcard {
    background: var(--st-card); border: 1px solid var(--st-line); border-radius: 20px; padding: 16px !important; min-width: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px -18px rgba(232,33,39,.35);
}
.st-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--st-text) 6%, transparent); margin: 6px 0 10px; }
@media (min-width: 520px) { .st-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-seg .st-tab { border: 0; border-radius: 10px; padding: 8px 6px; background: transparent; font-weight: 600; font-size: 13px; }
.st-seg .st-tab[aria-selected="true"] { background: var(--st-card); color: var(--st-text); box-shadow: 0 1px 3px rgba(0,0,0,.18); border: 0; }
.st-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.st-chips::-webkit-scrollbar { display: none; }
.st-chip { flex: 0 0 auto; }
.st-chip[aria-checked="true"] { background: #e82127; border-color: #e82127; color: #fff; }
.st-map-wrap { max-width: 560px; }
.st-overlay { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; z-index: 2; pointer-events: none; }
.st-overlay .ov { pointer-events: auto; background: color-mix(in srgb, var(--st-card) 88%, transparent); border: 1px solid var(--st-line); border-radius: 14px; padding: 7px 9px; min-width: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.st-overlay .ov-l { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--st-muted); line-height: 1.25; }
.st-overlay strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.st-overlay strong.sm { font-size: 14px; margin-top: 3px; }
.st-overlay small { display: block; font-size: 10px; color: var(--st-muted); line-height: 1.25; }
@media (max-width: 400px) { .st-overlay small { display: none; } .st-overlay strong { font-size: 18px; } .st-overlay strong.sm { font-size: 12px; } }
.st-map-stamp { position: absolute; right: 4px; bottom: 6px; background: #ffcc00; color: #1a1400; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid #8a6d00; }
html.is-sample span.st-map-stamp { display: inline-block; }
.st-period { font-size: 12px; color: var(--st-muted); text-align: center; }
.st-legend { margin-bottom: 4px; }

/* 업데이트 흐름 */
.st-stack { display: flex; height: 34px; border-radius: 12px; overflow: hidden; margin: 8px 0 10px; gap: 2px; }
.st-stack > span { display: flex; align-items: center; justify-content: center; min-width: 3px; }
.st-stack b { font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.st-flow-list { list-style: none; display: grid; gap: 6px; }
.st-flow-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; min-width: 0; padding: 6px 0; border-bottom: 1px dashed var(--st-line); }
.st-flow-list .dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; }
.st-flow-list .v { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.st-flow-list .sh { margin-left: auto; }
.st-flow-list .meta { flex: 1 0 100%; padding-left: 20px; color: var(--st-muted); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.st-flow-list .sh { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; flex: 0 0 auto; }
.st-flow-list .sh .cnt { display: block; font-size: 11px; font-weight: 500; color: var(--st-muted); }
.st-status-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 10px; }
.st-fold { margin-top: 8px; }
.st-fold summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 8px 0; color: var(--st-text); }

/* ⓘ 용어 툴팁: 누르거나(포커스) 올리면 화면 아래에 고정 표시 — 좁은 폭에서도 넘치지 않게 */
.info { font: inherit; background: none; border: 0; padding: 0 2px; color: var(--st-muted); cursor: help; font-size: 13px; line-height: 1; vertical-align: middle; }
.info[hidden] { display: none; }
.info .tip { display: none; }
.info:hover .tip, .info:focus .tip {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 520px; z-index: 120;
    background: var(--st-text); color: var(--st-card); font-size: 13px; line-height: 1.5; text-align: left; font-weight: 500;
    padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); white-space: normal;
}
.info:focus-visible { outline: 2px solid var(--st-focus); border-radius: 4px; }

/* 보내는 것 / 안 보내는 것 */
.st-send { border-radius: 16px; padding: 14px; border: 1px solid var(--st-line); }
.st-send.yes { background: color-mix(in srgb, #009e73 7%, var(--st-card)); }
.st-send.no { background: color-mix(in srgb, var(--st-text) 4%, var(--st-card)); }
.st-send h3 { font-size: 15px; margin-bottom: 8px; }
.st-send.yes h3 { color: #009e73; }
.st-send ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.st-send li { display: flex; gap: 8px; align-items: flex-start; }
.st-send .ic { flex: 0 0 22px; text-align: center; }

.st-glossary ul { list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--st-muted); }
.st-glossary li { padding-left: 10px; border-left: 3px solid var(--st-line); }
html.embed .st-mapcard { border-radius: 16px; padding: 12px !important; }

/* v2: 연식·HW 칩, 전국 카드 */
.st-chips[hidden] { display: none; }
#year-chips .st-chip[aria-checked="true"], #hw-chips .st-chip[aria-checked="true"] { background: var(--st-text); border-color: var(--st-text); color: var(--st-card); }
.st-national { padding: 18px; border-radius: 16px; border: 1px dashed var(--st-line); text-align: center; }
.st-map-wrap.nat .st-overlay { position: static; margin-bottom: 10px; }
.st-map-wrap.nat { padding-bottom: 28px; }
.st-national .nc-scope { font-weight: 700; color: var(--st-muted); font-size: 14px; }
.st-national .nc-val { font-size: 44px; font-weight: 800; line-height: 1.15; margin: 6px 0; }
.st-national .nc-lab { font-size: 13px; color: var(--st-muted); }
.st-national .nc-bars { max-width: 320px; margin: 12px auto 4px; display: grid; gap: 4px; text-align: left; }
.st-rank li.empty::before { content: none; }

/* 업데이트 흐름 + FSD 버전 분포 나란히(schemaVersion 3) */
.st-pair { display: grid; gap: 0 14px; min-width: 0; }
.st-pair > .st-card { min-width: 0; }
@media (min-width: 900px) { .st-pair { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.st-verify-note { margin-top: 10px; }

/* ========== FSD 통계 머리: 배지 + 실제/샘플 세그먼트 ========== */
.st-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 10px; }
.st-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--st-focus) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-focus) 35%, transparent);
    color: var(--st-focus); font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: none; line-height: 1;
}
.st-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-focus) 22%, transparent); }
.st-lede { color: var(--st-muted); font-size: 15px; margin: 6px 0 0; }
.st-source {
    display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px;
    background: color-mix(in srgb, var(--st-text) 7%, transparent); border: 1px solid var(--st-line);
}
.st-source-btn {
    border: 0; border-radius: 9px; padding: 7px 14px; background: transparent; color: var(--st-muted);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.st-source-btn:hover { color: var(--st-text); }
.st-source-btn[aria-checked="true"] { background: var(--st-card); color: var(--st-text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.st-source-btn[data-source="sample"][aria-checked="true"] { color: #8a6d00; }
@media (prefers-color-scheme: dark) { .st-source-btn[data-source="sample"][aria-checked="true"] { color: #ffcc33; } }
.st-source-btn:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 1px; }
.st-source-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--st-text);
    background: color-mix(in srgb, #ffcc00 16%, transparent); border: 1px solid color-mix(in srgb, #ffcc00 45%, transparent); }
@media (max-width: 480px) { .st-head-row { flex-direction: column; align-items: stretch; } .st-eyebrow { align-self: flex-start; } .st-source { display: grid; } }
html.embed .st-source-note { font-size: 12px; }
/* 실제 데이터 모드에선 샘플 표식(배지·지도 도장)을 확실히 숨긴다(.sample-badge의 display가 앞 규칙을 덮던 문제) */
html:not(.is-sample) .sample-only { display: none !important; }

/* 데이터 갱신 시각(OWL-2017) */
.st-fresh { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 4px 0 10px; font-size: 13px; color: var(--st-muted); }
.st-fresh strong { color: inherit; font-weight: 700; }
.st-fresh strong { color: var(--st-text, inherit); }
.st-fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); }
.is-sample .st-fresh-dot { background: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 25%, transparent); }
.st-visits { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--st-muted); }


.st-method ul { margin: 8px 0 10px 1.1em; padding: 0; line-height: 1.6; }
.st-method li { margin: 4px 0; }
.st-method p { line-height: 1.6; }

.st-req { margin: 4px 0 8px; font-size: 0.88rem; opacity: 0.85; line-height: 1.5; }

/* 보기 탭 [FSD] [소프트웨어 버전] — html[data-view]로 섹션을 가른다(#fsd / #versions) */
.st-sub { margin-top: 4px; }
.st-views { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--st-text) 6%, transparent); margin: 12px 0 8px; max-width: 100%; }
.st-view { border: 0; border-radius: 10px; padding: 8px 16px; background: transparent; color: var(--st-muted); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.st-view[aria-selected="true"] { background: var(--st-card); color: var(--st-text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.st-view:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
html[data-view="versions"] .view-fsd, html:not([data-view="versions"]) .view-versions { display: none !important; }
html[data-view="versions"] .st-hero, html[data-view="versions"] .st-pair { grid-template-columns: minmax(0, 1fr); }
/* ⓘ 툴팁: iOS Safari는 버튼을 눌러도 포커스가 안 가서, 탭하면 .open으로 연다 */
.info.open .tip {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 520px; z-index: 120;
    background: var(--st-text); color: var(--st-card); font-size: 13px; line-height: 1.5; text-align: left; font-weight: 500;
    padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); white-space: normal;
}
.st-table th .info { padding: 0 0 0 2px; }

.st-lag-note { margin: 2px 0 6px; font-size: 0.8rem; opacity: 0.7; text-align: center; }

/* schemaVersion 5 출처 라벨 — 전국 실시간 / 시·도 지도 24시간 뒤 */
.st-src { margin: 2px 0 6px; font-size: 0.8rem; color: var(--st-muted); text-align: center; line-height: 1.7; }
.st-src[hidden] { display: none; }
.st-src-badge { display: inline-block; padding: 0 7px; border-radius: 999px; font-weight: 600; font-size: 0.75rem; }
.st-src-badge.live { background: rgba(34, 160, 90, 0.14); color: #1b8a4c; }
.st-src-badge.lag { background: rgba(128, 128, 128, 0.16); color: inherit; }
@media (prefers-color-scheme: dark) { .st-src-badge.live { color: #5fd08f; } }

/* ========== 2026-10-25 재설계: 선택 상태 하나 + 카드=지표 버튼 + 분모 표기 ========== */
.stats-page { --c-na: #eef0f4; --st-small: repeating-linear-gradient(45deg, var(--st-null) 0 3px, transparent 3px 6px); }
@media (prefers-color-scheme: dark) { .stats-page { --c-na: #262a34; } }
/* 색 클래스 — 지도·범례·구성 바·버전 목록 공용 */
.st-map path.q0 { fill: var(--q0); } .st-map path.q1 { fill: var(--q1); } .st-map path.q2 { fill: var(--q2); }
.st-map path.q3 { fill: var(--q3); } .st-map path.q4 { fill: var(--q4); }
.st-map path.none { fill: var(--st-null); }
.st-map path.small { fill: var(--st-null); opacity: .55; }
.q0 { background: var(--q0); } .q1 { background: var(--q1); } .q2 { background: var(--q2); } .q3 { background: var(--q3); } .q4 { background: var(--q4); }
.c-purchased { background: var(--c-purchased); } .c-subscription { background: var(--c-subscription); }
.c-none { background: var(--c-none); } .c-na { background: var(--c-na); }
/* 세분 구간 상위 두 칸(OWL-2017) — q4보다 한 단계씩 더 진하게(다크는 더 밝게) */
.stats-page { --q5: #07325f; --q6: #041d38; }
@media (prefers-color-scheme: dark) { .stats-page { --q5: #d6ecff; --q6: #f4faff; } .st-stack > .q5 b, .st-stack > .q5 i, .st-stack > .q6 b, .st-stack > .q6 i { color: #0b0d12; text-shadow: none; } }
.q5 { background: var(--q5); } .q6 { background: var(--q6); }
.sw.none { background: var(--st-null); } .sw.small { background: var(--st-null); opacity: .55; }
.st-legend .sw, .st-table .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--st-line); }

/* 상단 고정 필터 줄 + 현재 보기 */
.st-filterbar { position: sticky; top: 56px; z-index: 40; background: var(--st-bg); padding: 8px 0 6px; margin: 8px 0 0; border-bottom: 1px solid var(--st-line); }
@media (max-width: 600px) { .st-filterbar { top: 52px; } }
html.is-sample .st-filterbar { top: 94px; }
@media (max-width: 600px) { html.is-sample .st-filterbar { top: 108px; } }
html.embed .st-filterbar { top: 0; }
html.embed.is-sample .st-filterbar { top: 40px; }
.st-filterbar .st-chips { margin-bottom: 6px; }
.st-chip[aria-pressed="true"] { background: #e82127; border-color: #e82127; color: #fff; font-weight: 700; }
#year-chips .st-chip[aria-pressed="true"], #hw-chips .st-chip[aria-pressed="true"] { background: var(--st-text); border-color: var(--st-text); color: var(--st-card); }
.st-chip:focus-visible, .st-kcard:focus-visible, .cr-x:focus-visible, tr.rk:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; margin: 2px 0 0; min-height: 28px; }
.st-crumb .cr-l { color: var(--st-muted); font-size: 12px; }
.st-crumb .cr-sep { color: var(--st-muted); font-weight: 400; }
.st-crumb .cr-m { color: var(--st-muted); }
.st-crumb .cr-note { color: var(--st-muted); font-size: 12px; }
.cr-x { font: inherit; font-size: 13px; line-height: 1; cursor: pointer; border: 1px solid var(--st-line); background: var(--st-card); color: var(--st-text); border-radius: 999px; width: 26px; height: 26px; padding: 0; }

/* 요약 카드 = 지표 선택 버튼 */
.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 760px) { .st-cards[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-cards[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) { .st-cards[data-n="3"] .st-kcard:first-child { grid-column: 1 / -1; } }
.st-kcard { font: inherit; text-align: left; cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    background: var(--st-card); color: var(--st-text); border: 1px solid var(--st-line); border-radius: 14px; padding: 10px 12px; }
.st-kcard.on { border: 2px solid #e82127; padding: 9px 11px; box-shadow: 0 6px 18px -12px rgba(232,33,39,.6); }
.st-kcard .kc-l { font-size: 12px; color: var(--st-muted); font-weight: 600; }
.st-kcard .kc-v { font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.st-kcard .kc-v.mono { font-size: 17px; }
.st-kcard .kc-s { font-size: 11.5px; color: var(--st-muted); line-height: 1.35; overflow-wrap: anywhere; }

/* 지도: 항상 같은 자리. 자료 없는 조합이면 회색 + 안내 */
.st-map-wrap { position: relative; }
.st-map-wrap.off .st-map path { fill: var(--st-null) !important; cursor: default; opacity: .6; }
.st-map-off { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 10px 14px; font-size: 13px; text-align: center; width: max-content; max-width: 86%; box-shadow: 0 6px 20px -10px rgba(0,0,0,.35); }
.st-map-off[hidden] { display: none; }
.st-center { text-align: center; }
.st-src { margin: 0 0 6px; }
.st-tag { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st-text) 8%, transparent); color: var(--st-muted); }
.st-tag.fixed { border: 1px dashed var(--st-line); }
.st-h3 { font-size: 14px; margin: 14px 0 6px; }
.st-h3:first-child { margin-top: 2px; }

/* 시·도 순위·시·군·구 표 — 행 누르면 선택/해제 */
.st-table.rank { table-layout: auto; }
.st-table.rank .rk-n { width: 28px; color: var(--st-muted); text-align: center; font-variant-numeric: tabular-nums; }
.st-table.rank tr.rk { cursor: pointer; }
.st-table.rank tr.rk:hover { background: color-mix(in srgb, var(--st-text) 4%, transparent); }
.st-table.rank tr.rk.sel { background: color-mix(in srgb, #e82127 10%, transparent); }
.st-table.rank tr.rk.sel th { color: #e82127; }
.st-table.rank tr.rk.none { opacity: .55; }
.st-table.rank td.num strong { display: block; font-size: 14px; }
.st-table.rank td.num small { display: block; font-size: 11px; color: var(--st-muted); font-weight: 400; }
.st-table.rank th { color: var(--st-text); font-size: 13px; }
.st-table.rank thead th { color: var(--st-muted); font-size: 12px; }
.st-city { margin-top: 10px; border-top: 1px solid var(--st-line); }
.st-side .st-card:first-child { margin-top: 0; }
@media (max-width: 899px) { .st-side .st-card:first-child { margin-top: 16px; } }

/* 구성 바: 조각마다 %·대수 + 범례 표 */
.st-stack > span { flex-direction: column; line-height: 1.05; overflow: hidden; }
.st-stack b { font-size: 12px; }
.st-stack i { font-style: normal; font-size: 10.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.st-stack > .q0 b, .st-stack > .q0 i, .st-stack > .q1 b, .st-stack > .q1 i, .st-stack > .c-none b, .st-stack > .c-none i, .st-stack > .c-na b, .st-stack > .c-na i { color: var(--st-text); text-shadow: none; }
#mix .st-stack { height: 40px; }
.st-table.mix { table-layout: auto; margin-bottom: 4px; }
.st-table.mix th { color: var(--st-text); font-weight: 500; font-size: 13px; }
.st-table.mix tr.tot th, .st-table.mix tr.tot td { font-weight: 700; }
.st-flow-list .dot { border: 1px solid var(--st-line); }
.st-glossary li b { color: var(--st-text); }

/* ========== 2026-10-25 v3 배치: '지금 버전 현황'을 탭 위에, 지역은 아래로 ========== */
.st-head .st-fresh { justify-content: flex-start; margin: 8px 0 0; }
.st-now { margin-top: 18px; }
.st-now-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; }
.st-now-head .st-h2 { margin-bottom: 0; font-size: 20px; }
.st-now-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 760px) { .st-now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.st-now-card { margin-top: 12px; }
.st-now-h { font-size: 16px; font-weight: 800; margin: 0; }
.st-now-hi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 2px; }
.st-now-hi[hidden] { display: none; }
.st-now-box { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-line); background: color-mix(in srgb, var(--st-text) 3%, var(--st-card)); }
.st-now-box.new { border-color: color-mix(in srgb, #e82127 45%, var(--st-line)); background: color-mix(in srgb, #e82127 7%, var(--st-card)); }
.st-now-box .nb-l { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--st-muted); }
.st-now-box .nb-v { font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.st-now-box .nb-s { font-size: 12.5px; color: var(--st-muted); line-height: 1.45; }
.st-now-box .nb-s b { color: var(--st-text); }
.st-now-box.same { justify-content: center; }
@media (max-width: 400px) { .st-now-box .nb-v { font-size: 17px; } .st-now-box { padding: 9px 10px; } }
.st-new { display: inline-block; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 4px; background: #d0121a; color: #fff; line-height: 1.4; }
.st-now .st-stack { height: 26px; }
.st-now-foot { margin-bottom: 0; }
.st-views { margin-top: 24px; }
.st-region { margin-top: 28px; }
.st-region .st-hero { margin-top: 4px; }
.st-map-wrap { max-width: 380px; }
/* 구성 + 버전별 자세히는 위아래로(표가 좁은 칸에서 깨지던 문제) */
.st-pair { grid-template-columns: minmax(0, 1fr) !important; }
.st-table.rank tr.rk-more { display: none; }
/* 설명 섹션 접기(보내는 것·집계 방식·용어) */
.st-foldsec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 0; }
.st-foldsec > summary::-webkit-details-marker { display: none; }
.st-foldsec > summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--st-muted); line-height: 1; }
.st-foldsec[open] > summary::after { content: '−'; }
.st-foldsec[open] > summary { margin-bottom: 10px; }
.st-foldsec > summary:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; border-radius: 6px; }

/* 버전 펼침 상세(OWL-2017) */
.st-flow-list li.has-det { display: block; padding: 0; }
.st-flow-list .vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; min-width: 0; padding: 6px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.st-flow-list .vrow:focus-visible { outline: 2px solid #0072b2; outline-offset: 2px; border-radius: 6px; }
.st-flow-list .chev { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--st-muted); border-bottom: 2px solid var(--st-muted); transform: rotate(45deg); margin: -3px 4px 0 auto; transition: transform .15s; }
.st-flow-list li.open .chev { transform: rotate(-135deg); margin-top: 3px; }
.vdet { padding: 2px 0 10px 20px; display: grid; gap: 6px; font-size: 13px; }
.vd-g { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.vd-h { flex: 0 0 auto; color: var(--st-muted); font-size: 12px; padding-top: 2px; min-width: 28px; }
.vd-c { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; padding: 0; margin: 0; }
.vd-c li { display: inline-flex; gap: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(128, 128, 128, 0.12); border: 0; white-space: nowrap; font-size: 12.5px; }
.vd-c li.muted { color: var(--st-muted); }
/* 한국 유저 대비 통계 동의 한 줄(2026-10-27) */
.st-korea { margin: 10px 0 4px; font-size: 18px; line-height: 1.4; color: var(--st-text); }
.st-korea b { font-variant-numeric: tabular-nums; }
.st-korea small { color: var(--st-muted); }
/* 버전 목록 정렬 토글 — 세그먼트 */
.st-seg { display: inline-flex; margin: 4px 0 2px; border: 1px solid var(--st-line); border-radius: 999px; overflow: hidden; }
.st-segb { min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: var(--st-muted); font: inherit; font-size: 13px; cursor: pointer; }
.st-segb + .st-segb { border-left: 1px solid var(--st-line); }
.st-segb[aria-pressed="true"] { background: var(--st-text); color: var(--st-card); font-weight: 700; }
.st-segb:focus-visible { outline: 3px solid var(--st-focus); outline-offset: -3px; }
.vdet[hidden] { display: none; }
.st-korea .st-korea-inst { font-size: 12px; color: var(--st-muted); }