/* ============================================
   스켈레톤 UI 스타일
   - CLS 개선을 위한 고정 높이 스켈레톤 UI
   - 그라데이션 로딩 애니메이션
   - 반응형 디자인 (모바일/데스크톱)
   ============================================ */

/* 기본 스켈레톤 컨테이너 */
.skeleton-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

/* 스켈레톤 카드 - 데스크톱 기본 */
.skeleton-card {
  width: 100%;
  height: 140px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

/* 스켈레톤 공지사항 */
.skeleton-notice {
  width: 100%;
  height: 80px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  margin-bottom: 12px;
}

/* 스켈레톤 버튼 */
.skeleton-button {
  width: 100%;
  max-width: 200px;
  height: 50px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  margin: 8px auto;
}

/* 로딩 애니메이션 - 1.5초 무한 반복 */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 스켈레톤 랭킹 섹션 */
.skeleton-ranking {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 스켈레톤 갤러리 그리드 */
.skeleton-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  width: 100%;
}

/* 스켈레톤 공지사항 컨테이너 */
.skeleton-notices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 스켈레톤 지원 섹션 */
.skeleton-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
}

/* 스켈레톤 텍스트 라인 (선택적 사용) */
.skeleton-text {
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.long {
  width: 100%;
}

/* 스켈레톤 이미지 플레이스홀더 */
.skeleton-image {
  width: 100%;
  padding-bottom: 75%; /* 4:3 비율 */
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  position: relative;
}

/* 반응형: 모바일 (max-width: 768px) */
@media (max-width: 768px) {
  /* 모바일에서 카드 높이 120px로 조정 */
  .skeleton-card {
    height: 120px;
  }

  /* 모바일에서 공지사항 높이 조정 */
  .skeleton-notice {
    height: 70px;
  }

  /* 모바일에서 버튼 높이 조정 */
  .skeleton-button {
    height: 45px;
    max-width: 180px;
  }

  /* 모바일에서 갤러리 그리드 조정 */
  .skeleton-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  /* 모바일에서 간격 조정 */
  .skeleton-container {
    gap: 12px;
    padding: 12px 0;
  }

  .skeleton-ranking {
    gap: 12px;
  }

  .skeleton-notices {
    gap: 10px;
  }

  .skeleton-support {
    padding: 16px;
    gap: 12px;
  }
}

/* 반응형: 태블릿 (768px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .skeleton-card {
    height: 130px;
  }

  .skeleton-gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* 섹션별 최소 높이 설정 */
.skeleton-section-daily {
  min-height: 450px; /* 일간 랭킹: 3행 기준 */
}

.skeleton-section-weekly {
  min-height: 750px; /* 주간 랭킹: 5행 기준 */
}

.skeleton-section-gallery {
  min-height: 750px; /* 갤러리: 5행 기준 */
}

.skeleton-section-notices {
  min-height: 200px; /* 공지사항: 2개 기준 */
}

.skeleton-section-support {
  min-height: 200px; /* 지원 섹션 */
}

/* 모바일 섹션 최소 높이 */
@media (max-width: 768px) {
  .skeleton-section-daily {
    min-height: 400px; /* 모바일 일간 랭킹 */
  }

  .skeleton-section-weekly {
    min-height: 650px; /* 모바일 주간 랭킹 */
  }

  .skeleton-section-gallery {
    min-height: 650px; /* 모바일 갤러리 */
  }

  .skeleton-section-notices {
    min-height: 180px; /* 모바일 공지사항 */
  }

  .skeleton-section-support {
    min-height: 180px; /* 모바일 지원 섹션 */
  }
}

/* 다크 모드 지원 (선택적) */
@media (prefers-color-scheme: dark) {
  .skeleton-card,
  .skeleton-notice,
  .skeleton-button,
  .skeleton-text,
  .skeleton-image {
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 20%, #2a2a2a 40%, #2a2a2a 100%);
    background-size: 200% 100%;
  }
}

/* 접근성: 애니메이션 감소 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
  .skeleton-card,
  .skeleton-notice,
  .skeleton-button,
  .skeleton-text,
  .skeleton-image {
    animation: none;
    background: #f0f0f0;
  }

  @media (prefers-color-scheme: dark) {
    .skeleton-card,
    .skeleton-notice,
    .skeleton-button,
    .skeleton-text,
    .skeleton-image {
      background: #2a2a2a;
    }
  }
}

/* 스켈레톤 숨김 유틸리티 클래스 */
.skeleton-hidden {
  display: none !important;
}

/* 페이드 인 애니메이션 (스켈레톤 제거 후 콘텐츠 표시) */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}