/**
 * 리뉴얼 공통 셸 보강 (renewal_layout.php 가 화면 CSS 뒤에 싣는다)
 * - 사이드바 롱텀포털 버튼
 * - AI케봇 챗봇 패널(assets/css/chatbot.css)을 리뉴얼 화면에 얹을 때의 보정
 * 수치·색상은 var(--rn-*)만 쓴다.
 * (업무관리 하위 메뉴 [새창] 배지는 2026-10-21 사용자 지시로 제거)
 */

/* ---------- 사이드바: 하위 메뉴 항목 ---------- */
.rn-nav-sub__item {
	position: relative;
}

/* ---------- 사이드바: 하위 메뉴 [새창] (2026-10-21 [새탭], 2026-11-12 [새창]) ----------
 * sidebar.js 가 펼침 메뉴(자료실 · 업무관리)의 하위 메뉴마다 붙인다 — 누르면 그 화면을 화면 크기만 한 새 창으로 연다(팝업이 막히면 새 탭).
 * 클래스 이름 .rn-nav-sub__newtab 은 그대로 둔다.
 * 넓은 화면은 줄에 마우스를 올리거나 키보드로 닿았을 때만 보인다(메뉴 글자를 덮지 않게 오른쪽 끝, 그 자리만큼 글자 칸을 비운다).
 * 터치 화면(마우스 없음)은 늘 보인다. 메뉴 서랍이 화면을 꽉 채우는 720px 이하는 새 탭이 쓸모없어 감춘다.
 * 글자 배지인 이유: 외부 링크 아이콘은 뜻이 잘 전달되지 않았다(레거시 [새창] 배지와 같은 판단) */
.rn-nav-sub__item:has(.rn-nav-sub__newtab) > .rn-nav-sub__link {
	padding-right: calc(var(--rn-space-2) + 2.25rem);
}

.rn-nav-sub__newtab {
	position: absolute;
	top: 50%;
	right: var(--rn-space-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.25rem;
	padding: 0 var(--rn-space-1);
	/* 진한 남색 바탕 위라 관련법규 배지 색(옅은 테두리 35%)은 흐릿했다 — 흰 글자 · 70% 테두리로 또렷하게 (2026-10-21).
	   색은 토큰(variables.css --rn-sidebar-newtab-*) — 밝은 사이드바(html.rn-sidebar-light)는 회색 테두리 · 진회색 글자 (2026-11-12) */
	border: 1px solid var(--rn-sidebar-newtab-border);
	border-radius: var(--rn-radius-sm);
	background: var(--rn-sidebar-newtab-bg);
	color: var(--rn-sidebar-text);
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-semibold);
	line-height: var(--rn-line-height-none);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity var(--rn-transition-fast), border-color var(--rn-transition-fast), color var(--rn-transition-fast);
}

.rn-nav-sub__item:hover > .rn-nav-sub__newtab,
.rn-nav-sub__item:focus-within > .rn-nav-sub__newtab {
	opacity: 1;
}

.rn-nav-sub__newtab:hover,
.rn-nav-sub__newtab:focus-visible {
	border-color: var(--rn-sidebar-text);
	background: var(--rn-sidebar-text);
	color: var(--rn-sidebar-bg); /* 배지 자체에 올리면 흰 바탕 · 남색 글자로 뒤집어 '누를 수 있음'을 알린다 */
}

/* 선택한 줄(진한 남색 칸, sidebar.css .rn-nav-sub__link.is-active) 위 배지 — 메뉴 글자색을 따르면 밝은 사이드바에서
   진회색 글자가 남색 칸에 묻혀 안 보였다(2026-11-12 사용자 지적). 칸 글자색(흰색)에 맞추고, 올리면 흰 바탕 · 남색 글자로 뒤집는다 */
.rn-nav-sub__link.is-active ~ .rn-nav-sub__newtab {
	border-color: var(--rn-sidebar-newtab-active-border);
	background: var(--rn-sidebar-newtab-active-bg);
	color: var(--rn-sidebar-active-text);
}

.rn-nav-sub__link.is-active ~ .rn-nav-sub__newtab:hover,
.rn-nav-sub__link.is-active ~ .rn-nav-sub__newtab:focus-visible {
	border-color: var(--rn-sidebar-active-text);
	background: var(--rn-sidebar-active-text);
	color: var(--rn-sidebar-active-bg);
}

@media (hover: none) {
	.rn-nav-sub__newtab {
		opacity: 1;
	}
}

@media (max-width: 720px) {
	.rn-nav-sub__newtab {
		display: none;
	}

	.rn-nav-sub__item:has(.rn-nav-sub__newtab) > .rn-nav-sub__link {
		padding-right: var(--rn-space-2);
	}
}

/* 사이드바 [롱텀포털]은 [관련법규] 옆 칸 — sidebar.css .rn-sidebar-quick (2026-11-02) */

/* ---------- AI케봇 패널 보정 ---------- */
/* 리뉴얼 사이드바의 AI케봇 버튼도 .kebot-avatar 를 쓴다. chatbot.css 의 .kebot-avatar 규칙은
   .chat-welcome-avatar / .onboard-icon 아래로만 걸려 있어 사이드바에는 닿지 않는다(2026-10-15 확인).
   패널은 chatbot.css 가 자기 클래스로만 꾸민다 — 리뉴얼 쪽에서 덮을 것이 생기면 .chat-panel 아래로 좁혀 여기 둔다. */

/* ---------- 롱텀포털 [패스워드 확인] 팝업(#passwordCheckModal — assets/js/longtermLogin.js 가 인라인 스타일로 그린다) — 공통 팝업 모양 ----------
 * (2026-10-26 사용자 지시 '롱텀 포털 선택 시 패스워드 확인 모달 공통 스타일로 — 버튼 색상 · 인풋'). 스크립트는 레거시 화면과 같이 쓰므로 고치지 않고
 * 리뉴얼 화면에서만 덮는다 — 인라인 style 을 이기려고 !important.
 * 판 8px · 공통 그림자 · 딤 공통, 제목은 머리 띠(18px 굵게 · 아래 판 끝까지 선), 안내 글 14px #555 왼쪽, 입력칸 공통(36px · #C6C6C6 · 6px · 고르면 주황 테두리만),
 * 버튼 오른쪽 묶음 [취소] 회색 테두리 · [확인] 주황 채움(종전 연주황 #FF9036 · 회색 채움 #6C757D 가운데). 마크업 순서는 확인 → 취소라 order 로 취소를 앞에 */
body.rn-body #passwordCheckModal {
	background-color: var(--rn-color-overlay) !important;
}

body.rn-body #passwordCheckModal > div {
	box-sizing: border-box;
	width: min(26rem, calc(100vw - 2rem)) !important;
	min-width: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: var(--rn-radius-lg) !important;
	background-color: var(--rn-color-bg) !important;
	box-shadow: var(--rn-shadow-sm) !important;
	text-align: left !important;
}

body.rn-body #passwordCheckModal > div > h3 {
	margin: 0 !important;
	padding: var(--rn-modal-header-padding-y) var(--rn-modal-header-padding-start);
	border-bottom: 1px solid var(--rn-color-border);
	color: var(--rn-color-text) !important;
	font-family: var(--rn-font-family);
	font-size: var(--rn-modal-header-title-size);
	font-weight: var(--rn-modal-header-title-weight);
	line-height: var(--rn-line-height-tight);
}

body.rn-body #passwordCheckModal > div > p {
	margin: var(--rn-space-4) var(--rn-space-5) var(--rn-space-3) !important;
	color: var(--rn-color-text-muted) !important;
	font-size: var(--rn-font-size-xs);
	line-height: var(--rn-line-height-base);
	word-break: keep-all;
}

body.rn-body #passwordCheckModal #passwordCheckInput {
	display: block;
	width: calc(100% - 2 * var(--rn-space-5)) !important;
	height: var(--rn-control-min-height);
	margin: 0 var(--rn-space-5) !important;
	padding: 0 var(--rn-control-padding-x) !important;
	border: var(--rn-control-border) !important;
	border-radius: var(--rn-control-radius) !important;
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-control-font-size) !important;
	box-shadow: none;
}

body.rn-body #passwordCheckModal #passwordCheckInput::placeholder {
	color: var(--rn-color-text-subtle);
}

body.rn-body #passwordCheckModal #passwordCheckInput:focus {
	outline: none;
	border-color: var(--rn-color-brand) !important;
}

body.rn-body #passwordCheckModal > div > div:last-child {
	justify-content: flex-end !important;
	gap: var(--rn-space-2) !important;
	padding: var(--rn-space-4) var(--rn-space-5);
}

body.rn-body #passwordCheckModal :is(#passwordCheckConfirm, #passwordCheckCancel) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--rn-btn-min-height);
	padding: 0 var(--rn-btn-padding-x) !important;
	border-radius: var(--rn-btn-radius) !important;
	font-family: var(--rn-font-family);
	font-size: var(--rn-btn-font-size) !important;
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-none);
}

body.rn-body #passwordCheckModal #passwordCheckCancel {
	order: -1;
	min-width: 4rem;
	border: 1px solid var(--rn-btn-ghost-border) !important;
	background-color: var(--rn-color-bg) !important;
	color: var(--rn-color-text) !important;
}

body.rn-body #passwordCheckModal #passwordCheckCancel:hover {
	border-color: var(--rn-btn-ghost-hover-border) !important;
	background-color: var(--rn-color-bg-hover) !important;
}

body.rn-body #passwordCheckModal #passwordCheckConfirm {
	min-width: 6rem;
	border: 1px solid var(--rn-color-brand) !important;
	background-color: var(--rn-color-brand) !important;
	color: var(--rn-color-on-brand) !important;
	font-weight: var(--rn-font-weight-semibold);
}

body.rn-body #passwordCheckModal #passwordCheckConfirm:hover {
	border-color: var(--rn-color-brand-hover) !important;
	background-color: var(--rn-color-brand-hover) !important;
}