/* guide.css — /guide/ 使用教學（自包含：不依賴 /css/*.css，無外部字型） */
:root{
  /* 站點 Editorial 色票（沿用 editorial.css 的 palette 值） */
  --paper:#F0F9FF;
  --paper-2:#E6F3FD;
  --ink:#0B1F33;
  --ink-soft:#446B85;
  --ink-dim:#7DA4B8;
  --cyan:#4FB4FF;
  --cyan-deep:#1F8BD6;
  --rule:#BAE1F3;
  --card:#FFFFFF;

  /* App 內畫面重現用 token（對應 lib RouteDesignSystem / AppTheme，勿隨意改） */
  --app-bg:#FBFBF7;
  --app-ink:#0B1F26;
  --app-muted:#4A5C66;
  --app-dim:#8896A0;
  --app-border:rgba(11,31,38,.09);
  --tra:#2196F3;
  --hsr:#C35617;
  --ok-green:#4CAF50;
  --warn-orange:#FF9800;
  --type-red:#F44336;

  --font-serif:'Noto Serif TC',Georgia,'Times New Roman',serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'PingFang TC','Noto Sans TC','Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0A1620;
    --paper-2:#0E1D2A;
    --ink:#E4EEF6;
    --ink-soft:#9FBAD0;
    --ink-dim:#5F7C93;
    --cyan:#4FB4FF;
    --cyan-deep:#54AEEA;
    --rule:#1C3850;
    --card:#10222F;
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--cyan-deep)}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* =========== Masthead =========== */
.mast{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;max-width:760px;margin:0 auto}
.mast .left{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.mast .mark{flex:none;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#34D399,#10B981);display:flex;align-items:center;justify-content:center}
.mast .mark svg{width:19px;height:19px;fill:#fff}
.mast .brand{font-family:var(--font-serif);font-size:17px;font-weight:500;line-height:1.15}
.mast .brand small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-soft);font-weight:400;margin-top:2px}

/* =========== Issue strip =========== */
.issue{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 20px;max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.issue .hl{color:var(--cyan-deep)}

/* =========== Hero =========== */
.hero{padding:44px 0 34px}
.hero .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--cyan-deep);text-transform:uppercase;margin-bottom:14px}
.hero h1{font-family:var(--font-serif);font-weight:500;font-size:34px;line-height:1.2;letter-spacing:-.01em;margin-bottom:16px}
.hero .lede{font-size:15.5px;line-height:1.85;color:var(--ink-soft);max-width:560px}

/* =========== TOC =========== */
.toc{margin:6px 0 14px;border:1px solid var(--rule);border-radius:14px;background:var(--card);padding:16px 18px}
.toc .toc-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.toc ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.toc a{display:flex;gap:9px;align-items:baseline;padding:5px 2px;text-decoration:none;color:var(--ink);font-size:13.5px;border-radius:6px}
.toc a:hover{color:var(--cyan-deep)}
.toc .n{font-family:var(--font-mono);font-size:10.5px;color:var(--cyan-deep)}
@media (max-width:359px){.toc ol{grid-template-columns:1fr}}

/* =========== Sections =========== */
section{padding:34px 0 6px;border-top:1px solid var(--rule);margin-top:26px}
section:first-of-type{border-top:none;margin-top:0}
h2{font-family:var(--font-serif);font-weight:500;font-size:24px;line-height:1.3;margin-bottom:6px;scroll-margin-top:18px}
h2 .sec-no{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--cyan-deep);display:block;margin-bottom:8px}
h3{font-size:16px;font-weight:600;letter-spacing:.01em;margin:26px 0 8px}
p{margin:10px 0;color:var(--ink);font-size:15px}
p.note,li.note{color:var(--ink-soft);font-size:13.5px}
section > p:first-of-type{color:var(--ink-soft)}
ul,ol{padding-left:22px;margin:10px 0}
li{margin:5px 0;font-size:15px}
strong{font-weight:600;color:var(--cyan-deep)}

/* 動作 → 結果 → 適用條件 三段式 */
.how{border:1px solid var(--rule);border-radius:14px;background:var(--card);margin:16px 0;overflow:hidden}
.how .row{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--rule);align-items:baseline}
.how .row:first-child{border-top:none}
.how .k{flex:none;width:74px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--cyan-deep);text-transform:uppercase;padding-top:3px}
.how .v{font-size:14px;line-height:1.7}
.how .v small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:2px}

/* =========== 說明圖框 =========== */
.fig{margin:20px 0;border:1px solid var(--rule);border-radius:16px;background:var(--card);overflow:hidden}
.fig .stage{background:var(--app-bg);padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:0}
.fig figcaption{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-top:1px solid var(--rule)}
.fig figcaption .step{flex:none;width:22px;height:22px;border-radius:50%;background:var(--cyan-deep);color:#fff;font-family:var(--font-mono);font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.fig figcaption p{margin:0;font-size:13.5px;line-height:1.65}
.fig figcaption p .hint{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}

/* 製作中 placeholder（部署前必須清零） */
.fig .pending{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--rule);border-radius:12px;color:var(--ink-dim);font-family:var(--font-mono);font-size:12px;letter-spacing:.12em}

/* =========== App 畫面重現：通用 =========== */
.app-scene{width:100%;max-width:392px;font-family:var(--font-sans);color:var(--app-ink)}
.app-scene .mono{font-family:var(--font-mono);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.app-scene .stamp{font-weight:600;letter-spacing:.15em}

/* 列表上下文提示 */
.peek{height:18px;background:#fff;border:1px solid var(--app-border);opacity:.5}
.peek.top{border-radius:0 0 18px 18px;border-top:none;margin-bottom:9px}
.peek.bottom{border-radius:18px 18px 0 0;border-bottom:none;margin-top:9px}

/* ── 台鐵列車卡（ExpandableRailCard compact header） ── */
.train-card{position:relative;background:#fff;border:1px solid var(--app-border);border-radius:18px;padding:11px 11px 11px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(11,31,38,.06)}
.train-card .train-col{width:64px;flex:none}
.train-card .train-no{font-size:19px;line-height:1.1}
.train-card .chip{display:inline-block;margin-top:4px;padding:1.5px 6px;border-radius:5px;font-size:9px;color:var(--type-red);background:rgba(244,67,54,.18);border:1px solid rgba(244,67,54,.35)}
.train-card .chip.c-blue{color:var(--tra);background:rgba(33,150,243,.18);border-color:rgba(33,150,243,.35)}
.train-card .chip.c-orange{color:var(--warn-orange);background:rgba(255,152,0,.18);border-color:rgba(255,152,0,.35)}
.train-card .time-col{flex:1;min-width:0}
.train-card .time-row{display:flex;align-items:center;gap:8px}
.train-card .time{font-size:16.5px}
.train-card .track{flex:1;height:3px;border-radius:2px;background:var(--tra)}
.train-card .track.hsr{background:var(--hsr)}
.train-card .sub-row{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;color:var(--app-muted);white-space:nowrap;overflow:hidden}
.train-card .trail-col{width:58px;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.train-card .badge{padding:1.5px 6px;border-radius:5px;font-size:9px;color:var(--ok-green);background:rgba(76,175,80,.14);border:1px solid rgba(76,175,80,.35)}
.train-card .badge.b-orange{color:var(--warn-orange);background:rgba(255,152,0,.14);border-color:rgba(255,152,0,.35)}
.train-card .price{font-size:12.5px;color:var(--tra)}
.train-card .chev{color:var(--app-dim);font-size:13px;line-height:1;margin-right:2px}

/* ── 滑動組合（SwipeableTrainCard；外層=ClipRRect） ── */
.swipe-stack{position:relative;height:84px;border-radius:18px;overflow:hidden}
.swipe-stack .train-card{position:absolute;inset:0 5px}
.swipe-stack .swipe-bg{position:absolute;inset:4px 7px;border-radius:18px;display:flex;align-items:center;padding:0 16px}
.swipe-bg.fav{background:rgba(33,150,243,.18);border:1px solid rgba(33,150,243,.35);justify-content:flex-end}
.swipe-bg.fav.on{background:rgba(255,152,0,.18);border-color:rgba(255,152,0,.35)}
.swipe-bg.book{background:rgba(33,150,243,.18);border:1px solid rgba(33,150,243,.35);justify-content:flex-start}
.swipe-bg.book.hsr,.swipe-bg.fav.hsr{background:rgba(195,86,23,.18);border-color:rgba(195,86,23,.35)}
.swipe-stack .card-left{transform:translateX(-88px)}
.swipe-stack .card-right{transform:translateX(88px)}
.action-btn{width:72px;display:flex;flex-direction:column;align-items:center;gap:4px}
.action-btn svg{width:23px;height:23px}
.action-btn .label{font-size:10px;color:var(--tra);white-space:nowrap}
.action-btn.a-orange .label{color:var(--warn-orange)}
.action-btn.a-hsr .label{color:var(--hsr)}

/* 手勢箭頭疊層 */
.gesture{position:absolute;inset:0;pointer-events:none}

/* =========== FAQ =========== */
.faq dt{font-weight:600;font-size:15px;margin-top:18px}
.faq dd{margin:6px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.75}

/* =========== Footer =========== */
footer{margin-top:56px;border-top:1px solid var(--rule);padding:26px 0 46px;color:var(--ink-soft);font-size:13px}
footer .foot-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--cyan-deep);text-decoration:none}

/* =========== 查詢結果頁首（T01） =========== */
.appbar{width:100%;max-width:392px;background:var(--tra);border-radius:16px 16px 0 0;padding:12px 8px 12px 10px;color:#fff}
.appbar .row1{display:flex;align-items:flex-start;gap:4px}
.appbar .icon-btn{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;position:relative}
.appbar .icon-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.appbar .titles{flex:1;min-width:0;padding-top:2px}
.appbar .title{font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.appbar .stations{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.appbar .st-chip{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:2.5px 4px 2.5px 8px;font-family:var(--font-mono);font-size:11px;font-weight:500;color:rgba(255,255,255,.92)}
.appbar .st-chip .c{font-size:10px;opacity:.85}
.appbar .st-arrow{color:rgba(255,255,255,.8);font-size:11px}
.ring::after{content:"";position:absolute;inset:-3px;border:2.5px solid #fff;border-radius:50%;box-shadow:0 1px 6px rgba(11,31,38,.35)}
.under-peek{max-width:392px;width:100%;height:26px;background:#fff;border:1px solid var(--app-border);border-top:none;border-radius:0 0 16px 16px;opacity:.6}

/* =========== 即時看板（T02） =========== */
.lb{width:100%;max-width:392px;background:#fff;border:1px solid var(--app-border);border-radius:18px;overflow:hidden}
.lb .lb-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px 15px;border-bottom:1px solid var(--app-border)}
.lb .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--tra)}
.lb .lb-stamp{font-size:10px;color:var(--tra)}
.lb .lb-station{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--app-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb .lb-page{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--app-muted)}
.lb .lb-full{flex:none;width:26px;height:26px;border-radius:50%;background:#F3F6F2;border:1px solid var(--app-border);display:flex;align-items:center;justify-content:center;position:relative}
.lb .lb-full svg{width:13px;height:13px;stroke:var(--app-muted);fill:none;stroke-width:2;stroke-linecap:round}
.lb .lb-row{margin:8px 12px 4px;padding:7px 12px;border:1px solid var(--app-border);border-radius:13px;display:flex;align-items:center;gap:10px}
.lb .lb-left{flex:1;min-width:0}
.lb .l1{display:flex;align-items:center;gap:6px}
.lb .tt-badge{padding:1px 6px;background:rgba(33,150,243,.18);border:1px solid rgba(33,150,243,.35);border-radius:5px;font-size:9px;color:var(--tra)}
.lb .tno{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--app-ink)}
.lb .l2{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.lb .to-stamp{font-size:9px;color:var(--app-muted)}
.lb .to-name{font-size:12px;font-weight:500;color:var(--app-ink)}
.lb .cell{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lb .cell .cl{font-size:9px;color:var(--app-muted)}
.lb .cell .cv{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--app-ink)}
.lb .status{padding:2.5px 6px;border-radius:5px;font-size:9px}
.lb .status.ok{color:#0FA97B;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4)}
.lb .status.late{color:var(--warn-orange);background:rgba(255,152,0,.14);border:1px solid rgba(255,152,0,.35)}
.lb .dots{display:flex;justify-content:center;gap:4px;padding:6px 0 9px}
.lb .pd{height:5px;width:5px;border-radius:3px;background:rgba(11,31,38,.14)}
.lb .pd.cur{width:16px;background:var(--tra)}

/* =========== 車站詳細頁（T03–T05／H02–H03） =========== */
.sd{width:100%;max-width:392px}
.sd .sd-stamp{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--tra);text-transform:uppercase}
.sd .sd-stamp.hsr{color:var(--hsr)}
.sd .sd-stamp.bike{color:#B87F16}
.sd .sd-name{font-family:var(--font-serif);font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--app-ink);margin:3px 0 2px}
.sd .sd-meta{display:flex;gap:6px;align-items:baseline;font-size:11.5px;color:var(--app-muted);margin-top:3px}
.sd .sd-meta .ml{font-size:10.5px;color:var(--app-dim)}
.sd .sd-block{margin-top:13px}
.sd .sd-card{background:#fff;border:1px solid var(--app-border);border-radius:13px;margin-top:7px;overflow:hidden}
.sd .wx{display:flex;padding:9px 0}
.sd .wx .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px}
.sd .wx .col + .col{border-left:1px solid var(--app-border)}
.sd .wx svg{width:21px;height:21px}
.sd .wx .wl{font-size:10px;color:var(--app-muted)}
.sd .wx .wv{font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--app-ink)}
.sd .wx .wv.txt{font-family:var(--font-sans);font-size:13px}
.sd .ir{display:flex;gap:9px;padding:10px 12px;align-items:center}
.sd .ir + .ir{border-top:1px solid var(--app-border)}
.sd .ir svg{flex:none;width:16px;height:16px;stroke:var(--tra);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sd .ir.hsr svg{stroke:var(--hsr)}
.sd .ir .il{flex:none;width:52px;font-size:11px;color:var(--app-muted)}
.sd .ir .iv{flex:1;font-size:13px;color:var(--app-ink)}
.sd .ir .iv.link{color:var(--tra);text-decoration:underline;text-underline-offset:2px}
.sd .pills{display:flex;gap:8px;margin-top:7px}
.sd .pill{padding:5px 12px;border-radius:12px;border:1px solid var(--app-border);font-size:12px;color:var(--app-muted)}
.sd .pill.sel{background:rgba(33,150,243,.18);border-color:rgba(33,150,243,.45);color:var(--tra);font-weight:500}
.sd .pill.sel.hsr{background:rgba(255,152,0,.18);border-color:rgba(255,152,0,.45);color:var(--hsr)}
.sd .ph-strip{display:flex;gap:10px;margin-top:7px}
.sd .ph .img{width:132px;height:88px;background:#EDF1EA;border:1px solid var(--app-border);border-radius:10px;display:flex;align-items:center;justify-content:center}
.sd .ph .img svg{width:24px;height:24px;stroke:var(--app-dim);fill:none;stroke-width:1.6}
.sd .ph .pc{font-size:10.5px;color:var(--app-muted);margin-top:5px}
.sd .li{display:flex;align-items:center;gap:8px;padding:9px 12px}
.sd .li + .li{border-top:1px solid var(--app-border)}
.sd .li .bullet{flex:none;width:4px;height:4px;border-radius:50%;background:var(--app-dim)}
.sd .li .ln{font-size:13px;color:var(--app-ink)}
.sd .li .lloc{font-size:11px;color:var(--app-muted)}
.sd .bus-name{font-size:13px;font-weight:500;color:var(--app-ink)}
.sd .bus-dist{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--app-muted)}
.sd .rt-chips{display:flex;gap:6px;padding:0 12px 10px}
.sd .rt{padding:2px 8px;border-radius:5px;background:rgba(33,150,243,.18);border:1px solid rgba(33,150,243,.35);font-size:10px;color:var(--tra)}
.sd .bk-badge{padding:2px 8px;border-radius:5px;background:rgba(232,163,61,.16);border:1px solid rgba(232,163,61,.35);font-family:var(--font-mono);font-size:10.5px;color:#B87F16}
.sd .explore{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;padding:12px;border-radius:13px;background:rgba(33,150,243,.14);border:1px solid rgba(33,150,243,.35);color:var(--tra);font-size:13.5px;font-weight:500}
.sd .explore svg{width:17px;height:17px;stroke:var(--tra);fill:none;stroke-width:1.8;stroke-linecap:round}
.sd .ftab{display:flex;border-bottom:1px solid var(--app-border);margin:2px 12px 0}
.sd .ftab span{flex:1;text-align:center;padding:9px 0;font-size:12.5px;color:var(--app-muted)}
.sd .ftab span.sel{color:var(--app-ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--hsr)}
.sd .floor-map{margin:10px 12px;height:110px;background:#F0F3EE;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--app-dim);font-size:11px}
.sd .legend{display:flex;gap:7px;padding:0 12px 11px;overflow:hidden}
.sd .lg{display:inline-flex;align-items:center;gap:6px;background:#F6F8F4;border:1px solid var(--app-border);border-radius:8px;padding:4px 10px 4px 5px;white-space:nowrap}
.sd .lg .n{width:17px;height:17px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9.5px;font-weight:500}
.sd .lg .t{font-size:11px;color:var(--app-muted)}
.sd .tr-row{display:flex;align-items:center;gap:10px;padding:10px 12px}
.sd .tr-row + .tr-row{border-top:1px solid var(--app-border)}
.sd .tr-row svg{flex:none;width:16px;height:16px;stroke:var(--hsr);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd .tr-row .tn{flex:1;font-size:13px;color:var(--app-ink)}
.sd .tr-row .exp{color:var(--app-dim);font-size:12px}
.sd .lk-row{display:flex;align-items:center;gap:9px;padding:9px 12px}
.sd .lk-row + .lk-row{border-top:1px solid var(--app-border)}
.sd .lk-row .z{width:36px;font-family:var(--font-mono);font-size:10.5px;color:var(--app-muted)}
.sd .lk-row .sz{width:30px;font-size:11.5px;color:var(--app-muted)}
.sd .lk-row .bar{flex:1;height:4px;border-radius:2px;background:#ECF6F8;overflow:hidden}
.sd .lk-row .bar i{display:block;height:100%;border-radius:2px;background:#45B3A5}
.sd .lk-row .bar i.low{background:#E5484D}
.sd .lk-row .cnt{font-family:var(--font-mono);font-size:11px;color:var(--app-ink)}
.sd .news{display:flex;gap:12px;padding:11px 12px;align-items:flex-start}
.sd .news + .news{border-top:1px solid var(--app-border)}
.sd .news .date{flex:none;width:34px;text-align:center}
.sd .news .dd{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--app-ink);line-height:1.1}
.sd .news .dm{font-family:var(--font-mono);font-size:8.5px;color:var(--app-dim);letter-spacing:.1em}
.sd .news .nt{flex:1;font-size:12.5px;line-height:1.5;color:var(--app-ink)}
.sd .news .exp{color:var(--app-dim);font-size:12px}
.sd .shop-strip{display:flex;gap:10px;margin-top:7px}
.sd .shop{width:126px;border:1px solid var(--app-border);border-radius:11px;background:#fff;overflow:hidden}
.sd .shop .img{height:64px;background:#F0F3EE;display:flex;align-items:center;justify-content:center}
.sd .shop .img svg{width:20px;height:20px;stroke:var(--app-dim);fill:none;stroke-width:1.6}
.sd .shop .sn{font-size:11.5px;color:var(--app-ink);padding:7px 9px 8px}

/* =========== 追蹤頁卡片（W 系列） =========== */
.wc{width:100%;max-width:392px;background:#fff;border:1px solid var(--app-border);border-radius:15px;padding:12px 14px;position:relative}
.wc .r1{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--app-ink)}
.wc .r1 .arr{color:var(--app-muted);font-size:11px}
.wc .r2{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
.wc .t{font-family:var(--font-mono);font-size:17.5px;font-weight:500;color:var(--app-ink)}
.wc .arr2{color:var(--app-muted);font-size:12px}
.wc .dur{font-family:var(--font-mono);font-size:11px;color:var(--app-muted);white-space:nowrap}
.wc .acts{margin-left:auto;display:flex;align-items:center;gap:7px}
.wc .book{font-size:10px;color:var(--tra);white-space:nowrap}
.wc .ib{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.wc .ib svg{width:20px;height:20px;stroke:var(--tra);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wc .ib svg.fill{fill:var(--tra);stroke:none}
.wc .chip-rem{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:3px 8px 3px 10px;border-radius:8px;background:rgba(33,150,243,.08);border:1px solid rgba(33,150,243,.3)}
.wc .chip-rem svg{width:13px;height:13px;stroke:var(--tra);fill:none;stroke-width:1.9;stroke-linecap:round}
.wc .chip-rem .rt{font-size:10px;color:var(--tra)}
.wc .chip-rem .sep{width:1px;height:12px;background:rgba(33,150,243,.25);margin:0 3px}
.wc .chip-rem .x{font-size:12px;color:var(--tra);line-height:1}
.an{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--cyan-deep);color:#fff;font-family:var(--font-mono);font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px #fff}
.an-legend{margin:8px 0 0;padding:0;list-style:none;width:100%;max-width:392px}
.an-legend li{display:flex;gap:8px;font-size:12px;color:var(--app-muted);margin:3px 0}
.an-legend .an-s{flex:none;width:17px;height:17px;border-radius:50%;background:var(--cyan-deep);color:#fff;font-family:var(--font-mono);font-size:9.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* =========== 提醒選單 dialog（W03） =========== */
.scrim{width:100%;max-width:392px;background:rgba(11,31,38,.32);padding:20px 26px;border-radius:16px;display:flex;justify-content:center}
.dlg{width:100%;max-width:280px;background:#fff;border-radius:18px;padding:16px 14px 10px;box-shadow:0 18px 44px rgba(11,31,38,.22)}
.dlg .d-head{display:flex;align-items:center;gap:10px;margin:0 4px 10px}
.dlg .d-ic{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(33,150,243,.14);display:flex;align-items:center;justify-content:center}
.dlg .d-ic svg{width:19px;height:19px;stroke:var(--tra);fill:none;stroke-width:1.9;stroke-linecap:round}
.dlg .d-title{font-size:15px;font-weight:600;color:var(--app-ink)}
.dlg .opt{padding:11px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--app-ink)}
.dlg .opt.sel{background:rgba(33,150,243,.1)}
.dlg .opt.danger{color:#E5484D}
.dlg .d-cancel{text-align:right;color:var(--app-muted);font-size:13px;padding:10px 12px 6px}

/* =========== Live Activity 兩態（L01–L02） =========== */
.duo{display:flex;gap:12px;width:100%;max-width:392px}
.duo .panel{flex:1;background:#fff;border:1px solid var(--app-border);border-radius:13px;padding:13px 10px;display:flex;flex-direction:column;align-items:center;gap:7px}
.duo .panel .pl{font-size:9.5px;color:var(--app-dim);font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.duo .panel svg{width:23px;height:23px;stroke:var(--tra);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.duo .panel .pt{font-size:12.5px;font-weight:500;color:var(--app-ink)}

/* =========== 高鐵卡（H 系列） =========== */
.hc{width:100%;max-width:392px;background:#fff;border:1px solid var(--app-border);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;position:relative}
.hc.marked{border-color:rgba(255,152,0,.45)}
.hc .type-chip{flex:none;padding:6px 10px;border-radius:8px;background:rgba(255,152,0,.14);border:1px solid rgba(255,152,0,.35);display:flex;flex-direction:column;align-items:center;gap:1px}
.hc .type-chip .no{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--hsr)}
.hc .type-chip .stops{font-size:8px;color:rgba(230,130,20,.95)}
.hc .tl{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
.hc .tcell{display:flex;flex-direction:column;align-items:center;gap:1px}
.hc .tcell .lbl{font-size:9px;color:var(--app-muted)}
.hc .tcell .tv{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--app-ink)}
.hc .mid{flex:1;display:flex;flex-direction:column;align-items:center;color:var(--hsr)}
.hc .mid .ar{font-size:11px;line-height:1}
.hc .mid .dur{font-family:var(--font-mono);font-size:11px;font-weight:500}
.hc .col-r{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
.hc .bk{background:var(--hsr);color:#fff;font-size:11px;font-weight:500;border-radius:6px;padding:3px 9px}
.hc .menu{color:var(--app-dim);font-size:14px;line-height:1;letter-spacing:0}
.hc .corner{position:absolute;left:-1px;top:-1px;background:var(--hsr);border-radius:10px 0 8px 0;padding:3px 6px 2px}
.hc .corner svg{width:11px;height:11px;fill:#fff}
.swipe-stack.r10,.swipe-stack.r10 .train-card{border-radius:10px}
.swipe-stack .swipe-bg.solid-add{background:var(--hsr);border:none;justify-content:flex-end}
.swipe-stack .swipe-bg.solid-book{background:var(--hsr);border:none;justify-content:flex-start}
.swipe-stack .hc{position:absolute;inset:0 0;max-width:none}
.action-btn.white svg{stroke:#fff}
.action-btn.white .label{color:#fff}

/* =========== 訂票頁（B02） =========== */
.bp{width:100%;max-width:392px;border-radius:16px;overflow:hidden;border:1px solid var(--app-border);background:var(--app-bg)}
.bp .bp-bar{background:var(--tra);color:#fff;padding:11px 14px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500}
.bp .bp-bar .bk{font-size:13px;opacity:.95}
.bp .bp-card{background:#fff;border:1px solid var(--app-border);border-radius:16px;margin:10px 12px;padding:16px}
.bp .st{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.15em;color:var(--tra);text-transform:uppercase}
.bp .st.mut{color:var(--app-muted)}
.bp .grp{margin-top:13px}
.bp .fld{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--app-border);border-radius:14px;padding:10px 13px;margin-top:6px}
.bp .fld .fv{font-family:var(--font-mono);font-size:14.5px;font-weight:500;color:var(--app-ink)}
.bp .fld svg{width:16px;height:16px;stroke:var(--app-muted);fill:none;stroke-width:1.7;stroke-linecap:round}
.bp .val{font-size:15px;font-weight:500;color:var(--app-ink);margin-top:5px}
.bp .train-line{display:flex;align-items:baseline;gap:9px;margin-top:5px}
.bp .train-line .ty{font-size:13px;font-weight:500;color:var(--tra)}
.bp .train-line .no{font-family:var(--font-mono);font-size:16.5px;font-weight:500;color:var(--app-ink)}
.bp .fare-row{display:flex;margin-top:13px}
.bp .fare-row .cell{flex:1}
.bp .fare{font-family:var(--font-mono);font-size:20px;font-weight:500;color:var(--tra);margin-top:5px}
.bp .qty{font-family:var(--font-mono);font-size:16.5px;font-weight:500;color:var(--app-ink);margin-top:5px}
.bp .bp-bottom{display:flex;gap:10px;border-top:1px solid var(--app-border);padding:11px 12px}
.bp .btn-main{flex:1;background:var(--tra);color:#fff;border-radius:14px;text-align:center;padding:12px 0;font-size:14px;font-weight:500}
.bp .btn-sub{width:84px;border:1px solid var(--app-border);color:var(--app-muted);border-radius:14px;text-align:center;padding:12px 0;font-size:14px;font-weight:500}

/* =========== 鎖定畫面 Live Activity 示意圖（L03） =========== */
.lock{width:100%;max-width:392px;border-radius:22px;padding:26px 16px 20px;background:linear-gradient(165deg,#1B2735 0%,#0D1520 55%,#090E16 100%);display:flex;flex-direction:column;align-items:center;gap:3px}
.lock .lk-date{color:rgba(255,255,255,.75);font-size:12.5px}
.lock .lk-time{color:rgba(255,255,255,.92);font-size:50px;font-weight:300;line-height:1.05}
.lock .la{width:100%;margin-top:16px;background:#121212;border-radius:18px;padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.lock .la .r{display:flex;align-items:center;gap:6px}
.lock .la .chip{padding:1.5px 6px;border:1px solid rgba(33,150,243,.4);border-radius:6px;color:var(--tra);font-size:11px}
.lock .la .no{color:#fff;font-size:18px;font-family:var(--font-mono);font-weight:500}
.lock .la .delay{margin-left:auto;background:#FF9800;color:#fff;border-radius:6px;padding:2px 8px;font-size:11px;font-family:var(--font-mono)}
.lock .la .mut{color:rgba(255,255,255,.6);font-size:11.5px}
.lock .la .semi{color:rgba(255,255,255,.85);font-size:11.5px;font-family:var(--font-mono)}
.lock .la .track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.lock .la .track i{display:block;height:100%;width:62%;background:var(--tra);border-radius:2px}
.lock .la .pin{width:12px;height:12px;fill:var(--tra);flex:none}
.lock .la .cur{color:#fff;font-size:15px}
.fig .sim-tag{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--rule);border-radius:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-dim)}

/* =========== 抽屜（G01） =========== */
.drawer{width:100%;max-width:300px;background:#fff;border:1px solid var(--app-border);border-radius:16px;overflow:hidden}
.drawer .dr-head{padding:16px 16px 14px;border-bottom:1px solid var(--app-border)}
.drawer .dr-logo{width:44px;height:44px;border-radius:11px;background:rgba(33,150,243,.14);border:1px solid rgba(33,150,243,.28);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.drawer .dr-logo svg{width:26px;height:26px;fill:var(--tra)}
.drawer .dr-name{font-family:var(--font-serif);font-size:16px;font-weight:500;color:var(--app-ink)}
.drawer .dr-sub{font-size:10.5px;color:var(--app-muted);margin-top:2px}
.drawer .dr-sec{padding:13px 16px 5px;font-size:11px;font-weight:500;color:var(--tra)}
.drawer .dr-item{display:flex;align-items:center;gap:11px;padding:9px 16px;position:relative}
.drawer .dr-item.hl{background:rgba(33,150,243,.07)}
.drawer .dr-item .ic{flex:none;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.drawer .dr-item .ic svg{width:16px;height:16px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer .dr-item .dt{flex:1;font-size:13.5px;font-weight:500;color:var(--app-ink)}
.drawer .dr-item .dc{color:var(--app-dim);font-size:11px}

/* 手機窄幅保護 */
@media (max-width:429px){
  .hero h1{font-size:29px}
  h2{font-size:21px}
}
@media (max-width:374px){
  .hero h1{font-size:26px}
  .wrap{padding:0 16px}
  .how .k{width:64px}
  .sd .ph .img{width:112px}
  .duo{flex-direction:column}
}