/* ショート動画の頁（/short。tools/build.mjs の buildShortPage）。外枠は css/legal.css の紺の柱。
   動画は 9:16 版で、画面の高さに収まる大きさ（ヘッダー・題・下のタブ・AI の表記のぶんを引き、表記も最初の画面に入る）。
   声が AI で生成したものだという表記は、動画のすぐ下に常に出す（字は 10pt＝13.34px 以上） */
.sv__fig { margin: 14px 0 0; }
.sv__v {
  /* 幅も高さも auto のまま上限だけ決める（縦横の比は動画の 9:16 のまま）。高さの上限は
     js/short-page.js が、下のタブと AI の表記のぶんを実際に測って置き直す（これは測る前の目安） */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 330px);
  max-height: calc(100svh - 330px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 14px;
  background: #050f21;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
/* 動画の上に「音を出す」を重ねるための箱（動画の大きさに縮む） */
.sv__box {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
/* 音ありの自動再生をブラウザに止められ、音を消して流しているときだけ出す（js/short-page.js）。
   動画の上を覆い、どこを押しても音が出る（押すまで動画の操作には触れない） */
.sv__unmute {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(5, 15, 33, 0.18);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sv__unmute[hidden] { display: none; }
/* 動画が細い（横向きのスマホ・320px の画面）ときは、札が動画からはみ出さないよう、絵と字を 2 段に */
.sv__pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  max-width: calc(100% - 12px);
  box-sizing: border-box;
  min-height: 46px;
  padding: 4px 12px;
  word-break: keep-all;
  text-align: center;
  border-radius: 999px;
  border: 2px solid #1a1a1a;
  background: #ffe14a;
  color: #13294a;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 0 #1a1a1a, 0 10px 22px rgba(0, 0, 0, 0.35);
}
.sv__pill svg { width: 20px; height: 20px; flex: none; }
.sv__unmute:active .sv__pill { transform: translateY(2px); box-shadow: 0 2px 0 #1a1a1a, 0 6px 14px rgba(0, 0, 0, 0.35); }
.sv__unmute:focus-visible { outline: 3px solid #6ea8ff; outline-offset: 3px; }
.sv__ai {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 700;
  color: rgba(232, 237, 246, 0.86);
}
/* css/legal.css（あとから読む）の .legal p に負けないよう、2 段の名前で */
.sv .sv__lead { margin: 18px 0 0; font-size: 15px; line-height: 1.85; }
.sv .sv__meta { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: #b9c8e2; }