/* ============================================================================
 * 布里斯本樂齡語音導覽 — 樣式表 (styles.css)
 * ----------------------------------------------------------------------------
 * 視覺依 uiux 設計規範：布里斯本河岸暖陽風、長輩友善的高對比與大字級。
 * 所有顏色、陰影、字級比例集中在 :root 變數，方便一次調整全站。
 *
 * 章節目錄：
 *   1.  設計變數（顏色 / 陰影 / 字級比例）
 *   2.  基礎重置與全域元素
 *   3.  App 外框
 *   4.  頂部標題列（Header）
 *   5.  主內容捲動區與卡片
 *   6.  內容：麵包屑與音檔代碼
 *   7.  內容：Markdown 正文
 *   8.  內容：Markdown 圖片 → 圓角照片容器
 *   9.  內容：貼心叮嚀卡
 *   10. 載入中 / 錯誤狀態
 *   11. 內容結尾：大字換頁鈕
 *   12. 固定底部：精簡迷你播放器
 *   13. 抽屜目錄：外框與標題
 *   14. 抽屜目錄：四層樹狀（天數 / 景點 / 分區 / 音軌）
 *   15. 抽屜目錄：底部返回鈕
 *   16. 其他
 * ========================================================================== */


/* ============================================================================
 * 1. 設計變數（顏色 / 陰影 / 字級比例）
 * --font-scale 由 A- / A+ 動態調整，全站文字皆以它為基準做等比縮放。
 * ========================================================================== */
:root{
  --sand-bg:#FBF9F5; --card:#FFFFFF;                       /* 背景暖白、卡片白 */
  --teal:#1B5E6B; --teal-dark:#134650; --teal-light:#E6F1F3; /* 品牌河岸青藍 */
  --gold:#E59838; --gold-light:#FEF5E7; --gold-ink:#94570D;  /* 陽光金黃強調色 */
  --sage:#3D6B58; --sage-light:#EBF3EF;                    /* 尤加利綠（貼心卡）*/
  --graphite:#1A202C; --warm-gray:#4A5568; --border:#E8E4DC; /* 文字與分隔線 */
  --font-scale:1; --body-size:calc(19px * var(--font-scale)); /* 字級縮放基準 */
  --shadow-sm:0 1px 3px rgba(26,32,44,.07); --shadow-md:0 6px 20px rgba(27,94,107,.14);
}


/* ============================================================================
 * 2. 基礎重置與全域元素
 * .touch 是「最小可點擊範圍」，確保長輩容易點到。
 * ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}   /* 整頁不捲動，只讓 main 內部捲動 → 頂部列永遠固定可見 */
body{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  background:#EDE8DF;color:var(--graphite);-webkit-font-smoothing:antialiased;line-height:1.6;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{display:block;max-width:100%;}
.touch{min-height:48px;min-width:48px;}


/* ============================================================================
 * 3. App 外框
 * 手機優先；桌機時置中並限制最大寬度，模擬單手操作的手機版面。
 * ========================================================================== */
#app{position:relative;display:flex;flex-direction:column;width:100%;max-width:460px;margin:0 auto;
  height:100dvh;background:var(--sand-bg);box-shadow:0 0 40px rgba(0,0,0,.12);overflow:hidden;}


/* ============================================================================
 * 4. 頂部標題列（Header）
 * 常駐頂端：左＝目錄鈕、中＝目前天數/景點、右＝A- / A+ 字級縮放。
 * ========================================================================== */
header#topbar{position:sticky;top:0;z-index:40;background:rgba(251,249,245,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));}
.menu-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--teal);font-weight:700;font-size:16px;line-height:1;}
.menu-btn:active{transform:scale(.95);}
.topbar-center{flex:1;text-align:center;min-width:0;padding:0 2px;}
/* 行程眉標：天數＋當日主題。字數依行程而異，需在各種手機寬度都維持「單行不換行」，
 * 避免文字擠成兩行造成標題列跑版。實際字級由 JS（fitEyebrow）依可用寬度自動縮放，
 * 縮到最小仍放不下時，才由文字本身以 … 省略。 */
.topbar-eyebrow{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:5px;font-weight:700;
  color:var(--teal);line-height:1.2;max-width:100%;}
.topbar-eyebrow svg{flex:none;}          /* 圖示不參與壓縮，保持固定尺寸 */
.topbar-eyebrow span{min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-title{font-size:15px;font-weight:700;color:var(--graphite);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 字級縮放按鈕組 */
.zoom-group{display:flex;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;}
.zoom-group button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--teal);font-weight:800;}
.zoom-group button:active{transform:scale(.9);}
.zoom-group button:hover{background:var(--teal-light);}
.zoom-group .divider{width:1px;background:var(--border);margin:7px 0;}
.zoom-btn-minus{font-size:13px;}   /* A- 略小 */
.zoom-btn-plus{font-size:16px;}    /* A+ 略大 */


/* ============================================================================
 * 5. 主內容捲動區與卡片
 * main 底部保留較大留白，避免內容被固定的迷你播放器蓋住。
 * ========================================================================== */
main{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 150px;-webkit-overflow-scrolling:touch;}
section.card,article.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:16px;}


/* ============================================================================
 * 6. 內容：單元大標題
 * ========================================================================== */
.story{padding:18px;}
.story h3{font-size:calc(21px * var(--font-scale));font-weight:900;color:var(--graphite);line-height:1.4;letter-spacing:-.01em;margin-bottom:16px;}


/* ============================================================================
 * 7. 內容：Markdown 正文
 * 由 app.js 解析 .md 後填入 #mdBody；粗體以品牌青藍強調「中文（English）」詞彙。
 * ========================================================================== */
.md-body p{font-size:var(--body-size);line-height:1.85;color:var(--graphite);letter-spacing:.02em;margin-bottom:16px;}
.md-body p:last-child{margin-bottom:0;}
.md-body strong{color:var(--teal);font-weight:700;}
.md-body h3,.md-body h4{font-size:calc(18px * var(--font-scale));font-weight:700;color:var(--teal);margin:18px 0 10px;}
.md-body ul{margin:0 0 16px;padding-left:22px;}
.md-body li{font-size:var(--body-size);line-height:1.8;margin-bottom:8px;}
/* 文字跟著語音跑：句子被包成 .say-sent；播放時只替「目前正在唸的這一句」上底色。
 * box-decoration-break:clone 讓底色在換行時每一行都完整呈現。 */
.say-sent{border-radius:5px;transition:background-color .25s ease;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.say-sent.sent-current{background:rgba(229,152,56,.15);} /* 目前這一句：金色底色 */


/* ============================================================================
 * 8. 內容：Markdown 圖片 → 圓角照片容器
 * Markdown 的 ![說明](路徑) 會被 app.js 轉成 16:9 圓角圖框；
 * .ph（placeholder）＝照片尚未放入時，顯示暖色佔位圖與提示文字。
 * ========================================================================== */
.md-fig{margin:8px 0 18px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);}
.md-fig-frame{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#dbeaed,#eaf1ea);}
.md-fig-frame img{width:100%;height:100%;object-fit:contain;}
.md-fig-frame.ph img{display:none;}
.md-fig-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:16px;color:var(--teal);}
.md-fig-frame.ph .md-fig-ph{display:flex;}
.md-fig-ph svg{width:40px;height:40px;opacity:.55;}
.md-fig-ph span{font-size:13px;color:var(--warm-gray);font-weight:600;}
.md-fig figcaption{padding:10px 14px;background:var(--sand-bg);border-top:1px solid var(--border);
  font-size:calc(14px * var(--font-scale));font-weight:600;color:var(--warm-gray);line-height:1.6;display:flex;gap:7px;align-items:flex-start;}
.md-fig figcaption::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px;}


/* ============================================================================
 * 9. 內容：貼心叮嚀卡
 * Markdown 的引言（> …）會被 app.js 轉成尤加利綠的「貼心叮嚀」卡片。
 * ========================================================================== */
.tip-card{margin:20px 0 4px;border-radius:14px;background:var(--sage-light);border:2px solid rgba(61,107,88,.35);padding:16px;display:flex;gap:12px;align-items:flex-start;}
.tip-icon{width:42px;height:42px;border-radius:12px;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm);}
.tip-icon svg{width:22px;height:22px;}
.tip-body h4{font-size:calc(15px * var(--font-scale));font-weight:700;color:var(--sage);margin-bottom:4px;}
.tip-body p{font-size:calc(15px * var(--font-scale));line-height:1.75;color:#234537;}


/* ============================================================================
 * 10. 載入中 / 錯誤狀態
 * 內容下載時顯示轉圈；載入失敗（多為 file:// 開啟）時顯示解決方式。
 * ========================================================================== */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 16px;color:var(--warm-gray);}
.spinner{width:38px;height:38px;border:4px solid var(--teal-light);border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.err-box{padding:18px;border-radius:14px;background:var(--gold-light);border:1px solid rgba(229,152,56,.4);color:var(--gold-ink);line-height:1.8;font-size:15px;}
.err-box b{display:block;margin-bottom:6px;font-size:16px;}
.err-box code{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:5px;font-size:13px;word-break:break-all;}


/* ============================================================================
 * 11. 內容結尾：大字換頁鈕（長輩友善）
 * 每篇內容底部的「上一頁 / 下一頁」，字大、易點、到頭尾自動停用。
 * ========================================================================== */
.page-nav{display:flex;gap:12px;margin:4px 0 8px;}
.pg-btn{flex:1;min-height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:calc(18px * var(--font-scale));}
.pg-btn svg{width:24px;height:24px;flex-shrink:0;}
.pg-prev{background:var(--card);border:2px solid var(--teal);color:var(--teal);box-shadow:var(--shadow-sm);}
.pg-prev:hover{background:var(--teal-light);}
.pg-next{background:var(--teal);color:#fff;box-shadow:var(--shadow-md);}
.pg-next:hover{background:var(--teal-dark);}
.pg-btn:active{transform:scale(.97);}
.pg-btn:disabled{opacity:.4;pointer-events:none;}


/* ============================================================================
 * 12. 固定底部：精簡迷你播放器
 * 組成：進度條 →（僅無語音時出現的）尚無語音列 → 控制列（左空、中播放控制、右自動接播與速度）。
 * .is-playing 切換播放/暫停圖示；.mp-auto.on 表示自動接播開啟。
 * ========================================================================== */
#miniplayer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:460px;z-index:45;
  background:rgba(251,249,245,.98);backdrop-filter:blur(12px);border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,.10);padding-bottom:env(safe-area-inset-bottom);}

/* 12a. 進度條（可點擊 / 拖曳，寬度由 app.js 依播放進度即時設定） */
.mp-progress{position:relative;height:8px;background:var(--border);cursor:pointer;}
.mp-progress:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.mp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);}

/* 12b. 資訊列：只在「沒有語音」時顯示「尚無語音」，有語音則整列不顯示、不佔空間 */
.mp-meta{display:none;justify-content:center;align-items:center;padding:8px 14px 2px;}
#miniplayer:has(#audioMissing.show) .mp-meta{display:flex;}
.mp-noaudio{font-size:13px;font-weight:700;color:var(--gold-ink);white-space:nowrap;}

/* 12c. 控制列：播放控制置中 */
.mp-controls{display:flex;align-items:center;justify-content:center;padding:4px 8px 8px;}
.mp-transport{display:flex;align-items:center;gap:8px;}

/* 12e. 上一首 / 快退 / 快進 / 下一首 */
.mp-nav{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--teal);position:relative;}
.mp-nav:hover{background:var(--teal-light);}
.mp-nav:active{transform:scale(.9);}
.mp-nav svg{width:24px;height:24px;}
.mp-nav .s15{position:absolute;bottom:3px;font-size:8px;font-weight:800;} /* 快退/快進上的「15」秒數 */
.mp-nav:disabled{opacity:.3;pointer-events:none;}

/* 12f. 主播放 / 暫停鈕（.is-playing 切換兩個圖示的顯隱） */
.mp-play{width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);flex-shrink:0;}
.mp-play:hover{background:var(--teal-dark);}
.mp-play:active{transform:scale(.95);}
.mp-play svg{width:26px;height:26px;}
.mp-play .pause-icon{display:none;}
.mp-play.is-playing .play-icon{display:none;}
.mp-play.is-playing .pause-icon{display:block;}


/* ============================================================================
 * 13. 抽屜目錄：外框與標題
 * 由左側滑出、佔 86% 寬；#overlay 是半透明遮罩，點擊可關閉。
 * .open 由 app.js 切換，控制滑入/滑出動畫。
 * ========================================================================== */
#overlay{position:fixed;inset:0;z-index:50;background:rgba(19,70,80,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s;}
#overlay.open{opacity:1;visibility:visible;}
#drawer{position:fixed;top:0;left:0;z-index:60;width:86%;max-width:400px;height:100dvh;background:var(--sand-bg);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 30px rgba(0,0,0,.28);}
#drawer.open{transform:translateX(0);}
.drawer-head{background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));}
.drawer-head .brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-logo{width:38px;height:38px;border-radius:50%;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:3px;}
.brand-logo svg{width:100%;height:100%;}
.drawer-head h2{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drawer-head .close{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.drawer-head .close:active{transform:scale(.9);}
.tree{flex:1;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch;}


/* ============================================================================
 * 14. 抽屜目錄：四層樹狀（天數 / 景點 / 分區 / 音軌）
 * 目前天數自動展開、其餘收合；.dim 淡化非目前景點；
 * .current 金色高亮目前播放的音軌並顯示動態音波；.done 顯示已聽完打勾。
 * ========================================================================== */

/* 14a. 第一層：天數 */
.day{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:14px;}
.day-head{background:#F4F1EA;padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.day-head.collapsed{border-bottom:none;}
.day-head .l{display:flex;align-items:center;gap:8px;min-width:0;}
.day-tag{padding:2px 8px;border-radius:6px;background:var(--teal);color:#fff;font-size:12px;font-weight:700;flex-shrink:0;}
.day-name{font-weight:700;font-size:15px;color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chev{width:14px;height:14px;color:var(--teal);flex-shrink:0;transition:transform .2s;}
.day-head.collapsed .chev{transform:rotate(-90deg);}
.day-body{padding:10px;display:flex;flex-direction:column;gap:12px;}
.day-body.hide{display:none;}

/* 14b. 第二層：景點 */
.spot{border:2px solid rgba(27,94,107,.28);background:var(--sand-bg);border-radius:14px;padding:10px;}
.spot.dim{border:1px solid var(--border);background:var(--card);}
.spot-head{display:flex;align-items:center;gap:10px;padding:4px 2px;}
.spot-num{width:24px;height:24px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm);}
.spot.dim .spot-num{background:var(--border);color:var(--warm-gray);}
.spot-name{font-size:15px;font-weight:800;color:var(--teal);line-height:1.25;}
.spot.dim .spot-name{font-size:14px;color:var(--graphite);font-weight:700;}
.spot-body{margin-top:8px;display:flex;flex-direction:column;gap:10px;}

/* 只有一個音軌的景點：合併成單一按鈕，直接以地點名稱為標題（避免多一層看起來太花）。 */
.spot-solo{width:100%;text-align:left;display:flex;align-items:center;gap:10px;}
.spot-solo:hover{border-color:rgba(27,94,107,.5);}
.spot-solo:active{transform:scale(.98);}
.spot-solo .spot-num svg{width:14px;height:14px;}
.spot-solo.current{background:var(--gold-light);border-color:var(--gold);box-shadow:var(--shadow-sm);}
.spot-solo.current .spot-num{background:var(--gold);color:#fff;}
.spot-solo.current .spot-name{color:var(--gold-ink);}
.spot-solo.done .spot-num{background:var(--sage-light);color:var(--sage);}

/* 14c. 第三層：音軌清單 */
.tracks{display:flex;flex-direction:column;gap:7px;}
.trk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--border);text-align:left;width:100%;}
.trk:hover{border-color:rgba(27,94,107,.4);}
.trk .l{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.trk-ico{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#F0EFEB;color:var(--warm-gray);}
.trk-ico svg{width:15px;height:15px;}
.trk.done .trk-ico{background:var(--sage-light);color:var(--sage);} /* 已聽完＝綠打勾 */
.trk-txt{min-width:0;}
.trk-title{font-size:13px;font-weight:700;color:var(--graphite);line-height:1.3;display:block;white-space:normal;}
.trk-meta{font-size:11px;color:var(--warm-gray);font-weight:500;margin-top:2px;display:block;}
/* 目前播放中的音軌：金色高亮 */
.trk.current{background:var(--gold-light);border:2px solid var(--gold);box-shadow:var(--shadow-sm);}
.trk.current .trk-ico{background:var(--gold);color:#fff;}
.trk.current .trk-title{color:var(--gold-ink);}


/* ============================================================================
 * 15. 抽屜目錄：底部返回鈕
 * ========================================================================== */


/* ============================================================================
 * 16. 內容：行程表（時間軸卡片）
 * 「行程總覽」每日行程原以三欄表格（時間 / 地點 / 行程）呈現，
 * 但手機寬度下三欄相互壓縮，地點名稱常一字一行、極難閱讀。
 * 故由 app.js 於載入行程時，將表格改寫為「時間軸卡片」：
 *   時間 → 左側醒目標記；地點 → 卡片標題；行程 → 說明文字。
 * 版面寬鬆、依時間由上而下排列，長輩對照閱讀更輕鬆。
 * ========================================================================== */

/* 分段標題（行程表的「## 第 X 天…」與入境卡的「## 正面／背面…」）：加上底線色帶。 */
body.mode-itinerary .md-body h2,
body.mode-arrival .md-body h2{font-size:calc(19px * var(--font-scale));font-weight:800;color:var(--teal-dark);
  margin:26px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--teal-light);line-height:1.4;}
body.mode-itinerary .md-body h2:first-child,
body.mode-arrival .md-body h2:first-child{margin-top:4px;}

/* 時間軸容器：以每張卡片左側時間標記中心為軸，串起一條淡色連接線。 */
.itin-timeline{list-style:none;margin:4px 0 24px;padding:0;}
.itin-stop{position:relative;display:flex;gap:14px;padding-bottom:16px;}
/* 連接線：貫穿各時間標記中心（左緣起算約 27px），最後一站不再往下延伸。 */
.itin-stop::before{content:"";position:absolute;left:26px;top:8px;bottom:-8px;width:2px;background:var(--border);}
.itin-stop:last-child::before{display:none;}

/* 時間標記：淡青底圓角標籤，字體加大加重，一眼可辨識時段。 */
.itin-time{position:relative;z-index:1;flex-shrink:0;width:54px;box-sizing:border-box;text-align:center;
  font-size:calc(15px * var(--font-scale));font-weight:800;color:var(--teal-dark);line-height:1.2;
  background:var(--teal-light);border:2px solid var(--card);border-radius:11px;padding:7px 4px;box-shadow:var(--shadow-sm);}

/* 卡片內容：地點為標題、行程為說明，皆為寬鬆單欄、可自由換行。 */
.itin-detail{flex:1;min-width:0;padding-top:2px;}
.itin-place{font-size:calc(17px * var(--font-scale));font-weight:800;color:var(--teal);line-height:1.5;margin-bottom:4px;}
.itin-act{font-size:calc(15px * var(--font-scale));color:var(--warm-gray);line-height:1.75;letter-spacing:.01em;}

/* 行程表每日標題下的「當天語音導覽」耳機連結：青色膠囊按鈕，點了跳到當天導覽。 */
.day-guide-link{display:flex;align-items:center;gap:7px;width:fit-content;margin:-4px 0 16px;
  padding:8px 15px;border-radius:999px;border:2px solid var(--teal);background:var(--teal-light);
  color:var(--teal-dark);font-size:calc(14px * var(--font-scale));font-weight:800;box-shadow:var(--shadow-sm);}
.day-guide-link svg{width:19px;height:19px;flex-shrink:0;}
.day-guide-link:hover{background:var(--teal);color:#fff;}
.day-guide-link:active{transform:scale(.98);}

/* 內文與表格內的超連結：品牌青藍加底線，點擊區域夠大，長輩易辨識與點按。 */
.md-body a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;word-break:break-word;}
.md-body a:hover{color:var(--teal-dark);}
.md-body thead th a{color:#fff;}   /* 表頭若含連結維持白字 */

/* 站內頁面連結（如「入境卡填寫範本」）：金色行動按鈕，含連結圖示；
   採 fit-content 寬度＋較窄高度，不佔滿整行、不會太大。 */
.md-body a.page-link{display:flex;width:fit-content;align-items:center;gap:7px;
  margin:6px 0 14px;padding:9px 15px;border-radius:11px;text-decoration:none;
  font-size:calc(15px * var(--font-scale));font-weight:800;color:#fff;background:var(--gold);
  box-shadow:var(--shadow-sm);line-height:1.3;}
.md-body a.page-link::before{content:"";width:16px;height:16px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%204h6v6M20%204l-9%209M18%2014v5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1h5'/%3E%3C/svg%3E") center/contain no-repeat;}
.md-body a.page-link:hover{background:var(--gold-ink);color:#fff;}
.md-body a.page-link:active{transform:scale(.98);}

/* 入境卡範本：逐格填寫卡片（欄位 → 要填的英文 → 小提醒）。 */
.field-list{display:flex;flex-direction:column;gap:12px;margin:4px 0 22px;}
.field-card{border:1px solid var(--border);border-radius:14px;background:var(--card);
  padding:13px 15px;box-shadow:var(--shadow-sm);}
.field-label{font-size:calc(14px * var(--font-scale));font-weight:700;color:var(--warm-gray);
  line-height:1.55;margin-bottom:7px;}
.field-value{font-size:calc(18px * var(--font-scale));font-weight:800;color:var(--teal-dark);
  line-height:1.5;letter-spacing:.02em;background:var(--teal-light);border-radius:9px;
  padding:9px 12px;word-break:break-word;}
.field-note{font-size:calc(13px * var(--font-scale));color:var(--warm-gray);line-height:1.7;margin-top:8px;}

/* 匯率計算機（澳幣 ⇄ 台幣）：精簡版，手機一頁內可完整顯示、免捲動。 */
.fx{display:flex;flex-direction:column;gap:10px;margin:4px 0;}
.fx-rate-note{font-size:calc(13px * var(--font-scale));color:var(--gold-ink);line-height:1.6;
  background:var(--gold-light);border-radius:10px;padding:9px 12px;}
.fx-row{display:flex;flex-direction:column;gap:5px;}
.fx-label{font-size:calc(14px * var(--font-scale));font-weight:700;color:var(--warm-gray);}
.fx-field{display:flex;align-items:center;gap:10px;border:2px solid var(--border);border-radius:14px;
  background:var(--card);padding:11px 15px;box-shadow:var(--shadow-sm);}
.fx-field:focus-within{border-color:var(--teal);}
.fx-sym{font-size:calc(17px * var(--font-scale));font-weight:800;color:var(--teal);flex-shrink:0;min-width:40px;}
.fx-input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:calc(26px * var(--font-scale));font-weight:800;color:var(--graphite);text-align:right;}
.fx-eq{text-align:center;font-size:calc(20px * var(--font-scale));font-weight:800;color:var(--gold);line-height:1;}
.fx-clear{margin-top:4px;padding:13px;border-radius:14px;border:2px solid var(--border);background:var(--card);
  font-size:calc(16px * var(--font-scale));font-weight:800;color:var(--warm-gray);box-shadow:var(--shadow-sm);}
.fx-clear:hover{border-color:var(--teal);color:var(--teal);}
.fx-clear:active{transform:scale(.98);}


/* ============================================================================
 * 17. 抽屜目錄：置頂三顆工具鈕（行程表 / 匯率計算 / 記帳）
 * 單行、無副標、較窄；三顆以不同顏色與圖示區別，目前所在頁面會高亮 focus。
 * ========================================================================== */
.tool-nav{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.tool-btn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px 12px;
  background:var(--card);border:2px solid var(--border);border-radius:13px;box-shadow:var(--shadow-sm);}
.tool-btn:active{transform:scale(.98);}
.tool-ico{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.tool-ico svg{width:19px;height:19px;}
.tool-title{font-size:16px;font-weight:800;line-height:1.2;color:var(--graphite);}
.tool-title .ext-ico{vertical-align:-1px;margin-left:2px;opacity:.7;}   /* 外部連結小圖示 */

/* 行程表＝青 */
.tool-itin .tool-ico{background:var(--teal-light);color:var(--teal);}
.tool-itin:hover{border-color:var(--teal);}
.tool-itin.current{background:var(--teal-light);border-color:var(--teal);}
.tool-itin.current .tool-ico{background:var(--teal);color:#fff;}
.tool-itin.current .tool-title{color:var(--teal-dark);}

/* 匯率計算＝金 */
.tool-fx .tool-ico{background:var(--gold-light);color:var(--gold-ink);}
.tool-fx:hover{border-color:var(--gold);}
.tool-fx.current{background:var(--gold-light);border-color:var(--gold);}
.tool-fx.current .tool-ico{background:var(--gold);color:#fff;}
.tool-fx.current .tool-title{color:var(--gold-ink);}

/* 記帳＝綠（外部連結，無 current 狀態）*/
.tool-acct .tool-ico{background:var(--sage-light);color:var(--sage);}
.tool-acct:hover{border-color:var(--sage);}

/* 「語音導覽」分隔列：與上方工具鈕明確區隔 */
.tree-section{display:flex;align-items:center;gap:10px;margin:14px 2px 12px;}
.tree-section-line{flex:1;height:1px;background:var(--border);}
.tree-section-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--warm-gray);
  text-transform:none;flex-shrink:0;}


/* ============================================================================
 * 18. 行程總覽模式：隱藏語音相關介面
 * body.mode-itinerary 時，行程表不需要語音，隱藏迷你播放器與內容底部換頁鈕，
 * 並縮小主內容底部留白（原留白是為了避開固定播放器）。
 * ========================================================================== */
body.mode-itinerary #miniplayer,
body.mode-arrival #miniplayer,
body.mode-converter #miniplayer,
body.mode-shopping #miniplayer{display:none;}
body.mode-itinerary .page-nav,
body.mode-arrival .page-nav,
body.mode-converter .page-nav,
body.mode-shopping .page-nav{display:none;}
body.mode-itinerary main,
body.mode-arrival main,
body.mode-converter main,
body.mode-shopping main{padding-bottom:32px;}

/* ============================================================================
 * 18.5 澳洲購物指南：分類頁籤 + 商品卡片
 * ========================================================================== */
/* 特殊頁（入境卡範本／購物指南）頂端的「返回上一頁」按鈕。 */
.back-btn{display:flex;align-items:center;gap:6px;width:fit-content;margin:0 0 14px;
  padding:8px 14px;border-radius:999px;border:2px solid var(--border);background:var(--card);
  color:var(--teal-dark);font-size:calc(14px * var(--font-scale));font-weight:800;box-shadow:var(--shadow-sm);}
.back-btn svg{width:18px;height:18px;flex-shrink:0;}
.back-btn:hover{border-color:var(--teal);background:var(--teal-light);}
.back-btn:active{transform:scale(.98);}

/* 分類頁籤：固定 3 欄格線，每欄等寬，切換時位置不會位移（不再飄來飄去）。 */
.shop-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:2px 0 10px;margin:0 0 4px;}
.shop-tab{font-size:calc(14px * var(--font-scale));font-weight:800;color:var(--warm-gray);
  background:var(--card);border:2px solid var(--border);border-radius:999px;padding:8px 6px;
  text-align:center;white-space:nowrap;}
.shop-tab.active{background:var(--teal);border-color:var(--teal);color:#fff;}

/* 商品卡片清單 */
.shop-list{display:flex;flex-direction:column;gap:12px;margin:4px 0 6px;}
.shop-card{display:flex;gap:13px;align-items:stretch;border:1px solid var(--border);border-radius:14px;
  background:var(--card);padding:11px;box-shadow:var(--shadow-sm);}
.shop-fig{position:relative;flex:0 0 96px;width:96px;height:96px;border-radius:11px;overflow:hidden;
  background:var(--teal-light);}
.shop-img{width:100%;height:100%;object-fit:cover;display:block;}
.shop-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:var(--teal);background:var(--teal-light);text-align:center;padding:6px;}
.shop-ph svg{width:26px;height:26px;opacity:.6;}
.shop-ph span{font-size:11px;font-weight:600;color:var(--warm-gray);line-height:1.3;}
.shop-fig.ph .shop-img{display:none;}
.shop-fig.ph .shop-ph{display:flex;}
.shop-fig.zoomable{cursor:zoom-in;}
.shop-fig.zoomable.ph{cursor:default;}   /* 佔位圖（尚無照片）不可放大 */
.shop-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.shop-name{font-size:calc(15px * var(--font-scale));font-weight:800;color:var(--graphite);line-height:1.35;}
.shop-prices{display:flex;flex-wrap:wrap;gap:6px;}
.shop-prices span{font-size:calc(12px * var(--font-scale));font-weight:800;border-radius:8px;padding:3px 9px;line-height:1.4;}
.shop-prices i{font-style:normal;font-weight:700;opacity:.75;margin-right:4px;}
.shop-prices .p-au{background:var(--teal-light);color:var(--teal-dark);}
.shop-prices .p-tw{background:var(--sand-bg);color:var(--warm-gray);border:1px solid var(--border);}
/* 便宜多少：醒目綠色標籤，一眼看出在澳洲買省多少 */
.shop-save{align-self:flex-start;font-size:calc(13px * var(--font-scale));font-weight:800;
  color:var(--sage);background:var(--sage-light);border:1px solid rgba(61,107,88,.3);
  border-radius:8px;padding:4px 10px;line-height:1.4;}
.shop-why{font-size:calc(13px * var(--font-scale));color:var(--warm-gray);line-height:1.6;}
.shop-where{font-size:calc(12px * var(--font-scale));font-weight:700;color:var(--gold-ink);}

/* 省錢・退稅撇步清單 */
.shop-tips{display:flex;flex-direction:column;gap:11px;margin:4px 0 6px;}
.shop-tip{border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:12px;
  background:var(--card);padding:12px 14px;box-shadow:var(--shadow-sm);}
.shop-tip-t{font-size:calc(15px * var(--font-scale));font-weight:800;color:var(--teal-dark);margin-bottom:4px;}
.shop-tip-d{font-size:calc(13px * var(--font-scale));color:var(--warm-gray);line-height:1.65;}

/* 估價提醒附註 */
.shop-note{font-size:calc(12px * var(--font-scale));color:var(--warm-gray);line-height:1.6;
  background:var(--gold-light);border-radius:11px;padding:11px 13px;margin:14px 0 4px;}


/* ============================================================================
 * 19. 圖片燈箱（點圖放大 + 縮放 + 平移）
 * 蓋滿畫面的黑底檢視器；右上角 ✕ 關閉、右下角縮放按鈕。
 * .open 由 app.js 切換顯隱；圖片以 transform 做縮放與平移。
 * ========================================================================== */
.md-fig-frame.zoomable{cursor:zoom-in;}
.md-fig-frame.zoomable.ph{cursor:default;}   /* 佔位圖（尚無照片）不可放大 */

#lightbox{position:fixed;inset:0;z-index:100;display:none;background:rgba(8,12,14,.94);
  flex-direction:column;overscroll-behavior:contain;}
#lightbox.open{display:flex;}
body.lightbox-open{overflow:hidden;}   /* 燈箱開啟時鎖住背景捲動 */

/* 19a. 舞台：置中顯示圖片、捕捉手勢 */
.lightbox-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;padding:16px;}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;
  transform-origin:center center;transition:transform .12s ease-out;will-change:transform;}
.lightbox-img.pannable{cursor:grab;}
.lightbox-img.pannable:active{cursor:grabbing;}

/* 19b. 右上角關閉鈕 */
.lightbox-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.lightbox-close:hover{background:rgba(255,255,255,.26);}
.lightbox-close:active{transform:scale(.9);}
.lightbox-close svg{width:24px;height:24px;}

/* 19c. 底部圖說 */
.lightbox-caption{color:#fff;text-align:center;font-size:14px;font-weight:600;line-height:1.6;
  padding:0 20px 8px;max-width:640px;margin:0 auto;opacity:.92;}

/* 19d. 右下角縮放按鈕組（−／1:1／＋），長輩易點 */
.lightbox-zoom{display:flex;gap:8px;justify-content:center;align-items:center;
  padding:10px 12px calc(16px + env(safe-area-inset-bottom));}
.lightbox-zoom button{min-width:52px;height:48px;padding:0 14px;border-radius:14px;
  background:rgba(255,255,255,.16);color:#fff;font-size:20px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.lightbox-zoom .lb-zoom-reset{font-size:15px;font-weight:700;}
.lightbox-zoom button:hover{background:rgba(255,255,255,.28);}
.lightbox-zoom button:active{transform:scale(.92);}


/* ============================================================================
 * 20. 其他
 * ========================================================================== */
audio{display:none;} /* 原生 <audio> 隱藏，改由自訂迷你播放器控制 */