:root {
      --teal-900:#063f3b;
      --teal-800:#0b4f4a;
      --teal-600:#14756d;
      --teal-500:#1a867d;
      --teal-050:#eef6f5;
      --line:#e6ecea;
      --line-strong:#d5e0dd;
      --text:#0f172a;
      --muted:#64748b;
      --radius:14px;
      --radius-sm:9px;
      --shadow:
        0 8px 24px rgba(15,23,42,.06),
        0 1px 3px rgba(15,23,42,.05);
      --shadow-lift:
        0 14px 28px rgba(15,23,42,.10),
        0 2px 6px rgba(15,23,42,.06);

      /* ---- 地図上の地点マーカー ----
         マーカーの見た目はここだけで決める（app.txt がこの値を読み取って描画する）。
         単位なしの数値はピクセル。色を変えると、凡例・ランキング・地点の詳細の色も同じ色に変わる */
      --spot-fill-3:#ef4444;                    /* 塗り: 最優先 */
      --spot-fill-2:#fb923c;                    /* 塗り: 優先度高 */
      --spot-fill-1:#facc15;                    /* 塗り: 優先度中 */
      --spot-fill-0:#94a3b8;                    /* 塗り: 区域外 */
      --spot-radius-3:9;                        /* 半径: 最優先 */
      --spot-radius-2:7;                        /* 半径: 優先度高 */
      --spot-radius-1:5;                        /* 半径: 優先度中 */
      --spot-radius-0:4;                        /* 半径: 区域外 */
      --spot-ring-color:#fff;                   /* 内側の枠線（白）の色 */
      --spot-ring-width:2;                      /* 内側の枠線の太さ */
      --spot-outline-color:rgba(15,23,42,.85);  /* 外側の枠線（濃紺）の色 */
      --spot-outline-width:1.5;                 /* 外側の枠線の太さ。0にすると外側の枠線と影を描かない */
      --spot-shadow-color:rgba(15,23,42,.5);    /* 影の色 */
      --spot-shadow-blur:4;                     /* 影のぼかし */
      --spot-shadow-offset-y:1;                 /* 影を下にずらす量 */
    }

    * {
      box-sizing:border-box;
    }

    /* display指定がhidden属性を上書きしてしまうのを防ぐ */
    [hidden] {
      display:none !important;
    }

    ::selection {
      background:rgba(26,134,125,.20);
    }

    :focus-visible {
      outline:2px solid var(--teal-500);
      outline-offset:2px;
    }

    /* 細いスクロールバー */
    .rank-list,
    .legend-body,
    #rainPanelBody {
      overscroll-behavior:contain;
    }

    .rank-list,
    .legend-body,
    #rainPanelBody {
      scrollbar-width:thin;
      scrollbar-color:#c3d3cf transparent;
    }

    .rank-list::-webkit-scrollbar,
    .legend-body::-webkit-scrollbar,
    #rainPanelBody::-webkit-scrollbar {
      width:8px;
    }

    .rank-list::-webkit-scrollbar-thumb,
    .legend-body::-webkit-scrollbar-thumb,
    #rainPanelBody::-webkit-scrollbar-thumb {
      border:2px solid transparent;
      border-radius:999px;
      background:#c3d3cf;
      background-clip:content-box;
    }

    .rank-list::-webkit-scrollbar-thumb:hover,
    .legend-body::-webkit-scrollbar-thumb:hover,
    #rainPanelBody::-webkit-scrollbar-thumb:hover {
      background:#a7bdb8;
      background-clip:content-box;
    }

    html,
    body {
      width:100%;
      height:100%;
      margin:0;
      overflow:hidden;
      color:var(--text);
      background:#f8fafc;
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans JP",
        sans-serif;
    }

    .shell {
      height:100vh;
      display:grid;
      grid-template-rows:64px minmax(0,1fr);
    }

    .header {
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
      padding:0 18px;
      background:
        radial-gradient(
          620px 220px at 12% 130%,
          rgba(26,134,125,.42),
          transparent 70%
        ),
        linear-gradient(135deg, var(--teal-900), #08201e);
      color:#fff;
      box-shadow:0 8px 24px rgba(6,63,59,.24);
      z-index:1000;
    }

    .header::after {
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:1px;
      background:
        linear-gradient(
          90deg,
          rgba(143,211,205,.55),
          rgba(143,211,205,0)
        );
    }

    .title {
      margin:0;
      font-size:19px;
      font-weight:900;
      letter-spacing:.03em;
      white-space:nowrap;
    }

    /* ロゴはヘッダー左端に置く */
    .brand {
      flex:0 0 auto;
      display:flex;
      align-items:center;
    }

    .brand-logo-box {
      height:42px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:4px 10px;
      border-radius:8px;
      background:#fff;
      box-shadow:0 2px 8px rgba(0,0,0,.14);
      overflow:hidden;
    }

    .brand-logo {
      display:block;
      height:100%;
      width:auto;
      max-width:180px;
      object-fit:contain;
      object-position:center;
    }

    .main {
      height:100%;
      min-height:0;
      display:grid;
      /* 左右は同じ幅にそろえる。「最低限これだけは必要」というpx下限と、広い画面でも肥大しすぎないためのpx上限を
         clamp()で両側から締め、余った分は中央の地図（1fr）に回す。 */
      grid-template-columns:
        clamp(256px, 18.5%, 296px)
        minmax(440px,1fr)
        clamp(256px, 18.5%, 296px);
      gap:9px;
      padding:9px;
      overflow:hidden;
      background:
        radial-gradient(
          900px 360px at 0% 0%,
          rgba(26,134,125,.13),
          transparent 55%
        ),
        radial-gradient(
          900px 360px at 100% 0%,
          rgba(143,211,205,.15),
          transparent 55%
        ),
        linear-gradient(180deg, #eef4f6 0%, #f8fafc 100%);
    }

    .panel {
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:var(--shadow);
      transition:box-shadow .2s ease, border-color .2s ease;
    }

    .scope-panel:hover,
    .route-panel:hover,
    .legend-panel:hover,
    .ranking:hover {
      border-color:var(--line-strong);
      box-shadow:var(--shadow-lift);
    }

    /* 余白（gap等）は画面の高さに合わせてJS（fitSidebar）が調整する。末尾の「PC幅」ブロックを参照 */
    .sidebar {
      height:100%;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .scope-panel,
    .route-panel,
    .legend-panel {
      flex:0 0 auto;
    }

    .rightbar {
      height:100%;
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    .ranking {
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    .panel-head {
      position:relative;
      flex:0 0 auto;
      padding:10px 13px 9px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, var(--teal-050), #fff);
    }

    .scope-head-toggle {
      display:none;
      position:absolute;
      top:8px;
      right:8px;
      width:26px;
      height:26px;
      align-items:center;
      justify-content:center;
      border:1px solid #d9e0e4;
      border-radius:8px;
      background:#fff;
      color:#64748b;
      cursor:pointer;
    }

    .scope-head-toggle svg { width:14px; height:14px }

    .scope-panel.is-collapsed .panel-body { display:none }

    .panel-body {
      padding:9px 13px 11px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .panel-title {
      position:relative;
      padding-left:10px;
      font-size:13px;
      font-weight:900;
      letter-spacing:.02em;
    }

    .panel-title::before {
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:3px;
      height:13px;
      margin-top:-6.5px;
      border-radius:999px;
      background:
        linear-gradient(180deg, var(--teal-500), var(--teal-800));
    }

    /* 見出し右横の説明ボタン（ⓘ）。既定では説明文を隠し、クリックした時だけポップオーバーで出す */
    .panel-title-row {
      display:flex;
      align-items:center;
      gap:5px;
    }

    .info-btn {
      flex:0 0 auto;
      width:16px;
      height:16px;
      display:grid;
      place-items:center;
      padding:0;
      border:0;
      border-radius:50%;
      background:rgba(100,116,139,.14);
      color:var(--muted);
      cursor:pointer;
      transition:color .15s ease, background .15s ease;
    }

    .info-btn svg {
      width:11px;
      height:11px;
    }

    .info-btn:hover,
    .info-btn[aria-expanded="true"] {
      color:var(--teal-800);
      background:rgba(26,134,125,.2);
    }

    /* overflow:hiddenな.panel内に置いてもポップオーバーが隠れないよう、
       position:fixedにしてJS側でボタン位置から座標を計算する（app.jsの info-btn 初期化を参照） */
    .info-pop {
      position:fixed;
      z-index:2000;
      width:min(260px, calc(100vw - 24px));
      padding:9px 11px;
      border:1px solid var(--line-strong);
      border-radius:10px;
      background:#fff;
      box-shadow:var(--shadow-lift);
      color:var(--muted);
      font-size:10.5px;
      font-weight:600;
      line-height:1.55;
    }

    .info-pop-h {
      display:block;
      margin-top:7px;
      color:var(--text);
      font-weight:900;
    }

    .info-pop ol,
    .info-pop ul {
      margin:2px 0 0;
      padding-left:1.4em;
    }

    .info-pop > ul:first-child {
      margin-top:0;
    }

    .info-pop li + li {
      margin-top:3px;
    }

    .info-pop-note {
      margin:7px 0 0;
    }

    .info-pop {
      overflow-y:auto;
    }

    .info-pop > .info-pop-h:first-child {
      margin-top:0;
    }

    .info-pop-levels b {
      color:var(--text);
    }

    .maplayer-head .info-btn {
      margin-left:-3px;
    }

    .info-pop a {
      color:var(--teal-600);
      font-weight:800;
    }

    .scope-field {
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width:0;
    }

    .scope-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin-top:8px;
    }

    #paneSel {
      display:flex;
      flex-direction:column;
    }

    #paneLoc {
      display:flex;
      flex-direction:column;
      gap:7px;
    }

    .scope-label {
      color:var(--muted);
      font-size:9.5px;
      font-weight:800;
      letter-spacing:.04em;
    }

    .scope-select {
      width:100%;
      min-width:0;
      padding:7px 9px;
      border:1px solid var(--line-strong);
      border-radius:var(--radius-sm);
      background:#fff;
      color:var(--text);
      font-size:12px;
      font-weight:700;
      font-family:inherit;
      cursor:pointer;
      transition:border-color .15s ease, box-shadow .15s ease;
    }

    select.scope-select {
      appearance:none;
      padding-right:26px;
      background-image:
        linear-gradient(45deg, transparent 50%, #7d938e 50%),
        linear-gradient(135deg, #7d938e 50%, transparent 50%);
      background-position:
        calc(100% - 14px) calc(50% + 1px),
        calc(100% - 9px) calc(50% + 1px);
      background-size:5px 5px, 5px 5px;
      background-repeat:no-repeat;
    }

    .scope-select::placeholder {
      color:#9aa9a6;
      font-size:11px;
      font-weight:600;
    }

    .scope-select:hover {
      border-color:var(--teal-500);
    }

    .scope-select:focus {
      outline:none;
      border-color:var(--teal-600);
      box-shadow:0 0 0 3px rgba(26,134,125,.16);
    }

    .scope-select:disabled {
      background-color:#f4f7f6;
      color:#94a3b8;
      cursor:not-allowed;
    }

    .scope-inline {
      display:flex;
      gap:6px;
      align-items:center;
      min-width:0;
    }

    .scope-inline > .scope-select {
      flex:1 1 auto;
    }

    .scope-inline > button {
      flex:0 0 auto;
    }

    .scope-note {
      color:var(--muted);
      font-size:10.5px;
      font-weight:700;
    }

    .scope-status {
      padding:6px 9px;
      border-radius:var(--radius-sm);
      background:#f4f7f6;
      color:#475569;
      font-size:10.5px;
      font-weight:700;
      line-height:1.5;
    }

    .scope-status[hidden] {
      display:none;
    }

    .scope-foot {
      display:flex;
      align-items:center;
      gap:7px;
      min-width:0;
    }

    .scope-summary {
      flex:1 1 auto;
      min-width:0;
      padding:7px 10px;
      border:1px solid rgba(26,134,125,.16);
      border-radius:var(--radius-sm);
      background:var(--teal-050);
      color:var(--teal-900);
      font-size:10.5px;
      font-weight:800;
      line-height:1.4;
    }

    .btn-ghost {
      flex:0 0 auto;
      padding:7px 10px;
      border:1px solid var(--line-strong);
      border-radius:var(--radius-sm);
      background:#fff;
      color:var(--muted);
      font-family:inherit;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
      transition:border-color .15s ease, color .15s ease;
    }

    .btn-ghost:hover {
      border-color:var(--teal-500);
      color:var(--teal-800);
    }

    /* セグメント切替（並び順など） */
    .segmented {
      flex:0 0 auto;
      display:inline-flex;
      padding:2px;
      border:1px solid var(--line-strong);
      border-radius:999px;
      background:#fff;
      white-space:nowrap;
    }

    .seg-btn {
      flex:0 0 auto;
      padding:3px 9px;
      border:0;
      border-radius:999px;
      background:transparent;
      color:var(--muted);
      font-family:inherit;
      font-size:10.5px;
      font-weight:800;
      line-height:1.5;
      white-space:nowrap;
      cursor:pointer;
      transition:background .15s ease, color .15s ease;
    }

    .seg-btn:hover {
      color:var(--teal-800);
    }

    .seg-btn.is-on {
      background:linear-gradient(135deg, var(--teal-500), var(--teal-800));
      color:#fff;
    }

    .rank-status {
      margin-top:8px;
      display:flex;
      align-items:center;
      gap:6px;
      padding:6px 8px;
      border:1px solid rgba(26,134,125,.16);
      border-radius:var(--radius-sm);
      background:var(--teal-050);
    }

    .rank-status-text {
      flex:1 1 auto;
      min-width:0;
      color:var(--teal-900);
      font-size:10.5px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .rank-status .legend-count {
      flex:0 0 auto;
      color:var(--teal-800);
      background:rgba(26,134,125,.16);
      font-size:10px;
    }

    .rank-list {
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      padding:7px 8px 9px;
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    /* flex:0 0 autoがないと、20件が縦方向に押し潰されて
       バッジや住所が見えなくなる。あふれた分はリスト側でスクロールさせる。 */
    .rank-row {
      flex:0 0 auto;
      position:relative;
      width:100%;
      display:grid;
      grid-template-columns:24px minmax(0,1fr) 10px;
      align-items:center;
      gap:7px;
      padding:6px 8px 6px 7px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
      color:inherit;
      text-align:left;
      text-decoration:none;
      font-family:inherit;
      cursor:pointer;
      overflow:hidden;
      transition:
        transform .16s ease,
        border-color .16s ease;
    }

    .rank-row::after {
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow:var(--shadow-lift);
      opacity:0;
      transition:opacity .16s ease;
      pointer-events:none;
    }

    .rank-row:hover::after {
      opacity:1;
    }

    /* 左端に優先度の色帯を出して、地図の色と対応させる */
    .rank-row::before {
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:3px;
      background:var(--rank-color);
    }

    .rank-row:hover {
      border-color:rgba(26,134,125,.42);
      transform:translateY(-1px);
    }

    .rank-badge {
      position:relative;
      width:24px;
      height:24px;
      display:grid;
      place-items:center;
      border-radius:7px;
      color:var(--rank-text, #fff);
      background:var(--rank-color);
      box-shadow:inset 0 0 0 1.5px var(--rank-deep);
      font-size:11px;
      font-weight:900;
      font-variant-numeric:tabular-nums;
      letter-spacing:-.03em;
      transition:transform .16s ease;
    }

    /* 上位3件は塗りで強調する */
    .rank-row.is-top .rank-badge {
      box-shadow:inset 0 0 0 1.5px var(--rank-deep), 0 4px 12px var(--rank-ring);
      font-size:12px;
    }

    .rank-row:hover .rank-badge {
      transform:scale(1.06);
    }

    /* 長い箇所名も全文読めるよう3行まで表示する（収録データは最も狭い列幅でも3行に収まる。念のため超過分は「…」で省略し、全文はホバーで表示） */
    .rank-title {
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      line-clamp:3;
      min-width:0;
      max-width:100%;
      font-size:12px;
      font-weight:900;
      line-height:1.3;
      overflow:hidden;
      overflow-wrap:anywhere;
    }

    .rank-address {
      display:block;
      min-width:0;
      max-width:100%;
      margin-top:1px;
      color:var(--muted);
      font-size:9px;
      font-weight:600;
      line-height:1.3;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    /* 優先度・テレマ走行量はプルダウン地点ポップアップ（.pp-rank/.pp-vol）と同じ
       「色つきピル」で見せ、それぞれ1行に収まる短い値だけを表示する（詳細な浸水深はポップアップ側で見る） */
    .rank-badges {
      margin-top:3px;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:5px;
      min-width:0;
      max-width:100%;
    }

    .rank-pri {
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:4px;
      padding:1px 7px 1px 6px;
      border-radius:999px;
      background:var(--rank-tint);
      color:var(--rank-deep);
      font-size:9.5px;
      font-weight:900;
      letter-spacing:.01em;
      white-space:nowrap;
    }

    .rank-pri::before {
      content:"";
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--rank-color);
      box-shadow:0 0 0 1.5px rgba(255,255,255,.9);
    }

    .rank-vol {
      flex:0 0 auto;
      padding:1px 7px;
      border-radius:999px;
      background:rgba(180,83,9,.14);
      color:#b45309;
      font-size:9px;
      font-weight:800;
      white-space:nowrap;
    }

    .rank-dist {
      flex:0 0 auto;
      padding:1px 7px;
      border-radius:999px;
      background:rgba(67,56,202,.12);
      color:#4338ca;
      font-size:9px;
      font-weight:800;
      white-space:nowrap;
      margin-right:5px;  /* 住所の行の先頭に置くため、続く住所との間を空ける */
    }

    .rank-row > span:nth-child(2) {
      min-width:0;
      max-width:100%;
      overflow:hidden;
    }

    .rank-arrow {
      justify-self:end;
      color:#b3c2be;
      font-weight:900;
      transition:transform .16s ease, color .16s ease;
    }

    .rank-row:hover .rank-arrow {
      color:var(--teal-600);
      transform:translateX(2px);
    }

    .rank-empty {
      margin:auto 0;
      padding:20px 14px;
      border:1px dashed var(--line-strong);
      border-radius:12px;
      background:#fbfdfc;
      color:var(--muted);
      font-size:11px;
      font-weight:700;
      line-height:1.6;
      text-align:center;
    }

    .map-panel {
      position:relative;
      width:100%;
      height:100%;
      min-width:0;
      min-height:0;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:var(--shadow);
    }

    #riskMap {
      width:100%;
      height:100%;
    }

    /* ---- 地図を表示できないときのお詫び（地図枠いっぱい） ---- */
    .map-fatal {
      position:absolute;
      inset:0;
      z-index:1100;
      display:grid;
      place-items:center;
      padding:20px;
      background:var(--teal-050);
    }
    .map-fatal[hidden] {
      display:none;
    }
    .map-fatal-box {
      max-width:520px;
      text-align:center;
    }
    .map-fatal-title {
      margin:0 0 10px;
      color:var(--teal-900);
      font-size:17px;
      font-weight:800;
    }
    .map-fatal-text {
      margin:0 0 18px;
      color:var(--text);
      font-size:13px;
      line-height:1.85;
    }
    .map-fatal-btn {
      padding:11px 26px;
      border:none;
      border-radius:var(--radius-sm);
      background:var(--teal-600);
      color:#fff;
      font:inherit;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
    }
    .map-fatal-btn:hover {
      background:var(--teal-800);
    }

    /* ---- 読み込みエラーのお知らせ（地図上部の帯） ---- */
    .map-notice {
      position:absolute;
      top:56px;
      left:50%;
      z-index:1001;
      display:flex;
      align-items:flex-start;
      gap:8px;
      width:max-content;
      max-width:min(560px, calc(100% - 130px));
      padding:10px 10px 10px 14px;
      border:1px solid #f1d9a6;
      border-radius:var(--radius-sm);
      background:#fffaf0;
      box-shadow:var(--shadow-lift);
      transform:translateX(-50%);
    }
    .map-notice[hidden] {
      display:none;
    }
    .map-notice-text {
      margin:0;
      color:#5b4107;
      font-size:12.5px;
      font-weight:600;
      line-height:1.65;
    }
    .map-notice-text span {
      display:block;
    }
    .map-notice-close {
      flex:none;
      width:26px;
      height:26px;
      border:none;
      border-radius:50%;
      background:transparent;
      color:#5b4107;
      font-size:18px;
      line-height:1;
      cursor:pointer;
    }
    .map-notice-close:hover {
      background:#f6e7c4;
    }
    /* ---- 標準地図の色を抑える ----
       標準地図は道路の黄・緑・橙が鮮やかで、地点マーカー（赤・橙・黄）と紛れるため、彩度を落として
       背景に引かせる。地名や道路番号が読めるよう、白黒にはせず色味を少し残す */
    .basemap-std {
      filter:saturate(.35) brightness(1.04);
    }

    /* ---- 背景地図の切り替え（地図右上） ---- */
    .basemap-switch {
      position:absolute;
      top:12px;
      right:12px;
      z-index:1000;
      box-shadow:0 4px 14px rgba(15,23,42,.16);
    }
    .basemap-switch .seg-btn {
      padding:6px 13px;
      font-size:12px;
    }

    /* スマホ幅では上部に地域検索とレイヤーボタンがあるため、お知らせは凡例のすぐ上に出す。
       背景地図の切り替えは右上の一番上に横並びで置き、レイヤー／危険箇所ボタンはその下に並べる。
       3つを同じ幅（110px）・同じ高さ（40px）にそろえ、右上を1本の列として見せる */
    @media (max-width:980px) {
      .basemap-switch {
        top:12px;
        right:8px;
        width:110px;
        height:40px;
        border-color:#d9e0e4;
      }
      .basemap-switch .seg-btn {
        flex:1 1 0;
        padding:0;
        font-size:10.5px;
      }
      .map-notice {
        top:auto;
        bottom:62px;
        left:8px;
        right:8px;
        width:auto;
        max-width:none;
        transform:none;
      }
      .map-notice-text {
        flex:1;
      }
    }

    /* ---- クラスター（集合円） ---- */
    .cl {
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#fff;
      font-weight:800;
      font-variant-numeric:tabular-nums;
      letter-spacing:.01em;
      background:rgba(11,79,74,.62);
      border:1.5px solid rgba(255,255,255,.72);
      box-shadow:
        0 0 0 5px rgba(26,134,125,.13),
        0 2px 8px rgba(6,63,59,.20);
      text-shadow:0 1px 2px rgba(6,63,59,.45);
      transition:transform .14s ease, background .14s ease;
    }

    .cl:hover {
      background:rgba(11,79,74,.78);
      transform:scale(1.06);
    }

    .cl-s { width:28px; height:28px; font-size:11px; }
    .cl-m { width:34px; height:34px; font-size:12px; }
    .cl-l { width:42px; height:42px; font-size:13px; }
    .cl-x { width:50px; height:50px; font-size:14px; }

    /* Leaflet既定のアイコン背景（白い四角）を打ち消す */
    .cl-wrap,
    .marker-cluster,
    .marker-cluster div {
      background:none !important;
      border:0 !important;
      box-shadow:none !important;
    }

    /* ---- 凡例 ---- */

    .legend-panel {
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    .legend-head {
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      background:linear-gradient(180deg, var(--teal-050), #fff);
      color:var(--text);
      font-size:12.5px;
      font-weight:900;
      cursor:pointer;
      user-select:none;
    }

    .legend-head:hover {
      background:linear-gradient(180deg, #e4f1ef, #fff);
    }

    .legend-head-title {
      position:relative;
      flex:0 0 auto;
      padding-left:10px;
    }

    .legend-head-title::before {
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:3px;
      height:12px;
      margin-top:-6px;
      border-radius:999px;
      background:
        linear-gradient(180deg, var(--teal-500), var(--teal-800));
    }

    .legend-head .info-btn {
      margin-left:-3px;
      margin-right:auto;
    }

    .legend-head .legend-count {
      color:var(--teal-800);
      background:rgba(26,134,125,.14);
      font-size:10px;
    }

    .legend-chevron {
      width:13px;
      height:13px;
      flex:0 0 auto;
      color:var(--muted);
      transition:transform .18s ease;
    }

    .legend-body {
      min-height:0;
      overflow-y:auto;
      border-top:1px solid var(--line);
    }

    .legend-source-mark {
      margin-right:2px;
      color:var(--text);
      font-weight:900;
    }

    .legend-panel.is-collapsed .legend-body {
      display:none;
    }

    .legend-panel.is-collapsed .legend-chevron {
      transform:rotate(-90deg);
    }

    .legend-items {
      padding:5px 11px 6px;
      display:grid;
      gap:0;
    }

    .legend-item {
      display:grid;
      grid-template-columns:13px 12px minmax(0,1fr) auto;
      align-items:center;
      gap:8px;
      min-height:22px;
      cursor:pointer;
    }

    .toggle-row {
      min-height:28px;
    }

    .legend-item input {
      appearance:none;
      width:13px;
      height:13px;
      margin:0;
      border:1.5px solid #a9bbb6;
      border-radius:3px;
      background:#fff;
      cursor:pointer;
      display:grid;
      place-items:center;
      transition:background .12s ease, border-color .12s ease;
    }

    .legend-item input:checked {
      border-color:var(--teal-600);
      background:var(--teal-600);
    }

    .legend-item input:checked::after {
      content:"";
      width:6px;
      height:3px;
      border-left:2px solid #fff;
      border-bottom:2px solid #fff;
      transform:translateY(-1px) rotate(-45deg);
    }

    .legend-swatch {
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--swatch-fill);
      box-shadow:0 0 0 2px var(--swatch-ring) inset;
    }

    .legend-text {
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .legend-count {
      padding:1px 6px;
      border-radius:999px;
      color:var(--muted);
      background:#edf2f0;
      font-size:9.5px;
      font-weight:800;
      font-variant-numeric:tabular-nums;
    }

    /* チェックを外した行は「非表示中」を示すグレーアウト。件数は残す。 */
    .legend-row.is-off .legend-text,
    .legend-row.is-off .legend-swatch,
    .legend-row.is-off .legend-desc {
      opacity:.38;
    }

    .legend-row.is-off .legend-count {
      opacity:.55;
    }

    /* ---- ハンバーガーメニュー（PC・スマホ共通。ヘッダー左端のボタンで開く補助情報） ---- */

    .menu-btn {
      display:flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      flex:0 0 auto;
      padding:0;
      order:-1;
      border:0;
      border-radius:9px;
      background:rgba(255,255,255,.12);
      color:#fff;
      cursor:pointer;
      transition:background .15s ease;
    }

    .menu-btn:hover {
      background:rgba(255,255,255,.22);
    }

    .menu-btn svg {
      width:20px;
      height:20px;
    }

    .menu-backdrop {
      display:block;
      position:fixed;
      inset:0;
      z-index:1490;
      background:rgba(15,23,42,.32);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease;
    }

    .menu-backdrop.open {
      opacity:1;
      pointer-events:auto;
    }

    .menu-panel {
      display:flex;
      flex-direction:column;
      position:fixed;
      left:18px;
      top:72px;
      z-index:1500;
      width:min(460px, calc(100vw - 36px));
      max-height:calc(100vh - 88px);
      background:#fff;
      border-radius:14px;
      box-shadow:0 20px 44px rgba(15,23,42,.26);
      transform:translateY(-12px);
      opacity:0;
      pointer-events:none;
      visibility:hidden;
      transition:transform .18s ease, opacity .18s ease, visibility .18s;
    }

    .menu-panel.open {
      transform:translateY(0);
      opacity:1;
      pointer-events:auto;
      visibility:visible;
    }

    .menu-panel-head {
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:8px;
      padding:12px 14px;
      border-bottom:1px solid var(--line);
    }

    .menu-panel-title {
      font-weight:900;
      font-size:14px;
      color:var(--text);
    }

    #menuPanelClose {
      margin-left:auto;
    }

    .menu-panel-body {
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      padding:14px;
    }

    .menu-section + .menu-section {
      margin-top:16px;
      padding-top:16px;
      border-top:1px solid var(--line);
    }

    /* メニュー内の文字階層: 大見出し(h3) > 分類(h4) > 項目名(dt) > 本文(p/li/dd) > 注記(.menu-note) */
    .menu-section h3 {
      margin:0 0 8px;
      font-size:14px;
      font-weight:900;
      color:var(--teal-800);
    }

    .menu-section p,
    .menu-section li {
      margin:0;
      color:#475569;
      font-size:12.5px;
      line-height:1.6;
    }

    /* 大見出し(h3)の配下は一段下げ、見出しと中身の親子関係が左端の位置で分かるようにする */
    .menu-section > :not(h3) {
      margin-left:12px;
    }

    .menu-section p + p {
      margin-top:6px;
    }

    .menu-section li b {
      color:var(--text);
      font-weight:800;
    }

    .menu-section ul {
      margin:0;
      padding-left:18px;
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .menu-section a {
      color:var(--teal-600);
      font-weight:800;
    }

    .menu-note {
      margin-top:8px !important;
      color:var(--muted) !important;
      font-size:11.5px !important;
    }

    /* 出典一覧: 分類(h4) の下に項目名(dt)、その下に出典(dd)を、一段ずつ下げて並べる */
    .menu-source-lead {
      margin-bottom:12px !important;
    }

    .menu-source-group + .menu-source-group {
      margin-top:14px;
    }

    .menu-source-group h4 {
      position:relative;
      margin:0 0 8px;
      padding-left:10px;
      font-size:13px;
      font-weight:900;
      color:var(--text);
    }

    .menu-source-group h4::before {
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:3px;
      height:12px;
      margin-top:-6px;
      border-radius:999px;
      background:linear-gradient(180deg, var(--teal-500), var(--teal-800));
    }

    .menu-source-list {
      margin:0 0 0 10px;
      padding-left:12px;
      border-left:1px solid var(--line-strong);
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .menu-source-group + .menu-note {
      margin-top:14px !important;
    }

    .menu-source-list dt {
      font-size:12px;
      font-weight:800;
      color:var(--teal-800);
    }

    /* 出典(dd)は項目名(dt)よりさらに一段下げる */
    .menu-source-list dd {
      margin:2px 0 0 12px;
      font-size:12.5px;
      color:#475569;
      line-height:1.6;
    }

    /* ---- 診断結果・雨雲 ---- */

    .route-actions {
      display:flex;
      gap:6px;
    }

    .route-run {
      flex:1 1 auto;
      padding:8px;
      border:0;
      border-radius:var(--radius-sm);
      background:linear-gradient(135deg, var(--teal-500), var(--teal-800));
      color:#fff;
      font-family:inherit;
      font-size:12px;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 2px 8px rgba(11,79,74,.22);
      transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
    }

    .route-run:hover {
      filter:brightness(1.07);
      transform:translateY(-1px);
      box-shadow:0 6px 14px rgba(11,79,74,.28);
    }

    .route-run:active {
      transform:translateY(0);
      box-shadow:0 2px 6px rgba(11,79,74,.22);
    }

    .route-run:disabled {
      opacity:.6;
      cursor:default;
      transform:none;
      box-shadow:none;
    }

    .route-clear {
      flex:0 0 auto;
      padding:8px 11px;
      border:1px solid var(--line-strong);
      border-radius:var(--radius-sm);
      background:#fff;
      color:var(--muted);
      font-family:inherit;
      font-size:11.5px;
      font-weight:800;
      cursor:pointer;
      transition:border-color .15s ease, color .15s ease, background .15s ease;
    }

    .route-clear:hover {
      border-color:var(--teal-500);
      color:var(--teal-800);
      background:var(--teal-050);
    }

    .route-status {
      padding:8px 10px;
      border-radius:var(--radius-sm);
      background:#f4f7f6;
      color:#475569;
      font-size:10.5px;
      font-weight:700;
      line-height:1.55;
    }

    .route-status[hidden] {
      display:none;
    }

    .route-status a {
      color:var(--teal-600);
      font-weight:800;
    }

    .route-hit {
      padding:3px 0;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .route-hit:hover {
      color:var(--teal-800);
    }

    .route-sep {
      margin-top:7px;
      padding-top:6px;
      border-top:1px solid var(--line);
    }

    .route-foot {
      margin-top:6px;
      color:#8798a5;
      font-size:9.5px;
      line-height:1.5;
    }

    /* 判定結果末尾の、データ出典・処理内容の注釈（route-footより情報量が多いため別クラス） */
    .route-cite {
      margin-top:6px;
      padding-top:6px;
      border-top:1px dashed var(--line);
      color:#8798a5;
      font-size:10px;
      line-height:1.55;
    }

    .route-cite-row + .route-cite-row {
      margin-top:5px;
    }

    .route-cite b {
      color:#5b6b74;
    }

    /* ---- 地点ポップアップ ---- */

    .leaflet-popup-content-wrapper {
      border-radius:14px;
      box-shadow:0 16px 38px rgba(15,23,42,.20);
    }

    .leaflet-popup-content {
      margin:0;
      width:auto !important;
      font-family:inherit;
    }

    .pp {
      width:272px;
      padding:12px 13px 11px;
      font-size:12px;
      line-height:1.5;
    }

    .pp-top {
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
    }

    .pp-rank {
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:2px 9px 2px 7px;
      border-radius:999px;
      background:var(--pp-tint);
      color:var(--pp-deep);
      font-size:10.5px;
      font-weight:900;
      letter-spacing:.02em;
    }

    .pp-rank::before {
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--pp-fill);
      box-shadow:0 0 0 2px rgba(255,255,255,.9);
    }

    .pp-vol {
      padding:2px 8px;
      border-radius:999px;
      background:rgba(180,83,9,.14);
      color:#b45309;
      font-size:10px;
      font-weight:800;
    }

    /* テレマ走行量のタグは、走行量が多いほど濃い青で示す（ランキング・地点ポップアップ共通）。
       危険レベルの赤・橙・黄と色相を分け、別の指標であることが一目で分かるようにする */
    .rank-vol.vol-多, .pp-vol.vol-多 { background:#1d4ed8; color:#fff }
    .rank-vol.vol-中, .pp-vol.vol-中 { background:#93c5fd; color:#1e3a8a }
    .rank-vol.vol-少, .pp-vol.vol-少 { background:#dbeafe; color:#1e40af }
    .rank-vol.vol-\-, .pp-vol.vol-\- { background:#eef2f6; color:#64748b }

    .pp-name {
      margin:7px 0 0;
      font-size:14.5px;
      font-weight:900;
      line-height:1.35;
      letter-spacing:.01em;
    }

    .pp-loc {
      margin-top:3px;
      color:var(--muted);
      font-size:11px;
      font-weight:700;
      line-height:1.45;
    }

    .pp-depths {
      margin-top:9px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:6px;
    }

    .pp-cell {
      padding:6px 8px;
      border:1px solid var(--line);
      border-radius:9px;
      background:#fafcfb;
    }

    .pp-cell-k {
      color:var(--muted);
      font-size:9.5px;
      font-weight:800;
      letter-spacing:.03em;
    }

    .pp-cell-v {
      margin-top:1px;
      font-size:13px;
      font-weight:900;
    }

    .pp-actions {
      margin-top:9px;
      display:flex;
      gap:6px;
    }

    .pp-btn {
      flex:1 1 0;
      padding:7px 8px;
      border-radius:9px;
      text-align:center;
      text-decoration:none;
      font-size:11px;
      font-weight:800;
      background:linear-gradient(135deg, var(--teal-500), var(--teal-800));
      color:#fff !important;
      transition:filter .15s ease, transform .15s ease;
    }

    .pp-btn:hover {
      filter:brightness(1.07);
      transform:translateY(-1px);
    }

    .pp-btn.is-ghost {
      background:#fff;
      border:1px solid var(--line-strong);
      color:var(--teal-800) !important;
    }

    .pp-btn.is-ghost:hover {
      border-color:var(--teal-500);
      filter:none;
    }

    /* ---- 地図右下の表示レイヤー操作板 ---- */
    .maplayer {
      position:absolute; right:12px; bottom:20px; z-index:1000;
      width:258px; background:rgba(255,255,255,.97);
      border:1px solid #d9e0e4; border-radius:11px;
      box-shadow:0 8px 24px rgba(15,23,42,.16);
      font-size:12px; overflow:hidden;
    }
    .maplayer-head {
      display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
      padding:8px 11px; background:#f5f8f9; border-bottom:1px solid #e6ecea;
    }
    .maplayer-title { font-weight:800; font-size:11.5px; letter-spacing:.04em; color:#1d2733 }
    .maplayer-chevron { width:14px; height:14px; margin-left:auto; color:#64748b; transition:transform .18s }
    .maplayer.collapsed .maplayer-chevron { transform:rotate(-90deg) }
    .maplayer-body { padding:8px 11px 11px; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:2px }
    .maplayer.collapsed .maplayer-body { display:none }
    /* 表示レイヤーは色丸を持たないため3列レイアウトにする */
    .maplayer .legend-item { grid-template-columns:13px minmax(0,1fr) auto }
    .maplayer .scope-field { margin-top:6px }

    .hz-range { width:100%; accent-color:var(--teal-600) }

    .legend-row { padding:2px 0 5px }
    .legend-row + .legend-row { border-top:1px solid #f1f4f6 }
    .legend-desc { font-size:10.5px; color:var(--muted); line-height:1.5; padding:0 2px 1px 33px; margin-top:-1px }

    .scope-tabs { display:flex; align-items:stretch; gap:3px; padding:3px; border-radius:11px; background:#f1f5f4 }
    .scope-tab {
      flex:1 1 auto; min-width:0; padding:6px 4px; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
      font-size:10.5px; font-weight:800; font-family:inherit; letter-spacing:-.02em; line-height:1.4;
      cursor:pointer; border:0; background:transparent; color:var(--muted); border-radius:8px;
      display:flex; align-items:center; justify-content:center; text-align:center;
      transition:background .15s ease, color .15s ease;
    }
    .scope-tab:hover { color:var(--teal-800) }
    .scope-tab.is-on { background:#fff; color:var(--teal-800); box-shadow:0 1px 3px rgba(15,23,42,.10) }

    /* ---- スマホ・タブレット（980px以下）: 地図主体＋フローティングUI ---- */
    .msheet, .maptool-group, .search-dock, .legend-dock { display:none }

    @media (max-width:1180px) {
      /* 列幅は.mainのclamp()がこの帯でも自動的にpx下限まで絞ってくれるため、ここでは上書きしない。
         タブレット横向きなど、サイドバーが224px前後まで狭まる幅では
         診断結果・注釈まわりの文字が小さくなりすぎないよう底上げする */
      .route-status { font-size:11.5px }
      .route-cite { font-size:10.5px }
    }

    /* ---- スマホ・タブレット（980px以下）: 地図主体＋フローティングUI ----
       PC幅ではサイドバー型の固定3カラムレイアウトを使い、この範囲は980px以下でのみ有効にする。 */
    @media (max-width:980px){
      html, body { height:100%; overflow:hidden }
      .shell { height:100vh; height:100dvh; grid-template-rows:52px minmax(0,1fr) }
      .header { padding:0 12px; gap:10px }
      .brand-logo-box { height:34px; padding:3px 8px }
      .main { display:block; padding:0; height:100%; overflow:hidden; background:#fff }
      .sidebar, .rightbar { display:none }
      .map-panel { height:100%; border:none; border-radius:0; box-shadow:none }

      /* ヘッダーのハンバーガーメニュー: 小画面ではヘッダーが52pxになり、パネルも画面幅いっぱいに広げる */
      .menu-btn { width:36px; height:36px }
      .menu-btn svg { width:19px; height:19px }
      .menu-panel {
        left:8px; right:8px; width:auto;
        top:calc(52px + env(safe-area-inset-top) + 8px);
        max-height:calc(100dvh - 52px - env(safe-area-inset-top) - 24px);
      }

      /* 左上: 地域検索（対象地域の選択パネルをそのまま常設で移動する） */
      .search-dock {
        display:block; position:absolute; top:12px; left:8px; z-index:1000;
        /* 右上の列（幅110px＋左右の余白）と重ならない幅にする */
        width:min(300px, calc(100% - 132px));
      }
      .search-dock .panel-body { max-height:calc(100dvh - 220px); overflow-y:auto }
      .search-dock .scope-head-toggle { display:flex }

      /* 右上: レイヤー／危険箇所の2ボタン。横並びだと対象地域の選択（左上）と幅が競合して
         被ってしまうため、縦並びにして専有する横幅を1ボタン分に抑える */
      /* 一番上は背景地図の切り替え（.basemap-switch）のため、その高さの分だけ下げる。
         幅は切り替えと同じ110pxにそろえる */
      .maptool-group { display:flex; flex-direction:column; gap:8px; position:absolute; top:60px; right:8px; z-index:1000; width:110px }
      .maptool-btn {
        display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:40px; padding:0;
        border:1px solid #d9e0e4; border-radius:20px; background:#fff; color:#0f766e;
        box-shadow:0 4px 14px rgba(15,23,42,.16); cursor:pointer;
        font:inherit; font-size:11.5px; font-weight:800; white-space:nowrap;
      }
      .maptool-btn svg { width:17px; height:17px; flex:0 0 auto }
      .maptool-btn.is-on { background:#0f766e; color:#fff; border-color:#0f766e }

      /* 表示レイヤーは、以前は画面下部に横長の帯として常時表示していたが地図を覆って
         邪魔になっていたため、右上のボタンで開閉するコンパクトなポップオーバーにする */
      .maplayer {
        display:none; position:absolute; top:156px; right:8px; left:auto; bottom:auto;
        width:250px; max-width:calc(100% - 56px);
      }
      .maplayer.is-open-mobile { display:block }
      .maplayer.is-open-mobile .maplayer-body { display:flex }
      .maplayer-body { max-height:42vh }
      .leaflet-control-zoom { display:none }
      .leaflet-bottom { bottom:12px }

      /* 左下: 凡例（表示中の情報として常設・折りたたみ可） */
      .legend-dock { display:block; position:absolute; bottom:12px; left:8px; z-index:1000; width:min(230px, calc(100% - 100px)) }
      .legend-dock .legend-body { max-height:34vh }

      /* 「危険箇所」で開く引き出しシート */
      /* 高さはヘッダーの下までの一定値にしておき、既定では半分だけ持ち上げて地図を見えるようにする
         （雨雲など地図と結果を同時に見たい場面のため）。ヘッダーをドラッグ／タップすると
         全開・半開に切り替わり、下に引っ張ると閉じる。実際の位置は--sheet-yをJSが書き換えて制御する。 */
      .msheet { position:fixed; left:0; right:0; bottom:env(safe-area-inset-bottom); z-index:1400;
        display:flex; flex-direction:column;
        height:calc(100vh - 52px); height:calc(100dvh - 52px); background:#f4f7f9; border-radius:16px 16px 0 0;
        box-shadow:0 -10px 30px rgba(15,23,42,.22);
        --sheet-y:115%; transform:translateY(var(--sheet-y)); transition:transform .25s ease, visibility .25s;
        pointer-events:none; visibility:hidden }
      .msheet.open { pointer-events:auto; visibility:visible }
      .msheet.dragging { transition:none }
      .msheet-head { flex:0 0 auto; position:relative; display:flex; align-items:center; gap:8px; padding:10px 14px;
        border-bottom:1px solid #e2e8f0; background:#fff; border-radius:16px 16px 0 0;
        cursor:grab; touch-action:none; user-select:none }
      .msheet-head:active { cursor:grabbing }
      .msheet-head::before { content:""; position:absolute; left:50%; top:6px; width:36px; height:4px; border-radius:2px; background:#cbd5e1; transform:translateX(-50%) }
      .msheet-title { font-weight:900; font-size:13px; color:#1d2733; padding-top:6px }
      .msheet-close { margin-left:auto; border:1px solid #d4dae1; background:#fff; border-radius:8px; padding:6px 10px; font:inherit; font-size:12px; font-weight:800; color:#475569 }
      .analysis-tabs { flex:0 0 auto; margin:10px 10px 0 }
      .msheet-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px }
      .msheet-body .panel { box-shadow:none; border:none }
      .msheet-body .panel-head { background:#fff }
      .msheet-body .rank-list { max-height:none }

      .scope-select, .route-run, .route-clear, .scope-tab, .btn-ghost { min-height:38px; font-size:13px }
      .seg-btn { padding:7px 12px; font-size:12px }
      input[type=text].scope-select { font-size:16px }

      /* 小画面では診断結果・注釈まわりの文字が小さすぎて読みにくいため引き上げる */
      .info-pop { font-size:12px }
      .scope-note, .scope-status { font-size:12px }
      .scope-label { font-size:10.5px }
      .route-status { font-size:12.5px }
      .route-foot { font-size:11px }
      .route-cite { font-size:11.5px }
      .legend-desc { font-size:12px }
    }

    /* ---- 画面外へのはみ出し防止・小画面の見切れ対策 ---- */
    html, body { max-width:100%; overflow-x:hidden }
    .shell { width:100%; max-width:100%; overflow-x:hidden }
    .header { min-width:0 }
    .brand { min-width:0 }

    @media (max-width:980px){
      .header { gap:8px; padding:0 10px }
      .brand-logo-box { height:30px; padding:2px 6px }
      .brand-logo { max-width:120px }
      .title { font-size:15px; letter-spacing:0; min-width:0; flex:1 1 auto;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
      .maplayer-title { font-size:11.5px }
      .msheet-body .panel { max-width:100% }
      .rank-list { padding-left:8px; padding-right:8px }
      .rank-row { grid-template-columns:32px minmax(0,1fr) 12px; gap:8px; padding-left:9px; padding-right:9px }
      .leaflet-control-attribution { max-width:calc(100vw - 16px); white-space:normal; font-size:9px }
      .pp { width:250px }
    }

    @media (max-width:400px){
      /* 320px幅（iPhone SE等）でロゴ＋タイトルが収まりきらず「（仮）」が省略されていたため、
         ロゴとタイトルの両方を少し絞って1行に収める */
      .title { font-size:12.5px }
      .brand-logo { max-width:80px }
    }



    /* 画面の高さが低いPC（ノートPCのブラウザ表示領域など）では余白を詰めて、左カラムを1画面に収める */
    @media (min-width:981px) and (max-height:820px){
      .shell { grid-template-rows:54px minmax(0,1fr) }
      .brand-logo-box { height:34px }
      .main { gap:7px; padding:7px }
      .panel-head { padding:7px 12px 6px }
      .panel-body { padding:7px 12px 8px; gap:6px }
      .legend-desc { font-size:10px; line-height:1.4 }
    }

    /* ---- PC幅: 左カラムをスクロールなしで収める ----
       余白はJS（fitSidebar）が画面の高さから計算した --sp の分だけ広げ、縦方向にぴったり収める。
       雨雲パネルは残りの高さを使い、判定結果が長い場合はパネル内だけをスクロールさせる。 */
    @media (min-width:981px){
      #rainPanel { flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
      #rainPanelBody { flex:1 1 auto; min-height:0; overflow-y:auto }
      #rainPanelBody > * { flex-shrink:0 }
      .sidebar { gap:calc(7px + var(--sp, 0px)) }
      .sidebar .panel-head { padding:calc(7px + var(--sp, 0px) * .5) 12px calc(6px + var(--sp, 0px) * .5) }
      .sidebar .panel-body { padding:calc(7px + var(--sp, 0px) * .5) 12px calc(8px + var(--sp, 0px) * .5); gap:calc(6px + var(--sp, 0px) * .5) }
      .sidebar .scope-tab { padding:calc(4px + var(--sp, 0px) * .25) 4px }
      .sidebar .route-run { padding:calc(6px + var(--sp, 0px) * .25) 8px }
      .sidebar .route-clear,
      .sidebar .btn-ghost { padding:calc(5px + var(--sp, 0px) * .25) 10px }
      .sidebar .scope-summary { padding:calc(5px + var(--sp, 0px) * .25) 9px }
      .sidebar .legend-head { padding:calc(7px + var(--sp, 0px) * .5) 12px }
      .sidebar .legend-items { padding:calc(3px + var(--sp, 0px) * .5) 11px }
      .sidebar .legend-row { padding:calc(2px + var(--sp, 0px) * .35) 0 calc(3px + var(--sp, 0px) * .35) }
      .sidebar .legend-item { min-height:20px }
    }