/**
 * 리뉴얼 디자인 토큰
 * - 값 변경·반응형 대응은 이 파일의 var만 수정
 * - 컴포넌트 CSS에서는 hard-code 금지, var(--rn-*)만 사용
 *
 * Breakpoints (mobile-first)
 * --rn-bp-md: 768px
 * --rn-bp-lg: 1024px
 * --rn-bp-xl: 1280px
 */

@font-face {
	font-family: "Pretendard";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../../fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Pretendard";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../../fonts/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Pretendard";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../../fonts/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Pretendard";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../../fonts/Pretendard-Bold.woff2") format("woff2");
}

:root {
	/* ---------- Color ramp: Primary (버튼·활성 상태) ---------- */
	--rn-primary-0: #ffffff;
	--rn-primary-5: #fff4f0;
	--rn-primary-10: #ffdacc;
	--rn-primary-20: #ffb599;
	--rn-primary-30: #ff8f6b;
	--rn-primary-40: #ff6a33; /* 3:1 vs white */
	--rn-primary-50: #ff4500; /* Base · 4.5:1 vs white */
	--rn-primary-60: #d53209;
	--rn-primary-70: #992900;
	--rn-primary-80: #661c00;
	--rn-primary-90: #330e00;
	--rn-primary-100: #000000;

	/* ---------- Color ramp: Secondary (필터·칩) ---------- */
	--rn-secondary-0: #ffffff;
	--rn-secondary-5: #edf1f5;
	--rn-secondary-10: #cdd7e4;
	--rn-secondary-20: #b4c4d6;
	--rn-secondary-30: #99b0cb;
	--rn-secondary-40: #2a5c96; /* 3:1 vs white */
	--rn-secondary-50: #003675; /* 4.5:1 vs white */
	--rn-secondary-60: #002b5e;
	--rn-secondary-70: #002046;
	--rn-secondary-80: #00162f;
	--rn-secondary-90: #000b17;
	--rn-secondary-100: #000000;

	/* ---------- Color ramp: Grayscale (정보 위계·BG·텍스트·라인) ---------- */
	--rn-gray-0: #ffffff;
	--rn-gray-5: #f8f8f8;   /* Background */
	--rn-gray-10: #f0f0f0;  /* Background */
	--rn-gray-20: #e4e4e4;  /* Disabled */
	--rn-gray-30: #d8d8d8;  /* Disabled */
	--rn-gray-40: #c6c6c6;  /* Border */
	--rn-gray-50: #8e8e8e;  /* Text-disabled */
	--rn-gray-60: #717171;  /* Text-body · 3:1 vs white */
	--rn-gray-70: #555555;  /* Text-body · 4.5:1 vs white */
	--rn-gray-80: #2d2d2d;  /* Text-title */
	--rn-gray-90: #1d1d1d;  /* Text-title */
	--rn-gray-100: #000000;

	/* ---------- Color ramp: Danger (오류·금지·위험·삭제·불가) ---------- */
	--rn-danger-5: #feecf0;   /* Surface */
	--rn-danger-10: #fcd4de;  /* Border */
	--rn-danger-20: #f799b1;
	--rn-danger-30: #f36689;
	--rn-danger-40: #ef3e5e;
	--rn-danger-50: #eb003b;  /* Base */
	--rn-danger-60: #d50136;  /* Text */
	--rn-danger-70: #8d0023;
	--rn-danger-80: #5e0018;
	--rn-danger-90: #2f000c;

	/* ---------- Color ramp: Warning (주의) ---------- */
	--rn-warning-5: #fff8e9;   /* Surface */
	--rn-warning-10: #ffeac1;  /* Border */
	--rn-warning-20: #ffe2a7;
	--rn-warning-30: #ffd47c;
	--rn-warning-40: #ffc550;
	--rn-warning-50: #ffb724;  /* Base */
	--rn-warning-60: #98690a;  /* Text */
	--rn-warning-70: #66490e;
	--rn-warning-80: #4d370b;
	--rn-warning-90: #332507;

	/* ---------- Color ramp: Success (성공·완료·진행) ---------- */
	--rn-success-5: #eef7f0;   /* Surface */
	--rn-success-10: #cee9d4;  /* Border */
	--rn-success-20: #b2dcbb;
	--rn-success-30: #8cca99;
	--rn-success-40: #33a14b;
	--rn-success-50: #008a1e;  /* Base */
	--rn-success-60: #006e18;  /* Text */
	--rn-success-70: #005312;
	--rn-success-80: #00370c;
	--rn-success-90: #002207;

	/* ---------- Color ramp: Information (정보·강조) ---------- */
	--rn-info-5: #e9f0ff;   /* Surface */
	--rn-info-10: #d4e1ff;  /* Border */
	--rn-info-20: #a9c3ff;
	--rn-info-30: #7da4ff;
	--rn-info-40: #5286ff;
	--rn-info-50: #2768ff;  /* Base */
	--rn-info-60: #1f53cc;  /* Text */
	--rn-info-70: #173e99;
	--rn-info-80: #0c1f4d;
	--rn-info-90: #040a1a;

	/* ---------- Semantic aliases (컴포넌트는 이쪽 사용) ---------- */
	--rn-color-brand: var(--rn-primary-50);
	--rn-color-brand-hover: var(--rn-primary-60);
	--rn-color-brand-soft: var(--rn-primary-5);
	--rn-color-brand-bar: var(--rn-primary-50);
	--rn-color-on-brand: var(--rn-primary-0);
	/* 실버북(인지 활동 워크북) 제품색 — 인지 활동 탭 오른쪽 [난이도 및 문제 설정]·[롱텀 일정 가져오기]·[문제 자동 설정] (2026-10-12 사용자 지정) */
	--rn-color-silverbook: #00b4d2;
	--rn-color-silverbook-hover: #00a6c2;
	--rn-color-primary: var(--rn-primary-50);
	--rn-color-secondary: var(--rn-secondary-50);
	--rn-color-secondary-soft: var(--rn-secondary-5);
	--rn-color-secondary-hover: var(--rn-secondary-60);

	/* 검정 계열 글자색은 이 셋만 쓴다 (2026-10-07 디자이너 규칙):
	   Text-title #1D1D1D · Text-body #555555 · Text-disabled #8E8E8E
	   (gray-80 #2D2D2D · gray-60 #717171 은 글자색으로 쓰지 않는다) */
	--rn-color-text: var(--rn-gray-90);          /* Text-title #1D1D1D */
	--rn-color-text-title: var(--rn-gray-90);    /* 제목 #1D1D1D — 책갈피 탭·카드 제목 (2026-10-06) */
	--rn-color-text-muted: var(--rn-gray-70);    /* Text-body #555555 */
	--rn-color-text-subtle: var(--rn-gray-50);   /* Text-disabled #8E8E8E */
	/* 회색 선(테두리·구분선) 색은 이 셋만 쓴다 (2026-10-07 디자이너 규칙): #D8D8D8 · #C6C6C6 · #8E8E8E.
	   상태·강조색 선(브랜드·위험·성공·정보, 선택 상태 등)은 여기 해당하지 않는다 */
	--rn-color-border: var(--rn-gray-30);        /* #D8D8D8 기본 선 (2026-10-07 #E4E4E4 → #D8D8D8) */
	--rn-color-border-strong: var(--rn-gray-40); /* #C6C6C6 진한 선·입력칸 */
	--rn-color-border-dark: var(--rn-gray-50);   /* #8E8E8E 가장 진한 선 (체크박스 등) */
	--rn-color-bg: var(--rn-gray-0);
	--rn-color-bg-page: var(--rn-secondary-5);   /* 페이지 바탕 #EDF1F5 — 회색(gray-5 #F8F8F8) 대신 (2026-10-06) */
	--rn-color-bg-hover: var(--rn-gray-5);         /* hover 바탕 #F8F8F8 — 가이드 색만 (2026-10-07 종전 rgba(0,0,0,.03) 은 바탕에 따라 #E6E9ED 같은 가이드 밖 색이 됐다) */
	--rn-color-row-hover: var(--rn-gray-5);       /* 목록 줄·글 링크 hover 연회색 #F8F8F8 — 글자는 주황으로 바꾸지 않는다 (2026-10-07 홈·공지, #F0F0F0 은 진하다 해서 한 단계 연하게) */
	--rn-color-bg-muted: var(--rn-gray-10);      /* Background */
	--rn-color-bg-soft: var(--rn-gray-5);
	--rn-color-disabled: var(--rn-gray-20);
	--rn-color-disabled-strong: var(--rn-gray-30);
	--rn-color-dark: var(--rn-gray-70);           /* 관리자/다크 버튼 */
	--rn-color-dark-hover: var(--rn-gray-80);
	--rn-color-overlay: rgba(0, 0, 0, 0.4);       /* 모달·드로어 오버레이 */
	--rn-color-overlay-soft: rgba(0, 0, 0, 0.35);
	--rn-color-overlay-strong: rgba(0, 0, 0, 0.7);
	--rn-color-focus-ring: rgba(39, 104, 255, 0.15); /* info-50 @ 15% */

	/* Role colors — Surface/Border/Base/Text */
	--rn-color-danger: var(--rn-danger-50);
	--rn-color-danger-soft: var(--rn-danger-5);
	--rn-color-danger-border: var(--rn-danger-10);
	--rn-color-danger-text: var(--rn-danger-60);
	--rn-color-warning: var(--rn-warning-50);
	--rn-color-warning-soft: var(--rn-warning-5);
	--rn-color-warning-border: var(--rn-warning-10);
	--rn-color-warning-text: var(--rn-warning-60);
	--rn-color-success: var(--rn-success-50);
	--rn-color-success-soft: var(--rn-success-5);
	--rn-color-success-border: var(--rn-success-10);
	--rn-color-success-text: var(--rn-success-60);
	--rn-color-info: var(--rn-info-50);
	--rn-color-info-soft: var(--rn-info-5);
	--rn-color-info-border: var(--rn-info-10);
	--rn-color-info-text: var(--rn-info-50);  /* 파란 글자는 #2768FF 하나 (2026-10-07 '파란색 글자는 다 2768FF', 종전 info-60 #1F53CC) */

	--rn-color-badge-new-bg: var(--rn-danger-5);
	--rn-color-badge-new-text: var(--rn-danger-60); /* 빨간 글자는 Text(60)로 통일 */
	--rn-color-badge-preview-bg: var(--rn-info-5);
	--rn-color-badge-preview-text: var(--rn-info-50);
	--rn-color-organ-icon-bg: var(--rn-primary-5);
	--rn-color-cal-sun: var(--rn-danger-60);
	--rn-color-cal-sat: var(--rn-info-50);
	--rn-color-cal-todo: var(--rn-primary-5);
	--rn-color-cal-todo-done: var(--rn-gray-50);
	--rn-color-cal-grid: var(--rn-gray-10);
	--rn-color-cal-work: var(--rn-gray-10);
	--rn-color-cal-work-text: var(--rn-gray-90);
	--rn-color-cal-off: var(--rn-success-5);
	--rn-color-cal-off-text: var(--rn-success-50);
	--rn-color-cal-edu: var(--rn-info-5);
	--rn-color-cal-edu-text: var(--rn-info-50);
	--rn-color-cal-visit: var(--rn-primary-5);
	--rn-color-cal-visit-text: var(--rn-primary-60);
	--rn-cal-day-min-height: 3.25rem;

	/* ---------- Sidebar (dark theme) ---------- */
	--rn-sidebar-bg: var(--rn-secondary-80);
	--rn-sidebar-text: var(--rn-gray-0);
	--rn-sidebar-text-muted: var(--rn-secondary-30);
	--rn-sidebar-sub-text: var(--rn-secondary-10);  /* 하위 메뉴 글자 #CDD7E4 (2026-10-06) */
	--rn-sidebar-divider: rgba(255, 255, 255, 0.12);
	--rn-sidebar-hover: rgba(255, 255, 255, 0.08);
	--rn-sidebar-active-bg: var(--rn-secondary-60); /* #002B5E */
	--rn-sidebar-active-text: var(--rn-gray-0);
	--rn-sidebar-brand: var(--rn-gray-0);
	--rn-sidebar-ai-bg: linear-gradient(135deg, #6366f1, #8b5cf6, #3b82f6);
	--rn-sidebar-ai-bg-hover: linear-gradient(135deg, #6366f1, #8b5cf6, #3b82f6);
	--rn-sidebar-ai-text: var(--rn-gray-0);
	--rn-sidebar-ai-tooltip-bg: #6c5ce7;
	--rn-sidebar-ai-shine: rgba(255, 255, 255, 0.3);
	--rn-sidebar-ai-highlight: rgba(255, 255, 255, 0.22);
	--rn-sidebar-ai-muted: rgba(255, 255, 255, 0.88);
	--rn-sidebar-ai-shadow: 0 4px 18px rgba(108, 92, 231, 0.35);
	--rn-sidebar-law-border: rgba(255, 255, 255, 0.35);
	--rn-sidebar-law-text: var(--rn-secondary-20);
	--rn-sidebar-law-hover-border: rgba(255, 255, 255, 0.55);
	--rn-sidebar-law-hover-text: var(--rn-gray-0);
	--rn-sidebar-logout-hover-bg: rgba(235, 0, 59, 0.18);
	--rn-sidebar-logout-hover-text: var(--rn-danger-30);
	/* 하위 메뉴 [새창] 배지(shell.css) — 메뉴 바탕 위 / 선택한 줄(진한 남색 칸) 위. 선택한 줄은 밝은 사이드바에서도 남색이라 흰 테두리 · 흰 글자 그대로 (2026-11-12) */
	--rn-sidebar-newtab-border: rgba(255, 255, 255, 0.7);
	--rn-sidebar-newtab-bg: rgba(255, 255, 255, 0.08);
	--rn-sidebar-newtab-active-border: rgba(255, 255, 255, 0.7);
	--rn-sidebar-newtab-active-bg: rgba(255, 255, 255, 0.12);

	/* ---------- Page gutter — 화면 가장자리 ↔ 본문 판(카드) 사이 바깥 여백. 모든 리뉴얼 화면 공통 18px (2026-10-06) ---------- */
	--rn-page-gutter: 1.125rem;

	/* ---------- Home layout ---------- */
	--rn-home-gap: var(--rn-space-3);
	--rn-home-padding: var(--rn-space-3);
	--rn-home-card-padding: var(--rn-space-3);
	--rn-home-columns: 1fr;
	--rn-home-banner-columns: 1fr;
	--rn-home-banner-height: 7.5rem;
	/* 홈·게시판 상단 책갈피형 탭 (home.css .rn-home-top--bookmark, 2026-10-06) */
	--rn-bookmark-line: var(--rn-gray-30);         /* 탭·본문 판 테두리 #D8D8D8 */
	--rn-bookmark-tab-bg: var(--rn-gray-20);       /* 안 고른 탭 바탕 #E4E4E4 */
	--rn-bookmark-tab-bg-hover: var(--rn-gray-30); /* 안 고른 탭 호버 — 한 단계 어둡게 #D8D8D8 */
	--rn-bookmark-tab-text: var(--rn-gray-70);     /* 안 고른 탭 글자 #555555 (고른 탭·호버는 --rn-color-text-title) */

	/* ---------- Typography (Pretendard · line-height 150%) ---------- */
	--rn-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
	--rn-font-weight-regular: 400;
	--rn-font-weight-medium: 500;
	--rn-font-weight-semibold: 600; /* 기존 컴포넌트 호환 · 가이드는 Regular/Medium/Bold */
	--rn-font-weight-bold: 700;
	--rn-line-height-base: 1.5; /* 150% — 전 스타일 공통 */
	--rn-line-height-tight: 1.5;
	--rn-line-height-none: 1; /* 아이콘·뱃지 등 한 줄 정렬용 */
	--rn-letter-spacing-display: 1px; /* Display · Heading · Title XXL */
	--rn-letter-spacing-none: 0;
	--rn-letter-spacing-tight: 0;
	--rn-letter-spacing-wide: 0.1em; /* 특수 강조(멤버십 등) */

	/*
	 * Type scale — mobile-first (모바일 px → 768px+ 데스크톱 px)
	 * Display / Heading / Title XXL 만 반응형, 이하 동일
	 */
	/* Display — 마케팅 최대 텍스트 */
	--rn-text-display-l: 2.5rem;    /* 40 → 66 */
	--rn-text-display-m: 2rem;      /* 32 → 50 */
	--rn-text-display-s: 1.5625rem; /* 25 → 40 */
	/* Heading — 페이지 타이틀 */
	--rn-text-heading-l: 2.5rem;    /* 40 → 50 */
	--rn-text-heading-m: 2rem;      /* 32 → 40 */
	--rn-text-heading-s: 1.5625rem; /* 25 → 32 */
	/* Title — 템플릿/모듈 강조 */
	--rn-text-title-xxl: 1.5625rem; /* 25 → 32 */
	--rn-text-title-xl: 1.5625rem;  /* 25 */
	--rn-text-title-l: 1.3125rem;   /* 21 */
	--rn-text-title-m: 1.1875rem;   /* 19 */
	--rn-text-title-s: 1.0625rem;   /* 17 */
	--rn-text-title-xs: 0.9375rem;  /* 15 */
	/* Body — 본문 (*기본 = Medium 17) */
	--rn-text-body-l: 1.1875rem;    /* 19 */
	--rn-text-body-m: 1.0625rem;    /* 17 · Default */
	--rn-text-body-s: 0.9375rem;    /* 15 */
	/* Detail — 부가 정보 */
	--rn-text-detail-l: 1.0625rem;  /* 17 */
	--rn-text-detail-m: 0.9375rem;  /* 15 */
	--rn-text-detail-s: 0.8125rem;  /* 13 */
	/* Caption — 가이드 외 초소형(칩·캘린더 뱃지 등) */
	--rn-text-caption: 0.75rem;     /* 12 */
	--rn-text-caption-s: 0.6875rem; /* 11 */
	/* Label — 버튼·칩 등 컴포넌트 내부 */
	--rn-text-label-l: 1.1875rem;   /* 19 */
	--rn-text-label-m: 1.0625rem;   /* 17 */
	--rn-text-label-s: 0.9375rem;   /* 15 */
	--rn-text-label-xs: 0.8125rem;  /* 13 */
	/* Links */
	--rn-text-link-l: 1.1875rem;    /* 19 */
	--rn-text-link-m: 1.0625rem;    /* 17 */
	--rn-text-link-s: 0.9375rem;    /* 15 */

	/* 기본 본문 · 기존 토큰 별칭 (가이드 Body Medium) */
	--rn-font-size-base: var(--rn-text-body-m);
	--rn-font-size-2xs: var(--rn-text-caption-s); /* 11 */
	/* 14 — 본문 글자는 최소 14px (2026-10-12 사용자 지시 '본문 폰트는 최소 14, 모든 페이지'). 종전 detail-s 13px.
	   이 단계를 쓰는 곳(본문·목록·폼 글자·기본 버튼 --rn-btn-font-size·작은 입력칸 --rn-control-font-size-sm)이 모두 14px 가 된다.
	   칩·뱃지·작은 버튼처럼 원래 작게 그리는 것은 2xs / caption 단계라 그대로다 */
	--rn-font-size-xs: 0.875rem;
	--rn-font-size-sm: var(--rn-text-detail-m);   /* 15 */
	--rn-font-size-md: var(--rn-text-body-m);     /* 17 */
	--rn-font-size-lg: var(--rn-text-title-l);    /* 21 */
	--rn-font-size-xl: var(--rn-text-title-xl);   /* 25 */
	--rn-font-size-stat: var(--rn-text-title-m);  /* 19 · 통계/강조 숫자 */

	/* ---------- Spacing ---------- */
	--rn-space-1: 0.25rem;  /* 4px */
	--rn-space-2: 0.5rem;   /* 8px */
	--rn-space-3: 0.75rem;  /* 12px */
	--rn-space-4: 1rem;     /* 16px */
	--rn-space-5: 1.25rem;  /* 20px */
	--rn-space-6: 1.5rem;   /* 24px */
	--rn-space-8: 2rem;     /* 32px */

	/* ---------- Radius / Shadow / Motion ---------- */
	--rn-radius-sm: 4px;
	--rn-radius-md: 6px;
	--rn-radius-lg: 8px;
	--rn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--rn-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
	--rn-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
	/* 아래에 붙은 줄이 위 스크롤 영역과 나뉘어 보이게 위로 드리우는 그림자 — 목록 하단 줄 · 급여한도 표 (2026-11-03) */
	--rn-shadow-up: 0 -4px 12px rgba(0, 0, 0, 0.08);
	--rn-shadow-inset-soft: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
	--rn-shadow-handle: 0 1px 3px rgba(0, 0, 0, 0.18);
	--rn-transition-fast: 0.2s ease;
	--rn-z-sidebar: 100;
	--rn-z-overlay: 200;
	--rn-z-modal: 1000;
	/* 요청 중 진행 표시(#modal_progress) — 어떤 모달보다도 위(리뉴얼 모달·겹친 팝업 1000~2200대, 레거시 팝업 2000~10000,
	   종사자·수급자 선택 피커 10001). 공용 확인 모달(100000)·롱텀 인증 창(99999)보다는 아래 (2026-11-10) */
	--rn-z-progress: 10020;

	/* ---------- Tooltip — renewal/css/tooltip.css 공용 (.rn-tooltip)
	   기본은 밝은 톤이다: 말풍선 안에 색 글자가 들어가는 곳이 있어서
	   (종사자 목록 머리글 설명의 .col1/.col2) 어두운 바탕이면 그 색이 안 읽힌다.
	   어두운 톤이 필요한 곳은 .rn-tooltip--dark 로 뒤집는다.
	   2026-10-20 사용자 지시 '물음표 호버 설명문 디자인 다 통일 — 그림자 연하고 자연스럽게, 프리텐다드 14~15, 라운드·패딩 동일':
	   그림자 진한 한 겹(0 8px 24px 12%)·회색 #C6C6C6 선·12px 글자 → 옅은 두 겹 그림자 · #D8D8D8 선 · 14px · 8px 라운드 · 10/14px 여백 ---------- */
	--rn-tooltip-bg: var(--rn-color-bg);
	--rn-tooltip-text: var(--rn-color-text);
	--rn-tooltip-border: 1px solid var(--rn-color-border);
	--rn-tooltip-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.08);
	--rn-tooltip-radius: var(--rn-radius-lg);
	--rn-tooltip-padding: 0.625rem 0.875rem;
	--rn-tooltip-font-size: var(--rn-font-size-xs); /* 14px */
	--rn-tooltip-line-height: var(--rn-line-height-base); /* 1.5 */
	--rn-tooltip-max-width: min(90vw, 22.5rem);
	--rn-tooltip-z: calc(var(--rn-z-modal) + 20);
	--rn-tooltip-dark-bg: var(--rn-gray-90);
	--rn-tooltip-dark-text: var(--rn-gray-0);
	/* 도움말(?) 아이콘 — 디자이너 SVG(help.svg, 2026-10-13)의 모양. 원 안의 '?' 를 뚫은 한 색 마스크라 색은 아래 --rn-help-icon-color 가 정한다
	   (.rn-help-icon — tooltip.css). 디자이너 원본 색은 주황 #FF4500 — 주황으로 바꾸려면 --rn-help-icon-color 를 var(--rn-color-brand) 로.
	   [2026-10-13 '원래 회색이었는데 색은 못 바꾸나'] 종전 공통 회색(#717171, 올리면 #555)으로 둔다 — 흰 '?' 대비 4.88:1(AA).
	   크기 18px — 그림이 20 칸 안에 지름 16 이라 18px 칸이면 원 지름이 약 14px(옆 14px 글자 높이) */
	--rn-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1309 2.26257C14.4766 2.26266 18 5.78592 18 10.1317C17.9998 14.4774 14.4765 17.9998 10.1309 17.9999C5.78511 17.9999 2.26188 14.4774 2.26172 10.1317C2.26172 5.78587 5.78501 2.26257 10.1309 2.26257ZM9.21346 12.3294V12.2204C9.21626 11.7146 9.26376 11.3123 9.35598 11.0133C9.45099 10.7143 9.58512 10.474 9.75837 10.2923C9.93162 10.1079 10.1426 9.93884 10.3913 9.78516C10.5618 9.67897 10.714 9.56301 10.8482 9.43726C10.9851 9.30872 11.0927 9.16621 11.1709 9.00973C11.2492 8.85045 11.2883 8.67301 11.2883 8.47741C11.2883 8.25665 11.2366 8.06524 11.1332 7.90317C11.0298 7.7411 10.8901 7.61536 10.714 7.52594C10.5408 7.43652 10.3466 7.39181 10.1314 7.39181C9.93302 7.39181 9.7444 7.43512 9.56556 7.52174C9.38951 7.60557 9.24281 7.73411 9.12544 7.90736C9.01087 8.07782 8.9466 8.29438 8.93263 8.55705H7.44043C7.4544 8.02612 7.58294 7.58182 7.82605 7.22415C8.07196 6.86647 8.39611 6.59822 8.7985 6.41938C9.20368 6.24054 9.65079 6.15112 10.1398 6.15112C10.6735 6.15112 11.143 6.24473 11.5482 6.43195C11.9562 6.61917 12.2733 6.88603 12.4997 7.23253C12.7288 7.57623 12.8434 7.98421 12.8434 8.45645C12.8434 8.775 12.7917 9.06003 12.6883 9.31152C12.5877 9.56301 12.4438 9.78655 12.2565 9.98216C12.0693 10.1778 11.8472 10.3524 11.5901 10.5061C11.3637 10.6458 11.1779 10.7911 11.0326 10.942C10.8901 11.0929 10.7839 11.2703 10.714 11.4743C10.647 11.6755 10.6121 11.9242 10.6093 12.2204V12.3294H9.21346ZM9.9428 14.9449C9.6913 14.9449 9.47474 14.8555 9.2931 14.6766C9.11147 14.4978 9.02065 14.2798 9.02065 14.0228C9.02065 13.7713 9.11147 13.5561 9.2931 13.3773C9.47474 13.1984 9.6913 13.109 9.9428 13.109C10.1915 13.109 10.4067 13.1984 10.5883 13.3773C10.7727 13.5561 10.8649 13.7713 10.8649 14.0228C10.8649 14.1932 10.8216 14.3483 10.735 14.488C10.6512 14.6277 10.5394 14.7395 10.3997 14.8233C10.2628 14.9044 10.1105 14.9449 9.9428 14.9449Z' fill='black'/%3E%3C/svg%3E");
	--rn-help-icon-color: var(--rn-gray-60); /* #717171 */
	/* 삭제(휴지통) 아이콘 색 — 모든 화면 빨강 하나 (2026-10-15 '삭제 아이콘은 다 빨강으로, 공통으로'). .rn-icon--trash · .rn-icon-del(buttons.css)이 쓴다 */
	--rn-icon-delete-color: var(--rn-color-danger-text); /* #D50136 */
	--rn-help-icon-color-hover: var(--rn-gray-70); /* #555555 */
	--rn-help-icon-size: 1.125rem;

	/* ---------- Scrollbar — 롱텀(style/right_section)과 동일 톤, 리뉴얼 전역 ---------- */
	--rn-scrollbar-size: 5.2px;
	--rn-scrollbar-track: transparent;
	--rn-scrollbar-thumb: #ddd;
	--rn-scrollbar-thumb-hover: var(--rn-color-border-dark); /* #8E8E8E — 2026-10-22 '노란색 안 써'(종전 롱텀 노랑 #fbc02e) */

	/* ---------- Button — .rn-btn / 레거시 .btn-db 브릿지 공용 ---------- */
	/* 버튼 모서리 — 크기별로 이 둘만 쓴다 (2026-10-07 통일): 보통·큰 버튼(약 30px 이상) 6px · 작은 버튼(30px 미만) 4px */
	--rn-btn-radius: var(--rn-radius-md);       /* 6px */
	--rn-btn-radius-sm: var(--rn-radius-sm);    /* 4px · rn-btn--sm */
	--rn-btn-min-height: 2.25rem;
	--rn-btn-min-height-sm: 1.5rem;
	--rn-btn-padding-x: var(--rn-space-3);
	--rn-btn-padding-x-sm: 0.5rem;
	--rn-btn-font-size: var(--rn-font-size-xs);
	--rn-btn-font-size-sm: var(--rn-text-detail-s); /* 13px — 작은 버튼(24px) 글자 (2026-10-13 11 → 12, "수급자 상세 출력 버튼 글자가 작아 보인다" / 2026-10-21 12 → 13, "버튼 글자 13 으로 공통") */
	/* 회색 라인 버튼(.rn-btn--ghost · 기록지 관리 상세내역 [보기] 형식) 테두리 — 화면 범위에서 --rn-color-border-strong 을 바꿔도(.rn-pf 는 #D8D8D8)
	   버튼은 늘 #C6C6C6 · hover #8E8E8E 로 같게 보이도록 버튼 전용으로 뗐다 (2026-10-07 회색 라인 버튼 통일) */
	--rn-btn-ghost-border: var(--rn-color-border-strong);   /* #C6C6C6 */
	--rn-btn-ghost-hover-border: var(--rn-color-border-dark); /* #8E8E8E */
	/* 출력·문자 발송·엑셀 버튼(.rn-btn--print / --sms / --excel) — 업무관리 공통 아웃라인 + 왼쪽 아이콘 (2026-10-07 통일).
	   출력·문자는 남색, 엑셀은 초록. id 로 같은 룩을 흉내 내는 버튼(prs.css #download_cms_button · #print_investigate_req)도 이 토큰을 쓴다 */
	--rn-btn-action-color: var(--rn-color-secondary);       /* #003675 */
	--rn-btn-action-hover-bg: var(--rn-color-secondary);
	--rn-btn-action-hover-text: var(--rn-color-on-brand);
	--rn-btn-excel-color: var(--rn-color-success-text);     /* #006E18 */
	--rn-btn-action-icon-size: 1.125rem;  /* 18px — 디자이너 16px 아이콘을 조금 키움 (2026-10-07) */
	--rn-btn-action-icon-size-sm: 1rem;   /* 16px */
	/* 아이콘 — 디자이너 SVG(Printer.svg · Mail.svg · xlsx.svg, 2026-10-07)의 path 를 그대로 옮겼다.
	   mask 로 쓰고 색은 버튼 글자색(currentColor)이 칠한다 — hover 흰 아이콘 벌(w_*.svg)은 따로 필요 없다.
	   선 아이콘은 원본 stroke 1.2 그대로. 엑셀은 초록 부분(시트 테두리·칸·타일)만 불투명이고 흰 부분(시트 바탕·X)은
	   투명이라(X 는 타일과 evenodd 로 뚫었다) hover(초록 바탕)에서 디자이너 흰색 벌처럼 반전된다 */
	--rn-icon-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 11.3333C12.6212 11.3333 12.9319 11.3333 13.1769 11.2318C13.5036 11.0964 13.7631 10.8368 13.8984 10.5101C13.9999 10.2651 14 9.95472 14 9.33346V6.79794C14 6.05266 14 5.67947 13.8548 5.39453C13.727 5.14365 13.5225 4.93982 13.2716 4.81199C13.0039 4.67558 12.6589 4.66721 12 4.6667M12 4.6667C11.957 4.66667 11.9126 4.66667 11.8668 4.66667H4.13346C4.08759 4.66667 4.04312 4.66667 4 4.6667M12 4.6667L4 4.6667M12 4.6667V4.13127C12 3.386 12 3.0128 11.8548 2.72786C11.727 2.47698 11.5225 2.27316 11.2716 2.14532C10.9864 2 10.6135 2 9.8668 2H6.13346C5.38673 2 5.01308 2 4.72786 2.14532C4.47698 2.27316 4.27316 2.47698 4.14532 2.72786C4 3.01308 4 3.38673 4 4.13346V4.6667M4 4.6667C3.34115 4.66722 2.99556 4.67559 2.72786 4.81199C2.47698 4.93982 2.27316 5.14365 2.14532 5.39453C2 5.67975 2 6.05339 2 6.80013V9.33346C2 9.95472 2 10.2651 2.10149 10.5101C2.23682 10.8368 2.49621 11.0964 2.82292 11.2318C3.06794 11.3333 3.37857 11.3333 3.99983 11.3333M6.66667 7.33333H9.33333M6 10H10C10.6213 10 10.9319 10 11.1769 10.1015C11.5036 10.2368 11.7631 10.4962 11.8984 10.8229C11.9999 11.0679 11.9999 11.3787 11.9999 12C11.9999 12.6213 11.9999 12.9319 11.8984 13.1769C11.7631 13.5036 11.5036 13.7631 11.1769 13.8984C10.9319 13.9999 10.6213 14 10 14H6C5.37875 14 5.06794 13.9999 4.82292 13.8984C4.49621 13.7631 4.23682 13.5038 4.10149 13.1771C4 12.9321 4 12.6211 4 11.9998C4 11.3786 4 11.0679 4.10149 10.8229C4.23682 10.4962 4.49621 10.2368 4.82292 10.1015C5.06794 10 5.37874 10 6 10Z' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rn-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.66667 4.00004L6.73842 7.07488L6.73978 7.07601C7.1919 7.40756 7.41809 7.57344 7.66584 7.63752C7.88482 7.69416 8.115 7.69416 8.33398 7.63752C8.58195 7.57338 8.8088 7.40702 9.26172 7.07488C9.26172 7.07488 11.8734 5.07067 13.3333 4.00004M2 10.5335V5.46684C2 4.7201 2 4.34645 2.14532 4.06124C2.27316 3.81036 2.47698 3.60653 2.72786 3.4787C3.01308 3.33337 3.38673 3.33337 4.13346 3.33337H11.8668C12.6135 3.33337 12.9864 3.33337 13.2716 3.4787C13.5225 3.60653 13.727 3.81036 13.8548 4.06124C14 4.34618 14 4.71937 14 5.46465V10.5358C14 11.281 14 11.6537 13.8548 11.9386C13.727 12.1895 13.5225 12.3937 13.2716 12.5215C12.9867 12.6667 12.614 12.6667 11.8687 12.6667H4.13127C3.386 12.6667 3.0128 12.6667 2.72786 12.5215C2.47698 12.3937 2.27316 12.1895 2.14532 11.9386C2 11.6534 2 11.2802 2 10.5335Z' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rn-icon-excel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.2378 2.28515V13.3336H7.99902V2.28515H15.2378ZM15.2378 1.52344H7.99902C7.57869 1.52344 7.2373 1.8638 7.2373 2.28515V13.3336C7.2373 13.7539 7.57766 14.0953 7.99902 14.0953H15.2378C15.6582 14.0953 15.9995 13.7549 15.9995 13.3336V2.28515C15.9995 1.86482 15.6592 1.52344 15.2378 1.52344Z'/%3E%3Cpath d='M14.0952 3.42822H11.4287V4.5713H14.0952V3.42822Z'/%3E%3Cpath d='M14.0952 5.33301H11.4287V6.47609H14.0952V5.33301Z'/%3E%3Cpath d='M14.0952 7.23779H11.4287V8.38087H14.0952V7.23779Z'/%3E%3Cpath d='M14.0952 9.14258H11.4287V10.2857H14.0952V9.14258Z'/%3E%3Cpath d='M14.0952 11.0474H11.4287V12.1904H14.0952V11.0474Z'/%3E%3Cpath d='M10.6665 3.42822H8V4.5713H10.6665V3.42822Z'/%3E%3Cpath d='M10.6665 5.33301H8V6.47609H10.6665V5.33301Z'/%3E%3Cpath d='M10.6665 7.23779H8V8.38087H10.6665V7.23779Z'/%3E%3Cpath d='M10.6665 9.14258H8V10.2857H10.6665V9.14258Z'/%3E%3Cpath d='M10.6665 11.0474H8V12.1904H10.6665V11.0474Z'/%3E%3Cpath fill-rule='evenodd' d='M9.52395 0L0 1.66797V14.331L9.52395 16V0Z M6.80372 4.57126L5.47405 4.65123L4.66211 6.55602L4.6088 6.72722L4.56984 6.8564L4.53498 6.98147L4.50833 7.08502C4.50833 7.03376 4.49705 6.98557 4.47347 6.94046L4.43862 6.80719L4.39966 6.68212L4.35763 6.5673L3.6605 4.75785L2.37697 4.83781L3.74457 7.80162L2.23242 10.7654L3.4852 10.8413L4.32687 8.89857L4.36583 8.76529L4.39659 8.64637L4.42324 8.54692V8.46696L4.44989 8.60741L4.47655 8.72633L4.50013 8.81757L4.52371 8.88216L5.40024 10.9541L6.856 11.0453L5.21776 7.78111L6.80167 4.56921Z'/%3E%3C/svg%3E");
	/* 정렬 삼각형 ▲▼ — 지금 정렬 방향 쪽만 진하게. tables.css(.rn-sort-inline)·연간관리 머리글(th.sortable-th)이 같은 것을 쓴다 (2026-10-07) */
	--rn-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0L8 5H0z' fill-opacity='.25'/%3E%3Cpath d='M0 7h8l-4 5z' fill-opacity='.25'/%3E%3C/svg%3E");
	--rn-icon-sort-asc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0L8 5H0z'/%3E%3Cpath d='M0 7h8l-4 5z' fill-opacity='.25'/%3E%3C/svg%3E");
	--rn-icon-sort-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0L8 5H0z' fill-opacity='.25'/%3E%3Cpath d='M0 7h8l-4 5z'/%3E%3C/svg%3E");
	/* > 화살표 — 홈 카드 머리 링크(.rn-card__more) 글자 옆 (2026-10-07) */
	--rn-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3.5L10.5 8L6 12.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* X 닫기 — 모든 팝업 닫기 버튼(modal.css .btn-modal-close · 레거시 .md-ico-close · × 글자형)이 같이 쓴다 (2026-10-12).
	   선 굵기 1.5 — 종전 그림(ic_close.png 48px 를 16px 로 줄여 약 0.9px)보다 조금 두껍게. 색 #2D2D2D(아이콘 공통) */
	--rn-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 2.5l11 11M13.5 2.5l-11 11' stroke='%232d2d2d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	/* 메뉴 닫기 X — renewal_layout.php 의 ☰ 버튼(.rn-menu-toggle__close) 그림과 같은 획(24 격자 · 굵기 2 · 둥근 끝). 마스크라 색은 쓰는 쪽(currentColor).
	   폰 폭 수급자·종사자 상세의 닫기(.top-close)가 ☰ 자리·모양을 그대로 쓴다 (2026-10-15) */
	--rn-icon-menu-close: 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'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	/* ☰ 자리 아이콘 크기 — 폰 ☰(sidebar.css) · 그 자리에 뜨는 상세 닫기 ✕(prs.css · employee_right_section.css · guide.css · workdepartment.css) 공통.
	   24px — 24 격자 그림을 제 크기로 그려 획이 2px 그대로 선다 (2026-10-19 사용자 '햄버거 넘 작은가? 잘 안 보인다' — 박스를 빼고 아이콘만 남기자 20px(획 약 1.7px)가 가늘어 보였다).
	   누르는 칸은 그대로 36px(--rn-btn-min-height) */
	--rn-menu-icon-size: 1.5rem;
	/* + 더하기 — 등록 버튼 글자 오른쪽(.rn-btn--plus, 2026-10-07). 선 굵기 3 — 버튼 글자(13~14px 굵게) 획과 같은 굵기.
	   아이콘이 글자 크기의 0.75em(약 10px)으로 줄어 그려져, 1.8 은 실제 획이 1.1px 남짓이라 글자보다 가늘어 잘 안 보였다
	   (2026-10-22 사용자 '추가 버튼 더하기 아이콘 넘 얇아서 잘 안 보여', 종전 1.8 · 그 전 1.2 는 주황 바탕 위에서 너무 연했다) */
	--rn-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.5v11M2.5 8h11' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	/* 글자 옆 작은 아이콘(.rn-icon--*, buttons.css) — 연필·동전은 디자이너 SVG(Edit_Pencil_01.svg · coin.svg, 2026-10-07), 달력은 날짜 입력칸 아이콘과 같은 그림 */
	--rn-icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.00033 5.33345L2.66699 10.6668V13.3335L5.33366 13.3334L10.667 8.00011M8.00033 5.33345L9.91274 3.42102L9.91389 3.41988C10.1772 3.15663 10.309 3.02477 10.461 2.97538C10.5949 2.93187 10.7392 2.93187 10.873 2.97538C11.0249 3.02473 11.1567 3.15644 11.4195 3.41932L12.5794 4.57919C12.8434 4.8432 12.9755 4.97527 13.0249 5.12748C13.0684 5.26138 13.0684 5.40561 13.0249 5.53951C12.9755 5.69162 12.8436 5.82348 12.58 6.08712L12.5794 6.08768L10.667 8.00011M8.00033 5.33345L10.667 8.00011' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* 정보(i) — 디자이너 SVG(info.svg, 2026-10-13): #2D2D2D 원 + 흰 i. 두 색이라 마스크가 아니라 배경 그림으로 쓴다(.rn-info-icon, buttons.css).
	   종전 FA fa-info-circle(파란 선 아이콘)이 흐려 보였다 */
	--rn-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Crect width='16' height='16' rx='8' transform='matrix(1 0 0 -1 2 18)' fill='%232D2D2D'/%3E%3Crect x='9.16797' y='9.16602' width='1.66667' height='5' fill='white'/%3E%3Crect x='8.33203' y='9.16602' width='1.66667' height='0.833333' fill='white'/%3E%3Crect x='8.33203' y='13.334' width='3.33333' height='0.833333' fill='white'/%3E%3Ccircle cx='9.79167' cy='6.87565' r='1.04167' fill='white'/%3E%3C/svg%3E");
	/* 채운 연필 — 디자이너 SVG(Edit_Pencil.svg, 2026-10-13, 원본 채움 #8E8E8E). 목록 칸의 '여기를 눌러 작성' 표시(종사자 연간 기록 관리, 종전 FA solid fa-pencil-alt).
	   글자 옆 선 연필(--rn-icon-pencil)과 따로 둔다 — 마스크라 색은 쓰는 쪽 background-color 가 정한다 */
	--rn-icon-pencil-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.51367 10.7512V13.2712C2.51367 13.3912 2.60367 13.4912 2.72367 13.4912H5.24367C5.37367 13.4312 5.48367 13.3912 5.60367 13.3412L11.0037 7.94122L8.06367 5.00122L2.66367 10.3912C2.57367 10.4812 2.51367 10.6112 2.51367 10.7412V10.7512Z' fill='black'/%3E%3Cpath d='M10.3436 2.71129L8.47363 4.58129L11.4136 7.52129L13.2836 5.65129C13.5536 5.38129 13.5536 4.93129 13.2836 4.66129L11.3336 2.71129C11.0636 2.44129 10.6136 2.44129 10.3436 2.71129Z' fill='black'/%3E%3C/svg%3E");
	/* 휴지통 — 디자이너 SVG(Trash_Full.svg, 2026-10-13). 종사자 상세 사진 삭제(종전 FA solid fa-trash-alt) */
	--rn-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.33366 6.66667V11.3333M6.66699 6.66667V11.3333M4.00033 4V11.8667C4.00033 12.6134 4.00033 12.9865 4.14565 13.2717C4.27348 13.5226 4.47731 13.727 4.72819 13.8548C5.01313 14 5.38632 14 6.1316 14H9.86905C10.6143 14 10.987 14 11.2719 13.8548C11.5228 13.727 11.7273 13.5226 11.8551 13.2717C12.0003 12.9868 12.0003 12.614 12.0003 11.8687V4M4.00033 4H5.33366M4.00033 4H2.66699M5.33366 4H10.667M5.33366 4C5.33366 3.37874 5.33366 3.06827 5.43515 2.82324C5.57048 2.49654 5.82987 2.23682 6.15658 2.10149C6.4016 2 6.7124 2 7.33366 2H8.66699C9.28825 2 9.59888 2 9.8439 2.10149C10.1706 2.23682 10.4301 2.49654 10.5654 2.82324C10.6669 3.06827 10.667 3.37875 10.667 4M10.667 4H12.0003M12.0003 4H13.3337' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rn-icon-user-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 12.6666C10 11.1939 8.20914 9.99996 6 9.99996C3.79086 9.99996 2 11.1939 2 12.6666M12.6667 10.6666V8.66663M12.6667 8.66663V6.66663M12.6667 8.66663H10.6667M12.6667 8.66663H14.6667M6 7.99996C4.52724 7.99996 3.33333 6.80605 3.33333 5.33329C3.33333 3.86053 4.52724 2.66663 6 2.66663C7.47276 2.66663 8.66667 3.86053 8.66667 5.33329C8.66667 6.80605 7.47276 7.99996 6 7.99996Z' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* User_Add.svg — 상근직원 [신규 등록] (2026-10-13) */
	/* 톱니(설정) — AI 관제센터 이슈 알림 [알림 설정](control_center_aside.php 안 SVG)과 같은 그림. 상근직원 카드 설정 (2026-10-16, 종전 images/icon/ic_setting.png) */
	--rn-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
	--rn-icon-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 7.99996V11.3333C12 12.4379 10.2091 13.3333 8 13.3333C5.79086 13.3333 4 12.4379 4 11.3333V7.99996M12 7.99996V4.66663M12 7.99996C12 9.10453 10.2091 9.99996 8 9.99996C5.79086 9.99996 4 9.10453 4 7.99996M12 4.66663C12 3.56206 10.2091 2.66663 8 2.66663C5.79086 2.66663 4 3.56206 4 4.66663M12 4.66663C12 5.7712 10.2091 6.66663 8 6.66663C5.79086 6.66663 4 5.7712 4 4.66663M4 7.99996V4.66663' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rn-icon-calendar: 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'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	/* 시계 · 학사모 — 선 아이콘(24 격자 · 굵기 2 · 둥근 끝, 달력 아이콘과 같은 결). 학사모는 술 없이 판 + 몸통 두 획으로 단순하게, 격자를 넓게 채운다. 상근직원 근무 팝업 [근무시간 등록] · [공가/교육/단축 등록] (2026-10-15 종전 FA) */
	--rn-icon-clock: 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='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--rn-icon-education: 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%3Cpath d='M2 9.5 12 4l10 5.5-10 5.5z'/%3E%3Cpath d='M6 12.3v4.2c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4.2'/%3E%3C/svg%3E");
	/* 전화 — 수화기 면(채움) 아이콘(24 격자). 수급자·종사자 목록 폰 폭 [전화 걸기] (2026-10-15 '면스타일 초록' — 종전 선 아이콘, 레거시 모바일은 FA fa-phone). 색은 쓰는 쪽(buttons.css .rn-list-call)이 정한다 */
	--rn-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	/* 영수증 — 연필·동전과 같은 선 굵기(1.2) 라인 아이콘: 아래가 톱니인 종이 + 짧은 글줄 둘 — 종전 셋에서 하나 빼 간결하게 (2026-10-12 본인부담금 탭 [영수증], 종전 FA solid fa-receipt) */
	--rn-icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 2.5h8v11l-1.33-1-1.34 1-1.33-1-1.33 1-1.34-1L4 13.5v-11z' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M6.25 6.5h3.5M6.25 9.5h3.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	/* 업로드 — 위 화살표 + 바닥선, 라인 아이콘(선 1.4) (2026-10-12 파일함 [파일 업로드], 종전 FA solid 구름) */
	--rn-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 10.5V3M4.75 6.25L8 3l3.25 3.25M3 13h10' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* 폴더 — 디자이너 SVG(Folder.svg · Folder_Open.svg, 2026-10-14) 라인 아이콘(선 1.2). 파일함 폴더 목록(종전 주황 채움 폴더 그림). 열린 폴더는 고른 폴더. 마스크라 색은 쓰는 쪽이 정한다 */
	--rn-icon-folder: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.99996V11.2C2 11.9467 2 12.3198 2.14532 12.605C2.27316 12.8559 2.47698 13.0603 2.72786 13.1881C3.0128 13.3333 3.386 13.3333 4.13127 13.3333H11.8687C12.614 13.3333 12.9867 13.3333 13.2716 13.1881C13.5225 13.0603 13.727 12.856 13.8548 12.6051C14.0001 12.3199 14.0001 11.9466 14.0001 11.1998L14.0001 6.13314C14.0001 5.38641 14.0001 5.01304 13.8548 4.72782C13.727 4.47694 13.5226 4.27312 13.2717 4.14528C12.9865 3.99996 12.6134 3.99996 11.8667 3.99996H8M2 3.99996H8M2 3.99996C2 3.26358 2.59695 2.66663 3.33333 2.66663H5.78301C6.10913 2.66663 6.27258 2.66663 6.42603 2.70347C6.56208 2.73613 6.6919 2.79014 6.8112 2.86324C6.94571 2.94567 7.06121 3.06117 7.29167 3.29163L8 3.99996' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rn-icon-folder-open: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.22531 12.7414C2.21718 12.5736 2.28056 12.3518 2.3873 11.9782L2.38867 11.9736L3.33352 8.66663H13.919C13.9469 8.66663 13.9739 8.66663 14.0001 8.66665C14.4267 8.66696 14.6488 8.67242 14.8008 8.7666C14.9421 8.85417 15.0455 8.99138 15.0908 9.15133C15.1426 9.33392 15.077 9.56473 14.9452 10.0263L14.2214 12.5597C14.1421 12.837 14.1024 12.9754 14.0215 13.0783C13.9501 13.1691 13.856 13.2401 13.7491 13.2838C13.6279 13.3333 13.4836 13.3333 13.1954 13.3333L11.8687 13.3333H4.13127M4.13127 13.3333H3.41406C2.93435 13.3333 2.69383 13.3333 2.53255 13.2334C2.39122 13.1458 2.28763 13.0085 2.24225 12.8486C2.23269 12.8149 2.22715 12.7795 2.22531 12.7414M4.13127 13.3333C3.386 13.3333 3.0128 13.3333 2.72786 13.1881C2.52416 13.0843 2.35148 12.9301 2.22531 12.7414M14.0001 8.66665L14.0001 6.13314C14.0001 5.38641 14.0001 5.01304 13.8548 4.72782C13.727 4.47694 13.5226 4.27312 13.2717 4.14528C12.9865 3.99996 12.6134 3.99996 11.8667 3.99996H8M2.22531 12.7414C2.19609 12.6977 2.16936 12.6522 2.14532 12.605C2 12.3198 2 11.9467 2 11.2V3.99996M2 3.99996H8M2 3.99996C2 3.26358 2.59695 2.66663 3.33333 2.66663H5.78301C6.10913 2.66663 6.27258 2.66663 6.42603 2.70347C6.56208 2.73613 6.6919 2.79014 6.8112 2.86324C6.94571 2.94567 7.06121 3.06117 7.29167 3.29163L8 3.99996' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* ---------- 업무관리 목록 표 공통 — 수급자 관리 목록 기준으로 통일 (2026-10-07) ----------
	   머리글·본문 글자 14px · #1D1D1D · 왼쪽 정렬(체크박스 칸만 가운데) · 본문 한 줄 48px.
	   prs.css · employee.css · rfid.css · levy.css · payroll.css · 연간관리 CSS 가 이 값을 읽는다 */
	--rn-list-font-size: 0.875rem;   /* 14px */
	/* 목록·표 머리글 글자 15px — 모든 목록 상단 머리글이 이 값을 읽는다(공통 .rn-table · 화면별 목록 표 · 패널 탭 표) (2026-10-21 사용자 지시 '리스트 헤더 제목 공통 15, 14는 작다') */
	--rn-list-head-font-size: var(--rn-font-size-sm);
	--rn-list-row-height: 48px;
	--rn-list-text: var(--rn-color-text-title);
	/* 목록 가로선 — 머리글 아래 진한 선 #C6C6C6 · 줄 사이 선 #E4E4E4 (2026-10-07 연간관리·본인부담금·급여도 수급자 관리와 같게.
	   2026-10-28 사용자 지시 '리스트에 들어가는 보더 선 #E4E4E4 로 한 단계 더 연하게, 전체적으로' — 종전 #D8D8D8) */
	--rn-list-head-line: 1px solid var(--rn-color-border-strong);
	--rn-list-row-line: 1px solid var(--rn-gray-20);
	/* 업무관리 화면 좌우 여백 — 제목·필터 줄·목록 첫 칸/끝 칸의 내용·하단 바가 모두 화면 가장자리에서 이만큼 안쪽에서 시작/끝난다 (2026-10-07 모든 페이지 동일) */
	--rn-page-inset: var(--rn-space-4); /* 16px */
	/* 업무관리 화면 상단 높이 — 목록 머리글이 모든 화면에서 같은 자리(위에서 52 + 12 + 60 = 124px)에 오도록 수급자 관리 상단을 기준으로 고정 (2026-10-07)
	   제목 줄 52 = 위 여백 16 + 줄 36 · 제목 줄과 필터 줄 사이 12 · 필터 줄 60 = 위아래 12 + 줄 36.
	   두 줄 안의 컨트롤(버튼·입력칸·선택칸·탭)은 36px(--rn-btn-min-height)를 넘지 않아야 이 높이가 지켜진다 */
	--rn-list-title-height: 52px;
	--rn-list-title-gap: var(--rn-space-3);
	--rn-list-filter-height: 60px;
	/* 목록 머리글 줄 40px · 하단 바 60px(위아래 12 + 버튼 36) — 업무관리 모든 화면 같은 높이 (2026-10-12 '모든 페이지에서 동일하게').
	   제목 52 · 필터 60 · 머리글 40 · 본문 줄 48(--rn-list-row-height) · 하단 60 */
	--rn-list-head-height: 40px;
	--rn-list-footer-height: 60px;
	/* 하단 바(조회 줄) 윗선 + 짧고 진한 위 그림자 — 스크롤되는 목록과 또렷이 나뉘게, 업무관리 모든 목록 같다 (2026-11-03 사용자 지시).
	   prs · employee · rfid · page_frame 하단 바가 읽는다. 넓고 흐린 그림자(12px 번짐)는 회색 바탕에서 번져 지저분해 보였다 */
	--rn-list-footer-line: 1px solid var(--rn-color-border);
	--rn-list-footer-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
	/* 표·목록 머리글 바탕 — 화면 어디서나 연한 남색 #EDF1F5(업무관리 목록 머리글과 같은 색). 공통 .rn-table 과 화면마다 따로 그린
	   표(모달 표·폼 표의 왼쪽 제목 칸·달력 요일 줄 등)가 모두 이 토큰을 읽는다 (2026-10-12 '표·리스트 헤더는 회색 말고 남색') */
	--rn-table-th-bg: var(--rn-color-bg-page);
	/* 머리글 글자 — 연한 남색 바탕 위 글자는 회색이 아니라 검정 #1D1D1D (2026-10-12) */
	--rn-table-th-color: var(--rn-color-text);
	/* 업무관리 필터 줄 첫 칸(검색칸) 폭 — 모든 화면이 같이 쓴다(prs · employee · rfid · page_frame).
	   2026-10-12~19 에는 이 폭으로 '동작 버튼 시작점'(--rn-list-action-start 248px)을 만들어 제목 줄·하단 줄 버튼을 그 x 에 맞췄으나,
	   2026-10-19 사용자 지시로 버튼은 제목·건수 바로 옆에 붙인다(그 토큰과 --rn-footer-counts-width 는 지웠다) */
	--rn-list-search-width: 14rem;

	/* ---------- Form control — .rn-input / .rn-select / .rn-textarea / .rn-search 공용 ---------- */
	/* 높이: 버튼과 동일(나란히 둘 때 정렬). --sm은 패딩·폰트만 조밀
	   용도별: 일반 .rn-input · 날짜 .rn-input--date · 검색 .rn-search__input */
	--rn-control-min-height: var(--rn-btn-min-height);
	--rn-control-min-height-sm: var(--rn-btn-min-height);
	--rn-control-padding-x: var(--rn-space-3);
	--rn-control-padding-x-sm: var(--rn-space-2);
	--rn-control-radius: var(--rn-radius-md);
	--rn-control-font-size: var(--rn-font-size-sm);
	--rn-control-font-size-sm: var(--rn-font-size-xs);
	--rn-control-border: 1px solid var(--rn-color-border-strong);
	--rn-control-icon: var(--rn-gray-80);   /* #2D2D2D — 입력칸 아이콘(셀렉트 화살표 · 검색 돋보기 · 달력) 공통 색 (2026-10-07). 화살표·달력은 data URI 라 같은 값을 직접 적었다 */
	--rn-control-focus-ring: none; /* 포커스 시 바깥 번짐(3px 연주황) 없이 테두리만 주황 (2026-10-07 요청, 종전 0 0 0 3px var(--rn-color-brand-soft)) */
	--rn-control-chevron: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

	/* ---------- Checkbox — .rn-check 공용 (디자인 스펙) ---------- */
	--rn-check-size: 1.125rem; /* 18px */
	--rn-check-size-sm: 1rem;
	--rn-check-radius: var(--rn-radius-sm);
	--rn-check-border: 1px solid var(--rn-color-border-strong);
	--rn-check-bg: var(--rn-color-bg);
	/* 체크박스는 화면 어디서나 한 가지 — 주황(#FF4500, 브랜드색) 바탕 + 흰 체크, hover 는 진한 회색 테두리 (2026-10-12 '체크박스는 다 주황색으로'.
	   2026-10-07 에 검정 #2D2D2D 로 통일했던 것을 바꿨다 — 토큰 하나라 모든 리뉴얼 체크박스가 같이 바뀐다) */
	--rn-check-checked-bg: var(--rn-color-brand);
	--rn-check-checked-border: var(--rn-color-brand);
	--rn-check-hover-border: var(--rn-color-border-dark); /* #8E8E8E */
	--rn-check-disabled-bg: var(--rn-color-disabled-strong);
	--rn-check-disabled-border: var(--rn-color-disabled-strong);
	--rn-check-accent-bg: var(--rn-check-checked-bg);         /* --accent(초록)도 같은 주황 */
	--rn-check-accent-border: var(--rn-check-checked-border);
	--rn-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
	--rn-check-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' d='M3.5 8h9'/%3E%3C/svg%3E");

	/* ---------- Radio — .rn-radio 공용 (디자인 스펙) ---------- */
	--rn-radio-size: 1.125rem;
	--rn-radio-size-sm: 1rem;
	--rn-radio-border: 1.5px solid var(--rn-color-border-strong);
	--rn-radio-bg: var(--rn-color-bg);
	--rn-radio-checked-border: var(--rn-color-brand);
	/* 선택: 주황 링 + 흰 간격 + 주황 점 */
	--rn-radio-dot: radial-gradient(circle at center, var(--rn-color-brand) 0 36%, #fff 37% 100%);
	--rn-radio-dot-disabled: radial-gradient(circle at center, var(--rn-gray-40) 0 36%, #fff 37% 100%);
	--rn-radio-disabled-bg: var(--rn-color-disabled-strong);
	--rn-radio-disabled-border: var(--rn-color-disabled-strong);

	/* ---------- Modal header — .rn-modal .modal-header 공용 ---------- */
	--rn-modal-header-padding-y: var(--rn-space-3);
	--rn-modal-header-padding-start: var(--rn-space-4);
	--rn-modal-header-padding-end: 2.5rem; /* X 버튼 여유 */
	--rn-modal-header-gap: var(--rn-space-2);
	--rn-modal-header-title-size: 1.125rem; /* 18px — 모든 팝업 제목 공통 (2026-10-21 사용자 지시 '모달 제목 다 18로 통일', 종전 17px) */
	--rn-modal-header-title-weight: var(--rn-font-weight-bold);

	/* ---------- Layout (mobile-first: 드로어, 본문 전체 폭) ---------- */
	--rn-sidebar-width: 16rem;        /* 256px — 드로어 패널 폭 */
	--rn-sidebar-brand-height: 4.5rem; /* 72 = 위아래 18 + ☰/✕ 36 — 오른쪽 위 ✕(sidebar.css .rn-menu-toggle)가 머리 띠 세로 가운데 (2026-10-15 종전 3.5rem) */
	--rn-nav-item-height: 2.625rem;
	--rn-nav-icon-size: 1.25rem;
	--rn-nav-chevron-size: 1rem;
	--rn-nav-gap: 0.625rem;
	--rn-nav-indent: 2.25rem;
	--rn-sidebar-collapsed-width: 4.75rem; /* 76px — 접힌 사이드바(아이콘 + 아래 글씨). 메뉴 안쪽 여백 12 × 2 + 메뉴 칸 52(12px 글씨 네 자) (2026-11-02 종전 64px 아이콘만) */
	--rn-nav-item-height-collapsed: 3.375rem; /* 54px — 접힌 사이드바 메뉴 한 칸: 위아래 6 + 아이콘 20 + 사이 4 + 글씨 18 */
	--rn-main-offset: 0;              /* 모바일: 본문 전체 사용 */
	--rn-menu-toggle-display: inline-flex;
	--rn-sidebar-transform: translateX(-100%);

	/* 모바일 드로어: 풀 메뉴 표시 */
	--rn-sidebar-label-display: block;
	--rn-sidebar-chevron-display: inline-flex;
	--rn-sidebar-sub-display: block;
	--rn-sidebar-law-display: inline-flex;
	--rn-sidebar-brand-font-size: var(--rn-font-size-md); /* 17 — 모든 폭 공통 (2026-10-06 21·25 → 17) */
	--rn-sidebar-sub-font-size: 0.875rem; /* 14px — 왼쪽 하위 메뉴 전용 (2026-10-06 디자이너 요청으로 추가) */
	--rn-sidebar-nav-justify: flex-start;
	--rn-sidebar-item-padding-x: 0.625rem;

	/* ---------- 우측 상세 패널 폭 — 수급자 상세 · 종사자 상세 · 급여관리 개인별 설정 등 모든 화면 한 폭 (2026-10-15) ----------
	   종전에는 수급자 관리가 목록 열 경계(prs.js), 종사자 관리가 100% - 18rem, 급여관리가 창 기준 식이라
	   1920 창에서 1435 · 1412 로 갈렸다. 지금은 전부 이 값만 읽는다.
	     · 목록 왼쪽 16.5rem(이름 칸)은 남겨 다른 사람을 바로 고른다
	     · 넓은 창에서도 패널은 87.5rem(1400px)까지만 — 남는 폭은 목록이 더 보인다
	       (2026-10-20 사용자 지시 '다 1400으로 통일' — 종전 1920 창에서 1436px. 1680 창 이하는 원래 1400 보다 좁아 그대로)
	     · 창이 좁아 패널이 72rem 보다 좁아지면 목록을 더 덮어 72rem 을 지킨다(급여 폼 3칸·상단 카드 4개가 찌그러지지 않는 폭)
	     · 그래도 닫기 책갈피(패널 밖 왼쪽 2.5rem) 자리는 늘 남긴다
	   실측(창 → 패널): 1920 → 1400 · 1680 → 1196 · 1440 → 1152 · 1280 → 1020 · 1024 → 764
	   --rn-detail-panel-width : absolute 패널(수급자·종사자 관리) — 100% 는 패널을 담은 목록 화면(본문 전체) 폭
	   --rn-detail-panel-left  : fixed 패널(급여관리·본인부담금·연간관리 등, .rn-*-panel--fixed) — 창 기준 왼쪽 끝. 두 식은 같은 폭이 된다
	   768 미만은 --rn-main-offset 이 단위 없는 0 이라 --rn-detail-panel-left 가 무효가 된다 — 각 파일이 그 폭에서 left:0 으로 덮는다 */
	--rn-detail-panel-reserve: 16.5rem;
	--rn-detail-panel-min-width: 72rem;
	--rn-detail-panel-max-width: 87.5rem; /* 1400px */
	--rn-detail-panel-close-gap: 2.5rem;
	/* 상세 패널 왼쪽 그림자 — 펼친 패널이 뒤 목록 위에 떠 보이게, 왼쪽(목록 쪽)으로 번진다 (2026-11-04 사용자 지시 '상세 화면 펼쳐졌을 때 뒤에 그림자 · 배경 리스트랑 구분되도록').
	   종전 --rn-shadow-md(0 8px 24px · 12%)는 아래로만 번져 왼쪽 경계에 거의 안 보였다 */
	--rn-detail-panel-shadow: -14px 0 28px -6px rgba(0, 0, 0, 0.22), -2px 0 6px rgba(0, 0, 0, 0.06);
	/* 패널 밖 닫기 책갈피(.top-close, 2.5rem 정사각)의 위 위치 — 모든 상세 패널·모든 화면 같은 자리 (2026-10-19 사용자 지시 '모든 페이지에서 닫기버튼 위치는 동일').
	   패널은 어느 화면에서나 본문 맨 위(창 맨 위)에서 시작하므로, 업무관리 필터 줄(검색칸) 높이 가운데에 오게 잡는다:
	   제목 줄 52 + 간격 12 + (필터 줄 60 − 탭 40) / 2 = 74px. 종전 16px(제목 줄 높이)은 제목 옆 [일정 가져오기] 같은 버튼과 겹쳤다.
	   쓰는 곳: prs.css(수급자 상세 — 수급자 관리·본인부담금·수급자 연간관리) · employee_right_section.css(종사자 상세 — 종사자 관리·급여관리·종사자 연간관리)
	   · employee_year_record.css(교육관리 패널). 폰 폭(≤720)의 ☰ 자리 X 는 각 파일 720px 절이 따로 잡는다 */
	--rn-detail-close-top: calc(var(--rn-list-title-height) + var(--rn-list-title-gap) + (var(--rn-list-filter-height) - var(--rn-detail-panel-close-gap)) / 2);
	--rn-detail-panel-width: min(calc(100% - var(--rn-detail-panel-close-gap)), max(calc(100% - var(--rn-detail-panel-reserve)), var(--rn-detail-panel-min-width)), var(--rn-detail-panel-max-width));
	--rn-detail-panel-left: max(calc(var(--rn-main-offset) + var(--rn-detail-panel-close-gap)), min(calc(var(--rn-main-offset) + var(--rn-detail-panel-reserve)), calc(100vw - var(--rn-detail-panel-min-width))), calc(100vw - var(--rn-detail-panel-max-width)));
}

/* 폰(≤767, 사이드바가 서랍인 폭) — 화면 가장자리 바깥 여백 18 → 12px (2026-11-13 사용자 지시 '모바일에선 전체적으로 양옆 패딩 조금 더 줄여줘').
   좁은 화면에서 달력·목록이 좁아 보였다. ☰ · 상세 닫기(✕) 자리도 같은 값을 따라 12px 로 온다 */
@media (max-width: 767px) {
	:root {
		--rn-page-gutter: var(--rn-space-3);
	}
}

/* Tablet+ : 768px — 고정 사이드바 */
@media (min-width: 768px) {
	:root {
		--rn-sidebar-width: 12.5rem; /* 200px */
		--rn-sidebar-brand-height: 3.75rem;
		--rn-main-offset: var(--rn-sidebar-width);
		--rn-menu-toggle-display: none;
		--rn-sidebar-transform: none;
		--rn-home-banner-columns: repeat(2, 1fr);
		--rn-home-padding: var(--rn-space-5);
		--rn-home-gap: var(--rn-space-4);
		--rn-home-card-padding: var(--rn-space-4);
		--rn-font-size-stat: var(--rn-text-title-l); /* 21 · md+ 통계 */

		/* Typography desktop sizes */
		--rn-text-display-l: 4.125rem; /* 66 */
		--rn-text-display-m: 3.125rem; /* 50 */
		--rn-text-display-s: 2.5rem;   /* 40 */
		--rn-text-heading-l: 3.125rem; /* 50 */
		--rn-text-heading-m: 2.5rem;   /* 40 */
		--rn-text-heading-s: 2rem;     /* 32 */
		--rn-text-title-xxl: 2rem;     /* 32 */
	}
}

/* Desktop : 1024px */
@media (min-width: 1024px) {
	:root {
		--rn-sidebar-width: 13.75rem; /* 220px */
		--rn-sidebar-brand-height: 4rem;
		--rn-nav-indent: 2.5rem;
		--rn-home-banner-columns: repeat(4, 1fr);
		--rn-home-banner-height: 7.5rem; /* 136 → 120px — 아래 서비스 현황 그래프에 높이를 더 준다 (2026-10-06) */
		--rn-home-gap: var(--rn-space-4);
		--rn-home-padding: var(--rn-space-6);
	}
}

/* 접힌 사이드바 — 768px 이상에서 사이드바 머리 [접기]로 폭을 줄이고 메뉴를 아이콘 + 아래 작은 글씨로 바꾼다 (2026-11-02 사용자 지시).
   글씨 배치는 sidebar.css(접힌 사이드바 절). 여기서는 폭 · 화살표 · 하위 메뉴 · 글자 버튼 감춤만 정한다.
   html.rn-sidebar-collapsed 는 renewal_layout.php 머리 스크립트(새로고침해도 유지)와 sidebar.js 가 붙인다.
   본문 · 상세 패널 자리는 --rn-main-offset(= 사이드바 폭)을 따라 함께 넓어진다. 폰 서랍(≤767)에는 걸리지 않는다 */
@media (min-width: 768px) {
	:root.rn-sidebar-collapsed {
		--rn-sidebar-width: var(--rn-sidebar-collapsed-width);
		--rn-sidebar-chevron-display: none;
		--rn-sidebar-sub-display: none;
		--rn-sidebar-law-display: none;
		--rn-sidebar-nav-justify: center;
	}
}

/* 밝은 사이드바 — 어두운 남색 메뉴가 어르신들께 눈부시고 침침하다는 건의로 [밝게 보기]를 두었다 (2026-11-12 사용자 지시, 기본은 종전 어두운 색).
   html.rn-sidebar-light 는 renewal_layout.php 가 기관 설정(cb_member_extra_vars.rn_sidebar_theme = 'light')을 읽어 첫 그림부터 붙이고,
   사이드바 머리 띠 왼쪽 해 · 달 아이콘(sidebar.js)이 바꾸며 Mypage::sidebar_theme 으로 저장한다.
   사이드바 색은 모두 --rn-sidebar-* 토큰이라 여기서 바꾸는 것만으로 메뉴 · 펼침 메뉴 · 폰 서랍이 함께 따라온다. AI케봇 버튼 색은 그대로 */
:root.rn-sidebar-light {
	--rn-sidebar-bg: var(--rn-gray-0);
	--rn-sidebar-text: var(--rn-gray-90);
	--rn-sidebar-text-muted: var(--rn-gray-70);
	--rn-sidebar-sub-text: var(--rn-gray-80);
	--rn-sidebar-divider: var(--rn-gray-30);
	--rn-sidebar-hover: var(--rn-secondary-5);
	--rn-sidebar-active-bg: var(--rn-secondary-50); /* #003675 — 선택한 메뉴를 진한 남색 칸 · 흰 글자로 또렷하게 */
	--rn-sidebar-active-text: var(--rn-gray-0);
	--rn-sidebar-brand: var(--rn-secondary-50);
	--rn-sidebar-law-border: var(--rn-gray-40);
	--rn-sidebar-law-text: var(--rn-gray-70);
	--rn-sidebar-law-hover-border: var(--rn-gray-70);
	--rn-sidebar-law-hover-text: var(--rn-gray-90);
	--rn-sidebar-logout-hover-bg: var(--rn-danger-5);
	--rn-sidebar-logout-hover-text: var(--rn-danger-60);
	--rn-sidebar-newtab-border: var(--rn-gray-50);  /* 흰 테두리는 흰 바탕에 묻혔다 — #8E8E8E 회색 테두리 · 흰 바탕 · 진회색 글자 */
	--rn-sidebar-newtab-bg: var(--rn-gray-0);
}