@font-face {
  font-family: 'Gmarket Sans TTF';
  src: url('../font/GmarketSansTTFMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gmarket Sans TTF';
  src: url('../font/GmarketSansTTFBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Nanum Brush Script';
  src: url('../font/NanumBrushScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  line-height: normal;
  background-color: #f3f4f6; /* Premium soft gray background for PC margins */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* On mobile screens, make body background white for a seamless edge-to-edge look */
@media (max-width: 480px) {
  body {
    background-color: #ffffff;
  }
}

:root {
  /* Common Style Variables */

  /* Color */
  --color-black: #000;
  --color-gainsboro: #e5e5e5;
  --color-lemonchiffon: #ecf5c3;
  --color-mediumslateblue: #6670ff;
  --color-mediumturquoise: #69c0c3;
  --color-white: #fff;
  --color-whitesmoke: #eee;

  /* Gap */
  --gap-15: 15px;
  --gap-18: 18px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-25: 25px;

  /* Padding */
  --padding-0: 0px;
  --padding-1: 1px;
  --padding-3: 3px;
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-10: 10px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-19: 19px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-28: 28px;
  --padding-30: 30px;
  --padding-48: 48px;

  /* BorderRadius */
  --br-15: 15px;
  --br-18: 18px;
  --br-28: 28px;
  --br-200: 200px;

  /* Font */
  --font-gmarket-sans-ttf: Gmarket Sans TTF;
  --font-nanum-brush-script: Nanum Brush Script;

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

  /* Shadows */
  --shadow-drop: 0px 8px 0px var(--color-black);

  /* WidthHeights */
  --height-1: 1px;
  --height-8: 8px;
  --height-24: 24px;
  --height-32: 32px;
  --height-36: 36px;
  --height-60: 60px;
  --height-64: 64px;
  --width-103: 103px;
  --width-131: 131px;

  /* LineHeights */
  --lh-8: 8px;
  --lh-20: 20px;
  --lh-22: 22px;
  --lh-32: 32px;
  --lh-36: 36px;

  --left-36: 36px;
  --left-40: 40px;
}