:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#C1272D; /* 朱红强调 */
  --gap:24px;
  --max-width:1320px; /* 保持在 1120px—1440px 范围内 */
  --container-padding:24px;
  --hr:#EAEAEA;
  font-synthesis: none;
}

/* 全局版式与无重影、无大圆角的朴素风格 */
html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Microsoft YaHei",Roboto,"PingFang SC",sans-serif;font-size:16px;line-height:1.48;margin:0}
a{color:inherit;text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 工具栏（站名与面包屑合并为工具栏）——极简细导航 */
.toolbar{border-bottom:1px solid var(--hr);background:transparent}
.toolbar-inner{max-width:var(--max-width);margin:0 auto;padding:12px var(--container-padding);display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--text);letter-spacing:0.2px}
.toolbar-note{color:var(--muted);font-size:14px}

/* 广告容器：独立且不可覆盖正文 */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px var(--container-padding);color:var(--muted);font-size:14px}

/* 主体容器：桌面采用左窄右宽的错位网格（正文偏右，推荐偏左） */
.container{max-width:var(--max-width);margin:28px auto;padding:0 var(--container-padding);display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}

/* 相关阅读（左侧） */
.related-column{order:1}
.related-heading{font-size:14px;margin:0 0 12px 0;color:var(--muted);font-weight:600}
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;color:var(--text);font-size:15px}
.related-list a{display:block;padding:6px 0;border-top:0}

/* 文章区（右侧） */
.article{order:2;min-width:0}
.article-header{margin-bottom:14px}
.title-row{display:flex;gap:20px;align-items:flex-start}
.title-row h1{flex:1;font-size:28px;line-height:1.18;margin:0;color:var(--text);font-weight:700;letter-spacing:0}
.title-row p.summary{width:36%;margin:0;color:var(--muted);font-size:15px;line-height:1.45;align-self:flex-end}

/* 视觉识别：标题首字着色以示识别（克制） */
.title-row h1::first-letter{color:var(--accent);font-weight:800}

.meta{display:flex;gap:16px;color:var(--muted);font-size:13px;margin-top:10px}
.article-meta-keywords{color:var(--muted);font-size:13px;margin:10px 0}
.article-meta-keywords .kw{color:var(--accent);font-weight:600}

.article-body{color:var(--text);font-size:16px;line-height:1.52}
.article-body p{margin:0 0 1em 0}
.article-body > * + *{margin-top:0.9em}

/* FAQ 样式：横线问答列表 */
.faq{margin-top:22px}
.faq h3{margin:0 0 10px 0;font-size:16px;color:var(--text)}
.faq-list > * + *{border-top:1px solid var(--hr);padding-top:12px;margin-top:12px}
.faq-list p{margin:0;color:var(--muted)}

/* 页脚 */
.site-footer{border-top:1px solid var(--hr);margin-top:32px;padding:18px var(--container-padding);color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-width);margin:0 auto}

/* 桌面专属差异（1024px 以上）：非对称排版与错位构成对角平衡 */
@media (min-width: 1024px){
  /* 保证容器在合同范围内：宽屏时占据中等偏大宽度 */
  :root{--max-width:1320px}
  .title-row h1{font-size:32px}
  /* 使标题与摘要在垂直上产生错位，形成对角视觉平衡 */
  .title-row p.summary{transform:translateY(8px)}
  /* 相关阅读为左侧窄列，正文为右侧主列（正文偏右，推荐偏左） */
  .related-list{grid-template-columns:1fr 1fr;font-size:15px}
  .article-body{font-size:17px;line-height:1.54}
}

/* 手机端重排（最大宽度767px）：取消错位，按顺序排列 Title, Summary, Content, FAQ, 相关阅读 */
@media (max-width: 767px){
  :root{--max-width:1000px}
  .toolbar-inner{padding:10px 16px}
  .container{display:flex;flex-direction:column;gap:18px;padding:0 16px}
  .related-column{order:5}
  .article{order:1}
  .title-row{flex-direction:column}
  .title-row p.summary{width:auto;align-self:stretch;margin-top:8px;transform:none}
  .title-row h1{font-size:20px}
  .article-body{font-size:15px;line-height:1.6}
  .related-list{display:grid;grid-template-columns:1fr;gap:10px}
  .ad-slot{padding:8px 16px}
  .article-meta-keywords{font-size:13px}
  .faq-list > * + *{border-top:1px solid var(--hr);padding-top:10px;margin-top:10px}
  .site-footer{padding:14px 16px}
}

/* 中间到大屏（768px - 1023px）尽量保留可读性 */
@media (min-width: 768px) and (max-width: 1023px){
  .container{grid-template-columns:280px 1fr;gap:28px}
  .title-row h1{font-size:26px}
  .title-row p.summary{width:40%}
}

/* 无重度视觉特效，禁止深色科技仪表盘风格（通过颜色与边距控制） */
*{box-sizing:border-box}
