@charset "utf-8";
/* =====================================================================
   베란다 개수 안내 모달
   - /service/cleaning (견적 폼) · 각 quote_popup · /include/estimate_popup.jsp(메인 견적 팝업) 공용
   - 마크업·스크립트 : /service/cleaning/inc_veranda_guide.jsp
   ===================================================================== */

/* ---------- 베란다 개수 안내 모달 ---------- */
/* 견적 폼의 '베란다 개수 확인하기' 로 열린다. 페이지 최상위에 두어 섹션의 overflow 나
   z-index 에 영향을 받지 않는다. 여닫기는 inc_veranda_guide.jsp 스크립트가 hidden 으로 처리한다.
   z-index 는 메인 견적 팝업(.ep-modal 1100) 위에 뜨도록 그보다 높게 둔다 */
.vg-modal{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px;}
/* ★ display 를 지정하면 HTML 의 hidden 속성(브라우저 기본 display:none)이 무시된다.
   이 한 줄이 없으면 페이지를 열자마자 모달이 화면을 덮고 뒤가 눌리지 않는다 */
.vg-modal[hidden]{display:none;}
.vg-dim{position:absolute; inset:0; background:rgba(16,24,44,.55); cursor:pointer;}
body.vg-lock{overflow:hidden;}				/* 열려 있는 동안 뒤 페이지는 스크롤되지 않는다 */

.vg-panel{
	position:relative; z-index:1; width:100%; max-width:820px;
	max-height:calc(100vh - 40px); overflow:auto; outline:0;
	padding:clamp(18px,2vw,26px); border-radius:clamp(16px,1.6vw,22px);
	background:#fff; box-shadow:0 24px 60px rgba(16,24,44,.28);
}
/* 닫기(X) — 배경 없는 아이콘 버튼 */
.vg-x{
	position:absolute; top:clamp(12px,1.6vw,20px); right:clamp(12px,1.6vw,20px);
	width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer;
	background:#fff 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.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/18px no-repeat;
	transition:background-color .15s;
}
.vg-x:hover{background-color:#F1F5F9;}

.vg-title{
	margin:0; padding-right:44px; color:var(--ink);
	/* 모달 제목이라 섹션 제목(--fs-h2)보다 한 단계 작은 카드 제목 크기를 쓴다 */
	font-size:var(--fs-card); font-weight:700; line-height:var(--lh-card); letter-spacing:var(--ls-card);
}
.vg-title em{font-style:normal; color:var(--brand);}
.vg-desc{
	margin:6px 0 clamp(16px,1.8vw,22px); color:var(--ink-2);
	font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}

/* 좌 : 도면 예시 / 우 : 세는 기준. 도면이 주인공이라 왼쪽을 넓게 잡는다 */
.vg-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(14px,1.6vw,22px); align-items:start;}
.vg-map img{width:100%; height:auto; display:block; border-radius:12px;}
/* 환산 결과 — 도면 바로 아래에서 결론을 한 줄로 알려 준다 */
.vg-sum{
	margin:10px 0 0; padding:10px 14px; border-radius:10px;
	background:var(--brand-soft); color:var(--ink); text-align:center;
	font-size:15px; font-weight:600; line-height:1.4; letter-spacing:-.015em;
}
.vg-sum em{font-style:normal; color:var(--brand); font-size:1.3em; font-weight:700; margin:0 2px;}

.vg-side{display:flex; flex-direction:column; gap:8px;}
/* 세는 기준 한 항목 : 번호 + 제목 + 설명 */
.vg-rule{
	display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 8px;
	padding:10px 14px; border-radius:10px; background:#F5F9FE;
}
.vg-rule .no{color:var(--brand); font-size:14px; font-weight:700; line-height:1.45;}
.vg-rule .tx b{display:block; color:var(--ink); font-size:14px; font-weight:700; line-height:1.45; letter-spacing:-.015em;}
.vg-rule .tx p{
	margin:2px 0 0; color:var(--ink-2); word-break:keep-all;
	font-size:13px; line-height:1.5; letter-spacing:-.01em;
}
/* 유의 사항 — 기준과 성격이 달라 배경을 한 톤 더 진하게 */
.vg-note{padding:10px 14px; border-radius:10px; background:var(--brand-soft);}
.vg-note > b{
	display:flex; align-items:center; gap:6px; color:var(--brand-deep);
	font-size:14px; font-weight:700; letter-spacing:-.015em;
}
.vg-note .ic{
	flex:0 0 auto; width:18px; height:18px; border-radius:5px; background:var(--brand);
	color:#fff; font-size:12px; font-weight:700; line-height:18px; text-align:center;
}
.vg-note ul{margin:6px 0 0; padding:0; list-style:none;}
.vg-note li{
	position:relative; padding-left:10px; color:var(--ink-2); word-break:keep-all;
	font-size:12px; line-height:1.5; letter-spacing:var(--ls-meta);
}
.vg-note li + li{margin-top:4px;}
.vg-note li::before{content:"·"; position:absolute; left:2px;}

.vg-ok{
	width:100%; height:46px; margin-top:clamp(14px,1.6vw,18px);
	border:0; border-radius:10px; cursor:pointer;
	background:var(--brand); color:#fff;
	font-size:var(--fs-btn); font-weight:700; letter-spacing:var(--ls-btn);
	transition:background .15s;
}
.vg-ok:hover{background:var(--brand-dark);}

@media (max-width:900px){
	/* 도면과 안내가 나란히 놓이기엔 좁아 위아래로 쌓는다 */
	.vg-body{grid-template-columns:1fr;}
}
@media (max-width:640px){
	.vg-modal{padding:12px;}
	.vg-panel{max-height:calc(100vh - 24px);}
	.vg-x{width:34px; height:34px; background-size:15px;}
	.vg-ok{height:44px;}
}