/* 달크로즈 섹션 전용 스타일 - 2열 배치 및 긴 답안들을 위한 레이아웃 최적화 */
#dalcroze .grade-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
}

#dalcroze .grade-container > div {
    min-width: 0; /* Grid에서 자동 크기 조정을 위해 */
    width: 100%;
}

#dalcroze .assessment-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

#dalcroze .inline-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
}

#dalcroze input.fit-answer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.6rem 1rem;
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 특별히 긴 답안들을 위한 스타일 */
#dalcroze input.fit-answer[data-answer*='음악적 리듬을 몸동작으로 표현하는'],
#dalcroze
    input.fit-answer[data-answer*='내청능력(악보를 읽고 음 떠올리는 능력)'],
#dalcroze input.fit-answer[data-answer*='유리드 믹스, 솔페즈에서의'] {
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
    height: auto;
    min-height: 2.5rem;
}

/* 달크로즈 섹션의 테이블 레이아웃 개선 */
#dalcroze table {
    width: 100%;
    table-layout: fixed;
}

#dalcroze td {
    padding: 0.5rem;
    vertical-align: top;
    width: 100%;
}

/* 실천적 문제 중심 학습 섹션의 빈칸 너비 조정 - 답안 길이에 비례 */
#practical-quiz-main .overview-question input[data-answer] {
    width: auto !important;
    min-width: max(
        8ch,
        calc(var(--answer-length, 10) * 1.2ch + 2rem)
    ) !important;
    max-width: 25ch !important;
}

/* 특정 답안들에 대한 개별 너비 조정 */
#practical-quiz-main .overview-question input[data-answer='개인'],
#practical-quiz-main .overview-question input[data-answer='타인'],
#practical-quiz-main .overview-question input[data-answer='사회'] {
    width: auto !important;
    min-width: 6ch !important;
    max-width: 8ch !important;
}

#practical-quiz-main .overview-question input[data-answer='가치판단'] {
    width: auto !important;
    min-width: 8ch !important;
    max-width: 12ch !important;
}

#practical-quiz-main .overview-question input[data-answer='실천적 추론'] {
    width: auto !important;
    min-width: 12ch !important;
    max-width: 18ch !important;
}

#practical-quiz-main .overview-question input[data-answer='실천적 문제해결'] {
    width: auto !important;
    min-width: 14ch !important;
    max-width: 20ch !important;
}

/* 기술적 문제해결 과정 섹션의 빈칸 너비 조정 - 답안 길이에 비례 */
#practical-quiz-main .overview-question input[data-answer='불편함'],
#practical-quiz-main .overview-question input[data-answer='결점'],
#practical-quiz-main .overview-question input[data-answer='개선'] {
    width: auto !important;
    min-width: 6ch !important;
    max-width: 8ch !important;
}

#practical-quiz-main .overview-question input[data-answer='발명'] {
    width: auto !important;
    min-width: 6ch !important;
    max-width: 8ch !important;
}

#practical-quiz-main
    .overview-question
    input[data-answer='기술적 문제해결 능력'] {
    width: auto !important;
    min-width: 16ch !important;
    max-width: 22ch !important;
}

@media (max-width: 768px) {
    /* Guarantee minimum tap target height */
    .btn,
    .tab {
        min-height: 44px;
    }
    /* Keep controls readable without triggering zoom */
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    /* 달크로즈 모바일 반응형 */
    #dalcroze .grade-container {
        grid-template-columns: 1fr; /* 모바일에서는 1열 배치 */
        gap: 1.5rem;
    }

    #dalcroze input.fit-answer {
        font-size: 1.1rem;
        padding: 0.5rem 0.8rem;
    }

    #dalcroze
        input.fit-answer[data-answer*='음악적 리듬을 몸동작으로 표현하는'],
    #dalcroze
        input.fit-answer[data-answer*='내청능력(악보를 읽고 음 떠올리는 능력)'],
    #dalcroze input.fit-answer[data-answer*='유리드 믹스, 솔페즈에서의'] {
        font-size: 1rem;
        padding: 0.6rem 0.8rem;
    }
}

/* 도형 과목 outline-title - 기본 스타일 (# 없는 경우만) */
#geometry-quiz-main .outline-title:not([data-is-topic='true']) {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary);
}

/* # 파트별 시각적 구분 - 기존 사이트 스타일과 조화 */
#geometry-quiz-main .creative-block {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
}

/* # 기호로 시작하는 주요 섹션 강조 - 붉은색 강제 적용 */
#geometry-quiz-main .creative-block .outline-title[data-is-topic='true'],
#geometry-quiz-main .outline-title[data-is-topic='true'] {
    font-size: 2.6rem !important;
    color: #ff5555 !important;
    margin: 2rem 0 1.5rem 0 !important;
    position: relative;
    font-weight: 700 !important;
}

/* # 문자로 시작하는 모든 outline-title (백업 선택자) */
#geometry-quiz-main
    .outline-title:is(
        [data-is-topic='true'],
        :where([data-is-topic]:not([data-is-topic='false']))
    ) {
    font-size: 2.6rem !important;
    color: #ff5555 !important;
    margin: 2rem 0 1.5rem 0 !important;
    position: relative;
    font-weight: 700 !important;
}

/* # 섹션 하단에 구분선 추가 */
#geometry-quiz-main
    .creative-block:has(.outline-title[data-is-topic='true'])::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin: 1.5rem 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--secondary) 20%,
        var(--secondary) 80%,
        transparent
    );
    border-radius: 1px;
}

/* 하위 섹션 ([방법1], [학문 수학] 등) 스타일 - 기본 스타일 덮어쓰기 */
#geometry-quiz-main .outline-title:not([data-is-topic='true']):contains('[') {
    font-size: 1.8rem !important;
    color: var(--secondary) !important;
    margin: 1rem 0 0.8rem 0 !important;
    font-weight: 600 !important;
}

/* 체육(뒷교) 전용 스타일 */
.pe-back-section {
    margin-bottom: 2.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--primary);
}

.pe-back-section-title {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-weight: bold;
    display: block;
}

.pe-back-section-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.pe-back-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    line-height: 1.6;
    font-size: 1.6rem;
}

.pe-back-subsection {
    margin-bottom: 1.8rem;
}

.pe-back-sublist {
    margin-left: 2rem;
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.pe-back-main-item {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.pe-back-sub-item {
    padding-left: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.pe-back-input {
    flex: 1;
    min-width: 20ch !important;
    max-width: 50ch !important;
    padding: 0.6rem 1rem !important;
    border: 2px solid var(--secondary) !important;
    border-radius: 6px !important;
    background: var(--bg-dark) !important;
    color: var(--text-light) !important;
    font-size: 1.4rem !important;
    font-family: var(--font-display) !important;
    transition: all 0.2s ease !important;
}

.pe-back-input:focus {
    border-color: var(--text-light) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24) !important;
    outline: none !important;
}

.pe-back-input.correct {
    border-color: var(--success) !important;
    background: rgba(0, 255, 127, 0.1) !important;
}

.pe-back-input.incorrect {
    border-color: var(--danger) !important;
    background: rgba(255, 71, 87, 0.1) !important;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .pe-back-section {
        padding: 1rem;
        margin-bottom: 2rem;
    }

    .pe-back-section-title {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .pe-back-item {
        font-size: 1.4rem;
        gap: 0.6rem;
    }

    .pe-back-input {
        min-width: 15ch !important;
        max-width: 40ch !important;
        font-size: 1.3rem !important;
        padding: 0.5rem 0.8rem !important;
    }

    .pe-back-sublist {
        margin-left: 1rem;
    }
}

/* 배지 스타일 */
.activity-badge {
    display: inline-block;
    background-color: var(--primary);
    color: var(--text-light);
    padding: 0.3rem 0.8rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    margin-right: 0.8rem;
    border: 1px solid var(--secondary);
}