/**
 * Vavoom Signup v1.1.0
 * 스텝형 가입 폼 + 마케팅 동의 배너/모달
 * 디자인 톤: vavoom-mypage 와 통일 (#f95251 포인트, 밝은 그레이, 카드형)
 */

.vavoom-signup-wrap {
	max-width: 460px;
	margin: 0 auto;
	padding: 16px 16px 56px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
	color: #495057;
	box-sizing: border-box;
}
.vavoom-signup-wrap *,
.vavoom-signup-wrap *::before,
.vavoom-signup-wrap *::after { box-sizing: border-box; }

.vv-hidden { display: none !important; }

/* ---------------------------------------------------------------------- */
/* 스텝 전환                                                                */
/* ---------------------------------------------------------------------- */

.vv-step { display: none; }
.vv-step.is-active { display: block; animation: vv-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.vv-step.is-leaving { animation: vv-leave 0.26s ease forwards; }

@keyframes vv-enter {
	from { opacity: 0; transform: translateX(28px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes vv-leave {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-28px); }
}
@media (prefers-reduced-motion: reduce) {
	.vv-step.is-active, .vv-step.is-leaving { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* 진행 표시                                                                */
/* ---------------------------------------------------------------------- */

.vv-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}
.vv-progress .dot {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: #adb5bd;
}
.vv-progress .dot i {
	font-style: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e9ecef;
	color: #868e96;
	font-size: 11px;
	font-weight: 700;
}
.vv-progress .dot.on { color: #f95251; }
.vv-progress .dot.on i { background: #f95251; color: #fff; }
.vv-progress .bar { width: 18px; height: 2px; background: #e9ecef; border-radius: 2px; }

/* ---------------------------------------------------------------------- */
/* 타이틀                                                                   */
/* ---------------------------------------------------------------------- */

/* h1 사용 — 테마의 h1 스타일에 덮이지 않도록 !important 고정 */
.vv-title {
	margin: 0 0 6px !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #212529;
	text-align: center;
}
.vv-sub {
	margin: 0 0 24px;
	font-size: 13px;
	color: #868e96;
	text-align: center;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* 체크박스                                                                 */
/* ---------------------------------------------------------------------- */

.vavoom-signup-wrap input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.vv-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid #ced4da;
	border-radius: 50%;
	background: #fff;
	position: relative;
	transition: all 0.15s ease;
}
.vv-check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.vavoom-signup-wrap input[type="checkbox"]:checked + .vv-check { background: #f95251; border-color: #f95251; }
.vavoom-signup-wrap input[type="checkbox"]:checked + .vv-check::after { opacity: 1; }
.vavoom-signup-wrap input[type="checkbox"]:focus-visible + .vv-check {
	outline: 2px solid #f95251;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* 약관                                                                     */
/* ---------------------------------------------------------------------- */

.vv-agree-all {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	background: #f8f9fa;
	border-radius: 12px;
	cursor: pointer;
	margin-bottom: 8px;
}
.vv-agree-all b { font-size: 15px; color: #212529; }

.vv-item {
	position: relative;
	padding: 10px 2px;
	border-bottom: 1px solid #f1f3f5;
}
.vv-item:last-child { border-bottom: none; }
.vv-row {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding-right: 44px;
}
.vv-row span.txt { font-size: 13.5px; color: #495057; line-height: 1.4; }
.tag-r, .tag-o {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	margin-right: 5px;
	vertical-align: 1px;
}
.tag-r { color: #f95251; background: rgba(249,82,81,0.08); }
.tag-o { color: #6c757d; background: #f1f3f5; }
.vv-view {
	position: absolute;
	right: 0;
	top: 12px;
	border: none;
	background: none;
	color: #adb5bd;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	padding: 2px 4px;
}
.vv-terms {
	margin: 8px 0 4px 32px;
	padding: 12px;
	max-height: 170px;
	overflow-y: auto;
	background: #f8f9fa;
	border-radius: 8px;
	font-size: 12px;
	color: #868e96;
	line-height: 1.6;
}
.vv-marketing {
	margin-top: 6px;
	padding: 12px 10px;
	background: #fff8f8;
	border: 1px dashed rgba(249,82,81,0.35);
	border-radius: 12px;
}
.vv-marketing.has-error { border-color: #f95251; }
.vv-benefits {
	list-style: none;
	margin: 10px 0 0 32px;
	padding: 12px 14px;
	background: #ffffff;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.vv-benefits li {
	font-size: 12.5px;
	color: #495057;
	line-height: 1.5;
}
.vv-unsub {
	margin: 8px 0 0 32px;
	font-size: 11.5px;
	color: #adb5bd;
}

/* ---------------------------------------------------------------------- */
/* 본인인증                                                                 */
/* ---------------------------------------------------------------------- */

.vv-cert {
	text-align: center;
	padding: 26px 16px;
	border: 1px solid #e9ecef;
	border-radius: 14px;
}
.vv-cert p {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: #868e96;
	line-height: 1.7;
}
.vv-cert-ok {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 13px;
	background: #ebfbee;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	color: #0ca678;
}
.vv-cert-ok[hidden] { display: none; }

/* ---------------------------------------------------------------------- */
/* 입력 필드                                                                */
/* ---------------------------------------------------------------------- */

.vv-field { margin-bottom: 15px; }
.vv-field > label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #212529;
}
.vv-verified { color: #0ca678; font-weight: 600; font-size: 12px; }
.vv-verified[hidden] { display: none; }
.vv-social-note { color: #03C75A; font-weight: 600; font-size: 12px; }

.vavoom-signup-wrap input[type="text"],
.vavoom-signup-wrap input[type="email"],
.vavoom-signup-wrap input[type="password"],
.vavoom-signup-wrap input[type="tel"],
.vavoom-signup-wrap select {
	width: 100%;
	height: 47px;
	padding: 0 14px;
	border: 1px solid #ced4da;
	border-radius: 11px;
	background: #fff;
	font-size: 14.5px;
	color: #212529;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.vavoom-signup-wrap select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 32px;
}
.vavoom-signup-wrap input:focus,
.vavoom-signup-wrap select:focus {
	outline: none;
	border-color: #f95251;
	box-shadow: 0 0 0 3px rgba(249,82,81,0.12);
}
.vavoom-signup-wrap input[readonly] { background: #f8f9fa; color: #6c757d; }
.vavoom-signup-wrap input::placeholder { color: #adb5bd; }
.vv-field.has-error input,
.vv-field.has-error select {
	border-color: #f95251;
	background: #fff8f8;
}

.vv-inline { display: flex; gap: 8px; }
.vv-inline input { flex: 1 1 auto; min-width: 0; }
.vv-phone { display: flex; gap: 8px; }
.vv-phone select { flex: 0 0 92px; }
.vv-phone input { flex: 1 1 auto; min-width: 0; text-align: center; }
.vv-phone select.is-locked { pointer-events: none; background-color: #f8f9fa; color: #6c757d; }

/* ---------------------------------------------------------------------- */
/* 버튼                                                                     */
/* ---------------------------------------------------------------------- */

.vv-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 47px;
	padding: 0 18px;
	border: none;
	border-radius: 11px;
	background: #212529;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background 0.15s ease;
}
.vv-btn-dark:hover { background: #343a40; color: #fff; }
.vv-btn-dark:disabled { background: #e7f7ee; color: #0ca678; cursor: default; }
.vv-btn-dark.is-done { background: #e7f7ee; color: #0ca678; }

.vv-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 53px;
	margin-top: 20px;
	border: none;
	border-radius: 12px;
	background: #f95251;
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
	text-decoration: none;
}
.vv-primary:hover { background: #e64444; color: #fff; }
.vv-primary.off { background: #ced4da; color: #fff; cursor: default; }
.vv-primary:disabled { opacity: 0.65; cursor: default; }

.vv-prev {
	display: block;
	margin: 14px auto 0;
	border: none;
	background: none;
	color: #adb5bd;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 8px;
}
.vv-prev:hover { color: #6c757d; }

/* ---------------------------------------------------------------------- */
/* 메시지                                                                   */
/* ---------------------------------------------------------------------- */

.vv-message {
	display: none;
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 11px;
	font-size: 13.5px;
	line-height: 1.6;
	background: #fff5f5;
	border: 1px solid rgba(249,82,81,0.3);
	color: #e03131;
}

/* ---------------------------------------------------------------------- */
/* 완료 화면                                                                */
/* ---------------------------------------------------------------------- */

.vv-done { text-align: center; padding: 14px 0 4px; }
.vv-done-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #f95251;
	position: relative;
	animation: vv-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.vv-done-icon::after {
	content: "";
	position: absolute;
	left: 23px;
	top: 15px;
	width: 14px;
	height: 26px;
	border: solid #fff;
	border-width: 0 4.5px 4.5px 0;
	transform: rotate(45deg);
}
@keyframes vv-pop {
	from { transform: scale(0.4); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}
.vv-done h3 { margin: 0 0 8px; font-size: 20px; color: #212529; }
.vv-done p { margin: 0; font-size: 13.5px; color: #868e96; line-height: 1.7; }
.vv-coupon {
	display: inline-block;
	margin-top: 14px;
	padding: 12px 16px;
	background: #fff8f8;
	border: 1px dashed rgba(249,82,81,0.4);
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #f95251;
	line-height: 1.6;
}
.vv-coupon[hidden] { display: none; }
.vv-done-continue { max-width: 240px; margin: 22px auto 0; }

/* 로그인 상태 안내 */
.vv-logged-in { text-align: center; padding: 32px 0; }
.vv-logged-in p { margin: 0 0 16px; color: #495057; }
.vv-primary-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 24px;
	border-radius: 11px;
	background: #f95251;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.vv-primary-link:hover { background: #e64444; color: #fff; }

/* ---------------------------------------------------------------------- */
/* 마케팅 동의 배너 + 모달 ([vavoom_marketing_banner])                        */
/* ---------------------------------------------------------------------- */

/* 검은 배경 풀와이드 바 + 흰색 텍스트 */
.vv-banner {
	display: block;
	width: 100%;
	background: #111111;
	text-align: center;
	padding: 11px 16px;
	box-sizing: border-box;
}
.vv-banner-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 2px 6px;
	border: none;
	border-radius: 0;
	background: none;
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
.vv-banner-btn:hover { background: none; color: #ffffff; text-decoration: underline; }
/* 링크(비회원)로 렌더링될 때 테마 a 태그 색상에 덮이지 않도록 고정 */
a.vv-banner-btn,
a.vv-banner-btn:visited {
	color: #ffffff !important;
	text-decoration: none !important;
}
a.vv-banner-btn:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

.vv-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(33, 37, 41, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.vv-modal-backdrop[hidden] { display: none; }
.vv-modal {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 16px;
	padding: 26px 22px 22px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
	animation: vv-pop 0.3s cubic-bezier(0.22, 1.2, 0.36, 1);
	box-sizing: border-box;
}
.vv-modal h4 {
	margin: 0 0 10px;
	font-size: 17px;
	color: #212529;
	text-align: center;
}
.vv-modal-desc {
	margin: 0 0 10px;
	font-size: 13px;
	color: #868e96;
	text-align: center;
}
.vv-modal-benefits {
	list-style: none;
	margin: 0 0 10px;
	padding: 12px 14px;
	background: #f8f9fa;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.vv-modal-benefits li {
	font-size: 12.5px;
	color: #495057;
	line-height: 1.5;
}
.vv-modal-note {
	margin: 0 0 16px;
	font-size: 11.5px;
	color: #adb5bd;
	text-align: center;
}
.vv-modal-actions {
	display: flex;
	gap: 8px;
}
.vv-modal-no,
.vv-modal-yes {
	flex: 1 1 auto;
	height: 46px;
	border: none;
	border-radius: 11px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.vv-modal-no {
	flex: 0 0 88px;
	background: #f1f3f5;
	color: #6c757d;
}
.vv-modal-no:hover { background: #e9ecef; }
.vv-modal-yes {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f95251;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
}
.vv-modal-yes:hover { background: #e64444; }
.vv-modal-yes:disabled { opacity: 0.6; cursor: default; }

/* ---------------------------------------------------------------------- */
/* 로그인 / 계정찾기 (v1.2.0)                                                */
/* ---------------------------------------------------------------------- */

.vv-auth .vv-title { margin-top: 8px; }

/* 네이버 버튼 */
.vv-naver-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 52px;
	margin: 4px 0 22px;
	border-radius: 12px;
	background: #03C75A;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.vv-naver-btn:hover { background: #02b152; color: #fff; }
.vv-naver-logo { width: 18px; height: 18px; flex: 0 0 auto; }
.vv-naver-badge {
	position: absolute;
	left: 50%;
	bottom: -11px;
	transform: translateX(-50%);
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	padding: 3px 12px;
	border-radius: 20px;
	background: #212529;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.vv-naver-standalone { padding-top: 4px; padding-bottom: 20px; }

/* 구분선 */
.vv-divider {
	position: relative;
	text-align: center;
	margin: 24px 0 18px;
}
.vv-divider::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: #e9ecef;
}
.vv-divider span {
	position: relative;
	padding: 0 12px;
	background: #fff;
	font-size: 12px;
	color: #adb5bd;
}

/* 로그인 유지 */
.vv-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 4px;
	cursor: pointer;
	font-size: 13px;
	color: #495057;
}
.vv-remember .vv-check { width: 20px; height: 20px; }
.vv-remember .vv-check::after { left: 5px; top: 2px; width: 4.5px; height: 9px; }

/* 하단 링크 */
.vv-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	font-size: 13px;
}
.vv-links a { color: #495057; text-decoration: none; }
.vv-links a:hover { color: #f95251; }
.vv-links span { color: #dee2e6; }

/* 인증번호 요청/타이머 */
.vv-btn-wide { width: 100%; margin-bottom: 14px; }
.vv-cert-row[hidden] { display: none; }
.vv-cert-timer { color: #f95251; font-weight: 600; font-size: 12px; margin-left: 6px; }

/* 결과 패널 (아이디 찾기 결과 / 임시비번 발송 안내) */
.vv-result { text-align: center; padding: 18px 0 4px; }
.vv-result[hidden] { display: none; }
.vv-result-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #f95251;
	position: relative;
	animation: vv-pop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.vv-result-icon::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 13px;
	width: 12px;
	height: 23px;
	border: solid #fff;
	border-width: 0 4px 4px 0;
	transform: rotate(45deg);
}
.vv-result-text {
	margin: 0 0 6px;
	font-size: 14.5px;
	color: #212529;
	line-height: 1.7;
	word-break: keep-all;
}
.vv-result-btn { max-width: 240px; margin: 18px auto 0; }

/* ---------------------------------------------------------------------- */
/* 모바일                                                                   */
/* ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.vavoom-signup-wrap { padding: 10px 12px 44px; }
	.vv-phone select { flex-basis: 82px; }
	.vv-naver-badge { font-size: 11px; }
}