@charset "utf-8";
/* =====================================================================
   메인(/) — 스크롤 스토리텔링
   - 자연스러운 스크롤(Lenis) + 구간 고정/스크롤 연동(GSAP ScrollTrigger)
   - JS 가 없거나 '동작 줄이기' 설정이면 모든 내용이 정적으로 보인다
   ===================================================================== */

.center { text-align: center; }
.h-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.h-head.center { margin-inline: auto; }
.h-head h2, .h-values-head h2 { margin-top: 12px; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.35; }
.h-head h2 strong, .h-values-head h2 strong { font-weight: 800; color: var(--primary); }
.h-head p { margin-top: 14px; font-size: 17px; }
.h-head.light h2, .h-head.light p { color: #fff; }
.h-head.light h2 strong, .h-head.light .eyebrow { color: #cdb8ff; }

/* 큰 글씨: 푸라닭 젠틀고딕 (단일 굵기라 굵게 표현은 색/크기로) */
.h-title, .h-head h2, .h-values-head h2, .h-band span, .h-value h3, .h-film-caption, .h-tel, .h-card h3, .h-biz strong, .h-step-title strong {
	font-family: var(--font-display);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: var(--font-display-tracking);
}
.h-head h2 strong, .h-values-head h2 strong { font-weight: 400; }

/* ---------- 섹션 제목 등장 연출 (home.js 가 단어를 쪼갠 뒤 GSAP 으로 재생) ---------- */
/* 단어: 보이지 않는 틀(overflow hidden) 아래에서 기울어진 채 올라온다 */
.h-head h2 .hw, .h-values-head h2 .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h-head h2 .hw-in, .h-values-head h2 .hw-in { display: inline-block; will-change: transform; }
/* 강조 단어: 형광펜 밑줄이 왼쪽→오른쪽으로 그어진다 (--hl 0 → 1) */
.h-head h2 strong, .h-values-head h2 strong {
	--hl: 0;
	background: linear-gradient(var(--hl-color, rgba(77, 52, 148, .14)), var(--hl-color, rgba(77, 52, 148, .14))) no-repeat 0 88% / calc(var(--hl) * 100%) 34%;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.h-head.light h2 strong { --hl-color: rgba(205, 184, 255, .22); }
html:not([data-anim]) .h-head h2 strong, html:not([data-anim]) .h-values-head h2 strong { --hl: 1; }
/* 라벨: 앞에 짧은 선이 그어진다 */
.h-head .eyebrow, .h-values-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.h-head.center .eyebrow { justify-content: center; }
.h-head .eyebrow::before, .h-values-head .eyebrow::before {
	content: ''; width: 24px; height: 2px; border-radius: 2px; background: currentColor;
	transform-origin: left; transform: scaleX(var(--line, 1));
}

/* 등장 효과 (JS 가 html[data-anim] 을 켰을 때만 숨김 → 애니메이션) */
html[data-anim] .h-up { opacity: 0; transform: translateY(32px); }

/* ---------- 01. Hero ---------- */
.h-hero { position: relative; background: #fff; }
.h-hero-pin { position: relative; height: calc(100svh - var(--header-h)); min-height: 560px; overflow: hidden; display: flex; align-items: center; color: #fff; }
.h-hero-media {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #140d26;
	clip-path: inset(0 0 0 0 round 0px); will-change: clip-path;
}
.h-video { position: absolute; inset: 0; container-type: size; }
.h-video-poster, .h-video iframe, .h-video video {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none;
}
/* 16:9 영상을 화면에 꽉 채우기 (cover) */
.h-video iframe { width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); max-width: none; opacity: 0; transition: opacity .6s; }
.h-video.is-playing iframe { opacity: 1; }
/* 유튜브 제목 표시줄·로고가 화면 밖으로 나가도록 확대해서 가장자리를 잘라낸다 */
.h-video iframe { transform: translate(-50%, -50%) scale(1.32); }
.h-hero-shade {
	position: absolute; inset: 0;
	background:
		radial-gradient(900px 500px at 10% 100%, rgba(64, 0, 153, .7), transparent 70%),
		linear-gradient(90deg, rgba(10, 6, 24, .72) 0%, rgba(10, 6, 24, .35) 60%, rgba(10, 6, 24, .2) 100%),
		linear-gradient(180deg, rgba(10, 6, 24, .2) 0%, rgba(10, 6, 24, .5) 100%);
}
.h-hero-copy { position: relative; z-index: 1; }
.h-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.h-kicker img { height: 9px; width: auto; filter: brightness(0) invert(1); }
.h-title { margin-top: clamp(16px, 3vh, 28px); color: #fff; font-size: clamp(42px, min(7.6vw, 12vh), 112px); line-height: 1.04; }
.h-line { display: block; overflow: hidden; margin-bottom: -.18em; }
/* g·y 아래 꼬리와 마지막 글자 오른쪽이 잘리지 않도록 글자 상자(=그라데이션 칠 영역)를 아래·오른쪽으로 넓히고,
   늘어난 만큼 .h-line 의 음수 여백으로 줄 간격은 그대로 유지 */
.h-line > span { display: inline-block; padding: 0 .14em .18em 0; margin-right: -.14em; }
.h-line:nth-child(2) > span { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .92); }
.h-line:nth-child(3) > span {
	background: linear-gradient(90deg, #fff 0%, #d9c8ff 40%, #fff 80%); background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: -200% 0; } }
.h-sub { margin-top: clamp(14px, 3vh, 24px); font-size: clamp(16px, 1.6vw, 20px); color: rgba(255, 255, 255, .88); }
.h-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 4vh, 36px); }
.h-play { background: #fff; color: var(--ink); }
.h-play:hover { color: var(--primary); box-shadow: 0 10px 28px rgba(10, 6, 24, .35); transform: translateY(-2px); }
.h-play-icon { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); }
.h-play-icon::after { content: ''; position: absolute; left: 11px; top: 8px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.h-play-icon::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--primary); animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* 첫 진입 애니메이션: <head> 스크립트가 data-intro 를 켜면 첫 페인트와 동시에 CSS 키프레임으로 시작 (JS 로딩과 무관) */
html[data-intro] .h-line > span { animation: introLine 1.2s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
html[data-intro] .h-in { animation: introUp 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
html[data-intro] .h-video-poster { animation: introPoster 6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes introLine { from { transform: translateY(110%) skewY(6deg); } to { transform: none; } }
@keyframes introUp { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes introPoster { from { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } 15% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.h-film-caption {
	position: absolute; left: 50%; bottom: 12%; z-index: 1; width: min(90%, 760px); transform: translateX(-50%);
	text-align: center; font-size: clamp(20px, 2.4vw, 32px); color: #fff; opacity: 0;
	text-shadow: 0 4px 24px rgba(0, 0, 0, .35); pointer-events: none;
}
.h-scroll { position: absolute; left: 50%; bottom: 24px; z-index: 1; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .35em; opacity: .85; pointer-events: none; }
.h-scroll i { position: relative; width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, .75); border-radius: 12px; }
.h-scroll i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.8s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* PC: 히어로 고정은 CSS sticky (GSAP pin 은 iframe 을 다시 로딩시키므로 사용하지 않음) */
@media (min-width: 1024px) {
	html[data-pin] .h-hero { height: calc(190vh - var(--header-h)); }
	html[data-pin] .h-hero-pin { position: sticky; top: var(--header-h); }
}

/* ---------- 03. Story ---------- */
.h-story { padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px); }
.h-story-visual { display: none; }
.h-step { padding: 0 0 56px; }
.h-step + .h-step { padding-top: 56px; border-top: 1px solid var(--line); }
.h-step-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 24px; }
.h-step-no { display: block; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--primary); }
.h-step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 18px; }
.h-step-title strong { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; color: var(--ink); }
.h-step-title span { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.h-step h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -.02em; }
.h-step p { margin-top: 16px; font-size: 17px; line-height: 1.85; }
.h-step .btn { margin-top: 28px; }
@media (min-width: 1024px) {
	.h-story-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: start; }
	/* 왼쪽 이미지: 헤더 아래 '화면 높이' 영역을 고정하고, 그 안에서 프레임을 세로 가운데 정렬
	   → 노트북·큰 모니터 모두 화면 중앙에 머문다 */
	.h-story-visual { display: flex; align-items: center; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); }
	.h-story-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h) - 96px); border-radius: 28px; overflow: hidden; background: var(--bg-soft); box-shadow: var(--shadow-lg); }
	.h-story-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.15); transition: clip-path 1s cubic-bezier(.77, 0, .175, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1); }
	.h-story-frame img.is-on { clip-path: inset(0 0 0 0); transform: scale(1); }
	.h-story-count { position: absolute; left: 24px; bottom: 20px; z-index: 2; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); font-size: 13px; font-weight: 700; color: var(--muted); }
	.h-story-count b { color: var(--primary); }
	.h-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 0 !important; border: 0 !important; transition: opacity .6s; }
	html[data-anim] .h-step { opacity: .25; }
	html[data-anim] .h-step.is-on { opacity: 1; }
	.h-step-img { display: none; }
}

/* ---------- 흐르는 띠 ---------- */
.h-band { overflow: hidden; padding: 28px 0; background: var(--primary); color: #fff; }
.h-band-track { display: flex; width: max-content; animation: band 120s linear infinite; }
/* 묶음 끝에도 같은 간격(padding-right)을 둬서 이음매 간격이 다른 곳과 똑같게 */
.h-band-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; flex-shrink: 0; }
.h-band span { font-size: clamp(28px, 4vw, 52px); white-space: nowrap; }
.h-band span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .85); }
.h-band i { width: 14px; height: 14px; border-radius: 50%; background: #cdb8ff; flex-shrink: 0; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- 04. Values (PC: 가로 스크롤 / 모바일: 옆으로 넘기기) ---------- */
.h-values { padding: clamp(80px, 12vw, 140px) 0; background: #fff; overflow: hidden; }
.h-values-head { margin-bottom: clamp(32px, 5vw, 48px); }
.h-values-track {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	padding: 4px var(--gutter) 20px; scroll-padding-inline: var(--gutter);
}
.h-values-track::-webkit-scrollbar { display: none; }
.h-value {
	flex: 0 0 min(82vw, 380px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px;
	min-height: 340px; padding: 32px 28px; border-radius: 28px; background: var(--bg-soft); border: 1px solid var(--line);
	transition: transform .4s var(--ease), box-shadow .4s;
}
.h-value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.h-value img { height: 64px; width: auto; align-self: flex-start; margin-bottom: 10px; }
.h-value-en { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.h-value h3 { font-size: 24px; }
.h-value p { margin-top: auto; font-size: 15.5px; line-height: 1.8; }
/* 강조 카드: 파스텔 그라데이션(위 → 흰색) + 같은 계열 테두리 + 진한 남보라 제목 */
.h-value.is-feature {
	--tone: #fff3ea; --edge: #fcdcab; --accent: #d9792a;
	background: linear-gradient(180deg, var(--tone) 0%, #fff 78%);
	border: 2px solid var(--edge);
	color: #3d3a4d;
}
.h-value.is-feature:hover { box-shadow: 0 24px 50px color-mix(in srgb, var(--edge) 55%, transparent); }
.h-value.is-feature h3 { color: #1f0b4d; font-size: 30px; }
.h-value.is-feature .h-value-en { color: var(--accent); }
.h-value.is-peach { --tone: #fff3ea; --edge: #fcdcab; --accent: #d9792a; }
.h-value.is-sky { --tone: #edf3ff; --edge: #bfd8fb; --accent: #3b74d6; }
.h-value.is-lavender { --tone: #f3eeff; --edge: #d8c8fa; --accent: #6f45cf; }
.h-value.is-mint { --tone: #eaf8f2; --edge: #b8e4d1; --accent: #2a926f; }
.h-values-progress { display: none; }
@media (min-width: 1024px) {
	html[data-pin] .h-values { padding: 0; }
	html[data-pin] .h-values-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); }
	html[data-pin] .h-values-track { overflow: visible; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); will-change: transform; }
	.h-value { flex-basis: 380px; min-height: 380px; }
	html[data-pin] .h-values-progress { display: block; margin-top: 28px; }
	.h-values-progress span { display: block; height: 3px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
	.h-values-progress span::after { content: ''; position: absolute; inset: 0; background: var(--primary); transform-origin: left; transform: scaleX(var(--p, 0)); }
}
/* 노트북처럼 낮은 화면: 고정 구간(100vh) 안에 제목+카드가 다 들어가도록 압축 */
@media (min-width: 1024px) and (max-height: 820px) {
	html[data-pin] .h-values-head { margin-bottom: 20px; }
	html[data-pin] .h-values-head h2 { font-size: clamp(24px, 4.6vh, 36px); }
	html[data-pin] .h-value { min-height: 0; padding: 24px; gap: 8px; }
	html[data-pin] .h-value img { height: 48px; margin-bottom: 4px; }
	html[data-pin] .h-value h3, html[data-pin] .h-value.is-feature h3 { font-size: 24px; }
	html[data-pin] .h-value p { font-size: 14.5px; line-height: 1.7; }
	html[data-pin] .h-values-progress { margin-top: 18px; }
}
/* 고정 연출이 꺼진 PC(아주 낮은 화면)에서는 마우스로 넘길 수 있게 스크롤바를 보여준다 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	html:not([data-pin]) .h-values-track { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
	html:not([data-pin]) .h-values-track::-webkit-scrollbar { display: block; height: 6px; }
	html:not([data-pin]) .h-values-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
}

/* ---------- 05. Business ---------- */
.h-business { position: relative; padding: clamp(96px, 14vw, 160px) 0; overflow: hidden; background: linear-gradient(180deg, #fff, #f5f2fb); }
.h-business::before, .h-business::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: 0; animation: float 14s ease-in-out infinite alternate; }
.h-business::before { width: 420px; height: 420px; left: -140px; top: 10%; background: #ddd0fa; }
.h-business::after { width: 380px; height: 380px; right: -120px; bottom: 0; background: #ffdccb; animation-delay: -7s; }
@keyframes float { to { transform: translate(60px, 40px) scale(1.15); } }
.h-business .container { position: relative; z-index: 1; }
.h-diagram { display: flex; justify-content: center; }
.h-diagram img { width: min(100%, 820px); }
.h-biz { display: grid; gap: 12px; margin: clamp(32px, 5vw, 56px) 0; }
@media (min-width: 640px) { .h-biz { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .h-biz { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.h-biz li { padding: 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); border-top: 4px solid var(--c); box-shadow: var(--shadow-sm); }
.h-biz span { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.h-biz strong { display: block; margin-top: 6px; font-size: 19px; color: var(--ink); }
.h-biz p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; }

/* ---------- 06. Menu ---------- */
.h-menu { padding: clamp(96px, 14vw, 160px) 0; }
.h-cards { display: grid; gap: 14px; }
@media (min-width: 640px) { .h-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .h-cards { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.h-card { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; overflow: hidden; transition: box-shadow .35s, border-color .35s; }
.h-card::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; background: linear-gradient(140deg, var(--primary-strong), var(--primary) 60%, #7a5cc8); transition: opacity .35s; }
.h-card > * { position: relative; z-index: 1; transition: color .35s; }
.h-card h3 { font-size: 23px; }
.h-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; }
.h-card p span { font-weight: 700; color: var(--primary); transition: color .35s; }
.h-card-links { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.h-card-links a { padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); font-size: 12.5px; font-weight: 600; }
.h-card:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.h-card:hover::before { opacity: 1; }
.h-card:hover h3, .h-card:hover h3 a, .h-card:hover p, .h-card:hover p span { color: #fff; }
.h-card:hover .h-card-links a { background: rgba(255, 255, 255, .16); color: #fff; }
.h-card:hover .h-card-links a:hover { background: #fff; color: var(--primary); }

/* ---------- 07. Program ---------- */
.h-program { position: relative; padding: clamp(96px, 14vw, 160px) 0; color: rgba(255, 255, 255, .8); overflow: hidden; isolation: isolate; }
.h-program-bg {
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(600px 400px at 20% 20%, rgba(133, 79, 191, .55), transparent 70%), radial-gradient(700px 500px at 85% 90%, rgba(64, 0, 153, .7), transparent 70%), #1a1230;
	animation: hue 12s ease-in-out infinite alternate;
}
@keyframes hue { to { filter: hue-rotate(-25deg); } }
.h-steps { position: relative; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) {
	.h-steps { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.h-steps::before { content: ''; position: absolute; left: 12%; right: 12%; top: 62px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(205, 184, 255, .8), rgba(255, 255, 255, .1)); transform-origin: left; transform: scaleX(var(--line, 1)); }
}
.h-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); text-align: center; }
.h-steps img { width: 76px; height: 76px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease); }
.h-steps li:hover img { transform: scale(1.08) rotate(-6deg); }
.h-steps strong { margin-top: 6px; font-size: 17px; color: #fff; }
.h-steps span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.h-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-top: clamp(40px, 6vw, 56px); }
.h-tel { display: flex; flex-direction: column; color: #fff; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; }
.h-tel small { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .65); }
.h-cta { background: #fff; color: var(--primary); }

/* ---------- 브랜드 필름 팝업 ---------- */
.h-film-modal { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; border-radius: 20px; background: #000; overflow: visible; }
.h-film-modal::backdrop { background: rgba(10, 6, 24, .82); backdrop-filter: blur(6px); }
.h-film-modal[open] { animation: modalIn .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes modalIn { from { opacity: 0; transform: scale(.94); } }
.h-film-frame { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; }
.h-film-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.h-film-close { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.h-film-close::before, .h-film-close::after { content: ''; position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: #fff; }
.h-film-close::before { transform: rotate(45deg); }
.h-film-close::after { transform: rotate(-45deg); }

/* 레니스(부드러운 스크롤) 기본 스타일 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.h-band-track, .h-business::before, .h-business::after, .h-program-bg, .h-line:nth-child(3) > span { animation: none !important; }
}