/*
 * 応援メッセージ画面（Figma: S70_message_応援メッセージ_中１以上の場合_PC/SP）専用スタイル。
 * 共通コンポーネントのスタイルは parkx-ui.css を参照。
 */
 .parkx-content {
    gap: var(--parkx-space-32);
}
/* ---------------------------------------------------------------- */
/* ヒーロー（見出し＋キャラクター） */
/* ---------------------------------------------------------------- */
.parkx-ouen-hero {
    display: flex;
    justify-content: center;
    padding: var(--parkx-space-24) 0 0;
}

/* ヒーローは1枚絵（hero.png、原寸1208x319=@2x相当）。原寸を超えて拡大しないよう
   max-width を等倍幅にし、狭い画面では width:100% で縮小する。 */
.parkx-ouen-hero__image {
    display: block;
    width: 100%;
    max-width: 604px;
    height: auto;
}

/* ---------------------------------------------------------------- */
/* プレゼント（hero直下の1枚絵） */
/* ---------------------------------------------------------------- */
.parkx-ouen-present {
    display: flex;
    justify-content: center;
    padding: var(--parkx-space-16) 0 0;
}

.parkx-ouen-present__image {
    display: block;
    width: 100%;
    max-width: 604px;
    height: auto;
}

/* ---------------------------------------------------------------- */
/* 応募方法ステップガイド */
/* ---------------------------------------------------------------- */
.parkx-step-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
}

.parkx-step-guide__label {
    display: inline-block;
    background: var(--parkx-color-survey);
    color: #fff;
    font-weight: 900;
    font-size: var(--parkx-text-lg);
    letter-spacing: 0.1em;
    border-radius: var(--parkx-radius-xl);
    padding: var(--parkx-space-4) var(--parkx-space-40);
}

.parkx-step-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: var(--parkx-space-24);
    column-gap: var(--parkx-space-8);
    width: 100%;
}

.parkx-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-16);
    width: 208px;
    padding: var(--parkx-space-16) var(--parkx-space-8);
    background: var(--parkx-color-surface-subtle);
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-md);
}

.parkx-step-item.is-done {
    background: #f2fbeb;
    border-color: var(--parkx-color-success);
}

.parkx-step-item__num-row {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-4);
    width: 100%;
}

.parkx-step-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--parkx-radius-full);
    background: var(--parkx-color-survey);
    color: #fff;
    font-size: var(--parkx-text-sm);
    font-weight: 900;
}

.parkx-step-item.is-done .parkx-step-item__num {
    background: var(--parkx-color-success);
}

.parkx-step-item__text {
    min-width: 0;
    text-align: left;
    font-size: var(--parkx-text-sm);
    font-weight: 900;
    color: var(--parkx-color-text);
}

.parkx-step-item__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
}

.parkx-step-item__icon img:first-child {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.parkx-step-item__prize-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: auto;
    transform: translate(-50%, -50%) rotate(-11.9deg);
}

.parkx-step-item__prize-star {
    position: absolute;
    width: 20px;
    height: auto;
}

.parkx-step-item__prize-star--1 {
    left: 0;
    top: 4px;
}

.parkx-step-item__prize-star--2 {
    left: 67px;
    top: 65px;
    transform: rotate(180deg);
}

.parkx-step-item__check {
    position: absolute;
    left: 56px;
    top: -12px;
    width: 53px;
    height: 53px;
}

/* Figma実データの矢印画像(156x22のキャンバスに小さな三角形1つだけ)は
   そのまま縮小すると見えなくなるほど小さくなるため、CSSの三角形で代用する。 */
.parkx-step-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 156px;
}

.parkx-step-arrow::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 11px solid var(--parkx-color-sponsor);
}

/* ---------------------------------------------------------------- */
/* 応援企業テーブル（企業ごとのゲーム／応援メッセージ／アンケート状況） */
/* ---------------------------------------------------------------- */
.parkx-ouen-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.parkx-ouen-table__row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.parkx-ouen-table__row--head {
    padding-bottom: var(--parkx-space-8);
}

.parkx-ouen-table__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-12);
    border-right: 1px solid var(--parkx-color-border);
    text-align: center;
    min-width: 0;
    overflow: hidden;
}

.parkx-ouen-table__cell:last-child {
    border-right: none;
}

.parkx-ouen-table__cell--name {
    flex: 0 0 224px;
    flex-direction: row;
    align-items: center;
    text-align: left;
}

/* 【改修依頼 04】アンケート列を一時的に非表示にした間のレイアウト調整。
   PC は各列が固定px幅（flex: 0 0 <px>）で右にアンケート列分の余白が余るため、
   会社名列にその分（120px）を足して埋める。 */
.parkx-ouen-table--survey-hidden .parkx-ouen-table__cell--name {
    flex-basis: 344px;
}

.parkx-ouen-table__row--head .parkx-ouen-table__cell {
    border-right: none;
}

.parkx-ouen-table__cell--game {
    flex: 0 0 208px;
}

.parkx-ouen-table__cell--message,
.parkx-ouen-table__cell--survey {
    flex: 0 0 120px;
    justify-content: flex-start;
    padding-top: 40px;
}

.parkx-ouen-table__row--head .parkx-ouen-table__cell--message,
.parkx-ouen-table__row--head .parkx-ouen-table__cell--survey {
    justify-content: center;
    padding-top: var(--parkx-space-12);
}

.parkx-ouen-table__col-title {
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.parkx-ouen-table__col-title--game {
    color: var(--parkx-color-sponsor);
}

.parkx-ouen-table__col-title--message {
    color: var(--parkx-color-sponsor-yell);
}

.parkx-ouen-table__col-title--survey {
    color: var(--parkx-color-survey);
}

/* SP版は共通のヘッダー行を出さず、各行のセル内にラベルを個別表示するため、
   PC表示ではこのラベルを隠す（SPのメディアクエリ側で表示に切り替える）。 */
.parkx-ouen-table__cell-label {
    display: none;
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    letter-spacing: 0.1em;
}

.parkx-ouen-table__cell-label--message {
    color: var(--parkx-color-sponsor-yell);
}

.parkx-ouen-table__cell-label--survey {
    color: var(--parkx-color-survey);
}

.parkx-ouen-table__logo {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--parkx-radius-full);
    border: 0.4px solid #eee;
    background: #fff;
    object-fit: contain;
    padding: 4px;
    margin-right: var(--parkx-space-8);
}

.parkx-ouen-table__company-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    color: var(--parkx-color-text);
}

.parkx-ouen-table__game-title {
    /* ゲームタイトルは本文2行まで表示し、溢れは切る。
       -webkit-line-clamp は使わない: Safari ではルビ(rt)が別の注釈行として
       カウントされ、clamp:2 が「ルビ1行＋本文1行」になり本文が1行しか出ない。
       プレーンな block + max-height + overflow:hidden なら、ルビは各行の
       行ボックス内に収まり別行カウントされないため、ルビ有無に関わらず
       本文2行で安定する。line-height はルビが行内に収まる高さにする。
       max-height = line-height × 2 行 = 1.9em × 2 = 3.8em。 */
    display: flex;
    align-items: center;
    max-width: 100%;
    max-height: 3.8em;
    overflow: hidden;
    word-break: break-word;
    font-weight: 900;
    font-size: var(--parkx-text-xs);
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: var(--parkx-color-sponsor);
    text-align: center;
}

.parkx-ouen-table__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-4);
    width: 100%;
    height: 32px;
    border: 1px solid transparent;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    /* 「解放する」は <a> で描画するため下線を消す（ボタン群と見た目を揃える）。 */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    margin-top: auto;
}

.parkx-ouen-table__btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.parkx-ouen-table__btn.is-locked img {
    width: 14px;
    height: 20px;
}

/* ゲームボタンは常にアンバー色・角丸4px（未クリアでも再プレイ可能） */
.parkx-ouen-table__btn--game {
    padding: var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-sponsor);
    border-color: var(--parkx-color-sponsor);
    border-radius: 4px;
    text-decoration: none;
}

.parkx-ouen-table__btn--game img {
    width: 24px;
    height: 24px;
}

/* 応援メッセージ／アンケートのボタンは3状態
   （ロック中＝ゲーム未クリア／実行可能＝ゲーム済み・未実施／完了＝送信・回答済み）で
   色とアイコンが変わる。デフォルトは「実行可能」状態。 */
.parkx-ouen-table__btn--yell {
    padding: var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-sponsor-yell);
    border-color: var(--parkx-color-sponsor-yell);
    border-radius: 4px;
}

.parkx-ouen-table__btn--survey {
    padding: var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-survey);
    border-color: var(--parkx-color-survey);
    border-radius: 4px;
}

.parkx-ouen-table__btn--yell.is-done,
.parkx-ouen-table__btn--survey.is-done {
    background: var(--parkx-color-success);
    border-color: var(--parkx-color-success);
    border-radius: var(--parkx-radius-full);
}

.parkx-ouen-table__btn--yell.is-locked,
.parkx-ouen-table__btn--survey.is-locked {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-border-inactive);
    color: var(--parkx-color-border-inactive);
    border-radius: var(--parkx-radius-full);
}

.parkx-ouen-table__btn:disabled {
    cursor: not-allowed;
}

.parkx-ouen-table__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* クリア済み/送信済み/回答済みが無いセルにも同じ高さの空スロットを置き、
       ボタン（margin-top:auto で下寄せ）の位置を3列で揃える。 */
    height: 20px;
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    color: var(--parkx-color-success);
    white-space: nowrap;
}

.parkx-ouen-table__status img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* SP版（Figma: S70_message_応援メッセージ_中１以上の場合_SP）は表ではなく、
   企業名の行＋ゲーム／応援メッセージ／アンケートを横並び3等分にしたカード形式。
   共通のヘッダー行は出さず、各カードのセル内に個別ラベルを表示する。 */
@media screen and (max-width: 1024px) {
    .parkx-ouen-table__game-title,
    .parkx-ouen-table__cell-label {
        height: 36px;
    }

    .parkx-ouen-table__row--head {
        display: none;
    }

    .parkx-ouen-table__row {
        flex-wrap: wrap;
        padding-bottom: var(--parkx-space-4);
        border-bottom: 1px solid var(--parkx-color-border);
    }

    .parkx-ouen-table__cell {
        border-right: none;
        padding: var(--parkx-space-8);
    }

    .parkx-ouen-table__cell--name,
    /* 【改修依頼 04】PC用の `.parkx-ouen-table--survey-hidden .parkx-ouen-table__cell--name`
       （flex-basis:344px、詳細度2クラス）がSP用の1クラスセレクタより詳細度が高く、
       SP表示でも上書きされず会社名セルが344px固定のまま残ってしまうため、
       同じ詳細度で明示的に上書きする。 */
    .parkx-ouen-table--survey-hidden .parkx-ouen-table__cell--name {
        flex: 0 0 100%;
        padding: var(--parkx-space-8) var(--parkx-space-4);
    }

    .parkx-ouen-table__cell--game,
    .parkx-ouen-table__cell--message,
    .parkx-ouen-table__cell--survey {
        flex: 1 1 0;
        padding-top: var(--parkx-space-8);
    }

    /* 【改修依頼 04】アンケート列を一時的に非表示にした間のレイアウト調整。
       SPは横並び3等分（flex:1 1 0）のため、アンケート列を消しただけだと単に
       ゲーム/応援メッセージが均等2等分になってしまう。ゲーム列だけ広げ、
       応援メッセージ列は元の1/3相当の幅を保つ（2:1で分割）。 */
    .parkx-ouen-table--survey-hidden .parkx-ouen-table__cell--game {
        flex: 2 1 0;
    }

    .parkx-ouen-table--survey-hidden .parkx-ouen-table__cell--message {
        flex: 1 1 0;
    }

    /* ゲームタイトルが2行になり得るため、応援メッセージ／アンケートのラベルも
       同じ2行分の高さを確保し、1行の文字を上下中央に置いて3列のボタン位置を揃える。
       font-size/line-height はゲームタイトル（SP: 11px / 1.3）に合わせる。 */
    .parkx-ouen-table__cell-label {
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 11px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .parkx-ouen-table__logo {
        width: 24px;
        height: 24px;
        margin-right: var(--parkx-space-4);
    }

    .parkx-ouen-table__company-name {
        font-size: var(--parkx-text-sm);
    }

    .parkx-ouen-table__game-title {
        font-size: 11px;
    }

    .parkx-ouen-table__btn {
        height: 24px;
    }

    .parkx-ouen-table__btn img {
        width: 16px;
        height: 16px;
    }

    .parkx-ouen-table__btn.is-locked img {
        width: 11px;
        height: 16px;
    }

    .parkx-ouen-table__status {
        font-size: 11px;
        text-align: center;
    }

    .parkx-ouen-table__status img {
        width: 16px;
        height: 16px;
    }
}

@media screen and (max-width: 1024px) {
    /* スマホでは1枚絵を画面幅より大きく（125%）見せ、中央寄せではみ出しを隠す。
       親は display:flex + justify-content:center（基本ルール）なので、画像を
       縮ませない（flex-shrink:0）だけで左右均等にはみ出して中央に揃う。 */
    .parkx-content {
        overflow: hidden;
    }

    .parkx-ouen-hero {
        padding: 18px 0 0;\
    }

    .parkx-ouen-hero__image {
        width: 125%;
        max-width: none;
        flex-shrink: 0;
    }

    /* Figma実データ（stepItem--SP）では、各ステップは104px幅の小さいカードで、
       3つ→2つの2段に折り返して中央寄せされる（矢印は下向きではなく右向きのまま）。 */
    .parkx-step-list {
        row-gap: var(--parkx-space-16);
        column-gap: var(--parkx-space-4);
    }

    .parkx-step-item {
        position: relative;
        width: 104px;
        gap: var(--parkx-space-4);
        padding: var(--parkx-space-16) var(--parkx-space-8) var(--parkx-space-8);
        border-radius: var(--parkx-radius-md);
    }

    .parkx-step-item__num-row {
        justify-content: center;
    }

    .parkx-step-item__num {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .parkx-step-item__text {
        text-align: center;
        font-size: var(--parkx-text-xs);
        line-height: 1.25;
    }

    .parkx-step-item__icon {
        width: 24px;
        height: 24px;
    }

    .parkx-step-item__check {
        left: auto;
        right: -15px;
        top: auto;
        bottom: 5px;
        width: 20px;
        height: 20px;
    }

    .parkx-step-item__prize-card {
        width: 22px;
    }

    .parkx-step-item__prize-star {
        width: 5px;
    }

    .parkx-step-item__prize-star--1 {
        left: 0;
        top: 1px;
    }

    .parkx-step-item__prize-star--2 {
        left: 18px;
        top: 17px;
    }

    .parkx-step-arrow {
        width: 11px;
        height: 66px;
    }
}

/* ---------------------------------------------------------------- */
/* 応援メッセージ／アンケートモーダル（共通） */
/* ---------------------------------------------------------------- */
.parkx-yell-modal-overlay,
.parkx-survey-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    /* 左上固定の「やっぱりやめる」ボタン（top:16px・高さ〜32px＝下端〜48px）と、
       内容が長く max-height:100% いっぱいになったモーダル上端が重ならないよう、
       上パディングを広めに取ってモーダルをボタンの下から始める。 */
    padding: 64px var(--parkx-space-16) var(--parkx-space-32);
    /* ゲームクリア画面（S53スタンプゲット直後）からも開けるようになったため、
       game-modal.css のオーバーレイ群（最大 z-index:1150、gm-secret-back-btnのみ1201）
       より確実に手前へ出す必要がある。 */
    z-index: 1160;
}

/* 応援メッセージ送信完了画面（Figma node 11022:65319「背景」）。
   S53スタンプゲット演出（.gm-stamp-overlay）と同じ黄色い放射状の背景画像を敷く。
   通常時の半透明の黒背景を、完了時（.parkx-yell-modal に is-done が付いた時）だけ
   この画像に置き換える。 */
.parkx-yell-modal-overlay:has(.parkx-yell-modal.is-done) {
    background: #ffcb4d url('/static/img/parkx/game/stamp-get-bg.png') center / cover no-repeat;
}

.parkx-yell-modal-overlay[hidden],
.parkx-survey-modal-overlay[hidden] {
    display: none;
}

.parkx-yell-modal,
.parkx-survey-modal {
    position: relative;
    width: 100%;
    max-width: 704px;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
    padding: var(--parkx-space-8) var(--parkx-space-24) var(--parkx-space-16);
    background: var(--parkx-color-surface-subtle);
    border: 2px solid var(--parkx-color-primary);
    border-radius: var(--parkx-radius-md);
}

/* 完了画面は、Figma実データでは白いフォームカードを持たず、
   オーバーレイの上にキャラクターの吹き出しと閉じるボタンだけが直接浮かんでいる。 */
.parkx-yell-modal.is-done,
.parkx-survey-modal.is-done {
    background: transparent;
    border: none;
    padding: 0;
}

/* 応援メッセージ / アンケートモーダルはFigma実データ通り×ボタンではなく、
   オーバーレイ左上に固定の「やっぱりやめる」ボタンを表示する。 */
.parkx-yell-modal__cancel,
.parkx-survey-modal__cancel {
    position: absolute;
    top: var(--parkx-space-16);
    left: var(--parkx-space-16);
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-4) var(--parkx-space-20) var(--parkx-space-4) var(--parkx-space-12);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.parkx-yell-modal__cancel img,
.parkx-survey-modal__cancel img {
    width: 12px;
    height: 24px;
    transform: scaleX(-1);
}

.parkx-yell-modal__panel,
.parkx-survey-modal__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
}

.parkx-yell-modal__panel[hidden],
.parkx-survey-modal__panel[hidden] {
    display: none;
}

.parkx-yell-modal__title,
.parkx-survey-modal__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--parkx-space-8);
    width: 100%;
    margin: 0;
    padding-top: var(--parkx-space-8);
    font-size: var(--parkx-text-md);
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--parkx-color-text);
}

.parkx-yell-modal__title-icon,
.parkx-survey-modal__title-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.parkx-yell-modal__submit-btn,
.parkx-survey-modal__submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    height: 43px;
    padding: var(--parkx-space-4) var(--parkx-space-32);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

/* Figma実データでは、未回答の間は送信ボタン自体が表示されない
   （disabledグレー表示ではなく非表示）。すべて選択されたら初めて姿を現す。 */
.parkx-yell-modal__submit-btn,
.parkx-survey-modal__submit-btn {
    display: none;
}

.parkx-yell-modal__submit-btn.is-visible,
.parkx-survey-modal__submit-btn.is-visible {
    display: inline-flex;
}

.parkx-yell-modal__submit-btn {
    background: var(--parkx-color-sponsor-yell);
    border-color: var(--parkx-color-sponsor-yell);
}

.parkx-survey-modal__submit-btn {
    background: var(--parkx-color-success);
    border-color: var(--parkx-color-success);
}

/* プライバシーポリシー同意チェック（送信ボタンの上・中央寄せ） */
.parkx-survey-modal__consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: var(--parkx-color-text);
    cursor: pointer;
}

/* style.css の `input[type=checkbox]{display:none}`（サイト共通の独自チェックボックス
   パターン）で隠れるため、input付き詳細度で表示を復活させ、ネイティブ表示に戻す。 */
input.parkx-survey-modal__consent-check {
    display: inline-block;
    -webkit-appearance: auto;
    appearance: auto;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--parkx-color-info);
    cursor: pointer;
}

.parkx-survey-modal__consent-link {
    color: var(--parkx-color-info);
    text-decoration: underline;
}

/* メッセージ選択 / アンケート共通：企業情報バー */
.parkx-yell-modal__company-bar,
.parkx-survey-modal__company-bar {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
    padding: var(--parkx-space-12) var(--parkx-space-8);
    background: var(--parkx-color-surface);
    border-radius: var(--parkx-radius-xs);
}

.parkx-yell-modal__company-info,
.parkx-survey-modal__company-info {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    flex: 1 0 0;
    min-width: 0;
    padding-right: var(--parkx-space-8);
    border-right: 1px solid var(--parkx-color-border);
}

.parkx-yell-modal__company-logo,
.parkx-survey-modal__company-logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--parkx-radius-full);
    border: 0.4px solid #eee;
    background: #fff;
    object-fit: contain;
}

.parkx-yell-modal__company-name,
.parkx-survey-modal__company-name {
    flex: 1 0 0;
    min-width: 0;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: var(--parkx-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parkx-yell-modal__game-info,
.parkx-survey-modal__game-info {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    flex: 1 0 0;
    min-width: 0;
}

.parkx-yell-modal__game-icon,
.parkx-survey-modal__game-icon {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: var(--parkx-color-sponsor);
    border-radius: 4px;
    object-fit: contain;
}

.parkx-yell-modal__game-title,
.parkx-survey-modal__game-title {
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    color: var(--parkx-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Step2: プリセットメッセージ／自由記述 */
.parkx-yell-modal__content-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--parkx-space-8);
    width: 100%;
}

.parkx-yell-modal__preset-card {
    position: relative;
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--parkx-space-16) var(--parkx-space-12) var(--parkx-space-12);
    background: var(--parkx-color-surface-subtle);
    border: 2px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    line-height: 1.4;
    color: var(--parkx-color-text);
    text-align: left;
    cursor: pointer;
}

.parkx-yell-modal__preset-card.is-selected {
    background: #fff7e8;
    border-color: var(--parkx-color-sponsor-yell);
    color: var(--parkx-color-text);
}

/* 他の項目が選ばれている間、非選択の項目はグレーにトーンダウンする */
.parkx-yell-modal__preset-card.is-dimmed {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-border-inactive);
    color: var(--parkx-color-text-muted);
}

.parkx-yell-modal__preset-check {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    z-index: 1;
}

.parkx-yell-modal__preset-card.is-selected .parkx-yell-modal__preset-check {
    display: block;
}

.parkx-yell-modal__free-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-8);
    width: 100%;
    padding: 0 var(--parkx-space-12) var(--parkx-space-8);
    background: var(--parkx-color-surface-subtle);
    border: 2px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
}

.parkx-yell-modal__free-card.is-selected {
    background: #fff7e8;
    border-color: var(--parkx-color-sponsor-yell);
}

.parkx-yell-modal__free-card.is-dimmed {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-inactive);
}

.parkx-yell-modal__free-card.is-dimmed .parkx-yell-modal__free-textarea {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-border-inactive);
    color: var(--parkx-color-text-muted);
}

.parkx-yell-modal__free-label {
    padding-top: var(--parkx-space-16);
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    color: var(--parkx-color-text);
}

.parkx-yell-modal__free-textarea {
    width: 100%;
    height: 84px;
    padding: var(--parkx-space-12) var(--parkx-space-12) 28px;
    background: #fff;
    border: 2px solid #a8a8a8;
    border-radius: 4px;
    font-size: var(--parkx-text-xs);
    font-family: inherit;
    color: var(--parkx-color-text);
    resize: none;
    box-sizing: border-box;
}

.parkx-yell-modal__char-count {
    position: absolute;
    right: 20px;
    bottom: 16px;
    font-size: var(--parkx-text-xs);
    color: var(--parkx-color-text-muted);
}

.parkx-yell-modal__free-check {
    display: none;
    position: absolute;
    top: -9px;
    right: -9px;
    width: 20px;
    height: 20px;
    z-index: 1;
}

.parkx-yell-modal__free-card.is-selected .parkx-yell-modal__free-check {
    display: block;
}

/* 完了画面（共通） */
.parkx-yell-modal__panel--done,
.parkx-survey-modal__panel--done {
    padding: var(--parkx-space-24) 0;
}

.parkx-yell-modal__speech,
.parkx-survey-modal__speech {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-12);
}

.parkx-yell-modal__character,
.parkx-survey-modal__character {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.parkx-yell-modal__speech-bubble,
.parkx-survey-modal__speech-bubble {
    padding: var(--parkx-space-16) var(--parkx-space-24);
    background: #fff;
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: var(--parkx-color-text);
}

.parkx-yell-modal__speech-bubble p,
.parkx-survey-modal__speech-bubble p {
    margin: 0;
    line-height: 1.6;
}

.parkx-yell-modal__close-btn,
.parkx-survey-modal__close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    height: 43px;
    padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.parkx-yell-modal__close-btn img,
.parkx-survey-modal__close-btn img {
    width: 12px;
    height: 24px;
}

/* アンケートフォーム固有 */
.parkx-survey-modal__mail-row {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
}

.parkx-survey-modal__mail-label {
    flex-shrink: 0;
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    color: var(--parkx-color-text);
}

.parkx-survey-modal__mail-value {
    flex: 1 0 0;
    min-width: 0;
    padding: var(--parkx-space-8) var(--parkx-space-12);
    background: var(--parkx-color-surface-subtle);
    border: 2px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    font-size: var(--parkx-text-xs);
    font-family: inherit;
    font-weight: 700;
    color: var(--parkx-color-text);
}

.parkx-survey-modal__mail-value::placeholder {
    color: var(--parkx-color-text-muted);
    font-weight: 400;
}

.parkx-survey-modal__question-list {
    display: flex;
    flex-direction: column;
    gap: var(--parkx-space-8);
    width: 100%;
    padding-top: var(--parkx-space-8);
}

.parkx-survey-modal__question {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    width: 100%;
}

.parkx-survey-modal__question-label {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    flex: 1 0 0;
    min-width: 0;
    padding-right: var(--parkx-space-16);
}

.parkx-survey-modal__q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--parkx-radius-full);
    background: var(--parkx-color-survey);
    color: #fff;
    font-size: var(--parkx-text-xs);
    font-weight: 900;
}

.parkx-survey-modal__q-text {
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    color: var(--parkx-color-text);
}

.parkx-survey-modal__choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--parkx-space-8);
    flex-shrink: 0;
}

.parkx-survey-modal__choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: 112px;
    padding: var(--parkx-space-4) var(--parkx-space-8);
    border: 2px solid transparent;
    border-radius: var(--parkx-radius-xs);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* Figma実データでは、選択肢は最初から並び順（列）ごとに配色されている
   （グレーではない）：1番目=紫系、2番目=オレンジ系、3番目=緑系。
   選択されると選択済みの項目にチェックマークが付き、それ以外がグレーになる。 */
.parkx-survey-modal__choice:nth-child(1) {
    background: #f9f8fc;
    border-color: #c7cad7;
    color: #151e47;
}

.parkx-survey-modal__choice:nth-child(2) {
    background: #fff8ef;
    border-color: #f28a1d;
    color: #ea6b0a;
}

.parkx-survey-modal__choice:nth-child(3) {
    background: #f8fff0;
    border-color: #69b33b;
    color: #579431;
}

.parkx-survey-modal__choice.is-dimmed {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-border-inactive);
    color: var(--parkx-color-text-muted);
}

.parkx-survey-modal__choice.is-selected::after {
    content: "✓";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--parkx-radius-full);
    font-size: 12px;
    font-weight: 900;
    color: #fff;
}

.parkx-survey-modal__choice:nth-child(1).is-selected::after {
    background: #c7cad7;
}

.parkx-survey-modal__choice:nth-child(2).is-selected::after {
    background: #f28a1d;
}

.parkx-survey-modal__choice:nth-child(3).is-selected::after {
    background: #69b33b;
}

@media screen and (max-width: 1024px) {
    .parkx-yell-modal,
    .parkx-survey-modal {
        padding: var(--parkx-space-8) var(--parkx-space-16) var(--parkx-space-16);
        gap: var(--parkx-space-12);
    }

    .parkx-yell-modal__preset-card {
        flex: 1 1 100%;
    }

    .parkx-survey-modal__question {
        flex-wrap: wrap;
    }

    .parkx-survey-modal__choice-list {
        width: 100%;
    }

    .parkx-survey-modal__choice {
        flex: 1 1 0;
        width: auto;
    }

    /* Figma実データ（SP完了画面）では、キャラクターと吹き出しは縦積みではなく
       PCと同じ横並びのまま、キャラクターと文字サイズだけを少し縮小している。 */
    .parkx-yell-modal__speech,
    .parkx-survey-modal__speech {
        gap: var(--parkx-space-8);
    }

    .parkx-yell-modal__character,
    .parkx-survey-modal__character {
        width: 48px;
        height: 48px;
    }

    .parkx-yell-modal__speech-bubble,
    .parkx-survey-modal__speech-bubble {
        padding: var(--parkx-space-16) var(--parkx-space-8);
        font-size: var(--parkx-text-xs);
    }

    /* Figma実データ（SP版company-bar）では、PCの横並び1行ではなく、
       企業情報の行→区切り線→ゲーム情報の行、という縦2段構成になっている。 */
    .parkx-yell-modal__company-bar,
    .parkx-survey-modal__company-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--parkx-space-8);
    }

    .parkx-yell-modal__company-info,
    .parkx-survey-modal__company-info {
        border-right: none;
        border-bottom: 1px solid var(--parkx-color-border);
        padding-right: 0;
        padding-bottom: var(--parkx-space-8);
    }
}