/* ==========================================================================
   samples.css — /samples (サンプルページ。ts_src/samples.js)
   Loaded AFTER new_preuploader.css; the page reuses its np_* styles by putting
   both classes on body (class="new_preuploader samples"). Every rule here is
   scoped under body.new_preuploader.samples. Page-specific classes use sp_*.
   色は new_preuploader.css のトークン (--np-*) を使う (ライト・ダークはトークンの
   切り替えで決まる)。
   CSP: style-src 'self' — スタイルはこのファイルに置く。行ごとの左右の縦横比だけ、
   samples.js が CSS 変数 (--sp-source-ar など) を React の style で渡す。
   ========================================================================== */
body.new_preuploader.samples {
    /* 行の間の横線 */
    --sp-separator: rgba(255, 255, 255, 0.4);
    /* 左右の画像・動画の高さの上限 (横並びでは左右の高さを揃える) */
    --sp-media-max-height: 360px;
    /* 矢印の列の幅と、画像・動画との間隔 */
    --sp-arrow-width: 3.5rem;
    --sp-gap: 1rem;
    /* ダウンロードのボタンの段が、上の画像・動画の幅から左右へはみ出してよい幅 (縦長の写真の
       下でもボタンを 1 行に収める)。横並びでは行の左右にこの幅の余白を必ず残す */
    --sp-side-room: 2.5rem;
}
body.new_preuploader.samples.theme-dark {
    --sp-separator: rgba(148, 163, 184, 0.3);
}

/* ルート要素の背景 (new_preuploader.css は #new_preuploader_root にのみ効く) */
body.new_preuploader.samples #samples_root {
    width: 100%;
    min-height: 100vh;
    /* 背景は new_preuploader.css の body::before (固定レイヤー) が描く */
    background-image: none;
}

/* 一番横長の行 (16:9 と 2:1 の動画を高さ 360px で並べ、左右に --sp-side-room を残す) が入る幅。
   ほかの行は各行の max-width (.sp_pair) で決まるので、この幅では広がらない */
body.new_preuploader.samples .np_main {
    max-width: 1560px;
}

/* 使い方 (ヘッダーの How to use で表示) */
body.new_preuploader.samples .sp_howto {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}
body.new_preuploader.samples .sp_howto p {
    margin: 0 0 0.5rem;
    line-height: 1.5;
}
/* 最後の段落の下は使い方の下の空き (np_page_explanation の margin) だけにする */
body.new_preuploader.samples .sp_howto p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   1 行 = 1 サンプル: 左に元のデータ、矢印、右に 3D モデルの動画。
   列の幅を縦横比 (--sp-source-fr / --sp-result-fr。samples.js が渡す) に比例させ、
   画像・動画を列の幅いっぱいに出すので、左右の高さが揃う。行の幅の上限は、その高さが
   --sp-media-max-height になる幅。2 段目は左の下の枚数・長さ、3 段目はダウンロードの
   ボタン (左右で同じ高さに並ぶ)
   -------------------------------------------------------------------------- */
body.new_preuploader.samples .sp_pair {
    display: grid;
    grid-template-columns:
        minmax(0, var(--sp-source-fr)) var(--sp-arrow-width) minmax(0, var(--sp-result-fr));
    grid-template-areas:
        "source           arrow result"
        "source_caption   .     ."
        "source_downloads .     result_downloads";
    column-gap: var(--sp-gap);
    align-items: start;
    max-width: min(
        calc(var(--sp-media-max-height) * (var(--sp-source-ar) + var(--sp-result-ar))
             + var(--sp-arrow-width) + 2 * var(--sp-gap)),
        calc(100% - 2 * var(--sp-side-room)));
    margin: 0 auto;
}
body.new_preuploader.samples .sp_source {
    grid-area: source;
}
body.new_preuploader.samples .sp_result {
    grid-area: result;
}
/* 画像・動画は列の幅いっぱいに、その縦横比で出す (読み込む前から同じ大きさ) */
body.new_preuploader.samples .sp_media {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    background: var(--np-thumb-bg);
}
body.new_preuploader.samples .sp_source .sp_media {
    aspect-ratio: var(--sp-source-ar);
}
body.new_preuploader.samples .sp_result .sp_media {
    aspect-ratio: var(--sp-result-ar);
}
/* 写真は押すと全部の写真の一覧のダイアログが開く (/workspace のサムネイルと同じ見せ方) */
body.new_preuploader.samples .sp_media_button {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    line-height: 0;
    cursor: pointer;
}
body.new_preuploader.samples .sp_media_button:hover .sp_media,
body.new_preuploader.samples .sp_media_button:focus-visible .sp_media {
    outline: 2px solid var(--np-accent);
}
body.new_preuploader.samples .sp_media_button:focus-visible {
    outline: none;
}

/* 左から右への矢印 (画像・動画の高さの中央) */
body.new_preuploader.samples .sp_arrow {
    grid-area: arrow;
    align-self: center;
    display: flex;
    justify-content: center;
    color: var(--np-text);
}
body.new_preuploader.samples .sp_arrow_icon {
    width: 100%;
    max-width: 3.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 左の下の、元のデータの量 (写真は枚数、動画は長さ) */
body.new_preuploader.samples .sp_source_caption {
    grid-area: source_caption;
    justify-self: center;
    margin: 0.55rem 0 0;
    color: var(--np-text-soft);
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* ダウンロードのボタン (ファイルごとに 1 つ) と条件の ?。上の画像・動画の幅より
   --sp-side-room ずつ広い枠の中央に並べ、入らなければ折り返す */
body.new_preuploader.samples .sp_downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem calc(-1 * var(--sp-side-room)) 0;
}
/* 条件の ? はボタンの右にはみ出させ、ボタンを上の画像・動画の中央に揃える (? の幅と間隔を
   中央寄せの計算から外す) */
body.new_preuploader.samples .sp_downloads > .np_error_tip {
    margin-right: calc(-16px - 0.5rem);
}
body.new_preuploader.samples .sp_source_downloads {
    grid-area: source_downloads;
}
body.new_preuploader.samples .sp_result_downloads {
    grid-area: result_downloads;
}
body.new_preuploader.samples .sp_download {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.42rem 0.9rem;
    /* ヘッダーのボタン類と同じ下地・枠のピル型 */
    border: var(--np-control-border);
    border-radius: 999px;
    background: var(--np-row-bg);
    color: var(--np-text);
    font-size: 0.9rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}
body.new_preuploader.samples .sp_download svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}
/* 狭い画面でボタンの中で折り返すときは、行の長さを揃える (「Source video」/「(540p .mp4)」) */
body.new_preuploader.samples .sp_download_label {
    text-wrap: balance;
}
body.new_preuploader.samples .sp_download_size {
    color: var(--np-text-soft);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.new_preuploader.samples .sp_download:hover:enabled {
    color: var(--np-accent-contrast);
    background: var(--np-accent);
    border-color: var(--np-accent);
}
body.new_preuploader.samples .sp_download:hover:enabled .sp_download_size {
    color: inherit;
}
body.new_preuploader.samples .sp_download:focus-visible {
    outline: 2px solid var(--np-accent);
    outline-offset: 2px;
}
body.new_preuploader.samples .sp_download:disabled {
    opacity: var(--np-disabled-opacity);
    cursor: default;
}

/* 行の間の横線 (端までは引かない) */
body.new_preuploader.samples .sp_separator {
    width: min(70%, 44rem);
    height: 0;
    margin: 2.6rem auto;
    border: none;
    border-top: 1px solid var(--sp-separator);
}

/* 全部の写真の一覧のダイアログ (/workspace の一覧と同じ升目)。写真は切り取らず、
   縮小画像の縦横比 (width / height 属性) のまま出す */
body.new_preuploader.samples .sp_gallery_item {
    height: auto;
    aspect-ratio: auto;
    align-self: start;
}

/* 条件の無い人がダウンロードを押したときの案内。文が 1 行に入る幅 (狭い画面では折り返す) */
body.new_preuploader.samples dialog.np_dialog.sp_requirement_dialog {
    max-width: 30rem;
}
body.new_preuploader.samples .sp_requirement_dialog .np_run_requirement {
    margin-top: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   <= 880px (縦長表示): 左右を縦に積む (元のデータ → 下向きの矢印 → 3D モデルの動画)。
   画像・動画は幅いっぱい (高さが --sp-media-max-height を超えない幅まで)
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
    body.new_preuploader.samples .sp_pair {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "source"
            "source_caption"
            "source_downloads"
            "arrow"
            "result"
            "result_downloads";
        max-width: none;
    }
    body.new_preuploader.samples .sp_source,
    body.new_preuploader.samples .sp_result {
        justify-self: center;
    }
    body.new_preuploader.samples .sp_source {
        width: min(100%, calc(var(--sp-media-max-height) * var(--sp-source-ar)));
    }
    body.new_preuploader.samples .sp_result {
        width: min(100%, calc(var(--sp-media-max-height) * var(--sp-result-ar)));
    }
    body.new_preuploader.samples .sp_downloads {
        margin-left: 0;
        margin-right: 0;
    }
    /* 左右の空きはページの余白 (np_main の padding 1rem) だけになるので、ボタンの右にはみ出す ?
       (16px + 0.5rem) が、その余白のうち画面の端から 0.25rem を残した中に収まるように、ボタンの幅の
       上限を狭くする (長い文言はボタンの中で折り返す。幅 320px の画面の 4 行目の左など) */
    body.new_preuploader.samples .sp_download {
        max-width: calc(100% - 2 * ((16px + 0.5rem) - (1rem - 0.25rem)));
    }
    /* 矢印は下向きに (回しても場所を取る高さは回す前の幅にする) */
    body.new_preuploader.samples .sp_arrow {
        align-self: auto;
        align-items: center;
        height: var(--sp-arrow-width);
        margin: 0.7rem 0;
    }
    body.new_preuploader.samples .sp_arrow_icon {
        width: 3.5rem;
        transform: rotate(90deg);
    }
}