/* 全局变量与基线 */
:root{
  --bg:#f7f6f4;            /* 轻纸张底色（石墨灰系浅） */
  --surface:#ffffff;      /* 内容表面（保持模块无外容器使用） */
  --text:#222222;         /* 主要文本（石墨深色） */
  --muted:#6b6b6b;        /* 次要文本 */
  --accent:#caa800;       /* 芥末黄（高亮） */
  --line:rgba(34,34,34,0.08); /* 细线 */
  --max-width:1280px;     /* 整体容器最大宽度（在1120-1440之间） */
  --gutter:24px;
  --left-w:220px;        /* 桌面左侧宽度 */
  --main-w:780px;        /* 正文宽度约780px（合同） */
  --right-w:240px;       /* 右侧相关推荐索引宽度 */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  font-size:15px; /* 紧凑型 */
  -webkit-font-smoothing:antialiased;
}
.page-root{max-width:var(--max-width);margin:18px auto;padding:0 16px}

/* 工具栏：极简细导航，站名与面包屑合并 */
.toolbar{display:flex;flex-direction:column;gap:6px;padding:6px 4px}
.tool-inner{display:flex;align-items:center;gap:12px}
.site-link{color:var(--text);text-decoration:none;font-weight:600}
.breadcrumb{color:var(--muted);font-size:13px}
.tool-sep{border:0;border-top:1px solid var(--line);margin:6px 0}

/* 布局基座：桌面三轨，移动单列 */
.layout{display:grid;gap:20px;align-items:start}

/* 左侧（元信息） */
.side-left{order:1}
.meta-list{display:flex;flex-direction:column;gap:12px;color:var(--muted);font-size:13px}
.meta-item strong{color:var(--text);font-weight:600}

/* 文章主体 */
.content-article{order:2}
.article-header{display:flex;flex-direction:row;align-items:flex-start;gap:24px}
.title{font-size:22px;margin:0;color:var(--text);line-height:1.18;font-weight:700}
.summary{margin:0;color:var(--muted);font-size:14px;max-width:520px}
.rule{border:0;border-top:1px solid var(--line);margin:14px 0}
.article-body{color:var(--text);font-size:15px}
.article-body p{margin:0 0 12px}

/* 广告容器：独立、非遮挡 */
.ad{border:1px dashed var(--line);padding:10px 12px;background:transparent;color:var(--muted);font-size:13px}
.ad-top,.ad-bottom{margin:12px 0}
.ad-middle{margin:18px 0}

/* FAQ：编号式问答（样式化有序列表），但不虚构步骤 */
.faq{margin-top:10px}
.faq .section-title{margin:0 0 8px 0;font-size:15px;color:var(--text);font-weight:600}
.faq-content ol{padding-left:20px;margin:0;color:var(--text)}
.faq-content li{margin:8px 0}

/* 右侧相关阅读：两列摘要列表（desktop） */
.side-right{order:3}
.side-title{margin:0 0 10px 0;font-size:14px;color:var(--text);font-weight:600}
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;color:var(--muted);font-size:14px}
.related-list a{color:var(--text);text-decoration:none}

/* 页脚 */
.page-footer{border-top:1px solid var(--line);margin-top:22px;padding:12px 4px;color:var(--muted);font-size:13px}

/* 桌面规则：1024px 及以上，严格三轨、正文约780px */
@media (min-width: 1024px){
  .page-root{padding:0 20px}
  .layout{grid-template-columns:var(--left-w) var(--main-w) var(--right-w);align-items:start}
  .side-left{padding-right:12px}
  .content-article{width:var(--main-w)}
  .side-right{padding-left:12px}
  /* 标题与摘要左右分置：左为标题，右为摘要（在 article header 内） */
  .article-header{align-items:flex-start}
  .title{flex:0 0 auto;max-width:520px}
  .summary{flex:1 1 auto;text-align:right}
  .summary::before{content:'';display:inline-block;width:0} /* 保持右侧对齐语义 */
}

/* 平板到窄屏（768-1023）采用流式两栏到单栏过渡 */
@media (min-width:768px) and (max-width:1023px){
  .layout{grid-template-columns: 1fr;}
  .article-header{flex-direction:column}
  .summary{text-align:left}
}

/* 手机规则：最大宽度 767px，侧边信息全部下移到正文之后，正文占满安全区 */
@media (max-width: 767px){
  .page-root{margin:8px auto;padding:0 12px}
  .layout{display:block}
  .side-left{order:3;margin-top:14px}
  .content-article{order:1}
  .side-right{order:4;margin-top:14px}

  .article-header{flex-direction:column;gap:8px}
  .title{font-size:18px}
  .summary{font-size:13px;color:var(--muted)}

  .related-list{display:block}
  .related-list > *{display:block;margin-bottom:10px}

  /* 防止横向滚动 */
  img, iframe, table{max-width:100%;height:auto}
  body{word-break:break-word}
}

/* 视觉签名：全页只使用直角和细线（无圆角、无阴影） */
*{border-radius:0}

/* 紧凑型密度与辅助样式 */
.title, .section-title, .side-title{letter-spacing:0.01em}
.muted{color:var(--muted)}

/* 无障碍与可访问性小优化 */
a:focus{outline:2px solid var(--accent);outline-offset:2px}