@charset "utf-8";

@font-face {
	font-family: 'Pretendard';
	src: url('/img/fonts/PretendardVariable.woff2') format('woff2'); 
	font-weight: 100 900; 
	font-style: normal;
	font-display: swap;
 }
 
@font-face {
	font-family: 'Chosunilbo_myungjo';
	font-weight: normal;
	font-style: normal;
	src: url('/img/fonts/Chosun_ilbo_myungjottf.woff2') format('woff2'),
}

/* GmarketSans */
@font-face {
    font-family: 'GmarketSansBold';
	src: url('/img/fonts/GmarketSansTTFBold.woff2') format('woff2'); 
	font-display: swap;
}

@font-face {
    font-family: 'GmarketSansMedium';
	src: url('/img/fonts/GmarketSansTTFMedium.woff2') format('woff2'); 
	font-display: swap;
}
@font-face {
    font-family: 'GmarketSansLight';
	src: url('/img/fonts/GmarketSansTTFLight.woff2') format('woff2'); 
	font-display: swap;
}

/* Montserrat */
@font-face {
	font-family: 'Montserrat';
	font-weight:500;
	src: url('/img/fonts/Montserrat-Regular.woff2') format('woff2'); 
	src: url('/img/fonts/Montserrat-Regular.woff') format('woff'),	
}

@font-face {
	font-family: 'Montserrat';
	font-weight:900;
	src: url('/img/fonts/Montserrat-Black.woff2') format('woff2'); 
	src: url('/img/fonts/Montserrat-Black.woff') format('woff'),	
}

/* 기본 설정: 16px * 62.5% = 10px */
html {
  font-size: 62.5%;
}

:root {
  --font-main: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-num: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; /* 숫자용 */
  --font-mont: "Montserrat", sans-serif;     
  --font-gmarket: "GmarketSans", sans-serif; 
  
  --fs-12: 1.2rem;    /* 12px */
  --fs-13: 1.3rem;    /* 13px */
  --fs-14: 1.4rem;    /* 14px */
  --fs-15: 1.5rem;    /* 15px */
  --fs-16: 1.6rem;    /* 16px */
  --fs-18: 1.8rem;    /* 18px */
  --fs-20: 2.0rem;    /* 20px */
  --fs-22: 2.2rem;    /* 22px */
  --fs-24: 2.4rem;    /* 24px */
  --fs-26: 2.6rem;    /* 26px */
  --fs-28: 2.8rem;    /* 28px */
  --fs-30: 3.0rem;    /* 30px */
  --fs-32: 3.2rem;    /* 32px */
  --fs-34: 3.4rem;    /* 34px */
  --fs-36: 3.6rem;    /* 36px */
  --fs-38: 3.8rem;    /* 38px */
  --fs-40: 4.0rem;    /* 40px */
  --fs-42: 4.2rem;    /* 42px */
  --fs-44: 4.4rem;    /* 44px */
  --fs-46: 4.6rem;    /* 46px */
  --fs-48: 4.8rem;    /* 48px */
  --fs-50: 5.0rem;    /* 50px */
  --fs-52: 5.2rem;    /* 52px */
  
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-base: 1.3;
  --lh-mid: 1.4;
  --lh-tight: 1.2;
  
  --ls-normal: 0em;
  --ls-narrow: -0.02em;
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-narrow);
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { font-family: var(--font-main); }
a:hover { font-family: var(--font-main); }
strong, div, th, td, p, span, dt, dd, li { font-family: var(--font-main); }

.font-num { 
  font-family: var(--font-num) !important; 
  letter-spacing: 0;
}

.font-gmarket { 
  font-family: var(--font-gmarket) !important; 
  word-break: keep-all; 
}

.text-12 { font-size: var(--fs-12) !important; }   /* 12px */
.text-14 { font-size: var(--fs-14) !important; }   /* 14px */
.text-15 { font-size: var(--fs-15) !important; }
.text-16 { font-size: var(--fs-16) !important; } /* 16px */
.text-18 { font-size: var(--fs-18) !important; }      /* 18px */
.text-20 { font-size: var(--fs-20) !important; }   /* 20px */
.text-22 { font-size: var(--fs-22) !important; }
.text-24 { font-size: var(--fs-24) !important; }   /* 24px */
.text-32 { font-size: var(--fs-32) !important; }   /* 32px */
.text-34 { font-size: var(--fs-34) !important; } /* 34px */
.text-40 { font-size: var(--fs-40) !important; } /* 40px */

.fw-light { font-weight: var(--fw-light) !important; }
.fw-regular { font-weight: var(--fw-regular) !important; }
.fw-medium { font-weight: var(--fw-medium) !important; }
.fw-semibold { font-weight: var(--fw-semibold) !important; }
.fw-bold { font-weight: var(--fw-bold) !important; }

.ls-normal { letter-spacing: var(--ls-normal) !important; }

.text-center { text-align: center; }
.text-bold { font-weight: var(--fw-bold); }
.text-muted { color: #666; font-size: var(--fs-sm); }

.red { font-family: var(--font-main); }