/**
 * components/badge.css — 뱃지, 상태 표시, Q 브랜드
 * .advice-badge: 36x36 (weather_card.css 기준으로 통일, ui.css의 32x32 폐기)
 * .status-*: ui.css + analysis_card.css 통합
 */

/* ── Q 브랜드 ─────────────────────────────────── */
.q-brand {
    color: burlywood;
}

.q-brand--lg {
    color: burlywood;
    font-size: 20px;
}

/* ── Advice 뱃지 (카드 조언 앞 Q 아이콘) ────── */
.advice-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-color: var(--brown);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 광고 뱃지 ───────────────────────────────── */
.ad-badge {
    margin-left: auto;
    background: #f39c12;
    color: white;
    font-size: 14px;
    padding: 3px 10px;
    font-weight: bold;
}

/* ── 알림 뱃지 ───────────────────────────────── */
.notif-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #e9ecef;
    color: #495057;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* ── 상태 색상 (텍스트) ───────────────────────── */
.status-optimal {
    color: #22c55e !important;
}

.status-danger {
    color: #dc2626 !important;
}

.status-neutral {
    color: var(--text-muted) !important;
}

.status-info {
    color: var(--info) !important;
}

.status-warning {
    color: var(--accent-warning) !important;
}

.status-dark {
    color: var(--brown) !important;
}

.status-orange {
    color: #f97316 !important;
}

/* ── 상태 배경색 ──────────────────────────────── */
.bg-status-optimal {
    background-color: rgba(34, 197, 94, 0.12);
}

.bg-status-danger {
    background-color: rgba(220, 38, 38, 0.1);
}

.bg-status-warning {
    background-color: rgba(245, 158, 11, 0.12);
}

.bg-status-info {
    background-color: rgba(59, 130, 246, 0.1);
}

/* ── 미니카드 상태 도트 ───────────────────────── */
.mini-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mini-card-status-dot--optimal { background: #27ae60; }
.mini-card-status-dot--warning { background: #f39c12; }
.mini-card-status-dot--danger  { background: #e74c3c; }
.mini-card-status-dot--info    { background: #3498db; }
.mini-card-status-dot--neutral { background: #aaa; }