/*
	에이시티호스팅 (ACT HOSTING) - 파트너 프로그램 전용 프리미엄 스타일시트
	파일 경로: www/layouts/acthosting/css/partners.css
	설명: 사용자의 요청에 따라 히어로 하단에 삼각형을 반대로 이어붙인 듯한 뾰족한 다각형(clip-path) 셰이프를 구현하고,
	      카드를 상단으로 오버랩하여 겹치게 배치하며 카드 텍스트를 정밀하고 작게 조율한 세련된 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-partners-wrapper {
	background-color: var(--white);
	color: var(--text-secondary);
	font-family: 'Inter', 'Noto Sans KR', sans-serif;
	overflow-x: hidden;
	padding-bottom: 120px;
}

/* --------------------------------------------------
   1. 히어로 섹션 (Partners Hero Section)
   -------------------------------------------------- */
.partners-hero {
	background-color: var(--vultr-deep-blue);
	/* 웅장하고 미려한 HSL 그라데이션 및 원형 레이저 이펙트 */
	background-image: radial-gradient(circle at 50% 35%, rgba(0, 123, 252, 0.35) 0%, transparent 65%), 
	                  linear-gradient(135deg, #020c42 0%, #004ac2 100%);
	/* 뾰족한 삼각형 clip-path 공간을 확보하기 위해 패딩 조율 */
	padding: 130px 0 240px;
	color: var(--white);
	text-align: center;
	position: relative;
	/* 아래가 삼각형 모양으로 뾰족하게 떨어지는 명품 Vultr 스타일 셰이프 */
	clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.partners-hero__content {
	max-width: 800px;
	margin: 0 auto;
}

.partners-hero__eyebrow {
	font-size: 0.9rem;
	font-weight: 600;
	color: #00d2ff; /* 더욱 선명한 스카이블루 조명 색상 */
	letter-spacing: 2.5px;
	margin-bottom: 24px;
	text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0, 210, 255, 0.2);
}

.partners-hero__title {
	font-size: 3.4rem;
	font-weight: 500 !important; /* 묵직하면서도 얇은 자간 비율 */
	line-height: 1.35;
	letter-spacing: -1.8px;
	margin: 0 0 28px;
	color: var(--white);
}

.partners-hero__subtitle {
	font-size: 1.25rem;
	font-weight: 300 !important; /* 시안처럼 깔끔하고 얇은 가독성 한글 */
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	letter-spacing: -0.6px;
}

/* 히어로 안의 파트너가 되세요 Vultr 오리지널 파란 버튼 스타일 (타 테마 간섭 차단 및 강제 사각 플랫화) */
.partners-btn-hero {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 15px 36px !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	letter-spacing: -0.4px !important;
	color: #ffffff !important;
	background-image: none !important; /* 구형 입체 그라데이션 차단 */
	background-color: #007bfc !important; /* Vultr 오리지널 브랜드 파란색 */
	border: none !important;
	border-radius: 0px !important; /* 둥글기 전면 0px 깎아서 완전 사각형 구축 */
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all 0.22s ease-in-out !important;
	box-shadow: 0 4px 15px rgba(0, 123, 252, 0.35) !important;
	margin-top: 36px !important;
	box-sizing: border-box !important;
	height: auto !important;
	text-shadow: none !important; /* 구형 글자 그림자 전면 철거 */
}

.partners-btn-hero:hover {
	background-color: #0056b3 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 22px rgba(0, 123, 252, 0.5) !important;
	color: #ffffff !important;
}

/* --------------------------------------------------
   2. 혜택 카드 그리드 섹션 (Benefits Section - 오버랩 디자인)
   -------------------------------------------------- */
.partners-benefits {
	padding: 0 0 80px;
	background-color: transparent !important; /* 투명하게 뚫어서 뒤의 히어로 뾰족한 삼각형 꼬리가 보이도록 설정 */
	margin-top: -120px; /* 히어로 다각형 내부와 카드가 안정적으로 오버랩되도록 조정 */
	position: relative;
	z-index: 100;
}

/* 2열 대칭 플랫 사각 그리드 */
.partners-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	max-width: 960px; /* 카드가 너무 넓게 퍼지지 않도록 안정된 너비 부여 */
	margin: 0 auto;
}

/* 둥글기 0px 플랫 카드 */
.partners-card {
	background-color: var(--white);
	border: 1px solid var(--vultr-border);
	border-radius: 0px !important; /* 완전 사각 큐브화 */
	padding: 48px 40px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	text-align: center; /* 카드 정렬 센터화로 단정함 상승 */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 호버 시 벌쳐 스카이블루 명품 네온 조명 점등 */
.partners-card:hover {
	transform: translateY(-8px);
	border-color: var(--vultr-blue);
	box-shadow: 0 20px 45px rgba(0, 123, 252, 0.15);
}

.partners-card__icon-wrapper {
	width: 56px;
	height: 56px;
	background-color: rgba(0, 123, 252, 0.05);
	color: var(--vultr-blue);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 1.7rem;
	margin-bottom: 24px;
	border-radius: 0px !important; /* 아이콘 둥글기도 0px */
}

/* 제목 텍스트 세련되게 축소 및 센터 정렬 */
.partners-card__title {
	font-size: 1.45rem; /* 작고 우아하게 튜닝 */
	font-weight: 600;
	color: var(--vultr-deep-blue);
	line-height: 1.35;
	margin: 0 0 18px;
	letter-spacing: -0.8px;
}

/* 설명문구 극도로 세련되게 축소 및 한글 300 웨이트 */
.partners-card__description {
	font-size: 0.925rem; /* 작고 우아하게 연출 */
	font-weight: 300 !important; /* 얇고 가독성 좋은 폰트 적용 */
	line-height: 1.7;
	color: var(--text-secondary);
	margin: 0;
	letter-spacing: -0.4px;
	word-break: keep-all; /* 한글 조사 줄바꿈 방지 */
}

/* --------------------------------------------------
   3. 파트너 신청서 폼 페이지 구성 (Form Page - T자형 헤더 연결 & 와이드 2분할)
   -------------------------------------------------- */
.partners-form-wrapper-page {
	padding-bottom: 0 !important;
	/* 전체 배경이 다 남색 그라데이션으로 이어지도록 보정 */
	background-color: #020c42 !important;
	width: 100% !important;
}

/* 레이아웃의 공통 컨테이너 강제 초기화 및 풀 스크린화 */
.container--form-full {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.partners-form-container {
	display: flex;
	width: 100% !important;
	min-height: calc(100vh - 76px); /* 100vh에서 헤더 높이 76px를 제외하여 정확히 매칭 */
	margin-top: 76px !important; /* 헤더 바로 아랫선에서 단정히 시작 */
	border: none !important;
	box-shadow: none !important;
	background-color: var(--white) !important; /* 오른쪽 절반과의 밸런스를 위해 흰색으로 복구 */
}

/* 좌측 남색/블루 정보 패널 (T자형 헤더 연결 & 부드러운 순환 그라데이션 이식) */
.partners-form__info-panel {
	flex: 1.1;
	padding: 48px 60px;
	color: var(--white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	text-align: left;
	
	/* 딥 네이비에서 선명한 남색/블루 사이를 물결치듯 움직이는 웅장한 그라데이션 */
	background: linear-gradient(135deg, #020c42 0%, #081a7a 50%, #010626 100%) !important;
	background-size: 200% 200% !important;
	animation: gradientPanel 8s ease infinite !important;
}

/* 남색 그라데이션 순환 애니메이션 키프레임 */
@keyframes gradientPanel {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.info-panel__eyebrow {
	font-size: 0.85rem;
	font-weight: 600;
	color: #00d2ff;
	letter-spacing: 2px;
	margin-bottom: 16px;
	text-shadow: 0 2px 8px rgba(0, 210, 255, 0.25);
}

.info-panel__title {
	font-size: 2.3rem; /* 2.6rem에서 2.3rem으로 다이어트 */
	font-weight: 300 !important; /* 극도로 슬림하고 웅장한 가독성 */
	line-height: 1.35;
	letter-spacing: -1.5px;
	margin: 0 0 20px;
}

.info-panel__title span {
	font-weight: 600;
	color: var(--white);
}

.info-panel__desc {
	font-size: 0.95rem; /* 세로 다이어트를 위해 폰트 축소 */
	font-weight: 300 !important;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 36px; /* 마진 축소 */
	letter-spacing: -0.5px;
	word-break: keep-all;
}

.info-panel__features {
	display: flex;
	flex-direction: column;
	gap: 24px; /* 간격 축소 */
}

.info-feature-item {
	display: flex;
	gap: 16px;
}

.info-feature-icon {
	width: 38px;
	height: 38px;
	background-color: rgba(255, 255, 255, 0.08);
	color: #00d2ff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	flex-shrink: 0;
	border-radius: 0px !important;
}

.info-feature-text h4 {
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0 4px;
	letter-spacing: -0.5px;
	color: var(--white);
}

.info-feature-text p {
	font-size: 0.85rem;
	font-weight: 300 !important;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	letter-spacing: -0.3px;
}

/* 우측 가입 신청서 폼 카드 패널 (기본 배경 흰색 및 뒤편에 파란색 3D 웨이브 그래픽 매핑) */
.partners-form__card-panel {
	flex: 1.3;
	padding: 48px 60px;
	background-color: var(--white) !important; /* 오른쪽 절반은 기본 흰색 */
	background-image: url('../images/vps_partnership_bg.png') !important; /* 나노바나나 3D 테크니컬 유체 이미지 연동! */
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important; /* 폼 뒤편 전체에 유려하게 3D 띠를 연출 */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* 3D 유체 그래픽 배경 위로 우아하고 선명하게 안착되는 새하얀 단독 플랫 카드 */
.partners-form__card {
	width: 100%;
	max-width: 440px;
	background-color: var(--white) !important; /* 가입 신청서 자체는 언제나 눈에 확 띄게 새하얀색 */
	border: 1px solid var(--vultr-border) !important;
	border-radius: 0px !important; /* 완전 0px 큐브 사각 */
	padding: 40px 32px !important; /* 카드 본체 내부 패딩 적용 */
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important; /* 시안처럼 조화롭고 은은한 섀도우 */
	text-align: left;
	box-sizing: border-box !important;
}

.partners-form__card-title {
	font-size: 1.65rem; /* 한눈에 들어오는 타이틀 축소 */
	font-weight: 600;
	color: var(--vultr-deep-blue);
	margin: 0 0 8px;
	letter-spacing: -1px;
}

.partners-form__card-subtitle {
	font-size: 0.85rem !important; /* 조금 더 축소하여 가로 공간 확보 */
	font-weight: 300 !important;
	color: var(--text-muted);
	margin: 0 0 28px; /* 아래 간격 압축 */
	letter-spacing: -0.5px !important; /* 자간을 꽉 조여 립니다. 줄바꿈 방지 */
	line-height: 1.45;
	word-break: keep-all !important; /* 조사 단위로 부드럽게 단어 연결 */
}

/* 폼 그룹 구성 */
.partners-form__card .form-group {
	margin-bottom: 16px; /* 24px에서 16px로 압축하여 세로 볼륨 다이어트 */
	position: relative;
}

.partners-form__card .form-label {
	display: block;
	font-size: 0.84rem; /* 슬림화 */
	font-weight: 600;
	color: var(--vultr-deep-blue);
	margin-bottom: 6px;
	letter-spacing: -0.3px;
}

.partners-form__card .form-label .required {
	color: #ef4444;
	margin-left: 2px;
}

.partners-form__card .form-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.partners-form__card .form-icon {
	position: absolute;
	left: 14px;
	color: var(--vultr-blue);
	font-size: 1rem;
	pointer-events: none;
	opacity: 0.8;
}

/* 플랫 사각 인풋 세로 높이 압축 */
.partners-form__card .form-input {
	width: 100%;
	padding: 11px 16px 11px 40px; /* 14px에서 11px로 줄여 컴팩트화 완비 */
	background-color: var(--vultr-input-bg);
	border: 1px solid rgba(0, 123, 252, 0.08);
	border-radius: 0px !important; /* 완전 0px 큐브화 */
	color: var(--vultr-deep-blue);
	font-size: 0.9rem;
	font-weight: 300 !important; /* 입력 얇게 */
	letter-spacing: -0.3px;
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
}

.partners-form__card .form-input::placeholder {
	color: var(--text-muted);
	font-weight: 300 !important;
	font-size: 0.88rem;
}

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

/* 약관 동의 체크박스 간격 축소 */
.partners-form__card .tos-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 24px; /* 28px/32px에서 압축 */
}

.partners-form__card .tos-wrapper input[type="checkbox"] {
	margin-top: 3px;
	cursor: pointer;
	accent-color: var(--vultr-blue);
}

.partners-form__card .tos-text {
	font-size: 0.82rem; /* 자간 축소 */
	color: var(--text-secondary);
	font-weight: 300 !important;
	line-height: 1.4;
	letter-spacing: -0.4px;
}

.partners-form__card .tos-text span {
	font-weight: 500;
	color: var(--vultr-deep-blue);
	text-decoration: underline;
	cursor: pointer;
}

.partners-form__card .tos-text .required {
	color: #ef4444;
}

/* 메일 전송하기 플랫 큐브 버튼 */
.partners-form__card .banner__button {
	width: 100%;
}

.partners-form__card .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: 400 !important;
	letter-spacing: -0.3px !important;
	color: var(--white) !important;
	background: none !important;
	background-color: var(--vultr-blue) !important; /* 브랜드 블루 단색 */
	border: none !important;
	border-radius: 0px !important; /* 완전 사각 큐브화 */
	cursor: pointer !important;
	box-shadow: none !important;
	height: auto !important;
	transition: all 0.22s ease-in-out !important;
}

.partners-form__card .banner__button .btn:hover {
	background-color: var(--vultr-blue-hover) !important;
	box-shadow: 0 4px 15px rgba(0, 123, 252, 0.2) !important;
}

.partners-form__card .banner__form-member-link {
	margin-top: 24px;
	font-size: 0.875rem;
	color: var(--text-muted);
	text-align: center;
	font-weight: 300 !important;
}

.partners-form__card .banner__form-member-link a {
	color: var(--vultr-blue);
	text-decoration: none;
	font-weight: 500;
	margin-left: 6px;
}

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

/* --------------------------------------------------
   4. 반응형 미디어 쿼리 (Responsive Media Queries - 정밀 보정)
   -------------------------------------------------- */
@media (max-width: 1024px) {
	.partners-grid {
		gap: 24px;
		padding: 0 24px;
	}
	
	.partners-form-container {
		flex-direction: column !important;
	}
	
	.partners-form__info-panel,
	.partners-form__card-panel {
		flex: none !important;
		width: 100% !important;
		padding: 100px 36px 48px !important; /* 모바일 GNB 간섭 조율 */
		box-sizing: border-box;
	}

	.partners-form__card-panel {
		padding: 48px 36px 80px !important;
	}

	.partners-form__info-panel {
		text-align: center !important;
		align-items: center !important;
	}
	
	.info-panel__features {
		align-items: center !important;
	}
}

@media (max-width: 768px) {
	.partners-hero {
		padding: 100px 0 160px;
		clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
	}

	.partners-hero__title {
		font-size: 2.25rem;
	}
	
	.partners-hero__subtitle {
		font-size: 1rem;
	}
	
	.partners-benefits {
		margin-top: -65px;
	}

	.partners-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.partners-card {
		padding: 40px 30px;
	}
	
	.partners-form__info-panel {
		padding: 90px 20px 40px !important;
	}

	.partners-form__card-panel {
		padding: 32px 16px 60px !important;
	}

	.partners-form__card-title {
		font-size: 1.6rem !important;
	}

	.info-panel__title {
		font-size: 2.1rem !important;
	}

	.partners-form__card .form-input {
		font-size: 0.9rem !important;
		padding: 12px 16px 12px 40px !important;
	}
}