.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #dee2e6;
    transition: transform 0.2s, background-color 0.2s;
}

.circle.active {
    transform: scale(1.4);
    background-color: #198754; /* Bootstrap success green */
}

.circle.strong {
    background-color: #dc3545; /* Bootstrap danger red */
}

/* 기본 라이트 모드 */
body.light {
    background-color: #ffffff;
    color: #222;
}

/* 다크 모드 스타일 */
body.dark {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark .circle {
    background-color: #444;
}
body.dark .circle.active {
    background-color: #4caf50;
}
body.dark .circle.strong {
    background-color: #dc3545;
}
body.dark .form-select,
body.dark .form-range,
body.dark .btn {
    background-color: #333;
    color: #f0f0f0;
    border-color: #666;
}

body.dark footer p {
    color: #ccc;
}