/* ── 日本購物路線板 ───────────────────────────────────────────
   視覺語彙：日本車站的「案内図 / 乗換案内」看板
   藍墨基底 · 朱紅路線 · 等寬數字 · 商圈當成路線圖上的街區
   ───────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  --ground:      #EDEFF3;
  --surface:     #FFFFFF;
  --surface-2:   #F4F6FA;
  --surface-3:   #E7EBF2;
  --ink:         #0F141C;
  --ink-2:       #4B5666;
  --ink-3:       #7C8798;
  --line:        #D6DCE6;
  --line-strong: #AEB9C8;
  --accent:      #C93D24;
  --accent-soft: #FBE9E4;
  --accent-ink:  #FFFFFF;
  --sea:         #E3E8F0;
  --land:        #D4DBE5;
  --land-line:   #B3BECD;
  --grid:        #DCE1EA;
  --c-lux:  #1D4E89;
  --c-drug: #2A7350;
  --c-tech: #6F42A0;
  --c-dept: #A2731F;
  --c-street: #A81E63;
  --art-wall:   #DDE3EC;
  --art-wall-2: #BDC7D5;
  --art-win:    #F8FAFD;
  --art-ground: #C6CFDB;
  --art-sign:   rgba(255,255,255,.72);
  --shadow: 0 1px 2px rgba(15,20,28,.06), 0 8px 24px -12px rgba(15,20,28,.18);
  --radius: 3px;
  /* 動效：進場用 ease-out（一開始就快，感覺反應靈敏），
     切換狀態用 ease-in-out；抽屜用 iOS 那條。全部壓在 300ms 以下。 */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 140ms;
  --t-mid:  200ms;
  --osm-road:    #FFFFFF;
  --osm-case:    #C9D1DD;
  --osm-hw:      #F6E3B4;
  --osm-hw-case: #D9C48E;
  --osm-rail:    #8B95A5;
  --osm-subway:  #6F7D93;
  --osm-water:   #C5D3E6;
  --osm-park:    #D5E6D0;
  --osm-name:    #5B6675;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:      #0C1015;
    --surface:     #141A22;
    --surface-2:   #1A212B;
    --surface-3:   #222B37;
    --ink:         #E9EDF4;
    --ink-2:       #A5B0C1;
    --ink-3:       #6E7A8C;
    --line:        #262F3B;
    --line-strong: #3C4757;
    --accent:      #FF6E4F;
    --accent-soft: #331914;
    --accent-ink:  #16100E;
    --sea:         #0F151D;
    --land:        #1D2530;
    --land-line:   #33404F;
    --grid:        #1A222C;
    --c-lux:  #6DA2E0;
    --c-drug: #52BC89;
    --c-tech: #B892EC;
    --c-dept: #E3B65C;
    --c-street: #F286B4;
    --art-wall:   #2A333F;
    --art-wall-2: #1B232D;
    --art-win:    #48545F;
    --art-ground: #171E27;
    --art-sign:   rgba(255,255,255,.3);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    --osm-road:    #2A3441;
    --osm-case:    #0E141B;
    --osm-hw:      #4A4230;
    --osm-hw-case: #2A2518;
    --osm-rail:    #6E7A8C;
    --osm-subway:  #55627A;
    --osm-water:   #0A1119;
    --osm-park:    #17241B;
    --osm-name:    #9AA5B5;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:      #0C1015;
  --surface:     #141A22;
  --surface-2:   #1A212B;
  --surface-3:   #222B37;
  --ink:         #E9EDF4;
  --ink-2:       #A5B0C1;
  --ink-3:       #6E7A8C;
  --line:        #262F3B;
  --line-strong: #3C4757;
  --accent:      #FF6E4F;
  --accent-soft: #331914;
  --accent-ink:  #16100E;
  --sea:         #0F151D;
  --land:        #1D2530;
  --land-line:   #33404F;
  --grid:        #1A222C;
  --c-lux:  #6DA2E0;
  --c-drug: #52BC89;
  --c-tech: #B892EC;
  --c-dept: #E3B65C;
  --c-street: #F286B4;
  --art-wall:   #2A333F;
  --art-wall-2: #1B232D;
  --art-win:    #48545F;
  --art-ground: #171E27;
  --art-sign:   rgba(255,255,255,.3);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --osm-road:    #2A3441;
  --osm-case:    #0E141B;
  --osm-hw:      #4A4230;
  --osm-hw-case: #2A2518;
  --osm-rail:    #6E7A8C;
  --osm-subway:  #55627A;
  --osm-water:   #0A1119;
  --osm-park:    #17241B;
  --osm-name:    #9AA5B5;
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden 屬性自帶的 display:none 來自 UA 樣式，優先級最低，
   任何 .foo { display: grid } 都會蓋掉它 —— 查證面板就是這樣一載入就蓋滿螢幕。
   這行必須放在所有元件樣式之前並標 important。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Noto Sans TC", "Zen Kaku Gothic New", "Hiragino Sans",
               "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.num  { font-variant-numeric: tabular-nums; }

:where(button, input, select, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 版面骨架 ────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  min-height: 0;
}

.board {
  display: grid;
  grid-template-columns: minmax(280px, 318px) minmax(0, 1fr) minmax(300px, 352px);
  gap: 1px;
  background: var(--line-strong);
  min-height: 0;
  overflow: hidden;
}

.pane {
  background: var(--ground);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 左右欄可以收起來，把寬度讓給中央地圖 */
.board[data-fold~="left"] { grid-template-columns: 34px minmax(0, 1fr) minmax(300px, 352px); }
.board[data-fold~="right"] { grid-template-columns: minmax(280px, 318px) minmax(0, 1fr) 34px; }
.board[data-fold~="left"][data-fold~="right"] { grid-template-columns: 34px minmax(0, 1fr) 34px; }
.pane.folded > *:not(.fold-rail) { display: none; }
.fold-rail { display: none; }
.pane.folded > .fold-rail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; height: 100%; padding: 12px 0;
  appearance: none; border: 0; background: var(--surface);
  color: var(--ink-2); font: inherit; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .pane.folded > .fold-rail:hover { background: var(--surface-2); color: var(--accent); } }
.fold-rail .ico { font-size: 15px; line-height: 1; color: var(--accent); }
.fold-rail .txt {
  writing-mode: vertical-rl; letter-spacing: .22em;
  font-size: 12px; font-weight: 700;
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}
.fold-btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-3); width: 22px; height: 22px; border-radius: 2px;
  font-size: 13px; line-height: 1; cursor: pointer; flex: none; padding: 0;
  margin-left: 6px;
}
@media (hover: hover) and (pointer: fine) { .fold-btn:hover { border-color: var(--accent); color: var(--accent); } }
@media (max-width: 1000px) { .fold-btn { display: none; } }

.pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.pane-head h2 {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
}
.pane-head .step {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 2px;
  padding: 3px 6px;
  flex: none;
}
.pane-head .hint { margin-left: auto; font-size: 11px; color: var(--ink-3); text-align: right; }
.pane-head .hint + .fold-btn { margin-left: 6px; }

.pane-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }

/* 捲軸細一點，不要跟內容搶視線 */
.pane-body { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.pane-body::-webkit-scrollbar { width: 9px; }
.pane-body::-webkit-scrollbar-track { background: transparent; }
.pane-body::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 9px;
  border: 3px solid var(--ground); background-clip: padding-box;
}
@media (hover: hover) and (pointer: fine) { .pane-body::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; } }

/* ── 表頭：駅名標 ────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 0 -3px 0 -2px var(--accent);
  flex-wrap: wrap;
}
.brandmark { display: flex; align-items: center; gap: 11px; flex: none; }
.brandmark .mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 16px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 34%, transparent);
}
.brandmark h1 {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.15;
}
.brandmark .sub {
  display: block;
  margin-top: 1px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--ink-3);
  font-weight: 400;
  text-transform: uppercase;
}

/* 城市列：整條像一塊看板，選中的城市翻黑 */
.city-rail {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface-2);
  flex-wrap: wrap;
}
.city-rail button {
  appearance: none;
  position: relative;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  letter-spacing: .04em;
  padding: 7px 15px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transition: background .14s ease, color .14s ease;
}
.city-rail button:last-child { border-right: 0; }
@media (hover: hover) and (pointer: fine) { .city-rail button:hover { background: var(--surface-3); color: var(--ink); } }
.city-rail button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
}
.city-rail button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
}
.city-rail button .cnt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.city-rail button[aria-pressed="true"] .cnt { opacity: .8; }

.masthead .spacer { flex: 1 1 auto; }

.ghost-btn {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  border-radius: 2px;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s ease, color .14s ease;
}
@media (hover: hover) and (pointer: fine) { .ghost-btn:hover { border-color: var(--accent); color: var(--accent); } }

/* ── 搜尋與分類 ──────────────────────────────────────── */
.search-wrap { padding: 12px 16px 11px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.search-field input {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 32px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color .14s ease, background .14s ease;
}
.search-field input::placeholder { color: var(--ink-3); }
.search-field input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.search-field .clear {
  position: absolute; right: 4px;
  appearance: none; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1;
  padding: 5px 8px; border-radius: 2px;
}
@media (hover: hover) and (pointer: fine) { .search-field .clear:hover { color: var(--accent); } }

/* 四個分類一定要排得下一行，換行會很難看 */
/* 五個分類排成 3＋2，硬塞一行會擠到看不懂 */
.cat-filter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 9px; }
.cat-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font: inherit; font-size: 11.5px;
  padding: 4px 4px;
  border-radius: 2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.cat-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; opacity: .45; }
.cat-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tone) 55%, transparent);
  color: var(--ink);
  background: color-mix(in srgb, var(--tone) 11%, var(--surface));
  font-weight: 500;
}
.cat-chip[aria-pressed="true"] .dot { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cat-chip:hover { border-color: var(--tone); color: var(--ink); } }

/* ── 品牌索引 ─────────────────────────────────────────── */
.brand-group { padding-bottom: 2px; }
.brand-group > h3 {
  margin: 0;
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink-2);
}
.brand-group:first-child > h3 { border-top: 0; }
.brand-group > h3 .bar { width: 3px; height: 11px; background: var(--tone); flex: none; }
.brand-group > h3 .n {
  margin-left: auto; font-weight: 400; color: var(--ink-3);
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
}
/* 分類標題整條是按鈕：點了展開／收起。預設收起，選了幾個籤就看得到幾群，
   不會像以前一選多就把下面推到看不見。 */
.grp-head {
  appearance: none; border: 0; background: transparent; margin: 0;
  width: 100%; padding: 0; min-height: 22px;
  display: flex; align-items: center; gap: 8px;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.grp-head .chev {
  width: 6px; height: 6px; flex: none; margin-right: 2px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform var(--t-fast) var(--ease-in-out);
}
.grp-head[aria-expanded="true"] .chev { transform: rotate(45deg) translate(-1px, -2px); }
.grp-head .pk {
  margin-left: auto; padding: 1px 6px; border-radius: 2px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 9.5px; letter-spacing: .04em; font-weight: 700;
}
.grp-head .pk + .n { margin-left: 0; }
.brand-group.closed > h3 { border-bottom-color: transparent; }
.brand-group.closed { padding-bottom: 0; }
.empty-note.soft { padding-top: 18px; font-size: 11.5px; line-height: 1.7; }

/* 清單不畫格線，靠留白與 hover 分列，密度才拉得起來 */
.brand-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
@media (hover: hover) and (pointer: fine) { .brand-row:hover { background: var(--surface-2); } }
.brand-row:disabled { opacity: .42; cursor: default; }
@media (hover: hover) and (pointer: fine) { .brand-row:disabled:hover { background: transparent; } }
.brand-row .box {
  width: 15px; height: 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 2px;
  display: grid; place-items: center;
  color: transparent;
  font-size: 10px;
  flex: none;
  transition: background .12s ease, border-color .12s ease;
}
.brand-row[aria-pressed="true"] { background: var(--accent-soft); }
.brand-row[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
}
.brand-row[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.brand-row[aria-pressed="true"] .nm { font-weight: 700; }
.brand-row .nm { font-size: 13px; line-height: 1.3; min-width: 0; }
.brand-row .where {
  display: block; font-size: 10.5px; line-height: 1.45; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-row .cnt {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.brand-row[aria-pressed="true"] .cnt { color: var(--accent); font-weight: 700; }
/* 選中的品牌自動展開分店，可以複選要逛哪幾家 */
.branch-list {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  border-bottom: 1px solid var(--line);
  padding: 2px 0 5px;
}
.branch-row {
  position: relative;
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 9px;
  width: 100%; padding: 5px 16px 5px 30px;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
/* 左側細線把分店和品牌綁在一起 */
.branch-row::before {
  content: ""; position: absolute; left: 22px; top: 0; bottom: 0;
  width: 1px; background: var(--line-strong);
}
.branch-row:first-child::before { top: 6px; }
.branch-row:last-child::before { bottom: 6px; }
@media (hover: hover) and (pointer: fine) { .branch-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } }
.branch-row .box {
  width: 13px; height: 13px;
  border: 1.5px solid var(--line-strong); border-radius: 2px;
  display: grid; place-items: center; color: transparent;
  font-size: 9px; background: var(--surface);
}
.branch-row[aria-pressed="true"] .box {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.branch-row .nm { font-size: 12px; line-height: 1.3; min-width: 0; color: var(--ink-2); }
.branch-row[aria-pressed="true"] .nm { color: var(--ink); font-weight: 500; }
.branch-row .hrs {
  display: block; font-size: 10px; line-height: 1.4; color: var(--c-drug);
  font-family: "JetBrains Mono", monospace;
}
.branch-row .where {
  display: block; font-size: 10px; color: var(--ink-3); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.branch-row .tag {
  font-size: 9px; letter-spacing: .08em; padding: 1px 5px;
  border: 1px solid var(--accent); border-radius: 2px; color: var(--accent);
  white-space: nowrap;
}

.brand-row mark { background: color-mix(in srgb, var(--accent) 26%, transparent); color: inherit; border-radius: 1px; }

.empty-note {
  padding: 30px 22px; color: var(--ink-3); font-size: 12.5px;
  line-height: 1.7; text-align: center;
}

/* 收錄範圍：不寫出來的話，「UNIQLO 13」會被讀成「東京只有 13 家」 */
.scope-note {
  margin: 0; padding: 12px 16px 20px;
  border-top: 1px dashed var(--line-strong);
  font-size: 10.5px; line-height: 1.65; color: var(--ink-3);
}
.scope-note b {
  display: block; font-size: 11px; color: var(--ink-2);
  letter-spacing: .06em; margin-bottom: 3px;
}

/* ── 地圖 ──────────────────────────────────────────────── */
.map-pane { background: var(--sea); position: relative; }
.map-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
  flex-wrap: wrap;
}
.crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.crumb button {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--accent); cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.crumb .now {
  color: var(--ink); font-weight: 700; letter-spacing: .04em;
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}
.map-bar .tools { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.map-bar select {
  font: inherit; font-size: 12px;
  padding: 4px 7px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink-2); border-radius: 2px;
  max-width: 168px;
}
.icon-btn {
  appearance: none; width: 26px; height: 26px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); border-radius: 2px; cursor: pointer;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  padding: 0;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } }

.map-stage { flex: 1; min-height: 0; position: relative; touch-action: none; }
.map-stage > svg { width: 100%; height: 100%; display: block; cursor: grab; }
.map-stage > svg.dragging { cursor: grabbing; }

/* 商圈街區：淡色實塊 + 貼在角上的標籤，地圖才讀得出分區 */
.district-blob {
  fill: color-mix(in srgb, var(--surface) 72%, transparent);
  stroke: var(--line-strong);
  stroke-dasharray: 2 4;
  stroke-width: 1;
}
.district-label {
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  fill: var(--ink-3);
  paint-order: stroke; stroke: var(--sea); stroke-width: 3px; stroke-linejoin: round;
}
.grid-line { stroke: var(--grid); stroke-width: 1; opacity: .7; }

/* 街道底圖（roads.js，OpenStreetMap 抽出）：有街道時商圈色塊退成淡淡一層，
   格線收掉。線寬用 non-scaling-stroke，縮放鏡頭時路不會變成一坨。 */
svg.has-osm .grid-line { display: none; }
svg.has-osm .district-blob { fill: color-mix(in srgb, var(--surface) 26%, transparent); stroke-dasharray: 3 5; }
.osm { pointer-events: none; }
.osm path { vector-effect: non-scaling-stroke; }
.osm-park  { fill: var(--osm-park); stroke: none; }
.osm-water { fill: var(--osm-water); stroke: none; }
.osm-wline { fill: none; stroke: var(--osm-water); stroke-linecap: round; }
.osm-coast { fill: none; stroke: var(--osm-water); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.osm-road-case { fill: none; stroke: var(--osm-case); stroke-linecap: round; stroke-linejoin: round; }
.osm-road { fill: none; stroke: var(--osm-road); stroke-linecap: round; stroke-linejoin: round; }
.osm-road-case.hw { stroke: var(--osm-hw-case); }
.osm-road.hw { stroke: var(--osm-hw); }
.osm-road.w { stroke-dasharray: 3 3; stroke: color-mix(in srgb, var(--osm-road) 70%, var(--osm-case)); }
.osm-rail-base { fill: none; stroke: var(--osm-rail); stroke-linecap: butt; }
.osm-rail-tick { fill: none; stroke: var(--surface); stroke-dasharray: 5 5; stroke-linecap: butt; }
.osm-subway { fill: none; stroke: var(--osm-subway); stroke-dasharray: 2 4; stroke-linecap: round; opacity: .8; }
.osm-street-name {
  font-size: 10px; letter-spacing: .04em; fill: var(--osm-name);
  paint-order: stroke; stroke: var(--sea); stroke-width: 3px; stroke-linejoin: round;
}
svg.has-osm .osm-street-name { stroke: var(--osm-road); }
.land { fill: var(--land); stroke: var(--land-line); stroke-width: 1.2; stroke-linejoin: round; }

.spot { cursor: pointer; }
.spot .hit { fill: transparent; }
.spot .pin { stroke: var(--surface); stroke-width: 1.5; transition: r .12s ease; }
.spot.lux  .pin { fill: var(--c-lux); }
.spot.drug .pin { fill: var(--c-drug); }
.spot.tech .pin { fill: var(--c-tech); }
.spot.dept .pin { fill: var(--c-dept); }
.spot.street .pin { fill: var(--c-street); }

/* 建物插畫：畫在門市點後面當底，不能搶掉點的視線 */
.venue-art { opacity: .62; pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .venue-art { opacity: .72; } }
:root[data-theme="dark"] .venue-art { opacity: .72; }
.spot.dim { opacity: .22; }
.spot.match .pin { stroke: var(--ink); stroke-width: 1.5; }
.spot.picked .pin { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
/* 同品牌的其他分店：空心圈，看得到也點得到，但不搶走已排入那家的視線 */
.spot.alt .pin { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .spot.alt:hover .pin { fill: var(--accent-soft); } }
.map-legend .sw.alt {
  background: var(--surface); border: 2px solid var(--accent); width: 10px; height: 10px;
}
@media (hover: hover) and (pointer: fine) { .spot:not(.picked):hover .pin { r: 8; } }
/* 近郊門市貼在畫面邊緣，用空心虛線圈表示「位置只是示意」 */
.spot.far .pin { fill: var(--sea); stroke-dasharray: 2.5 2.5; stroke: var(--ink-3); stroke-width: 1.5; }
.spot.far.picked .pin { fill: var(--accent-soft); stroke: var(--accent); }
.spot .cap {
  font-size: 10.5px; fill: var(--ink-2); pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.spot.picked .cap { font-size: 11.5px; font-weight: 700; fill: var(--ink); stroke-width: 3.5px; }

/* 指引線：點被推開後，從真實位置拉過去 */
.lead { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.lead-dot { fill: var(--ink-3); opacity: .7; }

.route-line { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.route-line.transit { stroke-dasharray: 1 9; stroke-width: 4.5; }
.route-num { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; fill: var(--accent-ink); text-anchor: middle; pointer-events: none; }
.route-node { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

/* 車站：雙圈；地鐵深、JR 淺。點了＝從那站出發 */
.station { cursor: pointer; }
.station .st-hit { fill: transparent; }
.station .st-ring { fill: var(--surface); stroke: var(--osm-subway); stroke-width: 1.8; transition: r var(--t-fast) var(--ease-out); }
.station .st-core { fill: var(--osm-subway); }
.station.rail .st-ring, .station.both .st-ring { stroke: var(--ink-2); }
.station.rail .st-core, .station.both .st-core { fill: var(--ink-2); }
.station.on .st-ring { stroke: var(--accent); stroke-width: 2.4; }
.station.on .st-core { fill: var(--accent); }
.station:focus-visible .st-ring { stroke: var(--accent); }
.station .st-label {
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 10px; font-weight: 700; fill: var(--ink-2); pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.station.on .st-label { fill: var(--accent); }
/* 出口：小方牌＋編號，跟日本車站的出口指標一樣是黃底黑字 */
.exit { cursor: pointer; }
.exit-box { fill: #F5D44A; stroke: #7A6414; stroke-width: .8; }
.exit-txt {
  font-family: "JetBrains Mono", monospace; font-size: 7.5px; font-weight: 700;
  fill: #1A1608; text-anchor: middle; pointer-events: none;
}
.exit.on .exit-box { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.exit.on .exit-txt { fill: var(--accent-ink); }
.exit:focus-visible .exit-box { stroke: var(--accent); stroke-width: 1.5; }
/* 起點標記：「出」方塊，接第一站的那段路線 */
.origin-box { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.origin-txt {
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 12px; font-weight: 900; fill: var(--ground); text-anchor: middle; pointer-events: none;
}
.origin-cap {
  font-size: 11px; font-weight: 700; fill: var(--ink); pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round;
}

.city-node { cursor: pointer; }
.city-node .ring { fill: var(--surface); stroke: var(--accent); stroke-width: 2; transition: fill .14s ease; }
@media (hover: hover) and (pointer: fine) { .city-node:hover .ring { fill: var(--accent-soft); } }
.city-node .nm {
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 13px; font-weight: 700; fill: var(--ink);
  paint-order: stroke; stroke: var(--sea); stroke-width: 4px; stroke-linejoin: round;
}
.city-node .qty { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; fill: var(--accent); text-anchor: middle; }

/* 地圖上的浮貼小卡 */
.map-legend, .far-note {
  position: absolute; z-index: 4;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.map-legend {
  left: 12px; bottom: 12px;
  padding: 8px 11px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: var(--ink-2);
}
.map-legend .row { display: flex; align-items: center; gap: 8px; }
.map-legend .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); flex: none; }
.far-note {
  right: 12px; bottom: 12px;
  padding: 6px 10px;
  font-size: 10.5px; color: var(--ink-3);
  max-width: 210px; line-height: 1.5;
}
.far-note::before { content: "⤢ "; color: var(--ink-2); }

/* 門市資訊卡：插畫＋店名＋所在建物與樓層 */
/* 右上角小地圖：城市全貌與商圈位置，中央地圖只放大其中一區 */
.mini {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 224px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.mini-svg { display: block; width: 100%; height: auto; background: var(--surface-2); }
.mini-d .box {
  fill: var(--ink-3); stroke: var(--surface-2); stroke-width: 1;
  transition: fill .14s ease;
}
/* 行程有經過的商圈，先標起來 */
.mini-d .box.has { stroke: var(--accent); stroke-width: 1.5; }
/* 整區在郊外的（近郊 Outlet）：空心虛線，表示位置只是方向示意 */
.mini-d .box.away { fill: none; stroke: var(--ink-3); stroke-dasharray: 2 2; }
.mini-d { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mini-d:hover .box { fill: var(--ink); } }
.mini-d.on .box { fill: var(--accent); }
.mini-d:focus-visible .box { stroke: var(--accent); stroke-width: 2; }
/* 每個方塊旁標區名：塊夠大就寫在裡面（白字），不夠就寫在旁邊 */
.mini-lb {
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 9px; font-weight: 700; fill: var(--ink-2); pointer-events: none;
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 2.5px; stroke-linejoin: round;
}
.mini-lb.in { fill: var(--surface); stroke: none; }
.mini-lb.on { fill: var(--accent); }
.mini-lb.in.on { fill: var(--accent-ink); }
.mini-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.mini-foot .nm {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}
.mini-all {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-3); font: inherit; font-size: 10px; padding: 2px 7px;
  border-radius: 2px; cursor: pointer; flex: none;
}
@media (hover: hover) and (pointer: fine) { .mini-all:hover { border-color: var(--accent); color: var(--accent); } }
.mini-all[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

@media (max-width: 1000px) { .mini { width: 168px; top: 8px; right: 8px; } .mini-lb { font-size: 8px; } }

.tip {
  position: absolute; z-index: 5;
  width: 236px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
  --ty: calc(-100% - 14px);
  --s: 1;
  transform: translate(-50%, var(--ty)) scale(var(--s));
  transform-origin: 50% 100%;
  box-shadow: var(--shadow);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.tip.below { --ty: 0; transform-origin: 50% 0; }
/* 從 hidden 變成顯示的那一刻，先站在 95% 大小、透明，再滑到定位 */
@starting-style { .tip:not([hidden]) { opacity: 0; --s: .95; } }
.tip .art {
  display: block; width: 100%; height: auto;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
/* 實照的長寬比不一，裁成跟插畫一樣的比例才不會讓卡片忽高忽低 */
.tip .art.photo { aspect-ratio: 120 / 64; object-fit: cover; }
.tip-body .credit {
  margin-top: 5px; font-size: 9.5px; line-height: 1.4; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tip-body { padding: 8px 11px 10px; display: flex; flex-direction: column; }
.tip-body b {
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.tip-body .m { font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.tip-body .m.v { color: var(--ink-2); margin-top: 3px; }
.tip-body .hrs {
  margin-top: 5px; font-size: 11px; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 0;
}
.tip-body .hrs b {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  font-weight: 700; color: var(--c-drug);
}
.tip-body .hrs span { font-size: 10px; color: var(--ink-3); }
.tip-body .hrs.none { color: var(--ink-3); font-size: 10.5px; }
.tip-body .k {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 10px; letter-spacing: .1em; color: var(--accent);
}

/* ── 路線面板 ────────────────────────────────────────── */
.route-setup {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column; gap: 9px; flex: none;
  max-height: 62%; min-height: 0;   /* 車站清單再長也留一半給下面的行程 */
}
.field { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.field label { flex: none; letter-spacing: .14em; }
.field select {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px;
  padding: 6px 8px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink); border-radius: 2px;
}
.go-btn {
  appearance: none; width: 100%;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 2px;
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  padding: 11px; cursor: pointer;
  transition: filter .14s ease;
}
@media (hover: hover) and (pointer: fine) { .go-btn:hover { filter: brightness(1.08); } }
.go-btn:disabled { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; filter: none; }

/* 各商圈最近的車站與出口：先決定從哪個出口出來，再排路線 */
.st-box {
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface-2);
  display: flex; flex-direction: column;
  min-height: 0; flex: 0 1 auto;
}
/* 標題釘住，站的清單自己捲：選了五六個商圈也不會把「起點」與按鈕擠出畫面 */
.st-list {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.st-list::-webkit-scrollbar { width: 8px; }
.st-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--surface-2); background-clip: padding-box; }
.st-to { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-head {
  appearance: none; border: 0; background: transparent; margin: 0;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-2); text-align: left; cursor: pointer;
}
.st-head .chev {
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform var(--t-fast) var(--ease-in-out);
}
.st-head[aria-expanded="true"] .chev { transform: rotate(45deg) translate(-1px, -2px); }
.st-head .n { margin-left: auto; font-weight: 400; color: var(--ink-3); font-size: 10.5px; }
.st-hint { margin: 0; padding: 0 10px 8px; font-size: 10.5px; line-height: 1.55; color: var(--ink-3); }
.st-now { margin: 0; padding: 0 10px 8px; font-size: 11px; color: var(--accent); font-weight: 700; }
.st-group { border-top: 1px solid var(--line); padding: 6px 0 4px; }
.st-district {
  padding: 2px 10px 4px; font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--ink-3);
  font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
}
.st-row { padding: 2px 6px 5px; border-radius: 2px; }
.st-row.on { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.st-name {
  appearance: none; border: 0; background: transparent; margin: 0;
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 4px 4px; font: inherit; font-size: 12px; color: var(--ink); text-align: left;
  border-radius: 2px; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.st-name b { font-weight: 700; white-space: nowrap; }
.st-name[aria-pressed="true"] { color: var(--accent); }
.st-ico {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 2px solid var(--osm-subway); background: var(--surface);
}
.st-ico.rail, .st-ico.both { border-color: var(--ink-2); }
.st-ico.tram { border-radius: 2px; }
.st-name[aria-pressed="true"] .st-ico { border-color: var(--accent); background: var(--accent); }
.st-op {
  font-size: 10px; color: var(--ink-3); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-dist { margin-left: auto; flex: none; font-size: 10.5px; color: var(--ink-3); }
.st-exits { display: flex; align-items: center; gap: 7px; padding: 1px 4px 2px 20px; }
.st-exit {
  appearance: none; margin: 0; padding: 2px 6px; min-width: 26px;
  border: 1px solid #C9AE3C; border-radius: 2px;
  background: #F5D44A; color: #1A1608;
  font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.3; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.st-exit[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.st-noexit { display: block; padding: 0 4px 2px 20px; font-size: 10px; color: var(--ink-3); }

/* 摘要：三格數字看板 */
.summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  flex: none;
}
.summary div {
  padding: 11px 6px 9px; text-align: center;
  border-right: 1px solid color-mix(in srgb, var(--ground) 16%, transparent);
}
.summary div:last-child { border-right: 0; }
.summary .v {
  font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; display: block; line-height: 1.15;
  white-space: nowrap; color: var(--ground); letter-spacing: -.01em;
}
.summary .k {
  font-size: 9.5px; letter-spacing: .16em; white-space: nowrap;
  color: color-mix(in srgb, var(--ground) 58%, transparent);
}

/* 丟到 Google 地圖導航 */
.gmap { padding: 11px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.gmap-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.gmap-title { font-size: 10px; letter-spacing: .18em; color: var(--ink-3); font-weight: 700; }
.gmap-sub { font-size: 10.5px; color: var(--ink-3); margin-left: auto; }
.gmap-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.gmap-row:first-of-type { margin-top: 0; }
.gmap-seg {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-3);
  min-width: 58px; flex: none; font-variant-numeric: tabular-nums;
}
.gmap-btn {
  flex: 1; text-align: center; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500; padding: 7px 10px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.gmap-btn::before { font-size: 12px; opacity: .75; }
.gmap-row .gmap-btn:first-of-type::before { content: "🚶"; }
.gmap-row .gmap-btn:last-of-type::before { content: "🚃"; }
@media (hover: hover) and (pointer: fine) { .gmap-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } }
.gmap-note { margin: 9px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--ink-3); }

/* 乗換案内式的行程單 */
.itin { list-style: none; margin: 0; padding: 6px 0 24px; }
.stop { display: grid; grid-template-columns: 34px 1fr; gap: 0; }
.stop .gutter { position: relative; display: flex; justify-content: center; }
.stop .gutter::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .3;
}
.stop:first-child .gutter::before { top: 18px; }
.stop:last-child .gutter::before { bottom: calc(100% - 18px); }
.stop .bullet {
  position: relative; z-index: 1; margin-top: 11px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  flex: none;
  box-shadow: 0 0 0 3px var(--ground);
}
.stop .body { padding: 9px 16px 9px 4px; min-width: 0; }
.stop .nm { font-size: 13.5px; font-weight: 700; line-height: 1.35; display: flex; align-items: baseline; gap: 7px; }
.stop .nm .tone { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; transform: translateY(-1px); }
.stop .meta { font-size: 11px; color: var(--ink-3); line-height: 1.55; }
.stop .meta.hrs { color: var(--c-drug); font-family: "JetBrains Mono", monospace; font-size: 10.5px; }
.stop .drop {
  appearance: none; border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 10.5px; padding: 3px 0 0;
  text-decoration: none; opacity: .8;
}
.stop .drop::before { content: "⇄ "; }
.stop-links { display: flex; gap: 5px; margin-top: 5px; }
.stop-links .v-link { font-size: 10.5px; padding: 3px 7px; }
@media (hover: hover) and (pointer: fine) { .stop .drop:hover { color: var(--accent); opacity: 1; text-decoration: underline; text-underline-offset: 2px; } }
.stop.origin .bullet { background: var(--ink); color: var(--ground); font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif; }
.stop.origin .nm { font-size: 12.5px; }
.stop.origin .drop::before { content: "✕ "; }

/* 還沒排路線時的空狀態 */
.route-empty { padding: 22px 18px; }
.re-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.re-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; }
.re-n {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink-3);
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
}
.re-t { font-size: 12px; line-height: 1.65; color: var(--ink-3); }
.re-t b {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: .06em; margin-bottom: 1px;
}
.re-now {
  margin: 20px 0 0; padding: 9px 12px;
  border: 1px dashed var(--line-strong); border-radius: 2px;
  background: var(--surface-2);
  font-size: 11.5px; color: var(--ink-3); text-align: center;
}
.re-now.ready { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.leg {
  display: grid; grid-template-columns: 34px 1fr;
  font-size: 11px; color: var(--ink-3);
}
.leg .gutter { position: relative; display: flex; justify-content: center; }
.leg .gutter::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .3; }
.leg.transit .gutter::before {
  background: repeating-linear-gradient(to bottom, var(--accent) 0 3px, transparent 3px 7px);
  opacity: .55;
}
.leg .body { padding: 3px 16px 3px 4px; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.leg.transit .body { color: var(--accent); }

.notice {
  margin: 0; padding: 11px 16px; font-size: 10.5px; line-height: 1.7;
  color: var(--ink-3); border-top: 1px dashed var(--line-strong); background: var(--surface-2);
}

/* ── 查證面板 ────────────────────────────────────────── */
.bar-btn {
  appearance: none; height: 26px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); border-radius: 2px; cursor: pointer;
  font: inherit; font-size: 12px; padding: 0 10px;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
@media (hover: hover) and (pointer: fine) { .bar-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } }
.only-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--ground); font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .only-btn[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--accent); color: var(--ground); } }

/* 標記過的門市在地圖上要看得出來 */
.spot.v-closed .pin { fill: var(--ink-3); }
.spot.v-closed { opacity: .5; }
.spot.v-wrong .pin { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 2 2; }

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  display: grid; place-items: center;
  padding: 24px;
  backdrop-filter: blur(2px);
  transition: opacity var(--t-mid) var(--ease-out);
}
.modal-card {
  width: min(720px, 100%); max-height: min(84vh, 780px);
  display: flex; flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease-out);
}
@starting-style {
  .modal:not([hidden]) { opacity: 0; }
  .modal:not([hidden]) .modal-card { opacity: 0; transform: scale(.95); }
}
.modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 -2px var(--accent);
}
.modal-head h2 {
  margin: 0; font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
}
.modal-head .sub { display: block; margin-top: 3px; font-size: 11px; line-height: 1.6; color: var(--ink-3); }
.modal-x {
  margin-left: auto; flex: none;
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); width: 26px; height: 26px; border-radius: 2px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .modal-x:hover { border-color: var(--accent); color: var(--accent); } }

.modal-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.modal-tools label { font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.modal-tools select {
  font: inherit; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--surface); color: var(--ink); min-width: 130px;
}

.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 18px; }
.modal-body { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.modal-body::-webkit-scrollbar { width: 9px; }
.modal-body::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 9px;
  border: 3px solid var(--ground); background-clip: padding-box;
}

.v-h {
  margin: 16px 0 8px; display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink-2);
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.v-h em { font-style: normal; font-weight: 400; letter-spacing: 0; color: var(--ink-3); font-size: 11px; }
.v-hint { margin: 0 0 10px; font-size: 11px; line-height: 1.6; color: var(--ink-3); }

.vlist { list-style: none; margin: 0; padding: 0; }
.v-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.v-row.is-closed .v-main b { text-decoration: line-through; color: var(--ink-3); }
.v-row.is-wrong .v-main b { color: var(--accent); }
.v-row.is-renov .v-main b { color: var(--ink-2); }
.v-main { flex: 1 1 220px; min-width: 0; }
.v-main b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.v-meta { display: block; font-size: 10.5px; color: var(--ink-3); line-height: 1.5; }
/* 查證狀態：預設就是資料層查證過的「營業中」，使用者改過的用同色系但加粗 */
.v-st { display: block; font-size: 10.5px; line-height: 1.5; color: var(--c-drug); }
.v-st.renov { color: #A8671B; }
.v-st.closed { color: var(--ink-3); }
.v-st.wrong { color: var(--accent); }
.v-row.mine .v-st { font-weight: 700; }
.v-links { display: flex; gap: 5px; flex: none; }
.v-link {
  font-size: 11px; text-decoration: none; padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--surface); color: var(--ink-2); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .v-link:hover { border-color: var(--accent); color: var(--accent); } }
.v-acts { display: flex; gap: 3px; flex: none; }
.v-pill {
  appearance: none; border: 1px solid var(--line); background: transparent;
  color: var(--ink-3); font: inherit; font-size: 10.5px;
  padding: 4px 7px; border-radius: 2px; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .v-pill:hover { border-color: var(--line-strong); color: var(--ink-2); } }
.v-pill.on.open   { background: var(--c-drug); border-color: var(--c-drug); color: var(--accent-ink); }
.v-pill.on.closed { background: var(--ink-3); border-color: var(--ink-3); color: var(--ground); }
.v-pill.on.wrong  { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.vmiss { display: flex; flex-wrap: wrap; gap: 5px; }
.vmiss-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; text-decoration: none;
  padding: 4px 8px; border: 1px dashed var(--line-strong); border-radius: 2px;
  background: var(--surface); color: var(--ink-2);
}
@media (hover: hover) and (pointer: fine) { .vmiss-chip:hover { border-style: solid; border-color: var(--accent); color: var(--accent); } }
.vmiss-chip .n {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
/* 品牌 × 城市 覆蓋表 */
.vmx-wrap { overflow-x: auto; margin-top: 4px; }
.vmx { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.vmx th, .vmx td { border: 1px solid var(--line); padding: 3px 6px; text-align: center; }
.vmx thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-2); font-weight: 700; white-space: nowrap;
}
.vmx th.nm {
  text-align: left; white-space: nowrap; font-weight: 400;
  background: var(--surface); color: var(--ink); position: sticky; left: 0; z-index: 2;
}
.vmx thead th.nm { z-index: 3; background: var(--surface-2); }
.vmx td.yes {
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--c-drug); font-weight: 700;
}
.vmx td.no { background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0; }
.vmx td.no a {
  display: block; padding: 3px 6px; text-decoration: none;
  color: var(--ink-3); font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .vmx td.no a:hover { background: var(--accent); color: var(--accent-ink); } }

.v-copy { width: 100%; height: 120px; font: 11px/1.5 "JetBrains Mono", monospace; margin-bottom: 10px; }

.modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--surface);
  border-top: 1px solid var(--line);
}
.modal-foot .count { margin-right: auto; font-size: 11px; color: var(--ink-3); }

/* 資訊卡上的標記 */
.tip-body .vmark { margin-top: 5px; font-size: 10.5px; }
.tip-body .vmark.open { color: var(--c-drug); }
.tip-body .vmark.closed { color: var(--ink-3); }
.tip-body .vmark.renov { color: #A8671B; }
.tip-body .vmark.wrong { color: var(--accent); }

@media (max-width: 640px) {
  .modal { padding: 0; }
  .modal-card { max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .v-links, .v-acts { flex: 1 1 auto; }
  .v-link, .v-pill { flex: 1; text-align: center; }
}

/* ── 手機 ──────────────────────────────────────────────── */
.tabbar { display: none; }

/* 中等寬度：三欄保留，只是收窄，避免出現叫不出路線面板的死角 */
@media (max-width: 1240px) {
  .board { grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(250px, 290px); }
  .pane-head, .search-wrap, .route-setup { padding-left: 12px; padding-right: 12px; }
  .brand-row { padding-left: 12px; padding-right: 12px; }
  .brand-group > h3 { padding-left: 12px; padding-right: 12px; }
}

/* 窄到放不下三欄就換成分頁 */
@media (max-width: 1000px) {
  body { font-size: 14px; }
  .app { grid-template-rows: auto 1fr auto; }
  .masthead { gap: 10px; padding: 9px 13px; }
  .brandmark h1 { font-size: 15px; }
  .city-rail { order: 3; width: 100%; }
  .city-rail button { flex: 1 1 auto; justify-content: center; padding: 6px 8px; font-size: 12.5px; }
  .city-rail button .cnt { display: none; }
  .masthead .spacer { display: none; }

  .board { grid-template-columns: 1fr; }
  .board > .pane { display: none; }
  .board[data-tab="brands"] > .pane:nth-child(1),
  .board[data-tab="map"]    > .pane:nth-child(2),
  .board[data-tab="route"]  > .pane:nth-child(3) { display: flex; }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar button {
    appearance: none; border: 0; background: transparent;
    font: inherit; font-size: 12px; color: var(--ink-3);
    padding: 10px 4px 11px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border-top: 2px solid transparent;
  }
  .tabbar button[aria-pressed="true"] { color: var(--accent); border-top-color: var(--accent); font-weight: 700; }
  .tabbar .badge {
    font-family: "JetBrains Mono", monospace; font-size: 10px;
    background: var(--accent); color: var(--accent-ink);
    border-radius: 8px; padding: 0 5px; min-width: 16px;
  }
  .tabbar button[aria-pressed="false"] .badge { background: var(--line-strong); color: var(--surface); }
  .map-legend { left: 8px; bottom: 8px; padding: 6px 8px; font-size: 10px; }
  .summary .v { font-size: 18px; }
}

/* 按下去的回饋：縮到 97%，160ms ease-out。只挑實際是按鈕的元素，
   不用 transition: all —— 那會連 layout 屬性都動起來。 */
.city-rail button, .cat-chip, .brand-row, .branch-row, .go-btn, .ghost-btn, .bar-btn, .icon-btn,
.gmap-btn, .mini-all, .st-name, .st-exit, .st-head, .grp-head, .modal-x, .v-link, .v-pill,
.vmiss-chip, .tabbar button, .fold-btn, .stop .drop, .re-steps li {
  transition-property: background-color, color, border-color, filter, transform;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease-out);
}
.city-rail button:active, .cat-chip:active, .brand-row:not(:disabled):active, .branch-row:active,
.go-btn:not(:disabled):active, .ghost-btn:active, .bar-btn:active, .icon-btn:active, .gmap-btn:active,
.mini-all:active, .st-name:active, .st-exit:active, .st-head:active, .grp-head:active, .modal-x:active,
.v-link:active, .v-pill:active, .vmiss-chip:active, .tabbar button:active, .fold-btn:active {
  transform: scale(.97);
  transition-duration: 160ms;
}
.go-btn:not(:disabled):active { transform: scale(.985); }

/* 減少動態：只留淡入淡出，位移／縮放全部拿掉，但不把顏色變化也弄成瞬間跳 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, fill, stroke, filter !important;
    animation-duration: .01ms !important;
  }
  .tip { transform: translate(-50%, var(--ty)) !important; }
  .modal-card { transform: none !important; }
  :active { transform: none !important; }
}

/* 鏡頭停留的商圈，框線與標籤加強 */
.district-blob.on { stroke: var(--accent); stroke-dasharray: none; stroke-width: 1.5; }
.district-label.on { fill: var(--accent); }