/* 设计识别色与基础变量（深棕与奶油白） */
:root{
  --bg:#fff8ef; /* 奶油白 */
  --ink:#3b2f2f; /* 深棕 */
  --muted:#6b5a56;
  --line:rgba(59,47,47,0.12);
  --max-width:1300px; /* 介于1120—1440 */
  --gutter:28px;
}
/* 全页基准 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Georgia, Cambria, "Times New Roman", serif;line-height:1.65;margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{border-bottom:1px solid var(--line);background:transparent}
.header-row{display:flex;align-items:center;padding:12px var(--gutter)}
.header-top{justify-content:space-between}
.brand .home{font-weight:700;letter-spacing:0.6px;font-size:1rem}
.hdr-info{font-size:0.9rem;color:var(--muted)}
.header-index{border-top:1px solid var(--line);border-bottom:1px solid transparent;height:36px}
.header-index .index-inner{display:flex;gap:18px;align-items:center;font-size:0.95rem;padding:0 var(--gutter);overflow:hidden}
.header-index a, .header-index span{color:var(--muted);white-space:nowrap}

.page-wrap{display:flex;justify-content:center;padding:24px}
.page-grid{width:100%;max-width:var(--max-width);display:grid;grid-template-columns:1fr;gap:28px}

/* 标题构图：压左并用粗细横线构图 */
.title{margin:0;font-size:2rem;font-weight:700;letter-spacing:0.2px;text-align:left}
.chapter-line{border:0;border-top:2px solid var(--line);margin:12px 0}
.section-title{margin:8px 0;font-size:1.05rem;font-weight:600}
.meta-row{display:flex;gap:12px;color:var(--muted);font-size:0.92rem;margin-top:8px}
.summary{margin:14px 0 18px 0;color:var(--muted);font-size:1rem}

/* Article 主体与侧栏的默认（移动优先） */
.article{background:transparent;padding:0}
.article-body .content{font-size:1rem;color:var(--ink)}
.faq-section .faq-list, .related-list{margin-top:10px}
.faq-list > *{padding:10px 0;border-top:1px solid var(--line)}
.faq-list > *:first-child{border-top:0}

/* 侧边信息区样式（矩形、细线） */
.side-panel{display:flex;flex-direction:column;gap:18px}
.side-block{padding:8px 0}
.side-title{margin:0 0 8px 0;font-size:0.95rem;color:var(--muted);font-weight:600}
.side-content{font-size:0.95rem;color:var(--muted)}
.keywords{white-space:pre-wrap}

.ad-adjacent{padding:12px var(--gutter);text-align:center;color:var(--muted);font-size:0.95rem}
.ad-inline{margin:18px 0;text-align:center;color:var(--muted);font-size:0.95rem}
.page-footer{padding:20px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}

/* 相关阅读列表 - 视觉签名：直角与细线；强制两列摘要内部构成（related_pattern） */
.related-list > *{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.related-list > *:first-child{border-top:0}
.related-list h3, .related-list h4{margin:0;font-size:0.98rem}
.related-list p{margin:0;color:var(--muted);font-size:0.92rem}

/* 禁止圆角与重阴影：全页直角 */
*{border-radius:0}

/* 桌面端布局：1024px 及以上为桌面合同 */
@media (min-width:1024px){
  :root{--max-width:1300px}
  .page-grid{grid-template-columns: 1fr;}
  /* 主区与侧栏并列，正文占 8/12 网格，侧栏 4/12 */
  .page-grid{display:grid;grid-template-columns: 1fr 380px;gap:40px}
  .article{grid-column:1 / 2}
  .side-panel{grid-column:2 / 3}

  /* 正文主体采用宽松排版，充分利用八列宽度表现 */
  .article-body .content{font-size:1.05rem;max-width:820px}

  /* 右侧信息区由两个不同高度信息区组成（视觉上区分高度通过 padding 和 min-height） */
  .side-top{min-height:170px;border-top:0}
  .side-bottom{min-height:320px}

  /* 底部推荐显示为四列网格（desktop_contract） */
  .related-wrap .related-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0}
  .related-list > *{border-top:0;display:block}
  .related-list > * > *{margin:0}
  /* 保持两列摘要的视觉特征：在四列格子内，条目内部用竖向紧凑摘要 */
  .related-list .item{display:block}
}

/* 手机端合同：<=767px，信息区下移为正文后的两段列表，底部推荐单列 */
@media (max-width:767px){
  :root{--gutter:16px}
  .page-wrap{padding:12px}
  .header-index{height:32px}
  .title{font-size:1.25rem}
  .page-grid{grid-template-columns:1fr}
  .page-grid{gap:18px}
  .side-panel{order:3}
  /* 侧栏块变为正文后的自然区块（mobile_contract） */
  .side-block{border-top:1px solid var(--line);padding-top:12px}
  .side-top{min-height:0}
  .side-bottom{min-height:0}

  /* 相关阅读单列 */
  .related-wrap .related-list{display:flex;flex-direction:column;gap:6px}
  .related-list > *{display:block;border-top:1px solid var(--line);padding:10px 0}
}

/* 保证在 768px—1023px 之间有中间态（平板） */
@media (min-width:768px) and (max-width:1023px){
  .page-grid{grid-template-columns:1fr 320px;gap:28px}
  .related-wrap .related-list{grid-template-columns:repeat(2,1fr);gap:12px}
}