/* ============================================================
   GearLab — Article Stylesheet (assets/article.css)
   只給 articles/ 底下的文章頁使用，須在 assets/style.css「之後」載入。

   為什麼需要它：
   - 既有 15 篇文章各自複製了同一份約 1.8KB 的 <style>（深色平面底、閱讀欄 800px、
     p 1.1rem / 行距 1.8 ...），改一個顏色要改 15 個檔。這裡把那份「共同外觀」收成單一來源，
     數值與既有文章逐項相同，文章頁只需要 <link> 這支檔案。
   - 頁首 / 頁尾仍由 layout.js + style.css 提供（與首頁相同）。但 style.css 有兩個設定會改變
     文章外觀：body 的漸層底 + .container 的青色邊框面板，以及 * { margin: 0 }。
     所以這裡用 body.article-page 的較高權重蓋回文章的外觀，並把被歸零的 margin 逐項補回。

   使用方式：<body class="article-page" data-page="articles">
   文章專屬的特殊元件（互動示意圖等）請寫在該篇文章自己的 <style> 裡，不要放這裡。
   ============================================================ */

/* ---------- 1. 頁面基底：深色平面底、外框寬度對齊工具頁、閱讀欄 800px ----------
   外框（頁首 / 頁尾 / 麵包屑所在的欄）沿用 style.css 工具頁的三段寬度：900 → 1150（≥1700px，QHD）→ 1350（≥2200px，UHD），
   左右留白 = 工具頁的「邊框 2px + 內距」，所以從工具頁點進文章，頁首、導覽列與語言按鈕不會左右跳動。
   文字內容留在 --gl-col 寬的閱讀欄（中文一行約 40–45 字）並置中；互動圖可以用到外框全寬（見第 4 節的 .gl-wide）；表格與文字同寬，才不會在 QHD 以上的大螢幕比文字欄寬一大截。 */
body.article-page { --gl-col: 800px; }
body.article-page {
    --gl-accent: #00f2ff;
    display: block; min-height: 0; padding: 0;
    background-color: #121212; background-image: none;
    color: #d0d0d0; font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; line-height: 1.8;
}
body.article-page .container {
    box-sizing: border-box; width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 20px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
}
@media (min-width: 941px)  { body.article-page .container { padding: 40px 32px; } }
@media (min-width: 1700px) { body.article-page .container { max-width: 1150px; padding: 40px 42px; } }
@media (min-width: 2200px) { body.article-page .container { max-width: 1350px; padding: 40px 50px; } body.article-page { --gl-col: 860px; } }
body.article-page .footer { border-radius: 8px; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- 2. 中英切換 ----------
   與 style.css 相同的規則再寫一次：即使 style.css 讀不到，也能正確隱藏另一種語言。 */
body:not(.en-mode) .lang-en { display: none !important; }
body.en-mode .lang-zh { display: none !important; }
/* style.css 讓 .lang-en 顯示為 inline-block；文章的英文「整塊內容」必須是 block，否則寬度會縮成內容大小 */
body.en-mode .gl-article > .lang-en { display: block !important; }

/* ---------- 3. 麵包屑 ---------- */
.gl-breadcrumb { font-size: 13px; line-height: 1.6; color: #888; margin: 0 auto 22px; max-width: var(--gl-col); }
.gl-breadcrumb a { color: #aaa; text-decoration: none; }
.gl-breadcrumb a:hover { color: var(--gl-accent); }
.gl-breadcrumb .sep { margin: 0 6px; color: #555; }

/* ---------- 4. 內文排版（數值與既有文章相同） ---------- */
.gl-article h1 { color: var(--gl-accent); font-size: 2.2rem; margin: 0.67em 0 10px; }
.gl-article h2 { color: #fff; margin: 40px 0 0.83em; padding-left: 15px; border-left: 4px solid var(--gl-accent); scroll-margin-top: 20px; }
.gl-article h3 { color: #eee; margin: 30px 0 1em; font-weight: bold; scroll-margin-top: 20px; }
.gl-article p { margin: 1em 0 20px; font-size: 1.1rem; }
.gl-article ul, .gl-article ol { margin: 1em 0 20px; padding-left: 20px; }
.gl-article li { margin-bottom: 10px; }
@media (min-width: 2200px) { .gl-article p { font-size: 1.2rem; } .gl-article li { font-size: 1.1rem; } }   /* UHD：字級跟著放大一點 */

/* 閱讀欄：文章裡的每個區塊預設限制在 --gl-col 寬並置中；表格與文字同寬（欄位太多時在 table-wrap 內橫向捲動）；.gl-wide（互動圖等）與下面列出的圖解可用到外框全寬。
   選擇器權重刻意拉高，才能蓋過各元件自己的 margin 簡寫。 */
body.article-page .gl-article > div > * { max-width: var(--gl-col); margin-left: auto; margin-right: auto; }
body.article-page .gl-article > div > :is(.gl-wide, .ts-fig, .sc-fig) { max-width: none; }
.gl-article a { color: var(--gl-accent); text-decoration: none; }
.gl-article a:hover { text-decoration: underline; }
.gl-article a:focus-visible, .gl-breadcrumb a:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 3px; }

/* 既有文章的圖片樣式（.article-img）：限制大小、置中、加陰影 */
.gl-article .article-img { max-width: 100%; width: 600px; height: auto; display: block; margin: 30px auto; border-radius: 8px; border: 1px solid #333; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }

/* 既有文章的元件：重點框、CTA */
.gl-article .highlight { background: #1f2937; padding: 20px; border-radius: 8px; border: 1px solid #333; margin: 20px 0; }
.gl-article .cta-box { background: linear-gradient(45deg, #004e54, #000); padding: 30px; border-radius: 10px; text-align: center; margin-top: 50px; border: 1px solid var(--gl-accent); }
.gl-article .cta-btn { background: var(--gl-accent); color: #000; padding: 10px 25px; border-radius: 5px; font-weight: bold; display: inline-block; margin: 10px 4px 0; }
.gl-article .cta-btn:hover { text-decoration: none; filter: brightness(1.1); }
.gl-article .cta-btn.ghost { background: transparent; color: var(--gl-accent); border: 1px solid var(--gl-accent); }

/* ---------- 5. 新增的可選元件 ---------- */
.gl-article .post-meta { color: #888; font-size: 0.9rem; margin: 0 0 25px; }
.gl-article .tldr { background: rgba(0,242,255,0.07); border: 1px solid rgba(0,242,255,0.25); border-left: 4px solid var(--gl-accent); border-radius: 8px; padding: 16px 20px; margin: 20px 0 25px; }
.gl-article .tldr p { margin: 0; }
.gl-article .toc { background: #181818; border: 1px solid #333; border-radius: 8px; padding: 15px 25px; margin: 25px 0; }
.gl-article .toc strong { display: block; color: #fff; margin-bottom: 6px; }
.gl-article .toc ol { margin: 0; padding-left: 22px; }
.gl-article .toc li { margin-bottom: 4px; }
/* 標題下方的分享列（由 article.js 自動插入；chip 樣式沿用 style.css 的 .share-chip） */
.gl-article .gl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -8px; margin-bottom: 22px; }
.gl-article .gl-share-label { color: #888; font-size: 0.85rem; margin-right: 2px; }
.gl-article .gl-share .share-chip { padding: 6px 12px; line-height: 1.4; }
.gl-article .gl-share .share-chip:hover { text-decoration: none; }
.gl-article .gl-share-status { flex-basis: 100%; min-height: 1.2em; font-size: 0.8rem; color: #8fe3a8; word-break: break-all; }
.gl-article .note { color: #888; font-size: 0.9rem; margin-top: -10px; }
.gl-article .table-wrap { overflow-x: auto; margin: 20px 0 25px; }
.gl-article table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.gl-article th, .gl-article td { border: 1px solid #333; padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
.gl-article th { background: #1f2937; color: #fff; }
.gl-article tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
.gl-article .total-row td { font-weight: bold; color: var(--gl-accent); background: rgba(0,242,255,0.08); }

/* ---------- 6. 延伸閱讀（由 article.js 依 articles.json 自動產生，卡片樣式沿用 style.css） ---------- */
.gl-related { margin-top: 50px; padding-top: 10px; border-top: 1px solid #333; }
.gl-related h2 { color: #fff; margin: 30px 0 0.83em; padding-left: 15px; border-left: 4px solid var(--gl-accent); font-size: 1.5em; }
.gl-related .articles-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 0; }
.gl-related .article-card { line-height: 1.5; }
.gl-related .article-card-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 7. 廣告 ----------
   廣告未填滿時整塊收合，避免留下空白；Multiplex 高度由 Google 決定，不強制最小高度。 */
.gl-content .ad-container { width: 100%; max-width: var(--gl-col); min-height: 100px; margin: 28px auto; text-align: center; overflow: hidden; }
.gl-content .ad-multiplex { min-height: 0; margin-top: 44px; }
.gl-ad-label { color: #888; font-size: 11px; line-height: 1.6; letter-spacing: 1px; text-align: center; margin: 0 0 6px; }
.gl-content .ad-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ---------- 8. 文末返回按鈕 ---------- */
.gl-back { text-align: center; margin: 10px 0 0; }
.gl-back .back-btn { display: inline-block; padding: 10px 20px; border: 1px solid var(--gl-accent); border-radius: 6px; color: var(--gl-accent); background: rgba(0,242,255,0.05); text-decoration: none; }
.gl-back .back-btn:hover { background: var(--gl-accent); color: #000; }

/* ---------- 9. 備援頂部列（只有在 layout.js 沒載入時，article.js 才會加入） ---------- */
.gl-fallback-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #333; }
.gl-fallback-bar a { color: var(--gl-accent); text-decoration: none; }
.gl-fallback-lang { cursor: pointer; background: transparent; border: 1px solid var(--gl-accent); color: var(--gl-accent); padding: 5px 15px; border-radius: 20px; }
.gl-fallback-lang:hover { background: var(--gl-accent); color: #000; }

/* ---------- 10. 手機版 ----------
   標題、字級、間距刻意維持與既有文章相同；只有新增的表格需要處理橫向捲動。 */
@media (max-width: 600px) {
    .gl-article table { min-width: 420px; }
}