/* 알림 및 메시지 컴포넌트 스타일 */

/* 기본 알림 스타일 */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* 알림 색상 변형 */
.alert-success {
    color: #0a3622;
    background-color: rgba(63, 185, 80, 0.1);
    border-color: rgba(63, 185, 80, 0.2);
}

.alert-success .alert-link {
    color: var(--accent-success);
}

.alert-info {
    color: #055160;
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.2);
}

.alert-info .alert-link {
    color: #0dcaf0;
}

.alert-warning {
    color: #664d03;
    background-color: rgba(210, 153, 34, 0.1);
    border-color: rgba(210, 153, 34, 0.2);
}

.alert-warning .alert-link {
    color: var(--accent-warning);
}

.alert-danger {
    color: #721c24;
    background-color: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.2);
}

.alert-danger .alert-link {
    color: var(--accent-danger);
}

.alert-primary {
    color: #084298;
    background-color: rgba(88, 166, 255, 0.1);
    border-color: rgba(88, 166, 255, 0.2);
}

.alert-primary .alert-link {
    color: var(--accent-primary);
}

.alert-secondary {
    color: var(--text-secondary);
    background-color: rgba(139, 148, 158, 0.1);
    border-color: rgba(139, 148, 158, 0.2);
}

.alert-secondary .alert-link {
    color: var(--text-secondary);
}

/* Dark 모드 알림 스타일 */
.alert-success {
    color: var(--accent-success);
    background-color: rgba(63, 185, 80, 0.15);
    border-color: rgba(63, 185, 80, 0.25);
}

.alert-info {
    color: #0dcaf0;
    background-color: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.25);
}

.alert-warning {
    color: var(--accent-warning);
    background-color: rgba(210, 153, 34, 0.15);
    border-color: rgba(210, 153, 34, 0.25);
}

.alert-danger {
    color: var(--accent-danger);
    background-color: rgba(248, 81, 73, 0.15);
    border-color: rgba(248, 81, 73, 0.25);
}

.alert-primary {
    color: var(--accent-primary);
    background-color: rgba(88, 166, 255, 0.15);
    border-color: rgba(88, 166, 255, 0.25);
}

/* 닫기 버튼 */
.btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1.25rem;
    color: inherit;
    background: none;
    border: 0;
    opacity: 0.5;
    cursor: pointer;
}

.btn-close:hover {
    opacity: 0.75;
}

.btn-close:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
    opacity: 1;
}

/* 닫기 아이콘 */
.btn-close::before {
    content: '×';
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
}

/* 알림 제목 */
.alert-heading {
    color: inherit;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* 알림 링크 */
.alert-link {
    font-weight: 700;
    text-decoration: underline;
}

.alert-link:hover {
    text-decoration: none;
}

/* 알림 아이콘 */
.alert-icon {
    margin-right: 0.5rem;
    font-size: 1.25rem;
    vertical-align: middle;
}

/* 닫을 수 있는 알림 */
.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1.25rem;
}

/* 알림 애니메이션 */
.alert.fade {
    transition: opacity 0.15s linear;
}

.alert.fade:not(.show) {
    opacity: 0;
}

.alert.show {
    opacity: 1;
}

/* 알림 슬라이드 인 애니메이션 */
.alert-slide-in {
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 토스트 알림 */
.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    max-width: 350px;
    padding: 0.75rem 1rem;
    background-color: var(--bg-canvas-subtle);
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-success {
    border-left: 4px solid var(--accent-success);
}

.toast-info {
    border-left: 4px solid #0dcaf0;
}

.toast-warning {
    border-left: 4px solid var(--accent-warning);
}

.toast-danger {
    border-left: 4px solid var(--accent-danger);
}

/* 반응형 알림 */
@media (max-width: 768px) {
    .alert {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .alert-dismissible {
        padding-right: 2.5rem;
    }
    
    .toast {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
        animation: slideInDown 0.3s ease-out;
    }
    
    @keyframes slideInDown {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}