// 메인 section 너비 
main.sec-width {
	position: relative; width: 1700px; margin: 0 auto;
}

/* 메인 팝업 */
@import 'main-popup';

/* Hero Section */
.hero-section {
	position: relative; width: 100%; padding: 60px 0 40px;
	&::before {
		content: ''; position: absolute; top: 20px; right: 0; width: 40%; max-width: 800px; height: 120%; min-height: 400px; background-image: url('../img/main/symbol_obj.svg'); background-position: center center; background-size: contain; background-repeat: no-repeat; z-index: 0; pointer-events: none; opacity: .15;
	}
	.hero-content {
		display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1;
		.hero-title {
			font-family: 'Gmarket Sans', sans-serif; font-weight: 700; font-size: 5.6rem; color: #002445; line-height: 1; letter-spacing: -0.02em;
		}
		.hero-subtitle {
			font-weight: 400; font-size: 2.4rem; line-height: 1.5; color: #002445;
		}
	}
}


.main-quick-link {
	display: flex; gap: var(--banner-gap);
	--banner-gap: 20px;
	--banner-width: 870px;
	.banner-area {
		--banner-ratio: 68.05%; // 592 / 870 = 0.6805
		width: var(--banner-width); position: relative; overflow: hidden;
		
		&:before {
			content: ""; display: block; padding-bottom: var(--banner-ratio);
		}
		
		.banner-swiper {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
		}
		
		.swiper-slide {
			height: 100%;
		}
		
		.banner-item {
			width: 100%; height: 100%; position: relative;
			img {
				position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; display: block;
			}
		}
		
		// 커스텀 컨트롤 패널
		.banner-controls {
			position: absolute; bottom: 0; right: 0; display: flex; align-items: center; gap: 15px; background: rgba(0, 36, 69, 0.8); padding: 12px 20px; border-radius: 20px 0; z-index: 10;
			
			.banner-counter {
				display: flex; align-items: center; gap: 8px; color: #fff; font-size: 1.6rem; font-weight: 600;
				.current {
					min-width: 24px; text-align: right;
				}
				.separator {
					opacity: 0.6;
				}
				.total {
					min-width: 24px; text-align: left;
				}
			}
			
			.banner-buttons {
				display: flex; align-items: center;
				
				button {
					width: 30px; height: 30px; background: transparent; cursor: pointer; 
					display: flex; align-items: center; justify-content: center; transition: opacity 0.3s;
					
					&:hover {
						opacity: 0.7;
					}
					
					&:active {
						opacity: 0.5;
					}
					
					img {
						width: 100%; height: 100%; object-fit: contain;
					}
				}
				
				.banner-play-pause {
					width: 21px; height: 21px;
				}
				
				.banner-next {
					img {
						transform: rotate(180deg);
					}
				}
			}
		}
	}
	.card-area {
		width: calc((100% - var(--banner-width)) - var(--banner-gap)); display: flex; flex-direction: column; gap: 20px;
		.card-content {
			display: flex; gap: 20px;
		}
		.card-item {
			width: 50%; padding: 50px 40px; position: relative; border-radius: 20px; overflow: hidden; height: 500px; display: flex; flex-direction: column;
			&.type-01 {
				background: #002445; color: #fff;
			}
			&.type-02 {
				background: #FFE500; color: #111; position: relative;
				&::before {
					content: 'T'; position: absolute; top: -27px; left: -26px; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 33rem; color: #eeda2a; letter-spacing: 1.32rem; z-index: 0; opacity: 0.3; pointer-events: none;
				}
				&::after {
					content: 'U'; position: absolute; top: 82px; left: 204px; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 33rem; color: #eeda2a; letter-spacing: 1.32rem; z-index: 0; opacity: 0.3; pointer-events: none;
				}
				.apply-area {
					.a-btn {
						&:hover {
							background: #000; color: #fff;
							&::after {
								background-color: #fff; background-image: url('../img/common/active_arrow_b.svg');
							}
						}
					}
				}
			}
			.card-title {
				font-size: 1.8rem; font-weight: 700; padding-bottom: 20px; position: relative; z-index: 1;
			}
			.card-description {
				font-size: 2.5rem; font-weight: 700; line-height: 1.5; padding-bottom: 30px; position: relative; z-index: 1;
			}
			.back-img {
				position: absolute; top: 40px; left: 25px; z-index: 0;
				img {
					width: 100%; height: 100%; object-fit: contain; display: block;
				}
			}
			.apply-area {
				display: flex; gap: 10px; flex-direction: column; align-items: flex-start; position: relative; z-index: 1;
			}
			.mascot {
				position: absolute; bottom: 0; right: 0; width: 188px; height: 197px; z-index: 1; pointer-events: none;
				img {
					width: 100%; height: 100%; object-fit: contain; display: block;
				}
			}
		}
		.faculty-banner {
			width: 100%; background: #1087F5; border-radius: 20px; padding: 10px 30px; display: flex; align-items: center; justify-content: space-between;
			.banner-text {
				font-size: 2.2rem; font-weight: 700; color: #fff;
			}
		}
	}
	
	// 공통 .a-btn 스타일 (apply-area, faculty-banner 공통)
	.apply-area,
	.faculty-banner {
		.a-btn {
			padding: 11px 19px; border-radius: 999px; font-weight: 700; font-size: 1.8rem; width: auto; display: inline-flex; align-items: center; justify-content: space-between; text-decoration: none; position: relative;
			&::after {
				content: ''; position: relative; width: 29px; height: 29px; border-radius: 50%; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-left: 10px;
				transition: transform .4s;
			}
			&:hover::after {
				transform: rotate(45deg);
			}
		}
	}
	
	// apply-area 전용 스타일
	.apply-area {
		.a-btn {
			background: #fff; color: #111;
			&:hover {
				background: var(--theme); color: #fff;
			}
			&::after {
				background-color: #000; background-image: url('../img/common/active_arrow_w.svg');
			}
		}
	}
	
	// faculty-banner 전용 스타일
	.faculty-banner {
		.a-btn {
			background: #fff; color: #111;
			&:hover {
				background: #f5f5f5;
			}
			&::after {
				background-color: #111; background-image: url('../img/common/active_arrow_w.svg');
			}
		}
	}
}


.card-section {
	.notice-wrap {
		position: relative; padding: 20px 0 60px 0;
		
		.notice-area {
			display: flex; align-items: center; padding: 15px 20px; background: #D9E8FF; border-radius: 20px; min-height: 60px; gap: 20px;
			
			.label {
				background: #fff; font-size: 1.8rem; font-weight: 700; color: #002445; padding: 9px 15px; border-radius: 999px; flex-shrink: 0;
			}
			
			.tit-area {
				flex: 1; min-width: 0; font-size: 1.8rem; font-weight: 700;
				.tit {
					width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
					transition: transform 0.3s, opacity 0.3s;
				}
			}
			
			.date {
				font-size: 1.6rem; color: #696969; font-weight: 700; flex-shrink: 0;
			}
			
			// 네비게이션 버튼 영역
			.notice-nav {
				display: flex; gap: 5px; flex-shrink: 0;
				
				button {
					width: 32px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s;
					
					&:hover {
						opacity: 0.7;
					}
					
					&:active {
						opacity: 0.5;
					}
					
					img {
						width: 100%; height: 100%; object-fit: contain;
					}
				}
				
				.notice-next {
					img {
						transform: rotate(180deg);
					}
				}
			}
			
			// 추가 버튼
			.notice-add {
				width: 32px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.3s;
				
				&:hover {
					opacity: 0.7;
				}
				
				&:active {
					opacity: 0.5;
				}
				
				img {
					width: 100%; height: 100%; object-fit: contain;
				}
			}
		}
	}
}

@media (max-width: 1700px) {
	.main-quick-link {
		--banner-width: 750px;
		.card-area {
			.card-item {
				padding: 50px 25px;
				.card-title {
					padding-bottom: 10px; font-size: 1.5rem;
				}
				.card-description {
					padding-bottom: 20px; font-size: 2rem;
				}
				.mascot {
					width: 150px; height: auto;
				}
				.apply-area {
					.a-btn {
						padding: 5px 18px; font-size: 1.6rem;
						&::after {
							width: 27px; height: 27px; margin-left: 9px;
						}
					}
				}
			}
			.faculty-banner {
				padding: 10px 20px;
				.a-btn {
					padding: 5px 15px; font-size: 1.6rem;
					&::after {
						width: 27px; height: 27px; margin-left: 9px;
					}
				}
				.banner-text {
					font-size: 1.7rem;
				}
			}
		}
	}
}

@media (max-width: 1440px) {
	.main-quick-link {
		--banner-width: 650px; align-items: flex-start;
		.banner-area {
			--banner-ratio: 66.54%;
		}
		.card-area {
			gap: 10px;
			.card-item {
				padding: 40px 20px; height: 370px;
				.mascot {
					width: 100px; 
				}
				.apply-area {
					z-index: 3; position: relative;
					.a-btn {
						padding: 5px 12px; font-size: 1.4rem;
						&::after {
							width: 20px; height: 20px; margin-left: 9px; background-size: 20px;
						}
					}
				}
			}
			.faculty-banner {
				padding: 10px 25px;
				.a-btn {
					padding: 5px 12px; font-size: 1.4rem; width: 130px;
					&::after {
						width: 20px; height: 20px; margin-left: 9px; background-size: 20px;
					}
				}
				.banner-text {
					font-size: 1.7rem; width: calc(100% - 130px); line-height: 1.2;
				}
			}
		}
	}
	.hero-section {
		padding: 25px 0;
		&::before {
			width: 55%; right: -3%; min-height: 350px;
		}
		.hero-content {
			.hero-title {
				font-size: 4rem;
			}
			.hero-subtitle {
				font-size: 1.8rem;
			}
		}
	}
	.card-section {
		.notice-wrap {
			.notice-area {
				.label {
					font-size: 1.6rem;
				}
				.tit-area {
					min-width: 0; max-width: none; flex: 1; font-size: 1.6rem;
				}
			}
		}
	}
}

@media (max-width: 1200px) {
	.main-quick-link {
		--banner-width: 550px;
		.card-area {
			.card-item {
				padding: 30px 20px; height: 300px;
				.card-title {
					padding-bottom: 10px; font-size: 1.3rem;
				}
				.card-description {
					padding-bottom: 20px; font-size: 1.7rem; 
				}
				.mascot {
					width: 100px; 
				}
			}
			.faculty-banner {
				.banner-text {
					font-size: 1.5rem; font-weight: 500; word-break: keep-all;
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	.hero-section {
		padding: 25px 0;
		&::before {
			width: 50%; right: -2%; min-height: 300px; opacity: 0.2;
		}
	}
	
	.main-quick-link {
		flex-direction: column;
		.banner-area {
			width: 100%;
		}
		.card-area {
			width: 100%;
			.card-item {
				.apply-area {
					.a-btn {
						padding: 7px 15px; font-size: 1.5rem;
						&::after {
							width: 25px; height: 25px; margin-left: 9px;
						}
					}
				}
			}
			.faculty-banner {
				.a-btn {
					padding: 7px 15px; font-size: 1.5rem;
					&::after {
						width: 25px; height: 25px; margin-left: 9px;
					}
				}
			}
		}
	}
	
	.card-section {
		.notice-wrap {
			.notice-area {
				.tit-area {
					min-width: 0; max-width: none; flex: 1;
				}
			}
		}
	}
}

@media (max-width: 960px) {
	.hero-section {
		padding: 20px 0;
		&::before {
			width: 45%; right: -1%; min-height: 250px; opacity: 0.18;
		}
		.hero-content {
			gap: 15px;
			.hero-title {
				font-size: 3.2rem;
			}
			.hero-subtitle {
				font-size: 1.6rem;
			}
		}
	}
	
	.main-quick-link {
		.banner-area {
			border-radius: 15px;
			.banner-swiper {
				border-radius: 15px;
			}
			.banner-controls {
				padding: 10px 15px; gap: 10px;
				.banner-counter {
					font-size: 1.4rem;
				}
				.banner-buttons {
					button {
						width: 26px; height: 26px;
					}
					.banner-play-pause {
						width: 18px; height: 18px;
					}
				}
			}
		}
		.card-area {
			.card-content {
				flex-direction: column; gap: 15px;
			}
			.card-item {
				width: 100%; padding: 40px 30px; height: auto; min-height: 400px; border-radius: 15px;
				.card-title {
					font-size: 1.6rem; padding-bottom: 15px;
				}
				.card-description {
					font-size: 2rem; padding-bottom: 25px;
				}
				.apply-area {
					.a-btn {
						padding: 10px 17px; font-size: 1.6rem;
						&::after {
							width: 26px; height: 26px; margin-left: 8px;
						}
					}
				}
				.mascot {
					width: 150px; height: 157px;
				}
			}
			.faculty-banner {
				padding: 15px 30px; border-radius: 15px;
				.banner-text {
					font-size: 2rem;
				}
				.a-btn {
					padding: 10px 17px; font-size: 1.6rem;
					&::after {
						width: 26px; height: 26px; margin-left: 8px;
					}
				}
			}
		}
	}
	
	.card-section {
		.notice-wrap {
			padding: 15px 0 40px 0;
			.notice-area {
				padding: 12px 15px; border-radius: 15px; gap: 15px;
				.label {
					font-size: 1.6rem; padding: 8px 12px;
				}
				.tit-area {
					font-size: 1.6rem;
				}
				.date {
					font-size: 1.4rem;
				}
				.notice-nav {
					button {
						width: 28px; height: 28px;
					}
				}
				.notice-add {
					width: 28px; height: 28px;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding: 40px 0 15px;
		&::before {
			display: none;
		}
		.hero-content {
			gap: 12px;
			.hero-title {
				font-size: 2.4rem;
			}
			.hero-subtitle {
				font-size: 1.4rem;
			}
		}
	}
	
	.main-quick-link {
		.banner-area {
			border-radius: 10px;
			.banner-swiper {
				border-radius: 10px;
			}
			.banner-controls {
				padding: 8px 12px; gap: 8px; border-radius: 10px 0;
				.banner-counter {
					font-size: 1.2rem;
				}
				.banner-buttons {
					button {
						width: 22px; height: 22px;
					}
					.banner-play-pause {
						width: 16px; height: 16px;
					}
				}
			}
		}
		.card-area {
			.card-content {
				gap: 12px;
			}
			.card-item {
				padding: 30px 20px; min-height: auto; border-radius: 10px;
				.card-title {
					font-size: 1.4rem; padding-bottom: 12px;
				}
				.card-description {
					font-size: 1.8rem; padding-bottom: 20px;
				}
				.apply-area {
					.a-btn {
						padding: 5px 10px 5px 20px; font-size: 1.4rem;
					}
				}
				.mascot {
					width: 120px; height: 126px;
				}
			}
			.faculty-banner {
				padding: 20px; border-radius: 10px; flex-direction: column; align-items: flex-start; gap: 10px;
				.banner-text {
					font-size: 1.6rem; width: 100%; font-weight: 700;
				}
				.a-btn {
					padding: 5px 10px 5px 20px; font-size: 1.4rem; width: auto;
				}
			}
		}
	}
	
	.card-section {
		.notice-wrap {
			padding: 12px 0 30px 0;
			.notice-area {
				padding: 10px 12px; border-radius: 10px; gap: 10px;
				.label {
					font-size: 1.4rem; padding: 6px 10px;
				}
				.tit-area {
					font-size: 1.4rem;
				}
				.date {
					font-size: 1.2rem;
				}
				.notice-nav {
					gap: 3px;
					button {
						width: 24px; height: 24px;
					}
				}
				.notice-add {
					width: 24px; height: 24px;
				}
			}
		}
	}
}

@media (max-width: 640px) {
	.card-section {
		.notice-wrap {
			.notice-area {
				gap: 5px;
				.label {
					font-size: 1.2rem; padding: 5px 10px;
				}
				.date {
					display: none;
				}
			}
		}
	}
}