/*
	에이시티호스팅 (ACT HOSTING) - 벌쳐(Vultr) 한글 공식 스크린샷 동기화 스타일시트
	파일 경로: www/layouts/acthosting/css/main.css
	설명: 벌쳐(Vultr) 한국어 공식 시안의 회청색 가입 버튼, 극도로 얇은 한글 폰트(weight: 300) 연출 및 슬림 폼을 200% 일치화한 리워크 CSS.
*/

/* --------------------------------------------------
   0. 코어 스타일 변수(Variables) 및 레이아웃 정의
   -------------------------------------------------- */
:root {
	--vultr-blue: #007bfc;
	--vultr-blue-hover: #0056b3;
	--vultr-deep-blue: #031059;
	--vultr-light-gray: #f7f7f7;
	--vultr-border: #eeeeee;
	--vultr-input-bg: rgba(0, 123, 252, 0.03); /* 연하게 정돈 */
	
	/* 사용자의 피드백을 반영하여 진하고 묵직하게 조율된 회청색/다크그레이 버튼 백그라운드 색상 */
	--vultr-btn-gray: #4b5563; /* 좀 더 진하고 시크한 슬레이트 그레이 */
	--vultr-btn-gray-hover: #1f2937; /* 호버 시 더욱 묵직해지는 다크 차콜 그레이 */
	
	--text-primary: #031059;
	--text-secondary: #4e5259;
	--text-muted: #8692b0;
	--white: #ffffff;
}

.act-main-wrapper {
	background-color: var(--white);
	color: var(--text-secondary);
	font-family: 'Inter', 'Noto Sans KR', sans-serif;
	overflow-x: hidden;
	padding-bottom: 80px;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	box-sizing: border-box;
}

/* --------------------------------------------------
   1. 벌쳐 오리지널 영웅 배너 섹션 (Hero Banner - 소용돌이 리본 배경 연동)
   -------------------------------------------------- */
.banner {
	background-color: var(--white) !important; /* 배경 이미지 유실/모바일 연장 시 투명하게 검은 바디가 드러나는 글리치 방지용 기본 배경색 */
	background-image: url('../images/vultr_style_hero_bg.png') !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	padding: 130px 0 100px;
	position: relative;
	color: var(--white);
}

.banner__content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.banner__heading-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 3rem;
}

/* 좌측 대형 타이틀 영역 (벌쳐 한글 시안과 100% 매칭) */
.banner__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	flex: 1;
	text-align: left;
}

.banner__title {
	font-family: 'Inter', 'Noto Sans KR', sans-serif;
	font-weight: 500; /* 헤더는 벌쳐 공식처럼 확실히 두께감 있게 설정하여 묵직함 표현 */
	font-size: 3.5rem;
	line-height: 4.5rem;
	color: var(--white);
	margin: 0;
	letter-spacing: -1.5px;
}

.banner__title span {
	font-weight: 700;
	color: #ffffff;
}

/* 얇은 가독성 한글 폰트 적용 (weight: 300 및 정밀한 자간 튜닝) */
.banner__subtitle {
	font-size: 1.15rem;
	font-weight: 300 !important; /* 극도로 얇은 한글 폰트 구현 */
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	max-width: 650px;
	letter-spacing: -0.5px; /* 한글 자간 밀착으로 가독성 극대화 */
}

/* --------------------------------------------------
   2. 새하얀 우측 간편 상담 양식 카드 (Form Card - 벌쳐 최신 비주얼 동기화)
   -------------------------------------------------- */
.banner__form-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	flex-shrink: 0;
}

.banner__form {
	background-color: var(--white);
	border: 1px solid var(--vultr-border);
	border-radius: 4px;
	padding: 2.5rem 2rem;
	width: 100%;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
	color: var(--text-secondary);
	box-sizing: border-box;
}

/* 타이틀 한글화 및 폰트 얇게 유도 */
.banner__form-title {
	font-family: 'Inter', 'Noto Sans KR', sans-serif;
	font-weight: 300 !important; /* 아주 얇고 세련되게 처리 */
	font-size: 1.65rem;
	color: #007bfc;
	text-align: left;
	margin: 0 0 24px;
	letter-spacing: -1px;
}

/* 폼 입력 요소 구성 */
.banner__form .form-group {
	margin-bottom: 1.25rem;
	position: relative;
}

.banner__form .form-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.banner__form .form-icon {
	position: absolute;
	left: 16px;
	color: #007bfc;
	font-size: 1.1rem;
	pointer-events: none;
	opacity: 0.8;
}

/* 입력창 글꼴도 매우 얇게 처리 */
.banner__form .form-input,
.banner__form .form-select {
	width: 100%;
	padding: 14px 16px 14px 44px;
	background-color: var(--vultr-input-bg);
	border: 1px solid rgba(0, 123, 252, 0.08); /* 얇고 연한 테두리 가미 */
	border-radius: 4px;
	color: var(--vultr-deep-blue);
	font-size: 0.95rem;
	font-weight: 300 !important; /* 입력 글꼴 아주 얇게 */
	letter-spacing: -0.3px;
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
}

.banner__form .form-input::placeholder {
	color: var(--text-muted);
	font-weight: 300 !important;
	letter-spacing: -0.3px;
}

.banner__form .form-input:focus,
.banner__form .form-select:focus {
	background-color: var(--white);
	outline: none;
	border: 1px solid var(--vultr-blue);
	box-shadow: 0 0 8px rgba(0, 123, 252, 0.1);
}

/* 약관 동의 체크박스 및 얇은 한글 글꼴 */
.tos-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 1.5rem;
	text-align: left;
}

.tos-wrapper input[type="checkbox"] {
	margin-top: 3px;
	cursor: pointer;
}

.tos-text {
	font-size: 0.8125rem;
	color: #4e5259;
	font-weight: 300 !important; /* 매우 얇은 한글 폰트 적용 */
	line-height: 1.45;
	letter-spacing: -0.4px;
}

.tos-text a {
	color: var(--vultr-blue);
	text-decoration: none;
}

.tos-text a:hover {
	text-decoration: underline;
}

/* 무료 계정 만들기 회청색 버튼 스타일 (스크린샷 100% 동기화) */
.banner__button {
	display: flex;
	justify-content: center;
	width: 100%;
}

.banner__button .btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 16px 24px !important; /* 패딩을 여유 있게 확보하여 안정감 있는 높이 형성 */
	font-size: 1.05rem !important;
	font-weight: 300 !important; /* 이미지 시안과 동일하게 아주 슬림하고 얇게 폰트 웨이트 튜닝 */
	letter-spacing: -0.3px !important;
	color: var(--white) !important;
	background: none !important; /* 라이믹스 코어의 구형 흰색 입체 그라데이션 배경을 완전히 무력화 */
	background-color: var(--vultr-btn-gray) !important; /* 세련된 진회색 기본 매핑 */
	border: none !important;
	border-radius: 0px !important; /* 둥글기값을 전면 0px로 깎아내어 완전 사각형 큐브화 */
	cursor: pointer !important;
	box-shadow: none !important;
	height: auto !important; /* 강제된 높이값 초기화 */
	text-shadow: none !important; /* 구형 텍스트 그림자 전면 철거 */
	transition: all 0.22s ease-in-out !important;
}

.banner__button .btn span {
	color: #ffffff !important; /* 다른 코어 스타일의 개입을 차단하고 완전한 순백색 텍스트 강제 보장 */
	font-size: 1.05rem !important; /* 왜소하고 찌그러져 보이던 글꼴 크기를 복원 및 고정 */
	font-weight: 300 !important; /* 얇고 수려한 이미지 시안 글꼴 두께 계승 */
	letter-spacing: -0.3px !important;
	display: inline-block !important;
}

.banner__button .btn:hover {
	background: none !important;
	background-color: var(--vultr-btn-gray-hover) !important; /* 호버 시 파란색으로 튀지 않고 시크하게 더욱 진한 회색으로 통일 */
	box-shadow: none !important; /* 둥근 그림자 전면 철거 */
}

.banner__button .btn .btn-arrow {
	transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	flex-shrink: 0 !important;
	opacity: 0.85 !important;
}

.banner__button .btn:hover .btn-arrow {
	transform: translateX(5px) !important;
	opacity: 1 !important;
}

.banner__form-member-link {
	padding: 1.25rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--text-muted);
	font-weight: 300 !important;
	letter-spacing: -0.4px;
}

.banner__form-member-link a {
	color: var(--vultr-blue);
	text-decoration: none;
	font-weight: 400;
	letter-spacing: -0.4px;
}

.banner__form-member-link a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------
   3. 제품 라인업 카드 그리드 (Product Cards - F7F7F7)
   -------------------------------------------------- */
.banner__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	width: 100%;
	margin-top: 50px;
}

/* 벌쳐 어나운스먼트 전용 블루 카드 */
.banner__card--announcement {
	background-color: var(--vultr-blue) !important;
	color: var(--white) !important;
}

.banner__card--announcement .banner__card-header {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 1.5px;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.banner__card--announcement .banner__card-title {
	color: var(--white) !important;
	font-weight: 300 !important;
	font-size: 1.8rem;
	line-height: 1.35;
	letter-spacing: -0.5px;
}

.banner__card--announcement .banner__card-link {
	color: var(--white) !important;
	font-weight: 400;
	font-size: 1.05rem;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: transform 0.2s;
}

.banner__card--announcement .banner__card-link:hover {
	transform: translateX(4px);
}

/* 일반 제품군 카드 (연한 그레이 및 얇은 폰트) */
.banner__card {
	background-color: var(--white);
	border: 1px solid var(--vultr-border);
	border-radius: 0px;
	padding: 2rem;
	min-height: 250px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
	text-decoration: none;
	position: relative;
	top: 0;
}

.banner__card:hover {
	top: -8px;
	border: 1px solid var(--vultr-blue);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.banner__card-text-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.banner__card-title {
	color: var(--vultr-deep-blue);
	font-weight: 300;
	font-size: 1.5rem;
	margin: 0;
	letter-spacing: -0.5px;
}

.banner__card-description {
	color: var(--text-secondary);
	font-weight: 300 !important; /* 얇은 한글 폰트 적용 */
	font-size: 1.0625rem;
	line-height: 1.5;
	margin: 0;
	letter-spacing: -0.3px;
}

.banner__card-price {
	color: var(--vultr-blue);
	font-weight: 400;
	font-size: 1.0625rem;
	margin-top: auto;
	margin-bottom: 0;
	transition: color 0.3s ease-in-out;
	letter-spacing: -0.3px;
}

.banner__card:hover .banner__card-price {
	color: var(--vultr-deep-blue);
}

/* --------------------------------------------------
   4. 차세대 AI 인프라 섹션 (AI Infrastructure)
   -------------------------------------------------- */
.ai-infra {
	padding: 90px 0;
	background-color: var(--white);
	overflow: hidden;
}

.ai-infra__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ai-infra__header {
	text-align: left;
	margin-bottom: 36px;
}

.ai-infra__title {
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	line-height: 1.25;
	font-weight: 300;
	color: var(--vultr-deep-blue);
	margin-bottom: 40px;
	letter-spacing: -1.5px;
}

/* 벌쳐 탭 메뉴 스타일 */
.ai-tabs {
	display: inline-flex;
	padding: 5px;
	border-radius: 99px;
	background: var(--vultr-light-gray);
	border: 1px solid rgba(0, 0, 0, 0.03);
}

.ai-tab {
	border: none;
	border-radius: 999px;
	padding: 10px 28px;
	background: transparent;
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 300 !important; /* 탭 글꼴 얇게 */
	cursor: pointer;
	transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	letter-spacing: -0.5px;
}

.ai-tab.is-active {
	background: var(--vultr-blue);
	color: var(--white);
	box-shadow: 0 4px 14px rgba(0, 123, 252, 0.25);
	font-weight: 500 !important;
}

/* 2단 플렉스 바디 구조화 */
.ai-infra__body {
	display: flex;
	gap: 60px;
	align-items: center;
	margin-top: 36px;
	position: relative;
	width: 100%;
}

/* 좌측 기술 상세 카드 영역 (비율 1.25) */
.ai-infra__left {
	flex: 1.25;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0; /* flex 자식 찌그러짐 현상 방지 */
}

/* 탭 패널 카드 수직 나열 레이아웃 */
.ai-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	opacity: 1;
	transition: opacity 0.45s ease-in-out;
}

.ai-grid.is-hidden {
	display: none !important;
	opacity: 0;
}

/* 수직 와이드 카드 고급화 */
.ai-card {
	background: var(--vultr-light-gray);
	border: 1px solid var(--vultr-light-gray);
	border-radius: 0px; /* 벌쳐 특유의 미니멀 사각 플랫 디자인 계승 */
	padding: 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	top: 0;
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ai-card:hover {
	top: -4px;
	background-color: var(--white);
	border-color: var(--vultr-blue);
	box-shadow: 0 16px 32px rgba(0, 123, 252, 0.07);
}

.ai-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.ai-card__title {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--vultr-deep-blue);
	margin: 0;
	letter-spacing: -0.8px;
}

.ai-card__arrow {
	font-size: 1.35rem;
	color: var(--vultr-blue);
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ai-card:hover .ai-card__arrow {
	transform: translateX(6px);
}

.ai-card__body {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--text-secondary);
	font-weight: 300 !important; /* 극도로 슬림하고 우아한 본문 서체 */
	margin: 0;
	letter-spacing: -0.4px;
}

.ai-card__pricing {
	font-size: 0.95rem;
	color: var(--text-muted);
	font-weight: 300;
	margin-top: 4px;
	letter-spacing: -0.3px;
}

.ai-card__pricing span {
	color: var(--vultr-blue);
	font-weight: 500;
}

/* 우측 실시간 CSS/자바스크립트 3D 등고선 기하학 파형 공간 (비율 0.75) */
.ai-infra__right {
	flex: 0.75;
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1200px; /* 3D 입체 투영 공간 연출 */
	min-width: 0;
}

.act-geo-waves {
	position: relative;
	width: 480px;
	height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	/* 사용자가 준 벌쳐 시안처럼 비스듬히 입체적으로 누워 소용돌이치는 기본 3D 회전 배정 */
	transform: rotateX(28deg) rotateY(-20deg) rotateZ(5deg);
	transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	will-change: transform;
}

/* 15중 등고선 파형 레이어 기하학 설계 */
.wave-line {
	position: absolute;
	border: 1.5px solid rgba(0, 123, 252, 0.08); /* 얇고 정밀한 등고 파형선 */
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; /* 부드러운 유기적 타원형 초기값 */
	transform-origin: center center;
	pointer-events: none;
	will-change: transform, border-radius;
	transition: border-color 0.6s ease;
}

/* 15중 레이어의 나선형 점진 오프셋(Offset: 크기를 줄이며 중심을 서서히 오른쪽 아래로 이동시켜 3D 소용돌이 터널 구현) */
.wave-line:nth-child(1)  { width: 100%; height: 100%; left: 0%;    top: 0%;    animation: geoWaveRotate 42s infinite linear;         opacity: 0.90; border-color: rgba(0, 123, 252, 0.32); }
.wave-line:nth-child(2)  { width: 94%;  height: 94%;  left: 2.2%;  top: 1.8%;  animation: geoWaveRotate 39s infinite linear reverse; opacity: 0.84; border-color: rgba(0, 123, 252, 0.29); }
.wave-line:nth-child(3)  { width: 88%;  height: 88%;  left: 4.4%;  top: 3.6%;  animation: geoWaveRotate 36s infinite linear;         opacity: 0.78; border-color: rgba(0, 123, 252, 0.26); }
.wave-line:nth-child(4)  { width: 82%;  height: 82%;  left: 6.6%;  top: 5.4%;  animation: geoWaveRotate 33s infinite linear reverse; opacity: 0.72; border-color: rgba(0, 123, 252, 0.23); }
.wave-line:nth-child(5)  { width: 76%;  height: 76%;  left: 8.8%;  top: 7.2%;  animation: geoWaveRotate 30s infinite linear;         opacity: 0.65; border-color: rgba(0, 123, 252, 0.20); }
.wave-line:nth-child(6)  { width: 70%;  height: 70%;  left: 11.0%; top: 9.0%;  animation: geoWaveRotate 27s infinite linear reverse; opacity: 0.58; border-color: rgba(0, 123, 252, 0.17); }
.wave-line:nth-child(7)  { width: 64%;  height: 64%;  left: 13.2%; top: 10.8%; animation: geoWaveRotate 24s infinite linear;         opacity: 0.51; border-color: rgba(0, 123, 252, 0.14); }
.wave-line:nth-child(8)  { width: 58%;  height: 58%;  left: 15.4%; top: 12.6%; animation: geoWaveRotate 21s infinite linear reverse; opacity: 0.44; border-color: rgba(0, 123, 252, 0.11); }
.wave-line:nth-child(9)  { width: 52%;  height: 52%;  left: 17.6%; top: 14.4%; animation: geoWaveRotate 18s infinite linear;         opacity: 0.37; border-color: rgba(0, 123, 252, 0.09); }
.wave-line:nth-child(10) { width: 46%;  height: 46%;  left: 19.8%; top: 16.2%; animation: geoWaveRotate 16s infinite linear reverse; opacity: 0.30; border-color: rgba(0, 123, 252, 0.07); }
.wave-line:nth-child(11) { width: 40%;  height: 40%;  left: 22.0%; top: 18.0%; animation: geoWaveRotate 14s infinite linear;         opacity: 0.23; border-color: rgba(0, 123, 252, 0.05); }
.wave-line:nth-child(12) { width: 34%;  height: 34%;  left: 24.2%; top: 19.8%; animation: geoWaveRotate 12s infinite linear reverse; opacity: 0.17; border-color: rgba(0, 123, 252, 0.04); }
.wave-line:nth-child(13) { width: 28%;  height: 28%;  left: 26.4%; top: 21.6%; animation: geoWaveRotate 10s infinite linear;         opacity: 0.12; border-color: rgba(0, 123, 252, 0.03); }
.wave-line:nth-child(14) { width: 22%;  height: 22%;  left: 28.6%; top: 23.4%; animation: geoWaveRotate 8s infinite linear reverse;  opacity: 0.08; border-color: rgba(0, 123, 252, 0.02); }
.wave-line:nth-child(15) { width: 16%;  height: 16%;  left: 30.8%; top: 25.2%; animation: geoWaveRotate 6s infinite linear;          opacity: 0.04; border-color: rgba(0, 123, 252, 0.01); }

/* 극적이고 강렬한 물결 찌그러짐 모핑과 비대칭 3D 회전을 혼합한 극대화 키프레임 */
@keyframes geoWaveRotate {
	0% {
		transform: rotate(0deg) scale(1) translateZ(0px);
		border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
	33% {
		transform: rotate(120deg) scale(1.06) translateZ(25px);
		/* 훨씬 더 강하게 일그러지는 타원 굴곡으로 역동성 극대화 */
		border-radius: 75% 25% 65% 35% / 70% 30% 70% 30%;
	}
	66% {
		transform: rotate(240deg) scale(0.94) translateZ(-25px);
		border-radius: 30% 70% 25% 75% / 30% 70% 25% 75%;
	}
	100% {
		transform: rotate(360deg) scale(1) translateZ(0px);
		border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
}

/* 극도로 미세하게 회전하면서 찌그러진 3D 소용돌이 형태로 물결치는 핵심 키프레임 */
@keyframes geoWaveRotate {
	0% {
		transform: rotate(0deg) scale(1) translateZ(0px);
		border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
	33% {
		transform: rotate(120deg) scale(1.02) translateZ(15px);
		border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%;
	}
	66% {
		transform: rotate(240deg) scale(0.98) translateZ(-15px);
		border-radius: 48% 62% 35% 65% / 40% 60% 35% 65%;
	}
	100% {
		transform: rotate(360deg) scale(1) translateZ(0px);
		border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
}

/* --------------------------------------------------
   5. 메인 안내 배너 (AI Agent Banner)
   -------------------------------------------------- */
.ai-agent {
	position: relative;
	margin-top: 40px;
	border-radius: 4px;
	overflow: hidden;
	color: #ffffff;
	min-height: 220px;
	display: flex;
	align-items: center;
	background: #172147;
	z-index: 1;
}

.ai-agent__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	z-index: 0;
}

.ai-agent__content {
	position: relative;
	z-index: 1;
	padding: 32px 40px;
	max-width: 50%;
	text-align: left;
}

.ai-agent__eyebrow {
	font-size: 1.5rem;
	margin-bottom: 10px;
	color: #52baff;
	font-weight: 300;
}

.ai-agent__title {
	font-size: 2.25rem;
	line-height: 1.3;
	margin: 0 0 14px;
	color: #ffffff;
	font-weight: 400;
	letter-spacing: -1px;
}

.ai-agent__text {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 18px;
	color: #ffffff;
	font-weight: 300 !important; /* 얇은 폰트 */
}

.ai-agent__link {
	font-size: 1rem;
	color: #51b9ff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease-in-out;
	font-weight: 400;
}

.ai-agent__link:hover {
	color: #ffffff;
	transform: translateX(4px);
}

/* --------------------------------------------------
   6. 반응형 및 디바이스 최적화 (Responsive Web)
   -------------------------------------------------- */
/* --------------------------------------------------
   6. 반응형 및 디바이스 최적화 (Responsive Web)
   -------------------------------------------------- */
@media (min-width: 752px) {
	.banner__content-wrapper {
		flex-direction: column;
	}

	.banner__heading-wrapper {
		flex-direction: row;
		align-items: stretch;
		gap: 3rem;
	}

	.banner__content {
		text-align: left;
		margin-bottom: 0;
	}

	.banner__title {
		font-size: 3.5rem;
		line-height: 4.5rem;
	}

	.banner__subtitle {
		font-size: 1.1875rem;
		line-height: 1.5rem;
		text-align: left;
	}

	.banner__form-wrapper {
		justify-content: flex-end;
	}

	.banner__form {
		max-width: 400px;
	}
}

@media (min-width: 1012px) {
	.banner__cards {
		grid-template-columns: repeat(2, 1fr) repeat(2, 1fr);
	}

	.banner__card--announcement {
		grid-column: span 2;
	}
}

/* 태블릿 및 대화면 모바일 최적화 (991px 이하) */
@media (max-width: 991px) {
	.banner__title {
		font-size: 2.8rem;
		line-height: 3.6rem;
	}
	.banner__subtitle {
		font-size: 1.05rem;
	}
	.ai-infra__body {
		gap: 30px;
	}
	.act-geo-waves {
		width: 320px;
		height: 320px;
	}
	.ai-infra__right {
		min-height: 380px;
	}
}

/* 모바일 전용 정밀 보정 및 찌러짐 원천 차단 (767px 이하) */
@media (max-width: 767px) {
	.banner {
		padding: 90px 0 50px;
	}
	
	.banner__heading-wrapper {
		flex-direction: column !important;
		gap: 2rem !important;
	}
	
	.banner__content {
		text-align: center;
		align-items: center;
		padding: 0;
	}
	
	.banner__title {
		font-size: 2.2rem !important;
		line-height: 2.8rem !important;
		text-align: center;
	}
	
	.banner__subtitle {
		font-size: 0.98rem !important;
		line-height: 1.55 !important;
		text-align: center;
		margin: 0 auto;
	}
	
	.banner__form-wrapper {
		max-width: 100% !important;
		width: 100% !important;
		justify-content: center;
	}
	
	.banner__form {
		padding: 2rem 1.5rem !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	}
	
	/* 제품 카드 리스트 모바일 가로 2열(2x2 Grid) 전격 개편 */
	.banner__cards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		margin-top: 30px;
	}
	
	.banner__card {
		min-height: 220px !important; /* 모바일 2열 배치 시 균일한 높이 확보 */
		padding: 1.25rem 1rem !important; /* 모바일 내부 여백 슬림화 */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.banner__card--announcement {
		grid-column: span 1 !important;
	}
	
	.banner__card-title {
		font-size: 1.1rem !important; /* 좁은 폭에서 깨짐 방지 폰트 최적화 */
		letter-spacing: -0.6px !important;
		line-height: 1.35 !important;
	}
	
	.banner__card-description {
		font-size: 0.8rem !important; /* 본문 극세화 처리로 찌그러짐 원천 차단 */
		line-height: 1.4 !important;
		letter-spacing: -0.3px !important;
		margin-top: 4px !important;
		font-weight: 300 !important;
	}
	
	.banner__card-price,
	.banner__card-link {
		font-size: 0.8rem !important;
		margin-top: auto !important; /* 하단 밀착 고정 */
		padding-top: 8px !important;
		letter-spacing: -0.3px !important;
	}
	
	/* 인프라 섹션 모바일 최적화 */
	.ai-infra {
		padding: 60px 0;
	}
	
	.ai-infra__header {
		margin-bottom: 24px;
	}
	
	.ai-infra__title {
		font-size: 1.85rem !important;
		text-align: center;
		margin-bottom: 28px;
	}
	
	.ai-tabs {
		width: 100%;
		flex-direction: column;
		border-radius: 12px;
		gap: 4px;
		padding: 6px;
	}
	
	.ai-tab {
		width: 100%;
		border-radius: 8px;
		padding: 12px;
		font-size: 1rem;
		text-align: center;
	}
	
	.ai-infra__body {
		flex-direction: column !important;
		gap: 20px !important;
		margin-top: 24px;
	}
	
	.ai-infra__left {
		width: 100% !important;
		flex: none !important;
	}
	
	/* 우측 기하학 파동은 모바일에서 레이아웃 찌그러짐을 피하고 가독성 집중을 위해 숨김 */
	.ai-infra__right {
		display: none !important;
		flex: none !important;
		min-height: auto !important;
	}
	
	.ai-card {
		padding: 22px 24px !important;
	}
	
	.ai-card__title {
		font-size: 1.25rem !important;
	}
	
	.ai-card__body {
		font-size: 0.95rem !important;
		line-height: 1.5 !important;
	}
	
	/* 하단 실시간 관제 배너 모바일 레이아웃 완전 정돈 */
	.ai-agent {
		min-height: auto !important;
		margin-top: 30px;
		background: #0f1838 !important; /* 배경 이미지 가독성 극대화를 위한 기본 암청색 충진 */
	}
	
	.ai-agent__bg {
		opacity: 0.15 !important; /* 모바일에서 텍스트 가독성을 절대 확보하기 위해 배경 밝기 대폭 하향 */
	}
	
	.ai-agent__content {
		max-width: 100% !important;
		padding: 36px 24px !important;
		text-align: center !important;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.ai-agent__eyebrow {
		font-size: 1.15rem !important;
		margin-bottom: 8px;
	}
	
	.ai-agent__title {
		font-size: 1.55rem !important;
		line-height: 1.35 !important;
		margin-bottom: 12px !important;
	}
	
	.ai-agent__text {
		font-size: 0.92rem !important;
		line-height: 1.55 !important;
		margin-bottom: 20px !important;
		word-break: keep-all; /* 한글 단어 단위 개행 */
	}
	
	.ai-agent__link {
		font-size: 0.92rem !important;
		justify-content: center;
		width: 100%;
		padding: 12px 0;
		border: 1px solid rgba(81, 185, 255, 0.3);
		border-radius: 4px;
		background-color: rgba(81, 185, 255, 0.05);
	}
}

/* --------------------------------------------------
   7. 커스텀 에러 및 회원가입 유효성 피드백 스타일 (Custom Validator & Error UI)
   -------------------------------------------------- */
/* 전체 에러 경고 박스 */
.form-error-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: rgba(239, 68, 68, 0.06); /* 매우 투명하고 세련된 붉은빛 */
	border: 1px solid rgba(239, 68, 68, 0.25);
	border-radius: 4px;
	padding: 12px 16px;
	margin-bottom: 1.5rem;
	animation: errorSlideDown 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.form-error-alert i {
	color: #ef4444;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.form-error-alert .error-msg {
	color: #ef4444;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.4px;
	text-align: left;
}

@keyframes errorSlideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 필드 에러 상태의 인풋 */
.banner__form .form-input.has-error {
	border: 1px solid rgba(239, 68, 68, 0.6) !important;
	background-color: rgba(239, 68, 68, 0.02) !important;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.08) !important;
}

.banner__form .form-input.has-error:focus {
	border: 1px solid #ef4444 !important;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.15) !important;
}

/* 필드 하단 개별 힌트 가이드 */
.field-error-text {
	color: #ef4444;
	font-size: 0.78rem;
	font-weight: 400;
	margin-top: 4px;
	text-align: left;
	display: block;
	letter-spacing: -0.4px;
	animation: errorFadeIn 0.2s ease-in-out forwards;
}

@keyframes errorFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}