/* ============================================================
   Skeleton Loading — 공개 페이지 공통
   <link rel="stylesheet" href="/components/skeleton.css"> 한 줄.

   원칙
   ① 스켈레톤은 '회색 박스 아무거나'가 아니라 실제 레이아웃과 같은 자리·같은 높이여야 한다.
      높이가 다르면 데이터가 들어올 때 화면이 밀린다(CLS). 각 페이지에서 실제 카드와
      같은 치수를 쓰도록 조각(.sk-*)을 조합한다.
   ② 정적으로 이미 그려지는 영역(히어로 문구·CTA·푸터)에는 쓰지 않는다.
      바로 보이는 것을 굳이 회색으로 덮으면 체감이 더 느려진다.
   ③ ★ 깜빡임 방지 — 스켈레톤은 처음 150ms 동안 투명하다.
      데이터가 그 안에 오면 아무것도 보이지 않은 채 실제 콘텐츠로 바뀐다.
      타이머가 아니라 CSS 지연이라 자바스크립트가 붐벼도 정확히 동작한다.
   ============================================================ */
.sk{
  /* 150ms 뒤에야 모습을 드러낸다 — 빠른 응답에서는 한 번도 보이지 않는다 */
  opacity:0;
  animation:skIn .18s ease 150ms forwards;
}
@keyframes skIn{ to{ opacity:1; } }

/* 조각 — 실제 요소 자리에 그대로 갈아 끼운다 */
.sk-box,.sk-line,.sk-pill,.sk-circle{
  display:block;
  background:#F6F6F6;
  position:relative;
  overflow:hidden;
}
.sk-box{ border-radius:10px; }
.sk-line{ height:1em; border-radius:5px; }
.sk-pill{ height:22px; border-radius:300px; }
.sk-circle{ border-radius:50%; }
/* 마지막 줄은 짧게 — 실제 문단의 끝줄처럼 보이게 */
.sk-line--60{ width:60%; }
.sk-line--75{ width:75%; }
.sk-line--40{ width:40%; }

/* Shimmer — 은은하게 한 번씩 훑고 지나간다. 번쩍이지 않는다. */
.sk-box::after,.sk-line::after,.sk-pill::after,.sk-circle::after{
  content:'';
  position:absolute;inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 100%);
  animation:skShimmer 1.6s ease-in-out infinite;
}
@keyframes skShimmer{ to{ transform:translateX(100%); } }

/* 어두운 배경 위(네이비 섹션)에서는 톤을 뒤집는다 */
.sk--dark .sk-box,.sk--dark .sk-line,.sk--dark .sk-pill,.sk--dark .sk-circle{
  background:rgba(255,255,255,.08);
}
.sk--dark .sk-box::after,.sk--dark .sk-line::after,.sk--dark .sk-pill::after,.sk--dark .sk-circle::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,0) 100%);
}

/* 동작 최소화 설정 — 흐르는 빛만 끄고 회색 자리는 그대로 둔다(무엇이 로드 중인지는 계속 보여야 한다) */
@media(prefers-reduced-motion:reduce){
  .sk{ animation:none; opacity:1; }
  .sk-box::after,.sk-line::after,.sk-pill::after,.sk-circle::after{ animation:none; opacity:.35; }
}