/* 基础变量与复位 */
:root{
  --bg: #fafafa;
  --paper:#ffffff;
  --ink:#222226; /* 石墨灰 */
  --accent:#caa900; /* 芥末黄 */
  --muted:#6b6b6b;
  --radius:2px; /* surface */
  --border:1px solid rgba(34,34,38,0.06);
  --max-width:1280px; /* 在 1120-1440 之间 */
  --gap:18px; /* 紧凑密度 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --serif: Georgia, "Times New Roman", Times, serif; /* 人文杂志宽松型 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
.header-inner, .footer-inner, .container{max-width:var(--max-width);margin:0 auto;padding:18px}
.site-header{border-bottom:var(--border);background:transparent}
.site-header .header-inner{display:flex;align-items:center;gap:16px}
.brand{font-weight:700;color:var(--ink);font-size:1rem}
.nav ul{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.nav li span{font-size:0.95rem;color:var(--muted)}

/* 广告容器（独立，不干扰正文） */
.ad{max-width:var(--max-width);margin:12px auto;padding:10px;border-radius:var(--radius);border:var(--border);background:var(--paper);color:var(--muted);font-size:0.95rem}

/* 文章头部 */
.article-head{padding:8px 0 18px}
.title{margin:0;color:var(--ink);font-size:1.9rem;text-align:center;letter-spacing:0.2px}
.meta{display:flex;justify-content:center;gap:12px;margin-top:8px;color:var(--muted);font-size:0.88rem}
.summary{margin:14px 0 0;padding:10px;border-radius:var(--radius);border:var(--border);background:var(--paper);color:var(--muted);text-align:left;font-family:var(--sans);font-size:1rem}

/* 主区域网格（默认浅堆栈） */
.grid{display:block;margin-top:18px}
.content{background:transparent;border-radius:var(--radius)}
.content .body{padding:0 0 12px;font-size:1rem;color:var(--ink)}
.side{margin-top:18px}
.side-block{background:var(--paper);border:var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.side-title{margin:0 0 10px;font-size:0.98rem;color:var(--ink);font-weight:600}
.faq,.related-summary{font-family:var(--sans);color:var(--muted);font-size:0.95rem}

/* 推荐区域 */
.recommendations{margin:22px 0}
.rec-heading{margin:0 0 12px;font-size:1.05rem;color:var(--ink);text-align:left}
.rec-grid{display:block;gap:12px}

/* 页脚 */
.site-footer{border-top:var(--border);background:transparent;padding:14px 0;color:var(--muted)}

/* 视觉签名：大面积留白 + 紧凑字阶 */
.container{padding-top:28px;padding-bottom:28px}
.title{margin-top:6px;margin-bottom:6px}

/* 桌面布局：>=1024px */
@media (min-width:1024px){
  .header-inner{padding:6px 0}
  .article-head{padding:12px 0 22px}
  .title{font-size:2.4rem}
  .summary{max-width:88%;margin-left:0}

  /* 使用 12 列网格，正文占 8 列，侧栏占 4 列 */
  .grid{display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:24px;align-items:start}
  .content{grid-column:1/ span 8;padding-right:12px}
  .side{grid-column:9/ span 4;display:flex;flex-direction:column;gap:12px}

  /* 侧栏两个信息区：高度差通过 padding 与内含信息密度控制 */
  .side-faq{min-height:220px;padding:16px}
  .side-related-summary{min-height:120px;padding:12px}

  /* FAQ 两列（profile 要求） */
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  /* related_summary 两列摘要列表（profile 要求） */
  .related-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  /* 底部推荐：四列 */
  .rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .rec-grid > *{background:var(--paper);border:var(--border);padding:12px;border-radius:var(--radius);font-size:0.95rem}
}

/* 手机布局：<=767px，独立重排 */
@media (max-width:767px){
  body{font-size:15px}
  .header-inner{padding:10px}
  .nav ul{gap:10px;flex-wrap:wrap}
  .title{font-size:1.4rem}
  .meta{flex-direction:column;align-items:flex-start}
  .summary{font-size:0.98rem}

  /* 网格折叠为单列，侧栏变为正文后的两个区块（合同要求） */
  .grid{display:block}
  .content{padding:0}
  .side{display:block;margin-top:12px}
  .side-block{margin-bottom:10px}

  /* FAQ 单列（faq_pattern 要求） */
  .faq{display:block}
  .related-summary{display:block}

  /* 底部推荐 单列 */
  .rec-grid{display:block}
  .rec-grid > *{display:block;margin-bottom:10px}

  /* 防止横向滚动及重叠 */
  .container{padding-left:14px;padding-right:14px}
}

/* 可读性与无阴影、微边框的表面语言（surface） */
.side-block, .summary, .rec-grid > *, .ad{box-shadow:none}

/* 密度：紧凑 */
.title, .side-title, .rec-heading{line-height:1.2}
.content .body p{margin:0 0 12px}