html {
    font-size: 18px;
}

.card {
    width: 100%;
    /*height: 400px;*/
}

.card-header i.bi {
    margin: 0;
    padding: 0;
    line-height: 1;       /* 행간을 딱 아이콘 크기에 맞게 */
    vertical-align: middle; /* 텍스트 베이스라인과 맞춤 */
}

.progress {
    height: 20px;
}

.progress-bar {
    font-size: 1rem;
}

.badge {
    font-size: 0.9rem;
}

#question {
    white-space: pre-wrap;
}

#fanfare-overlay {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    width: 350px;
    height: 350px;
}

.icon-disabled {
    pointer-events: none;
    opacity: 0.5; /* 시각적으로 비활성화 표시 */
    cursor: default;
}

.bi {
    cursor: pointer; /* 마우스 커서가 손 모양으로 바뀌게 */
    /*transition: fill 0.3s ease; !* 색상 변환에 부드러운 전환 추가 *!*/
}

.bi:hover {
    fill: #222222; /* 아이콘 색상 변경 (마우스를 올렸을 때 더 진하게) */
}