/* 見本の動画・静止画・アイコン（media.js）の見た目。入れ物の大きさ（幅）は、置く側（app.css・home.css・create.css）が決める。
   色・大きさ・線・丸みは assets/tokens.css の名前だけで書く（tokens.css を先に読む）。アイコンの絵は icons.css（このファイルのあとに読む）。
   .clip       動画の枠（span）。9:16。雰囲気（mood）だけ 3:4 で真ん中を切りぬく。中は 1 枚目の静止画（.clip-poster）と、動かすときだけ <video>
   .is-live    <video> が動き出した（1 枚目の静止画の上に重ねて見せる）
   .tag        「イメージ」の札。動く絵の上に置く字はこれだけ（白い地・紺の枠・14px の太字。R13）
   .clip-badge 再生を断られたときの再生の印（R7）
   .clip-ctl   ひとりで置く動画の「動きを止める」「動きを見る」。字は無い丸いボタン（絵だけ）。枠の下に置く（R8）
   .m-ic       アイコンの入れ物（色は文字の色 currentColor・大きさ・並び）。絵そのものは icons.css（data-ic の名前ごと） */
.clip { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; background: var(--paper); isolation: isolate; }
.clip--mood { aspect-ratio: 3 / 4; }
.clip > .clip-poster, .clip > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; border: 0; object-fit: cover; }
.clip > .clip-poster { z-index: 0; }
.clip > video { z-index: 1; opacity: 0; pointer-events: none; background: transparent; }
.clip.is-live > video { opacity: 1; }
.clip > .tag { position: absolute; z-index: 2; left: var(--sp-1); top: var(--sp-1); padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--white); color: var(--navy);
  font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: 0; white-space: nowrap; pointer-events: none; }
.clip > .clip-badge { position: absolute; z-index: 2; left: 50%; top: 50%; display: none; place-items: center; width: var(--hit); height: var(--hit); margin: calc(var(--hit) / -2) 0 0 calc(var(--hit) / -2);
  border: var(--ol-2) solid var(--white); border-radius: var(--r-pill); background: var(--navy); color: var(--white); pointer-events: none; }
.clip.is-refused > .clip-badge { display: grid; }
.clip > .clip-badge .m-ic { width: var(--ic); height: var(--ic); margin-left: var(--sp-1); }
.clip-ctl { display: flex; justify-content: center; margin-top: var(--sp-2); }
.clip-ctl.is-off { visibility: hidden; } /* 動き出す前など：見えない・押せない。場所は取っておく（出たときに下の字が動かない） */
/* 止める・見る：絵だけの丸いボタン。押せる大きさは --hit（44px）。名前は aria-label（media.js）。キーボードでも押せる（<button>） */
.clip-btn { display: inline-grid; flex: none; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
.clip-btn .m-ic { width: var(--ic); height: var(--ic); }
@media (hover: hover) { .clip-btn:hover { background: var(--sky-l); } }
.clip-btn:active { background: var(--sky); }
.clip-btn:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }

/* アイコンの入れ物（24 の枠に 2px の線。大きさは置く側が width・height で決める）。mask は icons.css が絵の変数 --ic-img で当てる */
.m-ic { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; background-color: currentColor; }
@media (forced-colors: active) { .m-ic { forced-color-adjust: none; background-color: CanvasText; } } /* ハイコントラストでも消えないように */
/* 回る印（spinner）：回すのはここだけ。動きを止めているとき（html[data-motion] が off・reduce）と、端末が動きを減らす設定のときは回さず、止まった輪のまま */
@keyframes ic-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]):not([data-motion="reduce"]) .m-ic[data-ic="spinner"] { animation: ic-spin var(--t-arc) linear infinite; }
}