/*
  アプリのショート動画（YouTube Shorts）の縦長サムネイルと、押すとページの上で再生するプレーヤー。
  使い方: <a class="short" href="https://www.youtube.com/shorts/<ID>" data-yt="<ID>"> … </a>
  JS（/assets/js/shorts.js）が無くてもリンクとして YouTube が開く。
  サムネイルは /assets/img/shorts/<ID>.jpg（YouTube の縦長サムネイル oar2.jpg を 360×640 に縮めて保存したもの）。
*/
.shorts { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:18px 0 6px; }
.short-item { width:150px; text-align:center; }
/* トップのカードでは、サムネイルは 132px のまま、題名はカードの幅いっぱいに使う（狭いと途中で折り返すため） */
.app-card .short-item { width:auto; margin:12px 0 2px; }
.app-card .short { width:132px; margin:0 auto; }

.short { display:block; position:relative; width:100%; aspect-ratio:9/16; border-radius:14px; overflow:hidden;
         background:#000; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.short img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.short:hover img { transform:scale(1.04); }
.short:focus-visible { outline:3px solid #007aff; outline-offset:3px; }
.short .short-play { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
                     border-radius:50%; background:rgba(0,0,0,.6); }
.short .short-play::after { content:""; position:absolute; left:20px; top:15px;
                            border-style:solid; border-width:11px 0 11px 18px;
                            border-color:transparent transparent transparent #fff; }
.short .short-badge { position:absolute; left:8px; top:8px; background:#ff0033; color:#fff;
                      font-size:11px; font-weight:700; line-height:1; padding:4px 7px; border-radius:6px; }
.short-cap { font-size:.8rem; color:#888; margin:6px 0 0; line-height:1.4; }

.short-modal { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.88);
               display:flex; align-items:center; justify-content:center; }
.short-modal[hidden] { display:none; }
/* 横長の動画（iPad の横向きなど）: data-shape="wide" */
.short-wide { display:block; position:relative; max-width:560px; margin:18px auto 6px; border-radius:14px; overflow:hidden;
              background:#000; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.short-wide img { width:100%; height:auto; display:block; transition:transform .25s; }
.short-wide:hover img { transform:scale(1.02); }
.short-wide:focus-visible { outline:3px solid #007aff; outline-offset:3px; }
.short-wide .short-play { position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:rgba(0,0,0,.6); }
.short-wide .short-play::after { content:""; position:absolute; left:25px; top:19px; border-style:solid; border-width:13px 0 13px 21px;
                                 border-color:transparent transparent transparent #fff; }
.short-wide .short-badge { position:absolute; left:10px; top:10px; background:#ff0033; color:#fff; font-size:12px; font-weight:700;
                           line-height:1; padding:5px 8px; border-radius:6px; }
.short-modal.wide iframe { height:auto; width:min(92vw, calc(84vh * 4 / 3)); aspect-ratio:4/3; }
.short-modal iframe { height:min(86vh, calc(92vw * 16 / 9)); aspect-ratio:9/16; border:0; border-radius:14px; background:#000; }
.short-modal .short-close { position:absolute; top:10px; right:12px; width:44px; height:44px;
                            background:none; border:0; color:#fff; font-size:32px; line-height:1; cursor:pointer; }
.short-modal .short-yt { position:absolute; bottom:10px; left:0; right:0; text-align:center; }
.short-modal .short-yt a { color:#ddd; font-size:.85rem; }