/* =============================================
   FreeMode Design System - Variables & Fonts
   ============================================= */

/* Pretendard Font Face */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('/fonts/Pretendard-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('/fonts/Pretendard-ExtraLight.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('/fonts/Pretendard-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/Pretendard-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/Pretendard-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('/fonts/Pretendard-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/Pretendard-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('/fonts/Pretendard-ExtraBold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('/fonts/Pretendard-Black.otf') format('opentype');
}

/* Cafe24 Moyamoya Font Face */
@font-face {
    font-family: 'Cafe24Moyamoya';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/Cafe24Moyamoya-Regular-v1.0.otf') format('opentype');
}

:root {
    /* 브라우저 기본 컨트롤까지 라이트 테마로 고정한다. */
    color-scheme: light;

    /* ===== 기준 컬러칩 토큰 ===== */
    --ref-bg-base: #FAFAF8;
    --ref-bg-doc: #F4F3F1;
    --ref-ink: #111111;
    --ref-logo-coral: #FF6B6B;
    --ref-logo-yellow: #FFEF96;
    --ref-accent-orange: #FF4800;
    --ref-accent-yellow: #FFD849;
    --ref-accent-green: #288440;
    --ref-accent-blue: #0060FF;
    --ref-gray-700: #767676;
    --ref-gray-500: #909090;
    --ref-warm-200: #E9E7E2;
    --ref-warm-150: #EDE9DE;
    --ref-warm-400: #BDB7A8;

     /* ===== 상태 색상 ===== */
    --k-status-danger-bg: #FFF0EA;
    --k-status-warning-bg: #FFF6C6;
    --k-status-warning-text: #664F00;
    --k-status-success-bg: #D7F1D8;

    /* ===== 호환용 마이그레이션 토큰 ===== */
    --k-color-gray-e0: #e0e0e0;
    --k-color-slate-650: #334155;
    --k-bg-info-soft: #f0f9ff;
    --k-bg-indigo-soft: #eef2ff;

    /* ===== Layout Sizes ===== */
    --k-sidebar-width: 230px;
    --k-sidebar-collapsed-width: 84px;

    /* ===== 배경 색상 ===== */
    --k-bg-pink: #FFD6E0;
    --k-bg-mint: #C1FBA4;
    --k-bg-blue: #A2D2FF;
    --k-bg-darkblue: #47a5fd;
    --k-bg-purple: #D8B4FE;
    --k-bg-white: #FFFFFF;
    --k-bg-gray: #5F5F5F;
    --k-bg-gray-light: #F5F5F5;
    --k-bg-sidebar: #F8F9FB;
    --k-bg-blur: rgba(248, 249, 251, 0.95);
    --k-bg-hover: #f8fafc;
    --k-bg-request: #FFF8D4;

    /* ===== 텍스트 색상 ===== */
    --k-text-black: #000000;
    --k-text-sidebar-black: #222222;
    --k-text-body: #333333;
    --k-text-gray: #5F5F5F;
    --k-text-subtle: #64748b;
    --k-text-gray-light: #E2E2E2;

    /* ===== 의미 색상 ===== */
    --ref-accent-yellow-hover: #F5C830;
    --ref-accent-orange-hover: #FF8D60;
    --k-color-warning: #f59e0b;
    --k-checkbox-color: #999999;
    --k-color-gray-ddd: #dddddd;
    --k-color-gray-f0: #f0f0f0;
    --ref-accent-orange-soft: #ef4444;
    --k-color-gray-888: #888888;
    --k-color-slate-400: #94a3b8;
    --k-color-gray-aaa: #aaaaaa;
    --k-color-slate-800: #1e293b;
    --k-color-indigo-500: #6163E5;
    --k-color-gray-d1: #d1d5db;
    --k-color-gray-e8: #e8e8e8;
    --k-color-gray-e5: #e5e7eb;
    --k-color-brand-blue: #4361ee;
    --ref-accent-yellow-blue: #2563eb;
    --ref-accent-orange-bg-soft: #fef2f2;
    --k-color-gray-ccc: #cccccc;
    --k-color-slate-600: #475569;
    --k-color-gray-e5-flat: #e5e5e5;
    --k-color-warm-gray: #f5f5f0;
    --k-color-gray-fa: #fafafa;
    --k-color-social-naver: #03c75a;
    --k-color-social-kakao: #fee500;
    --k-color-sign-danger: #e74c3c;
    --k-overlay-dark-50: rgba(0, 0, 0, 0.5);
    --k-overlay-dark-25: rgba(0, 0, 0, 0.25);
    --k-overlay-dark-10: rgba(0, 0, 0, 0.1);
    --k-overlay-dark-15: rgba(0, 0, 0, 0.15);
    --k-overlay-dark-20: rgba(0, 0, 0, 0.2);
    --k-color-brand-salmon: #FFA682;
    --k-color-brand-light-salmon: #FFC9B4;
    --k-border-light-color: #eeeeee;
    --k-color-chart-mint: #7DD3C0;
    --ref-logo-coral-soft: #FF8A8A;
    --k-color-chart-gray: #C4C4C4;
    --k-color-chart-yellow: #FFD93D;
    --k-color-chart-orange: #FF8C42;
    --k-color-storage-red: #f44336;
    --k-bg-skill-tag: #e8f4fd;

    /* ===== 고객 파이프라인 색상 ===== */
    --customer-lead: #8b5cf6;
    --customer-completed: #6b7280;

    /* ===== 보더 ===== */
    --k-border-black: 1px solid #D0D5DD;
    --k-border-black-hard: 2px solid #CBD5E1;
    --k-border-gray: 1px solid #E9E7E2;     
    --k-border-thin: 1px solid #e0e0e0;
    --k-border-light: 1px solid #eeeeee;
    --k-border-color: #e2e8f0;
    --k-border-color-light: #f1f5f9;

    /* ===== Shadows ===== */
    --k-shadow-hard: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --k-shadow-hard-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --k-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.1);
    --k-shadow-hover2: 0 1px 3px rgba(0, 0, 0, 0.08);
    --k-shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --k-shadow-box: 0 2px 5px rgba(0, 0, 0, 0.1);
    --k-shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.1);
    --k-shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.1);
    --k-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);

    /* ===== Border Radius ===== */
    --k-radius-2xl: 16px;
    --k-radius-xl: 12px;
    --k-radius-lg: 14px;
    --k-radius-md: 8px;
    --k-radius-sm: 4px;
    --k-radius-pill: 100px;

    /* ===== Fonts ===== */
    --k-font-primary: 'Pretendard';
    --k-font-cafe24: 'Cafe24Moyamoya';

    /* ===== Transitions ===== */
    --k-transition-fast: all 0.2s ease;
    --k-transition-normal: all 0.3s ease;

    /* ===== Button Tone Tokens (색상 전용) ===== */
    --k-btn-grid-bg: transparent;
    --k-btn-grid-hover-bg: transparent;
    --k-btn-grid-border: none;

    /* ===== Button Size Tokens (메인/서브/그리드) ===== */
    --k-btn-main-height: 38px;
    --k-btn-main-font-size: 14px;
    --k-btn-main-line-height: 1;
    --k-btn-main-padding-y: 0;
    --k-btn-main-padding-x: 16px;

    --k-btn-sub-height: 34px;
    --k-btn-sub-font-size: 13px;
    --k-btn-sub-line-height: 1;
    --k-btn-sub-padding-y: 0;
    --k-btn-sub-padding-x: 14px;

    --k-btn-grid-size: 28px;
    --k-btn-grid-font-size: 14px;
    --k-btn-grid-line-height: 1;
    --k-btn-grid-padding: 4px;

    /* ===== Layout ===== */
    --header-height: 60px;

    /* ===== Form Elements ===== */
    --k-input-height: 40px;
    --k-table-head-height: 44px;
    --k-table-row-height: 55px;
    --k-table-visible-row-count: 10;

    /* ===== Z-Index Scale ===== */
    --k-z-dropdown: 100;
    --k-z-sticky: 900;
    --k-z-overlay: 1000;
    --k-z-modal: 1100;
    --k-z-header: 2000;
    --k-z-sidebar: 2001;
    --k-z-toast: 30000;
    --k-z-tooltip: 9000;
    --k-z-fullscreen: 10000;
    --k-z-critical: 13000;

    /* ===== 공통 간격 체계 ===== */
    --k-space-xs: 4px;
    --k-space-sm: 8px;
    --k-space-md: 12px;
    --k-space-form-label: 14px;
    --k-space-lg: 16px;
    --k-space-xl: 24px;

    /* ===== Typography Scale ===== */
    --k-font-xs: 11px;
    --k-font-sm: 13px;
    --k-font-base: 14px;
    --k-font-lg: 18px;

    /* ===== 확장/호환 색상 변수 ===== */
    --k-color-amber-400: #FEC23D;
    --k-overlay-point-30: rgba(255, 106, 47, 0.3);
    --k-color-amber-450: #FDB72A;
    --k-color-point-strong: #F55A1F;
    --k-overlay-point-40: rgba(255, 106, 47, 0.4);
    --k-overlay-tealgray-10: rgba(85, 133, 139, 0.1);
    --k-color-red-600: #dc2626;
    --k-color-amber-700: #d97706;
    --k-color-violet-600: #7c3aed;
    --k-color-rose-800: #9f1239;
    --k-color-blue-800: #1e40af;
    --k-color-green-800: #166534;
    --k-color-emerald-600: #059669;
    --k-color-emerald-700: #047857;
    --k-overlay-emerald-30: rgba(5, 150, 105, 0.3);
    --k-color-khaki-400: #E6D885;
    --k-color-red-soft: #E55A5A;
    --k-color-sky-soft: #8BB8E6;
    --k-color-lime-soft: #A8E08A;
    --k-color-indigo-200: #c7d2fe;
    --k-overlay-indigo-08: rgba(99, 102, 241, 0.08);
    --k-color-navy-800: #1e3a5f;
    --k-overlay-dark-40: rgba(0,0,0,0.4);
    --k-overlay-dark-45: rgba(0, 0, 0, 0.45);
    --k-overlay-dark-30: rgba(0, 0, 0, 0.3);
    --k-overlay-dark-02: rgba(0, 0, 0, 0.02);
    --k-overlay-dark-08: rgba(0, 0, 0, 0.08);
    --k-overlay-dark-05: rgba(0, 0, 0, 0.05);
    --k-overlay-dark-06: rgba(0, 0, 0, 0.06);
    --k-overlay-dark-12: rgba(0, 0, 0, 0.12);
    --k-overlay-indigo-15: rgba(99, 102, 241, 0.15);
    --k-overlay-white-15: rgba(255, 255, 255, 0.15);
    --k-overlay-white-90: rgba(255, 255, 255, 0.9);
    --k-overlay-white-50: rgba(255, 255, 255, 0.5);
    --k-overlay-white-80: rgba(255, 255, 255, 0.8);
    --k-overlay-white-70: rgba(255, 255, 255, 0.7);
    --k-overlay-violet-10: rgba(139, 92, 246, 0.1);
    --k-overlay-blue-00: rgba(59, 130, 246, 0);
    --k-overlay-point-10: rgba(255, 106, 47, 0.1);
    --k-overlay-point-08: rgba(255, 106, 47, 0.08);
    --k-overlay-point-00: rgba(255, 106, 47, 0);
    --k-overlay-point-20: rgba(255, 106, 47, 0.2);
    --k-overlay-emerald-10: rgba(16, 185, 129, 0.1);
    --k-overlay-slate-500-10: rgba(107, 114, 128, 0.1);
    --k-overlay-slate-400-10: rgba(156, 163, 175, 0.1);
    --k-overlay-amber-10: rgba(245, 158, 11, 0.1);
    --k-overlay-blue-10: rgba(59, 130, 246, 0.1);
    --k-overlay-blue-40: rgba(59, 130, 246, 0.4);
    --k-overlay-dark-03: rgba(0, 0, 0, 0.03);
    --k-overlay-dark-04: rgba(0,0,0,0.04);
    --k-overlay-cream-85: rgba(255, 249, 242, 0.85);
    --k-color-gray-555: #555;
    --k-color-gray-f9: #f9f9f9;
    --k-color-gray-d0: #d0d0d0;
    --k-color-gray-eb: #ebebeb;
    --k-color-green-700: #2e7d32;
    --k-color-gray-f3: #f3f4f6;
    --k-color-gray-9c: #9ca3af;
    --k-color-gray-b0: #b0b8c4;
    --k-color-slate-300: #cbd5e1;
    --k-color-slate-550: #4b5563;
    --k-color-slate-850: #111827;
    --k-color-slate-900: #0f172a;
    --k-color-yellow-400: #facc15;
    --k-color-yellow-300: #fde047;
    --k-color-violet-700: #6d28d9;
    --k-color-violet-800: #5b21b6;
    --k-color-violet-400: #a78bfa;
    --k-color-violet-300: #c4b5fd;
    --k-color-violet-200: #ddd6fe;
    --k-color-red-700: #b91c1c;
    --k-color-red-500: #e53935;
    --k-color-red-400: #f87171;
    --k-color-red-450: #f44a4a;
    --k-color-red-800: #cc0000;
    --k-color-orange-500: #FF9800;
    --k-color-orange-550: #e55a22;
    --k-color-orange-600: #ea580c;
    --k-color-amber-800: #92400e;
    --k-color-emerald-800: #065f46;
    --k-color-orange-700: #e65100;
    --k-color-blue-google: #1a73e8;
    --k-color-blue-500: #4A90D9;
    --k-color-blue-google-500: #4285F4;
    --k-color-blue-soft-border: #c5d9f7;
    --k-color-blue-450: #5ba8f5;
    --k-color-warm-line: #e7e5e0;
    --k-color-mint-border: #b7dfc3;
    -color-status-warning-soft: #fefce8;
    -color-status-warning-soft-300: #FFE066;
    --k-bg-orange-soft-100: #fff7ed;
    --k-bg-danger-soft-strong: #fee2e2;
    --k-bg-warning-soft-strong: #fef3c7;
    --k-bg-indigo-soft-strong: #f0f0ff;
    --k-bg-violet-soft-pale: #f5f3ff;
    --k-bg-violet-soft-strong: #ede9fe;
    --k-bg-violet-soft-deep: #e8e4fd;
    --k-bg-blue-soft: #f0f7ff;
    --k-bg-blue-soft-100: #eff6ff;
    --k-bg-blue-soft-300: #B3D4FF;
    --k-bg-blue-soft-strong: #e5f0ff;
    --k-bg-blue-soft-google: #e8f0fe;
    --k-bg-blue-soft-pale: #e3f2fd;
    --k-bg-info-soft-strong: #dbeafe;
    --k-bg-green-soft: #e8f5e9;
    --k-bg-green-soft-50: #e6f4ea;
    --k-bg-green-soft-200: #b8e6b8;
    --k-bg-info-soft-200: #D7ECFF;
    --k-bg-green-soft-strong: #d1fae5;
    --k-bg-orange-soft: #fff3e0;
    --k-bg-success-soft: #f0fdf4;
    --k-bg-success-soft-strong: #dcfce7;
    --k-bg-warning-soft: #fffbeb;
    --k-bg-violet-soft: #f3e8ff;
    --k-bg-white-soft: #fdfdfd;
    --k-bg-white-soft-2: #fcfcfc;
    --k-bg-gray-soft-100: #f8f8f8;
    --k-bg-blue-pale: #E0E7FF;
    --k-bg-pink-pale: #FCE7F3;
    --k-bg-orange-pale: #FFEDD5;
    --k-bg-primary-soft: #eaf2fb;
    --k-bg-danger-soft-100: #fff2f0;
    --k-bg-job-subtle: #f9fafb;
    --k-overlay-charcoal-10: rgba(26, 26, 26, 0.1);
    --k-color-pink-light: #FFB6C1;
    --k-color-dark-red: #8B0000;
    --k-color-red-200: #fecaca;
    --k-color-red-300: #fca5a5;
    --k-color-red-alert: #FF4D4F;
    --k-color-blue-link: #0066CC;
    --k-color-dark-green: #006400;
    --k-color-green-850: #137333;
    --k-color-green-200: #a8e890;
    --k-color-golden-brown: #8B6914;
    --k-color-purple-deep: #6B2C91;
    --k-color-yellow-soft: #FFE873;
    --k-color-pink-200: #ffccd5;
    --k-color-orange-150: #FFD3B8;
    --k-overlay-white-85: rgba(255, 255, 255, 0.85);
    --k-overlay-white-75: rgba(255, 255, 255, 0.75);
    --k-color-gray-bbb: #bbb;
    --k-color-green-500: #22C55E;
    --k-color-green-300: #8BC34A;
    --k-color-indigo-soft: #6B8BFF;
    --k-color-blue-700: #1d4ed8;
    --k-overlay-blue-30: rgba(37, 99, 235, 0.3);
    --k-color-gray-444: #444;
    --k-color-purple-soft: #9575CD;
    --k-overlay-white-30: rgba(255, 255, 255, 0.3);
    --k-color-slate-700: #374151;
    --k-color-blue-300: #93c5fd;
    --ref-accent-yellow-deepblue: #0000cc;
    --k-color-lavender: #aaaaee;
    --k-color-rose-pale: #eeaaaa;
    --k-overlay-white-60: rgba(255, 255, 255, 0.6);

    /* ===== 커리어모드 색상 토큰 ===== */
    --career-primary: #6163E5;
    --career-primary-soft: #F0F0FF;
    --career-ink: #111111;
    --career-text: #333333;
    --career-muted: #767676;
    --career-border: #E0E0E0;
    --career-surface: #FAFAFA;
    --career-white: #FFFFFF;

    /* ===== Freemode 인증 화면 호환 토큰 ===== */
    --fm-color-primary: var(--k-color-indigo-500);
    --fm-color-primary-soft: var(--k-bg-indigo-soft);
    --fm-color-primary-subtle: var(--k-bg-indigo-soft-strong);
    --fm-color-canvas: var(--k-color-gray-fa);
    --fm-color-surface: var(--k-bg-white);
    --fm-color-text-primary: var(--ref-ink);
    --fm-color-text-secondary: var(--ref-gray-700);
    --fm-color-text-disabled: var(--ref-warm-400);
    --fm-color-border: var(--k-border-light-color);
    --fm-color-border-strong: var(--k-color-gray-e0);
    --fm-color-danger: var(--k-color-red-alert);
    --fm-color-danger-soft: var(--k-bg-danger-soft-100);
    --fm-color-success: var(--ref-accent-green);
    --fm-color-success-soft: var(--k-bg-green-soft);
    --fm-color-info: var(--ref-accent-blue);
    --fm-color-info-soft: var(--k-bg-info-soft);
    --fm-color-social-naver: var(--k-color-social-naver);
    --fm-color-social-kakao: var(--k-color-social-kakao);

    --fm-font-family: var(--k-font-primary);
    --fm-font-size-caption: 12px;
    --fm-font-size-small: 13px;
    --fm-font-size-body: 14px;
    --fm-font-size-body-large: 16px;
    --fm-font-size-heading-small: 18px;
    --fm-font-size-heading: 24px;
    --fm-letter-spacing-ui: -0.02em;

    --fm-space-1: 4px;
    --fm-space-2: 8px;
    --fm-space-3: 14px;
    --fm-space-4: 16px;
    --fm-space-5: 20px;
    --fm-space-6: 24px;
    --fm-space-8: 32px;
    --fm-space-9: 36px;
    --fm-space-10: 40px;
    --fm-space-12: 48px;

    --fm-radius-small: var(--k-radius-sm);
    --fm-radius-medium: var(--k-radius-md);
    --fm-radius-large: var(--k-radius-xl);
    --fm-radius-pill: 999px;
    --fm-control-height-medium: 40px;
    --fm-control-height-large: 48px;
    --fm-shadow-card: var(--k-shadow-soft);
    --fm-shadow-modal: var(--k-shadow-modal);
}