/* 主题与可配置变量 - 深紫灰与象牙白 */
:root{
  --bg:#F7F5F2; /* 象牙白 */
  --paper:#FBFAF8;
  --text:#22202A; /* 深灰偏紫 */
  --muted:#6B6570;
  --accent:#3B3350; /* 深紫灰 */
  --line:rgba(55,48,66,0.12); /* 细线 */
  --max-desktop:1280px;
  --content-width:780px; /* 桌面正文目标宽度 */
  --gutter:28px;
}

/* 基本重置与排版：技术资讯紧凑型 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45; /* 紧凑 */
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hairline{border:none;border-top:1px solid var(--line);margin:0}

/* 头部 - 极简细导航（单行文字刊头） */
.site-header{padding:18px calc(var(--gutter));background:transparent}
.header-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700;color:var(--accent);letter-spacing:0.02em}
.mini-nav{color:var(--muted);font-size:0.95rem}

/* 容器与三轨布局 - centered-column-notes 蓝图 */
.container{padding:20px 16px 48px}
.layout{display:grid;gap:32px;align-items:start}
.col{background:transparent;border:0;padding:0}

/* 通用文章头部 */
.article-head{margin-bottom:10px}
.article-head h1{margin:8px 0 12px;font-size:1.75rem;font-weight:700;text-align:center;line-height:1.15}
.article-head .summary{max-width:var(--content-width);margin:0 auto 18px;text-align:left;color:var(--muted)}

.content{color:var(--text);white-space:normal;word-wrap:break-word}
.content :where(p,h2,h3,ul,ol,pre){margin:0 0 16px}
.content h2{font-size:1.05rem;margin-top:22px}

/* 元信息（左列） */
.meta{font-size:0.95rem;color:var(--muted);margin:4px 0}
.meta dt{font-weight:600;color:var(--accent);margin-top:10px}
.meta dd{margin:2px 0 8px}
.meta .kw{color:var(--accent);word-break:break-word}

/* 相关阅读（右列） - 关键词索引式列表 */
.related{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.related a, .related span{display:block;padding:6px 6px;border-top:1px solid var(--line);color:var(--accent);font-size:0.95rem}
.related > *:first-child{border-top:0}

/* 广告容器 - 保持独立且不悬浮 */
.ad{border:1px solid var(--line);padding:10px;color:var(--muted);background:transparent;margin-top:18px}
.ad-top{margin-bottom:12px}

/* FAQ 折叠列表（无卡片） */
.faq h3{margin:18px 0 10px;font-size:1rem}
.faq-list details{border-top:1px solid var(--line);padding:12px 0}
.faq-list details summary{cursor:pointer;list-style:none;outline:none;font-weight:600}
.faq-list details[open] summary{color:var(--accent)}
.faq-list details p{margin:10px 0 0;color:var(--muted)}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:14px 16px;margin-top:28px}
.footer-inner{max-width:1400px;margin:0 auto;color:var(--muted);font-size:0.9rem}

/* 视觉签名：全页直角与细线 */
*{border-radius:0}

/* 桌面规则：三轨布局成立（min-width:1024px） */
@media (min-width:1024px){
  .container{padding:28px}
  /* 强调容器宽度在 1120px—1440px 之间，正文居中约780px */
  .container > .layout{max-width:var(--max-desktop);margin:0 auto; width: clamp(1120px, 85vw, 1280px); grid-template-columns: 220px minmax(760px, 1fr) 240px}

  .col.left{order:0;padding-right:10px}
  .col.center{order:1;max-width:var(--content-width);margin:0 auto}
  .col.right{order:2;padding-left:10px}

  /* center 内部确保标题居中、摘要左对齐 */
  .article-head .summary{margin-left:0;margin-right:0}

  /* 相关阅读关键索引密集排列，体现索引式列表 */
  .related{gap:6px}
  .related a{padding:8px 6px}
}

/* 手机规则：单列自然重排（max-width:767px） */
@media (max-width:767px){
  body{font-size:15px}
  .layout{display:block}
  .container{padding:12px 12px 32px}

  /* 移动端宽度 320px 时行为安全 */
  .col.left,.col.right,.col.center{width:100%;padding:0;margin:0}

  /* 移动端阅读顺序：标题、摘要、正文，然后侧边信息与相关阅读 */
  .col.center{order:0}
  .col.left{order:2;margin-top:18px}
  .col.right{order:3;margin-top:12px}

  /* 将 ad-middle 紧随正文显示但在正文内部之外 */
  .ad-middle{margin:18px 0}

  /* FAQ 和 related 依次排列 */
  .faq{order:1;margin-top:12px}
  .related{flex-direction:column}

  /* 防止横向滚动 */
  img, table, pre{max-width:100%;overflow:auto}
}

/* 平衡密度：中等信息密度 */
p, li{font-size:0.98rem;color:var(--text)}

/* 无动画，轻量稳定，避免复杂效果 */