@charset "UTF-8";
/* detail v2 - left-lower 섹션 (v2/_left-lower.jsp). 모든 선택자는 .dv2 하위로 한정. */

/* ---------- 공통: 카드 제목 (v1 .wrapDetail .tit2 24px 덮어씀) ---------- */
.dv2 .dv2-ll-price .tit2,
.dv2 .dv2-ll-ship .tit2 {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0;
    color: #101010;
}

/* ---------- Local Market Stock ---------- */
.dv2 .domesticInfo.dv2-ll-local {
    margin: 0;
    padding: var(--dv2-card-pad);
    background: #E4EAEF;
    border: 0;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
    color: #303030;
}

.dv2 .dv2-ll-local .tit2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0;
    color: #101010;
}

.dv2 .dv2-ll-local dd {
    font-size: 12px;
    line-height: 1.6;
    color: #303030;
}

.dv2 .dv2-ll-local dd p {
    margin: 0;
    font-size: 14px;
    color: #505050;
}

.dv2 .dv2-ll-local .dv2-ll-local__sub {
    margin: 16px 0 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #303030;
}

.dv2 .dv2-ll-local dd + dd {
    margin-top: 16px;
}

.dv2 .dv2-ll-local dd a {
    display: inline;
    font-size: 14px;
    color: var(--dv2-blue);
    text-decoration: underline;
}

/* ---------- Price Guide ---------- */
.dv2 .priceGuide.dv2-ll-price {
    float: none;
    width: auto;
    margin: 0;
    padding: 2rem;
}

.dv2 .dv2-ll-price .tit2 span {
    display: inline-block;
    margin: 0 0 0 2px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #0345C9 -32%, #4BC0FF 121%);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    vertical-align: 2px;
    border-radius: 20px;
}

.dv2 .dv2-ll-price > strong {
    display: block;
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: normal;
    color: #303030;
}

.dv2 .dv2-ll-price .rangeArea {
    padding-top: 7rem; /* 라인 위 말풍선 공간 */
    text-align: center;
}

/* v1 고정 670px 배경 이미지 대신 가변 라인 */
.dv2 .dv2-ll-price .range {
    position: relative;
    width: auto;
    height: 2px;
    margin: 0 48px;
    background: var(--dv2-border);
}

/* 말풍선: "This vehicle" + 가격 (가격은 JS가 <b> 안에 붙임) */
/* 말풍선 + 마커: v1 detail.css(.priceGuide .point / .check)와 동일. 2px 빨간 박스, 링 아이콘에서 박스까지 빨간 세로선 */
.dv2 .dv2-ll-price .point {
    bottom: 27px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dv2-red);
    background: #fff;
    border: 2px solid var(--dv2-red);
    border-radius: 10px;
}

.dv2 .dv2-ll-price .point b {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #101010;
}

/* JS가 지정하는 양끝 케이스(<=20% / >=90%): 박스를 카드 안에 유지 (세로선은 .check에 그대로).
   박스 모서리(radius 10px)에 세로선이 닿으면 꼬리가 떨어져 보이므로, 박스를 바깥쪽으로 20px 밀어
   세로선이 박스 아래 테두리의 직선 구간에 닿게 함 (.range 좌우 여백 48px 안이라 카드 밖으로 안 나감) */
.dv2 .dv2-ll-price .point.leftChk {
    transform: translateX(-20px);
}

.dv2 .dv2-ll-price .point.rightChk {
    left: 100% !important;
    transform: translateX(calc(-100% + 20px));
}

/* 라인 위 링 마커 (left %는 JS가 지정) */
.dv2 .dv2-ll-price .check {
    bottom: -9px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    background: url(https://image.autowini.com/resources/IMG/renew/detail/ic_pricePoint.svg) center no-repeat;
    background-size: cover;
    z-index: 1;
}

.dv2 .dv2-ll-price .check::before {
    display: block;
    bottom: 20px;
    height: 18px;
}

/* 가격 지점 5개(min, mid1~3, max)를 라인의 0/25/50/75/100%에 배치, 각각 | 눈금 + 가운데 정렬 라벨 */
.dv2 .dv2-ll-price .min,
.dv2 .dv2-ll-price .mid1,
.dv2 .dv2-ll-price .mid2,
.dv2 .dv2-ll-price .mid3,
.dv2 .dv2-ll-price .max {
    display: block;
    position: absolute;
    top: -6px;
    bottom: auto;
    right: auto;
    width: auto;
    padding-top: 22px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    color: #101010;
    transform: translateX(-50%);
}

.dv2 .dv2-ll-price .min {
    left: 0;
}

.dv2 .dv2-ll-price .mid1 {
    left: 25%;
}

.dv2 .dv2-ll-price .mid2 {
    left: 50%;
}

.dv2 .dv2-ll-price .mid3 {
    left: 75%;
}

.dv2 .dv2-ll-price .max {
    left: 100%;
}

/* | 눈금 */
.dv2 .dv2-ll-price .min::before,
.dv2 .dv2-ll-price .mid1::before,
.dv2 .dv2-ll-price .mid2::before,
.dv2 .dv2-ll-price .mid3::before,
.dv2 .dv2-ll-price .max::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    background: var(--dv2-border);
}

.dv2 .dv2-ll-price .min b,
.dv2 .dv2-ll-price .mid1 b,
.dv2 .dv2-ll-price .mid2 b,
.dv2 .dv2-ll-price .mid3 b,
.dv2 .dv2-ll-price .max b {
    font-size: 1rem;
    font-weight: bold;
    color: #303030;
}

.dv2 .dv2-ll-price .similarCnt {
    display: inline-block;
    margin: 52px auto 0;
    padding: 10px 64px;
    font-size: 14px;
    font-weight: normal;
    color: #303030;
    background: var(--dv2-bg-soft);
    border-radius: 20px;
}

.dv2 .dv2-ll-price .similarCnt a {
    color: inherit;
}

.dv2 .dv2-ll-price .similarCnt b {
    font-weight: bold;
    text-decoration: underline;
}

/* 가격 비교 API 대기 중 스켈레톤 (.is-loading은 car-detail.jsp의 priceComparison()이 추가/제거) */
.dv2 .dv2-ll-price.is-loading .rangeArea {
    position: relative;
}

.dv2 .dv2-ll-price.is-loading .rangeArea > * {
    visibility: hidden;
}

.dv2 .dv2-ll-price.is-loading .rangeArea::after {
    content: '';
    position: absolute;
    inset: 16px 0 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #eef1f4 25%, #f7f9fa 50%, #eef1f4 75%) 0 0 / 200% 100%;
    animation: dv2PriceShimmer 1.2s linear infinite;
}

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

/* 유사 차량이 3대 미만이면 JS가 .rangeArea 내용을 .noData로 교체 */
.dv2 .dv2-ll-price .noData {
    margin: -54px 0 0;
    padding: 24px 16px;
    background: var(--dv2-bg-soft);
    border-radius: 6px;
}

.dv2 .dv2-ll-price .noData p {
    font-size: 12px;
}

.dv2 .dv2-ll-price .txtCom {
    margin: 0;
    padding-top: 1.5rem;
    font-size: 14px;
    color: #707578;
}

/* ---------- Must-Knows (아코디언, Figma 2216:1521) + How to Buy (Figma 2216:1553) ---------- */
/* How to Buy 상단 구분선이 카드 전체 폭을 차지하도록 각 섹션이 자체 패딩(32px) */
.dv2 .dv2-card.dv2-ll-guide {
    padding: 0;
}

.dv2 .dv2-ll-guide .tit2 {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0;
    color: #101010;
}

.dv2 .dv2-ll-guide .conPurchase {
    margin: 0;
    padding: 32px;
    border: 0;
    border-radius: 0;
}

/* 헤더 행: 제목 + 부제 (간격 8) | 24px 셰브론 (간격 12) */
.dv2 .dv2-ll-acc__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}

.dv2 .dv2-ll-acc__head::-webkit-details-marker {
    display: none;
}

.dv2 .dv2-ll-acc__titles {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dv2 .dv2-ll-guide .dv2-ll-acc__sub {
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #303030;
}

/* 접힘 시 아래, 펼침 시 위로 뒤집기 */
.dv2 .dv2-ll-acc__icon {
    flex: none;
    display: block;
    width: 24px;
    height: 24px;
    transition: transform .2s;
}

.dv2 .dv2-ll-acc[open] > .dv2-ll-acc__head .dv2-ll-acc__icon {
    transform: rotate(180deg);
}

/* 높이 트랜지션 중 ::details-content 밖으로 마진 상쇄가 생기지 않도록 margin 대신 padding */
.dv2 .dv2-ll-acc__body {
    padding-top: 24px;
}

/* 열기/닫기 트랜지션: <details> 내용 높이 애니메이션 (Chromium 131+, interpolate-size);
   그 외 브라우저는 열릴 때 아래 keyframe 페이드인으로 대체. */
.dv2 .dv2-ll-acc {
    interpolate-size: allow-keywords;
}

.dv2 .dv2-ll-acc::details-content {
    height: 0;
    overflow: clip;
    transition: height .3s ease, content-visibility .3s allow-discrete;
}

.dv2 .dv2-ll-acc[open]::details-content {
    height: auto;
}

.dv2 .dv2-ll-acc[open] > .dv2-ll-acc__body {
    animation: dv2AccIn .3s ease;
}

@keyframes dv2AccIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* 영어 (v2 문구): 항목 5개, 간격 12; 불릿 제목(disc는 24px 시작 여백에 걸침) + 설명 22px 들여쓰기, 간격 4 */
.dv2 .dv2-ll-must {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.dv2 .dv2-ll-must__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dv2 .dv2-ll-must__title {
    display: list-item;
    list-style: disc outside;
    margin: 0 0 0 24px;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #303030;
}

.dv2 .dv2-ll-must__desc {
    margin: 0;
    padding-left: 22px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #505050;
}

/* 푸터 링크, 오른쪽 정렬 */
.dv2 .dv2-ll-acc__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* 파란 텍스트 링크 + 화살표 아이콘 (간격 8): Must-Knows 푸터 14px, FAQ 답변 16px ("Buy it Safely!"는 15px) */
.dv2 .dv2-ll-acc__link,
.dv2 .dv2-ll-guide .boxFaq li div .dv2-ll-faq__link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-weight: 500;
    line-height: 1.4;
    color: #2473ff;
}

.dv2 .dv2-ll-acc__link {
    font-size: 14px;
}

.dv2 .dv2-ll-guide .boxFaq li div .dv2-ll-faq__link {
    margin-top: 8px;
    font-size: 16px;
}

.dv2 .dv2-ll-guide .boxFaq li div .dv2-ll-faq__link--sm {
    font-size: 15px;
}

.dv2 .dv2-ll-acc__link img,
.dv2 .dv2-ll-faq__link img {
    flex: none;
    display: block;
    width: 12.5px;
    height: 7.364px;
}

/* How to Buy: Must-Knows 아래 1px 상단 구분선 */
.dv2 .dv2-ll-guide .conService {
    display: block;
    margin: 0;
    padding: 32px;
    border-top: 1px solid #d8dde1;
}

.dv2 .dv2-ll-guide .boxFaq {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.dv2 .dv2-ll-faq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dv2 .dv2-ll-guide .boxFaq .tit2 {
    color: #0c0d0e;
}

.dv2 .dv2-ll-faq__more {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #707578;
}

.dv2 .dv2-ll-faq__more img {
    flex: none;
    display: block;
    width: 5.018px;
    height: 8.837px;
}

.dv2 .dv2-ll-guide .boxFaq ul {
    margin-top: 16px;
}

.dv2 .dv2-ll-guide .boxFaq li {
    padding: 24px 0;
    border-top: 0;
    border-bottom: 1px solid #e4eaef;
}

.dv2 .dv2-ll-guide .boxFaq li:last-child {
    border-bottom: 0;
}

/* 질문 행: 텍스트 | 24px 셰브론 (세로 가운데) */
.dv2 .dv2-ll-guide .boxFaq li > a {
    position: relative;
    padding: 0 32px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #303030;
    background: none;
}

.dv2 .dv2-ll-guide .boxFaq li > a span {
    margin-right: 0;
    font-weight: inherit;
    color: inherit;
}

/* "Q.  " 의 공백 두 칸 유지 */
.dv2 .dv2-ll-guide .boxFaq li > a .dv2-ll-faq__mark {
    white-space: pre;
}

.dv2 .dv2-ll-guide .boxFaq li > a.on {
    color: #303030;
    background: none;
}

.dv2 .dv2-ll-guide .boxFaq li > a:hover {
    color: #101010;
    background: none;
}

/* 셰브론: 열림 시 위 (.on은 car-detail.jsp 클릭 핸들러가 지정), 닫힘 시 180deg 회전 */
.dv2 .dv2-ll-guide .boxFaq li > a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(https://image.autowini.com/IMG/common/new/ic_chevron_up_thin_24.svg) no-repeat center / 24px 24px;
    transform: rotate(180deg);
    transition: transform .2s;
}

.dv2 .dv2-ll-guide .boxFaq li > a.on::after {
    transform: none;
}

/* 답변 (car-detail.jsp가 slideDown/Up; jQuery가 height/margin/padding 애니메이션) */
.dv2 .dv2-ll-guide .boxFaq li div {
    margin: 8px 0 0;
    padding: 0 0 0 26px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #505050;
    background: none;
    border-radius: 0;
}

.dv2 .dv2-ll-guide .boxFaq li p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* ---------- Shipping Info (관련 영상 + 링크) ---------- */
.dv2 .dv2-ll-ship .tit2 {
    margin-bottom: 16px;
}

.dv2 .dv2-ll-ship .boxService ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.dv2 .dv2-ll-ship .boxService li {
    width: auto;
    margin: 0;
    border-radius: 6px;
}

.dv2 .dv2-ll-ship .boxService li a {
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
}

.dv2 .dv2-ll-ship .boxService li a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dv2 .dv2-ll-ship .boxService li a span {
    font-size: 11px;
    line-height: 1.2;
}

.dv2 .dv2-ll-ship .boxShip {
    margin: 16px 0 0;
}

.dv2 .dv2-ll-ship .boxShip .list li {
    position: relative;
    padding-left: 10px;
}

.dv2 .dv2-ll-ship .boxShip .list li + li {
    margin-top: 6px;
}

.dv2 .dv2-ll-ship .boxShip .list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 3px;
    height: 3px;
    background: var(--dv2-blue);
    border-radius: 50%;
}

.dv2 .dv2-ll-ship .boxShip .list a,
.dv2 .dv2-ll-ship .boxShip .list li:last-child a {
    display: inline;
    margin: 0;
    height: auto;
    line-height: 1.6;
    font-size: 1rem;
    color: #2473FF;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
}

.dv2 .dv2-ll-ship .boxShip .list a:hover {
    text-decoration: underline;
}

/* 영상 썸네일: 단순 커버 이미지 (v1 블러/어두운 오버레이 없음), 라벨은 좌하단 pill.
   hover = v1 확대 .35s (그림자 없음); v1은 .9 -> 1, 여기선 평소 이미지를 축소하지 않으므로 1 -> 1.1 */
.dv2 .dv2-ll-ship .boxService li a img {
    filter: none;
    transform: none;
    transition: transform .35s;
}

/* v1 .boxService li a:hover box-shadow 제거 (v2는 확대만) */
.dv2 .dv2-ll-ship .boxService li a:hover {
    box-shadow: none;
}

.dv2 .dv2-ll-ship .boxService li a:hover img {
    filter: none;
    transform: scale(1.1);
}

/* 디자인: 라벨 pill 대신 가운데 YouTube 재생 아이콘 (라벨은 a11y/JS용으로 마크업에 유지) */
.dv2 .dv2-ll-ship .boxService li a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 24px;
    margin: -12px 0 0 -17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' viewBox='0 0 34 24'%3E%3Cpath d='M32.9278 5.21297C32.5401 3.83946 31.4046 2.7565 29.9645 2.38671C27.3336 1.69995 16.8101 1.69995 16.8101 1.69995C16.8101 1.69995 6.28646 1.69995 3.65556 2.36029C2.24319 2.73008 1.08005 3.83946 0.692342 5.21297C0 7.72227 0 12.9258 0 12.9258C0 12.9258 0 18.1557 0.692342 20.6385C1.08005 22.0121 2.21549 23.095 3.65556 23.4648C6.31416 24.1516 16.8101 24.1516 16.8101 24.1516C16.8101 24.1516 27.3336 24.1516 29.9645 23.4912C31.4046 23.1214 32.5401 22.0385 32.9278 20.665C33.6201 18.1557 33.6201 12.9522 33.6201 12.9522C33.6201 12.9522 33.6478 7.72227 32.9278 5.21297Z' fill='%23FF0000'/%3E%3Cpath d='M22.2103 12.9257L13.4591 8.11841V17.733L22.2103 12.9257Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}

.dv2 .dv2-ll-ship .boxService li a span,
.dv2 .dv2-ll-ship .boxService li a:hover span {
    display: none;
}

.dv2 .dv2-ll-ship .boxService li a span {
    top: auto;
    right: auto;
    bottom: 6px;
    left: 6px;
    width: auto;
    height: auto;
    max-width: calc(100% - 12px);
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: left;
    background: rgba(0, 0, 0, .6);
    border-radius: 4px;
    box-sizing: border-box;
}