/* =============================================================================
SWM — Page loader (메인 페이지 전용)
Page settings ▸ Custom code ▸ Inside tag 에 로 넣고,
바로 아래에 도 같이.
(JS 보다 먼저 실행돼야 로더/히어로 초기 상태가 첫 페인트 전에 잡혀서
"스케일 안 된 히어로가 잠깐 보였다 확 줄어드는" 깜빡임이 없음)
========================================================================== */
/* 로더가 떠 있는 동안 스크롤 잠금 */
html.pl-js,
html.pl-active {
scrollbar-gutter: stable;
}
html.pl-active,
html.pl-active body {
overflow: hidden;
}
html.pl-active body {
padding-right: var(--pl-scrollbar-width, 0px);
}
/* 초기 페인트 방지.
원래는 pl-js 만 스위치로 썼지만, Webflow Head Code 에서 pl-js 가 빠지거나 늦게 붙으면
body 하단의 page-loader.js 가 실행되기 전까지 히어로가 먼저 보인다.
Webflow 기본 w-mod-js 도 같이 받아서 JS 사용 환경에서는 로더가 첫 페인트부터 덮게 한다. */
html.pl-js .page_loader_wrap,
html.w-mod-js .page_loader_wrap {
display: flex;
}
html.pl-js .page_loader_wrap .div-block-24,
html.w-mod-js .page_loader_wrap .div-block-24 {
opacity: 0;
visibility: hidden;
}
html.pl-js .hero_sticky .u-background-slot,
html.w-mod-js .hero_sticky .u-background-slot {
transform: scale(1.3);
}
/* 로더 안 요소들 */
.page_loader_content_top,
.page_loader_content_bottom {
will-change: transform;
}
.div-block-24 {
will-change: opacity;
}
/* 로고 "뒤"에서 좌우로 뻗어나가는 라인 — JS 가 런타임에 생성해서 삽입한다
(.page_loader_content_bottom 다음, .div-block-24 앞 — 로고보다 아래 레이어) */
.page_loader_line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
margin-top: -0.5px;
transform: scaleX(0);
transform-origin: 50% 50%;
background: linear-gradient(90deg, transparent 0%, rgba(2, 153, 215, .9) 18%, rgba(2, 153, 215, .9) 82%, transparent 100%);
box-shadow: 0 0 14px rgba(2, 153, 215, .55);
pointer-events: none;
}
/* 모션 최소화 설정이면 애니메이션 없이 그냥 스킵 (JS 도 동일 미디어쿼리로 bail 함) */
@media (prefers-reduced-motion: reduce) {
html.pl-js .page_loader_wrap,
html.w-mod-js .page_loader_wrap {
display: none !important;
}
html.pl-js .hero_sticky .u-background-slot,
html.w-mod-js .hero_sticky .u-background-slot {
transform: none;
}
}