/*
 * 이 글의 목차 — 스킨(글자·선·선택 표시)만. 사용가이드 상세(guide.jsp)와 망고소식 상세(notice.jsp)가 함께 싣는다.
 * Figma 인페이지 네비게이션: 사용가이드 상세 19596:56263(기둥) / 20460:56951(서랍), 망고소식 상세 20552:28826.
 * 두 화면의 새 값이 같아(2026-09-22) 한 벌로 뺐다. 이 파일을 고치면 두 화면이 함께 바뀐다.
 *
 * 여기 없는 것 — 각 화면 CSS 가 진다.
 *   자리: 기둥 위치·폭, position:sticky 와 top(var(--toc-top)), 최대 높이, 서랍일 때의 안쪽 여백
 *   배치 표시: --toc-mode (rail / drawer / inline). guideToc.js 가 이 값을 읽어 펼침 상태를 정하고,
 *             article.js 가 rail·drawer 에서 '목차' 제목을 눌러도 접히지 않게 막는다. 값이 없으면 inline 으로 읽어
 *             목차가 접힌 채 시작하므로, 목차를 띄우는 화면은 반드시 값을 준다.
 *
 * 마크업(guideToc.js 와의 약속, MangoBoard 관리자와 같은 동기화 사본이라 바꾸지 않는다):
 *   details.guide-toc > summary.toc-title + ul.toc-list > li.toc-item.toc-h{1,2,3}(.is-current) > a
 *
 * 깊이: 제목 단계로 정한다 — h1·h2 15, h3 30(현재 항목은 선 2px 만큼 1 줄여 14 / 29).
 *   사용가이드 상세는 levels [1,2,3](페이지 제목 h1 포함)이다. 시안 기둥 19596:56263 / 서랍 20460:56951 에서
 *   h1 뒤 h2(변형 19504:41226)는 h1 과 같은 15, h3(변형 19504:41406)만 30 이다.
 *   망고소식 상세는 기본 levels [2,3](noticeDetail.js 가 levels 를 넘기지 않는다)이라 h2 15 / h3 30 으로 같은 규칙에 맞는다.
 */
.guide-toc .toc-title {display:block;padding:0 15px 10px;font:400 14px/18px 'Pretendard',sans-serif;letter-spacing:-.01em;color:#AAACB0;list-style:none;cursor:default;}
.guide-toc .toc-title::-webkit-details-marker {display:none;}
/* 회색 세로선은 목록과 항목이 함께 긋는다. 항목 선이 목록 선 위에 겹쳐(margin-left -1) 현재 항목의 망고색 선과 같은 자리에 선다. */
.guide-toc .toc-list {margin:0;padding:0;list-style:none;border-left:1px solid #E6E7EA;}
.guide-toc .toc-item {margin:0;list-style:none;}
/* 항목 높이 34 = 글 15px × 1.5 (22.5) + 위아래 5.75. 줄이 넘치면 그만큼 자란다. */
.guide-toc .toc-item a {display:block;box-sizing:border-box;min-height:34px;margin:0 0 0 -1px;padding:5.75px 0 5.75px 15px;
	border-left:1px solid #E6E7EA;border-radius:0;font:400 15px/1.5 'Pretendard',sans-serif;letter-spacing:-.01em;color:#70777F;
	background:none;text-decoration:none;overflow-wrap:anywhere;transition:color .1s ease-out;}
/* 시안에 hover 변형이 없다. 누를 수 있다는 것만 글자색 한 단으로 알린다(배경은 두지 않는다). */
.guide-toc .toc-item a:hover {color:#3F4250;background:none;}
/* 지금 읽는 자리. 선이 2px 로 두꺼워지는 만큼 글 시작선이 움직이지 않게 padding 을 1 줄인다(16 = 2 + 14). */
.guide-toc .toc-item.is-current > a {padding-left:14px;color:#20232A;font-weight:500;border-left:2px solid #FEDE29;background:none;}
.guide-toc .toc-h3 > a {padding-left:30px;}
.guide-toc .toc-h3.is-current > a {padding-left:29px;}

@media (prefers-reduced-motion:reduce) {
	.guide-toc .toc-item a {transition:none;}
}