/* 全局变量与重置 */
:root{
  --bg-cream:#FBF6EE; /* 米白 */
  --ink:#163B31;      /* 墨绿偏深 */
  --muted:#6B6B66;
  --accent:#174936;    /* 深墨绿 */
  --surface:#FFFFFF;
  --radius:6px; /* 方角偏小 */
  --max-site-width:1280px; /* 在1120-1440区间内 */
  --content-width:860px; /* 正文宽度目标 */
  --gutter:24px;
  --sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sys-font);
  color:var(--ink);
  background:linear-gradient(0deg,var(--bg-cream),var(--bg-cream)); /* 使用纯色，不是真正渐变视觉效果 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px solid rgba(23,73,54,0.12);outline-offset:2px}
.header-inner{max-width:var(--max-site-width);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;gap:12px}
.brand{font-weight:700;color:var(--ink);font-size:1.05rem}
.header-tools{margin-left:auto}
.header-tools .home-link{font-size:0.9rem;color:var(--muted)}

/* 广告容器（独立、非悬浮） */
.ad-slot{max-width:var(--max-site-width);margin:12px auto;padding:8px var(--gutter);color:var(--muted);font-size:0.9rem;border-top:1px dashed rgba(0,0,0,0.04)}
.ad-slot.ad-top{margin-top:6px}

/* 页面主体容器 */
.page-wrap{max-width:var(--max-site-width);margin:0 auto;padding:12px var(--gutter) 48px}
.article{background:transparent;border:1px solid transparent}

/* 标题区：大标题 + 窄元信息列（桌面专属构图） */
.article-header{padding:8px 0 18px}
.hero-grid{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}
.hero-main{min-width:0}
.article-title{margin:0 0 10px;font-size:1.9rem;line-height:1.08;font-weight:700;color:var(--ink)}
.article-desc{margin:0;color:var(--muted);font-size:0.98rem}
.hero-meta{border-left:1px solid rgba(23,73,54,0.06);padding-left:14px;font-size:0.92rem;color:var(--muted)}
.hero-meta .meta-row{margin-bottom:10px}
.hero-meta .now{font-style:italic}
.hero-meta .keywords{font-size:0.88rem;color:var(--accent)}

/* 内容壳：确保正文为指定宽度并居中 */
.content-shell{display:flex;flex-direction:column;align-items:center}
.article-body{width:100%;max-width:var(--content-width);background:var(--surface);padding:20px 22px;border:1px solid rgba(23,73,54,0.06);box-shadow:none;border-radius:4px;margin:6px 0}
.article-body p{margin:0 0 14px;color:var(--ink);line-height:1.65}
.article-body h2,h3{margin:18px 0 8px}
.article-body ul, .article-body ol{padding-left:1.15rem;margin:0 0 14px}

/* FAQ 区：主题色顶部边线 */
.faq{width:100%;max-width:var(--content-width);margin-top:18px;padding:18px;border:1px solid rgba(23,73,54,0.04);background:rgba(23,73,54,0.02)}
.faq-title{margin:0 0 12px;font-size:1.05rem;color:var(--accent);border-top:3px solid var(--accent);padding-top:8px}
.faq-body{color:var(--muted);line-height:1.6}

/* 相关推荐：反向色块标题栏 + 列表 */
.related{width:100%;max-width:var(--max-site-width);margin-top:20px}
.related-header{background:var(--accent);color:#fff;padding:10px 16px;border-radius:0}
.related-header h3{margin:0;font-size:1rem}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px;border:1px solid rgba(23,73,54,0.04);background:var(--bg-cream)}
.related-list > *{background:transparent;padding:10px;border-top:1px solid rgba(0,0,0,0.02)}
.related-list a{color:var(--ink)}

/* 页脚 */
.site-footer{max-width:var(--max-site-width);margin:28px auto;padding:14px var(--gutter);color:var(--muted);font-size:0.9rem;border-top:1px solid rgba(23,73,54,0.04)}

/* 禁止玻璃拟态、模糊与悬浮卡片：不启用任何滤镜或固定定位 */

/* 桌面专属（必须包含） */
@media (min-width:1024px){
  /* 在宽屏下充分利用留白：整体容器 1120-1440 之间，已设置为1280 */
  body{font-size:16px}
  .page-wrap{padding:20px 36px 56px}
  .hero-grid{grid-template-columns:1fr 260px}
  .article-title{font-size:2.4rem}
  .article-body{padding:26px 30px;margin-top:6px}
  /* 明确区分标题宽度与正文宽度：标题区跨更宽布局，正文保持约860px */
  .article-header{max-width:var(--max-site-width);margin:0 auto}
  .content-shell{width:100%;display:flex;flex-direction:column;align-items:center}
  /* 相关推荐在底部三列展开（桌面契约） */
  .related-list{grid-template-columns:repeat(3,1fr)}
}

/* 手机端专属（必须包含） */
@media (max-width:767px){
  body{font-size:15px}
  .header-inner{padding:12px 14px}
  .brand{font-size:1rem}
  .ad-slot{padding:8px 14px}
  /* 手机端标题与元信息重排为单列：正文全宽减安全边距 */
  .hero-grid{display:block}
  .hero-main{padding:6px 0}
  .article-title{font-size:1.3rem}
  .article-desc{font-size:0.95rem}
  .hero-meta{border-left:0;padding-left:0;padding-top:8px;border-top:1px solid rgba(23,73,54,0.04);color:var(--muted)}
  .content-shell{padding:0 12px}
  .article-body{max-width:100%;width:100%;padding:16px;border-radius:4px}
  .faq{max-width:100%;padding:14px}
  /* 底部相关推荐从三列变为单列（手机契约） */
  .related-list{display:block}
  .related-list > *{padding:12px;border-top:1px solid rgba(0,0,0,0.03)}
  /* 避免横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间区分辨化（平衡舒展密度与紧凑排版） */
.article-title, .related-header h3{letter-spacing:-0.01em}
.article-body img, .article-body iframe{max-width:100%;height:auto}

/* 可访问性和可读性小调整 */
.article-body :focus{outline:2px solid rgba(23,73,54,0.12);outline-offset:2px}