@charset "UTF-8";
/* 멤버십 메인 */
.membership-wrapper.main-wrapper:not(.scrolling) #topNavigation .container {
  background-color: var(--color-bg-neutral-solid, #222832);
}

body[data-theme=white] .membership-wrapper #topNavigation.up .container {
  background-color: #ffffff;
}
body[data-theme=white] .membership-wrapper:has(#topNavigation.up) .membership-index__header::before {
  opacity: 0;
}

.membership-index {
  background-color: var(--color-bg-neutral-solid, #222832);
  max-width: 761px;
  margin: 0 auto;
  overflow: visible;
}
.membership-index__header {
  position: relative;
}
.membership-index__header .container {
  background-color: transparent;
}
.membership-index__header::before {
  content: "";
  position: absolute;
  top: calc(100% + 32px);
  left: 0;
  width: 100%;
  height: 16px;
  background-color: var(--color-bg-neutral-solid, #222832);
  z-index: 1;
}
.membership-index__preview {
  background-color: var(--theme-bg-color, #ffffff);
}
.membership-index__preview__box {
  overflow: hidden;
}
.membership-index__preview__header {
  padding: 16px 20px;
  background-color: #ffffff;
  border-radius: 16px;
}
.membership-index__preview__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.membership-index__preview__logo {
  width: 76px;
  height: 14px;
}
.membership-index__preview__logo svg,
.membership-index__preview__logo img {
  width: 100%;
  height: 100%;
}
.membership-index__preview__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.membership-index__preview__info__amount {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.membership-index__preview__info__arrow {
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.membership-index__preview__info__arrow svg {
  width: 100%;
  height: 100%;
}
.membership-index__preview__quickmenu {
  margin-top: 20px;
}
.membership-index__preview__quickmenu .swiper-slide {
  width: fit-content;
}
.membership-index__preview__quickmenu .membership-quickmenu__item {
  width: fit-content;
}
.membership-index__preview__quickmenu .membership-quickmenu__item .element__quick-menu {
  gap: 6px;
  margin: 0 4px;
}
.membership-index__preview__quickmenu .membership-quickmenu__item .element__quick-menu__img {
  position: relative;
  width: 100%;
  height: fit-content;
  padding: 0;
  aspect-ratio: 1/1;
}
.membership-index__preview__banner {
  overflow: hidden;
  padding-bottom: 16px;
  box-sizing: content-box;
  transition: height 0.5s ease-in-out;
}
.membership-index__preview__banner.hide {
  padding-bottom: 0;
  height: 0 !important;
}
.membership-index__preview__banner-item {
  position: relative;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(10%);
}
.membership-index__preview__banner-item.hide-ing {
  transform: translateY(-20%);
}
.membership-index__preview__banner-item.hide-completed {
  height: 0;
}
.membership-index__preview__banner-item.active {
  opacity: 1;
  transform: translateY(0);
}
.membership-index__preview__banner-item.active.first {
  transition: none;
}
.membership-index__preview__banner-item .btn-close {
  position: absolute;
  right: 8px;
  top: 8px;
}
.membership-index__preview__banner-item a {
  display: block;
  padding: 8px;
  padding-right: 32px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 16px;
  border: 1px solid var(--color-border-neutral-inverted, #ffffff);
}
.membership-index__preview__banner-item .banner-item__box {
  display: flex;
  align-items: center;
  padding: 6px;
  gap: 12px;
}
.membership-index__preview__banner-item .banner-item__thumb {
  flex-shrink: 0;
}
.membership-index__preview__banner-item .banner-item__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.membership-index__preview__banner-item .banner-item__text {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 2px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
@media screen and (max-width: 320px) {
  .membership-index__preview__banner-item .banner-item__title {
    word-break: break-all;
  }
  .membership-index__preview__banner-item .banner-item__text {
    display: none;
  }
}
.membership-index__preview--no-login .banner .banner-item {
  padding: 20px;
}
.membership-index__preview--no-login .banner .banner-item-inner {
  align-items: flex-start;
}
.membership-index__preview--no-login .banner .banner-img-box {
  width: 148px;
  margin-top: 31px;
}
.membership-index__preview--no-login .banner .banner-img-box img {
  width: 100%;
}
.membership-index__content {
  position: relative;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.membership-index__tab {
  position: relative;
  padding-top: 10px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  position: sticky;
  top: calc(10px * -1);
  height: 56px;
  z-index: 11;
  transition: top 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.membership-index__tab .spacing--xs {
  display: none;
}
.membership-index__tab .tab-component[data-type=text] {
  position: relative;
  z-index: 10;
}
.membership-index__tab .tab-component[data-type=text] .tab-component__inner {
  background: none;
}
@media screen and (max-width: 320px) {
  .membership-index__tab .tab-component {
    overflow: hidden;
  }
  .membership-index__tab .tab-component__inner {
    overflow-x: auto;
    overflow-y: hidden;
  }
}
.membership-index .tab-component__content .container {
  padding-bottom: 0px;
}
.membership-index .floating-buttons {
  margin-bottom: 48px;
  transition: margin-bottom 0.3s linear;
}
.membership-index .floating-buttons.down {
  margin-bottom: 0;
}

.wrapper:has(#topNavigation.up) .membership-index__tab {
  position: sticky;
  top: calc(54px - 10px);
}

/* 메인 홈 하단 적립/결제 버튼 */
.membership-bottom-btn {
  position: fixed;
  left: 50%;
  bottom: var(--content-padding-bottom, calc(64px + var(--safe-bottom, 0px)));
  width: 100%;
  max-width: 761px;
  min-height: 44px;
  transform: translate(-50%, 0);
  color: var(--color-fg-neutral-inverted, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  background-color: var(--color-red-600);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 9999;
}
.membership-bottom-btn.hide {
  bottom: 0;
  transform: translate(-50%, var(--membership-bottom-floating-hide, 0%));
}
.membership-bottom-btn__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.membership-bottom-btn__box p {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.membership-bottom-btn__box i, .membership-bottom-btn__box img {
  width: 24px;
  height: 24px;
}

#mv .membership-bottom-btn {
  bottom: calc(64px + var(--safe-bottom, 0px));
}

.membership-element--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 멤버십 공통 애니메이션 */
@keyframes looping {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-100%);
  }
}
/* 이달의 쿠폰 쿠폰 리스트 */
.month-coupon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.month-coupon-list .unit-list__coupon .unit-list__coupon-info {
  width: calc(100% - 84px);
}
.month-coupon-list .unit-list__coupon .unit-list__coupon-info .list-component__content {
  width: calc(100% - 44px - 16px);
}
.month-coupon-list .unit-list__coupon .unit-list__coupon-info .list-component__content .list-component__tit {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 엘피상점 :: 공통 */
.ms-lp-shop__content {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  overflow: hidden;
}

/* 엘피상점 :: 핫딜 */
.ms-lp-shop__hotdeal {
  position: relative;
  padding: 28px 0;
}
.ms-lp-shop__hotdeal .container {
  background: none;
}
.ms-lp-shop__hotdeal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ms-lp-shop__hotdeal-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ms-lp-shop__hotdeal-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-overlay-bk-thin, rgba(0, 0, 0, 0.2));
  backdrop-filter: blur(200px);
  -webkit-backdrop-filter: blur(200px);
}
.ms-lp-shop__hotdeal-time {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  color: var(--color-fg-neutral-inverted, #ffffff);
  padding-bottom: 16px;
  opacity: 0;
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.ms-lp-shop__hotdeal .product-component .thumb-product__wrap::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.1) 100%);
}
.ms-lp-shop__hotdeal .swiper-slide {
  position: relative;
  width: max(50%, 224px);
  overflow: hidden;
  height: auto;
}
.ms-lp-shop__hotdeal .swiper-slide .product-component {
  opacity: 0.7;
  transform: scale(0.93);
  transition: all 0.3s ease-in-out;
}
.ms-lp-shop__hotdeal .swiper-slide-prev .ms-lp-shop__hotdeal-time {
  transform: translateX(-30px);
}
.ms-lp-shop__hotdeal .swiper-slide-next .ms-lp-shop__hotdeal-time {
  transform: translateX(30px);
}
.ms-lp-shop__hotdeal .swiper-slide.swiper-slide-active .product-component {
  transform: scale(1) !important;
  opacity: 1 !important;
  width: 100%;
}
.ms-lp-shop__hotdeal .swiper-slide.swiper-slide-active .ms-lp-shop__hotdeal-time {
  opacity: 1;
  transform: translateX(0);
  transition: 0.3s ease-in-out;
  transition-property: opacity, transform;
}
.ms-lp-shop__hotdeal .swiper-backface-hidden .swiper-slide.swiper-slide-active .product-component {
  transform: scale(1) translateZ(0) !important;
}

/* 엘피상점 :: 쿠폰 */
.ms-lp-shop__coupon {
  margin-top: 40px;
}
.ms-lp-shop__coupon-product {
  padding-bottom: 40px;
}
.ms-lp-shop__coupon-product .swiper-slide {
  width: 170px;
}

/* 엘피상점 :: 카테고리 */
.ms-lp-shop__category {
  margin-top: 40px;
}
.ms-lp-shop__category-brand {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 8px;
  width: 100%;
}
.ms-lp-shop__category-brand .element__quick-menu {
  width: calc((100% - 24px) / 4);
}
.ms-lp-shop__category-brand .element__quick-menu__img {
  display: inline-flex;
  padding: 0;
  width: 100%;
  justify-content: center;
}
.ms-lp-shop__category-brand .element__quick-menu__img .element__thumb {
  padding-top: 64px;
}
@media screen and (max-width: 360px) {
  .ms-lp-shop__category-brand .element__quick-menu__img .element__thumb {
    max-width: 64px;
    max-height: 64px;
    width: 100%;
    height: 100%;
    padding-top: 100%;
  }
}
.ms-lp-shop__category-brand .element__quick-menu__tit {
  text-align: center;
  word-break: break-all;
}
.ms-lp-shop__category .unit-partner-grid-wrapper .unit-partner .btn {
  padding-left: 0;
  padding-right: 0;
}

/* 롯데체크인 :: 공통 */
.ms-walk-challenge__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border-radius: 16px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  overflow: hidden;
}

/* 롯데체크인 :: 메인 탭 컨텐츠 */
.ms-walk-challenge {
  /* 참여전 - 롤링 */
  /* 참여전 - 슬라이드 */
  /* 참여후 - kv영역 */
  /* 참여후 - 출석체크 */
  /* 참여후 - 이달의 랭킹 */
  /* 참여후 - 점수 모으기 */
  /* 참여후 - 포인트 뽑기 */
  /* 중단 */
  /* 커밍순 */
}
.ms-walk-challenge__rolling .rolling-wrapper {
  display: flex;
  flex-direction: column;
  animation: looping 10s linear infinite;
}
.ms-walk-challenge__rolling .rolling-box {
  display: flex;
  flex-direction: column;
}
.ms-walk-challenge__rolling .banner-band {
  height: 48px;
  overflow: hidden;
}
.ms-walk-challenge__slide {
  overflow: hidden;
}
.ms-walk-challenge__slide-img {
  display: flex;
  justify-content: center;
}
.ms-walk-challenge__slide-img img {
  width: 200px;
  height: 160px;
}
.ms-walk-challenge__slide-text {
  text-align: center;
  margin-top: 24px;
}
.ms-walk-challenge__slide-title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-walk-challenge__slide-desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 8px;
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__slide .carousel {
  margin: 20px 0;
}
.ms-walk-challenge__kv {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  padding-top: 8px;
}
.ms-walk-challenge__kv-sub {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__kv-title {
  margin-top: 4px;
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.ms-walk-challenge__kv-title .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.ms-walk-challenge__kv-date {
  margin-top: 8px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-walk-challenge__kv-img {
  display: flex;
  justify-content: center;
}
.ms-walk-challenge__kv-img img {
  width: 200px;
  height: 160px;
}
.ms-walk-challenge__main-attendance-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 20px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-walk-challenge__main-attendance-top {
  display: flex;
  justify-content: space-between;
}
.ms-walk-challenge__main-attendance-text {
  padding-top: 8px;
}
.ms-walk-challenge__main-attendance-title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__main-attendance-desc {
  margin-top: 4px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.ms-walk-challenge__main-attendance-img {
  width: 71px;
  flex-shrink: 0;
}
.ms-walk-challenge__main-attendance-img img {
  width: 100%;
  max-width: none;
}
.ms-walk-challenge__ranking-box {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-walk-challenge__ranking-list {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.ms-walk-challenge__ranking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}
.ms-walk-challenge__ranking-item.active {
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
  border-radius: 10px;
}
.ms-walk-challenge__ranking-item.active .ms-walk-challenge__ranking-rank {
  color: var(--color-fg-neutral-solid, #222832);
}
.ms-walk-challenge__ranking-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-walk-challenge__ranking-rank {
  width: 52px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__ranking-rank img {
  padding-left: 1px;
  width: 24px;
}
.ms-walk-challenge__ranking-name {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__ranking-point {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__reward-box {
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-walk-challenge__reward-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.ms-walk-challenge__reward-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__reward-title {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.ms-walk-challenge__reward-value {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ms-walk-challenge__reward-value .icon {
  display: block;
  width: 20px;
  height: 20px;
}
.ms-walk-challenge__reward-value .icon img {
  width: 100%;
  height: 100%;
}
.ms-walk-challenge__point-box {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px;
  background-color: var(--color-fg-neutral-solid, #222832);
  border-radius: 16px;
  text-align: center;
}
.ms-walk-challenge__point-text {
  padding-top: 8px;
}
.ms-walk-challenge__point-title {
  color: var(--color-fg-neutral-inverted, #ffffff);
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.ms-walk-challenge__point-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
  color: var(--color-bg-overlay-wt-thick, rgba(255, 255, 255, 0.8));
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__point-desc .txt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ms-walk-challenge__point-img {
  display: flex;
  justify-content: center;
}
.ms-walk-challenge__point-img img {
  width: 200px;
  height: 160px;
}
.ms-walk-challenge__point-button {
  position: relative;
}
.ms-walk-challenge__point-button .tooltip {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ms-walk-challenge__point-floating {
  text-align: center;
}
.ms-walk-challenge__point-floating .point-reward-banner {
  position: fixed;
  margin-bottom: 48px;
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
}
.ms-walk-challenge__point-floating .point-reward-banner__content svg {
  width: 16px;
  height: 16px;
}
.ms-walk-challenge__point-floating.hide .point-reward-banner {
  transform: translate(-50%, 100%);
  opacity: 0;
  visibility: hidden;
}
.ms-walk-challenge__stop {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  padding: 20px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  margin-top: 24px;
}
.ms-walk-challenge__stop-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.ms-walk-challenge__stop-title {
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-walk-challenge__stop-desc {
  text-align: center;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__stop-img {
  display: flex;
  justify-content: center;
}
.ms-walk-challenge__stop-img img {
  width: 200px;
  height: 160px;
}
.ms-walk-challenge__coming {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  padding: 20px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  margin-top: 24px;
}
.ms-walk-challenge__coming-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.ms-walk-challenge__coming-title {
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-walk-challenge__coming-title .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.ms-walk-challenge__coming-desc {
  text-align: center;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__coming-img {
  display: flex;
  justify-content: center;
}
.ms-walk-challenge__coming-img img {
  width: 200px;
  height: 160px;
}

/* 롯데체크인 :: 현황페이지 */
.ms-walk-challenge__state {
  /* 월선택 */
  /* 이번달 랭킹 순위 */
  /* 이번달 점수 */
}
.ms-walk-challenge__state-month {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0 24px;
}
.ms-walk-challenge__state-month svg {
  color: var(--color-icon-neutral-solid, #222832);
}
.ms-walk-challenge__state-month--arrow svg {
  width: 20px;
  height: 20px;
}
.ms-walk-challenge__state-month--arrow.disabled {
  pointer-events: none;
}
.ms-walk-challenge__state-month--arrow.disabled svg {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.ms-walk-challenge__state-month--value {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.ms-walk-challenge__state-top3 {
  display: flex;
  gap: 10px;
}
.ms-walk-challenge__state-top3--item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-walk-challenge__state-top3--item.rank-1 {
  background: linear-gradient(159deg, rgba(255, 255, 255, 0) 5.38%, #FFF 99.5%), #FFECB4;
}
.ms-walk-challenge__state-top3--item.rank-2 {
  background: linear-gradient(159deg, rgba(255, 255, 255, 0) 5.38%, rgba(255, 255, 255, 0.8) 99.5%), #E8EAEE;
}
.ms-walk-challenge__state-top3--item.rank-3 {
  background: linear-gradient(159deg, rgba(255, 255, 255, 0) 5.38%, rgba(255, 255, 255, 0.8) 99.5%), #F3E0CF;
}
.ms-walk-challenge__state-top3--icon {
  transform: translateY(-1px);
}
.ms-walk-challenge__state-top3--name {
  color: var(--color-fg-neutral-subtle, #5f646c);
  margin-top: 4px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__state-top3--point {
  color: var(--color-fg-neutral-solid, #222832);
  margin-top: 2px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__state-top3--label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
.ms-walk-challenge__state-ranking--sheet .bottom-sheet__content .bottom-sheet__body {
  overflow: hidden;
  padding-bottom: 28px;
}
.ms-walk-challenge__state-ranking--sheet .tab-component__content {
  max-height: 590px;
  overflow-y: auto;
}
.ms-walk-challenge__state-ranking .ms-walk-challenge__ranking-box {
  margin-top: 20px;
}
.ms-walk-challenge__state-ranking .ms-walk-challenge__ranking-list {
  padding: 8px;
}
.ms-walk-challenge__state-ranking .ms-walk-challenge__ranking-item {
  padding: 10px 12px;
}
.ms-walk-challenge__state-score {
  margin-top: 40px;
}
.ms-walk-challenge__state-score--box {
  border-radius: 16px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  margin-top: 12px;
}
.ms-walk-challenge__state-score--list {
  padding: 0 20px;
}

/* 롯데체크인 :: 포인트 뽑기 */
.ms-walk-challenge__point-draw {
  position: relative;
  z-index: 2;
}
.ms-walk-challenge__point-draw--img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 485px;
  width: 68.6%;
  margin: 0 auto;
  padding-right: 0;
  padding-left: 0;
  padding: 20px 0;
  opacity: 0;
}
.ms-walk-challenge__point-draw--img.loaded {
  opacity: 1;
}
.ms-walk-challenge__point-draw--img img, .ms-walk-challenge__point-draw--img canvas {
  width: 100%;
  height: 100%;
  min-width: 120px;
  min-height: 120px;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* 롯데체크인 :: 출석체크 */
.ms-walk-challenge__attendance .container {
  background-color: transparent;
}
.ms-walk-challenge__attendance-select {
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: 32px;
}
.ms-walk-challenge__attendance-select--label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background-color: var(--color-fg-neutral-solid, #222832);
  color: var(--color-fg-neutral-inverted, #ffffff);
  border-radius: 10px;
  z-index: 2;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-walk-challenge__attendance-select--item {
  flex: 1;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.04);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-thin, rgba(251, 24, 34, 0.1));
}
.ms-walk-challenge__attendance-select--item.selected {
  position: relative;
  z-index: 0;
  border-color: transparent;
}
.ms-walk-challenge__attendance-select--item.selected::before {
  content: "";
  position: absolute;
  border-radius: inherit; /* 부모와 동일한 radius */
  padding: 1.5px; /* border 두께 (여기 조절) */
  background: var(--color-gradient-special, linear-gradient(114deg, #C75BDC 0%, #FF4769 50%, #FB1822 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1; /* 박스 뒤로 보내기 */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  left: -1px;
  top: -1px;
}
.ms-walk-challenge__attendance-select--item.unselected {
  opacity: 0.5;
}
.ms-walk-challenge__attendance-select--desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-walk-challenge__attendance-select--title {
  margin-top: 2px;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-walk-challenge__attendance-select--img {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.ms-walk-challenge__attendance-select--img img {
  width: 88px;
}
.ms-walk-challenge__attendance-calendar .calendar-container {
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 16px;
  padding: 24px 16px;
  width: 100%;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-walk-challenge__attendance-calendar .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 10px;
}
.ms-walk-challenge__attendance-calendar .month-title {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.ms-walk-challenge__attendance-calendar .attendance-count {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-walk-challenge__attendance-calendar .weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ms-walk-challenge__attendance-calendar .weekday {
  text-align: center;
  padding: 12px 4px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
@media screen and (max-width: 359px) {
  .ms-walk-challenge__attendance-calendar .weekday {
    font-size: var(--font-caption-3-size, 0.75rem);
    font-weight: var(--font-caption-3-m-weight, 500);
    line-height: var(--font-caption-3-line-height, 1.4);
    letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  }
}
.ms-walk-challenge__attendance-calendar .days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ms-walk-challenge__attendance-calendar .day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 8px 2px;
}
.ms-walk-challenge__attendance-calendar .date-number {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
@media screen and (max-width: 359px) {
  .ms-walk-challenge__attendance-calendar .date-number {
    font-size: var(--font-title-3-size, 0.875rem);
    font-weight: var(--font-title-3-weight, 600);
    line-height: var(--font-title-3-line-height, 1.4);
    letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
  }
}
.ms-walk-challenge__attendance-calendar .day.other-month {
  color: var(--color-fg-neutral-weak, #b2b6ba);
}
.ms-walk-challenge__attendance-calendar .day.marked .date-number {
  background: var(--color-red-100, #ffddde);
}
.ms-walk-challenge__attendance-calendar .day.marked.draw .date-number {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border-neutral-inverted, #ffffff);
  border-radius: 8px;
}
.ms-walk-challenge__attendance-calendar .day.marked.draw .date-number::before {
  border-radius: 10px;
}
.ms-walk-challenge__attendance-calendar .day.draw .date-number {
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.ms-walk-challenge__attendance-calendar .day.draw .date-number::before {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px;
}
.ms-walk-challenge__attendance-calendar .day.today .date-number {
  background: var(--color-bg-brand-solid, #fb1822);
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.ms-walk-challenge__attendance-calendar .points {
  height: 1.4em;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
@media screen and (max-width: 359px) {
  .ms-walk-challenge__attendance-calendar .points {
    font-size: 9px;
  }
}
.ms-walk-challenge__attendance-calendar .legend {
  display: flex;
  gap: 16px;
  padding: 4px 8px;
}
.ms-walk-challenge__attendance-calendar .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-walk-challenge__attendance-calendar .legend-box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}
.ms-walk-challenge__attendance-calendar .legend-box.today {
  background: #ff3b30;
}
.ms-walk-challenge__attendance-calendar .legend-box.marked {
  background: var(--color-red-100, #ffddde);
}
.ms-walk-challenge__attendance-calendar .legend-box.draw {
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.ms-walk-challenge__attendance-calendar .legend-box.draw::before {
  padding: 1.5px;
}
.ms-walk-challenge__attendance-ing {
  position: relative;
  z-index: 2;
}
.ms-walk-challenge__attendance-ing--img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 485px;
  width: 68.6%;
  margin: 0 auto;
  padding: 20px 0;
  opacity: 0;
}
.ms-walk-challenge__attendance-ing--img.loaded {
  opacity: 1;
}
.ms-walk-challenge__attendance-ing--img img, .ms-walk-challenge__attendance-ing--img canvas {
  width: 100%;
  height: 100%;
  min-width: 120px;
  min-height: 120px;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* 롯데체크인 :: 당첨배너 */
.ms-walk-challenge__winner-banner .banner-band__title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}

.culture-center {
  overflow: hidden;
}
.culture-section {
  margin-bottom: 40px;
}
.culture-section:last-of-type {
  margin-bottom: 0;
}
.culture__box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border-radius: 16px;
  background-color: #ffffff;
}
.culture-roulette__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.culture-roulette__title-wrap {
  width: 100%;
  text-align: center;
  padding-top: 8px;
}
.culture-roulette__title {
  margin-bottom: 8px;
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.culture-roulette__desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.culture-roulette__img-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.culture-roulette__img-wrap img {
  width: 200px;
  height: 160px;
}
.culture-roulette__inner {
  width: 100%;
  max-height: 72px;
  overflow: hidden;
}
.culture-roulette__looping {
  width: 100%;
  overflow: hidden;
  border-top: 1px dashed var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.culture-roulette__looping--wrap {
  overflow: hidden;
  animation: looping 20s linear infinite;
}
.culture-roulette__looping--item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.culture-roulette__looping--item .rank {
  color: var(--color-fg-accent-purple-solid-600, #7430f7);
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.culture-roulette__btn-wrap {
  position: relative;
  width: 100%;
}
.culture-roulette__btn-wrap .tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}
.culture-roulette .unit-info__text-list {
  width: 100%;
}
.culture-content__thumb {
  position: relative;
}
.culture-content__thumb .swiper-slide {
  width: fit-content !important;
}
.culture-content__thumb-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f3f5;
  border-radius: 12px;
  gap: 10px;
  width: 100px;
  height: 56px;
  position: relative;
}
.culture-content__thumb-item img {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0.48;
}
.culture-content__thumb-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fb1822;
  border-radius: 12px;
  z-index: 1;
  opacity: 0;
}
.culture-content__thumb-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 16px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M7.21913 9.02391C7.61946 9.52432 8.38054 9.52432 8.78087 9.02391L16 0L0 0L7.21913 9.02391Z' fill='%23FB1822'/%3E%3C/svg%3E");
  z-index: 1;
  opacity: 0;
}
.culture-content__thumb-item.active img {
  opacity: 1;
}
.culture-content__thumb-item.active::after, .culture-content__thumb-item.active::before {
  opacity: 1;
}
.culture-content__thumb-tit {
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
}
.culture-content__main__item {
  display: none;
}
.culture-content__main__item.active {
  display: block;
}
.culture-content__main__item--header {
  display: block;
  padding: 20px 20px 12px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-neutral-inverted, #ffffff);
}
.culture-content__main__item--header .list-component {
  padding: 0 !important;
  margin-bottom: 12px;
}
.culture-content__main__item--header .img-wrap {
  border-radius: 12px;
  overflow: hidden;
}
.culture-content__main__item--header .img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.culture-content__main__item--header .element-list-txt {
  padding: 16px 0;
}
.culture-content__main__item--header .element-list-txt .accent {
  color: var(--color-fg-accent-red-solid-800, #ae060d);
}
.culture-content__main__item--header .element-list-txt__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  margin-bottom: 2px;
}
.culture-content__main__item--header .element-list-txt__desc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.culture-content__main__item--header .element-list-txt__desc span:not(:last-child) {
  position: relative;
  padding-right: 4px;
}
.culture-content__main__item--header .element-list-txt__desc span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.culture-content__main__item--bottom .banner-band {
  position: relative;
}
.culture-content__main__item--bottom .banner-band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  width: calc(100% - 12px * 2);
  height: 1px;
  border: thin dashed var(--color-border-neutral-muted-weak, #dee1e4);
}
.culture-class__swiper--item {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
}
.culture-class__swiper--item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.culture-class__swiper--item__txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  color: var(--color-fg-neutral-inverted, #ffffff);
  z-index: 2;
}
.culture-class__swiper--item__txt--brand {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.culture-class__swiper--item__txt--title {
  font-size: var(--font-heading-2-size, 1.75rem);
  font-weight: var(--font-heading-2-weight, 600);
  line-height: var(--font-heading-2-line-height, 1.4);
  letter-spacing: var(--font-heading-2-letter-spacing, -0.005em);
}
.culture-class__list > *:not(:last-child) {
  margin-bottom: 8px;
}
.culture-class__list .list-component__container {
  height: 92px;
}
.culture-class__list .list-component__thumb {
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.culture-class__list .list-component__info {
  flex: none;
  width: calc(100% - 44px - 16px);
}
.culture-class__list .list-component__info .list-component__content {
  width: calc(100% - 44px - 16px - 44px - 16px);
}
.culture-class__list .list-component__content {
  flex: none;
}
.culture-class__list .list-component__tit {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
}
.culture-class__list .list-component .banner-point {
  display: inline-flex;
  min-width: 44px;
  justify-content: flex-end;
}
.culture-donation__desc {
  display: flex;
  align-items: center;
}
.culture-donation__desc img {
  width: 20px;
  height: 20px;
  margin-right: 2px;
  margin-left: 4px;
}
.culture-donation-detail .btn {
  width: fit-content;
}

/*-------------- Mobile Web ---------------*/
.culture-roulette__app .list-component__container {
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}

.ms-lotto__mission-top {
  padding: 24px 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ms-lotto__mission-top .banner-box {
  position: relative;
}
.ms-lotto__mission-top .banner-box .tooltip {
  position: absolute;
  top: -17px;
  left: 7px;
  z-index: 9;
}
.ms-lotto__mission-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-lotto__mission-list .list-component__container {
  padding: 20px 16px;
  height: auto;
}
.ms-lotto__mission-list .list-component__container .list-component {
  padding: 0;
}
.ms-lotto__mission-list .list-component__container .list-component__info {
  gap: 12px;
}
.ms-lotto__mission-list .list-component__container .list-component__content {
  gap: 2px;
}
.ms-lotto__mission-list .list-component__container .list-component__tit {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-lotto__mission-list .list-component__container .list-component__tit .info-icon {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
  width: 16px;
  height: 16px;
}
.ms-lotto__mission-list .list-component__container .list-component__tit .info-icon svg {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 320px) {
  .ms-lotto__mission-list .list-component__container .list-component__txt .line2 {
    display: block;
  }
}
.ms-lotto__mission-list .list-component__container .list-component__btn {
  flex-shrink: 0;
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__info {
  flex: none;
  width: calc(100% - 91px - 16px);
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__content {
  min-width: 0;
  width: calc(100% - 44px - 16px);
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__tit {
  display: block;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__tit .btn-info {
  transform: translateY(3px);
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__txt {
  width: 100%;
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__txt span.line1, .ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__txt span.line2 {
  display: block;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
}
@media screen and (max-width: 360px) {
  .ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__txt .list-component__desc {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__txt .list-component__desc span {
    padding: 0;
  }
  .ms-lotto__mission-list .list-component__container .list-component .list-component__info .list-component__txt .list-component__desc span::before {
    display: none;
  }
}
.ms-lotto__mission-list .list-component__container .list-component .list-component__btn {
  min-width: 91px;
  display: flex;
  justify-content: flex-end;
}
.ms-lotto__mission-list .list-component__container[data-type=active] {
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
  z-index: auto;
}
.ms-lotto__mission-list .list-component__container[data-type=active]::before {
  z-index: 1;
}
.ms-lotto__mission-list .list-component__container[data-type=active] .list-component {
  position: relative;
  z-index: 2;
}
.ms-lotto__mission-list .list-component__container[data-type=active] .list-component__btn {
  position: relative;
}
.ms-lotto__mission-list .list-component__container[data-type=active] .list-component__btn .tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
}
.ms-lotto__mission-notice--img {
  position: relative;
  border-radius: 12px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
}
.ms-lotto__mission-notice--img .icon {
  position: absolute;
  bottom: -6px;
  right: -3px;
}
.ms-lotto__mission-notice--img .icon img {
  max-width: none;
}
.ms-lotto__mission-notice--img .img img {
  width: 100%;
  max-width: none;
}
.ms-lotto__mission-notice--title {
  margin-top: 24px;
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-lotto__mission-notice--text {
  margin-top: 8px;
  text-align: center;
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-m-weight, 500);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.ms-lotto__mission-invite--sheet .ms-lotto__number {
  padding: 8px 0;
  justify-content: center;
  gap: 1px;
}
.ms-lotto__mission-network-banner {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  max-width: 761px;
  margin: 0 auto;
}

/*-------------- Mobile Web ---------------*/
.ms-lotto__mw-content .img-box img {
  width: 100%;
}

.content:has(.ms-lotto__result-round, .ms-lotto__mission-content, .ms-lotto__mylotto-content) .common-footer__wrapper {
  padding-bottom: 48px;
}

.ms-lotto__mylotto-content .accordion {
  border: 0;
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 0;
}
.ms-lotto__mylotto-content .accordion__trigger {
  padding: 20px 0;
}
.ms-lotto__mylotto-content .accordion__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-content .accordion__title div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-lotto__mylotto-content .accordion__icon {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.ms-lotto__mylotto-content .accordion__body {
  padding: 0;
  border: 0;
}
.ms-lotto__mylotto-list {
  padding: 0 4px;
}
.ms-lotto__mylotto-list--item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-lotto__mylotto-list--item:first-child {
  border-top: 0;
}
.ms-lotto__mylotto-list--state {
  display: flex;
  align-items: center;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--state .state {
  position: relative;
  display: block;
  margin-left: 6px;
  padding-left: calc(6px + 1px);
  color: var(--color-fg-accent-red-solid-800, #ae060d);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--state .state::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.ms-lotto__mylotto-list--date {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 20px;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-r-weight, 400);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--date + .ms-lotto__mylotto-list--item {
  border-top: 0;
}
.ms-lotto__mylotto-list--time {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 4px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--result {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ms-lotto__mylotto-list--grade {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--grade img {
  width: 20px;
}
.ms-lotto__mylotto-list--grade-fail {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--congratulation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: var(--color-bg-brand-weak, #fff0f1);
}
.ms-lotto__mylotto-list--congratulation .icon img {
  width: 16px;
}
.ms-lotto__mylotto-list--congratulation .txt {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list--congratulation .txt .red {
  color: var(--color-fg-brand-solid, #fb1822);
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.ms-lotto__mylotto-list + .ms-lotto__mylotto-list {
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.ms-lotto__mylotto-list .ms-lotto__number {
  justify-content: flex-end;
  gap: 1px;
}

.ms-lotto__result-round {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.ms-lotto__result-round svg {
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.ms-lotto__result-round--arrow {
  position: relative;
}
.ms-lotto__result-round--arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.ms-lotto__result-round--arrow svg, .ms-lotto__result-round--arrow img {
  width: 20px;
  height: 20px;
}
.ms-lotto__result-round--select {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.ms-lotto__result-round--select .icon {
  position: relative;
}
.ms-lotto__result-round--select .icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.ms-lotto__result-round--select svg {
  width: 16px;
  height: 16px;
}
.ms-lotto__result-number {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ms-lotto__result-number--box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-lotto__result-number--label {
  color: var(--color-fg-neutral-subtle, #5f646c);
  text-align: center;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-lotto__result-number--icon {
  display: flex;
  align-items: flex-end;
}
.ms-lotto__result-number--icon svg, .ms-lotto__result-number--icon img {
  width: 20px;
  height: 20px;
  margin: 6px 0;
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}
.ms-lotto__result-number .ms-lotto__number {
  justify-content: center;
}

.ms-lotto__result--arrow {
  position: relative;
}
.ms-lotto__result--arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  min-width: 48px;
  min-height: 48px;
}
.ms-lotto__result--arrow svg, .ms-lotto__result--arrow img {
  width: 20px;
  height: 20px;
}

.ms-lotto__quiz-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-lotto__quiz-item .list-component__tit {
  max-height: 2.8em;
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.month-benefit {
  padding-bottom: 48px;
}
.month-benefit__box {
  padding: 20px;
}
.month-benefit__title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.month-benefit__title-wrap svg, .month-benefit__title-wrap .info-icon {
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.month-benefit .accordion__trigger {
  padding: 0;
}
.month-benefit .accordion__title {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.month-benefit .accordion__body {
  padding: 0;
}
.month-benefit__accordion__inner-wrap {
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
}
.month-benefit__accordion__inner-wrap .unit-point-content .unit-point-content__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  white-space: normal;
}
.month-benefit__accordion__inner-wrap .unit-point-content .unit-point-content__desc-text {
  color: var(--color-fg-neutral-solid, #222832);
}
.month-benefit__accordion__inner {
  padding: 0 20px;
}
.month-benefit .charge-benefit__banner-swiper .swiper-slide {
  height: auto;
}
.month-benefit .charge-benefit__banner-swiper .swiper-slide .list-component__container {
  height: 100%;
}
.month-benefit .scrollable-content {
  overflow-x: scroll;
}
.month-benefit .scrollable-content::-webkit-scrollbar {
  display: none;
}
.month-benefit__brand__inner {
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.month-benefit__brand__list {
  display: grid;
  gap: 16px 12px;
  grid-template-columns: repeat(5, 64px);
  grid-template-rows: repeat(2, 1fr);
  padding-top: 20px;
}
.month-benefit__brand__list.overcase {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: auto;
}
.month-benefit__brand__list[data-columns="4"] {
  grid-template-columns: repeat(4, 81.5px);
}
.month-benefit__brand__item {
  position: relative;
}
.month-benefit__brand__item--more .banner-vertical {
  gap: 8px;
  justify-content: center;
}

.lotting-benefit > .container {
  padding-bottom: 40px;
}
.lotting-benefit__section:not(:first-child) {
  margin-top: 40px;
}
.lotting-benefit__section:not(:first-child) + .lotting-benefit__section:not(:first-child).unit-info {
  margin-top: 12px;
}
.lotting-benefit__box {
  padding: 20px;
}
.lotting-benefit__box--gray {
  border-radius: 10px;
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
}
.lotting-benefit .event-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lotting-benefit .event-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.lotting-benefit .event-card__header .label {
  flex-shrink: 0;
}
.lotting-benefit .event-info__title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  margin-bottom: 6px;
}
.lotting-benefit .event-info__title.point {
  color: red;
  text-align: center;
}
.lotting-benefit .event-info__desc {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.lotting-benefit .event-info__sub-desc {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
  text-align: center;
}
.lotting-benefit .event-info__date {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.lotting-benefit .event-info__date + .event-info__title {
  margin-top: 10px;
}
.lotting-benefit .event-info__canvas-wrap {
  width: 112px;
  height: 112px;
  margin: 0 auto;
  margin-bottom: 8px;
}
.lotting-benefit .event-info__canvas-wrap canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lotting-benefit .progress-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.lotting-benefit .progress-card__header {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.lotting-benefit .progress-card__subtitle {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  margin-bottom: 6px;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.lotting-benefit .progress-card__amount {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap {
  position: relative;
  margin-top: 40px;
  margin-bottom: 8px;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="90"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="90"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="90"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="91"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="91"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="91"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="92"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="92"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="92"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="93"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="93"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="93"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="94"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="94"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="94"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="95"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="95"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="95"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="96"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="96"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="96"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="97"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="97"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="97"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="98"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="98"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="98"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="99"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="99"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="99"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="100"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(0, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="100"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(0, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="100"] .progress__bar--progress-wrap .progress__marker .tooltip[data-arrow-pos=bottom-center]::after {
  left: initial !important;
  top: 100% !important;
  right: 6px !important;
  transform: translate(0, 0) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="0"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="0"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="0"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="1"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="1"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="1"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="2"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="2"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="2"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="3"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="3"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="3"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="4"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="4"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="4"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="5"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="5"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="5"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="6"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="6"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="6"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="7"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="7"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="7"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="8"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="8"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="8"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="9"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="9"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="9"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="10"] .progress__bar--progress-wrap .progress__bar--progress:after {
  transform: translate(50%, -50%);
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="10"] .progress__bar--progress-wrap .progress__marker {
  transform: translate(75%, calc(-100% - 10px)) !important;
}
.lotting-benefit .progress-card__graph .progress__bar-wrap[data-progress="10"] .progress__bar--progress-wrap .tooltip[data-arrow-pos=bottom-center]::after {
  top: 100%;
  left: 6px;
  transform: translate(0, 0);
}
.lotting-benefit .progress-card__graph .progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
}
.lotting-benefit .progress-card__graph .progress__bar--default {
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
}
.lotting-benefit .progress-card__graph .progress__bar--progress-wrap {
  position: relative;
  width: var(--progress-width, 0%);
  max-width: 100%;
}
.lotting-benefit .progress-card__graph .progress__bar--progress {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-icon-brand-solid, #fb1822);
}
.lotting-benefit .progress-card__graph .progress__bar--progress:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6' fill='white' stroke='%23FB1822' stroke-width='4'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.lotting-benefit .progress-card__graph .progress__marker {
  top: 0;
  right: 0;
  position: absolute;
  width: fit-content;
  height: fit-content;
  transform: translate(50%, calc(-100% - 10px));
}
.lotting-benefit .progress-card__graph .progress__txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.lotting-benefit .progress-card__btn-wrap {
  position: relative;
  width: 100%;
}
.lotting-benefit .progress-card__btn-wrap button, .lotting-benefit .progress-card__btn-wrap a {
  width: 100%;
}
.lotting-benefit .progress-card__btn-wrap .tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-50% - 4px));
  z-index: 10;
}
.lotting-benefit .mission .title-component__button .info-popup__wrapper {
  position: relative;
}
.lotting-benefit .mission .title-component__button .info-popup__wrapper .info-popup {
  right: 0;
  left: auto !important;
}
.lotting-benefit .mission .info-icon {
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.lotting-benefit .mission-progress {
  border-radius: 12px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.lotting-benefit .mission-item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.lotting-benefit .mission-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.lotting-benefit .mission-item__content-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lotting-benefit .mission-item__txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lotting-benefit .mission-item__title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.lotting-benefit .mission-item__title i, .lotting-benefit .mission-item__title svg {
  width: 20px;
  height: 20px;
}
.lotting-benefit .mission-item__subtitle {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.lotting-benefit .mission-item__value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.lotting-benefit .mission-item__graph {
  position: relative;
  width: 36.967%;
  height: auto;
  aspect-ratio: 1/1;
  max-width: 96px;
  max-height: 96px;
  flex-shrink: 0;
  /* 진행률 circle의 stroke-dasharray와 stroke-dashoffset 제어 */
  /* 기본 그라데이션 - JavaScript에서 동적으로 설정됨 */
}
.lotting-benefit .mission-item__graph .progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
  font-size: min(5.128vw, 20px);
}
.lotting-benefit .mission-item__graph .progress-text .unit {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.lotting-benefit .mission-item__graph .progress-ring {
  transform: rotate(-90deg);
}
.lotting-benefit .mission-item__graph .progress-ring__circle {
  transition: stroke 0.3s ease;
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}
.lotting-benefit .mission-item__graph .progress-ring__background {
  stroke: rgba(0, 0, 0, 0.08);
}
.lotting-benefit .mission-item__graph .progress-container {
  width: 100%;
  height: 100%;
}
.lotting-benefit .mission-item__graph .progress-container svg {
  width: 100%;
  height: 100%;
}
.lotting-benefit .mission-item__graph .progress-path {
  stroke-dasharray: 282.74;
  stroke-dashoffset: calc(282.74 - 282.74 / (100 / var(--mission-progress, 0)));
  transition: stroke-dashoffset 0.3s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}
.lotting-benefit .mission-item__graph .progress-container:not(.progress-100) .progress-path {
  stroke: #d0d0d0 !important;
}
.lotting-benefit .unit-info {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--color-bg-banner-default-gray-50, rgba(5, 55, 88, 0.06));
}
.lotting-benefit .banner-band-btn {
  width: 100%;
}

.charge-benefit {
  position: relative;
}
.charge-benefit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 54px);
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  z-index: -1;
}
.charge-benefit .hidden {
  display: none;
}
.charge-benefit__box {
  border-radius: 16px;
  background-color: var(--color-bg-neutral-inverted, #ffffff);
}
.charge-benefit__tab {
  width: 100%;
  height: 46px;
  z-index: 1000;
  padding: 0 !important;
}
.charge-benefit__tab .tab-component {
  position: relative;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
}
.charge-benefit__tab .tab-component .tab-component__inner {
  background: none !important;
}
.charge-benefit__section:not(:last-child) {
  padding-bottom: 40px;
}
.charge-benefit__preview__header {
  padding: 16px 20px;
}
.charge-benefit__preview__top-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.charge-benefit__preview__top-wrap .more-btn {
  display: block;
  width: 16px;
  height: 16px;
  color: #222832;
}
.charge-benefit__preview__top-wrap .more-btn svg {
  width: 100%;
  height: 100%;
}
.charge-benefit__preview__desc {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.charge-benefit__preview__desc .color-gray {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.charge-benefit__preview__desc span {
  position: relative;
}
.charge-benefit__preview__desc span:not(:last-child) {
  padding-right: 6px;
  margin-right: 6px;
}
.charge-benefit__preview__desc span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.charge-benefit__preview__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: space-between;
}
.charge-benefit__preview__info__amount {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  word-break: break-word;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.charge-benefit__preview__bottom {
  display: flex;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.charge-benefit__preview__bottom > * {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  text-align: center;
  color: var(--color-gray-700);
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.charge-benefit__preview__bottom > * span {
  display: inline-block;
}
.charge-benefit__preview__bottom > *:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.charge-benefit__preview .label {
  gap: 2px;
}
.charge-benefit__unit-info__container {
  padding: 24px 0 48px 0;
}
.charge-benefit__unit-info__container .container {
  background-color: transparent;
}
.charge-benefit__unit-info--button {
  text-align: center;
}
.charge-benefit__unit-info--button .btn-txt {
  margin: 0 auto;
}

.usage-details-info .usage-detail__item {
  width: 100%;
}
.usage-details-info__bottom-sheet .bottom-sheet__box {
  padding: 20px;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
}

/*-----------------------*/
/*포인트 상용 순서 설정     */
/* 251205 - 공통 - 환경설정으로 이관 */
/*-----------------------*/
/*-----------------------*/
/*롯데카드 TOUCH */
/*-----------------------*/
.payment-touch__tab-content .list-component .list-component__txt:last-child {
  margin-top: 8px;
}
.payment-touch__tab-content--benefit .list-component .list-component__txt:first-child {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.payment-touch__tab-content--benefit .list-component .list-component__txt:last-child {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-r-weight, 400);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
.payment-touch__tab-content--partner .list-component .list-component__txt:last-child {
  margin-top: 0px;
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}

.payment-touch-detail__img-wrap img {
  width: 100%;
  max-width: 350px;
  height: auto;
  margin: 0 auto;
}

/*-----------------------*/
/* 플러스 페이지 */
/*-----------------------*/
.payment-plus__tab {
  height: 45px;
}
.payment-plus__content {
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
  background: var(--color-bg-neutral-inverted, #ffffff);
  overflow: hidden;
}
.payment-plus__bottom-sheet .tooltip {
  margin: 0 auto;
}
.payment-plus__bottom-sheet .bottom-sheet__point-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.payment-plus__bottom-sheet .bottom-sheet__point-wrap .title-wrap .sub-tit {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.payment-plus__bottom-sheet .bottom-sheet__point-wrap .title-wrap .point {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
}
.payment-plus__bottom-sheet .bottom-sheet__notice-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.payment-plus__bottom-sheet .bottom-sheet__notice-wrap .element-list-text__text svg {
  width: 20px;
  height: 20px;
  color: var(--color-icon-neutral-muted, #b2b6ba);
}

.payment-plus-detail__img-wrap {
  max-width: 240px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*-----------------------*/
/* 바텀시트 - 자동충전 설정 */
/*-----------------------*/
.payment-bottom-sheet__auto-charge .title-component__title {
  color: var(--color-fg-neutral-solid, #222832);
}
.payment-bottom-sheet__auto-charge .notice {
  position: relative;
  color: var(--color-fg-semantic-warning, #ff333c);
  padding-left: 20px;
  word-wrap: break-word;
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-r-weight, 400);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  padding-left: 17px;
}
.payment-bottom-sheet__auto-charge .notice::before {
  content: "";
  position: absolute;
  color: var(--color-fg-semantic-warning, #ff333c);
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 1.4em;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6929 5.7229C17.0528 1.64841 22.9481 1.64842 25.3081 5.7229L37.3374 26.4924C39.7024 30.5765 36.7412 35.6672 32.0298 35.6672H7.97119C3.25979 35.6672 0.29854 30.5765 2.66357 26.4924L14.6929 5.7229ZM22.7124 7.22681C21.5081 5.14748 18.4929 5.14748 17.2886 7.22681L5.25928 27.9944C4.0605 30.0641 5.55419 32.6662 7.97119 32.6663H32.0298C34.4468 32.6662 35.9405 30.0641 34.7417 27.9944L22.7124 7.22681ZM20.0005 25.1506C20.8287 25.1509 21.5005 25.8224 21.5005 26.6506C21.5003 27.4787 20.8286 28.1504 20.0005 28.1506C19.1722 28.1506 18.5007 27.4789 18.5005 26.6506C18.5005 25.8222 19.1721 25.1506 20.0005 25.1506ZM20.0005 11.6672C20.8336 11.6675 21.5005 12.3506 21.5005 13.2004V21.7834C21.5005 22.6333 20.8336 23.3164 20.0005 23.3167C19.1672 23.3167 18.5005 22.6334 18.5005 21.7834V13.2004C18.5005 12.3504 19.1672 11.6672 20.0005 11.6672Z' fill='%23FB1822'/%3E%3C/svg%3E%0A");
  background-size: cover;
}
.payment-bottom-sheet__auto-charge .notice:before {
  width: 12px;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#point-gift .hidden,
.point-gift .hidden {
  display: none;
}
#point-gift .color--red,
.point-gift .color--red {
  color: #ff0000;
}
#point-gift .color--gray,
.point-gift .color--gray {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
#point-gift .element--center,
.point-gift .element--center {
  display: flex;
  align-items: center;
  justify-content: center;
}
#point-gift .element--line,
.point-gift .element--line {
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}

.point-gift .hidden {
  display: none;
}
.point-gift .point-gift__content__title__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 16px;
}
.point-gift .point-gift__content__box--title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.point-gift .point-gift__content__box--title-desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  font-weight: 600;
}
.point-gift .point-gift__content__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.point-gift .point-gift__content__list [data-color=gray] svg {
  color: var(--color-icon-neutral-subtle, #898d93);
}
.point-gift .point-gift__content__list .btn-flex {
  display: flex;
  align-items: center;
}
.point-gift .point-gift__content__list .btn-flex--center {
  justify-content: center;
  gap: 4px;
}
.point-gift .point-gift__content__list .btn-flex--between {
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  cursor: initial;
}
.point-gift .point-gift__content__list .btn-flex--between span {
  max-width: 94%;
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.point-gift .point-gift__content__list .btn-flex svg {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.btn[data-color=gray] .point-gift .point-gift__content__list .btn-flex svg {
  color: var(--color-icon-neutral-subtle, #898d93);
}
.point-gift .hidden {
  display: none;
}
.point-gift .point-gift__message-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 12px;
}
.point-gift .point-gift__message-card__image {
  flex-shrink: 0;
  width: 64px;
  height: 38px;
  border-radius: 4px;
  overflow: hidden;
}
.point-gift .point-gift__message-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.point-gift .point-gift__message-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 38px;
}
.point-gift .point-gift__message-card__text {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  line-height: 1.4;
  letter-spacing: -0.065px;
  margin: 0;
  word-break: break-all;
}
.point-gift__content__title__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 16px;
}
.point-gift__content__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.point-gift__content__list__item .element-list-text[data-button=true] button .element-list-text__icon {
  color: var(--color-icon-neutral-solid, #222832);
}
.point-gift__content__box--title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.point-gift__content__box--title-desc {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.point-gift__bottom-button {
  margin-bottom: 16px;
}
.bottom-button:has(.point-gift__bottom-button) {
  border-top: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  background-color: #ffffff;
  padding-top: 18px;
}
.point-gift__bottom-button .tooltip {
  position: absolute;
  left: -12px;
  transform: translateX(-100%);
}
.point-gift__bottom-button .bottom-button__content__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.point-gift__bottom-button .bottom-button__content__box:nth-child(1) {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  margin-bottom: 8px;
}
.point-gift__bottom-button .bottom-button__content__box:nth-child(2) {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.point-gift__bottom-button .bottom-button__content__box--value {
  position: relative;
  display: flex;
  gap: 8px;
}
.point-gift .form-container {
  gap: 40px;
}

.point-gift__content__list__item__message--edit {
  white-space: inherit;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}
.point-gift__content__list__item__message--edit .point-gift__message-trigger__text {
  word-break: break-word;
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.point-gift__content__list__item__message--edit .point-gift__message-trigger__text.color-gray {
  color: var(--color-fg-neutral-muted-weak, #9da1a7);
}

.point-gift__message__bottom-sheet__inner .textarea__info {
  padding-bottom: 0 !important;
}

.recipient-selection .recipient-check-content .tab-component .container {
  padding-right: 0;
  padding-left: 0;
}
.recipient-selection .recipient-check__list {
  padding: 12px 0;
}
.recipient-selection .recipient-check__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.recipient-selection .recipient-check__tab {
  height: 45px;
  margin: 0 -20px;
}
.recipient-selection .recipient-check__tab .tab-component__inner {
  padding: 0 20px;
}
.recipient-selection .recipient__add-accordion__top__more-btn span {
  display: block;
}
.recipient-selection .recipient__add-accordion__top__more-btn .icon {
  transform: rotate(180deg);
}
.recipient-selection .recipient__add-accordion__top__more-btn.active span {
  display: none;
}
.recipient-selection .recipient__add-accordion__top__more-btn.active .icon {
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
}
.recipient-selection .recipient__add-accordion__content {
  transition: 0.4s linear;
}
.recipient-selection .recipient__add-accordion .accordion__trigger {
  padding: 12px 0 16px 0;
}
.recipient-selection .recipient__add-accordion .accordion__trigger .receiver-header__right {
  display: flex;
  gap: 8px;
}
.recipient-selection .recipient__add-accordion .accordion__trigger .receiver-header__right__info {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.recipient-selection .recipient__add-accordion .accordion__trigger .receiver-header__right__info .summary__count {
  color: var(--color-fg-brand-solid, #fb1822);
}
.recipient-selection .recipient__content-list {
  padding: 24px 0;
}
.recipient-selection .recipient__content-list__item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.recipient-selection .recipient__content-list__item__name {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  word-break: break-all;
}
.recipient-selection .recipient__content-list__item__phone {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.recipient-selection .recipient__content-list[data-type=group] .recipient__content-list__group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.recipient-selection .recipient__content-list[data-type=group] .recipient__content-list__group:not(:last-child) {
  margin-bottom: 32px;
}
.recipient-selection .recipient__content-list[data-type=group] .recipient__content-list__index {
  width: 48px;
  flex-shrink: 0;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.recipient-selection .recipient__content-list[data-type=group] .recipient__content-list__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.recipient-selection .recipient__content-list[data-type=recent] .recipient__content-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recipient-selection .recipient__content-list[data-type=recent] .recipient__content-list__item:not(:last-child) {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
}
.recipient-selection .recipient__content-list[data-type=recent] .recipient__content-list__item__checkbox .checkbox__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding-right: 4px;
}
.recipient-selection .recipient__content-list[data-type=recent] .recipient__content-list__item__checkbox .checkbox__label::after, .recipient-selection .recipient__content-list[data-type=recent] .recipient__content-list__item__checkbox .checkbox__label::before {
  top: 50%;
}
.recipient-selection .recipient__content-list[data-type=recent] .recipient__content-list__item {
  flex: 1;
}
.recipient-selection .recipient__content-list .checkbox__box .checkbox__label:after, .recipient-selection .recipient__content-list .checkbox__box .checkbox__label::before {
  top: 50% !important;
  transform: translate(-12px, -50%) !important;
}
.recipient-selection .title-component {
  padding-bottom: 0;
}

.point-gift-complete {
  padding-bottom: var(--bottom-button-height);
}
.point-gift-complete .point-gift-complete__card-accordion__header .banner-band__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.point-gift-complete .point-gift-complete__card-accordion__header.active + .point-gift-complete__card-accordion__content {
  height: auto;
}
.point-gift-complete .point-gift-complete__card-accordion__header.active .banner-band__arrow svg {
  transform: rotate(180deg);
}
.point-gift-complete .point-gift-complete__card-accordion__content {
  height: 0;
  overflow: hidden;
}
.point-gift-complete .point-gift-complete__card-accordion__inner {
  padding: 0 24px 16px;
}
.point-gift-complete .point-gift-complete__card-accordion__inner .img-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 278/171;
  border-radius: 12px;
  overflow: hidden;
}
.point-gift-complete .point-gift-complete__card-accordion__inner .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.point-gift-complete .point-gift-complete__card-accordion__text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  margin-top: 12px;
  color: var(--color-fg-neutral-solid, #222832);
  word-break: break-all;
}
.point-gift-complete__card-accordion__inner {
  padding: 0 32px 28px !important;
}

.point-gift-history__tab__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.point-gift-history__tab__list[data-tab=received] .point-gift-history__tab__item__amount {
  color: #fb1822;
}
.point-gift-history__tab__item {
  list-style: none;
}
.point-gift-history__tab__item__wrapper {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: block;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
  transition: all 0.2s ease-in-out;
}
.point-gift-history__tab__item__wrapper[data-state=waiting] {
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.point-gift-history__tab__item__wrapper[data-state=waiting] .point-gift-history__tab__item__detail-label--accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history__tab__item__wrapper[data-state=waiting] .point-gift-history__tab__item__detail-value--accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history__tab__item__wrapper[data-state=expired] .point-gift-history__tab__item__amount {
  color: var(--color-fg-neutral-disabled, #c8cccf);
  text-decoration: line-through;
}
.point-gift-history__tab__item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.point-gift-history__tab__item__sender-info {
  flex: 1;
  min-width: 0;
}
.point-gift-history__tab__item__sender-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.point-gift-history__tab__item__sender-text {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-gift-history__tab__item__divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-border-neutral-muted-weak, #dee1e4);
}
.point-gift-history__tab__item__sender-name {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-gift-history__tab__item__amount {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  margin-top: 4px;
}
.point-gift-history__tab__item__status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.point-gift-history__tab__item__status .label {
  background-color: var(--color-fg-neutral-muted, #6A6F77);
}
[data-state=waiting] .point-gift-history__tab__item__badge {
  color: #ffffff;
  background-color: var(--color-bg-brand-solid, #fb1822);
}
[data-state=expired] .point-gift-history__tab__item__badge, [data-state=completed] .point-gift-history__tab__item__badge {
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.point-gift-history__tab__item__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.point-gift-history__tab__item__arrow svg {
  width: 16px;
  height: 16px;
  color: var(--color-icon-neutral-muted-weak, #c8cccf);
}
.point-gift-history__tab__item__divider-line {
  width: 100%;
  height: 1px;
  background-color: var(--color-border-neutral-muted-weak, #dee1e4);
  margin-bottom: 12px;
}
.point-gift-history__tab__item__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.point-gift-history__tab__item__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.point-gift-history__tab__item__detail-label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
  flex-shrink: 0;
}
.point-gift-history__tab__item__detail-label--accent {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.point-gift-history__tab__item__detail-value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  text-align: right;
}
.point-gift-history__tab__item__detail-value--accent {
  color: var(--color-fg-neutral-solid, #222832);
}

.point-gift-history-detail {
  padding-bottom: var(--bottom-button-height);
}
.point-gift-history-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.point-gift-history-detail__header[data-state=waiting] .point-gift-history-detail__detail-label--accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history-detail__header[data-state=waiting] .point-gift-history-detail__detail-value--accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history-detail__header[data-state=waiting] .point-gift-history-detail__status .label {
  color: #ffffff;
  background-color: var(--color-bg-brand-solid, #fb1822);
}
.point-gift-history-detail__header[data-state=completed] .point-gift-history-detail__status .label {
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.point-gift-history-detail__header[data-state=expired] .point-gift-history-detail__amount {
  color: var(--color-fg-neutral-disabled, #c8cccf);
  text-decoration: line-through;
}
.point-gift-history-detail__header[data-state=expired] .point-gift-history-detail__status .label {
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.point-gift-history-detail__header[data-state=sender] .point-gift-history-detail__amount {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history-detail__sender-info {
  flex: 1;
  min-width: 0;
}
.point-gift-history-detail__sender-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.point-gift-history-detail__sender-text {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-gift-history-detail__divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-border-neutral-muted, #c8cccf);
}
.point-gift-history-detail__sender-name {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-gift-history-detail__amount-section {
  display: flex;
  align-items: center;
  gap: 6px;
}
.point-gift-history-detail__amount-section .point-gift-history-detail__amount-value-wrap {
  display: flex;
  align-items: baseline;
}
.point-gift-history-detail__amount {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-gift-history-detail__info-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.point-gift-history-detail__info-icon-wrap svg {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}
.point-gift-history-detail__status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.point-gift-history-detail__badge[data-state=waiting] {
  color: #ffffff;
  background-color: var(--color-bg-brand-solid, #fb1822);
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
  padding: 4px 8px;
  border-radius: 6px;
}
.point-gift-history-detail__divider-line {
  height: 1px;
  background-color: var(--color-border-neutral-muted-weak, #dee1e4);
  margin-bottom: 16px;
}
.point-gift-history-detail__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.point-gift-history-detail__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.point-gift-history-detail__detail-label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
  flex-shrink: 0;
}
.point-gift-history-detail__detail-label--accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history-detail__detail-value {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
  text-align: right;
}
.point-gift-history-detail__detail-value--accent {
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-gift-history-detail__reject-btn__wrap {
  display: none;
}
.point-gift-history-detail__reject-btn__wrap.show {
  display: block;
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__header .banner-band__title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__header.active + .point-gift-complete__card-accordion__content {
  height: auto;
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__header.active .banner-band__arrow svg {
  transform: rotate(180deg);
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__content {
  height: 0;
  overflow: hidden;
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__inner {
  padding: 0 24px 16px;
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__inner .img-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 278/171;
  border-radius: 12px;
  overflow: hidden;
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__inner .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.point-gift-history-detail__message-card__wrap .point-gift-complete__card-accordion__text {
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  margin-top: 12px;
  color: var(--color-fg-neutral-solid, #222832);
  word-break: break-all;
}

.bottom-sheet__container .point-gift__message__bottom-sheet__inner .textarea__info {
  padding-bottom: 0;
}
.bottom-sheet__container .point-gift__message__swiper .swiper-slide {
  width: calc(100% - 80px) !important;
  max-width: 248px;
  min-width: 120px;
}
.bottom-sheet__container .point-gift__message__swiper__item {
  width: 100%;
  height: auto;
  aspect-ratio: 248/148;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
}
.bottom-sheet__container .point-gift__message__swiper__item.active {
  border: 2px solid var(--color-border-brand-solid, #fb1822);
}
.bottom-sheet__container .point-gift__message__swiper__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 248/148;
  overflow: hidden;
  object-fit: cover;
}
.bottom-sheet__container .point-gift__message__bottom-sheet__inner .textarea__info {
  padding-bottom: 0 !important;
}
.bottom-sheet__container .receive__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.bottom-sheet__container .receive__inner svg,
.bottom-sheet__container .receive__inner img {
  width: 112px;
  height: 112px;
}
.bottom-sheet__container .reject__inner {
  padding-bottom: var(--bottom-button-height);
}

/* 포인트 충전 포인트 인풋 */
.ms-charge__point-input .tooltip {
  margin-top: 4px;
}
.ms-charge__point-input:has(.input-wrapper[data-state=error]) .tooltip {
  display: none;
}

/* 포인트 충전 하단 고정 스타일 */
.ms-charge__point-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: var(--bottom-button-height);
}
.ms-charge__point-fixed .form_dropdown__box {
  margin-bottom: 16px;
}
.ms-charge__point-fixed .toast {
  position: static;
  margin-bottom: 20px;
  transform: none;
}

@media screen and (max-height: 780px) {
  .ms-minus-point__charge-fixed .form_dropdown__box, .ms-charge__point-fixed .form_dropdown__box {
    margin-bottom: 0;
  }
  .ms-minus-point__charge-fixed .keypad__shortkeys, .ms-charge__point-fixed .keypad__shortkeys {
    display: none;
  }
}

.ms-charge__tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -14px;
}

/* 포인트 충전 수단 선택 스타일 */
.ms-charge__point-method .__box .list-component .info-popup__wrapper {
  display: inline-flex;
}
.ms-charge__point-method .__box .list-component .info-popup__icon {
  color: var(--color-icon-neutral-solid, #222832);
}
.ms-charge__point-method .__box.card {
  position: relative;
  padding-top: 16px;
  margin-top: 16px;
}
.ms-charge__point-method .__box.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.ms-charge__point-method .__box.card:not(:has(.title-component)) {
  padding-top: 0;
  margin-top: 0;
}

/* 휴대폰 번호 인증 */
#smsVerification .title-component {
  margin-bottom: 0;
  padding-bottom: 20px;
}
#smsVerification .btn-txt span {
  color: var(--color-fg-neutral-solid, #222832);
}

.sms-verification {
  margin-top: 40px;
}
.sms-verification .form-container {
  gap: 0;
  align-items: flex-start;
}
.sms-verification .form-container .input-wrapper:not(:first-child) {
  margin-top: 32px;
}
.sms-verification .btn-txt {
  margin-top: 12px;
}

/* ARS 인증 */
.ars-verification {
  padding-top: 64px;
}
.ars-verification__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ars-verification__txt .txt {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ars-verification__txt .sub-txt {
  margin-top: 10px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-2-size, 1rem);
  font-weight: var(--font-body-2-r-weight, 400);
  line-height: var(--font-body-2-line-height, 1.5);
  letter-spacing: var(--font-body-2-letter-spacing, -0.005em);
}
.ars-verification__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}
.ars-verification__time .icon {
  color: var(--color-icon-neutral-muted, #b2b6ba);
}

/* 예약충전  */
.ms-reservation__select .input-wrapper:last-child .ms-reservation__select-text {
  padding-right: 9px;
  padding-left: 8px;
}
.ms-reservation__select-item {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.ms-reservation__select-text {
  padding-bottom: 10px;
  white-space: nowrap;
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
.ms-reservation__select .input__wrap {
  width: 100%;
}

/* 예약충전 설정 영역 */
.ms-reservation__account-box {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-bg-neutral-muted-weak, #dee1e4);
}
.ms-reservation__account-box .label {
  margin-bottom: 8px;
}
.ms-reservation__account-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.ms-reservation__account-title-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ms-reservation__account-title-sub {
  color: var(--color-fg-neutral-muted, #6A6F77);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.ms-reservation__account-title {
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.ms-reservation__account-unit {
  display: flex;
}
.ms-reservation__account-list-button {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* 카드 환불 */
.ms-refund__card-list {
  padding: 12px 0;
}

/* 포인트 환불 유형 선택 바텀시트 */
.ms-refund__list-sheet .list-component__txt {
  display: flex;
  align-items: center;
}
.ms-refund__list-sheet .list-component__txt .highlight {
  display: flex;
  align-items: center;
  color: var(--color-fg-accent-red-solid-800, #ae060d);
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-r-weight, 400);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
}
.ms-refund__list-sheet .list-component__txt .highlight::before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
  margin: 0 4px;
}

/* 환불계좌 직접입력 - 은행,증권사 선택 */
/* 251128 공통 파일로 이동*/
/* 카드취소 */
.ms-refund-cancel__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0;
}
.ms-refund-cancel__item .list-component {
  max-width: 236px;
}
.ms-refund-cancel__item .list-component__inner {
  align-items: center;
}
.ms-refund-cancel__item .list-component__txt {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  -webkit-box-orient: unset;
}
.ms-refund-cancel__item[data-state=disabled] {
  pointer-events: none;
}
.ms-refund-cancel__item[data-state=disabled] .list-component__info {
  opacity: 0.4;
}
.ms-refund-cancel__item[data-state=disabled] .ms-refund-cancel__point {
  opacity: 0.4;
}
.ms-refund-cancel__item[data-state=disabled] .ms-refund-cancel__point .point {
  text-decoration-line: line-through;
}
.ms-refund-cancel__point {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ms-refund-cancel__point .point {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.ms-refund-cancel__point .desc {
  color: var(--color-fg-neutral-muted, #6A6F77);
  margin-top: 2px;
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
}

/*풀 팝업*/
.full-popup__head .title-component {
  margin-bottom: 0;
  padding-bottom: 20px;
}
.full-popup__head .btn-txt span {
  color: var(--color-fg-neutral-solid, #222832);
}

.ms-charge__account-popup--bank {
  padding-top: 40px;
}

.point-transfer-index__lpoint__box {
  position: relative;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-gradient-red-basic, rgba(251, 24, 34, 0.4));
}
.point-transfer-index__lpoint__box--head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
}
.point-transfer-index__lpoint__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.point-transfer-index__lpoint__label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.point-transfer-index__lpoint__label span {
  font-size: var(--font-caption-2-size, 0.8125rem);
  font-weight: var(--font-caption-2-m-weight, 500);
  line-height: var(--font-caption-2-line-height, 1.4);
  letter-spacing: var(--font-caption-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.point-transfer-index__lpoint__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-fg-neutral-subtle, #5f646c);
}
.point-transfer-index__lpoint__amount {
  display: flex;
  align-items: center;
  gap: 4px;
}
.point-transfer-index__lpoint__amount span {
  font-size: var(--font-heading-3-size, 1.5rem);
  font-weight: var(--font-heading-3-weight, 600);
  line-height: var(--font-heading-3-line-height, 1.4);
  letter-spacing: var(--font-heading-3-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-transfer-index__lpoint__refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-fg-neutral-solid, #222832);
}
.point-transfer-index__lpoint__action {
  flex-shrink: 0;
}
.point-transfer-index__lpoint__transfer-all-btn {
  white-space: nowrap;
}

.point-all-transfer__gray-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #F2F4F5;
  border-radius: 12px;
}
.point-all-transfer__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #CBCDCF;
}
.point-all-transfer__arrow svg {
  width: 20px;
  height: 16px;
}

.point-all-transfer-complete__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.point-all-transfer-complete__completed-img {
  width: 112px;
  height: 112px;
}
.point-all-transfer-complete__text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.point-all-transfer-complete__points {
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
  color: var(--color-fg-brand-solid, #fb1822);
}
.point-all-transfer-complete__text {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-m-weight, 500);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-solid, #222832);
}
.point-all-transfer-complete__list-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.point-all-transfer-complete__list-wrapper .unit-list__point {
  width: 100%;
}

.point-transfer {
  position: relative;
}
.point-transfer .gray-box {
  background-color: #f2f4f5;
  padding: 20px;
  border-radius: 16px;
}
.point-transfer .product-popup__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.point-transfer .product-popup__title {
  color: var(--color-fg-neutral-solid, #222832);
}
.point-transfer .product-popup__info {
  gap: 0;
}
.point-transfer .product-popup__price {
  margin-top: 4px;
}
.point-transfer .cross-platform-widget__text {
  text-align: center;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.point-transfer .title-component .point-amount {
  color: var(--color-fg-brand-solid, #fb1822);
}

.membership-point-convert__contents {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 0;
}
.membership-point-convert__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.membership-point-convert__rate-icon {
  display: flex;
  padding-top: 32px;
}
.membership-point-convert__rate-icon i {
  width: 18px;
  height: 18px;
}
.membership-point-convert__rate-icon i svg {
  width: 100%;
  height: 100%;
}
.membership-point-convert__rate-icon i:nth-child(1) svg {
  color: #cbcdcf;
}
.membership-point-convert__rate-icon i:nth-child(2) svg {
  color: var(--color-red-300);
}
.membership-point-convert__rate-icon i:nth-child(3) svg {
  color: var(--color-red-600);
}
.membership-point-convert__points {
  padding-top: 10px;
  font-size: var(--font-title-1-size, 1.125rem);
  font-weight: var(--font-title-1-sb-weight, 600);
  line-height: var(--font-title-1-line-height, 1.4);
  letter-spacing: var(--font-title-1-letter-spacing, -0.005em);
}
.membership-point-convert__text {
  text-align: center;
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.point-transfer-receive {
  position: relative;
}

#point-transfer-receive .authentication-consent {
  padding: 0 20px;
}

#point-transfer-receive .point-transfer-complete__points-wrapper {
  position: relative;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#point-transfer-receive .point-transfer-complete__completed-icon {
  position: absolute;
  top: 9px;
  right: 0;
  width: 92px;
  height: 92px;
}
#point-transfer-receive .point-transfer-complete__completed-icon svg {
  width: 100%;
  height: 100%;
}
#point-transfer-receive .point-transfer-complete__icon {
  width: 32px;
  height: 32px;
}
#point-transfer-receive .point-transfer-complete__icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-bg-brand-solid, #fb1822);
}
#point-transfer-receive .point-transfer-complete__points {
  font-size: 32px;
  color: var(--color-bg-brand-solid, #fb1822);
  font-size: var(--font-heading-1-size, 2rem);
  font-weight: var(--font-heading-1-weight, 600);
  line-height: var(--font-heading-1-line-height, 1.4);
  letter-spacing: var(--font-heading-1-letter-spacing, -0.005em);
}

#point-transfer-receive .happymoney-input-point__divider {
  padding-top: 10px;
}

#point-transfer-receive .happymoney-point-transfer__list-title {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
#point-transfer-receive .happymoney-point-transfer__unit-list {
  gap: 12px;
}

#point-transfer-receive .lottehotel-point-login__title-button-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
#point-transfer-receive .lottehotel-point-login__title {
  flex: 1;
}
#point-transfer-receive .lottehotel-point-login__login-option {
  display: flex;
}
#point-transfer-receive .lottehotel-point-login__checkbox {
  flex: 1;
}

#point-transfer-receive .gray-txt {
  color: var(--color-fg-neutral-subtle, #5f646c);
}
#point-transfer-receive .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
#point-transfer-receive .voucher-issuance-check__gray-box {
  display: flex;
  padding-top: 32px;
  padding-bottom: 32px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
#point-transfer-receive .voucher-issuance-check__step-title-wrapper .step-label {
  margin-bottom: 10px;
}
#point-transfer-receive .voucher-issuance-check__card-number {
  width: fit-content;
  margin: 0 auto;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #ff969b;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--font-title-4-size, 0.8125rem);
  font-weight: var(--font-title-4-weight, 600);
  line-height: var(--font-title-4-line-height, 1.4);
  letter-spacing: var(--font-title-4-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__step-title {
  font-size: var(--font-heading-4-size, 1.25rem);
  font-weight: var(--font-heading-4-weight, 600);
  line-height: var(--font-heading-4-line-height, 1.4);
  letter-spacing: var(--font-heading-4-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__giftcard-image {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
#point-transfer-receive .voucher-issuance-check__giftcard-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#point-transfer-receive .voucher-issuance-check__step-description {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__giftcard-delivery {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
#point-transfer-receive .voucher-issuance-check__giftcard-delivery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#point-transfer-receive .voucher-issuance-check__instruction {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__instruction .underline {
  color: var(--color-fg-neutral-solid, #222832);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
}
#point-transfer-receive .voucher-issuance-check__instruction .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
#point-transfer-receive .voucher-issuance-check__postal-service {
  width: 100%;
  background: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
}
#point-transfer-receive .voucher-issuance-check__postal-service-title {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__postal-service-description {
  font-size: var(--font-caption-3-size, 0.75rem);
  font-weight: var(--font-caption-3-m-weight, 500);
  line-height: var(--font-caption-3-line-height, 1.4);
  letter-spacing: var(--font-caption-3-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__postal-service-info {
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
#point-transfer-receive .voucher-issuance-check__postal-service-info-wrap {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  gap: 8px;
  color: var(--color-fg-neutral-subtle, #5f646c);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
  margin: 8px 0;
}
#point-transfer-receive .voucher-issuance-check__postal-service-info-wrap .line {
  flex: 1;
  display: block;
  width: 20px;
  background-color: var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
  height: 1px;
}
#point-transfer-receive .voucher-issuance-check__conversion-success-image {
  width: 100%;
  height: auto;
}
#point-transfer-receive .voucher-issuance-check__conversion-success-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
#point-transfer-receive .voucher-issuance-check__notice-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.point-transfer-send .send-point-form__terms-item {
  padding-right: 8px;
}

.ribifreepoint-point-transfer__text {
  text-align: center;
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}
.ribifreepoint-point-transfer__terms-item {
  flex: 1;
  color: var(--color-fg-neutral-solid, #222832);
  font-weight: 600 !important;
}

.sktcoupon-point-transfer__text {
  text-align: center;
  color: var(--color-fg-neutral-solid, #222832);
  font-size: var(--font-body-3-size, 0.875rem);
  font-weight: var(--font-body-3-m-weight, 500);
  line-height: var(--font-body-3-line-height, 1.5);
  letter-spacing: var(--font-body-3-letter-spacing, -0.005em);
}

.voucher-history .element--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voucher-history .element--start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.voucher-history .element--red {
  color: var(--color-fg-brand-solid, #fb1822);
}
.voucher-history__unit {
  font-size: var(--font-title-3-size, 0.875rem);
  font-weight: var(--font-title-3-weight, 600);
  line-height: var(--font-title-3-line-height, 1.4);
  letter-spacing: var(--font-title-3-letter-spacing, -0.005em);
}
.voucher-history__unit .btn-txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.voucher-history__item:not(:first-child) {
  padding-top: 16px;
}
.voucher-history__item:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-neutral-muted-weak, #dee1e4);
}
.voucher-history__item[data-type=cancel] .voucher-history__info-box__header__title {
  color: var(--color-fg-neutral-weak, #b2b6ba);
  text-decoration: line-through;
}
.voucher-history__info-box__header {
  margin-bottom: 16px;
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}
.voucher-history__info-box__header .btn-txt {
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.voucher-history__info-box__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voucher-history__info-box__body .element-list-text__title--text {
  color: var(--color-fg-neutral-muted, #6A6F77);
}

.kiosk-transfer__intro-card {
  background-color: var(--color-bg-brand-weak, #fff0f1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.kiosk-transfer__intro-card-title {
  text-align: center;
}
.kiosk-transfer__btns {
  display: flex;
  gap: 8px;
}
.kiosk-transfer__divider {
  width: 100%;
  height: 10px;
  background-color: var(--color-bg-button-gray, rgba(5, 55, 88, 0.06));
  margin: 32px 0;
}
.kiosk-transfer__terms-wrapper {
  padding: 20px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 12px;
}
.kiosk-transfer__step-wrapper {
  overflow: hidden;
  padding: 32px 0;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
}
.kiosk-transfer__item {
  padding: 0 20px;
  background-color: var(--color-bg-neutral-weak, #f0f3f5);
  border-radius: 10px;
}
.kiosk-transfer__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kiosk-transfer__title {
  text-align: center;
  font-size: 18px;
}
.kiosk-transfer__title .red-txt {
  color: var(--color-fg-brand-solid, #fb1822);
}
.kiosk-transfer__body {
  text-align: center;
}
.kiosk-transfer__step-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kiosk-transfer .step-label {
  margin-bottom: 0;
}

.step-label {
  background-color: var(--color-bg-neutral-solid, #222832);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
  font-weight: 600;
}

/* 생일축하 인트로 */
.birthday-intro__container {
  position: relative;
  height: calc(100dvh - 54px);
  min-height: 500px;
}
.birthday-intro__title {
  text-align: center;
  margin-top: 12px;
}
.birthday-intro__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 280px;
}
.birthday-intro__bottom .bottom-button {
  background: none;
}

/* 생일축하 컨텐츠 */
.birthday-point__container {
  position: relative;
  z-index: 9;
}
.birthday-point__container .container {
  background: none;
}
.birthday-point__content {
  background-color: var(--color-bg-neutral-inverted, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border-neutral-line, rgba(0, 0, 0, 0.08));
}
.birthday-point__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(7.1795vw, 28px);
}
.birthday-point__box:nth-child(3) {
  margin-top: 36px;
}
.birthday-point__box:nth-child(4) {
  margin-top: 25px;
}
@media screen and (max-width: 320px) {
  .birthday-point__box {
    gap: min(7.1875vw, 23px);
  }
}
.birthday-point__item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.birthday-point__item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.birthday-point__item-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.birthday-point__item-value {
  position: relative;
  z-index: 2;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: var(--color-fg-neutral-inverted, #ffffff);
}
.birthday-point__item .tooltip {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  z-index: 2;
}
.birthday-point__item[data-type=fail] .birthday-point__item-value {
  color: #ff969b;
}
.birthday-point__item[data-type=success] .birthday-point__item-value {
  color: var(--color-fg-accent-red-solid, #fb1822);
}
.birthday-point__item[data-type=finish] {
  width: 71px;
  height: 92px;
}
.birthday-point__item[data-type=done] {
  width: 72px;
  height: 92px;
}
.birthday-point__item[data-type=done] .birthday-point__item-value {
  position: absolute;
  bottom: 20px;
}
.birthday-point__item[data-popover=false] .tooltip {
  display: none;
}
.birthday-point__line-content {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
  padding: 28px 0 34px;
}
.birthday-point__line-bg {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.birthday-point__line-bg img {
  max-width: 350px;
}
.birthday-point__line-bg::before, .birthday-point__line-bg::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50vw;
  height: 12px;
  background-color: var(--color-border-neutral-weak, #f0f3f5);
}
.birthday-point__line-bg::before {
  right: 50%;
}
.birthday-point__line-bg::after {
  left: 50%;
  top: auto;
  bottom: 0;
}
.birthday-point__line-bg .mobile-sm {
  display: none;
}
@media screen and (max-width: 320px) {
  .birthday-point__line-bg .mobile {
    display: none;
  }
  .birthday-point__line-bg .mobile-sm {
    display: block;
    max-width: 280px;
  }
}
.birthday-point__info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.birthday-point__info-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.birthday-point__info-item--divider {
  display: block;
  width: 1px;
  height: 24px;
  background-color: var(--color-bg-neutral-muted-weak, #dee1e4);
}
.birthday-point__info-item:last-child .birthday-point__info-value {
  color: var(--color-fg-brand-solid, #fb1822);
}
.birthday-point__info-label {
  font-size: var(--font-caption-1-size, 0.875rem);
  font-weight: var(--font-caption-1-m-weight, 500);
  line-height: var(--font-caption-1-line-height, 1.4);
  letter-spacing: var(--font-caption-1-letter-spacing, -0.005em);
  color: var(--color-fg-neutral-muted, #6A6F77);
}
.birthday-point__info-value {
  font-size: var(--font-title-2-size, 1rem);
  font-weight: var(--font-title-2-sb-weight, 600);
  line-height: var(--font-title-2-line-height, 1.4);
  letter-spacing: var(--font-title-2-letter-spacing, -0.005em);
}