/* 全局变量与重置 */
:root{
  --bg:#f6f5f2; /* 轻纸张底色 */
  --ink:#222;
  --muted:#666;
  --accent:#4aa0c8; /* 湖蓝 */
  --teal-gray:#9fb6bb; /* 青灰 */
  --max-width:1320px; /* 在1120-1440之间 */
  --gutter:20px;
  --narrow:200px; /* 左侧刊头宽度 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,'PingFang SC','Hiragino Sans GB','Microsoft Yahei',sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:15px;
}
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px solid rgba(74,160,200,0.18)}
/* Masthead: 报刊双层报头 */
.masthead{padding:18px calc(50% - var(--max-width)/2 + 20px) 8px;position:relative}
.masthead-row{display:flex;align-items:center;gap:12px}
.masthead-top{font-weight:700;color:var(--teal-gray);font-size:18px;}
.masthead-brand{font-size:20px;color:var(--ink);font-weight:700}
.masthead-meta{color:var(--muted);font-size:13px}
.masthead-bottom{margin-top:6px;align-items:center}
.masthead-tag{color:var(--muted);font-size:13px}
.masthead-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.06),transparent);}

/* 页面整体框架：左刊头 + 宽主栏 + 侧注 */
.page-frame{display:grid;gap:24px;padding:12px calc(50% - var(--max-width)/2 + 20px) 40px;align-items:start}

.left-nav{order:0}
.left-nav ul{list-style:none;margin:0;padding:8px 0 0 0;display:flex;flex-direction:column;gap:8px}
.left-nav li{font-size:14px}
.left-nav a, .left-nav span{display:inline-block;padding:8px 10px;border-radius:4px;color:var(--muted)}
.left-nav a{color:var(--accent)}
.left-nav a:hover{background:rgba(74,160,200,0.06)}

.main-area{background:transparent}
.article{background:transparent}
.article-header h1{font-family:Georgia,'Times New Roman',serif;font-size:34px;line-height:1.12;margin:0 0 8px 0;color:var(--ink);font-weight:700;display:block;max-height:3.0em;overflow:hidden}
/* 限制标题高度以避免超过两行 */
.article-header .meta{font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center;margin:6px 0}
.article-header .summary{margin:8px 0 14px;color:var(--muted);font-size:15px}

.article-body .content{color:var(--ink);font-size:15px}

/* 视觉识别：章节标题带短编号线但不自动生成编号 */
.article-body :is(h2,h3){display:flex;align-items:center;gap:10px;margin:20px 0 10px;padding:0;font-weight:600}
.article-body :is(h2,h3)::before{content:"";display:inline-block;width:36px;height:4px;background:var(--teal-gray);border-radius:2px}

/* FAQ 表格式：桌面左问右答 */
.faq-section{margin-top:20px}
.faq-section .section-title{font-family:Georgia,'Times New Roman',serif;font-size:20px;margin:0 0 10px}
.faq-wrapper{background:transparent}
/* 期待编辑者将常见问题以子项形式提供，这里对常见结构进行表格式布局 */
.faq-inner > *{margin:0 0 10px 0}
/* 当 FAQ 使用 dl 或 .faq-item 对应时，CSS 处理左问右答 */
.faq-inner dl, .faq-inner .faq-item-list{display:block}
.faq-inner dl dt, .faq-inner .faq-item-list > .faq-item > .q{font-weight:600}

/* 下面的选择器在桌面将 Q/A 显示为两列 */
.faq-inner dl dt, .faq-inner dl dd, .faq-inner .faq-item{padding:6px 0}
.faq-inner dl{margin:0}

/* 相关阅读编号风格 */
.related-section .section-title{font-family:Georgia,'Times New Roman',serif;font-size:20px;margin:18px 0 8px}
.related-list{margin:0 0 20px 0;padding-left:20px;color:var(--muted)}
.related-list li{margin:6px 0}

/* 侧注 */
.side-note{background:transparent;padding:8px 0 0 0}
.meta-box{border-top:1px solid rgba(0,0,0,0.04);padding:10px 0}
.meta-label{font-size:12px;color:var(--muted)}
.meta-value{font-size:14px;color:var(--ink);word-break:break-all}

.site-footer{padding:18px calc(50% - var(--max-width)/2 + 20px);color:var(--muted);font-size:13px}

.ad-slot{padding:12px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-slot > *{max-width:100%}

/* --- 桌面布局：1024px 及以上 --- */
@media (min-width:1024px){
  .page-frame{grid-template-columns:var(--narrow) 1fr 260px;column-gap:28px;align-items:start}
  /* 左侧刊头纵向 */
  .left-nav{position:sticky;top:20px;align-self:start}
  .left-nav ul{flex-direction:column}

  /* 侧注与主栏分离 */
  .main-area{min-width:0}

  /* FAQ 在桌面采用左问右答表格式，尝试匹配常见 HTML 模式 */
  .faq-inner dl{display:grid;grid-template-columns:220px 1fr;column-gap:18px}
  .faq-inner dl dt{grid-column:1}
  .faq-inner dl dd{grid-column:2}

  /* 当 FAQ 以 .faq-item 列表提供 */
  .faq-inner .faq-item-list .faq-item{display:grid;grid-template-columns:220px 1fr;column-gap:18px}
  .faq-inner .faq-item-list .faq-item > .q{grid-column:1}
  .faq-inner .faq-item-list .faq-item > .a{grid-column:2}
}

/* --- 手机规则：最大宽度 767px --- */
@media (max-width:767px){
  body{font-size:15px}
  .masthead{padding:12px 12px 6px}
  .page-frame{display:block;padding:0 12px 24px}
  .left-nav{order:0;margin:8px 0}
  /* 手机端栏目条允许横向滚动或精简为横向列表 */
  .left-nav ul{flex-direction:row;overflow:auto;gap:8px;padding-bottom:6px}
  .left-nav li{flex:0 0 auto}
  .left-nav a, .left-nav span{padding:10px 12px}

  /* 主区域与侧注顺序调整：侧栏移到正文后 */
  .main-area{order:1}
  .side-note{order:2;margin-top:18px}

  .article-header h1{font-size:22px;line-height:1.18;max-height:3.0em}
  .article-header .summary{font-size:14px}

  /* FAQ 在手机端堆叠问答 */
  .faq-inner dl{display:block}
  .faq-inner dl dt,.faq-inner dl dd{display:block;padding:6px 0}
  .faq-inner .faq-item-list .faq-item{display:block}

  .related-list{padding-left:16px}

  /* 确保在320px时无横向滚动 */
  html,body{min-width:0}
  .masthead-brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 辅助：避免正文被容器强制折叠 */
.article-body .content img, .article-body .content table{max-width:100%;height:auto}

/* 可访问性：点击区域不小于44px（手机要求） */
.left-nav a, .left-nav span{min-height:44px;display:inline-flex;align-items:center}

/* 轻度分隔线而非卡片容器：遵守模块无容器要求 */
.article-header, .article-body, .faq-section, .related-section{padding:0;margin:0}