/* Regular */
@font-face {
	font-family: 'Pretendard';
	src: url('./pretendard/web/static/woff2/Pretendard-Regular.woff2') format('woff2'),
		url('./pretendard/web/static/woff/Pretendard-Regular.woff') format('woff'),
		url('./pretendard/public/static/Pretendard-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Medium */
@font-face {
	font-family: 'Pretendard';
	src: url('./pretendard/web/static/woff2/Pretendard-Medium.woff2') format('woff2'),
		url('./pretendard/web/static/woff/Pretendard-Medium.woff') format('woff'),
		url('./pretendard/public/static/Pretendard-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* SemiBold */
@font-face {
	font-family: 'Pretendard';
	src: url('./pretendard/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2'),
		url('./pretendard/web/static/woff/Pretendard-SemiBold.woff') format('woff'),
		url('./pretendard/public/static/Pretendard-SemiBold.otf') format('opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Bold */
@font-face {
	font-family: 'Pretendard';
	src: url('./pretendard/web/static/woff2/Pretendard-Bold.woff2') format('woff2'),
		url('./pretendard/web/static/woff/Pretendard-Bold.woff') format('woff'),
		url('./pretendard/public/static/Pretendard-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* Regular */
/* @font-face {
	font-family: 'Helvetica Now Text';
	src: url('./helvetica-now-text/HelveticaNowText-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
} */

/* Medium */
/* @font-face {
	font-family: 'Helvetica Now Text';
	src: url('./helvetica-now-text/HelveticaNowText-Medium.woff2') format('woff2'),
		url('./helvetica-now-text/HelveticaNowText-Medium.woff') format('woff'),
		url('./helvetica-now-text/HelveticaNowText-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
} */


/* CSS Custom Properties - Variables */
:root {
  /* Typography */
  --font-family-heading: 'Pretendard', sans-serif;
  --font-family-primary: var(--font-family-heading);
}



/* Page utilities */
.page {
  font-family: var(--font-family-primary);
  color: var(--color-primary);
  font-weight: 400;
  letter-spacing: -.2px;
}


/* Heading utilities */
h1, .style-h1 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-900);
  font-size: 36px;
  font-weight: 600;
  line-height: 132%;
  letter-spacing: -0.72px;

  @media (min-width: 1024px) {
    font-size: 66px;
    line-height: 126%;
    letter-spacing: -1.32px;
  }
}

h2, .style-h2 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-800);
  font-size: 30px;
  font-weight: 600;
  line-height: 138%;
  letter-spacing: -0.6px;

  @media (min-width: 1024px) {
    font-size: 34px;
    line-height: 132%;
    letter-spacing: -0.68px;
  }
}

h3, .style-h3 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-700);
  font-size: 20px;
  font-weight: 600;
  line-height: 144%;
  letter-spacing: -0.4px;

  @media (min-width: 1024px) {
    font-size: 26px;
    line-height: 138%;
    letter-spacing: -0.52px;
  }
}


/* Text utilities */
.text-b1, .style-b1 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-500);
  font-size: 16px;
  line-height: 152%;
  letter-spacing: -0.32px;

  @media (min-width: 1024px) {
    font-size: 20px;
    line-height: 152%;
    letter-spacing: -0.4px;
  }
}

.text-b2, .style-b2 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-500);
  font-size: 15px;
  line-height: 154%;
  letter-spacing: -0.3px;

  @media (min-width: 1024px) {
    font-size: 18px;
    line-height: 154%;
    letter-spacing: -0.36px;
  }
}

.text-b3, .style-b3 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-400);
  font-size: 14px;
  line-height: 156%;
  letter-spacing: -0.28px;

  @media (min-width: 1024px) {
    font-size: 16px;
    line-height: 156%;
    letter-spacing: -0.32px;
  }
}

.text-c1, .style-c1 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-350);
  font-size: 13px;
  line-height: 152%;
  letter-spacing: -0.26px;

  @media (min-width: 1024px) {
    font-size: 14px;
    line-height: 152%;
    letter-spacing: -0.28px;
  }
}

.text-c2, .style-c2 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-300);
  font-size: 12px;
  line-height: 154%;
  letter-spacing: -0.24px;

  @media (min-width: 1024px) {
    font-size: 13px;
    line-height: 154%;
    letter-spacing: -0.26px;
  }
}

.text-c3, .style-c3 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-300);
  font-size: 11px;
  line-height: 156%;
  letter-spacing: -0.22px;

  @media (min-width: 1024px) {
    font-size: 12px;
    line-height: 156%;
    letter-spacing: -0.24px;
  }
}