/* css/pages.css — 靜態考點頁（重點整理＋練習入口）共用版型。
   沿用 tokens.css / app.css 的世紀帝國風變數與元件（.hero-banner / .trust-* / .card-* / .btn），
   這裡只補「整頁文件」需要、SPA 殼層沒有的容器、麵包屑、時代清單與頁尾。 */

.page { max-width: 760px; margin: 0 auto; padding: 12px 12px 48px; }

/* 麵包屑：回學院首頁 / 上層總覽 */
.page-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 4px; font-size: 13px; }
.page-top a { color: var(--c-gold); text-decoration: none; font-weight: bold; }
.page-top a:hover { color: var(--c-gold-bright); }
.crumb-sep { color: #8a6d3b; }
.crumb-cur { color: var(--c-parchment-dark); }

.page-hero { margin-top: 8px; }
/* 靜態頁主標用粗體襯線（Noto Serif TC 900），與主站品牌厚重金字一致；
   否則 --font-display 中文會落到常規字重（400）而顯得單薄、像換了字型。 */
.page-hero .hero-title { font-weight: 900; }

/* 導言與整頁主標 */
.lede { margin: 16px 2px; font-size: 16px; line-height: 1.95; color: var(--c-parchment); text-wrap: pretty; }
.lede strong { color: var(--c-gold-bright); }
.section-h { margin: 28px 2px 2px; color: var(--c-gold-bright);
  font-family: var(--font-display); font-weight: 900; font-size: 20px; }

/* 整頁主要行動鈕（開始練習） */
.page-cta { display: block; text-align: center; width: 100%;
  margin: 16px 0 4px; font-size: 17px; padding: 14px; }

/* 時代 / 考點卡片清單（沿用 .card-plain 的羊皮紙底） */
.era-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.era-card { color: var(--c-ink); }
.era-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.era-name { font-size: 19px; font-weight: 900; color: #5a3a12; }
.era-range { font-size: 13px; color: #8a7448; font-weight: bold; }
.era-sum { margin: 8px 0 0; font-size: 15px; line-height: 1.85; color: #4a3818; text-wrap: pretty; }
.era-sum + .era-sum { margin-top: 6px; }
.era-cta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.era-cta .btn { text-decoration: none; }

/* 重點條列（考點頁內文用） */
.key-list { margin: 6px 0 0; padding-left: 1.25em; }
.key-list li { font-size: 15px; line-height: 1.9; color: #4a3818; margin: 4px 0; text-wrap: pretty; }
.key-list b { color: #5a3a12; }

/* 內文連結：金棕色 + 細緻底線，hover 變亮（羊皮紙底用，深一點才看得清） */
.lede a, .key-list a, .era-sum a {
  color: #9a6a1e; font-weight: 700; text-decoration: underline;
  text-decoration-color: rgba(154,106,30,.45); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.lede a:hover, .key-list a:hover, .era-sum a:hover { color: #5a3a12; text-decoration-color: var(--c-gold); }

/* 連結膠囊：常用連結等場合，較有質感的可點區（金邊藥丸，hover 填金） */
.link-group-label { margin: 16px 0 7px; font-weight: 900; color: #5a3a12; font-size: 14px; letter-spacing: .5px; }
.link-group-label:first-child { margin-top: 2px; }
.link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px;
  background: rgba(201,162,75,.18); border: 1.5px solid var(--c-gold); color: #6b4f1f;
  font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.link-chip:hover { background: linear-gradient(180deg, #caa24e, #a8842f); color: #2a1d08; border-color: var(--c-gold-bright); }
.link-note { margin: 12px 2px 0; font-size: 13px; line-height: 1.7; color: #7a5e2e; }

/* 頁尾：回學院／主站署名 */
.page-footer { margin-top: 34px; padding-top: 18px; text-align: center;
  border-top: 1px solid rgba(201,162,75,.4); }
.pf-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pf-credit { font-size: 12px; }
.pf-credit a { color: var(--c-gold); text-decoration: none; letter-spacing: .5px; }
.pf-credit a:hover { color: var(--c-gold-bright); }

@media (max-width: 600px) {
  .page { padding: 10px 10px 40px; }
  .lede { font-size: 16px; }
  .section-h { font-size: 18px; }
  .era-name { font-size: 18px; }
  .era-sum { font-size: 15px; }
  .pf-links { flex-direction: column; }
  .pf-links a { width: 100%; justify-content: center; }
}