@charset "utf-8";

#bo_v_con a { color:#2563eb; text-decoration:underline; }
#bo_v_con a:hover { color:#1d4ed8; }
#bo_v_con img { max-width:100%; height:auto; }
.autosave_content { display:none; }

/* 공통 */
.car-ui-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    padding:0 18px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    border:1px solid transparent;
    box-sizing:border-box;
    cursor:pointer;
}
.car-ui-btn.fill{
    background:#2563eb;
    color:#fff;
}
.car-ui-btn.fill:hover{
    background:#1d4ed8;
}
.car-ui-btn.line{
    background:#fff;
    color:#374151;
    border-color:#d1d5db;
}
.car-ui-btn.line.danger{
    color:#dc2626;
    border-color:#fecaca;
}

/* 목록 */
.car-board-list-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:30px 16px 60px;
    box-sizing:border-box;
}
.car-list-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}
.car-list-total{
    display:flex;
    align-items:flex-end;
    gap:10px;
}
.car-list-total strong{
    font-size:28px;
    line-height:1;
    font-weight:900;
    color:#111827;
}
.car-list-total span{
    font-size:14px;
    color:#666;
}
.car-list-actions{
    display:flex;
    gap:8px;
    align-items:center;
}
.car-search-box{
    display:none;
    margin-bottom:18px;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
}
.car-search-box.open{
    display:block;
}
.car-search-box form{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.car-search-select,
.car-search-input{
    height:44px;
    border:1px solid #ddd;
    border-radius:10px;
    padding:0 14px;
    box-sizing:border-box;
    font-size:14px;
}
.car-search-input{
    flex:1;
    min-width:220px;
}
.car-card-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
}
.car-card-item{
    display:block;
    text-decoration:none;
    color:inherit;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
    transition:.2s ease;
}
.car-card-item:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px rgba(15,23,42,.08);
}
.car-card-item .thumb{
    width:100%;
    aspect-ratio:700 / 420;
    background:#f3f4f6;
}
.car-card-item .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.car-card-item .info{
    padding:18px;
}
.car-card-item .maker{
    font-size:13px;
    color:#2563eb;
    font-weight:800;
    margin-bottom:8px;
}
.car-card-item h3{
    margin:0 0 8px;
    font-size:22px;
    line-height:1.3;
    font-weight:800;
    color:#111827;
}
.car-card-item p{
    margin:0;
    font-size:14px;
    color:#666;
    line-height:1.5;
}
.car-card-item .price{
    margin-top:14px;
    font-size:24px;
    font-weight:900;
    color:#111827;
}
.car-empty-box{
    grid-column:1 / -1;
    padding:80px 20px;
    text-align:center;
    border:1px dashed #d1d5db;
    border-radius:18px;
    background:#fff;
    color:#666;
    font-size:15px;
    font-weight:700;
}

/* 관리자 등록 */
.car-admin-write-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:30px 16px 60px;
    box-sizing:border-box;
}
.car-admin-block{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:22px;
    margin-bottom:18px;
}
.car-admin-block h3{
    margin:0 0 16px;
    font-size:22px;
    color:#111827;
    font-weight:800;
}
.car-admin-grid{
    display:grid;
    gap:14px;
    margin-bottom:14px;
}
.car-admin-grid.grid-5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.car-admin-grid.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.car-admin-grid.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.car-admin-grid.grid-1{ grid-template-columns:1fr; }
.car-admin-grid label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    color:#374151;
    font-weight:700;
}
.car-admin-input,
.car-admin-textarea{
    width:100%;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    color:#111827;
    font-size:14px;
    box-sizing:border-box;
}
.car-admin-input{
    height:46px;
    padding:0 14px;
}
.car-admin-textarea{
    min-height:140px;
    padding:14px;
    resize:vertical;
}
.car-admin-help{
    margin:0 0 10px;
    font-size:13px;
    color:#6b7280;
    line-height:1.6;
}
.car-admin-help code{
    background:#f3f4f6;
    padding:2px 6px;
    border-radius:6px;
}
.car-hidden-textarea{
    display:none;
}
.car-admin-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:14px;
}
.car-admin-captcha{
    margin-top:8px;
}

/* 상세보기 */
.car-view-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:30px 16px 60px;
    box-sizing:border-box;
}
.car-view-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}
.car-view-top .left h2{
    margin:0 0 8px;
    font-size:30px;
    font-weight:900;
    color:#111827;
}
.car-view-top .left p{
    margin:0;
    font-size:14px;
    color:#666;
}
.car-view-top .right{
    display:flex;
    gap:8px;
}
.car-view-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:28px;
    align-items:start;
}
.car-visual-box{
    background:#f5f5f5;
    border-radius:28px;
    padding:30px 30px 24px;
    position:relative;
    overflow:hidden;
}
.car-title-panel{
    max-width:700px;
    margin:0 auto 20px;
    background:rgba(255,255,255,.72);
    border-radius:18px;
    padding:18px 20px;
    text-align:center;
}
.car-title-panel h3{
    margin:0 0 8px;
    font-size:34px;
    line-height:1.2;
    font-weight:800;
    color:#111827;
}
.car-title-panel p{
    margin:0;
    font-size:14px;
    color:#111827;
    line-height:1.6;
}
.car-title-panel .sub{
    color:#111827;
}
.car-title-panel span{
    display:inline-block;
    margin:0 8px;
    color:#6b7280;
}
.car-angle-tabs{
    position:absolute;
    left:24px;
    top:204px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:3;
}
.car-angle-tabs button{
    width:62px;
    height:46px;
    border:none;
    background:rgba(255,255,255,.75);
    color:#777;
    font-size:14px;
    font-weight:700;
    border-radius:16px;
    cursor:pointer;
}
.car-angle-tabs button.is-active{
    color:#111827;
    background:#fff;
}
.car-main-image-box{
    width:100%;
    max-width:760px;
    margin:0 auto;
    aspect-ratio:900 / 520;
    display:flex;
    align-items:center;
    justify-content:center;
}
.car-main-image-box img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.car-gallery-type-tabs{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:18px 0 14px;
}
.car-gallery-type-tabs button{
    background:none;
    border:none;
    font-size:17px;
    color:#8b8b8b;
    font-weight:500;
    padding:0 0 8px;
    border-bottom:2px solid transparent;
    cursor:pointer;
}
.car-gallery-type-tabs button.is-active{
    color:#111827;
    font-weight:800;
    border-bottom-color:#111827;
}
.car-thumb-area{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px;
    align-items:center;
    gap:14px;
    max-width:820px;
    margin:0 auto;
}
.car-thumb-area .nav{
    border:none;
    background:none;
    font-size:42px;
    line-height:1;
    color:#444;
    cursor:pointer;
}
.thumb-list{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    background:rgba(255,255,255,.65);
    border-radius:24px;
    padding:18px;
}
.thumb-item{
    border:none;
    background:none;
    cursor:pointer;
    text-align:center;
    padding:0;
}
.thumb-item img{
    width:100%;
    max-width:110px;
    aspect-ratio:1 / 0.7;
    object-fit:contain;
    display:block;
    margin:0 auto 8px;
}
.thumb-item span{
    display:block;
    font-size:13px;
    color:#333;
    line-height:1.4;
    word-break:keep-all;
}
.thumb-item.is-active span{
    color:#2563eb;
    font-weight:800;
}

.car-options-box,
.car-admin-note-box{
    margin-top:18px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:22px;
}
.car-options-box h4,
.car-admin-note-box h4{
    margin:0 0 14px;
    font-size:20px;
    font-weight:800;
    color:#111827;
}
.car-option-checks{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
}
.option-check-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    cursor:pointer;
    background:#fafafa;
}
.option-check-item input{
    margin-right:8px;
}
.option-check-item span{
    flex:1;
    font-size:14px;
    color:#111827;
    font-weight:700;
}
.option-check-item em{
    font-style:normal;
    font-size:13px;
    color:#2563eb;
    font-weight:800;
}

.car-side-panel{
    border:1px solid #c9c9c9;
    border-radius:10px;
    background:#fff;
    padding:0 18px 18px;
    position:sticky;
    top:80px;
}
.stock-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(100% + 36px);
    height:52px;
    margin:0 -18px 16px;
    background:linear-gradient(90deg, #1d8fe6, #2d43c7);
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:800;
    border-radius:8px 8px 0 0;
}
.stock-btn span{
    margin-left:10px;
}
.car-select-row{
    display:grid;
    gap:10px;
    margin-bottom:10px;
}
.car-select-row.grid-2{
    grid-template-columns:1fr 1fr;
}
.fake-select,
.calc-select,
.fixed-info{
    width:100%;
    height:46px;
    border:1px solid #e2e2e2;
    border-radius:24px;
    background:#f7f7f7;
    color:#333;
    padding:0 16px;
    font-size:14px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
}
.calc-select{
    background:#fff;
    border-radius:8px;
}
.car-link-buttons{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin:8px 0 10px;
}
.car-link-buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:30px;
    padding:0 16px;
    border:1px solid #cfcfcf;
    border-radius:6px;
    background:#f8f8f8;
    font-size:13px;
    font-weight:700;
    color:#111827;
    text-decoration:none;
}
.section-title{
    margin:10px 0 10px;
    font-size:14px;
    color:#777;
}
.contract-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:8px;
    align-items:center;
    margin-bottom:14px;
}
.fixed-info{
    border-radius:8px;
    border:1px solid #ddd;
    justify-content:center;
    text-align:center;
    word-break:keep-all;
}
.price-summary-box{
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    padding:12px 0;
}
.price-summary-box dl{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    margin:0 0 8px;
}
.price-summary-box dl:last-child{
    margin-bottom:0;
}
.price-summary-box dl.total{
    border-top:1px dashed #ddd;
    padding-top:10px;
    margin-top:10px;
}
.price-summary-box dt{
    font-size:14px;
    color:#7b7b7b;
}
.price-summary-box dd{
    margin:0;
    font-size:18px;
    font-weight:900;
    color:#111827;
}
.month-result-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    padding:14px 0;
    border-bottom:1px solid #ddd;
}
.month-card .label{
    display:block;
    font-size:14px;
    color:#7b7b7b;
    margin-bottom:6px;
}
.month-card .value{
    font-size:16px;
    color:#444;
    line-height:1.3;
}
.month-card .value strong{
    font-size:22px;
    color:#2453ff;
    font-weight:900;
}
.month-card p{
    margin:4px 0 0;
    font-size:12px;
    color:#7b7b7b;
    line-height:1.4;
}
.buyout-box{
    margin:14px 0 12px;
}
.buyout-toggle{
    width:100%;
    height:38px;
    border:none;
    border-radius:8px;
    background:#f1f1f1;
    font-size:14px;
    font-weight:700;
    color:#222;
    cursor:pointer;
}
.buyout-content{
    display:none;
    margin-top:10px;
    padding:14px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fafafa;
}
.buyout-content.open{
    display:block;
}
.buyout-content dl{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:0 0 10px;
}
.buyout-content dt{
    font-size:13px;
    color:#666;
}
.buyout-content dd{
    margin:0;
    font-size:14px;
    font-weight:800;
    color:#111827;
    text-align:right;
}
.buyout-content p{
    margin:0;
    font-size:12px;
    color:#666;
    line-height:1.5;
}
.detail-outline-btn{
    width:100%;
    height:50px;
    border:1px solid #2563eb;
    border-radius:8px;
    background:#fff;
    color:#2563eb;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    margin-bottom:8px;
}
.consult-fill-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:8px;
    background:#1e67e5;
    color:#fff;
    font-size:18px;
    font-weight:800;
    cursor:pointer;
}

/* 반응형 */
@media (max-width: 1180px){
    .car-view-layout{
        grid-template-columns:1fr;
    }
    .car-side-panel{
        position:static;
    }
    .car-admin-grid.grid-5{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 860px){
    .car-card-grid{
        grid-template-columns:1fr;
    }
    .car-view-top,
    .car-list-top{
        flex-direction:column;
        align-items:flex-start;
    }
    .car-option-checks{
        grid-template-columns:1fr;
    }
    .contract-grid{
        grid-template-columns:1fr 1fr;
    }
    .contract-grid .fixed-info{
        grid-column:1 / -1;
    }
}

@media (max-width: 640px){
    .car-board-list-wrap,
    .car-admin-write-wrap,
    .car-view-wrap{
        padding:16px 12px 40px;
    }

    .car-visual-box{
        padding:18px 12px 18px;
        border-radius:0;
        background:#f3f3f3;
    }

    .car-title-panel{
        background:none;
        padding:0;
        margin:0 auto 12px;
    }

    .car-title-panel h3{
        font-size:26px;
    }

    .car-angle-tabs{
        position:static;
        flex-direction:row;
        justify-content:center;
        margin:8px 0 10px;
        gap:10px;
    }

    .car-angle-tabs button{
        width:auto;
        height:auto;
        background:none;
        border-radius:0;
        padding:0;
        font-size:18px;
        color:#222;
    }

    .car-angle-tabs button.is-active{
        color:#2453ff;
    }

    .car-main-image-box{
        aspect-ratio:auto;
        max-width:100%;
    }

    .car-thumb-area{
        grid-template-columns:1fr;
        gap:10px;
    }

    .car-thumb-area .nav{
        display:none;
    }

    .thumb-list{
        grid-template-columns:repeat(2, minmax(0,1fr));
        border-radius:18px;
        padding:12px;
        gap:10px;
    }

    .car-side-panel{
        border:none;
        border-radius:0;
        padding:0 0 12px;
        background:#fff;
    }

    .stock-btn{
        width:220px;
        margin:10px auto 16px;
        border-radius:8px;
    }

    .car-select-row.grid-2{
        grid-template-columns:1fr 1fr;
    }

    .month-result-grid{
        gap:10px;
    }

    .month-card .value strong{
        font-size:18px;
    }

    .detail-outline-btn,
    .consult-fill-btn{
        height:46px;
        font-size:16px;
    }

    .car-admin-grid.grid-5,
    .car-admin-grid.grid-3,
    .car-admin-grid.grid-2{
        grid-template-columns:1fr;
    }
}