/* 防災マップ（/bosai）。警戒レベルの色は config/bosai.php と同じ（2=黄, 3=赤, 4=紫, 5=黒） */
.bosai-page{--bs-ink:#1d2b36;--bs-muted:#5b6b78;--bs-border:#dde4ea;--bs-surface:#fff;--bs-soft:#f4f7f9;--bs-accent:#1f5f8b;--lv2:#f2e700;--lv3:#ff2800;--lv4:#aa00aa;--lv5:#0c000c;color:var(--bs-ink);max-width:1180px}
html.dark-mode .bosai-page{--bs-ink:#e2e9ef;--bs-muted:#a3b2bf;--bs-border:#36434f;--bs-surface:#1c2731;--bs-soft:#232f3a;--bs-accent:#7cc0ea}
.bosai-page h2{font-size:1.2rem;font-weight:800;margin:0 0 12px}
.bosai-page h2 small{font-size:.75rem;color:var(--bs-muted);font-weight:600;margin-left:6px}
.bosai-page section,.bosai-page nav.bosai-prefs{margin-top:28px}
.bosai-hero{background:linear-gradient(120deg,#1e2a3a,#36506b);padding:32px 36px;border-radius:16px;box-shadow:none;margin-bottom:20px}
.bosai-hero .eyebrow{color:#ffd28a;letter-spacing:.2em}
.bosai-hero h1{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.4;margin:10px 0}
.bosai-hero p{max-width:760px;line-height:1.9;font-size:.95rem}
.bosai-follow-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;font-weight:700;font-size:.85rem;cursor:pointer}
.bosai-follow-btn[aria-pressed="true"]{background:#ffd28a;border-color:#ffd28a;color:#1e2a3a}
.bosai-follow-note{display:block;margin-top:8px;font-size:.75rem;opacity:.8;line-height:1.7}
.bosai-breadcrumb{font-size:.85rem;margin-bottom:12px;color:var(--bs-muted)}
.bosai-breadcrumb a{color:var(--bs-accent)}
.bosai-breadcrumb span{margin:0 6px}

/* レベルの札。レベル2の黄色だけは文字を黒に */
.bosai-level{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.75rem;font-weight:800;color:#fff;white-space:nowrap;vertical-align:middle}
.bosai-level.lv2{background:var(--lv2);color:#222}
.bosai-level.lv3{background:var(--lv3)}
.bosai-level.lv4{background:var(--lv4)}
.bosai-level.lv5{background:var(--lv5);box-shadow:0 0 0 2px #fff inset}

.bosai-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--bs-border);border-left-width:6px;border-radius:12px;background:var(--bs-surface)}
.bosai-status p{margin:0;font-weight:700;flex:1 1 280px;line-height:1.7}
.bosai-status small{color:var(--bs-muted)}
.bosai-status.calm{border-left-color:#2e9d6a}
.bosai-status.lv2{border-left-color:var(--lv2)}
.bosai-status.lv3{border-left-color:var(--lv3)}
.bosai-status.lv4{border-left-color:var(--lv4)}
.bosai-status.lv5{border-left-color:var(--lv5)}

.bosai-notice{margin-top:12px;padding:14px 18px;border-radius:12px;background:var(--bs-soft);font-size:.85rem;line-height:1.8}
.bosai-notice p{margin:0 0 6px}
.bosai-notice ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.bosai-notice a{color:var(--bs-accent);font-weight:700}

#bosai-map{height:540px;border:1px solid var(--bs-border);border-radius:14px;z-index:0;background:var(--bs-soft)}
.bosai-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:.8rem;color:var(--bs-muted)}
.bosai-legend span{white-space:nowrap}
.bosai-key{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px;border:1px solid rgba(0,0,0,.25)}
.bosai-key.lv0{background:#cbd5e1}
.bosai-key.lv2{background:var(--lv2)}
.bosai-key.lv3{background:var(--lv3)}
.bosai-key.lv4{background:var(--lv4)}
.bosai-key.lv5{background:var(--lv5)}
.bosai-map-note{font-size:.78rem;color:var(--bs-muted);line-height:1.8;margin:8px 0 0}
.bosai-map-error{padding:30px;line-height:1.8}
.bosai-page .leaflet-tooltip div{font-size:.8rem}
.bosai-page .leaflet-tooltip small{display:block;color:#6b7280;margin-top:2px}

.bosai-empty{padding:16px 18px;border:1px dashed var(--bs-border);border-radius:12px;color:var(--bs-muted);margin:0}
.bosai-subhead{font-size:1rem;font-weight:800;margin:20px 0 10px}

.bosai-river{border:1px solid var(--bs-border);border-left-width:6px;border-radius:12px;padding:16px 18px;margin-bottom:12px;background:var(--bs-surface)}
.bosai-river.lv2{border-left-color:var(--lv2)}
.bosai-river.lv3{border-left-color:var(--lv3)}
.bosai-river.lv4{border-left-color:var(--lv4)}
.bosai-river.lv5{border-left-color:var(--lv5)}
.bosai-river header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bosai-river h3{font-size:1.1rem;font-weight:800;margin:0}
.bosai-river__kind{font-size:.85rem;color:var(--bs-muted)}
.bosai-river__headline{margin:10px 0 6px;font-weight:700;line-height:1.7}
.bosai-river details{font-size:.85rem;line-height:1.8;margin-bottom:6px}
.bosai-river details p{margin:4px 0}
.bosai-river__cities{font-size:.85rem;margin:0 0 4px}
.bosai-river small{color:var(--bs-muted)}
.bosai-recent{padding-left:1.2em;font-size:.88rem;line-height:1.9}
.bosai-recent small{color:var(--bs-muted)}

.bosai-warned{list-style:none;padding:0;margin:0;border:1px solid var(--bs-border);border-radius:12px;overflow:hidden;background:var(--bs-surface)}
.bosai-warned li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--bs-border)}
.bosai-warned li:last-child{border-bottom:0}
.bosai-warned a{display:inline-flex;align-items:center;gap:10px;color:inherit}
.bosai-warned__kinds{font-size:.82rem;color:var(--bs-muted);flex:1 1 260px}

.bosai-pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.bosai-pref-grid a{display:block;padding:7px 8px;border:1px solid var(--bs-border);border-radius:8px;text-align:center;font-size:.85rem;color:var(--bs-ink);background:var(--bs-surface)}
.bosai-pref-grid a:hover{border-color:var(--bs-accent);text-decoration:none}
.bosai-pref-grid a.lv2{box-shadow:inset 0 -4px 0 var(--lv2)}
.bosai-pref-grid a.lv3{box-shadow:inset 0 -4px 0 var(--lv3)}
.bosai-pref-grid a.lv4{box-shadow:inset 0 -4px 0 var(--lv4)}
.bosai-pref-grid a.lv5{box-shadow:inset 0 -4px 0 var(--lv5)}

.bosai-page .source-note{background:var(--bs-surface);border-color:var(--bs-border);padding:22px;line-height:1.9;font-size:.85rem;color:var(--bs-muted)}
.bosai-page .source-note h2{color:var(--bs-ink)}
.bosai-page .source-note summary{font-weight:700;color:var(--bs-ink);cursor:pointer}

@media (max-width:767px){
  .bosai-hero{padding:24px 20px}
  #bosai-map{height:420px}
}

/* アンダーパス（道路冠水想定箇所） */
.bosai-lead{font-size:.88rem;color:var(--bs-muted);line-height:1.8;margin:0 0 10px}
.bosai-area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.bosai-area-grid a{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--bs-border);border-radius:8px;font-size:.85rem;color:var(--bs-ink);background:var(--bs-surface)}
.bosai-area-grid a:hover{border-color:var(--bs-accent);text-decoration:none}
.bosai-area-grid small{color:var(--bs-muted);font-variant-numeric:tabular-nums}
.bosai-area-grid a.lv2{box-shadow:inset 4px 0 0 var(--lv2)}
.bosai-area-grid a.lv3{box-shadow:inset 4px 0 0 var(--lv3)}
.bosai-area-grid a.lv4{box-shadow:inset 4px 0 0 var(--lv4)}
.bosai-area-grid a.lv5{box-shadow:inset 4px 0 0 var(--lv5)}
.bosai-table-wrap{overflow-x:auto;border:1px solid var(--bs-border);border-radius:12px;background:var(--bs-surface)}
.bosai-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
.bosai-table th,.bosai-table td{padding:9px 12px;border-bottom:1px solid var(--bs-border);text-align:left;vertical-align:top}
.bosai-table th{font-size:.75rem;color:var(--bs-muted);font-weight:700;white-space:nowrap}
.bosai-table tr:last-child td{border-bottom:0}
.bosai-table td:last-child{white-space:nowrap}
.bosai-city-warnings{margin-top:10px}
/* スマホでは表をやめて1か所ずつ縦に並べる（横スクロールで管理者・地図の列が隠れるため） */
@media (max-width:600px){
  .bosai-table{min-width:0}
  .bosai-table thead{display:none}
  .bosai-table tr{display:block;padding:10px 12px;border-bottom:1px solid var(--bs-border)}
  .bosai-table tr:last-child{border-bottom:0}
  .bosai-table td{display:inline;padding:0;border:0;font-size:.82rem;color:var(--bs-muted)}
  .bosai-table td:first-child{display:block;font-size:.92rem;font-weight:700;color:var(--bs-ink);margin-bottom:2px}
  .bosai-table td:nth-child(3)::before{content:" ／ "}
  .bosai-table td:last-child{display:block;margin-top:2px}
}

/* 洪水予報の基準観測所の水位グラフ（resources/views/bosai/_water_chart.blade.php） */
.bosai-wl{margin:14px 0 10px;padding:12px 14px;border:1px solid var(--bs-border);border-radius:10px;background:var(--bs-soft)}
.bosai-wl figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.9rem;margin-bottom:8px}
.bosai-wl figcaption small{color:var(--bs-muted)}
.bosai-wl__now{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.85rem}
.bosai-wl__now b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.bosai-wl__body{display:flex;gap:6px}
.bosai-wl__yaxis{display:flex;flex-direction:column;justify-content:space-between;font-size:.68rem;color:var(--bs-muted);width:40px;text-align:right;font-variant-numeric:tabular-nums}
.bosai-wl__plot{position:relative;flex:1;height:170px;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:6px}
.bosai-wl__plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bosai-wl__criteria{stroke-width:1.2;stroke-dasharray:5 4}
.bosai-wl__criteria.lv1{stroke:#94a3b8}
.bosai-wl__criteria.lv2{stroke:#c9bd00}
.bosai-wl__criteria.lv3{stroke:var(--lv3)}
.bosai-wl__criteria.lv4{stroke:var(--lv4)}
.bosai-wl__criteria.lv5{stroke:var(--bs-ink);stroke-dasharray:2 3}
.bosai-wl__nowline{stroke:var(--bs-muted);stroke-width:1;stroke-dasharray:2 3}
.bosai-wl__observed{stroke:var(--bs-accent);stroke-width:2.5}
.bosai-wl__forecast{stroke:var(--bs-accent);stroke-width:2.5;stroke-dasharray:6 4;opacity:.75}
.bosai-wl__dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bs-accent);border:2px solid var(--bs-surface);box-shadow:0 0 0 1px var(--bs-accent)}
.bosai-wl__dot.lv2{background:var(--lv2)}
.bosai-wl__dot.lv3{background:var(--lv3)}
.bosai-wl__dot.lv4{background:var(--lv4)}
.bosai-wl__dot.lv5{background:var(--lv5)}
.bosai-wl__label{position:absolute;right:4px;transform:translateY(-100%);font-size:.62rem;line-height:1.3;padding:0 3px;background:var(--bs-surface);color:var(--bs-muted);border-radius:3px;white-space:nowrap}
.bosai-wl__label.lv3{color:var(--lv3)}
.bosai-wl__label.lv4{color:var(--lv4)}
.bosai-wl__xaxis{position:relative;height:16px;margin-left:46px;font-size:.68rem;color:var(--bs-muted)}
.bosai-wl__xaxis span{position:absolute;top:2px}
.bosai-wl__xaxis span:first-child{left:0}
.bosai-wl__xaxis span:nth-child(2){transform:translateX(-50%)}
.bosai-wl__xaxis span:last-child{right:0}
.bosai-wl__legend{font-size:.78rem;color:var(--bs-muted);margin:6px 0 0;line-height:1.7}
.bosai-wl__legend .lg{display:inline-flex;align-items:center;gap:4px;margin-right:12px}
.bosai-wl__legend .lg::before{content:"";display:inline-block;width:18px;border-top:2.5px solid var(--bs-accent)}
.bosai-wl__legend .lg-forecast::before{border-top-style:dashed;opacity:.75}
.bosai-wl__legend small{display:block}
@media (max-width:600px){.bosai-wl__now{margin-left:0}.bosai-wl__plot{height:150px}}