/* 색은 역할 토큰으로만 쓴다. 라이트·다크 값은 각각 고른 값이다(자동 반전 아님). */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6f6e69;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --focus: #2a78d6;
  /* 5구간 발산형: 빨강(공포) — 회색(중립) — 파랑(탐욕). 진할수록 극단. dataviz validate_palette 로 인접 구간 구분(정상 시야 ΔE ≥ 15) 확인 */
  --b-ef: #b42020;
  --b-f: #f2766b;
  --b-n: #a19f97;
  --b-g: #5b9af2;
  --b-eg: #1d50b8;
  --wash: 0.16;
  /* 비교 모드 선 색: S&P 500 잉크, 나스닥 100 보라 */
  --s-spx: #0b0b0b;
  --s-ndx: #6250d6;
  /* ui-redesign: 배경 그라데이션·카드 그림자·원호 트랙 */
  --page-bg: radial-gradient(1100px 620px at 0% -10%, #ece6ff 0%, rgba(236, 230, 255, 0) 60%),
    radial-gradient(900px 600px at 100% 0%, #dcefff 0%, rgba(220, 239, 255, 0) 55%),
    radial-gradient(900px 600px at 50% 105%, #fff0e3 0%, rgba(255, 240, 227, 0) 60%), #f5f6fa;
  --shadow: 0 10px 30px rgba(31, 35, 70, 0.07);
  --track: #ecebf2;
  --promo-bg: linear-gradient(120deg, #e8e4ff 0%, #f3efff 45%, #fbfaff 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #262624;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #9a9993;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --focus: #3987e5;
    --b-ef: #f25555;
    --b-f: #a83228;
    --b-n: #6e6d66;
    --b-g: #2253a8;
    --b-eg: #4f93f7;
    --wash: 0.22;
    --s-spx: #f0efec;
    --s-ndx: #9085e9;
    --page-bg: radial-gradient(1100px 620px at 0% -10%, #241d3d 0%, rgba(36, 29, 61, 0) 60%),
      radial-gradient(900px 600px at 100% 0%, #0f2638 0%, rgba(15, 38, 56, 0) 55%),
      radial-gradient(900px 600px at 50% 105%, #2a1c12 0%, rgba(42, 28, 18, 0) 60%), #0d0d10;
    --shadow: none;
    --track: #2b2b31;
    --promo-bg: linear-gradient(120deg, #2a2445 0%, #211d33 50%, #1c1b24 100%);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #262624;
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #9a9993;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --focus: #3987e5;
  --b-ef: #f25555;
  --b-f: #a83228;
  --b-n: #6e6d66;
  --b-g: #2253a8;
  --b-eg: #4f93f7;
  --wash: 0.22;
  --s-spx: #f0efec;
  --s-ndx: #9085e9;
  --page-bg: radial-gradient(1100px 620px at 0% -10%, #241d3d 0%, rgba(36, 29, 61, 0) 60%),
    radial-gradient(900px 600px at 100% 0%, #0f2638 0%, rgba(15, 38, 56, 0) 55%),
    radial-gradient(900px 600px at 50% 105%, #2a1c12 0%, rgba(42, 28, 18, 0) 60%), #0d0d10;
  --shadow: none;
  --track: #2b2b31;
  --promo-bg: linear-gradient(120deg, #2a2445 0%, #211d33 50%, #1c1b24 100%);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  -webkit-text-size-adjust: 100%;
}
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.state {
  color: var(--ink-2);
  padding: 48px 0;
  text-align: center;
}

/* 머리글 */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.subtitle {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0 0;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
}
.badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--muted));
}
.switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
}
.switch button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--border);
}
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* 카드 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  margin-top: 16px;
}
.card h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}
.card .note {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 12px;
}

/* 게이지 */
.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gauge svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}
.hero {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  margin-top: -6px;
  letter-spacing: -0.02em;
}
.band-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
}
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sw, var(--muted));
  flex: none;
}
.blocked {
  color: var(--ink-2);
  text-align: center;
  padding: 24px 0;
}

/* 과거 값 */
.compare {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 520px) {
  .compare {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tile {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px;
}
.tile .label {
  color: var(--muted);
  font-size: 12px;
}
.tile .value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
}
.tile .band {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  margin-top: 4px;
}

/* 차트 */
.chart {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}
.chart svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.chart .tick {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chart .end-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.tooltip {
  position: absolute;
  top: 0;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 80ms;
}
.tooltip[data-show='true'] {
  opacity: 1;
}
.tooltip strong {
  font-size: 15px;
}

/* 구성 요소 */
.rows {
  display: grid;
  gap: 14px;
}
.row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.row-head .name {
  font-weight: 600;
}
.row-head .score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.row .detail {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.row.sub {
  padding-left: 14px;
  border-left: 2px solid var(--grid);
}
.meter {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  margin-top: 6px;
  overflow: hidden;
}
.meter > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--fill, var(--muted));
}

/* 표 */
details {
  margin-top: 12px;
}
summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
  padding: 6px 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
th,
td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--grid);
}
th {
  color: var(--muted);
  font-weight: 600;
}

/* 바닥글 */
.footer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 24px;
}
.footer p {
  margin: 0 0 8px;
}
.retry {
  display: block;
  margin: 0 auto;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
}

/* 색 안내(범례) — 색만으로 뜻을 전하지 않도록 이름·범위를 같이 쓴다 */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-2);
}
.legend .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.legend .range {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.legend-note {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin: 6px 0 0;
}
.chart-legend {
  justify-content: flex-start;
  margin: 4px 0 10px;
}

/* 카드 머리: 제목 + 기간 버튼 */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-head h2 {
  margin: 0;
}
.switch.small button {
  font-size: 13px;
  padding: 4px 12px;
  min-height: 32px;
}

/* 비교 모드 */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.toggle {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  min-height: 32px;
  border-radius: 10px;
  cursor: pointer;
}
.toggle[aria-pressed='true'] {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.series-key {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid var(--c, var(--ink));
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
}
.series-legend {
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 600;
}
.tooltip .muted {
  color: var(--muted);
}

/* 주요 사건 */
.ev-picker {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.ev-picker select {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}
.ev-picker select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.ev-picker .toggle {
  min-width: 36px;
  min-height: 36px;
  font-size: 18px;
  line-height: 1;
}
.toggle:disabled {
  opacity: 0.4;
  cursor: default;
}
.ev-head {
  margin-top: 14px;
}
.ev-date {
  color: var(--muted);
  font-size: 13px;
}
.ev-title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}
.ev-desc {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 0;
}
.ev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 520px) {
  .ev-grid {
    grid-template-columns: 1fr;
  }
}
.ev-index {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px;
}
.ev-name {
  font-weight: 700;
  font-size: 14px;
}
.ev-cells {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.ev-cell .label {
  color: var(--muted);
  font-size: 12px;
}
.ev-cell .value {
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
}
.ev-cell.big .value {
  font-size: 30px;
}
.ev-cell .band {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  font-size: 12px;
  margin-top: 2px;
}
.ev-chart {
  margin-top: 12px;
}
.chart .marker-label {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
}

/* ── ui-redesign: 홈 + 상세 화면 ───────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.logo svg {
  width: 36px;
  height: 36px;
  display: block;
}
.brand-name {
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero {
  margin-top: 18px;
  text-align: center;
}
.arc-gauge {
  position: relative;
}
.arc-wrap {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
}
.arc-wrap::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 30%;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 24%, transparent), transparent);
  pointer-events: none;
}
.arc-wrap svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}
.arc-track {
  stroke: var(--track);
}
.arc-knob {
  fill: #fff;
  filter: url(#knob-shadow);
}
.arc-center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4%;
  text-align: center;
}
.arc-wrap {
  margin-bottom: 18px;
}
.arc-label {
  color: var(--ink-2);
  font-size: 15px;
}
.arc-value {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.arc-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}
.gauge-legend {
  margin-top: 16px;
}
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.status-ok {
  background: #15803d;
}
.status-warn {
  background: #b45309;
}
.status-bad {
  background: #b91c1c;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stat-icon {
  color: var(--focus);
  display: inline-flex;
}
.stat-icon svg {
  width: 22px;
  height: 22px;
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stat-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  font-size: 13px;
  margin-top: 4px;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 26px 4px 10px;
}
.promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--promo-bg);
}
.promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.promo-icon svg {
  width: 22px;
  height: 22px;
}
.promo-title {
  font-size: 19px;
  font-weight: 800;
  margin-top: 12px;
  letter-spacing: -0.01em;
}
.promo-desc {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
}
.pill {
  appearance: none;
  border: 0;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.pill:focus-visible,
.tile-link:focus-visible,
.back:focus-visible,
.info:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tile-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 136px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  margin-bottom: 10px;
}
.tile-icon svg {
  width: 22px;
  height: 22px;
}
.tile-trend {
  background: #2a78d6;
}
.tile-events {
  background: #6250d6;
}
.tile-components {
  background: #0f8a5f;
}
.tile-method {
  background: #52514e;
}
.tile-title {
  font-size: 16px;
  font-weight: 800;
}
.tile-desc {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}
.fine {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin: 22px 0 0;
}
.detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.back,
.info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  min-height: 40px;
}
.back svg {
  width: 22px;
  height: 22px;
}
.info svg {
  width: 26px;
  height: 26px;
}
.page-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}
.detail-switch {
  margin-top: 14px;
}
.card.method p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 10px;
}

/* 좁은 화면: 상단 바의 지수 전환을 한 줄로 */
.topbar .switch button {
  white-space: nowrap;
  font-size: 13px;
  padding: 6px 10px;
}
@media (max-width: 420px) {
  .brand-name {
    font-size: 14px;
  }
}