/* ============================================================
   TOEIC ENGINE — 共用設計 Token 與元件
   給 index.html 與所有 chapters/*.html 共用。
   未來新增單元時，顏色／字體／卡片／選項互動樣式都不用重寫。
   ============================================================ */

:root{
  --paper:#EEF0EA;
  --paper-2:#E4E7DF;
  --ink:#1A2233;
  --ink-soft:#4B5266;
  --line:#C7CBBF;
  --line-strong:#9BA093;

  /* 詞性標籤色（chapter 頁面用） */
  --noun:#2E5C8A;   --noun-bg:#E4ECF3;
  --verb:#AE4429;   --verb-bg:#F3E5DF;
  --adj:#3F6B4F;    --adj-bg:#E4EDE6;
  --adv:#A2791C;    --adv-bg:#F2ECDA;

  /* 品牌／狀態色（index 頁面用） */
  --spark:#C8571A;  --spark-bg:#F4E4D8;   /* 點火橘：品牌主色、LIVE 狀態 */
  --steel:#6B7280;  --steel-bg:#E7E8E4;   /* 未上線模組 */
  --live:#3F6B4F;   --live-bg:#E4EDE6;

  --good:#3F6B4F;
  --bad:#AE4429;
  --card:#F7F8F3;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0/22px 22px,
    var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC", sans-serif;
  line-height:1.75;
}
a{color:inherit;}
.mono{font-family:"IBM Plex Mono", monospace;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  text-transform:uppercase;
  display:flex; gap:10px; align-items:center;
}
.eyebrow .dot{width:6px;height:6px;background:var(--ink-soft);border-radius:50%;display:inline-block;}

/* ---------------- 共用卡片 ---------------- */
.rule-card, .p-card, .situ-card{
  border:1px solid var(--line-strong);
  background:var(--card);
  padding:16px 18px;
  margin-bottom:14px;
}

/* ---------------- 共用 MCQ 選項元件 ---------------- */
.options{display:flex; flex-wrap:wrap; gap:8px;}
.opt{
  all:unset;
  cursor:pointer;
  font-family:"IBM Plex Mono", monospace;
  font-size:13.5px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  padding:6px 12px;
  min-width:64px;
  text-align:center;
}
.opt:hover{border-color:var(--ink);}
.opt.correct{background:var(--adj-bg); border-color:var(--adj); color:var(--adj); font-weight:600;}
.opt.wrong{background:var(--verb-bg); border-color:var(--verb); color:var(--verb); text-decoration:line-through;}
.opt.disabled{cursor:default;}
.opt.selected{border-color:var(--ink);}

.explain{
  margin-top:10px;
  font-size:13.5px;
  color:var(--ink-soft);
  border-left:2px solid var(--line-strong);
  padding-left:10px;
  display:none;
}
.explain.show{display:block;}
.explain b{color:var(--ink);}

/* ---------------- 狀態標籤（首頁模組卡共用） ---------------- */
.status{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.05em;
  padding:3px 9px;
  width:fit-content;
}
.status.live{background:var(--live-bg); color:var(--live); border:1px solid var(--live);}
.status.dev{background:var(--steel-bg); color:var(--steel); border:1px solid var(--steel);}
.status i{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* ---------------- 按鈕 ---------------- */
.cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper);
  font-family:"IBM Plex Mono", monospace;
  font-weight:600; font-size:13.5px; letter-spacing:.04em;
  padding:12px 22px;
  text-decoration:none;
  border:1px solid var(--ink);
}
.cta:hover{background:var(--spark); border-color:var(--spark);}
.cta-ghost{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:12px;
  font-family:"IBM Plex Mono", monospace;
  font-size:13px; color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px dotted var(--ink-soft);
}

/* ---------------- 頁尾 ---------------- */
footer.page-foot{
  border-top:1px solid var(--line-strong);
  padding:26px 0;
  text-align:center;
  color:var(--ink-soft);
  font-size:11.5px;
  font-family:"IBM Plex Mono", monospace;
  letter-spacing:.05em;
}