/* =====================================================================
 *  dash.css
 *    전북 SKT 유동인구 대시보드 — 메인 스타일시트
 *    dash_skt_jb.php 의 <style> 블록을 분리한 파일
 *    (관련 모듈 CSS: dash-gu-dist.css 등은 별도)
 *  ===================================================================== */

/* ════════════════════════════════════════════════════
   자동 순회 — 좌상단 '자동' 버튼 + 말풍선 + 속도 메뉴
   ════════════════════════════════════════════════════ */
/* ★ 시군구 마커 깜빡임 — 자동 투어 + 일반 hover 모두 동작
 *    transform 금지 (Leaflet translate3d 충돌) → filter + 내부 scale
 *    ★ 사용자 요청 — 강도 축소 + 화이트선 밖 가는 황금 ring 추가
 *    이전: 60px 와이드 글로우 + brightness 1.55 + inner scale 1.38 (너무 큼/밝음)
 *    현재: 14px 부드러운 글로우 + brightness 1.10 + inner scale 1.08 (절제)
 */
.gu-marker-pulsing{
  animation: guMarkerPulse 1.0s ease-in-out infinite;
  z-index: 1500 !important;
}
@keyframes guMarkerPulse{
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(251,191,36,0.55))
            drop-shadow(0 0 6px rgba(255,255,255,0.40))
            saturate(1.05) brightness(1.00);
  }
  50% {
    filter: drop-shadow(0 0 8px  rgba(251,191,36,0.85))
            drop-shadow(0 0 14px rgba(255,200,0,0.55))
            drop-shadow(0 0 4px  rgba(255,255,255,0.65))
            saturate(1.20) brightness(1.10);
  }
}
.gu-marker-pulsing > *,
.gu-marker-pulsing .leaflet-marker-icon-inner{
  animation: guMarkerInnerScale 1.0s ease-in-out infinite;
}
@keyframes guMarkerInnerScale{
  0%, 100% { transform: scale(1)    }
  50%      { transform: scale(1.08) }   /* 1.38 → 1.08 (작게) */
}

/* ★ 흰선 밖 가는 황금 outline ring — 마커 outer border 처럼 1.5px */
.gu-marker-pulsing::after,
.gu-marker-pulsing > *::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,191,36,0.85);
  pointer-events: none;
  animation: guMarkerRing 1.0s ease-in-out infinite;
}
@keyframes guMarkerRing{
  0%, 100% { opacity: 0.55; transform: scale(1.00) }
  50%      { opacity: 1.00; transform: scale(1.08) }
}

/* ★ 시군구 폴리곤 hover/투어 일시 펄스 (rich-tip 모듈이 관리, mouseout 시 제거됨) */
/* ★ 2026-05-17: 사용자 요청 — 깜빡임 제거. 정적 외곽선으로 유지.
 *    hover 시(gu-poly-active) / 선택 시(gu-poly-selected) 모두 펄스 X.
 */
.leaflet-pane > svg path.gu-poly-active{
  /* ★ 2026-05-17: 사용자 요청 — hover 시도 fill 없음 + glow 없음, 외곽선만 강조 */
  fill-opacity: 0 !important;
  stroke-opacity: 1 !important;
  stroke-width: 2.5 !important;
  filter: none !important;
  transition: stroke-width 0.2s ease;
}

/* ★ 선택된 시군구 폴리곤 — 정적 강조 (외곽선만, 깜빡임/fill/glow 모두 없음) */
.leaflet-pane > svg path.gu-poly-selected{
  fill-opacity: 0 !important;
  stroke-opacity: 1 !important;
  stroke-width: 3 !important;
  filter: none !important;
}
.mc-tile-btn.auto-tour{
  background:linear-gradient(135deg,#fcd34d,#f59e0b);
  color:#7c2d12; font-weight:800;
  border:1px solid #d97706;
  display:flex; align-items:center; justify-content:center;
  transition:.18s;
}
.mc-tile-btn.auto-tour:hover{ filter:brightness(1.05) }
.mc-tile-btn.auto-tour.on{
  background:linear-gradient(135deg,#60a5fa 0%,#2563eb 50%,#1d4ed8 100%);   /* ★ 파랑 그라데이션 */
  color:#fff; border-color:#1e40af;
  animation:tourPulse 1.4s ease-in-out infinite;
  /* ★ 활성 시 우측으로 확장 — 카운트다운 텍스트 (X/Y · Ns) 가 잘 보이게 */
  width:auto !important;
  min-width:78px;
  padding:5px 12px 5px 10px;
  font-weight:800;
  letter-spacing:0.2px;
  box-shadow:0 3px 10px rgba(29,78,216,0.45),
             inset 0 1px 0 rgba(255,255,255,0.25);
}
.mc-tile-btn.auto-tour.on:hover{ filter:brightness(1.08) }
@keyframes tourPulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(220,38,38,0.5) }
  50%      { box-shadow:0 0 0 8px rgba(220,38,38,0.0) }
}
/* ── 자동 순회 말풍선 ── */
.tour-speech{
  position:fixed; z-index:99998;
  width:200px;
  background:linear-gradient(160deg,rgba(15,23,42,0.94),rgba(30,41,59,0.94));
  color:#fff;
  border:1.5px solid rgba(34,211,238,0.55);
  border-radius:10px;
  padding:9px 11px;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  font-family:Pretendard,'Noto Sans KR',sans-serif;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px) scale(0.95);
  transition:opacity .22s, transform .22s cubic-bezier(.2,.9,.3,1.4);
}
.tour-speech.show{ opacity:1; transform:translateY(0) scale(1) }
.tour-sp-arrow{
  position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid rgba(15,23,42,0.94);
  filter:drop-shadow(0 1px 1px rgba(34,211,238,0.4));
}
.tour-sp-hd{
  display:flex; align-items:center; gap:5px;
  padding-bottom:5px; border-bottom:1px dashed rgba(255,255,255,0.18);
  font-size:12px;
}
.tour-sp-hd i{ color:#fbbf24; font-size:11px }
.tour-sp-hd b{ flex:1; font-weight:800; color:#22d3ee; font-size:13px }
.tour-sp-cnt{
  font-size:10px; color:#94a3b8; font-family:'Rajdhani',monospace; font-weight:700;
  background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:6px;
}
.tour-sp-bd{
  padding:6px 0;
  display:flex; align-items:baseline; gap:4px;
  font-family:'Rajdhani',monospace;
}
.tour-sp-num{ font-size:21px; font-weight:800; color:#fbbf24 }
.tour-sp-unit{ font-size:11px; color:#cbd5e1 }
.tour-sp-ft{
  border-top:1px dashed rgba(255,255,255,0.18);
  padding-top:5px; font-size:10px; color:#94a3b8;
  display:flex; flex-direction:column; gap:4px;
}
.tour-sp-cd{ font-family:'Rajdhani',monospace; font-weight:600; color:#22d3ee }
.tour-sp-prog{
  display:block; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.10); overflow:hidden;
}
.tour-sp-prog-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#22d3ee,#fbbf24,#dc2626);
  transition:width .1s linear;
}
/* ── 속도 메뉴 (우클릭 popup) ── */
.tour-speed-popup{
  position:fixed; z-index:99999;
  background:#fff; border:1px solid #cbd5e1;
  border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,0.18);
  padding:5px; min-width:170px;
  font-family:Pretendard,sans-serif;
}
.tour-speed-item{
  padding:8px 12px; font-size:12.5px; font-weight:600;
  color:#475569; cursor:pointer; border-radius:5px;
  transition:.12s;
}
.tour-speed-item:hover{ background:#f1f5f9; color:#0891b2 }
.tour-speed-item.active{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#1d4ed8;
}
.tour-speed-item.active::before{ content:'✓ '; color:#0891b2 }

/* ════════════════════════════════════════════════════
   카드 헤더 — CSV 다운로드 + 확대 아이콘 (오른쪽 상단)
   ════════════════════════════════════════════════════ */
/* ★ chd 우측 — card-tools (CSV + 세로확대 + 확대) 영역 확보
 *    ★ 2026-05-12: 세로확대 추가로 3개 아이콘 영역 확보 (skt_jb 와 통일)
 *    아이콘 22px × 3 + gap 4px × 2 + 우측 padding 8px = 약 82px → 여유 두고 90px */
.card .chd{ position:relative; padding-right:90px !important }
.card-tools{
  position:absolute; top:6px; right:8px;
  display:flex; gap:6px; z-index:10;   /* ★ 2026-05-23: 아이콘 간 가로 공백 확대 (4→6px) */
}
.card-tool-btn{
  width:22px; height:22px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.92);
  border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#475569; font-size:10px;
  transition:.12s;
  padding:0;
}
.card-tool-btn:hover{
  background:#fff; color:#0891b2; border-color:#0891b2;
  transform:translateY(-1px);
}
.card-tool-btn.csv{ color:#10b981 }
.card-tool-btn.csv:hover{ color:#059669; border-color:#10b981 }
.card-tool-btn.zoom{ color:#3b82f6 }
.card-tool-btn.zoom:hover{ color:#1d4ed8; border-color:#3b82f6 }
/* ★ 2026-05-12: 세로 확대 버튼 — 활성 시 강조 */
.card-tool-btn.vexp{ color:#a855f7 }
.card-tool-btn.vexp:hover{ color:#7e22ce; border-color:#a855f7 }
.card-tool-btn.vexp.on{ background:#f3e8ff; color:#7e22ce; border-color:#a855f7; box-shadow:0 0 0 2px rgba(168,85,247,.18) inset }
/* 카드 세로 확대 모드 — 시각적 안내 */
.card.v-expanded{ box-shadow:0 10px 28px rgba(15,23,42,.18) }
/* ★ 2026-05-12: 헤더 왼쪽으로 옮긴 tabs (유입/유출 토글) — 제목 옆에 자연스럽게 위치 */
.chd .tabs-left{ margin-left:6px }
/* ★ 2026-05-12: tabs-right — CSV 아이콘에서 좀 더 왼쪽으로 띄움
 *   .chd 가 padding-right:62px 이라 도구영역 만큼 자동으로 비워져 있음.
 *   margin-left:auto 로 우측 끝까지 밀고, margin-right 100px 로 도구 영역에서 멀리 띄움. */
.chd .tabs-right{ margin-left:auto; margin-right:100px }
/* ★ 2026-05-22: 유입 인구 / 일자별 유입 인구 카드 — 유입/유출 탭을 우측으로 이동
 *   (기존 100px 여백이 과해 탭과 도구 아이콘 사이가 너무 떨어져 보였음) */
#cardIO .chd .tabs-right,
#cardIOTime .chd .tabs-right{ margin-right:36px }
/* ★ 2026-05-23: 하단 카드 유입/유출 select — 우측 도구 아이콘과 겹치지 않게 왼쪽으로 띄움 */
#selIODir, #selIODailyDir, #selPurposeDir, #selModalDir{ margin-right:48px }
/* ════════════════════════════════════════════════════
   카드 확대 모달 (하이브리드 — 차트 + 데이터 테이블 + 옵션)
   ════════════════════════════════════════════════════ */
#cardExpandModal{
  position:fixed; inset:0; background:rgba(15,23,42,0.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  z-index:99999; display:none;
  align-items:center; justify-content:center;
  font-family:'Pretendard','Noto Sans KR',sans-serif;
}
#cardExpandModal.show{ display:flex }
#cardExpandBox{
  width:94vw; max-width:1480px; height:86vh; max-height:920px;
  background:#fff; border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(15,23,42,0.18);
  display:flex; flex-direction:column; overflow:hidden;
}
#cardExpandBox:fullscreen{
  width:100vw; height:100vh; max-width:none; max-height:none;
  border-radius:0;
}
/* ── 헤더 — 카드 색상 강조 + 도구 아이콘 그룹 */
#cardExpandHd{
  padding:11px 16px; border-bottom:3px solid #3b82f6;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#f8fafc,#eff6ff 90%);
  flex-shrink:0;
}
#cardExpandHdL{ display:flex; align-items:center; gap:10px; min-width:0 }
#cardExpandHdR{ display:flex; align-items:center; gap:6px; flex-shrink:0 }
#cardExpandIcon{
  width:32px; height:32px; border-radius:8px;
  background:#3b82f6; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,0.18);
}
#cardExpandTitle{
  font-size:16px; font-weight:800; color:#0f172a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#cardExpandSub{
  font-size:12px; color:#64748b; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px;
}
.ce-tool{
  height:30px; padding:0 10px;
  border:1px solid #cbd5e1; background:#fff; border-radius:7px;
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; color:#475569; font-size:12px; font-weight:700;
  transition:.12s; font-family:inherit;
}
.ce-tool:hover{ border-color:#0891b2; color:#0891b2; background:#ecfeff }
.ce-tool i{ font-size:12px }
.ce-tool.ce-close{ padding:0 9px; color:#dc2626 }
.ce-tool.ce-close:hover{ background:#fef2f2; border-color:#dc2626 }
#ceCsv{ color:#10b981 }   #ceCsv:hover{ background:#ecfdf5; border-color:#10b981 }
#cePng{ color:#8b5cf6 }   #cePng:hover{ background:#f5f3ff; border-color:#8b5cf6 }

/* ── 툴바 — 차트 옵션 + 검색 */
#cardExpandTb{
  padding:8px 16px;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; flex-shrink:0;
}
.ce-tb-l{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
/* ★ 2026-05-20(v44): 툴바 가운데 영역 — X축 토글 */
.ce-tb-c{ display:flex; align-items:center; gap:6px }
.ce-tb-r{ display:flex; align-items:center; gap:8px }
.ce-tb-lb{ font-size:11px; font-weight:700; color:#64748b }
.ce-seg{ display:inline-flex; border:1px solid #cbd5e1; border-radius:6px; overflow:hidden; background:#fff }
.ce-seg button{
  border:0; background:#fff; padding:5px 11px; font-size:11.5px; font-weight:700;
  color:#64748b; cursor:pointer; transition:.12s; font-family:inherit;
  border-right:1px solid #e2e8f0;
}
.ce-seg button:last-child{ border-right:0 }
.ce-seg button:hover:not(.on):not(:disabled){ background:#f1f5f9 }
.ce-seg button.on{ background:#dbeafe; color:#1d4ed8 }
.ce-seg button:disabled{ opacity:0.4; cursor:not-allowed }
.ce-chk{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:#475569; cursor:pointer; user-select:none }
.ce-chk input{ accent-color:#0891b2; cursor:pointer }
#ceTblSearch{
  padding:6px 10px; border:1px solid #cbd5e1; border-radius:6px;
  font-size:12px; color:#0f172a; outline:none; min-width:200px;
  font-family:inherit; background:#fff;
}
#ceTblSearch:focus{ border-color:#0891b2; box-shadow:0 0 0 3px rgba(8,145,178,0.15) }

/* ── 본문 — 차트 + 테이블 분할 */
#cardExpandBody{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns: 1fr 660px;
  gap:0;
  background:#f8fafc;
}
#ceChartWrap{
  background:#fff; padding:12px;
  display:flex; align-items:stretch; min-width:0; min-height:0;
  border-right:1px solid #e2e8f0;
}
#cardExpandChart{ width:100%; height:100% }

#ceTblWrap{
  background:#fff;
  display:flex; flex-direction:column; min-height:0;
}
.ce-tbl-hd{
  padding:10px 14px; border-bottom:1px solid #e2e8f0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; font-weight:700; color:#0f172a;
  background:linear-gradient(135deg,#f1f5f9,#e0e7ef);
}
.ce-tbl-hd i{ color:#0891b2; margin-right:5px }
.ce-tbl-cnt{ font-size:11px; color:#64748b; font-weight:500; font-family:'Rajdhani',sans-serif }
.ce-tbl-scroll{ flex:1; overflow-y:auto; overflow-x:auto }
#ceTbl{
  width:auto; min-width:100%; border-collapse:collapse;
  font-size:12px; font-family:'Pretendard',sans-serif;
}
#ceTbl thead th{
  position:sticky; top:0; z-index:5;
  background:#dbeafe; color:#1e40af;
  padding:8px 10px; text-align:right; font-weight:700;
  border-bottom:2px solid #3b82f6; cursor:pointer;
  white-space:nowrap; user-select:none;
}
#ceTbl thead th:hover{ background:#bfdbfe }
#ceTbl thead th:first-child{ text-align:left }
#ceTbl tbody td{
  padding:6px 10px; border-bottom:1px solid #f1f5f9;
  color:#1e293b; white-space:nowrap;
}
/* 셀 히트맵 툴팁 (모든 팝업 데이터 테이블 공통) */
#ceCellTip{
  position:fixed; z-index:100000; display:none; pointer-events:none;
  background:rgba(15,23,42,.80); color:#fff; border-radius:7px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:7px 10px; font-size:11px; line-height:1.55;
  box-shadow:0 8px 24px rgba(0,0,0,.32); max-width:230px;
}
#ceCellTip .ct-h{ font-weight:700; color:#7dd3fc; margin-bottom:3px; font-size:11.5px }
#ceCellTip .ct-r{ color:#e2e8f0 }
#ceCellTip .ct-r b{ color:#fff }
#ceTbl tbody td.lb{
  font-weight:600; color:#0f172a; text-align:left;
  background:#fafbfc;
}
#ceTbl tbody td.num{
  text-align:right; font-family:'Rajdhani',monospace; font-weight:600;
  color:#0891b2;
}
#ceTbl tbody td.val{ text-align:right }
#ceTbl tbody tr:hover td{ background:#f0f9ff }
#ceTbl tfoot td{
  padding:9px 10px; font-size:12.5px;
  background:#0f172a; color:#fff;
  text-align:right; font-family:'Rajdhani',monospace;
  border-top:2px solid #1d4ed8; position:sticky; bottom:0;
}
#ceTbl tfoot td.lb{ text-align:left; color:#fbbf24 }
.ce-tbl-ft{
  padding:8px 14px; border-top:1px solid #e2e8f0;
  font-size:11px; color:#64748b; background:#f8fafc;
  white-space:nowrap; overflow-x:auto;
}
.ce-tbl-ft b{ color:#1e293b }

/* ★ 2026-05-20(v32): 듀얼카드(이동 목적/수단) 팝업 — 시간별 데이터 테이블
   상단 #ceTbl(합계) 와 동일한 폰트·패딩·정렬로 일관성 유지 */
#ceTblHourly{
  width:100%; border-collapse:collapse;
  font-size:12px; font-family:'Pretendard',sans-serif;
  table-layout:auto;
}
#ceTblHourly thead th{
  position:sticky; top:0; z-index:5;
  background:#fef3c7; color:#92400e;
  padding:8px 10px; text-align:right; font-weight:700;
  border-bottom:2px solid #f59e0b;
  white-space:nowrap; user-select:none;
  font-size:12px;
}
#ceTblHourly thead th:first-child{
  text-align:left; min-width:60px;
  background:#fef3c7; color:#92400e;
}
#ceTblHourly thead th:last-child{
  background:#fde68a; color:#78350f;
  border-left:2px solid #f59e0b;
}
#ceTblHourly tbody td{
  padding:6px 10px; border-bottom:1px solid #f1f5f9;
  color:#1e293b; text-align:right;
  white-space:nowrap;
  font-size:12px;
}
#ceTblHourly tbody td.lb{
  font-weight:600; color:#0f172a; text-align:left;
  background:#fafbfc;
  white-space:nowrap; min-width:60px;
  font-family:'Pretendard',sans-serif;
}
#ceTblHourly tbody td.num{
  text-align:right;
  font-family:'Rajdhani','Pretendard',monospace;
  font-weight:600; color:#0891b2;
}
#ceTblHourly tbody td:last-child{
  background:#fef3c7; color:#92400e; font-weight:700;
  border-left:2px solid #fde68a;
}
#ceTblHourly tbody tr:hover td{ background:#fffbeb }
#ceTblHourly tbody tr:hover td.lb{ background:#fef3c7 }
#ceTblHourly tbody tr:hover td:last-child{ background:#fde68a }
#ceTblHourly tbody tr.hover-row td{
  background:#fcd34d !important; color:#78350f !important;
  font-weight:700;
}
#ceTblHourly tbody tr.hover-row td.lb{
  background:#fbbf24 !important; color:#7c2d12 !important;
}
#ceTblHourly tbody tr.hover-row td:last-child{
  background:#f59e0b !important; color:#fff !important;
}

/* 색상 점 — 라벨 헤더 옆 작은 원 */
#ceTblHourly .ce-tbl-dot{
  display:inline-block; width:7px; height:7px;
  border-radius:50%; margin-right:4px;
  vertical-align:middle;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

/* 듀얼카드 팝업 — 우측 패널을 위/아래 두 테이블로 나눔 */
#ceTblWrap{ overflow:hidden }
#ceTblHourlyHd{ flex-shrink:0 }
#ceTblHourlyScroll{ flex:1.4 !important; overflow-y:auto; overflow-x:auto }

/* ★ 2026-05-20(v34): 듀얼카드 팝업 — 차트유형 토글을 우측 라인차트 위에 오버레이로 배치 */
#ceChartRight{ background:transparent }
.ce-ct-overlay{
  display:flex; align-items:center; justify-content:flex-end;
  padding:6px 8px 4px 8px; gap:6px;
  background:transparent;
  flex-shrink:0;
}
.ce-ct-overlay .ce-seg{
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.ce-ct-overlay .ce-seg button{
  padding:4px 10px; font-size:11.5px;
}

/* ── 좁은 화면 대응 (1024px 이하) */
@media (max-width:1024px){
  #cardExpandBody{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr }
  #ceChartWrap{ border-right:0; border-bottom:1px solid #e2e8f0 }
  .ce-tool span{ display:none }
  #cardExpandSub{ display:none }
}

/* ════════════════════════════════════════════════════
   THEMES — light(default) & dark
   ════════════════════════════════════════════════════ */
:root,
[data-theme="light"]{
  --bg1:#f5f7fb;
  --bg2:#ffffff;
  --bg3:#fbfcfe;
  --bg4:#eef3f9;
  --bd:#e3e8f0;
  --bd2:#cdd6e4;
  --t1:#1a2540;
  --t2:#475569;
  --t3:#7d8aa3;
  --blue:#2a6baa; --cyan:#0891b2; --green:#059669; --yellow:#ca8a04;
  --orange:#ea580c; --red:#dc2626; --purple:#7c3aed; --pink:#db2777;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 6px 18px rgba(15,23,42,.07);
  --topbar-bg:linear-gradient(180deg,#ffffff,#f5f7fb);
  --hero-bg:linear-gradient(135deg,rgba(8,145,178,.08),rgba(124,58,237,.06));
  --hero-bd:rgba(8,145,178,.22);
  --card-bg:linear-gradient(180deg,#ffffff,#fbfcfe);
  --chd-bg:#f6f9fd;
  --tabs-bg:#eff3f9;
  --kpi-bg:linear-gradient(180deg,#ffffff,#f8fafd);
  --tip-bg:#ffffff;
  --tip-bd:#0891b2;
  --tip-tx:#1a2540;
  --label-tx:#1a2540;
  --bg-page:radial-gradient(ellipse at 15% 25%,rgba(8,145,178,.06) 0%,transparent 55%),radial-gradient(ellipse at 85% 75%,rgba(124,58,237,.05) 0%,transparent 50%);
}
[data-theme="dark"]{
  --bg1:#080c18;
  --bg2:#0f1629;
  --bg3:#141c32;
  --bg4:#182040;
  --bd:#283858;
  --bd2:#304468;
  --t1:#f1f5fb;
  --t2:#aab6ce;
  --t3:#7e8eaa;
  --blue:#3b82f6; --cyan:#06b6d4; --green:#10b981; --yellow:#eab308;
  --orange:#f97316; --red:#ef4444; --purple:#8b5cf6; --pink:#ec4899;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 6px 22px rgba(6,182,212,.12);
  --topbar-bg:linear-gradient(180deg,rgba(15,22,41,.97),rgba(8,12,24,.92));
  --hero-bg:linear-gradient(135deg,rgba(6,182,212,.08),rgba(139,92,246,.05));
  --hero-bd:rgba(6,182,212,.18);
  --card-bg:linear-gradient(180deg,rgba(20,28,50,.7),rgba(15,22,41,.7));
  --chd-bg:rgba(8,14,26,.45);
  --tabs-bg:rgba(8,14,26,.6);
  --kpi-bg:linear-gradient(180deg,rgba(20,28,50,.85),rgba(15,22,41,.85));
  --tip-bg:rgba(15,22,41,.96);
  --tip-bd:#06b6d4;
  --tip-tx:#f1f5fb;
  --label-tx:#f1f5fb;
  --bg-page:radial-gradient(ellipse at 15% 25%,rgba(59,130,246,.06) 0%,transparent 55%),radial-gradient(ellipse at 85% 75%,rgba(139,92,246,.05) 0%,transparent 50%);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Noto Sans KR',sans-serif;background:var(--bg1);color:var(--t1);
  min-height:100vh;overflow-x:hidden;transition:background .25s,color .25s;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--bg-page);
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}

/* ─── TOP BAR ─── */
.topbar{
  position:sticky;top:0;z-index:200;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--bd);backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm);
}
.topbar-inner{
  max-width:1820px;margin:0 auto;height:56px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.logo{display:flex;align-items:center;gap:14px}
.logo-link{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
/* ★ 2026-06-22: 로고 옆 뷰별 타이틀(소비분석/유동,소비분석) — 데스크톱은 숨김, 핸드폰에서만 노출 */
.logo-suffix{ display:none }

/* ★ 상단 햄버거 — 데스크톱 숨김 / 모바일에서만 표시 */
.topbar-hamburger{
  display:none;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--bd); background:var(--bg2);
  align-items:center; justify-content:center; cursor:pointer;
  font-size:16px; color:var(--t1);
  transition:.15s; flex-shrink:0;
}
.topbar-hamburger:hover{ border-color:var(--cyan); color:var(--cyan) }
.topbar-hamburger:active{ transform:scale(.93) }
[data-theme="dark"] .topbar-hamburger{ background:rgba(15,23,42,0.6) }
body.top-menu-open .topbar-hamburger{ background:var(--cyan); color:#fff; border-color:var(--cyan) }
/* ★ 2026-06-22: 플로팅 '홈(맨 위로)' 버튼 — 기본 숨김(데스크톱). 모바일 미디어쿼리에서만 노출 */
#mobileHomeBtn{ display:none }
.logo-img{
  height:20px;width:auto;max-width:240px;display:block;
  transition:transform .2s ease, filter .2s ease;
}
.logo-img:hover{transform:scale(1.04);filter:brightness(1.05)}
/* 다크 테마: 검정 부분(DATAPORTAL)을 흰색으로 반전, 빨강/주황은 hue-rotate 로 원래 색 유지 */
[data-theme="dark"] .logo-img{filter:invert(1) hue-rotate(180deg)}
[data-theme="dark"] .logo-img:hover{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
.logo-brand{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.5px;
  background:linear-gradient(135deg,#ef4444,#f97316);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="dark"] .logo-brand{
  background:linear-gradient(135deg,#fb7185,#fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-divider{width:1px;height:22px;background:var(--bd2)}
.logo-portal{
  display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--t1);
}
.logo-portal i{color:var(--cyan);font-size:9px;animation:portalPulse 2s infinite}
@keyframes portalPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* MAIN MENU */
.main-menu{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.mn-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;font-size:12.5px;font-weight:500;
  color:var(--t2);background:var(--bg2);border:1px solid var(--bd);
  border-radius:22px;cursor:pointer;transition:.2s;text-decoration:none;
  white-space:nowrap;
}
.mn-btn i{font-size:11.5px;color:var(--t3)}
.mn-btn:hover{
  background:var(--bg4);border-color:var(--cyan);color:var(--t1);
}
.mn-btn:hover i{color:var(--cyan)}
/* ★ 2026-05-11: .on 단독은 일반 색상 (대시보드 마커일 뿐).
   실제 활성 색상은 .on.active 또는 .active 일 때만 적용. */
.mn-btn.on{
  /* 일반 상태 — 다른 버튼과 동일 */
}
.mn-btn.on.active{
  background:linear-gradient(135deg,rgba(8,145,178,.10),rgba(124,58,237,.08));
  border-color:var(--cyan);color:var(--cyan);font-weight:600;
  box-shadow:0 2px 8px rgba(8,145,178,.18);
}
.mn-btn.on.active i{color:var(--cyan)}
[data-theme="dark"] .mn-btn.on.active{background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(139,92,246,.12))}

.tb-right{display:flex;align-items:center;gap:10px}
.live-tag{
  display:flex;align-items:center;gap:6px;padding:5px 12px;
  background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.28);
  border-radius:20px;font-size:11px;color:var(--red);font-weight:600;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.gu-select{
  appearance:none;-webkit-appearance:none;
  background:var(--bg2);color:var(--t1);
  border:1px solid var(--bd);padding:8px 36px 8px 14px;border-radius:9px;
  font-size:13px;font-family:'Noto Sans KR';font-weight:500;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d8aa3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;transition:.2s;
  box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .gu-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
}
.gu-select:hover{border-color:var(--cyan);background-color:var(--bg4)}
.gu-select option{background:var(--bg2);color:var(--t1)}
.tb-time{font-size:12px;color:var(--t3);font-family:'Rajdhani';font-weight:600;min-width:62px;text-align:right}

/* PERIOD SELECTOR */
.period-tabs{
  display:inline-flex;background:var(--bg2);border:1px solid var(--bd);
  border-radius:9px;padding:3px;box-shadow:var(--shadow-sm);
}
.period-tab{
  padding:5px 12px;font-size:11.5px;color:var(--t3);cursor:pointer;
  border-radius:6px;font-weight:500;transition:.18s;user-select:none;
  display:flex;align-items:center;gap:5px;
}
.period-tab i{font-size:10px}
.period-tab:hover{color:var(--t1)}
.period-tab.on{
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(8,145,178,.25);
}

/* THEME BUTTON */
.theme-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--t2);font-size:14px;transition:.25s;box-shadow:var(--shadow-sm);
}
.theme-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--bg4)}
.theme-btn .ic-sun{display:none}
.theme-btn .ic-moon{display:inline}
[data-theme="dark"] .theme-btn .ic-sun{display:inline}
[data-theme="dark"] .theme-btn .ic-moon{display:none}

/* ─── TICKER BAR ─── */
.ticker-bar{
  position:sticky;top:56px;z-index:190;
  background:var(--bg2);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;height:42px;
  box-shadow:var(--shadow-sm);
}
.tk-inner{max-width:1820px;margin:0 auto;width:100%;height:100%;display:flex;align-items:center;padding:0 22px;gap:0}
.tk-hot{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  height:30px;padding:0 14px;border-radius:6px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:1px;
  margin-right:14px;cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow:0 2px 8px rgba(239,68,68,.3);
  animation:hotPulse 2s ease-in-out infinite;
}
.tk-news{background:linear-gradient(180deg,rgba(59,130,246,.04),rgba(255,255,255,.92));border-bottom:1px solid var(--bd)}
.tk-hot-news{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  box-shadow:0 2px 8px rgba(8,145,178,.3) !important;
}
.tk-news-item{
  display:inline-flex;align-items:center;gap:6px;padding:0 18px;
  height:42px;font-size:11px;color:var(--t1);
  border-right:1px dashed var(--bd);text-decoration:none;
  transition:.18s;
}
.tk-news-item:hover{background:var(--bg4);color:var(--cyan)}
.tk-news-item .ic{
  width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,145,178,.10);color:var(--cyan);font-size:9px;flex-shrink:0;
}
.tk-news-item .src{
  font-size:9.5px;color:var(--t3);font-weight:600;margin-right:4px;
  padding:1px 6px;background:var(--bg4);border-radius:3px;
  font-family:'Rajdhani';
}
.tk-news-item .title{font-weight:500}
.tk-news-item .time{font-size:9.5px;color:var(--t3);font-family:'Rajdhani';margin-left:4px}
@keyframes hotPulse{0%,100%{opacity:1}50%{opacity:.78}}
.tk-hot i{animation:hotFire 1s ease-in-out infinite alternate}
@keyframes hotFire{0%{transform:scale(1) rotate(-5deg)}100%{transform:scale(1.15) rotate(5deg)}}

.tk-scroll{flex:1;overflow:hidden;height:42px;position:relative;cursor:grab;
  mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}
.tk-scroll.tk-grabbing{cursor:grabbing}
.tk-row{display:flex;align-items:center;height:42px;white-space:nowrap;will-change:transform}
.tk-row:hover{animation-play-state:paused}
@keyframes tkScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ★ 2026-05-25: HOT 티커 속도 컨트롤 (정지·배속) */
.tk-ctrl{flex-shrink:0;display:flex;align-items:stretch;height:26px;align-self:center;
  margin-left:10px;border:1px solid var(--bd);border-radius:6px;overflow:hidden;background:var(--bg4)}
.tk-spd-btn{width:26px;background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:var(--t3);font-family:'Rajdhani',sans-serif;
  padding:0;transition:.15s}
.tk-spd-btn:hover{background:rgba(8,145,178,.12);color:var(--cyan)}
.tk-spd-btn.on{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.tk-spd-btn + .tk-spd-btn{border-left:1px solid var(--bd)}
.tk-spd-btn i{font-size:8px}
[data-theme="dark"] .tk-ctrl{background:rgba(255,255,255,.06)}
[data-theme="dark"] .tk-spd-btn{color:#cbd5e1}
[data-theme="dark"] .tk-spd-btn:hover{background:rgba(6,182,212,.15);color:var(--cyan)}
[data-theme="dark"] .tk-spd-btn + .tk-spd-btn{border-left-color:rgba(255,255,255,.10)}

.tk-item{
  display:inline-flex;align-items:center;gap:7px;padding:0 22px;
  height:42px;font-size:11.5px;color:var(--t2);
  border-right:1px dashed var(--bd);cursor:pointer;
  transition:background .18s;position:relative;
}
.tk-item:hover{background:var(--bg4)}
.tk-item .tk-ic{
  width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,145,178,.10);color:var(--cyan);font-size:10px;flex-shrink:0;
}
.tk-item.c-cyan .tk-ic   {background:rgba(8,145,178,.10);color:var(--cyan)}
.tk-item.c-blue .tk-ic   {background:rgba(42,107,170,.10);color:var(--blue)}
.tk-item.c-purple .tk-ic {background:rgba(124,58,237,.10);color:var(--purple)}
.tk-item.c-pink .tk-ic   {background:rgba(219,39,119,.10);color:var(--pink)}
.tk-item.c-orange .tk-ic {background:rgba(234,88,12,.10);color:var(--orange)}
.tk-item.c-green .tk-ic  {background:rgba(5,150,105,.10);color:var(--green)}
.tk-item.c-yellow .tk-ic {background:rgba(202,138,4,.10);color:var(--yellow)}
.tk-item.c-gray .tk-ic   {background:rgba(125,138,163,.13);color:var(--t3)}
.tk-lb{color:var(--t3);font-size:11px;font-weight:500}
.tk-sub{color:var(--t1);font-weight:600}
.tk-val{font-family:'Rajdhani';font-weight:700;font-size:14px;color:var(--cyan);letter-spacing:-.2px}
.tk-item.c-blue .tk-val   {color:var(--blue)}
.tk-item.c-purple .tk-val {color:var(--purple)}
.tk-item.c-pink .tk-val   {color:var(--pink)}
.tk-item.c-orange .tk-val {color:var(--orange)}
.tk-item.c-green .tk-val  {color:var(--green)}
.tk-item.c-yellow .tk-val {color:var(--yellow)}
.tk-item.c-gray .tk-val   {color:var(--t2)}
.tk-unit{font-size:10.5px;color:var(--t3);font-weight:500}

/* TOOLTIP */
.tk-tip{
  position:fixed;min-width:240px;max-width:300px;
  background:var(--bg2);border:1px solid var(--cyan);border-radius:10px;
  padding:0;opacity:0;visibility:hidden;pointer-events:none;
  z-index:9999;transition:opacity .18s,transform .18s;
  box-shadow:0 12px 36px rgba(15,23,42,.18),0 0 22px rgba(8,145,178,.1);
  transform:translateY(6px);
}
.tk-tip.on{opacity:1;visibility:visible;transform:translateY(0)}
.tk-tip-hd{
  display:flex;align-items:center;gap:8px;padding:6px 12px 5px;
  border-bottom:1px solid var(--bd);
}
.tk-tip-hd .ic{
  width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,145,178,.12);color:var(--cyan);font-size:13px;flex-shrink:0;
}
.tk-tip-hd .h1{font-size:13px;font-weight:600;color:var(--t1);line-height:1.3}
.tk-tip-hd .h2{font-size:10.5px;color:var(--t3);margin-top:2px}
.tk-tip-body{padding:7px 12px}
.tk-tip-big{
  display:flex;align-items:baseline;gap:6px;
  font-family:'Rajdhani';font-weight:700;font-size:24px;color:var(--cyan);
  margin-bottom:8px;
}
.tk-tip-big small{font-size:11.5px;color:var(--t3);font-weight:500}
.tk-tip-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;font-size:11.5px;border-top:1px dashed var(--bd);
}
.tk-tip-row:first-child{border-top:none}
.tk-tip-row .l{color:var(--t3)}
.tk-tip-row .v{color:var(--t1);font-weight:600;font-family:'Rajdhani';font-size:12.5px}
/* 티커 툴팁 — 풍부한 시각화용 보강 클래스들 */
.tk-tip{ width:300px; }
.tk-tip-hd{ position:relative; }
.tk-tip-cat{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.3px;
  padding:2px 7px; border-radius:3px; margin-bottom:4px;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#fff;
}
.tk-tip-big{
  position:relative;
  background:linear-gradient(135deg,rgba(8,145,178,.06),rgba(124,58,237,.04));
  border:1px solid var(--bd); border-radius:8px;
  padding:6px 10px; margin-bottom:6px; text-align:center;
}
.tk-tip-big .v{
  font-size:22px; font-family:'Rajdhani'; font-weight:700; line-height:1;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.tk-tip-big .u{ font-size:11.5px; color:var(--t3); margin-left:4px; font-weight:500 }
.tk-tip-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:5px;
}
.tk-tip-cell{
  background:var(--bg4); border:1px solid var(--bd); border-radius:6px;
  padding:4px 7px; font-size:10px;
}
.tk-tip-cell .l{ display:block; color:var(--t3); font-size:9px; margin-bottom:1px; font-weight:600 }
.tk-tip-cell .v{ font-family:'Rajdhani'; font-weight:700; font-size:12px; color:var(--t1) }
/* 24시간 미니 도트 라인 */
.tk-tip-hours{
  display:flex; gap:1px; align-items:flex-end; height:22px;
  margin:6px 0; padding:0 2px;
}
.tk-tip-hours .h{
  flex:1; min-width:5px; height:3px; background:var(--bd); border-radius:1.5px;
  transition:.2s;
}
.tk-tip-hours .h.on{
  height:18px; background:linear-gradient(180deg,var(--cyan),var(--blue));
  box-shadow:0 0 6px rgba(8,145,178,.5);
}
.tk-tip-hours-lb{
  display:flex; justify-content:space-between; font-size:8.5px; color:var(--t3);
  font-family:'Rajdhani'; padding:0 2px; margin-top:-2px;
}
/* 비교 바 */
.tk-tip-cmp{
  display:flex; align-items:center; gap:5px; font-size:10px; margin:4px 0;
}
.tk-tip-cmp .lb{ width:42px; color:var(--t3); font-weight:600 }
.tk-tip-cmp .bar{ flex:1; height:6px; background:var(--bg4); border-radius:3px; overflow:hidden }
.tk-tip-cmp .bar .fill{ height:100%; border-radius:3px }
.tk-tip-cmp .v{ width:50px; text-align:right; font-family:'Rajdhani'; font-weight:700; color:var(--t1); font-size:10.5px }
/* 깃발 (외국인 국가) */
.tk-tip-flag{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:linear-gradient(135deg,rgba(234,88,12,.06),rgba(245,158,11,.04));
  border:1px solid var(--bd); border-radius:6px; margin-bottom:8px;
}
.tk-tip-flag .em{ font-size:24px; line-height:1 }
.tk-tip-flag .info{ flex:1 }
.tk-tip-flag .info .nm{ font-size:13px; font-weight:700; color:var(--t1) }
.tk-tip-flag .info .cd{ font-size:9.5px; color:var(--t3); font-family:'Rajdhani'; letter-spacing:.5px }

.tk-tip-foot{
  padding:5px 12px;border-top:1px solid var(--bd);background:var(--bg3);
  border-radius:0 0 10px 10px;font-size:10px;color:var(--t3);
  display:flex;align-items:center;gap:5px;
}
.tk-tip-foot i{color:var(--cyan)}

/* ★ 2026-05-23: 화려한 통계 툴팁 — 24h 스파크라인 / 점유율 게이지 / TOP5 랭킹 */
.tk-tip-big .u small{font-size:.72em;font-weight:600;opacity:.85}
.tk-spark{
  display:flex;align-items:flex-end;gap:1.5px;height:44px;
  margin:5px 0 2px;padding:4px 4px 0;
  background:linear-gradient(180deg,var(--bg4),var(--bg3));border-radius:8px;
}
.tk-spark .b{
  flex:1;min-height:3px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#b4c0d0,#dde3ec);transition:.15s;
}
.tk-spark .b.on{
  background:linear-gradient(180deg,#fbbf24,#dc2626);
  box-shadow:0 0 7px rgba(245,158,11,.55);
}
.tk-spark .b:hover{filter:brightness(1.12)}
.tk-spark-lb{
  display:flex;justify-content:space-between;
  font-size:8px;color:var(--t3);font-family:'Rajdhani',sans-serif;
  font-weight:700;padding:2px 3px 0;letter-spacing:.5px;
}
.tk-share{margin:6px 0 2px}
.tk-share .lb{font-size:9px;color:var(--t3);font-weight:600;margin-bottom:4px}
.tk-share .bar{
  height:9px;background:var(--bg4);border-radius:5px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.10);
}
.tk-share .fill{height:100%;border-radius:5px;transition:width .5s ease}
.tk-share .pc{
  text-align:right;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:14px;color:var(--t1);margin-top:1px;
}
.tk-share .pc small{font-size:9px;color:var(--t3);margin-left:1px}
.tk-top5{margin:6px 0 2px;display:flex;flex-direction:column;gap:2px}
.tk-top5 .r{
  display:flex;align-items:center;gap:5px;font-size:10px;
  padding:1px 4px;border-radius:5px;
}
.tk-top5 .r.cur{background:linear-gradient(90deg,var(--bg4),transparent);font-weight:700}
.tk-top5 .md{width:17px;text-align:center;font-size:11px}
.tk-top5 .nm{
  width:60px;color:var(--t2);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tk-top5 .r.cur .nm{color:var(--t1)}
.tk-top5 .bar{flex:1;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}
.tk-top5 .bar .f{display:block;height:100%;border-radius:3px}
.tk-top5 .r .v{
  width:56px;text-align:right;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:10.5px;color:var(--t1);
}
.tk-tip-cmps{margin:6px 0 2px;display:flex;flex-direction:column;gap:4px}

/* ─── PAGE — 뷰포트 풀높이 3열 레이아웃 ─── */
.wrap{
  max-width:1820px;margin:0 auto;padding:12px 18px 14px;position:relative;z-index:1;
  height:calc(100vh - 56px - 42px);
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
@media(max-width:1280px){
  .wrap{height:auto;overflow:visible}
}

/* ─── TOP ROW (7컬럼 그리드 - 모든 카드 동일 폭) ─── */
.top-row{
  flex:0 0 auto;
  display:grid;grid-template-columns:repeat(7, 1fr);gap:8px;
}
/* ★ 토글 분리 모드 — 4개 카드만 균등 4-column — 2026-05-13 rev6.1 */
.top-row.kpi-split{
  grid-template-columns: repeat(4, 1fr) !important;
}
/* ★ KPI 토글 시 동적 생성되는 하단 row — 2026-05-13 rev6 */
.kpi-bottom-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px;
}
@media (max-width: 768px){
  .kpi-bottom-row{ grid-template-columns:1fr; gap:6px; }
}
/* ★ 컬럼별 KPI sub-row (col-left/center/right 안 각 행) — 2026-05-13 rev5 (잔존, 미사용) */
.kpi-sub-row{
  display:grid;gap:8px;
}
.kpi-sub-row[data-cols="2"]{ grid-template-columns:1fr 1fr; }
.kpi-sub-row[data-cols="3"]{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width: 768px){
  .kpi-sub-row[data-cols="2"], .kpi-sub-row[data-cols="3"]{ grid-template-columns:1fr; gap:6px; }
}
/* ★ sub-row 를 받기 위한 컬럼 구조 조정 — 2026-05-13 rev5
   col-left/right: 기존 1fr 1fr 1fr → auto + 1fr 1fr 1fr (sub-row 가 auto 높이)
   col-center: flex-row → flex-column (map-card + sub-row 수직 정렬) */
.body-grid:has(.kpi-sub-row) .col-left,
.body-grid:has(.kpi-sub-row) .col-right{
  grid-template-rows: auto 1fr 1fr 1fr !important;
}
.body-grid:has(.kpi-sub-row) .col-center{
  flex-direction: column !important;
}
/* :has() 미지원 브라우저 대비 — 강제 클래스 사용 */
.body-grid.has-sub-row .col-left,
.body-grid.has-sub-row .col-right{
  grid-template-rows: auto 1fr 1fr 1fr !important;
}
.body-grid.has-sub-row .col-center{
  flex-direction: column !important;
}
/* col-center 의 map-card 가 sub-row 와 같이 있을 때 max-height 으로 제한 */
.body-grid.has-sub-row .col-center .map-card{ flex: 1 1 auto; min-height: 0 }
.body-grid.has-sub-row .col-center .kpi-sub-row{ flex: 0 0 auto }
/* ★ 2026-05-21: KPI 합쳐짐(merged) 모드 — 빈 sub-row 숨김 + 좌우 컬럼 3행 균등.
 *   분산 모드에선 col-left/right 가 'auto 1fr 1fr 1fr'(빈 sub-row + grid gap 8px)라
 *   첫 카드가 col-center(지도, flex)보다 8px 아래에서 시작 → 윗선 어긋남.
 *   merged 모드에선 빈 sub-row 를 죽이고 3행 균등으로 → 지도·좌우 카드 윗선 일치. */
.body-grid.kpi-merged .kpi-sub-row{ display:none !important }
.body-grid.kpi-merged .col-left,
.body-grid.kpi-merged .col-right{ grid-template-rows: 1fr 1fr 1fr !important }

/* hkpi 단일 카드 + 도넛 단일 카드 (이전 통합 → 분리) */
.card-hkpi{
  background:linear-gradient(180deg,rgba(8,145,178,.06),rgba(124,58,237,.04));
  border:1px solid rgba(8,145,178,.18);border-radius:12px;padding:8px 12px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  box-shadow:var(--shadow-sm);
}
.card-donut{
  background:var(--bg2);
  border:1px solid var(--bd);border-radius:12px;padding:6px 8px 4px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.card-donut::after{
  content:'';position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(8,145,178,.12),transparent 70%);
  pointer-events:none;
}
.card-donut > div{position:relative;z-index:1;width:100%;height:100%}

/* ─── BODY 3 zone (7컬럼 grid에 spaning) ─── */
.body-grid{
  flex:1 1 0;min-height:0;
  display:grid;grid-template-columns:repeat(7, 1fr);gap:8px;
}
.col-left  {grid-column:1 / 3; display:grid;grid-template-rows:1fr 1fr 1fr;gap:8px;min-height:0}
.col-center{grid-column:3 / 6; min-height:0;display:flex;}
.col-right {grid-column:6 / 8; display:grid;grid-template-rows:1fr 1fr 1fr;gap:8px;min-height:0}
.col-center .card{height:100%;flex:1}
.body-grid .card{min-height:0}
.body-grid .card .cbd{min-height:0;overflow:hidden}
.body-grid .card .cha{min-height:0;height:100%}

/* ─── MAP CARD ─── */
.map-card{
  background:linear-gradient(135deg,rgba(8,145,178,.08),rgba(124,58,237,.05));
  border:1px solid rgba(8,145,178,.18);
}
.map-cbd{padding:0!important;position:relative;display:flex;flex-direction:column}
#jbMap{flex:1;min-height:200px;position:relative}
#jbMap .leaflet-container{background:var(--bg2)}
/* ★ 2026-05-22: 지도 상단 필터 바 — 오버레이가 아닌 지도(#jbMap) 위쪽 별도 줄.
   .map-cbd 가 flex 컬럼이고 #jbMap 이 flex:1 이라, 이 바 높이만큼 지도 세로가 자동 축소됨. */
.map-cbd > .map-filter-bar{
  position:static;
  flex:0 0 auto;
  display:flex; gap:5px; flex-wrap:wrap; align-items:center;
  justify-content:center;            /* ★ 2026-05-22: select 중앙 정렬 */
  padding:6px 8px;
  background:var(--chd-bg);
  border-bottom:1px solid var(--bd);
}
/* ★ 2026-05-22: 지도 필터바 — 경북 전체 초기화 버튼 */
.mc-reset-btn{
  font-size:10.5px; font-weight:700; flex-shrink:0;
  padding:3px 9px; border:1px solid #db2777; border-radius:5px;
  background:rgba(219,39,119,0.08); color:#db2777; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  font-family:inherit; white-space:nowrap;
}
.mc-reset-btn:hover{ background:rgba(219,39,119,0.18) }
.mc-reset-btn i{ font-size:9px }
/* ★ 2026-05-23: 유입/유출 동기화 '공유' 토글 — 체크박스 체크마크 칩 스타일 */
.mc-share-toggle{
  font-size:9.5px; font-weight:700; flex-shrink:0;
  padding:3px 9px; border:1px solid #2563eb; border-radius:5px;
  background:rgba(37,99,235,0.08); color:#2563eb; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; user-select:none;
}
.mc-share-toggle input{ display:none }
.mc-share-toggle::before{
  content:''; width:12px; height:12px; box-sizing:border-box;
  border:1.6px solid currentColor; border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:900; line-height:1; flex-shrink:0;
}
.mc-share-toggle:hover{ background:rgba(37,99,235,0.18) }
.mc-share-toggle.on{ background:#2563eb; border-color:#2563eb; color:#fff }
.mc-share-toggle.on::before{ content:'✓'; background:#fff; color:#2563eb; border-color:#fff }
.leaflet-popup-content{font-family:'Noto Sans KR',sans-serif;font-size:12px;color:#1a2540;line-height:1.5}
.leaflet-popup-content b{color:#0891b2;font-size:13px;display:block;margin-bottom:4px}
/* ★ 시군구 분포 바차트 툴팁(.gu-bar-tip) 스타일은 assets/dash-gu-dist.css 로 분리됨 */

/* ─── 지도 위 컨트롤 ─── */
.mc-overlay{position:absolute;z-index:1000;pointer-events:none}
.mc-overlay > *{pointer-events:auto}

/* ★ 모바일 햄버거 버튼 (기본은 데스크톱에서 숨김) */
.mc-hamburger{
  display:none;
  position:absolute; top:8px; right:8px;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--bd); background:rgba(255,255,255,0.95);
  align-items:center; justify-content:center; cursor:pointer;
  z-index:1100; font-size:16px; color:var(--t1);
  box-shadow:0 2px 8px rgba(15,23,42,0.15);
  transition:.15s; pointer-events:auto;
}
.mc-hamburger:hover{ border-color:var(--cyan); color:var(--cyan); }
.mc-hamburger:active{ transform:scale(0.92); }
[data-theme="dark"] .mc-hamburger{ background:rgba(15,23,42,0.85); color:#e5e7eb }
body.mobile-menu-open .mc-hamburger{ background:var(--cyan); color:#fff; border-color:var(--cyan) }

.mc-tiles{
  top:8px;left:8px;
  display:flex;flex-direction:column;gap:3px;
}
/* ★ 2026-05-24: 지도/위성/다크/자동 — 가로 한 줄 */
.mc-tile-row{ display:flex;flex-direction:row;gap:3px; }

/* ★ 2026-05-24: 유동인구 유입/유출 화살표 컨트롤 — 폭 넓힘(글자 들어가게) */
.mc-tile-btn.fp-toggle{
  width:114px;display:flex;align-items:center;gap:6px;
  justify-content:flex-start;cursor:pointer;white-space:nowrap;padding:6px 9px;
}
.mc-tile-btn.fp-toggle input{ cursor:pointer;margin:0;width:13px;height:13px;flex:none; }
.mc-tile-btn.fp-toggle i{ color:var(--cyan);font-size:10px }
.mc-tile-btn.fp-toggle.on i{ color:#fff }
/* 행정동 미선택 — 비활성 상태 */
.mc-tile-btn.fp-toggle.fp-disabled{
  opacity:.5;cursor:not-allowed;filter:grayscale(.6);
}
.mc-tile-btn.fp-toggle.fp-disabled input{ cursor:not-allowed; }
.mc-tile-btn.fp-toggle.fp-disabled:hover{ border-color:var(--bd);color:var(--t2); }
/* ★ 2026-05-24: 유동인구 + 카드 토글 가로 배치 */
.fp-toggle-row{ display:flex;gap:3px;flex-wrap:wrap; }
.fp-toggle-row .mc-tile-btn.fp-toggle{ width:auto;padding:6px 7px; }
.fp-toggle-row #fpToggleWrap{ flex:1; }
.fp-toggle-row #cfToggleWrap{ flex:none; }
/* ★ 2026-05-25: 유동인구·카드 통합 select 컨트롤 */
.fp-toggle-row #faToggleWrap{ flex:none; }
.fp-toggle-row #faMode{ width:auto;flex:none; }
.mc-tile-btn.fp-toggle.fa i{ color:var(--cyan); }
.mc-tile-btn.fp-toggle.fa.on{
  background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border-color:var(--cyan);
}
.mc-tile-btn.fp-toggle.fa.on i{ color:#fff; }
/* 카드 토글 — 주황 테마 */
.mc-tile-btn.fp-toggle.cf i{ color:#ea580c }
.mc-tile-btn.fp-toggle.cf.on{
  background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;border-color:#f97316;
}
.mc-tile-btn.fp-toggle.cf.on i{ color:#fff }
/* 카드 순위 패널 — 유동인구 패널 오른쪽 + 주황 헤더 */
.fp-list-panel.cf{ left:388px; }
.fp-list-panel.cf .fp-list-head{ background:linear-gradient(135deg,#f97316,#ef4444); }

/* ★ 2026-05-25: 지도 조망뷰 select — 끄기/모드선택 통합 (모드 선택 시 파랑 강조) */
.fp-toggle-row #mvMode,
.fp-toggle-row #mvDir,
.fp-toggle-row #mvTopN{ width:auto;flex:none; }
.fp-dir-sel.mv-sel.on{
  background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;border-color:#3b82f6;
}
.fp-dir-sel:disabled{ opacity:.45;cursor:not-allowed;filter:grayscale(.5); }
/* ★ 펼침 목록(option) — select 의 흰 글자(.on) 상속으로 흰배경+흰글자 되는 것 방지 */
.fp-dir-sel option{ color:#1e293b;background:#fff;font-weight:600; }

/* ── 카드업종별 — 읍면동별 3D 가로 바차트 마커 ── */
.cb-divicon{ background:none;border:none; }
.cb-mk{
  background:rgba(var(--cb-box-rgb,255,255,255),var(--cb-box-alpha,.1));
  border:1px solid rgba(203,213,225,.6);border-radius:7px;
  box-shadow:0 3px 10px rgba(15,23,42,.2);padding:3px 5px 4px;
  font-family:'Noto Sans KR',sans-serif;backdrop-filter:blur(1.5px);
}
.cb-mk-nm{
  font-size:9.5px;font-weight:800;text-align:center;
  color:var(--cb-nm-color,#1e293b);
  text-shadow:0 0 2px var(--cb-nm-halo,rgba(255,255,255,.95)),
              0 0 4px var(--cb-nm-halo,rgba(255,255,255,.95)),
              0 1px 1px var(--cb-nm-halo,rgba(255,255,255,.95));
  line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 세로 바차트 — 바를 바닥 정렬, 가장 큰 바 높이에 배경이 맞춰짐 */
.cb-mk-bars{ display:flex;flex-direction:row;align-items:flex-end;gap:2px; }
/* 3D 세로 바 — 좌측 하이라이트 + 우측 그림자로 입체감 */
.cb-bar{
  display:block;width:8px;border-radius:3px 3px 0 0;align-self:flex-end;
  box-shadow:inset 2px 0 0 rgba(255,255,255,.45),
             inset -3px 0 3px rgba(0,0,0,.3),
             1px 0 1.5px rgba(15,23,42,.32);
  transition:height .25s ease;
}
[data-theme="dark"] .cb-mk{ background:rgba(var(--cb-box-rgb,15,23,42),var(--cb-box-alpha,.1));border-color:rgba(51,65,85,.6); }
/* 차트옵션 — 박스 색상 피커 */
.mc-opt-color{
  width:36px;height:18px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--bd);border-radius:4px;background:none;
}
/* ★ 2026-06-20: 차트옵션 — 라인 굵기 select */
.mc-opt-sel{
  flex:none;font-size:10.5px;font-weight:700;color:#0891b2;cursor:pointer;
  border:1px solid var(--bd);border-radius:5px;padding:2px 4px;background:#fff;
}
[data-theme="dark"] .mc-opt-sel{ background:#1e293b;color:#67e8f9;border-color:#334155 }
/* ★ 2026-06-20: 영역선 색상 선택 팝업 (헤더 X 닫기 + 프리셋 + 직접선택) */
.geo-color-pop{
  position:fixed;z-index:1000020;width:188px;
  background:#fff;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 26px rgba(15,23,42,.28);
  font-family:'Noto Sans KR',sans-serif;
}
.geo-color-pop .gcp-hd{
  display:flex;align-items:center;justify-content:space-between;
  background:#0891b2;color:#fff;padding:6px 7px 6px 10px;font-size:11.5px;font-weight:800;
}
.geo-color-pop .gcp-x{
  border:none;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;
  width:20px;height:20px;border-radius:50%;font-size:15px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.geo-color-pop .gcp-x:hover{ background:rgba(255,255,255,.38) }
.geo-color-pop .gcp-bd{ padding:9px 10px 11px }
.geo-color-pop .gcp-sw-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:9px;
}
.geo-color-pop .gcp-sw{
  width:100%;height:24px;border-radius:5px;cursor:pointer;padding:0;
  border:1px solid rgba(15,23,42,.25);transition:transform .12s ease,box-shadow .12s ease;
}
.geo-color-pop .gcp-sw:hover{ transform:scale(1.08);box-shadow:0 0 0 2px #0891b2 }
.geo-color-pop .gcp-custom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;font-weight:700;color:#0891b2;
}
[data-theme="dark"] .geo-color-pop{ background:#1e293b;border-color:#334155;color:#e2e8f0 }
[data-theme="dark"] .geo-color-pop .gcp-custom{ color:#67e8f9 }

/* 카드매출 — 단위별 세로 바 1개 + 금액 라벨 */
.cb-amt-bars{ justify-content:center; }
.cb-amt-val{
  font-size:9px;font-weight:800;color:#ea580c;text-align:center;
  line-height:1.2;margin-top:1px;white-space:nowrap;
}
.cb-amt-val small{ font-size:7.5px;color:#94a3b8;font-weight:700;margin-left:1px; }
[data-theme="dark"] .cb-amt-val{ color:#fb923c; }

/* ★ 2026-05-25: 시군구 마커 hover 확인 툴팁 — 정확히 가리켰는지 확인용 */
.gu-marker-confirm{
  position:fixed;z-index:1000000;pointer-events:none;display:none;
  background:rgba(15,23,42,.96);color:#fff;
  border:1.5px solid #fbbf24;border-radius:9px;
  padding:7px 12px;font-size:11.5px;font-weight:700;line-height:1.5;
  font-family:'Noto Sans KR',sans-serif;white-space:nowrap;
  box-shadow:0 5px 18px rgba(0,0,0,.45);
}

/* 업종 범례 — 옵션 탭 오른쪽 (겹치지 않게) */
.cb-legend{
  top:148px;left:34px;
  background:rgba(255,255,255,.96);border:1px solid #cbd5e1;border-radius:8px;
  padding:6px 10px 7px;font-family:'Noto Sans KR',sans-serif;
  box-shadow:0 3px 10px rgba(15,23,42,.2);width:max-content;max-width:170px;
}
.cb-legend-hd{
  font-size:10.5px;font-weight:800;color:#2563eb;margin-bottom:4px;
  border-bottom:1px solid #e2e8f0;padding-bottom:3px;
}
.cb-legend-row{
  display:flex;align-items:center;gap:5px;font-size:10px;color:#334155;
  line-height:1.7;white-space:nowrap;
}
.cb-legend-row i{
  width:10px;height:10px;border-radius:3px;flex:none;display:inline-block;
}
[data-theme="dark"] .cb-legend{ background:rgba(15,23,42,.94);border-color:#334155; }
[data-theme="dark"] .cb-legend-hd{ color:#60a5fa;border-color:#334155; }
[data-theme="dark"] .cb-legend-row{ color:#cbd5e1; }
.fp-dir-sel{
  width:114px;font-size:10.5px;padding:4px 6px;border:1px solid var(--bd);
  border-radius:6px;background:var(--bg2);color:var(--cyan);
  font-weight:700;cursor:pointer;outline:none;pointer-events:auto;
  font-family:'Noto Sans KR',sans-serif;
}
.fp-info{
  background:rgba(255,255,255,.94);border:1px solid var(--bd);border-radius:7px;
  padding:5px 11px;font-size:11px;color:var(--t1);
  box-shadow:0 2px 8px rgba(15,23,42,.18);
  font-family:'Noto Sans KR',sans-serif;line-height:1.5;
}
[data-theme="dark"] .fp-info{ background:rgba(15,23,42,.9);color:#e5e7eb }
/* 상위개수 select + 순위목록 아이콘 행 */
.fp-topn-row{ width:114px;display:flex;gap:3px;align-items:stretch; }
.fp-topn-row .fp-dir-sel{ flex:1;width:auto; }
.fp-list-btn{
  width:27px;flex:none;border:1px solid var(--bd);border-radius:6px;
  background:rgba(255,255,255,.95);color:var(--cyan);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  box-shadow:0 2px 6px rgba(15,23,42,.08);transition:.15s;
}
.fp-list-btn:hover{ border-color:var(--cyan); }
.fp-list-btn.on{
  background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border-color:var(--cyan);
}
/* 유동인구 순위 목록 패널 */
.fp-list-panel{ top:8px;left:132px; }
.fp-list-box{
  width:248px;background:rgba(255,255,255,.97);border:1px solid var(--bd);
  border-radius:10px;box-shadow:0 8px 26px rgba(15,23,42,.32);overflow:hidden;
  font-family:'Noto Sans KR',sans-serif;
}
[data-theme="dark"] .fp-list-box{ background:rgba(15,23,42,.96);color:#e5e7eb }
.fp-list-head{
  background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;
  padding:7px 11px;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;gap:5px;
}
.fp-list-head b{ font-size:13px;color:#fde047;margin:0 1px }
/* ★ 한 화면에 약 12개 행만 노출 (1행 ≈ 29px) — 나머지는 스크롤 */
.fp-list-body{ max-height:350px;overflow-y:auto; }
.fp-list-body::-webkit-scrollbar{ width:7px }
.fp-list-body::-webkit-scrollbar-thumb{ background:#cbd5e1;border-radius:4px }
.fp-list-empty{ padding:22px 12px;text-align:center;color:#94a3b8;font-size:11.5px }
.fp-li{
  position:relative;display:flex;align-items:center;gap:6px;
  padding:5px 9px;border-bottom:1px solid rgba(148,163,184,.18);overflow:hidden;
}
.fp-li:last-child{ border-bottom:0 }
.fp-li-bar{ position:absolute;left:0;top:0;bottom:0;opacity:.16;z-index:0 }
.fp-li-rk{
  position:relative;z-index:1;width:18px;height:18px;border-radius:50%;
  color:#fff;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;font-family:'Rajdhani',sans-serif;
}
.fp-li-nm{
  position:relative;z-index:1;flex:1;font-size:10.5px;font-weight:700;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fp-li-v{
  position:relative;z-index:1;flex:none;font-size:11.5px;font-weight:800;
  font-family:'Rajdhani',sans-serif;color:var(--t1);
}
.fp-li-v small{ font-size:8.5px;font-weight:600;color:var(--t3);margin-left:1px }
.fp-li-pct{
  position:relative;z-index:1;flex:none;font-size:9px;font-weight:800;color:#fff;
  padding:1px 5px;border-radius:7px;min-width:32px;text-align:center;
}
/* 화살표 hover 툴팁 — 강조 스타일 */
.leaflet-tooltip.fp-tip{
  padding:6px 10px;border-radius:9px;border:1px solid #cbd5e1;
  box-shadow:0 5px 16px rgba(15,23,42,.30);
  font-family:'Noto Sans KR',sans-serif;line-height:1.35;
}
.leaflet-tooltip.fp-tip b{ line-height:1 }
/* 흐르는 점선 화살표 애니메이션 */
.fp-arrow-flow{ animation: fpFlow .8s linear infinite; }
@keyframes fpFlow{ to { stroke-dashoffset:-20; } }
/* 상대(시작/도착) 행정동 — 값 크기 비례 원 마커 */
.fp-partner-dot{
  border-radius:50%;border:2px solid #fff;box-sizing:border-box;
  box-shadow:0 1px 5px rgba(0,0,0,.55);opacity:.9;
  display:flex;align-items:center;justify-content:center;
}
/* 원 안 비중% */
.fp-partner-pct{
  color:#fff;font-weight:800;font-family:'Rajdhani',sans-serif;
  line-height:1;letter-spacing:-.3px;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* 상대 행정동 — 원 아래 명칭 라벨 */
.fp-partner-wrap{ display:flex;flex-direction:column;align-items:center;line-height:1; }
.fp-partner-lb{
  margin-top:2px;font-size:9.5px;font-weight:800;color:#fff;
  background:rgba(15,23,42,.78);padding:1px 5px;border-radius:5px;
  white-space:nowrap;letter-spacing:-.2px;
  font-family:'Noto Sans KR',sans-serif;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
/* 선택 행정동 중심 — 펄스 링 */
.fp-center-ring{ position:relative;width:34px;height:34px; }
.fp-center-ring .fp-pulse,
.fp-center-ring .fp-core{
  position:absolute;left:50%;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;
}
.fp-center-ring .fp-pulse{ animation: fpPulse 1.7s ease-out infinite; }
.fp-center-ring .fp-core{ border:2.5px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.3); }
@keyframes fpPulse{
  0%{ transform:scale(1);opacity:.8 }
  100%{ transform:scale(3);opacity:0 }
}

/* ─── 차트 옵션 패널 (좌측 슬라이드 접기/펼치기) ─── */
/* ★ 2026-05-24: 타일이 가로 1줄 + 유동인구 컨트롤 밑 — top 위로 조정 */
.mc-options{
  top:140px; left:0;
  display:flex;align-items:flex-start;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  transform:translateX(8px);
  pointer-events:none;
}
.mc-options > *{pointer-events:auto}
.mc-options.collapsed{transform:translateX(-148px)}

.mc-opt-panel{
  width:148px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--bd);border-right:none;
  border-radius:8px 0 0 8px;
  box-shadow:0 4px 14px rgba(15,23,42,.12);
  overflow:hidden;display:flex;flex-direction:column;
  max-height:300px;
}
.mc-opt-hd{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;background:var(--bg4);border-bottom:1px solid var(--bd);
  user-select:none;font-size:11px;font-weight:700;color:var(--t1);
  flex-shrink:0;
}
.mc-opt-hd .ic-main{color:var(--cyan);font-size:10.5px}
.mc-opt-bd{padding:6px 8px;overflow-y:auto;flex:1}

/* 접기/펼치기 탭 (우측 손잡이) — 우측 '목록' 탭과 동일한 크기/스타일 */
.mc-opt-tab{
  width:24px;
  height:60px;
  align-self:flex-start;
  background:linear-gradient(135deg,#0ea5e9,#0891b2);
  border-radius:0 8px 8px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.12),2px 0 6px rgba(8,145,178,.18);
  font-size:11px;font-weight:700;letter-spacing:1px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  padding:10px 0;
  transition:.18s;
  position:relative;
}
.mc-opt-tab:hover{filter:brightness(1.1)}
.mc-opt-tab i{margin-bottom:6px;font-size:13px;writing-mode:horizontal-tb;transition:transform .35s}
.mc-options.collapsed .mc-opt-tab i{transform:rotate(180deg)}
.mc-opt-tab .lb{margin-top:4px;line-height:1.1}
.mc-opt-sect{padding:3px 0}
.mc-opt-sect + .mc-opt-sect{border-top:1px dashed var(--bd);margin-top:3px;padding-top:5px}

/* 히트맵 옵션 sub-panel — 히트맵 라디오 선택 시 펼침 */
.mc-heat-opts{ font-size:10.5px; color:var(--t2); border:1px solid rgba(8,145,178,0.18); }
.mc-heat-row{
  display:block; padding:5px 6px 7px; line-height:1.3;
  border-bottom:1px dotted rgba(8,145,178,0.15);
}
.mc-heat-row:last-child{ border-bottom:none }
.mc-heat-row .mc-heat-hd{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:3px;
}
.mc-heat-row label{ font-weight:700; color:#0891b2; font-size:10.5px; cursor:pointer }
.mc-heat-val{ font-weight:800; color:#1d4ed8; font-family:Rajdhani,monospace; font-size:11px }
.mc-heat-row input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; cursor:pointer;
  background:linear-gradient(to right, #06b6d4, #0891b2, #1d4ed8);
  border-radius:4px; outline:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);
  margin:2px 0;
}
.mc-heat-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid #0891b2; cursor:grab;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
  transition:transform .12s;
}
.mc-heat-row input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15) }
.mc-heat-row input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; background:#0891b2 }
.mc-heat-row input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid #0891b2; cursor:grab;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
}
.mc-heat-row input[type=range]::-moz-range-track{
  background:linear-gradient(to right, #06b6d4, #0891b2, #1d4ed8);
  height:8px; border-radius:4px;
}

/* ─── 우측 소상공인 리스트 패널 (옵션 패널의 거울형)
 *   ★ top:155px — 우측 상단 mc-actions 4개 아이콘 (CSV/전체CSV/전체화면/팝업)
 *      30px × 4 + 3px × 3 + 8px 시작 = 137px 까지 차지하므로 그 아래로 배치
 *   ★ bottom:8px — 지도 하단까지 (overflow 방지) */
.sb-list-panel{
  top:155px; right:0; bottom:8px;
  display:flex; align-items:stretch;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  transform:translateX(-8px);
  pointer-events:none;
  z-index:1100;
}
.sb-list-panel > *{pointer-events:auto}
/* ★ 접기 — 본문 폭(340px) 만큼 우측으로 밀어 탭만 노출 */
.sb-list-panel.collapsed{transform:translateX(340px)}
.sb-list-panel.collapsed .sb-list-bd{ visibility:hidden }   /* 탭 외 영역 클릭 차단 */
.sb-list-tab{
  width:24px;
  background:linear-gradient(135deg,#0ea5e9,#0891b2);
  border-radius:8px 0 0 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.12),-2px 0 6px rgba(8,145,178,.18);
  font-size:11px; font-weight:700; letter-spacing:1px;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:10px 0;
  height:60px;
  align-self:flex-start;
  margin-top:8px;
  transition:.18s;
}
.sb-list-tab:hover{filter:brightness(1.1)}
.sb-list-tab i{margin-bottom:6px; font-size:13px; writing-mode:horizontal-tb; transition:transform .35s}
.sb-list-panel:not(.collapsed) .sb-list-tab i{transform:rotate(180deg)}
.sb-list-tab .lb{margin-top:4px; line-height:1.1}
.sb-list-bd{
  width:340px;             /* ★ 2-column 위해 282 → 340 */
  height:100%;             /* ★ 부모(sb-list-panel) 가 top:155 ~ bottom:8 로 제어 */
  max-height:none;
  background:rgba(255,255,255,.98);
  border:1px solid var(--bd); border-left:none;
  border-radius:0 8px 8px 0;
  box-shadow:-4px 4px 14px rgba(15,23,42,.12);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.sb-list-search{
  display:flex; gap:5px;
  padding:8px 10px; background:var(--bg4); border-bottom:1px solid var(--bd);
  flex-shrink:0;
}
.sb-list-search input{
  flex:1; padding:6px 9px;
  border:1px solid var(--bd); border-radius:6px;
  font-size:11.5px; color:var(--t1); background:#fff; outline:none;
  font-family:'Noto Sans KR',sans-serif;
}
.sb-list-search input:focus{border-color:var(--cyan)}
.sb-list-search button{
  width:30px; height:30px; flex-shrink:0;
  border:1px solid var(--bd); background:#fff; border-radius:6px;
  cursor:pointer; color:var(--t2); font-size:11px;
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.sb-list-search button:hover{border-color:var(--cyan); color:var(--cyan)}
.sb-list-hd{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; background:linear-gradient(135deg,#dbeafe,#e0f2fe);
  border-bottom:1px solid var(--bd);
  font-size:11.5px; font-weight:700; color:#0c4a6e;
  flex-shrink:0;
}
.sb-list-hd .tt b{color:#0891b2; margin-left:4px}
.sb-list-body{
  flex:1; overflow-y:auto; padding:0; background:#fff;
  /* ★ 1-column — 각 항목이 2줄(이름+분류 / 주소)로 표시되므로 리스트는 단일 열 */
  display:block;
}
.sb-list-empty{
  padding:30px 16px; text-align:center; font-size:11.5px; color:var(--t3);
}
.sb-list-item{
  padding:7px 11px; border-bottom:1px solid #f1f5f9;
  cursor:pointer; transition:background .12s;
  min-width:0;
}
.sb-list-item:hover{background:#f8fafc}
/* ★ 1줄: 이름 (좌) ─ 분류 (우)  /  2줄: 주소 (전체 폭) */
.sb-list-item .row1{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:#0f172a;
  margin-bottom:3px;
  min-width:0;
}
.sb-list-item .row1 .nm{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-list-item .row1 .cat{
  font-size:11px; color:#0891b2; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:48%;             /* 분류가 너무 길면 잘리도록 */
  flex-shrink:0;
}
/* 기존 row2 (분류) → 안 쓰이므로 숨김 (구버전 호환) */
.sb-list-item .row2{ display:none }
.sb-list-item .row3{
  font-size:10.5px; color:#64748b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-list-item .tag{
  font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px;
  background:#dbeafe; color:#1d4ed8;
  flex-shrink:0;
}
.sb-list-item.act{
  background:#fef9c3; border-left:3px solid #f59e0b;
}
.sb-list-pager{
  padding:8px 10px; border-top:1px solid var(--bd);
  background:var(--bg4); display:flex; gap:3px; justify-content:center;
  flex-wrap:wrap; flex-shrink:0;
}
.sb-list-pager button{
  min-width:26px; height:24px; padding:0 6px;
  border:1px solid var(--bd); background:#fff; border-radius:4px;
  font-size:10.5px; cursor:pointer; color:var(--t2);
  font-family:'Rajdhani',sans-serif; font-weight:600;
  transition:.12s;
}
.sb-list-pager button:hover{border-color:var(--cyan); color:var(--cyan)}
.sb-list-pager button.on{background:linear-gradient(135deg,#0891b2,#0ea5e9); color:#fff; border-color:#0891b2}
.sb-list-pager button:disabled{opacity:.4; cursor:not-allowed}
/* ★ 전체화면 / 팝업 모드 — 리스트 패널 더 넓고 길게 */
.map-card:fullscreen .sb-list-panel,
.map-card:-webkit-full-screen .sb-list-panel,
.map-card.map-card-popup .sb-list-panel{
  top:155px; bottom:16px;
}
.map-card:fullscreen .sb-list-bd,
.map-card:-webkit-full-screen .sb-list-bd,
.map-card.map-card-popup .sb-list-bd{
  width:420px;       /* 더 넓게 — 2 column 항목 더 여유 */
  height:100%;
}
/* ★ 전체화면 / 팝업 — 본문 폭이 420px 이므로 collapsed translateX 도 동일하게 */
.map-card:fullscreen .sb-list-panel.collapsed,
.map-card:-webkit-full-screen .sb-list-panel.collapsed,
.map-card.map-card-popup .sb-list-panel.collapsed{
  transform:translateX(420px);
}

/* ★ 마스터 토글 — '유동데이터(skt)' 체크박스 OFF 시 .skt-data-section 모두 숨김
 *    (gu 마커 툴팁 24h/연령 섹션, 셀 툴팁 24h/연령 섹션 등)
 *    체크박스 ON 시: body.skt-data-on 클래스 추가 → 표시 */
body:not(.skt-data-on) .skt-data-section{ display:none !important }
/* ★ 메트릭 패널 1행 — OFF 시 metricBox(거주/근무/방문) 숨겨지므로 2열로 재구성 */
body:not(.skt-data-on) .skt-mgrid{
  grid-template-columns: 0.7fr 1fr !important;
}

/* ★ 팝업 모드 — dragBar(32px) + 헤더 뉴스(37px) 영역 회피 (전체화면은 dragBar 없음) */
/* ★ 2026-05-31: 헤더(뉴스)를 dragBar 아래로 내려 보이게 + 밝은 dragBar 로 검정 바 제거 */
.map-card.map-card-popup .chd{ margin-top:34px !important }
.map-card.map-card-popup .mc-popup-dragbar{
  background:rgba(248,250,252,0.96) !important; box-shadow:none !important;
  border-bottom:1px solid #e5e7eb;
}
.map-card.map-card-popup .mc-popup-dragbar span{ color:#0f172a !important }
.map-card.map-card-popup .mc-popup-dragbar .mc-popup-fs{ background:#e2e8f0 !important; color:#0f172a !important }
.map-card.map-card-popup .mc-tiles,
.map-card.map-card-popup .mc-actions{ top:77px !important }     /* 8 + 32 + 37 */
.map-card.map-card-popup .mc-options{ top:219px !important }    /* 150 + 69 */
.map-card.map-card-popup .sb-list-panel{ top:224px !important } /* 155 + 69 */
.map-card.map-card-popup #metricPanel{ top:301px !important }   /* 232 + 69 */
/* ★ 2026-05-31: 팝업/전체화면에서 좌하단 소상공인 토글이 하단 바/가장자리에 가리지 않게 위로 */
.map-card.map-card-popup .sb-legend-toggle{ bottom:50px !important }
.sb-list-pager .pg-info{
  font-size:10.5px; color:var(--t3); display:flex; align-items:center; padding:0 4px;
  font-family:'Rajdhani',sans-serif;
}

.mc-opt-row{
  display:flex;align-items:center;gap:6px;
  padding:4px 4px;border-radius:5px;cursor:pointer;
  font-size:10.5px;color:var(--t2);transition:.15s;
}
.mc-opt-row:hover{background:var(--bg4)}
.mc-opt-row input[type="radio"], .mc-opt-row input[type="checkbox"]{
  margin:0;cursor:pointer;accent-color:var(--cyan);width:13px;height:13px;flex-shrink:0;
}
.mc-opt-row .ic{
  width:18px;height:18px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg4);color:var(--t3);font-size:9px;flex-shrink:0;
}
.mc-opt-row.act .ic, .mc-opt-row:has(input:checked) .ic{
  background:rgba(8,145,178,.14);color:var(--cyan);
}
.mc-opt-row .lb{flex:1;font-weight:500}
.mc-opt-row.act .lb, .mc-opt-row:has(input:checked) .lb{color:var(--t1);font-weight:600}

.mc-opt-slider{
  -webkit-appearance:none;appearance:none;
  width:50px;height:4px;background:var(--bg4);border-radius:2px;outline:none;
  cursor:pointer;
}
.mc-opt-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:11px;height:11px;
  background:var(--cyan);border-radius:50%;cursor:pointer;
}
.mc-opt-slider::-moz-range-thumb{
  width:11px;height:11px;background:var(--cyan);border-radius:50%;cursor:pointer;border:none;
}
.mc-opt-val{font-family:'Rajdhani';font-size:10px;color:var(--cyan);font-weight:700;min-width:18px;text-align:right}

@media(max-width:768px){
  .mc-options{width:120px;top:120px}
  .mc-opt-hd{padding:6px 8px;font-size:10px}
  .mc-opt-row{padding:3px;font-size:9.5px}
}

/* ─── 마커 스타일별 변형 (smallbiz_map의 leaflet div-icon 위에 적용) ─── */
.mk-3d{
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));
  transform:scale(1.4) translateY(-4px) !important;
  transition:transform .25s;
}
.mk-heat{
  filter:blur(3px) saturate(1.8) brightness(1.2);
  transform:scale(2.5) !important;
  opacity:.55;
}
.mk-bubble{
  transform:scale(1.8) !important;
  filter:drop-shadow(0 0 12px currentColor);
  animation:bubblePulse 2.4s ease-in-out infinite;
}
@keyframes bubblePulse{
  0%,100%{transform:scale(1.6)}
  50%{transform:scale(2.0)}
}
.mc-tile-btn{
  width:38px;padding:5px 0;text-align:center;
  background:rgba(255,255,255,.95);border:1px solid var(--bd);
  font-size:10.5px;font-weight:700;color:var(--t2);
  cursor:pointer;border-radius:6px;transition:.15s;
  font-family:'Noto Sans KR',sans-serif;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}
.mc-tile-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.mc-tile-btn.on{
  background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border-color:var(--cyan);
  box-shadow:0 2px 8px rgba(8,145,178,.3);
}

.mc-filters{
  top:8px;left:54px;right:auto;
  display:flex;gap:4px;flex-wrap:wrap;align-items:center;
}
.mc-sel, .mc-search{
  background:rgba(255,255,255,.95);
  border:1px solid var(--bd);border-radius:6px;
  padding:5px 20px 5px 8px;font-size:10.5px;color:var(--t2);
  font-family:'Noto Sans KR';cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%237d8aa3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
  transition:.15s;
  max-width:96px; min-width:72px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#mcMajorCat{max-width:104px}
#mcSubCat,  #mcSubSub{max-width:92px}
#mcMajorCat ~ .cs-btn{ min-width:74px !important; max-width:92px !important }
#mcSubCat   ~ .cs-btn,
#mcSubSub   ~ .cs-btn{ min-width:66px !important; max-width:84px !important }
#mcCatSel   ~ .cs-btn{ min-width:90px !important; max-width:120px !important }
#mcDongSel  ~ .cs-btn{ min-width:78px !important; max-width:104px !important }
.mc-sel:hover{border-color:var(--cyan)}
.mc-sel.placeholder{color:var(--t3);font-style:italic}
.mc-sel option{font-size:11px;padding:2px 6px}
.mc-search{
  width:90px;padding:5px 9px;cursor:text;
  background-image:none;
}
.mc-search:focus{border-color:var(--cyan)}

.leaflet-control-zoom{display:none !important}
.mc-zoom-btn{
  width:26px;height:26px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--bd);border-radius:5px;
  font-size:14px;font-weight:700;color:var(--cyan);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
  transition:.15s;
}
.mc-zoom-btn:hover{background:#fff;border-color:var(--cyan);box-shadow:0 4px 10px rgba(8,145,178,.18)}
.mc-zoom-btn:active{transform:scale(.95)}

.mc-actions{
  top:8px;right:8px;
  display:flex;flex-direction:column;gap:3px;
}
.mc-act-btn{
  width:30px;height:30px;border-radius:6px;
  background:rgba(255,255,255,.95);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);font-size:12px;cursor:pointer;
  transition:.15s;text-decoration:none;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}
.mc-act-btn:hover{border-color:var(--cyan);color:var(--cyan);background:#fff}
.mc-act-btn.csv{color:var(--green)}
.mc-act-btn.csv-all{color:var(--blue)}
.mc-act-btn.full{color:var(--orange)}
/* ★ KPI 토글 버튼 — 라벨 함께 (위로/아래로) — 2026-05-13 */
.mc-actions .mc-act-btn.kpi-toggle{
  color:#8b5cf6 !important;
  width:auto !important;
  min-width:46px !important;
  height:30px !important;
  padding:0 8px !important;
  gap:4px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:1px solid #cbd5e1 !important;
  border-radius:6px !important;
  box-shadow:0 2px 6px rgba(15,23,42,.08) !important;
  cursor:pointer !important;
}
.mc-actions .mc-act-btn.kpi-toggle i{ font-size:11px }
.mc-actions .mc-act-btn.kpi-toggle .mc-act-lb{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  font-size:10px;letter-spacing:-.3px;
  display:inline-block !important;
}
.mc-actions .mc-act-btn.kpi-toggle:hover{border-color:#8b5cf6 !important;color:#8b5cf6 !important;background:#faf5ff !important}
.mc-actions .mc-act-btn.kpi-toggle.active{background:#8b5cf6 !important;color:#fff !important;border-color:#8b5cf6 !important}
.mc-actions .mc-act-btn.kpi-toggle.active .mc-act-lb,
.mc-actions .mc-act-btn.kpi-toggle.active i{color:#fff !important}
/* ★ KPI 영구 분리 — 2026-05-13 rev3 */
.top-row.kpi-merged{
  grid-template-columns: repeat(7, 1fr) !important;
}
.kpi-bottom-row{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap:8px;
  margin-top:10px;
}
@media (max-width: 1200px){
  .kpi-bottom-row{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 768px){
  .kpi-bottom-row{ grid-template-columns: 1fr; gap:6px }
}

/* ─── 우측 상단 세로 zoom 컨트롤 — 2026-05-11 ───
   ★ ＋/슬라이더/－/홈 4단 구성 (목록 탭 top:163 바로 위까지)
   ★ 숫자 라벨 좌측 + 눈금선 우측 + 현재값 칩 좌측 */
.mc-zoomvbar{
  position:absolute;
  top: 8px;
  right: 8px;
  height: 156px !important;  /* ＋(16)+gap(2)+track(96)+gap(2)+－(16)+gap(2)+홈(16)+padding(6) = 156 */
  z-index: 1200;
  width: 42px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 2px 10px rgba(15,23,42,.12);
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  box-sizing: border-box;
  overflow: hidden;
}
.mc-actions{ right: 54px !important }
[data-theme="dark"] .mc-zoomvbar{
  background: rgba(15,23,42,0.88);
  border-color: rgba(255,255,255,0.14);
}
.mc-zv-btn{
  width:32px;height:16px;
  flex:0 0 auto;
  background:rgba(255,255,255,0.7);
  border:1px solid var(--bd);
  border-radius:4px;
  font-size:12px;font-weight:700;color:var(--cyan);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;transition:.15s;
}
.mc-zv-btn:hover{background:#fff;border-color:var(--cyan);box-shadow:0 2px 6px rgba(8,145,178,.18)}
.mc-zv-btn:active{transform:scale(.92)}
.mc-zv-home{
  color: var(--orange);
  font-size: 10px;
  background: linear-gradient(180deg, rgba(254,243,226,0.95), rgba(255,255,255,0.85));
}
.mc-zv-home:hover{ border-color: var(--orange); color: #fff; background: var(--orange); box-shadow: 0 2px 6px rgba(234,88,12,.30) }
.mc-zv-home i{ font-size: 9px }
[data-theme="dark"] .mc-zv-btn{background:rgba(255,255,255,0.10);color:#67e8f9;border-color:rgba(255,255,255,0.16)}
[data-theme="dark"] .mc-zv-home{ color:#fb923c; background:rgba(251,146,60,0.10) }
[data-theme="dark"] .mc-zv-home:hover{ background:#fb923c; color:#fff; border-color:#fb923c }

.mc-zv-track{
  position:relative;
  flex: 0 0 auto;
  height: 96px !important;
  width: 100%;
  display:flex;align-items:center;justify-content:flex-end;
  padding: 0;
  box-sizing: border-box;
}
.mc-zv-ticks{
  position: absolute;
  top: 4px; bottom: 4px;
  left: 0; right: 12px;
  pointer-events: none;
  z-index: 3;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
.mc-zv-tick{
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  text-align: right;
  font-size: 7px;
  font-weight: 600;
  color: var(--t3);
  letter-spacing: -0.5px;
  line-height: 1;
  opacity: 0.85;
  transition: color .15s, opacity .15s, transform .15s;
}
.mc-zv-tick::after{
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background: rgba(8, 145, 178, 0.45);
  pointer-events: none;
}
.mc-zv-tick.major{
  font-size: 8px;
  font-weight: 700;
  color: var(--cyan);
  opacity: 1;
}
.mc-zv-tick.major::after{
  width: 9px;
  height: 1.5px;
  background: var(--cyan);
}
.mc-zv-tick.current{
  color: var(--orange);
  font-size: 9px;
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
}
.mc-zv-tick.current::after{
  background: var(--orange);
  width: 12px;
  height: 2px;
  box-shadow: 0 0 4px rgba(234,88,12,0.6);
}
.mc-zv-tick.half{
  color: var(--orange);
  opacity: 0.7;
  font-weight: 700;
}
.mc-zv-tick.half::after{
  background: var(--orange);
  opacity: 0.7;
}
[data-theme="dark"] .mc-zv-tick{ color: rgba(255,255,255,0.55) }
[data-theme="dark"] .mc-zv-tick.major{ color: #67e8f9 }
[data-theme="dark"] .mc-zv-tick.current{ color: #fb923c }
[data-theme="dark"] .mc-zv-tick.half{ color: #fb923c }
[data-theme="dark"] .mc-zv-tick::after{ background: rgba(103,232,249,0.55) }
[data-theme="dark"] .mc-zv-tick.major::after{ background: #67e8f9 }
[data-theme="dark"] .mc-zv-tick.current::after{ background: #fb923c }

/* 세로 슬라이더 — 표준 writing-mode 방식 (deprecated slider-vertical 대체)
   ★ 2026-05-11: appearance:slider-vertical 가 deprecated 됨.
   writing-mode: vertical-lr + direction: rtl 조합으로 표준 방식 사용. */
.mc-zv-slider{
  /* fallback (구 브라우저용) */
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  /* 표준 방식 — 세로 + top 이 max */
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 96px !important;
  min-height: 0;
  max-height: 96px;
  background: linear-gradient(180deg, var(--cyan), rgba(8,145,178,0.25));
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 0 2px 0 0;
  padding: 0;
  touch-action:none;
  position: relative;
  z-index: 1;
}
.mc-zv-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cyan);
  box-shadow: 0 2px 5px rgba(8,145,178,.30);
  cursor: pointer; transition: .15s;
}
.mc-zv-slider::-webkit-slider-thumb:hover{ transform: scale(1.12); box-shadow: 0 3px 8px rgba(8,145,178,.45) }
.mc-zv-slider::-moz-range-track{
  width: 6px; height: 96px;
  background: linear-gradient(180deg, var(--cyan), rgba(8,145,178,0.25));
  border-radius: 3px;
}
.mc-zv-slider::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cyan);
  box-shadow: 0 2px 5px rgba(8,145,178,.30);
  cursor: pointer;
}

.mc-zv-val{
  position:absolute;
  left: -38px;
  top: 50%; transform: translateY(-50%);
  min-width: 30px; padding: 3px 6px;
  background: var(--cyan); color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align:center; line-height:1.2;
  pointer-events:none;
  box-shadow: 0 2px 6px rgba(8,145,178,.40), 0 0 0 1px rgba(255,255,255,0.5) inset;
  opacity: 1;
  z-index: 9999;
  white-space: nowrap;
  transition: transform .15s, background .15s;
}
.mc-zoomvbar.active .mc-zv-val{
  background: var(--orange);
  transform: translateY(-50%) scale(1.1);
}
.mc-zoomvbar.active .mc-zv-val::after{ border-left-color: var(--orange) }
.mc-zv-val::after{
  content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:var(--cyan);
  transition: border-left-color .15s;
}

/* 팝업 모드 — 드래그바(32px)+헤더(37px) 만큼 아래로 */
.map-card.map-card-popup .mc-zoomvbar{ top: 77px !important; height: 156px !important }
.map-card.map-card-popup .mc-actions{ top: 77px !important }

/* 모바일/좁은 화면 */
@media (max-width: 900px){
  .mc-zoomvbar{ top: 8px; padding: 3px; width: 38px; height: 138px !important }
  .mc-zv-btn{ width:30px; height:14px; font-size:11px }
  .mc-zv-track{ height: 80px !important }
  .mc-zv-slider{ height: 80px !important; max-height:80px }
  .mc-zv-slider::-moz-range-track{ height: 80px }
  .mc-zv-tick{ font-size: 6.5px }
  .mc-zv-val{ left: -36px; font-size: 12px; padding: 2px 4px; min-width: 28px }
  .mc-zv-home i{ font-size: 8px }
}
@media (max-width: 480px){
  .mc-zoomvbar{ top: 8px; right: 6px; height: 124px !important }
  .mc-zv-track{ height: 68px !important }
  .mc-zv-slider{ height: 68px !important; max-height:68px }
  .mc-zv-slider::-moz-range-track{ height: 68px }
}

.mc-avatar{
  bottom:62px;right:8px;
  z-index:500;
  width:48px;height:62px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(8,145,178,.0),rgba(8,145,178,.10));
  border-radius:24px 24px 8px 8px;
  cursor:pointer;transition:.2s;
}
.mc-avatar:hover{transform:translateY(-2px) scale(1.05)}
.mc-avatar .head{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;
  box-shadow:0 4px 12px rgba(245,158,11,.4);
  margin-bottom:-2px;
}
.mc-avatar .pin{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:8px solid var(--red);margin-top:2px;
}

/* ★ 2026-06-09: 차트옵션 '툴팁' 체크 해제 → 지도의 모든 툴팁 숨김
   (.leaflet-tooltip = 시군구 마커·분포·흐름 화살표 툴팁, .mapbar-rich = 카드 리치 툴팁) */
body.map-tip-off .leaflet-tooltip,
body.map-tip-off .mapbar-rich,
body.map-tip-off .gu-bar-tip,
body.map-tip-off .rich-tip-float{ display:none !important; }

/* ★ 2026-06-09: 소상공인 표시 토글 — 좌측 하단 항상 표시 */
.sb-show-toggle{
  position:absolute; bottom:8px; left:8px; z-index:1001;
  pointer-events:auto;          /* ★ mc-overlay 의 none 을 덮어 라벨 전체 클릭 가능 */
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--bd); border-radius:8px;
  padding:6px 10px; font-size:11px; font-weight:600; color:#334155;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  cursor:pointer; user-select:none;
}
.sb-show-toggle input{ margin:0; cursor:pointer; width:13px; height:13px; }
.sb-show-toggle i{ color:#ea580c; font-size:12px; }
.sb-show-toggle:hover{ border-color:#ea580c; }
[data-theme="dark"] .sb-show-toggle{ background:rgba(30,41,59,.96); color:#e2e8f0; border-color:#334155; }
/* ★ 2026-06-12: 지도 최대확대(전체화면) 시 — 하단 통계 스트립(약 170px+탭)에 가리지 않게 위로 */
.map-card:fullscreen .sb-show-toggle{ bottom:205px; }
.map-card:-webkit-full-screen .sb-show-toggle{ bottom:205px; }

.mc-legend{
  bottom:46px;left:8px;   /* ★ 2026-06-09: 소상공인 토글 위로 이동(겹침 방지) */
  background:rgba(255,255,255,.96);
  border:1px solid var(--bd);border-radius:8px;
  padding:6px 10px;
  padding-top:22px;          /* ★ 우상단 닫기버튼 자리 확보 */
  font-size:10.5px;
  box-shadow:0 4px 12px rgba(15,23,42,.1);
  max-width:200px;
  display:none;
}
.mc-legend.expanded{ display:block }
/* ★ 패널 펼침 시 우상단 X 닫기 버튼 (2026-05-12) */
.mc-legend-close{
  position:absolute; top:4px; right:5px; z-index:810;
  width:20px; height:20px; padding:0;
  border:1px solid var(--bd); border-radius:50%;
  background:#fff; color:#64748b;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:10px; line-height:1;
  box-shadow:0 1px 3px rgba(15,23,42,.10);
  transition:.15s;
}
.mc-legend-close:hover{
  background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff;
  border-color:#b91c1c; transform:scale(1.08);
}
/* ★ 2026-06-05: 지도 스택 바(연령/업종) 호버 툴팁 — 화이트톤 카드 */
.leaflet-tooltip.mapbar-tip{
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.18); padding:9px 12px; color:#0f172a;
  font-family:'Malgun Gothic',sans-serif;
}
.leaflet-tooltip.mapbar-tip:before{ border-top-color:#fff; }
/* ★ 2026-06-05: 시군구 통합 리치 툴팁 (카드매출+연령+업종+가맹점, 자동 스크롤) */
.mapbar-rich{
  padding:0; min-width:212px; max-width:240px;
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.18); overflow:hidden;
}
.mapbar-rich .rt-wrap{ font-family:'Malgun Gothic',sans-serif; }
.mapbar-rich .rt-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-weight:800; font-size:12.5px; color:#0e7490;
  padding:9px 12px 7px; border-bottom:1px solid #e2e8f0;
  background:linear-gradient(180deg,#f0f9ff,#fff);
  border-radius:10px 10px 0 0;
}
.mapbar-rich .rt-amt{ font-size:11px; font-weight:800; color:#7c3aed; white-space:nowrap; }
.mapbar-rich .rt-load{ padding:14px 12px; color:#94a3b8; font-size:11px; }
/* ★ 2026-06-05: 세로 스크롤바 노출 — 가맹점·지역별까지 모두 표시 */
.mapbar-rich .rt-body{ max-height:300px; overflow-y:auto; overflow-x:hidden; padding:6px 12px 10px; }
.mapbar-rich .rt-body::-webkit-scrollbar{ width:8px; }
.mapbar-rich .rt-body::-webkit-scrollbar-track{ background:#f1f5f9; border-radius:4px; }
.mapbar-rich .rt-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; }
.mapbar-rich .rt-body::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }
.mapbar-rich .rt-body{ scrollbar-width:thin; scrollbar-color:#cbd5e1 #f1f5f9; }
.mapbar-rich .rt-sec{ font-size:10px; font-weight:800; color:#64748b; letter-spacing:.4px; margin:7px 0 3px; }
.mapbar-rich .rt-sec:first-child{ margin-top:2px; }
.mapbar-rich .rt-row{ display:flex; align-items:center; gap:6px; margin:2px 0; white-space:nowrap; font-size:10.5px; }
.mapbar-rich .rt-lb{ flex:0 0 38px; color:#475569; overflow:hidden; text-overflow:ellipsis; }
.mapbar-rich .rt-lb-w{ flex:0 0 64px; }   /* 지역별 — 긴 시군구명 수용 */
.mapbar-rich .rt-bar{ flex:1 1 auto; height:8px; background:#f1f5f9; border-radius:4px; overflow:hidden; }
.mapbar-rich .rt-bar i{ display:block; height:100%; border-radius:4px; }
.mapbar-rich .rt-row b{ flex:0 0 auto; color:#0f172a; min-width:42px; text-align:right; font-size:10px; }
.mapbar-rich .rt-mc{ display:flex; gap:14px; font-size:11px; color:#475569; margin-top:2px; }
/* ★ 2026-06-05: 인구 구조/이동 통계 카드 본문 */
.stat-card-body{ display:flex; flex-direction:column; gap:3px; padding:7px 12px 9px; height:100%; box-sizing:border-box; overflow:auto; font-family:'Malgun Gothic',sans-serif; }
.stat-card-body .st-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; padding:3px 0; border-bottom:1px dashed rgba(148,163,184,.28); }
.stat-card-body .st-row:last-child{ border-bottom:none; }
.stat-card-body .st-lb{ color:#475569; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.stat-card-body .st-row b{ font-family:'Rajdhani',sans-serif; font-size:14.5px; font-weight:700; white-space:nowrap; }
.stat-card-body .st-sec{ font-size:10px; font-weight:800; color:#64748b; letter-spacing:.3px; margin:5px 0 1px; }
.stat-card-body .st-agebar{ display:flex; gap:10px; align-items:flex-end; height:58px; padding:2px 6px 0; }
.stat-card-body .st-ageseg{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.stat-card-body .st-ageseg b{ font-size:10px; color:#0f172a; font-family:'Rajdhani',sans-serif; margin-bottom:2px; }
.stat-card-body .st-abar{ width:62%; border-radius:3px 3px 0 0; min-height:5px; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.stat-card-body .st-alb{ font-size:9.5px; color:#64748b; margin-top:3px; }
.stat-card-body .st-hint{ display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; background:#e2e8f0; color:#64748b; font-size:8.5px; font-style:normal; font-weight:700; cursor:help; }
.sb-legend-toggle{
  /* ★ 2026-06-05: 하단 정보 바(카드흐름·격자)에 가리지 않게 위로 올림 (사용자 요청) */
  position:absolute; bottom:64px; left:8px; z-index:805;
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#0891b2,#06b6d4); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 3px 10px rgba(8,145,178,0.40);
  transition:.18s; border:none; font-size:14px;
  pointer-events:auto;
}
.sb-legend-toggle:hover{ transform:scale(1.08) }
.sb-legend-toggle.expanded{ background:linear-gradient(135deg,#dc2626,#b91c1c) }

.map-chd{gap:6px;padding:6px 10px}
.map-chd .ic{margin-right:0}
.chd-news{
  flex:1;min-width:0;display:flex;align-items:stretch;height:24px;
  background:#fff;border:1px solid var(--bd);border-radius:5px;overflow:hidden;
}

.chd-news-ctrl{
  flex-shrink:0;display:flex;align-items:stretch;
  border-left:1px solid var(--bd);background:var(--bg4);
}
.cn-btn{
  width:24px;background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--t3);
  font-family:'Rajdhani',sans-serif;
  padding:0;transition:.15s;
}
.cn-btn:hover{background:rgba(8,145,178,.10);color:var(--cyan)}
.cn-btn.on{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.cn-btn + .cn-btn{border-left:1px solid var(--bd)}
.cn-btn i{font-size:8px}

/* ★ 헤더 KPI 카드 토글 버튼 — NEWS 컨트롤 우측 — 2026-05-13 */
.chd-kpi-toggle{
  flex-shrink:0;display:inline-flex;align-items:center;gap:5px;
  margin-left:8px;padding:0 10px;height:22px;
  border:1px solid #8b5cf6;border-radius:4px;
  background:linear-gradient(135deg,#a78bfa,#8b5cf6);color:#fff;
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:-.3px;
  cursor:pointer;transition:.15s;
  box-shadow:0 2px 5px rgba(139,92,246,0.30);
}
.chd-kpi-toggle:hover{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  box-shadow:0 3px 8px rgba(139,92,246,0.45);
  transform:translateY(-1px);
}
.chd-kpi-toggle:active{ transform:translateY(0) }
.chd-kpi-toggle i{ font-size:10px }
.chd-kpi-toggle.active{
  background:linear-gradient(135deg,#06b6d4,#0891b2);
  border-color:#0891b2;
  box-shadow:0 2px 5px rgba(8,145,178,0.30);
}
[data-theme="dark"] .chd-kpi-toggle{
  border-color:#a78bfa;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff;
}
[data-theme="dark"] .chd-kpi-toggle:hover{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
}
[data-theme="dark"] .chd-kpi-toggle.active{
  background:linear-gradient(135deg,#0891b2,#0e7490);
  border-color:#06b6d4;
}

.chd-news-hot{
  flex-shrink:0;display:flex;align-items:center;gap:4px;
  padding:0 8px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.8px;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  cursor:pointer; user-select:none;
  transition:filter .15s, transform .12s;
}
.chd-news-hot:hover{ filter:brightness(1.15); transform:translateY(-1px); }
.chd-news-hot:active{ transform:translateY(0); }
.chd-news-hot i{animation:hotFire 1s ease-in-out infinite alternate;font-size:9px}
.chd-news-scroll{
  flex:1;overflow:hidden;height:100%;position:relative;
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.chd-news-row{
  display:flex;align-items:center;height:100%;
  white-space:nowrap;
  animation:tkScroll var(--news-spd,55s) linear infinite;
}
.chd-news-row:hover{animation-play-state:paused}
.chd-news-item{
  display:inline-flex;align-items:center;gap:4px;padding:0 11px;
  font-size:10px;color:var(--t1);
  border-right:1px dashed var(--bd);text-decoration:none;
  transition:.18s;
}
.chd-news-item:hover{color:var(--cyan)}
.chd-news-item .src{
  font-size:8.5px;color:var(--t3);font-weight:600;
  padding:1px 4px;background:var(--bg4);border-radius:3px;
  font-family:'Rajdhani';
}
.chd-news-item .time{font-size:8.5px;color:var(--t3);font-family:'Rajdhani';margin-left:3px}

/* ★ 2026-05-12 — 다크 테마 지도 컨트롤 패널 가독성 자동 적용
      .mc-opt-panel(차트옵션) / .mc-legend(업종분류) 가 background:#fff
      로 하드코딩되어 다크 테마에서 var(--t1)/var(--t2) 글자가 거의 안 보이는 문제 수정 */
[data-theme="dark"] .mc-opt-panel{
  background: rgba(15,22,41,0.92);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.40);
}
[data-theme="dark"] .mc-opt-hd{
  background: rgba(8,14,26,0.60);
  border-bottom-color: rgba(255,255,255,0.10);
  color: #f1f5fb;
}
[data-theme="dark"] .mc-opt-row{ color:#cbd5e1 }
[data-theme="dark"] .mc-opt-row:hover{ background: rgba(255,255,255,0.06) }
[data-theme="dark"] .mc-opt-row .ic{
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
}
[data-theme="dark"] .mc-opt-row.act .ic,
[data-theme="dark"] .mc-opt-row:has(input:checked) .ic{
  background: rgba(6,182,212,0.20);
  color: var(--cyan);
}
[data-theme="dark"] .mc-opt-row.act .lb,
[data-theme="dark"] .mc-opt-row:has(input:checked) .lb{ color:#f1f5fb }
[data-theme="dark"] .mc-opt-sect + .mc-opt-sect{ border-top-color: rgba(255,255,255,0.10) }
[data-theme="dark"] .mc-heat-opts{
  background: rgba(6,182,212,0.08) !important;
  border-color: rgba(6,182,212,0.30);
  color: #cbd5e1;
}
[data-theme="dark"] .mc-heat-row{ border-bottom-color: rgba(255,255,255,0.08) }

[data-theme="dark"] .mc-legend{
  background: rgba(15,22,41,0.92);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.40);
}
[data-theme="dark"] .mc-legend-title{ color:#cbd5e1 }
[data-theme="dark"] .mc-legend-row{ color:#cbd5e1 }
[data-theme="dark"] .mc-legend-row .lb{ color:#f1f5fb }
[data-theme="dark"] .mc-legend-row .cnt{ color:#94a3b8 }
[data-theme="dark"] .mc-legend-row.sb-leg-row:hover{ background: rgba(6,182,212,0.12) }
[data-theme="dark"] .mc-legend-close{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #cbd5e1;
}

/* ★ 2026-05-12 — 다크 테마 뉴스 티커 가독성 자동 적용
      기본 .chd-news 는 background:#fff 로 하드코딩되어 있어 다크 테마에서
      var(--t1)(#f1f5fb) 글자가 white-on-white 로 안 보이는 문제 수정 */
[data-theme="dark"] .chd-news{
  background: rgba(15,22,41,0.88);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .chd-news-item{ color:#f1f5fb }
[data-theme="dark"] .chd-news-item:hover{ color:var(--cyan) }
[data-theme="dark"] .chd-news-item .src{
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
}
[data-theme="dark"] .chd-news-item .time{ color:#94a3b8 }
[data-theme="dark"] .chd-news-item{ border-right-color: rgba(255,255,255,0.10) }
[data-theme="dark"] .chd-news-ctrl{
  background: rgba(15,22,41,0.92);
  border-left-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .cn-btn{ color:#cbd5e1 }
[data-theme="dark"] .cn-btn:hover{ background:rgba(6,182,212,0.15); color:var(--cyan) }
[data-theme="dark"] .cn-btn + .cn-btn{ border-left-color: rgba(255,255,255,0.10) }
[data-theme="dark"] .chd-news-scroll{
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}

@media(max-width:768px){
  /* ★ 2026-05-25: 모바일에서도 뉴스 티커 노출 — 지도 헤더가 줄바꿈되어 뉴스가 아래 한 줄 차지 */
  .map-chd{ flex-wrap:wrap !important; height:auto !important; row-gap:3px }
  /* 뉴스 왼쪽 헤더 아이콘 제거 — 모바일 공간 절약 */
  .map-chd > .ic{ display:none !important }
  .chd-news{
    display:flex !important; order:9;
    flex:1 1 100% !important; width:100% !important;
    min-width:0; height:26px; margin-top:2px;
  }
  .chd-news-scroll{ flex:1 1 auto; min-width:0 }
  /* 모바일 — 뉴스 속도 컨트롤은 숨겨 헤더 단순화 (뉴스는 자동 스크롤 유지) */
  .chd-news-ctrl{ display:none !important }
  .chd-kpi-toggle{ flex:0 0 auto }
}
.mc-legend-title{font-size:9.5px;font-weight:700;color:var(--t3);margin-bottom:4px;letter-spacing:.5px}
.mc-legend-row{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:10px;color:var(--t2)}
.mc-legend-row.sb-leg-row{cursor:pointer;border-radius:3px;padding:2px 4px;transition:background .12s}
.mc-legend-row.sb-leg-row:hover{background:rgba(8,145,178,.08)}
.mc-legend-row .sb-leg-cb{width:13px;height:13px;margin:0;cursor:pointer;accent-color:var(--cyan);flex-shrink:0}
.mc-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.mc-legend-row .lb{flex:1;color:var(--t1);font-weight:500}
.mc-legend-row .cnt{color:var(--t3);font-family:'Rajdhani';font-weight:700;font-size:10.5px}

@media(max-width:768px){
  .mc-filters{display:flex;flex-wrap:wrap;gap:3px;padding:4px}
  .mc-filters > #mcMajorCat,
  .mc-filters > #mcSubCat,
  .mc-filters > #mcSubSub{display:none}
  .mc-search{display:none}
  .mc-filters > #mcCatSel{ max-width:90px; font-size:10.5px; padding:3px 18px 3px 6px; height:26px }
  .mc-filters > #mcDongSel{ max-width:80px; font-size:10.5px; padding:3px 18px 3px 6px; height:26px }
  .mc-tile-btn{width:32px;font-size:9.5px;padding:4px 0}
  /* 자동투어 활성 시는 모바일에서도 확장 */
  .mc-tile-btn.auto-tour.on{
    width:auto !important; min-width:68px !important;
    padding:4px 10px !important; font-size:10px !important;
  }
  .mc-act-btn{width:26px;height:26px;font-size:10.5px}
  .mc-zoom-btn{width:24px;height:24px;font-size:14px}
  .mc-avatar{display:none}
  .mc-legend{padding:4px 8px;font-size:9.5px;max-width:160px}
  #metricPanel{ top:160px !important; right:6px !important }
  #metricPanelBody{ min-width:200px !important; max-width:230px !important;
    max-height:calc(100vh - 190px) !important; padding:6px !important; gap:4px !important }
  #metricToggleFab{ width:32px !important; height:32px !important; font-size:12px !important }
  #cellLegendBar{ top:41px !important; right:55px !important; padding:4px 4px 3px !important }
  #cellLegendMetric{ display:none !important }
  #cellLegendBar > div[id^="cellLegendBarBox"],
  #cellLegendBar #cellLegendBarBox{ height:96px !important; width:12px !important }
  #cellLegendMax,#cellLegendMin{ font-size:8.5px !important }
  #cellLegendMetric{ font-size:7.5px !important }
  #dongCellInfo{ font-size:9.5px !important; padding:4px 10px !important;
    bottom:48px !important; max-width:90vw !important }
  #cellRichTip{ max-width:240px !important; min-width:180px !important;
    font-size:10.5px !important; padding:6px 8px !important }
  .sb-legend-toggle{ width:32px !important; height:32px !important; font-size:12px !important }
  #metricPanelBody [data-mode],
  #metricPanelBody [data-k]{ font-size:10px !important; height:26px !important }
}
@media(max-width:480px){
  #metricPanel{ top:148px !important }
  #metricPanelBody{ min-width:180px !important; max-width:210px !important }
  #cellLegendBar{ top:37px !important; right:50px !important }
  #cellLegendBar #cellLegendBarBox{ height:80px !important }
  #cellRichTip{ max-width:200px !important; min-width:160px !important;
    font-size:10px !important }
  .mc-filters > #mcCatSel{ max-width:75px; font-size:9.5px }
  .mc-filters > #mcDongSel{ max-width:70px; font-size:9.5px }
  .mc-act-btn{width:24px;height:24px}
  .mc-tile-btn{ min-width:42px !important; padding:5px 7px !important; font-size:10.5px !important }
  .mc-opt-panel{ width:128px !important; max-height:42vh !important }
  .mc-options.collapsed{ transform:translateX(-128px) !important }
  .mc-opt-tab{ width:18px !important; padding:5px 0 !important; font-size:10px !important; max-height:80px !important }
  .mc-opt-tab i{ font-size:11px !important }
  .wrap{ padding:6px !important }
  .body-grid{ gap:8px !important; padding:0 !important }
  .col-left, .col-center, .col-right{ width:100% !important; padding:0 !important }
  .col-left > .card,
  .col-center > .card,
  .col-right > .card{
    width:100% !important; box-sizing:border-box !important;
    margin:0 !important; min-height:172px !important   /* ★ 2026-06-22: 핸드폰 카드 높이 소폭 축소(200→172) */
  }
  /* ★ 2026-06-22: 핸드폰 — 카드 헤더 타이틀을 항상 '가로 한 줄'로.
     타이틀(.tt)이 flex 로 컨트롤(셀렉트·날짜)에 밀려 폭이 0 이 되면서 단어가
     세로로 2~5줄 쌓여 헤더가 길어지던 문제 해결. 타이틀은 nowrap+flex:0 0 auto 로
     자기 너비만큼 한 줄 유지하고, 헤더는 flex-wrap 으로 컨트롤만 아래 줄로 흐르게 한다. */
  /* ★ 2026-06-22: 핸드폰(≤480px) — 헤더 우측 도구 아이콘(.card-tools, position:absolute)
     영역만큼 padding-right 를 되살린다. shorthand padding 으로 90px 가 8px 로 덮여
     타이틀(경남 전체 등)이 길어지면 아이콘 밑으로 파고들어 겹치던 문제 해결. */
  .card .chd{ padding:5px 8px !important; padding-right:96px !important; flex-wrap:wrap !important; row-gap:3px !important }
  .card .chd .tt{ font-size:11px !important; white-space:nowrap !important;
    word-break:keep-all !important; flex:0 0 auto !important;
    line-height:1.2 !important }
  .card .chd .tt small{ font-size:9.5px !important; white-space:nowrap !important }
  /* ★ 2026-06-22: 핸드폰(≤480px) — 날짜 select(.dashdate-btn) 이 헤더 둘째 줄로
     줄바꿈되면, 차트 위에 top:36px 로 절대배치된 피크 배지(.peak-row)가 그 위를
     덮어 날짜 버튼이 가려졌다. 폰에서는 피크 배지를 일반 흐름(static)으로 내려
     헤더(=날짜 select 포함)가 위에 온전히 보이게 하고, 헤더 영역이 자연스럽게
     아래로 늘어나게 한다. */
  .card .peak-row{ position:static !important; left:auto !important; right:auto !important;
    top:auto !important; margin:1px 6px 2px !important; pointer-events:auto !important }
  .cha{ width:100% !important; min-width:0 !important }
  .hero{ grid-template-columns:1fr !important; gap:8px !important; margin-bottom:8px !important }
  .hero-l{ padding:8px 12px !important }
  .kpi-grid{ gap:6px !important }
  .kpi-card{ padding:6px 8px !important }
  .kpi-val{ font-size:18px !important }
}

/* ★ 2026-05-25: 핸드폰 — 이동 목적/수단 카드
   데스크톱은 도넛(좌) + 추이 차트(우) 가로 분할인데, 좁은 폰에서는 우측
   추이 차트가 0 높이로 접혀 안 보임. → 모바일에서는 세로 스택 + 확정 높이.
   ★ 2026-06-22: 카드 내용이 단일 바차트(연령별 주간 인구 / 요일별 유동 인구)로
   바뀌어 512px 는 과도하게 길어 빈 공간 발생 → 다른 카드와 비슷한 높이로 축소. */
@media(max-width:768px){
  #cardPurpose, #cardModal{ min-height:300px !important }
  /* .cbd 직속 inner flex row → 세로 스택 */
  #cardPurpose .cbd > div,
  #cardModal  .cbd > div{
    flex-direction:column !important;
    height:auto !important; gap:6px !important;
  }
  /* 도넛 — 전체 너비, 확정 높이 */
  #chPurposeDonut, #chModalDonut{
    flex:0 0 auto !important;
    width:100% !important; height:200px !important;
  }
  /* 추이 차트 컬럼 (inner row 의 두번째 자식) */
  #cardPurpose .cbd > div > div:last-child,
  #cardModal  .cbd > div > div:last-child{
    flex:1 1 auto !important;
    width:100% !important; min-height:250px !important;
  }
  /* 추이 차트 본체 — 확정 높이 (ECharts 0 높이 방지) */
  #chPurposeArea, #chModalArea{
    width:100% !important; min-height:226px !important; height:226px !important;
  }
}
@media(max-width:380px){
  #metricPanel{ top:140px !important }
  #metricPanelBody{ min-width:160px !important; max-width:185px !important }
  #cellLegendBar{ top:35px !important; right:46px !important }
  #cellLegendBar #cellLegendBarBox{ height:64px !important; width:10px !important }
  #cellLegendBar input,#cellLegendBar button{ font-size:8px !important }
}

/* ═══════════════ RESPONSIVE BREAKPOINTS ═══════════════ */

@media (max-width: 1280px) {
  .wrap{
    height:auto; overflow:visible; padding:10px 14px 14px;
  }
  .top-row{
    grid-template-columns:repeat(4, 1fr); gap:8px; height:auto;
  }
  .body-grid{grid-template-columns:1fr; height:auto; gap:10px}
  .col-left, .col-center, .col-right{
    grid-column:auto; grid-template-rows:auto;
    display:flex; flex-direction:column; gap:10px;
  }
  .col-left .card, .col-right .card{min-height:280px}
  .col-center .card{min-height:320px}
  .map-link{min-height:240px}

  /* ★ 2026-05-12: 이동분석/GIS분석 등 메뉴 노출 — 기존 nth-child(n+4) hide 제거
     ( main-menu 에 flex-wrap:wrap 이 이미 있어 자동 줄바꿈 됨. dropdown 추가로 자식 순서가 바뀌어
       의도치 않게 GIS종합분석·도움말까지 가려졌었음 ) */
  .nav-scroll{display:none}
}

@media (max-width: 1024px) {
  .top-row{grid-template-columns:repeat(3, 1fr)}
  .card-hkpi, .card-donut{grid-column:span 1}
  .topbar-inner{height:auto; padding:8px 14px; flex-wrap:wrap; gap:10px}
  .main-menu{order:99; width:100%; overflow-x:auto; justify-content:flex-start; padding-bottom:2px}
  .mn-btn{padding:6px 12px; font-size:11.5px}
  .logo-portal{font-size:13px}
  .top-ticker{order:99; width:100%}
}

@media (max-width: 768px) {
  .topbar-inner{padding:6px 10px}
  .logo-brand{font-size:18px}
  .logo-divider{display:none}
  .logo-portal{font-size:12px}
  .logo-img{height:20px;max-width:180px}
  .live-tag{display:none}
  .tb-time{display:none}
  .gu-select{font-size:12px; padding:6px 26px 6px 10px}
  .period-tabs{padding:2px}
  .period-tab{padding:4px 8px; font-size:10px}
  .period-tab i{font-size:9px}
  .theme-btn{width:32px; height:32px; font-size:12px}

  .ticker-bar{height:36px; top:auto; position:relative}
  .tk-hot{height:24px; padding:0 8px; font-size:9.5px; margin-right:8px}
  .tk-item{padding:0 14px; font-size:10.5px}
  .tk-val{font-size:12px}
  .tk-ic{width:18px; height:18px; font-size:9px}

  .wrap{padding:8px; gap:8px}

  .top-row{grid-template-columns:repeat(2, 1fr); gap:6px}
  .top-row .kpi, #cardIndKpi{min-height:200px; padding:8px 10px 6px}
  .kpi-val{font-size:18px}
  .kpi-spark{height:118px; min-height:118px}
  .kpi-tag{font-size:8px}

  .card-hkpi, .card-donut{grid-column:span 2}
  .card-hkpi{padding:7px 10px}
  .card-donut{min-height:170px}
  .hkpi-val{font-size:15px}

  .col-left .card, .col-right .card{min-height:240px}
  .col-center .card{min-height:220px}

  .chd{padding:5px 10px; min-height:28px}
  .chd .ic{width:20px; height:20px; font-size:10px}
  .chd .tt, .kpi-lb{font-size:11px}
  .chd .tt small{font-size:9px}
  .chd .ic-btn{width:20px; height:20px; font-size:8.5px}

  .peak{font-size:8.5px; padding:2px 6px}
  .peak b{font-size:10px}
  .tab{padding:3px 7px; font-size:9.5px}

  .map-icon{width:56px; height:56px; font-size:24px; margin-bottom:10px}
  .map-title{font-size:13px}
  .map-sub{font-size:10px; margin-bottom:10px}
  .map-cta{font-size:11px; padding:6px 14px}

  .gtip{max-width:calc(100vw - 20px); min-width:180px}
  .gtip-hd{padding:8px 12px 6px}
  .gtip-hd .tt{font-size:12px}
  .gtip-body{padding:8px 12px}
}

@media (max-width: 480px) {
  .topbar-inner{padding:5px 8px; gap:6px}
  .logo-brand{font-size:16px}
  .logo-img{height:18px;max-width:150px}
  .mn-btn{padding:5px 9px; font-size:10.5px}
  .mn-btn i{display:none}
  .gu-select{padding:5px 24px 5px 8px; font-size:11.5px}

  .wrap{padding:6px; gap:6px}

  .top-row{grid-template-columns:1fr; gap:6px}
  .card-hkpi, .card-donut{grid-column:auto}

  .top-row .kpi, #cardIndKpi{min-height:210px}
  .kpi-val{font-size:17px}
  .kpi-spark{height:132px; min-height:132px}

  .card-donut{min-height:160px}
  #heroDonut{height:140px; min-height:140px}

  .col-left .card, .col-right .card, .col-center .card{min-height:220px}

  .period-tab i{display:none}
  .period-tab{padding:4px 7px}

  .tk-item{padding:0 10px}
}

@media (max-height: 500px) and (orientation: landscape) {
  .wrap{padding:6px}
  .topbar{position:static}
  .ticker-bar{position:static}
  .top-row .kpi, #cardIndKpi{min-height:150px}
  .col-left .card, .col-right .card, .col-center .card{min-height:200px}
}

@media (min-width: 1920px) {
  .wrap{max-width:1820px}
  .kpi-val{font-size:26px}
  .hkpi-val{font-size:19px}
  .chd .tt, .kpi-lb{font-size:13px}
}

/* ★ 2026-06-02: 화면을 좁힐 때(특히 1280px 이하 레이아웃 reflow) KPI 카드 헤더가
   여러 줄로 줄바꿈되며 세로 높이가 늘어나던 문제 방지 — 데스크탑(≥769px)에서 KPI
   카드 높이를 고정. 헤더가 줄바꿈돼도 스파크 차트가 줄어들어 채우고(ResizeObserver
   로 재계산), 카드 높이는 일정하게 유지된다. (모바일 <769px 는 기존 스택 레이아웃 유지) */
@media (min-width: 769px){
  .top-row, .kpi-sub-row{ grid-auto-rows:190px !important; }
  .top-row .kpi, .kpi-sub-row .kpi{ height:190px !important; min-height:0 !important; max-height:190px !important; overflow:hidden !important; }
  .top-row .kpi-spark, .kpi-sub-row .kpi-spark{ min-height:0 !important; }
}

/* ─── HERO ─── */
.hero{display:grid;grid-template-columns:1fr 2.6fr;gap:14px;margin-bottom:14px}
.hero-l{
  background:var(--hero-bg);
  border:1px solid var(--hero-bd);border-radius:14px;padding:10px 14px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:1.25fr 1fr;gap:10px;min-height:180px;
}
.hero-l::after{
  content:'';position:absolute;right:-30px;bottom:-30px;width:200px;height:200px;
  border-radius:50%;background:radial-gradient(circle,rgba(8,145,178,.18),transparent 70%);
  pointer-events:none;
}
[data-theme="dark"] .hero-l::after{background:radial-gradient(circle,rgba(6,182,212,.18),transparent 70%)}
.hero-l-info{display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.hero-l-chart{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
#heroDonut{width:100%;height:140px;min-height:130px}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--cyan);font-weight:600;letter-spacing:1.5px;
  padding:3px 10px;border:1px solid var(--hero-bd);border-radius:20px;background:rgba(8,145,178,.08);
  width:fit-content;
}
[data-theme="dark"] .hero-eyebrow{background:rgba(6,182,212,.08)}
.hero-title{
  font-size:26px;font-weight:700;margin-top:8px;letter-spacing:-.4px;line-height:1.15;
  background:linear-gradient(135deg,var(--cyan),var(--purple) 60%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title-sub{font-size:12px;color:var(--t3);font-weight:500;margin-top:2px}
.hero-sub{font-size:11.5px;color:var(--t2);margin-top:5px;line-height:1.5}
.hero-sub b{color:var(--t1);font-weight:600}

.hkpi-box{
  background:var(--bg2);
  border:1px solid var(--bd);border-radius:10px;padding:8px 12px;
  display:flex;flex-direction:column;gap:5px;height:100%;justify-content:center;
  transition:.25s;
}
.hkpi-box:hover{border-color:var(--cyan);box-shadow:var(--shadow-sm)}
.hkpi-row{display:flex;align-items:center;gap:8px}
.hkpi-row .ic{
  width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;
}
.hkpi-row.k-act .ic{background:rgba(8,145,178,.14);color:var(--cyan)}
.hkpi-row.k-flu .ic{background:rgba(124,58,237,.14);color:var(--purple)}
.hkpi-row.k-frg .ic{background:rgba(234,88,12,.14);color:var(--orange)}
.hkpi-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hkpi-top{display:flex;align-items:baseline;gap:5px}
.hkpi-lb{font-size:10px;color:var(--t3);font-weight:500;letter-spacing:.3px}
.hkpi-tag{
  font-size:8px;font-weight:700;letter-spacing:.5px;padding:1px 5px;border-radius:3px;
  font-family:'Rajdhani';margin-left:auto;
}
.hkpi-row.k-act .hkpi-tag{background:rgba(8,145,178,.10);color:var(--cyan)}
.hkpi-row.k-flu .hkpi-tag{background:rgba(124,58,237,.10);color:var(--purple)}
.hkpi-row.k-frg .hkpi-tag{background:rgba(234,88,12,.10);color:var(--orange)}
.hkpi-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden}
.hkpi-bar-fill{height:100%;border-radius:2px;transition:width .5s ease}
.hkpi-row.k-act .hkpi-bar-fill{background:linear-gradient(90deg,var(--cyan),var(--blue))}
.hkpi-row.k-flu .hkpi-bar-fill{background:linear-gradient(90deg,var(--purple),var(--pink))}
.hkpi-row.k-frg .hkpi-bar-fill{background:linear-gradient(90deg,var(--orange),var(--pink))}
.hkpi-rt{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;min-width:60px}
.hkpi-val{font-family:'Rajdhani';font-size:17px;font-weight:700;color:var(--t1);line-height:1}
.hkpi-val small{font-size:10px;color:var(--t3);font-weight:500;margin-left:2px}
.hkpi-desc{font-size:8.5px;color:var(--t3);text-align:right;line-height:1.2;margin-top:1px;white-space:nowrap}
.hkpi-divider{height:1px;background:var(--bd);margin:0 -2px}

@media(max-width:1280px){
  .hero-l{grid-template-columns:1.4fr 1fr}
}
@media(max-width:760px){
  .hero-l{grid-template-columns:1fr;min-height:auto}
  .hero-l-chart{order:-1;min-height:170px}
}

.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kpi{
  background:var(--kpi-bg);
  border:1px solid var(--bd);border-radius:12px;padding:12px 14px 6px;
  position:relative;overflow:hidden;transition:.3s;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;min-height:180px;
}
.kpi:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--shadow-md)}
.kpi.k-h{border-left:3px solid var(--cyan)}
.kpi.k-w{border-left:3px solid var(--blue)}
.kpi.k-v{border-left:3px solid var(--purple)}
.kpi.k-fl{border-left:3px solid var(--orange)}
.kpi.k-fs{border-left:3px solid var(--pink)}
.kpi-lb{font-size:12px;color:var(--t1);font-weight:600;letter-spacing:.4px;margin-bottom:6px}/* ★ 2026-06-02: '24시간대 이동' 카드 헤더(.chd .tt)와 동일 — 12px/600/--t1 */
/* ★ 2026-06-02: KPI 카드 타이틀만 진하게 — 헤더 안의 select·아이콘 묶음은 일반 굵기 유지 */
.kpi-lb .kpi-hd-sels, .kpi-lb .kpi-hd-icons{ font-weight:400; }
.kpi-lb i{margin-right:4px}
.kpi.k-h .kpi-lb i{color:var(--cyan)}
.kpi.k-w .kpi-lb i{color:var(--blue)}
.kpi.k-v .kpi-lb i{color:var(--purple)}
.kpi.k-fl .kpi-lb i{color:var(--orange)}
.kpi.k-fs .kpi-lb i{color:var(--pink)}
.kpi-val{font-family:'Rajdhani';font-size:24px;font-weight:700;color:var(--t1);line-height:1}
.kpi-unit{font-size:11px;color:var(--t3);margin-left:3px;font-weight:500}
.kpi-tag{
  margin-left:auto;font-size:8.5px;font-weight:700;letter-spacing:.5px;
  padding:1.5px 6px;border-radius:4px;background:var(--bg4);color:var(--t3);
  font-family:'Rajdhani',sans-serif;
}
.kpi.k-h .kpi-tag{background:rgba(8,145,178,.10);color:var(--cyan)}
.kpi.k-w .kpi-tag{background:rgba(42,107,170,.10);color:var(--blue)}
.kpi.k-v .kpi-tag{background:rgba(124,58,237,.10);color:var(--purple)}
.kpi.k-fl .kpi-tag{background:rgba(234,88,12,.10);color:var(--orange)}
.kpi.k-fs .kpi-tag{background:rgba(219,39,119,.10);color:var(--pink)}
.kpi-lb{display:flex;align-items:center}
/* ★ 2026-05-23: KPI 카드 헤더 — 타이틀을 첫줄에 가로로, 컨트롤(셀렉트·아이콘)은 둘째 줄로
   대상: ① 카드매출액 ② 카드건수 ③ 카드연령별 ④ 업종별매출 ⑤ 가맹점 ⑦ 시간대별매출 */
#cardAmtKpi  .kpi-lb, #cardCntKpi   .kpi-lb, #cardAgeKpi  .kpi-lb,
#cardIndKpi  .kpi-lb, #cardMerchKpi .kpi-lb, #cardHourKpi .kpi-lb{
  flex-wrap:wrap; row-gap:3px;
}
#cardAmtKpi  .kpi-lb, #cardCntKpi   .kpi-lb, #cardAgeKpi  .kpi-lb,
#cardIndKpi  .kpi-lb, #cardMerchKpi .kpi-lb, #cardHourKpi .kpi-lb{ white-space:nowrap; }
/* ★ 2026-06-05: csv·리포트·확대 아이콘 묶음 — 헤더 오른쪽 끝 정렬 */
#cardAmtKpi .kpi-hd-icons, #cardCntKpi .kpi-hd-icons, #cardAgeKpi .kpi-hd-icons,
#cardIndKpi .kpi-hd-icons, #cardMerchKpi .kpi-hd-icons, #cardHourKpi .kpi-hd-icons{
  margin-left:auto; display:flex; gap:6px; align-items:center;
}
/* ★ 2026-06-05: select 묶음 — 헤더 줄 중앙 정렬(양쪽 auto), 아이콘은 오른쪽 끝 */
#cardAmtKpi .kpi-hd-sels, #cardCntKpi .kpi-hd-sels, #cardAgeKpi .kpi-hd-sels,
#cardIndKpi .kpi-hd-sels, #cardMerchKpi .kpi-hd-sels, #cardHourKpi .kpi-hd-sels{
  margin-left:auto; margin-right:auto; display:flex; gap:4px; align-items:center; white-space:nowrap;
}
/* 시간대별 매출 — 날짜는 달력형 picker(.daycal-trigger) 하나로 표시.
   연월·일자 select 는 숨기고 달력 버튼만 노출. */
#cardHourKpi .kpi-hd-sels{ gap:4px; }
#cardHourKpi #kcYmSel7, #cardHourKpi #kcDaySel7{ display:none !important; }
.kpi-spark{flex:1;width:100%;min-height:80px;height:96px;margin-top:6px}

.grid{display:grid;gap:14px;margin-bottom:14px}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:1.5fr 1fr}
.g-2b{grid-template-columns:1fr 1fr}

.card{
  background:var(--card-bg);
  border:1px solid var(--bd);border-radius:13px;display:flex;flex-direction:column;
  overflow:hidden;min-height:340px;box-shadow:var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s;
}
.card[data-link-source]{ border-width:2px !important; }
.card[data-link]{ border-width:2px !important; }

.card[data-link-source="time"]{ border-color:#1d4ed8 !important;
  box-shadow:0 0 0 3px rgba(29,78,216,0.22), var(--shadow-sm); }
.card[data-link~="time"]{ border-color:#3b82f6 !important;
  box-shadow:0 0 0 2px rgba(59,130,246,0.15), var(--shadow-sm); }
.card[data-link-source="time"] .chd, .card[data-link~="time"] .chd{
  background:linear-gradient(180deg, rgba(29,78,216,0.10), var(--chd-bg)); }

.card[data-link-source="sex"]{ border-color:#7c3aed !important;
  box-shadow:0 0 0 3px rgba(124,58,237,0.22), var(--shadow-sm); }
.card[data-link~="sex"]{ border-color:#a78bfa !important;
  box-shadow:0 0 0 2px rgba(167,139,250,0.16), var(--shadow-sm); }
.card[data-link-source="sex"] .chd, .card[data-link~="sex"] .chd{
  background:linear-gradient(180deg, rgba(124,58,237,0.10), var(--chd-bg)); }

.card[data-link-source="io"]{ border-color:#059669 !important;
  box-shadow:0 0 0 3px rgba(5,150,105,0.22), var(--shadow-sm); }
.card[data-link~="io"]{ border-color:#10b981 !important;
  box-shadow:0 0 0 2px rgba(16,185,129,0.16), var(--shadow-sm); }
.card[data-link-source="io"] .chd, .card[data-link~="io"] .chd{
  background:linear-gradient(180deg, rgba(5,150,105,0.10), var(--chd-bg)); }

.card[data-link-source="frg"]{ border-color:#ea580c !important;
  box-shadow:0 0 0 3px rgba(234,88,12,0.22), var(--shadow-sm); }
.card[data-link~="frg"]{ border-color:#fb923c !important;
  box-shadow:0 0 0 2px rgba(251,146,60,0.16), var(--shadow-sm); }
.card[data-link-source="frg"] .chd, .card[data-link~="frg"] .chd{
  background:linear-gradient(180deg, rgba(234,88,12,0.10), var(--chd-bg)); }

.card[data-link-source]::before, .card[data-link]::before{
  content:''; position:absolute; top:6px; right:6px; z-index:50;
  width:8px; height:8px; border-radius:50%;
  background:var(--ind-color, #3b82f6);
  box-shadow:0 0 0 2px rgba(255,255,255,0.85);
  pointer-events:none;
}
.card[data-link-source="time"], .card[data-link~="time"]{ --ind-color:#1d4ed8; }
.card[data-link-source="sex"],  .card[data-link~="sex"]{  --ind-color:#7c3aed; }
.card[data-link-source="io"],   .card[data-link~="io"]{   --ind-color:#059669; }
.card[data-link-source="frg"],  .card[data-link~="frg"]{  --ind-color:#ea580c; }
.card{ position:relative; }

.card.linked-card:not([data-link]):not([data-link-source]){
  border:2px solid #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18), var(--shadow-sm);
}
.card.linked-source:not([data-link]):not([data-link-source]){
  border:2px solid #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.22), var(--shadow-sm);
}
.chd{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-bottom:1px solid var(--bd);background:var(--chd-bg);
  min-height:32px;
}
.chd .ic{
  width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,145,178,.12);color:var(--cyan);font-size:11px;
}
[data-theme="dark"] .chd .ic{background:rgba(6,182,212,.12)}
.chd.purple .ic{background:rgba(124,58,237,.13);color:var(--purple)}
.chd.green  .ic{background:rgba(5,150,105,.13);color:var(--green)}
.chd.orange .ic{background:rgba(234,88,12,.13);color:var(--orange)}
.chd.pink   .ic{background:rgba(219,39,119,.13);color:var(--pink)}
.chd.blue   .ic{background:rgba(42,107,170,.13);color:var(--blue)}
[data-theme="dark"] .chd.purple .ic{background:rgba(139,92,246,.14)}
[data-theme="dark"] .chd.green  .ic{background:rgba(16,185,129,.14)}
[data-theme="dark"] .chd.orange .ic{background:rgba(249,115,22,.14)}
[data-theme="dark"] .chd.pink   .ic{background:rgba(236,72,153,.14)}
[data-theme="dark"] .chd.blue   .ic{background:rgba(59,130,246,.14)}
.chd .tt{font-size:12px;font-weight:600;color:var(--t1)}
.chd .tt small{font-size:9.5px;color:var(--t3);font-weight:400;margin-left:5px}
.chd .acts{margin-left:auto;display:flex;gap:5px;align-items:center}
.chd .ic-btn{
  width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd);background:var(--bg2);color:var(--t3);
  font-size:9px;cursor:pointer;transition:.18s;text-decoration:none;
}
.chd .ic-btn:hover{background:var(--bg4);border-color:var(--cyan);color:var(--cyan)}

.cbd{flex:1;padding:4px 4px 4px;display:flex;flex-direction:column;min-height:0}
.cha{flex:1;width:100%;min-height:0}
/* ★ 2026-05-22: KPI 카드 빈 데이터 안내 오버레이 (행정동에 카드 거래 없을 때) */
.kc-empty{ position:absolute; inset:0; display:none; align-items:center;
  justify-content:center; text-align:center; z-index:6; pointer-events:none;
  background:rgba(248,250,252,0.90); border-radius:6px }
.kc-empty b{ font-size:11px; color:#94a3b8; font-weight:700 }
.kc-empty span{ font-size:9px; color:#cbd5e1 }
[data-theme="dark"] .kc-empty{ background:rgba(15,23,42,0.86) }

.tabs{display:inline-flex;gap:2px;padding:2px;background:var(--tabs-bg);border:1px solid var(--bd);border-radius:6px}
.tab{
  padding:3px 8px;font-size:10px;color:var(--t3);cursor:pointer;border-radius:4px;
  font-weight:500;letter-spacing:.3px;transition:.18s;user-select:none;
}
.tab:hover{color:var(--t1)}
.tab.on{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(8,145,178,.25)}

/* ★ 2026-05-20(v50): cardSex 의 5-mode select (거주/근무/방문/목적/수단) */
.sel-sex-mode{
  /* ★ 2026-05-23: 다른 헤더 select 와 폰트 통일 (Rajdhani 10px) + 도구 아이콘과 간격 확보 */
  font-family:'Rajdhani',sans-serif;
  font-size:10px; font-weight:500;
  margin-right:48px;
  color:#1e293b; background:#fff;
  border:1px solid #cbd5e1; border-radius:6px;
  padding:4px 24px 4px 9px;
  cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  transition:.12s;
}
.sel-sex-mode:hover{ border-color:#7dd3fc; background-color:#f0f9ff }
.sel-sex-mode:focus{ border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.15) }

/* ★ 2026-05-20(v39): 이동 목적/수단 카드 — 헤더의 일자/시간 picker 버튼 */
.pm-pick{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0;
  background:#fff; border:1px solid #cbd5e1; border-radius:5px;
  color:#475569; cursor:pointer; transition:.12s;
  font-size:11px;
}
.pm-pick:hover{ background:#e0f2fe; border-color:#7dd3fc; color:#0369a1 }
.pm-pick.on{ background:linear-gradient(135deg,#0891b2,#2563eb); border-color:#1d4ed8; color:#fff }
/* ★ 2026-05-20(v48): 연월 버튼 — 텍스트(YYYY.MM) 표시라 너비 자동 */
.pm-pick.pm-ym{ width:auto; padding:0 7px; font-weight:700; gap:3px }
.pm-pick.pm-ym .pm-ym-txt{ font-size:10.5px; font-family:'Rajdhani',monospace }

/* 일자/시간 드롭다운 팝업 */
#pmPickerPop{
  position:fixed; z-index:9999;
  background:#fff; border:1px solid #cbd5e1; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:8px; min-width:240px; max-width:360px;
  font-family:'Pretendard',sans-serif; font-size:12px;
}
#pmPickerPop .pmp-hd{
  font-weight:700; color:#0f172a; padding:2px 4px 8px;
  border-bottom:1px solid #e2e8f0; margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between;
}
#pmPickerPop .pmp-grid{
  display:grid; gap:4px; max-height:280px; overflow-y:auto;
}
#pmPickerPop .pmp-grid.col-3{ grid-template-columns:repeat(3,1fr) }
#pmPickerPop .pmp-grid.col-4{ grid-template-columns:repeat(4,1fr) }
#pmPickerPop .pmp-grid.col-6{ grid-template-columns:repeat(6,1fr) }
#pmPickerPop .pmp-btn{
  padding:6px 8px; border:1px solid #e2e8f0; border-radius:4px;
  background:#f8fafc; color:#334155; cursor:pointer;
  font-size:11.5px; text-align:center; transition:.1s;
}
#pmPickerPop .pmp-btn:hover{ background:#dbeafe; border-color:#3b82f6; color:#1e40af }
#pmPickerPop .pmp-btn.on{
  background:linear-gradient(135deg,#0891b2,#2563eb);
  border-color:#1d4ed8; color:#fff; font-weight:700;
}
#pmPickerPop .pmp-clear{
  margin-top:8px; padding:6px 8px; width:100%;
  background:#fef3c7; border:1px solid #fbbf24; border-radius:4px;
  color:#92400e; cursor:pointer; font-weight:600; font-size:11.5px;
}
#pmPickerPop .pmp-clear:hover{ background:#fde68a }
#pmPickerPop .pmp-close{
  background:none; border:0; font-size:14px; color:#94a3b8; cursor:pointer; padding:0 4px;
}
#pmPickerPop .pmp-close:hover{ color:#dc2626 }

/* ★ 2026-05-20(v38): 이동 목적/수단 카드 — 차트 위 차트유형 토글 (테두리 강조형) */
.tabs.tabs-above{
  display:inline-flex; gap:3px; padding:2px 3px;
  background:#fff; border:1px solid #cbd5e1; border-radius:5px;
}
.tabs.tabs-above .tab{
  padding:2px 8px; font-size:11px;
  border:1px solid #e2e8f0;
  border-radius:4px;
  background:#f8fafc;
  color:#475569;
  line-height:1.4;
}
.tabs.tabs-above .tab:hover{
  background:#e0f2fe; border-color:#7dd3fc; color:#0369a1;
}
.tabs.tabs-above .tab.on{
  background:linear-gradient(135deg,#0891b2,#2563eb);
  border-color:#1d4ed8;
  color:#fff; box-shadow:0 1px 3px rgba(8,145,178,.3);
}

/* peak 칩들 — 차트 위(상단) 오버레이로 배치 */
#cardTime{position:relative}
.peak-row{
  position:absolute; left:6px; right:6px; top:36px;
  display:flex; gap:4px; padding:0; flex-wrap:wrap;
  z-index:5; pointer-events:none;
}
.peak{
  display:flex;align-items:center;gap:4px;padding:1px 6px;border-radius:5px;font-size:9px;
  background:rgba(255,255,255,0.78);border:1px solid var(--bd);color:var(--t2);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
[data-theme="dark"] .peak{background:rgba(15,23,42,0.72)}
.peak b{font-family:'Rajdhani';color:var(--t1);font-weight:700;font-size:10.5px}
.peak.h{border-color:rgba(8,145,178,.35);background:rgba(8,145,178,.07)}
.peak.h i{color:var(--cyan)}
/* 2026-05-18 : 근무 라인 색상을 차트(c.orange)와 통일 */
.peak.w{border-color:rgba(234,88,12,.35);background:rgba(234,88,12,.07)}
.peak.w i{color:var(--orange)}
.peak.v{border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.07)}
.peak.v i{color:var(--purple)}

.foot{
  text-align:center;font-size:11px;color:var(--t3);
  padding:14px 0 8px;border-top:1px solid var(--bd);margin-top:6px;
}
.foot b{color:var(--cyan)}

.ld{display:flex;align-items:center;justify-content:center;height:100%;color:var(--t3);font-size:12px}
.ld i{margin-right:6px;color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.gtip{
  position:fixed;
  background:var(--bg2);
  border:2px solid var(--cyan);
  outline:1px solid rgba(8,145,178,.25);
  border-radius:10px;padding:0;
  max-width:300px;min-width:200px;
  z-index:99999;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .15s, transform .15s, visibility .15s;
  box-shadow:0 12px 36px rgba(15,23,42,.22), 0 0 22px rgba(8,145,178,.30);
  font-family:'Noto Sans KR',sans-serif;
}
.biz-pin{
  font-size:10px !important;
  letter-spacing:-0.5px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
@keyframes mkPulse {
  0%   { stroke-width:2; stroke:#3b82f6;
         filter:drop-shadow(0 0 4px rgba(59,130,246,.6)); }
  50%  { stroke-width:8; stroke:#1d4ed8;
         filter:drop-shadow(0 0 16px rgba(59,130,246,1))
                drop-shadow(0 0 30px rgba(59,130,246,.7))
                drop-shadow(0 0 50px rgba(59,130,246,.35)); }
  100% { stroke-width:2; stroke:#3b82f6;
         filter:drop-shadow(0 0 4px rgba(59,130,246,.6)); }
}
.sb-mk-hover {
  animation: mkPulse 0.55s ease-in-out infinite;
  fill:#3b82f6 !important;
  fill-opacity:1 !important;
  cursor:pointer;
}
.gtip.on{opacity:1;visibility:visible;transform:translateY(0)}
.gtip-hd{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px 8px;border-bottom:1px solid var(--bd);
}
.gtip-hd .ic{
  width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,145,178,.12);color:var(--cyan);font-size:13px;flex-shrink:0;
}
.gtip-hd .tt{font-size:13px;font-weight:600;color:var(--t1);line-height:1.25}
.gtip-hd .tt small{display:block;font-size:10.5px;color:var(--t3);margin-top:2px;font-weight:400}
.gtip-body{padding:10px 14px}
.gtip-formula{
  display:inline-block;font-family:'Consolas',monospace;font-size:11px;
  background:var(--bg4);color:var(--cyan);padding:3px 8px;border-radius:5px;margin-bottom:8px;font-weight:600;
}
.gtip-desc{font-size:11.5px;color:var(--t2);line-height:1.5}
.gtip-grades{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.gtip-grade{display:flex;justify-content:space-between;font-size:10.5px;padding:2px 0}
.gtip-grade .l{color:var(--t3);font-family:'Rajdhani';font-weight:600}
.gtip-grade .r{color:var(--t2)}
.gtip-foot{padding:7px 14px;border-top:1px solid var(--bd);background:var(--bg3);
  border-radius:0 0 10px 10px;font-size:10px;color:var(--t3);display:flex;align-items:center;gap:5px}
.gtip-foot i{color:var(--cyan)}

.empty-alert{
  padding:12px 16px;background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.35);
  border-radius:10px;color:var(--yellow);font-size:12.5px;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.empty-alert i{font-size:15px}
.empty-alert a{color:var(--cyan);text-decoration:underline}

.htip{ width:340px; padding:12px 14px; }
.htip-hd{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px dashed var(--bd);
}
.htip-hd .ic{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:13px;
}
.htip-hd .tt{flex:1;font-size:13px;font-weight:700;color:var(--t1);line-height:1.2}
.htip-hd .tt small{display:block;font-size:10px;color:var(--t3);margin-top:1px;font-weight:400}
.htip-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.htip-kpi{
  background:var(--bg4);border-radius:6px;padding:6px 7px;text-align:center;
  border:1px solid var(--bd);
}
.htip-kpi .lb{font-size:9.5px;color:var(--t3);font-weight:600;margin-bottom:2px}
.htip-kpi .v{font-size:13px;font-weight:700;font-family:'Rajdhani';line-height:1.1}
.htip-kpi.h .v{color:#0891b2}
.htip-kpi.w .v{color:#3b82f6}
.htip-kpi.v .v{color:#7c3aed}
.htip-kpi.f .v{color:#ea580c}
.htip-bars{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.htip-bar-row{display:flex;align-items:center;gap:6px;font-size:10.5px}
.htip-bar-row .lb{width:42px;color:var(--t2);font-weight:600}
.htip-bar-row .bar{flex:1;height:7px;background:var(--bg4);border-radius:4px;overflow:hidden;position:relative}
.htip-bar-row .bar .fill{height:100%;border-radius:4px;transition:width .25s}
.htip-bar-row .pct{width:38px;text-align:right;font-family:'Rajdhani';font-weight:700;color:var(--t1);font-size:10.5px}
.htip-stats{
  display:flex;justify-content:space-between;gap:6px;
  background:linear-gradient(135deg,rgba(8,145,178,.06),rgba(124,58,237,.06));
  border-radius:6px;padding:6px 8px;margin-bottom:8px;border:1px solid var(--bd);
}
.htip-stats .item{flex:1;text-align:center}
.htip-stats .item .lb{font-size:9px;color:var(--t3);font-weight:600;margin-bottom:1px}
.htip-stats .item .v{font-size:12px;font-weight:700;font-family:'Rajdhani'}
.htip-stats .item .v.cyan{color:#0891b2}
.htip-stats .item .v.purple{color:#7c3aed}
.htip-stats .item .v.orange{color:#ea580c}
.htip-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:9.5px;color:var(--t3);font-family:'Rajdhani';
  border-top:1px dashed var(--bd);padding-top:6px;
}
.htip-foot .badge{
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  padding:1px 6px;border-radius:3px;font-weight:700;font-size:9px;letter-spacing:.5px;
}

.news-modal{
  position:fixed;inset:0;z-index:9998;
  background:rgba(15,23,42,.45);
  display:none;align-items:flex-start;justify-content:center;
  padding:60px 20px 20px;
  backdrop-filter:blur(2px);
}
.news-modal.on{display:flex}
.news-modal-box{
  background:#ffffff;
  color:#0f172a;
  width:100%; max-width:780px; max-height:85vh;
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  border:1px solid #e2e8f0;
  font-family:'Pretendard','Noto Sans KR',sans-serif;
}
.news-modal-hd{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid #e2e8f0;
  background:linear-gradient(135deg,#fef2f2,#fff5f5);
}
.news-modal-hd .ic{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.news-modal-hd .tt{font-size:15px;font-weight:700;color:#0f172a;flex:1}
.news-modal-hd .tt small{display:block;font-size:11px;font-weight:400;color:#64748b;margin-top:2px}
.news-modal-hd .x{
  width:30px;height:30px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;
  transition:.15s;
}
.news-modal-hd .x:hover{background:#f1f5f9;color:#0f172a;border-color:#cbd5e1}
.news-modal-bd{
  flex:1; overflow:auto; padding:8px 0;
  background:#fff;
}
.news-modal-item{
  display:block; padding:12px 18px; border-bottom:1px solid #f1f5f9;
  text-decoration:none; color:#0f172a;
  transition:background .12s;
}
.news-modal-item:hover{background:#f8fafc}
.news-modal-item .src{
  display:inline-block; font-size:10.5px; font-weight:700;
  padding:2px 7px; border-radius:4px; margin-right:8px;
  background:#fee2e2; color:#dc2626;
}
.news-modal-item .title{font-size:13px;font-weight:600;color:#0f172a;line-height:1.5}
.news-modal-item .meta{font-size:10.5px;color:#94a3b8;margin-top:4px}
.news-modal-item .meta i{margin-right:3px;color:#cbd5e1}
.news-modal-foot{
  padding:10px 18px;border-top:1px solid #e2e8f0;
  font-size:11px;color:#64748b;background:#f8fafc;
  display:flex;justify-content:space-between;align-items:center;
}
.news-modal-foot .src-info{font-family:'Rajdhani',sans-serif;font-weight:600;color:#475569}
.news-modal-empty{
  padding:60px 20px;text-align:center;color:#94a3b8;font-size:13px;
}

@media(max-width:1280px){
  .hero{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(5,1fr)}
  .g-3{grid-template-columns:1fr 1fr}
  .sb-list-bd{ width:240px }
  .sb-list-panel.collapsed{ transform:translateX(240px) }
}

@media(max-width:1024px){
  .body-grid{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto auto !important;
  }
  .col-left   { grid-column:1 / 2; grid-row:auto; display:grid; grid-template-rows:repeat(3,180px); gap:8px }
  .col-center { grid-column:2 / 3; grid-row:1 / 4; min-height:540px }
  .col-right  { grid-column:1 / 3; grid-row:auto; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:200px; gap:8px }
  .kpi-grid{grid-template-columns:repeat(5,1fr)}
  .mc-filters{ flex-wrap:wrap; max-width:calc(100% - 90px) }
  .sb-list-panel{ top:135px }   /* mc-actions(26px×4 + gap+8) 아래로 — 약 116~120px 차지 */
  .sb-list-bd{ width:220px; height:100%; max-height:none }
  .sb-list-panel.collapsed{ transform:translateX(220px) }
  .htip{ width:300px }
  .tk-tip{ width:280px }
}

@media(max-width:768px){
  /* ★ 2026-06-22: 핸드폰 — 문서(html)를 스크롤 루트로 전환.
     base 의 body{overflow-x:hidden} + html,body{height:100%} 조합 때문에 body 의
     overflow-y 가 auto 로 계산되어 body 가 '자체 스크롤 컨테이너'가 되고, 그 안의
     position:fixed(햄버거)가 함께 스크롤되어 위로 사라지던 문제를 차단한다.
     html 에만 가로숨김을 주고 body 는 내용 높이로 흐르게 하여 fixed 가 뷰포트에 고정되게 함. */
  html{ overflow-x:hidden !important; height:auto !important; }
  body{ overflow:visible !important; height:auto !important; min-height:100vh !important; }

  .topbar-inner{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  .wrap{padding:10px; height:auto !important; min-height:0 !important; overflow:visible !important}
  /* ★ 모바일 — 상단 햄버거 노출 + main-menu / tb-right 기본 숨김 */
  .topbar-inner{ flex-wrap:nowrap !important }
  .topbar-hamburger{ display:flex !important; margin-left:auto !important; order:99 }
  .main-menu, .tb-right{ display:none !important }
  /* ★ 2026-06-22: 핸드폰 — 로고 옆에 뷰별 타이틀 한 줄 노출(소비분석/유동,소비분석).
     지역명+타이틀이 한 줄에 들어오도록 폰트 축소. */
  #logoText{ font-size:17px !important }
  .logo-suffix{ display:inline; margin-left:7px; font-size:17px; font-weight:900;
    letter-spacing:-0.5px; color:#0891b2; white-space:nowrap }

  /* ★ 2026-06-22: 핸드폰 — 상단바(경상남도 타이틀 + 햄버거)를 '한 줄 고정 바'로.
     position:fixed + translateZ GPU 레이어 승격으로 삼성 인터넷/안드로이드/iOS 모두
     스크롤 중에도 화면 최상단에 고정. 본문은 padding-top 으로 내려 가림 방지. */
  .topbar{
    position:fixed !important; top:0; left:0; right:0; z-index:100040 !important;
    -webkit-transform:translateZ(0); transform:translateZ(0); will-change:transform;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .topbar-inner{ min-height:48px !important; padding:7px 12px !important; }
  body{ padding-top:54px !important; }            /* 고정 상단바 높이만큼 본문 아래로 */
  .ticker-bar{ position:static !important; }      /* 티커는 함께 스크롤(상단바만 고정) */
  /* 햄버거는 고정된 상단바 '안'에 그대로 — 별도 fixed 불필요 */
  .topbar-hamburger{ position:static !important; margin-left:auto !important; box-shadow:none !important; }

  /* ★ 2026-06-22: 핸드폰 — 우측 세로중앙 플로팅 '홈(맨 위로)' 버튼.
     dash-mobile-home.js 가 #mobileHomeBtn 생성, 스크롤 시 .show 토글. */
  #mobileHomeBtn{
    position:fixed; right:12px; top:50%; transform:translateY(-50%) scale(.6);
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--cyan); color:#fff; border:2px solid #fff;
    box-shadow:0 4px 14px rgba(8,145,178,.45);
    font-size:17px; cursor:pointer; z-index:100045;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s, transform .22s, visibility .22s;
  }
  #mobileHomeBtn.show{
    opacity:.94; visibility:visible; pointer-events:auto;
    transform:translateY(-50%) scale(1);
  }
  #mobileHomeBtn:active{ transform:translateY(-50%) scale(.9) }
  #mobileHomeBtn .mh-lb{ font-size:8px; font-weight:700; margin-top:1px; letter-spacing:.5px }
  #mobileHomeBtn i{ font-size:15px }

  /* 햄버거 열림 — 전체 topbar-inner 를 flex-column 으로 펼치기 */
  body.top-menu-open .topbar-inner{
    flex-direction:column !important; align-items:stretch !important; gap:6px !important;
  }
  body.top-menu-open .main-menu,
  body.top-menu-open .tb-right{
    display:flex !important;
    flex-direction:column !important; gap:6px !important;
    width:100% !important; max-width:none !important;
    padding:8px; border-top:1px solid var(--bd); margin-top:6px;
  }
  body.top-menu-open .main-menu .mn-btn{
    width:100% !important; justify-content:flex-start !important;
    padding:10px 14px !important; font-size:13px !important; margin-left:0 !important;
    border-radius:8px;
  }
  /* ★ 2026-05-12: GIS분석 dropdown — column 으로 펼쳐 sub-item 까지 정상 노출 */
  body.top-menu-open .main-menu .mn-dropdown{
    display:flex !important; flex-direction:column !important;
    width:100% !important; align-items:stretch !important; margin:0 !important;
  }
  body.top-menu-open .main-menu .mn-dropdown > .mn-btn{
    width:100% !important; justify-content:flex-start !important;
  }
  body.top-menu-open .main-menu .mn-dropdown .mn-dd-caret{ margin-left:auto }
  body.top-menu-open .main-menu .mn-dropdown.open .mn-dropdown-menu{
    display:flex !important; flex-direction:column !important;
    position:static !important; width:100% !important; min-width:0 !important;
    padding:4px 0 4px 20px !important; margin-top:4px !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    gap:4px;
  }
  body.top-menu-open .main-menu .mn-sub-item{
    width:100% !important; padding:9px 14px !important; font-size:13px !important;
    border-radius:8px;
  }
  body.top-menu-open .tb-right > *{ width:100% !important; flex:none !important }
  body.top-menu-open .tb-right .gu-select{
    width:100% !important; min-width:0 !important; max-width:none !important;
    font-size:13px !important; padding:8px 28px 8px 12px !important;
  }
  body.top-menu-open .tb-right .period-tabs{
    width:100% !important; justify-content:space-around !important;
  }
  body.top-menu-open .tb-right .period-tab{
    flex:1 !important; justify-content:center !important;
    font-size:11px !important; padding:6px 10px !important;
  }
  body.top-menu-open .tb-right .period-tab i{ display:inline !important }
  body.top-menu-open .tb-right .live-tag{ display:flex !important; justify-content:center }
  body.top-menu-open .tb-right .theme-btn{ width:100% !important; justify-content:center }
  body.top-menu-open .tb-right .tb-time{ display:flex !important; justify-content:center; font-size:13px !important }
  .hero-title{font-size:19px}
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .g-3,.g-2,.g-2b{grid-template-columns:1fr}
  .kpi-val{font-size:20px}
  /* ★ 모바일 — body-grid 를 단순 block flow 로 (grid 트랙 collapse 방지) */
  .body-grid{
    display:block !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    height:auto !important; min-height:0 !important;
    flex:none !important;
  }
  /* ★ 모든 컬럼을 flex-column 으로 강제 — display:grid 조합 버그 회피 */
  .col-left, .col-center, .col-right{
    display:flex !important; flex-direction:column !important;
    grid-column:auto !important; grid-row:auto !important;
    grid-template-rows:none !important; grid-template-columns:none !important;
    gap:8px !important; width:100% !important;
    min-height:0 !important; height:auto !important;
    margin-bottom:8px;
  }
  /* ★ 모바일 카드 — 차트는 300px, 지도는 360px 정도 */
  .col-left  > .card,
  .col-right > .card{
    min-height: 333px !important;   /* ★ 2026-06-05: 모바일 차트 카드 세로 */
    flex:0 0 auto !important; width:100% !important;
  }
  /* ★ 2026-05-25: 모바일 지도 카드 — 세로 1.5배 (옵션 스트립이 가려도 지도 잘 보이게) */
  .col-center > .card{
    min-height: 600px !important;   /* ★ 2026-06-05: 모바일 지도 세로 */
    flex:0 0 auto !important; width:100% !important;
  }
  .col-left .card .cbd, .col-right .card .cbd{
    min-height:255px !important; height:auto !important; overflow:visible !important;
  }
  .col-left .card .cha, .col-right .card .cha{
    min-height:255px !important; height:255px !important; width:100% !important;
  }
  /* ★ 2026-06-05: 소비분석(consume) 이식 카드(.kpi)도 모바일에서 차트 높이 확보 — .card 규칙이 .kpi 를 안 잡음 */
  .body-grid [data-consume-moved]{ width:100% !important; min-height:0 !important; flex:0 0 auto !important; margin-bottom:8px; }
  .body-grid [data-consume-moved] .kpi-spark{ height:210px !important; min-height:210px !important; }/* ★ 2026-06-22: 모바일 소비분석 카드 세로 소폭 축소(255→210) */
  .ticker-bar{ height:28px }
  .tk-hot{ height:22px; padding:0 8px; font-size:9.5px; margin-right:8px }
  .tk-item{ padding:0 12px; font-size:10px }
  /* ★ 모바일 mc-filters — 시군구/읍면동만 노출, 나머지는 옵션패널에서 (겹침 방지) */
  .mc-filters{
    left:46px; gap:3px; max-width:calc(100% - 56px);
    flex-wrap:nowrap !important;
  }
  .mc-sel{ max-width:120px; min-width:80px; font-size:10px; padding:4px 18px 4px 6px }
  .mc-search{ width:72px; font-size:10px }
  /* 소상공인 업종 select 3개는 모바일에서 숨김 (옵션 패널에서 사용 가능) */
  #mcMajorCat, #mcSubCat, #mcSubSub{ display:none !important }
  #mcMajorCat ~ .cs-btn,
  #mcSubCat   ~ .cs-btn,
  #mcSubSub   ~ .cs-btn{ display:none !important }
  .mc-zoom-btn{ width:22px; height:22px; font-size:12px }
  /* ★ 모바일 — mc-actions 만 햄버거에 숨김. mc-tiles(지도/위성/다크/자동 + 유동인구 select)는
     사용자 요청으로 항상 노출 — 필터바 아래 컴팩트 줄바꿈 스트립 */
  .mc-hamburger{ display:flex !important }
  .mc-actions{ display:none !important }
  .mc-tiles{
    display:flex !important; flex-wrap:wrap !important; flex-direction:row !important;
    position:absolute !important; top:46px !important; left:8px !important; right:8px !important;
    gap:4px !important; align-items:center;
    background:rgba(255,255,255,.94); padding:5px 6px; border-radius:9px;
    box-shadow:0 4px 14px rgba(15,23,42,.18); z-index:1098;
  }
  [data-theme="dark"] .mc-tiles{ background:rgba(15,23,42,.93) }
  .mc-tiles .mc-tile-btn,
  .mc-tiles .fp-dir-sel{ font-size:10px !important }

  /* 햄버거 열림 시 — 우측 상단에 드롭다운으로 표시 (서로 안 겹치게 위/아래) */
  body.mobile-menu-open .mc-tiles{
    display:flex !important;
    position:absolute !important;
    top:50px !important; right:8px !important; left:auto !important;
    flex-direction:row !important; gap:4px !important;
    background:rgba(255,255,255,0.97); padding:6px;
    border-radius:8px; box-shadow:0 6px 20px rgba(15,23,42,0.2);
    z-index:1099;
  }
  body.mobile-menu-open .mc-actions{
    display:flex !important;
    position:absolute !important;
    top:96px !important; right:8px !important; left:auto !important;
    flex-direction:row !important; gap:4px !important;
    background:rgba(255,255,255,0.97); padding:6px;
    border-radius:8px; box-shadow:0 6px 20px rgba(15,23,42,0.2);
    z-index:1099;
  }
  [data-theme="dark"] body.mobile-menu-open .mc-tiles,
  [data-theme="dark"] body.mobile-menu-open .mc-actions{
    background:rgba(15,23,42,0.92);
  }
  .mc-tile-btn{
    width:auto !important; min-width:46px; padding:6px 10px !important;
    font-size:11px !important; font-weight:700;
    box-shadow:0 4px 12px rgba(15,23,42,.18) !important;
  }
  .mc-tile-btn.on{ box-shadow:0 4px 14px rgba(8,145,178,.42) !important }

  /* ★ mc-tiles 는 햄버거 안으로 이동했으니 mc-filters 가 최상단에 위치
        햄버거(우측 상단 36×36) 회피해서 right:52px 까지만 사용 */
  .mc-filters{
    top:8px !important; left:8px !important; right:52px !important;
    max-width:calc(100% - 60px) !important;
    flex-wrap:nowrap !important; gap:6px !important;
    align-items:center;
  }
  /* ★ 모바일에서는 알림 배지 완전 숨김 — select 영역과 충돌 원천 차단
        (필요한 정보는 카드박스에서 확인 가능) */
  #guDistInfo, .gu-dist-info{ display:none !important }
  /* ★ 모바일에서는 ECharts 툴팁만 숨김 (cs-pop 커스텀 select 팝업은 제외)
        cs-pop 도 z-index:99999 를 inline 으로 쓰기 때문에 :not(.cs-pop) 으로 보호 */
  .echarts-tooltip,
  body > div[style*="z-index: 99999"]:not(.cs-pop):not(.htip):not(.gu-dist-info),
  body > div[style*="z-index:99999"]:not(.cs-pop):not(.htip):not(.gu-dist-info){ display:none !important }
  /* ★ 모바일 — KPI 카드 툴팁(.htip) 도 숨김 */
  .htip{ display:none !important }
  /* 시군구/읍면동 두 select 만 보이는 상황 — 가로 1줄 */
  .mc-filters .mc-sel,
  #mcCatSel ~ .cs-btn,
  #mcDongSel ~ .cs-btn{
    flex:1 1 0 !important; min-width:0 !important; max-width:none !important;
    width:auto !important;
  }
  /* 줌 버튼은 작고 고정 */
  .mc-filters .mc-zoom-btn{ flex:0 0 auto !important }
  /* mc-search 도 모바일에서 숨김 — 시군구/읍면동에 집중 */
  .mc-search{ display:none !important }

  .mc-options{ top:auto !important; bottom:60px !important; left:0 !important }
  .mc-opt-panel{ width:140px !important; max-height:48vh !important }
  .mc-options.collapsed{ transform:translateX(-140px) !important }
  .mc-opt-tab{
    width:27px !important; padding:9px 0 !important; max-height:120px !important;
    font-size:11px !important; letter-spacing:1px !important; font-weight:700 !important;
    box-shadow:2px 2px 10px rgba(8,145,178,.6), 0 3px 10px rgba(15,23,42,.2) !important;
    border-radius:0 9px 9px 0 !important;
  }
  .mc-opt-tab i{ font-size:13px !important }
  .sb-list-panel{ top:auto; bottom:8px; right:0; left:0; align-items:flex-end; justify-content:flex-end }
  .sb-list-bd{ width:96vw; max-width:380px; height:300px; max-height:50vh }
  .sb-list-panel.collapsed{ transform:translateX(calc(96vw))}
  .mc-legend{ font-size:9.5px; padding:6px 8px; max-width:160px; max-height:180px; overflow-y:auto }
  .mc-actions{ top:6px; right:6px }
  .mc-act-btn{ width:24px; height:24px; font-size:10px }
  .mc-avatar{ width:36px; height:36px }
  .news-modal{ padding:30px 10px 10px }
  .news-modal-box{ max-width:100%; max-height:92vh }
  .news-modal-hd .tt{ font-size:13px }
  .htip{ width:280px; padding:10px 12px }
  .htip-grid{ grid-template-columns:1fr 1fr }
  .tk-tip{ width:260px }
  .tk-tip-big .v{ font-size:22px }
  /* col-right 카드 통일 — 300px */
  .col-right .card{ min-height: 300px !important }
}

@media(max-width:480px){
  .wrap{padding:8px}
  .topbar-inner{padding:8px 10px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi{padding:10px 12px 6px; min-height:140px}
  .kpi-val{font-size:18px}
  .mc-actions .mc-act-btn.csv-all{ display:none }
  .mc-search{ display:none !important }
  /* 480px — 좁은 폰: 시군구/읍면동 선택을 더 컴팩트하게, gap 축소 */
  .mc-filters{ gap:4px !important; top:8px !important; right:50px !important }
  .mc-filters .mc-sel{ font-size:9.5px !important; padding:3px 16px 3px 5px !important; min-height:26px }
  .mc-filters .mc-zoom-btn{ width:24px !important; height:24px !important; font-size:11px !important }
  /* 480px — 알림 배지 숨김 유지 */
  #guDistInfo, .gu-dist-info{ display:none !important }
  .mc-legend{ font-size:9px; padding:5px 7px; max-width:140px; max-height:160px }
  .mc-legend-row .lb{ font-size:9px }
  .news-modal{ padding:10px 6px }
  .htip{ width:calc(100vw - 30px); max-width:300px }
  .tk-tip{ width:calc(100vw - 30px); max-width:280px }
  /* 480px 좁은 폰 — 차트 280px, 지도 340px */
  .col-left  > .card,
  .col-right > .card{
    min-height:280px !important;
    flex:0 0 auto !important; width:100% !important;
  }
  /* ★ 2026-05-25: 모바일 지도 카드 — 세로 1.5배 */
  .col-center > .card{
    min-height:510px !important;
    flex:0 0 auto !important; width:100% !important;
  }
  .col-left .card .cbd, .col-right .card .cbd{
    min-height:210px !important; height:auto !important; overflow:visible !important;
  }
  .col-left .card .cha, .col-right .card .cha{
    min-height:210px !important; height:210px !important; width:100% !important;
  }
}

@media(max-width:380px){
  .kpi-grid{grid-template-columns:1fr}
  .kpi{ min-height:120px }
  .topbar .logo-divider, .topbar .tagline{ display:none }
  .ticker-bar{ height:24px }
  .tk-hot{ font-size:9px; padding:0 6px }
  .mc-filters{ gap:2px }
  .mc-sel{ max-width:70px; font-size:9.5px }
  /* ★ 소형 폰 — 컬럼 스택 안전장치 재확인 */
  .wrap{ height:auto !important; min-height:0 !important; overflow:visible !important }
  .body-grid{ display:block !important; height:auto !important; min-height:0 !important }
  .col-left, .col-center, .col-right{
    display:flex !important; flex-direction:column !important;
    width:100% !important; min-height:0 !important; height:auto !important;
    margin-bottom:8px;
  }
}

/* =====================================================================
 *  모바일 / 반응형 안전 보강 (2026-05-09)
 * =====================================================================*/

/* 풍부한 툴팁 — 모바일에서 화면 폭 안 들어오는 문제 방지 */
@media (max-width: 768px){
  #richTipPanel{
    /* 위치는 JS 가 설정하지만 안전망 — max-width 강제 */
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box;
  }
  #richTipPanel .rich-tip-inner{
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* 카드매출 박스 글자 크기 살짝 축소 */
  #richTipPanel .rich-tip-inner div[style*="font-size:18px"]{ font-size:15px !important; }
  #richTipPanel .rich-tip-inner div[style*="font-size:13px"]{ font-size:11px !important; }
  #richTipPanel .rich-tip-inner div[style*="font-size:15px"]{ font-size:13px !important; }
}

/* 자동 투어 활성 버튼 — 모바일에서 max-width 안 넘어가게 */
@media (max-width: 480px){
  .mc-tile-btn.auto-tour.on{
    min-width: 60px !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
  }
}

/* KPI 카드 그리드 — 모바일에서 1열 레이아웃 보장 */
@media (max-width: 768px){
  /* hero KPI 7개 카드 — 가로 스크롤 또는 그리드 자동 */
  .kpi-row{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .kpi-card{
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  /* 본 그리드 (4열) → 모바일 1열 */
  .grid-4, .grid-3{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* 차트 카드 본체 높이 — 모바일에서 조금 줄여 한눈에 */
  .cbd .cha{ min-height: 220px !important; }
}

/* 작은 모바일 (380 이하) — 추가 압축 */
@media (max-width: 380px){
  .kpi-card{ flex: 1 1 100% !important; }
  .kpi-card .v{ font-size: 16px !important; }
  .kpi-card .lb{ font-size: 9px !important; }
  /* 마커 사이즈 — 작은 화면에선 살짝 축소 */
  .gu-bar-icon{ transform: scale(0.85); transform-origin: center bottom; }
}

/* 지도 — 핸드폰 세로/가로 모두 화면에 맞게 */
@media (max-width: 768px){
  #jbMap{ min-height: 300px !important; }
  /* 지도 컨트롤 (옵션/목록 패널) — 모바일에선 살짝 좁게 */
  .mc-filters{ flex-wrap: wrap !important; }
  .mc-sel, .mc-search{ min-width: 0 !important; max-width: 120px !important; }
}

/* 풍부한 툴팁 z-index 보강 — 모바일 가상 키보드와 충돌 방지 */
#richTipPanel{ z-index: 9999 !important; }

/* 데스크톱 (769px 이상) — 모바일 게이트가 영향 안 미치게 보호 */
@media (min-width: 769px){
  #richTipPanel{ max-width: 360px; }
}

/* =====================================================================
 *  시군구 마커 위 인구·카드매출 라벨
 * =====================================================================*/
.gu-pop-label-icon{
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
}
.gu-pop-label{
  background: rgba(15, 23, 42, 0.88);
  color: #f1f5f9;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  padding: 3px 7px;
  font-family: 'Noto Sans KR', Pretendard, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.gu-pop-label .row{ display: block; font-family:'Rajdhani', 'Noto Sans KR', sans-serif; }
.gu-pop-label .row.h{ color: #67e8f9; }   /* 거주 — 시안 */
.gu-pop-label .row.v{ color: #fcd34d; }   /* 유동 — 옐로 */
.gu-pop-label .row.c{ color: #fb7185; }   /* 카드 — 핑크 */

/* 라이트 테마 — 다른 배경 */
:root[data-theme="light"] .gu-pop-label{
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  border: 1px solid rgba(29,78,216,0.25);
  box-shadow: 0 3px 10px rgba(15,23,42,0.18);
}
:root[data-theme="light"] .gu-pop-label .row.h{ color: #0e7490; }
:root[data-theme="light"] .gu-pop-label .row.v{ color: #b45309; }
:root[data-theme="light"] .gu-pop-label .row.c{ color: #dc2626; }

/* 모바일에서는 카드매출 줄 숨겨서 2줄로 — 작은 화면 가독성 */
@media (max-width: 768px){
  .gu-pop-label{ font-size: 8.5px; padding: 2px 5px; }
  .gu-pop-label .row.c{ display: none; }
}

/* =====================================================================
 *  카드박스 확대 (fullscreen) — 헤더 탭 / 아이콘 같이 확대
 *    fa-expand 아이콘 클릭 시 :fullscreen 가상 클래스 적용됨
 * =====================================================================*/
.card:fullscreen,
.card:-webkit-full-screen{
  background: var(--bg) !important;
  padding: 0 !important;
}

/* 헤더 — 더 큰 padding + 글자 */
.card:fullscreen .chd,
.card:-webkit-full-screen .chd{
  padding: 16px 22px !important;
  min-height: 60px !important;
  border-bottom: 2px solid var(--bd);
}

/* 아이콘 — 카드 좌측 둥근 색상 박스 */
.card:fullscreen .chd .ic,
.card:-webkit-full-screen .chd .ic{
  width: 42px !important;
  height: 42px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
}

/* 제목 + 부제 */
.card:fullscreen .chd .tt,
.card:-webkit-full-screen .chd .tt{
  font-size: 20px !important;
  font-weight: 800 !important;
}
.card:fullscreen .chd .tt small,
.card:-webkit-full-screen .chd .tt small{
  font-size: 14px !important;
  margin-left: 8px !important;
}

/* 탭 버튼 — 시간대/연령/거주지 */
.card:fullscreen .tabs .tab,
.card:-webkit-full-screen .tabs .tab{
  font-size: 15px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* 우측 액션 아이콘 (즐겨찾기/AI/CSV/팝업 등) */
.card:fullscreen .chd .acts .ic-btn,
.card:fullscreen .chd .acts a,
.card:fullscreen .chd .acts button,
.card:-webkit-full-screen .chd .acts .ic-btn,
.card:-webkit-full-screen .chd .acts a,
.card:-webkit-full-screen .chd .acts button{
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
}

/* 본문 — 차트가 화면 가득 차게 */
.card:fullscreen .cbd,
.card:-webkit-full-screen .cbd{
  padding: 18px !important;
  height: calc(100vh - 90px) !important;
}
.card:fullscreen .cha,
.card:-webkit-full-screen .cha{
  min-height: 0 !important;
  height: 100% !important;
}

/* ECharts 본문 */
.card:fullscreen .cha > div,
.card:-webkit-full-screen .cha > div{
  height: 100% !important;
}

/* 모바일 fullscreen — 헤더 살짝 더 압축 */
@media (max-width: 768px){
  .card:fullscreen .chd,
  .card:-webkit-full-screen .chd{
    padding: 10px 14px !important;
    min-height: 48px !important;
  }
  .card:fullscreen .chd .tt,
  .card:-webkit-full-screen .chd .tt{ font-size: 16px !important; }
  .card:fullscreen .tabs .tab,
  .card:-webkit-full-screen .tabs .tab{
    font-size: 12px !important; padding: 6px 12px !important;
  }
}

/* =====================================================================
 *  카드박스 확대 모달의 헤더 탭 — 원본 카드 탭 복제
 *    라이트/다크 자동 — 모달 헤더 배경에 맞춰 가독성 확보
 * =====================================================================*/
#cardExpandTabs.ce-tabs-wrap{
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-right: 8px;
  padding: 0 8px 0 0;
  border-right: 1px solid rgba(15,23,42,0.15);
}
/* 라이트 — 비활성 탭 (밝은 헤더 위에서 보이게) */
#cardExpandTabs .tab{
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.18);
  border-radius: 6px;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
#cardExpandTabs .tab:hover{
  background: rgba(15,23,42,0.10);
  color: #1e293b;
  border-color: rgba(15,23,42,0.30);
}
#cardExpandTabs .tab.on{
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(29,78,216,0.45);
}

/* 다크 — 어두운 헤더 위에서 흰 글자 */
:root[data-theme="dark"] #cardExpandTabs.ce-tabs-wrap{
  border-right-color: rgba(255,255,255,0.18);
}
:root[data-theme="dark"] #cardExpandTabs .tab{
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}
:root[data-theme="dark"] #cardExpandTabs .tab:hover{
  background: rgba(255,255,255,0.18);
  color: #fff;
}
:root[data-theme="dark"] #cardExpandTabs .tab.on{
  background: linear-gradient(135deg, #38bdf8, #1d4ed8);
}

/* 모바일 — 작은 폰에서 살짝 압축 */
@media (max-width: 768px){
  #cardExpandTabs.ce-tabs-wrap{
    margin-right: 4px;
    padding-right: 4px;
  }
  #cardExpandTabs .tab{
    padding: 4px 10px;
    font-size: 11px;
  }
}

/* =====================================================================
 *  지도 행정동 폴리곤 호버 툴팁 — 동명·시군구·인구 풍부한 정보
 *    (2026-05-10) leaflet bindTooltip 의 className=dong-name-tip
 * =====================================================================*/
.leaflet-tooltip.dong-name-tip{
  background: rgba(15, 23, 42, 0.94);
  color: #f1f5f9;
  border: 1px solid #fbbf24;
  border-left: 3px solid #fde047;
  padding: 8px 12px;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999;
}
.leaflet-tooltip.dong-name-tip::before{ display: none !important; }
.leaflet-tooltip-top.dong-name-tip{ margin-top: -8px; }
.leaflet-tooltip-bottom.dong-name-tip{ margin-top: 8px; }
/* 라이트 타일 (지도 모드) — 어두운 배경에 시안성 ↑ */
:root[data-theme="light"] .leaflet-tooltip.dong-name-tip{
  background: rgba(15, 23, 42, 0.92);
}