/* 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 {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 頁首 */
.hd {
  padding: 20px 16px 8px;
  text-align: center;
}
.hd-title { margin: 0; font-size: 22px; letter-spacing: 1px; }
.hd-sub   { margin: 4px 0 0; font-size: 13px; color: var(--txt-2); }

/* 主體 */
.wrap {
  flex: 1 0 auto;
  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 階段二）----
   **刻意不用 position: fixed**：iOS Safari 網址列會隨捲動浮動，
   固定定位會被蓋住或跟著跳。內容都不長，讓它隨頁面捲動。

   依 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 {
  color: var(--txt-3);
  opacity: 0.55;
  cursor: default;
}

/* 分頁面板 */
.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); }

.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_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); }

/* 已設定金鑰的一行小字：只有末四碼，嚴禁完整金鑰 */
.keyline {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--txt-3);
  text-align: center;
}
.keyline-btn {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--txt-3);
  font-size: 12px;
  cursor: pointer;
}
.keyline-btn:active { color: var(--txt-1); }

/* ================= 訪客可瀏覽（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);
}

/* 隨手工具六格：2 欄固定，380px 寬度下不得排 3 欄以上。
   每格是 div 而非 button／a，按不下去；灰底灰字沿用未接線灰。 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}
.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);
}

/* 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 {
  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);
}
.feed-entry-count {
  margin: 6px 0 0;
  font-size: 13px;
  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;
}