/* Mobile First - 기본 스타일은 모바일 (< 768px) */

.cards-grid {
  grid-template-columns: 1fr;
}

.app-header__subtitle {
  display: none;
}

/* 모바일 옵션 그리드 */
#grade-options { grid-template-columns: repeat(3, 1fr); }
#category-options { grid-template-columns: repeat(2, 1fr); }
#day-options { grid-template-columns: repeat(3, 1fr); }

/* 모바일 모달 - 전체화면 */
.modal-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  margin: 0;
}

/* 모바일 카탈로그 툴바 */
.catalog-toolbar {
  flex-wrap: wrap;
}

.catalog-search-wrap {
  flex-basis: 100%;
  margin-bottom: var(--space-xs);
}

.modal-info-grid {
  grid-template-columns: 1fr;
}

/* 모바일 비교 dialog - 전체화면 */
.comparison-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  margin: 0;
}

/* 모바일: 시간표 - 테이블 숨기고 모바일 뷰 표시 */
.schedule-desktop {
  display: none;
}
.schedule-mobile {
  display: block;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .app-header__subtitle {
    display: inline;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #grade-options { grid-template-columns: repeat(6, 1fr); }
  #category-options { grid-template-columns: repeat(4, 1fr); }
  #day-options { grid-template-columns: repeat(6, 1fr); }

  .wizard-container {
    padding: var(--space-xl);
  }

  .modal-dialog {
    width: calc(100% - var(--space-xl));
    max-width: 600px;
    max-height: 85vh;
    height: auto;
    border-radius: var(--radius-lg);
    margin: auto;
  }

  .catalog-toolbar {
    flex-wrap: nowrap;
  }

  .catalog-search-wrap {
    flex-basis: auto;
    margin-bottom: 0;
  }

  .modal-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparison-dialog {
    width: calc(100% - var(--space-xl));
    max-width: 900px;
    max-height: 85vh;
    height: auto;
    border-radius: var(--radius-lg);
    margin: auto;
  }

  /* 태블릿+: 시간표 - 테이블 표시, 모바일 뷰 숨김 */
  .schedule-desktop {
    display: block;
  }
  .schedule-mobile {
    display: none;
  }
  .schedule-day-tabs {
    display: none;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-main {
    padding: var(--space-xl);
  }
}