.mm { --pad:12px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif; }
.mm-controls { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin: 0 0 12px; }
.mm-metrics button { border:1px solid #ccc; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; }
.mm-metrics button.is-active { background:#2f80ed; color:#fff; border-color:#2f80ed; }
.mm-year { display:flex; align-items:center; gap:8px; }
.mm-year input[type=range] { width:220px; }
.mm-legend { margin-left:auto; font-size:12px; opacity:.8; }

.mm-body { display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
@media (max-width: 900px) { .mm-body { grid-template-columns: 1fr; } }

.mm-mapwrap { position:relative; }
.mm-svgholder { width:100%; aspect-ratio: 1 / 1; position:relative; background:#fafafa; border:1px solid #eee; border-radius:12px; }
.mm-svgholder svg.mm-map { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.mm-tooltip { position:absolute; pointer-events:none; background:rgba(0,0,0,.8); color:#fff; padding:6px 8px; border-radius:6px; font-size:12px; z-index:5; max-width:min(60vw, 320px); }

.mm-table { width:100%; border-collapse: collapse; }
.mm-table th, .mm-table td { border:1px solid #e5e7eb; padding:6px 8px; }
.mm-table thead th { background:#f5f7fa; text-align:left; }
.mm-table .num { text-align:right; }
.mm-table tfoot tr { background:#fafafa; font-weight:600; }
.mm-table tr.active td { outline:2px solid #ffda6b; outline-offset:-2px; }

.mm path.pref { fill:#ecf0f1; stroke:#fff; stroke-width:.8; vector-effect: non-scaling-stroke; }
.mm path.pref.active { outline:2px solid #ffda6b; }