/**
 * 対応エリア地図（OpenStreetMap / Leaflet）専用スタイル
 *
 * 読み込み条件: ページ冒頭で $need_area_map = true のときのみ
 * （inc/head.php 経由で /assets/css/area-map.css が出力される）
 *
 * 責務: 地図枠の高さ・凡例・キャプション・z-index 隔離のみ。
 * site.css / pages/*.css の共通ルールは変更しない。
 */

/* 外側枠は HTML 側の border-2 と組み合わせる。内側の余白を抑えて地図を広く見せる */
.area-map {
  width: 100%;
}

/* 地図本体を囲む枠。Leaflet の高い z-index がドロワー/CTA に漏れないよう隔離する */
.area-map__frame {
  position: relative;
  background: #f0f4f8; /* Tailwind sub 相当。タイル読込前の下地 */
}

.area-map__canvas {
  width: 100%;
  height: 340px;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: #e6ecf2;
}

/* 左下の半径凡例。地図操作を邪魔しないよう pointer-events を切る */
.area-map__legend {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 500; /* Leaflet コントロール帯より手前、ページ全体の sticky よりは低い枠内値 */
  pointer-events: none;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cccccc;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #112233;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.area-map__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.area-map__legend-item + .area-map__legend-item {
  margin-top: 4px;
}

/* 凡例の色見本（JS の円スタイルと揃える） */
.area-map__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #0055aa;
  flex-shrink: 0;
}

.area-map__swatch--inner {
  background: rgba(0, 85, 170, 0.28);
}

.area-map__swatch--outer {
  background: rgba(0, 85, 170, 0.1);
}

/* 地図下の説明帯。既存プレースホルダーのテキスト階層を踏襲 */
.area-map__caption {
  margin-top: 8px;
  text-align: center;
  padding: 8px 4px 0;
}

.area-map__title {
  font-size: 0.75rem; /* text-xs 相当 */
  font-weight: 700;
  color: #112233;
  margin: 0 0 4px;
  line-height: 1.4;
}

.area-map__body {
  font-size: 11px;
  color: #555555;
  line-height: 1.6;
  margin: 0 auto 8px;
  max-width: 320px;
}

.area-map__footer-bar {
  background: #112233;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  line-height: 1.4;
}

/* Leaflet 帰属表示を枠内で読みやすくする（必須表示は消さない） */
.area-map__canvas .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.85);
  max-width: 55%;
  line-height: 1.3;
}

/* 縮尺バーをサイトの硬い矩形トーンに寄せる（角丸なし） */
.area-map__canvas .leaflet-control-scale {
  margin-bottom: 8px;
  margin-right: 8px;
}

.area-map__canvas .leaflet-control-scale-line {
  border: 2px solid #112233;
  border-top: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #112233;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 4px 1px;
  box-shadow: none;
  text-shadow: none;
}

/* 円上の半径ラベル（凡例と文言を揃え、地図上でも距離が読めるようにする） */
.area-map-radius-tooltip {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #112233;
  border-radius: 0;
  color: #112233;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  box-shadow: none;
  white-space: nowrap;
}

.area-map-radius-tooltip::before {
  border-top-color: #112233;
}

/* ズームボタンをサイトの硬い矩形トーンに寄せる */
.area-map__canvas .leaflet-bar a {
  border-radius: 0;
  color: #112233;
}

.area-map__canvas .leaflet-bar {
  border-radius: 0;
  border-color: #cccccc;
}

@media (min-width: 768px) {
  .area-map__canvas {
    height: 380px;
  }
}