/* index.html 에서 사용하는 사타일 */

/* 기본 스타일 초기화 및 Typography */
body {
	font-family: 'Arial', 'Noto Sans KR', sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: #f4f7f9;
	color: #333;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 1. 헤더 스타일 */
.header {
	background-color: #007bff; /* 메인 색상 */
	color: white;
	padding: 15px 0;
	text-align: center;
	/* 상단 고정 */
	background-color: rgba(0,0,0,.5);
	position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}

.header h1 {
	margin: 0;
	font-size: 28px;
}

.header nav a {
	color: white;
	margin: 0 15px;
	text-decoration: none;
	font-weight: bold;
	transition: opacity 0.3s;
}

.header nav a:hover {
	opacity: 0.8;
}

.header nav .cta-button {
	padding: 8px 15px; margin-left: 20px;
}

.cta-button {
	display: inline-block;
	background-color: #28a745; /* 강조 색상 */
	color: white;
	padding: 15px 30px;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	font-size: 18px;
	transition: background-color 0.3s, transform 0.2s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
	background-color: #218838;
	transform: translateY(-2px);
}

main > section:nth-of-type(even) {
	background-color: #ffffff;
}
main > section:nth-of-type(odd) {
	background-color: #f4f7f9;
}

/* 2. 히어로 섹션 */
.hero {
	background-color: #ffffff;
	color: #333;
	padding: 80px 20px;
	text-align: center;
	border-bottom: 5px solid #007bff;
	/* hero 배경이미지 로테이션 */
	display: flex;
	align-items: center;
	color: #fff; /* 글자색을 흰색으로 고정 */
	text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.5);
	/* hero 섹셧 높이 화면 꽉채우기 */
	position: relative; overflow: hidden; 
	height: 84vh; min-height:600px;
}
@media (max-width: 768px) {
	/* hero 배경이미지 로테이션 */
	.hero { min-height: 280px; }
}
/* hero 배경이미지 로테이션 */
.hero-bg {
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 0;
	transition: opacity 1s ease;
}
/* Hero 섹션 글자 위에 반투명 검정 오버레이 추가 */
.hero::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(30,30,30,0.5) 0%, rgba(0,0,0,0.5) 100%);
	z-index: 1;
	pointer-events: none;
}
.hero .container {
	position: relative;
	z-index: 2;
}
/* hero 배경이미지 로테이션 */

.hero h2 {
	font-size: 42px;
	margin-bottom: 10px;
	color: #007bff;
	font-weight: 800;
}

.hero p {
	font-size: 20px;
	margin-bottom: 40px;
	color: #eee;
}


/* 🌟 서비스 소개 섹션 (가치 정의) */
.value-proposition {
	padding: 60px 20px;
	/* background-color: #ffffff; */
	border-bottom: 1px solid #eee;
}

.value-proposition .container .title {text-align: center; font-size: 32px; color: #333; margin-bottom: 10px;}
.value-proposition .container .description {text-align: center; font-size: 18px; color: #666; margin-bottom: 40px;}

.value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 20px;
}

.value-item {
	padding: 30px;
	border-radius: 10px;
	background-color: #f8f8f8;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.value-item h4 {
	font-size: 22px;
	color: #333;
	margin-top: 0;
	margin-bottom: 10px;
}

.value-item p {
	font-size: 15px;
	color: #555;
}

/* 폰트 아이콘 스타일 (Font Awesome 필요) */
.value-item i {
	color: #007bff; /* 기본 색상 */
}

/* 3. 주요 기능 섹션 (기존 features-grid) */
.features-grid {

}
.features-grid .container{
	/* [🌟핵심 수정 1] 최대 너비를 지정하여 박스가 너무 넓게 퍼지는 것을 방지 */
	/* 2열 배치에 적합하도록 700px~900px 사이로 설정 */
	max-width: 800px; 
	
	/* [🌟핵심 수정 2] 섹션 전체 중앙 정렬 */
	margin-left: auto;
	margin-right: auto;
	
	/* 기존 설정 */
	padding: 60px 20px;
	
	/* [🌟핵심 수정 3] 2열로 고정 (반응형을 위해 minmax 대신 고정 2열 사용) */
	display: grid;
	grid-template-columns: 1fr 1fr; /* 1:1 비율로 2열 고정 */
	gap: 25px; /* 박스 간격 */
}

.features-grid h3 {
	grid-column: 1 / -1; /* 타이틀이 2열 전체 너비를 차지하도록 설정 */
	text-align: center;
	font-size: 32px;
	color: #333;
	margin-top: 0;
	margin-bottom: 40px; 
	font-weight: 700;
	position: relative;
	padding-bottom: 10px;
}

/* 신규 추가: 타이틀 아래 구분선 (선택 사항, 디자인 강화) */
.features-grid h3::after {
	content: "";
	display: block;
	width: 60px; /* 선의 길이 */
	height: 3px;
	background-color: #007bff; /* 메인 강조 색상 */
	margin: 10px auto 0;
	border-radius: 2px;
}

/* 기존 features-grid의 div는 그대로 유지 */
/* .feature-box를 감싸는 .features-grid의 div가 필요하면 grid-template-columns를 조정해야 합니다. */
/* 현재 HTML 구조상 h3를 포함한 모든 요소가 .features-grid 안에 있으므로, 위 h3 스타일이 잘 작동합니다. */

.feature-box {
	background-color: white;
	padding: 25px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s, box-shadow 0.3s;
	text-align: center;
}
/* 이하 .feature-box 내 스타일은 기존과 동일 */

.feature-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.feature-box h4 {
	color: #007bff;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
}

/* 4. 작동 방식 섹션 (추가됨) */
.how-it-works {
	padding: 60px 20px;
	text-align: center;
	/* background-color: #ffffff; */
}

.how-it-works h3 {
	font-size: 32px;
	color: #333;
	margin-bottom: 40px;
}

.steps-container {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.step {
	max-width: 300px;
	padding: 20px;
	border: 1px solid eee;
	border-radius: 10px;
	background-color: #fff;
	transition: background-color 0.3s;
}

.step:hover {
	background-color: #f0f8ff;
}

.step-number {
	font-size: 36px;
	font-weight: bold;
	color: #28a745;
	margin-bottom: 10px;
	display: block;
}

.step h4 {
	font-size: 20px;
	color: #007bff;
	margin-top: 10px;
}

.step p {
	color: #666;
}

/* 5. 최종 CTA 섹션 (추가됨) */
.final-cta {
	background-color: #007bff;
	color: white;
	padding: 60px 20px;
	text-align: center;
}

.final-cta h3 {
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: 700;
}

.final-cta p {
	font-size: 18px;
	margin-bottom: 30px;
}

/* 6. 푸터 스타일 */
.footer {
	background-color: #333;
	color: white;
	text-align: center;
	padding: 20px 0;
	font-size: 14px;
}

.footer a {
	color: #b0c4de;
	text-decoration: none;
	margin: 0 5px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
	.hero h2 {
		font-size: 32px;
	}
	
	.hero p {
		font-size: 16px;
	}

	.features-grid {
		grid-template-columns: 1fr; /* 모바일에서는 1열로 변경 */
		max-width: none; /* 모바일에서 너비 제한 해제 */
	}
	
	.steps-container {
		flex-direction: column;
		gap: 20px;
	}
	
	.step {
		max-width: 100%;
	}
}

/* 4. 가격 플랜 섹션 (추가됨) */
.pricing-plan {
	padding: 60px 20px;
	text-align: center;
	/* background-color: #f4f7f9; 배경색을 살짝 다르게 하여 구분 */
}

.pricing-plan h3 {
	font-size: 32px;
	color: #333;
	margin-bottom: 10px;
}

.price-subtitle {
	font-size: 18px;
	color: #666;
	margin-bottom: 40px;
}

.price-card-container {
	display: flex;
	justify-content: center;
	padding: 0 20px;
}

.price-card {
	background-color: white;
	padding: 40px;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	max-width: 400px;
	width: 100%;
	transition: transform 0.3s;
	border: 3px solid #007bff; /* 단일 플랜임을 강조 */
}

.price-card:hover {
	transform: translateY(-5px);
}

.plan-header h4 {
	font-size: 24px;
	color: #007bff;
	margin-top: 0;
	margin-bottom: 5px;
}

.plan-description {
	color: #777;
	margin-bottom: 30px;
	font-size: 15px;
}

.plan-price {
	margin-bottom: 20px;
	padding: 15px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	text-align: center; 
}

.plan-price .currency {
	font-size: 24px;
	font-weight: 500;
	vertical-align: top;
	color: #333;
}

.plan-price .amount {
	font-size: 60px;
	font-weight: 900;
	color: #28a745; /* 가격 강조 색상 */
	line-height: 1;
	display: inline-block;
}

.plan-price .period {
	font-size: 18px;
	color: #333;
	font-weight: 500;
	vertical-align: bottom;
}

/* [신규 스타일] 할인 전 가격 (취소선) */
.original-price-wrap {
	color: #999; /* 회색으로 처리 */
	font-size: 18px; 
	margin-bottom: 5px;
}

.original-price-wrap .amount.original {
	font-size: 30px;
	font-weight: 500;
	color: #999;
	line-height: 1;
	text-decoration: line-through;
}

/* [신규 스타일] 할인 후 가격 (강조) */
.discounted-price-wrap {
	padding: 10px 0;
	margin-bottom: 10px;
}

.discounted-price-wrap .currency.new {
	font-size: 28px;
	font-weight: 600;
	vertical-align: top;
	color: #333;
}

.discounted-price-wrap .amount.new {
	font-size: 65px; /* 새로운 가격을 매우 크게 강조 */
	font-weight: 900;
	color: #dc3545; /* 강조색 (할인/한정판 느낌) */
	line-height: 1;
	display: inline-block;
}

.discounted-price-wrap .period.new {
	font-size: 20px;
	color: #333;
	font-weight: 600;
	vertical-align: bottom;
}





.plan-features ul {
	list-style: none;
	padding: 0;
	margin-bottom: 30px;
	text-align: left;
}

.plan-features li {
	padding: 8px 0;
	border-bottom: 1px dotted #eee;
	color: #444;
	font-size: 16px;
	text-align: center;
}

.plan-features li:last-child {
	border-bottom: none;
}

/* CTA 버튼 스타일 재사용 및 강화 */
.primary-cta {
	display: block;
	/* width: 100%; */
	text-align: center;
	background-color: #007bff !important; /* 메인 CTA 색상으로 지정 */
	color: white !important;
	padding: 12px 20px;
	font-size: 18px;
}

.primary-cta:hover {
	background-color: #0056b3 !important;
}

/* 3. 고객 활용 사례 섹션 (신규) */
.use-case-bubbles {
	padding: 60px 20px;
	text-align: center;
	/* background-color: #ffffff; */
	border-bottom: 1px solid #eee;
}

.use-case-bubbles h3 {
	font-size: 32px;
	color: #333;
	margin-bottom: 10px;
}

.case-subtitle {
	font-size: 18px;
	color: #666;
	margin-bottom: 40px;
}

.bubble-grid {
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	gap: 15px;
	margin-bottom: 40px;
	padding: 20px;
}

.chat-bubble {
	padding: 15px;
	border-radius: 20px;
	max-width: 90%;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.user-message {
	background-color: #dcf8c6; /* 사용자 말풍선 (밝은 녹색) */
	justify-self: end;
	border-bottom-right-radius: 5px; /* 끝 부분만 둥글지 않게 */
}

.ai-response {
	background-color: #f0f0f0; /* AI 말풍선 (밝은 회색) */
	justify-self: start;
	border-bottom-left-radius: 5px; /* 끝 부분만 둥글지 않게 */
}

.chat-bubble p {
	margin: 0;
}

.case-cta {
	margin-top: 50px;
}

.case-cta .cta-button {
	font-size: 16px;
	padding: 10px 25px;
}

@media (max-width: 768px) {
	.bubble-grid {
		padding: 0;
	}
}