/* ===========================================================
   faq.html — 常见问题查询
   布局参考 jiro.build/components/faq/faq-04-kelo：
   左栏标题 + 浅灰胶囊 callout；右栏折叠列表，首条默认展开。
   折叠交互：is-open + aria-expanded + 内容 max-height 过渡。
   类名前缀 faq-*
   =========================================================== */

.faq-page { background: var(--white); }

/* ----- 主体两栏 ----- */
.faq-section { padding: 60px 0 80px; }
.faq-layout {
  display: grid;
  /* .85 / 1.15：右侧问题列表往左延伸约 38px（≈5 个英文字符宽，14.5px 字号下每个约 7.6px），
     左栏相应收窄。用 fr 比例而不是负 margin，响应式下两栏始终按比例分。 */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

/* ----- 左栏：标题区 ----- */
.faq-intro { position: sticky; top: 92px; }
.faq-intro h1 {
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
}
/* 双色斜体 + 粒子文字：Questions,（墨色）+ answered（主蓝粒子文字动效，复刻 21st.dev 的"活"的 answered） */
.particle-text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  touch-action: none;
  isolation: isolate;
}
.particle-text__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.particle-text__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 标题内联版：贴合 "answered" 字宽，避免撑满整行 */
.faq-title .particle-text {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 0;
  vertical-align: -0.06em;
}
/* 透明占位文本：给粒子画布撑出正确字号与字宽（getBoundingClientRect / 取样用） */
.faq-title .particle-text__label {
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .particle-text { touch-action: auto; }
}
.faq-lead {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--muted);
  /* 46ch → 36.8ch：比原宽窄 1/5（0.8×），左栏小字不再占满整栏 */
  max-width: 36.8ch;
  margin: 0 0 28px;
}
/* callout 模块已移除（2026-09-13） */

/* 中英韩三份文案（由 build-faq.js 生成，.faq-zh / .faq-en / .faq-ko 各一份）。
   不走 i18n.js —— 静态写进 HTML 才能被 build-search.js 抓到；
   语言切换纯 CSS，按 html[lang] 控制，零 JS 开销。
   注意 i18n.js 写的是 lang="zh-CN"，故用 ^= 前缀匹配。
   由「非 zh 即 en」的两态改为三态显式匹配：加韩文后原有的 :not([lang^="zh"])
   会让韩文界面显示英文，必须按语言逐个指定。 */
.faq-q-text > .faq-zh, .faq-q-text > .faq-en, .faq-q-text > .faq-ko,
.faq-a-inner > .faq-zh, .faq-a-inner > .faq-en, .faq-a-inner > .faq-ko { display: none; }
html[lang^="zh"] .faq-q-text > .faq-zh,
html[lang^="zh"] .faq-a-inner > .faq-zh { display: block; }
html[lang^="ko"] .faq-q-text > .faq-ko,
html[lang^="ko"] .faq-a-inner > .faq-ko { display: block; }
html[lang^="en"] .faq-q-text > .faq-en,
html[lang^="en"] .faq-a-inner > .faq-en { display: block; }

.faq-a-inner > .faq-zh, .faq-a-inner > .faq-en, .faq-a-inner > .faq-ko { margin: 0; }

/* ----- 右栏：折叠列表 ----- */
.faq-list { list-style: none; margin: 0; padding: 0; }
/* 只给关闭项画 1px 分隔线；展开项 li 整个就是胶囊，不需要线 */
.faq-item:not(.is-open) { border-bottom: 1px solid var(--line); }
/* 首条不要顶部线：与上一区（callout）天然断开，线条多余 */

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  background: transparent;
  border: 0;
  /* 15px：字号缩小到 14.5px 后，原 22px 间距显得过空，缩掉三分之一 */
  padding: 15px 0;
  font-family: inherit;
  /* 14.5px：与答案同号，层级靠 font-weight(700) + --ink 深色区分，不靠字号 */
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  letter-spacing: -.005em;
  /* TKS 式 hover：整行内容左右内缩（tks.world/virtual 同款缓动 easeOutCubic），
     颜色保持原 .2s 快速响应，padding 用 .4s 慢速进场 */
  transition: color .2s,
    padding-left .4s cubic-bezier(.215, .61, .355, 1),
    padding-right .4s cubic-bezier(.215, .61, .355, 1);
}
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.faq-q:hover { color: var(--blue); }
/* hover 内缩只作用于闭合行（列表态）；展开态是胶囊卡片，内部不缩 */
@media (hover: hover) {
  .faq-item:not(.is-open) .faq-q:hover {
    /* 14px ≈ 1em（行字号 14.5px），TKS 原版 2rem 缩进配 29px 字号的比例换算 */
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* "+" 图标：横竖两根线，旋转 45° 变 "×"。尺寸贴合问题字号（16.5px），
   而不是 22×22 — 太大了，跟文字不匹配 */
.faq-icon {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--muted);
  transition: background .2s;
}
.faq-icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-icon::after  { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq-q:hover .faq-icon::before, .faq-q:hover .faq-icon::after { background: var(--blue); }

/* 答案区：默认折叠。
   用 grid-template-rows: 0fr → 1fr 替代 max-height 过渡——
   避免 overflow:hidden 在 max-height 边界处子像素重绘导致的"文字残影闪一下"。
   overflow:hidden 移到内层 .faq-a-inner 上，grid 子项必须 min-height:0 才能正确收起。 */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
  max-width: 64ch;
  /* 只管 grid 行高收拢；文字显隐交给内层 .faq-a-inner 负责。
     收起时内层立即 visibility:hidden，文字不参与 overflow 裁剪重绘 → 残影根治 */
  transition: grid-template-rows .3s ease;
  will-change: grid-template-rows;
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  /* 文字本体容器：默认（收起）立即隐藏，不参与 grid 收拢时的裁剪重绘 → 残影从根消除。
     transition 中 visibility 无延迟(0s)=收起时文字瞬间移出绘制；展开态覆盖为立即 visible */
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s;
}

/* 答案里的外链：蓝色 + 下划线，长 URL 自动换行避免撑破容器 */
.faq-a a.faq-ext-link,
.faq-a a.faq-ext-link:visited {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.faq-a a.faq-ext-link:hover { opacity: .82; }

/* 展开态：把整个 li 做成一个胶囊（"一个组件"）。
   问题和答案都是胶囊内的子节点，padding 由 li 统一管 → 两段右边缘天然对齐，
   圆角只画在 li 外缘一次，不存在"两个浅灰矩形堆叠"的视觉割裂 */
.faq-item.is-open {
  background: var(--zone-soft);
  border-radius: var(--radius);
  padding: 18px 24px 22px;
  margin: 18px 0;
}
.faq-item.is-open .faq-q {
  background: transparent;
  border-radius: 0;
  padding: 0 0 12px;
  margin: 0;
  transition: color .2s;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: var(--ink); }
.faq-item.is-open .faq-q:hover .faq-icon::before,
.faq-item.is-open .faq-q:hover .faq-icon::after { background: var(--blue); }

.faq-item.is-open .faq-a {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  grid-template-rows: 1fr;
}
/* 展开态：内层文字立即可见(visibility 0s)+ 随高度淡入(opacity .3s) */
.faq-item.is-open .faq-a-inner {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease;
}

/* ----- 响应式 ----- */
@media (max-width: 980px) {
  .faq-section { padding: 50px 0 70px; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro { position: static; }
}
@media (max-width: 600px) {
  .faq-section { padding: 36px 0 50px; }
  .faq-q { font-size: 14px; padding: 12px 0; }
  .faq-item.is-open { padding: 16px 20px 20px; }
  .faq-item.is-open .faq-q { padding: 0 0 10px; }
}