/**
 * 리뉴얼 사용법 (/manual · /manual/content/{번호}) — 2026-10-19
 * 틀은 자료실 질답모음(guide.css .rn-guide--faq)을 그대로 쓴다: 왼쪽 분류 패널 · 검색 줄 · '분류명 · 전체 N' · 카드 목록.
 * 여기에는 사용법만 다른 것만 둔다 — 목록 카드가 링크(펼침 대신 상세로 간다) · 상세 글 · 메뉴 없는 새 창의 맨 위 줄.
 * 새 창으로만 열려 왼쪽 메뉴 · ☰ 가 없다(renewal_layout.php renewal_bare · sidebar.css .rn-body--bare).
 */

/* ---------- 맨 위 줄 — 메뉴 없는 창이라 ☰ 자리를 비우지 않는다 ----------
   guide.css 는 767px 이하에서 오른쪽에 ☰ 자리(18 + 36 + 8px)를 비운다 — 이 창에는 ☰ 가 없어 제목 줄이 한쪽으로 쏠려 보였다 */
@media (max-width: 767px) {
	.rn-body--bare .rn-manual .rn-guide__toolbar {
		padding-right: var(--rn-page-gutter);
	}
}

/* ---------- 검색창 · 맨 위 제목 줄 (2026-10-19 사용자 지시 — 검색창은 왼쪽 패널로, 제목은 검색창 자리로) ----------
   검색창은 패널 제목 아래(업무방법 패널과 같다 — guide.css .rn-guide__panel .rn-search 여백).
   1023px 이하는 guide.js 가 본문 맨 위로 옮긴다(.rn-guide__search--main), 720px 이하는 그 위에 분류 칩 줄(manual.js).
   본문 맨 위 줄은 '분류명 · 전체 N' ··· [원격 지원] [상담원 문의] — 단추 높이(36px)에 맞춰 세로 가운데 */
.rn-manual-search {
	flex: 0 0 auto;
	margin: 0;
}

.rn-manual__head {
	align-items: center;
	min-height: var(--rn-btn-min-height);
}

/* 단추 묶음은 어느 폭이든 제목 줄 오른쪽 끝 — guide.css 1023px 이하 규칙(검색 줄 아래 한 줄 · 폭 100%)을 덮는다 */
.rn-manual__head > .rn-guide-faq__toolbar-aside {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
}

/* 제목이 길면(검색 결과 '‘단어’ 검색 결과' 등) 단추를 밀지 않고 … 로 줄인다 */
.rn-manual__head > .rn-guide-faq__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

@media (max-width: 1023px) {
	/* 본문 맨 위로 온 검색창 — 아래 제목 줄까지 20px(본문 줄 간격 12 + 8, 질답모음 폰 화면 검색 줄 아래와 같다) */
	.rn-manual .rn-guide__search--main {
		margin-bottom: var(--rn-space-2);
	}
}

@media (max-width: 720px) {
	/* 분류 칩 줄 — 본문 줄 간격(12px)이 검색창과의 사이를 맡는다 */
	.rn-manual .rn-guide__main > .rn-guide-faqnav--chips {
		flex: 0 0 auto;
		margin-bottom: 0;
	}
}

/* ---------- 목록 카드 — 질답모음 질문 카드와 같은 모양, 누르면 상세로 ----------
   질문이 아니라 Q 마크는 두지 않고, 오른쪽에 조회 수와 › (상세로 간다는 표시) */
.rn-manual-item {
	color: var(--rn-color-text);
	text-decoration: none;
}

.rn-manual-item:hover,
.rn-manual-item:focus-visible {
	color: var(--rn-color-text);
	text-decoration: none;
}

.rn-manual-item__count {
	flex: 0 0 auto;
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-regular);
	white-space: nowrap;
}

.rn-manual-item__chevron {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: calc(-1 * var(--rn-space-1));
	color: var(--rn-color-text-subtle);
}

/* 폰 폭 — 조회 수를 제목 아래 줄로 내린다. 제목 옆에 두면 375px 에서 제목이 세 줄로 꺾였다. › 는 두 줄 가운데 */
@media (max-width: 720px) {
	.rn-manual-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--rn-space-3);
		row-gap: var(--rn-space-1);
		align-items: center;
	}

	.rn-manual-item .rn-guide-faq__que-text {
		grid-column: 1;
		grid-row: 1;
	}

	.rn-manual-item__count {
		grid-column: 1;
		grid-row: 2;
	}

	.rn-manual-item__chevron {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* ---------- 상세 ---------- */
/* 글 — 본문 카드 안에 상자 없이(카드 안 카드 금지). PC 는 글만 이 안에서 스크롤한다(검색 줄 · 제목 줄 · 아래 단추 줄은 그대로) */
.rn-manual-post {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
}

.rn-manual-post__head {
	flex: 0 0 auto;
	padding-bottom: var(--rn-space-4);
	border-bottom: 1px solid var(--rn-color-border);
}

.rn-manual-post__title {
	margin: 0;
	color: var(--rn-color-text-title);
	font-size: var(--rn-font-size-lg);
	font-weight: var(--rn-font-weight-bold);
	line-height: 1.35;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

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

/* 본문 글꼴 · 문단 · 그림 · 표는 질답모음 답변 본문(.rn-guide-faq__anw-body)과 같다 */
.rn-manual-post__body {
	flex: 0 0 auto;
	padding: var(--rn-space-5) 0;
}

/* 아래 단추 줄 — [목록](왼쪽) · 관리자 [글쓰기] · [수정](오른쪽). 자료실 상세 아래 단추 줄([이전으로] ··· [관련문의] [자료 다운로드])과 같은 자리.
   PC 는 글 밖(카드 맨 아래)에 있어 글을 아무리 내려도 늘 보인다 */
.rn-manual-post__foot {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-2);
	padding-top: var(--rn-space-4);
	border-top: 1px solid var(--rn-color-border);
}

.rn-manual-post__admin {
	display: inline-flex;
	gap: var(--rn-space-2);
	margin-left: auto;
}

/* PC — 질답모음 목록처럼 스크롤바 자리를 늘 비우고 그만큼 오른쪽 여백 쪽으로 넓혀, 글 오른쪽 끝을 위 [상담원 문의] 끝과 맞춘다 */
@media (min-width: 1024px) {
	.rn-manual-post {
		scrollbar-gutter: stable;
		margin-right: -10px;
		padding-right: 0;
	}
}

/* 1023px 이하는 화면 틀이 내용만큼 늘어난다(guide.css) — 글도 따로 스크롤하지 않고, 아래 단추 줄은 화면 아래에 붙인다.
   자료실 상세 폰 폭 아래 단추 줄(guide.css .rn-guide-post__fnb)과 같은 흰 띠 · 위 선 · 그림자. 메뉴 없는 창이라 창 폭 그대로 채운다.
   분류 서랍(z 40 · 50)보다 아래, 페이지 끝에는 띠 높이만큼 여백을 둬 마지막 줄이 가려지지 않게 한다 */
@media (max-width: 1023px) {
	.rn-manual-post {
		overflow: visible;
	}

	.rn-manual--post {
		padding-bottom: calc(var(--rn-page-gutter) + 3.75rem);
	}

	.rn-manual-post__foot {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 30;
		flex-wrap: nowrap;
		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));
	}
}