@charset "utf-8";
/* Inter (가변 폰트, self-host) — 이 섹션에서만 사용. 나노h2o 인트로 폰트 느낌 매칭. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/Inter/Inter-en.woff2') format('woff2'); /* 영문 서브셋 28KB */
}
/* ***************************************************************
 * sub-project-intro.css
 * 프로젝트 상세 상단 "물방울 인트로" 스크롤 스크럽 섹션.
 * 원본 nanoh2owater.com .main-intro 를 studio-jt(px 기반) 테마로 이식 — rem→px 변환.
 * 이 페이지(nanoh2o)에서만 조건부 로드되며 .project-intro 로 전부 스코프(전역 오염 0).
 * *************************************************************** */

/* ★ 점진적 향상:
 * 기본 = 평범한 1화면(100vh) 섹션 → JS 미실행/영상 지연 시에도 안 깨짐.
 * JS 준비 완료 시 .is-ready 를 붙여 1000vh 트랙 + pin 레이아웃으로 전환. */
.project-intro {
	position: relative;
	/* 다른 섹션(케이스 스터디 이미지 1903px)과 동일 폭 — 풀블리드 아님, 가운데 정렬. */
	width: 100%;
	max-width: 1903px;
	margin: 0 auto;
	height: 100vh;
	overflow: hidden;
	background: #000;
	text-align: left; /* .jt_project_detail 의 center 상속 방지 */
	z-index: 1;
}
/* 트랙 — 1000vh(10화면) 세로 스크롤 길이. 안쪽 화면 하나를 JS(ScrollTrigger)가 pin. */
.project-intro.is-ready {
	height: 1000vh;
}

.project-intro__inner {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.project-intro.is-ready .project-intro__inner {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* 배경 스크럽 영상 */
.project-intro__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.project-intro__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.project-intro__vid,
.project-intro__poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* 텍스트 레이어 — 영상 위 흰 글자 */
.project-intro__content {
	position: relative;
	width: 100%;
	height: 100vh;
	/* 원본과 동일: 밝은 물방울 영상 위 검정 텍스트 + 강조만 주황 */
	color: #000;
}
/* 테마 본문(.jt_project_detail h2/p) 색을 확실히 덮도록 강제 — 이 섹션 스코프 한정 */
.project-intro .pi-h,
.project-intro .pi-lead,
.project-intro .pi-sub {
	color: #000 !important;
	font-family: 'Inter', 'Montserrat', 'NotoSansKR', sans-serif !important;
}
.project-intro__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* 원본과 동일: 상단 정렬 (세로 가운데 아님) — 텍스트는 위, 물방울은 아래/중앙 */
	padding: 80px 0;
	box-sizing: border-box;
}
.project-intro__item:not(:first-child) {
	opacity: 0;
}

.project-intro__wrap {
	width: 100%;
	max-width: 1760px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

/* 타이포 — 원본 nano jt-typo 스케일 그대로 재현.
 * 원본은 html font-size(>1900px=6.25%→1rem=1px, 이하 브레이크포인트마다 vw) × rem 변수.
 * studio-jt(px 기반)엔 root 스케일이 없어, (rem 변수 × root vw) 계산값을 vw 폰트로 직접 넣어 픽셀 일치. */
.project-intro .pi-h {
	display: block;
	font-family: 'Montserrat', 'NotoSansKR', sans-serif;
	font-size: 80px; /* >1900px: 1rem=1px, --02=80rem */
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
}
.project-intro .pi-lead {
	display: block;
	font-size: 32px;
	line-height: 1.4;
	font-weight: 500;
	margin: 0;
}
.project-intro .pi-sub {
	display: block;
	font-size: 24px;
	line-height: 1.5;
	font-weight: 500;
	margin: 0;
}
/* 원본 root font-size 브레이크포인트(0.0526→0.06757→0.08333→0.13021→0.25641 vw) 재현 */
@media ( max-width: 1900px ) {
	.project-intro .pi-h { font-size: 4.208vw; }
	.project-intro .pi-lead { font-size: 1.6832vw; }
	.project-intro .pi-sub { font-size: 1.2624vw; }
}
@media ( max-width: 1480px ) {
	.project-intro .pi-h { font-size: 4.7297vw; }
	.project-intro .pi-lead { font-size: 2.027vw; }
	.project-intro .pi-sub { font-size: 1.554vw; }
}
@media ( max-width: 1200px ) {
	.project-intro .pi-h { font-size: 4.6667vw; }
	.project-intro .pi-lead { font-size: 2.25vw; }
	.project-intro .pi-sub { font-size: 1.75vw; }
}
@media ( max-width: 860px ) {
	.project-intro .pi-h { font-size: 5.9896vw; line-height: 1.1; }
	.project-intro .pi-lead { font-size: 2.9948vw; }
	.project-intro .pi-sub { font-size: 2.474vw; }
}
@media ( max-width: 540px ) {
	.project-intro .pi-h { font-size: 9.7436vw; line-height: 1.2; }
	.project-intro .pi-lead { font-size: 5.641vw; }
	.project-intro .pi-sub { font-size: 4.6154vw; }
}

/* 강조 단어 — 나노h2o 포인트색(주황). 단어분할 span(.pi-word)엔 안 먹도록 전용 클래스만. */
.project-intro .pi-accent {
	color: #ff6727 !important;
}

/* 패널 내 간격 + 폭 (원본 규칙).
 * ★테마 본문 p{max-width:700px}(가독성 제한)이 인트로 문단에 걸려 과한 줄바꿈이 생김 →
 *   원본처럼 리드/제목은 wrap-wide 전체 폭 사용(<br> 만 줄바꿈). 작은문단(b+p)만 576px 제한. */
.project-intro .pi-h,
.project-intro .pi-lead {
	max-width: none !important;
}
.project-intro .pi-h + .pi-lead {
	margin-top: 40px;
}
.project-intro .pi-h + .pi-sub {
	max-width: 576px !important;
	margin-top: 30px;
}
/* 태블릿 이하 — 원본처럼 리드 폭 제한(너무 긴 줄 방지) */
@media ( max-width: 1200px ) {
	.project-intro .pi-lead { max-width: 800px !important; }
}
@media ( max-width: 860px ) {
	.project-intro .pi-lead,
	.project-intro .pi-h + .pi-sub { max-width: 100% !important; }
}

/* 단어 분할 span — transform 을 받도록 inline-block */
.project-intro .pi-word {
	display: inline-block;
	will-change: transform, opacity;
}

/* 몰입 구간 — 헤더 로고/햄버거 + 목록버튼 잠시 숨김 (지나가면 복귀).
 * body.pi-has-droplet / .pi-hide-chrome 는 이 효과 JS 만 토글 → 다른 페이지 무영향. */
/* .fake_logo / .fake_menu_btn_text = 테마가 전환용으로 띄우는 복제본(실제로 보이는 것). #logo/#small_menu 만
 * 숨기면 이 복제본이 남으므로 함께 숨긴다. 인라인/테마 규칙을 확실히 덮도록 !important. */
/* #header = 상단 고정 헤더 바 전체(로고·메뉴·"WE LOVE"·최소화 시 흰 배경 바) — 바째로 숨김.
 * (스크롤 올릴 때 #header.minimize 흰 바가 노출되던 것 차단.) .fake_logo/.back_to_list 는 #header 밖이라 별도. */
body.pi-has-droplet #header,
body.pi-has-droplet .fake_logo,
body.pi-has-droplet .back_to_list {
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.pi-hide-chrome #header,
body.pi-hide-chrome .fake_logo,
body.pi-hide-chrome .back_to_list {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* 모바일 한정 — 몰입 구간엔 하단 스티키바도 잠시 숨김 (로고/GNB 와 함께). 대표 요청 2026-07-14.
 * .sticky-on(스크롤 방향 표시)을 확실히 덮도록 !important. 좁은 화면 공간 확보. */
@media ( max-width: 860px ) {
	body.pi-has-droplet .single_sticky_nav {
		transition: opacity 0.35s ease, visibility 0.35s ease;
	}
	body.pi-hide-chrome .single_sticky_nav {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

/* nanoh2o 본문 — 지정 블록 사이 여백 0 밀착 (대표 지시 2026-07-14).
 * 이미지/영상 기본 마진 160px 를 해당 경계에서만 제거. */
/* 물방울 섹션 ↔ 706077 밀착. (이전에 보이던 120px 갭은 테마 이미지 리빌 transform=translateY(120)이었고,
 * sub-kms.js 제외목록에 nanoh2o 추가로 리빌을 끄면 실제 갭은 0 → 마진 0.) */
.jt_project_detail img.wp-image-706077 { margin-top: 0 !important; }
/* 706086 ↔ 영상 ↔ 706100 (사이 갭 전부 0) */
.jt_project_detail img.wp-image-706086 { margin-bottom: 0 !important; }
.jt_project_detail img.wp-image-706086 + .video_container { margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; max-width: 1903px !important; }
.jt_project_detail img.wp-image-706100 { margin-top: 0 !important; }

/* 반응형 */
@media (max-width: 1024px) {
	.project-intro__item {
		padding: 50px 0;
	}
	.project-intro__wrap {
		padding: 0 32px;
	}
	.project-intro .pi-h + .pi-lead {
		margin-top: 26px;
	}
	.project-intro .pi-h + .pi-sub {
		margin-top: 26px;
	}
}
@media (max-width: 640px) {
	.project-intro__item {
		padding: 40px 0;
	}
	.project-intro__wrap {
		padding: 0 24px;
	}
	.project-intro .pi-lead br,
	.project-intro .pi-sub br {
		display: none;
	}
	.project-intro .pi-h + .pi-lead,
	.project-intro .pi-h + .pi-sub {
		max-width: 100%;
		margin-top: 20px;
	}
}