/* ==========================================================================
 * 精密螺絲百科 - 全站樣式 main.css
 * 日夜主題 / Breathe Clamp / 去邊框 / 左對齊 / 最小間距
 * ========================================================================== */

/* ---------- 主題變數 ---------- */
:root {
  --c-bg:        #f6f8fb;
  --c-bg-soft:   #ffffff;
  --c-bg-sunken: #eef2f7;
  --c-text:      #1a2733;
  --c-text-soft: #4a5a6a;
  --c-text-mute: #8595a6;
  --c-primary:   #0f4c81;
  --c-primary-soft: #e3edf6;
  --c-accent:    #c8553d;
  --c-border:    #e2e8f0;
  --c-shadow:    0 1px 2px rgba(15,40,80,.04), 0 4px 16px rgba(15,40,80,.06);
  --c-code-bg:   #f1f5f9;

  /* Breathe Clamp 流體排版 */
  --sp-1:   clamp(4px,  .4vw,  6px);
  --sp-2:   clamp(8px,  .8vw,  12px);
  --sp-3:   clamp(12px, 1.2vw, 18px);
  --sp-4:   clamp(18px, 1.8vw, 28px);
  --sp-5:   clamp(28px, 2.8vw, 44px);
  --sp-6:   clamp(40px, 4vw,   64px);

  --fs-xs:   clamp(11px, .85vw, 12px);
  --fs-sm:   clamp(12px, .92vw, 13px);
  --fs-base: clamp(14px, 1.05vw, 15px);
  --fs-md:   clamp(15px, 1.15vw, 17px);
  --fs-lg:   clamp(18px, 1.5vw, 22px);
  --fs-xl:   clamp(22px, 2.2vw, 30px);
  --fs-hero: clamp(28px, 3.4vw, 44px);

  --max-w: 1280px;
  --radius: 6px;
  --header-h: 56px;
}

html[data-theme="dark"] {
  --c-bg:        #0e141c;
  --c-bg-soft:   #16202c;
  --c-bg-sunken: #0a0f16;
  --c-text:      #e6edf3;
  --c-text-soft: #a9b8c6;
  --c-text-mute: #6b7d8f;
  --c-primary:   #58a6ff;
  --c-primary-soft: #1c2d42;
  --c-accent:    #ff7a5c;
  --c-border:    #23303d;
  --c-shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
  --c-code-bg:   #1c2530;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }

/* ---------- Layout ---------- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-3); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, #eaf3fb 0%, #d6e8f7 50%, #c5ddf2 100%);
  border-bottom: 1px solid rgba(15,76,129,.12);
  box-shadow: 0 1px 6px rgba(15,76,129,.06);
}
html[data-theme="dark"] .site-header {
  background: linear-gradient(135deg, #16283d 0%, #1a3550 50%, #1e3d5c 100%);
  border-bottom-color: rgba(120,180,230,.15);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-md);
  color: var(--c-text); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 4px;
  background: var(--c-primary); color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  flex: 0 0 auto;
}
.brand small { color: var(--c-text-mute); font-weight: 400; font-size: var(--fs-xs); }

/* 品牌兩行排版：中文主名在上、英文副標在第二行，避免佔用水平空間導致選單換行 */
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  min-width: 0;
}
.brand-text small { line-height: 1.3; white-space: nowrap; }

/* 頂部導航 */
.main-nav { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 var(--sp-2); height: var(--header-h);
  color: #0a1a2c; font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: color .15s;
}
.nav-link:hover, .nav-item:hover .nav-link {
  color: var(--c-primary); text-decoration: none;
}
.nav-item:hover .nav-link { background: var(--c-primary-soft); }

/* MegaMenu 3 層面板 */
.mega-panel {
  position: absolute; top: 100%; left: 0;
  min-width: 640px; max-width: 880px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--c-shadow);
  padding: var(--sp-3);
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.nav-item:hover .mega-panel { display: grid; }
.mega-group-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: var(--sp-1);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}
.mega-group a {
  display: block;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 4px;
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.mega-group a:hover {
  background: var(--c-primary-soft);
  text-decoration: none;
  color: var(--c-primary);
}
.mega-group a .desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  margin-top: 2px;
  line-height: 1.3;
}

/* Header 右側工具 */
.header-tools { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.search-box {
  position: relative;
}
.search-box input {
  width: 220px; padding: 6px 10px 6px 30px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-sm);
  outline: none;
}
.search-box input:focus { border-color: var(--c-primary); }
.search-box::before {
  content: "🔍"; position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%); font-size: 12px; opacity: .6;
}
.theme-toggle {
  width: 32px; height: 32px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 16px;
}
.theme-toggle:hover { background: var(--c-bg-sunken); }

/* 搜尋結果下拉 */
.search-results {
  position: absolute; top: 100%; right: 0;
  width: 360px; max-height: 400px; overflow-y: auto;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  box-shadow: var(--c-shadow);
  margin-top: 4px;
  display: none;
  z-index: 200;
}
.search-results.active { display: block; }
.search-results a {
  display: block; padding: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.search-results a:hover { background: var(--c-primary-soft); text-decoration: none; }
.search-results .res-cat { font-size: var(--fs-xs); color: var(--c-text-mute); }

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar {
  background: var(--c-bg-sunken);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
}
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-1) 0;
  color: var(--c-text-mute);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--c-text-soft); }
.breadcrumb .sep { color: var(--c-text-mute); }
.breadcrumb .current { color: var(--c-text); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(70px, 9vw, 120px) 0;
  min-height: clamp(300px, 34vw, 460px);
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(8,30,55,.08) 0%, rgba(8,30,55,.04) 55%, rgba(8,30,55,.18) 100%),
    url("../assets/hero_bg_wide_panorama.png") center/cover no-repeat;
  color: #fff;
}
html[data-theme="dark"] .hero {
  background:
    linear-gradient(180deg, rgba(5,18,32,.18) 0%, rgba(5,18,32,.10) 55%, rgba(5,18,32,.30) 100%),
    url("../assets/hero_bg_wide_panorama.png") center/cover no-repeat;
}
.hero-text-card {
  max-width: 620px;
  background: rgba(8,30,55,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 12px 40px rgba(8,30,55,.25);
}
.hero-text-card h1 { margin-top: 0; }
.hero-text-card p { margin-bottom: 0; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.hero p {
  font-size: var(--fs-md);
  opacity: .9;
  max-width: 720px;
}
.hero-stats {
  display: flex; gap: var(--sp-5);
  margin-top: var(--sp-4); flex-wrap: wrap;
}
.hero-stat .num { font-size: var(--fs-xl); font-weight: 800; }
.hero-stat .lbl { font-size: var(--fs-sm); opacity: .8; }

/* ---------- Main 雙欄 ---------- */
.page-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0 var(--sp-6);
}

/* Sidebar */
.sidebar {
  position: sticky; top: calc(var(--header-h) + var(--sp-3));
  align-self: start;
}
.sidebar h3 {
  font-size: var(--fs-xs); color: var(--c-text-mute);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: var(--sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}
.sidebar nav a {
  display: block; padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 4px;
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
}
.sidebar nav a:hover { background: var(--c-primary-soft); text-decoration: none; }
.sidebar nav a.active {
  background: var(--c-primary); color: #fff; font-weight: 600;
}
.sidebar-group { margin-bottom: var(--sp-3); }

/* Content */
.content { min-width: 0; }
.content h1.page-title {
  font-size: var(--fs-xl); font-weight: 800;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-primary);
}
.content h2 {
  font-size: var(--fs-lg); font-weight: 700;
  margin: var(--sp-4) 0 var(--sp-2);
}
.content h3 {
  font-size: var(--fs-md); font-weight: 700;
  margin: var(--sp-3) 0 var(--sp-1);
}
.content p { margin-bottom: var(--sp-2); color: var(--c-text-soft); }
.content ul, .content ol { margin: 0 0 var(--sp-2) var(--sp-4); color: var(--c-text-soft); }
.content li { margin-bottom: 4px; }

/* 卡片網格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.card {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  text-decoration: none;
}
.card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: var(--c-bg-sunken);
}
.card-body { padding: var(--sp-3); flex: 1; display: flex; flex-direction: column; }
.card h3 {
  font-size: var(--fs-md); margin: 0 0 6px;
  color: var(--c-text);
}
.card p { font-size: var(--fs-sm); color: var(--c-text-mute); margin: 0; flex: 1; }
.card .tag {
  display: inline-block;
  font-size: 11px; padding: 1px 6px;
  background: var(--c-primary-soft); color: var(--c-primary);
  border-radius: 3px; margin-bottom: 6px;
  align-self: flex-start;
}

/* 資訊表 */
.info-table {
  width: 100%; border-collapse: collapse;
  margin: var(--sp-2) 0; font-size: var(--fs-sm);
}
.info-table th, .info-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.info-table th {
  background: var(--c-bg-sunken);
  font-weight: 600; color: var(--c-text);
  white-space: nowrap;
}
.info-table td { color: var(--c-text-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-bg-sunken);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-4);
}
.footer-grid h4 {
  font-size: var(--fs-sm); color: var(--c-text);
  margin-bottom: var(--sp-2); font-weight: 700;
}
.footer-grid a {
  display: block; color: var(--c-text-mute);
  padding: 2px 0; font-size: var(--fs-sm);
}
.footer-bottom {
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2);
}

/* ---------- 響應式 ---------- */
@media (max-width: 960px) {
  .page-body { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .search-box input { width: 140px; }
  .mega-panel { min-width: 100vw; left: -10px; }
  .main-nav { display: none; }
}
@media (max-width: 600px) {
  .hero-stats { gap: var(--sp-3); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * 全站百科目錄 TOC
 * 1) Header MegaMenu（固定於 Header 下方的全寬 dropdown）
 * 2) 可收合 TOC 樹（Sidebar / 首頁 topdown）
 * ========================================================================== */

/* ---------- TOC MegaMenu（Header dropdown） ---------- */
.has-toc { position: static; }
.toc-mega {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 150;
  max-height: calc(100vh - var(--header-h) - 12px);
  overflow-y: auto;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--c-shadow);
  padding: var(--sp-4) var(--sp-3);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.has-toc:hover .toc-mega { display: grid; }
.toc-mega-col { min-width: 0; }
.toc-mega-part {
  display: block;
  font-weight: 700;
  color: var(--c-primary);
  font-size: var(--fs-md);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-2);
}
.toc-mega-part:hover { text-decoration: none; color: var(--c-accent); }
.toc-mega-part small { color: var(--c-text-mute); font-weight: 400; font-size: var(--fs-xs); }
.toc-mega-item {
  padding: 4px 0;
  border-bottom: 1px dashed var(--c-border);
}
.toc-mega-title { display: inline-block; color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); }
.toc-mega-title b { color: var(--c-primary); font-weight: 700; }
.toc-mega-title:hover { color: var(--c-primary); text-decoration: none; }
.toc-mega-subs {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  line-height: 1.6;
  margin-top: 2px;
}
.toc-mega-subs a { color: var(--c-text-mute); }
.toc-mega-subs a:hover { color: var(--c-primary); }

/* ---------- TOC 樹（Sidebar / 首頁） ---------- */
.toc-tree { font-size: var(--fs-sm); }
.toc-part-head, .toc-item-head {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 3px;
  border-radius: 4px;
  user-select: none;
}
.toc-part-head:hover, .toc-item-head:hover { background: var(--c-primary-soft); }
.toc-part-head > a { font-weight: 700; color: var(--c-primary); }
.toc-part-head a, .toc-item-head a { color: var(--c-text); }
.toc-part-head a:hover, .toc-item-head a:hover { text-decoration: none; }
.toc-part-head small { color: var(--c-text-mute); font-weight: 400; font-size: var(--fs-xs); }
.toc-item-head > a.current,
.toc-item-body a.current {
  background: var(--c-primary);
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
}
.toc-arrow {
  display: inline-block;
  transition: transform .15s;
  font-size: 10px;
  color: var(--c-text-mute);
  width: 12px;
  flex: 0 0 auto;
}
.toc-part-head.open .toc-arrow,
.toc-item-head.open .toc-arrow { transform: rotate(90deg); }
.toc-part-body, .toc-item-body { display: none; }
.toc-part-body.open, .toc-item-body.open { display: block; }
.toc-part-body {
  margin-left: 10px;
  border-left: 1px solid var(--c-border);
  padding-left: 10px;
}
.toc-item { margin-bottom: 2px; }
.toc-item-body {
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px dashed var(--c-border);
}
.toc-item-body a {
  display: block;
  padding: 2px 4px;
  color: var(--c-text-soft);
  border-radius: 3px;
}
.toc-item-body a:hover { color: var(--c-primary); text-decoration: none; }
.toc-more { display: inline-block; font-size: var(--fs-sm); color: var(--c-primary); margin-top: 6px; }
.toc-more:hover { text-decoration: underline; }

/* Sidebar 內 TOC 標題 */
#tocSidebar { margin-bottom: var(--sp-3); }
#tocSidebar h3 {
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}

/* 首頁 TOC 區塊標題 */
.toc-section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-3);
  border-left: 4px solid var(--c-primary);
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.toc-section-title .toc-more { margin-top: 0; font-weight: 400; }

@media (max-width: 960px) {
  .toc-mega {
    grid-template-columns: 1fr;
    max-height: 70vh;
    position: static;
    box-shadow: none;
  }
}

/* ==========================================================================
 * 吃螺絲 Blog（首頁頁首 → dropdown，2 欄分組）
 * ========================================================================== */
.blog {
  position: relative;
  margin: var(--sp-5) 0 var(--sp-3);
}
.blog-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #0a3559 0%, #1c5a94 55%, #3d83c2 100%);
  box-shadow: var(--c-shadow);
}
.blog-trigger:hover { filter: brightness(1.06); }
.blog-trigger-title { font-size: var(--fs-md); font-weight: 800; }
.blog-trigger-count { font-size: var(--fs-xs); opacity: .85; margin-left: auto; }
.blog-trigger .blog-arrow { transition: transform .18s; font-size: 14px; }
.blog-trigger.open .blog-arrow { transform: rotate(180deg); }

.blog-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #dcebfa 0%, #eef6fd 45%, #f7fbff 75%, #ffffff 100%);
  box-shadow: var(--c-shadow);
}
.blog-panel.open { display: grid; }

.blog-col { min-width: 0; }
.blog-col-head {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.blog-col-list { max-height: 380px; overflow-y: auto; }
.blog-row {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  border-bottom: 1px dashed var(--c-border);
}
.blog-row:hover { background: #fff; text-decoration: none; }
.blog-row-name { display: block; font-weight: 600; color: var(--c-text); }
.blog-row-desc { display: block; font-size: var(--fs-xs); color: var(--c-text-mute); margin-top: 1px; }

.blog-pager {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: 4px;
}
.pg-btn {
  padding: 7px 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: #fff;
  color: var(--c-text);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background .15s, border-color .15s;
}
.pg-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pg-info { font-size: var(--fs-sm); color: var(--c-text-mute); }

@media (max-width: 600px) {
  .blog-panel { grid-template-columns: 1fr; }
  .blog-trigger-count { display: none; }
}

/* ---------- 主題知識區 Accordion ---------- */
.kb-acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.kb-acc {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kb-acc-head {
  padding: var(--sp-2) var(--sp-3);
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.kb-acc-head::-webkit-details-marker { display: none; }
.kb-acc-head::after {
  content: "▾";
  margin-left: auto;
  transition: transform .2s;
}
.kb-acc:not([open]) .kb-acc-head::after { transform: rotate(-90deg); }
.kb-acc-body {
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 6px 4px;
  border-bottom: 1px dashed var(--c-border);
  font-size: var(--fs-sm);
}
.kb-row:last-child { border-bottom: none; }
.kb-row:hover { text-decoration: none; background: var(--c-primary-soft); border-radius: 4px; }
.kb-row-name { color: var(--c-text); font-weight: 500; }
.kb-row-desc { color: var(--c-text-mute); font-size: var(--fs-xs); text-align: right; flex-shrink: 0; }
@media (max-width: 768px) {
  .kb-acc-grid { grid-template-columns: 1fr; }
  .kb-row { flex-direction: column; gap: 2px; }
  .kb-row-desc { text-align: left; }
}

/* ---------- 主題知識區 精選卡片（4 欄小卡片） ---------- */
.article-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  text-decoration: none;
}
.article-card-img {
  width: 100%;
  height: 110px;
}
.article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card-body {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.article-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ac-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  background: #1a7f4e;
  color: #fff;
  border-radius: 3px;
  font-weight: 600;
}
html[data-theme="dark"] .ac-tag { background: #2ea86f; }
.ac-date { display: none; }
.ac-readmore { display: none; }
.article-card-desc {
  display: none;
}
.article-card-hash {
  display: none;
}
@media (max-width: 900px) {
  .article-card-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .article-card-list { grid-template-columns: 1fr; }
  .article-card-img { height: 140px; }
}