/*
 * pay-modern.css — 결제 페이지 새 디자인 · 2026-08-21
 * 토큰은 /var/services/web/.design/tokens.css 의 iteach 브랜드 값 사본
 * (top2.php · my-modern.css · pds-modern.css 와 동일한 스냅샷).
 */
:root {
	--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
	--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
	--fs-lg: 1.25rem; --fs-xl: 1.5rem;
	--line-tight: 1.3; --line-base: 1.65; --letter-tight: -.02em;
	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
	--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
	--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
	--radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
	--shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
	--shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .06);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--duration-fast: 150ms; --duration-base: 200ms;
	--container-max: 1100px;
	--gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
	--gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155;
	--gray-800: #1e293b; --gray-900: #0f172a;
	--color-bg: #fff; --color-fg: var(--gray-900); --color-fg-muted: var(--gray-500);
	--color-fg-subtle: var(--gray-400); --color-border: var(--gray-200);
	--color-border-strong: var(--gray-300); --color-surface: var(--gray-50); --color-surface-2: var(--gray-100);
	--color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-fg: #fff;
	--color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3;
	--color-accent: #b8893a; --color-accent-hover: #a37828;
	--color-accent-soft: #f6ecd6; --color-accent-soft-fg: #6e5018;
	--color-success: #16a34a; --color-success-soft: #dcfce7;
	--color-danger: #dc2626; --color-danger-soft: #fee2e2;
	--color-warn: #d97706; --color-warn-soft: #fef3c7;
	/* 상품군 구분색 — VIP 와 서포터즈만 별도 색을 갖는다 (CP 는 브랜드 primary) */
	--c-vip: #7c3aed; --c-vip-soft: #f5f3ff; --c-vip-fg: #5b21b6;
	--c-sup: #059669; --c-sup-soft: #ecfdf5; --c-sup-fg: #065f46;
}

.pay-page, .pay-page * { box-sizing: border-box; }
.pay-page { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); }
.pay-page a { color: inherit; text-decoration: none; }
.pay-page ul { list-style: none; margin: 0; padding: 0; }
.pay-page-wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 640px) { .pay-page-wrap { padding: 0 var(--space-4); } }

/* 상단 탭 */
.pay-tabnav { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.pay-tabnav a {
	padding: var(--space-4) 0; font-size: var(--fs-sm); color: var(--color-fg-muted);
	border-bottom: 2px solid transparent; white-space: nowrap;
	transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pay-tabnav a:hover { color: var(--color-fg); }
.pay-tabnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }

.pay-main { margin: var(--space-6) 0 var(--space-12); }
.pay-ad { text-align: center; margin: var(--space-5) 0; }
.pay-ad:empty { display: none; }

/* 히어로 */
.pay-hero { margin-bottom: var(--space-5); }
.pay-hero h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
.pay-hero .sub { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.pay-hero .sub a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

/* 보유 잔액 */
.pay-balance {
	display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: baseline;
	padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	font-size: var(--fs-sm); color: var(--color-fg-muted);
}
.pay-balance b { color: var(--color-fg); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.pay-balance .spacer { flex: 1 1 auto; }

/* 안내 */
.pay-notice {
	padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
	background: var(--color-warn-soft); border-radius: var(--radius-md);
	font-size: var(--fs-xs); line-height: var(--line-base); color: #78350f;
}
.pay-notice a { text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-semibold); }

/* 상품 섹션 2열 */
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 860px) { .pay-grid { grid-template-columns: 1fr; } }

.pay-sec {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.pay-sec-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.pay-sec-head h3 {
	margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight);
	display: flex; align-items: center; gap: var(--space-2);
}
.pay-sec-head p { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); line-height: var(--line-base); }
.pay-sec-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

.sec-cp  .pay-sec-head h3 { color: var(--color-primary); }
.sec-vip .pay-sec-head h3 { color: var(--c-vip); }
.sec-sup .pay-sec-head h3 { color: var(--c-sup); }

/* 상품 한 줄 */
.pay-item {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface); border: 1px solid transparent; border-radius: var(--radius-md);
	transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pay-item:hover { background: var(--color-surface-2); }
.pay-item .qty { font-size: var(--fs-base); font-weight: var(--fw-bold); min-width: 72px; }
.sec-cp  .pay-item .qty { color: var(--color-primary); }
.sec-vip .pay-item .qty { color: var(--c-vip); }
.pay-item .price { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg); }
.pay-item .spacer { flex: 1 1 auto; }
.pay-item.is-best { background: var(--color-primary-soft); border-color: var(--color-primary); }
.sec-vip .pay-item.is-best { background: var(--c-vip-soft); border-color: var(--c-vip); }

.pay-tag {
	font-size: var(--fs-xs); font-weight: var(--fw-semibold);
	padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap;
	background: var(--color-surface-2); color: var(--color-fg-muted);
}
.pay-tag.is-sale { background: var(--color-danger-soft); color: #991b1b; }
.pay-tag.is-best { background: var(--color-danger); color: #fff; }

.pay-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 34px; padding: 0 var(--space-4); flex: 0 0 auto;
	border: 1px solid transparent; border-radius: var(--radius-full);
	font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
	white-space: nowrap; cursor: pointer; color: #fff; background: var(--color-primary);
	transition: background var(--duration-base) var(--ease-out);
}
.pay-btn:hover { background: var(--color-primary-hover); color: #fff; }
.sec-vip .pay-btn { background: var(--c-vip); }
.sec-vip .pay-btn:hover { background: #6d28d9; }
.sec-sup .pay-btn { background: var(--c-sup); height: 40px; padding: 0 var(--space-6); }
.sec-sup .pay-btn:hover { background: #047857; }
.pay-btn:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }

/* 서포터즈 가로 카드 */
.pay-sup-inner { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; padding: var(--space-5); }
.pay-sup-left { flex: 1 1 320px; min-width: 0; }
.pay-sup-left ul { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: 1.9; }
.pay-sup-left li::before { content: '· '; color: var(--c-sup); }
.pay-sup-left li.warn { color: var(--color-danger); font-size: var(--fs-xs); }
.pay-sup-left li.warn::before { content: '※ '; color: var(--color-danger); }
.pay-sup-right { flex: 0 0 auto; text-align: right; }
.pay-sup-price { font-size: var(--fs-sm); color: var(--color-fg-muted); margin-bottom: var(--space-3); line-height: var(--line-base); }
.pay-sup-price b { color: var(--c-sup-fg); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.pay-sup-price .note { display: block; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
@media (max-width: 640px) { .pay-sup-right { text-align: left; } }

/* ═════════════════════════════════════════════════════════════
 * 결제수단 선택 (pay_2026.php) · 2026-08-21
 * 상품군 색은 화면에서 --pay-theme 하나만 인라인으로 넘겨 받는다.
 * ═══════════════════════════════════════════════════════════ */
.pay-checkout { --pay-theme: var(--color-primary); max-width: 560px; margin: 0 auto; }
.pay-checkout h2 {
	margin: 0 0 var(--space-5); font-size: var(--fs-xl); font-weight: var(--fw-bold);
	letter-spacing: var(--letter-tight); text-align: center; color: var(--pay-theme);
}

/* 금액 요약 */
.pay-summary {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
	overflow: hidden; margin-bottom: var(--space-4);
}
.pay-row {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	padding: var(--space-3) var(--space-5); font-size: var(--fs-sm);
	border-top: 1px solid var(--color-border);
}
.pay-row:first-child { border-top: 0; }
.pay-row .k { color: var(--color-fg-muted); }
.pay-row .v { font-weight: var(--fw-semibold); color: var(--color-fg); text-align: right; }
.pay-row.is-minus .v { color: var(--color-danger); }
.pay-row.is-total { background: var(--color-surface); }
.pay-row.is-total .k { color: var(--color-fg); font-weight: var(--fw-semibold); }
.pay-row.is-total .v { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--pay-theme); }
.pay-row.is-bank { background: var(--color-warn-soft); }
.pay-row.is-bank .k, .pay-row.is-bank .v { color: #9a3412; }

/* 캐쉬 사용 */
.pay-cash {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
	padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.pay-cash .lbl { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-fg-muted); margin-bottom: var(--space-2); }
.pay-cash .in { display: flex; align-items: center; gap: var(--space-2); }
.pay-cash input[type=text] {
	flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 var(--space-3);
	font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold); text-align: right;
	color: var(--color-fg); background: var(--color-bg);
	border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
}
.pay-cash input[type=text]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.pay-cash .avail { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.pay-cash .avail b { color: var(--color-fg); }

/* 환불 안내 */
.pay-terms {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.pay-terms h3 { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-fg); }
.pay-terms ul { margin: 0; padding-left: 1.1em; list-style: disc; font-size: var(--fs-xs); line-height: 1.9; color: var(--color-fg-muted); }
.pay-terms .law {
	margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border);
	font-size: var(--fs-xs); line-height: var(--line-base); color: var(--color-fg-subtle);
}

/* 결제수단 묶음 */
.pay-method { margin-bottom: var(--space-4); }
.pay-method > .t {
	display: flex; align-items: baseline; gap: var(--space-2);
	margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.pay-method > .t .hint { font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.pay-method > .t .hint.is-sale { color: var(--color-danger); }
.pay-method > .t .hint.is-ok { color: var(--color-success); }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }

/* 결제수단 버튼 — .pay-btn 은 결제하기 화면과 공유한다 */
.pay-method .pay-btn {
	height: 46px; width: 100%; border-radius: var(--radius-md);
	background: var(--color-bg); color: var(--color-fg);
	border: 1px solid var(--color-border-strong);
}
.pay-method .pay-btn:hover { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-primary); }
.pay-method .pay-btn.is-bank { border-color: var(--color-warn); color: #9a3412; background: var(--color-warn-soft); }
.pay-method .pay-btn.is-bank:hover { background: #fde68a; color: #7c2d12; }
.pay-method .pay-btn.is-toss  { border-color: #3182f6; color: #1b64da; }
.pay-method .pay-btn.is-kakao { border-color: #fee500; background: #fee500; color: #191600; }
.pay-method .pay-btn.is-kakao:hover { background: #f5dc00; color: #191600; border-color: #f5dc00; }
.pay-method .pay-btn.is-paypal { border-color: #003087; color: #003087; }

/* 캐쉬 전액결제 — 유일하게 채워진 버튼 (권장 동선) */
.pay-method .pay-btn.is-cash {
	height: auto; min-height: 52px; flex-direction: column; gap: 2px;
	padding: var(--space-2) var(--space-4);
	background: var(--color-success); border-color: var(--color-success); color: #fff;
}
.pay-method .pay-btn.is-cash:hover { background: #15803d; border-color: #15803d; color: #fff; }
.pay-method .pay-btn.is-cash .sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); opacity: .92; }