/* =============================================================================
 * swnm 세그먼트 토글 — .ui-segment / .ui-segment__btn  (사인오프 2026-06-24)
 * 변경: 2026-06-24 · jiwon · 신설(기간/뷰 pill 토글 통합 — data-quality-detail 등 10여 곳 산재)
 * -----------------------------------------------------------------------------
 * "여러 개 중 하나 활성" pill형 토글(예: 1 Day / 1 Week / 1 Month).
 * 밑줄형은 ui-tabs, 단발 액션은 ui-btn.
 * 비주얼·치수는 ui-btn 스케일을 같은 토큰으로 "복제"한 것(클래스 재사용 아님 — 의도적 분리).
 * → ui-btn size 값이 바뀌면 여기도 같이 손봐야 한다. hex 하드코딩 금지(토큰만).
 *
 *   <div class="ui-segment ui-segment--sm" role="group" aria-label="Period">
 *     <button type="button" class="ui-segment__btn is-active" data-period="day">1 Day</button>
 *     <button type="button" class="ui-segment__btn" data-period="week">1 Week</button>
 *     <button type="button" class="ui-segment__btn" data-period="month">1 Month</button>
 *   </div>
 *
 * 활성 = .is-active (레거시 .active 회피, ui-tabs 와 동일 컨벤션).
 * size: 기본 md(40) · --sm(32) · --lg(46) — ui-btn 스케일 동일.
 * 전환(형제 중 하나만 활성)은 페이지 JS가 is-active 토글.
 * ============================================================================= */

.ui-segment { display: inline-flex; align-items: center; gap: var(--space-2); }

.ui-segment__btn {
  /* ui-btn 베이스 값 복제(같은 토큰) — 클래스 재사용 아님 */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px;                       /* md */
  padding: 0 var(--space-4);          /* 0 16px */
  font-family: var(--font-sans);
  font-size: var(--font-base);        /* 14px */
  font-weight: var(--fw-medium);      /* 비활성=medium */
  line-height: 1; white-space: nowrap;
  border-radius: var(--radius-sm);    /* 4px */
  cursor: pointer; user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* ui-btn--secondary(아웃라인) 차용 = 비활성 모양 */
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.ui-segment__btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ui-segment__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 활성 = 은은한 칩(면+글자 강조, 보더 유지) */
.ui-segment__btn.is-active {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* size — ui-btn 스케일 동일 */
.ui-segment--sm .ui-segment__btn { height: 32px; padding: 0 var(--space-3); font-size: var(--font-sm); }
.ui-segment--lg .ui-segment__btn { height: 46px; padding: 0 var(--space-5); font-size: var(--font-md); }