:root {
  --color-primary: #FAAF00; /* main color */
  --color-secondary: #FFF9EA; /* sub color */
  --color-sub_01: #FFDA84;
  
  --color-point: #F6940A;
  --color-danger: #EE4040;
  --color-success: #0EC90B; 

  /* 50,100,200,300,400,500,600,700 기본 */
  /* 기본 그레이 색상 필요하면 중간에 10~90정해서 넣기 */
  --color-gray_50: #fafafa;
  --color-gray_100: #eeeeee;
  --color-gray_150: #DFDFDF;
  --color-gray_200: #CFCFCF;
  --color-gray_300: #ABABAB;
  --color-gray_400: #888888;
  --color-gray_500: #767676;
  --color-gray_600: #545454;
  --color-gray_700: #444444;

  /* 기본 검정, 흰색 */
  --color-black: #191919;
  --color-white: #ffffff;
}


/* background color */
.bg-m {background-color: var(--color-primary);}
.bg-s {background-color: var(--color-secondary);}

.bg-w {background-color: var(--color-white);}
.bg-r {background-color: var(--color-danger);}
/* .bg-gn {background-color: var(--color-success);} */

.bg-g_50 {background-color: var(--color-gray_50);}
.bg-g_100 {background-color: var(--color-gray_100);}
.bg-g_150 {background-color: var(--color-gray_150);}
.bg-g_200 {background-color: var(--color-gray_200);}
.bg-g_300 {background-color: var(--color-gray_300);}
.bg-g_400 {background-color: var(--color-gray_400);}
.bg-g_500 {background-color: var(--color-gray_500);}
.bg-g_600 {background-color: var(--color-gray_600);}
.bg-g_700 {background-color: var(--color-gray_700);}



/* font color */
.t-m {color: var(--color-primary);}
.t-p {color: var(--color-point);} /* 사이드메뉴 활성화 색상 */

.t-w {color: var(--color-white);}
.t-bk {color: var(--color-black);}

.t-g_50 {color: var(--color-gray_50);}
.t-g_100 {color: var(--color-gray_100);}
.t-g_150 {color: var(--color-gray_150);}
.t-g_200 {color: var(--color-gray_200);}
.t-g_300 {color: var(--color-gray_300);}
.t-g_400 {color: var(--color-gray_400);}
.t-g_500 {color: var(--color-gray_500);}
.t-g_600 {color: var(--color-gray_600);}
.t-g_700 {color: var(--color-gray_700);}

.t-r {color: var(--color-danger);}
.t-gn {color: var(--color-success);}


/* border color */
.border-m {border-color: var(--color-primary);}
.border-p {border-color: var(--color-point);}
.border-r {border-color: var(--color-danger);}
.border-g {border-color: var(--color-gray_700);}



button:disabled,
input:read-only {
  background-color: #F7F7F7;
  border: none;
  color: var(--color-gray_300);
}