/* 全局变量与基础重置 */
:root{
  --bg-cream:#F6F3EA; /* 米白 */
  --ink:#1b1b1b;
  --accent:#0f3b2f; /* 墨绿 */
  --muted:#6b6b6b;
  --max-min-width:1120px;
  --max-width:1400px;
  --content-gap:28px;
  --sys-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sys-font);
  color:var(--ink);
  background:var(--bg-cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55; /* 舒展 */
  font-size:16px;
}
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px solid rgba(15,59,47,0.18)}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--accent);
  color:var(--bg-cream);
  padding:14px 24px;
  border-bottom:3px solid rgba(0,0,0,0.06);
}
.header-top .brand a{color:var(--bg-cream);font-weight:700;letter-spacing:0.2px}
.header-sub{background:#e9e6d9;color:var(--ink);padding:6px 24px;font-size:13px;border-top:1px solid rgba(0,0,0,0.03)}
.ad-container{padding:12px 24px;border-top:1px solid rgba(0,0,0,0.04);background:transparent;color:var(--muted);}
.ad-container > *{display:block}

/* 主容器，桌面限定宽度区间 */
.page-wrap{display:block;padding:24px 12px 40px}
.shell{
  margin:0 auto;
  width:100%;
  max-width:var(--max-width);
  min-width:var(--max-min-width);
  background:white;
  box-sizing:border-box;
  padding:22px;
  border:1px solid rgba(0,0,0,0.04);
}

/* 标题行：7/5 分栏在桌面由 media 控制 */
.title-row{display:block;margin-bottom:18px}
.title-col{margin-bottom:12px}
.article-title{margin:0;color:var(--ink);font-weight:700;font-size:28px;line-height:1.08}

.meta-col{background:#fff;border-left:4px solid rgba(15,59,47,0.06);padding:10px 12px;margin-top:6px}
.meta-block{border:1px solid rgba(0,0,0,0.04);padding:10px;margin-bottom:12px}
.meta-top .meta-item{font-size:13px;color:var(--muted);padding:6px 0}
.meta-top .kw{color:var(--accent);font-weight:600}
.faq-block h2{margin:0 0 8px 0;font-size:15px;color:var(--accent)}
.faq-content{font-size:14px;color:var(--ink)}

.content-grid{display:block}
.article{background:#fff;padding:6px 0}
.summary .desc{margin:0 0 14px 0;padding:6px 0;color:var(--muted)}
.sect-title{font-size:15px;margin:6px 0 12px 0;color:var(--accent)}
.body{font-size:15px;color:var(--ink)}
.related-head{font-size:14px;color:var(--accent);border-top:1px solid rgba(0,0,0,0.04);padding-top:10px;margin-top:18px}
.related-items{margin-top:8px}
.related-items > *{display:block;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.05);color:var(--muted)}
.related-items time{font-size:12px;color:var(--muted);margin-left:8px}

.site-footer{margin-top:18px;background:var(--accent);color:var(--bg-cream);padding:18px;border-top:4px solid rgba(0,0,0,0.06)}
.footer-index{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;align-items:center}
.footer-col{padding:6px}
.footer-brand{font-weight:700}

/* Avoid rounded card motif: square corners, subtle borders */
*{box-sizing:border-box}

/* —— 桌面布局（>=1024px） —— */
@media (min-width:1024px){
  body{font-size:16px}
  .page-wrap{padding:36px 12px 60px}
  .shell{display:grid;grid-template-rows:auto 1fr;grid-row-gap:18px;padding:28px}

  /* 标题区实现7/5分栏，标题大跨左侧，元信息在右侧 */
  .title-row{display:grid;grid-template-columns:7fr 5fr;gap:20px;align-items:start}
  .title-col{grid-column:1/2}
  .meta-col{grid-column:2/3}
  .article-title{font-size:34px}

  /* 主内容区，正文主列偏左；右侧元信息和FAQ错位排列 */
  .content-grid{display:grid;grid-template-columns:7fr 5fr;gap:20px;align-items:start}
  .article{grid-column:1/2;padding-right:10px}
  /* 将右侧的 FAQ 保持在 meta-col，但在视觉上下移形成错位 */
  .meta-col{position:relative}
  .faq-block{margin-top:28px}

  /* 右侧在 shell 内重复展现（视觉上保持对齐） */
  .meta-col{background:var(--bg-cream)}
  .meta-block{background:#fff}

  /* Footer wide-screen index effect: full width feel inside shell */
  .footer-index{grid-template-columns:2fr 1fr 1fr 2fr}
}

/* —— 手机端布局（<=767px） —— */
@media (max-width:767px){
  :root{--content-gap:16px}
  body{font-size:15px}
  .shell{min-width:0;max-width:100%;padding:14px;border:0}
  .header-top{padding:10px 12px}
  .header-sub{padding:6px 12px}

  /* 恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐 */
  .title-row{display:block}
  .title-col{order:1}
  .meta-col{order:2;margin:0;border-left:0;padding:10px 0}
  .meta-block{border:0;padding:8px 0}
  .faq-block{margin-top:8px}

  .content-grid{display:block}
  .article{order:3}
  .summary{order:4}
  .main-content{order:5}
  .related-list{order:6}

  .article-title{font-size:20px}
  .meta-col .meta-item{font-size:13px}
  .body{font-size:15px}
  .related-items > *{padding:10px 0}

  .ad-container{padding:10px 12px}
  .site-footer{padding:14px}
  .footer-index{grid-template-columns:1fr 1fr}
}

/* Accessibility & print friendliness */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}