/* 设计变量 */
:root{
  --bg:#faf9f6; /* 轻纸张底色 */
  --text:#111111;
  --muted:#666666;
  --accent:#C32126; /* 朱红强调 */
  --max-content-width:1320px; /* 在桌面保持1120-1440区间内 */
  --gap:20px;
  --radius:4px;
}

/* 全局重置与排版 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Microsoft YaHei, Arial;line-height:1.5;font-size:16px}
a{color:var(--accent);text-decoration:none}
.page{margin:28px auto;padding:0 18px}
.layout{display:grid;grid-template-columns:1fr;gap:var(--gap)}

/* Masthead: 报刊双层报头 —— 窄报头 */
.masthead{padding:10px 18px;border-bottom:1px solid rgba(0,0,0,0.06);background:transparent}
.masthead-line{display:flex;align-items:center;justify-content:space-between}
.masthead-line--top{padding-bottom:6px}
.masthead-line--bottom{font-size:13px;color:var(--muted)}
.home{font-weight:700;color:var(--text)}
.index-bar{display:flex;gap:12px;align-items:center}
.index-bar a,.index-bar .index-item{font-size:14px;color:var(--muted)}
.index-bar a{color:var(--text)}

/* Article header 与 标题构图（标题压左并用粗细横线构图） */
.article{grid-column:1}
.article-header{display:block;padding:12px 0 6px 0}
.title{font-size:28px;line-height:1.18;margin:6px 0 10px 0;font-weight:700;letter-spacing:0.2px;text-align:left}
.title{border-left:4px solid var(--accent);padding-left:12px}
.meta{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}
.sep{opacity:0.6}

/* 边注（edge-note）- 在桌面为右侧边注，在手机并入标题下方 */
.edge-note{font-size:13px;color:var(--muted);margin-top:10px}
.edge-note .note-summary{margin-top:6px;color:var(--text);font-weight:600}
.summary-mobile{display:none;margin:12px 0;color:var(--text)}

/* 正文 */
.content{margin-top:18px;color:var(--text);font-size:17px;line-height:1.75}
.content p{margin:0 0 1em}

.section-title{font-size:16px;margin:18px 0 10px 0;color:var(--text);font-weight:600}
.faq-body{font-size:15px;color:var(--text)}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-grid > *{padding:10px;border-left:3px solid var(--accent);background:transparent}

/* 侧边面板（右侧 2/12 栏） */
.side-panel{background:transparent;padding:6px 0}
.panel-block{margin-bottom:18px}
.panel-title{font-size:13px;color:var(--muted);margin-bottom:8px}
.meta-list{font-size:13px;color:var(--muted)}
.meta-list dt{font-weight:600;color:var(--text)}
.meta-list dd{margin:0 0 8px 0}

/* 广告容器：独立且不悬浮 */
.top-ad,.mid-ad,.bottom-ad,.bottom-ad{margin:8px 0;padding:8px;color:var(--muted);font-size:13px}
.mid-ad{margin-top:26px}

/* 页脚：宽屏索引式排版（视觉签名） */
.site-footer{margin-top:28px;padding:20px 18px 40px;background:transparent;border-top:1px solid rgba(0,0,0,0.06)}
.footer-index{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.footer-col{flex:1 1 200px}
.footer-col--brand .brand{font-weight:700;font-size:16px}
.index-list{display:flex;gap:10px;color:var(--muted)}
.note-small{font-size:13px;color:var(--muted)}
.bottom-ad{margin-top:18px}

/* 视觉与可访问性微调 */
.section-title{position:relative}
.section-title::after{content:"";display:block;height:2px;width:36px;background:var(--accent);margin-top:8px}

/* 密度紧凑 */
.article, .side-panel, .panel-block{line-height:1.4}

/* 桌面规则：1024px 及以上建立 10/2 网格，容器宽度在1120—1440区间 */
@media (min-width:1024px){
  .page{width:clamp(1120px,85vw,var(--max-content-width));padding:0}
  .layout{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;align-items:start}
  .article{grid-column:1 / span 10}
  .side-panel{grid-column:11 / span 2}

  /* edge-note 作为右侧边注的视觉表现：位于标题旁并对齐 */
  .article-header{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:start}
  .article-header .title{grid-column:1 / 2}
  .meta{grid-column:1 / 2}
  .edge-note{grid-column:2 / 3;margin-top:4px}
  .summary-mobile{display:none}

  /* 相关阅读为底部三列短卡样式（无阴影） */
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .related-grid > *{border-left:3px solid var(--accent);padding:12px;background:transparent}

  /* 页脚索引式横排 */
  .footer-index{flex-wrap:nowrap}
}

/* 手机规则：最大宽度767px，边注并入标题下方，所有内容取消固定宽度 */
@media (max-width:767px){
  body{font-size:15px}
  .page{margin:18px;padding:12px}
  .layout{grid-template-columns:1fr}
  .article{grid-column:auto}
  .side-panel{display:none} /* 侧栏在手机端合并为标题下方的 edge-note，侧栏信息已并入 edge-note */

  /* 将边注并入标题下方：edge-note 在 DOM 中已位于标题后，显示为块 */
  .edge-note{display:block;margin-top:10px;border-top:1px solid rgba(0,0,0,0.04);padding-top:8px}
  .summary-mobile{display:block}
  .article-header{display:block}

  .related-grid{grid-template-columns:1fr}
  .related-grid > *{padding:10px}

  /* 广告区不插入标题与摘要之间，mid-ad 保持页面中部或底部 */
  .top-ad{font-size:13px}
  .mid-ad{font-size:13px}
  .bottom-ad{font-size:13px}

  /* 页脚在手机上垂直排列 */
  .footer-index{flex-direction:column;gap:12px}
}

/* 避免被禁止的外观：禁止深色科技仪表盘风格，故无重阴影、巨大圆角或渐变 */