/* 知識庫文章頁（/knowledge/<slug>/，20 頁）專用樣式。
 * 只有 build/kb_pages.mjs 產生的文章頁載入本檔，其他頁零影響；色彩一律用 site.css 的 token。 */

.kb-article{max-width:780px;font-size:22px;line-height:1.9}
.kb-article>:first-child{margin-top:0}
.kb-article h2{font-family:var(--f-serif);font-size:27px;line-height:1.45;margin:44px 0 14px;padding-top:6px;border-top:1px solid var(--line)}
.kb-article h3{font-size:23px;margin:28px 0 10px}
.kb-article p{margin:0 0 16px}
.kb-article ul,.kb-article ol{margin:0 0 16px;padding-left:1.4em}
.kb-article li{margin:4px 0}
.kb-article strong{color:#241F1B}
.kb-article a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.kb-article blockquote{margin:20px 0;padding:12px 18px;border-left:4px solid var(--c-knowledge);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.kb-article blockquote p:last-child{margin-bottom:0}
.kb-article table{margin:18px 0 24px}
.kb-article code{font-family:var(--f-mono);font-size:.9em;background:var(--surface);padding:1px 5px;border-radius:4px}

/* mermaid 預先渲染的 SVG 圖 */
.kb-fig{margin:24px 0;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;text-align:center}
.kb-fig svg{max-width:100%;height:auto}

/* 統計長條（md 內的 div.kbar，沿用學習模式寫法） */
.kbar{margin:22px 0;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.kbar .cap{font-size:18px;color:var(--text-soft);margin:0 0 10px;font-weight:700}
.kbar .row{display:flex;align-items:center;gap:10px;margin:8px 0}
.kbar .lb{width:96px;text-align:right;font-size:18px;flex:none}
.kbar .track{flex:1;background:var(--surface);border-radius:6px;height:24px;overflow:hidden}
.kbar .fill{height:100%;background:#4A6FA5;border-radius:6px;color:#fff;font-family:var(--f-mono);font-size:17px;
  display:flex;align-items:center;justify-content:flex-end;padding-right:8px;box-sizing:border-box;white-space:nowrap}
.kbar .fill.g{background:#5F7A3E}
.kbar .fill.gold{background:var(--c-industrial-ink)}

/* 測驗（同時是 FAQPage 的可見內容） */
.kb-quiz{margin:28px 0;padding:16px 18px;background:var(--surface);border-radius:var(--radius)}
.kb-quiz__h{font-family:var(--f-mono);font-size:18px;letter-spacing:.06em;color:var(--text-soft);margin:0 0 10px!important}
.kb-quiz .acc summary p{display:inline;margin:0}

/* 文章資訊、上下篇、學習模式 */
.kb-meta{max-width:780px;margin:36px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:19px;line-height:1.8}
.kb-meta b{font-family:var(--f-mono);font-weight:500;color:var(--text-soft);margin-right:6px}
.kb-meta p{margin:0 0 8px}
.kb-meta ul{margin:0 0 10px;padding-left:1.3em}
.kb-meta li span{color:var(--text-soft);margin-left:6px}
.kb-meta .note{margin:8px 0 0}
.kb-nav{max-width:780px;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 0}
.kb-nav a{display:block;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text);text-decoration:none;font-weight:700}
.kb-nav a:last-child{text-align:right}
.kb-nav a:hover{border-color:var(--accent)}
.kb-nav span{display:block;font-family:var(--f-mono);font-size:17px;font-weight:400;color:var(--text-soft)}
.kb-reader-link{max-width:780px;margin:14px 0 0;font-size:20px}

@media (max-width:560px){
  .kb-article{font-size:21px}
  .kb-article h2{font-size:25px}
  .kb-nav{grid-template-columns:1fr}
  .kb-nav a:last-child{text-align:left}
  .kbar .lb{width:72px}
}

/* 手機問答收合（kb_pages.mjs 內的 script 產生；桌機不會出現） */
.kb-fold{scroll-margin-top:76px}   /* 頁首 sticky 約 66px，捲回時別被擋住 */
.kb-fold>summary{font-size:21px;line-height:1.6;align-items:flex-start}
.kb-fold>summary .acc__chev{margin-top:2px}
.kb-fold .acc__body{font-size:inherit}
.kb-article h2+.kb-fold{margin-top:4px}

/* 手機：知識庫 H1 60px 一行只放 7 字、標題占滿首屏 → 縮小（只影響知識庫頁） */
@media (max-width:767px){ .hero h1{font-size:35px;line-height:1.4;text-wrap:balance} }