/* 타이어 상품비교 — body lock·커스텀 체크박스·스크롤바 */

body.tire-compare-bar-open {
    padding-bottom: var(--tire-compare-bar-height, 5.5rem);
}

body.tire-compare-modal-open {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .tire-compare-bar__cards {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .tire-compare-bar__cards::-webkit-scrollbar {
        height: 4px;
    }

    .tire-compare-bar__cards::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 9999px;
    }

    .tire-compare-modal__panel {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1023px) {
    .tire-compare-modal__body {
        -webkit-overflow-scrolling: touch;
    }
}

/* 모달 카드 — border 제거, 카드 사이 점선 구분 */
.tire-compare-modal__grid {
    gap: 0;
}

.tire-compare-modal-card + .tire-compare-modal-card {
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    margin-top: 1rem;
    padding-top: 1rem;
}

@media (min-width: 768px) {
    .tire-compare-modal-card + .tire-compare-modal-card {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    .tire-compare-modal-card:not(:nth-child(2n + 1)) {
        border-left: 1px dashed rgba(0, 0, 0, 0.12);
        padding-left: 1.25rem;
    }

    .tire-compare-modal-card:nth-child(n + 3) {
        border-top: 1px dashed rgba(0, 0, 0, 0.12);
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .tire-compare-modal-card:not(:nth-child(2n + 1)) {
        border-left: none;
        padding-left: 0;
    }

    .tire-compare-modal-card:nth-child(n + 3) {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    .tire-compare-modal-card:not(:nth-child(3n + 1)) {
        border-left: 1px dashed rgba(0, 0, 0, 0.12);
        padding-left: 1.5rem;
    }

    .tire-compare-modal-card:nth-child(n + 4) {
        border-top: 1px dashed rgba(0, 0, 0, 0.12);
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
}

.tire-compare-check .tire-compare-input {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background-color: #ffffff !important;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: transparent !important;
}

.tire-compare-check .tire-compare-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem 0.75rem;
}