/* guides.css — 指南页专用样式补充
   排版主体复用 legal.css 的 .legal-doc（同一套字号、行高、标题层级），
   这里只加法务页没有的几个组件：答案摘要框、要点卡、对比表、页尾 CTA。
   加载顺序：colors_and_type.css → legal.css → guides.css */

/* ---- 面包屑 ---- */
.guide-crumb {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 20px;
  letter-spacing: 0.02em;
}
.guide-crumb a { color: var(--fg-3); text-decoration: none; }
.guide-crumb a:hover { color: var(--spectrum-coral); }
.guide-crumb span { margin: 0 8px; opacity: 0.5; }

/* ---- 答案摘要框 ----
   放在正文最前面。读者扫一眼就能拿到结论，AI 引擎也最容易从这里提取
   可引用的答案——所以它必须是完整、能独立成立的一段话，不能写成
   「详见下文」这种指路牌。 */
.guide-answer {
  background: var(--ivory);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--spectrum-coral);
  padding: 24px 28px;
  margin: 0 0 40px;
}
.guide-answer p:last-child { margin-bottom: 0; }
.guide-answer .guide-answer-h {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--fg-3);
  margin: 0 0 12px;
}

/* ---- 要点卡 ----
   五个细节那种并列结构。每张卡自带小标题 + 「失败长什么样 / 合格长什么样」
   两行，比纯段落更容易扫读，也更容易被摘录成结构化答案。 */
.guide-points { margin: 32px 0; }
.guide-point {
  border-top: 1px solid var(--divider);
  padding: 24px 0;
}
.guide-point:last-child { border-bottom: 1px solid var(--divider); }
.guide-point h3 {
  margin: 0 0 6px !important;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.guide-point .guide-point-n {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--spectrum-coral);
  letter-spacing: 0.1em;
  flex: none;
}
.guide-point p { margin: 8px 0 0 !important; }
.guide-point .guide-bad,
.guide-point .guide-good {
  font-size: 15px;
  padding-left: 22px;
  position: relative;
}
.guide-point .guide-bad::before,
.guide-point .guide-good::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}
/* 用 × (U+00D7)，不要用 U+2715 那个叉：思源宋体没有后者的字形，会回退到
   系统字体，和同一行用思源渲染的 ✓ 粗细对不上。× 在字体里，也和页面其他
   位置（联系弹窗关闭键、移动端导航开关）用的符号一致。
   这里特意不写出 U+2715 的字面字符 —— subset-font.sh 会把注释里的字也扫进
   字符表，而 pyftsubset 对源字体没有的字形是静默跳过的，于是字符表声称有、
   字体里其实没有。sha256 指纹校验挡不住这种情况（两者确实同一次生成）。 */
.guide-point .guide-bad::before  { content: '×'; color: #C0503A; }
.guide-point .guide-good::before { content: '✓'; color: #4A8A5C; }

/* ---- 对比表 ----
   窄屏时横向滚动而不是把整页撑破。 */
.guide-table-wrap { overflow-x: auto; margin: 28px 0; }
.guide-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-family: var(--font-sans);
  font-size: 15px;
}
.guide-table th,
.guide-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
  line-height: 1.65;
}
.guide-table th {
  font-weight: 600;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.guide-table td:first-child {
  color: var(--fg-2);
  font-weight: 500;
  white-space: nowrap;
}

/* ---- 提示条 ---- */
.guide-note {
  background: var(--cream-100);
  border: 1px solid var(--border-hair);
  padding: 18px 22px;
  margin: 28px 0;
  font-size: 15px;
}
.guide-note p:last-child { margin-bottom: 0; }

/* ---- 页尾 CTA ---- */
.guide-cta {
  margin: 56px 0 0;
  padding: 32px;
  background: var(--ink-900);
  color: rgba(251, 245, 230, 0.75);
  text-align: center;
}
.guide-cta h2 {
  color: var(--cream-50) !important;
  font-size: 24px !important;
  margin: 0 0 10px !important;
  border: 0 !important;
  padding: 0 !important;
}
.guide-cta p {
  color: rgba(251, 245, 230, 0.72) !important;
  font-size: 15px !important;
  max-width: 46ch;
  margin: 0 auto 22px !important;
}
.guide-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-50);
  color: var(--ink-800) !important;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 200ms var(--ease-out);
}
.guide-cta a:hover { background: #fff; transform: translateY(-1px); }

@media (max-width: 640px) {
  .guide-answer { padding: 20px 20px; }
  .guide-cta { padding: 28px 20px; }
}