/* assets/tracker.css — 상시 지표 tracker (국정평가·정당지지 연속 시계열). tracker.html 전용. */

.tk-section { margin: 0 0 40px; }
.tk-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 6px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.tk-section-title { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; margin: 0; }
.tk-section-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tk-chart { width: 100%; overflow: hidden; position: relative; }
.tk-chart .tk-scroll { width: 100%; }
.tk-chart svg.tk-body { display: block; width: 100%; height: auto; }
.tk-chart svg.tk-axisfix { display: none; }   /* 데스크톱: 본문 svg 자체 Y축 사용 */

/* 모바일: 9년 시계열이 압축돼 빽빽 → 본문만 가로 스크롤, Y축은 좌측 고정 오버레이 */
@media (max-width: 640px) {
  .tk-chart { overflow: visible; }
  .tk-chart .tk-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .tk-chart svg.tk-body { width: auto; height: 240px; max-width: none; }
  .tk-chart svg.tk-axisfix {
    display: block; position: absolute; left: 0; top: 0;
    height: 240px; width: auto; z-index: 3; pointer-events: none;
  }
}

/* 국정평가 긍/부정 범례 */
.tk-legend { display: flex; gap: 16px; margin: 4px 0 10px; font-size: 12px; }
.tk-legend .tk-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.tk-legend .tk-leg-dot { width: 14px; height: 4px; border-radius: 1px; display: inline-block; }
/* 긍·부정 색 — 라이트/다크 분리 (차트의 legible() 보정과 시각적으로 맞춤) */
.tk-leg-dot.pos { background: #1f7a4d; }
.tk-leg-dot.neg { background: #c0392b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-leg-dot.pos { background: #5be19f; }
  :root:not([data-theme="light"]) .tk-leg-dot.neg { background: #e56457; }
}
:root[data-theme="dark"] .tk-leg-dot.pos { background: #5be19f; }
:root[data-theme="dark"] .tk-leg-dot.neg { background: #e56457; }

/* 차트 데이터 라벨(당명·수치) — 배경색 외곽선(halo)로 선·격자 위에서도 읽힘. 축 라벨은 bg 위라 무해. */
.tk-body text { paint-order: stroke; stroke: var(--bg); stroke-width: 2.2px; stroke-linejoin: round; }

.tk-empty { color: var(--ink-mute); font-size: 13px; padding: 20px 0; }
#tk-loading { display: flex; align-items: center; color: var(--ink-soft); font-size: 13px; padding: 16px 0; }

/* 기관별 lean 표 */

.tk-lean-tbl { border-collapse: collapse; font-size: 12.5px; width: 100%; max-width: 460px; font-variant-numeric: tabular-nums; }
.tk-lean-tbl th, .tk-lean-tbl td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--rule); }
.tk-lean-tbl th { font-size: 11px; color: var(--ink-soft); font-weight: 700; line-height: 1.1; }
.tk-lean-tbl td.ag { text-align: left; font-weight: 600; color: var(--ink); }
.tk-lean-tbl td.pos { color: #1f6feb; font-weight: 700; }
.tk-lean-tbl td.neg { color: #c0392b; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-lean-tbl td.pos { color: #6ea8ff; }
  :root:not([data-theme="light"]) .tk-lean-tbl td.neg { color: #e56457; }
}
:root[data-theme="dark"] .tk-lean-tbl td.pos { color: #6ea8ff; }
:root[data-theme="dark"] .tk-lean-tbl td.neg { color: #e56457; }
.tk-lean-tbl td.z { color: var(--ink-mute); }
.tk-lean-tbl td.n { color: var(--ink-mute); font-size: 11px; }

/* hover 툴팁 */
#tk-tip {
  position: fixed; z-index: 1000; display: none; pointer-events: none;
  background: var(--ink); color: var(--bg);
  padding: 6px 9px; border-radius: 3px; font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 4px 14px var(--shadow, rgba(0,0,0,0.3)); max-width: 240px;
  font-variant-numeric: tabular-nums;
}
#tk-tip b { color: #fff; font-weight: 700; }
:root[data-theme="dark"] #tk-tip b, .tk-tip b { color: var(--ink); }
#tk-tip .tk-tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
#tk-tip .tk-tip-src { display: block; margin-top: 3px; font-size: 9.5px; opacity: 0.62; font-variant-numeric: normal; }
.tk-chart svg { cursor: crosshair; }