/* wheels.css — 네 바퀴 탐색기 스타일 (이관본)
 *
 * 기존 atlas.css 에서 wheels.js 가 쓰는 디자인 토큰과 UI 클래스를 추려 옮겼다.
 * 토큰 값은 atlas.css 의 라이트/다크 :root 블록에서 그대로 가져온 것이다.
 * wheels.js 는 이 토큰 이름(var(--c-me) 등)을 참조하므로 값만 맞으면 동작한다.
 */

/* ── 디자인 토큰 (atlas.css 발췌) ─────────────────────────────────────── */
:root {
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #14161b;
  --ink2: #3c414b;
  --ink3: #5a606b;
  --muted: #666d7c;
  --line: #e7e9ee;
  --line2: #d6dae1;
  /* 네 도메인 색 */
  --c-co: #a9781f; /* 기업 */
  --c-me: #2f56c7; /* 언론 */
  --c-go: #1a8a63; /* 정부 */
  --c-as: #6b52c9; /* 국회 */
  /* 바퀴 안쪽 채움 — atlas.css 에 --wf-* 정의가 없어 옅은 틴트로 둔다(원본도 무효값=투명에 가까움) */
  --wf-co: rgba(169, 120, 31, 0.08);
  --wf-me: rgba(47, 86, 199, 0.08);
  --wf-go: rgba(26, 138, 99, 0.08);
  --wf-as: rgba(107, 82, 201, 0.08);
  /* 축(axis) 색 */
  --ax-admin: #1a8a63;
  --ax-entity: #a9781f;
  --ax-legis: #6b52c9;
  --ax-media: #2f56c7;
  --ax-data: #5e8f9c;
  --ax-note: #8a8f9a;
  --fact-fg: #16794f;
  --fact-bg: #e4f2ec;
  --est-fg: #8a5e10;
  --est-line: #d9a94a;
}
html[data-theme='dark'] {
  --surface: #191c22;
  --card: #1b1f26;
  --ink: #eef0f4;
  --ink2: #c3c8d1;
  --ink3: #a1a7b3;
  --muted: #848a96;
  --line: #292d36;
  --line2: #353a45;
  --c-co: #d3a250;
  --c-me: #7d97f0;
  --c-go: #4cbb8e;
  --c-as: #a08ff0;
  --wf-co: rgba(211, 162, 80, 0.12);
  --wf-me: rgba(125, 151, 240, 0.12);
  --wf-go: rgba(76, 187, 142, 0.12);
  --wf-as: rgba(160, 143, 240, 0.12);
  --ax-admin: #4cbb8e;
  --ax-entity: #d3a250;
  --ax-legis: #a08ff0;
  --ax-media: #7d97f0;
  --ax-data: #7fb1bf;
  --ax-note: #a5aab5;
  --fact-fg: #5fd0a2;
  --fact-bg: #12291f;
  --est-fg: #e0b364;
  --est-line: #8a6b2e;
}

/* ── 탐색기 레이아웃 ──────────────────────────────────────────────────── */
.wheel-explorer {
  max-width: 1080px;
  margin: 24px auto;
  padding: 0 20px;
}
.wheel-stage {
  width: 100%;
}
.wheel-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 컨트롤 바 ────────────────────────────────────────────────────────── */
.wheel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.wheel-bar .lab {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.wheel-bar .lab-gap {
  margin-left: 12px;
}
.hopbtn,
.wchip {
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--ink2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hopbtn.on,
.wchip.on {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.wdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.wheel-bar .bar-note,
.wheel-bar .small {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 4px;
}

/* ── 범례 ─────────────────────────────────────────────────────────────── */
.wheel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
  font-size: 0.8rem;
  color: var(--ink3);
}
.wheel-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wheel-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.wheel-legend .legend-note {
  color: var(--muted);
}

/* ── 인스펙터 ─────────────────────────────────────────────────────────── */
.wheel-inspect {
  margin-top: 16px;
}
.wheel-inspect:empty {
  display: none;
}
.wheel-inspect .panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 18px 20px;
}
.ins-head,
.ins-wheel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ins-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.ins-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ins-h3,
.wheel-inspect h3 {
  margin: 4px 0 8px;
  font-size: 1.2rem;
}
.ins-lead {
  color: var(--ink2);
  margin: 0 0 12px;
}
.ins-fact {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--ink2);
}
.ins-kicker {
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 12px 0 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.ins-hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 10px;
}
.small {
  font-size: 0.85rem;
}
.tiny {
  font-size: 0.75rem;
}
.path-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.path-row .n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── 근거 배지(pill) ──────────────────────────────────────────────────── */
.pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: lowercase;
}
.pill.pv-fact {
  color: var(--fact-fg);
  background: var(--fact-bg);
}
.pill.pv-est {
  color: var(--est-fg);
  border: 1px solid var(--est-line);
}
.pill.pv-sample {
  color: var(--ink3);
  border: 1px dashed var(--line2);
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.btn-primary {
  background: var(--c-me);
  color: #fff;
}
.btn-sm {
  padding: 6px 10px;
  font-size: 0.82rem;
}

/* ── 국회 실측 블록 ───────────────────────────────────────────────────── */
.asm {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ax-legis);
  border-radius: 10px;
  background: var(--card);
  padding: 16px 18px;
}
.asm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.asm-stat {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.asm-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.4fr auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  align-items: baseline;
}
.asm-law {
  font-weight: 600;
  color: var(--ink);
}
.asm-when {
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.asm-what {
  color: var(--muted);
}

@media (max-width: 720px) {
  .ins-grid {
    grid-template-columns: 1fr;
  }
  .asm-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}