/* ===============================================
   Skeleton Loading Styles
   DB 조회 중 표시되는 로딩 스켈레톤
   =============================================== */

/* Skeleton 컨테이너 */
.gallery-item.skeleton-loading {
    background: #f8f8f8;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    cursor: default;
    pointer-events: none;
}

/* Skeleton 이미지 영역 */
.skeleton-img {
    width: 100%;
    height: 300px;
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 20%,
        #f0f0f0 40%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Skeleton 텍스트 영역 */
.skeleton-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.skeleton-text {
    height: 1rem;
    background: linear-gradient(
        90deg,
        #e8e8e8 0%,
        #f5f5f5 20%,
        #f5f5f5 40%,
        #e8e8e8 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 0.25rem;
}

.skeleton-title {
    width: 60%;
    height: 1.2rem;
}

.skeleton-description {
    width: 80%;
    height: 0.9rem;
}

/* Shimmer 애니메이션 */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 페이드인 애니메이션 (실제 이미지 표시 시) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-item.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* 페이드아웃 애니메이션 (Skeleton 숨김 시) */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.gallery-item.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Avatar/Style 아이템 공통 스타일 (getavata.html, getstyle.html) */
.avatar-item.skeleton-loading,
.style-item.skeleton-loading {
    background: #f8f8f8;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
}

/* ===============================================
   메인 이미지 프레임 Skeleton (getavata.html, getstyle.html)
   =============================================== */

/* 기본 상태: 이미지는 보임 (placeholder SVG가 있으므로 항상 프레임 크기 유지) */
/* ✅ 프레임 크기 고정 강화 */
.avatar-image-wrapper .background-img,
.style-image-wrapper .background-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 1;
    visibility: visible;
}

/* Skeleton 로딩 중: 이미지 숨김 */
.avatar-image-wrapper.skeleton-loading,
.style-image-wrapper.skeleton-loading {
    position: relative;
    overflow: hidden;
}

.avatar-image-wrapper.skeleton-loading .background-img,
.style-image-wrapper.skeleton-loading .background-img {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 메인 이미지 Skeleton 오버레이 */
.main-image-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 20%,
        #f0f0f0 40%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 0.5rem;
    z-index: 10;
}

/* Skeleton 중앙 아이콘 (우아한 로딩 표시) */
.main-image-skeleton::before {
    content: '🎨';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    opacity: 0.3;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* DB 이미지 로드 완료: 이미지 표시 */
.avatar-image-wrapper.db-image-loaded .background-img,
.style-image-wrapper.db-image-loaded .background-img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: opacity 0.4s ease-out !important;
}

/* Skeleton에서 DB 이미지로 전환 애니메이션 */
.avatar-image-wrapper.skeleton-loaded .background-img,
.style-image-wrapper.skeleton-loaded .background-img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    animation: fadeInImage 0.5s ease-out forwards !important;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.avatar-image-wrapper.skeleton-loaded .main-image-skeleton,
.style-image-wrapper.skeleton-loaded .main-image-skeleton {
    animation: fadeOut 0.3s ease-out forwards;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .skeleton-img {
        height: 250px;
    }
    
    .skeleton-content {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .skeleton-img {
        height: 200px;
    }
    
    .skeleton-content {
        padding: 0.8rem;
    }
}