/**
 * Vavoom Pricing — 예상 혜택가 (v2.2.0)
 *
 * 톤 규칙(사용자 확정): 색은 빨강 하나만, 그것도 최종 금액에만. 나머지는 검정·회색.
 * 이모지·그라데이션·그림자·색 배지 없음. 모서리는 직각(회색 상자만 4px).
 * font-family 는 지정하지 않는다 — 테마 폰트를 상속한다.
 *
 * 테마 간섭 대비: 자식 선택자는 .vpb 로 스코프한다. 단일 클래스(0,1,0)는
 * 테마의 흔한 '.클래스 span'(0,1,1)에 밀린다.
 */

.vpb {
	width: 100%;
	margin: 10px 0 0;
	text-align: left;
}

/* ── 회색 상자: 혜택가 바 + 증정 줄 ───────────────────────────── */
.vpb .vpb-box {
	background: #f5f6f7;
	border-radius: 4px;
	overflow: hidden;
}

.vpb .vpb-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #111;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	appearance: none;
	box-shadow: none;
}

.vpb .vpb-bar:hover,
.vpb .vpb-bar:focus {
	background: #f0f1f2;
	color: #111;
}

.vpb .vpb-bar-l {
	flex: 1 1 auto;
	min-width: 0;
}

.vpb .vpb-bar-t {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #111;
}

.vpb .vpb-bar-s {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: #8e9398;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.vpb .vpb-bar-r {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.vpb .vpb-bar-a {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #e02020;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 비회원 바의 금액은 "지금 살 수 있는 값" — 강조하지 않는다 */
.vpb .vpb-bar.is-guest .vpb-bar-a {
	color: #111;
}

.vpb .vpb-bar-cv {
	margin-left: 3px;
	font-size: 12px;
	color: #aeb2b6;
}

/* 적립 줄 — 회색 상자 **바깥**, 전체의 맨 아래.
   상자 안은 지금 내는 돈이고 적립은 결제 후 쌓이는 것이라 상자를 벗어난다.
   테두리·배경 없이 한 줄. 라벨은 한 톤 물러나고 숫자가 선다(빨강은 최종 금액 전용). */
.vpb .vpb-earn {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	padding: 0 2px;
	font-size: 11.5px;
	line-height: 1.45;
}

.vpb .vpb-earn-l {
	min-width: 0;
	color: #8e9398;
	word-break: keep-all;
}

.vpb .vpb-earn-r {
	color: #aeb2b6;
}

.vpb .vpb-earn-v {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: #111;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 증정 줄 — 같은 상자 안, 구분선으로 금액과 가른다 */
.vpb .vpb-gift {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-top: 1px solid #e4e6e8;
	font-size: 11.5px;
	line-height: 1.45;
	color: #555;
}

.vpb .vpb-gift-th {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: #e4e6e8;
}

.vpb .vpb-gift-t {
	min-width: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* ── 이벤트 줄 — 상자 밖 (가격 혜택과 공지를 가른다) ──────────── */
.vpb .vpb-events {
	margin-top: 8px;
}

.vpb .vpb-event {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid #e8e8e8;
	background: #fff;
	color: #111;
	font-size: 12px;
	line-height: 1.45;
	text-decoration: none;
}

.vpb .vpb-event + .vpb-event {
	border-top: 0;
}

.vpb a.vpb-event:hover,
.vpb a.vpb-event:focus {
	background: #fafafa;
	color: #111;
	text-decoration: none;
}

.vpb .vpb-event[hidden] {
	display: none !important;
}

.vpb .vpb-event-k {
	flex: 0 0 auto;
	color: #8e9398;
}

.vpb .vpb-event-t {
	flex: 1 1 auto;
	min-width: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.vpb .vpb-event-cv {
	flex: 0 0 auto;
	color: #aeb2b6;
	font-size: 12px;
}

.vpb .vpb-event-more {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #e8e8e8;
	border-top: 0;
	border-radius: 0;
	background: #fff;
	color: #555;
	font-family: inherit;
	font-size: 11.5px;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	appearance: none;
}

.vpb .vpb-event-more:hover {
	background: #fafafa;
	color: #111;
}

/* ── 팝업 ─────────────────────────────────────────────────────── */
.vpb .vpb-modal[hidden] {
	display: none !important;
}

.vpb .vpb-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.vpb .vpb-overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.42);
}

.vpb .vpb-sheet {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 86vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid #e8e8e8;
	color: #111;
	font-size: 13px;
	line-height: 1.55;
}

.vpb .vpb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 14px;
	border-bottom: 1px solid #e8e8e8;
}

.vpb .vpb-head-t {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.vpb .vpb-x {
	margin: 0;
	padding: 2px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #aeb2b6;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
}

.vpb .vpb-x:hover {
	color: #555;
	background: transparent;
}

.vpb .vpb-body {
	padding: 13px 14px;
}

.vpb .vpb-foot {
	padding: 12px 14px;
	border-top: 1px solid #e8e8e8;
}

/* 금액 줄 */
.vpb .vpb-r {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13px;
}

.vpb .vpb-r-n {
	min-width: 0;
	color: #555;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.vpb .vpb-r-sub {
	color: #aeb2b6;
	font-size: 11.5px;
}

.vpb .vpb-r-v {
	flex: 0 0 auto;
	color: #111;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vpb .vpb-div {
	height: 1px;
	margin: 8px 0;
	background: #f0f0f0;
}

.vpb .vpb-div-strong {
	margin: 10px 0;
	background: #e8e8e8;
}

.vpb .vpb-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0 0;
}

.vpb .vpb-total-n {
	font-size: 13.5px;
	font-weight: 600;
}

.vpb .vpb-total-v {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #e02020;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 비회원 두 금액 */
.vpb .vpb-twin {
	border: 1px solid #e8e8e8;
}

.vpb .vpb-twin-r {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
}

.vpb .vpb-twin-r + .vpb-twin-r {
	border-top: 1px solid #f0f0f0;
}

.vpb .vpb-twin-r.is-join {
	background: #fafafa;
}

.vpb .vpb-twin-k {
	font-size: 12px;
	color: #555;
}

.vpb .vpb-twin-r.is-join .vpb-twin-k {
	color: #111;
	font-weight: 600;
}

.vpb .vpb-twin-v {
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vpb .vpb-twin-r.is-join .vpb-twin-v {
	color: #e02020;
}

.vpb .vpb-gtitle {
	margin: 14px 0 2px;
	font-size: 11.5px;
	font-weight: 600;
	color: #8e9398;
	letter-spacing: -0.01em;
}

.vpb .vpb-note {
	margin: 0;
	font-size: 11px;
	line-height: 1.65;
	color: #8e9398;
}

.vpb .vpb-note-tight {
	margin-top: 9px;
}

.vpb .vpb-cta {
	display: block;
	width: 100%;
	padding: 11px;
	border: 0;
	border-radius: 0;
	background: #111;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

.vpb .vpb-cta:hover,
.vpb .vpb-cta:focus {
	background: #000;
	color: #fff;
	text-decoration: none;
}

/* 팝업이 열린 동안 뒤 배경 스크롤 잠금 */
body.vpb-modal-open {
	overflow: hidden;
}

/* 데스크톱에서는 가운데 모달 */
@media (min-width: 782px) {
	.vpb .vpb-modal {
		align-items: center;
	}

	.vpb .vpb-sheet {
		max-height: 80vh;
	}
}