/* WatchWorld 拍照頁樣式｜CC_0905_01
   灰階區塊代表資料尚未接線（unwired-data-must-be-grey），不得改為彩色 */

:root {
  --bg: #0f1115;
  --surface: #171a21;
  --line: #262b35;
  --txt-1: #f2f4f8;
  --txt-2: #aab2c0;
  --txt-3: #6b7280;      /* 次要／未接線灰 */
  --grey-bg: #1b1d22;    /* 未接線區灰底 */
  --accent: #2f6df6;
}

* { box-sizing: border-box; }

/* hidden 屬性必須真的藏起來。
   .sum-link 等自訂 display 會蓋掉瀏覽器預設的 [hidden]{display:none}，
   造成定位失敗時仍看得到地圖連結（連結還是空的）——這正是
   unwired-data-must-be-grey 要防的「沒接上卻長得像接上了」。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--txt-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 頁首 */
.hd {
  flex: 0 0 auto;
  padding: 20px 16px 8px;
  text-align: center;
  /* CC_0921_01：右上角登入鈕靠 absolute 定位掛在這裡。
     用 absolute（不是 flex）的理由只有一個：標題與副標必須維持
     原本的置中，且**完全不被推擠**（任務卡 B2）。 */
  position: relative;
}
.hd-title { margin: 0; font-size: 22px; letter-spacing: 1px; }
.hd-sub   { margin: 4px 0 0; font-size: 13px; color: var(--txt-2); }

/* ---- 右上角登入（CC_0921_01 施工項 B）------------------------------
   iOS 風格的膠囊鈕：看得出是「可以按的東西」，但不搶主角。
   首頁的主動作永遠只有拍照一顆（CLAUDE.md D2-3），所以這顆
   刻意不用 --accent 藍、不做大面積實心，維持次要層級。 */
.hd-auth {
  position: absolute;
  top: 16px;
  right: 12px;
  /* 小選單要壓在下面的內容之上 */
  z-index: 20;
  text-align: right;
}

.auth-btn {
  /* 最大寬度鎖住，長名字一律截斷成「…」。
     沒有這一條，Google 帶回來的長名字會在窄螢幕上撞到標題。 */
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-2);
  font-size: 13px;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.auth-btn:disabled { opacity: .5; cursor: default; }

/* 已登入：字亮起來，並在左邊點一顆小圓點當「在線」的記號 */
.auth-btn-in { color: var(--txt-1); }
.auth-btn-in::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.auth-menu {
  margin-top: 6px;
  min-width: 108px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.auth-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--txt-1);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.auth-menu-item:disabled { opacity: .5; cursor: default; }

/* ---- 世界導覽退路提示（CC_0921_01 施工項 C2）-----------------------
   雲端沒接上就要一眼看得出來（unwired-data-must-be-grey）：
   整條走未接線灰，不得用任何彩色、不得長得像正常內容。 */
.feed-fallback {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--grey-bg);
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- 一次性匯入（CC_0921_01 施工項 D）------------------------------
   只有白名單登入者看得到，所以刻意做成「工具」的樣子，
   與訪客看得到的內容明顯分層：不佔滿寬、不搶眼。 */
.feed-admin {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.feed-import {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.feed-import:disabled { opacity: .5; cursor: default; }
.feed-import-msg {
  margin: 8px 0 0;
  color: var(--txt-2);
  font-size: 13px;
  line-height: 1.5;
}
.feed-import-msg-bad { color: #ff8a80; }

/* 主體 */
/* CC_0911_06：內容區自己捲，底部分頁列才能永遠釘在畫面最下面。
   flex-shrink 從 0 改成 1，.wrap 才會被壓縮到剩餘空間裡；
   沒有這一改，內容一長就把 body 撐高、分頁列被推到螢幕外面。
   ⚠️ 捲軸一律用瀏覽器預設（PM 裁示甲案）。
      嚴禁自訂 ::-webkit-scrollbar／scrollbar-width／scrollbar-color，
      iOS Safari 對自訂捲軸支援極差，寫了多半無效。 */
.wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* 拍照大按鈕：佔滿寬度 */
.shot-btn {
  display: block;
  width: 100%;
  padding: 26px 16px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: none;
}
.shot-btn { font-family: inherit; }
.shot-btn:active { filter: brightness(0.9); }

/* 選照片（CC_0906_01）：次要動作，視覺層級刻意低於拍照 */
.pick-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--txt-1);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.pick-btn { font-family: inherit; }
.pick-btn:active { filter: brightness(1.2); }

/* 真正的 file input 隱藏，但保持可被 label 觸發 */
.shot-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* 卡片 */
.card {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #000;
}

/* 四行資訊 */
.meta { margin: 12px 0 0; }
.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.meta-row:first-child { border-top: none; }
.meta dt { margin: 0; color: var(--txt-2); flex: 0 0 auto; }
.meta dd { margin: 0; color: var(--txt-1); text-align: right; word-break: break-all; }

/* 未接線區：灰底灰字，不得使用彩色 */
.card-unwired {
  background: var(--grey-bg);
  border-color: var(--line);
}
.unwired-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-3);
}
.unwired-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}

/* AI 導遊解說（CC_0905_03）
   尚未拍照／觀察中／失敗一律灰底灰字（unwired-data-must-be-grey），
   確實拿到解說（look-ok）才恢復一般卡片底色與文字色 */
.look {
  background: var(--grey-bg);
  border-color: var(--line);
}
.look-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-3);
}
.look-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}
.look-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--txt-3);
  white-space: pre-wrap;
}
/* 由灰轉彩：只有成功這一種狀態 */
.look.look-ok { background: var(--surface); }
.look.look-ok .look-title { color: var(--txt-1); }
.look.look-ok .look-text  { color: var(--txt-1); }

/* 觀察中的狀態列輕微呼吸，讓等待看得出來仍在跑 */
.look.look-loading .look-status { animation: look-breathe 1.4s ease-in-out infinite; }
@keyframes look-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .look.look-loading .look-status { animation: none; }
}

/* 速度與成本小字，任何狀態都維持灰色 */
.look-meta {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--txt-3);
}

/* ---- 底部分頁列（CC_0906_02 階段二 / CC_0911_06 改寫）----
   CC_0911_06 起，這一排永遠釘在畫面最底下。
   做法不是 position: fixed，是 body 用 height: 100dvh 鎖成
   一個螢幕高，.wrap 自己捲（overflow-y: auto），
   .tabbar 的 flex: 0 0 auto 不許縮。
   ⚠️ 舊註解曾寫「刻意不用 position: fixed，內容都不長，
      讓它隨頁面捲動」——那個理由已失效：內容早就要滑三四個
      螢幕，而 dvh 這個單位本身就是為了對付 Safari 網址列而生的。
   ⚠️ 仍然嚴禁改成 position: fixed 或 sticky。

   依 every-page-needs-an-exit：這裡的「首頁」就是本站該區首頁，
   在每一個分頁都看得到，使用者不必靠瀏覽器上一頁脫困。 */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.tabbar-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
  border: none;
  background: transparent;
  color: var(--txt-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tabbar-ico { font-size: 18px; line-height: 1; }
.tabbar-btn.tabbar-on { color: var(--accent); }
/* 行程尚未開放：整顆灰階、不可點（disabled），不做成可進入的空白頁 */
/* .tabbar-btn.tabbar-off 的宣告已移到檔末，與 CC_0908_03B 的 .is-off 共用
   同一個區塊——灰化只能有一套寫法。移到後面是因為 .wz-second（第 448 行）
   會蓋掉 color，同層級的規則必須排在它之後才生效。 */

/* 分頁面板 */
.tab { display: block; }

/* 首頁區塊標題 */
.home-h {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-2);
}

/* ---- AI 發文（CC_0906_02 階段三）---- */
.post-h {
  margin: 4px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-1);
}
.post-step { margin-top: 4px; }

/* 十顆口吻按鈕：**固定 2 欄**，380px 寬度下不得排 3 欄以上。
   3 欄的話中文四個字會被擠到換行，按鈕高度參差不齊。 */
.tone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.tone-grid .wz-second { margin: 0; font-size: 15px; padding: 12px 8px; }

.post-plats .wz-second { margin: 0 0 8px; }

/* 產文中／失敗的訊息一律灰階；成功時這一行會收起來，換成文字框 */
.post-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--grey-bg);
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-3);
}

/* 照片地點（CC_0906_03 階段二）。
   字級刻意小於文案框的 16px、顏色用次要色：這是輔助資訊，
   不能搶走文案框的視覺重心，也不能讓人誤以為它是貼文的一部分。 */
.post-place {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-2);
}

/* 文字框必須可編輯：複製與分享用的都是編輯後的內容 */
.post-text {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--txt-1);
  font-family: inherit;
  font-size: 16px;   /* iOS 低於 16px 會自動放大整頁 */
  line-height: 1.8;
  resize: vertical;
}

.post-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt-3);
}

/* 自動複製提示（CC_0906_03 階段三）。
   深底淺字的小黑條，2 秒後由 app.js 自己收掉。
   刻意不用 position: fixed——系統分享選單會蓋在頁面上，
   浮在最上層只會被蓋住，貼在按鈕下方反而是使用者關掉選單後看得到的位置。 */
.post-toast {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #000;
  color: #f2f4f8;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.post-acts { margin-top: 12px; }
.post-acts .wz-second { margin: 0 0 8px; }
.post-acts-row {
  display: flex;
  gap: 8px;
}
.post-acts-row .wz-second { flex: 1 1 0; margin: 0; }

/* 結果區最下方的重來按鈕（2G）。放在最下方是刻意的：
   放上面的話，使用者往下讀的路上誤觸就會清掉當前這張照片。 */
.again {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ---- 收合外的摘要行（CC_0906_02 階段一）----
   左邊一句話，右邊一個連結或註記。位置與時間共用這個版型。 */
.sum,
.geo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.sum-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-1);
}
.sum-note {
  font-size: 12px;
  color: var(--txt-3);
  flex: 0 0 auto;
}
.sum-link {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}
.sum-link:active { filter: brightness(1.3); }

/* 定位中／失敗／沒帶位置：摘要行灰階（unwired-data-must-be-grey）。
   這三種狀態的地圖連結一律不出現，畫面上只有一句灰字。 */
.geo-pending .sum-text,
.geo-failed .sum-text,
.geo-none .sum-text { color: var(--txt-3); font-size: 14px; }

/* ---- 詳細資訊（預設收合）----
   檔名／格式／大小／完整經緯度／定位誤差都在裡面，一項都沒少。 */
.detail {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.detail > summary {
  font-size: 13px;
  color: var(--txt-3);
  cursor: pointer;
  list-style: none;
}
.detail > summary::-webkit-details-marker { display: none; }
.detail > summary::before { content: '▸ '; }
.detail[open] > summary::before { content: '▾ '; }

/* ================= 金鑰設定精靈（CC_0905_04 → CC_0905_05）=================
   這一區不是「未接線」，是使用者必須完成的設定步驟，
   因此標題與主要文案用一般文字色；只有輔助說明維持次要色。
   CC_0905_05 改為三步驟精靈，救援提示改收進 <details>。
   CC_0906_05 明示四步，四頁各自標號。 */

/* 步驟指示器（CC_0906_05）：在標題上方，用次要色與小字，
   刻意不搶標題。它只回答「我在第幾步、還有幾步」，不是標題的一部分。 */
.wz-step {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--txt-2);
}

.setup-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--txt-1);
}
.setup-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt-2);
}

/* ---- 精靈共用元件（CC_0905_05）---- */

/* 主要動作鈕。<button> 與 <a> 共用同一組樣式，
   讓「開始設定」與「前往 Google 取得金鑰」在畫面上長得一樣重。 */
.wz-primary {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
  padding: 15px 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.wz-primary:active { filter: brightness(0.9); }
.wz-primary:disabled { opacity: 0.5; }

.wz-second {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-1);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.wz-second:active { filter: brightness(1.2); }

/* CC_0919_03｜危險動作鈕（目前只有地點詳情框的「刪掉」用它）。
   外型逐字沿用上面那條 .wz-second（底色、框線、圓角、padding、置中一個值都沒改），
   只把文字顏色換成站上既有的紅 #ffb4b4——那是 .trip-gem-err 用的同一個色碼，
   不自創新色。
   ⚠️ 為什麼要新開一個 class：CC_0918_08 曾用 'wz-second trip-gem-err' 硬套紅字，
      .trip-gem-err 的 text-align: left 與 margin: 10px 0 0 會蓋掉 .wz-second 的
      置中與邊距，字因此靠左。PM 2026-09-19 裁示不准再用那個套法。
   ⚠️ 只新增這一個 class，上面的 .wz-second／.wz-primary 一個字都沒動。 */
.wz-danger {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: #ffb4b4;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.wz-danger:active { filter: brightness(1.2); }
/* 兩顆並排時跟 .wz-primary／.wz-second 一樣平分一列（既有 .gem-row 那條
   選擇器沒有列到新 class，這裡補自己的一條，不去改既有那條）。 */
.gem-row > .wz-danger {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.wz-label {
  margin: 14px 0 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-2);
}
.wz-label-tail { margin-top: 12px; text-align: center; }

/* ---- 步驟 2 的琥珀警告（CC_0907_08 G5）------------------------------
   Google 會在金鑰頁主動彈出「設定每月消費上限」，並自動帶出使用者
   已存的付款方式。2026-09-07 一位真人測試者因此在這一步放棄。
   那個框是 Google 自己的畫面，我方一個字都改不了，只能事先警告。

   為什麼是獨立的 .wz-warn，不共用 .inapp-warn：
     .inapp-warn 是 header 下的全站橫幅，帶 margin: 0 16px 8px 與慢閃動畫；
     這一條是表單內的段落，欄寬與間距都不同。共用會把兩者綁死，
     日後改其中一邊必定誤傷另一邊。
   ⚠️ 嚴禁改成 .inapp-warn，也嚴禁為了這一條去動 .inapp-warn 任何一行。

   為什麼不加動畫（與 .inapp-warn 的慢閃刻意不同）：
     橫幅在頁面頂端、四周沒有要讀的東西，閃一下是提醒；
     這一條夾在一整頁操作說明中間，旁邊就是要照著做的步驟，
     有東西在動會把眼睛一直拉回來，反而讀不完。
     這裡靠顏色分層就夠：整頁只有這一塊是琥珀色。
   ⚠️ 嚴禁補上 animation / transition / transform。

   顏色三值與 .inapp-warn 同色系（同一套琥珀），是刻意的：
   使用者在首頁看過一次琥珀＝「這裡現在有事」，到這裡不用重新學。 */
.wz-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #f59e0b;            /* 琥珀邊框 */
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.14); /* 琥珀薄底 */
  font-size: 13px;
  line-height: 1.8;
  color: #fcd34d;                       /* 琥珀亮字 */
}
.wz-inline-link { color: var(--txt-1); }

/* ---- 步驟 2 的圖解引導卡（CC_0907_01）--------------------------------
   .wz-steps（四行純文字清單）已整段刪除，改為下面這一組。
   示意圖全部用 div / border / background 畫，不引入任何圖片檔或外部網址：
   真實截圖會連金鑰與 Project ID 一起印出來，而且 Google 一改版就過期。 */
/* 導言兩行。標題比副標重，順序不得顛倒（見 index.html 該處註解）。 */
.wz-cards-lead {
  margin: 16px 0 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--txt-1);
}
.wz-cards-sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-2);
}

.wz-cards {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wzcard;
}
.wz-card {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.wz-card:last-child { margin-bottom: 0; }

/* 卡片標題就是 Google 畫面上那一頁的英文標題，保留英文原字，
   等一下使用者要靠它認出自己走到哪一頁了。 */
.wz-card-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt-2);
  letter-spacing: 0.02em;
}
.wz-card-title::before {
  counter-increment: wzcard;
  content: counter(wzcard) '. ';
  color: var(--txt-3);
}

/* 這一行是「要做的事」，用一般文字色 */
.wz-card-do {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-1);
}
.wz-card-do strong { color: var(--accent); }

/* 補充說明：比 .wz-card-do 小一級、次要色。
   它解釋為什麼會按錯，不是要人做的事，故不得與主說明同級。 */
.wz-card-sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* ---- 線稿本體 ----
   一律是灰底方塊與灰線，只有「該按的那一顆」用醒目色描邊。
   嚴禁再給第二個元素上色：這張圖的全部功能就是指出唯一那一顆。 */
.fig {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.fig-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fig-row:last-child { margin-bottom: 0; }
.fig-row-end { justify-content: flex-end; }

/* 勾選框：醒目色描邊 + 一個勾 */
.fig-check {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 3px;
}
.fig-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* 一條灰線：代表一整行看不清楚也不必看清楚的字 */
.fig-line {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
/* 要按的那顆方鈕（Continue / Create key）：醒目色描邊 */
.fig-btn {
  flex: none;
  width: 46px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--accent);
}

/* API Keys 那一列右側的四顆圖示，等大並排 */
.fig-icons {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 四顆裡唯一被標示的那一顆：醒目色描邊、比其餘三顆大一點，
   內含複製圖示（兩個交疊的方框，用 ::before / ::after 畫）。 */
.fig-copy {
  flex: none;
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid var(--accent);
  border-radius: 5px;
}
.fig-copy::before,
.fig-copy::after {
  content: '';
  position: absolute;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
}
.fig-copy::before { left: 3px;  top: 3px;  width: 9px; height: 11px; }
.fig-copy::after  { left: 7px;  top: 6px;  width: 9px; height: 11px; background: var(--bg); }

/* 不強調的小方塊：其餘三顆圖示。灰底、無框線色、無文字。 */
.fig-box-dim {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--grey-bg);
  border: 1px solid var(--line);
}

.setup-input {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--txt-1);
  font-size: 16px;   /* iOS 低於 16px 會自動放大整頁 */
}

/* CC_0919_09 ⑥｜新增／修改地點的「開始時間」那一格，在 PM 的 iPhone 上比
   同一張表單的地名／城市／停留多久都寬，還撐出卡片右邊。
   ⚠️ 造成變寬的屬性是 -webkit-appearance（原生外觀）。
      type="time" 在 zh-TW 語系底下，原生控制項內層不是兩段而是**三段**
      （上午／下午 ＋ 時 ＋ 分，這一點 index.html 1498 行 CC_0909_03 的
      實測註記已經寫死），三段各有自己的最小寬度，加總出來的固有最小寬度
      （intrinsic min-width）勝過上面 .setup-input 的 width: 100%，框就被撐開。
      關掉原生外觀、並把 min-width 明確歸零，寬度才交還給 width: 100%。
   ⚠️ 只新增這一條，上面的 .setup-input 本身一行未動（卡上明令）。
   ⚠️ 關掉原生外觀後，框線／底色／圓角／內距／字級全部由 .setup-input 提供，
      所以外觀與同表單其他三格一致，不是變成一條沒有框的字。
   ⚠️ 實測揭露：本卡施工環境（雲端 Linux）裝不到 Playwright 的 WebKit
      （下載主機被 proxy 擋，403），Chromium 量到四格本來就同寬 298px，
      重現不了這個差異。本條規則在 Chromium 已驗證不會把原本對齊的四格弄歪、
      不產生左右捲動；iOS Safari 上是否真的收齊，由 PM 實機截圖驗收。 */
input[type="time"].setup-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 金鑰輸入框（CC_0907_01）：由一行 input 改為兩行 textarea。
   PM 2026-09-06 實測，一行高的框在 iPhone 上長按很難叫出「貼上」選單，
   要試很多次。加高只是為了加大命中面積，不是為了讓人打字——
   resize 關掉，免得使用者把它拉成一張紙。 */
.key-field {
  position: relative;
}
.key-area {
  margin: 8px 0 0;
  min-height: 68px;
  resize: none;
  line-height: 1.5;
  font-family: inherit;
  word-break: break-all;
}

/* 空框時疊在上面的提示層。pointer-events: none 是這一層的命脈：
   沒有它，使用者長按到的是提示而不是輸入框，等於自己把貼上擋掉。
   內容是提示，不是輸入值——嚴禁改成預填文字，那會連著金鑰一起送出去。 */
.key-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.4;
}
/* 剪貼簿圖示：一塊板子加上方的夾子，純 CSS，不新增圖檔 */
.key-hint-icon {
  position: relative;
  width: 16px;
  height: 18px;
  margin-bottom: 2px;
  border: 1.5px solid var(--txt-3);
  border-radius: 3px;
}
.key-hint-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 5px;
  margin-left: -4px;
  border: 1.5px solid var(--txt-3);
  border-radius: 2px;
  background: var(--bg);
}
.key-hint-l1 { color: var(--txt-2); }
.key-hint-l2 { font-size: 12px; }

/* 金鑰失效時的引導按鈕，維持灰階（失敗狀態不得轉彩） */
.look-rekey {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-2);
  font-size: 15px;
  cursor: pointer;
}
.look-rekey:active { filter: brightness(1.2); }

/* ================= AI 模型（CC_0908_03 B2）=================
   開發者專用區塊，整區由 app.js 依 ww_dev 切 hidden。

   依 unwired-data-must-be-grey：模型名與次數在拿到 mode=usage 的回應之前
   一律是灰的（.mdl-row 的預設色就是灰），拿到才轉一般文字色。
   「目前使用中」用 2px 強調外框標示，「今日已滿」用紅字紅框。 */
.mdl { margin: 18px 0 0; }
.mdl-h {
  margin: 0;
  font-size: 15px;
  color: var(--txt-1);
}
.mdl-sub {
  margin: 4px 0 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt-3);
}
.mdl-list { display: flex; flex-direction: column; gap: 8px; }

/* 每一列＝一支模型。整列可點＝切換。
   border 一律留 2px，選中與否只換顏色不換寬度——用 1px/2px 互換會讓
   點擊時整列跳動 1px。 */
.mdl-row {
  display: flex;
  align-items: center;
  /* CC_0908_03B：「暫時用不動 · 約 N 分鐘後恢復」比一個數字長得多，
     390px 下同一行放不下時讓它自己換行，而不是把整列撐寬造成橫向捲軸。 */
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--grey-bg);
  color: var(--txt-3);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mdl-row:active { filter: brightness(1.2); }

/* 打勾欄位固定寬度，三列的模型名才會對齊 */
.mdl-tick {
  flex: 0 0 16px;
  font-size: 13px;
  color: var(--accent);
}
.mdl-name { flex: 1 1 auto; word-break: break-all; }
.mdl-count {
  /* 可縮：長文案時讓它讓步，不去擠壓模型名 */
  flex: 0 1 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 已接上資料（拿到 mode=usage 回應）才轉一般文字色 */
.mdl-row.is-live { color: var(--txt-1); }

/* 目前使用中：2px 強調外框 */
.mdl-row.is-current { border-color: var(--accent); }

/* CC_0908_03B C6-1：blocked 由「紅字紅框」改為灰階不可按。

   為什麼拿掉紅色：紅色原本要表達的是「今日額度用完」這種確定而嚴重的狀態，
   但實測顯示 429 多半是暫時性的速率限制，那一列講的已經是
   「暫時用不動 · 約 N 分鐘後恢復」。用紅色警告一件幾分鐘後就會自己好的事，
   是把話說得比事實重。

   灰階＝不能按，沿用檔末 .is-off 那一套（全站唯一一份），
   這裡只負責讓 .mdl-count 不要蓋回一般文字色。 */
.mdl-row.is-blocked.is-off,
.mdl-row.is-blocked.is-off .mdl-count { color: var(--txt-3); }

/* C6-2 自動切換後的說明小字。接在被選中那一列下面。 */
.mdl-note {
  margin: -2px 0 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt-3);
}

/* ===== 關於（CC_0908_03B C5）===== */
/* ---- 跳轉網址實測（開發用）（CC_0908_10 A）--------------------------
   只有 ?dev=1 看得到的量測工具，不是給訪客的功能。
   刻意沿用 .mdl-h / .mdl-sub 的標題樣式，不另開第二套字級。 */
.probe { margin: 22px 0 0; }
.probe-list { display: flex; flex-direction: column; gap: 14px; }
.probe-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--grey-bg);
}
/* 按鈕本體是 <a target="_blank">，不是 <button>：
   自訂協定（googletranslate:// 等）要靠瀏覽器原生處理，
   用 JS 轉跳反而會被當成彈出視窗擋掉，量到的就不是這條網址本身。 */
.probe-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  color: var(--txt-1);
  font-size: 14px;
  text-decoration: none;
}
.probe-btn:active { filter: brightness(1.2); }
.probe-exp {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt-2);
}
/* 網址逐字顯示，長網址一律折行——390px 下不得撐出橫向捲軸 */
.probe-url {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--txt-3);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.probe-warn {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--txt-3);
}

.about { margin: 22px 0 0; }
.about-p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--txt-2);
}
.about .quota-btn { margin-top: 14px; }

/* ================= 額度用完（CC_0908_03 B4）=================
   訪客與 PM 都會看到。紅底卡片，加一顆能直接點開的 LINE 連結。
   刻意不做成「複製這串網址」——那等於把最後一步丟給使用者自己想辦法。 */
.quota {
  margin-top: 12px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #7f2d2d;
  background: #2a1417;
}
.quota-h {
  margin: 0;
  font-size: 16px;
  color: #ffb4b4;
}
.quota-p {
  margin: 6px 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #e6c9c9;
}
.quota-btn {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: #06c755;          /* LINE 品牌綠 */
  color: #06231a;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.quota-btn:active { filter: brightness(1.1); }

/* CC_0908_03 B3：.keyline / .keyline-btn 已刪除。
   這兩個 class 只服務設定分頁那兩列金鑰狀態（#keyline、#keyline-none），
   該兩列隨「使用者自帶金鑰」方向作廢一併移除，樣式沒有第二個使用者。 */

/* ================= 訪客可瀏覽（CC_0906_04）=================
   沒有金鑰的訪客也能進首頁。這一區的樣式只服務「說明為什麼」，
   不涉及任何資料顯示，故不套未接線灰的規則（那是給資料用的）。 */

/* 首頁「這是什麼」。放在兩顆按鈕上方，訪客第一眼看到的就是這段。 */
.home-intro {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--txt-2);
}

/* 被擋下時的原地說明：首頁按鈕下方那一行。
   刻意用一般文字色而非灰色——這不是未接線資料，是要人讀的原因。 */
.gate-inline {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt-1);
}

/* 精靈頂端的同一句話：切過去之後仍看得到自己為什麼被帶來這裡 */
.gate-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt-2);
}

/* 拍照分頁的訪客版：這一頁不得留白，留白就是死路 */
.guest-lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--txt-1);
}
.guest-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--txt-2);
}

/* 精靈三頁的出口（every-page-needs-an-exit）。
   樣式刻意低於 .wz-second：它是退路，不是這一頁要人做的事。 */
.wz-exit {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--txt-2);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}
.wz-exit:active { color: var(--txt-1); }

/* ================= CC_0907_03 首頁版面佔位 =================
   灰階一律沿用既有的 .card-unwired / .unwired-title / .unwired-note，
   嚴禁另立一套灰。 */

/* 首頁一行提示：指向底部「拍照」分頁。
   刻意用一般文字、無邊框無底色——做成按鈕外觀就會變成
   第三個看起來能按的拍照入口，正是 CC_0907_03 要消滅的東西。 */
.home-hint {
  margin: 0 0 18px;
  padding: 6px 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: var(--txt-2);
}

/* 隨手工具（首頁「出發前」「旅行中」兩組）：2026-09-25 PM 核可 4 欄圖示（CC_0925_06）。
   每格是 iPhone 桌面那種彩色圓角方塊＋底下一行名字，樣式在檔末 .hi-cell 那一區。
   minmax(0,1fr) 讓 380px 寬時四欄也不會被長名字撐爆。 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 4px;
  margin: 4px 0 12px;
}
.tool-cell {
  padding: 16px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--grey-bg);
  text-align: center;
  font-size: 14px;
  color: var(--txt-3);
}
/* 未接的格子：真的按不下去。
   div.tool-cell 本來就沒有 href，這條是防止未來有人加上 onclick
   讓灰格「看起來能按」（unwired-data-must-be-grey）。 */
div.tool-cell {
  cursor: default;
  pointer-events: none;
}
/* 已接線的格子（CC_0908_05）：恢復一般顏色。
   顏色一律沿用既有變數（--surface／--txt-1），不引入新色。
   ⚠️ 只是恢復一般樣式，不做成主按鈕外觀——
      首頁的主動作永遠只有拍照一個入口。 */
.tool-cell-on {
  display: block;
  background: var(--surface);
  color: var(--txt-1);
  text-decoration: none;
  cursor: pointer;
}
.tool-cell-on:active {
  border-color: var(--accent);
}
/* 回程提示：一般說明文字，不是按鈕、也不是未接灰。 */
.tool-note {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* LINE 內建瀏覽器橫幅（CC_0907_03 施工項 2；CC_0907_04 改琥珀色慢閃）。
   放在 header 之後、任何 tab 之外，四個分頁都看得到。
   未命中時 hidden，完全不佔位。
   刻意不做成可點擊的樣子——它只是一句話，沒有任何動作。

   CC_0907_04 為什麼不能再用未接線灰：
   2026-09-07 PM 以 iPhone 從 LINE 實機開啟，橫幅有顯示、文案也對，
   但原話「紅色框裡面的字也太不明顯了，我都不知道這是 LINE 裡面的瀏覽器」。
   原因是這條橫幅原本沿用 --grey-bg / --line / --txt-2，
   與它下方那一整排未接灰卡（還沒有旅程／今天的行程．下一站…）長得一模一樣，
   使用者把警告讀成「又一格沒接上的佔位」。

   警告與未接佔位是兩件事，不得共用同一套灰：
   未接灰＝這裡還沒做，你不用理它；
   琥珀＝這裡現在有事，你得看一眼。
   ⚠️ 嚴禁把這條改回 --grey-bg / --line / --txt-2。
   ⚠️ 琥珀只給這一條橫幅，未接灰卡那幾格不得跟著變色。 */
.inapp-warn {
  flex: 0 0 auto;
  margin: 0 16px 8px;
  padding: 10px 12px;
  border: 1px solid #f59e0b;            /* 琥珀邊框，深底上明顯 */
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.14); /* 琥珀薄底，刻意不是 --grey-bg */
  font-size: 13px;
  line-height: 1.8;
  color: #fcd34d;                       /* 琥珀亮字，深底上讀得清楚 */
  animation: inapp-warn-breathe 1.2s ease-in-out infinite;
}

/* 慢閃＝呼吸，不是閃爍。
   一個循環約 1.2 秒，只在透明度上做和緩起伏（1 → 0.58 → 1）。
   ⚠️ 嚴禁改快、嚴禁做成高對比黑白交替——那既刺眼又有光敏風險。 */
@keyframes inapp-warn-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.58; }
}

/* 使用者若在系統層關掉動態效果，就不要動。
   ⚠️ 但顏色仍維持琥珀，不得退回灰——不然又變回看不出是警告。 */
@media (prefers-reduced-motion: reduce) {
  .inapp-warn { animation: none; opacity: 1; }
}

/* ================= 世界導覽（CC_0907_10）=================
   一張照片一篇 AI 導覽文，往下滑。訪客不需要金鑰就看得到。 */

/* ---- 首頁 G 區那一格的兩種狀態 ----
   空陣列時沿用既有的 .card-unwired / .unwired-title / .unwired-note，
   嚴禁另立一套灰。這裡只補「有內容」時的一般樣式。

   ⚠️ 灰卡狀態直接用 pointer-events 關掉點擊：
      沒接上就是灰的、也真的按不下去（unwired-data-must-be-grey）。 */
#feed-entry.card-unwired {
  pointer-events: none;
}
.feed-entry-on {
  cursor: pointer;
}
.feed-entry-on:active {
  border-color: var(--accent);
}
.feed-entry-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt-1);
}
.feed-entry-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* ---- 首頁 G 區卡片裡的猜謎（CC_0908_06）----
   猜謎搬進 #feed-entry 卡片內部，不能再長第二層卡片框：
   去掉自己的底色與外框，只留一條分隔線，沿用既有變數，不引入新顏色。
   ⚠️ 預覽小圖（.feed-strip / .feed-strip-img）已於 CC_0908_06 整條移除，
      不要為了「首頁看得到照片」把它加回來——那是四個答案。 */
#feed-entry .quiz {
  margin: 12px 0 0;
  padding: 12px 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  cursor: default;
}
/* CC_0926_14｜首頁那一行改成闖關入口：一行字＋一條進度條（右邊灰字印章數）。
   ⚠️ 不准把這一格做長：只比舊的「猜謎已玩過 · 再玩一次」多一條進度條。
   做成有外框的膠囊按鈕，看得出是可以按的東西（按鈕要有按鈕的樣子）。 */
#feed-entry .quiz-reopen {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.quiz-home-line {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-1);
}
.quiz-home-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.quiz-home-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.quiz-home-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9b45a, #f3d98b);
  transition: width .6s ease;
}
.quiz-home-stamps {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--txt-3);
}

/* ---- 世界導覽頁 ---- */
.feed-h {
  margin: 14px 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--txt-1);
}
.feed-sub {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--txt-2);
}

/* 每一篇之間留白分隔，往下滑就是下一篇。 */
.feed-card {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.feed-card:first-child {
  border-top: none;
}
.feed-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
}
.feed-where {
  margin: 12px 0 8px;
  font-size: 13px;
  color: var(--txt-2);
}
.feed-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--txt-1);
  white-space: pre-wrap;
}

/* ================= 灰化＝不能按（CC_0908_03B C4）=================
   全站唯一的一套灰化寫法，兩處共用：
     .tabbar-btn.tabbar-off  底部分頁列的「行程」（尚未開放）
     .is-off                 429 時的「再拍一張」「換一張照片」

   刻意灰化而不是整個隱藏：按鈕突然消失會讓人以為畫面壞了，
   灰掉才看得出「這裡本來有東西，現在不能用」。

   ⚠️ 必須排在 .wz-second 之後，否則 color 會被它蓋掉，
   按鈕看起來仍是亮的、卻按不動——那比不灰化更糟。 */
.tabbar-btn.tabbar-off,
.is-off {
  color: var(--txt-3);
  opacity: 0.55;
  cursor: default;
}
/* 灰化時不給任何按下去的回饋，避免「看起來有反應但其實沒事發生」 */
.is-off:active { filter: none; }

/* ================= 世界導覽猜謎（CC_0908_04）=================
   訪客進世界導覽的前三十秒先玩四題，玩完推去拍照。
   全部資料來自 feed.js，不呼叫 api/look，因此**這一區不該有任何灰卡**。

   顏色一律沿用既有色票：卡片用 --surface / --line，
   答錯沿用 .quota 那組紅（#7f2d2d / #2a1417 / #ffb4b4），
   答對是同一個調子推出來的綠（深底＋亮字），不引入新字體、不引入外部資源。 */
.quiz {
  margin: 14px 0 4px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* 玩過一次後的收合列。整條可按，按下去重玩。 */
.quiz-reopen {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--txt-2);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.quiz-reopen:active { filter: brightness(1.3); }

.quiz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.quiz-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt-1);
}
.quiz-progress {
  margin: 0;
  font-size: 13px;
  color: var(--txt-3);
  flex: 0 0 auto;
}

/* ---- 圖框 ----
   特寫與全圖是同一個 <img>：靠 transform scale + transform-origin 放大平移，
   **不另存第二個圖檔**。答完後 transform 回 scale(1)、原點回正中，
   0.6 秒拉開成全圖。
   object-fit 用 contain 而不是 cover：cover 在 scale(1) 時仍是裁切過的，
   拉開就看不到「全圖」。contain 在直式照片左右會留黑邊，那是照片本來的形狀。 */
.quiz-figure {
  margin: 12px 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.quiz-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .quiz-img { transition: none; }
}

.quiz-q {
  margin: 14px 0 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--txt-1);
}

/* 四個選項。固定一欄：地名多半四到七個中文字，
   兩欄在 390px 下會換行、四顆高低不齊。 */
.quiz-opts {
  display: grid;
  gap: 8px;
}
.quiz-opt {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--txt-1);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.quiz-opt:active { filter: brightness(1.3); }
.quiz-opt:disabled { cursor: default; }
/* 答完之後：選到的那顆標出來，正解一定標出來，其餘淡掉。
   淡掉用 opacity 不用改色，避免多冒出一組顏色。 */
.quiz-opt-dim { opacity: .45; }
.quiz-opt-right {
  border-color: #2d7f52;
  background: #14261b;
  color: #b4ffcd;
}
.quiz-opt-wrong {
  border-color: #7f2d2d;
  background: #2a1417;
  color: #ffb4b4;
}

.quiz-hint-btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--txt-2);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.quiz-hint {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt-2);
}

/* ---- 答完 ----
   一行結果條。答錯只寫正解，不得嘲諷。 */
.quiz-verdict {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
.quiz-verdict-ok {
  border: 1px solid #2d7f52;
  background: #14261b;
  color: #b4ffcd;
}
.quiz-verdict-no {
  border: 1px solid #7f2d2d;
  background: #2a1417;
  color: #ffb4b4;
}
.quiz-excerpt {
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--txt-2);
}

.quiz-score {
  margin: 14px 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--txt-1);
  text-align: center;
}
.quiz-note {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt-2);
  text-align: center;
}

/* ================= 闖關猜謎（CC_0926_14）=================
   關卡列表／護照／過關／沒過關／證書。顏色沿用既有色票，
   金色（#d9b45a）只給「拿到的東西」用：星數、印章、證書框。 */

/* 護照那一行：整行可按，展開看 10 個章 */
.qz-passbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-1);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.qz-passbtn:active { filter: brightness(1.2); }
.qz-caret { color: var(--txt-3); transition: transform .2s ease; }
.qz-passbtn-open .qz-caret { transform: rotate(90deg); }

.qz-passport {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 6px;
  margin: 8px 0 0;
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.qz-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qz-stamp-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px dashed var(--txt-3);
  font-size: 24px;
  line-height: 1;
}
.qz-stamp-got .qz-stamp-face {
  border: 2px solid #d9b45a;
  background: rgba(217, 180, 90, .12);
}
.qz-stamp-cap { font-size: 11px; color: var(--txt-3); }
.qz-stamp-got .qz-stamp-cap { color: var(--txt-2); }

.qz-certbtn {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d9b45a;
  background: rgba(217, 180, 90, .10);
  color: #f3d98b;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* 10 列關卡 */
.qz-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 8px;
}
.qz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.qz-row:active { filter: brightness(1.2); }
.qz-row-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-row-name { font-size: 16px; font-weight: 600; }
.qz-row-sub  { font-size: 12px; color: var(--txt-3); }
.qz-row-stars { flex: 0 0 auto; font-size: 18px; color: #d9b45a; letter-spacing: 2px; }
/* 下一關：藍框＋藍色「開始」鈕 */
.qz-row-next { border: 2px solid var(--accent); }
.qz-row-go {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
/* 還沒開：灰字、按不下去 */
.qz-row-lock { color: var(--txt-3); cursor: default; }
.qz-row-lock:active { filter: none; }
.qz-row-lock .qz-row-name { color: var(--txt-3); }
.qz-row-lockt { flex: 0 0 auto; font-size: 12px; color: var(--txt-3); }

/* 回到列表時，剛過的那一關＋新解鎖的那一關閃一下（魔法特效） */
.qz-row-glow { animation: qz-glow 1.6s ease-out 2; }
@keyframes qz-glow {
  0%   { box-shadow: 0 0 0 0 rgba(243, 217, 139, .0); }
  25%  { box-shadow: 0 0 0 4px rgba(243, 217, 139, .75), 0 0 28px 6px rgba(243, 217, 139, .55); }
  100% { box-shadow: 0 0 0 0 rgba(243, 217, 139, .0); }
}

/* ---- 過關／沒過關 ---- */
#quiz-result { text-align: center; }
.qz-res-title {
  margin: 10px 0 4px;
  font-size: 24px;
  font-weight: 800;
  color: var(--txt-1);
}
.qz-res-stars {
  margin: 0;
  font-size: 40px;
  letter-spacing: 6px;
  color: #d9b45a;
}
.qz-res-score {
  margin: 6px 0 12px;
  font-size: 16px;
  color: var(--txt-2);
}
.qz-res-note {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--txt-3);
}

/* 蓋章舞台：大印章從上面砸下來，落地那一刻一圈金光 */
.qz-stage {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 18px auto 6px;
}
.qz-bigstamp {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #d9b45a;
  background: rgba(217, 180, 90, .14);
  font-size: 76px;
  line-height: 1;
  transform: rotate(-8deg);
}
.qz-flash {
  position: absolute;
  inset: -40px;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, .95) 0%, rgba(255, 214, 110, .45) 35%, rgba(255, 214, 110, 0) 70%);
  opacity: 0;
  pointer-events: none;
}
.qz-stamping .qz-bigstamp { animation: qz-stamp .7s cubic-bezier(.2, .9, .3, 1.3) both; }
.qz-stamping .qz-flash    { animation: qz-flash 1s ease-out .45s both; }
.qz-stamping .qz-res-stars { animation: qz-pop .5s ease-out .75s both; }
@keyframes qz-stamp {
  0%   { transform: translateY(-120px) scale(2.6) rotate(-24deg); opacity: 0; }
  60%  { transform: translateY(0) scale(.9) rotate(-6deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(-8deg); opacity: 1; }
}
@keyframes qz-flash {
  0%   { opacity: 0; transform: scale(.4); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes qz-pop {
  0%   { transform: scale(.3); opacity: 0; }
  70%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 答錯的題目：一列一顆，點了開那一篇導覽文 */
.qz-wronglist { display: grid; gap: 8px; margin: 0 0 14px; }
.qz-wrong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #7f2d2d;
  background: #2a1417;
  color: #ffb4b4;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.qz-wrong-go { flex: 0 0 auto; font-size: 13px; color: var(--txt-2); }

/* ---- 全破證書：蓋在整頁上面 ---- */
.qz-cert {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .78);
}
.qz-cert-box {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
}
.qz-cert-img {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  margin: 0 0 12px;
  border-radius: 10px;
  -webkit-touch-callout: default;   /* 讓 iPhone 長按跳「加入照片」 */
}
.qz-cert:not([hidden]) .qz-cert-img { animation: qz-pop .6s ease-out both; }

/* 系統設「減少動態」：全部直接出現 */
@media (prefers-reduced-motion: reduce) {
  .qz-stamping .qz-bigstamp,
  .qz-stamping .qz-flash,
  .qz-stamping .qz-res-stars,
  .qz-row-glow,
  .qz-cert:not([hidden]) .qz-cert-img { animation: none; }
  .quiz-home-bar i, .qz-caret { transition: none; }
}

/* ---- 旅程骨架（CC_0908_13）------------------------------------
   入口是一整格可按的卡片，不是三顆按鈕。
   已建立的旅程用一般樣式；兩張「下一刀才接」的卡沿用既有
   .card-unwired 灰階樣式，這裡不另外開新色（unwired-data-must-be-grey）。 */

.trip-add {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.trip-add-main {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--txt-1);
}
.trip-add-sub {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-2);
}

/* CC_0910_10｜「直接讓我方 AI 讀」降級成小灰字：主路徑是上面那塊跳去 Gemini。
   ⚠️ 只做字級變小與轉灰，結構 / 內距 / 可按範圍一律不動。
   ⚠️ 顏色與字級逐字沿用 .trip-read-min（var(--txt-3) / 13px），不自創新色。 */
.trip-add-min .trip-add-main {
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-3);
}
.trip-add-min .trip-add-sub {
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-3);
}

/* ---- 確認頁 ---- */
.trip-confirm-h {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--txt-1);
}
.trip-confirm-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-2);
}
.trip-f {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.trip-f-k {
  flex: 0 0 48px;
  font-size: 14px;
  color: var(--txt-2);
}
.trip-f-v, .trip-f-s {
  min-width: 0;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--txt-1);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.trip-f-v { flex: 1 1 auto; }
.trip-f-s { flex: 0 0 88px; }
.trip-f-none {
  border-color: transparent;
  background: none;
  color: var(--txt-3);
  text-align: center;
}
.trip-acts {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.trip-acts button { flex: 1 1 0; }

/* ---- 旅程卡 ---- */
.trip-line1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--txt-1);
}
.trip-line2 {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--txt-2);
}
.trip-line3 {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--accent);
}

/* ---- 這趟的機票：一段一橫列（CC_0909_01）------------------------
   舊的 .trip-cal（去程／回程兩顆固定日曆鈕）與 .trip-reset
   （那行找不到的小灰字「重新建立這趟旅程」）已隨 HTML 一起移除。 */
.trip-seglist {
  margin-top: 14px;
}
.trip-seg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px 14px;
}
.trip-seg-body {
  flex: 1 1 auto;
  min-width: 0;
}
.trip-seg-main {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-1);
}
.trip-seg-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-2);
}
.trip-seg-acts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trip-seg-btn {
  flex: 0 0 auto;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.trip-seg-btn:active { filter: brightness(1.2); }
/* 算不出起飛時間的那一段真的加不了日曆：灰、按不動（unwired-data-must-be-grey） */
.trip-seg-btn-off {
  color: var(--txt-3);
  border-color: var(--line);
  cursor: default;
  opacity: 0.55;
}
/* 刪掉這段是退路不是主動作，不上強調色 */
.trip-seg-del {
  color: var(--txt-3);
  border-color: var(--line);
}
.trip-seg-ask {
  font-size: 13px;
  color: var(--txt-2);
  white-space: nowrap;
}

/* 讀機票入口底下那行小字（CC_0909_01）。
   CC_0910_06：舊的 .trip-read 大按鈕樣式已經沒人引用（降級成
   .trip-read-min 小灰字），連同移除，不留死 css。 */
.trip-read-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--txt-3);
}

/* 確認頁「這是哪一段」三選一（CC_0909_01）。
   ⚠️ 必選：沒選中的三顆都不上強調色，使用者看得出來還沒選。 */
.trip-role-f { align-items: center; }
.trip-role {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
}
.trip-role-b {
  flex: 1 1 0;
  padding: 9px 0;
  font: inherit;
  font-size: 14px;
  color: var(--txt-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.trip-role-on {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---- 關卡列表：連成一條路（CC_0908_15，PM 裁示乙案）--------------
   左側是一條直線串起來的圓點，不是長條百分比進度條。
     已完成   實心圓 + 勾
     目前這關 空心圓、加粗外框、強調色
     還沒到   細框圓、灰
   線由 .leg-rail::before 畫（絕對定位、上下撐滿整列），
   第一列從圓心往下、最後一列到圓心為止，中間各列整條貫穿，
   所以視覺上是一條連續的路而不是一段一段。
   ⚠️ 圓點本身就是打勾按鈕（.leg-dot），全部走 CSS，
      不得為了這條線或這顆勾引入任何第三方套件或 CDN。 */
.leg {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 8px;
}
.leg-rail {
  position: relative;
  flex: 0 0 24px;
}
.leg-rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--line);
}
/* 第一列：線從圓心開始往下（圓心 = top 13px + 半徑 11px） */
.leg:first-child .leg-rail::before { top: 24px; }
/* 最後一列：線到圓心為止，不要往下多出一截 */
.leg:last-child .leg-rail::before { bottom: auto; height: 24px; }
/* 只有一關時整條線都不畫 */
.leg:first-child:last-child .leg-rail::before { display: none; }

/* CC_0908_16：圓點改回純顯示元件（<span>）。
   PM 裁示：圓點看起來像顯示元件，不像控制元件，按了才知道能按。
   控制改到每一列右側的 .leg-act。 */
.leg-dot {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  padding: 0;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--txt-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.leg-now .leg-dot {
  color: var(--accent);
  border: 2px solid var(--accent);
}
.leg-done .leg-dot {
  color: #b4ffcd;
  background: #14261b;
  border-color: #14261b;
}

.leg-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.leg-main { flex: 1 1 auto; min-width: 0; }
.leg-now .leg-body { border-color: var(--accent); }
.leg-text {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: var(--txt-1);
}
.leg-done .leg-text { color: var(--txt-3); }
/* 完成日期：按下打勾的當下自動記，使用者不選日期 */
.leg-when {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--txt-3);
}

/* CC_0908_16：每一列右側的控制鈕。看起來就是一顆鈕，不用猜。
   訂位那一關「性質上就完成了」，右側不放任何鈕（app.js 不建立這顆）。 */
.leg-act {
  flex: 0 0 auto;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.leg-act:active { filter: brightness(1.2); }
/* 已完成的那一列只剩「取消」，是退路不是主動作，不上強調色 */
.leg-act-off {
  color: var(--txt-3);
  border-color: var(--line);
}

/* ---- 等待畫面（CC_0908_15）----------------------------------
   一條一直在動的線，純 CSS 動畫。
   ⚠️ 這條線刻意不是進度條：後端要跑多久沒人知道，
      畫成百分比就是在畫一個猜出來的數字。 */
.trip-busy-bar {
  overflow: hidden;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--grey-bg);
}
.trip-busy-bar > span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--txt-3);
  animation: trip-busy-slide 1.4s ease-in-out infinite;
}
@keyframes trip-busy-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* 使用者要求減少動態時就不要動，改成一條靜線 */
@media (prefers-reduced-motion: reduce) {
  .trip-busy-bar > span { animation: none; width: 100%; }
}
.trip-busy-give { margin-top: 14px; }

/* 原幣金額。讀不到時整區 hidden，不留一個 0 在畫面上。
   CC_0909_01：多幣別各一行，嚴禁換算匯率、嚴禁相加。 */
.trip-price {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--txt-2);
}
.trip-price-line {
  margin: 2px 0 0;
}
.trip-price-line:first-child { margin-top: 0; }

/* ---- 轉機這段時間做什麼（CC_0908_16）--------------------------
   這一區是真的接上 api/look 的，所以用一般卡片樣式，不是灰階。
   等待畫面沿用 .card-unwired + .trip-busy-bar，那時候確實還沒有資料。 */
.lay-h {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--txt-1);
}
.lay-sub {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-2);
}
/* 四段：吃／買／休／注意 */
.lay-sec { margin-top: 14px; }
.lay-sec-h {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.lay-sec-b {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--txt-1);
  white-space: pre-wrap;
}
/* 免責那一行。刻意用未接線那個灰：它不是內容，是提醒。 */
.lay-warn {
  margin: 16px 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}
.lay-note {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-3);
}
/* 五顆情境標籤：可複選、可取消 */
.lay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.lay-tag {
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--txt-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lay-tag[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
/* 可編輯的問句。使用者改過之後就不再被標籤覆蓋（見 app.js layEdited）。 */
.lay-q {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--txt-1);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}

/* CC_0908_14：年份推測提示。刻意用未接線那個灰，
   讓「這一格不是讀到的」在畫面上一眼可辨。 */
.trip-year-hint {
  margin: -4px 0 10px 56px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}

/* CC_0910_02：必填紅星。只掛在「空白就擋」的欄位上——
   紅星與實際行為不符比沒有紅星更糟，使用者會照著填卻還是按不下去。
   ⚠️ 紅沿用站上既有紅字色 #ffb4b4（.quota-h／.quiz-opt-wrong 那一組），
      不自創新色。 */
.trip-req {
  color: #ffb4b4;
  margin-left: 2px;
}

/* CC_0910_02：按鈕正上方的「還差什麼」清單。
   字級與 .trip-year-hint 相同，靠左、行距緊湊。 */
.trip-go-blocks {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ffb4b4;
  text-align: left;
}
.trip-go-blocks p { margin: 0; }
.trip-go-blocks p + p { margin-top: 4px; }
/* 清單一出現就緊貼按鈕，不要再多一段 .trip-acts 的 14px */
.trip-go-blocks:not([hidden]) + .trip-acts { margin-top: 6px; }

/* CC_0910_06｜跳去 Gemini 拿 JSON 再貼回來那一區。
   CC_0910_08：主動作改成「📋 複製」「🔗 開 Gemini」兩顆＋「✓ 讀進來」，
   標題／指令框／說明字改用轉機那一區的 .lay-h／.lay-q／.lay-note，
   舊的 .trip-gem-open／.trip-gem-note／.trip-gem-prompt 因此移除。
   舊的「讀一張機票」仍是備援小灰字（.trip-read-min）。 */
/* 剪貼簿寫不進去時才亮的那句話。走站上既有紅字色，不自創新色。 */
.trip-gem-copyfail {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #ffb4b4;
}
.trip-gem-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-2);
}
.trip-gem-json {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-1);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}
/* 擋人的原因就貼在「✓ 讀進來」正上方（鐵律二）。
   紅沿用 .trip-go-blocks 那一組，不自創新色。 */
.trip-gem-err {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ffb4b4;
  text-align: left;
}
.trip-gem-err:not([hidden]) + .wz-primary { margin-top: 6px; }
.trip-gem-hr {
  margin: 16px 0 10px;
  border: 0;
  border-top: 1px solid var(--line);
}
/* 備援那顆：不再是大按鈕，降成一行可按的小灰字。
   ⚠️ 只降視覺，功能一行未動。 */
.trip-read-min {
  display: block;
  width: 100%;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--txt-3);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

/* ================= CC_0910_07｜存起來 ＋ 跳去 Gemini ================= */

/* 「💾 存起來」貼著照片，中間只留一點呼吸，讓人一眼看出這顆是在講上面那張。
   刻意不是 .wz-primary：首頁的主動作永遠只有拍照一顆（D2-3）。 */
.save-photo {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-1);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.save-photo:active { filter: brightness(1.2); }

/* CC_0910_09｜退回下載時那一行說明。
   不是錯誤，所以走站上既有的次要文字色，刻意不跟下面的紅字同色。 */
.save-photo-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* 存不下來時那一行退路。走站上既有紅字色，不自創新色。 */
.save-photo-err {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #ffb4b4;
}

/* 跳去 Gemini 那一區。整區只在有照片時才出現——
   .look-idle（尚未拍照）時按了也沒有東西可以給 Gemini 看。
   CC_0910_08：標題／指令框／說明字改用 .lay-h／.lay-q／.lay-note，
   兩顆鈕改用 .gem-row，舊的 .gem-guide-open／-note／-prompt 因此移除。 */
.gem-guide { margin-top: 14px; }
.look-idle .gem-guide { display: none; }

/* 剪貼簿寫不進去時才亮的那句話 */
.gem-guide-copyfail {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #ffb4b4;
}

/* CC_0910_08｜三塊「交給 Gemini」共用的兩顆鈕與標題間距。
   ⚠️ 三塊的標題、指令框、說明字一律沿用轉機那一區既有的
      .lay-h／.lay-q／.lay-note，嚴禁另創一套——三塊要長一樣。
      這裡只補兩個排版用的小 class，不重新定義字級與顏色。 */
.gem-h { margin-top: 16px; }
.gem-row {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.gem-row > .wz-primary,
.gem-row > .wz-second {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

/* ================= CC_0910_14｜出發前規劃 階段一 =================
   摘要卡與五個抽屜。標題／說明字／兩顆鈕／指令框一律沿用既有的
   .card／.lay-h／.lay-note／.lay-q／.gem-row／.trip-line2／
   .trip-gem-label／.trip-gem-json／.trip-gem-err／.trip-req，
   這裡只補「抽屜展開收起」與「一列一筆」需要的排版。

   ⚠️ 嚴禁自創新色、新字級：以下每一條的值都逐字沿用既有規則，
      括號內註明抄自哪一條。 */

/* 抽屜整區。值同 .trip-seglist */
.plan-dr { margin-top: 14px; }

/* 抽屜的名稱列（點了才展開）。
   底色／框線／圓角同 .card；字級字重字色同 .trip-seg-main；
   內距同 .trip-seg；:active 同 .trip-seg-btn:active。 */
.plan-dr-btn {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--txt-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* CC_0921_05 A1｜箭頭改由 ::after 畫，這兩行替它讓位。
     position: relative = 箭頭的定位原點；padding-right 34px = 右邊留白，
     標題字才不會壓到箭頭上（原本 padding: 12px 14px 的右邊 14px 保留在 ::after 的 right）。 */
  position: relative;
  padding-right: 34px;
}
.plan-dr-btn:active { filter: brightness(1.2); }

/* CC_0921_05 A｜摺疊箭頭放大一倍，狀態綁 aria-expanded。
   PM 2026-09-21 實機指出：箭頭跟著按鈕字級只有 15px，看不出「可以點開」。
   ⚠️ 箭頭一律由 CSS 畫，JS 不再往 textContent 裡塞箭頭字元——
      兩邊都寫就會有一邊忘記同步，PM 手上會拿到卡在錯誤方向的箭頭。
   ⚠️ 顏色走既有 var(--txt-3)（次要灰，style.css 第 10 行既有 token），
      不自己發明色碼。 */
.plan-dr-btn::after {
  content: "\203A";                 /* › */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;                  /* 原本等同 15px，放大約一倍 */
  line-height: 1;
  color: var(--txt-3);
  transition: transform .15s ease-out;
  pointer-events: none;
}
.plan-dr-btn[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(90deg);
}
/* 會暈車的人一律不要動畫（沿用 .feed-card-flash 的既有做法）。 */
@media (prefers-reduced-motion: reduce) {
  .plan-dr-btn::after { transition: none; }
}

/* 展開後的內容。一列一筆，外觀與「這趟的機票」那一列同一套。 */
.plan-dr-body { margin: 0 0 8px; }
.plan-row {
  margin: 0 0 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
/* 逐字同 .trip-seg-main */
.plan-row-main {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-1);
}
/* 逐字同 .trip-seg-sub */
.plan-row-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* CC_0919_05｜「📺 別人怎麼玩」每一列右上角那顆 ✕。
   ⚠️ .plan-row／.plan-row-main／.plan-row-sub 三條一個值都沒動——
      「這趟的機票」「上次看過什麼」也用 .plan-row，動了會一起變。
      這裡只在 .plan-row 裡面多包一層，並新增下面四條新 class。
   ⚠️ 圖示鈕的值（44x44、透明底、無框、17px）逐字沿用既有
      .tripday-row button，不自創第二套外觀，也不把觸控尺寸縮到 44 以下。
   ⚠️ min-width: 0 ＋ word-break：標題再長也在框內自己換行，
      不會把 ✕ 擠出畫面、不會讓整頁變得可以左右滑。 */
.plan-row-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plan-row-txt {
  flex: 1 1 auto;
  min-width: 0;
}
.plan-row-txt p { word-break: break-word; overflow-wrap: anywhere; }
.plan-row-acts {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}
.plan-row-acts button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.plan-row-acts button:active { filter: brightness(1.3); }
/* 「要預約」：紅沿用站上既有紅字色 #ffb4b4（.trip-req／.trip-go-blocks 那一組）。
   「建議預約」「晚上吵」：灰沿用 .lay-note 的 var(--txt-3)。
   間距同 .trip-req 的 margin-left: 2px。 */
.plan-tag-warn { color: #ffb4b4; margin-left: 2px; }
.plan-tag { color: var(--txt-3); margin-left: 2px; }
/* 地圖連結：色與 text-decoration 逐字同 .sum-link */
.plan-link { color: var(--accent); text-decoration: none; }
.plan-link:active { filter: brightness(1.3); }
/* 「看全部 N 個」：逐字同 .trip-read-min 那一組小灰字 */
.plan-more {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--txt-3);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

/* ================= CC_0915_01｜每天的行程（殼）=====================
   分頁列 + ＋／− 加減天數 + 當天日期大字。
   ⚠️ 顏色一律沿用既有變數（--line / --txt-1 / --txt-2 / --accent），
      嚴禁寫死 hex、嚴禁自創新色。
   ⚠️ 分頁鈕的「被選中」樣式沿用既有那一套 .tabbar-on（color: var(--accent)），
      未選中用既有次要色 --txt-2。嚴禁自創新樣式組。
   ⚠️ 44px 是手指點得到的最小尺寸，不得調小。 */
.tripday-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.tripday-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  /* ⚠️ min-width:0 不可省：省了整條會把卡片撐爆 */
  min-width: 0;
}
.tripday-pm {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.tripday-pmbtn {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--txt-2);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tripday-head {
  font-size: 20px;
  margin: 0 0 10px;
}

/* 分頁鈕本體：不是新 class，是掛在 .tripday-tabs 底下的 button。
   未選中沿用既有次要色，選中沿用既有 .tabbar-on 的 accent。 */
.tripday-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: var(--txt-2);
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.tripday-tabs button.tabbar-on { color: var(--accent); }

/* ---- CC_0915_02｜每天的地點清單 ----------------------------------
   本卡只准新增 .tripday-row / .tripday-row-sub / .tripday-route
   這三個 class，以及掛在它們底下的元素選擇器。
   ⚠️ 顏色一律用既有變數（--line / --txt-2 / --accent），嚴禁寫死 hex。
   ⚠️ 圓角沿用既有 .card 的 12px，不另訂新值。
   ⚠️ 本卡沒有任何行內樣式壓寬度，寬度全部交給 flex 自己收。 */

.tripday-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tripday-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}
/* 左邊那格：地名長了自己換行，不把按鈕擠出畫面 */
.tripday-row > div:first-child {
  flex: 1 1 140px;
  min-width: 0;
}
/* 右邊那排圖示鈕整組不拆行，擠不下時整組掉到第二行 */
.tripday-row > div + div {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* 列上的圖示鈕：手指按得到（44x44），外觀交給旁邊的文字決定 */
.tripday-row button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.tripday-row button:disabled {
  color: var(--txt-3);
  cursor: default;
}

.tripday-row-sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* 兩點之間那條「查路線」 */
.tripday-route {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 4px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

/* ================= CC_0915_03｜住宿 =====================
   .stay-row 比照 CC_0915_02 的 .tripday-row 同款做法：整列 flex-wrap，
   圖示鈕 44x44（手指按得到），顏色全走既有變數，一個 hex 都沒寫死。
   ⚠️ 本卡只准新增 .stay-row / .stay-note 兩個 class，
      「沒貼地圖網址」那顆 📍 的次要色走屬性選擇器，不另開第三個 class。
   ⚠️ 上面既有的每一行都沒動。 */
.stay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stay-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}
/* 左邊那格：飯店名長了自己換行，不把按鈕擠出畫面 */
.stay-row > div:first-child {
  flex: 1 1 140px;
  min-width: 0;
}
/* 右邊那排圖示鈕整組不拆行，擠不下時整組掉到第二行 */
.stay-row > div + div {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.stay-row button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
/* 沒貼地圖網址的那顆 📍：降成次要，一眼看得出來它只是拿飯店名去搜。
   ⚠️ color 走既有 --txt-3，但彩色 emoji 不吃 color（實機與 Chromium 都一樣），
      所以再壓一層 opacity，讓「弱」在畫面上真的看得出來，
      而不是只有 devtools 裡看得到（unwired-data-must-be-grey 的精神）。 */
.stay-row button[data-weak="1"] {
  color: var(--txt-3);
  opacity: 0.45;
}

/* 住宿列上的小字，與行程頁那條「🛏 今晚住 …」共用同一款 */
.stay-note {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-2);
}

/* ================= CC_0915_05｜住宿的照片與分享 =====================
   本卡只准新增 .stay-thumb / .stay-plat 兩個 class，
   其餘（#stay-share-img 與那一條 .stay-thumb + div）都是掛在既有結構上的規則。
   顏色一律走既有變數（--line / --txt-1 / --txt-3 / --accent / --surface），
   一個 hex 都沒寫死。⚠️ 上面既有的每一行都沒動。 */

/* 住宿列左邊那張縮圖。44x44 與列上圖示鈕同一個尺寸，
   border-radius 沿用既有卡片那顆 12px。 */
.stay-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--grey-bg);
}

/* ⚠️ 既有那條 .stay-row > div:first-child（flex: 1 1 140px）在縮圖插進來之後
   就不再命中文字那格了——第一個孩子變成 <img>。
   既有那一行一個字都不准改，所以在這裡補一條同值的規則接手，
   不然掛了照片的那一列飯店名不會換行，會把按鈕擠出畫面。 */
.stay-row > .stay-thumb + div {
  flex: 1 1 140px;
  min-width: 0;
}

/* 分享框裡那三顆平台鈕。未選中走既有次要色，
   選中沿用既有 .tabbar-on（color: var(--accent)），與分頁列同一款。 */
.stay-plat {
  min-height: 44px;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--txt-3);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.stay-plat.tabbar-on { color: var(--accent); }

/* 分享框裡那張大圖。contain 而不是 cover：這是要發出去的成品，
   裁掉一半比留白更糟。 */
#stay-share-img {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--grey-bg);
}

/* ---- CC_0915_06｜住宿分享框裡的四顆口吻鈕 -------------------------
   本卡只准新增 .stay-tone 一個 class，其餘全部沿用既有。
   ⚠️ 樣式比照 CC_0915_05 的 .stay-plat（實看後沿用，不自創第二套）：
      未選中用既有次要色 --txt-3，選中沿用既有 .tabbar-on 的 --accent。
   ⚠️ 顏色一律走既有變數（--line / --txt-3 / --accent），一個 hex 都沒寫死。
   ⚠️ 44px 是手指點得到的最小尺寸，不得調小。
   ⚠️ 本卡沒有任何行內樣式壓寬度，寬度全部交給按鈕自己收。 */
.stay-tone {
  min-height: 44px;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--txt-3);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.stay-tone.tabbar-on { color: var(--accent); }

/* ---- CC_0916_02｜帳簿的期間切換三顆鈕 -----------------------------
   本卡只准新增 .ledger-seg 一個 class（卡上明令），
   其餘一律沿用既有（.card / .lay-h / .lay-note / .tripday-head /
   .trip-gem-label / .trip-req / .trip-gem-err / .unwired-note /
   .setup-input / .stay-row / .stay-note / .wz-primary / .wz-second / .wz-exit）。
   ⚠️ 樣式比照 CC_0915_05 的 .stay-plat（實看後沿用，不自創第二套）：
      未選中用既有次要色 --txt-3，選中沿用既有 .tabbar-on 的 --accent。
   ⚠️ 顏色一律走既有變數（--line / --txt-3 / --accent），一個 hex 都沒寫死。
   ⚠️ 44px 是手指點得到的最小尺寸，不得調小。
   ⚠️ 本卡沒有任何行內樣式壓寬度，寬度全部交給按鈕自己收。
   ⚠️ 上面既有的每一行都沒動。 */
.ledger-seg {
  min-height: 44px;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--txt-3);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ledger-seg.tabbar-on { color: var(--accent); }

/* ---- CC_0916_03｜設定頁「我打過的城市」的每一列 ---------------------
   本卡只准新增 .city-row 一個 class（卡上明令），
   其餘一律沿用既有（.home-h / .card / .lay-note / .unwired-note）。
   ⚠️ 版型比照 CC_0915_02 的 .tripday-row（實看後沿用，不自創第二套）：
      左邊文字自己換行，右邊圖示鈕整組不拆行。
   ⚠️ 顏色一律走既有變數（--line / --txt-1），一個 hex 都沒寫死。
   ⚠️ 圓角沿用既有 .card 的 12px，不另訂新值。
   ⚠️ 44px 是手指點得到的最小尺寸，不得調小。
   ⚠️ 本卡沒有任何行內樣式壓寬度，寬度全部交給 flex 自己收。
   ⚠️ 上面既有的每一行都沒動。 */
.city-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.city-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}
/* 左邊那格：城市名長了自己換行，不把 ✕ 擠出畫面 */
.city-row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
/* 右邊那顆 ✕ 不被壓縮 */
.city-row > div + div {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.city-row button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ================= CC_0916_04｜帳簿：Gemini 標示與收據明細 =========

   PM 實機裁示三件，這裡只負責其中兩件的長相：
   （二）收據品項明細一列四個元素，（三）Gemini 填的欄位要標出來。

   ⚠️ 本卡只准新增兩個 class：.ledger-gem-tag（那行小字）與
      .ledger-item-row（明細一列）。被標示的輸入框走 [data-gem="1"]
      屬性選擇器——那是屬性，不是第三個 class。
   ⚠️ 顏色一律走既有變數（var(--accent)／var(--txt-1)），
      本段一個 hex 都沒有寫死。
   ⚠️ 本段全部加在檔尾，既有任何一行都沒有被改動。 */

/* 「✨ Gemini 填的」那行小字。
   字級逐字沿用既有 .sum-note 的做法（12px）；色走強調色變數。 */
.ledger-gem-tag {
  margin-left: 6px;
  font-size: 12px;
  color: var(--accent);
}

/* Gemini 真的填進去的那一格，框線改成強調色。
   ⚠️ 只換顏色，寬高與內距一行未動——動了整頁會跳版。 */
[data-gem="1"] { border-color: var(--accent); }

/* 明細一列：品項名撐開、數量與小計固定寬、✕ 保持 44px 觸控尺寸。
   ⚠️ 390px 放不下時整列自己換行（flex-wrap，比照既有 .stay-row 的做法），
      嚴禁把觸控尺寸縮到 44px 以下換取一行放得下。 */
.ledger-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* 三格共用既有 .setup-input。那條是 width:100% + margin:8px 0，
   放進 flex 一列裡會互相擠爆，所以這裡改成由 flex 分配寬度。
   ⚠️ 只在這一列裡覆寫，.setup-input 本身一行未動。 */
.ledger-item-row input {
  width: auto;
  margin: 0;
  min-width: 0;
  padding: 12px 6px;
}
/* 品項名撐開剩下的寬；擠不下時它自己先換行 */
.ledger-item-row input[data-col="n"] { flex: 1 1 96px; }
/* 數量約 44px、小計約 64px（全站 box-sizing:border-box，內距已含在內） */
.ledger-item-row input[data-col="q"] { flex: 0 0 44px; }
.ledger-item-row input[data-col="s"] { flex: 0 0 64px; }
/* 數字框的上下小箭頭在 44px 裡會把數字擠到看不見，收掉。 */
.ledger-item-row input[type="number"]::-webkit-outer-spin-button,
.ledger-item-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 右邊那顆 ✕。值逐字沿用既有 .stay-row button（44×44 觸控尺寸）。 */
.ledger-item-row button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
/* 帳簿列裡那一行「看明細」。沿用站上既有的 .trip-read-min，
   只在這個位置改成靠左——它原本是整頁寬置中的樣式，擺進一列帳裡
   會置中跑到 ✏️／✕ 中間，看起來像第三顆動作鈕。
   ⚠️ 這是既有 class 在這個位置的範圍覆寫，不是第三個新 class，
      .trip-read-min 本身一行未動。 */
#ledger-rows .trip-read-min {
  width: auto;
  margin-top: 4px;
  text-align: left;
}

/* ---- CC_0916_05｜每天的行程時間軸 ----------------------------------
   本卡只准新增 .tripday-tl / .tripday-tl-hours / .tripday-tl-body
   這三個 class，以及掛在它們底下的元素選擇器。
   ⚠️ 顏色一律用既有變數（--line / --txt-3），嚴禁寫死 hex。
   ⚠️ 字級沿用既有 .lay-note 的 13px / 1.7。
   ⚠️ 每一列實際的高度由 JS 依停留分鐘現場算（element.style.minHeight），
      CSS 只定每小時那一格的 36px；高度算得出來的時機只有執行時。
   ⚠️ 本卡沒有任何行內樣式壓寬度，寬度全部交給 flex 自己收。 */

.tripday-tl {
  display: flex;
  gap: 8px;
}
.tripday-tl-hours {
  width: 42px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-3);
}
/* 每小時一格。36px 是「最小」高度：
   真正的每小時 px 由 JS 現場量完每一列才算得出來（見 sizeDayTimeline），
   這裡用 flex: 1 1 0 讓 N 格平均分掉右欄那一條的高度，
   量不到高度時（那一頁還藏著）刻度也還是擐滿整條，不會吊在半空。 */
.tripday-tl-hours p {
  margin: 0;
  flex: 1 1 0;
  min-height: 36px;
}
/* min-width: 0 不可省，否則長地名會把整條撐爆（CC_0915_01 踩過同一個坑） */
.tripday-tl-body {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: 8px;
}

/* ---- CC_0917_01｜時間軸六條修正 ------------------------------------
   本卡只准新增 .tripday-tl-bars 一個 class（中間那一欄色塊），
   其餘全部是既有 class 在檔尾的覆寫，上面既有的每一行都沒動。
   ⚠️ 顏色一律用既有變數（--accent / --line / --txt-3），嚴禁寫死 hex。
   ⚠️ 本卡沒有任何行內樣式壓寬度，也沒有任何 JS 設寬度。
   ⚠️ 覆寫寫在檔尾而不是改上面那幾行：D20 要求 style.css 只在檔尾新增、
      既有一行未改；同選擇器同權重時後面那一條贏，兩件事同時成立。 */

/* 〇、三欄一律從頂端對齊。
   預設的 align-items: stretch 會把左欄刻度拉長到跟右欄文字一樣高
   （格子還是 26px，但整欄底下多出一截空白），
   刻度欄的總高必須剛好等於「小時數 × 26」。 */
.tripday-tl {
  align-items: flex-start;
}

/* 一、刻度每一格固定 26px，不再被內容撐大。
   （CC_0916_05 原本是 flex: 1 1 0 + min-height: 36px，
     那正是「一個 30 分的地點佔掉快兩小時」的原因。） */
.tripday-tl-hours p {
  flex: 0 0 auto;
  height: 26px;
  min-height: 0;
}

/* 二、中間那一欄：色塊。寬 5px，每條色塊的位置與高度由 JS 依時間現場算
   （element.style.top／height，都是高度方向）。 */
.tripday-tl-bars {
  position: relative;
  flex: 0 0 auto;
  width: 5px;
}
.tripday-tl-bars > i {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 3px;
  background: var(--accent);
}

/* 三、右欄：每一個事件一個區塊，頂端對齊自己那條色塊。
   ⚠️ min-width: 0 不可拿掉（在上面既有那一條裡，本卡沒動它）。
   ⚠️ 區塊留在文件流裡，只靠 JS 加 marginTop 往下推（見 sizeDayBlocks）——
      絕對定位實測會讓相隔一小時的兩列文字整片疊在一起，讀不了。
   ⚠️ 容器的保底高度（刻度總高）由 JS 設 minHeight，文字更長時自己撐開。 */
.tripday-tl-body {
  position: relative;
}

/* 四、地點列上那顆「還沒掛照片」的 📤：降成次要，一眼看得出來
   按下去是先去挑照片，不是直接分享。
   值逐字沿用既有 .stay-row button[data-weak="1"]，不是新 class。 */
.tripday-row button[data-weak="1"] {
  color: var(--txt-3);
  opacity: 0.45;
}

/* ---- CC_0917_02｜時間軸重做（空白折疊）、卡片收合、分享框 -------------
   本卡只准新增 .tripday-tl-item / .tripday-tl-at / .tripday-tl-card /
   .tripday-tl-gap 四個 class（.tripday-tl 沿用既有，改其值寫在這裡覆寫）。
   其餘全部是既有 class 與 id 在檔尾的覆寫，上面既有的每一行都沒動。
   ⚠️ 顏色一律用既有變數（--accent / --line / --txt-1 / --txt-3 / --grey-bg），
      嚴禁寫死 hex。
   ⚠️ 本卡沒有任何行內樣式壓寬度，也沒有任何 JS 設寬度——
      卡片高度由 JS 設 style.height（高度方向），寬度全部交給 flex 自己收。
   ⚠️ 覆寫寫在檔尾而不是改上面那幾行：D20 要求 style.css 只在檔尾新增、
      既有一行未刪改；同選擇器同權重時後面那一條贏，兩件事同時成立。 */

/* 〇、整條改成上下排的兩欄版型。
   CC_0916_05／CC_0917_01 的三欄（刻度／色塊／文字）在這裡整組退場：
   .tripday-tl 由左右三欄改成一整條由上往下，每一列自己是一個 flex。
   ⚠️ 舊的 .tripday-tl-hours / .tripday-tl-bars 兩個 class 已無人使用
      （app.js 那一段整段重做），上面既有的那幾條規則因此變成空跑，
      不刪不改——D20 明令既有一行不得刪改。 */
.tripday-tl {
  display: block;
}

/* 一、一列＝左邊時刻 ＋ 右邊卡片。卡片頂端對齊那個時刻。 */
.tripday-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}

/* 二、左欄時刻。固定 34px，不參與伸縮——
   時刻一律 5 個字（HH:MM），寬度不需要跟著內容跑。 */
.tripday-tl-at {
  flex: 0 0 auto;
  width: 34px;
  padding-top: 9px;
  font-size: 13px;
  line-height: 1;
  color: var(--txt-3);
}

/* 三、右欄卡片。收合狀態只有一行字，高度由 JS 依停留時間現場算
   （style.height，高度方向），所以一行放不下一律截斷、**嚴禁換行**：
   換行會把這一列撐高，高度就不再等於停留時間，整條比例全毀。
   ⚠️ min-width: 0 不可省，否則長地名會把整條撐爆
      （CC_0915_01 與 CC_0916_05 踩過同一個坑）。
   ⚠️ box-sizing: border-box——JS 設的高度是含框線的完整高度。 */
.tripday-tl-card {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--txt-1);
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* 被選中那一列：只換框線顏色（框寬仍是 1px），所以高度一個像素都不會變。
   ⚠️ 走屬性選擇器，不另開第五個 class（比照既有 button[data-weak="1"]）。 */
.tripday-tl-item[data-on="1"] > .tripday-tl-card {
  border-color: var(--accent);
}

/* 四、兩個事件之間那一段空檔：一行字，**不佔比例高度**。
   這正是本卡第一條要解的病——空白折疊起來，一天才進得了一個畫面。
   ⚠️ 縮排 42px（時刻欄 34 ＋ 間距 8），讓它對齊上下兩張卡片的左緣。 */
.tripday-tl-gap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 42px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}
/* 空檔列裡那顆「查路線」：既有 .tripday-route 是整行寬的區塊鈕，
   在這一行裡要縮回原尺寸才排得下，只在本卡這個容器裡覆寫。
   ⚠️ 只動 .tripday-tl-gap 底下那一顆，別處的 .tripday-route 一律不受影響。 */
.tripday-tl-gap > .tripday-route {
  display: inline;
  width: auto;
  margin: 0;
  padding: 6px 0;
  font-size: 13px;
}
/* 紅字沿用既有 .trip-gem-err 的色，這裡只把它在這一行裡的外邊距收掉。 */
.tripday-tl-gap > .trip-gem-err {
  margin: 0;
  font-size: 13px;
}

/* 五、地點詳情彈框裡那五顆圖示。
   值逐字沿用既有 .tripday-row button（44×44 手指按得到），不是新 class——
   #place-sheet-acts 不是 .tripday-row，所以既有那條規則命中不了它。
   ⚠️ 44px 是手指點得到的最小尺寸，不得調小。 */
#place-sheet-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
#place-sheet-acts button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
#place-sheet-acts button:disabled {
  color: var(--txt-3);
  cursor: default;
}
/* 還沒掛照片那顆 📤：降成次要，一眼看得出來按下去是先去挑照片。
   值逐字沿用既有 .tripday-row button[data-weak="1"]，不是新 class。 */
#place-sheet-acts button[data-weak="1"] {
  color: var(--txt-3);
  opacity: 0.45;
}

/* CC_0924_06｜加了 🖼 變七顆：390px 寬的手機裡框內只剩 298px，
   7 × 44 = 308px 放不下，✕ 會被擠到第二行自己一顆（實測截圖）。
   做法：這一排往左右各借 8px 的框內留白（→ 314px），七顆平均分，
   每顆 ≈ 44.9px，仍然 ≥ 44px；不換行，✕ 永遠在同一排最右邊。
   ⚠️ 375px 寬的小手機會是每顆 ≈ 42.7px（寬略小於 44，高仍是 44），
      報告已揭露。 */
#place-sheet-acts {
  flex-wrap: nowrap;
  margin-left: -8px;
  margin-right: -8px;
}
#place-sheet-acts button {
  flex: 1 1 0;
  min-width: 0;
}

/* CC_0924_06｜🖼 照片區（#place-sheet-pics）。
   圖示那一排正下方、🔒 上面。高度固定：照片列一律 160px 高、左右滑，
   不讓框越拉越長。
   ⚠️ 找不到／失敗（data-empty）整塊走未接線灰（unwired-data-must-be-grey）。 */
#place-sheet-pics {
  /* CC_0925_07｜給右上角「✓ 已記住」膠囊當定位基準。 */
  position: relative;
  margin-top: 10px;
  padding: 10px 0 4px;
  border-radius: 12px;
}
#place-sheet-pics[data-empty="1"] {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  background: var(--grey-bg);
}
#place-sheet-pics .pics-name {
  margin: 0;
  color: var(--txt-1);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
#place-sheet-pics .pics-local {
  margin: 2px 0 0;
  color: var(--txt-3);
  font-size: 14px;
  line-height: 1.4;
}
#place-sheet-pics .pics-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
#place-sheet-pics .pics-img {
  flex: 0 0 auto;
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--grey-bg);
  scroll-snap-align: start;
  cursor: pointer;
}
#place-sheet-pics .pics-img.pics-first { width: 240px; }
#place-sheet-pics .pics-note {
  margin: 8px 0 0;
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.5;
}
#place-sheet-pics[data-empty="1"] .pics-note { margin: 0; }
/* CC_0925_07｜第一次找到 QID 並記住時，照片區右上角的小綠膠囊。
   絕對定位，不推擠照片、不加任何一行版面；2 秒內淡出（app.js 移除）。
   綠字沿用站上既有 #b4ffcd。 */
#place-sheet-pics .pics-saved {
  position: absolute;
  top: 8px;
  right: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(52, 199, 89, .18);
  color: #b4ffcd;
  font-size: 11px;
  line-height: 1.6;
  pointer-events: none;
  transition: opacity .4s ease-out;
}
#place-sheet-pics .pics-saved.pics-saved-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #place-sheet-pics .pics-saved { transition: none; }
}
/* CC_0925_03｜灰塊裡的「🔎 看 Google 圖片 ↗」。沿用站上次要按鈕 .world-btn-ghost，
   這裡只補位置與寬度（整條寬、44px 高，一看就是按鈕）。 */
#place-sheet-pics .pics-google {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: var(--surface);
}

/* 六、分享框裡那張照片（卡上第四件）。

   CC_0917_01 的 #place-share-img **完全沒有任何 CSS**——整份 style.css
   只有 #stay-share-img 那一條，地點那一張從來沒被接上。
   實測（390px、一張 1600×1200 的照片）：
     .wrap 的 scrollWidth 1631px vs clientWidth 390px → 整頁橫向捲動，
     而且「發到哪裡」那一排被推到 y ≈ 1447px，得捲過一整張照片才看得到。
   這就是 PM 回報的第三條與第四條的同一個根因。

   四行缺一不可（三平台分享鐵律第四條，
   docs/ai/skills/social-share-three-platforms/SKILL.md）。
   ⚠️ object-fit: contain 而不是 cover：這是要發出去的成品，
      裁掉一半比留白更糟（逐字沿用 #stay-share-img 既有那條的理由）。 */
#place-share-img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 40vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--grey-bg);
}

/* 七、住宿那張照片補上 max-width（卡上第四件明令的唯一例外：
   只補樣式，住宿那一塊的邏輯一個字都沒動）。
   既有那條有 width/max-height/object-fit，就是少了 max-width——
   width: 100% 擋得住大部分情況，但 max-width 是鐵律裡寫死的四行之一，
   一起補齊，之後照著鐵律逐條對就不會再漏。 */
#stay-share-img {
  max-width: 100%;
}

/* ================= CC_0917_03｜分享框那張照片再壓一階 =================

   PM 2026-09-17 實機（iPhone、390x844）驗收 CC_0917_02 仍不通過：
   照片還是佔掉半個畫面，「發到哪裡」那一排與三顆平台鈕被推到摺線以下。

   實測（本卡第一件，Chromium 390x844、直幅 3:4 照片＋GPS＋拍攝時間）：
     40vh 時 照片 338px → 「發到哪裡」落在 y=587
     iOS Safari 網址列在的時候，main.wrap 看得到的只有 y=76～605 這一段
     → 標題剛好壓在摺線上，三顆鈕（y 到 668）整排在畫面外
   40vh 在 iOS Safari 是對**大視窗**（844）算的，不是對真正看得到的那 529px
   算的，所以桌機量起來很寬裕、手機上卻吃掉六成可視高度。
   28vh → 照片 236px，標題回到 y≈485、三顆鈕收在 y≈566，都進得了 605 那條線。

   ⚠️ 只改 max-height 這一個數字，display／width／max-width／object-fit／
      border-radius／background 一律不動（三平台分享鐵律第四條，
      docs/ai/skills/social-share-three-platforms/SKILL.md）。
   ⚠️ 本卡不新增任何 class；既有每一行都留在原地沒刪沒改，
      這裡用同名選擇器在檔尾覆寫（後面的贏）。
   ⚠️ 住宿那一張同樣是 40vh（style.css:2361），同一個病，一起壓成 28vh。 */
#place-share-img {
  max-height: 28vh;
}
#stay-share-img {
  max-height: 28vh;
}

/* ===== CC_0917_04｜排這一天 · 交給 Gemini ==========================
   ⚠️ 本卡新增的 class 只有下面四個，全部加在檔尾，既有每一行一字未動。
   ⚠️ 顏色一律沿用既有變數（--txt-2 / --line / --accent / --surface），
      不自創新色碼。 */

/* 時間軸卡片與「還沒安排時間」那一列共用的來源小標。
   ⚠️ 刻意用 --txt-2 那個灰而不是 accent：這一列本身是使用者真的排好的
      行程（已經接上 ww_days_v1），小標只是交代它是誰排的，
      不是一格沒接線的資料，所以不走灰階「未接」那一套。
   ⚠️ inline 元素、font-size 12px，不撐高那一列（D13 逐列比對高度）。 */
.tripday-gem {
  margin-left: 6px;
  font-size: 12px;
  color: var(--txt-2);
}

/* 勾選表的一列：左邊勾選框（或「已在時間軸」），右邊兩行字。 */
.daygem-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* CC_0917_06 D｜PM 2026-09-17 實機驗收 CC_0917_04：15 個景點 ＋ 10 樣吃的
     一列 70px，整張勾選表要捲很久才看得完。本卡把列高壓到 56px 以內
     （名稱一行＋小字一行的一般狀況）：padding 10→6、margin 8→6、
     字 15px/1.6 → 14px/1.4。只動間距與字級，一個結構都沒動。
     ⚠️ 勾選框 .daygem-ck 維持 22px，觸控尺寸一格都不縮。 */
  margin: 0 0 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.daygem-row > div { flex: 1; min-width: 0; }
.daygem-row p { margin: 0; font-size: 14px; line-height: 1.4; }

/* 原生 checkbox。觸控尺寸拉到 22px 並把點擊範圍撐開，
   手指按得到（iPhone 上預設的 13px 方框按不準）。 */
.daygem-ck {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* 已經在時間軸上的那一列：不給勾選框，改一行字說明為什麼勾不了
   （required-fields-and-block-reasons 鐵律二：原因要在動作點旁邊）。 */
.daygem-in {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--txt-2);
  white-space: nowrap;
}

/* ---- CC_0918_07｜存過的解說的一列 ----------------------------------
   底色／框線／圓角／內距全部沿用 .plan-row（那一組一個字未改），
   這裡只把它排成「左邊文字、右邊一顆 🗑」。
   🗑 本身沿用既有的 .trip-seg-btn ＋ .trip-seg-del，不另外定義外觀。 */
.look-hist-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* 左半邊要吃掉剩下的寬度，長字才會換行而不是把 🗑 擠出去 */
.look-hist-main { flex: 1; min-width: 0; cursor: pointer; }
.look-hist-main .plan-row-main { white-space: pre-wrap; overflow-wrap: anywhere; }
.look-hist-row .trip-seg-del { flex: 0 0 auto; }

/* ---- CC_0918_08｜時間軸左欄改成「區間 ＋ 待 N 分」 -------------------
   本卡只新增 .tripday-tl-t / .tripday-tl-dur 兩個 class，
   另外覆寫既有 .tripday-tl-at 的寬度（34px 放不下 "10:30 — 11:30"）
   與 .tripday-tl-gap 的縮排（左欄變寬，空檔那一行要跟著走才對得齊卡片左緣）。
   ⚠️ 顏色沿用既有變數（--txt-3），嚴禁寫死 hex。
   ⚠️ 本卡沒有任何 JS 設寬度、沒有任何行內樣式壓寬度。
   ⚠️ 覆寫寫在檔尾而不是改上面那幾行：既有一行未刪改；
      同選擇器同權重時後面那一條贏，兩件事同時成立。
   ⚠️ 已知影響：左欄由一行變兩行，最短的那種列（30 分，卡片下限 36px）
      整列高度會由 36px 變成約 41px。其餘列的高度仍由卡片決定，未變。
   ⚠️ 「🗑 清掉這天的攻略」那顆鈕沒有在這裡新增任何規則：
      它走既有的 .wz-second ＋ .trip-gem-err 兩個 class。 */
.tripday-tl-at {
  width: 90px;
  line-height: 1.3;
}
.tripday-tl-t {
  display: block;
}
.tripday-tl-dur {
  display: block;
  font-size: 11px;
  color: var(--txt-3);
}
.tripday-tl-gap {
  padding-left: 98px;
}

/* ================= CC_0920_01｜路線分享圖那一塊 ==================
   按「🖼 分享圖」之後在那排鈕正下方展開的那一塊（#route-share）。
   外框走既有 .card，訊息字走既有 .lay-note，找不到的站走既有 .trip-gem-err，
   兩顆鈕走既有 .wz-primary／.wz-second——這裡只補站上沒有的兩樣東西：
   查位置的進度條，與那張圖的預覽寬度。 */

/* 進度條。站上沒有任何進度條，所以這是新的一條。
   ⚠️ 顏色一律用既有變數，不自創色碼。
   ⚠️ 只有查位置與載底圖時看得到，做完由 JS 收起來。 */
.rsh-bar {
  height: 6px;
  margin: 6px 0 10px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.rsh-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.2s linear;
}

/* 預覽圖。寬度 100%、高度自己跟著比例走。
   ⚠️ 一定要 max-width: 100%：這張圖是 1080px 寬，不壓住的話整頁會橫向捲動
      （CC_0917_01 的 #place-share-img 踩過同一個坑）。 */
.rsh-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 4px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* CC_0926_11｜可縮放的預覽：底下是畫好的 PNG（.rsh-img），手指在動時上面疊一張 canvas（.rsh-live）。
   ⚠️ touch-action: none：兩指縮放、一指拖動交給 JS，不讓 Safari 拿去捲整頁或放大整頁。
   ⚠️ 外框（間距、圓角、細框）搬到外層，img 與 canvas 疊在同一個位置，尺寸一模一樣。 */
.rsh-view {
  position: relative;
  margin: 4px 0 10px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: default;
}
.rsh-view .rsh-img { margin: 0; box-sizing: border-box; }
.rsh-live {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.rsh-live[hidden] { display: none; }

/* 右下角直排 ＋／－。每顆 44×44（iPhone 觸控最小尺寸），白底細框（layout 指定，深色模式也維持白底，
   才看得出是疊在地圖上的按鈕）。擺在「第 N／總天數 天」「WatchWorld」兩個框的上面，不蓋住它們。 */
.rsh-zoom {
  position: absolute;
  right: 8px;
  bottom: 17%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rsh-zoom button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #fff;
  color: #111;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.rsh-zoom button:active { filter: brightness(0.9); }

/* 一排兩顆：自動框回（次要）｜分享這個畫面（主要），兩欄等寬。
   CC_0926_13｜T1｜這一排搬到灰字正下方、第一張圖上方（#61），樣式一字未動。 */
.rsh-acts {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}
.rsh-acts[hidden] { display: none; }
.rsh-acts .wz-second,
.rsh-acts .wz-primary { flex: 1 1 50%; min-width: 0; margin: 0; white-space: nowrap; }
.rsh-acts .wz-primary[hidden] { display: none; }
.rsh-acts .wz-primary[aria-disabled="true"] { opacity: 0.6; }

/* CC_0920_01｜那一排鈕變成三顆（🗺 路線 ↗／🖼 分享圖／▶ YouTube ↗）之後，
   390px 的手機上每顆只剩約 104px，用原本的 16px 字會折成兩行，
   整列高度多一倍——UI 不准越做越長。
   所以**只有三顆並排時**把字級與左右內距收一點，讓每顆都是一行。
   ⚠️ 只有兩顆或一顆時完全不套用（:nth-last-child(3) 命中不了），
      CC_0919_08 那個兩顆並排的樣子一個像素都沒變。
   ⚠️ 上下內距 13px 不動：按鈕高度（手指按得到的尺寸）不縮。
   ⚠️ 既有的 .wz-second 本體一個字都沒改。 */
.gem-row > .wz-second:first-child:nth-last-child(3),
.gem-row > .wz-second:first-child:nth-last-child(3) ~ .wz-second {
  font-size: 14px;
  padding: 13px 4px;
}

/* ================= CC_0920_03｜時間軸上那一列「移動」 ==================
   兩站相距 ≥3 公里時，原本那一行「↓ 查路線 · 空 N 分」換成這一塊。
   ⚠️ 本卡只新增 .tripday-move / .tripday-move-head / .tripday-move-edit
      三個 class，以及掛在它們底下的元素選擇器。上面既有的每一行都沒動。
   ⚠️ 顏色一律用既有變數（--grey-bg / --line / --txt-1），嚴禁寫死 hex。
   ⚠️ 灰底 ＋ 虛線框：一眼看得出它不是景點卡片
      （景點卡片 .tripday-tl-card 是實線框、沒有底色）。
   ⚠️ 這一塊**不縮排**（與既有 .tripday-tl-gap 的 98px 不同）：
      實測 390px 的 iPhone 上，縮排 98px 只剩約 260px，
      「🚆 米蘭 → 維羅納 · 約 2 小時」加上右邊 44px 的 ✏️ 會折成兩行，
      整列高度多一倍——UI 不准越做越長。整條打橫剛好一行。
      左邊沒有時刻、整條打橫、灰底虛線框，三件事加起來一眼看得出
      它是「兩張卡片之間的一段路」，不是又一張景點卡片。
   ⚠️ 覆寫寫在檔尾而不是改上面那幾行：既有一行未刪改。 */
.tripday-move {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--grey-bg);
  color: var(--txt-1);
  font-size: 13px;
  line-height: 1.5;
}
/* 第一行：左邊那句話 ＋ 靠右的 ✏️ */
.tripday-move-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 那句話吃掉剩下的寬度，✏️ 才會貼在右邊；長城市名自己換行不把鈕擠出去 */
.tripday-move-head > span {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
/* ✏️：尺寸與外觀逐字沿用既有 .tripday-row button（44×44 手指按得到），
   不新增第二種圖示鈕的長相。 */
.tripday-move-head > button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
/* 「🚆 查車次 ↗」：按鈕就要有按鈕的樣子，走既有 .wz-second，
   這裡只把它在這一塊裡的外邊距收乾淨，並把字級對齊這一塊。 */
.tripday-move > .wz-second {
  margin: 8px 0 0;
  padding: 11px 8px;
  font-size: 14px;
}
/* 「⚠️ 移動時間不夠」：紅字沿用既有 .trip-gem-err，只收掉外邊距。 */
.tripday-move > .trip-gem-err {
  margin: 6px 0 0;
  font-size: 13px;
}
/* ✏️ 按下去就地展開的那一格。收著時 hidden，不佔任何高度。 */
.tripday-move-edit {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.tripday-move-edit > .lay-note {
  margin: 2px 0 0;
}

/* ================= 世界導覽・編輯／刪除（CC_0921_02）=================
   只有白名單登入者看得到的東西，全部收在這一段。
   兩件事必須同時成立，缺一不可：
     (1) 鈕要有鈕的樣子（圓角外框、看得出可以按），不得只是一段藍字連結
     (2) 不得把卡片變長變深——兩顆鈕跟「📍地點 ・ 日期」擠在同一行，
         不新增一整列（任務卡 A3、A4）

   ⚠️ 44×44 是怎麼做到又不把那一行撐高的：
      視覺上的鈕只有 28px 高，可點面積靠 ::after 那一層透明的覆蓋層撐到
      44×44 邏輯點（iOS Human Interface Guidelines 的最小觸控目標）。
      改成直接把 min-height 設成 44px 也行，但那樣「地點那一行」會從
      18px 變成 44px，整頁 49 篇就多出一千多像素——正是 A4 要擋的事。 */

/* 地點那一行變成 flex：左邊文字自己伸縮，右邊兩顆鈕固定不縮。 */
.feed-where-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feed-where-row .feed-where {
  flex: 1 1 auto;
  min-width: 0;          /* 沒有這一條，長地點名會把右邊兩顆鈕擠出畫面 */
}
.feed-acts {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.feed-act {
  position: relative;    /* ::after 的可點覆蓋層以此為基準 */
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.4;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* 可點面積補到 44×44（視覺尺寸不變）。透明、不攔別人的點擊、不畫任何東西。 */
.feed-act::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 44px;
  height: 44px;
}
.feed-act-del { color: #ff8a80; border-color: #5a2a28; }
.feed-act:disabled { opacity: .5; cursor: default; }

/* ---- 儲存成功之後那一下「魔法特效」----------------------------------
   PM 規矩：按下按鈕後畫面上被改到的地方要跳過去，而且要看得出來是它變了。
   跳過去由 app.js 的 scrollToFeedList() 負責，這裡只負責「看得出來」。
   ⚠️ 1.2 秒就收乾淨，不留殘影、不改變版面高度（只動 box-shadow 與底色）。 */
@keyframes feedFlash {
  0%   { box-shadow: 0 0 0 0 rgba(47, 109, 246, .0);  background: transparent; }
  15%  { box-shadow: 0 0 0 3px rgba(47, 109, 246, .55); background: rgba(47, 109, 246, .10); }
  100% { box-shadow: 0 0 0 0 rgba(47, 109, 246, .0);  background: transparent; }
}
.feed-card-flash {
  border-radius: 12px;
  animation: feedFlash 1.2s ease-out 1;
}
/* 會暈車的人一律不要動畫，只留一下靜態底色。 */
@media (prefers-reduced-motion: reduce) {
  .feed-card-flash { animation: none; background: rgba(47, 109, 246, .10); }
}

/* ---- CC_0921_05 B｜「✓ 把勾的加進這一天」之後那一下魔法特效 ------------
   PM 規矩：按下按鈕後畫面上被改到的地方要跳過去，而且要看得出來是它變了。
   跳過去由 app.js renderDayTimeline 裡的 scrollIntoView 負責（既有寫法），
   這裡只負責「看得出來」：金色外框 ＋ 一顆星星 ＋ 一根魔杖，1.6 秒收乾淨。

   ★ 鐵律：時間軸每一列的高度＝停留時間（.tripday-tl-card 的 style.height
     由 JS 現場算），所以特效只准動 box-shadow／background、
     以及絕對定位的偽元素。
     嚴禁動 border-width／padding／margin／height，
     也嚴禁在 .tripday-tl-card 上動 transform。
   ★ .tripday-tl-card 有 overflow: hidden，自己的 box-shadow 不會被自己裁掉，
     但星星會被裁掉，所以星星一律掛在 .tripday-tl-item 上。
   ★ .tripday-tl-item 是 flex container，偽元素本來會變成 flex item，
     這裡兩顆都是 position: absolute → 不參與 flex 排版，版面零位移。 */
@keyframes tlMagicRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,212,107,0);   background: transparent; }
  18%  { box-shadow: 0 0 0 3px rgba(255,212,107,.65); background: rgba(255,212,107,.12); }
  100% { box-shadow: 0 0 0 0 rgba(255,212,107,0);   background: transparent; }
}
@keyframes tlMagicStar {
  0%   { opacity: 0; transform: scale(.7) rotate(-8deg); }
  25%  { opacity: 1; transform: scale(1.06) rotate(0deg); }
  70%  { opacity: 1; transform: scale(1) rotate(3deg); }
  100% { opacity: 0; transform: scale(1.1) rotate(6deg); }
}
.tripday-tl-item.tl-magic { position: relative; }
.tripday-tl-item.tl-magic > .tripday-tl-card {
  animation: tlMagicRing 1.6s ease-out 1;
}
.tripday-tl-item.tl-magic::after {
  content: "\2728";                 /* ✨ */
  position: absolute; right: -2px; top: -9px;
  font-size: 16px; pointer-events: none;
  animation: tlMagicStar 1.6s ease-out 1;
}
.tripday-tl-item.tl-magic::before {
  content: "\1FA84";                /* 🪄 */
  position: absolute; left: 30px; bottom: -8px;
  font-size: 14px; pointer-events: none;
  animation: tlMagicStar 1.6s ease-out 1;
}
/* 會暈車的人一律不要動畫，只留一下靜態底色與兩顆不動的符號。 */
@media (prefers-reduced-motion: reduce) {
  .tripday-tl-item.tl-magic > .tripday-tl-card {
    animation: none; background: rgba(255,212,107,.12);
  }
  .tripday-tl-item.tl-magic::after,
  .tripday-tl-item.tl-magic::before { animation: none; opacity: 1; }
}

/* ---- 兩個覆蓋層 ------------------------------------------------------
   position: fixed 在這裡是允許的：D2-4 那條「嚴禁 fixed」講的是底部分頁列，
   不是對話框。對話框本來就必須蓋在所有東西上面。 */
.world-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .72);
  padding: 0;
}
.world-sheet-center {
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.world-sheet-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: var(--bg);
}
.world-sheet-card-sm {
  flex: 0 0 auto;
  max-width: 360px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.world-sheet-hd {
  flex: 0 0 auto;
  padding: 18px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.world-sheet-h { margin: 0; font-size: 18px; }
.world-sheet-hint { margin: 6px 0 0; font-size: 12px; color: var(--txt-3); }

/* 中間自己捲，上面的標題與下面的兩顆鈕永遠看得到（任務卡 B1「底部固定兩顆」）。 */
.world-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 18px;
  /* 內部也是 flex：導覽文那一格要把剩下的高度吃掉，
     不要在畫面中間留一大塊空白（手機上看起來像畫到一半）。 */
  display: flex;
  flex-direction: column;
}
.world-sheet-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.world-btn {
  flex: 1 1 0;
  min-height: 44px;      /* 這裡是主要動作，44 給好給滿 */
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.world-btn:disabled { opacity: .5; cursor: default; }
.world-btn-main   { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.world-btn-ghost  { border: 1px solid var(--line);   background: transparent;  color: var(--txt-2); }
.world-btn-danger { border: 1px solid #b3423c;       background: #b3423c;      color: #fff; }

.world-f-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--txt-2);
}
.world-f-label:first-child { margin-top: 0; }
/* 紅星：必填的唯一記號。掛了星就一定擋得下來，擋得下來就一定掛星。 */
.world-req { color: #ff5a4e; margin-left: 3px; }
.world-f-input,
.world-f-area {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--txt-1);
  font-size: 15px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.world-f-area { flex: 1 1 auto; min-height: 180px; line-height: 1.8; resize: vertical; }
.world-f-input:focus,
.world-f-area:focus { outline: none; border-color: var(--accent); }
/* 被擋下來的那一個欄位自己亮紅框，使用者不必猜是哪一格空著 */
.world-f-bad { border-color: #ff5a4e; }

/* ---- CC_0921_03｜加進世界導覽：覆蓋層最上面那張照片 ------------------
   本機預覽，這一刻還沒有上傳。刻意壓成一條矮帶（最高 180px）：
   照片佔滿整個畫面的話，下面三個要填的欄位全被推到摺線以下，
   使用者以為這張卡只有一張圖（UI 不得越做越長）。 */
.world-add-photo {
  flex: 0 0 auto;
  margin: 0 0 4px;
}
.world-add-thumb {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--grey-bg);
}
/* 檔案大小走灰字：它是附註，不是內容。 */
.world-add-size {
  margin: 6px 0 0;
  color: var(--txt-3);
  font-size: 12px;
  line-height: 1.5;
}

.world-f-note {
  flex: 0 0 auto;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--grey-bg);
  color: var(--txt-3);
  font-size: 12px;
  line-height: 1.5;
}

/* 錯誤／擋下來的原因就講在動作點上面，不彈系統視窗
   （required-fields-and-block-reasons）。 */
.world-sheet-msg {
  margin: 12px 0 0;
  color: #ff8a80;
  font-size: 13px;
  line-height: 1.6;
}
.world-del-sub  { margin: 8px 0 0; color: var(--txt-2); font-size: 14px; line-height: 1.6; }
.world-del-what { margin: 10px 0 0; color: var(--txt-3); font-size: 13px; line-height: 1.5; }

/* 剛刪掉的那一篇，在原地留一行灰字三秒。
   ⚠️ 走未接線灰（unwired-data-must-be-grey 的同一套視覺語彙）：
      它不是內容，是一句「這裡剛才少掉一篇」的說明。 */
.feed-gone {
  margin: 20px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--grey-bg);
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- CC_0921_08｜A3｜「還沒安排時間」那一區也要亮同一下魔法特效 --------
   PM 2026-09-21 22:09 實機：新加的那一筆沒有時間，落到這一區，
   而上面 CC_0921_05 那一條選擇器寫死在 .tripday-tl-item 上，套不到
   這一區的 .tripday-row，按了藍鈕看起來完全沒反應。

   ★ 既有 .tripday-tl-item.tl-magic 那幾條一個字都沒動，
     keyframes 也共用同兩支（tlMagicRing／tlMagicStar），不複製第二份動畫。
   ★ 這一區的列會換行、高度不綁停留時間，所以動畫直接掛在列本身，
     不需要像時間軸那樣另外找一個內層來掛。
   ★ 仍然只動 box-shadow／background 與兩個 position: absolute 的偽元素：
     版面高度一個像素都不會變，列也不會跳動。
   ★ .tripday-row 是 flex container，偽元素本來會變成 flex item，
     兩顆都是 position: absolute → 不參與 flex 排版，版面零位移。 */
.tripday-row.tl-magic {
  position: relative;
  animation: tlMagicRing 1.6s ease-out 1;
}
.tripday-row.tl-magic::after {
  content: "\2728";                 /* ✨ */
  position: absolute; right: -2px; top: -9px;
  font-size: 16px; pointer-events: none;
  animation: tlMagicStar 1.6s ease-out 1;
}
.tripday-row.tl-magic::before {
  content: "\1FA84";                /* 🪄 */
  position: absolute; left: 30px; bottom: -8px;
  font-size: 14px; pointer-events: none;
  animation: tlMagicStar 1.6s ease-out 1;
}
/* 會暈車的人一律不要動畫，只留一下靜態底色與兩顆不動的符號。 */
@media (prefers-reduced-motion: reduce) {
  .tripday-row.tl-magic {
    animation: none; background: rgba(255,212,107,.12);
  }
  .tripday-row.tl-magic::after,
  .tripday-row.tl-magic::before { animation: none; opacity: 1; }
}

/* ---- CC_0923_02｜「📍 今天去哪」那一行 ---------------------------------
   ★ 外框沿用既有 .tripday-row（邊框、圓角、44px 圖示鈕），這裡只補三件事：
     1. 收合時只佔一行：文字不折行，太長就用「…」收尾（390px 手機也一行）
     2. 沒填時的灰字（寫出程式會用什麼）用既有 --txt-3，不寫死 hex
     3. 展開後的輸入框與上面那一行留一點距離
     （「取消」「存起來」兩顆並排走既有 .gem-row，不另開新樣式）
   ★ 既有 .tripday-row 那幾條一個字都沒動。 */
.daydest-row { flex-wrap: nowrap; }
.daydest-row > div:first-child { flex: 1 1 auto; }
.tripday-row p.daydest-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.daydest-val { margin-left: 10px; }
.daydest-none { color: var(--txt-3); }
.daydest-edit { margin-top: 8px; }

/* ---- CC_0924_05｜排這一天 · 交給 Gemini：填空題 ---------------------------
   一段句子寫在同一塊卡片裡（不要一欄一個大框、不要越做越長）。
   底線三種顏色：
     一般底線 ＝ 從現有資料自動帶入（--txt-2 實線）
     淡色底線 ＝ 從「我的預設」帶入（--txt-3 虛線）
     琥珀底線 ＝ 這一天自己改過（#EC9F3E）
   空的格子：灰字＋點狀底線（未填，不是假值）。
   ⚠️ 閃一下沿用既有 .feed-card-flash，不另做第二套。 */
.dgf-card {
  margin: 0 0 12px;
  padding: 10px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.dgf-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.dgf-hd-t {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}
/* 右上「⋯」：圓形小按鈕，看得出是按鈕。 */
.dgf-more {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--txt-1);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dgf-body { font-size: 15px; line-height: 2.1; color: var(--txt-1); }
.dgf-line { margin: 0; }
/* 可以點的那一格：長得像字，但有底線、點得到（最小高度 30，行高 2.1 裡夠按）。 */
.dgf-f {
  display: inline;
  margin: 0 2px;
  padding: 2px 2px 1px;
  border: 0;
  border-bottom: 2px solid var(--txt-2);
  border-radius: 0;
  background: transparent;
  color: var(--txt-1);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dgf-f.dgf-auto { border-bottom-color: var(--txt-2); }
.dgf-f.dgf-def  { border-bottom: 2px dashed var(--txt-3); color: var(--txt-2); }
.dgf-f.dgf-own  { border-bottom-color: #EC9F3E; }
.dgf-f.dgf-empty { color: var(--txt-3); border-bottom-style: dotted; border-bottom-color: var(--txt-3); }
.dgf-f.dgf-empty.dgf-own { border-bottom-color: #EC9F3E; }
.dgf-caret { margin-left: 3px; font-size: 12px; color: var(--txt-3); }
/* 點了之後原地變成的輸入框。 */
.dgf-in {
  max-width: 100%;
  margin: 0 2px;
  padding: 2px 6px;
  border: 1px solid #EC9F3E;
  border-radius: 6px;
  background: var(--surface);
  color: var(--txt-1);
  font: inherit;
  font-size: 16px;   /* 16 以下 iOS 會自己放大整頁 */
  line-height: 1.4;
}
/* 🔒 已排好：灰字、不能點。 */
.dgf-done {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-3);
}
/* 「程式用的格式（不能改） ›」（CC_0926_03 前叫「Gemini 規則（不用改）」）：一整列點得到的灰字列。 */
.dgf-rules-btn {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px 0 2px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--txt-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dgf-rules {
  max-height: 240px;
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--grey-bg);
  color: var(--txt-3);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
#daygem-fill-msg { margin: 6px 0 0; }
#daygem-fill-msg.dgf-ok { color: var(--txt-2); }

/* ---- CC_0924_05｜底部選單（iOS action sheet） ------------------------------
   從底部出來：上面一組選項、下面一顆獨立的「取消」。
   position: fixed 是對話框，不是底部分頁列（D2-4 講的是分頁列）。 */
.dg-sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, .55);
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
}
.dg-sheet-wrap {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dg-sheet-grp {
  min-height: 0;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--surface);
}
.dg-sheet-h {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.dg-sheet-body { display: flex; flex-direction: column; }
.dg-sheet-item {
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dg-sheet-item:last-child { border-bottom: 0; }
.dg-sheet-item-on { font-weight: 600; }
.dg-sheet-cancel {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dg-sheet-note {
  margin: 12px 16px 4px;
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.6;
}
.dg-sheet-body > .trip-gem-json { width: auto; margin: 6px 16px 0; }
.dg-sheet-body > .trip-gem-err { margin: 8px 16px 0; }
.dg-apply-list { display: flex; flex-direction: column; }
.dg-apply-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--txt-1);
  font-size: 15px;
  cursor: pointer;
}
.dg-apply-row input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
/* 選單裡的主動作（套用 N 天／還原填空）：實心藍鈕。 */
.dg-sheet-go {
  margin: 10px 16px 14px;
  min-height: 46px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dg-sheet-go:disabled { opacity: .45; cursor: default; }
/* 「套用 N 天」那一段黏在選單底部（清單自己在上面捲）。 */
.dg-sheet-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.dg-sheet-foot > .trip-gem-err { margin: 8px 16px 0; }
/* CC_0926_04｜A｜「自己輸入…」小輸入框：框內「取消｜確定」兩顆並排（iPhone 對話框樣式），
   底下那顆獨立「取消」藏起來，避免兩顆取消。 */
.dg-sheet.dg-sheet-num .dg-sheet-cancel { display: none; }
.dg-sheet-body > .dg-num-in {
  width: auto;
  margin: 4px 16px 0;
  font-size: 20px;
  text-align: center;
}
.dg-num-foot {
  display: flex;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.dg-num-btn {
  flex: 1 1 0;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dg-num-btn + .dg-num-btn { border-left: 1px solid var(--line); }
.dg-num-ok { font-weight: 600; }
/* 點完一格之後重畫，焦點框不要留一個藍框在字上。鍵盤操作時才畫。 */
.dgf-f:focus { outline: none; }
.dgf-f:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* CC_0925_07｜🔗 補維基條目整條拿掉（PM 裁示 A），它的檢查清單樣式（.wiki-*）一起刪。 */


/* ================= CC_0925_06｜首頁 iPhone 彩色圖示＋翻譯面板 =================
   ⚠️ 本區只服務首頁（#tab-home）與「翻譯」面板（#tr-sheet），其他頁一個像素都不動。
   ⚠️ 機票頁那條 Google Flights 仍是 .tool-cell，不在本區。 */

/* ---- 首頁背景：藍 → 灰藍 → 綠。只有首頁顯示時才換，切走就回 --bg。
   body 本來就鎖一個螢幕高（.wrap 自己捲），所以漸層是滿版、不受 .wrap 640px 限制。 */
body:has(#tab-home:not([hidden])) {
  background: linear-gradient(180deg, #3d6fb8 0%, #6f93c4 38%, #8aa2b4 68%, #6f8a5a 100%);
}
#tab-home .home-h,
#tab-home .home-intro,
#tab-home .home-hint,
#tab-home .tool-note {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---- 一格：上面 58×58 彩色方塊、下面名字 */
.hi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.hi-ico {
  --c1: #8e8e93;
  --c2: #636366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px rgba(0, 0, 0, .22);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.hi-cell:active .hi-ico { transform: scale(.92); transition-duration: .08s; }
.hi-name {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.hi-plane  { --c1: #4fb0ff; --c2: #0a6cff; }
.hi-hotel  { --c1: #3f6fd8; --c2: #1a3a9c; }
.hi-bnb    { --c1: #ff7a7e; --c2: #ff385c; }
.hi-mymap  { --c1: #5fe07c; --c2: #1fae4b; }
.hi-food   { --c1: #ffb340; --c2: #ff7a00; }
.hi-wc     { --c1: #5ad4e6; --c2: #1b9bb5; }
.hi-nav    { --c1: #ffffff; --c2: #e6e8ee; color: #0a6cff; }
.hi-live   { --c1: #c77dff; --c2: #5e5ce6; }
.hi-tr     { --c1: #4aa8ff; --c2: #1560e0; }
.hi-menu   { --c1: #ffe066; --c2: #ffb800; color: #6b4a00; }
.hi-ledger { --c1: #4cd97b; --c2: #16a34a; }
/* CC_0930_01｜賽車／世界導覽／猜謎 */
.hi-kart   { --c1: #ff8a6b; --c2: #e8390c; }
/* CC_1001_01｜城邦時代 */
.hi-empire { --c1: #d9a441; --c2: #8a4b14; }
.hi-world  { --c1: #5be3a4; --c2: #0e9f9a; }
.hi-quiz   { --c1: #ffd166; --c2: #f08c00; color: #5a3a00; }
#home-to-quiz { position: relative; }
.hi-badge {
  position: absolute; top: -6px; right: 50%; margin-right: -38px;
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* 未接（躲一下）：半透明灰方塊、圖示與字都灰、真的按不下去（unwired-data-must-be-grey）。 */
.hi-off { cursor: default; pointer-events: none; }
.hi-off .hi-ico {
  background: rgba(120, 124, 132, .45);
  color: rgba(235, 235, 240, .55);
  box-shadow: none;
}
.hi-off .hi-name { color: rgba(235, 235, 240, .6); text-shadow: none; }
.hi-off-note {
  margin-top: -4px;
  font-size: 10px;
  line-height: 1.2;
  color: rgba(235, 235, 240, .6);
}

/* ---- 「翻譯」面板：從底部滑出，深色玻璃。行為仿 #dg-sheet（點背景或 ✕ 關）。
   position: fixed 是對話框，不是底部分頁列（D2-4 講的是分頁列）。 */
.tr-sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, .45);
  animation: tr-fade .22s ease-out;
}
.tr-sheet-panel {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: rgba(22, 26, 34, .85);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .35);
  animation: tr-up .32s cubic-bezier(.2, .9, .3, 1);
}
@keyframes tr-fade { from { background: rgba(0, 0, 0, 0); } }
@keyframes tr-up { from { transform: translateY(100%); } }
.tr-sheet-grip {
  width: 38px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
}
.tr-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}
.tr-sheet-h { margin: 0; font-size: 20px; font-weight: 700; color: #fff; }
.tr-sheet-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.tr-row:active { background: rgba(255, 255, 255, .14); }
/* 第 3 列是旁路，不搶主角：虛線框、透明底 */
.tr-row-side { margin: 0; border: 1px dashed rgba(255, 255, 255, .3); background: transparent; }
.tr-ico { width: 46px; height: 46px; border-radius: 12px; }
.hi-cam  { --c1: #f2f3f5; --c2: #b9bcc4; color: #2b2f38; }
.hi-talk { --c1: #4aa8ff; --c2: #5e5ce6; }
.tr-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.tr-d { font-size: 13px; line-height: 1.45; color: rgba(235, 235, 245, .6); }
.tr-chev { flex: 0 0 auto; font-size: 22px; line-height: 1; color: rgba(235, 235, 245, .35); }
/* 頁首副標原本是灰字，在淺藍底上看不清楚：只有首頁顯示時改白。 */
body:has(#tab-home:not([hidden])) .hd-sub {
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ================= CC_0926_01｜地名標籤：大字中文、小字原名 =================
   app.js 的 zhNode 產生：
     <span class="zh"><span class="zh-big">伊莉絲別墅</span><span class="zh-small">Villa Elise</span></span>
   ★ 大字＝中文，沿用外層的字級與顏色（一個像素都不另外設）。
   ★ 小字＝原名：灰（既有 var(--txt-3)）、小一號，同一行接在大字後面。
   ★ .zh-block：小字另起一行（詳情框標題、照片區標題）。
   ★ 沒翻好要看得出來（D2-2）：原文灰字＋「翻譯中…」或「未翻譯」。
   ⚠️ 時間軸那一列（.tripday-tl-card）是 nowrap＋ellipsis，這裡全部是 inline，
      不會讓那一列換行、也不會改變它的高度。
   ⚠️ 閃一下沿用既有 .feed-card-flash（翻好換成中文的那一刻）。 */
.zh-small {
  margin-left: .35em;
  font-size: .82em;
  font-weight: normal;
  color: var(--txt-3);
}
.zh-block > .zh-small {
  display: block;
  margin-left: 0;
}
.zh-grey { color: var(--txt-3); }
.zh-note {
  margin-left: .35em;
  font-size: .82em;
  font-weight: normal;
  color: var(--txt-3);
}
/* 56px 的旅程縮圖放不下兩行：只留中文大字。 */
.zh-tight > .zh-small,
.zh-tight > .zh-note { display: none; }

/* ================= CC_0926_02｜D｜時間軸原名換到第二行 =================
   PM 已核可 layout：
     1. 拉努伊聖約翰小教堂                      ← .tl-l1：序號＋中文大字，太長照舊 … 截斷
        San Giovanni in Ranui 小教堂           ← .tl-l2：原名灰色小字，完整顯示、可以折行
   吃飯站：.tl-l1＝序號＋餐別圖示＋菜名；.tl-l2＝店中文 · 店原文。
   ★ 卡片高度仍由 JS 依停留分鐘數算，但改成 min-height：第二行放不下時卡片往下長，
     整條是由上往下排的 flex，往下長只會把下一張推下去，不會蓋住、不會把字切掉。
   ★ .tl-l2 沒東西可印（原名與中文相同、還沒翻好）時是空的 → :empty 藏起來，不佔高度。
   ⚠️ 只套在 .tripday-tl-card2（地點卡）；機票那一列 .tripday-tl-card 照舊一行。 */
.tripday-tl-card.tripday-tl-card2 {
  white-space: normal;
  overflow: hidden;
}
.tl-l1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tl-l2 {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--txt-3);
  white-space: normal;
  overflow-wrap: anywhere;
}
.tl-l2:empty { display: none; }
.tl-l2 > .zh-big { color: var(--txt-3); }

/* ================= CC_0926_03｜玩法一列＋玩法底部卡片＋排這一天的「要排的內容」 =================
   ⚠️ 底部卡片沿用 #dg-sheet（遮罩、位置、點遮罩就關）；.dg-sheet-pp 只換頂部那一列、
      藏掉最下面那顆獨立的「取消」，滑上來的動畫沿用 #tr-sheet 的 tr-up／tr-fade。
   ⚠️ 閃一下沿用 .feed-card-flash，不另做第二套。 */

/* iPhone 設定頁那種一列：左標題、右邊灰字值、最右 ›。整列是一顆按鈕。 */
.pp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--txt-1);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pp-row:active { filter: brightness(1.2); }
.pp-row-t { flex: 0 0 auto; font-weight: 600; }
.pp-row-v {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  color: var(--txt-2);
}
.pp-row-v.pp-row-none { color: var(--txt-3); }
.pp-row-chev { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--txt-3); }
#plan-play { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* 玩法底部卡片 */
.dg-sheet.dg-sheet-pp { animation: tr-fade .22s ease-out; }
.dg-sheet.dg-sheet-pp .dg-sheet-wrap { animation: tr-up .32s cubic-bezier(.2, .9, .3, 1); }
.dg-sheet.dg-sheet-pp .dg-sheet-h,
.dg-sheet.dg-sheet-pp .dg-sheet-cancel { display: none; }
.pp-top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.pp-top-t {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--txt-1);
}
.pp-top-btn {
  flex: 0 0 64px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pp-top-btn.pp-top-done { font-weight: 700; text-align: right; }
.pp-body { padding: 12px 16px 16px; }
.pp-body .lay-q { width: 100%; box-sizing: border-box; font-size: 16px; }

/* 排這一天：玩法一列＋要排的內容 */
.dgo { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.dgo-play { min-height: 44px; }
.dgo-sub { margin: 4px 2px 8px; font-size: 12.5px; line-height: 1.5; color: var(--txt-3); }
.dgo-h { margin: 6px 0 2px; font-size: 13px; color: var(--txt-2); }
.dgo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  min-height: 40px;
  font-size: 15px;
  color: var(--txt-1);
}
.dgo-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.dgo-chk input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.dgo-chk.dgo-lock { cursor: default; }
.dgo-num-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--txt-2); }
/* 數字是按鈕：外框＋▾，看得出點得下去。 */
.dgo-num {
  min-width: 44px;
  min-height: 32px;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dgo-num::after { content: ' ▾'; font-size: 11px; }

/* ================= CC_0926_15｜住宿 ✏️ 修改框的照片列 =====================
   左邊縮圖（沿用 .stay-thumb 44x44），右邊直排兩顆（沿用 .wz-second／.wz-danger）。
   ⚠️ 只新增 .stay-ph-row / .stay-ph-btns / .stay-magic 三個 class，
      上面既有的每一行都沒動；顏色一律沿用既有變數與既有特效色碼。 */
.stay-ph-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.stay-ph-btns {
  flex: 1 1 auto;
  min-width: 0;
}
.stay-ph-btns > button { margin: 4px 0; }

/* 存好之後那一列亮一下、縮圖跟著亮（色碼與節奏沿用 feedFlash）。
   ⚠️ 只動 box-shadow 與底色，不改版面高度，1.2 秒收乾淨。 */
.stay-row.stay-magic {
  animation: feedFlash 1.2s ease-out 1;
}
.stay-row.stay-magic > .stay-thumb {
  animation: stayThumbMagic 1.2s ease-out 1;
}
@keyframes stayThumbMagic {
  0%   { box-shadow: 0 0 0 0 rgba(255,212,107,0); }
  20%  { box-shadow: 0 0 0 4px rgba(255,212,107,.8); }
  100% { box-shadow: 0 0 0 0 rgba(255,212,107,0); }
}
/* 系統「減少動態」：不播動畫，直接給一下靜態底色。 */
@media (prefers-reduced-motion: reduce) {
  .stay-row.stay-magic { animation: none; background: rgba(47, 109, 246, .10); }
  .stay-row.stay-magic > .stay-thumb { animation: none; box-shadow: 0 0 0 3px rgba(255,212,107,.8); }
}

/* ---- CC_0926_16｜時間軸長按拖曳：兩站交換 ------------------------------
   .tl-lift  ＝ 拿起來那一列（位移由 JS 寫在 .tripday-tl-item 的 transform，
               放大＋微斜寫在卡片上，兩個 transform 才不會互蓋）
   .tl-drop  ＝ 手指經過、放手就跟它交換的那一站（綠色虛線框）
   .tl-back  ＝ 放在別處，滑回原位
   .tl-shake ＝ 長按鎖住的站，左右抖一下
   ⚠️ 全部只動 transform／outline／box-shadow，版面高度一個像素都不變
      （每一列高度＝停留時間，由 JS 算）。 */
.tripday-tl-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.tripday-tl-item.tl-lift {
  position: relative;
  z-index: 20;
}
/* 拿起來那一列的時刻先藏起來（拖到別站上會跟對方的時刻疊在一起），
   卡片微透明，底下那一站的綠框才看得到。 */
.tripday-tl-item.tl-lift > .tripday-tl-at { visibility: hidden; }
.tripday-tl-item.tl-lift > .tripday-tl-card {
  opacity: .88;
  transform: scale(1.04) rotate(-1.5deg);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 10px 24px rgba(0, 0, 0, .45);
  background: var(--surface);
  transition: transform .12s ease-out;
}
.tripday-tl-item.tl-drop > .tripday-tl-card {
  outline: 2px dashed #34c759;
  outline-offset: 2px;
  background: rgba(52, 199, 89, .10);
}
.tripday-tl-item.tl-back { transition: transform .2s ease-out; }
@keyframes tlShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.tripday-tl-item.tl-shake > .tripday-tl-card { animation: tlShake .4s ease-in-out 1; }
.tl-lock-hint {
  margin: 4px 0 0;
  padding-left: 42px;
  font-size: 12px;
  color: var(--txt-2);
}
@media (prefers-reduced-motion: reduce) {
  .tripday-tl-item.tl-lift > .tripday-tl-card { transition: none; }
  .tripday-tl-item.tl-back { transition: none; }
  .tripday-tl-item.tl-shake > .tripday-tl-card { animation: none; }
}

/* ================= CC_0927_03｜這一段的封面（像 FB 一樣就地加照片）=================
   ① .cover-add 虛線框一行 ② .cover-banner 橫幅 ③ .cover-sheet 底部選單 ④ .cover-full 全螢幕。
   ⚠️ 新 class 一律 cover- 開頭；既有 CSS 變數一個都沒改，只讀。
   ⚠️ 底部選單照 PM 核可的 layout v2：iPhone 樣式（半透明遮罩＋白色圓角）。 */
.cover-wrap { margin: 4px 0 12px; }

/* ① 沒封面：一行虛線框（按鈕樣子：可點、有邊框） */
.cover-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--txt-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cover-add-l { color: var(--accent); font-weight: 600; font-size: 15px; }
.cover-add-r { color: var(--txt-2); font-size: 13px; white-space: nowrap; }

/* ② 有封面：寬＝內容寬，高＝寬 ÷ 2.4 */
.cover-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--grey-bg);
  cursor: pointer;
}
.cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;   /* 取中間偏上 */
}
.cover-cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cover-cap .zh, .cover-cap .zh * { color: #fff; }
.cover-more {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* 改完那一下（色碼與節奏沿用 feedFlash） */
.cover-add.cover-magic, .cover-banner.cover-magic { animation: feedFlash 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .cover-add.cover-magic, .cover-banner.cover-magic { animation: none; }
}

/* ③ 底部選單 */
.cover-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .45);
}
.cover-sheet-grp {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.cover-sheet-h {
  margin: 0;
  padding: 12px 16px;
  color: #8e8e93;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #e5e5ea;
}
.cover-sheet-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid #e5e5ea;
  background: #fff;
  color: #007aff;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.cover-sheet-btn:last-child { border-bottom: 0; }
.cover-sheet-red { color: #ff3b30; }
.cover-sheet-cancel { font-weight: 700; }
.cover-ask-row { display: flex; gap: 10px; padding: 12px; }
.cover-ask-row > button {
  flex: 1 1 0;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.cover-ask-keep { background: #007aff; color: #fff; font-weight: 700; }
.cover-ask-del  { background: #e5e5ea; color: #ff3b30; }

/* ④ 全螢幕看 */
.cover-full {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background: #000;
  touch-action: none;             /* 放大、拖動時頁面不跟著捲 */
  overscroll-behavior: contain;
}
.cover-full-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 10px;
  z-index: 2;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.cover-full-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.cover-full-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.cover-full-err { margin: 0 16px 8px; }
.cover-full-share {
  margin: 0 16px calc(16px + env(safe-area-inset-bottom));
  width: auto;
}