/* ==========================================================================
   admin-chart.css — 대시보드·통계 그래프(2026-11-09). 서버가 계산한 좌표의 인라인 SVG + 이 규칙(외부 라이브러리 없음, CSP).
   색은 토큰만. 지역 색은 데이터 구분에만: 서울 r1 = chart-1(파랑) · 대구 r2 = chart-2(노랑) · 대전 r3 = chart-6(남색) · 기타 = chart-other.
   검증(dataviz validate_palette, 밝은 바탕): 인접 색약 ΔE ≥ 25 통과, 노랑은 바탕 대비 3:1 미만 → 막대 안 글자는 진한 색 + 표로 보완.
   ========================================================================== */
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--kha-font-sans); }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@container kha (max-width: 599px) { .chart-svg--stack { min-width: 560px; } }

.chart-r1 { fill: var(--kha-chart-1); }
.chart-r2 { fill: var(--kha-chart-2); }
.chart-r3 { fill: var(--kha-chart-6); }
.chart-other { fill: var(--kha-chart-other); }
.chart-paid { fill: var(--kha-blue-200); }
.chart-done { fill: var(--kha-chart-1); }
.chart-one { fill: var(--kha-blue-400); }
.chart-track { fill: var(--kha-gray-100); }
.chart-grid { stroke: var(--kha-chart-grid); stroke-width: 1; }
.chart-base { stroke: var(--kha-chart-axis); stroke-width: 1; }
.chart-tick { fill: var(--kha-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-svg:not(.chart-svg--stack) .chart-tick { font-size: 11px; }
.chart-sum { fill: var(--kha-text-strong); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-in { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--kha-white); }
.chart-in--r2, .chart-in--other { fill: var(--kha-gray-900); }

/* 범례·색 견본 */
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--kha-fs-14); color: var(--kha-text-secondary); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend--top { margin-top: calc(var(--kha-sp-8) * -1); }
.chart-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--kha-chart-other); vertical-align: middle; margin-right: 6px; }
.chart-legend .chart-swatch { margin-right: 0; }
.chart-swatch--r1 { background: var(--kha-chart-1); }
.chart-swatch--r2 { background: var(--kha-chart-2); }
.chart-swatch--r3 { background: var(--kha-chart-6); }
.chart-swatch--paid { background: var(--kha-blue-200); }
.chart-swatch--done { background: var(--kha-chart-1); }

/* 지역 비율 아래 값 목록 */
.chart-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.chart-keys li { display: flex; align-items: center; gap: 0; font-size: var(--kha-fs-15); }
.chart-keys__nm { color: var(--kha-text-secondary); }
.chart-keys__v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--kha-text-strong); }

/* 가로 막대 목록(회차 상태·할인 유형) */
.chart-hbars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chart-hbars li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--kha-fs-15); }
.chart-hbars__nm { color: var(--kha-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-hbars__bar { display: block; width: 100%; height: 12px; }
.chart-hbars__v { font-variant-numeric: tabular-nums; color: var(--kha-text-strong); white-space: nowrap; text-align: right; min-width: 64px; }

/* 숫자로 보기(접기) */
.chart-data > summary { cursor: pointer; font-size: var(--kha-fs-14); color: var(--kha-text-secondary); }
.chart-data > summary:focus-visible { outline: none; box-shadow: var(--kha-focus-ring); border-radius: 4px; }
.chart-data[open] > summary { margin-bottom: var(--kha-sp-8); }

/* 대시보드 */
.dash-field, .dash-field__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.dash-field {
  justify-content: space-between; padding: 16px 20px;
  border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); background: var(--kha-surface);
}
.dash-field__session { margin: 4px 0 0; color: var(--kha-text-secondary); }
.dash-field__actions .btn { min-height: 44px; }
.dash-field__row-link { margin-inline-start: 8px; }
@container kha (max-width: 599px) {
  .dash-field { align-items: flex-start; flex-direction: column; }
  .dash-field__actions { gap: 8px; }
  .dash-field__row-link { min-height: 44px; }
}
.admin-cards.dash-charts {
  gap: var(--kha-sp-16);
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.dash-charts:has(.chart-data[open]) { grid-auto-rows: auto; }
.dash-charts .chart-data { margin-top: auto; }
.region-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  margin-block: auto;
}
.region-pie__plot {
  display: block;
  width: min(138px, 100%);
  height: auto;
  aspect-ratio: 1;
}
.region-pie .chart-keys {
  flex: 1 1 144px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.region-pie__pct {
  min-width: 4.5ch;
  margin-left: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--kha-text-secondary);
}
.region-pie .admin-empty { flex-basis: 100%; margin: 0; }
.dash-delta { font-weight: 600; color: var(--kha-text-strong); }
.dash-fill { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.dash-fill__bar { width: 120px; height: 8px; flex: none; }
.admin-head__actions .segmented { flex-wrap: wrap; }
.admin-head__actions .segmented__item { text-decoration: none; }
.admin-card__head .segmented__item { text-decoration: none; }

/* 통계 숫자 카드 한 줄(8칸 → 좁으면 4·2칸) */
.stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: var(--kha-sp-12); }
.stats-kpis .kpi { padding: 14px 16px; gap: 2px; min-width: 0; --kpi-value-size: var(--kha-fs-22, 1.375rem); }
.stats-kpis .kpi__value { flex-wrap: wrap; }
.stats-kpis .kpi__label { white-space: nowrap; }
.stats-kpis .kpi__meta { font-size: var(--kha-fs-13); }
.stats-kpi--total { background: var(--kha-surface-subtle); }

.chart-svg--trend { max-width: 480px; margin-inline: auto; }
.stats-report-grid { display: grid; gap: var(--kha-sp-16); align-items: start; }
.stats-report-grid .chart-svg--stack { max-width: 680px; margin-inline: auto; }
@container kha (min-width: 1250px) {
  .stats-report-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
}
@container kha (min-width: 1600px) {
  .admin-cards.dash-charts { grid-template-columns: minmax(0,1.25fr) repeat(3,minmax(0,1fr)); }
}

.visitor-share { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.visitor-share li { display: grid; grid-template-columns: 5em minmax(36px, 1fr) auto; align-items: center; gap: 10px; }
.visitor-share progress { width: 100%; height: 12px; accent-color: #25645f; }
.visitor-share li + li progress { accent-color: #637186; }
@container kha (max-width: 600px) {
  .admin-card .table-wrap > .visitor-months { min-width: 0; table-layout: fixed; }
  .visitor-months :is(th,td) { padding-inline: 3px; font-size: .82rem; }
  .visitor-months th:last-child { white-space: normal; }
}


/* 운영 통계 */
.ops-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); gap: 12px; }
.ops-metric { min-width: 0; padding: 16px; border: 1px solid var(--kha-border); border-radius: 8px; background: var(--kha-surface-subtle); }
.ops-metric h3, .ops-metric p, .ops-note { margin: 0; }
.ops-metric h3 { font-size: 15px; }
.ops-metric strong { display: block; margin: 5px 0; font-size: 25px; color: var(--kha-text-heading); }
.ops-metric span, .ops-note { font-size: 14px; color: var(--kha-text-secondary); line-height: 1.55; }
.ops-section > summary { cursor: pointer; font-size: 18px; font-weight: 700; color: var(--kha-text-heading); }
.ops-section[open] > :not(summary) { margin-top: 12px; }
.ops-group-table { max-height: 28rem; overflow: auto; }


.ops-nav { display: flex; flex-wrap: wrap; gap: 5px 8px; padding: 10px 14px; border: 1px solid var(--kha-border); border-radius: 8px; background: var(--kha-surface-subtle); }
.ops-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 10px; color: var(--kha-text-heading); font-weight: 650; text-decoration: none; border-radius: 5px; }
.ops-nav a:hover, .ops-nav a:focus-visible { color: #154d4b; background: #dcefea; }
:is(#ops-title,#ops-months,#ops-region,#visitor-title,#education-metrics) { scroll-margin-top: 85px; }

/* 통계 유형별 그래프. 동적 수치는 SVG 속성·progress로 표시한다. */
.stat-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #ebf0f4; border: 1px solid #d5dfe6; border-radius: 10px; }
.stat-tabs a { display: flex; align-items: center; justify-content: center; min-height: 43px; padding: 8px; border-radius: 7px; color: #385367; font-weight: 650; text-decoration: none; }
.stat-tabs a:hover { color: #163b57; background: #dbe7ed; }
.stat-tabs a[aria-current=page] { color: white; background: #173e59; }
.stat-tabs a:focus-visible { outline: 3px solid #03a0bd; outline-offset: -3px; }
.stat-highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #d7e3e7; border-radius: 10px; background: #dbe7eb; }
.stat-highlights > div { min-width: 0; padding: 13px 18px; background: #f4f8f9; }
.stat-highlights span { display: block; color: #446373; font-size: 14px; }
.stat-highlights strong { color: #163e58; font-size: 25px; line-height: 1.4; }
.stat-highlights small { margin-left: 4px; font-size: 14px; font-weight: 500; }
.stat-panels { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,1fr); gap: 16px; align-items: stretch; }
.stat-panels--equal { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stat-panel { min-width: 0; gap: 15px; }
.stat-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; }
.stat-head h2 { margin: 0; color: #193d56; font-size: 20px; }
.stat-head > span { color: #4c6576; font-size: 13px; }
.stat-month-chart { display: block; width: 100%; height: auto; margin-block: auto; }
.stat-keys, .stat-split, .stat-ranks { padding: 0; margin: 0; list-style: none; }
.stat-keys { display: flex; flex-wrap: wrap; gap: 4px 15px; color: #3e5563; font-size: 13px; }
.stat-keys li { display: inline-flex; gap: 5px; align-items: center; }
.stat-keys i, .stat-split i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ink-a { fill: #237d79; background-color: #237d79; }
.ink-b { fill: #5484ae; background-color: #5484ae; }
.ink-c { fill: #cc8b25; background-color: #cc8b25; }
.ink-gap { background: repeating-linear-gradient(135deg,#cad4dd 0px,#cad4dd 1px,#f3f5f7 1px,#f3f5f7 4px); }
.stat-hatch { stroke: #c5d1db; stroke-width: 2; }
.stat-rule { stroke: #dce5e9; stroke-width: 1; stroke-dasharray: 4 4; }
.stat-axis { stroke: #879dab; stroke-width: 1.5; }
.stat-axis-text { fill: #4b606f; font: 14px var(--kha-font-sans); }
.stat-ratio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.stat-ratio-grid > .stat-ratio { padding: 18px; background: #f7f9fa; border: 1px solid #dce5e9; border-radius: 10px; }
.stat-ratio { --metric-ink: #237d79; display: grid; justify-items: center; align-content: start; gap: 10px; min-width: 0; }
.stat-ratio--blue, .stat-ranks--blue { --metric-ink: #4579a7; }
.stat-ratio--gold, .stat-ranks--gold { --metric-ink: #ac741c; }
.stat-ratio h3 { margin: 0; color: #385466; font-size: 15px; font-weight: 600; }
.stat-ring { position: relative; width: min(150px,100%); }
.stat-ring svg { display: block; width: 100%; height: auto; }
.stat-ring circle { fill: none; stroke-width: 14; }
.stat-ring__track { stroke: #dce6eb; }
.stat-ring__track.is-empty { stroke: #d9e0e4; stroke-dasharray: 2 6; }
.stat-ring__value { stroke: var(--metric-ink); }
.stat-ring > strong { position: absolute; inset: 0; display: flex; gap: 1px; align-items: center; justify-content: center; color: #173e56; font-size: 25px; }
.stat-ring small { font-size: 14px; }
.stat-split { display: grid; width: 100%; gap: 5px; }
.stat-split li, .stat-ranks li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #3d5362; font-size: 14px; }
.stat-split span { display: inline-flex; gap: 5px; align-items: center; }
.stat-split li:first-child i { background: var(--metric-ink); }
.stat-split li:last-child i { background: #dce6eb; border: 1px solid #c5d2d9; }
.stat-split b { color: #1e4259; font-variant-numeric: tabular-nums; }
.stat-data { min-width: 0; width: 100%; }
.stat-data > summary { width: fit-content; cursor: pointer; padding: 5px 1px; color: #27596b; font-size: 14px; font-weight: 650; }
.stat-data[open] > div { margin-top: 8px; }
.stat-ranks { display: grid; gap: 14px; }
.stat-ranks li { display: grid; gap: 5px; }
.stat-ranks li strong { overflow-wrap: anywhere; color: #193d56; }
.stat-ranks li span { flex: none; font-variant-numeric: tabular-nums; }
.stat-ranks progress { display: block; border: 0; border-radius: 10px; width: 100%; height: 10px; overflow: hidden; background: #e6edf1; appearance: none; }
.stat-ranks progress::-webkit-progress-bar { background: #e6edf1; border-radius: 10px; }
.stat-ranks progress::-webkit-progress-value { background: var(--metric-ink,#237d79); border-radius: 10px; }
.stat-ranks progress::-moz-progress-bar { background: var(--metric-ink,#237d79); border-radius: 10px; }
.stat-discount { display: grid; grid-template-columns: minmax(170px,1fr) minmax(0,2fr); gap: 32px; }
.stat-legacy .chart-svg--stack { max-width: 850px; margin: 0 auto; }
@media (max-width: 1050px) { .stat-panels, .stat-panels--equal { grid-template-columns: minmax(0,1fr); } .stat-ratio-grid { gap: 8px; } }
@media (max-width: 740px) {
  .stat-tabs, .stat-highlights { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-tabs a { min-height: 39px; font-size: 14px; }
  .stat-ratio-grid, .stat-discount { grid-template-columns: minmax(0,1fr); }
  .stat-ratio-grid > .stat-ratio { grid-template-columns: minmax(88px,.8fr) minmax(0,1.2fr); gap: 4px 12px; align-items: center; justify-items: start; padding: 12px; }
  .stat-ratio-grid h3 { grid-column: 1 / -1; }
  .stat-ratio-grid .stat-ring { width: min(98px,100%); }
  .stat-ratio-grid .stat-ring strong { font-size: 19px; }
  .stat-split li { flex-wrap: wrap; gap: 2px 5px; }
  .stat-axis-text { font-size: 22px; } .stat-keys { gap: 3px 10px; }
  .stat-legacy .chart-svg--stack { min-width: 0; }
}

.dash-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.dash-insight { display:flex; align-items:center; min-width:0; gap:12px; padding:14px 16px; border:1px solid #d7e2e8; border-radius:10px; background:#fff; color:#1c3d52; text-decoration:none; }
.dash-insight:hover,.dash-insight:focus-visible { background:#f1f7f8; border-color:#83a6b4; color:#173e56; text-decoration:none; }
.dash-insight__ring { flex:0 0 66px; width:66px; position:relative; }
.dash-insight__ring svg { display:block; width:100%; }
.dash-insight__ring circle { fill:none; stroke-width:10; }
.dash-insight__track { stroke:#dce6eb; } .dash-insight__track.is-empty { stroke-dasharray:2 5; }
.dash-insight__ring--teal .dash-insight__arc { stroke:#237d79; }.dash-insight__ring--gold .dash-insight__arc { stroke:#ac741c; }
.dash-insight__ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:15px; font-variant-numeric:tabular-nums; }
.dash-insight__copy { display:grid; min-width:0; gap:3px; }
.dash-insight__copy strong { font-size:15px; }.dash-insight__copy span { font-size:14px; font-variant-numeric:tabular-nums; }.dash-insight__copy small { font-size:12px; color:#516875; }
.dash-insight__go { align-self:flex-start; margin-left:auto; color:#577787; }
.dash-visits-chart { width:min(40%,140px); margin-left:auto; }.dash-visits-chart text { fill:#577080; font:10px var(--kha-font-sans); }
@media(max-width:1199px) { .dash-insights {grid-template-columns: repeat(2,minmax(0,1fr));}.dash-insight--visits {grid-column:1/-1;} }
@media(max-width:640px) { .dash-insights {grid-template-columns:minmax(0,1fr); gap:8px; }.dash-insight {padding:9px 12px;}.dash-insight__ring {flex-basis:55px;width:55px;} }