@charset "utf-8";

:root {
    /* primary */
    --color-primary-lighten1: #E8F6FF;
    --color-primary: #0B7EC6;
    --color-primary-darken1: #104093;

    /* secondary */
    /* --color-secondary: #104093; */

    /* tertiary */
    /* --color-tertiary-base: #E5F5FF; */

    /* point */

    /* grey */
    /* --color-grey-lighten3: #EDE9E9;
    --color-grey-lighten2: #828282;
    --color-grey-lighten1: #777777;
    --color-grey-base: #555555;
    --color-grey-darken1: #333333; */

    /* text */
    --color-red-lighten1: #FEF2F2;
    --color-red: #DC2626;
    --color-white: #FFFFFF;
    --color-blue: #006ED0;
    --color-tealblue: #00829B;
    --color-green: #228738;
    --color-navy: #192F55;

    /* border */
    --border-color: var(--color-grey-lighten2);
    --border-style: solid;
    --border-width: 0.1rem;
    --border: var(--border-width) var(--border-style) var(--border-color);

    /* box-shadow */
    --box-shadow: 0 0 2rem 0 rgba(133, 143, 194, 0.25);

    /* transition */
    --timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    --transition: .45s var(--timing-function);

    /* gutter */
    --container-gutter-x: 2rem;

    /* header */
    --header-height: 9.5rem;

    /* input */
    --inp-height: 6rem;
    --inp-border-radius: 1rem;
    --inp-font-size: 1.7rem;
    --inp-padding-x: 2rem;
    --inp-border: var(--border);

    --inp-check-size: 2.4rem;
    
    --inp-valid: #006ED0;
    --inp-invalid: #DE3412;

    --inp-disabled-bg: #EDE9E9;
    --inp-disabled-color: #555555;

    /* button */
    --btn-height-xxs: 3.4rem;
    --btn-height-xs: 4.2rem;
    --btn-height-sm: 4.8rem;
    --btn-height: var(--inp-height);

    --btn-border-radius-xxs: var(--btn-border-radius);
    --btn-border-radius-xs: var(--btn-border-radius);
    --btn-border-radius-sm: 0.6rem;
    --btn-border-radius: 0.8rem;

    --btn-font-size-xxs: 1.5rem;
    --btn-font-size-xs: 1.7rem;
    --btn-font-size-sm: var(--btn-font-size);
    --btn-font-size: 1.9rem;

    --btn-font-weight-xxs: 800;
    --btn-font-weight-xs: 500;
    --btn-font-weight-sm: 600;
    --btn-font-weight: 800;

    --btn-padding-xxs-x: var(--btn-padding-x);
    --btn-padding-xs-x: var(--btn-padding-x);
    --btn-padding-sm-x: var(--btn-padding-x);
    --btn-padding-x: 1.6rem;

    --btn-gap-xxs: var(--btn-gap);
    --btn-gap-xs: var(--btn-gap);
    --btn-gap-sm: var(--btn-gap);
    --btn-gap: 0.8rem;

    --btn-disabled-bg: #EDE9E9;
    --btn-disalbed-border-color: #EDE9E9;
    --btn-disalbed-color: #333333;
}

/* 태블릿 */
@media screen and (max-width: 1180px) {
    :root {
    }
}

/* 모바일 */
@media screen and (max-width: 640px) {
    :root {
        /* gutter */
        --container-gutter-x: 1.6rem;
    }
}