/* 地図まわり: ミニマップ・現在地ボタン・凡例・ボタン内スピナー */
.mini-map-wrap { position: relative; }
/* Leaflet のコントロール（帰属表示・ズーム）は z-index:1000 で、そのままだと
   ローディング画面(1000)やタブバーの前面に出てしまう。地図自身に
   スタッキングコンテキストを作って内側に閉じ込める。 */
.map { position: relative; z-index: 0; }
.map--mini { height: 240px; min-height: 0; border-radius: var(--r-lg); }
.map-btn {
  position: absolute; right: 12px; top: 12px; z-index: 500;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.94); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px -8px rgba(22,32,42,.4);
}
.map-btn:active { transform: scale(.94); }
.map-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map-legend__spot { background: color-mix(in srgb, var(--pin) 22%, white); border: 1.5px solid var(--pin); }
.map-legend__done { background: var(--pin-done); }
.map-legend__me { background: #2f80ed; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(47,128,237,.25); }

/* ボタン内スピナー（スタンプ判定中） */
.btn__spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: btnspin .8s linear infinite; }
.btn.is-busy { opacity: .85; }
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spinner { animation-duration: 2s; } }


/* スポット一覧のマップ: フッタータブに潜り込まないよう画面内に収める
   （実寸は app.js の fitMapHeight() が端末ごとに再計算する） */
[data-page="spots"] [data-panel="map"] .map {
  height: calc(100vh - 330px);
  height: calc(100dvh - 306px - env(safe-area-inset-bottom));
  min-height: 260px;
}
[data-page="spots"] [data-panel="map"] { padding-bottom: 4px; }

/* ピンのポップアップ（写真つき） */
.map-pop { width: 208px; font-family: var(--font); color: var(--ink); }
.map-pop__img { width: 100%; height: 116px; object-fit: cover; border-radius: 12px; background: var(--line); margin-bottom: 8px; }
.map-pop__sub { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; }
.map-pop__name { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.map-pop__dist { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 2px 8px; }
.map-pop__link { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--primary); }

/* Leaflet 既定の吹き出しを角丸・余白調整 */
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 12px 32px -14px rgba(22,32,42,.45); }
.map-pop-wrap .leaflet-popup-content { margin: 10px; width: auto !important; }
.leaflet-container a.leaflet-popup-close-button {
  top: 6px; right: 6px; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink);
  font: 700 15px/1 var(--font); box-shadow: 0 2px 8px -2px rgba(22,32,42,.45);
}

/* Google InfoWindow */
.gm-style-iw.gm-style-iw-c { border-radius: 16px; padding: 10px !important; }
.gm-style-iw-d { overflow: hidden !important; }