/* 유틸리티 — 인라인 style 속성이 CSP로 막혀 있어 클래스로 제공한다 */
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; } .mb20 { margin-bottom: 20px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mt32 { margin-top: 32px; } .mt48 { margin-top: 48px; }
.fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; } .fs13n { font-size: 13px; font-weight: 400; }
.rowsp { justify-content: space-between; margin-bottom: 16px; }
.fl140 { flex: 1; min-width: 140px; } .fl160 { flex: 1; min-width: 160px; }
.w130 { width: 130px; }
.mw260 { max-width: 260px; }
.selectall { user-select: all; }
.hint13 { font-size: 13px; margin: 4px 0 12px; }
.ul-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
input.in-sm { width: 140px; padding: 5px 8px; font-size: 13px; }
.card > p.mb16 { margin-bottom: 16px; }

/* 포트 선택 / 포트별 카드 */
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); margin: 0; cursor: pointer; font-weight: 400; }
.chk input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; }
.appr { display: grid; gap: 8px; justify-items: end; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.svc { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.svc-hd { display: flex; justify-content: space-between; align-items: baseline; }
.svc-ft { display: flex; justify-content: space-between; align-items: center; }
.svc .switch { justify-self: start; }
.inline .switch { margin-left: 4px; }