@charset "UTF-8";
/* ============================================
   主版面樣式（手機版骨架）
   互動邏輯（抽屜拖曳、彈窗開關、地圖縮放）尚未接上，
   這裡只負責畫面結構與外觀
   ============================================ */

:root {
  --nm-night: #17130f;
  --nm-night-deep: #0d0b08;
  --nm-lantern: #d6472e;
  --nm-lantern-deep: #9c2f1b;
  --nm-gold: #e8b23c;
  --nm-paper: #f4ead3;
  --nm-paper-dim: #e6d8b8;
  --nm-ink: #2a2016;
  --nm-ink-soft: #6b5d47;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Work Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--nm-night-deep);
}

/* ============================================
   響應式切換：手機／桌機 顯示工具類別
   斷點跟專案既有慣例一致（768px）
   放在最前面，讓下面各元件自己的 display（flex/block等）
   可以照 CSS 疊層規則正常覆蓋掉這裡的預設值
   ============================================ */
.desktop-only { display: none; }
.mobile-only { display: block; }

/* ---------- 頂部列 ---------- */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px;
  background: var(--nm-night);
  border-bottom: 1px solid rgba(232, 178, 60, 0.2);
  z-index: 50;
}

.top-bar-logo {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  /* 這次對話討論：文字整體置中，天氣那排維持自己靠左對齊，不受影響
     （兩個是各自獨立的排版決定）。原本這裡還有燈籠圖示+隱形佔位
     （為了平衡圖示寬度、讓文字視覺上真正置中），圖示後來拿掉了
     （這次對話討論：圖示本身沒有承載必要資訊，純裝飾，卻一直在
     製造置中/比例上的排版問題，「🏮」在地圖路線圖牌子上也已經
     出現過，拿掉不損失品牌識別），現在只剩文字這一個flex子項，
     不用再處理不對稱的問題 */
  justify-content: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}
.top-bar-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 0;
}
.top-bar-logo-zh {
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  font-size: 19px;
  /* 這次對話討論：中文店名改成金黃漸層文字（呼應夜市燈籠的暖色調，
     補回拿掉燈籠圖示後少掉的氛圍）+ 暖色文字光暈，比純白字更有
     夜市感。漸層文字用background-clip:text做，color先留白色當
     不支援時的備用色 */
  color: var(--nm-paper);
  background: linear-gradient(180deg, var(--nm-gold) 0%, var(--nm-lantern) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(232, 178, 60, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar-logo-en {
  font-family: "Work Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--nm-paper-dim);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.top-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(232, 178, 60, 0.3);
  color: var(--nm-paper);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.v5-weather-badge {
  display: flex;
  align-items: center;
  height: 18px;
  /* 原本是膠囊外框+底色，跟站內按鈕同一套「可以點擊」的視覺語言，
     但天氣資訊本身不能點擊，容易讓人誤以為可以按下去（這次對話
     討論）。拿掉外框/底色，改成純資訊呈現，不假裝是個按鈕 */
  border: none;
  background: none;
  white-space: nowrap;
  flex-shrink: 0;
}
/* .v5-weather-icon-badge／.v5-weather-text／.v5-weather-temp 這三個
   不 scope 在 .v5-weather-badge 底下（這次對話討論）：手機版容器是
   .v5-weather-badge，桌機版容器是 .intro-weather（見js/weather.js），
   兩邊共用同一套內部樣式，不特別綁在某一個容器class下面，才能兩邊
   都套用到，不用寫兩份重複規則 */
.v5-weather-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: 50%;
  /* 天氣圖示做成小圓章，比照公廁🚻／停車場P圖示同一套圓形徽章語言
     （這次對話討論），淡藍色調呼應「天空/天氣」的意象，跟公廁的
     青綠、停車場的藍、資訊符號的金色一樣，每種功能各自有自己的
     識別色 */
  background: linear-gradient(180deg, #7ab8e0 0%, #3d7fae 60%, #285d82 100%);
  font-size: 9.5px;
  line-height: 1;
  flex-shrink: 0;
}
.v5-weather-text {
  /* 地點+天氣描述文字降為次要資訊（這次對話討論），跟同一套Work
     Sans字體、但比溫度數字淡、小一號 */
  color: var(--nm-paper-dim);
  font-family: "Work Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 11px;
  font-weight: 400;
}
.v5-weather-temp {
  margin-left: 3px;
  color: var(--nm-gold);
  font-family: "Work Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
}
.v5-weather-badge:empty {
  display: none; /* 資料還沒抓回來之前，不要讓空殼子的邊框先卡在畫面上 */
}
.intro-meta-item.intro-weather {
  display: inline-flex;
  align-items: center;
  /* 跟手機版同一個決定（這次對話討論）：拿掉膠囊外框/底色，天氣
     不能點擊，不假裝是個按鈕，改成純資訊呈現，內部圖示小圓章／
     文字／溫度共用 style/main.css 的 .v5-weather-icon-badge／
     .v5-weather-text／.v5-weather-temp，不用另外寫一份桌機樣式 */
  border: none;
  background: none;
}
.top-btn-lang {
  width: auto;
  padding: 0 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

/* ---------- 語言切換：分段式雙選鈕 ---------- */
.lang-switch {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(232, 178, 60, 0.3);
  border-radius: 10px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.lang-switch-btn {
  border: none;
  background: transparent;
  color: #a89877;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  width: 38px;
  height: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
}
.lang-switch-btn.active {
  background: var(--nm-gold);
  color: var(--nm-ink);
}

/* ---------- 手機版精選推薦提示條（這次對話討論）：常駐貼在頭部
   下方，跟地圖一樣是position:fixed。高度會影響下面.map-area的
   top值要跟著手動加多少，實際數值等渲染出來後用瀏覽器量測校正，
   不是憑CSS數字用手算（同樣道理見enhancements.css第561行說明） ---------- */
.mobile-highlight-ticker {
  position: fixed;
  top: 93px; /* 跟.map-area一樣，這個93px是舊的頭部高度基準值，
                enhancements.css會覆寫成正確的127px */
  left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px; /* 原本38px，這次對話討論調高到符合44px觸控目標建議值，
                   enhancements.css的.map-area top要跟著同步加高 */
  padding: 0 14px;
  /* 這次對話討論：跟桌機版desktop-highlight-ticker同步套用「容器中性、
     重點色只留給徽章」的邏輯（見.mobile-highlight-icon），底色/邊框
     從金色系換成中性深色+白色 */
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.mobile-highlight-icon {
  /* 這次對話討論：跟桌機版.desktop-highlight-label同一套「實心重點色
     徽章+深色文字」邏輯——原本只有🔥圖示，現在把「精選推薦」文字也
     塞進來，字級/padding都比桌機版再收斂一點，畢竟手機這條本來就窄，
     擠進文字後面留給輪播內容跟省略號的空間會變少，這是使用者已經
     確認接受的取捨 */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 10px;
  background: #de7734;
  color: var(--nm-ink);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mobile-highlight-content {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  /* overflow:hidden是必要的（這次對話討論才發現漏掉）：輪播切換時
     新項目用transform:translateY(6px→0)滑入，這個transform會連同
     項目自己的overflow:hidden裁切範圍一起整層往下移，如果外層這裡
     沒有再裁一次，滑入中途那6px位移會讓內容暫時露出這一整條的
     下邊界，蓋到下面的地圖區塊，畫面上看起來像兩行字疊在一起 */
  overflow: hidden;
}
.mobile-highlight-item {
  /* 這次對話討論：改成真的<a>之後補上text-decoration/color，不然
     瀏覽器預設的底線＋藍色連結樣式會蓋掉原本設計好的視覺 */
  /* 這次對話討論：手機版把描述(.tag)視覺隱藏（見下面.mobile-highlight-item
     .tag），只剩徽章+攤位名稱，改成置中——只針對手機版，桌機版維持
     原樣不變 */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  /* 這次對話討論分析出來的根本原因：原本只有6px小幅位移，跟桌機版
     滑滿整個44px高容器比起來差太多，動態感很弱、接近靜態。改成跟
     桌機版一樣用滿整個容器高度，並補上方向性——預設(等待中)在上方
     translateY(-100%)，.active滑到定位，.leaving往下滑出，新舊
     項目「同方向移動」的效果現在手機版也有了 */
  transform: translateY(-100%);
  /* 這次對話討論：使用者反應「一閃而過」講的是這個動畫本身的速度，
     不是輪播間隔（間隔另外調過，見js/mobile-highlight-ticker.js）
     ——原本0.35s太快，拉長到0.9s */
  transition: opacity 0.9s ease, transform 0.9s ease;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}
.mobile-highlight-item.active {
  opacity: 1;
  transform: translateY(0);
}
.mobile-highlight-item.leaving {
  opacity: 0;
  transform: translateY(100%);
}
.mobile-highlight-item:focus-visible {
  outline: 2px solid var(--nm-paper);
  outline-offset: -2px;
}
/* 這次對話討論：跟桌機版同步套用，系統開啟「減少動態效果」時改用
   純淡入淡出，不做6px位移 */
@media (prefers-reduced-motion: reduce) {
  .mobile-highlight-item,
  .mobile-highlight-item.active,
  .mobile-highlight-item.leaving {
    transform: none;
    transition: opacity 0.3s ease;
  }
}
.mobile-highlight-item .name {
  /* 這次對話討論：先做範例讓使用者評估12.5px這個字級下Noto Serif TC
     的可讀性好不好，跟桌機版desktop-highlight-item .name做法一致，
     還沒定案——如果覺得太小看不清楚，這裡是唯一要改回Work Sans的地方 */
  /* 這次對話討論才發現：手機版.tag視覺隱藏，name是徽章旁唯一的內容，
     原本flex-shrink:0讓它永遠撐開真實寬度，遇到長攤位名稱會被父層
     overflow:hidden硬裁切、沒有省略號提示。改成可以縮、加min-width:0
     （flex子項預設min-width是auto，不加這個還是縮不下去）+ellipsis，
     跟桌機版.desktop-highlight-item .tag同一套處理手法 */
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--nm-paper);
  font-family: "Noto Serif TC", serif;
  font-size: 12.5px;
  font-weight: 800;
}
.mobile-highlight-item .tag {
  /* 這次對話討論：手機版決定只保留徽章+攤位名稱、視覺上不顯示描述，
     但描述本身不能整個拿掉——爬蟲、螢幕報讀器都還要讀得到，只是
     一般使用者看不到。用標準的「視覺隱藏但不從無障礙樹拿掉」寫法
     （跟display:none不同，display:none連螢幕報讀器都會跳過），
     不是display:none，桌機版.desktop-highlight-item .tag完全不受
     影響、維持原樣可見 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mobile-highlight-more {
  /* 實測過原本這顆箭頭的實際可點擊範圍只有15×18px，遠低於Apple/Google
     建議的44×44px觸控目標。用height:100%撐滿整條44px高的提示條，
     再用padding+負margin把熱區往右邊界的空白（ticker本身padding:14px
     那塊，本來就沒東西）延伸，不影響旁邊輪播內容的排版寬度 */
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px 0 10px;
  margin-right: -14px;
  /* 這次對話討論：跟桌機版「查看完整清單」同步——分隔線、箭頭顏色
     都從金色改成中性的paper色，金色留給徽章專用 */
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--nm-paper);
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  line-height: 1;
}

/* ---------- 地圖區 ---------- */
.map-area {
  position: fixed;
  top: 93px; /* 對齊 .top-bar 改成雙排後的實際高度 */
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: var(--nm-night-deep);
}

.map-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.marker-layer {
  position: absolute;
  inset: 0;
  /* TODO: 標籤由 map-markers.js 動態產生後會塞進這裡 */
}

/* ---------- 地圖數字標籤（陽春版：純圓點，之後可換成密集避讓版） ---------- */
.map-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--nm-lantern);
  border: 1px solid var(--nm-paper);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  /* 放大/縮小用回彈曲線（跟分類標籤點擊那顆tag-bounce同一種節奏感），
     不是單純線性變大，hover起來感覺更有生氣、更像原生App互動 */
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    font-size 0.15s ease 0.08s, background 0.15s ease, box-shadow 0.15s ease;
  z-index: 5;
  overflow: hidden;
}
.map-marker.hover-preview,
.map-marker.selected {
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  z-index: 8;
}
/* hover跟「看地圖位置」(.locating) 都會同時冒出旁邊的名稱標籤（號碼+名稱），
   圓點自己裡面就不用再重複顯示一次號碼；只有單純點擊選中、沒有標籤陪同的
   情況，才需要圓點自己顯示號碼當作唯一的視覺回饋 */
.map-marker.selected:not(.hover-preview):not(.locating) {
  font-size: 11px;
}
.map-marker.hover-preview {
  background: var(--nm-lantern-deep);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.map-marker.selected {
  background: var(--nm-gold);
  color: var(--nm-ink);
  box-shadow: 0 0 0 5px rgba(232, 178, 60, 0.3), 0 0 14px 2px #ffd97a;
  z-index: 10;
}
.map-marker.dimmed {
  opacity: 0.25;
}

/* 桌機版限定：hover標籤放大顯示號碼＋攤位名稱（js/map-markers.js
   showHoverLabel()），273個標籤共用同一個元素，hover哪個點就換內容/
   位置，不會常駐273個隱藏元素在DOM裡。位置(left/top/transform)由JS
   計算並用inline style設定（要判斷是否靠近地圖邊緣決定要不要翻到
   下方/貼齊左右邊，邏輯是動態的，寫死在CSS里做不到），這裡只負責
   淡入淡出的transition本身 */
.map-marker-hover-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--nm-night);
  /* 細金框＋淡金光暈，呼應選中標記本來就是金色，讓「hover=被強調」
     這個語言跟地圖其他地方一致，不是憑空發明新顏色 */
  border: 1px solid rgba(232, 178, 60, 0.55);
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 8px rgba(232, 178, 60, 0.25);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.map-marker-hover-label.visible {
  opacity: 1;
}
/* 號碼獨立成金色徽章，跟名稱分開排（js/map-markers.js組出兩個span），
   比純文字黏在一起更有層次，也呼應攤位清單「數字方塊+名稱」的版面 */
.map-marker-hover-label-num {
  flex-shrink: 0;
  background: var(--nm-gold);
  color: var(--nm-ink);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
}
.map-marker-hover-label-name {
  color: var(--nm-paper);
}

/* ---------- 分類標籤共用：固定寬高置中，中英文切換時大小不變 ---------- */
.category-tag {
  width: 92px;
  height: 36px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

/* ---------- 分類標籤選中狀態（桌機/手機共用 .category-tag） ---------- */
.category-tag.active {
  background: var(--nm-gold);
  color: var(--nm-ink);
  border-color: var(--nm-gold);
  font-weight: 600;
}

/* 手機彈窗內的分類標籤（淺色底，跟桌機深色底樣式不同） */
.modal-tag-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.modal-tag {
  background: #fff;
  border: 1px solid var(--nm-paper-dim);
  color: var(--nm-ink);
  font-size: 12.5px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(42, 32, 22, 0.1);
}
.modal-tag:hover {
  border-color: var(--nm-gold);
}

/* ---------- 搜尋輸入框（手機彈窗內） ---------- */
.modal-search-input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--nm-paper-dim);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  color: var(--nm-ink);
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgba(42, 32, 22, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-search-input:focus {
  outline: none;
  border-color: var(--nm-gold);
  box-shadow: 0 0 0 3px rgba(232, 178, 60, 0.25);
}

/* ---------- 搜尋結果清單（手機/桌機共用結構） ---------- */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.search-result-row {
  box-shadow: 0 3px 10px rgba(42, 32, 22, 0.12);
}
.search-result-row .info {
  flex-direction: column;
  align-items: flex-start;
}
.search-hit-note {
  font-size: 10px;
  color: var(--nm-lantern-deep);
  margin: 1px 0 0;
}
.search-category-tag {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--nm-ink-soft);
  background: var(--nm-paper-dim);
  padding: 3px 8px;
  border-radius: 10px;
}

/* 桌機版搜尋結果做成下拉浮層，蓋在輸入框下方 */
.desktop-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--nm-paper);
  border-radius: 10px;
  padding: 10px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 60;
}
.desktop-search-results[hidden] {
  display: none;
}

/* ---------- 分類篩選：列表項目被篩掉時隱藏 ---------- */
.stall-row.hidden-by-filter {
  display: none;
}

/* ---------- 底部抽屜（骨架，尚未接拖曳/展開邏輯） ---------- */
.drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: var(--nm-paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(100% - 92px));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer.expanded {
  transform: translateY(28%);
}

.drawer-handle-area {
  padding: 10px 16px 12px;
  flex-shrink: 0;
  touch-action: none;
}

.handle-chevron {
  text-align: center;
  color: var(--nm-lantern);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  margin: 0 auto 6px;
}

.drawer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title-row h2 {
  font-family: "Noto Serif TC", serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--nm-ink);
  margin: 0;
}
.drawer-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--nm-ink-soft);
}
.drawer-hint {
  font-size: 11px;
  color: var(--nm-ink-soft);
  margin: 4px 0 0;
}

.stall-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 24px;
}
.stall-list-loading {
  text-align: center;
  color: var(--nm-ink-soft);
  font-size: 13px;
  padding: 32px 16px;
  margin: 0;
}

/* ---------- 攤位列表項目（精簡版，手機/桌機共用） ---------- */
.stall-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 5px;
  min-height: 40px;
  background: #fff;
  border: 1px solid var(--nm-paper-dim);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
  /* 現在是真正的 <a href>（SEO用，見js/stalls-list.js），這兩行蓋掉
     瀏覽器預設的連結底線／藍色文字，視覺上維持跟改之前一模一樣 */
  text-decoration: none;
  color: inherit;
}
.stall-row:hover {
  border-color: var(--nm-gold);
  background: #fdf8ec;
  /* 用兩層 box-shadow 疊出「加粗外框」+「浮起來」的立體感，
     不直接改 border-width 是為了不要讓 hover 時盒子尺寸跟著變
     （border-width 算進版面尺寸，改了會讓整行輕微位移/重排） */
  box-shadow: 0 0 0 1px var(--nm-gold), 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.stall-row .num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--nm-paper-dim);
  color: var(--nm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11.5px;
}
.stall-row .info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stall-row .name-zh {
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stall-row .name-en {
  font-size: 9.5px;
  color: var(--nm-ink-soft);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---------- 手機版清單：沒有hover可以觸發跑馬燈，太長的名稱改成換行
   顯示完整內容，而不是刪節號截斷；中英文改成上下疊放（跟桌機版的
   雙行呈現方式一致），避免兩個都換行時擠在同一橫排會很亂 ---------- */
#stall-list .stall-row .info {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#stall-list .stall-row .name-zh,
#stall-list .stall-row .name-en {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.stall-row .hot-dot {
  color: var(--nm-lantern);
  font-size: 11px;
  flex-shrink: 0;
}
.row-like-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--nm-ink-soft);
  flex-shrink: 0;
  white-space: nowrap;
}
.stall-row.selected {
  background: var(--nm-lantern);
  border-color: var(--nm-lantern-deep);
}
.stall-row.selected .num {
  background: var(--nm-gold);
  color: var(--nm-ink);
}
.stall-row.selected .name-zh { color: #fff; }
.stall-row.selected .name-en { color: rgba(255, 255, 255, 0.75); }

/* ---------- 收藏清單專用：快速取消收藏按鈕 ---------- */
.row-remove-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--nm-paper-dim);
  background: transparent;
  color: var(--nm-ink-soft);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.row-remove-btn:hover {
  background: var(--nm-lantern);
  border-color: var(--nm-lantern);
  color: #fff;
}

/* ---------- 通用彈窗骨架（搜尋／簡介／收藏／圖例共用） ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.72);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay[hidden] {
  display: none;
}

/* 開啟：淡入+輕微往上滑；關閉：對稱的淡出+往下滑，跟js/main.js的
   .closing class配合（動畫跑完才真的隱藏），全站共用同一套modal-overlay
   都會套用到，不用每個彈窗分開加 */
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes modal-sheet-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(24px); opacity: 0; }
}
.modal-overlay:not([hidden]) {
  animation: modal-fade-in 0.2s ease;
}
.modal-overlay:not([hidden]) .modal-sheet {
  animation: modal-sheet-in 0.25s ease;
}
.modal-overlay.closing {
  animation: modal-fade-out 0.2s ease forwards;
}
.modal-overlay.closing .modal-sheet {
  animation: modal-sheet-out 0.2s ease forwards;
}

.modal-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #f8f0dc 0%, var(--nm-paper) 100%);
  /* 上緣圓角、下緣直角——彈窗是從螢幕底部滑出來的，上緣（畫面中間最
     顯眼那條邊）該是圓潤的，原本寫反了（0 0 10px 10px 是下緣圓角），
     上緣一直是直角，跟全站到處是圓角的柔和風格不一致。半徑也從10px
     加大到18px，跟攤位卡片等其他圓角元素的量級接近 */
  border-radius: 18px 18px 0 0;
  padding: 24px 20px 28px;
  position: relative;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
}

/* 圓角方形+立體感，跟攤位卡片的.card-close（style/stall-card.css）
   同一套設計——原本這裡是扁平灰色圓形，跟卡片的✕長得不一樣，
   全站的關閉按鈕統一成同一種風格 */
/* 這次對話討論才發現的真bug：這顆按鈕原本是position:absolute，
   但它的定位基準.modal-sheet本身就是可捲動的容器
   （overflow-y:auto）——絕對定位是跟著.modal-sheet這個「捲動內容」
   一起算座標，不是跟著整個彈窗視窗，所以往下捲動時按鈕會跟著內容
   一起被捲走，捲夠遠就完全看不到，沒辦法關閉彈窗。這是
   .modal-close/.modal-sheet全站共用的結構，七個彈窗（intro、
   contact、favorites、highlights、faq、legend、parking）全部都有
   同樣問題，不是精選清單自己特有的。
   這裡的position:sticky+display:block+margin-left:auto是給「沒有
   標題可以並排」的情況用的預設值（目前只剩intro-modal是這樣，見
   index.html，它的關閉按鈕上面沒有h2標題）——button自己佔一整行、
   靠右對齊、捲動時固定住。有標題的六個彈窗（contact/favorites/
   highlights/faq/legend/parking）後來改成用.modal-header-row把標題
   跟關閉按鈕包成同一排，那六個的.modal-close改用下面
   .modal-header-row .modal-close那條規則覆蓋掉這裡的預設值，見
   下方.modal-header-row說明 */
.modal-close {
  position: sticky;
  display: block;
  top: 12px;
  margin: 0 0 10px auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(70, 65, 58, 0.75) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.7) 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  /* 簡介彈窗的照片輪播(.intro-carousel)是position:relative但沒設
     z-index，跟這顆同層時輪到DOM順序決定疊層，輪播排在後面反而蓋過
     按鈕，實測發現的真bug（不是顏色對比問題，是按鈕真的被蓋住）。
     .card-close原本就有z-index:5，這裡搬過來時漏掉了 */
  z-index: 5;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.modal-close:hover {
  background: linear-gradient(180deg, #e2624a 0%, var(--nm-lantern) 55%, #a8301c 100%);
  transform: scale(1.08);
}
.modal-close:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: scale(0.92);
}

/* 這次對話討論：使用者反應關閉按鈕自己佔一整行、跟標題不同排，版面
   看起來很怪——改成把標題+關閉按鈕包進同一個sticky的flex列，兩個
   併排顯示（標題靠左、按鈕靠右），整排一起在捲動時固定在頂端，
   而不是只有按鈕自己黏住。用margin負值抵銷.modal-sheet自己的
   padding，讓這排真的貼齊視窗最上緣、左右到底，捲動經過的內容會
   被這排自己的背景蓋住，不會透出來 */
.modal-header-row {
  position: sticky;
  top: -24px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -24px -20px 16px;
  padding: 24px 20px 14px;
  background: linear-gradient(180deg, #f8f0dc 0%, var(--nm-paper) 100%);
}
/* 這次對話討論：說明文字應該跟標題視覺上「靠近成一組」，跟下面的
   攤位卡片清單分開，不是三個等距排列、分不出誰跟誰是一組——只在
   highlights這裡把標題跟說明文字的間距縮小（其他4個共用
   .modal-header-row的彈窗不受影響，維持原本16px） */
.highlights-sheet .modal-header-row {
  margin-bottom: 4px;
}
.modal-header-row .modal-title {
  margin: 0;
}
/* 併進.modal-header-row這排flex版面後，關閉按鈕不用再自己處理
   sticky/置右，整排父層已經做掉了，這裡把上面.modal-close預設的
   自我定位屬性都覆蓋掉，只留視覺樣式 */
.modal-header-row .modal-close {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.modal-title {
  font-family: "Noto Serif TC", serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--nm-ink);
  margin: 0 0 16px;
}

.modal-placeholder {
  font-size: 12.5px;
  color: var(--nm-ink-soft);
  border: 1px dashed var(--nm-paper-dim);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 0;
}

/* ---------- 簡介彈窗：滿版照片版型 ---------- */
.modal-sheet.intro-sheet {
  padding: 0;
  /* 簡介／聯絡我們表單兩畫面用橫向滑動軌道切換（見下面.intro-view-track），
     需要固定高度＋自己不能捲動，捲動交給裡面每個.intro-view各自處理，
     跟攤位卡片兩畫面（.card-screen-track，style/stall-card.css）同一套
     做法。原本靠內容自然撐開、超過80vh才捲動的彈性高度就不能用了 */
  height: 78vh;
  max-height: 78vh;
  overflow: hidden;
}
/* 簡介／聯絡我們表單左右並排成200%寬的軌道，用transform橫向滑動切換，
   取代原本直接切hidden瞬間互換的做法（js/contact.js的
   showMobileContactView／showMobileMainView只負責切.show-contact這個
   class，不用逐一手動切每個畫面的hidden了） */
.intro-view-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.3s ease;
}
.intro-view-track.show-contact {
  transform: translateX(-50%);
}
.intro-view {
  width: 50%;
  flex: 0 0 50%;
  height: 100%;
  overflow-y: auto;
}

/* ---------- 簡介照片輪播（手機/桌機共用，只有容器尺寸不同）
   手動點箭頭/圓點切換，不自動播放 ---------- */
.intro-carousel {
  position: relative;
  overflow: hidden;
  background: var(--nm-paper-dim);
}
.intro-carousel-mobile {
  width: 100%;
  height: 180px;
}
.intro-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}
.intro-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.intro-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-carousel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--nm-night);
}
.intro-carousel-placeholder-icon {
  font-size: 28px;
  opacity: 0.6;
}
.intro-carousel-placeholder-label {
  font-size: 12.5px;
  color: var(--nm-paper-dim);
}
.intro-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-carousel-prev { left: 8px; }
.intro-carousel-next { right: 8px; }
.intro-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.intro-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.intro-carousel-dot.active {
  width: 16px;
  border-radius: 3px;
  background: var(--nm-gold);
}
.intro-body {
  padding: 20px 20px 26px;
}

/* ---------- 簡介內容（手機/桌機共用，桌機深色背景另外覆寫顏色） ---------- */
.intro-name {
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  font-size: 19px;
  color: var(--nm-ink);
  margin: 0 0 8px;
}
/* 只有桌機版天氣徽章會被 js/weather.js 動態包進這一層（見該檔案說明），
   手機版簡介彈窗的 .intro-name 沒有這層包裝，維持原本樣式 */
.intro-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.intro-name-row .intro-name {
  margin: 0;
}
.intro-desc {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
  /* 這次對話討論，跟桌機版同一個處理概念：簡介文字換襯線字體+
     特殊顏色，營造「講歷史故事」的氛圍感。這裡背景是淺色米白
     （手機簡介彈窗），跟桌機深色底不同，不能直接套用桌機那組亮
     米金色（對比度太差），改用燈籠紅棕色，一樣是暖色調、風格
     呼應，但在淺底上維持可讀對比 */
  font-family: "Noto Serif TC", serif;
  color: var(--nm-lantern-deep);
}
.intro-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}
.intro-meta-item {
  font-size: 12.5px;
  color: var(--nm-ink);
}
.intro-address-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.intro-address-text {
  font-size: 12.5px;
  color: var(--nm-ink);
}
.intro-copy-btn {
  background: var(--nm-paper-dim);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--nm-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.intro-copy-btn:hover {
  background: #dbcba1;
}
.intro-transit-text {
  font-size: 12.5px;
  color: var(--nm-ink-soft);
  margin: -6px 0 14px;
}
.intro-tips {
  margin: 0;
  /* 原本靠項目符號＋padding-left縮排，現在每項文字前面自己就有emoji
     當視覺標記（這次對話討論，見js/data/market-info.js的tips資料），
     不需要再額外的項目符號跟縮排，改回貼齊左邊，跟上面地址/交通行
     同一個起始位置 */
  padding-left: 0;
  list-style: none;
  font-size: 12.5px;
  color: #4a3d2a;
  line-height: 1.7;
}
.intro-tips li {
  margin-bottom: 4px;
}
.intro-tips li:last-child {
  margin-bottom: 0;
}

/* 手機版ℹ️簡介彈窗專用的內嵌可收合清單（桌機版改用地圖角落的P按鈕+
   獨立彈窗，不會用到這裡；彈窗本身已經是覆蓋在最上層的畫面，內嵌
   展開不會擠壓到彈窗以外的東西，所以手機版維持這個做法就好）。
   清單裡每一項用.parking-item等共用樣式，跟P按鈕彈窗的內容一致 */
.intro-parking {
  margin-top: 12px;
}
.intro-parking-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--nm-paper-dim);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nm-ink);
  cursor: pointer;
}
.intro-parking-toggle:hover {
  background: #dbcba1;
}
.intro-parking-toggle-arrow {
  transition: transform 0.15s ease;
}
.intro-parking-toggle[aria-expanded="true"] .intro-parking-toggle-arrow {
  transform: rotate(180deg);
}
/* 展開/收合動畫：grid-template-rows 從0fr變1fr，比max-height寫死一個
   數字更準確（不用猜清單多高），.intro-parking-list-inner負責在動畫
   過程中把超出的內容裁掉（0fr時實際高度是0，裡面內容還是完整的高度，
   沒有overflow:hidden裁掉的話動畫途中會爆版面） */
.intro-parking-list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.intro-parking-toggle[aria-expanded="true"] + .intro-parking-list {
  grid-template-rows: 1fr;
}
.intro-parking-list-inner {
  /* 這層不能有padding，只能負責overflow:hidden——實測踩到的細節：
     padding是結構性空間，不算overflow可以裁掉的「內容」，就算
     min-height:0/box-sizing:border-box都設了，收合到0fr時padding還是
     會單獨撐出一條沒收乾淨的縫。padding要往下再包一層才會真的收到0 */
  min-height: 0;
  overflow: hidden;
}
.intro-parking-list-content {
  padding: 6px 2px 0;
}

/* 附近停車場：獨立彈窗（跟?圖例彈窗同一套modal-overlay/modal-sheet），
   不是內嵌在簡介文字欄裡展開，展開/收合都不會擠壓到底下的攤位列表/
   地圖——這是因為之前做成內嵌可收合清單時，展開會把下面整塊往下推，
   使用者反饋版面被擠壓，改成獨立彈窗徹底避開這個問題 */
/* 固定兩行格式：店名永遠自己一整行，不管長短；第二行固定是「步行
   時間 + 開啟地圖」左右對齊——之前用flex-wrap讓三個元素自由換行，
   長店名跟短店名的換行結果不一樣，5筆看起來各自長得不同、不整齊，
   改成固定兩行結構後，不管店名多長，版面永遠一致（實測反饋的真問題） */
.parking-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nm-paper-dim);
}
.parking-item:last-child {
  border-bottom: none;
}
.parking-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ink);
}
.parking-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.parking-walktime {
  font-size: 12px;
  color: var(--nm-ink-soft);
}
.parking-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-lantern-deep);
  text-decoration: none;
  white-space: nowrap;
}
.parking-link:hover {
  text-decoration: underline;
}

.intro-contact {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--nm-paper-dim);
}
.intro-contact-studio {
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-ink-soft);
  margin: 0 0 2px;
}
.intro-contact-copyright {
  font-size: 11px;
  color: var(--nm-ink-soft);
  margin: 0;
}

/* ---------- 精選推薦完整清單彈窗（這次對話討論） ---------- */
.highlights-sheet {
  max-width: 640px;
}
/* 這次對話討論：標題顏色改用跟提示條徽章同一個橘色(#de7734)，把
   ticker（輪播提示條）跟這個完整清單彈窗視覺上串成同一個「精選推薦」
   識別，不是隨便配一個新顏色——只scope在highlights自己的標題id上，
   不動全站共用的.modal-title（聯絡我們/我的收藏/圖示說明/附近停車場
   這幾個標題顏色不受影響） */
/* 這次對話討論：使用者決定不要深色底了，改靠字體+字級做區隔——
   標題改用Work Sans粗體（跟全站共用的.modal-title襯線體拉開差異，
   走現代粗黑的標題感），字級也加大 */
#highlights-modal-title {
  color: #de7734;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
}
/* 說明文字改成獨立的資訊卡樣式（淡橘色底+左側色條+圖示前綴），
   從單純的一段灰色小字變成一個有存在感的「這份清單怎麼來的」說明
   區塊，跟下面33張卡片本身的視覺區隔手法（左側色條）呼應同一套
   語言，不是另外發明一套新樣式 */
/* 這次對話討論：原本淡橘色卡片式設計跟下面的攤位卡片形狀太像，
   看起來像「又一張攤位描述」，沒有做出「這是說明文字」的區隔。改成
   深色底+淺色字——這個彈窗本身是米白色調，深色反而是這裡唯一的
   深色元素，一眼就能看出這塊不一樣；顏色沿用--nm-ink（跟提示條/
   頁首同一個深色調），讓這塊說明文字感覺是跟提示條同一套「精選
   推薦」識別的延伸，不是憑空插入的新色塊 */
/* 這次對話討論：深色底拿掉了，改靠字體+字級做區隔——換成
   Noto Serif TC襯線體，跟標題的Work Sans粗黑形成對比（一個現代
   標題感、一個講究的說明文字感），字級也加大，維持左側色條+圖示 */
.highlights-intro {
  position: relative;
  margin: 0 0 28px;
  padding: 4px 16px 4px 34px;
  color: var(--nm-ink-soft);
  font-family: "Noto Serif TC", serif;
  font-size: 15px;
  line-height: 1.7;
}
.highlights-intro::before {
  content: "💡";
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: 16px;
}
/* 這次對話討論：曾經試過依類別分組（.highlights-group區塊+標題），
   但正式33攤資料進來後比例懸殊（鹹食21、甜點8、飲料4），分組反而
   讓畫面一大坨配兩小搓、更不平衡，這個彈窗也沒有篩選/跳轉功能用得上
   分組的導覽好處，改回單一列表平鋪，分類資訊變回卡片自己的小標籤 */
.highlights-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* 這次對話討論：使用者反應33張卡片背景色太淡、跟彈窗本身的米白色底
   幾乎融在一起，看起來像「一份白色清單」，卡片彼此、卡片跟底色都
   缺乏區隔。加粗底色不透明度+補上真正的邊框+輕微陰影，讓每張卡片
   讀起來像獨立物件；左側再加一條分類色邊條，顏色沿用
   .stall-row[data-category]既有的分類配色（見下面），不用重新發明
   新的分類配色系統，也不用像之前分組區塊那樣佔額外版面 */
.highlights-item {
  display: block;
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  background: rgba(139, 94, 52, 0.09);
  border: 1px solid rgba(139, 94, 52, 0.15);
  border-left: 4px solid rgba(139, 94, 52, 0.4);
  box-shadow: 0 1px 3px rgba(74, 52, 28, 0.08);
  text-decoration: none;
  color: inherit;
}
.highlights-item:hover {
  background: rgba(139, 94, 52, 0.16);
  box-shadow: 0 2px 6px rgba(74, 52, 28, 0.14);
}
.highlights-item[data-category="savory"]      { border-left-color: #e0562f; }
.highlights-item[data-category="dessert"]     { border-left-color: #d9527e; }
.highlights-item[data-category="drink"]       { border-left-color: #3f6fc0; }
.highlights-item[data-category="clothing"]    { border-left-color: #8a5fc2; }
.highlights-item[data-category="accessories"] { border-left-color: #2f9e7a; }
.highlights-item[data-category="toys_games"]  { border-left-color: #4f9e4f; }
.highlights-item[data-category="other"]       { border-left-color: #9c8a6a; }
/* 這次對話討論：改用跟這個彈窗自己的.modal-title、還有.intro-name、
   .legend-item-title同一套「名稱類文字用Noto Serif TC襯線體」慣例
   ——查過這幾個既有的名稱/標題元素，全部都是襯線體+var(--nm-ink)，
   沒有另外配特殊顏色，真正拉開份量差異的是字體+字級+字重，不是顏色。
   顏色的「特殊」留給分類標籤去做（見下面.highlights-item-cat依
   分類上色），跟卡片左側的分類色邊條互相呼應，比讓名稱本身用一個
   跟現有色票無關的新顏色更站得住腳 */
.highlights-item-name {
  margin: 0 0 5px;
  color: var(--nm-ink);
  font-family: "Noto Serif TC", serif;
  font-size: 16px;
  font-weight: 900;
}
.highlights-item-cat {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.highlights-item[data-category="savory"]      .highlights-item-cat { color: #e0562f; }
.highlights-item[data-category="dessert"]     .highlights-item-cat { color: #d9527e; }
.highlights-item[data-category="drink"]       .highlights-item-cat { color: #3f6fc0; }
.highlights-item[data-category="clothing"]    .highlights-item-cat { color: #8a5fc2; }
.highlights-item[data-category="accessories"] .highlights-item-cat { color: #2f9e7a; }
.highlights-item[data-category="toys_games"]  .highlights-item-cat { color: #4f9e4f; }
.highlights-item[data-category="other"]       .highlights-item-cat { color: #9c8a6a; }
/* 這次對話討論：使用者反應價格/理由的排版不固定——文字短的時候會
   排在同一行，文字長的時候被擠到下一行，33張卡片看起來忽長忽短、
   節奏不一致。改成價格跟理由永遠各自獨立一行，不管文字多長都固定
   兩行的版面，不再是靠flex-wrap看空間夠不夠決定要不要換行 */
.highlights-item-meta {
  margin: 0;
  font-size: 12px;
}
.highlights-item-meta .price {
  display: block;
  margin-bottom: 4px;
  color: var(--nm-lantern-deep);
  font-weight: 700;
}
.highlights-item-meta .tag {
  display: block;
  color: var(--nm-ink-soft);
}
@media (max-width: 480px) {
  .highlights-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 常見問題完整頁面彈窗（比照上面的.highlights-sheet） ---------- */
.faq-sheet {
  max-width: 640px;
}
#faq-modal-title {
  color: #de7734;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
}
.faq-sheet .modal-header-row {
  margin-bottom: 4px;
}
.faq-intro {
  position: relative;
  margin: 0 0 28px;
  padding: 4px 16px 4px 34px;
  color: var(--nm-ink-soft);
  font-family: "Noto Serif TC", serif;
  font-size: 15px;
  line-height: 1.7;
}
.faq-intro::before {
  content: "💡";
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: 16px;
}
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.faq-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(139, 94, 52, 0.09);
  border: 1px solid rgba(139, 94, 52, 0.15);
  box-shadow: 0 1px 3px rgba(74, 52, 28, 0.08);
}
.faq-question {
  margin: 0 0 6px;
  color: var(--nm-lantern-deep);
  font-family: "Noto Serif TC", serif;
  font-size: 15px;
  font-weight: 700;
}
.faq-answer {
  margin: 0;
  color: var(--nm-ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}
@media (max-width: 480px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 手機版簡介彈窗：簡介／FAQ雙分頁（這次對話討論，
   跟桌機版js/desktop-intro-collapse.js同一套邏輯，只是這裡是彈窗
   內部切換，不是浮動蓋在地圖上） ---------- */
.intro-body-tabs {
  display: flex;
  margin: -20px -20px 16px;
  border-bottom: 1px solid rgba(139, 94, 52, 0.2);
}
.intro-body-tab {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 8px;
  background: transparent;
  border: none;
  color: var(--nm-ink-soft);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.intro-body-tab:first-child {
  border-right: 1px solid rgba(139, 94, 52, 0.2);
}
/* 這次對話討論加強選中狀態的視覺區隔：原本只靠8%底色太淡不易注意，
   改用金色底色加深+底部一條實色金線(inset box-shadow，不影響版面高度)，
   兩個分頁的差異一眼就能看出來 */
.intro-body-tab[aria-expanded="true"] {
  color: var(--nm-ink);
  background: rgba(232, 178, 60, 0.22);
  box-shadow: inset 0 -3px 0 var(--nm-gold);
}
.intro-body-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-gold);
  color: var(--nm-ink);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
/* 修正：跟桌機版FAQ實測到的同一個問題——用[hidden]選擇器提高優先權，
   避免之後任何規則不小心給.intro-body-panel加上display，蓋掉隱藏
   效果（這次對話討論，見style/enhancements.css同樣的修正說明） */
.intro-body-panel[hidden] {
  display: none;
}
.intro-faq-item + .intro-faq-item {
  margin-top: 14px;
}
.intro-faq-question {
  margin: 0 0 4px;
  color: var(--nm-lantern-deep);
  font-size: 14px;
  font-weight: 700;
}
.intro-faq-answer {
  margin: 0;
  color: var(--nm-ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.intro-faq-more {
  display: block;
  margin-top: 14px;
  color: var(--nm-lantern-deep);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- 圖例彈窗 ---------- */
.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nm-paper-dim);
}
.legend-item:last-child {
  border-bottom: none;
}
.legend-icon {
  flex-shrink: 0;
  width: 40px;
  font-size: 15px;
  text-align: center;
  letter-spacing: -1px;
}
/* 圖例裡「收藏標記」的範例圖示（這次對話討論）：外觀直接比照地圖上
   真正的收藏標記（.map-marker.v4-favorited，見上面第251行），數字
   是假的範例編號「0」，不是真的攤位。不直接共用.map-marker class，
   因為那個class預設position:absolute+負margin是設計給地圖座標定位用
   的，搬到這裡的靜態排版脈絡下要另外覆寫掉，乾脆獨立一份樣式更乾淨 */
.legend-marker-example {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5b4b9e;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(91, 75, 158, 0.4);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}
.legend-icon-text {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--nm-lantern-deep);
  letter-spacing: 0;
}
.legend-item-title {
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--nm-ink);
  margin: 0 0 3px;
}
.legend-item-desc {
  font-size: 12px;
  color: var(--nm-ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* ---------- 圖示圖例按鈕（地圖角落，手機版位置） ---------- */
.legend-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--nm-night);
  border: 1px solid rgba(232, 178, 60, 0.4);
  color: var(--nm-gold);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  z-index: 45;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
/* 點擊回饋：跟站內其他按鈕（查看詳情/動作按鈕）同一套語言，滑鼠移過去
   底色變亮一點、按下去縮小+變暗，這兩顆（?圖例／P停車場）共用
   .legend-btn，改一次兩顆都會有 */
/* 整顆按鈕一起發光：底色跟外框都換成實心金色，文字跟著反轉成深色
   （原本是深底金字，發光時整個倒過來變金底深字，對比才夠），外面
   再加一圈模糊光暈——跟原本只把外框調亮、中間維持透明深色（看起來
   像「畫一個亮圈」而不是「整顆在發光」）的效果不同，這是使用者
   實際看到截圖後指出來的問題 */
.legend-btn:hover {
  background: var(--nm-gold);
  color: var(--nm-night);
  border-color: var(--nm-gold);
  box-shadow: 0 0 14px 4px rgba(232, 178, 60, 0.65);
  transform: scale(1.1);
}
.legend-btn:active {
  transform: scale(0.9);
  filter: brightness(0.85);
}
/* 附近停車場按鈕：跟?圖例按鈕同一排、同樣式，只是往左挪開不重疊。
   只給桌機版（desktop-only），手機版維持原本的做法不用加這顆。這條
   規則要放在.legend-btn後面，不然.legend-btn的right:16px在後面
   會贏過這裡的right:60px，兩顆按鈕會疊在同一個位置（實測踩到的真bug） */
.parking-map-btn {
  right: 60px;
}
/* 停車場圖示改用藍底白字，貼近現實世界停車標誌的配色慣例——跟
   旁邊?圖例按鈕統一的金色系不同，是刻意的例外，這顆對應真實存在
   的標誌，套用大家已經認得的顏色比硬跟著站內配色更好辨識。
   transform/filter沿用上面.legend-btn:hover／:active，這裡只
   覆蓋顏色相關屬性。選擇器故意寫成.legend-btn.parking-map-btn
   （兩個class都要）拉高優先權——style/enhancements.css裡有一條
   後載入、單獨的.legend-btn { background: var(--nm-gold); ... }
   （把「?」圖例按鈕改成實心金色的規則），跟這裡specificity一樣
   都是比左右位置晚載入的檔案贏，如果只寫.parking-map-btn會被蓋掉，
   變成「平常還是金色、只有hover才看得到藍色」（實測踩到的真bug） */
.legend-btn.parking-map-btn {
  /* 圓角方形，跟手機版攤位卡片的.card-close（style/stall-card.css）
     同一種立體感做法，取代.legend-btn原本的圓形 */
  border-radius: 10px;
  background: linear-gradient(180deg, #2d7dd2 0%, #0b4c91 60%, #073a70 100%);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}
.legend-btn.parking-map-btn:hover {
  background: linear-gradient(180deg, #4a97e8 0%, #1668c4 60%, #0b4c91 100%);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 14px 4px rgba(29, 120, 224, 0.65);
}
/* 抽屜展開成全螢幕清單時，地圖看不到了，這顆「地圖圖示說明」按鈕
   跟著沒有意義，直接藏起來（原本這裡還有一條把按鈕改成position:fixed、
   用寫死的92px閃避舊版抽屜把手的規則——那是地圖還沒改成有邊框卡片
   之前寫的，現在.legend-btn維持base rule的position:absolute就會
   正確貼齊.v4-map-frame右下角，跟桌機版一致，不用另外處理抽屜位置） */
/* #btn-legend 搬進 .v4-map-frame 底下之後不再是 #drawer 的親兄弟，
   同層選擇器選不到了，改用 body 上的 class（見 js/drawer.js） */
body.drawer-expanded #btn-legend {
  display: none;
}

@media (min-width: 769px) {
  html, body { overflow: auto; }

  .mobile-only { display: none !important; }
  .desktop-only { display: block; }

  /* ---------- 桌機頂部列 ---------- */
  .desktop-top-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    background: var(--nm-night);
    border-bottom: 1px solid rgba(232, 178, 60, 0.2);
  }
  .desktop-logo {
    margin: 0;
    font-family: "Noto Serif TC", serif;
    font-weight: 900;
    font-size: 18px;
    color: var(--nm-paper);
    white-space: nowrap;
  }
  .desktop-search-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
  }
  .desktop-search-input {
    flex: 1;
    height: 36px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(232, 178, 60, 0.3);
    border-radius: 8px;
    padding: 0 14px;
    color: var(--nm-paper);
    font-family: "Work Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: 13px;
  }
  .desktop-search-input::placeholder { color: #8a7c60; }
  .desktop-tag-row {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .desktop-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(232, 178, 60, 0.25);
    color: var(--nm-paper);
    font-size: 12.5px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
  }
  .desktop-tag:hover { background: rgba(232, 178, 60, 0.12); }
  .desktop-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid rgba(232, 178, 60, 0.25);
  }
  .desktop-actions .top-btn {
    width: auto;
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
  }
  #btn-favorites-desktop {
    width: 112px;
    text-align: center;
  }

  /* ---------- 桌機夜市簡介（常駐展開） ---------- */
  .desktop-intro {
    display: flex;
    gap: 24px;
    max-width: 1440px;
    margin: 24px auto;
    padding: 0 32px;
    align-items: center;
  }
  .desktop-intro-photo {
    width: 340px;
    /* 這次對話討論：原本220px比文字內容矮太多，不管照片靠上對齊
       還是置中都會很不平衡（見.desktop-intro-collapse .desktop-intro
       align-items的討論）。加高到360px，跟文字欄位的高度更接近，
       從根本縮小落差，不用再靠對齊方式將就 */
    height: 360px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--nm-paper-dim);
  }
  .desktop-intro-photo .intro-carousel {
    width: 100%;
    height: 100%;
  }

  /* 桌機版簡介區塊背景是深色，共用的 intro-* 文字樣式要覆寫成淺色 */
  .desktop-intro-text .intro-name { color: var(--nm-paper); }
  /* 這次對話討論：改個方向，不動地址/交通/提醒的顏色（維持原本
     一致的#d9cbb0），只針對簡介文字做特殊處理——襯線字體（跟頂部
     logo同一種Noto Serif TC）+ 溫暖米金色調，營造「講歷史故事」的
     氛圍感，跟下面純資訊性文字自然區隔開來，不用靠調暗其他文字
     來對比 */
  .desktop-intro-text .intro-desc {
    font-family: "Noto Serif TC", serif;
    color: #f0e4c8;
  }
  .desktop-intro-text .intro-meta-item,
  .desktop-intro-text .intro-address-text,
  .desktop-intro-text .intro-transit-text,
  .desktop-intro-text .intro-tips,
  .desktop-intro-text .intro-contact-studio,
  .desktop-intro-text .intro-contact-copyright { color: #d9cbb0; }
  .desktop-intro-text .intro-contact {
    border-top-color: rgba(232, 178, 60, 0.25);
  }
  .desktop-intro-text .intro-copy-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--nm-paper);
    border: 1px solid rgba(232, 178, 60, 0.3);
  }
  .desktop-intro-text .intro-copy-btn:hover {
    background: rgba(232, 178, 60, 0.15);
  }

  /* ---------- 桌機主體：左側列表 + 地圖並排 ---------- */
  .desktop-body {
    display: flex;
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto 32px;
    padding: 0 32px;
    height: 70vh;
    min-height: 480px;
  }
  .desktop-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--nm-paper);
    border-radius: 14px;
    padding: 16px;
    overflow-y: auto;
  }
  .desktop-sidebar-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .desktop-sidebar-title {
    font-family: "Noto Serif TC", serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
    margin: 0;
  }
  .desktop-stall-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--nm-ink-soft);
  }

  /* ---------- 桌機側欄列表：雙行顯示，中英文各自完整一行 ---------- */
  #stall-list-desktop .stall-row {
    align-items: center;
    min-height: unset;
    padding: 9px 12px;
    /* 上方有 position:sticky 的標題列（.desktop-sidebar-title-row，
       實測高度93px）貼在頂部，scrollIntoView 算「捲到看得到」時不知道
       上面蓋著這條列，會把目標行捲到剛好卡在它正下方被蓋住——
       技術上捲了，視覺上等於沒捲。留一點 scroll-margin-top（略大於
       93px）讓瀏覽器自動避開這塊被蓋住的區域 */
    scroll-margin-top: 100px;
  }
  #stall-list-desktop .stall-row .info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  #stall-list-desktop .stall-row .name-zh {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #stall-list-desktop .stall-row .name-en {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .map-area-desktop {
    flex: 1;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--nm-night-deep);
  }
  .map-area-desktop .map-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .map-area-desktop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .map-area-desktop .marker-layer {
    position: absolute;
    inset: 0;
  }

  /* 桌機版彈窗（收藏／圖例）置中顯示，不用底部滑出 */
  .modal-overlay {
    align-items: center;
  }
  .modal-sheet {
    border-radius: 18px;
  }

  /* ---------- 桌機版頁尾 ---------- */
  .desktop-footer {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 32px 28px;
    text-align: center;
  }
  .footer-copyright {
    font-size: 11px;
    color: #7a6d55;
    margin: 0;
  }
}