/* 브로커 비교표 — bp.css 토큰만 사용 (2026-10-28) */
.cmpsec { padding: 40px 0 140px; }
.cmpf { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.cmpf i { font-style: normal; font-size: 28px; font-weight: 700; color: var(--faint); }
.cmpf__i { min-width: 180px; padding: 20px 22px; border-radius: 20px; background: var(--surface-2); display: grid; gap: 4px; }
.cmpf__i span { font-size: 15px; font-weight: 700; color: var(--ink); }
.cmpf__i b { font-size: 13px; font-weight: 500; color: var(--muted); }
.cmpf__i--hl { background: var(--primary); }
.cmpf__i--hl span, .cmpf__i--hl b { color: var(--primary-ink); }
.ctab { border-radius: 28px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.ctab__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.ctab__sort { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.ctab__sort select { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-2); font: inherit; color: var(--ink); }
.ctab__scroll { overflow-x: auto; }
.ctab__t { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 15px; }
.ctab__t th { padding: 14px 16px; text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.ctab__t td { padding: 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); vertical-align: middle; white-space: nowrap; }
.ctab__t td > span:not(.ctab__tbd) { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ctab__t td:last-child { text-align: right; }
.ctab__b { display: flex; align-items: center; gap: 12px; }
.ctab__b .logo-plate { flex: none; width: 52px; height: 38px; padding: 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.ctab__b .logo-plate img { max-height: 18px; max-width: 40px; }
.ctab__b b { display: block; font-size: 16px; }
.ctab__b .apill { margin-top: 4px; height: 22px; font-size: 11.5px; }
.ctab__back { color: var(--positive) !important; }
.ctab__net { font-size: 17px; font-weight: 800 !important; letter-spacing: -0.02em; }
.ctab__net s { margin-right: 6px; font-size: 13px; font-weight: 500; color: var(--faint); }
.ctab__tbd { font-size: 13px; font-weight: 500; color: var(--faint); }
.ctab__note { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
@media (max-width: 900px) {
  .cmpsec { padding: 20px 0 100px; }
  .cmpf { gap: 8px; margin-bottom: 28px; }
  .cmpf i { font-size: 18px; }
  .cmpf__i { min-width: 0; flex: 1 1 40%; padding: 14px; }
  .ctab { border-radius: 20px; }
  .ctab__bar { padding: 14px; }
  .ctab__bar .otabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
}

/* 이용 방법 > 용어 설명 (2026-10-28) */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.terms__i { padding: 24px; border-radius: 20px; background: var(--surface-2); }
.terms__i dt { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.terms__i dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) { .terms { grid-template-columns: minmax(0, 1fr); } .terms__i { padding: 20px; } }