@charset "utf-8";

@import url(pretendardGOV/font.css);

/* 공통영역 */
:root{
    /* basic */
    --primary0:#FFFFFF;
    --primary5:#FEF0F3;
    --primary10:#FAE0E5;
    --primary20:#F4CBD3;
    --primary30:#E9A8B4;
    --primary40:#E5758A;
    --primary50:#C82644;
    --primary60:#A01E36;
    --primary70:#781729;
    --primary80:#500F1B;
    --primary90:#28080E;
    --primary95:#140407;

    --secondary0:#FFFFFF;
    --secondary5: #F5F8FD;
    --secondary10: #DEE7FB;
    --secondary20: #D2DCF3;
    --secondary30: #C3D2F0;
    --secondary40: #B3C4E6;
    --secondary50: #2B4171;
    --secondary60: #203156;
    --secondary70: #1B2F58;
    --secondary80: #03224A;
    --secondary90: #04112C;
    --secondary95: #020B20;

    --gray0: #ffffff;
    --gray5: #F2F4F5;
    --gray10: #E7E8EA;
    --gray20: #D5D9DD;
    --gray30: #B1B8BE;
    --gray40: #8A949E;
    --gray50: #6D7882;
    --gray60: #58616A;
    --gray70: #464C53;
    --gray80: #33363D;
    --gray90: #1E2124;
    --gray95: #131416;
    --gray100: #000000;

    --graphic100: #000;
    
    --black100: #000000;
    --black75: #000000BF;
    --black50: #0000007F;
    --black25: #0000003F;
    --black10: #0000001A;
    --black0: #00000000;

    --white100: #ffffff;
    --white75: #FFFFFFBF;
    --white50: #FFFFFF7F;
    --white25: #FFFFFF3F;
    --white10: #FFFFFF1A;
    --white0: #ffffff00;

    --danger5:#FDEFEC;
    --danger10:#FCDFD9;
    --danger20:#F7AFA1;
    --danger30:#F48771;
    --danger40:#F05F42;
    --danger50:#DE3412;
    --danger60:#BD2C0F;
    --danger70:#8A240F;
    --danger80:#5C180A;
    --danger90:#390D05;
    --danger95:#260903;

    --warning5: #FFF3DB;
    --warning10: #FFE0A3; 
    --warning20: #FFC95C;
    --warning30: #FFB114;
    --warning40: #C78500;
    --warning50: #9E6A00;
    --warning60: #8A5C00;
    --warning70: #614100;
    --warning80: #422C00;
    --warning90: #2E1F00;
    --warning95: #241800;

    --success5: #eaf6ec;
    --success10: #d8eedd;
    --success20: #a9dab4;
    --success30: #7ec88e;
    --success40: #3fa654;
    --success50: #228738;
    --success60: #267337;
    --success70: #285d33;
    --success80: #1f4727;
    --success90: #122b18;
    --success95: #0e2012;

    --info5: #e7f4fe;
    --info10: #d3ebfd;
    --info20: #9ed2fa;
    --info30: #5fb5f7;
    --info40: #2098f3;
    --info50: #0b78cb;
    --info60: #096ab3;
    --info70: #085691;
    --info80: #053961;
    --info90: #03253f;
    --info95: #021a2c;

    --point5: #FBEFF0;
    --point10: #F5D6D9;
    --point20: #EBADB2;
    --point30: #E0858C;
    --point40: #D65C66;
    --point50: #D63D4A;
    --point60: #AB2B36;
    --point70: #7A1F26;
    --point80: #521419;
    --point90: #310C0F;
    --point95: #21080A;

    --number0: 0px;
    --nubmer1: 1px;
    --number2: 2px;
    --nubmer3: 4px;
    --number4: 6px;
    --nubmer5: 8px;
    --number6: 10px;
    --nubmer7: 12px;
    --number8: 16px;
    --nubmer9: 20px;
    --number10: 24px;
    --nubmer11: 28px;
    --number12: 32px;
    --nubmer13: 36px;
    --number14: 40px;
    --nubmer15: 44px;
    --number16: 48px;
    --nubmer17: 56px;
    --number18: 64px;
    --nubmer19: 72px;
    --number20: 80px;
    --nubmer21: 96px;
    --numberMax: 1000px;


    /* custom */
    --color-background-dark: var(--gray100);
    --color-background-white: var(--gray0);
    --color-background-gray-subtler: var(--gray5);
    --color-background-gray-subtle: var(--gray10);
    --color-background-inverse: var(--gray90);   
    --color-background-dim: var(--black75);

    --color-surface-white: var(--gray0);
    --color-surface-white-subtle: var(--gray0);
    --color-surface-white-subtler: var(--gray0);
    --color-surface-white-static: var(--gray0);
    --color-surface-inverse: var(--gray90);    
    --color-surface-inverse-static: var(--gray90);
    --color-surface-gray-subtler: var(--gray5);
    --color-surface-gray-subtle: var(--gray10);    
    --color-surface-disabled: var(--gray20);
    --color-surface-primary-subtler: var(--secondary5);    

    --color-border-transparency: var(--black0);
    --color-border-inverse: var(--gray0);
    --color-border-disabled: var(--gray30);
    --color-border-gray-light: var(--gray10);
    --color-border-gray: var(--gray20);
    --color-border-gray-dark: var(--gray60);
    --color-border-gray-darker: var(--gray90);
    --color-border-primary-light: var(--primary10);
    --color-border-primary: var(--primary50);
    --color-border-secondary-light: var(--secondary10);
    --color-border-secondary: var(--secondary70);
    --color-border-point-light: var(--point10);
    --color-border-point: var(--point50);
    
    --color-divider-gray-light: var(--gray10);
    --color-divider-gray: var(--gray20);
    --color-divider-gray-dark: var(--gray50);
    --color-divider-gray-darker: var(--gray90);
    --color-divider-inverse: var(--gray0);
    
    --color-text-dark: var(--gray100);
    --color-text-bolder: var(--gray95);
    --color-text-basic: var(--gray95);
    --color-text-subtle: var(--gray70);
    --color-text-disabled: var(--gray40);
    --color-text-disabled-on: var(--gray50);
    --color-text-bolder-inverse: var(--gray0);
    --color-text-basic-inverse: var(--gray0);
    --color-text-subtle-inverse: var(--gray40);
    --color-text-static: var(--gray90);
    --color-text-inverse-static: var(--gray0);
    --color-text-secondary: var(--secondary50);
    --color-text-point: var(--point60);

    --color-action-white: var(--gray0);
    --color-action-primary: var(--white0);
    --color-action-primary-hover: var(--primary5);
    --color-action-primary-pressed: var(--primary10);
    --color-action-primary-selected: var(--primary5);
    --color-action-primary-active: var(--primary50);
    --color-action-secondary: var(--white0);
    --color-action-secondary-hover: var(--secondary5);
    --color-action-secondary-pressed: var(--secondary10);
    --color-action-secondary-selected: var(--secondary5);
    --color-action-secondary-on: var(--white0);
    --color-action-secondary-on-hover: var(--gray0);
    --color-action-secondary-on-pressed: var(--secondary10);
    --color-action-secondary-on-selected: var(--gray0);
    --color-action-secondary-active: var(--secondary50);    
    --color-action-disabled: var(--gray20);
    
    --color-element-inverse: var(--gray0);
    --color-element-inverse-static: var(--gray0);    
    --color-element-gray-lighter: var(--gray5);
    --color-element-gray-light: var(--gray10);
    --color-element-gray: var(--gray50);
    --color-element-gray-dark: var(--gray60);
    --color-element-disabled-light: var(--gray20);
    --color-element-disabled-dark: var(--gray40);
    --color-element-primary: var(--primary50);    
    --color-element-primary-light: var(--primary10);
    --color-element-primary-lighter: var(--primary5);    
    --color-element-secondary: var(--secondary50);
    --color-element-secondary-lighter: var(--secondary5);
    --color-element-secondary-light: var(--secondary10);

    --color-icon-gray: var(--gray95);
    --color-icon-gray-light: var(--gray70);
    --color-icon-gray-fill: var(--gray20);
    --color-icon-inverse: var(--gray0);
    --color-icon-disabled: var(--gray40);
    --color-icon-disabled-on: var(--gray50);    
    --color-icon-primary: var(--primary50);
    --color-icon-secondary: var(--secondary80);
    --color-icon-point: var(--point50);
    --color-icon-inverse-static: var(--gray0);
    --color-icon-primary-static: var(--primary50);
    --color-icon-secondary-static: var(--secondary80);

    --color-link-default: var(--primary50);
    --color-link-hover: var(--primary60);
    --color-link-pressed: var(--primary70);
    --color-link-visited: #5917b8;

    --color-button-primary-fill: var(--primary50);
    --color-button-primary-fill-hover: var(--secondary90);
    --color-button-secondary-fill: var(--secondary20);
    --color-button-secondary-fill-hover: var(--secondary50);
    --color-button-tertiary-fill: var(--white0);
    --color-button-tertiary-fill-hover: var(--gray5);
    --color-button-tertiary-border: var(--gray70);
    --color-button-text-fill: var(--white0);
    --color-button-text-fill-hover: var(--primary50);
    --color-button-text-fill-pressed: var(--secondary10);
    --color-button-text-border: var(--black0);
    --color-button-disabled-fill: var(--gray20);
    --color-button-disabled-border: var(--gray30);
    
    --color-input-surface: var(--gray0);
    --color-input-border: var(--gray60);
    --color-input-border-active: var(--primary50);
    --color-input-border-error: var(--danger50);
    --color-input-surface-disabled: var(--gray20);
    --color-input-border-disabled: var(--gray30);
        
    --color-graphic-blue-subtler: var(--secondary10);
    --color-graphic-blue-subtle: var(--secondary30);
    --color-graphic-blue: var(--secondary50);
    --color-graphic-red-subtler: var(--primary5);
    --color-graphic-red-subtle: var(--primary10);    
    --color-graphic-red: var(--primary20);
    --color-graphic-brand: var(--primary50);
        
    --color-alpha-base100: var(--white100);
    --color-alpha-base75: var(--white75);    
    --color-alpha-base50: var(--white50);
    --color-alpha-base25: var(--white25);
    --color-alpha-base10: var(--white10);
    --color-alpha-base0: var(--white0);
    --color-alpha-inverse100: var(--black100);
    --color-alpha-inverse75: var(--black75);
    --color-alpha-inverse50: var(--black50);
    --color-alpha-inverse25: var(--black25);
    --color-alpha-inverse10: var(--black10);
    --color-alpha-inverse0: var(--black0);
    --color-alpha-shadow1: #0000000d;
    --color-alpha-shadow2: #00000014;
    --color-alpha-shadow3: #0000001f;

    --border-width-regular: var(--number1);
    --border-width-medium: var(--number2);

    --shadow-y-3: var(--number5);
    --shadow-y-4: var(--number8);
    --shadow-blur-3: var(--number14);
    --shadow-blur-4: var(--nubmer19);
    
    --gap1: var(--number2);
    --gap2: var(--number3);
    --gap3: var(--number5);
    --gap4: var(--number7);
    --gap5: var(--number8);
    --gap6: var(--number9);
    --gap7: var(--number10);
    --gap8: var(--number12);
    --gap9: var(--number14);
    --gap10: var(--number16);
    --gap11: var(--number18);
    --gap12: var(--number20);

    --padding1: var(--number2);
    --padding2: var(--number3);
    --padding3: var(--number5);
    --padding4: var(--number6);
    --padding5: var(--number7);
    --padding6: var(--number8);
    --padding7: var(--number9);
    --padding8: var(--number10);
    --padding9: var(--number12);
    --padding10: var(--number14);
    --padding11: var(--number16);

    --radius-xxsmall-4: var(--number3);
    --radius-xsmall-6: var(--number4);
    --radius-small-8: var(--number5);
    --radius-medium-10: var(--number6);
    --radius-medium-12: var(--number7);
    --radius-large-16: var(--number8);
    --radius-xlarge-20: var(--number9);
    --radius-max: var(--numberMax);
}