/* ========================================
   반응형 (태블릿)
======================================== */

@media (max-width: 1024px) {
    .detail-container {
        padding: 0 30px;
    }

    .detail-top {
        grid-template-columns: 1fr 350px;
        gap: 30px;
    }

    /* .detail-bottom은 상세이미지용 - 그리드 제거됨 */

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .options-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .inspection-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .accident-grid {
        grid-template-columns: 1fr;
    }

    .inspection-images-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   반응형 (모바일)
======================================== */

@media (max-width: 768px) {
    .detail-content {
        padding: 20px 0;
    }

    .detail-container {
        padding: 0 16px;
    }

    .detail-top {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* .detail-bottom은 상세이미지용 - 그리드 제거됨 */

    /* 갤러리 */
    .detail-gallery-wrap {
        position: static;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 8px;
    }

    .thumb-item {
        border-width: 1px;
        border-radius: 4px;
    }

    /* 제목 */
    .vehicle-title {
        font-size: 1.25rem;
    }

    .vehicle-title-section {
        padding: 16px 20px;
    }

    .vehicle-title-section .vehicle-title {
        font-size: 1.1rem;
    }

    /* 가격 */
    .current-price {
        font-size: 1.5rem;
    }

    .vehicle-price-section {
        padding: 16px 20px;
    }

    .price-amount {
        font-size: 1.6rem;
    }

    /* CTA */
    .vehicle-cta-section {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta {
        flex-direction: row;
        padding: 12px 16px;
        gap: 8px;
        border-radius: 8px;
    }

    .btn-cta .btn-text {
        font-size: 0.9rem;
    }

    .btn-cta .btn-phone {
        display: none;
    }

    .info-actions {
        flex-direction: column;
    }

    .price-actions {
        flex-direction: column;
    }

    /* 정보 영역 */
    .detail-info-wrap {
        gap: 12px;
    }

    .key-specs {
        grid-template-columns: 1fr;
    }

    /* 기본 정보 - 모바일 2열 레이아웃 */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .info-item {
        min-width: unset;
        padding: 10px 8px;
    }

    /* 오른쪽 열(2, 4, 6번째)은 border-right 제거 */
    .info-item:nth-child(2n) {
        border-right: none;
    }

    /* 상단 행에 하단 border 추가 */
    .info-item:nth-child(-n+4) {
        border-bottom: 1px solid #e2e8f0;
    }

    .info-value {
        font-size: 0.85rem;
    }

    .info-table th,
    .info-table td {
        display: block;
        width: 100%;
    }

    .info-table th {
        border-bottom: none;
        padding-bottom: 4px;
    }

    .info-table td {
        padding-top: 0;
        padding-bottom: 16px;
    }

    /* 옵션 탭 */
    .tabs-nav {
        overflow-x: auto;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .options-tab-nav {
        overflow-x: auto;
    }

    .options-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .options-list {
        grid-template-columns: 1fr;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    /* 성능점검표 */
    .inspection-table th,
    .inspection-table td {
        display: block;
        width: 100%;
    }

    .inspection-table th {
        border-bottom: none;
        padding-bottom: 4px;
    }

    .inspection-table td {
        padding-top: 0;
        padding-bottom: 12px;
    }

    .inspection-images-grid {
        grid-template-columns: 1fr;
    }

    /* 성능점검표 모달 - 모바일 */
    .btn-modal-nav {
        width: 36px;
        height: 36px;
    }

    .btn-prev {
        left: 8px;
    }

    .btn-next {
        right: 8px;
    }

    .inspection-modal-header {
        padding: 12px 16px;
    }

    .inspection-modal-thumbs {
        padding: 8px 12px;
        gap: 6px;
    }

    .modal-thumb {
        width: 50px;
        height: 38px;
    }

    /* 핀치 줌 지원 */
    .modal-image-container {
        touch-action: pinch-zoom;
    }

    .modal-image.active {
        max-width: none;
        width: 100%;
        height: auto;
    }

    /* 설명 모달 반응형 */
    .description-modal {
        padding: 16px;
        align-items: flex-end;
    }

    .description-modal .modal-content {
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .description-modal.active .modal-content {
        transform: translateY(0);
    }

    .description-modal .modal-header {
        padding: 16px 20px;
    }

    .description-modal .modal-body {
        padding: 20px;
    }
}