/* area-overlay.css — 地圖「區域」底色圖層（搭配 area-overlay.js）。按鈕與定位鈕同一套：白底、圓角、淡陰影。 */
.ao-ctl{margin:0 10px 10px 0!important;border:0!important;border-radius:999px!important;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.3)!important}
.ao-btn{display:flex;align-items:center;gap:5px;height:42px;padding:0 14px 0 11px;border:0;border-radius:999px;background:#fff;color:#3c4250;
  font:600 13.5px/1 var(--f-body,system-ui,sans-serif);letter-spacing:.06em;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background .15s,color .15s}
.ao-btn svg{width:19px;height:19px;flex:none}
.ao-btn:hover{background:#f3f4f6}
.ao-btn:focus-visible{outline:3px solid #6b8fd6;outline-offset:-3px}
.ao-btn[aria-pressed="true"]{background:#22365c;color:#fff}
.ao-btn[aria-pressed="true"]:hover{background:#2b4170}
.ao-btn[data-s="wait"] svg{animation:ao-pulse 1s ease-in-out infinite alternate}
@keyframes ao-pulse{from{opacity:1}to{opacity:.3}}

/* 區域名稱：分區深色字＋白色光暈，不擋點擊 */
.ao-lab{pointer-events:none!important}
.ao-lab span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:650 12px/1 var(--f-body,system-ui,sans-serif);letter-spacing:.04em;
  color:var(--zd,#3c4250);text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 5px #fff,0 0 6px rgba(255,255,255,.9);opacity:.92;transition:opacity .18s}
.ao-lab.off span{opacity:0}
.ao-lab.hi span{opacity:1;font-weight:800}
@media (max-width:760px){.ao-lab span{font-size:11.5px}}

/* 卡片 */
.ao-pop .leaflet-popup-content-wrapper{border-radius:14px;padding:0;box-shadow:0 6px 24px rgba(15,25,45,.22)}
.ao-pop .leaflet-popup-content{margin:0;width:auto!important;min-width:220px;max-width:280px}
.ao-pop .leaflet-popup-tip{box-shadow:none}
.ao-pop a.leaflet-popup-close-button{top:6px;right:6px;width:28px;height:28px;font:400 20px/26px system-ui,sans-serif;color:#8a909b;border-radius:50%}
.ao-pop a.leaflet-popup-close-button:hover{background:#f0f1f3;color:#1b1f27}
.ao-card{padding:13px 16px 14px;border-top:4px solid var(--zc);border-radius:14px;font-family:var(--f-body,system-ui,sans-serif);color:#1b1f27}
.ao-z{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0 26px 4px 0!important;font:600 11.5px/1.3 var(--f-body,system-ui,sans-serif);letter-spacing:.08em;color:var(--zd)}
.ao-z i{width:9px;height:9px;border-radius:3px;background:var(--zc);flex:none}
.ao-z b,.ao-z span{white-space:nowrap;font-weight:inherit}
.ao-z span{color:#6b7280;font-weight:500;letter-spacing:.04em}
.ao-z span::before{content:"";display:inline-block;width:1px;height:10px;margin:0 7px 0 1px;background:currentColor;opacity:.45;vertical-align:-1px}
.ao-card h3{margin:0 26px 4px 0;font:700 18px/1.3 var(--f-display,var(--f-body,serif));letter-spacing:.04em;color:#1b1f27}
.ao-one{margin:0 0 10px!important;font-size:13.5px;line-height:1.6;color:#4b5263}
.ao-go{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--zd);color:#fff!important;
  font-size:13.5px;font-weight:600;text-decoration:none!important}
.ao-go span{transition:transform .15s}
.ao-go:hover span{transform:translateX(3px)}
@media (max-width:760px){
  .ao-card h3{font-size:19px}
  .ao-one{font-size:14.5px}
  .ao-go{min-height:44px;padding:0 16px;font-size:15px}
}

/* 深色 */
:root[data-theme="dark"] .ao-btn{background:#1f2430;color:#d6dae2}
:root[data-theme="dark"] .ao-btn:hover{background:#2a3040}
:root[data-theme="dark"] .ao-btn[aria-pressed="true"]{background:#8fa8d6;color:#12151b}
:root[data-theme="dark"] .ao-lab span{color:color-mix(in srgb,var(--zd) 45%,#fff);text-shadow:0 0 2px #000,0 0 4px #000,0 0 6px rgba(0,0,0,.8)}
:root[data-theme="dark"] .ao-pop .leaflet-popup-content-wrapper,:root[data-theme="dark"] .ao-pop .leaflet-popup-tip{background:#1f2430}
:root[data-theme="dark"] .ao-card,:root[data-theme="dark"] .ao-card h3{color:#e8eaee}
:root[data-theme="dark"] .ao-one{color:#b8bec9}
:root[data-theme="dark"] .ao-z{color:color-mix(in srgb,var(--zd) 45%,#fff)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ao-btn{background:#1f2430;color:#d6dae2}
  :root:not([data-theme="light"]) .ao-btn:hover{background:#2a3040}
  :root:not([data-theme="light"]) .ao-btn[aria-pressed="true"]{background:#8fa8d6;color:#12151b}
  :root:not([data-theme="light"]) .ao-lab span{color:color-mix(in srgb,var(--zd) 45%,#fff);text-shadow:0 0 2px #000,0 0 4px #000,0 0 6px rgba(0,0,0,.8)}
  :root:not([data-theme="light"]) .ao-pop .leaflet-popup-content-wrapper,:root:not([data-theme="light"]) .ao-pop .leaflet-popup-tip{background:#1f2430}
  :root:not([data-theme="light"]) .ao-card,:root:not([data-theme="light"]) .ao-card h3{color:#e8eaee}
  :root:not([data-theme="light"]) .ao-one{color:#b8bec9}
  :root:not([data-theme="light"]) .ao-z{color:color-mix(in srgb,var(--zd) 45%,#fff)}
}
@media (prefers-reduced-motion:reduce){.ao-btn,.ao-lab span,.ao-go span{transition:none}.ao-btn[data-s="wait"] svg{animation:none}}

/* ════════ 區域模式（?area=<id>）：頂端「新宿・美食」區塊、地圖提示膠囊、其他區域名稱 ════════ */
/* 頂端區塊：與地區頁面板同一套編排語言（小字分區標、襯線標題、細線分隔、文字連結；不用漸層與實心膠囊） */
.aa-head{position:relative;z-index:5;padding:18px 20px 0;border-bottom:1px solid var(--line,#dfe2dc);background:var(--sheet,#fff);
  font-family:var(--f-body,system-ui,sans-serif);color:var(--ink,#1b1f27)}
aside.side>.aa-head,.am-side>.aa-head{position:sticky;top:0}
.aa-k{margin:0;display:flex;align-items:center;gap:8px;font:500 11px/1.4 var(--f-mono,ui-monospace,monospace);letter-spacing:.16em;color:var(--ink-2,#5b6270)}
.aa-k i{width:9px;height:9px;border-radius:2px;background:var(--zc);flex:none}
.aa-k span{color:var(--ink-3,#8a909b)}
.aa-k span::before{content:"·";margin:0 7px 0 1px}
.aa-h{margin:6px 0 0;font:900 26px/1.25 var(--f-display,serif);letter-spacing:.05em;color:var(--ink,#1b1f27)}
.aa-th{color:var(--tc)}
.aa-car{display:none}
.aa-sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2,#5b6270)}
.aa-sub b{font:500 13.5px/1 var(--f-mono,ui-monospace,monospace);color:var(--ink,#1b1f27)}
.aa-row{display:flex;align-items:center;gap:18px;margin:4px 0 0}
.aa-dd{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;font-size:13.5px;font-weight:600;color:var(--ai,#22365c);cursor:pointer}
.aa-dd::after{content:"";width:6px;height:6px;margin:-4px 0 0 1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.aa-dd:hover .aa-ddl{text-decoration:underline;text-underline-offset:4px}
.aa-dd:focus-within{outline:2px solid var(--glow,#f2b632);outline-offset:2px;border-radius:4px}
.aa-ddl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aa-dd select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.aa-exit{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;color:var(--ink-2,#5b6270)!important;font-size:13.5px;font-weight:600;text-decoration:none!important;white-space:nowrap}
.aa-exit span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line,#dfe2dc);font-size:10px;color:var(--ink-3,#8a909b)}
.aa-exit:hover{color:var(--ink,#1b1f27)!important}
.aa-exit:hover span{box-shadow:inset 0 0 0 1px var(--ink-3,#8a909b);color:var(--ink,#1b1f27)}
/* 換主題：底線分頁（目前主題＝主題色底線），數量用等寬小字 */
.aa-seg{display:flex;justify-content:space-between;gap:12px;margin:2px -20px 0;padding:0 20px;border-top:1px solid var(--line,#dfe2dc);overflow-x:auto;scrollbar-width:none}
.aa-seg::-webkit-scrollbar{display:none}
.aa-seg a,.aa-seg span.off{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink-2,#5b6270);
  text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px transparent}
.aa-seg a span,.aa-seg span.off span{font:500 11.5px/1 var(--f-mono,ui-monospace,monospace);color:var(--ink-3,#8a909b)}
.aa-seg a:hover{color:var(--ink,#1b1f27)}
.aa-seg a.on{color:var(--ink,#1b1f27);font-weight:700;box-shadow:inset 0 -2px var(--tc)}
.aa-seg a.on span{color:var(--tc)}
.aa-seg span.off{opacity:.45;cursor:default}
.aa-seg a:focus-visible,.aa-exit:focus-visible{outline:2px solid var(--glow,#f2b632);outline-offset:-2px;border-radius:4px}
:root[data-theme="dark"] .aa-th,:root[data-theme="dark"] .aa-seg a.on span{color:color-mix(in srgb,var(--tc) 55%,#fff)}
:root[data-theme="dark"] .aa-seg a.on{box-shadow:inset 0 -2px color-mix(in srgb,var(--tc) 55%,#fff)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .aa-th,:root:not([data-theme="light"]) .aa-seg a.on span{color:color-mix(in srgb,var(--tc) 55%,#fff)}
  :root:not([data-theme="light"]) .aa-seg a.on{box-shadow:inset 0 -2px color-mix(in srgb,var(--tc) 55%,#fff)}
}

/* 區域模式下不需要的原有控制：「區域」開關、城市快捷鍵（新宿／原宿…）、手機的城市快捷列 */
.aa-on .map-tools,.aa-on #mChips{display:none!important}

.aa-badge{display:flex;align-items:center;gap:10px;margin:12px 12px 0 0!important;padding:6px 6px 6px 14px;border-radius:999px;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.16);font:700 13.5px/1 var(--f-body,system-ui,sans-serif);color:#1b1f27}
.aa-badge i{width:8px;height:8px;border-radius:50%;background:var(--tc)}
.aa-badge a{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#eceee9;color:#1b1f27!important;font-size:12.5px;font-weight:600;text-decoration:none!important}
.aa-badge a:hover{background:#e0e2dc}

.aa-lab{width:0!important;height:0!important}
.aa-lab span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;padding:2px 4px;font:650 12px/1 var(--f-body,system-ui,sans-serif);letter-spacing:.04em;color:#4b515c;cursor:pointer;
  text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 5px #fff;transition:opacity .18s}
.aa-lab span:hover{color:#1b1f27;text-decoration:underline;text-underline-offset:3px}
.aa-lab.off{pointer-events:none!important}
.aa-lab.off span{opacity:0}
.aa-lab.in span{font-weight:700;color:#2c313b}
.aa-none{font-size:13px;color:#8a909b}

@media (max-width:760px){
  /* 手機：區塊浮在地圖頂端（全寬），原本的頂端列（類別列、綜合地圖的主題列）往下移；點標題＝換區域 */
  .aa-m .stage>.aa-head,.aa-m .am-mapw>.aa-head{position:absolute;left:0;right:0;top:0;z-index:1001;display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"h x" "sub sub" "seg seg";align-items:center;padding:8px 14px 0;box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .aa-m .aa-k{display:none}
  .aa-m .aa-h{grid-area:h;margin:0;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .aa-m .aa-car{display:inline-block;width:7px;height:7px;margin:0 0 5px 8px;border-right:2px solid var(--ink-3,#8a909b);border-bottom:2px solid var(--ink-3,#8a909b);transform:rotate(45deg)}
  .aa-m .aa-sub{grid-area:sub;margin:0 0 4px;font-size:12px}
  .aa-m .aa-sub b{font-size:12.5px}
  .aa-m .aa-row{display:contents}
  .aa-m .aa-dd{position:absolute;left:10px;top:4px;width:calc(100% - 150px);height:44px;min-height:0;padding:0;opacity:0}
  .aa-m .aa-dd::after{display:none}
  .aa-m .aa-exit{grid-area:x;min-height:44px;margin-left:10px;font-size:13px}
  .aa-m .aa-seg{grid-area:seg;gap:10px;margin:0 -14px;padding:0 14px}
  .aa-m .aa-seg a,.aa-m .aa-seg span.off{min-height:42px;font-size:13.5px}
  .aa-badge{display:none}
}

:root[data-theme="dark"] .aa-badge{background:#1f2430;color:#e8eaee}
:root[data-theme="dark"] .aa-badge a{background:#2a3040;color:#e8eaee!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .aa-badge{background:#1f2430;color:#e8eaee}
  :root:not([data-theme="light"]) .aa-badge a{background:#2a3040;color:#e8eaee!important}
}

/* 手機區域模式：頂端類別列（各主題地圖 .catbar）讓位給區域標題區塊（--aa-h 由 area-overlay.js 量測） */
@media (max-width:760px){
  .aa-m .catbar{top:var(--aa-h,0px)}
}