/* 通用变量与基线 */
:root{
  --bg: #fcfbf6; /* 米白 */
  --ink: #0f3b2e; /* 墨绿 */
  --muted: #6b6b64;
  --accent: #0f3b2e;
  --container-width: 1200px; /* 桌面容器在1120-1440之间，取1200 */
  --gutter: 28px;
  --radius: 6px;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-serif: Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-sans);margin:0}

.page-root{display:flex;min-height:100vh}

/* 左侧纵向刊头（仅在桌面可见） */
.side-nav{
  width:200px; /* 竖向刊头 */
  padding:28px 18px;
  display:flex;flex-direction:column;gap:18px;background:transparent;align-items:flex-start;
  border-right: none; /* 无边框风格 */
}
.side-nav .home-link{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.side-nav .nav-list{list-style:none;padding:0;margin:8px 0 0 0;color:var(--muted);font-size:14px}
.side-nav .nav-list li{padding:6px 0}
.side-nav .nav-foot{flex:1}

/* 主内容区 */
.content-area{flex:1;display:flex;align-items:flex-start}
.container{margin:32px auto;padding:0 20px;width:100%;max-width:var(--container-width)}

.masthead{padding:6px 0 18px 0}
.masthead-inner{display:flex;flex-direction:row;align-items:flex-end;gap:12px}
.masthead-label{font-size:13px;color:var(--muted)}
.masthead-sub{font-size:12px;color:var(--muted)}

.ad-slot{padding:10px 0;color:var(--muted);font-size:14px}
.ad-slot.top{margin:6px 0}
.ad-slot.middle{margin:24px 0}
.ad-slot.bottom{margin:32px 0}

.article{padding:6px 0}
.title{font-family:var(--font-serif);font-size:34px;line-height:1.1;text-align:center;margin:6px 0 10px 0;color:var(--ink)}

.meta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;color:var(--muted);font-size:13px;margin-bottom:12px}
.meta-row .published{color:var(--muted)}
.meta-row .current-time{color:var(--muted)}
.meta-row .meta-keywords{color:var(--muted)}

/* 摘要：窄色带视觉签名 */
.summary{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.summary .sig-band{width:6px;background:var(--accent);border-radius:2px;flex:0 0 6px;margin-top:4px}
.summary .summary-text{margin:0;color:var(--ink);font-size:16px;line-height:1.6;max-width:980px;text-align:left}

.section-sep{border:none;border-top:1px solid rgba(15,59,46,0.06);margin:18px 0}

/* 10/2 网格：正文与边注 */
.body-grid{display:grid;grid-template-columns:10fr 2fr;gap:28px;align-items:start}
.main-column{min-width:0}
.side-note{background:transparent;padding:8px 0}
.aside-inner{font-size:14px;color:var(--muted)}
.aside-heading{font-weight:700;color:var(--ink);margin-bottom:8px}
.aside-brief{color:var(--muted);margin:0 0 10px 0}
.aside-sep{border:none;border-top:1px solid rgba(15,59,46,0.06);margin:12px 0}

.article-body{color:var(--ink);font-size:16px;line-height:1.85;letter-spacing:0.1px}
.article-body p{margin:0 0 16px 0}

/* FAQ 编号式样：对 ol/ul 做样式，若内容为普通段落则不强制重排 */
.faq-section .section-title,
.related-section .section-title{font-size:18px;margin:18px 0 8px 0;color:var(--ink)}

.faq-body ol{counter-reset:faq}
.faq-body ol > li{counter-increment:faq;margin:12px 0;padding-left:10px}
.faq-body ol > li::marker{font-weight:700;color:var(--accent)}

.faq-body dl{margin:8px 0}
.faq-body dt{font-weight:700;margin-top:8px}
.faq-body dd{margin:4px 0 10px 0}

/* 相关阅读：关键词索引式列表 */
.related-list{display:flex;flex-wrap:wrap;gap:8px}
.related-list a{color:var(--accent);text-decoration:none;font-size:14px;padding:4px 6px}
.related-list span{color:var(--muted);font-size:14px}

.site-footer{padding:26px 0;text-align:center;color:var(--muted);font-size:13px}

/* 桌面规则（>=1024）——确保容器宽度在1120—1440之间，且左侧刊头可见 */
@media (min-width:1024px){
  .page-root{align-items:flex-start}
  .side-nav{display:flex}
  .container{width:var(--container-width);max-width:calc(var(--container-width));}
  /* 保证在大屏视觉上稳定在1200px */
  @media (min-width:1120px){
    .container{width:var(--container-width)}
  }
  .title{font-size:40px}
  .article-body{font-size:17px;line-height:1.9}
  /* 桌面特有的布局差异：边注保持在右侧，形成清楚的信息分区 */
  .side-note{padding-left:12px}
}

/* 手机规则（<=767）——侧栏并入标题下方，取消固定宽度，避免横向滚动 */
@media (max-width:767px){
  .page-root{flex-direction:column}
  .side-nav{display:none}
  .container{padding:18px;max-width:100%;width:auto}
  .masthead{padding:6px 0}
  .title{text-align:center;font-size:22px;margin-top:8px}
  .meta-row{justify-content:flex-start;flex-direction:column;align-items:flex-start}
  .summary{flex-direction:column}
  .summary .sig-band{width:100%;height:4px;border-radius:2px;margin:0 0 8px 0}
  .body-grid{display:block}
  .side-note{order:2;margin-top:12px;padding:0}
  .article-body{font-size:15px;line-height:1.8}
  .ad-slot{font-size:13px}
  .related-list{gap:10px}
  /* 确保在320px下不横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间区（768-1023）保持舒展密度 */
@media (min-width:768px) and (max-width:1023px){
  .side-nav{display:none}
  .container{padding:22px}
  .title{font-size:28px}
  .body-grid{display:block}
  .side-note{margin-top:18px}
}

/* 辅助：区分横线风格，无大阴影、无卡片边框 */
hr{background:transparent;border:none}

/* 可读性调整 */
a{color:var(--accent)}