:root{
  --primary:#0b57d0;
  --primary-600:#0a4ec0;
  --primary-700:#0949aa;
  --border:#d9d9d9;
  --muted:#777;
  --bg:#fff;
}

html, body {
  height:100%;
  margin:0;
  padding:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:#222;
  background:#fff;
}

/* ===== レイアウト（左=map / 右=list） ===== */
#app {
  display:grid;
  grid-template-columns: 1fr 380px;     /* 左マップを広く、右サイドバーを固定幅 */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "controls controls"
    "map sidebar";
  height:100svh;
}
#controls { grid-area:controls; position:sticky; top:0; z-index:3; background:#fff; border-bottom:1px solid var(--border); }
#map      { grid-area:map; min-width:0; }
#sidebar  { grid-area:sidebar; min-width:0; border-left:1px solid var(--border); background:#fff; overflow:auto; }

/* ===== ツールバー ===== */
.toolbar { padding:12px 14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.toolbar .group { display:flex; gap:8px; align-items:center; }
.toolbar label { font-size:14px; color:#333; font-weight:600; }
.toolbar select,
.toolbar input[type="text"],
.toolbar input[type="date"] {
  padding:9px 12px;
  font-size:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
.toolbar input[type="text"]{ min-width: 240px; }
.toolbar button {
  padding:10px 14px;
  border:1px solid #bbb;
  background:#fff;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.toolbar button:hover { background:#f4f6f8; }

.btn-ghost { background:#fff; border:1px solid var(--border); color:#222; border-radius:10px; padding:8px 12px; }
.btn-ghost:hover { background:#f6f7f9; }

.small { font-size:12px; }
.muted { color:var(--muted); }
.hidden { display:none !important; }
.ml-auto { margin-left:auto; }

/* ===== CTA：目撃情報を報告（強調） ===== */
.cta-report {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:2px solid var(--primary);
  border-radius:14px;
  background:#fff;
  color:var(--primary);
  font-weight:900;
  cursor:pointer;
  box-shadow:0 2px 0 0 var(--primary);
  transition: transform .05s ease, box-shadow .1s ease, background .15s ease;
  user-select:none;
}
.cta-report .icon { font-size:18px; }
.cta-report:hover { background:#eef5ff; box-shadow:0 4px 0 0 var(--primary-600); }
.cta-report:active { transform: translateY(1px); box-shadow:0 2px 0 0 var(--primary-700); }
.cta-report:focus-visible { outline:3px solid #99c2ff; outline-offset:2px; }

/* ===== 凡例・件数 ===== */
.legend { display:flex; align-items:center; gap:14px; padding:0 14px 10px; flex-wrap: wrap; }
.dot { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid #444; vertical-align:middle; }
.dot.red { background:#e53935; }
.dot.yellow { background:#fbc02d; }
.dot.blue { background:#1e88e5; }
.dot.gray { background:#9e9e9e; }
#viewCount { margin-left:auto; }

/* ===== サイドバー（ヘッダーは無し） ===== */
.list { padding:10px; }
.item { border:1px solid var(--border); border-radius:14px; padding:10px; margin:10px 6px; cursor:pointer; background:#fff; transition: box-shadow .15s ease, transform .05s ease; }
.item:hover { box-shadow:0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.item .row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.badge { font-size:12px; padding:3px 8px; border-radius:999px; background:#f5f5f5; border:1px solid var(--border); }
.pill { font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid #ccc; background:#fff; }
.area { color:#333; font-weight:600; }
.date { color:#111; font-weight:700; font-size:15px; }
.score { color:#111; font-weight:700; }
.kind { color:#111; font-weight:600; }
.reason { color:#444; margin-top:6px; font-size:13.5px; line-height:1.5; white-space: pre-wrap; }
.img-thumb { width:100%; max-height:220px; object-fit:cover; border-radius:10px; border:1px solid var(--border); margin-top:8px; background:#f6f7f9; }
.none { color:var(--muted); font-style:italic; }

/* ===== モーダル ===== */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:999; }
.modal { width:min(720px,94vw); max-height:92vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:0 12px 38px rgba(0,0,0,.28); }
.modal header { padding:16px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal header h3 { margin:0; font-size:20px; }
.icon-btn { background:#fff; border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer; }
.icon-btn:hover { background:#f6f7f9; }
.modal .content { padding:16px 18px; display:grid; gap:16px; }
.modal .row { display:grid; gap:8px; }
.modal label { font-size:14px; color:#111; font-weight:700; }
.modal input[type="text"],
.modal select,
.modal textarea,
.modal input[type="datetime-local"]{
  width:100%; padding:10px 12px; border:1px solid #cfd4dc; border-radius:10px; font-size:15px; background:#fcfdff;
}
.modal textarea { min-height:120px; }
.modal footer { position:sticky; bottom:0; background:#fff; display:flex; gap:10px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--border); }
.thumb { width:140px; height:100px; object-fit:cover; border:1px solid var(--border); border-radius:8px; background:#f6f7f9; }
.thumb-line { display:flex; align-items:center; gap:10px; }

/* ===== グリッド小画面 ===== */
@media (max-width: 1100px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 260px 1fr;
    grid-template-areas:
      "controls"
      "sidebar"
      "map";
  }
  #sidebar { border-left:none; border-top:1px solid var(--border); }
}