/**
 * catsea.io — 스켈레톤 로더 (Day 12)
 * 사용법:
 *   <div class="cs-skeleton-list">
 *     <div class="cs-skeleton-list-item"></div>
 *   </div>
 *   <div class="cs-skeleton-box"></div>
 *   <div class="cs-skeleton-text"></div>
 */

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

.cs-skeleton,
.cs-skeleton-box,
.cs-skeleton-text,
.cs-skeleton-list-item,
.cs-skeleton-chip,
.cs-skeleton-avatar {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: cs-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

.cs-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.cs-skeleton-list-item {
  height: 52px;
  border-radius: 8px;
}

.cs-skeleton-box {
  height: 120px;
  border-radius: 10px;
}

.cs-skeleton-text {
  height: 14px;
  margin: 6px 0;
  border-radius: 4px;
}
.cs-skeleton-text.narrow  { width: 40%; }
.cs-skeleton-text.medium  { width: 65%; }
.cs-skeleton-text.wide    { width: 90%; }

.cs-skeleton-chip {
  display: inline-block;
  width: 60px;
  height: 20px;
  border-radius: 10px;
  margin-right: 6px;
}

.cs-skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* 카드 안에 쓰일 때 여백 */
.cs-skeleton-card-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}