@charset "utf-8";
/* ============================================================
   service_cleaning.css — 서비스 소개 페이지 공용 (.clean-page)
   - 주 대상 : 입주·이사·거주청소 소개 페이지(www/service/cleaning/index.jsp)
   - 에어컨 분해청소 페이지(www/service/aircon/index.jsp)도 이 파일을 함께 로드해
     공통 섹션 여백 · 탭 · Before/After 비교 · FAQ · 견적 폼 · 베란다 모달을 그대로 쓴다.
     → 이 부분들을 고칠 때는 두 페이지를 함께 확인할 것 (그 페이지 전용 스타일은 service_aircon.css)
   - 2026-09-07 디자인 시안 기준 전면 개편
     (히어로 → CLEANING AREA → 7가지 약속 → BEFORE&AFTER → 리얼후기 → 책임배너 → FAQ → 견적문의)
   - 모든 선택자를 .clean-page 로 스코프 한정 (다른 페이지 오염 방지)
   - 색·크기 값은 site.css 의 :root 토큰만 참조한다.
     (타이포 등급 : --fs-h1 / --fs-h2 / --fs-card / --fs-body / --fs-menu / --fs-btn / --fs-num / --fs-meta)
   - 헤더·푸터·상담 CTA 등 공통 요소는 www/css/site.css
   ============================================================ */

body{padding-top:var(--header-h);}

.clean-page{display:block;}
.clean-page *,.clean-page *::before,.clean-page *::after{box-sizing:border-box;}
.clean-page img{max-width:100%; display:block;}
.clean-page ul{margin:0; padding:0; list-style:none;}
.clean-page button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit;}
/* 탭 패널을 hidden 으로 감춘다. 아래 레이아웃 규칙(display:flex/grid)이 브라우저 기본값보다
   특이도가 높아 hidden 이 무시되므로 여기서 못박는다 — 빼면 패널이 한꺼번에 보인다 */
.clean-page [hidden]{display:none !important;}
.clean-page :focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;}
@media (prefers-reduced-motion:reduce){
	.clean-page *{animation:none !important; transition:none !important;}
}

/* ---------- 공통 섹션 ---------- */
.clean-page section{padding:clamp(40px,4vw,56px) 0 clamp(64px,7vw,110px);}	/* 위 여백은 메인·게시판과 같은 최대 56px */
.clean-page .sec-head{text-align:center; margin:0 0 clamp(32px,3.8vw,56px);}
.clean-page .sec-head.is-left{text-align:left;}
.clean-page .sec-title{
	margin:0; color:var(--ink);
	font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
}
.clean-page .sec-title em{font-style:normal; color:var(--brand);}
/* 제목 위 영문 소제목 — 시안처럼 자간을 넓게 벌린다 */
.clean-page .eyebrow{
	display:block; margin-bottom:clamp(10px,1.2vw,16px); color:var(--brand);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:.14em;
}
.clean-page .sec-desc{
	margin:clamp(12px,1.4vw,20px) 0 0; color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}

/* 공통 탭 (공간 선택 / 전후 비교) — 사이트 버튼과 같은 높이 계열 */
.clean-page .tabs{
	display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
	margin:0 0 clamp(22px,2.6vw,34px);
}
.clean-page .tabs button{
	display:inline-flex; align-items:center; gap:8px;
	height:44px; padding:0 22px; border-radius:999px;
	background:#fff; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
	transition:background .15s,color .15s,box-shadow .15s;
}
.clean-page .tabs button:hover{background:var(--brand-soft); color:var(--brand-deep);}
.clean-page .tabs button[aria-selected="true"]{background:var(--brand); color:#fff; box-shadow:none;}
/* 아이콘은 mask 로 그려 색만 바꾼다 (선택 시 흰색) */
.clean-page .tabs button::before{
	content:""; flex:0 0 18px; width:18px; height:18px; background-color:currentColor;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
}
/* 아이콘 클래스가 없는 탭(전후 비교)은 앞 여백을 만들지 않는다 */
.clean-page .tabs button:not([class*="ic-"])::before{display:none;}
.clean-page .tabs .ic-door::before{
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-5'/%3E%3Cpath d='M9 17l5-5-5-5'/%3E%3Cpath d='M14 12H3'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-5'/%3E%3Cpath d='M9 17l5-5-5-5'/%3E%3Cpath d='M14 12H3'/%3E%3C/svg%3E");
}
.clean-page .tabs .ic-sink::before{
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11' rx='2'/%3E%3Cpath d='M12 9V6a2 2 0 0 1 2-2h3'/%3E%3Cpath d='M8 14h8'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11' rx='2'/%3E%3Cpath d='M12 9V6a2 2 0 0 1 2-2h3'/%3E%3Cpath d='M8 14h8'/%3E%3C/svg%3E");
}
.clean-page .tabs .ic-sofa::before{
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Crect x='2' y='11' width='20' height='7' rx='2'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Crect x='2' y='11' width='20' height='7' rx='2'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
}
.clean-page .tabs .ic-fence::before{
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7v13M10 7v13M14 7v13M20 7v13'/%3E%3Cpath d='M2 7h20M2 12h20'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7v13M10 7v13M14 7v13M20 7v13'/%3E%3Cpath d='M2 7h20M2 12h20'/%3E%3C/svg%3E");
}
.clean-page .tabs .ic-bed::before{
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18v-7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M2 14h20'/%3E%3Cpath d='M6 9V6h6v3'/%3E%3Cpath d='M2 18v2M22 18v2'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18v-7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M2 14h20'/%3E%3Cpath d='M6 9V6h6v3'/%3E%3Cpath d='M2 18v2M22 18v2'/%3E%3C/svg%3E");
}
.clean-page .tabs .ic-bath::before{
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12V6a2 2 0 0 1 4 0v1'/%3E%3Cpath d='M2 12h20v3a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5z'/%3E%3Cpath d='M7 20v1M17 20v1'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12V6a2 2 0 0 1 4 0v1'/%3E%3Cpath d='M2 12h20v3a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5z'/%3E%3Cpath d='M7 20v1M17 20v1'/%3E%3C/svg%3E");
}

/* ---------- 1. 히어로 : 영상 배경 + 좌측 카피 ---------- */
.clean-page .cl-hero{
	position:relative; display:flex; align-items:center; overflow:hidden; padding:0;
	min-height:clamp(520px,42vw,760px);
}
.clean-page .cl-hero-bg{position:absolute; inset:0; z-index:0;}
.clean-page .cl-hero-bg img,
.clean-page .cl-hero-bg video{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
/* 영상 위에 검정 딤드를 덮어 흰 카피의 가독성을 확보한다.
   전체에 옅은 딤(::before)을 깔고, 카피가 놓이는 왼쪽은 그라데이션(::after)으로 더 어둡게 한다 */
.clean-page .cl-hero-bg::before,
.clean-page .cl-hero-bg::after{content:""; position:absolute; inset:0; pointer-events:none;}
.clean-page .cl-hero-bg::before{background:rgba(8,12,24,.14);}
.clean-page .cl-hero-bg::after{
	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%);
}
.clean-page .cl-hero .wrap{position:relative; z-index:1; width:100%;}
.clean-page .cl-hero-copy{max-width:min(640px,58%); text-shadow:0 1px 14px rgba(0,0,0,.35);}
/* 어두운 배경에서는 브랜드 색이 묻히므로 한 톤 밝힌 값을 쓴다 */
.clean-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;
}
/* 페이지에서 유일한 h1 */
.clean-page .cl-hero h1{
	margin:0; color:#FFFFFF;
	font-size:var(--fs-h1); font-weight:var(--fw-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1);
}
.clean-page .cl-hero h1 em{font-style:normal; color:#6CCBF2;}
.clean-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. 청소 범위 : 공간 탭 + 도면 + 범위 카드 ---------- */
.clean-page .cl-scope{
	position:relative; overflow:hidden;
	background:linear-gradient(180deg,#F4FAFE 0%,#E7F3FC 46%,#F7FBFE 100%);
}
/* 배경 사진 — 파일이 없으면 위 그라데이션이 그대로 보인다 */
.clean-page .cl-scope-bg{position:absolute; inset:0; z-index:0;}
.clean-page .cl-scope-bg img{width:100%; height:100%; object-fit:cover; object-position:center;}
.clean-page .cl-scope .wrap{position:relative; z-index:1;}
/* 좌측 정렬 헤드에서는 탭도 왼쪽부터 */
.clean-page .cl-scope .tabs{justify-content:flex-start;}

/* 좌: 3D 도면 / 우: 선택한 공간의 청소 범위 */
.clean-page .scope-wrap{
	display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
	gap:clamp(18px,2.4vw,36px); align-items:stretch;
}
/* 핀 좌표(%)는 도면 그림 기준이다. grid 의 stretch 로 컨테이너가 오른쪽 카드 높이까지
   늘어나면 이미지 아래에 빈 공간이 생겨 핀이 어긋나므로, 높이를 이미지에 맞춘다 */
.clean-page .scope-map{position:relative; align-self:center;}
.clean-page .scope-map img{width:100%; height:auto;}
/* 공간마다 핀을 두고 선택된 것만 크게 강조한다.
   핀은 탭과 같은 전환 버튼이므로 버튼 기본 모양(테두리·여백·배경)은 지우고 핀 그림만 남긴다 */
.clean-page .scope-pin{
	padding:0; border:0; -webkit-appearance:none; appearance:none; cursor:pointer;
	position:absolute; z-index:3; width:clamp(20px,1.8vw,26px); aspect-ratio:24/32;
	transform:translate(-50%,-100%); opacity:.45;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%23229ED4' d='M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0z'/%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
	filter:drop-shadow(0 4px 8px rgba(24,34,66,.28));
	transition:opacity .25s,width .25s;
}
/* 누를 수 있다는 것이 드러나게 — is-on 규칙이 뒤에 와서 선택된 핀은 계속 또렷하다 */
.clean-page .scope-pin:hover,
.clean-page .scope-pin:focus-visible{opacity:.85;}
.clean-page .scope-pin.is-on{
	opacity:1; width:clamp(28px,2.6vw,38px); z-index:4;
	animation:clPin 1.8s ease-in-out infinite;
}
@keyframes clPin{
	0%,100%{transform:translate(-50%,-100%);}
	50%{transform:translate(-50%,calc(-100% - 6px));}
}

/* 오른쪽 정보 카드 */
.clean-page .scope-info{
	display:flex; flex-direction:column;
	background:#fff; border-radius:20px; padding:clamp(24px,2.6vw,38px);
	box-shadow:0 14px 40px rgba(24,34,66,.10);
}
/* "SELECTED SPACE · 01" 라벨 */
.clean-page .scope-info .sel{
	display:block; color:var(--muted);
	font-size:var(--fs-meta); font-weight:600; line-height:1.4; letter-spacing:.14em;
}
.clean-page .scope-info .sel b{color:var(--brand); font-weight:700;}
/* 공간명 줄 — 좁은 화면에서는 오른쪽에 안내 버튼이 함께 놓인다 */
.clean-page .info-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.clean-page .notice-btn{display:none;}		/* PC 에서는 안내 사항이 카드 아래에 늘 펼쳐져 있다 */
/* 공간명 — 카드 안에서 가장 큰 글자 */
.clean-page .scope-info h3{
	margin:clamp(10px,1.2vw,16px) 0 0; color:var(--ink);
	font-size:clamp(26px,2.1vw,34px); font-weight:700; line-height:1.3; letter-spacing:-.02em;
}
.clean-page .scope-info .desc{
	margin:clamp(10px,1.2vw,16px) 0 clamp(18px,2vw,26px);
	padding-bottom:clamp(18px,2vw,26px); border-bottom:1px solid var(--line);
	color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
.clean-page .scope-info .list-label{
	display:block; margin-bottom:clamp(12px,1.4vw,18px); color:var(--ink);
	font-size:var(--fs-menu); font-weight:700; line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}
/* 청소 항목 — 두 칸씩, 앞에 파란 체크 배지 */
.clean-page .scope-list{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:clamp(12px,1.4vw,18px) clamp(10px,1.2vw,18px);
	margin:0 0 clamp(18px,2.2vw,28px);
}
.clean-page .scope-list li{
	display:flex; align-items:center; gap:10px; color:var(--ink);
	font-size:var(--fs-body); font-weight:600; line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
.clean-page .scope-list li::before{
	content:""; flex:0 0 20px; width:20px; height:20px; border-radius:6px; background-color:var(--brand);
	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='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center; background-size:12px;
}
/* 안내 사항 — 카드 맨 아래로 밀어 붙인다 */
.clean-page .scope-info .notice{
	margin-top:auto; padding:clamp(16px,1.8vw,22px); border-radius:14px; background:var(--brand-soft);
}
.clean-page .scope-info .notice b{
	display:flex; align-items:center; gap:7px; margin-bottom:10px; color:var(--brand-deep);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}
.clean-page .scope-info .notice b::before{
	content:""; flex:0 0 17px; width:17px; height:17px; background-color:var(--brand);
	-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.4M12 7.6v.6'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.4M12 7.6v.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.clean-page .scope-info .notice li{
	position:relative; padding-left:12px; color:var(--ink-2);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:1.7; letter-spacing:var(--ls-meta);
}
.clean-page .scope-info .notice li::before{content:"·"; position:absolute; left:3px;}
.clean-page .scope-info .notice li + li{margin-top:6px;}
.clean-page .scope-info .notice li span{display:inline-block;}
.clean-page .scope-info .notice .nb-br1{display:none;}
.clean-page .scope-info .notice .nb-br2{display:none;}

/* ---------- 3. 7가지 약속 : 카드 스택 ---------- */
.clean-page .cl-promise{
	position:relative; overflow:hidden;
	background:linear-gradient(180deg,#FFFFFF 0%,#EFF7FD 58%,#E4F1FA 100%);
}
/* 배경 사진(promise_bg1.png) — 왼쪽 아래에 원본 비율 그대로 깔린다.
   원본이 위·왼쪽·아래가 흰색으로 흐려지게 만들어진 사진이라, 흰색 그라데이션을
   덧씌우거나 opacity 를 낮추지 않아도 카피를 가리지 않는다.
   (덧씌우면 사람이 뭉개져 무슨 장면인지 알아볼 수 없게 된다)

   ★ 사진을 가로로 늘려 채우면(object-fit:cover + 큰 width) 이미지가 확대되면서
     사람이 위로 올라와 제목·설명문을 덮는다. 그래서 세로를 섹션 높이에 맞추고
     가로는 비율대로 두어(height:100% + width:auto), 사람이 늘 카피 문단 아래에 오게 한다.

   ★ 기준은 왼쪽이 아니라 오른쪽이다. 원본(1712x947)은 사람이 오른쪽에 있고 왼쪽은
     넓은 흰 여백이라, 오른쪽 끝만 고정하면 사람 위치가 화면 폭과 무관하게 일정하고
     남는 왼쪽이 화면 밖까지 덮어 잘린 경계가 드러나지 않는다.
     (왼쪽을 기준으로 잡으면 화면이 넓을수록 사람이 오른쪽으로 끌려간다)

   오른쪽 끝은 컨텐츠(.wrap) 왼쪽 기준선에서 792px — 카피 문단을 지나 카드 스택 앞에서
   끝나는 위치다. 넓은 화면에서 컨텐츠가 가운데로 모여도 카피와 사진이 함께 움직인다.
   ※ 1680px / 28px 은 site.css 의 .wrap max-width / padding 과 같은 값이다 */
.clean-page .cl-promise-bg{
	position:absolute; z-index:0; top:0; bottom:0; left:0; pointer-events:none;
	right:calc(100% - max(28px, (100% - 1680px) / 2 + 28px) - 792px);
}
.clean-page .cl-promise-bg img{
	position:absolute; right:0; bottom:0; height:100%; width:auto; max-width:none;
	/* 오른쪽 끝이 직선으로 잘려 보이지 않게 알파로 흘려보낸다.
	   흰색을 덮는 대신 마스크를 쓰는 이유 : 섹션 배경이 위→아래로 흰색→하늘색이라
	   흰색 그라데이션으로 가리면 아래쪽에서 색이 어긋나 네모난 자국이 남는다 */
	-webkit-mask-image:linear-gradient(90deg,#000 74%,rgba(0,0,0,0) 97%);
	        mask-image:linear-gradient(90deg,#000 74%,rgba(0,0,0,0) 97%);
}
.clean-page .promise-in{
	position:relative; z-index:1;
	display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
	gap:clamp(28px,3.6vw,64px); align-items:start;
}
.clean-page .promise-copy .sec-desc{margin-top:clamp(20px,2.4vw,32px);}

/* 스택 — 펼친 카드를 중심으로 위아래에 접힌 바가 쌓인다.
   접힌 바는 폭·높이·색을 모두 같게 두고 간격도 일정하게 유지한다.
   (카드마다 크기를 다르게 주면 전환할 때마다 바들이 커졌다 작아져 산만해진다)

   ★ 카드 여닫기는 display 를 껐다 켜는 대신 높이(--pm-bar ↔ --pm-open)를 오가게 한다.
     한 번의 전환에서 접히는 카드는 open→bar, 펼쳐지는 카드는 bar→open 으로
     같은 시간·같은 곡선을 따라 반대로 움직이므로 두 높이의 합이 늘 같다
     → 스택 전체 높이가 전환 내내 고정되어 아래 섹션이 출렁이지 않는다.
     (예전처럼 접기 → 회전 → 펼치기 로 나누면 중간에 전부 접힌 순간이 생겨
      스택이 짧아졌다 길어지며 튄다)
   --pm-open 은 일곱 장 중 가장 긴 본문에 맞춰 스크립트가 실제 높이를 재어 덮어쓴다
   (모든 카드가 같은 높이여야 어느 번호를 눌러도 스택 총 높이가 같다).
   아래 값은 스크립트가 재기 전에 쓰는 기본값. */
.clean-page .promise-stack{
	display:flex; flex-direction:column; gap:8px;
	--pm-bar:56px;
	--pm-open:clamp(232px,21vw,276px);
	--pm-dur:.55s;
	--pm-ease:cubic-bezier(.28,.74,.3,1);
}
.clean-page .pm{
	width:100%; flex:0 0 auto; position:relative; z-index:1;
	height:var(--pm-bar); overflow:hidden; border-radius:12px;
	box-shadow:0 4px 14px rgba(24,34,66,.07);
	/* height  : 여닫기 (접히는 카드와 펼쳐지는 카드가 같은 시간 동안 반대로 움직인다)
	   transform: 자리 이동 (스크립트의 FLIP 처리와 한 쌍) — 여닫기와 같은 곡선·시간으로 맞춰
	              카드가 도는 동작과 펼쳐지는 동작이 한 몸처럼 보이게 한다
	   opacity : 스택 끝을 넘어 반대편으로 넘어간 카드가 떠오를 때 쓴다 */
	transition:height var(--pm-dur) var(--pm-ease),
	           transform var(--pm-dur) var(--pm-ease),
	           box-shadow var(--pm-dur) var(--pm-ease),
	           border-radius var(--pm-dur) var(--pm-ease),
	           opacity calc(var(--pm-dur) * .45) ease;
}
/* 최초 배치·모션 최소화 설정에서는 이동 애니메이션을 끈다 */
.clean-page .promise-stack.no-anim .pm{transition:none;}
/* 접힌 바 — 모든 카드가 같은 크기.
   펼친 카드 본문과 같은 자리에 겹쳐 두고 투명도로 교차시킨다 (자리를 차지하지 않아야
   .pm 의 height 하나만으로 카드 높이가 정해진다) */
.clean-page .pm-head{
	position:absolute; left:0; right:0; top:0;
	display:flex; align-items:center; gap:14px; width:100%;
	height:var(--pm-bar); padding:0 20px; border-radius:12px;
	background:#EAF3FB; color:var(--ink-2); text-align:left;
	transition:background .15s, color .15s,
	           opacity calc(var(--pm-dur) * .5) ease calc(var(--pm-dur) * .22);
}
.clean-page .pm-head:hover{background:#DDEDF9; color:var(--ink);}
/* 카드가 overflow:hidden 이라 바깥으로 그린 외곽선은 잘려 보이지 않는다 → 안쪽에 그린다 */
.clean-page .pm-head:focus-visible{outline-offset:-3px;}
.clean-page .pm-no{
	flex:0 0 auto; color:var(--brand);
	font-size:var(--fs-menu); font-weight:700; line-height:1; letter-spacing:0;
	font-variant-numeric:tabular-nums;
}
.clean-page .pm-tit{
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:1.4; letter-spacing:var(--ls-menu);
}
/* 펼친 카드 — 바 대신 본문 카드가 나온다.
   높이를 고정하는 이유 : 약속마다 본문 길이가 달라 카드 높이가 들쭉날쭉하면
   전환할 때마다 위아래 바들이 밀려 올라갔다 내려간다. 가장 긴 항목 기준으로 맞춰 둔다.
   본문은 접힌 카드에도 늘 그려 두고(투명), 카드가 접혀 있는 동안에는
   .pm 의 overflow 로 잘려 보이지 않는다 — 그래야 높이를 이어서 애니메이션할 수 있다. */
.clean-page .pm-body{
	position:absolute; left:0; right:0; top:0;
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
	gap:clamp(18px,2.2vw,32px); align-items:stretch;
	min-height:var(--pm-open);		/* 본문이 짧은 카드도 흰 배경이 카드 끝까지 차게 */
	padding:clamp(24px,2.6vw,38px); border-radius:16px;
	background:#fff;
	opacity:0; pointer-events:none;
	transition:opacity calc(var(--pm-dur) * .45) ease;
}
/* 펼친 카드 — 그림자·모서리는 .pm 에 걸어 두어(overflow 로 잘리지 않게) 높이와 같이 흐르게 한다 */
.clean-page .pm.is-open{
	z-index:2; height:var(--pm-open);
	border-radius:16px; box-shadow:0 18px 44px rgba(24,34,66,.14);
}
.clean-page .pm.is-open .pm-head{opacity:0; pointer-events:none; transition:opacity calc(var(--pm-dur) * .3) ease;}
/* 본문은 카드가 어느 정도 열린 뒤에 떠오른다 (자리 이동은 .pm 의 transform 이 담당) */
.clean-page .pm.is-open .pm-body{
	opacity:1; pointer-events:auto;
	transition:opacity calc(var(--pm-dur) * .6) ease calc(var(--pm-dur) * .28);
}
.clean-page .pm-txt{display:flex; flex-direction:column;}
/* 카드 머리의 큰 번호 */
.clean-page .pm-no-big{
	display:block; color:var(--brand);
	font-size:calc(var(--fs-num) * .55);
	font-weight:var(--fw-num); line-height:1; letter-spacing:var(--ls-num);
	font-variant-numeric:tabular-nums;
}
.clean-page .pm-txt h3{
	margin:clamp(14px,1.6vw,22px) 0 0; color:var(--ink);
	font-size:var(--fs-card); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
}
.clean-page .pm-txt p{
	margin:clamp(10px,1.2vw,16px) 0 0; color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 웹/모바일 줄바꿈 제어 유틸리티 */
.clean-page .m-br{display:none;}
.clean-page .d-br{display:inline;}
/* 진행 표시 (01 / 08) — 카드 아래에 구분선과 함께 */
.clean-page .pm-count{
	margin-top:auto; padding-top:clamp(16px,1.8vw,24px); border-top:1px solid var(--line);
	color:var(--muted); font-size:var(--fs-menu); font-weight:600; line-height:1; letter-spacing:.02em;
	font-variant-numeric:tabular-nums;
}
.clean-page .pm-count b{color:var(--brand); font-weight:700;}
/* 카드 사진 — 파일이 없으면 회색 자리표시자만 보인다 */
.clean-page .pm-img{
	position:relative; min-height:clamp(120px,11vw,168px); border-radius:10px; overflow:hidden;
	background:#DFE4EA;
}
.clean-page .pm-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ---------- 4. 청소 기준 : Before / After 비교 ---------- */
.clean-page .cl-std{background:#fff;}
/* 띠 크기를 사진 원본(1660x553 = 3:1)에 그대로 맞췄다.
   사진 한 장이 띠를 정확히 채우므로 잘리는 곳도 확대도 없고,
   손잡이가 가운데일 때 보이는 각 사진의 절반이 곧 사진 한 장 분량이 된다 */
.clean-page .ba{
	position:relative; max-width:1660px; margin:0 auto;
	aspect-ratio:3/1; border-radius:20px; overflow:hidden;
	box-shadow:0 16px 44px rgba(24,34,66,.18); touch-action:pan-y;
	background:linear-gradient(160deg,#B9BEC6 0%,#9BA3AE 60%,#868E9B 100%);
}
.clean-page .ba-set{position:absolute; inset:0;}
/* 두 장을 같은 자리에 겹쳐 두고, 위에 덮인 '작업 후' 사진만 손잡이 위치에서 잘라낸다.
   ★ 사진 크기는 손잡이를 움직여도 절대 변하지 않는다 — 칸 폭을 슬라이더에 맞춰 늘리면
     그 칸을 채우려고 사진이 확대되므로 그렇게 하지 말 것. 여기서는 보이는 범위만 바뀐다. */
.clean-page .ba-img{position:absolute; inset:0;}
/* 사진 두 장을 같은 크기(띠 전체)로 겹쳐 둔다. 띠 비율이 사진과 같으므로 잘리는 곳이 없고,
   손잡이를 끝으로 밀면 그 사진 한 장이 통째로 보인다.
   before 는 왼쪽 끝, after 는 오른쪽 끝을 기준으로 붙여 화면 폭이 달라져도 기준점이 흔들리지 않는다 */
.clean-page .ba-img img{width:100%; height:100%; object-fit:cover;}
.clean-page .ba-before img{object-position:left center;}
.clean-page .ba-after img{object-position:right center;}
.clean-page .ba-before{background:linear-gradient(160deg,#B9BEC6 0%,#9BA3AE 60%,#868E9B 100%);}
.clean-page .ba-after{
	background:linear-gradient(160deg,#F2F6FA 0%,#E2EAF2 60%,#D2DDE8 100%);
	clip-path:inset(0 0 0 var(--ba-pos,50%));
}
/* 라벨 — 시안대로 위쪽 모서리에 */
.clean-page .ba-label{
	position:absolute; top:clamp(14px,1.6vw,22px); z-index:3; padding:8px 20px; border-radius:999px;
	background:rgba(24,34,66,.78); color:#fff;
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}
.clean-page .ba-label.is-before{left:clamp(14px,1.6vw,22px);}
.clean-page .ba-label.is-after{right:clamp(14px,1.6vw,22px); background:var(--brand);}
/* 가운데 손잡이 */
.clean-page .ba-handle{
	position:absolute; top:0; bottom:0; z-index:4; width:3px; margin-left:-1.5px;
	left:var(--ba-pos,50%); background:#fff; box-shadow:0 0 0 1px rgba(24,34,66,.12);
	cursor:ew-resize;
}
.clean-page .ba-handle::after{
	content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:44px; height:44px; border-radius:50%; background:#fff;
	box-shadow:0 6px 18px rgba(24,34,66,.28);
	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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6'/%3E%3Cpath d='m15 6 5 6-5 6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center; background-size:22px;
}
/* 슬라이더 자체는 화면에서 감추고 값만 쓴다(키보드·스크린리더용) */
.clean-page .ba-range{
	position:absolute; inset:0; z-index:5; width:100%; height:100%;
	opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none; margin:0;
}
/* 브라우저 기본 손잡이는 폭이 있어 그 절반만큼 양 끝에서 못 미친다(0%·100% 에 닿지 않는다).
   폭을 없애 마우스 위치와 값이 그대로 맞아떨어지게 한다 */
.clean-page .ba-range::-webkit-slider-thumb{-webkit-appearance:none; width:1px; height:1px;}
.clean-page .ba-range::-moz-range-thumb{width:1px; height:1px; border:0; background:none;}
/* 사용 안내 — 좌우 화살표 사이에 문구 */
.clean-page .ba-guide{
	display:flex; align-items:center; justify-content:center; gap:14px;
	margin:clamp(20px,2.2vw,30px) 0 0; color:var(--muted);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
.clean-page .ba-guide::before,
.clean-page .ba-guide::after{
	content:""; width:20px; height:14px; flex:0 0 20px; background-color:var(--brand);
	-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4'/%3E%3Cpath d='m10 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4'/%3E%3Cpath d='m10 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.clean-page .ba-guide::after{transform:rotate(180deg);}

/* ---------- 5. 고객 이야기 (쇼츠 캐러셀) ----------
   메인 페이지와 같은 형태 — 배치 계산은 /js/stories_carousel.js 가 공용으로 처리하고,
   스타일만 페이지별 스코프로 갖는다.
   ★ 아래에서 .story 에 width/height/left 를 선언하면 스크립트 계산을 덮어쓴다. */
.clean-page .stories{position:relative; padding:clamp(40px,4vw,56px) 0 clamp(70px,8vw,110px); background:#fff; overflow:hidden;}
.clean-page .stories .wrap{position:relative; z-index:1;}

/* 제목 : 상단 짧은 라인 + 작은 소제목 + 큰 제목(끝 단어만 브랜드색) */
.clean-page .stories-title{
	position:relative; text-align:center;
	margin:0 auto clamp(30px,3.6vw,52px); padding-top:clamp(20px,2.2vw,32px);
	font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
	color:var(--ink);
}
.clean-page .stories-title::before{
	content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
	width:34px; height:3px; border-radius:2px; background:var(--brand);
}
.clean-page .stories-title .eyebrow{
	display:block; margin-bottom:clamp(8px,1vw,14px); color:var(--ink-2);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}
/* JSP 컴파일(trimSpaces)에서 앞 단어와의 공백이 사라지므로 여백을 CSS 로 확보 */
.clean-page .stories-title .tit-point{color:var(--brand); margin-left:.26em;}

/* 캐러셀 틀 — .wrap 밖에 있어 화면 폭을 그대로 쓴다(좌우 화살표를 컨텐츠 폭 바깥에 두기 위함) */
.clean-page .stories-slider{position:relative; width:100%; padding:clamp(14px,1.8vw,26px) 0;}
/* 스크립트가 켜지기 전(또는 JS 미동작)에는 가로 나열로만 보이게 둔다 */
.clean-page .stories-track{
	position:relative; z-index:1; width:100%;
	display:flex; gap:20px; justify-content:center; overflow:hidden;
	min-height:clamp(300px,26vw,380px);
}
.clean-page .stories-track .story{flex:0 0 clamp(180px,13vw,240px); aspect-ratio:.68/1;}
/* 스크립트가 켜지면 절대 배치로 전환 */
.clean-page .stories-track.js-on{display:block; overflow:visible;}
.clean-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;
}
.clean-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);
}
.clean-page .story .sthumb,
.clean-page .story .svideo{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block;}
/* 아래쪽 문구가 읽히도록 하단 위주로 어둡게 */
.clean-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%);
}
/* 재생 버튼 : 카드 중앙, 흰 원 + 브랜드색 삼각형 */
.clean-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;
}
.clean-page .story:hover .play{transform:translate(-50%,-50%) scale(1.08);}
.clean-page .story.is-playing .play{opacity:0; pointer-events:none;}
.clean-page .story.is-playing:hover .play{opacity:.85; pointer-events:auto;}
.clean-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줄 */
.clean-page .story .cap{position:absolute; z-index:4; left:9%; right:9%; bottom:8%; display:block; color:#fff;}
.clean-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);
}
.clean-page .story.is-active .cap-tit{font-size:var(--fs-card);}
.clean-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);
}
.clean-page .story.is-active .cap-sub{font-size:var(--fs-body);}
/* 좌우 끝 카드는 흰 배경으로 흘려 잘린 느낌을 없앤다 (네비 버튼보다 아래 z-index) */
.clean-page .stories-slider::before,
.clean-page .stories-slider::after{
	content:""; position:absolute; top:0; bottom:0; z-index:5; pointer-events:none;
	width:clamp(90px,14vw,280px);
}
.clean-page .stories-slider::before{left:0; background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0));}
.clean-page .stories-slider::after{right:0; background:linear-gradient(270deg,#fff 30%,rgba(255,255,255,0));}
/* 좌우 네비 — left/right 는 스크립트가 바깥 카드 모서리에 맞춰 다시 넣는다(아래는 폴백) */
.clean-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;
}
.clean-page .stories-nav:hover{transform:translateY(-50%) scale(1.07); box-shadow:0 12px 30px rgba(24,34,66,.26);}
.clean-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");
}
.clean-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");
}

/* ---------- 6. 리얼 후기 (무한 마퀴) ---------- */
.clean-page .cl-review{
	position:relative; overflow:hidden;
	padding:clamp(40px,4vw,56px) 0 clamp(56px,6vw,92px);
	background:linear-gradient(180deg,#F4FAFE 0%,#E8F3FB 52%,#F6FBFE 100%);
}
.clean-page .cl-review .wrap{position:relative;}
/* 비눗방울 장식 (제목 좌우) */
.clean-page .cl-review .wrap::before,
.clean-page .cl-review .wrap::after{
	content:""; position:absolute; z-index:0; border-radius:50%;
	background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.35) 42%,rgba(255,255,255,0) 70%);
	border:1px solid rgba(255,255,255,.85);
}
.clean-page .cl-review .wrap::before{width:clamp(38px,3.4vw,52px); aspect-ratio:1/1; left:calc(50% - clamp(150px,15vw,230px)); top:clamp(18px,2.4vw,36px);}
.clean-page .cl-review .wrap::after{width:clamp(48px,4.4vw,68px); aspect-ratio:1/1; left:calc(50% + clamp(110px,12vw,180px)); top:clamp(4px,1vw,16px);}
.clean-page .cl-review .wrap > *{position:relative; z-index:1;}
/* 제목 : 작은 브랜드색 소제목 + 큰 제목(뒷 단어만 브랜드색) + 설명 한 줄 */
.clean-page .review-title{text-align:center; margin-bottom:clamp(10px,1.2vw,16px);}
.clean-page .review-title .eyebrow{letter-spacing:var(--ls-menu);}
.clean-page .review-title .tit-point{color:var(--brand);}
.clean-page .cl-review .sec-desc{
	margin:0 0 clamp(30px,3.6vw,50px); text-align:center; color:var(--muted);
}
.clean-page .marquee-wrap{overflow:hidden; width:100%;}
/* 절반 구간에 든 카드 수(--mq-n, /include/review_marquee.jsp 가 넣음)에 비례해 시간을 정한다 →
   후기 수가 달라도 흐르는 속도는 같다 (카드 1장 = 14.4s, 모바일 10.4s) */
.clean-page .marquee{display:flex; gap:24px; width:max-content; animation:clSlide calc(var(--mq-n,10) * 14.4s) linear infinite;}
@keyframes clSlide{from{transform:translateX(0);} to{transform:translateX(calc(-50% - 12px));}}

.clean-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;
}
/* 카드 제목 — 2px 축소하여 여유 있게 두 줄 노출 */
.clean-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) */
.clean-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);
}
.clean-page .bmeta .w{font-weight:600; color:var(--ink-2);}
/* 대표 사진 */
.clean-page .bhero{width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#E3EBF3;}
.clean-page .bhero img{width:100%; height:100%; object-fit:cover;}
/* 미리보기 4칸 (사진 3 + 남은 장수) */
.clean-page .bgallery{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px;}
.clean-page .bgallery .g{position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#E3EBF3;}
.clean-page .bgallery .g img{width:100%; height:100%; object-fit:cover;}
/* 같은 사진의 다른 영역을 잡아 각 칸이 달라 보이게 한다 */
.clean-page .bgallery .g1 img{object-position:left top;}
.clean-page .bgallery .g2 img{object-position:center bottom;}
.clean-page .bgallery .g3 img{object-position:right center;}
.clean-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줄이 답답하지 않게 */
.clean-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;
}

/* ---------- 7. 자주 묻는 질문 ---------- */
.clean-page .cl-faq{background:#fff;}
.clean-page .faq{max-width:900px; margin:0 auto;}
/* 시안처럼 문항마다 옅은 테두리 박스 */
.clean-page .faq details{
	border:1px solid var(--line); border-radius:10px; background:#fff;
	transition:box-shadow .18s,border-color .18s;
}
.clean-page .faq details + details{margin-top:10px;}
.clean-page .faq details[open]{border-color:#C9DFF0; box-shadow:0 8px 24px rgba(24,34,66,.08);}
.clean-page .faq summary{
	position:relative; display:flex; align-items:flex-start; gap:10px;
	padding:18px 46px 18px 22px; cursor:pointer; list-style:none; color:var(--ink);
	font-size:var(--fs-body); font-weight:600; line-height:1.5; letter-spacing:var(--ls-body);
}
.clean-page .faq summary::-webkit-details-marker{display:none;}
.clean-page .faq summary .q{flex:0 0 auto; color:var(--ink); font-weight:700;}
/* 오른쪽 펼침 표시 */
.clean-page .faq summary::after{
	content:""; position:absolute; right:20px; top:50%; transform:translateY(-50%);
	width:18px; height:18px; transition:transform .2s;
	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='%237A8299' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.clean-page .faq details[open] summary::after{transform:translateY(-50%) rotate(180deg);}
.clean-page .faq .a{
	margin:0; padding:0 46px 20px 22px; color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 답변 첫 줄 강조 문구 — 입주·이사 / 에어컨 페이지 공통 */
.clean-page .faq .a-lead{display:block; margin-bottom:6px; color:var(--ink); font-weight:700;}

/* ---------- 8. 견적 문의 폼 ---------- */
.clean-page .cl-quote{position:relative; overflow:hidden; background:#EEF5FD;}
/* 배경 사진 — 없으면 위 단색 배경이 그대로 보인다 */
.clean-page .cl-quote-bg{position:absolute; inset:0; z-index:0;}
.clean-page .cl-quote-bg img{width:100%; height:100%; object-fit:cover; object-position:center;}
.clean-page .cl-quote .wrap{position:relative; z-index:1;}
.clean-page .cl-quote .sec-head{margin-bottom:clamp(24px,2.8vw,40px);}
.clean-page .cl-quote .sec-desc{color:var(--ink-2);}

/* 입력 카드 */
.clean-page .quote-card{
	max-width:760px; margin:0 auto; background:#fff; border-radius:20px;
	padding:clamp(24px,3vw,44px); box-shadow:0 20px 50px rgba(24,34,66,.13);
}
/* 단계 사이 구분선 */
.clean-page .q-step + .q-step{
	margin-top:clamp(24px,2.8vw,38px); padding-top:clamp(24px,2.8vw,38px); border-top:1px solid var(--line);
}
.clean-page .q-tit{
	display:flex; align-items:center; gap:10px; margin:0 0 clamp(16px,1.8vw,24px); color:var(--ink);
	font-size:var(--fs-menu); font-weight:700; line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
}
/* 단계 번호 배지 */
.clean-page .q-no{
	flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff;
	display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1;
	font-variant-numeric:tabular-nums;
}

/* ① 청소 서비스 선택 — 라디오 카드 3장 */
.clean-page .q-svc{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,14px);}
.clean-page .q-pick{display:block; cursor:pointer; margin:0;}
/* 기본 라디오는 숨기고 카드 왼쪽 위의 동그라미로 대신 표시한다 */
.clean-page .q-pick input{position:absolute; width:1px; height:1px; opacity:0; margin:0;}
.clean-page .pick-box{
	position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
	height:100%; padding:clamp(38px,3.6vw,46px) 12px clamp(16px,1.8vw,22px);
	border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px var(--line);
	transition:background .15s,box-shadow .15s;
}
.clean-page .pick-box::before{
	content:""; position:absolute; left:14px; top:14px; width:18px; height:18px; border-radius:50%;
	background:#fff; box-shadow:inset 0 0 0 1.5px #C6D2E2; transition:box-shadow .15s;
}
.clean-page .q-pick:hover .pick-box{background:var(--brand-soft);}
.clean-page .q-pick input:checked + .pick-box{background:var(--brand-soft); box-shadow:inset 0 0 0 2px var(--brand);}
.clean-page .q-pick input:checked + .pick-box::before{box-shadow:inset 0 0 0 5px var(--brand);}
.clean-page .q-pick input:focus-visible + .pick-box{outline:2px solid var(--brand); outline-offset:3px;}
/* 아이콘 — 선택하면 브랜드색으로 */
.clean-page .pick-ic{
	width:clamp(30px,2.8vw,38px); height:clamp(30px,2.8vw,38px); background-color:#9FB0C6;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
	transition:background-color .15s;
}
.clean-page .q-pick input:checked + .pick-box .pick-ic{background-color:var(--brand);}
.clean-page .pick-ic.ic-home{
	-webkit-mask-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='%23000' stroke-width='1.8' 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");
	        mask-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='%23000' stroke-width='1.8' 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");
}
.clean-page .pick-ic.ic-truck{
	-webkit-mask-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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5h11v9H2z'/%3E%3Cpath d='M13 10.5h4l4 3.4v2.6h-8z'/%3E%3Ccircle cx='7' cy='18' r='1.9'/%3E%3Ccircle cx='17.5' cy='18' r='1.9'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5h11v9H2z'/%3E%3Cpath d='M13 10.5h4l4 3.4v2.6h-8z'/%3E%3Ccircle cx='7' cy='18' r='1.9'/%3E%3Ccircle cx='17.5' cy='18' r='1.9'/%3E%3C/svg%3E");
}
.clean-page .pick-ic.ic-live{
	-webkit-mask-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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6.5l7-3.5v18'/%3E%3Cpath d='M11 21V9.5l9 3V21'/%3E%3Cpath d='M2.5 21h19'/%3E%3Cpath d='M7 9.5v.01M7 13v.01M7 16.5v.01M15.5 14v.01M15.5 17.5v.01'/%3E%3C/svg%3E");
	        mask-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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6.5l7-3.5v18'/%3E%3Cpath d='M11 21V9.5l9 3V21'/%3E%3Cpath d='M2.5 21h19'/%3E%3Cpath d='M7 9.5v.01M7 13v.01M7 16.5v.01M15.5 14v.01M15.5 17.5v.01'/%3E%3C/svg%3E");
}
.clean-page .pick-tit{
	color:var(--ink); font-size:var(--fs-menu); font-weight:700; line-height:1.3; letter-spacing:var(--ls-menu);
}
.clean-page .q-pick input:checked + .pick-box .pick-tit{color:var(--brand-deep);}
.clean-page .pick-desc{
	color:var(--ink-2); font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:1.5; letter-spacing:var(--ls-meta);
}

/* ②③ 입력 필드 */
.clean-page .q-grid{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:clamp(14px,1.6vw,20px) clamp(16px,2vw,28px);
}
.clean-page .q-field label{
	display:block; margin-bottom:8px; color:var(--ink);
	font-size:var(--fs-meta); font-weight:700; line-height:1.4; letter-spacing:var(--ls-meta);
}
.clean-page .q-field label em{font-style:normal; color:#E2483D; margin-left:2px;}
/* 게시판 공통 CSS(board.css) 보다 뒤에 실리므로 여기 값이 적용된다 */
.clean-page .q-field input[type="text"],
.clean-page .q-field select{
	width:100%; height:46px; padding:0 14px; margin:0; border:0; border-radius:8px;
	background:#fff; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink);
	font-family:inherit; font-size:var(--fs-meta); font-weight:500; letter-spacing:var(--ls-meta);
	transition:box-shadow .15s;
}
.clean-page .q-field input[type="text"]:focus,
.clean-page .q-field select:focus{box-shadow:inset 0 0 0 1.5px var(--brand); outline:none;}
.clean-page .q-field input::placeholder{color:var(--muted); opacity:1;}
/* 날짜는 달력으로만 채우므로 readonly 다 — 공통 CSS 의 회색 배경을 되돌린다 */
.clean-page .q-field input[readonly]{cursor:pointer; background-color:#fff;}
/* 한 줄에 입력 + 버튼/단위 */
.clean-page .q-inline{display:flex; align-items:center; gap:8px;}
.clean-page .q-inline > input{flex:1 1 auto; min-width:0;}
/* 단위를 입력칸 안쪽에 붙이는 형태 (베란다 개수) */
.clean-page .q-inline.is-boxed{
	gap:6px; padding-right:14px; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px var(--line);
	transition:box-shadow .15s;
}
.clean-page .q-inline.is-boxed:focus-within{box-shadow:inset 0 0 0 1.5px var(--brand);}
.clean-page .q-field .q-inline.is-boxed input[type="text"]{box-shadow:none; background:none;}
.clean-page .q-field .q-inline.is-boxed input[type="text"]:focus{box-shadow:none;}
.clean-page .q-unit{flex:0 0 auto; color:var(--ink-2); font-size:var(--fs-meta); font-weight:600;}
/* 평/㎡ 선택 — 폭은 --q-side-w.
   기본 화살표는 위치를 옮길 수 없어 지우고, 오른쪽에서 띄운 화살표를 직접 그린다 */
.clean-page{--q-side-w:105px;}
.clean-page .q-field .q-unit-sel{
	flex:0 0 var(--q-side-w); width:var(--q-side-w); padding:0 36px 0 16px;
	-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
	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='%234C5573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
/* 입력칸 아래 보조 안내 카드 (공급평수·베란다) — 한 줄에 놓인 두 카드가 같은 폭·높이가 되도록
   입력칸 묶음을 세로 flex 로 두고 카드가 남은 높이를 채운다 */
.clean-page .q-field{display:flex; flex-direction:column;}
.clean-page .q-tip.is-field{
	flex:1 1 auto; flex-wrap:nowrap; margin-top:8px; padding:12px 14px; gap:10px; align-items:flex-start;
}
.clean-page .q-tip.is-field .tip-ic{margin-top:1px;}
.clean-page .q-tip.is-field .tip-txt{flex:1 1 0; min-width:0;}
.clean-page .q-tip.is-field p{margin:0; word-break:keep-all;}
.clean-page .q-tip.is-field b + p{margin-top:2px;}
/* 카드 안 버튼은 알약 대신 글 아래 텍스트 링크로 — 카드 높이를 키우지 않는다 */
.clean-page .q-tip.is-field .tip-btn{
	width:auto; height:auto; margin-top:6px; padding:0; gap:4px; justify-content:flex-start;
	background:none; box-shadow:none; border-radius:0; font-weight:700;
}
.clean-page .q-tip.is-field .tip-btn:hover{background:none; text-decoration:underline; text-underline-offset:3px;}
/* .q-tip b 는 제목용(block)이라 문장 속 강조는 인라인으로 되돌린다 */
.clean-page .q-tip.is-field p b{display:inline; color:var(--brand-deep); font-weight:700;}
/* 지역 · 시/군/구 선택 — 에어컨 견적 폼(service_aircon.css)과 같은 모양 */
.clean-page .q-field select:not(.q-unit-sel){
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	padding-right:38px;
	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='%234C5573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
/* 지역을 고르기 전의 시/군/구 — 아직 고를 수 없다는 걸 배경색으로 알린다 */
.clean-page .q-field select[disabled]{
	background-color:#F1F4F9; color:var(--muted); cursor:not-allowed;
}
/* 날짜 입력 오른쪽 달력 표시 */
.clean-page .q-field input.has-cal{
	padding-right:42px;
	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='%234C5573' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.4'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}

/* 방문 희망 날짜 : 미정 체크 시 잠긴 칸 — 시/군/구 잠금과 같은 배경 */
.clean-page .q-field input[disabled]{background-color:#F1F4F9; color:var(--muted); cursor:not-allowed;}
.clean-page .q-field input[disabled]::placeholder{color:var(--muted);}
/* 날짜 칸 옆 미정 체크박스 — 입력칸 높이(46px)에 맞춘다. 체크박스 모양은 아래 .q-check 를 쓴다 */
.clean-page .q-field .q-check.is-tbd{flex:0 0 auto; margin:0;}
.clean-page .q-check.is-tbd .q-check-box{min-height:46px; height:46px; padding:0 14px; gap:8px; white-space:nowrap;}

/* 추가 서비스 신청 (체크박스 4칸 + 안내 문구) — .q-grid 한 줄 전체를 쓴다 */
.clean-page .q-extra{grid-column:1 / -1;}
.clean-page .q-extra-tit{
	margin:0 0 8px; color:var(--ink);
	font-size:var(--fs-meta); font-weight:700; line-height:1.4; letter-spacing:var(--ls-meta);
}
.clean-page .q-extra-list{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.clean-page .q-check{position:relative; display:block; margin:0; cursor:pointer;}
/* 진짜 체크박스는 감추고 키보드 조작·값만 쓴다 (.q-pick 과 같은 방식) */
.clean-page .q-check input{position:absolute; width:1px; height:1px; opacity:0; margin:0;}
.clean-page .q-check-box{
	display:flex; align-items:center; gap:10px; min-height:52px; height:100%; padding:10px 12px; box-sizing:border-box;
	border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink);
	font-size:var(--fs-meta); font-weight:500; line-height:1.35; letter-spacing:var(--ls-meta); word-break:keep-all;
	transition:background .15s, box-shadow .15s;
}
.clean-page .q-check-ic{
	flex:0 0 20px; width:20px; height:20px; border-radius:3px; background:#fff; box-shadow:inset 0 0 0 1px #C9D0DC;
	background-repeat:no-repeat; background-position:center; background-size:14px;
}
.clean-page .q-check:hover .q-check-box{box-shadow:inset 0 0 0 1px var(--brand);}
.clean-page .q-check input:focus-visible + .q-check-box{outline:2px solid var(--brand); outline-offset:2px;}
.clean-page .q-check input:checked + .q-check-box{background:var(--brand-soft); box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand-deep);}
.clean-page .q-check input:checked + .q-check-box .q-check-ic{
	background-color:var(--brand); box-shadow:none;
	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='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* 안내 카드 — 한 줄 문구라 여러 줄용 위쪽 맞춤(.q-tip.is-field) 대신 아이콘과 글을 세로 가운데로 맞춘다 */
.clean-page .q-extra .q-tip.is-field{align-items:center;}
.clean-page .q-extra .q-tip.is-field .tip-ic{margin-top:0;}
@media (max-width:760px){
	.clean-page .q-extra-list{grid-template-columns:repeat(2,1fr);}
}

/* 베란다 개수 안내 */
.clean-page .q-tip{
	display:flex; align-items:center; gap:12px; margin-top:clamp(12px,1.4vw,16px);
	padding:14px 16px; border-radius:10px; background:#EAF3FC;
}
.clean-page .q-tip .tip-ic{
	flex:0 0 20px; width:20px; height:20px; background-color:var(--brand);
	-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23000'/%3E%3Cpath d='M12 6.6a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3zM10.95 10.6h2.1v6.8h-2.1z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23000'/%3E%3Cpath d='M12 6.6a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3zM10.95 10.6h2.1v6.8h-2.1z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}
.clean-page .q-tip .tip-txt{flex:1 1 auto; min-width:0;}
.clean-page .q-tip b{
	display:block; color:var(--ink); font-size:var(--fs-meta); font-weight:700; line-height:1.4; letter-spacing:var(--ls-meta);
}
.clean-page .q-tip p{
	margin:2px 0 0; color:var(--ink-2); font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:1.5; letter-spacing:var(--ls-meta);
}
/* 모달을 여는 버튼 — 버튼 기본 모양(테두리)은 지우고 알약 모양만 남긴다 */
.clean-page .tip-btn{
	flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
	border:0; cursor:pointer;
	border-radius:999px; background:#fff; color:var(--brand-deep); box-shadow:inset 0 0 0 1px #BFDCF1;
	font-size:var(--fs-meta); font-weight:600; white-space:nowrap; transition:background .15s;
}
.clean-page .tip-btn:hover{background:var(--brand-soft); color:var(--brand-deep);}
.clean-page .tip-btn::after{
	content:""; width:11px; height:11px; flex:0 0 11px;
	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='%23166D93' 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;
}

/* 전송 버튼 */
.clean-page .q-submit{
	display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
	height:56px; margin-top:clamp(24px,2.8vw,36px); border-radius:10px;
	background:var(--brand); color:#fff;
	font-size:var(--fs-btn); font-weight:700; line-height:var(--lh-btn); letter-spacing:var(--ls-btn);
	transition:background .15s;
}
.clean-page .q-submit:hover{background:var(--brand-dark);}
.clean-page .q-submit::after{
	content:""; width:16px; height:16px; flex:0 0 16px;
	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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
	.clean-page .cl-hero-copy{max-width:min(640px,72%);}
	/* 도면과 정보 카드를 위아래로 쌓는다 */
	.clean-page .scope-wrap{grid-template-columns:1fr;}
	.clean-page .promise-in{grid-template-columns:1fr; gap:32px;}
}
@media (max-width:900px){
	.clean-page .cl-hero{min-height:clamp(440px,64vw,560px);}
	.clean-page .cl-hero-copy{max-width:none;}
	/* 카피가 영상 전체 폭에 걸치므로 딤드를 세로 그라데이션으로 바꾸고 전체를 조금 더 어둡게 한다 */
	.clean-page .cl-hero-bg::before{background:rgba(8,12,24,.2);}
	.clean-page .cl-hero-bg::after{
		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%);
	}
	/* 좁은 화면은 카피·카드가 사진 위로 올라오므로, 사진을 아래쪽에만 옅게 둔다.
	   가로로 흘려보낼 여백도 없어 마스크는 끈다 */
	.clean-page .cl-promise-bg{left:0; right:0; top:auto; height:min(74vw,430px); opacity:.45;}
	.clean-page .cl-promise-bg img{-webkit-mask-image:none; mask-image:none;}
	.clean-page .pm-body{grid-template-columns:1fr;}
	/* 글과 사진이 위아래로 놓이므로, 진행 표시(03 / 07) 와 사진 사이에 여백을 둔다 */
	.clean-page .pm-img{min-height:160px; aspect-ratio:16/9; margin-top:clamp(16px,2.4vw,22px);}
}
@media (max-width:640px){
	.clean-page section{padding:clamp(48px,11vw,68px) 0;}
	.clean-page .tabs{gap:6px;}
	.clean-page .tabs button{height:38px; padding:0 14px; gap:6px;}
	.clean-page .tabs button::before{flex-basis:15px; width:15px; height:15px;}
	/* 공간 탭 6개는 좁은 화면에서 3개씩 두 줄로 반듯하게 놓는다 (줄바꿈에 맡기면 4+2 로 갈린다) */
	.clean-page .cl-scope .tabs{
		display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
	}
	.clean-page .cl-scope .tabs button{justify-content:center; padding:0 8px;}
	/* 도면 영역 — 제목·탭을 가운데로 모으고 도면은 흰 카드에 얹는다 */
	.clean-page .cl-scope .sec-head.is-left{text-align:center;}
	.clean-page .scope-map{background:#fff; border-radius:16px; overflow:hidden;}
	/* 청소 항목은 두 칸씩 (글자를 한 단계 줄여 좁은 폭에 맞춘다) */
	.clean-page .scope-list{grid-template-columns:repeat(2,1fr); gap:12px 10px;}
	.clean-page .scope-list li{font-size:var(--fs-meta); gap:7px;}
	.clean-page .scope-list li::before{flex-basis:16px; width:16px; height:16px; border-radius:5px; background-size:10px;}
	/* 안내 사항은 접어 두고 제목 옆 버튼으로 여닫는다 */
	.clean-page .notice-btn{
		display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:0;
		color:var(--brand); font-size:var(--fs-meta); font-weight:600; white-space:nowrap;
	}
	/* 아이콘은 이미 브랜드색으로 그려진 파일이라 mask 로 칠하지 않고 그대로 얹는다 */
	.clean-page .notice-btn::after{
		content:""; width:16px; height:16px; flex:0 0 16px;
		background:url("/img/error.svg") center/contain no-repeat;
	}
	.clean-page .scope-info .notice{display:none; margin-top:clamp(16px,2.4vw,22px);}
	.clean-page .scope-info .notice.is-open{display:block;}
	/* 첫 번째 브레이크포인트: "많은 경우" 다음 줄바꿈 */
	.clean-page .scope-info .notice .nb-br1{display:inline;}
	/* 모바일은 폭이 좁아 사진을 60% 로 줄이면 너무 작다 → 띠 전체를 쓰고 높이를 확보한다 */
	/* 모바일에서도 띠 비율은 사진과 같게 유지한다 (다르게 잡으면 그만큼 사진이 잘린다) */
	.clean-page .ba-handle::after{width:36px; height:36px; background-size:18px;}
	.clean-page .ba-label{padding:6px 14px;}
	/* 모바일에서는 위아래로 도는 스택 대신 가로로 넘기는 슬라이드로 바꾼다.
	   좁은 폭에 접힌 바 6장을 옆으로 늘어놓을 수 없으므로, 카드를 세로로 세워
	   한 장씩 스와이프해 넘긴다 (회전 대신 화면 자체를 좌우로 미는 방식) */
	.clean-page .promise-stack{
		flex-direction:row; min-height:0; gap:18px;
		overflow-x:auto; overflow-y:hidden;
		scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
		padding-bottom:22px;			/* 카드와 스크롤바 손잡이 사이 여백 */
		scrollbar-width:thin; scrollbar-color:#C3D8EA transparent;	/* 파이어폭스 */
	}
	/* 스크롤바는 손잡이만 남기고 홈(track)은 지운다 — 두지 않으면 브라우저 기본 회색 띠가 깔린다 */
	.clean-page .promise-stack::-webkit-scrollbar{height:4px; background:transparent;}
	.clean-page .promise-stack::-webkit-scrollbar-track{background:transparent; box-shadow:none; border:0;}
	.clean-page .promise-stack::-webkit-scrollbar-thumb{background:#C3D8EA; border-radius:999px;}
	/* 여닫기가 없으므로 카드 높이는 내용에 맡기고(height:auto), 스크립트가 전환 중에 넣는
	   인라인 높이·이동값도 함께 무시한다 */
	.clean-page .pm,
	.clean-page .pm.is-open{
		flex:0 0 86%; width:auto; scroll-snap-align:start;
		scroll-snap-stop:always;			/* 세게 밀어도 한 장씩만 넘어간다 */
		order:0 !important;				/* 스크립트가 넣는 회전 순서를 쓰지 않는다 */
		transform:none !important;		/* 스와이프로 넘기므로 FLIP 이동도 쓰지 않는다 */
		height:auto !important; overflow:visible;
		border-radius:14px; box-shadow:none;
		transition:none; opacity:1 !important;
	}
	/* 접힌 바는 감추고 일곱 장 모두 펼친 모습으로 늘어놓는다.
	   흰 카드 모양(배경·여백)은 원래 펼친 카드에만 걸려 있으므로 여기서 전부에 준다 */
	.clean-page .pm .pm-head{display:none;}
	.clean-page .pm .pm-body,
	.clean-page .pm.is-open .pm-body{
		position:static;
		display:flex; flex-direction:column; height:100%;
		min-height:0; margin:0;
		opacity:1; pointer-events:auto; transition:none;
		padding:20px 18px 22px; border-radius:14px;
		background:#fff; box-shadow:none;
	}
	/* 카드 높이는 가장 긴 카드에 맞춰 나란히 서고, 진행 표시(01 / 07)는 사진 바로 위에 붙는다 */
	.clean-page .pm-txt{flex:1 1 auto;}
	.clean-page .pm-img{flex:0 0 auto; min-height:0; aspect-ratio:16/10;}
	.clean-page .m-br{display:inline;}
	.clean-page .d-br{display:none;}
	.clean-page .faq summary{padding:15px 40px 15px 16px;}
	.clean-page .faq .a{padding:0 40px 16px 16px;}
	.clean-page .marquee{animation-duration:calc(var(--mq-n,10) * 10.4s);}
	.clean-page .ba-guide{gap:10px;}
	/* 좁은 화면의 카드 폭은 스크립트가 화면의 56% 로 잡는다 — 여기서는 페이드·버튼만 조정 */
	.clean-page .stories-slider::before,
	.clean-page .stories-slider::after{width:clamp(28px,7vw,56px);}
	.clean-page .stories-prev{left:6px;}
	.clean-page .stories-next{right:6px;}
	/* 견적 문의 — 한 칸씩 세로로. 서비스 카드는 아이콘을 왼쪽에 두어 높이를 줄인다 */
	.clean-page .q-svc{grid-template-columns:1fr; gap:8px;}
	.clean-page .pick-box{
		display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:3px 12px;
		text-align:left; padding:14px 14px 14px 40px;
	}
	.clean-page .pick-box::before{top:50%; margin-top:-9px;}
	.clean-page .pick-ic{grid-row:1 / span 2; width:28px; height:28px;}
	.clean-page .pick-desc br{display:none;}
	.clean-page .q-grid{grid-template-columns:1fr;}
	.clean-page .q-tip{flex-wrap:wrap;}
	.clean-page .q-tip .tip-txt{flex-basis:calc(100% - 32px);}
	.clean-page .tip-btn{width:100%; justify-content:center; margin-top:2px;}
	.clean-page .q-submit{height:50px;}
}

@media (max-width:460px){
	/* 두 번째 브레이크포인트: 2줄 유지를 위해 "경우" 다음 개행은 끄고 "진행되지 않아" 다음 개행 활성화 */
	.clean-page .scope-info .notice li{font-size:11.5px; letter-spacing:-.03em;}
	.clean-page .scope-info .notice .nb-br1{display:none;}
	.clean-page .scope-info .notice .nb-br2{display:inline;}
}