/* 全局变量与重置 */
:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --ink:#222222;
  --muted:#6b6b6b;
  --accent:#c9a300; /* 芥末黄 */
  --line:#e6e6e6; /* 石墨灰变体 */
  --max-width:1280px; /* 整体容器最大宽度，处于1120-1440范围 */
  --center-width:780px; /* 桌面正文宽度契约 */
  --left-width:220px;
  --gutter:24px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.58; /* 舒展阅读密度 */
}

a{color:inherit;text-decoration:none}

/* 顶部报头（左右分置的编辑部报头） */
.topbar{border-bottom:1px solid var(--line);background:transparent}
.topbar-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter)}
.brand-link{font-weight:700;color:var(--ink)}
.top-meta{color:var(--muted);font-size:13px}

/* 页面网格：桌面为三轨（左侧纵向刊头、居中正文、右侧索引） */
.page-grid{max-width:var(--max-width);margin:18px auto;display:grid;grid-template-columns:var(--left-width) var(--center-width) 1fr;gap:24px;padding:0 var(--gutter);align-items:start}

/* 左侧纵向刊头 */
.side-nav{border-right:1px solid var(--line);padding-right:16px}
.nav-title{font-size:13px;color:var(--muted);margin-bottom:8px}
.nav-list{list-style:none;padding:0;margin:0}
.nav-item{padding:6px 0;color:var(--muted);font-size:14px}
.side-faq-compact{margin-top:18px;font-size:13px;color:var(--muted)}

/* 中央正文列 */
.center-column{padding:0 12px}
.article-title{margin:0 0 8px 0;text-align:center;font-size:28px;line-height:1.2;font-weight:700}
.article-meta{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{margin:8px 0 18px 0;text-align:left;color:var(--muted);border-top:1px solid transparent}

.article{background:transparent}
.article-body .content{color:var(--ink);font-size:16px;line-height:1.7}

/* 视觉识别：正文首段首字轻量强调（仅样式，不改写内容） */
.article-body .content p:first-of-type::first-letter{color:var(--accent);font-size:1.35em;font-weight:600;padding-right:2px}

/* 广告位样式，独立容器，不遮挡内容 */
.ad{border:1px dashed var(--line);padding:12px;margin:18px 0;color:var(--muted);font-size:13px;background:transparent}
.ad-top{margin-bottom:18px}
.ad-middle{margin-top:20px}
.ad-bottom{margin-left:auto}

/* FAQ 表格式（桌面：左问右答） */
.faq-section{margin-top:24px}
.faq-grid{display:block}

/* 右侧索引与关键词 */
.right-column{padding-left:16px;border-left:1px solid var(--line)}
.related-title{font-size:14px;color:var(--muted);margin:0 0 8px 0}
.related-list{font-size:14px;color:var(--ink)}
.meta-notes{margin-top:12px;color:var(--muted);font-size:13px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);margin-top:36px;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:18px var(--gutter);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}

/* 无圆角、细分隔线、无阴影：遵守 surface 合同 */
*{border-radius:0}

/* 可访问性辅助类 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 桌面规则：必须包含 @media (min-width: 1024px) */
@media (min-width: 1024px){
  /* FAQ 桌面两栏：左题右答（遵循 faq_pattern） */
  .faq-grid{display:grid;grid-template-columns:34% 1fr;gap:12px 24px;align-items:start;border-top:1px solid var(--line);padding-top:14px}
  .faq-grid > *{padding:6px 0}

  /* 确保正文中心列约为合同宽度 */
  .page-grid{grid-template-columns:var(--left-width) var(--center-width) 1fr}
  .center-column{min-width:var(--center-width);max-width:var(--center-width);}
}

/* 手机规则：必须包含 @media (max-width: 767px) */
@media (max-width: 767px){
  /* 移除三栏，恢复单列顺序：顶部报头、标题、摘要、正文，随后侧栏内容（移动合并） */
  .page-grid{display:block;padding:0 16px}
  .side-nav{border-right:none;padding:0 0 12px 0}
  .right-column{border-left:none;padding:12px 0 0 0}

  /* 将侧边信息重排到正文之后（两侧信息全部移动到正文之后） */
  .side-nav,.right-column{order:2}
  .center-column{order:1}

  .center-column{padding:0}
  .article-title{text-align:center;font-size:20px}
  .article-meta{justify-content:flex-start}
  .summary{text-align:left}

  /* FAQ 在移动端堆叠为一列，问题在上，答案在下 */
  .faq-grid{display:block}
  .faq-grid > *{padding:8px 0;border-top:1px solid var(--line)}

  /* 广告表现为内联块，不可悬浮或覆盖 */
  .ad{margin:14px 0}

  /* 防止横向滚动：图片或长行文本需换行 */
  img,video,iframe,embed,object{max-width:100%;height:auto}
  .content{word-break:break-word;overflow-wrap:break-word}
}

/* 中间区细化：正文内链接、列表、代码样式（技术资讯紧凑型） */
.content p{margin:0 0 12px}
.content ul{margin:0 0 12px 18px}
.content ol{margin:0 0 12px 18px}
.content pre{background:transparent;border:1px solid var(--line);padding:10px;font-family:monospace;font-size:13px;overflow:auto}