/* ==========================================================================
   MODULE: components/tabs (.wzs-tab-list + .wzs-tab-btn + .wzs-tab-panel)
   서비스안내/자료실 등 [data-wzs-tabs] 컨테이너에서 공용으로 사용 (assets/js/modules/tabs.js)
   ========================================================================== */

.wzs-tab-list {
	display: flex;
	gap: var(--wzs-space-2);
	border-bottom: 1px solid var(--wzs-border);
	margin-bottom: var(--wzs-space-6);
	overflow-x: auto;
	/* 탭이 넘칠 때(주로 모바일) 오른쪽 끝을 흐리게 해 "더 있다"는 걸 보이게 함 */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}

.wzs-tab-btn {
	padding: var(--wzs-space-3) var(--wzs-space-4);
	font-weight: 700;
	font-size: var(--wzs-fs-base);
	color: var(--wzs-ink-muted);
	border-bottom: 2px solid transparent;
	transition: color var(--wzs-duration-fast) var(--wzs-ease), border-color var(--wzs-duration-fast) var(--wzs-ease);
	white-space: nowrap;
}

.wzs-tab-btn:hover {
	color: var(--wzs-ink);
}

.wzs-tab-btn.is-active {
	color: var(--wzs-ink);
	border-bottom-color: var(--wzs-amber);
}

.wzs-tab-panel[hidden] {
	display: none;
}

/* --- 탭 바 고정 (서비스안내 · 자료실 공통) ---
   헤더 바로 아래에 붙어 같이 떠 있는다. top 값은 assets/js/modules/header-scroll.js 가
   --wzs-header-offset 으로 넣어 주는 헤더의 실제 높이이고, 탭이 있는 페이지에서는
   헤더가 숨지 않도록 그쪽에서 예외 처리해 뒀다(그래서 둘이 항상 붙어 있다).

   배경을 깔아 두는 이유: sticky 로 떠 있는 동안 아래 본문이 탭 글자 뒤로 비쳐 지나간다.
   좌우로는 컨테이너 여백(--wzs-space-4)만큼 넘겨 칠해야 본문이 탭 옆으로 삐져나오지 않는다.
   그림자는 테두리만으로 본문 줄과 구분이 안 돼서 넣었다.

   z-index 는 헤더(40)보다 낮게 — 헤더가 위에 오도록. */
[data-wzs-tabs] > .wzs-tab-list {
	position: sticky;
	top: var(--wzs-header-offset, 73px);
	z-index: 30;
	margin-inline: calc(var(--wzs-space-4) * -1);
	padding-inline: var(--wzs-space-4);
	padding-top: var(--wzs-space-3);
	background: var(--wzs-bg);
	box-shadow: 0 6px 12px -8px rgba(16, 24, 40, 0.25);
	transition: top var(--wzs-duration-base) var(--wzs-ease);
}

/* 탭을 바꾸면 여기로 되돌아온다(assets/js/modules/tabs.js) —
   헤더 높이만큼 비워야 탭 바가 헤더 뒤로 숨지 않는다. */
[data-wzs-tabs] {
	scroll-margin-top: var(--wzs-header-offset, 73px);
}

/* 탭 안 요소로 직접 이동하는 링크(용어집 앵커 등)가 탭 바에 가리지 않도록 */
[data-wzs-tabs] .wzs-tab-panel {
	scroll-margin-top: calc(var(--wzs-header-offset, 73px) + 64px);
}