/* ════════════════════════════════════════════════════
   home.css — 메인 홈(include/home.php) 몽환적 아이스하키 히어로
   - 라이트/다크 무관 "항상 딥 스테이지"(몽환 무드 최적). 자족 컴포넌트.
   - 구성: 오로라 글로우 + 빙면 광택 sweep + 반짝이 입자 + 글로우 13 엠블럼 + 그라데이션 문구
   - 성능: transform/opacity 위주 애니메이션 + 한정된 blur. prefers-reduced-motion 시 정지.
   ════════════════════════════════════════════════════ */

/* ── 홈 본문 래퍼 풀블리드 — page-body 의 최대폭(1100)·좌우 패딩 제거 ── */
.page-body:has(.home-hero) {
	max-width: none;
	padding: 0;
}

/* ── 스테이지(히어로 컨테이너) — 화면 꽉 채움(여백 0) ── */
.home-hero {
	position: relative;
	isolation: isolate;            /* z-index 컨텍스트 — 내부 글로우/입자 격리 */
	overflow: hidden;
	width: 100%;
	min-height: calc(100dvh - var(--header-h, 58px));  /* 헤더 아래 화면 전체 채움 */
	margin: 0;
	padding: 90px 24px;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #eaf2ff;
	/* 깊은 빙하 밤하늘 — 블루/바이올렛/틸 글로우 + 딥네이비 베이스 */
	background:
		radial-gradient(120% 90% at 18% 8%,  rgba(56,120,220,.38), transparent 55%),
		radial-gradient(120% 90% at 86% 18%, rgba(150,90,230,.32), transparent 55%),
		radial-gradient(150% 130% at 50% 120%, rgba(20,200,210,.22), transparent 60%),
		linear-gradient(165deg, #0a1430 0%, #0b1a3e 45%, #070d22 100%);
	/* 풀블리드 = 카드형 외곽 그림자 제거(위 box-shadow:none 유지), 상단 안쪽 하이라이트만 */
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── 오로라 블롭 2개 — 아주 느리게 떠다님 ───────────── */
.home-hero::before,
.home-hero::after {
	content: '';
	position: absolute;
	z-index: -2;
	border-radius: 50%;
	filter: blur(64px);
	opacity: .55;
	pointer-events: none;
}
.home-hero::before {
	width: 520px; height: 520px; left: -120px; top: -150px;
	background: radial-gradient(circle, rgba(64,160,255,.60), transparent 65%);
	animation: hero-drift1 15s ease-in-out infinite alternate;
}
.home-hero::after {
	width: 460px; height: 460px; right: -120px; bottom: -130px;
	background: radial-gradient(circle, rgba(168,98,255,.55), transparent 65%);
	animation: hero-drift2 19s ease-in-out infinite alternate;
}
@keyframes hero-drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } }
@keyframes hero-drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-30px) scale(1.12); } }

/* ── 빙면 광택 sweep(대각 빛줄기) ───────────────────── */
.hero-shine { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-shine::before {
	content: '';
	position: absolute; top: -50%; left: -60%;
	width: 55%; height: 200%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
	transform: rotate(8deg);
	animation: hero-sweep 9s ease-in-out infinite;
}
@keyframes hero-sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* ── 반짝이 입자(얼음 결정) ─────────────────────────── */
.hero-spark {
	position: absolute; z-index: -1;
	width: 3px; height: 3px; border-radius: 50%;
	background: #dff0ff;
	box-shadow: 0 0 8px 2px rgba(180,220,255,.85);
	opacity: 0;
	animation: hero-twinkle 4.2s ease-in-out infinite;
}
@keyframes hero-twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .95; transform: scale(1.25); } }

/* ── 중앙 글로우 엠블럼(13) ─────────────────────────── */
.hero-emblem {
	position: relative;
	width: 132px; height: 132px;
	margin-bottom: 32px;
	display: flex; align-items: center; justify-content: center;
	animation: hero-float 6s ease-in-out infinite;
}
.hero-emblem .ring {
	position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid rgba(150,200,255,.5);
	box-shadow: 0 0 42px rgba(70,160,255,.5), inset 0 0 30px rgba(120,180,255,.25);
}
.hero-emblem .ring2 {
	position: absolute; inset: -14px; border-radius: 50%;
	border: 1px solid rgba(180,140,255,.30);
	animation: hero-spin 26s linear infinite;
}
.hero-emblem .ring2::before {
	content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
	width: 6px; height: 6px; border-radius: 50%;
	background: #cfe6ff; box-shadow: 0 0 10px 3px rgba(160,210,255,.9);
}
.hero-emblem .num {
	font-family: 'InfinitySans','EliceBaeum','Arial Black',sans-serif;
	font-size: 62px; font-weight: 900; letter-spacing: -3px; line-height: 1;
	background: linear-gradient(135deg, #7fd0ff 0%, #b79bff 55%, #ff9ed2 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 0 18px rgba(120,180,255,.6));
}
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hero-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── 문구 ───────────────────────────────────────────── */
.hero-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 5px;
	color: rgba(190,215,255,.85); text-transform: uppercase;
	margin-bottom: 18px;
}
.hero-title {
	font-size: clamp(30px, 5vw, 52px); font-weight: 900; line-height: 1.18;
	letter-spacing: -1px; margin-bottom: 20px;
	background: linear-gradient(120deg, #eaf4ff 0%, #a9c8ff 40%, #c8b0ff 70%, #ffc6e6 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 40px rgba(120,160,255,.22);
}
.hero-sub {
	font-size: clamp(14px, 2.2vw, 17px); line-height: 1.85;
	color: rgba(210,225,255,.82); max-width: 540px;
}
.hero-greeting {
	margin-top: 28px; font-size: 13px; letter-spacing: .4px;
	color: rgba(180,210,255,.72);
}
.hero-greeting strong { color: #bcdcff; font-weight: 700; }

/* ── 모바일 ─────────────────────────────────────────── */
@media (max-width: 619.98px) {
	/* 모바일도 풀블리드 유지(모서리 0) + 헤더(52)·하단탭바(64) 제외한 화면 채움 */
	.home-hero { min-height: calc(100dvh - 52px - 64px); padding: 56px 18px; border-radius: 0; }
	.hero-emblem { width: 108px; height: 108px; margin-bottom: 26px; }
	.hero-emblem .num { font-size: 50px; }
	.hero-eyebrow { letter-spacing: 4px; }
}

/* ── 모션 최소화 선호 사용자: 애니메이션 정지(정적 표현) ── */
@media (prefers-reduced-motion: reduce) {
	.home-hero::before, .home-hero::after,
	.hero-shine::before, .hero-spark,
	.hero-emblem, .hero-emblem .ring2 { animation: none; }
}

/* ════════════════════════════════════════════════════
   라이트 모드 변형 — 밝고 몽환적인 빙면(아이스 파스텔)
   위(기준) = 다크 딥 스테이지 그대로. 아래 = [data-theme="light"] 만 색 오버라이드.
   레이아웃/애니메이션은 공유. (특이도 우선이라 미디어쿼리와 무관)
   ════════════════════════════════════════════════════ */
[data-theme="light"] .home-hero {
	color: #2a3a5a;
	background:
		radial-gradient(120% 90% at 18% 8%,  rgba(120,180,255,.40), transparent 55%),
		radial-gradient(120% 90% at 86% 18%, rgba(190,150,255,.34), transparent 55%),
		radial-gradient(150% 130% at 50% 120%, rgba(120,220,225,.28), transparent 60%),
		linear-gradient(165deg, #f4f9ff 0%, #ebf2fd 45%, #f7f1ff 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
/* 오로라 블롭 — 라이트에선 살짝 옅게(흰 배경 위 부드러운 색구름) */
[data-theme="light"] .home-hero::before { opacity: .42; }
[data-theme="light"] .home-hero::after  { opacity: .40; }
/* 광택 sweep — 흰 배경엔 흰빛이 안 보임 → 옅은 블루 틴트 */
[data-theme="light"] .hero-shine::before {
	background: linear-gradient(100deg, transparent, rgba(120,170,255,.14), transparent);
}
/* 반짝이 입자 — 흰 배경에서 보이도록 블루 */
[data-theme="light"] .hero-spark {
	background: #6fa8ff;
	box-shadow: 0 0 8px 2px rgba(110,160,255,.7);
}
/* 엠블럼 — 링 테두리/글로우 살짝 진하게(흰 배경 대비) */
[data-theme="light"] .hero-emblem .ring {
	border-color: rgba(90,150,235,.55);
	box-shadow: 0 0 38px rgba(90,160,255,.35), inset 0 0 28px rgba(140,190,255,.30);
}
[data-theme="light"] .hero-emblem .ring2 { border-color: rgba(150,110,235,.30); }
[data-theme="light"] .hero-emblem .num {
	background: linear-gradient(135deg, #2f8fe0 0%, #7a5ad0 55%, #e060a8 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 0 12px rgba(120,160,255,.40));
}
/* 문구 — 라이트 가독 색 */
[data-theme="light"] .hero-eyebrow { color: #5a78c0; }
[data-theme="light"] .hero-title {
	background: linear-gradient(120deg, #2b6fd6 0%, #6a5acd 45%, #b94f9e 75%, #d35a8a 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: none;
}
[data-theme="light"] .hero-sub { color: #4a5a78; }
[data-theme="light"] .hero-greeting { color: #5a6a90; }
[data-theme="light"] .hero-greeting strong { color: #2f6fd0; }