/* 원형 진척도 스타일 */
.progress-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-circle svg {
    transform: rotate(-90deg);
    overflow: unset;
}

.progress-circle-bg {
    fill: none;
    stroke: var(--bs-gray-400);
    stroke-linecap: butt;
}

.progress-circle-fill {
    fill: none;
    stroke: var(--bs-gray-400);
    stroke-linecap: butt;
    transition: stroke-dashoffset 0.5s ease-in-out;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #343a40;
}

/* 크기 변형 */
.progress-circle.xs svg {
    width: 16px;
    height: 16px;
}

.progress-circle.sm svg {
    width: 80px;
    height: 80px;
}

.progress-circle.sm .progress-circle-text {
    font-size: 16px;
}

.progress-circle.lg svg {
    width: 160px;
    height: 160px;
}

.progress-circle.lg .progress-circle-text {
    font-size: 32px;
}

/* 색상 변형 */
.progress-circle.primary .progress-circle-fill {
    stroke: #3436b7;
}

.progress-circle.success .progress-circle-fill {
    stroke: #28a745;
}

.progress-circle.danger .progress-circle-fill {
    stroke: #dc3545;
}

.progress-circle.warning .progress-circle-fill {
    stroke: #ffc107;
}

/* 진행도 100% 완료 */
.progress-circle.success-state .progress-circle-fill {
    stroke: #28a745;
}

/* 기본 백분율 표시 */
.progress-circle[data-progress] .progress-circle-text::after {
    content: '%';
    font-size: 0.7em;
    margin-left: 2px;
}

/* "문제" 단위 표시 */
.progress-circle.problem-unit .progress-circle-text::after {
    content: '문제';
    font-size: 0.5em;
    margin-left: 2px;
}

/* 텍스트 숨김 */
.progress-circle.no-text .progress-circle-text {
    display: none;
}

/* 반응형 조정 */
@media (max-width: 576px) {
    .progress-circle svg {
        width: 80px;
        height: 80px;
    }

    .progress-circle-text {
        font-size: 18px;
    }

    .progress-circle.lg svg {
        width: 120px;
        height: 120px;
    }

    .progress-circle.lg .progress-circle-text {
        font-size: 24px;
    }
}