/* 设计变量（青灰与湖蓝为主色） */
:root{
  --bg:#f7f9fa;
  --paper:#ffffff;
  --teal-1:#2f6f6b; /* 青灰 */
  --blue-1:#4aa0c6; /* 湖蓝 */
  --muted:#6b6f74;
  --line:rgba(0,0,0,0.08);
  --container-min:1120px;
  --container-max:1280px; /* 在1120-1440之间取值 */
  --gap:24px;
  --type-title: ' -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial';
}

/* 基础重置 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC";background:var(--bg);color:#111}
.container{max-width:var(--container-max);min-width:var(--container-min);margin:0 auto;padding:20px}
.header-inner,.footer-inner{max-width:var(--container-max);min-width:var(--container-min);margin:0 auto;padding:0 20px}

/* 头部：报刊式通栏报头，左右分置编辑部 */
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.masthead-left{display:flex;flex-direction:column}
.site-name{font-weight:700;color:var(--teal-1);font-size:20px;letter-spacing:0.4px}
.site-sub{font-size:12px;color:var(--muted);margin-top:4px}
.masthead-right{font-size:13px;color:var(--muted);text-align:right}
.top-nav{border-top:1px solid var(--line);border-bottom:0;padding:8px 20px}
.top-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.top-nav a{color:var(--teal-1);text-decoration:none;font-size:13px}
.top-nav li{font-size:13px;color:var(--muted)}

/* 标题带：通栏但内容左右分置 */
.title-band{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;padding:22px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.page-title{grid-column:1/2;margin:0;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:0.2px;font-family:var(--type-title)}
.summary{grid-column:2/3;margin:0;color:var(--muted);font-size:14px}

/* 内容区：12列网格（桌面） */
.content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:26px 20px;background:transparent}
.article{grid-column:1 / span 8;background:var(--paper);border-left:1px solid var(--line);border-right:1px solid var(--line);padding:18px}
.sidebar{grid-column:9 / span 4;background:transparent;padding:18px;border-left:1px solid var(--line)}

/* 文章元信息与正文 */
.meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.meta .separator{margin:0 8px;color:var(--line)}
.article-body{font-size:16px;line-height:1.9;color:#222}
.article-body p{margin:0 0 14px}

/* 广告容器样式（独立不遮挡） */
.ad{background:transparent;color:var(--muted);padding:12px 16px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:18px 0}
.ad-top{border-top:0;border-bottom:1px dashed var(--line)}
.ad-middle{border-top:0;border-bottom:1px dashed var(--line)}
.ad-bottom{border-top:1px dashed var(--line);border-bottom:0}

/* FAQ 风格：编号式问答（由内容决定编号） */
.faq{margin-top:20px}
.faq .section-title{margin:0 0 12px;font-size:16px;color:var(--teal-1);display:flex;align-items:center}
.faq-body{font-size:15px;color:#333}

/* 视觉识别：章节标题带短编号线（为编号保留视觉位置，但不自动生成编号） */
.section-title{position:relative;padding-left:12px;border-left:4px solid var(--blue-1);font-weight:600}
.section-title::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:6px;height:2px;background:var(--blue-1)}

/* 相关推荐底部三列短卡（无阴影、无大圆角） */
.related-section{padding:18px 20px;border-top:1px solid var(--line);background:var(--paper);margin-top:18px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{padding:12px;border:1px solid var(--line);background:transparent;font-size:14px}
/* 禁止三列等宽营销卡片的常见样式（保证为信息短卡样式而非营销卡） */
.related-grid .promo{display:none}

/* 侧栏简洁标题 */
.aside-title{font-weight:700;color:var(--teal-1);margin-bottom:12px}
.recommend-list{display:flex;flex-direction:column;gap:12px}
.recommend-list a{color:#222;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:8px}

/* 底部 */
.site-footer{padding:14px 0;border-top:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 20px}

/* 响应式：桌面规则（>=1024px）——明确网格与非对称 */
@media (min-width:1024px){
  .container{max-width:1280px}
  .title-band{grid-template-columns:1fr 420px}
  .page-title{font-size:36px}
  .article{padding:24px}
  .sidebar{padding:22px}
  /* 在桌面端，标题与摘要左右分置成立；正文为8列，编辑推荐4列，使用分隔线而非卡片 */
}

/* 移动端规则（<=767px）：报头压缩为一行，所有栏目单列，清晰横线节奏 */
@media (max-width:767px){
  :root{--gap:12px}
  .header-inner{padding:0 12px}
  .masthead{padding:10px}
  .masthead-left{display:flex;flex-direction:row;align-items:center;gap:12px}
  .site-name{font-size:16px}
  .site-sub{display:none}
  .top-nav{display:none}

  .container{padding:12px;min-width:320px}
  .title-band{display:block;padding:12px}
  .page-title{font-size:20px}
  .summary{margin-top:8px;font-size:14px}

  .content-grid{display:block;padding:12px}
  .article{grid-column:auto;background:var(--paper);border:0;padding:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sidebar{background:transparent;padding:12px;border:0;border-top:1px solid var(--line)}

  .related-grid{grid-template-columns:1fr;gap:10px}

  /* 确保在320px时无横向滚动 */
  body,html{overflow-x:hidden}
}

/* 中等尺寸（768px - 1023px）保持单列但稍大字号 */
@media (min-width:768px) and (max-width:1023px){
  .title-band{display:block;padding:16px}
  .container{min-width:720px;padding:16px}
  .content-grid{display:block}
  .article{border-top:1px solid var(--line);padding:16px}
  .sidebar{padding:16px;border-top:1px solid var(--line)}
}

/* 可访问性小提示样式（仅样式，无行为） */
a{color:var(--teal-1)}
a:focus{outline:2px solid var(--blue-1);outline-offset:2px}