/**
 * ============================================
 * User Components System - Central Import File
 * ============================================
 *
 * 모든 재사용 가능한 컴포넌트를 통합하는 메인 import 파일
 *
 * 작성일: 2025-10-02
 * Phase: Phase 2 - Component System
 * 목적: 중복 제거 및 일관된 UI 컴포넌트 시스템 제공
 *
 * 사용법:
 * HTML 템플릿에서 다음과 같이 사용:
 * <link rel="stylesheet" href="/css/user/components.css">
 *
 * 또는 다른 CSS 파일에서 import:
 * @import url('components.css');
 */

/* ============================================
   Component Imports
   ============================================ */

/* Buttons - 버튼 컴포넌트 시스템
 * 540 lines | 100% CSS variables
 * Variants: primary, secondary, danger, success, warning, ghost, outline
 * Sizes: sm, md, lg
 * Modifiers: full, icon, fab, arrow, loading
 */
@import url('_buttons.css');

/* Forms - 폼 컴포넌트 시스템
 * 952 lines | 60+ components
 * Elements: input, select, textarea, checkbox, radio, file
 * States: error, success, warning, disabled, readonly
 * Features: input groups, validation, accessibility
 */
@import url('_forms.css');

/* Cards - 카드 컴포넌트 시스템
 * 822 lines | Responsive grid system
 * Variants: elevated, outlined, flat, hover, clickable
 * Special: tournament, athlete, board, match cards
 * Grid: 1, 2, 3, 4 column responsive layouts
 */
@import url('_cards.css');

/* Tables - 테이블 컴포넌트 시스템
 * 792 lines | Responsive table-to-card
 * Variants: bordered, striped, hover, compact, fixed
 * Special: player, tournament, match, athlete tables
 * Features: pagination, search, loading, sticky headers
 */
@import url('../components/_tables.css');

/* Tabs - 탭 컴포넌트 시스템
 * 697 lines | Smooth animations
 * Variants: pills, underline, boxed, vertical
 * Special: tournament, tour, notice tabs
 * Features: icon tabs, badges, keyboard navigation
 */
@import url('../components/_tabs.css');

/* Modals - 모달 컴포넌트 시스템
 * 838 lines | Full accessibility
 * Sizes: sm, md, lg, xl, full
 * Types: drawer (left/right), confirmation, alert
 * Features: form modals, loading, nested modals
 */
@import url('../components/_modals.css');

/* ============================================
   Component Usage Examples
   ============================================

   1. Button Examples:
   -------------------
   <button class="btn btn--primary">Primary Button</button>
   <button class="btn btn--secondary btn--lg">Large Secondary</button>
   <button class="btn btn--danger btn--sm">Small Danger</button>
   <button class="btn btn--primary btn--icon"><i class="fas fa-plus"></i></button>
   <button class="btn btn--primary btn--full">Full Width</button>

   2. Form Examples:
   -----------------
   <div class="form-group">
       <label class="form-label form-label--required">Email</label>
       <input type="email" class="form-input" placeholder="이메일 입력">
       <span class="form-help">이메일 형식으로 입력하세요</span>
   </div>

   <div class="input-group">
       <span class="input-group__addon">@</span>
       <input type="text" class="form-input" placeholder="사용자명">
   </div>

   3. Card Examples:
   -----------------
   <div class="card card--elevated card--hover">
       <img src="..." class="card__image" alt="...">
       <div class="card__body">
           <h3 class="card__title">카드 제목</h3>
           <p class="card__text">카드 내용</p>
       </div>
       <div class="card__footer">
           <button class="card__button card__button--primary">자세히 보기</button>
       </div>
   </div>

   <div class="card-grid card-grid--3">
       <div class="card">...</div>
       <div class="card">...</div>
       <div class="card">...</div>
   </div>

   4. Table Examples:
   ------------------
   <div class="table__wrapper">
       <table class="table table--striped table--hover">
           <thead class="table__header">
               <tr class="table__row">
                   <th class="table__head-cell">이름</th>
                   <th class="table__head-cell">나이</th>
               </tr>
           </thead>
           <tbody class="table__body">
               <tr class="table__row">
                   <td class="table__cell">홍길동</td>
                   <td class="table__cell">25</td>
               </tr>
           </tbody>
       </table>
   </div>

   5. Tabs Examples:
   -----------------
   <div class="tabs">
       <div class="tabs__list">
           <button class="tabs__item tabs__item--active">Tab 1</button>
           <button class="tabs__item">Tab 2</button>
       </div>
       <div class="tabs__panels">
           <div class="tabs__panel tabs__panel--active">Content 1</div>
           <div class="tabs__panel">Content 2</div>
       </div>
   </div>

   6. Modal Examples:
   ------------------
   <div class="modal modal--open">
       <div class="modal__overlay"></div>
       <div class="modal__container modal--md">
           <div class="modal__header">
               <h2 class="modal__title">모달 제목</h2>
               <button class="modal__close">&times;</button>
           </div>
           <div class="modal__body">
               모달 내용
           </div>
           <div class="modal__footer">
               <button class="btn btn--secondary">취소</button>
               <button class="btn btn--primary">확인</button>
           </div>
       </div>
   </div>

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

/* ============================================
   Component Statistics
   ============================================

   Total Lines: 4,641 lines
   Total Components: 200+ classes and variants
   CSS Variable Usage: 100%

   Files:
   - _buttons.css:  540 lines
   - _forms.css:    952 lines
   - _cards.css:    822 lines
   - _tables.css:   792 lines
   - _tabs.css:     697 lines
   - _modals.css:   838 lines

   Features:
   ✅ 100% CSS Variable Usage
   ✅ Fully Responsive (Mobile-first)
   ✅ Full Accessibility (WCAG 2.1 AA)
   ✅ Keyboard Navigation
   ✅ Screen Reader Support
   ✅ Dark Mode Ready
   ✅ Print Optimized
   ✅ Smooth Animations
   ✅ Loading States
   ✅ Error States
   ✅ BEM Naming Convention

   Browser Support:
   - Chrome/Edge: Latest 2 versions
   - Firefox: Latest 2 versions
   - Safari: Latest 2 versions
   - Mobile browsers: iOS Safari, Chrome Mobile

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