/* 样式表（使用系统字体、CSS变量、Grid/Flex；无圆角，无阴影；遵守视觉签名与禁用套路） */
:root{
  --bg-deep:#2b2430; /* 深紫灰 */
  --paper-ivory:#fffaf0; /* 象牙白 */
  --accent:#5c4b6a; /* 较深的紫灰作为窄带 */
  --muted:#8b8790;
  --text:#222;
  --line:rgba(0,0,0,0.06);
  --max-width:1280px; /* 在 1120-1440 之间 */
  --left-rail:220px;
  --right-rail:300px;
  --gutter:28px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden; /* 防止桌面越界造成水平滚动 */
}
a{color:inherit;text-decoration:none}
.root{min-height:100vh;display:flex;flex-direction:column}
.site-header{color:var(--paper-ivory);padding:18px 24px;border-bottom:1px solid rgba(255,255,255,0.04)}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;}
.mast{display:flex;gap:16px;align-items:baseline}
.site-home{font-weight:700;font-size:18px;color:var(--paper-ivory)}
.site-tag{font-size:12px;color:var(--muted)}

/* 页面主体布局：desktop 使用三列 grid（左侧纵向刊头）*/
.page-wrapper{display:grid;grid-template-columns:var(--left-rail) 1fr var(--right-rail);gap:24px;max-width:var(--max-width);width:100%;margin:28px auto;padding:0 var(--gutter);box-sizing:border-box}

.left-rail{padding-top:6px}
.nav-index ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.nav-index li span{color:var(--paper-ivory);opacity:0.9}
.nav-index li a{color:var(--paper-ivory);display:inline-block}

.content-area{background:transparent}
.article-sheet{background:var(--paper-ivory);color:var(--text);border-left:1px solid var(--line);border-right:1px solid var(--line);padding:34px 36px 28px;box-sizing:border-box;position:relative;overflow:visible}

/* 实现偏移纸张效果：整张纸向左微移，但不使用阴影与大圆角 */
@media (min-width:1024px){
  .article-sheet{transform:translateX(-34px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
}

.article-title{font-size:40px;line-height:1.05;margin:0 0 10px 0;font-weight:700;letter-spacing:-0.02em;max-height:calc(2 * 1.05em);overflow:hidden}
/* 标题向左越出正文基线：在桌面进一步左移，但不能产生滚动 */
@media (min-width:1024px){
  .article-title{margin-left:-48px;padding-left:8px}
}

.meta-row{font-size:13px;color:var(--muted);margin-bottom:14px}
.meta-sep{margin:0 8px;color:var(--line)}

/* 摘要使用窄色带而非卡片（visual_signature） */
.summary-band{display:flex;align-items:flex-start;gap:12px;border-top:1px solid var(--line);padding-top:12px;padding-bottom:12px}
.band-indicator{width:6px;background:var(--accent);height:1.35rem;margin-top:6px}
.summary-text{margin:0;color:var(--muted);font-size:14px}

.article-body{margin-top:8px;color:var(--text);font-size:16px}
.article-body p{margin:0 0 12px}
.article-body h2{margin:18px 0 8px;font-size:20px}
.article-body h3{margin:12px 0 8px;font-size:18px}

.ad-slot{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:20px 0;background:transparent;color:var(--muted);font-size:13px}
/* 广告容器独立；不悬浮、不可遮挡正文 */

/* 右侧边注（窄边注保留信息） */
.right-rail{padding-top:6px}
.note-area{background:transparent;padding:8px 6px}
.note-title{font-size:13px;color:var(--paper-ivory);margin-bottom:6px}
.note-body{background:transparent;color:var(--paper-ivory);font-size:13px}
.note-line{margin:6px 0;color:var(--paper-ivory)}
.note-body hr{border:none;border-top:1px solid rgba(255,255,255,0.04)}

.faq-section{margin-top:22px;padding-top:8px;border-top:1px solid var(--line)}
.faq-section h2{font-size:16px;margin:0 0 12px}
.faq-grid{display:grid;gap:12px}

.related-section{margin-top:22px;padding-top:12px;border-top:1px solid var(--line)}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-list > *{padding:10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.related-list time{color:var(--muted);font-size:13px}

.site-footer{border-top:1px solid rgba(255,255,255,0.04);color:var(--paper-ivory);padding:18px 0;margin-top:36px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}

/* FAQ 两列在桌面 */
@media (min-width:1024px){
  .faq-grid{grid-template-columns:1fr 1fr}
}

/* ---- 手机端（max-width:767px）: 取消偏移，回到安全边距；导航改为顶部横向；FAQ 单列 ---- */
@media (max-width:767px){
  :root{--gutter:16px}
  .page-wrapper{grid-template-columns:1fr;gap:12px;padding:0 16px;margin:12px auto}
  .left-rail{order:0}
  .nav-index ul{flex-direction:row;gap:10px;overflow:auto}
  .nav-index li{white-space:nowrap}
  .right-rail{display:none}
  .article-sheet{transform:none;padding:20px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .article-title{font-size:24px;margin-left:0}
  .summary-band{padding-top:8px;padding-bottom:8px}
  .faq-grid{grid-template-columns:1fr}
  .related-list > *{flex-direction:column;align-items:flex-start}
}

/* 中等屏幕到桌面之间（768-1023）采取渐进式布局，仍保持无偏移或轻微偏移 */
@media (min-width:768px) and (max-width:1023px){
  .page-wrapper{grid-template-columns:180px 1fr 260px;max-width:1000px}
  .article-sheet{transform:translateX(-18px);padding:26px}
  .article-title{font-size:30px;margin-left:-18px}
}

/* 可读性与密度控制：紧凑但清晰 */
h1,h2,h3,p,li{word-wrap:break-word}