/* why.html 专属样式 */
.gaps{padding:56px 0 40px}
.gap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gap{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;background:var(--surface)}
.gap-q{font-size:14px;color:var(--muted)}
.gap-a{font-size:22px;font-weight:700;color:var(--strong);margin:2px 0 8px}
.gap p{font-size:14.5px;color:var(--muted)}
.legend{margin-top:22px;text-align:center;font-size:13.5px;color:var(--muted)}
.legend .badge{font-size:12px;padding:1px 8px;font-weight:500;margin:0 2px}

.adv-sec{padding:72px 0}
.adv-wrap{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.adv-head{position:sticky;top:92px}
.adv-letter{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font-weight:700;font-size:20px;display:grid;place-items:center;margin-bottom:16px}
.adv-head h2{font-size:28px;margin:6px 0 12px;letter-spacing:-.2px}
.adv-head p{color:var(--muted);font-size:15.5px}
.adv-list{display:flex;flex-direction:column;gap:14px}
.adv{display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;transition:border-color .15s,box-shadow .15s}
.adv:hover{border-color:#CFCFCF;box-shadow:var(--shadow)}
.adv-n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);padding-top:3px}
.adv h3{font-size:17px;margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.adv h3 code,.adv p code{font-family:var(--mono);font-size:.9em;background:#F0F0F0;padding:0 5px;border-radius:4px;font-weight:500}
.adv p{color:var(--muted);font-size:14.8px;line-height:1.8}
.adv p b{color:var(--text)}
.adv .badge{font-size:11.5px;padding:1px 8px;font-weight:500}

.cmp th[scope=row]{white-space:nowrap;color:var(--strong);font-weight:600}
.cmp .t-type{color:var(--muted);font-size:13.5px;min-width:130px}
.cmp td{line-height:1.7}
.cmp td code{font-family:var(--mono);font-size:.9em;background:#F0F0F0;padding:0 4px;border-radius:4px}
.cmp thead th.hl{color:var(--accent)}
.tbl-hint{display:none;text-align:center;font-size:12.5px;color:var(--muted);margin-top:8px}


@media (max-width:1024px){
  .adv-wrap{grid-template-columns:1fr;gap:24px}
  .adv-head{position:static}
}
@media (max-width:760px){
  .gap-grid{grid-template-columns:1fr}
  .adv-sec{padding:52px 0}
  .adv-head h2{font-size:24px}
  .adv{grid-template-columns:1fr;gap:4px;padding:18px}
        .tbl-hint{display:block}
}
.page-hero h1 .hl{white-space:nowrap}
@media (max-width:760px){
  .page-hero .toc{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;scrollbar-width:none}
  .page-hero .toc a{flex:none}
}
@media (max-width:760px){
  .table-wrap:has(.cmp){border:0;background:none;overflow:visible}
  table.cmp{min-width:0}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:12px;overflow:hidden}
  .cmp th[scope=row]{font-size:17px;padding:14px 16px 4px;border:0}
  .cmp td{border:0;padding:6px 16px}
  .cmp td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
  .cmp td.hl{background:rgba(0,95,184,.05);padding:10px 16px 14px;margin-top:6px}
  .cmp td.hl::before{color:var(--accent)}
  .cmp tbody tr:hover td{background:none}
  .cmp tbody tr:hover td.hl{background:rgba(0,95,184,.05)}
  .cmp ~ .tbl-hint,.table-wrap:has(.cmp) + .tbl-hint{display:none}
}