/* ============================================================================
   helpUPass｜Exam/Quiz + Navbar Clean CSS
   - 單檔整合、可直接置於 <link> 或 <style>
   - 設計原則：穩定版面（1000px 內容寬）、RWD 友好、PDF/列印一致
   - 覆寫策略：盡量以 CSS 變數供外部覆寫；必要時才用 !important 固定
   - 本版已清理重複與相衝設定，保留最終生效值（LOGO 69/49、gap 20/14、hr 8px 等）
   ============================================================================ */

/* ---------- Global variables (可被頁面 <head> 以 :root 覆寫) ---------- */
:root{
  /* 題紙與版面 */
  --paper-font-size: 18px;         /* 題紙主字級；頁面可依需求覆寫 */
  --ans-slot-width: 3em;           /* 答案槽等寬 */
  --site-gutter: 16px;             /* 主內容左右內距（<=576px 於下方再縮小） */

  /* LOGO（一般元件用；header 內另有固定覆寫 69/49） */
  --logo-h: 48px;                  /* 桌機 LOGO 高度（一般用途） */
  --logo-h-sm: 36px;               /* 手機 LOGO 高度（一般用途） */

  /* 導覽字型與配色（柔和） */
  --nav-font-size-min: 0.92rem;    /* clamp 下限 */
  --nav-font-size-max: 1.00rem;    /* clamp 上限 */
  --nav-color: #495057;            /* 一般連結色 */
  --nav-color-hover: #0d6efd;      /* hover 色 */
  --nav-muted: #6c757d;            /* 次要文字色（群組標題） */
  --nav-hover-bg: #eceff3;         /* 下拉 hover 背色 */
  --nav-active-bg: #0d6efd;        /* active 背色 */
  --nav-active-color: #fff;        /* active 文字色 */

  /* 卡片/頁面底色 */
  --page-bg: #f7f7f9;              /* 頁面底色（含 sticky 列） */
  --paper-bg: #fff;                /* 題紙底色 */
  --paper-radius: 16px;            /* 題紙圓角 */
  --paper-shadow: 0 6px 20px rgba(0,0,0,.08); /* 題紙陰影 */

  /* 得分框尺寸/樣式（可覆寫以調整比例） */
  --score-w: 3.2cm;
  --score-h: 4cm;
  --score-border: 2px solid #333;
  --score-radius: 10px;
}

/* ---------- Base ---------- */
body{ background: var(--page-bg); }
.container-narrow{ max-width: 1000px; }

/* 題紙（Google 字型會隨頁面載入與 PDF 拍入） */
.paper{
  font-family: 'Noto Sans TC','Microsoft JhengHei','PingFang TC',system-ui,sans-serif;
  background: var(--paper-bg);
  border-radius: var(--paper-radius);
  box-shadow: var(--paper-shadow);
  padding: 24px;
  font-size: var(--paper-font-size);
  line-height: 1.75;
}
.q-title{ font-weight: 600; }
.controls .form-label{ font-weight: 600; }

/* 分隔線（清理後僅保留 8px 間距版本） */
hr.soft{ border:0; border-top:1px dashed #ddd; margin:8px 0 !important; }

/* PDF/瀏覽器保險：避免題塊被拆頁 */
.q{ break-inside: avoid; page-break-inside: avoid; }

/* ---------- Sticky bars ---------- */
.sticky-topbar{ position: sticky; top: 0; z-index: 1020; background: var(--page-bg); padding:10px 0; }
.sticky-topbar:not(#siteHeader){ z-index: 1200; } /* 其他 sticky 層級略低於 header */

/* ============================================================================
   Exam header layout（標題、資訊、得分框）
   - 版面：左右二欄（左：標題/資訊；右：得分框）
   - 字級：大標題固定 px，RWD/列印另有覆寫；次標題與姓名座號同理
   ============================================================================ */
.exam-head{ margin-bottom: 12px; }
.line{ display:inline-block; border-bottom:1.5px solid #333; min-width:160px; height:1.3em; vertical-align:bottom; }
.line.short{ min-width:80px; }

.exam-head-flex2{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }

/* 大標題（固定 36px，不受 --paper-font-size 影響；RWD/列印會覆寫） */
.exam-title-fixed{
  font-size: 36px !important;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.5;
}

/* 第二行（考試名稱/批次等） */
.exam-meta-fixed{
  font-size: 28px !important;   /* 螢幕用固定 px；列印會改為 pt */
  font-weight: 500;              /* 可依需求調整：700/800 */
  text-align: center !important;
  line-height: 1.5;
}

/* 姓名／座號列（桌機）
   - 維持 margin-top:45px（使用者確認不改為 12px）
   - 原註想改 12px，現依確認保留 45px，RWD 再縮小 */
.exam-name-seat-fixed{
  font-size: 24px !important;
  text-align: right !important;
  white-space: nowrap;
  margin-top: 45px;              /* 維持 45px；RWD 於下方覆寫為更緊湊 */
}
.exam-head-left{ flex:1 1 auto; min-width:0; }
.exam-head-right{ flex:0 0 auto; }
.exam-name-seat-fixed .line{ vertical-align:middle; }

/* 得分框（留白多、標題不加粗） */
.score-title-fixed{ font-size:26px !important; font-weight:400; text-align:center; margin-bottom:6px; }
.score-panel{
  width:var(--score-w); height:var(--score-h);
  border:var(--score-border); border-radius:var(--score-radius);
  padding:6px 8px; display:flex; flex-direction:column; justify-content:flex-start;
  box-sizing:border-box; background:#fff; margin:0;
}
.score-blank{ flex:1; }

/* ============================================================================
   Options (①②③… / (A)(B)(C)...)：inline 佈局 + 可換行
   - 精簡：移除重覆宣告，統一間距與斷行策略
   - 調整：題號與文字更貼齊、各答案組間距略縮
   ============================================================================ */

/* 容器可在文中換行；整組可往右縮 1.2em（需要可調整） */
.opt-inline{
  white-space: normal;
  padding-left: 1.2em; /* 想再多可調 0.8em / 1em */
}

/* 單一答案膠囊（inline-flex 以便對齊；縮小左右/下方間距） */
.opt-item{
  display: inline-flex;
  align-items: flex-start;
  vertical-align: top;
  white-space: normal;
  max-width: 100%;
  margin-right: .35em;
  margin-bottom: .15em;
}
.opt-item:last-child{ margin-right: 0; }

/* 題號（①②③…/A/B/C）與文字幾乎貼齊，但保留極微呼吸 */
.opt-bullet{
  display: inline-block;
  flex: none;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  margin-right: .08em; /* 原 .18em → 更緊 */
}

/* 文字：允許長字/網址換行；用 inline-flex 清掉樣板空白影響 */
.opt-text{
  display: inline-flex;
  align-items: baseline;
  gap: 0;                   /* 不額外製造距離，完全由 .opt-bullet 控制 */
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;  /* 現代瀏覽器 */
  word-break: break-word;   /* 備援 */
}

/* ----（可選）出卷區更緊湊：只在 .paper 內生效 ---- */
.paper .opt-item{
  margin-right: .30em;
  margin-bottom: .12em;
}
.paper .opt-bullet{
  margin-right: .06em;
}

/* 按鈕本體：允許換行、左對齊、貼齊排列 */
.opt-btn{
  display: inline-flex;
  align-items: flex-start;
  gap: 0;                 /* 不用 gap，距離交給 .opt-bullet 控 */
  white-space: normal;
  text-align: left;
}

/* 題號（①②③…）與答案幾乎貼齊，但保留極小呼吸 */
.opt-bullet{
  flex: none;
  font-weight: 700;
  line-height: 1;
  margin-right: .08em;    /* 原先多的空白由這裡精準控制 */
}

/* 答案文字/圖片：可換行，長字不爆版 */
.opt-word{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 選項內圖片自適應，不撐破按鈕 */
.opt-btn img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}


/* ============================================================================
   Tighten question spacing
   ============================================================================ */
.q{ margin-bottom:8px !important; }
.q .q-title{ margin-bottom:4px !important; }

/* ============================================================================
   Fixed-width answer slot
   ============================================================================ */
.ans-wrap{ display:inline-flex; align-items:baseline; white-space:nowrap; break-inside:avoid; }
.ans-slot{
  display:inline-block; width:var(--ans-slot-width); text-align:center;
  font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; line-height:1;
  margin-left: -0.18em; margin-right: -0.18em;
}

/* ============================================================================
   Responsive tweaks（僅螢幕；PDF/列印不受影響）
   ============================================================================ */
@media screen and (max-width: 992px){
  .exam-head-flex2{ flex-wrap:wrap; gap:10px; align-items:flex-start; }
  .exam-head-left{ order:1; flex:1 1 100%; min-width:0; }

  .exam-title-fixed{
    white-space:normal !important;
    font-size:clamp(18px, 4.5vw, 28px) !important; /* 依視窗縮放，避免換行過多 */
    line-height:1.5; text-align:center;
  }
  .exam-meta-fixed{ white-space:normal !important; line-height:1.5; text-align:center !important; }

  /* 手機上再緊一些（姓名/座號列） */
  .exam-name-seat-fixed{
    white-space:nowrap; line-height:1.2; text-align:right !important; margin-top:8px;
  }
  .exam-name-seat-fixed .line{ min-width:120px; }
  .exam-name-seat-fixed .line.short{ min-width:60px; }

  .exam-head-right{ order:2; flex:0 0 100%; display:flex; justify-content:flex-end; margin-top:6px; }
  .score-panel{ width:2.6cm; height:2.6cm; }
}
@media screen and (max-width: 480px){
  .exam-title-fixed{ font-size:clamp(16px, 5.2vw, 24px) !important; }
  .exam-name-seat-fixed .line{ min-width:100px; }
  .exam-name-seat-fixed .line.short{ min-width:54px; }
  .score-panel{ width:2.3cm; height:2.3cm; }
}

/* ============================================================================
   Top Navbar (#siteHeader)
   - 導覽層級：#siteHeader z-index=1300 > 其他 sticky（1200/1020）
   - LOGO：header 內固定 69/49（覆寫一般變數用高度），確保視覺一致與不跑版
   ============================================================================ */

#siteHeader {
  position: sticky;
  top: 0;
  z-index: 1300;
  background: #fff;
}
#siteHeader .navbar { overflow: visible; }
#siteHeader .dropdown-menu { z-index: 2001; overflow: visible; } /* 確保下拉不被裁切 */

/* ============================================================================
   LOGO 區域
   ============================================================================ */

/* 一般 LOGO 高度（供非 header 場景使用，可由 :root 變數覆寫） */
.brand-logo { height: var(--logo-h); width: auto; }
@media (max-width: 576px) {
  .brand-logo { height: var(--logo-h-sm); }
}

/* header 內 LOGO 高度（最終生效值；固定 69/49）避免跳動 */
#siteHeader .brand-logo {
  height: 69px !important;
  width: auto;
}
@media (max-width: 576px) {
  #siteHeader .brand-logo { height: 49px !important; }
}

/* LOGO 與標題間距（清理後保留 20/14） */
#siteHeader .navbar-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 576px) {
  #siteHeader .navbar-brand { gap: 14px; }
}

/* LOGO 後標題 */
#siteHeader .brand-title {
  font-weight: 800;
  color: var(--c-primary-deep); /* 🔵 改成網站主色（深藍） */
}

/* 手機版：品牌文字略小、間距收緊 */
@media (max-width: 576px){
  #siteHeader .brand-title{
    font-size: 1.2rem;   /* 約原來的 90% 大小，可依需要再調 */
    font-weight: 800;     /* 手機視覺上稍降字重，更平衡 */
  }
  #siteHeader .navbar-brand{ gap: 12px; } /* LOGO 與文字距離略收 */
}

/* ============================================================================
   導覽文字樣式
   ============================================================================ */

/* 選單字型 / 尺寸 / 顏色（更輕、更淡、略小） */
#siteHeader .nav-link,
#siteHeader .dropdown-item,
#siteHeader .dropdown-header {
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(var(--nav-font-size-min), 0.88rem + 0.2vw, var(--nav-font-size-max)) !important;
  color: var(--nav-color) !important;
}

/* 下拉分組標題：微粗、再淡一點 */
#siteHeader .dropdown-header {
  font-weight: 600 !important;
  color: var(--nav-muted) !important;
  font-size: 0.85rem !important;
}

/* 下拉項目高度（更好點觸） */
#siteHeader .dropdown-item {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1.2 !important;
}

/* 下拉 hover / active 顏色（淡灰、不刺眼；active 用主色） */
#siteHeader .dropdown-menu .dropdown-item:hover:not(.active),
#siteHeader .dropdown-menu .dropdown-item:focus:not(.active) {
  background-color: var(--nav-hover-bg) !important;
  color: #212529 !important;
  transition: background-color .12s ease, color .12s ease;
}
#siteHeader .dropdown-menu .dropdown-item.active {
  background-color: var(--nav-active-bg) !important;
  color: var(--nav-active-color) !important;
}

/* 主選單 hover 僅改文字顏色，不加粗不變背景 */
#siteHeader .nav-link:hover {
  color: var(--nav-color-hover) !important;
}

/* ============================================================================
   Header Nav｜主選單 active 樣式（僅限左側主要三個選單）
   ============================================================================ */

/* 桌機：主色底＋白字＋圓角，取消預設底線 */
#siteHeader .navbar-nav.me-auto .nav-link.active,
#siteHeader .navbar-nav.me-auto .nav-link[aria-current="page"] {
  background-color: var(--c-primary-deep);
  color: #fff !important;
  border-radius: 16px;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  line-height: 1.1;
  border: none; /* 移除 Bootstrap 的底線 */
  box-shadow: 0 2px 6px rgba(23, 62, 173, 0.15);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* hover 在 active 上維持主色（不變亮） */
#siteHeader .navbar-nav.me-auto .nav-link.active:hover {
  background-color: var(--c-primary);
  transform: translateY(-1px);
}

/* 行動版：展開時相同反白效果 */
@media (max-width: 768px) {
  #siteHeader .navbar-nav.me-auto .nav-link.active {
    background-color: var(--c-primary-deep);
    color: #fff !important;
    border-radius: 6px;
  }
}

/* ============================================================================
   End #siteHeader
   ============================================================================ */




/* === Main container 對齊 header（minimal）=== */
main.container,
main.container-narrow,
main.container.container-narrow{
  max-width: 1000px;           /* 與 .container-narrow 一致，避免內容寬度跳動 */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  margin-top: 24px;             /* 與 header 保持舒適距離；可依需求微調 */
}
@media (max-width: 576px){
  main.container,
  main.container-narrow,
  main.container.container-narrow{
    padding-left: 12px;         /* 窄螢幕縮小左右留白 */
    padding-right: 12px;
    margin-top: 16px;           /* 行動裝置更緊湊 */
  }
}

/* ============================================================================
   Print（合併後版本）：以 pt 為主、A4 邊界、強制穩定輸出
   - 說明：本段集中所有列印需求；螢幕 RWD 與列印尺寸分離，避免換算誤差
   ============================================================================ */
@media print{
  @page { size: A4; margin: 12mm; }       /* 紙張與留白（視需要可調） */

  .no-print{ display:none !important; }    /* 隱藏所有標記為 no-print 的區塊 */
  html, body { font-size: 12pt !important; background:#fff !important; }

  /* 題紙：列印時統一字級與行距；交由 @page 控制外距 */
  .paper{
    font-size: 12pt !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* 標題字級固定 pt，避免 RWD clamp 影響列印尺寸 */
  .exam-title-fixed{ font-size: 18pt !important; line-height: 1.25 !important; }
  .exam-meta-fixed { font-size: 12pt !important; line-height: 1.35 !important; text-align: center !important; }
  .exam-name-seat-fixed{ font-size: 12pt !important; }

  /* 文字縮放保險（避免瀏覽器自動調大） */
  .paper *{ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
}

/* ============================================================================
   篩選收合
   ============================================================================ */
/* ===== 收合區塊（Sticky 區） ===== */
/* 關閉時縮小下方間距；無 Bootstrap JS 時仍可隱藏 */
.sticky-topbar .collapse:not(.show) + * { margin-top: 0; }
#pagerControls.collapse:not(.show){ display: none; }

/* ============================================================================
   Pager Controls｜控制區按鈕（統一圓角與全站大小）
   ============================================================================ */
#pagerControls .btn{
  border-radius: 16px !important;   /* 與入口頁一致的圓角 */
  font-size: 1rem;                  /* Bootstrap 預設 1rem */
  padding: 0.45rem 0.9rem;          /* 對齊全站 .btn 的水平/垂直間距 */
  line-height: 1.1;                 /* 保持文字居中 */
  font-weight: 600;                 /* 與入口頁按鈕一致（可調整 400–600） */
}

/* hover / focus 效果（延續全站風格，可省略） */
#pagerControls .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
#pagerControls .btn:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* ===== Alert 提示條（含工具） ===== */
.alert-with-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.alert-with-tools .alert-main { min-width:0; }
.alert-with-tools .alert-meta { margin-left:auto; }
.alert-with-tools .alert-tools { display:flex; align-items:center; gap:6px; }
@media (max-width: 768px){
  .alert-with-tools .alert-tools { width:100%; justify-content:flex-end; }
}

/* ===== 收合按鈕（文案切換＋固定寬度避免抖動） ===== */
/* 隱藏原本文字，由 ::before 統一顯示；min-width 確保兩種文案寬度一致 */
#pagerToggle{
  font-size: 0;
  min-width: 7.5em;     /* 可依實際字型微調 */
  text-align: center;
}

/* 展開：顯示「收合設定」 */
#pagerToggle[aria-expanded="true"]::before{
  content: '收合設定';
  font-size: .95rem;
  line-height: 1.2;
  color: currentColor;
  display: inline-block;
  width: 100%;
}

/* 收合：顯示「開啟設定」 */
#pagerToggle[aria-expanded="false"]::before{
  content: '開啟設定';
  font-size: .95rem;
  line-height: 1.2;
  color: currentColor;
  display: inline-block;
  width: 100%;
}

/* ============================================================================
   Footer
   ============================================================================ */
/* 出卷 Footer：不被拆頁、細線分隔、較小字體 */
.exam-footer{
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed #cfd3d7;
  font-size: 0.92em;
  color: #6c757d;
  line-height: 1.6;
  break-inside: avoid;            /* avoid fragmentation */
  page-break-inside: avoid;

  padding-bottom: 18px;                 /* 區塊內部留白 */
  padding-bottom: max(18px, env(safe-area-inset-bottom)); /* iOS 瀏海機型 */
}
/* 列印時避免多餘空白（仍沿用你既有的列印調整） */
@media print{
  .exam-footer{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* 內文字樣與排版（居中、雙行、細分隔） */
.exam-footer{ text-align:center; }
.exam-footer .footer-note{ display:block; }
.exam-footer .fn-line{ line-height:1.7; }
.exam-footer .fn-main{ font-size:0.95em; color:#495057; }
.exam-footer .fn-sub { font-size:0.88em; color:#6c757d; margin-top:4px; }

/* 起始符號「※」做成淡色小 tag */
.exam-footer .tag{
  display:inline-block; margin-right:.35em;
  color:#6c757d; font-weight:600;
}

/* 直線分隔符號與間距 */
.exam-footer .sep{ display:inline-block; margin:0 .5em; color:#adb5bd; }

/* 窄螢幕：自動換行更好讀 */
@media (max-width: 576px){
  .exam-footer .fn-main{ font-size:0.92em; }
  .exam-footer .fn-sub { font-size:0.86em; }
  /* 行寬太窄時允許在分隔符前後斷行 */
  .exam-footer .sep{ margin:0 .35em; }
}

/* 列印時微調（pt 單位更穩定） */
@media print{
  .exam-footer{
    margin-top: 18pt !important;
    padding-top: 10pt !important;
    border-top: 1pt dashed #999 !important;
    font-size: 10pt !important;
    color: #555 !important;
  }
}

/* Footer 連結樣式：默認無底線、hover 有底線；色彩與主文字一致 */
.exam-footer .footer-site-link{
  text-decoration: none;
  color: inherit;
  font-weight: 600; /* 稍微強調網站名 */
}
.exam-footer .footer-site-link:hover,
.exam-footer .footer-site-link:focus{
  text-decoration: underline;
}

/* 列印時確保可讀性（避免藍色或過淡） */
@media print{
  .exam-footer .footer-site-link{
    color: #333 !important;
    text-decoration: underline; /* 列印給底線，方便辨識是網址 */
  }
}


/* ============================================================================
   Home｜Hero + License List（精簡定稿）
   ============================================================================ */

/* 基本色票（本區用） */
:root{
  --c-primary:       #1D4ED8;
  --c-primary-deep:  #173EAD;
  --c-logo-green: #1C9A34; /* LOGO 綠 */
  --hero-radius:     16px;
}

/* ------- Hero（滿版背景，無遮罩） ------- */
.page-head{ margin: 8px 0 18px; }

.hero-cover{
  position: relative;
  border-radius: var(--hero-radius);
  overflow: hidden;
  border: 1px solid #E5E7EB;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  min-height: 340px; /* Desktop */
}
.hero-cover .cover-img{
  position:absolute; inset:0;
  background-image: url('/assets/img/home-banner.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 70%; /* Desktop 焦點 */
  transform: scale(1.02);
}
.hero-cover .cover-inner{
  position: relative; z-index:1;
  padding: 40px 18px;
  text-align:center;
}
.hero-cover .page-title{
  font-weight: 800;
  letter-spacing: .015em;
  color: var(--c-primary-deep);
  font-size: clamp(1.2rem, 1.02rem + 1.1vw, 1.7rem);
  margin-bottom: .35rem;
  text-shadow: 0 1px 2px rgba(255,255,255,.55);
}
.hero-cover .page-lead{
  color:#475569;
  margin:0;
  font-size: clamp(.95rem, .9rem + .3vw, 1.06rem);
  text-shadow: 0 1px 1px rgba(255,255,255,.45);
}
.hero-dot{
  display:inline-block; width:8px; height:8px; border-radius:999px;
  background: var(--c-primary); margin: 0 .5rem .18rem;
}

/* RWD：平板同桌機高度；手機更緊湊，並上移左移焦點 */
@media (max-width: 992px){
  .hero-cover{ min-height: 340px; }
  .hero-cover .cover-inner{ padding: 30px 16px; }
}
@media (max-width: 576px){
  .hero-cover{ min-height: 280px; }
  .hero-cover .cover-inner{ padding: 20px 14px; }
  .hero-cover .cover-img{ background-position: 20% 30%; }
}

/* ------- Section 標題（與 page-title 同尺寸、同色） ------- */
.section-title{
  color: var(--c-primary-deep);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.25;
  font-size: clamp(1.2rem, 1.02rem + 1.1vw, 1.7rem);
  margin: 32px 0 20px;
  display:flex; align-items:center; gap:.5em;
}
.section-title::after{
  content:""; flex:1 1 auto; height:1px; background: rgba(15,23,42,.08);
}
@media (max-width: 576px){
  .section-title{ margin: 26px 0 16px; }
}
.section-title + ul.license-list{ margin-top: 18px; }

/* ------- License 清單卡片 ------- */
ul.list.card.license-list{
  /* 清掉 .card 的外框與 padding，並用 grid 佈局 */
  list-style:none; margin: 12px 0 40px; padding: 0 !important;
  border: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr;   /* Mobile: 1 欄 */
  gap: 16px;
}
@media (min-width: 768px){
  ul.list.card.license-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Desktop: 2 欄 */
  }
}

/* 卡片本體 */
ul.list.card.license-list > li.item{
  position: relative;
  background:#fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
ul.list.card.license-list > li.item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--c-primary), #2563eb);
  border-radius: 16px 0 0 16px;
}
ul.list.card.license-list > li.item:hover{
  transform: translateY(-1px);
  border-color: #dbeafe;
  box-shadow: 0 8px 22px rgba(29,78,216,.08);
}
/* 空狀態卡片在兩欄時也置中佔滿整列 */
ul.list.card.license-list > li.item.muted{
  grid-column: 1 / -1;
  border: 1px dashed #cbd5e1;
  background: #fafafa;
  color:#64748b; text-align:center;
  padding: 24px 16px; box-shadow: none;
}

/* 抬頭：代碼膠囊 + 名稱 */
.license-head{ display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap; }
.lic-code{
  display:inline-block; font-weight:700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.92rem; letter-spacing:.02em;
  color:#1e293b; background:#eff6ff; border:1px solid #dbeafe;
  padding:.18rem .5rem; border-radius: 999px;
}
.lic-name{
  font-weight:700; color:#0f172a;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
}

/* 等級按鈕群與按鈕 */
.ops{ display:flex; flex-wrap:wrap; gap:.5rem; }
.btn.lvl-btn{
  --btn-pad-y: .45rem; --btn-pad-x: .9rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  border:1px solid var(--c-primary);
  background: var(--c-primary);
  color:#fff !important;
  font-weight:600; line-height:1.1; letter-spacing:.02em;
  box-shadow: 0 2px 8px rgba(29,78,216,.15);
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn.lvl-btn:hover{
  transform: translateY(-1px);
  background:#1740b5; border-color:#1740b5;
  box-shadow: 0 6px 14px rgba(29,78,216,.22);
}
.btn.lvl-btn:focus{
  outline: none; box-shadow: 0 0 0 .2rem rgba(29,78,216,.25);
}
@media (max-width: 576px){
  ul.list.card.license-list > li.item{ padding:16px; }
  .lic-name{ font-size: clamp(1rem, .95rem + .5vw, 1.15rem); }
  .btn.lvl-btn{ --btn-pad-y:.42rem; --btn-pad-x:.82rem; }
}
/* 套用 LOGO 綠的按鈕樣式 */
.btn.lvl-btn.lvl-green{
  background: var(--c-logo-green);
  border-color: var(--c-logo-green);
  color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-logo-green) 25%, transparent);
  transition: transform .06s ease, box-shadow .12s ease,
              background-color .12s ease, border-color .12s ease;
}
.btn.lvl-btn.lvl-green:hover{
  background: color-mix(in srgb, var(--c-logo-green) 88%, #0b6023); /* hover 稍深 */
  border-color: color-mix(in srgb, var(--c-logo-green) 88%, #0b6023);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--c-logo-green) 35%, transparent);
}
.btn.lvl-btn.lvl-green:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--c-logo-green) 30%, transparent);
}

/* ============================================================================
   Cert Entrance｜證照入口頁（隔離於 .cert-entrance，不影響首頁）
   需求：
   - 卡片外觀與首頁一致
   - KV 區兩欄 RWD + 下載按鈕（LOGO 綠）
   - 工作項目/共同科目：兩欄卡片 + 左側主色細條
   - 三顆動作維持藍色實心
   - 本頁所有按鈕字重降到 400、陰影收斂
   ============================================================================ */

/* ---- 變數（若全站已有同名可保留為備援） ---- */
:root{
  --c-logo-green: #1C9A34;                                  /* LOGO 綠 */
  --ce-title-size-h1: clamp(1.2rem, 1.02rem + 1.1vw, 1.7rem);  /* 主標題（原大小） */
  --ce-title-size-h2: clamp(1.05rem, 0.95rem + 0.9vw, 1.45rem);/* 副標題（略小） */
}
/* h1：主標題 */
.cert-entrance .page-title{
  color: var(--c-primary-deep);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.25;
  font-size: var(--ce-title-size-h1) !important;
  margin: 0 0 6px;
}

/* h2：副標題（學科／共同科目） */
.cert-entrance .section-title{
  color: var(--c-primary-deep);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.25;
  font-size: var(--ce-title-size-h2) !important;
  margin-top: 16px !important;     /* ✅ 上方距離稍微縮小 */
  margin-bottom: 20px;
  display:flex; align-items:center; gap:.5em;
}
.cert-entrance .section-title::after{
  content:""; flex:1 1 auto; height:1px; background: rgba(15,23,42,.08);
}
@media (max-width: 576px){
  .cert-entrance .section-title{ margin-top: 12px !important; }
}

/* ---- 卡片外觀（與首頁一致） ---- */
.cert-entrance > section.card{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  margin:16px 0 22px;
}

/* ============================================================================
   KV 區：檔名/版次/日期/適用時間/檔案下載（兩欄 RWD）
   ============================================================================ */
.cert-entrance section.card .kv{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns: 1fr;                          /* Mobile: 一欄 */
}
@media (min-width: 768px){
  .cert-entrance section.card .kv{ grid-template-columns: 1fr 1fr; } /* md+: 兩欄 */
}
.cert-entrance section.card .kv > li{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.cert-entrance section.card .kv > li > b{
  flex:none; width:7em; text-align:right;
  color:#475569; font-weight:700;
}
.cert-entrance section.card .kv > li > span{
  flex:1 1 auto; min-width:0; color:#0f172a; overflow-wrap:anywhere;
}

/* 檔案下載（學科/術科）按鈕群：與文字起點對齊、可換行 */
.cert-entrance section.card .kv .kv-actions{
  display:inline-flex; flex-wrap:wrap; gap:.5rem; align-items:center;
}
.cert-entrance section.card .kv > li .btn{
  margin-left:0;
  padding:.45rem .9rem; border-radius:999px;
  border:1px solid var(--c-primary);
  background:var(--c-primary); color:#fff !important;
  letter-spacing:.02em; line-height:1.1;
  box-shadow:0 2px 8px rgba(29,78,216,.15);
  transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.cert-entrance section.card .kv > li .btn:hover{
  transform:translateY(-1px);
  background:#1740b5; border-color:#1740b5;
  box-shadow:0 6px 14px rgba(29,78,216,.22);
}
/* LOGO 綠皮膚（學科/術科下載用） */
.cert-entrance section.card .kv > li .btn.lvl-green{
  background:var(--c-logo-green); border-color:var(--c-logo-green);
  color:#fff !important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--c-logo-green) 25%, transparent);
}
.cert-entrance section.card .kv > li .btn.lvl-green:hover{
  background:color-mix(in srgb, var(--c-logo-green) 88%, #0b6023);
  border-color:color-mix(in srgb, var(--c-logo-green) 88%, #0b6023);
  box-shadow:0 6px 14px color-mix(in srgb, var(--c-logo-green) 35%, transparent);
}

/* ============================================================================
   工作項目 / 共同科目：兩欄卡片 + 左側主色細條
   ============================================================================ */
.cert-entrance section.card .grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns:1fr;                                  /* Mobile: 一欄 */
}
@media (min-width:768px){
  .cert-entrance section.card .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } /* md+: 兩欄 */
}
.cert-entrance section.card .grid > li{
  position:relative; background:#fff;
  border:1px solid #e9ecef; border-radius:16px; padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cert-entrance section.card .grid > li::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg, var(--c-primary), #2563eb);
  border-radius:16px 0 0 16px;
}
.cert-entrance section.card .grid > li:hover{
  transform:translateY(-1px);
  border-color:#dbeafe;
  box-shadow:0 8px 22px rgba(29,78,216,.08);
}

/* 小卡標題 */
.cert-entrance .wtitle{
  font-weight:700; color:#0f172a;
  font-size:clamp(1.02rem, .98rem + .35vw, 1.18rem);
  line-height:1.35;
}

/* 動作列：多一點與標題的留白（只在本頁） */
.cert-entrance .ops{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }

/* 三顆動作（刷題器/測驗區/出卷區）藍色實心 */
.cert-entrance section.card .grid .ops .btn{
  padding:.45rem .9rem; border-radius:999px;
  border:1px solid var(--c-primary);
  background:var(--c-primary); color:#fff !important;
  letter-spacing:.02em; line-height:1.1;
  box-shadow:0 2px 8px rgba(29,78,216,.15);
  transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.cert-entrance section.card .grid .ops .btn:hover{
  transform:translateY(-1px);
  background:#1740b5; border-color:#1740b5;
  box-shadow:0 6px 14px rgba(29,78,216,.22);
}
/* 若偶爾在本頁使用描邊按鈕 */
.cert-entrance .ops .btn.ghost{
  background:#fff; color:var(--c-primary);
  border:1px solid color-mix(in srgb, var(--c-primary) 32%, #d0d8ff);
  box-shadow:none;
}
.cert-entrance .ops .btn.ghost:hover{
  background:color-mix(in srgb, var(--c-primary) 7%, #fff);
  color:color-mix(in srgb, var(--c-primary) 90%, #0b5ed7);
  border-color:color-mix(in srgb, var(--c-primary) 55%, #c9d6ff);
}

/* 空狀態卡片 */
.cert-entrance section.card .muted{
  color:#64748b; background:#fafafa; border:1px dashed #cbd5e1;
  border-radius:12px; padding:18px; text-align:center;
}

/* ============================================================================
   本頁按鈕「降飽和」（字重/陰影）：不影響首頁
   ============================================================================ */
.cert-entrance section.card .btn{
  font-weight:400 !important;
  box-shadow:0 1px 4px rgba(0,0,0,.08) !important;
}
.cert-entrance section.card .btn:hover{
  transform:translateY(-0.5px);
  box-shadow:0 4px 10px rgba(0,0,0,.12) !important;
}

/* ============================================================================
   刷題器（Practice）樣式 - 最終整理版
   依賴：<main style="--fs: <?=$font_size_view?>;"> 由後端設定字級基準
   ============================================================================ */

/* ========== 文字基準：整頁字級跟著 --fs（前置以 $font_size_view 設定） ========== */
.practice{
  font-size: calc(var(--fs, 16) * 1px);
  line-height: 1.65;
}

/* ========== 題目列表：按鈕圓角、題目標題、分隔線 ========== */
.opt-list .btn{ border-radius: .75rem; }   /* 選項按鈕圓角 */

.practice .q-title{
  font-weight: 500;                        /* 題目標題稍微輕一點 */
  font-size: calc(var(--fs, 16) * 1px);
  line-height: 1.35;
}

.q-title img{max-width:100%;height:auto;vertical-align:middle;}

hr.soft{                                   /* 題目之間的輕量分隔線 */
  border: 0;
  border-top: 1px solid rgba(0,0,0,.06);
  margin: 1.75rem 0;                       /* 題目節奏 */
}

/* 題目與其選項群組間距、選項群組左側內縮（更整齊） */
.practice .opt-list{
  margin-top: .6rem;
  padding-left: 1.75rem;                   /* 你的指定內縮距離 */
}

/* 答案按鈕字級：比題目小 2px（含上下限），並微調內距 */
.practice .opt-list .btn{
  font-size: clamp(12px, calc(var(--fs, 16) * 1px - 2px), 20px) !important;
  font-weight: 500;
  line-height: 1.35;
  padding: .38rem .6rem;
  white-space: normal;
  text-align: left;
}

/* ========== 答題回饋：錯誤抖動動畫 ========== */
.feedback.shake{ animation: shake .4s linear; }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

/* ========== 完成提示：按鈕圓角 ========== */
#finishBlock .btn{ border-radius: .6rem; }

/* ========== 抬頭（標題＋膠囊）置中，並在標題左右畫灰線 ========== */
.practice .exam-header{ text-align: left; margin-bottom: 20px; }
.practice .exam-header .exam-meta{ justify-content: flex-start; }      /* 置中膠囊列 */

.practice .section-title{
  color: var(--c-primary-deep, #0f172a);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.25;
  font-size: calc(var(--fs, 16) * 1px + 4px);
  margin-top: 16px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: .5em;
}
.practice .section-title::before,
.practice .section-title::after{
  content: ""; flex: 1 1 0; height: 1px;
  background: rgba(15,23,42,.08);
}

/* 小膠囊（工作項目／範圍） */
.practice .exam-meta .meta-chip{
  display: inline-flex; align-items: center;
  padding: .12rem .45rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.035);
  border-radius: .5rem;
  font-size: calc(var(--fs, 16) * 1px - 4px);
  color: #6c757d;
  line-height: 1.25;
  white-space: nowrap;
}

/* ========== 試卷卡片（題目區）：白底灰框＋陰影 ========== */
:root{
  --paper-bg: #fff;
  --paper-radius: 16px;
  --paper-shadow: 0 8px 24px rgba(0,0,0,.06);
  --paper-font-size: inherit;
}

.practice .exam-header + .practice-paper{ margin-top: 0; } /* 標題後直接接卡片 */

/* 測驗說明：較高對比 + 淡底色 + 左緣色條（小一號字） */
.practice .exam-note{
  color: #334155;
  background: rgba(15,23,42,.04);
  border-left: 4px solid var(--c-primary-deep, #0f172a);
  padding: .6rem .75rem;
  border-radius: 12px;
  font-size: clamp(12px, calc(var(--fs, 16) * 1px - 2px), 18px); /* ⬅️ 小一階 */
  line-height: 1.6;
  margin-top: .5rem;
}

.practice .practice-paper{
  --paper-pad: 30px;
  padding: var(--paper-pad);
  font-family: 'Noto Sans TC','Microsoft JhengHei','PingFang TC',system-ui,sans-serif;
  background: var(--paper-bg);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--paper-radius);
  box-shadow: var(--paper-shadow);
  font-size: var(--paper-font-size);
  line-height: 1.7;

  /* 重要：題目區不居中（避免繼承到 exam-header 的置中） */
  text-align: left;
}

/* 卡片首尾元素不多佔空間，看起來四邊等距 */
.practice .practice-paper > :first-child{ margin-top: 0; }
.practice .practice-paper > :last-child { margin-bottom: 0; }

/* 完成區塊若剛好在最後，避免多出底部外距 */
.practice .practice-paper #finishBlock:last-child{ margin-bottom: 0; }

/* ========== 答案顯示：純文字、與前文同字重同大小（不反白） ========== */
.practice .ans-badge.badge{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: currentColor !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ========== 送出計分：與最後一題間距、按鈕造型（16px 圓角） ========== */
.practice .practice-paper #submitBar{
  padding-top: 1.6rem;     /* 用 padding-top 避免 margin 折疊，間距一定顯示 */
  text-align: center;
}
#btnSubmitScore{
  font-size: clamp(13px, calc(var(--fs, 16) * 1px + 1px), 20px);
  padding: .5rem 1rem;
  border-radius: 16px;     /* 你指定的圓角 */
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: #ff6b00;
  border-color: #ff6b00;
  box-shadow: 0 4px 12px rgba(255,107,0,.22);
}
#btnSubmitScore:hover,
#btnSubmitScore:focus{
  background: #e55f00;
  border-color: #e55f00;
  box-shadow: 0 6px 14px rgba(229,95,0,.3);
}

/* ========== 列印：移除陰影與邊框，統一字級與行距 ========== */
@media print{
  @page { size: A4; margin: 12mm; }
  .practice .practice-paper{
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    font-size: 12pt !important;
    line-height: 1.6 !important;
  }
}


/* === Page-scoped tweaks: Practice / Test（精簡版）=== */

/* 抬頭置中 + 與下方距離縮小 */
.practice-page .exam-header,
.test-page     .exam-header{
  text-align: center !important;
  margin-bottom: 8px !important;
}
.practice-page .exam-header .exam-meta,
.test-page     .exam-header .exam-meta{
  justify-content: center !important;
}

/* 標題字級固定比頁面字級 +12px */
.practice-page .section-title,
.test-page     .section-title{
  font-size: calc(var(--fs, 16) * 1px + 12px) !important;
}

/* 題目節奏隨字級縮放（分隔線 / 題塊底距 / 選項群上距） */
/* 微縮版距離（再緊一些些） */
.practice-page hr.soft,
.test-page     hr.soft{
  margin: clamp(8px, calc(var(--fs, 16) * 0.65px), 22px) 0 !important;
}

.practice-page .q,
.test-page     .q{
  margin-bottom: clamp(4px, calc(var(--fs, 16) * 0.34px), 14px) !important;
}

.practice-page .opt-list,
.test-page     .opt-list{
  margin-top: clamp(4px, calc(var(--fs, 16) * 0.32px), 12px) !important;
}


/* exam-meta（膠囊）字級：= 基準 +4px；先歸零再覆寫，避免被舊 clamp 影響 */
.practice-page .exam-header .exam-meta .meta-chip,
.test-page     .exam-header .exam-meta .meta-chip{
  font-size: inherit !important;
  font-size: clamp(12px, calc(var(--fs, 16) * 1px + 4px), 48px) !important;
  line-height: 1.35;
}

/* exam-note：置中 + 上下留白；字級用基準 fs（若要 +4px 可自行調整 calc + 4px） */
.practice-page .exam-note,
.test-page     .exam-note{
  font-size: inherit !important;
  font-size: clamp(12px, calc(var(--fs, 16) * 1px), 54px) !important;
  line-height: 1.55;
  text-align: center !important;
  margin-top: .75rem !important;
  margin-bottom: .75rem !important;
}

/* Practice：前往測驗區按鈕做成與測驗區提交鈕一致（保留 .btn-primary 的顏色） */
.practice-page #finishBlock .btn-like-submit{
  font-size: clamp(13px, calc(var(--fs, 16) * 1px + 1px), 20px);
  padding: .5rem 1rem;
  border-radius: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(13,110,253,.22);
  margin-bottom: .6rem; /* 你要求的下方間距 */
}
.practice-page #finishBlock .btn-like-submit:hover,
.practice-page #finishBlock .btn-like-submit:focus{
  box-shadow: 0 6px 14px rgba(13,110,253,.30);
}

/* 讓答案按鈕字級隨 --fs 繼續放大，不被 20px 封頂 */
.practice-page .opt-list .btn,
.test-page     .opt-list .btn{
  /* 先中止舊規則的影響（若有 clamp） */
  font-size: inherit !important;

  /* 按你現在的設計：基準 -2px，但把上限拉高到 48px（可再調） */
  font-size: clamp(12px, calc(var(--fs, 16) * 1px - 2px), 48px) !important;

  /* 小保險：大字級時讓行高舒服一點 */
  line-height: 1.35;
}

/* 讓「答案為：<span class="ans-badge badge">...</span>」可自動換行 */
.practice-page .ans-badge.badge,
.test-page     .ans-badge.badge{
  white-space: normal !important;   /* 解除 Bootstrap 的 nowrap */
  overflow-wrap: anywhere;          /* 長字串/英文也可折行 */
  word-break: break-word;           /* 舊字串行為保險 */
  max-width: 100%;                  /* 保證不超出容器 */
  display: inline;                  /* 保持行內排列 */
}

/* 保險：整個正解列也允許折行（有時父層會被其他樣式影響） */
.practice-page .correct-wrap,
.test-page     .correct-wrap{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.practice-page .q-title,
.test-page     .q-title{
  display: inline-flex;       /* 或 flex；inline-flex 會隨文字流 */
  align-items: baseline;
  gap: .35em;                 /* 題號與題幹間距用 gap 控 */
}


/* 題幹主圖：置中、等比縮放、不超出題塊 */
.q-mainimg{
  margin: .5rem 0 .25rem;
  text-align: center;
}
.q-mainimg img{
  max-width: 100%;
  height: auto;
  display: inline-block; /* 置中用 */
  border-radius: 8px;
}