/* PSCFORM 首頁樣式（0005956 首頁改版）
   來源：設計參考稿「新首頁0907_分段上.html」
   僅供 _LayoutHome.cshtml 與 Home/Index.cshtml 使用；選擇器以 .psc-home 收斂，
   避免與同頁載入的 Bootstrap 4（index.css）互相污染。
   .psc-btn / .psc-nav 為避開 Bootstrap 同名 class 而加的前綴。 */


  :root{
    --ink:#1B2A4D;
    --ink-soft:#2C3E63;
    --brand-green:#2EA942;
    --brand-green-dark:#1F7F32;
    /* 綠色當文字時用這個；--brand-green 對白底僅 3.06:1，只能做色塊或指示點 */
    --live-ink:#1F7F32;
    --brand-blue:#1650A1;
    --brand-blue-dark:#0F3B73;
    --gold:#FFB800;
    --bg:#F5F8FB;
    --surface:#FFFFFF;
    --line:#E1E7F0;
    /* 分隔線專用，比 --line 再淡一階；--line 留給卡片外框，兩者分開才不會讓
       「卡片邊界」與「同一張卡內的分隔」看起來一樣重 */
    --rule:#E8EDF5;
    /* 比 --line 深一階。--line 對白底只有 1.2:1，只能當靜止的卡片外框；
       需要被看見的線（認證碼格位、卡片 hover 邊框）用這一階 */
    --line-strong:#CBD6E6;
    /* 輸入框提示文字：原本各處用 #9AA6BC，對白底僅 2.45:1，未達 WCAG AA 4.5 */
    --placeholder:#666F87;
    /* 深色底（頁尾）上的文字：dim 為次要階，兩者對 --ink 皆已達 AA */
    --on-ink:#B9C4DC;
    --on-ink-dim:#8E9BB8;
    /* 互動回饋時間一律 160ms：原本散落 .14/.16/.18/.2s，差距 20–60ms 肉眼分辨不出，
       卻讓每次新增樣式都得重新猜該用哪個。脈動等有語意的動畫不套用此值。 */
    --dur:.16s;
    /* 間距沿用 4 的倍數（4/8/12/16/20/24/32/40/48/64/76），新增樣式請從這組挑。
       未做成 token：間距與字級不同，硬推同一組值會實際位移版面；此處只把
       3/5/7/9/11/13/15 這類沒有理由的奇數值收掉，同類元素用同一值的原則優先於數學級數。 */
    --muted:#5C6B85;
    /* 字級：本頁只用這幾階。原本有 15 種尺寸，其中十種擠在 12–16.5px、相鄰只差 0.5px，
       畫面上看不出差別，卻讓後續新增樣式失去可依循的依據。中文密集介面不強套等比級數，
       但 0.5px 的雜訊一律收掉。（已移除模組的樣式不在此列，維持原樣待日後接回） */
    --text-2xs:12px;
    --text-xs:13px;
    --text-sm:14px;
    --text-md:15px;
    --text-lg:17px;
    --text-xl:20px;
    --text-code:22px;
    --text-stat:30px;
    /* 圓角：sm＝卡片內的小元素、md＝卡片與輸入框、lg＝大型面板；膠囊 999px 與圓形 50% 不在此列。
       原本存活規則用了 28/22/18/16/14/12/10 七種值，相鄰只差 2–4px，看不出是刻意區分。 */
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:20px;
    --shadow-soft:0 20px 45px -20px rgba(18,32,61,0.25);
    --shadow-card:0 10px 30px -12px rgba(18,32,61,0.18);
    /* 真正浮起的元素才用；目前僅主視覺的認證碼入口卡 */
    --shadow-lift:0 28px 56px -28px rgba(18,32,61,0.34), 0 2px 6px -2px rgba(18,32,61,0.07);
  }
  .psc-home, .psc-home *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .psc-home img{max-width:100%; display:block;}
  /* 長的不可斷字串（長信箱、含底線的科目代碼、英文長名）會把版面整個撐破，
     實測注入 50 字元無空白字串時頁面橫向溢出 148–294px。break-word 只在單字
     真的塞不下時才斷，一般內容的斷行行為不受影響。 */
  .psc-home{ overflow-wrap:break-word; }
  /* 以圖示取代文字標籤的欄位，欄位名稱留給螢幕閱讀器 */
  .u-sr-only{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  /* 鍵盤操作時的焦點框；滑鼠點擊不觸發，避免按鈕點完殘留框線 */
  .psc-home :focus-visible{ outline:3px solid var(--brand-blue); outline-offset:2px; border-radius:4px; }
  /* index.css（Bootstrap 4）的 button:focus 會在滑鼠點擊、手指點按後留下一圈焦點環；
     焦點環只給鍵盤（上一條 :focus-visible），指標操作一律不畫 */
  .psc-home :focus:not(:focus-visible){ outline:none; }
  .psc-home a{color:inherit; text-decoration:none;}
  /* 標題換行後最後一行只剩一兩個字（實測「SEC軟體工程師國際認證」末行只有「證」一個字）。
     balance 讓瀏覽器把各行拉齊，不支援的版本退回一般換行 */
  .psc-home :where(h1, h2, h3, h4){ text-wrap:balance; }
  .exam-card__subject, .exam-day-row__subject{ text-wrap:balance; }
  /* 選取文字沿用品牌色，不要瀏覽器預設的那個藍 */
  .psc-home ::selection{ background:rgba(22,80,161,0.16); color:var(--ink); }
  .psc-home ul{list-style:none;}
  /* 數據型內容一律等寬：場次時間、考試時長、統計數字、認證碼。
     JetBrains Mono 的 unicode-range 只含 latin，中文（分鐘、至）自動退回系統字族，
     所以「90 分鐘」會是等寬數字＋一般中文，正是要的效果。 */
  .num{font-family:'JetBrains Mono', monospace;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  .psc-home section{position:relative;}

  /* 取得鍵盤焦點前移出畫面，但不能用 display:none 或 visibility:hidden，那樣就無法聚焦 */
  /* 必須寫成 .psc-home .skip-link：.psc-home a{color:inherit} 的權重是 (0,1,1)，
     會蓋過單一 class 的 (0,1,0)，文字會變成墨色壓在藍底上（1.82:1） */
  .psc-home .skip-link{
    /* 必須是 fixed 不是 absolute：absolute 會相對文件定位，使用者在頁面中段
       Shift+Tab 回來時連結會出現在文件頂端（畫面外）而看不見 */
    position:fixed; left:16px; top:-72px; z-index:100;
    padding:12px 20px; border-radius:var(--radius-sm);
    background:var(--brand-blue); color:#fff;
    font-size:var(--text-xs); font-weight:700;
    transition:top var(--dur) ease;
  }
  .psc-home .skip-link:focus{ top:16px; }

  /* ---------- Buttons ---------- */
  .psc-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius:999px;
    font-weight:700; font-size:var(--text-md); letter-spacing:.02em;
    border:2px solid transparent; cursor:pointer;
    transition:box-shadow var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease;
  }
  /* 不做 hover 位移：每顆按鈕都上浮會讓整頁在滑鼠經過時輕微晃動，改由各變體自己換色 */
  /* 不放彩色陰影：按鈕底下一圈藍暈是生成式介面最常見的手法，實心品牌藍本身已經夠重 */
  .psc-btn-primary{ background:var(--brand-blue); color:#fff; }
  .psc-btn-primary:hover{ background:var(--brand-blue-dark); }
  .psc-btn:disabled{ opacity:.5; cursor:not-allowed; }
  .psc-btn-ghost{ background:transparent; border-color:rgba(18,32,61,0.18); color:var(--ink); }
  /* 淡色實心：清單列裡每一列都有的同一個動作。一列一顆實心藍在五六列並排時會變成按鈕牆，
     淡底藍字份量剛好，hover 才轉實心 */
  .psc-btn-tint{ background:rgba(22,80,161,0.10); border-color:transparent; color:var(--brand-blue); box-shadow:none; }
  .psc-btn-tint:hover{ background:var(--brand-blue); color:#fff; box-shadow:none; }
  .psc-btn-ghost:hover{ border-color:var(--ink); background:rgba(18,32,61,0.04); }
  /* 按下回饋：位移 1px。觸控裝置沒有 hover，沒有這個就完全感覺不到按到了。
     不用 scale——文字縮放會糊掉，而且這個品牌要的是穩重不是彈跳 */
  .psc-btn:active{ transform:translateY(1px); }
  .psc-btn-primary:active{ background:var(--brand-blue-dark); }
  /* 0.35 對 --brand-blue 底僅 1.59:1，未達 WCAG 非文字元件的 3:1；0.55 為 3.3:1 */
  .psc-btn-on-dark{ border-color:rgba(255,255,255,0.55); color:#fff; }
  .psc-btn-on-dark:hover{ border-color:#fff; }
  .psc-btn-sm{ padding:8px 18px; min-height:44px; font-size:var(--text-xs); }

  .pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:999px;
    font-size:var(--text-2xs); font-weight:700; letter-spacing:.03em;
  }

  /* ---------- Nav ---------- */
  .psc-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(245,248,251,0.86);
    backdrop-filter:blur(14px);
    /* 模糊層每幀都要重新取樣底下的內容；圈住重繪範圍，捲動長頁時不會連帶整頁重算 */
    border-bottom:1px solid var(--rule);
  }
  /* 觸控裝置多半是行動 GPU，模糊的每幀成本划不來；改為實色，可讀性反而更穩 */
  @media (pointer: coarse){
    .psc-nav{ background:rgba(245,248,251,0.97); backdrop-filter:none; }
  }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding:14px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:var(--text-lg); color:var(--ink); }
  /* 盾牌在 920px 以下縮到 32px（高 41px），用內距補到 44 而不改變視覺大小 */
  .logo a{ display:flex; align-items:center; gap:8px; padding-block:6px; min-height:44px; }
  /* 導覽列依 PM 指定只放盾牌、不放字標；30px 時左側份量壓不住右側的登入膠囊，放大一階 */
  .logo-badge{
    width:38px; height:auto; display:block;
  }
  .logo-badge.lg{ width:56px; }
  .nav-links{ display:flex; gap:30px; font-size:var(--text-sm); font-weight:500; color:var(--ink-soft);}
  .nav-links a{ position:relative; padding:12px 4px; transition:color var(--dur) ease; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
    background:var(--brand-blue); transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur) ease;
  }
  .nav-links a:hover::after{ transform:scaleX(1); }
  /* 目前捲到的區段：底線常駐、字色升為 --ink。class 由 Index.cshtml 的 IntersectionObserver 切換 */
  .nav-links a.is-current{ color:var(--ink); }
  .nav-links a.is-current::after{ transform:scaleX(1); }
  .nav-actions{ display:flex; align-items:center; gap:12px; }
  /* 已登入的手機標頭：390px 放不下字標＋兩顆膠囊＋頭像，會折成兩列。
     600px 以下膠囊收進頭像選單，標頭維持一列；選單裡那兩項只在這個寬度出現 */
  .nav-mobile-only{ display:none; }
  @media (max-width: 600px){
    .nav-desktop-only{ display:none; }
    .nav-mobile-only{ display:block; }
  }
  .nav-toggle{ display:none; }
  /* 錨點跳轉時避開 sticky 導覽列 */
  section[id]{ scroll-margin-top:116px; }

  /* ---------- Hero ---------- */
  /* 綠色在本頁只代表「正在進行中」，不做裝飾，故主視覺底不再鋪綠色光暈 */
  .hero{
    padding:56px 0 60px;
    /* 防偽紋（guilloche）：取自證書與鈔票的 engine-turned 紋樣，是主題本身的視覺語彙
       而非外加裝飾——認證平台的頁面本來就該有這種質地。
       真正的 guilloche 不是單組同心圓，而是兩組以上圓心錯開的環互相干涉出的玫瑰紋；
       故用兩組 repeating-radial-gradient，圓心分別偏左右 8%，中央自然生出梭形交疊。
       第一層用底色由內往外遮，讓紋路只存在於主視覺中段並自然淡出；不用 mask-image
       是因為它需要 -webkit- 前綴，且不支援的瀏覽器會整片露出紋路。
       環寬 1.2px、週期 13px：1px/9px 在 1 倍解析度會產生會抖動的摩爾紋。
       環的透明度 .06、遮罩自 18% 起淡出：紋樣是底紋不是圖案，原本 .12 在 2 倍解析度的手機上
       兩組環的交疊處會浮出一圈圈可辨識的波紋，視線被它抓走而不是落在入口卡上 */
    background:
      radial-gradient(760px 620px at 50% 42%, rgba(245,248,251,0) 18%, var(--bg) 72%),
      repeating-radial-gradient(circle at 42% 42%, rgba(22,80,161,.06) 0 1.2px, rgba(22,80,161,0) 1.2px 13px),
      repeating-radial-gradient(circle at 58% 42%, rgba(22,80,161,.06) 0 1.2px, rgba(22,80,161,0) 1.2px 13px),
      radial-gradient(900px 560px at 50% -10%, rgba(22,80,161,0.08), transparent 70%);
    border-bottom:1px solid var(--rule);
  }
  .hero-grid{
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:48px; align-items:start;
  }
  .hero-logo-img{ height:46px; width:auto; }
  /* 主視覺的視覺重心是下方的認證碼入口卡，標題不與之爭大小 */
  .hero-title{
    margin-top:22px; font-size:clamp(24px,2.7vw,32px); font-weight:800;
    letter-spacing:-.02em; line-height:1.3; color:var(--ink);
  }
  /* 看考場與查驗證書：兩條與「進考場」並列的路。用細線分隔的兩段文字，不做成卡片或按鈕塊，
     份量才不會與上方的認證碼入口卡相抗。全頁唯一的脈動指示點在這裡的即時場次上 */
  .hero-paths{
    display:flex; align-items:center; flex-wrap:wrap; gap:0 36px;
    margin-top:14px;
  }
  .hero-path{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 4px; min-height:44px;
    background:none; border:none; cursor:pointer; font-family:inherit;
    font-size:var(--text-sm); font-weight:600; color:var(--brand-blue);
  }
  a.hero-path:hover, button.hero-path:hover{ color:var(--brand-blue-dark); text-decoration:underline; }
  a.hero-path:active, button.hero-path:active{ transform:translateY(1px); }
  /* 沒有進行中場次時不是連結，降為敘述 */
  .hero-path--static{ color:var(--muted); cursor:default; }
  /* 「今天有 N 場」是狀態不是動作：降為次要字色，仍可點去看考場，指到才回藍色。
     帶 .hero-paths 才壓得過 .psc-home a{color:inherit}（0,1,1） */
  .hero-paths .hero-path--status{ color:var(--muted); }
  .hero-paths a.hero-path--status:hover{ color:var(--brand-blue); }
  /* 768px 以下查驗入口已在導覽列與底部列各出現一次，主視覺不再重複第三次 */
  @media (max-width: 767px){
    .hero-path--verify{ display:none; }
  }
  /* 兩段之間的分隔線畫在後一段上；只有一段時不出現 */
  .hero-paths > *:not(:first-child){ position:relative; }
  .hero-paths > *:not(:first-child)::before{
    content:""; position:absolute; left:-18px; top:50%; margin-top:-8px;
    width:1px; height:16px; background:var(--line);
  }
  /* 換行後兩段上下排，此時垂直分隔線會落在錯的位置 */
  @media (max-width: 430px){
    .hero-paths{ flex-direction:column; gap:0; }
    .hero-paths > *:not(:first-child)::before{ content:none; }
  }
  .live-dot{
    width:11px; height:11px; border-radius:50%; background:var(--brand-green);
    box-shadow:0 0 0 4px rgba(46,169,66,0.16); flex:none;
  }
  /* 「進行中」是會變動的即時狀態，脈動讓它有別於靜態色塊；
     prefers-reduced-motion 由 _LayoutHome.cshtml 的全域規則關閉。
     用虛擬元素的 transform/opacity 而非 box-shadow：後者無法只在合成層處理，會每幀重繪 */
  .hero-path .live-dot{ position:relative; }
  .hero-path .live-dot::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--brand-green); animation:live-pulse 2.6s ease-out infinite;
  }
  @keyframes live-pulse{
    0%{ transform:scale(1); opacity:.45; }
    70%,100%{ transform:scale(2.6); opacity:0; }
  }

  /* 認證碼入口卡：進考場是本頁最高頻的動作，整頁只有這裡用實體卡片與浮起陰影。
     卡面帶一層極淡的同款防偽紋，像證書本身的底紋，讓這張卡不只是個白色圓角方塊；
     圓心落在卡片下緣外，紋路由下往上淡出，不會經過認證碼欄位與標籤 */
  .hero-entry{
    position:relative; overflow:hidden;
    margin-top:26px; max-width:560px;
    background:
      repeating-radial-gradient(circle at 50% 118%, rgba(22,80,161,.05) 0 1.2px, rgba(22,80,161,0) 1.2px 13px),
      var(--surface);
    border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lift);
    padding:26px 26px 6px;
  }

  .hero-code{ max-width:none; }
  .hero-code-label{ display:block; font-size:var(--text-xs); font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
  /* 不可加 flex-wrap:wrap：輸入框是 width:100%，一旦允許換行按鈕就會被擠到第二列。
     窄畫面改為直向排列的規則寫在 max-width:600px 的段落 */
  .hero-code-row{ display:flex; gap:12px; }
  /* ── 認證碼欄：5 個字元格 ──────────────────────────────────────────────
     這頁的儀式是「監評老師給一組 5 碼，考生輸入後進考場」，所以欄位本身就做成
     5 個格位，未輸入時也看得出要填幾碼。
     實作上維持單一 <input>（v-model / maxlength / submit 全部不動），格線用背景
     漸層畫，再用 letter-spacing 讓每個字剛好落在格子中央：
       JetBrains Mono 字寬 = 0.6em = 15.6px（字級 26px）
       格寬 46 + 間距 12 = 間距週期 58 → letter-spacing = 58 - 15.6 = 42.4px
       首字置中 → padding-left = (46 - 15.6) / 2 = 15.2px
     格寬遠大於字寬，即使 JetBrains Mono 載入失敗、退回其他等寬字（字寬 0.55em），
     累積偏移也只有數 px，字仍落在格內。 */
  .hero-code-input{
    flex:1 1 auto; width:100%; min-width:0; border-radius:var(--radius-md);
    padding:18px 20px 18px 15.2px;
    border:1px solid var(--line); background-color:var(--bg); color:var(--ink);
    font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:600;
    letter-spacing:42.4px; text-align:left; text-transform:uppercase;
    background-image:none;
    background-repeat:no-repeat;
    background-size:278px 2px;
    background-position:left bottom 13px;
    transition:border-color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease;
  }
  /* 格線只在聚焦或已有輸入時出現；閒置時維持乾淨的提示文字，兩者不會疊在一起 */
  .hero-code-input:focus,
  .hero-code-input:not(:placeholder-shown){
    background-image:repeating-linear-gradient(90deg, var(--line) 0 46px, transparent 46px 58px);
  }
  .hero-code-input:focus::placeholder{ color:transparent; }
  /* 5 碼填滿的那一刻：格線由灰轉品牌藍。整頁唯一的「儀式節拍」——
     在此之前打完最後一個字什麼事都不會發生。
     判斷靠 input 的 pattern（見 Index.cshtml 的 novalidate 註解），不需要 JS。 */
  .hero-code-input:not(:placeholder-shown):valid{
    background-image:repeating-linear-gradient(90deg, var(--brand-blue) 0 46px, transparent 46px 58px);
  }
  /* 原 #9AA6BC 對輸入框底色僅 2.4:1，未達 WCAG AA 4.5；改用同色系較暗階（4.7） */
  .hero-code-input::placeholder{
    font-family:inherit; letter-spacing:0; text-transform:none;
    color:var(--placeholder); font-size:var(--text-sm); font-weight:400;
  }
  /* 必須用 background-color 而非 background 簡寫：簡寫會把上面設定的格線
     background-image 一併重設為 none，格線就不會出現 */
  .hero-code-input:focus{
    border-color:var(--brand-blue); background-color:var(--surface);
    box-shadow:0 0 0 4px rgba(22,80,161,0.10);
  }
  /* 入口卡內的按鈕與輸入框共用同一組圓角，兩者才讀得出是同一個動作；
     並取消 .psc-btn 的 hover 位移，卡片內的元素跳動會讓整張卡顯得不穩 */
  .hero-code-row .psc-btn{
    flex:none; padding:16px 30px; font-size:var(--text-lg); border-radius:var(--radius-md);
  }
  .hero-code-row .psc-btn:hover{ transform:none; }

  /* 右欄不再做成卡片：它的面積是左欄入口卡的 1.67 倍，做成卡片會反過來成為視覺重心。
     降為「印在頁面上的清單」，與「漂在頁面上的入口卡」分屬不同層級，就不會互相競爭 */
  /* 場次時間用等寬字，多筆並排時數字位數才會對齊（中文走 fallback，見 home-fonts.css 的 unicode-range） */

  /* ---------- 平台即時數據（頁面底部） ---------- */
  /* 原為 --ink 實心圓角色塊，但頁尾同樣是 --ink 且只隔 84px，兩塊會糊成一片；
     加上 CTA 也是深色，整個頁面下緣連續三個深色區。改為淺色後節奏變成 深→淺→深。
     平台數據是「資訊」不是「主張」，用分隔線界定即可，不需要實心色塊。 */
  /* 六格等權、數字在上標籤在下。原本「證書數放大、其餘五項縮成一行小字擠在右側」，
     一大五小在同一條基線上讀起來是失衡而不是階層；六個數都是同一類的計數，
     等權排開反而一眼掃得完。證書數仍排第一格（順序由 JS 決定）。
     貼近頁尾：數據與頁尾同屬「頁面底部的參考資訊」，本來就該讀成一組 */
  .stats-band{
    padding:32px 32px 28px; border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px 24px;
  }
  .stats-item{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  /* 數字已由 .num 指定等寬字，此處不再設 font-family，否則會因特異性較高而蓋過 .num */
  .stats-item b{
    font-size:clamp(26px,2.4vw,34px); font-weight:700;
    color:var(--ink); letter-spacing:-.03em; line-height:1;
  }
  .stats-item span{ font-size:var(--text-xs); color:var(--muted); font-weight:600; }


  /* ---------- Marquee ---------- */
  .marquee-band{
    background:var(--bg); color:var(--ink-soft); padding:14px 0; overflow:hidden;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    margin-top:48px;
  }
  .marquee-track{
    display:flex; gap:48px; white-space:nowrap; width:max-content;
    animation:scroll-left 32s linear infinite;
    font-size:14px; font-weight:500; color:var(--ink-soft);
  }
  .marquee-track span{ opacity:.9; }
  .marquee-track b{ color:var(--brand-blue-dark); font-weight:700; }
  @keyframes scroll-left{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ---------- Section headers ---------- */
  /* 區段間距一律 128px（64+64）：主視覺的下內距同為 64，主視覺→考場、考場→介紹
     兩個落差才會等距；原本 76 讓後者比前者多出 60px，節奏在第二段就亂了 */
  .section-pad{ padding:64px 0; }
  .sec-head{ max-width:620px; margin-bottom:40px; }
  /* 上限必須低於主視覺 h1 的 32px，否則區段標題會比頁面主標還大，階層是反的 */
  .sec-head h2{
    font-weight:800; font-size:clamp(23px,2.3vw,28px); line-height:1.3; letter-spacing:-.02em;
  }
  .sec-head p{ margin-top:10px; color:var(--muted); font-size:var(--text-md); }

  /* ---------- 今日考場 ---------- */
  /* 手機直向堆疊，600px 以上改格狀（見下方 @media）。原本手機橫向捲動：內容藏在畫面外，
     還得靠一行「橫向滑動查看考場」提醒——需要說明的互動就是不夠自明 */
  .exam-scroll{ display:flex; flex-direction:column; gap:12px; }
  .exam-card{
    position:relative;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:20px;
    display:flex; flex-direction:column; gap:14px;
    transition:border-color var(--dur) ease, box-shadow var(--dur) ease;
  }
  /* 卡片一律靠框線界定、不浮起也不做整卡 hover：卡片本身不可點（動作只有底部按鈕），
     hover 浮起會暗示整卡可點；全部套同一組陰影也會讓整頁變成一片沒有層級的卡片牆 */
  /* 科目封面只有部分科目有，留在文件流裡會把有圖那張卡的標題往下推，
     整排卡片的標題就落在不同高度。改為絕對定位到右上角，標題一律齊頭 */
  .exam-card > .map-badge-img{
    position:absolute; top:18px; right:18px;
    width:32px; height:32px; margin:0;
  }
  .exam-card > .map-badge-img + .exam-card__id{ padding-right:44px; }
  .exam-card .cat-pill{ align-self:flex-start; }

  /* 第一層 認證小標＋科目標題。不撐固定高度：同排卡片高度差全部收在動作列上方
     （.go 的 margin-top:auto），那裡的留白讀起來是「內容結束」而不是「缺了東西」 */
  .exam-card__cert{
    display:flex; align-items:center; gap:6px;
    font-size:var(--text-2xs); font-weight:600; color:var(--muted);
  }
  .exam-card__subject{ margin-top:4px; font-size:var(--text-lg); font-weight:700; line-height:1.4; color:var(--ink); }
  /* 認證色點：月曆長條、考場卡、當日面板三處同色，.cat-* 的 color 就是該認證的深色 */
  .cat-dot{ flex:none; width:8px; height:8px; border-radius:50%; }
  .exam-card__cert .cat-dot, .exam-day-row__cert .cat-dot{ background:var(--dot, currentColor); }
  .exam-day-row__cert .cat-dot{ display:inline-block; margin-right:6px; vertical-align:1px; }

  /* 第二層 可應考期間：一行「起 – 訖 · 時長」，不再框成卡中卡 */
  .exam-card__when{ font-size:var(--text-xs); font-weight:600; color:var(--ink); line-height:1.7; }
  .exam-card__sep{ margin:0 4px; color:var(--placeholder); }
  /* 時長與「分鐘」綁在一起換行，不讓「分鐘」孤兒獨佔一行 */
  .exam-card__dur{ white-space:nowrap; }

  /* 第三層 在哪裡、找誰：考試單位是可掃讀的名稱，聯絡方式是備援資訊，兩者不同階 */
  .exam-card__org p{ font-size:var(--text-xs); color:var(--ink-soft); font-weight:600; }
  .exam-card__org p b{ color:var(--muted); font-weight:400; }
  .exam-card__contact{
    margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 12px;
    font-size:var(--text-2xs); color:var(--muted);
  }
  .exam-card__contact li{ display:inline-flex; align-items:center; gap:5px; min-width:0; }
  /* 圖示尺寸不套 --text-* 階：那組代幣是給文字用的，最小階 12px 會讓圖示比旁邊的數字還大 */
  .exam-card__contact i{ font-size:10px; color:var(--placeholder); flex:none; }

  /* 第四層 動作：卡片僅 252px 寬，監評老師（頭像+標籤+姓名）與按鈕排同一列只差 1px，
     視覺上就是撞在一起。改直向堆疊，兩者各自有完整寬度 */
  .exam-card .go{
    margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:10px;
    font-weight:700; font-size:var(--text-xs); color:var(--ink);
    padding-top:14px; border-top:1px solid var(--rule);
  }
  .exam-card .go .exam-proctor{ align-self:stretch; min-width:0; }
  .exam-card .go .go-btn{
    background:var(--brand-blue); color:#fff !important; padding:12px 14px;
    border:none; cursor:pointer; font-family:inherit; position:relative;
    width:100%; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm); font-weight:700; font-size:var(--text-xs); transition:background-color var(--dur) ease;
  }
  .exam-card .go .go-btn:hover{ background:var(--brand-blue-dark); }
  .exam-card .go .go-btn:active{ background:var(--brand-blue-dark); transform:translateY(1px); }
  /* 認證色票：18 張認證、12 個色相（間隔 ≥ 30°），6 張與同族共用色相但深一階（底 L83、字更深）。
     同一天最常同時出現的 WIA（青 190°）／CQ（洋紅 310°）／AIA（橘 30°）拉到色環上相距 ≥ 120°。
     淡底 L90、文字對淡底 ≥ 4.6:1（11px 粗體的長條標籤要達 AA）；--dot 是色點專用的亮色版本，
     小圓點看不出深色的色相，對白底 ≥ 3:1。
     值由 scratchpad 的 palette_apply.py 依色相算出，改色相請改那支再重生，不要手調 hex */
  .cat-ec{ background:#FBD0D0; color:#9C1C1C; --dot:#D31717; }
  .cat-aia{ background:#FBE6D0; color:#93571A; --dot:#D37517; }
  .cat-cca{ background:#FBFBD0; color:#717114; --dot:#939310; }
  .cat-bap{ background:#F3F3B4; color:#686812; --dot:#939310; }
  .cat-esg{ background:#E4FBD0; color:#447915; --dot:#57A512; }
  .cat-sdgs{ background:#D2F3B4; color:#3F7114; --dot:#57A512; }
  .cat-hsm{ background:#D0FBD3; color:#15791E; --dot:#12A51F; }
  .cat-uca{ background:#B4F3BA; color:#14711C; --dot:#12A51F; }
  .cat-gtc{ background:#D0FBEB; color:#157955; --dot:#12A56F; }
  .cat-wia{ background:#D0F4FB; color:#177082; --dot:#149CB8; }
  .cat-sec{ background:#D0DDFB; color:#1C429C; --dot:#1750D3; }
  .cat-ict{ background:#D7D0FB; color:#311C9C; --dot:#3717D3; }
  .cat-ictp{ background:#BFB4F3; color:#291782; --dot:#2D13AE; }
  .cat-ail{ background:#EDD0FB; color:#711C9C; --dot:#9517D3; }
  .cat-aie{ background:#DEB4F3; color:#5E1782; --dot:#7B13AE; }
  .cat-cq{ background:#FBD0F4; color:#9C1C87; --dot:#D317B4; }
  .cat-mct{ background:#F3B4E8; color:#821770; --dot:#AE1395; }
  .cat-dmd{ background:#FBD0DE; color:#9C1C46; --dot:#D31756; }
  /* 未列在色票內的認證（含測試資料）退到中性灰 */
  .cat-niche{ background:#EFEFEA; color:#5C6B85; --dot:#5C6B85; }

  /* ---------- 認證考場：檢視切換與月曆 ---------- */
  .sec-head-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap; margin-bottom:40px;
  }
  .sec-head-row .sec-head{ margin-bottom:0; }
  .view-switch{
    display:inline-flex; padding:4px;
    background:var(--surface); border:1px solid var(--line); border-radius:999px;
  }
  .view-switch button{
    border:none; background:none; cursor:pointer; font-family:inherit;
    font-size:var(--text-xs); font-weight:700; color:var(--muted);
    padding:8px 18px; min-height:44px; border-radius:999px;
    transition:background-color var(--dur) ease, color var(--dur) ease;
  }
  .view-switch button:hover{ color:var(--ink); }
  .view-switch button.is-on{ background:var(--brand-blue); color:#fff; }
  .view-switch button:active{ transform:translateY(1px); }

  /* 月份導覽放在月曆卡頂端、置中，月份與其下方的星期列讀成同一個表頭。
     「本月」用絕對定位釘在右側，不參與置中計算：它只在離開本月時出現，
     若跟著排進 flex，按下「下個月」的同一瞬間三件組會被推著往左跳一次 */
  .month-nav{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; }
  /* 只有左右箭頭是圓鈕；.month-today 是文字鈕，不能吃這個固定寬度 */
  .month-nav button:not(.month-today){
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    border:1px solid var(--line); background:var(--surface); color:var(--brand-blue);
    display:flex; align-items:center; justify-content:center; font-size:var(--text-2xs);
    transition:background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
  }
  .month-nav button:not(.month-today):hover{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
  .month-nav button:not(.month-today):active{ transform:translateY(1px); }
  .month-label{ min-width:112px; text-align:center; font-weight:700; font-size:var(--text-md); }
  /* 相鄰月份沒場次的箭頭：visibility 保留佔位，月份標籤不跳位；也自然離開 Tab 順序與輔助技術樹 */
  .month-nav .is-hidden{ visibility:hidden; }
  /* 本月認證圖例：一列色點＋全名，放在月份與星期列之間 */
  .exam-cal-legend{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
    margin:0 0 14px; font-size:var(--text-2xs); font-weight:600; color:var(--ink-soft);
  }
  .exam-cal-legend li{ display:inline-flex; align-items:center; gap:6px; }
  .exam-cal-legend .cat-dot{ background:var(--dot, currentColor); }
  /* 全名與代號兩個版本都在樣板裡，依寬度擇一顯示（手機版見下方 600px 區塊） */
  .exam-cal-legend__code{ display:none; }
  /* 回到本月：只在離開本月時出現，平時不佔位；用文字鈕與左右兩顆圓形箭頭區隔 */
  .month-today{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    padding:0 16px; height:40px; white-space:nowrap; border-radius:999px; cursor:pointer;
    border:1px solid var(--line); background:var(--surface); color:var(--brand-blue);
    font-family:inherit; font-size:var(--text-xs); font-weight:700;
    transition:background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
  }
  .month-today:hover{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
  .month-today:active{ transform:translateY(-50%) translateY(1px); }

  .exam-cal{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:20px; box-shadow:var(--shadow-card);
  }
  .exam-cal-week, .exam-cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
  .exam-cal-week{ margin-bottom:10px; }
  .exam-cal-week span{ text-align:center; font-size:var(--text-2xs); font-weight:700; color:var(--muted); }
  /* 格線由底色從 1px 縫隙透出，不給每一格自己的外框：42 個獨立方框會讓整塊變成卡片牆，
     與同一區塊下方的考場卡搶同一種視覺份量 */
  .exam-cal-grid{
    gap:1px; background:var(--rule); border:1px solid var(--rule);
    border-radius:var(--radius-sm); overflow:hidden;
  }
  /* 格高隨本月用到的軌道數長：46px（內距 8 + 日期 24 + 底部「+N」一行 14）+ 每軌 18px，
     --lanes 由 Index.cshtml 的 calLaneCount 設在 .exam-cal-grid 上（1～5） */
  .exam-cal-day{
    min-height:calc(46px + var(--lanes, 3) * 18px); padding:8px; border:0; background:var(--surface);
    display:flex; flex-direction:column; align-items:flex-start;
    font-family:inherit; font-size:var(--text-2xs); color:var(--ink);
    cursor:pointer; transition:background-color var(--dur) ease, box-shadow var(--dur) ease;
  }
  .exam-cal-day[aria-disabled="true"]{ cursor:default; }
  /* 格與格之間只有 1px 縫，全域 :focus-visible 的 outline-offset:2px 會被相鄰格子蓋住、
     也被 .exam-cal-grid 的 overflow:hidden 裁掉，鍵盤使用者看不出焦點停在哪一格。
     改畫在格內，圓角歸零貼合方形格子。
     選擇器要帶 .psc-home：Index.cshtml 有一條 .psc-home button:focus-visible 權重更高 */
  .psc-home .exam-cal-day:focus-visible{ outline:none; border-radius:0; }
  /* hover／選取／焦點三種狀態都是框線、都畫在 ::after（z-index:2）壓在長條上方：
     長條疊在按鈕之上（z-index:1），畫在按鈕上的框會被長條切成好幾段，鋪整格底色則會讓
     長條像浮在一塊色板上。三者同一種語言，只差深淺與粗細；按鈕本身不設 z-index，
     才不會連同底色一起蓋掉長條。
     帶 :hover 的選擇器權重較高，選取與焦點規則各補一條 :hover 版本才壓得過 hover 的淡框 */
  .exam-cal-day{ position:relative; }
  .exam-cal-day[aria-disabled="false"]:hover::after,
  .exam-cal-day.is-on::after, .exam-cal-day.is-on:hover::after,
  .exam-cal-day:focus-visible::after, .exam-cal-day:focus-visible:hover::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  }
  .exam-cal-day[aria-disabled="false"]:hover::after{ box-shadow:inset 0 0 0 2px rgba(22,80,161,0.35); }
  .exam-cal-day[aria-disabled="false"]:active::after{ box-shadow:inset 0 0 0 2px rgba(22,80,161,0.6); }
  .exam-cal-day.is-on::after, .exam-cal-day.is-on:hover::after{ box-shadow:inset 0 0 0 2px var(--brand-blue); }
  .exam-cal-day:focus-visible::after, .exam-cal-day:focus-visible:hover::after{ box-shadow:inset 0 0 0 3px var(--brand-blue); }
  /* 有場次的日期不另鋪底色：桌機的長條、手機的圓點已經說了這件事，再鋪一層淡藍只會把
     長條的顏色弄髒。可點與否由 aria-disabled 與 hover 回饋表達 */
  /* 非當月用透明度整體退後，不必為它再寫一組灰值 */
  .exam-cal-day.is-out{ opacity:.4; }
  .exam-cal-num{ font-weight:700; font-size:var(--text-xs); color:var(--ink-soft); }
  /* 今日是整塊月曆唯一的品牌色實心，掃一眼就定得出位置 */
  .exam-cal-day.is-today .exam-cal-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    background:var(--brand-blue); color:#fff;
  }
  /* 跨格長條：疊在日期按鈕上、不接事件（點擊落到底下那一天）。顏色來自 .cat-* 色票，
     淡底深字，與格子的淡藍底（有場次）仍分得開。同一列的多條長條靠 margin-top 分軌道 */
  .exam-cal-bar{
    align-self:start; z-index:1; pointer-events:none;
    height:16px; margin:0 3px; padding:0 6px; border-radius:4px;
    font-size:12px; font-weight:700; line-height:16px; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* 被擠出軌道上限的場次在格子底部計數 */
  .exam-cal-hidden{ margin-top:auto; font-size:12px; font-weight:600; color:var(--muted); }
  /* 圓點只給手機（見下方 600px 區塊），桌機由長條承擔 */
  .exam-cal-certs{ display:none; }
  .exam-cal-empty{
    padding:48px 16px; text-align:center;
    font-size:var(--text-sm); color:var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }

  /* 換月：新的一塊格子進場時滑入。位移 14px，落在 .exam-cal 的 20px 內距之內不會溢出卡片 */
  .exam-cal-grid.cal-next{ animation:cal-in-next .16s ease-out; }
  .exam-cal-grid.cal-prev{ animation:cal-in-prev .16s ease-out; }
  @keyframes cal-in-next{ from{ opacity:0; transform:translateX(14px); } }
  @keyframes cal-in-prev{ from{ opacity:0; transform:translateX(-14px); } }
  /* 列表／月曆切換：新檢視淡入。只做進場不做離場——離場要等 transitionend，
     分頁不在前景時可能永遠等不到，新檢視就出不來 */
  .exam-scroll, .exam-cal{ animation:view-in .16s ease-out; }
  @keyframes view-in{ from{ opacity:0; transform:translateY(4px); } }

  /* 當日場次面板：接在月曆格子下方、同一張卡內，用一條細線與月曆區隔 */
  .exam-day-panel{
    margin-top:20px; border-top:1px solid var(--rule);
    animation:day-panel-in .16s ease-out;
  }
  @keyframes day-panel-in{ from{ opacity:0; transform:translateY(-4px); } }
  /* 兩組進場動畫的關閉規則收在一起，且必須排在兩者的 animation 宣告之後——
     同權重下後者才贏，寫在前面會被下方的 .exam-day-panel 宣告蓋回去 */
  @media (prefers-reduced-motion: reduce){
    .exam-cal-grid.cal-next, .exam-cal-grid.cal-prev,
    .exam-scroll, .exam-cal,
    .exam-day-panel{ animation:none; }
    .psc-btn:active, .exam-card .go .go-btn:active, .view-switch button:active,
    .month-nav button:active, .month-today:active,
    a.hero-path:active, button.hero-path:active{ transform:none; }
  }
  .exam-day-panel__head{ padding:18px 4px 6px; }
  .exam-day-panel__title{ font-size:var(--text-lg); font-weight:800; color:var(--ink); }
  .exam-day-panel__sub{ margin-top:2px; font-size:var(--text-xs); color:var(--muted); }
  .exam-day-panel__sub b{ color:var(--brand-blue); font-weight:700; }

  /* 寬螢幕改雙欄：月曆左、當日清單右。單欄時月曆寬 1116px 而清單的文字只佔左側三分之一，
     動作鈕被推到很遠的右邊，且要捲動才同時看得到月曆與當天。
     沒有選定日期（整月無場次）時 :has() 讓月曆收回單欄，右邊不會留一塊空白；
     不支援 :has() 的瀏覽器整條規則失效，退回單欄上下堆疊，功能不受影響 */
  @media (min-width: 1024px){
    .exam-cal:has(.exam-day-panel){
      display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
      column-gap:24px; align-items:stretch;
    }
    /* 右欄的高度就是月曆的高度：內容用絕對定位抽離文件流，欄高完全由左邊的月曆決定，
       清單超出的部分在欄內捲動。原本用 max-height:min(56vh,560px) 限高，
       在 900px 高的視窗會比月曆矮一截——欄底下留白、清單卻已經在捲，兩邊都不對 */
    .exam-day-panel{
      position:relative; margin-top:0; padding:0;
      border-top:none; border-left:1px solid var(--rule);
    }
    .exam-day-panel__inner{
      position:absolute; inset:0 0 0 24px;
      display:flex; flex-direction:column;
    }
    .exam-day-panel__inner .exam-day-list{ flex:1 1 auto; min-height:0; overflow-y:auto; }
    /* 限高後清單會切在某一列中間，看起來像被裁掉而不是可以捲。底部壓一層漸層做為提示；
       捲到底時是白到白，疊在最後一列的下緣留白上，看不出來 */
    .exam-day-panel::after{
      content:""; position:absolute; left:24px; right:0; bottom:0; height:36px;
      background:linear-gradient(rgba(255,255,255,0), var(--surface));
      pointer-events:none;
    }
    .exam-day-panel__head{ padding:0 0 6px; }
    /* 按鈕留在列的右側。改成上下排雖然讓科目名稱寬一點，但按鈕會落在左下角、
       右側三分之二全空，一列看起來是散的；名稱本來就允許換行，寬度不是問題 */
    .exam-cal .exam-day-row{ padding:14px 0; gap:12px; }
  }
  /* 一列一場次。列與列之間只用一條分隔線，不用卡片：卡片的邊框與圓角在這裡只會
     讓六個場次變成六個需要個別辨識的物件，而使用者在這個畫面做的是「挑一個」 */
  .exam-day-row{
    display:flex; align-items:center; gap:16px;
    padding:14px 4px; border-bottom:1px solid var(--rule);
  }
  /* 列本身不可點（動作只有右側按鈕），不做整列 hover 反白：反白會暗示整列可點，
     而且只包住文字、與面板邊緣對不齊，看起來像貼歪的色塊 */
  .exam-day-row:last-child{ border-bottom:none; }
  .exam-day-row__main{ flex:1; min-width:0; }
  .exam-day-row__cert{ font-size:var(--text-2xs); color:var(--muted); font-weight:600; }
  .exam-day-row__subject{
    margin-top:2px; font-size:var(--text-md); font-weight:700; color:var(--ink); line-height:1.4;
  }
  .exam-day-row__meta{
    margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px;
    font-size:var(--text-2xs); color:var(--muted);
  }
  /* 開放區間（月/日）：這一列在月曆旁邊，年份由月曆給，只留月日才不會把 meta 擠成三行 */
  .exam-day-row__range{ color:var(--ink-soft); font-weight:600; }
  .exam-day-row .t{ font-family:'JetBrains Mono', monospace; white-space:nowrap; }
  .exam-day-row .psc-btn{ flex:none; }

  @media (max-width: 600px){
    /* 76px 的區塊間距在 390px 下會讓相鄰兩段之間出現半屏空白 */
    .section-pad{ padding:48px 0; }
    /* 標題與檢視切換排同一列時，標題只剩不到一半寬度，且會與副標重疊；讓切換整列換行 */
    .sec-head-row{ gap:16px; margin-bottom:24px; }
    .sec-head-row .sec-head{ flex:1 1 100%; }
    /* 窄畫面沒有右側餘裕可以釘「本月」。排進同一列會把三件組推歪（實測月份標籤跳 37px），
       而 flex 的 flex-basis:100% 換行又會把它拉成滿版膠囊。改用 grid：三件組固定在第一列，
       「本月」自己佔第二列並以內容寬置中；它不存在時 grid 只有一列，版面不變 */
    .month-nav{ display:grid; grid-template-columns:auto auto auto; justify-content:center; gap:10px 8px; }
    .month-nav > *:nth-child(1){ grid-area:1 / 1; }
    .month-nav > *:nth-child(2){ grid-area:1 / 2; }
    .month-nav > *:nth-child(3){ grid-area:1 / 3; }
    .month-nav button:not(.month-today){ width:44px; height:44px; }
    .month-today{
      position:static; transform:none; height:44px;
      grid-area:2 / 1 / 3 / -1; justify-self:center;
    }
    .month-today:active{ transform:translateY(1px); }
    .exam-cal{ padding:12px; }
    /* 48px：日期一行 + 圓點一行剛好；六週的月份 288px，點了日期之後當日面板的第一列
       不必捲動就在畫面內。56px 時六週要 336px，面板會整個落到摺線下 */
    .exam-cal-day{ min-height:48px; padding:5px 4px; }
    /* 手機格寬只剩約 44px，放不下長條，退回圓點：一場一顆、顏色依認證（.cat-* 的 --dot）。
       max-width 24px 讓每列剛好三顆、超過自動換到第二列，48px 的格高放得下兩列；
       認證名稱與精確場次數改由 aria-label 與點下去的當日面板負責 */
    .exam-cal-certs{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; max-width:24px; }
    .exam-cal-cert{ width:6px; height:6px; border-radius:50%; background:var(--dot, currentColor); }
    .exam-cal-bar, .exam-cal-hidden{ display:none; }
    .exam-cal-empty{ padding:36px 12px; }
    .exam-day-panel__head{ padding:16px 2px 4px; }
    /* 按鈕貼在列的右下角、與最後一行 meta 同一線，文字欄約 245px 可以自由換行；
       原本把按鈕擠到獨立一列是怕標題被擠窄，代價是每列多一整行高度、左側整段留白，划不來 */
    .exam-day-row{ align-items:flex-end; gap:12px; padding:14px 2px; }
    /* 圖例改印代號並全部攤開：全名一列只放得下兩個，直向堆疊會把月曆推到第二屏，
       橫向捲動則沒人會發現後面還有。代號一列可放五六個，十八張也只要三列 */
    .exam-cal-legend{ gap:6px 14px; margin:0 0 12px; }
    .exam-cal-legend__name{ display:none; }
    .exam-cal-legend__code{ display:inline; letter-spacing:.02em; }
    /* 手機列表改「列」不改「卡」：四張 295px 的卡要捲 1200px 才看完四場，且每張各一顆實心主按鈕。
       改成與當日面板同款的列（小標→標題→meta→右下 tint 按鈕）收進一張白色面板，同一場次在兩個檢視長得一樣。
       .go 用 display:contents 讓監評與按鈕直接成為格線項目，不動樣板 */
    .exam-scroll{ gap:0; padding:0 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); }
    .exam-card{
      padding:14px 0; border:0; border-bottom:1px solid var(--rule); border-radius:0; background:transparent;
      display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:end;
      grid-template-areas:"id id" "when when" "org go" "proctor go";
    }
    .exam-card:last-child{ border-bottom:0; }
    .exam-card__id{ grid-area:id; }
    .exam-card__subject{ font-size:var(--text-md); }
    .exam-card__when{ grid-area:when; margin-top:6px; font-size:var(--text-2xs); color:var(--ink-soft); line-height:1.6; }
    .exam-card__org{ grid-area:org; }
    .exam-card__org p{ font-size:var(--text-2xs); color:var(--muted); }
    .exam-card .go{ display:contents; }
    .exam-card .go .exam-proctor{ grid-area:proctor; font-size:var(--text-2xs); font-weight:600; color:var(--muted); }
    .exam-card .go .exam-proctor img{ display:none; }
    .exam-card .go .go-btn{
      grid-area:go; justify-self:end; width:auto; min-height:44px; padding:10px 18px; border-radius:999px;
      background:rgba(22,80,161,0.10); color:var(--brand-blue) !important;
    }
    .exam-card .go .go-btn:hover{ background:var(--brand-blue); color:#fff !important; }
  }

  /* ---------- 勁園AI認證網 科目動態展示 ---------- */
  .subject-marquee{ overflow:hidden; padding:6px 0; }
  .subject-track{
    display:flex; gap:12px; width:max-content; white-space:nowrap;
  }
  .subject-track.left{ animation:scroll-left 46s linear infinite; }
  .subject-track.right{ animation:scroll-right 52s linear infinite; margin-top:14px; }
  @keyframes scroll-right{
    from{ transform:translateX(-50%); }
    to{ transform:translateX(0); }
  }
  .subject-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:11px 20px; border-radius:999px; border:1px solid var(--line);
    font-size:13px; font-weight:700; box-shadow:var(--shadow-card);
  }
  .subject-pill:hover{ border-color:var(--brand-blue); }

  /* ---------- 能力雷達分析 ---------- */
  .ability-grid{ display:flex; justify-content:center; }
  .rab-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; }
  .rab-col{ display:flex; flex-direction:column; }
  .rab-col .level-panel{ flex:1; }
  .rab-col .compare-card{ flex:1; display:flex; flex-direction:column; justify-content:center; }
  .ability-grid .compare-card{ max-width:560px; width:100%; }

  .compare-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft); padding:30px 20px 24px;
  }
  .compare-legend{ display:flex; gap:20px; justify-content:center; margin-top:6px; }
  .compare-legend .item{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted); }
  .compare-legend .swatch{ width:12px; height:12px; border-radius:3px; }

  /* ---------- 積分等級 ---------- */
  .level-panel{
    background:var(--ink); border-radius:32px; padding:52px 40px;
    color:#fff; position:relative; overflow:hidden;
  }
  .level-panel::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(500px 300px at 90% 0%, rgba(255,184,0,0.18), transparent 70%);
  }
  .level-panel-inner{ position:relative; z-index:1; }

  .level-tier-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px;
  }
  .level-tier{
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
    border-radius:18px; padding:22px 16px; text-align:center;
  }
  .level-tier.top{ border-color:rgba(255,184,0,0.5); background:linear-gradient(180deg, rgba(255,184,0,0.16), rgba(255,255,255,0.03)); }
  .level-tier .lv-num{ font-size:26px; color:var(--gold); font-weight:800; letter-spacing:.03em; }
  .level-tier .shields{ display:flex; justify-content:center; margin-bottom:10px; }
  .level-tier .lv-rule{ font-size:12px; color:#B9C4DC; margin-top:14px; line-height:1.6; }
  .level-tier .lv-rule b{ display:block; color:#fff; font-weight:700; }
  .level-tier .lv-rule .alt{ display:block; margin-top:5px; font-size:10.5px; color:#8896B5; font-weight:400; }

  .level-panel.compact{ padding:36px 32px; border-radius:26px; }
  .level-panel.compact .level-tier-grid{ margin-top:22px; gap:12px; }
  .level-panel.compact .level-tier{ padding:16px 12px; border-radius:14px; }
  .level-panel.compact .level-tier .lv-num{ font-size:21px; }
  .level-panel.compact .level-tier .shields svg{ width:32px; height:32px; }

  .badge-text-list{
    margin-top:32px; display:flex; flex-direction:column;
  }
  .badge-text-row{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding:15px 2px; border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .badge-text-row:last-child{ border-bottom:none; }
  .badge-text-name{ display:flex; align-items:baseline; gap:8px; }
  .badge-text-name b{ font-size:16px; font-weight:700; color:#fff; letter-spacing:.02em; }
  .badge-text-name span{ font-size:11px; letter-spacing:.06em; color:#8896B5; font-weight:600; }
  .badge-text-rule{ font-size:13px; color:#B9C4DC; white-space:nowrap; }
  .badge-text-rule b{ color:#fff; font-weight:700; }

  .points-formula{
    margin-top:28px; padding:16px 22px; border-radius:14px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
    display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
  }
  .points-formula .pf-label{
    font-weight:700; color:var(--gold);
    font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  }
  .points-formula .pf-formula{ font-weight:700; color:#fff; font-size:13.5px; }
  .points-formula .pf-examples{ font-family:'JetBrains Mono'; font-size:12px; color:#B9C4DC; }

  /* ---------- Mastery Index 公式（Hover 顯示） ---------- */
  .formula-trigger{ position:relative; display:inline-block; margin-top:24px; }
  .formula-trigger .ft-btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
    border-radius:999px; border:1px solid rgba(255,184,0,0.45);
    background:rgba(255,255,255,0.05); color:var(--gold);
    font-size:12.5px; font-weight:700; letter-spacing:.02em; cursor:help;
  }
  .formula-trigger .ft-btn .ft-ico{
    width:16px; height:16px; border-radius:50%; border:1.4px solid var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:none;
  }
  .formula-trigger .ft-tooltip{
    position:absolute; left:0; top:calc(100% + 12px); width:min(360px, 86vw);
    background:#0F1B33; border:1px solid rgba(255,255,255,0.14); border-radius:16px;
    padding:18px 20px; box-shadow:0 24px 50px -20px rgba(0,0,0,0.65);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:30;
  }
  .formula-trigger:hover .ft-tooltip,
  .formula-trigger:focus-within .ft-tooltip{ opacity:1; visibility:visible; transform:translateY(0); }
  .formula-trigger .ft-tooltip p{ font-size:12.5px; color:#B9C4DC; line-height:1.7; margin-bottom:8px; }
  .formula-trigger .ft-tooltip p:last-child{ margin-bottom:0; }
  .formula-trigger .ft-tooltip b{ color:#fff; font-weight:700; }
  .ft-badge-list{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .ft-badge-list span{
    font-size:11px; font-weight:700; color:#B9C4DC; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:3px 9px;
  }
  .formula-trigger .ft-tooltip .ft-formula{
    font-family:'JetBrains Mono'; font-size:12px; color:var(--gold); font-weight:700;
    margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,0.15); line-height:1.6;
  }

  /* ---------- 社群 ---------- */
  .community-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card); padding:28px 26px;
  }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .panel-head h3{ font-size:19px; }
  .panel-head .more{ font-size:13px; font-weight:700; color:var(--brand-blue); }

  .rank-row{
    display:flex; align-items:center; gap:14px; padding:12px 6px; border-radius:12px;
  }
  .rank-row:hover{ background:var(--bg); }
  .rank-row .rank-no{
    width:26px; text-align:center; font-weight:800; font-size:15px; color:var(--muted);
  }
  .rank-row.r1 .rank-no, .rank-row.r2 .rank-no, .rank-row.r3 .rank-no{ color:var(--gold); }
  .avatar{
    width:38px; height:38px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; color:#fff;
  }
  .rank-row .who{ flex:1; }
  .rank-row .who b{ display:block; font-size:14.5px; font-weight:700; }
  .rank-row .who span{ font-size:12px; color:var(--muted); }
  .rank-row .score{ font-family:'JetBrains Mono'; font-weight:700; font-size:14px; color:var(--ink); }
  .rank-row .achv-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:5px; }
  .achv-badge{ font-size:12.5px; font-weight:600; color:var(--muted); }
  .achv-badge b{ color:var(--ink); font-weight:700; }

  .feed-item{ display:flex; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); }
  .feed-item:last-child{ border-bottom:none; }
  .feed-item .dot-ico{
    width:34px; height:34px; border-radius:10px; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .feed-item p{ font-size:13.8px; color:var(--ink-soft); }
  .feed-item p b{ color:var(--ink); font-weight:700; }
  .feed-item time{ font-size:11.5px; color:var(--muted); display:block; margin-top:3px; }

  .testimonial-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;
  }
  .testimonial-card{
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:22px 20px;
  }
  .testimonial-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; }
  .testimonial-card .who{ margin-top:16px; display:flex; align-items:center; gap:10px; }
  .testimonial-card .who b{ font-size:13px; font-weight:700; display:block; }
  .testimonial-card .who span{ font-size:11.5px; color:var(--muted); }

  /* ---------- 認證介紹 ---------- */
  .map-grid{
    /* 列式目錄：1116px 排 4 欄、平板 2 欄、手機 1 欄。不用置中處理：整頁都對齊同一條左緣 */
    display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:12px;
  }
  /* 每張認證各自白底常駐（PM 要求），但做成橫向的列卡（LOGO 在左、名稱在右）而非直式圖示卡：
     高度只有 64px，十八張排起來是目錄不是卡牆，末列單獨一張讀起來也只是清單結尾。
     靜止只有一條細框，hover 才浮起 */
  .map-card{
    display:flex; align-items:center; gap:14px; min-height:64px;
    padding:10px 14px; text-align:left;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    transition:border-color var(--dur) ease, box-shadow var(--dur) ease;
  }
  a.map-card:hover{ border-color:var(--brand-blue); box-shadow:var(--shadow-card); }
  a.map-card:hover h4{ color:var(--brand-blue); }
  .map-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:10px;
    font-weight:800; font-size:11.5px; letter-spacing:-.02em;
    margin-bottom:8px;
  }
  /* keep-all 禁止在中文詞中間折行：連續中文瀏覽器只會在放不下的那個字硬折，會出現「多媒／體」。
     名稱整段放不下時才由 overflow-wrap 退回逐字折行 */
  .map-card h4{
    font-size:var(--text-xs); font-weight:600; line-height:1.45;
    word-break:keep-all; overflow-wrap:anywhere;
    color:var(--ink); transition:color var(--dur) ease;
  }
  .map-badge-img{ width:40px; height:40px; object-fit:contain; margin-bottom:8px; display:block; }
  /* 認證介紹的 LOGO：固定槽位、置中收納。原圖的透明留白已裁掉（原本 0–64% 不等，同一槽位裡
     有的 LOGO 看起來只有一半大），剩下的只有長寬比差異（0.9–3.0），寬的貼滿寬度、方的貼滿高度 */
  #map .map-badge-img{ flex:none; width:52px; height:36px; margin:0; object-fit:contain; object-position:center; }
  /* 尚未上傳 LOGO 時的佔位圖示：佔滿與 .map-badge-img 同一個槽位，
     否則同一列卡片的名稱起始高度會因為有沒有圖而參差 */
  #map .map-badge-fallback{
    flex:none; width:52px; height:36px; margin:0;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--muted); opacity:.45;
  }

  .map-group{ margin-bottom:36px; }
  .map-group:last-child{ margin-bottom:0; }
  .map-group-title{
    font-size:var(--text-md); font-weight:700; color:var(--ink); margin-bottom:16px;
    padding-bottom:10px; border-bottom:1px solid var(--line);
  }
  /* 原本連結高度只有 18px，低於 WCAG 2.2 的 24px 下限 */
  .map-group-title a{ color:var(--brand-blue); display:inline-block; padding-block:4px; }
  @media (pointer: coarse){ .map-group-title a{ padding-block:10px; } }
  .map-group-title a:hover{ text-decoration:underline; }

  /* ---------- Partners ---------- */
  .partner-row{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:10px;
  }
  .partner-chip{
    padding:12px 22px; border:1px solid var(--line); border-radius:999px;
    font-size:13.5px; font-weight:600; color:var(--muted); background:var(--surface);
  }

  /* ---------- CTA banner ---------- */
  /* 淡藍 tint 面而非實色藍塊：整頁的實心藍只留給主視覺的「開始測驗」，這裡是尾聲的邀請，不與它搶主次。
     左訊息、右動作的兩欄：訊息回到與全頁一致的左緣線，動作獨立成一個明確的落點。 */
  .cta-banner{
    background:rgba(22,80,161,0.07); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:48px; color:var(--ink);
    position:relative; overflow:hidden;
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:0 40px; text-align:left;
  }
  /* 三個子元素必須明確指定格線位置：交給 grid 自動配置會把副標排到右欄去，
     變成「標題｜副標」而不是「訊息｜動作」 */
  .cta-banner h2{
    grid-column:1; grid-row:1;
    font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.02em;
  }
  .cta-banner p{ grid-column:1; grid-row:2; margin-top:12px; color:var(--ink-soft); font-size:var(--text-md); }
  .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
  .cta-banner .hero-cta{
    grid-column:2; grid-row:1 / span 2; align-self:center;
    margin-top:0; justify-content:flex-end;
  }
  /* 這兩顆是 <a>：.psc-home a{color:inherit}（0,1,1）會壓過單一 class（0,1,0）的字色，帶 .cta-banner 重申 */
  .cta-banner .psc-btn-primary{ color:#fff; }
  .cta-banner .psc-btn-ghost{ color:var(--ink); }

  /* ---------- Footer ---------- */
  footer{ background:var(--ink); color:var(--on-ink); padding:64px 0 28px; margin-top:20px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
  /* WCAG 1.3.1：原為 h6，前一個標題是 h2，標題導覽會出現斷層；改 h3 並維持原有視覺大小 */
  .footer-grid h3{ color:#fff; font-size:var(--text-xs); font-weight:700; margin-bottom:14px; }
  .footer-grid li{ margin-bottom:8px; font-size:var(--text-xs); }
  .footer-grid li a:hover{ color:#fff; }
  .footer-bottom{
    margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:var(--text-2xs); color:var(--on-ink-dim);
  }
  /* 連結原本高度 16px，低於 WCAG 2.2 的 24px 下限 */
  .footer-bottom a{ display:inline-block; padding-block:4px; }
  /* 觸控裝置：頁尾連結命中高度補到 44px（21px 的文字行加上下各 12px），行距改由內距承擔 */
  @media (pointer: coarse){
    .footer-grid li{ margin-bottom:0; }
    /* 多帶一層 footer：_LayoutHome.cshtml 有一條同權重的 .psc-home .footer-grid li a（3px 版本）
       且載入順序在後，不加層會輸給它 */
    .psc-home footer .footer-grid li a{ display:inline-block; padding-block:12px; }
    .footer-bottom a{ padding-block:12px; }
  }

  /* ---------- 手機底部列（_LayoutHome.cshtml #navbottom_section） ---------- */
  /* 手機的拇指區快捷入口，桌機由導覽列承擔。白底細線與導覽列同一套語彙，
     不再是實心品牌藍：頁尾已是深色，兩塊深色疊在畫面底部會糊成一片。
     sticky 而非 fixed：它排在 body 最末，捲到底時回到文件流內，不會蓋住頁尾的語言選單 */
  .psc-tabbar{
    position:sticky; bottom:0; z-index:60;
    display:flex; background:var(--surface); border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* 三個項目一個是 button 兩個是 a，把外框、底色與字族一併歸零讓三者長得一樣。
     選擇器帶 .psc-tabbar 提高權重：.psc-home a{color:inherit}（0,1,1）會壓過單一 class 的字色 */
  .psc-tabbar .psc-tabbar__item{
    flex:1 1 0; min-width:0; min-height:56px; padding:0; border:0; background:none;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:inherit; font-size:var(--text-xs); font-weight:700; color:var(--ink-soft);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background-color var(--dur) ease, color var(--dur) ease;
  }
  .psc-tabbar .psc-tabbar__item + .psc-tabbar__item{ border-left:1px solid var(--rule); }
  .psc-tabbar .psc-tabbar__item i{ font-size:15px; color:var(--brand-blue); }
  .psc-tabbar .psc-tabbar__item:active{ background:var(--bg); color:var(--ink); }
  @media (min-width: 768px){ .psc-tabbar{ display:none; } }

  /* ---------- Responsive ---------- */
  @media (max-width: 920px){
    /* minmax(0,1fr) 而非 1fr：軌道最小值改為 0，內容再寬也不會把版面撐出水平捲動 */
    .hero-grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
    .hero-entry{ max-width:none; }
    /* 此寬度以下導覽列會折成兩列且為 sticky，壓縮列高與列距以少佔畫面。
       第一列用兩端對齊而非置中：置中時字標與登入鈕只隔 16px，看起來像擠在一起壞掉了 */
    .nav-inner{ flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding:8px 20px; }
    /* 單列不換行、放不下就橫向捲（EN 語系四個連結會疊成三列，把 sticky 導覽列撐到 175px）。
       置中靠首尾連結的 auto 外距：放得下時置中，放不下時外距歸零、從左開始捲；
       右緣淡出提示還有更多，中文四個連結置中後離右緣 45px，不會被淡到 */
    .nav-links{
      order:3; width:100%; justify-content:flex-start; flex-wrap:nowrap; gap:22px; font-size:var(--text-xs);
      overflow-x:auto; scrollbar-width:none; padding-bottom:3px;
      -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
      mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    .nav-links::-webkit-scrollbar{ display:none; }
    .nav-links > a:first-child{ margin-left:auto; }
    .nav-links > a:last-child{ margin-right:auto; }
    /* 首尾各留 24px 的空白項：捲到底時最後一個連結才不會停在淡出區裡；放得下時兩端對稱、置中不偏 */
    .nav-links::before, .nav-links::after{ content:""; flex:none; width:24px; }
    /* 命中高度直接由內距補到 44px：容器可捲動後，_LayoutHome.cshtml 那個往外撐的 ::before 會把捲動範圍撐大 */
    .nav-links a{ padding:12px 4px; white-space:nowrap; }
    .psc-home .psc-nav .nav-links a::before{ inset:0 -6px; }
    .logo-badge{ width:32px; }
    .rab-row{ grid-template-columns:1fr; }
    .community-grid{ grid-template-columns:1fr; }
    .hot-cert-grid{ grid-template-columns:1fr !important; }
    .testimonial-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    /* 兩欄放不下時回到單欄，動作移到第三列、靠左與訊息對齊同一條線 */
    .cta-banner{ grid-template-columns:minmax(0,1fr); }
    .cta-banner .hero-cta{ grid-column:1; grid-row:3; margin-top:28px; justify-content:flex-start; }
    .level-tier-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width: 600px){
    .wrap{ padding:0 20px; }
    .hero{ padding:36px 0 48px; }
    .hero-entry{ padding:22px 18px 4px; }
    /* 手機可用寬度約 230px，桌機那組格位（278px）會溢出；等比縮小一階：
       字級 20 → 字寬 12；格寬 34 + 間距 8 = 42 → letter-spacing 30；首字置中 11 */
    .hero-code-input{
      font-size:20px; letter-spacing:30px;
      padding:16px 16px 16px 11px;
      background-size:202px 2px; background-position:left bottom 11px;
    }
    .hero-code-input:focus,
    .hero-code-input:not(:placeholder-shown){
      background-image:repeating-linear-gradient(90deg, var(--line) 0 34px, transparent 34px 42px);
    }
    .hero-code-input:not(:placeholder-shown):valid{
      background-image:repeating-linear-gradient(90deg, var(--brand-blue) 0 34px, transparent 34px 42px);
    }
    /* 手機寬度下輸入框與按鈕各佔一行，避免擠在同一列把按鈕擠出畫面 */
    .hero-code-row{ flex-direction:column; align-items:stretch; }
    .hero-code-row .psc-btn{ width:100%; justify-content:center; }
    .nav-links{ gap:14px; font-size:var(--text-xs); }
    .nav-actions{ flex-wrap:wrap; justify-content:center; gap:8px; }
    .section-pad{ padding:48px 0; }
    .level-panel{ padding:36px 22px; }
    .level-tier-grid{ grid-template-columns:repeat(2,1fr); }
    .stats-band{ padding:24px 20px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .cta-banner{ padding:44px 24px; }
    .verify-bar{ justify-content:center; text-align:center; }
    .verify-text{ text-align:center; }
  }
  /* 601px 起改格狀：平板兩到三欄、桌機四欄，每張卡最少 252px */
  @media (min-width: 601px){
    .exam-scroll{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(252px,1fr)); gap:18px;
    }
  }
  @media (min-width: 921px){
    /* 右欄去掉卡片外框後沒有東西把它固定在版面裡，會浮在那邊。
       用一條欄位分隔細線錨定——這是「這是另一欄資訊」的結構訊息，不是裝飾。
       欄距同步從 48 收到 36，加上 36 的內距後兩欄間距與原本相當。 */
    .hero-grid{ gap:36px; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     主視覺 A 版：單一任務（櫃檯）
     ──────────────────────────────────────────────────────────────────────
     這頁多數訪客正坐在考場裡、手上有一組 5 碼，只想趕快進去。原本字標、英文
     tagline、H1、狀態列、入口卡五個層次幾乎等重，對那位使用者全是雜訊。
     A 版把整個主視覺收斂成一件事：輸入認證碼；其餘退成支撐性的細節。

     格位數學（字要落在格中央、整組格位又要在欄位中置中）：
       週期 P = 格寬C + 間距G = 字寬g + 字距L
       padding-left = 5P − S + C − g   （S = 5C+4G 為格位總寬）
       欄寬 W = padding-left + 5P，格位左偏移 = (W − S) / 2
     桌機 字級32/格56/間距14 → 字距50.8、pl 50.8、欄寬400.8、偏移32.4、格位336
     手機 字級20/格34/間距8  → 字距30、pl 30、欄寬240、偏移19、格位202
     兩組實算置中誤差皆為 0.000px。

     整塊置於檔案最末，移除即回到原版型。
     ══════════════════════════════════════════════════════════════════════ */
  .hero{ padding:64px 0 64px; }
  .hero-grid{ grid-template-columns:minmax(0,1fr); justify-items:center; gap:0; }
  .hero-main{
    display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:620px; text-align:center;
  }
  .hero-logo-img{ height:56px; }
  /* 品牌標語（英文原句）：clamp(24,2.4vw,32)、700、斜體，比區段標題略大一階、斜體讓它讀成標語而非標題
     （PM 指定，自 40px／800 縮一級）。仍明顯輕於下方 520px 寬、帶浮起陰影的入口卡，操作重心不變 */
  .hero-title{
    order:1; margin-top:18px;
    font-size:clamp(24px,2.4vw,32px); font-weight:700; font-style:italic;
    color:var(--ink); letter-spacing:-.01em; line-height:1.25;
  }
  .hero-entry{
    order:2; margin-top:28px; width:100%; max-width:520px;
    padding:28px 30px 26px;
  }
  .hero-paths{ order:3; margin-top:22px; justify-content:center; }
  /* 標籤貼近欄位：欄位上方那段空白是留給字的位置，標籤離太遠會讓空卡看起來中空 */
  .hero-code-label{ text-align:center; font-size:var(--text-md); margin-bottom:6px; }
  /* 未滿 5 碼的提示：整頁沒有其他紅色，這裡的紅只代表「擋下了」。#B42318 對白底 6.3:1 */
  .hero-code-hint{
    margin-top:12px; text-align:center;
    font-size:var(--text-xs); font-weight:600; color:#B42318;
  }
  /* 未登入者的預告：一行小字，讓「送出後先登入」在按下去之前就看得見 */
  .hero-code-note{ margin-top:10px; text-align:center; font-size:var(--text-2xs); color:var(--muted); }
  /* 狀態線同步轉紅，格位自己也說明哪裡出了問題，不只靠下方那行字 */
  .hero-code-input[aria-invalid="true"],
  .hero-code-input[aria-invalid="true"]:focus{
    background-image:
      repeating-linear-gradient(90deg, #B42318 0 56px, transparent 56px 70px),
      repeating-linear-gradient(90deg, rgba(180,35,24,0.06) 0 56px, transparent 56px 70px);
  }
  /* 欄位不畫框：格位本身就是欄位 */
  .hero-code-row{ flex-direction:column; align-items:center; gap:18px; }
  .hero-code-input{
    flex:none; width:400.8px; max-width:100%;
    padding:0 0 10px 50.8px;
    border:0; background-color:transparent; border-radius:0;
    font-size:32px; font-weight:600; letter-spacing:50.8px; line-height:1.2;
  }
  /* 格位常駐：欄位自己就說明了「要填 5 碼」，這是櫃檯式介面的重點。
     提示文字與格位會疊在一起，故轉為透明——上方標籤已充分說明要填什麼。

     格位是「格子」不是「底線」：原本只畫 3px 的底線，空著時整個欄位是一片 48px 的白，
     看起來不像可以打字的地方，視線會先落到下方那顆實心藍的送出鈕——而那顆在輸入前沒有用。
     改成同一組 repeating-linear-gradient 疊兩層：下層鋪滿格高當格底、上層維持底部的狀態線。
     格底用極淡的品牌色，深色的狀態線留給「聚焦」與「填滿 5 碼」兩個節拍。

     必須連 :not(:placeholder-shown) 一起指定：基礎版型有一條同權重的規則會在
     「已輸入但未聚焦、且未滿 5 碼」時把格線換回 46/58 的舊間距，與此版的欄位幾何對不上 */
  .hero-code-input,
  .hero-code-input:not(:placeholder-shown){
    background-image:
      repeating-linear-gradient(90deg, var(--line-strong) 0 56px, transparent 56px 70px),
      repeating-linear-gradient(90deg, rgba(22,80,161,0.05) 0 56px, transparent 56px 70px);
    background-size:336px 3px, 336px 100%;
    background-position:left 32.4px bottom 0, left 32.4px top 0;
    background-repeat:no-repeat, no-repeat;
  }
  .hero-code-input::placeholder{ color:transparent; }
  .hero-code-input:focus{ background-color:transparent; box-shadow:none; }
  /* 聚焦：狀態線加深、格底同步加深，整組格子一起亮起來 */
  .hero-code-input:focus{
    background-image:
      repeating-linear-gradient(90deg, var(--ink-soft) 0 56px, transparent 56px 70px),
      repeating-linear-gradient(90deg, rgba(22,80,161,0.08) 0 56px, transparent 56px 70px);
  }
  /* 5 碼填滿的那一刻：狀態線轉品牌藍。整頁唯一的「儀式節拍」 */
  .hero-code-input:not(:placeholder-shown):valid,
  .hero-code-input:focus:not(:placeholder-shown):valid{
    background-image:
      repeating-linear-gradient(90deg, var(--brand-blue) 0 56px, transparent 56px 70px),
      repeating-linear-gradient(90deg, rgba(22,80,161,0.10) 0 56px, transparent 56px 70px);
  }
  /* 只收內距不動字級：按鈕原本 63px 高、與輸入欄幾乎等重，視覺主角變成送出鈕 */
  .hero-code-row .psc-btn{
    width:336px; max-width:100%; justify-content:center;
    padding:12px 26px; font-size:var(--text-lg);
  }
  /* 今日場次整塊收起：狀態列已說明「今天有 N 場」，完整清單就在下方「認證考場」區塊，
     再放一個「查看全部 N 場」等於同一件事講兩次 */

  @media (max-width: 600px){
    .hero-entry{ padding:28px 20px 8px; }
    /* 手機 字級24/格42/間距8 → 字距35.6、pl 35.6、欄寬285.6、偏移21.8、格位242。
       原為字級20/格34，欄位只有 240px 寬，在 350px 的卡片裡小得像個配件，
       而它是這張卡唯一要操作的東西。格線色同桌機，--line 在白底上看不見 */
    .hero-code-input{
      width:285.6px; padding:0 0 10px 35.6px;
      font-size:24px; letter-spacing:35.6px;
    }
    .hero-code-input,
    .hero-code-input:not(:placeholder-shown){
      background-image:
        repeating-linear-gradient(90deg, var(--line-strong) 0 42px, transparent 42px 50px),
        repeating-linear-gradient(90deg, rgba(22,80,161,0.05) 0 42px, transparent 42px 50px);
      background-size:242px 2px, 242px 100%;
      background-position:left 21.8px bottom 0, left 21.8px top 0;
      background-repeat:no-repeat, no-repeat;
    }
    .hero-code-input:focus{
      background-image:
        repeating-linear-gradient(90deg, var(--ink-soft) 0 42px, transparent 42px 50px),
        repeating-linear-gradient(90deg, rgba(22,80,161,0.08) 0 42px, transparent 42px 50px);
    }
    .hero-code-input:not(:placeholder-shown):valid,
    .hero-code-input:focus:not(:placeholder-shown):valid{
      background-image:
        repeating-linear-gradient(90deg, var(--brand-blue) 0 42px, transparent 42px 50px),
        repeating-linear-gradient(90deg, rgba(22,80,161,0.10) 0 42px, transparent 42px 50px);
    }
    .hero-code-row .psc-btn{ width:242px; padding:15px 24px; font-size:var(--text-md); }
    /* 手機格位幾何是 42/50，紅線規則要在此重寫一次；上方桌機版的 56/70 在這裡會對不上格子。
       權重與同區塊的 :focus / :valid 相同，靠排在最後贏 */
    .hero-code-input[aria-invalid="true"],
    .hero-code-input[aria-invalid="true"]:focus{
      background-image:
        repeating-linear-gradient(90deg, #B42318 0 42px, transparent 42px 50px),
        repeating-linear-gradient(90deg, rgba(180,35,24,0.06) 0 42px, transparent 42px 50px);
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     強制色彩（Windows 高對比等）
     ──────────────────────────────────────────────────────────────────────
     此模式會丟棄 background-image 與 box-shadow。實測認證碼欄位的 5 格格線整個消失、
     欄位變成一片空白，使用者看不出要在哪裡輸入；月曆的選取框同樣不見。
     兩處都改用系統色的實體邊框接手；格位資訊在此模式下退化成單一欄位，
     這是可接受的降級——看得見優先。
     必須排在檔案最末：主視覺 A 版的 .hero-code-input{border:0} 與此同權重，
     放在它之前會被蓋回去。
     ══════════════════════════════════════════════════════════════════════ */
  @media (forced-colors: active){
    .hero-code-input{
      background-image:none;
      border-bottom:2px solid CanvasText;
    }
    .exam-cal-day.is-on{ outline:3px solid Highlight; outline-offset:-3px; }
    /* 「這天有沒有場次」平常靠底色深淺表達，強制色彩會把背景整個丟掉，
       視力使用者就看不出哪幾天點得動了。改用系統的停用色，那正是這個狀態的語意 */
    .exam-cal-day[aria-disabled="true"] .exam-cal-num{ color:GrayText; }
  }
  /* 手機的認證圓點整顆就是一塊背景色，強制色彩會把背景丟掉而讓圓點消失；
     桌機的代號是白底黑字，同樣改色反而會讓字埋進底色，故只針對圓點的尺寸範圍 */
  @media (forced-colors: active) and (max-width: 600px){
    .exam-cal-cert{ background:CanvasText; opacity:1; }
  }
  /* 強制色彩會丟掉長條的底色；補一條系統色外框讓長條仍成形 */
  @media (forced-colors: active) and (min-width: 601px){
    .exam-cal-bar{ border:1px solid CanvasText; }
  }