/* 主题色与基础变量 */
:root{
  --bg: #F5F1EC; /* 象牙白 */
  --ink: #26202A; /* 深紫灰偏黑 */
  --muted: #6E6770;
  --accent: #3b2f45; /* 深紫灰 */
  --page-width: 1280px; /* 在1120-1440范围内 */
  --left-width: 220px;
  --center-width: 780px;
  --right-width: 240px;
  --gutter: 28px;
  --line: rgba(38,32,42,0.08);
  --related-bg: #26202A; /* 反向色块 */
  --related-ink: #F5F1EC;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* 页面基础 */
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.7;
  font-size:16px;
}

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

/* 顶部刊头 */
.site-header{padding:20px 16px 8px;text-align:center}
.masthead .site-name{font-weight:700;color:var(--ink);font-size:20px}
.header-divider{border:0;border-top:1px solid var(--line);margin:12px auto 0;max-width:720px}

.top-ad, .ad-middle, .ad-bottom{max-width:var(--center-width);margin:18px auto;padding:6px 8px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px}
.top-ad{max-width:var(--page-width);}

/* 页面三轨布局容器 */
.page-wrap{
  display:grid;
  gap:var(--gutter);
  padding:20px 16px 40px;
  margin:0 auto;
  width:calc(100% - 40px);
  max-width:var(--page-width);
  align-items:start;
}

/* 左侧与右侧默认隐藏于窄屏，由媒体查询控制 */
.side-left, .side-right{font-size:14px;color:var(--muted)}
.side-left .meta-block-title{font-weight:600;margin-bottom:8px}
.meta-list{margin:0;padding:0;border-top:1px solid var(--line);}
.meta-list dt{font-size:12px;color:var(--muted);margin-top:10px}
.meta-list dd{margin:4px 0 10px 0;color:var(--ink)}

/* 中央内容 */
.content-column{padding:0 8px}
.article .title{font-family:var(--serif);font-size:28px;color:var(--ink);margin:0 0 10px;line-height:1.18}
.article-meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.summary{background:transparent;border-top:1px solid var(--line);padding-top:12px;margin-top:0;color:var(--muted)}
.article-body{margin-top:18px;color:var(--ink);font-size:16px}
.article-body p{margin:0 0 14px}

/* FAQ 样式 (桌面：左问右答) */
.faq-section{margin-top:28px}
.faq-section .section-title{font-size:16px;margin:0 0 10px}
.faq-wrap{border-top:1px solid var(--line);padding-top:12px}
/* 默认，移动端与不规则内容回退到流式 */
.faq-wrap dl{margin:0}
.faq-wrap dt{font-weight:600;margin-top:12px}
.faq-wrap dd{margin:4px 0 12px 0}

/* 相关阅读（右侧） 视觉识别：反向色块标题 */
.side-right{padding-left:6px}
.related-header{background:var(--related-bg);color:var(--related-ink);padding:8px 10px;font-weight:700;margin-bottom:8px}
.related-list{border-top:1px solid var(--line);padding-top:10px}
.related-list a, .related-list div{display:block;padding:8px 0;border-bottom:1px dashed var(--line);color:var(--ink)}
.related-list time{display:block;color:var(--muted);font-size:13px;margin-top:6px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:16px;color:var(--muted);text-align:center;font-size:13px}

/* 禁止使用阴影等视觉套路（遵守 forbidden_pattern） */
*{box-sizing:border-box}

/* 桌面规则：三列非对称网格；中间列固定为约780px */
@media (min-width:1024px){
  .page-wrap{grid-template-columns:var(--left-width) var(--center-width) var(--right-width)}
  .side-left{display:block;padding-right:8px}
  .content-column{order:2}
  .side-right{display:block}

  /* FAQ 左问右答表格式（桌面） */
  .faq-wrap{display:block}
  .faq-wrap dl{display:grid;grid-template-columns:200px 1fr;gap:18px 24px}
  .faq-wrap dt{grid-column:1;color:var(--accent);padding-top:4px}
  .faq-wrap dd{grid-column:2;margin:0;color:var(--ink)}

  /* 标题构图：大标题配窄元信息列的视觉感觉通过左右侧栏与留白实现 */
  .article .title{font-size:36px}
}

/* 手机规则：宽度320px无横向滚动；侧栏内容下移到正文之后 */
@media (max-width:767px){
  body{font-size:15px}
  .page-wrap{display:block;padding:14px 12px}
  .side-left, .side-right{display:block;padding:12px 0;border-top:1px solid var(--line);background:transparent}
  .side-left .meta-block-title, .related-header{font-size:14px}
  .content-column{order:0}
  .side-left{order:1}
  .side-right{order:2}

  .article .title{font-size:20px}
  .article-body{font-size:15px}

  /* FAQ 在移动端恢复自然堆叠 */
  .faq-wrap dl{display:block}
  .faq-wrap dt{margin-top:12px}
  .faq-wrap dd{margin-left:0}

  /* 广告适配 */
  .top-ad, .ad-middle, .ad-bottom{width:100%;max-width:100%;margin:14px 0}
}

/* 中间宽度区间（768-1023）使用更简洁的两列：正文优先 */
@media (min-width:768px) and (max-width:1023px){
  .page-wrap{display:grid;grid-template-columns:1fr;max-width:900px}
  .side-left, .side-right{display:block}
  .article .title{font-size:26px}
}