@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');*/

:root {
	--h3-tit: 40px;
	--h4-tit: 28px;
	--h5-tit: 32px;
	--h6-tit: 22px;
	--sub-txt: 18px;
	--remark: 13px;
	--lh: 1.7em;
	--awesome: 'Font Awesome 7 Pro';
	--gray: #d7d7d7;
	/* 헤더 높이 (실제 #header.offsetHeight 로 JS가 덮어씀). 풀스크린 섹션에서 calc(100svh - var(--header-height)) 형태로 사용. */
	--header-height: 122px;
	--header-line-box-height: 3px;
}

.mt0{margin-top: 0 !important}
.mt5 {margin-top: 5px}
.mt10 {margin-top: 10px}
.mt15 {margin-top: 15px}
.mt20 {margin-top: 20px}
.mt25 {margin-top: 25px}
.mt30 {margin-top: 30px}
.mt35 {margin-top: 35px}
.mt40 {margin-top: 40px}
.mt45 {margin-top: 45px}
.mt50 {margin-top: 50px}
.mt55 {margin-top: 55px}
.mt60 {margin-top: 60px}
.mt65 {margin-top: 65px}
.mt70 {margin-top: 70px}
.mt75 {margin-top: 75px}
.mt80 {margin-top: 80px}
.mt85 {margin-top: 85px}
.mt90 {margin-top: 90px}
.mt95 {margin-top: 95px}
.mt100 {margin-top: 100px}

.mb0{margin-bottom: 0 !important}
.mb5 {margin-bottom: 5px}
.mb10 {margin-bottom: 10px}
.mb15 {margin-bottom: 15px}
.mb20 {margin-bottom: 20px}
.mb25 {margin-bottom: 25px}
.mb30 {margin-bottom: 30px}
.mb35 {margin-bottom: 35px}
.mb40 {margin-bottom: 40px}
.mb45 {margin-bottom: 45px}
.mb50 {margin-bottom: 50px}
.mb55 {margin-bottom: 55px}
.mb60 {margin-bottom: 60px}
.mb65 {margin-bottom: 65px}
.mb70 {margin-bottom: 70px}
.mb75 {margin-bottom: 75px}
.mb80 {margin-bottom: 80px}
.mb85 {margin-bottom: 85px}
.mb90 {margin-bottom: 90px}
.mb95 {margin-bottom: 95px}
.mb100 {margin-bottom: 100px}

.pt0{padding-top: 0 !important;}
.pt5 {padding-top: 5px}
.pt10 {padding-top: 10px}
.pt15 {padding-top: 15px}
.pt20 {padding-top: 20px}
.pt25 {padding-top: 25px}
.pt30 {padding-top: 30px}
.pt35 {padding-top: 35px}
.pt40 {padding-top: 40px}
.pt45 {padding-top: 45px}
.pt50 {padding-top: 50px}
.pt55 {padding-top: 55px}
.pt60 {padding-top: 60px}
.pt65 {padding-top: 65px}
.pt70 {padding-top: 70px}
.pt75 {padding-top: 75px}
.pt80 {padding-top: 80px}
.pt85 {padding-top: 85px}
.pt90 {padding-top: 90px}
.pt95 {padding-top: 95px}
.pt100 {padding-top: 100px}

.pb0{padding-bottom: 0 !important;}
.pb5 {padding-bottom: 5px}
.pb10 {padding-bottom: 10px}
.pb15 {padding-bottom: 15px}
.pb20 {padding-bottom: 20px}
.pb25 {padding-bottom: 25px}
.pb30 {padding-bottom: 30px}
.pb35 {padding-bottom: 35px}
.pb40 {padding-bottom: 40px}
.pb45 {padding-bottom: 45px}
.pb50 {padding-bottom: 50px}
.pb55 {padding-bottom: 55px}
.pb60 {padding-bottom: 60px}
.pb65 {padding-bottom: 65px}
.pb70 {padding-bottom: 70px}
.pb75 {padding-bottom: 75px}
.pb80 {padding-bottom: 80px}
.pb85 {padding-bottom: 85px}
.pb90 {padding-bottom: 90px}
.pb95 {padding-bottom: 95px}
.pb100 {padding-bottom: 100px}


/*common*/
.hidden { display:block; height: 0; width: 0; font-size: 0; line-height: 0; margin: 0; padding: 0; overflow:hidden; border: none}

.pc_only {display:block !important;}
.mo_only {display:none !important;}

.outfit{font-family: 'outfit'; font-style: normal !important;}
/* Outfit 토큰은 부모 한글 400의 보정값을 기본으로 사용한다. 500 부모는 아래처럼 450을 명시한다. */
em.outfit{font-weight: 350;}
.notokr{font-family: 'outfit','Noto Sans KR';}
.inter{font-family: 'Inter';}

.jfont{font-family:'JejuMyeongjo';}

.wow{visibility: hidden;}

.swiper-wrapper.disabled { transform: translate3d(0px, 0, 0) !important}
.swiper-pagination.disabled, .swiper-button-prev.disabled, .swiper-button-next.disabled, .swiper-button-pause.disabled { display: none}
.swiper-button-next, .swiper-button-prev { outline:none}

html.scroll_none{overflow: hidden}

html.header-submenu-lock,
body.header-submenu-lock{overflow: hidden}

body.header-submenu-lock{
	padding-right: 0;
}

#header {display: flex; flex-wrap: wrap; position: absolute; width:100%; top:0; left:0; z-index:30}
#header .header_dim{position: fixed; top: 0; left: 0; z-index: 29; opacity: 0; width: 100%; height: 100%; background: rgb(29, 29, 29); transition: opacity 0.5s; pointer-events: none}
#header .header_dim.on{opacity: 0.8; pointer-events: all}

#header.nav-open .header_top{
	padding-right: var(--header-pc-gutter, 13.0vw);
}
#header.nav-open .header_top .logo{
	left: 50%;
}
#header.nav-open nav .deps_1{
	width: 100%;
}
#header.nav-open nav .deps_1 > li .deps_2{
	width: calc(100% + 6rem);
	padding-right: var(--header-pc-gutter, 13.0vw);
}

#header .header_top{display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 31; width: 100%; height: 60px; padding: 0 var(--header-pc-gutter, 13.0vw); background: #fff; border-bottom: 1px solid #e5e5e5; transition: padding 0.3s, background 0.3s, color 0.3s, border-color 0.3s}
#header .header_top .logo{position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-50%, -50%); width: 116.7px; height: 49.1px; margin-top:8px;}
#header .header_top .logo a{display: flex; width: 100%; height: 100%; background: url(/inc/img/logo_clair_header_b.svg?v=2026100101) no-repeat 0 0; font-size: 0; transition: background-image 0.01s;background-size:contain;}
#header .header_top .logo img{height: 24px}
#header .header_top .mo_cont{display: none}
#header .header_top .left{}
#header .header_top .left ul{display: flex; align-items: baseline; font-family: 'outfit'; font-size: 13px; font-weight: 350}
#header .header_top .left ul li:not(:first-child){margin-left: 2.7rem}
#header .header_top .left ul li a img{width: 45px}
#header .header_top .user_menu{}
#header .header_top .user_menu ul{display: flex; font-family: 'outfit'; font-size: 13px; font-weight: 350}
#header .header_top .user_menu ul li:not(:first-child){margin-left: 2rem}
#header .header_top .history_back{font-size: 14px}
#header .header_top .history_back i{margin-right: 0.75em}

/* 헤더 gnb */
#header nav {position: relative; z-index: 50; opacity: 1; width: 100%; padding: 0 3rem; background: #fff; border-bottom: 1px solid var(--gray); transition: background 0.3s, opacity 0.3s; pointer-events: all}
#header nav .bg{position: absolute; top: 60px; left: 0; width: 100%; height: 0; background: #fff; border-top: 1px solid var(--gray); transition: height 0.3s ease-out 0.3s}
#header nav .nav_top{display: none}
#header nav .nav_bot{display: none}
#header nav .mega_close_btn{display: none}
#header nav .deps_1 {display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; height: 100%}
#header nav .deps_1 > li {cursor: pointer;}
.open4 {position: absolute; bottom:10px; top:auto; width: 100px; height:12px; margin-left: 49.6px; color: #5310C8; font-family: 'notokr';   font-size:12px; font-style: normal;font-weight:600;}
.open4 em{font-size:13.5px}
.open6 {position: absolute; bottom:10px; top:auto; width: 100px; height:12px; margin-left: 24.3px; color: #5310C8; font-family: 'notokr';  font-size:12px; font-style: normal;font-weight:600;}
.open6 em{font-size:13.5px}
#header nav .deps_1 > li > a{display: inline-block; position: relative; white-space: nowrap; height: 100%; padding: 17.5px 0 17.5px 2rem; font-size: 14px; text-align: center; line-height: 1.4285714; cursor: default; pointer-events: none; transition: color 0.3s}
#header nav .deps_1 > li:first-child > a{padding-left: 0}
#header nav .deps_1 > li.active > a {font-weight: 400}
#header nav .deps_1 > li.on > a {font-weight: 400}
#header nav .deps_1 > li > a::before{display: block; content: attr(data-tit); font-weight: bold; height: 0; overflow: hidden; visibility: hidden}
#header nav .deps_1 > li .deps_2 {display: flex; justify-content: space-between; overflow: hidden; position: absolute; left: -3rem; bottom: 0; opacity: 0; transform: translate(0%, 100%); width: calc(100% + 6rem); padding: 57px var(--header-pc-gutter, 13.0vw) 2rem; pointer-events: none; cursor: default; transition: opacity 0.2s ease-out 0.05s}
/*#header nav .deps_1 > li.on .deps_2 {opacity: 1; bottom: 0; pointer-events: all; transition: opacity 0.3s ease-out 0.3s}*/
#header nav .deps_1 > li .deps_2 li > a {display: inline-block; padding: 0 0 9px 0; font-size: 14px; cursor: pointer}
#header nav .deps_1 > li .deps_2 li > a em.outfit{font-weight: 350}
#header nav .deps_1 > li .deps_2 li.active > a {font-weight: 400}
/* PC 2-depth 메뉴: 6개씩 다음 컬럼으로 wrap (모든 메뉴에서 동일 col 위치, 13+ 자동 처리) */
@media (min-width: 1025px){
    #header nav .deps_1 > li .deps_2 > ul {
        display: grid;
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: column;
        grid-auto-columns: 180px;
    }
}

/* 이미지가 지정되지 않은 헤더 이미지 슬롯은 모바일 메뉴에서 노출하지 않음 */
.deps_2_visual {
	display: none;
}

/* 헤더 이미지의 <picture>는 레이아웃 박스를 만들지 않아야 기존 img 배치 규칙이 그대로 유지된다 */
#header nav picture {
	display: contents;
}

/* 선택한 1차 카테고리의 deps_2를 헤더 아래 남은 화면 높이만큼 확장 */
@media (min-width: 1025px){
	/* 축소 배율에서도 메인 비주얼이 서브메뉴 아래로 비치지 않도록 패널 자체를 불투명하게 유지 */
	#header nav .deps_1 > li .deps_2 {
		background: #fff;
	}

	#header nav .deps_1 > li.menu-2 > .deps_2,
	#header nav .deps_1 > li.menu-4 > .deps_2,
	#header nav .deps_1 > li.menu-5 > .deps_2,
	#header nav .deps_1 > li.menu-8 > .deps_2 {
		min-height: calc(100vh - var(--header-menu-start, var(--header-height, 120px)));
		min-height: max(calc(100svh - var(--header-menu-start, var(--header-height, 120px))), var(--header-menu-panel-min-height, 0px));
		padding-top: 0;
		padding-bottom: 0;
		transform: translate(0, 100%);
	}

	/* 레퍼런스·포뮬라 3차 영역은 현재 내용 높이의 2배로 표시 */
	#header nav .deps_1 > li.menu-6 > .deps_2,
	#header nav .deps_1 > li.menu-7 > .deps_2 {
		min-height: 431px;
	}

	/* 2차 메뉴가 있는 카테고리: 중앙 기준선부터 우측 기준선까지 이미지 영역 */
	#header nav .deps_1 > li.menu-2 > .deps_2,
	#header nav .deps_1 > li.menu-4 > .deps_2,
	#header nav .deps_1 > li.menu-5 > .deps_2,
	#header nav .deps_1 > li.menu-7 > .deps_2,
	#header nav .deps_1 > li.menu-8 > .deps_2 {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-content: center;
		align-items: start;
	}

	#header nav .deps_1 > li.menu-2 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-4 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-5 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-7 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-8 > .deps_2 > ul {
		grid-column: 1;
	}

	#header nav .deps_1 > li.menu-2 > .deps_2 > .deps_2_visual,
	#header nav .deps_1 > li.menu-4 > .deps_2 > .deps_2_visual,
	#header nav .deps_1 > li.menu-5 > .deps_2 > .deps_2_visual,
	#header nav .deps_1 > li.menu-7 > .deps_2 > .deps_2_visual,
	#header nav .deps_1 > li.menu-8 > .deps_2 > .deps_2_visual {
		display: block;
		position: relative;
		grid-column: 2;
		align-self: start;
		width: 100%;
		transform: translateY(var(--header-menu-optical-offset, 0px));
		/* 원래 규칙: 이미지 영역 높이는 너비보다 1rem 작게 유지 */
		height: 0;
		padding-bottom: calc(100% - 1rem);
		justify-self: end;
		overflow: hidden;
		isolation: isolate;
	}

	#header nav .deps_1 > li .deps_2 > .deps_2_visual .deps_2_visual_default,
	#header nav .deps_1 > li .deps_2 > .deps_2_visual .deps_2_visual_layer {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	#header nav .deps_1 > li .deps_2 > .deps_2_visual .deps_2_visual_default {
		opacity: 1;
		z-index: 1;
	}

	#header nav .deps_1 > li .deps_2 > .deps_2_visual .deps_2_visual_layer {
		opacity: 0;
		z-index: 2;
		transition: opacity 0.4s ease-in 0.4s;
		will-change: opacity;
	}

	#header nav .deps_1 > li .deps_2 > .deps_2_visual .deps_2_visual_layer.is-active {
		opacity: 1;
		z-index: 3;
		transition-delay: 0s;
	}

	#header nav .deps_1 > li.menu-2 > .deps_2 > .deps_2_visual img,
	#header nav .deps_1 > li.menu-4 > .deps_2 > .deps_2_visual img,
	#header nav .deps_1 > li.menu-5 > .deps_2 > .deps_2_visual img,
	#header nav .deps_1 > li.menu-7 > .deps_2 > .deps_2_visual img,
	#header nav .deps_1 > li.menu-8 > .deps_2 > .deps_2_visual img {
		display: block;
		width: 100%;
		height: 100%;
		margin-left: 0.5rem;
		object-fit: cover;
	}

	/* 왼쪽 메뉴 시작점은 세로 중앙의 오른쪽 이미지보다 8px 위에 배치 */
	#header nav .deps_1 > li.menu-2 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-4 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-5 > .deps_2 > ul,
	#header nav .deps_1 > li.menu-8 > .deps_2 > ul {
		align-self: start;
		align-content: start;
		transform: translateY(calc(-8px + var(--header-menu-optical-offset, 0px)));
	}
}

/* 레퍼런스·포뮬라 메뉴는 3차 영역을 이미지 카드 3개로 구성 */
#header nav .deps_1 > li > .deps_2.reference-deps_2 {
	padding-bottom: 75px;
}

@media (min-width: 768px){
	#header nav .deps_1 > li > .deps_2.reference-deps_2 {
		padding-top: 3%;
		padding-bottom: 3%;
	}
}

#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
	width: 100%;
}

#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	color: #000;
	text-align: center;
}

#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_image {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	width: 100%;
}

#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_image img {
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 8px;
	object-fit: cover;
}

#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_title {
	display: block;
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	width: 100%;
}

#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_subtitle {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: rgb(136, 136, 136);
	text-align: center;
	width: 100%;
}

@media (min-width: 1025px){
	#header nav .deps_1 > li > .deps_2.reference-deps_2 {
		display: block;
	}
}

@media (max-width: 767px){
	#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_cards {
		gap: 7px;
	}

	#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_title {
		margin-top: 0.5rem;
		font-size: var(--sub-txt);
	}

	#header nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_subtitle {
		margin-top: 5px;
		font-size: 13px;
		font-weight: 400;
	}
}
/* PC 글자 굵기 지정 */
@media (min-width: 1025px){ 
	#header nav .deps_1 > li{font-weight:normal;}
}


/* 상단 도달 시 투명 */
#header.transparent{}
/* 배경이 투명할 때(슬라이드 위)에는 헤더 텍스트와 로고를 흰색으로 표시 */
#header.transparent .header_top{background: transparent; border-color: transparent; color: #fff}
#header.type3.transparent .header_top {color: #fff;}
#header.transparent.on .header_top .logo img{opacity: 1 !important}
#header.transparent.on nav{pointer-events: all}
/* transparent 평소 상태: 흰색 로고. 호버/서브메뉴 열림 시에는 line 371/358에서 검정 로고로 전환 */
#header.transparent:not(.nav-open) .header_top .logo a{background-image: url(/inc/img/logo_clair_header_w.svg?v=2026100101)}
#header.bd_none .header_top{border-bottom-color: transparent !important}

/* =====================================================
 * C-2 컨투어 모듈 페이지: 투명 헤더의 기본 텍스트/로고를 검은색으로
 * (호버·nav-open 시에는 기존 hover 규칙이 그대로 검은 텍스트/흰 배경을 유지)
 * 대상: ?p=26, ?p=31~37, ?p=66 (총 9 페이지)
 * ===================================================== */
body.c2-dark-header #header.transparent .header_top { color: #000; }
body.c2-dark-header #header.transparent:not(.nav-open) .header_top .logo a {
    background-image: url(/inc/img/logo_clair_header_b.svg?v=2026100101);
}
body.c2-dark-header #header.transparent:not(:hover):not(.nav-open) nav .deps_1 > li > a { color: #000; }
body.c2-dark-header #header.transparent:not(:hover):not(.nav-open) .header_top .left ul li a,
body.c2-dark-header #header.transparent:not(:hover):not(.nav-open) .header_top .user_menu ul li a { color: #000; }

/* C-2: .sub_visual .txt (히어로 타이틀) 흰→검 (밝은 히어로용) */
body.c2-dark-header .sub_visual .txt { color: #000; text-shadow: none; }

/* 헤더 상단 좌측(aether) / 우측(user_menu) 텍스트 굵기: 흰색=메인비주얼 서브텍스트의 폰트/굵기와 동일, 검은색=400 (outfit 상속) */
#header .header_top .left ul li a,
#header .header_top .user_menu ul li a {
    font-weight: 350;
}
/* transparent 기본 상태도 메뉴 열린 상태와 같은 폰트 패밀리/굵기로 유지해 좌우 재배치를 방지 */
#header.transparent:not(:hover):not(.nav-open) .header_top .left ul li a,
#header.transparent:not(:hover):not(.nav-open) .header_top .user_menu ul li a {
    font-family: 'outfit';
    font-weight: 350;
}
#header.transparent:not(:hover):not(.nav-open) nav .nav_top a.icon,
#header.transparent:not(:hover):not(.nav-open) nav .nav_bot a span{
    font-family: 'outfit';
    font-weight: 400;
}

/* 일반 상세페이지: 고정 2단 헤더를 불투명하게 표시하고 본문 공간을 확보 */
#header.detail-header .header_top{background:#fff; border-bottom:1px solid transparent !important; color:#000}
#header.detail-header nav{opacity:1; background:#fff; pointer-events:all}
/* 일반 상세페이지도 메인 헤더의 메뉴 열린 상태와 동일한 상단 폰트 유지 */
#header.detail-header .header_top .left ul,
#header.detail-header .header_top .left ul li a,
#header.detail-header .header_top .user_menu ul,
#header.detail-header .header_top .user_menu ul li a {
    font-family: 'outfit';
    font-weight: 350;
}
.detail-header-spacer{height:120px}

@media (max-width:1024px){
	.detail-header-spacer{height:60px}
}

/* PC 헤더 상단 영역 높이 */
@media (min-width:1025px){
	html{scrollbar-gutter: stable}
	#header{
		--header-menu-visual-height-fallback: calc(37vw - 1rem);
		--header-menu-panel-min-height: calc(var(--header-menu-visual-height-fallback) + 72px);
	}
	#header .header_top{height:80px}
	#header.nav-open .header_top,
	#header.mega-menu-immediate .header_top{
		/* 메뉴 스크롤 잠금/해제 때 login·join의 좌우 재배치를 애니메이션하지 않음 */
		transition: background 0.3s, color 0.3s, border-color 0.3s;
	}
	.detail-header-spacer{height:140px}
	:root { --header-height: 142px; }
}

/* PC 헤더의 내용은 최대 1600px 화면 기준으로 배치하고, 짧은 화면에서는 패널이 아래로 이어진다. */
@media (min-width: 1025px) and (max-width: 1920px){
	#header{
		--header-pc-gutter: max(13vw, calc((100vw - 1184px) / 2));
		--header-menu-visual-height-fallback: calc(min(37vw, 592px) - 1rem);
	}
}



/* Footer variants are isolated in footer_white.css and footer_black.css. */


/* 푸터 이용약관 */
.terms_modal {display: block; overflow: auto; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 999; opacity: 0; width:100%; height: 100%; padding: 80px 0; background: rgba(0, 0, 0, 0.7); pointer-events: none; transition: 0.3s ease-in-out}
.terms_modal.open {opacity: 1; pointer-events: inherit}
.terms_modal .dim{position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7)}
.terms_modal .modal_wrap {display: table; margin: 0 auto;width: 100%;height: 100%;position: relative; padding: 0 15px; z-index: 1; table-layout: fixed;vertical-align: middle}
.terms_modal .modal_wrap .scroll_box {display: table-cell; vertical-align: middle}
.terms_modal .modal_cont{width: 696px; max-width: 100%; margin: 0 auto; background-color: #fff; position: relative}
.terms_modal .modal_cont .close{position: absolute; top: 1px; right: 0; padding: 0; background-color: #000; width: 37px; height: 37px; text-align: center}
.terms_modal .modal_cont .close i{font-size: 27px; color: #fff; line-height: 37px}
.terms_modal .modal_cont .cont,
.terms_modal .modal_cont .cont *{font-family: 'outfit', 'Noto Sans KR', sans-serif !important; font-size: 16px !important; font-weight: 400 !important}
.terms_modal .modal_cont .cont .reference ul li::before{font-family: 'outfit', 'Noto Sans KR', sans-serif !important; font-size: 16px !important; font-weight: 400 !important}
.terms_modal .modal_cont .modal_top{position: relative; padding: 0; background: #000; font-size: var(--h6-tit); text-align: center}
.terms_modal .modal_cont .modal_top p{padding: 0.5em 0; color: #fff}
.terms_modal .modal_cont .modal_top .modal_close {position: absolute; right: 30px; top: 50%; transform: translate(0%,-50%); font-size: 18px; color: #fff}
.terms_modal .cont{overflow: visible; max-height: none; padding: 65px 65px 71px 65px}
.terms_modal .modal_terms_area{overflow-y: auto; max-height: calc(100vh - 417px); width: calc(100% + 65px); margin-top: -19px; padding-top: 19px; padding-right: 45px; box-sizing: border-box; word-break: break-all}
.terms_modal .modal_terms_area::-webkit-scrollbar{width: 20px}
.terms_modal .modal_terms_area::-webkit-scrollbar-thumb{background-color: #000; border-radius: 10px; background-clip: padding-box; border: 8px solid #fff}
.terms_modal .modal_terms_area::-webkit-scrollbar-track{background-color: #fff}
.terms_modal .modal_terms_area > *:first-child{margin-top: 0}
.terms_modal .modal_terms_area h5,
.terms_modal .modal_terms_area .terms_tit{margin-top: 3.6em; margin-bottom: 1em; font-size: calc(var(--h6-tit)*0.9); font-weight: 500; text-align: left}
.terms_modal .modal_terms_area h6{margin: 1.5em 0 0.333em 0; font-size: calc(var(--sub-txt)*0.9); font-weight: 500}
.terms_modal .modal_terms_area p{font-size: var(--remark)}
.terms_modal .modal_terms_area p + p{margin-top: 1.2em}
.terms_modal .modal_terms_area p + .jp:not(.terms_tit),
.terms_modal .modal_terms_area .jp + p:not(.terms_tit),
.terms_modal .modal_terms_area .jp + .jp:not(.terms_tit){margin-top: 1.2em}
.terms_modal .modal_terms_area dl{font-size: var(--remark)}
.terms_modal .modal_terms_area dl dt{width: 100%; margin-top: 0.5em}
.terms_modal .modal_terms_area dl dd{width: 100%; margin-left: 1.5em}
.terms_modal .modal_terms_area a{border-bottom: 1px solid}
.terms_modal .modal_terms_area .reference ul{counter-reset: refer 0; font-size: var(--remark)}
.terms_modal .modal_terms_area .reference ul li{position: relative; padding-left: 1.5em; margin-top: 0.5em}
.terms_modal .modal_terms_area .reference ul li::before{counter-increment: refer; content: counter(refer)'. '; position: absolute; top: calc(1em - (1.5em/2)); left: 0; border: none; font-size: 1em; line-height: 1em}

/* 푸터 정책 독립 페이지 */
#container.terms_page{padding:114px 0 !important}
#container.terms_page.faq_page{padding-top:111px !important; padding-bottom:115px !important}
#container.terms_page .terms_page_title{margin:0 0 114px; text-align:center; font-size:20px !important; font-weight:500 !important}
#container.terms_page.faq_page .terms_page_title{margin-bottom:112px !important}
#container.terms_page .terms_page_title em.outfit{font-weight:450 !important}
#container.terms_page .terms_page_box{width:calc(100% - 130px); margin:0 auto; border:1px solid var(--gray); padding:65px 65px 65px 65px; box-sizing:border-box}
#container.terms_page .terms_page_box,
#container.terms_page .terms_page_box *{font-family:'outfit','Noto Sans KR',sans-serif !important; font-size:16px !important; font-weight:400 !important}
#container.terms_page .terms_page_box .en,
#container.terms_page .terms_page_box .outfit{font-family:'outfit' !important; font-style:normal !important}
#container.terms_page .terms_page_box em.outfit{font-weight:350 !important}
#container.terms_page,
#container.terms_page *{line-height:1 !important}
#container.terms_page .modal_cont{width:100%; max-width:none; margin:0; background:#fff; position:relative}
#container.terms_page .modal_cont .close{display:none !important}
#container.terms_page .modal_cont .cont,
#container.terms_page .modal_cont .cont *{font-family:'outfit','Noto Sans KR',sans-serif !important; font-size:16px !important; font-weight:400 !important}
#container.terms_page .modal_cont .cont .reference ul li::before{font-family:'outfit','Noto Sans KR',sans-serif !important; font-size:16px !important; font-weight:400 !important}
#container.terms_page .cont{overflow:visible; max-height:none; padding:0; box-sizing:border-box}
#container.terms_page .modal_terms_area{overflow:visible; max-height:none; width:100%; margin:0; padding:0; box-sizing:border-box; word-break:break-all}
#container.terms_page .modal_terms_area p + p{margin-top:27px}
#container.terms_page .modal_terms_area p:last-child{margin-top:68px}
#container.terms_page .modal_terms_area h5{margin-top:66px; margin-bottom:27px; text-align:left}
#container.terms_page .modal_terms_area .terms_tit{margin-top:66px; margin-bottom:27px; text-align:left}
#container.terms_page .modal_terms_area > h5:first-child,
#container.terms_page .modal_terms_area > .terms_tit:first-child{margin-top:0}
#container.terms_page .modal_terms_area h6{margin:1.5em 0 0.333em}
#container.terms_page .modal_terms_area p + .jp:not(.terms_tit),
#container.terms_page .modal_terms_area .jp + p:not(.terms_tit),
#container.terms_page .modal_terms_area .jp + .jp:not(.terms_tit){margin-top:27px}
#container.terms_page .modal_terms_area dl dt{width:100%; margin-top:0.5em}
#container.terms_page .modal_terms_area dl dd{width:100%; margin-left:1.5em}
#container.terms_page .modal_terms_area a{border-bottom:1px solid}
#container.terms_page .modal_terms_area .reference ul{counter-reset:refer 0}
#container.terms_page .modal_terms_area .reference ul li{position:relative; padding-left:1.5em; margin-top:0.5em}
#container.terms_page .modal_terms_area .reference ul li::before{counter-increment:refer; content:counter(refer)'. '; position:absolute; top:calc(1em - (1.5em/2)); left:0; border:none; line-height:1em}
#container.terms_page .terms_page_box > div > p{margin:0}
#container.terms_page .terms_page_box > div > p + p{margin-top:1em}
#container.terms_page .terms_page_box .vline{display:block; margin-top:0; text-align:justify; text-align-last:justify; text-justify:distribute; text-justify:inter-character}
#container.terms_page .terms_page_box p > .vline:last-child,
#container.terms_page .terms_page_box .jl > .vline:last-child{text-align-last:left}
#container.terms_page .terms_page_box .jl + .jl{margin-top:10px !important}
#container.terms_page .terms_page_box .vline + .vline{margin-top:10px !important}


.inner {max-width: 100%}

@media (min-width: 768px){
	#container.terms_page .terms_page_box{width:calc(100% - 24.4vw); border-color:#000}
	.terms_modal .modal_cont .close{display:flex !important; align-items:center; justify-content:center; box-sizing:border-box; padding:6.5px; background-color:transparent; color:#000; cursor:pointer; z-index:2;}
	.terms_modal .modal_cont .close .close_icon{display:block !important; width:24px; height:24px; pointer-events:none;}
	.terms_modal .modal_cont .close .fa-xmark{display:none !important;}

	#header nav .deps_1 > li:last-child > a{padding-left: 4rem}

	/* 헤더 스크롤 숨김/보임 클래스는 더 이상 사용하지 않음 (Sulwhasuo 스타일: absolute + 문서 flow) */

	#header.nav-open .header_top{background: #fff; border-color: #e5e5e5; color: #000}
	#header.nav-open nav{opacity: 1; background: #fff; pointer-events: all}
	#header .header_dim{background: rgba(0, 0, 0, 0.8); transition: none}
	#header .header_dim.on{opacity: 1; transition: none}

	#header .header_top .left ul li a:hover *{font-weight: 350}
	#header .header_top .user_menu ul li a:hover{font-weight: 350}

	#header nav .deps_1 > li > a:hover {font-weight: 400}
	/* 카테고리 클릭 시 3차 패널 본체는 즉시 표시하고, 내부 콘텐츠를 샤넬 타이밍으로 전환 */
	#header nav .deps_1 > li.on .deps_2 {opacity: 1; bottom: 0; pointer-events: all; transition: none}
	@keyframes header-submenu-content-show {from {opacity: 0} to {opacity: 1}}
	#header nav .deps_1 > li .deps_2 > ul,
	#header nav .deps_1 > li .deps_2 > .deps_2_visual,
	#header nav .deps_1 > li .deps_2 > .deps_2_reference_cards {opacity: 0; transition: none; animation: none}
	#header nav .deps_1 > li.on .deps_2 > ul,
	#header nav .deps_1 > li.on .deps_2 > .deps_2_visual,
	#header nav .deps_1 > li.on .deps_2 > .deps_2_reference_cards {opacity: 0; transition: none; animation: header-submenu-content-show 1s ease 0.2s 1 normal forwards}
	#header nav .deps_1 > li .deps_2 li > a:hover{font-weight: 400}
	#header nav .bg{transition: none}
	#header nav .bg.on{transition: height 0.2s ease-in-out;}

	/* PC 메가메뉴 닫기: 샤넬식 24px X를 서브메뉴 우측 상단에 배치 */
	#header nav .mega_close_btn{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: calc(100% + 21px);
		right: calc(var(--header-pc-gutter, 13.0vw) - 5px);
		z-index: 3;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #1d1d1d;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: none;
	}
	#header.nav-open nav .mega_close_btn{
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transition: none;
	}
	#header nav .mega_close_btn .mega_close_icon{
		display: block;
		width: 24px;
		height: 24px;
	}
	/* 이미지형 3차 메뉴: 2차 영역 하단과 중앙 이미지 상단 사이의 세로 중앙 */
	#header:has(nav .deps_1 > li.menu-2.on, nav .deps_1 > li.menu-4.on, nav .deps_1 > li.menu-5.on, nav .deps_1 > li.menu-8.on) nav .mega_close_btn{
		top: calc(100% + 1px + ((max(calc(100svh - var(--header-menu-start, var(--header-height, 142px))), var(--header-menu-panel-min-height, 0px)) - var(--header-menu-visual-height, var(--header-menu-visual-height-fallback, calc(37vw - 1rem)))) / 4) - 12px + var(--header-menu-x-optical-offset, 0px));
	}

	/* 샤넬식 PC 메가메뉴 전환: 패널은 즉시 교체하고 새 콘텐츠는 약 0.3초 숨긴다. */
	#header.mega-menu-immediate nav .deps_1 > li .deps_2,
	#header.mega-menu-immediate nav .bg{
		display: none !important;
		transition: none !important;
	}
	#header.mega-menu-immediate .header_dim{
		opacity: 0 !important;
		transition: none !important;
		pointer-events: none !important;
	}
	#header.mega-menu-immediate nav .mega_close_btn{
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: none !important;
	}
	#header.mega-menu-x-hidden nav .mega_close_btn{
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: none !important;
	}
	#header.mega-menu-switching nav .deps_1 > li .deps_2{
		transition: none !important;
	}
	#header.mega-menu-switching nav .deps_1 > li:not(.on) .deps_2{
		opacity: 0;
		pointer-events: none;
	}
	#header.mega-menu-switching nav .deps_1 > li.on .deps_2{
		opacity: 1;
		pointer-events: all;
	}
	/* 카테고리 전환 중 회색 경계선이 opacity transition으로 다시 그려지지 않게 유지 */
	#header.mega-menu-switching nav::after,
	#header.mega-menu-height-growing nav::after{
		opacity: 1 !important;
		transition: none !important;
	}
	#header.mega-menu-height-growing nav .deps_1 > li.on .deps_2{
		min-height: 0 !important;
		transition: height 0.2s ease-in-out !important;
	}
	#header.mega-menu-switching nav .deps_1 > li.on .deps_2 > ul,
	#header.mega-menu-switching nav .deps_1 > li.on .deps_2 > .deps_2_visual,
	#header.mega-menu-switching nav .deps_1 > li.on .deps_2 > .deps_2_reference_cards{
		opacity: 0;
		animation: none;
	}

	#header.transparent:hover .header_top .logo a{background-image: url(/inc/img/logo_clair_header_b.svg?v=2026100101);}
	#header.transparent:hover .header_top{background: #fff; border-color: #e5e5e5; border-bottom-color: transparent; color: #000}
	/* 호버 또는 서브메뉴 열림(nav-open) 상태: nav를 불투명(흰색 배경 + 회색선)으로 유지.
	   nav-open 상태에서 마우스가 헤더 밖으로 나가도 두번째 영역이 투명으로 변하지 않도록 한다. */
	#header.transparent:hover nav,
	#header.transparent.nav-open nav {opacity: 1; background: #fff; pointer-events: all}
	#header.transparent:hover nav::after,
	#header.transparent.nav-open nav::after {opacity: 1}
	/* transparent이지만 nav-open도 아니고 hover도 아닐 때만 nav 배경 투명 + 회색선 숨김. */
	#header.transparent:not(.nav-open):not(:hover) nav{background: transparent; border-color: transparent}
	#header.transparent:not(.nav-open):not(:hover) nav::after{opacity: 0}
	/* deps_1 텍스트: 평소·호버·nav-open 모두 같은 굵기로 유지 */
	#header.transparent nav .deps_1 > li > a{color: #fff; font-weight: 400}
	#header.transparent:hover nav .deps_1 > li > a,
	#header.transparent.nav-open nav .deps_1 > li > a {color: #000; font-weight: 400}

	/* 이미지로 시작하는 상세페이지: 샤넬처럼 1·2단 영역의 흰 배경을 한 번에 표시 */
	#header[data-header-variant="image-first"].transparent{
		background-color: transparent;
		transition: background-color 0.2s;
	}
	#header[data-header-variant="image-first"].transparent .header_top{
		transition: color 0.2s, border-color 0.2s;
	}
	#header[data-header-variant="image-first"].transparent:hover,
	#header[data-header-variant="image-first"].transparent.nav-open{
		background-color: #fff;
	}
	#header[data-header-variant="image-first"].transparent:hover .header_top,
	#header[data-header-variant="image-first"].transparent:hover nav{
		background: transparent;
	}
	#header[data-header-variant="image-first"].transparent.nav-open .header_top,
	#header[data-header-variant="image-first"].transparent.nav-open nav{
		background: #fff;
	}
	#header[data-header-variant="image-first"].transparent nav{
		transition: opacity 0.2s;
	}
	#header[data-header-variant="image-first"].transparent:not(:hover):not(.nav-open) nav{
		opacity: 0;
		pointer-events: none;
	}

	/* C-1/C-2 헤더: 닫힌 상태의 호버 가능 영역을 첫 번째 영역(header_top)으로 제한 */
	#header.c1-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)) nav,
	#header.c2-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)) nav{
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		opacity: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#header.c1-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)),
	#header.c2-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)),
	#header.c1-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)) .header_top,
	#header.c2-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)) .header_top,
	#header.c1-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)) nav,
	#header.c2-header.transparent:not(.nav-open):not(.open):not(:has(.header_top:hover, nav:hover)) nav{
		transition: none !important;
	}

	phoneNumber {pointer-events: none}

}

@media (max-width: 1024px){
	#header nav .mega_close_btn{display: none !important}
}

/* 이미지로 시작하는 상세페이지의 첫 메인 이미지는 헤더를 차감하지 않고 화면 전체를 채운다. */
#header[data-header-variant="image-first"] ~ #container > .sub_visual,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .ba69-hero,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .bs70-hero,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .pmt71-hero{
	height: 100vh !important;
	height: 100svh !important;
	height: 100dvh !important;
	min-height: 0 !important;
	padding-top: 0 !important;
}

/* 이미지로 시작하는 상세페이지의 첫 화면 제목과 부제는 그림자 없이 표시한다. */
#header[data-header-variant="image-first"] ~ #container > .sub_visual .txt,
#header[data-header-variant="image-first"] ~ #container > .sub_visual .txt *,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .ba69-hero .ba69-hero__content,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .ba69-hero .ba69-hero__content *,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .bs70-hero .bs70-hero__content,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .bs70-hero .bs70-hero__content *,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .pmt71-hero .pmt71-hero__content,
#header[data-header-variant="image-first"] ~ #container > #sub_cont > .pmt71-hero .pmt71-hero__content *{
	text-shadow: none !important;
}

/* PC 헤더 높이에 맞춰 스크롤 숨김 위치도 함께 보정 - 제거됨 (Sulwhasuo 스타일: absolute + flow) */

/* PC 헤더 1·2·3차 영역 폰트 크기 통일 */
@media (min-width:1025px){
	#header .header_top .left ul,
	#header .header_top .user_menu ul{font-size:16px}

	#header nav .deps_1 > li > a,
	#header nav .deps_1 > li .deps_2,
	#header nav .deps_1 > li .deps_2 li > a{font-size:16px}

	/* 1페이지 헤더: 상단 유틸리티·네비게이션 카테고리 모두 body 기본 스택(outfit → Noto Sans KR)을 상속한다.
	   카테고리 폰트를 Noto Sans KR로 강제하면 공백 글리프 폭이 달라져 다른 헤더와 4px 어긋난다. */
	#header.main-header .header_top .left ul,
	#header.main-header .header_top .left ul li a,
	#header.main-header .header_top .left ul li a *,
	#header.main-header .header_top .user_menu ul,
	#header.main-header .header_top .user_menu ul li a,
	#header.main-header .header_top .user_menu ul li a *{
		font-family:'outfit';
		font-size:16px;
		font-weight:250 !important;
	}
	#header.main-header nav .deps_1 > li > a{
		font-size:16px;
		font-weight:300 !important;
	}
	#header.main-header nav .deps_1 > li > a *{
		font-weight:300 !important;
	}

	/* 1페이지 헤더 hover/nav-open: 상단 유틸리티는 기존 Outfit, 카테고리는 기본 스택 400 */
	#header.main-header:hover .header_top .left ul,
	#header.main-header:hover .header_top .left ul li a,
	#header.main-header:hover .header_top .left ul li a *,
	#header.main-header:hover .header_top .user_menu ul,
	#header.main-header:hover .header_top .user_menu ul li a,
	#header.main-header:hover .header_top .user_menu ul li a *,
	#header.main-header.nav-open .header_top .left ul,
	#header.main-header.nav-open .header_top .left ul li a,
	#header.main-header.nav-open .header_top .left ul li a *,
	#header.main-header.nav-open .header_top .user_menu ul,
	#header.main-header.nav-open .header_top .user_menu ul li a,
	#header.main-header.nav-open .header_top .user_menu ul li a *{
		font-family:'outfit';
		font-weight:350 !important;
	}
	#header.main-header:hover nav .deps_1 > li > a,
	#header.main-header:hover nav .deps_1 > li > a *,
	#header.main-header.nav-open nav .deps_1 > li > a,
	#header.main-header.nav-open nav .deps_1 > li > a *{
		font-weight:400 !important;
	}

	/* 흰색 첫 번째 영역 헤더 전체: 기본 흰색 250, hover/nav-open 검은색 350 (B와 분리) */
	/* 대상 = image-first 헤더 중 c2·white-variant 제외 + c2-dark-header body 제외 (19·73 포함 형제 전체) */
	body:not(.c2-dark-header) #header.main-header[data-header-variant="image-first"]:not(.c2-header):not(.header-white-variant):not(:hover):not(.nav-open) .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	){
		font-weight:250 !important;
	}
	body:not(.c2-dark-header) #header.main-header[data-header-variant="image-first"]:not(.c2-header):not(.header-white-variant):hover .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	),
	body:not(.c2-dark-header) #header.main-header[data-header-variant="image-first"]:not(.c2-header):not(.header-white-variant).nav-open .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	){
		font-weight:350 !important;
	}

	/* 검은색 첫 번째 영역 헤더 전체: 검은색 텍스트 350 (A 흰색 250과 분리) */
	/* 대상 = c2 계열(body.c2-dark-header: 26·31~37·66·59_view) + 화이트 계열(#header.header-white-variant: 38·74·75·76~81) */
	body.c2-dark-header #header.main-header:not(:hover):not(.nav-open) .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	),
	#header.main-header.header-white-variant:not(:hover):not(.nav-open) .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	),
	body.c2-dark-header #header.main-header:hover .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	),
	#header.main-header.header-white-variant:hover .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	),
	body.c2-dark-header #header.main-header.nav-open .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	),
	#header.main-header.header-white-variant.nav-open .header_top :is(
		.left ul,
		.left ul li a,
		.left ul li a *,
		.user_menu ul,
		.user_menu ul li a,
		.user_menu ul li a *
	){
		font-weight:350 !important;
	}
}

/* PC 2차 메뉴: 실제 텍스트 너비를 따라 이동하는 공통 활성 바 */
@media (min-width:1025px){
	/* 기존 1px 보더 공간은 유지하고, 회색선만 활성 바 아래 레이어로 분리한다. */
	#header nav{border-bottom-color: transparent !important}
	/* 3차 메뉴 배경의 상단 보더가 활성 바와 겹치는 두 번째 회색선이 되지 않게 한다. */
	#header nav .bg{border-top:0 !important}
	#header nav::after{
		content:'';
		position:absolute;
		left:0;
		right:0;
		bottom:calc(-1px + var(--header-line-boundary-offset, 0px));
		height:1px;
		z-index:1;
		background:#ececec;
		pointer-events:none;
		/* nav 자체의 transition 패턴과 동일하게 호버 시 페이드 인/아웃 */
		transition: opacity 0.3s;
	}

	#header nav .header-line{
		position:absolute;
		left:0;
		/* 검은 바와 회색선이 같은 픽셀을 공유하지 않고 바로 맞닿도록 한다. */
		bottom:var(--header-line-boundary-offset, 0px);
		z-index:2;
		width:100%;
		height:var(--header-line-box-height);
		background:#000;
		opacity:0;
		pointer-events:none;
		transform:none;
		transition:opacity 0.12s linear, left 0.3s ease, width 0.3s ease;
	}

	#header nav .header-line.is-visible{opacity:1}
}

/* PC/태블릿 CLAIR SEOUL 로고 */
@media (min-width: 768px) {
	#header .header_top .logo a{
		background-position:center;
	}
}

/* ========================================
   태블릿 헤더 (768~1024px): 설화수 스타일
   왼쪽 메뉴 버튼, 중앙 로고, 오른쪽 유틸리티
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {

	/* 헤더 탑: 햄버거 보임, 좌측메뉴/유저메뉴 숨김 */
	#header .header_top .mo_cont{display: block}
	#header .header_top .left{display: none}
	#header .header_top .user_menu{display: none}
	#header .header_top .ham_btn{color: #000}
	#header .header_top .ham_btn i{font-size: 21px}
	#header .header_top{padding: 0 20px}
	#header .header_top .logo{position: absolute; left: 50%; transform: translateX(-50%)}

	/* PC GNB 숨김 - nav를 모바일과 동일한 슬라이드 패널로 */
	#header nav{position: fixed; width: 400px; max-width: calc(100% - 40px); height: 100%; background-color: #fff; opacity: 0; transform: translateX(100%); top: 0; right: 0; z-index: 50; overflow-y: auto; display: flex; flex-direction: column; padding: 30px 20px; transition: right .5s ease-in-out, opacity .5s}
	#header nav .bg{display: none}
	#header.open nav{right: 400px; opacity: 1; background: #fff; pointer-events: all}
	#header.open .header_top{border: none; pointer-events: none}

	/* nav_top (로그인/가입 + 닫기) 보임 */
	#header nav .nav_top{display: flex; align-items: center; font-family: 'outfit'; font-size: 13px}
	#header nav .nav_top a + a{margin-left: 15px}
	#header nav .nav_top .close_btn{margin-left: auto; color: #000; font-size: 22px}

	/* nav_bot 보임 */
	#header nav .nav_bot{display: flex; align-items: baseline; margin-top: auto; padding-top: 40px; font-family: 'outfit'; font-size: 13px}
	#header nav .nav_bot a + a{margin-left: 15px}

	/* deps_1 세로 배치 */
	#header nav .deps_1{height: auto; margin-top: 30px; flex-direction: column; align-items: flex-start; border: none}
	#header nav .deps_1 > li{width: 100%; padding: 12px 0; position: relative}
	#header nav .deps_1 > li > a{font-size: 15px; padding: 0; display: flex; pointer-events: none; height: auto; cursor: pointer}
	#header nav .deps_1 > li > a::before{display: none}
	#header nav .deps_1 > li > a::after{content: ""; display: block; flex: none; width: 1em; height: 1em; margin-left: auto; background-color: currentColor; -webkit-mask: url('/assets/icons/chevron-right.svg') center / contain no-repeat; mask: url('/assets/icons/chevron-right.svg') center / contain no-repeat; transition: transform .3s; transform: rotate(90deg)}
	#header nav .deps_1 > li.on{border-bottom: 1px solid var(--gray)}
	#header nav .deps_1 > li.on > a{font-weight: 700}
	#header nav .deps_1 > li.on > a::after{transform: rotate(270deg)}

	/* deps_2: 기본적으로 숨김, 터치로 열기 */
	#header nav .deps_1 > li .deps_2{position: static; transform: none; opacity: 1; display: none; pointer-events: visible; width: 100%; min-height: auto; padding: 0; margin-top: 15px; overflow: visible}

	/* 헤더 스크롤 동작 */
	/* 헤더 스크롤 숨김/보임 클래스는 더 이상 사용하지 않음 (Sulwhasuo 스타일: absolute + 문서 flow) */

	/* hover 비활성화 - 태블릿에서는 터치만 사용 */
	#header nav .deps_1 > li > a:hover{font-weight: inherit}
	#header .header_top .left ul li a:hover *{font-weight: 350}
	#header .header_top .user_menu ul li a:hover{font-weight: 350}

	/* dim 영역 */
	#header .header_dim{z-index: 32}

	/* pc_only/mo_only 유지 */
	.pc_only{display: block !important}
	.mo_only{display: none !important}
}

@media (max-width: 767px){

	:root {
		--h4-tit: 26px;
		--h5-tit: 20px;
		--h6-tit: 17px;
		--sub-txt: 15px;
		--remark: 13px;
	}

	/*.wow{visibility: visible !important;}*/

	phoneNumber {pointer-events: visible}

	#header .header_dim{z-index: 32}
	#header .header_top{padding: 0 20px; border-bottom: 0}
	#header .header_top:after {display: none; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(100%); background-color: rgba(0,0,0,0.5); transition: opacity 0.3s 0.15s; opacity: 0; pointer-events: none}
	#header.bd_none .header_top{border-bottom: none}
	#header .header_top .logo{width:92px;height:38.7px;margin-top:0;}
	#header .header_top .logo a{background-position:center;background-size:contain;}
	#header:not(.type3) .header_top .logo {position: static; transform: none}
	#header:not(.type3) .header_top .left {display: none}
	#header .header_top .mo_cont{display: block}
	#header .header_top .user_menu {display: none}
	#header .header_top .ham_btn{color: #000;}
	#header .header_top .ham_btn i {font-size: 21px}
	#header .header_top .history_back{font-size: 13px}

	#header.transparent .header_top .ham_btn{color: #000}

	#header nav {position: fixed; width: 600px; height: 100%; background-color: #fff; opacity: 0; transform: translateX(100%);top: 0; right: 0; z-index: 50; overflow-y: auto; display: flex; flex-direction: column; padding: 30px 20px; transition: right .5s ease-in-out, opacity 0.5s}
	/*#header.type2 nav{display: block}*/
	#header nav .bg {display: none}

	#header.open nav {right: 600px; opacity: 1; background: #fff; pointer-events: all}
	#header.open .header_top:after {opacity: 1; pointer-events: all}
	#header.open .header_top {border: none; pointer-events: none; }

	#header nav .nav_top {display: flex; align-items: center; font-family: 'outfit'; font-size: 13px}
	#header nav .nav_top a{}
	#header nav .nav_top a + a {margin-left: 15px}
	#header nav .nav_top .close_btn {margin-left: auto; color: #000; font-size: 22px}
	#header nav .nav_bot {display: flex; align-items: baseline; margin-top: auto; padding-top: 40px; font-family: 'outfit'; font-size: 13px}
	#header nav .nav_bot img {width: 45px;margin-right: 2px}
	#header nav .nav_bot a + a {margin-left: 15px}

	#header nav .deps_1 {height: auto; margin-top: 30px; flex-direction: column; align-items: flex-start; border: none}
	#header nav .deps_1 > li { width: 100%; padding: 12px 0; position: relative;}
	.open4 {position: absolute; bottom: auto; top:-3px; width: 100px; height:12px; margin-left: 1px; color: #5310C8; font-family: 'notokr'; font-size:12px; font-style: normal;font-weight:600;}
	.open4 em{font-size:12px}
	.open6 {position: absolute; bottom: auto; top:-3px; width: 100px; height:12px; margin-left: 1px; color: #5310C8; font-family: 'notokr'; font-size:12px; font-style: normal;font-weight:600;}
	.open6 em{font-size:12px}
	#header nav .deps_1 > li > a {font-size:var(--sub-txt);padding: 0; display: flex; pointer-events: none; height: auto; cursor: pointer}
	#header nav .deps_1 > li > a::before {display: none}
	#header nav .deps_1 > li > a::after {content: ""; display: block; flex: none; width: 1em; height: 1em; margin-left: auto; background-color: currentColor; -webkit-mask: url('/assets/icons/chevron-right.svg') center / contain no-repeat; mask: url('/assets/icons/chevron-right.svg') center / contain no-repeat; transition: transform .3s; transform: rotate(90deg)}
	#header nav .deps_1 > li.on{border-bottom: 1px solid var(--gray)}
	#header nav .deps_1 > li.on > a {font-weight: 700}
	#header nav .deps_1 > li.on > a::after {transform: rotate(270deg)}

	#header nav .deps_1 > li .deps_2 {position: static; transform: none; opacity: 1; display: none; pointer-events: visible; width: 100%; min-height: auto; padding: 0; margin-top: 15px; overflow: visible}
	#header nav .deps_1 > li .deps_2 li > a {font-size:var(--sub-txt);}



	

	/* 헤더 스크롤 숨김/보임 클래스는 더 이상 사용하지 않음 (Sulwhasuo 스타일: absolute + 문서 flow) */
	
	
	


}





/* 반응형 메뉴의 고정 헤더 셸에는 네이티브 스크롤바를 만들지 않는다.
   높이가 부족할 때는 메뉴 목록만 내부에서 움직이며 스크롤바는 노출하지 않는다. */
@media (max-width: 1024px) {
	#header nav {
		overflow-y: hidden;
	}

	#header nav .nav_top,
	#header nav .nav_bot {
		flex: none;
	}

	#header nav .deps_1 {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	#header nav .deps_1::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

@media (max-width: 767px){

	:root {
		--h3-tit: 20px;
		--h4-tit: 22px;
		--h5-tit: 18px;
		--h6-tit: 15px;
		--sub-txt: 13px;
		--remark: 12px;
		--lh: 1.6em;
	}

	.pc_only {display:none !important;}
	.mo_only {display:block !important;}

	#header{}
	#header .header_top{padding: 0 15px}
	#header .header_top .history_back{font-size: 12px}
	#header nav {width: calc(100% - 20px)}
	#header.open nav {right: calc(100% - 20px); opacity: 1; background: #fff; pointer-events: all}
	
	
	.terms_modal .modal_cont .modal_top .tit{font-size:19px;}
	.terms_modal .cont {padding: 65px 65px 71px 65px}
	.terms_modal .modal_cont .modal_top .modal_close {right: 15px}

}

@media (min-width: 768px) and (max-width: 1024px) {
} 

/* max-width:500px styles merged into max-width:767px */
@media (max-width: 767px){

	:root {
		--h3-tit: 20px;
	}

}

/* =====================================================
 * 73_backup 전용 반전 헤더: 68 헤더의 블랙/화이트 반전 + 회색선 흰색
 * Base: detail-header (white bg / black text / black bar / gray line)
 * Inverted: black bg / white text / white bar / white line
 * Target: #header.header-inverted (PHP)
 * ===================================================== */
#header.header-inverted.detail-header .header_top,
#header.header-inverted .header_top{
	background:#000 !important;
	color:#fff !important;
	border-bottom-color:transparent !important;
}
#header.header-inverted.detail-header nav,
#header.header-inverted nav{
	background:#000 !important;
	border-bottom-color:transparent !important;
}
/* 회색 가로선 -> 흰색 -> 2·3차 영역 가로선은 흰색 고정, 1-2차 사이 가로선은 애니메이션 없음 -> 하단 맨 아래 선은 검은색 유지 */
#header.header-inverted nav::after{
	background:#000 !important;
	opacity:1 !important;
}
/* 73 반전 헤더 아래 여백(스페이서)은 기본·호버 모두 검은색. */
#header.header-inverted ~ .detail-header-spacer{
	background:#000 !important;
}
#header.header-inverted:hover ~ .detail-header-spacer{
	background:#fff !important;
}
/* 1-2차 영역 사이 가로선(헤더 상단 하단 보더) 애니메이션 제거 - 배경/패딩은 유지 */
#header.header-inverted .header_top{
	transition: background 0.3s, color 0.3s, padding 0.3s !important;
}
#header.header-inverted nav .bg{
	background:#000 !important;
	border-top:0 !important;
}
/* 검은색 바 -> 흰색 바 */
#header.header-inverted nav .header-line{
	background:#fff !important;
}
/* 로고 블랙->화이트 */
#header.header-inverted .header_top .logo a{
	background-image:url(/inc/img/logo_clair_header_w.svg?v=2026100101) !important;
}
#header.header-inverted.transparent:not(.nav-open) .header_top .logo a{
	background-image:url(/inc/img/logo_clair_header_w.svg?v=2026100101) !important;
}
/* 텍스트 블랙->화이트 */
#header.header-inverted .header_top .left ul li a,
#header.header-inverted .header_top .user_menu ul li a{
	color:#fff !important;
}
#header.header-inverted nav .deps_1 > li > a{
	color:#fff !important;
}
#header.header-inverted nav .deps_1 > li.active > a,
#header.header-inverted nav .deps_1 > li.on > a{
	color:#fff !important;
}
/* 메가메뉴 2차 영역 반전 - 2·3차 가로선 흰색 */
#header.header-inverted nav .deps_1 > li .deps_2{
	background:#000 !important;
	border-top:1px solid #fff !important;
	border-bottom:1px solid #fff !important;
}
#header.header-inverted nav .bg{
	background:#000 !important;
	border-top:0 !important;
	border-bottom:0 !important;
}
#header.header-inverted nav .deps_1 > li .deps_2 li > a{
	color:#fff !important;
}
#header.header-inverted nav .deps_1 > li .deps_2 li.active > a{
	color:#fff !important;
}
/* 레퍼런스/포뮬라 카드 텍스트 */
#header.header-inverted nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card{
	color:#fff !important;
}
#header.header-inverted nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_title{
	color:#fff !important;
}
#header.header-inverted nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_subtitle{
	color:rgba(255,255,255,0.7) !important;
}
/* X 버튼 반전 */
#header.header-inverted nav .mega_close_btn{
	color:#fff !important;
}
#header.header-inverted nav .mega_close_btn .mega_close_icon path{
	stroke:#fff !important;
}
/* PC에서 nav-open 상태도 블랙 유지 */
#header.header-inverted.nav-open .header_top{
	background:#000 !important;
	border-color:#fff !important;
	color:#fff !important;
}
#header.header-inverted.nav-open nav{
	background:#000 !important;
}
@media (min-width: 768px){
	#header.header-inverted.nav-open .header_top{
		background:#000 !important;
		border-color:#fff !important;
		color:#fff !important;
	}
}
/* 태블릿/모바일 햄버거, 슬라이드 패널 반전 */
#header.header-inverted .header_top .ham_btn{
	color:#fff !important;
}
#header.header-inverted nav .nav_top .close_btn{
	color:#fff !important;
}
#header.header-inverted .header_top .ham_btn i{
	color:#fff !important;
}
@media (max-width: 1024px){
	#header.header-inverted nav{
		background:#000 !important;
	}
	#header.header-inverted.open nav{
		background:#000 !important;
	}
	#header.header-inverted nav .deps_1 > li > a,
	#header.header-inverted nav .deps_1 > li .deps_2 li > a{
		color:#fff !important;
	}
	#header.header-inverted nav .deps_1 > li.on{
		border-bottom-color:#fff !important;
	}
	#header.header-inverted nav .deps_1 > li .deps_2{
		background:transparent !important;
	}
}
/* 73 hover 시 68 페이지 헤더와 동일 (화이트 배경·블랙 텍스트·회색 선·블랙 바) - 1차/2차 영역 흰선은 기본 검은색, hover 시 68과 동일 */
#header.header-inverted:hover .header_top,
#header.header-inverted.nav-open .header_top{
	background:#fff !important;
	color:#000 !important;
	border-bottom-color:transparent !important;
}
#header.header-inverted:hover nav,
#header.header-inverted.nav-open nav{
	background:#fff !important;
}
#header.header-inverted:hover:not(.nav-open) nav::after{
	background:#fff !important;
	opacity:1 !important;
}
#header.header-inverted.nav-open nav::after{
	background:#fff !important;
	opacity:1 !important;
}
#header.header-inverted:hover nav .header-line{
	background:#000 !important;
}
#header.header-inverted:hover .header_top .logo a{
	background-image:url(/inc/img/logo_clair_header_b.svg?v=2026100101) !important;
}
#header.header-inverted:hover .header_top .left ul li a,
#header.header-inverted:hover .header_top .user_menu ul li a{
	color:#000 !important;
}
#header.header-inverted:hover nav .deps_1 > li > a{
	color:#000 !important;
}
#header.header-inverted:hover:not(.nav-open) nav .deps_1 > li .deps_2{
	background:#fff !important;
	border-top:1px solid transparent !important;
	border-bottom:1px solid transparent !important;
}
#header.header-inverted:hover:not(.nav-open) nav .bg{
	background:#fff !important;
	border-top:1px solid transparent !important;
	border-bottom:1px solid transparent !important;
}
#header.header-inverted.nav-open nav .deps_1 > li .deps_2{
	background:#fff !important;
	border-top:1px solid transparent !important;
	border-bottom:1px solid transparent !important;
}
#header.header-inverted.nav-open nav .bg{
	background:#fff !important;
	border-top:1px solid transparent !important;
	border-bottom:1px solid transparent !important;
}
#header.header-inverted:hover nav .deps_1 > li .deps_2 li > a{
	color:#000 !important;
}
#header.header-inverted:hover nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card{
	color:#000 !important;
}
#header.header-inverted:hover nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_title{
	color:#000 !important;
}
#header.header-inverted:hover nav .deps_1 > li > .deps_2.reference-deps_2 .deps_2_reference_card_subtitle{
	color:rgb(136,136,136) !important;
}
#header.header-inverted:hover nav .mega_close_btn{
	color:#1d1d1d !important;
}
#header.header-inverted:hover nav .mega_close_btn .mega_close_icon path{
	stroke:#1D1D1D !important;
}
#header.header-inverted:hover .header_top .ham_btn,
#header.header-inverted:hover .header_top .ham_btn i{
	color:#000 !important;
}
/* transparent 변형도 동일한 hover 로직으로 통일 */
#header.header-inverted.transparent:hover .header_top{
	background:#fff !important;
	color:#000 !important;
	border-color:transparent !important;
}
#header.header-inverted.transparent:hover .header_top .logo a{
	background-image:url(/inc/img/logo_clair_header_b.svg?v=2026100101) !important;
}
#header.header-inverted.transparent:hover nav,
#header.header-inverted.transparent.nav-open nav{
	background:#fff !important;
}
#header.header-inverted.transparent:hover nav .deps_1 > li > a,
#header.header-inverted.transparent.nav-open nav .deps_1 > li > a{
	color:#000 !important;
}

/* PC에서만 hover/nav-open 시 검은 활성 바 아래를 검은색으로 바로 연결 */
@media (min-width:1025px){
	#header.header-inverted:hover ~ .detail-header-spacer{
		background:#000 !important;
	}
	#header.header-inverted:hover:not(.nav-open) nav::after{
		display:none !important;
	}
	#header.header-inverted.nav-open nav::after{
		background:#ececec !important;
	}
}

/* 76~81페이지 공통 상품 상세 표 */
.product-details__bar {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.product-details-block {
  margin: 0;
}

.product-details__table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.product-details__table tr {
  line-height: 1;
}

.product-details__table th,
.product-details__table td {
  border: 0;
  padding: 0;
  line-height: 1;
  font-family: 'outfit','Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  vertical-align: middle;
}

.product-details__table th {
  width: 1%;
  white-space: nowrap;
  padding-right: 21.5px;
}

.product-details__table tr:last-child td {
  position: relative;
  left: 1px;
}

.product-details__table tr.product-details__reference th,
.product-details__table tr.product-details__reference td {
  color: #888;
}

.product-details__table tr.product-details__meta th,
.product-details__table tr.product-details__meta td {
  color: rgb(29, 29, 29);
}

.product-details__table em.en,
.product-details__table em.en3 {
  line-height: 1;
}

/* Font Awesome Kit이 403으로 제거되어 아이콘은 모든 뷰포트에서 프로젝트 SVG 원본으로 렌더링한다.
   모바일도 같은 자산을 써야 하므로 PC/태블릿으로 한정하지 않는다. */
	/* Font Awesome Kit이 i를 svg로 변환하기 전후 모두 같은 SVG 자산을 사용한다. */
	i.fa-angle-left,
	svg.svg-inline--fa.fa-angle-left { --site-icon-mask: url('/assets/icons/angle-left.svg'); }
	i.fa-angle-right,
	svg.svg-inline--fa.fa-angle-right { --site-icon-mask: url('/assets/icons/angle-right.svg'); }
	i.fa-arrow-left,
	svg.svg-inline--fa.fa-arrow-left { --site-icon-mask: url('/assets/icons/arrow-left.svg'); }
	i.fa-arrow-right,
	svg.svg-inline--fa.fa-arrow-right { --site-icon-mask: url('/assets/icons/arrow-right.svg'); }
	i.fa-check,
	svg.svg-inline--fa.fa-check { --site-icon-mask: url('/assets/icons/check.svg'); }
	i.fa-chevron-left,
	svg.svg-inline--fa.fa-chevron-left { --site-icon-mask: url('/assets/icons/chevron-left.svg'); }
	i.fa-chevron-right,
	svg.svg-inline--fa.fa-chevron-right { --site-icon-mask: url('/assets/icons/chevron-right.svg'); }
	i.fa-chevrons-left,
	svg.svg-inline--fa.fa-chevrons-left { --site-icon-mask: url('/assets/icons/chevrons-left.svg'); }
	i.fa-chevrons-right,
	svg.svg-inline--fa.fa-chevrons-right { --site-icon-mask: url('/assets/icons/chevrons-right.svg'); }
	i.fa-circle-check,
	svg.svg-inline--fa.fa-circle-check { --site-icon-mask: url('/assets/icons/circle-check.svg'); }
	i.fa-circle-small,
	svg.svg-inline--fa.fa-circle-small { --site-icon-mask: url('/assets/icons/circle-small.svg'); }
	i.fa-comment-dots,
	svg.svg-inline--fa.fa-comment-dots { --site-icon-mask: url('/assets/icons/comment-dots.svg'); }
	i.fa-ellipsis,
	svg.svg-inline--fa.fa-ellipsis { --site-icon-mask: url('/assets/icons/ellipsis.svg'); }
	i.fa-envelope,
	svg.svg-inline--fa.fa-envelope { --site-icon-mask: url('/assets/icons/envelope.svg'); }
	i.fa-file-arrow-down,
	svg.svg-inline--fa.fa-file-arrow-down { --site-icon-mask: url('/assets/icons/file-arrow-down.svg'); }
	i.fa-handshake,
	svg.svg-inline--fa.fa-handshake { --site-icon-mask: url('/assets/icons/handshake.svg'); }
	i.fa-house,
	svg.svg-inline--fa.fa-house { --site-icon-mask: url('/assets/icons/house.svg'); }
	i.fa-pause,
	svg.svg-inline--fa.fa-pause { --site-icon-mask: url('/assets/icons/pause.svg'); }
	i.fa-phone,
	svg.svg-inline--fa.fa-phone { --site-icon-mask: url('/assets/icons/phone.svg'); }
	i.fa-plus,
	svg.svg-inline--fa.fa-plus { --site-icon-mask: url('/assets/icons/plus.svg'); }
	i.fa-volume-xmark,
	svg.svg-inline--fa.fa-volume-xmark { --site-icon-mask: url('/assets/icons/volume-xmark.svg'); }
	i.fa-xmark,
	svg.svg-inline--fa.fa-xmark { --site-icon-mask: url('/assets/icons/xmark.svg'); }

	i.fa-angle-left,
	i.fa-angle-right,
	i.fa-arrow-left,
	i.fa-arrow-right,
	i.fa-check,
	i.fa-chevron-left,
	i.fa-chevron-right,
	i.fa-chevrons-left,
	i.fa-chevrons-right,
	i.fa-circle-check,
	i.fa-circle-small,
	i.fa-comment-dots,
	i.fa-ellipsis,
	i.fa-envelope,
	i.fa-file-arrow-down,
	i.fa-handshake,
	i.fa-house,
	i.fa-pause,
	i.fa-phone,
	i.fa-plus,
	i.fa-volume-xmark,
	i.fa-xmark,
	svg.svg-inline--fa.fa-angle-left,
	svg.svg-inline--fa.fa-angle-right,
	svg.svg-inline--fa.fa-arrow-left,
	svg.svg-inline--fa.fa-arrow-right,
	svg.svg-inline--fa.fa-check,
	svg.svg-inline--fa.fa-chevron-left,
	svg.svg-inline--fa.fa-chevron-right,
	svg.svg-inline--fa.fa-chevrons-left,
	svg.svg-inline--fa.fa-chevrons-right,
	svg.svg-inline--fa.fa-circle-check,
	svg.svg-inline--fa.fa-circle-small,
	svg.svg-inline--fa.fa-comment-dots,
	svg.svg-inline--fa.fa-ellipsis,
	svg.svg-inline--fa.fa-envelope,
	svg.svg-inline--fa.fa-file-arrow-down,
	svg.svg-inline--fa.fa-handshake,
	svg.svg-inline--fa.fa-house,
	svg.svg-inline--fa.fa-pause,
	svg.svg-inline--fa.fa-phone,
	svg.svg-inline--fa.fa-plus,
	svg.svg-inline--fa.fa-volume-xmark,
	svg.svg-inline--fa.fa-xmark {
	background-color: currentColor !important;
	-webkit-mask: var(--site-icon-mask) center / contain no-repeat !important;
	mask: var(--site-icon-mask) center / contain no-repeat !important;
}

	i.fa-angle-left,
	i.fa-angle-right,
	i.fa-arrow-left,
	i.fa-arrow-right,
	i.fa-check,
	i.fa-chevron-left,
	i.fa-chevron-right,
	i.fa-chevrons-left,
	i.fa-chevrons-right,
	i.fa-circle-check,
	i.fa-circle-small,
	i.fa-comment-dots,
	i.fa-ellipsis,
	i.fa-envelope,
	i.fa-file-arrow-down,
	i.fa-handshake,
	i.fa-house,
	i.fa-pause,
	i.fa-phone,
	i.fa-plus,
	i.fa-volume-xmark,
	i.fa-xmark {
	display: inline-block !important;
	font-family: initial !important;
	font-style: normal !important;
	font-weight: normal !important;
	line-height: 1 !important;
}

	i.fa-angle-left::before,
	i.fa-angle-right::before,
	i.fa-arrow-left::before,
	i.fa-arrow-right::before,
	i.fa-check::before,
	i.fa-chevron-left::before,
	i.fa-chevron-right::before,
	i.fa-chevrons-left::before,
	i.fa-chevrons-right::before,
	i.fa-circle-check::before,
	i.fa-circle-small::before,
	i.fa-comment-dots::before,
	i.fa-ellipsis::before,
	i.fa-envelope::before,
	i.fa-file-arrow-down::before,
	i.fa-handshake::before,
	i.fa-house::before,
	i.fa-pause::before,
	i.fa-phone::before,
	i.fa-plus::before,
	i.fa-volume-xmark::before,
	i.fa-xmark::before,
	svg.svg-inline--fa.fa-angle-left path,
	svg.svg-inline--fa.fa-angle-right path,
	svg.svg-inline--fa.fa-arrow-left path,
	svg.svg-inline--fa.fa-arrow-right path,
	svg.svg-inline--fa.fa-check path,
	svg.svg-inline--fa.fa-chevron-left path,
	svg.svg-inline--fa.fa-chevron-right path,
	svg.svg-inline--fa.fa-chevrons-left path,
	svg.svg-inline--fa.fa-chevrons-right path,
	svg.svg-inline--fa.fa-circle-check path,
	svg.svg-inline--fa.fa-circle-small path,
	svg.svg-inline--fa.fa-comment-dots path,
	svg.svg-inline--fa.fa-ellipsis path,
	svg.svg-inline--fa.fa-envelope path,
	svg.svg-inline--fa.fa-file-arrow-down path,
	svg.svg-inline--fa.fa-handshake path,
	svg.svg-inline--fa.fa-house path,
	svg.svg-inline--fa.fa-pause path,
	svg.svg-inline--fa.fa-phone path,
	svg.svg-inline--fa.fa-plus path,
	svg.svg-inline--fa.fa-volume-xmark path,
	svg.svg-inline--fa.fa-xmark path {
	content: none !important;
	display: none !important;
}

	/* Font Awesome 아이콘의 고유 가로 비율을 i fallback에도 유지한다. */
	i.fa-angle-left,
	i.fa-angle-right { width: .5em; height: 1em; }
	i.fa-check,
	i.fa-ellipsis,
	i.fa-plus { width: .875em; height: 1em; }
	i.fa-chevron-left,
	i.fa-chevron-right,
	i.fa-circle-small { width: .625em; height: 1em; }
	i.fa-chevrons-left,
	i.fa-chevrons-right { width: .875em; height: 1em; }
	i.fa-file-arrow-down,
	i.fa-xmark { width: .75em; height: 1em; }
	i.fa-handshake,
	i.fa-volume-xmark { width: 1.125em; height: 1em; }
	i.fa-arrow-left,
	i.fa-arrow-right,
	i.fa-circle-check,
	i.fa-comment-dots,
	i.fa-envelope,
	i.fa-house,
	i.fa-pause,
	i.fa-phone { width: 1em; height: 1em; }
/* 76 기준 76~81페이지 공통 상품 상세 레이아웃 */
body.page-76 #container,
body.page-77 #container,
body.page-78 #container,
body.page-79 #container,
body.page-80 #container,
body.page-81 #container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.pdp-wrapper {
  width: 100%;
  padding-top: 0;
  background-color: #fff;
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: 'Noto Sans KR', sans-serif;
}

.pdp-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* 왼쪽 이미지 갤러리 (Dior PDP 스타일 스크롤) */
.pdp-media {
  width: 50%;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.pdp-media__item {
  width: 100%;
  margin-bottom: 0;
  line-height: 0;
  font-size: 0;
}

.pdp-media__item:last-child {
  margin-bottom: 0 !important;
}

.pdp-media__item img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  object-fit: cover;
  aspect-ratio: 460 / 498;
}

/* 오른쪽 고정 패널 */
.pdp-sticky-col {
  width: 50%;
  flex: 0 0 50%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* Chanel product-details__content 및 자식 클래스 구조 */
.product-details__content {
  position: -webkit-sticky;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  align-self: flex-start;
  box-sizing: border-box;
  width: 370px;
  padding: 0;
  font-family: 'Noto Sans KR', sans-serif;
  color: rgb(51, 51, 51);
}

.product-details__outer {
  display: flex;
  width: 100%;
  margin: auto;
}

.product-details__inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
}

.product-details__text {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 1. 헤딩 & 부제목 */
.product-details__head {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.heading.product-details__title {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgb(29, 29, 29);
  padding-bottom: 18px;
  border-bottom: 3px solid #000;
  word-break: keep-all;
}

.heading.product-details__title em.outfit {
  font-weight: 450;
}

.product-details__description {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: rgb(29, 29, 29);
  margin: 17px 0 11px 0;
}

/* 2. 자세히 보기 */
.product-details-more-wrapper {
  margin: 0;
}

.product-details__more a.link.tertiary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.5px;
  color: rgb(29, 29, 29);
  margin: 0;
  padding: 0;
}

/* 2-1. 레퍼런스 바 표 */
.product-details__table tr {
  height: auto !important;
  line-height: 1 !important;
}

.product-details__table th,
.product-details__table td {
  height: auto !important;
  line-height: 1 !important;
  padding: 0 !important;
  vertical-align: top;
}

.product-details__table th {
  padding-right: 21.5px !important;
}

.product-details__table tr + tr th,
.product-details__table tr + tr td {
  padding-top: 10px !important;
}

/* 3. 레퍼런스 바, 가격 & 위시리스트 */
.product-details__price-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.product-details__price {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgb(29, 29, 29);
  margin: 0;
}

.product-details__flags.has-wishlist {
  margin: 0;
}

.button.is-icon.is-look.is-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  color: rgb(29, 29, 29);
  transition: transform 0.2s ease;
}

.button.is-icon.is-look.is-wishlist:hover {
  transform: scale(1.1);
}

.button.is-icon.is-look.is-wishlist svg {
  width: 20px;
  height: 20px;
}

/* 3. 백오더 구분선 */
.product-details__backorder {
  width: 100%;
  margin-top: 18px;
  border-top: 1px solid #ececec;
}

/* 4. 옵션 (사이즈/안내) */
.product-details__option {
  margin: 17px 0 19px 0;
}

.product-details__option p {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgb(51, 51, 51);
  margin: 0;
  word-break: break-all;
}

.product-details__option p > span {
  display: block;
}

body.page-76 .product-details__option p > span:not(:last-child),
body.page-77 .product-details__option p > span:not(:last-child),
body.page-78 .product-details__option p > span:not(:last-child),
body.page-79 .product-details__option p > span:not(:last-child),
body.page-80 .product-details__option p > span:not(:last-child),
body.page-81 .product-details__option p > span:not(:last-child) {
  text-align: justify;
}

body.page-76 .product-details__option p > span:last-child,
body.page-77 .product-details__option p > span:last-child,
body.page-78 .product-details__option p > span:last-child,
body.page-79 .product-details__option p > span:last-child,
body.page-80 .product-details__option p > span:last-child,
body.page-81 .product-details__option p > span:last-child {
  text-align: left;
}

body.page-81 .product-details__option p > span:nth-child(2) {
  letter-spacing: 0.19px;
}

body.page-78 .product-details__option p > span:nth-child(2) {
  letter-spacing: -0.15px;
}

body.page-80 .product-details__option p > span:first-child {
  letter-spacing: 0.18px;
}

/* 5. CTA 버튼 */
.product-details__ctas {
  width: 100%;
}

.product-ctas-wrapper {
  width: 100%;
}

.form-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-buttons__item {
  margin: 0;
  padding: 0;
}

.form-buttons__item p {
  margin: 0;
}

.button.cta_filled.is-primary.is-fullwidth {
  width: 100%;
  height: 48px;
  min-height: 3rem;
  background-color: rgb(0, 0, 0);
  color: rgb(249, 249, 249);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 21px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s linear, border-color 0.2s linear;
}

.button.cta_filled.is-primary.is-fullwidth:hover {
  background-color: #222;
  border-color: #222;
}

.button.cta_filled.is-primary.is-fullwidth .button__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: rgb(249, 249, 249);
  pointer-events: none;
}

/* 6. 하단 앵커 (리뷰 등) */
.context {
  margin-top: 14px;
}

.product-details__anchors {
  list-style: none;
  margin: 9px 0;
  padding: 0;
}

.product-details__anchor a.link.tertiary.js-rr-anchor {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.5px;
  color: rgb(51, 51, 51);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.is-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 모바일·태블릿 공통 햄버거 버튼: 아이콘 폰트에 의존하지 않고 세 줄로 표시 */
@media (max-width: 1024px) {
	#header .header_top .ham_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	#header .header_top .ham_btn i {
		position: relative;
		display: block;
		width: 22px;
		height: 2px;
		margin: 0;
		background: currentColor;
		font-size: 0 !important;
		line-height: 0;
	}

	#header .header_top .ham_btn i::before,
	#header .header_top .ham_btn i::after {
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 2px;
		background: currentColor;
		content: "" !important;
	}

	#header .header_top .ham_btn i::before { top: -6px; }
	#header .header_top .ham_btn i::after { bottom: -6px; }
}