/* 通配选择器 */
*{
    /* 将所有浏览器的外边距清零 */
    margin: 0;
    /* 将所有浏览器的内边距清零 */
    padding: 0;
    /* 全页面统一使用Poppins字体，如果加载失败，回退到无衬线字体族 */
    font-family: 'Poppins', sans-serif; 
}
/* 整页固定背景 */
body{ 
    margin: 0;
    min-height: 100vh;
    background: url("../images/single-bg.jpg") no-repeat center/cover fixed;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}
.content{
    max-width: 1000px;
    margin: 80px auto 40px;              /* 上 80 下 40 居中 */
    padding: 50px 60px;
    background: rgba(10,42,67,.70);      /* 70% 不透明度，透出底层图 */
    backdrop-filter: blur(6px);          /* 毛玻璃模糊 */
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.content p {
    text-indent: 2em; /* 首行缩进2个字符宽度 */
    margin: 1em auto;
    
    line-height: 1.7;   /* 当前字体大小的 1.7 倍，16 px × 1.7 ≈ 27 px */
}

.content h2
{
     margin: 1em auto;
}
.content h3
{
     margin: 1em auto;
}
.content blockquote {
    margin: 1.2em 0;
    padding: 12px 16px 12px 14px;      /* 左侧多留 2 px 给竖线 */
    border-left: 4px solid #0a2a43;
    border-radius: 0 8px 8px 0;
    line-height: 1.7;
    /* 关键：去掉实色背景，沿用卡片玻璃 */
    background: rgba(255,255,255,.12);   /* 仅 12% 白色蒙层 */
    color: #e0e0e0;                      /* 比正文字浅一点，柔和 */
}

.content blockquote strong {
    color: #fff;        /* 高亮关键字用纯白，跳色更明显 */
}

/* 1. 全局保底 */
img {
    max-width: 100%;          /* 超父级宽度自动缩小 */
    height: auto;             /* 宽度变化时高度等比 */
    display: block;           /* 去掉 inline 缝隙 */
    margin: 1.2em auto;       /* 上下留空，左右居中 */
    border-radius: 8px;       /* 轻微圆角，和卡片呼应 */
    box-shadow: 0 4px 12px rgba(0,0,0,.15); /* 淡淡投影 */
    transition: transform .3s ease, box-shadow .3s ease;
}

/* 2. 悬停轻微放大 + 阴影加重 */
img:hover {
    transform: scale(1.015);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* 3. 文章内图片额外留白 */
.content img {
    margin: 2em auto;         /* 比默认再多一点呼吸 */
}






  /* 父容器：占满整行，启用 Flex 布局，控制图片排列 */
  .img-row {
    width: 100%; /* 占满父容器宽度（通常是页面宽度） */
    display: flex; /* 图片并排 */
    gap: 4%; /* 两张图片之间的间隙（占总宽度的 4%，可调整） */
    margin: 20px 0; /* 上下留白，与文字区分 */
  }

  /* 图片样式：放大并占满剩余空间 */
  .img-row img {
    width: 48%; /* 每张图片占 48% 宽度（48% + 4% 间隙 + 48% = 100%） */
    height: auto; /* 高度自动适应，保持比例不拉伸 */
    border-radius: 8px; /* 可选：加圆角更美观 */
    object-fit: cover; /* 可选：如果图片比例不一致，裁剪填满容器（避免变形） */
    max-width: none; /* 取消可能的最大宽度限制，确保能放大 */
  }






  /* 目录样式：固定在右侧，不随滚动消失 */
.article-toc {
  position: fixed; /* 固定定位 */
  right: 20px;
  top: 40px;

  width: 200px;
  padding: 15px;
 
background: rgba(10,42,67,.70);      /* 70% 不透明度，透出底层图 */
    backdrop-filter: blur(6px);          /* 毛玻璃模糊 */

  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影增强层次感 */
}

.article-toc h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #0a2a43;
}

.article-toc ul {
  list-style: none; /* 去掉默认列表圆点 */
  padding: 0;
  margin: 0;
}

.article-toc li {
  margin: 8px 0;
}

.article-toc a {
  text-decoration: none; /* 去掉下划线 */
  color: #333;
  font-size: 14px;
  transition: color 0.3s; /* hover 过渡效果 */
}

.article-toc a:hover {
  color: #1a97f7; /*  hover 时变色 */
  font-weight: 500;
}

/* 文章内容：给目录留右侧空间，避免遮挡 */
.article-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  margin-right: 240px; /* 右侧留 240px 给目录（目录宽度200px + 间距20px） */
}

/* 锚点跳转平滑滚动（优化体验） */
html {
  scroll-behavior: smooth; /* 点击目录跳转时不生硬，平滑滚动 */
}


@media (max-width: 768px) {
  .article-toc {
    position: static; /* 取消固定定位 */
    width: 100%;
    margin-bottom: 20px;
    transform: none;
  }

  .article-content {
    margin-right: 0; /* 取消右侧留白 */
  }
}

.article-toc a
{
  
  font-size: 16px; /* 固定大小（推荐，目录常用 12-16px）；也可用 em/rem：1.2em（相对于父元素字体）、1rem（相对于根元素字体） */

  /* 3. 字体粗细（加粗/变细） */
  font-weight: 500; /* 可选值：normal(400)、bold(700)、lighter、bolder，或 100-900 数字（400=正常，700=加粗） */

  /* 4. 字体颜色 */
  color: #ffffff; /* 默认颜色（深灰）；可改 #0a2a43（之前页面用的主色）、#666（浅灰）、rgb(51,51,51) 等 */

  /* 5. 行高（文字换行时的间距，影响可读性） */
  line-height: 1.5; /* 无单位时，是字体大小的 1.5 倍（推荐，避免文字拥挤） */

  /* 6. 字体样式（斜体/正常，目录一般不用斜体） */
  font-style: normal; /* 可选：italic（斜体）、oblique（倾斜）、normal（正常） */

  /* 7. 文字间距（字符之间的距离，可选优化） */
  letter-spacing: 0.5px; /* 字符间距（正数加宽，负数变窄，0 默认） */
  
}




/* 底部导航 */

.article-nav {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center;
  gap: 20px; /* 间距，避免小屏幕挤在一起 */
}

.article-nav a {
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  color: #ffffff;
  border: 1px solid #65bcff;
  background: rgba(10,42,67,.70);      /* 70% 不透明度，透出底层图 */
    backdrop-filter: blur(6px);          /* 毛玻璃模糊 */
  transition: all 0.3s;
}

.article-nav a:hover {
  background: #0a2a43;
  color: #5b89ff; /* hover 时背景变色，文字变白 */
}

/* 禁用状态（无下一篇/上一篇时） */
.article-nav a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #ccc;
  color: #ccc;
}

.article-nav a.disabled:hover {
  background: transparent;
  color: #ccc;
}

/* 响应式：手机端上下排列 */
@media (max-width: 768px) {
  .article-nav {
    flex-direction: column; /* 垂直排列 */
    align-items: stretch; /* 占满宽度 */
  }

  .article-nav a {
    text-align: center;
  }
}