/* 火榜三模板（FS_PROMO／FSEQ_TECH／FSEQ_ENG）設計檢驗修正層 2026-10-02
 * 各頁在自己的 <style> 之後載入本檔：觸控目標、焦點框、減少動態、字級下限、
 * 首頁對比、freq 熱力表、線條圖示。改動集中在這裡，各頁不再各寫一份。 */

@import url("/assets/print.css") print;
/* ── 線條圖示（取代 ☰ 🔒 ⚠）：1.8 線寬，顏色跟文字走 ── */
.hb-ic{display:inline-block;width:1.05em;height:1.05em;background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;vertical-align:-.17em;flex:none}
.hb-menu{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h16'/%3E%3C/svg%3E")}
.hb-lock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.hb-warn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 20h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.4v.1'/%3E%3C/svg%3E")}

/* ── #14 鍵盤焦點：只在鍵盤操作時出現 ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #1e3a5f;outline-offset:2px;border-radius:6px}
.nav-switch:focus-visible{outline-offset:0}
.srch:focus-visible,.cfg input:focus-visible{outline:2px solid #1e3a5f!important;outline-offset:2px}
.hero a:focus-visible,.cta-banner a:focus-visible,.footer a:focus-visible{outline-color:#9dc0ef}

/* ── #13 減少動態 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── #11 字級下限 12px ── */
.art,.hot,.nav-tag,.tl,.lgn,.price-badge,.chg-pill,.mock-tag,.section-tag,.srch-kbd{font-size:.75rem}
.nav-tag{font-size:12px}
p.seo-intro{font-size:14px!important}

/* ── #8 導覽下拉：項目 44px、分組標題降噪、目前產品置頂 ── */
.nav-switch-item,.nav-dd-item{display:flex!important;align-items:center;min-height:44px;padding:0 12px!important}
.nav-switch-grp{font-size:12px;font-weight:600;letter-spacing:.04em;color:#5b6577;padding:8px 12px 2px}
.nav-switch-sep{border-top:1px solid #e3e7ee;margin-top:4px}
.nav-switch-btn{display:inline-flex;align-items:center;min-height:36px}

/* ── #4 點擊目標 ≥44px（手機／平板直放）── */
@media (max-width:820px){
  html .nav-brand{min-height:44px;padding:0 6px;margin-left:-6px}
  html .nav>a.nav-a{min-height:44px;height:44px!important;padding:0 9px!important;display:inline-flex;align-items:center}
  html .nav-switch-btn{min-height:44px;padding:0 11px}
  .nav-name{white-space:nowrap}
  html .nav-links .nav-a.on{padding:0 6px;min-width:44px;justify-content:center}
  html .nav.menu-open .nav-links .nav-a{height:44px}
  html .back-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:16px}
  .status-btn,.auth-btn,.price-btn,.btn-primary,.btn-secondary,.nav-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .price-btn{display:flex}
  .chip,.subj-tab,.mode-tab,.tab,.cfg .chip{min-height:44px}
  .chip{display:inline-flex;align-items:center}
  a.lr{min-height:44px}
  input.srch,.srch{min-height:44px}
  .footer-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px}
  .cont a,.status a{display:inline-flex;align-items:center;min-height:44px}
  /* 勾選框：視覺 22px，點擊區 44px */
  input[type=checkbox]{-webkit-appearance:none;appearance:none;width:44px;height:44px;min-width:44px;margin:0;padding:0;border:0;border-radius:8px;background:no-repeat center/22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1.5' y='1.5' width='19' height='19' rx='5' fill='white' stroke='%236f695c' stroke-width='1.6'/%3E%3C/svg%3E");cursor:pointer;flex:none}
  input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5.5' fill='%231e3a5f'/%3E%3Cpath d='M6 11.5l3.6 3.6L16 8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  label:has(>input[type=checkbox]){display:flex;align-items:center;gap:2px}
  .consent-row{align-items:center!important}
}
@media (max-width:400px){html .nav-switch-btn{padding:0 7px}}

/* ── #15 首頁對比 AA ── */
.hero-trust{color:rgba(255,255,255,.76)}
.hero p{color:rgba(255,255,255,.72)}
.footer-links a{color:rgba(255,255,255,.76)}
.footer-links a:hover{color:#fff}
.footer-copy{color:rgba(255,255,255,.64)}
.cta-banner p{color:rgba(255,255,255,.72)}
.consent-row{color:#5f5f5f}
.tl.t2{background:#6f6a60}

/* ── #12 freq：熱力色階改單一藍系 5 階（淡格也 ≥4.5:1）、降低紅色密度 ── */
.c1{background:var(--hb-raised,#eef3fb);color:#27486f}
.c2{background:#cfdff3;color:#14304f}
.c3{background:#8fb0dc;color:#0b2240}
.c4{background:#2f5f99;color:#fff}
.c5{background:#1b3556;color:#fff}
.stab{color:var(--hb-link,#1e3a5f)}
.stab .off{color:#5f6f87}
.hot{background:#eaf1fb;color:var(--hb-link,#1e3a5f);border:1px solid #c5d6ec;font-size:12px}
a.row-name{color:var(--hb-link,#1e3a5f);border-color:#c5d6ec}
a.row-name:hover{background:#eaf1fb;border-color:#1e3a5f}
.rank-no.top{color:var(--hb-link,#1e3a5f)}
.rank-bar{background:linear-gradient(90deg,#8fb0dc,#2f5f99)}
.scroll-hint{display:none}
.tbl-wrap{background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right,linear-gradient(to right,rgba(30,58,95,.18),rgba(30,58,95,0)),linear-gradient(to left,rgba(30,58,95,.18),rgba(30,58,95,0)) right;background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
@media (max-width:640px){
  .scroll-hint{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;font-weight:600;color:var(--hb-link,#1e3a5f);margin:0 0 6px}
  .scroll-hint::after{content:'';width:18px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h15M12 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h15M12 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat}
}

/* ── #16／#17 載入後才插入內容的區塊：預留高度，避免把下方連結往下推 ── */
.reserve-hist{min-height:652px}
@media (max-width:430px){.reserve-hist{min-height:690px}}
@media (min-width:892px){.reserve-hist{min-height:385px}}
#card{min-height:300px}

/* ── 刷題清單卡右側箭頭（三產品同一種清單卡）── */
.subj-arrow{color:var(--muted,#6f695c);font-size:.875rem;flex-shrink:0}
.status-btn,.auth-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;font-size:.875rem;font-weight:700;border-radius:8px;text-decoration:none;white-space:nowrap}

/* ── 其他頁補強（exam-rules 內文 14px、updates 狀態標籤對比與連結、reading 展開鈕）── */
.sec li{font-size:.875rem}
.matrix p{font-size:14px}
.upd-status:not(.pending){color:#14532d}
@media (max-width:820px){
  .more-btn{min-height:44px}
  .status-line a{display:inline-flex;align-items:center;min-height:44px}
  article.upd a,.upd-rel a{display:inline-flex;align-items:center;min-height:44px}
}
.sec table{font-size:14px}
.sec th{font-size:14px}
/* 螢幕閱讀器專用標題：1px 寬容器內改為可換行，避免被量成橫向溢出 */
.sr-only{white-space:normal}
.pen{font-size:12px}
.rank{font-size:.75rem}
.why-embed .rank,.why-embed .badge{font-size:.75rem}

/* ── 智能刷題入口條（B 方案：藏青實心，刷題頁最醒目入口）── */
.smart-band{display:flex;align-items:center;gap:20px;background:#1e3a5f;color:#fff;border-radius:14px;padding:28px 32px;margin:0 0 28px;text-decoration:none;min-height:128px;box-shadow:0 6px 18px rgba(30,58,95,.28)}
.smart-band-txt{flex:1;min-width:0;display:block}
.smart-band-title{display:block;font-weight:800;font-size:22px;line-height:1.3;color:#fff}
.smart-band-sub{display:block;font-size:14px;line-height:1.6;color:#fff;margin-top:4px}
.smart-band-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.smart-band-tags span{font-size:12px;line-height:1;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 12px}
.smart-band-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--hb-surface,#fff);color:var(--hb-link,#1e3a5f);font-weight:800;font-size:16px;border-radius:10px;white-space:nowrap}
.smart-band:hover .smart-band-btn,.smart-band:focus-visible .smart-band-btn{background:#e8eff8}
.smart-band:focus-visible{outline:3px solid #1e3a5f;outline-offset:3px}
@media (max-width:640px){
  .smart-band{flex-direction:column;align-items:stretch;gap:16px;padding:22px 20px;min-height:150px}
  .smart-band-btn{width:100%}
}

/* 2026-10-02 智能刷題改版後量到 3 處 <12px（狀態鈕、科目鎖、頁首小標），補到 12px */
a.status-btn, div.subj-lock, div.page-kicker { font-size: 12px !important; }

/* 2026-10-07 手機麵包屑列先留位 */
/* site-nav.js 在載入後才把「‹ 消防 › 產品名」列（45px）插在導覽正下方，整頁會被往下推（平板 768 量到 CLS 0.148）。
   導覽後面的第一個元素先留 45px，麵包屑一插入就換成它本身佔位，同一幀內淨位移為 0。 */
@media (max-width:900px){
  nav.nav:has(.nav-tag):not(:has(+ .hb-mcrumb)) + *{margin-top:45px}
}

/* 2026-10-07 其他頁補強 */
/* 作文／公文題目一覽（freq 頁）：整句 12px 的表格文字改 14px（內文 ≥40 字不得小於 14px） */
.tbl-wrap td[style*="line-height:1.7"]{font-size:14px}
/* 智能刷題的範圍／題數／抽題：平板與手機 ≥44px */
@media (max-width:820px){
  .sd-ctl select,.sd-go{min-height:44px}
}

/* 2026-10-09 低等級 #7：消防三特考頻率頁（FS_GP4／FS_POL4／FS_POL3 freq.html）熱區表在手機寬有大量 <12px 字
   （格內數字 11.8px、星號 11.5px、表頭 11.5px、題型標 9.5px、圖例 11.5px）。
   只把低於 12px 的拉到 12px（max()），本來比 12px 大的不動；表格仍在 .tbl-wrap 內橫向捲動。 */
.tbl-wrap table{font-size:max(12px,.8em)}
.tbl-wrap th{font-size:max(12px,.9em)}
.tbl-wrap .cell{font-size:max(12px,.92em)}
.stab{font-size:max(12px,.9em)}
.etype{font-size:max(12px,.74em)}
.legend{font-size:max(12px,.72em)}
.tbl-wrap .grp .name{font-size:max(12px,1.02em)}
/* 2026-10-09 #7 附帶：高頻排行榜模式在手機寬，名稱固定 230px＋數值 120px 撐出 457px 寬，整頁橫向捲動。改兩行排列。 */
@media (max-width:600px){
  .rank-row{flex-wrap:wrap;row-gap:4px}
  .rank-name{width:auto;flex:1 1 calc(100% - 44px);min-width:0}
  .rank-bar-wrap{flex:1 1 0;min-width:120px;margin-left:38px}
  .rank-val{width:auto;flex:0 0 auto}
}
/* 2026-10-09 低等級 #8（cls）：讀書／刷題索引頁的清單是載入後才填進 #body，底下的「回備考首頁」連結原本緊貼在空 #body 後面，
   清單一到就被推走（768 寬 CLS 0.06～0.07）。先替清單留一屏高，連結在首屏外，填入時不產生位移。 */
.main>#body{min-height:70vh}
/* ══ 2026-10-11 UX 修正 ══ */
/* #15 鍵盤焦點：頁面自帶 outline:none 的元件（搜尋框、輸入框）也一律看得到外框（顏色沿用上面各規則） */
:focus-visible{outline-style:solid!important;outline-width:2px!important}
/* #16 備考首頁：沒有作答紀錄時首屏的「第一步」（取代 0 天／0 題／0 題） */
.hero-first{display:flex;flex-direction:column;gap:8px;flex:1 1 320px;min-width:0}
.hero-first .hf-t{font-size:.75rem;font-weight:800;letter-spacing:.08em;color:#c9dbf3}
.hero-first .hf-step{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none}
.hero-first .hf-step b{font-size:.9375rem;font-weight:800;color:#fff}
.hero-first .hf-step span{font-size:.8125rem;color:#dbe6f5;line-height:1.5}
.hero-first .hf-step:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.hero-first .hf-step:focus-visible{outline-color:#fff}
/* #8 觸控目標：手機上備考首頁的小連結（法規異動／錯題本、應考資訊連結、最近更新）至少 44px 高 */
@media (max-width:760px),(pointer:coarse){
  .pillars-label a,.ei-link,.hb-recent a,.hb-recent-ft a,.hb-errata-link{display:inline-flex;align-items:center;min-height:44px}
}
/* #19 智能刷題的選中樣式與法條速判一致（藏青） */
.cfg .chip.on{background:var(--promo,#1e3a5f);border-color:var(--promo,#1e3a5f);color:#fff}
/* #6 freq 科目分頁鈕是載入後才填進 #subjTabs，空的時候 0 高、填入後把下面整張表推下 35px（CLS 0.5 以上）；先留一列高 */
#subjTabs:empty{min-height:35px}
/* 「最近更新」卡底下兩個連結：recent-updates.js 自帶樣式較晚載入，手機觸控高度用 !important 保底 */
@media (max-width:760px),(pointer:coarse){.hb-recent-ft a{min-height:44px!important;display:inline-flex!important;align-items:center}}