/**
 * 리뉴얼 사이드바
 * - 수치·색상은 variables.css 의 var(--rn-*)만 사용
 * - mobile-first: 기본 = 오프캔버스 드로어, md+ = 고정 사이드바
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-regular);
	line-height: var(--rn-line-height-base);
	font-variant-numeric: tabular-nums;
	color: var(--rn-color-text);
	background: var(--rn-color-bg-page);
}

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

/* <em> 은 이 프로젝트에서 '강조'가 아니라 인라인 조각을 감싸는 태그로 쓰인다 —
   레거시 마크업이 값·단위·라벨·뱃지를 죄다 <em> 으로 싸기 때문에 브라우저 기본
   기울임이 그대로 나오면 거의 모든 자리에서 어색하다. 그래서 여기서 한 번에 끈다.
   (그동안은 화면 CSS 마다 font-style: normal 을 따로 적어 왔다 — 70곳이 넘는다.
    그 선언들은 이제 중복이지만 해가 없어 그대로 둔다.)
   정말로 기울여야 하는 곳이 생기면 그 선택자에서 font-style: italic 을 명시할 것. */
.rn-body em {
	font-style: normal;
}

.rn-app {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---------- Mobile menu toggle ---------- */
/* 바탕·테두리 없이 진회색(#2D2D2D) 아이콘만 — 상세 화면이 같은 자리에 띄우는 닫기 ✕(prs.css · employee_right_section.css 720px 절 .top-close)와
 * 같은 모양이다. 누르는 칸은 화면 버튼과 같은 36px, 아이콘 20px. 자리는 화면 바깥 여백(18px) 줄 — 맨 위 툴바 버튼과 한 줄로 맞는다.
 * 2026-10-19 사용자 지시 '햄버거 메뉴 닫기버튼처럼 검정 박스 없이 아이콘만, 상세 ✕ 랑 같은 모양'. 목록에서는 진회색 박스 ☰,
 * 상세에서는 아이콘만 ✕ 라 같은 자리가 화면마다 다르게 보였다.
 * 종전: 진회색 바탕(롱텀 버튼 색) + 흰 아이콘. 2026-10-15 에는 40px · 연한 테두리 · 그림자 → 흰 바탕 · 회색 테두리('잘 안 보인다')
 *   → 메뉴 남색 바탕 · 밝은 남색 hover('호버 남색은 이상하다') → 진회색 바탕을 거쳤다 */
.rn-menu-toggle {
	display: var(--rn-menu-toggle-display);
	position: fixed;
	top: var(--rn-page-gutter);
	right: var(--rn-page-gutter);
	left: auto;
	z-index: calc(var(--rn-z-sidebar) + 2);
	align-items: center;
	justify-content: center;
	width: var(--rn-btn-min-height);
	height: var(--rn-btn-min-height);
	padding: 0;
	border: 0;
	border-radius: var(--rn-btn-radius);
	background: transparent;
	color: var(--rn-control-icon);
	box-shadow: none;
	cursor: pointer;
	transition: background var(--rn-transition-fast);
	/* 아이폰(iOS Safari)은 안쪽 스크롤 틀(.rn-main 등) 속 sticky 띠(홈 이름 줄 — 페이지 바탕색으로 ☰ 자리까지 칠한다)를
	   별도 층으로 그리면서 z-index 가 더 높은 fixed ☰ 를 그 아래에 그려 ☰ 가 안 보였다(2026-11-12 사용자 '아이폰에서 메인 상단 햄버거가 안 보여').
	   ☰ 도 자기 층으로 올려 z-index 순서대로 그리게 한다. 자기 자신의 transform 이라 fixed 자리는 그대로다 */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.rn-menu-toggle svg {
	width: var(--rn-menu-icon-size); /* 24px — 상세 ✕ 와 같은 크기 (variables.css, 2026-10-19 종전 20px) */
	height: var(--rn-menu-icon-size);
}

/* 메뉴가 열리면 ☰ → ✕ (sidebar.js 가 aria-expanded 를 바꾼다). 자리는 ☰ 그대로 — 어두운 메뉴 위라 흰 아이콘만, 바탕·테두리 없음.
 * 2026-10-15 종전: 흰 바탕 · 회색 테두리 그대로, 머리 띠 가운데로 위·오른쪽 10px 옮김 */
.rn-menu-toggle[aria-expanded="true"] {
	border-color: transparent;
	background: transparent;
	color: var(--rn-sidebar-text);
}

.rn-menu-toggle[aria-expanded="true"] .rn-menu-toggle__open,
.rn-menu-toggle:not([aria-expanded="true"]) .rn-menu-toggle__close {
	display: none;
}

/* 손가락 화면에서는 누른 뒤 hover 가 남아 있지 않게 마우스가 있을 때만. ☰ 는 상세 ✕ 처럼 바뀌지 않고(아이콘만),
   메뉴가 열린 ✕ 는 메뉴 항목과 같은 옅은 흰 바탕 */
@media (hover: hover) {
	.rn-menu-toggle[aria-expanded="true"]:hover {
		border-color: transparent;
		background: var(--rn-sidebar-hover);
	}
}

.rn-sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: calc(var(--rn-z-sidebar) - 1);
	background: var(--rn-color-overlay);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.rn-sidebar-backdrop.is-visible {
	display: block;
}

/* ---------- Sidebar shell ---------- */
.rn-sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: var(--rn-z-sidebar);
	display: flex;
	flex-direction: column;
	width: var(--rn-sidebar-width);
	max-width: 85vw;
	background: var(--rn-sidebar-bg);
	border-right: 1px solid var(--rn-sidebar-divider);
	color: var(--rn-sidebar-text);
	transform: var(--rn-sidebar-transform);
	transition: transform var(--rn-transition-fast), width var(--rn-transition-fast);
	will-change: transform;
}

.rn-sidebar.is-open {
	transform: translateX(0);
}

/* 720px 이하에서는 열린 메뉴가 화면을 꽉 채운다. 닫기 버튼은 오른쪽 위에 그대로 둔다. */
@media (max-width: 720px) {
	/* 넓은 화면 전용 메뉴(본인부담금 관리 · 급여관리 · 종사자/기관 연간관리 · 회계관리 — left_sidebar.php)는 이 폭에서 뺀다 */
	.rn-sidebar .rn-nav-sub__item--wide-only,
	.rn-sidebar .rn-nav-item--wide-only {
		display: none;
	}

	.rn-sidebar {
		width: 100%;
		max-width: none;
		border-right: none;
	}

	.rn-sidebar__brand {
		/* ✕ 버튼 폭 + 그 오른쪽 여백(화면 바깥 여백 18px) + 8px — 위 .rn-menu-toggle */
		padding-right: calc(var(--rn-btn-min-height) + var(--rn-page-gutter) + var(--rn-space-2));
		padding-left: calc(var(--rn-btn-min-height) + var(--rn-page-gutter) + var(--rn-space-2));
	}
}

.rn-sidebar__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-2);
	flex: 0 0 var(--rn-sidebar-brand-height);
	height: var(--rn-sidebar-brand-height);
	padding: 0 var(--rn-space-4);
	font-size: var(--rn-sidebar-brand-font-size);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-sidebar-brand);
	text-decoration: none;
	letter-spacing: var(--rn-letter-spacing-tight);
	overflow: hidden;
	white-space: nowrap;
}

.rn-sidebar__brand-icon {
	display: inline-flex;
	flex: 0 0 var(--rn-nav-icon-size);
	width: var(--rn-nav-icon-size);
	height: var(--rn-nav-icon-size);
}

.rn-sidebar__brand-icon svg {
	width: 100%;
	height: 100%;
}

.rn-sidebar__brand-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- 메뉴 색 [밝게 보기] · [어둡게 보기] (2026-11-12 사용자 지시 — 머리 띠 아이콘만) ----------
 * 펼친 사이드바: 머리 띠 오른쪽 끝, 종전 [접기] 자리(같은 날 왼쪽 끝 → '접기 버튼을 빼고 그 자리에'). 접기는 '케어매니저' 글자 누르기(sidebar.js).
 * 폰 서랍(≤767): 오른쪽 위는 ✕(.rn-menu-toggle) 자리라 왼쪽 위, ✕ 와 대칭.
 * 아이콘은 지금 색의 반대쪽(어두우면 해, 밝으면 달) — html.rn-sidebar-light 로 고르므로 첫 그림부터 맞다. 색 토큰은 variables.css.
 * 접힌 사이드바(76px) 머리 띠에는 [펼치기] 하나만 들어가 감춘다 — 펼쳐서 바꾼다 */
.rn-theme-toggle {
	position: absolute;
	top: calc((var(--rn-sidebar-brand-height) - var(--rn-btn-min-height)) / 2);
	right: var(--rn-space-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rn-btn-min-height);
	height: var(--rn-btn-min-height);
	padding: 0;
	border: 0;
	border-radius: var(--rn-radius-lg);
	background: transparent;
	color: var(--rn-sidebar-text-muted);
	cursor: pointer;
	transition: background var(--rn-transition-fast), color var(--rn-transition-fast);
}

.rn-theme-toggle:hover,
.rn-theme-toggle:focus-visible {
	background: var(--rn-sidebar-hover);
	color: var(--rn-sidebar-text);
}

.rn-theme-toggle svg {
	width: var(--rn-nav-icon-size);
	height: var(--rn-nav-icon-size);
}

:root:not(.rn-sidebar-light) .rn-theme-toggle__moon,
.rn-sidebar-light .rn-theme-toggle__sun {
	display: none;
}

@media (max-width: 767px) {
	.rn-theme-toggle {
		top: var(--rn-page-gutter);
		right: auto;
		left: var(--rn-page-gutter);
	}
}

@media (min-width: 768px) {
	.rn-sidebar-collapsed .rn-theme-toggle {
		display: none;
	}
}

/* ---------- 사이드바 [접기] · 접힌 사이드바 (2026-11-02 사용자 지시 '접었을 때 아이콘만' → '아이콘 밑에 글씨') ----------
 * [접기]는 머리 띠 오른쪽 끝, 접히면 띠 가운데로 옮겨 [펼치기]가 된다. 폰 서랍(≤767)에는 ✕ 가 있어 감춘다.
 * 접힌 상태(html.rn-sidebar-collapsed)의 폭 · 화살표 · 하위 메뉴 감춤은 variables.css 토큰이 맡고,
 * 여기서는 메뉴를 아이콘 위 · 글씨 아래로 세우는 배치와 토큰으로 안 되는 자리를 고친다 */
.rn-sidebar-collapse {
	display: none;
}

/* 접혔을 때만 쓰는 짧은 이름(AI 관제센터 → 관제센터 등, left_sidebar.php) — 펼친 사이드바 · 폰 서랍에서는 긴 이름 */
.rn-nav-item__short {
	display: none;
}

/* 펼침 메뉴 머리 줄 — 묶음 이름(접힌 사이드바에서 하위 메뉴만 따로 떠도 어느 묶음인지 보이게). 항목은 sidebar.js 가 모든 폭에서 넣는다.
   기본은 감추고, 접힌 사이드바의 펼침 메뉴(아래 @media 안 .is-flyout)에서만 보인다.
   종전 감추는 규칙이 @media(≥768) 안에 있어 폰 메뉴(☰)에서 '업무관리'가 하위 메뉴 위에 한 번 더 적혔다 (2026-11-04 사용자 지적) */
.rn-nav-sub__head {
	display: none;
}

@media (min-width: 768px) {
	.rn-sidebar-collapse {
		position: absolute;
		top: calc((var(--rn-sidebar-brand-height) - var(--rn-btn-min-height)) / 2);
		right: var(--rn-space-2);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--rn-btn-min-height);
		height: var(--rn-btn-min-height);
		padding: 0;
		border: 0;
		border-radius: var(--rn-radius-lg);
		background: transparent;
		color: var(--rn-sidebar-text-muted);
		cursor: pointer;
		transition: background var(--rn-transition-fast), color var(--rn-transition-fast);
	}

	.rn-sidebar-collapse:hover,
	.rn-sidebar-collapse:focus-visible {
		background: var(--rn-sidebar-hover);
		color: var(--rn-sidebar-text);
	}

	.rn-sidebar-collapse svg {
		width: var(--rn-nav-icon-size);
		height: var(--rn-nav-icon-size);
	}

	/* 아이콘은 aria-expanded 가 아니라 html 클래스로 고른다 — 머리 스크립트가 접어 둔 첫 그림에서 sidebar.js 가 돌기 전에도 맞게 */
	:root:not(.rn-sidebar-collapsed) .rn-sidebar-collapse__open,
	.rn-sidebar-collapsed .rn-sidebar-collapse__close {
		display: none;
	}

	.rn-sidebar-collapsed .rn-sidebar-collapse {
		right: auto;
		left: calc((var(--rn-sidebar-width) - var(--rn-btn-min-height)) / 2);
	}

	/* 펼친 사이드바에서는 [접기]를 빼고 그 자리를 메뉴 색 아이콘(.rn-theme-toggle)이 쓴다 (2026-11-12 사용자 지시).
	   접기는 '케어매니저' 글자를 누르면 되고(sidebar.js), 접힌 뒤에는 이 버튼이 띠 가운데 [펼치기]로 남는다 */
	:root:not(.rn-sidebar-collapsed) .rn-sidebar-collapse {
		display: none;
	}

	.rn-sidebar-collapsed .rn-sidebar__brand-text {
		display: none;
	}

	/* 메뉴 한 칸 — 아이콘 위, 이름은 그 아래 작은 글씨 한 줄(가운데) */
	.rn-sidebar-collapsed .rn-sidebar .rn-nav-item {
		position: relative;
		flex-direction: column;
		justify-content: center;
		gap: var(--rn-space-1);
		min-height: var(--rn-nav-item-height-collapsed);
		padding: 0.375rem 0;
	}

	/* > — 펼침 메뉴 안 [연간관리] 머리(.rn-nav-sub__toggle)의 이름은 하위 메뉴 글씨 그대로 둔다 */
	.rn-sidebar-collapsed .rn-sidebar .rn-nav-item > .rn-nav-item__label {
		flex: 0 0 auto;
		max-width: 100%;
		overflow: hidden;
		font-size: var(--rn-text-caption);
		line-height: var(--rn-line-height-tight);
		text-align: center;
		white-space: nowrap;
	}

	.rn-sidebar-collapsed .rn-nav-item__full {
		display: none;
	}

	.rn-sidebar-collapsed .rn-nav-item__short {
		display: inline;
	}

	/* [AI 관제센터] 알림 점 — 글씨 줄 옆이 아니라 아이콘 오른쪽 위 모서리에 얹는다 */
	.rn-sidebar-collapsed .rn-nav-item__count {
		position: absolute;
		top: 0.375rem;
		right: calc(50% - var(--rn-nav-icon-size) / 2 - var(--rn-space-1));
	}

	/* 하위 메뉴가 감춰지므로 지금 화면이 든 묶음(자료실 · 업무관리)의 아이콘에 선택 표시를 옮긴다(맨 위 묶음만 — 안쪽 [연간관리]는 아니다) */
	.rn-sidebar-collapsed .rn-sidebar__nav > .rn-nav-group.is-active > .rn-nav-group__toggle,
	.rn-sidebar-collapsed .rn-sidebar__nav > .rn-nav-group.is-active > .rn-nav-group__toggle:hover {
		background: var(--rn-sidebar-active-bg);
		color: var(--rn-sidebar-active-text);
	}

	/* 이름 글자도 선택 색으로 — 아래 Nav 절 '.rn-nav-group.is-active … .rn-nav-item__label'(메뉴 글자색)이 이겨
	   밝은 사이드바에서 남색 칸 위 진회색 글자로 안 보였다 (2026-11-12, 어두운 사이드바는 둘 다 흰색이라 드러나지 않았다) */
	.rn-sidebar-collapsed .rn-sidebar__nav > .rn-nav-group.is-active > .rn-nav-group__toggle .rn-nav-item__label {
		color: var(--rn-sidebar-active-text);
	}

	/* 묶음 아이콘(자료실 · 업무관리)은 눌러도 펼쳐지지 않고, 마우스를 올리면 하위 메뉴가 아이콘 오른쪽에 뜬다(2026-11-02 사용자 지시).
	   메뉴 영역이 세로 스크롤(overflow)이라 absolute 면 잘린다 → [AI케봇] 소개 말풍선처럼 fixed 로 띄우고 top 은 sidebar.js 가 넣는다.
	   사이드바 기준(will-change)이지만 사이드바가 화면 왼쪽 위에 붙어 있어 화면 좌표와 같다. 여는 클래스 is-flyout 도 sidebar.js */
	.rn-sidebar-collapsed .rn-sidebar__nav > .rn-nav-group.is-flyout > .rn-nav-sub {
		display: block;
		position: fixed;
		left: calc(var(--rn-sidebar-width) + var(--rn-space-1));
		z-index: calc(var(--rn-z-sidebar) + 10);
		min-width: 12.5rem; /* 12 → 12.5rem — [AI] 연간관리 (구 문서작성)이 한 줄에 들게(2026-11-12) */
		margin: 0;
		padding: var(--rn-space-2);
		border: 1px solid var(--rn-sidebar-divider);
		border-radius: var(--rn-radius-lg);
		background: var(--rn-sidebar-bg);
		box-shadow: var(--rn-shadow-lg);
	}

	/* 아이콘 → 펼침 메뉴로 마우스를 옮기는 사이(메뉴 영역 오른쪽 여백 + 4px)에서 hover 가 끊기지 않게 왼쪽으로 투명한 다리를 놓는다 */
	.rn-sidebar-collapsed .rn-sidebar__nav > .rn-nav-group.is-flyout > .rn-nav-sub::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 100%;
		width: calc(var(--rn-space-3) + var(--rn-space-2));
	}

	/* 머리 줄(.rn-nav-sub__head)을 보이는 규칙만 여기 — 감추는 기본 규칙은 이 @media 밖(파일 위)에 있다 */

	.rn-sidebar-collapsed .is-flyout > .rn-nav-sub > .rn-nav-sub__head {
		display: block;
		padding: var(--rn-space-1) var(--rn-space-3) var(--rn-space-2);
		color: var(--rn-sidebar-text);
		font-size: var(--rn-sidebar-sub-font-size);
		font-weight: var(--rn-font-weight-semibold);
		line-height: var(--rn-line-height-tight);
	}

	/* 펼침 메뉴 안은 들여쓰기 없이, 안쪽 [연간관리] 묶음은 화살표 · 접고 펴기가 펼친 사이드바와 같게 */
	.rn-sidebar-collapsed .is-flyout .rn-nav-sub__link {
		padding-left: var(--rn-space-3);
	}

	.rn-sidebar-collapsed .is-flyout .rn-nav-sub--nested .rn-nav-sub__link {
		padding-left: calc(var(--rn-space-3) * 2);
	}

	.rn-sidebar-collapsed .is-flyout .rn-nav-sub .rn-nav-group__chevron {
		display: inline-flex;
	}

	/* 펼침 메뉴는 왼쪽 여백(12px)이 좁아 [AI] 배지를 여백에 띄우지 않고 이름 앞에 그대로 둔다 */
	.rn-sidebar-collapsed .is-flyout .rn-nav-sub__toggle .rn-nav-ai-badge {
		position: static;
		margin-right: var(--rn-space-1);
		transform: none;
	}

	.rn-sidebar-collapsed .is-flyout .rn-nav-sub .rn-nav-group.is-open > .rn-nav-sub {
		display: block;
	}

	/* [AI케봇] — 다른 메뉴처럼 케봇 아이콘 위 · 'AI케봇' 아래, 메뉴 칸 폭(52px) 버튼으로 */
	.rn-sidebar-collapsed .rn-sidebar .rn-nav-item--ai {
		gap: 0;
		margin: 0;
		width: 100%;
	}

	/* 튜토리얼 · 사용법 · 관련법규 · 롱텀포털 — 아이콘 없는 글자 버튼이라 접으면 뺀다(펼쳐서 쓴다) */
	.rn-sidebar-collapsed .rn-sidebar-quick,
	.rn-sidebar-collapsed .rn-sidebar__tools .rn-law-btn {
		display: none;
	}
}

.rn-sidebar__nav {
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: auto;
	padding: var(--rn-space-1) var(--rn-space-3) var(--rn-space-4);
	-webkit-overflow-scrolling: touch;
}

.rn-sidebar__footer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-1);
	padding: var(--rn-space-2) var(--rn-space-3) var(--rn-space-4);
	border-top: 1px solid var(--rn-sidebar-divider);
}

/* AI케봇 · 튜토리얼 ~ 롱텀포털 — 메뉴(스크롤)와 [내 정보] 사이 하단 고정 (2026-10-29) */
.rn-sidebar__tools {
	flex: 0 0 auto;
	padding: var(--rn-space-2) var(--rn-space-3);
	border-top: 1px solid var(--rn-sidebar-divider);
}

.rn-sidebar__tools > :first-child {
	margin-top: 0;
}

.rn-sidebar__divider {
	height: 1px;
	margin: var(--rn-space-2) var(--rn-space-1);
	background: var(--rn-sidebar-divider);
}

/* ---------- Nav ---------- */
.rn-nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-nav-item {
	display: flex;
	align-items: center;
	justify-content: var(--rn-sidebar-nav-justify);
	gap: var(--rn-nav-gap);
	width: 100%;
	min-height: var(--rn-nav-item-height);
	padding: 0 var(--rn-sidebar-item-padding-x);
	border: 0;
	border-radius: var(--rn-radius-lg);
	background: transparent;
	color: var(--rn-sidebar-text);
	font: inherit;
	font-size: var(--rn-font-size-sm); /* 17 → 15 (2026-10-06 메뉴 비율 조정 요청) */
	font-weight: var(--rn-font-weight-medium);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.rn-nav-item:hover {
	background: var(--rn-sidebar-hover);
}

.rn-nav-item.is-active {
	background: var(--rn-sidebar-active-bg);
	color: var(--rn-sidebar-active-text);
}

.rn-nav-item.is-active .rn-nav-item__label {
	color: var(--rn-sidebar-active-text);
}

.rn-nav-item--logout {
	color: var(--rn-sidebar-text-muted);
}

.rn-nav-item--logout:hover {
	background: var(--rn-sidebar-logout-hover-bg);
	color: var(--rn-sidebar-logout-hover-text);
}

.rn-nav-item--ai {
	position: relative;
	overflow: visible;
	margin: var(--rn-space-2) var(--rn-space-2) 0;
	width: auto;
	min-height: var(--rn-nav-item-height);
	height: auto;
	padding: 0 var(--rn-space-3);
	border-radius: var(--rn-btn-radius);
	background: var(--rn-sidebar-ai-bg);
	color: var(--rn-sidebar-ai-text);
	font-weight: var(--rn-font-weight-semibold);
	font-size: var(--rn-font-size-sm);
	letter-spacing: var(--rn-letter-spacing-none);
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-2);
}

.rn-nav-item--ai:hover {
	background: var(--rn-sidebar-ai-bg-hover);
	color: var(--rn-sidebar-ai-text);
	opacity: 1;
}

.rn-nav-item--ai .rn-nav-item__label {
	flex: 0 1 auto;
	display: block;
	line-height: var(--rn-line-height-base);
	white-space: nowrap;
}

.rn-nav-item--ai .kebot-btn-inner {
	overflow: hidden;
	position: absolute;
	inset: 0;
	border-radius: var(--rn-btn-radius);
	pointer-events: none;
}

.rn-nav-item--ai .kebot-btn-inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--rn-sidebar-ai-shine), transparent);
	animation: rnKebotShine 4s linear infinite;
}

@keyframes rnKebotShine {
	0% { left: -100%; }
	50% { left: 100%; }
	51% { left: 100%; }
	100% { left: -100%; }
}

/* 케봇 아이콘 — 뒤의 연한 원(--rn-sidebar-ai-avatar-bg)을 빼고 아이콘을 16 → 20px 로 (2026-10-07 요청).
   20px 는 left_sidebar.php SVG 의 원래 크기(width/height 20)다. 자리(24px)는 그대로라 버튼 높이·글자 위치는 안 바뀐다 */
.rn-nav-item--ai .kebot-avatar {
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.rn-nav-item--ai .kebot-avatar svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* 말풍선 — 메뉴 영역(.rn-sidebar__nav)이 세로 스크롤(overflow)이라 absolute 면 오른쪽이 잘린다.
 * fixed 로 띄우고 left/top 은 sidebar.js 가 마우스를 올릴 때 버튼 위치로 넣는다
 * (사이드바에 transform 이 있어 fixed 의 기준은 사이드바 — 사이드바가 화면 왼쪽 위에 붙어 있어 화면 좌표와 같다) */
.rn-nav-item--ai .kebot-tooltip {
	display: none;
	position: fixed;
	left: calc(var(--rn-sidebar-width) + 12px);
	top: 50%;
	transform: translateY(-50%);
	width: 13.4375rem;
	background: var(--rn-sidebar-ai-tooltip-bg);
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: var(--rn-sidebar-ai-shadow);
	z-index: calc(var(--rn-z-sidebar) + 10);
	animation: rnKebotTipIn 0.2s ease;
	box-sizing: border-box;
}

.rn-nav-item--ai .kebot-tooltip::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	border: 8px solid transparent;
	border-right-color: var(--rn-sidebar-ai-tooltip-bg);
	border-left: none;
}

.rn-nav-item--ai .kebot-tooltip__title {
	display: block;
	font-size: var(--rn-text-caption);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-sidebar-ai-text);
	margin: 0 0 4px;
	line-height: var(--rn-line-height-base);
	white-space: nowrap;
	text-align: left;
	letter-spacing: var(--rn-letter-spacing-none);
}

.rn-nav-item--ai .kebot-tooltip__title strong {
	background: var(--rn-sidebar-ai-highlight);
	border-radius: 4px;
	padding: 1px 5px;
}

.rn-nav-item--ai .kebot-tooltip__desc {
	display: block;
	font-size: var(--rn-text-caption-s);
	color: var(--rn-sidebar-ai-muted);
	margin: 2px 0 0;
	line-height: var(--rn-line-height-base);
	white-space: nowrap;
	text-align: left;
	font-weight: var(--rn-font-weight-regular);
	letter-spacing: var(--rn-letter-spacing-none);
}

/* 마우스가 있는 고정 사이드바(768px 이상)에서만. 폰 서랍(≤767)은 누르면 hover 가 남아 말풍선이 패널 앞에 떴다 — 띄우지 않는다(2026-10-20 사용자 지시) */
@media (hover: hover) and (min-width: 768px) {
	.rn-nav-item--ai:hover .kebot-tooltip {
		display: block;
	}
}

@keyframes rnKebotTipIn {
	from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
	to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.rn-nav-item__icon {
	display: inline-flex;
	flex: 0 0 var(--rn-nav-icon-size);
	width: var(--rn-nav-icon-size);
	height: var(--rn-nav-icon-size);
	color: inherit;
}

.rn-nav-item__icon svg {
	width: 100%;
	height: 100%;
}

.rn-nav-item__label {
	flex: 1 1 auto;
	display: var(--rn-sidebar-label-display);
	line-height: var(--rn-line-height-tight);
}

/* [AI 관제센터] 옆 연간관리 알림 점 (2026-10-21 숫자 배지 → 2026-10-23 점 — 사용자 지시 '15가 세 곳에 다 배지라 과하다').
   파랑 = 지금 챙길 기록만, 빨강 = 끝난 기간 · 기한 지남이 하나라도 있음. 몇 건인지는 [연간관리] 탭 배지 · 말풍선이 말한다.
   채우기: control_center_issues.js — 수는 글자로 그대로 넣되(화면 낭독기가 읽는다) 글자 크기 0 으로 감춰 점만 보인다.
   자리는 종전 배지 자리 그대로(메뉴 줄 오른쪽 끝 · 세로 가운데) */
.rn-nav-item__count {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--rn-color-info);
	font-size: 0;
}

/* [연간관리] 옆 [AI] 배지 — AI가 기록 초안을 써 준다는 표시 (2026-11-11 사용자 지시).
   색은 [AI케봇] 말풍선과 같은 보라(AI 기능 공통 색)라 '이것도 AI' 로 이어 읽힌다. 이름 바로 뒤에 붙는다(.rn-nav-item__label 안) */
/* [연간관리] 이름 앞 들여쓰기 여백 안에 띄운다 — 이름 칸 폭을 차지하지 않아 '(구 문서작성)'까지 한 줄에 든다
   (2026-11-12 사용자 지시. 종전 11-11~11-12: 이름 오른쪽 인라인). 오른쪽 끝을 이름 시작점에서 4px 떨어뜨린다 */
.rn-nav-sub__toggle {
	position: relative;
}

.rn-nav-sub__toggle .rn-nav-ai-badge {
	position: absolute;
	top: 50%;
	right: calc(100% - var(--rn-nav-indent) + var(--rn-space-1));
	transform: translateY(-50%);
}

.rn-nav-ai-badge {
	display: inline-block;
	padding: 0.125rem 0.3125rem;
	border-radius: 999px;
	background: var(--rn-sidebar-ai-tooltip-bg);
	color: var(--rn-sidebar-ai-text);
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-bold);
	line-height: 1;
	letter-spacing: 0.02em;
	vertical-align: 1px;
}

.rn-nav-item__count.is-danger {
	background: var(--rn-color-danger);
}

.rn-nav-item__count[hidden] {
	display: none;
}

.rn-nav-group__toggle {
	position: relative;
}

.rn-nav-group__chevron {
	display: var(--rn-sidebar-chevron-display);
	flex: 0 0 var(--rn-nav-chevron-size);
	width: var(--rn-nav-chevron-size);
	height: var(--rn-nav-chevron-size);
	margin-left: auto;
	color: var(--rn-sidebar-text-muted);
	transition: transform var(--rn-transition-fast);
	transform: rotate(0deg);
}

.rn-nav-group.is-open > .rn-nav-group__toggle .rn-nav-group__chevron {
	transform: rotate(180deg);
}

.rn-nav-group__chevron svg {
	width: 100%;
	height: 100%;
}

/* 그룹 활성: 토글은 펼침 표시만, 파란 pill은 서브 링크에만 */
.rn-nav-group.is-active > .rn-nav-group__toggle {
	background: transparent;
	color: var(--rn-sidebar-text);
}

.rn-nav-group.is-active > .rn-nav-group__toggle:hover {
	background: var(--rn-sidebar-hover);
}

.rn-nav-group.is-active > .rn-nav-group__toggle .rn-nav-item__label {
	color: var(--rn-sidebar-text);
}

.rn-nav-sub {
	display: none;
	margin: var(--rn-space-1) 0 var(--rn-space-2);
	/* 들여쓰기는 링크 안쪽 여백으로 옮겼다 — 호버·선택 배경이 상위 메뉴와 같은 폭으로 깔리게 (2026-10-06) */
	padding: 0;
	list-style: none;
}

.rn-nav-group.is-open > .rn-nav-sub {
	display: var(--rn-sidebar-sub-display);
}

.rn-nav-sub__link {
	display: block;
	/* 위아래 9 → 6px (2026-10-06 간격 좁힘 요청) · 왼쪽 들여쓰기 + 8 → 들여쓰기만(넓은 화면 48 → 40px, 2026-10-29 사용자 지시 '왼쪽 패딩 조금 줄여') */
	padding: 0.375rem var(--rn-space-2) 0.375rem var(--rn-nav-indent);
	border-radius: var(--rn-radius-md);
	color: var(--rn-sidebar-sub-text); /* 남색(muted)은 잘 안 보이고 흰색은 강해서 그 사이 #CDD7E4 — 호버·선택은 흰색 */
	font-size: var(--rn-sidebar-sub-font-size); /* 14px */
	font-weight: var(--rn-font-weight-regular);
	line-height: var(--rn-line-height-tight);
	text-decoration: none;
}

.rn-nav-sub__link:hover {
	color: var(--rn-sidebar-text);
	background: var(--rn-sidebar-hover);
}

.rn-nav-sub__link.is-active {
	background: var(--rn-sidebar-active-bg);
	color: var(--rn-sidebar-active-text);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-nav-sub__link.is-active:hover {
	background: var(--rn-sidebar-active-bg);
	color: var(--rn-sidebar-active-text);
}

/* 하위 메뉴 안의 접는 묶음 — 업무관리 › [연간관리] (2026-11-02 사용자 지시).
   머리는 다른 하위 메뉴와 같은 글자 · 들여쓰기의 버튼이고 오른쪽 끝에 펼침 화살표, 그 아래 메뉴는 한 단계 더 들인다 */
.rn-nav-sub__toggle {
	display: flex;
	align-items: center;
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.rn-nav-sub--nested {
	margin: 0;
}

/* [연간관리] 이름 뒤 '(구 문서작성)' — 예전 메뉴 이름 안내라 한 단계 작은 글씨, 색은 이름과 같게 (2026-11-12).
   [AI] 배지를 왼쪽 여백으로 뺀 덕에 이름 옆 한 줄에 둔다 */
.rn-nav-sub__note {
	margin-left: var(--rn-space-1);
	color: inherit; /* 연간관리 이름과 같은 색 — 호버 · 선택 때도 함께 바뀐다(2026-11-12 사용자 지시. 종전: --rn-sidebar-text-muted) */
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-regular);
	white-space: nowrap;
}

.rn-nav-sub__toggle .rn-nav-item__label {
	white-space: nowrap;
}

/* 사이드바 200px 구간(768~1023)은 이름 칸이 105px로 한 줄(약 116px)에 11px 모자란다 →
   화살표 오른쪽 여백(8px)을 없애고 안내 글씨 간격 · 자간을 조금 줄인다 */
@media (min-width: 768px) and (max-width: 1023px) {
	.rn-nav-sub__toggle {
		padding-right: 0;
	}

	.rn-nav-sub__note {
		margin-left: 0.125rem;
		letter-spacing: -0.02em;
	}
}

.rn-nav-sub--nested .rn-nav-sub__link {
	padding-left: calc(var(--rn-nav-indent) + var(--rn-space-3));
}

.rn-law-btn {
	display: var(--rn-sidebar-law-display);
	align-items: center;
	justify-content: center;
	margin: var(--rn-space-4) var(--rn-space-2) 0; /* AI케봇과 너무 붙어 보여 위 8 → 16px (2026-10-06) */
	padding: var(--rn-space-1) var(--rn-space-2); /* 6·12 → 4·8px (2026-10-06) */
	border: 1px solid var(--rn-sidebar-law-border);
	border-radius: var(--rn-btn-radius-sm);
	background: transparent;
	color: var(--rn-sidebar-law-text);
	font: inherit;
	font-size: var(--rn-text-caption); /* 13 → 12 */
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

/* [튜토리얼] · [사용법] 한 줄 — 둘이 폭을 반씩. 튜토리얼이 없는 화면은 사용법 혼자 꽉 찬다.
   그 아래 줄 [관련법규] · [롱텀포털]도 같은 방식 (2026-11-02) */
.rn-sidebar-quick {
	display: flex;
	gap: var(--rn-space-2);
	margin: var(--rn-space-4) var(--rn-space-2) 0; /* 종전 관련법규 버튼의 바깥 여백 그대로 */
}

.rn-sidebar-quick .rn-law-btn {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.rn-sidebar-quick .rn-law-btn[hidden] {
	display: none;
}

.rn-sidebar-quick + .rn-sidebar-quick {
	margin-top: var(--rn-space-2);
}

/* 폰 폭(☰ 서랍, ≤767px)은 [튜토리얼]을 화면 맨 위 줄 ☰ 왼쪽에 둔다(tour.css .rn-tour-top-btn) — 서랍에서는 빼고 [사용법]이 혼자 꽉 찬다.
   상세 화면은 ☰ 자리가 ✕ 라 서랍을 열 수 없어 서랍 안 버튼으로는 다시 볼 수 없었다 (2026-10-19 사용자 지시) */
@media (max-width: 767px) {
	.rn-sidebar-quick .rn-tour-launch {
		display: none;
	}

	/* [사용법] · [관련법규] · [롱텀포털]도 폰 서랍에서는 뺀다 — 큰 새 창으로 여는 PC용 참고 화면 · 롱텀 사이트라 폰에서는 쓸 일이 없다
	   (2026-10-29 사용자 지시 '모바일에서는 안 보여도 될 거 같아'). 두 줄 모두 .rn-sidebar-quick 이라 줄째로 감춘다 */
	.rn-sidebar .rn-sidebar-quick {
		display: none;
	}
}

.rn-law-btn:hover {
	border-color: var(--rn-sidebar-law-hover-border);
	color: var(--rn-sidebar-law-hover-text);
}

.rn-law-btn.is-active {
	border-color: var(--rn-sidebar-active-bg);
	background: var(--rn-sidebar-active-bg);
	color: var(--rn-sidebar-active-text);
	font-weight: var(--rn-font-weight-semibold);
}

/* 고정 사이드바(태블릿+)에서는 AI케봇 42 → 36px, 관련법규 28 → 24px 로 작게 (2026-10-06).
   모바일 드로어는 손가락으로 누르므로 기본 크기 그대로 둔다 */
@media (min-width: 768px) {
	.rn-nav-item--ai {
		min-height: var(--rn-btn-min-height);
	}

	.rn-law-btn {
		min-height: var(--rn-btn-min-height-sm);
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ---------- 메뉴 없는 화면(renewal_layout.php $renewal_bare — 새 창 [사용법] · [관련법규]) ----------
   ☰ · 사이드바를 그리지 않으므로 본문이 사이드바 폭만큼 비켜 앉지 않는다 */
.rn-body--bare {
	--rn-main-offset: 0px;
}

/* ---------- Main ---------- */
.rn-main {
	flex: 1 1 auto;
	margin-left: var(--rn-main-offset);
	min-width: 0;
	max-width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: clip;
	transition: margin-left var(--rn-transition-fast);
}

/* ---------- AI케봇 말풍선 (2026-10-21) ---------- (모든 화면에 뜨므로 control_center.css 에서 옮겨 왔다)
 * 연간관리 알림이 있으면 어느 화면이든 사이드바 [AI케봇] 버튼 옆에서 '연간관리 할 일이 N건 있어요!' 하고 말을 건다(control_center_issues.js kebotSay).
 * 바탕 · 모양은 [AI케봇] hover 소개 말풍선(.kebot-tooltip)과 같다 — 단색 보라 · 모서리 10px · 꼬리 같은 색 (2026-10-23 사용자 지시,
 * 종전 버튼과 같은 보라→파랑 그라데이션 · 12px). 버튼 오른쪽(position:fixed).
 * 2026-10-23 사용자 지시로 [AI케봇] 버튼 옆으로 되돌렸다(10-21 에는 [AI 관제센터] 메뉴 옆이었다) */
.rn-kebot-say {
	position: fixed;
	z-index: calc(var(--rn-z-sidebar) + 10);
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
	max-width: 17.5rem;
	padding: 10px 6px 10px 14px; /* 소개 말풍선 10px 14px — 오른쪽만 [×] 자리라 좁게 */
	border-radius: 10px;
	/* 바탕만 90% 불투명도 — 글자·알약·[×]는 그대로 선명하게 (2026-11-12 사용자 지시, 종전 같은 날 말풍선 전체 opacity 0.8).
	   꼬리(::before — 옆·위 두 모양)도 이 값을 써 바탕과 같은 색으로 비친다. 연간관리 알림 · AI 안내 말풍선 둘 다 */
	--rn-kebot-say-bg: color-mix(in srgb, var(--rn-sidebar-ai-tooltip-bg) 90%, transparent);
	background: var(--rn-kebot-say-bg);
	box-shadow: var(--rn-sidebar-ai-shadow);
	color: var(--rn-sidebar-ai-text);
	transform: translateY(-50%);
	animation: rnKebotSayIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both, rnKebotSayNudge 3s ease-in-out 1.2s infinite;
}

.rn-kebot-say[hidden] {
	display: none;
}

/* 말풍선이 떠 있는 동안 [AI케봇] hover 소개 말풍선은 띄우지 않는다 — 같은 자리라 겹친다 (body.rn-kebot-saying: kebotSay) */
.rn-kebot-saying .rn-nav-item--ai .kebot-tooltip {
	display: none;
}

.rn-kebot-say::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	border: 8px solid transparent;
	border-right-color: var(--rn-kebot-say-bg); /* 꼬리 — 바탕과 같은 색(90% 불투명, .rn-kebot-say) */
	border-left: none;
}

/* 알림 말풍선('연간관리 알림이 N건 있어요!')은 [AI케봇] 버튼 **위**에 띄운다(2026-11-12 사용자 지시 '말풍선은 위로 뜨게').
   left/top 은 사이드바 양옆 4px 안쪽 · 버튼 위 10px(control_center_issues.js placeSay) — 말풍선 아래 끝이 그 자리에 오게 위로 100% 올린다.
   꼬리는 아래 변에서 버튼 가운데(--rn-kebot-say-tail)를 가리킨다 */
.rn-kebot-say--above {
	/* 폭은 사이드바 폭 − 8px(placeSay 가 width 로 넣는다) — 사이드바 밖으로 넘어가지 않게(2026-11-12) */
	box-sizing: border-box;
	max-width: none;
	word-break: keep-all;
	transform: translateY(-100%);
	animation: rnKebotSayUpIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both, rnKebotSayUpNudge 3s ease-in-out 1.2s infinite;
}

.rn-kebot-say--above::before {
	left: var(--rn-kebot-say-tail, 1.5rem);
	top: auto;
	bottom: -8px;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: var(--rn-kebot-say-bg);
	border-bottom: none;
}

/* '연간관리 알림이 N건 있어요!'를 한 줄로(2026-11-12 사용자 지시) — 220px 사이드바(1024px 이상)의 말풍선(212px)에서
   [×]를 제목 줄 오른쪽 제자리에 두고 남는 글 폭 176px 에 맞춰 제목 15 → 13px · 'N건' 알약 13 → 12px · 알약 좌우 여백 7 → 5px(실측 약 169px).
   [×]는 글 흐름에서 빼 오른쪽 여백(26px) 안에 둔다 — 종전처럼 제목 첫 줄 높이 가운데.
   200px 사이드바(768~1023px)는 글 폭이 156px 라 한 줄에 못 담는다 — 그때는 낱말 단위로 두 줄 */
.rn-kebot-say.rn-kebot-say--above {
	padding: 10px 26px 10px 10px;
}

.rn-kebot-say--above .rn-kebot-say__title {
	font-size: var(--rn-text-detail-s);
}

.rn-kebot-say--above .rn-kebot-say__title strong {
	padding-right: 0.3125rem;
	padding-left: 0.3125rem;
	font-size: var(--rn-text-caption);
}

.rn-kebot-say--above .rn-kebot-say__close {
	position: absolute;
	top: 9px;
	right: 4px;
}

@media (min-width: 1024px) {
	.rn-kebot-say--above .rn-kebot-say__title {
		white-space: nowrap;
	}
}

@keyframes rnKebotSayUpIn {
	from { opacity: 0; transform: translateY(-100%) translateY(10px) scale(0.9); }
	to { opacity: 1; transform: translateY(-100%) translateY(0) scale(1); }
}

/* 말 거는 느낌 — 가끔 살짝 아래(버튼 쪽)로 다가간다 */
@keyframes rnKebotSayUpNudge {
	0%, 80%, 100% { transform: translateY(-100%) translateY(0); }
	88% { transform: translateY(-100%) translateY(4px); }
	94% { transform: translateY(-100%) translateY(0); }
}

/* 연간관리 AI 안내 말풍선(sidebar.js initYearRecordAiIntro) — AI케봇 알림 말풍선과 겹쳐 위로 비켜 올렸을 때
   꼬리를 가리키는 줄 높이에 그대로 둔다(--rn-ai-intro-tail 을 sidebar.js 가 넣는다, 없으면 가운데) */
.rn-ai-intro-say::before {
	top: var(--rn-ai-intro-tail, 50%);
}

/* 제목 '연간관리 문서를 AI가 작성을 도와드려요'(2026-11-11 문구 변경)가 알림 말풍선 폭(17.5rem)을 넘어 두 줄로 꺾였다 — 한 줄로 둔다 */
.rn-kebot-say.rn-ai-intro-say {
	max-width: none;
}

.rn-ai-intro-say .rn-kebot-say__title {
	white-space: nowrap;
}

.rn-kebot-say__open {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* 머리 줄 'AI케봇이 알려드려요'(.rn-kebot-say__from)과 그 앞 얼굴 아이콘은 뺐다 (2026-10-23 사용자 지시) — 제목 줄부터 */
.rn-kebot-say__title {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	line-height: var(--rn-line-height-base);
}

/* 'N건' — [AI 관제센터] 옆 알림 수 배지(.rn-nav-item__count)와 같은 둥근 알약 (2026-10-23 사용자 지시 — 종전 4px 네모).
   알약은 둘레 글자(15px)보다 작게 13px — 같은 크기면 바탕 때문에 글자보다 커 보였다(사용자 '너무 크다').
   시각 보정: 숫자 잉크가 글자 칸 안에서 0.5px 아래에 앉아 위 여백을 0.5px 줄이고 아래를 늘렸다(위아래 잉크 여백 2.5 : 2.6).
   알약 가운데는 실측으로 둘레 한글 잉크 가운데와 맞지만, 채운 바탕이 무거워 아래로 처져 보인다 — 1px 올린다 (2026-10-23 사용자 지시) */
.rn-kebot-say__title strong {
	display: inline-block;
	padding: 0.15625rem 0.4375rem 0.21875rem;
	border-radius: 999px;
	background: var(--rn-sidebar-ai-highlight);
	font-size: var(--rn-text-detail-s);
	font-weight: var(--rn-font-weight-bold);
	line-height: 1;
	vertical-align: 1px;
}

/* 말풍선 제목 — 연간관리 알림 '연간관리 알림이 있어요!'를 줄이고(15→14px) 한 줄로 둔다 (2026-11-12 사용자 지시).
   AI 안내 '연간관리 문서를 AI가 작성을 도와드려요'도 같은 14px 로 맞춘다 (같은 날 사용자 지시 'AI 안내도 연간관리 알림 폰트 크기로') */
.rn-kebot-say--alert .rn-kebot-say__title,
.rn-ai-intro-say .rn-kebot-say__title {
	font-size: var(--rn-font-size-xs);
	white-space: nowrap;
}

/* 200px 사이드바(768~1023px)의 버튼 위 말풍선은 글 폭이 약 156px 라 14px 제목 끝 '!'가 [×]에 붙는다(900px 실측) — 13px 로 */
@media (max-width: 1023px) {
	.rn-kebot-say--alert.rn-kebot-say--above .rn-kebot-say__title {
		font-size: var(--rn-text-detail-s);
	}
}

/* 'N건' — 제목에서 둘째 줄 '눌러서 확인해 보세요' 옆으로 옮겼다 (2026-11-12 사용자 지시). 모양은 위 제목 알약과 같고,
   둘레 글자(11px)보다 크지 않게 같은 11px — 알약 바탕 때문에 같은 크기여도 글자보다 커 보인다(10-23 '너무 크다') */
.rn-kebot-say__count {
	flex: 0 0 auto;
	padding: 0.125rem 0.375rem;
	border-radius: 999px;
	background: var(--rn-sidebar-ai-highlight);
	color: var(--rn-sidebar-ai-text);
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-bold);
	line-height: 1;
}

.rn-kebot-say.is-danger .rn-kebot-say__count {
	background: var(--rn-color-danger);
}

/* 둘째 줄 '→ 눌러서 확인해 보세요' — 앞에 오른쪽 화살표(글자색 그대로, 2026-10-23 사용자 지시) */
.rn-kebot-say__desc {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--rn-sidebar-ai-muted);
	font-size: var(--rn-text-caption-s);
	line-height: var(--rn-line-height-base);
}

.rn-kebot-say__desc::before {
	content: "";
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rn-kebot-say__open:hover .rn-kebot-say__desc,
.rn-kebot-say__open:focus-visible .rn-kebot-say__desc {
	color: var(--rn-sidebar-ai-text);
	text-decoration: underline;
}

/* 알림 말풍선은 밑줄을 문구(__label)에만 — 둘째 줄 전체에 그으면 flex 항목인 'N건' 알약 글자까지 번진다
   (번진 밑줄은 자식의 text-decoration:none 으로 못 끈다. 2026-11-12 hover 실측) */
.rn-kebot-say--alert .rn-kebot-say__open:hover .rn-kebot-say__desc,
.rn-kebot-say--alert .rn-kebot-say__open:focus-visible .rn-kebot-say__desc {
	text-decoration: none;
}

.rn-kebot-say--alert .rn-kebot-say__open:hover .rn-kebot-say__label,
.rn-kebot-say--alert .rn-kebot-say__open:focus-visible .rn-kebot-say__label {
	text-decoration: underline;
}

.rn-kebot-say__close {
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0; /* 첫 줄(제목 15px) 가운데와 맞는다 — 종전 −4px 은 머리 줄(13px)에 맞춘 값 (2026-10-23) */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--rn-sidebar-ai-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.rn-kebot-say__close:hover,
.rn-kebot-say__close:focus-visible {
	background: var(--rn-sidebar-ai-highlight);
	color: var(--rn-sidebar-ai-text);
}

@keyframes rnKebotSayIn {
	from { opacity: 0; transform: translateY(-50%) translateX(-10px) scale(0.9); }
	to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

/* 말 거는 느낌 — 가끔 살짝 왼쪽(버튼 쪽)으로 다가간다 */
@keyframes rnKebotSayNudge {
	0%, 80%, 100% { transform: translateY(-50%) translateX(0); }
	88% { transform: translateY(-50%) translateX(-4px); }
	94% { transform: translateY(-50%) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.rn-kebot-say {
		animation: none;
	}
}