/**
 * Product Gallery 4th Image Plugin Styles
 * 가로:세로 = 3:2 비율, 중앙 정렬
 */

.product-gallery-4th-container {
    width: 100%;
    max-width: 600px; /* 최대 너비 제한 */
    margin: 0 auto; /* 중앙 정렬 */
    text-align: center;
    position: relative;
    overflow: hidden;
    
    /* 3:2 비율 유지 */
    aspect-ratio: 3/2;
    
    /* 구형 브라우저 대응 */
    padding-bottom: 66.67%; /* 2/3 * 100% = 66.67% */
    height: 0;
}

.product-gallery-4th-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하면서 컨테이너 채우기 */
    object-position: center; /* 중앙 중심으로 크롭 */
    display: block;
    
    /* 구형 브라우저 대응 */
    position: absolute;
    top: 0;
    left: 0;
    
    /* 이미지 최적화 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .product-gallery-4th-container {
        max-width: 100%;
        margin: 0 auto 20px;
    }
}

@media (max-width: 480px) {
    .product-gallery-4th-container {
        max-width: 90%;
    }
}

/* 고해상도 디스플레이 대응 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-gallery-4th-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 접근성 - 포커스 상태 */
.product-gallery-4th-container:focus-within {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* 프린트 스타일 */
@media print {
    .product-gallery-4th-container {
        max-width: 50%;
        page-break-inside: avoid;
    }
}