/* 通用变量与系统字体 */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#b22222; /* 单一朱红强调 */
  --rail:#0f0f0f;
  --max-content:1280px; /* 在桌面规则中保证介于1120—1440 */
  --line:#e6e6e6;
  --gap:18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft Yahei", sans-serif;}
a{color:inherit;text-decoration:none}
.page-root{display:block;padding:24px 0}
/* 顶部窄报头，居中刊头与横线导航 */
.top-masthead{border-bottom:1px solid var(--line);padding:10px 0;background:transparent}
.masthead-inner{max-width:var(--max-content);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:18px}
.home-link{font-weight:700;color:var(--rail);letter-spacing:0.02em}
.topline{color:var(--muted);font-size:13px}
.topline .nav-sep{margin:0 8px;color:var(--line)}

/* 外层布局：左侧纵向刊头 + 中心内容 */
.layout-outer{display:flex;align-items:flex-start;justify-content:center}
.left-rail{display:none} /* 默认移动优先隐藏，桌面显示 */
.content-shell{width:100%;}
.article{padding:28px 16px 40px;margin:0 auto}
.article-header{max-width:100%;margin-bottom:8px}
.title{font-size:28px;line-height:1.15;margin:0 0 8px;font-weight:700;text-align:left;letter-spacing:-0.01em}
/* 标题构图：压左并用粗细横线构图（使用伪元素绘制横线） */
.title{position:relative;padding-left:6px}
.title::before{content:"";position:absolute;left:0;top:50%;height:2px;background:var(--accent);width:40px;transform:translateY(-50%)}
.title::after{content:"";position:absolute;left:48px;right:0;height:1px;background:var(--line);top:calc(50% + 6px)}

.meta{color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{color:var(--muted);margin:0 0 16px}

/* 广告容器均独立，不悬浮不覆盖 */
.ad{border-top:1px solid var(--line);padding:12px 6px;margin:18px 0;color:var(--muted);font-size:13px}

/* 正文与边注 10/2 网格的基础样式（移动端重排） */
.body-grid{display:block}
.main-content{width:100%}
.content{font-size:15px;line-height:1.48;color:var(--text)}
.content p{margin:0 0 12px}
/* 视觉签名：正文首段轻量首字强调（不改写内容） */
.content p:first-of-type::first-letter{color:var(--accent);font-weight:700;font-size:1.1em;margin-right:2px}

.side-note{margin-top:18px;border-top:1px solid transparent}
.side-title{font-size:14px;margin:0 0 6px;color:var(--accent)}
.side-text{color:var(--muted);font-size:13px;margin:0}

/* FAQ 栏：桌面为左右表格式，兼容 <dl> 结构 */
.faq{margin-top:22px}
.faq h2{font-size:16px;margin:0 0 12px}
.faq-grid{color:var(--text)}
.faq-grid dl{display:grid;grid-template-columns:1fr 2fr;gap:10px 22px;margin:0;padding:0}
.faq-grid dt{font-weight:600;color:var(--accent)}
.faq-grid dd{margin:0}
.faq-grid > *{margin:0 0 8px}

/* 相关阅读：两列摘要列表 */
.related{margin-top:22px}
.related h2{font-size:16px;margin:0 0 12px}
.related-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-list li{font-size:14px;color:var(--muted)}

.page-footer{border-top:1px solid var(--line);margin-top:28px;padding-top:12px;color:var(--muted);font-size:13px}

/* 可访问性与小屏优化 */
@media (max-width:767px){
  /* 手机端：取消固定宽度，所有内容自然重排；边注并入标题下方 */
  .masthead-inner{padding:0 12px}
  .layout-outer{padding:0 12px}
  .left-rail{display:none}
  .content-shell{padding:0}
  .article{padding:18px 0}
  .title{font-size:20px}
  .title::before{width:28px}
  .title::after{display:none}
  .body-grid{display:block}
  .side-note{order:-1;margin:8px 0 18px;border-top:0}
  .side-inner{background:transparent}
  .related-list{grid-template-columns:1fr;gap:10px}
  .faq-grid dl{grid-template-columns:1fr;}
  /* 手机端保证 320px 时不横向滚动 */
  html,body{min-width:0}
}

@media (min-width:1024px){
  /* 桌面规则：启用左侧纵向刊头，内容容器宽度限制在1120—1440之间 */
  .layout-outer{align-items:flex-start}
  .left-rail{display:block;width:84px;flex:0 0 84px;padding-top:18px}
  .left-rail .rail-inner{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-weight:700;color:var(--rail);letter-spacing:0.04em}

  .content-shell{min-width:1120px;max-width:1280px;margin:0 24px}
  .article{padding:32px}

  /* 10/2 网格：正文与边注 */
  .body-grid{display:grid;grid-template-columns:10fr 2fr;gap:28px;align-items:start}
  .main-content{min-width:0}
  .side-note{margin:0;border-top:0}

  /* FAQ 左问右答的表格式（优先识别 <dl>） */
  .faq-grid dl{grid-template-columns:200px 1fr}

  /* 相关阅读两列摘要 */
  .related-list{grid-template-columns:1fr 1fr}

  /* 视觉密度：紧凑型 */
  .content{font-size:15px;line-height:1.45}
}

/* 禁止常见圆角卡片风格与阴影（视觉禁止项） */
*{border-radius:0!important;box-shadow:none!important}
