*,
*::before,
*::after {
	box-sizing: border-box;
}
:root {
	--bg: #000000;
	--mint: #00ffb1;
	--cyan: #00cbff;
	--text: #ffffff;
	--muted: #b0bcc7;
	--border: #ffffff1f;
	--card: #2a424b;
	--card2: #35535e7d;
	--card3: #1c2e40;
	--teal-bg: #0a2e2a;
	--nav-h: 80px;
	--fs-title: 56px;
	--pc-max-width: 1920px;
	--pc-min-width: 1488px;
}
html,
body {
	margin: 0;

	min-width: var(--pc-min-width);
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	background: var(--bg);
	color: var(--text);
	overflow-y: auto; /* 기본으로 스크롤 허용 */
	overflow-x: auto;
	min-height: 100vh;
	word-break: keep-all;       /* 1. 한국어는 단어 단위로 예쁘게 끊기 */
	overflow-wrap: break-word;  /* 2. 띄어쓰기 없는 긴 영어/URL은 영역을 벗어나면 강제 줄바꿈 */
}
body.scrollable {
	overflow-y: scroll;
	overflow-x: auto;
}
a {
	text-decoration: none;
	color: inherit;
}

/* ══════════════════════════════
       NAV
    ══════════════════════════════ */
.site-nav-wrap {
	width: 100%;
	height: 100%; /* 부모의 높이(80px)를 그대로 물려받음 */
	max-width: var(--pc-max-width);
	min-width: var(--pc-min-width);
	margin: 0 auto; /* ★ 안전한 중앙 정렬의 핵심 */
	padding: 0 110px; /* 부모에 있던 패딩을 알맹이 쪽으로 이동 */

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	z-index: 200;
	height: var(--nav-h);
	background: #00000057;
}
.nav-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 1.1rem;
	white-space: nowrap;
	cursor: pointer;
}
/* .nav-right {
	flex: 1;
	display: flex;
    justify-content: flex-end;
	align-items: center;
	gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
} */
.nav-right a {
	font-size: 20px;
	font-weight: 500;
	color: var(--text);
	padding-right: 90px;
	/* transition: color 0.2s; */
}
.nav-tab {
	font-weight: 500;
	transition: color 0.3s, font-weight 0.3s;
	font-size: 20px;
	color: var(--text);
	padding-right: 90px;
	transition: color 0.2s;
}

.btn-nav-solid {
	background: var(--mint);
	color: var(--bs-black);
	border: none;
	border-radius: 50px;
	/* padding: 12px 83px; */

	/* ★ 핵심 방어 코드: 버튼의 가로세로 크기를 아예 못 박아버립니다 */
	width: 246px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
	margin-right: 10px;
}

.btn-nav-outline {
	background: transparent;
	border: 2px solid var(--mint); /* Home 기본 색상 */
	color: var(--mint);
	transition: border-color 0.3s, color 0.3s;
	/* (패딩, 보더 라운드 등 기존 버튼 스타일 유지) */

	border-radius: 50px;
	/* padding: 10px 55px; */

	/* ★ 여기도 동일하게 고정 크기를 줍니다 */
	width: 230px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	/* transition: border-color 0.2s; */
}

/* ═════════════════════════════════════
   테마 1: IoT 회선 운영 (tab1 활성화)
═════════════════════════════════════ */
body[data-nav-theme='plan-d'] #nav-plan-d {
	color: var(--mint);
	font-weight: 800;
}
body[data-nav-theme='plan-d'] .nav-right a:hover {
	color: var(--mint);
}
body[data-nav-theme='plan-d'] .btn-nav-solid {
	background: var(--mint);
}
body[data-nav-theme='plan-d'] .btn-nav-solid:hover {
	background-color: #2e807a;
}
body[data-nav-theme='plan-d'] .btn-nav-outline {
	border-color: var(--mint);
	color: var(--mint);
}

/* ═════════════════════════════════════
   테마 2: 영상 관제 (tab2 활성화)
═════════════════════════════════════ */
body[data-nav-theme='plan-l'] #nav-plan-l {
	color: var(--cyan);
	font-weight: 800;
}
body[data-nav-theme='plan-l'] .nav-right a:hover {
	color: var(--cyan);
}
body[data-nav-theme='plan-l'] .btn-nav-solid {
	background: var(--cyan);
}
body[data-nav-theme='plan-l'] .btn-nav-solid:hover {
	background-color: #07728e;
}
body[data-nav-theme='plan-l'] .btn-nav-outline {
	border-color: var(--cyan);
	color: var(--cyan);
}
/* 
.nav-right a {
	font-size: 20px;
	font-weight: 500;
	color: var(--text);
	padding-right: 90px;
	transition: color 0.2s;
}
.nav-right a:hover,
.nav-right a.active {
	color: var(--mint);
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 15px;
}
.btn-nav-mint {
	background: var(--mint);
	color: var(--bs-black);
	border: none;
	border-radius: 50px;
	padding: 12px 83px;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}
.btn-nav-mint:hover {
	opacity: 0.85;
}
.btn-nav-outline {
	background: transparent;
	color: var(--mint);
	border: 1.5px solid var(--mint);
	border-radius: 50px;
	padding: 12px 55px;
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s;
}
 */

/* ══════════════════════════════
       APP WRAPPER
    ══════════════════════════════ */
#app {
	padding-top: var(--nav-h);
	width: 100%;
	/* max-width: 1920px; */
	/* margin: 0 auto; */
	position: relative;
}
body.scrollable #app {
	height: auto;
}

.inner-wrap {
	width: 100%;
	max-width: calc(var(--pc-max-width) - 160px);
	/* max-width: 1280px; 콘텐츠가 한눈에 들어오는 안정적인 최대 너비 (필요시 조절) */
	margin: 0 auto;
	padding: 0 170px; /* 각 섹션에 흩어져있던 좌우 패딩을 래퍼가 전담 */
}
.main-inner-wrap {
	width: 100%;
	max-width: calc(var(--pc-max-width) - 160px);
	/* max-width: 1280px; 콘텐츠가 한눈에 들어오는 안정적인 최대 너비 (필요시 조절) */
	margin: 0 auto;
	padding: 0 80px; /* 각 섹션에 흩어져있던 좌우 패딩을 래퍼가 전담 */
}
/* ══════════════════════════════
       HOME PAGE
    ══════════════════════════════ */
#page-home {
	position: relative;
	/* height 대신 min-height를 사용하여 컨텐츠가 잘리거나 겹치지 않게 방어 */
	display: flex;
	align-items: flex-start;
	overflow: hidden;

	padding-top: 214px; /* 요청하신 214px 간격 완벽 유지 */
	padding-bottom: 180px; /* 하단에 푸터가 바로 붙지 않도록 여백 추가 */
	/* padding-left: 160px; */
	/* padding-right: 160px; */

	background-image: url('assets/images/bg_home_main.png');

	/* 2. 최신 브라우저를 위한 고해상도 분기 처리 */
	background-image: -webkit-image-set(
		url('assets/images/bg_home_main.png') 1x,
		url('assets/images/bg_home_main@2x.png') 2x
	);
	background-image: image-set(url('assets/images/bg_home_main.png') 1x, url('assets/images/bg_home_main@2x.png') 2x);
	isolation: isolate;
	background-position-y: -245px;
	background-size: cover;
}
#page-home::after {
	content: '';
	position: absolute;
	background: #000000;
	z-index: -1;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1) 100%);
}
.home-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 48px;
}
.home-copy {
	/* flex: 0 0 765px; */
	flex: 1; /* ★ 수정: 남는 공간을 자연스럽게 차지하도록 변경 */
	max-width: 765px; /* 화면이 아주 넓어질 때만 기존 크기 유지 */
}
h1 {
	font: normal normal bold 56px/72px Pretendard;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 40px;
}
h1 .hl {
	color: var(--mint);
}
.sub1 {
	font-size: 30px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 40px;
}
.sub2 {
	font-size: 24px;
	color: var(--muted);
	line-height: 1.75;
	margin-bottom: 2em;
}
.home-copy h1 {
	font: normal normal bold 56px/72px Pretendard;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 40px;
}
.home-copy h1 .hl {
	color: var(--mint);
}
.home-copy .sub1 {
	font-size: 30px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 40px;
}
.home-copy .sub2 {
	font-size: 24px;
	color: var(--muted);
	line-height: 1.75;
	margin-bottom: 2em;
}
.btn-pill-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 50px;
	padding: 16px 124px;
	font-size: 26px;
	font-weight: 600;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: padding 0.2s;
}
.btn-pill-outline:hover {
	padding: 16px 160px;
}
.home-cards {
	/* flex: 1; */
	flex: 0 0 auto;
	display: flex;
	gap: 20px;
	justify-content: flex-end;
}
.h-card {
	width: 366px; /* 목표 이미지 비율에 맞춰 살짝 넓힘 */
	border-radius: 8px;
	overflow: hidden;
	background: var(--card2);
	display: flex;
	flex-direction: column;
}
.h-card-body {
	padding: 40px 28px;
	flex: 1;
}
.h-badges {
	display: flex;
	gap: 7px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.h-badge {
	background: #35535e;
	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	border-radius: 18px;
	padding: 4px 21px;
	font-size: 20px;
	color: var(--text);
}
.h-card-title1 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
}
.h-card-title1.mint {
	color: var(--mint);
}
.h-card-title1.cyan {
	color: var(--cyan);
}
.h-card-title2 {
	font-size: 48px;
	font-weight: 800;
	margin-bottom: 20px; /* 리스트와의 간격 살짝 넓힘 */
}
.h-card-features {
	list-style: none;
	padding: 0;
	margin: 0;
}
.h-card-features li {
	font-size: 24px;
	font-weight: 300;
	color: var(--muted);
	padding: 3px 0;
	border-bottom: none; /* 핵심: 지저분해 보이는 밑줄 제거 */
	line-height: 36px;
}
.h-card-cta {
	padding: 16px 15px; /* 상하 패딩을 키워 버튼을 더 큼직하게 */
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em; /* 텍스트를 살짝 조밀하게 */
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}
.h-card-cta.mint {
	background: var(--mint);
	color: #000000;
}
.h-card-cta.cyan {
	background: var(--cyan);
	color: #000000;
}
/* ══════════════════════════════
   FAB (Floating Action Button)
══════════════════════════════ */
.fab-container {
	position: fixed;
	bottom: 40px;
	right: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	z-index: 900; /* 콘텐츠보다는 위, 모달(1000+)보다는 아래 배치 */
}

/* 동그란 버튼 공통 스타일 */
.fab-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}

/* Top 버튼 (검은 반투명 + 흰색 얇은 테두리) */
.fab-btn {
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.8);
	color: #fff;
	backdrop-filter: blur(4px);
}
/* .fab-top:hover { background: rgba(255, 255, 255, 0.1); } */

/* ── 연락처 팝오버 래퍼 ── */
.fab-contact-wrap {
	position: relative;
}

/* 연락처 버튼 */
.fab-contact:hover {
	background: var(--mint); /* 기본 컬러 */
	color: var(--bs-black);
	border-color: var(--mint);
}
.fab-contact .icon-close {
	display: none;
} /* 처음엔 X 아이콘 숨김 */

/* 활성화(active) 되었을 때 아이콘 스위칭 */
.fab-contact-wrap.active .fab-contact .icon-default {
	display: none;
}
.fab-contact-wrap.active .fab-contact {
	background: var(--mint); /* 기본 컬러 */
	color: var(--bs-black);
	border-color: var(--mint);
}
.fab-contact-wrap.active .fab-contact .icon-close {
	display: block;
}

/* ── 팝오버 말풍선 박스 ── */
.fab-popover {
	position: absolute;
	bottom: 80px; /* 버튼 위쪽으로 띄움 */
	right: 0;
	width: 190px;
	background: #1a282e; /* 다크 네이비/그레이 톤 */
	border-radius: 8px;
	padding: 24px 16px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

	/* 숨김 및 부드러운 등장 애니메이션 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none; /* 숨겨져 있을 땐 클릭 안 되게 */
}

/* active 클래스가 붙으면 팝오버 등장 */
.fab-contact-wrap.active .fab-popover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.fab-popover-title {
	color: var(--text);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 12px;
}

.fab-popover-tel {
	font-size: 20px;
	font-weight: 800;
	color: var(--mint); /* 기본 컬러 */
	margin-bottom: 4px;
}

.fab-popover-time {
	color: var(--muted);
	font-size: 16px;
	margin-bottom: 20px;
}

.fab-popover-btn {
	width: 100%;
	padding: 6px;
	border: none;
	border-radius: 30px;
	background: var(--mint); /* 기본 컬러 */
	color: var(--bs-black);
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	transition: opacity 0.2s;
}
.fab-popover-btn:hover {
	opacity: 0.85;
}

/* ── 테마 스위칭 (plan-l 접속 시 Cyan으로 일괄 변경) ── */
body[data-nav-theme='plan-l'] .fab-contact:hover,
body[data-nav-theme='plan-l'] .fab-popover-btn {
	background: var(--cyan);
}
body[data-nav-theme='plan-l'] .fab-contact-wrap.active .fab-contact {
	background: var(--cyan);
	color: var(--bs-black);
	border-color: var(--cyan);
}
body[data-nav-theme='plan-l'] .fab-popover-tel {
	color: var(--cyan);
}

/* ══════════════════════════════
       TAB PAGES
    ══════════════════════════════ */
.tab-page {
	display: none;
}
.tab-page.active {
	display: block;
}

/* scroll-section fade-in */
.ss {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}
.ss.visible {
	opacity: 1;
	transform: none;
}

/* ── SECTION PADDING ── */
.sp {
	padding-top: 90px;
	padding-bottom: 90px;
}
.sp-sm {
	padding: 70px 80px;
}

/* ── DIVIDER ── */
.sec-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0;
}

/* ══════════════════════════════
       TAB1 — SEC1: HERO
    ══════════════════════════════ */
#page-plan-d {
	/* padding-top: 130px; */ /* 요청하신 214px 간격 완벽 유지 */
	padding-bottom: 180px; /* 하단에 푸터가 바로 붙지 않도록 여백 추가 */
	/* padding-left: 160px; */
	/* padding-right: 160px; */
}

.t1-hero {
	position: relative;
	/* min-height: calc(100vh - var(--nav-h)); */
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: 130px;
	padding-bottom: 280px;
	/* padding: 0 80px; */
	/* 1. 구형 브라우저를 위한 기본 폴백(Fallback) */
	background-image: url('assets/images/bg_tab1_main.png');

	/* 2. 최신 브라우저를 위한 고해상도 분기 처리 */
	background-image: -webkit-image-set(
		url('assets/images/bg_tab1_main.png') 1x,
		url('assets/images/bg_tab1_main@2x.png') 2x
	);
	background-image: image-set(url('assets/images/bg_tab1_main.png') 1x, url('assets/images/bg_tab1_main@2x.png') 2x);
	isolation: isolate;
	background-position-y: -245px;
	background-size: cover;
}
/* 추가 */
.t1-hero::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 1) 100%);
}
.t1-hero-content {
	position: relative;
	z-index: 1;
	max-width: 600px;
}
.hero-badge {
	display: inline-block;
	background: #35535e80;
	/* border: 1px solid var(--border); */
	border-radius: 50px;
	padding: 8px 28px;
	font-size: 26px;
	color: var(--text);
	margin-bottom: 36px;
}
/* .t1-hero-content h1 {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0.35em;
}
.t1-hero-content h1 .hl {
	color: var(--mint);
}
.t1-hero-content .sub1 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 0.6em;
}
.t1-hero-content .sub2 {
	font-size: 0.92rem;
	color: var(--muted);
	line-height: 1.8;
	margin-bottom: 2.2em;
} */
.scroll-hint {
	position: absolute;
	bottom: 40px; /* 맨 아래에서 살짝 띄워줌 */
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px; /* 요소들 사이의 간격 축소 */
	color: var(--white);
	font-size: 14px;
	letter-spacing: 0.02em;
	z-index: 10;
	cursor: pointer;
}
.scroll-hint:hover {
	opacity: 0.7;
	transition: opacity 0.2s;
}
/* 마우스 아이콘 */
.scroll-hint .bi-mouse {
	font-size: 42px;
}

/* 겹화살표 아이콘 (애니메이션 적용) */
.scroll-hint .arrows {
	font-size: 26px;
	margin-bottom: 6px; /* Scroll down 텍스트와의 간격 */
	animation: bounceY 1.6s infinite;
}

@keyframes bounceY {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.8;
	}
	50% {
		transform: translateY(6px);
		opacity: 0.3;
	}
}
/* ══════════════════════════════
       TAB1 — SEC2: PAIN vs SOLUTION
    ══════════════════════════════ */
.pain-section {
	background: var(--bg);
}
.pain-left {
	padding-right: 40px;
}
.pain-title {
	font-size: 34px;
	font-weight: 700;
	text-align: center;
	color: var(--muted);
	margin-bottom: 60px;
}
.pain-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pain-item {
	display: flex;
	align-items: center;
	gap: 26px;
}
.pain-num {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	background: #2a424b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--bs-black);
	flex-shrink: 0;
}
.pain-text {
	font-size: 24px;
	color: var(--muted);
	line-height: 35px;
	padding-top: 5px;
}
.sol-card {
	background: var(--card);
	border-radius: 16px;
	padding: 57px 84px 79px;
}
.sol-title {
	font-size: 44px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 53px;
	line-height: 56px;
}
.sol-title .hl {
	color: var(--mint);
}
.sol-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sol-item {
	display: flex;
	align-items: center;
	gap: 26px;
}
.sol-num {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	background: var(--mint);
	color: var(--bs-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 800;
	flex-shrink: 0;
}
.sol-num.cyan-num {
	background: var(--cyan);
}
.sol-text {
	font-size: 24px;
	line-height: 29px;
	padding-top: 5px;
}
.sol-title .hl-cyan {
	color: var(--cyan);
}

/* ══════════════════════════════
       TAB1 — SEC3: WHY D (크레인 BG)
    ══════════════════════════════ */
.why-section {
	position: relative;
	overflow: hidden;
	/* background: transparent; */
	background-image: url('assets/images/bg_tab1_back.png');
	background-color: #00000099;
	background-blend-mode: multiply;

	background-size: cover; /* 이미지가 섹션을 꽉 채우도록 */
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* .why-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(0, 229, 160, 0.07) 0%, transparent 70%);
	pointer-events: none;
} */
.why-content {
	position: relative;
	z-index: 1;
}
.why-title {
	font-size: 56px;
	line-height: 67px;
	font-weight: 700;
	margin-bottom: 40px;
}
.why-title .hl {
	color: var(--mint);
}
.why-title .hl-cyan {
	color: var(--cyan);
}
.why-sub {
	font-size: 30px;
	color: var(--white);
	margin-bottom: 64px;
}
.why-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
}
.why-card {
	background: #35535e4d;
	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	border-radius: 16px;
	padding: 100px 51px 51px;
	text-align: center;
	/* backdrop-filter: blur(6px); */
}
.why-icon {
	/* width: 64px; */
	height: 106px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 40px;
	/* font-size: 1.8rem; */
	/* color: var(--mint); */
}
.why-icon.cyan-icon {
	background: rgba(0, 200, 224, 0.15);
	color: var(--cyan);
}
.why-card h4 {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 14px;
}
.why-badges {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 21px;
}
.why-badge {
	background: var(--mint);
	color: #07111f;
	border-radius: 50px;
	padding: 9px 21px;
	font-size: 24px;
	font-weight: 600;
}
.why-badge.cyan-badge {
	background: var(--cyan);
}
.why-card p {
	font-size: 24px;
	color: var(--white);
	line-height: 42px;
	margin: 0;
}

/* ══════════════════════════════
       TAB1 — SEC4: USE CASE GRID
    ══════════════════════════════ */
.usecase-section {
	background: transparent linear-gradient(180deg, #000000 0%, #00655b4d 100%) 0% 0% no-repeat padding-box;
	opacity: 0.4;
}
.usecase-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 112px;
}
.usecase-title .hl {
	color: var(--mint);
}
.usecase-title .hl-cyan {
	color: var(--cyan);
}
.usecase-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}
.uc-card {
	border-radius: 12px;
	padding: 64px 37px 82px;
	position: relative;
	cursor: pointer;
	transition: transform 0.2s;
	min-height: 170px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.uc-card.light {
	background: #35535e4d 0% 0% no-repeat padding-box;
}
.uc-card.dark {
	background: #35535ecc 0% 0% no-repeat padding-box;
}
.uc-card-title {
	font-size: 44px;
	font-weight: 700;
	line-height: 66px;
}
.uc-arrow {
	width: 58px;
	bottom: 24px;
	right: 24px;
	position: absolute;
	height: 58px;
	border-radius: 50%;
	border: 2px solid var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	color: var(--text);
	font-size: 28px;
}
.uc-card:hover {
	background-color: var(--mint);
	color: var(--bs-black);
}
.uc-card:hover .uc-arrow {
	border-color: var(--bs-black);
	color: var(--bs-black);
}
/* ══════════════════════════════
       TAB1 — SEC5: HOW TO USE
    ══════════════════════════════ */
.howto-section {
	background: var(--bg);
}
.howto-eyebrow {
	font-size: 24px;
	line-height: 36px;
	color: var(--text);
	margin-bottom: 40px;
}
.howto-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 40px;
}
.howto-title .hl {
	color: var(--mint);
}
.howto-title .hl-cyan {
	color: var(--cyan);
}
.howto-sub {
	font-size: 30px;
	color: var(--text);
	margin-bottom: 138px;
}
.step-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.step-card {
	background: var(--card);
	border-radius: 16px;
	padding: 54px 35px 80px;
	position: relative; /* 번호 배지 절대 위치의 기준점 */
	display: flex;
	flex-direction: column;
}
.step-card.light {
	background-color: var(--card2);
}
.step-card.dark {
	background-color: #35535ecc;
}
.step-num {
	position: absolute;
	top: -20px;
	left: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--mint);
	color: var(--bs-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 27px;
	font-weight: 700;
}
.step-num.cyan-num {
	background: var(--cyan);
}
.step-card h4 {
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.4;
	min-height: 2.8em; /* ★핵심: 1줄이든 2줄이든 항상 2줄 높이만큼의 공간을 고정 확보 */
}
.step-card h4 .hl {
	color: var(--mint);
}
.step-card h4 .hl-mint {
	color: var(--mint);
	font-size: 24px;
}
.step-card h4 .hl-cyan {
	color: var(--cyan);
}
.step-card p {
	font-size: 24px;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 35px;
}
.step-link {
	font-size: 24px;
	color: var(--muted);
	text-decoration: underline;
}
.step-badge {
	display: inline-block;
	background: var(--mint);
	color: #07111f;
	border-radius: 50px;
	padding: 4px 20px;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 10px;
	align-self: flex-start;
}
.step-badge-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}
.step-badge-outline {
	display: inline-block;
	background: #35535e;
	border-radius: 50px;
	padding: 10px 20px;
	font-size: 24px;
	color: var(--bs-white);
	margin: 2px;
}
.step-bullet {
	font-size: 24px;
	color: var(--muted);
	line-height: 1.9;
	padding: 0;
}
.step-bullet li {
	list-style: none;
	padding: 0;
}
.step-bullet li::before {
	content: '· ';
}

/* ══════════════════════════════
       TAB1 — SEC6: LTE ROUTER
    ══════════════════════════════ */
.router-section {
	background: transparent linear-gradient(180deg, #2a424b 0%, #2a736d 100%) 0% 0% no-repeat padding-box;
}
.router-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 32px;
}
.router-badge {
	background: #1a282e;
	/* border: 1px solid rgba(255, 255, 255, 0.15); */
	border-radius: 24px;
	padding: 5px 16px;
	font-size: 30px;
	color: var(--bs-white);
}
.router-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 34px;
}
.router-title .hl {
	color: var(--mint);
}
.router-img-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.router-img {
	display: flex;
	align-items: center;
	justify-content: center;
}
.router-model {
	font-size: 36px;
	font-weight: 700;
	text-align: center;
}
.router-price {
	font-size: 36px;
	font-weight: 600;
	color: var(--mint);
	text-align: center;
}
.router-price.cyan {
	color: var(--cyan);
}
.router-specs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.spec-item {
	display: flex;
	flex-direction: row;
	gap: 15px;
	align-items: center;
}
.spec-key {
	font-size: 30px;
	font-weight: 600;
}
.spec-val {
	font-size: 24px;
	color: var(--muted);
}

/* ══════════════════════════════
       TAB1 — SEC7: PRICING TABLE
    ══════════════════════════════ */
.pricing-section {
	background: transparent linear-gradient(180deg, #000000 0%, #00665b 100%) 0% 0% no-repeat padding-box;
	opacity: 0.4;
}
.pricing-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 40px;
}
.pricing-title .hl {
	color: var(--mint);
}
.pricing-title .hl-cyan {
	color: var(--cyan);
}
.pricing-sub {
	font-size: 30px;
	line-height: 1.75;
	color: var(--bs-white);
	margin-bottom: 110px;
}
.pricing-sub .hl {
	color: var(--mint);
}
.pricing-sub .hl-cyan {
	color: var(--cyan);
}
.pricing-table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
.pricing-table thead th {
	font-size: 24px;
	font-weight: 600;
	color: var(--text);
	padding: 25px 20px;
	border-bottom: 1px solid var(--border);
	text-align: center;
}
.pricing-table tbody tr {
	background: var(--card);
	border-radius: 10px;
	margin-bottom: 10px;
}
.pricing-table tbody tr + tr {
	border-top: 8px solid var(--bg);
}
.pricing-table td {
	padding: 22px 44px;
	vertical-align: middle;
}
.plan-name {
	font-size: 40px;
	font-weight: 800;
	color: var(--mint);
}
.plan-name.cyan {
	color: var(--cyan);
}
.plan-data {
	font-size: 48px;
	font-weight: 800;
}
.plan-data span {
	font-size: 27px;
	font-weight: 400;
	color: var(--text);
}
.plan-price-main {
	font-size: 42px;
	font-weight: 800;
	color: var(--mint);
}
.plan-price-main.cyan {
	color: var(--cyan);
}
.plan-price-sub {
	font-size: 26px;
	color: var(--muted);
	margin-top: 2px;
}
.plan-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.plan-tag {
	background: #35535ecc;
	border-radius: 50px;
	padding: 10px 40px;
	font-size: 24px;
	color: var(--text);
}
.pricing-note {
	font-size: 24px;
	color: var(--mint);
	margin-top: 20px;
}
/* ── 요금제 Grid Wrapper ── */
.pricing-grid-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px; /* 카드(Row) 사이의 여백을 여기서 한 번에 관리 */
	width: 100%;
}

/* ── 요금제 Header ── */
.pricing-header {
	display: grid;
	/* 각 열의 비율 설정 (1 : 1.5 : 2 : 2) */
	grid-template-columns: 1fr 1.5fr 2fr 2.5fr;
	padding: 10px 20px;
}

.pricing-header .h-col {
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	color: var(--muted);
}

/* ── 요금제 Row (카드형태) ── */
.pricing-item {
	display: grid;
	/* 헤더와 동일한 비율로 열을 분배하여 완벽하게 정렬 */
	grid-template-columns: 1fr 1.5fr 2fr 2.5fr;
	background: var(--card2);
	border-radius: 16px; /* ★ 테이블 찌꺼기 없이 깔끔하게 모서리 적용 가능 */
	align-items: center; /* 세로 중앙 정렬 */
}

/* ── 요금제 Column (셀 역할) ── */
.p-col {
	padding: 26px 20px;
	text-align: center;
	position: relative; /* 세로선 기준점 */
}

/* ── 세로 구분선 (첫 번째 컬럼 제외) ── */
.p-col + .p-col::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 45%; /* 위아래 여백을 둔 세로선 */
	background: rgba(255, 255, 255, 0.08);
}
/* ══════════════════════════════
       TAB1 — SEC8: DATA CREDIT
    ══════════════════════════════ */
.dc-section {
	background: var(--bg);
}
.dc-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 40px;
}
.dc-title .hl {
	color: var(--mint);
}
.dc-sub {
	font-size: 30px;
	color: var(--text);
	line-height: 42px;
	margin-bottom: 120px;
}
.dc-sub .hl {
	color: var(--mint);
}
.dc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 23px;
}
.dc-card {
	background: var(--card2);
	border-radius: 16px;
	padding: 50px 0 65px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}
.dc-vol {
	font-size: 48px;
	font-weight: 800;
	color: var(--mint);
	line-height: 1;
	margin-bottom: 30px;
}
.dc-unit {
	font-size: 27px;
	font-weight: 600;
	color: var(--text);
	margin-left: 10px;
}
.dc-divider {
	width: 70%;
	height: 1px;
	background: var(--border);
	margin-bottom: 30px;
}
.dc-price {
	font-size: 42px;
	font-weight: 800;
}
.dc-price-unit {
	font-size: 27px;
}
.dc-vat {
	font-size: 24px;
	color: var(--muted);
	margin-top: 4px;
}
.dc-notes {
	margin-top: 47px;
}
.dc-notes p {
	font-size: 24px;
	color: var(--mint);
	margin: 0;
	line-height: 36px;
}

/* ══════════════════════════════
       TAB1 — SEC9: CONTACT FORM
    ══════════════════════════════ */
.contact-section {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
}
.contact-crane {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 55%;
	opacity: 0.15;
	pointer-events: none;
}
.contact-inner {
	position: relative;
	z-index: 1;
	width: 100%;
}
.contact-title {
	font-size: 64px;
	font-weight: 800;
	color: var(--mint);
	margin-bottom: 0.3em;
}
.contact-sub {
	font-size: 30px;
	color: var(--text);
	margin-bottom: 40px;
}
.contact-form-wrap {
	max-width: 520px;
	margin: 0 auto;
}
.form-label-custom {
	font-size: 0.88rem;
	font-weight: 600;
	margin-bottom: 7px;
	display: block;
}
.form-input-custom {
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 12px 16px;
	color: var(--text);
	font-size: 0.9rem;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
}
.form-input-custom::placeholder {
	color: rgba(255, 255, 255, 0.3);
}
.form-input-custom:focus {
	border-color: var(--mint);
}
.email-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.email-at {
	color: var(--muted);
	font-size: 1rem;
}
.form-select-custom {
	flex: 1;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--text);
	font-size: 0.9rem;
	font-family: inherit;
	outline: none;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238aa3bf' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.form-select-custom option {
	background: #0f2040;
}
.form-textarea-custom {
	width: 100%;
	height: 130px;
	resize: vertical;
}
.btn-submit {
	width: 100%;
	padding: 15px;
	background: var(--mint);
	color: #07111f;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s;
	margin-top: 8px;
}
.btn-submit:hover {
	opacity: 0.88;
}
.btn-submit.cyan-btn {
	background: var(--cyan);
}

/* ══════════════════════════════
       TAB2 — SEC1: HERO (L 상품)
    ══════════════════════════════ */
#page-plan-l {
	/* padding-top: 130px; */ /* 요청하신 214px 간격 완벽 유지 */
	padding-bottom: 180px; /* 하단에 푸터가 바로 붙지 않도록 여백 추가 */
}
.t2-hero {
	position: relative;
	/* min-height: calc(100vh - var(--nav-h)); */
	display: flex;
	align-items: center;
	overflow: hidden;
	/* padding: 0 80px; */
	padding-top: 130px;
	padding-bottom: 280px;

	background-image: url('assets/images/bg_tab2_main.png');

	/* 2. 최신 브라우저를 위한 고해상도 분기 처리 */
	background-image: -webkit-image-set(
		url('assets/images/bg_tab2_main.png') 1x,
		url('assets/images/bg_tab2_main@2x.png') 2x
	);
	background-image: image-set(url('assets/images/bg_tab2_main.png') 1x, url('assets/images/bg_tab2_main@2x.png') 2x);
	isolation: isolate;
	/* background-position-y: -245px; */
	background-size: cover;
	background-repeat: no-repeat;
}
.t2-hero::after {
	content: '';
	position: absolute;
	background: #000000;
	z-index: -1;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 1) 100%);
}
.t2-hero-content {
	position: relative;
	z-index: 2;
	max-width: 600px;
}
/* .t2-hero-content h1 {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0.35em;
} */
.t2-hero-content h1 .hl-cyan {
	color: var(--cyan);
}
/* .t2-hero-content .sub1 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 0.6em;
} */
/* .t2-hero-content .sub2 {
	font-size: 0.92rem;
	color: var(--muted);
	line-height: 1.8;
	margin-bottom: 2.2em;
} */

/* ══════════════════════════════
       TAB2 — SEC2: PAIN vs SOLUTION (L)
    ══════════════════════════════ */
.t2-pain-section {
	/* background: var(--bs-black); */
}

/* ══════════════════════════════
       TAB2 — SEC3: WHY L (산업현장 BG)
    ══════════════════════════════ */
.t2-why-section {
	position: relative;
	overflow: hidden;
	/* background: linear-gradient(160deg, #041e28 0%, #062030 50%, #07111f 100%); */
	padding: 90px 0;

	background-image: url('assets/images/bg_tab2_back.png');
	background-color: #00000099;
	background-blend-mode: multiply;

	background-position-y: -150px;
	background-size: cover; /* 이미지가 섹션을 꽉 채우도록 */
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* .t2-why-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 80% at 60% 50%, rgba(0, 200, 224, 0.06) 0%, transparent 70%);
	pointer-events: none;
} */
/* 산업현장 배경 - CSS 그리드 실루엣 */
/* .t2-why-bg-pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.12;
}
.t2-why-content {
	position: relative;
	z-index: 1;
}
.t2-why-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 40px;
}
.t2-why-title .hl-cyan {
	color: var(--cyan);
}
.t2-why-sub {
	font-size: 30px;
	color: var(--text);
	margin-bottom: 76px;
}
.t2-why-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.t2-why-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(0, 200, 224, 0.15);
	border-radius: 14px;
	padding: 36px 28px;
	text-align: center;
	backdrop-filter: blur(6px);
	transition: border-color 0.25s;
}
.t2-why-card:hover {
	border-color: rgba(0, 200, 224, 0.4);
}
.t2-why-icon {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: rgba(0, 200, 224, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px;
	font-size: 2rem;
	color: var(--cyan);
}
.t2-why-card h4 {
	font-size: 1.15rem;
	font-weight: 800;
	margin-bottom: 14px;
}
.t2-why-badges {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
} */
.t2-why-section .why-icon {
	color: var(--cyan);
}
.t2-why-section .why-badge {
	background: var(--cyan);
	/* color: #07111f;
	border-radius: 50px;
	padding: 3px 12px;
	font-size: 0.75rem;
	font-weight: 700; */
}
/* .t2-why-card p {
	font-size: 0.85rem;
	color: var(--muted);
	line-height: 1.65;
	margin: 0;
} */

/* ══════════════════════════════
       TAB2 — SEC4: USE CASE (L, 4개)
    ══════════════════════════════ */
.t2-usecase-section {
	background: transparent linear-gradient(180deg, #000000 0%, #008db2 100%) 0% 0% no-repeat padding-box;
	padding-top: 130px;
	padding-bottom: 130px;
}
/* .t2-usecase-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
} */

.t2-usecase-section .uc-card:hover {
	background-color: var(--cyan);
}

/* ══════════════════════════════
       TAB2 — SEC5: HOW TO USE (L)
    ══════════════════════════════ */
.t2-howto-section {
	background: var(--bg);
}

/* ══════════════════════════════
       TAB2 — SEC6: LTE VPN ROUTER (무상)
    ══════════════════════════════ */
.t2-router-section {
	background: #35535ecc 0% 0% no-repeat padding-box;
}
/* 실제 라우터 이미지 대체 - 스타일링된 제품 박스 */
.t2-router-img-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.t2-router-img {
	/* width: 260px; */
	/* height: 200px; */
	/* border-radius: 16px; */
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.t2-router-device {
	/* width: 130px; */
	/* height: 90px; */
	/* background: linear-gradient(160deg, #2a3a42, #1a2830); */
	/* border-radius: 8px; */
	/* border: 1px solid rgba(255, 255, 255, 0.15); */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); */
}
/* .t2-router-model {
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
}
.t2-router-free {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--cyan);
	text-align: center;
} */

.t2-router-section .router-price {
	color: var(--cyan);
}

/* ══════════════════════════════
       TAB2 — SEC7: PRICING (L, 월 요금)
    ══════════════════════════════ */
.t2-pricing-section {
	background: transparent linear-gradient(180deg, #000000 0%, #008caf 120%) 0% 0% no-repeat padding-box;
}
.t2-pricing-section .plan-name,
.t2-pricing-section .plan-price-main,
.t2-pricing-section .pricing-note {
	color: var(--cyan);
}

/* ══════════════════════════════
       TAB2 — SEC8: 4MBPS 지속 연결 (데이터 소진 후)
    ══════════════════════════════ */
.t2-sustain-section {
	position: relative;
	overflow: hidden;
	/* 1. 구형 브라우저를 위한 기본 폴백(Fallback) */
	background-image: url('assets/images/bg_tab2_sustain.png');

	/* 2. 최신 브라우저를 위한 고해상도 분기 처리 */
	background-image: -webkit-image-set(
		url('assets/images/bg_tab2_sustain.png') 1x,
		url('assets/images/bg_tab2_sustain@2x.png') 2x
	);
	background-image: image-set(
		url('assets/images/bg_tab2_sustain.png') 1x,
		url('assets/images/bg_tab2_sustain@2x.png') 2x
	);
	background-size: cover;
	isolation: isolate;
}
.t2-sustain-section::after {
	content: '';
	position: absolute;
	background: #000000;
	z-index: -1;
	inset: 0;
	opacity: 0.8;
}
/* HUD 배경 효과 */
.t2-sustain-hud {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
#hudCanvas {
	width: 100%;
	height: 100%;
	display: block;
}
.t2-sustain-content {
	position: relative;
	z-index: 1;
}
.t2-sustain-title {
	font-size: var(--fs-title);
	font-weight: 800;
	line-height: 67px;
	margin-bottom: 40px;
}
.t2-sustain-title .hl-cyan {
	color: var(--cyan);
}
.t2-sustain-sub {
	font-size: 30px;
	color: var(--text);
	line-height: 42px;
	margin-bottom: 120px;
}
.t2-sustain-sub .hl-cyan {
	color: var(--cyan);
}

.sustain-grid {
	display: grid;
	/* 1. 기존 4칸에서 3칸 균등 분할로 변경 */
	grid-template-columns: repeat(3, 1fr);
	gap: 23px;

	/* 2. 가로 가운데 정렬 및 컴포넌트 비율 방어 코드 */
	width: 100%;
	max-width: 1200px; /* ★시니어 추천: 3개 카드가 가장 밀도 있고 예쁘게 보이는 황금 너비 제한 */
	margin: 0 auto; /* 그리드 컨테이너 자체를 전체 화면의 가로 정중앙에 배치 */
}
.sustain-label {
	font-size: 42px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 30px;
}
.sustain-card {
	background: var(--card2);
	border-radius: 16px;
	padding: 50px 0; /* 기존 65px 하단 패딩을 지워서 flex가 알아서 공간을 나누게 합니다 */
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 320px; /* ★ 카드의 최소 높이를 잡아주어 여유 공간을 만듭니다 */
}
.sustain-divider {
	width: 70%;
	height: 1px;
	background: var(--border);
	margin-bottom: 30px;
}
.sustain-bottom {
	flex: 1; /* 구분선 아래의 남은 모든 공간을 차지 */
	display: flex;
	flex-direction: column;
	justify-content: center; /* 세로 정중앙 정렬! */
	align-items: center;
	width: 100%;
}
.sustain-sub {
	font-size: 27px;
}
.sustain-value {
	font-size: 42px;
	font-weight: 800;
	color: var(--cyan);
}
.sustain-value-suffix {
	font-size: 27px;
}

/* .t2-sustain-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.t2-sustain-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(0, 200, 224, 0.15);
	border-radius: 14px;
	padding: 40px 28px;
	text-align: center;
	backdrop-filter: blur(8px);
}
.t2-sustain-label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 20px;
}
.t2-sustain-divider {
	width: 70%;
	height: 1px;
	background: var(--border);
	margin-bottom: 30px;
}
.t2-sustain-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--cyan);
	line-height: 1.2;
}
.t2-sustain-value-suffix {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--muted);
} */

/* ══════════════════════════════
       TAB2 — SEC9: VPN 서비스 + CONTACT
    ══════════════════════════════ */
.vpn-section {
	background: var(--bg);
	padding: 90px 0;
}
.vpn-title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin-bottom: 40px;
}
.vpn-title .hl-cyan {
	color: var(--cyan);
}
.vpn-sub {
	font-size: 30px;
	color: var(--text);
	line-height: 42px;
	margin-bottom: 67px;
}
.vpn-sub .hl-cyan {
	color: var(--cyan);
}
.vpn-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 630px;
	margin-bottom: 67px;
}
.vpn-badge {
	background: var(--cyan);
	color: #07111f;
	border-radius: 50px;
	padding: 8px 20px;
	font-size: 24px;
	font-weight: 700;
}
.vpn-price-card {
	width: fit-content; /* ★ 핵심: 내부 컨텐츠의 너비만큼만 늘어납니다 */
	margin: 0 auto; /* fit-content로 줄어든 카드를 화면 정중앙에 배치 */
	margin-bottom: 120px;
	background: var(--card2);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.vpn-price-label {
	padding: 45px 50px 45px 85px;
	font-size: 40px;
	font-weight: 700;
	/* border-right: 1px solid rgba(0, 200, 224, 0.15); ❌ 기존 테두리 삭제 */
	display: flex;
	align-items: center;
	min-width: 180px;

	/* ★ 추가: 가상 요소를 배치하기 위한 기준점 */
	position: relative;
}
.vpn-price-label::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%); /* 세로 정중앙 정렬 */
	width: 1px;
	height: 45%; /* 선의 길이 (위아래 여백을 조절하고 싶다면 이 수치를 변경하세요) */
	background: rgba(190, 190, 190, 0.25); /* 기존 border 색상과 동일하게 맞춤 */
}
.vpn-price-value {
	padding: 45px 85px 45px 50px;
	font-size: 54px;
	font-weight: 800;
	color: var(--cyan);
	display: flex;
	align-items: center;
}

/* TAB2 CONTACT */
.t2-contact-section {
	position: relative;
	overflow: hidden;
	padding: 90px 0;
}
.t2-contact-section .contact-title {
	color: var(--cyan);
}
.t2-contact-inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* FOOTER */
.site-footer {
	background: var(--bg); /* 배경색이 완전 검은색이라면 #000000 으로 변경하셔도 좋습니다 */
	padding: 40px 160px;
	display: flex;
	align-items: center; /* ★ 수정: 로고와 텍스트 블록의 세로 중앙을 맞춥니다 */
	justify-content: space-between; /* ★ 추가: 푸터 내용 전체를 화면 가로 정중앙으로 모아줍니다 */
	gap: 120px; /* ★ 추가: 로고와 텍스트 블록 사이의 여백을 넉넉하게 띄웁니다 */

	/* ★ 추가: 푸터도 동일하게 최대/최소 너비를 주고 가운데 정렬 */
	width: 100%;
	max-width: var(--pc-max-width);
	min-width: var(--pc-min-width);
	margin: 0 auto;
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	/* margin-top: 2px; ❌ 삭제 (align-items: center를 방해하므로 제거) */
}

.footer-info {
	/* flex: 1; ❌ 삭제 (이 속성이 있으면 텍스트가 화면 끝까지 억지로 늘어납니다) */
	display: grid;
	grid-template-columns: repeat(3, auto); /* ★ 수정: 텍스트 길이에 맞춰 깔끔하게 3열 배치 */
	gap: 20px 80px; /* 위아래 20px, 좌우 80px 넉넉한 간격 */
}

.footer-key {
	font-size: 14px;
	font-weight: 700;
	color: #438477; /* ★ 수정: 캡처와 동일하게 톤 다운된 딥 민트색 */
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}

.footer-val {
	font-size: 14px;
	color: #438477; /* ★ 수정: 캡처와 동일하게 차분한 어두운 회색 */
	line-height: 1.5;
}
/* ══════════════════════════════
   USE CASE MODAL
══════════════════════════════ */
.uc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(5px);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.uc-modal-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.uc-modal {
	width: 80%;
	max-width: 1600px; /* 목표 이미지 비율에 맞춘 넉넉한 너비 */
	min-height: 540px;
	background: #141f27; /* 캡처와 동일한 다크 네이비 배경색 */
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	display: flex;
	transform: translateY(20px);
	transition: transform 0.3s ease;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.uc-modal-overlay.active .uc-modal {
	transform: translateY(0);
}

/* 오른쪽 이미지 영역 */
.uc-modal-bg {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 55%; /* 오른쪽 절반을 덮음 */
	background-size: cover;
	background-position: center;
	z-index: 1;
}

/* 핵심: 이미지가 왼쪽 배경색으로 스며들게 하는 그라데이션 마스크 */
.uc-modal-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #141f27 0%, rgba(20, 31, 39, 0.7) 30%, transparent 100%);
}

/* 왼쪽 텍스트 콘텐츠 영역 */
.uc-modal-content {
	position: relative;
	z-index: 2;
	width: 55%; /* 이미지 영역과 살짝 겹치게 하여 공간 활용 */
	padding: 60px 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.uc-modal-content h3 {
	font-size: 48px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 12px;
}

.uc-modal-sub {
	font-size: 24px;
	color: var(--muted);
	margin-bottom: 40px;
}

.uc-modal-desc {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 80px;
}

.uc-modal-desc p {
	font-size: 24px;
	line-height: 40px;
	color: var(--text);
	margin: 0;
}

/* 확인 버튼 */
.uc-modal-btn {
	margin-top: auto;
	align-self: flex-start;
	color: var(--bs-black);
	border: none;
	border-radius: 50px;
	padding: 4px 100px;
	font-size: 28px;
	font-weight: 600;
	cursor: pointer;
}

/* ── 탭별 모달 버튼 배경색 테마 정의 ── */
[data-theme='plan-d'] .uc-modal-btn {
	background: var(--mint); /* 탭1 카드를 눌렀을 땐 민트색 */
}

[data-theme='plan-l'] .uc-modal-btn {
	background: var(--cyan); /* 탭2 카드를 눌렀을 땐 시안색 */
}

/* ══════════════════════════════
   CONSOLE INFO MODAL
══════════════════════════════ */
.console-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(5px);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.console-modal-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.console-modal {
	width: 100%;
	max-width: 1600px; /* 캡처 비율에 맞춘 너비 */
	background: #1a252c; /* 캡처와 유사한 다크 톤 배경 */
	border-radius: 12px;
	display: flex;
	transform: translateY(20px);
	transition: transform 0.3s ease;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.console-modal-overlay.active .console-modal {
	transform: translateY(0);
}

/* 왼쪽 영역 */
.console-modal-left {
	flex: 3.5;
	padding: 60px 40px 60px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.console-modal-left h3 {
	font-size: 48px;
	font-weight: 800;
	color: var(--text);
	line-height: 1.3;
	margin-bottom: 40px;
}

/* 내부 회색 리스트 박스 */
.console-list-box {
	background: var(--card2);
	border-radius: 8px;
	padding: 42px;
	margin-bottom: 48px;
}

.console-list-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.console-list-box li {
	font-size: 26px;
	color: var(--text);
	line-height: 1.5;
}

/* 확인 버튼 */
.console-modal-btn {
	align-self: flex-start;
	background: var(--mint);
	color: var(--bs-black);
	border: none;
	border-radius: 50px;
	padding: 4px 100px;
	font-size: 28px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}

/* 오른쪽 모니터 이미지 영역 */
.console-modal-right {
	flex: 6.5; /* 모니터 영역이 아주 살짝 더 넓게 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 60px 40px 0;
}

.console-monitor-img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
/* ══════════════════════════════
   CONSULT MODAL
══════════════════════════════ */
.consult-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(5px);
	z-index: 2000; /* 다른 모달들보다 확실히 위에 뜨도록 */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.consult-modal-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.consult-modal {
	position: relative;
	width: 100%;
	max-width: 520px;
	background: #1a232a; /* 캡처와 유사한 딥 다크 그레이 */
	border-radius: 12px;
	padding: 70px 40px 40px; /* 상단 패딩을 넉넉히 줘서 뒤로가기 버튼 공간 확보 */
	transform: translateY(20px);
	transition: transform 0.3s ease;
}

.consult-modal-overlay.active .consult-modal {
	transform: translateY(0);
}

/* 좌측 상단 뒤로가기 버튼 */
.consult-back-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 30px;
	border: none;
	border-radius: 6px;
	color: #000;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

/* 임시 폼 레이아웃 스타일 */
.consult-form-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.c-field label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #fff;
}

.c-field input,
.c-field textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	border-radius: 6px;
	padding: 14px;
	color: #fff;
	font-size: 15px;
	outline: none;
}

.consult-submit-btn {
	margin-top: 10px;
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 800;
	color: #000;
	cursor: pointer;
}

/* ── 테마별 버튼 색상 적용 (Home/Tab1은 민트, Tab2는 시안) ── */
body[data-nav-theme='home'] .consult-back-btn,
body[data-nav-theme='plan-d'] .consult-back-btn,
body[data-nav-theme='home'] .consult-submit-btn,
body[data-nav-theme='plan-d'] .consult-submit-btn {
	background: var(--mint);
}

body[data-nav-theme='plan-l'] .consult-back-btn,
body[data-nav-theme='plan-l'] .consult-submit-btn {
	background: var(--cyan);
}


/* 임시 */
.consult-submit-btn {
	background: rgba(255, 255, 255, 0.1) !important; /* 테마 색상 무시하고 흐린 회색으로 변경 */
	color: rgba(255, 255, 255, 0.3) !important;      /* 글씨도 어둡게 톤 다운 */
	pointer-events: auto; 
}