/*
 * 폼 안 «하나 고르기» 세그먼트 (2026-09-13) — 실적 고객정보 「고객구분」(개인 / 개인사업자 / 법인사업자).
 * 타이틀 탭 .ord-seg 와 같은 시각 언어(흰 pill 트랙 · 차콜 활성)지만 «폼 컨트롤»이라 별도 —
 * radio 를 label 이 감싸고 활성은 :has(input:checked) 로만 판정(JS 색칠 없음). 배경·글자색 항상 쌍으로(규칙 10).
 *
 *   <div class="ord-choice" role="radiogroup">
 *     <label><input type="radio" name="customer_kind" value="individual" checked>개인</label>
 *     <label><input type="radio" name="customer_kind" value="sole_proprietor">개인사업자</label>
 *   </div>
 */
.ord-choice { display: inline-flex; gap: 4px; padding: 3px; background: var(--ord-surface); border: 1px solid var(--ord-line-2); border-radius: 999px; max-width: 100%; box-sizing: border-box; }
.ord-choice > label { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ord-text-3); background: transparent; cursor: pointer; white-space: nowrap; line-height: 1.3; user-select: none; margin: 0; }
.ord-choice > label:hover { color: var(--ord-text-2); background: var(--ord-band); }
.ord-choice > label > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.ord-choice > label:has(> input:checked) { background: var(--ord-head-bg); color: var(--ord-on-solid); }
.ord-choice > label:has(> input:focus-visible) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ord-accent) 27%, transparent); }
.ord-choice.is-sm > label { padding: 4px 11px; font-size: 11.5px; }

@media (max-width: 768px) {
  .ord-choice { overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .ord-choice::-webkit-scrollbar { display: none; }
  .ord-choice > label { padding: 5px 11px; }
}
.ord-choice > label:has(> input:disabled) { opacity: .45; cursor: not-allowed; }