/* 1. ページ全体ではなく、map-container 以外を禁止 */
body > *:not(#map-container):not(#overlayPanel):not(.offcanvas) {
  touch-action: none;
}

/* 2. 地図コンテナ内だけピンチ／パンを許可 */
#map-container, 
#map-container object {
  touch-action: pinch-zoom pan-x pan-y;
}

/* ------------------------------------------------------------
 * Full‑screen map area
 * ----------------------------------------------------------*/
#map-container {
  position: fixed;
  inset: 0;              /* 画面いっぱい */
  overflow: hidden;
  cursor: grab;
}
#map-container:active { cursor: grabbing; }
#map-container object {
  width: 100%;
  height: 100%;
  pointer-events: all;
}

/* Zoom control buttons */
#zoomControls .btn { width: 48px; }

/* ------------------------------------------------------------
 * Overlay panel (title + legend)
 * ----------------------------------------------------------*/
#overlayPanel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  /* 画面幅に応じて可変。余白 0.5rem を残して広げる */
  max-width: min(90vw, 420px);
  padding: 0.85rem 1rem;
  z-index: 1100;
}
#overlayPanel h1 {
  font-size: clamp(0.9rem, 3.5vw, 1.05rem); /* 画面幅で自動縮小 */
  line-height: 1.1;
  white-space: nowrap;   /* 改行させない */
  overflow: visible;     /* 省略もしない */
}

/* Legend inside overlay */
#legend {
  display: flex;
  flex-wrap: nowrap !important; /* 強制 1 行 */
  gap: 2px;                      /* 余白最小化 */
  font-size: clamp(0.7rem, 2.8vw, 0.9rem); /* 画面幅で自動縮小 */
  line-height: 1;
  overflow-x: auto;              /* はみ出し時スクロール */
  scrollbar-width: none;         /* Firefox 非表示 */
}
#legend::-webkit-scrollbar { display: none; }
#overlayPanel .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 0.25rem;
  white-space: nowrap;
}
#overlayPanel .legend-color {
  width: 12px;
  height: 12px;
  border: 1px solid #aaa;
  display: inline-block;
}

/* ------------------------------------------------------------
 * Hover popup (desktop only)
 * ----------------------------------------------------------*/
#hoverInfo {
  position: absolute;
  max-width: 240px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
}

/* ------------------------------------------------------------
 * Off‑canvas bottom sheet
 * ----------------------------------------------------------*/
.offcanvas-bottom { height: 80vh !important; }

/* ------------------------------------------------------------
 * List‑group hover effect
 * ----------------------------------------------------------*/
.list-group-item {
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.list-group-item:hover {
  background: #f1f1f1;
  transform: scale(1.02);
}

/* ------------------------------------------------------------
 * Colour definitions (legend & map)
 * ----------------------------------------------------------*/
.bg-gray { background: #ddd; }
.bg-1    { background: #ffe5e5; }
.bg-2    { background: #ffb3b3; }
.bg-3    { background: #ff8080; }
.bg-4    { background: #ff4d4d; }
.bg-5    { background: #c00000; }

/* ------------------------------------------------------------
 * Responsive tweaks
 * ----------------------------------------------------------*/
@media (max-width: 768px) {
  /* 追加調整があればここに */
}
@media (max-width: 576px) {
  #overlayPanel {
    max-width: 260px;
    padding: 0.75rem;
  }
  #overlayPanel h1 { font-size: 0.9rem; }
}