@charset "UTF-8";
/*
 * 상품 상세 v2 (디자인 리뉴얼) - item/detail/v2/car-detail.jsp 에서만 사용
 * v1 detail.css 다음에 로드. 모든 선택자는 .dv2 하위로 한정 (토큰도 :root 아닌 .dv2).
 */

/* ---------- 토큰 ---------- */
.dv2 {
    --dv2-green: #00ab68;
    --dv2-red: #d10023;
    --dv2-navy: #1d2a4d;
    --dv2-blue: #1a6dd6;
    --dv2-text: #222;
    --dv2-text-sub: #666;
    --dv2-text-mute: #999;
    --dv2-border: #e5e5e5;
    --dv2-bg-soft: #f5f6f8;
    --dv2-radius: 8px;
    --dv2-gap: 24px;
    --dv2-card-pad: 24px;
}

/* ---------- 레이아웃 ---------- */
/* v2는 전체 폭 + 패딩 20px 40px. .dv2가 v1 .wrapDetail .inner (max-width:1240px) 안에 있으므로,
   .dv2를 담은 경우에만 해당 래퍼 제한을 해제 (v1 페이지는 영향 없음). */
.wrapDetail .inner {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

/* 보험이력 팝업(.popInsHistory)도 .wrapDetail 안이라 위 flex가 걸려 내부 .inner 레이아웃이 깨짐 → 이 팝업만 해제 */
.wrapDetail .popInsHistory .inner {
    display: block;
}

.wrapDetail .inner:has(> .content > .dv2) {
    max-width: none;
    margin: 0;
}

/* 페이지 최소폭 = 컬럼 최소폭 (600 + 380 + 390) + 간격 2개 (48) + 좌우 패딩 (80). 그리드가 헤더/푸터
   배경과 우측 여백 밖으로 넘치지 않고 함께 가로 스크롤되도록 함 */
body:has(.dv2) {
    min-width: 1498px;
}

/* 디자인 요청: 초광폭 화면에서 섹션이 과하게 늘어나 공백이 생기지 않도록 내부 영역 최대 1920px (패딩 포함),
   그 이상은 가운데 정렬. 1920 이하 화면은 기존과 동일 */
.dv2 {
    box-sizing: border-box;
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 40px;
    color: var(--dv2-text);
}

.dv2 .dv2-grid {
    display: grid;
    /* 컬럼 최소폭은 리사이즈로 실측: 이보다 좁으면 부품 프로모 제목 (좌), Item No./Location 값 (중),
       전화 + 메신저 옆 80px 담당자 아바타 (우, 390) 가 깨짐. 더 좁은 창은 가로 스크롤. */
    grid-template-columns: minmax(600px, 7fr) minmax(380px, 3.5fr) minmax(390px, 3fr);
    gap: var(--dv2-gap);
    align-items: start;
    margin-bottom: 3rem;
}

.dv2 .dv2-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

/* ---------- 유틸리티 ---------- */
.dv2 .dv2-card {
    background: #fff;
    border: 1px solid var(--dv2-border);
    border-radius: 12px;
    padding: 1.5rem;
}

/* ---------- 임시: 옮겨온 마크업이 컬럼에 맞도록 v1 고정 폭/float 무력화 ----------
   크기/배치만 (색상/타이포 없음). 각 partial 리스타일 시 섹션별로 제거. */
.dv2 .conCarInfo,
.dv2 .mainInfo {
    margin: 0;
}

.dv2 .conCarInfo .infoArea {
    float: none;
    margin-left: 0;
    width: auto;
    min-height: 0;
}

.dv2 .detailImg .thumbWrap,
.dv2 .mainInfo .subLeft,
.dv2 .mainInfo .subRight,
.dv2 .localInfo .left,
.dv2 .localInfo .right,
.dv2 .boxFaq,
.dv2 .conService .right {
    width: auto;
    margin-left: 0;
}

.dv2 .conPurchase dt,
.dv2 .conPurchase dd {
    float: none;
    width: auto;
}

/* ---------- 그리드 아래 (.dv2 밖): v1 블록을 v2 그리드에 정렬 ----------
   .wrapDetail:has(.dv2)로 한정해 v1 페이지는 영향 없음. 여기선 토큰 사용 불가 (리터럴 값). */
.wrapDetail:has(.dv2) > .inner:not(:has(.dv2)) {
    margin-left: 0;
    margin-right: 0;
    padding: 0 40px;
    box-sizing: border-box;
}

/* ---------- 와이드 푸터 (Figma 2222:2457) ----------
   상세 페이지만 전체 폭 레이아웃 (.dv2-grid가 40px 여백으로 뷰포트 전체를 채움) 이라, 이 페이지에선
   푸터의 1280px 제한을 풀고 같은 40px 여백을 사용. detail-v2.css는 v2 상세 페이지에서만 로드되므로
   다른 페이지엔 영향 없음. #footer로 footer.css (미디어 쿼리 포함) 보다 우선 적용. */
/* footer.css (이 파일 다음에 로드) 도 #footer.footerRedesign을 지정하므로, 요소 하나를 더해 이쪽이 우선하게 함 */
body #footer.footerRedesign {
    background: #0a1624;
}

/* 본문(.dv2)과 같이 내용 최대 1920px (패딩 포함) 가운데 정렬, 배경은 전체 폭 유지 */
#footer.footerRedesign .footerInner {
    box-sizing: border-box;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px 48px;
}

/* 로고 좌측, 1080px 메뉴 블록 우측, 위아래 48px */
#footer.footerRedesign .footerMain {
    grid-template-columns: auto minmax(0, 1080px);
    justify-content: space-between;
    align-items: start;
    padding: 48px 0;
}

#footer.footerRedesign .footerBottom {
    margin-top: 10px;
}

@media (max-width: 1000px) {
    #footer.footerRedesign .footerMain {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
}

/* ---------- 맨 위로 버튼 (.mainTopBtn, tiles/footer.jsp) ----------
   메인과 같은 버튼을 상세에도 노출. 노출/위치/테두리는 footer.jsp 인라인 스타일, 아이콘(GNB 스프라이트)·hover는 re_main.css에만 있어 여기 복사 */
@keyframes aniMainTopBtn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mainTopBtn.main a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
}

.mainTopBtn.main:before {
    content: '';
    position: absolute;
    top: 13px;
    left: 16px;
    display: inline-block;
    width: 26px;
    height: 32px;
    cursor: pointer;
    background: url(https://image.autowini.com/IMG/renew/deco/GNB.webp) no-repeat -557px -44px / 757px 352px;
}

.mainTopBtn.on.main:hover {
    background-color: #00AB68;
}

.mainTopBtn.on.main:hover:before {
    background-position: -595px -44px;
}