/*
  Skeleton UI (full-page load hint)
  - 제품급 "로딩 중" 시각 피드백
  - 실제 데이터/레이아웃은 그대로 유지하고, DOMContentLoaded 이후 숨김
  - 접근성: aria-busy 연동 (JS에서 설정)
*/

:root{
  --sk-bg: color-mix(in srgb, var(--color-card, #1a1a1a) 92%, #ffffff 8%);
  --sk-hi: color-mix(in srgb, var(--color-card, #1a1a1a) 78%, #ffffff 22%);
  --sk-radius: 12px;
}

@keyframes sk_shimmer{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}

.sk-wrap{display:none;}

html.js-loading .sk-wrap{display:block;}
html.js-loading [data-skeleton-target]{display:none;}

.sk-card{
  background:var(--sk-bg);
  border:1px solid var(--color-border, rgba(255,255,255,.12));
  border-radius:16px;
  padding:14px;
}

.sk{
  position:relative;
  overflow:hidden;
  background:var(--sk-bg);
  border-radius:var(--sk-radius);
}

.sk::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, var(--sk-hi), transparent);
  transform:translateX(-120%);
  animation:sk_shimmer 1.1s infinite;
}

.sk-line{height:12px;}
.sk-line.sm{height:10px;}
.sk-line.lg{height:16px;}
.sk-gap{height:10px;}

/* simple width helpers (avoid inline styles) */
.sk-w120{width:120px;}
.sk-w160{width:160px;}
.sk-w260{width:260px;}
.sk-w100p{width:100%;}
.sk-h14{height:14px;}

.sk-grid{display:grid;gap:10px;}
.sk-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sk-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr));}

.sk-thumb{aspect-ratio:1/1;border-radius:14px;}

@media (max-width: 860px){
  .sk-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)){
  :root{--sk-bg: rgba(255,255,255,.08);--sk-hi: rgba(255,255,255,.16);} 
}