/* =====================================================================
 * dong_view.css — 읍면동 셀 지도 스타일
 *   - 지도 위 읍면동 select
 *   - 50m 셀 그리드 polygon
 *   - 메트릭 토글 아이콘 (유입/유출/거주/근무/방문)
 *   - 셀 hover 미니 차트 팝업
 * ===================================================================== */

/* ── 읍면동 select (시군구 select 옆에 위치) */
.dong-select{
  height:28px; padding:2px 22px 2px 8px;
  font-size:11.5px; font-family:Pretendard,sans-serif;
  border:1px solid #cbd5e1; border-radius:5px;
  background:#fff; color:#0f172a; cursor:pointer;
  min-width:90px; max-width:140px;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M3 4.5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 6px center;
}
.dong-select:hover{ border-color:#3b82f6 }
.dong-select:focus{ outline:none; border-color:#1d4ed8; box-shadow:0 0 0 2px rgba(29,78,216,0.15) }
.dong-select:disabled{ background-color:#f1f5f9; cursor:not-allowed; color:#94a3b8 }

/* ── 메트릭 토글 패널 (지도 우상단) */
.metric-panel{
  position:absolute; top:54px; right:8px; z-index:801;
  background:rgba(255,255,255,0.96);
  border:1px solid #e2e8f0; border-radius:8px;
  padding:6px 4px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 4px 12px rgba(0,0,0,0.10);
  font-family:Pretendard,sans-serif;
  display:none; /* 기본 숨김 — 읍면동 선택 시 표시 */
}
.metric-panel.show{ display:flex }
.metric-btn{
  width:36px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:5px; color:#475569;
  font-size:14px; transition:.15s;
}
.metric-btn:hover{ background:#f1f5f9; color:#1d4ed8 }
.metric-btn.on{ background:#dbeafe; color:#1d4ed8; box-shadow:inset 0 0 0 1px #3b82f6 }
.metric-btn .lbl{ font-size:8.5px; margin-top:0; font-weight:700 }
.metric-panel .sep{ height:1px; background:#e2e8f0; margin:2px 4px }
.metric-btn-stack{ display:flex; flex-direction:column; align-items:center; gap:1px }

/* ── 셀 hover 툴팁 (Leaflet popup 대신 자체 div) */
.cell-tip{
  position:absolute; z-index:1500;
  background:#fff; border:2px solid #1d4ed8; border-radius:6px;
  padding:6px 8px; min-width:180px; max-width:280px;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
  font-family:Pretendard,sans-serif; font-size:11px; color:#0f172a;
  pointer-events:none; display:none;
}
.cell-tip .ct-h{ font-weight:700; margin-bottom:3px; color:#1d4ed8; font-size:11.5px }
.cell-tip .ct-row{ display:flex; justify-content:space-between; gap:6px; padding:1px 0 }
.cell-tip .ct-k{ color:#64748b }
.cell-tip .ct-v{ font-family:Rajdhani,monospace; font-weight:700; color:#0f172a }
.cell-tip .ct-bar{ background:#f1f5f9; height:5px; border-radius:3px; margin-top:2px; overflow:hidden }
.cell-tip .ct-bar-fill{ height:100%; background:linear-gradient(90deg, #3b82f6, #1d4ed8) }

/* ── 셀 그리드 안내 배지 */
.dong-info{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:802; background:rgba(29,78,216,0.92); color:#fff;
  padding:5px 12px; border-radius:14px; font-size:11px; font-weight:600;
  font-family:Pretendard,sans-serif;
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
  display:none;
}
.dong-info.show{ display:block }
.dong-info .ct{ background:rgba(255,255,255,0.22); padding:1px 8px; border-radius:10px; margin-left:6px }

/* ── 좌표 없음 알림 */
.dong-fallback{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:802; background:rgba(255,251,235,0.96);
  border:2px solid #f59e0b; border-radius:10px;
  padding:14px 20px; max-width:380px; text-align:center;
  font-family:Pretendard,sans-serif; font-size:12.5px; color:#78350f;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
.dong-fallback h4{ margin:0 0 6px; color:#b45309; font-size:13px }
.dong-fallback code{ background:#fef3c7; padding:1px 5px; border-radius:3px; font-size:11px }

@media(max-width:768px){
  .metric-panel{ top:45px; right:4px; padding:4px 2px }
  .metric-btn{ width:32px; height:28px; font-size:12px }
  .dong-select{ min-width:75px; max-width:110px; font-size:10.5px }
}