.faq{display:grid;gap:8px;margin-top:10px}
.faq details{border:1px solid rgba(24,40,54,.11);border-radius:10px;background:#fff}
.faq summary{padding:10px 13px;cursor:pointer;font-size:13px;font-weight:500}
.faq details p{margin:0;padding:0 13px 12px;color:#6b7883;font-size:12px;line-height:1.75}
/* 深色态挂 [data-theme="dark"]，不能只写 @media (prefers-color-scheme:dark)。
 *
 * 全站深色开关是三态（跟随系统 / 浅色 / 深色），最终统一落成 html[data-theme]。
 * 只认系统偏好的话，浅色系统上主动选「深色」时这里不生效：卡片仍是白底，
 * 而正文颜色已被 --cp-body 改成浅灰 —— 浅字压白底（1.63:1），问答等于看不见。
 * 这个坑站点里 44 个页面都踩过。 */
[data-theme="dark"] .faq details{background:#151a21;border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .faq summary{color:#e6ebf2}
[data-theme="dark"] .faq details p{color:#9aa6b4}

/* ── 裸 FAQ 区块自己带内容列 ──
 *
 * 背景：注入 FAQ 时按「有 <main> 就插到 </main> 之后」定位，于是工具页与
 *   .app 版式页里 <h2>常见问题</h2> 和 div.faq 都直接挂在 <body> 上 ——
 *   它们**不在任何容器里**，没人给它们收边。
 *
 *   实测（1440px）：div.faq 与里面的 details 都是 x 0 → 1440、左右内边距 0，
 *   整幅铺满、卡片两侧直接顶到屏幕边缘；而同一页下方 .creative-seo 是
 *   居中的正文列。两块内容列宽差很大，视觉上就是「下面齐、上面乱」。
 *   全站 61 个页面这样（<main> 之后无容器的 38 个工具页 + .app 版式页 23 个）。
 *   内容页的 FAQ 在 section.seo 里，本身已被收好，不受影响。
 *
 * 所以这里只补「裸」的那一种，用 body > 限定，不去动内容页的 .faq。
 *
 * 宽度统一走共享布局基线，
 * 这样在工具页上 FAQ 与下方 SEO 内容带的正文左边界是一条；
 * 窄屏时 max-width 不生效，两边自然留 25px，不会再顶到屏幕边缘。
 *
 * 必须显式写 box-sizing：本文件不引全局 `*{box-sizing:border-box}`，
 * 而 .app 版式页也没有 —— 用 content-box 的话 1090 + 50 会宽出 25px 对不齐。
 *
 * :has() 单独成条，不要和上面的规则合并成选择器列表：旧浏览器不支持 :has() 时
 * 会整条作废，合并写会导致连 div.faq 的收边一起丢掉。
 * （仓库里 theme.css 的 .editor:has(.kit) 已用过 :has()。） */
body > .faq {
  box-sizing: border-box;
  max-width: var(--lksc-content-max, 960px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
}
body > h2:has(+ .faq) {
  box-sizing: border-box;
  max-width: var(--lksc-content-max, 960px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
}