/**
 * 리뉴얼 공용 툴팁 — .rn-tooltip
 *
 * [왜 만들었나]
 * 같은 '말풍선' 이 화면마다 따로 구현돼 색이 제각각이었다(2026-09-30):
 *   · 종사자 목록 머리글 설명(.gu_tooltip)        — 흰 바탕 + rn 토큰
 *   · 급여제공계획 도움말(.ui-tooltip/.pof-toolt-pop) — 흰 바탕인데 #fff·#333·#d8d9db **하드코딩**
 *   · 상근직원 이전계획 미리보기(.visit-load-prev-plan-tooltip) — 검은 바탕
 * 값이 한곳에 없으니 한 군데를 고쳐도 나머지는 그대로였다. 여기로 모은다.
 *
 * [기본이 밝은 톤인 이유]
 * 말풍선 안에 **색 글자**가 들어가는 곳이 있다(.gu_tooltip 의 .col1 정보색 / .col2 브랜드색).
 * 어두운 바탕이면 그 색들이 안 읽힌다. 그래서 밝은 톤을 기본으로 두고,
 * 어두운 톤이 어울리는 곳(글자만 있는 미리보기)은 .rn-tooltip--dark 로 뒤집는다.
 *
 * [별칭] 레거시·외부 위젯이 만드는 이름은 클래스를 바꿀 수 없다.
 *   · .ui-tooltip              jQuery UI 가 직접 만든다
 *   · .pof-toolt-pop           pof 화면 스크립트가 만든다
 *   · .gu_tooltip              longterm/js/common.js 가 .active 로 토글한다
 *   · .visit-load-prev-plan-tooltip  workdepartment 스크립트가 만든다
 * 그래서 이 파일에서 같은 규칙을 그 이름들에도 걸어 준다(forms.css 의 별칭 관례와 같다).
 *
 * 위치(top/left/right·position)와 보이기·감추기는 **각 화면이 정한다** —
 * 여기서는 색·테두리·여백·글자·그림자만 맡는다. 화면 CSS 에서 그 부분만 남길 것.
 *
 * [2026-10-20 통일 — 사용자 지시 '물음표 호버 설명문 디자인 다 통일']
 * 모든 말풍선이 한 모양: 흰 바탕 · #D8D8D8 선 · 8px 라운드 · 10/14px 여백 · Pretendard 14px · 옅은 두 겹 그림자(variables.css --rn-tooltip-*).
 * 기관 연간기록(회의록 등) 도움말은 jQuery UI 기본 테마(code.jquery.com jquery-ui.css — 여러 화면이 본문 안에서 **이 파일보다 뒤에** 싣는다)가
 * 그림자 0 0 5px #aaa · Arial 1.1em · 3px 라운드로 덮어 '그림자가 너무 진하고 글자가 큰' 말풍선이 됐다. 그래서 별칭은 body.rn-body 를 붙여
 * 특이도(0,2,1)로 테마(.ui-tooltip · body .ui-tooltip · .ui-widget · .ui-widget-content · .ui-corner-all — 0,1,0~0,1,1)를 이긴다.
 * 함께 묶은 이름(모두 JS·레거시가 만들어 이름을 바꿀 수 없다):
 *   · .ui-tooltip                 jQuery UI — 기관 연간기록·급여관리·급여제공계획 등의 em.toolt[data-tooltip] · [title]
 *   · .tooltip-content            종사자 상세 급여설정 탭 em.toolt[title](employee_right_section.js) · 본인부담금 금액 설명(levyManagementUtil)
 *   · .pof-toolt-pop              급여제공계획 도움말(pofPlnppDetail__.js)
 *   · .gu_tooltip                 종사자 목록 머리글 설명(longterm/js/common.js)
 *   · .long-service-tooltip-box   장기근속장려금 표(employee_right_section.js)
 *   · .visit-load-prev-plan-tooltip  상근직원 [전월 계획일정 불러오기] · 직원 정보 모달 도움말(workdepartment.js — 2026-10-20 어두운 톤 → 밝은 톤)
 *   · .status-chip-tip            수급자 일정 '확정된 일정' 안내(prs.css)
 *
 * 로드: renewal_layout.php 가 전역으로 싣는다(화면 CSS 보다 앞).
 */

/* 모양(색·선·라운드·여백·글자·그림자) — 특이도를 올려 테마·레거시가 못 덮게 */
.rn-tooltip,
body.rn-body :is(.rn-tooltip, .ui-tooltip, .tooltip-content, .pof-toolt-pop, .gu_tooltip, .long-service-tooltip-box, .visit-load-prev-plan-tooltip, .status-chip-tip) {
	box-sizing: border-box;
	padding: var(--rn-tooltip-padding);
	border: var(--rn-tooltip-border);
	border-radius: var(--rn-tooltip-radius);
	background: var(--rn-tooltip-bg);
	color: var(--rn-tooltip-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-tooltip-font-size);
	font-weight: var(--rn-font-weight-regular);
	font-style: normal;
	line-height: var(--rn-tooltip-line-height);
	letter-spacing: normal;
	text-align: left; /* 레거시 right_section.css · modal.css 의 .ui-tooltip 가운데 정렬을 덮는다(급여 경고 말풍선은 payroll.css 가 다시 가운데로) */
	box-shadow: var(--rn-tooltip-shadow);
}

/* 폭·줄바꿈 기본값 — 특이도 0(:where). 화면마다 정한 폭(달력 칸 단추 16.25rem · 장기근속 표 nowrap 등)과
   줄바꿈(\n 을 살리는 pre-line)이 이 기본값보다 앞서게 둔다 */
:where(.rn-tooltip, .ui-tooltip, .tooltip-content, .pof-toolt-pop, .gu_tooltip, .long-service-tooltip-box, .visit-load-prev-plan-tooltip, .status-chip-tip) {
	max-width: var(--rn-tooltip-max-width);
	white-space: normal;
	word-break: keep-all;
}

/* jQuery UI 테마의 .ui-tooltip { max-width: 300px } 은 위 기본값(특이도 0)을 이기므로 여기서 한 번 더 */
body.rn-body .ui-tooltip {
	max-width: var(--rn-tooltip-max-width);
}

/* 종사자 급여설정 탭 설명(.tooltip-content)은 title 의 줄바꿈을 살린다(레거시 modal.css · right_section.css 와 같은 값) */
.tooltip-content {
	white-space: pre-line;
}

/* 어두운 톤 — 아이콘 버튼 이름표처럼 글자만 있는 짧은 말풍선용(수급자 달력 칸 단추 .rn-prs-cal-tip 등). 모양(여백·라운드·글자)은 위와 같다 */
.rn-tooltip--dark,
body.rn-body .rn-tooltip--dark {
	border-color: var(--rn-tooltip-dark-bg);
	background: var(--rn-tooltip-dark-bg);
	color: var(--rn-tooltip-dark-text);
}

/* jQuery UI 기본 테마의 말풍선 안쪽 여백·테두리 잔재를 지운다 */
body.rn-body .ui-tooltip .ui-tooltip-content {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
}

/* ==========================================================================
   도움말 아이콘 — .rn-help-icon (동그라미 '?' 배지)

   [왜 공용으로 두나]
   같은 '?' 가 화면·탭마다 따로 정의돼 있었다. 레거시 em.toolt 는 style.css(리뉴얼 미로드)의
   외부 icons8 이미지에 기대고, 장기근속장려금 아이콘은 파셜 안 <style> 이 같은 이미지를 쓴다.
   리뉴얼에서는 그 이미지가 안 실려 빈 칸이 되므로 토큰으로 직접 그린다.

   [색 — 2026-09-30 고침]
   배경이 --rn-color-text-subtle(gray-50 #8e8e8e)이었는데, 안의 '?' 가 9px 로 작아
   흰 글자 대비가 3.28:1 밖에 안 나와 '회색 배경에 회색 글자'로 보였다.
   gray-60(#717171)으로 낮추면 4.88:1 이라 AA 를 넘긴다. 글자도 9px → 10px 로 키웠다.

   [별칭] 레거시 클래스는 공용 파셜이라 바꿀 수 없다.
     · em.toolt                     여러 탭의 도움말(마크업이 비어 있어 ::before 로 '?' 를 넣는다)
     · em.long-service-tooltip-icon 장기근속장려금(급여 및 사회보험설정 탭)
   <i class="fas … long-service-tooltip-icon"> 는 제외한다 — Font Awesome 이 이미 ::before 로
   자기 글리프를 넣어서, 여기서 content 를 또 주면 둘이 겹친다. 그쪽은 색만 아래에서 맞춘다.
   ========================================================================== */
/* [2026-10-13 '? 아이콘 디자인이 다 달라 통일'] 모양을 디자이너 help.svg 로 바꿨다 — '?' 를 뚫은 원 마스크(--rn-icon-help)에
   색(--rn-help-icon-color, 기본 회색 #717171 · 올리면 #555)을 칠한다. 색을 바꾸려면 그 토큰 하나만 바꾸면 된다(variables.css).
   종전 회색 원 + CSS 글자 '?'. 같은 모양으로 함께 그리는 레거시 이름 —
     · em.toolt · em.long-service-tooltip-icon (위 별칭)
     · em.toolt-cms (본인부담금 CMS 메뉴) · em.ic (레거시 표 머리글 도움말 — style.css / prs_right_section.css 의 icons8 그림)
     · Font Awesome fa-question-circle / fa-circle-question (내 정보 결제 관리 등) — 글리프(::before)를 끄고 그림으로
   마크업은 모두 빈 요소다(글자가 없다) — 크기 18px(--rn-help-icon-size) */
.rn-help-icon,
.rn-body em.toolt,
.rn-body em.long-service-tooltip-icon,
.rn-body em.toolt-cms,
.rn-body em.ic,
.rn-body i:is(.fa-question-circle, .fa-circle-question) {
	display: inline-block;
	flex-shrink: 0;
	box-sizing: border-box;
	width: var(--rn-help-icon-size);
	height: var(--rn-help-icon-size);
	margin: 0 0 0 var(--rn-space-1);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--rn-help-icon-color);
	-webkit-mask: var(--rn-icon-help) center / contain no-repeat;
	mask: var(--rn-icon-help) center / contain no-repeat;
	color: transparent;
	font-size: 0;
	font-style: normal;
	line-height: 1;
	vertical-align: middle;
	cursor: help;
	transition: background-color var(--rn-transition-fast);
}

/* 올리면 한 단계 진하게 */
.rn-help-icon:hover,
.rn-body :is(em.toolt, em.long-service-tooltip-icon, em.toolt-cms, em.ic):hover,
.rn-body i:is(.fa-question-circle, .fa-circle-question):hover {
	background-color: var(--rn-help-icon-color-hover);
}

/* 글자·글리프는 그리지 않는다(마스크가 '?' 를 담는다) */
.rn-help-icon::before,
.rn-help-icon::after,
.rn-body :is(em.toolt, em.long-service-tooltip-icon, em.toolt-cms, em.ic)::before,
.rn-body :is(em.toolt, em.long-service-tooltip-icon, em.toolt-cms, em.ic)::after,
.rn-body i:is(.fa-question-circle, .fa-circle-question)::before {
	content: none;
}

/* [레거시 별칭에만 !important — 명시도에서 지고 있었다(2026-09-30)]
   급여 및 사회보험설정 탭의 '급여설정' 은 마크업이
   `.sins_box > … > .field-block > label > em.toolt` 이라 레거시 규칙에 걸린다:
     payroll_renewal.css  .sins_box label em { color: var(--color-gray-text) }   (0,2,2)
     위 공용 규칙        .rn-body em.toolt                             (0,2,1)
   (0,2,2) 가 (0,2,1) 을 이기고, payroll_renewal.css 는 이 파일보다 뒤에 실린다.
   게다가 --color-gray-text 는 리뉴얼에 없는 팔레트라 계산 시점에 무효가 되고,
   color 는 inherit 로 떨어져 라벨의 회색을 물려받았다 — 그게 '회색 배경에 회색 글자' 였다.

   레거시 CSS 는 여러 화면 공용이라 고칠 수 없고, 어느 화면에서 어떤 조상 선택자가
   걸릴지 미리 알 수 없다. 그래서 **레거시 이름으로 들어오는 별칭에만** 못박는다.
   새 마크업이 쓰는 .rn-help-icon 은 그럴 일이 없으므로 제외한다. */
/* em.long-service-tooltip-icon 은 레거시 right_section.php 파셜 끝 <style> 의
   `#tab_payroll_emp_config .long-service-tooltip-icon { display:inline-block; width/height:18px }` (1,1,0) 에도 진다.
   그 <style> 은 renewal/partials/employee_right_section.php 가 정규식으로 걷어내게 돼 있으나 급여관리 화면에는 남아 있어(2026-10-12 실측)
   '?' 가 18px 원 왼쪽 위로 쏠려 다른 도움말과 모양이 달랐다 — 크기·배치도 여기서 못박는다. */
.rn-body em.long-service-tooltip-icon {
	display: inline-flex !important;
	width: var(--rn-help-icon-size) !important;
	height: var(--rn-help-icon-size) !important;
}

.rn-body .rn-help-icon,
.rn-body em.toolt,
.rn-body em.long-service-tooltip-icon,
.rn-body em.toolt-cms,
.rn-body em.ic {
	width: var(--rn-help-icon-size) !important;
	height: var(--rn-help-icon-size) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--rn-help-icon-color) !important;
	background-image: none !important; /* 레거시 icons8 그림 끄기 */
	-webkit-mask: var(--rn-icon-help) center / contain no-repeat !important;
	mask: var(--rn-icon-help) center / contain no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	margin: 0 0 0 var(--rn-space-1) !important;
}

.rn-body :is(.rn-help-icon, em.toolt, em.long-service-tooltip-icon, em.toolt-cms, em.ic):hover {
	background-color: var(--rn-help-icon-color-hover) !important;
}

/* AI 기능 설명 [?] (views/longterm/common/ai_correct_btn.php .ai-help-btn — [AI 초안 생성]·[AI 보정] 옆) — 공통 도움말 아이콘과 같은 모양 (2026-10-14).
   종전 보라 테두리 원 + 글자 '?'. 레거시 ai_correct_btn.css 가 뒤에 실리고 화면별로 (0,2,0)~(0,3,0) 규칙이 있어 모양 속성은 못박는다.
   누르면 AI 설명 창이 뜨는 버튼이라 커서는 pointer 그대로 */
body.rn-body .ai-help-btn {
	display: inline-block !important;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--rn-help-icon-size) !important;
	height: var(--rn-help-icon-size) !important;
	min-width: 0;
	min-height: 0;
	margin: 0 0 0 var(--rn-space-1);
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--rn-help-icon-color) !important;
	-webkit-mask: var(--rn-icon-help) center / contain no-repeat !important;
	mask: var(--rn-icon-help) center / contain no-repeat !important;
	box-shadow: none;
	color: transparent !important;
	font-size: 0 !important;
	vertical-align: middle;
	cursor: pointer;
}

body.rn-body .ai-help-btn:hover {
	background-color: var(--rn-help-icon-color-hover) !important;
}

body.rn-body .ai-help-btn > span {
	display: none !important;
}

/* 장기근속장려금 말풍선 안쪽 — 제목 + 금액/근속기간 표.
   상자는 JS 가 만든다($('<div class="long-service-tooltip-box">')) — 이름을 바꿀 수 없어
   위 말풍선 별칭에 넣어 같은 톤을 쓴다. 표는 줄이 많아 줄바꿈을 막는다. */
/* 처음엔 숨기고 body 기준 절대 위치 — 파셜 JS 가 body 끝에 붙인 뒤 top/left 를 주고 fadeIn() 한다.
   이 값은 레거시 파셜의 <style> 블록에 있었는데 리뉴얼 종사자 패널이 그 블록을 걷어낸다(renewal/partials/employee_right_section.php) */
.long-service-tooltip-box {
	display: none;
	position: absolute;
	z-index: var(--rn-tooltip-z);
	max-width: none;
	white-space: nowrap;
}

.long-service-tooltip-box .tt-title {
	margin-bottom: var(--rn-space-1);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-semibold);
}

.long-service-tooltip-box table {
	width: 100%;
	border-collapse: collapse;
}

.long-service-tooltip-box th,
.long-service-tooltip-box td {
	padding: 0.125rem var(--rn-space-2);
	font-size: var(--rn-tooltip-font-size);
	text-align: left;
}

.long-service-tooltip-box th {
	color: var(--rn-table-th-color); /* 머리글 글자 검정 (2026-10-12 종전 var(--rn-color-text-muted)) */
	font-weight: var(--rn-font-weight-semibold);
}