/**
 * skeleton.css — 「불러오는 중」 글자 대신 «같은 자리·같은 높이»의 자리표시 (2026-09-23)
 *
 * ★ 글자가 나타났다 사라지면 화면이 두 번 바뀐 것처럼 보인다. 자리표시는 들어올 내용과 같은 크기라 높이가 안 튄다.
 * ★ 움직임을 줄이는 설정(prefers-reduced-motion)에서는 반짝임을 끈다.
 */
.sk { background: var(--soft); border-radius: 8px; position: relative; overflow: hidden; }
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff88, transparent);
  transform: translateX(-100%); animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

.sk-line { height: 17px; margin: 10px 0; }
.sk-line.short { width: 40%; }
.sk-line.mid { width: 65%; }
.sk-title { height: 34px; width: 70%; margin: 0 0 24px; }
.sk-eyebrow { height: 14px; width: 30%; margin-bottom: 12px; }
.sk-button { height: 52px; border-radius: 14px; margin-top: 24px; }
.sk-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow); }
.sk-card .sk-line:first-child { margin-top: 0; }
.sk-row { display: flex; gap: 16px; }
.sk-row .sk-line { flex: 1; }