@charset "utf-8";

/* 진입 로딩 UI — .intro_shutter 위에 얹힌다. (inc/js/intro-loader.js 가 제어)
 *
 * 나중에 통째로 갈아끼우기 쉽도록 훅을 데이터 속성으로 열어 뒀다.
 *   [data-intro-loading]        루트. JS 가 살아있으면 .is-ready 가 붙는다.
 *   [data-intro-loading-fill]   width 가 0%→100% 로 채워진다.
 *   [data-intro-loading-pct]    "0%" ~ "100%" 텍스트.
 *   html.intro-loading          로딩 중
 *   html.intro-loaded           로딩 완료
 *   .intro_shutter.is-loaded    로딩 완료(셔터 기준)
 * 이 파일과 _Skin/1.php 의 .intro_loading 마크업만 바꾸면 나머지는 건드릴 필요가 없다.
 */

/* 스크롤 잠금은 첫 페인트부터.
   스킨의 게이트(scroll_none)는 DOMContentLoaded 에야 걸리는데, 그 전에도 문서는 이미
   45,000px 로 렌더돼 휠이 그대로 먹는다(실측: 잠금 전 밀린 오프셋이 셔터가 열린 뒤까지 남음).
   html.intro-loading 은 head 스크립트가 즉시 붙이므로 CSS 만으로 그 구멍이 닫힌다.
   :has 로 한정해 인트로 섹션이 없는 페이지(/intro.php 등)는 잠그지 않는다. */
html.intro-loading:has(.intro_sect) { overflow: hidden; }

/* 셔터가 다 열린 뒤에는 확실히 치운다.
   main.css 의 .intro_sect .intro_shutter 규칙이 display 를 지정하지는 않지만,
   z-index 100 짜리 전체화면 오버레이라 남으면 클릭을 먹으므로 명시적으로 못 박는다. */
.intro_sect .intro_shutter[hidden] { display: none !important; }

.intro_sect .intro_shutter .intro_loading {
	position: static;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	pointer-events: none;
	/* JS 가 .is-ready 를 붙이기 전에는 감춘다.
	   스크립트가 죽었을 때 0% 에 멈춘 바가 화면에 박제되는 것을 막는다. */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.intro_sect .intro_shutter .intro_loading.is-ready { opacity: 1; }

.intro_sect .intro_shutter .intro_loading .bar {
	display: none;
}

.intro_sect .intro_shutter .intro_loading .bar .fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #fff;
}

.intro_sect .intro_shutter .intro_loading .pct {
	font-family: var(--en1);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	/* 숫자 폭을 고정해 % 가 흔들리지 않게 한다. */
	font-variant-numeric: tabular-nums;
}

/* 로딩이 끝나면 바가 사라지고 그 자리를 SCROLL DOWN 이 넘겨받는다. */
.intro_sect .intro_shutter.is-loaded .intro_loading { opacity: 0; }

/* 아직 스크롤할 수 없는 동안에는 SCROLL DOWN 을 감춘다.
   html.intro-loading 은 JS 가 붙이므로, 스크립트가 없으면 지금까지처럼 그냥 보인다.
   같은 자리를 쓰므로 바의 페이드아웃(0.3s)이 끝난 뒤에 나타나게 지연을 준다. */
.intro_sect .intro_shutter .scroll_down { transition: opacity 0.4s ease 0.35s; }
html.intro-loading .intro_sect .intro_shutter .scroll_down { opacity: 0; transition-delay: 0s; }

/* 셔터가 이미 열리는 중이면 SCROLL DOWN 은 의미가 없다(재방문 자동 열림 포함) — 켜지 않는다. */
.intro_sect.active .intro_shutter .scroll_down { opacity: 0; transition-delay: 0s; }

.intro_sect .intro_shutter .loading_logo_wrap .intro_loading {
	display: flex;
	align-items: center;
	justify-content: center;
}

.intro_sect .intro_shutter .loading_logo_wrap .intro_loading .pct {
	font-size: 2.4rem;
	letter-spacing: 0.08em;
	text-align: center;
	margin-top: -7rem;
}

@media (prefers-reduced-motion: reduce) {
	.intro_sect .intro_shutter .intro_loading,
	.intro_sect .intro_shutter .scroll_down { transition: none; }
}


@media screen and (max-width: 600px){

	.intro_sect .intro_shutter .loading_logo_wrap .intro_loading .pct {font-size: var(--p3);}

}