@charset "UTF-8";

/* ==================================================== */
/* 아이백의원 - 아이백클리어(시그니처시술) 상세 페이지 전용   */
/* hero / stats / diff / process / info / recovery / dark  */
/* cta / cta-notice 는 main.css 재사용                     */
/* ==================================================== */

.ibaek-clear {
	overflow-x: hidden;
}

/* Figma leading-trim 재현 — 단일 라인 요소에만 적용 */
.ibaek-clear .clear-hero-en,
.ibaek-clear .clear-hero-logo,
.ibaek-clear .clear-hero-sub,
.ibaek-clear .clear-diff-en,
.ibaek-clear .clear-diff-heading,
.ibaek-clear .clear-process-en,
.ibaek-clear .clear-process-heading,
.ibaek-clear .clear-process-sub,
.ibaek-clear .clear-slide-num,
.ibaek-clear .clear-slide-name,
.ibaek-clear .clear-info-en,
.ibaek-clear .clear-info-heading,
.ibaek-clear .clear-recovery-en,
.ibaek-clear .clear-dark-en,
.ibaek-clear .clear-dark-heading,
.ibaek-clear .clear-dark-card-num,
.ibaek-clear .clear-dark-card-en,
.ibaek-clear .clear-dark-card-kr,
.ibaek-clear .clear-info-row dt,
.ibaek-clear .clear-info-row dd {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* ==================== */
/* section_hero          */
/* ==================== */
.clear-hero {
	position: relative;
	min-height: 835px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 200px 260px 60px;
	overflow: hidden;
}

.clear-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.clear-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
}

.clear-hero-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* gap: 40px; */
	text-align: center;
	color: var(--brown-02, #443a35);
}

.clear-hero-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-bottom: 100px;
}

.clear-hero-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--brown-02, #443a35);
}

.clear-hero-logo {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--brown-02, #443a35);
}

.clear-hero-sub {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1;
	color: var(--brown-02, #443a35);
}

.clear-hero-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
}

.clear-hero-desc {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: var(--black-02, #252525);
	text-align: center;
}

.clear-hero-buttons {
	display: flex;
	gap: 20px;
}

/* 카테고리 바 */
.clear-category {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	width: 100%;
	max-width: 1400px;
	padding: 28px 380px 16px;
	border-radius: 20px;
	background: var(--white-40, rgba(255, 255, 255, 0.4));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.clear-category-btn {
	position: relative;
	width: 160px;
	padding-bottom: 12px;
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	color: var(--brown-02, #443a35);
	cursor: pointer;
	transition: color var(--transition-normal, 0.3s ease);
}

.clear-category-btn::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--brown-01, #aa9371);
	transform: scaleX(0);
	transition: transform var(--transition-normal, 0.3s ease);
}

.clear-category-btn.is-active::after {
	transform: scaleX(1);
}

.clear-category-btn:hover {
	color: var(--brown-01, #aa9371);
}

/* ==================== */
/* section_02 Stats      */
/* ==================== */
.clear-stats {
	background: var(--brown-01, #aa9371);
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 40px 260px;
	gap: 0;
}

.clear-stats-item {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	color: #fff;
	text-align: center;
}

.clear-stats-num {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.clear-stats-value {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.clear-stats-unit {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	align-self: flex-end;
	margin-bottom: 4px;
}

.clear-stats-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.clear-stats-plus svg {
	display: block;
	width: 100%;
	height: 100%;
}

.clear-stats-label {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: #fff;
}

.clear-stats-divider {
	width: 2px;
	align-self: stretch;
	flex-shrink: 0;
	background: linear-gradient(to bottom, rgba(255, 250, 245, 0.8) 0%, rgba(170, 147, 113, 0.8) 50%, rgba(255, 250, 245, 0.8) 100%);
}

/* ==================== */
/* section_03 The Difference */
/* ==================== */
.clear-diff {
	position: relative;
	padding: 120px 260px 188px;
	overflow: hidden;
}

.clear-diff-bg {
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 0;
}

.clear-diff-bg-half {
	width: 50%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.clear-diff-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
}

.clear-diff-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	text-align: center;
	color: var(--black-02, #252525);
}

.clear-diff-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.clear-diff-heading {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 56px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.clear-diff-body {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 100%;
	justify-content: center;
}

.clear-diff-card {
	display: flex;
	flex-direction: column;
	gap: 52px;
	width: 620px;
	padding: 60px;
	border-radius: 60px;
}

.clear-diff-card--old {
	height: 400px;
	background: rgba(17, 17, 17, 0.4);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border: 2px solid var(--gray-01, #7c7c7c);
	color: #fff;
}

.clear-diff-card--new {
	background: rgba(255, 255, 255, 0.4);
	border: 2px solid var(--black-02, #252525);
	color: var(--black-02, #252525);
}

.clear-diff-card-title {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.clear-diff-card-label {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
}

.clear-diff-card-name {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
}

.clear-diff-card-desc {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.6;
}

/* 기존방식 카드 설명 : 모바일 전용 (시안 22-19338) */
.clear-diff-card-desc--mo {
	display: none;
}

.clear-diff-vs {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 60px;
	background: var(--brown-02, #443a35);
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--beige-01, #fffaf5);
}

/* ==================== */
/* section_04 The Process (slider) */
/* ==================== */
.clear-process {
	background: var(--beige-01, #fffaf5);
	display: flex;
	flex-direction: column;
	gap: 100px;
	padding: 120px 0 120px 260px;
	overflow: hidden;
}

.clear-process-head {
	display: flex;
	flex-direction: column;
	gap: 52px;
	padding-right: 260px;
}

.clear-process-title {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.clear-process-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--brown-01, #aa9371);
}

.clear-process-heading {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	color: var(--brown-02, #443a35);
}

.clear-process-sub {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.clear-process-slider {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* 왼쪽 큰 슬라이드 스택 (시안 contents_01 = 1020px)
   - 슬라이드들을 겹쳐놓고 opacity로 크로스페이드 → 이미지 위치 안 튐 */
.clear-slide-stage {
	position: relative;
	flex: 1 0 1020px;
	min-width: 1020px;
	height: 460px;
}

.clear-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 60px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	pointer-events: none;
}

.clear-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.clear-slide-img {
	width: 400px;
	height: 460px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}

.clear-slide-text {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.clear-slide-title {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.clear-slide-num {
	font-family: 'Montserrat', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: rgba(170, 147, 113, 0.2);
}

.clear-slide-name {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.clear-slide-desc {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.6;
	color: var(--black-02, #252525);
}

.clear-slide-arrows {
	display: flex;
	gap: 20px;
}

.clear-slide-arrow {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid var(--brown-01, #aa9371);
	background: transparent;
	color: var(--brown-01, #aa9371);
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition-normal, 0.3s ease);
}

.clear-slide-arrow span {
	display: block;
	margin-top: -3px;
}

.clear-slide-arrow:hover {
	background: var(--brown-01, #aa9371);
	color: #fff;
}

/* 다음 순번 미리보기 썸네일 스트립 (항상 현재+1, +2, +3 …) */
.clear-process-thumbs {
	display: flex;
	gap: 20px;
	flex-shrink: 0;
}

.clear-thumb {
	position: relative;
	width: 200px;
	height: 460px;
	flex-shrink: 0;
	border: none;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	background: none;
}

/* 배경 이미지 레이어 — 순번 갱신 시 크로스페이드 */
.clear-thumb-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.5s ease;
}

.clear-thumb-img.is-out {
	opacity: 0;
}

.clear-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0);
	transition: background var(--transition-normal, 0.3s ease);
}

.clear-thumb:hover::after {
	background: rgba(17, 17, 17, 0.12);
}

/* ==================== */
/* section_05 Treatment Info */
/* ==================== */
.clear-info {
	display: flex;
	align-items: center;
	gap: 80px;
}

.clear-info-image {
	width: 960px;
	height: 900px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}

.clear-info-body {
	display: flex;
	flex-direction: column;
	gap: 100px;
	width: 620px;
	flex-shrink: 0;
}

.clear-info-head {
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.clear-info-title {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.clear-info-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--brown-01, #aa9371);
}

.clear-info-heading {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 56px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.clear-info-desc {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: var(--black-02, #252525);
}

.clear-info-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.clear-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid var(--beige-02, #e3dbcc);
}

.clear-info-list .clear-info-row:last-child {
	border-bottom: 1px solid var(--beige-02, #e3dbcc);
	padding-bottom: 24px;
}

.clear-info-row dt {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	color: var(--brown-01, #aa9371);
	white-space: nowrap;
}

.clear-info-row dd {
	margin: 0;
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--brown-02, #443a35);
	text-align: right;
}

/* ==================== */
/* section_06 Recovery (스티키 스크롤 : 01 → 02 크로스페이드) */
/* ==================== */
.clear-recovery {
	position: relative;
	/* 스크롤 구간 : JS가 sticky높이 × 단계수로 정확히 설정.
	   JS 미실행(no-JS) 시 대비 기본값 */
	height: 200vh;
}

/* position:fixed 기반 핀 고정 (Elementor 조상 overflow:hidden 회피) */
.clear-recovery-sticky {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 700px;
	overflow: hidden;
}

/* 구간에 진입해 있는 동안 : 화면에 고정 */
.clear-recovery-sticky.is-fixed {
	position: fixed;
	top: 0;
}

/* 구간을 지난 후 : 섹션 하단에 붙여 자연스럽게 흘려보냄 */
.clear-recovery-sticky.is-after {
	position: absolute;
	top: auto;
	bottom: 0;
}

/* 배경 레이어 (겹침 크로스페이드) */
.clear-recovery-bgs {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.clear-recovery-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.clear-recovery-bg.is-active {
	opacity: 1;
}

.clear-recovery-bgs::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(17, 17, 17, 0.4);
	pointer-events: none;
}

/* 텍스트 패널 (겹침 크로스페이드) */
.clear-recovery-inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
	padding: 120px 260px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	pointer-events: none;
}

.clear-recovery-inner.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.clear-recovery-head {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
	color: #fff;
	align-self: flex-start;
}

.clear-recovery-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: #fff;
}

.clear-recovery-heading {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 56px;
	line-height: 1.4;
	color: #fff;
}

.clear-recovery-heading strong {
	font-weight: 700;
}

.clear-recovery-body {
	flex-shrink: 0;
	width: 500px;
	display: flex;
	flex-direction: column;
	gap: 207px;
}

.clear-recovery-index {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 200px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.1);
}

.clear-recovery-contents {
	display: flex;
	flex-direction: column;
	gap: 40px;
	color: #fff;
}

.clear-recovery-title {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: #fff;
}

.clear-recovery-desc {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.4;
	color: #fff;
}

.clear-recovery-note {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: #fff;
}

/* ==================== */
/* section_07 Dark Circle Care */
/* ==================== */
.clear-dark {
	background: var(--white, #fff);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
	padding: 120px 260px;
}

.clear-dark-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
	text-align: center;
}

.clear-dark-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}

.clear-dark-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--brown-01, #aa9371);
}

.clear-dark-heading {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 56px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.clear-dark-desc {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: var(--black-02, #252525);
}

.clear-dark-desc strong {
	font-weight: 700;
	color: var(--brown-01, #aa9371);
}

.clear-dark-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
}

.clear-dark-grid {
	display: flex;
	width: 100%;
}

.clear-dark-card {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	height: 480px;
	padding: 32px;
	overflow: hidden;
}

/* 배경 이미지 레이어 : 기본 흑백 → hover 컬러 */
.clear-dark-card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(100%);
	transition: filter var(--transition-slow, 0.5s ease), transform var(--transition-slow, 0.5s ease);
}

/* 하단 그라데이션 (배경 위, 텍스트 아래) */
.clear-dark-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.8) 100%);
	z-index: 1;
	pointer-events: none;
}

.clear-dark-card-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 20px;
	text-align: right;
}

.clear-dark-card-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	color: var(--beige-02, #e3dbcc);
	transition: color var(--transition-normal, 0.3s ease);
}

/* hover : 이미지 컬러 + 살짝 확대, 제목 골드 포인트 */
.clear-dark-card:hover .clear-dark-card-bg {
	filter: grayscale(0);
	transform: scale(1.04);
}

.clear-dark-card:hover .clear-dark-card-head {
	color: var(--beige-light, #fad58f);
}

.clear-dark-card-titles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.clear-dark-card-num {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
}

.clear-dark-card-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1;
}

.clear-dark-card-kr {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
}

.clear-dark-card-txt {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
	width: 100%;
}

.clear-dark-foot {
	font-family: 'Pretendard', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.6;
	color: var(--black-02, #252525);
	text-align: center;
}

.clear-dark-foot strong {
	font-weight: 700;
	color: var(--brown-01, #aa9371);
}

/* ==================================================== */
/* Responsive                                            */
/* ==================================================== */
@media (max-width: 1720px) {
	.clear-diff { padding: 120px 60px 160px; }
	.clear-diff-card { width: 50%; }
	.clear-process { padding-left: 60px; }
	.clear-process-head { padding-right: 60px; }
	.clear-info-image { width: 46%; height: auto; align-self: stretch; min-height: 720px; }
	.clear-info-body { width: 54%; }
	.clear-recovery-inner { padding: 120px 60px; }
	.clear-dark { padding: 120px 60px; }
}

@media (max-width: 1280px) {
	.clear-hero { padding: 160px 40px 60px; }
	.clear-hero-logo { font-size: 60px; }
	.clear-hero-sub { font-size: 22px; }
	.clear-category { padding: 24px 40px 12px; gap: 40px; }

	.clear-stats { flex-wrap: wrap; gap: 32px 0; padding: 40px; }
	.clear-stats-item { flex: 0 0 50%; }
	.clear-stats-divider { display: none; }
	.clear-stats-value { font-size: 48px; }

	.clear-diff-heading { font-size: 44px; }
	.clear-diff-body { flex-direction: column; }
	.clear-diff-card { width: 100%; height: auto; }
	.clear-diff-card--old { min-height: 240px; }
	.clear-diff-vs { transform: rotate(90deg); }

	.clear-process-heading { font-size: 44px; }
	.clear-slide-name { font-size: 34px; }
	.clear-slide-desc { font-size: 22px; }
	.clear-process-slider { flex-direction: column; align-items: stretch; }
	/* 좁은 화면 : 겹침(absolute) 스택 해제 → 활성 슬라이드만 일반 흐름으로 표시 */
	.clear-slide-stage { flex: 0 0 auto; min-width: 0; height: auto; }
	.clear-slide { position: static; display: none; flex-direction: column; align-items: flex-start; }
	.clear-slide.is-active { display: flex; }
	.clear-slide-img { width: 100%; }
	.clear-process-thumbs { overflow-x: auto; padding-right: 60px; }

	.clear-info { flex-direction: column; align-items: stretch; gap: 48px; }
	.clear-info-image { width: 100%; min-height: 480px; }
	.clear-info-body { width: 100%; gap: 48px; }
	.clear-info-heading { font-size: 44px; }

	/* 좁은 화면 : 스티키 해제 → 01/02 패널을 세로로 나란히 표시 */
	.clear-recovery { height: auto; }
	.clear-recovery-sticky { position: static; height: auto; min-height: 0; }
	.clear-recovery-bgs { display: none; }
	.clear-recovery-inner {
		position: relative;
		inset: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		flex-direction: column;
		min-height: 560px;
	}
	.clear-recovery-panel[data-panel="0"] { background-image: url('/iback/m/site/assets/imgs/sub/clear/recovery_bg_01.webp'); }
	.clear-recovery-panel[data-panel="1"] { background-image: url('/iback/m/site/assets/imgs/sub/clear/recovery_bg_02.webp'); }
	.clear-recovery-panel {
		background-size: cover;
		background-position: center;
	}
	.clear-recovery-panel::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(17, 17, 17, 0.4);
		z-index: 0;
	}
	.clear-recovery-panel > * { position: relative; z-index: 1; }
	.clear-recovery-heading { font-size: 44px; }
	.clear-recovery-body { width: 100%; gap: 60px; }
	.clear-recovery-index { font-size: 140px; }
	.clear-recovery-title { font-size: 32px; }
	.clear-recovery-desc { font-size: 22px; }

	.clear-dark-heading { font-size: 44px; }
	.clear-dark-grid { flex-wrap: wrap; }
	.clear-dark-card { flex: 0 0 50%; }
	.clear-dark-foot { font-size: 24px; }
}

@media (max-width: 767px) {
	/* 좁은 폭에서 어절 중간 개행 방지 */
	.clear-hero-desc,
	.clear-diff-heading,
	.clear-diff-card-desc,
	.clear-slide-desc,
	.clear-info-desc,
	.clear-recovery-desc,
	.clear-dark-desc,
	.clear-dark-foot,
	.clear-stats-label {
		word-break: keep-all;
	}

	/* hero: 시안(22-19338) — 모바일 전용 이미지, 풀폭 버튼, 가로 카테고리 탭 */
	.clear-hero { padding: 110px 40px 48px; min-height: 0; }
	/* 모바일 전용 이미지 (인라인 style 덮어쓰기 위해 !important) */
	.clear-hero-bg { background-image: url('/iback/m/site/assets/imgs/sub/clear/hero_mo.webp') !important; }
	.clear-hero-inner { gap: 48px; }
	/* 사진 위 텍스트 가독성: 텍스트 자체에 흰색 글로우 */
	.clear-hero-desc {
		text-shadow:
			0 0 6px rgba(255, 250, 245, 0.9),
			0 0 16px rgba(255, 250, 245, 0.85),
			0 0 32px rgba(255, 250, 245, 0.7);
	}
	.clear-hero-main { gap: 16px; margin-bottom: 90px; }
	.clear-hero-en { font-size: 14px; }
	.clear-hero-logo { font-size: 44px; }
	.clear-hero-sub { font-size: 18px; }
	.clear-hero-body { width: 100%; gap: 40px; }
	.clear-hero-desc { font-size: 15px; line-height: 1.7; }
	.clear-hero-buttons { flex-direction: column; gap: 12px; width: 100%; }
	.clear-category { flex-direction: row; gap: 20px; padding: 20px 24px 12px; border-radius: 16px; }
	.clear-category-btn { width: auto; flex: 1; font-size: 15px; padding-bottom: 10px; }

	/* stats: 세로 적층 + 가로 구분선 */
	.clear-stats { flex-direction: column; align-items: center; gap: 32px; padding: 64px 40px; }
	.clear-stats-item { flex: 0 0 auto; width: 100%; gap: 16px; }
	.clear-stats-divider {
		display: block;
		width: 80px;
		height: 2px;
		align-self: center;
		background: linear-gradient(to right, rgba(255, 250, 245, 0.8) 0%, rgba(170, 147, 113, 0.8) 50%, rgba(255, 250, 245, 0.8) 100%);
	}
	.clear-stats-value { font-size: 40px; }
	.clear-stats-unit { font-size: 16px; margin-bottom: 2px; }
	.clear-stats-plus { width: 20px; height: 20px; }
	.clear-stats-label { font-size: 15px; }

	/* diff: 헤더는 흰 배경, 본문 영역에만 배경 이미지 상하 분할 */
	.clear-diff { padding: 60px 0 0; }
	.clear-diff-bg { display: none; }
	.clear-diff-inner { gap: 60px; }
	.clear-diff-head { padding: 0 40px; gap: 20px; }
	.clear-diff-heading { font-size: 32px; line-height: 1.4; }
	/* 배경 이미지 2장(위 diff_bg_01 · 아래 diff_bg_02)을 body 배경으로 상하 50% 분할.
	   카드/VS 는 flow(세로 flex) 배치. body 를 폭 비율(aspect-ratio)로 세워 폭이 좁아도 바늘이 안 눌림. */
	.clear-diff-body {
		background-image: url('/iback/m/site/assets/imgs/sub/clear/diff_bg_01.webp'), url('/iback/m/site/assets/imgs/sub/clear/diff_bg_02.webp');
		background-size: 100% 50%, 100% 50%;
		background-position: top center, bottom center;
		background-repeat: no-repeat;
		aspect-ratio: 960 / 2100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24px;
		gap: 18px;
	}
	/* 텍스트 박스(카드) : PC 디자인 그대로 — 반투명 + blur + 테두리. 폭·수치만 모바일에 맞춤 */
	.clear-diff-card {
		width: 100%;
		height: auto;
		gap: 24px;
		padding: 32px 24px;
		border-radius: 32px;
	}
	.clear-diff-card--old {
		min-height: 0;
		height: auto;
		background: rgba(17, 17, 17, 0.4);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		border: 2px solid var(--gray-01, #7c7c7c);
		color: #fff;
	}
	.clear-diff-card--old .clear-diff-card-label { color: #fff; }
	.clear-diff-card--old .clear-diff-card-name { color: #fff; }
	.clear-diff-card--new {
		background: rgba(255, 255, 255, 0.4);
		border: 2px solid var(--black-02, #252525);
		color: var(--black-02, #252525);
	}
	.clear-diff-card--new .clear-diff-card-label { color: var(--black-02, #252525); }
	.clear-diff-card-title { gap: 16px; }
	.clear-diff-card-label { font-size: 16px; }
	.clear-diff-card-name { font-size: 28px; }
	.clear-diff-card-desc { font-size: 16px; line-height: 1.6; }
	.clear-diff-card-desc--mo { display: block; }
	.clear-diff-vs { transform: none; align-self: center; width: 60px; height: 60px; font-size: 24px; }

	/* process: 번호·제목 → 이미지 → 설명 → 화살표 순 (display:contents 재배열) */
	.clear-process { padding: 64px 0; gap: 48px; }
	.clear-process-head { padding: 0 40px; gap: 32px; }
	.clear-process-title { gap: 20px; }
	.clear-process-en { font-size: 14px; }
	.clear-process-heading { font-size: 30px; }
	.clear-process-sub { font-size: 15px; line-height: 1.5; }
	.clear-process-slider { padding: 0 40px; }
	.clear-slide { gap: 20px; }
	.clear-slide-text { display: contents; }
	.clear-slide-title { order: 1; gap: 16px; }
	.clear-slide-img { order: 2; width: 100%; height: auto; aspect-ratio: 310 / 320; }
	.clear-slide-desc { order: 3; font-size: 15px; line-height: 1.6; }
	.clear-slide-arrows { order: 4; margin-top: 20px; }
	.clear-slide-num { font-size: 18px; }
	.clear-slide-name { font-size: 22px; }
	.clear-slide-arrow { width: 40px; height: 40px; font-size: 20px; }
	.clear-process-thumbs { display: none; }

	/* info: 이미지 풀블리드 → 본문 */
	.clear-info { padding: 0; gap: 40px; }
	.clear-info-image { min-height: 0; height: auto; aspect-ratio: 390 / 360; }
	.clear-info-body { gap: 40px; padding: 0 40px 64px; }
	.clear-info-head { gap: 24px; }
	.clear-info-title { gap: 20px; }
	.clear-info-en { font-size: 14px; }
	.clear-info-heading { font-size: 28px; }
	.clear-info-desc { font-size: 15px; }
	.clear-info-list { gap: 16px; }
	.clear-info-row { padding-top: 16px; gap: 16px; }
	.clear-info-list .clear-info-row:last-child { padding-bottom: 16px; }
	.clear-info-row dt { font-size: 13px; }
	.clear-info-row dd { font-size: 15px; }

	/* recovery: 패널 2개 세로 적층 (1280 블록 스타일 상속) */
	.clear-recovery-inner { padding: 64px 40px; min-height: 536px; gap: 48px; }
	.clear-recovery-head { gap: 20px; }
	.clear-recovery-en { font-size: 14px; }
	.clear-recovery-heading { font-size: 28px; }
	.clear-recovery-body { gap: 48px; }
	.clear-recovery-index { font-size: 80px; }
	.clear-recovery-contents { gap: 24px; }
	.clear-recovery-title { font-size: 24px; }
	.clear-recovery-desc { font-size: 15px; line-height: 1.6; }
	.clear-recovery-note { font-size: 13px; }

	/* dark: 카드 4장 세로 적층 */
	.clear-dark { padding: 64px 40px; gap: 48px; }
	.clear-dark-head { gap: 32px; }
	.clear-dark-title { gap: 20px; }
	.clear-dark-en { font-size: 14px; }
	.clear-dark-heading { font-size: 28px; }
	.clear-dark-desc { font-size: 15px; }
	.clear-dark-body { gap: 40px; }
	.clear-dark-grid { flex-direction: column; }
	.clear-dark-card { flex: 0 0 auto; width: 100%; height: 400px; padding: 24px; }
	.clear-dark-card-en { font-size: 24px; }
	.clear-dark-card-kr { font-size: 16px; }
	.clear-dark-card-txt { font-size: 14px; }
	.clear-dark-foot { font-size: 16px; }

	/* 모바일: hover 불가 → 항상 한 장만 활성(.is-active, clear.js가 부여).
	   초기엔 첫 카드, 터치 시 그 카드로 이동해 "터치 가능" 신호 제공 */
	.clear-dark-card.is-active .clear-dark-card-bg {
		filter: grayscale(0);
		transform: scale(1.04);
	}
	.clear-dark-card.is-active .clear-dark-card-head {
		color: var(--beige-light, #fad58f);
	}
}