:root{
  --nav-width:200px;
  --max-inner:1360px; /* 在桌面范围内（1120-1440）使用 */
  --color-navy:#0a2a4a; /* 视觉主色 海军蓝 */
  --color-mist:#f3f5f6;  /* 浅雾灰 */
  --surface-border:rgba(10,42,74,0.08);
  --radius:2px;
  --gap:18px;
  --type-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
/* 基础布局与排版（移动优先） */
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--type-stack);color:#111;line-height:1.6;margin:0;background:linear-gradient(0deg,var(--color-mist),#fff 120px);}
.shell{display:flex;min-height:100vh}
.masthead{display:none} /* 桌面显示，移动隐藏/转置为行内索引 */
.content-wrap{flex:1;padding:18px}
.site-inner{width:100%;max-width:var(--max-inner);margin:0 auto}
.site-header{padding:6px 0;color:var(--color-navy);font-weight:600;font-size:13px}
.kicker{background:transparent;padding:4px 0}
.ad{border:1px solid var(--surface-border);border-radius:var(--radius);background:#fff;padding:10px;margin:12px 0;color:#666;font-size:13px}
/* 标题与摘要左右分置 */
.title-band{display:flex;align-items:flex-start;gap:16px;margin-top:6px}
.title{font-size:20px;margin:0;font-weight:700;flex:2;color:var(--color-navy)}
.summary-band{flex:1;align-self:flex-start; padding:8px 10px;border-radius:var(--radius);border:1px solid var(--surface-border);background:var(--color-mist);color:var(--color-navy);font-size:13px}
.meta{display:flex;gap:12px;color:#666;font-size:13px;margin-top:10px}
.now{opacity:0.95}
/* 正文 10/2 边注 网格（移动下为单列） */
.body-area{display:block;margin-top:14px}
.article-body{min-height:120px}
.side-col{display:none}
.side-box{border:1px solid var(--surface-border);border-radius:var(--radius);padding:10px;background:#fff}
.side-title{font-weight:600;color:var(--color-navy);margin-bottom:8px}
/* 底部 FAQ 与 相关推荐（移动单列顺序） */
.bottom-features{display:block;margin-top:22px}
.faq{border-top:4px solid var(--color-navy);padding-top:12px;margin-bottom:18px}
.faq-inner{background:#fff;border:1px solid var(--surface-border);border-radius:var(--radius);padding:12px}
.related-inner{background:#fff;border:1px solid var(--surface-border);border-radius:var(--radius);padding:8px;margin-top:10px}
.related-inner ul{list-style:none;padding:0;margin:0}
.related-inner li{display:flex;justify-content:space-between;padding:10px 8px;border-top:1px dashed rgba(0,0,0,0.06);font-size:14px}
.related-inner time{color:#888;font-size:12px;margin-left:8px}
/* 页脚 */
.site-footer{margin-top:20px;padding:12px 0;color:#777;font-size:13px}
/* tablet->desktop (显式要求桌面 @media(min-width:1024px)) */
@media (min-width:1024px){
  body{background:#fff}
  .shell{align-items:flex-start}
  .masthead{display:block;width:var(--nav-width);flex:0 0 var(--nav-width);padding:18px 12px;border-right:1px solid var(--surface-border);background:linear-gradient(180deg,#fff,#fbfdff)}
  .masthead-inner{position:sticky;top:18px}
  .brand{display:inline-block;color:var(--color-navy);font-weight:700;text-decoration:none;margin-bottom:12px}
  .nav-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
  .nav-item{font-size:14px;color:#344;display:block;padding:6px 4px;border-radius:var(--radius)}
  .nav-item:hover{background:rgba(10,42,74,0.04)}

  .content-wrap{padding:28px}
  .site-inner{min-width:1120px;max-width:1360px}

  /* 编辑部堆叠结构：标题跨栏，正文10/2边注 */
  .article-grid{display:grid;grid-template-columns:1fr;gap:12px}

  /* 标题区域：跨内栏，左右分置在单行内 */
  .title-band{display:grid;grid-template-columns:2fr 1fr;align-items:start;gap:18px}
  .title{font-size:28px}
  .summary-band{align-self:flex-start;padding:10px 12px}

  /* 正文与边注：10/2 栏比 */
  .body-area{display:grid;grid-template-columns:5fr 1fr;gap:20px;margin-top:16px}
  .main-col{min-width:0}
  .article-body{background:#fff;border:1px solid var(--surface-border);padding:18px;border-radius:var(--radius)}
  .side-col{display:block}
  .side-box{position:sticky;top:110px}

  /* 底部：FAQ 与推荐不同宽度、错位排列 */
  .bottom-features{display:grid;grid-template-columns:7fr 5fr;gap:26px;align-items:start;margin-top:26px}
  .faq{grid-column:1/2}
  .related{grid-column:2/3}

  /* 相关阅读分隔风格（带日期） */
  .related-inner li{border-top:1px solid rgba(0,0,0,0.06);padding:12px 10px}
  .related-inner li + li{margin-top:6px}
}

/* 手机端明确规则（最大宽度 767px） */
@media (max-width:767px){
  .masthead{display:none}
  .content-wrap{padding:12px}
  .title{font-size:18px}
  .summary-band{order:2;margin-top:8px}
  .title-band{flex-direction:column}
  .meta{flex-direction:row;flex-wrap:wrap;gap:8px}
  .body-area{display:block}
  .article-body{padding:12px;background:#fff;border:1px solid var(--surface-border);border-radius:var(--radius)}
  .side-col{display:none}
  .bottom-features{display:block}
  .related-inner li{display:flex;justify-content:space-between;padding:10px 6px;border-top:1px dashed rgba(0,0,0,0.06)}
  /* 窄屏禁止横向滚动的保护 */
  .site-inner{padding:0 6px}
  .ad{font-size:13px}
}

/* 视觉与可读性微调，避免玻璃拟态、阴影或悬浮卡片 */
.title, .summary-band, .meta, .article-body, .side-box, .faq-inner, .related-inner{box-shadow:none}