@charset "utf-8";
/* =====================================================================
   무료 견적 받기 팝업
   1) 바깥 팝업  : /include/estimate_popup.jsp (메인 등에서 '무료 견적 받기' 로 연다)
   2) 안쪽 페이지 : /service/cleaning/quote_popup · /service/aircon/quote_popup (iframe 으로 들어가는 폼)
   ===================================================================== */

/* ---------- 1. 바깥 팝업 ---------- */
.ep-modal{position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px;}
.ep-modal[hidden]{display:none;}
.ep-dim{position:absolute; inset:0; background:rgba(16,24,44,.55); cursor:pointer;}
html.ep-lock,html.ep-lock body{overflow:hidden;}		/* 열려 있는 동안 뒤 페이지는 스크롤되지 않는다 */

/* 폼 길이가 서비스마다 달라 높이를 고정하고, 넘치는 부분은 iframe 안에서 스크롤한다 */
.ep-panel{
	position:relative; display:flex; flex-direction:column;
	width:min(860px,100%); height:min(920px,calc(100vh - 40px));
	border-radius:20px; overflow:hidden; background:#F4F8FD;
	box-shadow:0 30px 80px rgba(16,24,44,.28); outline:none;
}
.ep-head{position:relative; flex:0 0 auto; padding:24px 28px 0; background:#fff; border-bottom:1px solid var(--line);}
.ep-title{
	margin:0 0 14px; padding-right:48px; color:var(--ink);
	font-size:22px; font-weight:700; line-height:1.35; letter-spacing:-.03em;
}
.ep-x{
	position:absolute; right:16px; top:16px; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer;
	background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182242' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/18px no-repeat;
	transition:background-color .15s;
}
.ep-x:hover{background-color:#F1F5F9;}

/* 서비스 탭 — 고른 탭만 브랜드색 밑줄 */
.ep-tabs{display:flex; gap:4px;}
.ep-tab{
	flex:1 1 0; min-width:0; height:50px; margin:0 0 -1px; padding:0 8px; border:0; cursor:pointer;
	border-bottom:3px solid transparent; background:none; color:var(--muted);
	font-size:16px; font-weight:600; letter-spacing:-.03em; white-space:nowrap;
	transition:color .15s,border-color .15s;
}
.ep-tab:hover{color:var(--ink);}
.ep-tab[aria-selected="true"]{color:var(--brand-deep); border-bottom-color:var(--brand); font-weight:700;}
.ep-tab:focus-visible{outline:2px solid var(--brand); outline-offset:-2px;}

.ep-body{position:relative; flex:1 1 auto; min-height:0;}
.ep-frame{display:block; width:100%; height:100%; border:0; background:#F4F8FD;}
.ep-frame[hidden]{display:none;}

@media (max-width:640px){
	/* 좁은 화면은 화면 전체를 쓴다 */
	.ep-modal{padding:0;}
	.ep-panel{width:100%; height:100%; border-radius:0;}
	.ep-head{padding:18px 16px 0;}
	.ep-title{margin-bottom:10px; font-size:18px;}
	.ep-x{right:8px; top:8px;}
	.ep-tab{height:46px; font-size:14.5px;}
}

/* ---------- 2. 안쪽 페이지 (iframe 안 폼) ---------- */
/* 헤더가 없으므로 site.css 의 헤더 높이만큼 띄우는 여백을 없앤다 */
body.qp-body{padding-top:0; background:#F4F8FD;}
.qp-wrap{display:block; padding:clamp(16px,3vw,28px);}
.clean-page.qp-wrap .quote-card{max-width:none; border-radius:16px; box-shadow:0 8px 24px rgba(24,34,66,.06);}
@media (max-width:640px){
	.qp-wrap{padding:12px;}
}