/**
 * Joyn LMS 결제(체크아웃) 스타일 v2
 * 디자인 참조: fix2/lms-checkout.html
 * HC Payment 연동 전용
 */

/* ── 결제 페이지 상단 제목 "결제" 숨김 ─────────────────────────────────────── */
body.joyn-checkout-page .entry-title,
body.joyn-checkout-page .page-title,
body.joyn-checkout-page h1.entry-title,
body.joyn-checkout-page .entry-header .entry-title,
body.joyn-checkout-page .page-header .page-title,
body.joyn-checkout-page main h1:first-of-type {
    display: none !important;
}

/* ── 변수 (fix2 기준, 테마 변수와 병행) ───────────────────────────────────── */
.joyn-checkout-v2 {
    --joyn-bg: #f8fafc;
    --joyn-surface: #fff;
    --joyn-border: #e2e8f0;
    --joyn-border2: #e5e7eb;
    --joyn-p: #2563eb;
    --joyn-p-light: #eff6ff;
    --joyn-t1: #1e293b;
    --joyn-t2: #475569;
    --joyn-t3: #64748b;
    --joyn-t4: #94a3b8;
    --joyn-success: #059669;
    --joyn-danger: #dc2626;
    --joyn-r-md: 10px;
    --joyn-r-lg: 14px;
    --joyn-r-pill: 999px;
    --joyn-fs-xs: 12px;
    --joyn-fs-sm: 14px;
    --joyn-fs-base: 16px;
    --joyn-fs-lg: 18px;
    --joyn-fs-xl: 20px;
}

/* ── 레이아웃 ───────────────────────────────────────────────────────────── */
.joyn-checkout-v2 {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}

.joyn-sp {
    height: 16px;
}

/* ── 강의 요약 (결제 페이지 상단 카드: 더 크게 잘 보이게) ───────────────────── */
.joyn-order-summary-block {
    background: var(--joyn-surface);
    border-bottom: 1px solid var(--joyn-border);
    padding: 20px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.joyn-order-summary-block .order-thumb {
    width: 100px;
    height: 100px;
    border-radius: var(--joyn-r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.joyn-order-summary-block .order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.joyn-order-summary-block .order-thumb i {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.9);
}
.joyn-order-summary-block .order-thumb.th-indigo {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.joyn-order-summary-block .order-info {
    flex: 1;
    min-width: 0;
}
.joyn-order-summary-block .order-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--joyn-t1);
    line-height: 1.4;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.joyn-order-summary-block .order-instructor {
    font-size: var(--joyn-fs-sm);
    color: var(--joyn-t3);
}

/* ── 섹션 카드 ───────────────────────────────────────────────────────────── */
.joyn-checkout-v2 .section-card {
    background: var(--joyn-surface);
    border-radius: var(--joyn-r-lg);
    margin: 0 16px;
    padding: 16px;
    border: 1px solid var(--joyn-border);
}
.joyn-checkout-v2 .section-card-title {
    font-size: var(--joyn-fs-sm);
    font-weight: 800;
    color: var(--joyn-t1);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.joyn-checkout-v2 .section-card-title i {
    font-size: 18px;
    color: var(--joyn-p);
}

/* ── 주문자 정보 입력 ────────────────────────────────────────────────────── */
.joyn-form-inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.joyn-checkout-v2 .joyn-input {
    width: 100%;
    height: 46px;
    background: var(--joyn-bg);
    border: 1.5px solid var(--joyn-border);
    border-radius: var(--joyn-r-md);
    padding: 0 14px;
    font-size: var(--joyn-fs-sm);
    color: var(--joyn-t1);
    outline: none;
    box-sizing: border-box;
}
.joyn-checkout-v2 .joyn-input:focus {
    border-color: var(--joyn-p);
}
.joyn-checkout-v2 .joyn-input::placeholder {
    color: var(--joyn-t4);
}

/* ── 쿠폰 ────────────────────────────────────────────────────────────────── */
.joyn-checkout-v2 .coupon-row {
    display: flex;
    gap: 8px;
}
.joyn-checkout-v2 .coupon-input {
    flex: 1;
    height: 46px;
    background: var(--joyn-bg);
    border: 1.5px solid var(--joyn-border);
    border-radius: var(--joyn-r-md);
    padding: 0 14px;
    font-size: var(--joyn-fs-sm);
    color: var(--joyn-t1);
    outline: none;
    box-sizing: border-box;
}
.joyn-checkout-v2 .coupon-input:focus {
    border-color: var(--joyn-p);
}
.joyn-checkout-v2 .coupon-btn {
    height: 46px;
    padding: 0 18px;
    background: var(--joyn-p);
    color: #fff;
    border: none;
    border-radius: var(--joyn-r-md);
    font-size: var(--joyn-fs-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.joyn-checkout-v2 .coupon-applied {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ECFDF5;
    border-radius: var(--joyn-r-md);
    padding: 10px 14px;
}
.joyn-checkout-v2 .coupon-applied i {
    font-size: 18px;
    color: var(--joyn-success);
}
.joyn-checkout-v2 .coupon-applied-text {
    flex: 1;
    font-size: var(--joyn-fs-sm);
    font-weight: 600;
    color: var(--joyn-success);
}
.joyn-checkout-v2 .coupon-remove {
    font-size: var(--joyn-fs-xs);
    color: var(--joyn-t4);
    cursor: pointer;
}
.joyn-checkout-v2 .joyn-coupon-result {
    margin-top: 8px;
    font-size: var(--joyn-fs-sm);
}

/* ── 결제 수단 ───────────────────────────────────────────────────────────── */
.joyn-checkout-v2 .pay-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.joyn-checkout-v2 .pay-method {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--joyn-border);
    border-radius: var(--joyn-r-md);
    padding: 14px;
    cursor: pointer;
    transition: border-color .15s;
}
.joyn-checkout-v2 .pay-method.selected {
    border-color: var(--joyn-p);
    background: var(--joyn-p-light);
}
.joyn-checkout-v2 .pay-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--joyn-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.joyn-checkout-v2 .pay-method.selected .pay-radio {
    border-color: var(--joyn-p);
    background: var(--joyn-p);
}
.joyn-checkout-v2 .pay-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: none;
}
.joyn-checkout-v2 .pay-method.selected .pay-radio::after {
    display: block;
}
.joyn-checkout-v2 .pay-icon {
    width: 40px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.joyn-checkout-v2 .pay-icon i {
    font-size: 20px;
}
.joyn-checkout-v2 .pay-label {
    flex: 1;
    font-size: var(--joyn-fs-sm);
    font-weight: 600;
    color: var(--joyn-t1);
}
.joyn-checkout-v2 .pay-sub {
    font-size: var(--joyn-fs-xs);
    color: var(--joyn-t4);
}

/* ── 금액 정리 ───────────────────────────────────────────────────────────── */
.joyn-checkout-v2 .price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.joyn-checkout-v2 .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.joyn-checkout-v2 .price-label {
    font-size: var(--joyn-fs-sm);
    color: var(--joyn-t3);
}
.joyn-checkout-v2 .price-label.fw-bold {
    font-weight: 700;
    color: var(--joyn-t1);
}
.joyn-checkout-v2 .price-val {
    font-size: var(--joyn-fs-sm);
    font-weight: 600;
    color: var(--joyn-t1);
}
.joyn-checkout-v2 .price-val.discount {
    color: var(--joyn-danger);
}
.joyn-checkout-v2 .price-val.total {
    font-size: var(--joyn-fs-lg);
    font-weight: 900;
    color: var(--joyn-p);
}
.joyn-checkout-v2 .price-divider {
    height: 1px;
    background: var(--joyn-border);
    margin: 2px 0;
}

/* ── 정책/동의 ───────────────────────────────────────────────────────────── */
.joyn-checkout-v2 .joyn-policy-list {
    margin: 0;
    padding-left: 20px;
    font-size: var(--joyn-fs-sm);
    line-height: 1.6;
    color: var(--joyn-t3);
}
.joyn-checkout-v2 .agree-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
}
.joyn-checkout-v2 .agree-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--joyn-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.joyn-checkout-v2 .agree-check i {
    font-size: 14px;
    color: #fff;
    display: none;
}
.joyn-checkout-v2 .agree-item.checked .agree-check,
.joyn-checkout-v2 .agree-item:has(#agree_terms:checked) .agree-check {
    background: var(--joyn-p);
    border-color: var(--joyn-p);
}
.joyn-checkout-v2 .agree-item.checked .agree-check i,
.joyn-checkout-v2 .agree-item:has(#agree_terms:checked) .agree-check i {
    display: block;
}
.joyn-checkout-v2 .agree-text {
    flex: 1;
    font-size: var(--joyn-fs-sm);
    color: var(--joyn-t2);
}
.joyn-checkout-v2 .agree-link {
    color: var(--joyn-p);
    text-decoration: underline;
}

/* ── 결제하기 (본문 내부) ────────────────────────────────────────────────── */
.joyn-checkout-v2 .pay-inline {
    margin: 0 16px;
}
.joyn-checkout-v2 .pay-inline .pay-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.joyn-checkout-v2 .pay-total-label {
    font-size: var(--joyn-fs-sm);
    color: var(--joyn-t3);
}
.joyn-checkout-v2 .pay-total-amount {
    font-size: var(--joyn-fs-xl);
    font-weight: 900;
    color: var(--joyn-t1);
}
.joyn-checkout-v2 .pay-btn {
    width: 100%;
    height: 52px;
    background: var(--joyn-p);
    color: #fff;
    border: none;
    border-radius: var(--joyn-r-pill);
    font-size: var(--joyn-fs-base);
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .15s;
}
.joyn-checkout-v2 .pay-btn:active {
    opacity: .85;
}
.joyn-checkout-v2 .pay-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.joyn-checkout-v2 .pay-btn i {
    font-size: 20px;
}

/* ── 토스트 (이름/전화번호/결제동의 미입력 시 경고) ─────────────────────────── */
#joyn-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100% - 32px);
    pointer-events: none;
}
#joyn-toast-container .joyn-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--joyn-r-md, 10px);
    color: #fff;
    font-size: var(--joyn-fs-sm, 14px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#joyn-toast-container .joyn-toast--visible {
    transform: translateY(0);
    opacity: 1;
}
#joyn-toast-container .joyn-toast--warning {
    background: #faad14;
    color: #333;
}
#joyn-toast-container .joyn-toast--error {
    background: var(--joyn-danger, #dc2626);
}
#joyn-toast-container .joyn-toast--success {
    background: var(--joyn-success, #059669);
}
#joyn-toast-container .joyn-toast__message {
    flex: 1;
}
#joyn-toast-container .joyn-toast__close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 8px;
}
#joyn-toast-container .joyn-toast__close:hover {
    opacity: 1;
}

/* Remix Icon: class-controller-checkout에서 remixicon CSS 로드 */