/* ============================================================
   Notion 行程轉換器 — demo 樣式
   延續 aimi-shared-assets 共用 tokens（暖白底／近黑字／Zen Maru Gothic 展示字）
   本工具專屬強調色：土耳其熱氣球意象的暖赭紅（呼應衣櫃工具用亮橘的作法）

   2026-08-29：色票／字體／圓角／陰影這些通用 token 改成跟主站、衣櫃工具共用
   /tokens.css，這裡不再各自宣告。跟 tokens.css 同名但數值有落差的（--color-primary
   等）Aimi 確認可以直接吃 tokens.css 的值，接受這點微幅視覺差異，換取不用維護
   兩份幾乎一樣的色票。唯一例外是 --color-tool 系列：tokens.css 裡這個名字是主站
   固定的「工具類」品牌橘，跟這裡「這份行程的醒目色系（可切換）」是同名不同義，
   刻意不共用、繼續留在這裡覆寫，衣櫃工具（tool/wardrobe/style.css）也是同樣處理
   方式。深色模式全部維持在這裡，tokens.css 目前沒有深色版本 */
@import url('/tokens.css');

:root {
  /* 2026-08-10：tab 以下的主要內容區塊要比原本再更淺一點的淺灰，跟 nav／分頁籤列
     （繼續吃 --color-bg）分開，只有 body 底色（＝內容捲動區看到的底）用這個；
     tokens.css 沒有這個概念，roam 專屬 */
  --color-bg-content:     #F5F5F5;

  /* ── notion-trip 專屬強調色（2026-08-10：改成跟隨下方「醒目色系」四選一切換，
     這裡是沒指定 data-primary 時的預設值＝色系 1，數值見下方色系 1 區塊說明） ── */
  --color-tool:       #956BE8;
  --color-tool-light: #E4D8FC;
  --color-tool-dark:  #45118E;
  /* --color-tool-ink：鋪在 --color-tool 當底色時的「上面那層字」用色。淺色模式
     醒目色都夠深，白字沒問題；深色模式醒目色會被下面改亮（尤其色系 5 的黑會翻成
     接近白），白字就看不見，改用深色墨。 --map-accent：地圖上的路線／編號別針用色，
     OpenStreetMap 圖磚永遠是淺色的，不能跟著深色模式翻，這個變數固定用淺色模式那組
     醒目色，深色模式不覆寫它 */
  --color-tool-ink:   #fff;
  --map-accent:       #956BE8;
  /* 內部連結小標籤（.mention-tag）的底色。淺色模式用比 --color-border 更淺一點的灰
     （2026-09-11 Aimi 覺得 --color-border 當底色有點深），深色模式維持 --color-border
     的深灰不動（見下面深色區塊） */
  --mention-bg:       #EEECE6;

  /* ── 分類色系（7 類固定色，emoji 統一放文字後） ── */
  --cat-spot-bg:   #E6F0E4; --cat-spot-fg:   #4F7A52; /* 景點 綠 */
  --cat-food-bg:   #FBF0D6; --cat-food-fg:   #C9930A; /* 飲食 黃 */
  --cat-trans-bg:  #E6F1FB; --cat-trans-fg:  #185FA5; /* 交通 藍 */
  --cat-stay-bg:   #EDE9E8; --cat-stay-fg:   #615559; /* 住宿 灰褐 */
  --cat-chore-bg:  #E3E1DB; --cat-chore-fg:  #8a8580; /* 作業 灰（跟頁面底色太接近會糊掉，特意比其他分類的淺底再深一點，才看得出是個實心圓點） */
  --cat-shop-bg:   #FCEAEF; --cat-shop-fg:   #C24568; /* 逛街 粉 */
  --cat-expo-bg:   #F7EDFD; --cat-expo-fg:   #8B5CA8; /* 展覽 紫 */

  /* ── 醒目色系（2026-08-09 定案機制，2026-08-10 全部換成 Aimi 提供的正式色碼，不再是
     目測估的）：同一顆切換鈕會一次套用到按鈕漸層（--gradient-primary）、封面漸層
     （--gradient-hero）、左上角大標／tab active／D 數字醒目字／時間徽章／checkbox／
     行程清單選中狀態／顯示設定選取狀態（--color-tool 系列）、以及「導航」「看今天所有
     地點的路線」這類地圖動作按鈕（原本吃固定的 --color-accent 藍，2026-08-10 改成跟著
     --color-tool 系列走，讓同一份行程裡的地圖類按鈕跟其他醒目色統一）── */
  --gradient-primary: linear-gradient(135deg, #1940BF 0%, #774BC9 100%);
  --gradient-hero:     linear-gradient(155deg, #1940BF 0%, #774BC9 100%);
}
:root[data-primary="2"] {
  --gradient-primary: linear-gradient(135deg, #FF7126 0%, #FB3538 100%);
  --gradient-hero:     linear-gradient(155deg, #FF7126 0%, #FB3538 100%);
  --color-tool:       #FF7126;
  --color-tool-light: #FFDAC6;
  --color-tool-dark:  #853104;
  --map-accent:       #FF7126;
}
:root[data-primary="3"] {
  --gradient-primary: linear-gradient(135deg, #0785D2 0%, #26CFC1 100%);
  --gradient-hero:     linear-gradient(155deg, #0785D2 0%, #26CFC1 100%);
  --color-tool:       #0785D2;
  --color-tool-light: #C8E8FC;
  --color-tool-dark:  #0C344C;
  --map-accent:       #0785D2;
}
:root[data-primary="4"] {
  --gradient-primary: linear-gradient(135deg, #FF599B 0%, #F7484B 100%);
  --gradient-hero:     linear-gradient(155deg, #FF599B 0%, #F7484B 100%);
  --color-tool:       #FF599B;
  --color-tool-light: #FFDDEB;
  --color-tool-dark:  #BF2362;
  --map-accent:       #FF599B;
}
:root[data-primary="5"] {
  --gradient-primary: linear-gradient(135deg, #A0A0A0 0%, #6B6B6B 100%);
  --gradient-hero:     linear-gradient(155deg, #A0A0A0 0%, #6B6B6B 100%);
  --color-tool:       #353535;
  --color-tool-light: #D6D6D6;
  --color-tool-dark:  #484848;
  --map-accent:       #353535;
}

/* 深色模式：預設直接吃系統當下設定（白天亮／晚上暗，或使用者系統裡手動設過的），
   不用另外做判斷。2026-08-10：分類色系（cat-spot-bg 那組）淺底＋深字是為淺色頁面設計的，
   放到深色頁面上「淺底色塊」會整片發亮、對比度過高，改成深淺互換：原本的深字色當底色、
   原本的淺底色當文字色，同一組色相不用另外挑新顏色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:        #EDEBE7;
    --color-primary-hover:  #fff;
    --color-primary-light:  #2A2A29;
    --color-border:         #383836;
    --color-border-hover:   #504F4D;
    --color-text-primary:   #EDEBE7;
    --color-text-secondary: #A6A6A4;
    --color-text-muted:     #7A7A78;
    --color-bg:             #1B1B1A;
    --color-bg-content:     #1B1B1A;
    --color-surface:        #252523;
    --color-accent:         #5AA6E8;
    --color-accent-light:   #1B3A52;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.28);
    --shadow-md: 0 8px 28px rgba(0,0,0,0.38);
    --cat-spot-bg:   #4F7A52; --cat-spot-fg:   #E6F0E4;
    --cat-food-bg:   #C9930A; --cat-food-fg:   #FBF0D6;
    --cat-trans-bg:  #185FA5; --cat-trans-fg:  #E6F1FB;
    --cat-stay-bg:   #615559; --cat-stay-fg:   #EDE9E8;
    --cat-chore-bg:  #8a8580; --cat-chore-fg:  #E3E1DB;
    --cat-shop-bg:   #C24568; --cat-shop-fg:   #FCEAEF;
    --cat-expo-bg:   #8B5CA8; --cat-expo-fg:   #F7EDFD;
    /* 醒目色系（--color-tool 系列）2026-09-11：原本只定義了淺色模式的值，深色頁面
       直接沿用——色系 5（黑）的 #353535 在深色底上幾乎看不見，色系 3（藍）也偏暗，
       而 --color-tool-light 那些淺色當填色鋪在深色頁面會整片發亮。這裡按色系各給一組
       深色模式專用值：tool 提亮到深底上讀得清楚、tool-light 換成低調的深色填色、
       tool-dark（hover 強調字）換成更亮的淺色。下面 [data-primary] 各自覆寫，
       這裡是預設＝色系 1（紫） */
    --color-tool:       #B99CF2;
    --color-tool-light: #2C2740;
    --color-tool-dark:  #DACAFB;
    /* 深色模式的醒目色都被提亮了，鋪成底色時白字看不見，墨色改深 */
    --color-tool-ink:   #1c1c1b;
    /* 內部連結標籤底色深色模式維持原本的深灰（= --color-border），不跟著淺色模式改淺 */
    --mention-bg:       #383836;
  }
  :root:not([data-theme="light"])[data-primary="2"] { --color-tool: #FF8A4C; --color-tool-light: #39291D; --color-tool-dark: #FFCBAB; }
  :root:not([data-theme="light"])[data-primary="3"] { --color-tool: #42AAE8; --color-tool-light: #1D3446; --color-tool-dark: #ABDDF7; }
  :root:not([data-theme="light"])[data-primary="4"] { --color-tool: #FF7FB3; --color-tool-light: #3B2430; --color-tool-dark: #FFC4DB; }
  :root:not([data-theme="light"])[data-primary="5"] { --color-tool: #E8E6E1; --color-tool-light: #33322D; --color-tool-dark: #FFFFFF; }
}
/* 手動切換：使用者點過切換鈕之後，明確指定的 data-theme 優先於系統設定，
   不會因為系統之後自動日夜切換又被蓋回去，直到使用者自己再切一次 */
:root[data-theme="dark"] {
  --color-primary:        #EDEBE7;
  --color-primary-hover:  #fff;
  --color-primary-light:  #2A2A29;
  --color-border:         #383836;
  --color-border-hover:   #504F4D;
  --color-text-primary:   #EDEBE7;
  --color-text-secondary: #A6A6A4;
  --color-text-muted:     #7A7A78;
  --color-bg:             #1B1B1A;
  --color-bg-content:     #1B1B1A;
  --color-surface:        #252523;
  --color-accent:         #5AA6E8;
  --color-accent-light:   #1B3A52;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.38);
  --cat-spot-bg:   #4F7A52; --cat-spot-fg:   #E6F0E4;
  --cat-food-bg:   #C9930A; --cat-food-fg:   #FBF0D6;
  --cat-trans-bg:  #185FA5; --cat-trans-fg:  #E6F1FB;
  --cat-stay-bg:   #615559; --cat-stay-fg:   #EDE9E8;
  --cat-chore-bg:  #8a8580; --cat-chore-fg:  #E3E1DB;
  --cat-shop-bg:   #C24568; --cat-shop-fg:   #FCEAEF;
  --cat-expo-bg:   #8B5CA8; --cat-expo-fg:   #F7EDFD;
  /* 醒目色系深色模式值，跟上面 @media 那份一樣（見那裡的說明），這份是使用者
     手動切到深色時用的。預設＝色系 1（紫），下面 [data-primary] 各自覆寫 */
  --color-tool:       #B99CF2;
  --color-tool-light: #2C2740;
  --color-tool-dark:  #DACAFB;
  --color-tool-ink:   #1c1c1b;
  --mention-bg:       #383836;
}
:root[data-theme="dark"][data-primary="2"] { --color-tool: #FF8A4C; --color-tool-light: #39291D; --color-tool-dark: #FFCBAB; }
:root[data-theme="dark"][data-primary="3"] { --color-tool: #42AAE8; --color-tool-light: #1D3446; --color-tool-dark: #ABDDF7; }
:root[data-theme="dark"][data-primary="4"] { --color-tool: #FF7FB3; --color-tool-light: #3B2430; --color-tool-dark: #FFC4DB; }
:root[data-theme="dark"][data-primary="5"] { --color-tool: #E8E6E1; --color-tool-light: #33322D; --color-tool-dark: #FFFFFF; }

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 只關掉「快速點兩下觸發放大」這個手勢，不動 viewport 的 user-scalable——
   那個會連雙指縮放一起關掉，是使用者需要的無障礙功能，不能拿掉。
   manipulation 讓瀏覽器只保留「平移＋雙指連續縮放」，不做雙擊放大偵測，
   同時附帶好處：拿掉手機瀏覽器點擊前那 ~300ms 的延遲判斷 */
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; touch-action: manipulation; }
body {
  background: var(--color-bg-content);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 64px;
  transition: background-color .2s ease, color .2s ease;
  /* 安全下限：320px 是目前還買得到、還在用的手機裡最窄的（iPhone SE 這個尺寸級別），
     比這個窄基本上不是真實使用者會遇到的寬度，只有桌機瀏覽器手動拉超小才會碰到。
     窄於這個寬度改成整頁橫向捲動，比硬擠壓排版讓文字重疊/按鈕變形安全 */
  min-width: 320px;
}
a { color: inherit; }
button { font-family: inherit; }

/* ============================================================
   全站固定 Nav 列（跨所有行程）
   ============================================================ */
/* Logo 列 + 分頁籤列，外面共用一個 sticky-header 容器（見下方 .sticky-header）。
   這兩排本身不再各自 sticky，只有外層容器 sticky，避免 Safari 對「兩個各自
   sticky、疊在一起」的元件常見的局部渲染不完整問題。2026-08-09：封面一度試過搬到
   兩排中間、往下滑才吸頂的做法，Aimi 實際用起來覺得不好用，改回封面在分頁籤下面 */
.sticky-header { position: sticky; top: 0; z-index: 500; }
.topnav {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 8px 16px;
  /* 用不透明底色，不用 backdrop-filter：毛玻璃在 sticky 元素上捲動時，
     部分瀏覽器會把底下的內容拖出殘影 */
  background: var(--color-bg);
  /* 用 box-shadow 畫這條底線，不用 border-bottom：sticky 元素配 border 在部分
     瀏覽器捲動時會被裁到只剩局部寬度（線沒接到最右邊），box-shadow 不會 */
  box-shadow: 0 1px 0 0 var(--color-border);
}
/* 2026-08-07：這裡顯示的是行程名稱，來自使用者自己的 Notion，不是固定的介面文字。
   Zen Maru Gothic 字符集主要照顧日文/常用中文，遇到不常見的中文字或外文地名很容易缺字，
   缺字時瀏覽器會混用備援字體，同一行字體風格兜不起來，比整段用同一種字體還難看。
   凡是「會直接顯示使用者資料」的文字，一律改用涵蓋範圍完整很多的 --font-body，
   醒目字體只留給「介面本身固定不變」的文字（按鈕、分頁籤名稱、區塊標題這類） */
.topnav-logo {
  /* 2026-08-22：試過 float 讓標題文字繞著標籤流動，Aimi 看過實際效果後決定
     改回標籤獨立一排、標題另起一排的堆疊排版，改回 flex-wrap */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 7px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  color: var(--color-tool);
  /* 2026-08-15：這裡顯示的是使用者行程的完整標題，Aimi 明確要求「呈現真實大標不要自己
     刪減」，所以不裁字、不加省略號。原本 white-space:nowrap 會讓長標題把右邊按鈕擠扁
     （實測「2025 Aimi.go_ 瀨戶內國際藝術祭-秋 10 日」在手機寬度下把「我的行程」按鈕
     壓成 14px 還被切掉），改成允許換行＋min-width:0，標題長就多佔一行，按鈕不受影響 */
  min-width: 0; overflow-wrap: anywhere;
}
/* 官方標籤：放在 nav（不是封面卡片），跟標題同一個 flex 容器，各自獨立一排。
   flex-shrink:0 固定不被壓縮 */
.nav-badge {
  display: none; flex-shrink: 0; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-tool); color: var(--color-tool-ink);
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
/* 只有真的吻合白名單的行程才會顯示，見 renderTrip()／showLanding()／showError() */
.nav-badge.show { display: inline-flex; }
.topnav-spacer { flex: 1; }

/* ============================================================
   統一圖示系統（2026-08-12 定案）：原本 ↗／✕／＋／✓／←／↻／🔗 這些用純文字符號
   冒充圖示，不同平台字型顯示粗細/角度不一樣，風格不統一。統一改用 Lucide 圖示
   （MIT 授權、免費商用、開源，https://lucide.dev），用 currentColor 自動跟著
   所在文字/按鈕顏色走。跟原本「交通/作業收合箭頭」（.card-mini-caret，本來就是
   Lucide chevron-right）同一套線條風格，那顆維持原樣不用改，當作風格基準。
   .icon-svg 是共用底樣式，各圖示只需要帶 viewBox＋path/line/circle 進來 */
.icon-svg {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.icon-check { stroke: var(--color-tool-ink); stroke-width: 3.2; }
.topnav-btn {
  display: flex; align-items: center; gap: 5px;
  /* 標題再長也不能把按鈕壓扁（見上方 .topnav-logo 註解） */
  flex-shrink: 0;
  height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  border: none; background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: all .15s;
}
.topnav-btn:hover { color: var(--color-text-primary); box-shadow: var(--shadow-md); }
.topnav-btn.refresh:active .refresh-icon { transform: rotate(180deg); }
/* 更新中：一直轉到拿到結果為止。轉一圈就停的話，Notion 慢一點回來的時候按鈕看起來
   像是沒反應，使用者會一直重按 */
.refresh-icon { display: inline-flex; transition: transform .3s; }
.refresh-icon.spinning { animation: refresh-spin .8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.topnav-btn:disabled { opacity: .55; cursor: default; }
.refresh-icon { transition: transform .35s ease; font-size: 14px; }
.topnav-btn.profile, .topnav-btn.a2hs { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 15px; transition: background .15s, color .15s; }
/* 選單開著的時候給醒目色，不然使用者滑走視線再回來很難一眼確認選單是不是還開著
   （原本 emoji 圖示不管開關都長一樣，2026-08-17 換成向量圖示後順便補上這個狀態） */
.topnav-btn.profile.is-open, .topnav-btn.a2hs.is-open { background: color-mix(in srgb, var(--color-tool) 20%, var(--color-surface)); color: var(--color-tool); }
/* 2026-08-13：分享／更新固定只顯示 icon，不顯示中文字，不用等窄螢幕才收起來——
   行程名稱長度不受控（使用者自己在 Notion 打的標題），先固定只留 icon 比較保險，
   不會因為某個行程名稱特別長就把按鈕文字擠到換行 */
.topnav-btn .btn-label { display: none; }
/* 窄螢幕（見下方 body 的 min-width 說明）：logo 本身在極窄寬度下還是會偏擠，維持縮小處理 */
@media (max-width: 400px) {
  .topnav-btn { padding: 0 10px; }
  .topnav-logo { font-size: 14px; }
}

/* 我的行程／會員中心 下拉。2026-08-10：原本是固定 240px 寬、貼右邊的小下拉，行程名稱
   長一點就被截斷，按鈕也偏小不好點；改成貼著 nav 左右留白（跟 nav 本身的 16px 邊距對齊）
   撐滿寬度，同時放大按鈕尺寸／間距，手機上比較好點 */
.mytrips-pop {
  position: absolute; top: 46px; left: 16px; right: 16px;
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); border: 1px solid var(--color-border);
  padding: 12px; display: none; z-index: 600;
}
.mytrips-pop.open { display: block; }
/* 加到主畫面按鈕：display:flex 會蓋掉 hidden 屬性，要明講。說明卡沿用 .mytrips-pop 的外框 */
.topnav-btn.a2hs[hidden] { display: none; }
/* 灰色說明字跟標題同一排（跟待辦事項的 .section-hint 同一套），放不下才換行 */
.a2hs-pop-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.a2hs-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.9; color: var(--color-text-primary); }
.a2hs-steps .icon-svg { vertical-align: -0.2em; margin: 0 2px; }
.a2hs-note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); }

/* 2026-08-21 → 2026-08-22 改版：轉換警告原本做成 nav 一顆隱藏圖示＋點開才浮現的小面板，
   Aimi 點出問題：使用者要先發現那顆圖示、還要主動點開才看得到，發現門檻太高，很可能
   整段都沒人看過。改成固定貼在 sticky nav 跟內容之間的一整條提示帶，不用發現、不用點，
   打開頁面／切分頁就會先掃到一眼。
   **故意不用 sticky**：只讓它跟著內容一起捲動——開頁或切分頁時人一定會先看到它（覺得
   煩，這是故意的），開始往下滑閱讀之後就跟著捲走，不會像 nav 那樣長期佔用畫面、
   擋到下面的操作。切換分頁會重置捲動位置到頂端（見 switchPage），所以每次切分頁
   都會再看到一次，等於重複提醒，不需要另外寫邏輯 */
.warn-banner {
  display: none; align-items: center; gap: 10px; width: 100%;
  padding: 11px 16px; background: #B23A3A; color: #fff;
  font-size: 13px; line-height: 1.6; text-align: left;
  border: none; cursor: pointer; font-family: inherit;
}
.warn-banner.show { display: flex; }
.warn-banner .icon-svg { flex-shrink: 0; }
.warn-banner span.msg { flex: 1; }
/* 點下去直接開始貼新連結（見 goLanding()），提示本身就是解法入口，
   不用讓使用者自己意會到「我該去點右上角」 */
.warn-banner .arrow { flex-shrink: 0; opacity: .8; }
.mytrips-pop-label { font-size: 12px; color: var(--color-text-muted); padding: 4px 10px 8px; letter-spacing: .04em; }
.mytrips-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 16px; transition: background .15s;
}
.mytrips-item:hover { background: var(--color-primary-light); }
/* 2026-08-17：底色拿掉了——「貼上新的行程連結」用了同一條 color-mix 公式當底色，
   當前這份行程如果剛好也用這個底色，兩顆看起來像同一種元件，容易混淆「這是目前這份行程」
   跟「這是開始新流程的按鈕」。只留文字色跟字重，跟其他列的差異一樣讀得出來 */
.mytrips-item.active { color: var(--color-tool); font-weight: 500; }
.mytrips-flag { font-size: 19px; }
.mytrips-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 刪除鈕：原本平常隱藏、滑到那一列才浮現，但使用者主要用手機看，沒有 hover 這回事，
   等於功能永遠藏起來按不到。改成平常就用低透明度顯示，滑鼠移過去（或手機直接點）再變實色。
   2026-08-07：跟分享鈕距離太近容易手滑點錯，觸控區域放大＋margin-left 額外拉開間距。
   2026-08-10：彈窗改滿版後空間變多，觸控區域再放大一輪（28px→34px），間距也拉開 */
.mytrips-del {
  flex-shrink: 0; width: 34px; height: 34px; margin-left: 8px; border-radius: 50%; border: none;
  background: transparent; color: var(--color-text-muted); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .15s, background .15s, color .15s;
}
.mytrips-item:hover .mytrips-del { opacity: 1; }
.mytrips-del:hover { background: #FDECEC; color: #B23A3A; }
/* 分享鈕：跟刪除鈕同一套邏輯，平常就看得到、不用靠 hover 才浮現，放在刪除鈕左邊 */
.mytrips-share {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: transparent; color: var(--color-text-muted); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .15s, background .15s, color .15s;
}
.mytrips-item:hover .mytrips-share { opacity: 1; }
.mytrips-share:hover { background: var(--color-tool-light); color: var(--color-tool-dark); }
/* 2026-08-13：原本吃固定的 --color-accent 藍，跟其他連結文字（.fact-link／.brand-cta-esim
   這種「開啟連結」風格）不一樣調，改成跟主題醒目色走，跟全站連結文字風格統一。上方原本的
   虛線分隔線拿掉，改成跟 .mytrips-item 同樣的形狀／圓角，但用淺灰底色填滿，光靠底色就看得
   出跟一般行程列不一樣，畫面上不用再多一種分隔線樣式 */
/* 2026-08-17：跟清單裡一般的行程列（.mytrips-item）刻意做出明顯區隔，這顆是「開始一段
   新流程」的動作，不是瀏覽清單的一部分。底色用主色淺色調（深色模式下 --color-surface
   本身就偏暗，同一條 color-mix 公式自動跟著換成深色底，不用另外寫一份深色版規則）、
   圓角加大、外圍虛線用主色，字重維持一般粗細（跟清單其他列一致，不搶戲）。
   虛線刻意不用 border-style: dashed：瀏覽器內建虛線的粗細／間隔沒辦法精準控制，跟
   .cardflow::before（每日行程左邊那條動線）用的虛線對不起來，整頁會有兩種「虛線感」。
   改用行內 <svg><rect> 沿邊框畫一圈：rx／stroke-dasharray 都是真的向量描邊，圓角轉彎處
   虛線會自然跟著彎，不會像純 CSS 漸層背景那樣在角落斷掉。dash/gap 的像素數字
   （stroke-dasharray: 4 7）直接照抄 .cardflow::before 那條線的寫法，兩處虛線的粗細、
   間隔完全同一個值。rect 的 x/y/width/height/rx 用 CSS 幾何屬性（不是 XML 屬性）設定，
   才能吃 calc()／var()，不用另外寫 JS 量測按鈕實際尺寸——按鈕寬度會跟著視窗寬度變
   （.mytrips-pop 是 left/right: 16px 撐開的），SVG 沒有 viewBox 所以座標系統跟渲染出來的
   CSS 像素 1:1，不會有縮放跑掉的問題 */
.mytrips-add {
  position: relative;
  margin-bottom: 8px; display: flex; align-items: center; gap: 11px;
  padding: 11px 10px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 16px; color: var(--color-tool);
  background-color: color-mix(in srgb, var(--color-tool) 14%, var(--color-surface));
  transition: background-color .15s;
}
.mytrips-add:hover { background-color: color-mix(in srgb, var(--color-tool) 22%, var(--color-surface)); }
.mytrips-add-border { position: absolute; inset: 0; display: block; pointer-events: none; overflow: visible; }
.mytrips-add-border rect {
  x: 0.75px; y: 0.75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px);
  rx: calc(var(--radius-md) - 0.75px); ry: calc(var(--radius-md) - 0.75px);
  fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-dasharray: 4 7;
}
/* 2026-08-10：「顯示設定」併進「我的行程」下拉，深淺色切換、四色配色收在同一顆按鈕裡，
   減少 nav 列的按鈕數量。深淺色、配色都是「看的人」自己的顯示偏好，任何人隨時都能切換，
   兩者性質一樣（都存裝置本機，不寫回行程資料），放同一區管理。2026-08-10 再精簡成一行純
   icon（不放中文字說明），跟前面的行程清單項目比，這排是次要的顯示偏好，不需要佔那麼多視覺份量 */
.mytrips-divider { height: 1px; background: var(--color-border); margin: 8px 4px; }
/* 2026-08-13：新增第五組配色後，5 顆色票＋深淺色切換＋分隔線在 320px 最小寬度下會被
   flex 預設的收縮行為擠壓成橢圓（沒設 flex-shrink:0，色票元件被迫變形）。gap 從 10px
   收窄到 7px 讓整排在 320px 寬度下還有餘裕，色票／深淺色鈕另外鎖 flex-shrink:0，
   保證形狀是正圓形，不會因為新增第五色而變形 */
.display-settings-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px; }
.theme-opt {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border); background: none;
  font-size: 15px; cursor: pointer; transition: all .15s;
}
.theme-opt.active { background: var(--color-tool-light); border-color: var(--color-tool); }
.display-settings-divider { width: 1px; height: 22px; background: var(--color-border); margin: 0 2px; flex-shrink: 0; }

/* ============================================================
   行程專屬分頁籤列：[總覽][首頁] 凍結在最左邊 + [D1]...[Dn] 自己捲動
   天數一多，捲到後面幾天也隨時滑得回首頁/總覽，不用先滑回最左邊
   ============================================================ */
.daytabs-wrap {
  display: flex; background: var(--color-bg);
  /* 用 box-shadow 畫這條底線，不用 border-bottom：sticky 元素配 border 在部分
     瀏覽器捲動時會被裁到只剩局部寬度（線沒接到最右邊），box-shadow 不會 */
  box-shadow: 0 1px 0 0 var(--color-border);
}
.daytabs-frozen { display: flex; flex-shrink: 0; padding-left: 12px; position: relative; z-index: 2; }
/* 總覽／首頁沒有日期副標可以顯示，不像 D1~Dn 需要兩行版位，這裡只有一行文字，
   讓它們吃滿整顆按鈕的高度置中，不要比照 D1~Dn 硬留一行看不見的空位把文字往上推 */
.daytabs-frozen .daytab { justify-content: center; }
/* 淡淡的陰影提示右邊還可以滑，跟凍結區隔開。預設不顯示：天數夠少一次就排得完、
   或已經滑到最後一天時，右邊沒有東西被遮住，不該還亮著陰影暗示「可以滑」，
   有沒有溢出、滑到底了沒由 JS 的 updateDaytabsShadow() 判斷後加 .has-hidden-tabs */
.daytabs-frozen::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -10px; width: 10px;
  background: linear-gradient(to right, rgba(26,20,15,0.06), transparent);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.daytabs-frozen.has-hidden-tabs::after { opacity: 1; }
.daytabs-scroll {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 12px; flex: 1; min-width: 0;
}
.daytabs-scroll::-webkit-scrollbar { display: none; }
.daytab {
  position: relative;
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 9px 14px 8px; border: none; background: none;
  cursor: pointer; border-bottom: 2.5px solid transparent;
  color: var(--color-text-muted); transition: color .15s;
}
.daytab:hover { color: var(--color-text-secondary); }
.daytab.active { color: var(--color-tool); border-bottom-color: var(--color-tool); }
/* 今天：跟「目前正在看哪一天」（.active）是兩件獨立的事，可能同時成立也可能不是，
   所以不能共用同一套顏色/底線，改用一顆獨立的小圓點做提示，日期比對邏輯見下方 <script> markTodayTab() */
.daytab.is-today::before {
  content: ''; position: absolute; top: 5px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-tool);
}
.daytab-main { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1; }
.daytab-sub { font-size: 11px; letter-spacing: .02em; line-height: 1; }

/* ============================================================
   Layout
   ============================================================ */
.page { display: none; max-width: 620px; margin: 0 auto; padding: 22px 16px 40px; }
/* 只用 opacity 做淡入，不加 transform：transform 會讓整頁被提升成獨立合成層，
   在部分瀏覽器切換分頁時會留下沒重繪乾淨的殘影 */
.page.active { display: block; animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  margin: 26px 0 12px; display: flex; align-items: center; gap: 7px;
}
.section-title:first-child { margin-top: 0; }
/* 2026-09-21：標題後面的灰色小字說明（待辦事項、旅程地圖）跟標題放同一排，
   不再獨立一行佔高度。baseline 對齊讓大標題跟 12px 小字底線齊平；太窄放不下時
   flex-wrap 讓小字自己掉到下一行，不會把標題擠變形 */
.section-title.with-hint { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.section-hint { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }

/* ============================================================
   首頁 — Hero
   ============================================================ */
.hero {
  position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 22px;
  padding: 30px 22px 24px;
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,0.5), transparent 55%),
    var(--gradient-hero);
  color: #fff;
}
/* 這裡顯示行程名稱，同上面 .topnav-logo 的理由，改用涵蓋範圍完整的 --font-body */
.hero-title { font-family: var(--font-body); font-weight: 900; font-size: 24px; line-height: 1.35; margin-bottom: 10px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: 14px; opacity: .92; }
.hero-meta span { display: flex; align-items: center; gap: 5px; }
/* 查看原始 Notion 入口：行程層級（不是逐天卡片層級），跟封面資訊放一起，
   位置要明顯不能藏頁尾，但性質偏信任佐證、不是高頻操作，所以不跟 nav 列的分享／更新搶版面。
   2026-08-13：拿掉底色藥丸樣式改純文字，拿掉 emoji，顏色改用醒目色系的淺色，
   在封面漸層上當一顆低調但看得出可以點的連結，不用靠底色框出按鈕感 */
.hero-source {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;
  /* 直接用半透明白，不吃 --color-tool-light：這顆連結永遠疊在 --gradient-hero
     的深色漸層上（漸層本身不分深淺模式），半透明白在五組漸層上都讀得到；
     --color-tool-light 深色模式會被下面改成深色填色值，套在這裡會看不見 */
  color: rgba(255, 255, 255, 0.82); font-size: 12px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px; transition: opacity .15s;
}
.hero-source:hover { opacity: .8; }

/* 2026-08-31：轉換中等待畫面，取代原本封面卡的靜態「載入中⋯」文字＋另外浮一顆
   toast（兩個同時出現是同一件事講兩遍）。.loading 這個 class 掛在 .hero 本身，
   有這個 class 時顯示等待動畫、藏起真正的標題/資訊/連結，資料真的到了拿掉
   class 就自動切回來，不用另外寫顯示切換邏輯 */
.hero-loading { display: none; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 14px 0 18px; }
.hero.loading .hero-loading { display: flex; }
.hero.loading .hero-title,
.hero.loading .hero-meta,
.hero.loading .hero-source { display: none; }
.hero-loading-icon { width: 40px; height: 40px; display: inline-flex; animation: hero-loading-wobble 1.3s ease-in-out infinite; transform-origin: 50% 85%; }
.hero-loading-icon .icon-svg { width: 100%; height: 100%; }
@keyframes hero-loading-wobble {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(9deg) translateY(-4px); }
}
.hero-loading-text { font-family: var(--font-body); font-weight: 700; font-size: 15px; }

/* 2026-08-29：這個 class 是全站唯一一個「小灰字說明」用的 class，待辦事項提示、
   落地頁的免責聲明、沒地圖／地點格式不支援的提醒全部共用同一顆，不要為了各自的
   位置又另外長出一個差不多的 class。顏色原本吃 --color-text-muted，Aimi 反映
   落地頁那幾句太淺了，改用 --color-text-secondary——muted 其實是設計來配「本來
   就很邊緣的 UI 裝飾」（圖示、時間戳這類）用的極淺灰，不是給「還是要讓人看得清楚」
   的說明文字用，這裡選錯 token 不是共用出問題，是選錯 token */
.todo-hint { font-size: 12px; color: var(--color-text-secondary); margin: -6px 0 8px 4px; }
/* 2026-08-29：.todo-hint 借去當「這天沒有地圖」的說明文字（見 renderDay 的 mapHint），
   原本 -6px 的負 margin-top 是為了貼近待辦事項標題設計的，接在卡片流最後一張卡片
   後面反而貼太緊，這裡只針對這個位置蓋掉 margin-top，不動 .todo-hint 本身，
   待辦事項那邊的用法不受影響 */
.cardflow + .todo-hint { margin-top: 16px; }
/* 2026-08-29：首頁固定區塊（待辦事項／小知識／行前資料）裡的連結，原本是純文字加
   瀏覽器預設底線，Aimi 覺得太樸素改成小標籤，不用醒目色系的淺色，這裡只是行內連結不是
   主要內容，底色太搶眼反而分散閱讀；文字維持 --color-tool 保留「這是連結」的辨識度。
   底色原本用 --color-primary-light，今天遷移共用 tokens.css 才發現這個組合本來就有
   對比度問題：這個 token 的淺色跟 --color-bg-content 幾乎同色（設計上兩者本來就都是
   「接近背景的極淺色」，不是拿來當「看得出來的底色」用的），亮色模式底線幾乎隱形，
   改用專門就是要跟底色有落差的 --color-border，兩種模式下都看得清楚 */
.mention-tag {
  color: var(--color-tool); background: var(--mention-bg);
  padding: 1px 7px; border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 500;
}
.todo-list { list-style: none; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 15px; cursor: pointer; border-radius: var(--radius-sm); transition: background .15s; user-select: none; }
.todo-item:hover { background: var(--color-primary-light); }
.todo-check {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--color-border-hover);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--color-surface); transition: background .15s, border-color .15s;
}
.todo-check .icon-check { width: 12px; height: 12px; opacity: 0; transition: opacity .1s; }
/* 2026-08-29：文字＋提及標籤包成一個 flex item（見 renderHome 的說明），flex item
   預設 min-width 是 auto 不是 0，內容比容器寬時會撐開溢出而不是換行，
   flex:1 讓它吃掉 checkbox 之外的剩餘寬度，min-width:0 才會真的換行 */
.todo-text { flex: 1; min-width: 0; }
.todo-item.done { color: var(--color-text-muted); text-decoration: line-through; }
.todo-item.done .todo-check { background: var(--color-tool); border-color: var(--color-tool); }
.todo-item.done .todo-check .icon-check { opacity: 1; }
/* Notion「提及」加強版：待辦事項裡提到頁面上其他也有轉換的區塊時，做成頁內錨點，
   點了直接跳到「行前資料」對應清單，顏色沿用該清單在行前資料的配色，不是隨便挑色 */
.todo-mention {
  display: inline-flex; align-items: center; gap: 3px; margin: 0 1px;
  padding: 1px 9px 1px 6px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; text-decoration: none; vertical-align: -1px;
}
.todo-mention:hover { filter: brightness(0.94); }
.todo-mention.food { background: var(--cat-food-bg); color: var(--cat-food-fg); }
.todo-mention.shop { background: var(--cat-shop-bg); color: var(--cat-shop-fg); }

/* 小知識（2026-08-13 定案）：整區統一用小白卡 grid（.fact-grid／.fact-card），不分「平鋪
   事實」跟「toggle 分類」兩種樣式，樣式不會中斷。toggle 標題（如「關於詐騙」）直接當一張卡片
   的 .fact-label（跟「好用 APP」這種一般標題同一個位置／同一個灰字樣式），底下縮排的好幾條
   子項目綁在同一張卡片裡，用 .fact-sublist 條列呈現在 .fact-value 的位置——不管來源是平鋪的
   「標題：內容」還是 toggle＋縮排子項目，最後都收斂成「一張卡＝一個小知識項目」，卡片天生
   高度不固定，長的（toggle 那種）自然占滿寬（.fact-card.wide），短的兩張並排，版面不會因為
   內容多寡而破版 */
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact-card { background: var(--color-surface); border-radius: var(--radius-sm); padding: 11px 13px; box-shadow: var(--shadow-sm); }
/* 2026-08-14：緊急聯絡電話這種不在 .fact-grid 裡（沒有 grid gap 可用）、單欄直接疊放好幾張
   .fact-card 的情境，補一個自然間距，不然會整片黏在一起 */
.fact-stack .fact-card + .fact-card { margin-top: 8px; }
.fact-card.wide { grid-column: 1 / -1; }
.fact-label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 3px; }
.fact-value { font-size: 14px; font-weight: 500; }
.fact-link { color: var(--color-tool); text-decoration: none; font-weight: 500; }
.fact-link:hover { text-decoration: underline; }
/* toggle 底下的子項目清單：字重比一般 .fact-value 略輕（400 不是 500），好幾句連在一起讀
   起來才不會太重；每條前面一個小圓點，比照緊急聯絡電話縮排的邏輯，只是收在同一張卡片裡 */
.fact-sublist { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.fact-sublist li { padding-left: 13px; position: relative; }
.fact-sublist li::before { content: '·'; position: absolute; left: 0; color: var(--color-border-hover); font-weight: 700; }
.fact-sublist b { color: var(--color-text-primary); font-weight: 600; }

.linklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.linkrow {
  display: flex; align-items: center; gap: 10px; background: var(--color-surface);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 14px; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: box-shadow .15s; text-decoration: none;
}
.linkrow:hover { box-shadow: var(--shadow-md); }
.linkrow .em { font-size: 16px; }
.linkrow .arrow { margin-left: auto; color: var(--color-text-muted); font-size: 14px; }
/* 2026-08-29：「先看看轉出來的樣子」清單最前面固定的範本按鈕，換醒目色系，
   跟下面白底的真實行程做出區隔，一眼看出是特別的、永遠排第一個；不用跨欄，
   自然排進兩欄 grid 裡就好 */
.linkrow.featured {
  background: var(--color-tool-light); color: var(--color-tool); font-weight: 700;
}
.linkrow.featured .arrow { color: var(--color-tool); }

.sos-row { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 2px; border-bottom: 1px dashed var(--color-border); }
.sos-row:last-child { border-bottom: none; }
.sos-row b { font-weight: 500; }
/* 按下號碼直接撥打，貼一個小話筒圖示暗示可以點 */
.sos-tel { font-weight: 500; color: var(--color-accent); text-decoration: none; }
.sos-tel::after { content: ' 📞'; font-size: 11px; }
.sos-tel:hover { text-decoration: underline; }
/* 2026-08-10 新增：巢狀清單示範（見 README「縮排／巢狀清單怎麼判斷」）。沒有冒號＋電話格式的
   父層項目（如「外交部／台灣駐越南代表處」）只是分類標題，不做成電話連結，用 .sos-group-title
   顯示；底下真正的號碼項目縮排一階，用 .sos-row.indented，跟原本的 .sos-row 是同一套樣式只是
   多一點左邊距，視覺上看得出來是掛在上面那個標題底下 */
.sos-group-title { font-weight: 600; font-size: 14px; padding: 10px 2px 4px; color: var(--color-text-primary); }
.sos-group-title:first-child { padding-top: 2px; }
.sos-row.indented { padding-left: 16px; }

/* ============================================================
   總覽 tab — 行程總表
   ============================================================ */
.overview-hero {
  text-align: center; padding: 18px 0 22px;
}
.overview-hero .big { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.overview-hero .small { font-size: 14px; color: var(--color-text-secondary); margin-top: 4px; }

.overview-table { display: flex; flex-direction: column; gap: 8px; }
.ov-row {
  display: flex; align-items: center; gap: 12px; background: var(--color-surface);
  border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.ov-row:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }
.ov-d { width: 40px; flex-shrink: 0; text-align: center; }
.ov-d .d-num { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--color-tool); }
.ov-d .d-date { font-size: 11px; color: var(--color-text-muted); }
.ov-mid { flex: 1; min-width: 0; }
.ov-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.ov-count { font-size: 12px; color: var(--color-text-secondary); background: var(--color-primary-light); padding: 3px 9px; border-radius: var(--radius-pill); flex-shrink: 0; }

/* ============================================================
   單天：卡片系統
   ============================================================ */
.day-head { margin-bottom: 20px; }
/* 這裡的日期主標題後半段是使用者自己寫的當日主題文字（🔘 每日主題卡標題），
   同上面 .topnav-logo 的理由，改用涵蓋範圍完整的 --font-body */
.day-head .d-heading {
  font-family: var(--font-body); font-weight: 900; font-size: 22px;
  line-height: 1.35; display: flex; align-items: flex-start; gap: 9px;
}
.day-head .d-heading .d-num { color: var(--color-tool); flex-shrink: 0; }
.day-head .d-title { flex: 1; }
/* 顏色/字級跟 .card-mini-detail 對齊（同一套「次要說明文字」規格，不另外開一條新的） */
.day-head .d-note { font-size: 14px; color: var(--color-text-secondary); margin-top: 7px; white-space: pre-line; }
/* 每日預算加總：跟卡片的「每人預計」同一套純文字風格，不用色塊／tag，
   靠右對齊在當天標題同一列（住宿類別排除，見 README「每日預算加總」）。
   用選填欄位湊出來的數字，不是保證精確總額，措辭固定用「已知」二字提醒這件事。
   2026-08-13 修正：有金額（兩行：金額＋小字備註）跟沒金額兩種內容高度天生不一樣，
   .d-heading 是 align-items:flex-start，整列高度會被比較高的那個撐開，導致底下 .d-note
   說明小標跟大標之間的視覺行距，有金額那天會比沒金額那天多出一截。改成固定 min-height
   （抓兩行版本的高度）＋垂直置中，不管哪種內容整列高度都固定一樣。
   2026-08-15 定案（Aimi）：加總是 0（不管真的沒填金額還是唯一填的是免費景點）都當「不
   重要」，不顯示任何文字，但容器（.d-budget 空 span）還是要留著撐住 min-height，不然
   沒金額的天數列會變矮，跟上面 2026-08-13 修過的問題一樣，.empty 這個文字樣式已經沒有
   地方在用，一併刪除 */
.d-budget {
  flex-shrink: 0; text-align: right; white-space: nowrap; min-height: 38px;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.d-budget small { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); letter-spacing: .02em; }

/* 一天的所有卡片共用一條虛線動線串起來，交通／作業直接掛在線上，
   不用白底卡片；景點/住宿/飲食用小圓點標記在線上，顏色代表分類。
   預設維持原本的窄版位，只有這一天真的有卡片標了「精確時間點」（見下方 .card-time-badge），
   才由 JS 加上 .has-time-badge 這個 modifier 把左邊留寬，沒有的天數維持全寬，不留白浪費空間 */
.cardflow { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 36px; }
.cardflow.has-time-badge { padding-left: 70px; }
/* 動線改用 repeating-linear-gradient 畫虛線（不用 border-left），
   線的中心點固定在 x=15px（有時間徽章的天數是 57px，多留 42px），下面所有圓點
   也都以同一個中心點來算 left，確保線跟點永遠正中對齊，不會因為 border 的算法飄移。
   線的長度不再用固定 bottom 值猜，改用 JS 量出最後一個圓點的位置寫進
   --cardflow-line-h（見 <script> 內 sizeCardflowLine），線就會精準停在最後一顆圓點上，
   不會多拖一截出去（沒跑 JS 前用 calc(100% - 20px) 當備援值，不會整條消失） */
.cardflow::before {
  content: ''; position: absolute; left: 14.5px; top: var(--cardflow-line-top, 10px); width: 1px;
  height: var(--cardflow-line-h, calc(100% - 20px));
  background-image: repeating-linear-gradient(to bottom, #cfcbc3 0, #cfcbc3 4px, transparent 4px, transparent 11px);
}
.cardflow.has-time-badge::before { left: 49px; }
/* 精確時間點徽章：只有時間欄位開頭是乾淨單一 HH:MM（不是區間）才會出現，
   跟 .card-cat-pill 用同一個垂直中心對齊（標題那一行），右對齊文字讓它自然貼齊藥丸。
   left 值對應 .cardflow.has-time-badge 加寬後的版位，平常（沒加寬）不會有這個元素存在。
   2026-08-09：欄位寬度（40px）跟藥丸間距（6px）縮窄，讓時間文字不要離畫面最左邊太遠，
   浪費掉的橫向空間變少；跟藥丸之間的間距、藥丸到白卡的間距都沒有動，維持既有對齊 */
/* 2026-08-14：跟 .card-cat-pill 一起往左移 8px（見下方 .card-cat-pill 註解），
   維持原本跟藥丸之間 4px 的間距不變，兩者是固定一起移動的一組 */
.card-time-badge {
  position: absolute; left: -78px; top: 15px; width: 34px; height: 22px;
  text-align: right; line-height: 22px;
  font-size: 12px; font-weight: 700; color: var(--color-tool);
  font-variant-numeric: tabular-nums;
}
/* 2026-08-14：時間徽章原本只用在白卡（.card 15px 內距，top:15px 是照那個內距量出來的），
   這輪交通／作業／無分類統一之後也會出現在 mini 卡（.card-mini-wrap/.card-mini-plain，
   內距只有 6px），直接沿用白卡的 top:15px 量出來會偏低（跟標題差了快 9px），量測後另外
   訂一個 mini 卡專用的 top 值，兩種卡片各自對齊自己的標題列 */
.card-mini-wrap .card-time-badge, .card-mini-plain .card-time-badge { top: 6px; }
.card, .card-mini-wrap, .card-mini-plain { position: relative; }
/* 2026-08-09：白卡（景點/住宿/飲食/逛街/展覽）不再用「動線圓點＋卡片內文字標籤」兩件式，
   改成 .card-cat-pill 一顆藥丸型標籤，跨在動線圓點原本的位置跟白卡左上角之間，emoji＋
   分類字合併成同一個元素，不會再有「外面圓點、裡面標籤，中間隔著卡片邊界」的破碎感。
   交通／作業／無分類沒有這個破碎感的問題（本來就沒有白卡邊界），維持原本圓點＋
   行內文字標籤的舊做法不變。
   2026-08-14 定案：交通／作業／無分類原本是三套各自維護的樣板（見 generate.js CAT_MAP
   上方註解），現在統一成同一套 .card-mini-wrap/.card-mini-plain 結構，圓點也統一成同一種
   尺寸／位置，只靠 .cat-trans/.cat-chore/.cat-none 這三個 modifier 決定 emoji 跟配色，
   不再有三種不同大小/位置的圓點（舊版作業圓點 top:2px 跟交通的 top:9px 不一樣、
   無分類舊版是完全不同尺寸的 6px 無 emoji 小點，這些不一致這輪一併清掉） */
.card-mini-wrap::before, .card-mini-plain::before {
  content: ''; position: absolute; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-bg);
  left: -32px; top: 9px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  /* 2026-08-22：15px 在 22px 圓點裡塞得太滿，emoji 本身的字框比字面尺寸大，
     實際觀感比 15px 這個數字看起來更擁擠，縮到 12px 才有留白 */
  font-size: 12px;
}
.card-mini-wrap.cat-trans::before, .card-mini-plain.cat-trans::before {
  content: var(--card-icon, '🚗'); background: var(--cat-trans-bg);
}
.card-mini-wrap.cat-chore::before, .card-mini-plain.cat-chore::before {
  content: var(--card-icon, '📋'); background: var(--cat-chore-bg);
}
/* 無分類（Aimi 2026-08-14 定案）：不給預設 emoji，純色圓點——跟交通／作業的 emoji 圓點
   做出區隔。配色不是固定色相（沒有「分類」可以對應固定色彩），直接吃 --color-tool，
   跟著醒目色系走，深淺色模式都不用另外處理（跟「今天」小圓點指示器同一個做法） */
.card-mini-wrap.cat-none::before, .card-mini-plain.cat-none::before {
  content: var(--card-icon, ''); background: var(--color-tool);
}

/* 白卡專用的跨界藥丸標籤，取代原本「動線圓點＋卡片內文字標籤」兩件式。
   2026-08-09：top 改成對齊標題文字那一行的垂直中心（量出來是卡片頂端往下 26px），
   不是對齊卡片自己的外框頂邊——Aimi 希望藥丸、時間徽章、標題三個東西看起來像同一排。
   2026-08-14：left 原本沿用舊圓點的 -32px，Aimi 反應藥丸跟白卡標題靠太近、色塊視覺上
   太擠（相對之下左邊動線那側顯得太空），改成 -40px 往左移 8px，跟標題多留一點呼吸空間。
   只調白卡的藥丸，交通／作業／無分類那幾種用小圓點（不是文字藥丸）的標記維持原本 -32px
   不用跟著動——Aimi 確認過那幾種沒有一樣的擁擠問題，故意不改，兩者現在會有小小的水平落差
   是預期內的（藥丸本來就比小圓點寬，位置不用跟圓點強求對齊）。
   2026-08-22：top 從 12px 調成 14px——下面 line-height:1 那條修正讓藥丸整體變矮
   （原本文字繼承 body 的 line-height:1.6，比 emoji 的 line-height:1 撐得高，藥丸高度
   從 29.2px 降到 24px），top 不跟著補回來，藥丸的視覺中心會往上偏移約 2.6px，
   跟標題那排「26px 垂直中心」的對齊基準就不準了。14px + 24px/2 = 26px，剛好補回來 */
.card-cat-pill {
  position: absolute; left: -40px; top: 14px; z-index: 1;
  /* 2026-08-22：emoji（::before）跟藥丸文字（住/買/景/展/食）原本各自繼承不同的
     line-height——emoji 是 ::before 自己設的 1，文字節點沒設，繼承 body 的 1.6，
     兩個 flex 子項目即使 align-items:center，文字的行框比 emoji 高一大截，
     兩者的「字框中心」對不齊，看起來 emoji 偏高、文字偏低。統一設成 1，
     兩邊行框高度一致，align-items:center 才會真的對齊 */
  line-height: 1;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  padding: 5px 8px 5px 7px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  box-shadow: 0 1px 4px rgba(26,20,15,0.12);
}
/* emoji 用 ::before 承載，維持跟「每日主題卡」同一套自訂 icon 機制：
   --card-icon 有設定就蓋過分類預設值，沒設定就用各分類自己固定的那顆。
   2026-08-10：交通／作業也補上同一套 var(--card-icon, 預設值) 機制（2026-08-14 大重構後
   統一成 .card-mini-wrap/.card-mini-plain::before，跟白卡 5 類共用同一套），
   現在都支援自訂 emoji 覆蓋圓點，不再只有白卡 5 類有效 */
.card-cat-pill::before { line-height: 1; font-size: 14px; }
.card-cat-pill.cat-spot::before { content: var(--card-icon, '🏖️'); }
.card-cat-pill.cat-food::before { content: var(--card-icon, '🍽️'); }
.card-cat-pill.cat-stay::before { content: var(--card-icon, '🏠'); }
.card-cat-pill.cat-shop::before { content: var(--card-icon, '🛍️'); }
.card-cat-pill.cat-expo::before { content: var(--card-icon, '🎭'); }
.card-cat-pill.cat-spot { background: var(--cat-spot-bg); color: var(--cat-spot-fg); }
.card-cat-pill.cat-food { background: var(--cat-food-bg); color: var(--cat-food-fg); }
.card-cat-pill.cat-stay { background: var(--cat-stay-bg); color: var(--cat-stay-fg); }
.card-cat-pill.cat-shop { background: var(--cat-shop-bg); color: var(--cat-shop-fg); }
.card-cat-pill.cat-expo { background: var(--cat-expo-bg); color: var(--cat-expo-fg); }

/* 完整卡片：景點／住宿／飲食／逛街／展覽 */
.card {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 15px 16px; box-shadow: var(--shadow-sm);
}
/* 2026-08-27：每日地圖搬到當天最上方（原本接在卡片流最下面），先看地圖再逐一看卡片。
   滿版不用圓角，蓋掉 .page 左右 16px 的內距讓地圖真的貼齊版面邊緣，跟下面有邊界的卡片
   做出區隔；上面也用負 margin-top 蓋掉 .page 的 padding-top（22px，桌機版是 30px，
   見下面 900px 媒體查詢），讓地圖直接貼緊上面的日期分頁籤，不留空隙——只有「有地圖」
   的天數才會受影響，沒地圖的天數 .day-head 還是吃原本的 .page 內距，位置不變。
   高度固定給一個矮一點的值，不管哪一天都佔一樣的版面，不會忽高忽低。
   Leaflet 需要容器有明確尺寸才畫得出來（見 initDayMap 裡 invalidateSize 那段註解）。
   z-index 蓋掉 Leaflet 預設的 attribution 之類 UI 元素，不要蓋到頁面本身的 nav／彈窗 */
.day-map {
  height: 180px; overflow: hidden;
  margin: -22px -16px 16px; box-shadow: var(--shadow-sm); z-index: 1;
}
/* 2026-08-29：展開地圖按鈕，位置不變（還是在當天最上方），純粹長高，
   下面的卡片被自然推下去，不是彈出浮層蓋住其他內容。這個元素本身就是
   Leaflet 的 .leaflet-container（L.map() 直接把傳進去的容器變成它自己用，
   不是外面再包一層），Leaflet 自己會在縮放/平移時對這個容器動態操作
   transition/transform，實測幫 height 加 CSS transition 會被 Leaflet
   蓋掉或衝突（transitionend 完全不會觸發，圖磚鋪不滿新高度、卡住一半灰底），
   改成直接切換不做動畫，才能穩定在切換後正確呼叫 invalidateSize() */
.day-map.expanded { height: 420px; }
/* 跟左上角縮放鍵同一個 leaflet-bar 樣式，外觀自動一致。leaflet-bar 預設用
   line-height 把文字撐置中，圖示是 SVG 不是文字，line-height 對它沒作用，
   實測會偏上或偏下，改用 flex 置中，圖示才會真的在按鈕正中間。這裡要靠
   !important：leaflet.css 的 <link> 排在這份檔案之後（見 index.html 的
   <head>），.leaflet-bar a 的 display:block 選擇器特異度又跟這條一樣，
   照載入順序它會贏，不加 !important 蓋不掉。
   2026-08-29：icon 改用 Lucide 的 maximize-2／minimize-2（四角箭頭指外／指內），
   收合展開是換一張完全不同的圖，不是同一張轉方向，原本轉 180 度那條規則拿掉了
   （見 index.html 的 DAY_MAP_MAXIMIZE_ICON 那段） */
.day-map-expand-ctrl a { display: flex !important; align-items: center; justify-content: center; }
.day-map-expand-icon { width: 16px; height: 16px; }
/* 地圖上的編號別針：跟卡片本身的醒目色系走，跟站內其他「這是重點」的視覺語言一致。
   font-family 特別點名 --font-body：Leaflet 自己的 CSS 會在 .leaflet-container 裡蓋掉
   字體繼承（預設吃它自己的 Helvetica Neue／Arial），不寫死這行的話，別針數字的字體
   會跟站內其他文字對不起來——這行同時也是「導航」按鈕數字徽章（.card-nav-badge）
   要對齊的字體基準，兩邊數字才會長得一樣 */
.day-map-pin {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--map-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
  border: 2px solid var(--color-surface); cursor: pointer;
}
/* 2026-09-18：首頁旅程地圖（每天最後一張住宿卡片連成的路線，見 index.html 的
   tripStops()）。借用每日地圖的 .day-map 樣式（class="day-map trip-map"），
   2026-09-21 定案跟封面合併成同一張圓角卡片（下面 .hero.with-map）：預設收合的小尺寸，
   按展開鈕才變大（.expanded，420px）。這裡只剩別針：要放「D2-4」這種天數範圍文字，
   圓形裝不下，改用 .trip-map-pin 這個寬度會撐開的膠囊形狀 */
/* 2026-09-21 修 bug：打開右上角書本選單，首頁旅程地圖的 +/- 鈕跟版權條會蓋在選單上面。
   Leaflet 自己的 UI 層 z-index 很高（控制項 1000、圖層 400），如果地圖容器本身沒有
   建立獨立的堆疊環境，這些數字會直接跟整頁比大小，贏過 .sticky-header（500）。
   每日地圖剛好有 z-index:1 所以沒事，首頁旅程地圖沒有。isolation:isolate 讓每張
   地圖自成一個堆疊環境，裡面再高的 z-index 都被關在容器裡，不會跟頁面其他東西比 */
.leaflet-container { isolation: isolate; }
/* 封面 + 旅程地圖合併成同一張卡片（2026-09-21 Aimi 選的 C 版）：封面在上、地圖在下，
   共用同一個外框跟 20px 圓角，中間沒有縫。renderTrip() 依有沒有旅程地圖幫 .hero 加
   .with-map：封面只留上半圓角、拿掉下緣間距；沒有地圖的行程封面照舊是完整圓角卡片。
   地圖跟封面同寬（拿掉 .day-map 預設的左右滿版負 margin 跟上緣 -22px），只留下半圓角，
   不加陰影，跟沒有陰影的封面維持同一種平面感；下緣留很小的間距讓說明小字貼近卡片 */
.hero.with-map { border-radius: 20px 20px 0 0; margin-bottom: 0; }
#page-home .day-map { margin: 0 0 6px; border-radius: 0 0 20px 20px; box-shadow: none; }
/* 卡片下面的說明小字：置中、貼近卡片，下緣補一般區塊間距（後面接的區塊標題
   :first-child 上緣是 0） */
.trip-map-caption { margin: 0 0 24px; text-align: center; font-size: 12px; color: var(--color-text-secondary); }
.trip-map-pin {
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--map-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; box-shadow: var(--shadow-sm);
  border: 2px solid var(--color-surface); cursor: pointer;
}
/* 2026-08-21：跨卡片提及點過去之後，用一圈短暫的外框提示「就是這個」，
   四種卡片外觀（完整卡／展開版小卡／純文字小卡／每日主題卡的 day-head）共用同一顆效果 */
.mention-highlight { animation: mention-flash 1.6s ease; }
@keyframes mention-flash {
  0%, 100% { box-shadow: none; }
  12% { box-shadow: 0 0 0 3px var(--color-tool); }
}
.card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
/* 卡片標題直接來自使用者的 Notion（景點名稱、餐廳名稱這類），最容易出現外文地名／
   少見中文字，風險最高，同上面 .topnav-logo 的理由，改用涵蓋範圍完整的 --font-body */
.card-title { font-family: var(--font-body); font-weight: 700; font-size: 16px; flex: 1; line-height: 1.4; }
/* 兩欄格式：徽章自己一欄（固定寬），右邊是一欄「上下兩列」——
   上面標題＋金額、下面時間＋每人預計，兩列共用同一個容器所以左邊界自然對齊，
   不用像之前那樣手動量測、猜測徽章寬度去對位置 */
.card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-headrow { display: flex; align-items: flex-start; gap: 10px; }

/* 2026-08-14：作業／無分類原本各自有一套獨立樣式（.card-note 系列），統一成跟交通同一套
   .card-mini-wrap/.card-mini-plain 之後，這些 class 全部沒有地方在用了，整組刪除
   （原本裝說明文字、原卡片保底連結的位置，現在統一交給 .card-mini-detail/.card-actions） */
/* 每人預計花費：2026-08-14 改版，不再放標題那一排（原本用 align-self/line-height 硬湊對齊，
   但標題長度不一時，數字位置看起來仍然亂，換不換行還會互相影響）。改成「每人預計」文字＋
   數字合併成一顆小字 chip，搬到跟時間資訊同一排（.card-time/.card-subrow），標題那一排
   從此只放標題本身，可以吃滿全寬，兩者徹底不互相影響。詳見 generate.js 的 priceChip() */
.card-price-chip {
  font-size: 11px; color: var(--color-text-muted); letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto;
}
/* 數字本身稍微加深加粗，維持一眼掃得到金額，但整排份量還是跟純時間資訊的卡片差不多輕 */
.card-price-chip .num { color: var(--color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 金額欄位填 0 → 標成免費，不顯示「0 每人預計」那種怪數字。
   2026-08-14 改：原本是填色膠囊（pill），Aimi 反應這顆在白卡／交通卡、深淺色模式下
   看起來都有點像又不太像，統一改成純文字，跟 .num 用同一種「加深加粗」處理，
   不特別做成一顆獨立的視覺元素，跟旁邊的時間/金額文字份量一致 */
.card-price-chip.free { color: var(--color-text-secondary); font-weight: 600; }
/* 2026-08-07 定案：Notion 的 select／multi-select 這種「標籤型」屬性，不管欄位叫什麼名字、
   使用者填了什麼值，都原封不動個別顯示成一顆一顆小標籤，不嘗試把好幾個標籤兜成一句話
   （兜句子需要理解語意，不是單純解析，容易兜出怪句子）。判斷依據是 Notion 屬性「型別」是
   select/multi-select，這是結構化、可靠的訊號，不是用猜的——跟「類別」欄位變成彩色徽章
   是同一套機制，只是這裡用中性灰、不套分類色，因為這些標籤不是類別 */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.card-tag {
  font-size: 12px; color: var(--color-text-secondary); background: var(--color-primary-light);
  padding: 3px 10px; border-radius: var(--radius-pill);
}

/* 時間文字（營業時間／入住／退房）跟「每人預計」小字共用同一行、同一種字體，
   兩者中間視覺上本來就是空的，沒必要各自佔一整行；只有真的長到會撞在一起才換行。
   沒有價格的卡片，時間就自己靠左；沒有時間的卡片，「每人預計」用 margin-left:auto 自己貼右邊。
   白卡現在用 .card-main/.card-headrow 兩欄格式（見上面 .card-main），時間／每人預計
   跟標題天生同一欄、自動對齊，不用再手動量測 padding-left 去湊位置 */
.card-subrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 1px; }
.card-time { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1px; }
/* 2026-08-14：白卡（.card-top 標題）緊接時間欄位時，蓋掉 .card-top 自己的 margin-bottom（6px），
   讓標題到時間的距離跟交通卡片（.card-headrow 到 .card-subrow 只隔 1px）看齊，不要明顯比較遠。
   只鎖定「標題後面直接接時間」這個組合，不影響 .card-top 接說明／其他內容時原本的間距 */
.card-top + .card-time { margin-top: -5px; }
/* 2026-08-09：2026-08-07 曾經因為擔心年紀大的人看不清楚，從 11px 最淺灰改大改深過一次，
   Aimi 拿實機（手機）測試後覺得原本的尺寸其實看得清楚，改回 11px＋最淺灰，
   縮小這排的視覺份量，讓有時間／金額的卡片跟只有純說明文字的卡片，高度不要差太多 */
.time-chip { font-size: 11px; color: var(--color-text-muted); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; }

.card-desc { font-size: 14px; color: var(--color-text-secondary); white-space: pre-line; }
.card-desc b { color: var(--color-text-primary); font-weight: 500; }

/* 原卡片固定卡在最左邊、導航固定卡在最右邊，中間有其他按鈕的話，
   從導航開始往左長（是 .card-actions-right 這個小群組自己在長，不是整排平均分散） */
/* 2026-08-14：margin-top 從 11px 改 12px，跟 Aimi 訂的「間距/尺寸一律用 4 的倍數或偶數」原則對齊 */
.card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.card-actions-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* 只有導航一顆、沒有原卡片可以配對的卡片，導航自己也要貼右邊，不能孤零零留在左邊 */
.card-actions > .card-action.map { margin-left: auto; }
.card-action {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  padding: 6px 11px; border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); cursor: pointer; text-decoration: none; transition: all .15s;
  background: var(--color-surface);
}
.card-action:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); }

/* 2026-08-10：原本吃固定的 --color-accent 藍，改跟「看今天所有地點的路線」同一套
   --color-tool 系列，同一份行程裡的地圖類按鈕統一跟著醒目色系切換 */
.card-action.map { color: var(--color-tool); border-color: var(--color-tool-light); }
.card-action.map:hover { background: var(--color-tool-light); }
/* 2026-08-27：切到當天、地圖成功建立之後，initDayMap 會把這張卡片對應的「導航」按鈕
   圖示換成跟地圖別針一樣的編號圓底徽章，兩邊對照時知道是同一個點。字體同樣吃
   --font-body，跟 .day-map-pin 那邊寫的理由一樣（見該處註解）。沒上地圖的卡片
   （該天不到 2 個點、或這個連結解析失敗）維持原本的定位圖示，不會出現數字對不上的情況 */
.card-nav-icon.card-nav-badge {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-tool); color: var(--color-tool-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
}
/* 導航／相關貼文文字改粗體，跟原卡片這種最低調的按鈕做出區隔 */
.card-action.map, .card-action.post { font-weight: 700; }
/* 2026-08-15 定案：aimigio.com 連結（「專屬介紹」）改成醒目的粉紅漸層，跟主站「IG 粉絲
   專屬」同一套視覺（--gradient-ig，aimigo/public/tokens.css：83deg #471E57→#DB497B→
   #FFAFBF），跟其他相關貼文連結（灰框深灰字）做出區隔，比較顯眼；其餘網域的相關貼文
   連結維持中性樣式，不用各自的 class 再寫一次（見上面 .card-action 基礎樣式） */
.card-action.hub {
  background: linear-gradient(83deg, #471E57 -21.85%, #DB497B 32.15%, #FFAFBF 97.63%);
  color: #fff; border: none; font-weight: 700;
}
.card-action.hub:hover { opacity: .9; color: #fff; }
/* 回原始 Notion 卡片：改成無框線純文字按鈕（2026-08-12），拿掉 pill 的框線／底色／
   左右 padding，左邊直接跟上方 .card-desc 說明文字切齊，垂直方向靠 .card-actions 的
   align-items:center 自動跟右邊「導航」按鈕對齊中線，不用手動喬 */
.card-action.notion { padding: 4px 0; border: none; background: transparent; border-radius: 0; color: var(--color-text-muted); }
.card-action.notion:hover { color: var(--color-text-secondary); background: transparent; border: none; }
/* 2026-08-29：首頁最下面那顆「原版 Notion」借用同一顆按鈕樣式，但它是單獨站在
   一長串首頁區塊最下面（不是卡片裡跟其他按鈕並排），跟上面的內容需要一點間距，
   不然會貼著緊急聯絡電話那組資訊卡，看起來像沒排版完 */
.home-footer-source-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.home-footer-source-row .home-footer-source { margin-top: 0; }
/* 2026-09-06：按鈕右邊的「最後更新」小字，只有 Aimi 官方行程才有值（見
   renderTrip 裡 homeFooterUpdated 那段），沒有值時 JS 會把它藏起來 */
.home-footer-updated { font-size: 12px; color: var(--color-text-muted); }

/* 分類配色（動線上的圓點，卡片本身不再用左邊條） */
/* 白卡的圓點 emoji／顏色已經改用 .card-cat-pill 這顆跨界藥丸（見上方定義）。
   交通收合卡原本在動線圓點（🚗）之外，卡片內還會多一顆文字徽章「行」，
   2026-08-10 拿掉這顆文字徽章，跟「作業」附註卡一樣只靠動線圓點的 emoji 辨識分類，
   卡片內文字不重複標分類，.cat-badge 這個 class 已經沒有任何地方在用，一併刪掉 */

/* 收合卡片：交通／作業，直接掛在虛線動線上，不用白底卡片 */
/* 收合卡：.card-main（標題＋金額／時間＋每人預計 兩列疊在一起）｜展開箭頭 兩欄格式。
   箭頭是固定寬度那端，.card-main 是 flex:1 的內容欄，時間會自動跟標題對齊，
   不用手動量測 padding-left 去湊位置。2026-08-10 拿掉最左邊原本的文字徽章欄位後，
   從三欄變兩欄，標題直接從按鈕最左邊開始，靠動線上的圓點 emoji 辨識分類 */
.card-mini {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 4px;
  width: 100%; border: none; text-align: left;
  background: transparent; border-radius: var(--radius-sm);
  cursor: pointer;
}
/* 2026-08-13：原本 hover 用淺灰底色，跟卡片本身「沒有白底、直接掛在動線上」的
   極簡設計不搭，那塊灰色看起來像個沒對齊的色塊。改成只變文字顏色，不加底色 */
.card-mini:hover .card-mini-title { color: var(--color-tool); }
/* 2026-08-14 改：交通卡片的「原卡片」「導航」原本各自用 .card-mini-original／.card-mini-route
   這兩顆看起來很像、其實是另一份 CSS 的按鈕，改成直接共用白卡那套 .card-action.notion／
   .card-action.map（定義見上方 .card-action 區塊），放進同一個 .card-actions，
   結構跟白卡完全一致，不用分誰大誰小、也不用兩邊各自維護一份幾乎一樣的樣式。
   「原卡片」的可見時機規則沒變：說明是空的、但頁面本身有內容時，永遠露出，不用展開才看得到 */
/* 只有標題、沒有說明也沒有原卡片連結的交通／作業項目：不用可展開的按鈕（.card-mini），
   純粹一行顯示，金額／導航按鈕直接露出，不用多一次點擊去看「其實是空的」展開內容。
   2026-08-14 改成上下兩排（先 .card-main 再 .card-actions），跟展開版的「按鈕→詳情→操作列」
   同一種由上到下的排列順序一致，不再是「標題欄＋按鈕」左右並排的橫向排法 */
.card-mini-plain { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; }
/* 2026-08-14 拿掉：原本讓交通卡片的 .card-actions 用比白卡窄 3px 的 margin-top（8px vs 11px），
   Aimi 反應行距應該全部統一，改成直接吃 .card-actions 的基礎值（11px），不再另外覆蓋 */
/* 標題長就折行，不截字（航班那種標題常常很長） */
.card-mini-title { font-size: 16px; color: var(--color-text-primary); flex: 1; line-height: 1.45; min-width: 0; }
/* fontawesome 的 angle 系列在專案裡是用 inline SVG 描邊畫的，不額外掛 CDN 字型檔，
   demo.html 才能離線單檔打開。預設向右（收合），展開時轉 90 度指向下 */
/* 2026-08-07 修正：導航＋價格同時存在時已經改成一律走收合卡（見 README「交通／作業收合卡」），
   .card-mini-plain 不會再出現「同時有導航按鈕又有價格」這種要跟收合卡對齊的情況，
   之前為了對齊两種卡片型態刻意留的固定寬度尾端欄位已經沒有存在必要，
   反而會在收合卡（展開後也不會有東西補進這段空白）留下多餘留白，改回貼齊寬度就好 */
.card-mini-tail { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; }
.card-mini-caret { width: 16px; height: 16px; color: var(--color-text-muted); transition: transform .2s; flex-shrink: 0; margin-top: 3px; }
/* .open 是點按鈕時加在 .card-mini-wrap（按鈕的父層）上，不是加在 .card-mini 自己身上，
   選錯層級會導致轉向動畫完全沒反應，之前這裡一直是這個 bug */
.card-mini-wrap.open .card-mini-caret { transform: rotate(90deg); }
/* 展開內容不縮排，跟標題、徽章一樣從最左邊開始（不跟著標題文字對齊，是刻意的決定） */
/* 2026-08-14：讓「時間欄位→說明文字」的間距跟白卡看齊（白卡的 .card-time 到 .card-desc
   之間沒有額外間距，Aimi 覺得那個距離比較合理）。padding-top 收掉，再用 margin-top 抵銷
   收合列按鈕自己的 padding-bottom（6px）——那段 padding 屬於按鈕的點擊範圍，不能直接改小，
   改了會連帶影響收合狀態下卡片之間的間距 */
.card-mini-detail {
  display: none; padding: 0 4px 10px; margin-top: -6px;
  font-size: 14px; color: var(--color-text-secondary);
  white-space: pre-line;
}
/* 交通卡片的「地點」欄位只會是單一網址／地址（不是路線），2026-08-07 確認定案，
   跟其他分類卡片的「導航」按鈕是同一套邏輯，不用另外做「路線」這個概念，避免誤會成
   要貼兩個點才能用，展開後是完整的「導航」按鈕（.card-action.map）。
   2026-08-14：收合列原本有一顆提示圖示（.card-mini-hasroute）預告裡面有導航，Aimi 覺得
   這顆圖示佔位的方式看起來雜亂，且「說明」文字完全沒有對應的預告、只有導航特別待遇，
   不對稱，討論後決定拿掉，改成跟說明文字一樣「點開才知道裡面有什麼」，class 已整個刪除 */
/* 2026-08-14 定案：交通卡片的「原卡片」不比照白卡／作業「永遠露出」，改成跟「導航」一樣
   收合時都藏著、展開才看得到，省下收合狀態的高度——.card-actions 整排（原卡片＋導航）
   在 .card-mini-wrap 一律靠展開狀態控制顯示，不用再分「這排只有導航才藏」的特例 */
.card-mini-wrap .card-actions { display: none; }
.card-mini-wrap.open .card-actions { display: flex; }
.card-mini-wrap.open .card-mini-detail { display: block; }
.card-mini-wrap { background: transparent; }

/* footer CTA */
.brand-cta {
  margin-top: 34px; text-align: center; padding: 26px 20px;
  background: var(--color-surface); border-radius: 20px; box-shadow: var(--shadow-sm);
}
/* 2026-08-10 新增：CTA 文案依「行程來源」決定這條既有規則（見 README），2026-08-10 起延伸到
   「要不要放 Aimi 個人品牌內容」——不只是按鈕要分兩種，這個自我介紹＋eSIM 區塊也是。
   官方範本行程（如這份土耳其）才會顯示這一段；其他使用者自己轉出來的行程不會有 */
.brand-cta-intro {
  text-align: left; padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px dashed var(--color-border);
  font-size: 14px; color: var(--color-text-secondary); line-height: 1.6;
}
.brand-cta-esim {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 13px; font-weight: 500; color: var(--color-tool); text-decoration: none;
}
.brand-cta-esim:hover { text-decoration: underline; }
.brand-cta .t1 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.brand-cta .t2 { font-size: 14px; color: var(--color-text-muted); margin-bottom: 14px; }
.brand-cta-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* 2026-08-13：全站「漸層實心圓角按鈕」共用同一組視覺（.brand-cta-btn.primary／
   .notfound-btn.primary），底色/文字色/圓角/hover 變暗效果合併成一組選擇器，
   各自只留尺寸相關的差異（寬度／padding／字級） */
.brand-cta-btn.primary, .notfound-btn.primary {
  background: var(--gradient-primary); color: #fff; border: none; border-radius: var(--radius-pill);
  cursor: pointer; font-weight: 500; transition: filter .15s;
}
.brand-cta-btn.primary:hover, .notfound-btn.primary:hover { filter: brightness(0.92); }
.brand-cta-btn {
  font-size: 14px; padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer; border: none;
}
.brand-cta-btn.ghost { background: var(--color-primary-light); color: var(--color-text-secondary); }
.brand-cta-note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--color-border); font-size: 13px; color: var(--color-text-muted); line-height: 1.6; text-align: left; }
/* 導回主站轉換器說明頁，品牌 CTA 卡片跟連結失效畫面共用同一顆 */
.tool-footer-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 16px;
  font-size: 12px; color: var(--color-text-muted); text-decoration: none;
}
.tool-footer-link:hover { color: var(--color-tool-dark); }

/* ============================================================
   刪除確認彈窗（唯一還在用的彈窗，2026-08-16 拿掉「貼上連結」彈窗之後剩下這個）
   .paste-backdrop/.paste-modal 這兩個名字沒跟著改，因為原本就是共用元件的外框，
   改名字要動的地方比留著多，且沒有實際歧義
   ============================================================ */
.paste-backdrop {
  display: none; position: fixed; inset: 0; z-index: 800; padding: 20px;
  background: rgba(26,20,15,0.42); align-items: center; justify-content: center;
}
.paste-backdrop.open { display: flex; }
.paste-modal {
  width: 100%; max-width: 400px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--color-surface); border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.paste-cancel {
  display: block; width: 100%; text-align: center; margin-top: 10px;
  background: none; border: none; color: var(--color-text-muted); font-size: 14px; cursor: pointer;
}
.confirm-icon { font-size: 34px; text-align: center; margin-bottom: 6px; }
.confirm-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 8px; }
.confirm-desc { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); text-align: center; margin-bottom: 22px; }
.confirm-delete-btn {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius-pill);
  background: #C0392B; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer;
}
.confirm-delete-btn:hover { background: #A5301F; }

/* ============================================================
   浮動提示 toast：連結複製成功、立即更新成功／失敗共用同一顆元件
   ============================================================ */
.toast-wrap {
  position: fixed; top: 64px; left: 50%; z-index: 900;
  width: min(92vw, 420px);
  opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast-wrap.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 12px 16px;
}
/* 2026-08-13：icon 從 emoji 改成線條圖示（見 ICONS.link／ICONS.alert），文字也放大，
   原本偏精緻小巧，Aimi 覺得不用做這麼小。icon 高度鎖跟 .msg 同一個 line-height（24px），
   用 flex 置中，不管訊息文字幾行都只會對齊第一行，不是對齊整個文字區塊。拿掉關閉鈕，
   改成純自動消失（4 秒），不用使用者手動點掉。
   2026-08-14：底色統一改中性灰階，不分成功/失敗兩套背景色；只有 icon 顏色分：
   失敗固定用跟「刪除」同一個紅（#B23A3A），成功（複製連結／已是最新）用當前主色系 */
.toast .icon { font-size: 20px; color: #B23A3A; flex-shrink: 0; height: 24px; display: flex; align-items: center; }
.toast .msg { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); flex: 1; }
.toast.ok .icon { color: var(--color-tool); }
/* 2026-08-21：轉換中等待畫面，沿用 toast 元件本身，不切新畫面。icon 用透明度緩慢
   閃動（跟「立即更新」按鈕的旋轉區隔開，避免看起來像同一種動作），文字後面接三個
   依序閃爍的點，讓人感覺讀取真的在跑，不是畫面卡住 */
.toast .icon.pulsing { color: var(--color-tool); animation: toast-pulse 1.3s ease-in-out infinite; }
@keyframes toast-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.msg-dots .dot { opacity: 0; animation: toast-dot 1.4s infinite; }
.msg-dots .dot:nth-child(2) { animation-delay: .2s; }
.msg-dots .dot:nth-child(3) { animation-delay: .4s; }
@keyframes toast-dot { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

/* ============================================================
   分享連結失效／找不到這份行程
   整頁接管，不顯示 nav 跟分頁籤，因為沒有行程資料可以帶出來
   ============================================================ */
.notfound-page {
  display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; max-width: 400px; margin: 0 auto;
}
.notfound-page.active { display: flex; }
.notfound-emoji { font-size: 46px; margin-bottom: 18px; opacity: .85; }
.notfound-title { font-family: var(--font-display); font-weight: 900; font-size: 19px; margin-bottom: 12px; }
.notfound-desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 28px; }
.notfound-desc b { color: var(--color-text-primary); font-weight: 500; }
.notfound-btns { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 260px; }
/* 「查看我收藏的其他行程」點下去展開的清單，樣式直接沿用 .mytrips-item（跟「我的行程」
   下拉選單同一顆元件），不用另外設計一套 */
.notfound-trips { display: none; width: 100%; max-width: 260px; margin-top: 9px; text-align: left; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: 8px; }
.notfound-trips.open { display: block; }
.notfound-btn { font-size: 14px; padding: 12px 18px; border-radius: var(--radius-pill); cursor: pointer; border: none; font-weight: 500; }
.notfound-btn.ghost { background: var(--color-surface); color: var(--color-text-secondary); box-shadow: var(--shadow-sm); }

/* ============================================================
   落地頁：網址沒帶任何行程時（aimigio.com/roam/）看到的畫面
   這是 /tool/roam 那顆「前往使用」的落點，主要動作是「貼上自己的連結」，
   所以輸入框要在第一屏最顯眼的位置，示範行程排它下面
   ============================================================ */
/* 手上沒有行程的兩種畫面（落地頁、轉換失敗）共用：分頁籤列跟 nav 的分享／更新
   都要收起來，不然會出現「分享一個還沒選的行程」這種按了也沒意義的按鈕 */
body.is-notrip .daytabs-wrap,
body.is-notrip .topnav-btn.share,
body.is-notrip .topnav-btn.refresh,
body.is-notrip main { display: none; }

.landing-page { display: none; max-width: 620px; margin: 0 auto; padding: 22px 16px 40px; }
.landing-page.active { display: block; animation: fade-in .2s ease; }
.landing-hero {
  border-radius: 20px; padding: 32px 22px 28px; margin-bottom: 20px; color: #fff;
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,0.5), transparent 55%),
    var(--gradient-hero);
}
.landing-emoji { font-size: 30px; margin-bottom: 10px; }
.landing-title { font-family: var(--font-body); font-weight: 900; font-size: 23px; line-height: 1.45; margin-bottom: 10px; }
.landing-sub { font-size: 14px; line-height: 1.75; opacity: .92; }

.landing-form { display: flex; gap: 8px; margin-bottom: 6px; }
.landing-input {
  /* 16px 是 iOS Safari 的門檻，字級低於這個數字，輸入框一 focus 整頁會自動放大縮排，
     貼行程網址這種常在手機上做的操作特別容易踩到（跟衣櫃工具那幾個輸入框同一個坑，
     見 docs/aimigo-changelog.md 2026-08-22 那幾筆） */
  flex: 1; min-width: 0; font-family: inherit; font-size: 16px;
  padding: 13px 15px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-primary); transition: border-color .15s;
}
.landing-input:focus { outline: none; border-color: var(--color-tool); }
.landing-input::placeholder { color: var(--color-text-muted); }
.landing-submit {
  flex-shrink: 0; font-family: inherit; font-size: 15px; font-weight: 500;
  padding: 0 20px; border: none; border-radius: var(--radius-md);
  background: var(--color-tool); color: var(--color-tool-ink); cursor: pointer; transition: opacity .15s;
}
.landing-submit:hover { opacity: .88; }
.landing-submit:disabled { opacity: .5; cursor: default; }
.landing-err { font-size: 13px; color: #B23A3A; min-height: 20px; padding: 2px 4px; }

/* 首頁的「引導提示卡」共用元件：落地頁「還沒有行程可以轉換？」跟模板首頁「這是範例行程」
   兩處視覺功能一樣（提示 + 一顆 CTA），2026-08-17 統一成同一組樣式，不讓使用者在裸網址
   跟模板頁看到兩種不同強度、不同語言的提示卡。icon／文案／CTA 是連去別的頁面還是直接
   打開選單，各自內容不同，共用的只有外框視覺 */
.promo-card {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 14px 16px; border-radius: var(--radius-md);
  /* 底色跟 .mytrips-item.active 同一招：直接鋪 --color-tool-light 在深色模式會變成
     淺紫底配淺色字，整條讀不出來。混一點醒目色進卡片底色，深淺色模式都成立 */
  background: color-mix(in srgb, var(--color-tool) 12%, var(--color-surface));
}
.promo-card-icon { flex-shrink: 0; display: flex; align-items: center; gap: 3px; font-size: 20px; }
.promo-card-title { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.promo-card-sub { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.6; }
.promo-card-btn {
  flex-shrink: 0; font-size: 13px; font-weight: 500; padding: 9px 15px;
  border: none; cursor: pointer; border-radius: var(--radius-pill); background: var(--color-surface);
  /* 用 --color-tool 不用 --color-tool-dark：深色模式的 surface 是深底，
     深紫字疊上去等於看不見 */
  color: var(--color-tool); box-shadow: var(--shadow-sm); white-space: nowrap; text-decoration: none;
}

/* 2026-08-29：字級/顏色都改吃 .todo-hint（跟行程內頁的小灰字說明共用同一顆，
   不要各自長一個差不多的 class），這裡只留「項目符號清單」這個結構本身需要的
   東西：li 排隊本身的間距用 line-height 撐開，不用 .todo-hint 那組給單一段落用
   的 margin，蓋掉避免每條項目符號之間多疊一層奇怪的間距 */
.landing-note { list-style: none; margin-top: 24px; }
.landing-note .todo-hint { position: relative; padding-left: 16px; line-height: 1.85; margin: 0; }
.landing-note .todo-hint::before { content: '·'; position: absolute; left: 5px; }

/* 轉換失敗的畫面：借用 .notfound-page 的外框，多一段「照著做就能修好」的步驟。
   第一次用最常卡在忘記按「發布」，只回一句錯誤訊息等於叫他自己猜 */
.errhelp-steps { list-style: none; counter-reset: s; width: 100%; max-width: 300px; margin: 0 0 26px; text-align: left; }
.errhelp-steps li {
  counter-increment: s; position: relative; padding: 7px 0 7px 30px;
  font-size: 14px; line-height: 1.7; color: var(--color-text-secondary);
}
.errhelp-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-tool); color: var(--color-tool-ink);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.errhelp-steps b { color: var(--color-text-primary); font-weight: 500; }
a.notfound-btn { display: block; text-align: center; text-decoration: none; }

/* 還原入口：2026-08-17 從清單最下面的獨立一整列，改成掛在「我的行程」小標右邊，
   省一整排的高度。只有真的隱藏過東西才會出現，平常連這排小標都不會多佔空間 */
.mytrips-pop-label.mytrips-row { display: flex; align-items: center; justify-content: space-between; }
.mytrips-restore {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 3px 8px; border: none; background: none;
  font-family: inherit; font-size: 11.5px; color: var(--color-tool);
  border-radius: var(--radius-pill); cursor: pointer; transition: background .15s;
}
.mytrips-restore:hover { background: var(--color-tool-light); }
.mytrips-empty { font-size: 12.5px; color: var(--color-text-muted); padding: 2px 10px 8px; line-height: 1.7; }
/* 清單那幾列改成真的 <a>（中鍵可以開新分頁、長按可以複製連結），要補掉底線 */
a.mytrips-item { text-decoration: none; }

/* 配色切換（2026-08-10 更正，2026-08-13 從四組擴充成五組）：這是正式功能會留著的，
   不是 demo 專屬，任何人隨時都能切換（跟深淺色模式同一種「看的人」的顯示偏好，見上方
   setPrimaryPreset 的說明）。class 名稱還留著 demo- 前綴沒改，只是還沒正式命名，之後
   有空再整理，行為不受影響。原本浮動在畫面右下角，2026-08-10 收進「我的行程」下拉選單
   的「顯示設定」區塊裡，改成行內排列，不用 fixed 定位 */
.demo-primary-swatches { display: flex; gap: 6px; padding: 2px 4px 4px; }
.demo-primary-swatch {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.demo-primary-swatch.active { border-color: var(--color-text-primary); }
.demo-primary-swatch[data-p="1"] { background: linear-gradient(135deg, #1940BF, #774BC9); }
.demo-primary-swatch[data-p="2"] { background: linear-gradient(135deg, #FF7126, #FB3538); }
.demo-primary-swatch[data-p="3"] { background: linear-gradient(135deg, #0785D2, #26CFC1); }
.demo-primary-swatch[data-p="4"] { background: linear-gradient(135deg, #FF599B, #F7484B); }
.demo-primary-swatch[data-p="5"] { background: linear-gradient(135deg, #A0A0A0, #6B6B6B); }

/* ============================================================
   寬版（≥ 880px）：單天頁改成兩欄，地圖搬到左欄、sticky 跟著捲，卡片流在右欄。
   兩個斷點：
   - 880–1023px（iPhone Duo 展開橫式，約 890px）：地圖／卡片 1:1 平分
   - ≥ 1024px（iPad 橫式＋桌機）：地圖欄固定 440px，卡片流吃掉剩下的寬度
   窄版（< 880px，含 Duo 展開直式 626px）維持原本單欄上下堆疊，不進這段。

   2026-09-10：原本右欄放的是「今日地點」文字清單白卡（buildDaySide 生的），
   Aimi 決定把清單拿掉、改讓地圖佔那一欄。地圖高度給上限（360px），不撐滿——
   撐滿在窄欄會變成又細又長的一條很難看。sticky 套在外殼 .day-map-col 上，
   裡面的 .day-map 交給 Leaflet 自己管 position（見 renderDay 的 mapHtml 註解）。
   ============================================================ */
@media (min-width: 880px) {
  .page { padding-top: 30px; }
  /* 一定要加 .active，否則這條會蓋掉 .page{display:none}，沒選到的天也會冒出來 */
  .page.day-page.active {
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    align-items: start;
  }
  /* 沒有小地圖的天數：不做兩欄，內容置中單欄——不然卡片被推到右半、左邊一大塊
     空白很怪（2026-09-11 Aimi 反映）。.has-map class 由 renderDay 依「當天有沒有
     ≥ 2 張地點卡片」加，initDayMap 若座標解析後不到 2 個點也會把它拿掉 */
  .page.day-page.active:not(.has-map) {
    display: block;
    max-width: 620px;
  }
  /* 每個直屬子元素都明講欄／列，不讓瀏覽器自動排版猜位置（2026-09-07 踩過坑：
     條件式出現的區塊沒指定位置，會打亂後面元素的自動排版游標）。
     .day-map-col（地圖外殼）：左欄，grid-row 1 / 3 讓格子跨滿整個高度當 sticky
     的活動範圍，align-self:start 讓它縮到內容高度、才有空間「黏住不動、右邊卡片
     捲過去」。沒地圖那天這個外殼根本不存在（見 renderDay 的 mapHtml），左上角
     就留白，.todo-hint.no-map 在同一格補一句灰字說明為什麼沒地圖 */
  .page.day-page.active .day-map-col {
    grid-column: 1; grid-row: 1 / 3; align-self: start;
    position: sticky; top: 118px; z-index: 1;
  }
  /* 高度給上限、不撐滿——440（桌機欄寬）× 360 是接近正方、稍微橫向的比例，
     不管欄多窄都不會變細長條。窄版才有意義的「放大地圖」按鈕在寬版藏起來 */
  .page.day-page.active .day-map {
    height: min(calc(100vh - 160px), 360px);
    margin: 0; border-radius: var(--radius-md);
  }
  .page.day-page.active .day-map-expand-ctrl { display: none; }
  .page.day-page.active > .todo-hint.no-map {
    grid-column: 1; grid-row: 1; align-self: start; margin: 4px 0 0;
  }
  .page.day-page.active .day-head { grid-column: 2; grid-row: 1; }
  .page.day-page.active .cardflow { grid-column: 2; grid-row: 2; }
  /* 地點超過 20 個的提示（少見，大部分行程一天不會逼近）擺最底、跨兩欄 */
  .page.day-page.active > .todo-hint.map-overflow { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
}

@media (min-width: 1024px) {
  .page.day-page.active {
    max-width: 1120px;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 0 32px;
  }
}