/* 设计变量与总体基调：藏蓝与纸白；纸张风格、抑制容器卡片 */
:root{
  --bg:#F7F3EA; /* 轻纸张底色 */
  --text:#22262A;
  --muted:#57606A;
  --accent:#0D2B4A; /* 藏蓝 */
  --rule:#D8D0C2;
  --max-width:1320px;
  --content-gap:32px;
  --serif: "Times New Roman", Times, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC";
}

/* 基础重置 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.58;
  padding:24px 12px;
}
.page-root{display:flex;flex-direction:column;align-items:center}
.container{width:100%;max-width:var(--max-width);}
.ad{width:100%;text-align:center;color:var(--muted);font-size:14px;padding:8px 0}

/* header：一行文字刊头 */
.site-header{width:100%;max-width:var(--max-width);display:flex;justify-content:space-between;align-items:center;padding:6px 0 18px 0;border-bottom:1px solid var(--rule);}
.brand a{color:var(--accent);text-decoration:none;font-weight:700;letter-spacing:0.4px}
.nav-line{display:flex;gap:18px;color:var(--muted);font-size:14px}
.nav-line span{white-space:nowrap}

/* 标题区：桌面7/5分栏、手机堆叠 */
.title-area{display:grid;grid-template-columns:1fr;gap:18px;padding:28px 0 12px 0;align-items:start}
.page-title{font-family:var(--serif);font-size:28px;margin:0;color:var(--accent);font-weight:700;line-height:1.12;position:relative;padding-left:6px}
.page-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:36px;height:4px;background:linear-gradient(90deg,var(--accent),rgba(13,43,74,0.6));border-radius:2px}
.meta-row{display:flex;gap:12px;color:var(--muted);font-size:13px;margin:12px 0}
.summary{margin:12px 0 0 0;color:var(--muted)}
.title-right{color:var(--muted);font-size:13px}
.title-right .keywords{margin-bottom:10px}

/* 主体不使用容器卡片，使用网格 */
.mag-grid{display:block;margin-top:18px}
.main-col{min-width:0}
.content-top-spine .section-label{font-family:var(--serif);color:var(--accent);font-size:13px;margin-bottom:12px;display:inline-block;position:relative;padding-left:28px}
.content-top-spine .section-label::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;height:2px;background:var(--accent);border-radius:1px}
.content-body{font-size:16px;color:var(--text);font-family:var(--sans);}
.content-body p{margin:0 0 12px 0}

.side-col{margin-top:22px}
.side-block{border-top:1px solid var(--rule);padding-top:12px;margin-top:12px}
.side-title{font-family:var(--serif);color:var(--accent);margin:0 0 8px 0;font-size:15px}
.meta-list{margin:0;padding:0;font-size:13px;color:var(--muted)}
.meta-list dt{float:left;clear:left;width:72px;font-weight:600;color:var(--muted)}
.meta-list dd{margin:0 0 8px 80px;color:var(--muted)}

/* FAQ：鼓励 editors 提供 <details> 列表，样式优化 */
.faq-list details{border-top:1px dashed var(--rule);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--accent);outline:none}
.faq-list p{margin:8px 0 0 0;color:var(--muted)}

.related-wrap{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule)}
.related-title{font-family:var(--serif);color:var(--accent);margin:0 0 8px 0}
.related-list{margin:0 0 40px 18px;padding:0;color:var(--muted)}
.related-list li{margin:8px 0}
.related-list li::marker{color:var(--accent)}

.site-footer{width:100%;max-width:var(--max-width);padding:18px 0;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--rule);margin-top:24px}

/* 视觉签名：章节短编号线（无自动编号） */
h2.section{position:relative;padding-left:34px;margin:22px 0 12px 0;font-family:var(--serif)}
h2.section::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:2px;background:var(--accent);border-radius:2px}

/* 响应：桌面与手机必须为两套独立排版 */
@media (min-width:1024px){
  body{padding:36px}
  .container{display:block;width: min(1320px, 92%);}
  .title-area{grid-template-columns:7fr 5fr;gap:28px;padding-bottom:22px}
  .page-title{font-size:40px}
  .summary{font-size:15px}

  /* 非对称杂志网格：正文主列偏左，右侧元信息和FAQ错位排列 */
  .mag-grid{display:grid;grid-template-columns: 1fr 360px;gap:36px;align-items:start}
  .main-col{order:1}
  .side-col{order:2}
  .side-block{background:transparent;padding:0;margin-top:0}
  .side-col .side-block + .side-block{margin-top:24px}

  .content-body{font-size:17px;line-height:1.66}
  .ad{padding:12px 0}
}

/* 手机端：恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐。并避免横向滚动 */
@media (max-width:767px){
  body{padding:14px}
  .container{max-width:680px}
  .title-area{grid-template-columns:1fr;padding:10px 0}
  .nav-line{display:none}
  .page-title{font-size:20px}
  .meta-row{flex-direction:row;gap:8px;font-size:12px}
  .title-right{order:3;margin-top:8px}

  .mag-grid{display:block}
  .main-col{order:1}
  .side-col{order:2}
  .side-block{border-top:1px solid var(--rule);padding-top:12px;margin-top:14px}
  .faq-list details{border-top:none;padding:6px 0}
  .related-list{padding-left:18px}

  /* 禁止固定侧栏或控件重叠 */
  .side-col{width:100%}
  .ad{font-size:13px}
}

/* 可访问性与小屏适配 */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}