/*
============================================================
FONT FACE
============================================================
*/
@font-face {
    font-family: "GmarketSans";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GmarketSans";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GmarketSans";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "RiaSans";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "WavvePADO";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/WavvePADO-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NickelGothic";
    src: url("../../font/nickel-gothic.eot");
    src: url("../../font/nickel-gothic.eot?#iefix") format("embedded-opentype"),
         url("../../font/nickel-gothic.woff2") format("woff2"),
         url("../../font/nickel-gothic.woff") format("woff"),
         url("../../font/nickel-gothic.otf") format("opentype"),
         url("../../font/nickel-gothic.ttf") format("truetype"),
         url("../../font/nickel-gothic.svg#NickelGothic") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Esamanru";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Esamanru";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/*
============================================================
FONT FAMILY
============================================================
*/
.ff-base,
.font-base {
    font-family: var(--font-base);
}

.ff-kr,
.font-kr {
    font-family: var(--font-kr);
}

.ff-eng,
.font-eng {
    font-family: var(--font-eng);
}

.ff-paper,
.font-paper,
.ft-paperlogy {
    font-family: var(--font-paper);
}

.ft-noto-sans {
    font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.ft-pretendard {
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

.ft-montserrat {
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
}

.ft-nickel {
    font-family: "NickelGothic", "Montserrat", Arial, sans-serif;
}

.ft-noto-serif {
    font-family: "Noto Serif KR", "Noto Sans KR", serif;
}

.ft-gmarket {
    font-family: "GmarketSans", "Noto Sans KR", sans-serif;
}

.ft-ria {
    font-family: "RiaSans", "Noto Sans KR", sans-serif;
}

.ft-wavve {
    font-family: "WavvePADO", "Noto Sans KR", sans-serif;
}

.ft-esamanru {
    font-family: "Esamanru", "Noto Sans KR", sans-serif;
}

.ft-mono {
    font-family: var(--font-mono);
}

.ft-suit {
    font-family: 'Suit', "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/*
============================================================
FONT WEIGHT
============================================================
*/
.fw-100,
.thin {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300,
.light {
    font-weight: 300;
}

.fw-400,
.regular {
    font-weight: 400;
}

.fw-500,
.medium {
    font-weight: 500;
}

.fw-600,
.semibold {
    font-weight: 600;
}

.fw-700,
.bold {
    font-weight: 700;
}

.fw-800,
.extrabold {
    font-weight: 800;
}

.fw-900,
.black {
    font-weight: 900;
}

/*
============================================================
FONT SIZE
============================================================
*/
.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.fs-26 {
    font-size: 26px;
}

.fs-28 {
    font-size: 28px;
}

.fs-30 {
    font-size: 30px;
}

.fs-32 {
    font-size: 32px;
}

.fs-34 {
    font-size: 34px;
}

.fs-36 {
    font-size: 36px;
}

.fs-38 {
    font-size: 38px;
}

.fs-40 {
    font-size: 40px;
}

.fs-44 {
    font-size: 44px;
}

.fs-48 {
    font-size: 48px;
}

.fs-52 {
    font-size: 52px;
}

.fs-56 {
    font-size: 56px;
}

.fs-60 {
    font-size: 60px;
}

.fs-64 {
    font-size: 64px;
}

.fs-72 {
    font-size: 72px;
}

.fs-80 {
    font-size: 80px;
}

.fs-88 {
    font-size: 88px;
}

.fs-96 {
    font-size: 96px;
}

.fs-100 {
    font-size: 100px;
}

.fs-120 {
    font-size: 120px;
}

/*
============================================================
LINE HEIGHT
============================================================
*/
.lh-1 {
    line-height: 1;
}

.lh-11 {
    line-height: 1.1;
}

.lh-12 {
    line-height: 1.2;
}

.lh-13 {
    line-height: 1.3;
}

.lh-14 {
    line-height: 1.4;
}

.lh-15 {
    line-height: 1.5;
}

.lh-16 {
    line-height: 1.6;
}

.lh-18 {
    line-height: 1.8;
}

.lh-20 {
    line-height: 2;
}

/*
============================================================
TEXT CONTROL
============================================================
*/
.ls-0 {
    letter-spacing: 0;
}

.ls-01 {
    letter-spacing: 0.01em;
}

.ls-02 {
    letter-spacing: 0.02em;
}

.ls-03 {
    letter-spacing: 0.03em;
}

.ls-05 {
    letter-spacing: 0.05em;
}

.ls-1 {
    letter-spacing: 0.1em;
}

.upper {
    text-transform: uppercase;
}

.lower {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.italic {
    font-style: italic;
}

.normal {
    font-style: normal;
}

.keep {
    word-break: keep-all;
}

.break {
    word-break: break-all;
}

.nowrap {
    white-space: nowrap;
}

.pre-line {
    white-space: pre-line;
}

.ellipsis {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis2 {
    display: -webkit-box;
    word-break: keep-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis3 {
    display: -webkit-box;
    word-break: keep-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}