/**
 * 책갈피형 탭 + 판 — 리뉴얼 공통 (홈·게시판 / AI 관제센터 / 상근직원)
 *
 *   <nav class="rn-bookmark-tabs">
 *     <a class="rn-bookmark-tabs__item is-active">…</a>   고른 탭: .is-active 또는 .active(JS 가 옮기는 화면)
 *     <button class="rn-bookmark-tabs__item">…</button>
 *   </nav>
 *   <div class="rn-bookmark-sheet">…</div>               탭 바로 아래(사이 간격 0)
 *
 * - 판은 네 변 테두리를 갖고 왼쪽 위만 각지다(첫 탭과 이어지는 자리). 탭은 아래 테두리가 없고, 탭 아래 선은 판 윗선이 맡는다.
 * - 고른 탭의 ::after 1px 흰 띠가 자기 밑 판 윗선을 덮어 판과 붙는다. 탭 묶음은 position:relative·z-index:1 로 판보다 위에 그린다.
 *   탭 묶음은 가로 스크롤(overflow)이라 그 1px 이 잘리지 않게 아래 안쪽 여백 1px 을 두고 같은 만큼 바깥 여백을 당긴다.
 *   탭 묶음과 판 사이에 flex gap 이 있는 화면은 그 화면 CSS 가 gap 만큼 더 당긴다(control_center.css 참고).
 * - 줄 높이는 정수 px(23) — 소수점이면 판 윗선이 0.5px 에 걸려 흰 띠와 어긋난 실선이 비친다. 탭 높이 = 23 + 7×2 + 위 테두리 1 = 38px
 *   (2026-10-21 사용자 지시 '책갈피 탭 높이 38 공통' — 종전 22 + 7×2 + 1 = 37px). 글자가 두 줄로 접히는 화면도 38px 아래로는 줄지 않는다(min-height).
 * - 화면 CSS 의 한 클래스짜리 규칙을 이기도록 .rn-body 를 앞에 붙인다(buttons.css 와 같은 방식).
 * 토큰(variables.css): --rn-bookmark-line · --rn-bookmark-tab-bg · --rn-bookmark-tab-bg-hover · --rn-bookmark-tab-text
 */

.rn-body .rn-bookmark-tabs {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0;
	min-width: 0;
	margin: 0 0 -1px;
	padding: 0 0 1px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rn-body .rn-bookmark-tabs::-webkit-scrollbar {
	display: none;
}

.rn-body .rn-bookmark-tabs__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: auto;
	min-height: 2.375rem;
	box-sizing: border-box;
	margin: 0;
	padding: 0.4375rem 1.25rem;
	border: 1px solid var(--rn-bookmark-line);
	border-bottom: 0;
	border-radius: var(--rn-radius-md) var(--rn-radius-md) 0 0;
	background: var(--rn-bookmark-tab-bg);
	color: var(--rn-bookmark-tab-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	line-height: 1.4375rem; /* 23px */
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* 이웃 탭과 테두리를 한 줄로 겹친다 */
.rn-body .rn-bookmark-tabs__item + .rn-bookmark-tabs__item {
	margin-left: -1px;
}

.rn-body .rn-bookmark-tabs__item:hover {
	background: var(--rn-bookmark-tab-bg-hover);
	color: var(--rn-color-text-title);
}

.rn-body .rn-bookmark-tabs__item:is(.is-active, .active) {
	z-index: 1;
	background: var(--rn-color-bg);
	color: var(--rn-color-text-title);
	font-weight: var(--rn-font-weight-bold);
	cursor: default;
}

/* 고른 탭 밑의 판 윗선을 흰 띠로 덮는다 — 좌우 탭 테두리 1px 은 남아 판 테두리와 이어진다 */
.rn-body .rn-bookmark-tabs__item:is(.is-active, .active)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--rn-color-bg);
}

.rn-body .rn-bookmark-sheet {
	border: 1px solid var(--rn-bookmark-line);
	border-radius: 0 var(--rn-radius-lg) var(--rn-radius-lg) var(--rn-radius-lg);
	background: var(--rn-color-bg);
	box-shadow: none;
}

/* ---------- 탭이 넘치는 줄 — 더 있는 쪽 끝을 흐리게 (2026-10-15) ----------
 * renewal/js/tab_scroll.js 가 책갈피 탭 줄(.rn-bookmark-tabs · 수급자 상세 위 .top_tab)에 .rn-tab-scroll 을 붙이고,
 * 넘쳐서 앞·뒤에 가려진 탭이 있으면 .is-fade-start / .is-fade-end 를 붙인다. 마지막 탭이 그냥 잘려 보이지 않고
 * '옆에 더 있다'로 읽히게 그 끝 2rem 을 투명으로 사라지게 한다(mask — 탭 줄 테두리 상자 기준이라 넘겨도 끝 자리에 그대로 있다).
 * 끝까지 넘기면 그쪽 흐림은 없어진다. 넘치지 않는 줄은 아무것도 붙지 않는다 */
.rn-body .rn-tab-scroll.is-fade-end {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

.rn-body .rn-tab-scroll.is-fade-start {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
}

.rn-body .rn-tab-scroll.is-fade-start.is-fade-end {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

/* 마우스로 끄는 동안 — 잡은 손 모양, 글자 선택 안 됨 */
.rn-body .rn-tab-scroll.is-dragging,
.rn-body .rn-tab-scroll.is-dragging * {
	cursor: grabbing;
	user-select: none;
}