@charset "utf-8";
/* ============================================================================
 * motion_sub.css — DEEP SQUARE 서브 페이지 모션
 * [2026-10-15] 2차 작업 지시서. 짝이 되는 스크립트는 js/motion_sub.js.
 * 헤더·푸터 숨김 상태는 메인과 같은 css/motion.css 15절을 그대로 쓴다(서브에도 싣는다).
 * 물속 효과 모양은 css/water.css(메인과 공통).
 * ========================================================================== */


/* ── 1. 첫 그리기 가림 ──────────────────────────────────────────────────
   서브는 페이지마다 등장 대상이 달라 메인처럼 CSS 로 미리 숨겨 둘 수 없다. 스크립트가 대상을
   투명하게 만든 다음 html.ds-sub-ready 를 붙일 때까지만 본문을 가린다(보통 0.1초 안팎).
   스크립트가 돌지 않으면 header.html 의 안전장치가 3초 뒤 hdg-motion 을 떼어 가림이 풀린다. */
html:is(.hdg-motion, .hdg-fade):not(.ds-sub-ready) body.sub #container {
	visibility: hidden;
}


/* ── 2. 물속 효과를 깔기 위한 위치·층 ─────────────────────────────────────
   효과 레이어(.ds-water · .ds-hero-water · 기포 캔버스)는 z-index:0, 본문은 그 위(1)로 올린다.
   원래 position 이 static 인 자식만 relative 로 바꾼다(.ds-wkid). 이미 떠 있는 요소(로그인 상자 등)는
   배치를 건드리지 않고 층만 올린다(.ds-wkid-pos). 둘 다 js/motion_sub.js lift() 가 붙인다. */
html.hdg-motion .ds-wsec {
	position: relative;
	isolation: isolate;
}
html.hdg-motion .ds-wsec > .ds-wkid {
	position: relative;
	z-index: 1;
}
html.hdg-motion .ds-wsec > .ds-wkid-pos {
	z-index: 1;
}
/* 상단 배너·로그인 배경은 단락 높이가 화면보다 크지 않아 넘침이 생기지 않지만, 물빛 캔버스가
   반올림으로 1px 넘칠 수 있어 잘라 둔다 */
html.hdg-motion #sub_con > .banner_con.ds-wsec,
html.hdg-motion .login_con > .contents_con.ds-wsec {
	overflow: hidden;
}


/* ── 3. 배너 큰 제목 글자 쪼개기 ───────────────────────────────────────────
   단어 묶음(.ds-w)은 한 덩어리로 줄을 바꾼다 — 낱글자 사이에서 줄이 바뀌면 단어 단위
   줄바꿈(keep-all)이 깨진다. */
.ds-w {
	white-space: nowrap;
}


/* ── 4. 가로 넘침 막기 ─────────────────────────────────────────────────────
   [2026-10-15] 검수 "시설안내 접속 시 가로 스크롤". 등장 모션이 덩어리를 좌우로 조금 밀었다가 되돌리는데,
   메인은 바깥 틀(#main_con)이 넘침을 잘라 주지만 서브에는 그런 틀이 없어 가로 스크롤바가 생겼다.
   overflow-x: clip — hidden 과 달리 스크롤 영역을 만들지 않아 세로 스크롤·sticky 에 영향이 없다.
   (지원하지 않는 옛 브라우저에서는 무시될 뿐이고, 넓은 덩어리는 JS 가 좌우로 밀지 않는다) */
html:is(.hdg-motion, .hdg-fade) body.sub #container {
	overflow-x: clip;
}


/* ── 5. 사진 배경 고정 (PC · 마우스 기기) ───────────────────────────────────
   [2026-10-15] 검수 "holidayinn.gabia.io 처럼 고정". js/motion_sub.js ①-2 가 클래스를 붙인다.
   .ds-fixed-bg  CSS 배경 단락 — 레퍼런스와 같은 background-attachment:fixed (cover 는 화면 기준이 된다)
   .ds-fixhost   <img> 슬라이드 — 원래 사진은 자리(높이)만 지키고 숨기며, 뒤 레이어(.ds-fixlayer)가
                 화면 높이만큼의 사진을 들고 스크롤 반대로 움직여 제자리에 있는 것처럼 보인다.
   모바일·터치(1024px 이하, hover 없음)에서는 아무것도 바꾸지 않는다 — 원래 화면 그대로. */
.ds-fixlayer {
	display: none;
}
@media (min-width: 1025px) and (hover: hover) {
	html.hdg-motion body.sub .ds-fixed-bg {
		background-attachment: fixed;
	}
	html.hdg-motion body.sub .ds-fixhost {
		position: relative;
		overflow: hidden;
	}
	html.hdg-motion body.sub .ds-fixhost > .ds-fixlayer {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		will-change: transform;
		pointer-events: none;
	}
	html.hdg-motion body.sub .ds-fixhost > img {
		visibility: hidden;
	}
}


/* ── 6. 사진 덩어리 등장 (js/motion_sub.js ④-2) ─────────────────────────────
   [2026-10-15] 바깥 틀은 움직이지 않고, 사진이 조여들며 어둠 막이 걷힌다.
   막 색은 메인 예약 단락의 어둠(.ds-dark)과 같은 깊은 남색. 글(.txt_con)은 DOM 순서상 막보다 위에 그려진다. */
html.hdg-motion body.sub .ds-stagehost {
	position: relative;
	overflow: hidden;
}
html.hdg-motion body.sub .ds-stage-veil {
	position: absolute;
	inset: 0;
	background: rgba(2, 12, 34, 1);
	pointer-events: none;
}