:root{
  --bg:#f4f7f6; /* 青灰背景基调 */
  --surface:#ffffff;
  --ink:#0e2a2a; /* 深青色文字 */
  --muted:#556b6b; /* 湖蓝偏灰用于次要文字 */
  --accent:#3aa0c9; /* 湖蓝强调色 */
  --rule:#dfeaea; /* 细分隔线 */
  --max-width:1300px; /* 容器在1120-1440之间取中间值 */
  --gap:24px;
  --mobile-gap:14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);}
.container{max-width:var(--max-width);margin:0 auto;padding:24px;}
.site-header{padding:12px 0 6px 0}
.site-head-inner{text-align:center;}
.site-title a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.site-nav{margin-top:6px;font-size:13px;color:var(--muted)}
.site-nav a{color:var(--muted);text-decoration:none;margin:0 8px}
.site-nav .nav-sep{color:var(--rule);margin:0 6px}
.header-rule{border:none;border-top:1px solid var(--rule);margin-top:12px}

.page-root{padding-bottom:20px}
.layout-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}

/* 文章 */
.article{background:transparent}
.article-header{padding:6px 0 12px 0}
.title{font-size:28px;line-height:1.18;margin:0;color:var(--ink);font-weight:700}
.meta-row{margin-top:8px;font-size:13px;color:var(--muted)}
.meta-row .meta-sep{margin:0 8px;color:var(--rule)}
.summary{margin-top:12px;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}

.article-body{margin-top:18px;color:var(--ink);line-height:1.75;word-wrap:break-word}
.article-body p{margin:0 0 14px 0}
.section-title{font-size:16px;margin:18px 0 12px 0;color:var(--accent)}

/* FAQ：桌面左问右答表格式 */
.faq-list{display:block;border-top:1px solid var(--rule);padding-top:12px}
.faq-list > *{margin:0 0 12px 0}

/* 相关阅读两列摘要列表（响应式） */
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-list > *{background:var(--surface);padding:10px;border:1px solid var(--rule);}

/* 侧栏信息 */
.side-info{background:transparent}
.info-block{border:1px solid var(--rule);padding:12px;background:var(--surface);margin-bottom:12px}
.info-title{font-size:14px;margin:0 0 8px 0;color:var(--muted)}
.small-note{font-size:13px;color:var(--muted)}

/* 广告容器（禁止浮动/覆盖/悬停） */
.ad{background:transparent;padding:12px 0;color:var(--muted)}
.ad > *{display:block}

/* 页脚视觉签名：宽屏索引式排版 */
.site-footer{border-top:1px solid var(--rule);background:transparent;padding:18px 0 40px 0}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.footer-index{display:flex;gap:24px;justify-content:space-between}
.footer-index .col{min-width:120px}
.footer-index h4{margin:0 0 8px 0;font-size:13px;color:var(--muted)}
.footer-index ul{list-style:none;padding:0;margin:0;color:var(--muted)}
.footer-note{margin-top:18px;font-size:13px;color:var(--muted)}

/* 无圆角、无阴影、细分隔线：遵守 surface 规范 */
*{border-radius:0}

/* 手机端规则：最大 767px */
@media (max-width:767px){
  .container{padding:12px}
  .layout-grid{grid-template-columns:1fr;gap:var(--mobile-gap)}
  .title{font-size:20px}
  .summary{font-size:14px}
  .article-body{font-size:15px}
  .related-list{grid-template-columns:1fr;margin-top:8px}
  .site-nav{display:block;overflow:auto;white-space:nowrap}
  .site-nav a, .site-nav span{display:inline-block;padding:6px 8px}
  /* FAQ 在移动端改为问-答顺序堆叠 */
  .faq-list{display:block}
  .faq-list > *{display:block;padding:10px;background:var(--surface);border:1px solid var(--rule)}
  /* 侧栏折叠为页面下方块 */
  .side-info{order:3}
  .footer-index{flex-direction:column;gap:12px}
  .footer-inner{padding:0 12px}
}

/* 桌面端规则：最小 1024px - 双栏非对称网格、标题配窄元信息列 */
@media (min-width:1024px){
  .container{padding:32px}
  .layout-grid{grid-template-columns:1fr 280px;gap:36px}
  .title{font-size:36px}
  .meta-row{font-size:14px}
  .summary{font-size:15px}
  .article-body{font-size:17px}
  /* FAQ 表格式：左问右答 */
  .faq-list{display:grid;grid-auto-rows:auto;gap:12px}
  /* 假定系统会将 {{faq}} 生成每条为 .faq-item 行内元素：实现两列样式的通用规则 */
  .faq-list .faq-item{display:grid;grid-template-columns:280px 1fr;gap:16px;padding:10px;border:1px solid var(--rule);background:var(--surface)}
  .faq-list .faq-item .question{font-weight:600;color:var(--muted)}
  .related-list{grid-template-columns:1fr 1fr}
  /* 侧栏固定为右窄元信息列 */
  .side-info{position:static}
  /* 页脚采取宽屏索引式三栏 */
  .footer-index{flex-direction:row}
}
