/* SMEN — Page Header */
.smen-pgheader{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

/* 높이 모드 */
.smen-pgheader.is-mode-full   { height:100vh; }
.smen-pgheader.is-mode-custom { height:var(--ph-h-pc, 70vh); }

@media(max-width:768px){
	.smen-pgheader.is-mode-custom{ height:var(--ph-h-mo, 50vh); }
}

/* 배경 이미지 */
.smen-pgheader__bg{
	position:absolute;
	inset:0;
	background-image:var(--ph-bg, none);
	background-size:cover;
	background-position:center;
	z-index:0;
}

/* 오버레이 컬러 */
.smen-pgheader__overlay{
	position:absolute;
	inset:0;
	background:var(--ph-overlay, #000);
	opacity:var(--ph-overlay-op, .35);
	z-index:1;
}

/* 콘텐츠 */
.smen-pgheader__content{
	position:relative;
	z-index:2;
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	padding:6vh 6vw;
	box-sizing:border-box;
}

/* 가로 정렬 */
.smen-pgheader.is-text-center .smen-pgheader__content{align-items:center;text-align:center;}
.smen-pgheader.is-text-left   .smen-pgheader__content{align-items:flex-start;text-align:left;}
.smen-pgheader.is-text-right  .smen-pgheader__content{align-items:flex-end;text-align:right;}

/* 세로 정렬 */
.smen-pgheader.is-vert-center .smen-pgheader__content{justify-content:center;}
.smen-pgheader.is-vert-top    .smen-pgheader__content{justify-content:flex-start;}
.smen-pgheader.is-vert-bottom .smen-pgheader__content{justify-content:flex-end;}

/* 타이틀/서브타이틀 — 기본 스타일 (커스텀 클래스로 덮어쓰기 가능) */
.smen-pgheader__title{
	margin:20px 0 0;
	padding:0;
	font-size:clamp(28px, 4.5vw, 64px);
	font-weight:600;
	line-height:1.2;
	letter-spacing:-.005em;
}
.smen-pgheader__subtitle{
	margin:0;
	padding:0;
	font-size:clamp(14px, 1.4vw, 18px);
	line-height:1.6;
	opacity:.92;
	max-width:none;
}

/* 텍스트 컬러 */
.smen-pgheader.is-color-light .smen-pgheader__title,
.smen-pgheader.is-color-light .smen-pgheader__subtitle{color:#fff;}
.smen-pgheader.is-color-dark  .smen-pgheader__title,
.smen-pgheader.is-color-dark  .smen-pgheader__subtitle{color:#111;}

/* ─────────────────────────────────────────────
 * 패럴렉스 (배경 고정 효과)
 * ───────────────────────────────────────────── */

/* Fixed: 가장 간단 — background-attachment 활용 */
.smen-pgheader.is-parallax-fixed .smen-pgheader__bg{
	background-attachment:fixed;
}
/* iOS Safari는 background-attachment:fixed 미지원 → 모바일은 고정 효과 자동 비활성화 */
@media(max-width:768px){
	.smen-pgheader.is-parallax-fixed .smen-pgheader__bg{background-attachment:scroll;}
}

/* Sticky: 헤더가 화면 상단에 고정된 채로 다음 섹션이 위로 덮으며 올라옴 */
.smen-pgheader.is-parallax-sticky{
	position:sticky;
	top:0;
	z-index:0;
}
/* 다음 섹션이 자연스럽게 위로 올라오도록 — 사용자가 직접 다음 row에 배경색 지정 필요 */

/* ─────────────────────────────────────────────
 * 모션 — 배경 / 텍스트 / 스크롤
 * ───────────────────────────────────────────── */

/* Ken Burns — 느린 줌+팬 무한 반복 */
@keyframes smen-pgh-kenburns{
	0%   {transform:scale(1)    translate(0, 0);}
	100% {transform:scale(1.18) translate(-2.5%, -1.5%);}
}
.smen-pgheader.is-bgm-ken-burns .smen-pgheader__bg{
	animation:smen-pgh-kenburns 22s ease-in-out infinite alternate;
	will-change:transform;
}

/* 진입 시 줌인 (한 번) */
@keyframes smen-pgh-zoomin{
	0%   {transform:scale(1.18);}
	100% {transform:scale(1);}
}
.smen-pgheader.is-bgm-zoom-in .smen-pgheader__bg{
	animation:smen-pgh-zoomin 4.5s cubic-bezier(.22,.61,.36,1) forwards;
	will-change:transform;
}

/* 텍스트 페이드인 스태거 */
@keyframes smen-pgh-textin{
	0%   {opacity:0; transform:translateY(24px);}
	100% {opacity:1; transform:translateY(0);}
}
.smen-pgheader.is-txm-fade-in-stagger .smen-pgheader__title{
	opacity:0;
	animation:smen-pgh-textin 1.2s .35s cubic-bezier(.22,.61,.36,1) forwards;
}
.smen-pgheader.is-txm-fade-in-stagger .smen-pgheader__subtitle{
	opacity:0;
	animation:smen-pgh-textin 1.2s .75s cubic-bezier(.22,.61,.36,1) forwards;
}

/* 스크롤 페이드아웃 + 위로 이동 (JS가 CSS 변수 업데이트) */
.smen-pgheader.is-scm-fade-up .smen-pgheader__content{
	opacity:var(--ph-scroll-opacity, 1);
	transform:translateY(var(--ph-scroll-y, 0px));
	will-change:opacity, transform;
}

/* 모바일 */
@media(max-width:768px){
	.smen-pgheader__content{padding:5vh 6vw;}
	.smen-pgheader__title{margin-bottom:0;}
}