/**
 * Skeleton UI - Shimmer Animation
 * 로딩 중 표시를 위한 스켈레톤 스타일
 * 다크/라이트 모드 지원
 */

/* ==========================================================================
   CSS Variables for Skeleton
   ========================================================================== */

/* Light Mode (Default) */
:root {
  --skeleton-bg: #e0e0e0;
  --skeleton-highlight: #f5f5f5;
  --skeleton-card-bg: #f3f4f6;
  --skeleton-border: rgba(0, 0, 0, 0.05);
}

/* Dark Mode */
html[data-theme="dark"] {
  --skeleton-bg: #2d3748;
  --skeleton-highlight: #4a5568;
  --skeleton-card-bg: #1e293b;
  --skeleton-border: rgba(255, 255, 255, 0.1);
}

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --skeleton-bg: #2d3748;
    --skeleton-highlight: #4a5568;
    --skeleton-card-bg: #1e293b;
    --skeleton-border: rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   Base Skeleton Styles
   ========================================================================== */

.skeleton-container {
  display: block;
}

.skeleton-container.hidden {
  display: none;
}

/* Base skeleton element with shimmer */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--skeleton-bg) 0%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-bg) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   Common Skeleton Components
   ========================================================================== */

/* Header/Title */
.skeleton-header {
  height: 28px;
  width: 40%;
  margin-bottom: 20px;
}

.skeleton-subtitle {
  height: 16px;
  width: 60%;
  margin-bottom: 16px;
}

/* Text lines */
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton-text.short { width: 30%; }
.skeleton-text.medium { width: 60%; }
.skeleton-text.long { width: 90%; }

/* Card skeleton */
.skeleton-card {
  padding: 16px;
  background: var(--skeleton-card-bg);
  border-radius: 12px;
  border: 1px solid var(--skeleton-border);
  margin-bottom: 12px;
}

.skeleton-card-title {
  height: 18px;
  width: 70%;
  margin-bottom: 12px;
}

.skeleton-card-desc {
  height: 14px;
  width: 90%;
  margin-bottom: 8px;
}

.skeleton-card-meta {
  height: 12px;
  width: 40%;
}

/* Button skeleton */
.skeleton-button {
  height: 40px;
  width: 100px;
  border-radius: 8px;
}

/* Avatar skeleton */
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar.sm { width: 32px; height: 32px; }
.skeleton-avatar.lg { width: 64px; height: 64px; }

/* ==========================================================================
   Grid/List Layouts
   ========================================================================== */

.skeleton-grid {
  display: grid;
  gap: 16px;
}

.skeleton-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.skeleton-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.skeleton-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .skeleton-grid.cols-3,
  .skeleton-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .skeleton-grid.cols-2,
  .skeleton-grid.cols-3,
  .skeleton-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* List with avatar */
.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--skeleton-card-bg);
  border-radius: 8px;
  border: 1px solid var(--skeleton-border);
  margin-bottom: 8px;
}

.skeleton-list-content {
  flex: 1;
}

/* ==========================================================================
   Page-Specific Skeletons
   ========================================================================== */

/* Tasks Page */
.skeleton-task-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--skeleton-card-bg);
  border-radius: 12px;
  border: 1px solid var(--skeleton-border);
  margin-bottom: 12px;
}

.skeleton-task-info {
  flex: 1;
}

.skeleton-task-progress {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Stats Page */
.skeleton-stat-card {
  padding: 20px;
  background: var(--skeleton-card-bg);
  border-radius: 12px;
  border: 1px solid var(--skeleton-border);
  text-align: center;
}

.skeleton-stat-value {
  height: 32px;
  width: 60px;
  margin: 0 auto 8px;
}

.skeleton-stat-label {
  height: 14px;
  width: 80px;
  margin: 0 auto;
}

/* Ranking Page */
.skeleton-rank-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--skeleton-card-bg);
  border-radius: 8px;
  border: 1px solid var(--skeleton-border);
  margin-bottom: 8px;
}

.skeleton-rank-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.skeleton-rank-name {
  height: 16px;
  width: 120px;
}

.skeleton-rank-score {
  height: 14px;
  width: 60px;
  margin-left: auto;
}

/* Badge Page */
.skeleton-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 12px;
}

.skeleton-badge-name {
  height: 14px;
  width: 60%;
  margin: 0 auto;
}