/* 玩樂新聞網 — Bootstrap 5.3 之上的自訂樣式
   版面與元件用 Bootstrap class；這裡只放品牌色、Logo、首頁橫幅與文章內文排版。
   自訂部分依 README 第 2 節 HTML 規則（class 在區塊上，子元素用區塊選取）與第 3 節 CSS 規則 */

/* ---- 全站設定：換站或改色只改這一組（README 第 3 節 CSS 規則） ----
   命名：--{CSS 類型}-{用途}；顏色一律 --color-，品牌色用編號 --color-ci-N（編號不代表色相），
   元件色 --color-{區塊}-{狀態} 只引用 --color-ci-*，不直接寫色碼 */
:root {
  /* 品牌色（取自 Logo） */
  --color-ci-1: #1554c4;
  --color-ci-1-rgb: 21, 84, 196;
  --color-ci-1-hover: #0b3a8f;
  --color-ci-1-hover-rgb: 11, 58, 143;
  --color-ci-1-light: #eaf1fb;
  --color-ci-2: #0a1f4d;
  --color-ci-2-rgb: 10, 31, 77;
  --color-ci-3: #ffc21f;
  --color-ci-3-rgb: 255, 194, 31;
  --color-ci-4: #d9141b;
  --color-white: #fff;

  /* 頁首（浮動膠囊選單）：與頁尾同一組深海軍藍配色 */
  --color-header-bg: rgba(var(--color-ci-2-rgb), .94);
  --color-header-border: rgba(255, 255, 255, .1);
  --color-header-shadow: rgba(var(--color-ci-2-rgb), .25);
  --color-header-link: rgba(255, 255, 255, .88);
  --color-header-link-hover: var(--color-white);
  --color-header-hover-bg: rgba(255, 255, 255, .1);
  --color-header-active: var(--color-ci-3);
  --color-header-active-text: var(--color-ci-2);

  /* 頁尾 */
  --color-footer-bg: var(--color-ci-2);
  --color-footer-text: rgba(255, 255, 255, .7);
  --color-footer-link: rgba(255, 255, 255, .88);
  --color-footer-link-hover: var(--color-white);
  --color-footer-active: var(--color-ci-3);
  --color-footer-line: var(--color-ci-3);
  --color-footer-divider: rgba(255, 255, 255, .18);

  /* Hero（軌道橫幅） */
  --color-hero-bg: linear-gradient(135deg, var(--color-ci-1) 0%, var(--color-ci-2) 75%);
  --color-hero-text: var(--color-white);
  --color-hero-soft: rgba(255, 255, 255, .82);
  --color-hero-muted: rgba(255, 255, 255, .68);
  --color-hero-accent: var(--color-ci-3);
  --color-hero-globe: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 70%);
  --color-hero-globe-line: rgba(255, 255, 255, .12);
  --color-hero-orbit: rgba(var(--color-ci-3-rgb), .6);
  --color-hero-card-bg: rgba(255, 255, 255, .08);
  --color-hero-card-hover-bg: rgba(255, 255, 255, .14);
  --color-hero-button-text: var(--color-ci-2);
  --color-hero-button-shadow: rgba(var(--color-ci-2-rgb), .3);

  /* 作者介紹：作者區塊交錯底色（淺藍／淺金） */
  --color-author-bg-odd: var(--color-ci-1-light);
  --color-author-bg-even: color-mix(in srgb, var(--color-ci-3) 12%, var(--color-white)); /* 不透明：放在深色 hero 上的作者按鈕也是同一個顏色 */

  /* 字型、行高 */
  /* 字型：Google Fonts 的 Noto Sans TC（layout.js 載入 300／400／700 三種字重），載入失敗時退回系統字型 */
  --font-family-base: "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-size-min: .8125rem; /* 全站最小字級 13px，任何文字都不能比這更小（README 第 3.1 節） */
  --line-height-base: 1.85;

  /* 尺寸、圓角 */
  --size-header-gap: .75rem;
  --size-header-height: 72px;
  --size-footer-line: 3px;
  --size-active-bar: 3px;
  --size-logo-header: 44px;
  --size-logo-footer: 40px;
  --radius-base: .5rem;
  --radius-panel: 1.5rem;
  --radius-pill: 999px;
  --size-nav-item-min: 6rem;
  --size-hero-padding: 2.5rem;
  --size-hero-author-avatar: 2.75rem;
  --size-hero-index-height: 11rem;
  --size-search-max-width: 400px; /* hero 搜尋框（分類頁、搜尋頁）的最大寬度（使用者 2026-11-09 指定） */
  --size-card-line: 1.5rem;
  --size-card-summary-gap: .25rem;
  --font-size-card-title: 1.0625rem;
  --font-size-card-text: .875rem;
  /* 通用側欄「更多新文」的縮圖寬度（正方形 1:1） */
  --size-side-thumb: 5rem;

  /* Bootstrap 變數改由上面的設定帶入 */
  --bs-primary: var(--color-ci-1);
  --bs-primary-rgb: var(--color-ci-1-rgb);
  --bs-link-color: var(--color-ci-1);
  --bs-link-color-rgb: var(--color-ci-1-rgb);
  --bs-link-hover-color: var(--color-ci-1-hover);
  --bs-link-hover-color-rgb: var(--color-ci-1-hover-rgb);
  --bs-body-font-family: var(--font-family-base);
  --bs-body-font-weight: var(--font-weight-regular);
  --bs-body-line-height: var(--line-height-base);
}
.btn-primary { --bs-btn-bg: var(--color-ci-1); --bs-btn-border-color: var(--color-ci-1); --bs-btn-hover-bg: var(--color-ci-1-hover); --bs-btn-hover-border-color: var(--color-ci-1-hover); --bs-btn-active-bg: var(--color-ci-1-hover); --bs-btn-active-border-color: var(--color-ci-1-hover); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--color-ci-1); }
/* 最小字級：Bootstrap 的徽章（.75em＝12px）與 small（.875em，巢狀時會越來越小）都不低於 --font-size-min */
.badge { --bs-badge-font-size: max(.75em, var(--font-size-min)); }
small, .small { font-size: max(.875em, var(--font-size-min)); }
.accordion { --bs-accordion-active-bg: var(--color-ci-1-light); --bs-accordion-active-color: var(--color-ci-1-hover); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--color-ci-1-rgb), .2); }

/* 手機版內容左右各留 2rem（README 第 3 節 CSS 規則）；
   Bootstrap 的 .container 左右 padding = --bs-gutter-x 的一半 */
@media (max-width: 767.98px) {
  .container { --bs-gutter-x: 4rem; }
}

/* 錨點跳轉時不要被固定頁首蓋住 */
html { scroll-padding-top: calc(var(--size-header-height) + 12px); }

/* ---- Logo ---- */
.brand { display: inline-block; padding: 0; }
.brand img { display: block; width: auto; height: var(--size-logo-header); }
.site-footer .brand img { height: var(--size-logo-footer); }

/* ---- 頁首：浮動膠囊選單（Floating Pill Navbar，README 第 3.5 節） ----
   外層 .site-header 透明、黏在頂端；內層 .container 是膠囊本體（不滿版、全圓角、毛玻璃、陰影） */
.site-header {
  --bs-navbar-color: var(--color-header-link);
  --bs-navbar-hover-color: var(--color-header-link-hover);
  --bs-navbar-active-color: var(--color-header-active-text);
  --bs-navbar-nav-link-padding-x: 1rem; /* Bootstrap 桌機選單左右 padding 用這個變數（選取器權重比 .site-header .nav-link 高） */
  padding: var(--size-header-gap) 0 0;
  background: transparent;
}
.site-header .container {
  padding: .375rem .5rem .375rem 1.25rem;
  background: var(--color-header-bg);
  border: 1px solid var(--color-header-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 .5rem 1.5rem var(--color-header-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header .navbar-toggler { border: 0; border-radius: var(--radius-pill); }
/* Bootstrap 預設的選單按鈕圖示是深色線條，深底上反白 */
.site-header .navbar-toggler-icon { filter: invert(1); }
.site-header .nav-link { padding: .5rem 1rem; border-radius: var(--radius-pill); font-weight: var(--font-weight-bold); transition: background-color .15s ease, color .15s ease; }
.site-header .nav-link:not(.active):hover { background: var(--color-header-hover-bg); }
/* 目前頁：金色實心膠囊＋深海軍藍字（與頁尾目前頁同為金色） */
.site-header .nav-link.active { background: var(--color-header-active); font-weight: var(--font-weight-bold); }
/* 桌機選單項目最小寬度：字少的「首頁」不會縮成圓形 */
@media (min-width: 768px) {
  .site-header .nav-link { min-width: var(--size-nav-item-min); text-align: center; }
}
@media (max-width: 767.98px) {
  .site-header .container { width: calc(100% - 2rem); max-width: none; padding-left: 1rem; }
  /* 展開選單時改成大圓角面板，避免 999px 圓角在變高後成橢圓 */
  .site-header .container:has(.navbar-collapse.show, .navbar-collapse.collapsing) { border-radius: var(--radius-panel); }
  .site-header .navbar-nav { padding: .5rem 0 .25rem; }
}

/* ---- 頁尾：深色底；目前頁點亮同頁首 ---- */
/* Bootstrap 在 .nav 本身定義連結色，所以變數要寫在 .site-footer .nav */
.site-footer .nav {
  --bs-nav-link-color: var(--color-footer-link);
  --bs-nav-link-hover-color: var(--color-footer-link-hover);
}
.site-footer {
  background: var(--color-footer-bg);
  border-top: var(--size-footer-line) solid var(--color-footer-line);
  color: var(--color-footer-text);
}
.site-footer .nav-link.active { color: var(--color-footer-active); font-weight: var(--font-weight-bold); }
.site-footer hr { border-color: var(--color-footer-divider); opacity: 1; }
.site-footer p { color: var(--color-footer-text); }

/* ---- Hero：軌道橫幅（README 第 3.6 節）----
   每頁都有；section.hero 全寬，面板是裡面的 .container（同頁首膠囊的做法）。
   深色漸層底、靠左排版，右側用 ::before（地球）與 ::after（金色軌道環）呼應 Logo。
   首頁較大（.page-home），其他頁精簡；內容層 z-index 在裝飾之上 */
.hero { padding-top: .75rem; }
.hero .container {
  position: relative;
  overflow: hidden;
  padding: var(--size-hero-padding) 1.5rem;
  border-radius: var(--radius-panel);
  background: var(--color-hero-bg);
  color: var(--color-hero-text);
  isolation: isolate;
}
.hero .container::before { content: ""; position: absolute; z-index: -1; top: 50%; right: -7rem; width: 22rem; height: 22rem; border: 1px solid var(--color-hero-globe-line); border-radius: 50%; background: var(--color-hero-globe); transform: translateY(-50%); }
.hero .container::after { content: ""; position: absolute; z-index: -1; top: 50%; right: -8rem; width: 26rem; height: 7rem; border: 2px solid var(--color-hero-orbit); border-radius: 50%; transform: translateY(-50%) rotate(-16deg); }
@media (min-width: 768px) {
  .hero .container { padding-inline: 3rem; }
}
@media (max-width: 767.98px) {
  /* 手機：面板左右各留 1rem，與頁首膠囊對齊 */
  .hero .container { width: calc(100% - 2rem); max-width: none; }
  .hero .container::before { width: 14rem; height: 14rem; top: auto; bottom: -5rem; right: -5rem; transform: none; }
  .hero .container::after { width: 20rem; height: 5rem; top: auto; bottom: 1rem; right: -7rem; transform: rotate(-16deg); }
}

/* 麵包屑（Bootstrap 元件，用它的變數換成淺色） */
.hero .breadcrumb { --bs-breadcrumb-divider-color: var(--color-hero-muted); --bs-breadcrumb-item-active-color: var(--color-hero-text); margin-bottom: 1.25rem; }
.hero .breadcrumb a { color: var(--color-hero-muted); text-decoration: none; }
.hero .breadcrumb a:hover { color: var(--color-hero-text); }

/* 標籤：金色小字＋前方短線 */
.hero-badge { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .75rem; color: var(--color-hero-accent); font-size: .875rem; font-weight: var(--font-weight-bold); letter-spacing: .12em; text-decoration: none; }
.hero-badge::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; }
a.hero-badge:hover { color: var(--color-hero-text); }

.hero h1 { margin-bottom: 0; font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: var(--font-weight-bold); line-height: 1.35; }
.page-home .hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
.page-article .hero h1 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.45; }
.hero h1 small { display: block; margin-bottom: .25rem; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: var(--font-weight-bold); color: var(--color-hero-muted); text-wrap: balance; }
.hero h1 strong { color: var(--color-hero-accent); }
/* 手機：關鍵字獨立一行，避免標題剩一兩個字掉到下一行 */
@media (max-width: 575.98px) { .hero h1 small + strong { display: block; } }
.hero h1 small span { display: inline-block; }

.hero-lead { margin: 1rem 0 0; color: var(--color-hero-soft); line-height: 1.9; }
.hero .btn { margin-top: 1.75rem; }
.hero .btn-primary { --bs-btn-bg: var(--color-hero-accent); --bs-btn-border-color: var(--color-hero-accent); --bs-btn-color: var(--color-ci-2); --bs-btn-hover-bg: var(--color-white); --bs-btn-hover-border-color: var(--color-white); --bs-btn-hover-color: var(--color-ci-2); --bs-btn-active-bg: var(--color-white); --bs-btn-active-color: var(--color-ci-2); font-weight: var(--font-weight-bold); }

/* 附屬資訊：篇數、文章日期與作者 */
.hero-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 1.25rem 0 0; color: var(--color-hero-muted); font-size: .875rem; }
.hero-meta a { color: var(--color-hero-text); }

/* 首頁：主選單入口卡（手機 1 欄、平板 2 欄、桌機 4 欄）與頁尾提醒 */
.hero-nav ul { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.hero-nav a { display: block; height: 100%; padding: 1rem 1.25rem; border-top: var(--size-active-bar) solid transparent; border-radius: var(--radius-base); background: var(--color-hero-card-bg); color: var(--color-hero-text); text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .15s ease, border-color .15s ease; }
.hero-nav a:hover { background: var(--color-hero-card-hover-bg); border-top-color: var(--color-hero-accent); }
.hero-nav strong { display: block; margin-bottom: .25rem; font-size: 1.1rem; }
.hero-nav span { display: block; color: var(--color-hero-soft); font-size: .875rem; line-height: 1.6; }
@media (min-width: 576px) { .hero-nav ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .hero-nav ul { grid-template-columns: repeat(4, 1fr); } }
.hero-notice { max-width: 44rem; margin: 1.75rem 0 0; color: var(--color-hero-muted); font-size: var(--font-size-min); }
.hero-notice a { margin-left: .75rem; color: var(--color-hero-text); white-space: nowrap; }

/* 作者介紹：多位作者時的錨點膠囊 */
/* 作者選單：白底膠囊按鈕＝頭像＋名字＋職稱，一看就知道可以點；滑過變金底 */
.hero-authors ul { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hero-authors a { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .375rem 1.25rem .375rem .375rem; border-radius: var(--radius-pill); color: var(--color-hero-button-text); text-decoration: none; box-shadow: 0 .25rem .75rem var(--color-hero-button-shadow); transition: background-color .15s ease, transform .15s ease; }
/* 按鈕底色與該作者 section 一致：依序淺藍／淺金交錯（作者選單與作者區塊同一順序） */
.hero-authors li:nth-child(odd) a { background: var(--color-author-bg-odd); }
.hero-authors li:nth-child(even) a { background: var(--color-author-bg-even); }
.hero-authors li a:hover { background: var(--color-hero-accent); transform: translateY(-2px); }
.hero-authors img, .hero-authors .author-initial { grid-row: 1 / 3; width: var(--size-hero-author-avatar); height: var(--size-hero-author-avatar); border-radius: 50%; object-fit: cover; font-size: 1.1rem; }
.hero-authors strong { align-self: end; font-size: 1rem; line-height: 1.3; }
.hero-authors span:not(.author-initial) { align-self: start; font-size: .875rem; font-weight: var(--font-weight-regular); line-height: 1.3; color: var(--color-ci-1); }

/* 一覽選單（README 第 3.7 節）：列出分類或關鍵字的膠囊；項目多時在固定高度內捲動，hero 不會被撐高 */
.hero-index ul { display: flex; flex-wrap: wrap; gap: .5rem; max-height: var(--size-hero-index-height); margin: 1.5rem 0 0; padding: 0; overflow-y: auto; list-style: none; }
.hero-index a, .hero-index span { display: block; padding: .375rem 1rem; border-radius: var(--radius-pill); font-size: .875rem; line-height: 1.5; }
.hero-index a { background: var(--color-hero-card-bg); color: var(--color-hero-text); text-decoration: none; transition: background-color .15s ease; }
.hero-index a:hover { background: var(--color-hero-card-hover-bg); }
.hero-index a.active { background: var(--color-hero-accent); color: var(--color-hero-button-text); font-weight: var(--font-weight-bold); }
.hero-index span { color: var(--color-hero-muted); }

/* ---- 卡片 ---- */
.card-list img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.card-list article { box-shadow: var(--bs-box-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.card-list article:hover { transform: translateY(-3px); box-shadow: var(--bs-box-shadow); }
/* 標題與內文行高相同，合計固定 5 行：標題 1–2 行＋內文 3 行，或標題 3 行＋內文 2 行，所有卡片高度一致（README 第 8.3 節） */
.card-summary { height: calc(var(--size-card-line) * 5 + var(--size-card-summary-gap)); overflow: hidden; }
.card-summary h3, .card-summary p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; line-height: var(--size-card-line); }
.card-summary h3 { margin-bottom: var(--size-card-summary-gap); font-size: var(--font-size-card-title); font-weight: var(--font-weight-bold); }
.card-summary p { margin-bottom: 0; font-size: var(--font-size-card-text); }
.card-summary-compact p { -webkit-line-clamp: 2; line-clamp: 2; }
.card-list h3 a { color: var(--color-ci-1); }
.card-list h3 a:hover { color: var(--color-ci-1-hover); }
.card-list .card-body { padding: .25rem 1rem 1rem; }
/* 編輯團隊每位作者只列一排：平板 3 欄時隱藏第 4 篇 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .author-profile .card-list .col:nth-child(4) { display: none; }
}

/* ---- 列表分頁導航 ---- */
.list-pagination { margin-top: 2.5rem; }
.list-pagination .pagination {
  --bs-pagination-color: var(--color-ci-1);
  --bs-pagination-hover-color: var(--color-ci-1-hover);
  --bs-pagination-focus-color: var(--color-ci-1-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--color-ci-1-rgb), .2);
  --bs-pagination-active-bg: var(--color-ci-1);
  --bs-pagination-active-border-color: var(--color-ci-1);
  gap: .25rem 0;
}

/* ---- 首頁主欄區塊 ---- */
.home-section + .home-section { margin-top: 3rem; }

/* ---- 隨機精選（首頁「最新文章」與分類頁第 1 頁，各 1 篇、圖左文右；README 第 8.2、8.3 節） ---- */
.featured { margin: 0; padding: 0; list-style: none; }
.featured li { display: grid; gap: .75rem 1rem; align-content: start; }
.featured img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius-base); }
.featured .badge { margin-bottom: .5rem; }
.featured h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: .5rem; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: var(--font-weight-bold); line-height: 1.45; }
.featured h3 a { color: var(--color-ci-1); text-decoration: none; }
.featured h3 a:hover { color: var(--color-ci-1-hover); }
.featured p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: .5rem; color: var(--bs-secondary-color); font-size: var(--font-size-card-text); line-height: 1.7; }
.featured .featured-meta { display: flex; flex-wrap: wrap; margin-bottom: 0; font-size: var(--font-size-min); white-space: nowrap; }
.featured .featured-meta span::before { content: "・"; }
@media (min-width: 768px) {
  .featured li { grid-template-columns: 11fr 9fr; gap: 1.5rem; align-items: center; }
}
/* 與下方內容之間留距離並加分隔線：首頁與分類頁相同 */
.featured { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--bs-border-color); }

/* ---- 通用側欄（首頁、分類頁右側，桌機固定；templates/partials/side-latest.js） ---- */
.page-aside { top: calc(var(--size-header-height) + 16px); z-index: 1; }
@media (min-width: 992px) {
  .page-aside { max-height: calc(100vh - var(--size-header-height) - 32px); overflow-y: auto; scrollbar-width: thin; }
}
.side-latest h2 { margin-bottom: 0; padding-bottom: .5rem; border-bottom: 2px solid var(--bs-emphasis-color); font-size: var(--font-size-card-title); font-weight: var(--font-weight-bold); letter-spacing: .08em; }
.side-latest ol { margin: 0; padding: 0; list-style: none; }
.side-latest li + li { border-top: 1px solid var(--bs-border-color); }
.side-latest a { display: grid; grid-template-columns: 1fr var(--size-side-thumb); gap: .75rem; align-items: start; padding-block: 1rem; color: inherit; text-decoration: none; }
.side-latest h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: .375rem; font-size: .9375rem; font-weight: var(--font-weight-bold); line-height: 1.5; }
.side-latest a:hover h3 { color: var(--color-ci-1); }
.side-latest time { color: var(--bs-secondary-color); font-size: var(--font-size-min); }
.side-latest img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: var(--radius-base); }

/* ---- 文章頁 ---- */
/* 側欄依序：搜尋 → 資料卡 → 目錄 → 相關文章（桌機），區塊間距統一由 gap 控制 */
.article-aside { display: flex; flex-direction: column; gap: 1rem; top: calc(var(--size-header-height) + 16px); z-index: 1; }
/* 桌機側欄固定時，螢幕較矮也要看得到整個目錄：超出畫面的部分在側欄內捲動；padding 讓輸入框的焦點外框不被裁掉 */
@media (min-width: 992px) {
  .article-aside { max-height: calc(100vh - var(--size-header-height) - 32px); overflow-y: auto; padding: .25rem; }
}
.toc .nav-link, .toc-panel .nav-link { color: var(--bs-body-color); padding: .35rem .75rem; }
.toc .nav-link.active, .toc-panel .nav-link.active { color: var(--color-white); }
/* 側欄的相關文章：標題下一行放日期 */
.article-aside .related .list-group-item { display: flex; flex-direction: column; gap: .125rem; padding: .6rem .75rem; font-size: .9375rem; line-height: 1.5; }

/* ---- 站內搜尋（文章頁側欄、搜尋頁 hero 共用 .search-form） ---- */
.search-form .form-control:focus { border-color: var(--color-ci-1); box-shadow: 0 0 0 .2rem rgba(var(--color-ci-1-rgb), .2); }
.hero .search-form { max-width: var(--size-search-max-width); margin-top: 1.75rem; }
.hero .search-form .btn { margin-top: 0; padding-inline: 1.5rem; }
.search-status { margin-bottom: 1.5rem; font-weight: var(--font-weight-bold); }

/* 手機：目錄捲出畫面後，固定在畫面右側中間的「目錄」按鈕，點擊從右側滑出目錄 */
.toc-toggle { position: fixed; top: 50%; right: 0; z-index: 1030; transform: translateY(-50%); writing-mode: vertical-rl; letter-spacing: .2em; padding: .75rem .5rem; border-radius: .5rem 0 0 .5rem; box-shadow: var(--bs-box-shadow); }
.toc-panel { --bs-offcanvas-width: min(320px, 85vw); }

/* ---- 作者介紹 ---- */
/* 每位作者一個全寬 section，底色滿版、淺藍／淺金交錯；只算 .author-profile 的奇偶（:nth-child(… of …)），不受 hero 等其他 section 影響；區塊內卡片白底 */
.author-profile { padding-block: 3rem; background: var(--color-author-bg-odd); }
.author-profile:nth-child(even of .author-profile) { background: var(--color-author-bg-even); }
.hero + .author-profile { margin-top: 2rem; }
.author-profile .card { background: var(--color-white); }
.author-avatar { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: var(--bs-box-shadow-sm); }
.author-initial { display: grid; place-items: center; background: var(--bs-primary); color: var(--color-white); font-size: 3rem; font-weight: var(--font-weight-bold); }
.author-stats strong, .author-stats span { display: block; }
.author-timeline { list-style: none; padding-left: 1.25rem; border-left: 2px solid var(--bs-border-color); }
.author-timeline li { position: relative; padding-bottom: 1rem; }
.author-timeline li::before { content: ""; position: absolute; left: calc(-1.25rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-primary); }
.author-timeline .badge { margin-right: .5rem; }

/* 內文（Markdown 轉出，不加 class，用 .article-body 選取） */
.article-body { font-size: 1.0625rem; }
.article-body h2 { font-size: 1.4rem; font-weight: var(--font-weight-bold); line-height: 1.45; margin: 2.5rem 0 1rem; padding-left: .75rem; border-left: 4px solid var(--bs-primary); }
.article-body > section:first-child h2 { margin-top: 0; }
.article-body h3 { font-size: 1.15rem; font-weight: var(--font-weight-bold); margin: 1.75rem 0 .75rem; }
.article-body p { margin-bottom: 1rem; }
.article-body figure { margin: 1.5rem 0; }
.article-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.article-body figcaption { margin-top: .5rem; font-size: var(--font-size-min); color: var(--bs-secondary-color); }
.article-body time { font-size: .875rem; } /* 資料來源的日期：內文字級較大，固定 14px 才與相關文章的日期相同 */
.article-body .table-responsive { margin: 1rem 0 1.5rem; }
.article-body table { font-size: .875rem; line-height: 1.65; min-width: 520px; margin-bottom: 0; }
.article-body th { background: var(--bs-tertiary-bg); white-space: nowrap; }
.article-body blockquote { margin: 1rem 0; padding: .25rem 1rem; border-left: 3px solid var(--bs-border-color); color: var(--bs-secondary-color); }