@charset "utf-8";
/* *******************************************************
 * filename : silla-light.css
 * description : 신라제면소 라이트 테마 오버라이드
 *               (다크 → 크림/딥브라운, 레이아웃 변경 없음)
 * palette : Primary #432911 / 크림 #F7F2E9 / 쌀빛 #EFE6D3 / 토프 #B07A3C
******************************************************** */
:root{
	--main-color: #B07A3C;
	--silla-brown: #432911;
	--silla-cream: #F7F2E9;
	--silla-rice: #EFE6D3;
}

/* ---------- 전역 ---------- */
body{ background-color: var(--silla-cream); }

/* 탭/클릭 파란 하이라이트 전역 제거 */
*, *::before, *::after{ -webkit-tap-highlight-color: transparent; }
a, button, input, label, select, textarea{ outline: none; }
a:focus-visible, button:focus-visible{ outline: none; }
.ms-preloader{ background-color: var(--silla-cream); }

/* ---------- 메인 인트로 ---------- */
#mainIntro{ background: var(--silla-rice); }
@media all and (max-width: 800px){
	.main-intro-con .main-intro-txt{
		justify-content: center !important;
		padding-bottom: 0 !important;
	}
}

/* ---------- Hero 모바일: 높이 축소 + 텍스트 수직 센터 ---------- */
@media all and (max-width: 800px){
	/* 높이를 svh 기준 85%로 축소 — gap 원인 제거 */
	#mainVisual{ height: 85svh !important; }

	/* txt-con이 position:absolute + height:100% 이므로 여기서 flex 센터링 */
	.main-visual-txt-con{
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.main-visual-txt-box{
		width: 100%;
		height: auto !important;
	}
	.main-visual-txt-box .main-visual-txt1{
		white-space: normal !important;
		word-break: keep-all !important;
		max-width: 88vw !important;
	}
	/* image-item 텍스트 슬라이드-인 애니메이션 → 모바일용 fade-in으로 교체 */
	#mainVisual.active .active-item.image-item .main-visual-txt-inner{
		animation: none !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	#mainVisual.active .active-item.image-item .main-visual-txt-box .main-visual-txt1{
		animation: visualTxtMoveM 1s 0.5s ease-in-out both !important;
	}
}

/* ---------- Pain 섹션 갭 방지 — 히어로와 동일 기준 ---------- */
@media all and (max-width: 800px){
	#mainPainCon{ margin-top: 85svh !important; }
}

/* ---------- Hero 이미지 줌 없음 (원래 zoom-out 애니메이션도 제거) ---------- */
.main-visual-item .main-visual-img{
	transform: scale(1.0) !important;
}
.main-visual-item.active-item .main-visual-img{
	animation: none !important;
}
/* 비디오 → 이미지 교체에 따른 동일 배치 규칙 */
.main-intro-circle-wrap img#visualVideo{
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	height: calc(100% + 150px); min-width: 100%; object-fit: cover;
}
/* 모바일: 150px 오버플로우 제거로 과도한 확대 방지 */
@media all and (max-width: 800px){
	.main-intro-circle-wrap img#visualVideo{
		height: 100%;
		width: 100%;
		object-position: 50% 40%;
	}
}
/* 인트로 텍스트 글로우: 오렌지 → 딥브라운 */
.main-intro-con .main-intro-txt .intro-txt01{
	text-shadow: -1px -1px 0.3rem rgba(67, 41, 17, 0.6), 1px 1px 0.3rem rgba(67, 41, 17, 0.6),
	             -1px 1px 0.3rem rgba(67, 41, 17, 0.6), 1px -1px 0.3rem rgba(67, 41, 17, 0.6);
}
.main-intro-circle .inner-circle .point{
	background: transparent radial-gradient(closest-side at 50% 50%, #FFF8EC 0%, #B07A3C 100%) 0% 0% no-repeat padding-box;
}
.main-scroll-icon .txt{ text-shadow: 0 0 0.6rem rgba(67, 41, 17, 0.6); }

/* ---------- 헤더 ---------- */
#header:before{ background: rgba(67, 41, 17, 0.45); }

/* ---------- Product 섹션 대각선 텍스처 ---------- */
#mainPrdCon{
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 18px,
		rgba(67,41,17,0.025) 18px,
		rgba(67,41,17,0.025) 19px
	);
}

/* ---------- 메인 컨텐츠 공통 타이틀 ---------- */
.main-tit-box .main-sub-tit{ color: var(--silla-brown); }
.main-tit-box.black .main-sub-tit{ color: var(--silla-brown); }

/* ---------- Product 섹션 ---------- */
/* blur 애니메이션 전면 제거 — filter:blur는 GPU 과부하 유발
   초기 상태(opacity:0, filter:blur(2rem))를 opacity:0, translateY로 대체 */
.accordion-item .accordion-inner .accordion-img-box,
.accordion-item .accordion-inner .accordion-tit-en,
.accordion-item .accordion-inner .accordion-tit,
.accordion-item .accordion-num{
	filter: none !important;
}
/* img-box: 기본 보임, hover/active 시 숨김 */
.accordion-item .accordion-inner .accordion-img-box{
	transition: opacity 0.3s ease !important;
	opacity: 1;
}
.accordion-list .accordion-item:hover .accordion-inner .accordion-img-box,
.accordion-list .accordion-item.active .accordion-inner .accordion-img-box{
	opacity: 0;
}

/* hover/active 시 info 텍스트 강제 표시 — 모든 화면 크기
   accordion-tit / tit-en 초기값(opacity:0; filter:blur)이 active에서도 안 풀려서 명시적으로 해제 */
.accordion-item:hover .accordion-info-box dl,
.accordion-item.active .accordion-info-box dl{
	opacity: 1 !important;
}
.accordion-item:hover .accordion-info-box .accordion-tit-en,
.accordion-item:hover .accordion-info-box .accordion-tit,
.accordion-item.active .accordion-info-box .accordion-tit-en,
.accordion-item.active .accordion-info-box .accordion-tit{
	opacity: 1 !important;
	filter: none !important;
}
.accordion-item:hover .accordion-info-box .accordion-info-txt,
.accordion-item.active .accordion-info-box .accordion-info-txt{
	opacity: 1 !important;
}
/* animated 진입: blur 대신 opacity + translateY (GPU 합성 레이어만 사용, 훨씬 가볍다) */
#mainPrdCon .accordion-item .accordion-inner .accordion-tit-en,
#mainPrdCon .accordion-item .accordion-inner .accordion-tit{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease !important;
}
#mainPrdCon .animated .accordion-item .accordion-inner .accordion-tit-en,
#mainPrdCon .animated .accordion-item .accordion-inner .accordion-tit{
	opacity: 1;
	transform: translateY(0);
}
#mainPrdCon .accordion-item .accordion-num{
	opacity: 0;
	transition: opacity 0.6s ease !important;
}
#mainPrdCon .animated .accordion-item .accordion-num{ opacity: 1; }

/* stagger 딜레이 유지 */
#mainPrdCon .animated .accordion-item:nth-child(1) .accordion-inner .accordion-tit-en,
#mainPrdCon .animated .accordion-item:nth-child(1) .accordion-inner .accordion-tit,
#mainPrdCon .animated .accordion-item:nth-child(1) .accordion-num{ transition-delay: 0.1s !important; }
#mainPrdCon .animated .accordion-item:nth-child(2) .accordion-inner .accordion-tit-en,
#mainPrdCon .animated .accordion-item:nth-child(2) .accordion-inner .accordion-tit,
#mainPrdCon .animated .accordion-item:nth-child(2) .accordion-num{ transition-delay: 0.25s !important; }


.main-prd-con .accordion-list{ height: 69rem !important; }

/* ---- Product 2: usecase-card 스타일 4열 그리드 ---- */
#mainPrdCon2{ padding: 0; background: var(--silla-brown); }
.main-prd2-cards{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.prd2-card{
	position: relative;
	height: 58vh;
	min-height: 420px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	/* 카드 자체를 독립 스택 컨텍스트로 격리 */
	contain: layout paint;
	transform: translateZ(0);
}
.prd2-card-bg{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 115%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	/* GPU 레이어 미리 승격 → hover 시 layer promotion 비용 제거 */
	will-change: transform;
	transform: translateZ(0);
	transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prd2-card:hover .prd2-card-bg{ transform: scale(1.07); }
/* overlay: gradient 전환(background transition)은 CPU repaint
   대신 두 레이어 opacity 교체로 GPU 합성만 사용 */
.prd2-card-overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(22, 11, 3, 0.9) 0%,
		rgba(22, 11, 3, 0.3) 55%,
		rgba(22, 11, 3, 0.08) 100%
	);
}
.prd2-card-overlay::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(22, 11, 3, 0.96) 0%,
		rgba(22, 11, 3, 0.55) 60%,
		rgba(22, 11, 3, 0.18) 100%
	);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.prd2-card:hover .prd2-card-overlay::after{ opacity: 1; }
.prd2-card-body{
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 3.6rem 4rem;
	z-index: 2;
}
.prd2-card-en{
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--main-color);
	margin-bottom: 0.8rem;
}
.prd2-card-tit{
	font-size: 2.8rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.25;
}
.prd2-card-txt{
	margin-top: 1.2rem;
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.8;
	transform: translateY(10px);
	opacity: 0;
	transition: transform 0.45s ease, opacity 0.45s ease;
}
.prd2-card:hover .prd2-card-txt{
	transform: translateY(0);
	opacity: 1;
}
@media all and (max-width: 1280px){
	.main-prd2-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width: 800px){
	.main-prd2-cards{ grid-template-columns: 1fr; }
	.prd2-card{ height: 56vh; min-height: 320px; }
	/* 모바일: GPU 메모리 절약 — 115% 초과 높이 및 will-change 해제 */
	.prd2-card-bg{ height: 100%; will-change: auto; }
	.prd2-card-txt{ transform: translateY(0) !important; opacity: 1 !important; }
	.prd2-card-overlay{
		background: linear-gradient(to top, rgba(22,11,3,0.88) 0%, rgba(22,11,3,0.3) 60%, rgba(22,11,3,0.08) 100%) !important;
	}
}
@media all and (max-width: 800px){
	.main-prd-con .accordion-list{ height: auto !important; }
	.accordion-list .accordion-item.active{ height: 68rem !important; }

	/* 모바일: 호버 불가 → 전체 아이템을 hover 상태로 고정 */
	.accordion-list .accordion-item .accordion-bg-img{ opacity: 0.7 !important; }
	.accordion-list .accordion-item.active .accordion-bg-img{ opacity: 1 !important; }
	.accordion-item .accordion-inner .accordion-img-box{ opacity: 0 !important; }
	.accordion-item .accordion-info-box dl{ opacity: 1 !important; }
	.accordion-item .accordion-info-box .accordion-tit-en,
	.accordion-item .accordion-info-box .accordion-tit{
		opacity: 1 !important;
		filter: none !important;
	}
	.accordion-item .accordion-info-box .accordion-info-txt{ opacity: 1 !important; }
}

#mainPrdCon .bg{
	background: linear-gradient(to bottom, rgba(247, 242, 233, 0) 0%, rgba(239, 230, 211, 0.75) 50%);
}
.accordion-item .accordion-inner .accordion-tit{ color: var(--silla-brown); }
.accordion-item .accordion-num{
	background: linear-gradient(90deg, rgba(67, 41, 17, 0) 0%, rgba(67, 41, 17, 0.18) 100%);
	background-clip: text; -webkit-background-clip: text; color: transparent;
	left: 3rem; transform: translate(0%, 0%);
}
/* 기본: 배경 이미지 숨김, 호버/액티브 시만 노출 */
.accordion-list .accordion-item .accordion-bg-img{
	opacity: 0;
	transition: opacity 0.5s ease;
}
.accordion-list .accordion-item:hover .accordion-bg-img{
	opacity: 0.7;
}
.accordion-list .accordion-item.active .accordion-bg-img{
	opacity: 1;
}
/* active 시 사진 배경 위 텍스트 가독성 */
.accordion-item .accordion-info-box dl .accordion-info-txt{ color: rgba(255, 255, 255, 0.8); }
.accordion-list .accordion-item .accordion-bg-img:after{
	position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(20, 10, 3, 0.6);
}

/* ---------- FAQ(구 News) 섹션 ---------- */
#mainNewsCon{
	padding-block: 12rem 14rem !important;
	background-color: #fff;
	background-image: linear-gradient(rgba(67,41,17,0.05) 1px, transparent 1px);
	background-size: 100% 3.2rem;
}
.main-news-list .list-item a{ background: var(--silla-rice); }
.main-news-list .list-item .txt-box .category{ color: var(--main-color); }
.main-news-list .list-item .txt-box .tit{ color: var(--silla-brown); }
.main-news-list .list-item .txt-box .date{ color: rgba(67, 41, 17, 0.75); }
/* 호버 fill: 흰색 대신 크림 계열로 — 흰 배경과 구분되도록 */
.main-news-list .list-item a .cm-fill{ background: var(--silla-cream); }

/* ---------- 하단 문의 배너 ---------- */
#bottomInquiryCon{ background: var(--silla-cream); }
/* 무료 샘플 신청 */
.bottom-inquiry-con{ background: var(--silla-brown); }
.main-inquiry-scroll .main-inquiry-bg span img{ width: 100%; }
.bottom-inquiry-con .main-tit-box .txt{ color: rgba(255, 255, 255, 0.8); }

/* 무료샘플 — 모바일 전용 버튼 비활성화 (레이아웃 내 버튼 사용) */
.inquiry-mobile-btn { display: none; }

/* ---------- 푸터 ---------- */
#footerBottom{ border-top: 1px solid rgba(67, 41, 17, 0.3); }
.footer-address-list dl{ color: var(--silla-brown); }
.footer-address-list dl dd a{ color: inherit; }
.foot-sns-menu li a{ color: var(--silla-brown); }
.foot-menu li a{ color: rgba(67, 41, 17, 0.6); }
.footer-copyright{ color: var(--silla-brown); }
.family-site-box{ border-color: var(--silla-brown); }
.family-site-box .family-site-open-btn{
	background-color: var(--silla-cream);
	color: var(--silla-brown);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.family-site-box .family-site-open-btn:focus,
.family-site-box .family-site-open-btn:focus-visible{ outline: none !important; box-shadow: none !important; }
.family-site-list{ background-color: var(--silla-cream); border-color: var(--silla-brown); }
.family-site-list a{ color: var(--silla-brown); font-size: 1.9rem; }
.family-site-list ul::-webkit-scrollbar-thumb{ background-color: var(--silla-brown); }

/* ---------- 마우스 포인터 ---------- */
.mouse-pointer .pointer-circle{ border-color: rgba(176, 122, 60, 0.8); background: rgba(247, 242, 233, 0.15); }

/* ---------- 모바일 ---------- */
@media all and (max-width: 800px){
	.member-menu-box li:last-child a{ background-color: var(--silla-brown) !important; }
	#gnbM .lang-select li.cur a{ background: var(--silla-brown); }

	/* 헤더 높이 축소: CSS 변수 재정의 + 직접 지정 */
	:root{ --header-height: 56px !important; }
	#header, #headerInnerWrap, #headerInner{ height: 56px !important; min-height: 0 !important; }
	#header h1.logo{ display: flex !important; align-items: center !important; height: 100% !important; }
	#header h1.logo a{ display: flex !important; align-items: center !important; height: auto !important; }

	/* 본문 텍스트 크기 개선 */
	.accordion-item .accordion-info-box dl .accordion-info-txt{ font-size: 1.9rem !important; }
	.accordion-item .accordion-info-box .accordion-tit-en{ font-size: 1.7rem !important; }
	.usecase-txt{ font-size: 1.8rem !important; }
	.main-news-list .list-item .txt-box .category{ font-size: 1.7rem !important; }
	.main-news-list .list-item .txt-box .tit{ font-size: 2.6rem !important; }
	.main-news-list .list-item .txt-box .date{ font-size: 2rem !important; }

	/* 플로팅 버튼 하단·우측 여백 확보 */
	.main-visual-inquiry-box:not(.bottom-fixed){
		bottom: 3rem !important;
		right: 2rem !important;
	}
}

/* ---------- 플로팅 CTA 아이콘·호버 수정 ---------- */
/* SVG 아이콘 크기 */
.main-visual-inquiry-box a .icon-box svg{
	width: 2.2rem;
	height: 2.2rem;
	display: block;
	flex-shrink: 0;
}
/* 데스크톱 하단 여백 축소 */
@media all and (min-width: 801px){
	.main-visual-inquiry-box:not(.bottom-fixed){ bottom: 4rem !important; }
}
/* 호버 시 가로 확장 폭 줄이기 */
@media all and (min-width: 801px){
	.main-visual-inquiry-box a.scroll-on,
	.main-visual-inquiry-box a:hover{ padding-left: 22rem !important; }
}

/* ---------- 요청 수정 (2026-06-12) ---------- */
/* 1) GNB 메뉴 제거 (PC + 모바일) */
#gnb, .nav-open-btn, #gnbM, .gnb-overlay-bg, .gnb-overlay-bg-m{ display: none !important; }

/* 2) 인트로(히어로) 유지: 콘텐츠가 인트로 위로 스크롤되도록 레이어만 조정 */
#mainIntro{ z-index: 10; }

/* 3) 인트로 가운데 제품 이미지 제거 (SCROLL DOWN 아이콘은 유지) */
.main-intro-img .intro-img{ display: none; }

/* 4) Product 호버(active) 타이틀 가독성: 사진 위에서는 밝은 색으로 */
.accordion-item .accordion-info-box .accordion-tit{ color: #fff; }
.accordion-item .accordion-info-box .accordion-tit-en{ color: #E9C9A0; }
.accordion-list .accordion-item .accordion-bg-img:after{ background: rgba(20, 10, 3, 0.6); }

/* 5) FAQ 커스텀 마우스 포인터 제거 — 기본 커서 사용 */
.mouse-pointer{ display: none !important; }
.main-news-list .list-item a{ cursor: default; }

/* 6) 스크롤 복귀 시 히어로를 덮던 블러 제거 (Product .bg의 backdrop blur 비활성) */
#mainPrdCon .bg{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* 7) 헤더 우측 유틸(KR/SHOP 언어 선택, 회원 아이콘) 제거 */
.header-util-box{ display: none !important; }

/* 8) 푸터 하단 메뉴(회사 소개~인스타그램) 제거 */
.foot-menu{ display: none !important; }

/* 9) FAQ 캐러셀 → 그리드 전환 (4개 카드) */
.main-news-list{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem 2rem;
	width: 100%;
	margin: 8rem 0 0;
	padding: 0;
	box-sizing: border-box;
}
.main-news-list .list-item{
	width: auto;
	margin: 0;
}
@media all and (max-width: 1280px){
	.main-news-list{ grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width: 800px){
	.main-news-list{ grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width: 480px){
	.main-news-list{ grid-template-columns: 1fr; }
}

/* 10) 헤더 로고: 히어로 사진 위 가독성 (흰색 + 브라운 섀도) */
#header h1.logo .cm-logo-svg text{ fill: #fff; }
#header h1.logo .cm-logo-svg{ filter: drop-shadow(0 1px 5px rgba(67, 41, 17, 0.55)); }

/* 11) 폰트: 전체 Pretendard */
:root{
	--font-family1: 'Pretendard', "돋움", Dotum, Arial, sans-serif;
	--font-family2: 'Pretendard', "돋움", Dotum, Arial, sans-serif;
	--font-family3: 'Pretendard', "돋움", Dotum, Arial, sans-serif;
}
.font-orbitron{ font-family: 'Pretendard', "돋움", Dotum, Arial, sans-serif; }
.font-hanwha, .font-hanwhaB{ font-family: 'Pretendard', "돋움", Dotum, Arial, sans-serif; }

/* 12) 하단 무료 샘플 신청 배너: "Free Sample" 제거 + 타이틀 흰색 */
#bottomInquiryCon .main-tit-box .main-tit{ display: none; }
#bottomInquiryCon .main-tit-box .main-sub-tit{ color: #fff; }
/* 텍스트 숨김 해제 — 좌우/상하 분할 레이아웃에서는 모든 해상도에서 노출 */

/* ===== Stats 섹션 ===== */
#mainStatsCon{
	position: relative;
	overflow: hidden;
	background: var(--silla-cream);
}
/* 패럴렉스 배경 */
.main-stats-scroll{
	display: block;
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.main-stats-bg{
	position: absolute;
	top: -20%; left: 0; width: 100%; height: 140%;
}
.main-stats-bg span{
	display: block;
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%; height: 100%;
}
.main-stats-bg span img{
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0.22;
}
#mainStatsCon::after{ display: none; }
.main-stats-inner{
	position: relative;
	z-index: 1;
	padding: 12rem 0 14rem;
}
#mainStatsCon .main-tit-box .main-tit{ color: var(--silla-brown); }
#mainStatsCon .main-tit-box .main-sub-tit{ color: rgba(67, 41, 17, 0.6); }

/* 에디토리얼 레이아웃 */
.main-stats-grid{
	display: flex;
	margin-top: 8rem;
	border-top: 1px solid rgba(67, 41, 17, 0.1);
	padding-top: 5rem;
	gap: 0;
}
.stats-item{
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 5rem;
	border-left: 1px solid rgba(67, 41, 17, 0.1);
}
.stats-item:first-child{
	padding-left: 0;
	border-left: none;
}

/* 인덱스 */
.stats-idx{
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(67, 41, 17, 0.22);
	margin-bottom: 2.5rem;
}

/* 숫자 */
.stats-num{
	font-size: 11rem;
	font-weight: 900;
	color: var(--silla-brown);
	line-height: 0.88;
	letter-spacing: -0.04em;
	display: block;
	margin-bottom: 3rem;
	white-space: nowrap;
}
/* tabular-nums: 숫자 너비를 고정해 카운터 애니메이션 중 layout reflow 방지 */
.stats-val{
	font-style: normal;
	font-variant-numeric: tabular-nums;
	display: inline-block;
	min-width: 0.6em;
}
/* "당일" — flex bottom-align으로 다른 숫자와 하단 기준선 맞춤 */
.main-stats-grid .stats-item:nth-child(3) .stats-num{
	font-size: 7.5rem;
	letter-spacing: -0.02em;
	display: flex;
	align-items: flex-end;
	min-height: calc(11rem * 0.88);
	line-height: 1;
}
.stats-unit{
	font-size: 5.5rem;
	font-weight: 800;
	color: var(--main-color);
	vertical-align: baseline;
	margin-left: 0.1rem;
}
.stats-sep{ display: none; }

/* 레이블 — 하단 고정 */
.stats-lbl{
	font-size: 1.3rem;
	color: rgba(67, 41, 17, 0.45);
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-top: auto;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(67, 41, 17, 0.08);
}

@media all and (max-width: 1280px){
	/* flex → grid로 전환해 2×2 고정 */
	.main-stats-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-top: none;
		padding-top: 0;
		margin-top: 6rem;
		gap: 0;
	}
	.stats-item{
		flex: none;
		padding: 4rem 4rem;
		border-left: none;
		border-top: 1px solid rgba(67,41,17,0.1);
	}
	.stats-item:first-child,
	.stats-item:nth-child(2){ border-top: none; }
	.stats-item:nth-child(odd){ border-right: 1px solid rgba(67,41,17,0.1); }
	.stats-num{ font-size: 9rem; }
	.stats-unit{ font-size: 4.5rem; }
	.main-stats-grid .stats-item:nth-child(3) .stats-num{ min-height: calc(9rem * 0.88); }
}
@media all and (max-width: 800px){
	.main-stats-inner{ padding: 6rem 0 8rem; }
	.stats-item{
		align-items: center;
		text-align: center;
		padding: 4rem 2rem;
	}
	.stats-idx{ font-size: 0.9rem; margin-bottom: 1.5rem; }
	.stats-num{ font-size: 6.5rem; letter-spacing: -0.03em; margin-bottom: 0; }
	.stats-unit{ font-size: 3.2rem; }
	.stats-lbl{ font-size: 1.1rem; padding-top: 1.5rem; }
	.main-stats-grid .stats-item:nth-child(3) .stats-num{ font-size: 4.2rem; min-height: calc(6.5rem * 0.88); }
}

/* ===== Use Cases (현장) 섹션 ===== */
#mainUseCaseCon{
	background: var(--silla-brown);
	background-image: radial-gradient(rgba(247,242,233,0.055) 1px, transparent 1px);
	background-size: 28px 28px;
	padding-top: 14rem;
	position: relative;
	overflow: hidden;
}
/* 앰비언트 글로우 */
#mainUseCaseCon::before{
	content: '';
	position: absolute;
	top: -5%;
	right: -8%;
	width: 55%;
	height: 60%;
	background: radial-gradient(ellipse, rgba(176,122,60,0.1) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
#mainUseCaseCon::after{
	content: '';
	position: absolute;
	top: 30%;
	left: -10%;
	width: 40%;
	height: 50%;
	background: radial-gradient(ellipse, rgba(176,122,60,0.06) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
#mainUseCaseCon .area,
.main-usecase-cards{ position: relative; z-index: 1; }
#mainUseCaseCon .main-tit-box{
	padding-bottom: 6rem;
	position: relative;
	overflow: visible;
}
/* 대형 워터마크 타이포 */
#mainUseCaseCon .main-tit-box::before{
	content: 'FIELD';
	position: absolute;
	top: 50%;
	right: -4rem;
	transform: translateY(-50%);
	font-size: clamp(18rem, 28vw, 44rem);
	font-weight: 900;
	font-family: 'Pretendard', sans-serif;
	color: rgba(247,242,233,0.038);
	letter-spacing: -0.04em;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 0;
}
#mainUseCaseCon .main-tit-box > *{ position: relative; z-index: 1; }
#mainUseCaseCon .main-tit-box .main-tit{ color: var(--silla-cream); }
#mainUseCaseCon .main-tit-box .main-sub-tit{ color: rgba(247,242,233,0.6); }
.main-usecase-cards{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.usecase-card{
	position: relative;
	height: 58vh;
	min-height: 460px;
	overflow: hidden;
}
.usecase-card-bg{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 115%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.usecase-card:hover .usecase-card-bg{ transform: scale(1.07); }
.usecase-card-overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(22, 11, 3, 0.9) 0%,
		rgba(22, 11, 3, 0.3) 55%,
		rgba(22, 11, 3, 0.08) 100%
	);
	transition: background 0.5s ease;
}
.usecase-card:hover .usecase-card-overlay{
	background: linear-gradient(
		to top,
		rgba(22, 11, 3, 0.96) 0%,
		rgba(22, 11, 3, 0.55) 60%,
		rgba(22, 11, 3, 0.18) 100%
	);
}
.usecase-card-body{
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 3.6rem 4rem;
	z-index: 2;
}
.usecase-tag{
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--silla-brown);
	background: var(--main-color);
	border: 1px solid var(--main-color);
	padding: 0.4rem 1.2rem;
	margin-bottom: 1.4rem;
}
.usecase-tit{
	font-size: 2.8rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.25;
}
.usecase-txt{
	margin-top: 1.2rem;
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.8;
	transform: translateY(10px);
	opacity: 0;
	transition: transform 0.45s ease, opacity 0.45s ease;
}
.usecase-card:hover .usecase-txt{
	transform: translateY(0);
	opacity: 1;
}
@media all and (max-width: 1280px){
	.main-usecase-cards{ grid-template-columns: repeat(2, 1fr); }
	.usecase-card:last-child{ grid-column: span 2; height: 40vh; }
}
@media all and (max-width: 800px){
	.main-usecase-cards{ grid-template-columns: 1fr; }
	.usecase-card,
	.usecase-card:last-child{
		grid-column: span 1;
		height: 56vh;
		min-height: 360px;
	}
	/* 모바일: hover 불가 → 텍스트 기본 노출 + overlay 짙게 */
	.usecase-txt{
		transform: translateY(0) !important;
		opacity: 1 !important;
	}
	.usecase-card-overlay{
		background: linear-gradient(
			to top,
			rgba(22, 11, 3, 0.96) 0%,
			rgba(22, 11, 3, 0.55) 60%,
			rgba(22, 11, 3, 0.18) 100%
		) !important;
	}
}

/* ===== How to Order 3단계 프로세스 ===== */
.order-steps{
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-top: 6rem;
	padding: 5rem 6rem;
	background: rgba(67,41,17,0.06);
	border-radius: 2rem;
	opacity: 1 !important;
	filter: none !important;
	pointer-events: auto !important;
}
.order-step{
	flex: 1;
	text-align: center;
	padding: 0 2rem;
}
.order-step-num{
	display: block;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	color: var(--main-color);
	margin-bottom: 1.6rem;
	font-family: 'Pretendard', sans-serif;
}
.order-step-tit{
	display: block;
	font-size: 2rem;
	font-weight: 700;
	color: var(--silla-brown);
	margin-bottom: 1.2rem;
	line-height: 1.3;
}
.order-step-txt{
	font-size: 1.5rem;
	color: rgba(67,41,17,0.65);
	line-height: 1.7;
}
.order-step-arrow{
	flex: none;
	font-size: 2.4rem;
	color: var(--main-color);
	margin-top: 3.2rem;
	padding: 0 1rem;
	opacity: 0.5;
}
@media all and (max-width: 800px){
	.order-steps{ flex-direction: column; align-items: center; padding: 4rem 3rem; gap: 2rem; }
	.order-step-arrow{ transform: rotate(90deg); margin: 0; }
	.order-step{ width: 100%; }
}

/* ===== Partners 마퀴 섹션 — 라이트 테마 ===== */
#mainPartnerCon{
	background: var(--silla-rice);
	padding: 14rem 0 12rem;
	border-top: 1px solid rgba(67,41,17,0.08);
}
#mainPartnerCon .main-tit-box .main-tit{ color: var(--silla-brown); }
#mainPartnerCon .main-tit-box .main-sub-tit{ color: rgba(67,41,17,0.6); }

/* 듀얼 마퀴 구조 */
.partner-marquee-outer{
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 6rem;
}
.partner-marquee-row{
	display: flex;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, var(--silla-rice) 8%, var(--silla-rice) 92%, transparent);
	mask: linear-gradient(90deg, transparent, var(--silla-rice) 8%, var(--silla-rice) 92%, transparent);
}
.partner-marquee-row:hover .partner-marquee-group{
	animation-play-state: paused;
}
.partner-marquee-group{
	display: flex;
	align-items: center;
	width: max-content;
	animation: partnerMarquee 30s linear infinite;
}
/* 두 번째 줄: 반대 방향 + 다른 속도 */
.partner-marquee-row--rev .partner-marquee-group{
	animation-name: partnerMarqueeRev;
	animation-duration: 38s;
}
@keyframes partnerMarquee{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
@keyframes partnerMarqueeRev{
	from{ transform: translateX(-50%); }
	to{ transform: translateX(0); }
}
.partner-marquee-item{
	display: flex;
	align-items: center;
	padding: 1.6rem 5rem;
	cursor: default;
}
.partner-marquee-item img{
	height: 4.5rem;
	width: auto;
	object-fit: contain;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}
.partner-marquee-row:hover .partner-marquee-item img{
	opacity: 1;
}
.partner-marquee-item::after{
	content: '';
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--main-color);
	margin-left: 5rem;
	opacity: 0.5;
	vertical-align: middle;
	flex-shrink: 0;
}
@media all and (max-width: 800px){
	#mainPartnerCon{ padding: 10rem 0 8rem; }
	.partner-marquee-item{ padding: 1.2rem 3rem; }
	.partner-marquee-item img{ height: 3.5rem; }
	.partner-marquee-item::after{ margin-left: 3rem; }
}

/* ===== Pain (공감) 섹션 ===== */
#mainPainCon{
	background: var(--silla-brown);
	padding: 8rem 0 7rem;
	margin-top: 100dvh;
	position: relative;
	overflow: hidden;
}
/* Product의 55vw 마진 제거 — 이제 Hero 바로 뒤가 아님 */
#mainPrdCon{ margin-top: 0 !important; padding-top: 10rem !important; }
.main-prd-con{ margin-top: 40px !important; }

/* 배경 앰비언트 광원 */
#mainPainCon::before{
	content: '';
	position: absolute;
	top: -20%;
	left: -15%;
	width: 55%;
	height: 140%;
	background: radial-gradient(ellipse, rgba(176,122,60,0.1) 0%, transparent 65%);
	animation: painGlow 9s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}
#mainPainCon::after{
	content: '';
	position: absolute;
	bottom: -10%;
	right: -10%;
	width: 45%;
	height: 80%;
	background: radial-gradient(ellipse, rgba(176,122,60,0.06) 0%, transparent 65%);
	animation: painGlow 9s 4.5s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}
@keyframes painGlow{
	0%  { transform: translate(0, 0) scale(1); }
	100%{ transform: translate(12%, 10%) scale(1.2); }
}

#mainPainCon .area{ position: relative; z-index: 1; }

/* 데코 넘버 */
.pain-num{
	position: absolute;
	right: -1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18rem;
	font-weight: 900;
	color: rgba(247,242,233,0.03);
	line-height: 1;
	letter-spacing: -0.05em;
	pointer-events: none;
	user-select: none;
	transition: color 1.2s ease;
}
.pain-line.animated .pain-num{ color: rgba(247,242,233,0.07); }

/* 섹션 도입 헤드라인 */
.pain-headline{
	font-size: 4.8rem;
	font-weight: 800;
	color: rgba(247,242,233,0.85);
	letter-spacing: 0.12em;
	margin-bottom: 5rem;
}

/* 라인 레이아웃 */
.pain-line{
	display: flex;
	align-items: center;
	gap: 4rem;
	padding: 3.2rem 0;
	position: relative;
	overflow: hidden;
}

/* 라인 슬라이드인 */
html:not(.no-js) .pain-line[data-scroll]{
	opacity: 0;
	transform: translateX(-70px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(.no-js) .pain-line[data-scroll].animated{
	opacity: 1;
	transform: translateX(0);
}
/* 스태거 딜레이 — pain-inner 기준 1번·3번·5번 자식 */
.pain-inner > .pain-line:nth-child(1){ transition-delay: 0s; }
.pain-inner > .pain-line:nth-child(3){ transition-delay: 0.2s; }
.pain-inner > .pain-line:nth-child(5){ transition-delay: 0.4s; }

/* 태그 */
.pain-tag{
	flex: none;
	width: 10rem;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--main-color);
	border: 1px solid rgba(176,122,60,0.45);
	padding: 0.5rem 1.4rem;
	text-align: center;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* 태그 등장 후 glow pulse */
.pain-line.animated .pain-tag{
	animation: tagGlow 0.7s 0.6s ease forwards;
}
@keyframes tagGlow{
	0%, 100%{ box-shadow: none; border-color: rgba(176,122,60,0.45); }
	50%     { box-shadow: 0 0 16px rgba(176,122,60,0.55); border-color: rgba(176,122,60,1); }
}

/* pain 콘텐츠 래퍼 */
.pain-content{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* 텍스트 롤업 */
.pain-stmt-outer{
	overflow: hidden;
}
.pain-stmt{
	font-size: 4.2rem;
	font-weight: 800;
	color: var(--silla-cream);
	line-height: 1.3;
	letter-spacing: -0.02em;
	transform: translateY(110%);
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.pain-line.animated .pain-stmt{
	transform: translateY(0);
}

/* 서브 문구 */
.pain-sub{
	font-size: 1.5rem;
	font-weight: 500;
	color: rgba(247,242,233,0.45);
	letter-spacing: 0.02em;
	line-height: 1.6;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s;
}
.pain-line.animated .pain-sub{
	opacity: 1;
	transform: translateY(0);
}



/* 구분선 sweep */
.pain-divider{
	height: 1px;
	background: rgba(247,242,233,0.15);
	width: 100%;
}
html:not(.no-js) .pain-divider[data-scroll]{
	opacity: 1 !important;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
html:not(.no-js) .pain-divider[data-scroll].animated{
	transform: scaleX(1);
}

/* CTA */
.pain-cta-line{
	padding-top: 8rem;
	text-align: center;
}
.pain-cta{
	font-size: 2.2rem;
	font-weight: 600;
	color: rgba(247,242,233,0.5);
	letter-spacing: 0.02em;
}
.pain-cta::after{
	content: ' →';
	color: var(--main-color);
	display: inline-block;
}
.pain-cta-line.animated .pain-cta::after{
	animation: arrowBounce 1.8s 0.8s ease-in-out infinite;
}
@keyframes arrowBounce{
	0%, 100%{ transform: translateX(0); }
	50%     { transform: translateX(8px); }
}

@media all and (max-width: 1280px){
	.pain-stmt{ font-size: 3.2rem; }
	.pain-num { font-size: 14rem; }
}
@media all and (max-width: 800px){
	#mainPainCon{ padding: 6rem 0 5rem; }
	.pain-line{ flex-direction: column; align-items: flex-start; gap: 1.4rem; padding: 3rem 0; }
	.pain-stmt{ font-size: 2.6rem; }
	.pain-cta{ font-size: 1.8rem; }
	.pain-num{ font-size: 10rem; top: auto; bottom: -1rem; right: 0; transform: none; }
	.pain-sub{ font-size: 1.4rem; }
	.pain-badge{ font-size: 1rem; }
}

/* ===== Strengths (강점) 섹션 — 라이트 테마 ===== */
#mainSolutionCon{
	background-color: #fff;
	background-image: radial-gradient(rgba(67,41,17,0.13) 1px, transparent 1px);
	background-size: 24px 24px;
	padding: 14rem 0 16rem;
}

/* 3열 그리드 — 세로 구분선 */
.sol-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 10rem;
	border-top: 1px solid rgba(67,41,17,0.1);
}
.sol-item{
	padding: 5rem 5rem 5rem 0;
	border-right: 1px solid rgba(67,41,17,0.1);
	position: relative;
}
.sol-item:nth-child(2){
	padding: 5rem 5rem;
}
.sol-item:last-child{
	padding: 5rem 0 5rem 5rem;
	border-right: none;
}

/* 위에서 아래로 낙하 (Pain의 왼→오와 반대) */
html:not(.no-js) .sol-item[data-scroll]{
	opacity: 0;
	transform: translateY(-45px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(.no-js) .sol-item[data-scroll].animated{
	opacity: 1;
	transform: translateY(0);
}
.sol-grid > .sol-item:nth-child(1){ transition-delay: 0s; }
.sol-grid > .sol-item:nth-child(2){ transition-delay: 0.18s; }
.sol-grid > .sol-item:nth-child(3){ transition-delay: 0.36s; }

/* 인덱스 */
.sol-index{
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--main-color);
	margin-bottom: 3rem;
}

/* 대형 스탯 */
.sol-stat-wrap{ margin-bottom: 3rem; }
html:not(.no-js) .sol-item[data-scroll] .sol-stat{
	display: block;
	font-size: clamp(3.2rem, 5.8vw, 9rem);
	white-space: nowrap;
	font-weight: 900;
	color: var(--silla-brown);
	line-height: 1;
	letter-spacing: -0.05em;
	transform: scale(0.82);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
	            opacity 0.9s ease 0.2s;
}
html:not(.no-js) .sol-item[data-scroll].animated .sol-stat{
	transform: scale(1);
	opacity: 1;
}

/* 스탯 하단 라인 sweep */
.sol-stat-line{
	height: 3px;
	width: 0;
	background: var(--main-color);
	margin-top: 2rem;
	transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}
.sol-item.animated .sol-stat-line{ width: 6rem; }

/* 제목 */
.sol-tit{
	font-size: 2rem;
	font-weight: 800;
	color: var(--silla-brown);
	line-height: 1.4;
	margin-bottom: 1.8rem;
}

/* 본문 */
.sol-txt{
	font-size: 1.45rem;
	color: rgba(67,41,17,0.6);
	line-height: 1.85;
}

@media all and (max-width: 1280px){
	.sol-grid{ grid-template-columns: repeat(2, 1fr); }
	.sol-item:nth-child(3){
		grid-column: span 2;
		border-right: none;
		border-top: 1px solid rgba(67,41,17,0.1);
		padding: 5rem 0;
	}
	.sol-stat{ font-size: clamp(2.8rem, 5vw, 7rem) !important; }
}
@media all and (max-width: 800px){
	/* 3열 유지 — 콤팩트 모드 */
	.sol-grid{
		grid-template-columns: repeat(3, 1fr);
		margin-top: 5rem;
	}
	.sol-item,
	.sol-item:nth-child(2),
	.sol-item:last-child{
		padding: 3rem 1.5rem 3rem 0;
		border-right: 1px solid rgba(67,41,17,0.1);
		border-top: none;
		grid-column: span 1;
	}
	.sol-item:nth-child(2){ padding: 3rem 1.5rem; }
	.sol-item:last-child{ border-right: none; padding-right: 0; padding-left: 1.5rem; }
	.sol-stat{ font-size: 4rem !important; letter-spacing: -0.03em; }
	.sol-stat-line{ margin-top: 1rem; }
	.sol-stat-wrap{ margin-bottom: 1.5rem; }
	.sol-index{ font-size: 1.3rem; margin-bottom: 1.5rem; }
	.sol-tit{ font-size: 1.6rem; margin-bottom: 0.5rem; line-height: 1.4; }
	.sol-txt{ display: none; }
}

/* By Numbers position:relative (워터마크 제거 후에도 필요) */
#mainStatsCon{ position: relative; overflow: hidden; }

/* ===================================================
   By Numbers — 다크 테마 전환 + biz_01 배경 복구
   =================================================== */
#mainStatsCon{ background: var(--silla-brown) !important; }
.main-stats-scroll{ display: block; }
#mainStatsCon::after{ display: none; }
#mainStatsCon .main-tit-box .main-tit{ color: var(--silla-cream); }
#mainStatsCon .main-tit-box .main-sub-tit{ color: rgba(247,242,233,0.75); }
/* 텍스트 색상·가시성 */
.stats-idx{ color: rgba(247,242,233,0.5); font-size: 1.3rem; }
.stats-num{ color: var(--silla-cream); }
.stats-unit{ color: var(--silla-cream); }
.stats-lbl{ color: rgba(247,242,233,0.7); font-size: 1.5rem; border-top-color: rgba(247,242,233,0.12); }
.main-stats-grid{ border-top-color: rgba(247,242,233,0.1); }
.stats-item{ border-color: rgba(247,242,233,0.1); }
@media all and (max-width: 1280px){
	/* 2x2 첫 번째 셀 왼쪽 패딩 복구 */
	.stats-item:first-child{ padding-left: 4rem; }
	.stats-item{ border-top-color: rgba(247,242,233,0.1); }
	.stats-item:nth-child(odd){ border-right-color: rgba(247,242,233,0.1); }
}
@media all and (max-width: 800px){
	.stats-idx{ font-size: 1.4rem; }
	.stats-lbl{ font-size: 1.6rem; }
}


/* ===================================================
   현장의 목소리 — 에디토리얼 교차 레이아웃
   =================================================== */
#mainCaseCon{
	background: var(--silla-brown);
	padding: 14rem 0 0;
	overflow: hidden;
}
#mainCaseCon .case-tit-box .main-tit{ color: var(--silla-cream); }
#mainCaseCon .case-tit-box .main-sub-tit{ color: rgba(247,242,233,0.55); }

/* 행 컨테이너 */
.case-rows{
	margin-top: 8rem;
	border-top: 1px solid rgba(247,242,233,0.1);
}

/* 개별 행 — 2열: 텍스트 | 이미지 */
.case-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 52vh;
	border-bottom: 1px solid rgba(247,242,233,0.1);
	position: relative;
}

/* 짝수 행: 이미지를 왼쪽으로 */
.case-row--rev .case-row-img{ order: -1; }

/* 텍스트 패널 */
.case-row-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 6rem 7rem;
	position: relative;
	z-index: 1;
}

/* 배경 번호 워터마크 */
.case-row-text::before{
	content: attr(data-num);
	position: absolute;
	right: 3rem;
	bottom: -2rem;
	font-size: 22rem;
	font-weight: 900;
	font-family: 'Pretendard', sans-serif;
	color: rgba(247,242,233,0.03);
	line-height: 1;
	letter-spacing: -0.05em;
	pointer-events: none;
	user-select: none;
}

/* 번호 */
.case-row-num{
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(247,242,233,0.28);
	margin-bottom: 2rem;
}

/* 카테고리 태그 */
.case-row-tag{
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--silla-brown);
	background: var(--main-color);
	padding: 0.45rem 1.4rem;
	margin-bottom: 3.5rem;
	align-self: flex-start;
}

/* 대형 인용 텍스트 */
.case-row-quote{
	font-size: clamp(2.8rem, 3.2vw, 4.2rem);
	font-weight: 800;
	color: var(--silla-cream);
	line-height: 1.35;
	letter-spacing: -0.03em;
	margin: 0 0 2.8rem;
	quotes: none;
	word-break: keep-all;
}

/* 설명 */
.case-row-desc{
	font-size: 1.5rem;
	color: rgba(247,242,233,0.5);
	line-height: 1.85;
}

/* 이미지 패널 */
.case-row-img{
	position: relative;
	overflow: hidden;
	min-height: 400px;
}

/* 이미지 인너 */
.case-row-img-inner{
	position: absolute;
	inset: -8% 0;
	background-size: cover;
	background-position: 50% 40%;
	background-repeat: no-repeat;
	transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            filter 0.8s ease;
	filter: brightness(0.75) saturate(0.85);
}
.case-row:hover .case-row-img-inner{
	transform: scale(1.04);
	filter: brightness(0.9) saturate(1);
}

/* 이미지 패널 사이드 그라디언트 (텍스트 쪽으로 블렌딩) */
.case-row-img::after{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
/* 텍스트가 오른쪽 → 이미지 왼쪽 끝을 어둡게 */
.case-row--rev .case-row-img::after{
	background: linear-gradient(to left, rgba(67,41,17,0.6) 0%, transparent 35%);
}
/* 텍스트가 왼쪽 → 이미지 오른쪽 끝을 어둡게 */
.case-row:not(.case-row--rev) .case-row-img::after{
	background: linear-gradient(to right, rgba(67,41,17,0.6) 0%, transparent 35%);
}

/* 스크롤 등장 애니메이션 — 분리된 텍스트/이미지 연출 */

/* 행 컨테이너: 구분선 성장 효과 */
html:not(.no-js) .case-row[data-scroll]{
	opacity: 1;
	transform: none;
	transition: none;
}

/* 텍스트 패널 — 좌측에서 슬라이드인 */
html:not(.no-js) .case-row[data-scroll] .case-row-text{
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s,
	            transform 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
/* 역방향 행 텍스트 — 우측에서 슬라이드인 */
html:not(.no-js) .case-row--rev[data-scroll] .case-row-text{
	transform: translateX(60px);
}

/* 이미지 패널 — 클립패스 와이프 (바깥 → 안쪽) */
html:not(.no-js) .case-row[data-scroll] .case-row-img{
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s cubic-bezier(0.16,1,0.3,1) 0s;
}
html:not(.no-js) .case-row--rev[data-scroll] .case-row-img{
	clip-path: inset(0 0 0 100%);
}

/* 태그 칩 */
html:not(.no-js) .case-row[data-scroll] .case-row-tag{
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease 0s, transform 0.55s ease 0s;
}
/* 인용문 */
html:not(.no-js) .case-row[data-scroll] .case-row-quote{
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.65s ease 0s, transform 0.65s cubic-bezier(0.16,1,0.3,1) 0s;
}
/* 설명 */
html:not(.no-js) .case-row[data-scroll] .case-row-desc{
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease 0s, transform 0.55s ease 0s;
}

/* === animated 상태 === */
html:not(.no-js) .case-row[data-scroll].animated .case-row-text{
	opacity: 1;
	transform: translateX(0);
}
html:not(.no-js) .case-row[data-scroll].animated .case-row-img{
	clip-path: inset(0 0% 0 0);
}
html:not(.no-js) .case-row--rev[data-scroll].animated .case-row-img{
	clip-path: inset(0 0 0 0%);
}
html:not(.no-js) .case-row[data-scroll].animated .case-row-tag{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.35s;
}
html:not(.no-js) .case-row[data-scroll].animated .case-row-quote{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.52s;
}
html:not(.no-js) .case-row[data-scroll].animated .case-row-desc{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.72s;
}

/* 반응형 */
@media all and (max-width: 1280px){
	.case-row-text{ padding: 5rem; }
	.case-row-quote{ font-size: 3rem; }
}
@media all and (max-width: 800px){
	#mainCaseCon{ padding-top: 10rem; }
	.case-row,
	.case-row--rev{
		grid-template-columns: 1fr;
		min-height: auto;
	}
	/* 모바일: 이미지 항상 위 */
	.case-row-img{ order: -1; min-height: 280px; }
	.case-row--rev .case-row-img{ order: -1; }
	.case-row-img-inner{ inset: 0; filter: brightness(0.8) saturate(0.9); }
	.case-row-img::after,
	.case-row--rev .case-row-img::after{
		background: linear-gradient(to bottom, transparent 60%, rgba(67,41,17,0.8) 100%);
	}
	.case-row-text{ padding: 4rem 3rem 5rem; }
	.case-row-text::before{ font-size: 14rem; right: 1rem; bottom: -1rem; }
	.case-row-quote{ font-size: 2.4rem; }
	.case-row-desc{ font-size: 1.6rem; }
}

/* ============================================================
   Floating CTA — pulse + 텍스트 상시 노출
   ============================================================ */
@keyframes ctaPulse {
	0%   { transform: scale(1);   opacity: 0.65; }
	100% { transform: scale(2.6); opacity: 0; }
}
.main-visual-inquiry-box .icon-box { position: relative; }
.main-visual-inquiry-box .icon-box::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--main-color);
	animation: ctaPulse 2s ease-out infinite;
	pointer-events: none;
	z-index: -1;
}
/* 데스크톱: 텍스트 항상 노출 + 밝은 섹션에서도 가시성 확보 */
@media all and (min-width: 801px) {
	.main-visual-inquiry-box a {
		padding-left: 20rem !important;
		transition-delay: 0s !important;
		background: rgba(67, 41, 17, 0.35) !important;
		backdrop-filter: blur(10px);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	}
	.main-visual-inquiry-box a .txt {
		opacity: 1 !important;
		transition-delay: 0s !important;
	}
	.main-visual-inquiry-box a:hover { padding-left: 20rem !important; }
}

/* ============================================================
   인라인 CTA 배너 (도입 후기 직후)
   ============================================================ */
.sample-mid-cta {
	background: var(--silla-brown);
	padding: 5rem 0;
}
.sample-mid-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}
.sample-mid-cta-txt {
	color: var(--silla-cream);
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}
.sample-mid-cta-btn {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	background: var(--main-color);
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	padding: 1.6rem 3.2rem;
	border-radius: 10rem;
	transition: background 0.2s, transform 0.2s;
	white-space: nowrap;
}
.sample-mid-cta-btn:hover {
	background: #c85a00;
	transform: translateY(-2px);
}
@media all and (max-width: 800px) {
	.sample-mid-cta-inner { flex-direction: column; align-items: flex-start; }
	.sample-mid-cta-txt { font-size: 2.2rem; }
	.sample-mid-cta-btn { font-size: 1.6rem; padding: 1.4rem 2.8rem; }
}

/* ============================================================
   샘플 프로세스 섹션
   ============================================================ */
.sample-process-con { padding: 12rem 0 6rem; background: var(--silla-cream); }
.sample-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: 7rem;
}
.sample-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	max-width: 28rem;
	padding: 4rem 2rem;
	background: #fff;
	border-radius: 1.6rem;
	box-shadow: 0 4px 24px rgba(67,41,17,0.08);
}
.sample-step-num {
	font-size: 4rem;
	color: var(--main-color);
	font-weight: 700;
	line-height: 1;
	margin-bottom: 1.6rem;
}
.sample-step-tit {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--silla-brown);
	margin-bottom: 1.2rem;
}
.sample-step-desc {
	font-size: 1.5rem;
	color: #7a6651;
	line-height: 1.7;
}
.sample-step-arrow {
	font-size: 2.4rem;
	color: var(--main-color);
	padding: 0 2rem;
	flex-shrink: 0;
}
.sample-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 4rem;
	flex-wrap: wrap;
}
.sample-badge {
	display: inline-block;
	padding: 0.8rem 2rem;
	border: 1.5px solid var(--main-color);
	border-radius: 10rem;
	color: var(--main-color);
	font-size: 1.5rem;
	font-weight: 600;
}
.sample-mobile-cta { display: none; }

@media all and (max-width: 800px) {
	.sample-process-con { padding: 8rem 0; }
	.sample-steps { flex-direction: column; gap: 1.5rem; padding: 0 2rem; }
	.sample-step { max-width: 100%; width: 100%; }
	.sample-step-arrow { transform: rotate(90deg); padding: 0; }
	.main-inquiry-scroll { display: none; }
}