.course-modal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.course-modal:focus {
  outline: none;
}

.course-modal-card {
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.course-modal-card :is(button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(22, 143, 171, .38);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .course-modal {
    place-items: start center;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(12px, env(safe-area-inset-bottom));
  }

  .course-modal-card {
    width: min(100%, 560px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    gap: 8px;
    padding: 18px 16px 14px;
    border-radius: 22px;
  }

  .course-modal-card .eyebrow {
    min-height: 34px;
    margin: 0;
    padding: 4px 52px 0 0;
    font-size: 12px;
    line-height: 1.4;
  }

  .course-modal-card h2 {
    padding-right: 48px;
    font-size: 30px;
    line-height: 1.16;
  }

  .course-modal-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }

  .course-modal-card label {
    gap: 6px;
    font-size: 16px;
    line-height: 1.45;
  }

  .course-modal-card input,
  .course-modal-card textarea,
  .course-modal-card select {
    min-height: 48px;
    border-radius: 12px;
    padding-inline: 14px;
    font-size: 16px;
  }

  .recruit-apply-form {
    gap: 8px;
  }

  .recruit-apply-context {
    margin: -2px 0 2px;
    font-size: 15px;
    line-height: 1.5;
  }

  .recruit-apply-form input[type="file"] {
    min-height: 48px;
    padding: 6px;
    font-size: 14px;
  }

  .recruit-apply-form input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 8px;
    padding-inline: 10px;
    font-size: 14px;
  }

  .recruit-resume-hint,
  .recruit-privacy-note {
    margin-top: -4px;
    font-size: 13px;
    line-height: 1.45;
  }

  .course-confirm-text {
    margin-top: 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .course-modal-actions {
    gap: 8px;
  }

  .course-modal-actions button,
  .recruiting-apply-modal .primary-button {
    min-height: 50px;
  }

  .course-modal-status {
    min-height: 0;
    font-size: 14px;
  }

  .course-modal-status:empty {
    display: none;
  }
}

@media (max-width: 380px) {
  .course-modal-card {
    padding-inline: 14px;
  }

  .course-modal-card h2 {
    font-size: 28px;
  }

  .course-modal-actions {
    display: grid;
  }
}