@charset "utf-8";
/* ============================================================
   main_page.css — 메인 페이지(www/index.jsp) 전용 스타일
   - 모든 선택자를 .main-page 로 스코프 한정 (다른 페이지 오염 방지)
   - 헤더/푸터/상담 CTA 등 공통 요소는 www/css/site.css
   ============================================================ */

/* 헤더는 position:fixed 라 body 상단 여백이 반드시 있어야 본문이 가려지지 않는다.
   site.css 에 같은 선언이 있으나 다른 CSS 에 밀리는 경우가 있어, 가장 늦게 로드되는
   이 파일에서 한 번 더 못박는다. (값이 같으므로 중복 선언은 무해) */
body{padding-top:var(--header-h);}

.main-page{display:block;}
.main-page *,.main-page *::before,.main-page *::after{box-sizing:border-box;}
.main-page img{max-width:100%; display:block;}
.main-page ul{margin:0; padding:0; list-style:none;}
.main-page button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit;}
.main-page :focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;}
@media (prefers-reduced-motion:reduce){
	.main-page *{animation:none !important; transition:none !important;}
}

/* ============================================================
   타이포그래피 — 값은 site.css 의 :root 토큰이 단일 원본이다.
   여기서는 숫자를 직접 적지 않고 아래 토큰만 참조한다.
     히어로 H1 --fs-h1 / --fw-h1 / --lh-h1 / --ls-h1
     섹션 H2   --fs-h2 …   카드 제목 --fs-card …
     본문      --fs-body … 메뉴 --fs-menu …   버튼 --fs-btn …
     주요 수치 --fs-num …  보조(메타·캡션) --fs-meta …
   ★ 같은 등급은 반드시 같은 토큰을 쓴다. 한 곳만 다른 숫자를 쓰면 통일이 깨진다.
   ★ 반응형 축소도 site.css 의 :root 미디어쿼리에서 일괄 처리하므로,
     이 파일의 미디어쿼리에서 font-size 를 다시 선언하지 않는다.
     (본문·메뉴·버튼은 PC 16px / 모바일 640px 이하 14px)
   ============================================================ */

/* ---------- 공통 섹션 ---------- */
.main-page section{padding:100px 0;}
.main-page .sec-alt{background:var(--bg-alt);}
/* 섹션 H2 (메인의 모든 섹션 제목이 이 하나를 공유한다) */
.main-page .sec-title{
	font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
	text-align:center; margin:0 0 44px; word-break:keep-all; overflow-wrap:break-word;
}
.main-page .sec-title .br{display:block;}
/* 섹션 제목 위 소제목(eyebrow) — 표에 없는 보조 라벨이라 메뉴 스펙을 따른다 */
.main-page .sec-title .eyebrow{
	display:block; margin-bottom:clamp(8px,1vw,14px);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}

/* ---------- 히어로 : 화면 전체 폭 영상 + 좌측 카피 ----------
   입주·이사·거주청소 페이지 히어로(service_cleaning.css 의 .cl-hero)와 같은 높이·딤드·글자 등급을 쓴다 */
.main-page .hero{padding:0;}
.main-page .hero-banner{
	position:relative; display:flex; align-items:center; overflow:hidden;
	min-height:clamp(520px,42vw,760px); background:#0d1322;
}
.main-page .hero-banner video,
.main-page .hero-banner .hero-img{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; object-position:center; z-index:1;
	pointer-events:none;
}
/* 흰 카피의 가독성 : 전체에 옅은 딤을 깔고, 카피가 놓이는 왼쪽을 그라데이션으로 더 어둡게 한다 */
.main-page .hero-banner::before{
	content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
	background:
		linear-gradient(90deg,rgba(8,12,24,.58) 0%,rgba(8,12,24,.42) 34%,rgba(8,12,24,.14) 60%,rgba(8,12,24,0) 82%),
		linear-gradient(rgba(8,12,24,.14),rgba(8,12,24,.14));
}
.main-page .hero-banner > .wrap{position:relative; z-index:3; width:100%;}
.main-page .hero-copy{max-width:min(640px,58%); text-shadow:0 1px 14px rgba(0,0,0,.35);}
/* 어두운 배경에서는 브랜드 색이 묻히므로 한 톤 밝힌 값을 쓴다 */
.main-page .hero-eyebrow{
	margin:0 0 clamp(14px,1.6vw,22px); color:#6CCBF2;
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:.16em;
}
.main-page .hero-h1{
	margin:0; color:#fff;
	font-size:var(--fs-h1); font-weight:var(--fw-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1);
}
.main-page .hero-h1 em{font-style:normal; color:#6CCBF2;}
.main-page .hero-desc{
	margin:clamp(22px,2.6vw,36px) 0 0; color:rgba(255,255,255,.86);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:1.85; letter-spacing:var(--ls-body);
}

/* ---------- 서비스 2종 (바깥 패널 없이 연한 파랑 카드 2장) ---------- */
/* 상하 여백만 지정 — padding 단축 선언을 쓰면 .wrap 의 좌우 28px 이 지워져 폭이 어긋난다.
   위쪽은 히어로가 화면 끝까지 차므로 패널과 붙어 보이지 않게 벌린다 */
.main-page .svc-wrap{padding-top:clamp(24px,3vw,44px); padding-bottom:90px;}
.main-page .svc{
	display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,40px);
}
/* 제목이 22~25px 로 커져 텍스트 열을 사진 열보다 넓게 잡는다(제목 한 줄 유지) */
.main-page .svc-card{
	display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:stretch;
	background:linear-gradient(135deg,#F1F8FD 0%,#E1F0FA 100%);
	border:1px solid #D3E7F5; border-radius:16px; overflow:hidden;
	box-shadow:0 6px 18px rgba(34,158,212,.08); transition:transform .18s,box-shadow .18s;
}
.main-page .svc-card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(34,158,212,.18);}
/* 텍스트 블록은 상단부터 채우고 버튼은 하단에 고정 */
.main-page .svc-body{
	display:flex; flex-direction:column; justify-content:flex-start;
	padding:clamp(20px,2.2vw,32px) clamp(16px,1.8vw,28px);
}
/* 카드 제목 */
.main-page .svc-tit{
	display:flex; align-items:center; gap:11px; margin:0; color:var(--ink);
	font-size:var(--fs-card); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
}
/* 아이콘 배지 — 파랑 카드 위에서 묻히지 않게 흰 배지 + 브랜드색 라인 아이콘 */
.main-page .svc-ic{
	flex:0 0 auto; width:clamp(30px,2.4vw,36px); height:clamp(30px,2.4vw,36px);
	border-radius:12px; background-color:#fff;
	background-repeat:no-repeat; background-position:center; background-size:56%;
}
.main-page .svc-ic.ic-home{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.8V20h14V9.8'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}
.main-page .svc-ic.ic-aircon{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='8' rx='2.4'/%3E%3Cpath d='M6.5 9h11'/%3E%3Cpath d='M8 15c0 2-1.5 2.4-1.5 4'/%3E%3Cpath d='M12 15c0 2-1.5 2.4-1.5 4'/%3E%3Cpath d='M16 15c0 2-1.5 2.4-1.5 4'/%3E%3C/svg%3E");
}
/* 본문 — 남은 공간을 채워 하단 버튼의 높이를 양쪽 카드 동일하게 일치.
   아래 여백은 본문이 가장 긴 카드에서도 버튼과의 최소 간격을 보장한다
   (두 카드는 같은 그리드 행이라 함께 늘어나므로 버튼 높이는 계속 맞는다) */
.main-page .svc-desc{
	margin:clamp(14px,1.5vw,22px) 0 clamp(22px,2.2vw,32px); color:var(--ink-2); flex:1 1 auto;
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 자세히 보기 — 텍스트는 왼쪽, 화살표는 오른쪽 끝에 두는 pill 버튼
   버튼 글자가 16px 고정이므로 pill 크기(높이 48px)도 사이트 전 버튼과 동일하게 고정한다
   margin-top: auto 로 카드가 늘어나도 버튼이 항상 최하단에 정렬된다 */
/* 문구 줄바꿈을 PC/모바일에 따라 다르게 — m-br·m-only 는 모바일에서만, pc-br 은 PC 에서만 노출 */
.main-page .svc-desc .m-br,
.main-page .svc-desc .m-only,
.main-page .blogs .sec-desc .m-br{display:none;}
.main-page .svc-btn{
	margin-top:auto; align-self:flex-start;
	display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
	min-width:172px; height:48px; padding:0 22px; border-radius:999px;
	background:var(--brand); color:#fff;
	font-size:var(--fs-btn); font-weight:var(--fw-btn); line-height:var(--lh-btn); letter-spacing:var(--ls-btn);
	transition:background .15s; white-space:nowrap;
}
.main-page .svc-btn::after{
	content:""; width:15px; height:15px; flex:0 0 15px;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.main-page .svc-btn:hover{background:var(--brand-dark); color:#fff;}
/* 카드 우측 사진 — 텍스트 블록 높이에 맞춰 채우고, 왼쪽 경계는 카드 배경(파랑)으로 부드럽게 흘린다.
   배경을 투명하게 둬야 페이드 구간에 카드 그라데이션이 그대로 비친다 */
.main-page .svc-thumb{position:relative; min-height:clamp(190px,16vw,250px); background:transparent;}
.main-page .svc-thumb::after{display:none;}	/* placeholder 라벨 미노출 */
.main-page .svc-thumb img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 17%);
	mask-image:linear-gradient(90deg,transparent 0,#000 17%);
}

/* 대표 인터뷰("홈 서비스의 기준") 상단 여백 — 공통 section 100px 보다 좁힌다.
   모바일(640px 이하) 값은 아래 미디어쿼리가 덮어쓰도록 그보다 앞에 둔다 */
.main-page .interview-sec{padding-top:50px;}

@media (max-width:1080px){
	.main-page .svc{grid-template-columns:1fr;}
	/* 글자 크기는 site.css 의 :root 토큰이 이미 줄여 준다 — 여기서는 배치만 조정 */
	.main-page .hero-copy{max-width:min(640px,72%);}
}
@media (max-width:900px){
	.main-page .hero-banner{min-height:clamp(440px,64vw,560px);}
	.main-page .hero-copy{max-width:none;}
	/* 카피가 영상 전체 폭에 걸치므로 딤드를 세로 그라데이션으로 바꾸고 전체를 조금 더 어둡게 한다 */
	.main-page .hero-banner::before{
		background:
			linear-gradient(180deg,rgba(8,12,24,.52) 0%,rgba(8,12,24,.36) 46%,rgba(8,12,24,.12) 78%,rgba(8,12,24,0) 100%),
			linear-gradient(rgba(8,12,24,.2),rgba(8,12,24,.2));
	}
}
@media (max-width:640px){
	/* 모바일에서도 서비스 2종은 한 줄에 나란히 둔다(1080px 이하의 1열을 되돌린다).
	   카드 폭이 화면의 절반(360px 기준 약 137px)이 되므로 카드 내부 요소를 전부 축소한다. */
	.main-page .svc{grid-template-columns:repeat(2,1fr); gap:10px;}
	.main-page .svc-card{display:flex; flex-direction:column; border-radius:12px;}
	.main-page .svc-body{order:2; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; padding:12px 10px 14px;}
	/* 세로 스택에서는 사진이 위로 오므로 왼쪽 페이드를 해제한다 */
	.main-page .svc-thumb{order:1; flex:0 0 auto; min-height:0; aspect-ratio:4/3; width:100%;}
	.main-page .svc-thumb img{-webkit-mask-image:none; mask-image:none;}
	/* 좁은 카드에서 아이콘을 제목 옆에 두면 제목이 3~4줄로 접힌다 → 아이콘을 제목 위로 올린다 */
	.main-page .svc-tit{display:block; font-size:14px; line-height:1.35; word-break:keep-all;}
	.main-page .svc-ic{display:block; width:26px; height:26px; border-radius:9px; margin-bottom:8px;}
	.main-page .svc-desc{margin-top:8px; margin-bottom:12px; font-size:12px; line-height:1.55; word-break:keep-all; flex:1 1 auto;}
	.main-page .svc-desc .m-br,
	.main-page .svc-desc .m-only,
	.main-page .blogs .sec-desc .m-br{display:inline;}
	.main-page .svc-desc .pc-br{display:none;}
	/* pill 버튼은 최소폭 172px 이라 카드 밖으로 넘친다 → 카드 폭에 맞춰 꽉 채운다 */
	.main-page .svc-btn{
		margin-top:auto; align-self:stretch; width:100%; min-width:0;
		height:36px; padding:0 12px; gap:6px; font-size:12px;
	}
	.main-page .svc-btn::after{width:12px; height:12px; flex-basis:12px;}
	.main-page .svc-wrap{padding-top:18px; padding-bottom:56px;}

	/* ---------- 대표 인터뷰 섹션 모바일 ---------- */
	.main-page .interview-sec{padding:54px 0 60px;}
	/* 크기/행간/자간은 공통 .sec-title(--fs-h2) 그대로 — "생생한 홈서비스스토리" 제목과 같은 크기를 유지한다 */
	.main-page .interview-title{
		margin-bottom:12px;
		word-break:keep-all;
	}
	.main-page .interview-title .tit-main{display:block;}
	.main-page .interview-title .tit-point{
		margin-top:4px;
		display:block;
		word-break:keep-all;
	}
	.main-page .interview-desc{
		font-size:13.5px;
		line-height:1.65;
		margin:0 auto 24px;
		padding:0 8px;
		letter-spacing:-.025em;
		word-break:keep-all;
	}
	.main-page .interview-desc span{display:inline-block;}
}

/* ---------- 대표 인터뷰 영상 (제목 아래 영상) ---------- */
.main-page .video-box{
	max-width:1360px; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
	aspect-ratio:16/9; background:var(--navy);
}
.main-page .video-box video{width:100%; height:100%; object-fit:cover; display:block;}
.main-page .video-box iframe{width:100%; height:100%; border:0; display:block;}

/* 배경 사진 — 섹션보다 사진이 낮은 경우를 대비해 사진 평균색을 배경색으로 함께 깐다 */
.main-page .interview-sec{background:#E7F0F8 url("/img/main_own_bg1.png") center/cover no-repeat;}
/* 배경이 밝은 사진이라 제목은 흰색이 아니라 본문 잉크색으로 둔다 */
.main-page .interview-sec .sec-title{color:var(--ink);}
/* 밝은 배경 위에서는 짙은 그림자가 얼룩처럼 보여 한 단계 옅게 준다 */
/* 영상 로딩 중에는 흰 바탕 가운데 로고를 보여주고, 영상 프레임이 뜨면 그 위를 덮는다 */
.main-page .interview-sec .video-box{background:#fff url("/img/logo1.webp") center/auto 45% no-repeat; box-shadow:0 18px 44px rgba(24,34,66,.20);}

/* 구성 : 큰 제목 2행 + 서브 카피가 위 가운데, 그 아래 영상. (다른 섹션과 달리 소제목(eyebrow) 없음)
   제목의 크기·굵기·행간·자간·정렬은 공통 .sec-title 규칙 그대로 — 여기서는 색과 여백만 정한다. */
/* 아래에 서브 카피가 붙으므로 제목의 기본 아래 여백(44px)을 줄인다 */
.main-page .interview-title{margin-bottom:clamp(14px,1.6vw,20px); word-break:keep-all; overflow-wrap:break-word;}
.main-page .interview-title .tit-main{display:block;}
/* 큰 제목 둘째 행 — 배경이 하늘색 사진이라 --brand 는 묻혀서 한 단계 짙은 --brand-dark 를 쓴다 */
.main-page .interview-title .tit-point{display:block; color:var(--brand-dark); word-break:keep-all;}
/* 서브 카피 : 본문 타이포 그대로, 마지막 줄만 굵게 받아 문장을 맺는다 */
.main-page .interview-desc{
	max-width:min(880px,94%); margin:0 auto clamp(30px,3.6vw,50px); text-align:center; color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:-.03em;
	word-break:keep-all; overflow-wrap:break-word;
}
.main-page .interview-desc strong{font-weight:700; color:var(--ink);}
.main-page .interview-desc span{display:inline-block;}

/* ---------- 고객 이야기 (쇼츠 캐러셀) ---------- */
/* 시안 기준 : 배경 장식 없는 흰 바탕 + 세로 쇼츠 카드가 가운데를 크게 두고 좌우로 흐른다 */
.main-page .stories{position:relative; padding:clamp(40px,4vw,56px) 0 clamp(70px,8vw,110px); background:#fff; overflow:hidden;}
.main-page .stories .wrap{position:relative; z-index:1;}

/* 제목 : 상단 짧은 라인 + 작은 소제목 + 큰 제목(끝 단어만 브랜드색) */
/* 크기/굵기/행간/자간은 .sec-title(섹션 H2) 그대로 — 여백과 장식만 더한다 */
.main-page .stories-title{
	position:relative; margin-bottom:clamp(30px,3.6vw,52px); padding-top:clamp(20px,2.2vw,32px);
}
.main-page .stories-title::before{
	content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
	width:34px; height:3px; border-radius:2px; background:var(--brand);
}
.main-page .stories-title .eyebrow{color:var(--ink-2);}	/* 타이포는 공통 .sec-title .eyebrow */
/* 클래스명 주의 : .hl 은 summernote-ext-table.css 가 display:none 으로 쓰고 있어 사용 금지 */
/* JSP 컴파일(trimSpaces)에서 앞 단어와의 공백이 사라져 "홈서비스스토리" 로 붙으므로 여백을 CSS 로 확보 */
.main-page .stories-title .tit-point{color:var(--brand); margin-left:.26em;}

/* 캐러셀 틀 — .wrap 밖에 있어 화면 폭을 그대로 쓴다(좌우 화살표를 컨텐츠 폭 바깥에 두기 위함).
   카드 위치·폭·높이는 index.jsp 의 스크립트가 계산해 인라인으로 넣는다.
   보이는 카드 5장의 총 가로는 헤더와 같은 컨텐츠 폭(.wrap 안쪽)에 맞춰진다.
   (한 번에 5장 : 가운데 1 → 양옆 .72 → 그 옆 .68 배, 카드 사이 간격은 항상 20px.
    .63 단계는 화면 밖에서 대기하다 반대편으로 넘어오는 카드에만 쓰인다)
   ★ 여기서 카드에 width/height/left 를 다시 선언하면 그 계산을 덮어쓴다. */
.main-page .stories-slider{position:relative; width:100%; padding:clamp(14px,1.8vw,26px) 0;}
/* 스크립트가 켜지기 전(또는 JS 미동작)에는 가로 나열로만 보이게 둔다.
   z-index 를 주어 트랙 전체를 한 겹으로 묶는다 — 안 그러면 카드 각각의 z-index 가
   좌우 흰색 페이드(z-index:5)보다 위로 올라와 페이드가 먹지 않는다 */
.main-page .stories-track{
	position:relative; z-index:1; width:100%;
	display:flex; gap:20px; justify-content:center; overflow:hidden;
	/* 스크립트가 높이를 못 정하는 상황에서도 카드 영역이 사라지지 않도록 하는 최소 높이.
	   정상 동작 시에는 스크립트가 넣는 height(약 410~600px)가 이 값보다 커서 영향이 없다 */
	min-height:clamp(300px,26vw,380px);
}
.main-page .stories-track .story{flex:0 0 clamp(180px,13vw,240px); aspect-ratio:.68/1;}
/* 스크립트가 켜지면 절대 배치로 전환 */
.main-page .stories-track.js-on{display:block; overflow:visible;}
.main-page .stories-track.js-on .story{
	position:absolute; top:0; left:0; flex:none; aspect-ratio:auto;
	transition:left .52s cubic-bezier(.22,.61,.36,1),
	           top .52s cubic-bezier(.22,.61,.36,1),
	           width .52s cubic-bezier(.22,.61,.36,1),
	           height .52s cubic-bezier(.22,.61,.36,1),
	           opacity .38s ease,box-shadow .38s ease;
}

.main-page .story{
	position:relative; border-radius:18px; overflow:hidden;
	display:block; text-align:left;
	/* 사진이 아직 없을 때 보이는 바탕 — 레퍼런스 사진 톤에 맞춘 중성 회색 */
	background:linear-gradient(160deg,#DCE1E7 0%,#C6CDD6 54%,#B2BAC5 100%);
	box-shadow:0 8px 22px rgba(24,34,66,.14);
}
.main-page .story .sthumb,
.main-page .story .svideo{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block;}
/* 아래쪽 문구가 읽히도록 하단 위주로 어둡게 (위쪽 사진은 살린다) */
.main-page .story .scrim{
	position:absolute; inset:0; z-index:2;
	background:linear-gradient(180deg,rgba(24,34,66,.20) 0%,rgba(24,34,66,0) 32%,rgba(24,34,66,.26) 58%,rgba(24,34,66,.74) 100%);
}
/* 재생 버튼 : 카드 중앙, 흰 원 + 브랜드색 삼각형 */
.main-page .story .play{
	position:absolute; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%);
	width:20%; max-width:56px; aspect-ratio:1/1; border-radius:50%; background:#fff;
	display:grid; place-items:center; box-shadow:0 6px 16px rgba(24,34,66,.28);
	transition:transform .2s,opacity .3s;
}
.main-page .story:hover .play{transform:translate(-50%,-50%) scale(1.08);}
.main-page .story.is-playing .play{opacity:0; pointer-events:none;}
.main-page .story.is-playing:hover .play{opacity:.85; pointer-events:auto;}
.main-page .story .play::before{
	content:""; width:0; height:0; margin-left:16%;
	border-left:13px solid var(--brand);
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
}
/* 카드 문구 : 하단 좌측 2줄 (제목 = 카드 제목 / 부제 = 본문) */
.main-page .story .cap{position:absolute; z-index:4; left:9%; right:9%; bottom:8%; display:block; color:#fff;}
/* 좌우 카드는 폭이 좁으므로 문구도 한 단계 작게, 가운데 카드만 정규 크기로 */
.main-page .story .cap-tit{
	display:block; text-shadow:0 2px 10px rgba(0,0,0,.45); transition:font-size .4s ease;
	font-size:calc(var(--fs-card) * .78);
	font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
}
.main-page .story.is-active .cap-tit{font-size:var(--fs-card);}
.main-page .story .cap-sub{
	display:block; margin-top:2px; color:rgba(255,255,255,.94);
	text-shadow:0 2px 10px rgba(0,0,0,.45); transition:font-size .4s ease;
	font-size:var(--fs-meta); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
.main-page .story.is-active .cap-sub{font-size:var(--fs-body);}

/* 좌우 끝 카드는 흰 배경으로 흘려 잘린 느낌을 없앤다 (네비 버튼보다 아래 z-index) */
.main-page .stories-slider::before,
.main-page .stories-slider::after{
	content:""; position:absolute; top:0; bottom:0; z-index:5; pointer-events:none;
	width:clamp(90px,14vw,280px);
}
.main-page .stories-slider::before{left:0; background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0));}
.main-page .stories-slider::after{right:0; background:linear-gradient(270deg,#fff 30%,rgba(255,255,255,0));}

/* 좌우 네비 : 흰 원 + 브랜드색 화살표
   ★ left/right 는 스크립트가 바깥 카드 모서리에 맞춰 인라인으로 다시 넣는다.
      아래 clamp 값은 스크립트가 동작하기 전(또는 JS 미동작) 폴백용이다. */
.main-page .stories-nav{
	position:absolute; top:50%; transform:translateY(-50%); z-index:6;
	/* 카드 가운데 재생 버튼(흰 원)과 크기가 비슷하면 둘이 헷갈리므로 한 단계 작게 잡는다 */
	width:clamp(40px,2.8vw,50px); height:clamp(40px,2.8vw,50px); border-radius:50%;
	background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:38%;
	box-shadow:0 8px 24px rgba(24,34,66,.18); cursor:pointer;
	transition:transform .15s,box-shadow .15s;
}
.main-page .stories-nav:hover{transform:translateY(-50%) scale(1.07); box-shadow:0 12px 30px rgba(24,34,66,.26);}
.main-page .stories-prev{
	left:clamp(12px,4vw,86px);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.main-page .stories-next{
	right:clamp(12px,4vw,86px);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

@media (max-width:640px){
	/* 좁은 화면의 카드 폭은 스크립트가 화면의 56% 로 잡는다 — 여기서는 페이드·버튼만 조정 */
	.main-page .stories-slider::before,
	.main-page .stories-slider::after{width:clamp(28px,7vw,56px);}
	.main-page .stories-prev{left:6px;}
	.main-page .stories-next{right:6px;}
}

/* ---------- 만족도 지표 ---------- */
/* 위·아래 여백을 같게.
   ★ 바로 위 고객 이야기(.stories)가 아래에 자체 여백(섹션 padding-bottom + 슬라이더 padding)을
     이미 갖고 있어, 섹션 공통 padding(100px)까지 더하면 위쪽만 180~240px 로 벌어졌다.
     위 여백은 0 으로 두고(위 섹션 여백만 보이게), 아래 여백을 그 값과 같은 식으로 맞춘다 */
.main-page .stats-sec{
	padding-top:0;
	padding-bottom:calc(clamp(70px,8vw,110px) + clamp(14px,1.8vw,26px));
}
/* 카드 없이 컨텐츠 폭(.wrap) 을 3등분해 크게 노출 */
.main-page .stats{
	display:grid; grid-template-columns:repeat(3,1fr);
	gap:clamp(24px,3vw,56px); margin:0 auto; max-width:none;
}
.main-page .stat{background:none; border:0; border-radius:0; box-shadow:none; padding:0; text-align:center;}
.main-page .stat .ic{
	width:clamp(76px,6vw,104px); aspect-ratio:1/1; height:auto;
	margin:0 auto clamp(16px,1.6vw,24px); border-radius:24px;
}
.main-page .stat .ic::after{font-size:10px;}
/* 주요 수치 */
.main-page .stat .num{
	color:var(--brand);
	font-size:calc(var(--fs-num) - 2px);	/* 수치 등급보다 2px 작게 */
	font-weight:var(--fw-num); line-height:var(--lh-num); letter-spacing:var(--ls-num);
	font-variant-numeric:tabular-nums;	/* 카운트업 중 자릿수 흔들림 방지 */
}
/* 본문 */
.main-page .stat .lb{
	margin-top:clamp(8px,1vw,14px); color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 모바일에서도 세 수치를 가로로 나란히 둔다(세로로 쌓으면 스크롤만 길어진다).
   한 칸이 화면의 1/3 이므로 간격·아이콘을 좁히고, 숫자 크기는 site.css 의
   --fs-num 이 모바일 값으로 낮춰 준다. */
@media (max-width:760px){
	.main-page .stats{gap:clamp(8px,2.4vw,20px);}
	.main-page .stat .ic{
		width:clamp(44px,13vw,72px); margin-bottom:clamp(8px,1.8vw,14px); border-radius:16px;
	}
	/* 라벨은 두 줄이 되더라도 단어 중간에서 끊기지 않게 한다 */
	.main-page .stat .lb{margin-top:6px; line-height:1.45; word-break:keep-all;}
}

/* ---------- 블로그 후기 (무한 마퀴) ---------- */
/* 배경은 섹션에 직접 준다 — 별도 레이어(::after)로 깔면 카드 영역에서 가려질 수 있다.
   아래 브랜드 섹션과 맞붙되, 카드 밑으로도 배경이 이어지도록 하단 여백을 남긴다 */
.main-page .blogs{position:relative; padding:clamp(40px,4vw,56px) 0 clamp(56px,6vw,88px); overflow:hidden; background:#EDF4FB;}
/* 배경 : 시안처럼 밝은 하늘빛에서 흰색으로 떨어지는 단정한 배경.
   TODO: 시안의 밝은 청소 사진을 확보하면 아래 ::before 를 되살려 사진 배경으로 교체한다.
         (현재 원고 CDN 사진은 톤이 어두워 흰 베일을 씌워도 카드 아래에 회색 얼룩이 남는다)
.main-page .blogs::before{
	content:""; position:absolute; inset:-10px; z-index:-2;
	background:var(--blogs-bg,none) center top/cover no-repeat;
	filter:blur(2px) saturate(.72) brightness(1.22);
}
*/
.main-page .blogs .wrap{position:relative;}

/* 제목 : 작은 브랜드색 소제목 + 큰 제목(뒷 단어만 브랜드색) + 설명 한 줄 */
/* 크기/굵기/행간/자간은 .sec-title(섹션 H2) 그대로 — 아래 설명문과의 간격만 조정 */
.main-page .blogs-title{margin-bottom:clamp(10px,1.2vw,16px);}
.main-page .blogs-title .eyebrow{color:var(--brand);}	/* 타이포는 공통 .sec-title .eyebrow */
.main-page .blogs-title .tit-point{color:var(--brand);}
/* 본문 */
.main-page .blogs .sec-desc{
	margin:0 0 clamp(30px,3.6vw,50px); text-align:center; color:var(--muted);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}

.main-page .marquee-wrap{overflow:hidden; width:100%;}
/* 절반 구간에 든 카드 수(--mq-n, /include/review_marquee.jsp 가 넣음)에 비례해 시간을 정한다 →
   후기 수가 달라도 흐르는 속도는 같다 (카드 1장 = 14.4s, 모바일 10.4s) */
.main-page .marquee{display:flex; gap:24px; width:max-content; animation:mainSlide calc(var(--mq-n,10) * 14.4s) linear infinite;}
@keyframes mainSlide{from{transform:translateX(0);} to{transform:translateX(calc(-50% - 12px));}}

/* 제목이 카드 제목 스펙(22~25px)으로 커져 카드 폭·여백도 함께 넓힌다 */
.main-page .bcard{
	flex:0 0 clamp(300px,22vw,340px); background:#fff; border-radius:16px; padding:22px 20px 24px;
	box-shadow:0 10px 28px rgba(24,34,66,.10); display:flex; flex-direction:column;
}
/* 카드 머리의 따옴표 아이콘 */
.main-page .bq{
	display:block; margin-bottom:10px;
	font-family:Georgia,'Times New Roman',serif; font-size:30px; font-weight:700; line-height:.8; color:var(--brand);
}
.main-page .bq::before{content:"\201C";}
/* 카드 제목 — 2px 축소하여 여유 있게 두 줄 노출 */
.main-page .blead{
	margin:0 0 12px; color:var(--ink);
	font-size:calc(var(--fs-card) - 2px); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* 작성자·날짜 : 표에 없는 보조 텍스트 (기존 13px -> 11px) */
.main-page .bmeta{
	display:flex; align-items:center; gap:7px; margin-bottom:13px; color:var(--muted);
	font-size:calc(var(--fs-meta) - 2px); font-weight:var(--fw-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}
.main-page .bmeta .w{font-weight:600; color:var(--ink-2);}
/* 대표 사진 */
.main-page .bhero{width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#E3EBF3;}
.main-page .bhero img{width:100%; height:100%; object-fit:cover;}
/* 미리보기 4칸 (사진 3 + 남은 장수) */
.main-page .bgallery{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px;}
.main-page .bgallery .g{
	position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#E3EBF3;
}
.main-page .bgallery .g img{width:100%; height:100%; object-fit:cover;}
/* 같은 사진의 다른 영역을 잡아 각 칸이 달라 보이게 한다 */
.main-page .bgallery .g1 img{object-position:left top;}
.main-page .bgallery .g2 img{object-position:center bottom;}
.main-page .bgallery .g3 img{object-position:right center;}
.main-page .bgallery .more{
	display:grid; place-items:center; background:rgba(24,34,66,.82); color:#fff;
	font-size:calc(var(--fs-meta) - 2px); font-weight:700; line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}
/* 본문 (기존 16px -> 14px) · 줄간격은 기본(1.7)보다 넓혀 3줄이 답답하지 않게 */
.main-page .bdesc{
	margin:14px 0 0; color:var(--ink-2);
	font-size:calc(var(--fs-body) - 2px); font-weight:var(--fw-body); line-height:1.85; letter-spacing:var(--ls-body);
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:560px){
	.main-page .marquee{animation-duration:calc(var(--mq-n,10) * 10.4s);}
}
/* ---------- 영상 배경 섹션 (브랜드 / 클로징) ---------- */
/* 상하 여백은 .inner 가 담당하므로 섹션 기본 padding(100px) 은 해제 */
.main-page .vsec{position:relative; width:100%; overflow:hidden; isolation:isolate; padding:0;}
.main-page .vsec > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.main-page .vsec .veil{position:absolute; inset:0; z-index:-1;}
.main-page .vsec .inner{
	position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
	text-align:center; padding:clamp(80px,9vw,130px) 24px; min-height:clamp(420px,46vw,680px);
	width:100%; max-width:none; margin:0;
}

/* 클로징 : 흰 배경 + 네이비 카피 + pill CTA (하단 여백 넉넉하게 확보) */
.main-page .closing{background:#fff;}
.main-page .closing .inner{min-height:0; padding:clamp(40px,4vw,56px) 24px clamp(84px,9vw,136px);}
/* 본문 */
.main-page .closing .lead{
	margin:0; color:var(--muted);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 섹션 H2 */
/* 줄은 문구의 <br /> 로만 나눈다(세 줄). 세 줄 문구라 H2 기본 행간(1.2)보다 조금 넓힌다.
   ★ text-wrap:balance 금지 — 가운데 정렬 flex 항목이라 상자 폭이 가장 긴 줄에 딱 맞게 잡히는데,
     balance 가 그 줄을 다시 나눠 "곳을" 이 홀로 떨어졌다. 상자를 줄 폭(100%)으로 펴서 막는다.
   ★ 둘째 줄이 약 13.8em 이라 360px 이하에선 24px 로도 넘친다 → 화면 폭(6.1vw)에 맞춰 줄인다 */
.main-page .closing h2{
	align-self:stretch; width:100%;
	margin:clamp(12px,1.5vw,20px) 0 0; color:var(--ink);
	font-size:min(var(--fs-h2), 6.1vw); font-weight:var(--fw-h2); line-height:1.38; letter-spacing:var(--ls-h2);
	word-break:keep-all; overflow-wrap:normal;
}
.main-page .closing h2 em{font-style:normal; color:var(--brand);}
/* 버튼 — 높이 48px 은 사이트 전 버튼 공통 */
.main-page .closing .cta{
	margin-top:clamp(20px,2.4vw,34px); display:inline-flex; align-items:center; justify-content:center; gap:9px;
	width:auto; height:48px; padding:0 28px; border-radius:999px;
	background:var(--brand); color:#fff;
	font-size:var(--fs-btn); font-weight:var(--fw-btn); line-height:var(--lh-btn); letter-spacing:var(--ls-btn);
	transition:background .15s;
}
/* 버튼 앞 견적 아이콘 */
.main-page .closing .cta::before{
	content:""; width:15px; height:15px; flex:0 0 15px;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13.5l2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.main-page .closing .cta:hover{background:var(--brand-dark); color:#fff;}