/* CRM 세그먼트 보드 — 모든 선택자는 .fx-crm-segment-board 안에만 둔다.
   Formula X 공용 토큰(--card 등)을 쓰고 브랜드 토큰은 참조하지 않는다.
   브랜드별 차이는 web/brands/<brand>/theme.css 의 스코프 안에서만 --sb-* 를 재매핑한다.
   본문·보조문구 모두 본문색 계열이라 6 테마(Formula·Be:Move·슈퍼짐 × 라이트·다크)에서 4.5 이상이다.
   (supergym 라이트의 --text-sub 3.93만 스코프에서 --sb-sub 을 본문색으로 올린다.) */
.fx-crm-segment-board{--sb-card:var(--card);--sb-text:var(--text);--sb-sub:var(--text-sub);--sb-border:var(--border);--sb-soft:var(--bg);--sb-fill:var(--primary-fill);--sb-fill-hover:var(--primary-fill-hover);--sb-line-accent:var(--primary-fill);--sb-ok:var(--success);--sb-warn:var(--warning);--sb-bad:var(--danger);--sb-display:inherit;--sb-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sb-radius-control:4px;--sb-radius-card:6px;--sb-gap:16px;--sb-pad:24px;color:var(--sb-text);font-size:14px;line-height:1.5;max-width:1400px;width:100%;margin:0 auto;padding:var(--sb-pad);box-sizing:border-box}
.fx-crm-segment-board *{box-sizing:border-box}
.fx-crm-segment-board [hidden]{display:none!important}
.fx-crm-segment-board :is(h1,h2,h3,p){margin:0 0 8px}
.fx-crm-segment-board h1{font-family:var(--sb-display);font-size:28px;line-height:1.3}
.fx-crm-segment-board h2{font-family:var(--sb-display);font-size:20px}
.fx-crm-segment-board h3{font-size:15px}
.fx-crm-segment-board small{display:block;font-size:12px;color:var(--sb-sub);line-height:1.5;overflow-wrap:anywhere}
.fx-crm-segment-board :is(button,input,select):focus-visible{outline:2px solid var(--sb-text);outline-offset:2px}
.fx-crm-segment-board .sb-header{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:var(--sb-gap)}
.fx-crm-segment-board .sb-eyebrow{font-size:12px;font-weight:700;color:var(--sb-sub)}
.fx-crm-segment-board .sb-stamp{color:var(--sb-sub);font-size:13px}
.fx-crm-segment-board .sb-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);padding:12px;margin-bottom:var(--sb-gap)}
.fx-crm-segment-board .sb-periods{display:flex;flex-wrap:wrap;gap:4px}
.fx-crm-segment-board .sb-periods button{min-height:44px;padding:0 14px;background:transparent;border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);font-weight:600;cursor:pointer;color:var(--sb-text)}
.fx-crm-segment-board .sb-periods button:hover{border-color:var(--sb-fill)}
.fx-crm-segment-board .sb-periods button.is-on{background:var(--sb-fill);border-color:var(--sb-fill);color:#fff}
.fx-crm-segment-board .sb-field{display:flex;align-items:center;gap:6px;color:var(--sb-sub);font-size:13px;white-space:nowrap}
.fx-crm-segment-board .sb-field select,.fx-crm-segment-board .sb-field input{min-height:44px;padding:0 10px;background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);color:var(--sb-text);font:inherit;max-width:100%}
.fx-crm-segment-board .sb-range{font-family:var(--sb-mono);font-size:13px;color:var(--sb-sub);margin-left:auto}
.fx-crm-segment-board .sb-partial{display:flex;gap:8px;align-items:baseline;background:var(--sb-soft);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);padding:10px 14px;margin-bottom:var(--sb-gap);overflow-wrap:anywhere;word-break:keep-all}
.fx-crm-segment-board .sb-partial b{white-space:nowrap}
.fx-crm-segment-board .sb-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:var(--sb-gap)}
.fx-crm-segment-board .sb-card{display:block;width:100%;text-align:left;background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);padding:14px 16px;cursor:pointer;color:var(--sb-text);font:inherit;min-height:44px}
.fx-crm-segment-board .sb-card:hover{border-color:var(--sb-fill)}
.fx-crm-segment-board .sb-card.is-on{border-color:var(--sb-line-accent);box-shadow:inset 0 0 0 1px var(--sb-line-accent)}
.fx-crm-segment-board .sb-card .sb-card-name{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.fx-crm-segment-board .sb-card .sb-delta{font-family:var(--sb-mono);font-size:12px;font-weight:500;white-space:nowrap;color:var(--sb-sub)}
.fx-crm-segment-board .sb-card .sb-card-num{display:block;margin-top:6px;font-family:var(--sb-display);font-size:34px;font-weight:600;line-height:1.1}
.fx-crm-segment-board .sb-card .sb-card-num small{display:inline;font-size:14px;font-weight:500;margin-left:3px}
.fx-crm-segment-board .sb-card .sb-card-sub{display:block;margin-top:4px;font-size:13px;color:var(--sb-sub)}
.fx-crm-segment-board .sb-basis{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:12px}
.fx-crm-segment-board .sb-basis span{color:var(--sb-sub)}
.fx-crm-segment-board .sb-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:var(--sb-gap)}
.fx-crm-segment-board .sb-kpi{background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);padding:12px 16px;min-width:0}
.fx-crm-segment-board .sb-kpi .sb-kl{display:block;color:var(--sb-sub);font-size:13px}
.fx-crm-segment-board .sb-kpi .sb-kv{display:block;margin-top:2px;font-family:var(--sb-display);font-size:26px;font-weight:600;line-height:1.2}
.fx-crm-segment-board .sb-kpi .sb-kn{display:block;font-size:13px;color:var(--sb-sub)}
.fx-crm-segment-board .sb-two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;margin-bottom:var(--sb-gap)}
.fx-crm-segment-board .sb-panel{background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);padding:14px 16px;min-width:0}
.fx-crm-segment-board .sb-panel .sb-hint{margin:0 0 10px;font-size:13px;color:var(--sb-sub)}
.fx-crm-segment-board .sb-chart{display:flex;gap:6px;align-items:stretch;overflow-x:auto}
.fx-crm-segment-board .sb-col{flex:1 1 0;min-width:48px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;padding:4px 2px;background:transparent;border:1px solid transparent;border-radius:var(--sb-radius-control);cursor:pointer;min-height:176px;color:var(--sb-text);font:inherit}
.fx-crm-segment-board .sb-col:hover{border-color:var(--sb-border)}
.fx-crm-segment-board .sb-col.is-static{cursor:default}
.fx-crm-segment-board .sb-col.is-on{background:var(--sb-soft);border-color:var(--sb-line-accent)}
.fx-crm-segment-board .sb-col b{font-family:var(--sb-mono);font-size:12px;font-weight:500;text-align:center}
.fx-crm-segment-board .sb-col i{display:block;background:var(--sb-soft);border:1px solid var(--sb-border);border-radius:2px 2px 0 0;min-height:2px}
.fx-crm-segment-board .sb-col.is-on i{background:var(--sb-fill);border-color:var(--sb-fill)}
.fx-crm-segment-board .sb-col em{font-style:normal;font-size:12px;text-align:center;color:var(--sb-sub)}
.fx-crm-segment-board .sb-col u{text-decoration:none;font-family:var(--sb-mono);font-size:11px;text-align:center;color:var(--sb-sub);min-height:16px}
.fx-crm-segment-board .sb-staff{display:grid;grid-template-columns:minmax(64px,auto) 44px minmax(0,1fr) 44px;gap:8px 10px;align-items:center}
.fx-crm-segment-board .sb-staff .sb-th{font-size:12px;color:var(--sb-sub)}
.fx-crm-segment-board .sb-staff .sb-n{font-family:var(--sb-mono);font-size:13px;text-align:right}
.fx-crm-segment-board .sb-meter{display:block;height:8px;background:var(--sb-soft);border:1px solid var(--sb-border);border-radius:2px;overflow:hidden}
.fx-crm-segment-board .sb-meter i{display:block;height:100%;background:var(--sb-fill)}
.fx-crm-segment-board .sb-split{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.fx-crm-segment-board .sb-split.is-open{grid-template-columns:minmax(0,1fr) 340px}
.fx-crm-segment-board .sb-filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}
.fx-crm-segment-board .sb-check{display:flex;align-items:center;gap:6px;min-height:44px;font-size:13px;color:var(--sb-text)}
.fx-crm-segment-board .sb-check input{width:18px;height:18px;accent-color:var(--sb-fill)}
.fx-crm-segment-board .sb-count{margin-left:auto;font-size:13px;color:var(--sb-sub)}
.fx-crm-segment-board .sb-tablebox{overflow-x:auto}
.fx-crm-segment-board table.sb-table{width:100%;min-width:720px;border-collapse:collapse;font-size:13px}
.fx-crm-segment-board .sb-table :is(th,td){padding:8px;text-align:left;vertical-align:middle;border-top:1px solid var(--sb-border);overflow-wrap:anywhere}
.fx-crm-segment-board .sb-table thead th{border-top:0;font-size:12px;font-weight:600;color:var(--sb-sub);white-space:nowrap}
.fx-crm-segment-board .sb-table tbody tr.is-sel{background:var(--sb-soft)}
.fx-crm-segment-board .sb-mname{display:block;width:100%;min-height:44px;padding:2px 0;text-align:left;background:transparent;border:0;cursor:pointer;color:var(--sb-text);font:inherit}
.fx-crm-segment-board .sb-mname b{display:block;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.fx-crm-segment-board .sb-mname span{display:block;font-size:12px;color:var(--sb-sub)}
.fx-crm-segment-board .sb-mono{font-family:var(--sb-mono);font-size:13px}
.fx-crm-segment-board .sb-pill{display:inline-block;padding:1px 7px;border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);font-size:12px;font-weight:600;white-space:nowrap;color:var(--sb-text);background:var(--sb-card)}
.fx-crm-segment-board .sb-pill.is-ok{border-color:var(--sb-ok)}
.fx-crm-segment-board .sb-pill.is-warn{border-color:var(--sb-warn)}
.fx-crm-segment-board .sb-pill.is-hot{border-color:var(--sb-bad)}
.fx-crm-segment-board .sb-more{display:block;width:100%;min-height:44px;margin-top:6px;background:transparent;border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);font-weight:600;cursor:pointer;color:var(--sb-text);font:inherit}
.fx-crm-segment-board .sb-more:hover{border-color:var(--sb-fill)}
.fx-crm-segment-board .sb-empty{padding:32px 12px;text-align:center;color:var(--sb-sub)}
.fx-crm-segment-board .sb-dw{background:var(--sb-card);border:1px solid var(--sb-line-accent);border-radius:var(--sb-radius-card);padding:14px 16px;align-self:start;min-width:0}
.fx-crm-segment-board .sb-dw header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.fx-crm-segment-board .sb-dw h3{margin:0;font-size:18px;font-weight:700}
.fx-crm-segment-board .sb-dw .sb-x{min-width:44px;min-height:44px;background:transparent;border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);cursor:pointer;color:var(--sb-text);font:inherit}
.fx-crm-segment-board .sb-dw dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 8px;margin:10px 0;font-size:13px}
.fx-crm-segment-board .sb-dw dt{color:var(--sb-sub)}
.fx-crm-segment-board .sb-dw dd{margin:0;overflow-wrap:anywhere}
.fx-crm-segment-board .sb-next{background:var(--sb-soft);border-radius:var(--sb-radius-control);padding:8px 10px;font-weight:600;margin-bottom:10px}
.fx-crm-segment-board .sb-lab{display:block;margin:0 0 6px;font-size:12px;font-weight:600;color:var(--sb-sub)}
.fx-crm-segment-board .sb-rs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fx-crm-segment-board .sb-rs button{min-height:44px;background:transparent;border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);font-weight:600;cursor:pointer;color:var(--sb-text);font:inherit}
.fx-crm-segment-board .sb-rs button.is-on{background:var(--sb-fill);border-color:var(--sb-fill);color:#fff}
.fx-crm-segment-board .sb-rs button:disabled{opacity:.45;cursor:not-allowed}
.fx-crm-segment-board .sb-cb{margin-top:8px}
.fx-crm-segment-board .sb-cb input{min-height:44px;width:100%;background:var(--sb-card);color:var(--sb-text);border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);padding:6px 8px;font:inherit}
.fx-crm-segment-board .sb-error{color:var(--sb-text);font-weight:600;font-size:13px;margin:8px 0 0}
.fx-crm-segment-board .sb-note{color:var(--sb-sub);font-size:13px;margin:8px 0 0}
.fx-crm-segment-board .sb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);background:var(--sb-card);color:var(--sb-text);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.fx-crm-segment-board .sb-btn:hover{border-color:var(--sb-fill)}
.fx-crm-segment-board .sb-btn.is-primary{background:var(--sb-fill);border-color:var(--sb-fill);color:#fff;font-weight:700}
.fx-crm-segment-board .sb-btn:disabled{opacity:.45;cursor:not-allowed}
.fx-crm-segment-board .sb-meta{font-size:12px;color:var(--sb-sub);margin:0 0 12px}
@media (max-width:1040px){.fx-crm-segment-board .sb-cards,.fx-crm-segment-board .sb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-crm-segment-board .sb-two,.fx-crm-segment-board .sb-split.is-open{grid-template-columns:minmax(0,1fr)}.fx-crm-segment-board .sb-split.is-open .sb-dw{order:-1}.fx-crm-segment-board .sb-range{margin-left:0;width:100%}}
@media (max-width:640px){.fx-crm-segment-board{--sb-pad:16px}.fx-crm-segment-board .sb-cards,.fx-crm-segment-board .sb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-crm-segment-board h1{font-size:24px}.fx-crm-segment-board .sb-card .sb-card-num{font-size:30px}.fx-crm-segment-board .sb-col{min-width:30px}.fx-crm-segment-board .sb-chart{gap:2px}.fx-crm-segment-board table.sb-table{display:block;min-width:0}.fx-crm-segment-board .sb-table thead{display:none}.fx-crm-segment-board .sb-table tbody{display:block}.fx-crm-segment-board .sb-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"member key" "next state";gap:2px 12px;align-items:center;background:var(--sb-card);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);padding:10px 12px;margin-bottom:8px}.fx-crm-segment-board .sb-table tbody tr.is-sel{background:var(--sb-soft);border-color:var(--sb-line-accent)}.fx-crm-segment-board .sb-table tbody td{display:block;min-width:0;border:0;padding:0}.fx-crm-segment-board .sb-table tbody .sb-c-member{grid-area:member}.fx-crm-segment-board .sb-table tbody .sb-c-key{grid-area:key;justify-self:end;align-self:start}.fx-crm-segment-board .sb-table tbody .sb-c-next{grid-area:next}.fx-crm-segment-board .sb-table tbody .sb-c-state{grid-area:state;justify-self:end}.fx-crm-segment-board .sb-table tbody .sb-mname b,.fx-crm-segment-board .sb-table tbody .sb-mname span{white-space:nowrap;overflow:hidden}.fx-crm-segment-board .sb-table .sb-c-staff,.fx-crm-segment-board .sb-table .sb-c-score{display:none}.fx-crm-segment-board .sb-c-next{font-size:13px;color:var(--sb-sub)}.fx-crm-segment-board .sb-count{margin-left:0;width:100%}.fx-crm-segment-board .sb-field.grow,.fx-crm-segment-board .sb-field.grow input{flex:1 1 auto;min-width:0;width:100%}}