/**
 * LMS 모바일 반응형 CSS
 * /assets/css/mobile.css
 *
 * 사용자 포털(user/), 사업주 포털(company/),
 * 대리점 포털(agency/), 강사 포털(tutor/)
 * 공통 모바일 최적화
 *
 * v1.0 — 2026-04-24
 */

/* ═══════════════════════════════════════════
   1. 사용자 포털 추가 반응형
   ═══════════════════════════════════════════ */

/* 과정 카드 그리드 */
@media (max-width: 640px) {
  .course-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .course-card { padding: 14px !important; }
  .course-card .card-title { font-size: .88rem !important; }
  .course-card .card-meta { font-size: .72rem !important; }

  /* 마이페이지 */
  .mypage-stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .mypage-stat-card { padding: 12px !important; }
  .mypage-stat-card .stat-value { font-size: 1.2rem !important; }

  /* 학습 플레이어 */
  .player-wrap { flex-direction: column !important; }
  .player-sidebar { width: 100% !important; max-height: 240px; }
  .player-main { width: 100% !important; }

  /* 테이블 스크롤 */
  .user-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .user-table-wrap table { min-width: 600px; }

  /* 폼 */
  .form-row { flex-direction: column !important; gap: 8px !important; }
  .form-row .form-group { width: 100% !important; }
  .form-input, .form-select, .form-textarea { width: 100% !important; font-size: 16px !important; /* prevent zoom on iOS */ }

  /* 탭 */
  .tab-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-nav a, .tab-nav button { flex-shrink: 0; font-size: .78rem !important; padding: 8px 12px !important; }
}

@media (max-width: 480px) {
  .site-wrap { padding: 16px 12px 48px !important; }
  .page-hero { padding: 20px 12px !important; border-radius: 8px !important; }
  .page-hero h2 { font-size: 1.1rem !important; }
  .page-hero p { font-size: .8rem !important; }

  .mypage-stat-cards { grid-template-columns: 1fr 1fr !important; }

  /* 버튼 */
  .btn-primary, .btn-secondary, .btn-outline { width: 100% !important; text-align: center !important; }
}


/* ═══════════════════════════════════════════
   2. 사업주 포털 (company/) 반응형
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .company-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
  }
  .company-sidebar.open { transform: translateX(0); }
  .company-main { margin-left: 0 !important; }
  .company-topbar { padding: 0 16px !important; }
  .company-content { padding: 16px !important; }

  /* 모바일 메뉴 토글 버튼 추가용 */
  .cp-mobile-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid #e2e8f0;
    border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; color: #475569;
    margin-right: 12px;
  }

  .cp-stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cp-stat-card { padding: 14px !important; }
  .cp-stat-card .stat-value { font-size: 1.2rem !important; }

  .cp-table { font-size: .76rem !important; }
  .cp-table th, .cp-table td { padding: 8px 8px !important; }

  .cp-filter-row { flex-direction: column !important; gap: 6px !important; }
  .cp-filter .form-input, .cp-filter .form-select { width: 100% !important; }
  .cp-filter .btn-search { width: 100% !important; }
}

@media (max-width: 480px) {
  .cp-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .company-topbar .topbar-right span:first-child { display: none; }
}


/* ═══════════════════════════════════════════
   3. 대리점 포털 (agency/) 반응형
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .agency-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
  }
  .agency-sidebar.open { transform: translateX(0); }
  .agency-main { margin-left: 0 !important; }
  .agency-topbar { padding: 0 16px !important; }
  .agency-content { padding: 16px !important; }

  .ag-mobile-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid #e2e8f0;
    border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; color: #475569;
    margin-right: 12px;
  }

  .ag-stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ag-stat-card { padding: 14px !important; }
  .ag-stat-card .stat-value { font-size: 1.2rem !important; }

  .ag-table { font-size: .76rem !important; }
  .ag-table th, .ag-table td { padding: 8px 8px !important; }

  .ag-filter-row { flex-direction: column !important; gap: 6px !important; }
  .ag-filter .form-input, .ag-filter .form-select { width: 100% !important; }
  .ag-filter .btn-search { width: 100% !important; }
}

@media (max-width: 480px) {
  .ag-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .agency-topbar .topbar-right span:first-child { display: none; }
}


/* ═══════════════════════════════════════════
   4. 강사 포털 (tutor/) 반응형
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .tutor-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
  }
  .tutor-sidebar.open { transform: translateX(0); }
  .tutor-main { margin-left: 0 !important; }
  .tutor-topbar { padding: 0 16px !important; }
  .tutor-content { padding: 16px !important; }

  .tt-mobile-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid #e5e7eb;
    border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; color: #4b5563;
    margin-right: 12px;
  }

  .tt-stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .tt-stat-card { padding: 14px !important; }
  .tt-stat-card .stat-value { font-size: 1.2rem !important; }

  .tt-table { font-size: .76rem !important; }
  .tt-table th, .tt-table td { padding: 8px 8px !important; }
}

@media (max-width: 480px) {
  .tt-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .tutor-topbar .topbar-right span:first-child { display: none; }
}


/* ═══════════════════════════════════════════
   5. 공통 모바일 유틸리티
   ═══════════════════════════════════════════ */

/* 사이드바 오버레이 */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 199;
}
@media (max-width: 768px) {
  .sidebar-overlay.active { display: block; }
}

/* 모바일 메뉴 토글 - 데스크탑에서는 숨김 */
.cp-mobile-toggle,
.ag-mobile-toggle,
.tt-mobile-toggle {
  display: none;
}

/* 모바일 테이블 스크롤 */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
  }
  .table-responsive table {
    min-width: 600px;
  }
}

/* 모바일 타이포그래피 */
@media (max-width: 640px) {
  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }
  h4 { font-size: .9rem !important; }
}

/* 모바일 차트 높이 조절 */
@media (max-width: 640px) {
  canvas { max-height: 200px !important; }
}

/* 모바일 pagination */
@media (max-width: 480px) {
  .cp-pagination a, .cp-pagination span,
  .ag-pagination a, .ag-pagination span,
  .tt-pagination a, .tt-pagination span {
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }
}

/* iOS input zoom 방지 */
@media (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 모바일 로그인 박스 */
@media (max-width: 480px) {
  .login-box {
    padding: 32px 24px !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* 터치 타겟 최소 크기 보장 */
@media (max-width: 768px) {
  a, button, [role="button"], .menu-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .menu-item { display: flex; }
}

/* 모바일 badge 크기 */
@media (max-width: 480px) {
  .cp-badge, .ag-badge, .tt-badge {
    font-size: .68rem !important;
    padding: 2px 7px !important;
  }
}