/**
 * @ownership shared/components
 * @description 탭 — 한 화면 이름 아래 갈래(예: 메시지 템플릿의 푸시 · 알림톡 · 청구서)를 오가는 링크 줄.
 *
 * 2026-10-15 Ted "메시지 템플릿 탭으로 묶어줘봐" — 디자인시스템에 탭 부품이 없어 새로 만들었다(샘플 /component-sample/tabs).
 * 세그먼트 버튼(radio .is-segmented)과의 경계(2026-10-15 Ted "라디오 세그먼트를 쓴 부분이 사실 전부 탭전환 아니야?"):
 *   탭 = 보는 갈래를 바꾼다 — 주소가 따로 있으면 링크(a + aria-current="page"),
 *         같은 화면 안 보기 전환(달력 · 연간 테이블, 요약 · 로그)이면 라디오(label.base-tabs-item > input[type=radio], 고른 칸 = :checked).
 *   세그먼트 = 값을 고른다(기간 7일/30일 · 집계 기준) — 라디오 모양(동그라미)이다.
 *
 * 이름 = .base-tabs · .base-tabs-item(버튼 base-button · 카드 base-card 와 같은 규칙).
 * 지금 갈래 = 그 a 에 aria-current="page" — 스크립트 없이 마크업으로 정한다(화면마다 제 갈래에 단다).
 *   라디오 꼴이면 고른 라디오(:checked)가 지금 갈래다 — 화면 스크립트는 라디오 change 를 듣는다(세그먼트 때와 같다).
 * 변형 = 알약(.is-pill, 2026-10-15 Ted "탭 전환 버튼의 샘플에 알약 variant도 추가해야겠는데??") — 옅은 바탕 줄에 고른 칸만 흰 알약.
 *   머리 오른쪽 · 칸 위처럼 좁은 자리의 보기 전환. 폭은 내용만큼, 높이 32 = 텍스트필드 small 눈금.
 * 넘치면(휴대폰 · 갈래가 많을 때) 줄이 가로로 밀린다 — 줄바꿈하지 않는다. 스크롤 막대는 숨긴다.
 */
.base-tabs {
	display: flex;
	align-items: stretch;
	gap: 0.25rem;
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--blue-gray-100);
	scrollbar-width: none;
}

.base-tabs::-webkit-scrollbar {
	display: none;
}

/* [hidden] 가드 — display 를 적어 두면 UA 의 [hidden]{display:none} 을 덮는다(꺼진 보기 전환을 화면이 hidden 으로 감춘다). */
.base-tabs[hidden] {
	display: none !important;
}

.base-tabs-item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	/* 밑줄(2px)이 줄 구분선(1px) 위에 겹치게 */
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--blue-gray-500);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.375rem;
	text-decoration: none;
	white-space: nowrap;
}

.base-tabs-item:hover {
	color: var(--blue-gray-800);
}

.base-tabs-item[aria-current="page"],
.base-tabs-item:has(> input[type="radio"]:checked) {
	border-bottom-color: var(--primary);
	color: var(--primary);
	font-weight: 600;
}

.base-tabs-item:focus-visible,
.base-tabs-item:has(> input[type="radio"]:focus-visible) {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
	border-radius: 0.25rem;
}

/* 라디오 꼴 — 칸(label)을 누르면 고른다. 라디오 동그라미는 숨긴다(탭은 동그라미가 없다 — 있으면 세그먼트). */
label.base-tabs-item {
	position: relative;
	cursor: pointer;
	user-select: none;
}

.base-tabs-item > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ── 변형: 알약(.is-pill) ─────────────────────────────────────────────── */
.base-tabs.is-pill {
	gap: 0;
	width: max-content;
	max-width: 100%;
	padding: 2px;
	border: 1px solid var(--blue-gray-100);
	border-radius: var(--pill);
	background: var(--blue-gray-50);
}

.base-tabs.is-pill .base-tabs-item {
	min-height: 1.625rem;
	padding: 0 0.875rem;
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: var(--pill);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.base-tabs.is-pill .base-tabs-item[aria-current="page"],
.base-tabs.is-pill .base-tabs-item:has(> input[type="radio"]:checked) {
	background: var(--white);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.base-tabs.is-pill .base-tabs-item:focus-visible,
.base-tabs.is-pill .base-tabs-item:has(> input[type="radio"]:focus-visible) {
	outline-offset: 1px;
	border-radius: var(--pill);
}