@charset "UTF-8";
/* 상세 v2 - vehicle-info 섹션. 모든 선택자는 .dv2 하위로 한정. */
/* 마크업: v2/_vehicle-info.jsp (.mainInfo.dv2-vinfo) + v1 item/detail/{car,truck,bus,equip}-detail.jsp (ul.infoTbl, 수정 불가 -> CSS로만 처리) */

/* ---------- 카드 / 하위 섹션 틀 ---------- */
.dv2 .dv2-vinfo {
    margin: 0;
    font-size: 12px;
    color: var(#101010);
}

/* v1 .subLeft/.subRight는 테두리 있는 별도 박스; v2 카드 안에서는 단순히 쌓인 섹션으로 표시 */
.dv2 .dv2-vinfo .subLeft,
.dv2 .dv2-vinfo .subRight {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.dv2 .dv2-vinfo .subRight {
    margin-top: 28px;
}

/* v1: .mainInfo .subRight div+div{margin-top:40px} */
.dv2 .dv2-vinfo .subRight div + div {
    margin-top: 0;
}

.dv2 .dv2-vinfo .subRight .dv2-vinfo__sec + .dv2-vinfo__sec {
    margin-top: 28px;
}

.dv2 .dv2-vinfo .dv2-vinfo__tit {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0;
    color: #101010;
}

/* ---------- 차량 정보 (ul.infoTbl) ---------- */
.dv2 .dv2-vinfo .infoTbl {
    display: block;
}

.dv2 .dv2-vinfo .infoTbl:before,
.dv2 .dv2-vinfo .infoTbl:after {
    display: none;
}

/* .noOption (v1: 25%씩 4열) 과 일반 케이스 모두 좁은 컬럼에서 행당 key/value 하나로 표시 */
.dv2 .dv2-vinfo .infoTbl li,
.dv2 .dv2-vinfo .noOption .infoTbl li {
    width: auto;
    margin: 0;
    padding: 4px 0;
    border-top: 0;
    border-bottom: 1px solid var(--dv2-border);
}

.dv2 .dv2-vinfo .infoTbl dl,
.dv2 .dv2-vinfo .infoTbl .wide dl {
    display: flex;
    align-items: baseline;
    margin: 0;
}

.dv2 .dv2-vinfo .infoTbl dt {
    flex: 0 0 40%;
    margin: 0;
    padding-right: 8px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #303030;
}

.dv2 .dv2-vinfo .infoTbl dd {    
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: 0;
    color: #505050;
    word-break: break-word;
}

.dv2 .dv2-vinfo .infoTbl dd a {
    color: inherit;
}

/* Make/Model/Class: 조각(제조사 / 모델 링크 / 등급)을 한 문장처럼 이어서 줄바꿈 */
.dv2 .dv2-vinfo .infoTbl dd.dv2-vinfo__mmc {
    display: block;
    word-break: break-word;
}

.dv2 .dv2-vinfo .infoTbl dd.dv2-vinfo__mmc .iconNewWindow {
    display: inline-block;
    vertical-align: middle;
}

.dv2 .dv2-vinfo .infoTbl dd img.flag {
    height: 12px;
    margin: -2px 4px 0 0;
}

/* 툴팁 (Figma 2216:4286 / 2216:4292): 흰색 카드, 1px #303030 테두리, 8px radius, "!" 아이콘 아래 화살표 */
.dv2 .dv2-vinfo .infoTbl .popTip,
.dv2 .dv2-vinfo .infoTbl .odometer .popTip,
.dv2 .dv2-vinfo .infoTbl .firstRegisteredDate .popTip,
.dv2 .dv2-vinfo .infoTbl .vin .btnReCarved .popTip {
    top: 22px;
    right: auto;
    left: -140px;
    width: 268px;
}

.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #303030;
    border-radius: 8px;
    box-shadow: none;
    box-sizing: border-box;
    text-align: left;
    white-space: normal;
}

/* v1은 hover 시 .popTip을 display:block으로 표시; flex column 유지 */
.dv2 .dv2-vinfo .infoTbl .btnTip:hover .popTip.dv2-tip,
.dv2 .dv2-vinfo .infoTbl .btnTip:focus .popTip.dv2-tip,
.dv2 .dv2-vinfo .infoTbl .odometer.on .popTip.dv2-tip {
    display: flex;
}

/* 화살표: 테두리 삼각형 + 2px 아래 채움 삼각형으로 그 밑 카드 테두리를 가림 */
.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip::before,
.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip::after {
    content: "";
    position: absolute;
    left: 140px;
    width: 12.1244px;
    height: 9px;
    border: 0;
    transform: none;
    background: url("https://image.autowini.com/IMG/common/new/ic_tip_arrow_border.svg") no-repeat 0 0 / 100% 100%;
}

.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip::before {
    top: -9px;
}

.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip::after {
    top: -7px;
    background-image: url("https://image.autowini.com/IMG/common/new/ic_tip_arrow_fill.svg");
}

.dv2 .dv2-vinfo .infoTbl .dv2-tip__tit {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 13px;
    color: #101010;
}

.dv2 .dv2-vinfo .infoTbl .dv2-tip__desc {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #303030;
}

/* 설명 중 강조 문구 (예: 최초 등록일 "제작일이 아님") — 레거시 .popTip strong 의 block 표시를 되돌려 문장 안에 이어지게 함 */
.dv2 .dv2-vinfo .infoTbl .dv2-tip__desc strong {
    display: inline;
    font-weight: 700;
}

/* Item Comment 행 (관리자 / 본인 판매자만, v1 li.wide.comment) 을 별도 하위 섹션으로 표시 */
.dv2 .dv2-vinfo .infoTbl li.comment {
    margin-top: 28px;
    padding: 0;
    border-bottom: 0;
}

.dv2 .dv2-vinfo .infoTbl li.comment dl {
    display: block;
}

.dv2 .dv2-vinfo .infoTbl li.comment dt {
    margin-bottom: 12px;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    color: var(#101010);
}

.dv2 .dv2-vinfo .infoTbl li.comment dd {
    font-size: 12px;
    line-height: 1.6;
    color: #101010;
}

/* ---------- 주요 정보 (Featured Info) ---------- */
.dv2 .dv2-vinfo .featureInfo .tit2 i {
    width: 1rem;
    height: 1rem;
    margin: -2px 0 0 6px;
    font-size: 14px;
    color: #303030;
    border: 1.2px solid #303030;
    border-radius: 50%;
}

.dv2 .dv2-vinfo .featureInfo .special {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
}

.dv2 .dv2-vinfo .featureInfo .special li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 6px 0;
    background: none;
    border-radius: 0;
}

.dv2 .dv2-vinfo .featureInfo .special li span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #303030;
}

.dv2 .dv2-vinfo .featureInfo .special li b {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: normal;
    color: #505050;
}

.dv2 .dv2-vinfo .featureInfo .special li b.red {
    font-weight: bold;
    color: var(--dv2-red);
}

/* ---------- 옵션 ---------- */
.dv2 .dv2-vinfo .optionInfo li {
    padding: 0;
}

.dv2 .dv2-vinfo .optionInfo li + li {
    margin-top: 14px;
}

.dv2 .dv2-vinfo .optionInfo h3 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: normal;
    color: #101010;
}

.dv2 .dv2-vinfo .optionInfo .list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
}

.dv2 .dv2-vinfo .optionInfo li span {
    margin: 0;
    padding-left: 10px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.6;
    color: #101010;
}

.dv2 .dv2-vinfo .optionInfo li span:before {
    top: 8px;
    width: 3px;
    height: 3px;
    background: #101010;
}

/* ---------- 추가 정보 (Figma 2216:1700) ---------- */
.dv2 .dv2-addl__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dv2 .dv2-addl__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid #f4f7fa;
    border-radius: 8px;
    background: #f4f7fa;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #606060;
    text-decoration: none;
}

.dv2 .dv2-addl__ico {
    flex: 0 0 auto;
    display: block;
}

/* 보험 아이콘 그림은 32px 영역 안 24x26.18 (Figma 오프셋 4px / 2.91px) */
.dv2 .dv2-addl__ico--insurance {
    margin: 2.91px 4px;
}

.dv2 .dv2-addl__txt {
    flex: 1 1 0;
    min-width: 0;
}

/* 리포트 없음: 앱처럼 흐리게 (아이콘·글자 모두 옅게, 클릭 불가 표시) */
.dv2 .dv2-addl__btn:not(.is-active) {
    cursor: default;
}

.dv2 .dv2-addl__btn:not(.is-active) .dv2-addl__ico,
.dv2 .dv2-addl__btn:not(.is-active) .dv2-addl__txt {
    opacity: .4;
}

.dv2 .dv2-addl__btn.is-active {
    gap: 8px;
    border-color: #2473ff;
    color: #303030;
    cursor: pointer;
}

/* 이용 가능한 리포트 우상단 체크 배지 (Figma codex:check) */
.dv2 .dv2-addl__btn.is-active::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -6px;
    width: 16.2818px;
    height: 18px;
    background: url("https://image.autowini.com/IMG/common/new/ic_check_badge.svg") no-repeat 0 0 / 100% 100%;
}

/* ---------- Item Comment ---------- */
/* truck/bus/equip: 섹션이 .mainInfo 바로 아래 위치 (subRight 없음); subRight 안의 car와 같은 40px 섹션 간격 */
.dv2 .dv2-vinfo > .dv2-comment {
    margin-top: 40px;
}

.dv2 .dv2-comment__body {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
    word-break: break-word;
    color: #767b80;
}

/* ---------- Figma 2216:1700 세부 수치 (카드, 테이블, featured, option) ---------- */
.dv2 .dv2-vinfo.dv2-card {
    padding: 32px;
    border: 1px solid #d8dde1;
    border-radius: 12px;
}

.dv2 .dv2-vinfo .dv2-vinfo__tit {
    margin-bottom: 8px;
}

.dv2 .dv2-vinfo .subRight {
    margin-top: 40px;
}

.dv2 .dv2-vinfo .subRight .dv2-vinfo__sec + .dv2-vinfo__sec {
    margin-top: 40px;
}

.dv2 .dv2-addl .dv2-vinfo__tit {
    margin-bottom: 12px;
}

.dv2 .dv2-vinfo .optionInfo .dv2-vinfo__tit {
    margin-bottom: 16px;
}

/* 스펙 테이블: 라벨 컬럼 160px, 간격 8px, #f5f5f5 구분선, 마지막 행은 없음 */
.dv2 .dv2-vinfo .infoTbl li,
.dv2 .dv2-vinfo .noOption .infoTbl li {
    border-bottom-color: #f5f5f5;
}

.dv2 .dv2-vinfo .infoTbl li:last-child {
    border-bottom: 0;
}

.dv2 .dv2-vinfo .infoTbl dl,
.dv2 .dv2-vinfo .infoTbl .wide dl {
    gap: 8px;
}

.dv2 .dv2-vinfo .infoTbl dt {
    flex: 0 0 160px;
    padding-right: 0;
}

/* 정보 아이콘: 레거시 .infoTbl .btnTip 과 동일한 주황 "!" 원 */
.dv2 .dv2-vinfo .infoTbl .btnTip {
    display: inline-block;
    position: relative;
    margin-top: 0px;
    width: 14px;
    height: 14px;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    color: #DC8E19;
    text-align: center;
    border: 2px solid #DC8E19;
    border-radius: 50%;
    vertical-align: middle;
    cursor: help;
}

.dv2 .dv2-vinfo .infoTbl .btnTip .popTip {
    font-size: 12px;
}

/* 툴팁 화살표를 16px 아이콘 중앙에 맞춤 */
.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip::before,
.dv2 .dv2-vinfo .infoTbl .popTip.dv2-tip::after {
    left: 142px;
}

/* Featured Info: "?" = Figma ic_question 20px, 간격 8px */
.dv2 .dv2-vinfo .featureInfo .tit2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv2 .dv2-vinfo .featureInfo .tit2 i {
    width: 20px;
    height: 20px;
    margin: 0;
    font-size: 0;
    color: transparent;
    border: 0;
    border-radius: 0;
    background: url("https://image.autowini.com/IMG/common/new/ic_question_20.svg") no-repeat 0 0 / 20px 20px;
}

.dv2 .dv2-vinfo .featureInfo .special {
    column-gap: 0;
}

.dv2 .dv2-vinfo .featureInfo .special li {
    align-items: center;
    padding: 4px 16px 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

/* 마지막 행 (2열) 은 구분선 없음 */
.dv2 .dv2-vinfo .featureInfo .special li:nth-last-child(-n+2):nth-child(odd),
.dv2 .dv2-vinfo .featureInfo .special li:nth-last-child(-n+2):nth-child(odd) ~ li {
    border-bottom: 0;
}

.dv2 .dv2-vinfo .featureInfo .special li span {
    line-height: 1.5;
}

.dv2 .dv2-vinfo .featureInfo .special li b {
    font-size: 14px;
    line-height: 1.5;
}

/* Option: 그룹 라벨 14px #707578 (간격 8px), 항목 14px Medium #303030 + disc 불릿, 간격 6px */
.dv2 .dv2-vinfo .optionInfo li + li {
    margin-top: 16px;
}

.dv2 .dv2-vinfo .optionInfo h3 {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: normal;
    color: #707578;
}

.dv2 .dv2-vinfo .optionInfo .list {
    column-gap: 6px;
    row-gap: 6px;
    padding: 4px 0;
}

.dv2 .dv2-vinfo .optionInfo li span {
    position: relative;
    padding-left: 21px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #303030;
}

.dv2 .dv2-vinfo .optionInfo li span:before {
    top: 9px;
    left: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #303030;
}

/* Size 행: 값은 JSP에서 "L <em>x</em> W <em>x</em> H" 로 조립됨 (x가 포함되어 오지 않음). flex dd에서는
   x 주변 공백이 사라지므로 ("(L)x2,222"), 이 dd는 일반 인라인 텍스트로 렌더: "4,444 mm (L) x 2,222 mm (W) x …" */
.dv2 .dv2-vinfo .infoTbl li.size dd {
    display: block;
}

.dv2 .dv2-vinfo .infoTbl li.size dd em {
    display: inline;
    margin: 0;
    font-style: normal;
}

/* 재타각 배지: Regist.Car.ReCarved 문구가 번역된 언어(car_lang_mn/ru/az/es/pt/fr)는 문구가 길어 VIN 이 깨지므로
   배지를 VIN 아래 줄로. 번역 없는 언어는 "Re-carved" 그대로라 기존처럼 옆에 붙임.
   #wrap 에 언어 클래스(${PROPERTY_LANGUAGE})가 붙음 (tiles/layout.jsp) */
#wrap.mn .dv2 .dv2-vinfo .infoTbl .vin dd,
#wrap.ru .dv2 .dv2-vinfo .infoTbl .vin dd,
#wrap.az .dv2 .dv2-vinfo .infoTbl .vin dd,
#wrap.es .dv2 .dv2-vinfo .infoTbl .vin dd,
#wrap.pt .dv2 .dv2-vinfo .infoTbl .vin dd,
#wrap.fr .dv2 .dv2-vinfo .infoTbl .vin dd {
    flex-direction: column;
    align-items: flex-start;
}
#wrap.mn .dv2 .dv2-vinfo .infoTbl .vin .btnReCarved,
#wrap.ru .dv2 .dv2-vinfo .infoTbl .vin .btnReCarved,
#wrap.az .dv2 .dv2-vinfo .infoTbl .vin .btnReCarved,
#wrap.es .dv2 .dv2-vinfo .infoTbl .vin .btnReCarved,
#wrap.pt .dv2 .dv2-vinfo .infoTbl .vin .btnReCarved,
#wrap.fr .dv2 .dv2-vinfo .infoTbl .vin .btnReCarved {
    margin: 4px 0 0;
}