/* Mobile responsive patch - 2026-06-01
   목적: PC 기준 레이아웃을 모바일에서도 잘리지 않게 보정합니다.
   적용 범위: 900px 이하 화면에서 카드/표/입력창/버튼/모달/사이드바 주변 레이아웃을 1열 중심으로 전환합니다. */

@media (max-width: 900px) {
  :root {
    --mobile-page-x: clamp(12px, 4vw, 18px);
    --mobile-card-radius: 18px;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body,
  body.mypage-body,
  body.study-tools-body,
  body.practice-focus-body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  #app-wrapper,
  body.mypage-body #app-wrapper.mypage-app-wrapper,
  body.study-tools-body #app-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  .main-content,
  body.mypage-body .main-content.mypage-main,
  body.study-tools-body .main-content,
  .portal-main,
  .unlock-main {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: calc(72px + env(safe-area-inset-top)) var(--mobile-page-x) calc(22px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .main-content > *,
  .portal-main > *,
  .unlock-main > *,
  .portal-page,
  .dashboard-page,
  .mypage-page,
  .toksori-page,
  .unlock-page,
  .ai-teacher-room-page {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  img,
  svg,
  canvas,
  video,
  audio {
    max-width: 100% !important;
  }

  audio {
    width: 100% !important;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  label,
  span,
  b,
  strong,
  em,
  small,
  a,
  li {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  /* 상단 헤더/액션 영역: 모바일에서는 제목과 버튼이 세로로 정렬됩니다. */
  .header,
  .page-header,
  .practice-header,
  .clean-head,
  .compact-head,
  .panel-head,
  .portal-card-head,
  .work-card-header,
  .result-header-row,
  .review-header-row,
  .unlock-header,
  .unlock-live-top,
  .admin-head,
  .archive-head,
  .mypage-record-head,
  .insight-head,
  .ai-room-section-head,
  .ai-coaching-head,
  .ai-room-results-head,
  .table-top,
  .viewer-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .header-actions,
  .page-actions,
  .top-actions,
  .admin-actions,
  .modal-actions,
  .toolbar,
  .toolbar-left,
  .btn-row,
  .btn-group,
  .tool-actions,
  .practice-actions,
  .paragraph-buttons,
  .audio-controls,
  .audio-control-row,
  .control-bar,
  .controls-bar,
  .history-control-row,
  .compact-action-row,
  .compact-action-buttons,
  .wrong-review-actions,
  .unlock-header-actions,
  .unlock-admin-actions,
  .unlock-submit-row,
  .ai-coaching-actions,
  .portal-topbar-actions,
  .my-ai-premium-actions,
  .study-tabbar,
  .cause-buttons,
  .auth-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .header-actions > *,
  .page-actions > *,
  .top-actions > *,
  .admin-actions > *,
  .modal-actions > *,
  .toolbar > *,
  .toolbar-left > *,
  .btn-row > *,
  .btn-group > *,
  .tool-actions > *,
  .practice-actions > *,
  .paragraph-buttons > *,
  .audio-controls > *,
  .audio-control-row > *,
  .control-bar > *,
  .controls-bar > *,
  .history-control-row > *,
  .compact-action-row > *,
  .compact-action-buttons > *,
  .wrong-review-actions > *,
  .unlock-header-actions > *,
  .unlock-admin-actions > *,
  .unlock-submit-row > *,
  .ai-coaching-actions > *,
  .portal-topbar-actions > *,
  .my-ai-premium-actions > *,
  .study-tabbar > *,
  .cause-buttons > *,
  .auth-actions > * {
    min-width: 0 !important;
  }

  /* 카드/패널 폭 보정 */
  .card,
  .card-box,
  .dashboard-card,
  .portal-card,
  .stat-card,
  .study-panel,
  .study-insight,
  .insight-card,
  .insight-panel,
  .ai-coaching-card,
  .ai-learning-chart-card,
  .ai-learning-error-card,
  .ai-learning-prescription-card,
  .ai-room-create-card,
  .ai-room-results-card,
  .admin-card,
  .progress-card,
  .level-card,
  .material-card,
  .mode-card,
  .paragraph-card,
  .source-panel,
  .practice-card,
  .audio-panel,
  .history-card,
  .podium-card,
  .setup-panel,
  .control-panel,
  .audio-player-card,
  .result-card,
  .review-card,
  .history-panel,
  .unlock-admin-card,
  .unlock-test-card,
  .unlock-live-panel,
  .unlock-break-panel,
  .unlock-subject-admin-card,
  .mypage-sidebar-panel,
  .mypage-workspace,
  .my-summary-hero-card,
  .my-diagnosis-card,
  .my-today-card,
  .my-error-card,
  .my-action-card,
  .practice-flow-panel,
  .full-panel-card,
  .table-panel,
  .keyboard-panel,
  .dict-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: var(--mobile-card-radius) !important;
    box-sizing: border-box !important;
  }

  /* 그리드/2열/3열/4열 화면을 1열로 전환 */
  .stats-row,
  .stats-grid,
  .study-stat-grid,
  .stat-grid,
  .status-grid,
  .status-display,
  .portal-metric-grid,
  .dashboard-stat-grid,
  .dashboard-home-main,
  .dashboard-main-grid,
  .dash-content-grid,
  .dashboard-focus-grid,
  .dashboard-bottom-grid,
  .dashboard-summary-grid,
  .dashboard-ai-status-grid,
  .dashboard-home-pills,
  .dashboard-goal-summary,
  .dashboard-feedback-summary,
  .ai-room-workbench,
  .ai-learning-stat-grid,
  .ai-learning-chart-grid,
  .ai-coaching-grid,
  .ai-room-mini-info,
  .ai-coaching-score-strip,
  .admin-grid,
  .unlock-admin-grid,
  .unlock-subject-admin-grid,
  .unlock-status-grid,
  .unlock-test-ready,
  .unlock-audio-display,
  .unlock-break-panel,
  .unlock-result-details,
  .content-grid,
  .dictionary-layout,
  .study-layout,
  .setup-grid,
  .setup-panel,
  .setup-panel .config-row,
  .result-summary-grid,
  .config-row,
  .clean-config-row,
  .audio-setup,
  .input-layout-col,
  .compact-practice-bar,
  .compact-file-row,
  .compact-review-row,
  .practice-flow-panel,
  .segment-form,
  .quick-record,
  .number-drill .drill-phrases,
  .teacher-brief-grid,
  .intermediate-summary-grid,
  .prescription-grid,
  .promotion-metrics,
  .exam-sim-grid,
  .advisor-grid,
  .insight-grid,
  .insight-bottom,
  .coach-grid,
  .coach-summary-strip,
  .upgrade-main,
  .exam-form,
  .dday-form,
  .memo-input,
  .simple-focus-grid,
  .simple-detail-grid,
  .study-shortcut-grid,
  .mypage-shell,
  .my-summary-hero-main,
  .my-summary-hero-stats,
  .my-summary-board,
  .my-account-grid,
  .my-compact-metrics,
  .portal-profile-list,
  .feedback-board,
  .wrongnote-board,
  .portal-filter-pills,
  .auth-card .insight-grid,
  .auth-card .insight-bottom {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .mid-section,
  .top-section,
  .dashboard-grid,
  .practice-layout,
  .abbr-layout,
  .portal-stack,
  .ladder-box,
  .training-list,
  .assignment-list,
  .weak-list,
  .retry-list,
  .intermediate-level-board,
  .intermediate-recent-list,
  .history-list,
  .my-action-list,
  .dashboard-goal-list,
  .dashboard-routine-list,
  .level-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .training-item,
  .assignment-row,
  .weak-item,
  .retry-item,
  .intermediate-recent-item,
  .level-row-head,
  .criteria-item,
  .memo-row,
  .signal-item,
  .error-row,
  .abbr-wrong-item,
  .graduation-chip,
  .unlock-chance-control,
  .unlock-chance-summary,
  .material-meta,
  .admin-file-row,
  .search-row,
  .dual-search,
  .settings-row,
  .time-info,
  .game-info-bar,
  .result-box,
  .history-item,
  .portal-card-head,
  .dashboard-ai-teacher-entry,
  .ai-room-results-controls,
  .audio-meta-row,
  .advanced-toggle-line {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 9px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .level-file-list,
  .portal-chip-row,
  .ai-room-chip-row,
  .review-legend,
  .mode-status,
  .unlock-course-tabs {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  .study-tabbar a,
  .portal-btn,
  .panel-link-btn,
  .file-load-btn,
  .personal-load-chip,
  .file-open-btn,
  .file-button,
  .file-label,
  .mini-file-label,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-subtle,
  .btn-reset,
  .btn-grade,
  .btn-main,
  .btn-sub,
  .btn-login,
  .btn-start,
  .btn-rank,
  .btn-clean,
  .btn-tts,
  .btn-s,
  .grade-action-btn,
  .save-note-btn,
  .clear-btn,
  .replay-btn,
  .resume-btn,
  .primary-btn,
  .primary-create,
  button:not(.mobile-menu-btn):not(.sidebar-close-btn):not(.modal-close):not(.close-btn) {
    min-height: 42px;
    white-space: normal !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 1rem !important;
  }

  input,
  select,
  textarea,
  .styled-input,
  .styled-textarea,
  .source-readonly,
  .modal-ta,
  .admin-source,
  .inp-box,
  .clean-input-area,
  .review-view,
  .diff-text,
  .word-preview,
  .teacher-comment-box,
  .report-panel pre,
  .error-list-box,
  .unlock-field,
  .time-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  textarea,
  .styled-textarea,
  .admin-source,
  .inp-box,
  .clean-input-area,
  .source-readonly,
  .modal-ta {
    min-height: 160px !important;
    resize: vertical !important;
  }

  .source-readonly,
  .review-view,
  .diff-text,
  .error-list-box,
  .word-preview,
  .table-scroll,
  .table-wrap,
  .portal-table-wrap,
  .rank-table-wrap,
  .keyboard-stage,
  #keyboardMount,
  .history-list,
  .ai-room-result-list,
  .unlock-admin-files,
  .admin-abbr-preview {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll,
  .table-wrap,
  .portal-table-wrap,
  .rank-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }

  table,
  .table,
  .simple-table {
    width: 100% !important;
    min-width: 560px !important;
    table-layout: auto !important;
  }

  .portal-table-wrap table,
  .table-wrap table,
  .table-scroll table,
  .rank-table-wrap table {
    display: table !important;
  }

  th,
  td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .modal-overlay,
  .unlock-modal {
    padding: 12px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .modal-box,
  .modal-content,
  .unlock-modal-box,
  .auth-card {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .auth-shell {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 18px var(--mobile-page-x) !important;
    align-items: flex-start !important;
  }

  .auth-title {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  .login-art,
  .circle {
    display: none !important;
  }

  .login-form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px var(--mobile-page-x) !important;
  }

  .podium-card,
  .podium-item,
  .p-1,
  .p-2,
  .p-3 {
    transform: none !important;
  }

  .podium-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .rank-name,
  .profile-name,
  .intermediate-file-chip span,
  .portal-label,
  .stat-value,
  .score-value {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-menu-btn {
    touch-action: manipulation;
  }
}

@media (max-width: 640px) {
  .main-content,
  body.mypage-body .main-content.mypage-main,
  body.study-tools-body .main-content,
  .portal-main,
  .unlock-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 {
    font-size: clamp(1.35rem, 7vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }

  h2,
  .page-title h2,
  .panel-head h2,
  .card-title {
    font-size: clamp(1.15rem, 5.6vw, 1.55rem) !important;
    line-height: 1.25 !important;
  }

  .card,
  .card-box,
  .dashboard-card,
  .portal-card,
  .study-panel,
  .admin-card,
  .progress-card,
  .practice-card,
  .source-panel,
  .result-card,
  .review-card,
  .unlock-admin-card,
  .unlock-test-card,
  .unlock-live-panel,
  .auth-card {
    padding: 16px !important;
  }

  .header-actions > *,
  .page-actions > *,
  .top-actions > *,
  .admin-actions > *,
  .modal-actions > *,
  .toolbar > *,
  .toolbar-left > *,
  .btn-row > *,
  .btn-group > *,
  .tool-actions > *,
  .practice-actions > *,
  .paragraph-buttons > *,
  .audio-controls > *,
  .audio-control-row > *,
  .control-bar > *,
  .controls-bar > *,
  .history-control-row > *,
  .compact-action-row > *,
  .compact-action-buttons > *,
  .wrong-review-actions > *,
  .unlock-header-actions > *,
  .unlock-admin-actions > *,
  .unlock-submit-row > *,
  .portal-topbar-actions > *,
  .my-ai-premium-actions > *,
  .auth-actions > *,
  .ai-coaching-actions > * {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .study-tabbar a,
  .unlock-course-tabs button,
  .mode-btn,
  .mode-chip,
  .cause-buttons button {
    flex: 1 1 calc(50% - 8px) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .score-circle {
    width: min(58vw, 180px) !important;
    height: min(58vw, 180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  table,
  .table,
  .simple-table {
    min-width: 500px !important;
  }

  .review-view,
  .diff-text,
  .source-readonly,
  .error-list-box {
    font-size: .92rem !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 430px) {
  .main-content,
  body.mypage-body .main-content.mypage-main,
  body.study-tools-body .main-content,
  .portal-main,
  .unlock-main {
    padding-top: calc(68px + env(safe-area-inset-top)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .study-tabbar a,
  .unlock-course-tabs button,
  .mode-btn,
  .mode-chip,
  .cause-buttons button {
    flex-basis: 100% !important;
  }

  .stat-card,
  .dashboard-stat-card,
  .study-stat,
  .portal-card,
  .card-box {
    min-height: auto !important;
  }

  table,
  .table,
  .simple-table {
    min-width: 460px !important;
  }
}

/* mobile-practice-split-20260601-v2
   보고치기 모바일 집중 레이아웃: 원문을 상단에 고정하고 입력창/채점 버튼이 화면 밖으로 밀리지 않게 보정합니다. */
@media (max-width: 760px) {
  body:not(.listen-mode) .study-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body:not(.listen-mode) .source-panel {
    position: sticky !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    z-index: 35 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
  }

  body:not(.listen-mode) .source-panel-top {
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding-bottom: 7px !important;
  }

  body:not(.listen-mode) .source-panel-top .panel-title {
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }

  body:not(.listen-mode) .source-tools {
    gap: 4px !important;
  }

  body:not(.listen-mode) .source-tools .abbr-toggle,
  body:not(.listen-mode) .source-tools .abbr-count,
  body:not(.listen-mode) .source-tools .count-badge {
    min-height: 27px !important;
    padding: 3px 7px !important;
    font-size: .68rem !important;
  }

  body:not(.listen-mode) .pace-status-line {
    margin-bottom: 7px !important;
    padding: 6px 8px !important;
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }

  body:not(.listen-mode) .source-readonly,
  body:not(.listen-mode) .pace-panel {
    height: 30dvh !important;
    min-height: 150px !important;
    max-height: 240px !important;
    padding: 12px !important;
    border-radius: 13px !important;
    font-size: .97rem !important;
    line-height: 1.68 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.listen-mode) .practice-card {
    padding: 10px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  body:not(.listen-mode) .practice-card > .panel-top {
    display: none !important;
  }

  body:not(.listen-mode) .practice-card .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 7px !important;
  }

  body:not(.listen-mode) .practice-card .stat-card {
    min-height: 0 !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
  }

  body:not(.listen-mode) .practice-card .stat-label {
    font-size: .58rem !important;
    line-height: 1.1 !important;
  }

  body:not(.listen-mode) .practice-card .stat-value {
    margin-top: 2px !important;
    font-size: .9rem !important;
    line-height: 1.1 !important;
  }

  body:not(.listen-mode) .practice-card .stat-unit {
    font-size: .58rem !important;
  }

  body:not(.listen-mode) #typingArea {
    height: 34dvh !important;
    min-height: 170px !important;
    max-height: 280px !important;
    padding: 13px !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
    resize: none !important;
  }

  .practice-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 42 !important;
    margin: 8px -10px -10px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #E5EAF2 !important;
    border-radius: 0 0 16px 16px !important;
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 -10px 22px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  .practice-actions .tip-text {
    font-size: .72rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  .practice-actions .btn-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .practice-actions .btn-row > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.listen-mode .study-layout {
    display: block !important;
  }

  body.listen-mode .practice-card {
    overflow: visible !important;
    padding: 12px !important;
  }

  body.listen-mode #typingArea {
    height: 48dvh !important;
    min-height: 260px !important;
    max-height: 440px !important;
  }

  body.listen-mode .audio-panel,
  body.listen-mode .audio-controls,
  body.listen-mode .smart-pause-line {
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.listen-mode .audio-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 7px !important;
  }

  body.listen-mode .audio-controls .speed-control {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 430px) {
  body:not(.listen-mode) .source-panel {
    top: calc(54px + env(safe-area-inset-top)) !important;
  }

  body:not(.listen-mode) .source-panel-top .panel-title,
  body:not(.listen-mode) .pace-status-line em {
    display: none !important;
  }

  body:not(.listen-mode) .source-readonly,
  body:not(.listen-mode) .pace-panel {
    height: 27dvh !important;
    min-height: 132px !important;
    max-height: 205px !important;
    font-size: .92rem !important;
    line-height: 1.62 !important;
  }

  body:not(.listen-mode) .practice-card .stats-grid {
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  body:not(.listen-mode) #typingArea {
    height: 32dvh !important;
    min-height: 150px !important;
    max-height: 240px !important;
    font-size: .95rem !important;
  }

  .practice-actions .btn-row {
    grid-template-columns: 1fr !important;
  }

  body.listen-mode #typingArea {
    height: 46dvh !important;
    min-height: 230px !important;
  }

  body.listen-mode .audio-controls {
    grid-template-columns: 1fr !important;
  }
}

/* 입문반 졸업시험 모바일: 연습 문장을 상단에 붙여 입력 중에도 문제 문장이 보이도록 보정 */
@media (max-width: 760px) {
  #text-display {
    position: sticky !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    z-index: 30 !important;
    max-height: 30dvh !important;
    min-height: 96px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    font-size: clamp(1.06rem, 5vw, 1.28rem) !important;
    line-height: 1.55 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
  }

  #typing-input,
  input#typing-input {
    min-height: 54px !important;
    font-size: 1.08rem !important;
    padding: 14px !important;
  }

  #history-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 430px) {
  #text-display {
    top: calc(54px + env(safe-area-inset-top)) !important;
    max-height: 26dvh !important;
    min-height: 84px !important;
    padding: 13px !important;
    font-size: 1.02rem !important;
  }
}

/* 포털형 공부방이 사용되는 화면까지 같은 모바일 원문 고정/채점 버튼 보정 */
@media (max-width: 760px) {
  .practice-source-box {
    position: sticky !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    z-index: 30 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
  }

  .practice-source-toolbar {
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  .practice-source-readonly {
    max-height: 30dvh !important;
    min-height: 130px !important;
    overflow-y: auto !important;
    padding: 12px !important;
    font-size: .97rem !important;
    line-height: 1.68 !important;
  }

  .practice-editor {
    height: 36dvh !important;
    min-height: 180px !important;
    max-height: 300px !important;
    resize: none !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
  }

  .practice-bottom-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 42 !important;
    margin: 8px -10px -10px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #E5EAF2 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 -10px 22px rgba(15,23,42,.07) !important;
  }

  .practice-actions,
  .practice-bottom-bar .practice-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  .practice-actions > *,
  .practice-bottom-bar .practice-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 430px) {
  .practice-source-box {
    top: calc(54px + env(safe-area-inset-top)) !important;
  }

  .practice-source-toolbar b,
  .practice-source-toolbar span {
    font-size: .82rem !important;
  }

  .practice-source-readonly {
    max-height: 26dvh !important;
    min-height: 115px !important;
    font-size: .92rem !important;
  }

  .practice-editor {
    height: 32dvh !important;
    min-height: 150px !important;
  }

  .practice-actions,
  .practice-bottom-bar .practice-actions {
    grid-template-columns: 1fr !important;
  }
}