@charset "utf-8";

/* ==========================================================================
   게시판 본문 자동 목차
   - module/board/toc.lib.php 에서만 로드됩니다
   ========================================================================== */

.board_toc {
	margin: 24px 20px 0;
	padding: 20px 24px;
	background: #F5F7FA;
	border-left: #171C61 3px solid;
	border-radius: 0 4px 4px 0;
}

.board_toc_tit {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	line-height: 22px;
	margin-bottom: 12px;
}

.board_toc ul {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.board_toc li { position: relative; padding-left: 10px; }

.board_toc li:before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #9AA3BD;
}

.board_toc li.h3 { padding-left: 26px; }
.board_toc li.h3:before { left: 16px; background: #C2C8DA; }

.board_toc a {
	font-size: 15px;
	line-height: 24px;
	color: #2B3A67;
	text-decoration: none;
	word-break: keep-all;
}

.board_toc a:hover,
.board_toc a:focus-visible { color: #171C61; text-decoration: underline; }

.board_toc li.h3 a { font-size: 14px; color: #5A6480; }

/* 상단 고정 헤더에 제목이 가려지지 않도록 */
.board_in .con h2,
.board_in .con h3 { scroll-margin-top: 110px; }

@media all and (max-width: 767px) {
	.board_toc { margin: 18px 0 0; padding: 16px 18px; }
	.board_toc a { font-size: 14px; line-height: 22px; }
	.board_toc li.h3 a { font-size: 13px; }
	.board_in .con h2,
	.board_in .con h3 { scroll-margin-top: 80px; }
}

@media print {
	.board_toc { border-left-color: #999; background: transparent; }
}