/*
*--------------------------------------------*
|                   Root                     |
*--------------------------------------------*
*/
:root {
    --layout-width: 1280px;                     /* 레이아웃 넓이 */
    --layout-padding: 5.13vw;                   /* 모바일 안쪽 여백 (20px) */
    --Pretendard: "Pretendard", sans-self;                              /* 폰트체 */
    --SUIT: "SUIT", sans-self;                                          /* 폰트체2 */
    --notosansKr: "Noto Sans KR", sans-self;                            /* 폰트체3 */
    --Poppins: "Poppins", sans-self;                                    /* 폰트체4 */
    --spoqaHanSansNeo: "Spoqa Han Sans Neo", sans-self;                 /* 폰트체5 */
    --pretendardVariable: "Pretendard Variable", sans-self;             /* 폰트체6 */
    --Saira: "Saira", sans-self;                                        /* 폰트체7 */
    --GmarketSansBold: "GmarketSansBold", sans-self;                    /* 폰트체8 */
    --GmarketSansLight: "GmarketSansLight", sans-self;                  /* 폰트체9 */
    --MalgunGothic: "Malgun Gothic", Helvetica, Sans-Serif;                  /* 폰트체9 */
    --font-size: 16px;                          /* 폰트 크기 */
    --font-let-spc: -0.02em;                    /* 자간 */
    --line-height: 1.5;                         /* 행간 */
    --default-font-color: #46464F;              /* 기본 폰트 컬러 */
    --disabled-color: #e7e7e7;                  /* disabled 컬러 */

    --notch: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);     /* 아이폰 노치 대응 */

    /* Color */
    /*  Primary(theme)  */
    --primary-50: #F8F9FD;
    --primary-100: #F2F2FC;
    --primary-200: #EBEBFA;
    --primary-300: #999CE4;
    --primary-400: #7A7EE8;
    --primary-500: #5C61D4;
    --primary-600: #4549AB;
    --primary-700: #37396D;
    --primary-800: #0A0B25;

    --black-300: #B8B8B8;
    --black-400: #8E8E8E;
    --black-500: #555555;
    --black-600: #404040;
    --black-650: #333333;
    --black-660: #343434;
    --black-700: #262527;
    --black-750: #222222;
    --black-800: #0D0914;
    --black-850: #121212;
    --black-900: #000000;

    --gray-100: #D6D6D6;
    --gray-200: #D1D1D1;
    --gray-800: #757580;
    --gray-850: #757575;
    --gray-900: #888888;
    --gray-950: #414146;

    --white: #ffffff;
    --white-50: #FCFCFC;
    --white-100: #FAFAFA;
    --white-150: #F8F8F8;
    --white-300: #F5F5F5;
    --white-400: #F1F1F1;
    --white-500: #E8E8E8;
    --white-600: #DDDDDD;

    --purple-gray-50: #DAD7DF;

    --blue-gray-50: #EBECF0;
    --blue-gray-100: #DFE3E9;

    --bora-500: #8B5CD4;

    --orange-500: #FA7C35;
    --orange-600: #F86A0E;

    --blue-500: #2269D1;

    --slate-blue-500: #5C61D4;

    --green-500: #80B430;

    --red-500: #E43E3E;

    /* button */
    --btn-line: #dddddd;
    --btn-main: #5C61D4;
    --btn-main-dark: #4549AB;
    --btn-revers: #FA7C35;
    --btn-revers-dark: #F86A0E;

    --btn-default-border-color: #ddd;               /* button default border color */
    --btn-default-font-color: #404040;               /* button default font color */
    --btn-disabled-border-color: #ddd;              /* button disabled border color */
    --btn-disabled-bg-color: #f9f9f9;               /* button disabled background color */
    --btn-disabled-font-color: #8d96a5;             /* button disabled font color */

    --progress-bar: #ffbe0b;                        /* 과정후기 progress bar color */

    --grey--light: #fafaff;
    --grey--light2: #efefef;

    --text-color: #000;     /* IOS 기준 텍스트 컬러 강조, 제목, 기본 */
    --text-color02: #8e8e93;     /* IOS 기준 텍스트 컬러 연하게 */

    --input-h-s: 32px;                              /* 작은 사이즈 */
    --input-h: 35px;                                /* 기본 사이즈 */
    --input-h-big: 42px;                              /* 대타이틀 옆 상단 검색 사이즈 */

    /*--icon: url("../images/common/icon.png") no-repeat;  !* 일반 아이콘 이미지 경로 *!*/
    /*--icon-size: 300px;    !* 아이콘 이미지 크기(가로x세로) *!*/

    /* scroll bar */
    --scroll-bar-width: 6px;
    --scroll-bar-color: #CACACA;
    --scroll-bar-bg-color: #E8E8E8;
    --scroll-bar-border-radius: 10px;

    /* footer */
    --footer-top-brd: #4a4a4a;
    --footer-bg: #3e3e3e;

    /*  skeleton  */
    /*    --skeleton-bg: #e2e8f0;*/
    --skeleton-bg: linear-gradient(90deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 50%, #e5e5e5 48%);
    --skeleton-bgPos: -100% 0;
    --skeleton-bg50: #cbd5e1;

    /*  accordion  */
    --acc-round: 10px;  /* 아코디언 라운드 */


}