/* main.css — 全站唯一的樣式表。手寫,不用 Tailwind / 任何 CSS 框架(裁決 R-7)。
 *
 * 【給執行 AI】下面是 **11 組**必須寫的規則,一組都不能少 —— 寫完數一遍。
 * class 清單是從模板原始碼抽出來的實際用量,**不要替不存在的 class 寫規則,也不要漏**。
 *
 * 硬約束:
 *   - 只用檔案下方 :root 已定義的 CSS 變數,不要在規則裡寫死色碼。
 *   - 深色模式只覆寫變數(prefers-color-scheme 區塊已備好),不要重寫規則。
 *   - Mobile first:預設給 360px 手機;只用一個斷點 @media (min-width: 48rem)。
 *   - 不准 @import、不准外部字型、不准圖片背景。
 *   - 連結要有底線(不可只靠顏色區分);:focus-visible 要有明顯外框。
 *   - 目標 < 8KB。
 *
 * 組 1/11 —— 基礎排版
 *   .skip-link(預設移出畫面,:focus 時回到左上角)、內文欄寬上限 var(--measure) 置中、
 *   h1–h3 大小階層、p/ul/ol 間距、a 的顏色與底線、:focus-visible 外框。
 *
 * 組 2/11 —— 版面框架
 *   .site-header(站名 + nav 橫向排列,手機可換行)、.site-footer、.disclaimer(小字、次要色)、
 *   main 的上下留白。nav 連結的 [aria-current="page"] 要有可見區別(不可只用顏色)。
 *
 * 組 3/11 —— 麵包屑
 *   .breadcrumbs ol 橫向、item 之間用 "›" 之類的分隔(用 ::after,不要寫進 HTML)、
 *   最後一項(aria-current)不是連結、小字。
 *
 * 組 4/11 —— 徽章
 *   .badge 共用外觀(小、圓角、padding、不換行)。
 *   .badge-domain 依 domain 上色:.badge-safety / .badge-core / .badge-infra / .badge-om
 *     → 用 var(--color-domain-safety) 等四個變數。
 *   .badge-level 中性色:.badge-recall / .badge-application / .badge-technical。
 *
 * 組 5/11 —— 比例條(SVG)
 *   .domain-bar 寬 100%、高度約 0.75rem、圓角。
 *   .domain-bar-seg 用 fill 上色:.domain-bar-safety / -core / -infra / -om 對應四個 domain 變數。
 *     ⚠️ SVG 用 fill 上色,**不是 color / background**。
 *   .domain-bar-legend 橫向、可換行、小字;.legend-safety / -core / -infra / -om 前面加一個
 *     色塊(::before + background),顏色同上。
 *
 * 組 6/11 —— 卡片與清單
 *   .domain-card(邊框 + padding + 圓角)、.task-list、.practice-list、.question-list、
 *   .question-card(一列一題,標題與徽章同列,手機可換行)、.guides、.empty(次要色、斜體)。
 *
 * 組 7/11 —— JTA 頁
 *   .page-header、.source-note(小字次要色)、.weight、.study-tips、
 *   .jta-task(區塊間距 + 上方細分隔線)、.jta-items(type="A" 的清單縮排)、
 *   .item-questions(item 底下的題目連結,縮排、小字)、.task-questions、.task-note(左側色條強調)、
 *   .domain-nav(頁尾的跨 domain 導覽,橫向可換行)。
 *
 * 組 8/11 —— 單題頁 ⭐最重要
 *   .question、.stem(略大字級)、
 *   .options(移除清單標記)、.option(**整列可點**:width 100%、text-align left、
 *     padding 夠大讓手指好按、邊框、hover/focus 有回饋、cursor pointer)。
 *   reveal.js 會加三個狀態 class,都要有明顯樣式且**不可只靠顏色**(要有圖示或邊框差異):
 *     .option.is-correct(用 --color-correct)、.option.is-wrong(--color-wrong)、.option.is-selected。
 *   .answer(details/summary:summary 像按鈕、可點)、.correct-answer、.distractors(dl 的 dt/dd 間距)、
 *   .references、.jta-ref、.question-nav(上一題/下一題分置兩端)、.related。
 *   .sr-status:螢幕閱讀器專用,視覺上隱藏但不能用 display:none。
 *
 * 組 9/11 —— quiz 頁
 *   .quiz-intro、#quiz-root 的容器留白。quiz.js 會動態建 DOM,沿用 .option 等既有 class。
 *
 * 組 10/11 —— 文章與一般頁
 *   .prose(內文行高、段落間距、h2/h3 上方留白、ul/ol 縮排)、
 *   .prose table(**外層可橫向捲動,不可撐破版面**:display block + overflow-x auto)、
 *   .prose code、.article-dates(小字次要色)、.next-steps(上方分隔線)。
 *
 * 組 11/11 —— 其他
 *   .draft-banner(⚠️ 要醒目:var(--color-draft-bg) 底 + 深色字 + 明顯邊框)、
 *   .not-found、.exam-facts(dl 排成兩欄:dt 次要色、dd 正常;手機改上下堆疊)、
 *   .hero-actions(兩個連結橫排,手機換行)、.tagline(略大、次要色)。
 *
 * 寫完自我驗證:上面 11 組裡點名的每一個 class 都要在檔案裡出現過至少一次。
 */

:root {
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-bg: #ffffff;
  --color-surface: #f5f7f9;
  --color-text: #17212b;
  --color-muted: #55636f;
  --color-border: #d5dce2;
  --color-link: #0b5cad;
  --color-accent: #e08a00; /* 太陽能橘,只用在重點 */
  --color-correct: #17794a;
  --color-wrong: #b3261e;
  --color-draft-bg: #fff3c4;
  /* 彩色徽章底上的文字、草稿橫幅的前景 —— 這兩個在深色模式刻意不翻轉,
     因為它們的底色是固定的 domain 色 / 警示黃。 */
  --color-on-accent: #ffffff;
  --color-draft-fg: #1a1400;

  /* 4 個 domain 的識別色:比例條、badge 共用 */
  --color-domain-safety: #b3261e;
  --color-domain-core: #0b5cad;
  --color-domain-infra: #6b4fbb;
  --color-domain-om: #17794a;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 0.5rem;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #10171e;
    --color-surface: #1a242e;
    --color-text: #e6edf3;
    --color-muted: #9fb0bf;
    --color-border: #2f3d4a;
    --color-link: #7db8f5;
    --color-draft-bg: #5c4a00;
    --color-draft-fg: #fff6d5;   /* 深色底改用淺色前景 */

    /* ⚠️ 這兩個**必須**在深色模式覆寫。亮色模式的 #17794a / #b3261e 是為白底調的,
       直接拿到 #10171e 上當文字色只有 3.33:1 與 2.41:1,作答後最該讀的兩個選項變成最難讀的。
       深色變體在 bg 與 surface 上都 >6.5:1(tests/css-contrast.test.ts 會擋)。 */
    --color-correct: #81c995;
    --color-wrong: #f28b82;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4);
}

h1, h2, h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

p, ul, ol {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-header nav a {
  text-decoration: none;
  color: var(--color-text);
}

.site-header nav a[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
}

.site-footer {
  padding: var(--space-3);
  background: var(--color-surface);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* 頁尾連結之間要有間距。模板用 `${links.map(...)}` 輸出,陣列項之間不會自己產生空白,
   所以沒有這條規則時會渲染成「AboutContactSitemap」。header 的 nav 也是同一個寫法,
   它已經有 flex + gap,頁尾漏掉了。2026-09-27 修。 */
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.disclaimer {
  font-size: 0.875rem;
  color: var(--color-muted);
}

main {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.breadcrumbs ol {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs li {
  margin-right: var(--space-1);
}

.breadcrumbs li::after {
  content: '›';
  margin-left: var(--space-1);
}

.breadcrumbs li:last-child::after {
  content: '';
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--color-text);
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-size: 0.875rem;
  white-space: nowrap;
}

.badge-domain {
  border: 1px solid var(--color-border);
}

.badge-safety {
  background-color: var(--color-domain-safety);
  color: var(--color-on-accent);
}

.badge-core {
  background-color: var(--color-domain-core);
  color: var(--color-on-accent);
}

.badge-infra {
  background-color: var(--color-domain-infra);
  color: var(--color-on-accent);
}

.badge-om {
  background-color: var(--color-domain-om);
  color: var(--color-on-accent);
}

.badge-level {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.domain-bar {
  width: 100%;
  height: 0.75rem;
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.domain-bar-seg {
  height: 100%;
  border-radius: var(--radius);
}

.domain-bar-safety {
  fill: var(--color-domain-safety);
}

.domain-bar-core {
  fill: var(--color-domain-core);
}

.domain-bar-infra {
  fill: var(--color-domain-infra);
}

.domain-bar-om {
  fill: var(--color-domain-om);
}

.domain-bar-legend {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.domain-bar-legend li {
  margin-right: var(--space-2);
}

.domain-bar-legend li::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-1);
  border-radius: var(--radius);
}

.legend-safety::before {
  background-color: var(--color-domain-safety);
}

.legend-core::before {
  background-color: var(--color-domain-core);
}

.legend-infra::before {
  background-color: var(--color-domain-infra);
}

.legend-om::before {
  background-color: var(--color-domain-om);
}

.domain-card {
  border: 1px solid var(--color-border);
  padding: var(--space-3);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}

.task-list, .practice-list, .question-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.question-card {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2);
}

.question-card .badge {
  margin-right: var(--space-1);
}

.guides {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.empty {
  color: var(--color-muted);
  font-style: italic;
}

.page-header {
  margin-bottom: var(--space-4);
}

.source-note {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.weight {
  font-weight: bold;
}

.study-tips {
  margin-top: var(--space-2);
  list-style: none;
  padding: 0;
}

.jta-task {
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.jta-items {
  margin-left: var(--space-3);
}

.item-questions {
  margin-top: var(--space-2);
  font-size: 0.875rem;
}

.task-questions {
  margin-top: var(--space-2);
}

.task-note {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-border);
}

.domain-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.question {
  margin-bottom: var(--space-4);
}

.stem {
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}

.options {
  list-style: none;
  padding: 0;
  margin: 0;
}

.option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  /* ⚠️ color 與 background 一定要明寫。button 一旦 disabled,瀏覽器預設樣式會接管
     (rgba(16,16,16,0.3) 的深色字),在深色模式下等於整個字消失 —— 實測踩過。 */
  color: var(--color-text);
  background-color: var(--color-bg);
  font: inherit;
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

/* disabled 之後仍要看得清楚 —— 作答後正解與錯答都必須讀得到 */
.option:disabled {
  color: var(--color-text);
  background-color: var(--color-bg);
  cursor: default;
  opacity: 1;
}

.option:hover, .option:focus {
  border-color: var(--color-accent);
}

/* 三種狀態**不可只靠顏色**:各自有符號 + 左側粗邊框 + 字重差異 */
.option.is-correct,
.option.is-correct:disabled {
  border-left-color: var(--color-correct);
  color: var(--color-correct);
  font-weight: 700;
}

.option.is-correct::after {
  content: " \2713";          /* ✓ */
  float: right;
}

.option.is-wrong,
.option.is-wrong:disabled {
  border-left-color: var(--color-wrong);
  color: var(--color-wrong);
}

.option.is-wrong::after {
  content: " \2717";          /* ✗ */
  float: right;
}

.option.is-selected,
.option.is-selected:disabled {
  background-color: var(--color-surface);
}

.answer {
  margin-top: var(--space-4);
}

.correct-answer {
  margin-top: var(--space-2);
  font-weight: bold;
}

.distractors dt {
  margin-bottom: var(--space-1);
}

.distractors dd {
  margin-left: var(--space-3);
}

.references {
  margin-top: var(--space-4);
}

.jta-ref {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.question-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
}

.related {
  margin-top: var(--space-4);
}

.sr-status {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quiz-intro {
  margin-bottom: var(--space-4);
}

#quiz-root {
  padding: var(--space-4);
}

.prose {
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.prose h2, .prose h3 {
  margin-top: var(--space-5);
}

.prose ul, .prose ol {
  margin-left: var(--space-4);
}

.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
}

.prose code {
  font-family: var(--font-mono);
  background-color: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.article-dates {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.next-steps {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.draft-banner {
  background-color: var(--color-draft-bg);
  color: var(--color-draft-fg);
  border: 2px solid var(--color-draft-fg);
  padding: var(--space-3);
  text-align: center;
  margin-bottom: var(--space-4);
}

.not-found {
  text-align: center;
  margin-top: var(--space-5);
}

.exam-facts dt {
  margin-bottom: var(--space-1);
  color: var(--color-muted);
}

.exam-facts dd {
  margin-left: var(--space-3);
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.tagline {
  font-size: 1.25rem;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* ── review 補上:模板有用到但產出漏掉的 class ───────────────────── */

.badge-recall,
.badge-application,
.badge-technical {
  background-color: var(--color-surface);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.badge-technical {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.domains,
.question-directory {
  margin-block: var(--space-5);
}

.more {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 600;
}

.prose-article,
.prose-page {
  margin-block: var(--space-4);
}

.prose-article > :first-child,
.prose-page > :first-child {
  margin-top: 0;
}

/* ── review 補上:桌機斷點 ──────────────────────────────────────
 * 產出只寫了 mobile-first 的基礎樣式,規格要求的唯一斷點整個沒做
 * (第 9 行那個 @media 只是註解文字,不是規則)。
 * 這裡只做「窄螢幕擠、寬螢幕鬆」該有的差異,不重寫任何規則。 */
@media (min-width: 48rem) {
  body {
    font-size: 1.0625rem;
  }

  /* ⚠️ flex-direction 一定要寫:基礎樣式是 column,而下面兩條只對 row 有意義。
     漏掉它 = 寬螢幕 header 直向堆疊並貼齊視窗左緣(2026-09-28 上線後才看到)。 */
  .site-header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* 背景滿版、文字對齊 main 那一欄:用 padding 撐,不要用 max-width
     (max-width 會把背景色帶也縮進去)。 */
  .site-header,
  .site-footer {
    padding-inline: max(var(--space-3), calc((100% - var(--measure)) / 2 + var(--space-4)));
  }

  main {
    padding-inline: var(--space-4);
  }

  /* 考試規格在寬螢幕排成兩欄,手機維持上下堆疊。
     ⚠️ 一定要寫 dl.exam-facts —— 首頁的外層是 <section class="exam-summary">,
     同名。不限定元素的話 section 也會變成 grid,把 <h2> 和 <dl> 排成左右兩欄。 */
  dl.exam-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    align-items: baseline;
  }

  dl.exam-facts dt,
  dl.exam-facts dd {
    margin: 0;
  }

  /* 上一題 / 下一題分置兩端 */
  .question-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .domain-nav,
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .question-card {
    display: flex;
    /* ⚠️ 必須重設 flex-direction。基準規則是 column(手機:標題一行、徽章一行),
       這裡少了這一行的話容器仍是 column,而 align-items:center 就會把標題與徽章
       全部水平置中 —— 首頁從鷹架起就一直長這樣。2026-09-27 修。 */
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }
}

/* 首頁的考試規格區塊。⚠️ 刻意不叫 exam-facts —— 裡面的 <dl> 才是 .exam-facts,
   同名會讓套在 dl 上的 grid 規則也套到 section(命名裁決 CP-1)。 */
.exam-summary {
  margin-block: var(--space-5);
}