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

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

:root {
    /* 뱃지 색상 변수 - 상태별 */
    --theme-badge-upcoming-bg: var(--theme-color-border);       /* 예정 - 테두리색 */
    --theme-badge-waiting-bg: #F59E0B;                          /* 대기 - 주황색 */
    --theme-badge-in-progress-bg: var(--theme-color-primary);   /* 진행중 - 상징색 */
    --theme-badge-completed-bg: var(--theme-color-accent);      /* 완료 - 강조색 */

    /* 결과 뱃지 색상 변수 */
    --theme-badge-correct-bg: #10B981;                          /* 정답 - 녹색 */
    --theme-badge-wrong-bg: var(--theme-danger-button-bg);      /* 오답 - 위험색 */
    --theme-badge-selected-bg: var(--theme-color-secondary);    /* 선택 - 바탕색 */
    --theme-badge-total-bg: var(--theme-hint-text-color);       /* 총합 - 힌트색 */

    /* 뱃지 텍스트 색상 */
    --theme-badge-text-light: #FFFFFF;                      /* 밝은 텍스트 */
    --theme-badge-text-dark: var(--theme-color-text);       /* 어두운 텍스트 */

    /* 뱃지 기본 설정 */
    --theme-badge-radius: 4px;
    --theme-badge-padding: 0.25rem 0.5rem;

    /* ========== 브랜드 뱃지 색상 변수 ========== */

    /* Soft 스타일 - 연한 배경 + 진한 텍스트 */
    --theme-badge-soft-tertiary-bg: var(--theme-color-tertiary);        /* bg-[#E8F4F8] */
    --theme-badge-soft-tertiary-text: var(--theme-color-primary);       /* text-[#408090] */
    --theme-badge-soft-tertiary-border: rgba(112, 160, 172, 0.2);       /* border-[#70A0AC]/20 */

    --theme-badge-soft-background-bg: var(--theme-color-background);    /* bg-[#F5F7FA] */
    --theme-badge-soft-background-text: var(--theme-color-accent);      /* text-[#354550] */
    --theme-badge-soft-background-border: var(--theme-color-border);    /* border-[#CCCCCC] */

    --theme-badge-soft-primary-bg: rgba(64, 128, 144, 0.1);             /* bg-[#408090]/10 */
    --theme-badge-soft-primary-text: var(--theme-color-accent);         /* text-[#354550] */
    --theme-badge-soft-primary-border: rgba(64, 128, 144, 0.3);         /* border-[#408090]/30 */

    /* Solid 스타일 - 진한 배경 + 흰색 텍스트 */
    --theme-badge-solid-accent-bg: var(--theme-color-accent);           /* bg-[#354550] */
    --theme-badge-solid-accent-text: #FFFFFF;                           /* text-white */

    --theme-badge-solid-secondary-bg: var(--theme-color-secondary);     /* bg-[#70A0AC] */
    --theme-badge-solid-secondary-text: #FFFFFF;                        /* text-white */

    --theme-badge-solid-primary-bg: var(--theme-color-primary);         /* bg-[#408090] */
    --theme-badge-solid-primary-text: #FFFFFF;                          /* text-white */

    --theme-badge-solid-dark-bg: var(--theme-color-text);               /* bg-[#2D2D2D] */
    --theme-badge-solid-dark-text: var(--theme-color-background);       /* text-[#F5F7FA] */

    /* Outline 스타일 - 투명 배경 + 테두리 */
    --theme-badge-outline-primary-border: var(--theme-color-primary);   /* border-[#408090] */
    --theme-badge-outline-primary-text: var(--theme-color-primary);     /* text-[#408090] */

    --theme-badge-outline-border-border: var(--theme-color-border);     /* border-[#CCCCCC] */
    --theme-badge-outline-border-text: var(--theme-color-secondary);    /* text-[#70A0AC] */

    --theme-badge-outline-dashed-border: var(--theme-color-secondary);  /* border-dashed-[#70A0AC] */
    --theme-badge-outline-dashed-text: var(--theme-color-secondary);    /* text-[#70A0AC] */

    --theme-badge-outline-accent-border: var(--theme-color-accent);     /* border-[#354550] */
    --theme-badge-outline-accent-text: var(--theme-color-accent);       /* text-[#354550] */
}

/* ===========================================
   뱃지 그룹 컨테이너
   =========================================== */

.card-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

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

.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);
}

/* ===========================================
   브랜드 뱃지 스타일 - Soft (연한 배경)
   =========================================== */

/* Soft Tertiary - bg-[#E8F4F8] text-[#408090] border-[#70A0AC]/20 */
.badge-soft-tertiary {
    background-color: var(--theme-badge-soft-tertiary-bg);
    color: var(--theme-badge-soft-tertiary-text);
    border: 1px solid var(--theme-badge-soft-tertiary-border);
}

/* Soft Background - bg-[#F5F7FA] text-[#354550] border-[#CCCCCC] */
.badge-soft-background {
    background-color: var(--theme-badge-soft-background-bg);
    color: var(--theme-badge-soft-background-text);
    border: 1px solid var(--theme-badge-soft-background-border);
}

/* Soft Primary - bg-[#408090]/10 text-[#354550] border-[#408090]/30 */
.badge-soft-primary {
    background-color: var(--theme-badge-soft-primary-bg);
    color: var(--theme-badge-soft-primary-text);
    border: 1px solid var(--theme-badge-soft-primary-border);
}

/* ===========================================
   브랜드 뱃지 스타일 - Solid (진한 배경)
   =========================================== */

/* Solid Accent - bg-[#354550] text-white */
.badge-solid-accent {
    background-color: var(--theme-badge-solid-accent-bg);
    color: var(--theme-badge-solid-accent-text);
    border: 1px solid transparent;
}

/* Solid Secondary - bg-[#70A0AC] text-white */
.badge-solid-secondary {
    background-color: var(--theme-badge-solid-secondary-bg);
    color: var(--theme-badge-solid-secondary-text);
    border: 1px solid transparent;
}

/* Solid Primary - bg-[#408090] text-white */
.badge-solid-primary {
    background-color: var(--theme-badge-solid-primary-bg);
    color: var(--theme-badge-solid-primary-text);
    border: 1px solid transparent;
}

/* Solid Dark - bg-[#2D2D2D] text-[#F5F7FA] */
.badge-solid-dark {
    background-color: var(--theme-badge-solid-dark-bg);
    color: var(--theme-badge-solid-dark-text);
    border: 1px solid transparent;
}

/* ===========================================
   브랜드 뱃지 스타일 - Outline (투명 배경 + 테두리)
   =========================================== */

/* Outline Primary - border-[#408090] text-[#408090] */
.badge-outline-primary {
    background-color: transparent;
    color: var(--theme-badge-outline-primary-text);
    border: 1px solid var(--theme-badge-outline-primary-border);
}

/* Outline Border - border-[#CCCCCC] text-[#70A0AC] */
.badge-outline-border {
    background-color: transparent;
    color: var(--theme-badge-outline-border-text);
    border: 1px solid var(--theme-badge-outline-border-border);
}

/* Outline Dashed - border-dashed-[#70A0AC] text-[#70A0AC] */
.badge-outline-dashed {
    background-color: transparent;
    color: var(--theme-badge-outline-dashed-text);
    border: 1px dashed var(--theme-badge-outline-dashed-border);
}

/* Outline Accent - border-[#354550] text-[#354550] */
.badge-outline-accent {
    background-color: transparent;
    color: var(--theme-badge-outline-accent-text);
    border: 1px solid var(--theme-badge-outline-accent-border);
}

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

@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 .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;
}