/* 綜合地圖（tokyo-all-map／osaka-kyoto-all-map）。搭配 site.css、map-mobile.css。
   桌機：左欄列表（400px）＋右側地圖，類型分段控制浮在地圖底部，詳情是地圖右上的浮動卡。
   手機（≤760px）：地圖滿版，類型分段控制浮在地圖頂端，列表是底部三段抽屜，詳情抽屜交給 map-mobile.js。 */
html,body{height:100%}
body.am{overflow:hidden;overscroll-behavior:none}
.am-ex{position:fixed;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + var(--head-h));display:flex;background:var(--paper)}
.am-glass{background:color-mix(in srgb,var(--sheet) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 10px 30px -12px rgba(22,30,48,.28),0 2px 6px -2px rgba(22,30,48,.08);border:1px solid color-mix(in srgb,var(--sheet) 60%,transparent)}

/* 左欄／抽屜 */
.am-side{position:relative;z-index:500;width:400px;flex:none;display:flex;flex-direction:column;background:var(--sheet);border-right:1px solid var(--line)}
.am-sh{flex:none;padding:var(--s5) var(--s5) var(--s3)}
.am-grab{display:none}
.am-ttl h1{margin:0;font:700 26px/1.25 var(--f-display);letter-spacing:.04em}
.am-ttl p{margin:var(--s1) 0 0;color:var(--ink-3);font-size:13px;line-height:1.5}
.am-mode{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper-2);border-radius:12px;padding:3px;margin:var(--s4) 0 0}
.am-mode button{height:38px;border:0;background:none;border-radius:9px;cursor:pointer;color:var(--ink-2);font:500 14px var(--f-body);position:relative}
.am-mode button::after{content:"";position:absolute;inset:-3px 0}
.am-mode button[aria-selected=true]{background:var(--sheet);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.am-sum{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin:var(--s3) 2px 0;font-size:12.5px;color:var(--ink-3);min-height:20px}
.am-sum b{font:700 15px var(--f-display);color:var(--ink)}
.am-sum b em{font:500 13px var(--f-mono);font-style:normal;color:var(--ink-2);margin-left:4px}
.am-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--s4) var(--s5);border-top:1px solid var(--line)}
.am-q{display:flex;align-items:center;gap:8px;height:44px;border-radius:12px;background:var(--paper-2);padding:0 12px;color:var(--ink-3);margin:var(--s3) 0 var(--s1)}
.am-q svg{width:16px;height:16px;flex:none}
.am-q input{border:0;background:none;outline:0;flex:1;font:16px var(--f-body);color:var(--ink);min-width:0}
.am-q input::placeholder{color:var(--ink-3)}
.am-q button{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink-3);font-size:16px;cursor:pointer}
.am-note{margin:var(--s2) 2px;padding:10px 12px;border-radius:10px;background:var(--paper);color:var(--ink-2);font-size:13px;line-height:1.55}
.am-empty{padding:var(--s5) var(--s2);color:var(--ink-3);font-size:14px}

/* 列表列 */
.am-list{list-style:none;margin:0;padding:0}
.am-row{display:flex;gap:12px;align-items:flex-start;padding:11px 6px;border-bottom:1px solid var(--line);cursor:pointer;min-height:56px}
.am-row:hover{background:var(--paper)}
.am-row[aria-current=true]{background:color-mix(in srgb,var(--c) 9%,var(--sheet))}
.am-row .tx{min-width:0;flex:1}
.am-row .nm{display:block;font-weight:600;font-size:15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.am-row .mt{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-row .rt{font:500 12px var(--f-mono);color:var(--ink-2);white-space:nowrap;padding-top:2px;text-align:right}
.am-row .hv{color:var(--shu)}
.am-g{width:24px;height:24px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font:700 12.5px/1 var(--f-display);
  background:color-mix(in srgb,var(--c,var(--ink-3)) 14%,var(--sheet));color:var(--c,var(--ink-3))}
.am-g.solid{background:var(--c,var(--ink-3));color:#fff}
.am-more{display:block;width:100%;margin:var(--s3) 0;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--sheet);color:var(--ink-2);cursor:pointer;font:inherit;font-size:14px}

/* 街區清單 */
.am-city-h{margin:var(--s5) 2px var(--s1);font:500 11px var(--f-mono);letter-spacing:.18em;color:var(--ink-3)}
.am-z{padding:12px 6px;border-bottom:1px solid var(--line);cursor:pointer;min-height:60px}
.am-z:hover{background:var(--paper)}
.am-z .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.am-z .t b{font:700 16px var(--f-display);letter-spacing:.02em}
.am-z .t span{font:500 12.5px var(--f-mono);color:var(--ink-2);white-space:nowrap}
.am-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:8px 0 6px;background:var(--paper-2);gap:2px}
.am-bar i{display:block;height:100%}
.am-cnt{display:flex;gap:12px;flex-wrap:wrap;font:500 11.5px var(--f-mono);color:var(--ink-3)}
.am-cnt span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:1px}
.am-back{border:0;background:none;color:var(--ai);cursor:pointer;min-height:44px;padding:0 2px;font:500 14px var(--f-body);display:inline-flex;align-items:center}
.am-zh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px var(--s1)}
.am-zh b{font:700 20px var(--f-display)}
.am-zh span{font:500 12.5px var(--f-mono);color:var(--ink-3)}

/* 地圖 */
.am-mapw{position:relative;flex:1;min-width:0}
#map{position:absolute;inset:0;background:#eeeeec}
#map .leaflet-gl-layer{filter:saturate(0) contrast(.94) brightness(1.03)}
.am-dots{position:absolute;left:0;top:0;pointer-events:none}
.leaflet-container{font-family:var(--f-body)}
.am-mapw .leaflet-control-attribution{font-size:10px}
.am-bub{position:relative;cursor:pointer}
.am-bub svg{display:block;filter:drop-shadow(0 4px 10px rgba(22,30,48,.22));transition:transform .15s}
.am-bub b{position:absolute;inset:0;display:grid;place-items:center;font:600 12px var(--f-mono);color:#1b1f27}
.am-bub span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;font:700 12.5px var(--f-display);white-space:nowrap;color:#1b1f27;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.am-bub:hover svg{transform:scale(1.06)}
.am-me{width:16px;height:16px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(26,115,232,.2)}

/* 類型分段控制（聚光）：桌機浮在地圖底部置中 */
.am-dock{position:absolute;z-index:600;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:10px;
  width:max-content;max-width:calc(100% - 150px)}
.am-seg{position:relative;display:flex;gap:4px;padding:5px;border-radius:22px}
.am-seg button{--c:var(--ink);height:52px;min-width:84px;padding:0 16px 0 10px;border:0;border-radius:17px;background:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  color:var(--ink-2);font:600 14px var(--f-display);transition:background .25s,color .25s}
.am-seg .am-g{width:28px;height:28px;font-size:14px;background:color-mix(in srgb,var(--ink-3) 45%,var(--sheet));color:#fff;transition:background .25s}
.am-seg small{font:500 11px var(--f-mono);color:var(--ink-3);margin-left:-2px}
.am-seg button[aria-pressed=true]{background:var(--c);color:#fff}
.am-seg button[aria-pressed=true] .am-g{background:rgba(255,255,255,.22)}
.am-seg button[aria-pressed=true] small{color:rgba(255,255,255,.78)}
.am-seg .all{min-width:64px;padding:0 16px;justify-content:center}
.am-seg .all[aria-pressed=true]{--c:var(--ink)}
.am-seg .hv{min-width:52px;padding:0;justify-content:center;font-size:18px;color:var(--shu)}
.am-seg .hv[aria-pressed=true]{--c:var(--shu)}
.am-seg .sep{width:1px;background:var(--line);margin:10px 2px}
/* 細分類：每個選中的類型一列（可多選，勾選的膠囊前面有勾號）；「清除篩選」浮在分段控制左側 */
.am-subs{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
.am-subs[hidden]{display:none}
.am-sg{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;max-width:min(100%,calc(100vw - 620px));overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.am-sg::-webkit-scrollbar{display:none}
.am-subs button{flex:none;height:36px;padding:0 14px;border:0;border-radius:999px;background:none;cursor:pointer;color:var(--ink-2);font:500 13px var(--f-body);white-space:nowrap;
  display:inline-flex;align-items:center;transition:background .2s,color .2s,padding .18s}
@media (hover:hover){.am-subs button:hover{background:color-mix(in srgb,var(--c,var(--ink)) 8%,transparent)}}
.am-subs .pa{padding:0 13px 0 5px;gap:7px;font-weight:600;color:var(--c)}
.am-subs .pa .am-g{width:26px;height:26px;font-size:13px;background:var(--c);color:#fff}
.am-subs .pa[aria-pressed=true]{background:color-mix(in srgb,var(--c) 13%,transparent)}
.am-subs [data-c]::before{content:"";flex:none;width:0;height:12px;margin-right:0;background:currentColor;opacity:0;transition:width .18s,margin .18s,opacity .18s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.9 9 9.8 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.9 9 9.8 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.am-subs [data-c][aria-pressed=true]{background:var(--c);color:#fff;padding-left:10px}
.am-subs [data-c][aria-pressed=true]::before{width:12px;margin-right:5px;opacity:1}
.am-sg[data-fr]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.am-sg[data-fl]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.am-sg[data-fl][data-fr]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
/* 「清除篩選」兩處擇一：分段控制左側（#dock[data-clr=seg]）或細分類列最前面 */
.am-clr[hidden],#dock[data-clr=seg] .am-subs .am-clr{display:none!important}
.am-dock .am-clr{--c:var(--ink);flex:none;height:38px;min-width:0;padding:0 14px 0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  color:var(--ink);font:600 13px var(--f-body);white-space:nowrap;
  background:color-mix(in srgb,var(--sheet) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 10px 30px -12px rgba(22,30,48,.28),0 2px 6px -2px rgba(22,30,48,.08);border:1px solid color-mix(in srgb,var(--sheet) 60%,transparent)}
.am-dock .am-clr::before{content:"✕";font-size:11px;color:var(--ink-3)}
@media (hover:hover){.am-dock .am-clr:hover{background:var(--sheet)}}
.am-seg .am-clr{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%)}
/* 類型多選：選中的類型在字圖右上角加一個勾 */
.am-seg .am-g{position:relative}
.am-seg .ck{position:absolute;right:-5px;top:-5px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:scale(0);transition:transform .18s}
.am-seg .ck::before{content:"";position:absolute;inset:0;background:var(--c);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.8 7.3 6 9.4 10.2 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.8 7.3 6 9.4 10.2 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.am-seg button[aria-pressed=true] .ck{transform:scale(1)}
.am-cityseg{position:absolute;z-index:600;left:16px;top:16px;display:flex;padding:3px;border-radius:999px}
.am-cityseg button{height:38px;min-width:56px;border:0;background:none;border-radius:999px;padding:0 14px;cursor:pointer;color:var(--ink-2);font:500 14px var(--f-body)}
.am-cityseg button[aria-pressed=true]{background:var(--ink);color:var(--paper);font-weight:700}

/* 詳情：桌機是地圖右上的浮動卡（手機由 map-mobile.css 變成底部抽屜） */
.detail{position:absolute;z-index:700;right:16px;top:16px;width:380px;max-height:calc(100% - 140px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--sheet);box-shadow:0 24px 48px -20px rgba(22,30,48,.45),0 2px 8px -2px rgba(22,30,48,.1)}
.detail[hidden]{display:none}
.d-close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--paper-2);color:var(--ink-2);font-size:17px;cursor:pointer;z-index:2}
.d-close::after{content:"";position:absolute;inset:-4px}
.d-scroll{overflow:auto;padding:20px 20px 4px;overscroll-behavior:contain}
.d-kk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c);font-weight:600;letter-spacing:.04em;padding-right:44px}
.detail h2{margin:6px 0 0;font:700 21px/1.35 var(--f-display);letter-spacing:.02em;padding-right:36px}
.d-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.d-meta span{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink-2)}
.d-meta .sc{font-family:var(--f-mono);background:color-mix(in srgb,var(--c) 13%,var(--sheet));color:var(--c)}
.d-d{margin:12px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.d-near{margin:18px 0 8px}
.d-near h3{margin:0 0 2px;font:500 11px var(--f-body);letter-spacing:.16em;color:var(--ink-3)}
.d-actions{flex:none;display:flex;gap:8px;padding:12px 20px 18px}
.d-actions .primary{flex:1;min-height:46px;border-radius:12px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:14.5px;font-weight:600;padding:0 12px;text-align:center;line-height:1.3}
.d-actions .marks{display:flex}
.d-actions .mark{min-height:46px;min-width:88px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.d-actions .mark[aria-pressed=true]{color:var(--shu);border-color:color-mix(in srgb,var(--shu) 35%,var(--sheet));background:color-mix(in srgb,var(--shu) 7%,var(--sheet))}

/* 頁尾出處放在列表最底下 */
.am-body .cr-mini{margin-top:var(--s6)}
.am-body .cr-mini details{display:none}
.leaflet-control-zoom{border:0!important;box-shadow:0 2px 10px rgba(22,30,48,.2)!important;border-radius:12px!important;overflow:hidden}
.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important}

@media (prefers-reduced-motion:reduce){.am-seg button,.am-seg .am-g,.am-seg .ck,.am-subs button,.am-subs button::before,.am-bub svg{transition:none}}

/* ── 手機 ── */
@media (max-width:760px){
  .am-ex{display:block}
  .am-mapw{position:absolute;inset:0}
  .leaflet-control-zoom{display:none}
  .am-dock{left:10px;right:10px;top:10px;bottom:auto;transform:none;width:auto;max-width:none;flex-direction:column-reverse;align-items:stretch;gap:8px}
  .am-seg{justify-content:space-between;gap:2px;padding:4px;border-radius:18px}
  .am-seg button{flex:1;min-width:0;height:52px;padding:0;flex-direction:column;justify-content:center;gap:2px;font-size:11.5px;border-radius:14px}
  .am-seg small,.am-seg .sep{display:none}
  .am-seg .am-g{width:24px;height:24px;font-size:12.5px}
  .am-seg .all{font-size:13.5px}
  /* 手機：所有細分類併成一條可左右拖的列，類型之間以細線分隔；「清除篩選」在最前面 */
  .am-subs{align-self:stretch;flex-direction:row;align-items:center;gap:4px;padding:5px;border-radius:999px;overflow-x:auto;scrollbar-width:none;
    background:color-mix(in srgb,var(--sheet) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
    box-shadow:0 10px 30px -12px rgba(22,30,48,.28),0 2px 6px -2px rgba(22,30,48,.08);border:1px solid color-mix(in srgb,var(--sheet) 60%,transparent)}
  .am-subs::-webkit-scrollbar{display:none}
  .am-sg{display:contents}
  .am-sg::before{content:"";flex:none;align-self:center;width:1px;height:20px;background:var(--line);margin:0 4px}
  .am-subs[data-fr]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .am-subs[data-fl]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .am-subs[data-fl][data-fr]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
  .am-subs .am-clr{height:36px;padding:0 12px 0 10px;background:var(--paper-2);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:12.5px}
  .am-cityseg{left:10px;top:auto;bottom:calc(var(--sv,150px) + 12px);transition:bottom .3s}
  .am-ex.det-open .am-cityseg{visibility:hidden}
  .am-side{position:absolute;left:0;right:0;bottom:0;width:auto;height:var(--sv,150px);border:0;border-radius:18px 18px 0 0;
    box-shadow:0 -8px 30px -12px rgba(22,30,48,.3);transition:height .3s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom,0px)}
  .am-side.drag{transition:none}
  .am-side[data-snap=full]{border-radius:0}
  .am-ex.det-open .am-side{visibility:hidden}
  .am-sh{padding:0 var(--s4) var(--s2);touch-action:none;cursor:grab}
  .am-grab{display:block;height:22px;position:relative}
  .am-grab::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
  .am-ttl{display:none}
  .am-mode{margin:0}
  .am-mode button{height:40px}
  .am-sum{margin-top:8px}
  .am-body{padding:0 var(--s4) var(--s5)}
  .am-side[data-snap=peek] .am-body{overflow:hidden}
  .detail{right:auto;top:auto;width:auto;max-height:none}
  .d-actions .primary{font-size:14px}
  .leaflet-bottom.leaflet-right{bottom:var(--sv,150px);transition:bottom .3s}
  .am-ex.det-open .leaflet-bottom.leaflet-right{visibility:hidden}
}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
