:root{
  --bg:#F7F6F2; /* 纸白 */
  --ink:#0e2130; /* 深色文本，藏蓝系 */
  --accent:#183047; /* 藏蓝 */
  --muted:#6b7882;
  --sep:rgba(12,25,34,0.08);
  --max-width:1280px; /* 在 1120-1440 范围内 */
  --gutter:24px;
  --lead:1.45;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial;
}

/* 全局重置与版面基准 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:var(--lead);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 顶部：双层窄导航（second-nav 在移动端隐藏） */
.site-header{border-bottom:1px solid var(--sep);background:transparent}
.top-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px calc(var(--gutter));font-size:13px;color:var(--muted);
}
.top-nav .site-title{font-weight:600;color:var(--accent);text-align:center;flex:0 1 auto}
.top-nav .site-title a{color:inherit;text-decoration:none}
.top-nav .left-tools,.top-nav .right-tools{flex:1 1 0;text-align:left}
.top-nav .right-tools{text-align:right}

.second-nav{border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);background:#fff;}
.second-nav ul{list-style:none;margin:0;padding:6px calc(var(--gutter));display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.second-nav li{color:var(--muted)}
.second-nav li span{display:inline-block;padding:6px 4px}

/* 顶部广告（置于 header 之前） */
.ad{padding:10px calc(var(--gutter));font-size:13px;color:var(--muted);border-bottom:1px solid var(--sep);background:transparent}
.ad-top{border-bottom:none}

/* 页面主体容器 */
.page-wrap{padding:20px 0}
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 calc(var(--gutter));
  display:grid;
  grid-template-columns: 1fr; /* mobile default */
  gap:32px;
}

/* 文章与侧栏基本样式 */
.content{order:1}
.side{order:2}
.article-head{margin-bottom:14px}
.title{font-size:22px;margin:6px 0 8px;text-align:center;font-weight:700;color:var(--accent);line-height:1.12}
.meta{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.summary{max-width:920px;margin:0 auto 18px;padding:0 8px;text-align:left;color:var(--ink);font-size:15px}

.article-body{padding:0 8px}
.body-content{font-size:15px;color:var(--ink);line-height:1.6}

/* FAQ 区块：默认堆叠，桌面会改为表格式 */
.faq-section{margin-top:28px}
.faq-section .section-title{font-size:16px;margin:0 0 12px 0;color:var(--accent)}
.faq-wrapper{font-size:15px;color:var(--ink)}

/* 相关阅读侧栏 */
.side-box{border-left:1px solid var(--sep);padding-left:18px}
.side-box h3{font-size:14px;margin:0 0 10px;color:var(--accent)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:14px}
.related-grid > *{padding:6px 4px;border-top:1px solid transparent}

/* 广告位置样式，均为独立容器，不会遮挡或覆盖正文 */
.ad-middle{margin:22px 0;padding:12px;border:1px dashed var(--sep);background:transparent}
.ad-bottom{margin:28px 0;padding:12px;border-top:1px solid var(--sep)}

/* 页脚 */
.site-footer{border-top:1px solid var(--sep);padding:18px calc(var(--gutter));font-size:13px;color:var(--muted);text-align:center}

/* 桌面端规则：1024px 以上实行 9/3 分栏与桌面专用布局差异 */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .container{grid-template-columns:3fr 1fr;align-items:start;gap:28px}
  /* 主区与侧栏明确分栏（9/3 比例以 3fr/1fr 表现） */
  .content{order:1}
  .side{order:2}
  /* 标题构图：居中标题、摘要左对齐（摘要宽度受限并左对齐） */
  .title{font-size:28px}
  .summary{margin-left:0;text-align:left}
  .meta{justify-content:center}

  /* FAQ 表格式：左问题右答案 */
  .faq-wrapper dl{display:grid;grid-template-columns:220px 1fr;column-gap:20px;row-gap:12px}
  .faq-wrapper dt{font-weight:600;color:var(--accent)}
  .faq-wrapper dd{margin:0;color:var(--ink)}

  /* 相关阅读四列紧凑网格 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid > *{font-size:13px;border-top:1px solid var(--sep);padding-top:8px}

  /* 第二层导航保留于桌面 */
  .second-nav{display:block}

  /* 视觉签名：大面积留白，紧凑字阶在标题与副段落之间 */
  .article-head{padding-top:18px;padding-bottom:6px}
}

/* 手机端规则：最大宽度 767px，第二层导航取消，正文舒适字号 */
@media (max-width:767px){
  :root{--max-width:720px}
  body{font-size:16px}
  .container{grid-template-columns:1fr;padding:0 14px}
  .site-title{font-size:17px}
  .second-nav{display:none}
  .title{font-size:20px;padding-top:6px}
  .summary{font-size:15px}
  .meta{justify-content:flex-start;padding-left:4px}
  .article-body{padding:0}
  .side{order:3;padding-top:6px;border-top:1px solid var(--sep)}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .faq-wrapper{font-size:15px}
  /* FAQ 在手机端堆叠，问答自然上下排列 */
  .faq-wrapper dl{display:block}
  .faq-wrapper dt{margin-top:12px;font-weight:600}
  .faq-wrapper dd{margin:6px 0 0 0}
  /* 确保在 320px 时不出现横向滚动 */
  body, .container, .page-wrap{min-width:0}
}

/* 可访问性与可读性微调 */
a{color:var(--accent)}
h1,h2,h3{letter-spacing:0.2px}
button,span{vertical-align:middle}

/* 禁止使用圆角、投影等：明确覆盖可能的默认样式 */
*{border-radius:0!important;box-shadow:none!important}