/**
 * タブレット横向き・ビューポートが小さいときのコンパクト表示
 * （7〜10インチ級、PWA起動時のブラウザ chrome 込みなど）
 */
@media (min-width: 600px) and (orientation: landscape) and (max-height: 860px) {
  html {
    font-size: 93.75%;
  }

  /* ===== シェル（index.html） ===== */
  header .h-16 {
    height: 3.25rem;
  }

  header .max-w-7xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #app {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .home-nyaby-hero-banner {
    min-height: 4.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .home-pwa-recommend-banner__inner {
    padding: 0.55rem 0.65rem;
    gap: 0.45rem;
  }

  .home-pwa-recommend-banner__title {
    font-size: 0.8125rem;
  }

  .home-pwa-recommend-banner__desc {
    font-size: 0.6875rem;
  }

  .subject-tabs {
    gap: 0.35rem;
    padding: 0.25rem 0;
  }

  .subject-tab {
    padding: 0.45rem 0.65rem;
    font-size: 0.75rem;
    min-height: 2.125rem;
  }

  .main-tabs {
    gap: 0.35rem;
  }

  .main-tab {
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
  }

  #homeView.math-full-width {
    padding: 0 0.65rem !important;
  }

  .math-two-column {
    gap: 0.75rem;
  }

  .units-column {
    max-height: 220px;
  }

  .lessons-column {
    min-height: 0;
  }

  .lessons-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
  }

  .lessons-title {
    font-size: 1rem;
  }

  .lesson-list-item {
    padding: 0.5rem 0.65rem;
  }

  .lesson-list-item .lesson-title {
    font-size: 0.8125rem;
  }

  .lesson-list-item .lesson-action-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.6875rem;
    min-height: 1.75rem;
  }

  .recommended-avatar-row {
    gap: 0.65rem;
  }

  .recommended-avatar-profile-card {
    padding: 0.65rem 0.75rem;
  }

  .route-map-section {
    padding: 0.65rem 0.75rem;
  }

  footer {
    margin-top: 1.5rem !important;
  }

  footer .py-4 {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  /* ===== レッスン（modular） ===== */
  body {
    padding: 8px !important;
  }

  #backBtn {
    top: 8px !important;
    left: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  .column-title {
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.15rem;
  }

  .lesson-layout {
    gap: 0.5rem !important;
  }

  .lesson-layout[data-mode="wakaru"] {
    grid-template-columns: minmax(148px, 18%) minmax(200px, 0.85fr) minmax(200px, 1.15fr) !important;
  }

  .lesson-layout[data-mode="oboeru"] {
    grid-template-columns: 1fr minmax(168px, 28%) !important;
  }

  .lesson-layout[data-mode="wakaru"] .map-column,
  .lesson-layout[data-mode="wakaru"] .answer-column,
  .map-column {
    top: 0.5rem;
    max-height: calc(100vh - 1rem) !important;
  }

  .lesson-layout[data-mode="wakaru"] #learningMapContainer {
    max-height: calc(100vh - 5.5rem) !important;
  }

  .lesson-layout[data-mode="wakaru"] .answer-column-card {
    max-height: calc(100vh - 4.5rem) !important;
    padding: 0.65rem 0.75rem 0.85rem !important;
  }

  .learning-map {
    padding: 0.65rem;
    font-size: 0.8125rem;
    border-radius: 0.75rem;
  }

  .learning-map-big-question {
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
    font-size: 0.6875rem;
  }

  .learning-map-step-item {
    padding: 0.28rem 0.38rem;
    font-size: 0.75rem;
  }

  .question-box {
    max-height: calc(100vh - 16px) !important;
    border-radius: 0.75rem;
  }

  .question-header {
    padding: 0.85rem 1rem 0.55rem 1rem !important;
  }

  .lesson-layout[data-mode="wakaru"] .question-header {
    padding: 0.85rem 1rem 0.55rem 1rem !important;
  }

  .question-content {
    padding: 0.65rem 1rem 0.85rem 1rem !important;
  }

  .lesson-layout[data-mode="wakaru"] .question-content {
    padding-top: 0.65rem !important;
    padding-bottom: 0.75rem !important;
  }

  .lesson-layout[data-mode="wakaru"] .question-content .source {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.75rem !important;
  }

  #modeLabel {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    margin-bottom: 0.55rem;
  }

  #question {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }

  .question-box.big-question #question {
    font-size: 1rem !important;
  }

  .source {
    font-size: 0.875rem;
    padding: 0.65rem 0.75rem;
  }

  .choices {
    gap: 0.55rem;
    margin-bottom: 0.85rem;
  }

  .choices button {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.75rem;
    min-height: 2.5rem !important;
  }

  .answer-column .choices button,
  .lesson-layout:has(.question-box.big-question) .answer-column-card .choices button {
    padding: 0.6rem 0.8rem !important;
    font-size: 0.875rem !important;
  }

  #nextBtn,
  .navigation-buttons button {
    padding: 0.6rem 1rem !important;
    font-size: 0.875rem !important;
    min-height: 2.5rem !important;
  }

  .explanation {
    font-size: 0.875rem;
    padding: 0.65rem 0.75rem;
  }

  .answer-feedback {
    font-size: 0.8125rem;
    padding: 0.55rem 0.65rem;
  }

  .answer-feedback-chara-img {
    max-height: 64px !important;
  }

  .answer-column-card {
    border-radius: 0.75rem;
  }

  .visual-column-inner {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 600px) and (orientation: landscape) and (max-height: 680px) {
  html {
    font-size: 87.5%;
  }

  .lesson-layout[data-mode="wakaru"] {
    grid-template-columns: minmax(128px, 16%) minmax(180px, 0.85fr) minmax(180px, 1.15fr) !important;
  }

  .units-column {
    max-height: 180px;
  }

  .home-nyaby-hero-banner {
    min-height: 3.25rem !important;
  }

  #question {
    font-size: 0.975rem !important;
  }

  .choices button {
    min-height: 2.25rem !important;
  }
}