/*
 * Scrix Player 共有スタイル（CSS Custom Properties ベース）
 * 正典はこのファイル。Builder の player-runtime が直接 import し、
 * Player バンドル（src/player）は build.mjs でこのファイルを dist/scrix-player.css にコピーする。
 * （Docker の vite コンテナは src/builder のみマウントするため正典を builder 側に置く）
 *
 * テーマは JS が --scrix-* 変数に流し込むだけ。enum 値も変数の値で表現し、
 * スタイルの条件分岐や動的クラス構築はしない（ラベル位置のみ data 属性で出し分け）。
 */

.scrix-root {
    /* デフォルト値（bold プリセット相当）。JS が上書きする */
    --scrix-primary-color: #facc15;
    --scrix-background-color: #0f172a;
    --scrix-text-color: #f8fafc;
    --scrix-border-color: #facc15;
    --scrix-border-width: 2px;
    --scrix-shadow: none;
    --scrix-font-family: "Noto Sans JP", system-ui, sans-serif;
    --scrix-border-radius: 6px;
    /* 中身の幅の上限。**スマホ 480px / タブレット・PC 600px**（PC 値は下の
       @container (min-width: 720px) で .scrix-stage に置き、子へ継承させる・2026-09-02）。
       カード幅（.scrix-stage）は スマホ 640px / タブレット・PC 600px（PC は中身の上限と同値・2026-09-09）。
       スマホ（幅 390px 前後）と同じ「幅100%」で描くと画面の広い端末だけ倍近い大きさになるため、
       上限を超えたら中央に置く。ヒーロー画像と「1列」の選択肢に効かせ、同じ幅で揃える。
       スマホは 480px に届かないので影響しない。テーマ項目ではなく固定値（作成者に出さない） */
    --scrix-content-max-w: 480px;
    /* 選択肢画像の枠（既定 = 正方形・切り抜く）。質問メディア・結果ヒーロー・CTA画像は
       それぞれ別の変数を持ち、JS（theme.ts）が全部まとめて流し込む */
    --scrix-choice-img-aspect: 1 / 1;
    --scrix-choice-img-fit: cover;
    --scrix-choice-img-bg: transparent;
    --scrix-transition-duration: 200ms;
    --scrix-label-align: left;
    --scrix-bg-image: none;
    --scrix-bg-size: cover;
    --scrix-bg-repeat: no-repeat;
    --scrix-bg-size-desktop: cover;
    --scrix-bg-repeat-desktop: no-repeat;
    --scrix-scrim-color: rgba(15, 23, 42, 0.55);
    /* フォントサイズ（mobile 既定。desktop は @container で上書き） */
    --scrix-fs-title: 20px;
    --scrix-fs-title-desktop: 20px;
    --scrix-fs-body: 16px;
    --scrix-fs-body-desktop: 16px;
    --scrix-fs-choice: 15px;
    --scrix-fs-choice-desktop: 15px;
    --scrix-fs-cta: 15px;
    --scrix-fs-cta-desktop: 15px;
    --scrix-anim-dur: 420ms;
    --scrix-anim-stagger: 60ms;
    --scrix-anim-amp: 1;
    /* 選択肢の薄い地色（文字色からの混色）。モック準拠 */
    --scrix-choice-bg-color: color-mix(in srgb, var(--scrix-text-color) 5%, transparent);

    /* 外側の余白。運営者情報フッター（.scrix-faq-legal）が負のマージンで端まで広がるときに
       同じ値を使うので変数にしてある（2026-09-08） */
    --scrix-root-pad: 24px;

    /* フォントサイズのブレークポイントは @container で判定（プレビューの縮小実寸でも正しく効く） */
    container-type: inline-size;
    position: relative;
    /* 縦積み（2026-09-08）。stage（カード）の下に運営者情報フッターを置くため column にした。
       それまでは row（justify-content:center で stage を中央に置くだけ）で、root 直下に要素を
       足すとカードの**隣**に並んだ（実機で発生）。横方向の中央寄せは align-items が引き継ぐ。
       stage は flex:1 で余った高さを取り、フッターは常に一番下に来る（min-height:100% の
       公開ページでは画面の最下部・顧客サイトの設置ではカードのすぐ下） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 100%;
    padding: var(--scrix-root-pad);
    box-sizing: border-box;
    /* 背景色はルートに。背景画像はコンテナクエリで desktop 上書きできるよう ::before レイヤに置く */
    background-color: var(--scrix-background-color);
    color: var(--scrix-text-color);
    font-family: var(--scrix-font-family);
    line-height: 1.6;
}

/* 背景画像レイヤ（フルブリード・コンテナクエリで mode を desktop 上書き可能） */
.scrix-root::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--scrix-bg-image);
    background-size: var(--scrix-bg-size);
    background-repeat: var(--scrix-bg-repeat);
    background-position: center;
    pointer-events: none;
}

/* 可読スクリム: 背景画像があり background_scrim=on のときだけ、背景色の半透明を背景画像の上に敷く */
.scrix-root[data-bg-scrim="on"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--scrix-scrim-color);
    pointer-events: none;
    z-index: 0;
}


.scrix-root *,
.scrix-root *::before,
.scrix-root *::after {
    box-sizing: border-box;
}

.scrix-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    /* root（column flex）の余った高さを取る = 以前の row flex で stretch されていたときと同じ高さ
       （.scrix-empty の min-height:100% がこれに依存する） */
    flex: 1 0 auto;
}

/* 運営者情報フッター（2026-09-08）。中身の描画（.scrix-legal-footer）は3製品共通の
   shared/legalFooter.ts が持ち、ここは FAQカードでの「置き方」だけを決める:
   root の一番下・root の余白（--scrix-root-pad）を負のマージンで打ち消して端から端まで。
   Player（faq/Runtime.ts）と Builder のプレビュー（PlayerRuntime.tsx）が同じクラスで同じ場所に置く。
   z-index は stage と同じ 1（root::before の背景画像レイヤ z-index:0 より前に出す） */
.scrix-faq-legal {
    --scrix-legal-accent: var(--scrix-primary-color);
    position: relative;
    z-index: 1;
    flex: none;
    width: calc(100% + var(--scrix-root-pad) * 2);
    max-width: none;
    margin: var(--scrix-root-pad) calc(-1 * var(--scrix-root-pad)) calc(-1 * var(--scrix-root-pad));
}

/* カードの塗りはテーマ項目「カード背景」（card_bg_color）が唯一の決定要因（2026-08-01）。
   透明度を含めてそのまま流し込むので、透明度 0% なら完全に透けて背景画像が見え、
   100% なら不透明になる。**背景画像の有無で切り替えない**（一時期 data-bg-image="on" のとき
   --scrix-background-color で塗る指定を入れていたが、「カード背景」の色・透明度を上書きして
   しまい設定が効かなくなったため撤去した）。
   未設定（「自動」= card_bg_color:""）は塗らない = transparent。 */
.scrix-card {
    background-color: var(--scrix-card-bg-color, transparent);
    /* 中身がカードの端（白い面）に触れないようにする（2026-09-02 やましたさん指示）。
       スマホは画面が狭いので最小限、タブレット / PC は下の @container で広げる。
       **上下も入れる**（2026-09-02 やましたさん指示。文字がカードの上端に触れていた。
       そのぶんカードは縦に伸びる = 内容が多いカードはスクロールが増える） */
    box-sizing: border-box;
    /* 余白は変数で持つ（質問メディアの「余白をなくす」が負のマージンで同じ値を使う・2026-09-09） */
    --scrix-card-pad: 14px;
    padding: var(--scrix-card-pad);
}

/* 質問メディアの余白をなくす（2026-09-09・テーマ question_media_bleed）。カードの左右の端まで広げ、
   並び順でカードの先頭にあるときは上端まで。枠の角丸は外す（カード自体に角丸は無い）。
   **対象は画像と動画だけ**（-visual クラス。音声はコントロールバーで、端まで伸ばすと操作部が
   カードからはみ出して見える）。負のマージンは幅の指定が無い包み（.scrix-question-media）に当てる
   = 中身の width:100% がそのまま広がるため、結果ヒーロー画像のような width の計算を足さずに済む。
   クラスは Builder の QuestionCard と Player の buildQuestionMedia の2コピーが同じ条件で付ける */
.scrix-root[data-media-bleed="on"] .scrix-card .scrix-question-media-visual {
    margin-left: calc(-1 * var(--scrix-card-pad));
    margin-right: calc(-1 * var(--scrix-card-pad));
}

.scrix-root[data-media-bleed="on"] .scrix-card .scrix-question-media-visual:first-child {
    margin-top: calc(-1 * var(--scrix-card-pad));
}

/* 枠の角丸を外し、「中身の幅の上限」（--scrix-content-max-w・PC 600px で中央に置く）も外して
   カードの幅いっぱいに出す（上限が残ると PC で左右に余白が残る・2026-09-09 やましたさん報告） */
.scrix-root[data-media-bleed="on"] .scrix-card .scrix-question-media-visual .scrix-image-container,
.scrix-root[data-media-bleed="on"] .scrix-card .scrix-question-media-visual .scrix-question-video {
    max-width: none;
    border-radius: 0;
}

/* 結果ヒーロー画像の余白をなくす（テーマ result_image_bleed・質問メディアと同じ仕様・2026-09-09）。
   並び順「メディアを先頭」で先頭に来たときは上端まで（質問メディアと同じ） */
.scrix-root[data-result-bleed="on"] .scrix-card .scrix-result-image {
    /* .scrix-image-container は width:100% を持つので、負のマージンだけでは右に余白が残る。幅も余白ぶん広げる */
    width: calc(100% + var(--scrix-card-pad) * 2);
    margin-left: calc(-1 * var(--scrix-card-pad));
    margin-right: calc(-1 * var(--scrix-card-pad));
    max-width: none;
    border-radius: 0;
}

.scrix-root[data-result-bleed="on"] .scrix-card .scrix-result-image:first-child {
    margin-top: calc(-1 * var(--scrix-card-pad));
}

/* 企業ロゴ（ステージ左上・進捗バーより上）。ガイドフォームの .scrix-guided-logo と
   同じ寸法・同じ配置（左寄せ・下に余白）にしてある。ロゴ未設定時はそもそも DOM を作らないため、
   このスタイルは既存の見た目に一切影響しない。 */
.scrix-logo {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 18px;
}

.scrix-logo a {
    display: inline-flex;
}

.scrix-logo-image {
    display: block;
    width: auto;
    max-width: min(220px, 65vw);
    height: auto;
    max-height: 72px;
    object-fit: contain;
}

/* 質問カード */
.scrix-step {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--scrix-primary-color);
}

.scrix-title {
    margin: 0 0 8px;
    font-size: var(--scrix-fs-title);
    font-weight: 700;
}

.scrix-body {
    margin: 0 0 16px;
    font-size: var(--scrix-fs-body);
    opacity: 0.85;
    white-space: pre-wrap;
}

.scrix-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Phase 12: 選択肢レイアウト3モード。mobile=data-cmode を基底に、desktop=data-cmode-d を
   @container(min-width:720px) で上書き（フォントサイズ・背景モードと同じ機構に相乗り）。 */
.scrix-choices[data-cmode="vscroll"] {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
}
.scrix-choices[data-cmode="vscroll"] .scrix-choice {
    scroll-snap-align: start;
}
.scrix-choices[data-cmode="hscroll"] {
    /* 横1列カルーセル。縦に引き伸ばさず内容高（質問直下に置き上下の無駄余白を出さない）。 */
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    align-items: flex-start;
    padding-bottom: 6px;
    /* Phase 12.2: カルーセル領域だけ 640 列より広げる（中央寄せでブレイクアウト・見出しは 640 のまま）。
       利用可能幅(100cqi - 左右padding48)に追従し最大880。全画面までは広げない。 */
    width: min(880px, calc(100cqi - 48px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.scrix-choices[data-cmode="hscroll"] .scrix-choice {
    /* カード幅は表示枚数(peek)から算出。1.2 なら1枚＋次がチラ見え（モック準拠）。 */
    flex: 0 0 calc((100% - var(--scrix-hscroll-peek-gap, 0px)) / var(--scrix-hscroll-peek, 1.2));
    align-self: flex-start;
    scroll-snap-align: start;
}
.scrix-choices[data-cmode="grid"] {
    /* 折り返して敷き詰め・引き伸ばさない（align-items:start）。入らない時は実機でスクロール可。 */
    display: grid;
    grid-template-columns: repeat(var(--scrix-grid-cols, 2), 1fr);
    align-content: start;
    align-items: start;
    overflow-x: visible;
    scroll-snap-type: none;
}

@container (min-width: 720px) {
    .scrix-choices[data-cmode-d="vscroll"] {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
        /* 1列のときは選択肢1つがカード幅いっぱい（スマホ 640px / PC 600px）になり、画像つきだと
           大きなタイルになる。ヒーロー画像と同じ上限（--scrix-content-max-w・
           スマホ 480px / PC 600px）で絞って中央に置く
           （grid は列で割れるため、hscroll は表示枚数で決まるため対象外） */
        max-width: var(--scrix-content-max-w);
        margin-left: auto;
        margin-right: auto;
        /* desktop が hscroll でない場合はブレイクアウトを解除（mobile=hscroll の基底指定を打ち消す） */
        width: auto;
        left: auto;
        transform: none;
    }
    .scrix-choices[data-cmode-d="vscroll"] .scrix-choice {
        flex: 0 1 auto;
    }
    .scrix-choices[data-cmode-d="hscroll"] {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        align-items: flex-start;
        padding-bottom: 6px;
        width: min(880px, calc(100cqi - 48px));
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .scrix-choices[data-cmode-d="hscroll"] .scrix-choice {
        flex: 0 0 calc((100% - var(--scrix-hscroll-peek-gap-d, 0px)) / var(--scrix-hscroll-peek-d, 2.5));
        align-self: flex-start;
        scroll-snap-align: start;
    }
    .scrix-choices[data-cmode-d="grid"] {
        display: grid;
        grid-template-columns: repeat(var(--scrix-grid-cols-d, 2), 1fr);
        align-content: start;
        align-items: start;
        overflow-x: visible;
        scroll-snap-type: none;
        /* desktop が grid の場合はブレイクアウト解除（mobile=hscroll の基底指定を打ち消す） */
        width: auto;
        left: auto;
        transform: none;
    }
}

.scrix-choice {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    font-size: 16px;
    color: var(--scrix-text-color);
    background-color: var(--scrix-choice-bg-color);
    border: var(--scrix-border-width) solid var(--scrix-border-color);
    border-radius: var(--scrix-border-radius);
    box-shadow: var(--scrix-shadow);
    overflow: hidden;
    cursor: pointer;
    transition: background-color var(--scrix-transition-duration) ease, transform 0.1s ease;
    font-family: inherit;
}

.scrix-choice:hover {
    background-color: color-mix(in srgb, var(--scrix-primary-color) 12%, transparent);
}

.scrix-choice:active {
    transform: scale(0.99);
}

/* 選択肢ラベル。span をブロック化して横揃え（text-align）を効かせる
 * （画像なし選択肢ではインラインのままだと text-align が効かないため） */
.scrix-choice-label {
    display: block;
    padding: 13px 15px;
    font-weight: 600;
    font-size: var(--scrix-fs-choice);
    text-align: var(--scrix-label-align);
}

/* 画像つき選択肢の画像+ラベルのまとまり */
.scrix-choice-media {
    display: block;
}

.scrix-choice-media .scrix-image-container {
    margin-bottom: 0;
    border-radius: 0;
    position: relative;
}

/* Phase 11.2: 選択肢カード画像のスクリム（overlay ラベルの可読性向上）。
   濃さは --scrix-choice-img-scrim（0=OFF）。画像のない選択肢には .scrix-choice-media が無いため影響しない。 */
.scrix-choice-media .scrix-image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.7));
    opacity: var(--scrix-choice-img-scrim, 0);
}

/* ラベル縦位置（画像つき選択肢のみ。data-label-pos はルートに付与） */
.scrix-root[data-label-pos="below"] .scrix-choice-media {
    display: flex;
    flex-direction: column;
}

.scrix-root[data-label-pos="above"] .scrix-choice-media {
    display: flex;
    flex-direction: column-reverse;
}

.scrix-root[data-label-pos="overlay"] .scrix-choice-media {
    position: relative;
}

.scrix-root[data-label-pos="overlay"] .scrix-choice-media .scrix-choice-label {
    position: absolute;
    left: 0;
    right: 0;
    color: #ffffff;
    padding: 20px 15px 12px;
}

/* overlay の画像内 縦揃え（上/中/下） */
.scrix-root[data-label-pos="overlay"][data-label-valign="bottom"] .scrix-choice-media .scrix-choice-label {
    bottom: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
}

.scrix-root[data-label-pos="overlay"][data-label-valign="top"] .scrix-choice-media .scrix-choice-label {
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.62), transparent);
}

.scrix-root[data-label-pos="overlay"][data-label-valign="center"] .scrix-choice-media .scrix-choice-label {
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* スコアチップ（回答者向け・show_score で出し分け。送信スコアには無関係） */
.scrix-score-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 15px 11px;
}

.scrix-score-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--scrix-primary-color);
    border: 1px solid color-mix(in srgb, var(--scrix-primary-color) 45%, transparent);
    border-radius: 999px;
    padding: 2px 10px;
}

/* 画像コンテナ（選択肢・質問メディア・結果ヒーロー共通の骨）。
   既定値は選択肢画像の枠で、質問メディアと結果ヒーローは下でそれぞれの変数に差し替える。 */
.scrix-image-container {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    aspect-ratio: var(--scrix-choice-img-aspect, 1 / 1);
    background-color: var(--scrix-choice-img-bg, transparent);
    border-radius: var(--scrix-border-radius);
    overflow: hidden;
}

.scrix-image-container img {
    width: 100%;
    height: 100%;
    object-fit: var(--scrix-choice-img-fit, cover);
    display: block;
}

/* 質問メディア（画像/動画/音声・本文の下・選択肢の上・2026-07-25） */
.scrix-question-media {
    margin: 0 0 14px;
}

/* 質問メディア（1枚だけ出る画像）は選択肢画像とは別の枠を使う。
   既定（元のまま）は aspect-ratio:auto / height:auto で本来の比率のまま出し、
   高さだけ max-height で頭打ちにする（縦長画像が画面を占有して選択肢が押し出されるのを防ぐ）。
   比率を指定したときは枠を固定し、height:100% + object-fit で収める。値は theme.ts の
   mediaFrameVars が作る。 */
.scrix-question-media .scrix-image-container {
    aspect-ratio: var(--scrix-qmedia-aspect, auto);
    background-color: var(--scrix-qmedia-bg, transparent);
    margin-bottom: 0;
}

.scrix-question-media .scrix-image-container img {
    height: var(--scrix-qmedia-h, auto);
    max-height: var(--scrix-qmedia-max-h, none);
    object-fit: var(--scrix-qmedia-fit, contain);
}

/* 動画も画像と同じ枠に従う（音声はコントロールバーだけなので対象外）。
   コンテナを持たないため、比率・上限・収め方を要素自身に当てる。 */
.scrix-question-video {
    display: block;
    width: 100%;
    aspect-ratio: var(--scrix-qmedia-aspect, auto);
    max-height: var(--scrix-qmedia-max-h, none);
    object-fit: var(--scrix-qmedia-fit, contain);
    border-radius: var(--scrix-border-radius);
    background-color: var(--scrix-qmedia-bg, transparent);
}

.scrix-question-audio {
    display: block;
    width: 100%;
}

/* 結果カード */
/* 結果ヒーロー画像（Phase 13: テーマ角丸に依存しない固定角丸。選択肢画像と分離）。
   枠の扱いは質問メディアと同じ（既定は元の比率のまま・高さ上限つき）。 */
.scrix-result-image {
    margin-bottom: 12px;
    border-radius: 12px;
    aspect-ratio: var(--scrix-result-img-aspect, auto);
    background-color: var(--scrix-result-img-bg, transparent);
}

.scrix-result-image img {
    height: var(--scrix-result-img-h, auto);
    max-height: var(--scrix-result-img-max-h, none);
    object-fit: var(--scrix-result-img-fit, contain);
}

/* ヒーロー画像（質問・回答）は上限を超えたら中央に置く。高さではなく幅を絞るのは、
   比率を指定したときにも同じ1つの手当てで効かせるため。
   上限は --scrix-content-max-w（**スマホ 480px / タブレット・PC 600px**）。
   2026-09-02 以前は 480px 固定で「ブレークポイントで切り替えない」方針だったが、PC のコンテンツ幅を
   広げたのに合わせて @container (min-width: 720px) で切り替えるようにした。**判定はカードの幅**なので、
   480〜719px の端末（小型タブレット・スマホ横向き）は従来どおり 480px のまま = 大きすぎにならない。
   選択肢画像は列で並ぶため対象外、音声はコントロールバーなので対象外。 */
.scrix-question-media .scrix-image-container,
.scrix-question-video,
.scrix-result-image {
    max-width: var(--scrix-content-max-w);
    margin-left: auto;
    margin-right: auto;
}

.scrix-result-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}

.scrix-score {
    margin-top: 16px;
    font-size: 14px;
    opacity: 0.6;
}

/* Phase 13: 複数CTA（sort_order 昇順で縦積み） */
.scrix-cta-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    /* CTA どうしの間隔。9px だと縦に並べたとき詰まって見えた（2026-09-02 やましたさん指示）。
       タブレット / PC は下の @container でもう少し広げる */
    gap: 14px;
}

/* ボタンCTA。角丸は variant 側で持つ（テーマ角丸 --scrix-border-radius に依存しない＝結果側の剥がし）。
   幅は画面に合わせる（2026-09-02 やましたさん指示）: スマホは 90%（左右に少し余白を残す）、
   PC はカードが広くなったぶん横に伸びすぎるので上限を置いて中央に。値は変数1つで持つ */
.scrix-cta-button {
    display: block;
    width: var(--scrix-cta-width, 90%);
    max-width: var(--scrix-cta-max-w, 100%);
    margin-left: auto;
    margin-right: auto;
    padding: 12px 24px;
    font-size: var(--scrix-fs-cta);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--scrix-cta-text-color, #ffffff);
    background-color: var(--scrix-primary-color);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
}

.scrix-root[data-cta-variant="solid_square"] .scrix-cta-button {
    border-radius: 0;
}

.scrix-root[data-cta-variant="outline"] .scrix-cta-button {
    background-color: transparent;
    color: var(--scrix-primary-color);
    border: 1.6px solid var(--scrix-primary-color);
    border-radius: 10px;
}

.scrix-root[data-cta-variant="soft"] .scrix-cta-button {
    background-color: color-mix(in srgb, var(--scrix-primary-color) 14%, transparent);
    color: var(--scrix-primary-color);
    border-radius: 12px;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--scrix-primary-color) 22%, transparent);
}

/* 画像バナーCTA（画像全体がリンク）。表示形式は --scrix-cta-image-*（選択肢画像とは別変数）。 */
.scrix-cta-banner {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: var(--scrix-cta-image-aspect, 16 / 9);
    background-color: var(--scrix-cta-image-bg, #f9fafb);
}

.scrix-cta-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: var(--scrix-cta-image-fit, cover);
}

/* CTA画像スクリム（重ねラベルの可読性向上・任意ON/濃さ%）。
   濃さは --scrix-cta-img-scrim（0=OFF）。グラデの向きは data-cta-valign に追従する
   （下→下を濃く / 上→上を濃く / 中央→中央を濃く）。質問側の選択肢スクリムを流用。 */
.scrix-cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--scrix-cta-img-scrim, 0);
}
.scrix-root[data-cta-valign="bottom"] .scrix-cta-banner::after {
    background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.7));
}
.scrix-root[data-cta-valign="top"] .scrix-cta-banner::after {
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent 60%);
}
.scrix-root[data-cta-valign="center"] .scrix-cta-banner::after {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7) 50%, transparent);
}

/* オーバーレイラベル（label_overlay=true のときのみ描画）。位置は data-cta-valign/align で出し分け。
   縁取り(text-shadow)は質問カードの選択肢ラベル overlay と同値を流用し、サイズ・背景に関わらず
   白背景に白文字でも下限の可読性を確保する（全 valign に常時適用）。スクリムは追加の可読性手段。 */
.scrix-cta-banner-label {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 14px 16px;
    color: #ffffff;
    font-weight: 800;
    font-size: var(--scrix-fs-cta);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.scrix-root[data-cta-align="left"] .scrix-cta-banner-label {
    text-align: left;
}
.scrix-root[data-cta-align="center"] .scrix-cta-banner-label {
    text-align: center;
}
.scrix-root[data-cta-align="right"] .scrix-cta-banner-label {
    text-align: right;
}

.scrix-root[data-cta-valign="bottom"] .scrix-cta-banner-label {
    bottom: 0;
}
.scrix-root[data-cta-valign="top"] .scrix-cta-banner-label {
    top: 0;
}
.scrix-root[data-cta-valign="center"] .scrix-cta-banner-label {
    top: 50%;
    transform: translateY(-50%);
}

/* もう一度 / 閉じる（下部中央・横並び・ともに角丸なし）。
   上の要素（シェア）との間隔は 2026-09-02 に 14px → 24px（タブレット / PC は下の @container で 32px） */
.scrix-result-actions {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 24px;
}

.scrix-restart,
.scrix-close {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--scrix-text-color);
    background-color: transparent;
    border: 1px solid var(--scrix-text-color);
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Phase 14: 結果シェア（モバイル=単一ボタン / デスクトップ=個別アイコン列） */
.scrix-share {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* CTA との間隔（2026-09-02 に 18px → 28px。タブレット / PC は下の @container で 36px） */
    margin-top: 28px;
}

.scrix-share-webshare {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-family: inherit;
    color: var(--scrix-text-color);
    background-color: transparent;
    border: 1px solid var(--scrix-text-color);
    border-radius: 999px;
    cursor: pointer;
}

.scrix-share-webshare .scrix-share-ico {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.scrix-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--scrix-text-color);
    background-color: transparent;
    border: 1px solid var(--scrix-text-color);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.85;
}

.scrix-share-btn:hover,
.scrix-share-webshare:hover {
    opacity: 1;
}

.scrix-share-btn svg,
.scrix-share-webshare svg {
    width: 18px;
    height: 18px;
    display: block;
}

.scrix-back {
    margin-top: 16px;
    font-size: 14px;
    color: var(--scrix-text-color);
    background: none;
    border: none;
    padding: 0;
    opacity: 0.7;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

.scrix-back:hover {
    opacity: 1;
}

.scrix-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 24px;
}

/* アニメーション（data-transition 属性で切替・key 再マウントで再生） */
.scrix-card[data-transition="fade"] {
    animation: scrix-fade-in var(--scrix-transition-duration) ease-out;
}

.scrix-card[data-transition="slide"] {
    animation: scrix-slide-in calc(var(--scrix-transition-duration) + 50ms) ease-out;
}

@keyframes scrix-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scrix-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Phase 11: 演出 ===== */

/* 進捗バー */
.scrix-progress {
    margin-bottom: 18px;
}

.scrix-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

.scrix-progress-q {
    color: var(--scrix-primary-color);
    font-weight: 800;
    font-size: 13px;
}

/* 左の表記に続ける固定テキスト（例:「あと3問 で特典がもらえます」・2026-09-09）。表記は主色・文は文字色 */
.scrix-progress-q .scrix-progress-text {
    margin-left: 4px;
    color: var(--scrix-text-color);
    font-weight: 600;
}

.scrix-progress-nm {
    /* 左の表記が無いときも右端に置く */
    margin-left: auto;
    color: var(--scrix-text-color);
    opacity: 0.62;
    font-size: 12px;
    font-weight: 600;
}

/* バー本体とゴールのアイコンを横に並べる行（2026-09-09） */
.scrix-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scrix-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--scrix-text-color) 14%, transparent);
    overflow: hidden;
}

.scrix-progress-track-thin {
    height: 3px;
}

.scrix-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--scrix-primary-color);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 形: 区切り（問数ぶんの短いバー） */
.scrix-progress-segs {
    display: flex;
    flex: 1;
    gap: 5px;
}

.scrix-progress-seg {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--scrix-text-color) 14%, transparent);
}

.scrix-progress-seg.is-done {
    background: var(--scrix-primary-color);
}

/* いま答えている問題の区切り（2026-09-09）。答え終わった分より薄く塗り、最後の質問を
   表示しただけで全部が埋まって見えないようにする（点の .is-now と同じ考え方） */
.scrix-progress-seg.is-now {
    background: color-mix(in srgb, var(--scrix-primary-color) 45%, transparent);
}

/* 形: 番号つきの点（問数が多いときは Runtime が区切りに読み替える・effectiveProgressShape） */
.scrix-progress-dots {
    display: flex;
    flex: 1;
    align-items: center;
}

.scrix-progress-dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--scrix-text-color) 14%, transparent);
    color: color-mix(in srgb, var(--scrix-text-color) 60%, transparent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.scrix-progress-dot.is-done {
    border-color: var(--scrix-primary-color);
    background: var(--scrix-primary-color);
    color: var(--scrix-cta-text-color, #ffffff);
}

.scrix-progress-dot.is-now {
    border-color: var(--scrix-primary-color);
    color: var(--scrix-primary-color);
}

.scrix-progress-link {
    flex: 1;
    height: 2px;
    background: color-mix(in srgb, var(--scrix-text-color) 14%, transparent);
}

.scrix-progress-link.is-done {
    background: var(--scrix-primary-color);
}

/* ゴールのアイコン（最後の質問に到達すると主色になる） */
.scrix-progress-goal {
    flex: none;
    width: 18px;
    height: 18px;
    color: color-mix(in srgb, var(--scrix-text-color) 35%, transparent);
    transition: color 0.3s ease, transform 0.3s ease;
}

.scrix-progress-goal.is-lit {
    color: var(--scrix-primary-color);
    transform: scale(1.12);
}

/* 選択肢の入場アニメーション（data-anim はルートに付与・stagger は nth-child） */
.scrix-root[data-anim] .scrix-choices .scrix-choice {
    opacity: 0;
    animation-duration: var(--scrix-anim-dur);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
    animation-fill-mode: forwards;
}

.scrix-root[data-anim="none"] .scrix-choices .scrix-choice {
    opacity: 1;
    animation: none;
}

.scrix-root[data-anim="fade"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-fade;
}
.scrix-root[data-anim="slide"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-slide;
}
.scrix-root[data-anim="slideleft"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-slideleft;
}
.scrix-root[data-anim="slideup"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-slideup;
}
.scrix-root[data-anim="slidedown"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-slidedown;
}
.scrix-root[data-anim="scale"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-scale;
}
.scrix-root[data-anim="pop"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-pop;
}
.scrix-root[data-anim="blur"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-blur;
}
.scrix-root[data-anim="flip"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-flip;
}
.scrix-root[data-anim="bounce"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-bounce;
}
.scrix-root[data-anim="slidefade"] .scrix-choices .scrix-choice {
    animation-name: scrix-anim-slidefade;
}

.scrix-choices .scrix-choice:nth-child(1) {
    animation-delay: calc(var(--scrix-anim-stagger) * 0);
}
.scrix-choices .scrix-choice:nth-child(2) {
    animation-delay: calc(var(--scrix-anim-stagger) * 1);
}
.scrix-choices .scrix-choice:nth-child(3) {
    animation-delay: calc(var(--scrix-anim-stagger) * 2);
}
.scrix-choices .scrix-choice:nth-child(4) {
    animation-delay: calc(var(--scrix-anim-stagger) * 3);
}
.scrix-choices .scrix-choice:nth-child(5) {
    animation-delay: calc(var(--scrix-anim-stagger) * 4);
}
.scrix-choices .scrix-choice:nth-child(6) {
    animation-delay: calc(var(--scrix-anim-stagger) * 5);
}

/* keyframes（モック v3 準拠・振り幅は --scrix-anim-amp で乗算・全種終端 opacity:1 を保証） */
@keyframes scrix-anim-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scrix-anim-slide {
    from { opacity: 0; transform: translateX(calc(60px * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: none; }
}
@keyframes scrix-anim-slideleft {
    from { opacity: 0; transform: translateX(calc(-60px * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: none; }
}
@keyframes scrix-anim-slideup {
    from { opacity: 0; transform: translateY(calc(50px * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: none; }
}
@keyframes scrix-anim-slidedown {
    from { opacity: 0; transform: translateY(calc(-50px * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: none; }
}
@keyframes scrix-anim-scale {
    from { opacity: 0; transform: scale(calc(1 - 0.22 * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes scrix-anim-pop {
    0% { opacity: 0; transform: scale(calc(1 - 0.25 * var(--scrix-anim-amp))); }
    70% { opacity: 1; transform: scale(calc(1 + 0.08 * var(--scrix-anim-amp))); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes scrix-anim-blur {
    from { opacity: 0; filter: blur(calc(12px * var(--scrix-anim-amp))); }
    to { opacity: 1; filter: blur(0); }
}
@keyframes scrix-anim-flip {
    from { opacity: 0; transform: perspective(600px) rotateX(calc(55deg * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: none; }
}
@keyframes scrix-anim-bounce {
    0% { opacity: 0; transform: translateY(calc(60px * var(--scrix-anim-amp))); }
    60% { opacity: 1; transform: translateY(calc(-12px * var(--scrix-anim-amp))); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes scrix-anim-slidefade {
    from { opacity: 0; transform: translateX(calc(90px * var(--scrix-anim-amp))); }
    to { opacity: 1; transform: none; }
}

/* デスクトップ幅でフォントサイズ・背景モードを desktop 値へ上書き（コンテナ幅基準）。
 * §4 修正: 基底の font-size 規則より後ろに置きソース順で desktop を勝たせる。
 * 720px = タブレット実寸 768px − ルート左右 padding 48px。 */
@container (min-width: 720px) {
    /* タブレット / PC の見え方（2026-09-02 やましたさん指示）。
       **@media ではなく @container** で判定する = Builder の「スマホ」プレビュー（幅 390px の枠）に
       PC の値が入らない（ブラウザ幅ではなくカードの幅で決まる・2026-09-02 レビュー指摘）。
       変数は .scrix-root に置けない（コンテナは自分自身を指定できない）ので .scrix-stage に置き、
       子へ継承させる */
    .scrix-stage {
        /* 器（カード幅）と中身の上限を同じ 600px にする（2026-09-09 やましたさん指示）。
           それまでは 器 900px / 中身 720px で、余白なし ON のヒーローがカード幅いっぱい
           （1:1 で 900×900）になり PC で大きすぎた。同日にまず 720px（スワイプLPの
           「文字で作るパネル」の中身と同値）へ狭めたが、720px はタブレット実寸 768px の
           ほぼ全幅（左右に root の余白 24px しか残らない）でカードに見えず、PC でもまだ
           大きかったため 600px にした。タブレットで左右 84px ずつの地が出て、
           本文も1行 37字前後に収まる。
           **数値は --scrix-content-max-w が正**で max-width はそれを参照する（同じ数字を
           2つ持たない = 幅を変えるときはこの1箇所だけ直す） */
        --scrix-content-max-w: 600px;
        max-width: var(--scrix-content-max-w);
        /* ボタンCTA: 幅いっぱいだと横に長すぎるので上限を置く（中央寄せ） */
        --scrix-cta-width: 100%;
        --scrix-cta-max-w: 420px;
    }

    /* カードの内側の余白（文字がカードの端に触れていた）。スマホは 14px */
    .scrix-card {
        --scrix-card-pad: 32px;
    }

    /* CTA どうしの間隔も広げる（スマホは 14px のまま） */
    .scrix-cta-list {
        gap: 20px;
    }

    /* CTA → シェア → もう一度 / 閉じる の間隔（スマホは 28px / 24px） */
    .scrix-share {
        margin-top: 36px;
    }

    .scrix-result-actions {
        margin-top: 32px;
    }

    .scrix-title {
        font-size: var(--scrix-fs-title-desktop);
    }
    .scrix-body {
        font-size: var(--scrix-fs-body-desktop);
    }
    .scrix-choice-label {
        font-size: var(--scrix-fs-choice-desktop);
    }
    .scrix-cta-button,
    .scrix-cta-banner-label {
        font-size: var(--scrix-fs-cta-desktop);
    }
    .scrix-root::before {
        background-size: var(--scrix-bg-size-desktop);
        background-repeat: var(--scrix-bg-repeat-desktop);
    }
}

/* 画像なし選択肢は全幅ボタン（縦位置は無効・横揃えのみ・高さを揃える min-height） */
.scrix-choice-text {
    min-height: 54px;
    display: flex;
    align-items: center;
}
.scrix-choice-text .scrix-choice-label {
    width: 100%;
}

/* 診断中ローディング（最後の回答→結果の間だけ表示）。
   position: fixed でビューポート基準に覆う（absolute だとルート全高=長いページで
   スピナーが画面外＝折り返しの下に来て見えなくなるため）。
   プレビューは ScaledFrame の transform 祖先が fixed の包含ブロックになり、
   従来どおり縮小枠内に収まって見える（実 Player のみビューポート基準になる）。 */
.scrix-loading {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: var(--scrix-background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.scrix-loading-text {
    color: var(--scrix-text-color);
    opacity: 0.62;
    font-size: 14px;
    font-weight: 600;
}

.scrix-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--scrix-text-color) 18%, transparent);
    border-top-color: var(--scrix-primary-color);
    animation: scrix-spin 0.8s linear infinite;
}
@keyframes scrix-spin {
    to { transform: rotate(360deg); }
}

.scrix-dots {
    display: flex;
    gap: 8px;
}
.scrix-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--scrix-primary-color);
    animation: scrix-bounce 1s infinite;
}
.scrix-dots span:nth-child(2) { animation-delay: 0.15s; }
.scrix-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes scrix-bounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.scrix-lbar {
    width: 160px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--scrix-text-color) 16%, transparent);
    overflow: hidden;
}
.scrix-lbar::after {
    content: "";
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: var(--scrix-primary-color);
    animation: scrix-indet 1.1s ease-in-out infinite;
}
@keyframes scrix-indet {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

.scrix-pulse {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--scrix-primary-color);
    animation: scrix-pul 1s ease-in-out infinite;
}
@keyframes scrix-pul {
    0%, 100% { transform: scale(0.82); opacity: 0.6; }
    50% { transform: scale(1); opacity: 1; }
}

/* reduced-motion: 本スライスで増やすアニメを停止・縮退（待ち時間は JS 側で維持） */
@media (prefers-reduced-motion: reduce) {
    .scrix-root[data-anim] .scrix-choices .scrix-choice {
        opacity: 1;
        animation: none;
    }
    .scrix-progress-bar {
        transition: none;
    }
    .scrix-spinner,
    .scrix-dots span,
    .scrix-lbar::after,
    .scrix-pulse {
        animation: none;
    }
}


/* 出口（プロダクト統合・2026-07-12）: 結果カードの CTA 下に表示するフォーム / LINE */
.scrix-exit-form {
    margin-top: 16px;
}

/* LINE出口の配置ラッパー。見た目（見出し・QR・緑ボタン）は共通部品（player: shared/lineBlock.ts /
   builder: lib/lineBlock.ts のコピー）が注入する .scrix-line-* が担い、ここは結果カード内の
   余白だけを持つ（2026-08-02 共通部品化。旧 .scrix-exit-line-message / -btn は削除） */
.scrix-exit-line {
    margin-top: 16px;
}