/* 토스트 컨테이너 기본 스타일 */
#toast {
    visibility: hidden;
    min-width: 300px;
    max-width: 80%;
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 토스트 타입별 스타일 */
#toast.info {
    background-color: #2196F3;  /* 파랑 (정보) */
    border-left: 6px solid #0d6efd;
}

#toast.success {
    background-color: #4CAF50;  /* 초록 (성공) */
    border-left: 6px solid #2e7d32;
}

#toast.warning {
    background-color: #ff9800;  /* 주황 (경고) */
    border-left: 6px solid #e65100;
}

#toast.error {
    background-color: #f44336;  /* 빨강 (오류) */
    border-left: 6px solid #c62828;
}

/* 애니메이션 상태 클래스 */
#toast.show {
    visibility: visible;
    opacity: 1;
    animation: fadein 0.5s;
}

#toast.hide {
    animation: fadeout 0.5s forwards;
}

/* 애니메이션 키프레임 정의 */
@keyframes fadein {
    from { 
        bottom: 0; 
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to { 
        bottom: 30px; 
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeout {
    from { 
        bottom: 30px; 
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to { 
        bottom: 0; 
        opacity: 0;
        transform: translate(-50%, 20px);
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    #toast {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    
    #toast.info {
        background-color: #0d47a1;
        border-left-color: #1976d2;
    }
    
    #toast.success {
        background-color: #1b5e20;
        border-left-color: #388e3c;
    }
    
    #toast.warning {
        background-color: #e65100;
        border-left-color: #ff9800;
    }
    
    #toast.error {
        background-color: #b71c1c;
        border-left-color: #e53935;
    }
}

/* 모바일 화면 최적화 */
@media (max-width: 480px) {
    #toast {
        min-width: 80%;
        max-width: 90%;
        bottom: 20px;
        padding: 12px;
        font-size: 14px;
    }
    
    @keyframes fadein {
        from { bottom: 0; opacity: 0; }
        to { bottom: 20px; opacity: 1; }
    }
    
    @keyframes fadeout {
        from { bottom: 20px; opacity: 1; }
        to { bottom: 0; opacity: 0; }
    }
}