/* 通用变量与重置 */
:root{
  --bg:#f7f5f2; /* 轻纸张 */
  --fg:#111; /* 正文深色 */
  --muted:#6b6b6b;
  --accent:#b3241f; /* 朱红强调 */
  --max-width:1300px; /* 在 1120-1440 之间 */
  --gap:20px;
  --page-padding:24px;
  --line:1.45;
  --title-size:28px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--line);
  font-size:15px; /* 紧凑技术资讯字阶 */
}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto}
/* 广告条 */
.ad-strip{padding:12px var(--page-padding);font-size:13px;color:var(--muted);background:transparent}
/* 页眉与栏目索引条 */
.site-header{display:flex;align-items:center;gap:24px;padding:18px var(--page-padding);max-width:var(--max-width);margin:0 auto}
.brand-link{font-weight:700;color:var(--fg);font-size:16px}
.index-bar{display:flex;gap:14px;align-items:center;margin-left:auto}
.index-bar .nav-item{font-size:13px;color:var(--muted)}
.index-bar a.nav-item{color:var(--accent)}
/* 页面容器与整体网格 */
.page-wrap{padding:0 var(--page-padding) 40px;margin:0 auto}
.layout-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);max-width:var(--max-width);margin:0 auto}
.article{background:transparent;padding:0}
/* 标题区：移动端紧凑，桌面 7/5 分栏 */
.title-grid{display:block;margin-bottom:10px}
.eyebrow{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:0.02em}
.page-title{margin:6px 0 8px;font-size:var(--title-size);line-height:1.12;font-weight:700}
.title-side .meta-meta{font-size:13px;color:var(--muted)}
.description{margin:8px 0 18px;color:var(--muted);font-size:15px}
.article-body{color:var(--fg);font-size:15px}
.content{word-wrap:break-word}
/* 右侧栏 */
.right-column{padding:8px 0}
.side-box{margin-bottom:18px}
.side-label{font-size:13px;color:var(--muted);margin-bottom:8px}
.info-list{margin:0;padding:0;font-size:14px}
.info-list dt{float:left;width:38%;color:var(--muted);clear:left}
.info-list dd{margin:0 0 8px 38%;}
/* 相关阅读 */
.related{margin-top:18px}
.related-title{font-size:15px;margin:0 0 10px;color:var(--muted)}
.related-grid{display:flex;flex-direction:column;gap:10px}
.related-grid > *{padding:8px 6px;background:transparent;border-left:3px solid transparent}
.related-grid a{display:block;color:var(--fg);font-size:14px}
/* FAQ：支持多种内部标记（dl/dt/dd、.faq-item .q/.a）
   桌面呈现为 左问右答 表格式 */
.faq{margin-top:18px}
.faq .faq-item{margin-bottom:12px}
.faq .q{font-weight:600;color:var(--fg);margin-bottom:6px}
.faq .a{color:var(--muted)}
.faq dl{margin:0}
.faq dt{font-weight:600;margin-top:10px}
.faq dd{margin:6px 0 12px 0}
/* 页脚 */
.site-footer{padding:18px var(--page-padding);color:var(--muted);font-size:13px;text-align:center}

/* ---------- 桌面样式（>=1024px） ---------- */
@media (min-width:1024px){
  :root{--page-padding:36px;--title-size:34px}
  .page-wrap{padding-top:18px}
  .layout-grid{grid-template-columns:1fr 360px;align-items:start;gap:36px}

  /* 标题区 7/5 分栏（视觉） */
  .title-grid{display:grid;grid-template-columns:7fr 5fr;align-items:start;gap:20px;margin-bottom:6px}
  .title-main{padding-right:6px}
  .title-side{padding-left:6px}

  /* 主列偏左，右侧为元信息与 FAQ 错位排列 */
  .article{grid-column:1 / 2}
  .right-column{grid-column:2 / 3}

  /* FAQ 表格式：dt 左列 dt/dd 组合成左问右答 */
  .faq dl{display:grid;grid-template-columns:35% 65%;gap:12px 24px}
  .faq dt{grid-column:1;padding-top:6px;color:var(--fg)}
  .faq dd{grid-column:2;color:var(--muted);padding-top:6px}

  /* 相关阅读底部三列短卡样式（但不使用阴影） */
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .related-grid > *{border-left-color:var(--bg);padding-left:8px}
  .related-grid a{padding:8px;border-left:4px solid transparent}

  /* 右侧信息块视觉错位（编辑部式） */
  .right-column .side-box{border-left:2px solid rgba(0,0,0,0.03);padding-left:12px}
}

/* ---------- 手机样式（<=767px） ---------- */
@media (max-width:767px){
  :root{--page-padding:16px;--title-size:20px}
  .site-header{padding:12px var(--page-padding)}
  .index-bar{gap:8px}
  .layout-grid{grid-template-columns:1fr;gap:12px;padding:0}
  .title-grid{display:block}
  .title-side{margin-top:6px}
  .title-main .page-title{font-size:20px}
  .description{font-size:14px}
  .related-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .right-column{order:3}
  /* 恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐 */
  /* DOM 已按此顺序，确保在手机上视觉上亦为顺序堆叠 */
  .faq dl{display:block}
  .faq dt{margin-top:10px}
  .faq dd{margin-left:0}
  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 可访问性与微调 */
.page-title{word-break:break-word}
.content p{margin:0 0 1em}
.content ul, .content ol{margin:0 0 1em 1.2em}