/* 基本变量与版式 */
:root{
  --bg:#fbfbfb;
  --surface:#ffffff;
  --text:#222222;
  --muted:#666666;
  --accent:#c7a300; /* 芥末黄 */
  --graphite:#2d2d2d; /* 石墨灰 */
  --max-content:1280px;
  --gap:24px;
  --hr-color:rgba(45,45,45,0.08);
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft Yahei", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-stack);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* 视觉签名：页头与正文采用明显不同的对齐基线 */
.site-header{background:transparent;color:var(--graphite);padding:12px 20px 6px;}
.top-bar{display:flex;align-items:center;gap:12px}
.brand{font-weight:700;font-size:18px;letter-spacing:0.2px}
.brand .home-link{color:var(--graphite)}
.mini-nav{margin-left:auto;color:var(--muted);font-size:13px}
.sub-bar{padding:6px 0 12px;margin-top:6px;border-top:0}
.tags{font-size:13px;color:var(--graphite);background:transparent}

/* 广告插槽样式（独立容器，不遮挡内容，不悬浮）*/
.ad-slot{padding:8px 20px;margin:8px 0;color:var(--muted);font-size:13px}
.ad-slot:empty{display:none}

/* 页面容器 */
.page-wrap{padding:0 8px 36px}
.container{margin:0 auto;padding:8px;width:100%;max-width:var(--max-content)}

/* 编辑部网格：主区9/3分栏 */
.editor-grid{display:grid;grid-template-columns:3fr 1fr;gap:28px;align-items:start}

.article{background:transparent}
.article-header{display:flex;gap:24px;align-items:flex-start}
.title-block{flex:1}
.title-block h1{margin:0 0 8px;font-size:28px;line-height:1.12;color:var(--graphite);font-weight:700}
.summary{margin:0;color:var(--muted);font-size:15px}
.meta-col{width:170px;flex-shrink:0;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:8px}
.meta-col .meta-row{padding-left:8px}
.meta-key{color:var(--graphite)}

.section-divider{border:0;border-top:1px solid var(--hr-color);margin:18px 0}

.article-body{color:var(--text);font-size:16px}
.article-body p{margin:0 0 1em}

.faq-section{margin-top:20px}
.section-title{font-size:16px;margin:0 0 10px;color:var(--graphite)}
.faq-list ol, .faq-list{counter-reset:faq}
.faq-list ol{padding-left:20px;margin:0}
.faq-list li{margin:0 0 12px}

/* 侧边索引样式，带日期的分隔线列表（related_pattern） */
.side-index{padding-top:6px}
.side-block{background:transparent}
.side-title{margin:0 0 10px;font-size:14px;color:var(--graphite)}
.related-list{font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:12px}
.related-list > *{padding-bottom:8px;border-bottom:1px solid var(--hr-color)}
.related-list time{display:block;color:var(--muted);font-size:12px;margin-top:6px}

/* 页脚 */
.site-footer{border-top:1px solid var(--hr-color);padding:14px 20px;background:transparent;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-content);margin:0 auto;display:flex;justify-content:space-between;gap:16px}

/* Typography & density */
h1,h2,h3{font-family:var(--font-stack);line-height:1.18}
p,li{font-size:15.5px}
.small{font-size:13px}

/* 避免常见模板套路（无大圆角、无重阴影、无头像卡片） */

/* 桌面规则（>=1024px）——必须存在 */
@media (min-width:1024px){
  body{padding-top:6px}
  .container{padding:20px;max-width:1280px}
  /* 更明显的编辑部双层窄导航感：sub-bar 保持窄高 */
  .top-bar{padding-bottom:6px}
  .sub-bar{padding-top:6px}

  /* Title composition：大标题配窄元信息列，形成视觉对齐差异 */
  .article-header{display:grid;grid-template-columns:1fr 220px;align-items:start}
  .title-block h1{font-size:36px}
  .meta-col{width:220px}

  /* 主区 9/3 分栏体现为 3fr / 1fr (近似9/3) */
  .editor-grid{grid-template-columns:3fr 1fr;gap:28px}

  /* 页头与正文基线差异：页头左对齐，正文内容有左内边距以示区别 */
  .site-header{padding-left:20px}
  .container{padding-left:84px;padding-right:84px}

  /* 密度较高，使用细线与小字号标签 */
  .tags{font-size:13px;color:var(--muted)}
}

/* 手机规则（<=767px）——必须存在；第二层横排导航取消，标签可换行 */
@media (max-width:767px){
  .site-header{padding:10px}
  .sub-bar{display:none} /* 取消第二层横排导航 */

  .container{padding:12px}
  .editor-grid{display:block}
  .article-header{display:block}
  .meta-col{width:auto;display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .meta-col .meta-row{padding:0}

  .title-block h1{font-size:20px}
  .article-body{font-size:16px}

  .related-list > *{border-bottom:1px solid var(--hr-color);padding-bottom:10px}

  /* 在 320px 宽时确保不横向滚动 */
  body,html{min-width:0}
  .container{width:100%;box-sizing:border-box}
}

/* 无特殊动画，保持轻量 */