/* style for ouepu30.cn - 设计种子: 500ce83619d1c594 */
:root{
  --brick:#9b2f2a; /* 砖红 */
  --sand:#f6efe8;  /* 砂岩白 */
  --text:#222;
  --muted:#666;
  --line: rgba(0,0,0,0.08);
  --max-width:1280px; /* 在1120-1440之间，选中间值1280 */
  --gap:20px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif;
  box-sizing: border-box;
}
*,:before,:after{box-sizing:inherit}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brick);text-decoration:none}
a:focus{outline:2px solid var(--brick);outline-offset:2px}
.container{width:calc(100% - 2*var(--gap));max-width:var(--max-width);margin:0 auto;padding:24px var(--gap);}
.site-header{padding:10px 0 6px;border-bottom:1px solid var(--line);background:transparent}
.nav-index{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted);gap:12px}
.nav-index .site-name{font-weight:700;color:var(--brick);text-decoration:none}
.path{font-size:12px;color:var(--muted);margin-top:6px}
/* 广告容器样式：独立区域，不能覆盖正文，不悬浮 */
.ad{max-width:var(--max-width);margin:18px auto;padding:6px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px}
.ad-top{margin-top:10px}
.ad-bottom{margin-bottom:30px}
/* 文章头部 */
.article{padding:12px 0}
.article-head h1{margin:6px 0 10px;font-size:30px;line-height:1.15;font-weight:700;text-align:center;color:var(--brick);letter-spacing:-0.02em}
.article-head .meta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.article-head .meta time{white-space:nowrap}
.article-head .summary{max-width:880px;margin:8px auto 18px;text-align:left;color:var(--text);font-size:15px}
/* 正文 */
.article-body{color:var(--text);font-size:16px;word-wrap:break-word;word-break:break-word;max-width:100%;}
.article-body p{margin:0 0 1em}
.article-body h2{margin:1.4em 0 0.6em;font-size:18px;color:var(--brick)}
.article-body img, .article-body iframe{max-width:100%;height:auto}
/* FAQ 列表：使用 details，无卡片，仅细线分隔 */
.faq{margin-top:20px}
.faq h2{font-size:16px;margin:6px 0;color:var(--brick)}
.faq-list details{border-top:1px solid var(--line);padding:10px 0}
.faq-list details summary{cursor:pointer;list-style:none;font-weight:600;color:var(--text);outline:none}
.faq-list details[open] summary{color:var(--brick)}
.faq-list details p{margin:8px 0 0;color:var(--muted)}
/* 相关阅读：编号列表样式 */
.related{margin-top:18px}
.related h2{font-size:16px;margin:6px 0;color:var(--brick)}
.related-list{padding-left:20px;color:var(--muted);margin:6px 0 20px}
.related-list li{margin:6px 0}
/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:18px 0;text-align:center;color:var(--muted);font-size:13px}
/* 视觉签名：全页直角与细线（无圆角、无阴影） */
*{border-radius:0}
/* 响应式规则 */
@media (min-width:1024px){
  /* 桌面：容器宽度在1120-1440之间，采用非对称双栏布局，标题跨栏 */
  :root{--max-width:1280px}
  .container{display:grid;grid-template-columns: 1fr 340px;grid-template-rows:auto;gap:28px;align-items:start;padding:36px var(--gap)}
  .article{grid-column:1 / 2;grid-row:1}
  .article-head h1{font-size:44px}
  .article-head .summary{margin-left:0;margin-right:auto;max-width:760px}
  .article-body{font-size:17px;max-width:900px}
  /* FAQ 与相关阅读放在右侧窄栏，宽窄交替感明显（正文宽，信息窄） */
  .info-columns{grid-column:2 / 3;grid-row:1;align-self:start}
  .info-columns .faq,.info-columns .related{padding-left:6px}
  .ad.ad-top{max-width:var(--max-width);margin-left:calc((100% - var(--max-width))/2)}
}
@media (max-width:767px){
  /* 手机：紧凑连续，站名、标题、摘要、正文顺序呈现，避免首屏空白 */
  :root{--max-width:768px}
  .container{display:block;padding:12px 14px}
  .nav-index{font-size:13px}
  .article-head h1{font-size:20px;margin-top:6px}
  .article-head .meta{justify-content:flex-start;gap:8px;font-size:12px}
  .article-head .summary{margin:8px 0 12px;font-size:14px}
  .article-body{font-size:15px}
  .info-columns{display:block}
  .faq h2,.related h2{font-size:15px}
  .related-list{padding-left:16px}
  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
  .article-body, .article-head .summary{word-break:break-word}
  .ad{padding:8px 10px}
}
/* 中间尺寸（768-1023）保持可读性但与桌面样式不同，避免单一卡片风格 */
@media (min-width:768px) and (max-width:1023px){
  :root{--max-width:960px}
  .container{display:block;padding:20px}
  .article-head h1{font-size:28px}
  .article-body{font-size:16px}
  .info-columns{margin-top:18px}
}