/* ============================================================================= */
/* Mobile (< 767px) */
/* ============================================================================= */

/* --------------- Typography --------------- */
.popup-title {
    font-weight: var(--font-title3-weight);
    font-size: var(--font-title3-size);
    line-height: var(--font-title3-line-height);
    letter-spacing: var(--font-title3-letter-spacing);
}

.popup-content p {
    font-weight: var(--font-subtitle4-weight);
    font-size: var(--font-subtitle4-size);
    line-height: var(--font-subtitle4-line-height);
    letter-spacing: var(--font-subtitle4-letter-spacing);
}

.popup-footer button {
    font-weight: var(--font-body2-weight);
    font-size: var(--font-body2-size);
    line-height: var(--font-body2-line-height);
    letter-spacing: var(--font-body2-letter-spacing);
}

/* ---- 휴대폰 인증 ---- */
.auth-phone-field,
.auth-code-field,
.auth-code-send-btn,
.auth-code-check-btn,
.auth-time-wrapper span {
    font-weight: var(--font-subtitle4-weight);
    font-size: var(--font-subtitle4-size);
    line-height: var(--font-subtitle4-line-height);
    letter-spacing: var(--font-subtitle4-letter-spacing);
}

/* --------------- Popup Container --------------- */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    width: calc(100% - (var(--margin-mobile) * 2));
    max-width: 800px; /* 팝업 최대 너비 */
    background-color: var(--color-white);
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
    z-index: 1001;

    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-container.is-active {
    visibility: visible;
    opacity: 1;
}

/* --------------- Popup Header --------------- */
.popup-header {
    border-bottom: 1px solid var(--color-border-gray);
}


/* --------------- Popup Content --------------- */
.popup-content {
    max-height: 60vh;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.popup-content.no-footer {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}


/* --------------- Popup Footer --------------- */
.popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin: 0 auto;
    border-top: 1px solid var(--color-border-gray);
}


/* --------------- Feature --------------- */
/* ---- 휴대폰 인증 ---- */
.popup-content .auth-phone-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.popup-content .auth-code-wrapper {
    display: flex;
    gap: var(--spacing-2);
}

.popup-content .auth-time-wrapper .auth-time-text {
    color: var(--color-point-red);
}

/* ============================================================================= */
/* Tablet (>= 768px) */
/* ============================================================================= */
@media (min-width: 768px) {
    /* --------------- Typography --------------- */

    /* --------------- Popup Container --------------- */
    
    /* --------------- Popup Header --------------- */
    
    /* --------------- Popup Content --------------- */
    
    /* --------------- Popup Footer --------------- */
    
    /* --------------- Feature --------------- */
    /* ---- 휴대폰 인증 ---- */
    .popup-content .auth-phone-wrapper {
        flex-direction: row;
        gap: var(--spacing-2);
    }

    .popup-content .auth-phone-wrapper button,
    .popup-content .auth-code-wrapper button {
        min-width: 9.5em;
    }
}

/* ============================================================================= */
/* PC (>= 1280px) */
/* ============================================================================= */
@media (min-width: 1280px) {
/* --------------- Typography --------------- */
    /* ---- 휴대폰 인증 ---- */
    .auth-phone-field,
    .auth-code-field {
        font-weight: var(--font-subtitle3-weight);
        font-size: var(--font-subtitle3-size);
        line-height: var(--font-subtitle3-line-height);
        letter-spacing: var(--font-subtitle3-letter-spacing);
    }
    
    .auth-code-send-btn,
    .auth-code-check-btn {
        font-weight: var(--font-body2-weight);
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
    }
}