/* 地區頁（region-tokyo / region-kansai）首屏：左地圖＋右資訊面板（一屏放完），手機為地圖在上、面板在下＋全螢幕模式。
   設計：tools/region-map-build/review-A.md（製圖、面板字級）、review-B.md（版面、互動、漸進式披露）。
   本檔放在頁內 <style> 之後載入，同權重的規則以本檔為準。 */

/* ── 章節列：頂列正下方、全寬深藍，目前章＝白字＋3px 金色底線（所有寬度都 sticky） ── */
:root{--ct-h:48px;--ct-off:48px}
@media (max-width:760px){:root{--ct-h:48px;--ct-off:48px}}
.chap-tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));z-index:15;background:#273d63;border-bottom:0;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.chap-tabs .wrap{display:flex;align-items:stretch;gap:var(--s5);height:var(--ct-h);padding-top:0}
.ct-r{align-self:center;flex:none;padding-right:var(--s5);border-right:1px solid rgba(255,255,255,.16);font:700 var(--fs-small)/1.4 var(--f-display);letter-spacing:.14em;color:rgba(255,255,255,.6);white-space:nowrap}
.ct-list{display:flex;gap:var(--s6);min-width:0;overflow-x:auto;scrollbar-width:none}
.ct-list::-webkit-scrollbar{display:none}
.ct-list a{flex:none;display:flex;align-items:center;white-space:nowrap;text-decoration:none;color:rgba(255,255,255,.68);font-size:15px;letter-spacing:.04em;box-shadow:inset 0 -3px transparent;
  min-height:0;padding:0;border:0;border-radius:0;background:none}
.ct-list a:hover{color:#fff}
.ct-list a[aria-current]{color:#fff;font-weight:700;background:none;border:0;box-shadow:inset 0 -3px var(--glow)}
.ct-list a:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
@media (max-width:760px){
  .chap-tabs .wrap{gap:0}
  .ct-r{display:none}
  .ct-list{gap:var(--s5);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .ct-list a{min-height:44px;font-size:14.5px;color:rgba(255,255,255,.68);background:none;border:0;box-shadow:inset 0 -3px transparent}
  .ct-list a[aria-current]{background:none;color:#fff;box-shadow:inset 0 -3px var(--glow)}
}

/* ── 首屏：一屏放完的「地圖＋面板」 ── */
.rmap{position:relative;background:var(--paper);
  --stage-h:max(560px,calc(100dvh - var(--head-h) - var(--ct-h) - 1px - env(safe-area-inset-top,0px)));
  --map-bg:#f6f6f4;--fl-shadow:0 1px 2px rgba(20,28,45,.12),0 4px 14px rgba(20,28,45,.10);--pp:28px}
.rm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rm-skip{position:absolute;left:12px;top:12px;z-index:30;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:14px;text-decoration:none;clip-path:inset(50%);opacity:0;pointer-events:none}
.rm-skip:focus{clip-path:none;opacity:1;pointer-events:auto}
.rm-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,32vw,460px);height:var(--stage-h);border-bottom:1px solid var(--line);background:var(--paper)}
@media (min-width:900px) and (max-width:1099px){.rm-stage{grid-template-columns:minmax(0,1fr) 340px}.rmap{--pp:22px}}
.rm-mapcol{position:relative;min-width:0;overflow:hidden;background:var(--map-bg);scroll-margin-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + var(--ct-h))}
.rm-m{position:absolute;inset:0}
.rm-m .maplibregl-canvas{outline:none}
.rm-m .maplibregl-canvas:focus-visible{outline:2px solid var(--glow);outline-offset:-3px}
.rm-m canvas{opacity:0;transition:opacity .35s ease}
.rm-ready .rm-m canvas{opacity:1}
.rm-nomap .rm-mapcol{display:none}
.rm-nomap .rm-stage{grid-template-columns:1fr;height:auto}
.rm-nomap .rm-panel{border-left:0;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;width:100%}

/* 地圖左上：城市牌（關西＝大阪｜京都 分段切換）＋一行小字 */
.rm-hud{position:absolute;left:16px;top:16px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.rm-plate{pointer-events:auto;display:flex;align-items:center;gap:2px;padding:4px;background:#fff;border-radius:12px;box-shadow:var(--fl-shadow)}
.rm-plate b{display:block;padding:6px 14px 6px 16px;font:900 24px/1.1 var(--f-display);letter-spacing:.2em;color:#1b1f27}
.rm-seg button{appearance:none;border:0;margin:0;min-height:42px;padding:0 18px 0 20px;border-radius:9px;background:none;cursor:pointer;
  font:900 20px/1 var(--f-display);letter-spacing:.2em;color:#5b6270;transition:background .15s,color .15s}
.rm-seg button:hover{background:#f1f1ee;color:#1b1f27}
.rm-seg button[aria-selected=true]{background:#1b1f27;color:#fff}
.rm-seg button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-psub{margin:0 0 0 4px;display:flex;flex-wrap:wrap;gap:2px 12px;font:500 10.5px/1.5 var(--f-mono);letter-spacing:.2em;color:#4b515b;
  text-shadow:0 0 2px var(--map-bg),0 0 6px var(--map-bg),0 0 10px var(--map-bg)}
.rm-psub-t{letter-spacing:.06em;color:#7a6326}
/* 大區域｜小區域 */
.rm-mode{pointer-events:auto;display:inline-flex;padding:3px;margin-top:2px;background:#fff;border-radius:999px;box-shadow:var(--fl-shadow)}
.rm-mode button{appearance:none;border:0;margin:0;min-height:34px;padding:0 15px;border-radius:999px;background:none;cursor:pointer;
  font:700 13.5px/1 var(--f-body);letter-spacing:.08em;color:#5b6270;transition:background .15s,color .15s}
.rm-mode button:hover{color:#1b1f27}
.rm-mode button[aria-checked=true]{background:#1b1f27;color:#fff}
.rm-mode button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

/* 右上：縮放＋回到全覽（桌機）；全螢幕＋圖層（手機） */
.rm-ctl{position:absolute;right:16px;top:16px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.rm-bg{display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:var(--fl-shadow);overflow:hidden}
.rm-b{position:relative;appearance:none;border:0;margin:0;width:36px;height:36px;display:grid;place-items:center;background:#fff;color:#1b1f27;cursor:pointer}
.rm-b+.rm-b{border-top:1px solid #ebebe7}
.rm-b:hover{background:#f4f4f1}
.rm-b:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
.rm-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rm-b.dot::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 1.5px #fff}
.rm-full-b .x{display:none}
.is-full .rm-full-b .o{display:none}.is-full .rm-full-b .x{display:block}
.rm-mob{display:none}

/* 左下：鐵道籤（預設關，點一下顯示）＋「圖層」小選單（區域名稱、底圖） */
.rm-layers{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 200px)}
.rm-rails{display:flex;align-items:center;gap:4px;padding:4px;background:#fff;border-radius:999px;box-shadow:var(--fl-shadow)}
.rm-lk{padding:0 6px 0 10px;font:700 11px/1 var(--f-mono);letter-spacing:.18em;color:#8a909b}
.rm-lchip{appearance:none;margin:0;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border:0;border-radius:999px;
  background:none;color:#4b515b;font:600 13px/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.rm-lchip .s{display:none}
.rm-lchip i{flex:none;width:16px;height:4px;border-radius:2px;background:var(--c,#9da2aa);opacity:.45}
.rm-lchip:hover{background:#f1f1ee;color:#1b1f27}
.rm-lchip[aria-pressed=true]{background:#1b1f27;color:#fff}
.rm-lchip[aria-pressed=true] i{opacity:1;box-shadow:0 0 0 1.5px #fff}
.rm-lchip:focus-visible,.rm-lreset:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-lmore{position:relative}
.rm-lchip.more{position:relative;gap:5px;height:40px;padding:0 14px;background:#fff;box-shadow:var(--fl-shadow)}
.rm-lchip.more:hover{background:#f6f6f3}
.rm-lchip.more span{font-size:10px;transition:transform .15s}
.base-open .rm-lchip.more span{transform:rotate(180deg)}
.rm-lchip.more.dot::after{content:"";position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 1.5px #fff}
.rm-basel{display:none;position:absolute;left:0;bottom:48px;flex-direction:column;align-items:stretch;gap:2px;min-width:150px;padding:8px;background:#fff;border-radius:12px;box-shadow:var(--fl-shadow)}
.base-open .rm-basel{display:flex}
.rm-lchip.b{justify-content:flex-start}
.rm-lchip.b i{width:12px;height:12px;border-radius:3px;background:none;border:1.5px solid currentColor;opacity:.55}
.rm-lchip.b[aria-pressed=true]{background:none;color:#1b1f27}
.rm-lchip.b[aria-pressed=true] i{background:#1b1f27;border-color:#1b1f27;opacity:1;box-shadow:inset 0 0 0 2px #fff}
.rm-lchip.b:hover{background:#f4f4f1}
.rm-lreset{appearance:none;border:0;background:none;margin-top:4px;padding:6px 10px;text-align:left;font:600 12.5px var(--f-body);color:var(--ai);cursor:pointer}
.rm-lreset[hidden]{display:none}

/* MapLibre 內建：出處、比例尺 */
.rm-m .maplibregl-ctrl-bottom-right{display:flex;flex-direction:row-reverse;align-items:flex-end;gap:8px;padding:0 10px 10px 0}
.rm-m .maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0}
.rm-m .maplibregl-ctrl-attrib.maplibregl-compact{min-height:24px;background:#fff;box-shadow:var(--fl-shadow);font:400 10.5px/1.5 var(--f-mono);color:#5b6270}
.rm-m .maplibregl-ctrl-attrib a{color:#5b6270}
.rm-m .maplibregl-ctrl-scale{border-color:#5b6270;color:#4b515b;background:rgba(255,255,255,.75);font:500 10px/1.3 var(--f-mono);padding:0 4px}

/* 地圖上的選取膠囊、滑過提示 */
.rm-pill{pointer-events:none;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;background:#1b1f27;color:#fff;
  font:700 14px/1.15 var(--f-body);letter-spacing:.04em;white-space:nowrap;box-shadow:0 0 0 2px #fff,0 4px 14px rgba(20,28,45,.28)}
.rm-pill i{width:7px;height:7px;border-radius:50%;background:#f2b632}
.rm-rtip{position:absolute;z-index:5;transform:translate(14px,-50%);pointer-events:none;background:#fff;border-left:3px solid var(--c);border-radius:0 6px 6px 0;padding:4px 10px;
  font:600 12.5px/1.4 var(--f-body);color:#1b1f27;box-shadow:0 2px 10px rgba(20,28,45,.18);white-space:nowrap}
.rm-rtip[hidden]{display:none}

/* ── 資訊面板 ── */
.rm-panel{position:relative;min-height:0;overflow-y:auto;overscroll-behavior-y:auto;border-left:1px solid var(--line);background:var(--paper);
  scrollbar-width:thin;scrollbar-gutter:stable;outline:none}
.rm-grip{display:none}
.rm-ph{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  padding:22px var(--pp) 16px;background:var(--paper);border-bottom:1px solid transparent}
.rm-panel.is-sel .rm-ph{padding-top:12px;padding-bottom:12px;border-bottom-color:var(--line)}
.rm-h1{margin:0;font:900 34px/1.15 var(--f-display);letter-spacing:.14em;color:var(--ink)}
.rm-h1 span[data-city]{transition:color .2s}
.rmap[data-city] .rm-h1 i{font-style:normal;color:var(--ink-3)}
.rm-h1 span[data-city]:not(.on){color:var(--ink-3);font-size:.62em;letter-spacing:.12em;cursor:pointer}
.rm-h1 span[data-city]:not(.on):hover{color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.rm-h1 small{display:block;margin-top:8px;font:500 10.5px/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}
.rm-panel.is-sel .rm-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rm-back{appearance:none;justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:0 0 0 -10px;padding:0 12px 0 10px;border:0;border-radius:999px;
  background:none;font:600 14px var(--f-body);color:var(--ink-2);cursor:pointer}
.rm-back[hidden]{display:none}
.rm-back span[aria-hidden]{font-size:20px;line-height:1;transform:translateY(-1px)}
.rm-back:hover{background:var(--paper-2);color:var(--ink)}
.rm-loc{width:44px;height:49px;flex:none}
.rm-loc path{fill:var(--paper-2);stroke:var(--ink-3);stroke-width:.6;stroke-linejoin:round}
.rm-loc .rm-dot{fill:var(--ink-3);stroke:var(--paper);stroke-width:1.2}
.rm-loc .rm-dot.on{fill:#d9573f;r:3.6}
.rm-panel.is-sel .rm-loc{width:32px;height:36px}

/* L0：城市導言一句＋「有完整商圈導覽」白卡＋分區清單（提案 F：導覽在前＋索引） */
.rm-home{padding:0 var(--pp) 28px}
.rm-js .rm-home[hidden],.rm-area[hidden]{display:none}
.rm-lede{margin:0;max-width:24em;font:600 17px/1.75 var(--f-display);color:var(--ink)}
.rm-hint{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3)}
.rm-zh{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 6px}
.rm-zh span{font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--ink-3)}
.rm-zones{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rm-z{border-bottom:1px solid var(--line)}
.rm-zb{appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:46px;margin:0;padding:0 4px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.rm-zb i{flex:none;width:12px;height:12px;border-radius:3px;background:var(--zc)}
.rm-zb b{flex:1;min-width:0;font:700 15.5px/1.3 var(--f-display);letter-spacing:.08em}
.rm-zb span{font:500 11.5px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.04em}
.rm-zb::after{content:"";flex:none;width:7px;height:7px;margin:0 6px 0 2px;border-right:1.5px solid var(--ink-3);border-top:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s}
/* 色彩只有一種意義：分區色只在分區色塊；滑過＝中性淺灰；金＝剛看過；鍵盤焦點＝藍（與金分開） */
.rm-zb:hover,.rm-z.is-zhov>.rm-zb{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.rm-zb:hover::after,.rm-z.is-zhov>.rm-zb::after{transform:translateX(3px) rotate(45deg)}
.rm-zb.is-cur b{text-decoration:underline 3px var(--glow);text-underline-offset:7px;text-decoration-skip-ink:none}
.rm-zb:focus-visible{outline:2px solid var(--ai);outline-offset:-2px;border-radius:6px}
.rm-zd{padding:0 0 10px 20px}
/* 大區域：只列分區（點列＝選取）；小區域：每個分區下面是雙欄文字索引 */
.rm-js.rmap:not([data-mode=area]) .rm-zd{display:none}
.rmap[data-mode=area] .rm-zb{min-height:44px;padding-top:4px}
.rm-zl{display:flex;flex-wrap:wrap;gap:6px}

/* 白卡：只放有完整商圈導覽頁的區域（縮圖＋名稱＋所屬分區色塊）；總覽唯一的卡片 */
.rm-gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 8px}
.rm-gh b{font:700 15.5px/1.3 var(--f-display);letter-spacing:.08em;color:var(--ink)}
.rm-gh span{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;color:var(--ink-3);white-space:nowrap}
.rm-gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:6px;background:var(--sheet);border:1px solid var(--line);border-radius:12px}
.rm-gi{display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:6px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background-color .12s}
.rm-gi img,.rm-gi .ph{flex:none;width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--paper-2)}
.rm-gi .tx{min-width:0}
.rm-gi b{display:block;font:700 14px/1.35 var(--f-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-gi small{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.5;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.rm-gi small i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--zc)}
.rm-gi:hover,.rm-gi.is-hov{background:var(--paper)}
.rm-gi.is-cur{box-shadow:inset 0 0 0 2px var(--glow)}
.rm-gi:focus-visible{outline:2px solid var(--ai);outline-offset:-2px}

/* 索引：全部區域的雙欄文字列（無框、無白底）；有商圈導覽＝墨色粗體；剛看過＝左側金線 */
.rm-home .rm-zl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
.rm-ir{display:flex;align-items:center;min-width:0;min-height:40px;padding:4px 8px;border-radius:6px;text-decoration:none;
  font:400 14.5px/1.35 var(--f-body);color:var(--ink-2);transition:background-color .12s}
.rm-ir span{min-width:0;overflow-wrap:anywhere}
.rm-ir.g{color:var(--ink);font-weight:600}
.rm-ir:hover,.rm-ir.is-hov{background:var(--paper-2);color:var(--ink)}
.rm-ir.is-cur{box-shadow:inset 3px 0 0 var(--glow);color:var(--ink);font-weight:700}
.rm-ir:focus-visible{outline:2px solid var(--ai);outline-offset:-2px}
/* 區域多的城市（東京）：前三個分區以外預設收合，分區列仍可點選分區；「列出 N 個區域」展開。沒有 JS 時全部展開 */
.rm-zx{display:none}
.rm-js .rm-z.fold:not(.open) .rm-zl{display:none}
.rm-js .rm-z.fold .rm-zx{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 8px;border:0;border-radius:6px;background:none;cursor:pointer;
  font:600 13.5px/1.3 var(--f-body);color:var(--ai)}
.rm-zx::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.rm-z.open .rm-zx::after{margin-top:3px;transform:rotate(-135deg)}
.rm-zx:hover{background:var(--paper-2)}
.rm-zx:focus-visible{outline:2px solid var(--ai);outline-offset:-2px}
.rm-chip{appearance:none;margin:0;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);text-decoration:none;cursor:pointer;
  font:500 13.5px/1.2 var(--f-body);color:var(--ink-2);white-space:nowrap;transition:border-color .15s,color .15s}
.rm-chip.g{font-weight:700;color:var(--ink)}
.rm-chip.g::before{content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--zc)}
.rm-chip:hover{border-color:var(--zc);color:var(--ink)}
.rm-chip:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--ai);text-decoration:none}
.rm-more:hover{text-decoration:underline;text-underline-offset:4px}

/* L1：區域／分區介紹——全部直接展開的純文字：小標（粗、小、分區深色）＋內文（細、行距寬） */
.rm-area{padding:22px var(--pp) 32px;animation:rm-in .16s ease-out}
@keyframes rm-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rm-cz{margin:0;display:flex;align-items:center;gap:8px;font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;color:var(--ink-2)}
.rm-cz>i,.rm-czb i{flex:none;width:9px;height:9px;border-radius:2px;background:var(--zc)}
.rm-czb{appearance:none;display:inline-flex;align-items:center;gap:8px;margin:0 0 0 -6px;padding:4px 6px;border:0;border-radius:6px;background:none;cursor:pointer;font:inherit;letter-spacing:inherit;color:inherit}
.rm-czb:hover{background:color-mix(in srgb,var(--zc) 10%,transparent);color:var(--ink)}
.rm-czb:focus-visible{outline:2px solid var(--glow);outline-offset:1px}
.rm-cz span{color:var(--ink-3)}
.rm-cz span::before{content:"·";margin:0 7px 0 1px}
.rm-ch{margin:8px 0 0;font:900 32px/1.22 var(--f-display);letter-spacing:.05em;color:var(--ink);outline:none}
.rm-ch small{display:block;margin-top:7px;font:500 10.5px/1.2 var(--f-mono);letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.rm-one{margin:12px 0 0;font:700 17px/1.6 var(--f-display);color:var(--ink)}
.rm-sta{display:flex;gap:10px;margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rm-sta b{flex:none;font:500 11px/2 var(--f-mono);letter-spacing:.14em;color:var(--ink-3)}
.rm-cl{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;font-size:14px;font-weight:600;color:var(--ai);text-decoration:none}
.rm-cl:hover{text-decoration:underline;text-underline-offset:4px}
/* ── 區域面板三段式（proposals/area-panel.html 提案 A＋手機 E）：這是哪裡 → 能做什麼 → 認識這一區
   顏色規則：分區色只在分區小方塊；主題色只在五個字標；藍＝可點；金＝目前。白卡、mono 數字沿用地圖頁左欄（map-panel.css） */
.rm-tt{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:8px}
.rm-tt .rm-ch{margin:0;min-width:0}
/* 收納（account.js 的 .ac-add，登入後才出現）：標題右側 40px 圓鈕；未登入是空 span，不佔位 */
.rm-panel .rm-sv{flex:none;margin-top:2px}
.rm-panel .rm-sv .ac-add{position:relative;width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--sheet);color:var(--ai)}
.rm-panel .rm-sv .ac-add>svg,.rm-panel .rm-sv .ac-add>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rm-panel .rm-sv .ac-add::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3Cpath d='M12 7.5v6M9 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3Cpath d='M12 7.5v6M9 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat}
.rm-panel .rm-sv .ac-add.in::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3C/svg%3E")}
.rm-panel .rm-sv .ac-add:hover{border-color:var(--ai);background:color-mix(in srgb,var(--ai) 6%,var(--sheet))}
.rm-panel .rm-sv .ac-add.in{border-color:var(--ai);background:var(--ai);color:var(--paper)}
.rm-panel .rm-sv .ac-add:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

/* 能做什麼：主題地圖白卡＋商圈導覽按鈕 */
.rm-act{display:grid;gap:10px;margin-top:20px}
.rm-act:empty{display:none}
.rm-ae[hidden]{display:none}
.rm-mc{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:12px 12px 2px}
.rm-mh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding:0 4px 10px}
.rm-mh b{font:700 15px/1.3 var(--f-display);letter-spacing:.08em;color:var(--ink)}
.rm-mh span{flex:none;font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;color:var(--ink-3)}
.rm-mt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rm-mt li{margin:0;min-width:0}
.rm-t{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;border-radius:10px;text-decoration:none;color:var(--ink);
  background:color-mix(in srgb,var(--tc) 6%,var(--sheet));border:1px solid color-mix(in srgb,var(--tc) 14%,var(--sheet));transition:background .15s,border-color .15s}
.rm-t .g{font:700 18px/1 var(--f-display);color:var(--tc)}
.rm-t .nm{font:600 12.5px/1.2 var(--f-body);letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.rm-t .n{font:500 15px/1.1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
a.rm-t:hover{background:color-mix(in srgb,var(--tc) 14%,var(--sheet));border-color:var(--tc)}
a.rm-t:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-t.zero{opacity:.45;background:var(--sheet);border-color:var(--line)}
.rm-mcap{display:flex;align-items:center;min-height:34px;margin:0;padding:0 4px;border-bottom:1px solid var(--line);font:400 12.5px/1.4 var(--f-body);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-mcap b{margin-right:8px;font-weight:600;color:var(--ink)}
.rm-mc>.rm-mcap:last-child{border-bottom:0}
.rm-ma{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;text-decoration:none;font:600 13.5px/1.2 var(--f-body);color:var(--ai)}
.rm-ma span{margin-left:auto;font:500 12.5px var(--f-mono);color:var(--ink-2)}
.rm-ma i{font-style:normal;transition:transform .15s}
.rm-ma:hover span{color:var(--ink)}
.rm-ma:hover i{transform:translateX(3px)}
.rm-ma:focus-visible{outline:2px solid var(--glow);outline-offset:-2px;border-radius:6px}
.rm-gb{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:12px;
  background:var(--sheet);text-decoration:none;color:var(--ink);transition:border-color .15s}
.rm-gb img{grid-row:1/3;width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--paper-2)}
.rm-gb.noimg{grid-template-columns:minmax(0,1fr) auto;padding-left:14px;min-height:52px}
.rm-gb .k{align-self:end;font:500 10.5px/1 var(--f-mono);letter-spacing:.18em;color:var(--ink-3)}
.rm-gb b{align-self:start;font:700 15px/1.3 var(--f-display);letter-spacing:.06em;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-gb .go{grid-row:1/3;grid-column:-2;font-size:12.5px;font-weight:600;color:var(--ai);white-space:nowrap}
.rm-gb .go i{font-style:normal;display:inline-block;transition:transform .15s}
.rm-gb:hover{border-color:var(--ink-3)}
.rm-gb:hover .go i{transform:translateX(3px)}
.rm-gb:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
:root[data-theme="dark"] .rm-t .g,:root[data-theme="dark"] .rm-db .g{color:color-mix(in srgb,var(--tc) 55%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rm-t .g,:root:not([data-theme="light"]) .rm-db .g{color:color-mix(in srgb,var(--tc) 55%,#fff)}}

/* 手機底部操作列（≤760 才出現；sticky 在面板／畫面底部，內容照常在上方捲動） */
.rm-dock{display:none}

/* 認識這一區：安靜的閱讀段落，墨色粗體小標、無色線 */
.rm-kh{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:500 11px/1.4 var(--f-mono);letter-spacing:.2em;color:var(--ink-3)}
.rm-kh::after{content:"";flex:1;height:1px;background:var(--line)}
.rm-tx{margin:0;padding:0}
.rm-tx+.rm-tx{margin-top:16px}
.rm-tx h3{margin:0 0 4px;font:700 13px/1.4 var(--f-body);letter-spacing:.14em;color:var(--ink)}
.rm-tx p{margin:0;font:400 15px/1.85 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.rm-tx.tip p{color:var(--ink)}
.rm-l1>.rm-prose{margin-top:28px}
.rm-zcard .rm-act{margin:0 0 22px}
.rm-prose{margin-top:22px;max-width:36em}
.rm-zp{margin:0 0 22px;font:400 15.5px/1.95 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.rm-zp b{font-weight:700;color:var(--ink)}
.rm-hint2{margin:0 0 10px!important;font-size:12.5px!important;line-height:1.5!important;color:var(--ink-3)!important}
.rm-hint2 .dot{display:inline-block;width:5px;height:5px;margin:0 2px 2px;border-radius:50%;background:var(--zc)}
.rm-pn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}
.rm-pn button{appearance:none;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);font:600 13.5px/1.2 var(--f-body);color:var(--ink-2);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.rm-pn button+button{text-align:right}
.rm-pn button:hover{border-color:var(--ink-3);color:var(--ink)}

/* ── 其他章：首屏只留標題列（面板標頭） ── */
.rmap.is-compact .rm-stage{display:block;height:auto;border-bottom:0}
.rmap.is-compact .rm-mapcol,.rmap.is-compact .rm-home,.rmap.is-compact .rm-area,.rmap.is-compact .rm-back,.rmap.is-compact .rm-loc,.rmap.is-compact .rm-grip{display:none}
.rmap.is-compact .rm-panel{overflow:visible;border-left:0;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;
  padding:0 max(var(--gutter),env(safe-area-inset-left,0px))}
.rmap.is-compact .rm-ph{position:static;padding:var(--s6) 0 var(--s2);grid-template-columns:1fr}
.rmap.is-compact .rm-panel.is-sel .rm-h1{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.rmap.is-compact .rm-h1 span[data-city]{color:var(--ink);font-size:1em}
.rmap.is-compact .rm-h1 i{color:var(--ink)}

/* ── 手機與直向平板（≤899）：地圖在上、面板在下；頁面照常捲動 ── */
@media (max-width:899px){
  .rmap{--pp:var(--gutter)}
  .rm-stage{display:flex;flex-direction:column;height:auto}
  .rm-mapcol{height:clamp(340px,54svh,480px);flex:none;touch-action:none}
  .rm-panel{overflow:visible;border-left:0;border-top:1px solid var(--line);scrollbar-gutter:auto}
  .rm-ph{position:static;padding-top:20px}
  .rm-h1{font-size:30px}
  .rm-hud{left:12px;top:12px;gap:6px}
  .rm-plate b{font-size:20px;padding:6px 12px 6px 14px}
  .rm-seg button{min-height:40px;font-size:18px;padding:0 14px 0 16px}
  .rm-psub{display:none}
  .rm-ctl{right:12px;top:12px}
  .rm-zoom .rm-zin,.rm-zoom .rm-zout{display:none}
  .rm-mob{display:flex}
  .rm-b{width:44px;height:44px}
  .rm-b svg{width:20px;height:20px}
  .rm-layers{left:10px;bottom:10px;max-width:calc(100% - 52px);gap:6px}
  .rm-rails{padding:3px;gap:2px}
  .rm-lk{display:none}
  .rm-lchip{height:36px;padding:0 11px 0 9px;font-size:13.5px}
  .rm-lchip .l{display:none}.rm-lchip .s{display:inline}
  .rm-lchip.more{height:42px;padding:0 12px}
  .rm-basel{bottom:50px;min-width:160px}
  .rm-lchip.b{height:40px}
  .rm-mode button{min-height:36px;padding:0 14px}
  .rm-m .maplibregl-ctrl-bottom-right{padding:0 8px 8px 0}
  .rm-ch{font-size:27px}
  .rm-one{font-size:15.5px}
  .rm-tx p{font-size:15.5px}
  .rm-chip{min-height:40px;padding:0 14px;font-size:14px}
  .rm-zb,.rmap[data-mode=area] .rm-zb{min-height:48px}
  .rm-gl{padding:5px}
  .rm-gi{gap:8px;padding:5px}
  .rm-gi img,.rm-gi .ph{width:38px;height:38px}
  .rm-gi b{font-size:13.5px}
  .rm-zd{padding-left:12px}
  .rm-home .rm-zl{gap:0 4px}
  .rm-ir{min-height:44px;font-size:14px}
  .rm-js .rm-z.fold .rm-zx{min-height:44px}

  /* 全螢幕：地圖鋪滿，面板變成底部面板（把手：收起／一半／全開） */
  .rmap.is-full .rm-mapcol{position:fixed;inset:0;z-index:9600;height:100dvh;padding-top:env(safe-area-inset-top,0px)}
  .rmap.is-full .rm-hud{top:calc(12px + env(safe-area-inset-top,0px))}
  .rmap.is-full .rm-ctl{top:calc(12px + env(safe-area-inset-top,0px))}
  .rmap.is-full .rm-panel{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;border:0;z-index:9601;
    border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(20,28,45,.18);background:var(--paper);
    max-height:var(--sheet-peek,150px);transition:max-height .25s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
  /* 底部面板以高度（而非位移）收合：半開時面板的捲動區就是看得到的那一段，底部操作列（sticky）因此永遠在畫面內 */
  .rmap.is-full .rm-panel[data-snap=full]{max-height:85dvh}
  .rmap.is-full:has(.rm-panel.is-sel){--sheet-peek:clamp(300px,50dvh,440px)}
  .rmap.is-full .rm-panel[data-snap=min]{--sheet-peek:30px}
  .rmap.is-full .rm-grip{display:block;position:sticky;top:0;z-index:3;width:100%;height:26px;margin:0;border:0;background:var(--paper);cursor:grab;touch-action:none}
  .rmap.is-full .rm-grip::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line)}
  .rmap.is-full .rm-ph{padding-top:4px}
  .rmap.is-full .rm-panel.is-sel .rm-ph{padding-top:0;padding-bottom:6px;border-bottom:0}
  .rmap.is-full .rm-area{padding-top:6px}
  .rmap.is-full .maplibregl-ctrl-bottom-right{bottom:calc(var(--sheet-peek,150px) + 4px)}
  .rmap.is-full .rm-layers{bottom:calc(var(--sheet-peek,150px) + 10px)}
  html.rm-lock,html.rm-lock body{overflow:hidden}
}
@media (max-width:899px) and (min-width:600px){.rm-mapcol{height:min(58svh,600px)}}
@media (prefers-reduced-motion:reduce){
  .rm-area{animation:none}.rm-m canvas,.rmap.is-full .rm-panel,.rm-zb::after{transition:none}
}

/* ── 內容（提案 2）：區塊標題上方 2px 墨線；商圈導覽改成「左圖右文」橫列、細線分隔 ── */
main .sec-h{padding-top:var(--s4);border-top:2px solid var(--ink)}
.areas{display:block}
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start;padding:var(--s7) 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible}
.sec-h+.areas>.area:first-child,.city+.areas>.area:first-child{padding-top:var(--s3)}
.area .ph{border-radius:12px;aspect-ratio:4/3;overflow:hidden}
.area .body{padding:0}
.area h3{font-size:28px;letter-spacing:.04em}
.area .head{flex-direction:column;align-items:flex-start;gap:4px}
.area p{font-size:16px;line-height:1.95;color:#2c313b}
/* 商圈卡：先露照片、標題、第一段；食・藝・衣三列收在「繼續閱讀」 */
.rm-foldb{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0;border:0;background:none;font:600 14px var(--f-body);color:var(--ai);cursor:pointer}
.rm-foldb:hover{text-decoration:underline;text-underline-offset:4px}
.rm-foldb span{font-size:11px}
.area.rm-fold:not(.open) .looks{display:none}
.area.rm-fold.open .rm-foldb{margin-bottom:var(--s2)}
@media (max-width:1023px){.area{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s5)}}
@media (max-width:760px){
  .area{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) 0;border-top:0}
  .area .ph{display:block;aspect-ratio:16/10;width:100%}
  .area .body{padding:0}
  .area h3{font-size:24px}
  .sec-h .en,.area .en{display:inline}
}
/* 四張地圖：卡片說明限 2 行 */
.mapcard p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* 概覽「城市介紹」：概述先露 3 行；分區說明整段摺疊 */
.intro .rm-ip{margin-bottom:0}
.intro .rm-ip.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rm-ipb{appearance:none;display:inline-flex;align-items:center;min-height:40px;margin:4px 0 0;padding:0;border:0;background:none;font:600 14px var(--f-body);color:var(--ai);cursor:pointer}
.rm-ipb:hover{text-decoration:underline;text-underline-offset:4px}
.rm-zx{margin:var(--s4) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rm-zx summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;font:700 16px/1.4 var(--f-display);letter-spacing:.06em;color:var(--ink)}
.rm-zx summary::-webkit-details-marker{display:none}
.rm-zx summary span{margin-right:auto;font:500 13px var(--f-mono);color:var(--ink-3)}
.rm-zx summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--ink-3),var(--ink-3)) center/12px 1.5px no-repeat,linear-gradient(var(--ink-3),var(--ink-3)) center/1.5px 12px no-repeat;transition:transform .18s}
.rm-zx[open] summary::after{transform:rotate(45deg)}
.rm-zx summary:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-zones-x{margin:0 0 var(--s4);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 var(--s6);max-width:none}
.rm-zones-x div{padding:var(--s3) 0;border-top:1px solid var(--line)}
.rm-zones-x dt{display:flex;align-items:center;gap:8px;font:700 15px/1.4 var(--f-display);letter-spacing:.08em;color:var(--ink)}
.rm-zones-x dt i{flex:none;width:10px;height:10px;border-radius:3px;background:var(--zc)}
.rm-zones-x dd{margin:4px 0 0;font-size:14px;line-height:1.75;color:var(--ink-2)}
.intro h3{margin-top:var(--s6)}
.intro .sec-h+h3{margin-top:0}

/* ── 商圈導覽 × 地圖（build_page.py 產生的 SVG）：章首索引圖、卡片位置小圖、「在地圖上看」 ── */
.rm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rm-sprite .s{fill:#e4e2db}
.rm-sprite .z{fill:none;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rm-ix{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s6);align-items:center;margin:var(--s3) 0 var(--s6);padding:0 0 var(--s6);border-bottom:1px solid var(--line)}
.rm-ix-m{position:relative;border-radius:14px;background:#f6f6f4;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.rm-ix-m svg{display:block;width:100%;height:auto}
.rm-ix .a path{fill:var(--zc);fill-opacity:.13;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill-opacity .15s}
.rm-ix .a path.g{fill-opacity:.5}
.rm-ix .a path.on{fill-opacity:.85}
.rm-ix .r{fill:none;stroke:var(--c,#7fae4f);stroke-width:2.4;stroke-opacity:.85;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rm-ix-n{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1b1f27;color:#fff;text-decoration:none;
  font:700 12.5px/1 var(--f-mono);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,28,45,.25);transition:transform .15s,background .15s}
.rm-ix-n:hover,.rm-ix-n.on{background:var(--zc);transform:translate(-50%,-50%) scale(1.18);z-index:2}
.rm-ix-n:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-ix figcaption{min-width:0}
.rm-ix-h{margin:0 0 var(--s3);font:700 17px/1.4 var(--f-display);letter-spacing:.06em;color:var(--ink)}
.rm-ix-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4);border-top:1px solid var(--line)}
.rm-ix-l li{border-bottom:1px solid var(--line)}
.rm-ix-l a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:52px;padding:7px 4px;text-decoration:none;color:var(--ink);border-radius:6px}
.rm-ix-l b{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1b1f27;color:#fff;font:700 11.5px/1 var(--f-mono);transition:background .15s}
.rm-ix-l span{font:700 14.5px/1.3 var(--f-display);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-ix-l small{font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;color:var(--zc);filter:brightness(.8)}
.rm-ix-l a:hover b,.rm-ix-l a.on b{background:var(--zc)}
.rm-ix-l a:hover span,.rm-ix-l a.on span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.rm-ix-l a:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
.rm-ix-t{margin:var(--s3) 0 0;font-size:13px;line-height:1.7;color:var(--ink-3)}
.rm-ix-t .rls{display:flex;flex-wrap:wrap;gap:2px 0;margin-bottom:4px}
.rm-ix-t .rl{display:inline-flex;align-items:center;gap:6px;margin-right:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.rm-ix-t .rl i{width:16px;height:3px;border-radius:2px;background:var(--c)}
.area .ph{position:relative}
.rm-loc2{position:absolute;right:12px;bottom:12px;width:104px;height:auto;padding:7px;border-radius:10px;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(20,28,45,.22);pointer-events:none}
.rm-loc2 .t{fill:var(--zc);stroke:var(--zc);stroke-width:1;vector-effect:non-scaling-stroke}
.rm-loc2 circle{fill:none;stroke:#1b1f27;stroke-width:1.6;vector-effect:non-scaling-stroke}
.rm-cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 4px!important;font-size:13px!important;line-height:1.4!important}
.rm-cn{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1b1f27;color:#fff;font:700 12px/1 var(--f-mono)}
.rm-cz2{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--f-body);letter-spacing:.08em;color:var(--ink-2)}
.rm-cz2 i{width:9px;height:9px;border-radius:2px;background:var(--zc)}
.rm-cz2 em{font-style:normal;color:var(--ink-3)}
.rm-cz2 em::before{content:"·";margin:0 6px 0 0}
.rm-cgo{appearance:none;display:inline-flex;align-items:center;gap:5px;min-height:34px;margin:0 0 0 auto;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);
  font:600 13px/1 var(--f-body);color:var(--ai);cursor:pointer;transition:border-color .15s,background .15s}
.rm-cgo:hover{border-color:var(--ai);background:color-mix(in srgb,var(--ai) 6%,var(--sheet))}
.rm-cgo:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
@media (max-width:1023px){.rm-ix{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:760px){
  .rm-ix{margin-bottom:var(--s4);padding-bottom:var(--s4)}
  .rm-ix-n{width:24px;height:24px;font-size:11.5px}
  .rm-ix-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
  .rm-ix-l a{min-height:48px;column-gap:8px}
  .rm-ix-l span{font-size:14px}
  .rm-loc2{width:84px;right:10px;bottom:10px;padding:6px}
  .rm-cgo{min-height:40px}
}
.rm-ix+.areas>.area:first-child{padding-top:var(--s5)}

/* 路線聚焦提示：點一條線後出現在地圖上方中央 */
.rm-rfocus{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid rgba(27,31,39,.12);border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 6px 18px rgba(20,28,45,.14);
  font:700 13.5px/1.2 var(--f-body,system-ui);color:#1b1f27;white-space:nowrap;max-width:calc(100% - 120px)}
.rm-rfocus[hidden]{display:none}
.rm-rfocus i{width:18px;height:5px;border-radius:3px;flex:none}
.rm-rfocus span{overflow:hidden;text-overflow:ellipsis}
.rm-rfocus button{flex:none;width:26px;height:26px;border-radius:50%;border:0;background:#f0efec;color:#1b1f27;font-size:16px;line-height:26px;cursor:pointer}
.rm-rfocus button:hover{background:#e3e2de}
@media (max-width:899px){.rm-rfocus{top:auto;bottom:62px;font-size:13px}}

/* 回到全覽：右上縮放鈕下方的文字按鈕 */
.rm-overview{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 12px 0 10px;border:0;border-radius:999px;
  background:#fff;color:#1b1f27;font:600 13px/1 var(--f-body,system-ui);letter-spacing:.04em;cursor:pointer;box-shadow:0 1px 4px rgba(20,28,45,.22);white-space:nowrap}
.rm-overview svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rm-overview:hover{background:#f3f2ef}
.rm-overview:focus-visible{outline:2px solid #c8962b;outline-offset:2px}

/* 商圈卡片「完整導覽」（連到 area-<slug>.html；tools/area-guides） */
.rm-cfull{display:inline-flex;align-items:center;gap:5px;min-height:34px;margin:0 0 0 auto;padding:0 14px;border:1px solid var(--ai);border-radius:999px;background:var(--ai);
  font:600 13px/1 var(--f-body);color:var(--paper);text-decoration:none;transition:background .15s,border-color .15s}
.rm-cfull:hover{background:color-mix(in srgb,var(--ai) 86%,#000);border-color:color-mix(in srgb,var(--ai) 86%,#000)}
.rm-cfull:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rm-cfull+.rm-cgo{margin-left:0}
@media (max-width:760px){
  .rm-cmeta:has(.rm-cfull) .rm-cz2{flex:1 1 calc(100% - 40px)}
  .rm-cfull,.rm-cfull+.rm-cgo{flex:1 1 calc(50% - 6px);justify-content:center;margin:0;min-height:40px}
}

/* ── 區域面板・手機（≤760）：主題白卡收起，改成 sheet 底部固定的操作列（提案 E）；半開、全開、面板接在地圖下方時都看得到 ── */
@media (max-width:760px){
  .rm-act .rm-ae{display:none}
  .rm-act:not(:has(.rm-gb)){display:none}
  .rm-area:has(>.rm-dock:not([hidden])){padding-bottom:0}
  .rm-dock{display:block;position:sticky;bottom:0;z-index:2;margin:24px calc(-1 * var(--pp)) 0;padding:10px var(--pp) calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(20,28,45,.08)}
  .rm-dock[hidden]{display:none}
  .rmap.is-full .rm-dock{padding-bottom:12px}
  .rmap.is-full .rm-panel[data-snap=min] .rm-dock{visibility:hidden}
  .rm-dock .rm-mh{padding:0 2px 8px}
  .rm-dock .rm-mh b{font-size:14px}
  .rm-dr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.35fr);gap:6px}
  .rm-db{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;border-radius:10px;text-decoration:none;color:var(--ink);
    background:color-mix(in srgb,var(--tc) 6%,var(--sheet));border:1px solid color-mix(in srgb,var(--tc) 14%,var(--sheet))}
  .rm-db .g{font:700 17px/1 var(--f-display);color:var(--tc)}
  .rm-db .n{font:500 13px/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
  a.rm-db:active{background:color-mix(in srgb,var(--tc) 14%,var(--sheet));border-color:var(--tc)}
  a.rm-db:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
  .rm-db.zero{opacity:.45;background:var(--sheet);border-color:var(--line)}
  .rm-db.all{background:var(--ai);border-color:var(--ai)}
  .rm-db.all .g{font:600 12.5px/1 var(--f-body);letter-spacing:.06em;color:var(--paper)}
  .rm-db.all .n{color:var(--paper)}
}