/* 全站变量与重置 */
:root{
  --accent:#3e2b22; /* 深棕 */
  --bg:#f7efe6;     /* 奶油白 */
  --text:#111111;
  --muted:#666666;
  --line:#d9d1c8;
  --max-width:1320px; /* 符合1120-1440区间 */
  --gap:24px;
  --radius:2px; /* 方角 */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Noto Sans CJK SC", Arial;line-height:1.6}
a{color:inherit;text-decoration:none}
.site-root{min-height:100vh;display:flex;flex-direction:column}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px var(--gap)}
.brand{font-weight:700;color:var(--accent);letter-spacing:0.02em}
.index-nav{display:flex;gap:14px;align-items:center;font-size:0.95rem}
.index-nav .nav-home{font-weight:600}
.index-nav .nav-item{color:var(--muted)}
.page-container{width:100%;display:flex;justify-content:center;padding:8px}
.article-frame{width:100%;max-width:var(--max-width);padding:20px;}
.article-head{padding:12px;border:1px solid var(--line);background:transparent;border-radius:var(--radius);}
.title-grid{display:flex;align-items:flex-start;gap:20px}
.article-title{font-size:1.6rem;margin:0;line-height:1.05;color:var(--text);font-weight:800;letter-spacing:-0.01em}
.meta-column{min-width:160px;color:var(--muted);font-size:0.92rem;display:flex;flex-direction:column;gap:6px}
.summary{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted)}
.layout-core{display:block;margin-top:18px}
.primary{background:transparent}
.article-body{color:var(--text);font-size:1rem;line-height:1.8}
.article-body :where(p){margin:0 0 1em 0}
.ad-slot{padding:10px;border:1px dashed var(--line);background:transparent;margin:18px 0;font-size:0.9rem;color:var(--muted)}
.section-title{display:flex;align-items:center;gap:10px;font-weight:700;margin:18px 0 10px 0;font-size:1.05rem}
.section-title .sig-line{display:inline-block;width:28px;height:6px;background:var(--accent);border-radius:2px}
.faq-content{background:transparent;border-top:1px solid var(--line);padding-top:12px}
.related-block{margin-top:18px}
.related-title{margin:0 0 8px 0;font-size:0.95rem;color:var(--accent)}
.related-list{border-top:1px solid var(--line)}
.related-list > *{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.side-index{border:1px solid var(--line);padding:12px}
.side-title{font-weight:700;color:var(--accent);margin-bottom:8px}
.side-index ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.side-index li{color:var(--muted)}
.site-footer{padding:18px;text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:24px}

/* 桌面专用布局 (>=1024px) */
@media (min-width: 1024px){
  .article-frame{padding:28px}
  .article-title{font-size:3.2rem;line-height:1;margin-right:24px}
  /* 大标题配窄元信息列：title 与 meta 在同一行 */
  .title-grid{align-items:flex-end}
  .meta-column{min-width:240px;text-align:right}
  .summary{font-size:1rem;padding-top:16px}

  /* 8/4 分栏主布局 */
  .layout-core{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start}
  .primary{padding-right:6px}
  .secondary{padding-left:6px}

  /* FAQ：左侧问题右侧答案表格式 */
  .faq-content dl{display:grid;grid-template-columns:28% 72%;gap:12px 20px}
  .faq-content dl dt{font-weight:700;color:var(--accent)}
  .faq-content dl dd{margin:0;color:var(--muted)}

  /* 章节视觉签名：短编号线（不自动编号） */
  .article-body h2,.article-body h3{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:18px}
  .article-body h2::before,.article-body h3::before{content:'';display:inline-block;width:36px;height:6px;background:var(--accent);}

  /* 相关阅读：带日期的分隔线列表 */
  .related-list a, .related-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
  .related-list time{color:var(--muted);font-size:0.88rem}
}

/* 手机端 (<=767px) */
@media (max-width: 767px){
  .header-inner{padding:10px}
  .index-nav{gap:10px;font-size:0.92rem;overflow:auto}
  .article-frame{padding:14px}
  .title-grid{flex-direction:column;align-items:flex-start}
  .article-title{font-size:1.4rem}
  .meta-column{order:2;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;font-size:0.88rem;margin-top:8px}
  .meta-column .meta-row{display:inline-block}
  .summary{margin-top:10px;padding-top:10px}

  /* 单列：侧栏下移为页面下部 */
  .layout-core{display:block}
  .primary{order:1}
  .secondary{order:2;margin-top:18px}
  .secondary .related-block{margin-top:8px}

  /* FAQ：改为块状顺序，左问右答改为问在上答在下 */
  .faq-content dl{display:block}
  .faq-content dl dt{font-weight:700;margin-top:12px}
  .faq-content dl dd{margin:6px 0 12px 0;color:var(--muted)}

  /* 章节短线缩小 */
  .article-body h2::before,.article-body h3::before{width:24px;height:5px}

  /* 相关阅读单列样式 */
  .related-list > *{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}

  /* 确保320px时不产生横向滚动 */
  html,body{overflow-x:hidden}
  .page-container{padding:0 8px}
}

/* 无渐变、无发光按钮，遵守禁止样式（设计合同） */
button{background:none;border:1px solid var(--line);padding:6px 10px;border-radius:var(--radius);color:var(--accent)}