/* r3-directive.md 확정 토큰: 다크 = 맨 :root, 라이트 = @media 및 :root[data-theme="light"] */
:root {
  color-scheme: dark;
  --bg: #050a07;
  --plot: #0e1912;
  --fg: #fff;
  --body: #d6e0d8;
  --muted: #8c9a90;
  --accent: #9be356;
  --on-accent: #08150a;
  --warn: #f55c0e;
  --danger: #ff5c5c;
  --glass: rgb(14 25 18 / .64);
  --blur: 20px;
  --sat: 115%;
  --edge: rgb(255 255 255 / .14);
  --rim: rgb(255 255 255 / .55);
  --rim-low: rgb(155 227 86 / .24);
  --sheen: rgb(255 255 255 / .06);
  --shadow: 0 16px 36px -24px rgb(0 0 0 / .65);
  --light-a: rgb(155 227 86 / .20);
  --light-b: rgb(214 224 216 / .10);
  --rule: rgb(214 224 216 / .18);
  --radius: 14px;
  --gap: 24px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ecf2e2;
    --plot: #fff;
    --fg: #16240f;
    --body: #33421f;
    --muted: #5c6850;
    --accent: #3b7722;
    --on-accent: #fff;
    --warn: #ad5110;
    --danger: #c73f3f;
    --glass: rgb(255 255 255 / .58);
    --blur: 16px;
    --sat: 105%;
    --edge: rgb(22 36 15 / .16);
    --rim: rgb(255 255 255 / .95);
    --rim-low: rgb(59 119 34 / .18);
    --sheen: rgb(255 255 255 / .30);
    --shadow: 0 12px 28px -20px rgb(22 36 15 / .30);
    --light-a: rgb(59 119 34 / .13);
    --light-b: rgb(255 255 255 / .85);
    --rule: rgb(22 36 15 / .16);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ecf2e2;
  --plot: #fff;
  --fg: #16240f;
  --body: #33421f;
  --muted: #5c6850;
  --accent: #3b7722;
  --on-accent: #fff;
  --warn: #ad5110;
  --danger: #c73f3f;
  --glass: rgb(255 255 255 / .58);
  --blur: 16px;
  --sat: 105%;
  --edge: rgb(22 36 15 / .16);
  --rim: rgb(255 255 255 / .95);
  --rim-low: rgb(59 119 34 / .18);
  --sheen: rgb(255 255 255 / .30);
  --shadow: 0 12px 28px -20px rgb(22 36 15 / .30);
  --light-a: rgb(59 119 34 / .13);
  --light-b: rgb(255 255 255 / .85);
  --rule: rgb(22 36 15 / .16);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* 광원 레이어: (88%, 180px) 420x260 라임 타원, (12%, 520px) 280x180 중성 타원 */
.bg-lights {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.light-a {
  position: absolute;
  left: 88%;
  top: 180px;
  width: 420px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--light-a) 0%, color-mix(in srgb, var(--light-a) 35%, transparent) 45%, transparent 100%);
  filter: blur(12px);
}
.light-b {
  position: absolute;
  left: 12%;
  top: 520px;
  width: 280px;
  height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--light-b) 0%, color-mix(in srgb, var(--light-b) 35%, transparent) 45%, transparent 100%);
  filter: blur(12px);
}
@media (max-width: 480px) {
  .light-a { width: 240px; height: 180px; }
  .light-b { width: 180px; height: 140px; }
  :root { --blur: 12px; }
}

/* 레이아웃 래퍼 */
.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
@media (max-width: 480px) {
  .page-wrap {
    padding: 16px 16px 40px;
    gap: 16px;
  }
}

/* 헤더 */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.header-titles h1 {
  color: var(--fg);
  font-size: 1.625rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.header-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

/* 조작 버튼 (44px 터치 타겟) */
.btn-control {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--plot);
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s;
}
.btn-control:hover {
  border-color: var(--accent);
}
.btn-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 예외 띠 (문의 미처리 알림) */
.alert-strip {
  background: var(--plot);
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8125rem;
}
.alert-strip-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-weight: 600;
}
.alert-strip-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.alert-strip-link:hover {
  text-decoration: underline;
}

/* 탭 바: 유리 재질 1겹 */
nav.tab-nav {
  display: flex;
  gap: 6px;
  padding: 6px;
  position: sticky;
  top: 10px;
  z-index: 10;
  background: linear-gradient(160deg, var(--sheen) 0%, transparent 42%), var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: var(--shadow), inset 1px 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low);
}
@supports not (backdrop-filter: blur(1px)) {
  nav.tab-nav { background: var(--plot); }
}
.tab-btn {
  flex: 1;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--body);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.15s ease;
}
.tab-btn small {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted);
}
.tab-btn[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
.tab-btn[aria-selected="true"] small {
  color: var(--on-accent);
  opacity: 0.85;
}
.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 탭 컨텐츠 */
.tab-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.tab-content[hidden] {
  display: none !important;
}

/* 유리 개요판 (첫 화면 4블록을 감싼 개요판 - 1겹 유리) */
.glass-overview {
  background: linear-gradient(160deg, var(--sheen) 0%, transparent 42%), var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: var(--shadow), inset 1px 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low);
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-overview { background: var(--plot); }
}
@media (max-width: 960px) {
  .glass-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 580px) {
  .glass-overview {
    grid-template-columns: 1fr;
  }
}

/* 개요 카드 (유리 내부) */
.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px;
  background: transparent;
  min-width: 0;
}
.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.kpi-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
  margin: 0;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 0;
}
.kpi-sub {
  font-size: 0.75rem;
  color: var(--body);
  line-height: 1.4;
}
.kpi-caution {
  font-size: 0.875rem;
  color: var(--warn);
  margin-top: auto;
}

/* 배지 (실측 / 실측·과거표본 / 예시 / 수집 필요) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--body);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.badge-real { border-color: var(--accent); }
.badge-real::before { background: var(--accent); }
.badge-probe { border-color: var(--warn); }
.badge-probe::before { background: var(--warn); }
.badge-demo { border-color: var(--muted); }
.badge-demo::before { background: var(--muted); }
.badge-need { border-color: var(--danger); }
.badge-need::before { background: var(--danger); }

/* 상세 섹션 및 평면 패널 */
.detail-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
@media (max-width: 880px) {
  .col-8, .col-7, .col-6, .col-5, .col-4 {
    grid-column: span 12;
  }
}

/* 평면 패널 */
.panel {
  background: var(--plot);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.panel-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  line-height: 1.35;
}
.panel-caution {
  font-size: 0.75rem;
  color: var(--warn);
}
.panel-desc {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* 표 공통 스타일 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: var(--plot);
  border-radius: 8px;
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem; /* 표 15px */
  line-height: 1.45;
  background: var(--plot);
}
table.data-table tr {
  min-height: 44px;
  height: 44px; /* 표 행 44px 이상 */
}
table.data-table th, table.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
table.data-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.875rem; /* 보조 14px */
}
table.data-table td {
  color: var(--body);
}
table.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data-table tr:hover td {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* 상태 점 (dot) */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.dot.ok { background: var(--accent); }
.dot.gap { background: var(--warn); }
.dot.stopped { background: var(--danger); }
.dot.pending { background: var(--muted); }

/* SVG 차트 공통 - 차트 뒤는 불투명 --plot */
.chart-box {
  width: 100%;
  position: relative;
  min-height: 160px;
  background: var(--plot);
  border-radius: 8px;
  border: 1px solid var(--rule);
  padding: 6px;
}
.chart-box svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chart-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* 툴팁 */
#tip {
  position: fixed;
  pointer-events: none;
  background: var(--plot);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--fg);
  z-index: 100;
  box-shadow: var(--shadow);
  max-width: 260px;
  line-height: 1.4;
}
#tip .tip-date {
  color: var(--muted);
  font-size: 0.6875rem;
  margin-bottom: 4px;
}
#tip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#tip .tip-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
}

/* 가로 막대 리스트 (HBar) */
.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.hbar-row {
  display: grid;
  grid-template-columns: minmax(70px, 32%) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 0.8125rem;
}
.hbar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--body);
}
.hbar-track {
  width: 100%;
  background: color-mix(in srgb, var(--rule) 35%, transparent);
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  min-width: 2px;
}
.hbar-val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--fg);
  white-space: nowrap;
  font-size: 0.75rem;
}

/* 미니 차트 그리드 (V0~V6) */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.mini-card {
  background: var(--plot);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-head {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}
.mini-val {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* 준비 상태 안내 카드 */
.prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.prep-card {
  background: var(--plot);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prep-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prep-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fg);
}
.prep-desc {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Claude 통합 수정(렌더 검수 1회차): 60:40 2×2 개요, 숫자는 본문색, 라임 면적 축소, 유리 가장자리 강화 ── */
:root{--glass:rgb(14 25 18 / .50);--light-a:rgb(155 227 86 / .32);--light-b:rgb(214 224 216 / .16)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--glass:rgb(255 255 255 / .44);--light-a:rgb(59 119 34 / .24)}}
:root[data-theme="light"]{--glass:rgb(255 255 255 / .44);--light-a:rgb(59 119 34 / .24)}
:root[data-theme="dark"]{--glass:rgb(14 25 18 / .50);--light-a:rgb(155 227 86 / .32);--light-b:rgb(214 224 216 / .16)}
.light-a{top:300px;left:86%;width:520px;height:320px}
.light-b{top:600px;left:10%;width:360px;height:240px}
.glass-overview{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0;padding:4px 24px}
.glass-overview .kpi-card{padding:20px 0;gap:10px;justify-content:flex-start}
.glass-overview .kpi-card:nth-child(odd){padding-right:24px;border-right:1px solid var(--rule)}
.glass-overview .kpi-card:nth-child(even){padding-left:24px}
.glass-overview .kpi-card:nth-child(-n+2){border-bottom:1px solid var(--rule)}
@media (max-width:760px){.glass-overview{grid-template-columns:1fr;padding:4px 16px}
 .glass-overview .kpi-card:nth-child(n){padding:16px 0;border-right:0;border-bottom:1px solid var(--rule)}
 .glass-overview .kpi-card:last-child{border-bottom:0}}
.kpi-title{font-size:1rem;font-weight:700}
.kpi-value{color:var(--fg)}
.kpi-sub{font-size:.875rem;color:var(--body);line-height:1.4}
.kpi-caution{color:var(--warn);font-size:.875rem}
.panel-desc{font-size:.875rem;color:var(--muted);line-height:1.45}
.panel-caution{color:var(--warn);font-size:.875rem}
.badge{font-size:.75rem}
.glass-overview .hbar-row{grid-template-columns:minmax(0,1fr) 96px auto;align-items:start}
.glass-overview .hbar-label{white-space:normal;overflow:visible;line-height:1.35}
.tab-btn[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
.tab-btn[aria-selected="true"] small{color:var(--body);opacity:1}

/* 모바일 400px 대응: 탭 2x2, 부제 숨김 */
@media (max-width: 480px) {
  nav.tab-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  .tab-btn small {
    display: none !important;
  }
}

/* 배지 범례 details */
.badge-legend-details {
  font-size: 0.8125rem;
  color: var(--muted);
  display: inline-block;
}
.badge-legend-details summary {
  cursor: pointer;
  user-select: none;
}
.badge-legend-content {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* 온체인 카드 높이 맞춤 */
.kpi-card.card-fit-content {
  justify-content: flex-start !important;
  height: auto !important;
}
.kpi-meta-sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 3px;
}

/* 히트맵 스타일 */
.heatmap-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: var(--plot);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px;
}
.heatmap-table {
  width: 100%;
  border-collapse: collapse;
}
.heatmap-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  padding: 2px;
  text-align: center;
  white-space: nowrap;
}
.heatmap-table td {
  padding: 1px;
  text-align: center;
}
.heatmap-cell {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}
.heatmap-cell:hover, .heatmap-cell:focus-visible {
  outline: 2px solid var(--fg);
  z-index: 2;
  position: relative;
}
.heatmap-legend-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.heatmap-legend-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.heatmap-grad {
  display: inline-block;
  width: 70px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, color-mix(in srgb, var(--accent) 8%, transparent), var(--accent));
}
.heatmap-obs {
  font-size: 0.75rem;
  color: var(--muted);
}
.heatmap-mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.heatmap-day-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.btn-day {
  flex: 1;
  min-width: 32px;
  min-height: 36px;
  border: 1px solid var(--rule);
  background: var(--plot);
  color: var(--body);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-day.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
@media (max-width: 580px) {
  .heatmap-desktop { display: none !important; }
  .heatmap-mobile { display: flex !important; }
}

/* 국가 / 시도 전환 가로 막대 */
.geo-switch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.btn-switch-group {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.btn-switch {
  min-height: 32px;
  padding: 4px 10px;
  border: none;
  background: var(--plot);
  color: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-switch.active {
  background: var(--accent);
  color: var(--on-accent);
}
.geo-details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
  margin: 6px 0;
  user-select: none;
}
.geo-special-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--rule) 25%, transparent);
  border-radius: 6px;
  font-size: 0.8125rem;
  margin-top: 4px;
  color: var(--muted);
}
.geo-special-row strong {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ── Claude 통합 수정 2회차 ── */
.kpi-caution,.panel-caution{color:var(--muted)}
.heatmap-table{table-layout:fixed;border-collapse:separate;border-spacing:2px}
.heatmap-table th:first-child{width:28px}
.heatmap-table td{padding:0}
.heatmap-cell{height:22px;border-radius:3px}
.heatmap-table th{font-size:.75rem}

/* 유틸리티 및 CSP 호환 클래스 */
.h-180 { height: 180px; }
.h-150 { height: 150px; }
.h-190 { height: 190px; }
.h-100 { height: 100px; }
.h-36 { height: 36px; }
.mt-auto { margin-top: auto; }
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.my-6 { margin-top: 6px; margin-bottom: 6px; }
.color-fg { color: var(--fg); }
.color-muted { color: var(--muted); }
.color-body { color: var(--body); }
.font-75 { font-size: 0.75rem; }
.font-81 { font-size: 0.8125rem; }
.font-87 { font-size: 0.875rem; }
.weight-600 { font-weight: 600; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.edu-boxes-container { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.dev-gaps-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.legend-dot-accent { background: var(--accent); }
.legend-dot-muted { background: var(--muted); }
.legend-dot-fg { background: var(--fg); }
.table-812 { font-size: 0.8125rem; }
.edu-item { background: var(--plot); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font-size: 0.875rem; }
.edu-item-head { display: flex; justify-content: space-between; margin-bottom: 4px; font-weight: 600; color: var(--fg); }
.edu-item-sub { color: var(--muted); font-size: 0.8125rem; }
.tip-label { color: var(--muted); }
.kst-notice { font-size: 0.8125rem; color: var(--muted); margin-bottom: 12px; }
.not-collected-card { padding: 16px; color: var(--muted); font-size: 0.875rem; text-align: center; }

/* 인증 셸 및 헤더 바 */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.user-bar {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--edge);
  position: sticky;
  top: 0;
  z-index: 99;
}
.user-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.user-bar-label code {
  color: var(--accent);
  background: var(--plot);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
}
.kst-notice-bar {
  max-width: 1240px;
  margin: 8px auto 0;
  padding: 0 16px;
  font-size: 0.8125rem;
  color: var(--muted);
}