/* 스켈레톤 반짝임 — 문서 41 구현 순서 26 (2026-10-28) · 사이트 설정 site.motion.skel = "shimmer"

   게시판 글을 불러오는 동안 회색 뼈대 위로 빛이 한 줄 지나간다.
   어디에 —
     · 게시판 칸이 «불러오는 중» 일 때(gl-board.js 가 칸에 aria-busy="true" 를 달고, 다 그리면 "false" 로 바꾼다)
       — 그 칸의 «불러오는 중입니다…» 글(.grid-loading) 아래에 뼈대 줄 셋을 깐다. 다 불러오면 글이 바뀌어 뼈대도 바로 사라진다
     · 에디터 · 체험의 정지 뼈대(.shop-demo-line · .shop-demo-ph — gl-shop.css)에도 같은 빛
   🔴 글은 그대로 둔다 — 낭독기는 «불러오는 중» 을 읽고, 뼈대는 그림(::before · ::after)이라 읽히지 않는다.
   🔴 «아직 없습니다» · «불러오지 못했습니다» 는 aria-busy="false" 라 뼈대가 서지 않는다. 스크립트가 없으면 aria-busy 가 없어 글만 보인다.
   🔴 빛은 transform(translateX) 하나로 지나간다(배경 위치를 움직이지 않는다 — 화면을 다시 칠하지 않게). 색은 역할 토큰만.
   🔴 빛은 세 번(약 4.2초)만 지나가고 멈춘다 — 5초 넘게 저절로 움직이지 않는다(WCAG 2.2.2). 오래 걸리면 정지 뼈대로 기다린다.
   🔴 움직임 줄이기 — 빛 없이 정지 뼈대. */
:root { --gl-skel-dur: 1.4s; --gl-skel-bar: var(--line); --gl-skel-glow: color-mix(in srgb, var(--surface) 70%, transparent); }

/* 불러오는 칸의 뼈대 줄 셋(긴 줄 · 긴 줄 · 짧은 줄) — 그림 하나(::after)에 줄무늬로 */
:root[data-gl-skel="shimmer"] [aria-busy="true"] > .grid-loading {
  position: relative; overflow: hidden; padding-bottom: calc(56px + 76px);
}
:root[data-gl-skel="shimmer"] [aria-busy="true"] > .grid-loading::after {
  content: ""; position: absolute; left: 50%; bottom: 56px; width: min(520px, 100%); height: 60px; transform: translateX(-50%);
  background:
    linear-gradient(var(--gl-skel-bar), var(--gl-skel-bar)) 0 0 / 100% 12px no-repeat,
    linear-gradient(var(--gl-skel-bar), var(--gl-skel-bar)) 0 24px / 92% 12px no-repeat,
    linear-gradient(var(--gl-skel-bar), var(--gl-skel-bar)) 0 48px / 55% 12px no-repeat;
  border-radius: 6px; opacity: .8;
}
/* 지나가는 빛 — 칸 전체 폭을 한 번에 가로지른다 */
:root[data-gl-skel="shimmer"] [aria-busy="true"] > .grid-loading::before,
:root[data-gl-skel="shimmer"] :is(.shop-demo-line, .shop-demo-ph)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, var(--gl-skel-glow) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: gl-skel-shine var(--gl-skel-dur) ease-in-out 3 both;
}
:root[data-gl-skel="shimmer"] :is(.shop-demo-line, .shop-demo-ph) { position: relative; overflow: hidden; }
@keyframes gl-skel-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-gl-skel="shimmer"] [aria-busy="true"] > .grid-loading::before,
  :root[data-gl-skel="shimmer"] :is(.shop-demo-line, .shop-demo-ph)::after { content: none; animation: none; }
}