@charset "UTF-8";

/* ==========================================================================
   KRDS UI - 서브 화면 공용 크롬 (헤더 / 1뎁스 메뉴 / 통합검색 / SNB)
   --------------------------------------------------------------------------
   로딩순서 : base → jquery-ui → common → content → toastr → krds
              → krds-list.css → krds-chrome.css (최후순위)  ※ head.jsp 에서 로드

   시안     : design-ref/spcont_list.png (2배율. 이 파일의 수치는 전부 ÷2 한 값)

   ★ 적용 범위 경고
   --------------------------------------------------------------------------
   layout/header.jsp 와 munjung/snb.jsp 는 서브 화면 전체가 공유한다.
   즉 이 파일은 디렉토리 목록뿐 아니라 검색·상세 화면의 헤더/SNB 에도 적용된다.
   (뷰어는 header_viewer.jsp / krds-viewer.css 를 쓰므로 영향 없다)
   되돌리려면 head.jsp 의 이 파일 <link> 한 줄만 주석 처리하면 된다.

   ★ JS 하드코딩 수치와의 관계
   --------------------------------------------------------------------------
   header.jsp 의 resizeWindow() 가 아래 값들을 계산에 쓴다. 함께 유지/수정해야 한다.
     · #header 전체 높이            = 130px  → resizeWindow 의 HEADER_H
       (.header__top 26 + .header 104)
     · .header 안 1뎁스 메뉴(.gnb)  = 44px
     · .wrap__snb .snb__title 높이  = 44px  → resizeWindow 의 SNB_TITLE_H
                                              (시안 반영으로 80 → 44)
     · SNB 메뉴 블록 높이           = 204px → (SNB_TITLE_H+1)+204+20+5 의 204
                                              [항목 padding 15px/글자 15px 유지]
     · SNB 폭                       = 200px → 아래 [4-0] 절
                                              (시안 반영으로 240 → 200)

   ※ SNB 폭·제목 높이는 검색 화면의 멀티필터 패널(.snb__filter) 높이 계산에도
     물려 있다. [4-0] 절과 resizeWindow() 를 항상 짝으로 고칠 것.

   [목차]
     [1] 헤더 셸 (높이 재배치)
     [2] 1뎁스 메뉴 (네이비 바)
     [3] 통합검색 바
     [4] 2뎁스 메뉴 (SNB)
     [5] 접근성
   ========================================================================== */

/* 스크린리더 전용 (header.jsp 의 label 에 사용) */
.krds-blind{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   [1] 헤더 셸
   --------------------------------------------------------------------------
   시안 : 흰 줄(로고 + 검색) 60px / 네이비 1뎁스 메뉴 44px
   기존 : #header 160 = .header__top 30 + .header 130 (그중 .gnb 46)

   글로벌바(.header__top)는 시안에 없지만 지우지 않았다.
   한국학호남진흥원 / 열린자료도서검색 / 공지사항 링크 3개가 사라지는
   기능 축소이기 때문이다. 대신 26px 로 슬림하게 줄였다.
   완전히 없애려면 .header__top{display:none} 한 줄이면 된다.
   ========================================================================== */
#header{
	height: 130px;			/* .header__top 26 + .header 104 = 130 (빈틈 없음) */
	min-width: 915px;
}

#header .header__top{
	height: 26px;
}

#header .header__top ul.global li a{
	height: 26px;
	line-height: 25px;
	font-size: 12px;
}

#header .header__top ul.info{
	top: 1px;
	right: 30px;
}

#header .header__top ul.info li a{
	font-size: 12px;
	line-height: 24px;
}

/* 로고·검색 60px + 메뉴 44px = 104px */
#header .header{
	position: relative;
	height: 104px;
}

/* 시안 실측 : 로고 166x36, 좌측 24px, 흰 줄(60px) 안에서 수직 중앙 */
#header .header .sta{
	position: absolute;
	top: 12px;
	left: 24px;
}

#header .header .sta img{
	display: block;
	height: 36px;
	width: auto;
}


/* ==========================================================================
   [2] 1뎁스 메뉴 — 네이비 바
   --------------------------------------------------------------------------
   .gnb 는 원래부터 헤더 하단의 전체폭 바(position:absolute; bottom:0)라
   구조를 바꿀 필요가 없다. krds.css 가 흰 배경으로 바꿔 놓은 것을
   시안 색으로 되돌리고 높이·타이포만 맞춘다.

   시안 실측 (2026-09-01 재측) : 바 44px / 글자 14px
   ★ 배경이 **2톤**이다.
     · 앞 4개(고서/고문서/문집/일기)      → 진한 네이비 #1b2d52
     · 뒤 4개(서원향교지/누정/향약/금석문) → 밝은 네이비 #3a5a8c
     · 활성 항목                                 → #394868 (두 그룹 공통)
   밝은 톤은 마지막 항목 오른쪽 빈 영역까지 바 끝까지 이어진다.
   → .gnb 자체를 밝은 톤으로 칠하고 앞 4개 li 만 진한 톤으로 덮는다.

   2차에는 "항목 폭이 가변이라 경계가 항목 중간에 걸린다"고 보고 끌었는데,
   실측해보니 경계(x=400≈402)가 **4번째 항목 오른쪽 끝(397.9)** 과 일치한다.
   고정 픽셀이 아니라 그룹 경계였다.
   ========================================================================== */
#header .header .gnb{
	height: 44px;
	background: #3a5a8c;			/* 뒤 4개 + 나머지 영역 */
	box-shadow: none;
}

#header .header .gnb ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	height: 44px;
	padding: 0;						/* 시안 : 첫 항목 셀이 x=0 에서 시작 */
	list-style: none;
}

/* ★ :nth-child(n) 이 필요한 이유
   content.css:60~ 이 `#header .header .gnb ul li:nth-child(1){width:18%}` ...
   형태로 항목 폭을 18% 씩 고정해 둔다. 특이도가 (1,3,2) 라
   `#header .header .gnb ul li`(1,2,2) 로는 못 이긴다.
   :nth-child(n) 을 붙여 (1,3,2) 로 맞추면 나중에 로드되는 이 파일이 이긴다.
   (:nth-child(n) 은 모든 자식에 매칭된다) */
#header .header .gnb ul li,
#header .header .gnb ul li:nth-child(n){
	float: none;
	width: auto;
	background: transparent;
}

/* ★ 2톤 배경 — 앞 4개만 진한 네이비.
   뒤 4개는 transparent 로 두어 .gnb 의 #3a5a8c 가 그대로 보이게 한다.
   위 :nth-child(n) 규칙과 특이도가 같으므로(1,3,2) 반드시 그 뒤에 와야 한다.
   content.css:68/:70 의 nth-child(5)/(6){background:#001a6f} 도 같은 방식으로 이긴다. */
#header .header .gnb ul li:nth-child(-n+4){
	background: #1b2d52;
}

/* 시안은 뒤 4개의 좌우 여백이 앞 4개보다 약 3px 씨 좁다.
   (글자 잉크 폭은 양쪽이 같으므로 폰트 크기 차이가 아니라 여백 차이다.
    중심간거리 3개가 모두 P=32.3 으로 0.6px 이내에서 맞는다)
   36px 로 통일하면 마지막 항목(금석문)이 시안보다 19px 오른쪽으로 밀린다.
   33px 일 때 8개 항목 전부 시안 대비 5px 이내로 들어온다. */
#header .header .gnb ul li:nth-child(n+5) a{
	padding: 0 33px;
}

#header .header .gnb ul li a{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 44px;
	padding: 0 36px;			/* 시안 실측 : 2글자 셀 폭 97px = 글자폭 24.4 + 좌우 36 */
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	/* 시안은 불투명도 0.72(진한 바) / 0.65(밝은 바) 로 측정되지만,
	   밝은 바 위에서 0.65 는 대비 4.02:1 로 WCAG AA(4.5:1) 미달이라
	   두 그룹 공통 0.78 로 올렸다(밝은 바 5.0:1 / 진한 바 8.9:1). */
	color: rgba(255,255,255,.78);
	white-space: nowrap;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

/* krds.css 가 하단에 파란 인디케이터(:after)를 그리므로 끈다.
   시안은 항목 전체를 밝은 네이비로 칠하는 방식이다. */
#header .header .gnb ul li a:after{
	display: none;
	content: none;
}

#header .header .gnb ul li a:hover{
	background: #2b3a5c;
	color: #fff;
	text-decoration: none;
}

/* 밝은 톤 그룹은 같은 호버색을 쓰면 오히려 어두워져서 따로 준다. */
#header .header .gnb ul li:nth-child(n+5) a:hover{
	background: #45699f;
}

/* 시안 실측 : 활성 항목 배경 #394868 */
#header .header .gnb ul li a.active,
#header .header .gnb ul li a.selected{
	background: #394868;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

#header .header .gnb ul li a:focus-visible{
	outline: var(--krds-focus-width) solid #fff;
	outline-offset: -4px;
}


/* ==========================================================================
   [3] 통합검색 바
   --------------------------------------------------------------------------
   시안 실측 : 입력창 500x38, 모서리 6px, 테두리 #d0d5dd,
               오른쪽 안쪽에 돋보기, 그 바깥에 정사각 문자입력기 버튼(38x38)
               우측 여백 24px, 흰 줄(60px) 안에서 수직 중앙

   DOM 순서는 input → a.btn--word → button.btn--search 로 고정이므로
   (search.js 의존) position 으로 자리만 잡는다.
     .btn--search → 입력창 안쪽 오른쪽 (돋보기)
     .btn--word   → 입력창 바깥 오른쪽 (문자입력기)
   ========================================================================== */
#header .header .search{
	position: absolute;
	top: 11px;
	right: 24px;
	left: auto;
	width: 546px;			/* 입력창 500 + 간격 8 + 문자입력기 38 */
	height: 38px;
	padding: 0 46px 0 0;
	background: none;
}

#header .header .search input{
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 0 42px 0 14px;
	border: 1px solid #d0d5dd;
	border-radius: var(--krds-radius-m);
	background: var(--krds-bg-surface);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--krds-text-default);
	box-sizing: border-box;
}

#header .header .search input::-webkit-input-placeholder{ color: #99a1af; }
#header .header .search input::-moz-placeholder{ color: #99a1af; opacity: 1; }
#header .header .search input:-ms-input-placeholder{ color: #99a1af; }
#header .header .search input::placeholder{ color: #99a1af; }

#header .header .search input:hover{
	border-color: #8a949e;
}

#header .header .search input:focus{
	border-color: var(--krds-focus);
	outline: none;
	box-shadow: 0 0 0 2px rgba(37,110,244,.18);
}

/* --- 돋보기 : 입력창 안쪽 오른쪽. 이미지 자산 없이 CSS 로 그린다 --- */
#header .header .search .btn--search{
	position: absolute;
	top: 0;
	right: 46px;			/* 문자입력기(38) + 간격(8) 만큼 안쪽으로 */
	width: 40px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 var(--krds-radius-m) var(--krds-radius-m) 0;
	background: transparent;
	font-size: 0;
	text-indent: -999em;
	overflow: hidden;
	cursor: pointer;
}

#header .header .search .btn--search:before{
	content: "";
	position: absolute;
	top: 12px; left: 12px;
	width: 12px; height: 12px;
	border: 1.7px solid #4a5565;
	border-radius: 50%;
}

#header .header .search .btn--search:after{
	content: "";
	position: absolute;
	top: 24px; left: 23px;
	width: 7px; height: 1.7px;
	background: #4a5565;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

#header .header .search .btn--search:hover:before{ border-color: #1b2d52; }
#header .header .search .btn--search:hover:after{ background: #1b2d52; }

/* --- 문자입력기 : 입력창 바깥 정사각 버튼 --- */
#header .header .search .btn--word{
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 38px;
	margin: 0;
	border: 1px solid #d0d5dd;
	border-radius: var(--krds-radius-m);
	background: var(--krds-bg-surface);
	font-size: 0;
	text-indent: -999em;
	overflow: hidden;
}

/* 키보드 아이콘 (테두리 + 점 3개 + 스페이스바) */
#header .header .search .btn--word:before{
	content: "";
	position: absolute;
	top: 12px; left: 9px;
	width: 20px; height: 14px;
	border: 1.4px solid #4a5565;
	border-radius: 2px;
}

#header .header .search .btn--word:after{
	content: "";
	position: absolute;
	top: 16px; left: 12px;
	width: 2px; height: 2px;
	background: #4a5565;
	box-shadow: 4.5px 0 0 #4a5565, 9px 0 0 #4a5565,
	            2px 4.5px 0 #4a5565, 6.5px 4.5px 0 #4a5565;
}

#header .header .search .btn--word:hover{
	border-color: #8a949e;
	background: #f4f5f6;
}


/* ==========================================================================
   [4] 2뎁스 메뉴 (SNB)
   --------------------------------------------------------------------------
   시안 실측 : 제목 "카테고리" 좌측정렬 볼드 / 그룹 행에 접힘 화살표 /
               트리 항목에 [+] [−] 사각 토글 / 전체적으로 밝고 얇은 톤

   ※ 폭 240px, 제목 높이 80px, 메뉴 블록 204px 은 유지한다(파일 상단 주석 참고).
     krds.css 가 제목에 bg-snb.png + 그라데이션 + 하단 파란 3px 를 넣어
     시안보다 무겁다. 시안처럼 흰 배경 + 얇은 구분선으로 바꾼다.
   ========================================================================== */
/* --------------------------------------------------------------------------
   [4-0] SNB 폭 240px → 200px, 제목 높이 80px → 44px  (시안 실측)
   --------------------------------------------------------------------------
   이 두 값은 여러 곳에 흩어져 있어 한꺼번에 맞춰야 한다.
   아래는 content.css 의 해당 규칙들을 같은 특이도로 덮어쓴 것이다.
   (같은 특이도면 나중에 로드되는 이 파일이 이긴다)

     content.css:91   #container{padding-left:240px; 배경선 399px}
     content.css:94   #container .body_tree_toggle{left:240px}
     content.css:104  #container.opened{padding-left:360px}
     content.css:105  #container.opened .body_tree_toggle{left:360px}
     content.css:108  #container.opened .wrap__snb{width/left/margin 360px}
     content.css:110  .wrap__snb{width/left/margin 240px}
     content.css:112  .wrap__snb .snb__title{height:80px; line-height:79px}

   ★ header.jsp 의 resizeWindow() 도 함께 고쳤다.
     (81+204+20+5) 의 81  = 제목 80+1  →  45  (제목 44+1)
     winH-HEADER_H-80-... 의 80 = 제목 높이 →  44

   ★ 펼친 상태(.opened)는 기존 360px = 기본 240 + 120 이었다.
     같은 델타를 유지해 200 + 120 = 320px 로 맞췄다.

   ★ 배경 세로선(bg_body_line.png, 1x1 #d0d0d2 를 repeat-y)은
     399px 에 있었다. SNB 가 40px 줄어든 만큼 359px 로 함께 옮긴다.
   -------------------------------------------------------------------------- */
#container{
	padding: 0 0 0 200px;
	background: #f5f6f8 url('../images/bg_body_line.png') repeat-y 359px top;
}

#container .body_tree_toggle{
	left: 200px;
}

#container.closed{
	padding: 0;
}

#container.closed .body_tree_toggle{
	left: 0;
}

#container.opened{
	padding: 0 0 0 320px;
}

#container.opened .body_tree_toggle{
	left: 320px;
}

#container.opened .wrap__snb{
	width: 320px;
	left: -320px;
	margin-right: -320px;
}

.wrap__snb{
	width: 200px;
	left: -200px;
	margin-right: -200px;
	background: var(--krds-bg-surface);
}

/* 폭이 40px 줄었으므로 트리에 쓸 수 있는 가로 공간을 좌우 패딩에서 되찾는다.
   (200 - nav 8*2 - simpleTree 6*2 = 172px 가 트리 실사용 폭) */
.wrap__snb nav > ul{
	padding: 0 8px;
}

.wrap__snb .snb__title{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 44px;			/* 시안 실측 (기존 80px) */
	padding: 0 16px;
	background: var(--krds-bg-surface);
	border-bottom: 1px solid #e0e0e0;
	box-shadow: none;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	color: #1a1a1a;
	text-align: left;
	letter-spacing: -0.02em;
}

.wrap__snb nav > ul{
	padding: 0;
}

.wrap__snb nav > ul > li{
	border: 0;
	background: none;
}

/* --- 상위 뎁스 그룹 행 (자료유형 / 소장처 / 지역 / 시기 / 왕대) ---
   시안 실측
     · 배경 흰색 (기존 content.css #f5f6f8, krds.css 는 open 시 파란 배경)
     · 접힌 행 높이 33px, 하단 구분선 #e5e7eb
     · 펼친 행은 하단 구분선이 없다 (트리와 이어져 보인다)
     · 파란 좌측 막대 없음 (krds.css:462 의 border-left:3px 를 끈다)
     · 우측에 꺾쇠. 기존 bullet-snb-off.png 배경 이미지는 제거한다.

   ★ 행 높이를 40.8px → 33px 로 줄였다.
     resizeWindow() 가 쓰던 상수 204(=메뉴 블록 높이)는 이 값에 의존하므로
     하드코딩을 버리고 실측($(".wrap__snb > nav > ul").outerHeight())으로 바꿨다.
     검색 화면(search/snb.jsp)도 같은 구조를 쓰기 때문에 반드시 짝으로 처리해야 한다. */
.wrap__snb nav > ul > li > a{
	position: relative;
	display: block;
	padding: 5px 34px 5px 16px;
	min-height: 33px;
	box-sizing: border-box;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: #333d4b;
	background-color: #fff;
	background-image: none;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	cursor: pointer;
}

/* 접힘 표시 : 기존 화살표 이미지를 CSS 꺾쇠로 바꾼다 */
#header ~ #container .wrap__snb nav > ul > li > a:after,
.wrap__snb nav > ul > li > a:after{
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;			/* 시안 실측 */
	width: 7px; height: 7px;
	margin-top: -5px;
	border-top: 1.5px solid #8a949e;
	border-right: 1.5px solid #8a949e;
	background: none;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

/* 펼침 표시 : 꺾쇠를 위로 뒤집는다.
   ★ 위 규칙에 `#header ~ #container ...`(아이디 2개 = 특이도 2,1,5)가
   끌려 있어서 클래스만으로는 rotate(135deg) 를 못 이긴다.
   (그래서 펼쳐도 꺾쇠가 그대로 아래를 보고 있었다)
   같은 접두사를 붙인 셀렉터를 함께 적는다. */
#header ~ #container .wrap__snb nav > ul > li.open > a:after,
.wrap__snb nav > ul > li.open > a:after{
	margin-top: -1px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.wrap__snb nav > ul > li > a:hover{
	background-color: #f7f8fa;
	background-image: none;		/* content.css hover 의 bullet-snb-on.png 제거 */
	color: #1b2d52;
	text-decoration: none;
}

/* 펼친 그룹 : 배경·글자만 강조하고 구분선과 좌측 막대는 없앤다.
   krds.css:462 는 padding-left:17px + border-left:3px 로 파란 막대를 세우는데
   시안엔 없으므로 padding 을 원래대로 돌리고 막대를 끈다. */
.wrap__snb nav > ul > li.open > a{
	padding-left: 16px;
	background-color: #fff;
	/* ★ background-image 를 반드시 함께 끈다.
	   content.css 는 li.open > a 에 shorthand 로
	   `background: #f5f6f8 url(bullet-snb-on.png) ...` 를 지정한다.
	   background-color 만 덮으면 그 url(빨간 원형 화살표)이 그대로 남는다.
	   꺾쇠는 아래 :after 로 그리므로 이미지는 필요 없다. */
	background-image: none;
	color: #1b2d52;
	font-weight: 700;
	border-left: 0;
	border-bottom: 0;
}

/* 트리 영역 : 그룹 행과 이어지고, 블록 끝에만 구분선을 둔다(시안) */
.wrap__snb nav > ul > li > ul{
	padding: 0;
	background: var(--krds-bg-surface);
	border-top: 0;
	border-bottom: 1px solid #e5e7eb;
}


/* --------------------------------------------------------------------------
   [4-1] 메뉴 트리 (jquery.simple.tree) — 시안대로 재작성
   --------------------------------------------------------------------------
   시안 : 각 항목 왼쪽에 [+] / [−] 사각 토글, 연결선 없음, 자식은 들여쓰기.

   런타임 DOM (simpleTree JS 가 만든다. 서버는 <li><span>만 내려준다)
     <li class="folder-close|folder-open|doc (+ -last)" data-dataId data-url>
       <img class="trigger" src="spacer.gif" style="float:left">
       <span title="...">이름</span>
       <ul>…</ul>
     </li>
   아이콘은 li 의 background-image (expandable.gif / collapsable.gif / leaf.gif)로
   그려지고 margin-left:-16px 로 위치를 잡는다.

   ★ 특이도 주의
   simpleTree.css 와 snb.jsp 의 인라인 <style> 은 둘 다 문서상 이 파일보다
   "뒤에" 온다(둘 다 사이드바 타일 안에서 로드됨). 따라서 로딩 순서로는 못 이긴다.
   simpleTree.css 는 `.V1.V2.V3.simpleTree li`(0,4,1) 형태이므로
   앞에 `.wrap__snb` 를 붙여 (0,5,1) 이상으로 올려야 이긴다.

   ★ line-height 를 바꿔도 되는 이유
   원래 li 의 line-height:16px 는 연결선·폴더아이콘 배경이 -16px 오프셋으로
   정렬되기 때문에 고정이었다. 아래에서 그 배경들을 전부 제거하므로
   더 이상 16px 에 묶일 필요가 없다.
   -------------------------------------------------------------------------- */

/* 트리 루트 컨테이너
   ★ overflow-x 를 hidden 으로 막는다.
     원래 overflow:auto 라 트리를 깊게 펼치면 들여쓰기가 누적돼
     가로 스크롤바가 생겼다. 세로 스크롤(resizeWindow 의 max-height)은
     계속 필요하므로 y 축만 auto 로 둔다. */
.wrap__snb ul.V1.V2.V3.simpleTree{
	margin: 0;
	padding: 6px 6px 10px;
	overflow-x: hidden;
	overflow-y: auto;
}

/* 루트 li 의 음수 마진 제거 (simpleTree.css -16px / snb.jsp -20px) */
.wrap__snb .V1.V2.V3.simpleTree .root{
	margin-left: 0;
	padding-left: 0;
	background: none;
}

/* 항목 : 아이콘 자리를 padding 으로 확보하고 배경 아이콘은 제거 */
.wrap__snb .V1.V2.V3.simpleTree li{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 5px 0 5px 16px;		/* 토글박스 12 + 간격 4. 세로 5px 는 유지 */
	line-height: 1.5;
	font-size: 14px;
	font-weight: normal;
	background: none;
	border-bottom: none;
}

/* 자식 목록 들여쓰기 (가로 방향)
   ★ 레벨당 실제 들여쓰기 = li 의 padding-left(16) + 이 값(0) = 16px.
     자식의 [+] 박스가 부모 글자 시작선에 정확히 맞물린다.

     변경 이력 : 34px(20+14) → 24px(18+6) → 16px(16+0)
     34px 일 때는 4~5단만 펼쳐도 SNB 폭을 넘어 가로 스크롤이 생겼다.
     16px 이면 200px SNB 에서 8단까지 여유가 있다.
     ※ 세로 간격은 li 의 padding 5px 0 이며 여기서 건드리지 않는다. */
.wrap__snb .V1.V2.V3.simpleTree ul{
	margin: 0;
	padding: 0;
}

/* --- [+] / [−] 사각 토글 ---
   박스 하나(::before)에 배경 그라데이션 2장으로 +/− 를 그린다.
   (가상요소가 2개뿐이라 박스+가로줄+세로줄을 따로 만들 수 없다) */
.wrap__snb .V1.V2.V3.simpleTree li.folder-close:before,
.wrap__snb .V1.V2.V3.simpleTree li.folder-close-last:before,
.wrap__snb .V1.V2.V3.simpleTree li.folder-open:before,
.wrap__snb .V1.V2.V3.simpleTree li.folder-open-last:before{
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 12px;
	height: 12px;
	border: 1px solid #8a949e;		/* 시안 실측 */
	background-color: var(--krds-bg-surface);
	background-repeat: no-repeat;
	box-sizing: border-box;
}

/* 닫힘 = + (가로 + 세로) */
.wrap__snb .V1.V2.V3.simpleTree li.folder-close:before,
.wrap__snb .V1.V2.V3.simpleTree li.folder-close-last:before{
	background-image:
		linear-gradient(#4e5968, #4e5968),
		linear-gradient(#4e5968, #4e5968);
	background-size: 7px 1px, 1px 7px;
	background-position: center center, center center;
}

/* 열림 = − (가로만) */
.wrap__snb .V1.V2.V3.simpleTree li.folder-open:before,
.wrap__snb .V1.V2.V3.simpleTree li.folder-open-last:before{
	background-image: linear-gradient(#4e5968, #4e5968);
	background-size: 7px 1px;
	background-position: center center;
}

/* 잎 노드(doc) : 펼칠 수 없으므로 박스를 그리지 않는다 */
.wrap__snb .V1.V2.V3.simpleTree li.doc,
.wrap__snb .V1.V2.V3.simpleTree li.doc-last{
	background: none;
}

/* --- 토글 클릭 영역 ---
   JS 가 인라인으로 float:left 를 넣지만, 절대배치하면 float 는 무시된다.
   박스 위에 정확히 겹쳐 놓아 [+] 를 눌러 접고 펼칠 수 있게 한다. */
.wrap__snb .V1.V2.V3.simpleTree li > img.trigger,
.wrap__snb .V1.V2.V3.simpleTree .trigger{
	position: absolute;
	top: 7px;
	left: -2px;
	width: 17px;
	height: 17px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	z-index: 1;
}

/* --- 연결선 제거 (시안에 없음) --- */
.wrap__snb .V1.V2.V3.simpleTree .line,
.wrap__snb .V1.V2.V3.simpleTree .line-last,
.wrap__snb .V1.V2.V3.simpleTree .line-over,
.wrap__snb .V1.V2.V3.simpleTree .line-over-last{
	display: none;
	margin: 0;
	height: 0;
	background: none;
}

/* --- 항목 텍스트 --- */
.wrap__snb .V1.V2.V3.simpleTree li > span{
	display: inline-block;
	margin-left: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #364153;			/* 시안 실측 */
	white-space: normal;
	/* ★ keep-all 을 쓰면 안 된다.
	   한글 덩어리를 한 단어로 묶어버려서, 좁은 사이드바에서 긴 항목명이
	   줄바꿈되지 못하고 그대로 넘친다(overflow-x:hidden 이라 잘려 안 보인다).
	   기본값 normal 은 한글을 음절 단위로 줄바꿈하므로 좁은 폭에 적합하다. */
	word-break: normal;
	overflow-wrap: break-word;	/* 띄어쓰기 없는 라틴 문자열 대비 */
	word-wrap: break-word;
	cursor: pointer;
}

.wrap__snb .V1.V2.V3.simpleTree li > span:hover{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* simpleTree.css 의 .text:hover 는 테두리를 넣어 줄이 흔들린다 */
.wrap__snb .V1.V2.V3.simpleTree .text:hover{
	border: 0;
	background-color: transparent;
}

/* 현재 선택 노드
   시안 실측 #8b1a1a (진한 붉은색) 볼드. 밑줄은 없다.
   simpleTree.css 기본값은 #c20515 + underline 이었다. */
.wrap__snb .V1.V2.V3.simpleTree .active,
.wrap__snb .V1.V2.V3.simpleTree li > span.active{
	padding: 0;
	color: #8b1a1a;
	font-weight: 700;
	text-decoration: none;
}

/* 안내 문구 노드(자료 없음 / ajax 오류) */
.wrap__snb .V1.V2.V3.simpleTree li[data-tree-status='comment']{
	padding-left: 0;
}

.wrap__snb .V1.V2.V3.simpleTree li[data-tree-status='comment'] span{
	color: #8a949e;
	cursor: default;
}

/* --- 제공서비스(국역/표점) 그룹 ---
   3차부터 카테고리와 같은 트리 그룹이라 위 `nav > ul > li > a`
   규칙을 그대로 쓴다. 별도 색·패딩 지정 없음.
   시안은 마지막 그룹 아래에도 구분선이 있어 그것만 맞췔 둔다. --- */
.wrap__snb nav > ul.kl-snb__svc__list{
	border-bottom: 1px solid #e5e7eb;
}

/* SNB 접기/펼치기 핸들
   기존은 body_tree_close.png / body_tree_open.png (16x28 주황 원형 화살표)였다.
   시안은 얇은 회색 세로 탭에 꺾쇠 하나뿐이라 배경 이미지를 끄고 CSS 로 그린다.
   ※ 두 버튼(접기 ‹ / 펼치기 ›)은 기존 동작 그대로 둘 다 유지한다.
     중간 상태에서는 양쪽으로 갈 수 있어야 하고, JS 가 .closed/.opened 에 따라
     display 를 제어하기 때문이다. */
#container .body_tree_toggle{
	top: 8px;
}

#container .body_tree_toggle .snbclose,
#container .body_tree_toggle .snbopen{
	position: relative;
	width: 15px;
	height: 30px;
	background-image: none;
	background-color: #f0f1f3;
	border: 1px solid #e0e0e0;
	border-left: 0;
	border-radius: 0 4px 4px 0;
	box-sizing: border-box;
}

#container .body_tree_toggle .snbopen{
	border-top: 0;
	border-radius: 0 0 4px 0;
}

#container .body_tree_toggle .snbclose:before,
#container .body_tree_toggle .snbopen:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -3px 0 0 -3px;
	border-top: 1.4px solid #6d7882;
	border-right: 1.4px solid #6d7882;
}

/* ‹ 접기 */
#container .body_tree_toggle .snbclose:before{
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	margin-left: -1px;
}

/* › 펼치기 */
#container .body_tree_toggle .snbopen:before{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-left: -4px;
}

#container .body_tree_toggle .snbclose:hover,
#container .body_tree_toggle .snbopen:hover{
	background-color: #e3e5e9;
}


/* ==========================================================================
   [5] 접근성
   ========================================================================== */
@media (forced-colors: active){
	#header .header .search .btn--search:before,
	#header .header .search .btn--word:before{ border-color: ButtonText; }
	#header .header .search .btn--search:after,
	#header .header .search .btn--word:after{ background: ButtonText; }
	.wrap__snb nav > ul > li > a:after{ border-color: ButtonText; }
	#header .header .gnb ul li a.active{ outline: 2px solid ButtonText; outline-offset: -3px; }
}

@media (prefers-reduced-motion: reduce){
	#header .header .gnb ul li a{ transition: none; }
}