/* 클래스를 이용해서 html에서 변수만 넣고 css를 주기 위해서 제작 */
/* px -> rem 으로 작성 */
/* 768을 기준 이하는 mobile, 초과는 pc */
/* 모바일은 너비 400px을 최대값으로 작업 */
/* pc는 주로 1920px-1050px을 기준으로 작업 */
/* 사용중인 곳 */
/* /landing/toss_dev.php */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* 모바일 터치 하이라이트 제거 */
  outline: none;
  /* 클릭 시 외곽선 제거 */
}

@media screen and (max-width: 768px) {
  .only-pc {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .only-mobile {
    display: none !important;
  }
}

/* PC 폰트 굵기 */
.fw-extrabold {
  font-weight: 800;
}

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

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

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

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

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

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

/* pc 폰트 크기 */
.fs-120 {
  font-size: 120px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 텍스트 정렬 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* 줄 간격 */
.lh-0 {
  line-height: 1;
}

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

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

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

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

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

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

.lh-7 {
  line-height: 1.7;
}

/* 자간 */
.ls-m1 {
  letter-spacing: -0.01em;
}

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

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

.ls-m4 {
  letter-spacing: -0.04em;
}

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

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

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

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

.ls-p4 {
  letter-spacing: 0.04em;
}

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

/* 디스플레이 및 반응형 노출 제어 */
.d-none {
  display: none;
}

.v-hidden {
  visibility: hidden;
}

.v-visible {
  visibility: visible;
}

/* posiiton */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.static {
  position: static;
}

/* width */
.max-w {
  width: max-content;
}

.min-w {
  width: min-content;
}

.fit-w {
  width: fit-content;
}




@media screen and (max-width : 768px) {
  :root {
    font-size: min(4vw, 16px);
    /* 화면 너비에 따른 유동적 폰트 기준 */
  }

  /* 모바일 폰트 굵기 */
  .m-fw-extrabold {
    font-weight: 800;
  }

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

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

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

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

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

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

 /* 모바일 폰트 크기 (16px = 1rem 기준) */
.m-fs-120 { font-size: 7.5rem; }
.m-fs-87  { font-size: 5.4375rem; }
.m-fs-80  { font-size: 5rem; }
.m-fs-70  { font-size: 4.375rem; }
.m-fs-60  { font-size: 3.75rem; }
.m-fs-55  { font-size: 3.4375rem; }
.m-fs-54  { font-size: 3.375rem; }
.m-fs-52  { font-size: 3.25rem; }
.m-fs-50  { font-size: 3.125rem; }
.m-fs-48  { font-size: 3rem; }
.m-fs-45  { font-size: 2.8125rem; }
.m-fs-44  { font-size: 2.75rem; }
.m-fs-43  { font-size: 2.6875rem; }
.m-fs-40  { font-size: 2.5rem; }
.m-fs-38  { font-size: 2.375rem; }
.m-fs-37  { font-size: 2.3125rem; }
.m-fs-36  { font-size: 2.25rem; }
.m-fs-35  { font-size: 2.1875rem; }
.m-fs-34  { font-size: 2.125rem; }
.m-fs-33  { font-size: 2.0625rem; }
.m-fs-32  { font-size: 2rem; }
.m-fs-31  { font-size: 1.9375rem; }
.m-fs-30  { font-size: 1.875rem; }
.m-fs-29  { font-size: 1.8125rem; }
.m-fs-28  { font-size: 1.75rem; }
.m-fs-27  { font-size: 1.6875rem; }
.m-fs-26  { font-size: 1.625rem; }
.m-fs-25  { font-size: 1.5625rem; }
.m-fs-24  { font-size: 1.5rem; }
.m-fs-23  { font-size: 1.4375rem; }
.m-fs-22  { font-size: 1.375rem; }
.m-fs-21  { font-size: 1.3125rem; }
.m-fs-20  { font-size: 1.25rem; }
.m-fs-19  { font-size: 1.1875rem; }
.m-fs-18  { font-size: 1.125rem; }
.m-fs-17 { font-size: 1.0625rem; }
.m-fs-16 { font-size: 1rem; }
.m-fs-15 { font-size: 0.9375rem; }
.m-fs-14 { font-size: 0.875rem; }
.m-fs-13 { font-size: 0.8125rem; }
.m-fs-12 { font-size: 0.75rem; }
.m-fs-11 { font-size: 0.6875rem; }
.m-fs-10 { font-size: 0.625rem; }
.m-fs-9  { font-size: 0.5625rem; }
.m-fs-8  { font-size: 0.5rem; }

  /* 모바일 텍스트 정렬 */
  .m-text-center {
    text-align: center;
  }

  .m-text-left {
    text-align: left;
  }

  .m-text-right {
    text-align: right;
  }

  /* 모바일 줄 간격 */
  .m-lh-0 {
    line-height: 1;
  }

  .m-lh-1 {
    line-height: 1.1;
  }

  .m-lh-2 {
    line-height: 1.2;
  }

  .m-lh-3 {
    line-height: 1.3;
  }

  .m-lh-4 {
    line-height: 1.4;
  }

  .m-lh-5 {
    line-height: 1.5;
  }

  .m-lh-6 {
    line-height: 1.6;
  }

  .m-lh-7 {
    line-height: 1.7;
  }

  /* 모바일 자간 */
  .m-ls-m1 {
    letter-spacing: -0.01em;
  }

  .m-ls-m2 {
    letter-spacing: -0.02em;
  }

  .m-ls-m3 {
    letter-spacing: -0.03em;
  }

  .m-ls-m4 {
    letter-spacing: -0.04em;
  }

  .m-ls-m5 {
    letter-spacing: -0.05em;
  }
  .m-ls-m6 {
    letter-spacing: -0.06em;
  }
  .m-ls-m7 {
    letter-spacing: -0.07em;
  }

  .m-ls-p1 {
    letter-spacing: 0.01em;
  }

  .m-ls-p2 {
    letter-spacing: 0.02em;
  }

  .m-ls-p3 {
    letter-spacing: 0.03em;
  }

  .m-ls-p4 {
    letter-spacing: 0.04em;
  }

  .m-ls-p5 {
    letter-spacing: 0.05em;
  }

  /* 모바일 디스플레이 및 반응형 노출 제어 */
  .m-d-none {
    display: none;
  }

  .m-v-hidden {
    visibility: hidden;
  }

  .m-v-visible {
    visibility: visible;
  }

  /* 모바일 position */
  .m-relative {
    position: relative;
  }

  .m-absolute {
    position: absolute;
  }

  .m-fixed {
    position: fixed;
  }

  .m-static {
    position: static;
  }

  /* 모바일 width */
  .m-max-w {
    width: max-content;
  }

  .m-min-w {
    width: min-content;
  }

  .m-fit-w {
    width: fit-content;
  }

}