/* ==========================================================================
   1. CSS 변수 정의 (디자인 토큰)
   ========================================================================== */
:root {
	/* Primary Brand */
	--bg-primary:        #1f1633;
	--bg-deeper:         #150f23;
	--bg-deepest:        #0d0918;
	--border-purple:     #362d59;
	--border-purple-dim: #251c40;

	/* Accent Colors */
	--sentry-purple:     #6a5fc1;
	--muted-purple:      #79628c;
	--deep-violet:       #422082;
	--lime-green:        #c2ef4e;
	--lime-glow:         rgba(194, 239, 78, 0.35);
	--coral:             #ffb287;
	--pink:              #fa7faa;
	--magic-pink:        #ff8cc3;
	--magic-purple:      #b484ff;

	/* Text Colors */
	--text-primary:      #ffffff;
	--text-secondary:    #d4d0e0;
	--text-tertiary:     #8e87a8;
	--text-code:         #dcdcaa;

	/* Surface */
	--glass-white:       rgba(255, 255, 255, 0.06);
	--glass-white-hover: rgba(255, 255, 255, 0.10);
	--glass-border:      rgba(255, 255, 255, 0.10);

	/* Shadows */
	--shadow-inset:      rgba(0, 0, 0, 0.18) 0px 1px 3px 0px inset;
	--shadow-hover:      rgba(0, 0, 0, 0.28) 0px 0.5rem 1.5rem;
	--shadow-card:       rgba(0, 0, 0, 0.28) 0px 10px 25px -5px;
	--shadow-ambient:    rgba(106, 95, 193, 0.25) 0px 0px 80px;

	/* Layout */
	--container-max:     1200px;
	--radius-sm:         6px;
	--radius-md:         10px;
	--radius-lg:         16px;
	--radius-pill:       999px;

	/* Typography */
	--font-sans:         'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono:         'JetBrains Mono', 'Monaco', monospace;
}

/* ==========================================================================
   2. 기본 리셋 & 베이스
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-sans);
	font-weight: 400;
	background: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* 한국어 단어 단위 줄바꿈 (어절 보존) */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 배경 노이즈 텍스처 (atmosphere 강화) */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		radial-gradient(ellipse at 20% 0%, rgba(180, 132, 255, 0.10) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 30%, rgba(255, 140, 195, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 100%, rgba(106, 95, 193, 0.12) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
	opacity: 0.025;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: overlay;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   한글 포함 라벨 오버라이드
   ========================================================================== */
/* JetBrains Mono는 한글 글리프가 없어 폴백 폰트로 렌더링됨 → 베이스라인 어긋남.
   한글 섞인 라벨에 .has-korean 클래스를 추가하면 sans로 강제 + 자간 좁힘.
   영문 전용 라벨(.label-uppercase 등)은 그대로 두고 이 클래스만 추가하면 됨. */
.has-korean {
	font-family: var(--font-sans) !important;
	letter-spacing: 0.02em !important;   /* 한글은 자간 넓으면 답답해짐 */
	text-transform: none !important;     /* 한글에 uppercase 무의미 + 영문 강제대문자 해제 */
}
/* 사이즈는 라벨 종류에 따라 살짝 키워줘야 가독성 확보됨 */
.label-uppercase.has-korean,
.hero-channels-label.has-korean,
.pricing-track-tag.has-korean,
.winback-tag.has-korean {
	font-size: 12px;                     /* 기존 10~11px → 12px (한글 가독선) */
	font-weight: 700;
}

/* ==========================================================================
   3. 유틸리티 / 공통 컴포넌트
   ========================================================================== */
.label-uppercase {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lime-green);
}

.patent-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;                       /* ← 6→7 (세로 숨통) */
	background: rgba(194, 239, 78, 0.10);
	border: 1px solid rgba(194, 239, 78, 0.35);
	border-radius: var(--radius-pill);
	font-size: 11.5px;                       /* ← 11→11.5 */
	color: var(--lime-green);
	line-height: 1.3;
	/* font-family / letter-spacing / text-transform 제거 — 자식별로 따로 지정 */
}

.patent-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lime-green);
	box-shadow: 0 0 8px var(--lime-glow);
	flex-shrink: 0;
}

/* 영문 태그 — mono로 기술적 분위기 살림 */
.patent-badge-tag {
	font-family: var(--font-mono);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 한글 설명 — sans로 가독성 우선 */
.patent-badge-desc {
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* 특허번호 — 숫자 위주라 mono OK, 단 자간은 한글 섞임 고려해 줄임 */
.patent-badge-patent {
	font-family: var(--font-mono);
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* 구분점 · */
.patent-badge-sep {
	color: var(--lime-green);
	opacity: 0.5;
	font-weight: 400;
}

/* 버튼 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--radius-md);
	transition: all 0.25s ease;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.btn-primary {
	background: var(--lime-green);
	color: var(--bg-deepest);
	box-shadow: 0 0 0 0 var(--lime-glow), var(--shadow-inset);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 30px var(--lime-glow), var(--shadow-hover);
}

.btn-secondary {
	background: var(--muted-purple);
	color: var(--text-primary);
	border: 1px solid #584674;
	box-shadow: var(--shadow-inset);
}

.btn-secondary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
	background: #8a73a0;
}

.btn-ghost {
	background: var(--glass-white);
	color: var(--text-primary);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
}

.btn-ghost:hover {
	background: var(--glass-white-hover);
	border-color: rgba(255, 255, 255, 0.20);
}

/* ==========================================================================
   4. 네비게이션
   ========================================================================== */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 18px 0;
	background: rgba(21, 15, 35, 0.65);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.nav.scrolled {
	border-bottom-color: var(--border-purple-dim);
	background: rgba(21, 15, 35, 0.85);
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nav-logo img {
	height: 36px;
	width: auto;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 36px;
}

.nav-menu a {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	transition: color 0.2s ease;
}

.nav-menu a:hover {
	color: var(--text-primary);
}

.nav-cta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-cta .btn {
	padding: 10px 20px;
	font-size: 13px;
}

.nav-toggle {
	display: none;
	color: #fff;
	padding: 8px;
}

/* ==========================================================================
   4-1. Language Selector
   ========================================================================== */
.lang-selector {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.lang-selector-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.18s ease;
	line-height: 1;
}

.lang-selector-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.20);
	color: #fff;
}

.lang-selector-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(122, 184, 53, 0.40);
}

.lang-selector-current {
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lang-selector-arrow {
	transition: transform 0.18s ease;
	opacity: 0.7;
}

.lang-selector-btn[aria-expanded="true"] .lang-selector-arrow {
	transform: rotate(180deg);
}

.lang-selector-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	max-height: 420px;
	overflow-y: auto;
	background: #1a1430;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.40);
	list-style: none;
	margin: 0;
	padding: 6px;
	z-index: 200;
}

.lang-selector-menu li {
	margin: 0;
}

.lang-selector-menu .lang-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.15s ease;
}

.lang-selector-menu .lang-item:hover {
	background: rgba(122, 184, 53, 0.10);
	color: #fff;
}

.lang-selector-menu .lang-item.is-active {
	background: rgba(122, 184, 53, 0.15);
	color: #7AB835;
	font-weight: 600;
}

.lang-selector-menu .lang-native {
	font-weight: 500;
	color: inherit;
}

.lang-selector-menu .lang-name {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
}

.lang-selector-menu .lang-item.is-active .lang-name {
	color: rgba(122, 184, 53, 0.65);
}

/* RTL 처리 */
html[dir="rtl"] .lang-selector-menu {
	left: 0;
	right: auto;
}

/* ==========================================================================
   5. Hero Section
   ========================================================================== */
.hero {
	padding: 180px 0 120px;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(180, 132, 255, 0.18) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.hero-inner {
	text-align: center;
	position: relative;
	z-index: 2;
	max-width: 920px;
	margin: 0 auto;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	border: 1px solid var(--border-purple);
	background: rgba(54, 45, 89, 0.30);
	border-radius: var(--radius-pill);
	margin-bottom: 32px;
	animation: floatIn 0.8s ease-out;
}

.hero-eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lime-green);
	box-shadow: 0 0 12px var(--lime-glow);
	animation: pulse 2s ease-in-out infinite;
}

.hero-eyebrow-text {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

/* ==========================================================================
   Hero 메신저 채널 통합 연동 배지
   ========================================================================== */
/* "기본기 신호" — 카카오톡 등 주요 메신저 채널 모두 연동 가능함을 첫인상에서 보여줌 */
.hero-channels {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 auto 28px;
	padding: 8px 16px 8px 18px;
	background: rgba(54, 45, 89, 0.30);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-pill);
	animation: floatIn 0.85s ease-out 0.05s both;
	flex-wrap: wrap;
	justify-content: center;
}
.hero-channels-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-tertiary);
	padding-right: 12px;
	border-right: 1px solid var(--border-purple-dim);
}
.hero-channels-list {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.hero-channel {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	letter-spacing: -0.01em;
}
/* 카카오톡만 노란색 강조 (브랜드 인지도 활용) */
.hero-channel-kakao {
	color: #FEE500;
}
.hero-channel-kakao svg {
	color: #FEE500;
}
@media (max-width: 768px) {
	.hero-channels {
		padding: 8px 14px;
		gap: 10px;
	}
	.hero-channels-label {
		font-size: 9px;
		padding-right: 10px;
	}
	.hero-channel {
		font-size: 11px;
	}
}

.hero-title {
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.035em;
	margin-bottom: 28px;
	animation: floatIn 0.9s ease-out 0.1s both;
}

.hero-title .gradient {
	background: linear-gradient(135deg, var(--magic-pink) 0%, var(--magic-purple) 50%, var(--lime-green) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.hero-subtitle {
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0 auto 44px;
	animation: floatIn 1s ease-out 0.2s both;
}

.hero-subtitle strong {
	color: var(--text-primary);
	font-weight: 600;
}

.hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	animation: floatIn 1.1s ease-out 0.3s both;
	margin-bottom: 64px;
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border-purple-dim);
	border: 1px solid var(--border-purple-dim);
	border-radius: var(--radius-lg);
	overflow: hidden;
	max-width: 880px;
	margin: 0 auto;
	animation: floatIn 1.2s ease-out 0.4s both;
}

.hero-stat {
	background: rgba(21, 15, 35, 0.85);
	padding: 28px 22px;
	text-align: center;
	transition: background 0.25s;
}

.hero-stat:hover {
	background: rgba(54, 45, 89, 0.45);
}

.hero-stat-tag {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 11px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lime-green);
	background: rgba(194, 239, 78, 0.10);
	border: 1px solid rgba(194, 239, 78, 0.30);
	border-radius: var(--radius-pill);
}

.hero-stat-value {
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 10px;
	background: linear-gradient(135deg, #fff 0%, var(--magic-purple) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-stat-label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--text-tertiary);
	letter-spacing: 0;
	line-height: 1.5;
}

/* ==========================================================================
   Hero 미리보기 신뢰 캡션 (스크린샷 위/아래에 배치)
   ========================================================================== */
.hero-preview-caption {
	max-width: 1280px;
	/* 위쪽 여백을 키우고(통계 섹션과 분리), 캡션-이미지 간격은 줄임 */
	margin: 56px auto 14px;
	text-align: center;
	animation: floatIn 0.8s ease-out;
	position: relative;
	z-index: 2;
}
.hero-preview-caption-inner {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 22px;
	background: linear-gradient(135deg, rgba(194, 239, 78, 0.08), rgba(180, 132, 255, 0.06));
	border: 1px solid rgba(194, 239, 78, 0.30);
	border-radius: var(--radius-pill);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
}
.hero-preview-caption-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lime-green);
	box-shadow: 0 0 10px var(--lime-glow);
	animation: pulse 1.6s ease-in-out infinite;
	flex-shrink: 0;
}
.hero-preview-caption-text {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-secondary);
	letter-spacing: -0.01em;
	line-height: 1.5;
}
.hero-preview-caption-text strong {
	background: linear-gradient(135deg, var(--lime-green), var(--magic-pink));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
}
.hero-preview-caption-text .divider {
	margin: 0 8px;
	color: var(--text-tertiary);
	opacity: 0.5;
}
/* 모바일 대응 */
@media (max-width: 768px) {
	.hero-preview-caption {
		margin-bottom: 14px;
		padding: 0 16px;
	}
	.hero-preview-caption-inner {
		padding: 8px 16px;
		gap: 10px;
	}
	.hero-preview-caption-text {
		font-size: 12px;
	}
	.hero-preview-caption-text .divider {
		display: none;
	}
	.hero-preview-caption-text .mobile-hide {
		display: none;
	}
}

/* ==========================================================================
   Hero 상단 미리보기 (실제 솔루션 화면 노출)
   ========================================================================== */
.hero-preview {
	max-width: 1280px;
	/* 위쪽 여백 제거(캡션이 이미 간격을 만듦), 아래 여백도 적정 수준으로 축소 */
	margin: 0 auto 32px;
	position: relative;
	animation: floatIn 0.8s ease-out;
	z-index: 2;
}
/* 후광 효과 — 매직톡 그라디언트 글로우 */
.hero-preview::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple), var(--lime-green));
	border-radius: var(--radius-lg);
	z-index: -1;
	opacity: 0.4;
	filter: blur(30px);
	animation: previewGlow 4s ease-in-out infinite;
}
@keyframes previewGlow {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 0.55; }
}
/* 프레임 컨테이너 — macOS 윈도우 스타일 */
.hero-preview-frame {
	background: linear-gradient(180deg, rgba(54, 45, 89, 0.5) 0%, rgba(21, 15, 35, 0.85) 100%);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-ambient), 0 30px 60px -15px rgba(0, 0, 0, 0.5);
	position: relative;
}
/* 상단 윈도우 컨트롤 바 (macOS 스타일) */
.hero-preview-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: linear-gradient(180deg, rgba(31, 22, 51, 0.95), rgba(21, 15, 35, 0.95));
	border-bottom: 1px solid var(--border-purple-dim);
	position: relative;
}
.hero-preview-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
.hero-preview-dot:nth-child(1) { background: #ff5f56; }
.hero-preview-dot:nth-child(2) { background: #ffbd2e; }
.hero-preview-dot:nth-child(3) { background: #27c93f; }
.hero-preview-url {
	margin-left: 16px;
	padding: 4px 14px;
	background: rgba(54, 45, 89, 0.45);
	border: 1px solid var(--border-purple-dim);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	letter-spacing: 0.02em;
}
.hero-preview-badge {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	background: rgba(194, 239, 78, 0.10);
	border: 1px solid rgba(194, 239, 78, 0.35);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--lime-green);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hero-preview-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lime-green);
	box-shadow: 0 0 8px var(--lime-glow);
	animation: pulse 2s ease-in-out infinite;
}
/* 실제 스크린샷 */
.hero-preview-img {
	width: 100%;
	display: block;
	background: var(--bg-deepest);
	/* 이미지 왼쪽 2px 선 제거 — 잘라낸 만큼 살짝 우측으로 보정 */
	clip-path: inset(0 0 0 2px);
	/* 잘려서 사라진 2px만큼 좌측으로 당겨 컨테이너에 꽉 차게 */
	margin-left: -2px;
	width: calc(100% + 2px);
}
/* 하단 페이드 마스크 — 이미지 끝부분을 살짝 어둡게 처리해
   "전체를 다 보지 않아도 되니 스크롤하라"는 시각적 유도 */
.hero-preview-frame::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(180deg, transparent, rgba(21, 15, 35, 0.45));
	pointer-events: none;
}
/* 모바일 대응 */
@media (max-width: 768px) {
	.hero-preview {
		margin: 0 auto 24px;
	}
	.hero-preview-bar {
		padding: 10px 12px;
	}
	.hero-preview-dot {
		width: 10px;
		height: 10px;
	}
	.hero-preview-url {
		font-size: 10px;
		padding: 3px 10px;
		margin-left: 10px;
	}
	.hero-preview-badge {
		font-size: 9px;
		padding: 3px 8px;
	}
}
@media (max-width: 480px) {
	/* 모바일에서는 URL 바와 LIVE 뱃지 숨김 — 너무 빽빽함 */
	.hero-preview-url,
	.hero-preview-badge {
		display: none;
	}
}

/* Hero 데모 시각화 */
.hero-demo {
	margin-top: 80px;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	animation: floatIn 1.3s ease-out 0.5s both;
}

.hero-demo-frame {
	background: linear-gradient(180deg, rgba(54, 45, 89, 0.4) 0%, rgba(21, 15, 35, 0.8) 100%);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	padding: 14px;
	box-shadow: var(--shadow-ambient), var(--shadow-card);
	position: relative;
}

.hero-demo-frame::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple), var(--lime-green));
	border-radius: var(--radius-lg);
	z-index: -1;
	opacity: 0.4;
	filter: blur(20px);
}

.hero-demo-img {
	width: 100%;
	border-radius: 10px;
	background: var(--bg-deepest);
	aspect-ratio: 16 / 9;
	display: block;
}

/* ==========================================================================
   6. 섹션 공통
   ========================================================================== */
section {
	padding: 100px 0;
	position: relative;
	z-index: 2;
}

.section-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 64px;
}

.section-header .label-uppercase {
	margin-bottom: 16px;
}

.section-title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin-bottom: 20px;
}

.section-subtitle {
	font-size: 17px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ==========================================================================
   7. Differentiator (자기강화 루프) — 강화 버전
   ========================================================================== */
.differentiator {
	background:
		radial-gradient(ellipse at 15% 20%, rgba(255, 140, 195, 0.08) 0%, transparent 45%),
		radial-gradient(ellipse at 85% 80%, rgba(194, 239, 78, 0.06) 0%, transparent 45%),
		var(--bg-deeper);
	border-top: 1px solid var(--border-purple-dim);
	border-bottom: 1px solid var(--border-purple-dim);
	position: relative;
	overflow: hidden;
}
/* 상단 강조 라인 (Insight 섹션과 시각적 통일) */
.differentiator::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, transparent, var(--magic-pink));
	opacity: 0.6;
}
/* ==========================================================================
   정액제 약속 섹션 (Predictable Pricing)
   ========================================================================== */
/* 채널톡 종량제 전환을 정조준한 카운터 섹션.
   "예측 가능한 비용"이라는 엔터프라이즈 핵심 가치를 시각적으로 강조. */
.predictable {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255, 178, 135, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 80%, rgba(194, 239, 78, 0.06) 0%, transparent 50%),
		var(--bg-deeper);
	border-top: 1px solid var(--border-purple-dim);
	border-bottom: 1px solid var(--border-purple-dim);
	position: relative;
	overflow: hidden;
}
.predictable::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, transparent, var(--coral));
	opacity: 0.6;
}

/* Before vs After 카드 그리드 */
.predictable-compare {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
}

/* 좌(Bad) / 우(Good) 카드 공통 */
.predictable-side {
	padding: 32px 30px;
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 종량제 카드 (Bad) — 코랄 톤 */
.predictable-side-bad {
	background: linear-gradient(180deg, rgba(231, 76, 60, 0.06), rgba(21, 15, 35, 0.65));
	border: 1px solid rgba(231, 76, 60, 0.30);
}

/* 정액제 카드 (Good) — 라임 톤 */
.predictable-side-good {
	background: linear-gradient(180deg, rgba(194, 239, 78, 0.08), rgba(21, 15, 35, 0.65));
	border: 1px solid rgba(194, 239, 78, 0.40);
	box-shadow: 0 0 40px rgba(194, 239, 78, 0.08);
}

.predictable-side-label {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}
.predictable-side-bad .predictable-side-label { color: #ff7e7e; }
.predictable-side-good .predictable-side-label { color: var(--lime-green); }

.predictable-side-title {
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 800;
	line-height: 1.30;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
	color: var(--text-primary);
}

.predictable-list {
	list-style: none;
	padding: 0;
	margin: 0 0 22px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.predictable-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.55;
}
.predictable-list li::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 50%;
}
.predictable-side-bad .predictable-list li::before {
	background: #ff7e7e;
}
.predictable-side-good .predictable-list li::before {
	background: var(--lime-green);
	box-shadow: 0 0 6px var(--lime-glow);
}
.predictable-list li strong {
	color: var(--text-primary);
	font-weight: 700;
}
.predictable-note {
	color: var(--text-tertiary);
	font-size: 11.5px;
	font-weight: 500;
}

/* 그래프 영역 */
.predictable-graph {
	margin-top: auto;
	margin-bottom: 16px;
	padding: 14px;
	background: rgba(13, 9, 24, 0.50);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.05);
}
.predictable-graph svg {
	width: 100%;
	height: auto;
	display: block;
}

/* 출처 라인 */
.predictable-side-source {
	font-size: 11.5px;
	color: var(--text-tertiary);
	line-height: 1.5;
	padding-top: 12px;
	border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.predictable-side-source a {
	color: #ffa580;
	text-decoration: underline;
	text-decoration-color: rgba(255, 178, 135, 0.4);
	text-underline-offset: 2px;
	transition: opacity 0.2s;
}
.predictable-side-source a:hover {
	opacity: 0.8;
}

.predictable-side-source strong {
	display: block;
	margin-bottom: 6px;
	color: var(--text-secondary);
	font-weight: 700;
}
.predictable-side-source a {
	display: inline-block;     /* 한 줄에 하나씩 깔끔하게 */
	margin-top: 4px;
}

/* VS 배지 (중간) */
.predictable-vs {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	align-self: center;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple));
	border-radius: 50%;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.04em;
	box-shadow: 0 0 30px rgba(180, 132, 255, 0.5);
	animation: vsPulse 2.5s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes vsPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

/* 약속 강조 박스 (하단) */
.predictable-promise {
	max-width: 900px;
	margin: 48px auto 0;
	padding: 26px 32px;
	background: linear-gradient(135deg, rgba(180, 132, 255, 0.10), rgba(194, 239, 78, 0.06));
	border: 1px solid rgba(180, 132, 255, 0.35);
	border-radius: var(--radius-lg);
}
.predictable-promise-inner {
	display: flex;
	align-items: center;
	gap: 18px;
}
.predictable-promise-inner svg {
	flex-shrink: 0;
	color: var(--lime-green);
}
.predictable-promise-text {
	font-size: clamp(15px, 1.6vw, 17px);
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.55;
	letter-spacing: -0.01em;
}
.predictable-promise-text strong {
	color: var(--lime-green);
	font-weight: 700;
}
.predictable-promise-text em {
	font-style: normal;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* 반응형 */
@media (max-width: 992px) {
	.predictable-compare {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.predictable-vs {
		margin: 0 auto;
		width: 48px;
		height: 48px;
		font-size: 14px;
	}
}
@media (max-width: 768px) {
	.predictable-side {
		padding: 24px 22px;
	}
	.predictable-promise {
		padding: 22px 24px;
	}
	.predictable-promise-inner {
		flex-direction: column;
		text-align: center;
		gap: 14px;
	}
}
/* === 임팩트 헤더 (Before vs After 대비) === */
.diff-impact {
	max-width: 980px;
	margin: 0 auto 64px;
	text-align: center;
	position: relative;
	z-index: 2;
}
.diff-impact-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 18px;
	background: linear-gradient(135deg, rgba(255, 140, 195, 0.10), rgba(194, 239, 78, 0.08));
	border: 1px solid rgba(255, 140, 195, 0.30);
	border-radius: var(--radius-pill);
	margin-bottom: 24px;
}
.diff-impact-eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--magic-pink);
	box-shadow: 0 0 10px rgba(255, 140, 195, 0.6);
	animation: pulse 2s ease-in-out infinite;
}
.diff-impact-eyebrow-text {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.diff-impact-headline {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	max-width: 920px;
	margin: 0 auto;
}
.diff-impact-side {
	padding: 24px 28px;
	border-radius: var(--radius-lg);
	text-align: center;
	transition: transform 0.3s ease;
}
.diff-impact-side:hover {
	transform: translateY(-3px);
}
.diff-impact-side.is-old {
	background: rgba(231, 76, 60, 0.04);
	border: 1px solid rgba(231, 76, 60, 0.22);
}
.diff-impact-side.is-new {
	background: linear-gradient(135deg, rgba(194, 239, 78, 0.10), rgba(180, 132, 255, 0.06));
	border: 1px solid rgba(194, 239, 78, 0.40);
	box-shadow: 0 0 40px rgba(194, 239, 78, 0.10);
}
.diff-impact-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.diff-impact-side.is-old .diff-impact-label { color: #ff7e7e; }
.diff-impact-side.is-new .diff-impact-label { color: var(--lime-green); }
.diff-impact-text {
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 700;
	line-height: 1.40;
	letter-spacing: -0.02em;
}
.diff-impact-side.is-old .diff-impact-text {
	color: var(--text-tertiary);
	text-decoration: line-through;
	text-decoration-color: rgba(231, 76, 60, 0.45);
	text-decoration-thickness: 2px;
}
.diff-impact-side.is-new .diff-impact-text {
	color: var(--text-primary);
}
.diff-impact-side.is-new .diff-impact-text em {
	font-style: normal;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.diff-impact-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple));
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 0 24px rgba(180, 132, 255, 0.5);
	animation: arrowPulse 2.5s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes arrowPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 24px rgba(180, 132, 255, 0.5);
	}
	50% {
		transform: scale(1.08);
		box-shadow: 0 0 36px rgba(180, 132, 255, 0.8);
	}
}
/* === 메인 그리드 === */
.diff-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.diff-content .label-uppercase {
	margin-bottom: 18px;
}
.diff-title {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin-bottom: 24px;
}
.diff-title .accent {
	background: linear-gradient(135deg, var(--magic-pink) 0%, var(--lime-green) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.diff-text {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.70;
	margin-bottom: 32px;
}
/* === 차별점 3가지 카드 (기존 list → 카드형) === */
.diff-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.diff-card {
	padding: 18px 20px;
	background: linear-gradient(135deg, rgba(54, 45, 89, 0.40), rgba(31, 22, 51, 0.55));
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-md);
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	align-items: flex-start;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
	position: relative;
	overflow: hidden;
}
.diff-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--magic-pink), var(--lime-green));
	opacity: 0;
	transition: opacity 0.25s;
}
.diff-card:hover {
	transform: translateX(4px);
	border-color: rgba(194, 239, 78, 0.45);
	background: linear-gradient(135deg, rgba(54, 45, 89, 0.55), rgba(31, 22, 51, 0.70));
}
.diff-card:hover::before {
	opacity: 1;
}
.diff-card-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple));
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}
.diff-card:nth-child(2) .diff-card-num {
	background: linear-gradient(135deg, var(--magic-purple), var(--lime-green));
	color: var(--bg-deepest);
}
.diff-card:nth-child(3) .diff-card-num {
	background: linear-gradient(135deg, var(--lime-green), var(--coral));
	color: var(--bg-deepest);
}
.diff-card-body {
	min-width: 0;
}
.diff-card-title {
	font-size: 15px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.40;
	letter-spacing: -0.015em;
	margin-bottom: 6px;
}
.diff-card-desc {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.55;
}
.diff-card-desc strong {
	color: var(--lime-green);
	font-weight: 600;
}
/* === 자기강화 루프 시각화 — 강화 버전 === */
.loop-viz {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 480px;
	margin: 0 auto;
}
/* 외곽 글로우 후광 */
.loop-viz::before {
	content: '';
	position: absolute;
	inset: 5%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(180, 132, 255, 0.15) 0%, transparent 65%);
	filter: blur(40px);
	z-index: 0;
	animation: bgGlow 4s ease-in-out infinite;
}
@keyframes bgGlow {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50%      { opacity: 1.0; transform: scale(1.05); }
}
.loop-viz svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	position: relative;
	z-index: 1;
}
/* 노드 카드 — 더 강한 인상 */
.loop-node {
	position: absolute;
	background: linear-gradient(135deg, rgba(31, 22, 51, 0.98), rgba(21, 15, 35, 0.95));
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-md);
	padding: 13px 15px;
	text-align: center;
	min-width: 130px;
	max-width: 140px;
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-card), 0 0 0 1px rgba(194, 239, 78, 0);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	z-index: 3;
}
.loop-node:hover {
	transform: scale(1.08);
	border-color: var(--lime-green);
	box-shadow: var(--shadow-card), 0 0 24px var(--lime-glow), 0 0 0 1px rgba(194, 239, 78, 0.5);
}
/* 순차 활성화 애니메이션 — 노드별 0.8초 간격 */
.loop-node.is-active {
	border-color: var(--lime-green);
	box-shadow: var(--shadow-card), 0 0 30px var(--lime-glow);
}
.loop-node.is-active .loop-node-num {
	color: var(--magic-pink);
}
.loop-node-num {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--lime-green);
	letter-spacing: 0.1em;
	margin-bottom: 5px;
	transition: color 0.3s;
}
.loop-node-text {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.40;
	letter-spacing: -0.01em;
}
.loop-node-1 { top: 0; left: 50%; transform: translateX(-50%); }
.loop-node-2 { top: 50%; right: -10px; transform: translateY(-50%); }
.loop-node-3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.loop-node-4 { top: 50%; left: -10px; transform: translateY(-50%); }
/* 호버 시에도 transform 유지 */
.loop-node-1:hover { transform: translateX(-50%) scale(1.08); }
.loop-node-2:hover { transform: translateY(-50%) scale(1.08); }
.loop-node-3:hover { transform: translateX(-50%) scale(1.08); }
.loop-node-4:hover { transform: translateY(-50%) scale(1.08); }
/* 중심 노드 — 더 강한 임팩트 */
.loop-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 900;
	color: #fff;
	text-align: center;
	line-height: 1.25;
	letter-spacing: 0.02em;
	box-shadow:
		0 0 60px var(--lime-glow),
		0 0 100px rgba(180, 132, 255, 0.5),
		0 10px 40px rgba(180, 132, 255, 0.4),
		inset 0 0 20px rgba(255, 255, 255, 0.15);
	z-index: 2;
}
/* 중심 회전 링 */
.loop-center::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1.5px dashed rgba(194, 239, 78, 0.5);
	animation: spinRing 12s linear infinite;
}
@keyframes spinRing {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.loop-center::after {
	content: '';
	position: absolute;
	inset: -16px;
	border-radius: 50%;
	border: 1px solid rgba(255, 140, 195, 0.30);
	animation: spinRing 20s linear infinite reverse;
}
@media (max-width: 992px) {
	.diff-impact-headline {
		grid-template-columns: 1fr;
		gap: 16px;
		max-width: 480px;
	}
	.diff-impact-arrow {
		transform: rotate(90deg);
		margin: 0 auto;
	}
	.diff-impact-side {
		padding: 18px 22px;
	}
}
@media (max-width: 480px) {
	.loop-node {
		min-width: 110px;
		padding: 10px 12px;
	}
	.loop-node-text {
		font-size: 11px;
	}
	.loop-center {
		width: 90px;
		height: 90px;
		font-size: 10px;
	}
}

/* ==========================================================================
   8. Features Section
   ========================================================================== */
.features {
	padding-top: 120px;
}

.feature {
	display: grid;
	/* 텍스트 1 : 영상 1.4 — 와이드 영상의 디테일을 살리기 위해 영상 영역 확장 */
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: center;
	padding: 60px 0;
}
/* Features 섹션만 컨테이너 폭 확장 — 와이드 영상 디테일 확보용 */
.features .container {
	max-width: 1360px;  /* 기본 1200px → 1360px */
}
/* 짝수 행에서는 영상이 좌측으로 가므로 비율을 뒤집어줌 */
.feature:nth-child(even) {
	grid-template-columns: 1.4fr 1fr;
}

.feature:nth-child(even) .feature-visual {
	order: -1;
}

.feature-content .label-uppercase {
	margin-bottom: 18px;
}

.feature-pain {
	display: inline-block;
	margin-top: 16px;
	margin-bottom: 8px;
	padding: 10px 16px;
	background: linear-gradient(90deg, rgba(255, 178, 135, 0.10), rgba(255, 178, 135, 0));
	border-left: 3px solid var(--coral);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--coral);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.feature-pain::before {
	content: '"';
	margin-right: 4px;
	opacity: 0.6;
}

.feature-pain::after {
	content: '"';
	margin-left: 4px;
	opacity: 0.6;
}

.feature-title {
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.20;
	letter-spacing: -0.025em;
	margin: 18px 0 22px;
}

.feature-desc {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.7;
	margin-bottom: 28px;
}

.feature-visual {
	position: relative;
}

.feature-screenshot {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, rgba(54, 45, 89, 0.4), rgba(21, 15, 35, 0.8));
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	display: block;
	box-shadow: var(--shadow-card);
	object-fit: cover;
}
/* 영상 임베드 컨테이너 (Canva iframe — 영상 원본 비율 2450:1080에 맞춤) */
.feature-video {
	position: relative;
	width: 100%;
	/* 영상 원본 비율 정확히 적용: 2450 / 1080 = 2.2685 */
	aspect-ratio: 2450 / 1080;
	background: var(--bg-deepest);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.feature-video iframe,
.feature-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	display: block;
	/* cover로 변경 — 영상이 컨테이너 전체를 채우도록 */
	object-fit: cover;
	/* 살짝 확대해서 가장자리 흰색 라인을 컨테이너 밖으로 밀어냄
	   1.005 = 0.5% 확대 (2450px 기준 약 12px씩 잘림 — 흰색 2-5px 충분히 가림) */
	transform: scale(1.020);
}

.feature-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple));
	border-radius: var(--radius-lg);
	z-index: -1;
	opacity: 0.15;
	filter: blur(40px);
}

.feature[data-accent="lime"] .feature-visual::before {
	background: var(--lime-green);
	opacity: 0.20;
}

.feature[data-accent="coral"] .feature-visual::before {
	background: var(--coral);
	opacity: 0.20;
}

.feature[data-accent="pink"] .feature-visual::before {
	background: var(--pink);
	opacity: 0.20;
}

.feature[data-accent="violet"] .feature-visual::before {
	background: var(--magic-purple);
	opacity: 0.25;
}

/*
.feature[data-accent="aurora"] .feature-visual::before {
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	opacity: 0.30;
	filter: blur(50px);
}

.feature[data-accent="aurora"] .patent-badge {
	background: linear-gradient(90deg, rgba(255, 140, 195, 0.12), rgba(194, 239, 78, 0.12));
	border-color: rgba(255, 140, 195, 0.40);
	color: #fff;
}

.feature[data-accent="aurora"] .patent-badge::before {
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	box-shadow: 0 0 8px rgba(255, 140, 195, 0.45);
}
*/

/* ==========================================================================
   9. Comparison Table (vs 해피톡/채널톡)
   ========================================================================== */
.comparison {
	background: var(--bg-deeper);
	border-top: 1px solid var(--border-purple-dim);
	border-bottom: 1px solid var(--border-purple-dim);
}

.compare-table {
	max-width: 1000px;
	margin: 0 auto;
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-deepest);
}

.compare-row {
	display: grid;
	grid-template-columns: 200px 1fr 1fr;
	border-bottom: 1px solid var(--border-purple-dim);
}

.compare-row:last-child {
	border-bottom: none;
}

.compare-row.is-header {
	background: rgba(54, 45, 89, 0.4);
}

.compare-cell {
	padding: 22px 24px;
	font-size: 15px;
	line-height: 1.5;
	border-right: 1px solid var(--border-purple-dim);
}

.compare-cell:last-child {
	border-right: none;
}

.compare-cell.label {
	font-weight: 600;
	color: var(--text-tertiary);
	background: rgba(21, 15, 35, 0.5);
}

.compare-cell.others {
	color: var(--text-tertiary);
}

.compare-cell.magictalk {
	color: var(--text-primary);
	font-weight: 500;
	background: linear-gradient(90deg, rgba(194, 239, 78, 0.04), rgba(180, 132, 255, 0.04));
}

.compare-row.is-header .compare-cell {
	color: var(--text-primary);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.compare-row.is-header .compare-cell.magictalk {
	color: var(--lime-green);
}

.compare-row.is-header .compare-cell.others {
	color: var(--text-tertiary);
}

/* ==========================================================================
   10. Social Proof
   ========================================================================== */
.social-proof {
	text-align: center;
}

.proof-badges {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.proof-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: var(--glass-white);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

.proof-badge::before {
	content: '✓';
	color: var(--lime-green);
	font-weight: 800;
}

.client-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--border-purple-dim);
	border: 1px solid var(--border-purple-dim);
	border-radius: var(--radius-lg);
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
}

.client-logo {
	background: rgba(21, 15, 35, 0.85);
	padding: 26px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--text-tertiary);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.01em;
	line-height: 1.35;
	transition: color 0.25s, background 0.25s;
}

.client-logo:hover {
	color: var(--text-primary);
	background: rgba(54, 45, 89, 0.3);
}

/* ==========================================================================
   11. Pricing / CTA
   ========================================================================== */
.pricing {
	padding-top: 120px;
}

.pricing-card {
	max-width: 720px;
	margin: 0 auto;
	background: linear-gradient(180deg, rgba(54, 45, 89, 0.4) 0%, rgba(21, 15, 35, 0.6) 100%);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	padding: 56px 48px;
	text-align: center;
	position: relative;
	box-shadow: var(--shadow-ambient), var(--shadow-card);
}

.pricing-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	background: linear-gradient(135deg, var(--lime-green), var(--magic-pink), var(--magic-purple));
	border-radius: var(--radius-lg);
	z-index: -1;
	opacity: 0.5;
	filter: blur(30px);
}

.pricing-tag {
	display: inline-block;
	padding: 6px 16px;
	background: var(--lime-green);
	color: var(--bg-deepest);
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.pricing-title {
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	line-height: 1.20;
	letter-spacing: -0.025em;
	margin-bottom: 16px;
}

.pricing-subtitle {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 36px;
}

.pricing-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin-bottom: 8px;
}

.pricing-price-main {
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, #fff 0%, var(--magic-purple) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pricing-price-unit {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-secondary);
}

.pricing-price-old {
	font-size: 16px;
	color: var(--text-tertiary);
	text-decoration: line-through;
	margin-bottom: 36px;
}

.pricing-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.pricing-actions .btn {
	padding: 16px 32px;
	font-size: 15px;
}

.pricing-note {
	margin-top: 28px;
	font-size: 13px;
	color: var(--text-tertiary);
}

.pricing-note strong {
	color: var(--lime-green);
}

/* Pricing 듀얼 트랙 (SaaS / Enterprise) */
.pricing-tracks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 36px;
	margin-bottom: 8px;
}

.pricing-track {
	background: rgba(21, 15, 35, 0.55);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-md);
	padding: 28px 24px;
	text-align: left;
	position: relative;
	transition: border-color 0.25s, transform 0.25s;
}

.pricing-track:hover {
	border-color: var(--lime-green);
	transform: translateY(-3px);
}

.pricing-track.is-recommended {
	border-color: rgba(194, 239, 78, 0.45);
	background: linear-gradient(180deg, rgba(194, 239, 78, 0.06) 0%, rgba(21, 15, 35, 0.55) 100%);
}

.pricing-track-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lime-green);
	margin-bottom: 10px;
}

.pricing-track-name {
	font-size: 20px;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 6px;
	letter-spacing: -0.02em;
}

.pricing-track-target {
	font-size: 13px;
	color: var(--text-tertiary);
	margin-bottom: 18px;
	line-height: 1.5;
}

.pricing-track-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 6px;
}

.pricing-track-price-num {
	font-size: 28px;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.03em;
	line-height: 1;
}

.pricing-track-price-unit {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-tertiary);
}

/* 약속 기반 가격 (50만원 대신 'TCO 50% 절감 보장') */
.pricing-track-promise {
	margin-bottom: 14px;
	padding: 14px 16px;
	background: linear-gradient(135deg, rgba(194, 239, 78, 0.10), rgba(194, 239, 78, 0.04));
	border: 1px solid rgba(194, 239, 78, 0.35);
	border-radius: var(--radius-sm);
}

.pricing-track-promise-num {
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, var(--lime-green), var(--magic-pink));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.04em;
	display: block;
	margin-bottom: 6px;
}

.pricing-track-promise-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.45;
}

.pricing-track-includes {
	font-size: 12px;
	color: var(--text-tertiary);
	line-height: 1.55;
	margin-bottom: 22px;
	min-height: 36px;
}

.pricing-track .btn {
	width: 100%;
	padding: 12px 20px;
	font-size: 13px;
}

/* "정확히 절반만 받겠습니다" 강조 인용구 박스 */
.half-quote {
	max-width: 880px;
	margin: 36px auto 0;
	padding: 32px 36px;
	background: linear-gradient(135deg, rgba(180, 132, 255, 0.10), rgba(255, 140, 195, 0.06));
	border: 1px solid rgba(180, 132, 255, 0.35);
	border-radius: var(--radius-lg);
	text-align: center;
	position: relative;
}

.half-quote::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 30px;
	font-family: Georgia, serif;
	font-size: 80px;
	line-height: 1;
	color: var(--magic-purple);
	opacity: 0.4;
	pointer-events: none;
}

.half-quote-text {
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.half-quote-text em {
	font-style: normal;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.half-quote-attr {
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

/* For Enterprise 메뉴 강조 (네비게이션) */
.nav-menu .nav-enterprise {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	background: rgba(194, 239, 78, 0.08);
	border: 1px solid rgba(194, 239, 78, 0.25);
	border-radius: var(--radius-pill);
	color: var(--lime-green) !important;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.nav-menu .nav-enterprise:hover {
	background: rgba(194, 239, 78, 0.15);
}

.nav-menu .nav-enterprise::before {
	content: '◆';
	font-size: 9px;
}

/* Enterprise Pillar 섹션 (보안/안정성/확장성) */
.enterprise {
	background: linear-gradient(180deg, var(--bg-deeper) 0%, var(--bg-primary) 100%);
	border-top: 1px solid var(--border-purple-dim);
	border-bottom: 1px solid var(--border-purple-dim);
}

.enterprise-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto 48px;
}

.pillar {
	padding: 36px 30px;
	background: rgba(31, 22, 51, 0.55);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	transition: transform 0.3s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
}

.pillar:hover {
	transform: translateY(-4px);
	border-color: var(--lime-green);
}

.pillar::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.15;
	pointer-events: none;
}

.pillar.is-security::before  { background: var(--lime-green); }
.pillar.is-reliability::before { background: var(--magic-pink); }
.pillar.is-scalability::before { background: var(--magic-purple); }

.pillar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: rgba(54, 45, 89, 0.6);
	border: 1px solid var(--border-purple);
	margin-bottom: 18px;
	color: var(--lime-green);
}

.pillar.is-reliability .pillar-icon { color: var(--magic-pink); }
.pillar.is-scalability .pillar-icon { color: var(--magic-purple); }

.pillar-tag {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.pillar-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.025em;
	margin-bottom: 14px;
	line-height: 1.30;
}

.pillar-desc {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 18px;
}

.pillar-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pillar-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.pillar-list li::before {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 4px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
	color: var(--lime-green);
}

.pillar.is-reliability .pillar-list li::before { color: var(--magic-pink); }
.pillar.is-scalability .pillar-list li::before { color: var(--magic-purple); }

/* 5인 이상 자격 안내 박스 */
.eligibility {
	max-width: 880px;
	margin: 28px auto 0;
	padding: 22px 28px;
	background: rgba(54, 45, 89, 0.45);
	border: 1px dashed rgba(194, 239, 78, 0.35);
	border-radius: var(--radius-md);
}

.eligibility-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--lime-green);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.eligibility-text {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.65;
}

.eligibility-text strong {
	color: var(--text-primary);
	font-weight: 600;
}

.eligibility-text .small-team {
	display: block;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--border-purple-dim);
	color: var(--text-tertiary);
	font-size: 12.5px;
}

/* ============================================
   Feature Comparison Matrix (vs H사 / C사)
   ============================================ */
.feature-matrix {
	max-width: 1180px;
	margin: 0 auto;
	background: var(--bg-deepest);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.matrix-header {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	background: linear-gradient(180deg, rgba(54, 45, 89, 0.5) 0%, rgba(31, 22, 51, 0.7) 100%);
	border-bottom: 2px solid var(--border-purple);
}

.matrix-header-cell {
	padding: 18px 20px;
	text-align: center;
	border-right: 1px solid var(--border-purple-dim);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.matrix-header-cell:last-child {
	border-right: none;
}

.matrix-header-cell.category {
	text-align: left;
	color: var(--text-tertiary);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding-left: 26px;
}

.matrix-header-cell.competitor {
	color: var(--text-tertiary);
	font-size: 14px;
}

.matrix-header-cell.competitor small {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--text-tertiary);
	opacity: 0.7;
	margin-top: 3px;
	letter-spacing: 0.05em;
}

.matrix-header-cell.magictalk {
	background: linear-gradient(135deg, rgba(194, 239, 78, 0.10), rgba(180, 132, 255, 0.10));
	color: var(--lime-green);
	font-size: 14px;
	position: relative;
}

.matrix-header-cell.magictalk small {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--magic-pink);
	margin-top: 3px;
	letter-spacing: 0.05em;
	text-transform: none;
	opacity: 0.85;
}

.matrix-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	border-bottom: 1px solid var(--border-purple-dim);
	transition: background 0.2s;
}

.matrix-row:last-child {
	border-bottom: none;
}

.matrix-row:hover {
	background: rgba(54, 45, 89, 0.18);
}

.matrix-row.is-section-header {
	background: linear-gradient(90deg, rgba(54, 45, 89, 0.4), transparent);
}

.matrix-row.is-section-header .matrix-cell {
	padding-top: 22px;
	padding-bottom: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--lime-green);
	border-right: none;
}

.matrix-cell {
	padding: 18px 20px;
	font-size: 13.5px;
	line-height: 1.55;
	border-right: 1px solid var(--border-purple-dim);
	color: var(--text-secondary);
}

.matrix-cell:last-child {
	border-right: none;
}

.matrix-cell.label {
	color: var(--text-primary);
	font-weight: 600;
	padding-left: 26px;
	background: rgba(21, 15, 35, 0.55);
	font-size: 14px;
}

.matrix-cell.competitor {
	color: var(--text-tertiary);
	text-align: center;
}

.matrix-cell.magictalk {
	color: var(--text-primary);
	background: linear-gradient(90deg, rgba(194, 239, 78, 0.04), rgba(180, 132, 255, 0.04));
	font-weight: 500;
	text-align: center;
}

.matrix-cell.magictalk strong {
	color: var(--lime-green);
	font-weight: 700;
}

.matrix-cell.magictalk .patent-mark {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 9px;                  /* ← 세로 1→3, 가로 7→9 (한글 숨통 트기) */
	background: rgba(194, 239, 78, 0.15);
	border: 1px solid rgba(194, 239, 78, 0.40);  /* ← 0.35→0.40 (살짝 또렷하게) */
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);      /* ← mono → sans (한글 폰트로 변경, Noto Sans KR 사용) */
	font-size: 11px;                    /* ← 9.5→11 (한글 가독선 최소치) */
	font-weight: 700;
	color: var(--lime-green);
	letter-spacing: 0.02em;             /* ← 0.05→0.02 (한글은 자간 넓히면 오히려 답답함) */
	line-height: 1;                     /* ← 추가: 패딩 정확히 계산되도록 */
	vertical-align: middle;
	white-space: nowrap;                /* ← 추가: "특허"가 줄바꿈되지 않도록 */
}

.matrix-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: middle;
	font-size: 10px;
	font-weight: 800;
}

.matrix-icon.yes  { background: rgba(194, 239, 78, 0.20); color: var(--lime-green); }
.matrix-icon.no   { background: rgba(231, 76, 60, 0.18); color: #ff7e7e; }
.matrix-icon.partial { background: rgba(255, 178, 135, 0.20); color: var(--coral); }

.matrix-cell .competitor-note {
	display: block;
	font-size: 11.5px;
	color: var(--text-tertiary);
	margin-top: 3px;
	opacity: 0.75;
}

/* ==========================================================================
   비교표 면책 공지 (상단) + 출처 행 (하단) — 법적 안전장치
   ========================================================================== */
/* 면책 박스 — 매트릭스 위쪽 배치로 "고지의 충분성" 확보
   비교광고 심사지침 대응: 출처·기준일·자체 분석임을 명시 */
.matrix-disclaimer-top {
	max-width: 1180px;
	margin: 0 auto 24px;
	padding: 12px 18px;
	background: rgba(255, 178, 135, 0.06);
	border: 1px solid rgba(255, 178, 135, 0.25);
	border-radius: var(--radius-md);
	display: flex;
	align-items: flex-start;        /* center → flex-start (텍스트 길어질 때 SVG 위치 안정) */
	gap: 10px;
	font-size: 12.5px;
	color: var(--text-tertiary);
	line-height: 1.55;
}
.matrix-disclaimer-top svg {
	flex-shrink: 0;
	color: var(--coral);
	margin-top: 3px;                /* baseline과 텍스트 정렬 맞춤 */
}
.matrix-disclaimer-top strong {
	color: var(--text-secondary);
	font-weight: 600;
}

/* 출처 행 — 매트릭스 마지막에 배치, 시각적으로 살짝 차별화 */
.matrix-row.matrix-source-row {
	background: rgba(54, 45, 89, 0.20);   /* 다른 행보다 살짝 어둡게 */
	border-top: 1px dashed var(--border-purple-dim);
}
.matrix-row.matrix-source-row .matrix-cell {
	padding: 14px 20px;                   /* 일반 행보다 컴팩트 */
	font-size: 12px;                      /* 13.5 → 12 (보조 정보 톤) */
	color: var(--text-tertiary);
	font-style: italic;
}
.matrix-row.matrix-source-row .matrix-cell.label {
	background: rgba(21, 15, 35, 0.65);
	color: var(--text-secondary);
	font-style: normal;
	font-weight: 600;
}
.matrix-row.matrix-source-row .matrix-cell.magictalk {
	color: var(--text-secondary);         /* 자사 부분만 약간 더 또렷하게 */
	background: rgba(194, 239, 78, 0.04);
}

/* 모바일 대응 */
@media (max-width: 768px) {
	.matrix-disclaimer-top {
		padding: 10px 14px;
		font-size: 12px;
		gap: 8px;
	}
	/* 모바일 카드 스택 모드에서 출처 행도 다른 행과 동일하게 처리되도록 */
	.matrix-row.matrix-source-row .matrix-cell {
		font-style: normal;             /* 모바일에선 italic 빼서 가독성 확보 */
		padding: 10px 8px;
	}
}
/* ==========================================================================
   카카오톡 브랜드 칩 — 매트릭스 라벨용
   ========================================================================== */
/* 카카오 공식 컬러(#FEE500)로 행 자체에 브랜드 시그널 부여
   세 회사 다 패리티지만 행을 한눈에 식별하게 만드는 시각적 앵커 역할 */
.kakao-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	background: #FEE500;
	border-radius: var(--radius-sm);
	color: #3C1E1E;  /* 카카오 공식 텍스트 컬러 (어두운 갈색) */
	vertical-align: middle;
	flex-shrink: 0;
}
.kakao-chip svg {
	width: 13px;
	height: 13px;
	display: block;
}
/* label 셀이 flex가 아니라서 정렬 맞춤용 */
.matrix-cell.label {
	display: flex;
	align-items: center;
}
/* 모바일 카드 스택 모드에서도 정렬 유지 */
@media (max-width: 768px) {
	.matrix-cell.label {
		display: block;
	}
	.kakao-chip {
		margin-right: 6px;
	}
}

/* ==========================================================================
   MagicShield 보안 섹션 — 핵심 6개 + 펼치기 토글
   ========================================================================== */
/* 보안 섹션 헤더에만 추가 강조 (다른 섹션 헤더와 차별화) */
.matrix-row.is-section-header.is-shield-header .matrix-cell {
	background: linear-gradient(90deg, rgba(194, 239, 78, 0.10), rgba(180, 132, 255, 0.06));
	color: var(--lime-green);
}
.matrix-row.is-section-header.is-shield-header {
	scroll-margin-top: 100px;   /* ★ 추가: nav(80px) + 여유공간 20px */
}
.matrix-row.is-section-header.is-shield-header .matrix-cell {
	background: linear-gradient(90deg, rgba(194, 239, 78, 0.10), rgba(180, 132, 255, 0.06));
	color: var(--lime-green);
}
.shield-badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;                              /* ← 2px 9px → 3px 10px (한글 숨통) */
	background: rgba(194, 239, 78, 0.12);           /* ← 단색 반투명 (텍스트 가독 우선) */
	border: 1px solid rgba(194, 239, 78, 0.40);
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);                  /* ← mono → sans (한글 폰트) */
	font-size: 11px;                                /* ← 10px → 11px */
	font-weight: 700;
	letter-spacing: 0.02em;                         /* ← 0.08em → 0.02em (한글은 좁게) */
	color: var(--lime-green);                       /* ← 단순 컬러로 명확하게 */
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}
/* 펼치기 영역 — 슬라이드 다운 애니메이션 지원 */
.matrix-shield-more {
	display: none;
}
.matrix-shield-more.is-open {
	display: block;
	animation: shieldExpand 0.4s ease-out;
}
@keyframes shieldExpand {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* 토글 행 — 배경 약간 다르게 */
.matrix-shield-toggle-row {
	background: linear-gradient(90deg, rgba(54, 45, 89, 0.20), rgba(31, 22, 51, 0.30));
}
.matrix-shield-toggle-row:hover {
	background: linear-gradient(90deg, rgba(54, 45, 89, 0.35), rgba(31, 22, 51, 0.45)) !important;
}
/* 펼치기 버튼 */
.shield-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	background: rgba(194, 239, 78, 0.08);
	border: 1px solid rgba(194, 239, 78, 0.35);
	border-radius: var(--radius-pill);
	color: var(--lime-green);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: all 0.25s ease;
}
.shield-toggle-btn:hover {
	background: rgba(194, 239, 78, 0.15);
	border-color: rgba(194, 239, 78, 0.60);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(194, 239, 78, 0.15);
}
.shield-toggle-icon {
	transition: transform 0.3s ease;
}
/* 펼쳤을 때 화살표 180도 회전 */
.shield-toggle-btn[aria-expanded="true"] .shield-toggle-icon {
	transform: rotate(180deg);
}

/* ============================================
   Magic Insight Engine Section
   ============================================ */
.insight {
	background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-deeper) 100%);
	position: relative;
	overflow: hidden;
}

.insight::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(180, 132, 255, 0.10) 0%, transparent 60%);
	pointer-events: none;
}

.insight::after {
	content: '';
	position: absolute;
	bottom: 10%;
	left: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(194, 239, 78, 0.08) 0%, transparent 60%);
	pointer-events: none;
}

.insight-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}

.insight-card {
	background: linear-gradient(180deg, rgba(54, 45, 89, 0.45) 0%, rgba(31, 22, 51, 0.65) 100%);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	transition: transform 0.3s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
}

.insight-card:hover {
	transform: translateY(-4px);
	border-color: var(--magic-purple);
}

.insight-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-purple-dim);
}

.insight-card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--magic-pink), var(--magic-purple));
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 800;
	flex-shrink: 0;
}

.insight-card-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.02em;
	line-height: 1.30;
}

.insight-row {
	margin-bottom: 14px;
	padding-left: 18px;
	position: relative;
}

.insight-row::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.insight-row.is-before::before { background: rgba(231, 76, 60, 0.55); }
.insight-row.is-after::before  { background: var(--lime-green); box-shadow: 0 0 8px var(--lime-glow); }

.insight-row-label {
	display: inline-block;
	margin-bottom: 4px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.insight-row.is-before .insight-row-label { color: #ff7e7e; }
.insight-row.is-after  .insight-row-label { color: var(--lime-green); }

.insight-row-text {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.insight-row-text strong {
	color: var(--text-primary);
	font-weight: 600;
}

.insight-benefit {
	margin-top: 18px;
	padding: 14px 16px;
	background: linear-gradient(90deg, rgba(194, 239, 78, 0.10), rgba(180, 132, 255, 0.06));
	border: 1px solid rgba(194, 239, 78, 0.30);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	gap: 10px;
}

.insight-benefit-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--lime-green);
}

.insight-benefit-text {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.insight-tagline {
	max-width: 720px;
	margin: 48px auto 0;
	padding: 28px 32px;
	text-align: center;
	background: rgba(31, 22, 51, 0.55);
	border: 1px solid rgba(180, 132, 255, 0.30);
	border-radius: var(--radius-lg);
	position: relative;
	z-index: 1;
}

.insight-tagline-text {
	font-size: clamp(16px, 1.8vw, 19px);
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.55;
	letter-spacing: -0.015em;
}

.insight-tagline-text em {
	font-style: normal;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.insight-tagline-meta {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lime-green);
}

/* ============================================
   Magic Insight Engine 섹션 (8번째 특허 - 보고서/PPT/매뉴얼 자동 생성)
   ============================================ */
.insight {
	background:
		radial-gradient(ellipse at 70% 0%, rgba(255, 140, 195, 0.10) 0%, transparent 50%),
		radial-gradient(ellipse at 20% 100%, rgba(194, 239, 78, 0.08) 0%, transparent 50%),
		var(--bg-primary);
	position: relative;
	overflow: hidden;
}

.insight::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, transparent, var(--lime-green));
	opacity: 0.5;
}

.insight-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	background: linear-gradient(135deg, rgba(255, 140, 195, 0.10), rgba(194, 239, 78, 0.08));
	border: 1px solid rgba(255, 140, 195, 0.30);
	border-radius: var(--radius-pill);
	margin-bottom: 18px;
}

.insight-eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--magic-pink);
	box-shadow: 0 0 10px rgba(255, 140, 195, 0.6);
	animation: pulse 2s ease-in-out infinite;
}

.insight-eyebrow-text {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.insight-tagline {
	max-width: 880px;
	margin: 32px auto 56px;
	padding: 18px 28px;
	background: rgba(31, 22, 51, 0.55);
	border: 1px solid var(--border-purple);
	border-left: 3px solid var(--magic-pink);
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.55;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}

.insight-tagline-icon {
	flex-shrink: 0;
	font-size: 22px;
}

.insight-tagline em {
	font-style: normal;
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.insight-patent-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: linear-gradient(135deg, rgba(194, 239, 78, 0.12), rgba(255, 140, 195, 0.08));
	border: 1px solid rgba(194, 239, 78, 0.40);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lime-green);
	margin-left: auto;
	flex-shrink: 0;
	white-space: nowrap;
}

.insight-patent-badge::before {
	content: '◆';
	font-size: 8px;
}

/* 3개 카드 그리드 */
.insight-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}

.insight-card {
	padding: 36px 28px 32px;
	background: linear-gradient(180deg, rgba(54, 45, 89, 0.40) 0%, rgba(31, 22, 51, 0.70) 100%);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.insight-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--magic-pink), var(--magic-purple), var(--lime-green));
	opacity: 0.6;
	transition: opacity 0.3s;
}

.insight-card:hover {
	transform: translateY(-6px);
	border-color: var(--magic-pink);
}

.insight-card:hover::before {
	opacity: 1;
}

.insight-card-num {
	position: absolute;
	top: 18px;
	right: 24px;
	font-family: var(--font-mono);
	font-size: 56px;
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(180deg, rgba(180, 132, 255, 0.20), rgba(180, 132, 255, 0.04));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.04em;
	pointer-events: none;
}

.insight-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: rgba(54, 45, 89, 0.65);
	border: 1px solid var(--border-purple);
	margin-bottom: 18px;
	color: var(--magic-pink);
	position: relative;
	z-index: 1;
}

.insight-card:nth-child(2) .insight-card-icon { color: var(--magic-purple); }
.insight-card:nth-child(3) .insight-card-icon { color: var(--lime-green); }

.insight-card-tag {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.insight-card-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.02em;
	line-height: 1.30;
	margin-bottom: 22px;
}

.insight-card-title strong {
	background: linear-gradient(135deg, var(--magic-pink), var(--lime-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.insight-ba {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.insight-ba-row {
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	line-height: 1.55;
}

.insight-ba-before {
	background: rgba(231, 76, 60, 0.06);
	border: 1px solid rgba(231, 76, 60, 0.18);
	color: var(--text-tertiary);
}

.insight-ba-after {
	background: rgba(194, 239, 78, 0.08);
	border: 1px solid rgba(194, 239, 78, 0.30);
	color: var(--text-secondary);
}

.insight-ba-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.insight-ba-before .insight-ba-label { color: #ff7e7e; }
.insight-ba-after .insight-ba-label { color: var(--lime-green); }

.insight-benefit {
	padding: 16px 18px;
	background: linear-gradient(135deg, rgba(194, 239, 78, 0.10), rgba(180, 132, 255, 0.06));
	border: 1px solid rgba(194, 239, 78, 0.30);
	border-radius: var(--radius-md);
	text-align: center;
}

.insight-benefit-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lime-green);
	margin-bottom: 6px;
}

.insight-benefit-text {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.40;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

.insight-benefit-text .highlight {
	background: linear-gradient(135deg, var(--lime-green), var(--magic-pink));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 메일 노출 강조 박스 */
.mail-cta {
	margin-top: 36px;
	padding: 22px 28px;
	background: rgba(54, 45, 89, 0.35);
	border: 1px dashed var(--border-purple);
	border-radius: var(--radius-md);
	text-align: center;
}

.mail-cta-text {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 10px;
}

.mail-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--lime-green);
	text-decoration: none;
	letter-spacing: -0.01em;
	transition: opacity 0.2s;
}

.mail-cta-link:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/* 윈백 긴급 프로모션 배너 */
.winback-banner {
	max-width: 1000px;
	margin: 0 auto 48px;
	padding: 32px 36px;
	background: linear-gradient(135deg, rgba(250, 127, 170, 0.08), rgba(255, 178, 135, 0.06));
	border: 1px solid rgba(255, 178, 135, 0.30);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
}

.winback-banner::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(250, 127, 170, 0.15) 0%, transparent 60%);
	pointer-events: none;
}

.winback-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.winback-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: var(--coral);
	color: var(--bg-deepest);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.winback-tag::before {
	content: '🔥';
	font-size: 12px;
}

.winback-limit {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--coral);
	letter-spacing: 0.05em;
}

.winback-title {
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.30;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}

.winback-perks {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.winback-perks li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.winback-perks li strong {
	color: var(--text-primary);
	font-weight: 600;
}

.winback-perks li::before {
	content: '';
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: var(--coral);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Hero 가격 강조 라인 (서브 타이틀 보조) */
.hero-price-strike {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 10px 20px;
	background: rgba(54, 45, 89, 0.35);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-pill);
	font-size: 14px;
	color: var(--text-secondary);
}

.hero-price-strike strong {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--lime-green);
}

.hero-price-strike .strike {
	text-decoration: line-through;
	color: var(--text-tertiary);
}

/* 차별화 섹션의 강조 인용구 박스 */
.diff-quote {
	padding: 18px 22px;
	margin: 0 0 24px;
	background: linear-gradient(90deg, rgba(250, 127, 170, 0.10), transparent);
	border-left: 3px solid var(--pink);
	border-radius: 4px;
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.55;
	letter-spacing: -0.015em;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.footer {
	background: var(--bg-deepest);
	border-top: 1px solid var(--border-purple-dim);
	padding: 64px 0 40px;
	margin-top: 80px;
}

.footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
}

.footer-brand img {
	height: 32px;
	margin-bottom: 16px;
}

.footer-brand p {
	font-size: 13px;
	color: var(--text-tertiary);
	line-height: 1.6;
	max-width: 320px;
}

.footer-col h4 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-primary);
	margin-bottom: 16px;
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-col a {
	font-size: 14px;
	color: var(--text-tertiary);
	transition: color 0.2s;
}

.footer-col a:hover {
	color: var(--text-primary);
}

.footer-bottom {
	padding-top: 28px;
	border-top: 1px solid var(--border-purple-dim);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--text-tertiary);
	flex-wrap: wrap;
	gap: 16px;
}

/* ==========================================================================
   13. 애니메이션
   ========================================================================== */
@keyframes floatIn {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}

.loop-center {
	animation: pulseCenter 3s ease-in-out infinite;
}

@keyframes pulseCenter {
	0%, 100% {
		box-shadow: 0 0 60px var(--lime-glow), 0 10px 40px rgba(180, 132, 255, 0.4);
	}
	50% {
		box-shadow: 0 0 90px var(--lime-glow), 0 10px 60px rgba(180, 132, 255, 0.6);
	}
}

/* 스크롤 진입 애니메이션 */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   14. 반응형
   ========================================================================== */
@media (max-width: 992px) {
	.diff-grid,
	.feature {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.feature:nth-child(even) .feature-visual {
		order: 0;
	}

	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}

	.enterprise-pillars {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.insight-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.insight-cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.matrix-header,
	.matrix-row {
		grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
		font-size: 12px;
	}

	.matrix-cell,
	.matrix-header-cell {
		padding: 14px 12px;
		font-size: 12.5px;
	}

	.matrix-cell.label,
	.matrix-header-cell.category {
		padding-left: 14px;
	}
}

@media (max-width: 768px) {
	.nav-menu {
		display: none;
	}

	.nav-cta .btn:not(.btn-primary) {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

	.hero {
		padding: 130px 0 80px;
	}

	.hero-stats {
		grid-template-columns: 1fr;
	}

	.compare-row {
		grid-template-columns: 1fr;
	}

	.compare-cell {
		border-right: none;
		border-bottom: 1px solid var(--border-purple-dim);
	}

	.compare-cell:last-child {
		border-bottom: none;
	}

	.pricing-card {
		padding: 40px 24px;
	}

	.pricing-tracks {
		grid-template-columns: 1fr;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	/* 매트릭스를 모바일에서 카드 스택 */
	.matrix-header {
		display: none;
	}

	.matrix-row {
		grid-template-columns: 1fr;
		padding: 12px;
		border-bottom: 1px solid var(--border-purple);
	}

	.matrix-row.is-section-header {
		background: rgba(54, 45, 89, 0.5);
	}

	.matrix-cell {
		border-right: none;
		border-bottom: 1px dashed var(--border-purple-dim);
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: 12px;
		align-items: start;
		padding: 10px 8px;
		font-size: 13px;
		text-align: left !important;
	}

	.matrix-cell:last-child {
		border-bottom: none;
	}

	.matrix-cell.label {
		background: transparent;
		font-size: 14px;
		padding-left: 8px;
		display: block;
	}

	.matrix-cell.competitor::before,
	.matrix-cell.magictalk::before {
		font-family: var(--font-mono);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-tertiary);
	}

	.matrix-cell.competitor:nth-of-type(2)::before { content: 'Zendesk'; }
	.matrix-cell.competitor:nth-of-type(3)::before { content: 'Intercom'; }
	.matrix-cell.magictalk::before { content: 'MagicTalk'; color: var(--lime-green); }
}

@media (max-width: 480px) {
	.container {
		padding: 0 18px;
	}

	.hero-actions,
	.pricing-actions {
		flex-direction: column;
		width: 100%;
	}

	.hero-actions .btn,
	.pricing-actions .btn {
		width: 100%;
	}

	.loop-node {
		min-width: 110px;
		padding: 10px 12px;
	}

	.loop-node-text {
		font-size: 11px;
	}

	.loop-center {
		width: 90px;
		height: 90px;
		font-size: 11px;
	}
}
/* ==========================================================================
   Features 섹션 마무리 — 도입 환경 스트립
   ========================================================================== */
.env-strip {
	max-width: 900px;
	margin: 64px auto 0;
	padding: 18px 28px;
	background: rgba(54, 45, 89, 0.30);
	border: 1px solid var(--border-purple);
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}
.env-strip-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-right: 18px;
	border-right: 1px solid var(--border-purple-dim);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text-tertiary);
}
.env-strip-label svg {
	color: var(--lime-green);
}
.env-strip-items {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}
.env-strip-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
}
.env-strip-item-kakao {
	color: #FEE500;
}
.env-strip-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--text-tertiary);
	opacity: 0.4;
}
@media (max-width: 768px) {
	.env-strip {
		padding: 14px 20px;
		gap: 14px;
	}
	.env-strip-label {
		padding-right: 0;
		padding-bottom: 10px;
		border-right: none;
		border-bottom: 1px solid var(--border-purple-dim);
		width: 100%;
		justify-content: center;
	}
	.env-strip-item {
		font-size: 12px;
	}
}

/* ==========================================================================
   다국어 레이아웃 보정 (CJK — 특히 일본어)
   --------------------------------------------------------------------------
   - 이 파일/블록은 magictalk-landing.css 의 "맨 아래"에 추가한다.
   - 뒤에 올수록 우선순위가 높으므로(동일 명시도 기준) 기존 규칙을 안전하게 덮어씀.
   - 핵심: 일본어는 영어/한국어보다 글자 폭이 넓고 단어 경계(공백)가 없어
	 컨테이너를 뚫거나 단어가 찢어진다. :lang(ja) 로 일본어일 때만 미세조정.
   - 라우터가 <html lang="ja"> 를 박아주므로 :lang(ja) 가 정상 동작함.
   ========================================================================== */

/* ── 공통: 제목류 CJK 줄바꿈 규칙 명시 ──
   body 에 keep-all 이 있어도 제목은 폰트가 커서 별도 보강이 필요하다.
   line-break: strict 는 일본어 구두점/작은가나가 줄 첫머리에 오는 것을 방지. */
.hero-title,
.section-title,
.diff-title,
.feature-title,
.pricing-title,
.predictable-side-title,
.winback-title {
	word-break: keep-all;
	overflow-wrap: break-word;
	line-break: strict;
}

/* ── Hero 타이틀: 일본어일 때 크기/자간 축소 ──
   기본 clamp(36px,5vw,64px) 는 일본어에서 너무 커서 줄바꿈이 깨진다.
   상한을 낮추고 자간을 좁혀 3줄로 자연스럽게 떨어지도록. */
.hero-title:lang(ja) {
	font-size: clamp(30px, 4vw, 50px);
	letter-spacing: -0.02em;   /* 한자 밀도 높으므로 자간 좁힘 */
	line-height: 1.30;         /* 대신 행간은 살짝 넓혀 가독성 확보 */
}

/* gradient 스팬도 동일 크기를 따라가도록(상속되지만 명시) */
.hero-title:lang(ja) .gradient {
	letter-spacing: -0.02em;
}

/* ── Hero 서브타이틀: 일본어 미세조정 ── */
.hero-subtitle:lang(ja) {
	font-size: clamp(15px, 1.5vw, 18px);
	letter-spacing: -0.01em;
	line-height: 1.7;
}

/* ── 섹션 타이틀류: 일본어일 때 한 단계 축소 ── */
.section-title:lang(ja),
.diff-title:lang(ja),
.feature-title:lang(ja),
.pricing-title:lang(ja) {
	font-size: clamp(26px, 3.2vw, 40px);
	letter-spacing: -0.015em;
	line-height: 1.32;
}

/* ── 언어 셀렉터와 타이틀 겹침 방지 ──
   드롭다운 뒤로 타이틀이 삐져나오는 현상은 hero-inner 폭 문제.
   hero 영역 텍스트가 nav(고정) 아래에서 충분한 좌우 여백을 갖도록 보강. */
.hero-inner {
	padding-left: 16px;
	padding-right: 16px;
}

/* ── 중국어(번체/간체)도 CJK 라 동일 보강 ── */
.hero-title:lang(zh-cn),
.hero-title:lang(zh-tw) {
	letter-spacing: -0.01em;
	word-break: keep-all;
	line-break: strict;
}

/* ── 독일어 등 긴 합성어 언어: 단어가 길어 컨테이너를 뚫는 문제 방지 ──
   독일어는 한 단어가 매우 길 수 있어 keep-all 이면 오히려 넘친다.
   → 독일어만 break-word 허용(긴 단어 안에서 줄바꿈 허용). */
.hero-title:lang(de),
.section-title:lang(de),
.feature-title:lang(de) {
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ── Pricing 3개 플랜: 2열 → 3열 ── */
.pricing-tracks {
	grid-template-columns: repeat(3, 1fr);
}

/* 태블릿: 3개가 좁으면 1열로 (가독성 우선) */
@media (max-width: 992px) {
	.pricing-tracks {
		grid-template-columns: 1fr;
	}
}
/* ── Pricing 3개 플랜: 3열 + 컨테이너 폭 확장 ── */
.pricing-card {
	max-width: 1100px;   /* 기존 720px → 1100px (3열 시원하게) */
}
.pricing-tracks {
	grid-template-columns: repeat(3, 1fr);
}
/* 태블릿 이하: 1열로 (좁으면 가독성 우선) */
@media (max-width: 992px) {
	.pricing-tracks {
		grid-template-columns: 1fr;
	}
}
/* 푸터 법적 링크 */
.footer-legal-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.footer-legal-links a {
	font-size: 12px;
	color: var(--text-tertiary);
	transition: color 0.2s;
}
.footer-legal-links a:hover {
	color: var(--lime-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}