/* 점진적 이미지 로딩 스타일 */
.category-item {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* GIF 깜박임 방지 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.category-item.has-image {
    background-image: var(--placeholder-image, none);
}

.category-item.loading {
    background-image: var(--webp-image, var(--placeholder-image, none));
    filter: blur(2px);
}

.category-item.loaded {
    background-image: var(--original-image, var(--webp-image, var(--placeholder-image, none)));
    filter: none;
}

/* 체크무늬 패턴 제거 */

/* 카테고리 썸네일 스타일 */
.category-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}


/* 로딩 스피너 제거 */

/* img 태그용 점진적 로딩 스타일 */
.progressive-image {
    opacity: 0.3;
    filter: blur(3px);
    transition: all 0.3s ease;
}

.progressive-image.loading {
    opacity: 0.6;
    filter: blur(2px);
}

.progressive-image.loaded {
    opacity: 1;
    filter: none;
}

/* 구성품 이미지 점진적 로딩 */
.component-item img.progressive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* 제품 스펙 이미지 점진적 로딩 */
.accordion-content img.progressive-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 로고 이미지 특별 스타일 - 즉시 로딩 */
.brand_link .progressive-image {
    opacity: 1;
    filter: none;
}

/* 모달용 점진적 로딩 CSS */
.modal-slide .progressive-image {
    opacity: 0.3;
    filter: blur(8px);
    transition: all 0.3s ease;
}

.modal-slide .progressive-image.loading {
    opacity: 0.7;
    filter: blur(4px);
}

.modal-slide .progressive-image.loaded {
    opacity: 1;
    filter: none;
}

.modal-popup .modal-slide {
  overflow: hidden; /* 좌우로 나가는 슬라이드 잘려 보이도록 */
}

.modal-popup .modal-slide .swiper-wrapper {
  will-change: transform;
}