/**
 * 海岸マップ（巡回する海岸を島の地図に落とした1枚）。
 *
 * 公開ページ（/activity/）と、印刷用の1枚（/activity/print/）の両方で使う。
 * 印刷用は handout.css の上に載るので、style.css の変数が無くても崩れないよう、
 * 使う変数にはすべて既定値を添えてある。
 *
 * 組み立ては src/partials/beach-map.php。印と札の位置は、地図の画像を作るときと
 * 同じ式（src/common/WebMercator.php）で出した%なので、画像が伸び縮みしても乗り続ける。
 */

/* ============ beach map（巡回する海岸を島の地図に落とす） ============ */
/* 地図は自前のAPI（/api/staticmap.php）が作る1枚のPNG。外部の地図ライブラリを
   読み込まず、印だけをHTMLで重ねる。位置は画像を作るときと同じ式（WebMercator）で
   出した%なので、画像が伸び縮みしても印は座標の上に乗ったままになる */
/* 地名の札を島の外側に並べるので、幅を絞らず読める大きさで出す
   （800pxに収めると地図が縮み、札の高さだけがCSSのpxで残って重なる） */
.beachmap { margin: var(--sp-6, 24px) auto 0; }
.beachmap__frame { position: relative; border: 1px solid var(--line, #E2E5EA); background: var(--sea-50, #F1F6FC); }
.beachmap__base { width: 100%; height: auto; }
.beachmap__pins { position: absolute; inset: 0; }
/* 海岸に立てる印。地図の色（淡い灰と青）から浮くよう、差し色の丸にする */
.beachmap__pin {
  position: absolute;
  /* 座標を丸の中心に合わせる（left/top は丸の左上に効くため） */
  width: 17px; height: 17px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--accent, #C0451F);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(24,48,88,.45);
}
.beachmap__pin:hover { z-index: 3; background: var(--accent-deep, #93300F); }
/* 巡回順の番号。島を一周する順を図のまま追えるよう、印の中に出しっぱなしにする */
.beachmap__num {
  display: block;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  color: #fff;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* 使っていない（地名は .beachmap__flag で島の外側に出す） */
.beachmap__label {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: var(--ink, #1c1f22);
  color: #fff;
  font-size: var(--fs-cap, 14px);
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.beachmap__pin:hover .beachmap__label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .beachmap__label { transition: none; } }
/* 地名の札。島の外側（海の余白）に、上下の重なりを避けて並べる。
   位置はPHP側で計算済み（src/partials/beach-map.php）。
   印のとなりに直接置くと、浜が近接するところで名前どうしが重なって読めない */
.beachmap__flag {
  position: absolute;
  z-index: 2;
  transform: translateY(-50%);
  padding: 2px 7px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--accent, #C0451F);
  color: var(--ink, #1c1f22);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.beachmap__flag--left { left: 4px; }
.beachmap__flag--right { right: 4px; }
/* 左右に入りきらないぶんは上下の縁へ。こちらは横に並べるので、中心を座標に合わせる */
.beachmap__flag--top,
.beachmap__flag--bottom { transform: translate(-50%, -50%); }
.beachmap__flag--top { top: 12px; }
.beachmap__flag--bottom { top: calc(100% - 12px); }
/* 札と印をつなぐ細い線。画像の座標系そのままで引く */
.beachmap__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.beachmap__leaders line {
  stroke: var(--accent, #C0451F);
  stroke-width: 1;
  opacity: .55;
  vector-effect: non-scaling-stroke;
}

/* 印の数の札。以前この位置にあった記録地図の見出しを引き継ぐ */
.beachmap__tab {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 10px;
  background: var(--sea-700);
  color: #fff;
  font-size: var(--fs-cap, 14px);
  letter-spacing: 0.08em;
}
.beachmap__tab .num { font-size: var(--fs-md); color: #fff; }
/* 画面が地図より狭いとき。全体を縮めると、札の文字だけはCSSのpxで残るので
   重なって読めなくなる。地図は元の大きさのまま、横に送って見てもらう */
.beachmap__swipe { display: none; }
@media (max-width: 1220px) {
  .beachmap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* 端まで送れることが分かるよう、下に少し余白を残す */
    padding-bottom: var(--sp-2, 8px);
  }
  .beachmap__frame { width: 1180px; }
  .beachmap__swipe { display: block; }
}

/* Googleマイマップを埋め込むとき（管理画面 › サイト設定 › 巡回マップ）。
   こちらは操作できる地図なので、静止画より高さを取って見やすくする */
.beachmap--embed { max-width: none; }
.beachmap--embed .beachmap__frame { background: var(--sea-50, #F1F6FC); }
.beachmap--embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 78svh;
  border: 0;
}
@media (min-width: 781px) { .beachmap--embed iframe { aspect-ratio: 16 / 10; } }
.beachmap__cap { margin-top: var(--sp-3, 10px); font-size: var(--fs-cap, 14px); color: var(--ink-faint, #5d656e); line-height: 1.8; }
/* 出典（国土地理院／Googleマップ）。文の続きではないので行を分ける */
.beachmap__src { display: block; }
/* 画面が狭いと印どうしが近づくので小さくする。名前は一覧で読むものなので、
   ここでは「島を一周して巡っている」ことが分かれば足りる */
@media (max-width: 560px) {
  .beachmap__pin { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-width: 1.5px; }
}

/* 印刷用の1枚（/activity/print/）への入口。図のすぐ下に添える */
.beachmap__print { margin: var(--sp-3, 10px) 0 0; font-size: var(--fs-cap, 14px); }