/* Maps */
.map{
  width: 100%;
  height: 400px;
}

/* Custom Marker */
.custom-marker   { display: flex; flex-direction: column; align-items: center; }
.marker-bubble   { background: var(--primary-color); color: #fff; font-size: 12px; font-weight: 700; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; }
.marker-bubble span { transform: rotate(45deg); display: block; }
.marker-label    { margin-top: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }


.info-window{
  min-width: 120px;
  text-align: center;
  padding: 5px 5px;
  font-size:12px;
}

/**
 * @title   Naver Map Dark Mode Custom CSS
 * @desc    [data-theme="dark"] 속성 기반 네이버 지도 다크모드 CSS 필터 적용
 * @author  Architecture Team
 * @since   2026.06.25
 */

/*
 * 1. 지도 전체 색상 반전 및 색조 보정
 * (참고: #map 부분은 실제 프로젝트의 지도 컨테이너 ID 또는 Class로 변경하여 사용하세요)
 */
[data-theme="dark"] .map-wrapper {
  /* 명도 90% 반전, 색조 180도 회전(물/숲 색상 유지), 밝기/대비 미세조정 */
  filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
  -webkit-filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/*
 * 2. 네이버 지도 UI 컨트롤 재반전 (원래 색상 복구)
 * 네이버 로고, 줌 컨트롤, 지도 유형 컨트롤, 축척 컨트롤 등
 */
[data-theme="dark"] .map-wrapper .nmap_zoom_control,
[data-theme="dark"] .map-wrapper .nmap_map_type_control,
[data-theme="dark"] .map-wrapper .nmap_scale_control,
[data-theme="dark"] .map-wrapper .nmap_logo_image,
[data-theme="dark"] .map-wrapper a[title="NAVER 지도"] {
  /* 100% 반전 및 180도 회전으로 원본 색상으로 되돌림 */
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
}

/*
 * 3. 마커(Marker) 이미지 재반전 (선택 사항)
 * 기본 마커나 커스텀 마커 이미지가 반전되어 보이는 것을 방지
 */
[data-theme="dark"] .map-wrapper img[src*="marker"],
[data-theme="dark"] .map-wrapper .naver-map-marker /* 커스텀 마커 클래스 사용 시 */ {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
}