/* ============================================================
	tab.css
	Hyomin Design System v1.0 — Tab Component

	사용법:
	<div class="tab">
		<div class="tab__header" role="tablist">
			<button class="tab__btn tab__btn--active" role="tab" aria-selected="true" aria-controls="tab-panel-1">Tab1</button>
			<button class="tab__btn" role="tab" aria-selected="false" aria-controls="tab-panel-2">Tab2</button>
			<button class="tab__btn" role="tab" aria-selected="false" aria-controls="tab-panel-3">Tab3</button>
		</div>
		<div class="tab__panel tab__panel--active" id="tab-panel-1" role="tabpanel">
			<p class="tab__text">탭 내용이 들어갑니다.</p>
		</div>
		<div class="tab__panel" id="tab-panel-2" role="tabpanel" hidden>
			<p class="tab__text">탭 내용이 들어갑니다.</p>
		</div>
	</div>
	============================================================ */

.tab {
	background-color: #ffffff;
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-md);
	width: 400px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.tab__header {
	display: flex;
	align-items: stretch;
	padding: 0 var(--spacing-3);
	border-bottom: 1px solid var(--gray-300);
}

.tab__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3) var(--spacing-4);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	position: relative;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-regular);
	line-height: 24px;
	color: var(--gray-900);
	white-space: nowrap;
	transition: color var(--duration-fast);
}

.tab__btn:hover {
	color: var(--gray-700);
}

.tab__btn--active {
	color: var(--green-800);
	border-bottom-color: var(--green-800);
	z-index: 1;
}

.tab__panel {
	display: none;
	padding: 0 var(--spacing-3) var(--spacing-3);
	min-height: 100px;
}

.tab__panel--active {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tab__text {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base);
	font-weight: var(--font-weight-regular);
	line-height: 27px;
	color: var(--gray-900);
}