:root{
  --charcoal:#202224; /* 炭黑 */
  --warm-gray:#8a7f78; /* 暖灰 */
  --muted:#f5f3f2;
  --accent:#333333;
  --max-site-width:1200px; /* 在 1120-1440 之间，契约要求 */
  --content-width:860px; /* 正文约860px */
  --gap:14px; /* 紧凑密度 */
  --line:1px solid var(--muted);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--charcoal);
  background:#ffffff;
}
/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
a{color:inherit;text-decoration:none}
.page-wrap{display:flex;justify-content:center;padding:18px 12px 60px}
.container{width:100%;max-width:var(--max-site-width);display:block}
/* 报刊双层报头 */
.masthead{border-bottom:var(--line);padding:10px 12px 6px;background:transparent}
.masthead-row{display:flex;align-items:center;gap:8px}
.masthead-top{justify-content:space-between;padding:6px 0;font-weight:700;color:var(--charcoal)}
.site-id a{font-size:18px}
.site-year{font-size:13px;color:var(--warm-gray)}
.masthead-bottom{margin-top:6px}
.index-bar ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0}
.index-bar li span{font-size:13px;padding:6px 8px;border:1px solid transparent;color:var(--warm-gray)}
.index-bar li span:hover{color:var(--charcoal);border-color:var(--muted)}

/* 广告占位（独立容器） */
.ad-slot{max-width:var(--max-site-width);margin:12px auto;padding:8px;border:var(--line);background:transparent;color:var(--warm-gray);font-size:13px}
.ad-top{margin-top:8px}
.ad-bottom{margin:18px auto 30px}
.ad-middle{margin:18px auto}

/* 文章区布局：标题区与正文使用不同宽度（visual_signature） */
.article{display:block;padding:14px 8px}
.article-head{max-width:100%;padding-bottom:6px;border-bottom:var(--line);margin-bottom:12px}
/* 标题构图：压左并用粗细横线构图 */
.title{margin:8px 0 6px;font-size:26px;line-height:1.18;font-weight:700;color:var(--charcoal);text-align:left;position:relative;padding-left:2px}
.title::after{content:"";display:block;height:3px;width:60px;background:var(--charcoal);margin-top:8px}
.meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--warm-gray);font-size:13px;margin-top:6px}
.summary{margin:12px 0;color:var(--warm-gray);font-size:15px;max-width:var(--content-width)}

/* 正文通栏内居中窄幅阅读 */
.article-body{margin:12px auto 0;max-width:var(--content-width);line-height:1.75;color:var(--charcoal);font-size:15px}
.article-body p{margin:0 0 12px}
.article-body h2, .article-body h3{margin:18px 0 8px}
.article-body ul, .article-body ol{margin:0 0 12px 20px}

/* FAQ 区域：桌面表格式左问右答 */
.faq-section{margin:20px auto;padding:12px;border-top:var(--line);max-width:var(--content-width)}
.faq-section h2{font-size:16px;margin:0 0 10px;color:var(--charcoal)}
.faq-wrap{display:block}
/* 期待模板方在 {{faq}} 中输出 dl 或 .faq-item 结构，下面样式兼容常见情况 */
.faq-wrap dl{display:grid;grid-template-columns:260px 1fr;gap:10px 20px;border-left:2px solid transparent}
.faq-wrap dt{font-weight:700;color:var(--charcoal);padding:6px 0}
.faq-wrap dd{margin:0;padding:6px 0;color:var(--warm-gray)}
/* 兼容常见自定义类 */
.faq-wrap .faq-item{display:grid;grid-template-columns:260px 1fr;gap:10px 20px;padding:8px 0;border-bottom:var(--line)}
.faq-wrap .faq-item .q{font-weight:700}
.faq-wrap .faq-item .a{color:var(--warm-gray)}

/* 相关阅读：底部三列短卡（无阴影） */
.related{margin:22px auto 0;max-width:var(--max-site-width);padding:0 8px}
.related h2{font-size:16px;margin:0 0 12px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* 期望 {{related}} 提供短卡列表（例如 <article> 或 <a> 元素），若为块级元素，以下样式保证无阴影，方角框线 */
.related-grid > *{border:1px solid var(--muted);padding:10px;background:transparent;border-radius:4px}
.related-grid .related-title{font-weight:700;color:var(--charcoal);font-size:14px;margin-bottom:6px}
.related-grid .related-meta{font-size:12px;color:var(--warm-gray)}

/* 底部 */
.site-footer{border-top:var(--line);padding:14px 12px;color:var(--warm-gray);font-size:13px}
.footer-inner{max-width:var(--max-site-width);margin:0 auto;display:flex;justify-content:space-between}

/* 响应式：桌面规则（至少在 min-width:1024px 生效） */
@media (min-width:1024px){
  .page-wrap{padding:22px 18px 80px}
  .container{display:block}
  /* 利用宽屏：外围容器宽度受限于 --max-site-width（1200px），正文列为约860px 居中 */
  .article-head{max-width:100%}
  .title{font-size:30px}
  .summary{font-size:16px}
  .article-body{font-size:16px}
  /* FAQ 左侧问题固定宽度，右侧答案扩展（表格式） */
  .faq-wrap dl{grid-template-columns:260px 1fr}
  .faq-wrap .faq-item{grid-template-columns:260px 1fr}
  /* 相关阅读三列保持 */
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 移动端规则（max-width:767px）：正文全宽减安全边距，底部三列变单列 */
@media (max-width:767px){
  :root{--gap:10px}
  .page-wrap{padding:12px 10px}
  .masthead-top{padding:6px 0}
  .site-id a{font-size:16px}
  .index-bar ul{gap:8px}
  .index-bar li span{font-size:12px;padding:6px}

  /* 正文采用全宽（减安全边距），避免横向滚动或文字截断 */
  .container{padding:0 8px}
  .article-body{max-width:100%;font-size:15px;padding:0}
  .summary{max-width:100%}

  /* FAQ 改为堆叠，问题在上答案在下 */
  .faq-wrap dl{display:block}
  .faq-wrap dt{padding-top:10px}
  .faq-wrap dd{padding-bottom:10px}
  .faq-wrap .faq-item{display:block;border-bottom:var(--line);padding:10px 0}

  /* 相关阅读单列 */
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{padding:10px}

  /* 广告区与页脚适配 */
  .ad-slot{margin:10px auto}
  .footer-inner{flex-direction:column;gap:6px;align-items:flex-start}
}

/* 保持小屏 320px 无横向滚动 */
@media (max-width:320px){
  html,body{min-width:0}
  .index-bar ul{flex-wrap:wrap}
  .title{font-size:18px}
}