/* 
 * JumClass Student Design System - Main CSS
 * 학생용 디자인 시스템 메인 CSS (최적화 버전)
 * 부트스트랩 의존성 완전 제거
 */

/* Core Design System */
@import url('./variables.css');
@import url('./base.css');
@import url('./components.css');

/* Form Components */
@import url('./components/form.css');
@import url('./components/login.css');
@import url('./components/header.css');
@import url('./components/mobile-header.css');
@import url('./components/footer.css');
@import url('./components/mypage.css');
@import url('./components/cart.css');
@import url('./components/classroom.css');
@import url('./components/order-history.css');
@import url('./components/hero-banner.css');
@import url('./components/coupon.css');
@import url('./components/cash.css');
@import url('./components/member-edit.css');
@import url('./components-extended.css');
@import url('./components-forms.css');
@import url('./components-icons.css');
@import url('./layout.css');

/* Page Specific Styles */
@import url('./pages/login.css');
@import url('./pages/register.css');
@import url('./pages/dashboard.css');
@import url('./pages/myclass.css');
@import url('./pages/player.css');
@import url('./pages/class-list.css');
@import url('./pages/product-detail.css');
@import url('./pages/lms-list.css');
@import url('./pages/main-home.css');
@import url('./pages/cs-center.css');
@import url('./pages/class-main.css');
@import url('./pages/master-course.css');
@import url('./pages/creator.css');
@import url('./pages/event.css');

/* 
 * 사용 방법:
 * 1. 새로운 학생 페이지에서 이 파일만 import 하면 모든 스타일 적용
 * 2. 모든 요소는 .student-new 클래스로 감싸서 기존 스타일과 충돌 방지
 * 3. 추가 페이지 스타일은 pages/ 디렉토리에 생성 후 여기에 import
 * 4. 부트스트랩 의존성 완전 제거 - 자체 디자인 시스템만 사용
 */

/* ===== Global Overrides ===== */
/* 학생 페이지 전역 설정 */
.student-new {
  /* 폰트 스무딩 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 기본 선택 색상 */
  ::selection {
    background-color: rgba(128, 47, 255, 0.3);
    color: var(--color-white);
  }

  /* 스크롤바 스타일링 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--color-gray-7);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-gray-4);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-3);
  }
}

/* ===== Print Styles ===== */
@media print {
  .student-new {

    /* 인쇄 시 불필요한 요소 숨김 */
    .header,
    .sidebar,
    .footer,
    .btn,
    .modal {
      display: none !important;
    }

    /* 인쇄 시 색상 조정 */
    * {
      background: white !important;
      color: black !important;
    }
  }
}

/* ===== Animation Library ===== */
/* 애니메이션 제거 - 과한 효과 삭제 */

/* ===== Utility Classes ===== */
/* 추가 유틸리티 클래스 */
.student-new .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-new .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.student-new .line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aspect Ratio Boxes */
.student-new .aspect-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
}

.student-new .aspect-square {
  position: relative;
  padding-bottom: 100%;
  /* 1:1 */
}

.student-new .aspect-video>*,
.student-new .aspect-square>* {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== Loading States ===== */
.student-new .skeleton {
  background: var(--color-gray-6);
  /* 애니메이션 제거 - 단순한 로딩 표시 */
}

/* ===== Focus Styles ===== */
/* 접근성을 위한 포커스 스타일 */
.student-new *:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.student-new button:focus-visible,
.student-new a:focus-visible {
  outline-offset: 4px;
}

/* ===== Dark Mode Support ===== */
/* 다크 모드 지원 (이미 기본이 다크 테마이지만 명시적으로 정의) */
@media (prefers-color-scheme: dark) {
  .student-new {
    color-scheme: dark;
  }
}

/* ===== Performance Optimizations ===== */
/* GPU 가속을 위한 최적화 */
.student-new .will-change-transform {
  will-change: transform;
}

.student-new .will-change-opacity {
  will-change: opacity;
}

/* ===== Custom Properties for JavaScript ===== */
/* JavaScript에서 사용할 수 있는 CSS 변수 */
.student-new {
  --header-height: 60px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --content-max-width: 1200px;
  --animation-duration: 300ms;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Bootstrap Override Prevention ===== */
/* 부트스트랩 스타일이 로드되어도 학생 페이지에 영향을 주지 않도록 방지 */
.student-new {

  /* 부트스트랩 그리드 시스템 무시 */
  .container,
  .container-fluid,
  .row,
  .col,
  .col-* {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 부트스트랩 버튼 스타일 무시 */
  .btn-default,
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-info,
  .btn-warning,
  .btn-danger {
    background: none !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 부트스트랩 폼 스타일 무시 */
  .form-control {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

/* ===== 360px Mobile Global Styles ===== */
@media (max-width: 360px) {
  /* Global Container Adjustments */
  .student-new {
    --container-padding: 0;
  }
  
  /* Body adjustments for mobile */
  body.student-new {
    min-width: var(--mobile-width);
  }
  
  /* Mobile Typography Scaling */
  .student-new h1 { font-size: var(--mobile-font-size-2xl); }
  .student-new h2 { font-size: var(--mobile-font-size-xl); }
  .student-new h3 { font-size: var(--mobile-font-size-lg); }
  .student-new h4 { font-size: var(--mobile-font-size-md); }
  .student-new h5 { font-size: var(--mobile-font-size-base); }
  .student-new h6 { font-size: var(--mobile-font-size-sm); }
  
  /* Mobile Button Heights */
  .student-new .btn,
  .student-new button {
    min-height: var(--mobile-button-height);
  }
  
  /* Mobile Input Heights */
  .student-new input[type="text"],
  .student-new input[type="email"],
  .student-new input[type="password"],
  .student-new input[type="tel"],
  .student-new textarea,
  .student-new select {
    min-height: var(--mobile-input-height);
  }
}