.char-stage-dropdown { position: relative; display: inline-flex; }
.char-stage-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 180px;
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: rgba(18, 12, 32, .45);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease;
}
.char-stage-toggle-btn:hover,
.char-stage-toggle-btn.active {
    border-color: #fff;
    background: rgba(18, 12, 32, .65);
}
.char-stage-toggle-btn:focus { outline: none; }
.char-stage-toggle-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.char-stage-toggle-count {
    flex-shrink: 0;
    font-family: "Mona12", "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,.7);
}
.char-stage-toggle-btn i { flex-shrink: 0; font-size: 10px; transition: transform .18s ease; }
.char-stage-toggle-btn.active i { transform: rotate(180deg); }

.char-stage-item::before { display: none; }
.char-stage-item-no {
    flex-shrink: 0;
    min-width: 22px;
    padding: 0 3px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 3px;
    font-family: "Mona12", "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    color: rgba(255,255,255,.8);
}
.char-stage-item.active .char-stage-item-no,
.char-stage-item:hover .char-stage-item-no {
    border-color: currentColor;
    color: inherit;
}