/* ============================================================
   Skeleton — 読み込みの器（プリミティブの状態）
   トリガは aria-busy="true"（標準ARIA・支援技術に「読み込み中」が伝わる）。
   配下のプリミティブが自分のスケルトン姿になる——形は各部品CSSが持ち、
   地（淡色＋静かな息）だけここで共有する。合成物（カード等）は実部品を
   aria-busy 下に置くだけで正しい形が得られる（別途 .sk-card は作らない）。

   シマー（背景グラデの斜め掃引）は採らない＝脱AI感（背景グラデ・雰囲気の運動）。
   息はゆっくり一定（急かさない）。prefers-reduced-motion では reset が静止させる。
   Progress（不確定/確定の待ち）とは別物：こちらは来る内容の形を保持する。
   ============================================================ */

:root {
  --skel-fill: color-mix(in srgb, var(--text) 8%, var(--bg));
  --skel-anim: skel-breath 1.7s var(--ease) infinite;
}
@keyframes skel-breath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* テキスト行スケルトン（共有プリミティブ）。各行は上下対称の角丸バー。
   バー本体は ::before、追加行は box-shadow の複製、超過分は overflow で切る。
   行数は --skel-lines（既定1）。空要素にも高さを与えるため min-height を確保。 */
[aria-busy="true"] :is([data-skel-text], .ttl, .dsc, .tm) {
  color: transparent !important;
  position: relative; overflow: hidden;
  min-height: calc(var(--skel-lines, 1) * 1lh);
  animation: var(--skel-anim);
}
[aria-busy="true"] :is([data-skel-text], .ttl, .dsc, .tm)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: .66lh;
  border-radius: 5px; background: var(--skel-fill);
  box-shadow: 0 1lh 0 var(--skel-fill), 0 2lh 0 var(--skel-fill),
              0 3lh 0 var(--skel-fill), 0 4lh 0 var(--skel-fill);
}