@charset "UTF-8";

@font-face {
    font-family: 'Hakgyoansim Samulham';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimSamulhamR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Phosphate Inline';
    src:
        url('/resource/font/Phosphate-Inline.woff2') format('woff2'),
        url('/resource/font/Phosphate-Inline.woff') format('woff'),
        local('Phosphate Inline'),
        local('Phosphate-Inline'),
        local('PhosphateInline');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Phosphate';
    src:
        url('/resource/font/Phosphate-Solid.woff2') format('woff2'),
        url('/resource/font/Phosphate-Solid.woff') format('woff'),
        local('Phosphate Solid'),
        local('Phosphate-Solid'),
        local('Phosphate');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html { font-size: 62.5%; }

.font-hakgyoansim-samulham {
    font-family: 'Hakgyoansim Samulham', 'NanumSquareNeo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    font-weight: 400;
}

.font-phosphate {
    font-family: 'Phosphate', 'Impact', 'Arial Black', sans-serif !important;
    font-weight: 400;
}

.font-phosphate-inline,
.font-phosphate-inline-thin,
.font-phosphate-inline-medium,
.font-phosphate-inline-thick {
    font-family: 'Phosphate Inline', 'Phosphate', 'Impact', 'Arial Black', sans-serif !important;
    font-weight: 400;
}

.font-phosphate-solid {
    font-family: 'Phosphate', 'Impact', 'Arial Black', sans-serif !important;
    font-weight: 400;
}


/* =========================================
 * Font Size Utilities (1rem = 10px 기준)
 * ========================================= */
.text-8 { font-size: 0.8rem; }
.text-9 { font-size: 0.9rem; }

/* 10px ~ 20px */
.text-10 { font-size: 1rem; }     /* 10px */
.text-10-5 { font-size: 1.05rem; }     /* 10px */
.text-11 { font-size: 1.1rem; }   /* 11px */
.text-12 { font-size: 1.2rem; }   /* 12px */
.text-13 { font-size: 1.3rem; }   /* 13px */
.text-14 { font-size: 1.4rem; }   /* 14px */
.text-15 { font-size: 1.5rem; }   /* 15px */
.text-15-71 { font-size: 1.571rem; } /* legacy sub2 title size */
.text-16 { font-size: 1.6rem; }   /* 16px */
.text-17 { font-size: 1.7rem; }   /* 17px */
.text-18 { font-size: 1.8rem; }   /* 18px */
.text-19 { font-size: 1.9rem; }   /* 19px */
.text-20 { font-size: 2rem; }     /* 20px */

/* 21px ~ 30px */
.text-21 { font-size: 2.1rem; }
.text-22 { font-size: 2.2rem; }
.text-23 { font-size: 2.3rem; }
.text-24 { font-size: 2.4rem; }
.text-25 { font-size: 2.5rem; }
.text-26 { font-size: 2.6rem; }
.text-27 { font-size: 2.7rem; }
.text-28 { font-size: 2.8rem; }
.text-29 { font-size: 2.9rem; }
.text-30 { font-size: 3rem; }

/* 31px ~ 40px */
.text-31 { font-size: 3.1rem; }
.text-32 { font-size: 3.2rem; }
.text-33 { font-size: 3.3rem; }
.text-34 { font-size: 3.4rem; }
.text-35 { font-size: 3.5rem; }
.text-36 { font-size: 3.6rem; }
.text-37 { font-size: 3.7rem; }
.text-38 { font-size: 3.8rem; }
.text-39 { font-size: 3.9rem; }
.text-40 { font-size: 4rem; }

/* 41px ~ 50px */
.text-41 { font-size: 4.1rem; }
.text-42 { font-size: 4.2rem; }
.text-43 { font-size: 4.3rem; }
.text-44 { font-size: 4.4rem; }
.text-45 { font-size: 4.5rem; }
.text-46 { font-size: 4.6rem; }
.text-47 { font-size: 4.7rem; }
.text-48 { font-size: 4.8rem; }
.text-49 { font-size: 4.9rem; }
.text-50 { font-size: 5rem; }

/* 51px ~ 60px */
.text-51 { font-size: 5.1rem; }
.text-52 { font-size: 5.2rem; }
.text-53 { font-size: 5.3rem; }
.text-54 { font-size: 5.4rem; }
.text-55 { font-size: 5.5rem; }
.text-56 { font-size: 5.6rem; }
.text-57 { font-size: 5.7rem; }
.text-58 { font-size: 5.8rem; }
.text-59 { font-size: 5.9rem; }
.text-60 { font-size: 6rem; }
.text-64 { font-size: 6.4rem; }
.text-67 { font-size: 6.7rem; }
.text-74 { font-size: 7.4rem; }
.text-76 { font-size: 7.6rem; }
.text-80 { font-size: 8rem; }
.text-82 { font-size: 8.2rem; }
.text-83 { font-size: 8.3rem; }
.text-90 { font-size: 9rem; }
.text-97 { font-size: 9.7rem; }
.text-100 { font-size: 10rem; }
.text-135 { font-size: 13.5rem; }

.text-black{color: #000000;}
.text-white{color: #ffffff; }




.text-blue-100{color:#08A6E0;}
.text-blue-light{color:#008CFF;}
.text-blue{color:#004D98;}
.text-blue-light-900{color:#00B4FF !important;}
.text-yellow-100{color:#FFE100;}
.text-yellow-180{color:#FFE980;}
.text-yellow-200{color:#FFD300;}
.text-yellow-300{color:#FFCC00;}
.text-yellow-500{color:#FFB200;}
.text-yellow-600{color:#FFBB00;}


.text-yellow{color:#FFE800;}





.text-sky-100{color:#EAF9FF;}
.text-sky-300{color:#BCECFF;}
.text-sky-400{color:#7FDCE1;}
.text-sky{color:var(--primary);}
.text-red-500{color:#FF4F4F; }
.text-red-700{color:#BF1638; }
.text-red-900{color:#AF3204; }
.text-orange{color:#FF9500; }
.text-orange-dark{color:#DC821B; }
.text-orange-light{color:#FF8D28; }
.text-orange-400{color:#ED6540; }
.text-orange-450{color:#FF5D00; }
.text-orange-500{color:#FF8528;}
.text-orange-550{color:#FF6E00; }
.text-orange-600{color:#FF8B00; }
.text-orange-800{color:#F14C00; }




.text-dark{color:#1B1B1B;}

.text-gray-50{color:#D0D0D0;}
.text-gray-100{color:#848484;}
.text-gray-150{color: #919191; }
.text-gray-180{color:#8E8E8E;}
.text-gray-200{color:#8F8F8F;}
.text-gray-350{color:#505050;}
.text-gray-375{color:#515151;}
.text-gray-400{color:#575757;}
.text-gray-425{color:#5F5F5F;}
.text-gray{color:#5D5D5D;}
.text-gray-450{color:#4E4E4E;}
.text-gray-500{color:#454545;}
.text-gray-600{color:#484848;}
.text-gray-700{color: #ECECEC; }

.text-gray-800{color: #C8C8C8; }

.text-gray-light{color:#B5B5B5;}
.text-gray-light-200{color:#B8B8B8;}
.text-brown-700{color:#835D3B;}
.text-brown-900{color:#984100;}






.text-green-400{color:#56AA67;}
.text-green-500{color:#59830B;}
.text-gold{color:#C6A25A;}
.text-gold-300{color:#E2C482;}





/* =========================================
 * Font Weight Utilities (Figma 기준 Full Set)
 * ========================================= */

/* 기본 */
.text-thin        { font-weight: 100; }
.text-extralight  { font-weight: 200; }
.text-light       { font-weight: 300; }
.text-regular     { font-weight: 400; }
.text-medium      { font-weight: 500; }
.text-semibold    { font-weight: 600; }
.text-bold        { font-weight: 700; }
.text-extrabold   { font-weight: 800; }
.text-heavy       { font-weight: 900; }

@media (min-width: 1024px) {
    .lg-text-thin        { font-weight: 100; }
    .lg-text-extralight  { font-weight: 200; }
    .lg-text-light       { font-weight: 300; }
    .lg-text-regular     { font-weight: 400; }
    .lg-text-medium      { font-weight: 500; }
    .lg-text-semibold    { font-weight: 600; }
    .lg-text-bold        { font-weight: 700; }
    .lg-text-extrabold   { font-weight: 800; }
    .lg-text-black       { font-weight: 900; }
    .lg-text-heavy       { font-weight: 900; }
}

/* ===== text alignment ===== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-justify{ text-align: justify; }

@media (min-width: 1024px) {
    .lg-text-left   { text-align: left; }
    .lg-text-center { text-align: center; }
    .lg-text-right  { text-align: right; }
    .lg-text-justify{ text-align: justify; }

}



.no-wrap {
    white-space: nowrap;
}


/* ===== line-height utilities ===== */
.leading-ultratight { line-height: 0.9; }
.leading-overlap    { line-height: 0.8; }
.leading-collapse   { line-height: 0.7; }
.leading-none   { line-height: 1; }
.leading-tight  { line-height: 1.2; }
.leading-snug   { line-height: 1.3; }
.leading-normal { line-height: 1.5; }
.leading-relaxed{ line-height: 1.7; }
.leading-loose  { line-height: 2; }
.leading-18  { line-height: 1.8; }
.leading-25  { line-height: 2.5; }


/* ===== lg (>=1024px) ===== */
@media (min-width: 1024px) {
    .lg-leading-none    { line-height: 1; }
    .lg-leading-tight   { line-height: 1.2; }
    .lg-leading-snug    { line-height: 1.3; }
    .lg-leading-normal  { line-height: 1.5; }
    .lg-leading-relaxed { line-height: 1.7; }
    .lg-leading-loose   { line-height: 2; }
    .lg-leading-18      { line-height: 1.8; }
    .lg-leading-25      { line-height: 2.5; }
}



/* =========================================
 * LG Font Size Utilities (min-width: 1024px)
 * ========================================= */
@media (min-width: 1024px) {

    /* 10px ~ 20px */
    .lg-text-8 { font-size: 0.8rem; }
    .lg-text-9 { font-size: 0.9rem; }
    .lg-text-10 { font-size: 1rem; }
    .lg-text-11 { font-size: 1.1rem; }
    .lg-text-12 { font-size: 1.2rem; }
    .lg-text-13 { font-size: 1.3rem; }
    .lg-text-14 { font-size: 1.4rem; }
    .lg-text-15 { font-size: 1.5rem; }
    .lg-text-16 { font-size: 1.6rem; }
    .lg-text-17 { font-size: 1.7rem; }
    .lg-text-18 { font-size: 1.8rem; }
    .lg-text-19 { font-size: 1.9rem; }
    .lg-text-20 { font-size: 2rem; }

    /* 21px ~ 30px */
    .lg-text-21 { font-size: 2.1rem; }
    .lg-text-22 { font-size: 2.2rem; }
    .lg-text-23 { font-size: 2.3rem; }
    .lg-text-24 { font-size: 2.4rem; }
    .lg-text-25 { font-size: 2.5rem; }
    .lg-text-26 { font-size: 2.6rem; }
    .lg-text-27 { font-size: 2.7rem; }
    .lg-text-28 { font-size: 2.8rem; }
    .lg-text-29 { font-size: 2.9rem; }
    .lg-text-30 { font-size: 3rem; }

    /* 31px ~ 40px */
    .lg-text-31 { font-size: 3.1rem; }
    .lg-text-32 { font-size: 3.2rem; }
    .lg-text-33 { font-size: 3.3rem; }
    .lg-text-34 { font-size: 3.4rem; }
    .lg-text-35 { font-size: 3.5rem; }
    .lg-text-36 { font-size: 3.6rem; }
    .lg-text-37 { font-size: 3.7rem; }
    .lg-text-38 { font-size: 3.8rem; }
    .lg-text-39 { font-size: 3.9rem; }
    .lg-text-40 { font-size: 4rem; }

    /* 41px ~ 50px */
    .lg-text-41 { font-size: 4.1rem; }
    .lg-text-42 { font-size: 4.2rem; }
    .lg-text-43 { font-size: 4.3rem; }
    .lg-text-44 { font-size: 4.4rem; }
    .lg-text-45 { font-size: 4.5rem; }
    .lg-text-46 { font-size: 4.6rem; }
    .lg-text-47 { font-size: 4.7rem; }
    .lg-text-48 { font-size: 4.8rem; }
    .lg-text-49 { font-size: 4.9rem; }
    .lg-text-50 { font-size: 5rem; }

    /* 51px ~ 60px */
    .lg-text-51 { font-size: 5.1rem; }
    .lg-text-52 { font-size: 5.2rem; }
    .lg-text-53 { font-size: 5.3rem; }
    .lg-text-54 { font-size: 5.4rem; }
    .lg-text-55 { font-size: 5.5rem; }
    .lg-text-56 { font-size: 5.6rem; }
    .lg-text-57 { font-size: 5.7rem; }
    .lg-text-58 { font-size: 5.8rem; }
    .lg-text-59 { font-size: 5.9rem; }
    .lg-text-60 { font-size: 6rem; }
    .lg-text-61 { font-size: 6.1rem; }
    .lg-text-64 { font-size: 6.4rem; }
    .lg-text-67 { font-size: 6.7rem; }
    .lg-text-72 { font-size: 7.2rem; }
    .lg-text-76 { font-size: 7.6rem; }
    .lg-text-97 { font-size: 9.7rem; }
    .lg-text-134 { font-size: 13.4rem; }
    .lg-text-135 { font-size: 13.5rem; }
}




/* =========================================================
   Letter Spacing Utilities (tracking-*)
   단위: em (font-size 기준)
   ========================================================= */

/* 기본 */
.tracking-normal { letter-spacing: 0; }

/* 음수 자간 (글자 간격을 좁힐 때, 제목/강조 문구에 사용) */
.tracking-tight { letter-spacing: -0.02em; }
.tracking-tighter { letter-spacing: -0.04em; }

/* 양수 자간 확장 */
.tracking-wide { letter-spacing: 0.02em; }
.tracking-wider { letter-spacing: 0.04em; }

/* 가장 넓은 자간 */
.tracking-widest { letter-spacing: 0.08em; }


@media (min-width: 1024px) {

    /* 기본 */
    .lg-tracking-normal { letter-spacing: 0; }

    /* 음수 자간 */
    .lg-tracking-tight { letter-spacing: -0.02em; }
    .lg-tracking-tighter { letter-spacing: -0.04em; }

    /* 양수 */
    .lg-tracking-wide { letter-spacing: 0.02em; }
    .lg-tracking-wider { letter-spacing: 0.04em; }

    /* 가장 넓은 자간 */
    .lg-tracking-widest { letter-spacing: 0.08em; }
}

@media (min-width: 1600px) {
    .xl-text-11 { font-size: 1.1rem; }
}
