/* 第3工程 UX：ページスクロールの復旧とピンの集約 */
html{scroll-behavior:smooth}
body{overflow-y:auto!important}
.app-container{align-items:flex-start!important;overflow:visible!important}
/* 右パネル内に独立スクロールを作らず、ページ全体を自然に上下移動する */
.side-panel{max-height:none!important;height:auto!important;min-height:0!important;overflow:visible!important;align-self:flex-start!important}
.panel-view{min-width:0}
.municipality-directory-grid{max-height:none!important;overflow:visible!important}
/* デスクトップでは地図を隣に置いたまま記事・ランキングを読める */
@media(min-width:851px){.map-section{position:sticky!important;top:14px;align-self:flex-start!important;height:min(74vh,760px)!important;min-height:490px}}
/* 凡例14件よりも地域フィルターの方が選びやすいため、地図の上の重複UIを隠す */
.legend-bar{display:none!important}
.region-cluster-pin{border:0!important;background:transparent!important;display:flex!important;align-items:center;justify-content:center}
.region-cluster-pin>div{display:none}
.region-cluster-pin .cluster-count,.region-cluster-pin .cluster-label{display:block;text-align:center}
.region-cluster-pin{background:#184b6c!important;color:white!important;border:3px solid #fff!important;border-radius:50%!important;box-shadow:0 4px 16px rgba(11,48,79,.27)!important;font-weight:800;cursor:pointer}
.region-cluster-pin .cluster-count{font-size:18px;line-height:1.25;margin-top:7px}
.region-cluster-pin .cluster-label{font-size:9px;white-space:nowrap;line-height:1.5}
.town-label-pin{display:flex!important;justify-content:center;align-items:center;border:0!important;background:none!important;}
.town-label-pin span{display:block;background:#fff;border:2px solid #246f94;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:850;color:#174461;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.town-label-pin.is-selected span{background:#174461;color:white;border-color:#f6c65c;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.town-dot-pin{cursor:pointer}
.map-usage-note{position:absolute;left:12px;bottom:12px;z-index:500;pointer-events:none;max-width:calc(100% - 24px);margin:0;background:rgba(255,255,255,.94);color:#24536b;border:1px solid #d8e7ef;border-radius:12px;padding:7px 11px;font-size:11px;line-height:1.4;box-shadow:0 2px 12px rgba(15,50,70,.08)}
.map-touch-toggle{position:absolute;z-index:650;right:12px;bottom:55px;padding:9px 13px;border-radius:12px;border:1px solid #b3d6e8;background:#fff;color:#184b6c;font-weight:800;box-shadow:0 2px 8px #16416122;cursor:pointer}
.map-touch-toggle[hidden]{display:none!important}
.visually-hidden{position:absolute!important;overflow:hidden!important;clip:rect(0,0,0,0);height:1px!important;width:1px!important;white-space:nowrap}
#map{overscroll-behavior:auto}
#map.map-pass-through{touch-action:pan-y!important}
@media(max-width:850px){
  .app-container{flex-direction:column!important;align-items:stretch!important}
  .map-section{position:relative!important;width:100%;height:55vh!important;min-height:330px!important;max-height:510px!important}
  .side-panel{width:100%!important}
  .map-usage-note{font-size:10px;bottom:9px}
  .map-touch-toggle{bottom:57px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* D17: map intro occupies a whole row; otherwise it becomes a flex sibling
   and squeezes #map to almost zero width on desktop. */
.app-container { flex-wrap: wrap; }
.app-container > p:first-child { flex: 0 0 100%; width: 100%; }
.app-container > .map-section { flex: 1 1 0%; min-width: 0; }
.app-container > .side-panel { flex: 0 0 410px; max-width: 100%; }
/* The unavailable-map message must remain visible (not clipped by a fixed-height frame). */
.map-section.offline-map-section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  overflow: visible !important;
}
.map-section.offline-map-section #map { width: 100% !important; height: auto !important; min-height: 0 !important; }
.map-section.offline-map-section .map-usage-note { display: none !important; }
@media (max-width: 850px) {
  .app-container { flex-wrap: nowrap; }
  .app-container > p:first-child { flex: 0 0 auto; }
  .app-container > .map-section { flex: 0 0 auto; width: 100%; }
  .app-container > .side-panel { flex: 0 0 auto; width: 100%; max-width: none; }
  .map-section.offline-map-section #map > [role="status"] { margin: 14px !important; }
}

/* D18 mobile hotfix: guarantee measurable map height on mobile WebViews. */
@media (max-width: 850px) {
  .app-container > .map-section:not(.offline-map-section) {
    height: 55vh !important;
    height: 55dvh !important;
    min-height: 380px !important;
    max-height: 550px !important;
    display: block;
  }
  .map-section:not(.offline-map-section) > #map {
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:380px;
  }
}
/* Stable fallback when remote Leaflet or GSI tile network is blocked. */
.map-section.offline-map-section { display:block; }
.map-section.offline-map-section #map {padding:12px !important; min-height:0 !important; background:#eef7fa;}
.offline-map-hint {padding:10px 12px;background:#fff;border-radius:12px;border:1px solid #c5dee9;color:#1c4c64;font-size:12px;line-height:1.6}
.offline-map-hint strong {display:block;font-size:14px}
.offline-map-hint p {margin:3px 0 0}
.offline-region-map {position:relative;height:360px;max-height:57vh;margin:10px auto 8px;border:1px solid #bfdde9;border-radius:14px;background:radial-gradient(ellipse at 60% 50%,#d4ecf3,#e9f5fb 74%);overflow:hidden}
.offline-region-map::before {content:"北海道の振興局・概略位置";position:absolute;top:10px;left:12px;color:#507f95;font-size:11px;letter-spacing:.04em}
.offline-region-pin {position:absolute;transform:translate(-50%,-50%);border:2px solid white;border-radius:999px;background:var(--region-color,#1b607e);color:white;padding:5px 8px;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 2px 8px #1a567b36;z-index:1}
.offline-region-pin:focus-visible {outline:3px solid #f2a63b;outline-offset:2px;z-index:5}
.offline-map-actions {display:flex;gap:9px;flex-wrap:wrap}
.offline-map-actions button {flex:1 1 160px;border-radius:9px;border:1px solid #9cbccc;padding:9px 10px;font-size:12px;font-weight:700;color:#184b6b;background:#fff;cursor:pointer}
.offline-map-actions button:first-child {background:#245f80;color:white;border-color:#245f80}
@media(max-width:450px){.offline-region-map{height:300px}.offline-region-pin{font-size:9px;padding:4px 6px}.offline-map-hint p{font-size:11px}}