/* 테파일럿 인사이트(/stats/insight/) — stats.css 토큰 위에 얹는다. (2026-11-07 가독성 개편)
   카드 골격: 태그 · 질문 · 큰 숫자 · 그래프 하나 · 한 줄 · [기준·출처 ⓘ] · 공유 버튼. */
.stats-page { --c-sub: var(--c-subscription); }

.in-head .st-head-row { align-items: center; }
.in-back { font-size: 13px; margin: 0; }
.in-back a { color: var(--st-muted); text-decoration: none; }
.in-head h1 { flex: 0 0 auto; }
.in-basis { margin: 8px 0 0; font-size: 12px; }
.in-basis[hidden] { display: none; }

/* 큰 탭 — FSD / 주행·앱 */
.in-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.in-areas[hidden] { display: none; }
.in-areas .st-view small { display: block; font-size: 11px; font-weight: 500; color: var(--st-muted); margin-top: 2px; white-space: normal; line-height: 1.3; }
.in-areas .st-view[aria-selected="true"] small { color: var(--st-muted); }

/* 카테고리 칩 */
.in-cats { margin-top: 12px; }
.in-scope { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* 카드 배치 — 모바일 1열. 데스크톱: 맨 위 카드는 전체 폭, 나머지는 CSS 다단 */
.in-cards { display: block; }
@media (min-width: 900px) {
  .in-cols { columns: 2; column-gap: 16px; }
  .in-cols > .in-card { break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; }
  .in-surprise .in-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .in-surprise .in-card { height: calc(100% - 12px); }
}
@media (min-width: 1360px) { .in-cols { columns: 3; } }
@media (min-width: 900px) and (max-width: 1099px) { .in-surprise .in-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in-card { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 72px; box-sizing: border-box; gap: 10px; }
.in-card[hidden] { display: none !important; }
.in-card.st-jump { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.in-card.hero { border-color: var(--st-focus); }
.in-tags { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--st-muted); flex-wrap: wrap; }
.in-tags .hot { color: var(--st-focus); }
.in-q { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; letter-spacing: -.01em; }
.in-viz { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.in-line { margin: 0; font-size: 14px; line-height: 1.5; }
.in-line b { font-weight: 700; }
.in-sub { font-size: 12px; color: var(--st-muted); margin: 0; line-height: 1.45; }
.in-foot { font-size: 12px; color: var(--st-muted); margin: 0; line-height: 1.5; }
.in-info { margin-top: 2px; }
.in-info .in-foot, .in-info .in-sub { margin-bottom: 8px; }
.in-info .in-foot:last-child { margin-bottom: 0; }
.in-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.in-actions .st-share-btn { width: 36px; height: 36px; color: var(--st-text); }
.in-card.hero .in-actions .st-share-btn { background: var(--st-focus); color: #fff; }
.in-toggles { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px; background: var(--st-chip); border-radius: 10px; align-self: flex-start; }
.in-toggles .st-tab { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--st-muted); cursor: pointer; }
.in-toggles .st-tab[aria-selected="true"] { background: var(--st-card); color: var(--st-text); box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* 누적 막대(100%) */
.in-rows { display: grid; gap: 8px; }
.in-row { display: grid; grid-template-columns: minmax(64px, 100px) 1fr; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.in-row .lb { color: var(--st-text); font-weight: 600; overflow-wrap: anywhere; }
.in-row .lb small { display: block; color: var(--st-muted); font-size: 11px; font-weight: 500; }
.in-row .bar { height: 14px; border-radius: 3px; display: flex; gap: 2px; overflow: hidden; }
.in-row .bar > span { display: block; height: 100%; font-size: 0; }
.in-row.na .bar { background: var(--c-unknown); }
.in-row .few { font-size: 11px; color: var(--st-muted); }
.seg-purchased { background: var(--c-purchased); } .seg-subscribed { background: var(--c-sub); } .seg-likely { background: var(--c-likely); } .seg-none { background: var(--c-none); } .seg-lapsed { background: var(--c-lapsed); }
.seg-q0 { background: var(--q0); } .seg-q1 { background: var(--q1); } .seg-q2 { background: var(--q2); } .seg-q3 { background: var(--q3); } .seg-q4 { background: var(--q4); } .seg-q5 { background: var(--q5); } .seg-q6 { background: var(--q6); }

/* 가로 비교 막대(값 하나) */
.in-hbars { display: grid; gap: 9px; }
.in-hbar { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.in-hbar .lb { font-weight: 600; overflow-wrap: anywhere; }
.in-hbar .lb small { display: block; color: var(--st-muted); font-size: 11px; font-weight: 500; }
.in-hbar .tr { height: 8px; border-radius: 4px; background: var(--st-null); overflow: hidden; }
.in-hbar .tr > span { display: block; height: 100%; background: var(--q3); border-radius: 4px; }
.in-hbar .v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.in-hbar .v small { display: block; font-weight: 500; color: var(--st-muted); font-size: 10.5px; }
.in-hbar.base .tr > span { background: var(--st-null); filter: brightness(1.25); }
.in-hbar.base .v { color: var(--st-muted); }
html[data-theme="dark"] .in-hbar.base .tr > span { background: var(--q1); }

/* 두 그룹 구간 분포 → 세로 막대 둘 */
.in-dist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.in-dist h4 { font-size: 12px; margin: 0 0 4px; color: var(--st-muted); }
.in-dist h4 small { font-weight: 500; }
.in-dist .st-cols { height: 90px; }

/* 큰 숫자 */
.in-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.in-big b { font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.in-big b small { font-size: .5em; color: var(--st-muted); font-weight: 700; }
.in-big span { color: var(--st-muted); font-size: 13px; line-height: 1.35; }

/* 순위 */
.in-rank { list-style: none; counter-reset: r; display: grid; gap: 0; margin: 0; padding: 0; }
.in-rank li { counter-increment: r; display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--st-line); min-width: 0; font-size: 13px; }
.in-rank li:first-child { border-top: 0; padding-top: 0; }
.in-rank li::before { content: counter(r); font-weight: 700; text-align: center; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.in-rank .nm { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.in-rank .nm small { display: block; color: var(--st-muted); font-size: 11px; font-weight: 500; }
.in-rank .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.in-rank .dl { font-size: 11px; font-weight: 700; min-width: 28px; text-align: right; }
.in-rank .dl.up { color: var(--st-good); } .in-rank .dl.dn { color: var(--st-focus); } .in-rank .dl.eq { color: var(--st-muted); }

/* 스파크라인 */
.in-spark svg { width: 100%; height: 48px; display: block; }
.in-spark .cap { font-size: 11px; color: var(--st-muted); margin-top: 2px; }

/* 버전 카드 */
.in-ver { display: grid; gap: 8px; }
.in-ver .prog { height: 10px; border-radius: 5px; background: var(--st-null); overflow: hidden; }
.in-ver .prog > span { display: block; height: 100%; background: var(--q4); border-radius: 5px; }
.in-ver .meta { font-size: 12px; color: var(--st-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.in-ver ol { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; font-size: 13px; }
.in-ver ol li { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--st-line); padding: 6px 0; }

/* 이번 주 의외의 발견 — 타일 둘 + 차이 */
.in-surprise { margin-top: 14px; }
.in-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.in-sec-head .st-h2 { font-size: 15px; color: var(--st-text); }
.in-sec-info { padding: 4px 10px; border: 0; font-size: 12px; }
.in-sec-info > summary::after { content: none; }
.in-sec-info[open] { border: 1px dashed var(--st-line); padding: 10px 14px; flex: 1 0 100%; }
.in-vs .st-tile.base .big { color: var(--st-muted); }
.in-delta { font-size: 13px; color: var(--st-muted); }
.in-delta b { color: var(--st-text); }

.in-scen { font-size: 12px; }
.in-scen td, .in-scen th { padding: 6px 4px; }

/* 쌓는 중·3분할 막대 */
.in-collect { font-size: 12px; color: var(--st-muted); padding: 8px 10px; border: 1px dashed var(--st-line); border-radius: 10px; line-height: 1.45; margin: 0; }
.in-trio .lb { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.in-trio .lb small { color: var(--st-muted); font-weight: 500; }
.in-trio .bar { height: 14px; border-radius: 4px; display: flex; gap: 2px; overflow: hidden; }
.in-trio .bar > span { display: block; height: 100%; font-size: 0; }

/* 주행 리듬(24시간 막대)·테파일럿이 한 일(숫자 타일) */
.in-cols24 { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.in-cols24 span { flex: 1; background: var(--q2); border-radius: 3px 3px 0 0; min-height: 2px; }
.in-cols24 span.pk { background: var(--q4); }
.in-cols24 span.am { background: var(--q3); }
.in-cols24-ax { display: flex; gap: 2px; font-size: 11px; color: var(--st-muted); margin-top: -4px; font-variant-numeric: tabular-nums; }
.in-cols24-ax span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; }
.in-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.in-tile { background: var(--st-chip); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.in-tile b { display: block; font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.in-tile span { display: block; font-size: 12px; color: var(--st-muted); margin-top: 2px; }

/* 출발 시각 카드 — 요일 막대를 누르면 그 요일의 시간대 */
.in-dow-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.in-dow-cap small { font-weight: 500; font-size: 12px; color: var(--st-muted); }
button.in-dow { width: 100%; background: none; border: 0; padding: 2px 4px; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: 8px; }
button.in-dow:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
button.in-dow:focus-visible { outline: 2px solid var(--st-focus, currentColor); outline-offset: 1px; }
button.in-dow.on { background: var(--st-chip); }
button.in-dow.on .lb { font-weight: 800; }

/* 전국 대비 카드 출처 줄 */
.in-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.in-tag { font-size: 9px; font-weight: 700; line-height: 1; vertical-align: super; margin-left: 2px; padding: 1px 4px; border-radius: 5px; white-space: nowrap; letter-spacing: 0; }
.in-tag i { display: none; }
.in-tag.official { color: #2f7bbf; background: rgba(47, 123, 191, .14); }
.in-tag.reported { color: #b7791f; background: rgba(214, 158, 46, .18); }
.in-tag.tp { color: var(--st-muted); background: var(--st-line); }
html[data-theme="dark"] .in-tag.official { color: #66aee6; } html[data-theme="dark"] .in-tag.reported { color: #e6b450; }
.in-legend { display: inline-block; margin-bottom: 4px; }
.in-legend .in-tag { vertical-align: baseline; }
/* N-03 계산식 두 줄 */
.in-step { padding: 10px 12px; background: var(--st-chip); border-radius: 12px; }
.in-step-h { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.in-step-n { color: var(--st-muted); font-weight: 800; }
.in-step-x { font-size: 12.5px; margin-top: 4px; color: var(--st-muted); line-height: 1.6; }
.in-step-x b { color: var(--st-text); }
.in-step-big { font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 800; margin-left: auto; }
html.embed .in-card { border-radius: 14px; }
@media (max-width: 420px) { .in-dist { grid-template-columns: 1fr; } }

/* 공유 버튼은 통계 카드와 같이 우상단(태그 줄 오른쪽) — 2026-11-07 운영자 */
.in-tags { align-items: center; flex-wrap: nowrap; }
.in-tags .in-tag-l { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; align-items: center; }
.in-tags .in-tag-r { color: var(--st-muted); font-weight: 600; }
.in-tags .in-tag-r:not(:empty)::before { content: '·'; margin-right: 8px; }
.in-tags .st-share-btn { color: var(--st-text); }
.in-card.hero .in-tags .st-share-btn { background: var(--st-focus); color: #fff; }
/* 카테고리 칩은 줄바꿈 — 가로 스크롤에 '전국 대비'가 잘려 안 보이던 문제(2026-11-07 운영자) */
.in-cats { flex-wrap: wrap; overflow: visible; }

/* 한 줄 결론은 크게·짧게, 원래 풀이는 ⓘ 안 첫 줄(2026-11-07) */
.in-line { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.in-line b { color: var(--st-text, inherit); }
.in-more { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--st-muted); }
.in-more b { color: var(--st-text, inherit); font-weight: 600; }