/* 全局变量与基础 */
:root{
  --bg:#f4f6f9; /* 浅雾灰背景 */
  --paper:#ffffff;
  --accent:#0b345a; /* 海军蓝 */
  --muted:#6b7280;
  --line:#e6e9ee;
  --max-width:1280px; /* 在1120-1440之间，采用1280作为中点 */
  --gutter:28px;
  --type-serif: Georgia, 'Times New Roman', serif;
  --type-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Noto Sans CJK SC', sans-serif;
}

/* 基本版面 */
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--type-sans);
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}

.masthead{
  background:transparent;
  padding:18px var(--gutter);
}
.masthead-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.brand a{font-weight:700;color:var(--accent);font-family:var(--type-serif);letter-spacing:0.4px}
.home-link a{font-size:14px;color:var(--muted)}

.page-wrap{display:block;padding:24px 16px;}
.sheet-grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}

/* 文章区样式：偏移纸张感（桌面） */
.article{
  background:var(--paper);
  padding:28px 36px 32px 64px; /* 左侧多留，配合标题越界 */
  box-sizing:border-box;
  outline: none;
}

.article-head{padding-bottom:6px}
.article-title{
  font-family:var(--type-serif);
  font-size:30px;
  line-height:1.15;
  margin:0 auto 12px; /* 居中 */
  text-align:center;
  color:var(--accent);
  font-weight:700;
  max-width:90%;
  /* 向左越出正文基线，桌面端会被覆盖为负左边距 */
}

.meta{display:flex;gap:12px;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:10px}
.summary{max-width:78%;margin:0;font-size:15px;color:#1f2937;text-align:left}
.lead-divider{border:0;border-top:1px solid var(--line);margin:18px 0}

.content{font-size:16px;color:#111827;line-height:1.72;word-wrap:break-word}
.content p{margin:0 0 12px}

/* FAQ：桌面左问右答表格式 */
.faq-section{margin-top:22px}
.faq-section .section-title{font-family:var(--type-serif);font-size:18px;color:var(--accent);margin:0 0 12px}
.faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
/* 假设 {{faq}} 输出为一组问答节点；以容器样式支持左问右答 */
.faq-item{display:flex;flex-direction:row;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.faq-q{width:34%;font-weight:600;color:var(--accent);font-size:14px}
.faq-a{flex:1;color:#111}

/* 侧边栏：窄边注 */
.side-note{padding:18px 20px;background:transparent}
.side-inner{position:sticky;top:22px}
.side-heading{font-family:var(--type-serif);color:var(--accent);font-size:15px;margin-bottom:10px}
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-list a, .related-list .item{display:block;padding:8px 6px;border-top:1px solid var(--line);color:#0f1724;font-size:14px}

/* 广告槽为独立容器，不悬浮、不遮盖 */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px 16px;box-sizing:border-box;min-height:48px}
.ad-slot > *{display:block}

.site-footer{padding:18px 16px;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-width);margin:0 auto;text-align:center}

/* 视觉签名：章节标题带短编号线但不自动生成编号（用短线与点组合装饰） */
.section-title{position:relative;padding-left:12px}
.section-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:2px;background:var(--accent);border-radius:1px}
.section-title::after{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--accent);border-radius:50%}

/* 章节横线风格，表面保持无边框，仅使用横线 */
.article hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* 密集紧凑 */
.article, .side-note{line-height:1.6}

/* 禁止玻璃/模糊/重阴影/大圆角：不使用这些效果 */

/* 桌面规则（必须存在） */
@media (min-width:1024px){
  body{font-size:16px}
  .sheet-grid{grid-template-columns:1fr 300px;gap:36px;padding:0}
  .article{padding-left:72px;padding-right:36px}
  /* 标题向左越出正文基线 */
  .article-title{transform:translateX(-8%);text-align:center}
  /* 内容容器宽度在1120-1440之间：通过max-width控制 */
  .page-wrap{padding:30px}
  .article{border-radius:0}
  /* FAQ: 两列模拟“左问右答”的表格式 */
  .faq-grid{grid-template-columns:1fr}
  .faq-item{align-items:flex-start}
  /* 侧边为注解与相关阅读（窄侧栏） */
  .side-inner{padding-left:8px}
  .related-list{grid-template-columns:1fr 1fr}
}

/* 手机规则（必须存在） */
@media (max-width:767px){
  :root{--gutter:16px}
  .sheet-grid{display:block}
  .article{padding:18px;margin:0;border-radius:0}
  .article-title{font-size:20px;transform:none;text-align:center}
  .summary{max-width:100%}
  .meta{justify-content:flex-start;padding-top:6px}
  .side-note{padding:0;margin-top:18px}
  .side-inner{position:relative;top:auto}
  .related-list{grid-template-columns:1fr;gap:8px}

  /* FAQ 在手机上堆叠（左问右答改为上下） */
  .faq-item{flex-direction:column}
  .faq-q{width:auto;padding-bottom:6px}

  /* 取消所有越界与偏移，回到安全边距内 */
  .article-title{margin-left:0;margin-right:0}
  .ad-slot{padding-left:16px;padding-right:16px}
}

/* 保证 320px 下不横向滚动 */
@media (max-width:320px){
  body{font-size:15px}
  .article{padding-left:12px;padding-right:12px}
  .masthead{padding-left:12px;padding-right:12px}
}