@charset "utf-8";
/* 팝업 창 전용 — 개인정보취급방침 · 이용약관 · 이메일무단수집거부 · 신용카드결제
   ---------------------------------------------------------------------------
   새 창으로 뜨는 문서라 헤더·푸터가 없다. 이 파일 하나로 완성된다.
   본문 스타일은 온라인 견적문의의 방침 보기(.wv-pp*)와 같은 느낌으로 맞췄다. */

:root {
	--wvp-ink:     #14141e;   /* 본문 글자 */
	--wvp-ink-2:   #55565f;   /* 흐린 글자 */
	--wvp-line:    #e4e5ec;
	--wvp-line-2:  #d5d5dd;
	--wvp-blue:    var(--c-blue);   /* 주 색 */
	--wvp-purple:  #6136d9;   /* 소제목 강조 */
	--wvp-red:     #d62f8f;
	--wvp-bg:      #ffffff;
	--wvp-bg-2:    #f7f8ff;
	--wvp-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
	            "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body.wvp {
	background: var(--wvp-bg);
	color: var(--wvp-ink);
	font-family: var(--wvp-font);
	font-size: 15px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

/* 창 전체를 세로로 쪼개서, 본문만 스크롤되고 제목·닫기는 늘 보이게 한다 */
.wvp__box {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 720px;
	margin: 0 auto;
}
.wvp--wide .wvp__box { max-width: 900px; }

/* ── 제목 줄 ───────────────────────────────────────────── */
.wvp__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 30px 18px;
	border-bottom: 2px solid var(--wvp-ink);
}
.wvp__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.wvp__x {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--wvp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--wvp-ink-2);
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.wvp__x svg { width: 16px; height: 16px; display: block; margin: 0 auto; }
.wvp__x:hover { border-color: var(--wvp-ink); color: var(--wvp-ink); background: var(--wvp-bg-2); }

/* ── 본문 ─────────────────────────────────────────────── */
.wvp__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px 30px 30px;
}

/* ── 닫기 줄 ──────────────────────────────────────────── */
.wvp__foot {
	flex: none;
	padding: 14px 30px 22px;
	text-align: center;
	border-top: 1px solid var(--wvp-line);
}
.wvp__btn {
	min-width: 132px;
	padding: 11px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--wvp-ink);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.wvp__btn:hover { background: var(--wvp-blue); }

/* ── 약관·방침 글 ──────────────────────────────────────── */
.pp__h2 {
	margin: 30px 0 6px;
	color: var(--wvp-purple);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.wvp__body > .pp__h2:first-child,
.wvp__body > *:first-child { margin-top: 0; }

.pp__p { margin: 16px 0 0; }
.pp__p strong { display: inline-block; margin-bottom: 2px; font-weight: 700; }
.pp__b  { font-weight: 700; }
.pp__em { color: var(--wvp-red); font-weight: 700; }

.wvp__body p { margin: 0 0 12px; word-break: keep-all; }
.wvp__body p:last-child { margin-bottom: 0; }
.wvp__body a { color: var(--wvp-blue); }

/* 개인정보취급방침(include/policy_privacy.php)이 쓰는 이름들 */
.wvp__body .wv-pp__h2 {
	margin: 30px 0 6px;
	color: var(--wvp-purple);
	font-size: 16px;
	font-weight: 700;
}
.wvp__body .wv-pp__date {
	margin-top: 26px;
	padding-top: 14px;
	border-top: 1px solid var(--wvp-line);
	color: var(--wvp-ink-2);
	font-size: 13px;
}
.wvp__body ul, .wvp__body ol { margin: 8px 0 12px; padding-left: 20px; }
.wvp__body li { margin: 3px 0; }
.wvp__body table { border-collapse: collapse; width: 100%; }

/* ── 신용카드결제 표 ───────────────────────────────────── */
.wvp-pay__lead {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: 10px;
	background: var(--wvp-bg-2);
	color: var(--wvp-ink);
	font-size: 14px;
	font-weight: 600;
}
.wvp-pay {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--wvp-ink);
}
.wvp-pay th,
.wvp-pay td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--wvp-line);
	text-align: left;
	vertical-align: middle;
	font-size: 14px;
}
.wvp-pay th {
	width: 120px;
	background: #fafbff;
	color: var(--wvp-ink-2);
	font-weight: 600;
	white-space: nowrap;
}
.wvp-pay input[type="text"],
.wvp-pay select,
.wvp-pay textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--wvp-line-2);
	border-radius: 8px;
	background: #fff;
	color: var(--wvp-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
}
.wvp-pay textarea { min-height: 68px; resize: vertical; }
.wvp-pay input[type="text"]:focus,
.wvp-pay select:focus,
.wvp-pay textarea:focus {
	outline: none;
	border-color: var(--wvp-blue);
	box-shadow: 0 0 0 3px rgba(11, 15, 247, .10);
}
.wvp-pay .wvp-pay__half { max-width: 320px; }

/* 금액 칸 — 오른쪽에 「원」 을 붙인다.
   앞의 .wvp-pay input[type="text"] 보다 우선하도록 선택자를 같은 무게로 맞춘다.
   (그냥 .wvp-pay__won input 으로 두면 padding 이 덮여 「원」 과 숫자가 겹친다) */
.wvp-pay__won { position: relative; max-width: 320px; }
.wvp-pay .wvp-pay__won input[type="text"] { padding-right: 38px; text-align: right; }
.wvp-pay__won span {
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	color: var(--wvp-ink-2);
	font-size: 14px;
	pointer-events: none;
}
.wvp-pay__hint { margin-left: 8px; color: var(--wvp-ink-2); font-size: 13px; }
.wvp-pay__bank { font-weight: 600; letter-spacing: -0.01em; }

.wvp-pay__note {
	margin: 16px 0 0;
	padding: 12px 15px;
	border: 1px solid var(--wvp-line);
	border-radius: 10px;
	color: var(--wvp-ink-2);
	font-size: 13px;
}
.wvp-pay__go {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}
.wvp-pay__go button {
	min-width: 132px;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.wvp-pay__go .is-go     { background: var(--wvp-blue); color: #fff; }
.wvp-pay__go .is-go:hover { background: #0a0cc9; }
.wvp-pay__go .is-reset  { background: #fff; color: var(--wvp-ink-2); border: 1px solid var(--wvp-line-2); }
.wvp-pay__go .is-reset:hover { border-color: var(--wvp-ink); color: var(--wvp-ink); }

/* ── 좁은 창 ──────────────────────────────────────────── */
@media (max-width: 560px) {
	.wvp__head { padding: 20px 18px 14px; }
	.wvp__title { font-size: 19px; }
	.wvp__body { padding: 18px 18px 24px; }
	.wvp__foot { padding: 12px 18px 18px; }
	.wvp-pay th, .wvp-pay td { display: block; width: auto; }
	.wvp-pay th { border-bottom: 0; padding-bottom: 4px; background: none; }
	.wvp-pay td { padding-top: 0; }
}

/* 인쇄 — 닫기 단추는 빼고 글만 */
@media print {
	.wvp__x, .wvp__foot { display: none !important; }
	.wvp__box { max-width: none; height: auto; }
	.wvp__body { overflow: visible; }
}

/* 눈에는 안 보이지만 화면 낭독기는 읽는 글 */
.wvp-a11y {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}