/* 主题变量与通用排版 */
:root{
  --theme:#0b2f4a; /*藏蓝*/
  --paper:#fbf8f3; /*纸白*/
  --muted:#6b6f76;
  --radius:2px;
  --max-width:1300px; /*在1120-1440区间使用*/
  --gap:24px;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html,body{height:100%;margin:0;background:var(--paper);color:#111;font-family:var(--font-stack);-webkit-font-smoothing:antialiased;}

/* 小圆角、浅边框、无阴影 */
.container, .side-block, .article{border-radius:var(--radius);border:1px solid rgba(11,47,74,0.06);background:transparent}

a{color:var(--theme);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{padding:10px 16px;border-bottom:1px solid rgba(11,47,74,0.06);}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px}
.brand a{font-weight:700;color:var(--theme);font-size:0.95rem}
.mini-nav{color:var(--muted);font-size:0.85rem}

/* 页面主容器 */
.page-wrap{padding:18px 12px}
.container{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--gap);position:relative}

/* 贯穿页面的1px主题竖线（视觉识别） */
.container::before{content:"";position:absolute;left:50%;top:0;height:100%;width:1px;background:var(--theme);opacity:0.08;transform:translateX(-50%);pointer-events:none}

/* 内容列与侧栏基础 */
.content-column{padding:8px}
.side-column{padding:8px}
.article{padding:14px;background:transparent}
.article-header{display:block;margin-bottom:12px}

/* 标题组合：大标题 + 窄元信息列（在桌面生效） */
.title{font-size:1.6rem;line-height:1.18;margin:0;color:#0b2330;font-weight:700}
.meta-col{margin-top:8px;color:var(--muted);font-size:0.9rem}
.meta-row{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:0.88rem}
.summary{margin-top:8px;color:#222;line-height:1.6}

.article-body{margin-top:12px;color:#222;line-height:1.7}
.article-body p{margin:0 0 1em 0}

.subhead{font-size:1.05rem;margin:18px 0 8px 0;color:#0b2740}
.faq-grid{display:block;gap:12px}

.side-block{padding:12px;margin-bottom:12px}
.side-title{font-size:0.95rem;margin:0 0 8px 0;color:var(--theme)}
.keywords{margin:0;color:var(--muted);word-break:break-word}
.related-list{margin:0;padding-left:18px;color:var(--muted)}
.related-list li{margin:8px 0}

.ad-slot{padding:12px;margin:12px auto;border-radius:var(--radius);background:transparent;border:1px dashed rgba(11,47,74,0.06);color:var(--muted);font-size:0.95rem}
.ad-slot *{max-width:100%}

.site-footer{border-top:1px solid rgba(11,47,74,0.06);padding:14px 12px;color:var(--muted);font-size:0.9rem}
.footer-inner{max-width:var(--max-width);margin:0 auto}

/* ---- 桌面规则：双栏、非对称网格、标题配窄元信息列，正文与FAQ宽窄交替 ---- */
@media (min-width:1024px){
  :root{--max-width:1300px}
  .container{grid-template-columns: 1fr 340px;align-items:start;gap:32px;padding:20px}

  /* 大标题配窄元信息列：在同一行呈现 */
  .article-header{display:grid;grid-template-columns: 1fr 220px;align-items:start;gap:20px}
  .title{font-size:2.1rem}
  .meta-col{background:transparent;padding-left:6px;border-left:1px solid rgba(11,47,74,0.06);min-height:48px}

  /* 正文宽（跨到左侧大列），FAQ采用窄列排布（交替布局） */
  .article-body{grid-column:1/2}
  .faq-section{grid-column:1/2}

  /* 侧栏视觉上形成对比，保持简洁 */
  .side-column{position:relative}
  .side-block{background:transparent}

  /* FAQ 两列在桌面上仍在文章区域内显示，但内部两列排列 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

  /* 让部分侧栏元素与中线产生对话：竖线穿过中间 */
  .container::before{left:calc(100% - 340px - 32px);opacity:0.06}
}

/* ---- 手机规则：紧凑连续、单列、FAQ 单列 ---- */
@media (max-width:767px){
  :root{--max-width:640px}
  .container{padding:12px;grid-template-columns:1fr;gap:12px}

  .site-header{padding:8px}
  .header-inner{padding:4px 8px}

  /* 恢复标题与元信息垂直堆叠，避免首屏空白 */
  .article-header{display:block}
  .title{font-size:1.25rem}
  .meta-col{margin-top:6px}
  .summary{font-size:0.95rem}

  .article-body{font-size:15px}

  /* FAQ 单列 */
  .faq-grid{display:block}

  /* 侧栏下移成区块列表 */
  .side-column{order:2}
  .content-column{order:1}

  /* 竖线缩小、靠近中线但不破坏阅读 */
  .container::before{left:50%;opacity:0.05}

  /* 广告与内容保持独立区块，不固定不悬浮 */
  .ad-slot{margin:10px 0}
}

/* 可访问性与小屏优化 */
.title, .subhead{word-break:break-word}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}