/* 地図・地域ページ。既存サイトの配色（焦げ茶・生成り）に合わせる。 */
:root {
    --area-ink: #3b2a20;
    --area-brown: #4a2f22;
    --area-accent: #76553d;
    --area-pod: #a8642a;
    --area-line: #e2d8ca;
    --area-panel: #f5f1eb;
    --area-muted: #6f6158;
}

.area-heading .underlined-link { display: inline-block; margin-top: 4px; }
.area-jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.area-jump a { color: var(--area-brown); text-underline-offset: 5px; }

/* 地図 */
.area-map { margin: 8px 0 32px; }
.area-map-canvas {
    height: min(68vh, 600px);
    min-height: 320px;
    border: 1px solid var(--area-line);
    border-radius: 6px;
    background: var(--area-panel);
}
.area-map-canvas:focus-visible { outline: 2px solid var(--area-accent); outline-offset: 3px; }
.area-map-status { margin: 10px 0 0; color: var(--area-muted); font-size: .9rem; }

.area-map-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 24px;
    margin: 0 0 14px;
    padding: 16px 20px;
    background: var(--area-panel);
    border: 1px solid var(--area-line);
    border-radius: 6px;
}
.area-map-filter fieldset { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.area-map-filter legend { margin-bottom: 6px; padding: 0; font-size: .85rem; color: var(--area-muted); }
.area-map-filter label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--area-muted); }
.area-map-filter select { min-width: 9em; padding: 7px 8px; border: 1px solid var(--area-line); border-radius: 4px; background: #fff; color: var(--area-ink); font: inherit; font-size: .95rem; }
.area-map-check { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--area-ink) !important; font-size: .95rem !important; cursor: pointer; }
.area-map-check input { width: 18px; height: 18px; accent-color: var(--area-brown); }
.area-map-filter button {
    margin-left: auto;
    padding: 9px 16px;
    border: 1px solid var(--area-brown);
    border-radius: 4px;
    background: var(--area-brown);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.area-map-filter button:hover { background: var(--area-accent); border-color: var(--area-accent); }
.area-map-filter :focus-visible { outline: 2px solid var(--area-accent); outline-offset: 2px; }

/* 凡例のピン：専門店は塗りつぶし、体験は輪。色だけに頼らず形でも区別する。 */
.area-pin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; flex-shrink: 0; }
.area-pin-shop { background: var(--area-brown); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--area-line); }
.area-pin-experience { background: #fffaf3; border: 3px solid var(--area-pod); width: 14px; height: 14px; }
.area-map-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; font-size: .9rem; color: var(--area-muted); }
.area-map-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* 地図の下の一覧 */
.area-map-results { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--area-line); }
.area-map-result { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--area-line); position: relative; }
.area-map-result::before { content: ""; position: absolute; left: 2px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--area-brown); }
.area-map-result-experience::before { background: #fffaf3; border: 3px solid var(--area-pod); width: 8px; height: 8px; }
.area-map-result a { color: var(--area-ink); font-weight: 600; text-underline-offset: 4px; }
.area-map-result-meta { grid-column: 1; color: var(--area-muted); font-size: .85rem; }
.area-map-result-show { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 10px; border: 1px solid var(--area-line); border-radius: 4px; background: #fff; color: var(--area-brown); font: inherit; font-size: .8rem; cursor: pointer; }
.area-map-result-show:hover { border-color: var(--area-accent); }
.area-map-result-more { padding: 12px 0; color: var(--area-muted); font-size: .9rem; }

/* 地図のポップアップ */
.area-popup { min-width: 180px; }
.area-popup p { margin: 0; }
.area-popup-label { color: var(--area-muted); font-size: .75rem; }
.area-popup-name { display: block; margin: 2px 0 4px; color: var(--area-brown); font-weight: 600; font-size: .95rem; }
.area-popup-place { color: var(--area-muted); font-size: .8rem; }

/* 地域ページの一覧 */
.area-section { margin: 40px 0; }
.area-section > h2 { margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--area-line); }
.area-city { margin: 24px 0 4px; font-size: 1rem; color: var(--area-muted); font-weight: 600; }
.area-places { list-style: none; margin: 0 0 16px; padding: 0; }
.area-place { padding: 14px 0; border-bottom: 1px solid var(--area-line); }
.area-place p { margin: 4px 0 0; color: var(--area-muted); font-size: .9rem; line-height: 1.7; }
.area-place-name { margin-right: 10px; color: var(--area-ink); font-weight: 600; font-size: 1.05rem; text-underline-offset: 4px; }
.area-tag { display: inline-block; margin: 2px 6px 0 0; padding: 1px 8px; border: 1px solid var(--area-line); border-radius: 999px; font-size: .75rem; color: var(--area-accent); vertical-align: 2px; }
.area-tag-experience { border-color: #e8cdb2; color: var(--area-pod); }

/* 地方別の都道府県リンク */
.area-regions { margin: 48px 0; }
.area-regions > h2 { margin: 0 0 16px; }
.area-region-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 32px; margin: 8px 0 40px; }
.area-region h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--area-line); font-size: 1rem; }
.area-region ul { list-style: none; margin: 0; padding: 0; }
.area-region li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.area-region a { color: var(--area-ink); text-underline-offset: 4px; }
.area-count { color: var(--area-muted); font-size: .8rem; white-space: nowrap; }

.area-note { margin: 24px 0; color: var(--area-muted); font-size: .85rem; line-height: 1.8; }

@media (max-width: 700px) {
    .area-map-filter { padding: 14px; gap: 12px 16px; }
    .area-map-filter button { margin-left: 0; width: 100%; }
    .area-map-canvas { height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
    .leaflet-fade-anim .leaflet-popup, .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
}