/*
	에이시티호스팅 (ACT HOSTING) - 원격서버 및 PC 임대 서비스 전용 스타일시트
	파일 경로: www/layouts/acthosting/css/rental.css
	설명: 사용자의 피드백을 수렴하여 외지인 주황색을 전방위로 완전 소거하고, main.html의 시그니처 벌쳐 블루(#007bfc) 및 연회색 미니멀 사각 카드를 호버 시 테두리 점등 방식으로 계승한 완결본.
*/

/* --------------------------------------------------
   0.1 사이트 공통 테마 변수 및 헤더 Clearance 여백
   -------------------------------------------------- */
:root {
	--rental-vultr-blue: #007bfc;
	--rental-vultr-blue-hover: #0056b3;
	--rental-deep-blue: #031059;
	--rental-light-bg: #f7f7f7; /* main.html과 일체화한 연회색 배경 */
	--rental-card-border: #f7f7f7;
	--rental-text-main: #4e5259;
	--rental-text-muted: #8692b0;
	--rental-white: #ffffff;
}

/* 라이믹스 고정 GNB 헤더 아래로 본문이 100% 안전하게 위치하도록 상단 패딩 강제 배정 (Clearance) */
.rental-guide-wrapper {
	padding-top: clamp(120px, 12vw, 170px);
	padding-bottom: 90px;
	/* 상단은 벌쳐 블루와 딥블루 그라데이션 다크 배너 스페이스, 하단은 자연스러운 백색 배경으로 트랜지션 */
	background: linear-gradient(to bottom, #030a21 0%, #081a4a 450px, #0c2666 680px, #ffffff 780px, #ffffff 100%);
	color: var(--rental-text-main);
	font-family: 'Inter', 'Noto Sans KR', sans-serif;
	overflow-x: hidden;
}

/* --------------------------------------------------
   1. 원격 임대 영웅 배너 섹션 (Hero Section)
   -------------------------------------------------- */
.rental-hero {
	display: flex;
	align-items: center;
	gap: 50px;
	width: 100%;
	margin-bottom: 80px;
}

.rental-hero__content {
	flex: 1.2;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.rental-hero__badge {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--rental-vultr-blue);
	letter-spacing: 2px;
	margin: 0 0 16px;
	text-transform: uppercase;
	border: 1px solid rgba(0, 123, 252, 0.25);
	padding: 4px 12px;
	background-color: rgba(0, 123, 252, 0.05);
	border-radius: 2px;
}

.rental-hero__title {
	font-size: clamp(2.3rem, 5vw, 3.8rem);
	line-height: 1.2;
	font-weight: 300; /* 극도로 슬림하고 수려한 벌쳐 스타일 글꼴 */
	color: var(--rental-white); /* 웅장한 다크 배경 대비 눈부신 화이트 적용 */
	margin: 0 0 24px;
	letter-spacing: -2px;
}

.rental-hero__title span {
	font-weight: 700;
	color: var(--rental-vultr-blue);
}

.rental-hero__subtitle {
	font-size: 1.15rem;
	font-weight: 300 !important; /* 슬림 가독성 */
	line-height: 1.65;
	color: #94a3b8; /* 다크 배경 대비 세련된 실버 그레이 적용 */
	margin: 0 0 32px;
	letter-spacing: -0.5px;
}

/* 6대 강점 수직 나열 리스트 */
.rental-hero__features {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
	width: 100%;
}

.rental-hero__features li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rental-hero__features .feature-icon {
	color: var(--rental-vultr-blue);
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	line-height: 1;
}

.rental-hero__features .feature-text {
	font-size: 1.05rem;
	font-weight: 300 !important;
	color: #cbd5e1; /* 다크 배경 대비 밝은 실버 블루 적용 */
	letter-spacing: -0.4px;
}

/* 24시간 상담버튼 */
.rental-hero__btn-area {
	width: 100%;
}

.btn-rental-call {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	background-color: #2b3149; /* 세련되고 묵직한 다크 스페이스 */
	color: var(--rental-white) !important;
	padding: 18px 30px;
	font-size: 1.1rem;
	font-weight: 400;
	text-decoration: none;
	border-radius: 0px; /* 완전 사각화 테마 준수 */
	box-shadow: 0 10px 25px rgba(43, 49, 73, 0.15);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	gap: 20px;
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
}

.btn-rental-call span {
	font-weight: 300;
	letter-spacing: -0.3px;
}

.btn-rental-call i {
	font-size: 1.25rem;
	color: var(--rental-vultr-blue);
	transition: transform 0.3s ease;
}

.btn-rental-call:hover {
	background-color: var(--rental-deep-blue);
	box-shadow: 0 12px 30px rgba(3, 16, 89, 0.22);
}

.btn-rental-call:hover i {
	transform: scale(1.15) rotate(10deg);
}

/* --------------------------------------------------
   2. 우측 3D 가상 접속 애니메이션 그래픽 스타일링
   -------------------------------------------------- */
.rental-hero__visual {
	flex: 0.8;
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1200px;
	min-width: 0;
}

.visual-3d-scene {
	position: relative;
	width: 480px;
	height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	transform: rotateX(15deg) rotateY(-10deg) rotateZ(0deg); /* 10대 아이콘의 입체감을 극대화하는 기하학 궤도 */
}

/* 무선 가상 클라우드 접속 파동 (보였다 안보였다를 우아하게 반복 루프) */
.cloud-wave {
	position: absolute;
	border: 1.5px solid rgba(0, 123, 252, 0.22);
	box-shadow: 0 0 15px rgba(0, 123, 252, 0.12);
	border-radius: 50%;
	animation: pulseWave 7s infinite ease-in-out;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.cloud-wave:nth-child(2) { animation-delay: 2.3s; }
.cloud-wave:nth-child(3) { animation-delay: 4.6s; }

@keyframes pulseWave {
	0% { transform: scale(0.2) translateZ(-60px); opacity: 0; }
	35% { opacity: 0.55; }
	70% { opacity: 0.15; }
	100% { transform: scale(0.95) translateZ(60px); opacity: 0; }
}

/* 중앙 네온 파원 코어 */
.cloud-wave-core {
	position: absolute;
	width: 150px;
	height: 150px;
	background: radial-gradient(circle, #081a4a 40%, #030a21 100%); /* 탁한 검은색 대신 딥 인디고 네이비 톤으로 교체 */
	border: 2px solid rgba(0, 123, 252, 0.45);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 50px rgba(0, 123, 252, 0.4), inset 0 0 20px rgba(0, 123, 252, 0.2);
	z-index: 10;
	transform: translateZ(30px);
	animation: floatCore 4s infinite ease-in-out;
}

.cloud-wave-core .core-icon {
	font-size: 3.2rem;
	color: var(--rental-vultr-blue);
	text-shadow: 0 0 15px rgba(0, 123, 252, 0.6);
	margin-bottom: 6px;
}

.cloud-wave-core span {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--rental-white);
	letter-spacing: 2px;
	text-transform: uppercase;
}

@keyframes floatCore {
	0%, 100% { transform: translateZ(30px) translateY(0px); }
	50% { transform: translateZ(30px) translateY(-10px); }
}

/* 10대 테크 부유 공통 스타일 */
.tech-float-icon {
	position: absolute;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(0, 123, 252, 0.22);
	border-radius: 50%;
	width: 58px;
	height: 58px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 28px rgba(0, 123, 252, 0.08);
	color: var(--rental-vultr-blue);
	font-size: 1.5rem;
	z-index: 5;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
}

.tech-float-icon .icon-label {
	position: absolute;
	bottom: -22px;
	white-space: nowrap;
	font-size: 0.75rem;
	color: #e2e8f0; /* 어두운 밤하늘 배경 대비 훤히 잘 보이는 우아한 실버 화이트 적용 */
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* 가독성 극대화를 위한 입체 섀도우 탑재 */
	font-weight: 400;
	opacity: 0.9;
	letter-spacing: -0.3px;
	transition: all 0.3s ease;
}

.tech-float-icon:hover {
	background: var(--rental-vultr-blue);
	color: var(--rental-white);
	border-color: var(--rental-vultr-blue);
	transform: scale(1.15) translateZ(50px) !important;
	box-shadow: 0 16px 35px rgba(0, 123, 252, 0.25);
}

.tech-float-icon:hover .icon-label {
	color: #00f2fe; /* 호버 시 눈이 시릴 정도로 맑은 벌쳐 네온 스카이블루 점등 */
	text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
	font-weight: 600;
	opacity: 1;
	bottom: -25px;
}

/* 개별 부유 모션 정의 (원 안에서 부딪히며 통통 튕기는 독립 궤도 압축) - 60FPS 자바스크립트 3D 물리 엔진을 통해 유기적으로 제어되므로 순수 기본 위치 좌표만 유지 */
.icon-terminal { left: 24%; top: 22%; }
.icon-shield { left: 22%; bottom: 20%; }
.icon-wifi { right: 22%; top: 24%; }
.icon-server { right: 20%; bottom: 22%; }
.icon-cpu { left: 44%; top: 12%; }
.icon-time { left: 44%; bottom: 12%; }
.icon-remote { left: 16%; top: 48%; }
.icon-global { right: 16%; top: 48%; }
.icon-storage { left: 30%; top: 32%; }
.icon-speed { left: 32%; bottom: 32%; }

/* 라벨 페이드 키프레임 - 아이콘이 Z축 0px 이하 뒤로 가려지는 타임에 라벨 이름을 완전히 은폐 */
@keyframes labelFade1 { 0%, 100% { opacity: 0.9; } 20%, 80% { opacity: 0; } }
@keyframes labelFade2 { 0%, 100% { opacity: 0; } 30%, 75% { opacity: 0.9; } }
@keyframes labelFade3 { 0%, 100% { opacity: 0.9; } 25%, 75% { opacity: 0; } }
@keyframes labelFade4 { 0%, 100% { opacity: 0; } 35%, 80% { opacity: 0.9; } }
@keyframes labelFade5 { 0%, 100% { opacity: 0.9; } 45%, 85% { opacity: 0; } }
@keyframes labelFade6 { 0%, 100% { opacity: 0; } 40%, 80% { opacity: 0.9; } }
@keyframes labelFade7 { 0%, 100% { opacity: 0.9; } 20%, 80% { opacity: 0; } }
@keyframes labelFade8 { 0%, 100% { opacity: 0; } 30%, 75% { opacity: 0.9; } }
@keyframes labelFade9 { 0%, 100% { opacity: 0.9; } 40%, 80% { opacity: 0; } }
@keyframes labelFade10 { 0%, 100% { opacity: 0; } 40%, 80% { opacity: 0.9; } }

/* --------------------------------------------------
   3. 추천 6대 혜택 카드 섹션 (Benefits Section)
   -------------------------------------------------- */
.rental-benefits {
	border-top: 1px solid rgba(255, 255, 255, 0.08); /* 다크 우주 영역 경계에 맞게 은은한 반투명 경계선 적용 */
	padding-top: 80px;
	text-align: center;
}

.rental-benefits__header {
	max-width: 800px;
	margin: 0 auto 50px;
	text-align: center;
}

.benefits-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--rental-vultr-blue); /* 짜치던 청록색 소거 ➡ 웅장하고 세련된 벌쳐 시그니처 오션 블루 적용 */
	letter-spacing: 3px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

/* 좌우에 세련된 슬레이트 실버 데코바를 얹어 흰 배경 위에서도 글자를 은은하게 포착하도록 보정 */
.benefits-eyebrow::before,
.benefits-eyebrow::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 1px;
	background-color: #cbd5e1;
}

.benefits-title {
	font-size: clamp(1.8rem, 4vw, 2.7rem);
	font-weight: 300;
	color: #0f172a; /* 흰 배경에 묻히던 기존 흰색 소거 ➡ 눈에 훤히 들어오는 웅장한 딥 차콜 블랙으로 시인성 완전 정복 */
	text-shadow: none; /* 흰 배경에서 거무튀튀 지저분하게 번지던 섀도우 영구 폐기 */
	margin: 0 0 20px;
	letter-spacing: -1.2px;
	line-height: 1.35;
	word-break: keep-all; /* 한글 텍스트 단어 끊김 방지 */
}

.benefits-title span {
	font-weight: 700;
	color: var(--rental-vultr-blue);
}

.benefits-subtitle {
	font-size: 1.02rem;
	font-weight: 300 !important;
	line-height: 1.65;
	color: #475569; /* 옅은 그레이 대신 명암비가 뚜렷하고 깊이감 있는 슬레이트 그레이 매핑 */
	margin: 0 auto;
	max-width: 720px; /* 가로폭을 단정하게 제한하여 텍스트 줄 가독성 사수 */
	letter-spacing: -0.4px;
	word-break: keep-all; /* 한국어 띄어쓰기 정밀화 */
}

/* 3x2 그리드 플랫 사각 카드 스타일링 - main.html 디자인 완벽 계승 */
.rental-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
}

.rental-card {
	background-color: var(--rental-light-bg); /* 연회색 기본 바인딩 */
	border: 1px solid var(--rental-light-bg);
	border-radius: 0px !important; /* 벌쳐 고유 미니멀 사각 큐브 테마 완벽 계승 */
	text-align: left;
	box-sizing: border-box;
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	top: 0;
}

/* 호버 시에만 벌쳐 블루 테두리선이 4면에 사방 점등되며 예쁘게 뜨는 핫픽스 구현 */
.rental-card:hover {
	top: -5px;
	background-color: var(--rental-white);
	border-color: var(--rental-vultr-blue) !important;
	box-shadow: 0 16px 32px rgba(0, 123, 252, 0.06);
}

.card-inner {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	min-height: 290px;
}

.card-title {
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--rental-deep-blue);
	margin: 0 0 16px;
	letter-spacing: -0.6px;
}

.card-body {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--rental-text-main);
	font-weight: 300 !important; /* 얇은 한글 서체 */
	margin: 0 0 20px;
	letter-spacing: -0.4px;
}

.warning-text {
	color: #d32f2f; /* 시각적 안전 경고색 기입 */
	font-weight: 300 !important;
	display: block;
	margin-top: 10px;
	font-size: 0.93rem;
}

.card-footer-tip {
	font-size: 0.85rem;
	color: var(--rental-vultr-blue);
	font-weight: 400;
	margin-top: auto; /* 하단 자동 밀착 */
	display: flex;
	align-items: center;
	gap: 6px;
	letter-spacing: -0.3px;
}

/* --------------------------------------------------
   4. 모바일 반응형 및 찌러짐 차단 (767px 이하)
   -------------------------------------------------- */
@media (max-width: 991px) {
	.rental-hero {
		flex-direction: column;
		gap: 40px;
		text-align: center;
	}

	.rental-hero__content {
		align-items: center;
		text-align: center;
	}

	.rental-hero__visual {
		flex: none;
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
		min-height: 480px;
	}

	.rental-hero__title {
		text-align: center;
	}

	.rental-hero__subtitle {
		text-align: center;
	}

	.rental-hero__features {
		max-width: 600px;
	}

	.rental-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.rental-guide-wrapper {
		padding-top: 100px; /* 모바일 헤더 Clearance 최적 조율 */
		padding-bottom: 60px;
	}

	.rental-hero {
		margin-bottom: 50px;
	}

	.rental-hero__badge {
		font-size: 0.8rem;
		margin-bottom: 12px;
	}

	.rental-hero__title {
		font-size: 2.1rem !important;
		line-height: 2.7rem !important;
	}

	.rental-hero__subtitle {
		font-size: 1rem !important;
		line-height: 1.55 !important;
		margin-bottom: 24px;
	}

	/* 강점 목록 모바일 가로 꽉 채우기 */
	.rental-hero__features {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 30px;
		text-align: left;
		max-width: 100%;
	}

	.rental-hero__features .feature-text {
		font-size: 0.98rem !important;
	}

	.btn-rental-call {
		padding: 16px 20px !important;
		font-size: 0.98rem !important;
	}

	/* 우측의 입체 3D 노트북 그래픽은 모바일의 찌그러짐을 피하고 가독성 집중을 위해 숨김 */
	.rental-hero__visual {
		display: none !important;
		min-height: auto !important;
	}

	.rental-benefits {
		padding-top: 50px;
	}

	.benefits-title {
		font-size: 1.65rem !important;
		line-height: 2.2rem !important;
		margin-bottom: 16px;
	}

	.benefits-subtitle {
		font-size: 0.95rem !important;
		line-height: 1.5 !important;
	}

	/* 혜택 카드 그리드를 100% 가독성을 위해 모바일 가로 2열 2x2 격자로 리워크 완결! */
	.rental-cards-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.card-inner {
		padding: 20px 16px !important;
		min-height: 230px !important;
	}

	.card-title {
		font-size: 1.1rem !important;
		margin-bottom: 10px !important;
		letter-spacing: -0.5px !important;
	}

	.card-body {
		font-size: 0.8125rem !important; /* 좁은 2열 격자 내에서 글자 찌러짐 차단 */
		line-height: 1.45 !important;
		letter-spacing: -0.3px !important;
		margin-bottom: 12px !important;
	}

	.warning-text {
		font-size: 0.8125rem !important;
		margin-top: 8px !important;
	}

	.card-footer-tip {
		font-size: 0.75rem !important;
		padding-top: 6px;
	}
}

@media (max-width: 480px) {
	/* 폭이 400px 이하로 극도로 협소한 기기의 경우 카드를 1열로 세워 가독성 타협 방지 */
	.rental-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	
	.card-inner {
		min-height: auto !important;
	}
}