/*
 * 세그먼트 탭 공용컴포넌트 (2026-09-12 제정) — 페이지 본문 타이틀 우측의 «범위/탭» 스위처.
 * 원본 = 계약서 V2 목록(.cv2l-seg, A-4 차콜 pill). 양식·계약서·광고캠페인·랜딩·동의서·타겟·보안·AI챗봇이 쓴다.
 *
 * 마크업 관례:
 *   <div class="ord-seg" role="radiogroup" aria-label="…">
 *     <button type="button" role="radio" aria-checked="true" class="is-on">전체</button>
 *     <button type="button" role="radio" aria-checked="false">진행중<span class="ord-seg-n">3</span></button>
 *   </div>
 *   - 자식은 <button> 또는 <a>(링크 탭 — 이메일 [개인|공용]) · 활성 = .is-on 클래스 하나(인라인 색 지정 금지 — 동작 JS 는 classList.toggle("is-on") 만)
 *   - 건수 = .ord-seg-n (「전체」엔 두지 않는다) · 경보 = .ord-seg-rb(빨강) · 대행사 도트 = .ord-seg-dot · 만료 부기 = .ord-seg-sub
 *   - 외부/종료 축 = .ord-seg.is-purple (실적리스트 위탁판매·계약서 종료·취소 문법)
 *   - 동작(Stimulus data-action / onclick / hidden 값)은 페이지가 갖는다 — 이 파일은 시각만.
 * 색 = 테마 토큰(--ord-*, 2026-10-01) — 활성 칸은 head-bg+on-solid(다크에서도 흰 글자가 읽히게).
 * 서버 렌더 = ApplicationHelper#ord_seg_tabs (등록 업체 세그먼트 registrant_segment_bar 도 이 위에 얹힘).
 */
.ord-seg { display: inline-flex; gap: 4px; padding: 3px; background: var(--ord-surface); border: 1px solid var(--ord-line-2); border-radius: 999px; max-width: 100%; }
.ord-seg > button, .ord-seg > a { padding: 5px 15px; border: none; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; background: transparent; color: var(--ord-text-3); font-family: inherit; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.3; text-decoration: none; }
.ord-seg > button:hover, .ord-seg > a:hover { color: var(--ord-text-2); background: var(--ord-band); }
.ord-seg > button.is-on, .ord-seg > a.is-on { background: var(--ord-head-bg); color: var(--ord-on-solid); }
.ord-seg > button.is-on:hover, .ord-seg > a.is-on:hover { background: var(--ord-head-bg); color: var(--ord-on-solid); }
.ord-seg-n { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10px; font-weight: 700; background: var(--ord-accent-soft); color: var(--ord-accent-strong); }
.ord-seg > .is-on .ord-seg-n { background: rgba(255,255,255,.25); color: var(--ord-on-solid); }
.ord-seg-rb { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 700; background: var(--ord-badge); color: var(--ord-on-solid); }
.ord-seg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ord-tint-violet-fg); flex-shrink: 0; }
.ord-seg-sub { font-size: 10px; font-weight: 500; color: var(--ord-text-4); }
.ord-seg > .is-on .ord-seg-sub { color: rgba(255,255,255,.75); }
.ord-seg.is-purple { background: var(--ord-tint-violet-bg); border-color: var(--ord-tint-violet-line); }
.ord-seg.is-purple > button, .ord-seg.is-purple > a { color: var(--ord-tint-violet-fg); }
.ord-seg.is-purple > button:hover, .ord-seg.is-purple > a:hover { background: var(--ord-tint-violet-line); }
.ord-seg.is-purple > button.is-on, .ord-seg.is-purple > a.is-on { background: var(--ord-solid-violet); color: var(--ord-on-solid); }
.ord-seg.is-purple .ord-seg-n { background: var(--ord-tint-violet-line); color: var(--ord-tint-violet-fg); }
.ord-seg.is-purple > .is-on .ord-seg-n { background: rgba(255,255,255,.25); color: var(--ord-on-solid); }

/* 세그먼트를 JS 가 채워 넣는 래퍼 바(광고캠페인 목록 그룹·등록 업체 바 등) — 타이틀 flex 행의 자식이라 min-width:auto 가
   내용 폭으로 굳어 모바일에서 페이지가 옆으로 밀린다 → 폭을 부모로 제한(내부 .ord-seg 가 가로 스크롤을 맡는다) */
.ord-seg-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.ord-seg-wrap[hidden] { display: none; }

@media (max-width: 768px) {
  .ord-seg { overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .ord-seg::-webkit-scrollbar { display: none; }
  .ord-seg > button, .ord-seg > a { padding: 5px 11px; }
}