/* 📱 모바일 최적화 (1024px 이하부터 단계적 대응) */
  @media (max-width: 1024px) {
    .header { height: auto; padding: 15px; flex-direction: column; gap: 15px; }
    .header-left, .header-center, .header-right { min-width: 100%; align-items: center; text-align: center; }
    .header-right { align-items: center; }
    .main-container { height: auto; flex-direction: column; }
    .column { width: 100% !important; border-right: none; border-bottom: 2px solid #ddd; height: 400px; }
    .homework-bar { display: none !important; }
  }

  @media (max-width: 768px) {
    /* 1. 최상단 루트 요소부터 가로 넘침 강제 차단 */
    html, body {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important; 
      overflow-y: auto !important; /* 세로 스크롤 허용 */
      margin: 0 !important;
      padding: 0 !important;
    }

    /* 2. 헤더 영역 슬림화 */
    .header {
      padding: 10px !important;
      border-radius: 0;
      margin-bottom: 5px;
    }
    
    .gym-name { font-size: 18px !important; }
    .timer-display { font-size: 36px !important; }
    .mode-btns { flex-wrap: wrap; justify-content: center; }
    .mode-btn { padding: 4px 10px; font-size: 11px; }

    /* 3. 메인 컨테이너 - 세로로 쌓기 */
    .main-container {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      padding: 5px !important;
    }

    .column {
      height: 300px !important;
      margin-bottom: 10px !important;
    }

    /* 4. 등록 모달 (모바일 대응) */
    #reg-modal {
      width: 95% !important;
      padding: 20px !important;
      border-radius: 20px !important;
    }

    #reg-modal-content {
      flex-direction: column !important; /* 카메라와 키패드 세로 배치 */
    }

    #camera-area {
      height: 200px !important;
      margin-bottom: 15px;
    }

    #keypad {
      width: 100% !important;
      gap: 8px !important;
    }

    #keypad button {
      height: 50px !important;
      font-size: 18px !important;
    }

    .name-text { font-size: 16px !important; }
  }