/* ----------------------------------------------------------------

	Custom CSS



	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/



/* Contact Modal Styles

============================================= */

.contact-modal {

	display: none;

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	z-index: 9999;

	align-items: center;

	justify-content: center;

	padding: 20px;

	box-sizing: border-box;

}

.contact-modal[hidden] {

	display: none !important;

}

.contact-modal:not([hidden]) {

	display: flex !important;

}



.contact-modal-overlay {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.6);

	backdrop-filter: blur(2px);

}



.contact-modal-container {

	position: relative;

	background-color: #fff;

	border-radius: 12px;

	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

	max-width: 800px;

	width: 100%;

	max-height: 90vh;

	display: flex;

	flex-direction: column;

	z-index: 10000;

	animation: modalFadeIn 0.3s ease-out;

}



@keyframes modalFadeIn {

	from {

		opacity: 0;

		transform: scale(0.9) translateY(-20px);

	}

	to {

		opacity: 1;

		transform: scale(1) translateY(0);

	}

}



.contact-modal-header {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding: 24px 30px;

	border-bottom: 1px solid #e5e5e5;

	position: sticky;

	top: 0;

	background-color: #fff;

	z-index: 1;

	border-radius: 12px 12px 0 0;

}



.contact-modal-title {

	margin: 0;

	font-size: 24px;

	font-weight: 600;

	color: #333;

}



.contact-modal-close {

	background: none;

	border: none;

	font-size: 24px;

	color: #666;

	cursor: pointer;

	padding: 5px 10px;

	line-height: 1;

	transition: color 0.3s ease;

	display: flex;

	align-items: center;

	justify-content: center;

}



.contact-modal-close:hover {

	color: #000;

}



.contact-modal-body {

	padding: 0;

	overflow: auto;

	position: relative;

	flex: 1;

	min-height: 0;

}



.contact-modal-iframe {

	width: 100%;

	height: 100%;

	border: none;

	display: block;

	min-height: 500px;

	overflow-y: auto;

}

/* 모바일 반응형 스타일 */

@media (max-width: 768px) {

	.contact-modal {

		padding: 10px;

		align-items: flex-end;

	}

	.contact-modal-container {

		max-width: 100%;

		max-height: 95vh;

		height: auto;

		border-radius: 12px 12px 0 0;

		animation: modalSlideUp 0.3s ease-out;

		display: flex;

		flex-direction: column;

	}

	@keyframes modalSlideUp {

		from {

			opacity: 0;

			transform: translateY(100%);

		}

		to {

			opacity: 1;

			transform: translateY(0);

		}

	}

	.contact-modal-header {

		padding: 20px;

	}

	.contact-modal-title {

		font-size: 20px;

	}

	.contact-modal-body {

		padding: 0;

		overflow-y: auto;

		overflow-x: hidden;

		-webkit-overflow-scrolling: touch;

		max-height: calc(95vh - 80px);

	}

	.contact-modal-iframe {

		min-height: 400px;

		height: auto;

		overflow-y: auto;

		-webkit-overflow-scrolling: touch;

	}

	.contact-modal-body .form-group {

		margin-bottom: 15px;

	}

	.contact-modal-body .col-md-4 {

		margin-bottom: 15px;

	}

}

/* 작은 모바일 화면 (360~393px) 대응 */
@media (max-width: 393px) {
	.contact-modal {
		padding: 5px;
	}
	
	.contact-modal-container {
		max-height: 98vh;
	}
	
	.contact-modal-header {
		padding: 15px;
	}
	
	.contact-modal-title {
		font-size: 18px;
	}
	
	.contact-modal-body {
		max-height: calc(98vh - 70px);
	}
	
	.contact-modal-iframe {
		min-height: 300px;
	}
}



@media (max-width: 768px) {

	.contact-modal {

		padding: 10px;

		align-items: flex-end;

	}

	.contact-modal-container {

		max-width: 100%;

		max-height: 95vh;

		border-radius: 12px 12px 0 0;

		animation: modalSlideUp 0.3s ease-out;

	}

	@keyframes modalSlideUp {

		from {

			opacity: 0;

			transform: translateY(100%);

		}

		to {

			opacity: 1;

			transform: translateY(0);

		}

	}

	.contact-modal-header {

		padding: 20px;

	}

	.contact-modal-title {

		font-size: 20px;

	}

	.contact-modal-body {

		padding: 0;

		overflow: auto;

	}

	.contact-modal-iframe {

		min-height: 400px;

		overflow-y: auto;

	}

	.contact-modal-body .form-group {

		margin-bottom: 15px;

	}

	.contact-modal-body .col-md-4 {

		margin-bottom: 15px;

	}

}



/* 태블릿 반응형 스타일 */

@media (min-width: 769px) and (max-width: 1024px) {

	.contact-modal-container {

		max-width: 90%;

	}

	.contact-modal-body {

		padding: 0;

	}

}



/* iframe 스크롤바 숨기기 */

.contact-modal-iframe::-webkit-scrollbar {

	display: none;

	width: 0;

	height: 0;

}

.contact-modal-iframe {

	-ms-overflow-style: none;

	scrollbar-width: none;

}