/**
 * 리뉴얼 자료실(가이드/질답모음)
 * - 좌측 분류 패널 + 본문 셸 (workdepartment 패턴)
 * - care_guide.js DOM id/class 계약 유지 (#first_category, #second_category_box, .middle_select_* 등)
 */

.rn-main:has(.rn-guide) {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	overflow: hidden;
}

/* 뷰포트 스크롤도 잠근다 — AI 관제센터(institution.css) · 상근직원(workdepartment.css)과 같은 잠금 (2026-10-16).
 * 화면 틀(.rn-main)은 100dvh 로 잘려 있어도 .rn-app 바깥(레이아웃 뒤에 붙는 모달 묶음)이나 폰 주소창 높이만큼 페이지가 남아,
 * 폰에서 밀면 페이지째 밀려 제목 줄은 올라가고 화면에 붙은 ☰ 만 따라 내려오는 것처럼 보였다('햄버거만 따라 내려온다', 사용자).
 * 768~1023 은 일부러 페이지째 스크롤하는 폭이라(아래 반응형 절) 잠그지 않는다 */
@media (max-width: 767px), (min-width: 1024px) {
	body.rn-body:has(.rn-guide) {
		overflow: hidden;
		height: 100%;
	}
}

.rn-guide {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	width: 100%;
	padding: var(--rn-page-gutter); /* 바깥 여백 — 모든 화면 공통 18px */
	gap: var(--rn-space-3);
	box-sizing: border-box;
}

.rn-guide__toolbar {
	display: none;
	align-items: center;
	gap: var(--rn-space-3);
}

/* 상세 [‹ 목록] — 폰 폭(≤720px) 상세에서만 보인다(아래 '목록 먼저' 절). 상근직원 [‹ 직원 목록](.rn-workdept__back)과 같은 모양 */
.rn-guide__back {
	display: none;
	align-items: center;
	gap: var(--rn-space-1);
	padding-left: var(--rn-space-2);
}

.rn-guide__back svg {
	width: 1.1rem;
	height: 1.1rem;
}

.rn-guide__page-title {
	margin: 0;
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-text);
}

/* 상세 맨 위 줄의 글 제목(post.php) — 폰 폭(≤720px)에서만 화면 이름 대신 보인다(아래 '목록 먼저' 절) */
.rn-guide__page-title-post {
	display: none;
}

.rn-guide__shell {
	display: flex;
	flex: 1;
	min-height: 0;
	width: 100%;
	gap: var(--rn-space-4);
}

/* ---------- 좌측 분류 패널 (상근직원 직원 목록 패널과 동일 톤) ----------
 * 폭 22rem(352px) — 자료 제목이 길어('업무수행일지(25.7.1 이후 서식)', '방문요양_급여비용_및_본인부담_기준(2025년)' 등)
 * 18rem 메뉴에서 두 줄로 꺾여서 자료실만 넓혔다 (2026-10-13). 행 모양은 문서작성 메뉴와 같고 폭만 다르다 */
.rn-guide__panel {
	flex: 0 0 22rem;
	width: 22rem;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	overflow: hidden;
	box-sizing: border-box;
}

/* 패널·목록용만 리셋 (에디터 본문 ul/ol 은 제외) */
.rn-guide__panel ul,
.rn-guide-mid ul,
.rn-guide-posts__list,
.rn-guide-qna__list,
.rn-guide-tags {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rn-guide__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-space-2);
	padding: var(--rn-space-4) var(--rn-space-4) var(--rn-space-3);
	border-bottom: 0;
}

.rn-guide__panel-title {
	margin: 0;
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
}

.rn-guide__panel-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: var(--rn-radius-sm);
	background: transparent;
	color: var(--rn-color-text-muted);
	cursor: pointer;
}

/* 패널 여백은 margin — padding 이면 absolute 돋보기가 입력 밖으로 나감 */
.rn-guide__panel .rn-search {
	width: auto;
	margin: 0 var(--rn-space-4) var(--rn-space-3);
	padding: 0;
}

/* 대분류 선택 — 라벨 왼쪽 · 선택칸 오른쪽 한 줄 (2026-10-13 종전: 라벨 아래 줄에 선택칸) */
.rn-guide-select {
	display: flex;
	align-items: center;
	gap: var(--rn-space-3);
	padding: 0 var(--rn-space-4) var(--rn-space-3);
}

.rn-guide-select__label {
	flex: none;
	margin: 0;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-text);
	white-space: nowrap;
}

.rn-guide-select__control,
.rn-guide-select .rn-select {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

/* ---------- 중분류 · 자료 목록 / 질답 분류 — 문서작성 왼쪽 메뉴(institution.css .rn-inst-subnav)와 같은 모양 (2026-10-13) ----------
 * 중분류 제목 = 섹션 제목(≡ 아이콘 + 굵은 15px), 자료 = 아래 선으로 나뉜 패널 폭 꽉 찬 한 줄 행(15px · 오른쪽 ›),
 * hover = 연회색, 선택 = 연주황 바탕 + 주황 글자 + 왼쪽 주황 막대 3px.
 * 마크업은 care_guide.js 가 그린다(.middle_select_wp > p.middle_title + ul.middle_select_list > li > a) — 클래스 계약 그대로.
 * 종전: 17px 중분류 제목 + 둥근 칸 회색 글자 목록, hover 도 주황 */
.rn-guide-mid {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 0 var(--rn-space-4);
}

/* 목록이 길어 스크롤돼도 행 폭은 패널 폭 − 테두리 그대로 — 스크롤바(10px)가 행 폭을 먹지 않게 숨긴다.
 * 휠·터치패드·키보드 스크롤은 그대로 된다 (2026-10-13 '왼쪽 메뉴 크기 문서작성과 똑같이 286') */
.rn-guide-mid,
.rn-guide-faqnav {
	scrollbar-width: none;
}

.rn-guide-mid::-webkit-scrollbar,
.rn-guide-faqnav::-webkit-scrollbar {
	display: none;
}

.rn-guide-mid .middle_select_wp {
	margin: 0;
}

.rn-guide-mid .middle_select_wp + .middle_select_wp {
	margin-top: var(--rn-space-3);
}

.rn-guide-mid .middle_title {
	display: flex;
	align-items: center;
	gap: var(--rn-space-2);
	margin: 0;
	padding: var(--rn-space-2) var(--rn-space-4);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
}

/* Font Awesome 'fa-stream' 자리에 문서작성 섹션 아이콘(≡ 세 줄)과 같은 그림 */
.rn-guide-mid .middle_title > i.fa-stream {
	flex: none;
	width: 0.9rem;
	height: 0.9rem;
	margin: 0;
	padding: 0;
	background-color: var(--rn-color-text-subtle);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='black' stroke-width='2' stroke-linecap='round'/%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'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	font-size: 0;
}

.rn-guide-mid .middle_title > i.fa-stream::before {
	content: none;
}

.rn-guide-mid .middle_select_list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--rn-color-border);
	border-radius: 0;
	cursor: pointer;
}

.rn-guide-mid .middle_select_list li {
	position: relative;
	margin: 0;
	padding: 0;
	border-radius: 0;
	transition: background var(--rn-transition-fast);
}

.rn-guide-mid .middle_select_list a,
.rn-guide-faqnav__item {
	display: flex;
	align-items: center;
	gap: var(--rn-space-2);
	box-sizing: border-box;
	width: 100%;
	min-height: 2.875rem;
	padding: var(--rn-space-3) var(--rn-space-4);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-regular);
	line-height: var(--rn-line-height-tight);
	color: var(--rn-color-text);
	text-decoration: none;
	word-break: keep-all;
}

/* 오른쪽 › — 문서작성 메뉴의 chevron 과 같은 크기·색 */
.rn-guide-mid .middle_select_list a::after,
.rn-guide-faqnav__item::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-left: auto;
	background-color: var(--rn-color-text-subtle);
	-webkit-mask: var(--rn-icon-chevron-right) center / contain no-repeat;
	mask: var(--rn-icon-chevron-right) center / contain no-repeat;
}

/* NEW · 무료 뱃지가 있으면 뱃지가 오른쪽으로 붙고 › 는 그 뒤 */
.rn-guide-mid .middle_select_list .rn-badge--new,
.rn-guide-mid .middle_select_list .rn-badge--preview {
	margin-left: auto;
	flex-shrink: 0;
}

.rn-guide-mid .middle_select_list a:has(.rn-badge)::after {
	margin-left: 0;
}

.rn-guide-mid .middle_select_list:hover li,
.rn-guide-faqnav__item:hover {
	background: var(--rn-color-bg-hover);
}

.rn-guide-mid .middle_select_list.active li,
.rn-guide-faqnav__item:is(.is-active, .active) {
	background: var(--rn-color-brand-soft);
}

.rn-guide-mid .middle_select_list.active a,
.rn-guide-faqnav__item:is(.is-active, .active) {
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-guide-mid .middle_select_list.active li::before,
.rn-guide-faqnav__item:is(.is-active, .active)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--rn-color-brand-bar);
}

.rn-guide-mid .middle_select_list.active a::after,
.rn-guide-faqnav__item:is(.is-active, .active)::after {
	background-color: var(--rn-color-brand);
}

.rn-guide-mid .middle_select_list.active .rn-badge--new {
	background: var(--rn-color-badge-new-bg);
	color: var(--rn-color-badge-new-text);
}

.rn-guide-mid .middle_select_list.active .rn-badge--preview {
	background: var(--rn-color-badge-preview-bg);
	color: var(--rn-color-badge-preview-text);
}

/* 질답 분류 — 위와 같은 행. 첫 행 위에도 선을 둬 패널 제목과 나눈다 */
.rn-guide-faqnav {
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--rn-space-4);
	border-top: 1px solid var(--rn-color-border);
	overflow-y: auto;
}

.rn-guide-faqnav__item {
	position: relative;
	flex: none;
	border-bottom: 1px solid var(--rn-color-border);
	transition: background var(--rn-transition-fast), color var(--rn-transition-fast);
}

.rn-guide__panel-backdrop {
	display: none;
}

/* ---------- 본문 (상근직원 본문 카드와 동일) ---------- */
.rn-guide__main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-3);
	overflow: auto;
	padding: var(--rn-space-4);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	box-sizing: border-box;
}

.rn-guide__notice {
	flex: 0 0 auto;
	padding: var(--rn-space-3) var(--rn-space-4);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	border: 0;
}

.rn-guide__notice--search {
	background: var(--rn-color-brand-soft);
}

.rn-guide__notice-text {
	margin: 0;
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text-muted);
	line-height: var(--rn-line-height-base);
}

.rn-guide__notice-text span {
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-guide-empty {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: var(--rn-space-6);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	text-align: center;
	box-sizing: border-box;
}

.rn-guide-empty img {
	max-width: min(36rem, 100%);
	height: auto;
}

.rn-guide-empty__hint {
	margin: 0;
	padding: var(--rn-space-5) 0;
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-font-size-sm);
	text-align: center;
}

/* 평가해석 첫 화면 안내(list.php .rn-guide-intro — 종전 안내도 그림을 글로 옮김, 2026-10-14).
   ① 연도 고르기 ② 지표 누르기 → 볼 수 있는 다섯 가지. 회색 빈 화면(.rn-guide-empty) 가운데 흰 카드 */
.rn-guide-intro {
	width: min(40rem, 100%);
	padding: var(--rn-space-5);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	text-align: left;
	box-sizing: border-box;
}

.rn-guide-intro__title {
	margin: 0 0 var(--rn-space-4);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-bold);
}

.rn-guide-intro__steps {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-guide-intro__step {
	display: flex;
	gap: var(--rn-space-3);
	min-width: 0;
}

.rn-guide-intro__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-bold);
}

.rn-guide-intro__step-body {
	flex: 1 1 auto;
	min-width: 0;
}

.rn-guide-intro__step-title {
	display: block;
	margin-bottom: var(--rn-space-1);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-guide-intro__step-text {
	margin: 0;
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
}

/* 튜토리얼 다시 보기는 사이드바 [튜토리얼](guide.js RnTour.register) — 2026-10-16 종전: 안내 카드·제목 줄의 [사용법] 버튼 */

/* 지표에서 볼 수 있는 것 — 넓으면 두 칸, 좁으면 한 칸 */
.rn-guide-intro__features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--rn-space-2);
	margin: var(--rn-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.rn-guide-intro__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--rn-space-2);
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	line-height: var(--rn-line-height-base);
}

.rn-guide-intro__feature svg {
	flex: 0 0 auto;
	margin-top: 0.05rem;
	color: var(--rn-color-brand);
}

.rn-guide-intro__feature strong {
	margin-right: 0.25rem;
	color: var(--rn-color-text);
	font-weight: var(--rn-font-weight-semibold);
}

@media (max-width: 720px) {
	/* 회색 빈 화면 여백(24px)과 카드 여백이 겹쳐 카드가 좁아진다 — 바깥을 줄인다 */
	.rn-guide-empty:has(> .rn-guide-intro) {
		padding: var(--rn-space-3);
	}

	.rn-guide-intro {
		padding: var(--rn-space-4);
	}

	.rn-guide-intro__features {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 첫 화면 안내 — 넓은 화면은 '좌측에서', 1023px 이하(패널이 서랍·검색창이 본문 위)는 '위에서 · [분류]에서' */
.rn-guide-empty__hint-narrow {
	display: none;
}

.rn-guide-list {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-5);
}

.rn-guide-section-title {
	margin: 0 0 var(--rn-space-3);
	padding-bottom: var(--rn-space-2);
	border-bottom: 1px solid var(--rn-color-border);
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
}

.rn-guide-gallery,
.rn-guide-posts {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.rn-guide-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--rn-space-3);
}

.rn-guide-gallery__item {
	min-width: 0;
}

.rn-guide-gallery__thumb {
	display: block;
	overflow: hidden;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-sm);
	background: var(--rn-color-bg-soft);
}

.rn-guide-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.rn-guide-gallery__title {
	margin: var(--rn-space-2) 0 0;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-brand);
	cursor: pointer;
	line-height: var(--rn-line-height-base);
}

.rn-guide-posts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-guide-posts__item {
	display: flex;
	gap: var(--rn-space-3);
	padding: var(--rn-space-3) 0;
}

.rn-guide-posts__item:not(:last-child) {
	border-bottom: 1px solid var(--rn-color-border);
}

.rn-guide-posts__thumb {
	flex: 0 0 5.5rem;
	width: 5.5rem;
	overflow: hidden;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-sm);
	background: var(--rn-color-bg-soft);
}

.rn-guide-posts__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.rn-guide-posts__body {
	flex: 1 1 auto;
	min-width: 0;
}

.rn-guide-posts__title {
	margin: 0 0 var(--rn-space-1);
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-brand);
	cursor: pointer;
	line-height: var(--rn-line-height-base);
}

.rn-guide-posts__cate {
	margin-left: var(--rn-space-2);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-subtle);
}

.rn-guide-posts__excerpt {
	margin: 0 0 var(--rn-space-1);
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text-muted);
	line-height: var(--rn-line-height-base);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rn-guide-posts__date {
	margin: 0 0 var(--rn-space-2);
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-subtle);
}

.rn-guide-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-guide-tag {
	display: inline-flex;
	padding: 0.15rem 0.45rem;
	border-radius: var(--rn-radius-sm);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	text-decoration: none;
}

/* hover 는 주황 대신 회색 (2026-10-13 공통 — 주황 hover 없음) */
.rn-guide-tag:hover {
	background: var(--rn-color-bg-muted);
	color: var(--rn-color-text);
}

/* ---------- 상세 ---------- */
.rn-guide-post {
	display: grid;
	grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
	gap: 0;
	margin-bottom: var(--rn-space-4);
	align-items: stretch;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: transparent;
	overflow: hidden;
	box-sizing: border-box;
}

.rn-guide-post__preview,
.rn-guide-post__body {
	min-width: 0;
	min-height: 0;
	padding: var(--rn-space-4);
	border-radius: 0;
	background: transparent;
	border: 0;
	box-sizing: border-box;
}

.rn-guide-post__preview {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
	height: 100%;
	border-right: 1px solid var(--rn-color-border);
}

.rn-guide-post__preview-label {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	color: var(--rn-color-text-muted);
}

.rn-guide-post__preview-main {
	flex: 0 0 auto;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 346 / 492;
	max-height: min(55dvh, 26rem);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md) var(--rn-radius-md) 0 0;
	background: transparent;
	cursor: pointer;
}

.rn-guide-post__preview-main:last-child {
	border-radius: var(--rn-radius-md);
}

.rn-guide-post__preview-main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

.rn-guide-post__preview-thumbs {
	flex: 0 0 auto;
	margin: 0;
	padding: var(--rn-space-2) 0 0;
	border: 0;
	border-top: 1px solid var(--rn-color-border);
	border-radius: 0;
	background: transparent;
}

/* 작은 샘플 60×84 (A4 비율) — 44×62 는 너무 작다 하여 키움 (2026-10-13).
 * 첫 장이 큰 샘플과 같은 왼쪽 선에서 시작하도록 화살표 자리(좌우 여백)를 두지 않고, 화살표는 줄 양끝 위에 흰 동그라미로 띄운다.
 * 넘길 게 없는 쪽 화살표(.swiper-button-disabled)는 숨긴다 — 처음엔 왼쪽 화살표가 첫 장을 가리지 않는다 */
.rn-guide-post__preview-thumbs .swiper {
	position: relative;
	padding: 0;
	box-sizing: border-box;
}

.rn-guide-post__preview-thumbs .swiper-slide {
	width: 3.75rem;
	height: 5.25rem;
	box-sizing: border-box;
	opacity: 0.55;
	overflow: hidden;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-sm);
	background: transparent;
	cursor: pointer;
	transition: opacity var(--rn-transition-fast), border-color var(--rn-transition-fast);
}

.rn-guide-post__preview-thumbs .swiper-slide:hover,
.rn-guide-post__preview-thumbs .swiper-slide.active {
	opacity: 1;
	border-color: var(--rn-color-brand);
}

.rn-guide-post__preview-thumbs .swiper-slide a {
	display: block;
	width: 100%;
	height: 100%;
}

.rn-guide-post__preview-thumbs .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
}

.rn-guide-post__preview-thumbs .swiper-button-next,
.rn-guide-post__preview-thumbs .swiper-button-prev {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 1px solid var(--rn-color-border);
	border-radius: 50%;
	background: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-sm);
	color: var(--rn-color-text-muted);
	box-sizing: border-box;
}

.rn-guide-post__preview-thumbs .swiper-button-prev {
	left: 0.25rem;
}

.rn-guide-post__preview-thumbs .swiper-button-next {
	right: 0.25rem;
}

.rn-guide-post__preview-thumbs .swiper-button-next::after,
.rn-guide-post__preview-thumbs .swiper-button-prev::after {
	font-size: var(--rn-text-caption-s);
	font-weight: var(--rn-font-weight-bold);
}

/* swiper-bundle.css(본문 안에서 나중에 로드)의 .swiper-button-prev.swiper-button-disabled { opacity:.35 } 를 이기도록 특이도를 올린다 */
.rn-guide-post__preview-thumbs .rn-guide-post__thumbs-nav :is(.swiper-button-prev, .swiper-button-next).swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/* 작은 샘플이 칸 밖으로 넘칠 때 잘린 끝을 썸네일 자체가 서서히 투명해지게 한다 — 덧칠한 흰 띠는 경계가 보여 끊겨 보였다
 * (2026-10-28 사용자 '배경색으로 자연스럽게 투명하게'). 뒤 바탕이 그대로 비친다.
 * mask 는 썸네일 줄(.swiper)에만 — 화살표는 .swiper 밖 형제(.rn-guide-post__thumbs-nav 안, post.php)라 흐려지지 않는다.
 * 페이드 64px: 끝 투명 → 24px 지점 60% → 64px 지점 불투명 (안쪽 시작이 딱 끊기지 않게).
 * 그쪽으로 더 넘길 장이 있을 때만(그쪽 화살표가 살아 있을 때) — 다 들어가면(swiper-button-lock · 양쪽 disabled) 없다.
 * 끝까지 넘기면 오른쪽이 빠지고, 앞으로 넘긴 뒤에는 왼쪽에도 생긴다. Swiper 가 붙기 전(.swiper-initialized 전)에는 넣지 않는다 */
.rn-guide-post__thumbs-nav {
	position: relative;
}

.rn-guide-post__preview-thumbs .swiper {
	--rn-gp-fade-l0: #000;
	--rn-gp-fade-l1: #000;
	--rn-gp-fade-r0: #000;
	--rn-gp-fade-r1: #000;
}

.rn-guide-post__preview-thumbs:has(.swiper-button-prev:not(.swiper-button-disabled, .swiper-button-lock)) .swiper.swiper-initialized {
	--rn-gp-fade-l0: transparent;
	--rn-gp-fade-l1: rgba(0, 0, 0, 0.6);
}

.rn-guide-post__preview-thumbs:has(.swiper-button-next:not(.swiper-button-disabled, .swiper-button-lock)) .swiper.swiper-initialized {
	--rn-gp-fade-r0: transparent;
	--rn-gp-fade-r1: rgba(0, 0, 0, 0.6);
}

.rn-guide-post__preview-thumbs:has(:is(.swiper-button-prev, .swiper-button-next):not(.swiper-button-disabled, .swiper-button-lock)) .swiper.swiper-initialized {
	-webkit-mask-image: linear-gradient(to right, var(--rn-gp-fade-l0) 0, var(--rn-gp-fade-l1) 24px, #000 64px, #000 calc(100% - 64px), var(--rn-gp-fade-r1) calc(100% - 24px), var(--rn-gp-fade-r0) 100%);
	mask-image: linear-gradient(to right, var(--rn-gp-fade-l0) 0, var(--rn-gp-fade-l1) 24px, #000 64px, #000 calc(100% - 64px), var(--rn-gp-fade-r1) calc(100% - 24px), var(--rn-gp-fade-r0) 100%);
}

.rn-guide-post__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--rn-space-2);
	margin-bottom: var(--rn-space-3);
	padding-bottom: var(--rn-space-3);
	border-bottom: 1px solid var(--rn-color-border);
}

.rn-guide-post__title {
	margin: 0;
	flex: 1 1 auto;
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
}

.rn-guide-post__version {
	margin-left: auto;
	font-size: var(--rn-font-size-xs);
	color: var(--rn-color-text-muted);
}

/* 제목 줄 오른쪽 [이전으로] · [관련문의] (2026-10-28 아래 버튼 줄에서 올림). 아래 버튼 줄의 [관련문의]는 폰 폭 전용(720px 이하 절) */
.rn-guide-post__head-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--rn-space-2);
}

.rn-guide-post__inquiry-m {
	display: none;
}

.rn-guide-post__body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/**
 * 에디터 HTML content island
 * - 페이지 타이포/리셋을 물려받지 않음
 * - 인라인 style 은 그대로 우선
 * - 인라인 없는 태그만 에디터에 가까운 baseline
 * - 레이아웃 안전장치(max-width)만 최소 적용
 */
.rn-guide-post__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 0;
	border: 0;
	background: transparent;
}

.rn-guide-post__prose {
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-xs);
	line-height: var(--rn-line-height-base);
	color: var(--rn-gray-80);
	word-break: break-word;
}

.rn-guide-post__prose :where(ul, ol) {
	list-style: revert;
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.rn-guide-post__prose :where(li) {
	margin: 0.15em 0;
}

.rn-guide-post__prose :where(p) {
	margin: 0.5em 0;
}

.rn-guide-post__prose :where(img) {
	max-width: 100%;
	height: auto;
}

.rn-guide-post__prose :where(table) {
	max-width: 100%;
}

.rn-guide-post__prose :where(a) {
	color: inherit;
}

.rn-guide-post__lecture {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 0;
	border: 0;
	background: transparent;
}

.rn-guide-post__lecture iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 16rem;
	border: 0;
}

.rn-guide-post__meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
	margin-top: var(--rn-space-3);
	padding-top: var(--rn-space-3);
	border-top: 1px solid var(--rn-color-border);
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text);
}

.rn-guide-post__meta-row {
	display: flex;
	align-items: center;
	gap: var(--rn-space-3);
	min-width: 0;
}

.rn-guide-post__meta-label {
	flex: 0 0 3.5rem;
	color: var(--rn-color-text-muted);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-base);
}

.rn-guide-post__meta-value {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-2);
}

.rn-guide-post__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--rn-space-2);
}

/* [강의보기] — 빨간 라인(흰 바탕 · 빨간 테두리 · 빨간 글자, 마우스 올리면 연한 빨강) — 공통 빨간 라인(.rn-btn--danger)과 같은 색
   (2026-11-04 사용자 지시 '빨간 라인스타일'. 레거시 가이드북 강의보기도 빨간 라인이었다 — custom.css .lecture_btn #f00). 종전 rn-btn--primary 주황 채움 */
.rn-guide-post__actions .rn-guide-post__lecture-btn {
	border-color: var(--rn-color-danger);
	background: var(--rn-color-bg);
	color: var(--rn-color-danger-text);
}

.rn-guide-post__actions .rn-guide-post__lecture-btn:hover:not(:disabled) {
	background: var(--rn-color-danger-soft);
}

/* ▶ 재생 아이콘 — 글자색(빨강)을 따른다. 글자와 간격은 .rn-btn gap (2026-11-04 사용자 지시, 레거시 fa-play 자리) */
.rn-guide-post__lecture-icon {
	flex: none;
	display: block;
}

.rn-guide-post__fnb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-2);
	margin-top: var(--rn-space-1);
}

.rn-guide-download {
	position: relative;
	margin-left: auto;
}

.rn-guide-download__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.rn-guide-download__icon,
.rn-guide-download__caret {
	flex: 0 0 auto;
	display: block;
}

.rn-guide-download__caret {
	opacity: 0.85;
	transition: transform var(--rn-transition-fast);
}

.rn-guide-download:hover .rn-guide-download__caret,
.rn-guide-download:focus-within .rn-guide-download__caret {
	transform: rotate(180deg);
}

.rn-guide-download__menu {
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.35rem);
	z-index: 5;
	min-width: 20rem;
	max-width: min(28rem, 90vw);
	padding: var(--rn-space-2);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-sm);
	box-sizing: border-box;
}

/* 버튼↔메뉴 사이 빈 공간을 채워 hover 유지 */
.rn-guide-download__menu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 0.5rem;
}

.rn-guide-download:hover .rn-guide-download__menu,
.rn-guide-download:focus-within .rn-guide-download__menu {
	display: block;
}

.rn-guide-download__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-space-3);
	min-height: 2.75rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--rn-radius-sm);
	color: var(--rn-color-text);
	text-decoration: none;
	transition: background var(--rn-transition-fast);
}

.rn-guide-download__item + .rn-guide-download__item {
	margin-top: 0.2rem;
}

.rn-guide-download__item:hover {
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

.rn-guide-download__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	line-height: var(--rn-line-height-base);
}

.rn-guide-download__action {
	flex: 0 0 auto;
	padding: 0.25rem 0.55rem;
	border-radius: var(--rn-radius-sm);
	background: var(--rn-color-brand);
	color: var(--rn-color-on-brand);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-semibold);
	line-height: var(--rn-line-height-base);
}

.rn-guide-download__item:hover .rn-guide-download__action {
	background: var(--rn-color-brand-hover);
	color: var(--rn-color-on-brand);
}

.rn-guide-post__bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
	gap: var(--rn-space-4);
}

.rn-guide-qna {
	padding: var(--rn-space-4);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg);
	border: 1px solid var(--rn-color-border);
}

.rn-guide-qna .rn-guide-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-space-2);
}

.rn-guide-qna .qna-regist {
	margin-left: auto;
}

.rn-guide-qna__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 질문 한 줄 약 38px. hover 는 주황 글자 대신 공통 회색 바탕(--rn-color-bg-hover) — 바탕이 글자에 붙지 않게 좌우 8px (2026-10-13) */
.rn-guide-qna__list li a {
	display: block;
	padding: 0.45rem var(--rn-space-2);
	border-bottom: 1px solid var(--rn-color-border);
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-sm);
	text-decoration: none;
	transition: background var(--rn-transition-fast);
}

.rn-guide-qna__list li a:hover {
	background: var(--rn-color-bg-hover);
	color: var(--rn-color-text);
}

.rn-guide-post__banner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg);
	border: 1px solid var(--rn-color-border);
}

/* ---------- 상세 화면 배치 — 카드 하나를 나눠 쓴다 (2026-10-13 '샘플을 카드 안 카드로 나누지 말고' · '관련질문·배너 아래 여백') ----------
 * 종전: 본문 카드(.rn-guide__main) 안에 테두리 상자(.rn-guide-post)가 또 있고, 관련질문·배너도 각각 테두리 상자 →
 *       상자 안 상자 + 내용이 짧으면 카드 아래가 비었다.
 * 지금: 본문 카드의 안쪽 여백을 걷고 그 안을 선으로만 나눈다 —
 *   [샘플 미리보기(회색 면) | 본문] 이 남는 높이를 모두 채우고(flex 1), 그 아래 한 줄에 [관련질문 | 배너] 가 위 선 하나로 붙는다.
 *   샘플은 상자 대신 회색 면(#F8F8F8) 위의 흰 종이(그림자)로 보인다. */
.rn-guide--post .rn-guide__main {
	padding: 0;
	gap: 0;
}

.rn-guide--post .rn-guide-post {
	flex: 1 0 auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.rn-guide--post .rn-guide-post__preview {
	background: var(--rn-color-bg-soft);
}

.rn-guide--post .rn-guide-post__preview-main,
.rn-guide--post .rn-guide-post__preview-main:last-child {
	border: 0;
	border-radius: var(--rn-radius-sm);
	background: var(--rn-color-bg);
	box-shadow: var(--rn-shadow-sm);
}

.rn-guide--post .rn-guide-post__preview-thumbs {
	border-top: 0;
}

/* 관련질문 | 배너 줄 — 최소 15rem(240px) 높이 · 배너 칸 15rem 정사각 (레거시 233×233 배너 자리와 같은 크기).
 * 내용 높이만큼만 잡으면(약 155px) 너무 좁다 하여 넓힘 (2026-10-13) */
.rn-guide--post .rn-guide-post__bottom {
	flex: 0 0 auto;
	grid-template-columns: minmax(0, 1fr) 15rem;
	gap: 0;
	min-height: 15rem;
	border-top: 1px solid var(--rn-color-border);
}

.rn-guide--post .rn-guide-qna {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* 제목 줄만 연한 남색 띠(#EDF1F5 — 표 머리글·설정 카드 머리띠와 같은 색), 칸 폭 꽉 차게 (2026-10-13) */
.rn-guide--post .rn-guide-qna .rn-guide-section-title {
	min-height: 2.5rem;
	margin: 0;
	padding: 0 var(--rn-space-4);
	border-bottom: 0;
	background: var(--rn-table-th-bg);
	font-size: var(--rn-font-size-sm);
	box-sizing: border-box;
}

/* 질문 사이 가로선이 칸 양끝(카드 끝·배너 구분선)까지 이어지게 목록 좌우 여백을 없애고, 글자 여백(16px)은 각 줄이 갖는다 (2026-10-13) */
.rn-guide--post .rn-guide-qna__list {
	padding: var(--rn-space-2) 0;
}

.rn-guide--post .rn-guide-qna__list li a {
	padding-right: var(--rn-space-4);
	padding-left: var(--rn-space-4);
}

/* 관련질문이 늘어나도 줄 높이는 그대로 — 제목은 고정, 질문 목록만 스크롤 (2026-10-13).
 * 높이 15.5rem(248px) = 위 선 1 + 제목 띠 40 + 목록 위아래 여백 16 + 질문 5줄(37.9 × 5 = 190) — 한 화면에 5개까지 (2026-10-13 종전 17rem 은 6개째가 보여 줄임) */
@media (min-width: 1024px) {
	.rn-guide--post .rn-guide-post__bottom {
		height: 15.5rem;
	}

	.rn-guide--post .rn-guide-qna {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.rn-guide--post .rn-guide-qna .rn-guide-section-title {
		flex: 0 0 auto;
	}

	.rn-guide--post .rn-guide-qna__list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
}

.rn-guide--post .rn-guide-post__banner {
	padding: var(--rn-space-3);
	border: 0;
	border-left: 1px solid var(--rn-color-border);
	border-radius: 0;
	background: transparent;
}

.rn-guide--post .rn-guide-post__banner a {
	display: block;
	max-width: 100%;
}

.rn-guide--post .rn-guide-post__banner img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--rn-radius-md);
}

/* PC — 관련질문 | 배너 줄은 카드 아래에 고정, 설명글이 길어지면 본문(.rn-guide-post__content)만 스크롤 (2026-10-13 '아래로 내려가면 안 돼').
 * 위 상세 영역은 남는 높이만 쓰고(flex 1 1 0 · 행 높이 minmax(0, 1fr)) 넘치는 건 본문 칸이 스크롤한다.
 * 수정일·키워드·버튼 줄(.rn-guide-post__meta)도 본문 칸 아래에 그대로 보인다. 좁은 화면(1023px 이하)은 페이지 전체가 스크롤하므로 제외 */
@media (min-width: 1024px) {
	.rn-guide--post .rn-guide__main {
		overflow: hidden;
	}

	.rn-guide--post .rn-guide-post {
		flex: 1 1 0;
		min-height: 0;
		grid-template-rows: minmax(0, 1fr);
		overflow: hidden;
	}

	.rn-guide--post .rn-guide-post__preview {
		overflow-y: auto;
	}

	/* 샘플 미리보기 칸 — 큰 샘플(A4) + 작은 샘플 줄이 칸 높이에 딱 맞게 (2026-10-28 사용자 지시
	   '비율이 바뀌면 안 돼' → '미리보기 구분선은 빼고 열에 맞춰 샘플 키워주고, 작은 샘플은 왼쪽 정렬 · 더 크게 — 여백이 애매하게 비어 보인다, 비율은 그대로 딱 맞게').
	   · 큰 샘플 높이 Hb = 칸 안쪽 높이 − '작성 샘플 미리보기' 이름 줄 − 사이 간격 − 작은 샘플 줄(= 오른쪽 수정일·키워드 구획 높이, 2026-10-28 열 맞춤).
	     작은 샘플 줄이 없어도 그 자리는 비워 두어 큰 샘플 크기 · 칸 폭이 모든 글에서 같다
	   · 칸 폭 = Hb × 346/492 + 좌우 여백 — 큰 샘플이 칸 폭을 꽉 채우는 A4 가 되도록 칸 폭을 높이에서 정한다(17 ~ 36rem 사이, 본문 칸이 너무 좁아지지 않게).
	     폭이 상·하한에 걸리면 종이는 칸 안에 들어가는 가장 큰 A4 로 줄고(비율 그대로) 왼쪽에 붙는다
	   · 작은 샘플은 줄 높이 그대로의 A4, 왼쪽부터 · 위 구분선 없음. 첫 장(고른 장)은 주황 테두리(위 공통 규칙)
	   · 같은 날 앞서 넣은 '아래 샘플 영역 윗선 = 오른쪽 정보 영역 윗선' 맞춤은 구분선을 빼라는 지시로 걷었다 */
	/* 높이 기준 = 상세 영역(.rn-guide__main — 크기 컨테이너) 높이 − 아래 관련질문 줄(15.5rem, 위 절) = 샘플 칸 높이 */
	.rn-guide--post .rn-guide__main {
		container-type: size;
	}

	.rn-guide--post .rn-guide-post {
		--rn-gp-pad: var(--rn-space-4);
		--rn-gp-gap: var(--rn-space-2);
		--rn-gp-label: 1.5rem;
		--rn-gp-h: calc(100cqh - 15.5rem);
		/* 작은 샘플 줄 높이 = 오른쪽 수정일·키워드·다운로드 구획 높이(윗선 1px + 안쪽 위 여백 12px + 세 줄 2.25·1·2.25rem + 줄 사이, 아래 절) —
		   두 칸의 아래 구획 윗선 · 아래 끝을 맞춘다 (2026-10-28).
		   모든 글에서 한 값 — 키워드 · 다운로드 · 작은 샘플이 없는 글도 같은 높이를 비워 두어, 샘플 칸 폭 · 큰 샘플 크기 · 구분선 높이 · 내용 칸 폭이
		   글마다 달라지지 않게 한다 (2026-10-28 사용자 '페이지마다 다 동일하게'). 값은 화면 높이로만 바뀐다 */
		--rn-gp-meta-h: calc(1px + var(--rn-space-3) + 5.5rem + 2 * var(--rn-space-1));
		--rn-gp-big-h: calc(var(--rn-gp-h) - 2 * var(--rn-gp-pad) - var(--rn-gp-label) - 2 * var(--rn-gp-gap) - var(--rn-gp-meta-h));
		grid-template-columns: clamp(17rem, calc(var(--rn-gp-big-h) * 346 / 492 + 2 * var(--rn-gp-pad)), 36rem) minmax(0, 1fr);
	}

	/* 작은 샘플이 없는 글 — 그 줄 자리는 비워 둔다(큰 샘플은 다른 글과 같은 크기) */
	.rn-guide--post .rn-guide-post__preview:not(:has(.rn-guide-post__preview-thumbs))::after {
		content: "";
		flex: 0 0 var(--rn-gp-meta-h);
	}

	.rn-guide--post .rn-guide-post__preview {
		gap: var(--rn-gp-gap);
		padding: var(--rn-gp-pad);
		overflow: hidden;
	}

	.rn-guide--post .rn-guide-post__preview-label {
		height: var(--rn-gp-label);
		line-height: var(--rn-gp-label);
	}

	.rn-guide--post .rn-guide-post__preview-main,
	.rn-guide--post .rn-guide-post__preview-main:last-child {
		display: grid;
		place-items: start;
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		aspect-ratio: auto;
		max-height: none;
		container-type: size;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.rn-guide--post .rn-guide-post__preview-main img {
		width: min(100cqw, 100cqh * 346 / 492);
		height: min(100cqh, 100cqw * 492 / 346);
		object-fit: contain;
		border-radius: var(--rn-radius-sm);
		background: var(--rn-color-bg);
		box-shadow: var(--rn-shadow-sm);
	}

	.rn-guide--post .rn-guide-post__preview-thumbs {
		flex: 0 0 auto;
		height: var(--rn-gp-meta-h);
		margin: 0;
		padding: 0;
		border-top: 0;
	}

	.rn-guide--post .rn-guide-post__preview-thumbs :is(.rn-guide-post__thumbs-nav, .swiper) {
		height: 100%;
		margin: 0;
	}

	.rn-guide--post .rn-guide-post__preview-thumbs .swiper-wrapper {
		justify-content: flex-start;
	}

	.rn-guide--post .rn-guide-post__preview-thumbs .swiper-slide {
		height: 100%;
		width: calc(var(--rn-gp-meta-h) * 346 / 492);
		opacity: 1;
	}
}

/* PC — 본문 아래 정보 영역(.rn-guide-post__meta) 높이 고정: 수정일·키워드 내용이나 보기 버튼 유무로 설명글 칸 높이가 달라지지 않게 (2026-10-13).
 *   1줄 [수정일 날짜 (관리자 수정하기) ……… 보기 버튼(부제·본문보기·강의보기)]  — 종전엔 보기 버튼이 따로 한 줄을 더 차지했다
 *   2줄 [키워드 #태그 #태그 …]  — 둘째 줄 1rem + 셋째 줄(다운로드 줄 왼쪽)을 함께 써 태그 두 줄 높이(3.5rem)로 고정, 세 줄째부터는 그 칸 안에서 스크롤(스크롤바 숨김).
 *        업무방법은 키워드가 없어도 '-' 로 줄을 둔다
 *   3줄 [……… 자료 다운로드]  — [이전으로] · [관련문의]는 2026-10-28 제목 줄(버전 옆)로 올렸다. 다운로드가 없는 글도 줄은 둔다
 * 각 줄 높이를 고정(2.25rem · 1rem · 2.25rem — 2026-10-28 작은 샘플을 줄이고 큰 샘플을 키우며 3.5rem → 1rem)해 내용과 무관하게 영역 높이가 같다.
 * 영역 높이(윗선 포함)는 왼쪽 작은 샘플 줄 높이(--rn-gp-meta-h, 위 절)와 같게 고정한다 — 두 칸의 아래 구획이 같은 높이에서 나뉘게
 * 키워드 두 줄 몫은 위 관련질문 줄을 5개 높이로 줄여 생긴 높이로 충당한다 */
@media (min-width: 1024px) {
	.rn-guide--post .rn-guide-post__meta {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		/* 키워드는 왼쪽 칸에서만 — [자료 다운로드] 위 세로 구역(오른쪽 칸)으로는 넘어가지 않고 줄을 내린다 (2026-10-28 사용자 지시).
		   키워드 칸은 둘째·셋째 줄을 함께 써서(다운로드 왼쪽까지) 태그 두 줄이 들어가고, 넘치면 그 안에서 스크롤 — 영역 높이는 그대로.
		   보기 버튼(부가 자료 · 본문보기 · 강의보기)은 셋째 줄 [자료 다운로드] 바로 왼쪽 (2026-11-04 사용자 지시, 종전 첫 줄 수정일 오른쪽) */
		grid-template-areas:
			"date date date"
			"keyword . ."
			"keyword actions fnb";
		grid-template-rows: 2.25rem 1rem 2.25rem;
		align-items: center;
		column-gap: var(--rn-space-3);
		row-gap: var(--rn-space-1);
		box-sizing: border-box;
		height: var(--rn-gp-meta-h);
	}

	/* 평가해석·지정갱신제(키워드 줄 없음)도 세 줄 높이 그대로 — 키워드 자리는 빈다 (2026-10-28 '페이지마다 다 동일하게', 종전 두 줄로 줄이던 규칙 걷음) */

	.rn-guide--post .rn-guide-post__meta-row {
		grid-area: date;
		min-height: 0;
		overflow: hidden;
	}

	.rn-guide--post .rn-guide-post__meta-row--keyword {
		grid-area: keyword;
		align-self: stretch;
		align-items: flex-start;
	}

	/* '키워드' 글자를 첫 줄 태그(약 26px)와 같은 높이 가운데에 */
	.rn-guide--post .rn-guide-post__meta-row--keyword .rn-guide-post__meta-label {
		line-height: 1.625rem;
	}

	.rn-guide--post .rn-guide-post__meta-row .rn-guide-post__meta-value {
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.rn-guide--post .rn-guide-post__meta-row--keyword .rn-guide-post__meta-value {
		align-self: stretch;
		align-items: flex-start;
		flex-wrap: wrap;
		white-space: normal;
		overflow-y: auto;
		scrollbar-width: none;
	}

	.rn-guide--post .rn-guide-post__meta-row--keyword .rn-guide-post__meta-value::-webkit-scrollbar {
		display: none;
	}

	.rn-guide--post .rn-guide-post__meta-row--keyword .rn-guide-tags {
		flex-wrap: wrap;
	}

	.rn-guide--post .rn-guide-post__meta-row--keyword .rn-guide-tags li {
		flex: none;
	}

	.rn-guide--post .rn-guide-post__actions {
		grid-area: actions;
		flex-wrap: nowrap;
	}

	.rn-guide--post .rn-guide-post__fnb {
		grid-area: fnb;
		flex-wrap: nowrap;
		margin-top: 0;
	}
}

.rn-guide-post__meta-empty {
	color: var(--rn-color-text-subtle);
}

/* ---------- FAQ ----------
 * 2026-10-14: 질문 카드 위를 검색줄·제목줄 선 두 개가 또 나누던 구성이 어색했다 →
 *   검색줄·제목줄은 선 없이 두고 질문은 카드로만 나눈다 (선 목록도 해 봤으나 사용자가 카드형 선택).
 *   카드 좌우 여백 24px · 질문 16px 굵게 · Q 마크 검정 바탕 흰 글자 · 답변은 A 마크 없이 질문 글과 같은 세로선에서 시작,
 *   같은 카드 아래쪽 회색 면(#F8F8F8)으로 이어진다.
 * 펼칠 때 글자가 밀려 내려가지 않게 jQuery slideToggle 이 다루는 .faq_anw 에는 여백을 두지 않고
 *   (slideDown 은 height 와 함께 padding 도 0 → 값으로 키운다) 여백은 안쪽 .rn-guide-faq__anw-inner 가 가진다.
 * 모두 접혀 있을 땐 한 쪽(10개)이 스크롤 없이 들어와야 한다 — PC 에선 질문 카드 위아래 여백을
 *   목록 높이(100cqh)에서 거꾸로 계산해 8~18px 사이로 줄인다(아래 @media). 펼친 뒤에만 목록 안에서 스크롤된다. */
.rn-guide--faq {
	--rn-guide-faq-inset: var(--rn-space-6);
	--rn-guide-faq-gap: var(--rn-space-2);
	--rn-guide-faq-que-py: 1.125rem;
}

.rn-guide--faq .rn-guide__main {
	padding: var(--rn-guide-faq-inset);
}

.rn-guide-faq {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.rn-guide-faq__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-3);
	margin-bottom: var(--rn-space-6);
}

.rn-guide-faq__search-field {
	flex: 1 1 14rem;
	max-width: 22rem;
}

.rn-guide-faq__toolbar-aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-2);
	margin-left: auto;
}

.rn-guide-faq__head {
	display: flex;
	align-items: baseline;
	gap: var(--rn-space-3);
	margin-bottom: var(--rn-space-3);
}

.rn-guide-faq__title {
	margin: 0;
	font-size: var(--rn-font-size-md);
	font-weight: var(--rn-font-weight-bold);
	color: var(--rn-color-text);
}

.rn-guide-faq__total {
	margin: 0;
	font-size: var(--rn-font-size-sm);
	color: var(--rn-color-text-muted);
}

.rn-guide-faq__total em {
	font-style: normal;
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-guide-faq__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.rn-guide-faq .rn-paging,
.rn-guide-faq__admin {
	flex: 0 0 auto;
}

.rn-guide-faq .rn-paging {
	margin-top: var(--rn-space-4);
}

/* 질문 카드 — 굵기·크기는 펼침과 무관하게 고정(펼칠 때 글자 폭이 바뀌어 줄이 넘어가지 않게) */
.rn-guide-faq__que {
	display: flex;
	align-items: center;
	gap: var(--rn-space-3);
	width: 100%;
	margin: 0;
	padding: var(--rn-guide-faq-que-py) var(--rn-guide-faq-inset);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: 1rem;
	font-weight: var(--rn-font-weight-bold);
	line-height: var(--rn-line-height-base);
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	transition: background var(--rn-transition-fast), color var(--rn-transition-fast);
}

.rn-guide-faq__que + .rn-guide-faq__que,
.rn-guide-faq__anw + .rn-guide-faq__que {
	margin-top: var(--rn-guide-faq-gap);
}

/* Q 마크 — 질답모음만 검정 바탕 흰 글자(관련질문 모달·연차 안내의 연파랑 마크는 그대로) */
.rn-guide-faq__que .rn-qa__mark {
	background: var(--rn-color-text);
	color: var(--rn-color-on-brand);
}

.rn-guide-faq__que:hover {
	background: var(--rn-color-row-hover);
}

.rn-guide-faq__que-text {
	flex: 1 1 auto;
	min-width: 0;
}

.rn-guide-faq__chevron {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--rn-color-text-subtle);
	transition: transform var(--rn-transition-fast);
}

/* 펼침: 제목·화살표 색은 그대로 두고(남색으로 바꾸지 않는다) 화살표만 뒤집으며, 아래 모서리를 펴 답변과 한 카드로 잇는다(사이 선 없음) */
.rn-guide-faq__que.on {
	border-bottom-color: transparent;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
}

.rn-guide-faq__que.on .rn-guide-faq__chevron {
	transform: rotate(180deg);
}

.rn-guide-faq__anw {
	display: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--rn-color-border);
	border-top: 0;
	border-radius: 0 0 var(--rn-radius-lg) var(--rn-radius-lg);
	background: var(--rn-color-bg-soft);
	box-sizing: border-box;
}

/* 답변 글은 위 질문 글과 같은 세로선(Q 마크 1.5rem + 간격)에서 시작한다 */
.rn-guide-faq__anw-inner {
	padding: var(--rn-space-6) var(--rn-guide-faq-inset) var(--rn-space-6) calc(var(--rn-guide-faq-inset) + 1.5rem + var(--rn-space-3));
}

.rn-guide-faq__anw-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* 에디터 HTML content island (포스트 본문과 동일 톤) */
.rn-guide-faq__anw-body {
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-sm);
	line-height: 1.6;
	color: var(--rn-color-text);
	word-break: break-word;
}

/* 첫 줄이 A 마크와 같은 높이에서 시작하게 위아래 끝 문단 여백은 뺀다 */
.rn-guide-faq__anw-body > :first-child {
	margin-top: 0;
}

.rn-guide-faq__anw-body > :last-child {
	margin-bottom: 0;
}

.rn-guide-faq__anw-body :where(h1, h2, h3, h4, h5, h6) {
	margin: 0.75em 0 0.4em;
	font-weight: var(--rn-font-weight-bold);
	line-height: var(--rn-line-height-base);
	color: inherit;
}

.rn-guide-faq__anw-body :where(p) {
	margin: 0.5em 0;
}

.rn-guide-faq__anw-body :where(ul, ol) {
	list-style: revert;
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.rn-guide-faq__anw-body :where(li) {
	margin: 0.15em 0;
}

.rn-guide-faq__anw-body :where(img) {
	max-width: 100%;
	height: auto;
}

.rn-guide-faq__anw-body :where(table) {
	max-width: 100%;
	border-collapse: collapse;
}

.rn-guide-faq__anw-body :where(a) {
	color: inherit;
}

.rn-guide-faq__anw-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--rn-space-3);
}

.rn-guide-faq__admin {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--rn-space-3);
}

/* PC: 목록이 남은 높이를 채우는 크기 컨테이너가 되고, 질문 카드 위아래 여백을 그 높이에서 계산한다.
 *   카드 한 장 = 테두리 2px + 제목 한 줄 1.5rem(16px×1.5) + 위아래 여백 → 10장 + 사이 9칸이 100cqh 안에 들도록.
 *   (1023px 이하는 페이지가 늘어나는 레이아웃이라 크기 컨테이너를 걸면 목록 높이가 0 이 된다 — 고정 18px 유지)
 * 펼쳐서 스크롤바가 생길 때 카드 폭이 줄어 화살표가 옆으로 밀리지 않게 스크롤바 자리(Chrome thin 10px)를
 *   늘 비워 두고, 그만큼 목록을 본문 오른쪽 여백 쪽으로 넓혀 카드 오른쪽 끝은 위 [실시간 문의하기] 끝과 맞춘다. */
@media (min-width: 1024px) {
	.rn-guide-faq__list {
		container-type: size;
		scrollbar-gutter: stable;
		margin-right: -10px;
	}

	.rn-guide-faq__que {
		--rn-guide-faq-que-py: clamp(0.5rem, (100cqh - 22px - 15rem - 9 * var(--rn-guide-faq-gap)) / 20, 1.125rem);
	}
}

/* ---------- 자료실 공통 모달 ---------- */
.rn-modal.guide-faq-inquiry-modal .modal_body,
.rn-modal.guide-post-inquiry-modal .modal_body {
	width: min(30rem, calc(100vw - 2rem));
}

.rn-modal.guide-faq-inquiry-modal .modal-section,
.rn-modal.guide-post-inquiry-modal .modal-section,
.rn-modal.guide-qna-modal .modal-section {
	padding: var(--rn-space-4);
}

.rn-modal.guide-faq-inquiry-modal .modal-footer,
.rn-modal.guide-post-inquiry-modal .modal-footer,
.rn-modal.guide-qna-modal .modal-footer,
.rn-modal.guide-sub-modal .modal-footer {
	padding: var(--rn-space-3) var(--rn-space-4);
	gap: var(--rn-space-2);
}

/* ---------- 실시간 문의 폼 ---------- */
.rn-guide-inquiry {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-3);
}

.rn-guide-inquiry__hint {
	margin: 0;
	padding: var(--rn-space-2) var(--rn-space-3);
	border-radius: var(--rn-radius-md);
	background: var(--rn-color-bg-soft);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	line-height: var(--rn-line-height-base);
}

.rn-guide-inquiry__row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.rn-guide-inquiry__label {
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-semibold);
	color: var(--rn-color-text);
}

.rn-guide-inquiry__label .req {
	margin-right: 0.15rem;
	color: var(--rn-color-danger-text);
}

/* 문의 폼 크롬은 forms.css — 레이아웃만 */
.rn-guide-inquiry .rn-input,
.rn-guide-inquiry .rn-select,
.rn-guide-inquiry .rn-textarea {
	width: 100%;
}

.rn-guide-inquiry .rn-textarea {
	min-height: 9rem;
}

/* ---------- 관련질문 모달 (Q/A 마크업은 badges.css .rn-qa 공통) ---------- */
.rn-modal.guide-qna-modal .modal_body {
	width: min(34rem, calc(100vw - 2rem));
}

/* 질문 · 답변 글 16px (2026-10-28 사용자 지시 '글자크기 16 정도로', 종전 14px).
   글은 관리자가 편집기로 쓴 HTML 이라 안쪽에 인라인 font-size 가 섞일 수 있다 — 안쪽은 모두 이 크기를 따른다 */
/* 줄바꿈은 낱말 단위 — '정신·|인지장애'처럼 낱말 중간에서 꺾이지 않게 */
.rn-modal.guide-qna-modal .rn-qa__body {
	font-size: 16px;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.rn-modal.guide-qna-modal .rn-qa__body * {
	font-size: inherit !important;
}

/* 글 영역만 안쪽 여백 16 → 24 — 글이 팝업 테두리에 붙어 보였다. 제목 줄 · [확인] 줄은 다른 팝업과 같은 16 그대로.
   질문과 답변 사이 #D8D8D8 구분선 (2026-10-28 사용자 지시 '글자 카드에 붙어 보여 패딩 더, 큐 에이 사이 구분선' → '버튼은 위치 그대로, 글자 영역만') */
.rn-modal.guide-qna-modal .modal-section {
	padding: var(--rn-space-6);
}

.rn-modal.guide-qna-modal .rn-qa {
	gap: 0;
}

.rn-modal.guide-qna-modal .rn-qa__item + .rn-qa__item {
	margin-top: var(--rn-space-5);
	padding-top: var(--rn-space-5);
	border-top: 1px solid var(--rn-color-border);
}

/* ---------- 부제/부가 내용 모달 ---------- */
.rn-modal.guide-sub-modal .modal_body {
	width: min(42rem, calc(100vw - 2rem));
	max-height: min(85dvh, 42rem);
}

.rn-modal.guide-sub-modal .modal-section {
	padding: var(--rn-space-4);
	overflow: auto;
}

.rn-modal.guide-sub-modal .modal-footer {
	justify-content: center;
}

.rn-guide-sub-modal {
	padding: var(--rn-space-4);
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg-soft);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
	color: var(--rn-color-text);
	word-break: break-word;
}

.rn-guide-sub-modal p {
	margin: 0 0 0.75rem;
}

.rn-guide-sub-modal p:last-child {
	margin-bottom: 0;
}

.rn-guide-sub-modal img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rn-radius-sm);
}

.rn-guide-sub-modal table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5rem 0;
}

.rn-guide-sub-modal th,
.rn-guide-sub-modal td {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--rn-color-border-strong);
	font-size: var(--rn-font-size-xs);
}

.rn-guide-sub-modal__empty {
	margin: 0;
	color: var(--rn-color-text-subtle);
	text-align: center;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1023px) {
	.rn-main:has(.rn-guide) {
		height: auto;
		min-height: 100dvh;
		max-height: none;
		overflow: visible;
	}

	/* 맨 위 줄은 ☰(sidebar.css .rn-menu-toggle — 위 18px · 36px)와 같은 높이 36px — 제목이 ☰ 와 세로 가운데가 맞고, 아래 카드가 다른 화면처럼 ☰ 아래 12px 에서 시작한다.
	   폰 첫 화면·상세에서 [분류](36px)를 숨기자 줄이 글자 높이(26px)로 낮아져 ☰ 가 아래 카드에 붙어 보였다 (2026-10-16) */
	.rn-guide__toolbar {
		display: flex;
		min-height: var(--rn-btn-min-height);
	}

	.rn-guide__panel {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 50;
		width: min(22rem, 88vw);
		height: 100dvh;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		box-shadow: none;
	}

	.rn-guide__panel.is-open {
		transform: translateX(0);
		box-shadow: var(--rn-shadow-lg);
	}

	.rn-guide__panel-close {
		display: inline-flex;
	}

	/* hidden 속성이 있을 때는 숨김 유지 (display:block 이 [hidden] 을 덮지 않도록) */
	.rn-guide__panel-backdrop {
		position: fixed;
		inset: 0;
		z-index: 40;
		border: 0;
		padding: 0;
		background: var(--rn-color-overlay-soft);
		cursor: pointer;
	}

	.rn-guide__panel-backdrop:not([hidden]) {
		display: block;
	}

	.rn-guide-post,
	/* 상세 아래(관련 질문 | 배너)도 한 칸으로 — '.rn-guide--post .rn-guide-post__bottom'(두 칸, 특이도 0,2,0)이
	   바로 위 규칙(0,1,0)을 이겨 좁은 화면에서도 두 칸이었다. 배너를 숨기는 720px 이하에서는 관련 질문이 반쪽만 보였다 */
	.rn-guide-post__bottom,
	.rn-guide--post .rn-guide-post__bottom {
		grid-template-columns: minmax(0, 1fr);
	}

	.rn-guide-post__preview {
		border-right: 0;
		border-bottom: 1px solid var(--rn-color-border);
	}

	.rn-guide--post .rn-guide-post__banner {
		border-left: 0;
		border-top: 1px solid var(--rn-color-border);
	}

	.rn-guide-post__body {
		overflow: visible;
	}

	.rn-guide-post__content,
	.rn-guide-post__lecture {
		flex: 0 1 auto;
		max-height: min(50dvh, 28rem);
	}

	.rn-guide-faq__toolbar-aside {
		margin-left: 0;
		width: 100%;
		justify-content: flex-end;
	}

	.rn-guide-faq__search-field {
		max-width: none;
	}

	.rn-guide-empty__hint-wide {
		display: none;
	}

	.rn-guide-empty__hint-narrow {
		display: inline;
	}

	/* 업무방법 검색창 — 이 폭에서는 guide.js 가 패널에서 본문 맨 위로 옮긴다(서랍 안에 숨지 않게) */
	.rn-guide__search--main {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	/* 상세 — 본문 칸 안쪽 여백이 0이라(미리보기·본문이 칸 끝까지 찬다) 검색창이 테두리에 붙었다. 검색창이 직접 띄운다.
	   padding 이 아니라 margin 이다 — padding 이면 absolute 돋보기(top:0)가 입력칸 밖으로 나간다(패널 .rn-search 규칙과 같은 이유).
	   목록과 같은 자리 — 목록은 본문 칸 안쪽 여백(위·좌·우 16px)이 띄우고 아래 안내와는 칸 gap(12px)이다 */
	.rn-guide--post .rn-guide__search--main {
		width: auto;
		margin: var(--rn-space-4) var(--rn-space-4) var(--rn-space-3);
	}
}

/* 저작권 안내 — 720px 이하에서는 여백·글자만 줄이고 문장은 접지 않고 다 보인다(필요하면 줄을 바꾼다). 검색 결과 안내는 그대로.
   종전: 한 줄로 줄여 말줄임 + 누르면 펼침(guide.js bindNoticeToggle) — 2026-10-19 사용자 지시 '접지 말고 다 보이도록' */
@media (max-width: 720px) {
	.rn-guide__notice:not(.rn-guide__notice--search) {
		padding: var(--rn-space-2) var(--rn-space-3);
	}

	/* 줄은 낱말 사이에서 바꾼다 — '책임 / 을' 처럼 낱말이 갈리지 않게 */
	.rn-guide__notice:not(.rn-guide__notice--search) .rn-guide__notice-text {
		font-size: var(--rn-font-size-xs);
		word-break: keep-all;
	}
}

/* ---------- 폰 폭(≤767px) — 페이지는 스크롤하지 않고 화면 안(.rn-guide)이 스크롤한다 (2026-10-16) ----------
   다른 화면과 같은 규칙(renewal-mobile-rules: 페이지 전체는 스크롤하지 않는다). 1023px 이하는 페이지째 스크롤하도록 풀려 있어(위 반응형 절)
   PC 좁은 창에서는 창 스크롤바(약 15px)가 생기고, 화면에 붙은 ☰(sidebar.css — 오른쪽 18px)가 그 폭만큼 왼쪽으로 밀려 다른 화면과 자리가 달라 보였다.
   이 폭에서는 화면 높이에 다시 고정하고 .rn-guide 가 세로로 스크롤한다 — 스크롤바는 상세 패널처럼 숨긴다(휠·손가락 스크롤은 그대로).
   목록으로 뒤로 가기 했을 때 보던 자리는 guide.js(bindScrollRestore)가 되살린다 */
@media (max-width: 767px) {
	.rn-main:has(.rn-guide) {
		height: 100dvh;
		max-height: 100dvh;
		overflow: hidden;
	}

	.rn-guide {
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
	}

	.rn-guide::-webkit-scrollbar {
		display: none;
	}

	/* 내용만큼 늘어난다(화면 높이에 맞춰 줄지 않는다) — 넘치는 만큼 위 .rn-guide 가 스크롤 */
	.rn-guide__shell {
		flex: 1 0 auto;
	}

	/* 맨 위 줄(제목 · ☰ 또는 상세 ✕)은 스크롤해도 맨 위에 붙어 있다(sticky) — 업무관리 상세의 이름 제목 줄과 같다.
	   ☰·✕ 는 화면에 붙어(fixed) 있는데 제목 줄만 내용과 함께 올라가 '닫기만 따로 떠 있다'(사용자, 2026-10-16).
	   줄을 화면 바깥 여백까지 넓혀(위·좌·우 −18px) 위 18 + 줄 36 + 아래 12 = 66px 띠로 덮는다 — 그 아래로 스크롤되는 내용이 비치지 않게.
	   아래 12px 은 화면 줄 간격(gap)을 대신해 그만큼 당긴다. sticky 는 .rn-guide 안쪽 여백(18px) 안에서 재므로 top 은 −18px.
	   오른쪽은 ☰/✕ 자리(18 + 36 + 8px)를 비운다 */
	.rn-guide__toolbar {
		position: sticky;
		top: calc(-1 * var(--rn-page-gutter));
		z-index: 5;
		flex-shrink: 0; /* 두 줄 글 제목(상세)만큼 띠가 늘어난다 — 줄어들면 제목이 띠 밖으로 넘친다 */
		box-sizing: border-box;
		min-height: calc(var(--rn-page-gutter) + var(--rn-btn-min-height) + var(--rn-space-3));
		margin: calc(-1 * var(--rn-page-gutter)) calc(-1 * var(--rn-page-gutter)) calc(-1 * var(--rn-space-3));
		/* + ☰ 왼쪽 [튜토리얼] 자리(tour.css --rn-tour-top-reserve — 튜토리얼이 있는 화면만) */
		padding: var(--rn-page-gutter) calc(var(--rn-page-gutter) + var(--rn-btn-min-height) + var(--rn-space-2) + var(--rn-tour-top-reserve, 0px)) var(--rn-space-3) var(--rn-page-gutter);
		background: var(--rn-color-bg-page);
	}
}
/* ---------- 720px 이하 — 목록 먼저 (2026-10-16 사용자 지시 '상근직원처럼 리스트 먼저 선택 후 내용') ----------
   첫 화면(검색어 없는 목록 — 본문에 안내 카드 .rn-guide-empty 가 있는 화면)은 분류 서랍 대신 자료 목록을 화면에 바로 펼친다.
   위에서부터 검색창 · 저작권 안내(본문 칸) → 대분류 · 자료 목록(분류 패널, 같은 화면 폭 카드). 자료를 누르면 상세 화면으로 가고,
   상세의 맨 위 ✕ · 뒤로 가기로 이 목록에 돌아온다. 안내 카드('이렇게 활용하세요')는 이 폭에서 뺀다 — 목록이 그 자리다.
   [분류] 단추·서랍 머리(제목·닫기)·가림막은 쓰지 않는다. 검색 결과 화면과 상세는 종전처럼 서랍 */
@media (max-width: 720px) {
	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__shell {
		flex-direction: column;
		gap: var(--rn-space-3);
	}

	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__panel-btn,
	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__panel-head,
	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__main > .rn-guide-empty,
	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__panel-backdrop {
		display: none !important;
	}

	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__main {
		flex: 0 0 auto;
		overflow: visible;
	}

	/* z-index 는 서랍(1023px 이하 fixed · 50)에서 물려받은 값을 푼다 — 패널이 .rn-guide__shell 의 flex 항목이라 static 이어도 z-index 가 먹어,
	   스크롤하면 목록이 맨 위 줄(sticky · 5) 위로 덮여 지나가 ☰ 만 혼자 떠 있는 것처럼 보였다 (2026-10-16 사용자 '햄버거만 혼자 내려온다') */
	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide__panel {
		position: static;
		z-index: auto;
		order: 1;
		flex: 0 0 auto;
		width: auto;
		height: auto;
		padding-top: var(--rn-space-4); /* 머리 줄을 뺀 자리 — 대분류 줄이 카드 위에서 16px */
		transform: none;
		transition: none;
		box-shadow: none;
		overflow: visible;
	}

	.rn-guide:has(.rn-guide__main > .rn-guide-empty) .rn-guide-mid {
		flex: 0 0 auto;
		overflow: visible;
	}

	/* 상세 — 업무관리(수급자·종사자 상세) · 상근직원 상세와 같은 맨 위 줄 (2026-10-16 사용자 지시, 잠깐 왼쪽 [‹ 목록]이었다).
	   왼쪽은 화면 제목('업무방법' 등), ☰ 자리(위·오른쪽 18px · 36px)는 닫기(✕) — 바탕 없는 #2D2D2D X. [분류] 서랍 단추는 쓰지 않는다.
	   닫기는 [‹ 목록] 링크(#rnGuideBackToList)를 그대로 쓴다 — 글자·꺾쇠는 숨기고 X 를 그린다(누르면 목록으로, guide.js).
	   상세에서는 ☰ 를 감춘다 */
	.rn-guide--post .rn-guide__panel-btn {
		display: none;
	}


	.rn-guide--post .rn-guide__back,
	.rn-guide--post .rn-guide__back:hover {
		position: fixed;
		top: var(--rn-page-gutter);
		right: var(--rn-page-gutter);
		z-index: calc(var(--rn-z-sidebar) + 2);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--rn-btn-min-height);
		min-height: 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);
		font-size: 0;
	}

	.rn-guide--post .rn-guide__back svg {
		display: none;
	}

	.rn-guide--post .rn-guide__back::before {
		content: "";
		width: var(--rn-menu-icon-size); /* 24px — ☰ 와 같은 크기 (variables.css, 2026-10-19 종전 20px) */
		height: var(--rn-menu-icon-size);
		background-color: currentColor;
		-webkit-mask: var(--rn-icon-menu-close) center / contain no-repeat;
		mask: var(--rn-icon-menu-close) center / contain no-repeat;
	}

	body:has(.rn-guide--post) .rn-menu-toggle {
		display: none;
	}

	/* 상세 맨 위 줄 제목은 글 제목 — 업무관리 · 상근직원 상세 맨 위 줄이 사람 이름인 것과 같다(17px 굵게).
	   긴 제목은 두 줄까지(그 이상은 …) — 한 줄 말줄임이면 제목 뒷부분을 볼 곳이 없다(카드 안 제목 줄은 아래에서 숨긴다).
	   두 줄이면 66px 띠가 그만큼 늘어난다 (2026-10-16 사용자 지시) */
	.rn-guide--post .rn-guide__page-title {
		min-width: 0;
		color: var(--rn-color-text-title);
		font-weight: var(--rn-font-weight-bold);
		line-height: 1.3;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.rn-guide--post .rn-guide__page-title-name {
		display: none;
	}

	.rn-guide--post .rn-guide__page-title-post {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	/* 카드 안 제목 줄 — 제목은 맨 위 줄이 말하므로 숨기고, [버전] 고르기 · [사용법]만 남긴다. 둘 다 없으면 줄째 뺀다 */
	.rn-guide--post .rn-guide-post__title {
		display: none;
	}

	.rn-guide--post .rn-guide-post__head:not(:has(.mc_select, .rn-guide-tour-btn)) {
		display: none;
	}

	/* [버전] 고르기는 글 맨 위 — 검색칸 바로 아래 · '작성 샘플 미리보기' 위 (2026-10-22 사용자 '버전 선택 박스 위치 최선이야?').
	   버전을 바꾸면 샘플 · 본문 · 양식이 모두 바뀌는데, 종전에는 샘플과 본문 사이(본문 칸 머리)에 오른쪽으로 붙어 있어
	   본문만 고르는 칸처럼 보였고 샘플을 펼치면 한참 아래로 밀렸다. 맨 위 줄(글 제목) 바로 다음에 '버전 [ 2026년 개정판 ˅ ]' 한 줄.
	   마크업은 그대로 — 본문 칸(.rn-guide-post__body)을 display: contents 로 풀어 머리 줄을 글 묶음의 첫 항목으로 올린다.
	   본문 칸 안쪽 여백(16px)은 풀린 자식들이 나눠 갖는다. 버전이 없는 글은 종전 그대로(머리 줄째 숨김, 위 규칙) */
	.rn-guide--post .rn-guide-post:has(#move_guide_post) {
		display: flex;
		flex-direction: column;
	}

	.rn-guide--post .rn-guide-post:has(#move_guide_post) > .rn-guide-post__body {
		display: contents;
	}

	/* 미리보기 칸의 height: 100%(넓은 화면 두 칸 맞춤)가 세로 flex 에서는 글 묶음 높이를 따라가 접힌 머리 줄 아래가 비었다 — 내용만큼 */
	.rn-guide--post .rn-guide-post:has(#move_guide_post) > .rn-guide-post__preview {
		height: auto;
	}

	.rn-guide--post .rn-guide-post:has(#move_guide_post) .rn-guide-post__head {
		order: -1;
		margin: 0;
		padding: 0 var(--rn-space-4) var(--rn-space-3);
		border-bottom: 0;
	}

	.rn-guide--post .rn-guide-post__version {
		flex: none;
		margin-left: 0;
	}

	.rn-guide--post #move_guide_post {
		flex: 1 1 auto;
		min-width: 0;
	}

	.rn-guide--post .rn-guide-post:has(#move_guide_post) :is(.rn-guide-post__content, .rn-guide-post__lecture, .rn-guide-post__meta) {
		margin-inline: var(--rn-space-4);
	}

	.rn-guide--post .rn-guide-post:has(#move_guide_post) :is(.rn-guide-post__content, .rn-guide-post__lecture) {
		margin-top: var(--rn-space-4);
	}

	.rn-guide--post .rn-guide-post:has(#move_guide_post) .rn-guide-post__meta {
		margin-bottom: var(--rn-space-4);
	}

	/* [이전으로] — 맨 위 ✕ 가 같은 일을 하므로 뺀다. 제목 줄 버튼 묶음은 숨기고(제목 줄도 대개 숨는다),
	   아래 고정 버튼 줄에 [관련문의](폰 전용) · [자료 다운로드]만 남는다 */
	.rn-guide--post .rn-guide-post__prev,
	.rn-guide--post .rn-guide-post__head-actions {
		display: none;
	}

	.rn-guide--post .rn-guide-post__inquiry-m {
		display: inline-flex;
	}
}
/* ---------- 720px 이하 — 목록 · 상세 다듬기 (2026-10-14) ---------- */
@media (max-width: 720px) {
	/* 목록 — 업무 양식 제목은 두 줄까지, 게시물 키워드는 한 줄로 두고 넘치면 옆으로 민다 */
	.rn-guide-gallery__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.rn-guide-posts__body .rn-guide-tags {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rn-guide-posts__body .rn-guide-tags::-webkit-scrollbar {
		display: none;
	}

	.rn-guide-posts__body .rn-guide-tag {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* 상세 — 본문·강의를 상자 안에서 따로 스크롤하지 않고 페이지 하나로 스크롤한다(1023px 이하의 50dvh 상자를 푼다).
	   overflow 는 visible 이 아니라 clip — 스크롤 상자가 되지 않아 내용만큼 늘어나면서도, 안쪽 회색 줄('작성 샘플 미리보기' 머리 · 아래 줄)의
	   각진 모서리를 카드의 둥근 테두리(8px) 안으로 자른다. visible 이면 그 모서리가 둥근 테두리 밖으로 삐져나와
	   카드 위아래 양 끝이 흐릿하게 보였다 (2026-10-16 사용자 지적, 수급자 상세 #tab-sign-01 과 같은 방법) */
	.rn-guide--post .rn-guide__main {
		overflow: clip;
	}

	.rn-guide--post .rn-guide-post__content,
	.rn-guide--post .rn-guide-post__lecture {
		max-height: none;
		overflow: visible;
	}

	/* 상세 아래 버튼 줄([관련문의] · [다운로드] — [이전으로]는 이 폭에서 뺀다, 위 절) — 화면 아래에 고정해 긴 본문을 읽다가도 바로 누른다.
	   sticky 가 아니라 fixed 다 — 버튼 줄의 부모(.rn-guide-post__meta)가 본문 맨 끝이라 sticky 는 그 상자 안에서만 붙는다.
	   분류 서랍(z 40·50)보다 아래, 페이지 아래에는 그 높이만큼 여백을 둔다(마지막 내용이 가려지지 않게).
	   [다운로드] 메뉴는 위로 열린다(dropup) */
	.rn-guide--post {
		padding-bottom: calc(var(--rn-page-gutter) + 3.75rem);
	}

	/* 상세 '작성 샘플 미리보기' — 처음엔 접고 머리 줄을 누르면 펼친다(guide.js bindSampleFold — .is-foldable / .is-open) */
	/* 칸 자체 안쪽 여백(16px)은 머리 줄이 대신 갖는다 — 접힌 상태에서 여백이 두 겹이 되지 않게.
	   펼치면 아래 내용(큰 그림·썸네일)에만 좌우·아래 여백을 돌려준다 */
	.rn-guide-post__preview.is-foldable {
		gap: 0;
		padding: 0;
	}

	.rn-guide-post__preview.is-foldable.is-open {
		gap: var(--rn-space-2);
		padding: 0 var(--rn-space-4) var(--rn-space-4);
	}

	.rn-guide-post__preview.is-foldable:not(.is-open) > :not(.rn-guide-post__preview-label) {
		display: none;
	}

	.rn-guide-post__preview.is-foldable .rn-guide-post__preview-label {
		display: flex;
		align-items: center;
		gap: var(--rn-space-1);
		padding: var(--rn-space-3) var(--rn-space-4);
		color: var(--rn-color-text);
		font-weight: var(--rn-font-weight-semibold);
		cursor: pointer;
	}

	/* 펼친 상태 — 칸 좌우 여백 바깥까지 머리 줄을 넓혀 누르는 자리를 그대로 둔다 */
	.rn-guide-post__preview.is-foldable.is-open .rn-guide-post__preview-label {
		margin: 0 calc(-1 * var(--rn-space-4));
		padding-bottom: var(--rn-space-1);
	}

	/* 머리 줄의 개수 — '(3장)' · '(5건)' (guide.js bindFold) */
	.rn-guide-fold__count {
		color: var(--rn-color-text-muted);
		font-weight: var(--rn-font-weight-medium);
	}

	/* 펼침 표시 — 오른쪽 끝 아래 화살표(펼치면 위) */
	.rn-guide-post__preview.is-foldable .rn-guide-post__preview-label::after {
		content: "";
		width: 0.45rem;
		height: 0.45rem;
		margin-left: auto;
		border-right: 1.5px solid var(--rn-color-text-muted);
		border-bottom: 1.5px solid var(--rn-color-text-muted);
		transform: rotate(45deg) translateY(-0.12rem);
		transition: transform var(--rn-transition-fast);
	}

	.rn-guide-post__preview.is-foldable.is-open .rn-guide-post__preview-label::after {
		transform: rotate(225deg) translateY(-0.05rem);
	}

	/* 상세 '관련질문' — 처음부터 펼쳐 두고 제목 띠를 누르면 접는다(guide.js bindFold startOpen, 2026-10-19). 관리자 [질문등록]은 접기에서 빠진다 */
	.rn-guide--post .rn-guide-qna.is-foldable:not(.is-open) > :not(.rn-guide-section-title) {
		display: none;
	}

	.rn-guide--post .rn-guide-qna.is-foldable .rn-guide-section-title {
		justify-content: flex-start;
		gap: var(--rn-space-1);
		cursor: pointer;
	}

	.rn-guide--post .rn-guide-qna.is-foldable .rn-guide-section-title::after {
		content: "";
		flex: 0 0 auto;
		width: 0.45rem;
		height: 0.45rem;
		margin-left: auto;
		border-right: 1.5px solid var(--rn-color-text-muted);
		border-bottom: 1.5px solid var(--rn-color-text-muted);
		transform: rotate(45deg) translateY(-0.12rem);
		transition: transform var(--rn-transition-fast);
	}

	/* 관련질문 줄의 최소 높이(15rem — 넓은 화면 배너 칸 정사각)를 푼다. 남겨 두면 접어도 빈 칸이 15rem 남는다 */
	.rn-guide--post .rn-guide-post__bottom {
		min-height: 0;
	}

	/* 글이 화면보다 짧을 때 카드 남는 높이는 맨 아래 관련질문 줄이 받는다 — 위(미리보기 · 본문)는 내용만큼.
	   종전: 위 묶음(.rn-guide-post)이 늘어나 남는 높이가 접힌 '작성 샘플 미리보기' 줄로 몰려 머리 줄 아래가 휑하게 비었다 (2026-10-19 사용자 지적) */
	.rn-guide--post .rn-guide-post {
		flex: 0 0 auto;
	}

	.rn-guide--post .rn-guide-post__bottom {
		flex: 1 0 auto;
		align-content: start;
	}

	/* 관련질문 마지막 줄은 카드 아래 테두리가 대신한다 — 목록 아래 여백(8px)과 마지막 질문 밑줄을 빼서
	   밑줄 · 카드 테두리 두 줄이 겹쳐 보이지 않게 (2026-10-19 사용자 지적 '2줄 보이는 거 별로') */
	.rn-guide--post .rn-guide-qna__list {
		padding-bottom: 0;
	}

	.rn-guide--post .rn-guide-qna__list > li:last-child a {
		border-bottom: 0;
	}

	/* [질문등록](관리자)이 있으면 그 버튼이 오른쪽으로 밀고 화살표는 버튼 옆에 붙는다 */
	.rn-guide--post .rn-guide-qna.is-foldable .rn-guide-section-title:has(.qna-regist)::after {
		margin-left: var(--rn-space-2);
	}

	.rn-guide--post .rn-guide-qna.is-foldable.is-open .rn-guide-section-title::after {
		transform: rotate(225deg) translateY(-0.05rem);
	}

	/* 상세 아래 배너(관련 질문 옆 홍보 영역) — 이 폭에서는 뺀다 */
	.rn-guide--post .rn-guide-post__banner {
		display: none;
	}

	.rn-guide--post .rn-guide-post__fnb {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 30;
		margin: 0;
		padding: var(--rn-space-2) var(--rn-space-4) calc(var(--rn-space-2) + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--rn-color-border);
		background: var(--rn-color-bg);
		box-shadow: var(--rn-shadow-sm, 0 -1px 3px rgba(0, 0, 0, 0.08));
	}
}

/* 사이드바가 접히면 메뉴 열기 버튼(☰)이 오른쪽 위에 붙는다 — 툴바(분류 · 제목)가 그 아래로 들어가지 않게 오른쪽을 비운다.
   툴바가 화면 바깥 여백까지 넓어지므로(위 '폰 폭 — 페이지는 스크롤하지 않고' 절) 여백 18 + ☰ 36 + 8px (2026-10-16 종전 40px 단추 기준 60px)
   + 튜토리얼이 있는 화면(업무방법 · 평가해석)은 ☰ 왼쪽 [튜토리얼] 자리(tour.css --rn-tour-top-reserve) */
@media (max-width: 767px) {
	.rn-guide__toolbar {
		padding-right: calc(var(--rn-page-gutter) + var(--rn-btn-min-height) + var(--rn-space-2) + var(--rn-tour-top-reserve, 0px));
	}
}

/* ---------- 질답모음 — 폰 폭(≤720) 분류 칩 한 줄 (2026-10-16 사용자 지시) ----------
   질답모음은 첫 화면부터 질문 목록이 있어 업무방법처럼 '목록 먼저'로 나누지 않는다. [분류] 서랍 단추를 빼고,
   분류 링크(.rn-guide-faqnav)를 guide.js(bindFaqNavPlacement)가 검색 줄 위로 옮겨 칩 한 줄로 그린다(게시판 폰 화면처럼 하위 탭 → 검색칸 순서,
   같은 날 처음엔 검색 줄 아래였다) — 모양은 공통 하위 탭
   (segment.css .rn-board-subtabs: 회색 트랙 · 고른 칩은 흰 바탕 + 주황 글자). 넘치면 옆으로 밀고 끝이 흐려진다(tab_scroll.js).
   칩 모양은 클래스(--chips)에 걸어 둔다 — JS 가 이 폭에서만 붙이고 넓어지면 떼며 서랍 패널로 되돌린다 */
.rn-guide-faqnav.rn-guide-faqnav--chips {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.35rem;
	max-width: 100%;
	margin: 0 0 var(--rn-space-3);
	padding: 3px;
	border: 1px solid var(--rn-gray-30); /* #D8D8D8 — 하위 탭 트랙과 같다 */
	border-radius: var(--rn-radius-md);
	background: var(--rn-gray-10); /* #F0F0F0 */
	overflow-x: auto;
	overflow-y: hidden;
	box-sizing: border-box;
}

.rn-guide-faqnav--chips .rn-guide-faqnav__item {
	flex: 0 0 auto;
	justify-content: center;
	width: auto;
	min-height: 2rem;
	padding: 0 var(--rn-space-4);
	border: 0;
	border-radius: var(--rn-btn-radius-sm);
	background: transparent;
	color: var(--rn-gray-70); /* #555555 */
	font-size: var(--rn-font-size-sm);
	font-weight: var(--rn-font-weight-medium);
	white-space: nowrap;
}

.rn-guide-faqnav--chips .rn-guide-faqnav__item::after,
.rn-guide-faqnav--chips .rn-guide-faqnav__item:is(.is-active, .active)::before {
	display: none; /* 서랍 행의 › · 왼쪽 주황 띠는 칩에서 뺀다 */
}

.rn-guide-faqnav--chips .rn-guide-faqnav__item:hover {
	background: var(--rn-color-bg);
	color: var(--rn-gray-90);
}

.rn-guide-faqnav--chips .rn-guide-faqnav__item:is(.is-active, .active) {
	background: var(--rn-color-bg);
	color: var(--rn-color-brand);
	font-weight: var(--rn-font-weight-semibold);
	box-shadow: var(--rn-shadow-sm);
}

@media (max-width: 720px) {
	/* 질답모음은 서랍을 쓰지 않는다 — 단추 · 패널 · 가림막을 뺀다(분류는 위 칩 줄) */
	.rn-guide--faq .rn-guide__panel-btn,
	.rn-guide--faq .rn-guide__panel,
	.rn-guide--faq .rn-guide__panel-backdrop {
		display: none !important;
	}

	/* 칩 줄과 검색 줄 사이는 12px(위 칩 줄 아래 여백) — 검색 줄 아래(제목 '전체 N' 앞)는 20px */
	.rn-guide--faq .rn-guide-faq__toolbar {
		margin-bottom: var(--rn-space-5);
	}

	/* 제목 줄 — '분류명 · 전체 N' ··· [실시간 문의하기](guide.js bindFaqAskPlacement 가 옮겨 온다, 2026-10-16).
	   단추 높이(36px)에 맞춰 세로 가운데, 분류명이 길면 … 로 줄이고 단추는 오른쪽 끝에 그대로 */
	.rn-guide--faq .rn-guide-faq__head {
		align-items: center;
	}

	.rn-guide--faq .rn-guide-faq__title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rn-guide--faq .rn-guide-faq__total {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.rn-guide--faq .rn-guide-faq__head > .rn-guide-faq__toolbar-aside {
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
	}
}