/* UI 키트 토큰 정본 — 이 파일 위치(assets/css/) 기준 상대경로.
   @import 는 <base href> 영향을 받지 않으므로 index.html 에서도 동작한다.
   (반드시 스타일시트 최상단: @charset 외 다른 규칙보다 먼저) */
@import url("kit/tokens.css");

/* ==============================================================
   templete_v1.css — 카시아 속초 "메인 페이지" 전용 스타일
   index.html 인라인 <style> 에서 분리. 이 파일만 고치면 메인에 반영.
   (공유 헤더=site-header.js / 공유 푸터=site-footer.js 는 각 JS 안에 별도 보유)

   [목차 — 어느 섹션에서 쓰는지]
   1) 원본 기본 CSS (전 섹션 공통 · 반응형 3단)
      · style.css      데스크톱 기본  → #wrap, .section, #rooms, #videoWrap …
      · style_tab.css  태블릿 @≤1400  → 위 섹션 오버라이드
      · style_mob.css  모바일 @≤767   → 위 섹션 오버라이드
   2) 라이브러리
      · slick.css      → #rooms 객실 캐러셀
      · swiper.min.css → solution 탭 / og-ocean 슬라이더 (미사용 모듈 제거)
   3) 커스텀 (섹션별 네이티브 이식)
      · 풀페이지 휠 스크롤        → #wrap 전체 스냅 스크롤
      · #hero                    → 히어로(자체 배경영상)
      · #cgView (.slide-view)    → CG VIEW 갤러리
      · #intro  (.location-land) → anadd land 입지환경
      · #prmLcn (.premium-location) → ONE GROVE What's On
      · 공유 헤더(.penta-header)·메가메뉴·풀스크린 사이트맵·모바일 CTA 바
      · #rooms                   → Room Preview 타이틀 + 조감도 썸네일
      · #sliderScn (.slider-tab) → 경동 솔루션 탭 슬라이더
   4) UI 키트 토큰(:root --kit-*) — 폰트/글자크기 등 공통 토큰
   ============================================================== */

/* ===== [원본] style.css — 데스크톱 기본. #wrap·.section·#rooms·#videoWrap 등 전 섹션 공통 ===== */
/* Common **********************************************************************/
/* @import url(../vendor/fonts/earlyaccess/nanumgothic.css); <-- 기존에 있던 것 */
/*  Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess   */

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-Thin.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-ExtraLight.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-Light.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-ExtraBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	src: url('../vendor/mansionbridge/assets/font/Pretendard-Black.woff2') format('woff2');
}

/* [import removed: 이미 head 구글폰트에 있음] */

/* Common **********************************************************************/
html,
body {
	width: 100%;
	scroll-behavior: smooth;
}

html {
	overflow-y: scroll;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

* {
	-webkit-text-size-adjust: none;
	-webkit-text-size-adjust - auto | none | N% (default auto)
}

body {
	word-break: break-all;
	-ms-word-break: break-all;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
textarea,
p,
blockquote,
th,
td,
input,
select,
textarea,
button {
	margin: 0;
	padding: 0;
}

fieldset,
img {
	border: 0px none;
	vertical-align: top;
}

dl,
ul,
ol,
menu,
li {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

button {
	border: 0 none;
	background-color: transparent;
	cursor: pointer;
}

body {
	background: var(--kit-color-bg);
}

body,
th,
td,
input,
select,
textarea,
button {
	font-size: var(--kit-txt-xs);
	line-height: 1.6;
	font-family: var(--kit-font-base);
	color: var(--kit-color-ink-muted);
}

input,
select,
textarea,
button {
	vertical-align: middle;
}

a:link,
a:active,
a:visited {
	color: var(--kit-color-ink-muted);
	text-decoration: none;
	border: 0px;
}

a:hover,
a:focus {
	color: var(--kit-color-ink-body);
	text-decoration: none
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

address,
caption,
cite,
code,
dfn,
em,
var {
	font-style: normal;
	font-weight: normal;
}

summary,
caption,
legend,
hr {
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	border: none;
	position: absolute;
	left: -1000em;
}

caption {
	position: static;
}

.pc_img {
	display: block;
}

.tab_img {
	display: none;
}

.mob_img {
	display: none;
}


:root {
	--co01: #8e3f2e;
	--co02: #883c2c;
}

::selection {
	color: var(--kit-color-on-dark);
	background: var(--co01);
}

/* ==main== · #wrap (전체 래퍼/공통 레이아웃) == */
#wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 1500px;
	margin: 0 auto;
	overflow: hidden;
	word-break: keep-all;
}

.fc {
	font-family: var(--kit-font-base);
}

.fl {
	font-family: var(--kit-font-base);
}



/* section · .section (스냅 섹션 공통) */
.section {
	line-height: 1;
}

/* section01 · #rooms (Room Preview 객실 슬라이더 / slick) */
#rooms {
	position: relative;
	height: 100vh;
	background: var(--kit-color-ink-deep);
}

#rooms .slide_wrap {
	position: relative;
	transform: translateY(calc(100vh - 750px));
	overflow: hidden;
}

#rooms .slide_wrap ul li {
	position: relative;
	width: 580px;
	margin-right: 10px;
	/* 이미지 클리핑은 .img_wrap 이 담당 → li 는 visible 로 두어
	   긴 설명이 아래(bottom 고정)에서 위로 자랄 때 카드 상단에서 잘리지 않고 전부 노출 */
	overflow: visible;
}

/* 카드 4장 미만 → 슬라이더(slick) 없이 정적 중앙배치 (site-sections.js 가 .no-slick / #rooms.sec01-static 부여) */
#rooms .slide_wrap ul.sec01_slide.no-slick {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}

#rooms .slide_wrap ul.sec01_slide.no-slick li {
	margin-right: 0;
	flex: 0 0 auto;
}

/* 아치 배경 프레임(.slide_bg)은 슬라이더 5장 위치 기준이라 정적 배치와 어긋남 → 정적 모드에선 숨긴다 */
#rooms.sec01-static .slide_wrap .slide_bg {
	display: none;
}

/* 정적 모드: 카드(li)를 아치로 클립 → 내부 이미지와 아래→위로 걷히는 .bg 블러 리빌이
   모두 아치 안에서 처리되어, 걷힘 애니메이션까지 아치형으로 나타난다.
   (정적은 카드 수가 적고 설명도 짧아 하단 텍스트가 아치에 안 걸림) */
#rooms.sec01-static .slide_wrap ul.sec01_slide.no-slick li {
	overflow: hidden;
	border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}

#rooms .slide_wrap ul li .bg {
	position: absolute;
	z-index: 200;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
	backdrop-filter: blur(5px);
}

#rooms .slide_wrap ul li .img_wrap {
	position: relative;
	width: 100%;
	padding-bottom: 129.31%;
	overflow: hidden;   /* 패럴럭스로 확대(scale/translate)된 이미지를 카드 이미지 영역 안에 가둠 */
	/* 폴백: 룸 이미지가 404/미입력이어도 어두운 카드 유지 (깨진 이미지 아이콘 방지) */
	background-color: var(--kit-color-ink);
}

#rooms .slide_wrap ul li .img_wrap img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* 이미지 미준비 카드: 흰 배경 위 중앙에 '이미지 준비중' 안내 */
#rooms .slide_wrap ul li .img_wrap .img-pending {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kit-color-bg);
	color: var(--kit-color-ink-muted);
	font-size: var(--kit-txt-nm);
	letter-spacing: .02em;
}

#rooms .slide_wrap ul li .txt_wrap {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 100%;
	/* 긴 설명이 이미지 위로 자라도 읽히도록 그림자 */
	text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
	/* #wrap 의 word-break:keep-all 로 공백 없는 긴 문구가 가로로 넘쳐 옆 슬라이드를 침범하던 문제 방어:
	   카드 폭 안에서 자동 줄바꿈시켜 텍스트 영역이 위로만 자라게 한다 */
	overflow-wrap: anywhere;
	word-break: break-word;
}

#rooms .slide_wrap ul li .txt_wrap p {
	font-size: var(--kit-txt-sectit);
	color: var(--kit-color-on-dark);
	font-weight: 700;
	text-align: center;
}

#rooms .slide_wrap ul li .txt_wrap span {
	display: block;
	font-size: var(--kit-txt-sub);
	color: var(--kit-color-on-dark);
	text-align: center;
	margin-top: 8px;
}

#rooms .slide_wrap .slick-prev {
	position: absolute;
	top: 50%;
	left: 50px;
	transform: translateY(-50%);
	background: url(../vendor/mansionbridge/assets/images_c/main/sec01_prev_pc.png)center no-repeat;
	background-size: cover;
	width: 90px;
	height: 90px;
	text-indent: -9999px;
	z-index: 1500;
}

#rooms .slide_wrap .slick-next {
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
	background: url(../vendor/mansionbridge/assets/images_c/main/sec01_next_pc.png)center no-repeat;
	background-size: cover;
	width: 90px;
	height: 90px;
	text-indent: -9999px;
	z-index: 1500;
}

#rooms .slide_wrap .slide_bg {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1000;
}

#rooms .slide_wrap .slide_bg img {
	margin: 0;
	line-height: 0;
	padding: 0;
	transform: scale(1.002);
}

/* section06 · #videoWrap (배경영상 섹션) */
#videoWrap {
	position: relative;
}

#videoWrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 380px;
	background: var(--kit-color-bg);
	transition: 1.5s ease;
	transition-delay: 1s;
}

#videoWrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 380px;
	background: var(--kit-color-bg);
	transition: 1.5s ease;
	transition-delay: 1s;
}

#videoWrap.on::before {
	height: 0;
}

#videoWrap.on::after {
	height: 0;
}

#videoWrap video {
	width: 100%;
}





/* ===== [원본] style_tab.css — 태블릿(@max-width:1400) 반응형. 위 섹션들의 태블릿 오버라이드 ===== */
@media screen and (max-width:1400px) {

	.pc_img {
		display: none;
	}

	.tab_img {
		display: block;
	}

	.mob_img {
		display: none;
	}

	/* === Main === */
	#wrap {
		position: relative;
		width: 100%;
		max-width: 1400px;
		min-width: 375px;
		margin: 0 auto;
		overflow: hidden;
	}


	/* section · .section (스냅 섹션 공통) */
	.section {
		line-height: 1;
	}

	/* section01 · #rooms (Room Preview 객실 슬라이더 / slick) */
	#rooms {
		position: relative;
		height: auto;
		background: var(--kit-color-ink-deep);
	}

	#rooms .slide_wrap {
		position: relative;
		transform: initial;
		overflow: hidden;
		padding-top: 150px;
	}

	#rooms .slide_wrap ul li {
		position: relative;
		width: 360px;
		margin-right: 5px;
		overflow: hidden;
	}

	#rooms .slide_wrap ul li .bg {
		position: absolute;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
		backdrop-filter: blur(5px);
	}

	#rooms .slide_wrap ul li .img_wrap {
		position: relative;
		width: 100%;
		padding-bottom: 129.31%;
	}

	#rooms .slide_wrap ul li .img_wrap img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
	}

	#rooms .slide_wrap ul li .txt_wrap {
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		width: 100%;
	}

	#rooms .slide_wrap ul li .txt_wrap p {
		/* font-size 제거: lead 토큰이 clamp로 태블릿 축소 처리 */
		color: var(--kit-color-on-dark);
		font-weight: 700;
		text-align: center;
	}

	#rooms .slide_wrap ul li .txt_wrap span {
		display: block;
		font-size: var(--kit-txt-nm);
		color: var(--kit-color-on-dark);
		text-align: center;
		margin-top: 8px;
	}

	#rooms .slide_wrap .slick-prev {
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
		background: url(../vendor/mansionbridge/assets/images_c/main/sec01_prev_tab.png)center no-repeat;
		background-size: cover;
		width: 60px;
		height: 60px;
		text-indent: -9999px;
		z-index: 1500;
	}

	#rooms .slide_wrap .slick-next {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		background: url(../vendor/mansionbridge/assets/images_c/main/sec01_next_tab.png)center no-repeat;
		background-size: cover;
		width: 60px;
		height: 60px;
		text-indent: -9999px;
		z-index: 1500;
	}

	#rooms .slide_wrap .slide_bg {
		display: flex;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		pointer-events: none;
		z-index: 1000;
	}

	#rooms .slide_wrap .slide_bg img {
		width: 366px;
	}

	/* section06 · #videoWrap (배경영상 섹션) */
	#videoWrap {
		position: relative;
	}

	#videoWrap::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 160px;
		background: var(--kit-color-bg);
		transition: 1.5s ease;
		transition-delay: 1s;
	}

	#videoWrap::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 160px;
		background: var(--kit-color-bg);
		transition: 1.5s ease;
		transition-delay: 1s;
	}

	#videoWrap.on::before {
		height: 0;
	}

	#videoWrap.on::after {
		height: 0;
	}

	#videoWrap video {
		width: 100%;
	}


}

/* ===== [원본] style_mob.css — 모바일(@max-width:767) 반응형. 위 섹션들의 모바일 오버라이드 ===== */
@media screen and (max-width:767px) {

	.pc_img {
		display: none;
	}

	.tab_img {
		display: none;
	}

	.mob_img {
		display: block;
	}

	/* === Main === */
	#wrap {
		position: relative;
		width: 100%;
		max-width: 767px;
		min-width: 0;
		/* 320px 등 초소형 폭에서 우측 잘림 방지 (기존 375px 고정 → 뷰포트에 맞춤) */
		margin: 0 auto;
		overflow: hidden;
		word-break: keep-all;
	}

	/* section · .section (스냅 섹션 공통) */
	.section {
		line-height: 1;
	}

	/* section01 · #rooms (Room Preview 객실 슬라이더 / slick) */
	#rooms {
		position: relative;
		height: auto;
		background: var(--kit-color-ink-deep);
	}

	#rooms .slide_wrap {
		position: relative;
		transform: initial;
		overflow: hidden;
		padding-top: 80px;
	}

	#rooms .slide_wrap ul li {
		position: relative;
		width: 310px;
		margin-right: 5px;
		overflow: hidden;
	}

	#rooms .slide_wrap ul li .bg {
		position: absolute;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);
		backdrop-filter: blur(5px);
	}

	#rooms .slide_wrap ul li .img_wrap {
		position: relative;
		width: 100%;
		padding-bottom: 129.31%;
	}

	#rooms .slide_wrap ul li .img_wrap img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
	}

	#rooms .slide_wrap ul li .txt_wrap {
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		width: 100%;
	}

	#rooms .slide_wrap ul li .txt_wrap p {
		/* font-size 제거: lead 토큰이 clamp로 모바일 축소 처리 */
		color: var(--kit-color-on-dark);
		font-weight: 700;
		text-align: center;
	}

	#rooms .slide_wrap ul li .txt_wrap span {
		display: block;
		font-size: var(--kit-txt-sm);
		color: var(--kit-color-on-dark);
		text-align: center;
		margin-top: 5px;
	}

	#rooms .slide_wrap .slick-prev {
		position: absolute;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
		background: url(../vendor/mansionbridge/assets/images_c/main/sec01_prev_mob.png)center no-repeat;
		background-size: cover;
		width: 40px;
		height: 40px;
		text-indent: -9999px;
		z-index: 1500;
	}

	#rooms .slide_wrap .slick-next {
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		background: url(../vendor/mansionbridge/assets/images_c/main/sec01_next_mob.png)center no-repeat;
		background-size: cover;
		width: 40px;
		height: 40px;
		text-indent: -9999px;
		z-index: 1500;
	}

	#rooms .slide_wrap .slide_bg {
		display: flex;
		position: absolute;
		bottom: 1px;
		left: 50%;
		transform: translateX(-50%);
		pointer-events: none;
		z-index: 1000;
	}

	#rooms .slide_wrap .slide_bg img {
		width: 315px;
	}

	#rooms .slide_wrap .slide_bg img:not(:last-child) {
		margin-right: -1px;
	}

	/* section06 · #videoWrap (배경영상 섹션) */
	#videoWrap {
		position: relative;
	}

	#videoWrap::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background: var(--kit-color-bg);
		transition: 1.5s ease;
		transition-delay: 1s;
	}

	#videoWrap::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background: var(--kit-color-bg);
		transition: 1.5s ease;
		transition-delay: 1s;
	}

	#videoWrap.on::before {
		height: 0;
	}

	#videoWrap.on::after {
		height: 0;
	}

	#videoWrap video {
		width: 100%;
	}

}




/* ===== [라이브러리] slick.css — #rooms 객실 캐러셀 (slick) ===== */
/* Slider */
.slick-slider {
	position: relative;

	display: block;
	box-sizing: border-box;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slick-list {
	position: relative;

	display: block;
	overflow: hidden;

	margin: 0;
	padding: 0;
}

.slick-list:focus {
	outline: none;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slick-track {
	position: relative;
	top: 0;
	left: 0;

	display: block;
	margin-left: auto;
	margin-right: auto;
}

.slick-track:before,
.slick-track:after {
	display: table;

	content: '';
}

.slick-track:after {
	clear: both;
}

.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slide {
	display: none;
	float: left;

	height: 100%;
	min-height: 1px;
}

[dir='rtl'] .slick-slide {
	float: right;
}

.slick-slide img {
	/* display: block; */
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-loading .slick-slide {
	visibility: hidden;
}

.slick-vertical .slick-slide {
	display: block;

	height: auto;

	border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
	display: none;
}


/* [정리] Swiper 4.3.5 인라인 CSS 제거 — swiper 기본 스타일은 swiper-bundle@11 이 제공(CSS 로드 순서와 무관하게 안정). 프로젝트 커스텀은 .solution-main-mobile / #prmLcn .og-ocean-swiper / #rooms 스코프에 별도로 존재. */

/* ==========================================================
		   [통합] 아래부터는 원래 별도 스타일 블록이던 커스텀/셸 스타일.
		   vendor 다음에 오므로 우선순위(cascade) 순서 그대로 유지됨.
		   ========================================================== */
/* =====================================================
		   UI 키트 토큰(kit tokens)은 이 파일 최상단 @import "kit/tokens.css"
		   로 일원화됨. 인라인 중복 :root 블록은 제거(드리프트 방지).
		   ===================================================== */

/* ===== 풀페이지 스크롤 (JS 휠 훅) : 한 번 스크롤마다 한 섹션씩 부드럽게 ===== */
html {
	scroll-behavior: auto;
}

/* 스무스는 JS 가 담당 */
body {
	overflow-x: hidden;
}

/* 스크롤바 숨김 (풀페이지 느낌) — 스크롤 자체는 JS scrollTo 로 가능 */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

html,
body {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* 데스크톱 풀페이지: 모든 섹션 100vh 로 꽉 채움 */
#wrap>.section,
#hero,
.location-land,
.premium-location,
.slide-view,
.slider-tab {
	height: 100vh !important;
	overflow: hidden;
}

/* 푸터는 풀페이지 스냅 섹션이지만 100vh 로 채우지 않고 내용 높이(auto)로 둔다 (PC·모바일 공통).
   #wrap>#footerWrap (2,0,0) 로 위 '#wrap>.section'(1,1,0) 의 100vh 를 이긴다. */
#wrap>#footerWrap {
	height: auto !important;
	min-height: 0 !important;
}

/* ===== 모바일/태블릿 섹션 높이 정책 =====
		   내용이 긴 섹션(2 #intro · 3 #rooms · 4 #sliderScn · 5 #prmLcn · 8 #overviewWrap)은
		   100vh 로 고정하면 잘리므로 height:auto(내용 높이)로 흐르게 한다.
		   화면을 꽉 채워야 하는 미디어 섹션(1 #hero · 6 #cgView · 7 #videoWrap)만 100vh 유지.
		   (#wrap>#id 로 base '#wrap>.section' 규칙보다 우선순위 확보) */
@media (max-width: 1024px) {

	#wrap>#intro,
	#wrap>#rooms,
	#wrap>#sliderScn,
	#wrap>#prmLcn,
	#wrap>#overviewWrap {
		height: auto !important;
		min-height: 100vh;
		overflow: visible !important;
	}
}

/* 1·6·7 섹션: 모바일에선 하단 고정 CTA 바(56px+safe-area) 높이만큼 빼서 꽉 채움 */
@media (max-width: 767px) {

	#wrap>#hero,
	#wrap>#cgView,
	#wrap>#videoWrap {
		height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px)) !important;
	}

	/* auto 섹션도 최소 화면(CTA 바 제외 높이)만큼은 채워 아래 섹션이 빼꼼 노출되지 않게 */
	#wrap>#intro,
	#wrap>#rooms,
	#wrap>#sliderScn,
	#wrap>#prmLcn,
	#wrap>#overviewWrap {
		min-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
	}
}



/* ===== 카시아 네이티브 히어로 (iframe 제거, 자체 배경영상 + 토큰) ===== */
#hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* 폴백 배경: 영상이 없거나(링크 미입력)·로드 실패·로딩 중일 때
	   뒤의 밝은 body 가 비쳐 텍스트가 안 읽히는 것을 방지 (어두운 히어로 유지). */
	background-color: var(--kit-color-ink);
}

#hero .hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* 텍스트 가독성용 어두운 오버레이 (나중에 색 토큰으로 교체 예정) */
#hero .hero-scrim {
	position: absolute;
	inset: 0;
	background: var(--kit-color-dim);
	z-index: 1;
}

#hero .hero-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* 블록을 우측으로 */
	justify-content: center;
	color: var(--kit-color-on-dark);
}

/* 브랜드 블록 — 우측 정렬 (원본 richmond .main_txt_box>div:last-child: text-align:right + margin-left:auto) */
#hero .hero-brand {
	width: fit-content;
	max-width: 100%;
	/* 긴 타이틀/문구가 와도 가로로 넘치지 않게 (#wrap 의 word-break:keep-all 대비 방어) */
	overflow-wrap: anywhere;
	text-align: right;
}

/* 눈썹: 세계적인 명성의 호텔&리조트 체인 (원본 h4 1.25rem=20px → lead) */
#hero .hero-eyebrow {
	font-size: var(--kit-txt-lead);
	line-height: 100%;
	margin: 0;
	opacity: 0.95;
}

/* 메인 타이틀: CASSIA SOKCHO (원본 h2 3.8125rem=61px bold → hero) */
#hero .hero-title {
	font-size: var(--kit-txt-hero);
	font-weight: 700;
	line-height: 110%;
	margin: 1.25rem 0 0;
	letter-spacing: 0.02em;
}

/* 서브: BANYAN TREE GROUP — 원본의 노란색 #fff000 (나중에 색 토큰으로 교체 예정) */
#hero .hero-sub {
	font-size: var(--kit-txt-sub);
	letter-spacing: 0.1rem;
	color: var(--kit-color-accent-deep);
	margin: 0.5625rem 0 0;
}

/* 하단 안내문 (원본 .main_ori — 중앙 하단) */
#hero .hero-disclaimer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4rem;
	z-index: 2;
	text-align: center;
	font-size: var(--kit-txt-xs);
	color: var(--kit-color-on-dark);
	opacity: 0.8;
	margin: 0;
}

/* 모바일 폰트 오버라이드 제거: hero/lead 토큰이 clamp로 자동 축소함 */

.slide-view {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--kit-color-black);
}

/* ===== CG VIEW 네이티브 갤러리 (iframe 제거, plain JS) ===== */
#cgView .cg-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

#cgView .cg-slide {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	opacity: 0;
	transition: opacity 1s ease;
}

#cgView .cg-slide.is-active {
	opacity: 1;
}

/* 우측 세로 타이틀 */
#cgView .cg-title {
	position: absolute;
	right: 2.5%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	color: var(--kit-color-on-dark);
	text-align: center;
	writing-mode: vertical-rl;
}

#cgView .cg-title .en {
	display: block;
	font-size: var(--kit-txt-hero);
	font-weight: 600;
	letter-spacing: 0.15em;
}

#cgView .cg-title .ko {
	display: block;
	font-size: var(--kit-txt-xs);
	opacity: 0.7;
	margin-top: 12px;
	letter-spacing: 0.1em;
}

/* 하단 썸네일 갤러리 + 캡션 */
#cgView .cg-gallery {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6%;
	z-index: 2;
	text-align: center;
}

#cgView .cg-thumbs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

#cgView .cg-thumb {
	width: 84px;
	height: 56px;
	border: 2px solid transparent;
	border-radius: var(--kit-radius-sm);
	opacity: 0.55;
	cursor: pointer;
	padding: 0;
	background-size: cover;
	transition: opacity 0.3s, border-color 0.3s;
}

#cgView .cg-thumb.is-active {
	border-color: var(--kit-color-on-dark);
	opacity: 1;
}

#cgView .cg-caption {
	color: var(--kit-color-on-dark);
	font-size: var(--kit-txt-nm);
	font-weight: 600;
}

#cgView .cg-disclaimer {
	position: absolute;
	left: 24px;
	bottom: 18px;
	z-index: 2;
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--kit-txt-xs);
}

@media (max-width: 767px) {
	/* .cg-title .en font-size 오버라이드 제거: hero 토큰 clamp가 처리 */
	#cgView .cg-thumb {
		width: 56px;
		height: 38px;
	}

	/* 모바일: 디스클레이머가 2~3줄로 접히며 캡션과 겹치는 문제.
	   고지문은 하단 전체폭 가운데 정렬로 고정하고, 갤러리(썸네일+캡션)는 그 위로 띄운다. */
	#cgView .cg-disclaimer {
		left: 16px;
		right: 16px;
		bottom: 14px;
		text-align: center;
		line-height: 1.4;
	}

	#cgView .cg-gallery {
		bottom: 88px;
	}

	/* 모바일: 썸네일이 한 줄을 넘으면 가로 스크롤 스트립(필름스트립).
	   썸네일 크기(56×38)를 유지(flex:0 0 auto → shrink 금지)하고,
	   적을 땐 가운데 정렬(safe center = 넘칠 땐 start 로 폴백해 왼쪽 잘림 방지). */
	#cgView .cg-thumbs {
		flex-wrap: nowrap;
		justify-content: safe center;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: 16px;
	}

	#cgView .cg-thumbs::-webkit-scrollbar {
		display: none;
	}

	#cgView .cg-thumb {
		flex: 0 0 auto;
	}
}

/* ===== anadd land 네이티브 (원본 anadd theartpixel.css 이식, .location-land 로 스코프) ===== */
.location-land {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--kit-color-bg);
	color: var(--kit-color-ink);
}

.location-land .land_wrap {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}

/* 좌측: 이미지 박스 + 세로 회전 타이틀 */
.location-land .land_img_box {
	width: 50%;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: 0.8s;
	/* 폴백: 배경 이미지가 404/미입력/제거돼도 어두운 바탕 유지 → 흰 세로타이틀 안 사라짐 */
	background-color: var(--kit-color-ink);
}

.location-land .land_img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transform: scale(1.2);
	transition: 1.5s;
}

/* 배경색(var(--kit-color-ink))을 shorthand 앞에 두어 이미지 404/미입력 시 폴백으로 노출 →
   좌측이 흰색으로 비어 흰 세로타이틀이 사라지는 것 방지 (어두운 바탕 유지). */
.location-land .land_img.img01 {
	background: var(--kit-color-ink) url(../image/sc2-1.jpg) center / cover no-repeat;
}

.location-land .land_img.img02 {
	background: var(--kit-color-ink) url(../image/sc2-2.jpg) center / cover no-repeat;
}

.location-land .land_img_box h1 {
	position: absolute;
	right: 70px;
	top: 0;
	margin: 0;
	text-align: left;
	/* 회전 90°라 '가로 폭'이 화면상 '세로 높이'가 된다.
	   ① 폰트는 뷰포트 높이 기준 clamp 로 유동(짧은 화면일수록 축소, 정상은 4.75rem 유지)
	   ② max-width 로 회전 전 폭을 상한 → 화면 세로 확장 제한 → 헤더 위로 안 올라가고 아래로도 안 잘림
	      (넘치면 잘리는 대신 좌측 이미지 쪽으로 줄바꿈) */
	font-size: clamp(2.6rem, 8vh, 4.75rem);
	max-width: 72vh;
	overflow-wrap: anywhere;
	line-height: 107%;
	font-weight: 600;
	color: var(--kit-color-on-dark);
	z-index: 9;
	opacity: 0;
	transform: translate(12rem, 26rem) rotate(90deg);
	transition: 0.8s;
}

/* 우측 밖에 숨은 두 번째 이미지 (on2 에서 등장) */
.location-land .land_img_box2 {
	width: 39.5%;
	height: 100%;
	position: absolute;
	right: -39.5%;
	top: 0;
	overflow: hidden;
	transition: 0.8s;
	background-color: var(--kit-color-ink);
}

/* 우측: 텍스트 박스 (스토리 + 워터마크 + SUMMARY) */
.location-land .land_txt_box {
	width: 50%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 6.25rem;
	box-sizing: border-box;
	text-align: left;
	transition: 0.8s;
}

.location-land .land_txt_box>div {
	width: 95%;
	max-width: 800px;
	position: relative;
	transform: translateY(-4rem);
	padding-bottom: 15rem;
	transition: 0.8s;
}

.location-land .land_txt_box>div>h2 {
	font-size: var(--kit-txt-tit);
	line-height: 100%;
	font-weight: 200;
	margin: 0;
	opacity: 0;
	transform: translateX(5rem);
	transition: 0.8s;
}

.location-land .land_txt_box>div>h2 b {
	font-weight: 700;
}

.location-land .land_txt_box>div>h4 {
	font-size: var(--kit-txt-nm);
	line-height: 218%;
	margin-top: 2.25rem;
	font-weight: 400;
	opacity: 0;
	transform: translateX(5rem);
	transition: 0.8s;
}

.location-land .land_txt_box>div>img {
	width: 22.5rem;
	position: absolute;
	right: 1rem;
	bottom: -14rem;
	transition: 0.8s;
}

/* 흐릿한 세로 워터마크 CASSIA SOKCHO / SUMMARY */
.location-land .land_sum_tit {
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0;
	transform: translate(-5rem, 19rem) rotate(90deg);
	transform-origin: right bottom;
	transition: 0.8s;
}

.location-land .land_sum_tit h4 {
	font-size: var(--kit-txt-lead);
	line-height: 100%;
	margin: 0;
}

.location-land .land_sum_tit h2 {
	font-size: 4.375rem;
	line-height: 100%;
	margin: 0;
	font-weight: 600;
}

/* SUMMARY 3단 그리드 */
.location-land .land_sum {
	position: absolute;
	left: 0;
	bottom: -9rem;
	opacity: 0;
	transform: translateY(3rem);
	transition: 0.8s;
}

.location-land .land_sum ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 4.125rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.location-land .land_sum ul li {
	width: calc(33.33% - 2.75rem);
}

.location-land .land_sum ul li h2 {
	font-size: var(--kit-txt-sub);
	line-height: 100%;
	font-weight: 600;
	padding-bottom: 0.625rem;
	margin: 0 0 1rem;
	border-bottom: 1px solid var(--kit-color-border);
}

.location-land .land_sum ul li p {
	font-size: var(--kit-txt-sm);
	line-height: 130%;
	opacity: 0.7;
	margin: 0;
}

/* ===== 진입(.on) / 스텝(.on2) 애니메이션 (원본 그대로) ===== */
.location-land .land_wrap.on .land_img.img01 {
	transform: scale(1);
	transition: 2.5s 0s;
}

.location-land .land_wrap.on .land_img_box h1 {
	opacity: 1;
	transform: translate(12rem, 23rem) rotate(90deg);
	transition: 1.2s 0.2s;
}

.location-land .land_wrap.on .land_txt_box>div>h2 {
	opacity: 1;
	transform: translate(0);
	transition: 1.2s 0.2s;
}

.location-land .land_wrap.on .land_txt_box>div>h4 {
	opacity: 1;
	transform: translate(0);
	transition: 1.2s 0.4s;
}

.location-land .land_wrap.on2 .land_img_box {
	transform: translateX(-50vw);
}

.location-land .land_wrap.on2 .land_txt_box {
	transform: translateX(-50vw);           /* 2페이지 좌측 슬라이드 */
}

/* 1·2페이지 공통: 텍스트 영역 높이를 '헤더 아래'로 한정(공유 헤더 .navi = 104px).
   본문이 이 높이를 넘으면 overflow-y:auto 로 스크롤바 표시(넘칠 때만, 생기면 로드부터 고정).
   align-items:safe center → 짧으면 중앙, 넘치면 위(헤더 아래)부터 정렬 후 스크롤.
   주의: scrollbar-width/scrollbar-color(표준) 지정 시 크롬이 아래 ::-webkit-scrollbar
   커스텀을 무시하고 오버레이(자동숨김)로 돌아가므로 표준 속성은 쓰지 않고 webkit 커스텀만 사용. */
.location-land .land_wrap.on .land_txt_box {
	align-self: start;
	margin-top: 104px;
	height: calc(100vh - 104px);
	align-items: safe center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 2rem;
}

/* 1페이지 스토리 박스의 원본 오프셋(위로 4rem·하단 15rem)을 제거해 스크롤 영역 정상화 */
.location-land .land_wrap.on .land_txt_box>div {
	transform: none;
	padding-bottom: 0;
}

/* 스크롤 영역이 생기면(내용이 넘치면) macOS 오버레이처럼 숨지 않고 처음부터 항상 표시 */
.location-land .land_wrap.on .land_txt_box::-webkit-scrollbar {
	width: 9px;
}

.location-land .land_wrap.on .land_txt_box::-webkit-scrollbar-track {
	background: transparent;
}

.location-land .land_wrap.on .land_txt_box::-webkit-scrollbar-thumb {
	background: rgba(60,50,40,.4);
	border-radius: var(--kit-radius-md);
}

.location-land .land_wrap.on .land_txt_box::-webkit-scrollbar-thumb:hover {
	background: rgba(60,50,40,.6);
}

.location-land .land_wrap.on2 .land_img_box2 {
	right: 0;
}

.location-land .land_wrap.on2 .land_img.img02 {
	transform: scale(1);
	transition: 2.5s 0s;
}

.location-land .land_wrap.on2 .land_txt_box>div {
	margin-left: 10%;
	padding-bottom: 0;
	transform: translateY(0);
}

/* 원본은 B에서 스토리(h4)를 숨겼지만, 실제 렌더는 스토리+SUMMARY 함께 보였으므로 유지 */
.location-land .land_wrap.on2 .land_txt_box>div>h4 {
	opacity: 1;
	transform: translate(0);
	transition: 1.2s 0.2s;
}

.location-land .land_wrap.on2 .land_txt_box>div>img {
	opacity: 0;
	transition: 0.8s 0s;
}

.location-land .land_wrap.on2 .land_sum {
	position: static;
	margin-top: 2.75rem;
	opacity: 1;
	transform: translate(0);
	transition: 1.2s 0.2s;
}

.location-land .land_wrap.on2 .land_sum_tit {
	opacity: 0.12;
	transform: translate(-5rem, 16rem) rotate(90deg);
	transition: 1.2s 0.2s;
}

/* ===== 태블릿·모바일(≤1024px 또는 터치): 가로 스텝 제거 → 세로 한 화면 ===== */
@media (max-width: 1024px),
(hover: none) and (pointer: coarse) {

	/* #intro(anadd land) 내부 레이아웃: 세로 컬럼으로 흐르게. 섹션 높이는 위
			   '섹션 높이 정책'에서 auto 처리하므로 여기선 wrap 을 내용 높이로만 둔다. */
	.location-land .land_wrap {
		height: auto;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow: visible;
	}

	.location-land .land_img,
	.location-land .land_txt_box,
	.location-land .land_img_box,
	.location-land .land_txt_box>div,
	.location-land .land_sum,
	.location-land .land_sum_tit,
	.location-land .land_txt_box>div>h2,
	.location-land .land_txt_box>div>h4 {
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
	}

	.location-land .land_img_box2 {
		display: none !important;
	}

	/* 데스크톱 on2 의 내부 스크롤·헤더여백·고정높이는 모바일엔 불필요(페이지 스크롤로 흐름) → 리셋 */
	.location-land .land_wrap.on2 .land_txt_box,
	.location-land .land_txt_box {
		overflow: visible !important;
		height: auto !important;
		margin-top: 0 !important;
		align-self: auto !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		align-items: stretch !important;
	}

	.location-land .land_img_box {
		width: 100%;
		height: 30vh;
		min-height: 160px;
		flex: 0 0 auto;
		position: relative;
	}

	.location-land .land_img_box .land_img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.location-land .land_img_box h1 {
		position: absolute;
		left: 22px;
		bottom: 16px;
		right: auto;
		top: auto;
		font-size: 1.5rem;
		line-height: 1.2;
		color: var(--kit-color-on-dark);
		z-index: 2;
	}

	.location-land .land_txt_box.box01 {
		width: 100%;
		flex: 1 1 auto;
		min-height: 0;
		position: static;
		padding: 24px 22px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.location-land .land_txt_box.box01>div {
		width: 100%;
		max-width: none;
		padding-bottom: 0 !important;
		margin: 0;
		transform: none;
	}

	.location-land .land_txt_box>div>h2 {
		/* font-size 오버라이드 제거: tit 토큰 clamp가 모바일 축소 처리 */
		line-height: 1.25;
	}

	.location-land .land_txt_box>div>h4 {
		font-size: var(--kit-txt-sm);
		line-height: 1.6;
		margin-top: 10px;
	}

	.location-land .land_txt_box>div>img {
		display: none;
	}

	.location-land .land_sum_tit {
		display: block;
		position: static;
		margin-top: 18px;
	}

	.location-land .land_sum_tit h4 {
		font-size: var(--kit-txt-xs);
		opacity: 0.5;
	}

	.location-land .land_sum_tit h2 {
		font-size: 1.5rem;
	}

	.location-land .land_sum {
		display: block;
		position: static;
		bottom: auto;
		margin-top: 12px;
	}

	.location-land .land_sum ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 18px;
	}

	.location-land .land_sum ul li {
		width: auto !important;
	}

	.location-land .land_sum ul li h2 {
		font-size: var(--kit-txt-sm);
		padding-bottom: 6px;
		margin-bottom: 7px;
		border-bottom: 1px solid var(--kit-color-border);
	}

	.location-land .land_sum ul li p {
		font-size: var(--kit-txt-xs);
		line-height: 1.35;
		opacity: 0.7;
	}
}

.premium-location {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ===== ONE GROVE What's On 네이티브 (내부 세로 스크롤) ===== */
#prmLcn .og-scroll {
	height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--kit-color-bg);
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#prmLcn .og-scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

#prmLcn .og-inner {
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 30px;
}

#prmLcn .og-block {
	box-sizing: border-box;
}

#prmLcn .og-location {
	padding: 90px 0 40px;
}

#prmLcn .og-h2 {
	font-size: var(--kit-txt-tit);
	letter-spacing: -0.01em;
	margin: 0 0 20px;
	color: var(--kit-color-ink);
}

#prmLcn .og-sub {
	font-size: var(--kit-txt-nm);
	line-height: 1.6;
	color: var(--kit-color-ink-body);
	margin: 0 0 40px;
}

#prmLcn .og-loc-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: start;
}

#prmLcn .og-map img {
	width: 100%;
	display: block;
	border-radius: var(--kit-radius-sm);
	object-fit: cover;
}

/* 지역도 하단 유의사항 (작게) */
#prmLcn .og-map-note {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

#prmLcn .og-map-note li {
	position: relative;
	padding-left: 10px;
	font-size: var(--kit-txt-xs);
	line-height: 1.5;
	color: var(--kit-color-ink-muted);
	word-break: keep-all;
}

#prmLcn .og-map-note li+li {
	margin-top: 4px;
}

#prmLcn .og-map-note li::before {
	content: "-";
	position: absolute;
	left: 0;
}

#prmLcn .og-stories {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

#prmLcn .og-story .og-thumb,
#prmLcn .og-plan .og-thumb {
	width: 100%;
	aspect-ratio: 16/8;
	overflow: hidden;
	border-radius: var(--kit-radius-sm);
}

#prmLcn .og-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#prmLcn .og-tag {
	display: inline-block;
	margin-top: 14px;
	padding: 4px 10px;
	background: var(--kit-color-surface);
	color: var(--kit-color-ink-muted);
	font-size: var(--kit-txt-2xs);
	border-radius: var(--kit-radius-sm);
}

#prmLcn .og-story h3,
#prmLcn .og-plan h3 {
	font-size: var(--kit-txt-sub);
	font-weight: 700;
	margin: 10px 0 8px;
	color: var(--kit-color-ink);
}

#prmLcn .og-story p,
#prmLcn .og-plan p {
	font-size: var(--kit-txt-sm);
	line-height: 1.6;
	margin: 0;
	/* 본문 3줄로 클램프. 3줄 초과분은 JS 가 '더보기' 버튼을 붙여 펼침 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

#prmLcn .og-story p.is-expanded,
#prmLcn .og-plan p.is-expanded {
	-webkit-line-clamp: unset;
	overflow: visible;
}

#prmLcn .og-more {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--kit-txt-xs);
	font-weight: 600;
	color: var(--kit-color-accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

#prmLcn .og-plans {
	padding: 60px 0 90px;
}

#prmLcn .og-plans-h2 {
	text-align: center;
	font-size: var(--kit-txt-sectit);
	line-height: 1.4;
	color: var(--kit-color-ink);
	margin: 0 0 40px;
}

/* 제목 내 강조 문구(Premium 6) — 메인 컬러 */
#prmLcn .og-plans-h2 .accent {
	color: var(--kit-color-accent);
}

#prmLcn .og-plan-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

/* 블록3: Ocean View (다크) */
#prmLcn .og-ocean {
	background: var(--kit-color-ink-body);
	padding: 70px 0 90px;
	text-align: center;
}

#prmLcn .og-ocean-h2 {
	color: var(--kit-color-on-dark);
	font-size: var(--kit-txt-sectit);
	margin: 0 0 8px;
}

#prmLcn .og-ocean-sub {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--kit-txt-nm);
	margin: 0 0 40px;
}

#prmLcn .og-ocean-swiper {
	width: 100%;
	padding: 0 30px;
	box-sizing: border-box;
}

#prmLcn .og-ocean-swiper .swiper-slide {
	width: auto;
}

#prmLcn .og-ocean-swiper img {
	height: 340px;
	width: auto;
	border-radius: var(--kit-radius-sm);
	display: block;
	/* 폴백: 오션뷰 이미지 404/미입력 시 다크 플레이스홀더 (다크 오션 섹션) */
	min-width: 200px;
}

/* Ocean View 좌우 화살표 (다크 배경용 흰 원형 chevron). 구 swiper 4.4.6 svg 배경 무효화 */
#prmLcn .og-ocean-swiper .swiper-button-prev,
#prmLcn .og-ocean-swiper .swiper-button-next {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: var(--kit-color-dim);
	background-image: none;
	transition: background .2s;
}

#prmLcn .og-ocean-swiper .swiper-button-prev {
	left: 10px;
	right: auto;
}

#prmLcn .og-ocean-swiper .swiper-button-next {
	right: 10px;
	left: auto;
}

#prmLcn .og-ocean-swiper .swiper-button-prev:hover,
#prmLcn .og-ocean-swiper .swiper-button-next:hover {
	background: var(--kit-color-dim-strong);
}

#prmLcn .og-ocean-swiper .swiper-button-prev:after,
#prmLcn .og-ocean-swiper .swiper-button-next:after {
	font-size: 18px;
	font-weight: 700;
	color: var(--kit-color-on-dark);
}

/* ===== prmLcn 카운트/상태별 레이아웃 보강 (JS 가 클래스 부여) ===== */
/* 지도 없음 → 스토리 전체폭 2열 그리드 (3개 초과면 JS 가 캐러셀로 전환) */
#prmLcn .og-loc-grid.no-map {
	grid-template-columns: 1fr;
}
#prmLcn .og-loc-grid.no-map .og-stories:not(.swiper) {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 40px;
}
#prmLcn .og-loc-grid.no-map .og-stories:not(.swiper) > .og-story {
	width: calc(50% - 20px);
}

/* 스토리 없음 → 지도 센터 정렬 */
#prmLcn .og-loc-grid.no-stories {
	grid-template-columns: 1fr;
	justify-items: center;
}
#prmLcn .og-loc-grid.no-stories .og-map {
	width: 100%;
	max-width: 820px;
}

/* 계획 센터(슬라이더 미만 개수) → flex 센터. 카드 폭은 슬라이더 슬라이드와 동일(2개 기준 50%) */
#prmLcn .og-plan-grid.is-center {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}
#prmLcn .og-plan-grid.is-center > .og-plan {
	width: calc(50% - 12px);
	max-width: none;
}

/* 오션뷰 슬라이드 0개 → og-ocean 블록(타이틀·서브·스트립) 전체 숨김 */
#prmLcn .og-ocean.no-slides {
	display: none;
}

/* 스토리/계획 페이저 (JS 가 perPage 개씩 show/hide + 화살표). 원래 배열은 그대로, 하단 여백에 네비. */
#prmLcn .og-cards-pager {
	position: relative;
	padding-bottom: 52px;
}
#prmLcn .og-pager-nav {
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
#prmLcn .og-pager-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--kit-radius-pill);
	border: 1px solid var(--kit-color-border);
	background: var(--kit-color-bg);
	color: var(--kit-color-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
#prmLcn .og-pager-btn:hover:not(:disabled) {
	border-color: var(--kit-color-accent);
}
#prmLcn .og-pager-btn:disabled {
	opacity: .3;
	cursor: default;
}
#prmLcn .og-pager-ind {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: var(--kit-txt-xs);
	color: var(--kit-color-ink-muted);
	min-width: 46px;
	text-align: center;
}

@media (max-width: 900px) {

	#prmLcn .og-loc-grid,
	#prmLcn .og-plan-grid {
		grid-template-columns: 1fr;
	}

	/* #prmLcn .og-h2 font-size 오버라이드 제거: sectit 토큰 clamp가 처리 */

	#prmLcn .og-ocean-swiper img {
		height: 200px;
	}
}

.slider-tab {
	position: relative;
	width: 100%;
	line-height: 0;
}

/* ===== 상단 바 ===== */

/* ===== gnb (중앙) ===== */

/* ===== 메가메뉴 드롭다운 (호버 카테고리의 하위만) ===== */

/* ===== 흰 배경 패널 (바 아래로 펼쳐짐) ===== */

/* ===== 우측 클러스터 (전화 · 관심고객 · 더보기) ===== */

/* 모바일 하단 CTA 바 전용 라벨 — 데스크톱에선 숨김 */

/* ===== 더보기(햄버거) : 3 도트 → X ===== */

/* ===== 메가메뉴 열림 : 바 흰색 + 진한 글자 ===== */

/* ===== 밝은 섹션(theme-light) : 흰 글자 → #222 ===== */

/* 사이트맵(X) 열림 상태: 검정 오버레이 위라 항상 흰색 */

/* ===== 풀스크린 사이트맵 ===== */

/* 사이트맵(검정 오버레이) 열림 중엔 로고를 항상 흰색으로 (라이트 섹션에서도) */

/* ===== 모바일 ===== */
@media (max-width: 767px) {

	/* ===== 모바일 전용: 하단 고정 CTA 바 (좌 상담전화문의 / 우 관심고객 등록) ===== */

	/* 좌측 버튼: 상담전화문의 (딥브라운) */

	/* 우측 버튼: 관심고객 등록 (브랜드 탄색) */
}

/* section06 배경영상 컨테이너 */
#videoWrap {
	position: relative;
	overflow: hidden;
}

/* section06 로컬 배경영상(video): 컨테이너 꽉 채우는 cover */
   object-position:center 로 크롭 기준을 중앙 고정 → 어떤 비율의 영상이든
   중앙을 중심으로 커버되어, 상하 커튼이 열릴 때 항상 영상 중앙이 드러난다. */
#videoWrap video#main_video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border: 0;
	pointer-events: none;
}

#videoWrap .video_wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

/* 영상 재생 실패(404·소스 없음·video 요소 없음) 폴백 문구.
   기본 숨김, JS 가 #videoWrap 에 .video-error 를 붙이면 검정 배경 위 가운데 표시. */
#videoWrap .video-fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
	/* 폴백 패널 배경: 영상 실패 시 흰 영역 위 흰 글자로 안 보이는 것 방지 (다크 패널) */
	background: var(--kit-color-black);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--kit-txt-nm);
	letter-spacing: 0.02em;
}

#videoWrap.video-error .video-fallback {
	display: flex;
}


#hero .rotate,
.location-land .rotate {
	position: absolute;
	left: 75%;
	bottom: 6%;
	width: 5.5208vw;
	height: 5.5208vw;
	z-index: 10;
	pointer-events: none;
}

#hero .rotate .arr,
.location-land .rotate .arr {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#hero .rotate .txt,
.location-land .rotate .txt {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#hero .rotate .txt img,
.location-land .rotate .txt img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: scrollRotate 8s linear infinite;
}

@keyframes scrollRotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@media all and (max-width:767px) {

	#hero .rotate,
	.location-land .rotate {
		left: 76%;
		bottom: 17%;
		width: 15vw;
		height: 15vw;
	}
}

html,
body,
body * {
	font-family: var(--kit-font-base) !important;
}

/* =================================================================
		   #overviewWrap  (원본 사이트 .overview-box 이식 / 반응형)
		   풀페이지 한 섹션(100vh)에 OVERVIEW 스펙 박스를 중앙 배치.
		   스크롤 진입 시(.is-in) 라인/텍스트가 순차적으로 나타난다.
		   ================================================================= */
#overviewWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--kit-color-surface);
	color: var(--kit-color-ink);
	padding: 0 40px;
	box-sizing: border-box;
}

#overviewWrap .overview-box {
	display: flex;
	justify-content: center;
	width: 100%;
}

#overviewWrap .overview-box-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 1516px;
}

#overviewWrap .overview-title {
	margin: 0;
	font-family: var(--kit-font-base) !important;
	/* 폰트 통일 */
	font-weight: 500;
	font-size: var(--kit-txt-tit);
	/* 44px 토큰 */
	letter-spacing: 0.08em;
	color: var(--kit-color-ink);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease, transform 1s ease;
}

#overviewWrap .overview-list {
	display: flex;
	flex-wrap: wrap;              /* 한 줄에 4개씩 채우고 5번째부터 줄바꿈 (데스크톱) */
	gap: 24px;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

#overviewWrap .overview-list>li {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 0 0 calc((100% - 3 * 24px) / 4);   /* 4열 고정폭(gap 24px×3) → 4개 초과 시 다음 줄 */
	min-width: 0;                            /* 긴 설명이 셀 안에서 줄바꿈되도록 */
	font-size: var(--kit-txt-lead);
	letter-spacing: -0.04em;
}

/* 4열 그리드 정렬 위해 .short 도 동일 폭 (기존 flex:0 콘텐츠폭 → 균일 4열) */
#overviewWrap .overview-list>li.short {
	flex: 0 0 calc((100% - 3 * 24px) / 4);
}

#overviewWrap .overview-list>li.short>div {
	padding-right: 0;
}

#overviewWrap .overview-list>li>div {
	overflow: hidden;
}

#overviewWrap .overview-desc {
	font-weight: 500;
	min-height: 75px;
}

#overviewWrap .overview-desc>p {
	margin: 0;
	transform: translateY(100%);
	transition: transform 1s ease;
}

#overviewWrap .overview-desc small {
	font-size: var(--kit-txt-sm);
	font-weight: 300;
}

#overviewWrap .overview-name {
	font-size: var(--kit-txt-nm);
	color: var(--kit-color-ink-subtle);
}

#overviewWrap .overview-name>p {
	margin: 0;
	transform: translateY(-100%);
	transition: transform 1s ease;
}

#overviewWrap .overview-line {
	display: block;
	width: 0;
	height: 1px;
	background: var(--kit-color-border);
	transition: width 1s ease;
}

/* 스크롤 진입 시 순차 등장 */
#overviewWrap.is-in .overview-title {
	opacity: 1;
	transform: translateY(0);
}

#overviewWrap.is-in .overview-line {
	width: 100%;
	transition-delay: 0.6s;
}

#overviewWrap.is-in .overview-name>p,
#overviewWrap.is-in .overview-desc>p {
	transform: translateY(0);
	transition-delay: 0.9s;
}

/* 태블릿 */
@media (max-width: 1200px) {
	#overviewWrap {
		padding: 0 50px;
	}

	#overviewWrap .overview-box-inner {
		gap: 24px;
		max-width: none;
	}

	/* .overview-title font-size 오버라이드 제거: tit 토큰 clamp가 처리 */

	#overviewWrap .overview-list {
		flex-direction: column;
		gap: 20px;
		white-space: normal;
	}

	#overviewWrap .overview-list>li {
		flex: none;
		gap: 8px;
		font-size: var(--kit-txt-nm);
	}

	#overviewWrap .overview-list>li.short {
		flex: none;
	}

	#overviewWrap .overview-list>li.short>div {
		padding-right: 0;
	}

	#overviewWrap .overview-desc {
		min-height: auto;
	}

	#overviewWrap .overview-desc small {
		font-size: var(--kit-txt-xs);
	}

	#overviewWrap .overview-name {
		font-size: var(--kit-txt-sm);
	}
}

/* 모바일 */
@media (max-width: 768px) {
	#overviewWrap {
		padding: 0 24px;
	}

	#overviewWrap .overview-box-inner {
		gap: 24px;
	}

	/* .overview-title font-size 오버라이드 제거: tit 토큰 clamp가 처리 */

	#overviewWrap .overview-list {
		flex-direction: column;
		gap: 20px;
		white-space: normal;
	}

	#overviewWrap .overview-list>li {
		gap: 6px;
		font-size: var(--kit-txt-xs);
	}

	/* 모바일: 라벨(이름) → 라인 → 설명 순서 (원본과 동일) */
	#overviewWrap .overview-name {
		font-size: var(--kit-txt-xs);
		order: 1;
	}

	#overviewWrap .overview-line {
		order: 2;
	}

	#overviewWrap .overview-desc {
		order: 3;
		min-height: auto;
	}

	#overviewWrap .overview-desc small {
		font-size: var(--kit-txt-xs);
	}
}

#overviewWrap br.pcView {
	display: block;
}

@media (max-width: 768px) {
	#overviewWrap br.pcView {
		display: none;
	}
}

/* =========================================================
		   [이관] 원래 본문에 있던 #rooms 전용 스타일 (최상단으로 통합)
		   ========================================================= */
/* section01 상단 타이틀 'Room Preview' — Pretendard, 화이트, 반응형(clamp) */
#rooms .room-preview-title {
	position: absolute;
	top: clamp(96px, 13vh, 170px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1050;
	margin: 0;
	color: var(--kit-color-on-dark);
	font-family: var(--kit-font-base);
	font-size: var(--kit-txt-tit);
	letter-spacing: .06em;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* 중앙(활성) 카드 상단 코너에 조감도(좌)·타입 텍스트(우)를 아치 위에 표시.
				   아치 PNG(z-1000)/패럴럭스를 건드리지 않도록 별도 오버레이 레이어로 얹고,
				   슬라이드 전환 시 JS(afterChange)로 내용만 교체한다. PC(카드 580px) 전용. */
#rooms .sec01-plan-ov {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 580px;
	height: 300px;
	z-index: 1100;
	pointer-events: none;
}

/* ===== PC · 태블릿: 조감도 썸네일 (첫 버전 그대로) ===== */
#rooms .sec01-plan-ov .unit-plan {
	position: absolute;
	top: 30px;
	left: 14px;
	width: 150px;
	height: 150px;
	box-sizing: border-box;
	padding: 9px;
	background: var(--kit-color-bg);
	border-radius: var(--kit-radius-md);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .06);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: auto;
	cursor: zoom-in;
}

#rooms .sec01-plan-ov .unit-plan.is-empty {
	background: var(--kit-color-surface);
	pointer-events: none;
	cursor: default;
}

#rooms .sec01-plan-ov .unit-plan .pimg {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

#rooms .sec01-plan-ov .unit-plan.is-empty .pimg {
	display: none;
}

#rooms .sec01-plan-ov .unit-plan .soon {
	display: none;
	font-size: var(--kit-txt-xs);
	line-height: 1.4;
	color: var(--kit-color-ink-subtle);
	text-align: center;
	letter-spacing: .02em;
}

#rooms .sec01-plan-ov .unit-plan.is-empty .soon {
	display: block;
}

#rooms .sec01-plan-ov .plan-area {
	position: absolute;
	top: 2px;
	left: 14px;
	width: 150px;
	margin: 0;
	text-align: center;
	font-size: var(--kit-txt-nm);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--kit-color-on-dark);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

#rooms .sec01-plan-ov .plan-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 18px 8px 8px;
	background: linear-gradient(to top, var(--kit-color-scrim), rgba(18, 13, 8, 0));
	text-align: center;
	font-size: var(--kit-txt-2xs);
	letter-spacing: .06em;
	color: var(--kit-color-on-dark);
}

#rooms .sec01-plan-ov .unit-plan.is-empty .plan-cap {
	display: none;
}

/* '평면도 보기' 버튼 — 기본 숨김, 모바일(≤767)에서만 노출 */
#rooms .sec01-plan-ov .plan-btn {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--kit-radius-pill);
	background: rgba(255, 255, 255, .95);
	color: var(--kit-color-ink);
	box-shadow: var(--kit-shadow-md);
	font-size: var(--kit-txt-xs);
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
}

#rooms .sec01-plan-ov .plan-btn:active {
	transform: translateY(1px);
}

#rooms .sec01-plan-ov .plan-btn svg {
	width: 15px;
	height: 15px;
	flex: none;
}

#rooms .sec01-plan-ov .plan-btn[disabled] {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}

/* ===== 태블릿 + 모바일 (≤1400px): 아치를 화면 하단으로 내리고,
				         썸네일 대신 '평면도 보기' 버튼을 아치 위 중앙에 표시. (태블릿 카드 ~466px)
				   >1400px(넓은 데스크톱)에서만 코너 썸네일 유지. */
@media (max-width: 1400px) {
	#rooms .slide_wrap {
		padding-top: max(240px, calc(100dvh - 460px));
	}

	#rooms .sec01-plan-ov {
		display: flex;
		justify-content: center;
		width: auto;
		height: auto;
		top: auto;
		bottom: 476px;
		left: 50%;
		transform: translateX(-50%);
	}

	#rooms .sec01-plan-ov .unit-plan,
	#rooms .sec01-plan-ov .plan-area {
		display: none;
	}

	#rooms .sec01-plan-ov .plan-btn {
		display: inline-flex;
	}
}

/* ===== 모바일 (≤767px): 카드높이 ~400px 기준으로 위치 보정 ===== */
@media (max-width: 767px) {
	#rooms .slide_wrap {
		padding-top: max(200px, calc(100dvh - 460px));
	}

	#rooms .sec01-plan-ov {
		bottom: 410px;
	}
}

/* === 크게 보기 팝업 === */
.plan-modal {
	position: fixed;
	inset: 0;
	z-index: 1000000;   /* 헤더(.penta-header z-index:100000)보다 위 — 상단 내비바가 모달/닫기버튼 클릭 가로채는 문제 방지 */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 6vh 6vw;
	background: var(--kit-color-scrim);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.plan-modal.is-open {
	display: flex;
}

.plan-modal__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: min(1000px, 92vw);
}

.plan-modal__close {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: var(--kit-color-on-dark);
	font-size: 30px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
	transition: background .2s;
}

.plan-modal__close:hover {
	background: rgba(255, 255, 255, .3);
}

.plan-modal__close:focus-visible {
	outline: 2px solid var(--kit-color-on-dark);
	outline-offset: 3px;
}

.plan-modal__frame {
	margin-top: 20px;
	background: var(--kit-color-bg);
	border-radius: var(--kit-radius-lg);
	padding: 24px;
	max-height: calc(88vh - 68px);
	box-shadow: var(--kit-shadow-lg);
	display: flex;
}

.plan-modal__img {
	max-width: 100%;
	max-height: calc(88vh - 116px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.plan-modal__close {
		transition: none;
	}
}

/* ===== [이식] 경동 slider-tab 컴포넌트 CSS (.solution-*, :root 토큰) ===== */
/* 보정: 셸에서 line-height:0 을 상속받아 제목이 붕괴 → 정상 행간 지정 (tit-h2 원본 대체) */
#sliderScn .solution-name {
	line-height: 1.2;
}

#sliderScn .solution-label {
	line-height: 1.2;
}

/* 보정: 원본은 body{background:var(--kit-color-black)} 위에 흰 카드+흰 탭. de-iframe 후 그 검은 배경 복원 → 탭·인디케이터 보이게 */
#sliderScn {
	background: var(--kit-color-black);
}

/* 보정: .solution-main 의 흰 배경이 섹션 검정을 덮어, 배경이미지 깨진 탭(인피니티풀 등)에서 흰 탭이 안 보임
		   → 투명 처리해 #sliderScn 의 어두운 배경이 드러나게 (이미지 로드되는 탭은 이미지가 그 위를 덮음) */
#sliderScn .solution-main,
#sliderScn .solution-main-inner {
	background: transparent;
}

:root {
	--swiper-theme-color: #007aff
}

:root {
	--swiper-navigation-size: 44px
}

:root {
	--header-transition-duration: 0.5s
}

.solution-main,
.solution-main .solution-main-inner {
	display: flex;
	width: 100vw;
	height: 100vh;
	background-color: var(--kit-color-bg)
}

.solution-main .solution-main-inner {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0
}

.solution-main .solution-main-tab {
	display: flex;
	z-index: 200;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: max(8.3333333333vh, 80px)
}

.solution-main .solution-main-tab .solution-main-tab-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 100%;
	color: var(--kit-color-on-dark);
	font-size: var(--kit-txt-sub);
	font-weight: 800;
	border-top: 1px solid hsla(0, 0%, 100%, .6);
	box-sizing: border-box;
	transition: color .3s
}

.solution-main .solution-main-tab .solution-main-tab-button.active {
	border-color: var(--kit-color-on-dark)
}

.solution-main .solution-main-tab .tab-indicator {
	position: absolute;
	top: -2px;
	left: 0;
	width: 25%;
	border-top: 4px solid var(--kit-color-on-dark);
	transition: left .3s
}

.solution-main .solution-main-tab-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	pointer-events: none
}

.solution-main .solution-main-tab-content.active {
	pointer-events: auto
}

.solution-main .solution-main-tab-content .solution-item-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: transparent;
	object-fit: cover;
	opacity: 0;
	transition: opacity .7s;
	/* 폴백: 배경 이미지 404/미입력 시 어두운 바탕 유지 (섹션과 동일 톤, 깨진 아이콘 최소화) */
	background-color: var(--kit-color-ink)
}

.solution-main .solution-main-tab-content.active .solution-item-background {
	opacity: 1
}

.solution-main .solution-main-tab-content .solution-item-info {
	position: absolute;
	top: 50%;
	right: max(5.2083333333vw, 100px);
	width: max(22.9166666667vw, 440px);
	overflow: hidden;
	border-radius: var(--kit-radius-xl);
	background: hsla(0, 0%, 100%, .95);
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transform: translateY(calc(-50% - max(4.1666666667vh, 40px))) translateX(200px);
	opacity: 0;
	transition: opacity .7s, transform 1s;
	z-index: 5
}

@media (max-height:1000px) {
	.solution-main .solution-main-tab-content .solution-item-info {
		transform: translateY(-50%) translateX(200px)
	}
}

.solution-main .solution-main-tab-content .solution-item-info .info-inner {
	padding: max(2.5vw, 48px)
}

.solution-main .solution-main-tab-content .solution-item-info .solution-label {
	display: block;
	color: var(--kit-color-accent);
	font-size: var(--kit-txt-lead);
	line-height: 1.2;
	text-transform: capitalize;
	margin-bottom: max(.4166666667vw, 8px)
}

.solution-main .solution-main-tab-content .solution-item-info .solution-name {
	color: var(--kit-color-ink);
	font-size: var(--kit-txt-tit);
	font-weight: 800;
	margin-bottom: max(6.25vw, 120px)
}

@media (max-height:1000px) {
	.solution-main .solution-main-tab-content .solution-item-info .solution-name {
		margin-bottom: max(3.125vw, 60px)
	}
}

.solution-main .solution-main-tab-content .solution-item-info .solution-desc {
	font-size: var(--kit-txt-lead);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: max(.8333333333vw, 16px)
}

.solution-main .solution-main-tab-content .solution-item-info .solution-sub-desc {
	min-height: 7em;
	color: var(--kit-color-ink-body);
	font-size: var(--kit-txt-sm);
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: max(1.4583333333vw, 28px)
}

.solution-main .solution-main-tab-content .solution-item-info .solution-thumbs {
	display: flex;
	justify-content: space-between
}

.solution-main .solution-main-tab-content .solution-item-info .solution-thumbs .thumb-item {
	width: calc(50% - 6px)
}

.solution-main .solution-main-tab-content .solution-item-info .solution-thumbs .thumb-item .thumb {
	width: 100%;
	aspect-ratio: 166/100;
	overflow: hidden;
	border-radius: var(--kit-radius-sm);
	/* 폴백: 썸네일 404/미입력 시 흰 카드 위 깨진 아이콘 대신 옅은 회색 플레이스홀더 */
	background-color: var(--kit-color-surface)
}

.solution-main .solution-main-tab-content .solution-item-info .solution-thumbs .thumb-item .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.solution-main .solution-main-tab-content .solution-item-info .solution-thumbs .thumb-item .text {
	color: var(--kit-color-ink-subtle);
	font-size: var(--kit-txt-2xs);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.01em;
	margin-top: 4px;
	margin-right: -12px
}

.solution-main .solution-main-tab-content.active .solution-item-info {
	transform: translateY(calc(-50% - max(4.1666666667vh, 40px))) translateX(0);
	opacity: 1
}

@media (max-height:1000px) {
	.solution-main .solution-main-tab-content.active .solution-item-info {
		transform: translateY(-50%) translateX(0)
	}
}

@media (hover:none)and (pointer:coarse),
(max-width:1239px) {
	.solution-main {
		display: none
	}
}

.solution-main-mobile {
	display: none;
	width: 100vw;
	height: 110vh;
	background-color: var(--kit-color-bg)
}

.solution-main-mobile .solution-main-inner {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
	width: 100vw;
	height: 100vh;
	background-color: var(--kit-color-bg)
}

.solution-main-mobile .solution-main-inner .swiper {
	width: 100%;
	height: 100%;
	overscroll-behavior: contain
}

.solution-main-mobile .solution-main-inner .solution-item {
	height: 100%
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-background {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 750/740
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-background img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

@media (orientation:portrait)and (max-height:700px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner .solution-item .solution-item-background {
		margin-top: -80px
	}
}

@media (orientation:portrait)and (max-height:600px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner .solution-item .solution-item-background {
		margin-top: -100px
	}
}

@media (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background {
		width: auto;
		height: 120%
	}
}

@media (orientation:landscape)and (min-height:500px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background {
		width: 100%;
		height: auto
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background:not(.wide)[data-slide-index="1"],
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background:not(.wide)[data-slide-index="2"],
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background:not(.wide)[data-slide-index="3"],
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background:not(.wide)[data-slide-index="4"] {
		transform: translateY(-20%)
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background.wide {
		height: auto;
		aspect-ratio: 1920/960
	}
}

@media (orientation:landscape)and (min-height:500px)and (min-width:900px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background.wide[data-slide-index="1"] {
		transform: translateY(-20%)
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background.wide[data-slide-index="2"] {
		transform: translateY(-30%)
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background.wide[data-slide-index="3"] {
		transform: translateY(-20%)
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background.wide[data-slide-index="4"] {
		transform: translateY(-10%)
	}
}

@media (orientation:landscape)and (min-height:500px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background.wide .solution-main-dot-wrapper {
		right: auto;
		width: 1920px;
		height: 960px;
		aspect-ratio: 1920/960;
		transform-origin: 0 0
	}
}

@media (orientation:landscape)and (max-height:450px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background {
		width: 55%;
		height: 120%
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-background .solution-main-dot-wrapper {
		height: 100%;
		left: 50%;
		right: auto;
		transform: translateX(-50%) !important
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info:before {
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 375/246;
	content: ""
}

@media (orientation:portrait)and (max-height:700px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner .solution-item .solution-item-info:before {
		margin-top: -80px
	}
}

@media (orientation:portrait)and (max-height:600px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner .solution-item .solution-item-info:before {
		margin-top: -100px
	}
}

@media (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info:before {
		display: none
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner {
	flex: 1 1 0;          /* was 1 0(shrink:0) → 서브설명 길면 안 줄고 넘쳐 썸네일 잘림 */
	min-height: 0;        /* flex 자식 내부 스크롤 허용 */
	overflow-y: auto;     /* 세로 모드: 내용 길면 카드 내부 스크롤(썸네일까지 도달, 잘림 없음) */
	border-radius: var(--kit-radius-xl) var(--kit-radius-xl) 0 0;
	background-color: var(--kit-color-bg);
	padding: 30px 20px;
	box-sizing: border-box   /* width(100%/45%)+padding 이 right:0 기준 좌측으로 넘쳐 글자 잘리던 문제 해결(아이패드 가로) */
}

@media (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner {
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
		height: 100%;
		border-radius: 0;
		overflow: hidden;
		overflow-y: auto
	}
}

@media (orientation:landscape)and (min-height:500px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner {
		top: 60%;
		width: 100%;
		bottom: 0;
		height: auto
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner>:not(.solution-thumbs) {
		width: 50%
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner>:not(.solution-thumbs).solution-sub-desc {
		margin-bottom: 0
	}
}

@media (min-width:660px)and (orientation:portrait) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner {
		position: relative
	}
}

@media (min-width:660px)and (orientation:portrait)and (max-height:900px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .info-inner>:not(.solution-thumbs) {
		width: 50%
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-label {
	display: block;
	color: var(--kit-color-accent);
	font-size: var(--kit-txt-sub);
	line-height: 1.2;
	text-transform: capitalize;
	margin-bottom: 8px
}

@media (max-height:740px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-label {
		font-size: var(--kit-txt-nm);
		margin-bottom: 4px
	}

	html:not([lang=ko]) .solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-label {
		font-size: var(--kit-txt-sm)
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-name {
	font-size: var(--kit-txt-sectit);
	font-weight: 800;
	margin-bottom: 40px
}

@media (max-height:740px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-name {
		/* font-size 오버라이드 제거: sectit 토큰이 처리 (base 누락 버그도 함께 수정) */
		margin-bottom: 16px
	}

	/* 영문(non-ko)은 길이가 길어 축소 유지 (해당 크기에 맞는 고정 토큰 없음) */
	html:not([lang=ko]) .solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-name {
		font-size: 20px
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-desc {
	color: var(--kit-color-ink);
	font-size: var(--kit-txt-sub);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 16px
}

@media (max-height:740px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-desc {
		font-size: var(--kit-txt-nm);
		margin-bottom: 10px
	}

	html:not([lang=ko]) .solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-desc {
		font-size: var(--kit-txt-sm)
	}

	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-desc br {
		display: none
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-sub-desc {
	color: var(--kit-color-ink-body);
	font-size: var(--kit-txt-sm);
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 40px
}

@media (max-height:740px) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-sub-desc {
		margin-bottom: 20px
	}

	html:not([lang=ko]) .solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-sub-desc {
		font-size: var(--kit-txt-xs)
	}
}

@media (max-height:740px)and (max-height:450px)and (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-sub-desc {
		margin-bottom: 0
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs {
	display: flex;
	justify-content: space-between
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs .thumb-item {
	width: calc(50% - 6px)
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs .thumb-item .thumb {
	width: 100%;
	aspect-ratio: 162/100
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs .thumb-item .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs .thumb-item .text {
	color: var(--kit-color-ink-subtle);
	font-size: var(--kit-txt-2xs);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.01em;
	margin-top: 4px;
	margin-right: -12px
}

html:not([lang=ko]) .solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs .thumb-item .text {
	margin-right: 0
}

@media (min-width:660px)and (orientation:portrait) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs {
		max-width: 50%
	}
}

@media (min-width:660px)and (max-height:900px)and (orientation:portrait) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs {
		position: absolute;
		top: 50%;
		right: 20px;
		width: 40%;
		transform: translateY(-50%)
	}
}

@media (min-height:500px)and (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs {
		position: absolute;
		top: 50%;
		right: 20px;
		width: 40%;
		transform: translateY(-50%)
	}
}

@media (max-height:450px)and (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .solution-item .solution-item-info .solution-thumbs {
		display: none
	}
}

.solution-main-mobile .solution-main-inner .solution-item .solution-main-dot-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 750/740
}

.solution-main-mobile .solution-main-inner .swiper-pagination {
	--swiper-pagination-bottom: auto;
	--swiper-pagination-top: calc((246 / 375 * 100vw) - 22px);
	--swiper-pagination-bullet-width: calc((100% - 9px) / 4);
	--swiper-pagination-bullet-height: 2px;
	--swiper-pagination-bullet-border-radius: 50px;
	--swiper-pagination-bullet-inactive-color: #d9d9d9;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 0;
	--swiper-pagination-bullet-opacity: 1;
	--swiper-pagination-color: var(--kit-color-accent);
	display: flex;
	justify-content: center;
	gap: 3px;
	left: 20px;
	right: 20px;
	width: auto
}

@media (orientation:portrait)and (max-height:700px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner .swiper-pagination {
		margin-top: -80px
	}
}

@media (orientation:portrait)and (max-height:600px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner .swiper-pagination {
		margin-top: -100px
	}
}

@media (orientation:landscape) {
	.solution-main-mobile .solution-main-inner .swiper-pagination {
		--swiper-pagination-bottom: calc(100vh - 100dvh + 20px);
		--swiper-pagination-top: auto;
		width: calc(55% - 40px)
	}
}

@media (orientation:landscape)and (min-height:500px) {
	.solution-main-mobile .solution-main-inner .swiper-pagination {
		--swiper-pagination-bottom: auto;
		--swiper-pagination-top: calc(60dvh - 20px);
		width: auto
	}
}

.solution-main-mobile .solution-main-inner [class^=swiper-button-] {
	--swiper-navigation-top-offset: calc((246 / 375 * 100vw) + 30px);
	left: auto;
	width: 22px;
	height: 22px;
	background: url(../vendor/www.kdnavien.co.kr/images/main/icon_nav_solution_swiper.svg) no-repeat;
	background-size: 16px auto;
	background-position: 50% 50%;
	margin-top: 0
}

.solution-main-mobile .solution-main-inner [class^=swiper-button-]:after {
	display: none
}

@media (orientation:portrait)and (max-height:700px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner [class^=swiper-button-] {
		margin-top: -80px
	}
}

@media (orientation:portrait)and (max-height:600px) {
	html[lang=ru] .solution-main-mobile .solution-main-inner [class^=swiper-button-] {
		margin-top: -100px
	}
}

@media (orientation:landscape) {
	.solution-main-mobile .solution-main-inner [class^=swiper-button-] {
		display: none
	}
}

.solution-main-mobile .solution-main-inner .swiper-button-prev {
	right: 52px;
	transform: rotateY(180deg)
}

.solution-main-mobile .solution-main-inner .swiper-button-next {
	right: 20px
}

@media (hover:none)and (pointer:coarse),
(max-width:1239px) {
	.solution-main-mobile {
		display: flex
	}
}

:root {
	--STATE_PRIMARY: #3e74ff;
	--STATE_SECONDARY: #ff730f;
	--STATE_ERROR: red;
	--STATE_CAUTION: #f9d160;
	--BORDER_OR500: #ff730f;
	--BORDER_NV700: #3e74ff;
	--BORDER_NV500: #6a95ff;
	--BORDER_GR900: #1a1a1a;
	--BORDER_GR700: #4d4d4d;
	--BORDER_GR500: grey;
	--BORDER_GR200: #ccc;
	--BORDER_GR100: #e6e6e6;
	--BORDER_WHITE: #fff;
	--BG_OR600: #e55f00;
	--BG_OR500: #ff730f;
	--BG_OR50: #ffeadb;
	--BG_NV800: #3364de;
	--BG_NV700: #3e74ff;
	--BG_NV500: #6a95ff;
	--BG_NV50: #eaf0fc;
	--BG_GR900: #1a1a1a;
	--BG_GR700: #4d4d4d;
	--BG_GR800: #333;
	--BG_GR500: grey;
	--BG_GR100: #e6e6e6;
	--BG_GR50: #f7f7f7;
	--BG_WHITE: #fff;
	--BG_DIM: rgba(0, 0, 0, .4);
	--BG_BG_LIGHT01: #f3f8ff;
	--BG_BG_LIGHT02: #fff7f2;
	--BG_BG_LIGHT03: #fbf6ed;
	--BG_BG_LIGHT04: #e6f5f3;
	--BG_BG_LIGHT05: #ebe7e5;
	--BG_BG_DEEP01: #ecdfc8;
	--BG_BG_DEEP02: #329689;
	--TEXT_OR500: #ff730f;
	--TEXT_NV700: #3e74ff;
	--TEXT_NV600: #1444a0;
	--TEXT_NV500: #6a95ff;
	--TEXT_GR900: #1a1a1a;
	--TEXT_GR700: #4d4d4d;
	--TEXT_GR500: grey;
	--TEXT_GR300: #b3b3b3;
	--TEXT_GR200: #ccc;
	--TEXT_WHITE: #fff;
	--ICON_OR500: #ff730f;
	--ICON_NV700: #3e74ff;
	--ICON_GR900: #1a1a1a;
	--ICON_GR700: #4d4d4d;
	--ICON_GR500: grey;
	--ICON_GR300: #b3b3b3;
	--ICON_WHITE: #fff;
	--PALLATE_OR900: #421b00;
	--PALLATE_OR800: #6b2c00;
	--PALLATE_OR700: #bc4e00;
	--PALLATE_OR600: #e55f00;
	--PALLATE_OR500: #ff730f;
	--PALLATE_OR400: #ff8b38;
	--PALLATE_OR300: #ffa361;
	--PALLATE_OR200: #ffba89;
	--PALLATE_OR100: #ffd2b2;
	--PALLATE_OR50: #ffeadb;
	--PALLATE_NV900: #030a18;
	--PALLATE_NV800: #3364de;
	--PALLATE_NV700: #3e74ff;
	--PALLATE_NV600: #1444a0;
	--PALLATE_NV500: #6a95ff;
	--PALLATE_NV400: #3472e6;
	--PALLATE_NV300: #6191ec;
	--PALLATE_NV200: #8fb1f1;
	--PALLATE_NV100: #bcd0f7;
	--PALLATE_NV50: #eaf0fc;
	--PALLATE_GR900: #1a1a1a;
	--PALLATE_GR800: #333;
	--PALLATE_GR700: #4d4d4d;
	--PALLATE_GR600: #666;
	--PALLATE_GR500: grey;
	--PALLATE_GR400: #999;
	--PALLATE_GR300: #b3b3b3;
	--PALLATE_GR200: #ccc;
	--PALLATE_GR100: #e6e6e6;
	--PALLATE_GR50: #f7f7f7;
	--PALLATE_WHITE: #fff;
	--font-2xs: 14px;
	--font-xs: 15px;
	--font-sm: 17px;
	--font-md: 18px;
	--font-lg: 20px;
	--font-xl: 24px;
	--font-2xl: 30px;
	--font-3xl: 34px;
	--font-4xl: 40px;
	--font-5xl: 68px;
	--font-6xl: 72px;
	--lh-normal: 1.4;
	--lh-xs: 1.33;
	--lh-sm: 1.5;
	--lh-md: 1.55555;
	--header-height-pc: 128px;
	--header-height-mobile: 72px;
	--spacing-x: clamp(20px, calc(20px + (100vw - 1240px) * 0.1363636364), 80px);
	--spacing-x-neg: clamp(-80px, calc(-24px + (100vw - 1240px) * -0.1272727273), -24px);
	--spacing-y-lg: 160px;
	--spacing-y-md: 80px;
	--spacing-y-sm: 64px;
	--spacing-y-xs: 40px;
	--spacing-y-lg-neg: -160px;
	--spacing-y-md-neg: -80px;
	--spacing-y-sm-neg: -64px;
	--spacing-y-xs-neg: -40px
}