@charset "UTF-8";

/* ==========================================================================
   KRDS UI - 디렉토리 목록 화면 (munjung/list.jsp)
   --------------------------------------------------------------------------
   적용 URL : /munjung/list.do  /spcont/list.do  /trpj/list.do
              (세 라우트 모두 MunjungController.list() → munjung/list.jsp 를 쓴다)

   로딩순서 : base → jquery-ui → common → content → toastr → krds
              → krds-list.css (최후순위)   ※ head.jsp 에서 로드

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

   ★★ 모든 콘텐츠 규칙은 `.kl-page` 로 시작한다 (list.jsp 의 래퍼 div)
   --------------------------------------------------------------------------
   krds.css / content.css 가 .path / .tit__section / .wrap__list /
   .wrap__content__filter / .wrap__list__util / .wrap__page--count 를
   "서브 화면 공용"으로 이미 스타일링하고 있고, 그 셀렉터들이
   `.wrap__list li`(0,1,1) / `.wrap__content__filter li .checkbox__wrap
   input[type="checkbox"]:checked + .checkbox__wrap--style1`(0,5,2) 처럼
   특이도가 높다. 클래스 하나짜리로는 이길 수 없어 페이지 스코프를 두었다.
   (메인 검색창에서 겪은 것과 같은 문제 — 우회하지 말고 특이도를 맞출 것)

   [작업 범위]
   · "리스트보기" 탭(vmode != 'tbl' → .cont__thumb)  … [4] 절
   · "간략보기"  탭(vmode == 'tbl' → table.list__table) … [8] 절
     (2차에는 손대지 않았고 3차 2026-09-01 에 시안 반영했다)
   · 헤더 높이·SNB 폭은 krds-chrome.css 에서 시안값(104 / 200)으로 맞췄고
     header.jsp 의 resizeWindow() 상수도 함께 고쳤다.

   [기존 JS 가 의존하므로 유지한 셀렉터]
     .wrap__content__filter ul li      … 12개 초과 항목 접기/펼치기
     input[name='clsid']               … checksub() 가 체크상태를 수집
     .wrap__content__filter--more      … open/close 토글
     .btn__list--toggle                … changeListMode()
     #sortField / #pageUnit            … changeFirstIndexHash()
     .page__num > a                    … ajax 페이지 이동 핸들러
     .page--move__input / .ui-pg-input / .btn--go … changeLocation()
     a.ajax                            … ajax 네비게이션

   [목차]
     [1] 콘텐츠 여백 / 브레드크럼 / 제목
     [2] 분류 탭
     [3] 목록 유틸 바
     [4] 리스트보기 목록
     [5] 페이지네이션
     [6] SNB 제공서비스 (국역/표점)
     [7] 접근성
     [8] 간략보기 테이블 (제공형태 2x2 배지)
   ========================================================================== */


/* ==========================================================================
   [1] 콘텐츠 여백 / 브레드크럼 / 제목
   ========================================================================== */

/* 시안 실측 : 콘텐츠 좌우 여백 25px
   (SNB 우측선 x=200 / 시안의 h2·분류탭·목록구분선 좌단 x=225,
    우단 x=1484 @ 뷰포트 1509 → 양쪽 25px) */
#content{
	padding: 0 25px 40px;
	background: var(--krds-bg-surface);
}

/* --- 브레드크럼 --- */
.kl-page .path{
	height: 33px;
	margin: 0 -25px 0;
	padding: 0 25px;
	border-bottom: 1px solid #e5e7eb;
	background: var(--krds-bg-surface);
}

.kl-page .path ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 33px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-page .path ul li{
	position: relative;
	height: auto;
	padding: 0 0 0 22px;
	font-size: 13px;
	line-height: 1.4;
	color: #4a5565;
	background: none;
}

/* krds.css 는 오른쪽에 꺾쇠(>)를 :after 로 그린다. 시안은 왼쪽 '/' 이므로 끈다. */
.kl-page .path ul li:after{
	display: none;
	content: none;
}

.kl-page .path ul li:before{
	content: "/";
	position: absolute;
	left: 8px;
	color: #b1b8be;
}

.kl-page .path ul li:first-child{
	padding-left: 0;
}

.kl-page .path ul li:first-child:before{
	display: none;
}

/* 마지막 항목 강조는 krds.css 규칙을 그대로 살린다(색만 시안에 맞춤) */
.kl-page .path ul li:last-child{
	color: #1a1a1a;
}

/* 홈 아이콘 : 이미지 자산 없이 CSS 로 집 모양을 그린다 */
.kl-page .path ul li.home{
	width: 15px;
	min-width: 15px;
	height: 33px;
	padding: 0;
	overflow: hidden;
	text-indent: -999em;
	background: none;
}

/* ★ display:block 을 명시해야 한다.
   위의 `li:first-child:before{display:none}` 과 특이도가 같다(0,3,3).
   홈 아이콘은 언제나 첫 항목이다. content 만 바꿔도 display 는
   그대로 none 이라 집 아이콘이 아예 안 보인다. */
.kl-page .path ul li.home:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%; left: 0;
	width: 13px; height: 12px;
	margin-top: -6px;
	background: #1b2d52;
	-webkit-clip-path: polygon(50% 0, 100% 45%, 100% 100%, 62% 100%, 62% 62%, 38% 62%, 38% 100%, 0 100%, 0 45%);
	clip-path: polygon(50% 0, 100% 45%, 100% 100%, 62% 100%, 62% 62%, 38% 62%, 38% 100%, 0 100%, 0 45%);
}

/* --- 화면 제목 ---
   시안 실측 : 20px 볼드 + 아래 2px 진한 네이비 선.
   krds.css 는 왼쪽에 파란 막대(:before)를 세우고 32px 로 키우는데 시안엔 없다. */
.kl-page .tit__section{
	margin: 0 0 16px;
	padding: 20px 0 12px;
	border-bottom: 2px solid #1b2d52;
	background: none;
}

.kl-page .tit__section:before{
	display: none;
	content: none;
}

.kl-page .tit__section h2{
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a;
	letter-spacing: -0.03em;
}


/* ==========================================================================
   [2] 분류 탭
   --------------------------------------------------------------------------
   시안은 6열 그리드 탭처럼 보이지만 기능은 기존과 같은 다중선택 체크박스다.
   (checksub() 이 체크된 clsid 를 전부 모아 쿼리에 넣는다)
   → 마크업·이벤트를 그대로 두고 체크박스만 시각적으로 감춘 뒤
     라벨 전체를 셀로 만들고 :checked 를 주황으로 칠한다.
     단일선택 탭으로 바꾸면 기능이 달라지므로 그렇게 하지 않았다.
   ========================================================================== */
.kl-page .wrap__content__filter{
	position: relative;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* content.css:282/:284 는 그리드의 오른쪽·아랫줄을 절대위치 1px 막대(#e0e0e0)로
   따로 그린다. 위치가 같아 ul 테두리 위에 덮어쓰므로 색이 바뀌지 않았다.
   선은 ul/li 테두리로만 그리고 이 막대는 끈다. */
.kl-page .wrap__content__filter:before,
.kl-page .wrap__content__filter:after{
	display: none;
	content: none;
}

.kl-page .wrap__content__filter__list{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #d1d5db;
	border-bottom: 0;
}

/* content.css:288 의 clearfix :after 를 마지막 행의 남는 칸을 메우는
   가로선 조각으로 재사용한다. grid 컨테이너의 :after 는 그리드 아이템이 되므로
   auto/-1 로 남은 칸 전체를 차지한다.
   (항목 수가 6의 배수가 아니어도 시안처럼 사각형이 닫힌다) */
.kl-page .wrap__content__filter__list:after{
	display: block;
	content: "";
	grid-column: auto / -1;
	clear: none;
	border-bottom: 1px solid #d1d5db;
}

/* 셀 경계는 각 셀의 우/하 테두리로만 그린다(이중선 방지) */
.kl-page .wrap__content__filter__list > li{
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-right: 1px solid #d1d5db;
	border-bottom: 1px solid #d1d5db;
	background: var(--krds-bg-surface);
}

.kl-page .wrap__content__filter__list > li:nth-child(6n){
	border-right: 0;
}

.kl-page .wrap__content__filter__list > li .checkbox__wrap{
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

/* 체크박스 본체는 화면에서만 감춘다. 포커스는 [7] 에서 살린다. */
.kl-page .wrap__content__filter__list > li .checkbox__wrap input[type="checkbox"]{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	opacity: 0;
}

/* 라벨 텍스트가 셀 전체가 된다.
   기존 스프라이트 체크 아이콘(background)과 좌측 패딩을 지워야 글자가 중앙에 온다. */
.kl-page .wrap__content__filter__list > li .checkbox__wrap .checkbox__wrap--style1{
	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;
	/* 시안 실측 : 행 높이 35px(= 셀 34 + 아래 테두리 1).
	   border-box 라 padding 을 포함해 34px 이 되고,
	   라벨이 두 줄로 접히면 그때만 늘어난다. */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 34px;
	height: auto;
	padding: 5px 10px;
	background: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #374151;
	text-align: center;
	white-space: normal;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.kl-page .wrap__content__filter__list > li .checkbox__wrap:hover .checkbox__wrap--style1{
	background: #f4f5f6;
	color: #333d4b;
}

/* 시안 실측 : 활성 셀 #e8821a + 흰 글자
   krds.css:1457 의 같은 목적 규칙(0,5,2)을 이기려면 .kl-page 가 필요하다. */
.kl-page .wrap__content__filter__list > li .checkbox__wrap input[type="checkbox"]:checked + .checkbox__wrap--style1{
	background: #e8821a;
	color: #fff;
	font-weight: 700;
}

.kl-page .wrap__content__filter__list > li .checkbox__wrap:hover input[type="checkbox"]:checked + .checkbox__wrap--style1{
	background: #d5741230;
	background: #d67512;
	color: #fff;
}

/* 수량 0 인 분류 */
.kl-page .wrap__content__filter__list > li .checkbox__wrap.disabled{
	cursor: default;
}

.kl-page .wrap__content__filter__list > li .checkbox__wrap.disabled .checkbox__wrap--style1,
.kl-page .wrap__content__filter__list > li .checkbox__wrap.disabled:hover .checkbox__wrap--style1{
	background: #fafafa;
	color: #b1b8be;
}

/* --- 더보기 토글 ---
   기존 JS 가 .open / .close 를 번갈아 붙인다. 문구·아이콘 방향만 바꿔준다. --- */
.kl-page .wrap__content__filter--more{
	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;
	gap: 6px;
	position: static;
	width: 100%;
	height: 34px;
	margin: 0;
	border: 1px solid #d1d5db;
	border-top: 0;
	background: #fafafa;
	font-size: 12px;
	color: #4a5565;
	text-indent: 0;
	cursor: pointer;
}

.kl-page .wrap__content__filter--more:hover{
	background: #f0f1f3;
}

.kl-page .wrap__content__filter--more.open:before{ content: "더보기"; }
.kl-page .wrap__content__filter--more.close:before{ content: "접기"; }

.kl-page .wrap__content__filter--more:after{
	content: "";
	position: static;
	width: 7px; height: 7px;
	margin: 0;
	border: 0;
	border-right: 1.5px solid #6d7882;
	border-bottom: 1.5px solid #6d7882;
	background: none;
	-webkit-transform: rotate(45deg) translateY(-2px);
	transform: rotate(45deg) translateY(-2px);
}

.kl-page .wrap__content__filter--more.close:after{
	-webkit-transform: rotate(-135deg) translateY(-2px);
	transform: rotate(-135deg) translateY(-2px);
}

.kl-page .wrap__content__filter--more.none{
	display: none;
}


/* ==========================================================================
   [3] 목록 유틸 바
   --------------------------------------------------------------------------
   krds.css [10] 이 이 영역을 흰 카드로 만든다. 시안은 평평한 한 줄이다.
   height:auto !important 는 group.jsp 의 인라인 height:38px 때문에 필요하다
   (krds.css 에 적힌 사유와 동일).
   ========================================================================== */
.kl-page .wrap__list__util{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 16px;
	height: auto !important;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}


/* ★ content.css:307 / :315 의 clearfix :after 는 flex 컨테이너 안에서
   **폭 0 짜리 flex 아이템**이 된다. 그래서 space-between 이
   [총N건][조건묶음][빈아이템] 3개를 균등 배치해 조건 묶음이
   오른쪽 끝이 아니라 한가운데에 놓여 있었다. (시안은 콘텐츠 우측 끝 정렬) */
.kl-page .wrap__list__util:before,
.kl-page .wrap__list__util:after,
.kl-page .wrap__list__util .wrap__list__util__option:before,
.kl-page .wrap__list__util .wrap__list__util__option:after{
	display: none;
	content: none;
}

.kl-page .wrap__list__util .wrap__list__util__tit{
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #364153;
	background: none;
}

.kl-page .wrap__list__util .wrap__list__util__tit strong{
	font-weight: 700;
	color: #101828;
}

.kl-page .wrap__list__util .wrap__list__util__option,
.kl-page .wrap__list__util .array--inline1{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	float: none;
	margin: 0;
}

/* --- 셀렉트 --- */
.kl-page .wrap__list__util select.array{
	/* 시안 실측 : 높이 30, 글자 12, 좌패딩 11 / 우패딩 26,
	   꾫쇠는 채운 삼각형이 아니라 8x5 선 꾫쇠(오른쪽 8px) */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: 30px;
	margin: 0;
	padding: 0 26px 0 11px;
	border: 1px solid #d1d5dc;
	border-radius: var(--krds-radius-s);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--krds-bg-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0.9 0.9L4 4L7.1 0.9' fill='none' stroke='%2399a1af' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 8px center;
	background-size: 8px 5px;
	background-repeat: no-repeat;
	font-size: 12px;
	line-height: normal;
	color: #364153;
	cursor: pointer;
}

.kl-page .wrap__list__util select.array:hover{
	border-color: #8a949e;
}

/* content.css:321 이 첫 셀렉트에 margin-right:10px 를 준다.
   flex gap(8px) 과 겹쳐 18px 간격이 되므로 지운다. */
.kl-page .wrap__list__util .array--inline1 .array--margin1{
	margin-right: 0;
}

/* --- 간략보기 / 리스트보기 토글 ---
   시안 실측 : 비활성 흰 배경 + 회색 테두리, 활성 #1b2d52 + 흰 글자
   krds.css:970~1015 가 같은 요소를 파란 탭으로 만들고 :before/:after 장식을
   붙이므로 함께 끈다. --- */
.kl-page .wrap__list__util .tab--common_ns{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle{
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: 30px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #d1d5dc;
	border-radius: 0;
	background: var(--krds-bg-surface);
	font-size: 12px;
	font-weight: 400;
	line-height: 28px;
	color: #4a5565;
	text-indent: 0;
	overflow: visible;
	cursor: pointer;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle:before,
.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle:after,
.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle.selected:before,
.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle.selected:after{
	display: none;
	content: none;
}

.kl-page .wrap__list__util .wrap__list__util__option .tab--common_ns .btn__list--toggle:first-child{
	border-radius: var(--krds-radius-s) 0 0 var(--krds-radius-s);
}

.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle + .btn__list--toggle{
	margin-left: -1px;
	border-radius: 0 var(--krds-radius-s) var(--krds-radius-s) 0;
}

.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle:hover{
	background: #f4f5f6;
	color: #4a5565;
}

.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle.selected{
	z-index: 1;
	border-color: #1b2d52;
	background: #1b2d52;
	color: #fff;
	font-weight: 700;
}


/* ==========================================================================
   [4] 리스트보기 목록
   --------------------------------------------------------------------------
   시안 실측 : 썸네일 100x100, [번호][썸네일][본문] 순, 행 아래 1px #e9eaec
   krds.css:1333 이 .wrap__list 를 라운드 카드로 만들고 .wrap__list li 에
   패딩·테두리를 주므로 둘 다 무력화한다(시안은 카드 없이 구분선만).
   ========================================================================== */
.kl-page .cont__thumb .wrap__list.kl-list{
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #e9eaec;
	border-radius: 0;
	background: none;
	list-style: none;
}

.kl-page .wrap__list.kl-list > li.kl-item{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 20px;
	padding: 24px 4px;
	border-bottom: 1px solid #e9eaec;
	background: none;
}

.kl-page .wrap__list.kl-list > li.kl-item:last-child{
	border-bottom: 1px solid #e9eaec;
}

/* --- 번호 --- */
.kl-page .kl-item__num{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 26px;
	padding-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: #99a1af;
	text-align: center;
}

/* --- 썸네일 --- */
.kl-page .kl-item__thumb{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	border: 1px solid #e0e0e0;
	border-radius: var(--krds-radius-s);
	background: #f4f5f6;
	overflow: hidden;
}

.kl-page .kl-item__thumb a{
	display: block;
	width: 100%;
	height: 100%;
}

.kl-page .kl-item__thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 본문 --- */
.kl-page .kl-item__body{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

.kl-page .kl-item__head{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.kl-page .kl-item__title{
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #1b2d52;
	letter-spacing: -0.02em;
}

.kl-page .kl-item__title:hover,
.kl-page .kl-item__title:focus{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 배지 : 기존 btn-list1~4.png 아이콘을 텍스트 pill 로 교체.
   시안 실측 : 테두리·글자 회색(#99a1af 계열), 11px */
.kl-page .kl-item__badge{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 21px;
	padding: 0 7px;
	border: 1px solid #ccd1d8;
	border-radius: var(--krds-radius-xs);
	background: var(--krds-bg-surface);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: #7d8593;
	white-space: nowrap;
	transition: border-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.kl-page a.kl-item__badge:hover,
.kl-page a.kl-item__badge:focus{
	border-color: #1b2d52;
	color: #1b2d52;
	text-decoration: none;
}

/* 메타 : 유형분류 / 작성시기 / 편저자 / 소장처 */
.kl-page .kl-item__meta{
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5565;
}

.kl-page .kl-item__meta .kl-sep{
	margin: 0 6px;
	color: #b1b8be;
}

/* 설명 : 2줄 넘으면 말줄임 */
.kl-page .kl-item__desc{
	display: -webkit-box;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #333d4b;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 결과 없음 */
.kl-page .wrap__list.kl-list > li.kl-empty{
	display: block;
	padding: 80px 0;
	border-bottom: 1px solid #e9eaec;
	font-size: 15px;
	color: #6d7882;
	text-align: center;
}


/* ==========================================================================
   [5] 페이지네이션
   --------------------------------------------------------------------------
   시안은 [번호 = 가운데] [페이지 이동 = 오른쪽] 이지만 마크업은
   .page--move__input 이 먼저 나오고, content.css:401 이 그것을
   position:absolute; right:0; top:0 으로 띄워 둔다.
   JS(changeLocation)가 DOM 구조에 의존하므로 마크업은 그대로 두고
   position 을 static 으로 되돌린 뒤 flex order 로만 자리를 바꿨다.
   ========================================================================== */
.kl-page .wrap__page--count{
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.kl-page .wrap__page--count .page__num{
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	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;
	gap: 4px;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	float: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.kl-page .wrap__page--count .page__num a,
.kl-page .wrap__page--count .page__num strong,
.kl-page .wrap__page--count .page__num span{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-width: 34px;
	width: auto;
	height: 34px;
	margin: 0;
	padding: 0 6px;
	border: 1px solid #e0e0e0;
	border-radius: var(--krds-radius-s);
	background: var(--krds-bg-surface);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: #4a5565;
	text-decoration: none;
	text-indent: 0;
}

.kl-page .wrap__page--count .page__num a:hover{
	border-color: #1b2d52;
	background: var(--krds-bg-surface);
	color: #1b2d52;
}

/* 현재 페이지 : PageNavigator 가 <strong> 또는 .on / .active 로 표기한다 */
.kl-page .wrap__page--count .page__num strong,
.kl-page .wrap__page--count .page__num a.on,
.kl-page .wrap__page--count .page__num a.active{
	border-color: #1b2d52;
	background: #1b2d52;
	color: #fff;
	font-weight: 700;
}

/* --- 페이지 이동 입력 --- */
.kl-page .wrap__page--count .page--move__input{
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
	position: static;
	right: auto;
	top: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 6px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	float: none;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: #4a5565;
}

/* krds.css 의 input[type="text"](0,1,1) 을 이기려면 클래스가 더 필요하다 */
.kl-page .wrap__page--count .page--move__input input.ui-pg-input{
	width: 52px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid #d0d3d8;
	border-radius: var(--krds-radius-s);
	background: var(--krds-bg-surface);
	font-size: 13px;
	line-height: normal;
	color: #333d4b;
	text-align: center;
}

.kl-page .wrap__page--count .page--move__input .btn--go{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-width: 42px;
	width: auto;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #1b2d52;
	border-radius: var(--krds-radius-s);
	background: #1b2d52;
	font-size: 13px;
	color: #fff;
	text-indent: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.kl-page .wrap__page--count .page--move__input .btn--go:hover{
	background: #14223e;
	color: #fff;
}


/* ==========================================================================
   [6] SNB 제공서비스 (국역 / 표점)
   --------------------------------------------------------------------------
   3차(2026-09-01)에 단순 링크 목록 → 카테고리와 같은 트리 그룹으로 바꿨다.
   그래서 전용 스타일이 필요 없다.
   그룹 행(.kl-snb__svc__list > li > a)과 그 안의 트리는
   krds-chrome.css [4] 절의 `.wrap__snb nav > ul > li > a` / `.simpleTree`
   규칙을 그대로 물려받는다.

   남긴 규칙은 카테고리 <ul> 과 제공서비스 <ul> 이 두 개의 목록이 아니라
   한 목록으로 이어져 보이게 하는 것뿐이다.
   ========================================================================== */
.wrap__snb nav > ul.kl-snb__svc__list{
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ==========================================================================
   [7] 접근성
   ========================================================================== */

/* 분류 탭 : 체크박스를 감췄으므로 키보드 포커스를 라벨 셀에 보이게 한다 */
.kl-page .wrap__content__filter__list > li .checkbox__wrap input[type="checkbox"]:focus-visible + .checkbox__wrap--style1{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: -3px;
}

/* Windows 고대비 모드 : CSS 로 그린 아이콘이 사라지지 않게 */
@media (forced-colors: active){
	.kl-page .path ul li.home:before{ background: ButtonText; }
	.kl-page .wrap__content__filter--more:after{ border-color: ButtonText; }
	.kl-page .wrap__content__filter__list > li .checkbox__wrap input[type="checkbox"]:checked + .checkbox__wrap--style1{
		outline: 2px solid ButtonText;
		outline-offset: -3px;
	}
}

@media (prefers-reduced-motion: reduce){
	.kl-page .wrap__content__filter__list > li .checkbox__wrap .checkbox__wrap--style1,
	.kl-page .wrap__list__util .wrap__list__util__option .btn__list--toggle,
	.kl-page .kl-item__badge{
		transition: none;
	}
}


/* ==========================================================================
   [8] 간략보기 테이블 (vmode == 'tbl')
   --------------------------------------------------------------------------
   시안 : design-ref/spcont_list_간략보기.png (3018x2600, 2배율)

   krds.css [11] 이 이 테이블을 흰 카드(테두리 + radius + border-collapse:separate)
   로 만들어 두었는데 시안은 평평한 표다. `.kl-page` 스코프로 되돌린다.

   [시안 실측 - 뷰포트 1509 / 콘텐츠 폭 1260.5 기준]
     헤더      높이 38, 배경 #eef2f7, 글자 15 볼드 #131416, 아래 테두리 1px #d6e0eb
     본문 행   높이 77 (= 제공형태 배지 블록 53 + 상하 패딩 12)
     행 구분선 1px #cdd1d5
     셀 패딩   좌우 16 (헤더/본문 동일), 모든 컬럼 왼쪽 정렬
     본문 글자 15 #464c53

   ※ 시안의 헤더 라벨은 3번째 컬럼부터 데이터보다 오른쪽으로 최대 160px 밀려 있다.
     데이터 쪽 왼쪽 끝은 두 행이 정확히 일치하므로(241 / 320.5 / 741 / ...)
     헤더 라벨 위치가 시안 제작상의 오차다. 표로서 맞는 쪽(헤더=데이터 정렬)을 따랐다.
   ========================================================================== */
.kl-page table.list__table{
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
	/* ※ table-layout:fixed 없이는 <col width> 가 힌트일 뿐이라
	   브라우저가 내용에 맞어 재배분한다(제공형태가 142→146 으로 밀렸음).
	   시안은 컬럼 폭이 고정이고, 페이지마다 컬럼이 흔들리지 않는 쪽이 맞다. */
	table-layout: fixed;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.kl-page table.list__table th{
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-bottom: 1px solid #d6e0eb;
	background: #eef2f7;
	font-size: 15px;
	font-weight: 700;
	color: #131416;
	text-align: left;
	white-space: nowrap;
}

.kl-page table.list__table td{
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid #cdd1d5;
	background: none;
	/* ★ font-size 를 td 에 명시해야 한다.
	   문서 앞쪽에서 td 를 14px 로 잡는 규칙이 있어
	   table 에만 주면 상속되지 않고 밀린다.
	   시안 실측 : 본문 17px (헤더 15px 보다 크다).
	   같은 문자열 잉크 폭 비율로 3군데서 1.133 / 1.137 / 1.146 이 나왔다.
	   `.content` 의 KRDS Body medium(17px)을 그대로 받는 것으로 보인다. */
	font-size: 17px;
	color: #464c53;
	text-align: left;
	vertical-align: middle;
	word-break: normal;			/* keep-all 은 좁은 컬럼에서 넘친다([2-3] 참고) */
	overflow-wrap: break-word;
}

/* krds.css 의 카드 모서리 radius 4종을 끈다 */
.kl-page table.list__table tr:first-child th:first-child,
.kl-page table.list__table tr:first-child th:last-child,
.kl-page table.list__table tr:last-child td:first-child,
.kl-page table.list__table tr:last-child td:last-child{
	border-radius: 0;
}

/* krds.css 는 마지막 행의 구분선을 지운다. 시안은 남아 있다. */
.kl-page table.list__table tr:last-child td{
	border-bottom: 1px solid #cdd1d5;
}

.kl-page table.list__table tr:hover td{
	background: #f7f9fb;
}

.kl-page table.list__table tr:hover th{
	background: #eef2f7;
}

.kl-page table.list__table a{
	color: inherit;
	font-weight: 400;
	text-decoration: none;
}

.kl-page table.list__table a:hover,
.kl-page table.list__table a:focus{
	color: #1b2d52;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kl-page table.list__table .kl-tbl__empty{
	padding: 40px 16px;
	color: #6d7882;
	text-align: center;
}


/* --- 제공형태 : 해제 / 원문 / 국역 / 이미지 2x2 배지 ---
   시안 실측 : 배지 54x24, radius 4, 가로 간격 6 / 세로 간격 5
               활성 #063a74 + 흰 글자 / 비활성 #cdd1d5 + #6d7882 글자
   활성은 <a>, 비활성은 <span> 이라 마크업만으로 구분된다.
   (기존 btn-list1~4-table(-off).png 4컬럼을 대체) */
.kl-page .kl-svc{
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(2, 54px);
	gap: 5px 6px;
	width: 114px;
}

.kl-page .kl-svc__i{
	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;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 24px;
	padding: 0 4px;
	border-radius: var(--krds-radius-s);
	background: #cdd1d5;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: #6d7882;
	text-align: center;
	white-space: nowrap;
}

/* 자료가 있는 항목 (<a>) */
.kl-page table.list__table a.kl-svc__i.is-on{
	background: #063a74;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.kl-page table.list__table a.kl-svc__i.is-on:hover,
.kl-page table.list__table a.kl-svc__i.is-on:focus{
	background: #0a4a90;
	color: #fff;
	text-decoration: none;
}

@media (forced-colors: active){
	.kl-page .kl-svc__i{ border: 1px solid ButtonText; }
	.kl-page table.list__table a.kl-svc__i.is-on{ border-color: Highlight; }
}