/* 视觉与排版变量 */
:root{
  --green-ink: #0b3d2f; /* 墨绿 */
  --beige: #f6efe2;     /* 米白 */
  --muted: #55615a;
  --line: #d9d5cf;
  --text: #111214;
  --max-width: 1280px; /* 桌面容器控制（位于1120-1440区间） */
  --gap: 18px; /* 紧凑感 */
  --sig-size: 38px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Helvetica Neue", Arial;
}

/* 基础重置 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--beige);color:var(--text);margin:0}
.container{margin:0 auto;padding:18px;max-width:var(--max-width);width:calc(100% - 56px)}
.container.small{padding:10px}

/* 头部：左对齐紧凑品牌栏 + 栏目索引条 */
.site-header{border-bottom:1px solid var(--line);background:transparent}
.brand-wrap{display:flex;align-items:center;gap:20px;padding:12px 0}
.brand{color:var(--green-ink);font-weight:700;text-decoration:none;font-size:18px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
.site-nav a{color:var(--muted);text-decoration:none;font-size:14px}
.site-nav span{color:var(--muted);font-size:14px}

/* Article 顶部：标题与摘要左右分置（7/5） */
.article{background:transparent;border:1px solid transparent}
.article-title-area{display:grid;grid-template-columns:7fr 5fr;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.article-title{margin:0;color:var(--green-ink);font-weight:800;font-size:26px;line-height:1.15}
.article-summary{color:var(--muted);font-size:15px;padding-top:4px}

/* Article 主体两栏布局（非对称杂志网格） */
.article-body-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;padding:22px 0;align-items:start}
.main-col{min-width:0}
.side-col{border-left:1px solid var(--line);padding-left:20px}

/* 元信息紧凑排列 */
.meta-inline{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:12px}
.meta-box{background:#fff;padding:12px;border:1px solid var(--line);border-radius:2px}
.meta-line{color:var(--muted);font-size:13px;margin:6px 0}
.now{color:var(--muted)}

/* 广告槽：独立容器，禁止悬浮/覆盖 */
.ad-slot{background:transparent;border:1px dashed var(--line);color:var(--muted);padding:10px;margin:12px 0}
.ad-top{margin-bottom:18px}
.ad-middle{margin:18px 0}
.ad-bottom{margin-top:18px}

/* 正文排版：舒展可读 */
.content{background:#fff;padding:18px;border:1px solid var(--line);line-height:1.78;color:var(--text);font-size:16px}
.content p{margin:0 0 14px}
.content h2, .content h3{margin:18px 0 8px;color:var(--green-ink)}

/* 视觉识别：章节标题带短编号线（静态装饰，不自动编号） */
.section-title{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--green-ink);margin:0 0 12px}
.section-title .sig{display:inline-flex;align-items:center;justify-content:center;width:var(--sig-size);height:22px;border-left:4px solid var(--green-ink);padding-left:8px;font-weight:700;color:var(--green-ink);font-size:13px}

/* FAQ 布局：桌面两列，手机单列（两列在手机改为单列） */
.faq-box, .faq-area{background:#fff;padding:12px;border:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
.faq-list{display:grid;grid-template-columns:1fr;gap:12px}
.faq-grid > *:not(:last-child), .faq-list > *:not(:last-child){border-bottom:1px solid var(--line);padding-bottom:8px}

/* 相关阅读：关键词索引式列表（紧凑） */
.related-list{background:#fff;padding:12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.related-list a{color:var(--green-ink);text-decoration:none;font-size:14px}
.related-list span{color:var(--muted);font-size:14px}

/* 侧栏内错位排列（桌面） */
.side-meta{margin-bottom:30px}
.faq-box{margin-top:40px}

/* 页脚 */
.site-footer{padding:18px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* -------- 响应式规则（必须包含） -------- */
/* 桌面规则：1024px 及以上满足非对称杂志布局与标题区 7/5 分栏 */
@media (min-width:1024px){
  .container{width:calc(100% - 80px);max-width:var(--max-width)}
  .article-title-area{grid-template-columns:7fr 5fr}
  .article-body-grid{grid-template-columns:1fr 420px}
  .faq-grid{grid-template-columns:1fr 1fr;gap:12px}
  .faq-list{grid-template-columns:1fr 1fr}
  /* 桌面侧栏和主列建立明显非对称与错位感 */
  .side-col{padding-left:28px}
  .faq-box{margin-top:64px}
  .section-title .sig{width:46px}
}

/* 手机规则：<=767px 重排为自然文档顺序（标题、元信息、摘要、正文、FAQ、推荐） */
@media (max-width:767px){
  body{background:var(--beige)}
  .container{width:calc(100% - 28px);max-width:100%}
  .article-title-area{display:block;padding:14px 0}
  .article-title{font-size:20px}
  .article-summary{margin:8px 0 12px}
  .article-body-grid{display:block}
  .side-col{display:block;border-left:none;padding-left:0}
  /* 按 mobile_contract 恢复自然顺序：将 meta 紧跟标题出现在摘要之后 */
  .meta-inline{order:0;margin-bottom:12px}
  .main-col .meta-inline{display:block}
  .faq-area{display:block}
  .faq-grid{grid-template-columns:1fr}
  .faq-list{grid-template-columns:1fr}
  .mobile-only{display:block}
  .faq-box{margin-top:14px}
  .related-list{font-size:14px}
  .section-title .sig{width:34px}
}

/* 中间视图（平板等） */
@media (min-width:768px) and (max-width:1023px){
  .article-title-area{grid-template-columns:1fr}
  .article-body-grid{grid-template-columns:1fr 320px}
  .faq-grid{grid-template-columns:1fr}
}

/* 可访问性小调整 */
a:focus{outline:2px dashed var(--green-ink);outline-offset:2px}