@charset "UTF-8";

/* ==========================================================================
   서브 공통 셸 + SNB — 시안 https://honam.figma.site/category-1
   --------------------------------------------------------------------------
   로드 : layout/head.jsp 의 맨 마지막 (기존 CSS 를 덮어쓴다)
   대상 : munjung/snb.jsp(카테고리 트리) · board/snb.jsp · search/snb.jsp 의 바깥 틀

   시안 실측 (1920, 1409 두 폭에서 동일 = 고정값)
     · SNB 글 영역 x 120 ~ 400 (280) + 오른쪽 20 → x 419 에 1px #ddd 세로선
     · 세로선은 헤더 아래 40px 부터 (SNB 첫 글자 top 과 같다)
     · 콘텐츠는 세로선에서 60px (x 480) / 오른쪽 120
     · 제목 "카테고리" 16 Bold → 32 → 그룹
     · 그룹 행 16 Bold + 20px 꺾쇠 / 그룹 사이 40 / 그룹 → 트리 16
     · 트리 1단 : 20px 아이콘 + 12 + 글자, 행 간격 12 (24 줄높이 → 36 피치)
       펼친 1단의 자식은 #f5f5f5 radius 12 패널(안쪽 20)에 담긴다
       패널 안 : 아이콘 +28 글자, 단마다 24 들여쓰기, 잎은 8 간격
       아이콘 : 닫힘 [+] (패널 밖 회색 / 안 흰색) · 열림 [−] 검정 · 잎 = 문서
       열린 항목은 Bold #000, 나머지 Regular #222

   ★ JS 와 맞물린 값 (layout/header.jsp resizeWindow)
     · SNB_TITLE_H 는 .snb__title 의 outerHeight() 실측 → 높이를 바꿔도 안전
     · 트리 max-height 는 JS 가 인라인으로 준다 → 여기서 높이를 주지 않는다
   ★ 특이도 : simpleTree.css 와 snb.jsp 인라인 <style> 이 이 파일보다 뒤에 온다.
     krds-chrome.css [4-1] 과 같은 이유로 `.wrap__snb .V1.V2.V3.simpleTree` 접두를 쓴다.
   ========================================================================== */


/* ==========================================================================
   [1] 셸 : SNB 폭 = 여백(--gutter) + 글 280 + 20 / 펼침 = 여백 + 400 + 20 / 접힘 0
   ★ 2026-10-20 콘텐츠 폭 1280 : 예전 고정 여백 120 을 layout.css 의 --gutter((화면-1280)/2) 로 바꿨다.
     1920 이면 SNB 글이 x 320 에서 시작(헤더 로고와 같은 줄), 본문 오른쪽 끝은 x 1600.
   ========================================================================== */
/* ★ content.css 의 #container{min-width:960px} · .closed{min-width:1200px} 를 푼다 —
   SNB 를 더하면 가로로 넘쳤다 (2026-10-15) */
#container,
#container.opened,
#container.closed{
	min-width: 0;
}
/* ★ 2026-10-22 시트 13 : SNB 칸 폭 = --snb-w (기본 300 = 글 280 + 20). 세로선을 끌어 300 ~ 520 으로 바꾼다.
   값은 layout/header.jsp 의 snbResize 가 #container 에 인라인으로 넣는다(localStorage 'hiksSnbW', 카테고리·검색결과 공유).
   예전 "펼침(.opened) = 420" 과 접기/펼치기 손잡이(.body_tree_toggle)는 뺐다(사용자 결정) — 쿠키에 opened 가 남아 있어도 폭은 --snb-w */
#container,
#container.opened{
	padding: 0 0 0 calc(var(--gutter) + var(--snb-w, 300px));
	background: #fff linear-gradient(#ddd, #ddd) no-repeat calc(var(--gutter) + var(--snb-w, 300px) - 1px) 40px / 1px calc(100% - 160px);
}
#container.closed{
	padding: 0;
	background-image: none;
}

.wrap__snb,
#container.opened .wrap__snb{
	width: calc(var(--gutter) + var(--snb-w, 300px));
	left: calc((var(--gutter) + var(--snb-w, 300px)) * -1);
	margin-right: calc((var(--gutter) + var(--snb-w, 300px)) * -1);
	padding: 40px 20px 120px var(--gutter);
	background: transparent;
	font-family: var(--f-sans);
	box-sizing: border-box;
}
/* 검색 SNB 는 krds-search.css 가 자체 오른쪽 선을 그린다 → 셸 선과 겹치지 않게 끈다 */
.wrap__snb.ks-snb{
	border-right: 0;
}

/* 콘텐츠 : 세로선에서 60 / 오른쪽 여백(--gutter) / 위 40 (SNB 와 같은 줄에서 시작) / 아래 120 (푸터까지)
   ★ 2026-10-12 페이지 전체 스크롤 : 높이는 내용대로. 세로선은 위 40 ~ 아래 120 을 뺀 길이 */
#container .content{
	height: auto;
	overflow: visible;
	padding: 40px var(--gutter) 120px 60px;
	background: transparent;
}
#container.closed .content{
	padding-left: var(--gutter);
}

/* 접기/펼치기 손잡이 : 뺐다(시트 13 사용자 결정 — 폭은 세로선 끌기, 접기는 제목줄 X, 펴기는 "카테고리 보기") */
#container .body_tree_toggle{
	display: none;
}

/* 세로선 끌기 손잡이 (header.jsp 가 .wrap__snb 앞에 넣는다). 선 좌우 4px 씩 잡히고, 올리면 선이 진해진다 */
.snb-resizer{
	position: absolute;
	z-index: 20;
	top: 40px;
	bottom: 120px;
	left: calc(var(--gutter) + var(--snb-w, 300px) - 5px);
	width: 9px;
	cursor: col-resize;
	touch-action: none;
}
.snb-resizer:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	width: 1px;
	background: transparent;
	transition: background-color .15s, width .15s, left .15s;
}
.snb-resizer:hover:after,
html.is-snb-resizing .snb-resizer:after{
	left: 3px;
	width: 3px;
	background: #e98813;
}
#container.closed .snb-resizer{
	display: none;
}
html.is-snb-resizing,
html.is-snb-resizing *{
	cursor: col-resize !important;
	user-select: none !important;
}


/* ==========================================================================
   [2] 제목 / 그룹 행
   ========================================================================== */
.wrap__snb .snb__title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: auto;
	margin: 0 0 32px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: normal;
	color: #000;
	text-align: left;
}
/* 제목줄 닫기(X) — 시트 15, 시안 category-2 (검색 필터 .cs-snb__close 와 같은 16 아이콘) */
.wrap__snb .snb__close{
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0 -4px 0 0;
	padding: 0;
	border: 0;
	background: url(../images/ico-close-16.svg) no-repeat center / 16px 16px;
	cursor: pointer;
}

.wrap__snb nav{
	overflow: visible;
}
.wrap__snb nav > ul,
.wrap__snb nav > ul.kl-snb__svc__list{
	padding: 0;
	border: 0;
}
.wrap__snb nav > ul > li{
	margin: 0 0 40px;
	padding: 0;
	border: 0;
	background: none;
}
/* 그룹 사이 간격은 li 의 margin 이 맡는다. 마지막 그룹 아래는 SNB padding 만 */
.wrap__snb nav > ul:last-child > li:last-child{
	margin-bottom: 0;
}

.wrap__snb nav > ul > li > a,
.wrap__snb nav > ul > li.open > a{
	position: relative;
	display: block;
	min-height: 0;
	padding: 0 28px 0 0;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.wrap__snb nav > ul > li > a:hover{
	background: none;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 꺾쇠 : 닫힘 ∨ / 열림 ∧ (시안 20px 아이콘).
   krds-chrome.css 의 `#header ~ #container …:after`(2,1,5) 를 이기려고 같은 접두를 쓴다. */
#header ~ #container .wrap__snb nav > ul > li > a:after,
.wrap__snb nav > ul > li > a:after{
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	background: url('../images/ico-chevron-down.svg') no-repeat center / 20px 20px;
	-webkit-transform: none;
	transform: none;
}
#header ~ #container .wrap__snb nav > ul > li.open > a:after,
.wrap__snb nav > ul > li.open > a:after{
	margin: 0;
	background-image: url('../images/ico-chevron-up.svg');
	-webkit-transform: none;
	transform: none;
}
/* 잎 링크뿐인 SNB(열린마당)는 꺾쇠가 의미 없다 */
#header ~ #container .wrap__snb.kb-snb nav > ul > li > a:after,
.wrap__snb.kb-snb nav > ul > li > a:after{
	display: none;
}
.wrap__snb.kb-snb nav > ul > li.open > a{
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 트리 영역 */
.wrap__snb nav > ul > li > ul{
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	background: none;
}


/* ==========================================================================
   [3] 트리 (jquery.simple.tree)
   --------------------------------------------------------------------------
   DOM : ul.simpleTree > li.root > ul[data-root-name] > li(1단) > ul > li(2단) …
         li 에 folder-open / folder-close / doc (+ -last) 가 JS 로 붙는다.
         li > img.trigger (클릭 영역) / li > span (글자)
   ★ 접두 #container : krds-chrome.css [4-1] 의 `.wrap__snb .V1.V2.V3.simpleTree
     li.folder-close:before`(0,6,2) 를 이기려면 아이디 하나가 필요하다.
   ========================================================================== */
#container .wrap__snb ul.V1.V2.V3.simpleTree{
	margin: 16px 0 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
#container .wrap__snb .V1.V2.V3.simpleTree .root{
	margin: 0;
	padding: 0;
	background: none;
}
#container .wrap__snb .V1.V2.V3.simpleTree ul{
	margin: 0;
	padding: 0;
}

/* 항목 공통 */
#container .wrap__snb .V1.V2.V3.simpleTree li{
	position: relative;
	margin: 12px 0 0;
	padding: 0 0 0 28px;
	list-style: none;
	background: none;
	border: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
}
#container .wrap__snb .V1.V2.V3.simpleTree .root,
#container .wrap__snb .V1.V2.V3.simpleTree .root > ul > li:first-child,
#container .wrap__snb .V1.V2.V3.simpleTree li > ul > li:first-child{
	margin-top: 0;
}

/* 1단 (패널 밖) : 아이콘 + 12 */
#container .wrap__snb .V1.V2.V3.simpleTree .root > ul > li{
	padding-left: 32px;
}

/* 아이콘 (20x20) */
#container .wrap__snb .V1.V2.V3.simpleTree li:before{
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 0;
	background: url('../images/ico-tree-plus-w.svg') no-repeat 0 0 / 20px 20px;
}
#container .wrap__snb .V1.V2.V3.simpleTree .root > ul > li.folder-close:before,
#container .wrap__snb .V1.V2.V3.simpleTree .root > ul > li.folder-close-last:before{
	background-image: url('../images/ico-tree-plus.svg');
}
#container .wrap__snb .V1.V2.V3.simpleTree li.folder-open:before,
#container .wrap__snb .V1.V2.V3.simpleTree li.folder-open-last:before{
	background-image: url('../images/ico-tree-minus.svg');
}
#container .wrap__snb .V1.V2.V3.simpleTree li.doc:before,
#container .wrap__snb .V1.V2.V3.simpleTree li.doc-last:before{
	background-image: url('../images/ico-tree-file.svg');
}
/* root li / 안내문구 노드에는 아이콘 없음 */
#container .wrap__snb .V1.V2.V3.simpleTree .root:before,
#container .wrap__snb .V1.V2.V3.simpleTree li[data-tree-status='comment']:before{
	display: none;
}
#container .wrap__snb .V1.V2.V3.simpleTree li[data-tree-status='comment']{
	padding-left: 0;
}

/* 펼친 1단의 자식 = 회색 패널 */
#container .wrap__snb .V1.V2.V3.simpleTree .root > ul > li > ul{
	margin: 12px 0 0 -32px;
	padding: 20px;
	border-radius: 12px;
	background: #f5f5f5;
}
/* 패널 안에서 한 단 더 들어갈 때 : 부모 아이콘 기준 +24 (= 글자 시작 28 - 4) */
#container .wrap__snb .V1.V2.V3.simpleTree .root > ul > li > ul ul{
	margin: 12px 0 0 -4px;
}
/* 잎(문서) : 아이콘 + 4, 행 간격 8 */
#container .wrap__snb .V1.V2.V3.simpleTree li.doc,
#container .wrap__snb .V1.V2.V3.simpleTree li.doc-last{
	padding-left: 24px;
}
#container .wrap__snb .V1.V2.V3.simpleTree li.doc + li.doc,
#container .wrap__snb .V1.V2.V3.simpleTree li.doc + li.doc-last{
	margin-top: 8px;
}

/* 클릭 영역 : 아이콘 위에 겹친다 */
#container .wrap__snb .V1.V2.V3.simpleTree li > img.trigger,
#container .wrap__snb .V1.V2.V3.simpleTree .trigger{
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

/* 연결선 없음 */
#container .wrap__snb .V1.V2.V3.simpleTree .line,
#container .wrap__snb .V1.V2.V3.simpleTree .line-last,
#container .wrap__snb .V1.V2.V3.simpleTree .line-over,
#container .wrap__snb .V1.V2.V3.simpleTree .line-over-last{
	display: none;
}

/* 글자 */
#container .wrap__snb .V1.V2.V3.simpleTree li > span,
#container .wrap__snb .V1.V2.V3.simpleTree li > span.text{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
#container .wrap__snb .V1.V2.V3.simpleTree li.doc > span,
#container .wrap__snb .V1.V2.V3.simpleTree li.doc-last > span{
	color: #000;
}
#container .wrap__snb .V1.V2.V3.simpleTree li.folder-open > span,
#container .wrap__snb .V1.V2.V3.simpleTree li.folder-open-last > span{
	font-weight: 700;
	color: #000;
}
#container .wrap__snb .V1.V2.V3.simpleTree li > span:hover,
#container .wrap__snb .V1.V2.V3.simpleTree .text:hover{
	border: 0;
	background: none;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* 현재 선택 노드 */
#container .wrap__snb .V1.V2.V3.simpleTree .active,
#container .wrap__snb .V1.V2.V3.simpleTree li > span.active{
	padding: 0;
	font-weight: 700;
	color: #000;
	text-decoration: none;
}
#container .wrap__snb .V1.V2.V3.simpleTree li[data-tree-status='comment'] span{
	color: #999;
	cursor: default;
	text-decoration: none;
}

/* 열린마당 SNB : krds-board.css [3] 이 현재 항목에 옅은 배경을 깐다 → 시안 톤(밑줄만)으로. 그쪽이 `#header ~ #container` 접두라 같은 접두를 쓴다 */
#header ~ #container .wrap__snb.kb-snb nav > ul > li,
#header ~ #container .wrap__snb.kb-snb nav > ul > li.open,
#header ~ #container .wrap__snb.kb-snb nav > ul > li > a,
#header ~ #container .wrap__snb.kb-snb nav > ul > li.open > a{
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}


/* ==========================================================================
   [4] 반응형 — 1279px 이하 (시안 category-1 / filter_open 의 1024 · 390 폭)
   --------------------------------------------------------------------------
   · 왼쪽 SNB 칸과 세로선이 없어지고 콘텐츠가 가로 꽉 (여백 --gutter : 40 / 24)
   · SNB 는 숨었다가 "카테고리 보기" 버튼으로 전체화면 패널(시안 filter_open)로 뜬다
     토글 : layout/header.jsp snbPanel() → <html> 에 is-snb-open
     닫기 : 패널 오른쪽 위 .snb-close (layout.jsp / layout_dir.jsp)
   · 접기/펼치기 손잡이(.body_tree_toggle)와 쿠키 상태(opened/closed)는 PC 전용 → 무시
   · 열린마당 SNB(.kb-snb)는 링크 하나라 패널을 띄울 이유가 없다 → 숨김만
   ★ content.css 의 `#container.closed .wrap__snb{display:none}` 등(1,2,0) 을 이기려고
     html / #container 접두를 붙였다.
   ========================================================================== */
.snb-close{
	display: none;
}

@media screen and (max-width: 1279px){
	#wrap,
	#container,
	#container.opened,
	#container.closed{
		min-width: 0;
	}
	#container,
	#container.opened,
	#container.closed{
		padding: 0;
		background: #fff;
	}
	#container .content,
	#container.opened .content,
	#container.closed .content{
		float: none;
		width: auto;
		padding: 40px var(--gutter) 80px;
	}
	#container .body_tree_toggle{
		display: none;
	}
	.snb-resizer{
		display: none;
	}

	/* SNB → 전체화면 패널 */
	html #container .wrap__snb,
	html #container.opened .wrap__snb,
	html #container.closed .wrap__snb{
		display: none;
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1000;
		float: none;
		width: auto;
		margin: 0;
		padding: 0 var(--gutter) 60px; /* 위 24 는 제목줄(sticky) 안쪽 여백으로 옮겼다 */
		background: #fff;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	html.is-snb-open #container .wrap__snb,
	html.is-snb-open #container.opened .wrap__snb,
	html.is-snb-open #container.closed .wrap__snb{
		display: block;
	}
	html.is-snb-open,
	html.is-snb-open body{
		overflow: hidden;
	}
	html #container .wrap__snb.kb-snb{
		display: none !important;
	}
	/* 제목줄 "카테고리" 는 패널 위에 고정, 그 아래 목록만 상하 스크롤 (2026-10-21 수정요청 20번).
	   닫기(.snb-close)는 원래 position:fixed — 제목줄(위 24 + 줄 32)과 같은 높이에 있다 */
	.wrap__snb .snb__title{
		position: sticky;
		top: 0;
		z-index: 2;
		margin-bottom: 8px;
		padding: 24px 48px 16px 0;
		background: #fff;
		font-size: 20px;
		line-height: 32px;
	}

	.snb-close{
		position: fixed;
		top: 24px;
		right: var(--gutter);
		z-index: 1001;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0;
		border: 0;
		background: url('../images/ico-close-20.svg') no-repeat center / 20px 20px;
		cursor: pointer;
	}
	html.is-snb-open .snb-close{
		display: flex;
	}
	/* 패널은 위 .snb-close 가 닫는다 → 제목줄 X(PC 전용)는 숨김 */
	.wrap__snb .snb__close{
		display: none;
	}

	/* 트리 글자 : 좁은 폭에서 말줄임 대신 줄바꿈 */
	#container .wrap__snb .V1.V2.V3.simpleTree li > span,
	#container .wrap__snb .V1.V2.V3.simpleTree li > span.text{
		white-space: normal;
	}
}

@media screen and (max-width: 799px){
	#container .content,
	#container.opened .content,
	#container.closed .content{
		padding: 40px var(--gutter) 60px;
	}
}