:root{
  --navy:#0a2a43; /* 海军蓝 */
  --mist:#f1f3f4;  /* 浅雾灰 */
  --text:#1b1b1b;
  --muted:#6b6f72;
  --accent:#0a2a43;
  --max-wide:1320px; /* 选定容器宽度（在允许范围 1120-1440 内） */
  --gap:20px;
  --line:1px solid rgba(10,42,67,0.08);
  --radius:4px; /* 方角，避免大圆角 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 基础排版与重置 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: #ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  padding:32px 12px;
}
.container{
  margin:0 auto;
  width:calc(100% - 48px);
  max-width:var(--max-wide);
}

/* 头部：居中刊头与横线导航（单行文字刊头） */
.site-header{max-width:var(--max-wide);margin:0 auto 18px;}
.header-bar{display:flex;align-items:center;justify-content:center;gap:18px;}
.site-title{font-family: Georgia, 'Times New Roman', serif; color:var(--navy); text-decoration:none; font-size:20px; font-weight:600}
.site-nav{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.header-rule{border:0;border-top:1px solid rgba(10,42,67,0.06);margin-top:12px}

/* 广告容器（独立） */
.ad{max-width:var(--max-wide);margin:10px auto;padding:10px;border:var(--line);background:transparent;color:var(--muted);font-size:13px}
.ad-top{margin-top:0}
.ad-bottom{margin:24px auto 12px}

/* 文章头部 */
.article-head{padding:12px 6px 22px}
.article-title{font-family: Georgia, 'Times New Roman', serif; font-size:34px;line-height:1.14;margin:0;text-align:center;color:var(--navy);letter-spacing:0.2px}
.article-meta{display:flex;justify-content:center;gap:10px;color:var(--muted);font-size:13px;margin-top:10px}
.article-summary{max-width:980px;margin:14px auto 0;padding:10px 12px;background:var(--mist);border:1px solid rgba(10,42,67,0.04);border-radius:2px;color:var(--text);text-align:left}

/* 核心布局：在宽屏上使用网格，正文 8 栏，右侧 4 栏 */
.layout-grid{display:block}
.content{margin-top:20px}
.content .body-text{white-space:normal}

/* 侧边信息 */
.side-info{margin-top:18px}
.info-block{border:1px solid rgba(10,42,67,0.06);padding:14px;background:#fff;margin-bottom:18px}
.info-title{font-size:14px;margin:0 0 8px;color:var(--navy);font-weight:600}
.info-body{font-size:14px;color:var(--muted)}
.info-keywords .info-body{color:var(--text)}
.ad-slot{margin-top:10px}

/* 章节标题 */
.section-title{font-family: Georgia, 'Times New Roman', serif;font-size:18px;margin:0 0 10px;color:var(--navy)}

/* FAQ 容器：桌面两列表式展示，移动端堆叠 */
.faq-wrapper{display:block}
.faq-wrapper dl{margin:0;border-top:1px solid rgba(10,42,67,0.06)}
.faq-wrapper dl dt{padding:12px 10px;border-bottom:1px solid rgba(10,42,67,0.04);font-weight:600}
.faq-wrapper dl dd{padding:12px 10px 20px;margin:0;color:var(--muted);border-bottom:1px solid rgba(10,42,67,0.04)}
.faq-wrapper .faq-item{padding:8px 0;border-bottom:1px solid rgba(10,42,67,0.04)}

/* 推荐区 */
.related-region{margin-top:28px;padding-top:12px;border-top:1px solid rgba(10,42,67,0.04)}
.related-grid{display:block;margin-top:12px}

/* 页脚 */
.site-footer{max-width:var(--max-wide);margin:18px auto 40px;color:var(--muted);font-size:13px}

/* ------------------ 桌面规则（至少在 min-width:1024px 生效） ------------------ */
@media (min-width:1024px){
  body{padding:48px 20px}
  .container{width:1120px;max-width:1440px}

  /* 使用 12 列栅格：正文占 8 列（约 66%），右侧占 4 列（约33%） */
  .layout-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:28px;align-items:start}
  .article-head{grid-column:1 / -1}
  .content{grid-column:1 / span 8}
  .side-info{grid-column:10 / span 3;grid-row:2 / span 1;display:flex;flex-direction:column}

  /* 侧边两块不同高度：保持第一个信息区较短，第二个较高（自然内容驱动高度差异） */
  .info-keywords{flex:0 0 auto}
  .info-meta{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}

  /* FAQ：桌面采用左问右答表式（针对 dl 或 .faq-item） */
  .faq-wrapper dl{display:grid;grid-template-columns: 1fr 2fr;gap:12px}
  .faq-wrapper dl dt{border-bottom:none;padding:10px 8px;background:transparent}
  .faq-wrapper dl dd{padding:10px 8px;border-bottom:1px solid rgba(10,42,67,0.04);color:var(--muted)}

  /* 推荐区四列 */
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .related-grid > *{padding:10px;border:1px solid rgba(10,42,67,0.06);background:transparent}

  /* 视觉签名：大面积留白配紧凑字阶 */
  .article-title{margin-top:8px;margin-bottom:6px;font-size:40px}
  .article-summary{margin-left:0;margin-right:0}
}

/* ------------------ 手机规则（在 max-width:767px 生效） ------------------ */
@media (max-width:767px){
  body{padding:18px 12px}
  .container{width:100%;max-width:720px;padding:0}

  /* 手机端为自然阅读顺序：标题、元信息、正文、信息区下移为正文之后的两段列表 */
  .layout-grid{display:block}
  .article-head{padding:6px 4px}
  .article-title{font-size:22px;text-align:left}
  .article-meta{justify-content:flex-start}
  .article-summary{font-size:14px}

  .content{width:100%}
  .side-info{display:block;margin-top:22px}
  .info-block{margin-bottom:12px}

  /* FAQ：堆叠展示 */
  .faq-wrapper dl{display:block}
  .faq-wrapper dl dt{background:transparent}
  .faq-wrapper dl dd{padding-left:16px}

  /* 相关推荐 单列 */
  .related-grid{display:block}
  .related-grid > *{margin-bottom:12px;padding:12px;border-top:1px solid rgba(10,42,67,0.06)}

  /* 避免横向滚动 */
  img,iframe,table{max-width:100%;height:auto}
}