/* ════════════════════════════════════════════════════════════
	 휴비서 도움말 — 스타일 가이드 (역할별 구성 / 재사용 단위로 분리)
	 ① 토큰  ② 베이스  ③ 구조(STRUCTURE)  ④ 제목(TITLE)
	 ⑤ 내용(CONTENT)  ⑥ 공통 컴포넌트(COMPONENTS)  ⑦ 반응형  ⑧ 목업 전용
	 · 색·폰트는 운영 base.css 토큰값과 동일.
	 · ④~⑥은 페이지에 종속되지 않는 재사용 블록(누구나 가져다 사용).
════════════════════════════════════════════════════════════ */

/* ───────────── ① 토큰 (디자인 변수) ───────────── */
@font-face {
	font-family: 'SEBANG_Gothic';
	src: url('/res/home/css/font/SEBANG_Gothic_Regular.woff') format('woff');
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: 'SEBANG_Gothic';
	src: url('/res/home/css/font/SEBANG_Gothic_Bold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}
:root {
	--primary: #5867dd;
	--secondary: #e1e1ef;
	--success: #1dc9b7;
	--info: #5578eb;
	--warning: #ffb822;
	--danger: #fd397a;
	--text: #212529;
	--muted: #6c757d;
	--light: #f8f9fa;
	--border: #ebedf2;
	--hd-h: 64px;
	--sebang: 'SEBANG_Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
	--sans: 'Malgun Gothic', '맑은 고딕', -apple-system, sans-serif;
}

/* ───────────── ② 베이스 (리셋·바탕) ───────────── */
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	font-family: var(--sans);
	color: var(--text);
	background: #fff;
	font-size: 14px;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
}
a {
	color: var(--primary);
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}

/* ───────────── ③ 구조 (STRUCTURE) — 페이지 골격·영역 배치 ───────────── */
/* 헤더 영역 (높이·고정) */
.help__header {
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--hd-h);
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 28px;
	background: #fff;
	border-bottom: 1px solid var(--border);
}
/* 3단 그리드 (좌 트리 / 중앙 본문 / 우 TOC) */
.help__layout {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr) 232px;
	max-width: 1480px;
	margin: 0 auto;
}
/* 좌측 영역 */
.help__aside {
	border-right: 1px solid var(--border);
	height: calc(100vh - var(--hd-h));
	position: sticky;
	top: var(--hd-h);
	overflow-y: auto;
	padding: 18px 0 60px;
}

/* perfect-scrollbar 풍 얇은 스크롤바 (플랫폼 ps 톤: 4~6px / 투명 트랙 / 썸 #d8dce6) */
.help__aside, .help__toc {
	scrollbar-width: thin;
	scrollbar-color: #d8dce6 transparent;
}
	.help__aside::-webkit-scrollbar, .help__toc::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}
	.help__aside::-webkit-scrollbar-track, .help__toc::-webkit-scrollbar-track {
		background: transparent;
	}
	.help__aside::-webkit-scrollbar-thumb, .help__toc::-webkit-scrollbar-thumb {
		background: #d8dce6;
		border-radius: 4px;
	}
		.help__aside::-webkit-scrollbar-thumb:hover, .help__toc::-webkit-scrollbar-thumb:hover {
			background: #b9bed0;
		}
		.help__aside::-webkit-scrollbar-thumb:vertical {
			min-height: 40px;
		}
/* 페이지 전체 스크롤도 동일 톤으로 통일 */
html {
	scrollbar-width: thin;
	scrollbar-color: #d8dce6 transparent;
}
	body::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	body::-webkit-scrollbar-track {
		background: transparent;
	}
	body::-webkit-scrollbar-thumb {
		background: #d8dce6;
		border-radius: 5px;
	}
		body::-webkit-scrollbar-thumb:hover {
			background: #b9bed0;
		}
/* 중앙 영역 + 문서 전환 */
.help__main {
	padding: 34px 52px 80px;
	min-width: 0;
}
.doc {
	display: none;
}
	.doc.active {
		display: block;
		animation: fade .25s ease;
	}
@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.sec {
	scroll-margin-top: calc(var(--hd-h) + 16px);
	margin-bottom: 42px;
}
/* 우측 영역 */
.help__toc {
	padding: 34px 22px;
	height: calc(100vh - var(--hd-h));
	position: sticky;
	top: var(--hd-h);
}
	.help__toc.empty {
		display: none;
	}

/* ───────────── ④ 제목 (TITLE) — 타이포 ───────────── */
.help__logo .help__logo-text {   /* 로고 옆 '도움말' */
	font-family: var(--sebang);
	font-weight: 700;
	font-size: 18px;
	color: #1b1b2f;
	letter-spacing: -.3px;
}
.doc__title {   /* 문서 제목 */
	font-family: var(--sebang);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.35;
	letter-spacing: -.5px;
	color: #161629;
	margin: 0 0 14px;
}
.sec__title {   /* 섹션 제목 */
	font-family: var(--sebang);
	font-weight: 700;
	font-size: 21px;
	color: #1b1b2f;
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 18px;
}
	.sec__title .section-num {   /* 섹션 번호 뱃지 */
		flex: 0 0 28px;
		height: 28px;
		border-radius: 8px;
		background: var(--primary);
		color: #fff;
		font-size: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
.help__aside-title, .help__toc-title {   /* 좌측·우측 소제목 */
	font-size: 12px;
	font-weight: 700;
	color: #a2a5b9;
	letter-spacing: .5px;
}
	.help__aside .help__aside-title {
		padding: 6px 24px 12px;
	}
	.help__toc .help__toc-title {
		margin-bottom: 14px;
	}

/* ───────────── ⑤ 내용 (CONTENT) — 본문 텍스트 ───────────── */
.lead {   /* 리드문 */
	font-size: 15px;
	color: #4b4f5e;
	margin: 0 0 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--border);
}
.sec__text {   /* 본문 단락 */
	color: #4b4f5e;
	margin: 0 0 14px;
}
.breadcrumb {   /* 브레드크럼 */
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
	.breadcrumb__item {   /* 이동 경로 항목 */
		color: var(--muted);
	}
	.breadcrumb__sep {   /* 구분자 화살표 */
		font-size: 14px;
		color: #c4c6d6;
	}
	.breadcrumb__current {   /* 현재 위치 (마지막 항목) */
		color: #3f4254;
		font-weight: 600;
	}

/* ───────────── ⑥ 공통 컴포넌트 (COMPONENTS) — 재사용 블록 ───────────── */
/* [검색바] */
/* 검색창: 헤더 가운데 고정 폭 (늘어나지 않게) */
.help__search {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 360px;
}
	.help__search-icon {
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
		color: #a2a5b9;
		font-size: 18px;
	}
	.help__search #searchBtn {
		cursor: pointer;
	}
	.help__search-input {
		width: 100%;
		height: 42px;
		border: 1px solid #e2e5ec;
		border-radius: 22px;
		padding: 0 40px 0 42px;
		font-size: 13.5px;
		background: var(--light);
		outline: none;
		color: var(--text);
	}
		.help__search-input:focus {
			border-color: var(--primary);
			background: #fff;
			box-shadow: 0 0 0 3px rgba(88, 103, 221, .12);
		}
	.help__search .help__search-clear {   /* 검색어 지우기 × (left은 .help__search-icon 상속분 해제) */
		left: auto;
		right: 12px;
		display: none;
		cursor: pointer;
	}
		.help__search .help__search-clear.show {
			display: block;
		}
		.help__search .help__search-clear:hover {
			color: var(--danger);
		}
/* [로고] */
.help__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
	.help__logo-img {
		height: 26px;
		width: auto;
		display: block;
	}
	.help__logo .divider {
		width: 1px;
		height: 18px;
		background: #d8dae5;
	}
/* [버튼 - primary] */
.help__nav {
	margin-left: auto;
	display: flex;
	align-items: center;
}
	.help__nav .help__nav-btn {
		background: var(--primary);
		color: #fff;
		padding: 9px 18px;
		border-radius: 7px;
		font-weight: 600;
		font-size: 13.5px;
		display: flex;
		align-items: center;
		gap: 6px;
	}
		.help__nav .help__nav-btn:hover {
			background: #4453c6;
			text-decoration: none;
		}
/* [모바일 햄버거 토글 · 좌측 트리 드로어] */
.help__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-left: 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #fff;
	color: var(--text);
	font-size: 20px;
	cursor: pointer;
}
	.help__menu-toggle:hover {
		background: var(--light);
	}
.help__aside-overlay {
	display: none;
	position: fixed;
	inset: var(--hd-h) 0 0 0;
	background: rgba(0, 0, 0, .38);
	z-index: 39;
}
/* [카테고리 트리] */
.category > .category__head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 22px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	color: #3f4254;
	text-align: left;
}
	.category > .category__head:hover {
		background: #f7f8fc;
		color: var(--primary);
	}
	.category > .category__head .category__icon {
		font-size: 18px;
		color: #9a9cb5;
		width: 20px;
		text-align: center;
	}
	.category > .category__head .category__arrow {
		margin-left: auto;
		font-size: 16px;
		color: #b5b8cc;
		transition: transform .2s;
	}
		.category.open > .category__head .category__arrow {
			transform: rotate(180deg);
		}
/* 단일 링크(기업스페이스 설정·대시보드) 활성 표시 — 인라인 all:unset 이라 헤더에서 색을 내림 */
.category.single-link > .category__head:has(.category__link.active) {
	color: var(--primary);
	background: #f1f3fc;
	box-shadow: inset 3px 0 0 var(--primary);
}
	.category.single-link > .category__head:has(.category__link.active) .category__icon {
		color: var(--primary);
	}
.category__body {
	display: none;
	padding: 2px 0 8px;
}
	.category.open > .category__body {
		display: block;
	}
	.category__body .category__group {
		padding: 9px 24px 4px 52px;
		font-size: 11.5px;
		font-weight: 700;
		color: #b5b8cc;
	}
	.category__body .category__link {
		display: block;
		padding: 7px 24px 7px 52px;
		font-size: 13px;
		color: #595d6e;
		border-left: 3px solid transparent;
		cursor: pointer;
	}
		.category__body .category__link:hover {
			background: #f7f8fc;
			color: var(--primary);
			text-decoration: none;
		}
		.category__body .category__link.active {
			color: var(--primary);
			font-weight: 700;
			background: #f1f3fc;
			border-left-color: var(--primary);
		}
	.single-link .category__head .category__arrow {
		display: none;
	}
	.single-link .category__head .category__link {
		all: unset;
		cursor: pointer;
		flex: 1;
	}
/* [체크리스트] */
.check-list {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}
	.check-list__item {
		display: flex;
		align-items: flex-start;
		gap: 9px;
		padding: 9px 0;
		border-bottom: 1px dashed #eef0f5;
		font-size: 13.5px;
		line-height: 1.6;
	}
		.check-list__item:last-child {
			border-bottom: 0;
		}
	.check-list__icon {   /* 텍스트 첫 줄에 수직 정렬 */
		color: var(--success);
		font-size: 18px;
		line-height: 21.6px;
		flex: 0 0 auto;
	}
/* [문서 바로가기 버튼 - 다른 도움말 문서로 이동] */
.doc-jump {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 7px 14px;
	border: 1px solid var(--primary);
	border-radius: 8px;
	color: var(--primary);
	font-size: 13px;
	font-weight: 600;
	background: #fff;
	transition: .15s;
	cursor: pointer;
}
	.doc-jump:hover {
		background: var(--primary);
		color: #fff;
		text-decoration: none;
	}
	.doc-jump .doc-jump__icon {
		font-size: 15px;
	}

/* [단계 steps + 단계 제목 + 단축키 배지] */
.steps {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
}
	.steps__item {
		position: relative;
		padding: 0 0 26px 46px;
	}
		.steps__item::before {
			counter-increment: step;
			content: counter(step);
			position: absolute;
			left: 0;
			top: 0;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: #eef0fb;
			color: var(--primary);
			font-weight: 700;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.steps__item::after {
			content: '';
			position: absolute;
			left: 14px;
			top: 34px;
			bottom: 6px;
			width: 2px;
			background: #eef0f5;
		}
			.steps__item:last-child::after {
				display: none;
			}
	.steps .steps__title {
		font-weight: 700;
		font-size: 15px;
		color: #2b2b40;
		margin: 4px 0 8px;
	}
		.steps .steps__title .kbd {
			font-family: var(--sans);
			font-size: 11px;
			font-weight: 600;
			color: var(--muted);
			background: var(--light);
			border: 1px solid #e2e5ec;
			border-radius: 4px;
			padding: 2px 7px;
			margin-left: 6px;
		}
		.steps .steps__title .kbd--req {
			color: #fff;
			background: var(--danger);
			border-color: var(--danger);
		}
/* [본문 인라인 UI 아이콘 칩 (더보기 등 버튼 아이콘 표기)] */
.ui-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	color: var(--muted);
	background: var(--light);
	border: 1px solid #e2e5ec;
	border-radius: 50%;
}
	.ui-ico i {
		font-size: 14px;
		line-height: 1;
	}
/* [스크린샷 캡처 + 캡션] */
.shot {
	margin: 12px 0 6px;
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	background: #fbfbfd;
}
	.shot-img {
		display: block;
		width: 100%;
		height: auto;
		background: #fff;
	}
	.shot .shot-cap {
		padding: 9px 14px;
		font-size: 12px;
		color: var(--muted);
		border-top: 1px solid var(--border);
		background: #fff;
	}
		.shot .shot-cap b {
			color: var(--primary);
		}
/* [안내 박스 - 팁/주의] */
.note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 15px 17px;
	border-radius: 10px;
	margin: 18px 0;
	font-size: 13.5px;
	line-height: 1.6;
}
	.note .note__icon {   /* 아이콘 줄높이를 본문 첫 줄(13.5×1.6)에 맞춰 수직 정렬 */
		font-size: 18px;
		line-height: 21.6px;
		flex: 0 0 auto;
	}
	.note.tip {
		background: #eef6ff;
		border: 1px solid #d4e8fb;
		color: #2a4d6e;
	}
		.note.tip .note__icon {
			color: var(--info);
		}
	.note.warn {
		background: #fff7e9;
		border: 1px solid #ffe2b0;
		color: #7a5a14;
	}
		.note.warn .note__icon {
			color: #e8a200;
		}
/* [안내 박스 - 항목 구조] */
.note__body {
	flex: 1 1 auto;
	min-width: 0;
}
	.note__item {
		display: flex;
		align-items: flex-start;
		gap: 5px;
	}
		.note__item + .note__item {
			margin-top: 4px;
		}
		.note__item-title {
			flex: 0 0 auto;
			font-weight: 700;
		}
		.note__item-body {
			flex: 1 1 auto;
			min-width: 0;
		}
			.note__item-text {
				display: block;
				word-break: keep-all;
				overflow-wrap: break-word;
			}
	.note__item--head {
		margin-top: 3px;
	}
		.note__item--head:first-child {
			margin-top: 0;
		}
@media (max-width: 640px) {
	.note__item {
		flex-direction: column;
		gap: 1px;
	}
}
/* [이전/다음 이동] */
.pager {
	display: flex;
	gap: 14px;
	margin-top: 50px;
	padding-top: 26px;
	border-top: 1px solid var(--border);
}
	.pager__link {
		flex: 1;
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 15px 18px;
		color: #3f4254;
		display: flex;
		align-items: center;
		gap: 12px;
		transition: .15s;
		cursor: pointer;
	}
		.pager__link:hover {
			border-color: var(--primary);
			background: #f7f8fc;
			text-decoration: none;
		}
		.pager__link .pager__icon {
			font-size: 22px;
			color: #b5b8cc;
		}
		.pager__link.next {
			justify-content: flex-end;
			text-align: right;
		}
	.pager .pager__label {
		font-size: 11.5px;
		color: var(--muted);
		display: block;
	}
	.pager .pager__title {
		font-size: 14px;
		font-weight: 600;
	}
/* [목차(TOC) 리스트] */
.help__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--border);
}
	.help__toc-link {
		display: block;
		padding: 7px 0 7px 15px;
		margin-left: -2px;
		border-left: 2px solid transparent;
		font-size: 13px;
		color: #74788d;
		cursor: pointer;
	}
		.help__toc-link:hover {
			color: var(--primary);
			text-decoration: none;
		}
		.help__toc-link.active {
			color: var(--primary);
			font-weight: 700;
			border-left-color: var(--primary);
		}

/* [검색 결과 목록] */
.search-results {
	display: none;
}
	.search-results.active {
		display: block;
		animation: fade .25s ease;
	}
.search-results__head {
	font-family: var(--sebang);
	font-weight: 700;
	font-size: 22px;
	color: #161629;
	margin: 0 0 6px;
}
	.search-results__head .search-results__query {
		color: var(--primary);
	}
.search-results__sub {
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
}
.search-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.search-results__item {
	padding: 16px 2px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}
	.search-results__item:hover {
		background: #fafbff;
	}
.search-results__category {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 5px;
}
	.search-results__cat-icon {
		font-size: 13px;
		color: #c4c6d6;
	}
.search-results__title {
	font-family: var(--sebang);
	font-weight: 700;
	font-size: 16px;
	color: #1b1b2f;
}
	.search-results__item:hover .search-results__title {
		color: var(--primary);
	}
.search-results__snippet {
	font-size: 13.5px;
	color: #5b5f72;
	margin-top: 6px;
	line-height: 1.55;
}
.search-results__mark {
	background: #fff2a8;
	color: inherit;
	padding: 0 2px;
	border-radius: 3px;
	font-weight: 600;
}
.search-results__more {
	display: flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	margin: 24px auto 0;
	padding: 10px 22px;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: #fff;
	color: #3f4254;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: .15s;
}
	.search-results__more:hover {
		border-color: var(--primary);
		color: var(--primary);
		background: #f7f8fc;
		box-shadow: 0 2px 8px rgba(88, 103, 221, .12);
	}
	.search-results__more-icon {
		font-size: 17px;
	}
	.search-results__more .search-results__more-count {
		color: var(--muted);
		font-weight: 400;
	}
.search-results__empty {
	text-align: center;
	padding: 70px 20px;
	color: #a2a5b9;
}
	.search-results__empty-icon {
		font-size: 48px;
		display: block;
		margin-bottom: 14px;
	}
	.search-results__empty .search-results__empty-title {
		font-size: 16px;
		font-weight: 700;
		color: #74788d;
	}
	.search-results__empty .search-results__empty-desc {
		font-size: 13.5px;
		margin-top: 6px;
	}

/* ───────────── ⑦ 반응형 (RESPONSIVE) ───────────── */
@media (max-width: 1180px) {
	.help__layout {
		grid-template-columns: 248px minmax(0, 1fr);
	}
	.help__toc {
		display: none;
	}
}
@media (max-width: 820px) {
	.help__layout {
		grid-template-columns: 1fr;
	}
	.help__menu-toggle {
		display: inline-flex;
	}
	.help__nav-btn__more {
		display: none;
	}
	.help__aside {
		position: fixed;
		top: var(--hd-h);
		left: 0;
		bottom: 0;
		width: 280px;
		max-width: 84vw;
		height: auto;
		background: #fff;
		border-right: 1px solid var(--border);
		border-bottom: 0;
		z-index: 40;
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 2px 0 16px rgba(0, 0, 0, .08);
	}
		.help__aside.is-open {
			transform: translateX(0);
		}
	.help__aside-overlay.is-open {
		display: block;
	}
	.help__search {
		display: none;
	}
	.help__main {
		padding: 26px 20px 60px;
	}
}

/* ───────────── ⑧ 목업 전용 (운영 페이지엔 없음) ───────────── */
/* [캡처할 부분 안내 박스] — 실제 캡처 대신 어느 영역을 찍을지 표기 */
.capslot {
	margin: 12px 0 6px;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px 18px;
	border: 1px dashed #c3c7e6;
	border-radius: 10px;
	color: #7a7fa6;
	background: repeating-linear-gradient(45deg, #fafbff, #fafbff 11px, #f2f4fc 11px, #f2f4fc 22px);
}
	.capslot__icon {
		font-size: 26px;
		color: #a3a7e0;
		flex: 0 0 auto;
	}
	.capslot .capslot__title {
		font-size: 12px;
		font-weight: 700;
		color: #5b5f8a;
		letter-spacing: .2px;
	}
	.capslot .capslot__desc {
		font-size: 13px;
		color: #6f7397;
		margin-top: 2px;
	}
/* [문서 준비 중] */
.soon-box {
	text-align: center;
	padding: 80px 20px;
	color: #a2a5b9;
}
	.soon-box__icon {
		font-size: 52px;
		display: block;
		margin-bottom: 14px;
	}
	.soon-box .soon-box__title {
		font-size: 17px;
		font-weight: 700;
		color: #74788d;
	}
	.soon-box .soon-box__desc {
		font-size: 13.5px;
		margin-top: 6px;
	}