/* 学園祭2026 のダイアログの見た目（全画面共通）
   ─ /js/customDialog.js の alertDialog / customConfirm / customPrompt と、
     学園祭ゲストページのログイン確認（.request-dialog）を同じ見た目にそろえる（依頼元の要望、2026-09-26）。
   ─ customDialog.js 自体は他のアプリと共用なので、見た目は学園祭の画面だけに当てる
     （/css/reset.css は触らない。他のアプリの見た目が変わるため）。
   ─ 何も当てないとブラウザ標準の黒い太枠・左寄せでくっついたボタンになる。
   ─ 読み込み中（.loading-dialog）は /css/reset.css の見た目のまま。
   CSS は `&` の入れ子で書く（ルート CLAUDE.md の規約） */

dialog:is(.alert-dialog, .confirm-dialog, .prompt-dialog, .request-dialog) {
    width: min(92vw, 24rem);
    max-height: 85dvh;
    overflow: auto;
    border: none;
    border-radius: .6rem;
    padding: 1.25rem;
    background-color: #fff;
    color: #222;
    line-height: 1.6;
    box-shadow: 0 10px 30px rgb(0 0 0 / .25);
    text-wrap: pretty;

    &::backdrop {
        background-color: rgb(0 0 0 / .45);
    }

    & > p:first-child {
        margin-top: 0;
    }

    & small {
        color: #6b6b6b;
    }

    /* 並んだボタンは同じ幅で横いっぱいに（はい・いいえ／OK・キャンセル／許可する・断る） */
    & :is(.confirm-buttons, .prompt-buttons, .row-buttons) {
        display: flex;
        gap: .5rem;
        margin-top: 1rem;

        & button {
            flex: 1;
            margin: 0;
        }
    }

    & button {
        appearance: none;
        font-size: 1rem;
        padding: .7em 1em;
        border: 1px solid #d8d8d8;
        border-radius: .35rem;
        background-color: #fff;
        color: #222;
        cursor: pointer;
    }

    /* 進める側は色付き */
    & :is(.confirm-yes, .prompt-ok, button.primary) {
        background-color: var(--accent, #0e438b);
        border-color: var(--accent, #0e438b);
        color: #fff;
    }

    & button.danger {
        color: var(--danger, #b3261e);
        border-color: #e6c4c1;
    }
}

/* ---- お知らせ（alertDialog） ---- */

dialog.alert-dialog {
    text-align: center;

    /* 注意・警告（alertDialog の第3引数 'warn'）は上の帯で分かるように */
    &.alert-warn {
        border-top: 5px solid var(--danger, #b3261e);
    }

    /* 自動で閉じないお知らせの「閉じる」 */
    & .dialog-close {
        display: block;
        width: 100%;
        margin-top: 1rem;
    }
}

/* ---- 入力（customPrompt） ---- */

dialog.prompt-dialog .prompt-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: .75rem;
    /* iOS は 16px 未満の入力欄を触ると画面を拡大する */
    font-size: 1.05rem;
    padding: .6em .7em;
    border: 1px solid #d8d8d8;
    border-radius: .35rem;
}

/* ---- ほかの端末のログインの確認（guest/index.html） ---- */

dialog.request-dialog {
    & .request-head {
        margin: 0;
        font-weight: bold;
        color: var(--danger, #b3261e);
    }

    & .request-text {
        margin: .5rem 0 0;
        font-size: 1.05rem;
    }
}