/**
 * 두손기획인쇄 브랜드 디자인 시스템
 * Brand Design System - Design Tone & Manner
 *
 * 메인 컬러: Deep Navy #1E4E79
 * 포인트 컬러: Bright Yellow #FFD500
 * 보조 컬러: Light Gray #F4F4F4, White
 * 폰트: Noto Sans / Pretendard (한글), Poppins (영문)
 */

:root {
    /* ===== 브랜드 컬러 시스템 ===== */

    /* 메인 컬러 - Deep Navy */
    --brand-primary: #1E4E79;
    --brand-primary-dark: #153A5A;
    --brand-primary-light: #2D6FA8;
    --brand-primary-lighter: #E8F0F7;

    /* 포인트 컬러 - Bright Yellow */
    --brand-accent: #FFD500;
    --brand-accent-dark: #E6C000;
    --brand-accent-light: #FFE14D;
    --brand-accent-lighter: #FFF9CC;

    /* 보조 컬러 */
    --brand-gray-100: #FFFFFF;
    --brand-gray-200: #F4F4F4;
    --brand-gray-300: #E0E0E0;
    --brand-gray-400: #BDBDBD;
    --brand-gray-500: #9E9E9E;
    --brand-gray-600: #757575;
    --brand-gray-700: #616161;
    --brand-gray-800: #424242;
    --brand-gray-900: #212121;

    /* 시맨틱 컬러 */
    --brand-success: #4CAF50;
    --brand-warning: #FF9800;
    --brand-error: #F44336;
    --brand-info: #2196F3;

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

    /* 폰트 패밀리 */
    --font-primary: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-english: 'Poppins', 'Pretendard', sans-serif;
    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* 폰트 크기 */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */

    /* 폰트 굵기 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 줄 높이 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== 간격 시스템 ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ===== 버튼 디자인 ===== */

    /* 버튼 반경 (둥근 모서리) */
    --button-radius-sm: 4px;
    --button-radius-md: 8px;
    --button-radius-lg: 12px;
    --button-radius-full: 9999px;

    /* 버튼 그림자 */
    --button-shadow: 0 2px 8px rgba(30, 78, 121, 0.15);
    --button-shadow-hover: 0 4px 12px rgba(30, 78, 121, 0.25);
    --button-shadow-active: 0 1px 4px rgba(30, 78, 121, 0.2);

    /* 버튼 패딩 */
    --button-padding-sm: 0.5rem 1rem;
    --button-padding-md: 0.75rem 1.5rem;
    --button-padding-lg: 1rem 2rem;

    /* ===== 카드 & 컨테이너 ===== */
    --card-radius: 12px;
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);

    /* ===== 전환 효과 ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== Z-index 레이어 ===== */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== 기본 스타일 재정의 ===== */

body {
    font-family: var(--font-primary);
    color: var(--brand-gray-800);
    background-color: var(--brand-gray-200);
    line-height: var(--line-height-normal);
}

/* ===== 버튼 컴포넌트 (둥근 모서리 + 그림자) ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-md);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: 1;
    border: none;
    border-radius: var(--button-radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--button-shadow);
    text-decoration: none;
}

.btn:hover {
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-2px);
}

.btn:active {
    box-shadow: var(--button-shadow-active);
    transform: translateY(0);
}

/* 버튼 크기 */
.btn-sm {
    padding: var(--button-padding-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--button-radius-sm);
}

.btn-lg {
    padding: var(--button-padding-lg);
    font-size: var(--font-size-lg);
    border-radius: var(--button-radius-lg);
}

/* 버튼 스타일 - Primary (Bright Yellow - 브랜드 포인트) */
.btn-primary {
    background-color: var(--brand-accent);
    color: var(--brand-gray-900);
    font-weight: var(--font-weight-semibold);
}

.btn-primary:hover {
    background-color: var(--brand-accent-dark);
    color: var(--brand-gray-900);
}

/* 버튼 스타일 - Secondary (Deep Navy) */
.btn-secondary {
    background-color: var(--brand-primary);
    color: var(--brand-gray-100);
    font-weight: var(--font-weight-medium);
}

.btn-secondary:hover {
    background-color: var(--brand-primary-dark);
}

/* 버튼 스타일 - Outline (Yellow) */
.btn-outline-primary {
    background-color: transparent;
    color: var(--brand-accent-dark);
    border: 2px solid var(--brand-accent);
    box-shadow: none;
}

.btn-outline-primary:hover {
    background-color: var(--brand-accent);
    color: var(--brand-gray-900);
}

/* 버튼 스타일 - Outline (Navy) */
.btn-outline-secondary {
    background-color: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    box-shadow: none;
}

.btn-outline-secondary:hover {
    background-color: var(--brand-primary);
    color: var(--brand-gray-100);
}

/* ===== 카드 컴포넌트 ===== */

.card {
    background-color: var(--brand-gray-100);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--spacing-lg);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary);
    margin-bottom: var(--spacing-md);
}

.card-text {
    color: var(--brand-gray-700);
    line-height: var(--line-height-relaxed);
}

/* ===== 헤딩 스타일 ===== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);
    line-height: var(--line-height-tight);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* ===== 링크 스타일 (Bright Yellow - 브랜드 포인트) ===== */

a {
    color: var(--brand-accent-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-weight: var(--font-weight-medium);
}

a:hover {
    color: var(--brand-accent);
    text-decoration: underline;
}

/* ===== 폼 요소 ===== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-family: var(--font-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--brand-gray-300);
    border-radius: var(--button-radius-sm);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-lighter);
}

/* ===== 배지 컴포넌트 ===== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--button-radius-full);
    line-height: 1;
}

.badge-primary {
    background-color: var(--brand-primary-lighter);
    color: var(--brand-primary);
}

.badge-accent {
    background-color: var(--brand-accent-lighter);
    color: var(--brand-accent-dark);
}

.badge-success {
    background-color: #E8F5E9;
    color: var(--brand-success);
}

.badge-warning {
    background-color: #FFF3E0;
    color: var(--brand-warning);
}

.badge-error {
    background-color: #FFEBEE;
    color: var(--brand-error);
}

/* ===== 유틸리티 클래스 ===== */

/* 텍스트 컬러 */
.text-primary { color: var(--brand-primary); }
.text-accent { color: var(--brand-accent); }
.text-gray { color: var(--brand-gray-600); }
.text-dark { color: var(--brand-gray-900); }

/* 배경 컬러 */
.bg-primary { background-color: var(--brand-primary); }
.bg-accent { background-color: var(--brand-accent); }
.bg-light { background-color: var(--brand-gray-200); }
.bg-white { background-color: var(--brand-gray-100); }

/* 그림자 */
.shadow-sm { box-shadow: var(--button-shadow); }
.shadow-md { box-shadow: var(--card-shadow); }
.shadow-lg { box-shadow: var(--card-shadow-hover); }

/* 둥근 모서리 */
.rounded-sm { border-radius: var(--button-radius-sm); }
.rounded-md { border-radius: var(--button-radius-md); }
.rounded-lg { border-radius: var(--button-radius-lg); }
.rounded-full { border-radius: var(--button-radius-full); }

/* 간격 */
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }