/**
 * 이미지 지연 로딩 스타일
 * HTML5 네이티브 lazy loading과 Intersection Observer 방식 모두 지원
 */

/* 네이티브 lazy loading - 이미지 부드러운 로딩 효과 */
img[loading="lazy"] {
    transition: opacity 0.3s ease-in-out;
}

/* Observer 방식 - 지연 로딩 상태별 스타일 */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.lazy-loading {
    opacity: 0.5;
    background: #f0f0f0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="none" stroke="%23ddd" stroke-width="2"/><circle cx="20" cy="20" r="18" fill="none" stroke="%23666" stroke-width="2" stroke-dasharray="56.5" stroke-dashoffset="56.5"><animate attributeName="stroke-dashoffset" dur="2s" values="56.5;0;56.5" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
}

img.lazy-loaded {
    opacity: 1;
}

img.lazy-error {
    opacity: 0.3;
    background: #f8f8f8;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23999"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* 게시판 이미지 컨테이너 최적화 */
#bo_v_img img[loading="lazy"],
#bo_v_con img[loading="lazy"],
.view_image img[loading="lazy"] {
    max-width: 100%;
    height: auto;
}

/* 갤러리 스킨용 최적화 */
.gallery-item img[loading="lazy"] {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* BNA(Before&After) 스킨용 최적화 */
.v__bna_img img[loading="lazy"] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}