/* 색상 변수 설정 */
:root {
    --primary-black: #000;
    --secondary-gray: #7D7D7D;
    --light-gray: #D3D3D3;
    --dark-gray: #2E2E2E;
    --white: #FFFFFF;
    --black: #000000;
}


/* 배경색 스타일 */
.bg-black { background-color: var(--primary-black) !important; }
.bg-light-gray { background-color: var(--light-gray) !important; }
.bg-dark-gray { background-color: var(--dark-gray) !important; }

/* 텍스트 색상 스타일 */
.text-gray { color: var(--primary-gray) !important; }
.text-light-gray { color: var(--light-gray) !important; }
.text-dark-gray { color: var(--dark-gray) !important; }




/* 폰트 크기 클래스 (px) */
.fs-10 {
    font-size: 10px;
}

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

/* 폰트 크기 클래스 (rem) */
.fs-rem-1 {
    font-size: 1rem;
}

.fs-rem-1-2 {
    font-size: 1.2rem;
}

.fs-rem-1-4 {
    font-size: 1.4rem;
}

.fs-rem-1-6 {
    font-size: 1.6rem;
}

.fs-rem-1-8 {
    font-size: 1.8rem;
}

.fs-rem-2 {
    font-size: 2rem;
}

.fs-rem-2-4 {
    font-size: 2.4rem;
}

.fs-rem-2-8 {
    font-size: 2.8rem;
}

.fs-rem-3-2 {
    font-size: 3.2rem;
}

.fs-rem-3-6 {
    font-size: 3.6rem;
}

.fs-rem-4 {
    font-size: 4rem;
}

.fs-rem-4-8 {
    font-size: 4.8rem;
}

.fs-rem-5-6 {
    font-size: 5.6rem;
}

.fs-rem-6-4 {
    font-size: 6.4rem;
}

.fs-rem-7-2 {
    font-size: 7.2rem;
}

.fs-rem-8 {
    font-size: 8rem;
}

.fs-rem-9 {
    font-size: 9rem;
}

.fs-rem-10 {
    font-size: 10rem;
}

.fs-rem-11 {
    font-size: 11rem;
}

.fs-rem-12 {
    font-size: 12rem;
}

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

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

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

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

/* 폰트 두께 클래스 */
.fw-100 {
    font-weight: 100;
}

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

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

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

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

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

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

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

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


/* 탑 패딩 및 탑 마진 클래스 (10% 단위) */
.pt-10 {
    padding-top: 10%;
}

.pt-20 {
    padding-top: 20%;
}

.pt-30 {
    padding-top: 30%;
}

.pt-40 {
    padding-top: 40%;
}

.pt-50 {
    padding-top: 50%;
}

.pt-60 {
    padding-top: 60%;
}

.pt-70 {
    padding-top: 70%;
}

.pt-80 {
    padding-top: 80%;
}

.pt-90 {
    padding-top: 90%;
}

.pt-100 {
    padding-top: 100%;
}

.mt-10 {
    margin-top: 10%;
}

.mt-20 {
    margin-top: 20%;
}

.mt-30 {
    margin-top: 30%;
}

.mt-40 {
    margin-top: 40%;
}

.mt-50 {
    margin-top: 50%;
}

.mt-60 {
    margin-top: 60%;
}

.mt-70 {
    margin-top: 70%;
}

.mt-80 {
    margin-top: 80%;
}

.mt-90 {
    margin-top: 90%;
}

.mt-100 {
    margin-top: 100%;
}


/* 바닥 마진 클래스 (10% 단위) */
.mb-10 {
    margin-bottom: 10%;
}

.mb-20 {
    margin-bottom: 20%;
}

.mb-30 {
    margin-bottom: 30%;
}

.mb-40 {
    margin-bottom: 40%;
}

.mb-50 {
    margin-bottom: 50%;
}

.mb-60 {
    margin-bottom: 60%;
}

.mb-70 {
    margin-bottom: 70%;
}

.mb-80 {
    margin-bottom: 80%;
}

.mb-90 {
    margin-bottom: 90%;
}

.mb-100 {
    margin-bottom: 100%;
}

/* top 및 bottom 클래스 (10% 단위) */
.top-10 {
    top: 10%;
}

.top-20 {
    top: 20%;
}

.top-30 {
    top: 30%;
}

.top-40 {
    top: 40%;
}

.top-50 {
    top: 50%;
}

.top-60 {
    top: 60%;
}

.top-70 {
    top: 70%;
}

.top-80 {
    top: 80%;
}

.top-90 {
    top: 90%;
}

.top-100 {
    top: 100%;
}

.bottom-10 {
    bottom: 10%;
}

.bottom-20 {
    bottom: 20%;
}

.bottom-30 {
    bottom: 30%;
}

.bottom-40 {
    bottom: 40%;
}

.bottom-50 {
    bottom: 50%;
}

.bottom-60 {
    bottom: 60%;
}

.bottom-70 {
    bottom: 70%;
}

.bottom-80 {
    bottom: 80%;
}

.bottom-90 {
    bottom: 90%;
}

.bottom-100 {
    bottom: 100%;
}

/* 포지션 클래스 */
.pos-static {
    position: static;
}

.pos-relative {
    position: relative;
}

.pos-absolute {
    position: absolute;
}

.pos-fixed {
    position: fixed;
}

.pos-sticky {
    position: sticky;
}


/* 블록 요소 클래스 */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}