/* HCL Skeleton Loading — 3시안 공통
   - base:  #E8ECF2 (라이트 그레이)
   - shim:  #F5F8FB → #FFFFFF 하이라이트
   - accent:#26B7C7 청록 미세 (HCL 브랜드 글로우)
   - 적용: img.skeleton (이미지 자체) / .skeleton-bg (background-image 래퍼)
*/

@keyframes hcl-skeleton-shimmer {
  0% {
    background-position: -150% 0;
  }
  100% {
    background-position: 250% 0;
  }
}

/* ── 이미지용 (<img>) ──────────────────────────────────────── */
img.skeleton {
  background-color: #e8ecf2;
  background-image: linear-gradient(
    100deg,
    rgba(232, 236, 242, 0) 0%,
    rgba(245, 248, 251, 0.85) 38%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(38, 183, 199, 0.18) 56%,
    rgba(245, 248, 251, 0.85) 64%,
    rgba(232, 236, 242, 0) 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  animation: hcl-skeleton-shimmer 1.8s linear infinite;
  color: transparent;
  /* 이미지 자체는 가림 (alt text 등도 가려져 깨끗) */
  filter: none;
  /* 사진 로드 전 깜빡임 방지 */
  min-height: 80px;
}

img.skeleton[src] {
  /* src 있어도 로드 전엔 안 보이게 */
  opacity: 0;
  /* 트릭: shimmer는 background로, 실제 src 픽셀은 숨김 */
}

/* loaded 클래스가 붙으면 fade-in */
img.is-loaded {
  animation: none;
  background: none;
  opacity: 1;
  transition: opacity 320ms ease;
  min-height: 0;
}

/* loaded 직전 transient — 페이드 인 시작 */
img.is-loading-done {
  opacity: 1;
  transition: opacity 320ms ease;
}

/* ── 배경 이미지용 (background-image 래퍼) ─────────────────── */
.skeleton-bg {
  position: relative;
}

.skeleton-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #e8ecf2;
  background-image: linear-gradient(
    100deg,
    rgba(232, 236, 242, 0) 0%,
    rgba(245, 248, 251, 0.85) 38%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(38, 183, 199, 0.18) 56%,
    rgba(245, 248, 251, 0.85) 64%,
    rgba(232, 236, 242, 0) 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  animation: hcl-skeleton-shimmer 1.8s linear infinite;
  pointer-events: none;
  opacity: 1;
  transition: opacity 380ms ease;
}

.skeleton-bg.is-loaded-bg::before {
  opacity: 0;
  animation: none;
}

/* ── 접근성: 감속 모션 선호 시 shimmer 정지 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  img.skeleton,
  .skeleton-bg::before {
    animation: none;
    background-image: none;
    background-color: #e8ecf2;
  }
}