:root {
    /* --primary: #24b8b4;
    --primary-dark: #0f8f8d; */
    --primary: #81d8d0;
    --primary-dark: #0f8f8d;
    --ink: #142027;
    --muted: #77838f;
    --line: #e7edf1;
    --surface: #ffffff;
    --soft: #f6f9fa;
    --footer: #121c24;
    --shadow: 0 12px 30px rgba(28, 46, 56, .09);
}

body {
    min-height: 100vh;
    background: #eef3f5;
    color: var(--ink);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

.mobile-shell {
    position: relative;
    width: min(100%, 430px);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--surface);
    box-shadow: 0 0 0 1px rgba(20, 32, 39, .04);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
    position: fixed;
    top: 0;
    left:50%;
    transform:translateX(-50%);

    width:min(100%,430px);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 18px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(231, 237, 241, .8);
    backdrop-filter: blur(14px);
}

.brand {
    color: #81d8d0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1px;
}

.topbar a img{
    width: 100px;
}


.menu-button {
    display: inline-grid;
    gap: 4px;
    width: 36px;
    height: 36px;
    place-content: center;
}

.menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #44515b;
}

.menu-style a:nth-child(1){
    color: #81d8d0;
}
.menu-style a:nth-child(3){
    color: #81d8d0;
}
.menu-style a:nth-child(4){
    color: #81d8d0;
}
.menu-style a:nth-child(6){
    color: #81d8d0;
}



.hero {
    position: relative;
    min-height: 360px;
    background: #0f2930;
    overflow: hidden;
    width: 100%;

}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 57% center;

}

.hero-overlay {
display: none;

}

.hero-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 35px 18px 46px;
    /* color: #fff; */


    margin-top: 50px;
}

.eyebrow {
    margin-bottom: 2px;
    color: #000000;
    font-size: 25px;
    font-weight: 500;

    font-family: "Sanchez", serif;
    width: 500px;
}

.hero h1 {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.34;
font-family: "Sanchez", serif;

color: #81d8d0;

}

.hero-desc {
    margin-top: 4px;
    /* color: rgba(255, 255, 255, .82); */
    color: #000;
    font-size: 13px;
}

.hero-copy p span{
    /* color: #81d8d0; */
    font-weight: bold;
}

.hero-actions {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}
.hero-etc-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    overflow:hidden;
}

.hero-etc{
    display:flex;
    width:fit-content;
    margin:0;
}

.hero-etc{

        width:100%;
    gap:0;
    margin: 10px 0 10px;

    position: relative;

    background-color: #fff;
    opacity: 90%;


    border-radius:  1%;


}

.hero-etc article{

        flex:1;
    width:auto;

    padding:10px 6px;

    text-align: center;
    align-items: center;



    border-left: 0.2px solid #e0e0e0;

    margin: 5px 0 5px;

}
.hero-etc article:nth-child(1){
    border-left: 0px;
}

.hero-etc article h2{
    font-size: 10px;
    font-weight: 500;
}
.hero-etc article p{
        font-size: 8px;
}


.hero-btn{
    display: flex;
    gap: 10px;


}




.primary-btn,
.ghost-btn,
.deal-copy a,
.more-button,
.kakao-btn,
.phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.primary-btn {
    min-width: 102px;
    padding: 0 45px 0;
    background: var(--primary);
    color: #fff;

}

.ghost-btn {
    min-width: 102px;
    padding: 0 45px 0;
    border: 1px solid rgba(255, 255, 255, .38);
    /* background: rgba(4, 24, 29, .28); */
    background-color: #070707;

    color: #fff;
}

.pager {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.pager span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .48);
}

.pager .active {
    width: 17px;
    background: var(--primary);
}

.pager.light {
    position: static;
    margin-top: 16px;
}

.pager.light span {
    background: #d8e2e7;
}

.pager.light .active {
    background: var(--primary);
}

.section {
    padding: 34px 18px;
    background: #fff;



}

.section:nth-of-type(odd) {
    background: #fbfcfd;
}

.compact {
    padding-top: 30px;
}

.section-heading {
    margin-bottom: 18px;
    text-align: left;

            text-align: center;

}

.section-heading h2 {
    font-size: 19px;
    font-weight: 500;
    color: #81d8d0;

    font-family: "Sanchez", serif;


}

.section-heading p {
    margin-top: 5px;
    color: #000;
    font-size: 20px;
    font-weight: 500;
}

.car-strip{

    display:flex;
    gap:14px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:4px 2px 12px;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

.car-strip::-webkit-scrollbar{
    display:none;
}

.car-strip .car-card{

    flex:0 0 calc(100% - 6px);

    scroll-snap-align:center;

    margin: 0;
}

.car-section-title{

    margin:34px 20px 16px;

    font-size:20px;

    font-weight:700;

    color:#222;

}

#importCars,
#domesticCars{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:0 20px;
    margin-top: 10px;

}

.car-group{

    margin-top:34px;

}

.group-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    border-radius:18px;

    padding:18px 20px;

    box-shadow:0 6px 20px rgba(0,0,0,.06);

    cursor:pointer;

}

.group-header h3{

    margin:0;

}

.group-header p{

    margin-top:6px;

    font-size:13px;

    color:#777;

}

.arrow{

    font-size:22px;

    transition:.3s;

}

/* .group-header button{

    background:none;
    border:none;

    color:#81d8d0;

    font-weight:700;

    font-size:14px;

    cursor:pointer;

    transition:.25s;

} */

.group-header button:hover{

    opacity:.7;

}


#allCars{
    background-color: #ebfffc;
}




.car-card {
 background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    margin-bottom:18px;

        transition:.25s;

            transform:translateY(30px);

    opacity:0;

    animation:cardUp .5s forwards;

}



.car-card:active{

    transform:scale(.97);

}

.primary-btn:active,
.ghost-btn:active{

    transform:scale(.97);

}

/* .pill {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
}

.car-card .pill {
    position: absolute;
    top: 8px;
    left: 8px;
} */

.car-card img {

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    display:block;
}

/* .car-card h3 {
    margin-top: 9px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-card p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.car-card strong {
    display: block;
    margin-top: 4px;
    color: #81d8d0;
    font-size: 10px;
    white-space: nowrap;
} */


.car-body{

    padding:18px;

}

.car-brand{

    color:#81d8d0;

    font-size:13px;

    font-weight:700;

    margin-bottom:4px;

}

.car-title{

    font-size:20px;

    font-weight:700;

}

.car-spec{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin:16px 0;

}

.car-spec span{

    background:#f5f5f5;

    border-radius:999px;

    padding:6px 12px;

    font-size:12px;

}

.car-price{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.car-price strong{

    font-size:22px;

    color:#81d8d0;

}




#benefits .section-heading p{
    font-weight: 400;
}

#benefits .section-heading span{
    font-weight: bold;
}



.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.benefit-grid article {
    min-height: 136px;
    padding: 20px 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow);
}

.benefit-grid article:nth-child(3) img{
    width: 140px;
    height: 140px;
}


.benefit-grid img {
    width: 140px;
    height: 140px;
    margin: 0 auto 12px;
    object-fit: contain;
}

.benefit-grid h3 {
    font-size: 14px;
    font-weight: 900;
}

.benefit-grid p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

#review-section{
    background-color: #e8ffff;
}



.review-strip{

    display:flex;

    gap:14px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.review-strip::-webkit-scrollbar{

    display:none;

}
.review-card{

    flex:0 0 calc(100% - 6px);

    scroll-snap-align:center;

    padding:22px;

    border-radius:18px;

    background:#fff;

    box-shadow:0 8px 24px rgba(0,0,0,.06);
    text-align: center;
    align-items: center;

    height: 180px;

}

.stars {
    color: var(--primary);
    font-size: 20px;
    letter-spacing: 0;
    margin-bottom: 10px;
}

.review-card p{
    margin-bottom: 12px;
    font-size: 16px;
}
.review-card strong{
    font-size: 16px;
}
.review-card span{
    font-size: 16px;
}

.review-copy h3 {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 900;

}

.review-copy p {
    margin-top: 7px;
    color: #52606b;
    font-size: 11px;

}

.review-copy span {
    display: block;
    margin-top: 10px;
    color: #8b98a2;
    font-size: 10px;
}



.deal-card {
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: center;
    min-height: 188px;
    padding: 18px 0 18px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fbfc, #fff);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.deal-copy h3 {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 900;
}

.deal-copy p {
    margin-top: 14px;
    color: #606c76;
    font-size: 12px;
    text-decoration: line-through;
}

.deal-copy strong {
    display: block;
    color: var(--primary-dark);
    font-size: 21px;
    font-weight: 900;
}

.deal-copy a {
    width: 92px;
    min-height: 36px;
    margin-top: 14px;
    border: 1px solid #ccd7de;
    color: #26323a;
    font-size: 12px;
}

.deal-card img {
    width: 116%;
    max-width: none;
    transform: translateX(-5%);
}

.faq-section {
    padding-bottom: 28px;
}

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-list details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.faq-list summary {
    position: relative;
    min-height: 46px;
    padding: 14px 42px 14px 14px;
    color: #27343d;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #77838f;
    border-bottom: 1.5px solid #77838f;
    content: "";
    transform: translateY(-70%) rotate(45deg);
}

.faq-list details[open] summary::after {
    transform: translateY(-20%) rotate(225deg);
}

.faq-list p {
    padding: 0 14px 14px;
    color: var(--muted);
    font-size: 12px;
}

.more-button {
    width: 100%;
    margin-top: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: #5c6872;
}

.contact-section {
    padding-top: 34px;
}

.contact-actions {
    display: grid;
    gap: 10px;
}

.kakao-btn,
.phone-btn {
    width: 100%;
    min-height: 50px;
}

.kakao-btn {
    background: var(--primary);
    color: #fff;

}

.kakao-btn::before {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 7px;
}

.phone-btn {
    border: 1px solid #ccd7de;
    color: #26323a;
}

.phone-btn::before {
    margin-right: 8px;
    color: var(--primary-dark);


}

/* drawer */

.drawer{

    position:fixed;

    top:0;
    right:-300px;

    width:260px;
    height:auto;
    max-height:420px;

    background:#fff;

    z-index:9999;

    transition:.35s;

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

    padding:24px 20px 24px;

}

.drawer.open{

    /* transform: translate(-50%, 0); */


    right:0;

}

.drawer a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:56px;

    padding:0;

    color:#222;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    border-bottom:1px solid #f2f2f2;

}


.drawer a::after{

    content:"›";

    font-size:22px;

    color:#bbb;

    margin-left: 10px;

}

.menu-button.active span:nth-child(1){

    transform:rotate(45deg) translateY(9px);

}

.menu-button.active span:nth-child(2){

    opacity:0;

}

.menu-button.active span:nth-child(3){

    transform:rotate(-45deg) translateY(-9px);

}




.drawer-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.drawer-header strong{
    font-size:18px;
    font-weight:700;
}

.drawer-close{
    width:36px;
    height:36px;

    border:none;
    background:none;

    font-size:22px;
    cursor:pointer;

    color:#555;
}










#goTop{

    position:fixed;

    right:18px;

    bottom:20px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#81d8d0;

    color:#fff;

    display:none;

    z-index:999;

}

#goTop.show{

    display:block;

}









@keyframes cardUp{

    to{

        transform:none;

        opacity:1;

    }

}





@media (max-width: 360px) {
    .hero-copy {
        width: 76%;
    }

    .hero h1 {
        font-size: 23px;
    }


}


.footer{

    background:#162026;

    padding:42px 22px 34px;

    color:#fff;

}

.footer-logo{

    width:110px;

    display:block;

    margin:0 auto 24px;

}

.footer-slogan{

    text-align:center;

    line-height:1.8;

    color:#d9e3e8;

    margin-bottom:28px;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:30px;

    font-size:17px;
}
.footer-contact>div{
    display: flex;
    gap: 4px;
}

.footer-contact img{
    width: 20px;
    height: 20px;

}



.footer-links{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    padding:28px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-links a{

    color:#fff;

    font-weight: 400;

}

.footer-info{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:28px;

}

.footer-info div{

    display:grid;

    grid-template-columns:110px 1fr;

    gap:14px;

}

.footer-info strong{

    color:#fff;

}

.footer-info span{

    color:#cfd8dd;

    line-height:1.6;

}

.footer small{

    display:block;

    margin-top:32px;

    text-align:center;

    color:#9aa7af;

}