/* ============================================================

   skeleton.css · 骨架屏系统

   ============================================================ */



.skeleton {

  background: linear-gradient(90deg,

    var(--skeleton-bg) 0%,

    var(--skeleton-shimmer) 50%,

    var(--skeleton-bg) 100%);

  background-size: 200% 100%;

  animation: skeletonShimmer var(--loading-shimmer) ease-in-out infinite;

  border-radius: var(--radius-sm);

}



.skeleton-card {

  container-type: inline-size;

  padding: var(--card-padding);

  background: var(--color-surface);

  border-radius: var(--radius-lg);

}

.skeleton-cover { aspect-ratio: 16 / 9; width: 100%; }

.skeleton-title { height: 24px; width: 80%; margin-top: var(--rhythm-normal); }

.skeleton-summary { height: 16px; width: 100%; margin-top: var(--rhythm-tight); }

.skeleton-meta { height: 12px; width: 40%; margin-top: var(--rhythm-tight); }



.skeleton-article-body { padding: var(--rhythm-normal); }

.skeleton-line { height: 16px; width: 100%; margin-bottom: var(--rhythm-tight); }

.skeleton-line.w-80 { width: 80%; }

.skeleton-line.w-60 { width: 60%; }

.skeleton-heading { height: 32px; width: 50%; margin: var(--rhythm-loose) 0 var(--rhythm-normal); }



.skeleton-list { display: grid; gap: var(--rhythm-normal); }

.skeleton-quick-picks { display: flex; flex-direction: column; gap: var(--space-2); }

.skeleton-quick-picks .skeleton-line { height: 40px; }

.skeleton-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }

.skeleton-table > div { height: 40px; }

.skeleton-comment { height: 80px; margin-bottom: var(--space-3); }



@media (max-width: 768px) {

  .skeleton-title { height: 20px; }

  .skeleton-summary { height: 14px; }

}