/* 地図ページ専用スタイル。style.css には依存しない(地図ページは全画面レイアウトのため) */
:root {
  --ink: #1a1a1a; --sub: #555; --line: #ddd;
  --blue: #1565c0; --red: #c62828; --amber: #b26a00;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif; color: var(--ink);
}
.map-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.map-head h1 { font-size: 15px; margin: 0; }
.map-head .back { font-size: 13px; color: var(--blue); text-decoration: none; white-space: nowrap; }

.map-bar { display: flex; justify-content: space-between; gap: 8px; padding: 4px 12px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.map-bar .stale { color: var(--amber); font-weight: 700; }

.chips { display: flex; gap: 6px; padding: 4px 12px 8px; overflow-x: auto; }
.chip {
  font-size: 13px; border: 1px solid var(--line); border-radius: 15px;
  padding: 4px 12px; background: #fff; color: var(--sub); cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }

#map { flex: 1; min-height: 300px; }

.map-note { font-size: 11.5px; color: var(--sub); margin: 6px 12px; }
.map-note:empty { display: none; }
.src-note { margin-bottom: 10px; }

/* ポップアップ */
.maplibregl-popup-content { font-family: inherit; font-size: 13px; line-height: 1.5; padding: 10px 12px; max-width: 260px; }
.maplibregl-popup-content h3 { font-size: 13.5px; margin: 0 0 4px; }
.maplibregl-popup-content .meta { font-size: 11px; color: var(--sub); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.maplibregl-popup-content .stale { color: var(--amber); font-weight: 700; }