/**
 * 리뉴얼 공통 테이블
 *
 * 마크업:
 * <div class="rn-table-wrap">
 *   <table class="rn-table">...</table>
 * </div>
 *
 * 변형:
 * - .rn-table--sm — 조밀한 패딩·폰트 (목록·패널용)
 * - .rn-table-wrap--scroll — sticky 헤더 + 세로 스크롤
 * - .rn-table-wrap--h-sm / --h-md / --h-lg — 스크롤 영역 높이
 * - .rn-table__cell--left / --right — 셀 정렬
 * - .rn-table__cell--sep (--solid) — 칸 왼쪽 세로 구분선 (기본 점선)
 * - .rn-table__empty — 빈 목록 안내 셀
 * - tr.is-active / tr.active — 선택 행 (JS 가 레거시 클래스 active 를 토글하는 화면도 받는다)
 * - tfoot.rn-table__total — 표 아래 붙는 합계 줄 (스크롤해도 보이게 sticky)
 * - .rn-table--inline-edit — 칸 안 입력칸이 선택 행에서만 입력칸 모양, 나머지 행은 글자처럼 보인다
 * - .rn-table--grid — 칸마다 선을 긋는 집계표(여러 줄 머리글·행 머리 th). 머리 고정·지브라·hover 없음, 자동 열 폭
 *   토큰: --rn-table-grid-border · --rn-table-grid-td-align(center)
 *
 * 토큰 — 화면 범위(예: page_frame.css .rn-pf)에서 바꿔 모양을 맞춘다. 정의는 :root 가 아니라 **폴백값**으로 둔다
 *   (variables.css 에 var(--rn-color-*) 로 정의하면 루트에서 값이 굳어 범위에서 색 토큰을 바꿔도 따라오지 않는다).
 *   --rn-table-wrap-border / -wrap-radius · --rn-table-cell-padding · --rn-table-row-border · --rn-table-th-border(머리글 아래 선)
 *   --rn-table-last-row-border(마지막 줄 아래 선 — 기본 없음: 표 상자 테두리가 대신한다. 상자 테두리를 없앤 목록은 줄 선으로 둔다)
 *   --rn-table-th-bg / -th-color / -th-size / -th-weight · --rn-table-td-color / -td-size / -td-weight / -td-line
 *   --rn-table-stripe-bg · --rn-table-hover-bg · --rn-table-active-bg
 *   --rn-table-sm-padding / -sm-th-padding / -sm-td-size / -sm-th-size / -sm-height
 *   --rn-table-sep · --rn-table-total-bg / -total-border / -total-height / -total-padding / -total-sep / -total-weight
 *
 * .rn-sort-inline (DataTables 표에 붙이는 클래스) — 정렬 삼각형을 머리글 글자 바로 오른쪽에 붙인다
 */

/* ---------- 정렬 삼각형 — .rn-sort-inline (2026-10-07, 수급자 관리에서 공통으로 올림) ----------
   DataTables 기본 CSS 는 ▲(::before)·▼(::after)를 칸 오른쪽 끝(right:10px)에 절대 위치로 둬서
   왼쪽 정렬한 짧은 제목(이름·등급…)과 멀리 떨어져 보인다. ::before 는 글자 '앞'에 생기는 가상요소라
   글자 뒤로 옮길 수 없으므로 끄고, ▲▼ 둘을 그린 마스크 하나를 ::after 로 글자 바로 오른쪽에 붙인다.
   지금 정렬 방향 쪽 삼각형만 진하게 — 기본 CSS 의 흐림(.125)/진함(.6) 구분과 같은 뜻.
   선택자는 CDN 규칙(0,2,5)을 넘도록 table.rn-sort-inline.dataTable 로 시작한다. */
table.rn-sort-inline.dataTable thead > tr > th.sorting {
	--rn-sort-icon: var(--rn-icon-sort);
}
table.rn-sort-inline.dataTable thead > tr > th.sorting_asc {
	--rn-sort-icon: var(--rn-icon-sort-asc);
}
table.rn-sort-inline.dataTable thead > tr > th.sorting_desc {
	--rn-sort-icon: var(--rn-icon-sort-desc);
}

table.rn-sort-inline.dataTable thead > tr > th.sorting,
table.rn-sort-inline.dataTable thead > tr > th.sorting_asc,
table.rn-sort-inline.dataTable thead > tr > th.sorting_desc {
	white-space: nowrap; /* 칸이 좁아도 삼각형만 다음 줄로 떨어지지 않게 */
}

table.rn-sort-inline.dataTable thead > tr > th.sorting::before,
table.rn-sort-inline.dataTable thead > tr > th.sorting_asc::before,
table.rn-sort-inline.dataTable thead > tr > th.sorting_desc::before {
	content: none;
}

table.rn-sort-inline.dataTable thead > tr > th.sorting::after,
table.rn-sort-inline.dataTable thead > tr > th.sorting_asc::after,
table.rn-sort-inline.dataTable thead > tr > th.sorting_desc::after {
	content: "";
	position: static;
	display: inline-block;
	width: 0.5em;
	height: 0.75em;
	margin-left: 0.25em;
	font-size: inherit; /* 기본 CSS 의 .8em 을 되돌려 em 크기를 제목 글자에 맞춘다 */
	line-height: 0;
	vertical-align: baseline; /* 내용 없는 inline-block 은 아래 끝이 기준선 — 한글 글자 가운데쯤에 온다 */
	opacity: 1;
	background-color: currentColor;
	-webkit-mask: var(--rn-sort-icon) center / contain no-repeat;
	mask: var(--rn-sort-icon) center / contain no-repeat;
}

.rn-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow: auto;
	border: var(--rn-table-wrap-border, 1px solid var(--rn-color-border));
	border-radius: var(--rn-table-wrap-radius, var(--rn-radius-md));
	background: var(--rn-color-bg);
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.rn-table-wrap--scroll {
	overflow: auto;
}

.rn-table-wrap--h-sm {
	max-height: 11rem;
}

.rn-table-wrap--h-md {
	max-height: 15.5rem;
}

.rn-table-wrap--h-lg {
	max-height: min(50vh, 26rem);
}

.rn-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--rn-table-td-size, var(--rn-font-size-sm));
	font-weight: var(--rn-table-td-weight, inherit);
	line-height: var(--rn-table-td-line, inherit);
	color: var(--rn-table-td-color, var(--rn-color-text));
}

.rn-table th,
.rn-table td {
	padding: var(--rn-table-cell-padding, 0.55rem 0.5rem);
	border-bottom: var(--rn-table-row-border, 1px solid var(--rn-color-border));
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	word-break: keep-all;
}

.rn-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	border-bottom: var(--rn-table-th-border, var(--rn-table-row-border, 1px solid var(--rn-color-border))); /* 머리글 아래 선 — 따로 안 주면 줄 사이 선과 같다 */
	background: var(--rn-table-th-bg, var(--rn-color-bg-muted));
	color: var(--rn-table-th-color, var(--rn-color-text-muted));
	font-size: var(--rn-table-th-size, var(--rn-list-head-font-size)); /* 15px — 목록 머리글 공통 (2026-10-21 종전 14px) */
	font-weight: var(--rn-table-th-weight, var(--rn-font-weight-semibold));
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* 마지막 줄 아래 선 — 표 상자(.rn-table-wrap) 테두리와 겹치지 않게 기본은 없다.
   상자 테두리를 없앤 목록(업무관리 페이지 틀 · 관제센터 목록)은 행이 적을 때 목록이 선 없이 끝나 보여 토큰으로 줄 선을 남긴다 (2026-10-28 사용자 지시 '리스트가 적을 때 마감 선') */
.rn-table tbody tr:last-child td {
	border-bottom: var(--rn-table-last-row-border, none);
}

/* 짝수 줄 — 기본은 줄무늬 없이 흰색(2026-10-07 목록 공통, 수급자 관리처럼). 줄무늬가 필요한 표는 --rn-table-stripe-bg 로 켠다 */
.rn-table tbody tr:nth-child(even) td {
	background: var(--rn-table-stripe-bg, var(--rn-color-bg));
}

.rn-table tbody tr:hover td {
	background: var(--rn-table-hover-bg, var(--rn-color-bg-hover, var(--rn-color-border-subtle)));
}

/* 선택 행 — 지브라·hover 보다 뒤에 둬서 이긴다 */
.rn-table tbody tr.is-active td,
.rn-table tbody tr.active td {
	background: var(--rn-table-active-bg, var(--rn-color-brand-soft));
}

.rn-table--sm th,
.rn-table--sm td {
	padding: var(--rn-table-sm-padding, 0.4rem 0.45rem);
	font-size: var(--rn-table-sm-td-size, var(--rn-font-size-xs));
	height: var(--rn-table-sm-height, 2.25rem);
}

.rn-table--sm thead th {
	height: var(--rn-table-sm-height, 2.25rem);
	padding: var(--rn-table-sm-th-padding, var(--rn-table-sm-padding, 0.4rem 0.45rem));
	font-size: var(--rn-table-sm-th-size, var(--rn-list-head-font-size)); /* 15px — 목록 머리글 공통 (2026-10-21) */
}

/* 칸 왼쪽 세로 구분선 — 금액 묶음 시작 등. 기본 점선, --solid 는 실선 */
.rn-table :is(th, td).rn-table__cell--sep {
	border-left: var(--rn-table-sep, 1px dotted var(--rn-color-border-strong));
}

.rn-table :is(th, td).rn-table__cell--sep--solid {
	border-left: var(--rn-table-sep-solid, 1px solid var(--rn-color-border-strong));
}

/* 합계 줄 — tfoot 에 둔다(열 폭이 본문과 자동으로 맞는다). 스크롤 영역 바닥에 붙어 늘 보인다 */
.rn-table tfoot.rn-table__total td {
	position: sticky;
	bottom: 0;
	z-index: 2;
	height: var(--rn-table-total-height, auto);
	padding: var(--rn-table-total-padding, var(--rn-table-cell-padding, 0.55rem 0.5rem));
	border-top: var(--rn-table-total-border, 2px solid var(--rn-color-border-strong));
	border-bottom: 0;
	background: var(--rn-table-total-bg, var(--rn-color-bg-muted));
	font-weight: var(--rn-table-total-weight, var(--rn-font-weight-semibold));
	font-variant-numeric: tabular-nums;
}

.rn-table tfoot.rn-table__total td.rn-table__cell--sep {
	border-left: var(--rn-table-total-sep, 1px solid var(--rn-color-border-strong));
}

/* 격자 표 — 칸마다 선(모든 th 는 머리 모양), 머리 고정·지브라·hover 없음 */
.rn-table.rn-table--grid {
	table-layout: auto;
}

.rn-table--grid th,
.rn-table--grid td,
.rn-table--grid tbody tr:last-child td {
	border: var(--rn-table-grid-border, 1px solid var(--rn-color-border));
}

/* .rn-table thead th(sticky·nowrap, 0,1,2)를 이기도록 두 클래스로 건다 */
.rn-table.rn-table--grid th {
	position: static;
	background: var(--rn-table-th-bg, var(--rn-color-bg-muted));
	color: var(--rn-table-th-color, var(--rn-color-text-muted));
	font-size: var(--rn-table-th-size, var(--rn-font-size-xs));
	font-weight: var(--rn-table-th-weight, var(--rn-font-weight-semibold));
	white-space: normal;
}

.rn-table--grid td {
	text-align: var(--rn-table-grid-td-align, center);
}

.rn-table--grid tbody tr:nth-child(even) td,
.rn-table--grid tbody tr:hover td {
	background: var(--rn-color-bg);
}

/* 격자 표에서도 선택 행은 강조한다 — 위 지브라·hover 끄기가 같은 특이도로 덮으므로 뒤에 다시 건다 */
.rn-table--grid tbody tr:is(.active, .is-active) td {
	background: var(--rn-table-active-bg, var(--rn-color-brand-soft));
}

/* 인라인 편집 표 — 칸 안 .rn-input/.rn-select 가 선택 행(tr.active / tr.is-active)에서만 입력칸 모양.
 * 나머지 행은 테두리·화살표·배경을 지워 글자처럼 보인다(토큰만 행 단위로 바꾼다 — 입력 컴포넌트 규칙은 그대로) */
.rn-table--inline-edit tbody tr:not(.active):not(.is-active) {
	--rn-control-border: 1px solid transparent;
	--rn-control-chevron: none;
}

.rn-table--inline-edit tbody tr:not(.active):not(.is-active) :is(.rn-input, .rn-select) {
	background-color: transparent;
	box-shadow: none;
}

.rn-table__cell--left,
.rn-table td.rn-table__cell--left,
.rn-table th.rn-table__cell--left {
	text-align: left;
}

.rn-table__cell--right,
.rn-table td.rn-table__cell--right,
.rn-table th.rn-table__cell--right {
	text-align: right;
}

.rn-table__cell--num {
	font-variant-numeric: tabular-nums;
}

.rn-table__empty {
	padding: 1.5rem 0.75rem !important;
	color: var(--rn-color-text-muted);
	background: transparent !important;
}

/* 빈 목록 안내('신청 내역이 없습니다.' · '등록된 정보가 없습니다.' 등 colspan 한 칸) — 모든 화면 가운데 정렬 (2026-10-13 '내용이 빈 경우엔 가운데 정렬 · 다른 페이지들도').
 * 목록은 '모두 왼쪽 정렬' 규칙(내 정보 표 · 업무관리 목록 · 팝업 표 등 화면마다 특이도가 다르다)이 빈 안내 칸까지 왼쪽으로 끌어가
 * 안내 칸 클래스마다 한 번에 가운데로 되돌린다. 레거시가 쓰는 이름(.no-data · .no_data · DataTables .dataTables_empty)도 함께.
 * :not(#rn-empty-cell) 은 id 한 단계 특이도를 얹는 장치다(그런 id 는 없다) — 화면마다 첫 칸을 왼쪽으로 미는 !important 규칙
 * (예: 본인부담금 .rn-levy .rn-levy__table tbody td:first-child, 0,3,2)이 빈 안내 칸(첫 칸이기도 하다)까지 끌어가 이기게 한다.
 * 그 규칙들이 같이 준 왼쪽 여백(16px)도 가운데 정렬을 한쪽으로 미므로 좌우 여백을 같게 되돌린다 */
body.rn-body :is(td, th):is(.rn-table__empty, .rn-membership__empty, .rn-inquiry__empty, .rn-reco__empty, .rn-prs-status__empty, .rn-prs-history__empty, .rn-evaluation-history__empty, .rn-board-empty, .no-data, .no_data, .cr-status-empty, .login-log-empty-cell, .dataTables_empty):not(#rn-empty-cell) {
	text-align: center !important;
	padding-left: var(--rn-space-3) !important;
	padding-right: var(--rn-space-3) !important;
}

.rn-table .rn-btn {
	white-space: nowrap;
}

/* 모달/페이지 별칭 — 기존 클래스도 공통 룩 유지 */
.rn-modal-table-wrap,
.rn-prs-status__table-wrap,
.rn-evaluation__table-wrap,
.rn-evaluation-history__table-wrap,
.rn-prs-history__table-wrap {
	width: 100%;
	max-width: 100%;
	overflow: auto;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg);
	box-sizing: border-box;
}

.rn-modal-table,
.rn-prs-status__table,
.rn-evaluation__table,
.rn-evaluation-history__table,
.rn-prs-history__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text);
}

.rn-modal-table th,
.rn-modal-table td,
.rn-prs-status__table th,
.rn-prs-status__table td,
.rn-evaluation__table th,
.rn-evaluation__table td,
.rn-evaluation-history__table th,
.rn-evaluation-history__table td,
.rn-prs-history__table th,
.rn-prs-history__table td {
	padding: 0.55rem 0.5rem;
	border-bottom: 1px solid var(--rn-color-border);
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
}

.rn-modal-table thead th,
.rn-prs-status__table thead th,
.rn-evaluation__table thead th,
.rn-evaluation-history__table thead th,
.rn-prs-history__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--rn-table-th-bg); /* 표 머리글 #EDF1F5 (2026-10-12 종전 var(--rn-color-bg-muted)) */
	color: var(--rn-table-th-color); /* 머리글 글자 검정 (2026-10-12 종전 var(--rn-color-text-muted)) */
	font-size: var(--rn-list-head-font-size); /* 15px — 목록 머리글 공통 (2026-10-21) */
	font-weight: var(--rn-font-weight-semibold);
}

.rn-modal-table__empty,
.rn-prs-status__empty,
.rn-evaluation-history__empty,
.rn-prs-history__empty {
	padding: 1.5rem 0.75rem !important;
	color: var(--rn-color-text-muted);
	background: transparent !important;
}

/* 마지막 줄 아래 선 없음 — 감싼 상자(…__table-wrap)의 1px 테두리와 겹쳐 표 바닥만 두 줄(2px)로 두꺼워 보였다
   (2026-10-13 '기초평가 관리 표 하단 선이 두꺼워'). .rn-table 은 같은 규칙이 위에 이미 있다 */
.rn-modal-table tbody tr:last-child td,
.rn-prs-status__table tbody tr:last-child td,
.rn-evaluation__table tbody tr:last-child td,
.rn-evaluation-history__table tbody tr:last-child td,
.rn-prs-history__table tbody tr:last-child td {
	border-bottom: 0;
}

/* 팝업 안 표는 왼쪽 정렬 — 업무관리 목록 공통(왼쪽 정렬, 2026-10-07)과 같게 (2026-10-13 '기초평가 관리 표 내용 왼쪽 정렬 · 다른 곳도').
 * 명시도 (0,2,0) — 위 기본 가운데 정렬(.rn-table th/td · 별칭 표, 0,1,1)은 이기고, 체크박스만 든 칸 가운데 정렬
 * (forms.css td:has(> .rn-check:only-child) 등, 0,2,1)과 각 화면이 열마다 준 정렬(더 구체적인 규칙)은 그대로 둔다.
 * 칸마다 선을 긋는 격자 표(.rn-table--grid — 서식·인쇄형)는 가운데 그대로 */
.rn-modal .rn-table:where(:not(.rn-table--grid)) :where(th, td),
.rn-modal :is(.rn-modal-table, .rn-prs-status__table, .rn-evaluation__table, .rn-evaluation-history__table, .rn-prs-history__table) :where(th, td) {
	text-align: left;
}

/* ==========================================================================
   입력 표 — .rn-form-table (모달 안 '항목 이름 | 값' 표)

   행 머리글(th[scope="row"]) + 항목 칸(td). 레거시 form-info-tb-board 자리다.
   .rn-table 은 목록용이라 가운데 정렬·줄무늬·hover 가 기본인데, 여기는 입력 표라 끈다.

   [전역으로 올린 이유 — 2026-10-01]
   원래 renewal/css/employee_modal.css 에만 있었는데, 그 파일은 종사자 관리 페이지에서만
   실린다. 수급자 관리의 본인부담금 수납관리 모달이 같은 클래스를 쓰기 시작하자
   그 화면에서는 테두리·라벨 배경이 통째로 빠졌다.
   모달 안 입력 표는 화면을 가리지 않는 공용 어법이므로 여기로 올린다.
   행 머리글 폭(7rem)은 기본값이다 — 라벨이 긴 모달은 제 변형 클래스에서 더 준다.
   ========================================================================== */
.rn-modal .rn-form-table {
	table-layout: fixed;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-sm);
	overflow: hidden;
}

/* 표 상자(.rn-table-wrap — 테두리·둥근 모서리) 안에 든 입력 표는 상자가 바깥선이다 — 표가 제 테두리를 또 그리면
 * 상자 선과 표 선 사이에 흰 1px 띠가 생겨 항목 이름 칸(#EDF1F5)이 회색 선에 붙지 않고 떠 보였다
 * (2026-10-13 수급자 연간관리 세부변경 사유서 '연남색 배경이 회색 라인에 딱 맞게 안 칠해진다' — 종사자·본인부담금 팝업 7곳도 같은 구조).
 * 모서리는 상자의 overflow 가 둥글게 자른다 */
.rn-modal .rn-table-wrap > .rn-form-table {
	border: 0;
	border-radius: 0;
}

.rn-modal .rn-form-table th,
.rn-modal .rn-form-table td {
	height: auto;
	padding: var(--rn-space-2);
	border-bottom: 1px solid var(--rn-color-border);
	text-align: left;
	vertical-align: middle;
}

.rn-modal .rn-form-table tbody tr:last-child th,
.rn-modal .rn-form-table tbody tr:last-child td {
	border-bottom: none;
}

/* 항목 이름 칸 — 오른쪽 보더로 값 칸과 가른다 */
.rn-modal .rn-form-table th[scope="row"] {
	width: 7rem;
	border-right: 1px solid var(--rn-color-border);
	background: var(--rn-table-th-bg); /* 표 머리글 #EDF1F5 (2026-10-12 종전 var(--rn-color-bg-soft)) */
	color: var(--rn-color-text);
	font-weight: var(--rn-font-weight-semibold);
	white-space: nowrap;
}

/* 줄무늬·hover 끄기 — 입력 표에서는 고른 칩·입력칸 색이 바탕에 묻힌다 */
.rn-modal .rn-form-table tbody tr:nth-child(even) td,
.rn-modal .rn-form-table tbody tr:hover td {
	background: var(--rn-color-bg);
}

/* ---------- 하단 건수의 숫자 — '조회 : 50건' 의 50 (업무관리 하단 줄 공통, 2026-10-07) ----------
 * renewal/js/count_num.js 가 건수 칸(.rn-prs__counts · .rn-emp__counts · .rn-rfid__counts · .rn-pf__count)의 숫자를 감싼다.
 * '조회 :'·'건' 글자는 보통 굵기. 색은 칸을 따른다(점검필요·미납 등 빨간 칸은 숫자도 빨강) */
.rn-count-num {
	font-weight: var(--rn-font-weight-bold);
}

/* ---------- 글자색 유틸 — 레거시 style.css(.text-blue #002bff · .text-red #ff2c2c · .text-green #20b100 · .text-purple #d800ff ·
 * .text-orange #ff9036 · .text-gray #b3b3b3 · em.date-col1/2)를 리뉴얼 화면에서는 가이드 색으로 (2026-10-07 \'파란 글자 #2768FF · 빨간 글자는 가이드 텍스트 레드\').
 * 수급자 관리(prs.css .rn-prs .text-*)와 같은 짝: 파랑 → 정보 #2768FF · 빨강/보라(해지·사망) → 위험 텍스트 #D50136 · 초록 → 성공 텍스트 #006E18 ·
 * 주황 → 브랜드 · 회색 → 흐린 글자 #8E8E8E · 검정 → 제목 글자 #1D1D1D. body.rn-body 를 앞에 붙여 레거시(뒤에 실려도)를 이긴다 */
body.rn-body .text-blue { color: var(--rn-color-info); }
body.rn-body .text-red,
body.rn-body .text-purple { color: var(--rn-color-danger-text); }
body.rn-body .text-green { color: var(--rn-color-success-text); }
body.rn-body .text-orange { color: var(--rn-color-brand); }
body.rn-body .text-gray { color: var(--rn-color-text-subtle); }
body.rn-body .text-black { color: var(--rn-color-text); }
body.rn-body table td em.date-col1 { color: var(--rn-color-brand); }
body.rn-body table td em.date-col2 { color: var(--rn-color-danger-text); }