/* Monochrome-feature 模板样式表
   视觉基准：黑白与单一朱红强调（朱红为 --accent）
   使用系统字体、Grid/Flex，桌面与手机为两套排版。
*/
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --line:#e6e6e6;
  --accent:#C41E2A; /* 朱红强调色 */
  --container-min:1120px;
  --container-max:1440px;
  --radius:2px; /* surface:2px小圆角 */
  --gap:20px;
  --dense-leading:1.45; /* 紧凑 */
  --sig-size:14px;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;margin:0;padding:0;}
.container{margin:28px auto;padding:20px;box-sizing:border-box;}
.top-ad,.ad-middle,.ad-bottom{max-width:1200px;margin:12px auto;padding:8px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:13px;text-align:center}
.site-header{padding:12px 20px;border-bottom:1px solid var(--line);}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:700;color:var(--text);text-decoration:none}
.crumb{color:var(--muted);font-size:13px}
.header-line{height:6px;background:linear-gradient(90deg,var(--line),transparent);margin-top:8px;border-radius:2px}
.article-head h1{margin:18px 0 8px 0;font-size:28px;line-height:1.05;letter-spacing:-0.02em;font-weight:800;color:var(--text);}
.article-head .meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:8px}
.article-head .summary{color:var(--muted);margin:6px 0 14px;font-size:15px}

/* Layout grid placeholder for desktop/mobile rules below */
.layout-grid{display:block}
.content{background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:0}
.content-inner{color:var(--text);line-height:var(--dense-leading);font-size:15px}
.info{margin-top:18px}
.related h3,.faq h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:12px 0}
.sig{display:inline-block;width:44px;height:10px;background:linear-gradient(90deg,var(--text),transparent);border-radius:2px;font-size:var(--sig-size);color:transparent;margin-right:8px}
.related-list{display:block}
.site-footer{border-top:1px solid var(--line);padding:14px 20px;margin-top:24px;color:var(--muted);font-size:13px}

/* FAQ content handling: support dl(dt/dd) and simple Q/A blocks */
.faq-content dl{margin:0;padding:0}
.faq-content dt{font-weight:700;padding:10px 0;color:var(--text)}
.faq-content dd{margin:0 0 12px 0;padding:0;color:var(--muted)}
.faq-content .faq-item{display:block;margin-bottom:10px}
.faq-content .faq-q{font-weight:700;color:var(--text)}
.faq-content .faq-a{color:var(--muted);margin-top:6px}

/* Related items: expect server-provided list. Make a neutral two-column summary list on desktop */
.related-list > *{display:block}

/* --- Desktop: 明确规则 @media (min-width:1024px) --- */
@media (min-width:1024px){
  .container{max-width:var(--container-max);min-width:var(--container-min);padding:28px}
  .article-head h1{font-size:48px;line-height:1.02;letter-spacing:-0.02em}

  /* 8/4 分栏：使用非对称网格 */
  .layout-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
  .content{grid-column:1 / 2}
  .info{grid-column:2 / 3;position:relative}

  /* emphasize thin grid lines as main visual */
  .container::before{content:"";position:absolute;left:50%;top:0;height:100%;width:1px;background:linear-gradient(180deg,var(--line),transparent);opacity:0.6;transform:translateX(-50%);pointer-events:none}

  /* FAQ: 左侧问题右侧答案表格式 */
  .faq-content dl{display:grid;grid-template-columns:30% 70%;column-gap:20px;align-items:start}
  .faq-content dt{padding:12px 0;border-bottom:1px solid var(--line);}
  .faq-content dd{padding:12px 0;border-bottom:1px solid var(--line)}

  /* Related: 两列摘要列表 */
  .related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .related-list a, .related-list > *{display:block;padding:10px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--text);background:transparent}

  /* Visual signature: 章节标题带短编号线但不自动生成 */
  .related h3 .sig, .faq h3 .sig{width:36px;height:6px;background:var(--accent);opacity:0.9}

  /* Surface: 2px 小圆角、浅边框、无阴影 */
  .content-inner, .info section{border-radius:var(--radius);padding:0}
}

/* --- Mobile: 明确规则 @media (max-width:767px) --- */
@media (max-width:767px){
  .container{padding:12px;margin:0 auto}
  .site-header{padding:10px}
  .article-head h1{font-size:20px;margin:8px 0}
  .article-head .meta{flex-direction:column;align-items:flex-start;gap:6px}
  .layout-grid{display:block}
  .content{order:1}
  .info{order:2;margin-top:16px}

  /* Related on mobile: 单列自然重排（遵守 mobile_contract） */
  .related-list{display:block}
  .related-list a, .related-list > *{display:block;padding:10px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px}

  /* FAQ on mobile: 折叠为单列，问题先于答案堆叠 */
  .faq-content dl{display:block}
  .faq-content dt{padding:10px 0;border-bottom:1px solid var(--line)}
  .faq-content dd{padding:8px 0;color:var(--muted)}

  /* Visual signature for small screens keep subtle line */
  .related h3 .sig, .faq h3 .sig{width:28px;height:4px;background:var(--accent)}

  /* Ensure no horizontal scroll at 320px */
  body,html{overflow-x:hidden}
  .content-inner img{max-width:100%;height:auto}
}

/* Accessibility & density tweaks */
a{color:var(--accent)}
p{margin:0 0 12px 0}
h3{margin:12px 0 8px 0}
/* Avoid heavy animations */
*{transition:none}