.dept-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 4px;
    vertical-align: middle;

    /* 🔥 여기 추가 */
    color: #fff !important;
}

/* ===============================
   공통
================================ */
.dept-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.dept-radio input {
    display: none;
}

.dept-label {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid;
    background-color: #fff;
    transition: all 0.15s ease-in-out;
}

/* ===============================
   Bootstrap 컬러 매핑
   (constants.py와 1:1 대응)
================================ */

/* 로봇 → primary */
.dept-로봇 .dept-label {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.dept-로봇 input:checked + .dept-label {
    background-color: var(--bs-primary);
    color: #fff;
}

/* 과학 → success */
.dept-과학 .dept-label {
    color: var(--bs-success);
    border-color: var(--bs-success);
}
.dept-과학 input:checked + .dept-label {
    background-color: var(--bs-success);
    color: #fff;
}

/* 창의수학 → warning */
.dept-창의수학 .dept-label {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}
.dept-창의수학 input:checked + .dept-label {
    background-color: var(--bs-warning);
    color: #fff;
}

/* 3D펜 → info */
.dept-3D펜 .dept-label {
    color: var(--bs-info);
    border-color: var(--bs-info);
}
.dept-3D펜 input:checked + .dept-label {
    background-color: var(--bs-info);
    color: #fff;
}

/* 항공드론 → danger */
.dept-항공드론 .dept-label {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}
.dept-항공드론 input:checked + .dept-label {
    background-color: var(--bs-danger);
    color: #fff;
}

/* 컴퓨터 → dark */
.dept-컴퓨터 .dept-label {
    color: var(--bs-dark);
    border-color: var(--bs-dark);
}
.dept-컴퓨터 input:checked + .dept-label {
    background-color: var(--bs-dark);
    color: #fff;
}

/* 전체 */
.dept-all .dept-label {
    color: #495057;
    border-color: #adb5bd;
}
.dept-all input:checked + .dept-label {
    background-color: #495057;
    color: #fff;
}