/* 시작 모달 공통 보강 */
.modal-section-title {
    margin-bottom: 0.8rem;
    font-size: 2rem;
}

.topic-section-title {
    margin-top: 1.5rem;
}

.model-next-action {
    text-align: center;
    margin-top: 1rem;
}

.subject-selector {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr)) !important;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.topic-submenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
}

.hidden-subject-mapping {
    display: none;
}

/* 효과음 스위치 스타일 */

#sound-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
    position: static;

    z-index: 10;
}

.sound-toggle-label {
    display: flex;

    align-items: center;

    gap: var(--space-sm);

    cursor: pointer;

    font-family: var(--font-display);

    font-size: 1.4rem;

    color: var(--text-light);

    user-select: none;
}

.sound-toggle-text {
    font-weight: 600;

    letter-spacing: 0;
}

.sound-toggle-switch {
    position: relative;

    display: inline-block;

    width: 50px;

    height: 24px;
}

#sound-toggle {
    opacity: 0;

    width: 0;

    height: 0;
}

.sound-toggle-slider {
    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: var(--bg-dark);

    border: 0.2rem solid var(--border-strong);

    border-radius: 0;

    transition: none;

    box-shadow: 0.2rem 0.2rem 0 var(--border-strong);
}

.sound-toggle-slider:before {
    position: absolute;

    content: '';

    height: 16px;

    width: 16px;

    left: 2px;

    bottom: 2px;

    background: var(--text-dark);

    border-radius: 0;

    transition: none;

    box-shadow: none;
}

#sound-toggle:checked + .sound-toggle-slider {
    background: var(--primary);

    border-color: var(--border-strong);

    box-shadow: 0.2rem 0.2rem 0 var(--border-strong);
}

#sound-toggle:checked + .sound-toggle-slider:before {
    transform: translateX(26px);

    background-color: var(--text-light);

    box-shadow: none;
}

.sound-toggle-label:hover .sound-toggle-slider {
    border-color: var(--accent);

    box-shadow: 0.3rem 0.3rem 0 var(--border-strong);
}

#sound-toggle:checked + .sound-toggle-slider:hover {
    box-shadow: 0.3rem 0.3rem 0 var(--border-strong);
}

/* 시작 모달 컨테이너를 relative로 설정하여 절대 위치 기준점 제공 */

#settings-panel {
    position: relative;
}

@media (max-width: 520px) {
    .subject-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}