/* ========== car-view.css — Figma 기준 재작업 ========== */
/* 전체 컨테이너: bg white, padding 20px, gap 20px, font Pretendard */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.mobile-wrap {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fff;
    max-width: 412px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}

/* ===== 헤더: h=32, 양쪽 정렬, gap 10 ===== */
.cv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 20px;
    margin-top: 20px;
    background: #fff;
    overflow: hidden;
}
.cv-header__back {
    width: 46px; height: 18px;
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center;
}
.cv-header__title {
    font-size: 16px; font-weight: 600; color: #333;
    text-align: center; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin: 0;
}
.cv-header__right {
    display: flex; gap: 10px; align-items: center;
    overflow: hidden;
}
.cv-header__btn {
    width: 18px; height: 18px;
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cv-header__btn svg { width: 18px; height: 18px; }
.cv-header__btn--wish.is-active svg path { fill: #E53935; stroke: #E53935; }

/* ===== 갤러리: w=372, h=219 (피그마), 카운터 left:16 bottom:35 ===== */
.cv-gallery {
    position: relative;
    margin: 20px 20px 0;
    overflow: hidden;
    border-radius: 0;
}
.cv-gallery__slider {
    display: flex;
    transition: transform 0.3s ease;
}
.cv-gallery__slide {
    min-width: 100%;
    aspect-ratio: 372 / 219;
    overflow: hidden;
}
.cv-gallery__slide img {
    width: 100%; height: 100%; object-fit: cover;
}
.cv-gallery__counter {
    position: absolute;
    bottom: 16px; left: 16px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 13px; font-weight: 700;
    padding: 1px 8px;
    border-radius: 30px;
    height: 20px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -0.39px;
}

/* ===== 차량 기본정보: gap 13, pb 16 ===== */
.cv-info {
    padding: 20px 20px 16px;
    display: flex; flex-direction: column; gap: 13px;
}
.cv-info__top {
    display: flex; align-items: flex-start;
    gap: 3px;
}
.cv-info__title {
    font-size: 20px; font-weight: 600; color: #000;
    line-height: normal;
    margin: 0; flex: 1;
}
.cv-info__kebab {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    padding: 4px 0; margin-top: 4px;
}
.cv-info__kebab span {
    width: 3px; height: 3px; border-radius: 50%; background: #333; display: block;
}
.cv-info__desc {
    font-size: 16px; font-weight: 400; color: #525252;
    margin: -10px 0 0; line-height: normal;
}
/* 스펙 행: gap 8 */
.cv-info__spec-wrap {
    display: flex; flex-direction: column; gap: 8px;
}
.cv-info__spec {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 400; color: #000;
    line-height: normal;
}
.cv-info__dot {
    width: 1.5px; height: 1.5px; border-radius: 50%;
    background: #000; flex-shrink: 0;
}
.cv-info__color {
    display: inline-flex; align-items: center; gap: 5px;
}
.cv-info__color-dot {
    width: 12px; height: 12px; border-radius: 50px;
}
/* 가격 행: 양쪽 정렬 */
.cv-info__price-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
}
.cv-info__price {
    font-size: 17px; font-weight: 700; color: #000; line-height: normal;
}
.cv-info__price span {
    font-weight: 500; font-size: 17px;
}
.cv-info__stats {
    display: flex; gap: 9px; align-items: center;
}
.cv-info__stat {
    display: inline-flex; align-items: center; gap: 4px;
    color: #757579; font-size: 12px; font-weight: 400;
    line-height: normal;
}
.cv-info__stat svg { flex-shrink: 0; width: 14px; height: 14px; }

/* ===== 구분선: 1px #e6e6e6 ===== */
.cv-divider {
    border: none; height: 0;
    border-top: 1px solid #e6e6e6;
    margin: 0 20px;
}

/* ===== 섹션: padding 20 ===== */
.cv-section {
    padding: 20px;
}
.cv-section__header {
    display: flex; align-items: center; justify-content: space-between;
    overflow: hidden;
}
.cv-section__title {
    font-size: 14px; font-weight: 600; color: #000;
    line-height: 1.5; margin: 0;
}
.cv-section__more {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 14px; font-weight: 500; color: #b3b3b3;
    text-decoration: none; overflow: hidden; padding: 0 1px;
}

/* ===== 시세정보: bg #f9f9f9, rounded 8, p 20, gap 10 ===== */
.cv-market {
    margin-top: 20px;
    background: #f9f9f9;
    border: 1px solid #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
}
.cv-market__model {
    font-size: 15px; font-weight: 600; color: #000;
    margin: 0; line-height: normal; text-align: left;
}
.cv-market__price-row {
    display: flex; align-items: flex-end; gap: 2px;
}
.cv-market__price {
    font-size: 21px; font-weight: 600; color: #2595fc;
    line-height: normal; text-align: center;
}
.cv-market__unit {
    font-size: 14px; font-weight: 500; color: #000;
    line-height: normal; text-align: center;
}
.cv-market__chart {
    width: 100%; border-radius: 4px;
    aspect-ratio: 363 / 284; object-fit: cover;
}
/* 시세 차트 플레이스홀더 */
.cv-market__chart-placeholder {
    width: 100%;
}
.cv-market__chart-sub {
    font-size: 13px; color: #333; margin: 0; font-weight: 400;
}
.cv-market__chart-highlight {
    font-size: 15px; font-weight: 700; color: #E53935; margin: 2px 0 0;
}
.cv-market__chart-highlight span { font-weight: 500; color: #333; }
.cv-market__chart-note {
    font-size: 11px; color: #999; margin: 8px 0 12px; font-weight: 400;
}
.cv-market__chart-bars {
    display: flex; flex-direction: column; gap: 8px;
}
.cv-market__chart-bar {
    display: flex; align-items: center; gap: 8px;
}
.cv-market__chart-bar-fill {
    height: 20px; border-radius: 4px;
}
.cv-market__chart-bar--new .cv-market__chart-bar-fill {
    width: 100%; background: #dce6f5;
}
.cv-market__chart-bar--used .cv-market__chart-bar-fill {
    width: 36%; background: #2A94FF;
}
.cv-market__chart-bar-info {
    display: flex; gap: 4px; align-items: baseline; white-space: nowrap;
}
.cv-market__chart-bar-price { font-size: 12px; font-weight: 600; color: #333; }
.cv-market__chart-bar-label { font-size: 11px; color: #999; }

/* ===== 판매자 카드: rounded 15, shadow 0 2 10 rgba(0,0,0,.1), p 20 ===== */
.cv-seller-card {
    margin-top: 10px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cv-seller-card__top {
    display: flex; gap: 24px; align-items: center; width: 100%;
}
.cv-seller-card__profile {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; width: 104px; flex-shrink: 0;
}
.cv-seller-card__avatar-wrap {
    position: relative;
}
.cv-seller-card__avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
}
.cv-seller-card__avatar--default {
    display: flex; align-items: center; justify-content: center;
    background: #f0f0f0;
}
.cv-seller-card__badge {
    position: absolute; bottom: -4px; right: -4px; width: 24px; height: 24px;
}
.cv-seller-card__name-wrap {
    display: flex; gap: 2px; align-items: baseline;
    font-size: 14px; font-weight: 600; line-height: 1.5;
    overflow: hidden; white-space: nowrap;
}
.cv-seller-card__type { color: #2a94ff; }
.cv-seller-card__name { color: #000; }
.cv-seller-card__company {
    font-size: 12px; font-weight: 400; color: #000;
    letter-spacing: -1px; line-height: 1.5;
}
/* 판매자 통계: gap 24, h 43 */
.cv-seller-card__stats {
    display: flex; gap: 24px; flex: 1; height: 43px;
    align-items: flex-start; overflow: hidden;
}
.cv-seller-card__stat {
    display: flex; flex-direction: column; gap: 8px;
}
.cv-seller-card__stat-label {
    font-size: 12px; font-weight: 500; color: #666; line-height: normal;
}
.cv-seller-card__stat-value {
    font-size: 18px; font-weight: 500; color: #333; line-height: normal;
}
/* 판매자 버튼: gap 10, h 48, bg #e1e8f9, rounded 4 */
.cv-seller-card__actions {
    display: flex; gap: 10px; margin-top: 16px; width: 100%;
}
.cv-seller-card__btn {
    flex: 1;
    height: 48px;
    background: #e1e8f9;
    border: none; border-radius: 4px;
    font-size: 15px; font-weight: 700;
    color: #333; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 15px; overflow: hidden;
}

/* ===== 차량설명: gap 20, 본문 11px ExtraLight ===== */
.cv-desc { margin-top: 20px; }
.cv-desc__text {
    font-size: 11px; font-weight: 200; color: #000;
    line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.cv-desc__text.is-collapsed {
    max-height: 90px; overflow: hidden;
    position: relative;
}
.cv-desc__text.is-collapsed::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(transparent, #fff);
}

/* ===== 더보기 버튼: h 36, bg #f3f3f3, rounded 10, font 14px Medium ===== */
.cv-btn-more {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 36px;
    background: #f3f3f3; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 500; color: #4d4d4d;
    cursor: pointer; margin-top: 20px;
    letter-spacing: 0.14px; padding: 9px 12px;
    overflow: hidden;
}

/* ===== 기본정보 그리드: 4col, gap 15, py 20 ===== */
.cv-basic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 20px 0;
    overflow: hidden;
}
.cv-basic-grid__item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    gap: 6px; overflow: hidden;
}
.cv-basic-grid__icon-wrap {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
}
.cv-basic-grid__icon-wrap svg {
    width: 24px; height: 24px; flex-shrink: 0;
}
.cv-basic-grid__label {
    font-size: 12px; font-weight: 500; color: #333; line-height: 1.5;
    white-space: nowrap;
}
.cv-basic-grid__value {
    font-size: 12px; font-weight: 500; color: #999; line-height: 1.1;
    text-align: center; white-space: nowrap;
}

/* ===== 주요옵션: 2col, gap 15x10, py 10, px 10 각 아이템 ===== */
.cv-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    padding: 10px 0;
    overflow: hidden;
}
.cv-option-grid__item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 10px;
    overflow: hidden;
}
.cv-option-grid__item svg {
    width: 20px; height: 20px; flex-shrink: 0;
}
.cv-option-grid__name {
    font-size: 12px; font-weight: 500; color: #333;
    line-height: 1.5; white-space: nowrap;
}
.cv-option-grid__val {
    font-size: 12px; font-weight: 500; color: #999;
    line-height: 1.5; white-space: nowrap;
}

/* ===== 차량제원: 1col, gap 8, py 10, label w 42 ===== */
.cv-specs { padding: 10px 0; }
.cv-specs__row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 10px;
    font-size: 12px; font-weight: 500;
    overflow: hidden;
}
.cv-specs__row + .cv-specs__row { margin-top: 8px; }
.cv-specs__label {
    color: #333; min-width: 42px; line-height: 1.5;
}
.cv-specs__value {
    color: #999; line-height: 1.5; white-space: nowrap;
}

/* ===== 문의하기 CTA: bg #1b498c, rounded 50, h~48, font 18 Medium ===== */
.cv-cta { padding: 20px; }
.cv-cta__btn {
    display: flex; align-items: center; justify-content: center;
    gap: 0;
    width: 100%; height: 48px;
    background: #1b498c; border: none; border-radius: 50px;
    font-size: 18px; font-weight: 500; color: #fff;
    cursor: pointer; letter-spacing: 0.18px;
    padding: 9px 12px; overflow: hidden;
}
.cv-cta__btn svg {
    width: 20px; height: 20px; flex-shrink: 0;
    margin-right: 4px;
}