/* 基础依赖样式（导航栏/页脚必需，确保布局正常） */
html {
  font-size: 16px;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
}

/* ====================================== 导航栏样式 ====================================== */
/* 头部导航样式（修复后完整代码） */
#header {
  height: 5rem; /* 80px ÷ 16 */
  width: 100%;
  background: #FFF;
  position: relative;
  z-index: 1;
}
.header__inner {
  max-width: 71.25rem; /* 1140px ÷ 16 */
  height: 5rem; /* 80px ÷ 16 */
  margin: 0 auto;
  position: relative;
  /* 修复PC端偏左：让Logo+导航整体水平居中 */
  text-align: center;
}
/* 导航栏Logo：修复hover+适配居中布局 */
.header__logo {
  float: none; /* 去掉float，改为inline-block适配居中 */
  display: inline-block; /* 关键：让Logo能被text-align:center居中 */
  vertical-align: middle; /* 与导航垂直对齐，避免上下偏移 */
  margin-top: 1rem; /* 保持原有顶部间距（16px） */
  margin-right: 1.25rem; /* 保留Logo与导航的间距（20px） */
  margin-left: 0; /* 取消轻微左移，避免影响居中 */
  height: 3rem; /* 保持放大后高度（48px） */
  align-items: center;
}

/* Logo 链接：保持原有逻辑 */
.header__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.3s ease;
}
/* 修复Logo文字hover不变色：精准选中hover状态的文字 */
.header__logo a:hover .header__logo-text {
  color: #388ddf; /* 与导航hover颜色统一，保持风格 */
  transition: color 0.3s ease; /* 流畅过渡 */
}

/* Font Awesome 图标：保持原有样式 */
.header__logo i.fa-solid {
  font-size: 2.25rem; /* 36px，放大后尺寸 */
  color: #388ddf;
  margin-right: 0.75rem; /* 12px，图标与文字间距 */
  transition: color 0.3s ease;
}
.header__logo a:hover i.fa-solid {
  color: #2962b3; /* hover加深效果不变 */
}

/* Logo 文字：保持原有尺寸+默认颜色 */
.header__logo-text {
  font-size: 1.5rem; /* PC端24px */
  font-weight: 700;
  white-space: nowrap;
  color: #444546; /* 原有默认深灰色，不改动 */
}

/* 导航栏：适配父容器居中，保持原有横向布局 */
.header__nav {
  display: inline-block; /* 关键：让导航能被text-align:center居中 */
  vertical-align: middle; /* 与Logo垂直对齐 */
  margin: 0;
  padding: 0;
}
.header__nav-item {
  display: block;
  float: left; /* 保留原有float，维持横向排列 */
  height: 5rem; /* 与头部高度一致 */
  list-style: none;
}
.header__nav-link {
  display: block;
  float: left;
  height: 5rem; /* 80px ÷ 16 */
  line-height: 5rem; /* 80px ÷ 16 */
  color: #333;
  font-size: 1rem; /* 16px ÷ 16 */
  padding: 0 1.25rem; /* 20px ÷ 16 */
  border-left: 0.0625rem solid #EEE; /* 1px ÷ 16 */
  text-decoration: none;
}
.header__nav-link:hover {
  color: #388ddf; /* 原有hover颜色，不改动 */
}
.header__nav-item.on .header__nav-link {
  color: #388ddf;
  font-weight: 600; /* 原有选中样式，不改动 */
}

/* ====================================== 页脚样式 ====================================== */
.footer {
  width: 100%;
  background-color: #444546;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.875rem 1.25rem; /* 30px/20px ÷ 16 */
  box-sizing: border-box;
}
/* 页脚文本 */
.footer__text {
  text-align: center;
  margin: 0.5rem 0; /* 8px ÷ 16 */
  color: #808181;
  font-size: 0.875rem; /* 14px ÷ 16 */
  line-height: 1.6;
}
/* 精简版 - 页脚文本内a标签样式 */
.footer__text a {
  color: inherit; /* 继承父级颜色 */
  padding: 0 0.375rem; /* 仅保留左右内边距 */
  text-decoration: none;
  transition: color 0.3s ease; /* 仅过渡颜色 */
}

/* hover核心反馈 */
.footer__text a:hover {
  color: #2980b9; /* 高亮色 */
  text-decoration: underline; /* 下划线标识可点击 */
}

/* 无障碍焦点必备 */
.footer__text a:focus {
  outline: 0.125rem solid #e74c3c;
  outline-offset: 0.125rem;
}
/* 友情链接标题 */
.footer__link-title {
  font-style: normal;
  margin-right: 0.5rem; /* 8px ÷ 16 */
  color: #a0a1a1;
}
/* 页脚链接 */
.footer__link {
  color: #808181;
  font-size: 0.875rem; /* 14px ÷ 16 */
  padding: 0 0.375rem; /* 6px ÷ 16 */
  transition: color 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
/* 页脚链接hover效果 */
.footer__link:hover {
  color: #2980b9;
}
/* 页脚链接焦点样式（无障碍） */
.footer__link:focus {
  outline: 0.125rem solid #e74c3c; /* 2px ÷ 16 */
  outline-offset: 0.125rem; /* 2px ÷ 16 */
  border-radius: 0.125rem; /* 2px ÷ 16 */
}

/* ====================================== 响应式适配（导航栏+页脚） ====================================== */
/* 移动端适配（768px以下 → 48rem） */
@media (max-width: 48rem) {
  /* 导航栏移动端适配 */
  /* 导航适配 */
  #header {
    height: auto;
  }
  .header__inner {
    height: auto;
    padding: 0.625rem 0; /* 10px ÷ 16 */
    text-align: center; /* 移动端保持居中，不改动 */
  }
  .header__logo {
    float: none;
    text-align: center;
    margin: 0.5rem auto 0.9375rem; /* 原有间距，不改动 */
    width: auto;
    height: 2.75rem; /* 移动端Logo高度（44px） */
    justify-content: center;
    align-items: center;
  }

  /* 移动端图标：保持原有样式 */
  .header__logo i.fa-solid {
    font-size: 2rem; /* 移动端图标32px */
    margin-right: 0.625rem; /* 移动端间距10px */
  }

  /* 移动端文字：保持原有样式 */
  .header__logo-text {
    font-size: 1.375rem; /* 移动端22px */
    color: #2d3748; /* 原有颜色，不改动 */
  }
  .header__nav {
    float: none;
    text-align: center;
    padding: 0;
    display: block; /* 移动端恢复block，不影响2列布局 */
  }
  .header__nav-item {
    float: left;
    width: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 0 0.03125rem #EEE; /* 0.5px ÷ 16 */
    text-align: center;
    height: auto;
    padding: 0;
  }
  .header__nav-link {
    float: none;
    display: block;
    height: auto;
    line-height: normal;
    font-size: 0.875rem; /* 14px ÷ 16 */
    padding: 0.75rem; /* 12px ÷ 16 */
    border: none;
  }
  .header__nav-link:hover {
    background: #f8f8f8;
    color: #388ddf; /* 原有移动端hover样式，不改动 */
  }

  /* 页脚移动端适配 */
  .footer {
    padding: 1.25rem 0.9375rem; /* 20px/15px ÷ 16 */
  }
  .footer__text {
    font-size: 0.8125rem; /* 13px ÷ 16 */
  }
  .footer__link {
    padding: 0 0.25rem; /* 4px ÷ 16 */
    margin: 0.125rem 0; /* 2px ÷ 16 */
  }
}

  /* 下面是资讯动态页面的专属样式 */
  /* ====================================== 资讯页面专属样式 ====================================== */
/* 新增：页面内容容器（限制最大宽度+居中，解决内容占全屏问题） */
.news-container {
  max-width: 71.25rem; /* 与导航栏一致，1140px ÷ 16 */
  margin: 0 auto;
  padding: 0 1.25rem; /* 左右内边距，避免移动端贴边 */
}

/* 面包屑导航样式（新增背景框，解决无背景问题） */
.news-breadcrumb {
  margin: 1.25rem 0;
  font-size: 0.875rem;
  color: #666;
  background-color: #f8f9fa; /* 浅灰背景 */
  padding: 0.75rem 1.25rem; /* 内边距 */
  border-radius: 0.375rem; /* 圆角 */
  border: 0.0625rem solid #eee; /* 浅边框，增强框感 */
}
.news-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
/* 面包屑分隔符 */
.news-breadcrumb__item + .news-breadcrumb__item::before {
  content: "/";
  margin-right: 0.5rem;
  color: #999;
  display: inline-block;
}
.news-breadcrumb__link {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease, outline 0.3s ease;
  padding: 0.25rem 0.375rem;
}
.news-breadcrumb__link:hover {
  color: #388ddf;
}
.news-breadcrumb__link:focus {
  outline: 0.125rem solid #388ddf;
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}
.news-breadcrumb__current {
  color: #333;
  font-weight: 500;
  padding: 0.25rem 0.375rem;
}

.news-article__header {
  text-align: center; /* 标题+说明文字居中对齐 */
  margin: 1.875rem 0; /* 上下间距，与原有标题间距一致 */
  padding-bottom: 1rem; /* 分隔线上方内边距，避免文字贴线 */
  border-bottom: 0.0625rem solid #eee; /* 底部分隔线（浅灰色，1px粗） */
}

/* 原有标题样式（微调margin-bottom，与说明文字衔接） */
.news-article__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin: 0 0 0.75rem; /* 只保留底部间距，与说明文字拉开距离 */
  line-height: 1.4;
}

/* 新增说明文字样式 */
.news-article__desc {
  font-size: 0.9375rem; /* 15px，比标题小，不抢焦点 */
  color: #666; /* 灰色，区分标题 */
  line-height: 1.6;
  margin: 0; /* 清除默认margin */
  padding: 0 1.25rem; /* 左右内边距，避免移动端贴边 */
  max-width: 50rem; /* 限制最大宽度，避免文字过长导致可读性差 */
  margin: 0 auto; /* 居中对齐 */
}

/* 内容列表样式 */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.news-list__item {
  width: 100%;
}
.news-card {
  padding: 1.25rem;
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.news-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  transform: translateY(-0.125rem);
}
.news-card__title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
}
.news-card__title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease, outline 0.3s ease;
  display: block;
  padding: 0.25rem 0;
}
.news-card__title a:hover {
  color: #388ddf;
}
.news-card__title a:focus {
  outline: 0.125rem solid #388ddf;
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}
/* 标签样式兼容（style属性可能包含颜色） */
.news-card__title a[style*="color"] {
  display: inline;
}
.news-card__meta {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.news-card__date {
  display: flex;
  align-items: center;
}
.news-card__date::before {
  content: "📅";
  margin-right: 0.375rem;
  font-size: 1rem;
}

/* 分页导航样式 */
.news-pagination {
  margin: 2.5rem 0;
  text-align: center;
  padding: 1rem 0;
}
.news-pagination a,
.news-pagination span {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border: 0.0625rem solid #eee;
  border-radius: 0.25rem;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: #fff;
}
.news-pagination a:hover {
  background-color: #388ddf;
  color: #fff;
  border-color: #388ddf;
}
.news-pagination a:focus {
  outline: 0.125rem solid #388ddf;
  outline-offset: 0.125rem;
}
.news-pagination span.current {
  background-color: #388ddf;
  color: #fff;
  border-color: #388ddf;
  font-weight: 500;
}
.news-pagination span.disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #f5f5f5;
  background-color: #fafafa;
}

/* ====================================== 资讯页面响应式适配 ====================================== */

/* ====================================== 资讯页面响应式适配（强制生效+标题大间距） ====================================== */
@media (max-width: 768px) {
  /* 容器基础适配：保持原有顶部间距，不粘顶 */
  .news-container {
    padding: 1.25rem 0.9375rem;
    overflow: hidden;
  }

  /* 隐藏面包屑 */
  .news-breadcrumb {
    display: none;
  }

  /* 移动端头部容器：缩小上下间距，更紧凑 */
  .news-article__header {
    margin: 2.5rem 0 1.25rem; /* 顶部大间距（不粘顶），底部缩小 */
    padding-bottom: 0.75rem; /* 分隔线上方内边距缩小 */
  }

  /* 移动端标题：保持原有大间距+适配字体 */
  .news-article__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem; /* 与说明文字间距缩小 */
  }

  /* 移动端说明文字：缩小字体，适配小屏幕 */
  .news-article__desc {
    font-size: 0.875rem; /* 14px */
    padding: 0 0.625rem; /* 左右内边距缩小 */
  }

  /* 分页和卡片样式不变 */
  .news-pagination {
    margin: 1.875rem 0;
  }
  .news-pagination a,
  .news-pagination span {
    padding: 0.75rem 0.625rem;
    margin: 0 0.125rem;
    font-size: 0.8125rem;
  }
  .news-card {
    padding: 1rem;
  }
}
/* ====================================== 文章页面专属样式 ====================================== */
/* 文章主容器：居中布局+上下间距 */
.article-container {
  max-width: 71.25rem; /* 与导航栏/资讯页保持一致 */
  margin: 2rem auto; /* 上下间距，左右自动居中 */
  padding: 0 1.25rem; /* 移动端左右内边距，避免贴边 */
  width: 100%;
  box-sizing: border-box; /* 确保padding不超宽 */
}

/* 文章卡片容器：突出主体+轻微阴影 */
.article {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.05);
  padding: 2.5rem;
  transition: box-shadow 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* 兜底：防止个别元素超宽带动滚动 */
  /* 全局继承换行规则：所有子元素默认强制换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 文章头部：底部分隔线 */
.article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem solid #eee;
}

/* 文章标题：醒目且不拥挤，长标题强制换行 */
.article-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin: 0 0 1rem;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal; /* 中文不拆分 */
}

/* 文章元信息（日期）：弱化显示 */
.article-meta {
  color: #999;
  font-size: 0.875rem;
  text-align: center;
}

.article-meta ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.article-meta li {
  display: flex;
  align-items: center;
  word-wrap: break-word; /* 防止元信息超长 */
}

.article-meta li::before {
  content: "📅";
  margin-right: 0.5rem;
  font-size: 1rem;
}

/* 文章正文：优化可读性，强制自动换行（关键层级） */
.article-content {
  font-size: 1.0625rem; /* 17px，提升阅读舒适度 */
  color: #444;
  line-height: 1.8;
  width: 100%;
  box-sizing: border-box;
  /* 强制所有子元素继承换行规则 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal; /* 中文不拆分 */
}

/* 覆盖所有正文子元素：确保无遗漏（关键！无important） */
.article-content * {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal; /* 去掉important，靠选择器权重覆盖 */
  width: 100%;
  box-sizing: border-box;
}

/* 正文段落间距，长文本强制换行 */
.article-content p {
  margin: 0 0 1.5rem;
  text-indent: 2em; /* 中文段落首行缩进2字符 */
}

/* 正文图片：强制自适应，不超宽、不拉伸（选择器更精准，权重更高） */
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto; /* 上下间距+水平居中 */
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  object-fit: contain; /* 保持图片比例，完整显示 */
  width: auto; /* 覆盖上面的width:100%，靠选择器精准度生效 */
}

/* 正文链接：突出可点击性，长链接强制换行 */
.article-content a {
  color: #388ddf;
  text-decoration: underline;
  transition: color 0.3s ease, outline 0.3s ease;
  padding: 0.125rem 0.25rem;
  word-break: break-all; /* 长链接/URL强制换行，靠选择器权重 */
}

.article-content a:hover {
  color: #2962b3;
  text-decoration: none;
}

.article-content a:focus {
  outline: 0.125rem solid #388ddf;
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}

/* 正文列表样式：列表项强制换行 */
.article-content ul,
.article-content ol {
  margin: 0 0 1.5rem 2rem;
  padding: 0;
}

.article-content li {
  margin-bottom: 0.5rem;
}

/* 正文引用样式：不超宽，内容强制换行 */
.article-content blockquote {
  margin: 0 0 1.5rem;
  padding: 1rem 1.5rem;
  background-color: #f8f9fa;
  border-left: 0.375rem solid #388ddf;
  color: #666;
  border-radius: 0 0.25rem 0.25rem 0;
}

/* 正文表格样式：自适应屏幕，单元格强制换行（关键） */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  table-layout: fixed; /* 固定表格布局，单元格自动分配宽度 */
}

.article-content th,
.article-content td {
  padding: 0.75rem 1rem;
  border: 0.0625rem solid #eee;
  text-align: left;
  word-break: break-all; /* 单元格内长文本/英文强制换行 */
}

.article-content th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.article-content tr:nth-child(even) {
  background-color: #fafafa;
}

/* 正文标题层级（h2-h6）：长标题强制换行 */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  font-size: inherit; /* 继承父级字体大小，避免固定尺寸超宽 */
  font-weight: 600;
  color: #333;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid #eee;
}

.article-content h2 {
  font-size: 1.5rem;
}

.article-content h3 {
  font-size: 1.25rem;
}

.article-content h4,
.article-content h5,
.article-content h6 {
  font-size: 1.125rem;
}

/* 特殊元素：长英文、数字、代码强制换行（兼容版，无important） */
.article-content code,
.article-content pre,
.article-content span code, /* 替代:has()，选中span内的code */
.article-content span, /* 兜底：所有span强制换行（包含代码/长文本的span都生效） */
.article-content div:contains("http"), /* 长URL容器（如<div>包裹的链接） */
.article-content span:contains("123456") /* 长数字容器（如连续数字的span） */ {
  word-break: break-all; /* 去掉important，靠选择器权重生效 */
}

/* ====================================== 文章页面响应式适配 ====================================== */
@media (max-width: 48rem) { /* 768px以下移动端 */
  /* 全局约束：禁止页面横向滚动 */
  html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* 禁止字体自动缩放 */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .article-container {
    margin: 5.5rem auto 1.5rem; 
    padding: 0 0.9375rem;
    padding-top: 3rem;
    width: 100%;
    box-sizing: border-box;
  }

  .article {
    padding: 1.5rem; /* 缩小内边距，节省空间 */
    overflow-x: hidden; /* 兜底防止超宽滚动 */
  }

  .article-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  .article-title {
    font-size: 1.5rem; /* 缩小标题字体 */
    margin-bottom: 0.75rem;
  }

  .article-meta {
    font-size: 0.8125rem; /* 缩小元信息字体 */
  }

  .article-content {
    font-size: 1rem; /* 调整正文字体大小 */
    line-height: 1.7;
  }

  .article-content p {
    margin-bottom: 1.25rem;
    text-indent: 1.5em; /* 移动端缩进减小，避免拥挤 */
  }

  .article-content img {
    margin: 1.25rem auto;
    border-radius: 0.25rem;
  }

  .article-content ul,
  .article-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .article-content blockquote {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
  }

  .article-content h2 {
    font-size: 1.375rem;
    margin: 1.75rem 0 0.875rem;
  }

  .article-content h3 {
    font-size: 1.125rem;
    margin: 1.5rem 0 0.75rem;
  }

  .article-content th,
  .article-content td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}