/* 基础变量与重置 */
:root{
  --bg-graphite:#2b2b2b; /* 石墨灰 */
  --accent:#caa30a; /* 芥末黄 */
  --page-bg:#f5f6f7;
  --card-bg:#ffffff;
  --text:#111213;
  --muted:#6b6d70;
  --max-width:1280px;
  --gap:16px;
  --radius:2px; /* 方形信息块 */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  background:var(--page-bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:15px; /* 紧凑型 */
}
a{color:inherit;text-decoration:none}
.page-wrap{max-width:var(--max-width);margin:18px auto;padding:0 16px}

/* 报头：左对齐紧凑品牌栏，深色 */
.site-header{background:var(--bg-graphite);color:#fff;padding:10px 0}
.site-header .header-inner{max-width:var(--max-width);margin:0 auto;padding:0 16px;display:flex;align-items:center}
.brand a{font-weight:700;color:#fff;letter-spacing:0.2px}

/* 文章总体 */
.article{background:transparent}
.article-header{background:transparent;padding:18px 0 8px}
.title{margin:6px 0 12px;font-size:24px;font-weight:700;text-align:center}
.article-meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);align-items:center}
.article-meta .meta-left{display:flex;gap:12px;align-items:center}
.summary{background:var(--card-bg);padding:12px;border-radius:var(--radius);box-shadow:none;border:1px solid rgba(16,18,20,0.04);color:var(--text);margin-top:12px;text-align:left}

/* 广告容器，独立不可覆盖正文 */
.ad-slot{background:transparent;padding:10px 0;color:var(--muted);font-size:13px}
.ad-slot.top{margin-top:12px}
.ad-slot.middle{margin:18px 0}
.ad-slot.bottom{margin:18px 0 36px}

/* 内容区：桌面采用编辑部堆叠 10/2 边注 */
.content-stage{margin-top:18px}
.content-grid{display:block}
.content-main{background:var(--card-bg);padding:18px;border-radius:4px;border:1px solid rgba(16,18,20,0.04)}
.content-aside{margin-top:12px}

.info-block{background:var(--card-bg);border-radius:var(--radius);padding:10px;border:1px solid rgba(16,18,20,0.04);margin-bottom:10px}
.info-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.info-line{font-size:13px;margin-bottom:6px}
.info-body{font-size:14px;color:var(--text)}

.body-content{font-size:15px;color:var(--text)}
.body-content p{margin:0 0 12px}

/* 下部面板：FAQ 与相关阅读 在桌面不同宽度错位排列 */
.lower-panels{display:block;margin-top:18px;gap:16px}
.panel{background:var(--card-bg);padding:12px;border-radius:4px;border:1px solid rgba(16,18,20,0.04)}
.panel-head{display:flex;align-items:center;gap:8px}
.panel-head .stub{display:inline-block;width:36px;height:6px;background:var(--accent);border-radius:2px}
.panel-head h2{margin:0;font-size:16px}
.panel-body{margin-top:10px}

/* FAQ 编号式样（仅样式，不增加内容） */
.faq-list .faq-item{margin-bottom:12px;padding-left:34px;position:relative}
.faq-list .faq-item:before{counter-increment:faq;content:counter(faq);counter-reset:answer;position:absolute;left:0;top:0;width:28px;height:20px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:2px}
.faq-list{counter-reset:faq}

/* 阅读相关：两列摘要列表样式（desktop 下） */
.related-list .related-item{display:block;padding:8px 0;border-bottom:1px dashed rgba(16,18,20,0.04);font-size:14px}
.related-list .related-item:last-child{border-bottom:none}

/* 页脚 */
.site-footer{padding:18px 0;text-align:center;color:var(--muted);font-size:13px}

/* 视觉签名：章节标题带短编号线但不自动生成编号 */
.content-main h2, .panel-head h2{position:relative;padding-left:14px}
.content-main h2:before{content:'';position:absolute;left:0;top:10px;width:24px;height:3px;background:var(--accent);border-radius:2px}

/* 响应规则：必须包含桌面与手机断点 */
@media (min-width:1024px){
  /* 桌面：利用宽屏，编辑部堆叠结构 */
  .page-wrap{padding:0 24px}
  .title{font-size:28px}
  .article-header{padding:22px 0 12px}

  /* 使用 12 栏网格模拟 10/2 边注 */
  .content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
  .content-main{grid-column:1 / span 10;padding:24px}
  .content-aside{grid-column:11 / span 2;padding:12px}

  /* FAQ 与相关阅读错位：FAQ 占 8 列，相关阅读占 4 列且上移制造错位 */
  .lower-panels{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .faq-panel{grid-column:1 / span 8;padding:18px}
  .related-panel{grid-column:9 / span 4;padding:18px;margin-top:30px} /* 故意错位下移 */

  /* 相关阅读两列摘要 */
  .related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .related-list .related-item{border-bottom:none;padding:6px}

  /* 侧边方块保持方形风格，紧凑 */
  .info-block{border-radius:var(--radius);}
}

@media (max-width:767px){
  /* 手机端：语义顺序单列，取消错位与跨栏 */
  .page-wrap{padding:0 12px}
  .title{font-size:18px}
  .article-meta{flex-direction:column;align-items:flex-start;gap:6px}
  .summary{margin-top:10px}

  .content-grid{display:block}
  .content-main{grid-column:auto;padding:14px}
  .content-aside{padding:10px}

  .lower-panels{display:block}
  .faq-panel,.related-panel{padding:12px;margin-top:12px}

  /* 相关阅读单列 */
  .related-list{display:block}

  /* 确保 320px 下无横向滚动 */
  .page-wrap, .site-header .header-inner{padding-left:12px;padding-right:12px}
  body{font-size:15px}
}

/* 中间宽度（768-1023）保持可读 */
@media (min-width:768px) and (max-width:1023px){
  .content-grid{display:block}
  .content-main{padding:18px}
  .content-aside{padding:12px}
  .related-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}