/* 임시계정 발급 광고 팝업 + 약관 본문 팝업 전용 스타일
 * 격리 부모: #trial-signup-popup, #trial-terms-popup, #trial-popup-dim
 */

/* === dim === */
#trial-popup-dim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 89;
}

/* === 광고 팝업 === */
#trial-signup-popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - 4rem);
    background: #ffffff;
    border-radius: 1rem;
    z-index: 90;
    overflow-y: auto;
    box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.2);
}

#trial-signup-popup .pop-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.4rem;
    border-bottom: 0.1rem solid #DEE2E6;
}
#trial-signup-popup .pop-head .pop-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
}
#trial-signup-popup .btn-close-popup {
    background: none;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #868E96;
    padding: 0;
}
#trial-signup-popup .btn-close-popup:hover {
    color: #495057;
}

#trial-signup-popup .pop-body {
    padding: 2rem 2.4rem;
}

#trial-signup-popup .intro-area {
    margin-bottom: 1.6rem;
}
#trial-signup-popup .intro-area .intro-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.4;
}
#trial-signup-popup .intro-area .intro-desc {
    margin-top: 0.6rem;
    font-size: 1.3rem;
    color: #495057;
    line-height: 1.5;
}

#trial-signup-popup .terms-area .agree-all {
    padding-bottom: 1.6rem;
    border-bottom: 0.1rem solid #DEE2E6;
}
#trial-signup-popup .txt-usher {
    color: #868E96;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 0.8rem;
}
#trial-signup-popup .txt-warning {
    color: #FA5252;
    font-size: 1.2rem;
    margin-top: 1.6rem;
}
#trial-signup-popup .txt-violet {
    color: #6741D9;
    font-weight: 600;
}

#trial-signup-popup .terms-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.6rem;
}
#trial-signup-popup .terms-btn {
    background: none;
    border: 0;
    color: #6741D9;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
}

#trial-signup-popup .email-area {
    margin-top: 2.4rem;
}
#trial-signup-popup .trial-email {
    width: 100%;
    height: 4.4rem;
    border: 0.1rem solid #CED4DA;
    border-radius: 0.4rem;
    padding: 0 1.2rem;
    font-size: 1.4rem;
    box-sizing: border-box;
}
#trial-signup-popup .trial-email:focus {
    outline: none;
    border-color: #6741D9;
}
#trial-signup-popup .email-notice {
    color: #FD7E14;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 0.8rem;
}
#trial-signup-popup .email-error {
    color: #FA5252;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 0.4rem;
    display: none;
}
#trial-signup-popup .email-error.on {
    display: block;
}

#trial-signup-popup .pop-cta {
    margin-top: 2.4rem;
    text-align: center;
}
#trial-signup-popup .btn-confirm {
    background: #6741D9;
    color: #ffffff;
    border: 0;
    padding: 1.2rem 3.2rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 12rem;
}
#trial-signup-popup .btn-confirm:disabled {
    background: #CED4DA;
    cursor: not-allowed;
}

#trial-signup-popup .pop-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.1rem solid #DEE2E6;
    padding: 1.6rem 2.4rem;
}
#trial-signup-popup .btn-hide-today,
#trial-signup-popup .btn-close-text {
    background: none;
    border: 0;
    color: #868E96;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
}
#trial-signup-popup .btn-hide-today:hover,
#trial-signup-popup .btn-close-text:hover {
    color: #495057;
}

/* === 약관 본문 팝업 === */
#trial-terms-popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80rem;
    max-width: calc(100vw - 4rem);
    height: 60rem;
    max-height: calc(100vh - 4rem);
    background: #ffffff;
    border-radius: 1rem;
    z-index: 100;
    box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.3);
    flex-direction: column;
    padding: 2rem;
    box-sizing: border-box;
}

#trial-terms-popup .tab-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#trial-terms-popup .tab-btn-wrap {
    display: flex;
    border-bottom: 0.1rem solid #DEE2E6;
}
#trial-terms-popup .tab-btn {
    flex: 1 0;
    padding: 1.2rem 0;
    background: none;
    border: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #868E96;
    cursor: pointer;
    border-bottom: 0.2rem solid transparent;
}
#trial-terms-popup .tab-btn.on {
    color: #6741D9;
    border-bottom-color: #6741D9;
}
#trial-terms-popup .tab-cont-wrap {
    flex: 1 0;
    overflow: hidden;
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
}
#trial-terms-popup .tab-cont {
    display: none;
    flex: 1 0;
    min-height: 0;
    flex-direction: column;
}
#trial-terms-popup .terms.scroll-y {
    flex: 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 1rem;
}
#trial-terms-popup .terms .text01 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
}
#trial-terms-popup .terms .text02 {
    font-size: 1.2rem;
    color: #868E96;
    margin-top: 0.4rem;
    line-height: 1.5;
}
#trial-terms-popup .terms .text03 {
    font-size: 1.2rem;
    color: #343A40;
    line-height: 1.7;
}
#trial-terms-popup .terms .text03.mt20 {
    margin-top: 2rem;
}

#trial-terms-popup .terms-popup-bottom {
    border-top: 0.1rem solid #DEE2E6;
    padding-top: 1.2rem;
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
#trial-terms-popup .btn-close-terms {
    background: #ffffff;
    border: 0.1rem solid #CED4DA;
    color: #495057;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.8rem 2rem;
    border-radius: 0.4rem;
}
#trial-terms-popup .btn-close-terms:hover {
    background: #F8F9FA;
}

/* === 약관 버전 dropdown === */
#trial-terms-popup .dropdown.v1.row {
    position: relative;
    display: inline-block;
}
#trial-terms-popup .dropdown .txt-pick {
    background: #FFFFFF;
    border: 0.1rem solid #CED4DA;
    border-radius: 0.4rem;
    padding: 0.6rem 2.4rem 0.6rem 1.2rem;
    font-size: 1.2rem;
    color: #495057;
    cursor: pointer;
    text-align: left;
    min-width: 14rem;
    position: relative;
}
#trial-terms-popup .dropdown .txt-pick::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.1rem solid #868E96;
    border-bottom: 0.1rem solid #868E96;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s;
}
#trial-terms-popup .dropdown.open .txt-pick::after {
    transform: translateY(-30%) rotate(-135deg);
}
#trial-terms-popup .drop-list {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin: 0 0 0.4rem 0;
    background: #FFFFFF;
    border: 0.1rem solid #CED4DA;
    border-radius: 0.4rem;
    list-style: none;
    padding: 0.4rem 0;
    min-width: 14rem;
    max-height: 16rem;
    overflow-y: auto;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
    z-index: 1;
}
#trial-terms-popup .dropdown.open .drop-list {
    display: block;
}
#trial-terms-popup .drop-list li {
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: #495057;
}
#trial-terms-popup .drop-list li:hover {
    background: #F8F9FA;
}

/* === 로딩 / 알림 팝업 (seecargo_kr_v4 스타일) ===
 * v4의 .pop-loading / .popup.alert 디자인을 그대로 차용.
 * 인트로 사이트의 다른 영역에 영향을 주지 않도록 ID로 격리한다.
 */

/* 공용 backdrop — 로딩/알림 팝업이 떠 있는 동안 화면 클릭 차단 */
#trial-loading-popup,
#trial-alert-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 110;
    align-items: center;
    justify-content: center;
}
#trial-loading-popup.on,
#trial-alert-popup.on {
    display: flex;
}

/* --- 공통 popup 컨테이너 (v4 .popup) --- */
#trial-loading-popup .popup,
#trial-alert-popup .popup {
    background-color: #ffffff;
    border-radius: 20px;
    flex-wrap: wrap;
    flex-direction: column;
}
#trial-loading-popup .pop-head .tit,
#trial-alert-popup .pop-head .tit {
    text-align: center;
    font-size: 14px;
    line-height: 1.286;
    font-weight: 700;
    padding: 15px 0;
    margin: 0;
}

/* --- 로딩 팝업 (v4 .pop-loading) --- */
#trial-loading-popup .pop-loading {
    width: 300px;
    display: flex;
}
#trial-loading-popup .pop-loading .pop-body {
    padding: 42px 0;
    width: 100%;
    text-align: center;
}
#trial-loading-popup .pop-loading .loadindg {
    margin: 34px auto;
    font-size: 25px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: trial-load 1.1s infinite ease;
    animation: trial-load 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
#trial-loading-popup .pop-loading .pop-txt {
    padding-top: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: #495057;
    margin: 0;
}

@-webkit-keyframes trial-load {
    0%, 100% { box-shadow: 0em -27px 0em 0em #6741D9, 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.5), -18px -18px 0 0em rgba(103, 65, 217, 0.7); }
    12.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.7), 18px -18px 0 0em #6741D9, 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.5); }
    25% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.5), 18px -18px 0 0em rgba(103, 65, 217, 0.7), 26px 0em 0 0em #6741D9, 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    37.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.5), 26px 0em 0 0em rgba(103, 65, 217, 0.7), 18px 18px 0 0em #6741D9, 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    50% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.5), 18px 18px 0 0em rgba(103, 65, 217, 0.7), 0em 26px 0 0em #6741D9, -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    62.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.5), 0em 26px 0 0em rgba(103, 65, 217, 0.7), -18px 18px 0 0em #6741D9, -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    75% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.5), -18px 18px 0 0em rgba(103, 65, 217, 0.7), -27px 0em 0 0em #6741D9, -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    87.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.5), -27px 0em 0 0em rgba(103, 65, 217, 0.7), -18px -18px 0 0em #6741D9; }
}
@keyframes trial-load {
    0%, 100% { box-shadow: 0em -27px 0em 0em #6741D9, 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.5), -18px -18px 0 0em rgba(103, 65, 217, 0.7); }
    12.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.7), 18px -18px 0 0em #6741D9, 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.5); }
    25% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.5), 18px -18px 0 0em rgba(103, 65, 217, 0.7), 26px 0em 0 0em #6741D9, 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    37.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.5), 26px 0em 0 0em rgba(103, 65, 217, 0.7), 18px 18px 0 0em #6741D9, 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    50% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.5), 18px 18px 0 0em rgba(103, 65, 217, 0.7), 0em 26px 0 0em #6741D9, -18px 18px 0 0em rgba(103, 65, 217, 0.2), -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    62.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.5), 0em 26px 0 0em rgba(103, 65, 217, 0.7), -18px 18px 0 0em #6741D9, -27px 0em 0 0em rgba(103, 65, 217, 0.2), -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    75% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.5), -18px 18px 0 0em rgba(103, 65, 217, 0.7), -27px 0em 0 0em #6741D9, -18px -18px 0 0em rgba(103, 65, 217, 0.2); }
    87.5% { box-shadow: 0em -27px 0em 0em rgba(103, 65, 217, 0.2), 18px -18px 0 0em rgba(103, 65, 217, 0.2), 26px 0em 0 0em rgba(103, 65, 217, 0.2), 18px 18px 0 0em rgba(103, 65, 217, 0.2), 0em 26px 0 0em rgba(103, 65, 217, 0.2), -18px 18px 0 0em rgba(103, 65, 217, 0.5), -27px 0em 0 0em rgba(103, 65, 217, 0.7), -18px -18px 0 0em #6741D9; }
}

/* --- 알림 팝업 (v4 .popup.alert) --- */
#trial-alert-popup .popup-alert {
    width: 400px;
    max-width: calc(100vw - 4rem);
    display: flex;
}
#trial-alert-popup .pop-head {
    background-color: #CED4DA;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
#trial-alert-popup .pop-body {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}
#trial-alert-popup .ic {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
}
#trial-alert-popup .ic-warning {
    background-image: url('../img/icon/ic_warning.png');
}
#trial-alert-popup .ic-complete {
    background-image: url('../img/icon/ic_complete.png');
}
#trial-alert-popup .txt-alert {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #212529;
    margin: 10px 0 0;
}
#trial-alert-popup .pop-foot {
    border-top: 1px solid #CED4DA;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
}
#trial-alert-popup .btn-confirm-alert {
    background: #6741D9;
    color: #ffffff;
    border: 0;
    padding: 0.8rem 2.4rem;
    border-radius: 0.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 8rem;
}
#trial-alert-popup .btn-confirm-alert:hover {
    background: #5A36C7;
}