/* ============================================================
    alert.css
    Hyomin Design System v1.0 — Alert / Toast Component

    사용법:
    <div class="alert alert--success" role="alert">
        <div class="alert__bar"></div>
        <span class="alert__icon">✓</span>
        <div class="alert__content">
            <p class="alert__title">Title</p>
            <p class="alert__text">Content</p>
        </div>
        <button class="alert__close" aria-label="닫기">×</button>
    </div>
    ============================================================ */

.alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-3); /* 12px */
    width: 280px;
    min-height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* 좌측 컬러 바 */
.alert__bar {
    align-self: stretch;
    width: 4px;
    flex-shrink: 0;
}

/* 아이콘 */
.alert__icon {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body-base); /* 18px */
    font-weight: var(--font-weight-regular);
    line-height: 27px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* 텍스트 영역 */
.alert__content {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-4); /* 16px */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1); /* 4px */
}

.alert__title {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body-sm); /* 16px */
    font-weight: var(--font-weight-regular);
    color: var(--gray-900);
    line-height: 24px;
}

.alert__text {
    font-family: var(--font-secondary);
    font-size: 14px; /* Figma: Body xs 14px */
    font-weight: var(--font-weight-regular);
    color: var(--gray-900);
    line-height: 20px;
}

/* 닫기 버튼 */
.alert__close {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--gray-500);
    transition: color var(--duration-fast);
}

.alert__close:hover {
    color: var(--gray-900);
}


/* ─── Variants ─── */

.alert--success { background-color: var(--green-50); }
.alert--success .alert__bar  { background-color: var(--green-500); }
.alert--success .alert__icon { color: var(--green-500); }

.alert--error { background-color: var(--red-50); }
.alert--error .alert__bar  { background-color: var(--red-500); }
.alert--error .alert__icon { color: var(--red-500); }

.alert--warning { background-color: var(--yellow-50); }
.alert--warning .alert__bar  { background-color: var(--yellow-500); }
.alert--warning .alert__icon { color: var(--yellow-500); }

.alert--info { background-color: var(--blue-50); }
.alert--info .alert__bar  { background-color: var(--blue-500); }
.alert--info .alert__icon { color: var(--blue-500); }