/* 风格变量（深棕与奶油白） */
:root{
  --bg:#fffaf3; /* 奶油白 */
  --ink:#2d1f18; /* 深棕 */
  --muted:#7b6a60;
  --accent:#3f2b24; /* 强化色 */
  --surface-border:rgba(45,31,24,0.08);
  --radius:2px; /* 2px 小圆角 */
  --max-desktop:1280px;
}
/* 基础重置与排版（技术资讯紧凑型） */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue','Microsoft Yahei',Arial;line-height:1.45;margin:0}
a{color:var(--accent);text-decoration:none}
.page-area{padding:18px 12px 48px}
.page-container{margin:0 auto}
.masthead{border-bottom:1px solid var(--surface-border);background:transparent}
.masthead-inner{max-width:var(--max-desktop);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.site-name{font-weight:700;color:var(--ink);font-size:18px}
.home-link{font-size:14px;padding:10px 12px;border-radius:var(--radius);display:inline-block}

/* 布局网格：桌面为宽主栏 + 窄侧栏（非对称），移动端侧栏移下 */
.layout-grid{display:block}
.content{margin:18px 0}
.article-lead{display:flex;flex-direction:column;gap:10px}
.article-lead h1{font-size:22px;margin:0;color:var(--ink);line-height:1.2}
.article-lead .summary{margin:0;color:var(--muted);font-size:13px}
.meta-row{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin:10px 0}
.meta-keywords{font-size:13px;color:var(--muted);margin-bottom:6px}
.article-body .body-surface{border:1px solid var(--surface-border);background:rgba(255,255,255,0.6);padding:18px;border-radius:var(--radius);color:var(--ink);font-size:15px}
.article-body .body-surface p{margin:0 0 12px}

/* 区块表面风格（2px圆角、浅边框、无阴影） */
.side-surface{border:1px solid var(--surface-border);padding:14px;border-radius:var(--radius);background:transparent}
.side-title{margin:0 0 8px;font-size:14px}
.side-note{margin:0 0 12px;color:var(--muted);font-size:13px}
.side-nav a{display:inline-block;padding:10px 12px;border-radius:var(--radius);font-size:14px}

/* 广告容器（独立，不悬浮、不覆盖） */
.ad-slot{border:1px dashed var(--surface-border);padding:12px;margin:14px 0;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:13px}

/* FAQ 区域：主题色顶部边线 */
.faq-area{margin-top:18px}
.faq-area .section-title{position:relative;padding-top:10px;margin:0 0 10px;font-size:16px}
.faq-area{border-top:4px solid var(--accent);padding-top:12px}
.faq-content{border:1px solid var(--surface-border);padding:12px;border-radius:var(--radius);background:transparent}

/* 相关阅读：带日期的分隔线列表 */
.related-list{margin-top:10px}
.related-list > *{display:block;padding:10px 0;border-bottom:1px solid var(--surface-border);font-size:14px;color:var(--ink)}
.related-list time{display:block;color:var(--muted);font-size:12px;margin-top:6px}

/* 章节标题视觉签名：带短编号线，但不自动生成数字（仅装饰条） */
.section-title{display:flex;align-items:center;gap:10px}
.section-title::before{content:'';display:inline-block;width:26px;height:6px;background:var(--accent);border-radius:2px}

/* 小尺寸可触控要求：移动端点击区域不小于44px */
.masthead .home-link{min-height:44px;line-height:24px}
.side-nav a{min-height:44px;line-height:24px}

/* 页脚 */
.site-footer{border-top:1px solid var(--surface-border);padding:18px 12px;color:var(--muted)}
.site-footer .footer-inner{max-width:var(--max-desktop);margin:0 auto}

/* 桌面端规则：至少在1024px包含专属调整；在1120px以上设定容器最小宽度（满足合同1120-1440区间） */
@media (min-width:1024px){
  .page-area{padding:22px 18px 60px}
  .page-container{max-width:var(--max-desktop);width:92%;}
  .layout-grid{display:grid;grid-template-columns:1fr 300px;grid-column-gap:28px;align-items:start}
  .article-lead{flex-direction:row;align-items:flex-start;gap:18px}
  .article-lead h1{font-size:28px}
  .article-lead .summary{flex:0 0 380px;margin-left:auto;text-align:left}
  .article-body .body-surface{font-size:16px;padding:22px}
}
@media (min-width:1120px){
  .page-container{min-width:1120px;max-width:1280px}
}
@media (min-width:1280px){
  .page-container{max-width:1280px}
}

/* 手机端规则（<=767px）：独立重排，侧栏移下，栏目条可横向滚动或精简；避免横向滚动整体布局 */
@media (max-width:767px){
  :root{--max-desktop:1000px}
  .page-area{padding:12px}
  .page-container{width:100%;max-width:100%}
  .masthead-inner{padding:10px}
  .masthead{position:relative}
  .masthead-left,.masthead-right{display:inline-block}
  .masthead-inner{flex-direction:row;justify-content:space-between;gap:8px}
  .layout-grid{display:block}
  .article-lead{flex-direction:column}
  .article-lead h1{font-size:20px}
  .article-lead .summary{font-size:13px}
  .meta-row{flex-direction:column;gap:6px}
  .side{margin-top:18px}
  .side-surface{padding:12px}
  .ad-slot{padding:10px}
  .section-title::before{width:18px;height:5px}
}

/* 避免常见被禁止的视觉套路：禁止三列等宽营销卡片（不定义相关样式） */
/* 视觉密度适中，避免大圆角和浓重阴影 */