/*
 * FANZAサンプル動画ページ専用スタイル。
 *
 * 配色は先に読み込むtheme.cssの背景色・本文色・リンク色・フォーカス色を土台とし、
 * このファイルでは動画ページ固有のグラデーション、プレイヤー枠、操作、dialogだけを上書きする。
 * テーマ判定はOS / ブラウザへ任せ、JavaScriptや保存状態を増やさない。
 * ItemListへ流用できない全画面固定レイアウトを含むため、共通CSSへ統合しない。
 *
 * 通常表示は「ヘッダー / プレイヤー / フッター」の3行を1画面へ収め、
 * タイトル、Exclude / Next video、出演者、Content IDを残しながら中央のプレイヤーだけを伸縮させる。
 * Excludeの長押し補足は読み上げへ残し、全件解除の確認はページGrid外のdialogへ分離する。
 * 出演者の省略は動画面積が不足しやすいスマホ縦画面だけに限定し、PCでは全員を直接表示する。
 * 省略時も全件はdialogへ残し、「動画を守ること」と「女優を発見できること」を両立させる。
 * 低い横向き画面では動画面積を最優先し、最大動画の左右へ操作が収まる時だけ3列化する。
 * 収まらない時は動画をボタン幅のために縮めず、操作を動画下の2分割配置へ戻す。
 * CSSは2種類の配置とセーフエリアを持ち、採用する配置の実寸判定はJavaScriptへ任せる。
 */
:root {
    /*
     * theme.cssが定義するライトテーマを既定値として受け取り、動画ページ固有色だけを追加する。
     * 共通の背景色・本文色・エラー色を重複定義せず、ページ間の基調変更はtheme.cssへ集約する。
     * ここへ変数を追加する場合は、下のダークテーマにも対応値が必要かを必ず確認する。
     */
    /* ページ全体と、見出し・補助情報の文字色。 */
    --sample-page-background:
        radial-gradient(circle at top, #ffffff 0, var(--page-bg) 42%, #e9e3da 100%);
    --sample-heading-color: var(--text-color);
    --sample-meta-color: var(--text-muted);

    /* 動画領域と、ページ単位の読み込み失敗を示す表示。 */
    --sample-player-border: #c8c0b5;
    --sample-player-shadow: 0 16px 44px rgb(78 63 43 / 20%);
    --sample-error-border: #d08b8b;
    --sample-error-bg: var(--error-bg);
    --sample-error-text: var(--error-text);

    /*
     * Exclude、Next video、出演女優リンク、一覧を開く補助操作。
     * リンク色とフォーカス色はsamplemovie内の参照名を保ちつつ、値はtheme.cssへ集約する。
     */
    --sample-primary-border: #242424;
    --sample-primary-bg: #242424;
    --sample-primary-text: #ffffff;
    --sample-primary-hover-border: #000000;
    --sample-primary-hover-bg: #000000;
    --sample-focus-color: var(--focus-color);
    --sample-link-color: var(--link-color);
    --sample-secondary-border: var(--control-border);
    --sample-secondary-bg: var(--button-bg);
    --sample-secondary-text: var(--text-color);
    --sample-secondary-hover-border: #8f8578;
    --sample-secondary-hover-bg: var(--button-hover-bg);

    /* 出演女優dialogの面、階層、操作状態。 */
    --sample-dialog-border: #c8c0b5;
    --sample-dialog-bg: #fffdf9;
    --sample-dialog-text: var(--text-color);
    --sample-dialog-shadow: 0 -18px 52px rgb(78 63 43 / 24%);
    --sample-dialog-backdrop: rgb(36 32 27 / 38%);
    --sample-dialog-header-border: #ddd5ca;
    --sample-dialog-header-bg: #f1ece4;
    --sample-dialog-close-text: var(--text-color);
    --sample-dialog-close-hover-bg: #e4ddd3;
    --sample-dialog-item-border: #d2cabf;
    --sample-dialog-item-bg: #f7f3ed;
    --sample-dialog-item-text: var(--text-color);
    --sample-dialog-item-hover-border: #918678;
    --sample-dialog-item-hover-bg: #ebe5dc;
    --sample-dialog-item-muted: var(--text-muted);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/*
 * OS / ブラウザがダークテーマを選んだ場合だけ、従来のsamplemovie配色で上書きする。
 * ライト対応前の見た目をここへ保存することで、既存のダーク利用者には表示変更を出さない。
 * 手動テーマ状態は持たず、actress.html / actresssearch.htmlと同じ追従方式にそろえる。
 * ライト側の動画専用変数を増減した場合は、この一覧との対応を崩さないよう同時に見直す。
 * 共通リンク色・フォーカス色はtheme.cssがテーマ差分を持つため、ここでは同じ参照を維持する。
 */
@media (prefers-color-scheme: dark) {
    :root {
        --sample-page-background:
            radial-gradient(circle at top, #242733 0, #11131a 40%, #090a0d 100%);
        --sample-heading-color: #ffffff;
        --sample-meta-color: #aeb3c2;
        --sample-player-border: #343846;
        --sample-player-shadow: 0 16px 44px rgb(0 0 0 / 45%);
        --sample-error-border: #78404a;
        --sample-error-bg: #2b171b;
        --sample-error-text: #ffd9df;
        --sample-primary-border: #72798c;
        --sample-primary-bg: #f1f3f8;
        --sample-primary-text: #11131a;
        --sample-primary-hover-border: #ffffff;
        --sample-primary-hover-bg: #ffffff;
        --sample-focus-color: var(--focus-color);
        --sample-link-color: var(--link-color);
        --sample-secondary-border: #505667;
        --sample-secondary-bg: #1b1e27;
        --sample-secondary-text: #e6e9f2;
        --sample-secondary-hover-border: #9ca5bc;
        --sample-secondary-hover-bg: #262a36;
        --sample-dialog-border: #3e4454;
        --sample-dialog-bg: #11141b;
        --sample-dialog-text: #f7f7f8;
        --sample-dialog-shadow: 0 -18px 52px rgb(0 0 0 / 55%);
        --sample-dialog-backdrop: rgb(0 0 0 / 62%);
        --sample-dialog-header-border: #303542;
        --sample-dialog-header-bg: #181b24;
        --sample-dialog-close-text: #e6e9f2;
        --sample-dialog-close-hover-bg: #2a2f3c;
        --sample-dialog-item-border: #343a49;
        --sample-dialog-item-bg: #1d212b;
        --sample-dialog-item-text: #e2e5ee;
        --sample-dialog-item-hover-border: #7f8aa5;
        --sample-dialog-item-hover-bg: #282d3a;
        --sample-dialog-item-muted: #bcc1cf;
    }
}

* {
    box-sizing: border-box;
}

/*
 * Exclude長押しの補足を読み上げへ残しつつ、動画面積と視覚上の操作数を増やさない補助クラス。
 * display:noneでは支援技術からも消えるため、1px領域へ閉じ込める方式を維持する。
 */
.sample-movie-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

html,
body {
    /*
     * ページ外側のスクロールで見切れを補う構成にはしない。
     * ビューポート内への収まりは.sample-movie-page以下で完結させるため、
     * ここでは文書全体の寸法を固定し、はみ出しを許可しない。
     */
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    /*
     * theme.cssの単色背景より動画ページ固有の奥行きを優先し、同じ基準色から作った背景へ置き換える。
     * 本文色とcolor-schemeは共通テーマから継承し、ここでは背景だけを担当する。
     */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sample-page-background);
}

.sample-movie-page {
    /*
     * 通常表示は「ヘッダー / 可変プレイヤー領域 / フッター」の3行で構成する。
     * 外側2行は内容に必要な高さだけを使い、中央行だけを伸縮させることで、
     * 補助情報を残したままプレイヤー全体をビューポート内へ収める。
     * 横向きスマホでもHTML順序は変えず、後段のメディア条件とJS判定で動画操作だけを再配置する。
     */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding:
        max(10px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));
}

.sample-movie-header {
    min-width: 0;
    padding-bottom: clamp(6px, 1.5vh, 14px);
    text-align: center;
}

/*
 * クレジットとContent IDは作品内容を補足するメタ情報として、従来の小さい文字サイズを維持する。
 * 出演女優は主要な画面導線なのでこの共通指定から外し、:root由来の標準文字サイズで表示する。
 * 女優名のサイズを変更する場合も、Content IDまで連動させないようセレクターを分けたままにする。
 */
.sample-movie-header .credit,
.sample-movie-content-id {
    margin: 0;
    color: var(--sample-meta-color);
    font-size: clamp(0.68rem, 1.8vw, 0.82rem);
    letter-spacing: 0.08em;
}

.sample-movie-header h1 {
    /*
     * 作品名は端末に左右されない1.5rem・太字を基準とする。
     * 折り返しでヘッダー高が増えて動画を圧迫しないよう、PC・スマホとも常に1行へ収める。
     * 幅を超えた分は内側の文字列だけをJSで移動し、JS無効時もレイアウトは崩さない。
     */
    max-width: 100%;
    margin: 0.18em 0 0;
    overflow: hidden;
    color: var(--sample-heading-color);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.25;
    white-space: nowrap;
}

/*
 * 短い作品名は従来どおり中央へ置き、長い作品名は左端から読み始められるようにする。
 * min-width: 100%とmax-contentを組み合わせることで、同じ要素のまま両方を成立させる。
 * transformは横移動、opacityは末尾から先頭へ戻る瞬間を隠す短いフェードにだけ使う。
 * 色・大きさ・装飾は操作状態で変えず、動画ページの主役より目立たせない。
 */
[data-scroll-title-text] {
    display: block;
    width: max-content;
    min-width: 100%;
    transform: translateX(0);
    text-align: center;
    opacity: 1;
    transition: opacity 150ms ease;
}

[data-scroll-title].is-resetting [data-scroll-title-text] {
    opacity: 0;
}

/*
 * 停止・再開はクリック／タップだけの補助操作とし、ホバーやフォーカスを再実行条件にしない。
 * マウスが偶然残っただけで動き続けることを避け、キーボード操作も動画の再生操作と混同させない。
 * 実際に幅を超えた作品名に限り、精密なポインターを持つPCだけcursorで操作可能性を示す。
 */
@media (hover: hover) and (pointer: fine) {
    [data-scroll-title].is-overflowing {
        cursor: pointer;
    }
}

.sample-movie-stage {
    /*
     * iframeには基準寸法があるため、Grid項目の既定最小サイズへ任せると
     * 中央行がビューポートより広がる場合がある。
     * min-width/min-heightを0にして、親Gridが決めた利用可能領域まで確実に縮小できるようにする。
     */
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
}

.sample-movie-player {
    /*
     * 既定はスマホ縦画面で安定する4:3とし、左右には操作しやすい余白を残す。
     * 720pxはDMMのsize_720_480を原寸以上へ拡大しない上限であり、
     * PC表示でプレイヤー外側の余剰領域を目立たせないための境界でもある。
     * プレイヤー内部の黒はiframeの読込中や余白を映像面として扱うため、テーマに連動させない。
     */
    width: calc(100% - 32px);
    min-width: 0;
    max-width: 720px;
    max-height: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--sample-player-border);
    border-radius: clamp(6px, 1.5vw, 12px);
    background: #000;
    box-shadow: var(--sample-player-shadow);
}

/*
 * 横向き画面は横幅より高さが先に不足しやすいため、幅ではなく中央行の高さを寸法の基準にする。
 * 4:3の比率を保ったまま高さへ追従させ、DMMプレイヤーの操作部を含む下端を切らない。
 */
@media (orientation: landscape) {
    .sample-movie-player {
        width: auto;
        height: min(100%, 480px);
    }
}

/*
 * 幅と高さの両方に余裕がある画面だけ、DMMの720×480原寸と同じ3:2へ切り替える。
 * PCを4:3のまま表示するとiframe内の余剰領域が見える一方、幅だけで判定すると
 * 横向きスマホまでPC表示になるため、min-height: 500pxを端末区分の境界として併用する。
 */
@media (min-width: 768px) and (min-height: 500px) {
    .sample-movie-player {
        aspect-ratio: 3 / 2;
    }
}

.sample-movie-player iframe {
    /*
     * HTMLのwidth/height属性はCSS未適用時の基準寸法として720×480を残す。
     * 実際の表示寸法は親要素へ追従させ、端末ごとの比率・上限・余白は
     * .sample-movie-player側だけで管理する。
     */
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sample-movie-error {
    /*
     * エラーはページ共通トークンを基調にしつつ、動画背景上でも境界を判別できる枠色を加える。
     * 通常の案内や空状態へ流用せず、PHPがページ単位の失敗を返した場合だけに限定する。
     */
    max-width: 34rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sample-error-border);
    border-radius: 8px;
    background: var(--sample-error-bg);
    color: var(--sample-error-text);
    text-align: center;
}

.sample-movie-footer {
    /*
     * 通常表示のフッターは「Exclude・Next video / 状態 / 出演者 / Content ID」を縦に並べる。
     * 動画に対する2操作を出演者リンクより先に置き、スワイプを知らない利用者にも主操作を明示する。
     * 内容量で行高が増えるため、間隔は小さく保ち、中央の動画領域を圧迫しすぎない。
     */
    display: grid;
    min-width: 0;
    padding-top: clamp(5px, 1vh, 10px);
    overflow: hidden;
    gap: clamp(2px, 0.5vh, 5px);
    justify-items: center;
    text-align: center;
}

.sample-movie-actions {
    /*
     * 通常配置は操作領域をプレイヤーと同じ幅にし、左右を等分した各領域の中央へボタンを置く。
     * CSSにはJS無効時にも成立する既定幅を持たせ、JS利用時は描画後のプレイヤー実幅へ同期する。
     * 各ボタン自体を半幅へ広げないことで、2操作の関係を示しつつ映像より強い面積を持たせない。
     * 低い横画面の3列配置ではdisplay: contentsへ切り替えるため、DOM上の操作順は変更しない。
     */
    display: grid;
    width: calc(100% - 32px);
    min-width: 0;
    max-width: 720px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
}

.sample-movie-exclude,
.sample-movie-next {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        opacity 120ms ease,
        transform 120ms ease;
}

.sample-movie-exclude {
    /*
     * 左ボタンは現在作品の状態に応じてExclude / Undo Excludeを切り替えるが、視覚上は同じ操作枠とする。
     * 保存状態を変える補助操作なので、単純な再生継続であるNextより控えめな配色を維持する。
     * Undoだけを強調した別色にせず、文言変更で役割を伝える。ラベル幅の変化はJSの実寸判定へ任せる。
     * 長押し中の文字選択とOSのタッチメニューは全件解除操作と競合するため、このボタン内だけ抑止する。
     */
    border: 1px solid var(--sample-secondary-border);
    background: var(--sample-secondary-bg);
    color: var(--sample-secondary-text);
    cursor: pointer;
    user-select: none;
    -webkit-touch-callout: none;
}

.sample-movie-next {
    /*
     * Next videoは上スワイプを補完する主操作なので、文字だけで用途が分かる形を維持する。
     * 横幅はラベル量に沿わせ、余白で大きく見せずに44pxのタップ高さを確保する。
     * 将来文言を変える場合も、固定幅へ戻してプレイヤーより強い面積を持たせない。
     * 配色は主操作用トークンへ閉じ、出演者リンクやdialogの補助操作と役割を混ぜない。
     */
    border: 1px solid var(--sample-primary-border);
    background: var(--sample-primary-bg);
    color: var(--sample-primary-text);
    text-decoration: none;
}

.sample-movie-exclude:hover:not(:disabled),
.sample-movie-exclude:focus-visible:not(:disabled) {
    border-color: var(--sample-secondary-hover-border);
    background: var(--sample-secondary-hover-bg);
}

.sample-movie-next:hover,
.sample-movie-next:focus-visible {
    border-color: var(--sample-primary-hover-border);
    background: var(--sample-primary-hover-bg);
}

.sample-movie-exclude:active:not(:disabled),
.sample-movie-next:active {
    transform: translateY(1px);
}

.sample-movie-exclude:focus-visible,
.sample-movie-next:focus-visible {
    outline: 3px solid var(--sample-focus-color);
    outline-offset: 3px;
}

.sample-movie-exclude:disabled,
.sample-movie-next[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

.sample-movie-next[aria-disabled="true"] {
    pointer-events: none;
}

.sample-movie-action-status {
    /*
     * 通常操作では行を持たず、Next準備が300msを超えた時、Exclude / Undoの保存失敗、
     * 「山札の全作品が除外済み」の時だけ表示する。next-preparingは遷移までの一時通知、
     * all-excludedは利用者の選択結果、errorは保存・利用不能なので、errorだけエラー色へ切り替える。
     * 文言はPHPの言語辞書からdata属性経由で受け取り、CSSへ言語別の条件を持ち込まない。
     */
    width: calc(100% - 32px);
    max-width: 720px;
    margin: 0;
    color: var(--sample-meta-color);
    font-size: 0.85rem;
    line-height: 1.35;
}

.sample-movie-action-status[hidden] {
    display: none;
}

.sample-movie-action-status[data-state="error"] {
    color: var(--sample-error-text);
}

/*
 * 横向き時のNextは表示上の省略形であり、遷移の意味やアクセシブルネームは変えない。
 * 文言の切り替えはCSSだけで行い、PHPに端末判定を持ち込まない。
 */
.sample-movie-next-short {
    display: none;
}

/*
 * 全件解除は通常のExclude / Undoから分離した確認操作なので、ページ中央の小さなdialogへ閉じる。
 * ページGrid外で重ねることで、確認中も動画・山札・操作領域の寸法を変えない。
 * 出演女優dialogの色トークンを再利用するが、一覧ではないため固定ヘッダーやスクロール領域は持たない。
 * Noを先、Yesを後に並べ、Noへの初期フォーカスとEscapeで「変更しない」側へ戻れる構造を優先する。
 * フォーム余白にもセーフエリアを含め、横画面のノッチ付近で確認ボタンを切らさない。
 */
.sample-movie-clear-exclusions-dialog {
    width: min(calc(100% - 32px), 28rem);
    max-width: none;
    margin: auto;
    padding: 0;
    border: 1px solid var(--sample-dialog-border);
    border-radius: 16px;
    background: var(--sample-dialog-bg);
    color: var(--sample-dialog-text);
    box-shadow: var(--sample-dialog-shadow);
}

.sample-movie-clear-exclusions-dialog::backdrop {
    background: var(--sample-dialog-backdrop);
}

.sample-movie-clear-exclusions-form {
    display: grid;
    gap: 18px;
    padding:
        22px
        max(18px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
}

.sample-movie-clear-exclusions-form h2,
.sample-movie-clear-exclusions-form p {
    margin: 0;
}

.sample-movie-clear-exclusions-form h2 {
    font-size: 1.1rem;
    line-height: 1.35;
}

.sample-movie-clear-exclusions-form p {
    line-height: 1.55;
}

.sample-movie-clear-exclusions-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sample-movie-clear-exclusions-actions button {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--sample-secondary-border);
    border-radius: 999px;
    background: var(--sample-secondary-bg);
    color: var(--sample-secondary-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sample-movie-clear-exclusions-actions button:hover,
.sample-movie-clear-exclusions-actions button:focus-visible {
    border-color: var(--sample-secondary-hover-border);
    background: var(--sample-secondary-hover-bg);
}

.sample-movie-clear-exclusions-actions [value="confirm"] {
    border-color: var(--sample-error-border);
    color: var(--sample-error-text);
}

.sample-movie-clear-exclusions-actions button:focus-visible {
    outline: 3px solid var(--sample-focus-color);
    outline-offset: 2px;
}

/*
 * 通常表示は出演女優の全件表示を基準とし、名前だけを中央から自然に折り返す。
 * リンク可否はPHP側のID検証へ任せ、CSSはリンクと通常文字列を同じ配置で扱う。
 * この全件表示はPC向け表示であると同時に、JSやdialogが使えない場合のフォールバックでもある。
 */
.sample-movie-cast {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.2em 0.9em;
    line-height: 1.35;
}

/*
 * 動画を圧迫しやすい「縦向き・幅767px以下」だけ、出演者プレビューを2行へ制限する。
 * is-measuringとis-collapsedを同じ高さにすることで、JSの判定時と確定後で基準を変えない。
 * このメディア条件はJSのportraitPhoneと対になっているため、境界値を変更する場合は必ず同時に直す。
 * 条件外ではクラスが残っても高さを制限せず、PC・横画面の全件表示をCSS側でも保証する。
 */
@media (orientation: portrait) and (max-width: 767px) {
    .sample-movie-cast.is-measuring,
    .sample-movie-cast.is-collapsed {
        max-height: 2.9em;
        overflow: hidden;
    }
}

.sample-movie-cast a {
    color: var(--sample-link-color);
    text-decoration: none;
}

.sample-movie-cast a:hover,
.sample-movie-cast a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/*
 * 開くボタンはCSSの既定でも非表示にし、JSがhiddenを外したうえで
 * スマホ縦画面のメディア条件を満たした場合だけ表示する。
 * JS判定とCSS判定の二段階にすることで、PCへボタンだけが残る状態を避ける。
 */
.sample-movie-cast-open {
    display: none;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--sample-secondary-border);
    border-radius: 999px;
    background: var(--sample-secondary-bg);
    color: var(--sample-secondary-text);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.sample-movie-cast-open[hidden] {
    display: none;
}

@media (orientation: portrait) and (max-width: 767px) {
    .sample-movie-cast-open:not([hidden]) {
        display: inline-flex;
    }
}

.sample-movie-cast-open:hover,
.sample-movie-cast-open:focus-visible {
    border-color: var(--sample-secondary-hover-border);
    background: var(--sample-secondary-hover-bg);
}

.sample-movie-cast-open:focus-visible,
.sample-movie-cast-dialog-close:focus-visible,
.sample-movie-cast-dialog-list a:focus-visible {
    outline: 3px solid var(--sample-focus-color);
    outline-offset: 2px;
}

/*
 * 全出演者はページGridを押し縮めないネイティブdialogの最前面レイヤーへ表示する。
 * 高さは表示領域の70%を上限とし、動画へ戻れる文脈を背後へ残す。
 * 見出しと閉じる操作は固定し、人数が増えても名前一覧だけがスクロールする構造を維持する。
 * 背景、ヘッダー、一覧項目は同じdialog用トークン群で階層を作り、個別の直書き色へ戻さない。
 */
.sample-movie-cast-dialog {
    position: fixed;
    inset: auto 0 0;
    width: min(calc(100% - 20px), 42rem);
    max-width: none;
    max-height: min(70vh, 36rem);
    max-height: min(70dvh, 36rem);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sample-dialog-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--sample-dialog-bg);
    color: var(--sample-dialog-text);
    box-shadow: var(--sample-dialog-shadow);
}

.sample-movie-cast-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.sample-movie-cast-dialog::backdrop {
    background: var(--sample-dialog-backdrop);
}

.sample-movie-cast-dialog-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 56px;
    padding: 6px 8px 6px 18px;
    border-bottom: 1px solid var(--sample-dialog-header-border);
    background: var(--sample-dialog-header-bg);
}

.sample-movie-cast-dialog-header h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.sample-movie-cast-dialog-close {
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: transparent;
    color: var(--sample-dialog-close-text);
    font: inherit;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.sample-movie-cast-dialog-close:hover,
.sample-movie-cast-dialog-close:focus-visible {
    background: var(--sample-dialog-close-hover-bg);
}

/*
 * 一覧内だけに縦スクロールを閉じ、画面端ではセーフエリア分の余白を確保する。
 * touch-actionとoverscroll-behaviorは一覧探索をページ側のジェスチャーへ伝播させない補助であり、
 * 次作品スワイプの除外自体はHTMLのdata-ignore-next-swipeとJS側の判定が担う。
 */
.sample-movie-cast-dialog-list {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding:
        12px
        max(12px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.sample-movie-cast-dialog-list a,
.sample-movie-cast-dialog-list span {
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--sample-dialog-item-border);
    border-radius: 8px;
    background: var(--sample-dialog-item-bg);
    color: var(--sample-dialog-item-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
}

.sample-movie-cast-dialog-list a:hover,
.sample-movie-cast-dialog-list a:focus-visible {
    border-color: var(--sample-dialog-item-hover-border);
    background: var(--sample-dialog-item-hover-bg);
}

.sample-movie-cast-dialog-list span {
    color: var(--sample-dialog-item-muted);
}

.sample-movie-content-id {
    /*
     * Content IDは従来どおり補助情報の1行表示を維持する。
     * 極端に狭い画面でもフッター幅を押し広げないよう、必要な場合だけ末尾を省略する。
     */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (orientation: landscape) and (max-height: 499px) {
    /*
     * 高さ500px未満を「動画面積が不足する横画面」の境界とし、補足情報より動画と2操作を優先する。
     * ヘッダー、出演者、一覧を開くボタン、Content IDは隠し、動画は上下の安全領域まで拡大する。
     *
     * JSがノッチを除いた実表示幅、最大4:3動画、両ボタンの実幅を比較する。
     * 収まる場合は「Exclude / 動画 / Next」の3列として残余領域の中央へボタンを置く。
     * 収まらない場合だけis-landscape-actions-belowを付け、通常と同じ動画下の2分割配置へ戻す。
     * この境界に固定端末名や画面幅を追加せず、文言・文字拡大・Safariの表示領域変化にも実寸で追従する。
     */
    .sample-movie-page {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-right: max(8px, env(safe-area-inset-right));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        padding-left: max(8px, env(safe-area-inset-left));
    }

    .sample-movie-header {
        display: none;
    }

    .sample-movie-page:not(.is-landscape-actions-below) {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-stage {
        grid-row: 1;
        grid-column: 2;
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-player {
        width: auto;
        height: calc(
            100vh
            - max(8px, env(safe-area-inset-top))
            - max(8px, env(safe-area-inset-bottom))
        );
        height: calc(
            100dvh
            - max(8px, env(safe-area-inset-top))
            - max(8px, env(safe-area-inset-bottom))
        );
        max-width: 100%;
        max-height: 100%;
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-footer {
        position: relative;
        z-index: 1;
        display: grid;
        grid-row: 1;
        grid-column: 1 / -1;
        grid-template-columns:
            minmax(0, 1fr)
            var(--sample-landscape-player-width, 0px)
            minmax(0, 1fr);
        padding: 0;
        overflow: visible;
        pointer-events: none;
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-actions {
        display: contents;
        width: auto !important;
        max-width: none;
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-exclude,
    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-next {
        align-self: center;
        justify-self: center;
        pointer-events: auto;
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-exclude {
        grid-column: 1;
    }

    .sample-movie-page:not(.is-landscape-actions-below) .sample-movie-next {
        grid-column: 3;
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .sample-movie-page:not(.is-landscape-actions-below)
        .sample-movie-action-status:not([hidden]) {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: auto;
        max-width: none;
    }

    /*
     * 3列に必要な幅がない場合は、動画を可変の上段、操作を内容高の下段へ戻す。
     * ボタンを切らさないために動画だけを縮小する方式は採らず、最大化できる上段を先に確保する。
     * 操作領域は通常表示と同じプレイヤー実幅・2等分を再利用し、横画面専用の別寸法を増やさない。
     */
    .sample-movie-page.is-landscape-actions-below {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .sample-movie-page.is-landscape-actions-below .sample-movie-stage {
        grid-row: 1;
        grid-column: 1;
    }

    .sample-movie-page.is-landscape-actions-below .sample-movie-player {
        width: auto;
        height: min(100%, 480px);
        max-width: 100%;
        max-height: 100%;
    }

    .sample-movie-page.is-landscape-actions-below .sample-movie-footer {
        grid-row: 2;
        grid-column: 1;
        padding-top: 4px;
        overflow: hidden;
    }

    .sample-movie-cast,
    .sample-movie-cast-open,
    .sample-movie-content-id {
        display: none;
    }

    .sample-movie-next-full {
        display: none;
    }

    .sample-movie-next-short {
        display: inline;
    }
}