/*
 * 결제 승인 대기 오버레이
 *
 * PG 인증이 끝난 뒤 서버 승인(STEP3) → 주문완료 페이지 이동까지의 공백을 덮는다.
 * 이 구간은 화면에 아무 변화가 없어 사용자가 결제가 멈춘 것으로 오인하고
 * 새로고침·뒤로가기·재클릭을 시도하기 쉽다.
 *
 * ⚠ 결제창이 떠 있는 동안에는 절대 띄우지 않는다.
 *   INIpay PRO 는 결제창을 팝업이 아니라 "우리 페이지 안의 iframe" 으로 렌더하므로,
 *   그 시점에 전체 화면을 덮으면 카드 입력폼 자체를 가려 결제가 불가능해진다.
 *
 * 이 파일은 tokens.css 가 로드되지 않는 레거시 페이지(cash.html, purchaseBulkPin.html 등)에도
 * 삽입되므로 모든 var() 에 fallback 리터럴을 둔다.
 */

.c-pay-wait {
    position: fixed;
    inset: 0;
    /* 구형 브라우저용 — inset 미지원 대비 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6, 24px);
    padding: var(--space-6, 24px);
    box-sizing: border-box;

    background: rgba(17, 17, 17, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    /* 모달(2000)보다 위. 이 구간에는 PG UI 가 없으므로 최상단이어도 가릴 대상이 없다. */
    z-index: var(--z-modal, 2000);

    /* 터치 스크롤·확대 차단 */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;

    /* 서서히 등장 — 승인 응답이 빠를 때 깜빡임처럼 보이지 않도록 */
    animation: c-pay-wait-in 0.18s ease-out;
}

/* [hidden] 이 flex 에 덮이지 않도록 명시적으로 되돌린다. */
.c-pay-wait[hidden] {
    display: none;
}

@keyframes c-pay-wait-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.c-pay-wait__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.28);
    border-top-color: var(--color-white, #FFFFFF);
    border-radius: 50%;
    animation: c-pay-wait-spin 0.9s linear infinite;
}

@keyframes c-pay-wait-spin {
    to { transform: rotate(360deg); }
}

.c-pay-wait__text {
    margin: 0;
    text-align: center;
    color: var(--color-white, #FFFFFF);
    font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.6;
    /* 사용자 안내 문구는 2줄이다. \n 대신 <br> 로 렌더하므로 별도 white-space 불필요. */
}

.c-pay-wait__sub {
    display: block;
    margin-top: var(--space-2, 8px);
    font-size: 0.9375rem;
    font-weight: 400;
    opacity: 0.86;
}

/*
 * 탈출구.
 * 기본은 숨김이고, 비정상적으로 오래 걸릴 때만 JS 가 노출한다.
 * 타이머로 오버레이를 자동으로 걷어내지는 않는다 — 승인이 느린 것뿐인데 걷어내면
 * 그 사이 재제출이 가능해져 이중 결제·이중 차감 위험이 생긴다. 해제는 사용자가 명시적으로 한다.
 */
.c-pay-wait__escape {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 12px);
}

.c-pay-wait.is-stalled .c-pay-wait__escape {
    display: flex;
}

.c-pay-wait__escape-msg {
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.86);
    font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.c-pay-wait__escape-btn {
    min-height: 40px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    color: var(--color-white, #FFFFFF);
    font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.c-pay-wait__escape-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.c-pay-wait__escape-btn:focus-visible {
    outline: 2px solid var(--color-white, #FFFFFF);
    outline-offset: 2px;
}

/* 스크롤 잠금 — JS 가 body 에 부착/해제 */
body.is-pay-wait-locked {
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .c-pay-wait__text {
        font-size: 1rem;
    }
    .c-pay-wait__sub {
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-pay-wait {
        animation: none;
    }
    .c-pay-wait__spinner {
        animation-duration: 2.4s;
    }
}