/* Figma Styles of your File */
:root {
  /* Colors */
  /*Primary color*/
  /*Primary color는 버튼, 활성 상태와 같은 UI 전체의 주요 구성 요소에 사용되는 컬러입니다.*/
  --primary-Black: #000;
  --primary-0: #ffffff;
  --primary-5: #eff5ff;
  --primary-10: #d3e1fb;
  --primary-20: #a7c4f7;
  --primary-30: #7ca6f3;
  --primary-40: #5089ef;
  --primary-50: #246beb;
  --primary-60: #1d56bc;
  --primary-70: #16408d;
  --primary-80: #0e2b5e;
  --primary-90: #07152f;
  --primary-90: #000000;

  /*Secondary color*/
  /*Secondary color는 필터, 칩과 같이 UI에서 보조적인 역할을 하는 구성 요소 전반에 사용됩니다.*/
  --secondary-0: #ffffff;
  --secondary-5: #edf1f5;
  --secondary-10: #cdd7e4;
  --secondary-20: #b4c4d6;
  --secondary-30: #99b0cb;
  --secondary-40: #2a5c96;
  --secondary-50: #003675;
  --secondary-60: #002b5e;
  --secondary-70: #002046;
  --secondary-80: #00162f;
  --secondary-90: #000b17;
  --secondary-100: #000000;

  /*Grayscale*/
  /*Grayscale은 정보전달과 위계를 나타내는 중요한 역할을 하며 주로 BG, Text, Line에 사용됩니다.
    특히 텍스트는 가독성을 고려해야 하므로 배경과의 명암비를 고려해야 합니다*/
  --grayscale-0: #ffffff;
  --grayscale-5: #f7f7f8;
  --grayscale-10: #f0f0f0;
  --grayscale-20: #e4e4e4;
  --grayscale-30: #d8d8d8;
  --grayscale-40: #c6c6c6;
  --grayscale-50: #999999;
  --grayscale-60: #717171;
  --grayscale-70: #555555;
  --grayscale-80: #4a4b4c;
  --grayscale-90: #121315;
  --grayscale-100: #000000;

  /*Key colors proportion*/
  /*색의 비율을 균형감 있게 맞추기 위해 60%의 비율로 배경색, 30%는 보조색, 10%는 강조 색으로 색 구성에 적용을 권장합니다.
  • 60%에 해당하는 색상은 주로 배경에 사용되며 흰색, 회색, 검은색처럼 무채색이나 Grayscale이 적용될 수 있습니다.
  • 30%에 해당하는 색상은 보조 색으로 BG color와 강조색을 연결하는 색상으로 BG color와 대비를 이루는 색을 조합하는 것이 좋습니다.
  • 10%에 해당하는 색상은 강조 색으로 강조색은 10% 이하로 적용하는 것이 색 구성에 효과적이며, 너무 높은 비율로 사용할 경우 강조성이 떨어지게 되므로 주의합니다.
  */

  /*System colors*/
  /*Danger : 오류, 금지, 위험, 삭제, 불가 등을 표시할 때 사용합니다.*/
  --danger-5: #feecf0;
  --danger-10: #fcd4de;
  --danger-20: #f799b1;
  --danger-30: #f36689;
  --danger-40: #ef3e5e;
  --danger-50: #eb003b;
  --danger-60: #d50136;
  --danger-70: #8d0023;
  --danger-80: #5e0018;
  --danger-90: #2f000c;

  /*Warning : 실수나 오류가 발생하지 않도록 주의 사항을 전달할 때 사용합니다.  */
  --warning-5: #fffbf4;
  --warning-10: #fef0d5;
  --warning-20: #fddcac;
  --warning-30: #fac382;
  --warning-40: #f6a963;
  --warning-50: #f18231;
  --warning-60: #cf6223;
  --warning-70: #ad4618;
  --warning-80: #8b2e0f;
  --warning-90: #731e09;

  /*success : 성공, 완료, 진행 등의 결과를 전달할 때 사용합니다.  */
  --success-5: #eef7f0;
  --success-10: #cee9d4;
  --success-20: #b2dcbb;
  --success-30: #8cca99;
  --success-40: #33a14b;
  --success-50: #008a1e;
  --success-60: #006e18;
  --success-70: #005312;
  --success-80: #00370c;
  --success-90: #002207;

  /*information: 정보를 제공하거나 특별히 강조가 필요할 때 사용합니다. */
  --information-5: #e9f0ff;
  --information-10: #d4e1ff;
  --information-20: #a9c3ff;
  --information-30: #7da4ff;
  --information-40: #5286ff;
  --information-50: #2768ff;
  --information-60: #1f53cc;
  --information-70: #173e99;
  --information-80: #0c1f4d;
  --information-90: #040a1a;

  /* Fonts */
  --hm-bold-40-font-family: Pretendard-Bold, sans-serif;
  --hm-bold-40-font-size: 40px;
  --hm-bold-40-line-height: 150%;
  --hm-bold-40-font-weight: 700;
  --hm-bold-40-font-style: normal;
  --display-dis-m-bold-50-font-family: Pretendard-Bold, sans-serif;
  --display-dis-m-bold-50-font-size: 50px;
  --display-dis-m-bold-50-line-height: 150%;
  --display-dis-m-bold-50-font-weight: 700;
  --display-dis-m-bold-50-font-style: normal;
  --display-diss-bold-40-font-family: Pretendard-Bold, sans-serif;
  --display-diss-bold-40-font-size: 40px;
  --display-diss-bold-40-line-height: 150%;
  --display-diss-bold-40-font-weight: 700;
  --display-diss-bold-40-font-style: normal;
  --title-titlexl-bold-26-font-family: Pretendard-Bold, sans-serif;
  --title-titlexl-bold-26-font-size: 26px;
  --title-titlexl-bold-26-line-height: 150%;
  --title-titlexl-bold-26-font-weight: 700;
  --title-titlexl-bold-26-font-style: normal;
  --title-titlem-bold-20-font-family: Pretendard-Bold, sans-serif;
  --title-titlem-bold-20-font-size: 20px;
  --title-titlem-bold-20-line-height: 150%;
  --title-titlem-bold-20-font-weight: 700;
  --title-titlem-bold-20-font-style: normal;
  --title-titlebold-26-font-family: Pretendard-Bold, sans-serif;
  --title-titlebold-26-font-size: 26px;
  --title-titlebold-26-line-height: 150%;
  --title-titlebold-26-font-weight: 700;
  --title-titlebold-26-font-style: normal;
  --body-bodyl-regular-18-font-family: Pretendard-Regular, sans-serif;
  --body-bodyl-regular-18-font-size: 18px;
  --body-bodyl-regular-18-line-height: 150%;
  --body-bodyl-regular-18-font-weight: 400;
  --body-bodyl-regular-18-font-style: normal;
  --body-bodym-regular-16-font-family: Pretendard-Regular, sans-serif;
  --body-bodym-regular-16-font-size: 16px;
  --body-bodym-regular-16-line-height: 150%;
  --body-bodym-regular-16-font-weight: 400;
  --body-bodym-regular-16-font-style: normal;
  --body-regular-14-font-family: Pretendard-Regular, sans-serif;
  --body-regular-14-font-size: 14px;
  --body-regular-14-line-height: 150%;
  --body-regular-14-font-weight: 400;
  --body-regular-14-font-style: normal;
  --detailm-regular-15-font-family: Pretendard-Regular, sans-serif;
  --detailm-regular-15-font-size: 15px;
  --detailm-regular-15-line-height: 150%;
  --detailm-regular-15-font-weight: 400;
  --detailm-regular-15-font-style: normal;

  /* Special */

  --border-line: #e2e5eb;
  --border-line-grey: #dcdcdc;
  --button-border-color: #CCC;

  --navi-font-color:#4A4B4C;
  --list-bg-color:#F7F7F8;

  --button-grey:#1D1D1D;



/*=========================================================*/
/*alLACno.1 Point Color*/
--al-base-color:#F9F5F0;
--al-light-color:#EACFA4;
--al-middle-color:#ef9e62;
--al-subBg-color:#FAAB1A;
--al-mainBg-color:#DF771F;
--al-point-color:#CC7E4A;
--al-font-color:#350A03;
--al-lightFont-color:#603D26;

  accent-color: var(--primary-50);
}