/**
 * 세그먼트 탭 — 리뉴얼 공통 (2026-10-13 '세그먼트 디자인은 모두 하나로 동일 · 공통으로')
 *
 * 렌더 레이아웃(renewal_layout.php)이 모든 화면에 싣는다. home.css 는 화면이 페이지 CSS 를 따로 주지 않을 때만 실리는 기본값이라
 * (RFID · 내 정보는 안 싣는다) 공통 탭을 거기 두면 그 화면들에서 모양이 통째로 빠졌다 — 그래서 이 파일로 뺐다.
 * 이 파일만으로 그려지게 둔다(home.css 의 .rn-home-tabs 기본 규칙에 기대지 않는다).
 *
 * 두 가지뿐이다 — 화면 CSS 에서 모양(크기·색·모서리)을 덮지 말 것. 자리(margin·정렬)만 잡는다.
 *
 * 1) 화면 탭(알약) .rn-home-tabs.rn-home-tabs--pill > .rn-home-tabs__item(.is-active)
 *    흰 트랙(#D8D8D8 · 8px) 안의 28px 탭(13px · 6px), 고른 탭은 주황 채움 + 굵게. 높이 36 = 테두리 1 + 안쪽 3 + 탭 28 + 3 + 1.
 *    기준은 기관 연간 기록 관리 상단 탭. 쓰는 곳: 페이지 프레임 상단(page_frame_top.php — 연간 기록 관리 3종 · 본인부담금 · 급여관리),
 *    RFID/기록지 관리(rfid/header.php)
 *
 * 2) 하위 탭(회색 트랙) .rn-board-subtabs > .rn-board-subtab(.is-active)
 *    판 **안**에서 같은 화면의 목록을 가르는 보조 탭 — 회색 트랙(#F0F0F0 · 6px) 안에서 고른 탭만 흰 칸 + 주황 글자 + 옅은 그림자.
 *    화면을 갈아타는 1) 과 일부러 다르다. 묶음 높이 40 = 테두리 1 + 안쪽 3 + 버튼 32 + 3 + 1.
 *    쓰는 곳: 게시판(케어매니저 공지 · 공단 주요 알림 — board/list·post·write.php), 내 정보 문의 내역(mypage/inquiry_tabs.php)
 *
 * 색은 회색 단계 토큰을 바로 쓴다 — .rn-pf(페이지 프레임)가 --rn-color-border-strong · --rn-color-text-muted 를 레거시 값으로 바꾸는 범위라,
 * 의미 토큰을 쓰면 화면마다 테두리·글자색이 갈린다.
 * 선택자는 두 클래스로 건다 — home.css 의 기본(밑줄형) 탭 규칙(.rn-home-tabs · .rn-home-tabs__item, 768px 이상 포함)을 실린 순서와 무관하게 이긴다.
 */

/* ---------- 1) 화면 탭(알약) ----------
 * [별칭] 종사자·수급자 선택 팝업의 상태 거르기 .picker-status-tabs > .picker-status-tab(.active) — 2026-10-20 사용자 지시
 *   ('글자가 뭉쳐 보인다 — 프리텐다드 맞나 · 고른 칸 주황 바탕 바깥 회색 선이 답답').
 *   마크업이 레거시 화면과 공용(_layout/modal.php · longterm/prs/modal.php · 직원 그룹 모달 등 6곳)이라 클래스를 못 바꾸고,
 *   고른 칸은 employee_picker.js 등이 .active 로 옮긴다. <button> 은 글꼴을 물려받지 않아 시스템 글꼴 12px 굵게 뭉쳐 보였고,
 *   칸마다 회색 칸막이 + 바깥 회색 테두리에 주황 칸이 딱 붙어 답답했다 — 이 알약 탭과 같은 모양(흰 트랙 안 3px 띄운 주황 칸)으로.
 *   레거시 CSS(assets/css/modal.css · longterm/css/picker.css)가 같은 이름을 칠하고 화면마다 뒤에 실리기도 해서 body.rn-body 로 특이도를 올린다 */
.rn-home-tabs.rn-home-tabs--pill,
body.rn-body .picker-status-tabs {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	width: auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 3px;
	overflow-x: auto;
	border: 1px solid var(--rn-gray-30); /* #D8D8D8 */
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}

.rn-home-tabs.rn-home-tabs--pill::-webkit-scrollbar,
body.rn-body .picker-status-tabs::-webkit-scrollbar {
	display: none;
}

/* 별칭만 — 레거시가 묶음·칸에 준 고정 높이(32~36px · 100%)를 풀어 알약 높이(테두리 1 + 3 + 28 + 3 + 1 = 36)를 그대로 쓴다 */
body.rn-body .picker-status-tabs,
body.rn-body .picker-status-tab {
	height: auto;
}

.rn-home-tabs--pill .rn-home-tabs__item,
body.rn-body .picker-status-tab {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 28px;
	margin: 0;
	padding: 0 0.875rem;
	border: 0;
	border-radius: var(--rn-radius-md);
	background: transparent;
	color: var(--rn-gray-70); /* #555555 */
	font-family: var(--rn-font-family);
	font-size: 0.82rem;
	font-weight: var(--rn-font-weight-medium);
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}

.rn-home-tabs--pill .rn-home-tabs__item:hover,
body.rn-body .picker-status-tab:hover {
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

.rn-home-tabs--pill .rn-home-tabs__item.is-active,
body.rn-body .picker-status-tab.active {
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
	font-weight: var(--rn-font-weight-bold);
}

/* home.css 기본 탭의 활성 밑줄(::after) 끄기 */
.rn-home-tabs--pill .rn-home-tabs__item.is-active::after {
	display: none;
}

/* ---------- 2) 하위 탭(회색 트랙) ---------- */
/* 버튼 높이는 buttons.css 공용 규칙(.rn-body .rn-board-subtab)이 --rn-btn-min-height 로 잡으므로 이 묶음 안에서만 그 값을 32px 로 바꾼다 */
.rn-board-subtabs {
	--rn-btn-min-height: 2rem; /* 32px */
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	padding: 3px;
	border: 1px solid var(--rn-gray-30); /* #D8D8D8 */
	border-radius: var(--rn-radius-md);
	background: var(--rn-gray-10); /* #F0F0F0 — F8F8F8 은 흰 판 위에서 너무 옅다 */
	box-sizing: border-box;
}

.rn-board-subtab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-space-4);
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	background: transparent;
	color: var(--rn-gray-70); /* #555555 */
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--rn-transition-fast), color var(--rn-transition-fast), box-shadow var(--rn-transition-fast);
}

.rn-board-subtab:hover {
	color: var(--rn-gray-90);
	background: var(--rn-color-bg);
}

.rn-board-subtab.is-active,
.rn-board-subtabs > .rn-board-subtab.active, /* 레거시 스크립트가 .active 를 옮기는 곳(급여 인건비 내역 서비스 유형 — payroll_labor_cost__.js) */
.rn-board-subtabs > input:checked + .rn-board-subtab {
	background: var(--rn-color-bg);
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-semibold);
	box-shadow: var(--rn-shadow-sm);
}

/* 라디오로 고르는 하위 탭 — <input type=radio> + <label class="rn-board-subtab"> 짝 (내 정보 본인부담금 계좌, 2026-10-13).
   라디오는 보이지 않게 두고 고른 라벨이 위 is-active 와 같은 모양이 된다. 키보드 포커스는 라벨에 링으로 보인다 */
.rn-board-subtabs > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.rn-board-subtabs > input:focus-visible + .rn-board-subtab {
	outline: 2px solid var(--rn-color-brand);
	outline-offset: 1px;
}

/* ---------- 3) 폰 폭에서 넘치는 세그먼트 — 상자 끝이 부드럽게 사라진다 (2026-10-16) ----------
 * tab_scroll.js 가 넘치는 줄에 .rn-tab-scroll · .is-fade-start/end 를 붙이면 bookmark.css 가 줄 상자 끝 2rem 을 mask 로 흐린다.
 * 세그먼트는 그 흐림을 더 길고(3rem) 완만하게(가운데가 천천히) 한다 — 트랙 테두리와 탭이 함께 서서히 사라져
 * '옆에 더 있다'로 읽힌다(사용자: "상자 끝부분을 흐리게 해서 자연스럽게 사라져 보이게").
 * [버린 안] 상자 테두리는 두고 안쪽 끝에만 흰 그라데이션을 덮기 — 글자만 유령처럼 흐려져 어색했다(사용자 같은 날).
 * 선택자는 bookmark.css(.rn-body .rn-tab-scroll.is-fade-start.is-fade-end, 클래스 4개)와 같거나 세고, 이 파일이 뒤에 실린다 */
@media (max-width: 767px) {
	.rn-body :is(.rn-home-tabs--pill, .rn-board-subtabs).rn-tab-scroll.is-fade-end {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.75) calc(100% - 2rem), rgba(0, 0, 0, 0.3) calc(100% - 1rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.75) calc(100% - 2rem), rgba(0, 0, 0, 0.3) calc(100% - 1rem), transparent);
	}

	.rn-body :is(.rn-home-tabs--pill, .rn-board-subtabs).rn-tab-scroll.is-fade-start {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.75) calc(100% - 2rem), rgba(0, 0, 0, 0.3) calc(100% - 1rem), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.75) calc(100% - 2rem), rgba(0, 0, 0, 0.3) calc(100% - 1rem), transparent);
	}

	.rn-body :is(.rn-home-tabs--pill, .rn-board-subtabs).rn-tab-scroll.is-fade-start.is-fade-end {
		-webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) 1rem, rgba(0, 0, 0, 0.75) 2rem, #000 3rem, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.75) calc(100% - 2rem), rgba(0, 0, 0, 0.3) calc(100% - 1rem), transparent);
		mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) 1rem, rgba(0, 0, 0, 0.75) 2rem, #000 3rem, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.75) calc(100% - 2rem), rgba(0, 0, 0, 0.3) calc(100% - 1rem), transparent);
	}
}