@charset "UTF-8";

/* ==========================================================================
   메인 화면 — 시안 https://honam.figma.site
   --------------------------------------------------------------------------
   로드 : layout/head_main.jsp  (reset.css → layout.css → main.css)
   마크업 : main/home.jsp  (클래스 전부 mn- 접두)
   수치는 1920 뷰포트 실측 그대로. 콘텐츠는 좌우 120 여백 유동폭.

   [목차]
     [1] 히어로 (배경 / 제목 / 검색 / 자료유형 칩 / 보유현황 바)
     [2] 섹션 공통 (상하 120, 제목 40px 명조)
     [3] 고서 (대표자료)
     [4] 오늘의 추천
     [5] 자료유형별 보기 (어두운 띠)
     [6] 최신 등록 자료
   ========================================================================== */

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


/* ==========================================================================
   [1] 히어로 — 792px / 배경 이미지 cover + 검정 40% 덮개
   ========================================================================== */
.mn-hero{
	position: relative;
	height: 792px;
	overflow: hidden;
	background: #222;
	color: #fff;
}
/* 배경 이미지 + 검정 40% 덮개를 한 겹으로.
   2026-10-22 시트 2 : 메인 로딩 때 1회만 "원래 크기 → 천천히 확대 → 다시 원래 크기" (디자이너 요청, 협의 결과 1회).
   과하지 않게 최대 1.06 배 · 전체 4.4s(확대 2.2s + 복귀 2.2s, 각각 ease-in-out), 처음 0.7s 동안 어둠(#222)에서 서서히 밝아진다.
   (첫 시도 "확대된 상태에서 줄어들기" 는 확대 느낌이 없다고 해 바꿈)
   transform 은 이 겹에만 걸어 글자·검색창은 움직이지 않는다(.mn-hero overflow:hidden 이 가장자리를 자른다). */
.mn-hero:before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../images/main-hero.png') no-repeat center / cover;
	transform-origin: 50% 50%;
	animation: mnHeroZoom 4.4s ease-in-out both;
}
@keyframes mnHeroZoom{
	0%{ transform: scale(1); opacity: 0; }
	16%{ opacity: 1; }
	50%{ transform: scale(1.06); opacity: 1; }
	100%{ transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
	.mn-hero:before{ animation: none; }
}
.mn-hero__body{
	position: relative;
	padding-top: 208px;
	text-align: center;
}
.mn-hero__title{
	font-family: var(--f-serif);
	font-size: 52px;
	line-height: 68px;
	font-weight: 400;
	color: #fff;
}
.mn-hero .sch{
	margin-top: 32px;
}

/* 자료유형 칩 — 32px 알약, 검정 40%, 가로 8 / 세로 8, 폭 520 안에서 줄바꿈 */
.mn-hero__chips{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	width: 520px;
	margin: 32px auto 0;
}
.mn-hero__chips a{
	display: block;
	height: 32px;
	padding: 4px 20px;
	border-radius: 100px;
	background: rgba(0,0,0,.4);
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	transition: background .2s ease;
}
.mn-hero__chips a:hover{
	background: rgba(0,0,0,.7);
}

/* 보유현황 바 — 좌우 80 / 아래 60 / 높이 72 / 검정 60% / radius 12 */
.mn-hero__stat{
	position: absolute;
	/* 2026-10-20 콘텐츠 폭 1280 : 본문과 같은 줄 (layout.css --gutter). 예전 1920 시안은 좌우 80 고정 */
	left: var(--gutter); right: var(--gutter);
	bottom: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding: 0 40px;
	border-radius: 12px;
	background: rgba(0,0,0,.6);
	font-size: 16px;
	line-height: 24px;
}
.mn-hero__stat__txt{
	font-weight: 700;
	color: #fff;
}
.mn-hero__stat__txt em{
	color: var(--c-accent);
}
.mn-hero__stat__list{
	display: flex;
	align-items: center;
}
.mn-hero__stat__list li{
	display: flex;
	align-items: center;
	gap: 4px;
}
.mn-hero__stat__list li + li:before{
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	margin: 0 16px;
	border-radius: 50%;
	background: var(--c-gray-6);
}
.mn-hero__stat__list span{
	color: var(--c-gray-9);
}
.mn-hero__stat__list strong{
	font-weight: 700;
	color: #fff;
}


/* ==========================================================================
   [2] 섹션 공통
   ========================================================================== */
.mn-sec{
	padding: 120px var(--gutter);
}
.mn-sec + .mn-sec{
	padding-top: 0;
}
.mn-sec.mn-sec--dark,
.mn-sec--dark + .mn-sec{
	padding-top: 120px;
}
.mn-sec__title{
	font-family: var(--f-serif);
	font-size: 40px;
	line-height: 58px;
	font-weight: 400;
	color: #000;
}


/* ==========================================================================
   [3] 고서 (대표자료) — 왼쪽 글 / 오른쪽 600 이미지 카드, 사이 80
   ========================================================================== */
.mn-feature{
	display: flex;
	gap: 80px;
}
.mn-feature__txt{
	flex: 1;
	min-width: 0;
}
.mn-feature__name{
	margin-top: 20px;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
}
.mn-feature__name a:hover{
	text-decoration: underline;
}
.mn-feature__meta{
	margin-top: 20px;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-gray-6);
}
.mn-feature__block{
	margin-top: 40px;
	max-width: 600px;
}
.mn-feature__block-title{
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}
.mn-feature__block-desc{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 15px;
	font-size: 16px;
	line-height: 24px;
}
.mn-feature__block--sub .mn-feature__block-title,
.mn-feature__block--sub .mn-feature__block-desc{
	color: var(--c-gray-6);
}

.mn-feature__card{
	flex: none;
	display: block;
	width: 600px;
}
.mn-feature__thumb{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 350px;
	padding: 40px 66px;
	background: var(--c-bg);
}
.mn-feature__thumb img{
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mn-feature__more{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
	padding-bottom: 24px;
	border-bottom: 2px solid #000;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
.mn-feature__more img{
	display: block;
	width: 24px;
	height: 24px;
	transition: transform .2s ease;
}
.mn-feature__card:hover .mn-feature__more img{
	transform: translateX(4px);
}


/* ==========================================================================
   [4] 오늘의 추천 — 4열, 사이 40 / 정사각 썸네일 #f5f5f5 (안쪽 20)
   2026-10-21 수정요청 5번 : 이미지 상하좌우 여백 20 고정 (모든 폭) → 20 안쪽을 cover 로 꽉 채운다
   2026-10-21 수정요청 26번 : 설명글 길이와 관계없이 아래 바 위치 = 설명 2줄일 때 → 설명 높이 2줄 고정
   ========================================================================== */
.mn-pick{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 32px;
}
.mn-pick__item a{
	display: block;
	padding-bottom: 32px;
	border-bottom: 2px solid #000;
}
.mn-pick__thumb{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 20px;
	background: var(--c-bg);
	overflow: hidden;
}
.mn-pick__thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;   /* 2026-10-22 시트 5 재요청(TO-BE) : 자르지 않고 비율 유지 — 사방 20 안쪽에 맞춰 넣는다(남는 쪽은 회색 바탕) */
	transition: transform .3s ease;
}
.mn-pick__item a:hover .mn-pick__thumb img{
	transform: scale(1.04);
}
.mn-pick__name{
	display: block;
	margin-top: 32px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}
.mn-pick__desc{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 40px; /* line-height 20 x 2줄 */
	margin-top: 12px;
	font-size: 18px;
	line-height: 20px;
	color: var(--c-gray-6);
}


/* ==========================================================================
   [5] 자료유형별 보기 — #222 띠 / 200px 원형 8개, 사이 12, 가운데 정렬
   2026-10-21 수정요청 6번 : PC 는 6개 폭(200x6 + 12x5 = 1260)만 보이고 나머지는 가로 스크롤.
   태블릿·모바일은 [7-5] 그대로 화면 폭만큼(시안 4개 / 2개). 마우스 드래그는 head_main.jsp mnTypesDrag
   ========================================================================== */
.mn-sec--dark{
	background: #222;
	overflow: hidden;
}
.mn-sec--dark .mn-sec__title{
	color: #fff;
}
.mn-types{
	display: flex;
	gap: 12px;
	/* 폭 = min(1260, 화면). 1280~1359 화면은 본문(좌우 40 여백)보다 넓어 여백까지 써서 6개를 다 보인다 */
	margin: 40px calc((100% - min(1260px, 100vw - 20px)) / 2) 0;
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.mn-types::-webkit-scrollbar{
	display: none;
}
.mn-types.is-dragging{
	cursor: grabbing;
}
.mn-types li{
	flex: none;
}
.mn-types img{
	-webkit-user-drag: none;
}
.mn-types a{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	text-align: center;
}
.mn-types img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.mn-types a:before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0,0,0,.4);
	transition: background .2s ease;
}
.mn-types a:hover img{
	transform: scale(1.08);
}
.mn-types a:hover:before{
	background: rgba(0,0,0,.55);
}
.mn-types strong,
.mn-types span{
	position: relative;
	z-index: 2;
	display: block;
}
.mn-types strong{
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}
.mn-types span{
	font-size: 16px;
	line-height: 19px;
}


/* ==========================================================================
   [6] 최신 등록 자료 — 2열, 사이 40 / 카드 : 썸네일 50% | 글, 아래 2px 검정
   목록은 MainController 의 dataList(최근 등록 10건). 한 번에 2건씩 슬라이드.
   2026-10-21 수정요청 7번 : 이미지 상하좌우 여백 20 고정 (모든 폭) → 20 안쪽을 cover 로 꽉 채운다
   ========================================================================== */
.mn-latest{
	position: relative;
	margin-top: 32px;
	overflow: hidden;
}
/* swiper 4 최소 레이아웃 (swiper.min.css 를 빼서 필요한 것만) */
.mn-latest .swiper-wrapper{
	display: flex;
	box-sizing: content-box;
	transition-property: transform;
}
.mn-latest .swiper-slide{
	flex-shrink: 0;
	width: calc((100% - 40px) / 2);
	margin-right: 40px;
}

.mn-card{
	display: flex;
	gap: 36px;
	height: 100%;
	padding-bottom: 40px;
	border-bottom: 2px solid #000;
}
.mn-card__thumb{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50.2%;
	height: 252px;
	padding: 20px;
	background: var(--c-bg);
	overflow: hidden;
}
.mn-card__thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;   /* 2026-10-22 시트 7 재요청(TO-BE) : 자르지 않고 비율 유지 — 사방 20 안쪽에 맞춰 넣는다 */
}
.mn-card__body{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 21px 0;
}
.mn-card__type{
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	color: var(--c-accent);
}
.mn-card__title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	margin-top: 12px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.mn-card:hover .mn-card__title{
	text-decoration: underline;
}
.mn-card__date{
	margin-top: auto;
	font-size: 16px;
	line-height: 19px;
	color: var(--c-gray-6);
}
.mn-empty{
	padding: 60px 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid var(--c-line);
	text-align: center;
	color: var(--c-gray-6);
}


/* ==========================================================================
   [7] 반응형 — 시안 브레이크포인트 : 태블릿 800~1279 / 모바일 ~799
   --------------------------------------------------------------------------
   시안 : 홈/Tablet.jpg (800 프레임) · 홈/Mobile.jpg (390 프레임) — 2026-10-15 재실측
   좌우 여백은 layout.css 의 --gutter (40 / 24)
     · 히어로 : 높이를 내용으로 잡는다 (칩 줄 수에 따라 시안도 622 / 658 로 달라짐)
                칩 → 60 → 보유현황 바(안쪽 20, 글·목록 사이 16 / 12) → 바닥 40 / 24
                모바일 칩 묶음은 좌우 24 를 더 들여 4 · 3 · 1 개로 줄바꿈
     · 섹션 상하 : 태블릿 고서 80 · 추천 아래 40 · 자료유형/최신 120 / 모바일 전부 60
                   제목 32/40 · 24/32
     · 고서 : 태블릿 2단(사이 80, 글 칸 최소 342) / 모바일 1단. 썸네일 600:350 비율
     · 자료유형 원형 : 가로 스크롤. 시안처럼 가운데가 보이게 시작한다
                       (head_main.jsp mnTypesCenter() 가 scrollLeft 를 가운데로)
     · 최신 등록 자료 : 슬라이드 대신 2건 세로 (사이 40). 태블릿 썸네일 50.2% x 362,
                        모바일 정사각 썸네일 위 / 글 아래
       head_main.jsp mnLatest() 가 이 구간에서는 Swiper 를 켜지 않는다(넘어오면 destroy).
   ========================================================================== */
@media screen and (max-width: 1279px){
	/* [7-1] 히어로 */
	.mn-hero{
		height: auto;
		padding-bottom: 40px;
	}
	.mn-hero__body{
		padding: 142px var(--gutter) 0;
	}
	.mn-hero__title{
		font-size: 32px;
		line-height: 40px;
	}
	.mn-hero__chips{
		width: auto;
		max-width: 520px;
	}
	.mn-hero__stat{
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 16px;
		height: auto;
		margin: 60px var(--gutter) 0;
		padding: 20px;
	}
	.mn-hero__stat__list{
		flex-wrap: wrap;
	}

	/* [7-2] 섹션 */
	.mn-sec{
		padding: 80px var(--gutter);
	}
	.mn-sec--pick{
		padding-bottom: 40px;
	}
	.mn-sec.mn-sec--dark{
		padding-bottom: 120px;
	}
	.mn-sec--latest{
		padding-bottom: 120px;
	}
	.mn-sec__title{
		font-size: 32px;
		line-height: 40px;
	}

	/* [7-3] 고서 */
	.mn-feature__txt{
		flex: 1 1 0;
		min-width: 342px;
	}
	.mn-feature__name{
		font-size: 28px;
		line-height: 1.2;
	}
	.mn-feature__card{
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}
	.mn-feature__thumb{
		height: auto;
		aspect-ratio: 600 / 350;
	}

	/* [7-4] 오늘의 추천 */
	.mn-pick{
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 24px;
	}

	/* [7-5] 자료유형 — 화면 폭 가득 가로 스크롤 (시작 위치는 JS 가 가운데로) */
	.mn-types{
		margin: 40px calc(var(--gutter) * -1) 0;
		padding: 0 var(--gutter);
		-webkit-overflow-scrolling: touch;
	}

	/* [7-6] 최신 등록 자료 — 2건 세로 (Swiper 꺼짐) */
	.mn-latest .swiper-wrapper{
		flex-direction: column;
		gap: 40px;
	}
	.mn-latest .swiper-slide{
		width: 100%;
		margin: 0;
	}
	.mn-latest .swiper-slide:nth-child(n+3){
		display: none;
	}
	.mn-card__thumb{
		height: 362px;
	}
	.mn-card__body{
		justify-content: center;
	}
	.mn-card__date{
		margin-top: 20px;
	}
}

@media screen and (max-width: 799px){
	/* [7-1] 히어로 */
	.mn-hero{
		padding-bottom: 24px;
	}
	.mn-hero__body{
		padding-top: 122px;
	}
	.mn-hero__title{
		font-size: 24px;
		line-height: 32px;
	}
	/* 검색창 한 줄 → 아래 줄 [상세 검색 120 (layout.css [8])][검색 나머지] (시안 2026-10-28) */
	.mn-hero .sch{
		flex-flow: row wrap;
		gap: 8px;
	}
	.mn-hero .sch__box{
		flex: none;
		width: 100%;
	}
	.mn-hero .sch__btn{
		order: 2;
		flex: 1;
		gap: 13px;
		width: auto;
	}
	.mn-hero .sch__btn-txt{
		display: block;
		font-size: 14px;
		line-height: 20px;
		font-weight: 700;
		color: #fff;
	}
	.mn-hero__chips{
		gap: 8px;
		max-width: none;
		margin-top: 32px;
		padding: 0 24px;
	}
	.mn-hero__chips a{
		height: 28px;
		padding: 4px 16px;
		font-size: 14px;
		line-height: 20px;
	}
	.mn-hero__stat{
		gap: 12px;
		padding: 20px;
		font-size: 14px;
		line-height: 20px;
	}
	/* 시안은 폭과 관계없이 "…고서를 / 폭넓게 보유…" 에서 줄이 바뀐다 */
	.mn-hero__stat__txt{
		max-width: 256px;
	}
	.mn-hero__stat__list{
		gap: 0 16px;
	}
	.mn-hero__stat__list li + li:before{
		display: none;
	}

	/* [7-2] 섹션 */
	.mn-sec{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.mn-sec + .mn-sec{
		padding-top: 0;
	}
	.mn-sec.mn-sec--dark,
	.mn-sec--dark + .mn-sec{
		padding-top: 60px;
	}
	.mn-sec.mn-sec--dark{
		padding-bottom: 60px;
	}
	.mn-sec__title{
		font-size: 24px;
		line-height: 32px;
	}

	/* [7-3] 고서 */
	.mn-feature{
		flex-direction: column;
		gap: 40px;
	}
	.mn-feature__txt{
		flex: none;
		min-width: 0;
	}
	.mn-feature__name{
		font-size: 24px;
	}
	.mn-feature__block{
		margin-top: 40px;
	}
	.mn-feature__block-title{
		font-size: 18px;
	}
	.mn-feature__card{
		flex: none;
		width: 100%;
	}
	.mn-feature__thumb{
		padding: 40px;
	}

	/* [7-4] 오늘의 추천 */
	.mn-pick{
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.mn-pick__item a{
		padding-bottom: 24px;
	}
	.mn-pick__name{
		margin-top: 20px;
		font-size: 18px;
	}
	.mn-pick__desc{
		margin-top: 12px;
		font-size: 16px;
	}

	/* [7-5] 자료유형 */
	.mn-types{
		margin-top: 32px;
	}

	/* [7-6] 최신 등록 자료 — 정사각 썸네일 위 / 글 아래 */
	.mn-card{
		flex-direction: column;
		gap: 24px;
		padding-bottom: 24px;
	}
	.mn-card__thumb{
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.mn-card__body{
		padding: 0;
	}
	.mn-card__title{
		-webkit-line-clamp: 3;
	}
}