@charset "utf-8";
/* ============================================================================
 * motion.css — DEEP SQUARE 모션
 * $Motion = "Y" 인 페이지에서만 로드된다 (include/header.html 분기).
 *
 * 담당 범위: #main_con 전체 — "심해에서 헤엄치는" 스크롤 리빌
 *            1~13절 = info03(물 레이어·기포·다이버까지 갖춘 심해 단락)
 *            14절    = info01·02·04·05(리빌 언어만 공유, 물 레이어 없음)
 *
 * 설계 근거
 *  - 리빌 전 초기 상태를 CSS 로 미리 걸어 깜빡임(FOUC)을 막는다.
 *    단, prefers-reduced-motion 이면 html.hdg-motion 이 안 붙으므로
 *    아래 숨김 규칙 전체가 적용되지 않는다 → 접근성 대응이 구조적으로 보장된다.
 *    (_lib/motion/recipes/01)
 *  - 리빌이 끝나면 JS 가 .ds-in 을 붙인다. :not(.ds-in) 으로 규칙이 꺼지므로
 *    gsap clearProps 후에도 다시 숨지 않고, li.close{opacity:.5} 같은
 *    기존 상태 스타일도 그대로 살아난다. (!important 를 쓰지 않는 이유)
 *  - 물 레이어는 transform 만 애니메이션한다. blur 는 정적으로 한 번만 굽는다.
 *    backdrop-filter 가 3곳 있어(select/date_group/btn) 합성 비용에 여유가 없다.
 *    (_lib/motion/recipes/03)
 * ========================================================================== */


/* ── 1. 리빌 전 초기 상태 ─────────────────────────────────────────────────
   레이아웃은 그대로 두고(visibility) 그리기만 막는다.
   Swiper 가 슬라이드 폭을 재는 데 지장이 없어야 하므로 display:none 은 쓰지 않는다.

   두 가지 모드가 같은 초기 상태를 쓴다.
     .hdg-motion — 평상시. 떠오르기 + 블러 + 부유 + 물결
     .hdg-fade   — OS "동작 줄이기"가 켜졌을 때. 자리 이동 없이 불투명도만 페이드
   둘 다 아니면(스크립트 실패 등) 이 규칙 자체가 안 걸려 컨텐츠가 그냥 보인다. */
html:is(.hdg-motion, .hdg-fade) #main_con > .info03_con :is(
	.reserv_con .td_con > .txt_con > .title_con,
	.reserv_con .td_con > .txt_con > .text_con,
	.reserv_con .td_con > .ti_con > .text_con,
	.reserv_con .td_con > .ti_con > .form_con,
	.reserv_con .table_con > .title_con,
	.reserv_con .table_con > .list_con > ul > li,
	.reserv_con .table_con > .btn_con,

	.intro_con > .contents_con > .txt_con > .title_con,
	.intro_con > .contents_con > .txt_con > .text_con,
	.intro_con > .contents_con > .list_con > ul > li > .list_div,
	.intro_con > .contents_con > .list_con > ul > li > .bar_con,
	.intro_con > .contents_con > .bg_element,
	.intro_con > .contents_con > .slide_con,

	.info_con > .contents_con > .txt_con > .title_con,
	.info_con > .contents_con > .txt_con > .text_con,
	.info_con > .contents_con > .slide_con > .locker_con > .title_con,
	.info_con > .contents_con > .slide_con > .locker_con > .slide_con,
	.info_con > .contents_con > .slide_con > .recess_con > .title_con,
	.info_con > .contents_con > .slide_con > .recess_con > .slide_con
):not(.ds-in) {
	opacity: 0;
	visibility: hidden;
}


/* ── 2. 물 레이어를 깔기 위한 위치/층 정리 ───────────────────────────────
   .ds-water 는 info03 전체에 한 장 absolute 로 깔린다(맨 끝에 붙는 z-index:0).
   DOM 순서상 블록 배경 뒤에 그려지고, 본문은 그 위에 오도록 컨텐츠 래퍼에 z-index 를 준다.
   .intro_con 의 컨텐츠는 이미 z-index:10 이 있다. */
html.hdg-motion #main_con > .info03_con {
	position: relative;
}
html.hdg-motion #main_con > .info03_con > .contents_con > .reserv_con,
html.hdg-motion #main_con > .info03_con > .contents_con .intro_con,
html.hdg-motion #main_con > .info03_con > .contents_con .info_con {
	position: relative;
}
html.hdg-motion #main_con > .info03_con > .contents_con > .reserv_con > .contents_con,
html.hdg-motion #main_con > .info03_con > .contents_con .info_con > .contents_con {
	position: relative;
	z-index: 1;
}


/* ── 3. 물 레이어 · 8. 물방울 · 8-2. 첫 화면 물빛 ─────────────────────────
   [2026-10-15] css/water.css 로 옮겼다 — 서브 페이지와 같은 코드를 쓴다(2차 작업 지시서 3번).
   값은 바꾸지 않았다. header.html 이 motion.css 보다 먼저 싣는다. */


/* ── 4. 트윈 중 backdrop-filter 끄기 ─────────────────────────────────────
   transform 으로 움직이는 동안 배경을 매 프레임 다시 블러하면 프레임이 무너진다.
   등장 1.4초 동안만 끈다 — 반투명하게 움직이는 중이라 눈에 띄지 않는다.
   (_lib/motion/recipes/03, blueocean 31.5fps → 57.6fps) */
.ds-blurless,
.ds-blurless * {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}


/* ── 5. 모바일 ───────────────────────────────────────────────────────────
   빛줄기를 약하게 한다. 물방울·부유물 수는 JS 가 화면 폭을 보고 줄인다. */
@media (max-width: 1024px) {
	/* .ds-caustic 모바일 세기(0.7)는 css/water.css 로 옮겼다 [2026-10-15] */

	/* [2026-09-22] 검수 의견 "모바일에서 같은 모션이 계속 중복 발생".
	   리빌은 한 번만 재생되는 것을 확인했고(왕복 3회 측정), 반복되던 건 강조용 파동 링과
	   화살표다. 좁은 화면에서는 계속 도는 게 거슬린다 — 몇 번 치고 멈춘다.
	   데스크탑은 그대로 둔다. */
	/* 파동 링·화살표 반복 제한은 파일 끝(13절)에 둔다 — 기본 규칙(9절)보다 뒤여야 이긴다 */
	/* 모바일 사진(m_info03_con_reserv_con_top_bg.png)은 태양이 가로 57% 에 있다 */
	.ds-light { --ds-sun-x: 57%; }
}


/* ── 6. 접근성 — 물 효과 정지 규칙은 css/water.css 로 옮겼다 [2026-10-15] ── */

/* ── 7. 가운데 다이버 ─────────────────────────────────────────────────────
   GSAP 이 transform 을 쓰므로 CSS 의 translateX(-50%) 는 비운다
   (남겨 두면 GSAP 이 그 값을 px 로 굳혀 창 크기가 바뀔 때 가운데가 어긋난다).
   대신 transform 과 별개인 translate 속성으로 가운데를 잡는다 —
   GSAP 이 transform 만 건드리므로 둘이 부딪히지 않고, 가운데 정렬이 JS 와 무관해진다.

   [2026-09-22] 전에는 JS 가 xPercent:-50 으로 가운데를 잡았다. 그래서 motion.js 가 돌기
   전까지 다이버가 오른쪽으로 절반(129px) 밀려 있다가 가운데로 튀었다 — 검수에서
   "다이버가 오른쪽에서 가운데로 올 때 오류" 로 지적된 현상. */
html.hdg-motion #main_con > .info03_con > .contents_con .intro_con > .contents_con > .bg_element > .img_con {
	transform: none;
	translate: -50% 0;
	will-change: transform;
}


/* ── 9. 예약 단락 ─────────────────────────────────────────────────────────
   반복 요소 두 가지. 둘 다 transform/opacity 만 움직이고, 단락이 화면 밖이면 멈춘다
   (JS 가 .reserv_con 에 .ds-live 를 토글). 처음에는 display:none — 등장 연출이 끝난 뒤
   JS 가 .ds-ping-on / .ds-nudge 를 붙여야 시작한다. */

/* "지금, 바로 예약하세요" 는 줄 단위로 쪼개 마스크 안에서 올린다. 줄 요소는 블록이라
   부모 span 이 인라인이면 줄 폭 계산이 흔들린다 — 블록으로 바꾼다(부모 div 안에 혼자라 배치는 같다). */
html.hdg-motion #main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .txt_con > .text_con > span {
	display: block;
}

/* 파동 링 — 조회하기 · 예약 가능한 [예약하기] */
html.hdg-motion #main_con > .info03_con .reserv_con .form_con .input_con > .btn_con,
html.hdg-motion #main_con > .info03_con .reserv_con .table_con .btn_td > a {
	position: relative;
}
.ds-ping {
	display: none;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1.5px solid rgba(140, 205, 255, 0.8);
	pointer-events: none;
}
.ds-ping-on > .ds-ping {
	display: block;
	animation: ds-ping 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
/* 퍼지는 건 앞 55% 뿐이고 나머지는 쉰다 — 계속 퍼지면 경고등처럼 보인다 */
@keyframes ds-ping {
	0%   { transform: scale(1);    opacity: 0.8; }
	55%  { transform: scale(1.28); opacity: 0; }
	100% { transform: scale(1.28); opacity: 0; }
}
/* 버튼이 여러 개면 박자를 어긋나게 */
.reserv_con .list_con li:nth-child(2n) .ds-ping-on > .ds-ping { animation-delay: 1.2s; }
.reserv_con .list_con li:nth-child(3n) .ds-ping-on > .ds-ping { animation-delay: 2.4s; }

/* 모바일 파동 링 — 크기 배율(scale)이 아니라 사방 같은 px 만큼 퍼진다.
   [2026-09-22] 검수 의견 "파동이 컨텐츠 영역 밖으로 나가 잘린다".
   모바일은 버튼이 가로로 꽉 차 있어(조회하기 320px) scale(1.28)이면 좌우로 45px 씩 필요한데
   잘리는 조상까지 여유가 20px 뿐이었다. 사방 2.5vw(360px 기준 9px)로 바꿔
   세로는 버튼 높이의 약 1.3배로 퍼지면서 가로는 여유 안에 들어온다. */
@keyframes ds-ping-m {
	0%   { inset: 0;       opacity: 0.8; }
	55%  { inset: -2.5vw;  opacity: 0; }
	100% { inset: -2.5vw;  opacity: 0; }
}

/* 빛 훑기 — [예약하기] 가 나타날 때 한 번 */
.ds-shine-wrap {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}
.ds-shine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
	transform: translateX(-130%);
}

/* 더많은 예약정보 확인하기 — 화살표가 살짝씩 앞으로 */
.ds-nudge > a > img {
	animation: ds-nudge 1.8s ease-in-out infinite alternate;
}
@keyframes ds-nudge {
	0%   { transform: translateX(0); }
	100% { transform: translateX(5px); }
}

.reserv_con:not(.ds-live) .ds-ping,
.reserv_con:not(.ds-live) .ds-nudge > a > img {
	animation-play-state: paused;
}


/* ── 10. 예약 배경 — 어둠 속에서 빛이 들어오며 다이버가 드러난다 ─────────────
   JS(reservLight)가 .reserv_con 첫 자식으로 넣고 스크롤에 물려 움직인다.
   위치 기준: 사진 속 태양 가로 63%·세로 4% (1905x1043 블록에서 실측).
   세 레이어 모두 블록 아래 절반은 투명하다 — 아래 블록과 경계선이 생기지 않게. */
.ds-light {
	/* 위치·크기는 JS(photoLayer)가 :before 사진 박스에 맞춰 인라인으로 넣는다 */
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.ds-light > div {
	position: absolute;
	inset: 0;
	will-change: transform, opacity;
}
/* 어둠 — 다이버가 있는 오른쪽 위를 가장 짙게 덮는다 */
.ds-dark {
	/* [2026-09-22] 사진이 :before(1920x693, 위쪽 고정)로 바뀌어 좌표를 다시 쟀다 —
	   태양 가로 62%·세로 6%, 다이버 가로 66~78%·세로 5~22% (이미지 파일에서 실측) */
	background:
		radial-gradient(ellipse 62% 70% at 70% 15%, rgba(2, 12, 34, 0.94) 0%, rgba(2, 12, 34, 0.86) 45%, rgba(2, 12, 34, 0) 100%),
		linear-gradient(180deg, rgba(2, 12, 34, 0.72) 0%, rgba(2, 12, 34, 0.4) 42%, rgba(2, 12, 34, 0) 78%);
}
/* 태양 — 수면에서 번지는 빛. 넓게 퍼지도록 반경을 키우고 단계를 늘렸다 */
.ds-sun {
	transform-origin: var(--ds-sun-x, 62%) 6%;
	background: radial-gradient(circle at var(--ds-sun-x, 62%) 6%,
		rgba(228, 249, 255, 0.42) 0%,
		rgba(190, 234, 255, 0.22) 16%,
		rgba(170, 225, 255, 0.09) 36%,
		rgba(170, 225, 255, 0) 60%);
}
/* 빛줄기 — 태양 자리에서 부채꼴로 내려온다. 위끝을 축으로 scaleY 해서 "뻗어 내려오는" 모양.
   [2026-09-17] 검수 의견 "햇빛이 날카롭다 — 더 퍼져 보이게". 처음엔 7° 간격에 줄 하나 약 4° 의
   가는 줄무늬라 무늬처럼 보였다. 두 겹으로 바꿨다.
     1) 넓은 원추 — 태양에서 퍼지는 큰 빛 기둥. 줄 사이를 은은하게 채운다
     2) 성긴 줄 — 13° 간격, 가장자리를 끝까지 번지게(평평한 구간 없이 삼각형 모양 그라디언트)
   필터 블러는 쓰지 않는다 — scaleY 가 스크롤에 물려 있어 매 프레임 다시 그리게 된다. */
.ds-beams {
	transform-origin: var(--ds-sun-x, 62%) 0%;
	background:
		conic-gradient(from 150deg at var(--ds-sun-x, 62%) -6%,
			rgba(205, 240, 255, 0) 0deg,
			rgba(205, 240, 255, 0.08) 16deg,
			rgba(215, 244, 255, 0.14) 30deg,
			rgba(205, 240, 255, 0.08) 44deg,
			rgba(205, 240, 255, 0) 60deg,
			rgba(205, 240, 255, 0) 360deg),
		repeating-conic-gradient(from 120deg at var(--ds-sun-x, 62%) -6%,
			rgba(215, 245, 255, 0) 0deg,
			rgba(215, 245, 255, 0.07) 5deg,
			rgba(215, 245, 255, 0) 10deg,
			rgba(215, 245, 255, 0) 13deg);
	-webkit-mask-image: radial-gradient(ellipse 62% 82% at var(--ds-sun-x, 62%) 0%, #000 0%, rgba(0, 0, 0, 0.45) 48%, transparent 100%);
	        mask-image: radial-gradient(ellipse 62% 82% at var(--ds-sun-x, 62%) 0%, #000 0%, rgba(0, 0, 0, 0.45) 48%, transparent 100%);
}


/* ── 11. 시설 배경 — 해파리·산호가 숨었다 나오고 반짝인다 ────────────────────
   JS(infoGlow)가 대상마다 .ds-obj 상자를 .info_con 첫 자식들로 넣는다(위치·크기는 %).
     .ds-obj-dark  대상 자리를 주변 물색으로 덮는다 → 스크롤하면 걷힌다
     .ds-obj-wrap  스크롤에 따라 0→1 (나타나기)
     .ds-obj-glow  밝게 한 배경 사본. 대상 모양만 보이게 가리고, CSS 로 깜빡인다
   wrap 과 glow 를 나눈 이유 — 스크롤 연출(JS)과 깜빡임(CSS)이 둘 다 opacity 를 쓰기 때문. */
html.hdg-motion #main_con > .info03_con .info_con {
	position: relative;
}
/* 대상 상자들이 들어가는 사진 박스(JS 가 :before 와 같은 크기·위치로 만든다) */
.ds-objs {
	z-index: 0;
	pointer-events: none;
}
.ds-obj {
	position: absolute;
	/* z-index 를 주지 않는다. 주면 이 상자가 독립된 쌓임 영역이 되어, 안쪽 스크린 합성이
	   배경 사진이 아니라 빈 상자와 합성된다 — 반짝임이 오히려 원본보다 어두워졌다.
	   본문(.contents_con)은 z-index:1 이라 이 상자는 여전히 그 아래에 깔린다. */
	pointer-events: none;
}
.ds-obj > div,
.ds-obj-glow {
	position: absolute;
	inset: 0;
}
/* 주변 물이 거의 검정(#000d24 근처)이라 덮어도 얼룩이 보이지 않는다 */
.ds-obj-dark {
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(1, 9, 26, 0.96) 0%, rgba(1, 9, 26, 0.92) 55%, rgba(1, 9, 26, 0) 100%);
}
.ds-obj.coralR > .ds-obj-dark,
.ds-obj.coralL > .ds-obj-dark {
	/* 산호는 블록 아래끝에 붙어 있다 — 아래쪽까지 짙게 덮는다 */
	background: radial-gradient(ellipse 55% 75% at 50% 75%, rgba(1, 9, 26, 0.96) 0%, rgba(1, 9, 26, 0.92) 55%, rgba(1, 9, 26, 0) 100%);
}
/* 밝은 부분만 더한다.
   [2026-09-17] 처음엔 brightness(2.1) 사본을 그냥 겹쳤더니 주변 물까지 파랗게 올라가 둥근 테두리가 보였다.
   이 사진의 "검은" 물은 사실 짙은 남색이라 파란 채널이 살아 있다 — 밝기를 먼저 올리면 같이 뜬다.
   그래서 대비를 먼저 걸어 남색 물을 검정으로 눌러 두고, 그 다음에 밝기를 올린다(순서가 중요).
   스크린 합성으로 겹쳐 검정은 아무것도 더하지 않는다.
   실측(반짝임 최고점, 원본 대비 밝기 증가): 주변 물 +0.4 · 산호 밝은 곳 +11 */
.ds-obj-wrap {
	mix-blend-mode: screen;
}
.ds-obj-glow {
	filter: contrast(2.2) brightness(2.8) saturate(1.3);   /* 정적 필터 — 한 번만 굽고, 움직이는 건 opacity 뿐 */
	opacity: 0;
	will-change: opacity;
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
	        mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
}
/* 해파리는 사진에서 훨씬 어둡다 — 대비는 같게(물은 검정 유지), 밝기만 더 올린다 */
.ds-obj.jelly .ds-obj-glow {
	filter: contrast(2.2) brightness(4) saturate(1.3);
}
.ds-obj.coralR .ds-obj-glow,
.ds-obj.coralL .ds-obj-glow {
	-webkit-mask-image: radial-gradient(ellipse 55% 80% at 50% 70%, #000 35%, transparent 100%);
	        mask-image: radial-gradient(ellipse 55% 80% at 50% 70%, #000 35%, transparent 100%);
}

/* 발광 생물의 반짝임 — 평소엔 은은하게, 가끔 두 번 번쩍.
   번쩍임 사이 간격이 최소 0.2초 이상이라 초당 3회를 넘지 않는다. */
@keyframes ds-glim {
	0%   { opacity: 0.12; }
	8%   { opacity: 0.12; }
	11%  { opacity: 0.75; }
	15%  { opacity: 0.22; }
	19%  { opacity: 0.6; }
	28%  { opacity: 0.14; }
	56%  { opacity: 0.16; }
	60%  { opacity: 0.48; }
	70%  { opacity: 0.12; }
	100% { opacity: 0.12; }
}
.ds-live .ds-obj.jelly  .ds-obj-glow { animation: ds-glim 4.8s ease-in-out infinite; }
.ds-live .ds-obj.coralR .ds-obj-glow { animation: ds-glim 6.4s ease-in-out -2.1s infinite; }
.ds-live .ds-obj.coralL .ds-obj-glow { animation: ds-glim 7.7s ease-in-out -4.3s infinite; }


/* ── 13. 모바일 강조 효과 조정 ───────────────────────────────────────────────
   9절(파동 링·화살표) 뒤에 와야 덮어쓸 수 있어 파일 끝에 둔다.

   [2026-09-22] 검수 의견 두 가지를 반영한다.
     "같은 모션이 계속 중복 발생" → 좁은 화면에서 무한 반복이 거슬린다. 몇 번 치고 멈춘다.
     "파동이 컨텐츠 밖으로 나가 잘린다" → 모바일은 버튼이 가로로 꽉 차 있어(조회하기 320px)
        scale(1.28) 이면 좌우로 45px 씩 필요한데 잘리는 조상까지 여유가 20px 뿐이었다.
        크기 배율 대신 사방 같은 px(2.5vw ≒ 360px 기준 9px)로 퍼지게 해서
        세로는 버튼 높이의 약 1.3배가 되고 가로는 여유 안에 들어온다. */
@media (max-width: 1024px) {
	.ds-ping-on > .ds-ping {
		animation: ds-ping-m 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) 2;
	}
	.ds-nudge > a > img { animation-iteration-count: 4; }
}
@keyframes ds-ping-m {
	0%   { inset: 0;      opacity: 0.8; }
	55%  { inset: -2.5vw; opacity: 0; }
	100% { inset: -2.5vw; opacity: 0; }
}


/* ── 14. 나머지 단락 (info01 · 02 · 04 · 05) ──────────────────────────────
   [2026-09-23] 검수 요청 "메인의 다른 단락들도 비슷한 느낌으로".

   info03 과 같은 방식이다 — 리빌 전 초기 상태를 CSS 로 미리 걸어 깜빡임을 막고,
   JS 가 .ds-in 을 붙이는 순간 규칙이 꺼진다. 숨기는 목록은 motion.js 의
   mainGroups() / heroMotion() 이 실제로 되살리는 것과 하나씩 짝이 맞아야 한다 —
   여기에만 있고 JS 에 없으면 그 요소는 영영 안 보인다.

   [2026-10-14] 예외 — info01(어두운 수중 사진)에는 전용 물빛 캔버스를 깐다(8-2절, 빛 그물·빛줄기·반짝임).
   물 레이어(.ds-water)와 기포 캔버스는 여기에 깔지 않는다. 흰 배경 단락에서
   방울이 솟으면 물속이 아니라 화면 먼지로 읽히고, 네 단락의 쌓임 순서
   (배경 사진 · 그림자 카드 · 어두운 푸터)를 전부 다시 짜야 한다. */
html:is(.hdg-motion, .hdg-fade) #main_con > .info01_con :is(
	.contents_con > .txt_con > .text01_con,
	.contents_con > .txt_con > .text02_con,
	.contents_con > .btn_con > ul > li,
	.contents_con > .scroll_con
):not(.ds-in),

html:is(.hdg-motion, .hdg-fade) #main_con > .info02_con :is(
	.contents_con > .title_con,
	.contents_con > .txt_con > .title_con,
	.contents_con > .txt_con > .text_con,
	.contents_con > .btn_con
):not(.ds-in),

html:is(.hdg-motion, .hdg-fade) #main_con > .info04_con :is(
	.contents_con > .txt_con > .title_con,
	.contents_con > .txt_con > .text_con,
	.info04_slide_div > .contents_con
):not(.ds-in),

html:is(.hdg-motion, .hdg-fade) #main_con > .info05_con :is(
	.notice_con > .title_con > .txt_con > .title_con,
	.notice_con > .title_con > .txt_con > .text_con,
	.notice_con > .title_con > .btn_con,
	.notice_con > .list_con > ul > li,
	.faq_con > .title_con > .txt_con > .title_con,
	.faq_con > .title_con > .txt_con > .text_con,
	.faq_con > .title_con > .btn_con,
	.faq_con > .list_con > ul > li
):not(.ds-in) {
	opacity: 0;
	visibility: hidden;
}

/* 첫 화면 배경은 scale(1.09) 에서 조여든다 — 넘치는 만큼을 잘라내지 않으면
   가로 스크롤바가 생긴다. */
html.hdg-motion #main_con > .info01_con > .bg_con {
	overflow: hidden;
}


/* ── 15. 헤더 · 푸터 ──────────────────────────────────────────────────────
   [2026-09-23] 검수 요청 "헤더, 푸터쪽도 모션 추가".

   숨기는 대상은 style.css 가 transition:all .3s 를 걸지 '않은' 바깥쪽 요소다
   (a · .info_con > ul · .btn_con a 는 전환이 걸려 있어 GSAP 과 매 프레임 부딪힌다).

   서브메뉴와 모바일 전체메뉴는 여기서 숨기지 않는다 — jQuery 가 여는 요소라
   스크립트가 죽으면 메뉴가 영영 안 보이게 된다. 그쪽은 GSAP 으로만 연출한다.

   푸터는 본문과 다른 언어를 쓴다(motion.js 의 footerMotion) — 떠오르지 않고
   왼쪽에서 오른쪽으로 훑고 지나간다. 숨김 상태만 여기서 같이 건다.

   헤더를 미리 숨기므로 첫 그리기 뒤 약 0.5초 동안 헤더가 비어 있다(실측 473ms).
   히어로 글자도 같은 순간까지 숨어 있어 "사진만 있다가 위에서부터 차오른다"로
   읽히는 구간이다 — 헤더만 늦는 게 아니다. */
html:is(.hdg-motion, .hdg-fade) #header > .contents_con :is(
	.logo_con,
	.list_con > ul > li,
	.user_con > .auth_con,
	.user_con > .btn_con > ul > li,
	.user_con > .btn_con > .btn_con
):not(.ds-in),

html:is(.hdg-motion, .hdg-fade) #footer > .contents_con :is(
	.terms_con > ul > li,
	.logo_con,
	.info_con > ul > li
):not(.ds-in) {
	opacity: 0;
	visibility: hidden;
}

/* 메뉴 밑줄 hover 와 푸터 약관 화살표 hover 는 css/style.css 의
   @media (hover: hover) 블록으로 옮겼다 [2026-09-23] — hover 는 모션이 아니라
   기본 동작이라 모션을 안 싣는 페이지에서도 있어야 한다. */