/* 火榜 D「夜讀接素色」共用素色區樣式（2026-10-07 第二波第 1 段抽出）
 * 原本寫在 scripts/build-hubs.js 的 BODY_CSS，抽成檔案讓總入口、分類頁、/fire/ 與四個產品首頁共用同一份。
 * 用在：build-hubs.js 產生的 / /police/ /osh/ /estate/ /fire/（引用帶 ?v=20261007a）
 *       FS_PROMO／FSEQ_TECH／FSEQ_ENG／FS_ASSIST 的 index.html（下半部，<body class="pd">）
 * 首屏在 hub-hero.css。上半段（到「產品首頁」註解前）與原 BODY_CSS 逐字相同。
 */
@import url("/assets/print.css") print;
:root{--bg:var(--hb-bg,#f4f6f9);--surface:var(--hb-surface,#fff);--sunk:var(--hb-raised,#eef3fb);--line:rgb(16 32 60 / .12);--fg:#15202e;--fg-2:#3b475a;--fg-3:#556175;--accent:#1e3a5f;--accent-ink:#fff;--live:#1f6b45;
 --display:"Noto Serif TC","Songti TC","PMingLiU",serif;--body:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;--r:14px;--sh:0 1px 2px rgb(16 32 60 / .05),0 8px 24px rgb(16 32 60 / .07);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.75 var(--body);letter-spacing:.02em}
h1,h2,h3,p{margin:0}h2{text-wrap:balance}p{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hb-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;font-size:14px;color:var(--h-fg-2)}
.hb-crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:0 -8px;color:var(--h-fg);text-decoration:underline;text-underline-offset:3px}
.sec{padding-top:80px;padding-bottom:80px}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:8px 16px;margin-bottom:28px;flex-wrap:wrap}
.sec-h h2{font:900 clamp(28px,3.6vw,36px)/1.3 var(--display)}
.sec-h p{color:var(--fg-3);font-size:16px}
/* 分類卡：照片＋四段暗色漸層，字疊在暗部 */
.cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.cat{position:relative;isolation:isolate;grid-column:span 12;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;border-radius:var(--r);overflow:hidden;background:#101824;color:#eceff3;text-decoration:none;box-shadow:var(--sh)}
.cat.big{min-height:380px}
.cat .ph{position:absolute;inset:0;z-index:-1}
.cat .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transition:transform .4s ease}
.cat .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(8 12 18 / 0) 18%,rgb(8 12 18 / .55) 42%,rgb(8 12 18 / .92) 68%,rgb(8 12 18 / .97))}
a.cat:hover .ph img{transform:scale(1.03)}
a.cat:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cat .body{position:relative;padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;text-shadow:0 1px 2px rgb(0 0 0 / .6)}
.cat h3{font:900 22px/1.3 var(--display)}
.cat p{font-size:16px;color:#dde3ec}
.cat .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{font-size:14px;line-height:1.6;padding:2px 10px;border-radius:999px;background:rgb(255 255 255 / .14);color:#dfe5ee;text-shadow:none}
.chip.on{background:rgb(127 211 168 / .22);color:#a8e8c6;font-weight:700}
.cat .go{font-size:16px;font-weight:700;color:#ffb489}
.cat.future{min-height:0;background:var(--surface);color:var(--fg);border:1px dashed var(--line);box-shadow:none}
.cat.future .body{text-shadow:none}
.cat.future p{color:var(--fg-2)}
@media (min-width:861px){
 .cat.police,.cat.osh,.cat.estate{grid-column:span 4}
 .cat.future .body{flex-direction:row;align-items:baseline;gap:16px;padding:18px 22px}
}
@media (max-width:760px){.cat .ph img{object-position:50% 30%}}
/* 學習循環五步 */
.loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.loop li{position:relative;padding:0 18px 0 0;min-width:0}
.loop li::before{content:"";position:absolute;left:20px;right:0;top:20px;height:2px;background:var(--line)}
.loop li:last-child::before{display:none}
.loop .n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);color:var(--accent);font:900 18px/1 var(--display);font-variant-numeric:tabular-nums}
.loop li:first-child .n{background:var(--accent);color:var(--accent-ink)}
.loop h3{font-size:18px;font-weight:800;margin:14px 0 6px}
.loop p{font-size:16px;color:var(--fg-2)}
.loop-back{margin-top:24px;font-size:16px;color:var(--fg-2)}
@media (max-width:860px){.loop{grid-template-columns:1fr;gap:22px}.loop li{padding:0 0 0 56px}.loop li::before{left:19px;right:auto;top:40px;bottom:-22px;width:2px;height:auto}.loop .n{position:absolute;left:0;top:0}.loop h3{margin-top:6px}}
/* 收尾註冊框 */
.end{padding-top:0;padding-bottom:96px}
.endbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(24px,5vw,48px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.endbox h2{font:900 clamp(22px,3.2vw,28px)/1.3 var(--display)}
.endbox p{color:var(--fg-2);margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;font:700 16px/1.2 var(--body);text-decoration:none;background:var(--accent);color:var(--accent-ink)}
.btn:hover{background:#2a4c78}
/* 分類頁：考試清單 */
.exams{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.exams a,.exams .row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);text-decoration:none;color:var(--fg);font-size:18px;font-weight:700}
.exams a:hover{border-color:var(--accent)}
.exams .row{color:var(--fg-2);box-shadow:none;background:transparent;border-style:dashed}
.tag{flex:none;font-size:14px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--sunk);color:var(--fg-3)}
.tag.on{background:rgb(31 107 69 / .12);color:var(--live);font-weight:700}
.after{margin-top:28px;font-size:16px;color:var(--fg-2)}
.after a{color:var(--accent);font-weight:700}
footer{border-top:1px solid var(--line);font-size:14px;color:var(--fg-3);padding-top:24px;padding-bottom:40px}
footer nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:8px}
footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--fg-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ───────────────────────────────────────────────────────────────
 * 產品首頁首屏以下（FS_PROMO／FSEQ_TECH／FSEQ_ENG／FS_ASSIST 的 index.html，<body class="pd">）
 * 2026-10-07 第二波第 1 段：沿用上面同一套 token，舊的 DM Serif／Inter 版樣式已從各頁拿掉。
 * 字級只用 12／14／16／18／22／28／36／48。
 * ─────────────────────────────────────────────────────────────── */
.pd{--gut:clamp(16px,5vw,56px);--col:1068px}
.pd main>section:not(.hb-hero){padding:clamp(56px,8vw,80px) var(--gut)}
.pd .why-bg{background:var(--surface)}
.pd .features-bg{background:var(--bg)}
.pd main>section.pd-plans{background:var(--surface)}
.pd .why-embed,.pd .inner{max-width:var(--col);margin:0 auto}
/* 區塊標題：跟總入口 .sec-h 同一套（明體 28–36、說明 16 灰） */
.pd .section-tag{margin:0 0 8px;font-size:14px;line-height:1.6;font-weight:700;letter-spacing:.12em;color:var(--accent);text-align:left}
.pd .why-h,.pd .section-title{margin:0;font:900 28px/1.3 var(--display);color:var(--fg);text-align:left;text-wrap:balance}
.pd .why-sub,.pd .section-sub{margin:10px 0 32px;max-width:40em;font-size:16px;line-height:1.75;color:var(--fg-3);text-align:left}
/* 說明卡（原 why 區）：單欄，閱讀寬度 820px */
.pd .why-embed .sec{max-width:820px;padding:clamp(20px,3vw,28px);margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pd .why-embed .sec-t{margin:0 0 14px;font:900 22px/1.4 var(--display);color:var(--fg)}
.pd .why-embed .sec p{margin:0 0 12px;font-size:16px;line-height:1.85;color:var(--fg)}
.pd .why-embed .sec p:last-child{margin-bottom:0}
.pd .why-embed .sec ul{list-style:none;margin:0;padding:0}
.pd .why-embed .sec li{position:relative;padding:10px 0 10px 20px;font-size:16px;line-height:1.8;color:var(--fg);border-bottom:1px solid var(--line)}
.pd .why-embed .sec li:last-child{border-bottom:0;padding-bottom:0}
.pd .why-embed .sec li::before{content:"";position:absolute;left:2px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pd .why-embed .sec b{color:var(--fg);font-weight:700}
.pd .why-embed .money{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 16px}
.pd .why-embed .money-card{padding:16px 18px;background:var(--sunk);border:0;border-radius:12px}
.pd .why-embed .money-num{font:900 28px/1.25 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.pd .why-embed .money-num span{font:700 14px/1.4 var(--body)!important;margin-left:4px;color:var(--fg-3)}
.pd .why-embed .money-lbl{margin-top:6px;font-size:14px;line-height:1.6;font-weight:400;color:var(--fg-2)}
.pd .why-embed table{width:100%;border-collapse:collapse;margin-top:8px;font-size:16px}
.pd .why-embed th{padding:10px 12px;text-align:left;font-size:14px;font-weight:700;color:var(--fg-3);border-bottom:2px solid var(--line);white-space:nowrap}
.pd .why-embed td{padding:12px;font-size:16px;line-height:1.7;color:var(--fg);vertical-align:top;border-bottom:1px solid var(--line)}
.pd .why-embed tr:last-child td{border-bottom:0}
.pd .why-embed tr.hl td{background:var(--sunk)}
.pd .why-embed .rank,.pd .why-embed .badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.6;white-space:nowrap}
.pd .why-embed .rank.zuo{background:var(--sunk);color:var(--fg-3)}
.pd .why-embed .rank.zheng{background:rgb(30 58 95 / .12);color:var(--accent)}
.pd .why-embed .rank.jian{background:var(--accent);color:var(--accent-ink)}
.pd .why-embed .badge.tech,.pd .why-embed .badge.eng{background:rgb(30 58 95 / .1);color:var(--accent)}
/* 第三波：一般警察四等的三種管道比較表（本區／內軌／設備士） */
.pd .why-embed .badge.gp4{background:var(--accent);color:var(--accent-ink)}
.pd .why-embed .badge.inner{background:rgb(30 58 95 / .1);color:var(--accent)}
.pd .why-embed .badge.eq{background:var(--sunk);color:var(--fg-3)}
.pd .why-embed .note{margin-top:16px;padding:14px 18px;font-size:16px;line-height:1.8;color:var(--fg-2);background:var(--sunk);border:0;border-left:3px solid var(--accent);border-radius:0 10px 10px 0}
.pd .why-embed .note b{color:var(--fg)}
.pd .why-embed .note a{color:var(--accent)!important}
.pd .why-embed .src{max-width:820px;margin-top:24px;font-size:14px;line-height:1.8;color:var(--fg-3)}
.pd .why-embed .src a{color:var(--accent);font-weight:600;text-underline-offset:3px}
@media (min-width:1024px){.pd .why-h,.pd .section-title{font-size:36px}.pd .cta-banner h2{font-size:28px}}
@media (max-width:600px){.pd .why-embed th{padding:8px 6px}.pd .why-embed td{padding:10px 6px}.pd .why-embed .rank{padding:2px 8px}}
/* 功能三卡 */
.pd .feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.pd .feat-grid{grid-template-columns:1fr}}
.pd .feat-card{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pd .feat-title{margin:0 0 8px;font-size:18px;font-weight:800;line-height:1.5;color:var(--fg)}
.pd .feat-desc{font-size:16px;line-height:1.8;color:var(--fg-2)}
.pd .feat-note{margin-top:24px;font-size:14px;color:var(--fg-3);text-align:left}
/* 方案卡 */
.pd .price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:0}
.pd .price-grid.price-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
@media (max-width:860px){.pd .price-grid.price-grid-3{grid-template-columns:1fr}}
@media (max-width:600px){.pd .price-grid{grid-template-columns:1fr}}
.pd .price-card{position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pd .price-card.featured{border:2px solid var(--accent);padding:27px 23px 23px}
.pd .price-plan{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--fg-3)}
.pd .price-amount{font:900 36px/1.1 var(--display);color:var(--fg);font-variant-numeric:tabular-nums}
.pd .price-amount span{display:inline-block;margin:0 4px 0 0;vertical-align:.5em;font:700 14px/1 var(--body);color:var(--fg-3)}
.pd .price-amount .price-unit{margin:0 0 0 4px;vertical-align:baseline}
.pd .price-period{flex:1;margin:12px 0 20px;font-size:14px;line-height:1.7;color:var(--fg-2)}
.pd .price-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font:700 16px/1.2 var(--body);text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pd .price-btn.outline{background:var(--surface);color:var(--accent);border:1px solid rgb(30 58 95 / .35)}
.pd .price-btn.outline:hover{border-color:var(--accent);background:var(--sunk)}
.pd .price-btn.fill{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.pd .price-btn.fill:hover{background:#2a4c78}
.pd .price-note{margin-top:20px;font-size:14px;line-height:1.7;color:var(--fg-3);text-align:left}
/* 收尾框（原 cta-banner）：跟總入口收尾框同款 */
.pd main>section.cta-banner{box-sizing:border-box;width:calc(100% - 2 * var(--gut));max-width:var(--col);margin:0 auto 96px;padding:clamp(24px,5vw,48px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px}
.pd .cta-banner h2{grid-column:1;grid-row:1;margin:0;font:900 22px/1.3 var(--display);color:var(--fg)}
.pd .cta-banner p{grid-column:1;grid-row:2;margin:0;font-size:16px;color:var(--fg-2)}
.pd .cta-banner .hero-btns{grid-column:2;grid-row:1/3;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.pd .btn-primary,.pd .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;font:700 16px/1.2 var(--body);text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pd .btn-primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.pd .btn-primary:hover{background:#2a4c78;opacity:1}
.pd .btn-secondary{background:var(--surface);color:var(--accent);border:1px solid rgb(30 58 95 / .35)}
.pd .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.pd .cta-banner a:focus-visible{outline-color:var(--accent)}
@media (max-width:760px){
  .pd main>section.cta-banner{grid-template-columns:1fr}
  .pd .cta-banner .hero-btns{grid-column:1;grid-row:3;justify-content:flex-start;margin-top:14px}
}
/* 頁尾：跟總入口同款（白字深底拿掉） */
.pd .footer{background:transparent;border-top:1px solid var(--line);padding:24px var(--gut) 40px}
.pd .footer-inner{max-width:var(--col);margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:0 20px}
.pd .footer-logo{font-size:16px;font-weight:800;color:var(--fg)}
.pd .footer-links{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
.pd .footer-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;font-size:14px;color:var(--fg-2);text-decoration:none}
.pd .footer-links a:hover{color:var(--fg)}
.pd .footer-copy{max-width:var(--col);margin:8px auto 0;font-size:14px;line-height:1.7;color:var(--fg-3);text-align:left}
.pd .footer a:focus-visible{outline-color:var(--accent)}

/* ───────────────────────────────────────────────────────────────
 * 方案頁（FS_PROMO／FSEQ_TECH／FSEQ_ENG／FS_ASSIST 的 pricing.html，<body class="pl">）
 * 2026-10-07 第二波第 2 段：只換外觀。價格、方案名、期間、法律文字、按鈕 id、JS 一律不動；
 * 頁內原有樣式保留（含顯示／隱藏規則），這裡用 .pl 前綴覆蓋成素色方案卡。
 * ─────────────────────────────────────────────────────────────── */
.pl{--gut:clamp(16px,5vw,56px);--ink:#15202e;--border:rgb(16 32 60 / .14);--muted:#556175}
.pl main.wrap{box-sizing:border-box;max-width:calc(1068px + 2 * var(--gut));padding:32px var(--gut) 80px}
.pl .trust-bar{gap:8px 24px;justify-content:flex-start;margin-bottom:32px}
.pl .trust-item{font-size:14px;color:var(--fg-2)}
.pl .trust-item span{color:var(--live);font-weight:700}
.pl .dur{justify-content:flex-start}
.pl .dur-seg{border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh);padding:4px}
.pl .dur-seg button{border-radius:999px;color:var(--fg-2);font-family:var(--body)}
.pl .dur-seg button.on{background:var(--accent);color:var(--accent-ink)}
.pl .dur-hint{text-align:left;font-size:14px;color:var(--fg-3)}
.pl .price-grid{gap:16px;max-width:none;margin-left:0;margin-right:0}
.pl .price-card{padding:28px 24px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pl .price-card.featured{border:2px solid var(--accent);padding:27px 23px 23px;box-shadow:var(--sh)}
.pl .price-card.hl{outline:3px solid rgb(30 58 95 / .35);outline-offset:3px}
.pl .price-badge{background:var(--accent);color:var(--accent-ink);border-radius:999px;font-weight:700;letter-spacing:.04em}
.pl .price-badge.grey{background:var(--fg-3)}
.pl .price-plan{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--fg-3)}
.pl .price-amount{font:900 48px/1.05 var(--display);color:var(--fg);font-variant-numeric:tabular-nums}
.pl .price-amount .currency{font:700 18px/1 var(--body);color:var(--fg-3);margin-right:4px}
.pl .price-orig{color:var(--fg-3)}
.pl .price-period{font-size:14px;color:var(--fg-2)}
.pl .price-period b{color:var(--fg)}
.pl .price-value-tag{font-size:14px;font-weight:700;color:var(--accent);background:var(--sunk);border:0;border-radius:10px;padding:8px 12px;line-height:1.6}
.pl .price-divider{background:var(--line)}
.pl .price-features li{font-size:16px;line-height:1.6;color:var(--fg)}
.pl .price-features li::before{color:var(--live)}
.pl .price-features li b{color:var(--fg)}
.pl .price-features li.off{color:var(--fg-3)}
.pl .price-features li.off::before{color:var(--fg-3)}
.pl .price-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:999px;font:700 16px/1.2 var(--body);white-space:nowrap;box-sizing:border-box}
.pl .price-btn.outline{background:var(--surface);color:var(--accent);border:1px solid rgb(30 58 95 / .35)}
.pl .price-btn.outline:hover{border-color:var(--accent);background:var(--sunk)}
.pl .price-btn.fill{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.pl .price-btn.fill:hover{background:#2a4c78;opacity:1}
.pl .price-btn:disabled,.pl .price-btn:disabled:hover{opacity:.45;cursor:not-allowed}
.pl .price-btn.fill:disabled:hover{background:var(--accent)}
.pl .price-btn.outline:disabled:hover{background:var(--surface);border-color:rgb(30 58 95 / .35)}
.pl .consent-row{font-size:14px;line-height:1.7;color:var(--fg-2)}
.pl .consent-row input{accent-color:var(--accent)}
.pl .consent-row a{color:var(--fg-2)}
.pl .consent-row b{color:var(--accent)}
.pl .compare-title,.pl .faq-title{font:900 28px/1.3 var(--display);color:var(--fg);text-align:left}
.pl .compare-table{font-size:14px}
.pl .compare-table th{background:var(--sunk);color:var(--fg-2);font-size:14px;font-weight:700}
.pl .compare-table td{background:var(--surface);color:var(--fg-2);border-bottom:1px solid var(--line)}
.pl .compare-table td:first-child{color:var(--fg)}
.pl .check{color:var(--live)}
.pl .matrix{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.pl .matrix h2,.pl .matrix h3{font:900 22px/1.4 var(--display);color:var(--fg)}
.pl .matrix p{font-size:14px;color:var(--fg-3)}
.pl .matrix .amt{font:900 18px/1.3 var(--display);color:var(--fg)}
.pl .matrix td{border-bottom:1px solid var(--line)}
.pl .faq{max-width:820px;margin-left:0}
.pl .faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.pl .faq-q{font-size:16px;font-weight:700;color:var(--fg)}
.pl .faq-a{font-size:16px;line-height:1.8;color:var(--fg-2)}
.pl .foot-links{font-size:14px;color:var(--fg-3);text-align:left}
.pl .foot-links a{color:var(--fg-2)}
/* 倒數框是頁內行內樣式（粉紅框），只把框線換成素色 */
.pl #examCountdown{border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh)}
@media (min-width:1024px){.pl .compare-title,.pl .faq-title{font-size:36px}}

/* ───────────────────────────────────────────────────────────────
 * 小頁（login／account／terms／privacy／refund／404，<body class="sp">）
 * 2026-10-07 第二波第 3 段：只換外觀，內容文字不動。頁首統一成白底導覽（同產品頁導覽的高度與字級），
 * 頁尾用總入口的素色頁尾樣式；頁內原有樣式保留，這裡用 .sp 前綴覆蓋。
 * ─────────────────────────────────────────────────────────────── */
.sp{--gut:clamp(16px,5vw,56px);--ink:#15202e;--bd:rgb(16 32 60 / .14);--muted:#556175;--text:#15202e}
.sp :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 頁首 */
.sp .nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:4px;height:auto;min-height:60px;padding:0 var(--gut);background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--body)}
.sp .nav-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 8px 0 0;padding:0;text-decoration:none;color:var(--fg)}
.sp .nav-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f4f6f9;color:#fff;font-size:16px;font-weight:800;flex:none}
.sp .nav-icon:empty::before{content:"火"}
.sp .nav-name{font-size:18px;font-weight:800;color:var(--fg)}
.sp .nav-links{display:flex;align-items:center}
.sp .nav-a{display:inline-flex;align-items:center;height:auto;min-height:44px;padding:0 10px;font-size:14px;font-weight:600;color:var(--fg-2);text-decoration:none;border-bottom:0}
.sp .nav-a:hover,.sp .nav-a.on{color:var(--fg)}
.sp .nav-gap{flex:1}
.sp .nav-dd{height:auto;margin-left:4px}
.sp .nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:14px;font-weight:700}
.sp .nav-cta:hover{border-color:var(--accent);opacity:1}
.sp .nav-dd-menu{border:1px solid var(--hb-line,#dfe4ec);border-radius:12px;box-shadow:0 12px 32px rgb(0 0 0 / .14)}
.sp .nav-dd-item{border-radius:8px;font-size:14px;color:var(--fg)}
.sp .nav-dd-item:hover{background:var(--sunk)}
.sp .nav-switch-grp{font-size:12px}
/* 文件頁（條款／隱私／退款） */
.sp-doc .wrap{max-width:calc(760px + 2 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);box-sizing:border-box}
.sp .page-title,.sp h1.page-title{font:900 28px/1.3 var(--display);color:var(--fg);margin-bottom:8px}
.sp .page-meta{font-size:14px;color:var(--fg-3)}
.sp .doc h2{font-size:18px;font-weight:800;color:var(--fg);margin:32px 0 10px}
.sp .doc p,.sp .doc li{font-size:16px;line-height:1.85;color:var(--fg-2)}
.sp .doc section{border-bottom:1px solid var(--line);padding-bottom:24px}
.sp .doc a{color:var(--accent)!important;text-underline-offset:3px}
.sp .data-table th{background:var(--sunk);color:var(--fg-2);font-size:14px}
.sp .data-table td{color:var(--fg-2);border-bottom:1px solid var(--line)}
.sp .data-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;border-collapse:separate;border-spacing:0}
.sp .policy-box{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh)}
.sp .policy-box.yes{border-color:rgb(31 107 69 / .3);background:var(--surface)}
.sp .policy-box.no{border-color:rgb(192 57 43 / .3);background:var(--surface)}
.sp .policy-box.yes .policy-box-t{color:var(--live)}
.sp .policy-box.no .policy-box-t{color:#a8321f}
.sp .policy-box li{color:var(--fg-2)}
.sp .contact-box{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.sp .contact-box-t{color:var(--fg)}
.sp .contact-box p{color:var(--fg-2)}
@media (min-width:1024px){.sp .page-title,.sp h1.page-title{font-size:36px}}
/* 頁尾：總入口同款 */
.sp .site-foot{background:transparent;border-top:1px solid var(--line);padding:24px var(--gut) 40px;text-align:left;font-size:14px;color:var(--fg-3)}
.sp .site-foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 20px 0 0;color:var(--fg-2);font-weight:400;text-decoration:none}
.sp .site-foot a:hover{color:var(--fg)}
/* 帳號頁 */
.sp h1{font:900 28px/1.3 var(--display);color:var(--fg)}
.sp .card{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.sp .card-t{font-size:14px;color:var(--fg-3)}
.sp .btn{border-radius:999px;font-family:var(--body);min-height:44px;padding:0 18px}
.sp .btn.fill{background:var(--accent);color:var(--accent-ink)}
.sp .btn.outline{border:1px solid rgb(30 58 95 / .35);color:var(--accent)}
.sp .inline-form input,.sp .inline-form select{font-family:var(--body);border:1px solid rgb(16 32 60 / .2);border-radius:10px}
.sp .inline-form input:focus{border-color:var(--accent)}
.sp .sub-row,.sp .list-item{border:1px solid var(--line)}
.sp .locked-note{background:var(--sunk);border:0;border-radius:10px;color:var(--accent)}
/* 登入頁：卡片置中在頁首下方 */
body.sp.sp-login{display:block;padding:0;min-height:100vh}
.sp-login main.card{width:calc(100% - 32px);margin:clamp(24px,6vh,64px) auto 64px;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.sp-login h1,.sp-login .h1like{font:900 22px/1.4 var(--display);color:var(--fg)}
.sp-login .sub{color:var(--fg-2)}
.sp-login label{font-size:14px;color:var(--fg)}
.sp-login input{font-family:var(--body);border:1px solid rgb(16 32 60 / .2);border-radius:10px}
.sp-login input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgb(30 58 95 / .12)}
.sp-login input:focus-visible{outline:2px solid var(--accent)}
.sp-login main button{font-family:var(--body);border-radius:999px;min-height:52px;background:var(--accent)}
.sp-login main .gbtn{background:var(--surface);color:var(--fg);border:1px solid rgb(16 32 60 / .2)}
.sp-login main .gbtn:hover{background:var(--sunk)}
.sp-login .tabs{border:1px solid var(--line);border-radius:999px;background:var(--sunk)}
.sp-login .tabs button{min-height:44px;border-radius:999px;background:transparent;color:var(--fg-3)}
.sp-login .tabs button.on{background:var(--surface);color:var(--fg)}
.sp-login .divider,.sp-login .agree,.sp-login .link{color:var(--fg-3)}
.sp-login .link a,.sp-login .agree a,.sp-login .fieldhead a{color:var(--accent)}
.sp-login .sub.hook .hook-gift b{color:var(--accent)}
.sp-login .acct .sub-row{border:1px solid var(--line)}
/* 404 */
.sp-404 main li a{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);color:var(--fg);font-weight:700;min-height:56px;display:flex;align-items:center}
.sp-404 main li a:hover{border-color:var(--accent)}
.sp-404 .home{color:var(--accent)}
.sp .sub-row{flex-wrap:wrap}.sp .sub-label{min-width:6em}

/* 2026-10-09 低等級 #9：一般四等消防首頁「三種管道的差別」比較表（4 欄）在手機寬要橫向捲，第 3、4 欄整個藏在畫面外（約 39% 內容看不到）。
   ≤640px 改成直排卡片：每列一張卡，列名當卡標題，三種管道各一行並在前面標出是哪一種；電腦版不動。 */
@media (max-width:640px){
  .pd .why-embed .cmp3{overflow:visible!important}
  .pd .why-embed .cmp3 table,.pd .why-embed .cmp3 tbody,.pd .why-embed .cmp3 tr,.pd .why-embed .cmp3 td{display:block;width:auto}
  .pd .why-embed .cmp3 tr:first-child{display:none}
  .pd .why-embed .cmp3 tr{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .pd .why-embed .cmp3 tr.hl td,.pd .why-embed .cmp3 tr.hl{background:var(--sunk)}
  .pd .why-embed .cmp3 td{padding:6px 0;border-bottom:0;font-size:16px;line-height:1.7}
  .pd .why-embed .cmp3 td:first-child{padding:0 0 6px;font-weight:800;color:var(--fg-3);font-size:14px;letter-spacing:.04em}
  .pd .why-embed .cmp3 td+td{border-top:1px dashed var(--line)}
  .pd .why-embed .cmp3 td+td::before{display:block;margin-bottom:2px;font-size:12px;font-weight:700;color:var(--fg-3)}
  .pd .why-embed .cmp3 td:nth-child(2)::before{content:"一般警察四等消防（本區）"}
  .pd .why-embed .cmp3 td:nth-child(3)::before{content:"警察特考四等消防"}
  .pd .why-embed .cmp3 td:nth-child(4)::before{content:"消防設備士"}
}
/* 2026-10-11 UX #15：頁面自帶 outline:none 的輸入框也一律看得到鍵盤焦點外框 */
:focus-visible{outline-style:solid!important;outline-width:2px!important}