/* 座次指南文章页。基础调色与控件复用 style.css / guide.css。 */

/* 与 .art 同宽，否则面包屑贴在 .wrap 的外沿，和正文左缘差一大截 */
.crumb{max-width:800px;padding:16px 24px 0;font-size:12.5px;color:var(--ink-faint)}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.art{max-width:800px;padding-top:22px;padding-bottom:64px}
.art h1{font-size:34px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.lede{font-size:17px;color:var(--ink-mute);line-height:1.85;margin:16px 0 10px;
  padding-bottom:22px;border-bottom:1px solid var(--rule-soft)}
.art h2{font-size:23px;font-weight:700;margin:40px 0 14px}
.art h3{font-size:17.5px;font-weight:500;margin:28px 0 10px}
.art p{margin-bottom:14px;color:var(--ink-mute);font-size:16px;line-height:1.9}
.art p b,.art li b,.art td b{font-weight:500;color:var(--ink)}
.art ul,.art ol{margin:0 0 16px;padding-left:24px;color:var(--ink-mute);
  font-size:16px;line-height:1.9}
.art li{margin-bottom:9px}

/* 座次图：正文的主角，给足呼吸 */
.dia{margin:22px 0 26px;padding:18px 10px;background:var(--soft);
  border:1px solid var(--rule-soft);border-radius:12px;text-align:center}
.dia svg{width:100%;height:auto;max-width:100%}
.dia figcaption{font-size:12.5px;color:var(--ink-faint);margin-top:10px;
  line-height:1.6;padding:0 12px}
.dia .sn{font-size:16px;font-weight:500;fill:#fff;text-anchor:middle;
  font-family:var(--f-body)}
.dia .cap{font-size:13px;fill:var(--ink-faint);text-anchor:middle;
  font-family:var(--f-body);letter-spacing:.08em}
.dia .cap2{font-size:13px;fill:var(--ink-mute);font-family:var(--f-body)}

/* 文末转化区：读者刚读完规则，正是最想要工具的时候 */
.artcta{margin:44px 0 0;padding:26px 28px;border-radius:12px;
  background:var(--slate-bg);border:1px solid var(--slate)}
.artcta b{display:block;font-size:18px;font-weight:700;color:var(--ink);
  margin-bottom:8px}
.artcta p{font-size:15px;margin-bottom:18px}

.relt{font-size:17px !important;margin-top:46px !important}
.rel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.relcard{display:block;padding:16px 18px;border:1px solid var(--rule);
  border-radius:10px;text-decoration:none;transition:border-color .12s}
.relcard:hover{border-color:var(--slate)}
.relcard b{display:block;font-size:15.5px;font-weight:500;color:var(--ink);
  margin-bottom:5px}
.relcard span{font-size:12.5px;color:var(--ink-faint);line-height:1.6}

/* 栏目首页的卡片 */
.hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 8px}
.hubcard{display:block;padding:22px 24px;border:1px solid var(--rule);
  border-radius:12px;text-decoration:none;transition:border-color .12s,box-shadow .12s}
.hubcard:hover{border-color:var(--slate);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.hubcard h3{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 8px}
.hubcard p{font-size:14px;color:var(--ink-mute);margin:0;line-height:1.75}

@media (max-width:760px){
  .art h1{font-size:26px}
  .art h2{font-size:20px}
  .rel,.hubgrid{grid-template-columns:1fr}
}

/* 场景示例的声明条：明确告诉读者这是示例，不是真实客户案例 */
.notice{margin:18px 0 6px;padding:12px 16px;border-radius:9px;
  background:var(--soft);border-left:3px solid var(--slate);
  font-size:13.5px;color:var(--ink-faint);line-height:1.8}
.notice b{font-weight:500;color:var(--ink-mute)}

/* 场景页的「场景速览」表 */
.facts{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14.5px}
.facts th,.facts td{padding:11px 14px;border-bottom:1px solid var(--rule);
  text-align:left;vertical-align:top;line-height:1.8}
.facts th{width:98px;font-weight:500;color:var(--ink-mute);white-space:nowrap}
.facts td{color:var(--ink-mute)}

/* 排座步骤 */
.steps{counter-reset:st;list-style:none;padding-left:0;margin:18px 0 22px}
.steps li{counter-increment:st;position:relative;padding-left:40px;
  margin-bottom:16px;line-height:1.9}
.steps li::before{content:counter(st);position:absolute;left:0;top:1px;
  width:25px;height:25px;border-radius:50%;background:var(--slate);color:#fff;
  font-size:13px;font-weight:500;display:flex;align-items:center;
  justify-content:center}
.steps li b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}

@media(max-width:760px){
  .facts th{width:72px;padding:9px 8px 9px 0}
  .facts td{padding:9px 0 9px 8px}
}