/**
 * 리뉴얼 공통 모달 셸 + 기관 일정 모달
 * - 수치·색상은 var(--rn-*)만 사용
 */

body.rn-modal-open {
	overflow: hidden;
}

/* ---------- Shell ---------- */
/* [중앙 정렬은 flex 로 한다 — 2026-10-01]
   예전엔 .modal_body 를 `top:50%; left:50%; transform: translate(-50%,-50%)` 로 앉혔다.
   그러면 모달의 폭·높이가 홀수일 때 -50% 가 **반픽셀**이 되는데,
   transform 은 합성 단계에서 적용돼 픽셀 격자에 반올림되지 않는다 —
   1px 테두리와 글자가 두 물리 픽셀에 걸쳌 그려져 '퍼져' 보였다
   (예: --md 폭 33.3rem = 532.8px → -50% = 266.4px).
   flex 로 가운데 두면 위치가 레이아웃 단계에서 정해져 픽셀에 스냅된다.
   align-items / justify-content 는 display가 none 일 때는 아무 일도 하지 않는다. */
.rn-modal.modal {
	position: fixed;
	inset: 0;
	z-index: var(--rn-z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--rn-color-overlay);
}

.rn-modal.modal.is-open {
	display: flex;
}

.rn-modal .modal_body {
	/* z-index 를 쓰려면 position 이 있어야 한다(예전엔 absolute 였다) */
	position: relative;
	z-index: calc(var(--rn-z-modal) + 1);
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	width: min(32rem, calc(100vw - 2rem));
	max-height: min(90dvh, 40rem);
	overflow: hidden;
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-sm);
	text-align: left;
}

.rn-modal .modal-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--rn-modal-header-gap);
	flex: 0 0 auto;
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	background: var(--rn-color-bg);
	border-radius: var(--rn-radius-lg) var(--rn-radius-lg) 0 0;
	box-sizing: border-box;
}

/* 타이틀 표준: <h2 class="modal-tit"> (페이지 h1과 구분) */
.rn-modal .modal-header .modal-tit {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-family: var(--rn-font-family);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rn-modal .btn-modal-close {
	position: absolute;
	top: 50%;
	right: var(--rn-space-4);
	width: 2rem;
	height: 2rem !important;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	/* X 는 공통 --rn-icon-close(조금 두꺼운 선, 2026-10-12 종전 ic_close.png). 마우스를 올려도 바탕은 그대로 — 회색 바탕을 뺐다 (2026-10-12) */
	background: transparent var(--rn-icon-close) center / 1rem no-repeat !important;
	cursor: pointer;
	transform: translateY(-50%);
}

/* 리뉴얼 화면 안의 다른 팝업 닫기도 같은 X 그림 · 호버 바탕 없음 (2026-10-12 '모든 팝업')
 * - .btn-modal-close(rn-modal 밖 — 레거시 assets/css/modal.css 의 ic_close.png !important 를 특이도로 넘는다)
 * - 레거시 마크업 팝업의 .md-ico-close(레거시 ico-close-dark.svg 또는 화면 CSS 의 '×' 글자 — 글자는 각 화면 CSS 에서 지웠다)
 * - 기관·업무수행일지 팝업의 .wl-modal-close · 롱텀 계획서 가져오기의 .wl-ltplan-close('×' 글자 버튼 — 글자를 숨기고 그림으로) */
.rn-body .btn-modal-close,
.rn-body .md-ico-close {
	background-color: transparent !important;
	background-image: var(--rn-icon-close) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 1rem !important;
	opacity: 1 !important;
}

.rn-body .btn-modal-close:hover,
.rn-body .md-ico-close:hover {
	background-color: transparent !important;
	opacity: 1 !important;
}

.rn-body .wl-modal-close,
.rn-body .wl-ltplan-close {
	background: transparent var(--rn-icon-close) center / 1rem no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
}

.rn-body .wl-modal-close:hover,
.rn-body .wl-ltplan-close:hover {
	background-color: transparent !important;
}

.rn-modal .modal-section {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--rn-space-4) var(--rn-space-5);
	overflow-y: auto;
}

.rn-modal .modal-footer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: var(--rn-space-2);
	padding: var(--rn-space-4) var(--rn-space-5);
	border-top: 0; /* 하단 버튼 위 구분선 없음 — 모든 팝업 공통 (2026-10-12) */
	box-sizing: border-box;
}

.rn-modal .modal-footer .rn-btn {
	width: auto;
}

/* 하단 버튼 줄 위 구분선 — 모든 팝업에서 뺀다 (2026-10-12 '모든 모달 디자인에서'). 리뉴얼 화면 안의 레거시 마크업 팝업
   (assets/css/modal.css 의 .setting-modal/.sign-modal/.cal-modal … .modal-footer · .md-bottom · 기관 연간기록 .iyr-modal-foot)도
   여기서 지운다 — 레거시 파일이 뒤에 로드돼 같은 특이도(0,2,0)로는 지므로 body.rn-body 로 (0,3,1) 을 만든다 */
body.rn-body :is(.modal, .md-modal, .rn-modal, .md-modal-view) :is(.modal-footer, .md-bottom, .iyr-modal-foot) {
	border-top: 0;
}

/* 하단 버튼 폭 — 주 동작([저장]·[확인]·[등록] 등 주황 채움)을 [닫기] 같은 보조 버튼보다 넓게 해 눈에 먼저 띄게 한다 (2026-10-12 '모든 모달 통일').
   보조 64px · 주 동작 96px 이상(글자가 길면 그만큼 넓어진다). 리뉴얼 팝업(.rn-btn--primary / --ghost)과
   레거시 마크업 팝업(.btn-db.btn-bottom = 저장 · .btn-db.btn-modal = 닫기)을 같이 잡는다. 삭제(왼쪽)는 보조 폭 */
body.rn-body :is(.modal, .md-modal, .rn-modal, .md-modal-view) :is(.modal-footer, .md-bottom, .iyr-modal-foot) > :is(.rn-btn, .btn-db) {
	min-width: 4rem;
}

body.rn-body :is(.modal, .md-modal, .rn-modal, .md-modal-view) :is(.modal-footer, .md-bottom, .iyr-modal-foot) > :is(.rn-btn--primary, .btn-db.btn-bottom:not(.delete):not(.rn-btn--ghost):not(.rn-btn--danger)) {
	min-width: 6rem;
}

/* 삭제 = 왼쪽 / 닫기 → 저장(확인) = 오른쪽 묶음 */
.rn-modal .modal-footer > .rn-btn--danger {
	margin-right: auto;
}

/* ---------- Default message (항상 다른 모달 위) ---------- */
.rn-modal.default-modal {
	z-index: calc(var(--rn-z-modal) + 50);
}

.rn-modal.default-modal .modal_body {
	z-index: calc(var(--rn-z-modal) + 51);
	width: min(24rem, calc(100vw - 2rem));
	max-height: none;
	height: auto;
}

.rn-modal.default-modal .modal-section {
	padding: var(--rn-space-5) var(--rn-space-5);
	text-align: center;
	font-size: var(--rn-font-size-md);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
}

.rn-modal.default-modal .dont-see {
	display: none;
	margin-right: auto;
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
}

.rn-modal.default-modal .modal-footer {
	justify-content: center;
}

/* ---------- 공용 확인 모달 (openRnConfirm — 기본 confirm 대체, 2026-10-13) ----------
 * 기본 confirm 처럼 **무엇보다 위**여야 한다. 레거시 모달이 ModalManager 2000~, 현금영수증 모달 10001~10008,
 * 진행 오버레이 10000, 일부 99999 까지 쓴다(2026-10-13 grep). 토큰 계산으로는 못 따라가 절대값으로 둔다 —
 * 그 아래에 깔리면 보이지 않는 모달이 ESC·포커스만 붙잡아 화면이 멈춘 것처럼 된다(qa-ui B2). */
.rn-modal.rn-confirm-modal {
	z-index: 100000;
}

.rn-modal.rn-confirm-modal .modal_body {
	z-index: 100001;
	width: min(26rem, calc(100vw - 2rem));
	max-height: none;
	height: auto;
}

/* 본문은 textContent 로 넣는다 — 기존 confirm 문구의 \n 을 줄바꿈으로 살린다 */
.rn-modal.rn-confirm-modal .rn-confirm-modal__msg {
	margin: 0;
	max-height: min(60dvh, 28rem);
	overflow-y: auto;
	white-space: pre-line;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 보조 문구(openRnConfirm options.note) — 본문 아래 작은 회색 한 줄 (2026-10-29) */
/* 선택자를 한 단계 높인다 — 뒤쪽 .rn-modal--alert .modal-section p { margin: 0 } 이 위 여백을 지운다 */
.rn-modal.rn-confirm-modal .modal-section p.rn-confirm-modal__note {
	margin: var(--rn-space-3) 0 0;
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-text-detail-s); /* 13 — Detail(부가 정보) */
	white-space: pre-line;
	word-break: keep-all;
}
/* 강조 보조 문구(options.noteStrong) — 꼭 읽어야 하는 안내(예: 공단 등록 뒤 통보는 롱텀에서 직접) (2026-11-09) */
.rn-modal.rn-confirm-modal .modal-section p.rn-confirm-modal__note--strong {
	padding: var(--rn-space-2) var(--rn-space-3);
	border: 1px solid var(--rn-color-danger-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger-text);
	font-size: var(--rn-text-body-s);
	font-weight: var(--rn-font-weight-bold);
}
.rn-modal.rn-confirm-modal .rn-confirm-modal__note[hidden] {
	display: none;
}

/* 공용 규칙(.modal-footer > .rn-btn--danger 왼쪽 정렬)은 '삭제 + 닫기/저장' 묶음용이다 —
   확인 모달의 위험 [확인]은 [취소] 오른쪽에 그대로 둔다 */
.rn-modal.rn-confirm-modal .modal-footer > .rn-btn--danger {
	margin-right: 0;
}

/* ---------- Membership urge (openUrge) ---------- */
.rn-modal.urge-modal {
	z-index: calc(var(--rn-z-modal) + 80);
}
.rn-modal.urge-modal.is-open {
	display: flex !important;
}
.rn-modal.urge-modal .modal_body {
	width: min(26rem, calc(100vw - 2rem));
	height: auto;
	max-height: none;
	z-index: calc(var(--rn-z-modal) + 81);
}

/* 2026-11-11 디자인: 머리줄 없이 아이콘 → 제목 → 설명 → 같은 폭 버튼 두 개(views/renewal/modal/urge.php).
   .rn-modal--alert 의 가운데 정렬·여백보다 특이도가 높아(0,3,0+) 링크 순서와 무관하게 이긴다 */
.rn-modal.urge-modal .modal-section.rn-urge {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--rn-space-8) var(--rn-space-6) var(--rn-space-5);
	text-align: center;
	color: var(--rn-color-text);
}

/* 닫기 X — 공용 규칙은 머리줄 세로 가운데(top:50%)라 머리줄이 없는 이 창에선 오른쪽 위 모서리로 옮긴다 */
.rn-modal.urge-modal .btn-modal-close.rn-urge__close {
	top: var(--rn-space-3);
	right: var(--rn-space-3);
	z-index: 1;
	transform: none;
}

.rn-modal.urge-modal .rn-urge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--rn-space-4);
	border-radius: 50%;
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

.rn-modal.urge-modal .rn-urge__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.rn-modal.urge-modal .modal-section .rn-urge__title {
	margin: 0;
	font-family: var(--rn-font-family);
	font-size: var(--rn-text-title-m);
	font-weight: var(--rn-font-weight-bold);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text-title);
	word-break: keep-all;
}

.rn-modal.urge-modal .modal-section p.rn-urge__desc {
	margin: var(--rn-space-2) 0 0;
	font-size: var(--rn-text-body-s);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text-muted);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 버튼 둘을 같은 폭으로 꽉 채운다 — 공용 최소 폭(6rem/4rem)보다 넓어진다 */
.rn-modal.urge-modal .modal-footer.rn-urge__actions {
	justify-content: stretch;
	padding: 0 var(--rn-space-6) var(--rn-space-6);
}

.rn-modal.urge-modal .modal-footer.rn-urge__actions > .rn-btn {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- Site shortcut ---------- */
.rn-modal.siteadd-modal .modal_body {
	width: min(28rem, calc(100vw - 2rem));
	height: auto;
	max-height: min(90dvh, 28rem);
}

.rn-modal.siteadd-modal .modal-section label {
	display: block;
	margin-bottom: var(--rn-space-1);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
}

.rn-modal.siteadd-modal .modal-section > div {
	margin-bottom: var(--rn-space-3);
}

.rn-modal.siteadd-modal .modal-section .rn-input {
	width: 100%;
}

/* ---------- Todo ---------- */
.rn-modal.todo-modal .modal_body {
	width: min(28rem, calc(100vw - 2rem));
	height: min(70dvh, 36rem);
}

.rn-modal.todo-modal .todo-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--rn-space-1) var(--rn-space-2);
	margin-bottom: var(--rn-space-3);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
}

.rn-modal.todo-modal .todo-num {
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
}

/* 빈 상태 안내는 남는 높이 가운데 — 위에 붙어 있으면 아래가 텅 비어 보였다 (2026-10-15).
 * 보이기 · 숨기기는 schedule.js · institution.js 가 인라인 display('' | none)로 한다 — '' 일 때 아래 flex 가 산다 */
.rn-modal.todo-modal .modal-section {
	display: flex;
	flex-direction: column;
}

.rn-modal.todo-modal .empty-area {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	margin-bottom: 0;
}

.rn-modal.todo-modal .empty-box {
	/* 빈 상태 — 점선 상자 · 연남색 바탕 · 주황 강조 대신 가운데 안내 글 두 줄만 (2026-10-15 '일정을 등록해 주세요 부분이 이상하다') */
	padding: var(--rn-space-6) var(--rn-space-4);
	text-align: center;
	line-height: var(--rn-line-height-base);
}

.rn-modal.todo-modal .empty-box p {
	margin: 0;
}

.rn-modal.todo-modal .empty-box__title {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
}

.rn-modal.todo-modal .empty-box__desc {
	margin-top: var(--rn-space-1) !important;
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-subtle);
}

.rn-modal.todo-modal .todolist {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
}

.rn-modal.todo-modal .todo {
	display: flex;
	align-items: flex-start;
	gap: var(--rn-space-2);
	padding: 0.625rem var(--rn-space-3);
	margin: 0;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-todo-tint, var(--rn-color-bg)); /* 카테고리 색 연한 톤(schedule.js addTodo) — 달력 칸 · 이슈 알림과 같은 색. 미분류는 흰 카드 (2026-10-15) */
}

/* 완료한 일정 — 카드도 회색 */
.rn-modal.todo-modal .todo:has(> .todo-txt.active) {
	background: var(--rn-color-bg-muted);
}

.rn-modal.todo-modal .todo .round {
	position: relative;
	flex: 0 0 1.125rem;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.15rem 0 0; /* 첫 줄 글자 중심과 맞춤 */
	padding: 0;
}

.rn-modal.todo-modal .todo .round input[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.rn-modal.todo-modal .todo .round label {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--rn-color-border-strong);
	border-radius: 50%;
	background: var(--rn-color-bg);
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color var(--rn-transition-fast), background var(--rn-transition-fast);
}

.rn-modal.todo-modal .todo .round label:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 0.45rem;
	height: 0.25rem;
	margin: 0;
	border: solid var(--rn-color-bg); /* 흰 체크 — 체크박스 공통(검정 바탕 + 흰 체크, 2026-10-07) */
	border-width: 0 0 1.5px 1.5px;
	opacity: 0;
	transform: translate(-50%, -55%) rotate(-45deg);
}

.rn-modal.todo-modal .todo .round input[type="checkbox"]:checked + label {
	border-color: var(--rn-check-checked-border);
	background: var(--rn-check-checked-bg);
}

.rn-modal.todo-modal .todo .round input[type="checkbox"]:checked + label:after {
	opacity: 1;
}

.rn-modal.todo-modal .todo .todo-txt {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rn-space-2);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 var(--rn-space-2); /* 왼쪽 카테고리 색 막대(schedule.js applyCategoryStyle — border-left 3px)와 글자 사이 8px (2026-10-15 종전 0 — 막대에 글자가 붙었다) */
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
	word-break: break-word;
}

.rn-modal.todo-modal .todo .todo-txt.active {
	color: var(--rn-color-text-subtle);
	text-decoration: line-through;
}

.rn-modal.todo-modal .todo .btn-list-del {
	flex: 0 0 auto;
	align-self: flex-start;
	box-sizing: border-box;
	min-width: 1.75rem;
	min-height: 1.75rem;
	margin: -0.2rem -0.25rem 0 0;
	padding: 0.35rem;
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	/* 그림 · 색은 공통 삭제 아이콘 버튼(buttons.css .rn-icon-del — 빨간 선 휴지통). 종전 회색 PNG · 흐림 45% (2026-10-15) */
	transition: background-color var(--rn-transition-fast);
}

/* 아래 입력 줄 — [카테고리][일정 입력][일정추가] 모두 공통 높이 36px 한 줄. 입력칸을 늘려도(resize) 옆 칸은 위에 붙어 있다.
 * 입력칸은 여러 줄 칸(.rn-textarea, 안쪽 위아래 12px)이라 40px 높이에 글자가 아래로 쏠려 보였다 — 위아래 여백을 (36 - 한 줄)/2 로 (2026-10-15) */
.rn-modal.todo-modal .modal-footer {
	flex-wrap: nowrap; /* institution.css 의 wrap 때문에 [일정추가]가 다음 줄로 떨어졌다 */
	gap: var(--rn-space-2);
	align-items: flex-start;
}

.rn-modal.todo-modal .modal-footer #td_category {
	height: var(--rn-control-min-height);
	min-height: var(--rn-control-min-height);
}

.rn-modal.todo-modal .modal-footer .rn-textarea {
	flex: 1 1 0;
	min-width: 0;
	height: var(--rn-control-min-height);
	min-height: var(--rn-control-min-height);
	max-height: 7.5rem;
	margin: 0;
	padding: calc((var(--rn-control-min-height) - 2px - 1.5em) / 2) var(--rn-control-padding-x);
	font-size: var(--rn-control-font-size-sm);
	line-height: 1.5;
	resize: vertical;
}

.rn-modal.todo-modal .modal-footer .rn-btn {
	flex: 0 0 auto;
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	min-height: var(--rn-control-min-height);
	min-width: 5.5rem;
	padding: 0 var(--rn-space-4);
	font-size: var(--rn-font-size-sm);
}

/* ---------- Batch todo list ---------- */
.rn-modal.batch-todo-modal .modal_body {
	width: min(28rem, calc(100vw - 2rem));
	height: min(70dvh, 36rem);
}

.rn-modal.batch-todo-modal .batch-count {
	margin-bottom: var(--rn-space-3);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-text);
}

.rn-modal.batch-todo-modal .batch-todo-list {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
}

.rn-modal.batch-todo-modal .batch-todo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-space-3);
	padding: var(--rn-space-3);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
}

.rn-modal.batch-todo-modal .todo-title {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text);
}

.rn-modal.batch-todo-modal .todo-cycle {
	margin-top: var(--rn-space-1);
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
}

.rn-modal.batch-todo-modal .btn-batch-modify {
	flex: 0 0 auto;
	min-height: 2rem;
	padding: 0 var(--rn-space-3);
	border: 1px solid var(--rn-color-border-strong);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	font-size: var(--rn-font-size-xs);
	cursor: pointer;
}

/* [반복일정 등록 +] — 공통 등록 버튼(rn-btn--primary rn-btn--plus). 종전 점선 상자 '+ 반복일정을 등록' (2026-10-15).
 * 목록이 있으면 아래 줄 오른쪽, 없으면 판 가운데 안내 글 아래에 크게(.batch-empty) — 버튼 하나만 아래 줄에 있으면 판이 텅 비어 보였다 */
.rn-modal.batch-todo-modal .modal-section {
	display: flex;
	flex-direction: column;
}

.rn-modal.batch-todo-modal .modal-footer .rn-btn {
	min-height: 2.5rem;
	padding: 0 var(--rn-space-5);
	font-size: var(--rn-font-size-sm);
}

.rn-modal.batch-todo-modal .batch-empty {
	display: none;
}

.rn-modal.batch-todo-modal .batch-todo-list:empty + .batch-empty {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-1);
	padding-bottom: 5rem; /* 한가운데보다 조금 위 — 위 '반복일정 0개' 줄 때문에 정가운데면 아래로 쏠려 보였다 (2026-10-15) */
	text-align: center;
	line-height: var(--rn-line-height-base);
}

.rn-modal.batch-todo-modal .batch-empty p {
	margin: 0;
}

.rn-modal.batch-todo-modal .batch-empty__title {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
}

.rn-modal.batch-todo-modal .batch-empty__desc {
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-subtle);
}

.rn-modal.batch-todo-modal .batch-empty__btn {
	margin-top: var(--rn-space-4);
	min-height: 2.75rem;
	padding: 0 var(--rn-space-6);
	font-size: var(--rn-font-size-sm);
}

/* 빈 상태 동안은 아래 줄을 접는다 — 버튼이 가운데에 있다 */
.rn-modal.batch-todo-modal:has(.batch-todo-list:empty) .modal-footer {
	display: none;
}

/* ---------- Regi batch ---------- */
.rn-modal.regi-batch-todo-modal .modal_body {
	width: min(34rem, calc(100vw - 2rem));
	height: auto;
	max-height: min(90dvh, 44rem);
}

.rn-modal.regi-batch-todo-modal .modal-section {
	text-align: left;
}

.rn-modal.regi-batch-todo-modal .rn-batch-form {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-4);
	padding: var(--rn-space-4);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
}

.rn-modal.regi-batch-todo-modal .rn-batch-form__row {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--rn-space-2) var(--rn-space-3);
}

.rn-modal.regi-batch-todo-modal .rn-batch-form__row--stack {
	grid-template-columns: 1fr;
	align-items: stretch;
}

.rn-modal.regi-batch-todo-modal .rn-batch-form__label {
	margin: 0;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
	word-break: keep-all;
}

.rn-modal.regi-batch-todo-modal .rn-batch-form__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-2);
	min-width: 0;
}

.rn-modal.regi-batch-todo-modal .rn-batch-form__fields--range input[type="text"] {
	flex: 1 1 7.5rem;
	min-width: 0;
}

.rn-modal.regi-batch-todo-modal .rn-batch-form__sep {
	flex: 0 0 auto;
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-font-size-sm);
}

/* 반복주기 라디오 → forms.css .rn-radio / .rn-radio-group */

.rn-modal.regi-batch-todo-modal .rn-batch-form__fields--cycle select {
	flex: 0 0 auto;
	min-width: 5.5rem;
}

.rn-modal.regi-batch-todo-modal .rn-textarea {
	width: 100%;
	min-height: 6.5rem;
}

@media (max-width: 479px) {
	.rn-modal.regi-batch-todo-modal .rn-batch-form__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Monthly task ---------- */
.rn-modal.monthly-task-modal .modal_body {
	width: min(36rem, calc(100vw - 2rem));
	max-height: min(90dvh, 44rem);
}

.rn-modal.monthly-task-modal .modal-section {
	overflow-y: auto;
	text-align: left;
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp:not(:first-of-type) {
	margin-top: var(--rn-space-4);
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp h3 {
	margin: 0 0 var(--rn-space-2);
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
	text-align: left;
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp h3 span {
	color: var(--rn-color-brand);
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp ul li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--rn-space-2);
	margin: 0 0 var(--rn-space-2);
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-brand-soft);
	box-shadow: none; /* 그림자 없음 (2026-10-15) */
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text);
	text-align: left;
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp ul li.bg-v2 {
	background: var(--rn-color-bg-soft);
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp ul li .task-mark {
	flex: 0 0 auto;
	color: var(--rn-color-brand);
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp ul li .task-title {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	word-break: keep-all;
}

.rn-modal.monthly-task-modal .modal-section .checklist-wp ul li input[type="checkbox"] {
	flex: 0 0 auto;
	margin-left: auto;
}

.rn-modal.monthly-task-modal .modal-section .empty-checklist {
	display: none;
	padding: var(--rn-space-8) 0;
	text-align: center;
	color: var(--rn-color-text-muted);
}

/* '이달의 업무 준비중입니다.' — 빈 상태 안내 글(일정입력 팝업 .empty-box__title 과 같다: 15px · 보통 굵기 · #555 · 가운데).
   종전 구역 제목(h3)과 같은 18px 굵은 글자 · 왼쪽 정렬이라 너무 컸다 (2026-10-15) */
.rn-modal.monthly-task-modal .modal-section .empty-checklist h3 {
	margin: 0;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
	text-align: center;
}

/* ---------- Shared size / alert / form utilities ----------
 * 페이지 모달은 셸(header/section/footer + rn-btn)을 공통으로 쓰고
 * 너비만 아래 modifier 로 조절한다. 페이지 CSS에서 .modal_body 를
 * 다시 정의하지 않는 것이 원칙이다.
 */
.rn-modal.rn-modal--sm .modal_body {
	width: min(26rem, calc(100vw - 2rem));
	height: auto;
	max-height: min(90dvh, 36rem);
}

.rn-modal.rn-modal--md .modal_body {
	width: min(33.3rem, calc(100vw - 2rem));
	height: auto;
	max-height: min(90dvh, 40rem);
}

.rn-modal.rn-modal--lg .modal_body {
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(90dvh, 44rem);
}

.rn-modal.rn-modal--xl .modal_body {
	width: min(60rem, calc(100vw - 2rem));
	max-height: min(90dvh, 48rem);
}

/* 급여제공직원 변경 모니터링 — 이 한 모달만 폭·높이를 따로 잡는다.
   폼이 길다(변경 정보 4줄 + 기한 안내 + 상담 정보 3줄, textarea 둘). 마크업이
   문서작성 화면과 공용인 파셜(_layout/_change_employee_monitor_modal.php)이라 줄을 줄일 수 없고,
   여백을 조여 담는 방법은 쓰지 않기로 했다(2026-09-29 지시) — 높이 상한을 올려 담는다.
   폭은 --xl(60rem)보다 좁은 48rem 이다 — 한 줄에 라벨+입력 두 쌍이 들어가면서도
   너무 넓게 퍼지지 않는 선(2026-09-29 지시).
   예외를 페이지 CSS 가 아니라 여기 두는 이유는 이 파일 머리말 원칙 그대로다: 셸 크기는 한곳에서 정한다.
   [dvh 를 함께 둔다] 짧은 창에서는 94dvh 가 먼저 걸려 화면을 넘지 않고,
   그때만 modal-section 의 overflow-y:auto 가 스크롤을 준다.
   [폼 폭 계산은 안 건드려도 된다] prs.css 의 입력칸 폭은 percentage 라 이 값에 따라 같이 줄어든다. */
.rn-modal.change-employee-monitor-modal .modal_body {
	width: min(52rem, calc(100vw - 2rem)); /* 2026-10-14 48 → 52rem — 라벨 칸이 6.5rem 으로 넓어져('변경전 종사자' 한 줄) 상담일시·시간 칸 몫을 되찾는다 */
	max-height: min(94dvh, 56rem);
}

/* PDF·미리보기 등 넓은 본문 */
.rn-modal.rn-modal--wide .modal_body {
	width: min(52rem, calc(100vw - 2rem));
	max-height: min(92dvh, 52rem);
}

/* 계약서 등 초대형 폼 */
.rn-modal.rn-modal--2xl .modal_body {
	width: min(72rem, calc(100vw - 2rem));
	max-height: min(92dvh, 56rem);
}

/* 단순 안내(확인/닫기) — default-modal / urge-modal 과 동일 톤 */
.rn-modal.rn-modal--alert .modal-section {
	padding: var(--rn-space-6) var(--rn-space-5);
	text-align: center;
	font-size: var(--rn-font-size-md);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
}

.rn-modal.rn-modal--alert .modal-section p {
	margin: 0;
}

.rn-modal.rn-modal--alert .modal-footer {
	justify-content: flex-end;
}

/* 헤더 보조 액션 — 타이틀 바로 오른쪽 (프리셋·서명설정 등) */
.rn-modal .rn-modal-header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--rn-space-1);
	margin: 0;
}

.rn-modal .modal-header:has(.rn-modal-header-actions) .modal-tit {
	flex: 0 1 auto;
}

.rn-modal .rn-notice {
	margin: 0;
	padding: var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text-muted);
}

.rn-modal .rn-notice p {
	margin: 0;
}

.rn-modal .rn-notice p + p {
	margin-top: 0.25rem;
}

/* ---------- 공통 모달 폼 (수급자 등록·수정 등) ----------
 * 신규 마크업: rn-modal-form__*
 * 레거시 alias: rn-prs-add__* (수급자 관리 등록/수정 모달)
 */
.rn-modal .rn-modal-form__hint,
.rn-modal .rn-prs-add__hint {
	margin: 0 0 var(--rn-space-4);
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand-hover);
	font-size: var(--rn-font-size-sm);
}

/* ---------- 롱텀 가져오기 연월 모달 (.rn-iw — renewal/modal/interworking_month.php) — 2026-10-20 사용자 지시 ----------
 * 수급자 관리 [수급자 및 일정 가져오기] · 종사자 관리 [종사자 및 일정 가져오기] 공용.
 * 안내는 한 줄 — 작은 모달(26rem)에서는 문장(약 370px)이 두 줄로 꺾였다. 모달 폭을 문장 폭에 맞춘다(max-content,
 * 26rem 보다 좁아지지는 않는다 — 글꼴이 달라도 한 줄). 좁은 화면(768 미만)은 창 폭까지만 넓어지고 문장이 줄을 바꾼다.
 * 연월은 달력 위 연·월 표기를 가운데에 — 수급자 상세 서비스 일정 툴바(prs.css .sch_top)와 같은 값:
 * 테두리 없는 19px 굵은 글자 + 작은 꺾쇠(펼침 메뉴는 좁은 판). 양옆 [<] [>] 화살표는 두지 않는다(사용자 지시) */
.rn-modal.rn-iw .modal_body {
	width: max-content;
	min-width: min(26rem, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
}

.rn-iw .rn-iw__hint {
	text-wrap: balance; /* 좁은 화면에서 꺾일 때 두 줄 길이를 고르게 */
}

@media (min-width: 768px) {
	.rn-iw .rn-iw__hint {
		white-space: nowrap;
	}
}

.rn-iw .rn-iw__picker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-2);
	padding: var(--rn-space-2) 0;
}

.rn-iw .rn-iw__select {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	padding: 0 1.125rem 0 var(--rn-space-1);
	border-color: transparent;
	background-color: transparent;
	background-position: right 0.125rem center;
	background-size: 0.75rem;
	color: var(--rn-color-text);
	font-size: var(--rn-text-title-m);
	font-weight: var(--rn-font-weight-bold);
	/* 펼침 메뉴는 보통 글자(15px)로 — 19px 그대로면 메뉴가 연·월 글자보다 넓어진다 (forms.css .rn-select-menu--compact) */
	--rn-select-menu-variant: compact;
}

.rn-iw .rn-iw__select:is(:focus, .is-menu-open) {
	border-color: transparent;
	outline: 0;
	box-shadow: none;
}

.rn-modal .rn-modal__hint {
	margin: 0 0 var(--rn-space-3);
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text-muted);
	line-height: 1.45;
}

/* 기초평가 관리 안내 — 모양(연주황 바탕 · 진한 주황 글자, 테두리 없음)은 위 공통 .rn-modal-form__hint, 여기서는 아래 표와의 간격만 (2026-10-21) */
.rn-modal .rn-evaluation__hint {
	margin: 0 0 var(--rn-space-3);
	line-height: 1.45;
}

/* 기초평가 관리 표 칸 폭 — 세 칸이 1/3 씩이라 짧은 [이력보기] 칸 오른쪽만 크게 비었다(왼쪽 정렬) (2026-10-21 사용자 지시 '오른쪽만 비지 않게 골고루').
   마지막 칸은 단추(63px) + 양옆 안쪽 여백만큼만 — 표 오른쪽 끝 여백이 왼쪽 끝 여백(8px)과 같다.
   남는 폭은 앞 두 칸이 나눠 가져 칸 사이 간격(글자 끝 ~ 다음 칸 글자)이 둘 다 약 48px 로 같다 (실측 내용 폭 105 · 94 · 63px, 표 374px) */
.rn-modal .rn-evaluation__table th:nth-child(1) { width: 41%; }
.rn-modal .rn-evaluation__table th:nth-child(2) { width: 38%; }
.rn-modal .rn-evaluation__table th:nth-child(3) { width: 21%; }

/* 폰 폭 — 위 비율(21%)이면 375 폭 표(301px)의 마지막 칸이 63px 라 머리글 '이력관리'가 '이력관 / 리'로 꺾이고
   [이력보기](63px)가 칸 안쪽 여백만큼 표 밖으로 나가 오른쪽이 잘렸다 (2026-10-22 사용자 지시 '이력관리 1줄 · 안 잘리게').
   날짜·이력관리 칸은 내용만큼(한 줄, 1% + nowrap — 자동 칸 나눔에서 가장 좁게), 남는 폭은 항목 칸이 받는다.
   칸 사이 안쪽 여백은 8 → 5px(표 양 끝은 8px 그대로), [이력보기] 좌우 여백 8 → 6px(63 → 59px).
   360 폭(표 286px)도 항목 칸 글자 자리 102px 로 '급여 제공 계획서'(98px)까지 한 줄 — 더 좁은 폰은 항목 이름만 낱말 단위로 줄을 바꾼다 */
@media (max-width: 720px) {
	.rn-modal .rn-evaluation__table {
		table-layout: auto;
	}

	.rn-modal .rn-evaluation__table :is(th, td) {
		padding-right: 0.3125rem;
		padding-left: 0.3125rem;
	}

	.rn-modal .rn-evaluation__table .open_evaluation_history {
		padding-right: 0.375rem;
		padding-left: 0.375rem;
	}

	.rn-modal .rn-evaluation__table :is(th, td):first-child {
		padding-left: 0.5rem;
		word-break: keep-all;
	}

	.rn-modal .rn-evaluation__table :is(th, td):last-child {
		padding-right: 0.5rem;
	}

	.rn-modal .rn-evaluation__table th:nth-child(1) { width: auto; }

	.rn-modal .rn-evaluation__table :is(th, td):is(:nth-child(2), :nth-child(3)) {
		width: 1%;
		white-space: nowrap;
	}
}

.rn-modal .rn-modal-form__field,
.rn-modal .rn-prs-add__field {
	display: flex;
	align-items: flex-start;
	gap: var(--rn-space-3);
	margin-bottom: var(--rn-space-3);
}

.rn-modal .rn-modal-form__label,
.rn-modal .rn-prs-add__label {
	flex: 0 0 6.5rem;
	padding-top: 0.45rem;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text);
}

.rn-modal .rn-modal-form__label.flag-required::after,
.rn-modal .rn-prs-add__label.flag-required::after,
.rn-modal .rn-prs-status__label.flag-required::after, /* 수급현황 특이사항·적용일 (2026-11-05 레거시 필수 표시) */
.rn-modal .rn-register-offerer__label.flag-required::after { /* 서비스 제공자 등록 관리자·제공자·근무 시간 (2026-11-05 레거시 필수 표시) */
	content: ' *';
	color: var(--rn-color-danger-text);
}

.rn-modal .rn-modal-form__control,
.rn-modal .rn-prs-add__control {
	flex: 1 1 auto;
	min-width: 0;
}

/* 라디오·체크 줄 — 입력칸(2.25rem)과 같은 높이를 준다.
   .rn-radio-group 은 inline-flex 라 내용 높이(약 19px)만 차지하는데, 옆 라벨은
   입력칸 글자에 맞추려고 padding-top:0.45rem 을 갖고 있다. 그래서 라디오만 위로
   붙어 보였다. 같은 높이 상자를 주고 가운데 정렬하면 라벨과 가로줄이 맞는다.
   (성별·기타정보처럼 컨트롤이 라디오/체크뿐인 줄 전부에 해당한다) */
/* 칸 하나뿐인 줄의 날짜칸 — 위아래 줄(수급자명·연락처·주소) 입력칸처럼 칸 끝까지. 날짜칸 기본 폭(8.5rem)이면 같은 열에서 혼자 짧았다
   (2026-10-21 사용자 지시 '모달 열 흐트러지지 않게' — 수급자 등록/수정 생년월일 136 → 377px). 날짜 둘(~)이 든 칸은 그대로 */
.rn-modal :is(.rn-modal-form__control, .rn-prs-add__control) > .rn-input--date:only-child {
	width: 100%;
	max-width: none;
}

.rn-modal .rn-modal-form__control.rn-radio-group,
.rn-modal .rn-prs-add__control.rn-radio-group {
	display: flex;
	align-items: center;
	min-height: var(--rn-control-min-height-sm);
}

.rn-modal .rn-modal-form__control--split,
.rn-modal .rn-prs-add__control--split {
	display: flex;
	gap: var(--rn-space-2);
	align-items: center;
}

.rn-modal .rn-modal-form__control--split .rn-input,
.rn-modal .rn-prs-add__control--split .rn-input {
	flex: 1 1 auto;
}

.rn-modal .rn-modal-form__control--split .rn-select,
.rn-modal .rn-prs-add__control--split .rn-select {
	flex: 0 0 7.5rem;
}

.rn-modal .rn-modal-form__addr,
.rn-modal .rn-prs-add__addr {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
}

.rn-modal .rn-modal-form__post,
.rn-modal .rn-prs-add__post {
	display: flex;
	gap: var(--rn-space-2);
	align-items: center;
	width: 100%;
}

.rn-modal .rn-modal-form__post .rn-input,
.rn-modal .rn-prs-add__post .rn-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/* 우편번호 — 공통 검색칸(.rn-search, 2026-11-04 종전 칸 + [검색] 버튼). 읽기 전용 칸이라 눌러서 검색을 띄운다 — 손가락 커서 */
.rn-modal :is(.rn-modal-form__post, .rn-prs-add__post).rn-search {
	display: block;
}

.rn-modal :is(.rn-modal-form__post, .rn-prs-add__post) .rn-search__input[readonly] {
	cursor: pointer;
}

/* 글자 · 왼쪽 여백은 아래 주소 · 상세주소 칸(.rn-input--sm)과 같게 — 세 칸 글자가 한 줄로 */
.rn-modal :is(.rn-modal-form__post, .rn-prs-add__post) .rn-search__input {
	padding-left: var(--rn-control-padding-x-sm);
	font-size: var(--rn-control-font-size-sm);
}

.rn-modal .rn-modal-form__post .rn-btn,
.rn-modal .rn-prs-add__post .rn-btn {
	flex: 0 0 auto;
	align-self: stretch;
	min-height: var(--rn-control-min-height-sm);
	height: var(--rn-control-min-height-sm);
	box-sizing: border-box;
	padding-top: 0;
	padding-bottom: 0;
}

/* 수급자 기본정보 수정 — 폰 폭에서 본문 스크롤 없이 한 화면에 (2026-10-29 사용자 지시 '모바일에서 스크롤 안생기게').
   360×640 실측: 내용 655px > 판 상한 576px(90dvh). 줄인 것 —
   · 판 상한 90dvh → 창 높이 − 2rem(폭과 같은 위아래 16px 여백): 576 → 608px
   · 라벨 칸 6.5 → 5.5rem(가장 긴 '인정번호/등급' 83px): 입력칸 162 → 178px 이라 급여정보 체크 둘(182px)이 한 줄 — 두 줄 꺾임 24px 이 사라진다
   · 줄 사이 12 → 8px, 마지막 줄 아래 여백 없음
   → 595px. 안내 문구·칸 높이(36px)·글자 크기는 그대로.
   인정번호/등급은 한 줄에 두면 등급 상자(7.5rem)가 인정번호 칸(60px — 11자리에 106px 필요)보다 커 보이고 번호가 잘렸다 →
   주소처럼 두 줄로 쌓아 둘 다 칸 끝까지 (같은 날 사용자 지시 '스크롤 생기게 하고 따로 두거나'). 그 44px 만큼은 짧은 폰에서 본문이 스크롤된다 */
@media (max-width: 720px) {
	.rn-modal#modal_modify_prs .modal_body {
		max-height: calc(100dvh - 2rem);
	}

	/* 스크롤될 때 PC 좁은 창의 스크롤바(10px)가 입력 폭을 먹어 급여정보 '인지활동'이 다음 줄로 꺾였다 —
	   오른쪽 안쪽 여백에서 스크롤바 폭만큼 빼고 자리를 늘 비워 두어 스크롤 여부와 상관없이 입력 폭이 같다(상태변화 기록지 .prs-record-mng 와 같은 수) */
	#modal_modify_prs .modal-section {
		padding-right: calc(var(--rn-space-5) - 0.625rem);
		scrollbar-gutter: stable;
	}

	#modal_modify_prs .rn-prs-add__field {
		margin-bottom: var(--rn-space-2);
	}

	#modal_modify_prs .rn-prs-add__field:last-child {
		margin-bottom: 0;
	}

	#modal_modify_prs .rn-prs-add__label {
		flex-basis: 5.5rem;
	}

	#modal_modify_prs .rn-prs-add__control--split {
		flex-direction: column;
		align-items: stretch;
	}

	#modal_modify_prs .rn-prs-add__control--split > :is(.rn-input, .rn-select) {
		flex: none;
		width: 100%;
	}
}

/* 손가락 기기(겹쳐 그리는 스크롤바 — 자리를 차지하지 않는다)는 오른쪽 여백을 그대로 */
@media (max-width: 720px) and (hover: none) {
	#modal_modify_prs .modal-section {
		padding-right: var(--rn-space-5);
	}
}

/* 스크롤 테이블 — 공통 tables.css(.rn-table / 별칭) + 모달 높이만 보정 */
.rn-modal .rn-modal-table-wrap,
.rn-modal .rn-prs-status__table-wrap,
.rn-modal .rn-evaluation__table-wrap,
.rn-modal .rn-evaluation-history__table-wrap,
.rn-modal .rn-prs-history__table-wrap {
	max-height: min(50vh, 420px);
}

/* ---------- 문자 이용권 결제 / 토스 / 환불규정 ---------- */
.rn-modal.rn-point-charge {
	z-index: calc(var(--rn-z-modal) + 25);
}

.rn-modal.rn-point-charge .modal_body {
	z-index: calc(var(--rn-z-modal) + 26);
}

.rn-modal.rn-point-toss {
	z-index: calc(var(--rn-z-modal) + 30);
}

.rn-modal.rn-point-toss .modal_body {
	z-index: calc(var(--rn-z-modal) + 31);
	width: min(36rem, calc(100vw - 2rem));
	max-height: min(92dvh, 48rem);
}

.rn-modal.rn-point-refund {
	z-index: calc(var(--rn-z-modal) + 35);
}

.rn-modal.rn-point-refund .modal_body {
	z-index: calc(var(--rn-z-modal) + 36);
	width: min(44rem, calc(100vw - 2rem));
	max-height: min(92dvh, 52rem);
}

.rn-modal.rn-point-charge .rn-point-charge__rows {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.rn-modal.rn-point-charge .rn-point-charge__row {
	display: flex;
	align-items: center;
	gap: var(--rn-space-3);
	padding: var(--rn-space-3) 0;
	border-bottom: 1px solid var(--rn-color-border);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
}

.rn-modal.rn-point-charge .rn-point-charge__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.rn-modal.rn-point-charge .rn-point-charge__row:first-child {
	padding-top: 0;
}

.rn-modal.rn-point-charge .rn-point-charge__label {
	flex: 0 0 5.5rem;
	margin: 0;
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text);
}

.rn-modal.rn-point-charge .rn-point-charge__value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--rn-color-text-muted);
}

.rn-modal.rn-point-charge .rn-point-charge__row .rn-select {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.rn-modal.rn-point-charge .modal-footer #open_refund_regulation_modal {
	margin-right: auto;
}

.rn-modal.rn-point-toss .rn-point-toss__widgets {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-4);
	min-height: 12rem;
}

.rn-modal.rn-point-refund .rn-point-refund__body {
	padding: 0;
	overflow: hidden;
}

.rn-modal.rn-point-refund .rn-point-refund__body iframe {
	display: block;
	width: 100%;
	height: min(55dvh, 34rem);
	border: 0;
	background: var(--rn-color-bg);
}

/* ---------- 알리고 출력/발송 피커 (연월·출력발송 선택) ---------- */
.rn-modal.rn-aligo-picker .rn-aligo-picker__ym {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-2);
}

.rn-modal.rn-aligo-picker .rn-aligo-picker__ym .rn-select {
	flex: 1 1 0;
	min-width: 0;
	max-width: 8rem;
}

/* 출력 / 발송 라디오 사이 32px (2026-10-21 사용자 지시 '출력이랑 발송 사이 간격이 너무 좁다', 종전 16px). 접히면 줄 사이 12px */
.rn-modal.rn-aligo-picker .rn-aligo-picker__print-send {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--rn-space-3) var(--rn-space-8);
}

/* ---------- 짧은 선택 팝업 공통 — 내용 위아래 여백 ----------
 * 한두 줄짜리 선택(출력 / 발송 선택 · 연월 선택 · 일괄 출력 연월 · 롱텀 가져오기 연월) 팝업은 공통 본문 여백(위아래 16px)이면
 * 내용이 머리 줄과 [닫기]·[확인] 사이에 끼어 답답했다 (2026-10-21 사용자 지시 '닫기 버튼이랑 내용 사이도 더 넓혀줘, 이런 형식의 다른 모달도').
 * 위 24px · 아래 32px — 내용 ~ 버튼 48px (종전 32px) */
.rn-modal:is(.rn-aligo-picker, .rn-bulk-print, .rn-iw) .modal-section {
	padding-top: var(--rn-space-6);
	padding-bottom: var(--rn-space-8);
}

/* 선택지 글자 16px · 굵게 — 팝업의 유일한 내용이라 눈에 띄게 (2026-10-21 사용자 지시 '라디오 옆 글자 좀 더 두껍게, 16 정도로', 종전 14px 보통) */
.rn-modal.rn-aligo-picker .rn-print-send-option {
	flex: 0 1 auto;
	max-width: 100%;
	color: var(--rn-color-text);
	font-size: 1rem;
	font-weight: var(--rn-font-weight-semibold);
}

/* 출력 / 발송 선택 팝업 폭 32rem — 세 가지(출력 · 발송(카카오톡 / 문자) · 발송(우편 / 직접))가 32px 간격으로 한 줄에 든다
   (16px 굵은 글자로 약 450px — 28rem(안 폭 408px)이면 셋째가 다음 줄로 접힌다. 2026-10-21 종전 28rem · 14px) */
.rn-modal.rn-aligo-picker:has(.rn-aligo-picker__print-send) .modal_body {
	width: min(32rem, calc(100vw - 2rem));
}

/* 레거시 팝업(.md-modal-view — z-index 2000, longterm/css/modal.css) 위에서 연 알림톡 · 출력 계열 팝업은 그 위에 뜬다 (2026-10-22 사용자 지적
   '본인부담금 수납 이력에서 [수납영수증]을 누르면 출력 발송 선택 팝업이 뒤에 뜬다'). 이 계열은 --rn-z-modal(1000)에 더한 값을 쓰므로
   레거시 팝업이 열려 있는 동안만 기준값을 2100 으로 올린다 — 서로의 순서(발송 +10 < 선택 +20 < 결제 +25 < 미리보기 +30 … < 안내 +50)는 그대로다.
   레거시 팝업이 없으면 종전 값 그대로라 rn 팝업끼리의 겹침은 바뀌지 않는다 */
/* 직원 교육 일지(.education-register-modal — 종사자 연간관리 교육 탭) 위에서 연 경우 — [교육정보 발송]이 뒤에 떴다 (2026-10-26 사용자 지적).
   그 화면은 교육 팝업 묶음(.edu-embed-scope)에 position:relative · z-index:1600 을 건다(longterm/employee_year_record/_styles.php — 연간 교육관리 패널 1500 위).
   교육 일지는 jQuery fadeIn 으로 열리고 그때 .rn-legacy-open 이 붙는다(institution_modal.js openModal · closeModal). 기준값 1700 — 묶음(1600) 위, 레거시 팝업(2000) 아래.
   레거시 팝업까지 열려 있으면 바로 아래 2100 규칙이 이기도록 그 앞에 둔다(특이도가 같아 뒤 규칙이 이긴다).
   :has() 안에 [style*=…] 같은 style 속성 조건을 쓰지 않는다 — 문서 어디서든 인라인 style 이 바뀔 때마다 body 전체를 다시 계산해
   행마다 show/hide 하는 목록(RFID 점검 tableSearch)이 십수 초 멈췄다 (2026-10-29) */
body.rn-body:has(.edu-embed-scope .education-register-modal.rn-legacy-open) .rn-modal:is(.rn-aligo-send, .rn-aligo-picker, .rn-aligo-preview, .rn-point-charge, .rn-point-toss, .rn-point-refund, .stale-interworking-modal, .default-modal, .rn-sms-pause) {
	--rn-z-modal: 1700;
}

body.rn-body:has(.md-modal-view.md-show) .rn-modal:is(.rn-aligo-send, .rn-aligo-picker, .rn-aligo-preview, .rn-point-charge, .rn-point-toss, .rn-point-refund, .stale-interworking-modal, .default-modal, .rn-sms-pause) {
	--rn-z-modal: 2100;
}

/* 기록관리(레거시 #modal_prs_record_management) → [직원변경 모니터링 관리]로 여는 모니터링 확인 · 등록 팝업도 그 위에 뜬다
   (2026-10-27 사용자 지적 '모달이 뒤에 뜬다'). 진입: prs_records__.js #prs_record_monitoring_btn → prs_monitoring.js handleChipClick */
body.rn-body:has(.md-modal-view.md-show) .rn-modal:is(.rn-cem-confirm, #modal_change_employee_monitor) {
	--rn-z-modal: 2100;
}

/* 멤버십 안내(openUrge)도 레거시 팝업 위에 — 미결제 기관이 기록관리(레거시 #modal_prs_record_management)의 [이력보기]를 누르면
   안내가 기록관리 뒤에 깔렸다(2026-11-11, renewal/js/panel_lock.js PANEL_FEATURE_BTN). 레거시 팝업이 없으면 종전 값 그대로 */
body.rn-body:has(.md-modal-view.md-show) .rn-modal.urge-modal {
	--rn-z-modal: 2100;
}

/* 급여제공계획서 상세(#modal_pof_plnpp_detail — pof.css z-index 3300, 유선안내 3450) 위에서 연 경우 — [계획서 발송]이 뒤에 떴다 (2026-10-26 사용자 지적).
   계획서는 openRnModal 로 열려 is-open 이 붙는다. 기준값 3500 — 계획서 · 유선안내 · 출력 미리보기(3400) 위, 달력(12000) · 서명(13000) 아래.
   [문자 발송 일시 중단 안내](.rn-sms-pause)도 이 계열 목록에 넣었다 — 문자 전용 · 검수 중 서식이면 발송 팝업 대신 이 안내가 뜨는데(aligo_modal.php
   openAligoSendModal → openSmsPauseModal) 목록에 없어 1040 으로 계획서 뒤에 숨어 '눌러도 아무것도 안 보였다' (2026-10-26 사용자 재지적). 위 · 아래 다른 규칙도 같다 */
body.rn-body:has(#modal_pof_plnpp_detail.is-open) .rn-modal:is(.rn-aligo-send, .rn-aligo-picker, .rn-aligo-preview, .rn-point-charge, .rn-point-toss, .rn-point-refund, .stale-interworking-modal, .default-modal, .rn-sms-pause) {
	--rn-z-modal: 3500;
}

/* 상태변화 기록지(#modal_prs_status_change — 열 때 prs_records__.js openPrsStatusChange 가 인라인 z-index 3500) 위에서 연 경우도 그 위에 —
   [작성 및 서명요청]을 누르면 「상태변화기록지 서명 요청 발송」(executePrintSend → .rn-aligo-send)이 기록지 뒤에 떴다 (2026-11-09 사용자 지적).
   위의 레거시 팝업 규칙(2100)으로는 3500 을 못 넘는다. 기준값 3600 — 기록지(3500) 위, 그 위 확인 · 서명 보기 대역(4500 · 5000) 아래 */
body.rn-body:has(#modal_prs_status_change.md-show) .rn-modal:is(.rn-aligo-send, .rn-aligo-picker, .rn-aligo-preview, .rn-point-charge, .rn-point-toss, .rn-point-refund, .stale-interworking-modal, .default-modal, .rn-sms-pause) {
	--rn-z-modal: 3600;
}

/* 기관 연간관리 문서 서식 팝업(.iyr-institution-form-modal — 회의록 · 복지포상 · 사례관리, z-index 3000) 위에서 연 경우도 그 위에 (2026-10-26 사용자 지적
   '운영위원회 회의록에서 [전자서명 요청]을 누르면 팝업이 뒤에 뜬다' — 알림톡 발송 팝업이 1010 이라 3000 판 뒤에 깔렸다).
   서식 팝업은 jQuery fadeIn 으로 열리고 그때 .rn-legacy-open 이 붙는다(views/longterm/institution_year_record/_*_page.php · employee_picker.js).
   종전에는 '인라인 display:none 이 없는 서식 팝업'으로 봤다 — style 속성 조건은 위 교육 일지 규칙 주석과 같은 이유로 쓰지 않는다 (2026-10-29).
   기준값 4300 — 위원 · 참석자(4100) · 출력(4200) 위, 달력(12000) · 서명(13000) 아래. 위 규칙과 특이도가 같아 뒤에 둔다(둘 다 맞으면 이 값) */
body.rn-body:has(.iyr-institution-form-modal.rn-legacy-open) .rn-modal:is(.rn-aligo-send, .rn-aligo-picker, .rn-aligo-preview, .rn-point-charge, .rn-point-toss, .rn-point-refund, .stale-interworking-modal, .default-modal, .rn-sms-pause) {
	--rn-z-modal: 4300;
}

/* 알리고 본 발송 모달 위에 뜨도록 */
.rn-modal.rn-aligo-picker {
	z-index: calc(var(--rn-z-modal) + 20);
}

.rn-modal.rn-aligo-picker .modal_body {
	z-index: calc(var(--rn-z-modal) + 21);
}

/* ---------- 알리고 발송(알림 문자·카카오) ---------- */
.rn-modal.rn-aligo-send {
	z-index: calc(var(--rn-z-modal) + 10);
}

/* 70rem — 표가 한 줄로 들어가는 폭(유형 칸에 가장 긴 템플릿 이름이 든다, aligo_modal.php colgroup 참고) (2026-10-22 종전 68rem) */
.rn-modal.rn-aligo-send .modal_body {
	width: min(70rem, calc(100vw - 2rem));
	max-height: min(92dvh, 52rem);
	z-index: calc(var(--rn-z-modal) + 11);
}

.rn-modal.rn-aligo-send .modal-header .modal-tit {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--rn-space-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: unset;
	line-height: 1.35;
}

.rn-modal.rn-aligo-send .rn-aligo-send__title {
	flex: 0 0 auto;
}

.rn-modal.rn-aligo-send .rn-aligo-send__subtitle {
	flex: 0 1 auto;
	margin: 0;
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rn-modal.rn-aligo-send .rn-aligo-send__layout {
	display: flex;
	align-items: stretch;
	gap: var(--rn-space-3);
	min-height: 0;
}

/* 표 상자·오른쪽 안내 상자 높이 한계 — 머리 + 채움 9줄(44px × 10 + 테두리 2px = 442px)이 스크롤 없이 들어가게 (2026-10-22 종전 min(54vh, 30rem) —
   54vh 는 900px 창에서 486px 라 들어갔지만 그보다 낮은 창에서 1명만 있어도 스크롤이 생겼다) */
.rn-modal.rn-aligo-send .rn-aligo-send__table-wrap {
	flex: 1 1 auto;
	min-width: 0;
	max-height: min(60vh, 30rem);
	overflow: auto;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg);
}

/* 칸 폭은 colgroup 대로 고정(fixed) — 유형 칸만 폭이 없어 남는 폭을 다 갖는다. 내용이 칸 폭을 바꾸지 않는다 */
.rn-modal.rn-aligo-send .rn-aligo-send__table {
	width: 100%;
	min-width: 40rem;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--rn-font-size-xs);
}

/* 줄 높이 44px = 표 안 컨트롤 32px(--rn-aligo-ctl-h) + 위아래 6px (2026-10-22 사용자 지시 '발송방법이랑 카카오톡 인풋 너무 리스트에 꽉 붙어있다' —
   종전 줄 32px · 머리 36px 에 셀렉트가 rn-select--sm 36px 라 줄을 꽉 채웠다). 머리 띠도 같은 44px · 셀렉트 32px */
.rn-modal.rn-aligo-send .rn-aligo-send__table {
	--rn-aligo-ctl-h: 2rem;
	--rn-aligo-row-h: 2.75rem;
}

.rn-modal.rn-aligo-send .rn-aligo-send__table th,
.rn-modal.rn-aligo-send .rn-aligo-send__table td {
	height: var(--rn-aligo-row-h);
	padding: 0 0.35rem;
	border-bottom: 1px solid var(--rn-color-border);
	text-align: left; /* 목록은 왼쪽 정렬 (2026-10-13 '다른 페이지 리스트도 다 왼쪽 정렬') */
	vertical-align: middle;
	color: var(--rn-color-text);
	line-height: 1.4;
	box-sizing: border-box;
	font-size: var(--rn-font-size-xs);
}

/* 줄은 늘 한 줄(44px) — 구분 · 성명 · 유형 글자는 줄을 바꾸지 않고 넘치면 … (2026-10-22 사용자 지시 '리스트에 내용 2줄 안 되도록').
   성명 · 유형 전문은 renderRows 가 title 로 단다 */
.rn-modal.rn-aligo-send .rn-aligo-send__table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.rn-modal.rn-aligo-send .rn-aligo-send__table tbody tr:hover td {
	background: var(--rn-color-bg-soft);
}

.rn-modal.rn-aligo-send .rn-aligo-send__recipient {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-1);
	flex-wrap: nowrap;
}

/* 표 안 컨트롤(이름·전화 입력 · 발송방법 셀렉트 머리·행 · [미리보기])은 모두 같은 32px (종전 입력·버튼 26px, 셀렉트 36px) */
.rn-modal.rn-aligo-send .rn-aligo-send__table .rn-input,
.rn-modal.rn-aligo-send .aligo-name,
.rn-modal.rn-aligo-send .aligo-phone {
	min-height: var(--rn-aligo-ctl-h);
	height: var(--rn-aligo-ctl-h);
	padding: 0 0.375rem;
	font-size: var(--rn-font-size-xs);
	line-height: 1.2;
	box-sizing: border-box;
}

/* 셀렉트는 발송방법 열 폭을 다 쓰고, 최소 7.5rem(머리 '전체 카카오톡' 81px + 좌우 여백 8 · 화살표 자리 28px 이 들어가는 폭).
   표는 칸 폭 합이 표 상자보다 넓어 auto 배치가 고정 폭 칸(8.75rem)을 내용 폭(92px)까지 눌렀고, 머리 '전체 카카오톡'을 고르면 '전체 카카…'로 잘렸다.
   최소 폭을 주면 모자라는 몫은 비율 칸(유형 22%)이 내준다 (2026-10-22) */
.rn-modal.rn-aligo-send .rn-aligo-send__table .rn-select {
	width: 100%;
	min-width: 7.5rem;
	min-height: var(--rn-aligo-ctl-h);
	height: var(--rn-aligo-ctl-h);
	padding-left: 0.5rem;
	font-size: var(--rn-font-size-xs);
	line-height: 1.2;
	box-sizing: border-box;
}

/* 이름 4.75rem(다섯 글자 61px + 여백 6px × 2 + 테두리) · 전화 7.625rem('010-0000-0000' 숫자 고정폭 107px + 여백 + 테두리) —
   수신자 칸 13.375rem 에 두 칸이 든다 (2026-10-22 종전 5 · 7.75rem, 여백 0.35rem) */
.rn-modal.rn-aligo-send .aligo-name {
	width: 4.75rem;
	min-width: 0;
}

/* 수신자 머리글 — 수신자(번호) [이름 일괄][적용] (2026-11-13). 다른 머리글처럼 왼쪽 정렬 */
.rn-modal.rn-aligo-send .rn-aligo-send__recipient--head {
	justify-content: flex-start;
}

/* 4.5rem · 안쪽 여백 0.25rem — '수신자(번호)' 글자 · [적용]과 함께 수신자 칸(13.375rem)에 들어가면서 '이름 일괄' 글자가 다 보이는 폭 */
.rn-modal.rn-aligo-send .rn-aligo-send__table .all-name-input {
	flex: 0 0 4.5rem;
	width: 4.5rem;
	min-width: 0;
	padding: 0 0.25rem;
	font-weight: var(--rn-font-weight-regular);
}

.rn-modal.rn-aligo-send .btn-all-name.rn-btn {
	flex: 0 0 auto;
	min-height: var(--rn-aligo-ctl-h);
	height: var(--rn-aligo-ctl-h);
	padding: 0 0.375rem;
	font-size: var(--rn-font-size-xs);
}

.rn-modal.rn-aligo-send .rn-aligo-send__recipient-label {
	flex: 0 0 auto;
	white-space: nowrap;
}

.rn-modal.rn-aligo-send .aligo-phone {
	width: 7.625rem;
	min-width: 0;
}

.rn-modal.rn-aligo-send .btn-preview.rn-btn {
	min-width: 4.5rem;
	min-height: var(--rn-aligo-ctl-h);
	height: var(--rn-aligo-ctl-h);
	padding: 0 0.45rem;
	font-size: var(--rn-font-size-xs);
}

.rn-modal.rn-aligo-send .rn-aligo-send__side {
	flex: 0 0 18rem;
	width: 18rem;
	max-height: min(60vh, 30rem);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg);
	font-variant-numeric: tabular-nums;
}

.rn-modal.rn-aligo-send .rn-aligo-send__panel {
	padding: var(--rn-space-3) var(--rn-space-4);
}

.rn-modal.rn-aligo-send .rn-aligo-send__panel + .rn-aligo-send__panel {
	border-top: 1px solid var(--rn-color-border);
}

.rn-modal.rn-aligo-send .rn-aligo-send__panel-title {
	margin: 0 0 var(--rn-space-2);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	font-style: normal;
	color: var(--rn-color-text);
	letter-spacing: -0.02em;
}

.rn-modal.rn-aligo-send .rn-aligo-send__sender {
	margin: 0 0 var(--rn-space-1);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text);
	line-height: 1.4;
}

.rn-modal.rn-aligo-send .rn-aligo-send__sender span {
	color: var(--rn-color-text-muted);
	font-weight: var(--rn-font-weight-regular);
}

.rn-modal.rn-aligo-send .rn-aligo-send__hint {
	margin: 0;
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
	line-height: 1.45;
}

.rn-modal.rn-aligo-send .rn-aligo-send__point-row {
	display: flex;
	align-items: baseline;
	gap: var(--rn-space-2);
	margin-bottom: var(--rn-space-1);
	font-size: var(--rn-font-size-sm);
}

.rn-modal.rn-aligo-send .rn-aligo-send__point-label {
	flex: 0 0 2.25rem;
	color: var(--rn-color-text-muted);
}

.rn-modal.rn-aligo-send .rn-aligo-send__point-value {
	flex: 1 1 auto;
	text-align: right;
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-text);
}

.rn-modal.rn-aligo-send .rn-aligo-send__point-meta {
	flex: 0 0 auto;
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
}

.rn-modal.rn-aligo-send .rn-aligo-send__charge {
	width: 100%;
	margin-top: var(--rn-space-2);
}

.rn-modal.rn-aligo-send .rn-aligo-send__message-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
}

.rn-modal.rn-aligo-send .rn-aligo-send__message {
	width: 100%;
	min-height: 6.5rem;
	resize: vertical;
}

.rn-modal.rn-aligo-send .rn-aligo-send__files .input-file {
	display: none;
}

.rn-modal.rn-aligo-send .rn-aligo-send__file-btn {
	display: block;
	width: 100%;
	margin: 0 0 var(--rn-space-1);
	padding: var(--rn-space-2) var(--rn-space-3);
	border: 1px dashed var(--rn-color-border-strong);
	border-radius: var(--rn-btn-radius-sm);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-xs);
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.rn-modal.rn-aligo-send .rn-aligo-send__file-btn:hover {
	border-color: var(--rn-color-brand);
	color: var(--rn-color-brand-hover);
	background: var(--rn-color-brand-soft);
}

.rn-modal.rn-aligo-send .rn-aligo-send__notice {
	margin: var(--rn-space-3) 0 0;
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
	line-height: 1.5;
}

@media (max-width: 56rem) {
	.rn-modal.rn-aligo-send .rn-aligo-send__layout {
		flex-direction: column;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__side {
		flex: 0 0 auto;
		width: 100%;
		max-height: none;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table-wrap {
		max-height: min(40vh, 22rem);
	}
}

/* 폰(≤767) — 발송 대상 표를 가로 스크롤 없이 사람마다 세 줄 카드로 (2026-10-26 사용자 '급여명세서 발송 모달 모바일 가로 스크롤 안 생기게').
   7칸 표(최소 40rem)라 폰에서 옆으로 밀어야 수신번호 · 발송방법 · [미리보기]가 보였다. 모든 알림 발송이 같이 쓰는 창이다.
     1줄 — 선택 · 구분 · 성명 · 유형(넘치면 …)   2줄 — 받는 이름 · 수신번호   3줄 — 발송방법 · [미리보기]
   머리 줄은 [전체 선택]과 [발송방법 전체 적용]만 남긴다. 표를 채우던 빈 줄(renderRows 가 9줄까지 채움)은 감춘다 — 대상 줄만 data-fnm 이 있다 */
@media (max-width: 767px) {
	.rn-modal.rn-aligo-send .rn-aligo-send__table-wrap {
		overflow-x: hidden;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table,
	.rn-modal.rn-aligo-send .rn-aligo-send__table :is(thead, tbody) {
		display: block;
		min-width: 0;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table colgroup {
		display: none;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--rn-space-2);
		padding: var(--rn-space-2) var(--rn-space-3);
		border-bottom: 1px solid var(--rn-color-border);
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table :is(th, td) {
		display: block;
		height: auto;
		padding: 0;
		border-bottom: 0;
	}

	/* 머리 줄 — 전체 선택 · (오른쪽 끝) 발송방법 전체 적용 */
	.rn-modal.rn-aligo-send .rn-aligo-send__table thead tr {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--rn-table-th-bg);
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table thead th {
		position: static;
		background: transparent;
	}

	/* 수신자 머리글(5번째)은 남긴다 — 전체 선택 옆에 [이름 일괄][적용]만 보이고 '수신자(번호)' 글자는 뺀다 */
	.rn-modal.rn-aligo-send .rn-aligo-send__table thead th:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(7)) {
		display: none;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__recipient-label {
		display: none;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table thead th:first-child::after {
		content: '전체 선택';
		margin-left: var(--rn-space-1);
		vertical-align: middle;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table thead th:first-child {
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table thead th.th-channel {
		margin-left: auto;
	}

	/* 빈 줄 */
	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody tr:not([data-fnm]) {
		display: none;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody tr:hover td {
		background: transparent;
	}

	/* 1줄 — 구분 · 성명 · 유형. 유형이 남는 폭을 받고 넘치면 … */
	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody td:nth-child(3) {
		font-weight: var(--rn-font-weight-semibold);
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody td:nth-child(4) {
		flex: 1 1 0;
		min-width: 0;
		color: var(--rn-color-text-muted);
	}

	/* 2줄 — 받는 이름(5글자 폭) · 수신번호(남는 폭) */
	/* min-width 0 — 칸 · 입력칸의 내용 최소 폭(입력칸 기본 폭)이 남아 수신번호가 표 상자 오른쪽으로 넘쳤다 */
	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody td:nth-child(5) {
		flex: 1 1 100%;
		min-width: 0;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__recipient {
		justify-content: flex-start;
		gap: var(--rn-space-2);
		min-width: 0;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__recipient .aligo-name {
		flex: 0 0 5.5rem;
		width: 5.5rem;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__recipient .aligo-phone {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* 3줄 — 발송방법(남는 폭) · [미리보기] */
	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody td.td-channel {
		flex: 1 1 0;
		min-width: 0;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody td.td-channel .rn-select {
		min-width: 0;
	}

	.rn-modal.rn-aligo-send .rn-aligo-send__table tbody td:last-child {
		margin-left: auto;
	}
}

.rn-modal.rn-aligo-preview {
	z-index: calc(var(--rn-z-modal) + 30);
}

/* 미리보기 — 스크롤 없이 한 화면에 다 보인다 (2026-10-22 사용자 지시 '미리보기 팝업은 스크롤 생기면 안 돼, 한 화면에 다 보이게').
   종전에는 본문 상자(.preview-wrap)가 60vh 에서, 모달이 공용 한계 min(90dvh, 40rem) 에서 잘려 스크롤이 두 겹 생겼다.
   높이 한계는 창 높이(위아래 1rem 남김)뿐이고, 안은 줄여서 맞춘다 — 본문 15px · 줄 1.5(종전 17px · 1.7), 말풍선 여백 12 · 16px(종전 25 · 20px).
   1440×900 에서 급여명세서 미리보기 모달 약 710px, 가장 긴 본인부담금 명세서도 들어간다. 모달 안쪽(.modal-section)의 overflow 는
   아주 낮은 창에서만 쓰이는 안전장치로 둔다 */
.rn-modal.rn-aligo-preview .modal_body {
	width: min(24rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	z-index: calc(var(--rn-z-modal) + 31);
}

/* aligo_modal.php 인라인 `#aligo_preview_modal .preview-wrap { max-height:60vh; overflow-y:scroll }`(레거시 공용)이 id 선택자라
   종전 이 자리의 클래스 규칙(.rn-modal.rn-aligo-preview .preview-wrap)을 이기고 있었다 — 여기도 id 를 붙여 덮는다 */
.rn-modal#aligo_preview_modal .preview-wrap {
	max-height: none;
	overflow: visible;
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
}

.rn-modal#aligo_preview_modal .preview-wrap .preview-top {
	padding: var(--rn-space-2) var(--rn-space-3);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
}

.rn-modal#aligo_preview_modal .preview-wrap .preview-message {
	padding: var(--rn-space-3) var(--rn-space-4);
}

/* 모달 안쪽 위아래 여백 12px(공용 16px) — 가장 긴 본인부담금 명세서도 900px 창에 들어가게 */
.rn-modal.rn-aligo-preview .modal-section {
	padding-top: var(--rn-space-3);
	padding-bottom: var(--rn-space-3);
}

.rn-modal#aligo_preview_modal .preview-wrap .preview-button-wrap {
	margin-top: var(--rn-space-3);
}

.rn-modal#aligo_preview_modal .preview-wrap .preview-button-wrap button {
	height: var(--rn-btn-min-height);
	font-size: var(--rn-font-size-xs);
}

.rn-modal.rn-aligo-preview .preview-content img {
	max-width: 100%;
	height: auto;
}

/* ---------- 문자 발송 일시 중단 안내 (#sms_pause_modal.rn-sms-pause — _layout/sms_pause_modal.php 리뉴얼 판) ----------
 * 연간기록 [알림 문자 발송] 등 문자 전용 서식을 열면 발송 모달 대신 뜬다(Aligo_config::SMS_PAUSED). 종전 레거시 자립 팝업
 * (머리 띠 · X 없음, 12px 모서리, 120px 회색 [닫기])을 공통 팝업 모양으로 (2026-10-22 사용자 지시 '알림문자 발송 모달도 리뉴얼에 맞는 디자인으로').
 * 본문은 리뉴얼 홈 #rnSmsPauseModal 과 같은 짜임 — 15px · 줄 1.6, 무료 안내 줄은 팝업 공통 안내 상자(.rn-modal-form__hint: 연주황 바탕 ·
 * 진한 주황 글자), 관련 법령은 연회색 접힘 상자. 발송 모달(+10) · 미리보기(+30) 위에 뜬다 */
.rn-modal.rn-sms-pause.over-send {
	z-index: calc(var(--rn-z-modal) + 40);
}

.rn-modal.rn-sms-pause.over-send .modal_body {
	z-index: calc(var(--rn-z-modal) + 41);
}

/* 높이 한계 — 공통 --md(40rem)면 '관련 법령 보기'를 펼칠 때 스크롤이 생긴다(접힘 586 · 펼침 약 740px). 900px 창에서 펼쳐도 한 화면 */
.rn-modal.rn-sms-pause .modal_body {
	max-height: min(92dvh, 52rem);
}

.rn-modal.rn-sms-pause .modal-section {
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm);
	line-height: 1.6;
}

.rn-modal.rn-sms-pause .modal-section p {
	margin: 0 0 var(--rn-space-3);
	word-break: keep-all;
}

.rn-modal.rn-sms-pause .modal-section strong {
	color: var(--rn-color-danger-text);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-modal.rn-sms-pause .modal-section .sms-pause-free {
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand-hover);
}

.rn-modal.rn-sms-pause .modal-section .sms-pause-free strong {
	color: inherit;
}

.rn-modal.rn-sms-pause .modal-section .sms-pause-sub {
	margin: var(--rn-space-4) 0 var(--rn-space-2);
	color: var(--rn-color-text);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-modal.rn-sms-pause .modal-section ul {
	margin: 0 0 var(--rn-space-2);
	padding-left: var(--rn-space-4);
	list-style: none;
}

.rn-modal.rn-sms-pause .modal-section li {
	margin-bottom: var(--rn-space-1);
	word-break: keep-all;
}

.rn-modal.rn-sms-pause details {
	margin: var(--rn-space-3) 0 0;
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
}

.rn-modal.rn-sms-pause summary {
	display: block;
	list-style: none;
	font-weight: var(--rn-font-weight-medium);
	cursor: pointer;
}

.rn-modal.rn-sms-pause summary::-webkit-details-marker {
	display: none;
}

/* 펼침 꺾쇠 — 공통 아이콘 색(#2D2D2D) 작은 ▶, 펼치면 아래로 */
.rn-modal.rn-sms-pause summary::before {
	content: '\25B6';
	display: inline-block;
	margin-right: var(--rn-space-2);
	color: var(--rn-control-icon);
	font-size: 0.6875rem;
	vertical-align: 1px;
	transition: transform var(--rn-transition-fast);
}

.rn-modal.rn-sms-pause details[open] summary::before {
	transform: rotate(90deg);
}

.rn-modal.rn-sms-pause details ul {
	margin: var(--rn-space-2) 0 0;
}

/* ---------- 수급자 관리 — progress + 잔여 md 숨김 ----------
 * rn-modal 전환 완료. #modal_progress 만 md-show 토글(common.js).
 */
body.rn-body:has(.rn-prs) #modal_progress.md-modal-view {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--rn-z-modal);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: var(--rn-color-overlay);
	visibility: visible;
	pointer-events: auto;
}

body.rn-body:has(.rn-prs) #modal_progress.md-show {
	display: flex !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* AI 기능 설명(?) 팝업 — AiHelpModal.js 가 body 끝에 붙이는 레거시 마크업(.md-modal-view.ai-help-modal).
   아래 숨김에 걸려 업무수행일지·욕구조사의 [?]를 눌러도 아무것도 안 떴다(2026-10-26 사용자 지적).
   이 화면은 레거시 modal.css 를 전역으로 싣지 않아 자리·여닫기를 여기서 준다. z-index(10050)·패널 모양은 ai_correct_btn.css */
body.rn-body:has(.rn-prs) .md-modal-view.ai-help-modal {
	display: none;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
}

body.rn-body:has(.rn-prs) .md-modal-view.ai-help-modal.md-show {
	display: flex;
}

/* 설명 목록 — 본문 14px · 글자색 #1D1D1D (리뉴얼 공통 규칙. ai_correct_btn.css 원본은 13px · #33373C).
   낱말 중간에서 줄을 바꾸지 않는다(폰 폭에서 '유/지' · '결/과' 로 끊겼다) */
.rn-body .ai-help-modal .ai-help-modal__list li {
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text);
}

.rn-body .ai-help-modal :is(.ai-help-modal__list li, .ai-help-modal__note) {
	word-break: keep-all;
}

.rn-body .ai-help-modal .ai-help-modal__list li::before {
	top: 0.6rem;
}

/* 기록 모달 영역(.rn-prs-record-modals — 기록관리·상태변화기록지·인권안내 등 레거시 마크업, renewal/prs/modal.php)은 뺀다 —
   그 영역은 레거시 modal.css 를 영역 안에만 실어(legacy_css_scope.js 안쪽 주입) .md-show 로 여닫는다 */
body.rn-body:has(.rn-prs) .md-modal-view:not(#modal_progress):not(.ai-help-modal):not(.rn-prs-record-modals *),
body.rn-body:has(.rn-prs) .md-right-view:not(.rn-prs-record-modals *),
body.rn-body:has(.rn-prs) .md-overlay:not(.rn-prs-record-modals *),
body.rn-body:has(.rn-prs) .modal:not(.rn-modal):not(.picker-modal):not(.care-signature-modal):not(.rn-prs-record-modals *) {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* .rn-check / .rn-check-list / .rn-check--indent → forms.css 공통 */

/* 리뉴얼: 서명 모달 — 공통 셸 상속 + 폭·버튼 토큰만 보정 */
.rn-body .care-signature-modal {
	font-family: var(--rn-font-family);
}

.rn-body .care-signature-modal .modal_body {
	width: min(480px, calc(100vw - 2rem));
	max-height: min(90dvh, 52rem);
	height: auto;
}

.rn-body .care-signature-modal .btn-db.btn-bottom {
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border: 0;
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-brand);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
}

.rn-body .care-signature-modal .btn-db.btn-modal {
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border: 1px solid var(--rn-color-border-strong);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
}

/* 레거시 코드가 md-show 만 넣는 경우 */
.rn-body .care-signature-modal.modal.md-show,
.rn-body .care-confirm-delete-modal.modal.md-show {
	display: block;
}

/* ---------- 롱텀 연동 안내 (renewal/modal/stale_interworking.php) ----------
 * 레거시 #modal_stale_interworking(.stale-iw-*) 의 rn 판.
 * 안내 성격이라 다른 모달 위에 뜬다 — default-modal(+50) 보다는 아래.
 */
.rn-modal.stale-interworking-modal {
	z-index: calc(var(--rn-z-modal) + 40);
}

.rn-modal.stale-interworking-modal .modal_body {
	z-index: calc(var(--rn-z-modal) + 41);
}

.rn-modal.stale-interworking-modal .modal-section {
	text-align: left;
}

.rn-stale-iw__main {
	margin: 0;
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
}

.rn-stale-iw__value {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rn-space-3);
	margin-top: var(--rn-space-3);
	padding: var(--rn-space-2) var(--rn-space-3);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-sm);
	background: var(--rn-color-bg-soft);
}

.rn-stale-iw__value em {
	font-style: normal;
	font-size: var(--rn-text-caption);
	color: var(--rn-color-text-muted);
}

.rn-stale-iw__value strong {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--rn-color-text);
}

.rn-stale-iw__hint {
	display: flex;
	align-items: center; /* 정보 아이콘(.rn-info-icon, 그림)과 글자를 세로 가운데로 — 종전 FA 글자라 baseline */
	gap: var(--rn-space-1);
	margin: var(--rn-space-2) 0 0;
	font-size: var(--rn-text-caption);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text-muted);
}

/* 정보 아이콘 모양·색은 공통 .rn-info-icon(buttons.css) — 종전 FA fa-info-circle · 파랑 */

/* ==========================================================================
   레거시 마크업 팝업(.md-modal-view) → 리뉴얼 공통 팝업 모양 — 모든 리뉴얼 화면 (2026-10-13 '팝업 디자인 공통으로 통일')

   본인부담금 · 수급자/종사자/기관 연간기록 · 급여 등 리뉴얼 화면이 아직 레거시 팝업 마크업
     .md-modal-view > .md-modal.md-content > (.md-close · .md-body(h2.md-heading-left · .alert_txt …) · .btn-group.md-bottom(.btn-db))
   을 그대로 싣는다(JS 가 id·md-show 로 여닫아 마크업을 바꿀 수 없다). 그 팝업들을 공통 팝업(.rn-modal)과 같은 모양으로 그린다:
     · 판 — 흰 바탕 · 8px 모서리 · 옅은 그림자(.rn-modal .modal_body 와 같다), 뷰 자신이 딤을 갖는다(이중 딤 방지)
     · 제목(h2.md-heading-left) — 공통 머리 띠(.modal-header): 판 폭 끝까지 아래 구분선 · 17px 굵게 · 오른쪽 X
     · 제목 없는 안내·확인(.alert_txt 만 있는 것) — 공통 안내 팝업(default-modal)처럼 '안내' 머리 띠를 붙이고 폭 24rem · 가운데 글자
     · 하단 — 오른쪽 정렬, [닫기]=회색 테두리(.rn-btn--ghost) · [확인/저장]=브랜드 주황(.rn-btn--primary). 종전 레거시 #FF9036 · #ff7200
   배치·여닫기·애니메이션은 레거시 longterm/css/modal.css 그대로 두고 색·모양·여백만 바꾼다.
   [출처] 종사자 관리 화면에만 있던 같은 목적의 규칙(employee_modal.css 7절)을 여기로 옮겨 모든 화면이 받게 했다.
   급여관리는 레거시 modal.css 를 싣지 않아 payroll.css 의 자체 규칙(body.rn-body:has(.rn-payroll) …, 더 구체적)이 그대로 이긴다.
   ========================================================================== */

/* 레거시 색 변수 → 리뉴얼 (안전망) — .btn-db · .md-block 등이 --color-* 를 쓰는데 그 팔레트(longterm/css/common.css)를 리뉴얼은 싣지 않는다.
   변수가 비면 `border: 1px solid var(--color-bg)` 같은 선언이 통째로 무효가 된다. 팝업 안에만 건다 */
.rn-body .md-modal-view {
	--color-primary: var(--rn-color-brand);
	--color-primary-hover: var(--rn-color-brand-hover);
	--color-primary-dark: var(--rn-color-brand-hover);
	--color-secondary: var(--rn-color-danger);
	--color-dark: var(--rn-color-dark);
	--color-gray: var(--rn-color-text-muted);
	--color-bg: var(--rn-color-bg-soft);
	--color-light-bg: var(--rn-color-bg-soft);
	--color-stroke: var(--rn-color-border);
	--color-dark-stroke: var(--rn-color-border-strong);
	--color-light-stroke: var(--rn-color-border);
	--color-light: var(--rn-color-border-strong);
	--color-light-text: var(--rn-color-text-subtle);
}

/* ---- 레거시 팝업 2. 딤(배경) ----
   레거시는 형제 요소 .md-overlay 가 어둡게 깔았다. 그 방식은 `.md-show ~ .md-overlay`
   라서 오버레이보다 뒤에 오는 모달(payroll_renewal_modal.php)에는 안 걸린다.
   rn-modal 처럼 뷰 자신이 딤을 갖게 하고 오버레이는 끈다(이중 딤 방지). */
.rn-body .md-modal-view {
	background: var(--rn-color-overlay);
}

.rn-body .md-overlay {
	display: none !important;
}

/* ---- 레거시 팝업 3. 패널 ---- */
.rn-body .md-modal {
	/* 27vh 고정 최소높이 — 확인 모달 두 줄짜리도 세로로 늘어난다. 내용에 맞춘다
	   (.md-body 가 flex-grow:1 이라 푸터는 그대로 바닥에 붙는다) */
	min-height: 0;
	/* 레거시 최소 폭 480px 은 화면보다 넓으면 아래 max-width 를 이긴다(min-width 가 우선) — 폰(360px)에서 팝업이 통째로 480px 로
	   그려져 양옆이 잘렸다(2026-10-23 사용자 '상태변화 기록지 · 업무수행일지 작성 모달 모바일에서 짤려'). 넓은 화면은 종전 그대로 480px */
	min-width: min(30rem, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background-color: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-md);
	font-family: var(--rn-font-family);
	color: var(--rn-color-text);
}

/* ---- 레거시 팝업 4. 닫기 버튼 — rn 모달과 같은 자리·크기 ---- */
.rn-body .md-modal .md-ico-close {
	right: var(--rn-space-3);
	top: var(--rn-space-3);
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: var(--rn-radius-sm);
	/* X 그림·호버(바탕 없음)는 공통 renewal/css/modal.css(.rn-body .md-ico-close, --rn-icon-close)가 준다 (2026-10-12 종전 흐린 0.6 + 회색 호버) */
}

/* ---- 레거시 팝업 5. 제목 — rn-modal 헤더와 같은 톤(아래 구분선 포함) ---- */
.rn-body .md-modal .md-heading-left {
	margin: 0 0 var(--rn-space-4);
	padding: var(--rn-space-4) 2.5rem var(--rn-space-3) 0;
	border-bottom: 1px solid var(--rn-color-border);
	font-size: var(--rn-modal-header-title-size); /* 팝업 제목 공통 18px (2026-10-21 종전 21px) */
	font-weight: var(--rn-font-weight-bold);
	line-height: var(--rn-line-height-base);
	letter-spacing: normal;
	color: var(--rn-color-text);
}

.rn-body .md-modal .md-heading-left em.stx {
	margin-left: var(--rn-space-2);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-regular);
	color: var(--rn-color-danger-text);
}

/* ---- 레거시 팝업 6. 본문 ---- */
.rn-body .md-modal .md-body {
	padding: 0 var(--rn-space-5);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
}

.rn-body .md-modal .md-block,
.rn-body .md-modal .set-block {
	min-height: 0;
	padding: var(--rn-space-2) 0;
	border-bottom: 1px solid var(--rn-color-border);
}

.rn-body .md-modal .md-block > label,
.rn-body .md-modal .set-block > label {
	padding-left: 0;
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-medium);
}

/* 안내 박스 — 레거시는 주황 글자 + 배경 아이콘. 팝업 공통 안내 문구(.rn-modal-form__hint)와 같은 모양으로:
   연주황 바탕 · 진한 주황 15px, 테두리 없음 (2026-10-22 사용자 지시 '파란색 부분 주황색 배경 스타일로' — 종전 파란 정보 박스) */
.rn-body .md-modal .set-round-alert {
	margin-bottom: var(--rn-space-3);
	padding: var(--rn-space-2) var(--rn-space-3);
	border: 0;
	border-radius: var(--rn-radius-md);
	background-color: var(--rn-color-brand-soft);
	background-image: none;
	color: var(--rn-color-brand-hover);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-regular);
	line-height: var(--rn-line-height-base);
}

.rn-body .md-modal .set-round-alert em {
	color: inherit;
	font-weight: var(--rn-font-weight-semibold);
	text-decoration: none;
}

/* ---- 레거시 팝업 7. 푸터 ---- */
.rn-body .md-modal .btn-group.md-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--rn-space-2);
	flex-shrink: 0;
	margin-top: var(--rn-space-4);
	padding: var(--rn-space-4) var(--rn-space-5);
	border-top: 0; /* 하단 버튼 위 구분선 없음 — 모든 팝업 공통 (2026-10-12) */
}

/* ---- 레거시 팝업 8. 버튼 ---- */
.rn-body .md-modal .btn-db {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-1);
	min-height: var(--rn-btn-min-height);
	min-width: 0;
	padding: 0 var(--rn-space-4);
	border: 1px solid var(--rn-color-border-strong);
	border-radius: var(--rn-btn-radius);
	background-color: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}

.rn-body .md-modal .btn-db:hover {
	border-color: var(--rn-color-text-subtle);
	background-color: var(--rn-color-bg-hover);
	color: var(--rn-color-text);
}

/* 취소·닫기 */
.rn-body .md-modal .btn-db.btn-modal {
	min-width: 5rem;
	color: var(--rn-color-text);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
}

/* 주 액션(저장·등록·확인) */
.rn-body .md-modal .btn-db.btn-bottom {
	min-width: 5rem;
	border: 1px solid var(--rn-color-brand);
	background-color: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
	font-size: var(--rn-btn-font-size);
}

.rn-body .md-modal .btn-db.btn-bottom:hover {
	border-color: var(--rn-color-brand-hover);
	background-color: var(--rn-color-brand-hover);
	color: var(--rn-color-on-brand);
}

/* 삭제 */
.rn-body .md-modal .btn-db.btn-bottom.delete,
.rn-body .md-modal .btn-db.btn-confirm.delete {
	border-color: var(--rn-color-danger);
	background-color: var(--rn-color-danger);
	color: var(--rn-color-on-brand);
}

.rn-body .md-modal .btn-db.btn-bottom.delete:hover {
	border-color: var(--rn-color-danger-text);
	background-color: var(--rn-color-danger-text);
}

/* ---- 레거시 팝업 9. 입력칸 ---- */
.rn-body .md-modal .set-field-input,
.rn-body .md-modal .set-field-select,
.rn-body .md-modal .set-textarea {
	box-sizing: border-box;
	min-height: var(--rn-control-min-height-sm);
	padding: 0 var(--rn-control-padding-x-sm);
	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-sm);
}

/* 날짜칸(input type=date) — 공통 날짜 입력칸(forms.css .rn-input--date · .care-datepicker-input)과 같은 모양: 높이 36px · 진회색 #2D2D2D 선 달력 아이콘 오른쪽 ·
   숫자 자리폭 고정 (2026-10-22 사용자 지시 '급여비용명세서 발급일 관리 년월일 박스 공통 스타일로' — 레거시 팝업의 날짜칸 모두 같이).
   브라우저 기본 달력 표시는 투명하게 그 아이콘 자리에 겹쳐 둔다 — 눌러서 달력을 여는 동작은 그대로 */
.rn-body .md-modal input[type="date"].set-field-input {
	height: var(--rn-control-min-height);
	min-height: 0;
	padding: 0 0.5rem 0 var(--rn-control-padding-x);
	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;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.rn-body .md-modal input[type="date"].set-field-input::-webkit-calendar-picker-indicator {
	width: 1rem;
	height: 1rem;
	margin: 0 0.15rem 0 0.5rem;
	opacity: 0;
	cursor: pointer;
}

.rn-body .md-modal .set-textarea {
	padding: var(--rn-space-2) var(--rn-control-padding-x-sm);
	line-height: var(--rn-line-height-base);
}

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

.rn-body .md-modal .set-field-input:disabled,
.rn-body .md-modal .set-field-input[readonly] {
	background-color: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
}

/* 라디오·체크 — 레거시 커스텀 이미지를 쓰지 않고 브랜드색만 입힌다 */
.rn-body .md-modal .radio-color,
.rn-body .md-modal .check-color {
	accent-color: var(--rn-color-brand);
}

/* 라디오(.radio-color) — 공통 라디오(forms.css .rn-radio)와 같은 꼴: 흰 바탕 · 회색 테두리, 고르면 주황 테두리 + 가운데 주황 점.
   asset.css 는 appearance:none 에 고르면 주황으로 꽉 채우고 흰 아이콘을 얹어(18px) 다른 화면 라디오와 달라 보였다
   (2026-10-22 사용자 지시 '수급자별 수당 일괄 설정 라디오버튼 공통으로 맞춰줘' — 레거시 마크업 팝업 전체에 같이 걸린다) */
.rn-body .md-modal input[type="radio"].radio-color {
	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: var(--rn-radio-bg) none center / auto no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	vertical-align: middle;
	transition: border-color var(--rn-transition-fast), background-image var(--rn-transition-fast);
}

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

.rn-body .md-modal input[type="radio"].radio-color:focus-visible {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: var(--rn-control-focus-ring);
}

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

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

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

/* 고른 라디오 · 체크 옆 글자 — 레거시 asset.css `.radio-color:checked + label { color:#e26e05 }`(누런 주황)이 본인부담금 등에서 그대로 보였다
   (2026-10-22 사용자 지적 '라디오 선택 시 글자가 노란색으로 바뀐다'). 종사자 화면 팝업(employee_modal.css 8절)과 같은 브랜드 주황 · 중간 굵기로 모든 화면 통일 */
.rn-body .md-modal :is(.radio-color, .check-color):checked + label {
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-medium);
}

/* ---- 노란색 걷어내기 (2026-10-22 사용자 지시 '호버 시 노란색 뜨는 거 빼줘, 노란색 안 써') ----
 * 리뉴얼 화면에 같이 실리는 레거시 CSS · JS 가 노랑 계열(#ffeaba · #fff4db · #ffd984 · #fffaf2 · #fff8e1)을 칠하던 자리를
 * 리뉴얼 값으로 바꾼다 — 고를 수 있는 항목 hover · 선택 = 연한 주황(brand-soft) + 주황 선(수급자 관리 .req_edit · 근무관리 수급자 목록과 같다),
 * 버튼 hover = 회색 라인 버튼 hover. 레거시 파일은 레거시 화면과 같이 쓰므로 고치지 않고 .rn-body 로 한 단계 높여 덮는다.
 * (기록 카드 · 스크롤바 hover 는 각 파일: prs_year_record.css · variables.css --rn-scrollbar-thumb-hover) */

/* 수급자 고르기 목록(assets/css/modal.css `.prs-list .prs:hover { #fff4db !important }`) */
.rn-body .prs-list .prs:hover {
	background: var(--rn-color-brand-soft) !important;
}

/* 평가 모달 왼쪽 이력 목록(longterm/css/modal.css `.evaluation-modal … .left-box li:hover { #ffd984 }`) */
.rn-body .evaluation-modal .req_main_content .left-box li:hover {
	background: var(--rn-color-brand-soft);
}

/* 기타항목 순서 이동 버튼(longterm/css/prs_right_section.css `.prs-record-etc-item-move > button:hover { #ffeaba · #ff9036 }`) */
.rn-body .prs-record-etc-item-move > button:hover:not(:disabled) {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
	color: var(--rn-color-text);
}

/* 상태변화기록지 서명 칸(longterm/css/status_change_modal.css `.sc-signature-image-wrap.has-image:hover { #fffaf2 · #ff9036 }`) */
.rn-body .sc-signature-image-wrap.has-image:is(:hover, :focus-visible) {
	border-color: var(--rn-color-brand);
	background: var(--rn-color-brand-soft);
}

/* 달력에서 고른 일정 강조 — JS 가 인라인 `background:#ffeaba; border:… #ff9036` 로 칠한다(levyGenerateDetail__.js ·
   employee_right_section.js). 인라인이라 !important 로만 덮인다. 크롬은 인라인 색을 rgb() 로 적어 두므로 그 글자로 찾는다 */
.rn-body .tbsch.tb_sch[style*="255, 234, 186"] {
	border-color: var(--rn-color-brand) !important;
	background: var(--rn-color-brand-soft) !important;
}

/* 본인부담금 수납 모달 — 수기로 고친 금액 칸 표시(levyManagement__.js 인라인 `background-color:#fff8e1`) */
.rn-body input.service-input.manual-set {
	background-color: var(--rn-color-brand-soft) !important;
}

/* 수급자별 수당 일괄 설정 · 종사자 시급 일괄 관리 — 레거시 마크업(longterm/common/payroll_renewal_modal.php: 종사자 관리 · 종사자 연간관리 ·
   급여 3단계가 쓴다). 급여 2단계의 리뉴얼 사본(renewal/payroll/modal_emp_config.php, .rn-payroll-md · rn-table · rn-btn)은 payroll.css 가 맡으므로
   레거시 쪽 표지(table.db-table · rn-btn 없는 a)로만 잡는다 (2026-10-22 사용자 지시).
   · 목록 머리글 — longterm payroll_renewal.css 의 0.85em(약 12px) 대신 목록 머리글 공통 15px(--rn-list-head-font-size)
   · [일정 가져오기] — 글자 밑줄 없이 검정 채움 버튼으로 (아래 규칙) */
.rn-body :is(#modal_batch_prs_settings, #modal_batch_update_wage_rate) table.db-table tr th {
	font-size: var(--rn-list-head-font-size);
	font-weight: var(--rn-font-weight-semibold);
}

/* 종사자 시급 일괄 관리 — 리뉴얼 사본(rn-table, 급여 2단계 renewal/payroll/modal_emp_config.php)의 칸 사이 세로선 (2026-10-28 사용자 지시 '테이블 형식으로 세로 구분선 넣어줘').
   머리글 · 입력 줄 모두 칸 왼쪽에 #D8D8D8 1px — 첫 칸은 감싼 상자 테두리가 대신한다 */
.rn-body #modal_batch_update_wage_rate .rn-table :is(th, td):not(:first-child) {
	border-left: 1px solid var(--rn-color-border);
}

/* [일정 가져오기] · [분류 초기화] — 옆 셀렉트와 같은 높이(줄 높이로 늘림 — 레거시 인라인 height 35px 를 풀어 둔다) · [일정 가져오기]는 옆 연·월 셀렉트 폭(asset.css 124px)만큼.
   [일정 가져오기]는 공용 '가져오기(롱텀)' 진회색 채움(.rn-btn--dark 토큰 — #555 · hover #2D2D2D), [분류 초기화]는 회색 라인
   (2026-10-22 사용자 지시 '일정가져오기 검정으로 인풋 크기랑 똑같이 · 분류초기화도 키워줘'. 2026-10-28 '너무 껌정색' — 종전 #1D1D1D 를 공용 색으로).
   급여 2단계 리뉴얼 사본(rn-btn--sm ghost)도 같은 꼴이 되도록 마크업 구분 없이 id 로 잡는다 */
.rn-body #modal_batch_prs_settings a#save_excel_ctr_plan {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: stretch;
	box-sizing: border-box;
	width: auto;
	height: auto !important;
	min-height: 0;
	padding: 0 var(--rn-btn-padding-x);
	border-radius: var(--rn-btn-radius);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.rn-body #modal_batch_prs_settings a#save_excel_ctr_plan {
	min-width: 7.75rem;
	border: 1px solid var(--rn-color-dark);
	background: var(--rn-color-dark);
	color: var(--rn-color-on-brand);
}

.rn-body #modal_batch_prs_settings a#save_excel_ctr_plan:hover {
	border-color: var(--rn-color-dark-hover);
	background: var(--rn-color-dark-hover);
	color: var(--rn-color-on-brand);
	text-decoration: none;
}

/* 필터 줄 — 종사자 선택 · 수급자별 설정 셀렉트와 [분류 초기화]는 리뉴얼에서 뺀다. 종사자는 이름 검색으로 거른다(검색 대상에 종사자명 포함)
   (2026-11-03 사용자 지시). 레거시 마크업(payroll_renewal_modal.php)은 구버전 화면과 공유라 마크업은 두고 리뉴얼(.rn-body)에서만 숨긴다 —
   급여 2단계 리뉴얼 사본(modal_emp_config.php)은 마크업에서 지웠다. 숨긴 셀렉트는 개인별 열기 때 종사자명이 들어가도 그 종사자 목록만 오므로 결과가 같다.
   검색칸 폭은 급여관리 2단계 목록 이름 검색칸과 같게 — 14rem(최소 10rem), 본문 좁은 화면(1679.98 이하) 170px. 급여 2단계 리뉴얼 사본은 payroll.css 같은 값
   (2026-11-03 사용자 지시 '이름 검색 input 칸을 급여관리 2단계 이름 검색 input width 랑 일치'). 레거시 payroll_renewal.css 의 .InputBox flex:1 을 리뉴얼에서만 덮는다 */
.rn-body #modal_batch_prs_settings :is(#batch_prs_filter_emp, #batch_prs_filter_is_active, #batch_prs_filter_reset) {
	display: none !important;
}

.rn-body #modal_batch_prs_settings .search-filter-wrap .InputBox {
	flex: 0 1 var(--rn-list-search-width);
	min-width: 10rem;
	width: auto;
	max-width: none;
}

@media (max-width: 1679.98px) {
	.rn-body #modal_batch_prs_settings .search-filter-wrap .InputBox {
		flex-basis: 170px;
		width: 170px;
	}
}

/* 조회 범위 — 검색 줄 오른쪽 끝 [서비스 기간 | 전체] [2026.09] ~ [2026.11] (2026-11-03 사용자 결정 '검색 줄 오른쪽에 붙이기' · 기본 '서비스 기간' 최근 3개월).
   급여 2단계 리뉴얼 사본(modal_emp_config.php)과 리뉴얼 종사자 관리·연간관리의 레거시 마크업(payroll_renewal_modal.php — $rn_batch_prs_period)이 같은 마크업이라 여기 한 곳에 둔다.
   한 덩어리로 묶어 줄이 꺾여도 기간이 갈라지지 않게, margin-left:auto 로 줄 오른쪽 끝(아래 표 끝)에 붙인다.
   세그먼트는 공통 segment.css(라디오+라벨 짝) 그대로 — 모양은 덮지 않는다 */
.rn-body #modal_batch_prs_settings .rn-payroll-md__period-bar {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-space-2);
	flex-shrink: 0;
	margin-left: auto;
}

.rn-body #modal_batch_prs_settings .rn-payroll-md__period-bar .rn-board-subtabs { margin-right: var(--rn-space-1); }
.rn-body #modal_batch_prs_settings .rn-payroll-md__period-bar .rn-select { width: auto; min-width: 0; } /* 레거시 asset.css .set-field-select 최소폭 124px 영향 차단 */
.rn-body #modal_batch_prs_settings .rn-payroll-md__period-sep { color: var(--rn-color-text-muted); }
.rn-body #modal_batch_prs_settings select:disabled { cursor: not-allowed; }

/* 조회 범위가 검색 줄로 올라가면서 줄 칸이 빠듯해졌다 — 서비스 구분·상세 셀렉트는 내용 폭 그대로 두고 줄지 않게
   (레거시 마크업 인라인 width:250px · asset.css min-width 124px 를 리뉴얼에서만 푼다. 실측: '서비스 구분(전체'로 잘림) */
.rn-body #modal_batch_prs_settings .rn-payroll-md__filters > :is(#batch_prs_filter_service_type, #batch_prs_filter_service_detail),
.rn-body #modal_batch_prs_settings .search-filter-wrap > :is(#batch_prs_filter_service_type, #batch_prs_filter_service_detail) {
	flex-shrink: 0;
	width: auto !important;
	min-width: 0;
}

/* 하단 [가져올 연월] — 조회 기간과 따로 고르는 일정 가져오기 달(2026-11-03 사용자 지시). 내용 폭 그대로(공통 .rn-select 100% 를 푼다) */
.rn-body #modal_batch_prs_settings .md-bottom #batch_prs_import_ym {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
}

/* 하단에 [N월 일정 가져오기]만 남았다 — 위 공통 규칙(옆 셀렉트 높이로 늘림 · min-height 0)이면 기댈 셀렉트가 없어 납작해졌다(실측).
   [닫기]·[저장]과 같은 버튼 높이로 */
.rn-body #modal_batch_prs_settings .md-bottom a#save_excel_ctr_plan {
	align-self: center;
	min-height: var(--rn-btn-min-height);
}

/* 서비스 상세 칸 [● 전체  ● 서비스별  N건 ▶] — payroll_emp_config__.js 가 심는 style(간격 5px · 라디오↔글자 2px)이 붙어 보였다
   (2026-10-22 사용자 지적) — 항목 사이 12px · 라디오↔글자 4px */
.rn-body #modal_batch_prs_settings #batch_prs_settings_tbody .prs-edit-mode-wrap {
	gap: var(--rn-space-3);
}

.rn-body #modal_batch_prs_settings #batch_prs_settings_tbody .prs-radio-label {
	gap: var(--rn-space-1);
}

/* ---- 레거시 팝업 10. 모달 안 표 (.form-info-tb-board / .md-info-tb) ---- */
.rn-body .md-modal .form-info-tb-board,
.rn-body .md-modal .md-info-tb {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rn-font-size-xs); /* 14px — 본문 최소 14 (2026-10-12 종전 text-detail-s) */
}

.rn-body .md-modal .form-info-tb-board th,
.rn-body .md-modal .form-info-tb-board td,
.rn-body .md-modal .md-info-tb th,
.rn-body .md-modal .md-info-tb td {
	padding: 0.5rem 0.4rem;
	border: none;
	border-bottom: 1px solid var(--rn-color-border);
	line-height: 1.4;
	vertical-align: middle;
}

.rn-body .md-modal .form-info-tb-board th,
.rn-body .md-modal .md-info-tb th {
	background-color: 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);
}


/* ---- 공통 팝업 모양 맞추기 (2026-10-13) — 위 규칙(종사자 관리에서 옮긴 것) 위에 덧댄다 ---- */

/* 판 — 레거시 위 여백(25px)·테두리를 걷어 제목 머리 띠가 판 맨 위에 붙는다. 그림자는 .rn-modal .modal_body 와 같다 */
.rn-body .md-modal-view .md-modal {
	padding: 0;
	border: 0;
	box-shadow: var(--rn-shadow-sm);
}

/* 제목 → 공통 머리 띠(.modal-header) — 본문 안쪽 여백(좌우 20px)만큼 바깥으로 당겨 판 폭 끝까지 아래 구분선 */
.rn-body .md-modal-view .md-modal .md-heading-left {
	margin: 0 calc(-1 * var(--rn-space-5)) var(--rn-space-4);
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
}

/* X — 머리 띠 세로 가운데 · 오른쪽 16px (공통 .btn-modal-close 와 같은 자리). 그림은 위 .rn-body .md-ico-close 공통 규칙 */
.rn-body .md-modal-view .md-modal .md-ico-close {
	top: calc(var(--rn-modal-header-padding-y) + (var(--rn-modal-header-title-size) * var(--rn-line-height-tight) - 2rem) / 2);
	right: var(--rn-space-4);
	z-index: 2;
}

/* 제목 없는 안내·확인 팝업 — 공통 안내 팝업(default-modal: '안내' 머리 띠 + 가운데 글자)과 같게 머리 띠를 붙인다.
   제목·머리가 있는 팝업(h2.md-heading-left · .md-header · 제목 태그)은 제외 */
.rn-body .md-modal-view:not(#modal_progress) .md-modal:not(:has(.md-heading-left, .md-header, h1, h2, h3))::before {
	content: "안내";
	display: block;
	flex: 0 0 auto;
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
}

/* ---- 팝업 제목 아래 선 통일 (2026-10-14) — 어떤 팝업은 선이 없고 어떤 팝업은 좌우가 들어가 끊겨 보였다.
   모든 제목 머리 띠는 판 폭 끝까지 이어진 #D8D8D8 선 하나를 아래에 둔다 ---- */

/* 제목을 .md-body 밖 .md-header 로 따로 두는 팝업(급여 확인 · 최저시급 점검 · 본인부담금 공제 누락 · 직원 상담 등) */
.rn-body .md-modal-view .md-modal > .md-header {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	background: var(--rn-color-bg);
}

.rn-body .md-modal-view .md-modal > .md-header > :is(h1, h2, h3) {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
}

/* 급여 확인 · 최저시급 점검 — 레거시 payroll_renewal.css(종사자·종사자 연간 화면이 싣는다)의 #id 규칙이 선을 걷고 제목을 1.2·1.3em 으로 키운다 */
.rn-body #modal_confirm_wage_mismatch .md-modal > .md-header { border-bottom: 1px solid var(--rn-color-border); background: var(--rn-color-bg); }
.rn-body #modal_confirm_wage_mismatch .md-modal > .md-header > h2 { font-size: var(--rn-modal-header-title-size); font-weight: var(--rn-modal-header-title-weight); }
.rn-body #modal_minimum_wage_check .md-modal > .md-header > h2 { margin: 0; font-size: var(--rn-modal-header-title-size); font-weight: var(--rn-modal-header-title-weight); }

/* 제목 옆에 연도 선택 등이 한 줄로 붙는 팝업(인라인 flex 줄 안의 h2 style="margin:0") — 선이 제목 글자 폭에서 끊겼다.
   감싼 줄을 머리 띠로 삼아 판 끝까지 선을 긋고, 안의 제목은 선·여백을 뺀다 */
.rn-body .md-modal-view .md-modal .md-body > div:first-child:has(> .md-heading-left) {
	margin: 0 calc(-1 * var(--rn-space-5)) var(--rn-space-4) !important; /* 인라인 margin-bottom 16·20px */
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
}

.rn-body .md-modal-view .md-modal .md-body > div:first-child > .md-heading-left {
	margin: 0 !important;
	padding: 0;
	border-bottom: 0;
}

/* 현황·출력 팝업(.cr-status-modal — 수급자 관리·연간관리·본인부담금) — 레거시는 머리에 선이 없었다 */
.rn-body .cr-status-modal__head {
	margin-bottom: var(--rn-space-4);
	padding: var(--rn-modal-header-padding-y) var(--rn-space-4) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
}

/* 서명 팝업 — 인라인 <style> 의 #E8E8E8 선을 공통 선 색으로 */
.rn-body .care-signature-modal .modal-header { border-bottom-color: var(--rn-color-border); }

/* 안내·확인 크기(size-xs 계열) — 공통 안내 팝업 폭 24rem. 레거시 min-width 480px(·size-xs02 300px !important)를 푼다 */
.rn-body .md-modal-view .md-modal:is(.size-xs, .size-xs01, .size-xs02) {
	width: min(24rem, calc(100vw - 2rem));
	min-width: 0 !important;
}

/* 안내 글자 — 공통 안내 팝업 본문(default-modal .modal-section)과 같다: 17px · 보통 굵기 · 가운데 · 위아래 20px */
.rn-body .md-modal-view .md-modal .alert_txt {
	padding: var(--rn-space-5) 0 var(--rn-space-1);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-regular);
	line-height: var(--rn-line-height-base);
	letter-spacing: var(--rn-letter-spacing-tight);
}

.rn-body .md-modal-view .md-modal .alert_txt.al_l {
	padding-left: 0;
	padding-right: 0;
}

/* 본인부담금 내역 수정(levy_modal.php #modal-n4 — 본인부담금 화면 연필) — 서비스별 금액 표 (2026-10-22 사용자 지시
   '표 아래 선 지우고, 서비스 글자 너무 작다, 표가 갑자기 끊겨 보이지 않게').
   · 표를 감싼 줄(.set-block)의 아랫선이 표 마지막 줄 선 8px 아래에 한 번 더 그어져 표가 끊긴 듯 보였다 — 감싼 줄의 선·여백을 빼고
     표가 스스로 닫히게 둥근 바깥 테두리(#D8D8D8)를 두른다(팝업 표 공통 .rn-table-wrap 과 같은 모양). 마지막 줄 아랫선은 테두리가 대신한다
   · 머리 띠 40px · 15px, 금액 칸 머리글은 칸 안 숫자(오른쪽 정렬)와 같은 오른쪽 끝에 — 숫자 열 오른쪽 정렬 규칙
   · 서비스 이름(방문요양 · 합계)은 12.6px 굵게(인라인) → 15px · 왼쪽 정렬. 칸 안 입력은 팝업 표 공통 32px · 위아래 6px
   마크업은 레거시 공용이라 인라인(td 가운데 · 굵게, 합계 줄 #f5f5f5)을 !important 로 덮는다 */
.rn-body #modal-n4 .set-block:has(> .md-info-tb) {
	padding: 0;
	border-bottom: 0;
}

.rn-body #modal-n4 .md-info-tb {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	overflow: hidden;
}

.rn-body #modal-n4 .md-info-tb :is(th, td) {
	padding: 0.375rem var(--rn-space-2); /* 위아래 6px — 32px 입력칸이면 줄 44px */
	border: 0;
	border-bottom: 1px solid var(--rn-color-border);
	vertical-align: middle;
}

.rn-body #modal-n4 .md-info-tb th {
	height: 2.5rem;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: calc(var(--rn-space-2) * 2 + 1px); /* 칸 여백 + 입력칸 안쪽 여백 · 테두리 — 칸 안 숫자 끝과 같은 자리 */
	background: var(--rn-table-th-bg);
	color: var(--rn-color-text);
	font-size: var(--rn-list-head-font-size);
	font-weight: var(--rn-font-weight-semibold);
	text-align: right;
	white-space: nowrap;
}

.rn-body #modal-n4 .md-info-tb :is(th, td):first-child {
	padding-left: var(--rn-space-3);
	text-align: left !important;
}

.rn-body #modal-n4 .md-info-tb tbody td:first-child {
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm) !important;
	font-weight: var(--rn-font-weight-semibold) !important;
	white-space: nowrap;
}

.rn-body #modal-n4 .md-info-tb tbody tr:last-child {
	background: var(--rn-color-bg-soft) !important; /* 합계 줄 — 인라인 #f5f5f5 를 공통 연회색으로 */
}

.rn-body #modal-n4 .md-info-tb tbody tr:last-child > td {
	border-bottom: 0;
}

.rn-body #modal-n4 .md-info-tb input.set-field-input {
	box-sizing: border-box;
	height: 2rem;
	min-height: 2rem;
	padding: 0 var(--rn-space-2);
	font-size: var(--rn-font-size-xs);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* 본인부담금 수납 이력(levy_modal.php #modal_pay_history — 본인부담금 화면 [수납이력]) — 리뉴얼 팝업 모양 (2026-10-22 사용자 지시
   '수납이력 모달도 디자인 리뉴얼에 맞게, 수납영수증 아이콘 라인 스타일, 아래 회색선 지우기').
   · 제목 — 마크업이 .md-heading-left 가 아닌 <h2 style="padding:10px"> 라 공통 머리 띠가 빠졌다 — 같은 띠(판 폭 아랫선 · 18px)를 준다
   · 총액 줄 — 인라인 color:blue · 14px → 정보 파랑 토큰 15px 굵게, 아래 줄 선은 뺀다(바로 아래 표 머리 띠가 나눈다)
   · 표 — 위 #modal-n4 와 같은 짜임: 둥근 바깥 테두리 · 머리 띠 #EDF1F5 40px 15px · 줄 48px 14px · 수납총계 줄 연회색 굵게.
     글자는 목록 공통 왼쪽, 수납금액만 오른쪽(머리글도). 표를 감싼 줄의 아랫선(사용자가 짚은 회색 선)은 뺀다
   · [수정]·[수납영수증]은 levyManagement__.js(리뉴얼 포크)가 공통 작은 회색 버튼 + 라인 아이콘으로 그린다 */
.rn-body #modal_pay_history .md-body > h2:first-child {
	margin: 0 calc(-1 * var(--rn-space-5)) var(--rn-space-4);
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start) !important;
	border-bottom: 1px solid var(--rn-color-border);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
}

.rn-body #modal_pay_history .set-block.md-block {
	padding: 0;
	border-bottom: 0;
}

.rn-body #modal_pay_history .set-block.md-block > div:has(> p) {
	margin: 0 0 var(--rn-space-3) !important;
}

.rn-body #modal_pay_history .set-block.md-block > div > p {
	margin: 0;
	color: var(--rn-color-info-text) !important;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-body #modal_pay_history .tb_wp {
	height: auto;
	max-height: none;
	margin: 0;
	border: 0;
}

.rn-body #modal_pay_history #pay_history_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	overflow: hidden;
}

.rn-body #modal_pay_history #pay_history_table :is(th, td) {
	height: 3rem;
	padding: 0 var(--rn-space-2);
	border: 0;
	border-bottom: 1px solid var(--rn-color-border);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-xs);
	text-align: left;
	vertical-align: middle;
}

.rn-body #modal_pay_history #pay_history_table th {
	height: 2.5rem;
	background: var(--rn-table-th-bg);
	font-size: var(--rn-list-head-font-size);
	font-weight: var(--rn-font-weight-semibold);
	white-space: nowrap;
}

.rn-body #modal_pay_history #pay_history_table :is(th, td):first-child {
	padding-left: var(--rn-space-3);
}

/* 수납금액 — 숫자라 머리글·값 오른쪽 (값은 JS 인라인 right) */
.rn-body #modal_pay_history #pay_history_table th:nth-child(3),
.rn-body #modal_pay_history #pay_history_table tbody tr > td:nth-child(3):not([colspan]) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* 수납총계 줄(마지막) — 연회색 · 굵게, 바깥 테두리가 닫으므로 아랫선 없음. 금액은 colspan 다음 칸(2번째 td) */
.rn-body #modal_pay_history #pay_history_table tbody tr:last-child > td {
	border-bottom: 0;
	background: var(--rn-color-bg-soft);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-body #modal_pay_history #pay_history_table tbody tr:last-child > td:nth-child(2) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* [수정]·[수납영수증] — 레거시 style.css `table.db-table tbody td a`(테두리 #dadada · 여백 5px 6px · 0.85em)가 공통 버튼을 덮어 되돌린다.
   아이콘 14px — 수급자 상세 본인부담금 탭(prs.css #tab-sign-02 … .rn-icon)과 같은 크기 */
.rn-body #modal_pay_history #pay_history_table td > a.rn-btn {
	display: inline-flex;
	padding: 0 var(--rn-btn-padding-x-sm);
	border-color: var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius-sm);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-size: var(--rn-btn-font-size-sm);
}

.rn-body #modal_pay_history #pay_history_table td > a.rn-btn:hover {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
}

.rn-body #modal_pay_history #pay_history_table .rn-btn .rn-icon {
	width: 0.875rem;
	height: 0.875rem;
}

/* 본인부담금 명세서 생성 확인(levy_modal.php #modal_selfbdn_initialize) — '롱텀 청구 데이터로 본인부담금 명세서가 생성됩니다.'(17px 실측 349px)가
   공통 24rem 판(글자 자리 344px)에서 두 줄로 접혔다 — 이 팝업만 28rem 로 넓혀 한 줄에 (2026-10-22 사용자 지시 '내용 한 줄로') */
.rn-body #modal_selfbdn_initialize .md-modal {
	width: min(28rem, calc(100vw - 2rem));
}

/* 같은 팝업 — 문장 왼쪽 정렬 · 아래 [보완청구 가져오기] 상자와 사이 16px, 상자와 [닫기][확인] 사이는 좁게 (2026-10-22 사용자 지시).
   상자의 인라인 margin(0 10px 16px)을 풀어 문장과 같은 왼쪽 끝에 세우고, 상자 아래 16px + 버튼 줄 위 여백 16px(종전 합 48px)을 버튼 줄 위 여백 하나로 */
.rn-body #modal_selfbdn_initialize .alert_txt {
	padding-bottom: var(--rn-space-4);
	text-align: left;
}

.rn-body #modal_selfbdn_initialize .selfbdn-supplement-opt {
	margin: 0 !important;
}

.rn-body #modal_selfbdn_initialize .btn-group.md-bottom {
	margin-top: 0;
}

/* [보완청구 가져오기] 안내 '※ 롱텀에 보완청구가 있는 수급자는 …' — 명세서 생성 · 덮어쓰기 두 팝업 공통.
   공용 파셜(longterm/common/levy_modal.php)의 인라인 13px · #666 을 리뉴얼 화면에서만 본문 14px · 글자 회색 #555 로 (2026-10-26 사용자 지시) */
.rn-body .selfbdn-supplement-opt > p {
	font-size: var(--rn-font-size-xs) !important;
	color: var(--rn-color-text-muted) !important;
}

.rn-body .md-modal-view .md-modal .alert_txt em {
	color: var(--rn-color-danger-text);
}

/* 제목 아래 점선(레거시 .md-field-group.bort) — 머리 띠 아래 구분선과 겹쳐 두 줄이 된다 */
.rn-body .md-modal-view .md-modal .md-field-group.bort {
	border-top: 0;
}

/* ---------- 삭제 확인 번호 팝업(#modal_confirmation_delete — _layout/confirmation_delete_modal.php) → 공통 팝업 모양 (2026-10-13) ----------
 * 마크업은 이미 rn-modal 이지만 파셜 안 <style>(레거시 화면 공용, id 선택자)이 회색 하단 띠 · 자체 버튼 · translate 가운데 정렬을 준다.
 * 리뉴얼 화면에서만 공통 모양으로 되돌린다 — 앞에 body.rn-body 를 붙여 그 <style> 규칙들(id + 클래스)을 이긴다.
 * 경고 아이콘·확인 번호 입력 두 칸 같은 본문 구성은 그대로 둔다. [삭제 확인]은 되돌릴 수 없는 동작이라 빨간 채움 그대로(토큰 색) */
body.rn-body #modal_confirmation_delete.modal.rn-modal {
	align-items: center;
	justify-content: center;
	background: var(--rn-color-overlay);
}

body.rn-body #modal_confirmation_delete.modal.rn-modal:is(.is-open, .md-show) {
	display: flex;
}

body.rn-body #modal_confirmation_delete .modal_body.confirm-delete-modal {
	position: relative;
	top: auto;
	left: auto;
	width: min(26rem, calc(100vw - 2rem));
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-sm);
	transform: none;
}

body.rn-body #modal_confirmation_delete .modal-header {
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
}

body.rn-body #modal_confirmation_delete .modal-header .modal-tit {
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
}

body.rn-body #modal_confirmation_delete .modal-section.confirm-delete-modal__body {
	padding: var(--rn-space-6) var(--rn-space-5) var(--rn-space-4);
}

body.rn-body #modal_confirmation_delete .confirm-delete-modal__icon {
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger);
}

body.rn-body #modal_confirmation_delete .confirm-delete-modal__title {
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-md);
}

body.rn-body #modal_confirmation_delete .confirm-delete-modal__warning {
	color: var(--rn-color-danger-text);
	font-size: var(--rn-font-size-xs);
}

body.rn-body #modal_confirmation_delete :is(.confirm-delete-modal__code, .confirm-delete-modal__input) {
	height: auto;
	min-height: var(--rn-control-min-height);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size);
	color: var(--rn-color-text);
}

body.rn-body #modal_confirmation_delete .confirm-delete-modal__code {
	background: var(--rn-color-bg-soft);
}

/* 안내 글자('확인 번호를 동일하게 입력') — 레거시 12px · #9AA0A8(longterm/css/modal.css · css/modal.css)을 입력 글자와 같은 공통 크기 · 안내 회색으로
   (2026-11-04 사용자 지시 '인풋 안 글자 좀 작아') */
body.rn-body #modal_confirmation_delete .confirm-delete-modal__input::placeholder {
	font-size: var(--rn-control-font-size);
	color: var(--rn-color-text-subtle);
	opacity: 1;
}

/* 칸을 누르면 안내 글자를 바로 감춘다 — 브라우저 기본은 글자를 쳐야 사라져 회색 글자가 커서 뒤에 남아 보였다 (2026-11-04 사용자 지적) */
body.rn-body #modal_confirmation_delete .confirm-delete-modal__input:focus::placeholder {
	color: transparent;
}

body.rn-body #modal_confirmation_delete .confirm-delete-modal__input:focus {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: var(--rn-control-focus-ring);
}

body.rn-body #modal_confirmation_delete .modal-footer.confirm-delete-modal__footer {
	gap: var(--rn-space-2);
	padding: var(--rn-space-4) var(--rn-space-5);
	border-top: 0;
	background: transparent;
}

body.rn-body #modal_confirmation_delete .confirm-delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem;
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border-radius: var(--rn-btn-radius);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: 1;
}

body.rn-body #modal_confirmation_delete .confirm-delete-btn--cancel {
	border: 1px solid var(--rn-btn-ghost-border);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
}

body.rn-body #modal_confirmation_delete .confirm-delete-btn--cancel:hover {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
}

body.rn-body #modal_confirmation_delete .confirm-delete-btn--submit {
	min-width: 6rem;
	border: 1px solid var(--rn-color-danger);
	background: var(--rn-color-danger);
	color: var(--rn-color-on-brand);
	font-weight: var(--rn-font-weight-semibold);
}

body.rn-body #modal_confirmation_delete .confirm-delete-btn--submit:hover {
	border-color: var(--rn-color-danger-text);
	background: var(--rn-color-danger-text);
}

/* 버튼 그림자 없음 — 공통 버튼처럼 평평하게 (2026-11-04 사용자 지시 '버튼에 그림자는 빼줘'). 레거시 화면 CSS 의 button 그림자를 상태 무관하게 끈다.
   색은 가이드 토큰 그대로: [삭제 확인] 채움 #EB003B(--rn-color-danger) · 호버 #D50136(--rn-color-danger-text) */
body.rn-body #modal_confirmation_delete .confirm-delete-btn,
body.rn-body #modal_confirmation_delete .confirm-delete-btn:is(:hover, :focus, :active) {
	box-shadow: none !important;
	text-shadow: none;
}

/* ---- 상태변화 기록지 (#modal_prs_status_change — 레거시 마크업 longterm/prs/_status_change_modal.php,
   longterm/css/status_change_modal.css 위에 덧댄다) — 공통 디자인 (2026-10-14) ---- */

/* 작성일 — 공통 날짜 입력칸(진회색 달력 아이콘). 브라우저 date 칸은 JS(prs_records__.js upgradeScRecordDate)가 공통 달력 칸으로 바꾼다 */
/* 작성일 · 작성자 칸 · 서명 줄([미요청][작성 및 서명요청])을 한 폭(--sc-field-w)으로 — 세 줄의 오른쪽 끝이 한 열 (2026-10-28 사용자 지시
   '작성일 · 작성자 검색 인풋 늘려서 작성 및 서명요청 버튼 끝에 열 맞춰줘'). 서명 줄은 상태 칸 104 + 5 + 버튼이 나머지를 채워 글자 길이와 상관없이 끝이 같다.
   종전: 작성일 8.75rem · 작성자 최대 200px · 서명 줄은 버튼 글자 폭(끝 227px) */
/* 2026-11-03 사용자 지시 '작성자 내용 한 줄로 — [미요청][작성 및 서명요청]을 검색 인풋 오른쪽으로':
   작성자 칸 + 서명 줄을 한 줄에 둔다(접지 않는다). 작성일 · 작성자 칸은 같은 폭(--sc-field-w 11rem)으로 왼쪽 열을 맞추고,
   서명 줄은 글자 폭만큼 그 오른쪽에 붙는다 — 칸 폭 약 443px 에 176 + 8 + 104 + 5 + 버튼(약 125) 으로 들어간다.
   종전(10-28): 세 줄을 15rem 한 폭으로 맞춰 서명 줄이 작성자 칸 아래 둘째 줄로 내려갔다 */
.rn-body #modal_prs_status_change {
	--sc-field-w: 11rem;
}

/* 2026-11-09 사용자 지시 '작성자 부분에 가로스크롤 안 생기게' → '[작성 및 서명요청][서명 삭제] 아래로 내리지 말고 한 줄로':
   서명 뒤 [서명 삭제]까지 붙으면 한 줄(작성자 칸 176 + 상태 104 + 두 버튼)이 칸 폭(약 443px)을 넘어
   칸 안에 가로 스크롤(레거시 status_change_modal.css .sc-writer-cell overflow-x:auto)이 생겼다.
   이제 한 줄은 그대로 두고 **작성자 칸만** 넘친 만큼 줄어든다(아래 .sc-writer-picker flex-shrink 1) — 평소(버튼 하나)에는 줄 일이 없어 작성일 칸과 같은 폭 그대로다.
   종전(같은 날 1차): 넘치면 서명 줄이 작성자 칸 아래로 내려갔다(flex-wrap wrap) — 사용자가 되돌림 */
.rn-body #modal_prs_status_change .sc-writer-sign-row {
	flex-wrap: nowrap;
	gap: var(--rn-space-2);
}

.rn-body #modal_prs_status_change .sc-record-tb .sc-writer-cell {
	overflow-x: visible;
}

.rn-body #modal_prs_status_change .sc-writer-picker {
	flex: 0 1 var(--sc-field-w);
	width: var(--sc-field-w);
	min-width: 6rem;
	max-width: var(--sc-field-w);
}

.rn-body #modal_prs_status_change .sc-sign-inline {
	flex: 0 0 auto;
	width: auto;
	min-height: 0;
	flex-wrap: nowrap;
}

.rn-body #modal_prs_status_change .sc-sign-inline .prs-record-btn {
	flex: 0 0 auto;
	min-width: 0;
	white-space: nowrap;
}

.rn-body #modal_prs_status_change #sc_record_date {
	box-sizing: border-box;
	width: var(--sc-field-w);
	max-width: none; /* 열 때 prs_records__.js upgradeScRecordDate 가 공통 날짜칸 .rn-input--date(forms.css 최대 10rem)를 붙여 160px 에서 멈췄다 (2026-10-28 '작성일이 자꾸 그대로') */
	min-width: 0; /* 레거시 달력 칸(care-datepicker-input) 최소 150px 을 푼다 */
	height: var(--rn-control-min-height);
	padding: 0 2rem 0 var(--rn-control-padding-x-sm);
	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;
}

/* 작성자 — 공통 입력칸 + 진회색 돋보기(누르면 작성자 선택이 열린다). 종전 파란 hover·포커스 번짐 */
.rn-body #modal_prs_status_change #sc_writer_name {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	padding: 0 2rem 0 var(--rn-control-padding-x-sm);
	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' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></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);
}

.rn-body #modal_prs_status_change #sc_writer_name:hover:not(:disabled) {
	border-color: var(--rn-color-text-subtle);
	background-color: var(--rn-color-bg);
}

.rn-body #modal_prs_status_change #sc_writer_name:focus:not(:disabled) {
	border-color: var(--rn-color-brand);
	outline: none;
}

/* 잠긴 작성일도 작성자처럼 회색 · 아이콘 없음 (2026-11-06 yr_m04) — 서명요청·서명된 기록은 setStatusChangeLocked 가 둘 다 disabled 로
   잠그는데(prs_records__.js), 작성일만 위 규칙의 흰 바탕 · 달력 아이콘이 그대로라 고칠 수 있는 칸처럼 보였다(레거시는 회색 읽기전용으로 보인다) */
.rn-body #modal_prs_status_change #sc_writer_name:disabled,
.rn-body #modal_prs_status_change #sc_record_date:disabled {
	background-color: var(--rn-color-bg-muted);
	background-image: none;
	color: var(--rn-color-text-muted);
}

/* 작성일 달력 — 그 주(월~일)에 서비스 일정이 있는 날 강조 (2026-11-12 사용자 지시: 선택 제한이 아니라 표시).
   클래스는 prs_records__.js scRecordDateBeforeShowDay 가 붙인다. 달력 팝업(#ui-datepicker-div)은 모달 밖 body 끝에 붙어
   #modal_prs_status_change 로 가둘 수 없다 — 이 기능 전용 클래스(sc-dp-has-schedule)로만 건다.
   오늘(ui-state-highlight)·선택(ui-state-active)은 배경색을 쓰므로 겹치지 않게 **굵은 글자 + 아래 점**으로 표시한다. */
.rn-body .ui-datepicker.care-datepicker td.sc-dp-has-schedule a {
	position: relative;
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-bold);
}

.rn-body .ui-datepicker.care-datepicker td.sc-dp-has-schedule a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--rn-color-brand);
}

.rn-body .ui-datepicker.care-datepicker td.sc-dp-has-schedule a.ui-state-active::after {
	background: var(--rn-color-on-brand);
}

/* 서명 상태 칸(미요청·요청일·서명) · [작성 및 서명요청] — 입력칸과 같은 높이·테두리 */
.rn-body #modal_prs_status_change .sc-signature-image-wrap {
	height: var(--rn-control-min-height);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
}

.rn-body #modal_prs_status_change .sc-signature-image-wrap img {
	max-height: calc(var(--rn-control-min-height) - 6px);
}

.rn-body #modal_prs_status_change .sc-signature-status {
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
}

.rn-body #modal_prs_status_change .sc-sign-inline .prs-record-btn {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	padding: 0 var(--rn-space-3);
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
}

.rn-body #modal_prs_status_change .sc-sign-inline .prs-record-btn:hover:not(:disabled) {
	border-color: var(--rn-color-text-subtle);
	background: var(--rn-color-bg-hover);
}

/* 비고 아래(표 마지막 줄) 구분선 없음 — 하단 버튼 위에 선을 두지 않는 팝업 공통과 같게 */
.rn-body #modal_prs_status_change .sc-record-tb,
.rn-body #modal_prs_status_change .sc-record-tb tr:last-child > :is(th, td) {
	border-bottom: 0;
}

/* 하단 버튼 — 공통 팝업 버튼 크기(종전 레거시 42px · 15px) */
.rn-body #modal_prs_status_change .btn-group.md-bottom :is(.btn-db, #btn_sc_print) {
	height: var(--rn-btn-min-height);
	min-width: 5rem;
	padding: 0 var(--rn-space-4);
	border-radius: var(--rn-btn-radius);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
}

/* [삭제] — 공통 삭제 버튼(.rn-btn--danger: 빨간 테두리·글자). 종전 회색 */
.rn-body #modal_prs_status_change #btn_sc_delete {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-bg);
	color: var(--rn-color-danger-text);
}

.rn-body #modal_prs_status_change #btn_sc_delete:hover:not(:disabled) {
	background: var(--rn-color-danger-soft);
}

/* [출력] — 공통 출력 버튼(.rn-btn--print: 남색 테두리 + 왼쪽 프린터 선 그림). 종전 파란 PNG 아이콘 + 오른쪽 아이콘이 겹쳐 둘이었다 */
.rn-body #modal_prs_status_change #btn_sc_print {
	gap: var(--rn-space-1);
	border: 1px solid var(--rn-btn-action-color);
	background: var(--rn-color-bg);
	background-image: none;
	color: var(--rn-btn-action-color);
}

.rn-body #modal_prs_status_change #btn_sc_print:hover:not(:disabled) {
	border-color: var(--rn-btn-action-hover-bg);
	background: var(--rn-btn-action-hover-bg);
	color: var(--rn-btn-action-hover-text);
}

.rn-body #modal_prs_status_change #btn_sc_print::after {
	content: none;
	display: none;
}

.rn-body #modal_prs_status_change #btn_sc_print::before {
	content: "";
	flex: none;
	width: var(--rn-btn-action-icon-size);
	height: var(--rn-btn-action-icon-size);
	background-color: currentColor;
	-webkit-mask: var(--rn-icon-print) center / contain no-repeat;
	mask: var(--rn-icon-print) center / contain no-repeat;
}

/* 아직 저장 전이라 누를 수 없는 [삭제]·[출력] — 공통 비활성(흐리게)만, 색은 그대로. 레거시 :disabled 회색(#999·#CCC·#F5F5F5)을 덮는다 */
.rn-body #modal_prs_status_change #btn_sc_delete:disabled {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-bg);
	color: var(--rn-color-danger-text);
	opacity: 0.5;
	cursor: not-allowed;
}

/* 기초평가 모달 [삭제]도 저장 전에는 잠근다(PrsInvestigate.js setInvestigateRecordActions, 2026-10-21) — 위와 같은 비활성 모양 */
.rn-body .rn-investigate #prs_investigate_unique:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.rn-body #modal_prs_status_change #btn_sc_print:disabled {
	border-color: var(--rn-btn-action-color);
	background-color: var(--rn-color-bg);
	color: var(--rn-btn-action-color);
	opacity: 0.5;
	cursor: not-allowed;
}

/* [서명 삭제] — 가이드 공통 삭제 버튼(.rn-btn--danger: #EB003B 테두리 · #D50136 글자, hover 연분홍)
   (2026-10-21 사용자 지적 '원래 가이드에서 쓰는 빨강 맞아?' — 종전 레거시 #C53030 글자 · #E4A7A7 테두리) */
.rn-body #modal_prs_status_change #btn_sc_delete_sign {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-bg);
	color: var(--rn-color-danger-text);
}

.rn-body #modal_prs_status_change #btn_sc_delete_sign:hover:not(:disabled) {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger-text);
}

/* 표 글자 — 라벨·값 15px (2026-10-21 '글자 크기 너무 작다', 종전 레거시 0.9em ≈ 13.5px) */
.rn-body #modal_prs_status_change .sc-record-tb :is(th, td) {
	font-size: var(--rn-font-size-sm);
}

/* 첫 줄(대상자) 위 선 없음 — 머리 띠 아래선 바로 밑에 겹선처럼 보였다 (2026-10-21 사용자 지시) */
.rn-body #modal_prs_status_change .sc-record-tb tr:first-child > :is(th, td) {
	border-top: 0;
}

/* 라벨 열 — 레거시와 같은 130px (2026-11-06 yr_m04 사용자 지시 '레거시처럼'. 종전 184px 은 주차 안내 '10월 1주차, 09-28~10-04' 를
   한 줄에 넣으려던 폭 — 이제 레거시처럼 두 줄로 접힌다). 라벨 열 두 개(colgroup .sc-label-col)가 함께 바뀌지만 값 칸은 세 칸을 합친 칸이라 영향 없다 */
.rn-body #modal_prs_status_change .sc-record-tb .sc-label-col {
	width: 8.125rem;
}

/* 창보다 길면 입력 표만 스크롤한다 — 제목 띠와 하단 버튼 줄은 늘 보인다(리뉴얼 공통 팝업 .modal-section 과 같은 방식).
   레거시 판(.md-modal)은 최대 높이 93vh · overflow hidden 인데 본문(.md-body)은 줄지도 스크롤되지도 않아,
   넘친 아래쪽(비고 · 버튼 줄)이 잘려 안 보였다 (2026-10-23 사용자 '상태변화기록지 모달 비고 아랫부분 짤려' — 폰에서 라벨을 위로 올려 표가 길어진 뒤).
   넓은 화면도 창이 낮으면 같은 일이 생기므로 폭과 무관하게 건다 — 넘치지 않으면 모양은 종전 그대로다.
   기록 관리(#modal_prs_record_management)도 같은 틀(제목 + .prs-record-mng 표)이라 함께 건다 — 폰에서 219px 가 잘려 버튼 줄이 안 보였다 */
.rn-body :is(#modal_prs_status_change, #modal_prs_record_management) .md-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.rn-body :is(#modal_prs_status_change, #modal_prs_record_management) .md-body > .md-heading-left {
	flex: 0 0 auto;
}

/* 스크롤 막대는 판 오른쪽 끝에 — 상자를 판 안쪽 여백(20px)만큼 오른쪽으로 넓히고 그만큼 안쪽 여백을 줘 표 끝은 제자리
   (2026-10-23 사용자 '스크롤이 모달 안쪽에 붙어 있는데 오른쪽 끝에'). 막대 자리(약 10px — scrollbar.css thin)는 늘 잡아 둬
   스크롤이 생겨도 표 폭이 그대로다. 기초평가 팝업 .md-field-group 과 같은 방식 */
.rn-body :is(#modal_prs_status_change, #modal_prs_record_management) .prs-record-mng {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin-right: calc(-1 * var(--rn-space-5));
	padding-right: calc(var(--rn-space-5) - 0.625rem);
	scrollbar-gutter: stable;
}

/* 제목 띠 아래 16px 에서 첫 줄 시작 — 본인부담금 수정관리(prs.css .rn-selfbdn-form) · 보수교육 · 직원 상담 관리 팝업과 같다
   (2026-10-28 사용자 지시 '대상자 위 간격이 너무 넓다 — 16 여백 정도만, 저런 형식의 모달은 다 시작 부분 똑같이').
   같은 틀(제목 + .prs-record-mng 의 '이름 | 값' 줄 표) 네 팝업: 상태변화 기록지 · 기록 관리 · 직원인권 보호지침 · 상담결과 반영 작성.
   종전: 제목 아래 16 + 표 상자 위(레거시 prs_right_section.css .prs-record-mng margin-top) 12 + 첫 줄 칸 위 여백 10 = 38px */
.rn-body :is(#modal_prs_status_change, #modal_prs_record_management, #modal_prs_rights_guide, #modal_pyr_counsel_form) .md-body > .prs-record-mng {
	margin-top: 0;
}

/* 첫 줄 칸 위 여백 0 — 선 없는 줄 표(상태변화 기록지)만. 기록 관리 · 직원인권 보호지침 · 상담결과 반영 작성은 테두리 칸 표라 빼야
   첫 줄(대상자 · 수급자) 칸이 다른 줄과 같은 높이 · 글자 세로 가운데로 선다 (2026-10-28 사용자 지적 '수급자 글자 중앙정렬') */
.rn-body #modal_prs_status_change .prs-record-mng > .prs-record-tb > tbody > tr:first-child > :is(th, td) {
	padding-top: 0;
}

/* 터치 기기는 막대가 내용 위에 겹쳐 떠 자리를 차지하지 않는다 — 안쪽 여백을 통째로 둬야 표 끝이 아래 버튼 끝과 맞는다 */
@media (hover: none) {
	.rn-body :is(#modal_prs_status_change, #modal_prs_record_management) .prs-record-mng {
		padding-right: var(--rn-space-5);
	}
}

/* 좁은 화면(≤768) — 본문 칸이 먼저다. 라벨 열은 종전 폭으로 두고 주차 안내는 ' · ' 뒤에서 접힌다 */
@media (max-width: 768px) {
	.rn-body #modal_prs_status_change .sc-record-tb .sc-label-col {
		width: 8.125rem;
	}
}

/* 폰(≤720) — 라벨을 위로 올려 줄마다 값이 팝업 폭을 다 쓴다 (2026-10-23 사용자 '상태변화 기록지 모달 모바일에서 짤려').
   라벨 열(130px)이 옆에 있으면 값 칸이 약 130px 만 남아 작성자 칸(최소 150px)·작성일 칸(140px)이 칸 밖으로 나가 잘렸다.
   수급자 변동이력 팝업의 폰 배치(라벨 위 · 값 아래)와 같은 방식이다. 줄 사이 선은 값 아래에만 둔다 */
@media (max-width: 720px) {
	.rn-body #modal_prs_status_change .sc-record-tb,
	.rn-body #modal_prs_status_change .sc-record-tb tbody,
	.rn-body #modal_prs_status_change .sc-record-tb tr,
	.rn-body #modal_prs_status_change .sc-record-tb :is(th, td) {
		display: block;
		width: auto;
	}

	.rn-body #modal_prs_status_change .sc-record-tb colgroup {
		display: none;
	}

	.rn-body #modal_prs_status_change .sc-record-tb th {
		padding: var(--rn-space-3) 0 var(--rn-space-1);
		border: 0;
	}

	/* 제목 띠 아래 첫 줄(대상자) — 제목 아래 16px 만 남긴다. 종전에는 표 상자 위 여백(레거시 12px)과 줄 위 여백(12px)이 더해져
	   40px 가 떴다 (2026-10-23 사용자 '대상자 위에 여백 너무 크다') */
	.rn-body #modal_prs_status_change .prs-record-mng {
		margin-top: 0;
	}

	.rn-body #modal_prs_status_change .sc-record-tb tr:first-child > th {
		padding-top: 0;
	}

	.rn-body #modal_prs_status_change .sc-record-tb td {
		padding: 0 0 var(--rn-space-3);
		border-width: 0 0 1px;
	}

	.rn-body #modal_prs_status_change .sc-record-tb tr:last-child > td {
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* 상태변화기록 머리 — [제목 ··· AI 보정] 한 줄, 그 아래 주차 안내.
	   th 를 고르는 위 규칙(:is(th, td) → block)보다 세게 th.sc-content-heading 으로 잡는다 */
	.rn-body #modal_prs_status_change .sc-record-tb th.sc-content-heading {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--rn-space-2);
	}

	.rn-body #modal_prs_status_change .sc-content-heading > span {
		flex: 1 1 auto;
	}

	/* 넓은 화면에서는 라벨 열을 꽉 채우던 단추(flex 1 1 auto) — 여기서는 글자 폭만 */
	.rn-body #modal_prs_status_change .sc-content-heading .sc-ai-actions {
		order: 2;
		flex: 0 0 auto;
		margin-top: 0;
	}

	.rn-body #modal_prs_status_change .sc-content-heading .sc-ai-btn {
		flex: 0 0 auto;
	}

	/* 작성자 — 선택 칸이 한 줄을 다 쓰고, 서명 칸 · [작성 및 서명요청]은 그 아래 줄 (넓은 화면의 한 줄 nowrap 을 푼다) */
	.rn-body #modal_prs_status_change .sc-writer-sign-row {
		flex-wrap: wrap;
	}

	.rn-body #modal_prs_status_change .sc-writer-picker {
		flex: 1 1 100%;
		min-width: 0;
		max-width: none;
	}

	/* 작성일 · 서명 줄도 작성자 칸처럼 한 줄을 다 쓴다 — 위 넓은 화면 규칙(세 줄 같은 폭 --sc-field-w)과 짝 */
	.rn-body #modal_prs_status_change #sc_record_date {
		width: 100%;
	}

	.rn-body #modal_prs_status_change .sc-sign-inline {
		flex: 1 1 100%;
		width: 100%;
	}

	.rn-body #modal_prs_status_change .sc-sign-inline {
		min-height: 0;
	}

	/* 버튼이 서명 줄의 남는 폭을 채운다 (넓은 화면은 글자 폭) */
	.rn-body #modal_prs_status_change .sc-sign-inline .prs-record-btn {
		flex: 1 1 auto;
	}

	.rn-body #modal_prs_status_change .sc-record-tb .sc-writer-cell {
		overflow-x: visible;
	}
}

/* 작성일 칸 + 그 주 안내('11월 2주차 (11-02~11-08)')를 한 줄로 (2026-11-12 사용자 지시 '작성일 날짜 박스 오른쪽으로, N주차도').
   #sc_week_label 은 마크업(레거시 공유 _status_change_modal.php)에선 '상태변화기록' 머리칸에 있고,
   리뉴얼 JS(prs_records__.js placeScWeekLabel)가 처음 열 때 작성일 칸과 함께 .sc-record-date-row 로 묶는다.
   좁은 폭(아래 @media 의 #sc_record_date width 100%)에서는 안내가 칸 아래 줄로 내려간다(flex-wrap).
   종전(11-06~): 머리칸 안에 기간만 14px 회색 */
.rn-body #modal_prs_status_change .sc-record-date-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-1) var(--rn-space-3);
}

.rn-body #modal_prs_status_change .sc-record-date-row .sc-week-label {
	margin: 0;
	font-size: var(--rn-control-font-size-sm); /* 작성일 칸 글자와 같은 14px */
	font-weight: var(--rn-font-weight-regular);
	color: var(--rn-color-text-muted);
	line-height: 1.45;
	white-space: nowrap;
}

.rn-body #modal_prs_status_change .sc-record-date-row .sc-week-label:empty {
	display: none;
}

.rn-body #modal_prs_status_change .sc-record-date-row .sc-week-no {
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text);
}

/* 서명 상태 문구(미요청·요청일) 14px — 칸(104px)에 '2026-10-01' 이 든다 */
.rn-body #modal_prs_status_change .sc-signature-status {
	font-size: var(--rn-font-size-xs);
}

/* AI 보정 단추 — 작은 단추 공통 글자(13px, 종전 12px).
   글자를 13px 로 키우자 라벨 열(130px · 쓸 폭 106px, 옆 설명 [?] 20px)에서 'AI 보정'(42px)이 1px 모자라 'AI 보…'로 말줄임됐다
   (2026-11-11 사용자 'AI 버튼 글자 짤려'). 아이콘과 글자 사이 5 → 4px, 자간 .3px → 0 으로 자리를 내고, 이 단추만 말줄임을 끈다 */
.rn-body #modal_prs_status_change .sc-content-heading .sc-ai-btn {
	gap: 4px;
	font-size: var(--rn-btn-font-size-sm);
	letter-spacing: 0;
}

.rn-body #modal_prs_status_change .sc-content-heading .sc-ai-btn .ai-correct-btn__label {
	overflow: visible;
	text-overflow: clip;
}

/* 본문 · 비고 입력칸 — 공통 입력칸(테두리 #C6C6C6 · 6px 모서리 · 14px · 흐린 안내 글자) */
.rn-body #modal_prs_status_change .sc-record-tb textarea.prs-record-input {
	padding: var(--rn-space-2) var(--rn-control-padding-x-sm);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
	line-height: 1.5;
}

.rn-body #modal_prs_status_change .sc-record-tb textarea.prs-record-input::placeholder {
	color: var(--rn-color-text-subtle);
}

.rn-body #modal_prs_status_change .sc-record-tb textarea.prs-record-input:focus {
	border-color: var(--rn-color-brand);
	outline: none;
	box-shadow: none;
}

/* AI 보정 비교 모달 — 왼쪽 원문 · 오른쪽 보정 결과, 아래 [닫기] [재보정] [적용] (2026-10-29 사용자 지시).
   마크업은 prs_records__.js buildStatusChangeAiCompare 가 만든다(뷰는 레거시와 공유라 심지 않는다).
   상태변화 기록지 위에 떠야 한다 — 기록지는 열릴 때 prs_records__.js 가 **인라인 z-index 3500** 을 박고(기록 모달 대역 3500~5000,
   기록지 계열 최대 9999 — longterm/css/ai_correct_btn.css 의 설명 모달 주석), 처음 잡았던 2100 은 그 뒤에 깔려 아무 일도 안 일어난 것처럼 보였다
   (2026-10-29 UI 검증). 기준값 10000 — 기록 모달 대역 위, AI 설명 모달(10050) · 달력(12000) · 서명(13000) · 공용 확인 모달(100000) 아래.
   두 칸을 나란히 읽어야 해 기본 팝업 폭(32rem)보다 넓게, 좁은 화면(폰)에서는 위아래로 쌓는다 */
.rn-modal.sc-ai-compare-modal {
	--rn-z-modal: 10000;
}

.rn-modal.sc-ai-compare-modal .modal_body {
	width: min(56rem, calc(100vw - 2rem));
}

/* 하단 [닫기] [재보정] [적용] 은 가운데 (2026-10-29 사용자 지시 — 공용 팝업은 오른쪽 정렬) */
.rn-modal.sc-ai-compare-modal .modal-footer {
	justify-content: center;
}

/* [재보정] 중 전역 로딩이 이 창 뒤에서 돌던 문제(2026-10-29)는 파일 끝 '요청 중 진행 표시' 공통 규칙(--rn-z-progress)이 맡는다 */

.rn-modal.sc-ai-compare-modal .sc-ai-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rn-space-4);
}

.rn-modal.sc-ai-compare-modal .sc-ai-compare__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rn-modal.sc-ai-compare-modal .sc-ai-compare__label {
	margin-bottom: var(--rn-space-2);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
}

.rn-modal.sc-ai-compare-modal .sc-ai-compare__col--result .sc-ai-compare__label {
	color: var(--rn-color-brand);
}

.rn-modal.sc-ai-compare-modal .sc-ai-compare__text {
	box-sizing: border-box;
	width: 100%;
	min-height: 16rem;
	resize: none;
	line-height: 1.6;
}

/* 원문은 고칠 수 있는 칸(2026-10-29 사용자 지시) — 공통 입력칸 모양 그대로(.rn-textarea), [재보정] 요청 중에만 잠겨 회색.
   보정 결과는 읽기 전용 · 고를 대상이라 브랜드 연한 바탕으로 구분한다 */
.rn-modal.sc-ai-compare-modal .sc-ai-compare__col:not(.sc-ai-compare__col--result) .sc-ai-compare__text[readonly] {
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
}

.rn-modal.sc-ai-compare-modal .sc-ai-compare__col--result .sc-ai-compare__text {
	border-color: var(--rn-color-brand);
	background: var(--rn-color-brand-soft);
}

/* 원문을 고친 뒤 결과가 옛 원문 기준일 때 — 결과 칸 아래 한 줄 */
.rn-modal.sc-ai-compare-modal .sc-ai-compare__note {
	margin: var(--rn-space-2) 0 0;
	color: var(--rn-color-brand);
	font-size: var(--rn-font-size-xs, 0.8125rem);
	line-height: 1.4;
}

.rn-modal.sc-ai-compare-modal .sc-ai-compare__note[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.rn-modal.sc-ai-compare-modal .sc-ai-compare {
		grid-template-columns: minmax(0, 1fr);
	}

	.rn-modal.sc-ai-compare-modal .sc-ai-compare__text {
		min-height: 10rem;
	}
}

/* ---- 기록 관리 (#modal_prs_record_management — 레거시 마크업 longterm/prs/modal.php, longterm/css/prs_right_section.css 위에 덧댄다) ----
 * 다른 리뉴얼 팝업 입력 표(tables.css .rn-modal .rn-form-table)와 같은 모양으로 (2026-10-21 사용자 지시 '표 배경 연한 남색으로 다른 데랑 형식 맞춰주고
 * 인풋도 공통 디자인'): 이름 칸 #EDF1F5 바탕 · 왼쪽 정렬 · 굵게, 선 #D8D8D8, 글자 15px(종전 13.5px).
 * 입력칸(날짜·선택·기타 메모·특이사항)은 공통 입력칸, 줄 안 단추([이력보기] · [세부변경 관리] …)는 공통 작은 회색 단추 */
.rn-body #modal_prs_record_management .prs-record-tb :is(th, td) {
	padding: var(--rn-space-2) var(--rn-space-3);
	border: 1px solid var(--rn-color-border);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm);
	line-height: 1.45;
}

.rn-body #modal_prs_record_management .prs-record-tb th {
	width: 9rem;
	background: var(--rn-table-th-bg);
	color: var(--rn-table-th-color);
	font-weight: var(--rn-font-weight-semibold);
	text-align: left;
	white-space: nowrap;
}

/* 날짜 — 고를 수 없는 칸(readonly)이라 공통 읽기 전용 입력칸 모양(연회색 바탕 · 흐린 글자) */
.rn-body #modal_prs_record_management #prs_record_date {
	box-sizing: border-box;
	width: 8.75rem;
	height: var(--rn-control-min-height);
	padding: 0 var(--rn-control-padding-x-sm);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
	font-variant-numeric: tabular-nums;
}

/* 수급현황 선택 — 공통 선택칸(.rn-select--sm: 36px · 진회색 꺾쇠) */
.rn-body #modal_prs_record_management .prs-record-select {
	box-sizing: border-box;
	min-width: 8.5rem;
	height: var(--rn-control-min-height);
	padding: 0 1.75rem 0 var(--rn-control-padding-x-sm);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg) var(--rn-control-chevron) no-repeat right 0.5rem center;
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
	cursor: pointer;
}

.rn-body #modal_prs_record_management .prs-record-select:focus {
	border-color: var(--rn-color-brand);
	outline: none;
	box-shadow: none;
}

/* 줄 안 단추 — 공통 작은 회색 단추(.rn-btn--sm.rn-btn--ghost: 32px 줄에서 보이게 30px · 13px 글자) */
.rn-body #modal_prs_record_management :is(.prs-record-link, .prs-record-btn) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.875rem;
	padding: 0 var(--rn-space-3);
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius-sm);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
}

.rn-body #modal_prs_record_management :is(.prs-record-link, .prs-record-btn):hover:not(:disabled) {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
}

/* 안내·상태 글자(인권지침 발송 / 작성 이력 / 본인부담 값) — 14px 흐린 글자 */
.rn-body #modal_prs_record_management .prs-record-desc,
.rn-body #modal_prs_record_management .prs-record-etc-empty {
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
}

/* 기타 현황 항목 줄 — 이름 14px 굵게 · 메모칸 공통 입력칸 */
.rn-body #modal_prs_record_management .prs-record-etc-row > label > span {
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-body #modal_prs_record_management .prs-record-etc-row > input[type="text"] {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	padding: 0 var(--rn-control-padding-x-sm);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
}

/* 특이사항 — 공통 입력칸(흰 바탕 · #C6C6C6 테두리, 종전 크림 바탕 · 주황 테두리) */
.rn-body #modal_prs_record_management #prs_record_memo {
	box-sizing: border-box;
	padding: var(--rn-space-2) var(--rn-control-padding-x-sm);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
	line-height: 1.5;
}

.rn-body #modal_prs_record_management :is(#prs_record_memo, .prs-record-etc-row > input[type="text"])::placeholder {
	color: var(--rn-color-text-subtle);
}

.rn-body #modal_prs_record_management :is(#prs_record_memo, .prs-record-etc-row > input[type="text"]):focus {
	border-color: var(--rn-color-brand);
	outline: none;
	box-shadow: none;
}

/* ---- 기타 현황 항목 관리 (#modal_prs_record_etc_item) ---- */
/* 안내 — 팝업 공통 안내 문구(.rn-modal-form__hint)와 같은 모양: 연주황 바탕 · 진한 주황 15px, 테두리 없음
   (2026-10-21 사용자 지시 '글자 너무 작고 주황색 스타일로', 종전 레거시 회색 둥근 상자 · 작은 글자) */
.rn-body #modal_prs_record_etc_item .set-round-alert {
	margin: 0 0 var(--rn-space-3);
	padding: var(--rn-space-2) var(--rn-space-3);
	border: 0;
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand-hover);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-regular);
	line-height: 1.5;
	text-align: left;
}

.rn-body #modal_prs_record_etc_item .set-round-alert em {
	color: inherit;
	font-style: normal;
	font-weight: var(--rn-font-weight-semibold);
}

.rn-body #modal_prs_record_etc_item .prs-record-etc-item-head > span:first-child {
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-body #modal_prs_record_etc_item :is(.prs-record-etc-item-count, .prs-record-etc-item-empty, .prs-record-etc-item-help) {
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
}

.rn-body #modal_prs_record_etc_item .prs-record-etc-item-rows {
	border-color: var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
}

.rn-body #modal_prs_record_etc_item .prs-record-etc-item-row > input[type="text"] {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	padding: 0 var(--rn-control-padding-x-sm);
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size-sm);
}

.rn-body #modal_prs_record_etc_item .prs-record-etc-item-row > input[type="text"]:focus {
	border-color: var(--rn-color-brand);
	outline: none;
	box-shadow: none;
}

/* [+ 항목 추가] · 행 [삭제] — 공통 작은 회색 단추. 삭제는 누르려 할 때(hover) 공통 빨강 */
.rn-body #modal_prs_record_etc_item :is(#btn_prs_record_etc_item_add, .prs-record-etc-item-del) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--rn-control-min-height);
	padding: 0 var(--rn-space-3);
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius-sm);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	cursor: pointer;
}

.rn-body #modal_prs_record_etc_item #btn_prs_record_etc_item_add {
	height: 1.875rem;
}

.rn-body #modal_prs_record_etc_item #btn_prs_record_etc_item_add:hover:not(:disabled) {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
}

.rn-body #modal_prs_record_etc_item .prs-record-etc-item-del:is(:hover, :focus-visible) {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger-text);
}

/* ---- 레거시 공용 선택 팝업(.modal-overlay > .common-modal — _layout/aligo_modal.php) — 공통 팝업 모양 (2026-10-14)
   급여명세서 · 표준약관 출력 양식 선택, 출력 유형 선택, 발송일 입력처럼 리뉴얼 판(rn-modal)이 없는 것과,
   리뉴얼 판이 꺼진 화면의 연월 · 출력 발송 선택 · 미리보기 · 첨부파일 안내가 이 모양을 쓴다.
   여닫기는 aligo_modal.php JS(display:flex 토글) 그대로 — 모양만 바꾼다:
   제목은 점선 대신 판 끝까지 이어진 실선 머리 띠, 고르는 줄은 왼쪽 정렬, 버튼 위 구분선 없음, 버튼은 공통(닫기 흰 바탕 · 확인 주황).
   (종전 급여 화면 전용 보정 payroll.css #select_payroll_renewal_entire_forms_modal 을 모든 화면 공통으로 옮겼다) ---- */
body.rn-body .modal-overlay > .common-modal {
	box-sizing: border-box;
	max-width: calc(100vw - 2rem);
	padding: 0 var(--rn-space-5) var(--rn-space-4);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-sm);
	font-size: var(--rn-font-size-xs);
	text-align: left;
}

/* 글꼴 — 리뉴얼 화면 안 레거시 마크업이 노토 산스(Noto Sans KR)로 떨어지던 곳을 프리텐다드로 (2026-11-04 사용자 지시 '폰트 아직 노토산스 같은데 프리텐다드로 다 통일') ----------
 * · 종사자 연간관리 교육 탭 — education_panel_embed.css 가 패널 뿌리(#education_panel · .edu-embed-scope)와 태그 목록(span·td·ul…)에 노토를 건다
 *   → 그 안에서 여는 팝업(참석자 등록 · 교육 일지 · 이수 기록)까지 노토였다
 * · 본인부담금 청구서 출력(#bill_print_modal) — selfbdn_bill_send.css `.bill-print-modal *` 노토
 * · 기관 연간관리 서식 폼 표 입력칸 — institution_year_record_institution_form.css `.insboard-tbl input/textarea` 노토
 * 아이콘 글꼴(FontAwesome <i> · fa- 클래스)은 건드리지 않는다. 출력 미리보기 용지(iframe 안 문서)는 별도 문서라 영향 없다 */
body.rn-body :is(#education_panel, .edu-embed-scope, #bill_print_modal),
body.rn-body :is(#education_panel, .edu-embed-scope, #bill_print_modal) :where(*:not(i, .fa, .fas, .far, .fab, .fal, [class*="fa-"])),
body.rn-body .iyr-institution-form-modal .insboard-tbl :is(input, textarea) {
	font-family: var(--rn-font-family);
}

/* 글꼴 — 레거시 `.common-modal * { font-family:'Noto Sans KR' !important }` 를 프리텐다드로 */
body.rn-body .modal-overlay > .common-modal * {
	font-family: var(--rn-font-family) !important;
}

/* 제목 머리 띠 — 좌우 여백을 걷어 선이 판 끝까지 간다(레거시: 점선 · 아래 20px) */
body.rn-body .modal-overlay > .common-modal > h2 {
	margin: 0 calc(-1 * var(--rn-space-5));
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
}

/* 본문 줄 사이 선(발송일 입력의 발송방법 · 발송일 줄)은 공통 선 색 — 버튼 바로 위 선은 없앤다(모든 팝업 공통) */
body.rn-body .modal-overlay > .common-modal .border-bottom-solid {
	border-bottom-color: var(--rn-color-border);
}

body.rn-body .modal-overlay > .common-modal > .border-bottom-solid,
body.rn-body .modal-overlay > .common-modal > .charge-wrap > .border-bottom-solid:last-child {
	border-bottom: 0;
}

/* 안내 띠(.notice — 연월 선택) — 분홍 바탕 · 주황 글자 대신 공통 안내 글(회색 바탕 · 보통 글자) */
body.rn-body .modal-overlay > .common-modal .notice {
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-regular);
	color: var(--rn-color-text-muted);
}

/* 고르는 줄(양식 · 출력 유형) — 가운데 몰림 대신 왼쪽 정렬 */
body.rn-body .modal-overlay > .common-modal .display-flex.justify-center {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--rn-space-2) var(--rn-space-5);
}

body.rn-body .modal-overlay > .common-modal :is(input[type="checkbox"], input[type="radio"]) {
	flex-shrink: 0;
	margin: 0;
}

body.rn-body .modal-overlay > .common-modal :is(input[type="checkbox"], input[type="radio"]) + label {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-regular);
	color: var(--rn-color-text);
	cursor: pointer;
}

/* 선택칸(리뉴얼 판이 꺼진 화면의 연월 선택) — 공통 선택칸 */
body.rn-body .modal-overlay > .common-modal select {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	padding: 0 1.75rem 0 var(--rn-control-padding-x-sm);
	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;
	font-size: var(--rn-control-font-size-sm);
	color: var(--rn-color-text);
}

/* 안내 문구(급여명세서 양식 — 창이 여러 개 열리는 경우) — 인라인 #E67E22 를 공통 주의 글자색으로 */
body.rn-body #payroll_renewal_entire_forms_notice {
	color: var(--rn-color-warning-text) !important;
}

/* 버튼 줄 · 버튼 — 공통 버튼(닫기 · 취소는 흰 바탕 회색 테두리, 확인은 주황 #FF4B00) */
body.rn-body .modal-overlay > .common-modal > .display-flex.justify-end:last-child {
	gap: var(--rn-space-2);
	margin-top: var(--rn-space-4);
}

body.rn-body .modal-overlay > .common-modal .btn.btn-bottom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-width: 4rem;
	height: auto;
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
	color: var(--rn-color-text);
	cursor: pointer;
	transition: background var(--rn-transition-fast), border-color var(--rn-transition-fast);
}

body.rn-body .modal-overlay > .common-modal .btn.btn-bottom:hover {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
}

body.rn-body .modal-overlay > .common-modal .btn.btn-bottom.btn-primary {
	border-color: var(--rn-color-brand);
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
}

body.rn-body .modal-overlay > .common-modal .btn.btn-bottom.btn-primary:hover {
	border-color: var(--rn-color-brand-hover);
	background: var(--rn-color-brand-hover);
}

/* 서명 칸 — 모든 화면 실선 (2026-10-15 '사인 부분 모두 실선으로 통일'). 상태변화 기록지 문서(longterm/css/status_change_document.css .scd-doc .sign-wp)의
   점선 #C9CED6 을 공통 입력칸 실선 #C6C6C6 으로. 리뉴얼 다른 서명 칸(계약서 · 업무수행일지 · 상근직원 근무)은 각 화면 CSS 에서 이미 실선 */
body.rn-body .scd-doc .sign-wp {
	border: var(--rn-control-border);
}

/* 일정 카테고리 색상 — 브라우저 기본 색 칸(회색 테두리 납작한 네모) 대신 공통 입력칸과 같은 틀(#C6C6C6 · 6px · 36px)에
   둥근 색 견본을 꽉 채운 모양. 누르면 색 고르는 창이 뜨는 것은 그대로 (2026-10-15) */
.rn-modal.todo-category-modal input[type="color"]#tc_color {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 4.5rem;
	height: var(--rn-control-min-height);
	padding: 0.25rem;
	border: var(--rn-control-border);
	border-radius: var(--rn-control-radius);
	background: var(--rn-color-bg);
	cursor: pointer;
}

.rn-modal.todo-category-modal input[type="color"]#tc_color:hover {
	border-color: var(--rn-gray-50);
}

.rn-modal.todo-category-modal input[type="color"]#tc_color:focus {
	outline: none;
	border-color: var(--rn-color-brand);
}

.rn-modal.todo-category-modal input[type="color"]#tc_color::-webkit-color-swatch-wrapper {
	padding: 0;
}

.rn-modal.todo-category-modal input[type="color"]#tc_color::-webkit-color-swatch {
	border: 0;
	border-radius: var(--rn-radius-sm);
}

.rn-modal.todo-category-modal input[type="color"]#tc_color::-moz-color-swatch {
	border: 0;
	border-radius: var(--rn-radius-sm);
}

/* ---------- 급여제공직원 변경 모니터링 현황(#modal_monitoring_status — longterm/common/_monitoring_status_modal.php,
 * 수급자 관리 · 본인부담금 · 수급자 연간관리에서 [이력보기]로 연다) — 공통 팝업 · 입력칸 · 목록 · 버튼으로 (2026-11-04 사용자 지시
 * '글자도 작고 색도 연하고 버튼도 공통으로 통일' · '검색 인풋도 공통으로') ----------
 * 레거시(longterm/css/monitoring_status_modal.css): 13px 글자 · 회색 머리글(#6B7280) · 34px 입력칸 · 왼쪽 회색 돋보기 · '×' 글자 X ·
 *   12px [관리] · 하단 위 선. 마크업은 레거시 공용이라 그대로 두고 id 로 덮는다. 머리 띠 선 · 여백은 위 .cr-status-modal__head 공통 규칙.
 * · 판 8px · 공통 그림자 / X 공통 선 그림(오른쪽 16 · 세로 가운데)
 * · 날짜 · 검색 — 공통 입력칸(36px · #C6C6C6 · 6px · 15px), 날짜는 공통 달력 그림(브라우저 달력 단추는 그 자리에 투명하게 남겨 눌린다),
 *   검색은 공통 검색칸(.rn-search)처럼 돋보기가 오른쪽 #2D2D2D 선 그림
 * · 표 — 업무관리 목록(머리 40px #EDF1F5 · 15px semibold #1D1D1D / 줄 48px · 14px #1D1D1D · 선 #D8D8D8), 변경사유는 가이드 파랑(연간관리 현황과 같다)
 * · [관리] 공통 작은 회색 라인(24px · 13px) · [닫기] 공통 회색 라인(36px), 하단 위 선 없음 */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__panel {
	border-radius: var(--rn-radius-lg);
	box-shadow: var(--rn-shadow-sm);
	font-family: var(--rn-font-family);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__head {
	position: relative;
	margin-bottom: 0;
	padding-right: var(--rn-modal-header-padding-end);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__head h2 {
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	color: var(--rn-color-text);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__head .cr-status-modal__close {
	position: absolute;
	top: 50%;
	right: var(--rn-space-4);
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent var(--rn-icon-close) center / 1rem no-repeat;
	color: transparent;
	font-size: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__filter {
	gap: var(--rn-space-2);
	padding: var(--rn-space-4) var(--rn-space-5) var(--rn-space-3);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) :is(.cr-status-modal__filter .cr-status-date, .cr-status-search input) {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	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);
	box-shadow: none;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__filter .cr-status-date {
	position: relative;
	width: 9.5rem;
	padding: 0 2rem 0 var(--rn-control-padding-x);
	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;
	font-variant-numeric: tabular-nums;
}

/* 브라우저 달력 단추 — 그림은 위 공통 달력이 대신하고, 단추는 같은 자리에 투명하게 남겨 눌리게 */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__filter .cr-status-date::-webkit-calendar-picker-indicator {
	position: absolute;
	right: 0.4rem;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0;
	cursor: pointer;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__filter .cr-status-tilde {
	color: var(--rn-color-text-muted);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-search {
	margin-left: var(--rn-space-2);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-search input {
	width: 15rem;
	padding: 0 2.25rem 0 var(--rn-control-padding-x);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-search input::placeholder {
	color: var(--rn-color-text-subtle);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) :is(.cr-status-modal__filter .cr-status-date, .cr-status-search input):focus {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: none;
}

/* 돋보기 — 공통 검색칸(.rn-search__btn: 오른쪽 0.35rem · 폭 1.75rem 가운데 · #2D2D2D 선 그림 17px). FontAwesome 글리프는 숨기고 마스크로 */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-search i {
	--rn-ms-search-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='21' y1='21' x2='15' y2='15'/%3E%3C/svg%3E");
	left: auto;
	right: calc(0.35rem + (1.75rem - 1.0625rem) / 2);
	width: 1.0625rem;
	height: 1.0625rem;
	font-size: 0;
	pointer-events: none;
	background-color: var(--rn-control-icon);
	-webkit-mask: var(--rn-ms-search-glyph) center / contain no-repeat;
	mask: var(--rn-ms-search-glyph) center / contain no-repeat;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-search i::before {
	content: none;
}

/* 표 */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__body {
	padding: 0 var(--rn-space-5);
	border-top: 0;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-table {
	font-size: var(--rn-list-font-size);
}

/* 머리글 · 칸 글자는 세로 가운데 · 한 줄 (2026-11-04 사용자 '타이틀 위에 쏠려 있고, 생년월일 한 줄로'):
   화면 쪽 레거시 표 규칙이 th 를 위로 붙이고(vertical-align) 생년월일 칸(96px)에서 1948-03-03 이 두 줄로 접혔다.
   표는 auto 폭이라 nowrap 이면 칸이 글자만큼 넓어지고, 변경사유(col 폭 없음)가 남는 폭을 받아 말줄임한다 */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-table :is(th, td) {
	vertical-align: middle;
	line-height: var(--rn-line-height-tight);
	white-space: nowrap;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-table th {
	height: var(--rn-list-head-height);
	padding: 0 var(--rn-space-2);
	border-bottom: var(--rn-list-head-line);
	background: var(--rn-table-th-bg);
	color: var(--rn-list-text);
	font-size: var(--rn-list-head-font-size);
	font-weight: var(--rn-font-weight-semibold);
	box-sizing: border-box;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-table td {
	height: var(--rn-list-row-height);
	padding: 0 var(--rn-space-2);
	border-bottom: 1px solid var(--rn-color-border);
	color: var(--rn-list-text);
	font-size: var(--rn-list-font-size);
	box-sizing: border-box;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-table td.cr-status-detail {
	color: var(--rn-color-info);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-table td.cr-status-empty {
	height: auto;
	padding: var(--rn-space-8, 2.5rem) 0;
	color: var(--rn-color-text-subtle);
}

/* [관리] — 공통 작은 회색 라인 버튼 */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-manage {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--rn-btn-min-height-sm);
	padding: 0 var(--rn-btn-padding-x-sm);
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius-sm);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-manage:hover:not(:disabled) {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
	color: var(--rn-color-text);
}

/* 하단 — 위 선 없음 · [닫기] 공통 회색 라인(36px) */
body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__foot {
	padding: var(--rn-space-4) var(--rn-space-5);
	border-top: 0;
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__foot .cr-status-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-width: 4rem;
	height: var(--rn-btn-min-height);
	min-height: var(--rn-btn-min-height);
	margin: 0;
	padding: 0 var(--rn-btn-padding-x);
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	box-shadow: none;
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
}

body.rn-body :is(#modal_monitoring_status, #modal_status_change_status) .cr-status-modal__foot .cr-status-modal__close:hover {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
}

/* ---------- 상태변화 기록 현황(#modal_status_change_status — longterm/common/_status_change_status_modal.php, 수급자 관리 ·
 * 수급자 연간관리의 상태변화 기록지 '같은 주 중복' 확인창 [이력보기]) — 위 모니터링 현황과 같은 마크업(.cr-status-*)이라 위 규칙을 함께 쓰고,
 * 이 모달에만 있는 것만 여기서 덮는다 (2026-11-05 사용자 지시 '버튼 스타일 · 모달 스타일 등 리뉴얼 버전에 맞추고 글자도 너무 작아'):
 * · 연 · 월 선택 — 공통 선택박스(36px · #C6C6C6 · 6px · 15px · 공통 꺾쇠). 레거시 34px · 13px · #D1D5DB · 파랑 포커스 링
 * · 체크 — 공통 체크박스(forms.css .rn-check 와 같은 값). 레거시는 브라우저 기본 15px
 * · 주차 기간 · 다른 달 작성일 — 레거시 12px #9CA3AF → 본문 최소 14px · 가이드 연회색 #8E8E8E
 * · [상태변화 출력] — 공통 출력 버튼(아래 프린터 출력 팝업 절의 목록에 함께 넣었다). 레거시는 연주황 채움 */
body.rn-body #modal_status_change_status .cr-status-select {
	box-sizing: border-box;
	height: var(--rn-control-min-height);
	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) var(--rn-control-chevron) no-repeat right 0.75rem center;
	box-shadow: none;
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size);
	font-weight: var(--rn-font-weight-regular);
}

body.rn-body #modal_status_change_status #scs_status_year {
	min-width: 7rem;
}

body.rn-body #modal_status_change_status #scs_status_month {
	min-width: 5.5rem;
}

body.rn-body #modal_status_change_status .cr-status-select:hover {
	border-color: var(--rn-color-border-strong);
}

body.rn-body #modal_status_change_status .cr-status-select:focus {
	outline: none;
	border-color: var(--rn-color-brand);
	box-shadow: none;
}

body.rn-body #modal_status_change_status .cr-status-table input[type="checkbox"] {
	box-sizing: border-box;
	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: var(--rn-check-bg) none center / 72% no-repeat;
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	cursor: pointer;
}

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

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

body.rn-body #modal_status_change_status .cr-status-table input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

body.rn-body #modal_status_change_status .scs-week-period {
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-font-size-xs);
}

body.rn-body #modal_status_change_status .cr-status-table td.scs-out-month {
	color: var(--rn-color-text-subtle);
}

/* 하단 [닫기] [상태변화 출력] 사이 */
body.rn-body #modal_status_change_status .cr-status-modal__foot-right {
	gap: var(--rn-space-2);
}

/* ---------- 프린터 출력 팝업 — 옵션 줄 흰 바탕 · [출력하기] = 공통 출력 버튼 (2026-11-04 사용자 지시
 * '출력하기 버튼 공통으로 맞춰주고 배경은 회색 말고 흰색 — 출력하는 프린터 팝업들 버튼 있는 배경은 다 흰색으로') ----------
 * 대상(리뉴얼 화면에 뜨는 레거시 마크업 프린터 출력 팝업 — 파셜이 레거시 화면 공용이라 마크업은 그대로 두고 여기서 덮는다):
 *   · .modal.print-modal .print-tbl-top — 종사자 연간관리 교육 현황·교육일지 출력(_page_modals.php). 레거시 modal.css #E9E9E9
 *   · #modal_cr_print .cr-print-modal__opts — 공용 프린터 출력(_print_modal.php: 수급자 관리 · 수급자 연간관리). 이미 흰 바탕
 *   · #iyr_print_modal .iyr-print-tbl-top — 기관 연간관리 출력(modal_print.php). 레거시 #e9e9e9 · 버튼 연주황 채움
 *   · #bill_print_modal .bp-options — 본인부담금 청구서 출력(bill_send_modal.php). 레거시 #e9e9e9
 *   리뉴얼 근무일지 출력(workdepartment .rn-print__toolbar)은 이미 흰 바탕이고 버튼도 마크업에서 .rn-btn--print 로 맞췄다.
 * 버튼 모양은 buttons.css .rn-btn.rn-btn--print 와 같은 값(36px · 14px · 남색 #003675 테두리·글자 + 왼쪽 프린터 그림, 호버 남색 채움).
 * 레거시 아이콘(배경 PNG · ::after)과 호버 흐림(opacity .6)은 끈다. :is() 안 id 로 레거시(@scope 포함) 규칙을 특이도로 이긴다.
 * 출력 영역(용지 뒤 회색)은 그대로 둔다 — 버튼 줄만 흰색 */
body.rn-body :is(.modal.print-modal .print-tbl-top, #modal_cr_print .cr-print-modal__opts, #iyr_print_modal .iyr-print-tbl-top, #bill_print_modal .bp-options) {
	background: var(--rn-color-bg);
	border-bottom-color: var(--rn-color-border);
}

body.rn-body :is(.modal.print-modal .print-tbl-top > .btn-print, #modal_cr_print .cr-print-exec, #iyr_print_modal #iyr_print_btn_submit, #bill_print_modal #bp_print, #modal_status_change_status .scs-status-print) {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0.375em;
	box-sizing: border-box;
	width: auto;
	height: var(--rn-btn-min-height);
	min-height: var(--rn-btn-min-height);
	margin: 0;
	padding: 0 var(--rn-btn-padding-x);
	border: 1px solid var(--rn-btn-action-color);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	box-shadow: none;
	color: var(--rn-btn-action-color);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
	letter-spacing: var(--rn-letter-spacing-tight);
	text-indent: 0;
	white-space: nowrap;
	opacity: 1;
	cursor: pointer;
	transition: background var(--rn-transition-fast), border-color var(--rn-transition-fast), color var(--rn-transition-fast);
}

body.rn-body :is(.modal.print-modal .print-tbl-top > .btn-print, #modal_cr_print .cr-print-exec, #iyr_print_modal #iyr_print_btn_submit, #bill_print_modal #bp_print, #modal_status_change_status .scs-status-print):is(:hover, :focus, :active):not(:disabled) {
	border-color: var(--rn-btn-action-hover-bg);
	background: var(--rn-btn-action-hover-bg);
	color: var(--rn-btn-action-hover-text);
	opacity: 1;
}

body.rn-body :is(.modal.print-modal .print-tbl-top > .btn-print, #modal_cr_print .cr-print-exec, #iyr_print_modal #iyr_print_btn_submit, #bill_print_modal #bp_print, #modal_status_change_status .scs-status-print)::before {
	content: "";
	display: block;
	flex: none;
	width: var(--rn-btn-action-icon-size);
	height: var(--rn-btn-action-icon-size);
	background-color: currentColor;
	-webkit-mask: var(--rn-icon-print) center / contain no-repeat;
	mask: var(--rn-icon-print) center / contain no-repeat;
	pointer-events: none;
}

body.rn-body :is(.modal.print-modal .print-tbl-top > .btn-print, #modal_cr_print .cr-print-exec, #iyr_print_modal #iyr_print_btn_submit, #bill_print_modal #bp_print, #modal_status_change_status .scs-status-print)::after {
	content: none;
	display: none;
}

body.rn-body :is(.modal.print-modal .print-tbl-top > .btn-print, #modal_cr_print .cr-print-exec, #iyr_print_modal #iyr_print_btn_submit, #bill_print_modal #bp_print, #modal_status_change_status .scs-status-print):disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 머리 띠 — 공통 팝업 머리(.rn-modal .modal-header)와 같게 (2026-11-04 사용자 '팝업 스타일도'):
 * 위아래 12 · 왼쪽 16 · 제목 18px 굵게 · 끝까지 이어진 #D8D8D8 아랫선 · X 는 공통 선 그림(회색 상자 없음) 오른쪽 16 · 세로 가운데.
 * 종전: 교육 현황(.modal.print-modal — 19.2px 보통 굵기 · #EEE 선 · X 가 위로 13px) · 공용 출력(#modal_cr_print — 17px · X 가 '×' 글자) ·
 * 기관 연간관리 출력(16/20 패딩 · 회색 둥근 상자 X) · 청구서 출력(53px 고정 높이 · 19.2px 보통 굵기 · PNG X).
 * 공용 출력의 '×' 글자는 숨기고(font-size 0) 그림으로 그린다. 레거시 .btn-modal-close 의 PNG !important 는 그림 줄 !important 로 넘는다 */
body.rn-body :is(.modal.print-modal:not(.rn-modal) > .modal_body > .modal-header, #modal_cr_print .cr-status-modal__head, #iyr_print_modal .iyr-print-modal-header, #bill_print_modal .bp-header) {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: auto;
	margin: 0;
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	background: var(--rn-color-bg);
	box-sizing: border-box;
}

body.rn-body :is(.modal.print-modal:not(.rn-modal) > .modal_body > .modal-header > .modal-tit, #modal_cr_print #cr_print_title, #iyr_print_modal .iyr-print-modal-header__title, #bill_print_modal .bp-title) {
	margin: 0;
	padding: 0;
	height: auto;
	font-family: var(--rn-font-family);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
	letter-spacing: var(--rn-letter-spacing-tight);
	color: var(--rn-color-text);
}

body.rn-body :is(.modal.print-modal:not(.rn-modal) > .modal_body > .modal-header > .btn-modal-close, #modal_cr_print .cr-print-close, #iyr_print_modal #iyr_print_btn_close_x, #bill_print_modal .bp-close) {
	position: absolute;
	top: 50%;
	right: var(--rn-space-4);
	width: 2rem;
	height: 2rem !important; /* 레거시 .btn-modal-close 높이 !important(36px)를 넘는다 — 공통 X 와 같은 32 */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	background: transparent var(--rn-icon-close) center / 1rem no-repeat !important;
	color: transparent;
	font-size: 0;
	line-height: 0;
	opacity: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

body.rn-body :is(.modal.print-modal:not(.rn-modal) > .modal_body > .modal-header > .btn-modal-close, #modal_cr_print .cr-print-close, #iyr_print_modal #iyr_print_btn_close_x, #bill_print_modal .bp-close):hover {
	background-color: transparent;
}

/* ---------- 폰 폭(≤767) — 팝업 안 [출력] 버튼은 뺀다 (2026-10-16 사용자 지시 "모바일에서는 팝업에 출력 기능은 다 빼고") ----------
 * 폰은 인쇄를 못 한다(화면 하단 줄의 출력 버튼을 빼 온 것과 같은 규칙). 리뉴얼 팝업(.rn-modal)과 리뉴얼 화면 안의 레거시 마크업 팝업(.md-modal-view)을 함께 잡는다.
 *   · 클래스: .rn-btn--print(리뉴얼 출력 버튼 공통) · .btn-print(레거시 출력 버튼)
 *   · 클래스가 다른 출력 전용 버튼: 상태변화기록지 [출력](#btn_sc_print) · 저장 뒤 출력 확인의 [출력](#sc_print_confirm_print) ·
 *     세부변경사유서 [출력](.cr-status-print) · 인지활동 문항·일정표·난이도 테스트지 출력 ·
 *     급여제공직원 변경 모니터링 [출력](#btn_print_change_employee_monitor · 문서작성 판 [개별출력] .each-print — 2026-10-29 사용자 지적) ·
 *     기초평가 인지기능·모니터링 [출력](#print_investigate_req 중 .btn-st.submit 판 — 낙상·이동·욕구는 .btn-print 라 이미 빠졌다)
 *   · 문서작성 판 모니터링 팝업은 .rn-modal 이 아닌 레거시 .modal 셸이라 그 셸도 함께 잡는다
 * [남기는 것] 출력과 발송을 함께 하는 버튼 — 계약서 [출력 / 발송 (서명요청)](#btn_print_standard · #btn_print_change). 발송은 폰에서도 쓴다.
 *   현금영수증 발행목록 [출력](.cb-act-print)은 영수증 보기 창을 여는 것이라 남긴다.
 *   일괄 출력 팝업(수급자 명단·서식·라벨, 요양보호사 현황 등)은 여는 하단 줄([기타 기능])이 폰에서 통째로 빠져 열 수 없다 */
@media (max-width: 767px) {
	body.rn-body :is(.rn-modal, .md-modal-view, .modal) :is(.rn-btn--print, .btn-print, #btn_sc_print, #sc_print_confirm_print, .cr-status-print, #print_each_question, #print_program_schedule, .btn-level-evaluation, #btn_print_change_employee_monitor, .each-print, #print_investigate_req):not(#btn_print_standard, #btn_print_change) {
		display: none !important;
	}
}

/* ---------- 다음(Daum) 우편번호 레이어(#layer) — 화면보다 크면 잘리던 것 (2026-10-26 사용자 지시 '우편수령주소 주소 검색도 모바일에서 짤려보여') ----------
 * 레이어를 여는 initLayerPosition() 이 폭 580 · 높이 600px 고정에 left/top 을 (창 - 580) / 2 로 인라인에 적는다 →
 * 375 폭이면 left 가 -103px 이라 양쪽이 잘리고, 높이가 600px 안 되는 창은 위아래가 잘렸다.
 * 같은 함수 사본이 화면마다 있어(renewal/prs/modal.php · partials/daum_postcode_layer.php · payroll/_employee_panel.php ·
 * employee_right_section.js) CSS 한 곳에서 덮는다 — 가운데 자리는 transform 으로, 폭 · 높이는 창 안(가장자리 16px)으로.
 * 인라인 left/top 을 이기려고 !important. #btnCloseLayer(닫기 그림)를 품은 #layer 만 잡는다. 속 iframe 은 100% 라 따라 줄어든다 */
body.rn-body #layer:has(> #btnCloseLayer) {
	top: 50% !important;
	left: 50% !important;
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}

/* ---------- [+ 사진찾기] · [+ 자료찾기] 첨부 칸 — 한 모양으로 (2026-10-26 사용자 지시 '복지포상 수정 모달 사진찾기 점선 부분을 직원 교육 일지 현장 사진 사진찾기 같은
 * 얇은 라운딩 점선 · 얇은 + 로 다 통일, 자료찾기도') ----------
 * 기준: 직원 교육 일지 현장 사진 칸(레거시 education_panel_embed.css — 1px 점선 · 8px 라운드 · 연회색 바탕 · 작은 회색 글자).
 * 대상: 직원 교육 일지(.education-register-modal — 종사자 연간관리 교육 탭) · 기관 연간관리 문서 폼(.iyr-institution-form-modal —
 *   복지포상 · 운영위원회 회의록 · 직원 회의록 · 사례관리 회의록, institution/partials/form_*.php).
 *   기관 폼은 종전 네모 점선 + 굵은(700) '+' 글자라 + 가 두꺼워 보였다.
 * 칸 크기(사진 88×88 · 100×120, 자료 줄 높이)는 화면마다 그대로 두고 선 · 라운드 · 바탕 · 글자만 맞춘다. 글자 + 사진찾기 는 마크업 글자라 굵기로 + 를 얇게 한다.
 * 색은 토큰만(선 #C6C6C6 · 바탕 #F8F8F8 · 글자 #8E8E8E, 마우스를 올리면 선 #8E8E8E · 글자 #1D1D1D). cursor 는 두지 않는다 — 잠긴 일지(.education-content-locked)의 not-allowed 를 남긴다 */
body.rn-body :is(.education-register-modal .education-photo-board .addphoto, .education-register-modal .education-file-board .addfile, .iyr-institution-form-modal .addphoto, .iyr-institution-form-modal .addfile) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px dashed var(--rn-color-border-strong);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-subtle);
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-tight);
	text-align: center;
	transition: border-color var(--rn-transition-fast), color var(--rn-transition-fast);
}

body.rn-body :is(.education-register-modal .education-photo-board .addphoto, .education-register-modal .education-file-board .addfile, .iyr-institution-form-modal .addphoto, .iyr-institution-form-modal .addfile):hover:not(:has(> input[type="file"]:disabled)) {
	border-color: var(--rn-color-border-dark);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text);
}

/* 잠긴 칸 — 완료된 교육 일지(institution_modal.js setEducationContentLock 가 파일 입력을 disabled)는 눌러도 파일 창이 안 뜬다(의도).
 * 칸은 레거시가 흐리게(0.5) · 금지 커서로 바꾸지만, 칸을 덮는 투명 파일 입력이 손가락 커서(레거시 .addphoto input)라 눌릴 것처럼 보였다
 * (2026-10-26 사용자 '사진찾기 눌러도 원래 아무것도 안 뜸?'). 입력도 금지 커서로 — 위 hover 도 잠긴 칸에는 걸지 않는다 */
body.rn-body :is(.addphoto, .addfile) > input[type="file"]:disabled {
	cursor: not-allowed;
}

/* 기관 폼의 올린 사진 · 올린 파일 줄도 첨부 칸과 같은 8px 라운드 · 선 #D8D8D8 — 둥근 칸 옆에 네모 사진이 붙어 어색했다 */
body.rn-body .iyr-institution-form-modal :is(.photo-box, .file-box) {
	border-color: var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	overflow: hidden;
}

body.rn-body .iyr-institution-form-modal .file-box {
	background-color: var(--rn-color-bg-soft); /* 레거시 #FAFAFA — 첨부 칸과 같은 연회색 토큰. 파일 종류 그림(background-image)은 그대로 */
}

/* 올린 파일 줄 오른쪽 [삭제](.btn-fileremove) — 공통 아이콘 삭제 버튼(buttons.css .rn-icon-del: 테두리 없는 28px · 빨간 휴지통 · 마우스를 올리면 연빨강 바탕)
 * (2026-10-26 사용자 '복지포상 관련 자료 첨부의 닫기 버튼 디자인 어색 — 다른 디자인'). 종전 레거시 회색 테두리 동그라미 + 회색 X 그림(ic_close.png)이라
 * 닫기처럼 보였다. 교육 일지는 마우스를 올리면 '삭제' 글자 알약으로 늘어났다 — 글자(버튼 안 '삭제')는 접근성 이름으로만 두고 숨긴다(font-size 0) */
body.rn-body :is(.iyr-institution-form-modal, .education-register-modal) .btn-fileremove,
body.rn-body :is(.iyr-institution-form-modal, .education-register-modal) .btn-fileremove:hover {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	right: var(--rn-space-2);
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	background: transparent none;
	box-shadow: none;
	color: var(--rn-icon-delete-color);
	font-size: 0;
	opacity: 1;
}

body.rn-body :is(.iyr-institution-form-modal, .education-register-modal) .btn-fileremove:hover {
	background-color: var(--rn-color-danger-soft);
}

body.rn-body :is(.iyr-institution-form-modal, .education-register-modal) .btn-fileremove::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 1rem;
	height: 1rem;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: var(--rn-icon-trash) center / contain no-repeat;
	mask: var(--rn-icon-trash) center / contain no-repeat;
}

/* ---------- 디지털 사인 팝업(서명 보기 #modal_view_sign · 서명 작성 #modal_register_sign — _layout/signature_modal.php) — 리뉴얼 팝업 모양 (2026-10-26 사용자 지시
 * '디지털 사인 팝업도 리뉴얼에 맞게') ----------
 * 셸은 이미 rn-modal 이지만 파셜 안 <style>(레거시 화면과 같이 쓴다 — 고치지 않는다)이 12px 라운드 · 회청색 글자(#2B2B2B · #9AA0A8 · #555B63) ·
 * 13px 글자 · 43px 15px 연빨강 [서명 삭제] · 갈색 안내 글로 그렸다. 리뉴얼 화면에서만 덮는다(파셜 규칙 .care-signature-modal #id 1,1,0 보다 세게).
 * 판 8px · 공통 그림자 · 머리 띠 공통 여백, 서명 그림 칸 연회색 #F8F8F8 · 6px, 묶음 상자 선 #D8D8D8 · 6px, 인증 정보 머리 #EDF1F5 · 14px,
 * 이름 #555 · 값 #1D1D1D · 확인 초록(성공 글자), 안내 = 연주황 바탕 · #555 14px · 강조 주황, [서명 삭제] = 공통 삭제 버튼(빨간 선 36px · 14px · 빨간 휴지통) */
body.rn-body .care-signature-modal .modal_body {
	border-radius: var(--rn-radius-lg);
	box-shadow: var(--rn-shadow-sm);
}

body.rn-body .care-signature-modal .modal-header {
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-end) var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
}

body.rn-body .care-signature-modal .modal-header .modal-tit {
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	color: var(--rn-color-text);
}

body.rn-body .care-signature-modal :is(.modal-section, .modal-footer) {
	padding: var(--rn-space-4) var(--rn-space-5);
}

body.rn-body .care-signature-modal .care-signature-status-badge {
	background: var(--rn-color-success-soft);
	color: var(--rn-color-success-text);
}

body.rn-body .care-signature-view-modal .care-signature-view-frame {
	background: var(--rn-color-bg-soft);
	border-radius: var(--rn-radius-md);
}

body.rn-body .care-signature-view-modal .care-signature-view-frame::before,
body.rn-body .care-signature-view-modal .care-signature-view-frame::after {
	border-color: var(--rn-color-border-strong);
}

body.rn-body .care-signature-view-modal :is(.care-signature-doc, .care-signature-cert) {
	border-color: var(--rn-color-border);
	border-radius: var(--rn-radius-md);
}

body.rn-body .care-signature-view-modal .care-signature-doc__icon {
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
	border-radius: var(--rn-radius-md);
}

body.rn-body .care-signature-view-modal .care-signature-doc__label {
	color: var(--rn-color-text-subtle); /* 도움 글 — 12px 그대로 */
}

body.rn-body .care-signature-view-modal .care-signature-doc__title {
	color: var(--rn-color-text);
}

body.rn-body .care-signature-view-modal .care-signature-cert__head {
	background: var(--rn-table-th-bg);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-semibold);
}

body.rn-body .care-signature-view-modal .care-signature-cert__row {
	border-top-color: var(--rn-color-border);
	font-size: var(--rn-font-size-xs);
}

body.rn-body .care-signature-view-modal .care-signature-cert__label {
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
}

body.rn-body .care-signature-view-modal .care-signature-cert__value {
	color: var(--rn-color-text);
}

body.rn-body .care-signature-view-modal .care-signature-cert__value--check {
	color: var(--rn-color-success-text);
}

body.rn-body .care-signature-view-modal .care-signature-legal {
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
}

body.rn-body .care-signature-view-modal .care-signature-legal :is(svg, strong) {
	color: var(--rn-color-brand);
}

body.rn-body .care-signature-modal #btn_delete_sign {
	gap: 0.375em;
	min-width: 4rem;
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border: 1px solid var(--rn-color-danger);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-color-bg);
	color: var(--rn-color-danger-text);
	font-size: var(--rn-btn-font-size);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
}

body.rn-body .care-signature-modal #btn_delete_sign:hover {
	background: var(--rn-color-danger-soft);
}

body.rn-body .care-signature-modal #btn_delete_sign svg {
	width: 1rem;
	height: 1rem;
	color: var(--rn-icon-delete-color);
}

body.rn-body .care-signature-modal .care-signature-bottom-actions .btn-db.btn-modal {
	min-width: 4rem;
}

@media (max-width: 767px) {
	body.rn-body .care-signature-modal :is(.modal-section, .modal-footer) {
		padding: var(--rn-space-3) var(--rn-space-4);
	}
}

/* ---------- 요청 중 진행 표시(#modal_progress) — 늘 모든 모달 위 (2026-11-10 사용자 지적) ----------
 * '리뉴얼 모달 아래에서 프로그레스가 돈다': 수급자·급여·RFID 화면 규칙이 진행 표시를 --rn-z-modal(1000)에 두어
 * 같은 값의 리뉴얼 모달(문서 뒤쪽에 붙은 것)·겹쳐 뜨는 모달(1025~1081, 패널 팝업 2200)에 가려졌다.
 * 화면별 규칙(modal.css 수급자 · payroll.css · rfid.css · mypage.css 2000 · 레거시 longterm/css/modal.css 10000)은
 * 표시·모양을 그대로 두고 높이만 여기서 덮는다 — 특이도 (1,3,2)로 그 규칙들(최대 (1,3,1))을 링크 순서와 무관하게 이긴다 */
html body.rn-body #modal_progress.md-modal-view.md-show {
	z-index: var(--rn-z-progress);
}