/* static/css/style.css - 最终修正版 */

/* --- 1. 变量定义 --- */
:root {
  /* 亮色模式 */
  --bg-primary: #f7f8fa;
  --bg-secondary: #ffffff;
  --text-primary: #2c3e50;
  --text-secondary: #5a6f82;
  --border-color: #eaecef;
  --accent-primary: #3498db;
  --accent-hover: #2980b9;
  --sidebar-width: 280px;
  --content-max-width: 700px;
  --spacing-unit: 1rem;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

html.dark-mode {
  /* 暗色模式 */
  --bg-primary: #1c2833;
  --bg-secondary: #273746;
  --text-primary: #eaecef;
  --text-secondary: #aabbcb;
  --border-color: #3c4f60;
  --accent-primary: #5dade2;
  --accent-hover: #85c1e9;
}

/* --- 2. 核心布局 (使用 CSS Grid) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  line-height: 1.65;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  display: grid;
  height: 100vh;
  overflow: hidden;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "sidebar main"
    "footer  footer";
}

.site-wrapper,
.site-content-wrapper {
  display: contents;
}

.sidebar {
  grid-area: sidebar;
  overflow-y: auto;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
}

.main-content {
  grid-area: main;
  overflow-y: auto;
  padding: calc(var(--spacing-unit) * 1.5);
}

.site-footer {
  grid-area: footer;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  z-index: 10;
}

/* --- 3. 侧边栏组件样式 --- */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.sidebar-header {
  text-align: left;
  margin-bottom: 1rem;
}
.sidebar-brand {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.sidebar-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}
.sidebar-brand h1 {
  margin: 0;
  font-size: 1.5rem;
}
.sidebar-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}
/*.sidebar-social { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; font-size: 1.2rem; }*/
.sidebar-social a {
  color: var(--text-secondary);
  transition: color 0.2s;
}
.sidebar-social a:hover {
  color: var(--accent-primary);
}
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--text-primary);
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s;
  font-weight: 500;
}
.sidebar-nav a:hover,
.sidebar-nav li.active a {
  background-color: var(--accent-primary);
  color: white;
}
.sidebar-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.language-switcher a,
.theme-switcher button {
  background: none;
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
}
.theme-switcher button {
  font-size: 1rem;
}
.theme-switcher button:hover,
.language-switcher a:hover {
  background-color: var(--bg-primary);
}

/* 容器布局样式 */
.sidebar-social {
  display: flex;
  justify-content: flex-start; /* 实现左对齐 */
  gap: 1rem; /* 项目之间的间距 */
  margin-bottom: 1rem;
}

/* 图标本身的大小和颜色样式 */
.sidebar-social a svg {
  width: 24px; /* 或者 1.5rem, 根据需要调整 */
  height: 24px; /* 保持与 width 一致 */
  stroke: var(--text-primary); /* 设置图标颜色 */
  transition: stroke 0.2s ease-in-out;
}

/* 鼠标悬停时的效果 */
.sidebar-social a:hover svg {
  stroke: var(--text-secondary); /* 鼠标悬停时变为主题色 */
}

/* --- 4. 主内容区组件样式 --- */

/* 
 * 核心修正：
 * 使用逗号 , 分隔选择器，让同一套样式规则
 * 同时应用于文章正文 (.post-content a) 
 * 和所有摘要区域 (.post-summary a)。
 */
.post-content a,
.post-summary a {
  color: var(--accent-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-primary);
  transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  padding-bottom: 1px;
}

/* 鼠标悬停效果也需要同时应用 */
.post-content a:hover,
.post-summary a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* 4a. 【新规则】列表页容器：靠左对齐 */
/* 这将影响 index.html, list.html, terms.html */
.post-list,
.section-container {
  max-width: var(--content-max-width);
  margin-left: 0; /* 核心修改：移除 auto，实现左对齐 */
  margin-right: auto; /* 保留，防止内容在窄屏下溢出 */
}

/* 4b. 【新规则】单篇文章页容器：保持居中 */
/* 这将确保您的文章页面仍然是居中的，以获得最佳阅读体验 */
.post-single {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* 4b. 【关键修正】首页 (index.html) & 列表页 (list.html) 文章列表样式 */

/* 统一文章列表容器 (div.post-list 和 ul.section-list) */
.post-list,
.section-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  list-style: none; /* 为 ul 移除默认的列表符号 */
  padding: 0; /* 为 ul 移除默认的内边距 */
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * 这是针对 index.html 的文章卡片样式
 * .post-card 是一个 <article>，内部有一个 .post-card-content 的 div
 * 所以对它使用 display: flex 是正确的
*/
.post-card {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
.post-card-content {
  flex: 1;
}

/*
 * 这是针对 list.html 的文章列表项样式
 * .section-item 是一个 <li>，它的子元素 h2, p, p 应该垂直排列
 * 所以我们【不能】对它使用 display: flex
 * 它只需要作为普通的块级元素存在即可，其样式由内部元素决定
*/
.section-item {
  /* 无需特殊样式，保持默认的 block 布局即可 */
}

/* 统一文章标题样式 */
.post-title,
.section-post-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.post-title a,
.section-post-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s;
}
.post-title a:hover,
.section-post-title a:hover {
  color: var(--accent-primary);
}

/* 统一文章元信息和摘要样式 (这两个在模板中类名一致，可以直接共用) */
.post-meta {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.post-meta a {
  color: var(--text-secondary);
  text-decoration: none;
}
.post-meta a:hover {
  text-decoration: underline;
  color: var(--accent-primary);
}
.post-summary {
  color: var(--text-secondary);
}

/* 4c. 分类/标签列表页 (terms.html) 样式 (保持不变) */
.section-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.section-header h1 {
  margin: 0;
}
.taxonomy-description {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 1rem;
}

.terms-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.terms-item a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
.terms-item a:hover {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.terms-count {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.8em;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
.terms-item a:hover .terms-count {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 4d. 分页、页脚等通用组件 */
.pagination {
  margin-top: 3rem;
}
.pagination-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  gap: 0.5rem;
}
.pagination-link {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s;
}
.pagination-link:hover,
.pagination-link.is-current {
  background-color: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.site-footer {
  padding: calc(var(--spacing-unit) * 1);
  text-align: center;
  font-size: 0.8em;
  color: var(--text-secondary);
}
.site-footer p {
  margin-block-start: 0.25rem;
  margin-block-end: 0.25rem;
}
.site-footer a {
  color: var(--accent-primary);
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* with-toc 容器本身，让它 100% 填满它的父容器 (也就是上面的 main) */
.single-page-wrapper.with-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px; /* 左边内容，右边280px目录 */
  gap: 2rem;
  height: 100%;
  overflow-y: auto; /* ✨ 关键修改：允许父容器自己垂直滚动 */

  /* ↓ 把隐藏滚动条的样式从 .post-single 移到这里来 ↓ */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.single-page-wrapper.with-toc::-webkit-scrollbar {
  display: none;
}

/* 3. 让目录“粘”在屏幕上 */
.single-page-wrapper.with-toc .toc-container {
  width: 280px; /* 保持你原来的宽度 */
  position: sticky;
  top: 0rem; /* 粘在距离视口顶部 2rem 的位置，可以根据你的 header 高度调整 */
  /* 如果目录本身内容很长，让它自己滚动 */
  max-height: calc(100vh - 10rem); /* 限制最大高度，避免超出屏幕 */
  /* --- 新增/修改 --- */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出容器，而不是让容器滚动 */
  /* ...其他样式... */
  background-color: var(--bg-secondary);
  border-radius: 8px;
}

/* 4. （可选）如果你还想隐藏目录的滚动条 */
.single-page-wrapper.with-toc .toc-container::-webkit-scrollbar {
  display: none;
}
.single-page-wrapper.with-toc .toc-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ✨ 新增或修改 */
.toc-content {
  width: 100%; /* 撑满父容器 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 很重要，配合子元素的滚动 */
}

.toc-title {
  padding: 1rem 1rem 0.5rem 1rem;
  margin: 0;
  font-weight: bold;
  flex-shrink: 0;
}

.toc-content #TableOfContents {
  padding: 0 1rem 1rem 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* ✨ 新增或修改 */

  /* ...你已有的样式... */
  flex-grow: 1; /* ✨ 关键：占据所有剩余的垂直空间 */
  overflow-y: auto; /* ✨ 关键：让它自己滚动 */
  min-height: 0; /* ✨ Flexbox 滚动区域的必备技巧 */
}
.toc-content #TableOfContents::-webkit-scrollbar {
  display: none;
}

/* --- 请用下面的代码块替换你现有的 li a 规则 --- */

.toc-content #TableOfContents li a {
  display: block;
  /* 修改：增加左右 padding，为左侧高亮条留出空间 */
  padding: 6px 12px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text-secondary);
  /* 修改：过渡效果更平滑，并为边框颜色添加过渡 */
  transition:
    color 0.2s ease-in-out,
    border-left-color 0.2s ease-in-out;
  /* 新增：默认状态下，左边框是透明的，占位用 */
  border-left: 2px solid transparent;
}

.toc-content #TableOfContents li a:hover {
  color: var(--accent-primary);
}

/* --- 请将下面的新规则添加到上面代码的后面 --- */

/* 新增：激活链接（当前阅读位置）的高亮样式 */
.toc-content #TableOfContents li a.active-toc-link {
  color: var(--accent-primary);
  font-weight: 600; /* 字体加粗以示强调 */
  border-left-color: var(--accent-primary); /* 左侧高亮条显示出来 */
}

/* ... 你的其他 ul, li, a 样式 ... */

.toc-content #TableOfContents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-content #TableOfContents ul ul {
  padding-left: 1rem;
}
.toc-content #TableOfContents ul ul ul {
  padding-left: 1rem;
}

/* 4f. 主题切换器 UI */
#theme-toggle-dark {
  display: inline-block;
}
#theme-toggle-light {
  display: none;
}
html.dark-mode #theme-toggle-dark {
  display: none;
}
html.dark-mode #theme-toggle-light {
  display: inline-block;
}
/* 控制主题切换SVG图标的大小和颜色 */
.theme-switcher button svg {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  /* 这句最关键，让图标颜色跟着按钮文字颜色走 */
  stroke: currentColor;
}

/* ==========================================================================
   代码块容器美化 (为您的主题定制)
   ========================================================================== */

/* 1. 基础容器样式 (边距、圆角、字体等) */
.highlight {
  position: relative;
  margin: 1.5em 0; /* 上下外边距，与段落拉开距离 */
  border-radius: 8px; /* 圆角 */
  border: 1px solid var(--border-color); /* 使用您的边框颜色变量 */
  overflow: hidden; /* 确保内部内容不会溢出圆角 */
}

.highlight pre {
  margin: 0;
  padding: 1.5em; /* 充足的内边距 */
  overflow-x: auto; /* 代码过长时，出现水平滚动条 */
  font-size: 0.9em;
}

.highlight pre code {
  font-family: "Consolas", "Menlo", "Courier New", monospace;
  font-weight: 400; /* 解决字体过细问题，400是标准粗细 */
  line-height: 1.6;
}

/* ======================================================= */
/* ==         6. 代码块复制按钮 (新增)                  == */
/* ======================================================= */

/* 1. 让 .highlight 容器成为按钮定位的参照物 */
.highlight {
  position: relative;
}

/* 2. 复制按钮的基础样式 */
.clipboard-button {
  /* 定位在右上角 */
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 10;

  /* 外观与尺寸 */
  display: block;
  padding: 6px;
  font-size: 14px;
  line-height: 1; /* 确保SVG图标垂直居中 */
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  border-radius: 6px;
  cursor: pointer;

  /* 默认状态下半透明，减少干扰 */
  opacity: 0.6;
  transition:
    opacity 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

/* 3. 按钮内的 SVG 图标颜色，使用 currentColor 继承按钮的 color */
.clipboard-button svg {
  fill: var(--text-secondary); /* 使用次要文字颜色，更柔和 */
  transition: fill 0.2s ease-in-out;
}

/* 4. 交互效果：鼠标悬停或聚焦时 */
.clipboard-button:hover,
.clipboard-button:focus {
  opacity: 1;
  border-color: var(--accent-primary); /* 悬停时边框使用主题强调色 */
}

.clipboard-button:hover svg,
.clipboard-button:focus svg {
  fill: var(--accent-primary); /* 悬停时图标也使用主题强调色 */
}

/* 当用户鼠标悬停在整个代码块上时，也让按钮完全显示 */
.highlight:hover > .clipboard-button {
  opacity: 1;
}

/* ======================================================= */
/* ==       7. 滚动条美化 (优化对比度版本)              == */
/* ======================================================= */

/* --- 新增：为滚动条定义专属颜色变量 --- */
:root {
  /* 使用主文字颜色的半透明版本，确保清晰可见 */
  --scrollbar-thumb-color: rgba(44, 62, 80, 0.3); /* #2C3E50 at 30% opacity */
  --scrollbar-thumb-hover-color: rgba(
    44,
    62,
    80,
    0.5
  ); /* #2C3E50 at 50% opacity */
}

html.dark-mode {
  --scrollbar-thumb-color: rgba(
    234,
    236,
    239,
    0.3
  ); /* #EAECEF at 30% opacity */
  --scrollbar-thumb-hover-color: rgba(
    234,
    236,
    239,
    0.5
  ); /* #EAECEF at 50% opacity */
}

/* --- 7a. 全局滚动条样式 --- */

/* Firefox 兼容性 */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--bg-primary);
}

/* Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
  width: 10px; /* 稍微加宽一点，更容易点击 */
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道设为透明，更简洁 */
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 10px;
  border: 2px solid var(--bg-primary); /* 使用背景色作为边框，营造悬浮感 */
  background-clip: padding-box; /* 让背景色只在 padding 区域内绘制，边框颜色更纯粹 */
  transition: background-color 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
}

/* --- 8. 移动端适配 (Responsive Design) --- */
@media (max-width: 992px) {
  body {
    display: block;
    height: auto;
    overflow: visible;
  }
  .site-wrapper,
  .site-content-wrapper {
    display: block;
  }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-y: visible;
    height: auto;
  }
  .main-content {
    overflow-y: visible;
    height: auto;
    padding: 1.5rem;
  }

  .post-list,
  .section-container,
  .post-single {
    margin-left: 0;
    margin-right: 0;
  }

  /* 移动端，首页和列表页的卡片布局都变成上下结构 */
  .post-card {
    flex-direction: column-reverse; /* 图片在上，文字在下 */
  }
  .post-card-thumbnail {
    width: 100%;
  }

  .single-page-wrapper.with-toc {
    display: flex;
    flex-direction: column;
  }
  .toc-container {
    order: -1;
    position: static;
    max-height: none;
    width: 100%;
    margin-bottom: 2rem;
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
  }
}

@media (max-width: 400px) {
  .single-page-wrapper.with-toc {
    display: block;
    height: auto;
    overflow: visible;
  }
  .single-page-wrapper.with-toc .post-single {
    overflow-y: visible;
  }
  .toc-container {
    margin-bottom: 2rem;
  }
}

/* Footer 备案信息容器 - 核心 Flexbox 布局 */
.footer-beian-container {
  display: flex; /* 1. 启用 Flexbox 布局，使其子元素并排 */
  justify-content: center; /* 2. 在主轴（水平方向）上居中，实现“整体居中” */
  align-items: center; /* 3. 在交叉轴（垂直方向）上居中，确保所有内容垂直对齐 */
  gap: 1.5rem; /* 4. 在两个备案号之间创建 1.5 个字符的间距 */
  flex-wrap: wrap; /* 5. (推荐) 在屏幕很窄时，允许换行，防止溢出 */

  padding: 0.5rem 0;
}

/* 容器内所有链接的通用样式 */
.footer-beian-container a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-beian-container a:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* 公安备案链接的特殊样式 (为了对齐内部的图标和文字) */
.gongan-beian {
  /* 自身也是一个小型的 Flexbox 容器 */
  display: inline-flex;
  align-items: center;
  gap: 0.3rem; /* 图标和文字之间的间距 */
}

/* 公安备案图标的大小 */
.gongan-beian svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   5. 文章页脚 (分类与标签) - 精调优化版
   ========================================================================== */

/*
 * 整个页脚容器
 */
.post-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* [调整] 缩小“分类”行和“标签”行之间的垂直间距 */
}

/*
 * 每一行（比如整行的标签）的容器
 */
.post-tags {
  display: flex;
  align-items: center; /* [修改] 改为 center，这是解决垂直对齐问题的核心 */
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;  /* [调整] 同时缩小标签之间的垂直和水平间距 */
}

/*
 * "分类:" 和 "标签:" 这几个字的样式
 */
.meta-label {
  font-weight: 600;
  font-size: 0.9em;
  color: var(--text-primary);
  margin-right: 0.5rem; /* [调整] 稍微缩小一点右边距 */
  white-space: nowrap;
  /* [删除] 删除了 padding: 0.25rem 0; 
     因为 align-items: center 会自动处理对齐，
     这里的 padding 反而会干扰精确对齐。 */
}

/*
 * 核心：每个标签/分类链接的样式
 */
.post-tags a {
  display: inline-block;
  font-size: 0.85em;
  text-decoration: none;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  /* [修改] 给你加回了一点垂直 padding，否则文字会贴着边框，太丑。
     同时缩小了水平 padding，让胶囊更紧凑。*/
  padding: 0.15rem 0.7rem; 
  border-radius: 999px;
  transition: all 0.2s ease-in-out;
}

/*
 * 鼠标悬停时的效果
 */
.post-tags a:hover {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   6. 相关阅读区块 - 紧凑高密度版
   ========================================================================== */

/* 两种方式的通用容器样式 */
.related-posts-manual,
.related-posts-auto {
  margin-top: 3rem;      /* [调整] 减小与上方内容的距离 */
  padding-top: 1.5rem;   /* [调整] 减小内边距 */
  border-top: 1px solid var(--border-color);
}

.related-posts-manual h4,
.related-posts-auto h4 {
  margin-top: 0;
  margin-bottom: 1rem; /* [调整] 减小标题和列表之间的距离 */
  font-size: 1.2em;
  color: var(--text-primary);
}

.related-posts-manual ul,
.related-posts-auto ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;             /* [调整] 核心：大幅减小文章条目之间的垂直间距 */
}

/* 如果你想让它们并排显示，可以启用下面的代码 */
/*
@media (min-width: 600px) {
  .related-posts-manual ul,
  .related-posts-auto ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem; /* 并排时可以定义不同的垂直和水平间距 */
  }
}
*/

.related-posts-manual li,
.related-posts-auto li {
  padding: 0;
}

.related-posts-manual a,
.related-posts-auto a {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s ease-in-out;
}

.related-posts-manual a:hover,
.related-posts-auto a:hover {
  color: var(--accent-primary);
}

/* 摘要部分的压缩是关键 */
.related-posts-manual .summary,
.related-posts-auto .summary {
  font-size: 0.9em;
  color: var(--text-secondary);
  margin-top: 0.15rem; /* [调整] 极大减小摘要和标题之间的距离，让它们像一个整体 */
  line-height: 1.4;    /* [调整] 减小摘要自身的行高，让段落更紧凑 */
}