/**
 * 리뉴얼 공통 폼 컨트롤 · 검색 · 페이지네이션
 *
 * 인풋은 기본적으로 type="text". 용도는 클래스로 구분하고 Rn.bindInputFormatters 가 포맷한다.
 *
 * 종류 (모두 `--rn-control-*` 토큰 공유):
 * - 일반: .rn-input (+ .rn-input--sm / .rn-input--narrow)
 * - 날짜: .rn-input.rn-input--date (+ --sm) — 포맷 YYYY-MM-DD, CareDatepicker 연동
 * - 휴대폰: .rn-input.rn-input--phone — 010-1234-5678
 * - 숫자만: .rn-input.rn-input--digits — 디지트만
 * - 숫자(콤마): .rn-input.rn-input--number — 천단위 콤마(옵션 data-allow-decimal)
 * - 검색: .rn-search > .rn-search__input + .rn-search__btn (+ .rn-search--sm)
 *
 * 체크박스 ( `--rn-check-*` 토큰 · 디자인 스펙 ):
 * - 권장: <label class="rn-check"><input type="checkbox"> 라벨</label>
 * - 상태: 기본 / :checked / :indeterminate / :disabled
 * - 변형: .rn-check--sm / .rn-check--indent / .rn-check--accent(성공색)
 * - 목록: .rn-check-list
 * - 테이블: td/th 안 체크는 셀 중앙 (체크만 있는 셀)
 * - 별칭: .chk, .rn-emp__check, .rn-mypage-check, .rn-alim__fail
 *
 * 라디오 ( `--rn-radio-*` 토큰 · 디자인 스펙 ):
 * - 권장: <label class="rn-radio"><input type="radio" name="..."> 라벨</label>
 * - 상태: 기본 / :checked / :disabled
 * - 그룹: .rn-radio-group · 변형: .rn-radio--sm
 * - 별칭: .rn-emp__radio > label, .rn-batch-form__fields--radio > label
 *
 * 레거시 별칭: .input-date / .input-phone / .input-number
 *
 * 셀렉트: .rn-select (+ --sm / --filter)
 * 토글 스위치: .rn-switch > input[type=checkbox] + [data-on][data-off] (레거시 .btn-color-mode-switch DOM 그대로 받는다)
 * 인라인 필드: .rn-inline-field (문장 속 입력 — '급여 지급일을 [선택] 로 설정합니다.') · 묶음 .rn-inline-fields
 * 체크 묶음: .rn-check-group (+ --divided 왼쪽 점선 구분)
 * 기타: .rn-textarea / .rn-file
 * 페이징: .rn-paging
 */

/* ---------- Input / Select / Textarea (일반) ---------- */
.rn-input,
.rn-select,
.rn-textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--rn-control-min-height);
	padding: 0 var(--rn-control-padding-x);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background-color: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size);
	line-height: var(--rn-line-height-none);
	transition: border-color var(--rn-transition-fast), box-shadow var(--rn-transition-fast);
}

.rn-input::placeholder,
.rn-textarea::placeholder {
	color: var(--rn-color-text-subtle);
}

.rn-input:focus,
.rn-select:focus,
.rn-textarea:focus {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: var(--rn-control-focus-ring);
}

.rn-input:disabled,
.rn-select:disabled,
.rn-textarea:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background-color: var(--rn-color-bg-soft);
}

.rn-input--sm,
.rn-select--sm {
	min-height: var(--rn-control-min-height-sm);
	padding-left: var(--rn-control-padding-x-sm);
	padding-right: var(--rn-control-padding-x-sm);
	font-size: var(--rn-control-font-size-sm);
}

/* 보드 글쓰기 등 폭만 제한 (높이 토큰과 분리) */
.rn-input--narrow,
.rn-input--sm.rn-input--narrow {
	max-width: 16rem;
}

/* ---------- Checkbox ---------- */
/* 권장: <label class="rn-check"><input type="checkbox"> 텍스트</label>
   PRS 레거시: <div class="chk"><input class="ag_ck"><label class="ag_ct_label"></label></div>
   상태: 기본 / :checked / :indeterminate / :disabled (디자인 스펙) */
.rn-check,
.chk,
.rn-emp__check {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-space-2);
	position: relative;
	margin: 0;
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text);
	cursor: pointer;
	user-select: none;
	line-height: var(--rn-line-height-none);
}

.rn-check-list {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-check--indent {
	margin-left: var(--rn-space-4);
	color: var(--rn-color-text-muted);
}

.rn-check--sm {
	font-size: var(--rn-font-size-xs);
	gap: var(--rn-space-1);
}

.rn-check input[type="checkbox"],
.chk input[type="checkbox"],
.rn-emp__check input[type="checkbox"],
.rn-mypage-check input[type="checkbox"],
.rn-alim__fail input[type="checkbox"],
#modal_work_performance_log_v2 input[type="checkbox"] {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--rn-check-size);
	height: var(--rn-check-size);
	margin: 0;
	padding: 0;
	border: var(--rn-check-border);
	border-radius: var(--rn-check-radius);
	background-color: var(--rn-check-bg);
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 72%;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	vertical-align: middle;
	transition: border-color var(--rn-transition-fast), background-color var(--rn-transition-fast), box-shadow var(--rn-transition-fast);
}

.rn-check--sm input[type="checkbox"] {
	width: var(--rn-check-size-sm);
	height: var(--rn-check-size-sm);
}

.rn-check input[type="checkbox"]:hover:not(:disabled):not(:checked),
.chk input[type="checkbox"]:hover:not(:disabled):not(:checked),
.rn-emp__check input[type="checkbox"]:hover:not(:disabled):not(:checked),
.rn-mypage-check input[type="checkbox"]:hover:not(:disabled):not(:checked),
.rn-alim__fail input[type="checkbox"]:hover:not(:disabled):not(:checked),
#modal_work_performance_log_v2 input[type="checkbox"]:hover:not(:disabled):not(:checked) {
	border-color: var(--rn-check-hover-border); /* 주황 없음 — 진한 회색 테두리 (2026-10-07) */
}

.rn-check input[type="checkbox"]:focus-visible,
.chk input[type="checkbox"]:focus-visible,
.rn-emp__check input[type="checkbox"]:focus-visible,
.rn-mypage-check input[type="checkbox"]:focus-visible,
.rn-alim__fail input[type="checkbox"]:focus-visible,
#modal_work_performance_log_v2 input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: var(--rn-check-hover-border);
	box-shadow: var(--rn-control-focus-ring);
}

.rn-check input[type="checkbox"]:checked,
.chk input[type="checkbox"]:checked,
.rn-emp__check input[type="checkbox"]:checked,
.rn-mypage-check input[type="checkbox"]:checked,
.rn-alim__fail input[type="checkbox"]:checked,
#modal_work_performance_log_v2 input[type="checkbox"]:checked {
	border-color: var(--rn-check-checked-border);
	background-color: var(--rn-check-checked-bg);
	background-image: var(--rn-check-mark);
}

.rn-check input[type="checkbox"]:indeterminate,
.chk input[type="checkbox"]:indeterminate,
.rn-emp__check input[type="checkbox"]:indeterminate,
.rn-mypage-check input[type="checkbox"]:indeterminate,
.rn-alim__fail input[type="checkbox"]:indeterminate,
#modal_work_performance_log_v2 input[type="checkbox"]:indeterminate {
	border-color: var(--rn-check-checked-border);
	background-color: var(--rn-check-checked-bg);
	background-image: var(--rn-check-indeterminate);
}

/* 명시적 성공색 (기본 체크는 브랜드 오렌지) */
.rn-check--accent input[type="checkbox"]:checked,
.rn-check--accent input[type="checkbox"]:indeterminate {
	border-color: var(--rn-check-accent-border);
	background-color: var(--rn-check-accent-bg);
}

/* disabled — 미선택: 채운 회색 / 선택·중간: 회색 배경 + 흰 아이콘 */
.rn-check input[type="checkbox"]:disabled,
.chk input[type="checkbox"]:disabled,
.rn-emp__check input[type="checkbox"]:disabled,
.rn-mypage-check input[type="checkbox"]:disabled,
.rn-alim__fail input[type="checkbox"]:disabled,
#modal_work_performance_log_v2 input[type="checkbox"]:disabled {
	cursor: not-allowed;
	border-color: transparent;
	background-color: var(--rn-check-disabled-bg);
	background-image: none;
}

.rn-check input[type="checkbox"]:checked:disabled,
.chk input[type="checkbox"]:checked:disabled,
.rn-emp__check input[type="checkbox"]:checked:disabled,
.rn-mypage-check input[type="checkbox"]:checked:disabled,
.rn-alim__fail input[type="checkbox"]:checked:disabled,
#modal_work_performance_log_v2 input[type="checkbox"]:checked:disabled {
	border-color: transparent;
	background-color: var(--rn-check-disabled-bg);
	background-image: var(--rn-check-mark);
}

.rn-check input[type="checkbox"]:indeterminate:disabled,
.chk input[type="checkbox"]:indeterminate:disabled,
.rn-emp__check input[type="checkbox"]:indeterminate:disabled,
.rn-mypage-check input[type="checkbox"]:indeterminate:disabled,
.rn-alim__fail input[type="checkbox"]:indeterminate:disabled,
#modal_work_performance_log_v2 input[type="checkbox"]:indeterminate:disabled {
	border-color: transparent;
	background-color: var(--rn-check-disabled-bg);
	background-image: var(--rn-check-indeterminate);
}

.rn-check:has(input:disabled),
.chk:has(input:disabled),
.rn-emp__check:has(input:disabled),
.rn-mypage-check:has(input:disabled),
.rn-alim__fail:has(input:disabled) {
	color: var(--rn-color-text-subtle);
	cursor: not-allowed;
}

/* PRS 레거시 라벨 (input + label/span 분리 마크업) */
.chk label.ag_ct_label,
.rn-check label.ag_ct_label,
.chk span.ag_ct_label,
.rn-check span.ag_ct_label {
	font-size: inherit;
	letter-spacing: -0.02em;
	color: inherit;
	margin: 0;
	font-weight: var(--rn-font-weight-medium);
	cursor: inherit;
}

/* 레거시 style.css 를 함께 싣는 화면(연간관리·본인부담금 등)의 .chk 체크박스 — 레거시가 같은 특이도로 뒤에서
 * 테두리 #888 · 체크 PNG(#303530 바탕) · 초록(.check_lis) 을 다시 그린다. 리뉴얼 화면에서는 위 공통 모양 하나로 (2026-10-07) */
body.rn-body .chk input[type="checkbox"] {
	border: var(--rn-check-border);
	border-radius: var(--rn-check-radius);
	background-color: var(--rn-check-bg);
	background-image: none;
}

body.rn-body .chk input[type="checkbox"]:hover:not(:disabled):not(:checked) {
	border-color: var(--rn-check-hover-border);
}

body.rn-body .chk input[type="checkbox"]:checked,
body.rn-body .check_lis .chk input[type="checkbox"]:checked {
	border-color: var(--rn-check-checked-border);
	background-color: var(--rn-check-checked-bg);
	background-image: var(--rn-check-mark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 72%;
}

body.rn-body .chk input[type="checkbox"]:indeterminate {
	border-color: var(--rn-check-checked-border);
	background-color: var(--rn-check-checked-bg);
	background-image: var(--rn-check-indeterminate);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 72%;
}

body.rn-body .chk input[type="checkbox"]:disabled {
	border-color: transparent;
	background-color: var(--rn-check-disabled-bg);
}

body.rn-body .chk input[type="checkbox"]:checked:disabled {
	background-image: var(--rn-check-mark);
}

/* 테이블 셀 안 체크 — 가로·세로 중앙 (체크만 있는 td/th) */
td .rn-check,
th .rn-check,
td .chk,
th .chk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-inline: auto;
	line-height: 1;
}

td:has(> .rn-check:only-child),
th:has(> .rn-check:only-child),
td:has(> .chk:only-child),
th:has(> .chk:only-child),
td:has(> input[type="checkbox"]:only-child),
th:has(> input[type="checkbox"]:only-child) {
	text-align: center;
}

td > input[type="checkbox"]:only-child,
th > input[type="checkbox"]:only-child {
	display: block;
	margin-inline: auto;
}

/* ---------- Radio ---------- */
/* 권장: <label class="rn-radio"><input type="radio" name="g"> 텍스트</label>
   그룹: <div class="rn-radio-group">…</div>
   상태: 기본 / :checked / :disabled (디자인 스펙) */
.rn-radio,
.rn-emp__radio > label,
.rn-batch-form__fields--radio > label {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-space-2);
	position: relative;
	margin: 0;
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text);
	cursor: pointer;
	user-select: none;
	line-height: var(--rn-line-height-none);
}

.rn-radio-group,
.rn-emp__radio {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-3);
}

.rn-radio--sm {
	font-size: var(--rn-font-size-xs);
	gap: var(--rn-space-1);
}

.rn-radio input[type="radio"],
.rn-emp__radio > label input[type="radio"],
.rn-batch-form__fields--radio > label input[type="radio"],
#modal_register_rep .rep-info input[type="radio"],
#modal_work_performance_log_v2 input[type="radio"] {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--rn-radio-size);
	height: var(--rn-radio-size);
	margin: 0;
	padding: 0;
	border: var(--rn-radio-border);
	border-radius: 50%;
	background-color: var(--rn-radio-bg);
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	vertical-align: middle;
	transition: border-color var(--rn-transition-fast), background-color var(--rn-transition-fast), background-image var(--rn-transition-fast), box-shadow var(--rn-transition-fast);
}

.rn-radio--sm input[type="radio"] {
	width: var(--rn-radio-size-sm);
	height: var(--rn-radio-size-sm);
}

.rn-radio input[type="radio"]:hover:not(:disabled),
.rn-emp__radio > label input[type="radio"]:hover:not(:disabled),
.rn-batch-form__fields--radio > label input[type="radio"]:hover:not(:disabled),
#modal_register_rep .rep-info input[type="radio"]:hover:not(:disabled),
#modal_work_performance_log_v2 input[type="radio"]:hover:not(:disabled) {
	border-color: var(--rn-color-brand);
}

.rn-radio input[type="radio"]:focus-visible,
.rn-emp__radio > label input[type="radio"]:focus-visible,
.rn-batch-form__fields--radio > label input[type="radio"]:focus-visible,
#modal_register_rep .rep-info input[type="radio"]:focus-visible,
#modal_work_performance_log_v2 input[type="radio"]:focus-visible {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: var(--rn-control-focus-ring);
}

.rn-radio input[type="radio"]:checked,
.rn-emp__radio > label input[type="radio"]:checked,
.rn-batch-form__fields--radio > label input[type="radio"]:checked,
#modal_register_rep .rep-info input[type="radio"]:checked,
#modal_work_performance_log_v2 input[type="radio"]:checked {
	border-color: var(--rn-radio-checked-border);
	background-color: var(--rn-radio-bg);
	background-image: var(--rn-radio-dot);
}

/* disabled — 미선택: 보더만 / 선택: 회색 링+점 */
.rn-radio input[type="radio"]:disabled,
.rn-emp__radio > label input[type="radio"]:disabled,
.rn-batch-form__fields--radio > label input[type="radio"]:disabled,
#modal_work_performance_log_v2 input[type="radio"]:disabled {
	cursor: not-allowed;
	border-color: var(--rn-radio-disabled-border);
	background-color: var(--rn-radio-bg);
	background-image: none;
}

.rn-radio input[type="radio"]:checked:disabled,
.rn-emp__radio > label input[type="radio"]:checked:disabled,
.rn-batch-form__fields--radio > label input[type="radio"]:checked:disabled,
#modal_work_performance_log_v2 input[type="radio"]:checked:disabled {
	border-color: var(--rn-radio-disabled-border);
	background-color: var(--rn-radio-bg);
	background-image: var(--rn-radio-dot-disabled);
}

.rn-radio:has(input:disabled),
.rn-emp__radio > label:has(input:disabled),
.rn-batch-form__fields--radio > label:has(input:disabled) {
	color: var(--rn-color-text-subtle);
	cursor: not-allowed;
}

/* ---------- 인라인 필드 (.rn-inline-field) — 문장 속 입력 ----------
 * <label class="rn-inline-field">급여 지급일을 <select class="rn-select">…</select> 로 설정합니다.</label>
 * <label class="rn-inline-field">방문요양 <select class="rn-select rn-select--sm">…</select></label>
 * 여러 개는 .rn-inline-fields 로 감싼다. 컨트롤 모양은 rn-select / rn-input 그대로(토큰으로 바꾼다).
 * 토큰: --rn-inline-field-gap(0.375rem) · --rn-inline-fields-gap(0.375rem 0.75rem) */
.rn-inline-field {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-inline-field-gap, 0.375rem);
	margin: 0;
	white-space: nowrap;
}

.rn-inline-field > :is(.rn-select, .rn-input) {
	flex: 0 0 auto;
	width: auto;
}

.rn-inline-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-inline-fields-gap, 0.375rem 0.75rem);
}

/* ---------- 체크 묶음 (.rn-check-group) ----------
 * <div class="rn-check-group rn-check-group--divided"><label class="rn-check">…</label>…</div>
 * --divided: 앞 컨트롤과 왼쪽 점선으로 구분(레거시 .check_lis.bar).
 * 토큰: --rn-check-group-gap · --rn-check-group-divider(1px dashed --rn-color-border-strong) */
.rn-check-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-check-group-gap, var(--rn-space-2) var(--rn-space-3));
}

.rn-check-group--divided {
	padding-left: var(--rn-space-2);
	border-left: var(--rn-check-group-divider, 1px dashed var(--rn-color-border-strong));
}

/* ---------- 토글 스위치 (.rn-switch) ----------
 * 마크업: <label class="rn-switch"><input type="checkbox"><label|span data-on="완료" data-off="미완료"></label></label>
 *   — 레거시 공용 파셜의 `label.switch.btn-color-mode-switch > input + label.btn-color-mode-switch-inner` 에 rn-switch 만 덧붙여 쓴다
 *     (급여 명세서·퇴직금 _statement_rows/_retirement_rows.php). 레거시 화면은 이 파일을 싣지 않아 영향이 없다.
 * 의미: **체크 해제 = 켜짐(data-on, 손잡이 왼쪽·바탕 초록)**, 체크 = 꺼짐(data-off, 손잡이 오른쪽·바탕 회색) — 레거시와 같다.
 *   손잡이(::after)에 현재 상태 글자, 반대쪽(::before)에 누르면 바뀔 상태 글자.
 * 모양은 수급자 관리 상세 패널의 [확정/미확정]·[완료/미완료] 토글(prs_program.css)과 같다 (2026-10-13 "수급자 관리에 있는거랑 같은 디자인"):
 *   100×30 · 둥근 끝 · 켜짐 초록(--rn-color-success) / 꺼짐 회색(#C6C6C6) · 흰 손잡이가 반을 덮고 두 글자는 각 반의 가운데 · 11px 굵게.
 *   종전 급여 화면만 레거시 색(#2ecc71 / #e0e0e0)·13.6px·끝에서 고정 거리 글자였다.
 * 토큰(폴백 = 위 모양): --rn-switch-w · -h · -on-bg · -off-bg · -font-size
 * [특이도 — 2026-10-21] 선택자 머리를 :is(.rn-switch.btn-color-mode-switch, .rn-switch) 로 쓴다(특이도 0,2,0).
 *   수급자 패널 CSS(prs.css)의 범위 없는 레거시 `.btn-color-mode-switch > label.btn-color-mode-switch-inner::after`(0,2,2)가
 *   같은 요소에 같이 걸리는 화면(수급자 관리 · 수급자 연간관리의 출력 모달)에서 그쪽이 이겨 손잡이 크기·글자가 옛 모양으로 그려졌다.
 *   모양 값은 그대로이고 --rn-switch-* 토큰으로 화면별 조정하는 방식도 그대로다.
 */
:is(.rn-switch.btn-color-mode-switch, .rn-switch) {
	position: relative;
	display: inline-block;
	margin: 0;
	line-height: 0;
	vertical-align: middle;
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100% !important; /* 레거시 인라인 width/height(100×30, 22) 대신 스위치 전체가 눌리는 자리 */
	height: 100% !important;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > [data-on] {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: var(--rn-switch-w, 6.25rem);
	height: var(--rn-switch-h, 1.875rem);
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: var(--rn-switch-on-bg, var(--rn-color-success));
	overflow: hidden;
	transition: background 0.25s ease;
	pointer-events: none;
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > [data-on]::before,
:is(.rn-switch.btn-color-mode-switch, .rn-switch) > [data-on]::after {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: auto;
	padding: 0;
	font-size: var(--rn-switch-font-size, var(--rn-font-size-2xs));
	font-weight: var(--rn-font-weight-semibold);
	line-height: 1;
	white-space: nowrap;
}

/* 반대쪽 글자 — 손잡이가 덮지 않은 반의 가운데 */
:is(.rn-switch.btn-color-mode-switch, .rn-switch) > [data-on]::before {
	content: attr(data-off);
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	width: 50%;
	color: var(--rn-color-on-brand, #fff);
}

/* 손잡이 — 반을 덮는 흰 알약 */
:is(.rn-switch.btn-color-mode-switch, .rn-switch) > [data-on]::after {
	content: attr(data-on);
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: calc(50% - 2px);
	border-radius: 999px;
	background: var(--rn-color-bg);
	box-shadow: 0 0 6px -2px rgba(0, 0, 0, 0.2);
	color: var(--rn-color-text);
	transition: left 0.25s ease;
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > input[type="checkbox"]:checked + [data-on] {
	background: var(--rn-switch-off-bg, var(--rn-color-border-strong));
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > input[type="checkbox"]:checked + [data-on]::before {
	content: attr(data-on);
	right: auto;
	left: 0;
	color: var(--rn-color-text-muted);
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > input[type="checkbox"]:checked + [data-on]::after {
	content: attr(data-off);
	left: 50%;
}

:is(.rn-switch.btn-color-mode-switch, .rn-switch) > input[type="checkbox"]:disabled + [data-on] {
	opacity: 0.55;
}

/* 리뉴얼 화면에 뜨는 레거시 On/Off 스위치 전체 — 위 .rn-switch 와 같은 모양 (2026-10-22 사용자 지시 '고충처리 목록 출력 모달 온오프
   세그먼트 또 이상 — 이런 부분 다른 데도 있으면 수정'. 같은 날 공용 프린터 출력 모달(#modal_cr_print) 하나에만 걸었던 규칙을 넓혔다).
   마크업: 레거시 공용 파셜의 `label.switch.btn-color-mode-switch > input[type=checkbox] + label.btn-color-mode-switch-inner[data-on][data-off]`
   — 공용 프린터 출력(_print_modal.php: 수급자 관리 · 수급자 연간 기록) · 기관 연간 기록 출력(modal_print.php: 고충처리 · 사례 · 직원 · 운영위
   · 복지 목록 출력) · 종사자 연간 기록 교육일지 출력(_page_modals.php) · 교육관리 패널 · 본인부담금 청구서 출력(bill_send_modal.php).
   [왜 레거시 마크업 그대로] 파셜은 레거시 화면 공용이라 rn-switch 클래스를 넣지 않는다. 레거시 style.css · prs.css(전역 사본) ·
   selfbdn_bill_send.css 등의 `.btn-color-mode-switch …`(손잡이 높이 16+10px · 글자 0.85em · 끝에서 고정 거리 — 손잡이가 위로 붙고 글자가 처진다)를
   특이도로 이긴다 — 가장 센 레거시 규칙은 `#bill_print_modal .btn-color-mode-switch input:checked + label…:before`(id 1 · 클래스 4)이고,
   본인부담금 · 수급자/종사자 연간 기록은 레거시 CSS 를 @scope 로 감싸 실어 같은 특이도면 그쪽이 이긴다.
   제외: 이미 rn-switch 인 것(급여 명세서 · 퇴직금), 수급자 상세 패널(#right_section.rn-prs-panel — prs_program.css 가 따로 맞춘다).
   패널 제외 조건 :not(#right_section.rn-prs-panel *) 가 id 하나만큼 특이도를 더해 위 레거시 규칙을 모두 넘는다.
   기관 서식 폼(.iyr-institution-form-modal)의 완료 토글은 레거시가 display:none !important 로 숨긴 그대로다.
   의미는 레거시와 같다 — 체크 해제 = On(초록, 손잡이 왼쪽), 체크 = Off(회색, 손잡이 오른쪽) */
body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) {
	position: relative;
	top: 0;
	display: inline-block;
	margin: 0;
	line-height: 0;
	vertical-align: middle;
}

body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > .btn-color-mode-switch-inner {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: var(--rn-switch-w, 6.25rem);
	height: var(--rn-switch-h, 1.875rem);
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: var(--rn-switch-on-bg, var(--rn-color-success));
	overflow: hidden;
	transition: background 0.25s ease;
	pointer-events: none;
}

body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > .btn-color-mode-switch-inner::before,
body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > .btn-color-mode-switch-inner::after {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: auto;
	padding: 0;
	font-family: var(--rn-font-family);
	font-size: var(--rn-switch-font-size, var(--rn-font-size-2xs));
	font-weight: var(--rn-font-weight-semibold);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

/* 반대쪽 글자 — 손잡이가 덮지 않은 반의 가운데 */
body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > .btn-color-mode-switch-inner::before {
	content: attr(data-off);
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	width: 50%;
	color: var(--rn-color-on-brand, #fff);
}

/* 손잡이 — 반을 덮는 흰 알약 */
body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > .btn-color-mode-switch-inner::after {
	content: attr(data-on);
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: calc(50% - 2px);
	border-radius: 999px;
	background: var(--rn-color-bg);
	box-shadow: 0 0 6px -2px rgba(0, 0, 0, 0.2);
	color: var(--rn-color-text);
	transition: left 0.25s ease;
}

body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > input[type="checkbox"]:checked + .btn-color-mode-switch-inner {
	background: var(--rn-switch-off-bg, var(--rn-color-border-strong));
}

body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > input[type="checkbox"]:checked + .btn-color-mode-switch-inner::before {
	content: attr(data-on);
	right: auto;
	left: 0;
	color: var(--rn-color-text-muted);
}

body.rn-body .btn-color-mode-switch:not(.rn-switch):not(#right_section.rn-prs-panel *) > input[type="checkbox"]:checked + .btn-color-mode-switch-inner::after {
	content: attr(data-off);
	left: 50%;
}

/* ---------- Date input ---------- */
/* 날짜 전용: 달력 아이콘·고정 폭·숫자 정렬·피커 커서. jQuery UI datepicker 등과 함께 쓴다. */
.rn-input--date {
	width: 8.75rem;
	min-width: 8.75rem;
	max-width: 10rem;
	padding-right: 2rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 1rem 1rem;
}

.rn-input--date.rn-input--sm {
	width: 8.5rem;
	min-width: 8.5rem;
	padding-right: 1.85rem;
	background-position: right 0.5rem center;
}

.rn-input--date[readonly] {
	cursor: pointer;
	background-color: var(--rn-color-bg);
}

/* 휴대폰 · 숫자만 — 폭은 레이아웃에서, 크롬은 .rn-input */
.rn-input--phone,
.rn-input--digits {
	font-variant-numeric: tabular-nums;
}

.rn-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2rem;
	background-image: var(--rn-control-chevron);
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	cursor: pointer;
}

.rn-select--sm {
	padding-right: 1.75rem;
	background-position: right 0.5rem center;
}

/* 필터 바용: 내용에 맞춘 자동 폭 */
.rn-select--filter {
	width: auto;
	min-width: 6.5rem;
	flex: 0 0 auto;
}

/* 펼침 메뉴가 열린 동안 — 포커스와 같은 주황 테두리 (select[data-rn-menu], select_menu.js) */
.rn-select.is-menu-open {
	border-color: var(--rn-color-brand);
}

/* ---------- 셀렉트 펼침 메뉴 — select[data-rn-menu] (renewal/js/select_menu.js 가 body 에 띄운다, 2026-10-07 디자인 스펙) ----------
 * 흰 판 + 연한 테두리(#D8D8D8) · 둥근 옵션 · 고른 값은 연주황 바탕(#FFF4F0) + 주황 글자 · 마우스/키보드 위치도 같은 연주황 바탕(글자는 검정). 셀렉트 바로 아래 붙어 열린다(간격 0).
 * 글자 크기는 스크립트가 셀렉트의 계산값을 그대로 넣는다 */
.rn-select-menu {
	position: fixed;
	z-index: 13000; /* 달력(.ui-datepicker 12000)·레거시 모달(2000)·피커(10050)·안내(10060) 위 — 달력 연·월 선택도 달력에 가리지 않게 */
	box-sizing: border-box;
	max-height: min(20rem, 60vh);
	margin: 0;
	padding: var(--rn-space-1);
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg);
	font-family: var(--rn-font-family);
	line-height: var(--rn-line-height-base);
}

.rn-select-menu__option {
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	color: var(--rn-color-text-title);
	/* 항목은 늘 한 줄 (2026-10-12 '선택 리스트에 텍스트가 2줄로 보임' — '05 / 월'·'시군구청장이 / 지정한자' 처럼 꺾이지 않게).
	   메뉴 폭은 셀렉트 폭이 기본이고, 한 줄로 안 들어가는 항목이 있을 때만 select_menu.js 가 그만큼 넓힌다 */
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.rn-select-menu__option + .rn-select-menu__option {
	margin-top: 2px;
}

/* 마우스·키보드 위치 — 고른 값과 같은 연주황 바탕(글자는 검정 그대로, 2026-10-07 회색 → 연주황) */
.rn-select-menu__option.is-active {
	background: var(--rn-color-brand-soft);
}

.rn-select-menu__option.is-selected {
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

/* 날짜 선택 달력(CareDatepicker 팝업, longterm/css/care_datepicker.css) — 주황 테두리(#ffe2c8)·주황 번짐 그림자 대신
   위 펼침 메뉴와 같은 연회색 테두리만 (2026-10-12 '달력에 주황색 외부광선 빼고'). 팝업은 body 에 붙으므로 .rn-body 로 범위를 잡는다 */
.rn-body .ui-datepicker.care-datepicker {
	border: 1px solid var(--rn-color-border);
	box-shadow: none;
}

/* 달력 안 글꼴 — jQuery UI(.ui-widget)가 Verdana·Arial 을, 셀렉트는 시스템 글꼴을 쓴다 → 프리텐다드 (2026-10-14) */
.rn-body .ui-datepicker.care-datepicker,
.rn-body .ui-datepicker.care-datepicker :is(select, button, th, td, a, span) {
	font-family: var(--rn-font-family);
}

.rn-body .ui-datepicker.care-datepicker {
	border-radius: var(--rn-radius-lg);
	color: var(--rn-color-text);
}

/* 달력 좌우 여백 같게 (2026-10-28 사용자 지시 '달력에서 토요일 오른쪽이 너무 여백이 없다 — 공통으로').
 * 날짜 표가 팝업 안쪽 폭보다 넓어지면 왼쪽 여백은 그대로이고 넘친 만큼 토요일 칸이 오른쪽 테두리에 붙는다.
 * 팝업 상자 크기 계산(border-box)과 표 폭(안쪽 100% · 고정 배치)을 다른 규칙이 바꾸지 못하게 못 박고,
 * 폭 260 → 280px · 좌우 여백 10 → 12px 로 칸(약 34px)에 날짜 14px 가 여유 있게 든다 */
.rn-body .ui-datepicker.care-datepicker {
	box-sizing: border-box !important;
	width: 17.5rem !important;
	max-width: none;
	padding: var(--rn-space-3);
}

.rn-body .ui-datepicker.care-datepicker table {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100%;
	table-layout: fixed !important;
}

/* 연·월 셀렉트 — 공통 입력칸 테두리·화살표(#2D2D2D) */
.rn-body .ui-datepicker.care-datepicker :is(select.ui-datepicker-year, select.ui-datepicker-month) {
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background-image: var(--rn-control-chevron);
	background-size: 0.875rem;
	background-position: right 0.375rem center;
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
	/* 글자가 잘리지 않는 폭 — 레거시 max-width:46% · 오른쪽 여백 26px 이면 '2026'·'10월' 이 잘렸다 (2026-10-14) */
	flex: 0 0 auto;
	max-width: none;
	padding: 0 1.375rem 0 0.5rem;
}

.rn-body .ui-datepicker.care-datepicker select.ui-datepicker-year { min-width: 4.75rem; }
.rn-body .ui-datepicker.care-datepicker select.ui-datepicker-month { min-width: 4.25rem; }

.rn-body .ui-datepicker.care-datepicker :is(select.ui-datepicker-year, select.ui-datepicker-month):is(:hover, :focus) {
	border-color: var(--rn-color-text-subtle);
	box-shadow: none;
}

/* 이전·다음 달 — jQuery UI 의 검은 원 안 삼각형(스프라이트) 대신 선 꺾쇠(공통 --rn-icon-chevron-right, 이전은 뒤집어서) (2026-10-14) */
.rn-body .ui-datepicker.care-datepicker :is(.ui-datepicker-prev, .ui-datepicker-next) {
	border-radius: var(--rn-radius-md);
	color: var(--rn-control-icon);
}

.rn-body .ui-datepicker.care-datepicker :is(.ui-datepicker-prev, .ui-datepicker-next):hover {
	background: var(--rn-color-bg-muted) !important;
}

.rn-body .ui-datepicker.care-datepicker :is(.ui-datepicker-prev, .ui-datepicker-next) .ui-icon {
	background: currentColor !important;
	-webkit-mask: var(--rn-icon-chevron-right) center / 0.875rem no-repeat;
	mask: var(--rn-icon-chevron-right) center / 0.875rem no-repeat;
}

.rn-body .ui-datepicker.care-datepicker .ui-datepicker-prev .ui-icon {
	transform: rotate(180deg);
}

/* 요일·날짜 — 가이드 글자색, 고른 날 주황(#FF4B00) 채움 · 오늘·마우스 올림은 연주황 바탕 + 주황 글자 (2026-10-14 종전 #FF9036 · #FFF3E1 · #E8730F) */
.rn-body .ui-datepicker.care-datepicker th {
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-medium);
}

.rn-body .ui-datepicker.care-datepicker td :is(a, span) {
	border-radius: var(--rn-radius-md);
	color: var(--rn-color-text);
}

.rn-body .ui-datepicker.care-datepicker td a.ui-state-highlight,
.rn-body .ui-datepicker.care-datepicker td a:hover {
	background: var(--rn-color-brand-soft) !important;
	color: var(--rn-color-brand) !important;
}

.rn-body .ui-datepicker.care-datepicker td a.ui-state-active,
.rn-body .ui-datepicker.care-datepicker td a.ui-state-active:hover {
	background: var(--rn-color-brand) !important;
	color: var(--rn-color-on-brand) !important;
	font-weight: var(--rn-font-weight-bold);
}

.rn-body .ui-datepicker.care-datepicker td.ui-datepicker-unselectable span {
	color: var(--rn-color-text-subtle);
	opacity: 0.5;
}

/* 작은 메뉴 — 셀렉트 글자는 크게 보여도 메뉴는 보통 글자·좁은 옵션으로, 폭이 셀렉트를 넘지 않게.
 * 셀렉트 쪽 CSS 에 --rn-select-menu-variant: compact 를 주면 select_menu.js 가 붙인다 (예: prs.css 달력 연·월, 2026-10-12) */
.rn-select-menu--compact {
	font-size: var(--rn-font-size-sm);
}

.rn-select-menu--compact .rn-select-menu__option {
	padding: var(--rn-space-1) 0.375rem;
}

/* 기본 textarea — 긴 글을 쓰는 칸이라 넓게 잡는다.
   (위 .rn-textarea 규칙은 한 줄짜리 입력칸 토큰을 받아 쓰므로 세로 패딩이 0 이다 —
	  여러 줄을 쓰는 칸에는 세로 패딩과 줄간격이 있어야 해서 여기서 다시 낼다) */
.rn-textarea {
	min-height: 16rem;
	padding: var(--rn-space-3);
	line-height: var(--rn-line-height-base);
	resize: vertical;
}

/* 작은 textarea — 표 안의 메모처럼 두〜세 줄이면 충분한 칸.
   기본값(16rem · 패딩 12px)을 그대로 쓰면 모달 안에서 너무 크고 속이 답답해서,
   화면마다 height 를 따로 박아 되돌리고 있었다 — 그 몫을 공용으로 두는 것이 이 규칙이다. */
.rn-textarea--sm {
	min-height: 3rem;
	padding: var(--rn-space-2) var(--rn-control-padding-x-sm);
	font-size: var(--rn-control-font-size-sm);
}

.rn-file {
	padding: var(--rn-space-2) var(--rn-control-padding-x);
	line-height: var(--rn-line-height-base);
}

/* ---------- Search input ---------- */
/* 검색 전용: 우측 검색 버튼이 있는 래퍼. 인풋 크롬은 .rn-input 과 동일 토큰. */
.rn-search {
	position: relative;
	min-width: 0;
	width: 100%;
}

.rn-search__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: var(--rn-control-min-height);
	padding: 0 2.25rem 0 var(--rn-control-padding-x);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background-color: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size);
	line-height: var(--rn-line-height-none);
	transition: border-color var(--rn-transition-fast), box-shadow var(--rn-transition-fast);
}

.rn-search__input::placeholder {
	color: var(--rn-color-text-subtle);
}

.rn-search__input:focus {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: var(--rn-control-focus-ring);
}

.rn-search__input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background-color: var(--rn-color-bg-soft);
}

.rn-search__btn {
	position: absolute;
	top: 0;
	right: 0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: var(--rn-control-min-height);
	padding: 0;
	border: 0;
	border-radius: var(--rn-radius-sm);
	background: transparent;
	color: var(--rn-control-icon); /* #2D2D2D — 셀렉트 화살표·달력 아이콘과 같은 색 (2026-10-07) */
	cursor: pointer;
}
/* hover 효과 없음 — 글자색·바탕 모두 그대로 (2026-10-07 요청) */

.rn-search__btn svg {
	display: block;
}

.rn-search--sm {
	max-width: 16rem;
}

.rn-search--sm .rn-search__input {
	min-height: var(--rn-control-min-height-sm);
	padding-left: var(--rn-control-padding-x-sm);
	padding-right: 2rem;
	font-size: var(--rn-control-font-size-sm);
}

.rn-search--sm .rn-search__btn {
	height: var(--rn-control-min-height-sm);
}

/* ---------- Pagination ---------- */
.rn-paging {
	display: flex;
	justify-content: center;
	margin-top: var(--rn-space-5);
}

.rn-paging .pagination {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-paging .pag_num {
	display: inline-flex;
}

.rn-paging .pag_num a,
.rn-paging .pag_num.active a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 var(--rn-space-2);
	border: 1px solid transparent; /* 안 고른 번호는 원 테두리 없이 글자만 (2026-10-06) — 고른 번호만 주황 원 */
	border-radius: 999px; /* 둥근 페이지 번호 — 두 자리까지 원, 세 자리부터 알약 (2026-10-06) */
	background: var(--rn-color-bg);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	text-decoration: none;
}

/* 번호 양옆에는 이전·다음(‹ ›)만 둔다 — 처음·끝(« », CB_Pagination 기본값, 클래스 없는 li)은 숨긴다 (2026-10-06).
 * 이전은 2쪽부터, 다음은 끝 쪽 전까지만 나온다(페이지 라이브러리 기본 동작) */
.rn-paging .pagination > li:not(.pag_num) {
	display: none;
}

.rn-paging .pag_num.active a {
	border-color: var(--rn-color-brand);
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
	font-weight: var(--rn-font-weight-semibold);
}

/* 이전/다음 — 회색 테두리 원 안의 꺾쇠 아이콘 (2026-10-06) */
.rn-paging .pag_prev a,
.rn-paging .pag_next a {
	padding: 0;
	border-color: var(--rn-gray-30);
}

/* FA 글꼴 대신 얇은 선 꺾쇠(시안 Lucide chevron)를 mask 로 그린다 — 색은 글자색(currentColor)을 따른다 */
.rn-paging .fa-angle-left,
.rn-paging .fa-angle-right {
	display: inline-flex;
	font-style: normal;
}

/* ---------- DataTables 페이지 번호 — 위 .rn-paging(공지 목록)과 같은 모양 (2026-10-13 내 정보 카카오톡/문자 발송 관리) ----------
   DataTables 가 그리는 .dataTables_paginate(번호 a.paginate_button · 이전/다음 · 말줄임 span.ellipsis)를 감싼 요소에 .rn-dt-paging 을 붙인다.
   DataTables 기본 CSS 가 번호에 !important(호버 검정 그라데이션 등)를 걸어 여기서도 !important 로 덮는다.
   공지처럼 이전·다음은 넘길 쪽이 있을 때만 보인다(첫 쪽의 이전, 끝 쪽의 다음 = .disabled 는 숨김).
   이전·다음의 꺾쇠(.fa-angle-left/right — 화면 스크립트 language.paginate)는 아래 .rn-paging 꺾쇠 규칙을 같이 쓴다 */
.rn-dt-paging .dataTables_wrapper .dataTables_paginate {
	float: none !important;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--rn-space-1);
	padding: 0 !important;
	text-align: center;
}

.rn-dt-paging .dataTables_wrapper .dataTables_paginate > span {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-space-1);
}

.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button,
.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.rn-dt-paging .dataTables_wrapper .dataTables_paginate .ellipsis {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2rem;
	height: 2rem;
	margin: 0 !important;
	padding: 0 var(--rn-space-2) !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background: var(--rn-color-bg) !important;
	box-shadow: none !important;
	color: var(--rn-color-text-muted) !important;
	font-size: var(--rn-font-size-xs);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.rn-dt-paging .dataTables_wrapper .dataTables_paginate .ellipsis {
	cursor: default;
}

.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border-color: var(--rn-color-brand) !important;
	background: var(--rn-color-brand) !important;
	color: var(--rn-color-on-brand) !important;
	font-weight: var(--rn-font-weight-semibold);
}

.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button.next {
	padding: 0 !important;
	border-color: var(--rn-gray-30) !important;
}

.rn-dt-paging .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	display: none !important;
}

.rn-dt-paging .fa-angle-left,
.rn-dt-paging .fa-angle-right {
	display: inline-flex;
	font-style: normal;
}

.rn-paging .fa-angle-left::before,
.rn-paging .fa-angle-right::before,
.rn-dt-paging .fa-angle-left::before,
.rn-dt-paging .fa-angle-right::before {
	content: "";
	display: block;
	width: 0.875rem;
	height: 0.875rem;
	background-color: currentColor;
	-webkit-mask: var(--rn-paging-chevron) center / contain no-repeat;
	mask: var(--rn-paging-chevron) center / contain no-repeat;
}

.rn-paging .fa-angle-left::before,
.rn-dt-paging .fa-angle-left::before {
	--rn-paging-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.rn-paging .fa-angle-right::before,
.rn-dt-paging .fa-angle-right::before {
	--rn-paging-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* ---------- 공통 라디오 · 체크박스 · 선택칸 기본값 (2026-10-14 '선택박스나 라디오버튼 적용 안 된 부분 다 공통으로 통일' · '체크박스도 공통으로 다') ----------
 * 클래스를 따로 달지 않은 라디오·체크박스·셀렉트(레거시 마크업, JS 가 그리는 평가표·하단 셀렉트 등)도 리뉴얼 화면 어디서나 공통 모양이 되게 기본값을 깐다.
 * 명시도 0(:where) — 화면마다 따로 준 모양(.rn-select · 세그먼트 탭의 숨긴 라디오 · 위 공통 라디오 묶음 등)이 있으면 그쪽이 이긴다.
 * 라디오 바깥 여백(margin)은 건드리지 않는다 — 브라우저 기본 여백이 옆 글자와의 간격을 만들어 주는 곳이 많다.
 * 셀렉트 화살표 그림만은 !important — 레거시 `background:` 단축 속성이 그림을 지우면 화살표 없는 셀렉트가 된다(브라우저 화살표는 appearance:none 으로 꺼져 있다) */
:where(.rn-body input[type="radio"]) {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--rn-radio-size);
	height: var(--rn-radio-size);
	padding: 0;
	border: var(--rn-radio-border);
	border-radius: 50%;
	background-color: var(--rn-radio-bg);
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--rn-transition-fast), background-image var(--rn-transition-fast);
}

:where(.rn-body input[type="radio"]):hover:not(:disabled) {
	border-color: var(--rn-color-brand);
}

:where(.rn-body input[type="radio"]):focus-visible {
	outline: none;
	border-color: var(--rn-color-brand);
}

:where(.rn-body input[type="radio"]):checked {
	border-color: var(--rn-radio-checked-border);
	background-color: var(--rn-radio-bg);
	background-image: var(--rn-radio-dot);
}

:where(.rn-body input[type="radio"]):disabled {
	border-color: var(--rn-radio-disabled-border);
	background-image: none;
	cursor: not-allowed;
}

:where(.rn-body input[type="radio"]):checked:disabled {
	background-image: var(--rn-radio-dot-disabled);
}

:where(.rn-body input[type="checkbox"]) {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--rn-check-size);
	height: var(--rn-check-size);
	padding: 0;
	border: var(--rn-check-border);
	border-radius: var(--rn-check-radius);
	background-color: var(--rn-check-bg);
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 72%;
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--rn-transition-fast), background-color var(--rn-transition-fast);
}

:where(.rn-body input[type="checkbox"]):hover:not(:disabled):not(:checked) {
	border-color: var(--rn-check-hover-border);
}

:where(.rn-body input[type="checkbox"]):focus-visible {
	outline: none;
	border-color: var(--rn-check-hover-border);
}

:where(.rn-body input[type="checkbox"]):checked {
	border-color: var(--rn-check-checked-border);
	background-color: var(--rn-check-checked-bg);
	background-image: var(--rn-check-mark);
}

:where(.rn-body input[type="checkbox"]):indeterminate {
	border-color: var(--rn-check-checked-border);
	background-color: var(--rn-check-checked-bg);
	background-image: var(--rn-check-indeterminate);
}

:where(.rn-body input[type="checkbox"]):disabled {
	border-color: transparent;
	background-color: var(--rn-check-disabled-bg);
	cursor: not-allowed;
}

:where(.rn-body select:not([multiple]):not([size])) {
	box-sizing: border-box;
	padding-right: 1.75rem;
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background-color: var(--rn-color-bg);
	background-position: right 0.5rem center;
	background-size: 0.875rem;
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	cursor: pointer;
}

/* 화살표 그림만 못박는다(브라우저 화살표는 끈다). 자리·크기는 위 기본값 — 화면마다 칸에 맞춰 둔 값(예: 패널 연·월 굵은 글자 칸은
   오른쪽 2px · 12px)이 이긴다. 자리까지 못박았더니 그런 칸에서 화살표가 '년' 글자 위에 겹쳤다(2026-10-14).
   [주의] 셀렉트에 `background:` 단축 속성을 쓰면 자리가 왼쪽 위(0 0)로 되돌아가 화살표가 글자 위에 얹힌다 —
   셀렉트에는 background-color 로 쓸 것(리뉴얼 CSS 의 해당 규칙은 같은 날 고쳤다) */
.rn-body select:not([multiple]):not([size]) {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: var(--rn-control-chevron) !important;
	background-repeat: no-repeat !important;
}

/* 레거시 입력칸 클래스(.set-field-input · .set-field-select)를 단 select — 팝업·화면마다의 입력칸 규칙이 background 단축형으로
   위 화살표 자리(right 0.5rem center)를 왼쪽 위로 되돌리거나 오른쪽 여백을 8px 로 덮어, 화살표가 글자 앞에 붙거나 글자와 겹쳤다
   (2026-10-19 인지선별검사(CIST) 결과지 학력). 화살표 자리·크기·여백만 공통 값으로 되돌린다 — 그 규칙들이 더 구체적이라 !important */
.rn-body select:is(.set-field-input, .set-field-select):not([multiple]):not([size]) {
	padding-right: 1.75rem !important;
	background-position: right 0.5rem center !important;
	background-size: 0.875rem !important;
}

:where(.rn-body select:not([multiple]):not([size])):focus {
	outline: none;
	border-color: var(--rn-color-brand);
}

:where(.rn-body select:not([multiple]):not([size])):disabled {
	background-color: var(--rn-color-bg-muted);
	color: var(--rn-color-text-muted);
	cursor: not-allowed;
}

/* 공용 달력(CareDatepicker)이 붙은 레거시 날짜칸 — 공통 날짜 입력칸(.rn-input--date)과 같은 모양 (2026-10-14)
 * 연간기록관리 JS 가 type=date 를 글자칸 + .care-datepicker-input 으로 바꾸고, 입사전 건강검진은 .prehire-datepicker 를 쓴다.
 * 레거시 달력 CSS(care_datepicker.css)의 회색 #888 아이콘 → 진회색 #2D2D2D 선 달력, 테두리·높이·글자는 공통 입력칸.
 * 폭은 화면마다 달라(입사전 건강검진 100%) 여기서 정하지 않는다.
 * 레거시 팝업 입력칸(.rn-body .md-modal .set-field-input, 0,3,0)이 오른쪽 여백을 8px 로 덮으므로 .md-modal 안쪽은 한 단계 높여 건다 */
body.rn-body input:is(.care-datepicker-input, .prehire-datepicker),
body.rn-body .md-modal input:is(.care-datepicker-input, .prehire-datepicker) {
	box-sizing: border-box;
	height: var(--rn-control-min-height) !important; /* 레거시 인라인 height:30px(보수교육 교육일자 · 상담 조치일자)을 이긴다 */
	min-height: 0;
	padding: 0 2rem 0 var(--rn-control-padding-x);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat right 0.65rem center / 1rem 1rem;
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
	font-variant-numeric: tabular-nums;
	cursor: text;
}

body.rn-body input:is(.care-datepicker-input, .prehire-datepicker)::placeholder {
	color: var(--rn-color-text-subtle);
}

body.rn-body input:is(.care-datepicker-input, .prehire-datepicker):focus {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: none;
}