@charset "UTF-8";
/* 상세 v2 - price-box 섹션. 모든 선택자는 .dv2 하위로 한정. */
/*
 * 마크업: item/detail/v2/_price-box.jsp (v1 .conCarInfo > .infoArea 그대로 이동, .infoArea에 .dv2-card 추가).
 * 기존 v1 클래스만 리스타일: JS (cm_detail_bis_function.js, car-detail.jsp) 가 런타임에
 * .yourPrice / .priceWrap / em.bf / .country / .no-service 를 주입하므로 이것들도 스타일링.
 * .btnPort 변형 (green / disabled / booking completed / sign in·up) 배경색은 v1 detail.css 유지.
 */

/* ---------- 카드 ---------- */
.dv2 .conCarInfo .infoArea.dv2-card {
    float: none;
    margin-left: 0;
    width: auto;
    min-height: 0;
    padding: var(--dv2-card-pad);
    border: 1px solid var(--dv2-border);
    border-radius: var(--dv2-radius);
    box-sizing: border-box;
}

/* ---------- 제목 / 스펙 요약 / 배지 ---------- */
.dv2 .conCarInfo .infoArea h1 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: #0C0D0E;
    word-break: break-word;
}

.dv2 .conCarInfo .infoArea .add {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.6;
    color: #707578;
}

.dv2 .conCarInfo .infoArea .add li {
    float: none;
    display: inline-block;
    font-size: 16px;
    line-height: 1.6;
    color: #707578;
}

/* 구분자: v1 원형 점(detail.css .infoArea .add li+li:before)을 끄고, 다음 li가 있는 li 뒤(::after)에 찍는다.
   줄바꿈 시 점이 줄 맨 앞에 오지 않고 앞 항목 끝에 붙는다 */
.dv2 .conCarInfo .infoArea .add li + li:before {
    content: none;
}

.dv2 .conCarInfo .infoArea .add li:not(:last-child):after {
    display: inline-block;
    content: '';
    margin: -2px 8px 0;
    width: 3px;
    height: 3px;
    background: #c1c6c9;
    border-radius: 8px;
    vertical-align: middle;
}

.dv2 .conCarInfo .infoArea .badgeArea {
    margin: 0 -2px;
}

.dv2 .conCarInfo .infoArea .badgeArea > div {
    margin: 2px;
}

/* 배지 svg (mk_fast / mk_vin / mk_fresh ...) 는 이미 5% 틴트 위 ~10px 대문자 텍스트 + 아이콘으로 색이 입혀짐 (박스 없음):
   텍스트가 ~10px로 유지되도록 원본 높이 20px 유지 */
.dv2 .conCarInfo .infoArea .badgeArea > div > img {
    display: block;
    width: auto;
    height: 20px;
}

.dv2 .conCarInfo .infoArea .badgeArea .popTip {
    width: 220px;
}

/* ---------- 상품 가격 ---------- */
.dv2 .conCarInfo .infoArea .price {
    margin: 16px 0 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dv2-border);
    text-align: right;
}

.dv2 .conCarInfo .infoArea .specialDiscountPrice {
    margin-bottom: 0;
}

.dv2 .conCarInfo .infoArea .specialDiscountPrice .priceWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 특별 할인 원가 (Figma 2216:2061): Roboto Italic 20px #0c0d0e, 취소선, 우측 정렬, 배경 없음 */
/* Figma 2216:2061 타이포 + develop의 특별 할인 핑크 하이라이트 (#FFF3F3) 를 텍스트에 딱 맞게; display:table로 단독 우측 정렬 줄 유지 */
.dv2 .conCarInfo .infoArea .price .originalPrice {
    display: table;
    margin: 0 0 0 auto;
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    line-height: normal;
    text-align: right;
    color: #0C0D0E;
    /* 여기엔 text-decoration 없음: 선은 아래 <exchanged-price> 호스트에 한 번만 그림.
       둘 다 두면 폰트 메트릭에 따라 높이가 달라 취소선이 두 줄로 보였음 (dev 서버에서 확인) */
    text-decoration: none;
    background-color: #FFF3F3;
}

/* develop/dev re_common.css는 .wrapDetail .specialDiscountPrice .priceWrap .originalPrice::after 로 자체 취소선을 그림
   (top 45%, #707578) — 이 브랜치 re_common.css엔 없어 dev 서버에서만 두 번째 선으로 보였음. v2에선 끔. */
.dv2 .conCarInfo .infoArea .price .originalPrice::after {
    content: none;
}

/* 가격은 <exchanged-price> (shadow DOM 블록: margin 있는 "USD" span + 숫자): text-decoration이 그 위로
   이어지지 않으므로 취소선을 호스트에 그림 (parts.css의 .dv2-parts__origin과 같은 패턴) */
.dv2 .conCarInfo .infoArea .price .originalPrice exchanged-price,
.dv2 .conCarInfo .priceDetail02 dd em exchanged-price {
    display: inline-block;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 100% 1px;
}

.dv2 .conCarInfo .infoArea .price .discountPrice {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.5px;
    color: #C10007;
}

/* 할인 없음 단일 행 (#itemBisPrice) — Figma 2216:3026: Roboto Bold 28px #0c0d0e (할인가와 같은 크기) */
.dv2 .conCarInfo .infoArea .price .total {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    color: var(--dv2-text);
}

/* renderYourPrice() 가 주입: <div class="yourPrice"><span>Your Price:</span> <exchanged-price></div> */
.dv2 .conCarInfo .itemPrice .yourPrice {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--dv2-text);
}

.dv2 .conCarInfo .itemPrice .yourPrice exchanged-price {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dv2-text);
}

.dv2 .conCarInfo .itemPrice .fob {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-style: normal;
    color: #707578;
}

/* ---------- 상품 코멘트 안내 / 클리어런스 세일 ---------- */
.dv2 .conCarInfo .commentArea {
    padding-top: 16px;
}

.dv2 .conCarInfo .commentArea > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: var(--dv2-red);
    border: 1px solid var(--dv2-red);
    border-radius: 4px;
}

.dv2 .conCarInfo .commentArea > a span {
    flex: none;
    font-size: 8px;
    line-height: 1;
}

.dv2 .conCarInfo .commentArea .commentAreaView {
    top: 100%;
    padding: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dv2-text);
    border-color: var(--dv2-border);
    border-radius: 4px;
}

.dv2 .conCarInfo .clearanceSaleComment {
    margin-top: 16px;
}

.dv2 .conCarInfo .clearanceSaleComment p {
    font-size: 14px;
}

/* ---------- 목적지 선택 ---------- */
.dv2 .conCarInfo .port {
    margin-top: 16px;
}

/* Figma 2222:2353 — 국가 / 항구 / 배송을 테두리 하나의 그룹으로: 행 43px, 1px #d8dde1 구분선, 15px Roboto Medium #45484b */
.dv2 .conCarInfo .port .selector {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #d8dde1;
    border-radius: 4px;
    background: #fff;
}

.dv2 .conCarInfo .port .selector > li + li {
    border-top: 1px solid #d8dde1;
}

.dv2 .conCarInfo .port .selector select,
.dv2 .conCarInfo .portDts .listSelec select {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 33px 0 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    color: #45484b;
    background-color: transparent;
    background-position: right 12px center;
    background-size: 9px 5px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
}

/* .portDts (다른 팝업) 는 자체 독립 박스 유지 */
.dv2 .conCarInfo .portDts .listSelec select {
    border: 1px solid #d8dde1;
    border-radius: 4px;
}

.dv2 .conCarInfo .port .selector select.alert,
.dv2 .conCarInfo .portDts .listSelec select.alert {
    color: var(--dv2-red);
    box-shadow: inset 0 0 0 1px var(--dv2-red);
}

/* 국가 (커스텀 국기 드롭다운: .flagSelectWrap > .flagTop > a / .flagBottom > .searchBox + ul#bisCountry) */
.dv2 .conCarInfo .flagSelectWrap .flagTop {
    height: 42px;
    background-color: transparent;
    background-position: right 12px center;
    background-size: 9px 5px;
    border: 0;
    border-radius: 4px 4px 0 0;
}

.dv2 .conCarInfo .flagSelectWrap.on .flagTop {
    box-shadow: inset 0 0 0 1px #707578;
}

.dv2 .conCarInfo .flagSelectWrap .flagTop a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 33px 0 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    color: #45484b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv2 .conCarInfo .flagSelectWrap .flagTop a img {
    flex: 0 0 28px;
    width: 28px;
    height: 20px;
    margin: 0;
    object-fit: cover;
}

.dv2 .conCarInfo .flagSelectWrap .flagTop a span {
    font-weight: 500;
    color: #45484b;
}

.dv2 .conCarInfo .flagSelectWrap .flagBottom {
    top: 42px;
}

.dv2 .conCarInfo .flagSelectWrap .flagBottom a {
    font-size: 12px;
}

/* v1은 카드를 지나 스크롤되면 (.port.on) 국기 선택을 250px로 줄임; 좁은 컬럼 안에 유지 */
.dv2 .conCarInfo .port.on .flagSelectWrap {
    width: auto;
}

.dv2 .conCarInfo .port .formAlert {
    padding: 4px 0 0;
    font-size: 11px;
}

/* "What's Consolidation?" (fnSelectSize가 인라인 display 토글) */
.dv2 .conCarInfo .port .btnConsol {
    display: block;
    padding: 8px 0 0;
    font-size: 11px;
    font-weight: 400;
    text-align: right;
    color: var(--dv2-text-mute);
    text-decoration: underline;
}

.dv2 .conCarInfo .port .btnConsol span {
    width: 11px;
    height: 11px;
    margin: -2px 4px 0 0;
    font-size: 9px;
    font-weight: 400;
    line-height: 11px;
    color: var(--dv2-text-mute);
    border-color: var(--dv2-text-mute);
}

/* ---------- 멤버십 / 이벤트 할인 행 ---------- */
.dv2 .conCarInfo .checkQuo {
    padding: 0;
    border-bottom: 0;
}

.dv2 .conCarInfo .priceDetail01 {
    margin-top: 16px;
}

.dv2 .conCarInfo .priceDetail01 + .priceDetail01 {
    margin-top: 8px;
}

.dv2 .conCarInfo .priceDetail01 dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.dv2 .conCarInfo .priceDetail01 dt {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #303030;
}

.dv2 .conCarInfo .priceDetail01 dd {
    flex: none;
    font-size: 1rem;
    text-align: right;
    color: #0C0D0E;
}

/* 등급 색상 (memberGold / memberSilver ...) 은 re_common.css에서 가져옴 */
.dv2 .conCarInfo .priceDetail01 .membershipBadge {
    flex: none;
    margin: 0;
    padding: 0 4px;
    font-size: 10px;
    line-height: 14px;
    border-radius: 3px;
}

.dv2 .conCarInfo .priceDetail01 .memText {
    padding: 0 0 8px 0;
    font-size: 11px;
    color: var(--dv2-text-mute);
}

/* ---------- 합계 박스 (Figma 2216:2099) ---------- */
.dv2 .conCarInfo .priceDetail02 {
    margin-top: 12px;
    padding: 16px;
    background: #F4F7FA;
    border-radius: 6px;
}

.dv2 .conCarInfo .priceDetail02 dl {
    display: block;
    padding: 0;
}

.dv2 .conCarInfo .priceDetail02 dt {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: #0C0D0E;
}

/* .totalChargeClass (cm_detail_bis_function.js가 채움): [em.bf (취소선)] + exchanged-price + div.country, 또는 span.no-service.
   우측 정렬 컬럼, 간격 4 */
.dv2 .conCarInfo .priceDetail02 dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.28px;
    text-align: right;
    color: #C10007;
}

.dv2 .conCarInfo .priceDetail02 dd em {
    display: block;
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.22px;
    color: #505050;
    /* 취소선 중복 방지를 위해 <exchanged-price> 호스트에만 그림 (originalPrice 참고) */
    text-decoration: none;
}

.dv2 .conCarInfo .priceDetail02 dd .country {
    margin-top: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    color: #45484B;
}

/* 각주 (.show 클래스 / 인라인 style로 display 토글) */
.dv2 .conCarInfo .priceDetail02 .consolidationAndContainerWarning,
.dv2 .conCarInfo .priceDetail02 .calderaPortWarning {
    margin-top: 12px;
    line-height: 1.5;
}

/* Caldera 안내도 배송비 각주와 같은 스타일 (이전: 10px 회색 인라인이라 줄간격·크기가 달랐음) */
.dv2 .conCarInfo .priceDetail02 .consolidationAndContainerWarning span,
.dv2 .conCarInfo .priceDetail02 .calderaPortWarning span {
    display: block;
    margin-top: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #707070;
}

.dv2 .conCarInfo .checkQuo04,
.dv2 .conCarInfo .checkQuo05 {
    padding-top: 8px;
    font-size: 11px;
    color: var(--dv2-text-mute);
}

/* 표시할 문구가 없으면 빈 영역(패딩) 미노출. JS(fnBisResultV2)가 인라인 display:block 을 주므로 !important */
.dv2 .conCarInfo .checkQuo04:not(:has(> div:not(:empty))),
.dv2 .conCarInfo .checkQuo05:empty {
    display: none !important;
}

.dv2 .conCarInfo .port .txtFee {
    margin-top: 12px;
    padding-bottom: 12px;
    font-size: 11px;
    line-height: 1.5;
    color: #707578;
    border-bottom-color: var(--dv2-border);
}

/* ---------- 버튼 ---------- */
/* 액션 버튼 행: 51px 버튼, 간격 8px (버튼 스타일은 아래 "action buttons") */
.dv2 .conCarInfo .port .bottom {
    display: flex;
    gap: 8px;
    padding-top: 16px;
}

.dv2 .conCarInfo .bottom a {
    min-width: 0;
}

.dv2 .conCarInfo .bottom a + a {
    margin-left: 0;
}

.dv2 .conCarInfo .btnPort {
    height: 50px;
    padding: 0 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 4px;
    box-sizing: border-box;
}

.dv2 .conCarInfo .btnSelfBooking {
    background-color: var(--dv2-navy);
}

.dv2 .conCarInfo .port .boxSign {
    padding: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dv2-text);
    border-top: 0;
}

.dv2 .conCarInfo .port .boxSignBtn {
    gap: 6px;
}

/* ---------- 장비: Want to Buy (.portDts) ---------- */
.dv2 .conCarInfo .portDts {
    margin-top: 16px;
}

.dv2 .conCarInfo .portDts .titport {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dv2-text);
}

.dv2 .conCarInfo .portDts .box {
    padding: 16px;
    border: 1px solid var(--dv2-border);
    border-radius: 6px;
}

.dv2 .conCarInfo .portDts .box h3 {
    font-size: 13px;
    color: var(--dv2-text);
}

.dv2 .conCarInfo .portDts .box .txtEmail {
    margin: 8px 0 12px;
    font-size: 11px;
    color: #707578;
}

.dv2 .conCarInfo .portDts .listSelec {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dv2 .conCarInfo .portDts .listSelec li,
.dv2 .conCarInfo .portDts .listSelec li:nth-child(2) {
    float: none;
    width: auto;
}

.dv2 .conCarInfo .portDts textarea {
    margin: 12px 0;
    padding: 10px;
    min-height: 80px;
    font-size: 12px;
    border-color: var(--dv2-border);
    border-radius: 4px;
    box-sizing: border-box;
}

.dv2 .conCarInfo .portDts .bottom {
    padding-top: 0;
}

/* ---------- 가격 API 대기 중 스켈레톤 (car-detail.jsp의 wrapWithSkeleton() 이 .is-loading 토글) ---------- */
.dv2 .conCarInfo .infoArea .price.is-loading,
.dv2 .conCarInfo .totalChargeClass.is-loading {
    position: relative;
}

.dv2 .conCarInfo .infoArea .price.is-loading {
    min-height: 56px;
}

.dv2 .conCarInfo .totalChargeClass.is-loading {
    min-height: 32px;
}

.dv2 .conCarInfo .infoArea .price.is-loading > *,
.dv2 .conCarInfo .totalChargeClass.is-loading > * {
    visibility: hidden;
}

.dv2 .conCarInfo .infoArea .price.is-loading::after,
.dv2 .conCarInfo .totalChargeClass.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef1f4 25%, #f7f9fa 50%, #eef1f4 75%) 0 0 / 200% 100%;
    animation: dv2PriceBoxShimmer 1.2s linear infinite;
}

.dv2 .conCarInfo .infoArea .price.is-loading::after {
    height: 40px;
}

.dv2 .conCarInfo .totalChargeClass.is-loading::after {
    height: 28px;
}

@keyframes dv2PriceBoxShimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ---------- Figma 2216:2048 세부 수치 (가격 박스 카드) ---------- */
.dv2 .conCarInfo .infoArea.dv2-card {
    padding: 24px 32px 32px;
    border-color: #d8dde1;
    border-radius: 12px;
}

/* 제목 블록: 제목 / 스펙 줄 / 배지 사이 간격 10px */
.dv2 .conCarInfo .infoArea h1 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.3;
}

.dv2 .conCarInfo .infoArea .add {
    margin: 0 0 10px;
    line-height: 1.5;
}

.dv2 .conCarInfo .infoArea .add li {
    line-height: 1.5;
    color: #606060;
}

.dv2 .conCarInfo .infoArea .add li:not(:last-child):after {
    width: 4px;
    height: 4px;
    background: #d8dde1;
}

.dv2 .conCarInfo .infoArea .badgeArea > div > img {
    height: 21px;
}

/* 가격 블록: 제목 블록 아래 24px, 구분선 없음; 그룹 간격 4px, FOB 줄 앞 8px */
.dv2 .conCarInfo .infoArea .price {
    margin-top: 24px;
    padding-bottom: 0;
    border-bottom: 0;
}

.dv2 .conCarInfo .itemPrice .yourPrice {
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    line-height: normal;
    color: #303030;
}

.dv2 .conCarInfo .itemPrice .yourPrice exchanged-price {
    font-size: 22px;
    line-height: normal;
    color: #0c0d0e;
}

.dv2 .conCarInfo .itemPrice .fob {
    margin-top: 8px;
    color: #505050;
}

/* 목적지 선택: 섹션 간격 24px */
.dv2 .conCarInfo .port {
    margin-top: 24px;
}

/* "What's Consolidation?": 16px ic_question + 14px Medium #909090 밑줄, 선택 영역 아래 12px */
.dv2 .conCarInfo .port .btnConsol {
    padding: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #909090;
    text-underline-position: from-font;
}

.dv2 .conCarInfo .port .btnConsol span {
    width: 16px;
    height: 16px;
    margin: -2px 4px 0 0;
    vertical-align: middle;
    font-size: 0;
    color: transparent;
    border: 0;
    border-radius: 0;
    background: url("https://image.autowini.com/IMG/common/new/ic_question_16.svg") no-repeat 0 0 / 16px 16px;
}

/* fnSelectSize() 가 Consolidation (C080) 에 인라인 display:block을 줄 때까지 숨김 — v1 CSS는 기본 노출이라
   새로고침마다 JS 실행 전 (구 v1 모양으로) 깜빡였음 */
.dv2 .conCarInfo .port .btnConsol {
    display: none;
}

/* 멤버십 할인 행: padding 8px 0, 배지 높이 22px / 14px, 라벨 16px Medium, 금액 20px Bold */
.dv2 .conCarInfo .priceDetail {
    margin-top: 24px;
}

.dv2 .conCarInfo .priceDetail01 dl {
    align-items: center;
    padding: 4px 0;
}

.dv2 .conCarInfo .priceDetail01 dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #303030;
}

.dv2 .conCarInfo .priceDetail01 .membershipBadge {
    height: 22px;
    padding: 0 4px;
    font-size: 14px;
    line-height: 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
}

.dv2 .conCarInfo .priceDetail01 dd {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.4px;
    color: #0c0d0e;
}

/* 합계 박스는 할인 행 바로 아래, 각진 모서리 */
.dv2 .conCarInfo .priceDetail02 {
    margin-top: 0;
    border-radius: 0;
}

.dv2 .conCarInfo .priceDetail + .priceDetail02 {
    margin-top: 0;
}

/* 액션 버튼: 51px, 간격 8px, 16px Bold, 네이비 "Buy Now" */
.dv2 .conCarInfo .port .bottom .btnPort {
    flex: 1 1 0;
    height: 51px;
    margin: 0;
    font-size: 16px;
    border-radius: 5px;
}

.dv2 .conCarInfo .btnSelfBooking {
    background-color: #112944;
}