@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   旅遊行程規劃 — 樣式
   🤖 Claude 產生　｜　✅ 現行　｜　最後更新：2026-09-06

   風格：archetype 7「靛紫現代風」（使用者 2026-09-03 選定）
   色票沿用姊妹作 44_參訪行程紀錄 —— 那一份已逐色實測過六種標準底色的對比，
   並針對「風格表原色不夠對比」的幾個色做了鎖色相降明度的修正。
   ⚠️ 不要回頭改成風格表的原始值，那些 color-guard-allow 註解寫的就是
      「為什麼不能用原值」。

   本工具是**行動優先**（出門在外主要在手機上看）：
     ・主導覽是底部分頁列（拇指可及），桌機才切換成頂欄橫向導覽
     ・觸控目標一律 ≥44px
     ・safe-area（瀏海與 Home 指示條）全部讓開

   ⚠️ 三條會「安靜出錯」的鐵律：
   ① 吃 CSS 變數的屬性不可掛 transition（全域 §七⑧）——症狀是屬性停在舊值、
      而讀變數時值是對的，會讓人去查權重與 calc，全都沒問題。
   ② 字級一律寫這裡且用 rem 絕對值，不用 em 巢狀（避免連乘），
      JS 不得寫 inline font-size（稽核 grep 不到）。
   ③ 縮放採「rem 派」：html 的 font-size × var(--z)。內容全用 rem、
      頂欄／底部分頁列／側邊軌道一律用 px（固定不縮放，位置不得隨字級偏移）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ────────── 淺色（bare :root＝完整定義，深色只覆寫差異） ────────── */
:root{
  --z:1;                        /* 字級倍率 0.7~2.0，由 JS 寫入 */
  --maxw:1180px;                /* 內容欄寬。⚠️ 只有這裡定義，別處不得再寫死同一個數字 */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabbar-h:0px;

  /* 底盤與文字 */
  --bg:#F5F6FB;  --panel:#ffffff;  --panel2:#F7F8FC;
  --line:#E2E5F0; --line2:#CBD0E4;   /* color-guard-allow: archetype 7 border #E2E5F0 的次深階，只用於分隔線；分隔線刻意低對比，不可拿來當元件邊界 */
  /* ⚠️ 控制項邊界（按鈕／輸入框／膠囊）屬 WCAG 2.1 SC 1.4.11 非文字對比，必須 ≥3:1。
     --line2 對卡面只有 1.53:1 —— 使用者看不到按鈕的邊。兩者刻意分成兩個名字。 */
  --ctrl-bd:#868996;   /* color-guard-allow: 由 --line2 #CBD0E4 鎖色相降明度求得，為滿足 WCAG SC 1.4.11 控制項邊界的 3:1（四種淺底 3.06~3.48） */
  --ink:#3A3F52;
  --ink2:#676D83;               /* color-guard-allow: 風格表 #6B7288 對頁面底只有 4.43，鎖色相降明度至 4.51~5.13 */
  --hero-ink2:#5A6073;          /* color-guard-allow: --ink2 疊在 hero 漸層上只有 4.07，鎖色相 227.1°／飽和 12% 不變降明度，實測四個端點 4.96~5.29 */
  --th-bg:#EEF0F9; --th-ink:#3A3F52;
  --input-bd:#858AA1;   /* color-guard-allow: 風格表 #8b90a8 對頁面底只有 2.92，降一階後 3.00~3.42（元件邊界屬 SC 1.4.11，不可沿用分隔線色） */

  /* 主色（靛紫）與輔色 */
  --brand:#635BFF; --brand-txt:#4B44D9; --brand-soft:#ECEAFE; --brand-bd:#D3CFFA;
  --btn-bg:#635BFF; --btn-fg:#ffffff;
  --accent:#22B8CF;
  --link:#0F7886;               /* color-guard-allow: 風格表 #10808F 對次淺底只有 4.39，鎖色相降明度至 4.56~5.18 ｜⚠️ 連結一律加底線 —— 同色系文字互相對比極低 */
  --acc:#FF7A59; --acc-txt:#A8431F; --acc-soft:#FFEDE7; --acc-bd:#FBD3C4;   /* color-guard-allow: archetype 7 靛紫現代風的橘珊瑚強調色（權威＝34_風格樣版對照館第 7 筆） */

  /* 語意徽章（深淺各一組、刻意反向定義；小字級門檻拉到 5.5:1） */
  --bdg-gn-bg:#E3F1E8; --bdg-gn-fg:#1A5C38; --bdg-gn-bd:#7FB89A;
  --bdg-br-bg:#F9D8D3; --bdg-br-fg:#962317; --bdg-br-bd:#DE9086;
  --bdg-am-bg:#FBE8C8; --bdg-am-fg:#7A4F00; --bdg-am-bd:#D4A75C;
  --bdg-tl-bg:#CFEAED; --bdg-tl-fg:#0A5F67; --bdg-tl-bd:#5FAEB7;
  --bdg-or-bg:#FFE0D2; --bdg-or-fg:#8F3506; --bdg-or-bd:#E08A55;
  --bdg-nt-bg:#EEF0F9; --bdg-nt-fg:#4C5268; --bdg-nt-bd:#B7BDD4;   /* color-guard-allow: 靛紫風自己的中性徽章（tokens 的中性徽章是綠灰系，色相不同），實測 6.80 */
  --bdg-pu-bg:#ECEAFE; --bdg-pu-fg:#4B44D9; --bdg-pu-bd:#D3CFFA;

  /* 填滿／未填滿型色塊（深淺共用同一值；剩餘段一律加 1px 內框） */
  --fill-on:#635BFF; --fill-on-fg:#ffffff;
  --fill-rest:#ECEAFE; --fill-rest-bd:#D3CFFA;
  --ok-on:#1A5C38; --ok-on-fg:#ffffff;

  /* 互動高亮（hover／目前所在）：淡底＋實色條，雙訊號 */
  --hov-bg:rgba(16,128,143,.11); --hov-bar:#10808F;

  /* 圖表分類色（槽位編號＝使用順序） */
  --dv1:#18416D; --dv2:#C0392B; --dv3:#1A5C38; --dv4:#666E2B; --dv5:#623C67;
  --dv6:#227677; --dv7:#8A5A00; --dv8:#A32050; --dv9:#545F63; --dv10:#76320F;
  --dv0:#3A3F52;

  /* 行程類型色（沿用徽章色，一色一義） */
  --k-spot-bg:var(--bdg-pu-bg);  --k-spot-fg:var(--bdg-pu-fg);  --k-spot-bd:var(--bdg-pu-bd);
  --k-food-bg:var(--bdg-or-bg);  --k-food-fg:var(--bdg-or-fg);  --k-food-bd:var(--bdg-or-bd);
  --k-stay-bg:var(--bdg-tl-bg);  --k-stay-fg:var(--bdg-tl-fg);  --k-stay-bd:var(--bdg-tl-bd);
  --k-shop-bg:var(--bdg-am-bg);  --k-shop-fg:var(--bdg-am-fg);  --k-shop-bd:var(--bdg-am-bd);
  --k-move-bg:var(--bdg-nt-bg);  --k-move-fg:var(--bdg-nt-fg);  --k-move-bd:var(--bdg-nt-bd);
  --k-flight-bg:var(--bdg-nt-bg);--k-flight-fg:var(--bdg-nt-fg);--k-flight-bd:var(--bdg-nt-bd);
  --k-free-bg:var(--bdg-gn-bg);  --k-free-fg:var(--bdg-gn-fg);  --k-free-bd:var(--bdg-gn-bd);

  /* 字級（rem 絕對值，1rem = 16px × --z）
     ⚠️ 全域 §七⑦：從基準往下推，不從下限往上填。
     17 → 15.5 → 14.5 → 13.5，絕對下限 12.5px 未使用。 */
  --fs-base:1.0625rem;   /* 17px   內容區基準 */
  --fs-lead:1.125rem;    /* 18px   卡片標題 */
  --fs-body:.96875rem;   /* 15.5px 清單內文 */
  --fs-note:.90625rem;   /* 14.5px 次要說明 */
  --fs-chip:.84375rem;   /* 13.5px 徽章標籤 */
  --fs-num:1.75rem;      /* 28px   大數值 */
  --fs-hero:2.25rem;     /* 36px   倒數數字 */

  --r:14px; --r-sm:10px; --r-chip:10px;
  --sh:0 2px 10px rgba(99,91,255,.10);
  --sh-lg:0 10px 34px rgba(58,63,82,.16);
  --topbar-h:56px;       /* 由 JS 實際量測後覆寫 */
}

/* ────────── 深色（只覆寫值，不新增規則） ────────── */
:root[data-theme="dark"]{
  --bg:#131522;  --panel:#1B1E2E;  --panel2:#1F2233;
  --line:#2C3145; --line2:#3C4360;   /* color-guard-allow: archetype 7 深色 border 的次階，只用於分隔線 */
  --ctrl-bd:#6470A0;   /* color-guard-allow: 深色控制項邊界，四種深底 3.07~3.77，滿足 SC 1.4.11 */
  --ink:#E7E9F5; --ink2:#9BA2BC;
  --hero-ink2:#9BA2BC;
  --th-bg:#232739; --th-ink:#C9CCE5;
  --input-bd:#6b7391;

  --brand:#8B85FF; --brand-txt:#A29DFF; --brand-soft:#252449; --brand-bd:#3D3A73;
  --btn-bg:#5750E0; --btn-fg:#ffffff;
  --accent:#3FD0E8;
  --link:#5FD8EC;
  --acc:#FF9E80; --acc-txt:#FF9E80; --acc-soft:#33221c; --acc-bd:#5c382c;

  --bdg-gn-bg:#16302A; --bdg-gn-fg:#4BD98A; --bdg-gn-bd:#2F6B52;
  --bdg-br-bg:#3A211E; --bdg-br-fg:#F0897A; --bdg-br-bd:#6E403A;
  --bdg-am-bg:#382C18; --bdg-am-fg:#F0B65C; --bdg-am-bd:#6B5530;
  --bdg-tl-bg:#123035; --bdg-tl-fg:#6FD5DE; --bdg-tl-bd:#2E5B62;
  --bdg-or-bg:#43301F; --bdg-or-fg:#FFAB80; --bdg-or-bd:#7A5638;
  --bdg-nt-bg:#232739; --bdg-nt-fg:#A6ADC7; --bdg-nt-bd:#414760;   /* color-guard-allow: 深色版中性徽章，實測 6.63 */
  --bdg-pu-bg:#252449; --bdg-pu-fg:#A9A4FF; --bdg-pu-bd:#3D3A73;

  /* ⚠️ 已填色與其上的文字**深淺共用同一組值** —— 隨主題翻轉明暗必有一邊不合格 */
  --fill-on:#635BFF; --fill-on-fg:#ffffff;
  --fill-rest:#252449; --fill-rest-bd:#3D3A73;

  --hov-bg:rgba(63,208,232,.15); --hov-bar:#3FD0E8;

  --dv1:#8AA8F0; --dv2:#DE6872; --dv3:#00C35E; --dv4:#CAD73C; --dv5:#CC7DD4;
  --dv6:#13ABB9; --dv7:#E8A33D; --dv8:#EEAAC6; --dv9:#9AABAC; --dv10:#FF8A5F;
  --dv0:#E7E9F5;

  --sh:0 2px 12px rgba(0,0,0,.34);
  --sh-lg:0 12px 38px rgba(0,0,0,.5);
}

/* ══════════════ 基礎 ══════════════ */
*,*::before,*::after{box-sizing:border-box}
/* 🔴 hidden 屬性一律生效（2026-09-06 使用者實測：示範橫幅在真實行程上仍顯示）。
   瀏覽器內建的 [hidden]{display:none} 優先度很低，任何 .xxx{display:flex} 都會壓過它；
   程式用 el.hidden = true 藏東西時就會「標了卻沒藏」。 */
[hidden]{display:none!important}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,table,td,th,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
html{
  font-size:calc(16px * var(--z));           /* rem 派：唯一的縮放來源 */
  /* 永遠保留捲軸的空間。沒有它的話，切到內容較短的頁面時捲軸消失、
     可用寬度突然多 15px，整個版面往右跳一下（量框寬時也會得到兩種數字）。 */
  scrollbar-gutter:stable;
  overflow-y:scroll;
  scroll-padding-top:calc(var(--topbar-h) + 16px);   /* WCAG 2.2 SC 2.4.11 */
  -webkit-text-size-adjust:100%;
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}
:target{scroll-margin-top:calc(var(--topbar-h) + 16px)}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  font-size:var(--fs-base); line-height:1.62; font-weight:450;
  min-height:100vh; min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-weight:650; line-height:1.35; letter-spacing:-.01em}
a{color:var(--link); text-decoration:underline; text-underline-offset:2px}
/* ⚠️ 表單元素的 font-size 初始值是瀏覽器預設（Chrome 給 button 13.333px），不是 inherit。
   任何用表單元素當容器的地方都要補 font-size，否則裡面的 rem/em 全部失準。 */
button,input,select,textarea{font-family:inherit; font-size:1em; color:inherit}
button{cursor:pointer; background:none; border:0}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hide{display:none!important}
.skip{position:fixed;left:8px;top:-60px;z-index:200;background:var(--btn-bg);color:#fff;
  padding:9px 15px;border-radius:0 0 var(--r-sm) var(--r-sm);font-size:14px;font-weight:650;text-decoration:none}
.skip:focus{top:0}

/* ══════════════ 固定頂欄（四件套①） ══════════════
   ⚠️ 底色滿版、內容對齊內容欄：用 padding-inline 而不是加內層容器。
      max() 不可省 —— 窄視窗時 calc 會變負值。
   ⚠️ 頂欄字級一律 px：頂欄與軌道不隨字級縮放。 */
.topbar{
  position:sticky; top:0; z-index:100;
  padding-top:var(--safe-t);
  background:var(--panel);
  border-bottom:2px solid var(--line2);   /* 分隔訊號①：2px 框線（1px 只算半個訊號） */
  font-size:13.5px;
}
.topbar.stuck{box-shadow:0 6px 18px rgba(58,63,82,.13)}   /* 分隔訊號②：捲動後才加深 */
.pad{padding-inline:max(14px, calc((100% - var(--maxw)) / 2))}
.hd{display:flex; align-items:center; gap:10px; padding-block:8px; min-height:46px}
.brandmark{display:flex; align-items:center; gap:8px; min-width:0}
.logo{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#eceafe,#dcefff); font-size:18px; line-height:1}   /* color-guard-allow: archetype 7 指定的「靛紫→青淺階」logo 漸層方塊，不承載文字 */
:root[data-theme="dark"] .logo{background:linear-gradient(135deg,#2b2a56,#1d3a49)}   /* color-guard-allow: 同上，logo 漸層方塊的深色版，不承載文字 */
.hd h1{font-size:16px; letter-spacing:-.015em; line-height:1.25; overflow-wrap:anywhere}   /* 第三輪：長名稱換行，不再用省略號切掉 */
.hd .org{font-size:13px; color:var(--ink2); overflow-wrap:anywhere}
.hd .spacer{flex:1 1 auto; min-width:4px}
.hdtools{display:flex; align-items:center; gap:6px; flex:none}

.tbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:none;
  padding:0 10px; min-height:38px; min-width:38px;
  border:1px solid var(--ctrl-bd); border-radius:9px; background:var(--panel2);
  color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.2; white-space:nowrap;
}
.tbtn:hover:not(:disabled){background:var(--brand-soft); border-color:var(--brand-bd); color:var(--brand-txt)}
.tbtn:disabled{opacity:.4; cursor:default}
.tbtn.nb{display:none}                     /* 窄幕才出現的條件式「‹」 */

/* 字級四元件（四件套②）
   ⚠️ 半形 A+ / A-（16.7px）比全形寬鬆 5px；button 的瀏覽器預設 padding 也要歸零，
      不然文字會在 34px 的鈕裡換行 —— 而按鈕寫死高度，量元件高度永遠測不出來。 */
.fsgrp{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--ctrl-bd);
  border-radius:9px;background:var(--panel2);padding:2px}
.fsgrp button{width:34px;height:34px;padding:0;flex:none;display:grid;place-items:center;
  border-radius:7px;font-size:14px;font-weight:700;color:var(--ink);
  white-space:nowrap;line-height:1}
.fsgrp button:hover:not(:disabled){background:var(--brand-soft);color:var(--brand-txt)}
.fsgrp button:disabled{opacity:.4;cursor:default}
.fsgrp .val{min-width:44px;text-align:center;font-size:13px;font-weight:650;
  color:var(--ink2);font-variant-numeric:tabular-nums;padding:0 2px}

/* 第二列：頁籤（桌機用；手機隱藏，改用底部分頁列）
   ⚠️ 頂欄底下的每一列都要對齊內容欄，只對齊第一列會多出一條起始線。 */
.navrow{display:none; gap:4px; padding-block:0 7px; overflow-x:auto; scrollbar-width:none;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(0,0,0,0)) left center / 26px 100% no-repeat,
    linear-gradient(to left,  var(--panel) 30%, rgba(0,0,0,0)) right center / 26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(58,63,82,.20), rgba(0,0,0,0)) left center / 10px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(58,63,82,.20), rgba(0,0,0,0)) right center / 10px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
.navrow::-webkit-scrollbar{display:none}
.navbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap;flex:none;
  border:1px solid transparent}
.navbtn:hover{background:var(--brand-soft);color:var(--brand-txt)}
.navbtn.on{background:var(--brand-soft);color:var(--brand-txt);border-color:var(--brand-bd)}
.navbtn .nb{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:999px;background:var(--bdg-br-bg);color:var(--bdg-br-fg);
  border:1px solid var(--bdg-br-bd);font-size:12.5px;font-weight:700;line-height:1}

/* ══════════════ 底部分頁列（行動主導覽） ══════════════ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; background:var(--panel);
  border-top:2px solid var(--line2);
  box-shadow:0 -4px 18px rgba(58,63,82,.10);
  padding-bottom:var(--safe-b);
}
.tabbar button{
  flex:1 1 0; min-width:0; min-height:56px; padding:7px 2px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:12.5px; font-weight:600; color:var(--ink2); line-height:1.2;
  border-top:3px solid transparent; position:relative;
}
.tabbar button .ic{font-size:19px; line-height:1}
.tabbar button .lb{overflow-wrap:anywhere; max-width:100%; line-height:1.2}
.tabbar button.on{color:var(--brand-txt); border-top-color:var(--brand)}
.tabbar .ndot{position:absolute; top:5px; left:50%; margin-left:9px; min-width:17px; height:17px;
  padding:0 4px; border-radius:999px; background:var(--acc); color:#2A352C;
  border:1.5px solid var(--panel); font-size:11.5px; font-weight:800; line-height:14px}
/* ⚠️ 橘底配白字實測 2.84:1 不合格（全域 §五）；小圓點上的數字一律深字。 */

/* ══════════════ 內容 ══════════════ */
main{
  max-width:var(--maxw); margin:0 auto;
  padding:14px 14px calc(24px + var(--tabbar-h) + var(--safe-b));
  container-type:inline-size;
}
.view{display:none}
.view.on{display:block}
.vh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
.vh h2{font-size:1.25rem}
.vh .sub{font-size:var(--fs-note);color:var(--ink2)}

.card{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px; margin-bottom:13px; box-shadow:var(--sh)}
.card>h3{font-size:var(--fs-lead); margin-bottom:9px; display:flex; align-items:center; gap:8px;flex-wrap:wrap}
.card>h3 .cnt{font-size:var(--fs-chip);color:var(--ink2);font-weight:600}
.card.flat{box-shadow:none}
.muted{color:var(--ink2)}
.note{font-size:var(--fs-note); color:var(--ink2); line-height:1.6}
.empty{padding:26px 12px; text-align:center; color:var(--ink2); font-size:var(--fs-body)}
.empty .big{font-size:2rem; display:block; margin-bottom:6px; opacity:.6}
.rowsplit{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rowsplit .gr{margin-left:auto}

/* 示範資料橫幅 —— 刻意醒目，不要拿掉 */
.demobar{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin-bottom:13px;
  border-radius:var(--r);background:var(--bdg-am-bg);border:1px solid var(--bdg-am-bd);
  color:var(--bdg-am-fg);font-size:var(--fs-note);line-height:1.55}
.demobar .ic{font-size:1.15rem;flex:none;line-height:1.4}
.demobar .tx{flex:1 1 auto;min-width:0}
.demobar .btn{flex:none}
.demobar .fold{flex:none;width:2.25rem;height:2.25rem;min-width:36px;min-height:36px;padding:0;
  border-radius:8px;border:1px solid var(--bdg-am-bd);color:var(--bdg-am-fg);
  display:grid;place-items:center;font-size:var(--fs-note);line-height:1}
.demobar .fold:hover{background:var(--bdg-am-bd)}
/* 收合後：留一行細條。⚠️ 不可以整個藏掉 —— 使用者可能忘了這是示範資料，
   而「以為是查證過的行程」正是這個工具最不該犯的錯。 */
.demobar.mini{padding:7px 12px;align-items:center}
.demobar.mini .tx{font-size:var(--fs-chip);line-height:1.4}
.demobar.mini .tx b{font-weight:700}
.demobar.mini .tx .more{display:none}
.demobar.mini>.btn{display:none}

/* 徽章 */
.bdg{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-chip);
  font-size:var(--fs-chip);font-weight:650;line-height:1.5;white-space:nowrap;
  background:var(--bdg-nt-bg);color:var(--bdg-nt-fg);border:1px solid var(--bdg-nt-bd)}
.bdg.gn{background:var(--bdg-gn-bg);color:var(--bdg-gn-fg);border-color:var(--bdg-gn-bd)}
.bdg.br{background:var(--bdg-br-bg);color:var(--bdg-br-fg);border-color:var(--bdg-br-bd)}
.bdg.am{background:var(--bdg-am-bg);color:var(--bdg-am-fg);border-color:var(--bdg-am-bd)}
.bdg.tl{background:var(--bdg-tl-bg);color:var(--bdg-tl-fg);border-color:var(--bdg-tl-bd)}
.bdg.or{background:var(--bdg-or-bg);color:var(--bdg-or-fg);border-color:var(--bdg-or-bd)}
.bdg.pu{background:var(--bdg-pu-bg);color:var(--bdg-pu-fg);border-color:var(--bdg-pu-bd)}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;min-height:44px;border-radius:var(--r-sm);
  border:1px solid var(--ctrl-bd);background:var(--panel2);color:var(--ink);
  font-size:var(--fs-body);font-weight:650;line-height:1.25;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand-bd);color:var(--brand-txt)}
.btn:disabled{opacity:.42;cursor:default}
.btn.pri{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.btn.pri:hover:not(:disabled){background:var(--brand-txt);border-color:var(--brand-txt);color:#fff}
.btn.sm{padding:7px 12px;min-height:38px;font-size:var(--fs-note)}
.btn.wide{width:100%}
.btn.dz{border-color:var(--bdg-br-bd);color:var(--bdg-br-fg)}
.btn.dz:hover:not(:disabled){background:var(--bdg-br-bg);border-color:var(--bdg-br-fg);color:var(--bdg-br-fg)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

/* 分段切換器（日／週／全程、設定分頁） */
.segwrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.seg{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--ctrl-bd);
  border-radius:var(--r-sm);background:var(--panel2);flex:none}
.seg button{padding:8px 15px;min-height:38px;border-radius:7px;font-size:var(--fs-note);
  font-weight:650;color:var(--ink2);white-space:nowrap;line-height:1.2}
.seg button:hover:not(.on){background:var(--brand-soft);color:var(--brand-txt)}
.seg button.on{background:var(--btn-bg);color:var(--btn-fg)}
/* ⚠️ 藏捲軸就必須補提示，否則放不下的分頁會被靜靜切掉（全域 §七⑨）。
   實測 375px 時五個分頁超出 157px，而畫面上看起來就像「只有三個分頁」。
   這裡用它自己的底色做捲動陰影（不能直接套 .scrollx —— 那是頁面底色版本，
   疊在 --panel2 的膠囊上會出現一圈色差）。 */
.seg.wide{display:flex;width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;
  background:
    linear-gradient(to right, var(--panel2) 30%, rgba(0,0,0,0)) left center / 26px 100% no-repeat,
    linear-gradient(to left,  var(--panel2) 30%, rgba(0,0,0,0)) right center / 26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(58,63,82,.22), rgba(0,0,0,0)) left center / 11px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(58,63,82,.22), rgba(0,0,0,0)) right center / 11px 100% no-repeat,
    var(--panel2);
  background-attachment:local,local,scroll,scroll,scroll}
.seg.wide::-webkit-scrollbar{display:none}
.seg.wide button{flex:1 1 auto}
.segwrap .btn{margin-left:auto}

/* 表單 */
label.fl{display:block;font-size:var(--fs-note);font-weight:650;color:var(--ink2);margin-bottom:4px}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],
input[type=tel],input[type=password],input[type=search],select,textarea{
  width:100%;padding:10px 12px;min-height:44px;border:1px solid var(--input-bd);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);
  font-size:var(--fs-body);line-height:1.5}
textarea{min-height:96px;resize:vertical;line-height:1.65;font-family:inherit}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-note)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.frow{display:grid;grid-template-columns:8.5rem 1fr;gap:9px 12px;align-items:start;margin-bottom:11px}
.frow>label.fl{padding-top:12px;margin:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.chkrow{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:var(--fs-body)}
.chkrow input[type=checkbox]{width:22px;height:22px;min-height:22px;flex:none;accent-color:var(--brand)}

/* ══════════════ 今天（hero） ══════════════ */
.hero{background:linear-gradient(135deg,var(--brand-soft),var(--bdg-tl-bg));
  border:1px solid var(--brand-bd);border-radius:var(--r);padding:16px 17px;margin-bottom:13px}
/* ⚠️ 13.5px 是徽章「下限」不是目標。這是要讀的狀態文字，上調到 14.5px；
   層次改由粗體＋主色＋字距拉開，不靠更小的字。 */
.hero .lbl{font-size:var(--fs-note);font-weight:700;color:var(--brand-txt);
  letter-spacing:.06em}
.hero .ti{font-size:1.2rem;font-weight:700;line-height:1.4;margin:5px 0 7px}
/* ⚠️ 漸層底上的文字要對「兩個端點」各算一次對比，取較嚴的那一端。
   --ink2 在一般頁面底是 4.51 合格，疊在 hero 漸層上只剩 4.07 —— 不合格。
   --hero-ink2 鎖色相 227.1° 與飽和 12% 不變、只降明度（四端點 4.96~5.29）。
   ⚠️ 自動對比稽核看不到這一類問題（遇到漸層會直接跳過），必須人工實算。 */
.hero .meta{font-size:var(--fs-note);color:var(--hero-ink2);display:flex;gap:12px;flex-wrap:wrap}
.hero .cd{font-size:var(--fs-hero);font-weight:750;color:var(--brand-txt);
  font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.hero .cdu{font-size:var(--fs-note);font-weight:600;color:var(--hero-ink2);margin-left:4px}
.hero.warn{background:linear-gradient(135deg,var(--bdg-or-bg),var(--bdg-am-bg));border-color:var(--bdg-or-bd)}
.hero.warn .lbl,.hero.warn .cd{color:var(--bdg-or-fg)}
.hero .btnrow{margin-top:11px}

/* 雙時區列 */
.clocks{display:flex;gap:9px;margin-bottom:13px}
.clock{flex:1 1 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;text-align:center}
.clock .cz{font-size:var(--fs-note);color:var(--ink2);font-weight:650}
.clock .ct{font-size:var(--fs-num);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.clock .cd2{font-size:var(--fs-note);color:var(--ink2)}
.clock.local{border-color:var(--brand-bd);background:var(--brand-soft)}
/* ⚠️ --ink2 在一般頁面底是 4.51，疊在 --brand-soft 上只剩 4.34（差 0.16 就不合格）。
   「這個色在別的地方過了」不代表在這個底色上也過。 */
.clock.local .ct,.clock.local .cz,.clock.local .cd2{color:var(--brand-txt)}

/* ══════════════ 行程時間軸 ══════════════ */
.daybar{display:flex;gap:7px;overflow-x:auto;padding:2px 0 11px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.daybar::-webkit-scrollbar{display:none}
/* ⚠️ 藏捲軸就必須補提示，否則內容會靜靜被切掉（全域 §七⑨）。
   用純 CSS 捲動陰影：捲到底自動消失，零 JS、沒有「什麼時候量」的時序問題。 */
.scrollx{
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(0,0,0,0)) left center / 34px 100% no-repeat,
    linear-gradient(to left,  var(--bg) 30%, rgba(0,0,0,0)) right center / 34px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(58,63,82,.20), rgba(0,0,0,0)) left center / 13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(58,63,82,.20), rgba(0,0,0,0)) right center / 13px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.daybar button{flex:none;padding:9px 14px;min-height:44px;border-radius:var(--r-sm);
  border:1px solid var(--ctrl-bd);background:var(--panel);color:var(--ink);
  font-size:var(--fs-note);font-weight:650;white-space:nowrap;text-align:center}
.daybar button.on{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.daybar button.today{border-color:var(--brand);border-width:2px}
.daybar button .n{display:block;font-size:var(--fs-chip);font-weight:600;opacity:.85}

.daysec{margin-bottom:18px}
.dayhd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:0 2px 8px;
  border-bottom:2px solid var(--line2);margin-bottom:11px}
.dayhd h3{font-size:var(--fs-lead)}
.dayhd .s{font-size:var(--fs-note);color:var(--ink2)}
.dayhd .s b{color:var(--ink);font-weight:650}

.ev{display:flex;gap:11px;padding:11px 12px;margin-bottom:9px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);
  border-left:4px solid var(--line2);width:100%;text-align:left;align-items:flex-start;
  font-size:1em}
.ev .tm{flex:0 0 4.6rem;font-size:var(--fs-note);font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.35;padding-top:1px}
.ev .tm .e2{display:block;font-weight:500;color:var(--ink2)}
.ev .bd{flex:1 1 auto;min-width:0}
.ev .ti{font-size:var(--fs-body);font-weight:650;line-height:1.45;display:flex;gap:7px;
  align-items:baseline;flex-wrap:wrap}
.ev .lo{font-size:var(--fs-note);color:var(--ink2);margin-top:3px;line-height:1.5}
.ev .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.ev:hover{background:var(--hov-bg)}
.ev.now{border-color:var(--brand);border-left-color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-bd),var(--sh)}
.ev.past{opacity:.62}
.ev.k-spot  {border-left-color:var(--k-spot-bd)}
.ev.k-food  {border-left-color:var(--k-food-bd)}
.ev.k-stay  {border-left-color:var(--k-stay-bd)}
.ev.k-shop  {border-left-color:var(--k-shop-bd)}
.ev.k-move  {border-left-color:var(--k-move-bd); background:var(--panel2)}
.ev.k-flight{border-left-color:var(--k-flight-bd); background:var(--panel2)}
.ev.k-free  {border-left-color:var(--k-free-bd)}
.ev .kic{font-size:1.05rem;line-height:1.3;flex:none}

/* 星等徽章 —— 一色一義：綠＝4.5 以上、琥珀＝4.2~4.5、磚紅＝低於 4.2 */
.star{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:var(--r-chip);
  font-size:var(--fs-chip);font-weight:700;line-height:1.5;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  background:var(--bdg-gn-bg);color:var(--bdg-gn-fg);border:1px solid var(--bdg-gn-bd)}
.star.mid{background:var(--bdg-am-bg);color:var(--bdg-am-fg);border-color:var(--bdg-am-bd)}
.star.low{background:var(--bdg-br-bg);color:var(--bdg-br-fg);border-color:var(--bdg-br-bd)}
.star.non{background:var(--bdg-nt-bg);color:var(--bdg-nt-fg);border-color:var(--bdg-nt-bd)}

/* 交通段（比較扁，視覺上是「兩件事之間」而不是「一件事」） */
.mv{display:flex;align-items:center;gap:9px;padding:8px 12px;margin:0 0 9px 0;
  border-radius:var(--r-sm);background:var(--panel2);border:1px dashed var(--line2);
  font-size:var(--fs-note);width:100%;text-align:left}
.mv .ic{font-size:1.05rem;flex:none}
.mv .tx{flex:1 1 auto;min-width:0;color:var(--ink2);line-height:1.45}
.mv .tx b{color:var(--ink);font-weight:650}
.mv .go{flex:none;padding:6px 12px;min-height:44px;border-radius:8px;border:1px solid var(--ctrl-bd);
  background:var(--panel);font-size:var(--fs-chip);font-weight:650;color:var(--link)}
.gap{display:flex;align-items:center;gap:7px;padding:3px 12px 9px;font-size:var(--fs-chip);
  color:var(--ink2)}
.gap i{flex:1 1 auto;height:1px;background:var(--line2);display:block}

/* 週檢視：7 欄卡片。⚠️ 手機上不做「時間格線」——
   7 欄格線在 375px 只剩每欄 50px，完全不能讀。改成每欄一疊小卡＋橫向捲動。 */
.wk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(9.5rem,1fr);gap:8px;
  overflow-x:auto;padding-bottom:10px;scrollbar-width:none;align-items:start}
.wk::-webkit-scrollbar{display:none}
.wkcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px;min-height:5rem}
.wkcol.today{border-color:var(--brand);border-width:2px;padding:8px}
.wkcol>h4{font-size:var(--fs-note);margin-bottom:7px;display:flex;align-items:baseline;gap:5px}
.wkcol>h4 .dw{color:var(--ink2);font-weight:600;font-size:var(--fs-chip)}
.wkc{display:block;width:100%;text-align:left;padding:6px 8px;margin-bottom:6px;border-radius:8px;
  border:1px solid var(--line);border-left:3px solid var(--line2);background:var(--panel2);
  font-size:var(--fs-chip);line-height:1.45}
.wkc:hover{background:var(--hov-bg)}
.wkc .t{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink2)}
.wkc .n{font-weight:650;display:block;overflow-wrap:anywhere}
  /* 第三輪（2026-09-06）：週檢視卡片不再裁切名稱 —— 使用者要求「圖說或文字框的文字不要被截切或強迫中斷，必要時以換行呈現」。
     卡片高度改由內容決定。 */
.wkc.k-spot{border-left-color:var(--k-spot-bd)}
.wkc.k-food{border-left-color:var(--k-food-bd)}
.wkc.k-stay{border-left-color:var(--k-stay-bd)}
.wkc.k-shop{border-left-color:var(--k-shop-bd)}
.wkc.k-move,.wkc.k-flight{border-left-color:var(--k-move-bd)}
.wkc.k-free{border-left-color:var(--k-free-bd)}

/* ══════════════ 地圖（純 SVG 示意圖，零外部連線） ══════════════
   ⚠️ 一定要限制最大寬度：SVG 是 width:100% + height:auto，寬度撐滿 1180px 的
   內容欄時高度會變成 606px，整塊超過一個視窗高，使用者要捲過整張圖才看得到
   底下的地點清單。手機上反而剛好，所以問題只在桌機，限制寬度就解決了。 */
.mapwrap{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:0 auto 13px;max-width:760px}
.mapwrap svg{display:block;width:100%;height:auto;touch-action:pan-y pinch-zoom}
.mp-dot{cursor:pointer}
.mp-dot circle{stroke:var(--panel);stroke-width:2.5}
.mp-lbl{font-size:13px;font-weight:650;fill:var(--ink);paint-order:stroke;
  stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
/* 密集區改用編號（疊在一起的字看起來「有標示」，實際一個都讀不到） */
.mp-num{font-size:13px;font-weight:800;fill:#fff;paint-order:stroke;
  stroke:rgba(0,0,0,.28);stroke-width:2.5px;stroke-linejoin:round}
.mp-lead{stroke:var(--ink2);stroke-width:1;opacity:.5}
.mp-line{stroke:var(--brand);stroke-width:2;stroke-dasharray:5 4;fill:none;opacity:.55}
.mp-scale{font-size:13px;fill:var(--ink2)}
.maplegend{display:flex;gap:9px;flex-wrap:wrap;padding:9px 12px;border-top:1px solid var(--line);
  font-size:var(--fs-chip);background:var(--panel2)}
.maplegend span{display:inline-flex;align-items:center;gap:5px;color:var(--ink2)}
.maplegend i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.zonebar{display:flex;gap:7px;overflow-x:auto;padding:2px 0 11px;scrollbar-width:none}
.zonebar::-webkit-scrollbar{display:none}
/* ⚠️ zonebar 與 daybar 一樣藏了捲軸，HTML 上都要掛 class="scrollx" 補提示 */
.zonebar button{flex:none;padding:8px 13px;min-height:40px;border-radius:var(--r-sm);
  border:1px solid var(--ctrl-bd);background:var(--panel);color:var(--ink);
  font-size:var(--fs-note);font-weight:650;white-space:nowrap}
.zonebar button.on{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}

/* 地點卡 */
.plcard{display:flex;gap:11px;padding:12px;margin-bottom:9px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);
  width:100%;text-align:left;align-items:flex-start;font-size:1em}
.plcard:hover{background:var(--hov-bg)}
/* ⚠️ 尺寸用 rem 不用 px：圖示框裝的是內容，字級放大時要跟著長大。
   實測寫死 px 時 100% 字級完全正常、160% 字級被切掉。 */
.plcard .pic{flex:0 0 2.9rem;height:2.9rem;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:1.4rem;background:var(--brand-soft);border:1px solid var(--brand-bd)}
.plcard .bd{flex:1 1 auto;min-width:0}
.plcard .nm{font-size:var(--fs-body);font-weight:700;line-height:1.4;display:flex;gap:7px;
  align-items:baseline;flex-wrap:wrap}
.plcard .ad{font-size:var(--fs-note);color:var(--ink2);margin-top:2px;line-height:1.5}
.plcard .no{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;
  background:var(--fill-on);color:var(--fill-on-fg);font-size:var(--fs-chip);font-weight:800;line-height:1}

/* ══════════════ 費用 ══════════════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:9px;margin-bottom:13px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;box-shadow:var(--sh)}
.kpi .n{font-size:var(--fs-num);font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .l{font-size:var(--fs-note);color:var(--ink2);margin-top:2px}
.kpi.over .n{color:var(--bdg-br-fg)}
.bar{height:10px;border-radius:999px;background:var(--fill-rest);
  border:1px solid var(--fill-rest-bd);overflow:hidden;margin-top:6px}
/* ⚠️ 剩餘段一律加內框線：實測填色與淺色軌道底 ΔE00 只有 3.9，
   沒有框線就看不出「填到哪裡為止」。 */
.bar i{display:block;height:100%;background:var(--fill-on);border-radius:999px}
.bar.over i{background:var(--bdg-br-fg)}
.crow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);
  font-size:var(--fs-body);min-width:0}
.crow:last-child{border-bottom:0}
.crow .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.crow .amt{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.crow .sub{flex:none;font-size:var(--fs-chip);color:var(--ink2);font-variant-numeric:tabular-nums}
.cbar{display:flex;height:1.1rem;border-radius:6px;overflow:hidden;border:1px solid var(--line2);
  margin:8px 0 10px}
.cbar i{display:block;height:100%}
.clegend{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-chip);color:var(--ink2)}
.clegend span{display:inline-flex;align-items:center;gap:5px}
.clegend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}

/* ══════════════ 清單／勾選 ══════════════ */
.chk{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;margin-bottom:7px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
  width:100%;text-align:left;font-size:1em}
.chk:hover{background:var(--hov-bg)}
.chk .bx{flex:none;width:1.5rem;height:1.5rem;border-radius:6px;border:2px solid var(--ctrl-bd);
  display:grid;place-items:center;font-size:var(--fs-chip);font-weight:800;line-height:1;
  color:transparent;margin-top:1px}
.chk.on .bx{background:var(--ok-on);border-color:var(--ok-on);color:var(--ok-on-fg)}
.chk .tx{flex:1 1 auto;min-width:0;font-size:var(--fs-body);line-height:1.5}
.chk.on .tx{color:var(--ink2);text-decoration:line-through}
.chk .tx small{display:block;font-size:var(--fs-note);color:var(--ink2);text-decoration:none;margin-top:1px}
/* ⚠️ 這條刻意寫成獨立的 .del，不是 .chk .del —— 同行者卡片也用它。
   後代選擇器在別處重用時會完全沒套到，而畫面上只是「按鈕看起來樸素了一點」。
   ⚠️ 尺寸用 rem 且 ≥44px：行動優先的觸控目標門檻。 */
.del{flex:none;width:2.75rem;height:2.75rem;min-width:44px;min-height:44px;padding:0;
  border-radius:9px;border:1px solid var(--line2);
  color:var(--ink2);font-size:var(--fs-chip);display:grid;place-items:center;line-height:1}
.del:hover{background:var(--bdg-br-bg);border-color:var(--bdg-br-bd);color:var(--bdg-br-fg)}

/* ══════════════ 同行者 ══════════════ */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:9px}
.pcard{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh)}
/* ⚠️ 這個 .av 刻意是獨立規則、不寫成 .pcard .av —— 會重用的元件不能綁在容器底下。
   ⚠️ 尺寸用 rem：實測寫死 32px 時 160% 字級會把兩個中文字切掉 15px，
      而 100% 字級那一輪測試是全綠的。 */
.av{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bdg-pu-bg);color:var(--bdg-pu-fg);font-size:var(--fs-chip);font-weight:700;
  line-height:1;letter-spacing:-.03em;overflow:hidden;border:1px solid var(--bdg-pu-bd)}
.pcard .bd{flex:1 1 auto;min-width:0}
.pcard .nm{font-size:var(--fs-body);font-weight:700}
.pcard .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.needgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:6px;margin-top:8px}
.needgrid label{display:flex;align-items:center;gap:7px;font-size:var(--fs-note);
  padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);
  min-height:40px}
.needgrid input{width:19px;height:19px;min-height:19px;flex:none;accent-color:var(--brand)}

/* ══════════════ 健檢 ══════════════ */
.isu{display:flex;gap:11px;padding:12px 13px;margin-bottom:9px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line2);
  box-shadow:var(--sh);width:100%;text-align:left;align-items:flex-start;font-size:1em}
.isu:hover{background:var(--hov-bg)}
.isu.error{border-left-color:var(--bdg-br-fg)}
.isu.warn{border-left-color:var(--bdg-am-fg)}
.isu.info{border-left-color:var(--bdg-tl-fg)}
.isu .ic{flex:none;font-size:1.15rem;line-height:1.35}
.isu .bd{flex:1 1 auto;min-width:0}
.isu .ti{font-size:var(--fs-body);font-weight:650;line-height:1.45}
.isu .de{font-size:var(--fs-note);color:var(--ink2);margin-top:3px;line-height:1.55}
.isu .fx{font-size:var(--fs-note);margin-top:5px;line-height:1.55;
  padding:6px 9px;border-radius:8px;background:var(--bdg-gn-bg);color:var(--bdg-gn-fg);
  border:1px solid var(--bdg-gn-bd)}
.okbox{padding:16px;border-radius:var(--r);border:1px solid var(--bdg-gn-bd);
  background:var(--bdg-gn-bg);color:var(--bdg-gn-fg);margin-bottom:13px}
.okbox b{font-size:var(--fs-lead)}
.ckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:7px;margin-top:10px}
.ckitem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);font-size:var(--fs-note)}
.ckitem .n{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink2);
  font-size:var(--fs-chip);font-weight:650}

/* ══════════════ 分享 ══════════════ */
.shrow{display:flex;gap:11px;align-items:flex-start;padding:13px;margin-bottom:9px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh)}
.shrow .ic{flex:none;font-size:1.5rem;line-height:1.2}
.shrow .bd{flex:1 1 auto;min-width:0}
.shrow .nm{font-size:var(--fs-body);font-weight:700}
.shrow .de{font-size:var(--fs-note);color:var(--ink2);margin-top:2px;line-height:1.55}
.urlbox{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.urlbox input{flex:1 1 12rem;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-note)}

/* ══════════════ 詳情面板內的區塊 ══════════════ */
.dt{display:grid;grid-template-columns:5.5rem 1fr;gap:7px 11px;font-size:var(--fs-body);
  margin-bottom:11px}
.dt dt{color:var(--ink2);font-size:var(--fs-note);font-weight:650}
.dt dd{min-width:0;line-height:1.55}
.tiplist{margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.tiplist li{display:flex;gap:7px;font-size:var(--fs-note);line-height:1.55;
  padding:7px 10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.tiplist li .b{flex:none}
.tiplist li.warn{background:var(--bdg-am-bg);color:var(--bdg-am-fg);border-color:var(--bdg-am-bd)}
.sechd{font-size:var(--fs-note);font-weight:700;color:var(--ink2);margin:14px 0 7px;
  padding-bottom:5px;border-bottom:1px solid var(--line)}

/* ══════════════ 對話框／面板 ══════════════ */
.mask{position:fixed;inset:0;background:rgba(19,21,34,.55);z-index:150;display:none}
.mask.on{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:160;
  background:var(--bg);border-top:2px solid var(--line2);
  border-radius:18px 18px 0 0;box-shadow:var(--sh-lg);
  max-height:86dvh;display:none;flex-direction:column;
}
.sheet.on{display:flex}
.sheet .sh-h{display:flex;align-items:flex-start;gap:10px;padding:13px 16px 11px;
  border-bottom:1px solid var(--line);flex:none}
.sheet .sh-h h3{font-size:var(--fs-lead);flex:1 1 auto;min-width:0;line-height:1.4}
.sheet .sh-h .x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--ctrl-bd);
  background:var(--panel2);font-size:15px;font-weight:800;display:grid;place-items:center}
.sheet .sh-b{padding:14px 16px calc(18px + var(--safe-b));overflow-y:auto;flex:1 1 auto;
  overscroll-behavior:contain}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--line2);
  margin:7px auto 0;flex:none}

/* ══════════════ 側邊導覽軌道（四件套③：集中式膠囊） ══════════════
   ⚠️ 位置一律由 JS 量 main.getBoundingClientRect().right 寫進 --railx。
      不可寫 calc(50% + 內容半寬) —— 那個公式擋不住字級縮放。
   ⚠️ 量的是「膠囊實際寬度」不是鈕寬（鈕 38 但膠囊含內距框線約 54）。 */
.rail{
  position:fixed; left:var(--railx, calc(100% - 62px)); top:50%; transform:translateY(-50%);
  z-index:64; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:9px 7px; border:1px solid var(--ctrl-bd); border-radius:29px;
  background:var(--panel); box-shadow:var(--sh-lg); font-size:15px;
}
.rail-mid{display:contents}
/* ⚠️ 收起時一定要連 pointer-events 一起關掉：只把 opacity 調低的話，
      淡掉的膠囊仍然攔截點擊，底下的按鈕變成「看得到、按不到」。
   ⚠️ opacity 與 transform 的值是寫死的常數、不是 CSS 變數，掛 transition 是安全的。 */
.rail{transition:opacity .2s ease, transform .2s ease}
.rail.away{opacity:0; transform:translateX(72px); pointer-events:none}
.rail.away:focus-within{opacity:1; transform:none; pointer-events:auto}
.rbtn{width:38px;height:38px;flex:none;padding:0;display:grid;place-items:center;
  border:1px solid var(--ctrl-bd);border-radius:50%;background:var(--panel2);
  color:var(--brand-txt);font-size:16px;font-weight:700;line-height:1}
.rbtn:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand)}
.rbtn:disabled{opacity:.34;cursor:default;color:var(--ink2);border-color:var(--line)}
.rbtn.acc{color:var(--link);border-color:var(--bdg-tl-bd)}
#r-top{background:var(--brand);color:#fff;border-color:var(--brand)}
#r-top:hover:not(:disabled){background:var(--brand-txt);border-color:var(--brand-txt)}
#r-top:disabled{background:var(--panel2);color:var(--ink2);border-color:var(--line)}

/* Toast */
#toast{position:fixed;left:50%;bottom:calc(20px + var(--tabbar-h) + var(--safe-b));
  transform:translateX(-50%) translateY(14px);z-index:180;background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;
  pointer-events:none;max-width:calc(100vw - 28px);text-align:center;line-height:1.45;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.on.act{pointer-events:auto;border-radius:16px}
#toast .ta{border:1px solid var(--bg);color:var(--bg);background:transparent;border-radius:999px;
  padding:4px 12px;min-height:30px;font-size:13.5px;font-weight:700;flex:none}
#toast .ta:hover{background:var(--bg);color:var(--ink)}
#toast{transition:opacity .18s ease,transform .18s ease}
@media (prefers-reduced-motion:reduce){ #toast{transition:none} .rail{transition:none} }

/* .clip2／.clip3 已於第三輪移除：本工具不允許裁切內容文字（使用者 2026-09-06 要求），要縮就換行。 */

/* ══════════════ 斷點 ══════════════
   ⚠️ 覆寫要寫在被覆寫的規則「之後」，不然權重相同時後者才贏。 */
@media (min-width:961px){
  :root{--tabbar-h:0px}
  .tabbar{display:none}
  .navrow{display:flex}
  .hd{gap:12px;padding-block:9px}
  .hd h1{font-size:17px}
  main{padding:18px 16px 40px}
}
@media (max-width:960px){
  :root{--tabbar-h:56px}
  .tbtn.nb{display:inline-flex}
  /* 窄幕：膠囊放右下角。⚠️ transform:none 不可省，否則 translateY(-50%) 還在。
     ⚠️ 也不可垂直置中 —— 膠囊約 54px 寬，置中會壓在內容正中間，
        而窄幕依規範不讓內容讓位（手機不該為此犧牲可用寬度）。 */
  .rail{left:auto;right:9px;top:auto;
    bottom:calc(14px + var(--tabbar-h) + var(--safe-b));transform:none}
  .rail-mid{display:none}
  .hd .org{display:none}
}
@media (max-width:620px){
  /* 🔴 頂欄控制列在 375px 放不下，它會把整份文件撐寬 —— 於是整頁可以左右捲，
     而且固定定位的底部分頁列與側邊軌道也跟著跑到畫面外。
     症狀看起來像「軌道位置算錯」，其實根因在頂欄。
     解法是讓控制列換到第二行（四件套仍全部常駐可及，只是分兩列）。 */
  .hd{flex-wrap:wrap; row-gap:7px}
  .hd .spacer{display:none}
  .brandmark{flex:1 1 auto}
  .hdtools{flex-basis:100%; justify-content:space-between; gap:5px}
  .tbtn .lb{display:none}
  .frow{grid-template-columns:1fr;gap:4px}
  .frow>label.fl{padding-top:0}
  .f2,.f3{grid-template-columns:1fr}
  .clocks{gap:7px}
  .ev .tm{flex:0 0 4.1rem}
  .segwrap .btn{margin-left:0}
  /* 窄幕的金額用小一階的數字：390px 時 28px 的「NT$65,523」幾乎貼滿整張卡，
     視覺上很擠（量下來沒有溢出，但沒有餘裕）。 */
  .kpi .n{font-size:1.5rem}
  .kpis{gap:8px}
  .demobar{flex-wrap:wrap}
  .demobar .btn{margin-left:2.1rem}
}
@container (max-width:44rem){
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* ⚠️ 吃 CSS 變數的屬性不可掛 transition。切換主題時整張蓋掉，
      強制 reflow 後移除；移除後 transition 仍正常運作。 */
.no-tr,.no-tr *{transition:none!important;animation:none!important}

/* ══════════════ 列印 ══════════════
   ⚠️ 每個會上紙的元素都要覆寫成 pt，否則螢幕字級一改，列印版面跟著變。 */
@media print{
  .topbar,.tabbar,.rail,.mask,.sheet,#toast,.skip,.no-print,.daybar,.seg,.segwrap,
  .zonebar,.demobar{display:none!important}
  :root{--z:1}
  html{font-size:11pt}
  body{background:#fff;color:#111;font-size:11pt;line-height:1.5}
  main{max-width:none;padding:0;container-type:normal}
  .view{display:none}
  .view.on{display:block}
  .card{break-inside:avoid;box-shadow:none;border:1pt solid #bbb;margin-bottom:8pt;padding:8pt 10pt}
  .card>h3{font-size:12pt}
  .daysec{break-inside:auto}
  .dayhd h3{font-size:12.5pt}
  .dayhd .s{font-size:9pt}
  .ev{break-inside:avoid;box-shadow:none;border:.5pt solid #ccc;margin-bottom:5pt;padding:5pt 7pt}
  .ev .tm{font-size:9.5pt}
  .ev .ti{font-size:10.5pt}
  .ev .lo,.note,.muted,.mv{font-size:9pt}
  .mv{break-inside:avoid;margin-bottom:4pt;padding:3pt 6pt}
  .bdg,.star{font-size:8.5pt;border:.5pt solid #999}
  .kpi .n{font-size:15pt}
  .hero{background:none;border:1pt solid #999}
  .hero .cd{font-size:18pt}
  .chk{break-inside:avoid;padding:4pt 6pt;margin-bottom:3pt}
  .chk .tx{font-size:10pt}
  .isu{break-inside:avoid;box-shadow:none;padding:5pt 7pt}
  .isu .ti{font-size:10.5pt} .isu .de,.isu .fx{font-size:9pt}
  .clip2,.clip3,.wkc .n{max-height:none;mask-image:none;-webkit-mask-image:none}
  a{color:#111;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}

/* ══════════════════════════════════════════════════════════════════════════
   以下為 2026-09-03 第二輪（使用者核可的 17 項優化）新增的元件
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 營業時段條（優化 2）───────────────────────────────────
   一條 06:00–24:00 的軌：淡綠＝店家營業中、實色＝您排的停留時段。
   ⚠️ 兩段都要有**框線**，不能只靠顏色深淺 —— 實測填色與軌道底的
      ΔE00 只有 3.9，沒有框線看不出「從哪裡到哪裡」（同 fill.* 的規則）。 */
.hrwrap{margin-top:8px}
.hrbar{position:relative;height:1.5rem;border-radius:7px;background:var(--panel2);
  border:1px solid var(--line2);overflow:hidden}
.hrbar .op{position:absolute;top:0;bottom:0;background:var(--bdg-gn-bg);
  border-left:1px solid var(--bdg-gn-bd);border-right:1px solid var(--bdg-gn-bd)}
.hrbar .yo{position:absolute;top:4px;bottom:4px;border-radius:4px;
  background:var(--fill-on);border:1px solid var(--fill-on)}
.hrbar .yo.bad{background:var(--bdg-br-fg);border-color:var(--bdg-br-fg)}
.hrbar .tk{position:absolute;top:0;bottom:0;width:1px;background:var(--line2);opacity:.7}
.hrsc{display:flex;justify-content:space-between;font-size:var(--fs-chip);color:var(--ink2);
  margin-top:3px;font-variant-numeric:tabular-nums}
.hrlg{display:flex;gap:11px;flex-wrap:wrap;font-size:var(--fs-chip);color:var(--ink2);margin-top:5px}
.hrlg span{display:inline-flex;align-items:center;gap:5px}
.hrlg i{width:14px;height:11px;border-radius:3px;display:inline-block;flex:none;border:1px solid}
.hrlg i.o{background:var(--bdg-gn-bg);border-color:var(--bdg-gn-bd)}
.hrlg i.y{background:var(--fill-on);border-color:var(--fill-on)}
.hrlg i.b{background:var(--bdg-br-fg);border-color:var(--bdg-br-fg)}

/* ── 體力／步行（優化 4）─────────────────────────────── */
.load{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-chip);font-weight:650;
  padding:2px 9px;border-radius:var(--r-chip);white-space:nowrap;
  background:var(--bdg-gn-bg);color:var(--bdg-gn-fg);border:1px solid var(--bdg-gn-bd)}
.load.mid{background:var(--bdg-am-bg);color:var(--bdg-am-fg);border-color:var(--bdg-am-bd)}
.load.heavy{background:var(--bdg-or-bg);color:var(--bdg-or-fg);border-color:var(--bdg-or-bd)}

/* ── 備案（優化 1、17）───────────────────────────────── */
.altbar{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 4px}
.altbar button{padding:7px 12px;min-height:40px;border-radius:var(--r-sm);
  border:1px solid var(--ctrl-bd);background:var(--panel2);color:var(--ink);
  font-size:var(--fs-note);font-weight:650;white-space:nowrap}
.altbar button.on{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.altc{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;margin-bottom:8px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
  width:100%;text-align:left;font-size:1em}
.altc:hover{background:var(--hov-bg)}
.altc .pic{flex:0 0 2.4rem;height:2.4rem;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:1.2rem;background:var(--brand-soft);border:1px solid var(--brand-bd)}
.altc .bd{flex:1 1 auto;min-width:0}
.altc .nm{font-size:var(--fs-body);font-weight:700;display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.altc .wy{font-size:var(--fs-note);color:var(--ink2);margin-top:2px;line-height:1.5}
.altc .km{flex:none;font-size:var(--fs-chip);color:var(--ink2);font-variant-numeric:tabular-nums}

/* ── 大字地址卡（優化 7）─────────────────────────────
   給計程車司機看的。⚠️ 字要夠大而且**不可以截斷** —— 地址被切掉一半
   比沒有這張卡更糟（司機會照著錯的地址開）。 */
.bigcard{padding:6px 2px}
.bigcard .lb{font-size:var(--fs-note);color:var(--ink2);font-weight:650;margin-bottom:5px}
.bigcard .ad{font-size:1.6rem;font-weight:700;line-height:1.5;letter-spacing:.01em;
  word-break:break-word;margin-bottom:16px}
.bigcard .nm2{font-size:1.15rem;font-weight:650;line-height:1.5;margin-bottom:14px;color:var(--ink2)}
.bigcard .tel{font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;
  display:inline-block;margin-bottom:16px}
.bigcard .qr{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}

/* ── 打卡與照片（優化 8）─────────────────────────────── */
/* ⚠️ nowrap ＋ flex:none 缺一不可：在 flex 容器裡沒有它們的話，
   「取消」兩個字會被擠成上下兩行，而按鈕高度寫死了、量元件高度測不出來。 */
.ckbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;min-height:40px;flex:none;white-space:nowrap;text-decoration:none;
  border-radius:var(--r-sm);border:1px solid var(--ctrl-bd);background:var(--panel2);
  color:var(--ink);font-size:var(--fs-note);font-weight:650}
.ckbtn.on{background:var(--ok-on);border-color:var(--ok-on);color:var(--ok-on-fg)}
.ev .ckdot{flex:none;width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-on);color:var(--ok-on-fg);font-size:var(--fs-chip);font-weight:800;line-height:1;
  margin-top:2px}
.shots{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.shot{position:relative;width:5.5rem}
.shot img{width:5.5rem;height:5.5rem;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line2);display:block}
.shot .x{position:absolute;top:-8px;right:-8px;width:28px;height:28px;min-width:28px;min-height:28px;
  border-radius:50%;border:1px solid var(--ctrl-bd);background:var(--panel);color:var(--bdg-br-fg);
  font-size:13px;font-weight:800;display:grid;place-items:center;box-shadow:var(--sh);padding:0}

/* ── 預約與票券（優化 3）─────────────────────────────── */
.bkrow{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;margin-bottom:8px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
  border-left:4px solid var(--line2)}
.bkrow.done{border-left-color:var(--ok-on)}
.bkrow.todo{border-left-color:var(--bdg-am-fg)}
.bkrow.over{border-left-color:var(--bdg-br-fg)}
.bkrow .bd{flex:1 1 auto;min-width:0}
/* ⚠️ 這兩個要 display:block —— span 預設是 inline，於是「已訂好」與
   「期限 2026-10-10」會黏成同一行、中間沒有空隙，看起來像一句壞掉的話。 */
.bkrow .nm{display:block;font-size:var(--fs-body);font-weight:650;line-height:1.45}
.bkrow .mt{display:block;font-size:var(--fs-note);color:var(--ink2);margin-top:3px;line-height:1.5}
.bkrow .code{display:inline-block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-note);
  padding:1px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2)}
.bkrow input[type=text]{margin-top:7px}

/* ── 記帳與分帳（優化 5、6）──────────────────────────── */
.acgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.acgrid>div{min-width:0}
.setrow{display:flex;align-items:center;gap:10px;padding:12px 13px;margin-bottom:8px;
  border-radius:var(--r-sm);border:1px solid var(--bdg-tl-bd);background:var(--bdg-tl-bg);
  color:var(--bdg-tl-fg);font-size:var(--fs-body);font-weight:650;line-height:1.5}
.setrow .amt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.balrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);
  font-size:var(--fs-body);min-width:0}
.balrow .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.balrow .n2{flex:none;font-variant-numeric:tabular-nums}
.balrow .n2.pos{color:var(--bdg-gn-fg);font-weight:700}
.balrow .n2.neg{color:var(--bdg-br-fg);font-weight:700}

/* ── 行程改版比對（優化 10）──────────────────────────── */
.dfrow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:7px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
  border-left:4px solid var(--line2);font-size:var(--fs-body)}
.dfrow.add{border-left-color:var(--bdg-gn-fg)}
.dfrow.rm{border-left-color:var(--bdg-br-fg)}   /* ⚠️ 原本叫 .del，與清單頁刪除鈕的 .del（44×44）撞名，整列被壓成 44px（2026-09-06 使用者附圖回報） */
.dfrow.chg{border-left-color:var(--bdg-am-fg)}
.dfrow .bd{flex:1 1 auto;min-width:0}
.dfrow .nm{font-weight:650;line-height:1.45;display:block;overflow-wrap:anywhere}
.dfrow .fl2{font-size:var(--fs-note);color:var(--ink2);margin-top:3px;line-height:1.55;display:block;overflow-wrap:anywhere}   /* 一個欄位一行，不再黏在一起 */
.dfrow .fl2 b{color:var(--ink)}
.dfsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:9px;margin-bottom:12px}
.dfsum>div{padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel);min-width:0}
.dfsum .l{font-size:var(--fs-note);color:var(--ink2)}
.dfsum .v{font-size:var(--fs-body);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}

/* ── 精簡版分享的勾選（優化 15）────────────────────────── */
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:7px;margin:9px 0}
.optgrid label{display:flex;align-items:center;gap:8px;font-size:var(--fs-note);
  padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);
  min-height:42px}
.optgrid input{width:19px;height:19px;min-height:19px;flex:none;accent-color:var(--brand)}

/* ══════════════ A4 紙本行程表（優化 13）══════════════
   ⚠️ 這是**另一套**列印樣式，只在 body 加了 .print-a4 時生效。
      與畫面上的列印共用同一份 CSS 會互相打架（一個要連續、一個要一天一頁）。 */
@media print{
  body.print-a4 .view{display:none!important}
  body.print-a4 #a4{display:block!important}
  #a4{display:none}
  #a4 .pg{page-break-after:always;break-after:page;padding:0}
  #a4 .pg:last-child{page-break-after:auto;break-after:auto}
  #a4 .ph{border-bottom:1.5pt solid #333;padding-bottom:5pt;margin-bottom:8pt;
    display:flex;align-items:baseline;gap:8pt}
  #a4 .ph h2{font-size:15pt;margin:0}
  #a4 .a4qr{display:flex;gap:10pt;align-items:center;margin-bottom:8pt;padding:6pt;border:.5pt solid #999;break-inside:avoid}
  #a4 .a4qr svg{width:2.6cm;height:2.6cm;flex:none}
  #a4 .a4qr .u{font-size:9pt;line-height:1.45;word-break:break-all;color:#222}
  #a4 .ph .s{font-size:9.5pt;color:#444;margin-left:auto}
  #a4 .it{display:flex;gap:8pt;padding:5pt 0;border-bottom:.5pt solid #ccc;break-inside:avoid}
  #a4 .it .tm{flex:0 0 52pt;font-size:10pt;font-weight:700;font-variant-numeric:tabular-nums}
  #a4 .it .bd{flex:1 1 auto}
  #a4 .it .ti{font-size:11pt;font-weight:700}
  #a4 .it .lo{font-size:9pt;color:#444;margin-top:1pt}
  #a4 .it .tp{font-size:8.5pt;color:#333;margin-top:2pt}
  #a4 .mv2{font-size:9pt;color:#333;padding:2pt 0 2pt 60pt;break-inside:avoid}
  #a4 .ft{margin-top:10pt;padding-top:6pt;border-top:.5pt solid #999;font-size:8.5pt;color:#444}
  #a4 .ft b{color:#111}
  @page{size:A4;margin:14mm 13mm}
}
#a4{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   第三輪（2026-09-06）：流程總覽、說明方塊、一鍵調整、伴手禮順路、發布與 QR
   ⚠️ 全部只用既有的 CSS 變數，沒有新色碼（色源查核才過得了）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 說明方塊：滑過／點按／鍵盤聚焦三種都能開，位置由 JS 夾在視窗內 ── */
#tip{position:fixed;z-index:190;max-width:min(330px,calc(100vw - 24px));padding:10px 13px;
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);border:1px solid var(--ctrl-bd);
  box-shadow:var(--sh-lg);font-size:var(--fs-note);line-height:1.55;font-weight:500;
  opacity:0;visibility:hidden;pointer-events:none;overflow-wrap:anywhere}
#tip.on{opacity:1;visibility:visible}
#tip b{color:var(--brand-txt)}
#tip .k{display:block;margin-top:5px;color:var(--ink2)}
.tipbtn{display:inline-grid;place-items:center;width:max(38px,2.2rem);height:max(38px,2.2rem);border-radius:50%;flex:none;   /* 觸控目標 ≥38px */
  border:1px solid var(--ctrl-bd);background:var(--panel2);color:var(--ink2);
  font-size:var(--fs-note);font-weight:800;line-height:1;padding:0;vertical-align:middle;margin-left:4px}
.tipbtn:hover,.tipbtn.on{background:var(--brand-soft);border-color:var(--brand-bd);color:var(--brand-txt)}

/* ── 流程總覽：圖卡 ── */
.flow{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:10px;margin-bottom:14px}
.fcard{display:flex;flex-direction:column;gap:6px;padding:12px 13px 12px 14px;border-radius:var(--r);
  border:1px solid var(--line);border-left:4px solid var(--line2);background:var(--panel);box-shadow:var(--sh)}
.fcard.done{border-left-color:var(--ok-on)}
.fcard.next{border-left-color:var(--brand);background:var(--brand-soft);border-color:var(--brand-bd)}
.fcard .fh{display:flex;align-items:center;gap:8px}
.fcard .num{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:var(--fs-chip);font-weight:800;background:var(--fill-rest);color:var(--brand-txt);border:1px solid var(--fill-rest-bd)}
.fcard.done .num{background:var(--ok-on);color:var(--ok-on-fg);border-color:var(--ok-on)}
.fcard.next .num{background:var(--fill-on);color:var(--fill-on-fg);border-color:var(--fill-on)}
.fcard .ti{font-size:var(--fs-body);font-weight:700;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.fcard .st{font-size:var(--fs-note);color:var(--ink2);line-height:1.5}
.fcard .st.ok{color:var(--bdg-gn-fg)}
.fcard .st.bad{color:var(--bdg-br-fg)}
.fcard.next .st{color:var(--ink)}   /* --ink2 疊在 brand-soft 只有 4.34，未達 4.5 */
.fcard .btnrow{margin-top:2px}
.flowbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.flowbar button{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;min-height:36px;border-radius:999px;
  border:1px solid var(--line2);background:var(--panel);font-size:var(--fs-chip);font-weight:650;color:var(--ink2)}
.flowbar button.done{border-color:var(--bdg-gn-bd);color:var(--bdg-gn-fg);background:var(--bdg-gn-bg)}
.flowbar button.next{border-color:var(--brand-bd);color:var(--brand-txt);background:var(--brand-soft)}
.flowbar button:hover{border-color:var(--hov-bar)}

/* ── 健檢一鍵調整 ── */
.isuwrap{margin-bottom:10px}
.fixlist{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px 2.1rem}
.fixbtn{display:flex;gap:9px;align-items:flex-start;text-align:left;width:100%;padding:9px 12px;
  border-radius:var(--r-sm);border:1px solid var(--ctrl-bd);background:var(--panel2);color:var(--ink)}
.fixbtn:hover{background:var(--hov-bg);border-color:var(--hov-bar)}
.fixbtn .ic{flex:none;line-height:1.5}
.fixbtn .bd{flex:1 1 auto;min-width:0}
.fixbtn .lb{font-size:var(--fs-body);font-weight:700;overflow-wrap:anywhere}
.fixbtn .de{display:block;font-size:var(--fs-note);color:var(--ink2);font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.fixbtn.cl{border-style:dashed;background:var(--panel)}
.fixhd{font-size:var(--fs-chip);font-weight:700;color:var(--ink2);margin:6px 0 0 2.1rem}

/* ── 伴手禮順路方案 ── */
.svplan{margin:2px 0 8px 2.2rem;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--brand-soft);border:1px solid var(--brand-bd);font-size:var(--fs-note);line-height:1.55;overflow-wrap:anywhere}
.svplan.none{background:var(--bdg-am-bg);border-color:var(--bdg-am-bd);color:var(--bdg-am-fg)}
.svplan.done{background:var(--bdg-gn-bg);border-color:var(--bdg-gn-bd);color:var(--bdg-gn-fg)}
.svplan .btnrow{margin-top:7px}
.svplan b{font-weight:750}
.chk .tx small{display:block;white-space:normal;overflow-wrap:anywhere}

/* ── 匯入驗證報告 ── */
.vsum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.vrow{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-note);line-height:1.5}
.vrow .lv{flex:none}
.vrow .bd{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.vrow .wh{font-weight:700;color:var(--ink)}
.vrow .fx{color:var(--ink2)}

/* ── 日內順序調整（▲▼） ── */
.evrow{display:flex;gap:8px;align-items:stretch;margin-bottom:9px}
.evrow .ev{flex:1 1 auto;min-width:0;margin-bottom:0}
.ordbtns{display:flex;flex-direction:column;gap:4px;flex:none;justify-content:center}
.ordbtns button{width:2.3rem;height:2.3rem;padding:0;border-radius:8px;border:1px solid var(--ctrl-bd);
  background:var(--panel2);color:var(--ink);font-size:var(--fs-chip);font-weight:800;line-height:1}
.ordbtns button:disabled{opacity:.35;cursor:default}
.ordbtns button:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand-bd);color:var(--brand-txt)}

/* ── 時間快調與營業倒數 ── */
.tq{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.tq button{padding:6px 11px;min-height:38px;border-radius:var(--r-sm);border:1px solid var(--ctrl-bd);
  background:var(--panel2);color:var(--ink);font-size:var(--fs-note);font-weight:650}
.tq button:hover{background:var(--brand-soft);border-color:var(--brand-bd);color:var(--brand-txt)}
.tq label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-note);color:var(--ink2);padding:4px 2px}
.closing{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-chip);
  font-size:var(--fs-chip);font-weight:650;background:var(--bdg-am-bg);color:var(--bdg-am-fg);border:1px solid var(--bdg-am-bd)}
.closing.shut{background:var(--bdg-br-bg);color:var(--bdg-br-fg);border-color:var(--bdg-br-bd)}
.closing.ok{background:var(--bdg-gn-bg);color:var(--bdg-gn-fg);border-color:var(--bdg-gn-bd)}

/* ── 電話確認提醒 ── */
.callrow{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.callrow:last-child{border-bottom:0}
.callrow .bd{flex:1 1 auto;min-width:0;font-size:var(--fs-note);overflow-wrap:anywhere}
.callrow .nm{font-weight:700;font-size:var(--fs-body);color:var(--ink)}
.callrow .why{color:var(--ink2)}

/* ── 版本歷程 ── */
.verrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-note)}
.verrow:last-child{border-bottom:0}
.verrow .bd{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.verrow .lb{font-weight:700;color:var(--ink)}
.verrow .at{color:var(--ink2)}

/* ── 發布與 QR ── */
.pubbox{padding:12px 13px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel2);margin-top:8px}
.pubbox .url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-body);word-break:break-all;color:var(--ink);font-weight:600}
.pubbox .st{font-size:var(--fs-note);color:var(--ink2);margin-top:4px}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:7px;margin-top:8px}
.steps li{display:flex;gap:9px;font-size:var(--fs-note);line-height:1.55;overflow-wrap:anywhere}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;background:var(--fill-rest);color:var(--brand-txt);border:1px solid var(--fill-rest-bd);
  font-size:var(--fs-chip);font-weight:800}
.qrbox{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
/* QR 一律白底黑格 —— 掃描器要的是這個對比，不跟主題走 */
.qrbox svg{width:184px;height:184px;background:#fff;border:1px solid var(--line2);border-radius:8px;padding:8px;flex:none}
.qrbox .bd{flex:1 1 12rem;min-width:0;font-size:var(--fs-note);color:var(--ink2);overflow-wrap:anywhere}
/* 工作紀錄框：能捲、要有捲動陰影（§七⑨：藏了捲軸就要補提示） */
.joblog{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-chip);white-space:pre-wrap;word-break:break-all;
  max-height:14rem;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:8px;color:var(--ink);
  background:
    linear-gradient(var(--panel2) 30%, rgba(0,0,0,0)) top / 100% 26px no-repeat,
    linear-gradient(rgba(0,0,0,0), var(--panel2) 70%) bottom / 100% 26px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(58,63,82,.20), rgba(0,0,0,0)) top / 100% 10px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(58,63,82,.20), rgba(0,0,0,0)) bottom / 100% 10px no-repeat,
    var(--panel2);
  background-attachment:local,local,scroll,scroll,scroll}

/* ── 拖放匯入的遮罩 ── */
#drop{position:fixed;inset:0;z-index:170;display:none;place-items:center;pointer-events:none;
  background:var(--hov-bg);outline:4px dashed var(--brand);outline-offset:-10px}
#drop.on{display:grid}
#drop div{background:var(--panel);color:var(--ink);padding:16px 24px;border-radius:var(--r);
  font-size:var(--fs-lead);font-weight:700;box-shadow:var(--sh-lg);border:1px solid var(--brand-bd)}

.wkc .lo{display:block;font-weight:500;color:var(--ink2);font-size:var(--fs-chip);margin-top:2px;overflow-wrap:anywhere}
/* 事件細節裡的電話列 */
.telrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}