:root {
  /* ===== Primary ===== */
  --color-primary-100: #FAFFEC;
  --color-primary-200: #F7FFE2;
  --color-primary-300: #EEFFC3;
  --color-primary-400: #C8FF3C;
  --color-primary-500: #B4E636;
  --color-primary-600: #A0CC30;
  --color-primary-700: #96BF2D;
  --color-primary-800: #789924;
  --color-primary-900: #5A731B;
  --color-primary-950: #465915;

  /* ===== Secondary ===== */
  --color-secondary-100: #FFFFF2;
  --color-secondary-200: #FFFFEB;
  --color-secondary-300: #FFFDD5;
  --color-secondary-400: #FFFF78;
  --color-secondary-500: #E6E66C;
  --color-secondary-600: #CCCC60;
  --color-secondary-700: #BFBF5A;
  --color-secondary-800: #999948;
  --color-secondary-900: #737336;
  --color-secondary-950: #59592A;

  /* ===== System ===== */
  --color-system-100: #E9E9EB;
  --color-system-200: #BBBCC1;
  --color-system-300: #9A9BA3;
  --color-system-400: #6C6E7A;
  --color-system-500: #505160;
  --color-system-600: #242638;
  --color-system-700: #212333;
  --color-system-800: #1A1B28;
  --color-system-950: #0F1018;

  /* ===== System Gray ===== */
  --color-system-gray-100: #F8F8F8;
  --color-system-gray-200: #F4F4F4;
  --color-system-gray-300: #E9E9E9;
  --color-system-gray-400: #B8B8B8;
  --color-system-gray-500: #A6A6A6;
  --color-system-gray-600: #939393;
  --color-system-gray-700: #8A8A8A;
  --color-system-gray-800: #6E6E6E;
  --color-system-gray-900: #535353;
  --color-system-gray-950: #404040;

  --color-system-bk: #000000;
  --color-system-wt: #FFFFFF;

  /* ===== Other Colors ===== */
  --color-red: #FF4600;
  --color-error: #FF0000;
  --color-focus: #409EFF;
  --color-warning: #FF9314;

  --color-bg-back: #13151B;
  --color-bg-front: #2D2E37;

  --color-border: var(--color-system-500);
  --color-border-focus: var(--color-primary-400);
  --color-border-error: var(--color-error);
}

body {
  font-size: 14px;
  font-family:
    "Noto Sans KR",
    "Noto Sans",
    "Noto Sans JP",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 400;
  line-height: 1;
  background-color: var(--color-bg-back);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

input,
textarea {
  outline: none;
}

/* ===============================
   FONT WEIGHT TYPE MAPPING
   bk(Black)=900, b(Bold)=700,
   m(Medium)=500, r(Regular)=400
   =============================== */

/* ---- bk (900) ---- */
.font-bk-24 { font-size: 24px; font-weight: 900; }
.font-bk-22 { font-size: 22px; font-weight: 900; }
.font-bk-20 { font-size: 20px; font-weight: 900; }
.font-bk-18 { font-size: 18px; font-weight: 900; }
.font-bk-16 { font-size: 16px; font-weight: 900; }
.font-bk-14 { font-size: 14px; font-weight: 900; }
.font-bk-12 { font-size: 12px; font-weight: 900; }
.font-bk-10 { font-size: 10px; font-weight: 900; }

/* ---- b (700) ---- */
.font-b-24 { font-size: 24px; font-weight: 700; }
.font-b-22 { font-size: 22px; font-weight: 700; }
.font-b-20 { font-size: 20px; font-weight: 700; }
.font-b-18 { font-size: 18px; font-weight: 700; }
.font-b-16 { font-size: 16px; font-weight: 700; }
.font-b-14 { font-size: 14px; font-weight: 700; }
.font-b-12 { font-size: 12px; font-weight: 700; }
.font-b-10 { font-size: 10px; font-weight: 700; }

/* ---- m (500) ---- */
.font-m-24 { font-size: 24px; font-weight: 500; }
.font-m-22 { font-size: 22px; font-weight: 500; }
.font-m-20 { font-size: 20px; font-weight: 500; }
.font-m-18 { font-size: 18px; font-weight: 500; }
.font-m-16 { font-size: 16px; font-weight: 500; }
.font-m-14 { font-size: 14px; font-weight: 500; }
.font-m-12 { font-size: 12px; font-weight: 500; }
.font-m-10 { font-size: 10px; font-weight: 500; }

/* ---- r (400) ---- */
.font-r-24 { font-size: 24px; font-weight: 400; }
.font-r-22 { font-size: 22px; font-weight: 400; }
.font-r-20 { font-size: 20px; font-weight: 400; }
.font-r-18 { font-size: 18px; font-weight: 400; }
.font-r-16 { font-size: 16px; font-weight: 400; }
.font-r-14 { font-size: 14px; font-weight: 400; }
.font-r-12 { font-size: 12px; font-weight: 400; }
.font-r-10 { font-size: 10px; font-weight: 400; }