/**************************************************************/
/*								                              */
/*  Design ezinc     			                              */
/*  Date : 2024-09-24	                                      */
/*      				         			                  */
/**************************************************************/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');



/* ============================ [ Variable ] ============================ */
:root {
    -webkit-tap-highlight-color: transparent;
    font-size: 10px;

    /* Default */
    --black: #000000;
    --white: #FFFFFF;
    --disabled: #B6BBC2;
    
    /* Form */
    --form: #FFFFFF;
    --form-50: #F2F9FF;
    --form-100: #E8EDF4;  
        
    /* primary */
    --primary: #4A7FF7;
    --primaryLight: #DCE8FF;
    --primarySoft: #7BAAFF;
    --primaryOn: #FFFFFF;
    --primaryHard: #1E61F9;
    --primaryHardOn: #FFFFFF;
    --primaryDisabled: #CAD0E2;
    --primaryDisabledOn: #FFFFFF;

    /* secondary */
    --secondary: #3E5272;
    --secondarySoft: #7E8DA5;
    --secondaryOn: #FFFFFF;
    --secondaryHard: #273955;
    --secondaryHardOn: #FFFFFF;
    --secondaryDisabled: #CAD0E2;
    --secondaryDisabledOn: #FFFFFF;
    
    /* gray */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111113;

    /* blue */
    --blue-10: #F7FBFF;
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;
    
    /* red */
    --red-50: #FEF2F2;
    --red-100: #FEE2E2;
    --red-200: #FECACA;
    --red-300: #FCA5A5;
    --red-400: #F87171;
    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --red-800: #991B1B;
    --red-900: #7F1D1D;
    
    /* yellow */
    --yellow-50: #FFFBEB;
    --yellow-100: #FEF3C7;
    --yellow-200: #FDE68A;
    --yellow-300: #FCD34D;
    --yellow-400: #FBBF24;
    --yellow-500: #F59E0B;
    --yellow-600: #D97706;
    --yellow-700: #B45309;
    --yellow-800: #92400E;
    --yellow-900: #78350F;
    
    /* green */
    --green-50: #ECFDF5;
    --green-100: #D1FAE5;
    --green-200: #A7F3D0;
    --green-300: #6EE7B7;
    --green-400: #34D399;
    --green-500: #10B981;
    --green-600: #059669;
    --green-700: #047857;
    --green-800: #065F46;
    --green-900: #064E3B;

    /* navy */
    --navy-50: #EEF2FF;
    --navy-100: #E0E7FF;
    --navy-200: #C9CEFF;
    --navy-300: #ABB3FF;
    --navy-400: #7F8BF8;
    --navy-500: #616FEB;
    --navy-600: #4755D1;
    --navy-700: #2835AB;
    --navy-800: #111C7D;
    --navy-900: #060E57;
    
    /* purple */
    --purple-50: #F5F3FF;
    --purple-100: #EDE9FE;
    --purple-200: #DDD6FE;
    --purple-300: #C4B5FD;
    --purple-400: #A78BFA;
    --purple-500: #8B5CF6;
    --purple-600: #7C3AED;
    --purple-700: #6D28D9;
    --purple-800: #5B21B6;
    --purple-900: #4C1D95;
    
    /* pink */
    --pink-50: #FDF2F8;
    --pink-100: #FCE7F3;
    --pink-200: #FBCFE8;
    --pink-300: #F9A8D4;
    --pink-400: #F472B6;
    --pink-500: #EC4899;
    --pink-600: #DB2777;
    --pink-700: #BE185D;
    --pink-800: #9D174D;
    --pink-900: #831843;
    
    /* box-shadow */
    --shadow: 0px 4px 20px 0px rgba(0, 51, 100, .15);

    /* Input Color */
    --ip-normal-bg: var(--white);
    --ip-normal-line: var(--gray-300);
    --ip-normal-color: var(--gray-900);
    
    --ip-focus-bg: var(--white);
    --ip-focus-line: var(--primary);
    
    --ip-readonly-bg: var(--gray-50);
    --ip-readonly-line: var(--gray-200);
    --ip-readonly-color: var(--gray-500);    
    
    --ip-disabled-bg: var(--gray-100);
    --ip-disabled-line: var(--gray-200);
    --ip-disabled-color: var(--gray-400);
    --ip-placeholder: var(--gray-400);
    
    /* background */
    --bg-header: var(--gray-800);
    --bg-top: var(--primary);
    
    /* border-radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-xxl: 20px;
    --radius-xxxl: 24px;
    --radius-xxxxl: 32px;
    --radius-big: 50px;
    --radius-round: 50%;
    
    /* sqacing size */
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-22: 22px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-44: 44px;
    --spacing-48: 48px;
    --spacing-52: 52px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    
    /* font-family */
    --ff-noto: 'Noto Sans KR', sans-serif;
    
    /* text-size */
    --fs-11: 1.1rem;
    --fs-12: 1.2rem;
    --fs-13: 1.3rem;
    --fs-14: 1.4rem;
    --fs-15: 1.5rem;
    --fs-16: 1.6rem;
    --fs-18: 1.8rem;
    --fs-20: 2rem;
    --fs-24: 2.4rem;
    --fs-28: 2.8rem;
    --fs-32: 3.2rem;
    --fs-64: 6.4rem
    
    /* layout height */
    --header-h: fit-content; 
    --footer-h: fit-content; 
}


/* [data-theme="dark"] {
    --black: #FFFFFF;
    --white: #000000;
    --disabled: #363A43;

    --form: #1A1A1C;
    --form-50: #1A1A1C;
    --form-100: #252629;    

    --primary: #6FA0FF;
    --primaryLight: #34343f;
    --primarySoft: #3378FF;
    --primaryOn: #000000;
    --primaryHard: #A1C1FF;
    --primaryHardOn: #000000;
    --primaryDisabled: #363A43;
    --primaryDisabledOn: #6D7285;

    --secondary: #3C4068;
    --secondarySoft: #393C58;
    --secondaryOn: #ffffff;
    --secondaryHard: #4A5087;
    --secondaryHardOn: #ffffff;
    --secondaryDisabled: #363A43;
    --secondaryDisabledOn: #6D7285;

    --gray-50: #27282C;
    --gray-100: #373940;
    --gray-200: #42454E;
    --gray-300: #5E6270;
    --gray-400: #777C8F;
    --gray-500: #9FA4BA;
    --gray-600: #BEC4D6;
    --gray-700: #DFE4F3;
    --gray-800: #EFF2FA;
    --gray-900: #F6F8FF;

    --blue-50: #1B222F;
    --blue-100: #192D4E;
    --blue-200: #143D79;
    --blue-300: #255AB2;
    --blue-400: #316DCA;
    --blue-500: #4284E4;
    --blue-600: #529BF5;
    --blue-700: #6CB6FF;
    --blue-800: #96D0FF;
    --blue-900: #C6E6FF;

    --red-50: #301718;
    --red-100: #551315;
    --red-200: #78191B;
    --red-300: #922323;
    --red-400: #C93B37;
    --red-500: #E5534B;
    --red-600: #F47068;
    --red-700: #FF938B;
    --red-800: #FFB8B0;
    --red-900: #FFDAD5;

    --yellow-50: #3D3618;
    --yellow-100: #524818;
    --yellow-200: #6F5F12;
    --yellow-300: #947E14;
    --yellow-400: #B79C15;
    --yellow-500: #DEB900;
    --yellow-600: #FFE045;
    --yellow-700: #FFE97D;
    --yellow-800: #F4E7A2;
    --yellow-900: #FFF8D6;

    --green-50: #002E22;
    --green-100: #014735;
    --green-200: #055E47;
    --green-300: #077459;
    --green-400: #088C6B;
    --green-500: #0DA780;
    --green-600: #13C598;
    --green-700: #2DE9B9;
    --green-800: #81F1D5;
    --green-900: #A8F0DE;

    --navy-50: #121C2F;
    --navy-100: #202C40;
    --navy-200: #22334E;
    --navy-300: #253C60;
    --navy-400: #2C4C7E;
    --navy-500: #315A9C;
    --navy-600: #4A76BE;
    --navy-700: #6494E1;
    --navy-800: #84ABEA;
    --navy-900: #C2D7FB;
    
    --purple-50: #362160;
    --purple-100: #472C82;
    --purple-200: #5936A2;
    --purple-300: #6B44BC;
    --purple-400: #8256D0;
    --purple-500: #986EE2;
    --purple-600: #B083F0;
    --purple-700: #B083F0;
    --purple-800: #DCBDFB;
    --purple-900: #EDDDFF;

    --pink-50: #551639;
    --pink-100: #692649;
    --pink-200: #7E325A;
    --pink-300: #983B6E;
    --pink-400: #AE4C82;
    --pink-500: #C96198;
    --pink-600: #E275AD;
    --pink-700: #FC8DC7;
    --pink-800: #FFB3D8;
    --pink-900: #FFD7EB;
    
    --ip-normal-bg: var(--gray-50);
    --ip-normal-line: var(--gray-200);
    --ip-normal-color: var(--gray-900);     
    
    --ip-focus-bg: var(--gray-50);
    --ip-focus-line: var(--primary);
    
    --ip-readonly-bg: var(--gray-50);
    --ip-readonly-line: var(--gray-50);
    --ip-readonly-color: var(--gray-400);
        
    --ip-disabled-bg: var(--gray-50);
    --ip-disabled-line: var(--gray-50);
    --ip-disabled-color: var(--gray-300);
    --ip-placeholder: var(--gray-400);
    
    --bg-header: var(--white);
    --bg-top: var(--gray-100);     
} */