﻿.swal2-container.swal2-bottom-end {
    padding: 0 20px 20px 0 !important;
    z-index: 2147483600 !important;
    box-sizing: border-box !important;
}

/* 카드 기본 스타일 */
.swal2-popup.fcm-toast-popup {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;

    background: #343541 !important; /* ChatGPT 다크 */
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;

    padding: 14px 16px !important;
    min-width: 280px !important;
    max-width: 340px !important;
    width: auto !important;
    height: auto !important;

    color: #ececf1 !important;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;

    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    transition: all 0.25s ease !important;
}

/* hover */
.swal2-popup.fcm-toast-popup:hover {
    transform: translateY(-2px);
}

/* ===== 스택 효과 ===== */
.swal2-container.swal2-bottom-end .swal2-popup {
    margin-top: 10px !important;
}

.swal2-container.swal2-bottom-end .swal2-popup:not(:last-child) {
    transform: scale(0.96) translateY(10px);
    opacity: 0.9;
}

.swal2-container.swal2-bottom-end .swal2-popup:nth-last-child(3) {
    transform: scale(0.92) translateY(20px);
    opacity: 0.75;
}

/* 애니메이션 */
.fcm-toast-show {
    animation: fcmSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.fcm-toast-hide {
    animation: fcmSlideOut 0.2s ease-in !important;
}

@keyframes fcmSlideIn {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes fcmSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(10px);
        opacity: 0;
    }
}

/* 구조 */
.swal2-container .fcm-toast-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    text-align: left !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    line-height: inherit !important;
}

.swal2-container .fcm-toast-popup * {
    box-sizing: border-box !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-indent: 0 !important;
    float: none !important;
}

.fcm-toast-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.fcm-toast-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* 제목 */
.fcm-toast-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* SVG 아이콘 */
.fcm-toast-icon {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* 타입별 아이콘 색 */
.fcm-toast-popup.success .fcm-toast-icon { color: #22c55e; }
.fcm-toast-popup.error   .fcm-toast-icon { color: #ef4444; }
.fcm-toast-popup.warning .fcm-toast-icon { color: #f59e0b; }
.fcm-toast-popup.info    .fcm-toast-icon { color: #60a5fa; }

/* 시간 */
.fcm-toast-time {
    font-size: 11px !important;
    color: rgba(255,255,255,0.45) !important;
    margin: 0 !important;
}

/* 본문 */
.fcm-toast-text {
    font-size: 13px !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    word-break: break-all !important;
}

/* 버튼 */
.fcm-toast-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 6px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #60a5fa !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.fcm-toast-action:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* 프로그레스 바 */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #60a5fa, #3b82f6) !important;
    height: 3px !important;
}

/* ===== Hover Glow 효과 ===== */
.fcm-toast-popup::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: radial-gradient(
        120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(96,165,250,0.25),
        transparent 60%
    );
}

.fcm-toast-popup:hover::after {
    opacity: 1;
}

.fcm-toast-popup.success:hover::after {
    background: radial-gradient(120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(34,197,94,0.25), transparent 60%);
}
.fcm-toast-popup.error:hover::after {
    background: radial-gradient(120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(239,68,68,0.25), transparent 60%);
}
.fcm-toast-popup.warning:hover::after {
    background: radial-gradient(120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245,158,11,0.25), transparent 60%);
}

/* 배경 dim 및 모달 스타일 */
.fcm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    animation: overlayFadeIn 0.25s ease forwards;
}

.fcm-modal {
    width: min(900px, 90vw);
    height: min(80vh, 800px);
    background: #202123;
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fcm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fcm-modal-title {
    font-size: 13px;
    color: #e5e7eb;
}

.fcm-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fcm-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
}

.fcm-modal-body {
    flex: 1;
    background: #111827;
}

.fcm-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.fcm-modal-overlay.closing {
    animation: overlayFadeOut 0.2s ease forwards;
}

.fcm-modal-overlay.closing .fcm-modal {
    animation: modalOut 0.2s ease forwards;
}

@keyframes overlayFadeOut {
    to { opacity: 0; }
}

@keyframes modalOut {
    to {
        transform: translateY(10px) scale(0.96);
        opacity: 0;
    }
}