/* 화면 안내용 숨김 영역이 문서 끝에 놓여 1px 스크롤을 만들지 않게 합니다. */
.sr-only { top: 0; left: 0; }

/* 넓은 가로 화면에서는 전체 화면의 실제 너비와 높이에 맞춰 수업 내용을 배치합니다. */
@media (min-width: 1200px) and (min-height: 700px) {
  .v2-main:not(.fm-scene) > .layout {
    width: min(100%, 1780px);
    max-width: 1780px;
    padding-inline: clamp(28px, 2.4vw, 44px);
  }
  /* 세로로 긴 지도 카드가 다음 버튼을 밀어내지 않도록 높이를 제한합니다. */
  .map .zone-card {
    aspect-ratio: auto;
    height: clamp(142px, 16.5vh, 188px);
  }
  .map .zone-grid {
    margin-block: clamp(10px, 1.2vh, 14px);
    gap: clamp(8px, 1vh, 12px);
  }
  .map .map-heading h1 { margin-block: 5px 3px; }
  .map .clue-shelf { margin-bottom: 10px; }
  /* 설명·선택은 학생이 읽을 수 있는 크기를 지키면서 사진의 오른쪽 인물을 남깁니다. */
  .scene:not(.fm-scene) { display: flex; align-items: stretch; }
  .scene:not(.fm-scene) > .layout { align-self: stretch; }
  .scene:not(.fm-scene) .story-panel { width: min(100%, clamp(730px, 43vw, 830px)); }
  .intro .intro-panel { width: min(100%, clamp(600px, 37vw, 700px)); }
  /* 퀴즈의 질문과 선택지가 가로 화면의 높이를 함께 사용하도록 합니다. */
  .quiz-layout {
    width: 100%;
    min-height: clamp(530px, 66vh, 730px);
  }
  .quiz-layout > section {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .quiz-layout .quiz-header { padding: clamp(20px, 2vw, 28px); }
  .quiz-layout .quiz-header h1 {
    font-size: clamp(28px, 2.15vw, 42px);
    margin-block: 12px;
  }
  .quiz-layout .quiz-header p {
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.6;
  }
  .quiz-layout .choices {
    flex: 1 1 auto;
    grid-template-rows: repeat(2, minmax(105px, 1fr));
    gap: clamp(12px, 1.2vw, 18px);
    margin-top: clamp(14px, 1.4vw, 22px);
  }
  .quiz-layout .choice {
    min-height: 105px;
    padding: clamp(15px, 1.3vw, 22px);
    gap: 14px;
    font-size: clamp(17px, 1.15vw, 22px);
  }
  .quiz-layout .choice b { width: 40px; height: 40px; }
  .quiz-layout .feedback {
    margin-top: clamp(14px, 1.4vw, 22px);
    padding: clamp(15px, 1.4vw, 22px);
    font-size: clamp(16px, 1.05vw, 20px);
  }
  .quiz-layout .quiz-aside {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 1.6vh, 18px);
    padding: clamp(20px, 1.8vw, 28px);
  }
  .quiz-layout .quiz-aside .tag,
  .quiz-layout .quiz-aside .btn { align-self: flex-start; }
  .quiz-layout .quiz-aside h2 {
    font-size: clamp(22px, 1.6vw, 30px);
    margin: 0;
  }
  .quiz-layout .quiz-aside p { font-size: clamp(15px, .95vw, 18px); margin: 0; }
}