/*!
 * NaviMap v1.1.0 — 마린네비 자체 지도 엔진 스타일 (Proprietary)
 * Copyright (c) 2026 ICARUSX. All rights reserved.
 */

/* ── 컨테이너 ─────────────────────────────────── */
.nvm-map {
  position: relative;
  overflow: hidden;
  background: #d7dde0;
  outline: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.nvm-map.nvm-dragging { cursor: grabbing; }

/* ── 페인 ─────────────────────────────────────── */
.nvm-pane {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.nvm-mappane { will-change: transform; }

/* ── 타일 ─────────────────────────────────────── */
.nvm-tilelayer { position: absolute; left: 0; top: 0; }
.nvm-tile-level {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  /* 전환 애니메이션 없음 — 줌 애니메이션은 지도 페인이 담당하고 확정 시 즉시 맞춤 (예전 0.25s 전환은 손 뗄 때 출렁임 원인) */
  will-change: transform;
}
.nvm-tile {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.15s linear;
  pointer-events: none;
  -webkit-user-drag: none;
}
.nvm-tile.on { opacity: 1; }

/* ── 이미지/캔버스 오버레이 ───────────────────── */
.nvm-imgoverlay {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-user-drag: none;
}
.nvm-canvaslayer { position: absolute; left: 0; top: 0; }

/* ── 벡터(SVG) ────────────────────────────────── */
.nvm-vec { position: absolute; left: 0; top: 0; }

/* ── 마커 ─────────────────────────────────────── */
.nvm-marker {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
}
.nvm-marker-img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.nvm-interactive { cursor: pointer; }
.nvm-pin { background: none; border: none; }
/* 기본 divIcon(클래스 미지정 시) 외형 */
.nvm-div-icon {
  background: #fff;
  border: 1px solid #666;
}

/* ── 팝업 ─────────────────────────────────────
   구조: .leaflet-popup > .leaflet-popup-content-wrapper > .leaflet-popup-content
                        + .leaflet-popup-tip-container > .leaflet-popup-tip + .leaflet-popup-close-button
   (앱 CSS 가 이 클래스 구조를 지정하므로 이름을 맞춤) */
.nvm-popup {
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  pointer-events: auto;
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.nvm-popup .leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
  background: #fff;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.nvm-popup .leaflet-popup-content {
  margin: 13px 24px 13px 20px;
  line-height: 1.3;
  font-size: 13px;
  min-height: 1px;
}
.nvm-popup .leaflet-popup-content p { margin: 1.3em 0; }
.nvm-popup .leaflet-popup-tip-container {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 20px;
  margin-top: -1px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}
.nvm-popup .leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  transform: rotate(45deg);
  background: #fff;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.nvm-popup .leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  font: 16px/24px Tahoma, Verdana, sans-serif;
  color: #757575;
  text-align: center;
  text-decoration: none;
}
.nvm-popup .leaflet-popup-close-button:hover { color: #585858; }

/* ── 툴팁 ─────────────────────────────────────── */
.nvm-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border: 1px solid #b8c0c8;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  color: #223;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ── 컨트롤 코너 ──────────────────────────────── */
.nvm-corner {
  position: absolute;
  z-index: 900;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.nvm-corner > * { pointer-events: auto; }
.nvm-corner-tl { top: 12px; left: 12px; align-items: flex-start; }
.nvm-corner-tr { top: 12px; right: 12px; align-items: flex-end; }
.nvm-corner-bl { bottom: 12px; left: 12px; align-items: flex-start; }
.nvm-corner-br { bottom: 4px; right: 6px; align-items: flex-end; }

/* ── 줌 컨트롤 ────────────────────────────────── */
.nvm-ctl-zoom {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.nvm-zbtn {
  width: 32px;
  height: 32px;
  border: none;
  background: #fff;
  color: #334;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.nvm-zbtn + .nvm-zbtn { border-top: 1px solid #d5dae0; }
.nvm-zbtn:hover { background: #f1f4f7; }
.nvm-zbtn:disabled { color: #b6bec7; cursor: default; background: #fff; }

/* ── 저작자 표기(어트리뷰션) ──────────────────── */
.nvm-attribution {
  font-size: 12px;
  color: #5a6672;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
}
.nvm-attribution a { color: #38506b; text-decoration: none; }
.nvm-brandmark { font-weight: 600; }

/* 지도 안 이미지는 끌기·선택 불가 (아이콘이 따라 끌려 나오는 현상 방지) */
.nvm-map img { -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; }

/* ── 플로터 팝업 모양 = 메인(수정된 static/css/leaflet.css)과 동일 ──
   폭 300px, 테두리·본문 여백 없음(내용이 자체 표 레이아웃), 오른쪽 위 × 버튼 없음(팝업 안 자체 닫기 버튼 사용) */
.nvm-popup { width: 300px; }
.nvm-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; }
.nvm-popup .leaflet-popup-content { margin: 0; font-size: 1.08333em; }
.nvm-popup .leaflet-popup-close-button { display: none; }

/* 팝업 페이드 (Leaflet .leaflet-fade-anim 과 동일: 0.2s linear) */
.nvm-popup { opacity: 1; transition: opacity 0.2s linear; }
.nvm-popup.nvm-fade { opacity: 0; }