* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font: 14px/1.4 -apple-system, 'Hiragino Sans', 'Noto Sans CJK JP', sans-serif;
}

#map { position: absolute; inset: 0; }

#panel {
  position: absolute; top: 12px; right: 12px;
  width: 260px; max-height: calc(100% - 24px);
  padding: 14px;
  background: rgba(255,255,255,0.94);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  overflow-y: auto;
}

#panel h1 {
  margin: 0 0 10px; font-size: 18px;
}
#panel h1 small { font-size: 12px; color: #888; font-weight: normal; }

.layers label {
  display: block; padding: 4px 0;
  cursor: pointer;
}
.layers small { color: #888; font-size: 11px; }
.layers input { margin-right: 6px; }

.opacity {
  margin: 10px 0; font-size: 12px; color: #666;
  display: flex; align-items: center; gap: 8px;
}
.opacity input { flex: 1; }

.toggles {
  margin: 8px 0; font-size: 13px;
  padding-top: 8px; border-top: 1px solid #ddd;
}
.toggles label { display: block; padding: 3px 0; cursor: pointer; }
.toggles small { color: #888; font-size: 11px; }
.toggles input { margin-right: 6px; }

#filters {
  margin: 8px 0; padding-top: 8px;
  border-top: 1px solid #ddd; font-size: 12px;
}
#filters summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
#filters summary small { color: #888; font-size: 11px; }
.filter-row {
  margin: 6px 0; color: #888;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px;
}
.filter-row.active { color: #2c5aa0; font-weight: 500; }
.filter-row input { width: 100%; grid-column: 1 / -1; }
.filter-row .fval { font-variant-numeric: tabular-nums; }
#filter-reset {
  margin-top: 6px; padding: 3px 10px;
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 11px;
}
#filter-count { margin-left: 8px; font-size: 11px; color: #888; }

#legend {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 12px;
}
.legend-title { font-weight: bold; margin-bottom: 6px; }
.swatch { display: flex; align-items: center; margin: 2px 0; }
.swatch i {
  display: inline-block; width: 20px; height: 14px;
  margin-right: 6px; border: 1px solid rgba(0,0,0,0.2);
}

.note {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 11px; color: #888;
}
.note a { color: #2c5aa0; }

/* popup */
.maplibregl-popup-content { padding: 10px 12px; }
.popup { border-collapse: collapse; }
.popup th {
  text-align: left; padding: 2px 10px 2px 0;
  font-weight: 600; color: #555; font-size: 12px;
  vertical-align: top; white-space: nowrap;
}
.popup td { padding: 2px 0; font-size: 13px; }
.popup small { color: #999; }
.popup .sep td { border-top: 1px solid #ddd; padding: 4px 0 0; }

@media (max-width: 600px) {
  #panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; max-height: 40vh;
    border-radius: 12px 12px 0 0;
  }
}