@charset "utf-8";

/* ============================================================
   COMMON.CSS
   로드 순서: color.css → font-style.css → common.css
   ============================================================ */


/* ===== RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
ul, ol  { list-style: none; }
a       { color: inherit; text-decoration: none; }
img     { display: block; }
button  { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
table   { border-collapse: collapse; border-spacing: 0; }


/* ===== LAYOUT ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.container-sm {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
.section    { padding: 80px 0; }
.section-sm { padding: 50px 0; }


/* ===== POSITION ===== */
.relative { position: relative; }
.absolute { position: absolute; }


/* ===== DISPLAY ===== */
.d-block  { display: block; }
.d-none   { display: none; }
/* pc에서 숨김 / 모바일에서 보임 */
.pc-none  { display: none; }
/* 모바일에서 숨김 / pc에서 보임 */
.m-none   { display: flex; }


/* ===== FLEX ===== */
.flex             { display: flex; }
.row-flex         { display: flex; flex-direction: row; }
.col-flex         { display: flex; flex-direction: column; }
.flex-center      { display: flex; align-items: center; justify-content: center; }
.flex-between     { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap        { flex-wrap: wrap; }
.between,
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.align-center     { align-items: center; }
.align-end        { align-items: flex-end; }


/* ===== WIDTH ===== */
.w-100vw      { width: 100vw; }
.w-100        { width: 100%; }
.w-99         { width: 99%; }
.w-98         { width: 98%; }
.w-90         { width: 90%; }
.w-80         { width: 80%; }
.w-70         { width: 70%; }
.w-60         { width: 60%; }
.w-50         { width: 50%; }
.w-49         { width: 49%; }
.w-48         { width: 48%; }
.w-40         { width: 40%; }
.w-30         { width: 30%; }
.w-25         { width: 25%; }
.w-20         { width: 20%; }
.w-10         { width: 10%; }
.w-auto       { width: auto; }
.w-fitcontent { width: fit-content; }


/* ===== HEIGHT ===== */
.h-100vh      { height: 100vh; }
.h-100        { height: 100%; }
.h-80         { height: 80%; }
.h-auto       { height: auto; }
.h-fitcontent { height: fit-content; }


/* ===== MARGIN / PADDING / GAP (% + vw 기반) ===== */
/*
    --unit × --value 배수로 계산
    예) .mt-5 → margin-top: 5%
        .gap-20 → gap: 0.8vw × 1.25 = 1vw
*/
:root {
    --mt-unit : 1%;
    --mb-unit : 1%;
    --mr-unit : 1%;
    --ml-unit : 1%;
    --pt-unit : 1%;
    --pb-unit : 1%;
    --pr-unit : 1%;
    --pl-unit : 1%;
    --gap-unit: 0.8vw;
}

[class*='mt-'] { margin-top    : calc(var(--mt-unit) * var(--mt-value, 0)); }
[class*='mb-'] { margin-bottom : calc(var(--mb-unit) * var(--mb-value, 0)); }
[class*='mr-'] { margin-right  : calc(var(--mr-unit) * var(--mr-value, 0)); }
[class*='ml-'] { margin-left   : calc(var(--ml-unit) * var(--ml-value, 0)); }
[class*='pt-'] { padding-top   : calc(var(--pt-unit) * var(--pt-value, 0)); }
[class*='pb-'] { padding-bottom: calc(var(--pb-unit) * var(--pb-value, 0)); }
[class*='pr-'] { padding-right : calc(var(--pr-unit) * var(--pr-value, 0)); }
[class*='pl-'] { padding-left  : calc(var(--pl-unit) * var(--pl-value, 0)); }
[class*='gap-']{ gap           : calc(var(--gap-unit) * var(--gap-value, 0)); }

.m-auto      { margin: auto; }
.mr-auto     { margin-right: auto; }
.margin-auto { margin: auto; }
.no_margin   { margin: 0 !important; }
.no_padding  { padding: 0 !important; }

/* --- Margin --- */
.mt-1  { --mt-value:  1; } .mb-1  { --mb-value:  1; } .mr-1  { --mr-value:  1; } .ml-1  { --ml-value:  1; }
.mt-2  { --mt-value:  2; } .mb-2  { --mb-value:  2; } .mr-2  { --mr-value:  2; } .ml-2  { --ml-value:  2; }
.mt-3  { --mt-value:  3; } .mb-3  { --mb-value:  3; } .mr-3  { --mr-value:  3; } .ml-3  { --ml-value:  3; }
.mt-4  { --mt-value:  4; } .mb-4  { --mb-value:  4; } .mr-4  { --mr-value:  4; } .ml-4  { --ml-value:  4; }
.mt-5  { --mt-value:  5; } .mb-5  { --mb-value:  5; } .mr-5  { --mr-value:  5; } .ml-5  { --ml-value:  5; }
.mt-6  { --mt-value:  6; } .mb-6  { --mb-value:  6; } .mr-6  { --mr-value:  6; } .ml-6  { --ml-value:  6; }
.mt-7  { --mt-value:  7; } .mb-7  { --mb-value:  7; } .mr-7  { --mr-value:  7; } .ml-7  { --ml-value:  7; }
.mt-8  { --mt-value:  8; } .mb-8  { --mb-value:  8; } .mr-8  { --mr-value:  8; } .ml-8  { --ml-value:  8; }
.mt-9  { --mt-value:  9; } .mb-9  { --mb-value:  9; } .mr-9  { --mr-value:  9; } .ml-9  { --ml-value:  9; }
.mt-10 { --mt-value: 10; } .mb-10 { --mb-value: 10; } .mr-10 { --mr-value: 10; } .ml-10 { --ml-value: 10; }
.mt-13 { --mt-value: 13; } .mb-13 { --mb-value: 13; } .mr-13 { --mr-value: 13; } .ml-13 { --ml-value: 13; }
.mt-15 { --mt-value: 15; } .mb-15 { --mb-value: 15; } .mr-15 { --mr-value: 15; } .ml-15 { --ml-value: 15; }
.mt-17 { --mt-value: 17; } .mb-17 { --mb-value: 17; } .mr-17 { --mr-value: 17; } .ml-17 { --ml-value: 17; }
.mt-18 { --mt-value: 18; } .mb-18 { --mb-value: 18; } .mr-18 { --mr-value: 18; } .ml-18 { --ml-value: 18; }
.mt-20 { --mt-value: 20; } .mb-20 { --mb-value: 20; } .mr-20 { --mr-value: 20; } .ml-20 { --ml-value: 20; }
.mt-25 { --mt-value: 25; } .mb-25 { --mb-value: 25; } .mr-25 { --mr-value: 25; } .ml-25 { --ml-value: 25; }
.mt-30 { --mt-value: 30; } .mb-30 { --mb-value: 30; } .mr-30 { --mr-value: 30; } .ml-30 { --ml-value: 30; }
.mt-33 { --mt-value: 33; } .mb-33 { --mb-value: 33; } .mr-33 { --mr-value: 33; } .ml-33 { --ml-value: 33; }

/* --- Padding --- */
.pt-1  { --pt-value:  1; } .pb-1  { --pb-value:  1; } .pr-1  { --pr-value:  1; } .pl-1  { --pl-value:  1; }
.pt-2  { --pt-value:  2; } .pb-2  { --pb-value:  2; } .pr-2  { --pr-value:  2; } .pl-2  { --pl-value:  2; }
.pt-3  { --pt-value:  3; } .pb-3  { --pb-value:  3; } .pr-3  { --pr-value:  3; } .pl-3  { --pl-value:  3; }
.pt-4  { --pt-value:  4; } .pb-4  { --pb-value:  4; } .pr-4  { --pr-value:  4; } .pl-4  { --pl-value:  4; }
.pt-5  { --pt-value:  5; } .pb-5  { --pb-value:  5; } .pr-5  { --pr-value:  5; } .pl-5  { --pl-value:  5; }
.pt-6  { --pt-value:  6; } .pb-6  { --pb-value:  6; } .pr-6  { --pr-value:  6; } .pl-6  { --pl-value:  6; }
.pt-7  { --pt-value:  7; } .pb-7  { --pb-value:  7; } .pr-7  { --pr-value:  7; } .pl-7  { --pl-value:  7; }
.pt-8  { --pt-value:  8; } .pb-8  { --pb-value:  8; } .pr-8  { --pr-value:  8; } .pl-8  { --pl-value:  8; }
.pt-10 { --pt-value: 10; } .pb-10 { --pb-value: 10; } .pr-10 { --pr-value: 10; } .pl-10 { --pl-value: 10; }
.pt-13 { --pt-value: 13; } .pb-13 { --pb-value: 13; } .pr-13 { --pr-value: 13; } .pl-13 { --pl-value: 13; }
.pt-15 { --pt-value: 15; } .pb-15 { --pb-value: 15; } .pr-15 { --pr-value: 15; } .pl-15 { --pl-value: 15; }
.pt-20 { --pt-value: 20; } .pb-20 { --pb-value: 20; } .pr-20 { --pr-value: 20; } .pl-20 { --pl-value: 20; }
.pt-25 { --pt-value: 25; } .pb-25 { --pb-value: 25; } .pr-25 { --pr-value: 25; } .pl-25 { --pl-value: 25; }
.pt-30 { --pt-value: 30; } .pb-30 { --pb-value: 30; } .pr-30 { --pr-value: 30; } .pl-30 { --pl-value: 30; }
.pt-33 { --pt-value: 33; } .pb-33 { --pb-value: 33; } .pr-33 { --pr-value: 33; } .pl-33 { --pl-value: 33; }

/* --- Gap --- */
.gap-3  { --gap-value: 0.1875; }
.gap-5  { --gap-value: 0.3125; }
.gap-7  { --gap-value: 0.4375; }
.gap-10 { --gap-value: 0.625;  }
.gap-13 { --gap-value: 0.725;  }
.gap-15 { --gap-value: 0.9375; }
.gap-17 { --gap-value: 1.075;  }
.gap-20 { --gap-value: 1.25;   }
.gap-30 { --gap-value: 1.8;    }
.gap-40 { --gap-value: 2.5;    }
.gap-50 { --gap-value: 3.125;  }
.gap-55 { --gap-value: 3.4375; }
.gap-60 { --gap-value: 3.75;   }
.gap-70 { --gap-value: 4.375;  }
.gap-100{ --gap-value: 6.25;   }


/* ===== FONT WEIGHT ===== */
.light     { font-weight: 300; }
.regular  { font-weight: 400; }
.medium   { font-weight: 500; }
.semiBold { font-weight: 600; }
.bold     { font-weight: 700; }
.extraBold {font-weight: 800;}
.blackBold {font-weight: 900;}



/* ===== FONT SIZE (rem 기반) ===== */
.f-12p { font-size: 0.75rem;   }   /* 12px */
.f-13p { font-size: 0.8125rem; }   /* 13px */
.f-14p { font-size: 0.875rem;  }   /* 14px */
.f-15p { font-size: 0.9375rem; }   /* 15px */
.f-16p { font-size: 1rem;      }   /* 16px */
.f-17p { font-size: 1.0625rem; }   /* 17px */
.f-18p { font-size: 1.125rem;  }   /* 18px */
.f-20p { font-size: 1.25rem;   }   /* 20px */
.f-21p { font-size: 1.3125rem; }   /* 21px */
.f-22p { font-size: 1.375rem;  }   /* 22px */
.f-23p { font-size: 1.4375rem; }  /* 23px */
.f-24p { font-size: 1.5rem;    }   /* 24px */
.f-25p { font-size: 1.5625rem; }   /* 25px */
.f-26p { font-size: 1.625rem;  }   /* 26px */
.f-27p { font-size: 1.6875rem; }   /* 27px */
.f-28p { font-size: 1.75rem;   }   /* 28px */
.f-30p { font-size: 1.875rem;  }   /* 30px */

.f-32p { font-size: 2rem; }
.f-35p { font-size: 2.1875rem; }
.f-36p { font-size: 2.25rem;   }   /* 36px */
.f-38p { font-size: 2.375rem; }  /* 38px */
.f-40p { font-size: 2.5rem;    }   /* 40px */
.f-45p { font-size: 2.8125rem; }   /* 45px */
.f-48p { font-size: 3rem;      }   /* 48px */
.f-50p { font-size: 3.125rem; }
.f-70p { font-size: 4.375rem; }
.f-130p { font-size: 8.125rem; }
.f-100p { font-size: 6.25rem; }


.container    { max-width: 1200px; margin: 0 auto; }
.container-sm { max-width: 960px;  margin: 0 auto; }

/* ===== MAX-WIDTH ===== */
.mw-big-full { max-width: 1800px; margin: 0 auto; }  /* 기본 섹션 */
.mw-full { max-width: 1680px; margin: 0 auto; }  /* 기본 섹션 */
.mw-lg   { max-width: 1400px; margin: 0 auto; }  /* 넓은 콘텐츠 */
.mw-md   { max-width: 1200px; margin: 0 auto; }  /* 기존 container */
.mw-mmd   { max-width: 1300px; margin: 0 auto; }  /* 기존 container */
.mw-sm   { max-width: 960px;  margin: 0 auto; }  /* 좁은 콘텐츠 */
.mw-xs   { max-width: 720px;  margin: 0 auto; }  /* 폼, 텍스트 중심 */

/* ===== MARGIN AUTO ===== */
.m-auto  { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }   /* 가로 중앙 */
.my-auto { margin-top: auto;  margin-bottom: auto; }  /* 세로 중앙 (flex 안에서) */

/* ===== LINE HEIGHT ===== */
/* 비율 */
.l-h-1  { line-height: 1;   }
.lh-10  { line-height: 1.0; }
.lh-12  { line-height: 1.2; }
.lh-15  { line-height: 1.5; }
.lh-18  { line-height: 1.8; }
.lh-20  { line-height: 2.0; }

/* px 고정값 */
.l-h-16p { line-height: 16px; }
.l-h-18p { line-height: 18px; }
.l-h-20p { line-height: 20px; }
.l-h-22p { line-height: 22px; }
.l-h-23p { line-height: 23px; }
.l-h-24p { line-height: 24px; }
.l-h-26p { line-height: 26px; }
.l-h-28p { line-height: 28px; }
.l-h-30p { line-height: 30px; }
.l-h-32p { line-height: 32px; }
.l-h-36p { line-height: 36px; }
.l-h-40p { line-height: 40px; }
.l-h-44p { line-height: 44px; }
.l-h-48p { line-height: 48px; }
.l-h-50p { line-height: 50px; }
.l-h-55p { line-height: 55px; }
.l-h-60p { line-height: 60px; }
.l-h-70p { line-height: 70px; }
.l-h-80p { line-height: 80px; }


/* ===== TEXT ===== */
.txt-center       { text-align: center; }
.txt-right        { text-align: right; }
.txt-left         { text-align: left; }
.t-center         { text-align: center; }
.t-right          { text-align: right; }
.t-left           { text-align: left; }
.ws-nowrap        { white-space: nowrap; }
.txt-underline    { text-decoration: underline; }
.txt-line-through { text-decoration: line-through; }

/* 한 줄 말줄임 */
.txt-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* 두 줄 말줄임 */
.txt-ellipsis2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    max-height: 2.8em;
    line-height: 1.4;
}
/* 긴 텍스트 줄바꿈 */
.txt-too-long {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}


/* ===== COLOR ===== */
.fc-white    { color: #fff; }
.fc-black    { color: #000; }
.fc-black1   { color: #111; }
.fc-black2   { color: #222; }
.fc-black3   { color: #333; }
.c-primary   { color: var(--primary); }
.c-white     { color: #fff; }
.c-secondary { color : #31AD34;}


/* ===== BACKGROUND ===== */
.bg-white         { background-color: #fff; }
.bg-black         { background-color: #000; }
.bg-black2        { background-color: #222; }
.bg-primary       { background-color: var(--primary); }

.no_bc,
.remove_bg_color  { background-color: unset !important; }


/* ===== BORDER ===== */
.bd-none          { border: none !important; }
.no_border        { border: 0 !important; }
.no_border_bottom { border-bottom: 0 !important; }
.bd-d7            { border: 1px solid #d7d7d7; }
.bd-top-d7        { border-top: 1px solid #d7d7d7; }
.bd-bottom-d7     { border-bottom: 1px solid #d7d7d7; }
.bd-right-d7      { border-right: 1px solid #d7d7d7; }
.bd-left-d7       { border-left: 1px solid #d7d7d7; }
.bd-radius-5      { border-radius: 5px; }
.bd-radius-10     { border-radius: 10px; }
.bd-radius-15     { border-radius: 15px; }
.bd-radius-20     { border-radius: 20px; }
.bd-radius-50,
.bd-circle        { border-radius: 50%; }


/* ===== SHADOW ===== */
.box-shadow { box-shadow: 0 2px 30px 10px rgba(0, 0, 0, 0.068); }


/* ===== IMAGE ===== */
.object-fit-cover   { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.img_wrap img       { width: 100%; }
.detail img {
    display: block;
    margin-bottom: 10px;
    max-width: 100%;
    height: auto !important;
}


/* ===== OVERFLOW ===== */
.of-hidden       { overflow: hidden; }
.overflow-hidden { overflow: hidden; }


/* ===== ETC ===== */
.pointer { cursor: pointer; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===== MARGIN / PADDING px 고정값 ===== */
.mt-10px { margin-top:    10px; }
.mt-20px { margin-top:    20px; }
.mt-30px { margin-top:    30px; }
.mt-40px { margin-top:    40px; }
.mt-50px { margin-top:    50px; }
.mt-60px { margin-top:    60px; }
.mt-80px { margin-top:    80px; }

.mb-10px { margin-bottom: 10px; }
.mb-20px { margin-bottom: 20px; }
.mb-25px { margin-bottom: 25px; }
.mb-30px { margin-bottom: 30px; }
.mb-40px { margin-bottom: 40px; }
.mb-60px { margin-bottom: 60px; }
.mb-80px { margin-bottom: 80px; }

.pt-10px { padding-top:    10px; }
.pt-20px { padding-top:    20px; }
.pt-30px { padding-top:    30px; }
.pt-40px { padding-top:    40px; }
.pt-60px { padding-top:    60px; }
.pt-80px { padding-top:    80px; }

.pb-10px { padding-bottom: 10px; }
.pb-20px { padding-bottom: 20px; }
.pb-30px { padding-bottom: 30px; }
.pb-40px { padding-bottom: 40px; }
.pb-60px { padding-bottom: 60px; }
.pb-80px { padding-bottom: 80px; }


/* ============================================================
   MOBILE  max-width: 767px
   ============================================================ */
@media screen and (max-width: 767px) {
	html {
        font-size: 10px !important;  /* 모바일에서 전체적으로 줄어듦 */
    }
    
    
    .f-40p { font-size: 1.75rem; }   /* 40px → 28px */
    .f-50p { font-size: 2rem; }      /* 50px → 32px */
    .f-45p { font-size: 2rem; }      /* 45px → 32px */
    .f-35p { font-size: 1.75rem; }   /* 35px → 28px */
    
    .f-70p  { font-size: 2.5rem; }   /* 40px */
    .f-100p { font-size: 2rem; }     /* 32px */
    .f-130p { font-size: 3rem; }     /* 48px */
	

    .container-sm { padding: 0 16px; }
    .section      { padding: 50px 0; }
    .section-sm   { padding: 30px 0; }

    /* display */
    .pc-none    { display: block !important; }
    .m-none     { display: none !important; }
    .m-block    { display: block; }
    .m-col-flex { flex-direction: column; }
    .m-row-flex { flex-direction: row; }
    .m-flex-wrap{ flex-wrap: wrap; }

    /* width */
    .m-w-100 { width: 100% !important; }
    .m-w-90  { width: 90%; }
    .m-w-80  { width: 80%; }
    .m-w-70  { width: 70%; }
    .m-w-60  { width: 60%; }
    .m-w-50  { width: 48%; }
    .m-w-40  { width: 40%; }
    .m-w-30  { width: 30%; }
    .m-w-20  { width: 20%; }
    .m-w-10  { width: 10%; }

    /* height */
    .m-h-100 { height: 100%; }

    /* align */
    .m-txt-center    { text-align: center; }
    .m-txt-left      { text-align: left; }
    .m-align-start   { align-items: flex-start; }
    .m-justify-start { justify-content: flex-start; }
    .m-between       { justify-content: space-between; }
    .m-ws-wrap       { white-space: wrap; }

    /* color */
    .m-bg-white { background-color: #fff; }
    .m-f-black  { color: #000; }
    .m-f-white  { color: #fff; }

    /* margin px 고정 */
    .m-mt-20  { margin-top: 20px; }
    .m-mt-40  { margin-top: 40px; }
    .m-mt-50  { margin-top: 55px; }
    .m-mt-100 { margin-top: 100px; }
    .m-mb-10  { margin-bottom: 10px; }
    .m-mb-20  { margin-bottom: 20px; }
    .m-mb-30  { margin-bottom: 30px; }
    .m-mb-40  { margin-bottom: 40px; }
    .m-mb-50  { margin-bottom: 50px; }
    .m-pl-10  { padding-left: 10px; }
    .m-pl-150 { padding-left: 150px; }

    /* gap px 고정 */
    .m-gap-10 { gap: 10px; }
    .m-gap-20 { gap: 20px; }

    /* border-radius */
    .bd-radius-5  { border-radius: 4px; }
    .bd-radius-10 { border-radius: 7px; }
    .bd-radius-15 { border-radius: 10px; }
    .bd-radius-20 { border-radius: 15px; }

    /* % margin 모바일 재정의 */
    .mt-1  { --mt-value:  4; } .mb-1  { --mb-value:  4; } .mr-1  { --mr-value:  4; } .ml-1  { --ml-value:  4; }
    .mt-2  { --mt-value:  5; } .mb-2  { --mb-value:  5; } .mr-2  { --mr-value:  5; } .ml-2  { --ml-value:  5; }
    .mt-3  { --mt-value:  6; } .mb-3  { --mb-value:  6; } .mr-3  { --mr-value:  6; } .ml-3  { --ml-value:  6; }
    .mt-4  { --mt-value:  7; } .mb-4  { --mb-value:  7; } .mr-4  { --mr-value:  7; } .ml-4  { --ml-value:  7; }
    .mt-5  { --mt-value:  8; } .mb-5  { --mb-value:  8; } .mr-5  { --mr-value:  8; } .ml-5  { --ml-value:  8; }
    .mt-6  { --mt-value:  9; } .mb-6  { --mb-value:  9; } .mr-6  { --mr-value:  9; } .ml-6  { --ml-value:  9; }
    .mt-7  { --mt-value: 10; } .mb-7  { --mb-value: 10; } .mr-7  { --mr-value: 10; } .ml-7  { --ml-value: 10; }
    .mt-8  { --mt-value: 11; } .mb-8  { --mb-value: 11; } .mr-8  { --mr-value: 11; } .ml-8  { --ml-value: 11; }
    .mt-9  { --mt-value: 12; } .mb-9  { --mb-value: 12; } .mr-9  { --mr-value: 12; } .ml-9  { --ml-value: 12; }
    .mt-10 { --mt-value: 13; } .mb-10 { --mb-value: 13; } .mr-10 { --mr-value: 13; } .ml-10 { --ml-value: 13; }
    .mt-13 { --mt-value: 16; } .mb-13 { --mb-value: 16; } .mr-13 { --mr-value: 16; } .ml-13 { --ml-value: 16; }
    .mt-15 { --mt-value: 18; } .mb-15 { --mb-value: 18; } .mr-15 { --mr-value: 18; } .ml-15 { --ml-value: 18; }
    .mt-17 { --mt-value: 20; } .mb-17 { --mb-value: 20; } .mr-17 { --mr-value: 20; } .ml-17 { --ml-value: 20; }
    .mt-18 { --mt-value: 21; } .mb-18 { --mb-value: 21; } .mr-18 { --mr-value: 21; } .ml-18 { --ml-value: 21; }
    .mt-20 { --mt-value: 23; } .mb-20 { --mb-value: 23; } .mr-20 { --mr-value: 23; } .ml-20 { --ml-value: 23; }
    .mt-25 { --mt-value: 28; } .mb-25 { --mb-value: 28; } .mr-25 { --mr-value: 28; } .ml-25 { --ml-value: 28; }
    .mt-30 { --mt-value: 33; } .mb-30 { --mb-value: 33; } .mr-30 { --mr-value: 33; } .ml-30 { --ml-value: 33; }
    .mt-33 { --mt-value: 36; } .mb-33 { --mb-value: 36; } .mr-33 { --mr-value: 36; } .ml-33 { --ml-value: 36; }

    /* % padding 모바일 재정의 */
    .pt-1  { --pt-value:  4; } .pb-1  { --pb-value:  4; } .pr-1  { --pr-value:  4; } .pl-1  { --pl-value:  4; }
    .pt-2  { --pt-value:  5; } .pb-2  { --pb-value:  5; } .pr-2  { --pr-value:  5; } .pl-2  { --pl-value:  5; }
    .pt-3  { --pt-value:  6; } .pb-3  { --pb-value:  6; } .pr-3  { --pr-value:  6; } .pl-3  { --pl-value:  6; }
    .pt-4  { --pt-value:  7; } .pb-4  { --pb-value:  7; } .pr-4  { --pr-value:  7; } .pl-4  { --pl-value:  7; }
    .pt-5  { --pt-value:  8; } .pb-5  { --pb-value:  8; } .pr-5  { --pr-value:  8; } .pl-5  { --pl-value:  8; }
    .pt-6  { --pt-value:  9; } .pb-6  { --pb-value:  9; } .pr-6  { --pr-value:  9; } .pl-6  { --pl-value:  9; }
    .pt-10 { --pt-value: 13; } .pb-10 { --pb-value: 13; } .pr-10 { --pr-value: 13; } .pl-10 { --pl-value: 13; }
    .pt-13 { --pt-value: 16; } .pb-13 { --pb-value: 16; } .pr-13 { --pr-value: 16; } .pl-13 { --pl-value: 16; }
    .pt-15 { --pt-value: 18; } .pb-15 { --pb-value: 18; } .pr-15 { --pr-value: 18; } .pl-15 { --pl-value: 18; }
    .pt-20 { --pt-value: 23; } .pb-20 { --pb-value: 23; } .pr-20 { --pr-value: 23; } .pl-20 { --pl-value: 23; }
    .pt-25 { --pt-value: 28; } .pb-25 { --pb-value: 28; } .pr-25 { --pr-value: 28; } .pl-25 { --pl-value: 28; }
    .pt-30 { --pt-value: 33; } .pb-30 { --pb-value: 33; } .pr-30 { --pr-value: 33; } .pl-30 { --pl-value: 33; }
    .pt-33 { --pt-value: 36; } .pb-33 { --pb-value: 36; } .pr-33 { --pr-value: 36; } .pl-33 { --pl-value: 36; }

    /* gap 모바일 재정의 */
    .gap-3  { --gap-value:  1.1875; }
    .gap-5  { --gap-value:  1.3125; }
    .gap-7  { --gap-value:  2.4375; }
    .gap-10 { --gap-value:  2.625;  }
    .gap-13 { --gap-value:  3.725;  }
    .gap-15 { --gap-value:  3.9375; }
    .gap-17 { --gap-value:  4.075;  }
    .gap-20 { --gap-value:  5.25;   }
    .gap-30 { --gap-value:  5.8;    }
    .gap-40 { --gap-value:  6.5;    }
    .gap-50 { --gap-value:  7.125;  }
    .gap-55 { --gap-value:  8.4375; }
    .gap-60 { --gap-value:  9.75;   }
    .gap-70 { --gap-value: 10.375;  }
    .gap-100{ --gap-value: 11.25;   }
    
    .mt-10px { margin-top:    8px;  }
    .mt-20px { margin-top:    14px; }
    .mt-30px { margin-top:    20px; }
    .mt-40px { margin-top:    26px; }
    .mt-60px { margin-top:    36px; }
    .mt-80px { margin-top:    48px; }

    .mb-10px { margin-bottom: 8px;  }
    .mb-20px { margin-bottom: 14px; }
    .mb-30px { margin-bottom: 20px; }
    .mb-40px { margin-bottom: 26px; }
    .mt-50px { margin-top:    32px; }
    .mb-60px { margin-bottom: 36px; }
    .mb-80px { margin-bottom: 48px; }

    .pt-10px { padding-top:    8px;  }
    .pt-20px { padding-top:    14px; }
    .pt-30px { padding-top:    20px; }
    .pt-40px { padding-top:    26px; }
    .pt-60px { padding-top:    36px; }
    .pt-80px { padding-top:    48px; }

    .pb-10px { padding-bottom: 8px;  }
    .pb-20px { padding-bottom: 14px; }
    .pb-30px { padding-bottom: 20px; }
    .pb-40px { padding-bottom: 26px; }
    .pb-60px { padding-bottom: 36px; }
    .pb-80px { padding-bottom: 48px; }
}


/* ============================================================
   TABLET  768px ~ 1024px
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	 html {
        font-size: 12px !important;  /* 태블릿 */
    }
    
    .f-40p { font-size: 2rem; }      /* 40px → 32px */
    .f-50p { font-size: 2.25rem; }   /* 50px → 36px */
    
     .f-45p { font-size: 2.25rem; }   /* 45px → 36px */
    .f-35p { font-size: 2rem; }      /* 35px → 32px */
    
    .f-70p  { font-size: 2.5rem; }   /* 40px */
    .f-100p { font-size: 2rem; }     /* 32px */
    .f-130p { font-size: 3rem; }     /* 48px */
    

    .pc-none    { display: block; }
    .t-none     { display: none; }
    .t-h-auto   { height: auto; }
    .t-col-flex { flex-direction: column; }
    .t-row-flex { flex-direction: row; }
    .t-w-100    { width: 100%; }

    .bd-radius-5  { border-radius: 4px; }
    .bd-radius-10 { border-radius: 7px; }
    .bd-radius-15 { border-radius: 10px; }
    .bd-radius-20 { border-radius: 10px; }

    .gap-3  { --gap-value: 0.1;  }
    .gap-5  { --gap-value: 0.2;  }
    .gap-7  { --gap-value: 0.3;  }
    .gap-10 { --gap-value: 0.5;  }
    .gap-15 { --gap-value: 0.6;  }
    .gap-20 { --gap-value: 0.7;  }
    .gap-30 { --gap-value: 0.9;  }
    .gap-40 { --gap-value: 1.5;  }
    .gap-50 { --gap-value: 2.5;  }
    .gap-55 { --gap-value: 3.0;  }
    .gap-60 { --gap-value: 3.5;  }
    .gap-70 { --gap-value: 4.5;  }
    .gap-100{ --gap-value: 5.0;  }
    
    .mt-10px { margin-top:    8px;  }
    .mt-20px { margin-top:    16px; }
    .mt-30px { margin-top:    24px; }
    .mt-40px { margin-top:    30px; }
    .mt-60px { margin-top:    44px; }
    .mt-80px { margin-top:    56px; }

    .mb-10px { margin-bottom: 8px;  }
    .mb-20px { margin-bottom: 16px; }
    .mb-30px { margin-bottom: 24px; }
    .mb-40px { margin-bottom: 30px; }
    .mt-50px { margin-top:    36px; }
    .mb-60px { margin-bottom: 44px; }
    .mb-80px { margin-bottom: 56px; }

    .pt-10px { padding-top:    8px;  }
    .pt-20px { padding-top:    16px; }
    .pt-30px { padding-top:    24px; }
    .pt-40px { padding-top:    30px; }
    .pt-60px { padding-top:    44px; }
    .pt-80px { padding-top:    56px; }

    .pb-10px { padding-bottom: 8px;  }
    .pb-20px { padding-bottom: 16px; }
    .pb-30px { padding-bottom: 24px; }
    .pb-40px { padding-bottom: 30px; }
    .pb-60px { padding-bottom: 44px; }
    .pb-80px { padding-bottom: 56px; }
}


/* ============================================================
   LARGE DESKTOP  1025px ~ 1440px
   ============================================================ */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .bd-radius-5  { border-radius: 4px; }
    .bd-radius-10 { border-radius: 7px; }
    .bd-radius-15 { border-radius: 10px; }
    .bd-radius-20 { border-radius: 10px; }
}