/* ====== 스크롤 커스텀 ====== */
::-webkit-scrollbar{width: 8px; height: 8px;} 
::-webkit-scrollbar-thumb {background: #cfd8e6; border-radius: 0px;} 
::-webkit-scrollbar-track{background:  #f4f3f3c4;}

#wrap{background-color: #DAEAF1; height: 100vh !important;}
.container{
    width: 100%; max-width: 450px; height: 100%; max-height: 100vh;
    margin: 0 auto; background: #fff; overflow-y: auto;
}

/* 상단고정 */
.header{
    width: 100%; padding: 12px 20px; margin-bottom: 15px; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; background: #fff;
}
.leftImg{width: 50%; max-width: 85px;}
.rightTxt{font-size: 1.1em; font-weight: 500;}

.testInfo, .testSuccess{width: 100%; padding: 0 20px;}
.infoTxt{
    margin-bottom: 25px; padding: 18px 10px; border-radius: 5px; background: #edf3ff;
    font-size: 1em; font-weight: 500; color: #0052ef; text-align: center;
}
.info_T{line-height: 1.35em;}

/* ====== 정보입력 ====== */
.titleLine{font-size: 1.1em; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #0052ef; color: #0052ef;}
.top15{margin-top: 25px;}
label{font-size: 0.95em; display: block; margin-bottom: 5px; font-weight: 300; color: #555;}
.labelG{width: 100%; display: flex; gap: 12px;}
input{outline: none;}
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], textarea{
    width: calc(100% - 0px); height: 40px; font-size: 1em;
    padding: 10px 8px; margin-bottom: 10px;
    border: 1px solid #ccc; border-radius: 5px;
}
input::placeholder{color: #9e9e9e;}
textarea{resize: none; outline: none !important;}
.inputG{width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 10px;}
.inputG>input[type="text"]{margin-bottom: 0;}
.inputN{width: 100%; display: flex; gap: 12px; align-items: baseline;}
#security-code02{background: #ededed;}
.w100{width: 100%;}
.w70{width: 75%;}
.w30{width: 25%;}
.w50{width: 50%;}
.mb-10-15{margin-bottom: 10px !important;}

.clickBtn{height: 40px; font-size: 0.95em; background: #000; color: #fff; border-radius: 5px; cursor: pointer;}

.smTxt_0{font-size: 0.85rem; margin-bottom: 2px; color: #777; word-break: keep-all;}
.smTxt{font-size: 0.85rem; margin-bottom: 10px; color: #777; word-break: keep-all;}
.smTxt02{font-weight: 500; font-size: 0.85rem; color: #ff0000; word-break: keep-all;}

select{
    width: 100%; height: 40px; padding: 10px 8px; margin-bottom: 10px; outline: none;
    border: 1px solid #ccc; border-radius: 5px; font-size: 1em;
}

/* ====== 결제수단(톡결제) :: 커스텀 셀렉트 박스 ====== */
.custom-select{width: 100%; margin-bottom: 4px; position: relative; display: inline-block;}
.select-box{
    background-color: #fff; border: 1px solid #ccc; font-size: 1em;
    padding: 10px 8px; cursor: pointer;
    text-align: left; min-height: 40px; border-radius: 5px;
}

.select-box {
    background-color: #fff; border: 1px solid #ccc; font-size: 1em; line-height: 1.3em; word-break: keep-all;
    padding: 10px 40px 10px 8px; cursor: pointer; text-align: left; min-height: 40px; border-radius: 5px;
    /* 화살표 이미지 */
    background-image: url('../img/arrow_dropdown.png'); 
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 30px;
}
.select-options{
    display: none; position: absolute; font-size: 1em;
    background-color: #fff; border: 1px solid #ccc; border-radius: 8px;
    width: 100%; max-height: 195px;
    overflow-y: auto; z-index: 1;
}

/* 결제수단 :: 커스텀 셀렉트의 체크박스 */
.select-options label{display: block; padding: 8px 10px; cursor: pointer;}
.select-options input[type="checkbox"]{
    display: inline-block !important; margin-right: 7px;
    width: 15px !important; height: 15px !important; cursor: pointer;
    border: 1px solid #9da3a5 !important; border-radius: 3px !important;
}
.select-options label:hover{background-color: #1967D2; color: #fff;}
.select-box.active + .select-options{display: block;}


/* ======= 결제체험 이용약관(수기결제) ======= */
.clause_check{width: 100%; margin-top: 10px;}
.labelBg{background: #eaf2ff; padding: 15px 15px; border-radius: 8px;}
.all_check{display: flex; align-items: center; justify-content: space-between;}
.clause_list>.all_check{justify-content: flex-start !important; padding: 0 !important;}

/* ======= input checkbox style(커스텀) ======= */
input[type='checkbox']{display: none;}
.checkbox_custom{display: flex; align-items: center; cursor: pointer;}

/* checked */
.checkbox_custom>input:checked + .checkbox_style::before{
    background: url(../img/check.svg) no-repeat center;
    filter: invert(22%) sepia(80%) saturate(3097%) hue-rotate(217deg) brightness(86%) contrast(98%);
    border:none;
}

/* ======= 체크박스 디자인 ======= */
.checkbox_style::before{
    content:'';
    display: block;
    width: 18px; height: 18px; margin-right: 10px;
    background-color: transparent;
    border: 1px solid #9da3a5; border-radius: 3px;
    box-sizing:border-box;
    position: relative;
    cursor: pointer;
}

/* ======= 이용약관 더 보기 btn(클릭 시 svg 회전) ======= */
.more_btn{
    width: 18px; height: 18px; cursor: pointer;
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.more_btn.arrowDown{
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.more_btn>img{width: 100%; filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(241deg) brightness(90%) contrast(91%); transition: 0.25s; filter: invert(22%) sepia(80%) saturate(3097%) hue-rotate(217deg) brightness(86%) contrast(98%);}

.all_title{font-size: 1.1rem; font-weight: 500; color: #404040 !important;}
.item_title{font-size: 0.95rem; color: #757575; text-decoration: underline; text-underline-position: under;}
.clause_list>.all_check>.item_title{padding-bottom: 4px !important;}

.clause_list{width: 100%; margin-top: 15px; display: none;}
.clause_list>.all_check{margin-bottom: 8px;}
.clause_list>.all_check:hover .item_title{color: #444444;}
.itemBox{margin-left: 17px;}

/* input checkbox 박스 크기 */
.itemBox::before{width: 18px !important; height: 18px !important;}

/* 결제버튼 */
.payTestbtn, .resultBtn, .resultBtn02{
    width: 100%; padding: 15px 10px; margin: 20px 0 30px 0;
    font-size: 1.1em; font-weight: 600; cursor: pointer;
    background: #0052ef; color: #fff; border-radius: 5px;
}
.resultBtn{margin-top: 30px;}
.retry{margin-bottom: 0 !important;}
.resultBtn02{color: #555 !important; background: #e3e3e3 !important; margin: 10px 0 30px 0 !important;}


/* ======= 팝업창 style ======= */
/* 딤배경 */
.overlay{
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100;
}

/* 팝업창 style */
.popTitleG{
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: #fff; padding: 20px 0 15px 0;
    z-index: 1200;
}
.popup{
    display: none;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; max-width: 400px; max-height: 510px; border-radius: 8px;
    background-color: #fff;
    padding: 0 20px 20px 20px; z-index: 1200; overflow-y: auto;
}
.popTitleG>h2{font-size: 1.15em;}
.close-btn{width: 15px; height: 15px; cursor: pointer;}

/* 상품선택 리스트 style */
.productList, .productList>ul{width: 100%;}
.product-item{width: 100%; display: flex; gap: 15px; padding: 12px 10px; border-bottom: 1px solid #ececec;} 
.product-item:hover{background: #eaf2ffad; cursor: pointer;}
.product-item:first-child{margin-top: 5px;}
.product-item:last-child{border-bottom: 0;}
.leftproductImg{width: 35%;}
.productInfoTxt{width: 65%;}
.productInfoTxt>span{font-size: 0.95em; line-height: 1.4em;}

/* 고객조회 리스트 */
table{width: 100%; border-collapse: collapse; margin-top: 6px;}
#userPopup{overflow-x: auto; min-width: 400px !important;}
.userList{overflow-x: auto;}
.userList tr>th{padding: 10px 5px; font-size: 0.95em; background-color: #eaf2ff;}
.userList tr>td{text-align: center; padding: 10px 5px; font-size: 0.85em; border-bottom: 1px solid #ccc;}
.userList tr>th, .userList tr>td{white-space: nowrap !important;}
.userList tr:hover{background: #e7e7e756; cursor: pointer;}


/* ======= 결제 성공 페이지 ======= */
.iconImg{width: 100%; margin: 40px 0 25px 0;}
.iconImg>img{width: 70px; margin: 0 auto;}

.resultTltle>p{font-size: 1.8rem; line-height: 2rem; font-weight: 600; text-align: center;}
.fc-1{color: #0052ef;}
.resultContent{font-size: 1.2rem; text-align: center; margin: 20px 0 70px 0;}
.resultContent>span{margin-bottom: 9px;}
.resultContent>small{color: #0052ef;}

.tableLine{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 8px 0;}
.resultValue{margin-top: 0 !important;}
.resultValue tr>th{padding: 15px 15px; font-size: 1.1em; text-align: left;}
.resultValue tr>td{padding: 15px 15px; font-size: 1.1em; text-align: right;}
.testAmount, .in-b{display: inline-block !important;}

/* ======= 결제 실패 페이지 ======= */
.fc-2{color: #ec0000 !important; word-break: keep-all;}

/* ======= 반응형 css ======= */
@media all and (max-width:420px){
    /* 상단고정 */
    .header{padding: 15px 20px; margin-bottom: 15px;}
    .leftImg{width: 50%; max-width: 90px;}
    .rightTxt{font-size: 1.1em;}

    .infoTxt{margin-bottom: 30px; padding: 20px 10px; font-size: 1.1em;}

    /* ====== 결제수단(톡결제) :: 커스텀 셀렉트 박스 ====== */
    .custom-select{width: 100%; margin-bottom: 4px;}
    .select-box{font-size: 1em; padding: 10px 8px; min-height: 40px;}

    .select-box {
        font-size: 1em; line-height: 1.3em; 
        padding: 10px 40px 10px 8px; min-height: 40px; 
        
        background-position: right 8px center;
        background-size: 30px;
    }
    .select-options{
        display: none; font-size: 1em; width: 100%; max-height: 195px;
        overflow-y: auto; z-index: 1;
    }

    /* 결제수단 :: 커스텀 셀렉트의 체크박스 */
    .select-options label{ padding: 8px 10px;}
    .select-options input[type="checkbox"]{
        display: inline-block !important; margin-right: 7px;
        width: 15px !important; height: 15px !important; cursor: pointer;
    }
    .select-box.active + .select-options{display: block;}

    /* ====== 정보입력 ====== */
    .titleLine{font-size: 1.3em; margin-bottom: 15px; padding-bottom: 12px;}
    .top15{margin-top: 35px;}
    label{font-size: 0.95em;}
    .labelG{gap: 12px;}
    input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], textarea{
        height: 44px; font-size: 1em; padding: 10px 8px; margin-bottom: 15px;
    }
    .inputG{gap: 12px; margin-bottom: 15px;}
    .inputN{gap: 12px;}
    .w100{width: 100%;}
    .w70{width: 75%;}
    .w30{width: 25%;}
    .w50{width: 50%;}
    .mb-10-15{margin-bottom: 15px !important;}

    .clickBtn{height: 44px; font-size: 0.85em;}

    .smTxt{font-size: 0.85rem; margin-bottom: 15px;}
    .smTxt02{font-size: 0.85rem;}

    select{height: 46px; padding: 10px 8px; margin-bottom: 15px;}

    /* ======= 결제수단(톡결제) :: 커스텀 셀렉트 박스 ======= */
    .select-box {
        font-size: 1em; line-height: 1.3em; word-break: keep-all;
        min-height: 44px; border-radius: 5px; 
        /* 화살표 이미지 */
        background-image: url('../img/arrow_dropdown.png'); 
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 30px;
    }

    /* ======= 팝업창 style ======= */
    /* 팝업창 style */
    .popup{width: 90%; max-width: 400px; max-height: 510px; padding: 0 15px 15px 15px; }
    .popTitleG>h2{font-size: 1.15em;}
    .close-btn{width: 15px; height: 15px; cursor: pointer;}

    /* 상품선택 리스트 style */
    .productList, .productList>ul{width: 100%;}
    .product-item{width: 100%; display: flex; gap: 15px; padding: 12px 10px; border-bottom: 1px solid #ececec;} 
    .product-item:hover{background: #eaf2ffad; cursor: pointer;}
    .product-item:first-child{margin-top: 5px;}
    .product-item:last-child{border-bottom: 0;}
    .leftproductImg{width: 35%;}
    .productInfoTxt{width: 65%;}
    .productInfoTxt>span{font-size: 0.85em; line-height: 1.4em;}

    /* 고객조회 리스트 */
    .userList>tr>th{padding: 12px 5px; font-size: 0.95em;}
    .userList>tr>td{padding: 12px 5px; font-size: 0.88em;}

    .labelBg{padding: 18px 15px;}

    /* 결제버튼 */
    .payTestbtn, .resultBtn, .resultBtn02{padding: 18px 10px; margin: 20px 0 35px 0; font-size: 1.25em;}
}
@media all and (max-width:320px){
    /* 상단고정 */
    .header{padding: 15px 20px; margin-bottom: 15px;}
    .leftImg{width: 50%; max-width: 85px;}
    .rightTxt{font-size: 1em;}

    .infoTxt{margin-bottom: 30px; padding: 15px 8px; font-size: 0.95em;}

    /* ====== 결제수단(톡결제) :: 커스텀 셀렉트 박스 ====== */
    .custom-select{width: 100%; margin-bottom: 4px;}
    .select-box{font-size: 1em; padding: 10px 8px; min-height: 40px;}

    .select-box {
        font-size: 1em; line-height: 1.3em; 
        padding: 10px 40px 10px 8px; min-height: 40px; 
        
        background-position: right 8px center;
        background-size: 30px;
    }
    .select-options{
        display: none; font-size: 1em; width: 100%; max-height: 195px;
        overflow-y: auto; z-index: 1;
    }

    /* 결제수단 :: 커스텀 셀렉트의 체크박스 */
    .select-options label{ padding: 8px 10px;}
    .select-options input[type="checkbox"]{
        display: inline-block !important; margin-right: 7px;
        width: 15px !important; height: 15px !important; cursor: pointer;
    }
    .select-box.active + .select-options{display: block;}

    /* ====== 정보입력 ====== */
    .titleLine{font-size: 1.2em; margin-bottom: 15px; padding-bottom: 12px;}
    .top15{margin-top: 35px;}
    label{font-size: 0.85em;}
    .labelG{gap: 10px;}
    input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], textarea{
        height: 44px; font-size: 1em; padding: 10px 8px; margin-bottom: 10px;
    }
    .inputG{gap: 10px; margin-bottom: 10px;}
    .inputN{gap: 10px;}
    .w70{width: 65%;}
    .w30{width: 35%;}
    .w50{width: 50%;}
    .mb-10-15{margin-bottom: 10px !important;}

    .clickBtn{height: 43px; font-size: 0.85em;}

    .smTxt{font-size: 0.8rem; margin-bottom: 10px; word-break: keep-all;}
    .smTxt02{font-size: 0.8rem; word-break: keep-all;}

    select{height: 44px; padding: 10px 8px; margin-bottom: 10px;}

    /* ======= 팝업창 style ======= */
    /* 팝업창 style */
    .popup{width: 90%; max-width: 400px; max-height: 510px; padding: 0 12px 12px 12px;}
    .popTitleG>h2{font-size: 1.1em;}
    .close-btn{width: 14px; height: 14px;}

    /* 상품선택 리스트 style */
    .product-item{gap: 12px; padding: 12px 6px;} 
    .product-item:first-child{margin-top: 5px;}
    .leftproductImg{width: 30%;}
    .productInfoTxt{width: 70%;}
    .productInfoTxt>span{font-size: 0.8em; line-height: 1.6em; word-break: break-all;}

    /* 고객조회 리스트 */
    .userList>tr>th{padding: 14px 5px; font-size: 0.85em;}
    .userList>tr>td{ padding: 14px 5px; font-size: 0.8em;}

    /* ======= 결제체험 이용약관(수기결제) ======= */
    .labelBg{padding: 13px 13px;}
    .all_check{min-width: 0 !important;}

    /* ======= 체크박스 디자인 ======= */
    .checkbox_style::before{ width: 17px; height: 17px;}

    /* ======= 이용약관 더 보기 btn(클릭 시 svg 회전) ======= */
    .more_btn{width: 17px; height: 17px;}

    .all_title{font-size: 1rem;}
    .item_title{font-size: 0.9rem;}
    .clause_list>.all_check>.item_title{padding-bottom: 7px !important;}

    .clause_list{width: 100%; margin-top: 10px; display: none;}
    .clause_list>.all_check{margin-bottom: 4px;}
    .itemBox{margin-left: 13px;}

    /* input checkbox 박스 크기 */
    .itemBox::before{width: 18px !important; height: 18px !important;}

    /* 결제버튼 */
    .payTestbtn, .resultBtn, .resultBtn02{padding: 15px 10px; margin: 20px 0 35px 0; font-size: 1.25em;}

    /* ======= 결제 성공 페이지 ======= */
    .iconImg{width: 100%; margin: 37px 0 22px 0;}
    .iconImg>img{width: 60px; margin: 0 auto;}

    .resultTltle>p{font-size: 1.6rem; line-height: 1.8rem; font-weight: 600; text-align: center;}
    .resultContent{font-size: 1.1rem; text-align: center; margin: 15px 0 50px 0;}
    .resultContent>span{margin-bottom: 7px;}
    .resultContent>small{color: #0052ef;}

    .tableLine{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 6px 0;}
    .resultValue{margin-top: 0 !important;}
    .resultValue tr>th{padding: 12px 12px; font-size: 1em; text-align: left;}
    .resultValue tr>td{padding: 12px 12px; font-size: 1em; text-align: right;}
    .testAmount{display: inline-block !important;}
}
@media all and (max-width:280px){
    /* 상단고정 */
    .header{padding: 15px 20px; margin-bottom: 15px;}
    .leftImg{width: 50%; max-width: 85px;}
    .rightTxt{font-size: 1em;}

    .infoTxt{margin-bottom: 25px; padding: 12px 8px; font-size: 0.85em; font-weight: 500;}

    /* ====== 결제수단(톡결제) :: 커스텀 셀렉트 박스 ====== */
    .custom-select{width: 100%; margin-bottom: 4px;}
    .select-box{font-size: 0.8em; padding: 10px 8px; min-height: 38px;}

    .select-box {
        font-size: 0.8em; line-height: 1.3em; 
        padding: 10px 32px 10px 6px; min-height: 40px; 
        
        background-position: right 5px center;
        background-size: 29px;
    }
    .select-options{
        display: none; font-size: 1em; width: 100%; max-height: 195px;
        overflow-y: auto; z-index: 1;
    }

    /* 결제수단 :: 커스텀 셀렉트의 체크박스 */
    .select-options label{ padding: 8px 10px;}
    .select-options input[type="checkbox"]{
        display: inline-block !important; margin-right: 7px;
        width: 15px !important; height: 15px !important; cursor: pointer;
    }
    .select-box.active + .select-options{display: block;}
 
    /* ====== 정보입력 ====== */
    .titleLine{font-size: 1em; margin-bottom: 14px; padding-bottom: 10px;}
    .top15{margin-top: 25px;}
    label{font-size: 0.8em;}
    .labelG{gap: 10px;}
    input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], textarea{
        height: 38px; font-size: 0.8em; padding: 8px 8px; margin-bottom: 8px;
    }
    .inputG{gap: 8px; margin-bottom: 8px;}
    .inputN{gap: 8px;}
    .w70{width: 60%;}
    .w30{width: 40%;}
    .w50{width: 50%;}
    .mb-10-15{margin-bottom: 8px !important;}

    .clickBtn{height: 38px; font-size: 0.82em;}

    .smTxt{font-size: 0.75rem; margin-bottom: 8px;}
    .smTxt_0{font-size: 0.75rem;}
    .smTxt02{font-size: 0.75rem;}

    select{height: 38px; font-size: 0.8em; padding: 8px 8px; margin-bottom: 8px;}
 
    /* ======= 팝업창 style ======= */
    /* 팝업창 style */
    .popup{width: 88%; max-width: 400px; max-height: 510px; padding: 0 10px 10px 10px;}
    .popTitleG{padding: 18px 0 12px 0;}
    .popTitleG>h2{font-size: 1.05em;}
    .close-btn{width: 13px; height: 13px;}

    /* 상품선택 리스트 style */
    .product-item{gap: 12px; padding: 10px 6px;} 
    .product-item:first-child{margin-top: 5px;}
    .leftproductImg{width: 25%;}
    .productInfoTxt{width: 75%;}
    .productInfoTxt>span{font-size: 0.75em; line-height: 1.6em; word-break: break-all;}

    /* 고객조회 리스트 */
    .userList>tr>th{padding: 12px 3px; font-size: 0.75em;}
    .userList>tr>td{ padding: 12px 3px; font-size: 0.7em;}


    /* ======= 결제체험 이용약관(수기결제) ======= */
    .labelBg{padding: 13px 13px;}
    .all_check{min-width: 0 !important;}

    /* ======= 체크박스 디자인 ======= */
    .checkbox_style::before{width: 16px; height: 16px; margin-right: 8px;}

    /* ======= 이용약관 더 보기 btn(클릭 시 svg 회전) ======= */
    .more_btn{width: 15px; height: 15px;}

    .all_title{font-size: 0.95rem;}
    .item_title{font-size: 0.85rem;}
    .clause_list>.all_check>.item_title{padding-bottom: 7px !important;}

    .clause_list{width: 100%; margin-top: 10px; display: none;}
    .clause_list>.all_check{margin-bottom: 2px;}
    .itemBox{margin-left: 13px;}

    /* input checkbox 박스 크기 */
    .itemBox::before{width: 14px !important; height: 14px !important;}

    /* 결제버튼 */
    .payTestbtn, .resultBtn, .resultBtn02{padding: 12px 10px; margin: 18px 0 30px 0; font-size: 1em;}

    /* ======= 결제 성공 페이지 ======= */
    .iconImg{width: 100%; margin: 38px 0 23px 0;}
    .iconImg>img{width: 50px; margin: 0 auto;}

    .resultTltle>p{font-size: 1.5rem; line-height: 1.7rem; font-weight: 600; text-align: center;}
    .resultContent{font-size: 1rem; text-align: center; margin: 12px 0 50px 0;}
    .resultContent>span{margin-bottom: 6px;}
    .resultContent>small{color: #0052ef;}

    .tableLine{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 6px 0;}
    .resultValue{margin-top: 0 !important;}
    .resultValue tr>th{padding: 10px 10px; font-size: 0.95em; text-align: left;}
    .resultValue tr>td{padding: 10px 10px; font-size: 0.95em; text-align: right;}
    .testAmount{display: inline-block !important;}
}