/* ==========================================================
   Result Area
========================================================== */
 
.lookup-result{

    position:relative;

    overflow:hidden;


    /* background:#faf7f3; */

    background: #ffffff;
    
} 

.lookup-result{

padding:24px 28px;

    /* overflow:hidden; */

    overflow-y:auto;
}


.lookup-result>div{

    width:100%;
    height:100%;

    background:none;

    border:none;

    border-radius:0;

    padding:0;

}
/* ==========================================================
   Empty
========================================================== */

.lookup-empty{

    position:relative;

    width: 100%;
    height:100%;

    display:flex;

    align-items:flex-start;

    overflow:hidden;

    

    background:
        linear-gradient(
            rgba(248,246,242,.15),
            rgba(248,246,242,.15)
        ),
        url("../assets/image/mypage-car.png");

    background-repeat:no-repeat;

    background-size: 100%;


    background-position:
        right bottom;

        margin:-24px -28px;


}

.lookup-content{

    position:relative;

    z-index:2;

    width:580px;


    margin-top: 100px;
    margin-left: 28px;

}

.lookup-content img{
    width: 300px;

    margin-left: -20px;
}


.lookup-subtitle{

    width: 1500px;

    color:#81D8D0;

    font-size:28px;

    letter-spacing:5px;

    font-weight:600;

font-family: "Sanchez", serif;
}



.lookup-content h3{

    font-size:54px;

    font-weight:800;

    line-height:1.35;

    color:#171717;

    margin-bottom:25px;

}

.lookup-content p{

    font-size:19px;

    color:#555;

    line-height:2;

}

.lookup-hero-image{

    width:100%;

    margin-top:auto;

    display:flex;

    justify-content:flex-end;

}

.lookup-hero-image img{

    width:85%;

    max-width:760px;

    object-fit:contain;

}


.lookup-divider{

    width:55px;

    height:4px;

    border-radius:10px;

    margin:32px 0;

    background:#81D8D0;

}

.lookup-logo{

    width:170px;

    margin-bottom:8px;


}



.lookup-empty h3{

    font-size:48px;

    font-weight:800;

    line-height:1.3;

    color:#171717;

    margin-bottom:18px;

}

.lookup-empty p{
    width:520px;

    color:#666;

    line-height:1.8;

}

.lookup-guide{

    width:100%;

    border-top:1px solid #EFEFEF;

    border-bottom:1px solid #EFEFEF;

    padding:22px 0;

}

.lookup-guide div{

    position:relative;

    padding:10px 0 10px 22px;

    color:#555;

    font-size:18px;

    font-weight: 500;

}

.lookup-guide div::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width: 10px;

    height: 10px;

    border-radius:50%;

    background:#BE7C26;

}

.lookup-contact{

    margin-top:35px;

    

}

.lookup-contact strong{

    display:block;

    font-size:28px;

    color:#303030;

    font-weight:500;

    display: flex;

}

.lookup-contact span{

    display:block;

    margin-top:6px;

    color:#303030;

    font-size:24px;

    font-weight: 500;

    display: flex;

}
.lookup-contact strong img,
.lookup-contact span img{

    width: 40px;
    height: 40px;
    margin-right: 10px;
}



.lookup-empty-icon{

    width:74px;

    height:74px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#FFF3E8;

    color:#81D8D0;

    font-size:34px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.lookup-empty p{

    color:#888;

    line-height:1.8;

}

/* ==========================================================
   Loading
========================================================== */

.lookup-loading{

    margin-top: 400px;
    text-align:center;

}

.lookup-loading::before{

    content:"";

    display:block;

    width:42px;

    height:42px;

    margin:0 auto 20px;

    border-radius:50%;

    border:4px solid #eee;

    border-top:4px solid #81D8D0;

    animation:lookupSpin .7s linear infinite;

}

@keyframes lookupSpin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   Error
========================================================== */

.lookup-error{

    text-align:center;

}

.lookup-error h3{

    color:#D63C3C;

    margin-bottom:10px;

}

.lookup-error p{

    color:#777;

}

/* ==========================================================
   LOOKUP SUCCESS
========================================================== */



/* ==========================================================
   CARD
========================================================== */

.lookup-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    padding:28px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.lookup-card h3{

    font-size:19px;

    font-weight:700;

    margin-bottom:22px;

    color:#171717;

}



/* ==========================================================
   MEMO
========================================================== */

#customerMemo{

    line-height:1.9;

    color:#555;

    font-size:15px;

}


/* ==========================================================
   REFUND
========================================================== */

.refund-box{

    background:#F7F7F7;

    color:#171717;

}

.refund-box strong{

    color:#20B15A;

}


.summary-main{

    background:#171717;

    border-radius:22px;

    padding:28px;

    text-align:center;

}

.summary-main span{

    display:block;

    color:rgba(255,255,255,.75);

    margin-bottom:12px;

}

.summary-main strong{

    color: #81D8D0;

    font-size:36px;

    font-weight:800;

}
/* ==========================================================
   STATUS
========================================================== */



.summary-grid strong{

    display:block;

    margin-top:6px;

    font-size:22px;

}

.summary-grid small{

    display:block;

    color:#999;

    margin-top:8px;

    font-size:12px;

}




.contract-number{

    margin-top:20px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 14px;

    border-radius:40px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:13px;

}

.contract-number strong{

    font-size:15px;

    font-weight:700;

}

.lookup-status.green{

    background:#20B15A;

}

.lookup-status.orange{

    background:#F58220;

}

.lookup-status.gray{

    background:#999;

}

/* ==========================================================
   MY PAGE MODAL
========================================================== */

.mypage-modal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    display:none;

    justify-content:center;
    align-items:center;

    padding: 40px;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

    z-index:99999;

    overflow-y:auto;

}

.mypage-modal.show{

    display:flex;

}



.mypage-close{

    position:absolute;

    top:25px;

    right:25px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#F5F5F5;

    cursor:pointer;

    font-size:22px;

    z-index:10;

}

.mypage-login{

    background:#fafafa;

    border-right:1px solid #ededed;

    padding:55px 45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.mypage-login>p{

    font-size:14px;
    font-weight: 500;

    line-height:1.7;

    color:#777;

    margin-bottom:28px;

}

.mypage-login h2{

    font-size:30px;

    font-weight:800;

    margin-bottom:10px;

}

.mypage-login input{

    height:52px;

    border:1px solid #e8e8e8;

    border-radius:12px;

    padding:0 14px 0 auto;

    font-size:14px;

    transition:.25s;

}

.mypage-login input:focus{

    outline:none;

    border-color:#81D8D0;

    box-shadow:0 0 0 5px rgba(190,124,38,.12);

}

#lookupBtn{

    height:54px;

    border:none;

    border-radius:12px;

    background:#00d8c2;

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

#lookupBtn:hover{

    transform:translateY(-2px);

    box-shadow:

0 15px 35px rgba(129,216,208,.25);
}

.mypage-label{

    display:inline-block;

    margin-bottom:10px;

    color:#81D8D0;

    font-size: 20px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.mypage-login-form{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top: 0px;

}

.input-box{

    display:flex;

    align-items:center;

    height:64px;

    border:1px solid #EAEAEA;

    border-radius:16px;

    padding:0 20px;

    background:#fff;

}

.input-box img{

    width:20px;

    margin-right:14px;

    opacity:.45;

}

.input-box input{

    flex:1;

    border:none;

    background:none;

    font-size:15px;

}

.input-box:focus-within{

    border-color:#81D8D0;

    box-shadow:0 12px 28px rgba(129,216,208,.18);

}

.dashboard-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    margin-top:28px;

}
.lookup-card{

    display:flex;

    flex-direction:column;

    height:100%;

}





.lookup-help{

    margin-top:24px;



    border:1px solid #81D8D0;

    border-radius: 12px;

    background-color: #c7fff9;

    display: flex;

    padding-top: 10px;

    padding-bottom: 10px;
}

.lookup-help strong{

    display:block;

    font-size:13px;

    color:#171717;

    margin-bottom:8px;

}

.lookup-help img{
    width: 20px;
    margin-top: 10px;
    margin-left: 5px;
}


.lookup-help p{

    font-size:12px;

    color:#707070;

    line-height:1.6;
    padding: 4px;
    font-weight: 500;

}

.lookup-customer{

    margin-top: 10px;

    /* border: 1px solid #bebebe; */

    border-radius: 10px;

    background-color: #e7e7e7;

    font-family: "Pretendard", sans-serif;
}

.lookup-customer span{

    display:block;

    font-size: 16px;

    font-weight: 400;
    color:#2b2b2b;

    border-bottom: 1px solid #ffffff;

    padding: 10px 20px 10px 20px;

    margin-left: 0px;

    margin-top: 5px;

font-family: "SUIT", sans-serif;

}

.lookup-customer a{
    display: flex;
        border-bottom: 1px solid #f3f3f3;
}
.lookup-customer a:nth-child(2){
    border-bottom: none;
}

.lookup-customer a img{
    width: 28px;
    height: auto;
    padding: 5px 0 5px;
    margin-top: 10px;
    margin-left: 15px;
}



.lookup-customer strong{

    display:block;

    margin-top: 6px;

    font-size:18px;

    font-weight:400;

    color:#202020;

    padding: 6px;

font-family: "IBM Plex Sans KR", sans-serif;

}

.lookup-customer p{

    margin-top:6px;

    font-size:16px;

    font-weight: 400;

    color:#202020;
    margin-left: 15px;
    margin-bottom: 5px;

font-family: "IBM Plex Sans KR", sans-serif;
}








.vehicle-info{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



/* ==========================================================
   Vehicle Spec
========================================================== */

.vehicle-spec{

    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
    margin-top:8px;
    margin-left: 9px;

}

.vehicle-spec li{

    background:none;

    border:none;

    padding:0;

    display: flex;
    align-items: center;
    gap: 6px;

}





.vehicle-spec li:hover{

    border-color:#57ffee;

    background:#FCFFFF;

}

.vehicle-status{

    display:inline-flex;

    width:fit-content;

    margin: 0;
    flex-shrink: 0;

    padding:5px 10px;

    font-size: 14px;

    border-radius:30px;

    border: 1px solid #81D8D0;

    background-color: #00d8c2;

    color: #fff;

    font-weight: 600;
}

.spec-icon{
    width:40px;
    height:40px;
    margin:8px auto;
    display:flex;
    justify-content:center;
    align-items:center;
}

.spec-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}






.vehicle-spec .spec-icon{
    width:20px;
    height:20px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.vehicle-spec .spec-icon img{
    width:16px;
    height:16px;
}






/* /////////////////////////// */




.contract-progress #progressBar{

    width:30%;

    height:100%;

    background:#81D8D0;

}


/* ==========================================================
   MYPAGE V2
========================================================== */

/* 전체 모달 */

.mypage-wrap{

    display:grid;

    grid-template-columns:290px 1fr;

    width:96%;
    max-width:1550px;

    height:92vh;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

}

/* 왼쪽 */

.mypage-login{

     display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:42px 30px;

    background:#fbfbfb;
    

}

/* 오른쪽 */



/* 인사말 */







.mypage-greeting{
    margin-bottom:30px;
}

.mypage-greeting h2{
    font-size:24px;
    font-weight:800;
    color:#171717;
}

.mypage-greeting h2 span{
    color:#00d8c2;
}

.mypage-greeting p{
    margin-top:8px;
    color:#4b4b4b;
    font-size:20px;
}




/* ==========================================================
   VEHICLE CARD V2
========================================================== */

.vehicle-card{

    display:grid;

    grid-template-columns:220px 1fr;

    align-items:center;

    gap:28px;

    min-height: 155px;

    padding: 18px 22px;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    box-shadow:none;

    grid-area:vehicle;

}

.vehicle-image{

    width: 240px;

    height: 170px;
    display:flex;

    justify-content:center;

    align-items:center;

}

.vehicle-image img{

    width:100%;
/* 
    max-height: 95px; */

    object-fit: cover;

}

.vehicle-brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.vehicle-brand-row{
    display:flex;
    align-items:center;
    gap: 0px;
}

.vehicle-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:2px;
    margin-left: 10px;
}

.vehicle-brand img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.vehicle-brand h3{

    font-size:20px;
    margin:0;

}





.vehicle-spec li{

    display:flex;

    align-items:center;

    gap: 6px;

}


.spec-text{

    display:flex;

    flex-direction:column;

    justify-content: center;

    align-items: center;

    gap: 2px;

}

.spec-text span{

    display: block;

    font-size:12px;

    color:#999;

    margin-bottom: 2px;


}

.spec-text strong{

    display:block;
    line-height: 1;
    color:#7c7c7c;
    font-size:16px;
    font-weight: 500;
    margin: 0;

}



/* ==========================================================
   CONTRACT
========================================================== */

.contract-box{
    padding:14px 18px;
    margin-top: 10px;
}




.contract-progress{

    width:100%;

    height:8px;

    background:#ECECEC;

    border-radius:20px;

    overflow:hidden;

    margin-top:6px;
}

#progressText{

    margin-top:12px;

    font-size:14px;

    color:#666;

}

#progressPercent{

    color:#81D8D0;

    font-weight:700;

}




/* 카드 간격 */



#brandLogo{

    width:50px;
    height:50px;

    /* object-fit:contain; */

}

#brandName{

  font-size:18px;
    font-weight:600;
    color:#777;
    letter-spacing:1px;
    margin-left: 0px;
}

#resultCarModel{
    margin:0;
    font-size:26px;
    font-weight:800;
    flex:1;

}

/* ==========================================================
   RESULT LAYOUT
========================================================== */

.lookup-success{

    display:flex;

    flex-direction:column;

    gap:18px;

    height: calc(100vh - 140px);

    

}

/* 계약정보 아래 */

.summary-row{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:18px;

    align-items:stretch;

    margin-top: 10px;

}

/* ==========================================================
   CARD
========================================================== */

.contract-box,
.deposit-box,
.deduction-box{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    padding:18px;

    box-shadow:none;

}

.contract-box h3,
.deposit-box h3,
.deduction-box h3{

    margin:0 0 16px;

    font-size:20px;

    font-weight:700;

}

.contract-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:10px;

    margin-bottom: 8px;

}

.contract-item{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.contract-item span{

    font-size:12px;

    color:#888;

    
}

.contract-item strong{

    font-size:17px;

    font-weight:700;

    color:#171717;

}

.contract-progress{

    margin-top:6px;

    height:8px;

    background:#ECECEC;

    border-radius:20px;

    overflow:hidden;

}

.contract-progress #progressBar{

    height:100%;

    background:#81D8D0;

    border-radius:20px;

}

.progress-info{

    margin-top: 4px;

    display:flex;

    justify-content:center;

    gap:8px;

    font-size:13px;

}

#progressPercent{

    color:#81D8D0;

    font-weight:700;

    font-size: 20px;

}

.deposit-grid{

    display:flex;

    gap:12px;

    margin-top: 30px;

}

.deposit-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items: center;

    width: 160px;
    height: 160px;

    padding:14px;

    border:1px solid #ECECEC;

    border-radius:14px;

    background:#fff;

    font-family: "IBM Plex Sans KR", sans-serif;

}

.deposit-card span{

    font-size: 17px;

    color:#646464;

    margin-bottom: 6px;

}

.deposit-card strong{

    margin-top:4px;

    font-size:17px;

    font-weight:700;

    text-align: center;
}

.deposit-card .spec-icon{
    display:flex;
    justify-content:center;
    align-items:center;

    width:30px;
    height: 30px;
    margin:4px 0;
}

.deposit-card .spec-icon img{
    width:30px;
    height:30px;
    object-fit:contain;
}



/* /////////////////// */

.deduction-table{

    width: 440px;

    border-collapse:collapse;

    font-family: "IBM Plex Sans KR", sans-serif;

}

.deduction-table tr{

    border-bottom:1px solid #F1F1F1;

    

}

.deduction-table th{

    padding:8px 0;

    text-align:left;

    font-size:16px;

    color:#555555;

    font-weight:500;

    font-family: "IBM Plex Sans KR", sans-serif;
}

.deduction-table td{

    padding:8px 0;

    text-align:right;

    font-size: 18px;

    font-weight:600;

}

.deduction-table .total th{

    padding-top:14px;

    font-size:15px;

    font-weight:700;

}

.deduction-table .total td{

    padding-top:14px;

    font-size:22px;

    color:#00d8c2;

    font-weight:800;

}

.deduction-title{
    display:flex;
    align-items:center;
    gap:6px;
}

.deduction-title img{
    width:24px;
    height:24px;
}