@charset "UTF-8";
/*------------------------------------*\
  # Theme
\*------------------------------------*/
/*------------------------------------*\
  # Colors
\*------------------------------------*/
/** identity 기본 변수 - 부트스트랩 오버라이딩 변수 포함 **/
/** App Identity Variables - New!!, Not Bootstrap variables **/
/** 부트스트랩 기본 z-index **/
/** 부트스트랩 기본 변수 오버라이드 항목 **/
/** 아래는 정리 필요 **/
/** grid **/
/** Link **/
/*------------------------------------*\
  # Colors
\*------------------------------------*/
/*------------------------------------*\
  # Font, Text Custom Variables
\*------------------------------------*/
/*--------------------------------------*\
  # Layout 요소
\*--------------------------------------*/
/*--------------------------------------*\
  #Button Variables, Placeholder, Mixin
\*--------------------------------------*/
/*------------------------------------*\
  #요 아래 친구들은 지울 수 있게 정리하자
\*------------------------------------*/
/** Form **/
/** grid **/
/** space **/
/** padding **/
@keyframes svelte-rsimrj-cate {
  100% {
    transform: translateX(40%);
  }
}
.rate.svelte-rsimrj {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  border: 4px solid var(--pm-main-light-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  color: var(--pm-main-contrast);
  font-weight: 900;
}
.rate.svelte-rsimrj:before {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: -3rem;
  width: 200%;
  height: 120%;
  background: linear-gradient(45deg, transparent, transparent, rgba(255, 255, 255, 0.3), transparent, transparent);
  animation: svelte-rsimrj-cate 2s alternate-reverse infinite;
  z-index: 1;
}
.rate.svelte-rsimrj:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3), inset 0 2px 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to top, color-mix(in oklab, var(--pm-main), white 9%) 20%, color-mix(in oklab, var(--pm-main), white 12%) 30%, color-mix(in oklab, var(--pm-main), white 15%) 50%);
  border-radius: 30px;
  filter: brightness(1.3);
}
.rate.svelte-rsimrj :where(.svelte-rsimrj) {
  position: relative;
  z-index: 1;
}

.coupon-card.svelte-rsimrj {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 310px;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid #e9ecef;
  box-shadow: -6px -6px 16px 0 rgb(255, 255, 255), 6px 6px 16px 0 rgba(217, 210, 200, 0.51);
  overflow: hidden;
  padding-bottom: 6rem;
}
@media (min-width: 600px) {
  .coupon-card.svelte-rsimrj {
    padding-bottom: 2rem;
  }
}
.coupon-card.svelte-rsimrj:hover {
  box-shadow: -15px -15px 16px 0 rgb(255, 255, 255), 15px 15px 20px 0 rgb(217, 210, 200);
  transition: all 1s ease;
}
.coupon-card__header.svelte-rsimrj {
  padding: 1.2rem;
  padding-bottom: 0;
  border-radius: 1rem 1rem 0 0;
}
.coupon-card__header.svelte-rsimrj .coupon-card__title:where(.svelte-rsimrj) {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.coupon-card__header.svelte-rsimrj .icon-box:where(.svelte-rsimrj) {
  text-align: center;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 5px 2px -2px #f8f9fa;
}
.coupon-card__body.svelte-rsimrj {
  padding: 1rem;
  padding-top: 0;
  height: 180px;
}
@media (max-width: 599.98px) {
  .coupon-card__body.svelte-rsimrj {
    padding: 1.5rem;
    padding-top: 0;
  }
}
.coupon-card.svelte-rsimrj .desc-box:where(.svelte-rsimrj) {
  padding: 0.5rem;
}
.coupon-card__thumb.svelte-rsimrj {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.coupon-card__thumb.svelte-rsimrj img:where(.svelte-rsimrj) {
  width: 80%;
  margin: 0 auto;
}
.coupon-card__desc.svelte-rsimrj {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.coupon-added-box.svelte-rsimrj {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
@media (min-width: 600px) {
  .coupon-added-box.svelte-rsimrj {
    justify-content: flex-end;
    bottom: 0;
    right: 1rem;
    padding: 0.5rem;
    width: 120%;
  }
}
.coupon-added-box.svelte-rsimrj .btn-icon:where(.svelte-rsimrj) {
  margin-left: 0.1rem;
}

.card-wall.svelte-rsimrj {
  display: block;
}
.card-wall--fixed.svelte-rsimrj {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.8);
}
.card-wall__header.svelte-rsimrj {
  position: relative;
  padding: 1rem;
  background: linear-gradient(#d53a9d 20%, #743ad5);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff;
}
.card-wall__header.svelte-rsimrj .card-wall__close:where(.svelte-rsimrj) {
  position: absolute;
  cursor: pointer;
  right: 0.5rem;
  top: 0.5rem;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
}
.card-wall__body.svelte-rsimrj {
  width: 100%;
  max-height: 600px;
  margin: 0 auto;
  max-width: 350px;
  background-color: #ffffff;
  padding: 1rem;
  overflow-y: auto;
}

.card-wall.svelte-rsimrj {
  border: 5px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#d53a9d, #743ad5);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  position: absolute;
  margin: 0 auto;
  width: 80%;
  max-width: 400px;
  min-height: 50%;
  max-height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 2;
  overflow: hidden;
}
/*------------------------------------*\
  # Theme
\*------------------------------------*/
/*------------------------------------*\
  # Colors
\*------------------------------------*/
/** identity 기본 변수 - 부트스트랩 오버라이딩 변수 포함 **/
/** App Identity Variables - New!!, Not Bootstrap variables **/
/** 부트스트랩 기본 z-index **/
/** 부트스트랩 기본 변수 오버라이드 항목 **/
/** 아래는 정리 필요 **/
/** grid **/
/** Link **/
/*------------------------------------*\
  # Colors
\*------------------------------------*/
/*------------------------------------*\
  # Font, Text Custom Variables
\*------------------------------------*/
/*--------------------------------------*\
  # Layout 요소
\*--------------------------------------*/
/*--------------------------------------*\
  #Button Variables, Placeholder, Mixin
\*--------------------------------------*/
/*------------------------------------*\
  #요 아래 친구들은 지울 수 있게 정리하자
\*------------------------------------*/
/** Form **/
/** grid **/
/** space **/
/** padding **/
.splide-box .coupon-card {
  width: 100% !important;
  height: 100%;
}