/**
 * Badge Styles
 * 뱃지 컴포넌트 전용 스타일
 */

/* ===========================================
   뱃지 색상 변수
   =========================================== */

:root {
    /* 뱃지 색상 변수 */
    --theme-badge-upcoming-bg: #9CA3AF;
    --theme-badge-waiting-bg: #F59E0B;
    --theme-badge-in-progress-bg: #408090;
    --theme-badge-completed-bg: #1F2937;
    
    /* 결과 뱃지 색상 변수 */
    --theme-badge-correct-bg: #10B981;
    --theme-badge-wrong-bg: #EF4444;
    --theme-badge-selected-bg: #3B82F6;
    --theme-badge-total-bg: #6B7280;
    
    /* 뱃지 텍스트 색상 */
    --theme-badge-text-light: #FFFFFF;
    --theme-badge-text-dark: #000000;
    
    /* 뱃지 기본 설정 */
    --theme-badge-radius: 4px;
    --theme-badge-padding: 0.25rem 0.5rem;
}

/* ===========================================
   기본 뱃지 스타일
   =========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: var(--theme-badge-padding);
    border-radius: var(--theme-badge-radius);
    font-size: var(--theme-font-size-small);
    font-weight: 500;
    font-family: var(--theme-font-bold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    color: var(--theme-badge-text-light);
    transition: all 0.2s ease;
}

/* ===========================================
   상태별 뱃지 스타일
   =========================================== */

/* 예정 상태 */
.badge-upcoming {
    background-color: var(--theme-badge-upcoming-bg);
    color: var(--theme-badge-text-light);
}

/* 대기 상태 */
.badge-waiting {
    background-color: var(--theme-badge-waiting-bg);
    color: var(--theme-badge-text-light);
}

/* 진행중 상태 */
.badge-in-progress {
    background-color: var(--theme-badge-in-progress-bg);
    color: var(--theme-badge-text-light);
}

/* 완료 상태 */
.badge-completed {
    background-color: var(--theme-badge-completed-bg);
    color: var(--theme-badge-text-light);
}

/* ===========================================
   결과 페이지 전용 뱃지 스타일
   =========================================== */

/* 정답 뱃지 */
.badge-correct {
    background-color: var(--theme-badge-correct-bg);
    color: var(--theme-badge-text-light);
}

/* 오답 뱃지 */
.badge-wrong {
    background-color: var(--theme-badge-wrong-bg);
    color: var(--theme-badge-text-light);
}

/* 선택 뱃지 */
.badge-selected {
    background-color: var(--theme-badge-selected-bg);
    color: var(--theme-badge-text-light);
}

/* 총 문제 수 뱃지 */
.badge-total {
    background-color: var(--theme-badge-total-bg);
    color: var(--theme-badge-text-light);
}

/* ===========================================
   뱃지 크기 변형
   =========================================== */

/* 큰 뱃지 */
.badge-lg {
    padding: 0.375rem 0.75rem;
    font-size: var(--theme-font-size-body);
}

/* 작은 뱃지 */
.badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: var(--theme-font-size-caption);
}

/* ===========================================
   뱃지 스타일 변형
   =========================================== */

/* 둥근 뱃지 */
.badge-rounded {
    border-radius: 1rem;
}

/* 테두리 뱃지 */
.badge-outline {
    background-color: transparent;
    border: 1px solid;
}

.badge-outline.badge-upcoming {
    border-color: var(--theme-badge-upcoming-bg);
    color: var(--theme-badge-upcoming-bg);
}

.badge-outline.badge-waiting {
    border-color: var(--theme-badge-waiting-bg);
    color: var(--theme-badge-waiting-bg);
}

.badge-outline.badge-in-progress {
    border-color: var(--theme-badge-in-progress-bg);
    color: var(--theme-badge-in-progress-bg);
}

.badge-outline.badge-completed {
    border-color: var(--theme-badge-completed-bg);
    color: var(--theme-badge-completed-bg);
}

.badge-outline.badge-correct {
    border-color: var(--theme-badge-correct-bg);
    color: var(--theme-badge-correct-bg);
}

.badge-outline.badge-wrong {
    border-color: var(--theme-badge-wrong-bg);
    color: var(--theme-badge-wrong-bg);
}

.badge-outline.badge-selected {
    border-color: var(--theme-badge-selected-bg);
    color: var(--theme-badge-selected-bg);
}

.badge-outline.badge-total {
    border-color: var(--theme-badge-total-bg);
    color: var(--theme-badge-total-bg);
}

/* ===========================================
   반응형 디자인
   =========================================== */

@media (max-width: 768px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
    
    .badge-lg {
        padding: 0.3rem 0.6rem;
        font-size: var(--theme-font-size-small);
    }
}

@media (max-width: 480px) {
    .badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.35rem;
    }
}

/* ===========================================
   접근성 개선
   =========================================== */

.badge:focus {
    outline: 2px solid var(--theme-main-color);
    outline-offset: 2px;
}

/* 스크린 리더용 텍스트 */
.badge .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}