/**
 * 리뉴얼 공통 버튼
 * - 기본: .rn-btn
 * - 변형: --ghost | --primary | --danger | --dark | --text | --info | --print | --sms | --excel | --guide
 * - 아이콘: --plus (글자 오른쪽 +) | --user-add (글자 왼쪽 사람+)
 * - 크기: --sm
 * - 모양: --pill (그림자 — 예: [구버전 보기]. 모서리는 다른 버튼과 같다)
 * - 모서리: 보통 var(--rn-btn-radius) 6px · 작은(--sm·30px 미만) var(--rn-btn-radius-sm) 4px — 화면 CSS 도 이 둘만 쓴다
 * - 크롬(radius·높이·패딩·폰트): variables.css `--rn-btn-*` (사인 모달 .btn-db 브릿지와 공유)
 */

.rn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375em;
	box-sizing: border-box;
	margin: 0;
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border: 1px solid transparent;
	border-radius: var(--rn-btn-radius);
	background: transparent;
	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-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--rn-transition-fast), border-color var(--rn-transition-fast), color var(--rn-transition-fast);
}

.rn-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.rn-btn--sm {
	min-height: var(--rn-btn-min-height-sm);
	padding: 0 var(--rn-btn-padding-x-sm);
	font-size: var(--rn-btn-font-size-sm);
	gap: 0.25em;
	border-radius: var(--rn-btn-radius-sm);
}

/* 버튼 내 아이콘은 글자보다 살짝 작게 — 시각적 균형 */
.rn-btn > i,
.rn-btn > svg {
	font-size: 0.8em;
	line-height: var(--rn-line-height-none);
	/* FontAwesome 글리프가 한글 대비 위로 뜨는 폰트 메트릭 차이 보정 */
	position: relative;
	top: 0.06em;
}

/* 테두리 아웃라인 */
.rn-btn--ghost {
	border-color: var(--rn-btn-ghost-border);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
}

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

/* 브랜드 채움 */
.rn-btn--primary {
	border-color: var(--rn-color-brand);
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
}

.rn-btn--primary:hover:not(:disabled) {
	border-color: var(--rn-color-brand-hover);
	background: var(--rn-color-brand-hover);
}

/* 위험(삭제) */
.rn-btn--danger {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-bg);
	color: var(--rn-color-danger-text);
}

.rn-btn--danger:hover:not(:disabled) {
	background: var(--rn-color-danger-soft);
}

/* 관리자/다크 — 게시판 글쓰기 계열, 살짝 밝은 진회색 */
.rn-btn--dark {
	border-color: var(--rn-color-dark);
	background: var(--rn-color-dark);
	color: var(--rn-color-on-brand);
}

.rn-btn--dark:hover:not(:disabled) {
	border-color: var(--rn-color-dark-hover);
	background: var(--rn-color-dark-hover);
	color: var(--rn-btn-dark-hover-color, var(--rn-color-on-brand));
}

/* 정보 아웃라인 (레거시 .btn-st.submitList 톤) */
.rn-btn--info {
	border-color: var(--rn-color-info);
	background: var(--rn-color-bg);
	color: var(--rn-color-info-text);
}

.rn-btn--info:hover:not(:disabled) {
	border-color: var(--rn-color-info);
	background: var(--rn-color-info);
	color: var(--rn-color-on-brand);
}

/* 출력 / 문자 발송 / 엑셀 — 업무관리 공통 (2026-10-07 통일): 아웃라인 + 왼쪽 아이콘, hover 는 같은 색으로 채움.
   --print 프린터 · --sms 봉투 (남색 #003675) / --excel 엑셀 (초록 #006E18). 마크업에 <i> 아이콘을 따로 넣지 않는다.
   .rn-btn 을 겹쳐 쓴 것은 레거시 style.css(.btn-send-message 등 — 같은 특이도에 뒤에 로드)를 이기기 위해서다. */
.rn-btn.rn-btn--print,
.rn-btn.rn-btn--sms,
.rn-btn.rn-btn--excel {
	border-color: var(--rn-btn-action-color);
	background: var(--rn-color-bg);
	color: var(--rn-btn-action-color);
}

.rn-btn.rn-btn--print:hover:not(:disabled),
.rn-btn.rn-btn--sms:hover:not(:disabled),
.rn-btn.rn-btn--excel: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-btn.rn-btn--excel {
	--rn-btn-action-color: var(--rn-btn-excel-color);
	--rn-btn-action-hover-bg: var(--rn-btn-excel-color);
}

.rn-btn.rn-btn--print::before,
.rn-btn.rn-btn--sms::before,
.rn-btn.rn-btn--excel::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;
	pointer-events: none;
}

.rn-btn.rn-btn--sms::before {
	-webkit-mask-image: var(--rn-icon-mail);
	mask-image: var(--rn-icon-mail);
}

.rn-btn.rn-btn--excel::before {
	-webkit-mask-image: var(--rn-icon-excel);
	mask-image: var(--rn-icon-excel);
}

.rn-btn.rn-btn--sm.rn-btn--print::before,
.rn-btn.rn-btn--sm.rn-btn--sms::before,
.rn-btn.rn-btn--sm.rn-btn--excel::before {
	width: var(--rn-btn-action-icon-size-sm);
	height: var(--rn-btn-action-icon-size-sm);
}

/* 출력 버튼은 작은 크기(rn-btn--sm)여도 글자 14px — 보통 버튼과 같다. 높이 · 아이콘은 작은 크기 그대로
   (2026-10-26 사용자 '출력 버튼 13 으로 되어 있는 곳은 다 14 로' — 본인부담금 [연간 미납대장] · [연간 납부확인서] 등) */
.rn-btn.rn-btn--sm.rn-btn--print {
	font-size: var(--rn-btn-font-size);
}

/* 사용법 안내 — 목록 하단 [사용법 보기]의 주황 그라데이션 알약 (레거시 .wave-gradient 톤) */
.rn-btn--guide {
	position: relative;
	overflow: hidden;
	border: 0;
	border-radius: var(--rn-btn-radius); /* 2026-10-07 알약(999px) → 공통 버튼 모서리 */
	background-color: #e55a00;
	background-image: linear-gradient(90deg, #e55a00 0%, #ff6c00 25%, #ff8533 50%, #ff6c00 75%, #e55a00 100%);
	background-size: 200% 100%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	color: var(--rn-color-on-brand);
	animation: rn-btn-guide-wave 3s linear infinite;
	transition: transform var(--rn-transition-fast), filter var(--rn-transition-fast);
}

.rn-btn--guide::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: rn-btn-guide-shine 4s linear infinite;
	pointer-events: none;
}

.rn-btn--guide:hover:not(:disabled) {
	transform: scale(1.05);
	filter: brightness(1.2);
	color: var(--rn-color-on-brand);
}

@keyframes rn-btn-guide-wave {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes rn-btn-guide-shine {
	0% { left: -100%; }
	50%, 51% { left: 100%; }
	100% { left: -100%; }
}

@media (prefers-reduced-motion: reduce) {
	.rn-btn--guide,
	.rn-btn--guide::before {
		animation: none;
	}
}

/* 그림자 버튼 — 색 변형과 함께 쓴다 (rn-btn--dark rn-btn--pill). 모서리는 공통 버튼 값(2026-10-07 알약 999px → 버튼 라운딩 크기별 통일) */
.rn-btn--pill {
	border-radius: var(--rn-btn-radius);
	box-shadow: none; /* 2026-10-07 그림자 없음 — 다른 버튼과 같은 평평한 모양 (종전 0 1px 3px) */
}

/* 텍스트형 (+ 추가 등) */
.rn-btn--text {
	min-height: 1.75rem;
	padding: var(--rn-space-1) var(--rn-space-2);
	border-color: transparent;
	background: transparent;
	color: var(--rn-color-brand);
}

.rn-btn--text:hover:not(:disabled) {
	background: var(--rn-color-brand-soft);
}

/* ---------- 공통 크롬 브릿지 (레거시·페이지 전용 액션 버튼) ----------
 * 색/레이아웃은 페이지 CSS가 담당. radius·높이·패딩·폰트만 --rn-btn-* 공유.
 */
.rn-body .btn-comwrite,
.rn-body .rn-alim-preview .massege_com button,
.rn-body .rn-alim-preview .massege_com #preview {
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x);
	border-radius: var(--rn-btn-radius);
	font-size: var(--rn-btn-font-size);
}

.rn-body .btn-use-annual {
	border-radius: var(--rn-btn-radius);
	font-size: var(--rn-btn-font-size);
}

.rn-body .btn-blue-outline {
	border-radius: var(--rn-btn-radius-sm);
	font-size: var(--rn-btn-font-size);
}

.rn-body .cal-header-btnbwp > button,
.rn-body .btn-nav.go-prev,
.rn-body .btn-nav.go-next,
.rn-body .btn-nav.go-today,
.rn-body .visit-load-prev-plan-btn {
	border-radius: var(--rn-btn-radius);
}

.rn-body .rn-side-action,
.rn-body .rn-modal.cal-modal .btn-attendance01,
.rn-body .rn-modal.cal-modal .btn-attendance02,
.rn-body .rn-modal.cal-modal .btn-attendance03,
.rn-body .rn-modal.visit-modal .btn-attendance01 {
	border-radius: var(--rn-btn-radius);
}

.rn-body .rn-modal .btn-modal-close {
	border-radius: var(--rn-btn-radius-sm);
}

.rn-body .rn-law-btn {
	border-radius: var(--rn-btn-radius-sm);
}

.rn-body .rn-nav-item--ai,
.rn-body .rn-nav-item--ai .kebot-btn-inner {
	border-radius: var(--rn-btn-radius);
}

.rn-body .rn-membership__banner .mem_applybtn,
.rn-body .rn-membership__banner #applybtn {
	border-radius: var(--rn-btn-radius);
}

.rn-body .rn-board-subtab,
.rn-body .rn-guide-faqnav__item {
	min-height: var(--rn-btn-min-height);
	border-radius: var(--rn-btn-radius-sm);
}

.rn-body .rn-cal-nav__picker {
	min-height: var(--rn-btn-min-height);
	border-radius: var(--rn-btn-radius);
}

/* 사람 등록 — 글자 왼쪽에 사람+ 아이콘(User_Add.svg, 예: 상근직원 [신규 등록] 2026-10-13). 크기·자리는 출력·엑셀 아이콘과 같다 */
.rn-btn--user-add::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-user-add) center / contain no-repeat;
	mask: var(--rn-icon-user-add) center / contain no-repeat;
	pointer-events: none;
}

/* 등록 — 글자 오른쪽에 + (예: 수급자 등록, 2026-10-07). 색은 버튼 글자색을 따른다.
   크기는 글자에 비례(0.75em — 14px 글자면 10.5px, 작은 버튼 12px 글자면 9px). 2026-10-14 종전 14px 고정이라 작은 버튼에서 + 가 글자보다 컸다 */
.rn-btn--plus::after {
	content: "";
	flex: none;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.125rem;
	background-color: currentColor;
	-webkit-mask: var(--rn-icon-plus) center / contain no-repeat;
	mask: var(--rn-icon-plus) center / contain no-repeat;
	pointer-events: none;
}

/* ---------- 글자 옆 작은 아이콘 — <span class="rn-icon rn-icon--coin" aria-hidden="true"></span> (2026-10-07) ----------
 * 그림은 variables.css 의 --rn-icon-* 마스크, 색은 글자색(currentColor)을 따른다 — 버튼 hover 색이 바뀌면 아이콘도 같이 바뀐다 */
.rn-icon {
	display: inline-block;
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--rn-icon) center / contain no-repeat;
	mask: var(--rn-icon) center / contain no-repeat;
	vertical-align: middle;
	pointer-events: none;
}

.rn-icon--pencil { --rn-icon: var(--rn-icon-pencil); }
.rn-icon--coin { --rn-icon: var(--rn-icon-coin); }
.rn-icon--calendar { --rn-icon: var(--rn-icon-calendar); }
.rn-icon--receipt { --rn-icon: var(--rn-icon-receipt); }
.rn-icon--trash { --rn-icon: var(--rn-icon-trash); color: var(--rn-icon-delete-color); } /* 휴지통은 늘 빨강 — 글자색을 따르지 않는다 (2026-10-15) */
.rn-icon--phone { --rn-icon: var(--rn-icon-phone); }

/* ---------- 목록 줄 [전화 걸기] — 수급자·종사자 목록 폰 폭 카드 줄 (2026-10-15) ----------
 * <a class="rn-list-call" href="tel:01012345678" aria-label="전화 걸기"><span class="rn-icon rn-icon--phone" aria-hidden="true"></span></a>
 * 화면 버튼과 같은 36px 동그라미 · 흰 바탕 · 보조 버튼 테두리(#C6C6C6) · 초록 면 수화기(--rn-color-success #008A1E).
 * 2026-10-15 초록 네모 바탕 + 흰 수화기도 해 봤지만 사용자가 '너무 과하다'고 해 이 모양으로 되돌렸다.
 * 모양만 여기서 정한다 — 보일지·어디 놓일지는 목록 CSS(prs.css · employee.css 의 720px 이하)가 정한다 */
.rn-list-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: var(--rn-btn-min-height);
	height: var(--rn-btn-min-height);
	padding: 0;
	border: 1px solid var(--rn-btn-ghost-border);
	border-radius: 50%;
	background: var(--rn-color-bg);
	color: var(--rn-color-success);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.rn-list-call:hover,
.rn-list-call:active {
	border-color: var(--rn-btn-ghost-hover-border);
	background: var(--rn-color-bg-hover);
	color: var(--rn-color-success-text);
}

.rn-list-call .rn-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* ---------- 삭제 아이콘 버튼 — 글자 없이 휴지통만(목록 줄 · 칸 끝의 [삭제]). 모든 화면 공통 (2026-10-15) ----------
 * <button type="button" class="rn-icon-del" aria-label="삭제"></button>. 빨간 선 휴지통(--rn-icon-trash · --rn-icon-delete-color), 바탕 없음,
 * 마우스를 올리면 연분홍 바탕. 레거시 마크업의 삭제 그림 버튼(일정 할 일 .btn-list-del 등)도 아래에서 같은 모양으로 그린다 */
.rn-icon-del,
body.rn-body .btn-list-del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 1.75rem;
	height: 1.75rem;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	background: transparent none !important; /* 레거시 회색 PNG(ic_del.png — calendar.css · modal.css 가 !important) */
	color: var(--rn-icon-delete-color);
	opacity: 1;
	cursor: pointer;
}

.rn-icon-del::before,
body.rn-body .btn-list-del::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--rn-icon-trash) center / contain no-repeat;
	mask: var(--rn-icon-trash) center / contain no-repeat;
}

.rn-icon-del:hover,
body.rn-body .btn-list-del:hover {
	background-color: var(--rn-color-danger-soft) !important;
	opacity: 1;
}

/* FontAwesome 휴지통 글리프(레거시 마크업이 리뉴얼 화면에 그대로 싣는 것)도 빨강 */
body.rn-body :is(.fa-trash, .fa-trash-alt, .fa-trash-can) {
	color: var(--rn-icon-delete-color);
}

/* ---------- 정보(i) 아이콘 — 리뉴얼 공통 하나 (2026-10-13 '롱텀 연동 안내 인포 아이콘이 흐리다 — 다른 곳도 통일') ----------
 * <span class="rn-info-icon" aria-hidden="true"></span>. 그림은 variables.css --rn-icon-info(#2D2D2D 원 + 흰 i, 두 색이라 배경 그림).
 * 크기는 옆 글자에 맞춰 1.15em(원 지름 ≈ 글자 높이). 레거시 마크업이 리뉴얼 화면에 그대로 싣는 FA 정보 아이콘(fa-info-circle ·
 * fa-circle-info — 업무수행일지 방문불가 안내 · 급여 가져오기 안내 · 연간기록 안내 등)도 같은 그림으로 바꿔 그린다 */
.rn-info-icon,
.rn-body i:is(.fa-info-circle, .fa-circle-info) {
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background: var(--rn-icon-info) center / contain no-repeat;
	color: transparent;
	vertical-align: -0.2em;
}

.rn-body i:is(.fa-info-circle, .fa-circle-info)::before {
	content: none;
}

/* ---------- 배치 유틸 ----------
 * 한 줄(flex) 안에서 오른쪽 끝으로 밀어 두는 버튼 — 목록 하단의 [사용법 보기] 처럼
 * '이 줄의 본 작업과 별개인' 항목에 쓴다. 수급자·종사자·RFID 하단 줄이 같은 클래스를 쓴다.
 * flex-wrap 이 걸린 줄이라 줄이 넘치면 마지막 줄의 오른쪽으로 간다. */
.rn-btn--push-right {
	margin-left: auto;
}