/* 视觉与版式变量（深紫灰与象牙白） */
:root{
  --bg: #f6f5f0; /* 象牙白 */
  --text: #222022;
  --muted: #66656a;
  --accent: #3b2f44; /* 深紫灰 */
  --rule: #dcdad6;
  --max-width: 1320px; /* 在 1120-1440 范围内，具体由容器限制 */
  --track-width: 220px; /* 细窄章节轨道 */
  --content-max: 820px; /* 正文宽度约820px */
  --gap: 28px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto}

/* Header：左右分置的编辑部报头；第二层极窄 */
.site-header{border-bottom:1px solid var(--rule);background:transparent}
.header-row{display:flex;justify-content:space-between;align-items:center;padding:18px calc((100% - var(--max-width))/2 + 12px);max-width:var(--max-width);margin:0 auto}
.site-title{font-weight:700;color:var(--accent);font-size:18px}
.header-right{color:var(--muted);font-size:13px}
.header-narrow{height:6px;background:transparent;border-top:1px solid var(--rule)}

/* 页面主结构 */
.page-wrapper{padding:20px 12px 48px}
.page-inner{display:grid;grid-template-columns: var(--track-width) 1fr;gap:var(--gap);max-width:var(--max-width);margin:0 auto}

/* 章节轨道（桌面左侧） */
.chapter-track{border-left:1px solid var(--rule);padding-left:18px}
.track-title{font-size:13px;color:var(--muted);margin-bottom:10px}
.track-list{list-style:none;padding:0;margin:0}
.track-list li{padding:6px 0;border-bottom:1px solid transparent;color:var(--muted);font-size:13px}

/* 文章列 */
.article-column{padding-left:18px;padding-right:18px}
.track-inline{display:none;height:1px;background:var(--rule);margin:8px 0 16px 0}
.article-header{display:grid;grid-template-columns:1fr 160px;gap:18px;align-items:start;margin-bottom:12px}
.article-title{font-size:28px;line-height:1.18;margin:0;color:var(--accent);font-weight:700}
.meta-column{font-size:13px;color:var(--muted);border-left:1px solid var(--rule);padding-left:12px}
.meta-column .published,.meta-column .current-time{display:block;margin-bottom:8px}
.summary{margin:6px 0 18px;color:var(--muted);line-height:1.5}

/* 广告插槽（独立容器，不悬浮、不覆盖） */
.ad-slot{border:1px dashed var(--rule);padding:12px;margin:18px 0;color:var(--muted);background:transparent}
.ad-slot:empty{display:none}

/* 正文：保证直接可见、不过度约束宽度 */
.article-body{max-width:var(--content-max);line-height:1.75;color:var(--text);font-size:16px}
.article-body p{margin:0 0 1em}
.article-body h2, .article-body h3{margin:1.2em 0 0.6em;color:var(--accent)}
.article-body ul, .article-body ol{margin:0 0 1em 1.2em}

/* FAQ 与相关阅读：跨越主内容宽度（即 article-column 内宽度） */
.faq-section, .related-section{border-top:1px solid var(--rule);padding-top:16px;margin-top:18px}
.section-title{font-size:15px;margin:0 0 10px;color:var(--accent)}
.faq-list{display:block;border-top:1px solid var(--rule)}
/* faq_pattern: 横线问答列表；模板不假定 faq 内部结构，但提供样式支持 */
.faq-list > * + *{border-top:1px solid var(--rule);padding:12px 0}

.related-list{padding-left:18px;margin:0;color:var(--muted)}
.related-list > li{margin:10px 0}
.related-list a{color:var(--accent)}

/* Footer */
.site-footer{border-top:1px solid var(--rule);padding:18px 12px;color:var(--muted);font-size:13px;text-align:center}

/* 桌面专属规则：必须包含 @media (min-width:1024px) */
@media (min-width:1024px){
  body{background:var(--bg)}
  .page-wrapper{padding-top:28px}
  .page-inner{grid-template-columns: var(--track-width) 1fr;align-items:start}
  /* 保证容器在合同指定范围内并充分利用宽屏 */
  .page-inner{max-width:var(--max-width);min-width:1120px}
  .article-body{max-width:var(--content-max)}
  /* 窄元信息列靠右起排（title 偏右起排效果由 grid 实现） */
  .article-header{grid-template-columns:1fr 180px}
  .chapter-track{display:block}
  .track-inline{display:none}
}

/* 手机专属规则：必须包含 @media (max-width:767px) */
@media (max-width:767px){
  :root{--gap:16px}
  .page-inner{display:block;padding:0;margin:0}
  .chapter-track{display:none}
  .article-column{padding:12px}
  /* 章节轨道变成标题下方横线（track-inline 显示） */
  .track-inline{display:block}
  .article-header{display:block}
  .meta-column{border-left:none;padding-left:0;margin-top:8px}
  .article-title{font-size:20px}
  .summary{font-size:14px}
  .article-body{font-size:15px;line-height:1.7}
  /* 内容恢复全宽 */
  .article-body{max-width:100%}
  .ad-slot{margin:16px 0}
  .site-header .header-row{padding:12px}
  .header-narrow{height:4px}
  .page-wrapper{padding-bottom:28px}
  .site-footer{padding:12px}
  /* 保证在 320px 时不横向滚动 */
  html,body{overflow-x:hidden}
}

/* 视觉签名：全页只使用直角和细线；禁止圆角与阴影 */
*{border-radius:0}
.shadow, .card{box-shadow:none}

/* 较高密度与现代无衬线排版（density:适中） */
.article-title{letter-spacing:-0.2px}
.article-body{letter-spacing:0.1px}

/* 禁止深色科技仪表盘风格（forbidden_pattern）- 通过颜色与密度控制实现 */
