/* =====================================================================
 *  badge.css — 범용 색상 뱃지 (어느 섹션·페이지든 붙여 쓰는 공용 컴포넌트)
 * ---------------------------------------------------------------------
 *  사용법
 *    <span class="badge badge-red">마감</span>
 *    <span class="badge badge-gold">골드</span>
 *    <span class="badge">기본</span>          ← 색 생략 시 blue
 *
 *  적용
 *    1) <link rel="stylesheet" href="/assets/css/badge.css">
 *    2) 또는 아래 내용을 페이지 <style> 안에 붙여넣기
 *
 *  ★ 외부 CSS 영향 차단(격리)
 *    .badge 는 'all: initial' 로 모든 상속·외부 규칙을 초기화한 뒤
 *    필요한 속성만 다시 명시한다. → 주변 섹션의 font-size·text-transform·
 *    letter-spacing·color·line-height 등이 뱃지에 새어들지 않는다.
 *    (최신 브라우저 및 앱 WebView 전부 지원. IE11 제외)
 * ===================================================================== */

/* ── 기본(공통) : 외부영향 차단 + 뱃지 스타일 명시 ── */
.badge {
    all: initial;
    /* ★ 외부 CSS/상속 영향 초기화 */
    box-sizing: border-box;
    display: inline-block;
    /* 어디에 붙여도 안 깨지게 */
    vertical-align: middle;
    font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    color: #fff;
    background: #2b7fff;
    /* 기본색(blue) */
    border: 0;
    border-radius: 5px;
    padding: 2px 7px;
    margin: 0;
    /*cursor: pointer;*/
    /* 클릭용이 아니면 이 줄만 지우면 됨 */
}

/* ── 기본 15색 : <span class="badge badge-XXX"> ── */
.badge.badge-blue {
    background: #2b7fff;
}

/* 파랑(기본) */
.badge.badge-sky {
    background: #0284c7;
}

/* 하늘 */
.badge.badge-cyan {
    background: #0891b2;
}

/* 청록 */
.badge.badge-teal {
    background: #0d9488;
}

/* 틸 */
.badge.badge-green {
    background: #16a34a;
}

/* 초록 */
.badge.badge-lime {
    background: #4d7c0f;
}

/* 라임 */
.badge.badge-amber {
    background: #b45309;
}

/* 앰버 */
.badge.badge-orange {
    background: #ea580c;
}

/* 주황 */
.badge.badge-red {
    background: #dc2626;
}

/* 빨강 */
.badge.badge-rose {
    background: #e11d48;
}

/* 로즈 */
.badge.badge-pink {
    background: #db2777;
}

/* 핑크 */
.badge.badge-fuchsia {
    background: #c026d3;
}

/* 푸시아 */
.badge.badge-purple {
    background: #9333ea;
}

/* 보라 */
.badge.badge-indigo {
    background: #4f46e5;
}

/* 인디고 */
.badge.badge-slate {
    background: #475569;
}

/* 슬레이트(회색) */

/* ── 골드·브라운 5색 추가 ── */
.badge.badge-gold {
    background: #97720a;
}

/* 골드 */
.badge.badge-bronze {
    background: #86632b;
}

/* 브론즈 */
.badge.badge-camel {
    background: #946840;
}

/* 카멜(낙타색) */
.badge.badge-brown {
    background: #6f5244;
}

/* 브라운 */
.badge.badge-coffee {
    background: #5a4130;
}

/* 커피(다크브라운) */