/* Racco Local 互動地圖（/map/explore/）＋地區頁、商家頁的小地圖。擁有者：地圖模組（map-*.js）。
   跟 app.css 同一套 token：方角、1px 墨線、硬陰影、黃色 hover；斷點 620／900；沒有深色模式。
   珊瑚紅只當填色（配墨色字），不拿來當米色底上的文字顏色。
   沒有 JS（html 沒有 .js）時是一般直式頁面：篩選表單＋清單；有 JS 才切成全螢幕地圖版面。 */

:root {
  --fam-restaurant: #ed6c5c;
  --fam-drink: #a9c7e8;
  --fam-cafe: #c8a27a;
  --fam-grocery: #9fc9a8;
  --fam-beauty: #f2c4ca;
  --fam-service: #526981;
  --ex-list-w: 380px;
}

/* ───────── 共用小元件 ───────── */
.ex-dot { flex: none; display: inline-block; width: 12px; height: 12px; margin-top: 6px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--fam-service); }
.ex-dot[data-marker="restaurant"] { background: var(--fam-restaurant); }
.ex-dot[data-marker="drink"] { background: var(--fam-drink); }
.ex-dot[data-marker="cafe"] { background: var(--fam-cafe); }
.ex-dot[data-marker="grocery"] { background: var(--fam-grocery); }
.ex-dot[data-marker="beauty"] { background: var(--fam-beauty); }
.ex-dot[data-marker="service"] { background: var(--fam-service); }

/* ───────── 篩選列 ───────── */
.ex-filters { padding: 10px var(--gut) 8px; border-bottom: 1px solid var(--ink); background: var(--paper); }
.ex-search { position: relative; display: flex; align-items: center; min-height: 46px; border: 1px solid var(--ink); background: var(--card); }
.ex-search:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.ex-search-icon { display: flex; padding: 0 2px 0 12px; color: var(--muted); }
.ex-search input { flex: 1; min-width: 0; height: 44px; padding: 8px 8px; border: 0; background: transparent; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
.ex-search input::-webkit-search-cancel-button { display: none; }
.ex-search input::placeholder { color: var(--muted); opacity: 1; }
.ex-search-clear { display: grid; place-items: center; width: 40px; height: 44px; border: 0; background: none; cursor: pointer; }
.ex-search-clear[hidden] { display: none; }
.ex-search-clear:hover { background: var(--yellow); }
.ex-search-go { align-self: stretch; padding: 0 16px; border: 0; border-left: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; cursor: pointer; }
.ex-search-go:hover { background: #2a3038; }

.ex-suggest { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 20; max-height: min(60vh, 440px); overflow-y: auto; border: 1px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--ink); overscroll-behavior: contain; }
.ex-suggest[hidden] { display: none; }
.ex-suggest-head { padding: 10px 12px 4px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ex-opt { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 8px 12px; border-top: 1px solid rgba(21, 25, 30, .1); cursor: pointer; line-height: 1.4; }
.ex-opt:hover, .ex-opt[aria-selected="true"] { background: var(--yellow); }
.ex-opt-name { font-size: 15px; font-weight: 700; }
.ex-opt-sub { grid-column: 1; color: var(--muted); font-size: 13px; }
.ex-opt-count { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: 0 7px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: 12px; }
.ex-suggest-none { padding: 12px; font-size: 14px; line-height: 1.6; }

.ex-chips { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 2px 4px 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ex-chips::-webkit-scrollbar { display: none; }
.ex-comm { flex: none; display: flex; gap: 6px; margin: 0; padding: 0; border: 0; }
.ex-chip { position: relative; display: inline-flex; flex: none; }
.ex-chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ex-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 14px; border: 1px solid var(--ink); background: var(--card); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ex-chip:hover input:not(:checked) + span { background: var(--yellow); }
.ex-chip input:checked + span { background: var(--ink); color: var(--paper); }
.ex-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ex-cat { flex: none; display: inline-flex; }
.ex-cat select {
  min-height: 38px; max-width: 220px; padding: 4px 34px 4px 12px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315191e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 16px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ex-cat select:hover { background-color: var(--yellow); }
.ex-apply[hidden] { display: none; }

/* ───────── 清單 ───────── */
.ex-sheet { background: var(--card); }
.ex-sheet-grab { display: none; }
.ex-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px var(--gut) 8px; border-bottom: 1px solid rgba(21, 25, 30, .15); }
.ex-count { font-size: 14px; font-weight: 700; line-height: 1.5; }
.ex-list-wrap { padding-bottom: 24px; }
.ex-list { margin: 0; padding: 0; }
.ex-row { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid rgba(21, 25, 30, .12); }
.ex-item { flex: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; width: 100%; padding: 12px var(--gut); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.ex-item { padding-right: 12px; }
.ex-item:hover { background: rgba(255, 220, 85, .35); }
.ex-item:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.ex-row.is-selected .ex-item { background: var(--yellow); }
.ex-item-body { display: grid; gap: 1px; min-width: 0; }
.ex-item-name { font-size: 15px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.ex-item-branch { color: var(--muted); font-weight: 500; }
.ex-item-meta { color: var(--muted); font-size: 13px; line-height: 1.45; }
.ex-item-comm { font-size: 12px; font-weight: 700; line-height: 1.45; }
.ex-item-comm::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid var(--ink); background: var(--yellow); content: ""; }
.ex-item-addr { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ex-item-link { flex: none; display: grid; place-items: center; width: 48px; border-left: 1px solid rgba(21, 25, 30, .12); font-weight: 800; }
.ex-item-link:hover { background: var(--yellow); }
.ex-item-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.ex-more-hint, .ex-hint { padding: 12px var(--gut); color: var(--muted); font-size: 13px; line-height: 1.6; }
.ex-hint { color: var(--ink); font-size: 14px; }
.ex-loadmore { margin: 0 var(--gut) 16px; }
.ex-error { display: grid; justify-items: start; gap: 10px; padding: 16px var(--gut); font-size: 14px; }
.ex-empty { display: flex; align-items: flex-start; gap: 14px; padding: 18px var(--gut); }
.ex-empty[hidden] { display: none; }
.ex-empty img { flex: none; width: 72px; }
.ex-empty-title { margin-bottom: 4px; font-size: 16px; font-weight: 800; line-height: 1.45; }
.ex-empty p { margin-bottom: 10px; font-size: 14px; line-height: 1.7; }

/* ───────── 選取卡片 ───────── */
.ex-card { position: relative; margin: 0 12px 10px; padding: 12px 46px 14px 14px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.ex-card[hidden] { display: none; }
.ex-card-close { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.ex-card-close:hover { background: var(--yellow); }
.ex-card-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ex-card-meta .ex-dot { margin-top: 0; }
.ex-card-name { margin: 2px 0 6px; font-family: var(--sans); font-size: 18px; font-weight: 800; letter-spacing: 0; line-height: 1.35; overflow-wrap: anywhere; }
.ex-card-name small { color: var(--muted); font-size: 14px; font-weight: 500; }
.ex-card-comm { margin-bottom: 8px; }
.ex-card-comm .chip { white-space: normal; }
.ex-card-addr { margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
.ex-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───────── 地圖區 ───────── */
.ex-mappane { display: none; }
.ex-noscript { padding: 16px var(--gut); font-size: 14px; }
.ex-viewtoggle, .ex-collapse { display: none; }

.ex-near { position: absolute; z-index: 4; right: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.ex-near:hover { background: var(--yellow); }
.ex-map-msg { position: absolute; z-index: 5; left: 96px; right: 64px; padding: 8px 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.5; }
.ex-map-msg[hidden] { display: none; }
.ex-legend { position: absolute; z-index: 4; left: 10px; max-width: 220px; border: 1px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); font-size: 13px; }
.ex-legend summary { display: flex; align-items: center; min-height: 38px; padding: 4px 12px; font-weight: 700; cursor: pointer; list-style: none; }
.ex-legend summary::-webkit-details-marker { display: none; }
.ex-legend summary::after { margin-left: 6px; content: "▾"; font-size: 10px; }
.ex-legend[open] summary::after { content: "▴"; }
.ex-legend ul { display: grid; gap: 4px; padding: 2px 12px 10px; }
.ex-legend li { display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.ex-legend .ex-dot { margin-top: 0; }

/* 群集泡泡：MapLibre 用 transform 定位外層元素，所以外觀都放在內層 span */
.mk-cluster { cursor: pointer; }
.mk-cluster > span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 7px; border: 1.5px solid var(--ink); background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; transition: box-shadow .12s ease, background-color .12s ease; }
.mk-cluster.mk-m > span { min-width: 40px; height: 40px; font-size: 14px; }
.mk-cluster.mk-l > span { min-width: 48px; height: 48px; font-size: 15px; }
.mk-cluster:hover > span { background: #ffe983; box-shadow: 4px 4px 0 var(--ink); }
.mk-server > span { border-style: dashed; }
.mk-you { width: 20px; height: 20px; }
.mk-you::after { display: block; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; background: var(--slate); box-shadow: 0 0 0 4px rgba(169, 199, 232, .7); content: ""; }

/* MapLibre 控制項換成品牌外觀 */
.maplibregl-map { font-family: var(--sans); }
.maplibregl-ctrl-group { border: 1px solid var(--ink); border-radius: 0 !important; background: var(--card); box-shadow: 3px 3px 0 var(--ink) !important; }
.maplibregl-ctrl-group button { width: 40px; height: 40px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--ink); }
.maplibregl-ctrl button:not(:disabled):hover { background-color: var(--yellow); }
.maplibregl-ctrl button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.maplibregl-ctrl-attrib { background: rgba(246, 241, 232, .92); font-size: 11px; }
.maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 0; }
.maplibregl-ctrl-attrib a { color: var(--ink); text-decoration: underline; }
.maplibregl-cooperative-gesture-screen { font-family: var(--sans); font-size: 18px; }

/* ───────── 有 JS：全螢幕地圖版面 ───────── */
html.js body.explore-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.js .ex-app { position: relative; height: calc(100vh - var(--header)); height: calc(100dvh - var(--header)); overflow: hidden; }
html.js .ex-mappane { display: block; position: absolute; inset: 0; background: #ebe4d6; }
html.js .ex-map { position: absolute; inset: 0; }
html.js .ex-map:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
html.js .ex-app.is-loading .ex-mappane::after { position: absolute; z-index: 6; left: 0; top: var(--ex-filters-h, 108px); width: 30%; height: 3px; background: var(--ink); animation: ex-load 1.1s ease-in-out infinite; content: ""; }
@keyframes ex-load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { html.js .ex-app.is-loading .ex-mappane::after { animation: none; width: 100%; opacity: .35; } }

/* 手機與平板（<900px）：地圖滿版、篩選列浮在上方、清單是可拖曳的底部面板 */
@media (max-width: 899.98px) {
  html.js .ex-filters { position: absolute; top: 0; left: 0; right: 0; z-index: 9; padding: 8px 10px 4px; background: color-mix(in srgb, var(--paper) 96%, transparent); }
  html.js .ex-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; flex-direction: column;
    height: calc(100% - var(--ex-filters-h, 108px) - 6px); border-top: 1px solid var(--ink);
    box-shadow: 0 -3px 0 rgba(21, 25, 30, .08); transform: translate3d(0, calc(100% - 128px), 0); will-change: transform;
  }
  html.js .ex-sheet[data-snap="full"] { transform: none; }
  html.js .ex-sheet.is-animating { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  @media (prefers-reduced-motion: reduce) { html.js .ex-sheet.is-animating { transition: none; } }
  html.js .ex-sheet-grab { display: flex; justify-content: center; padding: 4px 0 0; touch-action: none; cursor: grab; }
  html.js .ex-sheet-handle { display: grid; place-items: center; width: 72px; height: 26px; border: 0; background: none; cursor: grab; touch-action: none; }
  html.js .ex-sheet-handle span { display: block; width: 44px; height: 4px; background: var(--ink); }
  html.js .ex-sheet-head { padding: 0 16px 8px; touch-action: none; }
  html.js .ex-card { margin-top: 2px; }
  html.js .ex-list-wrap { flex: 1; min-height: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  html.js .ex-item { padding-left: 16px; }
  html.js .ex-viewtoggle {
    flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--yellow); font-size: 14px; font-weight: 700; cursor: pointer;
  }
  html.js .ex-viewtoggle:hover { box-shadow: 3px 3px 0 var(--ink); background: var(--yellow); color: var(--ink); }
  html.js .ex-map .maplibregl-ctrl-top-right { top: calc(var(--ex-filters-h, 108px) + 2px); }
  html.js .ex-near { top: calc(var(--ex-filters-h, 108px) + 104px); }
  html.js .ex-map-msg { top: calc(var(--ex-filters-h, 108px) + 10px); }
  html.js .ex-legend { top: calc(var(--ex-filters-h, 108px) + 10px); }
  html.js .ex-app.is-nomap .ex-viewtoggle, html.js .ex-app.is-nomap .ex-near, html.js .ex-app.is-nomap .ex-legend { display: none; }
}

/* 桌機（≥900px）：上方篩選列、左側清單（可收合）、右側地圖 */
@media (min-width: 900px) {
  html.js .ex-app { display: grid; grid-template-columns: var(--ex-list-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); transition: grid-template-columns .2s ease; }
  html.js .ex-app[data-list="closed"] { grid-template-columns: 0 minmax(0, 1fr); }
  html.js .ex-filters { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; padding: 10px 16px; }
  html.js .ex-search { flex: 0 1 460px; }
  html.js .ex-chips { flex: 1; margin-top: 0; padding-bottom: 0; }
  html.js .ex-sheet { display: flex; flex-direction: column; grid-column: 1; grid-row: 2; min-height: 0; border-right: 1px solid var(--ink); overflow: hidden; }
  html.js .ex-app[data-list="closed"] .ex-sheet { border-right: 0; }
  html.js .ex-app[data-list="closed"] .ex-sheet-head, html.js .ex-app[data-list="closed"] .ex-list-wrap { visibility: hidden; }
  html.js .ex-sheet-head { padding: 12px 16px 10px; }
  html.js .ex-list-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html.js .ex-item { padding-left: 16px; }
  html.js .ex-mappane { position: relative; inset: auto; grid-column: 2; grid-row: 2; }
  html.js .ex-card { position: absolute; z-index: 6; left: calc(var(--ex-list-w) + 16px); bottom: 32px; width: min(360px, calc(100% - var(--ex-list-w) - 90px)); margin: 0; box-shadow: 5px 5px 0 var(--ink); }
  html.js .ex-app[data-list="closed"] .ex-card { left: 44px; }
  html.js .ex-collapse { position: absolute; z-index: 4; left: 0; top: 12px; display: grid; place-items: center; width: 28px; height: 52px; border: 1px solid var(--ink); border-left: 0; background: var(--card); box-shadow: 3px 3px 0 var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
  html.js .ex-collapse:hover { background: var(--yellow); }
  html.js .ex-near { top: 104px; }
  html.js .ex-map-msg { top: 12px; left: 180px; right: 70px; }
  html.js .ex-legend { top: 12px; left: 44px; }
  html.js .ex-app.is-nomap .ex-near, html.js .ex-app.is-nomap .ex-legend { display: none; }
}

/* ───────── 嵌入式小地圖（地區頁、商家頁的 [data-map-scope]） ─────────
   基本外觀用 :where()（特異度 0），頁面自己的 .hub-map／.bp-map 尺寸會蓋過這裡。 */
:where([data-map-scope]) { position: relative; overflow: hidden; height: 340px; border: 1px solid var(--ink); background: #ebe4d6; }
[data-map-scope] .map-noscript { padding: 14px 16px; font-size: 14px; line-height: 1.6; }
/* MapLibre 的 .maplibregl-map 會設 position: relative，這裡要比它具體 */
[data-map-scope] > .map-embed-canvas { position: absolute; inset: 0; }
.map-embed-show { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 8px 16px; border: 0; background: var(--card); font-size: 15px; font-weight: 800; cursor: pointer; }
.map-embed-show::before { width: 18px; height: 14px; border: 1.5px solid var(--ink); background: linear-gradient(90deg, transparent 33%, var(--ink) 33% 38%, transparent 38% 63%, var(--ink) 63% 68%, transparent 68%); content: ""; }
.map-embed-show:hover { background: var(--yellow); }
.map-embed-open { position: absolute; z-index: 3; left: 10px; bottom: 10px; padding: 6px 12px; border: 1px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; }
.map-embed-open:hover { background: var(--yellow); }
.map-embed-msg { position: absolute; z-index: 3; left: 12px; right: 12px; top: 50%; padding: 10px 12px; border: 1px solid var(--ink); background: var(--card); font-size: 14px; line-height: 1.6; transform: translateY(-50%); }
[data-map-scope].is-loading::after { position: absolute; z-index: 4; left: 0; top: 0; width: 30%; height: 3px; background: var(--ink); animation: ex-load 1.1s ease-in-out infinite; content: ""; }
@media (prefers-reduced-motion: reduce) { [data-map-scope].is-loading::after { animation: none; width: 100%; opacity: .35; } }
/* 手機：還沒按「顯示地圖」之前只佔一顆按鈕的高度（第一次繪製就是這個高度，不會版面跳動）；
   這條刻意比頁面的 .hub-map 特異度高。按下後（.is-active）回到頁面自己的高度。 */
@media (max-width: 620px) {
  [data-map-scope]:not(.is-active) { height: auto; min-height: 56px; }
  :where([data-map-scope].is-active) { height: 280px; }
}