/* =============================================================================
 * swnm 탭 컴포넌트 — .ui-tabs / .ui-tab / .ui-tab-panel  (사인오프 2026-06-15)
 * 변경: 2026-06-15 · jiwon · 신설(logs/organizations/user-detail 밑줄형 탭 통합)
 * -----------------------------------------------------------------------------
 * 밑줄(underline)형 탭. hex 하드코딩 금지(토큰만). 라이트/다크는 토큰으로 자동.
 *
 *   <div class="ui-tabs" role="tablist">
 *     <button class="ui-tab is-active" role="tab" data-tab="login">Login History</button>
 *     <button class="ui-tab" role="tab" data-tab="audit">Permission Change History</button>
 *   </div>
 *   <div class="ui-tab-panel is-active" data-panel="login"> ... </div>
 *   <div class="ui-tab-panel" data-panel="audit"> ... </div>
 *
 * 전환은 UiTabs 헬퍼(common/js/components/ui-tabs.js)가 data-tab/data-panel로 자동 처리.
 * 활성 상태 클래스는 .is-active (레거시 .active 와 충돌 회피).
 * ============================================================================= */

.ui-tabs {
  display: flex;
  gap: 0;                                  /* 탭끼리 붙어 밑줄이 끊김 없이 이어짐 */
  border-bottom: 1px solid var(--border);
}

.ui-tab {
  padding: var(--space-3) var(--space-6);  /* 12px 24px */
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--font-base);
  font-weight: var(--fw-medium);
  transition: color 0.2s, border-color 0.2s;
}

.ui-tab:hover {
  color: var(--text-secondary);
}

.ui-tab.is-active {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--primary);
}

.ui-tab-panel {
  display: none;
}

.ui-tab-panel.is-active {
  display: block;
}