:root{
  --bg:#fbfcfb; /* 轻纸张底色 */
  --muted:#6c7b7f; /* 青灰 */
  --accent:#4aa6d6; /* 湖蓝 */
  --text:#122022;
  --max-width:1280px; /* 在1120-1440之间取中值 */
  --gap:20px;
  --gutter:24px;
  --radius:6px;
  --ui-font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--ui-font);-webkit-font-smoothing:antialiased}
.page-wrap{max-width:var(--max-width);margin:18px auto;padding:12px;display:flex;flex-direction:column;gap:18px}
.site-header{border-bottom:1px solid rgba(18,32,34,0.06);padding:10px 12px;background:transparent}
.header-inner{display:flex;justify-content:space-between;align-items:baseline}
.site-title{font-weight:700;color:var(--text);text-decoration:none;font-size:18px}
.header-meta{color:var(--muted);font-size:13px}
/* 视觉签名：页头与正文采用不同对齐基线（页头靠页边，正文有内缩） */
.main-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:18px;align-items:start;padding-top:6px}
.eyebrow{grid-column:1 / span 8;color:var(--accent);font-size:13px;letter-spacing:0.6px;padding-left:48px}
.page-title{grid-column:1 / span 8;margin:0;padding:6px 0 2px 48px;font-size:22px;line-height:1.15;font-weight:700}
.meta-row{grid-column:1 / span 8;padding-left:48px;color:var(--muted);font-size:13px;display:flex;gap:12px;align-items:center}
.summary{grid-column:1 / span 8;padding-left:48px;margin:10px 0 6px;color:var(--muted);font-size:15px}

/* article spans 8 columns on desktop */
.article{grid-column:1 / span 8;padding-left:48px}
.article .content{color:var(--text);font-size:15px;line-height:1.6}
.article h2{font-size:18px;margin-top:1em}

/* aside (右侧信息栏) 含多个小模块 */
.right-rail{grid-column:9 / span 4;padding-left:0;padding-right:6px}
.rail-box{border-left:3px solid rgba(74,166,214,0.09);padding:10px 12px;margin-bottom:12px;background:transparent}
.rail-box h4{margin:0 0 6px 0;font-size:13px;color:var(--muted)}
.rail-box p{margin:0;color:var(--muted);font-size:14px}
.rail-key{color:var(--accent);font-weight:600}
.rail-box.small p{font-size:13px}

/* related 三列短卡，但无阴影，简洁 */
.related{grid-column:1 / span 8;padding-left:48px;margin-top:12px}
.related h3{margin:0 0 8px 0;font-size:15px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.related-grid a{display:block;padding:10px;border:1px solid rgba(18,32,34,0.05);text-decoration:none;color:var(--text);font-size:14px}

/* FAQ 编号式问答样式 */
.faq{grid-column:1 / span 8;padding-left:48px;margin-top:14px}
.faq h2{margin:0 0 8px 0;font-size:16px}
.faq ol{margin:0;padding-left:18px;color:var(--muted)}
.faq li{margin:10px 0}
.faq li strong{display:block;color:var(--text);margin-bottom:6px}

/* 广告槽样式：独立容器、不可悬浮 */
.ad-slot{width:100%;padding:8px;margin:6px 0;background:transparent;border:1px dashed rgba(18,32,34,0.04);color:var(--muted);font-size:14px}
.ad-slot-top{grid-column:1 / -1}
.ad-slot-middle{margin-top:18px}
.ad-slot-bottom{grid-column:1 / -1}

.site-footer{padding:16px 12px;text-align:center;color:var(--muted);font-size:13px}

/* 桌面专属（>=1024px）——明确规则，满足合同 */
@media (min-width:1024px){
  .page-wrap{padding:18px}
  :root{--max-width:1200px}
  .main-grid{grid-auto-rows:min-content}
  /* 确保标题横跨文章列（已通过 grid-column 设置），侧栏自摘要下方开始（源码顺序已保证） */
  .site-title{font-size:20px}
  .page-title{font-size:28px;padding-left:48px}
  .article .content{font-size:16px}
  .related-grid a{height:56px;overflow:hidden}
}

/* 手机专属（<=767px）——单列、侧栏移到正文、FAQ之后，相关推荐改为横向分隔列表 */
@media (max-width:767px){
  .page-wrap{margin:8px;padding:10px}
  .main-grid{display:flex;flex-direction:column;gap:12px}
  .eyebrow{padding-left:12px}
  .page-title{padding-left:12px;font-size:18px}
  .meta-row{padding-left:12px}
  .summary{padding-left:12px}
  .article{padding-left:12px}
  .right-rail{order:3;padding:0}
  /* 将侧栏放到 FAQ 之后（FAQ 为 order:2），通过 order 控制 */
  .faq{order:2}
  .related{order:4;padding-left:12px}
  /* 相关推荐在手机为“横向分隔列表”，但不得横向滚动（在320px下不滚动） */
  .related-grid{display:flex;flex-wrap:wrap;gap:8px}
  .related-grid a{flex:1 1 calc(50% - 8px);border-left:none;border-right:none;padding:10px;border-top:1px solid rgba(18,32,34,0.04)}
  .rail-box{border-left:none;border-top:1px solid rgba(18,32,34,0.04);padding:10px}
  .ad-slot{font-size:13px}
}

/* 无滚动、无截断保护 */
body,html{overflow-x:hidden}
p,li{word-wrap:break-word;word-break:break-word}