@charset "UTF-8";

/* ==========================================================================
   KRDS UI - 메인 화면 전용 (main/home.jsp — 헤더·본문·푸터가 한 파일에 있다)
   --------------------------------------------------------------------------
   로딩순서 : base → jquery-ui → common → content → swiper → main → krds
              → krds-main.css (최후순위)

   ※ 이 파일은 head_main.jsp 에서만 로드된다. 서브·뷰어 화면은 읽지 않는다.
   ※ 디자인 토큰(--krds-*)은 krds.css 에서 정의된 것을 사용한다.

   [설계 원칙]
   메인 마크업을 시안에 맞춰 전면 교체하면서 모든 클래스에 `km-` 접두를 붙였다.
   기존 main.css / common.css / content.css 의 어떤 셀렉터와도 겹치지 않으므로
   특이도 경쟁이나 예기치 못한 상속이 발생하지 않는다.
   기존 id(#header, #footer)만 유지되므로 그 둘만 명시적으로 재정의한다.

   [목차]
     [0] 리셋 / 공통
     [1] 헤더 : 글로벌바
     [2] 헤더 : 히어로 + 통합검색
     [3] 섹션 공통 (제목 / 더보기 버튼)
     [4] 주요 자료유형
     [5] 오늘의 추천
     [6] 최신 등록 자료 (swiper)
     [7] 푸터
     [8] 접근성 / 인쇄 / 모션
   ========================================================================== */


/* ==========================================================================
   [0] 리셋 / 공통
   --------------------------------------------------------------------------
   base.css 는 `*{margin:0;padding:0}` 만 걸고 box-sizing 은 :before/:after 에만
   적용한다. km- 영역은 전부 border-box 로 통일해야 폭 계산이 맞는다.
   common.css 의 body{letter-spacing:-0.05em} 도 여기서 정상값으로 되돌린다.
   ========================================================================== */
#header,
#header *,
#footer,
#footer *,
.km-main,
.km-main *{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#header,
#footer,
.km-main{
	letter-spacing: -0.02em;
	font-family: "Pretendard", "Pretendard Variable", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* 컨테이너 폭
   --------------------------------------------------------------------------
   시안 아트보드는 1512px(2배율 원본 3016px)이고 본문 컨테이너는 1372px 이다.
   근거 : 자료유형 카드 8장이 원본에서 카드 322px + 간격 24px 로 배치되어
          8*322 + 7*24 = 2744px, ÷2 = 1372px.

   기존 서브 화면은 1200px 고정이지만, 메인을 1200 에 가두면 카드가 13% 좁아져
   설명이 한 줄 더 접히고 썸네일 비율이 정사각형에 가까워진다(시안은 가로형).

   그렇다고 1372 고정으로 두면 1366/1280 노트북에서 가로 스크롤이 새로 생긴다.
   → 상한만 1372 로 두고 그 아래에서는 좌우 40px 여백을 유지하며 줄어들게 한다.
     1512 뷰포트에서 정확히 1372 가 되어 시안과 일치하고,
     좁은 화면에서도 기존과 같이 가로 스크롤 없이 동작한다. */
.km-sec__inner,
.km-hero__inner,
.km-gnb__inner,
.km-footer__inner{
	width: calc(100% - 80px);
	max-width: 1372px;
	margin: 0 auto;
	padding: 0;
}

/* 스크린리더 전용 */
.km-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;
}

/* .km-main 은 기존 .main__container 를 대체한다 */
.km-main{
	min-width: 1200px;
	background: var(--krds-bg-surface);
}


/* ==========================================================================
   [1] 헤더 : 글로벌바
   --------------------------------------------------------------------------
   main.css 의 #header 는 height/background 를 갖고 있으므로 여기서 무력화한다.
   메인은 서브와 달리 JS 픽셀 계산(resizeWindow)이 없어 높이를 자유롭게 잡아도 된다.
   (서브 화면의 #header 160px 제약은 krds.css 쪽 이야기이며 이 파일과 무관하다.)
   ========================================================================== */
#header{
	position: relative;
	height: auto;
	min-width: 1200px;
	background: none;
}

.km-gnb{
	background: #1a1f36;			/* 시안 실측 rgb(26,31,54) */
	height: 40px;					/* 시안 실측 40px */
}

.km-gnb__inner{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 40px;
}

.km-gnb__list{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 28px;
	list-style: none;
}

.km-gnb__list > li > a{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 6px;
	height: 40px;
	color: rgba(255,255,255,.88);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

.km-gnb__list > li > a:hover,
.km-gnb__list > li > a:focus{
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 꺾쇠(>) : 이미지 자산 없이 border 로 그린다 */
.km-gnb__arw{
	display: inline-block;
	width: 5px; height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: .8;
}

.km-gnb__list > li > a:focus-visible{
	outline: var(--krds-focus-width) solid #fff;
	outline-offset: -2px;
}


/* ==========================================================================
   [2] 헤더 : 히어로 + 통합검색
   --------------------------------------------------------------------------
   배경 3중 레이어(앞 레이어가 위에 그려짐)
     1) 어두운 오버레이 그라데이션 — 흰 글자 대비 확보 (WCAG AA)
     2) bg-header.png  — 기존 필사본 워터마크
     3) 폴백 단색       — 이미지 미로드 시에도 대비 유지

   TODO(디자인) 시안의 고문서 실사 배경은 자산이 없어 대체했다.
   실사진을 받으면 아래 url() 만 교체하면 된다.
   ========================================================================== */
/* 시안 측정값 : 히어로 높이 480px, GNB 40px → 헤더 전체 520px

   ★ 배경 이미지 문제
   시안 배경은 목조 + 고문서 실사진(대표색 #251A10 / #443320 웜브라운)인데,
   프로젝트에 있는 bg-header.png 는 네이비 블루 필사본 워터마크다(1300x330).
   실사진 자산이 없어 filter 로 색조를 웜브라운으로 돌려 대체했다.
     sepia   → 갈색 계열로 변환
     hue-rotate/saturate → 시안의 붉은 기 보정
     brightness/contrast → 시안 명도(#251A10 수준)까지 낮춤
   ※ 실사진을 받으면 .km-hero:before 의 url() 만 교체하고 filter 는 지우면 된다.

   이미지를 :before 로 뺀 이유 : filter 는 요소 전체(자식 텍스트 포함)에 걸리므로
   배경에만 적용하려면 별도 레이어가 필요하다. */
/* 배경은 CSS 로 색을 만들지 않는다. 이미지 한 장만 깐다.
   그라데이션 오버레이·filter·색 레이어 전부 제거했다.

   bg-hero.jpg (1920x640) — 색보정을 CSS 가 아니라 이미지 자체에 구워 넣었다.
   원본은 bg-header.png(네이비 필사본 워터마크)이고, 시안 히어로의 대표색
   #251A10 에 맞춰 웜브라운으로 톤을 바꾼 뒤 저장한 것이다(결과 대표색 #2C2312).

   ★ 이 파일은 시안의 실사진이 아니라 대체품이다.
     시안 원본(목조 서까래 + 펼친 고문서) 사진을 받으면
     같은 이름으로 덮어쓰기만 하면 된다. CSS 는 손댈 필요 없다.
     단, 흰 글자가 얹히므로 어둡게 보정된 상태로 준비되어야 한다. */
.km-hero{
	position: relative;
	height: 480px;
	background: url('../images/main/bg-hero.jpg') no-repeat center center;
	background-size: cover;
}

.km-hero__inner{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
}

/* --- 로고/타이틀 ---
   시안 측정 : 로고 블록 330x47, 아래 여백 37px, 색은 흰색 단색.

   ★ CSS filter 를 쓰지 않는다.
     처음엔 컬러 로고 sta-main.png 에 filter: brightness(0) invert(1) 을 걸어
     흰색화했는데, 이 PNG 는 밝은 배경용이라 글자 둘레에 부드러운 외곽 글로우가
     이미지에 구워져 있다. invert 를 걸면 그 저알파 영역까지 흰색으로 뒤집혀
     글자 주변에 흰 후광이 번졌다(= "그라데이션").
     → 알파를 정리한 흰색 전용 파일 sta-main-white.png 를 만들어 그대로 쓴다.

   ※ 시안의 로고는 심볼 비율이 더 작은 다른 락업(330:47 = 7.0:1)이고
     sta-main-white.png 은 5.0:1 이다. 정식 흰색 로고를 받으면 파일만 교체할 것. */
.km-hero__title{
	margin: 0 0 37px;
	line-height: 1;
}

.km-hero__title img{
	display: block;
	height: 47px;
	width: auto;
}

.km-hero__title a:focus-visible{
	outline: var(--krds-focus-width) solid #fff;
	outline-offset: 6px;
	border-radius: var(--krds-radius-s);
}

/* --- 검색줄 : 검색바 + 문자입력기 --- */
/* ★ 검색바는 "페이지 가운데" 에 와야 한다.
   이전에는 [검색바 + 문자입력기] 를 하나의 flex 행으로 묶어 가운데 정렬했는데,
   그러면 문자입력기 폭까지 포함해 중앙을 잡으므로 검색바가 60px 왼쪽으로 밀린다.
   그 결과 가운데 정렬된 "고서 · 고문서 …" 안내문과 축이 어긋나 보였다.

   시안 실측 : 검색바 중심 = 뷰포트 중심. 문자입력기는 그 오른쪽에 매달려 있다.
   → 행 자체를 검색바 폭(670px)으로 고정해 가운데 두고,
     문자입력기는 흐름에서 빼내 절대배치한다. */
.km-hero__searchrow{
	position: relative;
	width: 670px;
	margin: 0 auto;
}

/* 시안 측정 : 670 x 52, 모서리 반경 6px */
.km-search{
	position: relative;
	width: 670px;
	height: 52px;
	background: #fff;
	border-radius: var(--krds-radius-m);
	box-shadow: 0 4px 18px rgba(0,0,0,.20);
}

/* ★★ 셀렉터를 반드시 `.km-search .km-search__input` 로 둘 것 (클래스 2개)
   krds.css 664행의 `input[type="text"]{ border:1px solid; height:48px;
   padding:0 16px; font-size:17px; border-radius:8px }` 는 특이도가 (0,1,1) 이라
   클래스 하나짜리 `.km-search__input` (0,1,0) 을 이긴다.
   그래서 검색창에 테두리가 살아나 흰 박스와 겹쳐 "선이 두 줄"로 보였고,
   높이·패딩·글자크기도 전부 krds.css 값으로 덮여 시안 치수가 먹지 않았다.
   클래스 2개(0,2,0)로 올려야 확실히 이긴다.

   ★ line-height 를 height 와 같은 값(64px)으로 두었더니 입력 글자와
   placeholder 의 아래쪽이 잘렸다. input 은 자체적으로 글자를 수직 중앙에
   맞추므로 line-height 는 normal 로 두어야 한다.

   시안 측정 : 좌패딩 20px, 글자 16px */
.km-search .km-search__input{
	width: 100%;
	height: 52px;
	padding: 0 56px 0 20px;
	border: 0;
	background: transparent;
	border-radius: var(--krds-radius-m);
	font-size: 16px;
	line-height: normal;
	color: var(--krds-text-default);
	letter-spacing: -0.02em;
	box-shadow: none;
}

/* krds.css 의 input hover/focus 도 테두리·그림자를 되살리므로 함께 무력화한다 */
.km-search .km-search__input:hover,
.km-search .km-search__input:focus{
	border: 0;
	box-shadow: none;
	background: transparent;
}

.km-search__input::-webkit-input-placeholder{ color: var(--krds-gray-40); }
.km-search__input::-moz-placeholder{ color: var(--krds-gray-40); opacity: 1; }
.km-search__input:-ms-input-placeholder{ color: var(--krds-gray-40); }
.km-search__input::placeholder{ color: var(--krds-gray-40); }

/* 포커스 링은 input 이 아니라 흰 박스(.km-search) 바깥에 그린다.
   input 에 걸면 박스 안쪽에 사각 링이 생겨 라운드 박스와 겹쳐 보인다. */
.km-search:focus-within{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: var(--krds-focus-offset);
}

/* 돋보기 : 이미지 자산 없이 원 + 손잡이로 그린다.
   시안 측정 : 아이콘 약 21px, 검색바 우측 안쪽 17px 지점 */
.km-search__btn{
	position: absolute;
	top: 50%; right: 8px;
	width: 40px; height: 40px;
	margin-top: -20px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--krds-radius-s);
	cursor: pointer;
}

.km-search__btn:before{
	content: "";
	position: absolute;
	top: 11px; left: 11px;
	width: 14px; height: 14px;
	border: 1.8px solid var(--krds-gray-80);
	border-radius: 50%;
}

.km-search__btn:after{
	content: "";
	position: absolute;
	top: 25px; left: 24px;
	width: 7px; height: 1.8px;
	background: var(--krds-gray-80);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

.km-search__btn:hover{ background: var(--krds-gray-5); }

/* --- 문자입력기 ---
   검색바 오른쪽 바깥에 절대배치한다(위 .km-hero__searchrow 주석 참고).
   시안 측정 : 검색바 우측 끝에서 28px, 아이콘 24x17, 아이콘~글자 8px, 14px 볼드 --- */
.km-hero__ime{
	position: absolute;
	left: 100%;
	top: 50%;
	margin-left: 28px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	height: 32px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.km-hero__ime:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 키보드 아이콘 : 자산 없이 사각 테두리 + 점 3개(가상요소 box-shadow) */
.km-hero__ime__ico{
	position: relative;
	display: inline-block;
	width: 24px; height: 17px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.km-hero__ime__ico:before{
	content: "";
	position: absolute;
	top: 4px; left: 4px;
	width: 2.5px; height: 2.5px;
	background: currentColor;
	box-shadow: 5.5px 0 0 currentColor, 11px 0 0 currentColor;
}

.km-hero__ime__ico:after{
	content: "";
	position: absolute;
	bottom: 3.5px; left: 6px;
	width: 10px; height: 2.5px;
	background: currentColor;
}

.km-hero__ime:focus-visible{
	outline: var(--krds-focus-width) solid #fff;
	outline-offset: 4px;
	border-radius: var(--krds-radius-s);
}

/* --- 자료유형 안내문 ---
   시안 측정 : 검색바 아래 20px, 글자 15px, 가운데 정렬 --- */
.km-hero__types{
	margin: 20px 0 0;
	color: rgba(255,255,255,.82);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	letter-spacing: -0.01em;
}


/* ==========================================================================
   [3] 섹션 공통
   ========================================================================== */
.km-sec{
	padding: 72px 0 0;
}

.km-sec--latest{
	padding-bottom: 80px;
}

/* 시안 실측(2배율 원본 ÷2) : 설명 글자 아래 ~24px 지점에서 카드가 시작한다 */
.km-sec__head{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 24px;
}

/* 시안 실측 : 잉크 높이 23px → 약 26px 볼드, 색 #1a1a1a */
.km-sec__title{
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
	letter-spacing: -0.03em;
}

/* 시안 실측 : 잉크 높이 12px → 약 15px, 색 #666 (중성 회색. 기존 토큰은 푸른기가 있다) */
.km-sec__desc{
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #666666;
}

/* --- 아웃라인 버튼 (전체 자료유형 보기) --- */
.km-btn-outline{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	height: var(--krds-control-s);
	padding: 0 18px;
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-m);
	background: var(--krds-bg-surface);
	color: var(--krds-text-basic);
	font-size: 15px;
	white-space: nowrap;
	transition: border-color var(--krds-duration) var(--krds-easing),
	            background-color var(--krds-duration) var(--krds-easing);
}

.km-btn-outline:hover{
	border-color: var(--krds-gray-40);
	background: var(--krds-gray-5);
}

.km-btn-outline__arw{
	display: inline-block;
	width: 6px; height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* ==========================================================================
   [4] 주요 자료유형
   --------------------------------------------------------------------------
   카드 8장 1행. 1200 - (gap 12 × 7) = 1116 → 카드 폭 139.5px.
   flex 로 균등 분배하므로 폭을 하드코딩하지 않는다.
   본문 2줄까지 노출하고 넘치면 말줄임(-webkit-line-clamp) — 글자 크기를 키워도
   카드 높이가 흔들리지 않게 하기 위함이다.
   ========================================================================== */
.km-typelist{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 12px;
	list-style: none;
}

.km-typecard{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
}

/* 시안 실측 : 카드 전체 240px(썸네일 134 + 본문 106), 모서리 10px, 테두리 #e0e0e0 */
.km-typecard__link{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: var(--krds-bg-surface);
	overflow: hidden;
	transition: border-color var(--krds-duration) var(--krds-easing),
	            box-shadow var(--krds-duration) var(--krds-easing),
	            transform var(--krds-duration) var(--krds-easing);
}

.km-typecard__link:hover{
	border-color: #1b64da;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

/* 시안의 강조(파란 테두리) 카드 — 실측 : 2px solid #1b64da
   이전엔 1px + inset box-shadow 로 두께를 흉내 냈는데 색이 두 겹으로 겹쳐 탁했다.
   테두리가 2px 로 늘어난 만큼 안쪽 내용이 1px 밀리지 않도록 box-sizing 은
   [0] 절에서 border-box 로 통일되어 있다. */
.km-typecard.is-current .km-typecard__link{
	border: 2px solid #1b64da;
}

.km-typecard__thumb{
	display: block;
	height: 134px;
	overflow: hidden;
	background: var(--krds-gray-5);
}

.km-typecard__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 시안 실측 : 본문 좌우 여백 14px, 이름은 본문 상단에서 10px, 15px 볼드 #1a1a1a */
.km-typecard__name{
	display: block;
	margin: 10px 14px 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a;
}

/* 시안 실측 : 13px, 색 #666, 이름 바로 아래 3px, 2줄 고정 */
.km-typecard__desc{
	display: -webkit-box;
	margin: 3px 14px 0;
	font-size: 13px;
	line-height: 1.5;
	color: #666666;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 39px;			/* 13px × 1.5 × 2줄 */
}

/* 시안 실측 : 건수 줄은 설명 아래 3px, 카드 하단 여백 12px */
.km-typecard__foot{
	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;
	margin: auto 14px 0;
	padding: 3px 0 12px;
}

/* 시안 실측 : 13px 볼드, 색 #1b64da (선택카드 테두리와 같은 파랑) */
.km-typecard__cnt{
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	color: #1b64da;
}

.km-typecard__arw{
	display: inline-block;
	width: 6px; height: 6px;
	border-top: 1.5px solid var(--krds-gray-40);
	border-right: 1.5px solid var(--krds-gray-40);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-ms-flex-negative: 0;
	flex-shrink: 0;
}


/* ==========================================================================
   [5] 오늘의 추천
   --------------------------------------------------------------------------
   시안의 베이지 카드. 종이/한지 느낌을 유지하되 텍스트 대비는 AA 이상으로 잡는다.
   (진갈색 #3d2b1a on 베이지 #e8dcc4 = 대비 약 9:1)
   ========================================================================== */
.km-picklist{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 20px;
	list-style: none;
}

.km-pickcard{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 232px;
	padding: 28px 24px 24px;
	border-radius: var(--krds-radius-l);
	background: #e8dcc4;
}

.km-pickcard__title{
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #3d2b1a;
	letter-spacing: -0.03em;
}

.km-pickcard__desc{
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #5b4630;
}

.km-pickcard__btn{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-item-align: start;
	align-self: flex-start;
	gap: 10px;
	margin-top: auto;
	height: var(--krds-control-xs);
	padding: 0 16px;
	border-radius: var(--krds-radius-s);
	background: #4a3520;
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
	transition: background-color var(--krds-duration) var(--krds-easing);
}

.km-pickcard__btn:hover{
	background: #2f2114;
}

.km-pickcard__arw{
	display: inline-block;
	width: 6px; height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.km-pickcard__btn:focus-visible{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: 2px;
}


/* ==========================================================================
   [6] 최신 등록 자료 (swiper)
   --------------------------------------------------------------------------
   swiper.min.css 가 이미 로드되어 있으므로 slide 폭만 지정하고 나머지는 맡긴다.
   좌우 화살표는 swiper 기본 스타일(btn-next/prev.png 배경)을 완전히 덮어쓴다.
   ========================================================================== */
.km-latest{
	position: relative;
}

.km-latest__viewport{
	overflow: hidden;
	padding-bottom: 4px;			/* hover 시 그림자 잘림 방지 */
}

/* 슬라이드 폭은 head_main.jsp 의 Swiper 옵션(slidesPerView/spaceBetween)이
   인라인 style 로 계산해 넣는다. 여기서 width 를 주면 인라인에 밀려 무시되므로
   높이 관련만 지정한다. */
.km-latest__slide{
	height: auto;
}

.km-datacard{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
}

.km-datacard__thumb{
	position: relative;
	display: block;
	height: 200px;
	margin-bottom: 14px;
	border-radius: var(--krds-radius-m);
	background: var(--krds-gray-5);
	overflow: hidden;
}

.km-datacard__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s var(--krds-easing);
}

/* NEW 뱃지 : 흰 글자 on #d92b3a = 대비 5.0:1 (WCAG AA 통과)
   확대(scale)되는 img 위에 얹히므로 z-index 로 띄운다. */
.km-datacard__new{
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	display: inline-block;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--krds-radius-s);
	background: #d92b3a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: .04em;
}

.km-datacard:hover .km-datacard__thumb img{
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

.km-datacard__title{
	display: -webkit-box;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--krds-text-default);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 44px;			/* 15px × 1.45 × 2줄 */
}

.km-datacard:hover .km-datacard__title{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.km-datacard__type{
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--krds-text-assistive);
}

/* 등록일 : 현재 항상 비어 있다(백엔드 SELECT 절에 없음).
   비어 있어도 자리를 차지해 카드 높이가 흔들리지 않도록 min-height 를 준다. */
.km-datacard__date{
	display: block;
	margin-top: 4px;
	min-height: 18px;
	font-size: 13px;
	line-height: 18px;
	color: var(--krds-text-disabled);
}

.km-datacard:focus-visible{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: 4px;
	border-radius: var(--krds-radius-m);
}

/* --- 좌우 내비게이션 : swiper 기본 배경이미지 제거 후 원형 버튼으로 --- */
.km-latest__nav.swiper-button-prev,
.km-latest__nav.swiper-button-next{
	position: absolute;
	top: 100px;					/* 썸네일(200px) 세로 중앙 */
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	background-image: none;
	background-color: #fff;
	border: 1px solid var(--krds-border-light);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,.10);
	cursor: pointer;
	z-index: 5;
}

.km-latest__nav.swiper-button-prev{ left: -22px; }
.km-latest__nav.swiper-button-next{ right: -22px; }

.km-latest__nav:before{
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-top: 2px solid var(--krds-gray-70);
	border-right: 2px solid var(--krds-gray-70);
}

.km-latest__nav--next:before{
	-webkit-transform: translate(-65%,-50%) rotate(45deg);
	transform: translate(-65%,-50%) rotate(45deg);
}

.km-latest__nav--prev:before{
	-webkit-transform: translate(-35%,-50%) rotate(-135deg);
	transform: translate(-35%,-50%) rotate(-135deg);
}

.km-latest__nav:hover{
	background-color: var(--krds-gray-5);
	border-color: var(--krds-gray-40);
}

.km-latest__nav.swiper-button-disabled{
	opacity: .35;
	cursor: default;
}


/* ==========================================================================
   [7] 푸터
   --------------------------------------------------------------------------
   main.css 의 `#footer{height:90px}` 를 무력화해야 한다. (시안 푸터가 더 높음)
   ========================================================================== */
#footer.km-footer{
	position: relative;
	height: auto;
	min-width: 1200px;
	background: var(--krds-bg-surface);
}

/* --- 관련사이트 아코디언 --- */
.km-related{
	border-top: 1px solid var(--krds-border-subtle);
	border-bottom: 1px solid var(--krds-border-subtle);
	background: var(--krds-bg-surface);
}

.km-related__head{
	margin: 0;
}

.km-related__toggle{
	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;
	width: 100%;
	height: 64px;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--krds-text-basic);
	cursor: pointer;
	text-align: left;
}

/* +/− 아이콘 : 가로줄 + 세로줄, 펼침 상태에서 세로줄만 숨긴다 */
.km-related__ico{
	position: relative;
	display: inline-block;
	width: 16px; height: 16px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.km-related__ico:before,
.km-related__ico:after{
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	background: var(--krds-gray-60);
}

.km-related__ico:before{
	width: 14px; height: 1.5px;
	margin: -0.75px 0 0 -7px;
}

.km-related__ico:after{
	width: 1.5px; height: 14px;
	margin: -7px 0 0 -0.75px;
	transition: opacity var(--krds-duration) var(--krds-easing),
	            transform var(--krds-duration) var(--krds-easing);
}

.km-related__toggle[aria-expanded="true"] .km-related__ico:after{
	opacity: 0;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.km-sitelist{
	list-style: none;
	padding: 0 0 20px;
}

.km-sitelist[hidden]{
	display: none;
}

.km-sitelist > li > a{
	display: inline-block;
	padding: 6px 0;
	font-size: 14px;
	color: var(--krds-text-assistive);
}

.km-sitelist > li > a:hover{
	color: var(--krds-text-point);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 기관 정보 --- */
.km-footer__body{
	padding: 36px 0 40px;
	background: var(--krds-gray-5);
}

.km-footer__top{
	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;
	margin-bottom: 22px;
}

.km-footer__logo{
	margin: 0;
	line-height: 1;
}

.km-footer__logo img{
	display: block;
	height: 32px;
	width: auto;
}

.km-footer__notice{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--krds-text-basic);
}

.km-footer__notice:hover{
	color: var(--krds-text-point);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.km-footer__arw{
	display: inline-block;
	width: 6px; height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.km-footer__addr{
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--krds-text-assistive);
	font-style: normal;
}

/* 대표전화 / FAX / E-mail : 라벨-값 정렬 */
.km-footer__contact{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.km-footer__contact__row{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 14px;
	line-height: 1.6;
}

.km-footer__contact dt{
	width: 76px;
	font-weight: 700;
	color: var(--krds-text-basic);
}

.km-footer__contact dd{
	position: relative;
	margin: 0 0 0 16px;
	padding-left: 17px;
	color: var(--krds-text-assistive);
}

/* 라벨과 값 사이 구분선 */
.km-footer__contact dd:before{
	content: "";
	position: absolute;
	top: 50%; left: 0;
	width: 1px; height: 12px;
	margin-top: -6px;
	background: var(--krds-border-light);
}

.km-footer__contact dd a{
	color: inherit;
}

.km-footer__contact dd a:hover{
	color: var(--krds-text-point);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 하단 바 --- */
.km-footer__bottom{
	border-top: 1px solid var(--krds-border-subtle);
	background: var(--krds-gray-5);
}

.km-footer__bottom .km-footer__inner{
	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;
	min-height: 56px;
}

.km-footer__policy{
	font-size: 14px;
	font-weight: 500;
	color: var(--krds-text-basic);
}

.km-footer__policy:hover{
	color: var(--krds-text-point);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.km-footer__copy{
	margin: 0;
	font-size: 13px;
	color: var(--krds-text-disabled);
}

/* --- 정부 누리집 배너 --- */
.km-footer__gov{
	border-top: 1px solid var(--krds-border-subtle);
	background: var(--krds-bg-surface);
}

.km-footer__gov .km-footer__inner{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 12px;
	min-height: 52px;
}

.km-footer__gov__logo{
	display: block;
	height: 20px;
	width: auto;
}

.km-footer__gov__txt{
	font-size: 13px;
	color: var(--krds-text-assistive);
}


/* ==========================================================================
   [8] 접근성 / 인쇄 / 모션
   ========================================================================== */

/* Windows 고대비 모드 : border 로 그린 아이콘이 사라지지 않도록 강제 색 지정 */
@media (forced-colors: active){
	.km-gnb__arw,
	.km-btn-outline__arw,
	.km-typecard__arw,
	.km-pickcard__arw,
	.km-footer__arw,
	.km-latest__nav:before{
		border-color: ButtonText;
	}
	.km-search__btn:before{ border-color: ButtonText; }
	.km-search__btn:after,
	.km-hero__ime__ico:before,
	.km-hero__ime__ico:after,
	.km-related__ico:before,
	.km-related__ico:after{ background: ButtonText; }
	.km-typecard__link{ border: 1px solid ButtonText; }
}

@media (prefers-reduced-motion: reduce){
	.km-typecard__link,
	.km-datacard__thumb img,
	.km-pickcard__btn,
	.km-btn-outline{
		transition: none;
	}
	.km-typecard__link:hover{
		-webkit-transform: none;
		transform: none;
	}
	.km-datacard:hover .km-datacard__thumb img{
		-webkit-transform: none;
		transform: none;
	}
}

@media print{
	.km-hero,
	.km-latest__nav,
	.km-related{ display: none; }
	.km-main{ min-width: 0; }
}