/**
 * 리뉴얼 공통 뱃지 · Q/A
 * - 뱃지: .rn-badge / --notice | --plan | --new | --preview | --count(버튼 안 건수 — 빨간 알약)
 * - 급여종류: .rn-badge--yoyang | --mokyok | --ganho (+ 목록용 --clsfc)
 * - 구분: .rn-badge--general | --family | --cognitive (+ --division)
 * - Q/A: .rn-qa (연차 안내 모달 톤) — 질답모음·관련질문 모달·연차 안내 공통
 * - 알림 상자: .rn-alert / --warning | --info — 2026-10-02 board.css 에서 공통으로 올림(게시판·급여 인건비)
 *   토큰(폴백 = 종전 게시판 모양): --rn-alert-margin · -padding · -border · -radius · -bg · -font-size · -line-height · -title-color
 *   안쪽 제목은 h5(JS 가 html() 로 통째로 바꾸는 화면이 있어 클래스를 기대하지 않는다)
 */

/* ---------- 알림 상자 ---------- */
.rn-alert {
	margin-bottom: var(--rn-alert-margin, var(--rn-space-4));
	padding: var(--rn-alert-padding, var(--rn-space-3) var(--rn-space-4));
	border: var(--rn-alert-border, 1px solid var(--rn-color-border));
	border-radius: var(--rn-alert-radius, var(--rn-radius-md));
	background: var(--rn-alert-bg, transparent);
	font-size: var(--rn-alert-font-size, var(--rn-font-size-sm));
	line-height: var(--rn-alert-line-height, var(--rn-line-height-base));
}

.rn-alert--warning {
	border-color: var(--rn-color-warning-border);
	background: var(--rn-color-warning-soft);
	color: var(--rn-color-warning-text);
}

.rn-alert--info {
	border-color: var(--rn-color-border-strong);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text);
}

.rn-alert p {
	margin: 0;
}

.rn-alert h5 {
	margin: 0 0 0.375rem;
	font-size: inherit;
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-alert-title-color, inherit);
}

/* 제목 아래 따로 서는 강조 줄(문장 속 <em> 은 건드리지 않는다) */
.rn-alert > em,
.rn-alert > div > em {
	display: block;
	margin-top: 0.375rem;
	font-style: normal;
	color: var(--rn-alert-title-color, inherit);
}

.rn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 2rem;
	padding: 0.125rem 0.375rem;
	border-radius: var(--rn-radius-sm);
	font-family: var(--rn-font-family);
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-semibold);
	line-height: var(--rn-line-height-base);
	letter-spacing: var(--rn-letter-spacing-tight);
	white-space: nowrap;
}

/* hidden 속성으로 끄는 뱃지(JS 가 건수를 받은 뒤 켠다) — 위 display 를 이긴다 */
.rn-badge[hidden] {
	display: none;
}

.rn-badge--notice {
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
}

.rn-badge--plan {
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

.rn-badge--new {
	min-width: 0;
	min-height: 1.125rem;
	padding: 0.1rem 0.35rem;
	background: var(--rn-color-badge-new-bg);
	color: var(--rn-color-badge-new-text);
	font-size: var(--rn-text-caption-s);
	letter-spacing: var(--rn-letter-spacing-none);
}

.rn-badge--preview {
	min-width: 0;
	min-height: 1.125rem;
	padding: 0.1rem 0.35rem;
	background: var(--rn-color-badge-preview-bg);
	color: var(--rn-color-badge-preview-text);
	font-size: var(--rn-text-caption-s);
	letter-spacing: var(--rn-letter-spacing-none);
}

/* 건수 — 버튼 안에 붙는 빨간 알약 (예: [미연결 데이터 3]) */
.rn-badge--count {
	min-width: 1.125rem;
	padding: 0 0.375rem;
	border-radius: 999px;
	background: var(--rn-color-danger);
	color: var(--rn-color-on-brand);
	font-size: 0.6875rem;
	font-weight: var(--rn-font-weight-bold);
	line-height: 1.125rem;
	letter-spacing: var(--rn-letter-spacing-none);
}

/* ---------- 납부 상태 (미납 / 기초 / 과납 / 완납) — 본인부담금 관리 월별·연간 표 (2026-10-13) ----------
 * 종전 레거시 공용 getPaymentLabel(levyManagementUtil__.js)의 한 글자 알약(미·기·과·완, 진한 파스텔 채움 + 흰 글자)을
 * 두 글자 + 가이드 색(연한 바탕 · 진한 글자)으로. 리뉴얼 levy 모듈이 이 클래스로 다시 그린다(공용 함수는 레거시 화면 몫이라 그대로) */
.rn-badge--pay-unpaid {
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger-text);
}

.rn-badge--pay-done {
	background: var(--rn-color-success-soft);
	color: var(--rn-color-success-text);
}

.rn-badge--pay-over {
	background: var(--rn-color-info-soft);
	color: var(--rn-color-info-text);
}

/* 기초 — 낼 돈이 없는 수급자(감경 0%)라 상태가 아니라 구분에 가깝다 → 무채색(일반 구분 뱃지와 같은 톤) */
.rn-badge--pay-basic {
	background: var(--rn-color-bg-muted);
	color: var(--rn-color-text);
}

/* ---------- 급여종류 (요양 / 목욕 / 간호) ---------- */
/* 숏(요·목·간) · 롱(요양·목욕·간호) 동일 톤 — 디자인 스펙 통일 */
.rn-badge--yoyang {
	background: var(--rn-color-success);
	color: var(--rn-color-on-brand);
}

.rn-badge--mokyok {
	background: var(--rn-color-info);
	color: var(--rn-color-on-brand);
}

.rn-badge--ganho {
	background: var(--rn-color-warning);
	color: var(--rn-color-on-brand);
}

/* 목록 셀용 1글자 — 정사각에 가깝게 */
.rn-badge--clsfc {
	min-width: 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	font-size: var(--rn-font-size-2xs);
	font-weight: var(--rn-font-weight-bold);
	line-height: var(--rn-line-height-none);
	letter-spacing: var(--rn-letter-spacing-none);
}

/* ---------- 구분 (일반 / 가족 / 인지) — soft: 연한 BG + 보더 + 글자색 ---------- */
.rn-badge--division {
	min-width: 0;
	min-height: 1.25rem;
	padding: 0.15rem 0.4rem;
	border: 1px solid transparent;
	border-radius: var(--rn-radius-sm);
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
}

/* 일반 — 가족·인지처럼 연한 바탕 + 연한 테두리 (2026-10-07 흰 바탕 → 연회색) */
.rn-badge--general {
	background: var(--rn-color-bg-muted);
	border-color: var(--rn-color-border);
	color: var(--rn-color-text);
}

.rn-badge--family {
	background: var(--rn-color-success-soft);
	border-color: var(--rn-color-success-border);
	color: var(--rn-color-success-text);
}

.rn-badge--cognitive {
	background: var(--rn-color-brand-soft);
	border-color: var(--rn-primary-10);
	color: var(--rn-color-brand);
}

/* 가족+인지 등 복수 구분 — 세로 스택 (디자인 스펙) */
.rn-badge-stack {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

/* ---------- Q / A ---------- */
.rn-qa {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-3);
}

.rn-qa__item {
	display: flex;
	align-items: flex-start;
	gap: var(--rn-space-2);
}

.rn-qa__item--card {
	gap: var(--rn-space-3);
	padding: var(--rn-space-3) var(--rn-space-4);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
}

.rn-qa__item--card.rn-qa__item--q {
	background: var(--rn-color-info-soft);
	border-color: transparent;
}

.rn-qa__item--card.rn-qa__item--a {
	background: var(--rn-color-brand-soft);
	border-color: transparent;
}

/* 연차 안내 모달과 동일: Q=파란 soft, A=브랜드 soft */
.rn-qa__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-bold);
	line-height: var(--rn-line-height-none);
}

/* Q 주황 · A 진회색(#555) 채움, 흰 글자 — 홈페이지 Q&A 상세와 같은 짝 (2026-10-28 사용자 지시 '큐 에이 각각 주황색 회색으로'.
   종전 Q 연파랑 · A 연주황). 자료실 관련질문 · 업무부서 팝업이 같이 쓴다 */
.rn-qa__mark--a {
	background: var(--rn-color-text-muted);
	color: var(--rn-color-on-brand);
}

.rn-qa__body {
	flex: 1 1 auto;
	min-width: 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-qa__body p {
	margin: 0;
}

.rn-qa__body p + p {
	margin-top: 0.35rem;
}

.rn-qa__meta {
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	line-height: var(--rn-line-height-base);
}