/* 样式变量与基本重置 */
:root{
  --bg-header:#15353f; /* 深色报头（青灰） */
  --accent:#2b9db3; /* 湖蓝 */
  --text:#111417;
  --muted:#5a6b70;
  --surface:#ffffff; /* 正文白 */
  --max-width:1280px; /* 在1120-1440之间 */
  --gutter:24px;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --compact-line:1.45;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--surface);color:var(--text);font-family:var(--font-stack);font-size:16px;line-height:var(--compact-line)}
a{text-decoration:none;color:inherit}

/* 报头：深色、左侧纵向刊头风格 */
.site-header{background:var(--bg-header);color:#fff;padding:12px 0}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:flex-start;padding:0 16px}
.vertical-nav{display:flex;flex-direction:column;width:220px}
.vertical-nav .brand .home-link{color:#fff;font-weight:700;font-size:18px}
.vertical-nav .nav-list{list-style:none;padding:12px 0 0;margin:0;display:flex;flex-direction:column;gap:8px}
.vertical-nav .nav-item{color:rgba(255,255,255,0.9);font-size:14px}
.header-fill{flex:1}

/* 广告容器（独立且不悬浮） */
.ad-container{max-width:var(--max-width);margin:16px auto;padding:6px 12px;background:transparent;color:var(--muted);font-size:14px}
.ad-top{margin-top:18px}

/* 主体布局：桌面为 12 列网格，左 4 列，右 8 列 */
.page-wrap{padding:0 16px}
.grid-root{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:20px}

/* 侧栏通用块 */
.sidebar .sb-block{background:transparent;margin-bottom:14px}
.sb-square{background:var(--surface);border:1px solid #e6eef0;padding:12px;font-weight:700;color:var(--text);display:inline-block}
.label{font-size:12px;color:var(--muted);margin-bottom:8px}
.crumbs{list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px;display:flex;gap:8px}
.crumbs li::after{content:'/';color:var(--muted);margin-left:8px}
.crumbs li:last-child::after{content:''}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.meta-item{background:var(--surface);border:1px solid #edf4f6;padding:8px;font-size:13px}
.meta-item .m-key{font-size:12px;color:var(--muted)}
.meta-item .m-val{font-weight:600}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.related-grid > *{background:var(--surface);border:1px solid #e8f1f3;padding:8px;font-size:13px}

/* 文章区 */
.content-area{background:var(--surface);padding:10px 12px;border-left:1px solid #f0f6f7}
.article-header{margin-bottom:12px}
.title{font-size:28px;line-height:1.08;margin:6px 0 8px;font-weight:800;max-height:3.2em;overflow:hidden;text-overflow:ellipsis}
.summary-band{display:block;background:linear-gradient(90deg,var(--accent),rgba(43,157,179,0.85));color:#fff;padding:8px 10px;font-size:14px;border-radius:0;max-width:100%;white-space:normal}

.article-body{margin-top:12px;color:var(--text);font-size:15px}
.article-body p{margin:0 0 12px}

.faq-section{margin-top:20px}
.section-title{font-size:16px;margin:6px 0 10px}
.faq-wrap{font-size:15px;color:var(--text)}
.faq-wrap ol{padding-left:20px;margin:0}
.faq-wrap li{margin:0 0 10px}

.site-footer{border-top:1px solid #edf4f6;margin-top:30px;background:#fff;padding:14px 0;color:var(--muted)}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* 桌面专属布局（>=1024px）：左侧四列，右侧八列，非对称网格，视觉重心右侧 */
@media (min-width:1024px){
  .grid-root{grid-template-columns:320px 1fr;align-items:start}
  .sidebar{padding-right:16px}
  .content-area{padding:18px 24px}
  .title{font-size:36px}
  /* 左侧为固定窄列，相关推荐在左侧以三列短卡呈现（无阴影） */
  .related-grid{grid-auto-rows:1fr}
}

/* 手机专属规则（<=767px）：单列流式，左侧信息拆分为标题前后紧凑区块，正文为首要阅读主体 */
@media (max-width:767px){
  .header-inner{padding:12px}
  .vertical-nav{flex-direction:row;width:auto;gap:12px}
  .vertical-nav .nav-list{flex-direction:row;gap:12px}

  .grid-root{grid-template-columns:1fr}
  .sidebar{order:0;padding:0}
  .content-area{order:1;padding:10px;background:var(--surface);border-left:none}

  /* 将侧栏的 site-id 与 breadcrumbs 放在正文之前（标题前），其余信息放在标题之后 */
  .site-id{order:0}
  .breadcrumbs{order:1}
  .meta-block{order:3}
  .related-block{order:4}

  .title{font-size:20px}
  .summary-band{font-size:13px}
  .article-body{font-size:15px}

  .related-grid{grid-template-columns:repeat(3,1fr)}

  /* 防止任何横向滚动 */
  body,html{overflow-x:hidden}
}

/* 视别识别与可访问性 */
a.home-link{outline:2px solid transparent}
a.home-link:focus{outline:2px solid rgba(255,255,255,0.6)}

/* 禁止使用阴影作为信息层级（视觉约束） */
/* intentionally no box-shadow rules */