/* 设计主色与基础变量（炭黑与暖灰） */
:root{
  --bg:#ffffff;
  --ink:#1a1a1a; /* 炭黑 */
  --muted:#8a8a8a; /* 暖灰 */
  --accent:#222; /* 用于细节 */
  --max-width:1280px; /* 在 1120-1440 之间，取中间值 */
  --gutter:24px;
  --radius:6px;
  --fs-base:16px;
  --fs-small:14px;
}

/* 基础排版（标题衬线、正文无衬线） */
html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  margin:0;
}

a{color:var(--accent);text-decoration:none}

/* Header: 左对齐紧凑品牌栏 */
.site-header{
  padding:18px var(--gutter);
  border-bottom:1px solid #efefef;
}
.brand-link{
  font-weight:600;
  color:var(--ink);
  font-size:1rem;
}

/* 页面主容器居中，桌面宽度受限在 1120-1440 之间（使用变量的 1280px） */
.page-wrap{
  max-width:var(--max-width);
  margin:28px auto;
  padding:0 var(--gutter);
}

/* 标题构成：标题居中，摘要左对齐 */
.headline{margin-bottom:18px}
.title{
  font-family: "Times New Roman", Georgia, "Songti SC", serif;
  font-size:2rem;
  margin:6px 0 12px 0;
  text-align:center; /* 居中 */
  color:var(--ink);
}
.summary{
  max-width:900px;
  margin:0 0 8px 0;
  color:var(--muted);
  text-align:left; /* 摘要左对齐 */
  font-size:0.98rem;
}
.meta-row{
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--muted);
  font-size:0.88rem;
}
.meta-row time{white-space:nowrap}

/* 广告容器（独立、不可遮挡） */
.ad{
  margin:18px 0;
  padding:12px;
  color:var(--muted);
  border:1px dashed #efefef;
  background:linear-gradient(180deg,#fff,#fff);
}

/* 内容网格：基础移动优先布局为单列，在桌面切换为 8 列网格 */
.content-grid{
  display:block;
}

.article{
  background:transparent;
  padding:0;
}

.content-body{
  font-size:1rem;
  color:var(--ink);
  word-wrap:break-word;
  hyphens:auto;
}

.section-title{
  margin:24px 0 10px 0;
  font-size:1.02rem;
  color:var(--ink);
  border-top:1px solid transparent; /* 保留章节横线样式可按需开启 */
}

/* 相关阅读与常见问题默认堆叠；具体样式在媒体查询中调整 */
.related-list,
.faq-list{
  display:block;
}

/* 侧栏信息区移动端默认在正文下方（隐藏桌面专属布局），使用紧凑字阶与大留白 */
.side-info{
  display:block;
  margin-top:18px;
}
.info-block{
  padding:12px 0;
  border-top:1px solid #f2f2f2;
}
.info-title{
  font-size:0.95rem;
  margin:0 0 6px 0;
  color:var(--accent);
}
.info-body{color:var(--muted);font-size:0.95rem}

.site-footer{
  margin:40px 0 24px 0;
  color:var(--muted);
  font-size:0.9rem;
  text-align:center;
}

/* ----- 桌面规则：1024px 及以上 ----- */
@media (min-width:1024px){
  .page-wrap{padding:0 32px}

  /* 8栏网格实现：正文占6栏，侧栏占2栏（右侧），并保证非对称编辑部式组合 */
  .content-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:28px;
    align-items:start;
  }

  .article{
    grid-column:1 / span 6; /* 正文占6列 */
  }

  .side-info{
    grid-column:7 / span 2; /* 侧栏占两列 */
    display:flex;
    flex-direction:column;
    gap:18px;
    align-self:start;
  }

  /* 右侧两个信息区：制造不同高度感（信息区一较短，信息区二较高） */
  .info-block-a{min-height:72px}
  .info-block-b{min-height:160px}

  /* FAQ：左问右答的表格式（期待 FAQ 内容以 dt/dd 或 .qa-question/.qa-answer 形式填充） */
  .faq-list{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:12px 20px;
    align-items:start;
  }
  /* 兼容常见 HTML 结构 */
  .faq-list dt{grid-column:1}
  .faq-list dd{grid-column:2}
  .faq-list .qa-question{grid-column:1;font-weight:600;color:var(--accent)}
  .faq-list .qa-answer{grid-column:2;color:var(--muted)}

  /* 相关阅读：底部推荐四列 */
  .related-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:8px;
  }
  /* 相关项视觉为紧凑摘要（两行以内提示风格） */
  .related-list > *{
    padding:10px 8px;
    background:transparent;
    border-top:1px solid transparent;
    color:var(--ink);
    font-size:0.95rem;
  }

  /* 更宽松的标题尺寸以匹配桌面阅读节奏 */
  .title{font-size:2.4rem}
}

/* ----- 手机规则：最大 767px ----- */
@media (max-width:767px){
  :root{--gutter:16px}
  .page-wrap{margin:18px auto;padding:0 var(--gutter)}

  /* 页头更紧凑 */
  .site-header{padding:12px var(--gutter)}

  /* 标题与摘要的排布保持但字体与间距更紧凑 */
  .title{font-size:1.25rem;margin-bottom:8px}
  .summary{font-size:0.95rem;margin-bottom:8px}
  .meta-row{flex-wrap:wrap;font-size:0.82rem}

  /* 单列流：侧栏（信息区）必须下移并转成两段列表（合同要求） */
  .content-grid{display:block}
  .article{display:block}
  .side-info{display:block;margin-top:12px}
  .info-block{border-top:1px solid #f2f2f2;padding-top:12px}

  /* FAQ 改为堆叠（左问右答改为上下） */
  .faq-list{display:block}
  .faq-list dt,.faq-list .qa-question{display:block;margin-top:12px;font-weight:600}
  .faq-list dd,.faq-list .qa-answer{display:block;color:var(--muted);margin-bottom:8px}

  /* 相关阅读变单列（合同要求） */
  .related-list{display:flex;flex-direction:column;gap:10px}
  .related-list > *{padding:10px 0;border-top:1px solid #f6f6f6}

  /* 广告与正文保留清晰区块，避免覆盖与悬浮 */
  .ad{font-size:0.9rem}
}

/* 禁止三列等宽营销卡片（通过不提供三等分布局类，并用明确的四列或单列/两列策略） */
/* 视觉签名：大面积留白配紧凑字阶（通过 generous margins + compact font sizes） */