/* ===========================================================
 * Day 43 Phase 3-1A — AlertModal 전역 CSS
 * 명세서 §3-2-2 정합 100%
 * 애니메이션 영역 (fade in/out / slide in/out / cubic-bezier 정합)
 * =========================================================== */

.app-alert-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    /* NOBLUR(2026-09-07 지시 · 전 미러 통일) · backdrop-filter 제거 — 모바일 엔진이 모달/팝업 뒷배경을 좌우반전·깨짐으로 그리는 사고. 어두운 반투명만 쓴다. */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.app-alert-backdrop.is-open {
    animation: appAlertFadeIn 0.18s ease-out;
}

.app-alert-backdrop.is-closing {
    animation: appAlertFadeOut 0.18s ease-out forwards;
}

.app-alert-modal {
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: appAlertSlideIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-alert-backdrop.is-closing .app-alert-modal {
    animation: appAlertSlideOut 0.18s ease-out forwards;
}

.app-alert-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}

.app-alert-success .app-alert-icon { background: #10b981; }
.app-alert-error   .app-alert-icon { background: #ef4444; }
.app-alert-warning .app-alert-icon { background: #f59e0b; }
.app-alert-info    .app-alert-icon { background: #3b82f6; }

.app-alert-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1a1a1a;
}

.app-alert-message {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 20px;
    word-break: keep-all;
    /* [A 2026-07-25] 게임 진입 거부 통일 문구 2줄 렌더 - 텍스트 바인딩 개행 = \n + pre-line(기존 메시지 개행 없음 - 무영향). */
    white-space: pre-line;
}

.app-alert-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.app-alert-btn {
    min-width: 100px;
    height: 42px;
    padding: 0 18px;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}

.app-alert-btn:hover {
    filter: brightness(1.15);
}

.app-alert-btn:active {
    transform: scale(0.97);
}

/* [F2 2026-07-26] confirm 변형 취소 버튼(회색) — 기존 1버튼 알람 무영향. */
.app-alert-btn-cancel {
    background: #94a3b8;
}

@keyframes appAlertFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes appAlertFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes appAlertSlideIn {
    from { transform: translateY(20px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes appAlertSlideOut {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(10px) scale(0.95); opacity: 0; }
}