/* ============================================================
   app.css — 画面レイアウト（左：ヘッダ＋地図／右：サイドバー）
   ここを変えればレイアウトが変わる。JSには寸法を持たせていない。
   ============================================================ */

:root{
  --side-w: 400px;              /* サイドバー幅 */
  --head-bg:#3a4636;            /* ヘッダの帯 */
  --head-fg:#f2f5ef;
  --ink:#1c2430;
  --muted:#5d6b7a;
  --line:#dfe4ea;
  --panel:#ffffff;
  --bg:#f4f6f8;
  --accent:#1565c0;
  --sev-emergency:#d32f2f;
  --sev-high:#ef8b2c;
  --sev-medium:#b0a300;
  --sev-low:#7a8b99;
  --sev-resolved:#2e9e5b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  font-size:14px; line-height:1.6; overflow:hidden;
}
a{color:var(--accent)}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── 全体 ─────────────────────────────────── */
#app{display:flex; height:100vh; width:100vw}
#main{flex:1 1 auto; display:flex; flex-direction:column; min-width:0}

#head{background:var(--head-bg); color:var(--head-fg); padding:9px 16px 10px; flex:0 0 auto}
#head-title{margin:0; font-size:17px; font-weight:700; letter-spacing:.01em}
#head-sub{margin:2px 0 0; font-size:12.5px; opacity:.86}

#map-wrap{position:relative; flex:1 1 auto; min-height:0}
#map{position:absolute; inset:0}

/* ── レイヤ切替パネル（地図右上）───────────────── */
.panel{
  position:absolute; top:12px; right:12px; z-index:5;
  background:var(--panel); border:1px solid #c9d2da; border-radius:4px;
  box-shadow:0 2px 10px rgba(20,35,55,.16);
  min-width:236px; max-width:300px; max-height:calc(100% - 24px);
  display:flex; flex-direction:column;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 8px 7px 12px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.04em;
}
.panel-head button{
  width:24px; height:24px; line-height:1; border:1px solid var(--line);
  background:#fff; border-radius:3px; cursor:pointer; color:var(--muted);
}
.panel-body{padding:8px 12px 10px; overflow:auto}
.panel.collapsed .panel-body{display:none}
.panel hr{border:0; border-top:1px solid var(--line); margin:8px 0}

.opt-list{display:flex; flex-direction:column; gap:1px}
.opt{display:flex; align-items:flex-start; gap:8px; padding:4px 2px; cursor:pointer; font-size:13.5px}
.opt input{margin:4px 0 0; flex:0 0 auto}
.opt--pending span{color:var(--muted)}
.pending{
  font-style:normal; font-size:10.5px; color:#9aa7b4; border:1px solid #d6dde4;
  border-radius:2px; padding:0 4px; margin-left:4px; white-space:nowrap;
}

/* ── マーカー ─────────────────────────────── */
.mk{
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:3px solid var(--mk-color,#7a8b99);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; cursor:pointer;
  box-shadow:0 1px 5px rgba(20,35,55,.35);
  transition:transform .12s ease;
}
.mk:hover{transform:scale(1.12)}
.mk--dashed{border-style:dashed}
.mk--resolved{opacity:.55}
.mk--active{
  transform:scale(1.25);
  box-shadow:0 0 0 5px rgba(21,101,192,.28), 0 2px 8px rgba(20,35,55,.4);
}
.mk--emergency{background:#fff5f5}
.mk--high{background:#fff9f0}

/* ── 避難所ポップアップ ────────────────────── */
.maplibregl-popup-content{padding:11px 13px; border-radius:5px; font-size:12.5px; line-height:1.6}
.pop b{font-size:13.5px}
.pop p{margin:4px 0 0}
.pop-kind{color:var(--accent); font-weight:700; font-size:11.5px}
.pop-hz{color:var(--muted); font-size:11.5px}
.pop-note{
  margin-top:7px !important; padding-top:6px; border-top:1px solid var(--line);
  color:var(--muted); font-size:11px;
}
.pop-img{max-width:100%; max-height:180px; border-radius:4px; display:block}
.pop-badges{margin:0 0 6px !important; display:flex; flex-wrap:wrap; gap:5px}

/* ── ホバー用ポップアップ ─────────────────────
   pointer-events:none が要。これが無いと、ポップアップ自身がカーソルを
   受け取ってマーカーの mouseleave が発火し、出る→消えるを繰り返す。
   代わりにホバー中はリンクを押せないので「クリックで固定」と案内している。 */
.maplibregl-popup.pop-hover{pointer-events:none}
.maplibregl-popup.pop-hover .maplibregl-popup-content{
  box-shadow:0 3px 14px rgba(20,35,55,.28);
}
.pop-hint{
  margin-top:6px !important; color:var(--muted); font-size:10.5px;
}
.pop-more{
  margin-top:6px !important; font-size:11px; color:#a5721b;
  background:#fdf7ec; border:1px solid #eadcc2; border-radius:3px; padding:2px 6px;
}

/* 避難所レイヤの凡例（切替パネル内） */
.legend-inline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:2px 0 0 26px; font-size:11px; color:var(--muted);
}
.legend-inline i{display:inline-flex; align-items:center; gap:4px; font-style:normal}
.legend-inline b{
  width:9px; height:9px; border-radius:50%; display:inline-block;
  border:1px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
}

/* ── SNSカテゴリ凡例（クリックで絞り込み）────────── */
.sns-legend{
  display:flex; flex-wrap:wrap; gap:4px;
  margin:4px 0 2px 26px;
}
.sns-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; font-size:11px; line-height:1.5;
  border:1px solid var(--line); border-radius:11px;
  background:#fff; color:var(--muted); cursor:pointer;
}
.sns-chip b{
  width:8px; height:8px; border-radius:50%; display:inline-block;
  border:1px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.sns-chip em{font-style:normal; opacity:.7}
.sns-empty{
  margin:0; font-size:11px; line-height:1.6; color:#a5721b;
  background:#fdf7ec; border:1px solid #eadcc2; border-radius:4px; padding:5px 7px;
}
.sns-chip:hover{background:#f2f5f7}
.sns-chip--on{background:#1b2a36; border-color:#1b2a36; color:#fff}
.sns-chip--on em{opacity:.85}

/* ── サイドバー ───────────────────────────── */
#side{
  flex:0 0 var(--side-w); width:var(--side-w);
  background:#fff; border-left:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
}
.status-line{
  margin:0; padding:12px 16px; font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line); background:#fafbfc;
}
.status-line code{background:#eef1f4; padding:0 4px; border-radius:2px}
.status-line .ll{display:inline-block; margin-top:5px; color:#b4531a; font-size:13px}

.sec{padding:16px 16px 6px; border-bottom:1px solid var(--line)}
.sec-title{margin:0 0 8px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px}
.sec-title .ic{font-size:15px}
.sec-desc{margin:0 0 12px; font-size:12.5px; color:var(--muted)}
.sec-desc b{color:var(--ink)}

.scroll-list{max-height:260px; overflow-y:auto; padding-right:4px; margin-bottom:14px}
.scroll-list--tall{max-height:none}
.empty{color:var(--muted); font-size:12.5px; padding:10px 2px}

/* ── カード ───────────────────────────────── */
.card{
  border:1px solid var(--line); border-radius:5px; padding:10px 12px;
  margin-bottom:8px; background:#fff;
}
.card h3{margin:0 0 4px; font-size:13.5px; font-weight:700; line-height:1.5}
.card .meta{margin:0 0 8px; font-size:11.5px; color:var(--muted)}
.card .acts{margin:0; display:flex; flex-wrap:wrap; gap:6px}
.card .approx{color:#a5721b}
.card--media{border-left:3px solid var(--accent)}
.card--event{border-left:4px solid var(--sev,#7a8b99)}
.badges{margin:0 0 6px; display:flex; flex-wrap:wrap; gap:5px}
.badge{
  display:inline-block; color:#fff; font-size:10.5px; font-weight:700;
  padding:2px 7px; border-radius:3px; letter-spacing:.02em;
}
.badge--ok{background:var(--sev-resolved)}
.badge--warn{background:#fff; color:#a5721b; border:1px solid #e3c07a}

.btn{
  border:1px solid #cfd7de; background:#f6f8fa; color:var(--ink);
  border-radius:4px; padding:5px 11px; font-size:12px; cursor:pointer;
  text-decoration:none; display:inline-block; line-height:1.5;
}
.btn:hover{background:#eceff3}
.btn--sm{padding:4px 9px; font-size:11.5px}
.btn--ghost{background:#fff}

/* ── 件数タイル ───────────────────────────── */
.counts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.count{
  border:1px solid var(--line); background:#fff; border-radius:5px;
  padding:8px 4px 6px; text-align:center; cursor:pointer;
}
.count:hover{background:#f6f8fa}
.count b{display:block; font-size:22px; line-height:1.25; font-weight:700}
.count span{display:block; font-size:11px; color:var(--muted)}
.count[data-sev="emergency"] b{color:var(--sev-emergency)}
.count[data-sev="high"] b{color:var(--sev-high)}
.count[data-sev="medium"] b{color:var(--sev-medium)}
.count[data-sev="resolved"] b{color:var(--sev-resolved)}
.count--on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}

/* ── フィルタ ─────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px}
.filters select,.filters input[type="search"]{
  flex:1 1 116px; min-width:0; padding:5px 8px; font-size:12.5px;
  border:1px solid #cfd7de; border-radius:4px; background:#fff; color:var(--ink);
}
.filters--row2{align-items:center}
.chk{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); flex:0 0 auto}

#side-foot{padding:14px 16px 22px; font-size:11.5px; color:var(--muted)}
#side-foot p{margin:0 0 5px}
/* 報道コンテンツの扱い・問い合わせ先。区切り線を入れて他の注記と混ざらないようにする */
#side-foot .foot-note{margin-top:9px; padding-top:9px; border-top:1px solid var(--line); line-height:1.55}
#side-foot .foot-note + .foot-note{margin-top:5px; padding-top:0; border-top:0}

/* ── MapLibre のコントロール微調整 ─────────────── */
.maplibregl-ctrl-attrib{font-size:11px}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale{
  background:rgba(255,255,255,.86); border-color:#7d8b99; color:#33404d; font-size:11px;
}

/* ── 狭い画面：縦積み ─────────────────────── */
@media (max-width:900px){
  body{overflow:auto}
  #app{flex-direction:column; height:auto}
  #main{height:64vh}
  #side{flex:1 1 auto; width:100%; border-left:0; border-top:1px solid var(--line); overflow:visible}
  .panel{min-width:200px; max-width:calc(100% - 24px)}
}