/* ============================================================
   common.css — 전체 프로젝트 공통 변수 및 기본 스타일
   Bootstrap 5 기준, 폰트 기준 0.875rem(14px)
   ============================================================ */

/* ============================================================
   1. CSS 변수 (Design Tokens)
   ============================================================ */
:root {

    /* ----------------------------------------------------------
       색상 팔레트
       ---------------------------------------------------------- */

    /* Primary — sidebar와 동일한 slate-blue 계열 */
    --color-primary:       #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-light: rgba(59, 130, 246, 0.1);

    /* Bootstrap 5 primary 오버라이드 */
    --bs-primary:          #3b82f6;
    --bs-primary-rgb:      59, 130, 246;
    --bs-link-color:       #3b82f6;
    --bs-link-hover-color: #2563eb;

    /* Semantic */
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-danger:  #dc3545;
    --color-info:    #0dcaf0;

    /* Gray scale */
    --color-gray-50:  #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* ----------------------------------------------------------
       UI 색상 (컴포넌트 공통)
       ---------------------------------------------------------- */

    /* 배경 */
    --bg-page:    #f1f5f9;
    --bg-primary: #ffffff;
    --bg-light:   #f8fafc;
    --bg-muted:   #e2e8f0;

    /* 텍스트 */
    --text-primary:  #212529;
    --text-secondary: #6c757d;
    --text-muted:    #6c757d;
    --text-disabled: #adb5bd;

    /* 보더 */
    --border-color:       #e2e8f0;
    --border-color-light: #f1f5f9;
    --border-color-dark:  #94a3b8;

    /* 사이드바 / 네비 */
    --sidebar-bg:     #e8eaed;
    --sidebar-link:   #333333;
    --sidebar-hover:  #d7dbe3;
    --sidebar-active: #c8ccd4;
    --sidebar-icon:   #333333;
    --navbar-bg:      #e8eaed;
    --footer-bg:      #e8eaed;
    --footer-text:    #555555;

    /* 카드 */
    --card-bg:        #ffffff;
    --card-header-bg: #f8fafc;
    --card-border:    #e2e8f0;

    /* 테이블 */
    --table-bg:        #ffffff;
    --table-header-bg: #e2e8f0;
    --table-border:    #e2e8f0;
    --table-hover-bg:  rgba(59, 130, 246, 0.06);

    /* 입력창 */
    --input-bg:          #ffffff;
    --input-border:      #ced4da;
    --input-text:        #212529;
    --input-placeholder: #6c757d;
    --input-focus-ring:  rgba(59, 130, 246, 0.25);

    /* 버튼 (기본 outline) */
    --btn-color:    #444444;
    --btn-border:   #444444;
    --btn-hover-bg: #333333;
    --btn-hover-text: #ffffff;

    /* 상태 */
    --hover-bg:      #f1f5f9;
    --active-bg:     rgba(59, 130, 246, 0.1);
    --active-border: #3b82f6;
    --active-text:   #3b82f6;

    /* 레거시 호환 (기존 변수명 유지) */
    --background-color: #f1f5f9;
    --text-color:       #212529;
    --bg-color:         #ffffff;

    /* ----------------------------------------------------------
       타이포그래피
       ---------------------------------------------------------- */

    /* 폰트 패밀리 */
    --font-primary: 'Pretendard', 'Noto Sans KR', sans-serif;
    --font-mono:    'Roboto Mono', 'Consolas', monospace;

    /* 레거시 호환 */
    --font-family-primary: 'Pretendard', 'Noto Sans KR', sans-serif;
    --font-family-mono:    'Roboto Mono', 'Consolas', monospace;
    --font-family-inter:   'Inter', sans-serif;

    /* 폰트 크기 (기준: 14px = 0.875rem) */
    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.8rem;    /* 13px */
    --fs-base: 0.875rem;  /* 14px — 프로젝트 기본 */
    --fs-md:   1rem;      /* 16px */
    --fs-lg:   1.125rem;  /* 18px */
    --fs-xl:   1.25rem;   /* 20px */
    --fs-2xl:  1.5rem;    /* 24px */
    --fs-3xl:  2rem;      /* 32px */

    /* 레거시 호환 */
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.8rem;
    --font-size-base: 0.875rem;
    --font-size-lg:   1rem;
    --font-size-xl:   1.125rem;

    /* 폰트 굵기 */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* 레거시 호환 */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ----------------------------------------------------------
       간격 (8px 기준)
       ---------------------------------------------------------- */
    --space-xs:  0.25rem;  /* 4px */
    --space-sm:  0.5rem;   /* 8px */
    --space-md:  0.75rem;  /* 12px */
    --space-lg:  1rem;     /* 16px */
    --space-xl:  1.5rem;   /* 24px */
    --space-2xl: 2rem;     /* 32px */
    --space-3xl: 3rem;     /* 48px */

    /* ----------------------------------------------------------
       Border Radius
       ---------------------------------------------------------- */
    --radius-sm:   0.25rem;  /* 4px */
    --radius-base: 0.375rem; /* 6px */
    --radius-md:   0.5rem;   /* 8px */
    --radius-lg:   0.75rem;  /* 12px */
    --radius-xl:   1rem;     /* 16px */
    --radius-full: 9999px;

    /* 레거시 호환 */
    --border-radius: 0.25rem;

    /* ----------------------------------------------------------
       그림자
       ---------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);

    /* ----------------------------------------------------------
       Z-index 레이어
       ---------------------------------------------------------- */
    --z-base:         1;
    --z-sticky:       10;
    --z-dropdown:     100;
    --z-modal:        1000;
    --z-tooltip:      1050;
    --z-notification: 9999;

    /* ----------------------------------------------------------
       브레이크포인트 참고 (Bootstrap 5 기준)
       사용: @media (max-width: 767px)  → 모바일
             @media (min-width: 768px)  → 태블릿+
             @media (min-width: 992px)  → 데스크톱+
             @media (min-width: 1200px) → 대형+
       ---------------------------------------------------------- */

    /* ----------------------------------------------------------
       트랜지션
       ---------------------------------------------------------- */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.2s ease;
    --transition-slow:   all 0.3s ease;
}


/* ============================================================
   2. 기본 요소
   ============================================================ */

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: 1.5;
}

input, textarea, select, button {
    font-family: var(--font-primary);
}

code, pre, .font-mono {
    font-family: var(--font-mono);
}


/* ============================================================
   3. 네비게이션 / 푸터
   ============================================================ */

.nav-sidebar .nav-icon {
    color: var(--sidebar-icon);
}

.main-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}


/* ============================================================
   4. 테이블
   ============================================================ */

.table {
    background-color: var(--table-bg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    border-color: var(--table-border);
}

.table th,
.table td {
    font-family: var(--font-primary);
    border-color: var(--table-border);
}

.table thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--table-border);
}

.table td {
    background-color: var(--table-bg);
    color: var(--text-primary);
}


/* ============================================================
   5. 폼 입력
   ============================================================ */

.form-control {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    font-size: var(--fs-base);
}

.form-control::placeholder {
    color: var(--input-placeholder);
    opacity: 0.7;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem var(--input-focus-ring);
}


/* ============================================================
   6. 버튼
   ============================================================ */

.btn-primary {
    transition: var(--transition-base);
}

.btn-outline-secondary {
    color: var(--btn-color);
    border-color: var(--btn-border);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-secondary:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-text);
    border-color: var(--btn-hover-bg);
}


/* ============================================================
   7. 모달 / 드롭다운
   ============================================================ */

.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

.modal-header,
.modal-footer {
    background-color: var(--card-header-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}

.action-dropdown {
    background-color: var(--bg-page);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.action-dropdown .dropdown-item {
    color: var(--text-primary);
}

.action-dropdown .delete-btn {
    color: var(--color-danger);
}