/* ============================================================
   미래교육연수원 디자인 시스템 — Global entry point
   Consumers link THIS file. Imports only.
   ============================================================ */

@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/effects.css";
@import "./tokens/base.css";

/* ============================================================
   사이트 반응형 — 모바일 헤더 + 가로 넘침 방지
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 820px) {
  .nav-desktop { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .nav-mobile { display: flex !important; }
  /* 그리드 붕괴 방지 — 인라인 repeat(n) 그리드를 모바일에서 줄임 (!important로 인라인 오버라이드) */
  .r-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid-3 { grid-template-columns: 1fr !important; }
  .r-grid-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .r-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}