/* Varients */
:root {
  /* Base units */
  --unit-row: 20px;
  --unit-m-gutter: 16px;
  --unit-t-gutter: 20px;
  --unit-pc-gutter: 24px;
  --unit-m-margin: 20px;
  --unit-t-margin: 40px;
  --unit-pc-margin: 60px;
  /* Color Style */
  --primary: #1729ec;
  --primary-subtle: #3f4ef3;
  --primary-muted: #6572fe;
  --surface-tint: #eef1fc;
  --secondary: #7f33b5;
  --secondary-subtle: #906bb9;
  --secondary-muted: #8c7ccd;
  --text-default: #000000;
  --text-muted: #7b8191;
  --text-light: #94969e;
  --stroke: #e6e6e6;
  --surface-bg: #ffffff;
  --dim-bg: rgba(0, 0, 0, 0.25);
  --gradient: linear-gradient(
    to right,
    color-mix(in srgb, var(--primary-muted) 70%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 70%, transparent) 100%
  );
  /* [user variants: product-detail] */
  /* Color Style */
  --transparent: #ffffff00;
  --surface-bg-beige: #f5f5f5;
  /* [user variants: product-detail] */
  /* [user variants: product-list] */
  --gradient-light: linear-gradient(
    to right,
    color-mix(in srgb, var(--primary-muted) 15%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 15%, transparent) 100%
  );
  /* [user variants: product-list] */
}

/* Typography */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Pretendard */
.pre_reg_10 {
  font-family: "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
}

.pre_reg_12 {
  font-family: "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.pre_reg_14 {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.pre_reg_16 {
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.pre_reg_18 {
  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
}

.pre_bold_14 {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.pre_bold_16 {
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.pre_bold_20 {
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}

/* Montserrat */
.mont_reg_14 {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.mont_reg_16 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.mont_reg_18 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
}

.mont_bold_14 {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.mont_bold_16 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

/* [user class: product-detail] */
/* Pretendard */
.pre_bold_10_auto {
  font-family: "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: normal;
}

/* Montserrat */
.mont_reg_12 {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.mont_reg_12_auto {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.mont_bold_12 {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}

.mont_bold_20 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}

/* [user class: product-detail] */
.material-icons.icon_16 {
  font-size: 16px;
  line-height: 20px;
}

.material-icons.icon_20 {
  font-size: 20px;
  line-height: 20px;
}

.material-icons.icon_24 {
  font-size: 24px;
  line-height: 30px;
}

/* Layout */
.contents {
  margin: 0 var(--unit-m-margin);
}

@media (min-width: 768px) {
  .contents {
    margin: 0 var(--unit-t-margin);
  }
}
@media (min-width: 1280px) {
  .contents {
    margin: 0 var(--unit-pc-margin);
  }
}