/* 기본 스타일 */
	body {
		font-family: 'Pretendard', 'Noto Sans KR', 'Noto Sans SC', 'Roboto', sans-serif;
		margin: 0;
		padding: 0;
		background-color: #f4f7f6;
		color: #333;
		line-height: 1.6;
	}
	h1, h2, h3 {
		font-family: 'Pretendard', sans-serif; /* 명시적으로 Pretendard 지정 */
		font-weight: 700; /* Bold 두께 사용 */
	}	
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	/* 헤더 */
	header {
		background-color: #2c3e50;
		color: #ffffff;
		padding: 1rem 0;
		text-align: center;
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		position: relative; /* 언어 선택 드롭다운을 위해 추가 */
		background-image: url('../img/top_bg.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		background-color: transparent;
	}
	header .container {
		text-align: center; /* 내부의 인라인 및 인라인-블록 요소(텍스트, 버튼) 중앙 정렬 */
		padding-top: 80px; /* 적절한 상단 패딩으로 제목 아래 여백 확보 */
		padding-bottom: 50px; /* 적절한 하단 패딩 */
	}		
	header h1 {
		font-size: 3em;
		color: #ffffff;		
		margin: 0;
		font-weight: 700;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	}
	header p {
		font-size: 1.2em;
		margin-top: 5px;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
	}
	
	
	/* 무료 점검 프로모션 스타일 (헤더 및 서비스 섹션 공용) */
	.free-promo {
		background-color: #3498db; /* 강조 색상 */
		color: #ffffff;
		padding: 10px 20px;
		margin-top: 20px;
		border-radius: 5px;
		display: inline-block; /* 텍스트 길이에 맞춰 너비 조절 */
		font-size: 1.2em;
		font-weight: 700;
		text-transform: uppercase; /* 대문자 강조 */
		letter-spacing: 0.5px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		transition: background-color 0.3s ease;
		text-decoration: none; /* 링크 스타일 제거 */
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	}
	.free-promo:hover {
		background-color: #2980b9; /* 호버 시 색상 변경 */
		cursor: pointer; /* 클릭 가능한 요소임을 표시 */
		transform: translateY(-2px); /* 약간 위로 뜨는 효과 */
	    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 그림자 진해짐 */		
	}

	/* 언어 선택 드롭다운 */
	.language-selector {
		position: absolute;
		top: 15px;
		right: 30px;
		z-index: 1000;
	}
	/* 커스텀 드롭다운의 기본 스타일 */
	.custom-dropdown {
		position: relative;
		display: inline-block;
		cursor: pointer;
		font-size: 0.9em;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		color: #ffffff;
		padding: 5px 10px;
		min-width: 90px; /* 최소 너비 설정 */
		text-align: center;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
	}

	/* 선택된 언어를 보여주는 부분 */
	.selected-language {
		padding-right: 20px; /* 화살표 공간 */
		position: relative;
		outline: none; /* 포커스 시 기본 아웃라인 제거 */
	}
	/* 화살표 아이콘 */
	.selected-language::after {
		content: '▼'; /* 아래 화살표 유니코드 문자 */
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.8em;
		pointer-events: none; /* 화살표 클릭 시 이벤트 방지 */
	}

	/* 드롭다운 옵션 리스트 */
	.dropdown-options {
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%; /* selected-language 바로 아래에 위치 */
		left: 0;
		right: 0;
		background-color: rgba(44, 62, 80, 0.9); /* 헤더 배경색과 동일 */
		border-radius: 5px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.3);
		overflow: hidden;
		display: none; /* 기본적으로 숨김 */
		z-index: 1001;
		white-space: nowrap; /* 텍스트 줄바꿈 방지 */
	}

	/* 드롭다운이 활성화(마우스 오버 또는 active 클래스)될 때 옵션 표시 */
	.custom-dropdown:hover .dropdown-options,
	.custom-dropdown.active .dropdown-options { /* JS로 active 클래스 토글 */
		display: block;
	}

	/* 드롭다운 각 옵션 아이템 */
	.dropdown-options li {
		padding: 8px 10px;
		color: #ffffff;
		transition: background-color 0.2s ease;
	}
	.dropdown-options li:hover {
		background-color: #3498db; /* 호버 시 강조 색상 */
	}
	/* 현재 선택된 언어에 대한 스타일 */
	.dropdown-options li.selected {
		background-color: #2980b9;
		font-weight: bold;
	}

	/* 새로 추가될 내비게이션 메뉴 스타일 */
	.main-nav {
		background-color: rgba(44, 62, 80, 0.95); /* 어두운 배경색 */		
		box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 추가 */		
		box-shadow: none;
		text-align: center;
		/* --- 이 부분 추가 --- */
		position: sticky; /* 요소를 스크롤 컨테이너 내에서 고정 */
		top: 0; /* 뷰포트의 상단에 고정 */
		z-index: 999; /* 다른 콘텐츠 위에 표시되도록 z-index 설정 (헤더보다 낮게) */
		width: 100%; /* 너비 100% 유지 */
		transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 */
		/* --- 추가 끝 --- */
	}

	.main-nav .nav_container{
		padding: 20px 20px 30px 20px;
	}

	/* 스크롤 시 배경색 변경을 위한 클래스 (JavaScript와 함께 사용) */
	.main-nav.scrolled {
		background-color: rgba(44, 62, 80, 0.95); /* 어두운 배경색 */
		box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 추가 */
	}

	
	.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	}
	.main-nav ul li {
	margin: 0 20px;
	}
	.main-nav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 500;
	padding: 10px 0;
	position: relative;
	transition: color 0.3s ease;

	white-space: nowrap;
	}

	.main-nav ul li a.hover {
		color: #3498db;
	}	
	.main-nav ul li a.active {
		color: #ffffff;
	}

	.main-nav ul li a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background-color: #3498db;
	transition: width 0.3s ease;
	}
	.main-nav ul li a:hover::before {
	width: 100%;
	}
	.main-nav ul li a.active::before {
	width: 100%;
	}
	
	/* 스크롤 버튼 스타일 */
	.scroll-button {
		position: fixed;
		right: 20px;
		width: 45px; /* 버튼 크기 통일 */
		height: 45px;
		background-color: #3498db;
		color: #ffffff;
		border-radius: 50%; /* 원형 버튼 */
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5em; /* 아이콘 크기 */
		text-decoration: none;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
		cursor: pointer;
		z-index: 1000; /* 다른 요소 위에 표시 */
		opacity: 0; /* 기본적으로 숨김 */
		visibility: hidden; /* 기본적으로 숨김 */
	}
	.scroll-button:hover {
		background-color: #2980b9;
	}
	.scroll-button.show {
		opacity: 1;
		visibility: visible;
	}

	#scroll-to-top {
		bottom: 90px; /* 하단 버튼과의 간격 */
	}
	#scroll-to-bottom {
		bottom: 30px;
	}
	
	
	.floating-button {
		position: fixed;
		right: 20px;
		width: 45px; /* 버튼 크기 통일 */
		height: 45px;
		background-color: #3498db;
		color: #ffffff;
		border-radius: 50%; /* 원형 버튼 */
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5em; /* 아이콘 크기 */
		text-decoration: none;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
		cursor: pointer;
		z-index: 1000; /* 다른 요소 위에 표시 */
	}

	#talk-text-button {
		bottom: 150px; /* 하단 버튼과의 간격 */
	}

	/* 섹션 공통 스타일 */
	section {
		background-color: #ffffff;
		margin-top: 20px;
		padding: 40px 20px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	section h2 {
		color: #2c3e50;
		font-size: 2em;
		text-align: center;
		margin-bottom: 30px;
		position: relative;
	}
	section h2::after {
		content: '';
		display: block;
		width: 60px;
		height: 3px;
		background-color: #3498db;
		margin: 10px auto 0;
	}
	/* 서비스 섹션의 무료 점검 강조 스타일 */
	.services-free-diagnostic-banner {
		text-align: center;
		padding: 40px 0;
		margin-top: -10px; /* 제목과의 간격 조정 */
		margin-bottom: 30px;
	}
	.services-free-diagnostic-banner .free-promo {
		background-color: #e74c3c; /* 빨간색 배경 */
		color: #ffffff;
		padding: 15px 30px;
		text-decoration: none;
		border-radius: 5px;
		font-weight: bold;
		font-size: 1.1em;
		transition: background-color 0.3s ease;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
	.services-free-diagnostic-banner .free-promo:hover {
		background-color: #c0392b; /* 호버 시 색상 변경 */
		transform: translateY(-2px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	}


	/* 서비스 섹션 */
	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		text-align: center;
		/* 모든 그리드 아이템의 높이를 같게 만듭니다. */
		align-items: stretch; /* 기본값이나 명시적으로 설정 */
	}
	.service-item {
		background-color: #ecf0f1;
		padding: 20px;
		border-radius: 8px;
		min-height:160px; /* 최소 높이 설정 (내용 길이가 달라도 레이아웃 유지) */
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		/* Flexbox를 사용하여 내부 콘텐츠를 정렬하고 공간을 채웁니다. */
		display: flex;
		flex-direction: column;
	}
	.service-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	}
	.service-item h3 {
		color: #34495e;
		font-size: 1.4em;
		margin-top: 15px;
		/* 제목이 늘어나는 것을 방지합니다. */
		flex-shrink: 0;
	}
	.service-item p {
		font-size: 0.95em;
		color: #555;
		/* 남은 공간을 모두 차지하도록 하여 높이를 맞춥니다. */
		flex-grow: 1;
		/* 텍스트가 위로 정렬되도록 합니다. */
		text-align: center;
		margin-bottom: 0; /* 단락 하단 마진 제거 */
	}

	/* 오시는 길 및 연락처 */
	.contact-info {
		text-align: center;
	}
	.contact-info p {
		font-size: 1.1em;
		margin-bottom: 10px;
	}
	.contact-info a {
		color: #3498db;
		text-decoration: none;
		font-weight: 700;
	}
	.contact-info a:hover {
		text-decoration: underline;
	}
	.map-container {
		margin-top: 30px;
		overflow: hidden;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		position: relative;
		padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
		height: 0;
	}
	.map-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/* 푸터 */
	footer {
		text-align: center;
		padding: 20px;
		margin-top: 30px;
		background-color: #34495e;
		color: #ffffff;
		font-size: 0.9em;
		vertical-align:middle;
	}
	footer p {
		margin: 0;
	}
	
	footer .container_footer {
		max-width: 1200px;
		margin: 0 auto;
	}	


	/* 1:1 문의 모달 팝업의 기본 스타일 */
	.modal {
		display: none; /* <-- 이 부분이 중요합니다! 기본적으로 숨김 */
		position: fixed; /* 화면에 고정 */
		z-index: 1000; /* 다른 요소들 위에 표시 */
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto; /* 내용이 길어지면 스크롤 가능 */
		background-color: rgba(0,0,0,0.7); /* 반투명 검정 배경 */
		justify-content: center; /* 수평 중앙 정렬 */
		align-items: center; /* 수직 중앙 정렬 */
	}

	.modal-content {
		background-color: #fefefe;
		margin: auto; /* flexbox를 사용하지 않을 경우 수직/수평 중앙 정렬 */
		padding: 20px;
		border: 1px solid #888;
		width: 80%; /* 모달 내용의 너비 */
		max-width: 500px; /* 최대 너비 */
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		position: relative; /* 닫기 버튼의 위치를 위해 */
	}

	.close-button {
		color: #aaa;
		float: right; /* 오른쪽 상단에 배치 */
		font-size: 28px;
		font-weight: bold;
		position: absolute;
		top: 10px;
		right: 15px;
		cursor: pointer;
	}

	.close-button:hover,
	.close-button:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	/* 폼 그룹 및 버튼 스타일 (필요하다면) */
	.modal-content .form-group {
		margin-bottom: 15px;
	}

	.modal-content label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.modal-content input[type="text"],
	.modal-content input[type="email"],
	.modal-content textarea {
		width: calc(100% - 22px); /* 패딩, 보더 고려 */
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-sizing: border-box; /* 패딩, 보더가 너비에 포함되도록 */
	}

	.modal-content textarea {
		resize: vertical; /* 수직으로만 크기 조절 가능 */
	}

	.modal-content .submit-button {
		background-color: #007bff;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		width: 100%;
	}

	.modal-content .submit-button:hover {
		background-color: #0056b3;
	}

	/* 메시지 표시 스타일 */
	.modal-content .message {
		margin-top: 10px;
		padding: 10px;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		display: none; /* 기본적으로 숨김, JS로 필요할 때 표시 */
	}

	.modal-content .message.success {
		background-color: #d4edda;
		color: #155724;
		border-color: #c3e6cb;
		display: block;
	}

	.modal-content .message.error {
		background-color: #f8d7da;
		color: #721c24;
		border-color: #f5c6cb;
		display: block;
	}

	/* 모바일 반응형 */
	@media (max-width: 600px) {
		.modal-content {
			width: 90%;
		}
	}

	/* 반응형 디자인 */
	@media (max-width: 768px) {
		header h1 {
			font-size: 2em;
		}
		header p {
			font-size: 1em;
		}
		.free-promo {
			font-size: 1.1em;
			padding: 8px 15px;
		}
		.services-free-diagnostic-banner .free-promo {
			font-size: 1em;
			padding: 7px 12px;
		}
		.language-selector {
			right: 30px; /* 모바일에서 오른쪽 마진을 더 줄임 */
			top: 15px; /* 상단 마진은 유지하거나 조정 */
		}
		/* 모바일에서 커스텀 드롭다운 가운데 정렬 */
		.custom-dropdown {
			/*margin: 0 auto;
			width: fit-content;*/
		}
		section {
			padding: 30px 15px;
		}
		section h2 {
			font-size: 1.8em;
		}
		.services-grid {
			grid-template-columns: 1fr; /* 모바일에서 한 줄에 하나 */
		}
		.service-item {
			padding: 20px;
		}

		
		.main-nav.scrolled .nav_container{
			padding:10px 10px 25px 10px;
		}
		
		.main-nav ul li {
			margin: 0px 8px; /* 모바일에서 메뉴 간격 조정 */
		}
		.main-nav ul li a {
			padding: 8px 0; /* 모바일에서 패딩 약간 줄임 */
			font-size: 0.8em; /* 모바일에서 글자 크기 약간 줄임 */
			white-space: nowrap;			
		}
		main.container{
			padding:0 20px 20px 20px;
		}
		/* 모바일 스크롤 버튼 */
		.scroll-button {
			width: 40px;
			height: 40px;
			font-size: 1.3em;
			right: 15px;
		}
		#scroll-to-top {
			bottom: 90px;
		}
		#scroll-to-bottom {
			bottom: 35px;
		}
	}

	@media (max-width: 480px) {
		header h1 {
			font-size: 1.8em;
		}
		header p {
			font-size: 0.9em;
		}
		.free-promo {
			font-size: 1em;
			padding: 7px 12px;
		}
		.services-free-diagnostic-banner .free-promo {
			font-size: 0.9em;
			padding: 6px 10px;
		}
		section h2 {
			font-size: 1.6em;
		}
		.main-nav ul li {
			margin: 0 4px; /* 가장 작은 화면에서 간격 최소화 */
	    }
		.main-nav ul li a {
			font-size: 0.7em; /* 가장 작은 화면에서 글자 크기 최소화 */
	    }		
	}