@charset "utf-8";
/* ============================================================
   service_aircon.css — 에어컨 분해청소 소개 페이지 전용
   - 대상 : www/service/aircon/index.jsp
   - 이 페이지는 service_cleaning.css 를 함께 로드한다.
     (공통 섹션 여백 · 탭 · Before/After 비교 · FAQ · 견적 폼 · 베란다 모달을 그대로 쓴다)
     → 이 파일에는 에어컨 페이지에만 있는 섹션과 차이나는 부분만 둔다.
   - 마크업 : <main class="clean-page ac-page"> — .clean-page 공통 규칙 위에 .ac-page 를 얹는다.
   - 모든 선택자를 .ac-page 로 스코프 한정 (다른 페이지 오염 방지)
   - 색·크기 값은 site.css 의 :root 토큰만 참조한다.
     (타이포 등급 : --fs-h1 / --fs-h2 / --fs-card / --fs-body / --fs-menu / --fs-btn / --fs-meta)
   ============================================================ */

/* 시안의 검정 히어로에 쓰는 딥 컬러. site.css 토큰의 --navy(#182242) 보다 어두운 계열이라
   이 페이지 안에서만 쓰는 지역 변수로 둔다(전역 토큰을 늘리지 않는다). */
.ac-page{
	--ac-dark:#0B1020;
	--ac-dark-2:#161C2E;
	/* 사진이 아직 없는 자리(약속 카드 등)에 보이는 바탕 */
	--ac-ph:#D9DEE5;
}

/* ---------- 1. 히어로 : 어두운 배경 + 좌측 카피 ---------- */
/* 시안 기준 : 헤더 바로 아래 영상 히어로. 입주·이사·거주청소 페이지(.cl-hero)와 같은 검정 딤드 농도를 쓴다.
   영상이 로드되기 전에는 poster 사진, 그것도 없으면 아래 그라데이션이 보인다. */
.ac-page .ac-hero{
	position:relative; display:flex; align-items:center; overflow:hidden; padding:0;
	/* 높이는 입주·이사·거주청소 페이지의 히어로(.cl-hero)와 같은 값이다 — 한쪽을 바꾸면 함께 맞출 것 */
	min-height:clamp(520px,42vw,760px);
	background:linear-gradient(180deg,var(--ac-dark) 0%,var(--ac-dark-2) 100%);
}
.ac-page .ac-hero-bg{position:absolute; inset:0; z-index:0;}
.ac-page .ac-hero-bg img,
.ac-page .ac-hero-bg video{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
/* 전체에 옅은 딤(::before)을 깔고, 카피가 놓이는 왼쪽은 그라데이션(::after)으로 더 어둡게 한다 */
.ac-page .ac-hero-bg::before,
.ac-page .ac-hero-bg::after{content:""; position:absolute; inset:0; pointer-events:none;}
.ac-page .ac-hero-bg::before{background:rgba(8,12,24,.14);}
.ac-page .ac-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%);
}
.ac-page .ac-hero .wrap{position:relative; z-index:1; width:100%;}
.ac-page .ac-hero-copy{max-width:min(760px,64%); text-shadow:0 1px 14px rgba(0,0,0,.35);}
/* 페이지에서 유일한 h1 */
.ac-page .ac-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);
}
.ac-page .ac-hero h1 em{font-style:normal; color:var(--brand);}
.ac-page .ac-hero .hero-desc{
	margin:clamp(18px,2.2vw,30px) 0 0; color:rgba(255,255,255,.78);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:1.85; letter-spacing:var(--ls-body);
}

/* ---------- 2. Before / After (부위별) ----------
   입주·이사·거주청소 페이지와 같은 구성이라 service_cleaning.css 의 .cl-std 규칙을
   그대로 쓴다 — 이 파일에 따로 둘 스타일이 없다. */

/* ---------- 3. 체계적인 프로세스 4단계 ---------- */
.ac-page .ac-promise{background:#fff;}
.ac-page .ac-promise .sec-title .lead{
	display:block; color:var(--ink);
	/* 첫 줄은 큰 제목보다 한 단계 작게 — 시안의 2단 제목 */
	font-size:var(--fs-card); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
	margin-bottom:clamp(4px,.6vw,10px);
}
.ac-page .ac-promise .sec-title .tit-point{color:var(--brand);}
/* 세로 칸 4개를 선으로 나눈 아코디언.
   기본은 첫 칸이 넓게 열려 GIF 가 보이고, 마우스를 올린 칸이 대신 열린다.
   ★ JS 없이 :hover 만으로 처리한다 — 열림 상태를 CSS 가 갖고 있어 스크립트 실패로 닫히는 일이 없다.
     (호버가 없는 터치 화면은 아래 반응형에서 세로 목록으로 바꿔 전부 펼친다) */
/* 높이를 고정하지 않고 min-height 만 둔다 — 칸끼리는 stretch 로 높이가 같아지고,
   설명이 한 줄 더 길어지는 칸이 생겨도 잘리지 않는다 */
.ac-page .ac-promise-list{
	display:flex; align-items:stretch;
	min-height:clamp(440px,40vw,600px);
	border-right:1px solid var(--line);
}
.ac-page .acp{
	position:relative; display:flex; flex-direction:column; overflow:hidden;
	flex:1 1 0; min-width:0;
	padding:clamp(18px,1.8vw,28px) clamp(14px,1.4vw,24px) clamp(22px,2.2vw,34px);
	border-left:1px solid var(--line);
	transition:flex-grow .45s cubic-bezier(.22,.61,.36,1);
}
/* 열린 칸 — ① 처음에는 첫 칸 ② 목록 어딘가에 마우스가 올라가면 그 칸 */
.ac-page .acp:first-child,
.ac-page .acp:hover,
.ac-page .acp:focus-within{flex-grow:2.6;}
/* 다른 칸으로 옮겨가면 첫 칸은 원래 폭으로 돌아간다 (자기 자신에 올렸을 때는 제외) */
.ac-page .ac-promise-list:hover .acp:first-child:not(:hover):not(:focus-within){flex-grow:1;}

/* 큰 번호 — 칸 위쪽 (레퍼런스처럼 칸 왼쪽에 붙인다) */
.ac-page .acp-no{
	display:block; color:var(--brand);
	font-size:clamp(46px,4.6vw,88px); font-weight:700; line-height:1; letter-spacing:-.04em;
	font-variant-numeric:tabular-nums;
}
/* 영상 — 모든 칸에 첫 장면(정지 화면)으로 보이고, 마우스를 올린 칸만 재생된다(index.jsp 스크립트).
   ★ 높이는 고정값이다. 남는 공간을 채우게(flex:1) 두면 설명 줄 수가 다른 칸끼리
     문구 블록이 위아래로 밀려 제목 선이 서로 어긋난다. */
.ac-page .acp-media{
	position:relative; flex:0 0 auto;
	height:clamp(190px,21vw,300px);
	margin:clamp(16px,1.8vw,26px) 0; border-radius:12px; overflow:hidden;
	background:var(--ac-ph);
}
.ac-page .acp-media img,
.ac-page .acp-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}

/* 문구 — 닫힌 칸에도 그대로 남는다.
   칸이 열리고 닫힐 때마다 폭이 달라지면 문단이 매번 다시 줄바꿈되어 글자가 출렁인다.
   그래서 스크립트가 '닫힌 칸' 폭을 재서 아래 width 에 고정값으로 넣는다(index.jsp 참조).
   → 어떤 상태에서도 줄바꿈 위치와 문단 시작점이 그대로다. 스크립트가 없으면 종전처럼 칸 폭을 따른다. */
.ac-page .acp-body{width:100%; word-break:keep-all;}
.ac-page .acp-tit{
	display:block; color:var(--brand);
	font-size:var(--fs-menu); font-weight:700; line-height:1.45; letter-spacing:var(--ls-menu);
}
.ac-page .acp-desc{
	display:block; margin-top:8px; color:var(--muted);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:1.7; letter-spacing:var(--ls-meta);
	transition:color .3s ease;
}
.ac-page .acp:first-child .acp-desc,
.ac-page .acp:hover .acp-desc,
.ac-page .acp:focus-within .acp-desc{color:var(--ink-2);}
.ac-page .ac-promise-list:hover .acp:first-child:not(:hover):not(:focus-within) .acp-desc{color:var(--muted);}

/* ---------- 4. 자신있게 약속드립니다 (3카드 슬라이드) ---------- */
/* 배경 사진(밝은 하늘색 그라데이션)을 깔고 그 위에 카드를 얹는다.
   사진이 없을 때도 같은 인상이 남도록 바탕색을 사진 톤에 맞춰 둔다. */
.ac-page .ac-trust{
	position:relative; overflow:hidden;
	background:#E8F1FB; padding-top:clamp(40px,4vw,56px);
}
.ac-page .ac-trust-bg{position:absolute; inset:0; z-index:0;}
.ac-page .ac-trust-bg img{width:100%; height:100%; object-fit:cover; object-position:center;}
.ac-page .ac-trust .wrap{position:relative; z-index:1;}
.ac-page .ac-trust .sec-title .lead{
	display:block; color:var(--ink);
	font-size:var(--fs-card); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
	margin-bottom:clamp(4px,.6vw,10px);
}
.ac-page .ac-trust .sec-title em{font-style:normal; color:var(--brand);}
/* 카드 4장을 2 x 2 로 —  가로줄보다 세로줄 사이를 넉넉히 띄워 두 줄이 서로 붙어 보이지 않게 한다 */
.ac-page .ac-trust-list{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:clamp(34px,4vw,64px) clamp(20px,2.4vw,40px);
}
.ac-page .actr{display:flex; flex-direction:column;}
/* 카드가 화면 절반 폭이라 비율만 두면 사진이 지나치게 커진다 —
   높이 상한을 함께 걸어 넓은 화면에서도 적당한 띠로 남게 한다(잘림은 object-fit 이 처리). */
.ac-page .actr-thumb{
	position:relative; width:100%; aspect-ratio:16/9; max-height:clamp(200px,22vw,330px);
	border-radius:14px; overflow:hidden;
	background:var(--ac-ph);
}
.ac-page .actr-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ac-page .actr-tit{
	display:flex; align-items:center; gap:clamp(8px,1vw,12px);
	margin:clamp(16px,1.8vw,24px) 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);
}
/* 번호 배지 */
.ac-page .actr-no{
	flex:0 0 auto; width:1.5em; height:1.5em; border-radius:50%;
	background:var(--brand); color:#fff; display:grid; place-items:center;
	font-size:.62em; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
}
/* 제목 아래 굵은 한 줄(강조 문구) → 그 아래 설명 */
.ac-page .actr-lead{
	margin:clamp(10px,1.2vw,14px) 0 0; color:var(--ink);
	font-size:var(--fs-body); font-weight:700; line-height:1.6; letter-spacing:var(--ls-body);
}
.ac-page .actr-desc{
	margin:clamp(6px,.7vw,8px) 0 0; color:var(--ink-2);
	font-size:var(--fs-body); font-weight:var(--fw-body); line-height:1.75; letter-spacing:var(--ls-body);
}

/* ---------- 5. 배상책임보험 배너 ---------- */
.ac-page .ac-cert{
	position:relative; overflow:hidden;
	background:linear-gradient(135deg,#DCEBFA 0%,#CFE4F8 44%,#E8F2FC 100%);
}
.ac-page .ac-cert-in{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
	align-items:center; gap:clamp(28px,4vw,64px);
}
.ac-page .ac-cert h2{
	margin:0; color:var(--ink);
	font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:1.35; letter-spacing:var(--ls-h2);
}
/* 보험 설명 박스 */
.ac-page .ac-cert-box{
	margin:clamp(22px,2.6vw,36px) 0 0; padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
	border-radius:14px; background:#fff; box-shadow:0 12px 32px rgba(24,34,66,.10);
	max-width:640px;
}
.ac-page .ac-cert-box b{
	display:block; color:var(--ink);
	font-size:var(--fs-menu); font-weight:700; line-height:1.4; letter-spacing:var(--ls-menu);
}
.ac-page .ac-cert-box .line{
	display:flex; align-items:flex-start; gap:9px; margin:12px 0 0; color:var(--ink-2);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:1.65; letter-spacing:var(--ls-meta);
}
.ac-page .ac-cert-box .line em{font-style:normal; color:var(--brand-deep); font-weight:700;}
/* 체크 아이콘 */
.ac-page .ac-cert-box .line::before{
	content:""; flex:0 0 18px; width:18px; height:18px; margin-top:1px; 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='m7.6 12.2 3 3 5.8-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%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='m7.6 12.2 3 3 5.8-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 인증서 — 파일이 없으면 흰 카드 자리만 보인다 */
.ac-page .ac-cert-img{
	position:relative; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
	background:linear-gradient(160deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 100%);
	box-shadow:0 18px 44px rgba(24,34,66,.16);
}
.ac-page .ac-cert-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:clamp(10px,1.4vw,20px);}

/* ---------- 7. 간편 견적 문의 ----------
   입력칸·카드·버튼은 service_cleaning.css 의 .cl-quote / .quote-card / .q-field 를 그대로 쓴다.
   이 페이지 폼은 단계 구분 없이 입력칸만 있어, 여기서는 select 모양만 더한다. */
.ac-page .q-field select{
	-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;
}
/* 지역을 고르기 전의 시/군/구 — 아직 고를 수 없다는 걸 배경색으로 알린다 */
.ac-page .q-field select[disabled]{
	background-color:#F1F4F9; color:var(--muted); cursor:not-allowed;
}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
	.ac-page .ac-hero-copy{max-width:min(760px,80%);}
	/* 칸이 좁아지므로 열린 칸을 조금 더 벌린다 */
	.ac-page .acp:first-child,
	.ac-page .acp:hover,
	.ac-page .acp:focus-within{flex-grow:3.2;}
	/* 보험 배너는 위아래로 */
	.ac-page .ac-cert-in{grid-template-columns:1fr; gap:clamp(24px,3vw,40px);}
	.ac-page .ac-cert-img{max-width:560px; margin:0 auto;}
}
@media (max-width:900px){
	/* 호버가 없는 화면에서는 아코디언을 세로 목록으로 펴고 GIF 를 모두 보여준다 */
	.ac-page .ac-promise-list{display:block; height:auto; border-right:0;}
	.ac-page .acp{
		display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
		column-gap:clamp(14px,2.6vw,22px);
		padding:clamp(20px,3.4vw,28px) 0;
		border-left:0; border-top:1px solid var(--line);
	}
	.ac-page .acp:last-child{border-bottom:1px solid var(--line);}
	.ac-page .acp-no{grid-row:1 / span 2; font-size:clamp(34px,8vw,46px);}
	.ac-page .acp-media{
		grid-column:2; order:2;
		width:100%; height:auto; aspect-ratio:16/10; margin:clamp(12px,2.4vw,18px) 0 0;
	}
	.ac-page .acp-body{grid-column:2; order:1;}
	.ac-page .acp-desc,
	.ac-page .ac-promise-list:hover .acp:first-child:not(:hover):not(:focus-within) .acp-desc{color:var(--ink-2);}

	.ac-page .ac-hero{min-height:clamp(440px,64vw,560px);}
	.ac-page .ac-hero-copy{max-width:none;}
	.ac-page .ac-hero-bg::before{background:rgba(8,12,24,.2);}
	.ac-page .ac-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%);
	}
}
@media (max-width:640px){
	/* 약속 카드는 한 줄에 하나씩 */
	.ac-page .ac-trust-list{grid-template-columns:1fr;}
	.ac-page .ac-cert-box{max-width:none;}

	/* 히어로 영상 : 세로로 긴 상자에 16:9 영상을 채우면 크게 확대돼 가운데(작업자 뒷머리)만 남는다.
	   상자 높이를 낮춰 확대를 줄이고, 에어컨이 있는 왼쪽 위를 기준으로 잘라 에어컨이 보이게 한다 */
	.ac-page .ac-hero{min-height:clamp(320px,88vw,440px); padding:36px 0;}
	.ac-page .ac-hero-bg img,
	.ac-page .ac-hero-bg video{object-position:22% 0;}
}