/* 样式说明：遵循报刊式视觉、左窄右宽 3:9 网格；黑白配与朱红强调；无圆角阴影，使用横线分章 */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#b30000; /* 朱红强调色 */
  --container-min:1120px;
  --container-max:1440px;
  --max-width:1200px;
  --gap:28px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
.page-header{border-bottom:1px solid #eee;padding:18px 0}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;display:flex;align-items:flex-start}
.masthead{display:flex;flex-direction:row;align-items:flex-start;gap:18px}
.site-id{display:flex;flex-direction:column;align-items:flex-start}
.home-link{font-weight:700;color:var(--text);font-size:18px}
.site-sub{color:var(--muted);font-size:12px;margin-top:4px}
.site-nav{display:flex;flex-direction:column;gap:6px;margin-left:8px}
.site-nav .nav-item{font-size:13px;color:var(--muted)}

/* 布局容器：左 3 右 9 的逻辑；在桌面规则中覆盖为了精确三列：九列 */
.page-wrapper{padding:30px 0}
.container{width:min(var(--max-width),90%);max-width:var(--max-width);margin:0 auto;display:grid;gap:var(--gap);align-items:start}
.left-rail{grid-column:1 / 2}
.content-area{grid-column:2 / -1}
.left-rail-inner{position:relative}

/* 默认移动优先：单列流，左轨下移为紧凑信息带（mobile_contract） */
.container{grid-template-columns:1fr;}
.left-rail{order:2}
.content-area{order:1}

.article-head{padding:14px 0 8px;border-top:1px solid transparent}
.article-title{font-size:20px;line-height:1.12;margin:6px 0 8px;text-align:center;font-weight:800;letter-spacing:-0.02em}
.article-summary{max-width:100%;text-align:left;color:var(--muted);margin:0 0 18px;padding:0 6px}

.article-body{padding:6px 0}
.content-html{color:var(--text);font-size:16px;line-height:1.9}
.content-html p{margin:0 0 1em}

.ad-container{margin:18px 0;padding:10px;background:transparent;color:var(--muted);border-top:1px solid #f3f3f3}
.ad-container:not(:empty){font-size:13px}

.section-title{font-size:15px;color:var(--text);border-top:1px solid #ececec;padding-top:12px;margin:18px 0 12px}

/* FAQ：移动端堆叠 */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{padding:10px 0;border-bottom:1px solid #f2f2f2}
.faq-item .q{color:var(--accent);font-weight:600}
.faq-item .a{color:var(--muted);margin-top:6px}

/* Related：三列短卡（编辑式，无阴影） */
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-card{padding:10px 6px;border-top:1px solid #f0f0f0}
.related-card .r-title{font-size:14px;color:var(--text)}
.related-card .r-meta{font-size:12px;color:var(--muted);margin-top:6px}

.site-footer{border-top:1px solid #eee;padding:18px 0;margin-top:30px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;color:var(--muted);font-size:13px}

/* 元信息纵向排列视觉签名（桌面专属），桌面时左侧轨道转为窄列并固定于视窗可见 */
.meta-rail{display:flex;flex-direction:row;gap:12px;align-items:center}
.meta-rail time,.meta-rail .current,.meta-rail .kws{font-size:12px;color:var(--muted)}

.index-title{font-size:13px;color:var(--accent);font-weight:700;margin-bottom:6px}
.index-list{margin:0;padding-left:18px;color:var(--muted);font-size:13px}

/* ----------------- 桌面规则（必须包含 @media (min-width: 1024px)） ----------------- */
@media (min-width:1024px){
  .container{grid-template-columns:repeat(12,1fr);max-width:1200px}
  .left-rail{grid-column:1 / span 3;padding-right:18px}
  .content-area{grid-column:4 / span 9;padding-left:18px}

  /* 左侧元信息沿边缘纵向排列（visual_signature） */
  .left-rail-inner{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
  .article-index{align-self:stretch}
  .meta-rail{flex-direction:column;align-items:flex-start;gap:8px;padding-left:6px;border-left:2px solid transparent}
  .meta-rail time,.meta-rail .current,.meta-rail .kws{writing-mode:horizontal-tb}

  /* 标题布局：标题居中，摘要左对齐 */
  .article-title{text-align:center;font-size:28px}
  .article-summary{text-align:left;max-width:720px}

  /* 内容密度舒展 */
  .content-html{font-size:17px;line-height:1.95}

  /* FAQ：桌面为左问右答表格式（faq_pattern） */
  .faq-list{display:grid;grid-template-columns:1fr 2fr;gap:0}
  .faq-item{display:flex;flex-direction:row;align-items:flex-start;padding:12px 0;border-bottom:1px solid #f5f5f5}
  .faq-item .q{width:100%;font-weight:700;color:var(--accent);min-width:160px}
  .faq-item .a{width:100%;color:var(--muted)}

  /* 相关阅读：底部三列短卡（但避免等宽营销气质，使用编辑式轻分割） */
  .related-grid{grid-template-columns:1fr 1.05fr 0.95fr;gap:16px}
  .related-card{padding:12px}
}

/* ----------------- 手机规则（必须包含 @media (max-width: 767px)） ----------------- */
@media (max-width:767px){
  body{padding-bottom:24px}
  .header-inner{padding:0 14px}
  .masthead{flex-direction:column;align-items:flex-start}
  .site-nav{flex-direction:row;gap:12px}
  .site-nav .nav-item{font-size:12px}

  .container{width:100%;padding:0 12px}
  .left-rail{order:2;padding:0}
  .left-rail-inner{flex-direction:row;justify-content:space-between;align-items:center}
  /* 左栏变成标题下方的紧凑信息带（mobile_contract） */
  .meta-rail{flex-direction:row;gap:10px;font-size:12px}
  .index-list{display:none} /* 精简目录项，移动端保留紧凑信息带 */

  .article-title{font-size:18px;text-align:left}
  .article-summary{font-size:13px;padding:0}
  .content-html{font-size:15px}

  .faq-list{display:flex;flex-direction:column}
  .faq-item{flex-direction:column}

  .related-grid{grid-template-columns:1fr}
  .related-card{padding:10px}

  /* 确保在 320px 下不产生横向滚动 */
  .home-link{word-break:break-word}
  .content-html img{max-width:100%;height:auto}
}

/* 无圆角、无阴影、无浮动广告（广告容器仅为占位） - 强制避免禁用样式 */
.ad-container{box-shadow:none;border-radius:0}
