@charset "UTF-8";

/* ==========================================================================
   통합검색 (search/group.do · list.do) — 시안 _search_results_01(전체) · _search_results_02(서지 등) · _filter_open
   --------------------------------------------------------------------------
   2026-10-15 시안 반영으로 다시 짰다 (그 전 10-12 판은 시안 없이 목록 화면 문법이었다)
   로드 : layout/head.jsp (list.css 다음). 정적 미리보기 : /resources/html/search.html
   마크업 : search/group.jsp · list.jsp · tabs_inc.jsp · record_inc.jsp · snb.jsp · more_filter.jsp
            머리의 검색 히어로는 layout/hd_inc.jspf(hdHero) + layout.css [5]
   셸(SNB 420 · 세로선 x419 · 콘텐츠 x480 / 오른쪽 120)은 snb.css 그대로

   시안 실측 (1280 프레임)
     · 히어로 아래 40 에서 [필터 검색 | 총 N건 · 필터 검색 버튼] 이 같은 줄
     · 건수 20px / 버튼 116x34 (태블릿·모바일 120x40) → 32 → 2px 검정 → 탭 16px (위아래 20) → 1px 검정
     · 섹션 머리 16 Bold (위 24) → 24 → 항목 : 썸네일 120 #f5f5f5 | 40 | 제목 16 한 줄 · 12 · 본문 #666 세 줄
       항목 사이 24 + 1px #ddd + 24. 원문텍스트는 썸네일 없음
     · 필터 : 제목 16 Bold + 닫기 → 20 → 선택된 필터 → 12 → 칩(36 #f5f5f5) · 초기화(36 #ddd 테두리)
              → 56 → 그룹(제목 16 Bold + 꺾쇠, 항목 36 피치, 체크 20 주황) 사이 32

   [목차]
     [1] 건수줄 · 필터 버튼   [2] 탭   [3] 섹션 · 항목   [4] 빈 결과 · 오류 · 하이라이트
     [5] 필터 SNB   [6] 필터 더보기 레이어   [7] 반응형
   ========================================================================== */

.cs-page{
	font-family: var(--f-sans);
	color: #000;
}


/* ==========================================================================
   [1] 건수줄 — 총 N건(20) · 오른쪽 "필터 검색" 버튼
   ========================================================================== */
.cs-page .cs-count{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}
.cs-page .cs-count__txt{
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	color: #000;
}
.cs-page .cs-count__txt strong{
	font-weight: 700;
}
.cs-page .cs-btn-filter{
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 16px;
	border: 1px solid #000;
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #000;
	cursor: pointer;
}
.cs-page .cs-btn-filter img{
	display: block;
	width: 16px;
	height: 16px;
}
.cs-page .cs-btn-filter:hover{
	background: #f5f5f5;
}


/* ==========================================================================
   [2] 탭 — 위 2px 검정 / 아래 1px 검정, 16px (위아래 20), 선택 Bold, 사이 36
   ========================================================================== */
.cs-page .cs-tabs{
	margin-top: 32px;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}
.cs-page .cs-tabs__list{
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cs-page .cs-tabs__list li{
	flex: none;
	margin: 0;
	padding: 0;
}
.cs-page .cs-tabs__tab{
	display: block;
	padding: 20px 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}
.cs-page .cs-tabs__tab:hover{
	text-decoration: underline;
	text-underline-offset: 4px;
}
.cs-page .cs-tabs__tab.is-on{
	font-weight: 700;
}
.cs-page .cs-tabs__tab.is-on:hover{
	text-decoration: none;
}


/* ==========================================================================
   [3] 섹션 · 항목
   ========================================================================== */
.cs-page .cs-sec{
	margin-top: 24px;
}
.cs-page .cs-sec__tit{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.cs-page .cs-list{
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.cs-page .cs-sec .cs-list{
	margin-top: 24px;
}
.cs-page .cs-item{
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 24px 0;
	border-bottom: 1px solid #ddd;
}
.cs-page .cs-item:first-child{
	padding-top: 0;
}

.cs-page .cs-item__thumb{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	padding: 22px;
	background: #f5f5f5;
	box-sizing: border-box;
	overflow: hidden;
}
.cs-page .cs-item__thumb a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.cs-page .cs-item__thumb img{
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cs-page .cs-item__body{
	flex: 1;
	min-width: 0;
}
/* 제목 + 메타 한 줄 (넘치면 …) */
.cs-page .cs-item__head{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	line-height: 24px;
}
.cs-page .cs-item__title{
	font-weight: 400;
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.cs-page .cs-item__title:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* 본문 발췌 — #666 세 줄 */
.cs-page .cs-item__txt{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin-top: 12px;
	font-size: 16px;
	line-height: 24px;
	color: #666;
	word-break: break-all;
}
/* 서지는 시안에서 한 줄 (해제 · 원문텍스트는 세 줄) */
.cs-page .cs-item__txt--one{
	-webkit-line-clamp: 1;
}
.cs-page .cs-item__txt a{
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.cs-page .cs-item__txt a:hover{
	color: #000;
}


/* ==========================================================================
   [4] 빈 결과 · 오류 알림 · 하이라이트
   ========================================================================== */
/* 시안 : 위 2px 검정 / 아래 1px #ddd 사이 가운데 */
.cs-page .cs-empty{
	margin: 24px 0 0;
	padding: 100px 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #000;
	list-style: none;
}

.cs-page .cs-notice{
	margin-top: 24px;
	padding: 16px 20px;
	border: 1px solid #e98813;
	border-radius: 8px;
	background: #fff8ef;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}
.cs-page .cs-notice p{
	margin: 0;
}
.cs-page .cs-notice p + p{
	margin-top: 4px;
}

/* 검색어 하이라이트 — SolrStringUtil : <em class="hl1"> / <mark> (base.css 의 빨강 이탤릭을 덮는다) */
.cs-page em.hl1,
.cs-page mark{
	font-style: normal;
	font-weight: inherit;
	color: #e98813;
	background: none;
}

/* 페이지 — list.css 의 .cl-pager (위 40) */
.cs-page .cl-pager{
	margin-top: 40px;
}


/* ==========================================================================
   [5] 필터 SNB — 셸(폭·여백·세로선)은 snb.css
   ========================================================================== */
/* 섹션 건수 목록 : 화면엔 안 보이지만 snb.jsp 스크립트가 data-sec-count 를 읽는다 */
.cs-snb .cs-snb__secs{
	display: none;
}
/* layout.jsp 의 패널 닫기 단추 대신 머리의 닫기를 쓴다 */
.cs-snb ~ .snb-close{
	display: none !important;
}

.cs-snb__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.cs-snb__tit{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.cs-snb__close{
	flex: none;
	width: 24px;
	height: 24px;
	margin-right: -4px;
	padding: 0;
	border: 0;
	background: url(../images/ico-close-16.svg) no-repeat center / 16px 16px;
	cursor: pointer;
}
.cs-snb nav{
	overflow: visible;
}

/* 선택된 필터 */
.cs-flt__sel{
	margin-top: 20px;
}
.cs-flt__tit{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.cs-flt__chips{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.cs-flt__chips li{
	margin: 0;
	padding: 0;
}
.cs-flt__chips a:not(.cs-flt__reset){
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 12px;
	border-radius: 100px;
	background: #f5f5f5;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}
.cs-flt__chips a:not(.cs-flt__reset):hover{
	background: #ebebeb;
}
/* 2026-10-22 시트 33·43 : 1279 이하 패널은 "필터 적용" 때 한 번에 검색한다(snb.jsp csFq).
   칩 = 지금 고른 상태 — 해제한 칩은 숨기고(is-off), 새로 고른 값은 칩이 바로 붙는다(is-new). 선택이 없으면 영역째 숨김 */
.cs-flt__sel.is-empty,
.cs-flt__chips li.is-off{
	display: none;
}
.cs-pop__list a.is-on .cs-pop__tx{
	font-weight: 700;
	color: #e98813;
}
.cs-flt__x{
	flex: none;
	display: block;
	width: 16px;
	height: 16px;
	background: url(../images/ico-close-16.svg) no-repeat center / 16px 16px;
}
.cs-flt__reset{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px 0 12px;
	border: 1px solid #ddd;
	border-radius: 100px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	text-decoration: none;
}
.cs-flt__reset:before{
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background: url(../images/ico-refresh.svg) no-repeat center / 16px 16px;
}
.cs-flt__reset:hover{
	border-color: #000;
	color: #000;
}

/* 그룹 */
.cs-flt__grp{
	margin-top: 32px;
}
.cs-flt__sel:not(.is-empty) + .cs-flt__grp{
	margin-top: 56px;
}
.cs-flt__head{
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.cs-flt__head .cs-flt__tit{
	flex: 1;
	min-width: 0;
}
.cs-flt__more{
	flex: none;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	text-decoration: none;
}
.cs-flt__more:hover{
	color: #000;
	text-decoration: underline;
}
.cs-flt__fold{
	flex: none;
	display: block;
	width: 20px;
	height: 20px;
	background: url(../images/ico-chevron-up.svg) no-repeat center / 20px 20px;
}
.cs-flt__grp.is-closed .cs-flt__fold{
	background-image: url(../images/ico-chevron-down.svg);
}
.cs-flt__grp.is-closed .cs-flt__list,
.cs-flt__grp.is-closed .cs-flt__more{
	display: none;
}
.cs-flt__list{
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.cs-flt__list li{
	margin: 0;
	padding: 0;
}

/* 체크 항목 — 36 줄, 상자 20 (#ddd · r4) → 12 → 글 16 · 건수 #666 */
.cs-chk{
	display: flex;
	align-items: center;
	min-height: 36px;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-decoration: none;
}
.cs-chk__box{
	flex: none;
	width: 20px;
	height: 20px;
	margin-right: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}
.cs-chk:hover .cs-chk__box{
	border-color: #e98813;
}
.cs-chk.is-on .cs-chk__box{
	border-color: #e98813;
	background: #e98813 url(../images/ico-check-w.svg) no-repeat center / 13px 10px;
}
.cs-chk__tx{
	min-width: 0;
	word-break: break-all;
}
.cs-chk:hover .cs-chk__tx{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cs-chk__cnt{
	flex: none;
	margin-left: 8px;
	color: #666;
}

.cs-snb__empty{
	margin: 24px 0 0;
	font-size: 15px;
	line-height: 22px;
	color: #666;
}

/* "필터 적용" — 1279px 이하 패널에서만 [7] */
.cs-snb__apply{
	display: none;
}
.cs-snb__apply-btn{
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #000;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}


/* ==========================================================================
   [6] 필터 더보기 레이어 (#pop_filterMore_layer + more_filter.jsp)
       SNB 오른쪽(세로선 + 20)에 뜨는 고정 레이어
   ========================================================================== */
.cs-snb .cs-pop-layer{
	position: fixed;
	z-index: 1100;
	top: 128px;
	left: calc(var(--gutter) + var(--snb-w, 300px) + 20px);   /* 세로선(여백 + SNB 폭) + 20. 폭은 시트 13 끌기(snb.css --snb-w) */
	width: 480px;
	max-width: calc(100vw - var(--gutter) * 2 - var(--snb-w, 300px) - 40px);
}
.cs-pop{
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 168px);
	border: 1px solid #000;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0,0,0,.16);
	font-family: var(--f-sans);
	overflow: hidden;
}
.cs-pop__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	padding: 20px 24px;
	border-bottom: 1px solid #ddd;
}
.cs-pop__tit{
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
	color: #000;
}
.cs-pop__tit span{
	margin-left: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #666;
}
.cs-pop__close{
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: url(../images/ico-close-20.svg) no-repeat center / 20px 20px;
	cursor: pointer;
}
.cs-pop__list{
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 8px 24px;
	list-style: none;
	overflow-y: auto;
}
.cs-pop__list li{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #f0f0f0;
}
.cs-pop__list li:last-child{
	border-bottom: 0;
}
.cs-pop__list a{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-decoration: none;
}
.cs-pop__list a:hover .cs-pop__tx{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cs-pop__tx{
	min-width: 0;
	word-break: break-all;
}
.cs-pop__cnt{
	flex-shrink: 0;
	font-size: 14px;
	color: #999;
}
.cs-pop__pager{
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 16px 24px;
	border-top: 1px solid #ddd;
}
.cs-pop__btn{
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #000;
	text-decoration: none;
}
a.cs-pop__btn:hover{
	background: #f5f5f5;
}
.cs-pop__btn.is-dis{
	opacity: .3;
	cursor: default;
}




/* ==========================================================================
   [7] 반응형 — 태블릿 800~1279 / 모바일 ~799 (layout.css [4] · snb.css [4] 와 같은 브레이크포인트)
   --------------------------------------------------------------------------
   · 필터 SNB 는 전체화면 패널(시안 _filter_open) : "필터 검색" 버튼 → csFilter() → snbPanel(true)
     머리 제목 24, 닫기 24, 맨 아래 고정 "필터 적용"(검정 48 · r8) = 패널 닫기 (항목은 누르는 즉시 적용된다)
   · 건수줄 버튼 120x40 · r8 / 썸네일 사이 32 / 탭 사이 32 (모바일 20)
   · 모바일 : 항목 = 정사각 썸네일(가로 꽉) 위 · 글 아래(24)
   · 더보기 레이어 : 패널 위에 여백(--gutter)만 두고 가로 꽉
   ========================================================================== */
@media screen and (max-width: 1279px){
	.cs-page .cs-btn-filter{
		width: 120px;
		height: 40px;
		padding: 0;
		border-radius: 8px;
	}
	.cs-page .cs-tabs__list{
		gap: 32px;
	}
	.cs-page .cs-item{
		gap: 32px;
	}
	/* 태블릿·모바일 : 제목 말줄임 없이 전체 (앞부분이 같은 자료 구분, 2026-10-30 시트 66) */
	.cs-page .cs-item__head{
		overflow: visible;
		white-space: normal;
		text-overflow: clip;
		overflow-wrap: anywhere;
	}

	/* 패널 */
	html #container .wrap__snb.cs-snb{
		padding: 40px var(--gutter) 128px;
	}
	.cs-snb__tit{
		font-size: 24px;
		line-height: 32px;
	}
	.cs-snb__close{
		width: 32px;
		height: 32px;
		margin-right: -4px;
		background-size: 24px 24px;
	}
	.cs-flt__sel{
		margin-top: 36px;
	}
	/* 패널 그룹 사이 24 (PC 필터 칸은 32) — 시안 _filter_open 실측 */
	.cs-flt__grp{
		margin-top: 24px;
	}
	.cs-flt__sel:not(.is-empty) + .cs-flt__grp{
		margin-top: 34px;
	}
	.cs-snb__apply{
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1002;
		padding: 16px var(--gutter) 40px;
		background: #fff;
	}

	.cs-snb .cs-pop-layer,
	#container.opened .cs-snb .cs-pop-layer{
		top: 80px;
		left: var(--gutter);
		right: var(--gutter);
		width: auto;
		max-width: none;
	}
	.cs-pop{
		max-height: calc(100vh - 120px);
	}
}

@media screen and (max-width: 799px){
	.cs-page .cs-count__txt{
		font-size: 20px;
	}
	.cs-page .cs-count{
		margin-top: 0;
	}
	.cs-page .cs-tabs{
		margin-top: 24px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cs-page .cs-tabs::-webkit-scrollbar{
		display: none;
	}
	.cs-page .cs-tabs__list{
		gap: 20px;
		width: max-content;
	}

	/* 항목 : 썸네일 위 (정사각 가로 꽉) / 글 아래 */
	.cs-page .cs-item{
		flex-direction: column;
		gap: 24px;
	}
	.cs-page .cs-item__thumb{
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		padding: 34px;
	}
	.cs-page .cs-item__thumb img{
		width: 100%;
		height: 100%;
	}

	.cs-page .cs-empty{
		padding: 80px 0;
	}

	.cs-snb__tit{
		font-size: 20px;
		line-height: 28px;
	}
	html #container .wrap__snb.cs-snb{
		padding-top: 34px;
	}
	.cs-flt__sel{
		margin-top: 32px;
	}
	.cs-snb__apply{
		padding-bottom: 24px;
	}
	html #container .wrap__snb.cs-snb{
		padding-bottom: 112px;
	}

	.cs-pop__head{
		padding: 16px 20px;
	}
	.cs-pop__list{
		padding: 4px 20px;
	}
	.cs-pop__pager{
		padding: 12px 20px;
	}
}