/* 펄스 — 데이터 지도 도구. 다이얼 VARIANCE 4 · MOTION 3 · DENSITY 5.
   단색 바탕(밝은 회색 계열) + 인구 농도 한 색상 계열(주황) + 증감 발산형 2색. 시스템 글꼴.
   새 색은 전부 여기 변수 한 곳에 둔다. */
:root {
  --pulse-bg: #f4f2ef;
  --pulse-surface: #ffffff;
  --pulse-surface-2: #eceae6;
  --pulse-border: #ddd8d1;
  --pulse-ink: #1a1712;
  --pulse-ink-muted: #756f66;
  --pulse-accent: #c25a0c;
  --pulse-accent-ink: #7a3908;
  --pulse-up: #c2410c;
  --pulse-down: #1d4ed8;
  --pulse-shadow: 0 8px 28px rgba(26, 23, 18, 0.14);
  --pulse-radius: 14px;
  --pulse-panel-w: 360px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--pulse-bg);
  color: var(--pulse-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

.pulse-app { position: relative; width: 100vw; height: 100dvh; }
#pulseMap { position: absolute; inset: 0; background: var(--pulse-surface-2); touch-action: none; }
.pulse-canvas { image-rendering: pixelated; }

/* ── 데스크톱 패널 ── */
.pulse-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: var(--pulse-panel-w);
  background: var(--pulse-surface); box-shadow: var(--pulse-shadow);
  overflow-y: auto; z-index: 500;
  transition: transform 0.2s ease;
  padding: 20px 18px 32px;
}
body.pulse-panel-closed .pulse-panel { transform: translateX(calc(-1 * var(--pulse-panel-w))); }

.pulse-panel-toggle {
  position: absolute; top: 16px; left: calc(var(--pulse-panel-w) + 12px); z-index: 600;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pulse-border);
  background: var(--pulse-surface); box-shadow: var(--pulse-shadow); cursor: pointer;
  font-size: 16px; line-height: 1; transition: left 0.2s ease;
}
body.pulse-panel-closed .pulse-panel-toggle { left: 12px; }

/* 근거(자료 정의·비공개 규칙·출처) — 공유 묶음(패널 안, 스크롤 대상)이 아니라 지도 위 고정
   위치에 둔다(회의론자 지적: 모바일 시트에서 1400px 넘게 굴려야 닿았다). */
.pulse-evidence-toggle {
  position: absolute; top: 16px; right: 12px; z-index: 600;
  height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pulse-border);
  background: var(--pulse-surface); box-shadow: var(--pulse-shadow); cursor: pointer;
  font-size: 13px;
}

.pulse-brand { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 2px; }
.pulse-tagline { font-size: 13px; color: var(--pulse-ink-muted); margin: 0 0 14px; }
.pulse-meta-line { font-size: 12px; color: var(--pulse-ink-muted); margin: 0 0 16px; }

.pulse-row { margin-bottom: 16px; }
.pulse-row label { display: block; font-size: 12px; color: var(--pulse-ink-muted); margin-bottom: 6px; }
#pulseHour { width: 100%; accent-color: var(--pulse-accent); }
.pulse-hour-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }

.pulse-toggle { display: flex; gap: 6px; }
.pulse-toggle button {
  flex: 1; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--pulse-border);
  background: var(--pulse-surface-2); color: var(--pulse-ink); font-size: 13px; cursor: pointer;
}
.pulse-toggle button.on { background: var(--pulse-accent); border-color: var(--pulse-accent); color: #fff; }
.pulse-toggle button:disabled { opacity: 0.45; cursor: not-allowed; }

#pulsePlay {
  margin-top: 8px; width: 100%; padding: 8px; border-radius: 999px; border: 1px solid var(--pulse-accent);
  background: transparent; color: var(--pulse-accent-ink); font-size: 13px; cursor: pointer;
}

.pulse-legend { font-size: 12px; color: var(--pulse-ink-muted); }
.pulse-legend-bar { height: 10px; border-radius: 6px; margin: 6px 0 4px; }
.pulse-legend-bar.pop, .pulse-legend-bar.seq { background: linear-gradient(90deg, rgba(194,90,12,0.08), rgba(194,90,12,0.8)); }
.pulse-legend-bar.trend { background: linear-gradient(90deg, var(--pulse-down), #e8e5df, var(--pulse-up)); }
.pulse-legend-bar.cat { background: linear-gradient(90deg, hsl(0,62%,52%), hsl(60,62%,52%), hsl(120,62%,52%), hsl(180,62%,52%), hsl(240,62%,52%), hsl(300,62%,52%), hsl(360,62%,52%)); }
.pulse-legend-scale { display: flex; justify-content: space-between; }

.pulse-select {
  width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--pulse-border);
  background: var(--pulse-surface); color: var(--pulse-ink); font-size: 13px; margin-bottom: 8px;
}
.pulse-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pulse-chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--pulse-border);
  background: var(--pulse-surface-2); color: var(--pulse-ink); font-size: 12px; cursor: pointer;
}
.pulse-chip.on { background: var(--pulse-accent); border-color: var(--pulse-accent); color: #fff; }

.pulse-rank-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.pulse-rank-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 6px 4px; font-size: 12px;
  border-bottom: 1px solid var(--pulse-border); cursor: pointer;
}
.pulse-rank-list li:hover { background: var(--pulse-surface-2); }
.pulse-rank-list li .pulse-rank-insight { flex-basis: 100%; font-size: 11px; color: var(--pulse-ink-muted); }

.pulse-today { margin: 0 0 16px; }
.pulse-today-count { font-size: 12px; color: var(--pulse-ink-muted); margin: 0 0 8px; }
.pulse-today-cards { display: grid; gap: 8px; }
.pulse-today-card {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--pulse-border); background: var(--pulse-surface-2); cursor: pointer; font: inherit; color: inherit;
}
.pulse-today-card:hover { border-color: var(--pulse-accent); }
.pulse-today-card-label { font-size: 12px; font-weight: 600; color: var(--pulse-ink-muted); }
.pulse-today-card-top { font-size: 14px; margin: 2px 0; }
.pulse-today-card-def { font-size: 11px; color: var(--pulse-ink-muted); }

.pulse-detail-head { font-size: 12px; font-weight: 600; color: var(--pulse-ink-muted); margin: 14px 0 6px; text-transform: none; }
.pulse-sel-head { font-size: 15px; margin-bottom: 6px; }
.pulse-sel-empty { font-size: 13px; color: var(--pulse-ink-muted); }
.pulse-chart-wrap { height: 140px; }
.up { color: var(--pulse-up); font-weight: 600; }
.down { color: var(--pulse-down); font-weight: 600; }
.muted { color: var(--pulse-ink-muted); }
.num { font-variant-numeric: tabular-nums; }
.text-link { background: none; border: none; color: var(--pulse-accent-ink); text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }

.pulse-source { font-size: 11px; color: var(--pulse-ink-muted); margin-top: 22px; border-top: 1px solid var(--pulse-border); padding-top: 10px; }

/* ── 자리 상세(2단계-a) — 요일·연령 막대, 절 구분 ── */
.pulse-detail-body { margin-top: 6px; }
.pulse-detail-section { margin-bottom: 16px; }
.pulse-bar-row, .pulse-age-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; }
.pulse-bar-name { flex: 0 0 32px; color: var(--pulse-ink-muted); }
.pulse-age-row .pulse-bar-name { flex: 0 0 70px; }
.pulse-bar-track { flex: 1; height: 8px; background: var(--pulse-surface-2); border-radius: 4px; overflow: hidden; }
.pulse-bar-track i { display: block; height: 100%; border-radius: 4px; }
.pulse-bar-val { flex: 0 0 auto; white-space: nowrap; }

/* ── '무엇이 변했나'(2단계-d 1항) — ①~⑤ 항목, 표 한 장 + 문장 ── */
.pulse-why-section { padding: 10px; background: var(--pulse-surface-2); border-radius: 8px; }
.pulse-why-item { margin: 0 0 10px; font-size: 12px; }
.pulse-why-item:last-child { margin-bottom: 0; }
.pulse-why-head { font-weight: 600; margin-bottom: 3px; }
.pulse-why-item p { margin: 2px 0; }
.pulse-compare-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pulse-compare-table td { padding: 2px 4px; border-bottom: 1px solid var(--pulse-border); }
.pulse-compare-table td:last-child { text-align: right; }

/* ── 월×시각 히트맵(2단계-f) — 가로 스크롤 없이 폭에 맞춘다 ── */
.pulse-heatmap-wrap { position: relative; }
.pulse-heatmap-wrap canvas { display: block; width: 100%; cursor: crosshair; }
.pulse-heatmap-tooltip {
  position: absolute; z-index: 5; background: var(--pulse-ink); color: #fff; font-size: 11px;
  padding: 3px 6px; border-radius: 4px; pointer-events: none; white-space: nowrap;
}
.pulse-heatmap-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.pulse-heatmap-legend-row { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.pulse-heatmap-legend-row i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* ── 모바일: 아래에서 올라오는 시트, 손잡이 대신 단추로 반/전체/닫힘 3단 ── */
@media (max-width: 640px) {
  .pulse-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 55dvh;
    border-radius: 16px 16px 0 0; transform: translateY(0);
    transition: height 0.22s ease;
  }
  .pulse-panel-toggle { display: none; }
  .pulse-sheet-controls { position: sticky; top: -20px; margin: -20px -18px 12px; padding: 10px 18px 8px;
    background: var(--pulse-surface); display: flex; gap: 8px; justify-content: center; border-bottom: 1px solid var(--pulse-border); }
  .pulse-sheet-controls button {
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--pulse-border);
    background: var(--pulse-surface-2); font-size: 12px; cursor: pointer;
  }
  body[data-sheet="full"] .pulse-panel { height: 92dvh; }
  body[data-sheet="closed"] .pulse-panel { height: 64px; overflow: hidden; }
  body[data-sheet="half"] .pulse-panel { height: 55dvh; }
  /* 데스크톱에서 패널을 닫은 채(.pulse-panel-closed) 폭을 모바일로 줄이면 위 가로 이동 규칙이
     이 시트를 화면 밖에 가둔다(특이도가 더 높다) — 시트 레이아웃에서는 그 이동을 무효로 한다. */
  body.pulse-panel-closed .pulse-panel { transform: translateY(0); }
  /* 반/전체 시트가 지도 하단 절반 이상을 덮어 확대 단추와 겹친다 — 모바일은 손가락 확대(pinch)로 충분하므로 뺀다. */
  .leaflet-control-zoom { display: none; }
  /* Leaflet 저작자 표시(.leaflet-bottom 은 기본 z-index 1000)가 패널(z-index 500)보다 위에 그려져
     시트가 열려 있어도 카드 정의 줄을 덮는다(회의론자 스크린샷) — 시트보다 아래로 내린다.
     .leaflet-control-attribution 자신의 z-index 만 낮추면 부모 .leaflet-bottom 의 1000 이 그대로
     이겨(자식 z-index 는 조상 쌓임 맥락을 벗어나지 못한다) 소용없다 — 조상을 함께 낮춘다. */
  .leaflet-bottom { z-index: 400; }
  /* 카드 3장이 시트를 다 채워도 마지막 카드가 화면 맨 아래에 붙지 않게 여백을 둔다. */
  .pulse-today-cards { padding-bottom: 28px; }
}
@media (min-width: 641px) {
  .pulse-sheet-controls { display: none; }
}

/* ── 공유(3단계 1항) — 링크 복사·그림 저장·요약 한 장·근거 ── */
.pulse-share-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.pulse-share-buttons button {
  flex: 1 1 auto; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--pulse-border);
  background: var(--pulse-surface-2); color: var(--pulse-ink); font-size: 12px; cursor: pointer;
}
.pulse-share-buttons button:hover { border-color: var(--pulse-accent); }
.pulse-share-linkbox {
  width: 100%; margin-top: 8px; padding: 6px 8px; font-size: 12px; border-radius: 8px;
  border: 1px solid var(--pulse-border); background: var(--pulse-surface); color: var(--pulse-ink);
}
.pulse-share-status { min-height: 14px; margin: 6px 0 0; }

/* ── 근거(3단계 2항) — dialog, 패널과 같은 색 언어 ── */
.pulse-evidence-dialog {
  width: min(560px, 92vw); max-height: 82vh; overflow-y: auto; border: none; border-radius: var(--pulse-radius);
  padding: 18px 20px 24px; box-shadow: var(--pulse-shadow); color: var(--pulse-ink);
  background: var(--pulse-surface); font-size: 13px; line-height: 1.5;
}
.pulse-evidence-dialog::backdrop { background: rgba(26, 23, 18, 0.45); }
.pulse-evidence-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 16px; }
.pulse-evidence-close { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--pulse-ink-muted); }
.pulse-evidence-body p { margin: 0 0 10px; }
.pulse-evidence-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 6px 0 14px; }
.pulse-evidence-table th, .pulse-evidence-table td { padding: 4px 6px; border-bottom: 1px solid var(--pulse-border); text-align: left; }
.pulse-evidence-table th { color: var(--pulse-ink-muted); font-weight: 600; }