:root {
  --greenish-teal: #4dd697;
  --black: #333;
  --seafoam-blue: #69d099;
  --blood-orange: #ff5002;
  --warm-grey: #848484;
  --pale-lilac: #fdfdff;
  --silver: #e2e5e8;
  --pale-grey: #f6f6f9;
  --light-sage: #dff5dc;
  --pale-grey: #ececf2;
  --greyish: #aaa;
  --faded-pink: #edd0d9;
  --light-mauve: #d0a2ae;
}

@font-face {
  font-family: PretendardVariable;
  src: local(PretendardVariable-Medium),
    url('/fonts/PretendardVariable-Medium.woff2') format("woff2"),
    url('/fonts/PretendardVariable-Medium.woff') format("woff"),
    url('/fonts/PretendardVariable-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: PretendardVariable;
  src: local(PretendardVariable-Bold),
    url('/fonts/PretendardVariable-Bold.woff2') format("woff2"),
    url('/fonts/PretendardVariable-Bold.woff') format("woff"),
    url('/fonts/PretendardVariable-Bold.ttf') format("truetype");
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
}

.H1-Pretendard-Variable-32pt {
  font-family: PretendardVariable;
  font-size: 32px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--black);
}

.LNB-Pretendard-Variable-16pt {
  font-family: PretendardVariable;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: -0.4px;
  color: var(--warm-grey);
}

.Body1-Pretendard-Variable-14pt {
  font-family: PretendardVariable;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.14;
  letter-spacing: -0.35px;
  color: var(--black);
}

.Body1-Pretendard-Variable-18pt {
  font-family: PretendardVariable;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: -0.45px;
  text-align: left;
  color: var(--black);
}

.Body2-Pretendard-Variable-14pt {
  line-height: 1.29;
  letter-spacing: -0.35px;
  color: var(--greyish);
}

.Caption-Pretendard-Variable-12pt {
  font-family: PretendardVariable;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--greyish);
} 

.w-32 {
  width: 32px;
}

.w-40 {
  width: 40px;
}

.w-64 {
  width: 64px;
}

.w-72 {
  width: 72px;
}

.w-80 {
  width: 80px;
}

.w-88 {
  width: 88px;
}

.w-96 {
  width: 96px;
}

.w-104 {
  width: 104px;
}

.w-128 { 
  width: 128px;
}

.w-151 {
  width: 151px;
}

.w-152 {
  width: 152px;
}

.w-160 {
  width: 160px;
}

.w-168 {
  width: 168px;
}

.w-192 {
  width: 192px;
}

.w-200 {
  width: 200px;
}

.w-240 {
  width: 240px;
}

.w-248{
  width: 248px;
}

.w-320 {
  width: 320px;
}

.h-610 {
  height: 610px;
}

.h-280 {
  height: 280px;
}

.ml-4 {
  margin-left: 4px;
}

.ml-8 {
  margin-left: 8px;
}

.ml-16 {
  margin-left: 16px;
}

.ml-32 {
  margin-left: 32px;
}

.ml-42 {
  margin-left: 42px;
}

.mb-32 {
  margin-bottom: 32px;
}

.plr-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.pl-16 {
  padding-left: 16px;
}

.border-right {
  border-right: 1px solid var(--silver);
  padding-ㅣㄷ: 1px;
}

/* 반응형 스타일 */

@media (max-width: 1600px) {
  .H1-Pretendard-Variable-32pt { font-size: 28px; }
  .LNB-Pretendard-Variable-16pt { font-size: 15px; }
  .Body1-Pretendard-Variable-14pt { font-size: 13px; }
  .Body1-Pretendard-Variable-18pt { font-size: 16px; }
  .Body2-Pretendard-Variable-14pt { font-size: 13px; }
  .Caption-Pretendard-Variable-12pt { font-size: 11px; }

  .w-40 { width: 36px; }
  .w-64 { width: 58px; }
  .w-72 { width: 65px; }
  .w-80 { width: 72px; }
  .w-88 { width: 79px; }
  .w-96 { width: 86px; }
  .w-104 { width: 94px; }
  .w-128 { width: 115px; }
  .w-151 { width: 136px; }
  .w-152 { width: 137px; }
  .w-160 { width: 144px; }
  .w-168 { width: 151px; }
  .w-192 { width: 173px; }
  .w-200 { width: 180px; }
  .w-240 { width: 216px; }
  .w-248 { width: 223px; }
  .w-320 { width: 288px; }

  .h-610 { height: 549px; }
  .h-280 { height: 252px; }

  .ml-4 { margin-left: 3.6px; }
  .ml-8 { margin-left: 7.2px; }
  .ml-16 { margin-left: 14.4px; }
  .ml-32 { margin-left: 28.8px; }
  .ml-42 { margin-left: 37.8px; }
  .mb-32 { margin-bottom: 28.8px; }

  .plr-8 { padding-left: 7.2px; padding-right: 7.2px; }
  .pl-8 { padding-left: 7.2px; }
  .pl-16 { padding-left: 14.4px; }
}

@media (max-width: 1400px) {
  .H1-Pretendard-Variable-32pt { font-size: 24px; }
  .LNB-Pretendard-Variable-16pt { font-size: 14px; }
  .Body1-Pretendard-Variable-14pt { font-size: 12px; }
  .Body1-Pretendard-Variable-18pt { font-size: 15px; }
  .Body2-Pretendard-Variable-14pt { font-size: 12px; }
  .Caption-Pretendard-Variable-12pt { font-size: 10px; }

  .w-40 { width: 32px; }
  .w-64 { width: 51px; }
  .w-72 { width: 58px; }
  .w-80 { width: 64px; }
  .w-88 { width: 70px; }
  .w-96 { width: 77px; }
  .w-104 { width: 83px; }
  .w-128 { width: 102px; }
  .w-151 { width: 121px; }
  .w-152 { width: 122px; }
  .w-160 { width: 128px; }
  .w-168 { width: 134px; }
  .w-192 { width: 154px; }
  .w-200 { width: 160px; }
  .w-240 { width: 192px; }
  .w-248 { width: 198px; }
  .w-320 { width: 256px; }

  .h-610 { height: 488px; }
  .h-280 { height: 224px; }

  .ml-4 { margin-left: 3.2px; }
  .ml-8 { margin-left: 6.4px; }
  .ml-16 { margin-left: 12.8px; }
  .ml-32 { margin-left: 25.6px; }
  .ml-42 { margin-left: 33.6px; }
  .mb-32 { margin-bottom: 25.6px; }

  .plr-8 { padding-left: 6.4px; padding-right: 6.4px; }
  .pl-8 { padding-left: 6.4px; }
  .pl-16 { padding-left: 12.8px; }
}

@media (max-width: 1200px) {
  .H1-Pretendard-Variable-32pt { font-size: 20px; }
  .LNB-Pretendard-Variable-16pt { font-size: 13px; }
  .Body1-Pretendard-Variable-14pt { font-size: 11px; }
  .Body1-Pretendard-Variable-18pt { font-size: 14px; }
  .Body2-Pretendard-Variable-14pt { font-size: 11px; }
  .Caption-Pretendard-Variable-12pt { font-size: 9px; }

  .w-40 { width: 28px; }
  .w-64 { width: 45px; }
  .w-72 { width: 50px; }
  .w-80 { width: 56px; }
  .w-88 { width: 62px; }
  .w-96 { width: 67px; }
  .w-104 { width: 73px; }
  .w-128 { width: 90px; }
  .w-151 { width: 105px; }
  .w-152 { width: 106px; }
  .w-160 { width: 112px; }
  .w-168 { width: 118px; }
  .w-192 { width: 134px; }
  .w-200 { width: 140px; }
  .w-240 { width: 168px; }
  .w-248 { width: 174px; }
  .w-320 { width: 224px; }

  .h-610 { height: 427px; }
  .h-280 { height: 196px; }

  .ml-4 { margin-left: 2.8px; }
  .ml-8 { margin-left: 5.6px; }
  .ml-16 { margin-left: 11.2px; }
  .ml-32 { margin-left: 22.4px; }
  .ml-42 { margin-left: 29.4px; }
  .mb-32 { margin-bottom: 22.4px; }

  .plr-8 { padding-left: 5.6px; padding-right: 5.6px; }
  .pl-8 { padding-left: 5.6px; }
  .pl-16 { padding-left: 11.2px; }
}