/* 全局变量与基础排版 */
:root{
  --brick:#9b2f2a; /* 砖红 */
  --sand:#f7efe6;  /* 砂岩白 */
  --text:#222222;
  --muted:#6d6d6d;
  --max-content-width:1320px; /* 置于桌面范围内（1120—1440 的中位数区域） */
  --meta-width:220px; /* 桌面元信息列宽 */
  --gutter:28px;
  --baseline:1.6;
  --rule:1px solid rgba(0,0,0,0.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--text);background:var(--sand);-webkit-font-smoothing:antialiased}
.band{width:100%;padding:20px 0}
.site-inner{margin:0 auto;padding:0 20px}
.header-band{background:transparent}
.header-inner{max-width:var(--max-content-width);display:flex;flex-direction:column;align-items:center;margin:0 auto}
.brand{font-weight:700;color:var(--brick);font-size:20px}
.brand .home-link{text-decoration:none;color:inherit}
.header-rule{width:160px;border:none;border-top:2px solid rgba(0,0,0,0.06);margin:12px 0}

/* 布局网格：桌面与移动两个独立排版 */
.layout-grid{display:grid;gap:0}
.article-area{background:transparent}

/* 标题带 */
.title-band{background:var(--sand);padding:28px 20px;border-top:var(--rule);border-bottom:var(--rule)}
.page-title{margin:0 0 12px 0;font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.summary{margin:0;color:var(--muted);font-size:15px;max-width:70ch}

/* 正文带 */
.content-band{background:white;padding:34px 20px;border-bottom:var(--rule)}
.content-body{color:var(--text);line-height:var(--baseline);font-size:16px;max-width:78ch}
.content-body p{margin:0 0 1em}
.content-body h2, .content-body h3{margin:1.2em 0 0.4em}

/* FAQ 与推荐 */
.faq-band, .related-band{background:var(--sand);padding:24px 20px;border-top:var(--rule)}
.section-title{margin:0 0 12px 0;font-size:16px;color:var(--brick)}
.faq-list{color:var(--text)}
.related-list{margin:0;padding-left:20px;color:var(--text)}
.related-list > li{margin:0 0 10px}

/* 广告带样式（不浮动、不覆盖） */
.ad-band{background:transparent;padding:12px 20px;text-align:center;color:var(--muted);font-size:14px}

/* 元信息纵向栏（桌面特色视觉签名） */
.meta-rail{padding:14px 12px}
.meta-stack{display:flex;flex-direction:column;gap:12px;color:var(--muted);font-size:13px}
.meta-item{border-left:3px solid rgba(0,0,0,0.04);padding-left:10px}
.kw{color:var(--brick)}

.footer-band{background:transparent;padding:18px 0;color:var(--muted)}
.footer-inner{max-width:var(--max-content-width);margin:0 auto;text-align:center}

/* ===== 桌面规则：1024px 及以上即启用桌面风格 ===== */
@media (min-width:1024px){
  .site-inner{max-width:var(--max-content-width);padding:0 24px}
  /* 主体采用非对称双栏：元信息窄列 + 主文章区 */
  .layout-grid{display:grid;grid-template-columns:var(--meta-width) 1fr;gap:36px;align-items:start}
  .meta-rail{position:relative}
  .article-area{padding-left:0}
  /* 标题组合：大标题配窄元信息列（视觉上元信息沿边缘纵向排列） */
  .title-band{padding:36px 0}
  .page-title{font-size:40px}
  .summary{font-size:15px}
  /* 正文保持舒适阅读宽度，并在大屏下居中为书写纸张式视觉 */
  .content-band{display:flex;justify-content:center;padding:40px 0}
  .content-body{max-width:840px;padding:0 12px}
  /* FAQ 与相关阅读作为独立横向色带 */
  .faq-band, .related-band{padding:28px 0}
  .ad-top,.ad-bottom{padding:18px 0}
}

/* ===== 手机规则：最大宽度 767px，所有色带取消过宽内边距并自然单列 ===== */
@media (max-width:767px){
  :root{--gutter:16px}
  body{background:var(--sand)}
  .site-inner{padding:0 14px}
  .layout-grid{display:block}
  .meta-rail{order:2;padding:12px 0}
  .meta-stack{flex-direction:row;flex-wrap:wrap;gap:8px}
  .meta-item{border-left:none;padding-left:0;border-top:1px solid rgba(0,0,0,0.04);padding-top:8px;width:100%}
  .title-band{padding:18px 0}
  .page-title{font-size:22px}
  .summary{font-size:14px}
  .content-band{padding:18px 0}
  .content-body{max-width:100%;padding:0;font-size:15px}
  .faq-band,.related-band{padding:16px 0}
  /* 色彩轻量化：在手机端颜色仅作轻量区分（使用更浅背景） */
  .content-band{background:#ffffff}
  .faq-band,.related-band{background:#fbf7f3}
  .ad-band{padding:10px 0}
  .header-rule{width:80px}
}

/* 可访问性与细节 */
a{color:var(--brick)}
.page-title, .section-title{line-height:1.05}
@media (min-width:1120px){
  /* 在更大屏幕上确保容器仍然在合同规定区间内 */
  .site-inner{max-width:1320px}
}