/* ============================================================
   Image — 画像
   アスペクト比を保つ器に object-fit:cover で収める。角丸はプロパティ
   （既定はカード角丸。r-none / r-control / r-card / r-surface / round）。
   読み込み中（aria-busy）は同じ器がスケルトンの箱になる＝レイアウトが飛ばない。
   ============================================================ */

.img {
  display: block; position: relative; overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--radius-card);
  aspect-ratio: 3 / 2;
}
.img > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 角丸プロパティ */
.img.r-none    { border-radius: 0; }
.img.r-control { border-radius: var(--radius-control); }
.img.r-card    { border-radius: var(--radius-card); }
.img.r-surface { border-radius: var(--radius-surface); }
.img.round     { border-radius: 50%; }

/* スケルトン状態：器そのものが箱のプレースホルダに（アスペクト比・角丸は維持） */
[aria-busy="true"] .img { background: var(--skel-fill); animation: var(--skel-anim); }
[aria-busy="true"] .img > img { visibility: hidden; }