:root {
  --point-color: #407df1;
  --point-color-red: #f46363;
  --text-gray-600: #1a1818;
  --text-gray-500: #555;
  --text-gray-400: #999;
  --text-gray-300: #a8a9af;
  --text-wh: #fff;
  --bg-dark: #555;
  --bg-light: #f4f5f8;
  --line-box: #d6dae1;
  --line-divider: #e2e5ea;

  --color-green-500: #03cf5d;
  --color-green-600: #10a54c;

  --color-gray-900: #1a1818;
  --color-gray-700: #52545c;
  --color-gray-600: #6d717b;
  --color-gray-500: #8b9099;

  --expert-primary-purple-900: #1b162f;
  --expert-primary-purple-800: #362c5e;
  --expert-primary-purple-700: #50418e;
  --expert-primary-purple-600: #6b57bd;
  --expert-primary-purple-500: #866dec;
  --expert-primary-purple-400: #9e8af0;
  --expert-primary-purple-300: #b6a7f4;
  --expert-primary-purple-200: #cfc5f7;
  --expert-primary-purple-100: #e7e2fb;
  --expert-primary-purple-50: #f3f0fd;
  --expert-primary-purple-10: #f9f8fe;

  /* Colors */
  --white: #ffffff;

  /* GRAY */
  --gray-900-heading: #1a1818;
  --gray-800: #37383d;
  --gray-700-text: #52545c;
  --gray-600: #6d717b;
  --gray-500: #8b9099;
  --gray-400-placeholder: #acb1ba;
  --gray-300: #c8cdd5;
  --gray-200-divider: #e2e5ea;
  --gray-100: #edeef2;
  --gray-50-background: #f3f4f8;
  --gray-10: #f9fafd;

  /* BLUE */
  --primary-blue-900: #222244;
  --primary-blue-800: #363f5e;
  --primary-blue-700: #37498a;
  --primary-blue-600: #285ec5;
  --primary-blue-500-maincolor: #407df1;
  --primary-blue-400: #5b8cf2;
  --primary-blue-300: #81a8f6;
  --primary-blue-200: #aac4f8;
  --primary-blue-100: #bfd3fa;
  --primary-blue-50: #d4e1fc;
  --primary-blue-10: #e9f0fe;
  --secondary-blue-900: #11324b;
  --secondary-blue-800: #17496f;
  --secondary-blue-700: #1567a5;
  --secondary-blue-600: #248ad8;
  --secondary-blue-500-maincolor: #2ca4ff;
  --secondary-blue-400: #4cadff;
  --secondary-blue-300: #75c1ff;
  --secondary-blue-200: #a1d6ff;
  --secondary-blue-100: #b8e0ff;
  --secondary-blue-50: #cfeaff;
  --secondary-blue-10: #e7f5ff;

  /* RED */
  --primary-red-900: #571717;
  --primary-red-800: #792323;
  --primary-red-700: #ac2323;
  --primary-red-600: #e42e2e;
  --primary-red-500-maincolor: #ff4e4e;
  --primary-red-400: #ff6666;
  --primary-red-300: #ff8a8a;
  --primary-red-200: #ffafaf;
  --primary-red-100: #ffc3c3;
  --primary-red-50: #ffd7d7;
  --primary-red-10: #ffeaea;

  /* GREEN */
  --primary-green-900: #0d3c20;
  --primary-green-800: #10532c;
  --primary-green-700: #187340;
  --primary-green-600: #10a54c;
  --primary-green-500-maincolor: #03cf5d;
  --primary-green-400: #34d877;
  --primary-green-300: #62e399;
  --primary-green-200: #8fe9b6;
  --primary-green-100: #aaefc7;
  --primary-green-50: #c6f4da;
  --primary-green-10: #e2f9ec;

  /* YELLOW */
  --primary-yellow-900: #48390a;
  --primary-yellow-800: #5a4912;
  --primary-yellow-700: #7b651f;
  --primary-yellow-600: #d6a50b;
  --primary-yellow-500-maincolor: #ffca21;
  --primary-yellow-400: #ffd251;
  --primary-yellow-300: #ffda6f;
  --primary-yellow-200: #ffe79c;
  --primary-yellow-100: #ffecb4;
  --primary-yellow-50: #fff2cd;
  --primary-yellow-10: #fff9e6;

  /* OVERLAY */
  --overlay-white-4: rgba(255, 255, 255, 0.04);
  --overlay-white-8: rgba(255, 255, 255, 0.08);
  --overlay-white-12: rgba(255, 255, 255, 0.12);
  --overlay-white-16: rgba(255, 255, 255, 0.16);
  --overlay-priamry-4: rgba(64, 125, 241, 0.04);
  --overlay-priamry-8: rgba(64, 125, 241, 0.08);
  --overlay-priamry-12: rgba(64, 125, 241, 0.12);
  --overlay-priamry-16: rgba(64, 125, 241, 0.16);
  --overlay-gray-4: rgba(26, 24, 24, 0.04);
  --overlay-gray-8: rgba(26, 24, 24, 0.08);
  --overlay-gray-12: rgba(26, 24, 24, 0.12);
  --overlay-gray-16: rgba(26, 24, 24, 0.16);

  /* Fonts */
  --headline-large-700: 700 34px/34px 'Pretendard', sans-serif;
  --headline-medium-700: 700 28px/28px 'Pretendard', sans-serif;
  --headline-small-700-pc: 700 24px/24px 'Pretendard', sans-serif;
  --title-extra-large-700: 700 20px/20px 'Pretendard', sans-serif;
  --title-extra-large-600-pc: 500 20px/20px 'Pretendard', sans-serif;
  --title-large-700-pc: 700 18px/18px 'Pretendard', sans-serif;
  --title-large-600: 500 18px/18px 'Pretendard', sans-serif;
  --title-medium-700: 700 16px/16px 'Pretendard', sans-serif;
  --title-small-700: 700 14px/14px 'Pretendard', sans-serif;
  --body-large-600: 600 16px/16px 'Pretendard', sans-serif;
  --body-large-500: 500 16px/16px 'Pretendard', sans-serif;
  --body-large-400: 400 16px/16px 'Pretendard', sans-serif;
  --body-medium-600: 600 14px/14px 'Pretendard', sans-serif;
  --body-medium-500: 500 14px/14px 'Pretendard', sans-serif;
  --body-medium-400-pc: 400 14px/14px 'Pretendard', sans-serif;
  --body-small-600: 600 12px/12px 'Pretendard', sans-serif;
  --body-small-500: 500 12px/12px 'Pretendard', sans-serif;
  --body-small-400: 400 12px/12px 'Pretendard', sans-serif;
  --button-medium-600: 600 16px/16px 'Pretendard', sans-serif;
  --button-small-600: 600 14px/14px 'Pretendard', sans-serif;

  /* Effects */
  --bottom-sheet-box-shadow: 0px -10px 20px 0px rgba(34, 34, 68, 0.3);
  --primarycolor-cta-box-shadow: 5px 10px 10px 0px rgba(64, 125, 241, 0.2);

  /* BUTTON */
  --button-blue-hover: #3d75e0;
  --button-blue-press: #3a6dce;
  --button-blue-line-hover: #f0f5fe;
  --button-blue-line-press: #e0eafd;
  --button-gray-hover: #656870;
  --button-gray-press: #494a51;
  --button-gray-line-hover: #f9f9f9;
  --button-gray-line-press: #ededed;
}