@charset "UTF-8";
/* detail v2 - middle-lower 섹션. 모든 선택자는 .dv2 하위로 한정. */
/* v2/_middle-lower.jsp: Vehicle Condition Report(+Guarantee), Inspection 배너, Luxury Line.
   v1 detail.css(.mainInfo .reportInfo / .conReport / .conGuarante / .bnInspection) 를 이 스코프 안에서 덮어씀. */

/* ---------- Vehicle Condition Report (VCR) ---------- */
.dv2 .mainInfo .reportInfo {
    margin: 0;
    background: #F4F7FA;
    border: 1px solid var(--dv2-border);
    border-radius: var(--dv2-radius);
    padding: 2rem;
    overflow: hidden;
}

.dv2 .conReport .tit2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--dv2-text);
}

.dv2 .conReport .btnInfo {
    flex: 0 0 auto;
    margin: 0;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    color: #0C0D0E;
    border: 1px solid #0C0D0E;
}

.dv2 .conReport .imgGrt {
    margin-bottom: 16px;
}

.dv2 .conReport .statusArea {
    padding: 1.5rem;
    background: #fff;
    border: 0;
    border-radius: var(--dv2-radius);
}

.dv2 .conReport .statusArea + div {
    margin-top: 12px;
}

.dv2 .conReport .statusArea strong {
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--dv2-text);
}

.dv2 .conReport .statusArea li {
    padding: 8px 0;
    border-top-color: var(--dv2-border);
}

.dv2 .conReport .statusArea dt {
    margin-bottom: 2px;
    font-size: 12px;
    color: var(--dv2-text-sub);
}

.dv2 .conReport .statusArea dd {
    font-size: 18px;
    font-weight: bold;
}

.dv2 .conReport .colBlk { color: #45484B; font-weight: 500;}
.dv2 .conReport .colRed { color: #D10023; font-weight: 500;}
.dv2 .conReport .colBlue { color: #2473FF; font-weight: 500;}
.dv2 .conReport .colGray { color: #D8DDE1; font-weight: 400;}

/* not available (FLAG_EXTERNAL_VEHICLE = Y): 흐린 제목 위에 중앙 메시지 */
.dv2 .mainInfo .reportInfo.dim {
    height: 120px;
    background: var(--dv2-bg-soft);
    border: 1px solid var(--dv2-border);
    box-sizing: border-box;
}

/* dimText 를 (긴) .conReport 가 아닌 카드 기준으로 중앙 정렬 */
.dv2 .mainInfo .reportInfo.dim .conReport {
    position: static;
}

.dv2 .mainInfo .reportInfo.dim:after {
    background: #D8DDE1;
    border-radius: var(--dv2-radius);
}

.dv2 .mainInfo .reportInfo.dim .tit2,
.dv2 .mainInfo .reportInfo.dim .statusArea {
    filter: blur(2px);
    opacity: 0.35;
}

.dv2 .mainInfo .reportInfo.dim .statusArea {
    background: transparent;
}

.dv2 .mainInfo .reportInfo.dim .dimText {
    width: 80%;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: #303030;
}

/* guarantee (V_FLAG_GUARANTEE = Y): v1 어두운 그라데이션 대신 카드 스타일 */
.dv2 .mainInfo .reportInfo.pay {
    background: #fff;
}

.dv2 .mainInfo .reportInfo.pay .tit2 {
    color: var(--dv2-text);
    font-weight: bold;
}

.dv2 .conReport + .conGuarante {
    margin-top: 16px;
}

.dv2 .conGuarante {
    padding: 0 16px;
    background: var(--dv2-bg-soft);
    border-radius: var(--dv2-radius);
}

.dv2 .conGuarante .txtBox {
    padding: 16px 0 16px 44px;
    background-size: 32px;
}

.dv2 .conGuarante .txtBox dt {
    font-size: 15px;
    font-weight: bold;
    color: var(--dv2-text);
}

.dv2 .conGuarante .txtBox dd {
    margin-top: 2px;
    font-size: 12px;
    color: var(--dv2-text-sub);
}

.dv2 .conGuarante .infoBox {
    padding: 12px 0;
    border-top: 1px solid var(--dv2-border);
}

.dv2 .conGuarante .infoBox h3 {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: bold;
    color: var(--dv2-text);
}

.dv2 .conGuarante .infoBox li {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dv2-text-sub);
}

/* ---------- Inspection / Logistics 프로모 배너 ---------- */
.dv2 .bnInspection,
.dv2 .dv2-bn-logistics {
    overflow: hidden;
    text-align: left;
    border: 1px solid #D8DDE1;
    border-radius: 12px;
}

/* 카드 너비가 소수점(예: 325.89px)이면 오른쪽 끝에 배경색(#26333f) 1px 띠가 보여 검은 보더처럼 보인다 → 이미지를 1px 더 오른쪽으로 */
.dv2 .dv2-bn-logistics {
    background: #26333f url(https://image.autowini.com/IMG/common/new/4cd93796c51f945d2a38f7abcfbfb7edfbb8133d.png) no-repeat calc(100% + 1px) 100% / auto 150%;
}

/* 좁은 컬럼에서도 문구가 읽히도록 단색 → 사진으로 이어지는 왼쪽 그라데이션 */
.dv2 .dv2-bn-logistics a {
    background: linear-gradient(90deg, #26333f 0%, #26333f 45%, rgba(38, 51, 63, 0) 80%);
}

/* Inspection: 사진(2:1, 왼쪽 흰색 페이드 포함)은 카드 폭 비례·오른쪽 아래 기준, 위쪽은 하늘색으로 이어 붙임.
   문구(p)는 사진 왼쪽 빈 영역(카드 폭의 약 48%, cqw = 카드 폭 기준) 안으로만 줄바꿈하고,
   다국어로 카드가 높아져 사진이 커져도 읽히도록 문구 쪽에 흰색 → 투명 그라데이션 */
.dv2 .bnInspection {
    position: relative;
    container-type: inline-size;
    background: #fff;
}

.dv2 .bnInspection::before {
    content: "";
    position: absolute;
    inset: 0;
    /* 사진은 카드 폭에 맞춰(높이 = 폭의 50%) 오른쪽 아래 고정 → 카드가 높아져도 확대하지 않는다.
       사진보다 높은 위쪽은 사진 맨 윗줄 하늘색(실측)과 같은 가로 그라데이션으로 이어 붙여 여백이 보이지 않게 */
    background:
        url(https://image.autowini.com/IMG/common/new/c6e79f145d67a1e8e7cb3243e9209df492113e95.png) no-repeat right bottom / 100% auto,
        linear-gradient(90deg, #fbfcfd 0%, #f5fafe 20%, #dbf0fc 40%, #cde9fd 50%, #c1e3fc 60%, #b5ddfc 70%, #afdafb 80%, #abdafb 100%);
}

.dv2 .bnInspection a {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, 0) 60%);
}

.dv2 .bnInspection:after {
    display: none;
}

.dv2 .bnInspection a,
.dv2 .dv2-bn-logistics a {
    display: block;
    box-sizing: border-box;
    padding: 24px;
}

.dv2 .bnInspection h3,
.dv2 .dv2-bn-logistics h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    text-transform: uppercase;
    color: #101010;
}

.dv2 .dv2-bn-logistics h3 {
    color: #fff;
}

.dv2 .dv2-bn-logistics__ico {
    flex: 0 0 auto;
    width: 24px;
    height: auto;
}

.dv2 .bnInspection p,
.dv2 .dv2-bn-logistics p {
    max-width: 56%;
    font-size: 16px;
    line-height: 1.5;
    color: #303030;
}

.dv2 .dv2-bn-logistics p {
    color: #e8ebefe0;
}

.dv2 .bnInspection .dv2-insp-btn,
.dv2 .dv2-bn-logistics .dv2-insp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 0 18px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #0d3a8c;
    border-radius: 999px;
}

.dv2 .dv2-bn-logistics .dv2-insp-btn {
    background: #f26522;
}

.dv2 .bnInspection .dv2-insp-btn:after,
.dv2 .dv2-bn-logistics .dv2-insp-btn:after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: rotate(45deg);
}

/* ---------- Figma 2216:1960 세부 수치 (VCR 카드) ---------- */
.dv2 .mainInfo .reportInfo {
    padding: 32px;
    border-color: #d8dde1;
    border-radius: 12px;
}

/* 디자인상 guarantee 항목도 다른 항목과 같은 연한 카드 유지 */
.dv2 .mainInfo .reportInfo.pay {
    background: #f4f7fa;
}

.dv2 .conReport .tit2 {
    gap: 10px;
    margin-bottom: 24px;
    line-height: 1.3;
    color: #0c0d0e;
}

.dv2 .conReport .btnInfo {
    width: 24px;
    height: 24px;
    font-size: 0;
    color: transparent;
    border: 0;
    border-radius: 0;
    background: url("https://image.autowini.com/IMG/common/new/ic_question_24.svg") no-repeat 0 0 / 24px 24px;
}

.dv2 .conReport .statusArea {
    padding: 24px;
    border-radius: 4px;
}

.dv2 .conReport .statusArea strong {
    margin-bottom: 1px;
    font-size: 17px;
    line-height: normal;
    color: #0c0d0e;
}

/* 행: #f5f5f5 계열 구분선 위아래 12px */
.dv2 .conReport .statusArea li {
    padding: 12px 0;
    border-top-color: #e4eaef;
}

.dv2 .conReport .statusArea li:last-child,
.dv2 .conReport .statusArea li:nth-last-child(2):not(.wide) {
    padding-bottom: 0;
}

.dv2 .conReport .statusArea dt {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: normal;
    color: #92979b;
}

.dv2 .conReport .statusArea dd {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

/* 하단 guarantee 줄 (영어, V_FLAG_GUARANTEE = Y): 배지 47x32 + 16px 텍스트, 가운데 정렬, 박스 아래 24px */
.dv2 .dv2-vcr-grt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.dv2 .dv2-vcr-grt img {
    flex: 0 0 auto;
    width: 47px;
    height: 32px;
    object-fit: cover;
}

.dv2 .dv2-vcr-grt p {
    margin: 0;
    font-size: 16px;
    line-height: normal;
    color: #303030;
}