body {
  margin: 0;
  line-height: normal;
}

:root {
  /* Common Style Variables */

  /* Color */
  --color-black: #000;
  --color-cornsilk: #fff5d7;
  --color-darkgray: #a69f93;
  --color-darkolivegreen: #504408;
  --color-darkslateblue: #502c70;
  --color-darkslategray-100: #444;
  --color-darkslategray-200: #383838;
  --color-dimgray: #59556b;
  --color-gold: #e2d43b;
  --color-gray-100: #fcfcfc;
  --color-gray-200: #8e8e8e;
  --color-gray-300: #868686;
  --color-gray-400: #8b7c62;
  --color-lavender: #dce4ff;
  --color-lavenderblush: #ffeefd;
  --color-lightgray: #cfccc9;
  --color-lightsteelblue: #b5c6e4;
  --color-linen: #fff1e5;
  --color-midnightblue: #392884;
  --color-pink: #f3c4c4;
  --color-white: #fff;
  --color-whitesmoke: #f8f8f8;

  /* Gap */
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;

  /* Padding */
  --padding-0: 0px;
  --padding-10: 10px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-32: 32px;

  /* BorderRadius */
  --br-16: 16px;
  --br-24: 24px;

  /* Font */
  --font-asta-sans: Asta Sans;
  --font-nanum-myeongjo: Nanum Myeongjo;

  /* FontSize */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-28: 28px;

  /* Shadows */
  --shadow-drop: 0px 2px 4px rgba(0, 0, 0, 0.5);

  /* Gradients */
  --gradient-1: linear-gradient(180.02deg, #ecf0ff, #cddaff);
  --gradient-2: linear-gradient(92.71deg, #921cc0, #6f0799);

  /* WidthHeights */
  --height-32: 32px;
  --width-150: 150px;

  /* LetterSpacings */
  --ls--0_04: -0.04;
}