/**
 * 2026-10 モーダル共通デザイン（全モーダルの見た目と文字の並びをそろえる）
 *
 * - スマホは下から出るシート、PC は中央の白いカード
 * - 見出しの背景色・区切り線はなし。白1枚
 * - 見出し・本文は左寄せ。アイコンが上に付く「案内・完了」だけ中央寄せ
 * - ボタン：やりたいこと＝水色（紺文字）／やめる・閉じる＝白／危ない操作だけ赤
 *   ボタンは横いっぱいで縦に並べ、主役を上に置く
 *
 * 各モーダルの元の CSS より後に読み込む（functions/common/enqueue.php）。
 * :root body:not(.ainy-modal-legacy) を頭に付けて、元のページ用 CSS より強くしている。
 * 古い見た目のままにしたい画面は body に .ainy-modal-legacy を付ける。
 * 色は layout/ainy-color-tokens.css のトークンのみ。
 */

:root {
    --ainy-modal-scrim: color-mix(in srgb, var(--ainy-navy-900) 48%, transparent);
    --ainy-modal-radius: 22px;
    --ainy-modal-pad: 22px;
    --ainy-modal-width: 30rem;
}

/* ---------- 背景（暗い膜） ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-overlay,
    .ainy-modal-overlay,
    .ainy-modal-backdrop,
    .ainy-notification-detail-modal__backdrop,
    .match-modal__backdrop,
    .payment-first-match-overlay,
    .mypage-onboarding-bot-modal__backdrop,
    .team-parent-detail-modal__overlay,
    .message-modal,
    .regulation-modal,
    .popup-overlay,
    .ainy-chat-redirect-modal,
    .completion-message
),
:root body:not(.ainy-modal-legacy) .page-communication-main .modal,
:root body:not(.ainy-modal-legacy) .page-schedule-management .modal,
:root body:not(.ainy-modal-legacy) .schedule-detail-modal,
:root body:not(.ainy-modal-legacy) #pressModal {
    background: var(--ainy-modal-scrim);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ---------- 白いカード ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .regulation-modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog,
    .completion-card
),
:root body:not(.ainy-modal-legacy) .page-communication-main .modal .modal-content,
:root body:not(.ainy-modal-legacy) .page-schedule-management .modal .modal-content,
:root body:not(.ainy-modal-legacy) .schedule-detail-modal .modal-content,
:root body:not(.ainy-modal-legacy) #pressModal .modal-content {
    background: var(--color-surface);
    color: var(--color-text);
    border: 0;
    border-radius: var(--ainy-modal-radius);
    box-shadow: var(--shadow-float);
    max-width: min(var(--ainy-modal-width), calc(100vw - 32px));
    overflow: hidden auto;
}

:root body:not(.ainy-modal-legacy) :is(.ainy-modal-width--m, .ainy-modal-width--l, .ainy-notification-detail-modal__dialog, .message-modal .modal-content) {
    max-width: min(36rem, calc(100vw - 32px));
}

/* カードの中身（.card-body など）の余白を共通に */
:root body:not(.ainy-modal-legacy) .mypage-onboarding-bot-modal__panel > .card-body {
    padding: var(--ainy-modal-pad);
}

/* ---------- 見出し ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__header,
    .ainy-modal-panel__header,
    .ainy-notification-detail-modal__header,
    .match-modal__header,
    .team-parent-detail-modal__header,
    .regulation-modal-header,
    .popup-header,
    .modal-header
) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: var(--ainy-modal-pad) var(--ainy-modal-pad) 0;
    background: transparent;
    border: 0;
    text-align: left;
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__title,
    .ainy-modal-panel__header h2,
    .ainy-modal-panel__header h3,
    .ainy-notification-detail-modal__heading h2,
    .match-modal__title,
    .team-parent-detail-modal__title,
    .regulation-modal-header h2,
    .popup-header h3,
    .modal-header h2,
    .modal-header h3
) {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 900;
    line-height: 1.45;
    color: var(--color-text);
    text-align: left;
    word-break: break-word;
}

/* 見出しの下の小さい一行（日時など） */
:root body:not(.ainy-modal-legacy) .ainy-notification-detail-modal__heading time {
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ---------- ✕ ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__close,
    .ainy-modal-panel__close,
    .ainy-notification-detail-modal__close,
    .match-modal__header .match-iconbtn,
    .team-parent-detail-modal__close,
    .payment-first-match-modal__close,
    .modal-header .modal-close,
    .regulation-modal-header .modal-close,
    .popup-close
) {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    color: var(--color-text-sub);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__close,
    .ainy-modal-panel__close,
    .ainy-notification-detail-modal__close,
    .match-modal__header .match-iconbtn,
    .team-parent-detail-modal__close,
    .payment-first-match-modal__close,
    .modal-header .modal-close,
    .regulation-modal-header .modal-close,
    .popup-close
):hover {
    background: var(--color-border);
    color: var(--color-text);
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__close,
    .ainy-modal-panel__close,
    .ainy-notification-detail-modal__close,
    .match-modal__header .match-iconbtn,
    .team-parent-detail-modal__close,
    .payment-first-match-modal__close,
    .modal-header .modal-close,
    .regulation-modal-header .modal-close,
    .popup-close
):focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

:root body:not(.ainy-modal-legacy) #pressModal .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    color: var(--color-text-sub);
    font-size: 1.125rem;
    font-weight: 400;
    top: 14px;
    right: 14px;
}

:root body:not(.ainy-modal-legacy) .payment-first-match-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
}

/* ---------- 本文（左寄せ） ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__body,
    .ainy-modal-panel__body,
    .ainy-notification-detail-modal__body,
    .match-modal__body,
    .team-parent-detail-modal__body,
    .regulation-modal-body,
    .popup-body,
    .modal-body,
    .start-chat-modal-body,
    .message-form
) {
    padding: 12px var(--ainy-modal-pad) 0;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text-sub);
    text-align: left;
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__message,
    .match-modal__message,
    .start-chat-modal-description,
    .mypage-onboarding-bot-modal__text
) {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text-sub);
}

/* 補足の箱（注意書きなど） */
:root body:not(.ainy-modal-legacy) :is(.mypage-onboarding-bot-modal__note, .match-board-onboarding-modal__notes) {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: var(--color-surface-sunken);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    color: var(--color-text-sub);
    text-align: left;
}

/* ---------- ボタンの並び ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__footer,
    .ainy-modal-panel__footer,
    .ainy-notification-detail-modal__footer,
    .match-modal__footer,
    .team-parent-detail-modal__footer,
    .payment-first-match-modal__actions,
    .mypage-onboarding-bot-modal__actions,
    .message-modal .form-actions,
    .popup-footer,
    .ainy-chat-redirect-modal__actions
) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    margin: 0;
    padding: 20px var(--ainy-modal-pad) var(--ainy-modal-pad);
    border: 0;
    background: transparent;
}

/* フォームの中に置いたボタン列は横の余白をフォーム側に任せる */
:root body:not(.ainy-modal-legacy) :is(.message-modal .form-actions, .payment-first-match-modal__actions, .mypage-onboarding-bot-modal__actions) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

:root body:not(.ainy-modal-legacy) .message-modal .form-actions {
    padding-bottom: var(--ainy-modal-pad);
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__footer,
    .ainy-modal-panel__footer,
    .ainy-notification-detail-modal__footer,
    .match-modal__footer,
    .team-parent-detail-modal__footer,
    .payment-first-match-modal__actions,
    .mypage-onboarding-bot-modal__actions,
    .message-modal .form-actions,
    .popup-footer,
    .ainy-chat-redirect-modal__actions
) > :is(button, a, .btn) {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* 主役のボタンを一番上に */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog__footer,
    .ainy-modal-panel__footer,
    .ainy-notification-detail-modal__footer,
    .match-modal__footer,
    .team-parent-detail-modal__footer,
    .payment-first-match-modal__actions,
    .mypage-onboarding-bot-modal__actions,
    .message-modal .form-actions,
    .popup-footer,
    .ainy-chat-redirect-modal__actions
) > :is(.btn-primary, .btn-success, .btn-danger, .match-btn--primary, .match-btn--danger, .post-btn--primary, .post-btn) {
    order: -1;
}

/* ---------- ボタンの形 ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn, .match-btn, .post-btn, .draft-btn, .cancel-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 20px;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-sub);
    font-size: var(--font-size-sm);
    font-weight: 900;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn, .match-btn, .post-btn, .draft-btn, .cancel-btn):hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/* 主役：水色・紺文字 */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn-primary, .btn-success, .match-btn--primary, .post-btn--primary, .post-btn) {
    min-height: 50px;
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-base);
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn-primary, .btn-success, .match-btn--primary, .post-btn--primary, .post-btn):hover {
    border-color: color-mix(in srgb, var(--color-primary) 85%, var(--ainy-navy-900));
    background: color-mix(in srgb, var(--color-primary) 85%, var(--ainy-navy-900));
    color: var(--color-text-on-primary);
}

/* 危ない操作：赤 */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn-danger, .match-btn--danger) {
    min-height: 50px;
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-base);
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn-danger, .match-btn--danger):hover {
    border-color: color-mix(in srgb, var(--color-danger) 85%, var(--ainy-navy-900));
    background: color-mix(in srgb, var(--color-danger) 85%, var(--ainy-navy-900));
    color: var(--color-text-on-dark);
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal__panel,
    .team-parent-detail-modal__dialog,
    .message-modal .modal-content,
    .popup-content,
    .ainy-chat-redirect-modal__dialog
) :is(.btn, .match-btn, .post-btn, .draft-btn, .cancel-btn):focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .message-modal .modal-content,
    .match-modal__dialog
) :is(.btn, .match-btn, .post-btn):disabled {
    border-color: var(--color-border);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* ---------- 入力欄 ---------- */
:root body:not(.ainy-modal-legacy) :is(.aidunite-confirm-dialog, .ainy-modal-panel, .message-modal .modal-content, .match-modal__dialog) :is(input[type="text"], input[type="email"], input[type="url"], select, textarea) {
    min-height: 46px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

:root body:not(.ainy-modal-legacy) :is(.aidunite-confirm-dialog, .ainy-modal-panel, .message-modal .modal-content, .match-modal__dialog) :is(input[type="text"], input[type="email"], input[type="url"], select, textarea):focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

:root body:not(.ainy-modal-legacy) :is(.aidunite-confirm-dialog, .ainy-modal-panel, .message-modal .modal-content) label {
    font-size: var(--font-size-xs);
    font-weight: 900;
    color: var(--color-text-sub);
}

/* 理由を選ぶモーダル */
:root body:not(.ainy-modal-legacy) .aidunite-reason-option {
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
}

:root body:not(.ainy-modal-legacy) .aidunite-reason-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-surface-accent-soft);
}

:root body:not(.ainy-modal-legacy) .aidunite-reason-option__label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}

:root body:not(.ainy-modal-legacy) .aidunite-reason-comment label {
    font-size: var(--font-size-xs);
    font-weight: 900;
    color: var(--color-text-sub);
}

:root body:not(.ainy-modal-legacy) .aidunite-reason-hint {
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* ---------- 案内・完了（アイコンが上）：中央寄せ ---------- */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog--center,
    .payment-first-match-modal,
    .mypage-onboarding-bot-modal--established .mypage-onboarding-bot-modal__body,
    .ainy-chat-redirect-modal__dialog,
    .completion-card
) {
    text-align: center;
}

:root body:not(.ainy-modal-legacy) .aidunite-confirm-dialog--center :is(.aidunite-confirm-dialog__body, .aidunite-confirm-dialog__message) {
    text-align: center;
}

/* 中央寄せの確認は、見出しも中央。✕は右上に重ねる */
:root body:not(.ainy-modal-legacy) .aidunite-confirm-dialog--center {
    position: relative;
}

:root body:not(.ainy-modal-legacy) .aidunite-confirm-dialog--center .aidunite-confirm-dialog__header {
    justify-content: center;
    padding-top: calc(var(--ainy-modal-pad) + 4px);
}

:root body:not(.ainy-modal-legacy) .aidunite-confirm-dialog--center .aidunite-confirm-dialog__title {
    flex: 0 1 auto;
    text-align: center;
}

:root body:not(.ainy-modal-legacy) .aidunite-confirm-dialog--center .aidunite-confirm-dialog__close {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
}

:root body:not(.ainy-modal-legacy) .aidunite-confirm-dialog--center .aidunite-confirm-dialog__icon {
    display: flex;
    justify-content: center;
    margin: 0 0 10px;
}

:root body:not(.ainy-modal-legacy) :is(.mypage-onboarding-bot-modal--established, .match-board-onboarding-modal) :is(.match-board-onboarding-modal__title, .mypage-onboarding-bot-modal__title) {
    font-size: var(--font-size-lg);
    font-weight: 900;
    line-height: 1.45;
    color: var(--color-text);
}

/* 性別でボタンの色を変えない（色はラベルで区別する方針） */
:root body:not(.ainy-modal-legacy) .match-board-onboarding-modal {
    --board-onboarding-accent: var(--color-primary);
    --board-onboarding-accent-dark: var(--color-primary);
}

/* 試合成立のチャット案内（template-parts/match/detail-overlays.php） */
.ainy-chat-redirect-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ainy-chat-redirect-modal__dialog {
    width: 100%;
    padding: calc(var(--ainy-modal-pad) + 4px) 0 0;
}

.ainy-chat-redirect-modal__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.ainy-chat-redirect-modal__title {
    margin: 0 var(--ainy-modal-pad);
    font-size: var(--font-size-lg);
    font-weight: 900;
    line-height: 1.45;
    color: var(--color-text);
}

.ainy-chat-redirect-modal__text {
    margin: 8px var(--ainy-modal-pad) 0;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text-sub);
}

/* ---------- スマホ：下から出るシート ---------- */
@keyframes ainyModalSheetIn {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 600px) {
    :root:root body:not(.ainy-modal-legacy) .aidunite-confirm-modal,
    :root:root body:not(.ainy-modal-legacy) .ainy-modal-overlay.is-open,
    :root:root body:not(.ainy-modal-legacy) .message-modal,
    :root:root body:not(.ainy-modal-legacy) .payment-first-match-overlay,
    :root:root body:not(.ainy-modal-legacy) .mypage-onboarding-bot-modal,
    :root:root body:not(.ainy-modal-legacy) .ainy-notification-detail-modal {
        align-items: flex-end;
        padding: 0;
    }

    :root:root body:not(.ainy-modal-legacy) :is(
        .aidunite-confirm-dialog,
        .ainy-modal-overlay .ainy-modal-panel,
        .message-modal .modal-content,
        .payment-first-match-modal,
        .mypage-onboarding-bot-modal__panel
    ) {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        margin: 0;
        transform: none;
        border-radius: var(--ainy-modal-radius) var(--ainy-modal-radius) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: ainyModalSheetIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    :root:root body:not(.ainy-modal-legacy) .ainy-notification-detail-modal__dialog {
        width: 100%;
        max-width: none;
        margin: 0;
        max-height: 88vh;
        border-radius: var(--ainy-modal-radius) var(--ainy-modal-radius) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    :root:root body:not(.ainy-modal-legacy) .page-match-board-own .match-modal__dialog,
    :root:root body:not(.ainy-modal-legacy) .team-parent-detail-modal__dialog {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        max-height: 88vh;
        margin: 0;
        transform: none;
        border-radius: var(--ainy-modal-radius) var(--ainy-modal-radius) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: ainyModalSheetIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* シートの上のつまみ */
    :root:root body:not(.ainy-modal-legacy) :is(
        .aidunite-confirm-dialog,
        .ainy-modal-overlay .ainy-modal-panel,
        .message-modal .modal-content,
        .ainy-notification-detail-modal__dialog,
        .page-match-board-own .match-modal__dialog,
        .team-parent-detail-modal__dialog
    )::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 10px auto -6px;
        border-radius: 999px;
        background: var(--color-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root body:not(.ainy-modal-legacy) :is(
        .aidunite-confirm-dialog,
        .ainy-modal-panel,
        .message-modal .modal-content,
        .payment-first-match-modal,
        .mypage-onboarding-bot-modal__panel,
        .ainy-notification-detail-modal__dialog,
        .match-modal__dialog,
        .team-parent-detail-modal__dialog
    ) {
        animation: none;
    }
}


/* コミュニケーション：お知らせの詳細（page-communication-main.php） */
:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__heading {
    flex: 1;
    min-width: 0;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__heading h2 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 900;
    line-height: 1.45;
    color: var(--color-text);
    word-break: break-word;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__time {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__meta:empty {
    display: none;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__body {
    margin: 10px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text);
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .ainy-modal-panel {
    position: relative;
    z-index: 1;
    max-height: 85vh;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .ainy-modal-panel__body {
    overflow-y: auto;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal [hidden] {
    display: none;
}

/* 膜の中にさらに膜を置いている作りは、二重に暗くしない */
:root body:not(.ainy-modal-legacy) .ainy-modal-overlay > .ainy-modal-backdrop {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* hidden を付けたボタンは確実に隠す */
:root body:not(.ainy-modal-legacy) :is(
    .aidunite-confirm-dialog,
    .ainy-modal-panel,
    .ainy-notification-detail-modal__dialog,
    .match-modal__dialog,
    .message-modal .modal-content
) :is(button, a, .btn)[hidden] {
    display: none;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__meta :is(.timeline-card-type-label, .priority-badge) {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    color: var(--color-text-sub);
    font-size: var(--font-size-xs);
    font-weight: 900;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__meta .priority-badge {
    background: var(--color-surface-attention-soft);
    color: var(--color-attention-text);
}


/* 2026-10 お知らせ詳細：読みやすさ調整（札→見出し→日時の順、本文は段落・小見出し・箇条書き） */
:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .ainy-modal-panel:focus {
    outline: none;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .ainy-modal-panel__header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-divider);
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .comm-timeline-detail-modal__meta {
    justify-content: flex-start;
    margin: 0 0 8px;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 6px 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__sub .comm-timeline-detail-modal__time {
    margin: 0;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__author[hidden] {
    display: none;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal__author::before {
    content: '・';
    margin-right: 6px;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .ainy-modal-panel__body {
    padding-top: 16px;
    text-align: left;
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .comm-timeline-detail-modal__body {
    margin: 0;
    white-space: normal;
    font-size: var(--font-size-sm);
    line-height: 1.85;
    color: var(--color-text);
}

:root body:not(.ainy-modal-legacy) .comm-detail-block + .comm-detail-block {
    margin-top: 14px;
}

:root body:not(.ainy-modal-legacy) .comm-detail-text {
    margin: 0;
}

:root body:not(.ainy-modal-legacy) .comm-detail-heading {
    margin: 0 0 6px;
    font-size: var(--font-size-sm);
    font-weight: 900;
    color: var(--color-text);
}

:root body:not(.ainy-modal-legacy) .comm-detail-list {
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    border-radius: 12px;
    background: var(--color-surface-sunken);
}

:root body:not(.ainy-modal-legacy) .comm-detail-list li {
    position: relative;
    padding-left: 16px;
    line-height: 1.75;
    color: var(--color-text-sub);
}

:root body:not(.ainy-modal-legacy) .comm-detail-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

:root body:not(.ainy-modal-legacy) .comm-timeline-detail-modal .ainy-modal-panel__footer {
    border-top: 1px solid var(--color-divider);
    padding-top: 16px;
}