:root {
    --bg: #f6f7fb;
    --panel-bg: #ffffff;
    --stroke: #3669c9;
    --fill: #e3eefc;
    --fill-hover: #cfe0fb;
    --fill-selected: #ffd54e;
    --shadow: 0 4px 16px rgba(0,0,0,0.08);
}
body {
    margin: 0;
    background: var(--bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
.container {
    max-width: 960px;
    margin: 24px auto;
    padding: 0 16px;
}
h1 { font-size: 20px; margin: 0 0 12px; }

#map {
    background: var(--panel-bg);
    box-shadow: var(--shadow);
    border-radius: 8px;
    overflow: hidden;
    position: relative; /* メニュー位置の基準 */
}

/* 地図見た目 */
.prefecture {
    /*fill: var(--fill);*/
    stroke: var(--stroke);
    stroke-width: 0.8px;
    vector-effect: non-scaling-stroke;
}
.prefecture:hover {
    fill: var(--fill-hover);
    cursor: pointer;
}
.prefecture.selected {
    fill: var(--fill-selected) !important;
}
.graticule {
    fill: none;
    stroke: #cccccc;
    stroke-width: 0.5px;
    stroke-dasharray: 2 2;
    pointer-events: none;
    opacity: 0.6;
    vector-effect: non-scaling-stroke;
}

/* メニュー */
.menu {
    position: absolute; /* #mapを基準に配置 */
    background: #ffffff;
    border: 1px solid #e1e5ee;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 8px;
    min-width: 180px;
    z-index: 10;
    display: none; /* 初期は非表示 */
}
.menu h3 {
    margin: 0 0 8px;
    font-size: 14px;
}
.menu ul {
    list-style: none;
    padding: 0; margin: 0;
}
.menu li {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
}
.menu li a {
    color: #1f3b8f;
    text-decoration: none;
}
.menu li:hover {
    background: #f5f7ff;
    cursor: pointer;
}
.legend {
    font-size: 12px;
    fill: #555;
}