:root{
  --bg:#f6f8f8; /* 青灰底 */
  --panel:#ffffff;
  --muted:#6b7680;
  --line:#d7dde0; /* 细灰线 */
  --accent:#2b97c6; /* 湖蓝强调色 */
  --accent-2:#7aa6a6; /* 青灰辅色 */
  --text:#111418;
  --max-width-clamp:1300px;
}

/* 基本重置与排版 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.75}
img,video{max-width:100%;height:auto}

/* header：居中刊头与横线导航 */
.site-header{background:transparent;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.masthead{display:flex;justify-content:center;align-items:flex-end}
.site-name{font-weight:700;text-decoration:none;color:var(--text);font-size:20px}

.tool-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.breadcrumb{color:var(--muted);font-size:13px}
.main-nav{display:flex;gap:18px;overflow-x:auto;padding-bottom:6px}
.main-nav .nav-item{white-space:nowrap;padding:6px 0;color:var(--muted);font-size:14px}
.main-nav::-webkit-scrollbar{height:6px}

/* 页面框架：桌面双栏，窄侧栏；遵守宽度 1120-1440（clamp） */
.page-frame{display:flex;justify-content:center;padding:22px 20px}
.page-grid{width:clamp(1120px,80vw,var(--max-width-clamp));display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}

/* 主文区 */
.content{background:transparent}
.article-head{padding:4px 0 10px;border-bottom:1px solid var(--line);margin-bottom:18px}

/* 标题：压左并用粗细横线构图；标题为唯一 H1 */
.article-title{font-family:Georgia, "Times New Roman", serif;font-size:28px;margin:12px 0 6px;color:var(--text);font-weight:700;letter-spacing:0.2px;position:relative;padding-right:18px}
.article-title::after{content:"";display:block;height:3px;background:var(--line);position:absolute;right:0;left:calc(100% + 12px);top:50%;transform:translateY(-50%)}
/* 视觉识别：标题首字用强调色，但不拆变量，使用 first-letter */
.article-title::first-letter{color:var(--accent);font-weight:900}

.meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.meta .sep{margin:0 8px;color:var(--line)}
.summary{color:var(--muted);font-size:15px;margin:8px 0 18px}

/* 正文：无折叠、无分页、无圆角、无阴影 */
.article-body{font-size:16px;color:var(--text)}
.content-body{background:transparent;border-top:0;padding:0;margin:0}
.content-body p{margin:0 0 1em}

/* 广告容器：独立，不覆盖正文 */
.ad{border:1px solid var(--line);padding:12px;background:linear-gradient(180deg,transparent,transparent);color:var(--muted);font-size:14px;margin:16px 0}
.ad-top{margin:12px 0 18px}
.ad-bottom{margin-top:24px}

/* FAQ 区域：主题色顶部边线 */
.faq{border-top:4px solid var(--accent);padding-top:14px;margin-top:22px}
.faq-title{font-size:18px;margin:0 0 10px;color:var(--text);font-family:Georgia, "Times New Roman", serif}
.faq-body{color:var(--muted);font-size:15px}

/* 相关阅读：带日期的分隔线列表 - 保持列表密度舒展 */
.related{margin-top:22px;border-top:1px solid var(--line);padding-top:12px}
.related-title{font-size:16px;margin:0 0 8px;color:var(--text)}
.related-list a, .related-list .item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);text-decoration:none;color:var(--text);font-size:14px}
.related-list .date{color:var(--muted);font-size:13px;margin-left:12px}

/* 侧栏样式：方角、细灰线、高信息密度 */
.sidebar{padding:6px 0}
.side-block{border-top:1px solid var(--line);padding:10px 12px}
.side-block h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.side-block p{margin:0;color:var(--muted);font-size:14px}
.kw{word-break:break-word}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:18px 20px;text-align:center;color:var(--muted);font-size:13px}

/* 链接与可点击区域触控友好性 */
.related-list a{padding:12px 0;min-height:44px;align-items:center}
.main-nav .nav-item{min-height:44px;display:flex;align-items:center}

/* 禁止圆角与阴影等被禁止的视觉套路 */
*{border-radius:0 !important;box-shadow:none !important}

/* 响应：桌面规则（>=1024px）与手机规则（<=767px） */
@media (min-width:1024px){
  /* 桌面版：维持双栏非对称网格，标题横线构图更长 */
  .page-grid{grid-template-columns:1fr 320px;gap:36px}
  .article-title{font-size:34px}
  .article-title::after{left:calc(100% + 18px)}
  .main-nav{gap:22px}
}

@media (max-width:767px){
  /* 手机端：独立重排，侧栏移到正文后；横向导航允许滚动或精简 */
  .page-frame{padding:12px}
  .page-grid{width:100%;display:block}
  .article-title{font-size:20px}
  .article-title::after{display:none}
  .main-nav{overflow-x:auto;gap:10px}
  .sidebar{order:2;margin-top:18px}
  .content{order:1}
  .ad{font-size:13px;padding:10px}
  .related-list a{min-height:44px}
  .side-block{padding:10px}
  /* 确保在最窄的 320px 时不横向滚动 */
  body,html{overflow-x:hidden}
}