:root{
  --bg-paper:#FBF9F6; /* 纸白 */
  --nav-dark:#08263f; /* 藏蓝 */
  --text:#0b1720;
  --muted:#55606a;
  --line:rgba(8,38,63,0.12);
  --max-desktop:1280px;
  --content-width:820px; /* 目标正文宽度 */
  --gutter:24px;
  --density:1.05;
}

/* 全局重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-paper);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans CJK SC', 'Liberation Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}
.page-wrap{min-height:100vh;display:flex;flex-direction:column}

/* 工具栏：极简细导航 */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:transparent;
}
.site-link{color:var(--nav-dark);text-decoration:none;font-weight:700}
.breadcrumb{color:var(--muted);font-size:13px}

/* 容器和网格 */
.container{width:100%;margin:20px auto;padding:16px}
.layout-grid{display:block}

/* 左侧章节轨道 */
.chapters{display:none}
.chapters-head{color:var(--muted);font-size:13px;margin-bottom:8px}
.chapters-body{color:var(--nav-dark);font-size:14px;white-space:pre-wrap}
.chapters-mobile{display:none;border-top:1px solid var(--line);padding:10px 16px;color:var(--nav-dark);font-size:14px}

/* 文章主体布局 */
.article{background:transparent;padding:0;margin:0}
.article-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:8px}
.title{margin:0;color:var(--nav-dark);font-size:22px;line-height:1.12;font-weight:700}
.summary{margin:0;color:var(--muted);font-size:15px;max-width:56ch}
.meta{display:flex;gap:12px;color:var(--muted);font-size:13px;margin:12px 0}
.content{color:var(--text);font-size:16px;line-height:1.8}

/* 广告占位：独立容器，不悬浮、不遮挡 */
.ad-slot{border:1px dashed var(--line);padding:12px;margin:12px 0;color:var(--muted);font-size:13px}
.ad-top{margin:0 0 8px 0}
.ad-middle{margin-top:18px}
.ad-bottom{margin:18px 0 0}

/* FAQ 横线问答列表；对于模板层面，FAQ 内容由 {{faq}} 提供，样式应用于其直接子元素 */
.faq-list > *{border-top:1px solid var(--line);padding:12px 0}
.faq-list > *:first-child{border-top:0}
.faq-list .question{font-weight:600;color:var(--nav-dark);margin-bottom:6px}
.faq-list .answer{color:var(--muted)}

/* 相关阅读：关键词索引式列表，紧凑 */
.related-list{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:6px}
.related-list > *{padding:6px 8px;border:1px solid var(--line);color:var(--nav-dark);font-size:13px}

/* 辅助隐藏文本（视觉隐藏，但保留语义） */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 票面样式：全页只使用直角和细线（无圆角、无厚阴影） */
.site-footer{border-top:1px solid var(--line);padding:14px 16px;margin-top:auto;color:var(--muted);font-size:13px}

/* 桌面端规则（必须包含）：1024px 及以上显示左侧细窄章节轨道、非对称网格、正文约820px */
@media (min-width:1024px){
  .container{max-width:var(--max-desktop);padding:28px}
  .layout-grid{
    display:grid;
    grid-template-columns:160px 1fr 200px; /* 左细轨道，中间主列，右平衡栏 */
    gap:var(--gutter);
    align-items:start;
  }
  .chapters{display:block;padding-top:8px}
  .chapters-body{font-size:14px;line-height:1.5}
  .article{grid-column:2/3;max-width:var(--content-width);}
  .rail{display:block}
  /* 标题与摘要左右分置：标题在左侧，摘要偏右起排 */
  .article-header{flex-direction:row;align-items:flex-start}
  .title{font-size:26px}
  .summary{margin-left:auto;color:var(--muted);min-width:260px}
  /* FAQ 与相关跨越主内容宽度（跨列显示） */
  .faq{grid-column:2/4}
  .related{grid-column:2/4}
}

/* 额外大屏微调，确保容器在 1120px—1440px 范围内良好表现 */
@media (min-width:1120px){
  .container{max-width:1200px}
}
@media (min-width:1440px){
  .container{max-width:1360px}
}

/* 手机端规则（必须包含）：最大宽度 767px，章节轨道下移为标题下方横线，内容恢复全宽 */
@media (max-width:767px){
  .container{padding:12px;margin:0}
  .layout-grid{display:block}
  .chapters{display:none}
  .chapters-mobile{display:block}
  .article{width:100%;max-width:100%}
  .article-header{display:block}
  .title{font-size:18px}
  .summary{margin-top:8px}
  .meta{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}
  .content{font-size:16px}
  .faq-list > *{padding:10px 0}
  .related-list{gap:8px}
  .ad-slot{margin:10px 0}
  .site-footer{text-align:center}
}

/* 防止在最小320px宽度下横向滚动 */
@media (max-width:320px){
  body{font-size:15px}
  .summary{font-size:14px}
}