/* 학습 화면만 공간을 줄인다. 칠판 홈은 기존 헤더와 배치를 유지한다. */
@media (max-width: 1366px), (max-height: 800px) {
    .learning-page {
        --learning-stage-height: max(360px, min(500px, calc(100vh - 144px)));
    }

    .learning-page .header-inner {
        padding: 8px 24px;
        gap: 16px;
    }

    .learning-page .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .learning-page .brand-mark .icon {
        width: 22px;
        height: 22px;
    }

    .learning-page .brand-name {
        font-size: 21px;
    }

    .learning-page .brand-subtitle {
        font-size: 13px;
    }

    .learning-page .lesson-main {
        padding: 12px 24px 16px;
    }

    .learning-page .lesson-navigation {
        gap: 12px;
        margin-bottom: 12px;
    }

    .learning-page .back-link {
        min-height: 44px;
        padding: 8px 14px;
    }

    .learning-page .letter-demo-stage {
        min-height: var(--learning-stage-height);
    }

    .learning-page .letter-mentor-scene {
        padding: 16px 10px;
    }

    .learning-page .mentor-composition {
        width: min(100%, calc((var(--learning-stage-height) - 34px) * 2 / 3));
    }

    .learning-page .letter-demo-content,
    .learning-page .letter-listening-content {
        gap: 14px;
        padding: 18px;
    }

    /* SVG 종횡비를 유지하면서 버튼·여백까지 화면 높이에 포함한다. */
    .learning-page .letter-demo-button {
        width: min(100%, 340px, calc((var(--learning-stage-height) - 146px) * 8 / 9 + 38px));
    }

    .learning-page .sequence-letter-card {
        width: min(100%, 340px, calc((var(--learning-stage-height) - 222px) * 8 / 9 + 38px));
    }

    .learning-page .sequence-status,
    .learning-page .sequence-status:empty {
        display: block;
        min-height: 25px;
    }

    .learning-page .lulu-reaction {
        height: calc(var(--learning-stage-height) - 34px);
        padding-top: 44px;
    }

    .learning-page .letter-mentor-scene .lulu-reaction-image {
        height: calc(var(--learning-stage-height) - 78px);
    }

    .learning-page .letter-listening-content h1 {
        font-size: 28px;
    }

    .learning-page .listening-actions {
        width: 100%;
        max-width: 330px;
    }

    .learning-page .listening-actions .secondary-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        padding: 12px 10px;
        font-size: 15px;
    }
}

/* 주소창이 나타나도 안정적으로 확보되는 높이를 우선한다. */
@supports (height: 100svh) {
    @media (max-width: 1366px), (max-height: 800px) {
        .learning-page {
            --learning-stage-height: max(360px, min(500px, calc(100svh - 144px)));
        }
    }
}

@media (max-width: 640px) {
    .learning-page .header-inner {
        padding-right: 16px;
        padding-left: 16px;
    }

    .learning-page .lesson-main {
        padding-right: 16px;
        padding-left: 16px;
    }

    .learning-page .lesson-context {
        font-size: 14px;
    }

    .learning-page .letter-mentor-scene {
        height: 116px;
        padding: 8px;
    }

    .learning-page .mentor-composition {
        width: min(100%, 66.667px);
    }

    .learning-page .letter-demo-content,
    .learning-page .letter-listening-content {
        gap: 12px;
        padding: 12px 22px 20px;
    }

    .learning-page .letter-demo-button,
    .learning-page .sequence-letter-card {
        width: min(100%, 220px);
    }

    .learning-page .lulu-reaction {
        height: 100px;
        padding-top: 26px;
    }

    .learning-page .letter-mentor-scene .lulu-reaction-image {
        height: 74px;
    }

    .learning-page .lulu-reaction-message {
        padding: 4px 10px;
        font-size: 12px;
    }

    .learning-page .letter-listening-content h1 {
        font-size: 24px;
    }

    .learning-page .letter-listening-content {
        padding-bottom: 16px;
    }
}