/* 设计变量与基准（海军蓝 / 浅雾灰，系统无衬线） */
:root{
  --navy:#0b2540; /* 海军蓝 */
  --mist:#f5f5f2; /* 浅雾灰 / 轻纸张 */
  --ink:#111214;
  --muted:#5a6168;
  --accent:#24466d;
  --gap:24px;
  --content-max:1280px;
  --dense-line:1.48;
  --hr-thin:1px;
  --hr-thick:4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

/* 全局布局与表面 */
html,body{height:100%;margin:0;background:var(--mist);color:var(--ink);-webkit-font-smoothing:antialiased}
.wrap{box-sizing:border-box;margin:0 auto;padding:28px;max-width:var(--content-max)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header{border-bottom:var(--hr-thin) solid rgba(11,37,64,0.08);background:transparent}
.brand .home-link{font-weight:700;color:var(--navy);text-decoration:none;font-size:1.05rem}
.column-index ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}
.column-index li span{color:var(--muted);font-size:0.95rem}

/* 布局网格：桌面为非对称双栏，正文保持宽阔阅读列 */
.layout-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.article{background:transparent}
.article-meta h1{margin:0 0 12px 0;font-size:2rem;line-height:1.06;color:var(--navy);font-weight:800;letter-spacing:-0.01em;position:relative;padding-right:12px}
/* 标题构图：粗细横线压左 */
.article-meta h1::after{content:"";position:absolute;left:0;bottom:-18px;width:40%;height:var(--hr-thick);background:var(--accent);opacity:0.95}
.article-meta h1::before{content:"";position:absolute;left:0;bottom:-24px;width:30%;height:var(--hr-thin);background:rgba(11,37,64,0.12)}
.meta-row{margin-top:8px;color:var(--muted);font-size:0.9rem}
.summary .desc{margin-top:12px;margin-bottom:18px;color:var(--ink);line-height:var(--dense-line)}

.article-body{color:var(--ink);font-size:1rem;line-height:var(--dense-line)}
.article-body p{margin:0 0 1em 0}

.side-panel{padding-top:8px;border-left:0.5px solid rgba(11,37,64,0.04)}
.side-heading{font-weight:700;color:var(--navy);margin-bottom:8px}
.side-list{list-style:none;padding:0;margin:0 0 12px 0}
.side-list li{padding:6px 0;color:var(--muted)}
.side-note{font-size:0.9rem;color:var(--muted)}

/* 广告位样式：独立不可覆盖正文 */
.ad-slot{margin:18px 0;padding:12px;border:var(--hr-thin) dashed rgba(11,37,64,0.06);background:transparent;color:var(--muted);font-size:0.9rem}
.ad-slot *{pointer-events:auto}

/* 底部横跨区域：桌面为两栏并列，手机堆叠 */
.bottom-panels{padding:12px 0 40px 0}
.bottom-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
.faq-panel h3,.related-panel h3{margin:0 0 10px 0;color:var(--navy);font-size:1.05rem}

/* FAQ 桌面表格式：左题右答 */
.faq-list dl{margin:0;padding:0}
.faq-list dt{font-weight:600;margin:12px 0;color:var(--accent)}
.faq-list dd{margin:6px 0 12px 0;color:var(--muted)}
/* 若内容不是 dl，则为通用支持 */
.faq-list > *{margin-bottom:12px}

/* 相关阅读：带日期的分隔线列表 */
.related-list{list-style:none;padding:0;margin:0;border-top:var(--hr-thin) solid rgba(11,37,64,0.06)}
.related-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:var(--hr-thin) solid rgba(11,37,64,0.04);color:var(--ink)}
.related-list li time{color:var(--muted);font-size:0.9rem}

/* 页脚视觉签名：宽屏索引式排版 */
.site-footer{margin-top:30px;padding:24px 0 40px 0;border-top:var(--hr-thin) solid rgba(11,37,64,0.06)}
.footer-index .footer-columns{display:flex;gap:24px;align-items:flex-start;justify-content:space-between}
.footer-col{min-width:0}
.footer-index-list ol{margin:8px 0 0 0;padding-left:18px;color:var(--muted)}
.muted{color:var(--muted);font-size:0.95rem}

/* 可访问性辅助类 */
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =========== 响应式断点要求 =========== */

/* 手机端样式（最大 767px）：独立重排、章节间距缩小、底部单列 */
@media (max-width:767px){
  :root{--gap:14px}
  .wrap{padding:16px;max-width:100%}
  .header-row{flex-direction:row;align-items:center}
  .column-index ul{gap:12px}
  .layout-grid{display:block}
  .article-meta h1{font-size:1.3rem;margin-bottom:6px}
  .meta-row{font-size:0.85rem}
  .summary .desc{margin-bottom:12px;font-size:0.96rem}
  .article-body{font-size:0.98rem;line-height:1.45}
  .side-panel{border-left:none;margin-top:18px;padding-top:0}
  .bottom-grid{display:block}
  .faq-panel,.related-panel{margin-bottom:18px}
  .related-list li{flex-direction:column;align-items:flex-start;gap:6px}
  .footer-index .footer-columns{flex-direction:column;gap:12px}
  .ad-slot{margin:12px 0}
}

/* 桌面端样式（最小 1024px）：学刊式布局，容器宽度在 1120px—1440px 之间，FAQ 与推荐横跨底部 */
@media (min-width:1024px){
  .wrap{min-width:1120px;max-width:1440px;padding:32px}
  .layout-grid{grid-template-columns:1fr 320px;gap:56px}
  .article-meta h1{font-size:2.2rem}
  .article-body{font-size:1.03rem}
  .bottom-grid{grid-template-columns:1fr 420px;gap:40px}
  /* FAQ 左侧问题右侧答案的表格式（尽量兼容 dl 结构） */
  .faq-list dl{display:grid;grid-template-columns:300px 1fr;column-gap:28px}
  .faq-list dt{grid-column:1;color:var(--accent)}
  .faq-list dd{grid-column:2;margin:0;color:var(--muted)}
  /* 视觉签名在页脚更明显：索引式排版 */
  .footer-index .footer-columns{align-items:flex-start}
}

/* 禁止出现模糊、玻璃拟态、悬浮卡片等：不使用滤镜、阴影、巨大圆角 */
*{box-sizing:border-box}