@charset "utf-8";

/**
 * ============================================================================
 * RESPONSIVE.CSS - LMS 반응형 웹 통합 진입점
 * ============================================================================
 *
 * 목적:
 *   - Viewport별로 분리된 반응형 CSS 파일들을 import하는 진입점
 *   - 모듈화된 CSS 아키텍처로 유지보수성 향상
 *
 * 구조:
 *   1. responsive-common.css: 공통 스타일 (변수, 유틸리티, GNB, Footer 등)
 *   2. responsive-tablet.css: 태블릿 (768px ~ 1024px) 페이지별 스타일
 *   3. responsive-mobile.css: 모바일 (≤767px) 페이지별 스타일
 *   4. responsive-desktop.css: 데스크톱 (≥1025px) 페이지별 스타일
 *
 * 로드 순서:
 *   - CSS Cascade 원리에 따라 common → tablet → mobile → desktop 순서로 로드
 *   - 좁은 viewport 스타일이 넓은 viewport 스타일을 오버라이드
 *
 * 브레이크포인트:
 *   - Mobile: ≤767px (iPhone, Android 세로 모드)
 *   - Tablet: 768px ~ 1024px (iPad, Android 태블릿)
 *   - Desktop: ≥1025px (일반 데스크톱)
 *   - Wide: ≥1200px (와이드 스크린)
 *
 * 작성일: 2025-10-22
 * 수정일: 2025-01-06 (Viewport별 분리 리팩토링)
 * 버전: 2.0.0
 *
 * 리팩토링 이력:
 *   - v1.0.0 (2025-10-22): 단일 파일 구조 (6,616 lines, 167KB)
 *   - v2.0.0 (2025-01-06): Viewport별 분리 구조 (4 files)
 *     * Section 1-6 → responsive-common.css (1,150 lines, 29KB)
 *     * Section 7 Mobile → responsive-mobile.css (34 blocks, 57KB)
 *     * Section 7 Tablet → responsive-tablet.css (48 blocks, 71KB)
 *     * Section 7 Desktop → responsive-desktop.css (8 blocks, 1.8KB)
 *
 * ============================================================================
 */


/* ============================================================================
   1. 공통 스타일 (Common Styles)
   ============================================================================ */

@import url("responsive-common.css");


/* ============================================================================
   2. Viewport별 페이지 스타일 (Page-specific Styles)
   ============================================================================ */

/* 2.1 태블릿 스타일 (먼저 로드) */
@import url("responsive-tablet.css");

/* 2.2 모바일 스타일 (태블릿 오버라이드) */
@import url("responsive-mobile.css");

/* 2.3 데스크톱 스타일 (마지막 로드) */
@import url("responsive-desktop.css");


/* ============================================================================
   참고사항
   ============================================================================

   1. 파일 구조:
      - responsive-common.css: Section 1-6 (공통 변수, 유틸리티, 컴포넌트)
      - responsive-tablet.css: Section 7 @media (max-width: 1024px) 블록들
      - responsive-mobile.css: Section 7 @media (max-width: 767px) 블록들
      - responsive-desktop.css: Section 7 @media (min-width: 1025px) 블록들

   2. CSS Cascade 동작:
      - @media (max-width: 1024px)는 mobile(≤767px)에도 적용됨
      - responsive-mobile.css가 나중에 로드되어 tablet 스타일을 오버라이드
      - 각 viewport 범위에서 올바른 스타일이 최종 적용됨

   3. 성능:
      - @import는 병렬 다운로드를 지원하지 않으므로 성능에 영향 가능
      - 프로덕션 환경에서는 CSS 번들링 도구 사용 권장 (Webpack, Vite 등)
      - 또는 HTML에서 <link> 태그로 직접 로드하여 병렬 다운로드 활성화

   4. 개발 가이드:
      - 새로운 페이지 반응형화 시 해당 viewport CSS 파일에 추가
      - 공통 컴포넌트 수정 시 responsive-common.css 편집
      - 상세 가이드는 RESPONSIVE_GUIDE.md 참조

   ============================================================================ */