/* Leaflet UI / マップ画面用スタイル（map.html / indoor.html 共通） */

html, body { height: 100%; margin: 0; }

.map-section { margin-top: 12px; }

#map {
  width: 100%;
  height: 70vh;
  border-radius: 16px;
  background: #f3f4f6;
  box-shadow: var(--shadow);
  border: var(--border);
}

/* ピン色選択/設置モード UI */
.pin-panel { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pin-panel .label { color: var(--color-muted); font-size: 13px; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); cursor: pointer; position: relative; }
.color-dot::after { content: attr(data-key); position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #666; }
.color-dot.selected { box-shadow: 0 0 0 2px #2563eb; }
#map.pin-cursor { cursor: crosshair; }

/* 簡易描画UI */
.control-box {
  background: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  font: 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.control-box button { margin: 2px 4px 2px 0; padding: 6px 10px; border: 1px solid #ccc; background: #f7f7f7; border-radius: 4px; cursor: pointer; }
.control-box button.primary { background: #2a6df4; color: #fff; border-color: #2a6df4; }
.hint { margin-top: 6px; color: #666; }
.vertex-marker { background: #2a6df4; border: 2px solid #fff; width: 8px; height: 8px; border-radius: 50%; }

/* Leaflet UI をヘッダー/ハンバーガーより下にする（重なり順調整） */
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom,
.leaflet-popup-pane,
.leaflet-marker-pane,
.leaflet-overlay-pane,
.leaflet-tooltip-pane {
  z-index: 500 !important; /* ヘッダー(1000)・ドロワー(10000)より低く */
}

/* 地図外コントロール */
.map-toolbar { margin-top: 10px; display: flex; align-items: center; gap: 12px; color: #374151; font-size: 14px; }
.map-toolbar label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }