/* =====================================================
   공통 CSS — 색상 팔레트 변수
   모든 페이지에 적용 (base.html에서 로드)
   컴포넌트 클래스(.page-icon 등)는 각 템플릿에서 직접 정의하므로 여기서 제외
   ===================================================== */

:root {
    /* 기본 색상 */
    --color-primary: #4299e1;
    --color-secondary: #805ad5;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* 그라디언트 */
    --gradient-primary: linear-gradient(135deg, #4299e1 0%, #805ad5 100%);
    --gradient-success: linear-gradient(135deg, #10b981, #34d399);
    --gradient-danger: linear-gradient(135deg, #ef4444, #f87171);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #fbbf24);
    --gradient-info: linear-gradient(135deg, #3b82f6, #60a5fa);

    /* 배경/테두리 */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --border-radius-card: 12px;
    --border-radius-btn: 8px;
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 8px 25px rgba(0, 0, 0, 0.15);

    /* 텍스트 */
    --text-muted: #6b7280;
    --text-dark: #1f2937;
}

/* =====================================================
   공통 버튼 — 그라디언트 (템플릿에서 중복 정의 없음)
   ===================================================== */
.btn-primary-gradient {
    background: var(--gradient-primary);
    border: none;
    color: white;
    border-radius: var(--border-radius-btn);
    font-weight: 500;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn-primary-gradient:hover {
    opacity: 0.9;
    color: white;
    transform: translateY(-1px);
}

.btn-primary-gradient:active {
    transform: translateY(0);
}

/* =====================================================
   공통 섹션 구분선
   ===================================================== */
.section-divider {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 2rem 0;
}

/* =====================================================
   상태 배지
   ===================================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}