@charset "utf-8";
:root{
    --view-height: calc((var(--vh, 1vh) * 100));

    --primary-lighten5: #F3FFF7; /*배경색(카드)*/
    --primary-lighten4: #EAF2EC; /*배경색(테이블)*/
    --primary-lighten3: #c1e1c6;
    --primary-lighten2: #99cda3;
    --primary-lighten1: #58C68E; /*로딩바*/
    --primary-base: var(--color-base); /*포인트*/
    --primary-darken1: #398b50;
    --primary-darken2: #307041;
    --primary-darken3: #255d34;
    --primary-darken4: #133c1f;

    --primary-accent: #7DAD90; /*테이블 선색*/

    --secondary-lighten5: #EAEEFF; /*배경색*/
    --secondary-lighten4: #dce9fd;
    --secondary-lighten3: #b7cff6;
    --secondary-lighten2: #92b6ee;
    --secondary-lighten1: #6395e4;
    --secondary-base: #3276DC; /*보조색*/
    --secondary-darken1: #2a63ba;
    --secondary-darken2: #1e4d96;
    --secondary-darken3: #1a407c;
    --secondary-darken4: #0e284f;
    
    --danger-lighten5: #FBE9E9;
    --danger-base: #EE0000;
    --danger-darken1: #A80000;

    --warning-base: #DFA400;
    --warning-lighten5: #FFD8AC;
    --warning-darken1: #92400E;

    --success-base: #008351;
    --success-lighten5: #ECFFF0;
    --success-darken1: #026942;

    --info-base: #006ED0;
    --info-lighten5: #e9f5ff;
    --info-darken1: #0461b3;

    --grey-lighten5: #F6F6F6;
    --grey-lighten4: #F2F4F5;
    --grey-lighten3: #DDD;
    --grey-lighten2: #CDD1D5;
    --grey-lighten1: #A8A8A8;
    --grey-base: #555; 
    --grey-darken1: #464646;
    --grey-darken2: #333;
    --grey-darken3: #222;
    --grey-darken4: #000;

    --border-color: var(--grey-lighten3);

    --timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --transition: .25s var(--timing-function);

    /* icon/ */
    --icon-size: 24px;
    --icon-size-sm: 20px;
    --icon-size-lg: 32px;

    /* Typography */
    --tit-font-size-sm: 24px;
    --tit-font-size: 32px;
    --tit-font-size-lg: 34px;
    --tit-font-size-xl: 36px;

    --txt-font-size-sm: 15px;
    --txt-font-size: 17px;
    --txt-font-size-lg: 20px;

    /* Input */
    --input-height: var(--btn-height);
    --input-border-color: var(--border-color);
    --input-bg-color: #fff;
    --input-font-size: 17px;
    --input-border-radius: 8px;
    --input-padding: 16px;

    --input-height-sm: var(--btn-height-sm);

    --control-icon-size: var(--icon-size-sm); 
    --control-label-font-size: var(--txt-font-size);
    --control-label-color: var(--grey-darken2); 
    --control-gap: 8px;

    /* Button */
    --btn-height-sm: 40px;
    --btn-height: 48px;
    --btn-height-lg: 56px;
    --btn-height-xl: 64px;
    
    --btn-padding-sm: 0 16px;
    --btn-padding: 0 16px;
    --btn-padding-lg: 0 16px;
    --btn-padding-xl: 0 16px;
    
    --btn-font-size-sm: var(--txt-font-size);
    --btn-font-size: var(--txt-font-size);
    --btn-font-size-lg: var(--txt-font-size-lg);
    --btn-font-size-xl: var(--txt-font-size-lg);
}
@media screen and (max-width:767px){
    :root{        

        /* icon/ */
        --icon-size: 20px;
        --icon-size-sm: 16px;
        --icon-size-lg: 24px;

        /* Typography */
        --tit-font-size-sm: 18px;
        --tit-font-size: 22px;
        --tit-font-size-lg: 24px;
        --tit-font-size-xl: 26px;

        --txt-font-size-sm: 12px;
        --txt-font-size: 14px;
        --txt-font-size-lg: 16px;

        /* Input */
        --input-font-size: 16px;
        --input-border-radius: 6px;
        --input-padding: 12px;

        /* Button */
        --btn-height-sm: 36px;
        --btn-height: 42px;
        --btn-height-lg: 48px;
        --btn-height-xl: 52px;
    
        --btn-padding-sm: 0 12px;
        --btn-padding: 0 12px;
        --btn-padding-lg: 0 12px;
        --btn-padding-xl: 0 12px;

    }
}