/* ============================================================================
   98-world-embed.css — scroll-world 를 랜딩 안에 끼워 넣기 위한 레이어
   ----------------------------------------------------------------------------
   엔진의 레이어는 전부 position:fixed 다. 그런데 이 테마의 #smooth-content 는
   GSAP ScrollSmoother 가 transform 을 걸어 두므로, 그 안에 두면 fixed 가
   absolute 처럼 동작해 버린다. 그래서 레이어는 #etribe-world-layers (스무스
   래퍼 밖) 에 호스팅하고, 스크롤 길이를 만드는 .sw-track 만 문서 흐름에 남긴다.
   ========================================================================== */

/* 브랜드 토큰 — 엔진 기본값(@layer sw)보다 우선한다(언레이어드 규칙). */
:root,
#etribe-world,
#etribe-world-layers {
	--sw-bg: #F6F7F7;          /* 장면 배경과 동일 — 포스터가 페이지에 붙는다 */
	--sw-ink: #050505;         /* 사이트 h1 색 */
	--sw-ink-soft: #5A5E57;
	--sw-accent: #D3ED31;      /* 브랜드 라임 */
	--sw-font-display: var(--tj-ff-heading, Manrope, PretendardKR, sans-serif);
	--sw-font-body: var(--tj-ff-body, Inter, PretendardKR, sans-serif);
}

/* 고정 레이어 호스트 — 헤더(z:98) 아래, 본문 위. 자식의 pointer-events:auto 는 그대로 산다. */
#etribe-world-layers {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	contain: layout paint;
}

/* 스크롤 길이 스페이서가 놓이는 자리. 레이어가 페이드아웃할 때 뒤로 비치는
   바탕이 장면 배경과 같아야 진입/이탈이 이음새 없이 보인다. */
#world.etribe-world-section {
	position: relative;
	background: var(--sw-bg);
	/* 디졸브(0.25화면)가 앞 섹션 본문이 아니라 마퀴 띠 + 이 여백 위에서만
	   일어나도록 확보하는 간격. 이 값을 줄이면 월드가 카드 위로 올라온다. */
	padding-top: 90px;
}

/* 한국어 조판 — 어절 단위 줄바꿈 (사이트 전역 규칙과 동일) */
#etribe-world-layers .sw-copy,
#etribe-world-layers .sw-copy * {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ---- 스탠드얼론 크롬 제거 ----------------------------------------------------
   :10872/world/ 는 독립 페이지라 자체 GNB·라우트 도트·상단 진행바·스크롤 힌트를
   달고 있었다. 여기서는 이 월드가 랜딩의 "한 섹션"이어야 하므로 전부 없앤다.
   화면에 남는 것 = 장면 영상 + 그 장면의 제목·설명. */
#etribe-world-layers .sw-topbar,
#etribe-world-layers .sw-route,
#etribe-world-layers .sw-scrollbar,
#etribe-world-layers .sw-hint,
#etribe-world-layers .sw-copy__num {
	display: none !important;
}

/* 카피는 사이트 본문과 같은 폰트 스케일로. 히어로 H1 다음에 바로 오므로
   제목이 H1 과 경쟁하지 않도록 한 단계 낮춘다. */
#etribe-world-layers .sw-copy__title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	letter-spacing: -0.02em;
	line-height: 1.18;
}

#etribe-world-layers .sw-copy__body {
	margin-top: 14px;
}


/* 월드가 화면을 채우는 동안에는 back-to-top 버튼이 장면 위에 뜬다.
   z-index 를 레이어보다 위로 올려 계속 누를 수 있게 한다. */
.back-to-top-wrapper {
	z-index: 95;
}

/* ── 모바일(세로) ────────────────────────────────────────────────────────────
   한때 여기에 "영상을 118vw 로 키우고 카피를 아래로 내리는" 임시 배치가 있었다.
   16:9 클립을 세로 화면에 cover 로 넣으면 원본 프레임의 26% 만 남아서(390x844
   실측, 좌우 74% 잘림) 장면의 핵심 — 1번 장면의 폰·스탠드·노트북, 3번 장면의
   외곽 랙 — 이 통째로 사라졌기 때문이다.

   지금은 9:16 네이티브 체인을 따로 렌더해 clipMobile/connectorsMobile 로 물렸다.
   영상 자체가 세로라 엔진 기본값(풀블리드 cover + 하단 카피 + 스크림)이 그대로
   맞는다 → 임시 배치는 걷어냈다. 데스크탑과 같은 연출이 폰에서도 성립한다.

   가로(landscape)는 화면비가 16:9 에 가까워 데스크탑 클립이 더 맞지만, 엔진의
   isMobile() 은 폭·포인터로만 판단해 세로본을 준다. 세로 영상이 가로 화면을
   cover 로 채우면 위아래가 심하게 잘리므로, 가로에서만 contain 으로 되돌려
   프레임 전체를 보이게 한다(배경은 장면 배경과 같아 여백이 튀지 않는다). */
@media (max-width: 860px) and (orientation: landscape) {
	#etribe-world-layers .sw-scene__video,
	#etribe-world-layers .sw-scene__still {
		object-fit: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	#etribe-world-layers { transition: none; }
}

/* GNB — 섹션 3~10 이 scroll-world 로 대체되면서 메뉴가 6→3 개로 줄었다.
   남는 슬롯은 content.json 에서 href="#__drop" 로 표시하고 여기서 숨긴다.
   (마크업 구조는 건드리지 않는다 = 테마 원본 유지) */
li:has(> a[href="#__drop"]) {
	display: none !important;
}

/* 숨긴 항목이 마지막일 때, 그 앞 항목의 구분점(::before)이 끝에 남는다. */
li:has(+ li > a[href="#__drop"])::before {
	display: none !important;
}

li:has(+ li > a[href="#__drop"]) {
	margin-right: 0 !important;
	padding-right: 0 !important;
}