@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
/* 예시파일 */

:root {
  --layout-color: #fff;
}

.main-layout {
  /* max-width: 360px; */
  width: 100%;
  margin: 0 auto;
}

.main-content {
  min-height: calc(100vh - 52px);
}

.page-inner {
  background-color: #fff;
  max-width: 360px;
  width: 100%;
}

.page {
  display: flex;
  justify-content: center;
  height: 100%;
}

@media (max-width: 700px) {
  .page-inner {
    max-width: 100%;
  }
}

* {
  font-family: 'Pretendard';
}

/* 이벤트 배너 공용 */
.main-content {
  .events-banner-wrap {
    width: 100%;
    height: 100%;
    position: relative;

    .banner-container {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }

    .nums {
      position: absolute;
      bottom: 12px;
      right: 32px;

      z-index: 1;

      width: 40px;
      height: 20px;
      border-radius: 40px;
      background-color: rgba(82, 82, 82, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;

      span {
        color: #FFF;
        font-size: 12px;
        font-weight: 400;

        &.divider {
          width: 1px;
          height: 9px;
          background-color: rgba(255, 255, 255, 0.4);
          border: none;
        }
      }
    }
  }
}

/* Header Banner */
.top-banner-container {
  position: relative;
  width: 100%;
  height: 100%;

  .top-banner-close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1;
  }
}
.main-products-wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.main-products-wrap ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
}

.main-products-wrap ul li {
  width: 50%;
  height: auto;
  padding: 0 6px;
}

.main-products-wrap ul li a {
  display: block;
  width: 100%;
  height: auto;
}

.main-products-wrap ul li a .figure {
  display: block;
  width: 100%;
  padding-top: 134%;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.main-products-wrap ul li a .figure .sale {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 0 6px;
  background-color: #ff3d25;
  height: 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 24px;
}

.main-products-wrap ul li a .figure .cart-btn {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  /* background: url('/assets/svg/cart-bg-icon.svg') no-repeat center / cover; */
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.main-products-wrap ul li a .info {
  margin-top: 9px;
}

.main-products-wrap ul li a .info .badge-list-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.main-products-wrap ul li a .info .badge-list-wrap span {
  padding: 2px 3px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.main-products-wrap ul li a .info .badge-list-wrap span:first-child {
  background-color: rgba(40, 141, 198, 0.15);
  color: #288dc6;
}

.main-products-wrap ul li a .info .badge-list-wrap span:nth-child(2) {
  background-color: #f0f0f0;
  color: #525252;
}

.main-products-wrap ul li a .info .name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: #111111;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-products-wrap ul li a .info .text {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #757575;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.main-products-wrap ul li a .info .price-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

.main-products-wrap ul li a .info .price-wrap .sale {
  font-weight: 700;
  font-size: 13px;
  color: #bd2420;
}

.main-products-wrap ul li a .info .price-wrap .price {
  font-weight: 700;
  font-size: 13px;
  color: #111111;
}

.main-products-wrap ul li a .info .regular-price {
  font-size: 12px;
  font-weight: 400;
  color: #a3a3a3;
  margin-top: 6px;
  text-decoration: line-through;
}

.main-view {
  position: relative;

  /* :::: S customHero ::::*/
  .main-custom-hero {
    position: relative;
    height: 369px;
    overflow: hidden;

    .hero-img {
      position: absolute;
      top: -62px;
      /* width: 415px; */
      width: 100%;
      height: 593px;
      object-fit: cover;
      z-index: 1;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      padding: 16px 20px 19px;
      z-index: 2;

      .hero-title-wrap {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        height: 21px;

        .hero-title {
          font-weight: 700;
          font-size: 15px;
          background: linear-gradient(90deg, #34c26f, #1d916c);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .hero-search {
        margin-top: 237px;
        width: 100%;
        height: 52px;
        border-radius: 12px;

        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: center;

        /* background: #fff; */
        border: 2px solid transparent;
        background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #34c26f, #1d916c);
        background-clip: padding-box, border-box;

        >span {
          background: linear-gradient(90deg, #34c26f, #1d916c);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          font-weight: 700;
          font-size: 15px;
          letter-spacing: -3%;
        }
      }
    }
  }

  /* :::: E customHero ::::*/
  .main-content {
    position: relative;
    margin-top: -24px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    z-index: 2;
    border-radius: 1px solid black;

    .product-section {
      margin: 0;
    }

    .main-category-wrap {
      padding: 29px 0 17px;
      display: flex;
      gap: 10px;
      overflow: hidden;
      height: 158px;

      overflow-x: auto;
      overflow-y: hidden;

      scroll-snap-type: x mandatory;

      &::-webkit-scrollbar {
        display: none;
      }

      .categoey-item {

        width: auto;

        a {
          display: flex !important;
          flex-direction: column;
          gap: 8px;
          align-items: center;
        }

        .category-img {
          position: relative;
          width: 72px;
          height: 72px;
          border-radius: 50%;
          overflow: hidden;

          &.recommend::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            padding: 3px;

            background: linear-gradient(90deg, #34c26f, #1d916c);

            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
          }

          .category-img-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          >span {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 999px;
            background: linear-gradient(90deg, #34c26f, #1d916c);

            font-weight: 700;
            font-size: 12px;
            color: #fff;
          }
        }

        .category-label {
          font-size: 13px;
          line-height: 1;
          color: #262626;
        }
      }
    }

    .divider {
      width: 100%;
      height: 12px;
      background-color: #f5f5f5;
      border-top: 1px solid #e5e5e5;
    }

    .feature-section {
      padding: 56px 20px 36px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .title {
        font-weight: 700;
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: -2%;
        white-space: pre-line;
      }

      .swiper {
        width: 100%;

        .feature-item {
          border-radius: 24px;
          overflow: hidden;

          >div {
            width: 100%;
            height: 440px;
            box-shadow: 0px 4px 34px 0px #0000000d;

          }


          .banner-container {
            position: relative;
            width: 100%;
            height: 100%;

            >img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }

            .banner-info {
              position: absolute;
              top: 0;
              left: 0;
              padding: 40px 30px 0;

              display: flex;
              flex-direction: column;
              gap: 8px;

              .banner-title {
                font-size: 20px;
                font-weight: 700;
                line-height: 1.2;
                color: #000;
              }

              .banner-desc {
                font-size: 14px;
                line-height: 1.5;
                font-weight: 400;
                color: #434343;
              }
            }
          }
        }
      }

      .dots {
        display: flex;
        justify-content: center;
        margin-top: 4px;
        gap: 8px;

        .dot {
          width: 8px;
          height: 8px;
          background: #d4d4d4;
          border-radius: 50%;
          transition: 0.3s;
        }

        .dot.active {
          background: #0d5611;
        }
      }
    }

    /* S::: 식단표 페이지 :::S */
    .calendar-list-container {
      width: 100%;
      height: 100%;
      padding: 0;

      .title-wrap {
        padding: 0 20px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;

        >i {
          display: inline-block;
          width: 28px;
          height: 28px;
          background: url(ico_thumbup_set..svg?5008850a20b75495080d) no-repeat center / cover;
        }

        >h2 {
          font-size: 24px;
          font-weight: 700;
          line-height: 1.3;
          color: #000;
        }
      }

      .category-nav {
        .swiper {
          height: 53px;
          border-bottom: 1px solid #e5e5e5;
          box-shadow: 0px 10px 15px 0px #00000008;
          width: 100%;
        }

        .swiper-wrapper {
          height: unset;
          display: flex;

          .swiper-slide {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            button {
              position: relative;
              padding: 16px 0;
              color: #a3a3a3;
              font-size: 13px;
              line-height: 1.4;
              font-weight: 400;
              width: 100%;

              &.active {
                color: #0d5611;
                border-bottom: 2px solid #0d5611;
                font-weight: 700;
              }
            }
          }
        }
      }

      .content-wrapper {
        width: 100%;
        height: 100%;
        padding: 16px 20px 25px;
        position: relative;

        .meal-summary-card {
          width: 100%;
          border: 1px solid #d9d9d9;
          border-radius: 12px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 16px 20px;

          h3 {
            font-size: 18px;
            font-weight: 700;
            color: #111;
          }

          .description-box {
            padding: 12px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #f3f7f3;
            border-radius: 8px;

            font-size: 13px;
            font-weight: 500;

            p {
              color: #0d5611;

              span {
                color: #000;
              }
            }
          }
        }

        .menu-list {
          width: calc(100% + 20px);
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          margin-right: 20px;
          overflow: hidden;
          max-height: 307px;
          transition: max-height 0.5s ease;

          &.active {
            max-height: 650px;
            transition: max-height 0.5s ease;
          }

          .menu-group {
            display: flex;
            flex-direction: column;
            gap: 16px;

            h4 {
              font-size: 16px;
              font-weight: 700;
              color: #111;
            }

            .menu-list-wrap {
              width: 100%;
              display: flex;

              .menu-item {
                display: flex;
                flex-direction: column;
                gap: 6px;
                text-align: center;
                width: 100%;
                max-width: 80px;

                .img-holder {
                  width: 80px;
                  height: 80px;

                  .img {
                    width: 100%;
                    height: 100%;
                    background-color: lightgray;
                  }
                }

                p {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;

                  font-size: 13px;
                  line-height: 17px;
                  color: #111;
                  word-break: break-word;
                }
              }
            }
          }
        }
      }

      .content-wrapper::after {
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 0;
        height: 1px;
        background-color: #d9d9d9;
      }

      .more-btn {
        display: flex;
        gap: 6px;
        font-weight: 700;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        margin-top: 2px;
        margin-bottom: 36px;
        height: 40px;
      }

      .box-wrap {
        width: 100%;
        margin-bottom: 36px;
        display: flex;
        flex-direction: column;
        gap: 11px;
        padding: 0 20px;

        .price-info-box {
          height: 46px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f5f5f5;

          border-radius: 8px;

          font-weight: 600;
          color: #525252;

          padding: 0 20px;

          >span {
            font-weight: 700;
            padding-right: 4px;
            color: #111;
          }
        }

        >button {
          height: 52px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #0d5611;

          border-radius: 8px;

          font-weight: 700;
          font-size: 16px;
          color: #fff;
        }
      }
    }

    /* E::: 식단표 페이지 :::E */

    /* :::: S 반찬 순위 :::: */
    .ranking-section {
      display: flex;
      flex-direction: column;

      .title-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 32px 20px 9px;

        .title {
          font-weight: 700;
          font-size: 24px;
          line-height: 1.3;
        }

        >span {
          font-size: 16px;
          line-height: 1.3;
          color: #434343;
        }
      }

      .tabs {
        width: 100%;
        height: 52px;
        padding-top: 4px;
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0px 10px 15px 0px #00000008;

        .tab {
          flex: 1;
          text-align: center;
          height: 100%;
          font-size: 13px;
          color: #a3a3a3;

          &.active {
            font-weight: 700;
            color: #0d5611;
            border-bottom: 2px solid #0d5611;
          }
        }
      }

      .list-wrapper {
        padding: 32px 20px 36px;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .item-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 90px;

          .info-wrap {
            display: flex;
            gap: 16px;
            justify-content: center;
            align-items: center;

            .img-wrap {
              position: relative;
              width: 90px;
              height: 90px;
              border-radius: 12px;
              overflow: hidden;

              >span {
                position: absolute;
                top: 4px;
                left: 4px;

                width: 26px;
                height: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 15px;
                color: #fff;

                border-radius: 9px;

                &.first {
                  background-color: #0d5611;
                }

                &.second {
                  background-color: #54810a;
                }

                &.third {
                  background-color: #9da269;
                }

                &.fourth,
                &.fifth {
                  background-color: #757575;
                }
              }
            }

            .text-wrap {
              display: flex;
              flex-direction: column;

              .badge-wrap {
                display: flex;
                gap: 4px;

                .badge {
                  padding: 2px 3px;
                  font-weight: 600;
                  font-size: 10px;
                  text-align: center;
                  line-height: 1;
                  border-radius: 4px;
                  border: none;

                  &.blue {
                    background: #dfeef6;
                    color: #2070a0;
                  }

                  &.red {
                    background: #ffe3d9;
                    color: #c23100;
                  }

                  &.gray {
                    background: #f0f0f0;
                    color: #525252;
                  }

                  &.yellow {
                    background: #fdf0db;
                    color: #f39c12;
                  }

                  &.green {
                    background: #dbe6db;
                    color: #0d5611;
                  }
                }
              }

              .title {
                margin-top: 4px;
                font-weight: 600;
                font-size: 16px;
                line-height: 1.4;
              }

              .sub-title {
                margin-top: 2px;
                font-size: 13px;
                line-height: 1.2;
                color: #757575;
              }

              .price-wrap {
                margin-top: 6px;
                display: flex;
                gap: 4px;
                font-weight: 700;
                font-size: 13px;
                align-items: flex-end;

                .discount {
                  color: #bd2420;
                }

                .price {
                  color: #111;
                }

                .og-price {
                  font-weight: 400;
                  font-size: 12px;
                  color: #a3a3a3;
                }
              }
            }
          }
        }
      }
    }

    /* :::: S 반찬 순위 :::: */

    /* :::: S 추천 장바구니 :::: */
    .recommend-cart-section {
      padding-top: 169px;
      display: flex;
      align-items: flex-end;
      padding-bottom: 23px;

      /* height: 693px; */
      min-height: 693px;
      max-height: 800px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fff 100%),
        url(familly-diet..png?80661160656f24e76d8d) no-repeat top center;
      background-size: 100% 360px;

      .card-wrapper .swiper-slide {
        height: auto;
        display: flex;
        align-items: flex-end;
      }

      .card-wrap {
        width: calc(100% - 40px) !important;

        .card {
          width: 100%;

          display: flex;
          flex-direction: column;
          border-radius: 12px 12px;
          overflow: hidden;

          .card-header {
            background-color: #0000009e;
            backdrop-filter: blur(6px);
            padding: 20px 20px 8px;
            display: flex;
            flex-direction: column;
            gap: 15px;

            .title-wrapper {
              display: flex;
              justify-content: space-between;

              .title-wrap {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-weight: 700;

                .name-badge {
                  height: 22px;
                  width: fit-content;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 0 10px;

                  border-radius: 30px;
                  background-color: #ebf3ef;
                  color: #0d5611;
                  font-size: 12px;
                }

                >h2 {
                  margin-bottom: 2px;
                  font-size: 18px;
                  line-height: 1.1;
                  color: #fff;
                }
              }

              .thum-img-box {
                width: 56px;
                height: 56px;
                border-radius: 9px;
                overflow: hidden;
              }
            }

            .review {
              font-weight: 500;
              font-size: 13px;
              line-height: 1.3;
              color: rgba(255, 255, 255, 0.7);
              white-space: pre-line;
              min-height: 51px;

              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;

              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .card-info {
            background-color: #fff;
            padding: 14px 20px 20.5px;
            border: 1px solid #d1d1d1;
            border-radius: 0 0 12px 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 12.5px;

            >ul {
              display: flex;
              flex-direction: column;
              gap: 4px;
              min-height: 263px;
              max-height: 263px;
              overflow-y: auto;
              overflow-x: hidden;

              >li {
                display: flex;
                gap: 12px;
                align-items: center;

                .check-box {
                  appearance: none;
                  -webkit-appearance: none;

                  width: 20px;
                  height: 20px;

                  background: url(checked-off-icon..svg?c7ce7a948c1bc5cebfad) no-repeat center / cover;
                  cursor: pointer;
                }

                .check-box:checked {
                  background: url(checked-icon..svg?c034c0628d063a8cf1db) no-repeat center / cover;
                }

                .text-wrap {
                  display: flex;
                  flex-direction: column;
                  gap: 4px;

                  .badge-wrap {
                    display: flex;
                    gap: 3px;

                    .badge {
                      padding: 2px 3px;
                      font-weight: 600;
                      font-size: 10px;
                      text-align: center;
                      line-height: 1;
                      border-radius: 4px;
                      border: none;

                      &.blue {
                        background: #dfeef6;
                        color: #2070a0;
                      }

                      &.red {
                        background: #ffe3d9;
                        color: #c23100;
                      }

                      &.gray {
                        background: #f0f0f0;
                        color: #525252;
                      }

                      &.yellow {
                        background: #fdf0db;
                        color: #f39c12;
                      }

                      &.green {
                        background: #dbe6db;
                        color: #0d5611;
                      }
                    }
                  }

                  .title {
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 1;
                  }

                  .price-wrap {
                    display: flex;
                    gap: 2px;
                    font-weight: 700;
                    font-size: 13px;
                    align-items: center;

                    .price {
                      color: #111;
                    }

                    .og-price {
                      font-weight: 500;
                      font-size: 11px;
                      color: #a3a3a3;
                    }
                  }
                }

                .product-thum {
                  height: 60px;
                  width: 60px;
                  border-radius: 8px;
                  overflow: hidden;
                }
              }
            }

            >button {
              width: 100%;
              height: 52px;
              display: flex;
              justify-content: center;
              align-items: center;

              background-color: #0d5611;
              border-radius: 10px;

              font-weight: 700;
              font-size: 16px;

              color: #fff;
            }
          }
        }
      }
    }

    /* :::: E 추천 장바구니 :::: */

    /* :::: S MD 추천반찬 ::::*/
    .recommend-section {
      .title-wrap {
        padding: 44px 20px 9px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        >h2 {
          font-weight: 700;
          font-size: 24px;
          line-height: 1.3;
        }

        >span {
          font-size: 16px;
          line-height: 1.3;
          color: #434343;
        }
      }

      .category-nav {
        .swiper {
          height: 53px;
          border-bottom: 1px solid #e5e5e5;
          box-shadow: 0px 10px 15px 0px #00000008;
          width: 100%;
        }

        .swiper-wrapper {
          height: unset;
          display: flex;

          .swiper-slide {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            button {
              position: relative;
              padding: 16px 0;
              color: #a3a3a3;
              font-size: 13px;
              line-height: 1.4;
              font-weight: 400;
              width: 100%;

              &.active {
                color: #0d5611;
                border-bottom: 2px solid #0d5611;
                font-weight: 700;
              }
            }
          }
        }
      }

      .product-wrapper {
        padding-top: 29px;
        padding-bottom: 40px;
      }
    }

    /* :::: E MD 추천반찬 ::::*/
  }

  .product-section-wrap {
    .l-panel {
      box-shadow: none;
      border: none;
    }

    .title-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 32px;

      .title-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: -7px;

        .product-section__title {
          white-space: pre-line;
          font-weight: 700;
          font-size: 24px;
          line-height: 1.3;
          padding: 0;
          margin: 0;
        }

        .product-section-subtitle {
          margin-bottom: 4px;
          color: #434343;
          font-size: 16px;
          line-height: 1.3;
        }
      }

      .all-btn {
        display: flex;
        gap: 4px;
        height: 14px;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 12px;
        line-height: 1;
        color: #262626;
      }

      .custom-img {
        margin-bottom: -45px;
        margin-right: -12px;
      }
    }

    .list-wrapper {
      .product-section--slide .swiper {
        margin: 0;
      }

      .product-section__more {
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        margin-top: 19px;
        border: none;
        border: 1px solid #cadacb;
        border-radius: 10px;
        font-weight: 700;
        font-size: 16px;
        color: #0d5611;
      }
    }
  }

  .list-wrap {
    &.gallery {
      /* display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto); */

      column-gap: 12px;
      row-gap: 20px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;


      .item {
        width: calc(50% - 6px) !important;

        .product-img {
          width: 100% !important;
          height: auto !important;
          min-height: unset !important;
          aspect-ratio: 154 / 206;
          object-fit: cover;
          min-width: unset;
        }
      }
    }

    .swiper-slide {
      flex-shrink: unset;
    }

    &.slider {
      /* display: flex;
      gap: 12px; */
      /* margin-right: -20px;
      padding-right: 20px; */
      /* overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;


      scrollbar-width: none;

      -ms-overflow-style: none;

      .list-wrap::-webkit-scrollbar {
        display: none;
      } */
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* width: 154px; */

    @media (max-width: 700px) {
      width: 100% !important;

      .product-img {
        width: 100% !important;
        min-width: 154px;
      }
    }

    .product-img {
      position: relative;
      background-color: lightgray !important;
      /* width: 154px; */
      /* min-height: 206px; */
      border-radius: 4px;
      overflow: hidden;

      .discount-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;

        width: 40.5px;
        height: 24px;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-color: #ff3d25;
        color: #ffffff;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        letter-spacing: -3%;
        border-radius: 125px;
      }

      .cart-icon {
        width: fit-content;
        height: fit-content;
        position: absolute;
        bottom: 10px;
        right: 10px;
        display: flex;
      }
    }

    .product-info-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .badge-wrap {
        display: flex;
        gap: 4px;

        .badge {
          padding: 2.5px 3px;
          font-weight: 600;
          font-size: 10px;
          text-align: center;
          line-height: 1;
          border-radius: 4px;
          border: none;

          &.blue {
            background: #dfeef6;
            color: #2070a0;
          }

          &.gray {
            background: #f0f0f0;
            color: #525252;
          }
        }
      }

      .product-title {
        font-weight: 600;
        font-size: 15px;
        line-height: 1.4;
        max-height: 21px;

        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .product-info {
        font-size: 13px;
        line-height: 1.2;
        color: #757575;
        max-height: 32px;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .price-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
      line-height: 1;
      margin-top: 3px;

      .price {
        font-size: 13px;
        font-weight: 700;
        display: flex;
        gap: 4px;
        color: #bd2420;

        :last-child {
          color: #111111;
        }
      }

      .orgin-price {
        font-size: 12px;
        color: #a3a3a3;
        text-decoration: line-through;
      }
    }
  }
}



/* S::: 메인 기획전 목록 :::S */
.main-content {
  .exhibition-wrap {
    position: relative;
    padding: 0 20px;

    .exhibition-item {
      position: relative;

      >span {
        position: absolute;
        top: 21px;
        left: 24px;

        font-size: 14px;
        font-weight: 600;
        color: #0D5611;
        line-height: 1.3;

        z-index: 1;
      }

      .banner-container {
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .banner-info {
          position: absolute;
          top: 45px;
          left: 0;
          width: 100%;
          height: 100%;
          padding: 0 24px;

          display: flex;
          flex-direction: column;
          gap: 8px;

          .banner-title {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.1;
            color: #000;

          }

          .banner-desc {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.3;
            color: #434343;
          }
        }
      }
    }

    .nums {
      position: absolute;
      bottom: 16px;
      right: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      width: 50px;
      height: 24px;
      background-color: rgba(17, 17, 17, 0.5);
      border-radius: 40px;

      z-index: 1;

      >span {
        font-size: 13px;
        font-weight: 600;
        color: #FFF;

        &.divider {
          width: 1px;
          height: 12px;
          background-color: rgba(255, 255, 255, 0.4);
          border: none;
        }
      }
    }
  }
}

/* E::: 메인 기획전 목록 :::E */
/* S::: 검색 페이지 :::S */
.hate-bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.hate-bottom-sheet-overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 700px) {
  .bottom-sheet-container {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

/* 바텀 시트 컨테이너 */
.hate-food-bottom-shhet {
  .bottom-sheet-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    background: #fff;
    z-index: 7;

    transform: translate(-50%, 100%);
    transition: transform 0.3s ease-out;

    max-width: 360px;
    margin: 0 auto;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;

    padding: 16px 0 8px;

    &.active {
      transform: translate(-50%, 0);
    }

    .bottom-sheet-header {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 16px;
      box-shadow: 0px -6px 54px 0px rgba(0, 0, 0, 0.04);
      border-top: 1px solid #E5E5E5;


      h3 {
        font-size: 15px;
        font-weight: 700;
      }

      .close-btn {
        position: absolute;
        right: 16px;
        background: red;
        background: url(close-icon..svg?ac31fd4edde2efe08a29) no-repeat center / cover;
        border: none;
        font-size: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

    .bottom-sheet-content {
      display: flex;
      flex-direction: column;

      .tabs-hate {
        display: flex;
        gap: 24px;
        padding: 19px 20px 0;
        border-bottom: 1px solid #e5e5e5;

        span {
          font-size: 13px;
          line-height: 1.4;
          font-weight: 400;
          color: #a3a3a3;
          padding-bottom: 16px;
          cursor: pointer;

          &.active {
            color: #0d5611;
            font-weight: 700;
            border-bottom: 2px solid #0d5611;
          }
        }
      }

      .content {
        background-color: rgba(0, 0, 0, 0.01);
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;

        .ingredient-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          /* 4열 배열 */
          gap: 20px 0;
          padding: 20px 20px 0;
          width: 100%;

          .check-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            width: 100%;

            span {
              display: flex;
              width: 100%;
              font-size: 14px;
              font-weight: 400;
              color: #111;
            }

            .check-box {
              min-width: 20px;
              height: 20px;
              background-color: red;
              background: url(checked-off-icon..svg?c7ce7a948c1bc5cebfad) no-repeat center / cover;

              &:checked {
                background-color: blue;
                background: url(checked-icon..svg?c034c0628d063a8cf1db) no-repeat center / cover;
              }
            }
          }
        }

        .info-message {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 4px;
          height: 30px;
          width: 140px;
          margin: 0 auto;
          background-color: #fcf6f6;
          border: 1px solid #c91b1b;
          border-radius: 40px;
          cursor: pointer;

          span {
            font-size: 14px;
            font-weight: 700;
            color: #c91b1b;
          }

          .arrow-right-red {
            width: 18px;
            height: 18px;
            background-color: red;
            background: url(red-arrow-right..svg?87a58b8fe09ba19ce8e9) no-repeat center / cover;
          }
        }

        .notice-box {
          position: absolute;
          bottom: 64px;
          z-index: 9;
          background-color: #f5f5f5;
          padding: 16px;
          max-width: 320px;
          margin: 0 auto;
          display: flex;
          width: 100%;
          flex-direction: column;
          gap: 8px;
          border-radius: 8px;

          left: 50%;
          transform: translateX(-50%);

          .notice-header {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;

            .notice-title {
              display: flex;
              align-items: center;
              gap: 8px;

              .badge {
                background-color: #434343;
                border-radius: 30px;
                padding: 5px 10px;

                font-size: 12px;
                font-weight: 700;
                color: #fff;
              }

              strong {
                font-size: 15px;
                font-weight: 600;
                color: #000;
              }
            }

            .notice-close {
              width: 20px;
              height: 20px;
              background-color: red;
              background: url(close-icon..svg?ac31fd4edde2efe08a29) no-repeat center / cover;
              font-size: 0;
            }
          }

          .notice-text {
            color: #757575;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.3;
          }
        }
      }
    }

    .bottom-sheet-footer {
      width: 100%;

      @media (max-width: 700px) {
        .btn-wrap {
          max-width: calc(100% - 40px) !important;
          margin: 0 auto;
        }
      }

      .btn-wrap {
        max-width: 320px;
        height: 52px;
        display: flex;
        gap: 8px;
        margin: 0 auto;
        width: 100%;
      }

      .reset-btn,
      .apply-btn {
        flex: 1;
        border: 1px solid #cadacb;
        background: #fff;
        border-radius: 10px;
        color: #006400;
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .apply-btn {
        background: #0d5611;
        color: #fff;
        border: none;
      }
    }
  }
}

.main-layout {
  background-color: #fff;
}

/* 검색 창 공통 */
.search-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
  padding: 6px 16px;
  background-color: #fff;

  .search-keyword-back-btn {
    width: 20px;
    height: 20px;
    min-height: 20px;
    background-color: red;
    background: url(arrow-bottom-icon..svg?c0be5de78f0958e56a50) no-repeat center / cover;
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    span {
      display: none;
    }
  }

  .search-field {
    position: relative;
    width: 100%;

    .search-field__input {
      .text-field {
        border: none;
        background-color: #f7f7f7;
        border-radius: 8px;

        input {
          padding: 11px 10px 11px 48px;

          font-size: 14px;
          line-height: 1.3;
          font-weight: 700;

          &::placeholder {
            color: #a3a3a3;
          }

          color: #000;
        }
      }

      .search-field__clear-btn {
        display: none;
      }
    }

    button {
      position: absolute;
      left: 16px;
      margin: 0;

      width: 24px;
      height: 24px;
      background: url(search-icon-gray..svg?3c5387032693adeacfb9) no-repeat center / cover;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        display: none;
      }
    }
  }
}

.search-main {
  width: 100%;
  height: 100%;

  .search-inner {
    width: 100%;
    margin: 0 auto;

    .recent-wrap {
      min-height: unset;
      padding: 20px;
      background-color: #fff;
      border: none;
      display: flex;
      flex-direction: column;
      gap: 16px;

      border-bottom: 1px solid #f5f5f5;

      .recent-keyword__top {
        padding: 0;
        border: none;

        p {
          font-size: 18px;
          font-weight: 700;
          line-height: 1.1;
          color: #000;
        }

        button {
          display: none;
        }
      }

      .recent-keyword__content {
        ul {
          display: flex;
          flex-direction: row;
          gap: 6px;
          overflow: hidden;
          overflow-x: scroll;

          li {
            margin: 0;
            height: 32px;
            border: 1px solid #d1d1d1;
            border-radius: 4px;

            padding: 10px 10px 10px 12px;

            display: flex;
            gap: 4px;

            white-space: nowrap;

            button {
              font-size: 12px;
              line-height: 12px;
              font-weight: 500;
              color: #111;

              &:last-child {
                width: 20px;
                height: 20px;
                background-color: red;
                background: url(close-icon-light-gray..svg?221f5ec4e4c858ace6fc) no-repeat center / cover;

                display: flex;
                align-items: center;
                justify-content: center;

                span {
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    .recommend-wrap {
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: hidden;
      border-bottom: 1px solid #f5f5f5;

      h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
        color: #000000;
        padding: 0 20px;
      }

      .badge-wrap {
        width: 100%;
        overflow: hidden;
        display: flex;
        white-space: nowrap;

        .popular,
        .frozen,
        .recent,
        .common,
        .not-hot {
          border-radius: 4px;
          padding: 8px;
          font-size: 15px;
          font-weight: 600;
        }

        .swiper-wrapper {
          display: flex;
          align-items: center;
        }

        .swiper-slide {
          width: auto !important;
        }

        .popular {
          background-color: #dbe6db;
          color: #0d5611;
        }

        .recent {
          background-color: #f5dede;
          color: #bd2420;
        }

        .frozen {
          background-color: #dfeef6;
          color: #288dc6;
        }

        .not-hot {
          background-color: #fdf0db;
          color: #f39c12;
        }

        .common {
          background-color: #f0f0f0;
          color: #525252;
        }
      }
    }

    .exhibitions-wrap {
      width: 100%;
      padding: 20px 20px 41px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
        color: #000000;
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        row-gap: 20px;
        column-gap: 12px;
        width: 100%;

        li {
          width: calc(50% - 6px);

          a {
            display: flex;
            flex-direction: column;
            gap: 9px;
          }

          .img-box {
            max-width: 154px;
            height: 154px;
            border-radius: 12px;
            background-color: black;

            @media (max-width: 700px) {
              max-width: 100%;
              height: auto;
              aspect-ratio: 1 / 1;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              background: lightgray;
              border-radius: 12px;
            }
          }

          p {
            font-weight: 600;
            font-size: 13px;
            line-height: 1.4;
            color: #000;
          }
        }
      }
    }
  }
}

/* E::: 검색 페이지 :::E */

/* S::: 검색 결과 페이지 :::S */
.search-result-main {
  .search-result-inner {
    .product-page-wrap {
      .content-wrap {
        .list-section {
          padding: 25px 20px 127px;

          .inner-wrap {
            height: 12px;
            background-color: #f5f5f5;
            width: 100%;
            border-top: 1px solid #e5e5e5;
            margin-left: -20px;
            margin-right: -20px;
            width: calc(100% + 40px);
          }

          .list-wrapper {
            margin-bottom: 30px;

            .thumb-item__media {
              width: 84px;
              height: 84px;
              position: relative;
            }

            .thumb-item__info {
              .brand-badge-wrap {
                bottom: 22px;
                max-width: 84px;
                width: 100%;
                overflow: hidden;

                >span {
                  padding: 3.5px 4px;

                  &:last-child {
                    padding-left: 12px;
                  }
                }
              }
            }
          }

          .hate-setting-box {
            margin-bottom: 32.5px;

            button {
              width: 100%;
              height: 32px;
              display: flex;
              gap: 4px;
              border-radius: 8px;
              background-color: #f3f7f3;
              justify-content: center;
              align-items: center;

              >span {
                font-weight: 400;
                font-size: 12px;
                color: #525252;
                padding-top: 1px;
              }
            }
          }

          .product-thumb-item-wrapper {
            .badge-wrap {
              .badge {
                padding: 1.5px 3px 2.5px;
              }
            }
          }
        }
      }
    }

    .search-label-wrap {
      padding-top: 25px;
    }

    .total-sort-search {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;

      >p {
        font-size: 14px;
        font-weight: 700;
      }

      .select-box {
        width: fit-content;
        height: 100%;

        font-size: 13px;
        font-weight: 400;
        color: #000;

        border: none;

        &::before {
          background: url(arrow-bottom-icon..svg?c0be5de78f0958e56a50) no-repeat center / cover;
          left: unset;
          right: 0;
          width: 16px;
          height: 16px;
          margin-left: 2px;
        }

        select {
          padding: 7px 18px 7px 9px;
          width: fit-content;
          height: 100%;

          text-align: right;
          text-align-last: right;

          option {
            text-align: left;
            direction: ltr;
            /* 일부 브라우저 대응 */
            background-color: #fff;
            color: #000;
          }
        }
      }
    }
  }
}

/* E::: 검색 결과 페이지 :::E */


/* S::: 기획전 상세페이지 :::S */
.l-panel {
  .event-list {
    display: flex;
    flex-wrap: wrap;

    .thumb-item {
      width: 50%;
    }
  }
}
/* E::: 기획전 상세페이지 :::E */
.cart {
  font-family: 'Pretendard', sans-serif;

  .address-wrapper {
    background: #fff;
    border-top: 1px solid #efefef;
    padding: 16px 20px 16.5px;
    .address-wrap {
      display: flex;
      flex-direction: column;
      gap: 11px;
      padding: 12px 10px;
      border: 1px solid #d9d9d9;
      border-radius: 12px;
      background-color: #f3f7f3;
      .address {
        display: flex;
        justify-content: space-between;
        padding: 0 6px;
        font: 700 16px/100% 'Pretendard', sans-serif;
        > div {
          display: flex;
          align-items: center;
          padding: 1.75px 0;
          > div {
            width: 1px;
            height: 14px;
            background-color: #d9d9d9;
            margin: 0 8px;
          }
        }
      }
      > button {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        width: 100%;
        height: 44px;
        border-radius: 8px;
        background: linear-gradient(90deg, #34c26f, #1d916c);
        color: #fff;
        font-weight: 700;
        font-size: 16px;
      }
    }
  }

  .divider {
    width: 100%;
    height: 12px;
    background-color: #e5e5e5;
  }

  .cart-select-manager {
    background-color: #fff;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #efefef;

    .check-all-btn {
      display: flex;
      text-align: center;

      > span {
        margin-left: 6px;
        font-size: 13px;
        color: #434343;
      }
    }
    > button {
      width: 65px;
      height: 30px;
      background-color: #f5f5f5;
      border-radius: 6px;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      color: #111111;
    }
  }

  .check-box {
    appearance: none;
    -webkit-appearance: none;

    min-width: 20px;
    height: 20px;

    background: url(checked-off-icon..svg?c7ce7a948c1bc5cebfad) no-repeat center / cover;
    cursor: pointer;
  }
  .check-box:checked {
    background: url(checked-icon..svg?c034c0628d063a8cf1db) no-repeat center / cover;
  }

  .cart__empty {
    background-color: #fff;
    color: #a3a3a3;
    padding: 74px 0;
  }

  .cart-delivery-section {
    background-color: #fff;
    width: 100%;

    .cart-product {
      max-width: 100%;
      display: flex;
      margin: 0 20px;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #efefef;

      .cart__product-detail {
        width: 100%;
        min-width: 0;
      }

      &:last-child {
        border-bottom: none;
      }

      .thumb-item {
        position: relative;
        width: 100%;
        .discount-badge {
          position: absolute;
          top: 24.5px;
          left: 16px;

          display: flex;
          width: 32px;
          height: 19px;
          text-align: center;
          align-items: center;
          justify-content: center;
          background-color: #ff3d25;
          color: #ffffff;
          font-weight: 700;
          font-size: 12px;
          line-height: 1;
          letter-spacing: -3%;
          border-radius: 99px;
          padding-top: 1px;
        }
        .brand-badge {
          position: absolute;
          top: 83px;
          left: 12px;
          display: flex;
          max-width: 84px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          background: linear-gradient(90deg, #34c26f, #1d916c);
          color: #ffffff;
          font-weight: 700;
          font-size: 12px;
          line-height: 1;
          letter-spacing: -3%;
          padding: 3.5px 4px;
          padding-top: 5px;
          border-radius: 0 8px;
        }

        .thumb-item__media {
          border-radius: 10px;
          overflow: hidden;
          margin-left: 12px;
        }
        .thumb-item__info {
          padding-left: 8px;
          max-height: 85px;
          height: 85px;
          width: 100%;
          min-width: 0;

          div {
            width: 100%;
          }
        }
        .product-thumb-item-wrapper {
          display: flex;
          flex-direction: column;
          gap: 4px;
          width: 100%;

          .badge-wrap {
            display: flex;
            gap: 3px;
            .badge {
              padding: 1.5px 2.5px;
              font-weight: 600;
              font-size: 10px;
              text-align: center;
              line-height: 1;
              border-radius: 4px;
              border: none;
              padding-top: 3px;
              &.blue {
                background: #dfeef6;
                color: #2070a0;
              }
              &.red {
                background: #ffe3d9;
                color: #c23100;
              }
            }
          }

          .product-thumb-item__name {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;

            .product-name {
              font-weight: 600;
              font-size: 16px;
              display: block;
              width: 100%;
              max-width: 100%;

              line-height: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            > span:last-child {
              font-size: 11px;
              font-weight: 400;
              color: #757575;
              line-height: 1;
            }
          }
        }
        .item-amount-wrap {
          display: flex;
          flex-direction: column;
          gap: 2px;
          > li {
            font-weight: 700;
            font-size: 13px;
            line-height: 1.3;
            &:last-child {
              font-weight: 400;
              font-size: 11px;
              color: #a3a3a3;
              text-decoration: line-through;
              line-height: 1;
            }
          }
        }
      }
    }

    .invalid {
      position: relative;
      .thumb-item__media {
        position: relative;

        &::after {
          content: '배송 불가';
          color: #fff;
          font-size: 16px;
          font-weight: 600;
          z-index: 1;

          display: flex;
          align-items: center;
          justify-content: center;

          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.8); /* 투명 검정 */
          pointer-events: none;
        }
      }
      .thumb-item__info {
        color: #cfcfcf;
        .product-thumb-item__name {
          > span {
            color: #cfcfcf !important;
          }
        }
        .item-amount-wrap {
          > li {
            color: #cfcfcf !important;
          }
        }
      }

      .delive-disabled {
        .quantity-changer {
          color: #cfcfcf;
          overflow: hidden;
          .quantity-changer__decrease-btn,
          .quantity-changer__increase-btn {
            background-color: #fff !important;
          }
          .text-field input[data-testid='text-field']:disabled {
            background-color: #fff;
            border-top: 1px solid var(--default-color);
            border-bottom: 1px solid var(--default-color);
          }
        }
      }
    }
    &.invalid-section {
      overflow: hidden;
      transition: height 0.45s ease;

      .info-box-wrap {
        padding: 0 20px 16px;
        border-bottom: 1px solid #efefef;
        .info-box {
          display: flex;
          gap: 8px;
          padding: 11px 16px;
          border: 1px solid #e5e5e5;
          border-radius: 8px;
          background-color: #f7f7f7;
          font-weight: 700;
          align-items: center;

          > div {
            display: flex;
            width: 41px;
            height: 22px;
            background-color: #434343;
            border-radius: 15px;
            font-size: 12px;
            color: #fff;
            line-height: 1;
            justify-content: center;
            align-items: center;
            padding-top: 1px;
          }
          > span {
            font-size: 13px;
            line-height: 1.3;
            white-space: pre-line;
          }
        }
      }
    }
  }

  .quantity-changer {
    width: 70px;
    height: 24px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;

    .text-field {
      width: 24px;
      > input {
        padding: 0;
      }
    }
    .quantity-changer__increase-btn,
    .quantity-changer__decrease-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      padding: 0;
      color: #a3a3a3;
      padding-top: 3px;
    }
  }

  .cart-payment-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 28px;
    background-color: #fff;
    > span {
      font-weight: 700;
      font-size: 16px;
    }
  }

  .price-tag-wrap {
    display: flex;
    flex-direction: column;
    padding: 16px 20px 20px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    .discount-box {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid #dbe6db;
      border-radius: 8px;
      background-color: #f3f7f3;
      color: #0d5611;
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 16px;
    }
    .price-info {
      display: flex;
      flex-direction: column;
      gap: 10px;
      > li {
        display: flex;
        justify-content: space-between;
        &:last-child {
          color: #c31212;
          font-weight: 700;
        }
        &.discount {
          > span {
            &:last-child {
              color: #c31212;
            }
          }
        }
      }
    }
    .price-tag__division {
      border: 1px solid #000000;
      margin: 16px 0;
    }
    .final-amount {
      display: flex;
      justify-content: space-between;
      color: #000000;
      font-weight: 700;
      em {
        font-size: 16px;
      }
    }
  }

  @media (max-width: 700px) {
    .cart-fixed-order-btn-wrap {
      max-width: 100% !important;
      margin: 0 auto;
    }
  }

  .cart-fixed-order-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    bottom: 0;
    left: 50%;
    /* transform: translateX(-50%); */
    width: 100%;
    max-width: 360px;
    z-index: 2;

    .coupon-discount {
      padding: 7.5px 16px;
      font-weight: 700;
      border: 2px solid transparent;
      border-radius: 40px;
      margin-bottom: 8px;

      background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #34c26f, #1d916c) border-box;
      > span {
        background: linear-gradient(90deg, #34c26f, #1d916c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .cart-fixed-order-btn {
      background-color: #fff;
      width: 100%;
      min-width: unset;
      border-radius: 12px 12px 0 0;
      padding: 20px 20px 16px;
      box-shadow: 0px 4px 34px 0px #0000001f;
      .cart-delivery-info {
        display: flex;
        width: 100%;
        flex-direction: column;
        text-align: center;
        line-height: 1;
        gap: 7px;
        > span:first-child {
          font-weight: 700;
          > label {
            color: #287cff;
          }
        }
        > span:last-child {
          font-weight: 500;
          font-size: 12px;
          color: #757575;
        }
        .red {
          color: #ff1c30;
        }
        .delivery-gauge {
          width: 100%;
          height: 6px;
          background: #eee;
          border-radius: 6px;
          margin-top: 6px;
          overflow: hidden;
        }

        .delivery-gauge-bar {
          height: 100%;
          width: 100%;
          background: linear-gradient(90deg, #34c26f, #1d916c);
          transition: width 0.3s ease;
          &.disabled {
            background: #525252;
          }
        }
      }
      .btn-wrap {
        display: flex;
        gap: 8px;
        width: 100%;
        margin-top: 16px;
        > button {
          font-weight: 700;
          font-size: 16px;
          height: 52px;
          text-align: center;
          align-items: center;
          border-radius: 10px;
          &.disabled {
            pointer-events: none;
            background-color: #d4d4d4;
          }
        }
        :first-child {
          border: 1px solid #cadacb;
          color: #0d5611;
          width: 121px;
        }
        :last-child {
          flex: 1;
          color: #fff;
          background-color: #0d5611;
        }
      }
    }
  }

  .delive-disabled-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    height: 48px;
    padding: 18px 22px 15px;
    > div {
      display: flex;
      align-items: baseline;
      gap: 4px;
      > span {
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
      }
      .red {
        color: #bd2420;
        font-size: 14px;
      }
    }
    img {
      transition: transform 0.5s ease;
    }
    img.open {
      transform: rotate(180deg);
    }
  }

  .cart-discount-wrap {
    width: 100%;
    background-color: #f7f7f7;
    padding: 32px 0 0 18px;
    .title {
      font-weight: 700;
      font-size: 20px;
      line-height: 1.2;
    }
    .list-wrap {
      margin-top: 24px;
      width: 100%;
      display: flex;
      gap: 15px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .item {
      display: flex;
      flex-direction: column;
      gap: 10.5px;
      width: 110px;
      margin-bottom: 31.5px;

      .product-img {
        position: relative;
        background-color: blue;
        width: 110px;
        height: 110px;
        border-radius: 12px;

        .discount-badge {
          position: absolute;
          top: 6px;
          left: 6px;
          display: flex;

          display: flex;
          width: 32px;
          height: 19px;
          text-align: center;
          align-items: center;
          justify-content: center;
          background-color: #ff3d25;
          color: #ffffff;
          font-weight: 700;
          font-size: 12px;
          line-height: 1;
          letter-spacing: -3%;
          border-radius: 99px;
          padding-top: 1px;
        }
        .cart-icon {
          width: fit-content;
          height: fit-content;
          position: absolute;
          bottom: 4px;
          right: 4px;
          display: flex;
        }
      }
      .product-info-wrap {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .badge-wrap {
          display: flex;
          gap: 4px;
          .badge {
            padding: 1.5px 2.5px;
            font-weight: 600;
            font-size: 10px;
            text-align: center;
            line-height: 1;
            border-radius: 4px;
            border: none;
            padding-top: 3px;
            &.blue {
              background: #dfeef6;
              color: #2070a0;
            }
            &.gray {
              background: #f0f0f0;
              color: #525252;
            }
          }
        }

        .product-title {
          font-weight: 600;
          font-size: 15px;
          line-height: 1.4;
          max-height: 42px;

          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .product-info {
          font-size: 13px;
          line-height: 1.2;
          color: #757575;
          max-height: 32px;

          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .price-wrap {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 1.5px;
        line-height: 1;
        .price {
          font-size: 13px;
          font-weight: 700;
          display: flex;
          gap: 4px;
          :first-child {
            color: #bd2420;
          }
        }

        .orgin-price {
          font-size: 12px;
          color: #a3a3a3;
        }
      }
    }
  }
}

/* S ::: GLOBAL ::: S */

.modal__box--alert {
  max-width: 320px;
  min-width: 320px;
  min-height: 1px;
  border-radius: 12px;
  overflow: hidden;
  padding: 20px;

  .modal__content {
    min-height: 1px;
    margin-bottom: 25px;
    padding: 0;
    text-align: left;
    justify-content: flex-start;

    .modal__text {
      div {
        text-align: left;
        font-size: 18px;
        font-weight: 700;
        color: #000;
        word-break: keep-all;
      }
    }
  }

  .modal__btns {
    border-top: 0 none;

    button {
      width: 85px;
      height: 40px;
      background: #0d5611;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }
  }
}

/* E ::: GLOBAL ::: E */

.ico--arrow-back {
  width: 24px;
  height: 24px;
  background: url(back-icon..svg?93aff5b7a34046739cd7) no-repeat center center;
}

/* S ::: 로그인 페이지 ::: S */
.sign-in {
  &.sign-in-wrapper {
    padding: 32px 20px;

    .logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
    }

    .normal-sign-in {
      .normal-sign-in__input-wrap {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;

        >p {
          font-size: 16px;
          font-weight: 700;
          color: #262626;
        }

        input {
          padding: 16px 20px;
          background: #fff;
          border-radius: 8px;
          border: 1px solid #d9d9d9;
          font-size: 14px;
          line-height: 1.5;

          &::placeholder {
            color: #a3a3a3;
          }
        }
      }

      button {
        margin-top: 16px;
        height: 52px;
        background: #0d5611;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        border-radius: 10px;
        border: 0 none;
      }
    }

    .sign-in-link {
      margin-top: 24px;

      .sign-in-link__item {
        padding: 0 12px;
        font-size: 14px;
        font-weight: 600;
        color: #434343;
      }
    }

    .social-login-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
      gap: 32px;

      .title-wrap {
        display: flex;
        align-items: center;
        width: 100%;

        h6 {
          padding: 0 11px;
          font-size: 14px;
          font-weight: 700;
          color: #525252;
        }

        .divider {
          background: #e5e5e5;
          height: 1px;
          display: block;
          width: calc(50% - 43px);
          flex: 1;
        }
      }

      .login-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;

        a {
          position: relative;

          .recent-login {
            position: absolute;
            padding: 5px 10px;
            color: #005ac3;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            font-weight: 700;
            min-width: 78px;
            text-align: center;
            width: 100%;
            background: #deeeff;
            border: 1px solid #bed7f2;
            border-radius: 100px;
            z-index: 2;

            &::after {
              content: '';
              position: absolute;
              bottom: -5px;
              left: 50%;
              transform: translateX(-50%) rotate(45deg);
              width: 8px;
              height: 8px;
              background: #deeeff;
              border-right: 1px solid #bed7f2;
              border-bottom: 1px solid #bed7f2;
              z-index: -1;
            }
          }
        }
      }

      .app-install-wrap {
        position: relative;
        width: 100%;

        .app-benefit-tooltip {
          position: absolute;
          padding: 7px 10px 5px;
          color: #fff;
          top: -14px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          font-weight: 700;
          min-width: 87px;
          text-align: center;
          background: #000;
          border-radius: 100px;
          z-index: 2;

          &::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 6px;
            height: 6px;
            background: #000;
            z-index: -1;
          }
        }

        button {
          width: 100%;
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          border: 3px solid transparent;
          border-radius: 12px;
          background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #34c26f, #1d916c) border-box;

          p {
            font-size: 15px;
            font-weight: 700;
            background: linear-gradient(90deg, #34c26f, #1d916c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
}

/* E ::: 로그인 페이지 ::: E */

.ico--arrow-back {
  width: 24px;
  height: 24px;
  background: url(back-icon..svg?93aff5b7a34046739cd7) no-repeat center center;
}

/* S ::: 회원가입 페이지 ::: S */
.sign-up-menu {
  &.sign-up-menu-wrapper {
    padding: 32px 20px;

    .logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
    }

    .social-coupon-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .kakao-wrap {
        a {
          display: block;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 12px;
          padding: 18px 0;
          border-radius: 10px;
          background: #feeb00;

          p {
            font-size: 15px;
            font-weight: 700;
            color: #3b1e1e;
          }
        }
      }

      .coupon-wrap {
        padding: 23px 12px;
        background: #2d3f4f;
        gap: 16px;
        display: flex;
        align-items: center;
        box-shadow: 0px 4px 24px 0px rgba(46, 123, 103, 0.03);
        border-radius: 12px;

        .text-wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 5px;

          span {
            font-size: 14px;
            font-weight: 500;
            color: #16a085;
          }

          p {
            font-size: 18px;
            line-height: 1.1;
            font-weight: 700;
            color: #fff;
          }
        }
      }
    }

    .social-signup-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 32px;
      gap: 32px;
      padding-bottom: 24px;
      border-bottom: 1px solid #e5e5e5;

      .title-wrap {
        display: flex;
        align-items: center;
        width: 100%;

        h6 {
          padding: 0 30px;
          font-size: 14px;
          font-weight: 700;
          color: #525252;
        }

        .divider {
          background: #e5e5e5;
          height: 1px;
          display: block;
          width: calc(50% - 43px);
          flex: 1;
        }
      }
    }

    .login-list {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;

      a {
        position: relative;

        .recent-login {
          position: absolute;
          padding: 5px 10px;
          color: #005ac3;
          top: -20px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          font-weight: 700;
          min-width: 78px;
          text-align: center;
          width: 100%;
          background: #deeeff;
          border: 1px solid #bed7f2;
          border-radius: 100px;
          z-index: 2;

          &::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 8px;
            height: 8px;
            background: #deeeff;
            border-right: 1px solid #bed7f2;
            border-bottom: 1px solid #bed7f2;
            z-index: -1;
          }
        }
      }
    }

    .login-msg {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin: 24px 0 38px;

      p {
        font-size: 14px;
        font-weight: 700;
        color: #525252;
      }

      a {
        font-size: 14px;
        font-weight: 700;
        color: #0d5611;
      }
    }

    .app-install-wrap {
      position: relative;
      width: 100%;

      .app-benefit-tooltip {
        position: absolute;
        padding: 7px 10px 5px;
        color: #fff;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        font-weight: 700;
        min-width: 87px;
        text-align: center;
        background: #000;
        border-radius: 100px;
        z-index: 2;

        &::after {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          width: 6px;
          height: 6px;
          background: #000;
          z-index: -1;
        }
      }

      button {
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 3px solid transparent;
        border-radius: 12px;
        background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #34c26f, #1d916c) border-box;

        p {
          font-size: 15px;
          font-weight: 700;
          background: linear-gradient(90deg, #34c26f, #1d916c);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}

/* E ::: 회원가입 페이지 ::: E */

/* S ::: 회원가입 페이지 /sign-up/form ::: S */
.sign-up-form-wrapper {
  .sign-up-form__item {
    margin-top: 20px;

    &.password-check {
      margin-top: 0;
    }
  }

  .password-msg-wrap {
    padding: 11px 16px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-top: 12px;

    p {
      line-height: 1.3;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      color: #757575;
    }
  }

  .divider {
    width: calc(100% + 40px);
    margin: 26px 0 20px;
    margin-left: -20px;
  }

  .sign-up-form__input-wrap .select-box {
    border-radius: 8px;
    border: 1px solid #d9d9d9;

    select {
      padding: 16px 20px;
      height: 52px;
      font-size: 14px;
      line-height: 1.5;
      color: #000;
    }
  }

  .sign-up-form__input-wrap {
    margin-top: 12px;
    position: relative;

    .exist-btn-wrap {
      position: absolute;
      top: 11px;
      right: 20px;

      display: flex;
      gap: 10px;
      align-items: center;

      .btn-clear {
        width: 20px;
        height: 20px;
        display: inline-block;

        background: url(close-icon..svg?ac31fd4edde2efe08a29) no-repeat center/ cover;
      }

      .existBtn {
        width: 69px;
        height: 30px;
        background: #F5F5F5;

        border-radius: 6px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: #111;
        font-size: 13px;
        font-weight: 500;
      }
    }

    .phone-number-input .select-box {
      flex: 3;
    }

    .text-field {
      border-radius: 8px;
      border: 1px solid #d9d9d9;

      &.email-input__domain {
        flex: 2.2;
      }

      input {
        padding: 16px 20px;
        height: 52px;
        font-size: 14px;
        line-height: 1.5;
        color: #000;

        &::placeholder {
          color: #a3a3a3;
        }

        &#id {
          padding-right: 88px;
        }
      }
    }
  }

  .sign-up-form__tit {
    font-size: 16px;
    font-weight: 700;
    color: #262626;

    .required {
      display: none;
    }
  }

  .description.alert {
    color: #757575;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
  }
}

.sign-up-form__agree-wrapper {
  margin-top: 0;

  .check-radio {
    font-size: 13px;
    font-weight: 400;
    color: #434343;
  }

  .check-radio__ico {
    width: 20px;
    height: 20px;
    border: 0 none;
    background: url(default-checkbox..svg?953dc38e1c5fffffc983) no-repeat center / cover;

    .ico--check-white {
      display: none;
    }
  }

  .check-radio input:checked~ :where(.check-radio__ico) {
    background: url(checked-icon..svg?c034c0628d063a8cf1db) no-repeat center / cover;
  }

  .sign-up-form__checkbox--all {
    justify-content: flex-start;
    border: 0 none;
    font-weight: 600;
    height: auto;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
  }

  .sign-up-form__agree-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;

    li {
      cursor: pointer;
      padding: 10px 0;
      margin-top: 0 !important;

      span {
        font-size: 13px;
        font-weight: 400;
        color: #434343;
      }

      .sign-up-form__checkbox--partial {
        button {
          color: #0d5611;
          font-size: 13px;
          font-weight: 700;
        }
      }
    }
  }

  .marketing-receive-agreement {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;

    >li {
      padding: 10px 0;
      cursor: pointer;
      margin-top: 0 !important;

      .marketing-receive-agreement__sub-list {
        display: flex;
        flex-direction: row;
        padding-left: 0;
        padding: 6px 20px;
        background: #f7f7f7;
        border-radius: 8px;
        gap: 30px;

        li {
          padding: 10px 0;
        }
      }
    }
  }
}

.ship-address-msg-wrapper {
  padding: 18px 16px 18px;
  margin-top: 20px;
  border: 3px solid transparent;
  border-radius: 12px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #34c26f, #1d916c) border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  text-align: center;

  .msg-button {
    background: linear-gradient(90deg, #34c26f 0%, #1d916c 100%);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border-radius: 8px;
  }

  .msg-text {
    p {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      color: #525252;
    }
  }
}

.sign-up-form-container {
  padding-bottom: 96px;
  position: relative;

  @media (max-width: 700px) {
    .sign-up-btn {
      width: 100% !important;
      margin: 0 auto;
    }
  }

  .sign-up-btn {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;

    button {
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d5611;
      color: #fff;
    }

    &.disabled {
      opacity: 1;

      button {
        background: #d4d4d4;
      }
    }
  }
}

/* E ::: 회원가입 페이지 /sign-up/form ::: E */

/* S ::: 회원가입 완료 /sign-up-confirm ::: S */
.sign-up-confirm-wrapper {
  z-index: 1;
  position: relative;
  padding: 72px 20px 0;

  &::after {
    content: '';
    display: block;
    width: 360px;
    height: 500px;
    background: linear-gradient(180deg, #dae9da 0%, #ffffff 100%);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  .icon-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-bottom: 72px;

    p {
      font-size: 20px;
      font-weight: 700;
      color: #0d5611;
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;

    li {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;

      >div {
        width: 100%;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-direction: column;

        gap: 16px;

        a {
          width: 100%;
          height: 320px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: inline-block;
            border-radius: 12px;
          }
        }

        .banner-button {
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 700;
          color: #fff;
          border-radius: 10px;
          background: #0d5611;
        }

      }
    }
  }
}

/* E ::: 회원가입 완료 /sign-up-confirm ::: E */

/* S ::: 아이디 찾기 /find-id ::: S */
.find-id-wrapper {
  .tabs {
    display: none;
  }

  .find-id {
    margin-top: 16px;
  }

  .find-id-form {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .find-id-form__item {
      display: flex;
      flex-direction: column;
      gap: 12px;

      >p {
        font-size: 16px;
        font-weight: 700;
        color: #262626;
      }
    }
  }

  .find-id-form__item {
    .find-id-form__input-wrap {
      input {
        padding: 16px 20px;
        height: 52px;
        font-size: 14px;
        line-height: 1.5;
        color: #000;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #d9d9d9;

        &::placeholder {
          color: #a3a3a3;
        }
      }

      .alert-msg {
        font-size: 13px;
        line-height: 1.3;
        font-weight: 500;
        color: #757575;
        margin-top: 6px;
      }

      .phone-number-input {
        .select-box {
          flex: 2.5;
        }

        select {
          border-radius: 8px;
          border: 1px solid #d9d9d9;
          padding: 16px 20px;
          height: 52px;
          font-size: 14px;
          line-height: 1.5;
          color: #000;
          background: #fff;
        }
      }
    }
  }

  @media (max-width: 700px) {
    .find-id-form__btn-wrap {
      width: 100% !important;
      margin: 0 auto;
    }
  }

  .find-id-form__btn-wrap {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    margin-top: 0;

    button {
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d5611;
      color: #fff;
      border: 0 none;

      &:disabled {
        background: #d4d4d4;
      }
    }

    .password-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-bottom: 24px;

      >p {
        font-size: 14px;
        font-weight: 700;
        color: #525252;
      }

      .find-id-result__link--password {
        font-size: 14px;
        font-weight: 700;
        color: #0d5611;
        text-decoration: underline;
        width: auto;
        height: auto;
        border: 0 none;
        line-height: 1;
      }
    }
  }

  .find-id-result-wrapper {
    padding: 16px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    gap: 6px;
    border: 1px solid #dbe6db;
    border-radius: 8px;
    background: #f3f7f3;

    .find-id-result__id-text {
      font-weight: 700;
      margin-top: 0;
      padding: 0;
      background: transparent;
      color: #0d5611;
    }
  }

  .find-id-form__caution-wrapper {
    padding: 16px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;

    p {
      margin-top: 0;
      font-size: 14px;
      line-height: 1.3;
      font-weight: 700;
      text-align: center;
      color: #757575;
    }
  }
}

/* E ::: 아이디 찾기 /find-id ::: E */
.product-page-wrap {
  width: 100%;
  font-family: 'Pretendard', sans-serif;

  .product-page-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;

    .head-banner-wrap {
      padding: 8px 20px 16px;

      >.banner {
        display: flex;
        gap: 15.3px;
        width: 100%;
        height: 100px;
        padding: 0 12px;
        border-radius: 12px;
        background-color: #2d3f4f;
        box-shadow: 0px 4px 24px 0px #2e7b6708;
        justify-content: left;
        align-items: center;

        >img {
          margin-top: 0.5px;
        }

        .text-wrap {
          display: flex;
          flex-direction: column;
          gap: 5px;

          :first-child {
            font-weight: 500;
            line-height: 1;
            color: #16a085;
          }

          :last-child {
            font-weight: 700;
            font-size: 18px;
            line-height: 1.1;
            color: #fff;
          }
        }
      }
    }

    .middle-banner {
      display: flex;
      margin: 17px 0 24px;
      gap: 12px;
      width: 100%;
      height: 100px;
      padding: 0 9px;
      border-radius: 12px;
      background-color: #2d3f4f;
      box-shadow: 0px 4px 24px 0px #2e7b6708;
      justify-content: left;
      align-items: center;

      .text-wrap {
        display: flex;
        flex-direction: column;
        gap: 5px;

        :first-child {
          font-weight: 500;
          line-height: 1;
          color: #16a085;
        }

        :last-child {
          font-weight: 700;
          font-size: 18px;
          line-height: 1.1;
          color: #fff;
        }
      }
    }
  }

  .content-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    border-top: 1px solid #d9d9d9;

    .category {
      width: 83px;
      min-width: 83px;
      display: flex;
      flex-direction: column;
      flex: 1;
      border-right: 1px solid #d9d9d9;

      .swiper {
        width: 100%;
        height: 100%;
        margin: 0;
        margin-right: auto;
        position: unset;
        overflow: unset;
        list-style: none;
        padding: 0 6px 8px;
        z-index: unset;

        .swiper-wrapper {
          display: flex;
          flex-direction: column;
          gap: 10px;
          height: fit-content;
          position: sticky;
          top: 52px;

          .swiper-slide {
            max-height: 40px;
            height: 40px;
            position: relative;

            /* 말풍선 본체 스타일 */
            .tooltip-recommned {
              position: absolute;
              bottom: 21px;
              right: -15px;
              z-index: 1;

              background-color: #BD2420;
              color: #fff;
              border-radius: 50px;

              width: 32px;
              height: 18px;
              display: flex;
              align-items: center;
              justify-content: center;

              font-size: 12px;
              font-weight: 700;
              white-space: nowrap;
              z-index: 1;

              &::after {
                content: "";
                position: absolute;
                top: 10px;
                left: 31px;
                transform: translateX(-100%);
                width: 7px;
                height: 10px;
                background: url(tooltip-recommend..svg?e4aec262af028e33c1b4) no-repeat center / cover;

                z-index: -1;
              }
            }

            >a {
              display: flex;
              width: 100%;
              height: 100%;
              padding: 0 4px;
              padding-top: 2px;
              overflow: hidden;

              /* border: 1px solid black; */
              border-radius: 8px;
              justify-content: left;
              align-items: center;
              font-size: 13px;
              font-weight: 400;
              line-height: 1;
              color: #333333;

              &.is-active {
                font-weight: 700;
                color: #fff;
                background-color: #0d5611;

                &::before {
                  content: '';
                  position: absolute;

                  width: 48px;
                  height: 26px;

                  background: url(hanok-white-icon..svg?915471b5c021f32c33ca) no-repeat center;
                  background-size: 48px 26px;

                  left: 34px;
                  top: 17px;

                  opacity: 0.2;
                }
              }
            }

            .nav__link.is-active::after {
              display: none;
            }
          }
        }
      }
    }

    .list-section {
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 14px 16px 200px 12px;

      .hate-setting-box {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        margin-bottom: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 12px;
        box-shadow: 0px 4px 34px 0px #0000000d;

        div:first-child {
          display: flex;
          justify-content: space-between;

          >span {
            padding: 2px 0 1px;
            font-weight: 700;
            font-size: 13px;
            color: #404040;
          }

          .toggle-switch {
            position: relative;
            display: inline-block;
            width: 28px;
            height: 16px;
          }

          .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
          }

          .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: #ddd;
            border-radius: 999px;
            transition: 0.3s;
          }

          /* 원 */
          .slider::before {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            left: 2px;
            top: 2px;
            background-color: white;
            border-radius: 50%;
            transition: 0.3s;
          }

          /* 체크되면 */
          .toggle-switch input:checked+.slider {
            background-color: #0d5611;
          }

          .toggle-switch input:checked+.slider::before {
            transform: translateX(12px);
          }
        }

        button {
          width: 100%;
          height: 32px;
          display: flex;
          gap: 4px;
          border-radius: 8px;
          background-color: #f3f7f3;
          justify-content: center;
          align-items: center;

          >span {
            font-weight: 400;
            font-size: 12px;
            color: #525252;
            padding-top: 1px;
          }
        }
      }
    }

    .label-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 16px;

      .label {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.1;
      }

      .sub-label {
        line-height: 1.5;
        color: #404040;
        white-space: pre-wrap;
        margin-bottom: -5px;
      }
    }

    .list-wrapper {
      width: 100%;

      .thumb-item__media {
        width: 104px;
        height: 104px;
      }

      .thumb-LIST {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .product-category-observer {
        width: 100%;
      }

      .product-category-section {
        scroll-margin-top: 100px;

        &__title {
          margin: 22px 0 12px;
          font-weight: 700;
          font-size: 18px;
          line-height: 1.2;
          color: #111;
        }

        &:first-child {
          .product-category-section__title {
            margin-top: 0;
          }
        }

        .product-category-section__title {
          margin: 22px 0 21px;
          font-weight: 700;
          font-size: 18px;
          line-height: 1.1;
        }
      }

      .thumb-item {
        position: relative;
        width: 100%;
        padding: 0;
        border: none;

        .thumb-item__info {
          padding: 10px 32px 10px 8px;
        }

        .cart-icon {
          position: absolute;
          right: 0px;
          bottom: 50%;
          transform: translateY(50%);
          cursor: pointer;
        }

        .discount-badge {
          position: absolute;
          top: 4px;
          left: 4px;

          display: flex;
          width: 32px;
          height: 19px;
          text-align: center;
          align-items: center;
          justify-content: center;
          background-color: #ff3d25;
          color: #ffffff;
          font-weight: 700;
          font-size: 12px;
          line-height: 1;
          letter-spacing: -3%;
          border-radius: 99px;
          padding-top: 1px;
        }

        .brand-badge-wrap {
          position: absolute;
          bottom: 2px;
          left: 0;
          display: flex;

          >span {
            display: flex;
            align-items: center;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            font-weight: 700;
            font-size: 12px;
            line-height: 1;
            letter-spacing: -3%;
            padding: 3.5px 4px;
            padding-top: 5px;
            border-radius: 0 8px;

            color: #ffffff;

            z-index: 2;

            &.green {
              background: linear-gradient(90deg, #34c26f, #1d916c);
            }

            &.yellow {
              background: linear-gradient(90deg, #f9a825, #ffd600);
            }

            &.blue {
              background: linear-gradient(90deg, #3495c2, #491d91);
            }

            &:last-child {
              margin-left: -10px;
              padding-left: 12px;
              z-index: 1;
            }
          }
        }

        .product-thumb-item-wrapper {
          display: flex;
          flex-direction: column;
          gap: 4px;
          width: 100%;

          .badge-wrap {
            display: flex;
            gap: 3px;

            .badge {
              padding: 1.5px 2.5px;
              font-weight: 600;
              font-size: 10px;
              text-align: center;
              line-height: 1;
              border-radius: 4px;
              border: none;
              padding-top: 3px;

              &.blue {
                background: #dfeef6;
                color: #2070a0;
              }

              &.red {
                background: #ffe3d9;
                color: #c23100;
              }
            }
          }

          .product-thumb-item__name {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;

            >span {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .product-name {
              font-weight: 600;
              font-size: 16px;
              display: block;
              width: 100%;
              max-width: 100%;

              line-height: 1;
            }

            >span:last-child {
              font-size: 11px;
              font-weight: 400;
              color: #757575;
              line-height: 1;
            }
          }
        }

        .item-amount-wrap {
          display: flex;
          flex-direction: column;
          gap: 2px;
          margin-top: 6px;

          >li {
            font-weight: 400;
            font-size: 11px;
            color: #a3a3a3;
            text-decoration: line-through;
            line-height: 1;

            &:first-child {
              font-weight: 700;
              font-size: 13px;
              line-height: 1.3;
              color: #111111;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

.product-detail-wrapper {
  .swiper-pagination {
    display: none;
  }

  .product-detail {
    width: 100%;

    .slider-wrapper {
      position: relative;

      .custom-siwpter-pagination {
        position: absolute;
        bottom: 16px;
        right: 16px;
        z-index: 1;
        padding: 0 8px;

        display: flex;

        justify-content: space-between;
        align-items: center;

        width: 40px;
        height: 20px;
        opacity: 0.5;
        border-radius: 40px;
        background-color: #757575;

        font-family: Pretendard;
        font-size: 12px;
        color: #ffffff;
        line-height: 1;

        >div {
          height: 9px;
          width: 1px;
          background-color: #ffffff;
          opacity: 0.4;
        }
      }
    }

    .product-summary {
      padding: 32px 20px 29px;

      .product-info-wrap {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .badge-wrap {
          display: flex;
          gap: 3px;

          .badge {
            padding: 3px;
            font-weight: 600;
            font-size: 12px;
            text-align: center;
            line-height: 1;
            border-radius: 4px;
            border: none;

            &.blue {
              background: #dfeef6;
              color: #2070a0;
            }

            &.red {
              background: #ffe3d9;
              color: #c23100;
            }

            &.gray {
              background: #f0f0f0;
              color: #525252;
            }

            &.yellow {
              background: #fdf0db;
              color: #f39c12;
            }

            &.green {
              background: #dbe6db;
              color: #0d5611;
            }
          }
        }

        .product-summary__title {
          margin-top: 0;
          font-weight: 700;
          font-size: 24px;
          line-height: 1.2;
        }

        .product-sub-title {
          color: #757575;
          line-height: 1.2;
        }
      }

      .product-summary__price-info {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;

        .product-summary__price-detail {
          display: flex;
          gap: 4px;

          p {
            display: flex;
            align-items: center;
          }

          .product-summary__off-percent,
          .product-summary__price,
          span {
            font-family: Pretendard, sans-serif;
            font-weight: 700;

            font-size: 18px;
            line-height: 100%;
            letter-spacing: 0%;
            margin: 0;
          }
        }

        .product-summary__original-price {
          margin-top: 0;
          font-size: 13px;
        }

        .product-review-box {
          width: 100%;
          height: 52px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;

          border: 2px solid transparent;
          border-radius: 12px;
          background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #34c26f, #1d916c) border-box;

          font-family: Pretendard, sans-serif;
          font-weight: 600;
          margin-top: 14px;

          span {
            color: #0d5611;
          }

          >button {
            width: 43px;
            height: 26px;
            font-weight: 700;
            font-size: 13px;
            color: #0d5611;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f3f6f3;
            border-radius: 6px;
          }
        }
      }
    }

    .flavor-review-wrap {
      padding: 30px 20px;

      .review-score {
        margin-left: -4px;
        display: flex;
        gap: 4px;
        align-items: center;

        >span {
          display: flex;
          align-items: center;

          font-family: Pretendard, sans-serif;
          font-weight: 700;
          font-size: 24px;

          padding-top: 5px;
        }

        >img {
          display: block;
        }
      }

      .review-count {
        font-family: Pretendard, sans-serif;
        font-weight: 700;
        line-height: 1.3;
        margin-top: 5px;

        >span {
          color: #07560e;
        }
      }

      .img-wrap {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 22px;
      }

      .graph-wrapper {
        .title {
          margin: 8px 20px 0 20px;
          height: 40px;

          border: 1px solid #0d5611;
          border-radius: 4px;
          background-color: #f3f7f3;
          color: #0d5611;

          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 13px;
          line-height: 1.3;

          position: relative;
          z-index: 1;
        }

        .graph-wrap {
          margin-top: -20px;
          background-color: #f5f5f5;
          border-radius: 12px;
          width: 100%;

          padding: 46px 22px 10px 25px;

          .graph {
            width: 100%;
            aspect-ratio: 1 / 1;
            margin: 0 auto;
          }
        }
      }

      .advice-box {
        display: flex;
        flex-direction: column;
        gap: 10px;

        margin-top: 16px;
        padding: 12px 20px;
        background-color: #f5f5f5;
        border-radius: 12px;

        >div {
          display: flex;
          gap: 9px;

          justify-content: flex-start;
          align-items: center;
          white-space: pre-line;

          >div {
            font-weight: 700;
            line-height: 1.3;

            >span {
              color: #0d5611;
            }
          }
        }

        >span {
          line-height: 1.5;
          color: #757575;
          white-space: pre-line;
        }
      }
    }

    .detail-info-wrapper {
      .tabs {
        top: 52px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        line-height: 44px;
        font-family: Pretendard, sans-serif;
        font-size: 13px;
        font-weight: 400;
        height: 52px;
        padding: 8px 0 4px;
        margin: 0;
        /* background: var(--whole-color); */

        .tabs__item {
          font-size: 13px;

          position: relative;

          .tooltip {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);

            background: #e6eee7;
            color: #0d5611;

            padding: 2px 5px;
            border-radius: 8px;

            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            border-radius: 2px;

            white-space: nowrap;

            &::before {
              content: '';
              position: absolute;

              width: 10px;
              height: 10px;
              bottom: -3px;
              left: 50%;
              border-radius: 2px;
              transform: translateX(-50%) rotate(45deg);

              background: #e6eee7;
              z-index: -1;
            }
          }
        }

        .on {
          color: #0d5611;
          border-color: #0d5611;

          font-weight: 700;
        }
      }

      .product-content__content {
        padding: 0 20px;
      }

      .product-review-summary {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        gap: 43px;
        border-bottom: 1px solid #e5e5e5;

        .product-review-summary-title-wrap {
          display: flex;
          gap: 4px;

          >p {
            font-weight: 700;
            font-size: 23px;
            line-height: 1;
          }

          >div {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ebf3ef;
            color: #0d5611;
            border-radius: 30px;
            height: 22px;
            padding: 0 10px;
            font-weight: 700;
            font-size: 12px;
          }
        }

        .product-review-summary-rating {
          display: flex;
          flex-direction: column;
          gap: 7px;
          align-items: center;

          .rate {
            font-family: Pretendard, sans-serif;
            font-weight: 700;
            font-size: 32px;
            line-height: 1.1;
          }

          .rating-star {
            width: 130px;
            height: 26px;

            &::before {
              background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
            }

            .rating-star__progress {
              background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
            }
          }
        }
      }

      .product-board-list {
        .product-board-list__items {
          .thumb-LIST:last-child {

            /* border-bottom: 1px solid #e5e5e5; */
            >.product-review-item {
              border: none;
            }
          }
        }

        .product-review-item {
          border-bottom: 1px solid #e5e5e5;
        }

        .product-board-header {
          display: flex;
          flex-direction: column;
          gap: 20px;
          padding: 20px 0;
          overflow: hidden;

          .image-review {
            display: flex;
            flex-direction: column;
            gap: 9px;

            >span {
              font-weight: 700;
              font-size: 18px;
              line-height: 1.1;
              padding: 0 20px;
            }

            >div {
              display: flex;
              width: 100%;

              >div {
                width: 100%;
                height: 100px;
                white-space: nowrap;

                .image-review-card {
                  width: 100px;
                  height: 100px;
                  background-color: blue;
                  border-radius: 12px;
                  white-space: nowrap;
                }
              }
            }
          }

          .product-board-list-search {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;

            >p {
              font-weight: 700;
              font-size: 13px;
            }

            .product-board-list__sort-type {
              select {
                padding: 0;
                padding-right: 22px;
                font-weight: 700;
                font-size: 13px;
                color: #262626;
              }
            }

            .product-board-list__sort-type::after {
              background: url(arrow-bottom-icon..svg?c0be5de78f0958e56a50);
              width: 18px;
              height: 18px;
            }

            .select-box::after {
              right: 0;
            }
          }
        }

        .product-review-item {
          display: flex;
          flex-direction: column;
          padding: 16px 20px;

          .product-review-item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .product-review-item-info {
              display: flex;
              height: 20px;
              gap: 8px;
              justify-content: center;
              align-items: center;

              .product-review-item-member-id {
                font-weight: 700;
                font-size: 12px;
                line-height: 1;
              }

              .count-badge {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 4px 5px;

                background-color: #e6eee7;

                color: #0d5611;

                font-size: 12px;
                line-height: 1;
              }

              .product-review-item__rating {
                .rating-star {
                  width: 86px;
                  height: 17px;

                  margin: 0;

                  &::before {
                    background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
                    /* background: url('../../../public/assets/svg/star-gray-icon.svg') repeat-x; */
                    background-size: auto 100%;
                    inset: 0;
                    background-position: unset !important;
                  }

                  .rating-star__progress {
                    background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
                    /* background: url('../../../public/assets/svg/star-green-icon.svg') repeat-x; */
                    background-size: auto 100%;
                    inset: 0;
                    background-position: unset !important;
                  }
                }
              }
            }

            .product-review-item-date {
              font-family: Pretendard, sans-serif;
              font-size: 12px;
              line-height: 1;
              color: #a3a3a3;
            }
          }

          .product-review-item-content {
            margin-top: 16px;
            line-height: 1.5;
            color: #333333;
          }

          .product-review-item-image {
            ul {
              margin-top: 8px;
              border: none;

              >li {
                width: 100px;
                height: 100px;
                border-radius: 12px;
                overflow: hidden;
              }
            }
          }
        }

        .bottom-sheet-overlay {
          position: fixed;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 360px;
          margin-left: 0 auto;
          height: 100%;

          background: rgba(0, 0, 0, 0.4);
          z-index: 999;

          display: flex;
          justify-content: center;
          align-items: flex-end;

          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;

          &.open {
            opacity: 1;
            pointer-events: auto;
          }

          .bottom-sheet {
            width: 100%;
            max-height: 90vh;

            background: #fff;
            border-radius: 20px 20px 0 0;
            box-sizing: border-box;
            overflow-y: auto;

            display: flex;
            flex-direction: column;

            transform: translateY(100%);
            transition: transform 0.3s ease;

            .bottom-sheet-header {
              position: relative;
              display: flex;
              align-items: center;
              padding: 0 20px;
              padding-top: 20px;
              width: 100%;
              touch-action: none;

              >span {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                font-weight: 700;
              }

              >img {
                margin-left: auto;
              }
            }

            .content-wrap {
              padding: 20px 20px 40px 20px;

              .slider {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;

                gap: 12px;

                scrollbar-width: none;

                .slide {
                  flex: 0 0 100%;
                  aspect-ratio: 1 / 1;

                  border-radius: 4px;

                  scroll-snap-align: center;
                }
              }

              .slider::-webkit-scrollbar {
                display: none;
              }

              .arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;

                &.left {
                  left: 0;
                }

                &.right {
                  right: 0;
                }
              }

              .review-img-wrap {
                margin-top: 8px;
                display: flex;
                gap: 8px;

                .review-img {
                  position: relative;
                  border-radius: 4px;
                  overflow: hidden;
                  width: 56px;
                  height: 56px;

                  &.active::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: #43434399 url(check-white-icon..svg?bca2f55e680b17da5e03) no-repeat center;
                    background-size: 20px 20px;
                  }
                }
              }

              .product-review-item {
                display: flex;
                flex-direction: column;
                border: none;
                padding: 0;
                margin-top: 24px;

                .product-review-item-top {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .product-review-item-info {
                    display: flex;
                    height: 20px;
                    gap: 8px;
                    justify-content: center;
                    align-items: center;

                    .product-review-item-member-id {
                      font-weight: 600;
                      font-size: 15px;
                      line-height: 1;
                    }

                    .count-badge {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding: 4px 5px;

                      background-color: #e6eee7;

                      color: #0d5611;

                      font-size: 12px;
                      line-height: 1;
                    }

                    .product-review-item__rating {
                      .rating-star {
                        width: 80px;
                        height: 16px;

                        margin: 0;

                        &::before {
                          background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
                          background-size: auto 100%;
                          inset: 0;
                          background-position: unset !important;
                        }

                        .rating-star__progress {
                          background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
                          background-size: auto 100%;
                          inset: 0;
                          background-position: unset !important;
                        }
                      }
                    }
                  }

                  .product-review-item-date {
                    font-family: Pretendard, sans-serif;
                    font-size: 13px;
                    line-height: 1;
                    color: #a3a3a3;
                  }
                }

                .product-review-item-content {
                  margin-top: 16px;
                  line-height: 1.5;
                  color: #333333;
                }
              }
            }
          }
        }
      }

      .more-btn {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;

        margin: 24px auto;
        height: 40px;

        border: 1px solid #d4d4d4;
        border-radius: 50px;
        padding: 0 23px 0 31px;

        font-size: 13px;
        line-height: 1;
        color: #434343;
      }

      .recomment-list-wrapper {
        padding: 34px 20px 32px 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .title-wrap {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .title {
            font-weight: 700;
            font-size: 22px;
            line-height: 1;
          }

          .sub-title {
            font-size: 16px;
            line-height: 1.2;
            color: #434343;
            white-space: pre-line;
          }
        }

        .list-wrap {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          margin-right: -20px;
          padding-right: 20px;

          scrollbar-width: none;

          -ms-overflow-style: none;

          .list-wrap::-webkit-scrollbar {
            display: none;
          }

          .item {
            display: flex;
            flex-direction: column;
            gap: 9px;
            width: 154px;

            .product-img {
              position: relative;
              background-color: blue;
              width: 154px;
              min-height: 206px;
              border-radius: 4px;
              overflow: hidden;

              .discount-badge {
                position: absolute;
                top: 10px;
                left: 10px;
                display: flex;

                width: 40.5px;
                height: 24px;
                text-align: center;
                align-items: center;
                justify-content: center;
                background-color: #ff3d25;
                color: #ffffff;
                font-weight: 700;
                font-size: 15px;
                line-height: 1;
                letter-spacing: -3%;
                border-radius: 125px;
              }

              .cart-icon {
                width: fit-content;
                height: fit-content;
                position: absolute;
                bottom: 10px;
                right: 10px;
                display: flex;
                cursor: pointer;
              }
            }

            .product-info-wrap {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .badge-wrap {
                display: flex;
                gap: 4px;

                .badge {
                  padding: 2.5px 3px;
                  font-weight: 600;
                  font-size: 10px;
                  text-align: center;
                  line-height: 1;
                  border-radius: 4px;
                  border: none;

                  &.blue {
                    background: #dfeef6;
                    color: #2070a0;
                  }

                  &.gray {
                    background: #f0f0f0;
                    color: #525252;
                  }
                }
              }

              .product-title {
                font-weight: 600;
                font-size: 15px;
                line-height: 1.4;
                max-height: 21px;

                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .product-info {
                font-size: 13px;
                line-height: 1.2;
                color: #757575;
                max-height: 32px;

                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .price-wrap {
              display: flex;
              flex-direction: column;
              gap: 6px;
              line-height: 1;
              margin-top: 3px;

              .price {
                font-size: 13px;
                font-weight: 700;
                display: flex;
                gap: 4px;

                :first-child {
                  color: #bd2420;
                }
              }

              .orgin-price {
                font-size: 12px;
                color: #a3a3a3;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }

  .product-content-review {
    margin-bottom: 128px;
  }
}

.divider {
  width: 100%;
  height: 12px;
  background-color: #e5e5e5;
}

@media (max-width: 700px) {
  .product-detail.purchase {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

.product-detail.purchase {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: 174px;
  background-color: #fafafa;
  padding: 20px;

  .purchase__opener {
    display: none;
  }

  .purchase__button-wrap {
    gap: 8px;

    .purchase__like-btn {
      border: none;
      width: fit-content;
      height: fit-content;
      padding: 0;
      background-color: unset;

      >img {
        max-width: unset;
      }
    }

    .purchase__buy-btn {
      background-color: #0d5611;
      border-radius: 10px;
      font-weight: 700;
      font-size: 16px;
      line-height: 1;
    }
  }
}
/* S::: 결제 완료 페이지 :::S */
.order-complete-container {
  margin-top: -52px;
  width: 100%;
  height: calc(100vh + 52px);
  background: linear-gradient(to bottom, #dae9da 0px, #ffffff 400px);
  padding: 72px 0 117px;

  .order-complete-inner {
    padding: 0 20px;

    .status-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;

      .check-icon-circle {
        width: 48px;
        height: 48px;
        background: url(green-circle-checkbox..svg?77cd254d452ed9517739) no-repeat center / cover;
      }

      h1 {
        font-size: 20px;
        font-weight: 700;
        color: #0d5611;
      }
    }

    .delivery-notice-card {
      width: 100%;
      margin-top: 32px;
      border: 1px solid #d9d9d9;
      border-radius: 12px;
      background-color: #fff;
      padding: 24px 0;
      text-align: center;

      .notice-text {
        font-size: 16p;
        font-weight: 600;
        line-height: 1.4;
        color: #111;

        strong {
          color: #0d5611;
        }
      }
    }

    .order-summary-list {
      width: 100%;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .summary-item {
        width: 100%;
        display: flex;
        gap: 12px;
        align-items: center;

        .label {
          min-width: 68px;
          width: 68px;
          white-space: nowrap;

          font-size: 14px;
          font-weight: 400;
          color: #757575;
        }

        .value {
          font-size: 14px;
          font-weight: 700;
          color: #111;

          &.discount {
            color: #bd2420;
          }
        }
      }
    }

    .action-area {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 28px;

      button {
        height: 52px;
        width: 100%;
        border-radius: 12px;
        background-color: #fff;
        display: flex;
        align-items: center;

        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.05em;
        line-height: 1.6;
      }

      .details-link-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 16px;
        border: 1px solid #d9d9d9;

        span {
          font-size: 14px;
          font-weight: 600;
          color: #111;
          letter-spacing: -0.05em;
          line-height: 1.6;
        }

        i {
          width: 24px;
          height: 24px;
          background: url(arrow-down-circle-gray..svg?6b258b4e21d9e487ea18) no-repeat center / cover;
        }
      }

      .track-delivery-btn {
        display: flex;
        justify-content: center;
        border: 1px solid #0d5611;

        color: #0d5611;
      }
    }
  }

  .banner-section {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .banner-item {
      width: 100%;
      height: 100px;
      background-color: #2d3f4f;
      border-radius: 12px;

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 18px;
      font-weight: 700;
      line-height: 1.1;
      color: rgba(255, 255, 255, 0.4);
    }
  }
}

/* E::: 결제 완료 페이지 :::E */

/* 헤더 관련 */
.header {
  .edit-btn {
    width: 43px;
    height: 26px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 400;
    color: #111;
  }
}

/* 정기 구독 공용 스타일링 */

/* 중간 바 */
.subs-line-bar {
  display: block;
  height: 12px;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  margin: 24px 0;
}

/* 결제 프로세스 영역 */
.stage-container {
  display: flex;
  align-items: center;
  gap: 0;

  .step {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    background-color: #d4d4d4;

    font-size: 11px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      background-color: #0d5611;
    }
  }

  .line-bar {
    width: 6px;
    height: 0px;
    border: 1px solid #d4d4d4;

    &.active {
      border: 1px solid #0d5611;
    }
  }
}

.header-opacity {
  background-color: transparent;
}

/* 구독 버튼 */

@media (max-width: 700px) {
  .subscribe-btn {
    max-width: calc(100% - 40px) !important;
    margin: 0 auto;
  }
}

.subscribe-btn {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  width: 100%;
  max-width: 320px;
  height: 52px !important;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #0d5611;
  border-radius: 10px !important;
  border: none;

  font-size: 16px !important;
  font-weight: 700;
  color: #fff;
}

.btn-submit-change {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  width: 100%;
  max-width: 320px;
  height: 52px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;

  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #d4d4d4;

  &.active {
    background-color: #0d5611;
  }

  @media (max-width: 700px) {
    max-width: calc(100% - 40px);
  }
}

/* 배송지 하이라이트 박스 */
.date-highlight-box {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #34c26f, #1d916c);

  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.subscribe-highlight-box {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background: #d9d9d9;

  &.active {
    background: linear-gradient(to right, #34c26f, #1d916c);
  }
}

/* S::: 정기 구독 페이지 :::S */
.subscription-container {
  width: 100%;
  height: 100%;
  padding: 15px 0 95px;

  @media (max-width: 700px) {
    .toast-wrapper {
      max-width: calc(100% - 40px) !important;
      margin: 0 auto;
    }
  }

  .subscription-inner {
    padding: 0 20px 36px;

    .intro-section {
      width: 100%;
      /* max-width: 320px; */
      height: 320px;
      border-radius: 20px;
      border: 2px solid transparent;

      background-image: url(subscribe-intro-img..png?4ff323ac8d3540ac37fc), linear-gradient(#fff, #fff),
        linear-gradient(to bottom, #33c16f, #1d916c);

      background-position: center;
      background-repeat: no-repeat;
      background-size: 200px auto, cover, cover;

      background-origin: border-box;
      background-clip: padding-box, padding-box, border-box;

      .wrap {
        width: 100%;
        height: 100%;
        padding: 36px 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;

        h2 {
          font-size: 22px;
          line-height: 1.3;
          font-weight: 700;
          color: #000;
        }

        button {
          width: 100%;
          background-color: #0d5611;
          border-radius: 10px;
          height: 52px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;

          font-size: 16px;
          font-weight: 700;
        }
      }
    }

    .calendar-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 20px;
      width: 100%;

      .calendar-wrap {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;

        padding: 20px;

        background-color: #f5f5f5;
        border: 1px solid #e5e5e5;
        border-radius: 12px;

        span {
          font-size: 16px;
          font-weight: 700;
          color: #171717;
        }

        .calendar-icon {
          width: 20px;
          height: 20px;
          background-color: gray;
          background: url(gray-calendar..svg?32903d038c2a3d8d1167) no-repeat center / cover;
        }
      }

      .middle-banner {
        display: flex;
        gap: 12px;
        width: 100%;
        height: 100px;
        padding: 0 9px;
        border-radius: 12px;
        background-color: #2d3f4f;
        box-shadow: 0px 4px 24px 0px #2e7b6708;
        justify-content: left;
        align-items: center;
        position: relative;

        .text-wrap {
          display: flex;
          flex-direction: column;
          gap: 5px;

          :first-child {
            font-weight: 500;
            line-height: 1;
            color: #16a085;
          }

          :last-child {
            font-weight: 700;
            font-size: 18px;
            line-height: 1.1;
            color: #fff;
          }
        }

        .page-nav {
          position: absolute;
          right: 12px;
          bottom: 12px;
          width: 40px;
          height: 20px;
          background-color: #525252;
          color: #fff;
          border-radius: 40px;

          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 12px;
          font-weight: 400;
        }
      }
    }

    .different-section {
      height: 100%;
      background-color: #f7f7f7;
      padding: 40px 20px 38px;
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 28px;
      width: calc(100% + 40px);

      display: flex;
      flex-direction: column;
      gap: 26px;

      .title-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;

        h2 {
          font-size: 22px;
          font-weight: 700;
          color: #000;
        }

        p {
          font-size: 16px;
          font-weight: 400;
          line-height: 1.3;
          color: #434343;
        }
      }

      .zipbab-wrap {
        width: calc(100% + 20px);
        margin-right: -20px;

        .swiper-wrapper {
          .zipbab-slide-item {
            background-color: #fff;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            text-align: center;
            padding: 0 12px 12px;

            img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 12px;
            }

            .desc {
              display: flex;
              flex-direction: column;
              gap: 4px;

              p {
                font-size: 16px;
                font-weight: 700;
                line-height: 1.3;
                color: #111;
              }

              span {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: #333;
              }
            }
          }
        }
      }
    }

    .discount-section {
      width: 100%;
      height: 100%;
      padding: 32px 0 36px;
      display: flex;
      flex-direction: column;
      gap: 24px;

      .discount-title-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;

        span {
          width: 80px;
          height: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px 9px 5px 13px;
          border-radius: 30px;
          background-color: #f8e9e9;

          font-size: 14px;
          font-weight: 700;
          color: #c31212;
          white-space: nowrap;
        }

        h2 {
          font-size: 22px;
          font-weight: 700;
          color: #000;
        }
      }

      .subscribe-item-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 12px;
        overflow: hidden;
        min-width: 0;

        .subscribe-item {
          display: flex;
          flex-direction: column;
          gap: 9px;
          width: calc(50% - 6px);
          cursor: pointer;

          .img-wrap {
            width: 154px;
            height: 154px;
            background-color: gray;
            position: relative;
            border-radius: 8px;

            @media (max-width: 700px) {
              width: 100%;
              height: auto;
              aspect-ratio: 1 / 1;
            }

            .img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .discount-badge {
              position: absolute;
              top: 10px;
              left: 10px;
              color: #fff;
              border-radius: 125px;
              background-color: #ff3d25;

              padding: 4px 5px;

              font-size: 15px;
              font-weight: 700;
              letter-spacing: -0.03em;
            }
          }

          .desc-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;

            .title-wrap {
              display: flex;
              flex-direction: column;
              gap: 4px;
              width: 100%;

              h3 {
                font-size: 15px;
                line-height: 1.4;
                font-weight: 600;
                color: #111111;
              }

              span {
                display: block;
                font-size: 13px;
                line-height: 1.2;
                font-weight: 400;
                color: #757575;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
              }
            }

            .price-wrap {
              display: flex;
              flex-direction: column;
              width: 100%;
              gap: 6px;

              .discount-wrap {
                display: flex;
                gap: 4px;
                font-size: 13px;
                font-weight: 700;

                .rate {
                  color: #bd2420;
                }

                .discount-price {
                  color: #111111;
                }
              }

              .original-price {
                font-size: 12px;
                color: #a3a3a3;
                font-weight: 400;
                text-decoration: line-through;
              }
            }
          }

          .btn-subscribe {
            width: 100%;
            height: 40px;
            border: 1px solid #cadacb;
            border-radius: 8px;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 14px;
            font-weight: 700;
            color: #0d5611;
          }
        }
      }
    }
  }

  /* inner 끝 */

  .banner {
    width: 100%;
    height: 120px;
    background-color: #d2e7e3;
    margin-bottom: 41px;

    p {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 22px;
      height: 100%;
      width: 100%;
    }
  }
}

/* E::: 정기 구독 페이지 :::E */

/* S::: 정기 구독 페이지 :::S */
.subscribe-list-container {
  width: 100%;
  height: 100%;

  .subscribe-list-inner {
    padding: 16px 20px;

    .subscribe-item-wrap {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 20px;

      .subscribe-item {
        display: flex;
        gap: 16px;
        overflow: hidden;
        cursor: pointer;

        .img-wrap {
          min-width: 124px;
          width: 124px;
          height: 124px;
          background-color: gray;
          position: relative;
          border-radius: 8px;

          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .discount-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #fff;
            border-radius: 125px;
            background-color: #ff3d25;

            padding: 4px 5px;

            font-size: 15px;
            font-weight: 700;
            letter-spacing: -0.03em;
          }
        }

        .desc-wrap {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 8px;
          overflow: hidden;

          .desc {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;

            .title-wrap {
              display: flex;
              flex-direction: column;
              width: 100%;

              h3 {
                font-size: 15px;
                line-height: 1.4;
                font-weight: 600;
                color: #111111;
              }

              span {
                display: block;
                font-size: 13px;
                line-height: 1.2;
                font-weight: 400;
                color: #757575;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
              }
            }

            .price-wrap {
              display: flex;
              flex-direction: column;
              width: 100%;
              gap: 6px;

              .discount-wrap {
                display: flex;
                gap: 4px;
                font-size: 13px;
                font-weight: 700;

                .rate {
                  color: #bd2420;
                }

                .discount-price {
                  color: #111111;
                }
              }

              .original-price {
                font-size: 12px;
                color: #a3a3a3;
                font-weight: 400;
                text-decoration: line-through;
              }
            }
          }

          .btn-subscribe {
            width: 100%;
            height: 40px;
            border: 1px solid #cadacb;
            border-radius: 8px;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 14px;
            font-weight: 700;
            color: #0d5611;
          }
        }
      }
    }
  }
}

/* E::: 정기 구독 페이지 :::E */

/* S::: 식단표 페이지 :::S */
.calendar-list-container {
  width: 100%;
  height: 100%;
  padding-bottom: 135px;

  .category-nav {
    border-bottom: 1px solid #e5e5e5;

    .swiper {
      width: 100%;
    }

    .swiper-wrapper {
      height: 53px;
      display: flex;

      .swiper-slide {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        button {
          padding: 16px 0;
          color: #a3a3a3;
          font-size: 13px;
          line-height: 1.4;
          font-weight: 400;
          width: 100%;

          &.active {
            color: #0d5611;
            border-bottom: 2px solid #0d5611;
            font-weight: 700;
          }
        }
      }
    }
  }

  .content-wrapper {
    width: 100%;
    height: 100%;
    padding: 16px 20px 50px;

    .meal-summary-card {
      width: 100%;
      border: 1px solid #d9d9d9;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px 20px;

      h3 {
        font-size: 18px;
        font-weight: 700;
        color: #111;
      }

      .description-box {
        padding: 12px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #f3f7f3;
        border-radius: 8px;

        font-size: 13px;
        font-weight: 500;

        p {
          color: #0d5611;

          span {
            color: #000;
          }
        }
      }
    }

    .week-navigation {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 16px;

      .month-selector {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
          width: 20px;
          height: 20px;
          background-color: lightgray;
          background: url(arrow-right-icon..svg?1cf33d0fc5c003bd1059) no-repeat center / cover;
          display: flex;
          align-items: center;
          justify-content: center;

          font-size: 0px;

          &:first-child {
            transform: rotate(180deg);
          }
        }

        span {
          font-size: 18px;
          font-weight: 700;
          color: #111;
        }
      }

      .week-pills {
        width: 100%;
        display: flex;
        gap: 4px;

        .pill {
          border: 1px solid #d4d4d4;
          border-radius: 28px;
          width: 63px;
          height: 40px;
          font-size: 14px;
          font-weight: 400;
          color: #434343;
          display: flex;
          justify-content: center;
          align-items: center;

          &.active {
            background-color: #0d5611;
            border: none;
            color: #fff;
          }
        }
      }
    }

    .menu-list {
      width: calc(100% + 20px);
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-right: 20px;
      overflow: hidden;

      .menu-group {
        display: flex;
        flex-direction: column;
        gap: 16px;

        h4 {
          font-size: 16px;
          font-weight: 700;
          color: #111;
        }

        .menu-list-wrap {
          width: 100%;
          display: flex;

          .menu-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: center;
            width: 100%;
            max-width: 80px;

            .img-holder {
              width: 80px;
              height: 80px;

              .img {
                width: 100%;
                height: 100%;
                background-color: lightgray;
              }
            }

            p {
              width: 100%;
              white-space: wrap;
              overflow: hidden;
              text-overflow: ellipsis;

              /* 멀티라인 말줄임 핵심 속성 */
              display: -webkit-box;
              -webkit-line-clamp: 2;
              /* 보여줄 줄 수 (2줄로 제한) */
              -webkit-box-orient: vertical;
              word-break: break-all;

              font-size: 13px;
              font-weight: 400;
              color: #111;
            }
          }
        }
      }
    }
  }
}

/* E::: 식단표 페이지 :::E */

/* S::: 정기구독 상세페이지 :::S */
.subscribe-detail-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 68px;

  .subscribe-img-wrap {
    margin-top: -52px;

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .detail-wrapper {
    width: 100%;
    height: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: -24px;
    background-color: #fff;
    position: relative;
    padding: 24px 0;

    .detail-header {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 20px;

      .detail-title {
        font-size: 22px;
        line-height: 1.3;
        font-weight: 700;
        color: #000;
      }

      .info-banner {
        width: 100%;
        height: 100%;
        background-color: #fcf7f1;
        border: 1px solid #f9eccc;
        border-radius: 12px;
        padding: 15px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;

        font-size: 14px;

        strong {
          font-weight: 700;
          line-height: 1.3;
          color: #a77b18;
        }

        p {
          font-weight: 400;
          line-height: 1.5;
          color: #a77b18;
        }
      }

      .calendar-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        cursor: pointer;

        span {
          font-size: 14px;
          font-weight: 600;
          color: #171717;
        }

        .icon {
          font-size: 0;
          background-color: lightgray;
          background: url(plus-icon..png?13b28e05c248452ad9c2) no-repeat center / cover;
          width: 24px;
          height: 24px;
        }
      }
    }

    .scroll-menu {
      width: 100%;
      height: 100%;
      margin-top: 15px;
      padding-bottom: 20px;

      .menu-card-wrap {
        width: 100%;

        .menu-card {
          width: 122px;
          height: 124px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          padding: 16px;
          background-color: #f5f5f5;
          border: 1px solid #e5e5e5;
          border-radius: 12px;
          position: relative;
          cursor: pointer;

          &.active {
            border: none;
            background-color: #f9a825;
          }

          .rating,
          p {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.05em;
            line-height: 1.3;
            color: #111111;
          }

          .img-wrap {
            width: 45px;
            height: 37px;
            position: absolute;
            bottom: 12px;
            right: 12px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .rating-wrap {
            display: flex;
            flex-direction: column;

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

          .icon-wrap {
            width: 24px;
            height: 24px;
            position: absolute;
            bottom: 12px;
            right: 12px;
            border-radius: 50%;
            background-color: #fff;
            background: url(btn_arrow-right..png?fe75ebdb8fbf0cda9c42) no-repeat center / cover;
          }
        }
      }
    }

    .section-bar {
      width: 100%;
      height: 12px;
      border-top: 1px solid #e5e5e5;
      background-color: #f5f5f5;
    }

    .subscribe-composition-wrapper {
      width: 100%;
      height: 100%;
      padding: 20px 20px 24px;

      .composition-card {
        width: 100%;
        height: 100%;
        border: 1px solid #0d5611;
        border-radius: 12px;
        padding: 20px 0 16px;

        .card-header {
          padding: 0 16px;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .title-wrap {
            display: flex;
            justify-content: space-between;
            font-weight: 700;

            h2 {
              font-size: 16px;
              color: #111;
            }

            span {
              font-size: 12px;
              color: #525252;
            }
          }

          .card-subtitle {
            width: 100%;
            font-size: 13px;
            line-height: 1.3;
            font-weight: 500;
            color: #525252;
          }
        }

        .food-grid {
          width: 100%;
          padding: 11px 0;
          border-bottom: 1px solid #d9d9d9;

          .food-item {
            width: 80px;
            height: 83px;
            position: relative;
            border-radius: 12px;
            background-color: #f5f5f7;

            .img-wrap {
              width: 100%;
              height: 100%;
              position: relative;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .badge {
                position: absolute;
                top: 6px;
                right: 4px;

                display: flex;
                align-items: center;
                justify-content: center;

                width: 18px;
                height: 18px;
                background-color: #434343;
                border-radius: 30px;

                color: #fff;
                font-size: 13px;
                font-weight: 600;
              }
            }

            >span {
              font-size: 13px;
              font-weight: 600;
              color: #111;
              white-space: nowrap;

              position: absolute;
              bottom: 9px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }

        .price-area {
          width: 100%;
          margin-top: 12px;
          display: flex;
          justify-content: flex-end;
          padding: 0 16px;
          gap: 6px;

          .price-wrap {
            display: flex;
            align-items: center;
            gap: 4px;

            .old-price {
              font-size: 12px;
              font-weight: 400;
              text-decoration: line-through;
              color: #cfcfcf;
            }

            .discount {
              font-size: 14px;
              font-weight: 700;
              color: #bd2420;
            }
          }

          .current-price {
            font-size: 16px;
            font-weight: 700;
            color: #111;
          }
        }
      }
    }

    .subscribe-options-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 17px;
      padding: 0 20px;

      h3 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
        color: #262626;
      }

      .option-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .option-item {
          width: 100%;
          border: 1px solid #d9d9d9;
          border-radius: 12px;
          padding: 19px 0 12px;

          .info-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 0 0 14px 16px;
            border-bottom: 1px solid #efefef;

            .option-info {
              display: flex;
              gap: 6px;
              align-items: center;

              .circle-checkbox {
                appearance: none;
                -webkit-appearance: none;

                width: 18px;
                height: 18px;
                border-radius: 50%;
                background-color: #fff;
                border: 1px solid #d4d4d4;

                cursor: pointer;

                display: inline-block;
                vertical-align: middle;

                &:checked {
                  background: url(green-circle-checkbox..svg?77cd254d452ed9517739) no-repeat center / cover;
                  border: none;
                }
              }

              label {
                font-size: 15px;
                font-weight: 700;
                color: #171717;
              }
            }

            .desc {
              width: 100%;
              font-size: 13px;
              font-weight: 500;
              line-height: 1.3;

              span {
                color: #525252;
              }

              label {
                color: #287cff;
              }
            }
          }

          .option-price {
            width: 100%;
            padding: 11px 16px 0;

            display: flex;
            justify-content: flex-end;

            font-size: 16px;
            font-weight: 700;
            color: #111111;
          }
        }
      }
    }

    .subscribe-detail-bottom-sheet-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: flex-end;
      /* 아래쪽 정렬 */
      z-index: 1000;
      backdrop-filter: blur(4px);

      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s;

      &.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0s 0s;

        .subscribe-detail-bottom-sheet {
          transform: translateY(0);
        }
      }

      @media (max-width: 700px) {
        .subscribe-detail-bottom-sheet {
          max-width: 100% !important;
          margin: 0 auto;
        }
      }

      .subscribe-detail-bottom-sheet {
        width: 100%;
        background: #fff;
        padding: 24px 20px 22px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        max-width: 360px;
        margin: 0 auto;

        transform: translateY(100%);
        transition: transform 0.3s ease-out;

        display: flex;
        flex-direction: column;
        gap: 24px;

        .sheet-header {
          width: 100%;

          h2 {
            font-size: 18px;
            font-weight: 700;
            color: #000;
            line-height: 1.1;
          }
        }

        .option-list {
          display: flex;
          gap: 8px;

          .option-card {
            flex: 1;
            min-width: 156px;
            border: 1px solid #d9d9d9;
            border-radius: 12px;
            padding: 12px 16px;
            position: relative;
            background: #fff;
            cursor: pointer;

            display: flex;
            flex-direction: column;
            gap: 5px;

            p {
              font-size: 14px;
              font-weight: 700;
              color: #434343;
            }

            strong {
              display: block;
              text-align: right;
              font-size: 16px;
              font-weight: 700;
              color: #111111;
            }

            .badge {
              position: absolute;
              top: -13px;
              right: 8px;
              background: #fcf6f6;
              color: #c31212;
              font-size: 12px;
              font-weight: 700;
              border-radius: 30px;
              border: 1px solid #f8e9e9;

              width: 112px;
              height: 22px;

              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}

/* E::: 정기구독 상세페이지 :::E */

/* S::: 정기구독 후기 페이지 :::S */
.subscribe-review-container {
  width: 100%;
  height: 100%;

  .product-review-summary {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 43px;
    border-bottom: 1px solid #e5e5e5;

    .product-review-summary-title-wrap {
      display: flex;
      gap: 4px;

      >p {
        font-weight: 700;
        font-size: 23px;
        line-height: 1;
      }

      >div {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ebf3ef;
        color: #0d5611;
        border-radius: 30px;
        height: 22px;
        padding: 0 10px;
        font-weight: 700;
        font-size: 12px;
      }
    }

    .product-review-summary-rating {
      display: flex;
      flex-direction: column;
      gap: 7px;
      align-items: center;

      .rate {
        font-family: Pretendard, sans-serif;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.1;
      }

      .rating-star {
        width: 130px;
        height: 26px;

        &::before {
          background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
        }

        .rating-star__progress {
          background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
        }
      }
    }
  }

  .product-board-list {
    .product-board-list__items {
      .thumb-LIST:last-child {

        /* border-bottom: 1px solid #e5e5e5; */
        >.product-review-item {
          border: none;
        }
      }
    }

    .product-review-item {
      border-bottom: 1px solid #e5e5e5;
    }

    .product-board-header {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px 0;

      .image-review {
        display: flex;
        flex-direction: column;
        gap: 9px;

        >span {
          font-weight: 700;
          font-size: 18px;
          line-height: 1.1;
          padding: 0 20px;
        }

        >div {
          display: flex;
          width: 100%;

          >div {
            width: 100%;
            height: 100px;
            white-space: nowrap;

            .image-review-card {
              width: 100px;
              height: 100px;
              background-color: blue;
              border-radius: 12px;
              white-space: nowrap;
            }
          }
        }
      }

      .product-board-list-search {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        >p {
          font-weight: 700;
          font-size: 13px;
        }

        .product-board-list__sort-type {
          select {
            padding: 0;
            padding-right: 22px;
            font-weight: 700;
            font-size: 13px;
            color: #262626;
          }
        }

        .product-board-list__sort-type::after {
          background: url(arrow-bottom-icon..svg?c0be5de78f0958e56a50);
          width: 18px;
          height: 18px;
        }

        .select-box::after {
          right: 0;
        }
      }
    }

    .product-review-item {
      display: flex;
      flex-direction: column;
      padding: 16px 20px;

      .product-review-item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .product-review-item-info {
          display: flex;
          height: 20px;
          gap: 8px;
          justify-content: center;
          align-items: center;

          .product-review-item-member-id {
            font-weight: 700;
            font-size: 12px;
            line-height: 1;
          }

          .count-badge {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4px 5px;

            background-color: #e6eee7;

            color: #0d5611;

            font-size: 12px;
            line-height: 1;
          }

          .product-review-item__rating {
            .rating-star {
              width: 86px;
              height: 17px;

              margin: 0;

              &::before {
                background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
                /* background: url('../../../public/assets/svg/star-gray-icon.svg') repeat-x; */
                background-size: auto 100%;
                inset: 0;
                background-position: unset !important;
              }

              .rating-star__progress {
                background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
                /* background: url('../../../public/assets/svg/star-green-icon.svg') repeat-x; */
                background-size: auto 100%;
                inset: 0;
                background-position: unset !important;
              }
            }
          }
        }

        .product-review-item-date {
          font-family: Pretendard, sans-serif;
          font-size: 12px;
          line-height: 1;
          color: #a3a3a3;
        }
      }

      .product-review-item-content {
        margin-top: 16px;
        line-height: 1.5;
        color: #333333;
      }

      .product-review-item-image {
        ul {
          margin-top: 8px;
          border: none;

          >li {
            width: 100px;
            height: 100px;
            border-radius: 12px;
            overflow: hidden;
          }
        }
      }
    }

    .bottom-sheet-overlay {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 360px;
      margin-left: 0 auto;
      height: 100%;

      background: rgba(0, 0, 0, 0.4);
      z-index: 999;

      display: flex;
      justify-content: center;
      align-items: flex-end;

      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;

      &.open {
        opacity: 1;
        pointer-events: auto;
      }

      .bottom-sheet {
        width: 100%;
        max-height: 90vh;

        background: #fff;
        border-radius: 20px 20px 0 0;
        box-sizing: border-box;
        overflow-y: auto;

        display: flex;
        flex-direction: column;

        transform: translateY(100%);
        transition: transform 0.3s ease;

        .bottom-sheet-header {
          position: relative;
          display: flex;
          align-items: center;
          padding: 0 20px;
          padding-top: 20px;
          width: 100%;
          touch-action: none;

          >span {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-weight: 700;
          }

          >img {
            margin-left: auto;
          }
        }

        .content-wrap {
          padding: 20px 20px 40px 20px;

          .slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;

            gap: 12px;

            scrollbar-width: none;

            .slide {
              flex: 0 0 100%;
              aspect-ratio: 1 / 1;

              border-radius: 4px;

              scroll-snap-align: center;
            }
          }

          .slider::-webkit-scrollbar {
            display: none;
          }

          .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;

            &.left {
              left: 0;
            }

            &.right {
              right: 0;
            }
          }

          .review-img-wrap {
            margin-top: 8px;
            display: flex;
            gap: 8px;

            .review-img {
              position: relative;
              border-radius: 4px;
              overflow: hidden;
              width: 56px;
              height: 56px;

              &.active::after {
                content: '';
                position: absolute;
                inset: 0;
                background: #43434399 url(check-white-icon..svg?bca2f55e680b17da5e03) no-repeat center;
                background-size: 20px 20px;
              }
            }
          }

          .product-review-item {
            display: flex;
            flex-direction: column;
            border: none;
            padding: 0;
            margin-top: 24px;

            .product-review-item-top {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .product-review-item-info {
                display: flex;
                height: 20px;
                gap: 8px;
                justify-content: center;
                align-items: center;

                .product-review-item-member-id {
                  font-weight: 600;
                  font-size: 15px;
                  line-height: 1;
                }

                .count-badge {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 4px 5px;

                  background-color: #e6eee7;

                  color: #0d5611;

                  font-size: 12px;
                  line-height: 1;
                }

                .product-review-item__rating {
                  .rating-star {
                    width: 80px;
                    height: 16px;

                    margin: 0;

                    &::before {
                      background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
                      background-size: auto 100%;
                      inset: 0;
                      background-position: unset !important;
                    }

                    .rating-star__progress {
                      background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
                      background-size: auto 100%;
                      inset: 0;
                      background-position: unset !important;
                    }
                  }
                }
              }

              .product-review-item-date {
                font-family: Pretendard, sans-serif;
                font-size: 13px;
                line-height: 1;
                color: #a3a3a3;
              }
            }

            .product-review-item-content {
              margin-top: 16px;
              line-height: 1.5;
              color: #333333;
            }
          }
        }
      }
    }
  }

  .more-btn {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;

    margin: 24px auto;
    height: 40px;

    border: 1px solid #d4d4d4;
    border-radius: 50px;
    padding: 0 23px 0 31px;

    font-size: 13px;
    line-height: 1;
    color: #434343;
  }
}

/* E::: 정기구독 후기 페이지 :::E */

/* S::: 정기구독 선택 옵션 페이지 :::S */
.subscribe-select-option-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 10px 0 50px;

  .subscribe-select-option-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 34px;

    padding: 0 20px;

    >h2 {
      font-size: 20px;
      line-height: 1.2;
      font-weight: 700;
      color: #000;
    }

    .delivery-section {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .delivery-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >h3 {
          font-size: 18px;
          font-weight: 700;
          line-height: 1.1;
          color: #262626;
        }

        .btn-change {
          width: 43px;
          height: 26px;

          border: 1px solid #d9d9d9;
          border-radius: 6px;

          display: flex;
          align-items: center;
          justify-content: center;

          font-size: 13px;
          font-weight: 400;
          color: #111;
        }
      }

      .delivery-date-card {
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 12px;
        background-color: #f3f7f3;
        padding: 12px 10px;

        display: flex;
        flex-direction: column;
        gap: 11px;

        .date-sub-info {
          width: 100%;
          padding: 0 6px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .badge-count {
            width: 33px;
            height: 16px;
            background-color: #434343;
            border-radius: 4px;

            font-size: 10px;
            color: #fff;
            font-weight: 600;

            display: flex;
            align-items: center;
            justify-content: center;
          }

          .text-days {
            font-size: 14px;
            font-weight: 700;
            color: #0d5611;
          }
        }
      }

      .address-card {
        width: 100%;
        height: 100%;
        padding: 24px 34px 24px 20px;
        border: 1px solid #d9d9d9;
        border-radius: 12px;

        display: flex;
        flex-direction: column;
        gap: 10px;

        .address-title-wrap {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .address-info-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            h3 {
              font-size: 15px;
              font-weight: 700;
              color: #111;
            }

            span {
              font-size: 14px;
              font-weight: 700;
              color: #0d5611;
              display: flex;
              align-items: center;

              i {
                width: 20px;
                height: 20px;
                background: url(check-green-icon..svg?b689497c80d8cebeaf51) no-repeat center / cover;
              }
            }
          }
        }

        .address-detail {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 2px;

          p {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #434343;
          }
        }

        .delivery-notice {
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: 2px;
          text-overflow: ellipsis;

          .notice-line {
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;

            display: flex;
            align-items: center;
            gap: 6px;

            .delivery-type {
              font-weight: 700;
              line-height: 1.3;
              color: #0d5611;
            }

            .custom-divider {
              width: 1px;
              height: 12px;
              background-color: #d9d9d9;
            }

            .entrance {
              font-weight: 400;
              line-height: 1.5;
              color: #000000;
            }
          }

          >strong {
            font-weight: 400;
            line-height: 1.5;
            color: #000000;
          }

          .notice-memo {
            font-weight: 400;
            line-height: 1.5;
            color: #434343;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }

  .bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    /* 아래쪽 정렬 */
    z-index: 1000;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;

    &.active {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0s 0s;

      .bottom-sheet-container {
        transform: translateY(0);
      }
    }

    /* 바텀시트 컨테이너 */
    .bottom-sheet-container {
      width: 100%;
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      max-width: 360px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px;

      /* 나타날 때 아래에서 위로 슬라이드 */
      transform: translateY(100%);
      transition: transform 0.3s ease-out;

      .bottom-sheet-header {
        width: 100%;

        h3 {
          font-size: 18px;
          line-height: 1.1;
          color: #000;
          font-weight: 700;
        }
      }

      .bottom-sheet-content {
        width: 100%;
        display: flex;
        flex-direction: column;

        .option-list-wrap {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .option-item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .info-box {
              width: 100%;
              display: flex;
              gap: 10px;

              .option-thumb {
                min-width: 72px;
                width: 72px;
                height: 72px;
                background-color: lightgray;
              }

              .option-info {
                width: 100%;
                padding: 5px 0;
                display: flex;
                flex-direction: column;
                gap: 6px;

                .option-title {
                  display: flex;
                  flex-direction: column;
                  gap: 2px;

                  .option-name {
                    font-size: 15px;
                    font-weight: 700;
                    color: #111111;
                  }

                  .option-desc {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.5;
                    color: #434343;
                  }
                }

                .option-price {
                  font-size: 14px;
                  font-weight: 700;
                  color: #000;
                  line-height: 1.3;
                }
              }
            }
          }

          .quantity-selector {
            width: 72px;
            height: 24px;
            border-radius: 3px;
            border: 1px solid #d4d4d4;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn-plus,
            .btn-minus {
              width: 18px;
              height: 18px;
              font-size: 0;
              background: #0d5611;
              background-size: 18px;
            }

            .btn-plus {
              background: url(plus-sm..svg?3c0beb48a9fa4b0d7bd7) no-repeat center / cover;
            }

            .btn-minus {
              background: url(minus-sm..svg?b3e885598a1d1ef68d70) no-repeat center / cover;
            }

            input {
              width: 24px;
              height: 24px;
              border-right: 1px solid #d4d4d4;
              border-left: 1px solid #d4d4d4;
              white-space: nowrap;

              font-size: 12px;
              line-height: 1.3;
              font-weight: 700;
              color: #111111;

              display: block;
              text-align: center;
            }
          }
        }
      }

      .bottom-sheet-footer {
        width: 100%;

        .btn-pay {
          width: 100%;
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;

          background-color: #0d5611;
          border-radius: 10px;

          font-size: 16px;
          font-weight: 700;
          color: #fff;
        }
      }
    }
  }
}

/* E::: 정기구독 선택 옵션 페이지 :::E */

/* S::: 정기구독 배송일 변경 페이지 :::S */
.subscribe-change-date-container {
  width: 100%;
  height: 100%;
  padding: 10px 0 0;

  .subscribe-change-inner {
    width: 100%;
    padding: 0 20px;

    .change-date-content {
      width: 100%;

      .title-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 36px;
        margin-bottom: 16px;

        h2 {
          font-size: 20px;
          line-height: 1.2;
          font-weight: 700;
          color: #000;
        }
      }

      .day-grid-single {
        width: 100%;
        height: 100%;

        display: flex;
        gap: 3px;
      }

      .day-selection-double {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .selection-wrap {
          width: 100%;
          border: 1px solid #d9d9d9;
          border-radius: 12px;

          .selection-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;

            p {
              font-size: 16px;
              font-weight: 700;
              color: #262626;
            }

            .btn-group {
              display: flex;
              gap: 3px;
            }

            &:first-child {
              border-bottom: 1px solid #efefef;
            }
          }
        }

        .info-box {
          width: 100%;
          padding: 16px 25px 19px 16px;
          background-color: #f5f5f5;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .info-wrap {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 8px;

            .icon {
              width: 41px;
              height: 22px;
              background-color: #434343;
              border-radius: 30px;
              font-size: 12px;
              font-weight: 700;
              color: #fff;

              display: flex;
              align-items: center;
              justify-content: center;
            }

            p {
              font-size: 15px;
              font-weight: 600;
              color: #000;
            }
          }

          >span {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #525252;
          }
        }
      }

      .date-btn {
        width: 43px;
        height: 43px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 14px;
        font-weight: 700;
        color: #434343;

        &:disabled {
          border: none;
          background-color: #efefef;
          color: #939393;
        }

        &.active {
          border: 1px solid #0d5611;
          background-color: #ebf3ef;
          color: #0d5611;
        }
      }
    }
  }
}

/* E::: 정기구독 배송일 변경 페이지 :::E */

/* S::: 정기구독 결제 페이지 :::S */
.order-sheet-subscribe-container {
  width: 100%;
  height: 100%;
  padding: 10px 0 176px;
  position: relative;

  .order-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
    position: relative;

    .order-title {
      font-size: 18px;
      font-weight: 700;
      color: #262626;
    }

    .l-panel {
      margin: 0;
      box-shadow: unset;
      border: none;

      .accordion {
        border: none;
        display: flex;
        flex-direction: column;
        gap: 23px;

        .accordion__title {
          padding: 0;
          border: none;
          height: 100%;
          width: 100%;

          font-size: 18px;
          font-weight: 700;
          color: #262626;

          &::after {
            right: 12px;
          }
        }

        .accordion__items {
          padding: 0;
          width: 100%;
          display: block;
        }
      }
    }

    /* 주문 제목 / 상품 영역 */
    .order-title-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;

      >h2 {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 700;
        color: #000;
      }

      .l-panel {
        width: 100%;
        padding: 16px 20px 18px;
        border: 1px solid #d9d9d9;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;

        .thumb-LIST {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .product-thumb-item {
            padding: 0;
            display: flex;
            align-items: center;
            gap: 16px;
            border: none;

            .item-amount-wrap {
              display: none;
            }

            .badge-wrap {
              display: none;
            }

            .thumb-item__media {
              width: 68px;
              height: 68px;
              border-radius: 10px;
            }

            .thumb-item__info {
              padding: 0;
              gap: 0;

              .product-thumb-item-wrapper {
                .product-thumb-item__name {
                  display: flex;
                  flex-direction: column;
                  gap: 7px;

                  .product-name {
                    font-size: 16px;
                    font-weight: 700;
                    color: #000;
                    line-height: 1;
                  }

                  span {
                    font-size: 14px;
                    line-height: 1.5;
                    font-weight: 400;
                    color: #333333;
                  }
                }
              }
            }
          }
        }

        .delivery-info-box {
          width: 100%;
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;

          border-radius: 8px;
          background-color: #f7f7f7;

          span {
            font-size: 14px;
            font-weight: 700;
            color: #0d5611;
          }
        }
      }
    }

    .order-sheet__pay-method {
      .accordion__items {
        .pay-btn-wrap {
          display: flex;

          button {
            width: 100%;
            height: 44px;
            border-radius: 8px;

            background-color: #0d5611;
            color: #fff;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 14px;
            font-weight: 700;
          }
        }

        .order-sheet__pay-method-btns {
          padding: 0;
        }
      }
    }

    .order-sheet__promotion {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .promotion-title-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 23px;

        .info-box {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;

          background-color: #f7f7f7;
          border: 1px solid #e5e5e5;
          border-radius: 8px;

          p {
            font-size: 13px;
            font-weight: 500;
            line-height: 1.3;
            color: #525252;

            strong {
              font-weight: 700;
            }
          }
        }
      }

      .promotion-toggle-list {
        border-radius: 10px;
        border: 1px solid #d9d9d9;

        .promotion-row {
          width: 100%;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 10px;

          .row-header {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;

            .radio-circle {
              width: 18px;
              min-width: 18px;
              height: 18px;
              border-radius: 50%;
              border: 1px solid #d4d4d4;

              &.selected {
                background: url(green-radio-selected..svg?127f270b7d58da146a02) no-repeat center / cover;
              }
            }

            .row-box {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .label-text {
                font-size: 15px;
                font-weight: 700;
                color: #111;
              }

              .sub-text {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: #111;
              }
            }
          }

          &:first-child {
            border-bottom: 1px solid #f5f5f5;
          }

          .row-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .input-group {
              width: 100%;
              height: 100%;
              position: relative;

              .accumulation-direct-input {
                width: 100%;
                height: 52px;
                border: 1px solid #d9d9d9;
                border-radius: 8px;
                padding: 0 12px;

                font-size: 14px;
                font-weight: 400;
                color: #111;

                &::placeholder {
                  color: #a3a3a3;
                }
              }

              >button {
                position: absolute;
                right: 20px;
                top: 11px;
                width: 70px;
                height: 30px;

                background-color: #f5f5f5;
                border: none;
                border-radius: 8px;

                font-size: 13px;
                font-weight: 500;
                color: #111111;
              }
            }

            .always-use-check {
              width: 100%;
              display: flex;
              justify-content: flex-end;

              label {
                display: flex;
                align-items: center;
                gap: 4px;
                width: fit-content;
                cursor: pointer;

                font-size: 13px;
                font-weight: 500;
                line-height: 1.3;
                color: #525252;

                input[type='checkbox'] {
                  width: 20px;
                  min-width: 20px;
                  height: 20px;

                  background: url(gray-circle-checkbox..svg?4a2e61c36e05c52d61b2) no-repeat center / cover;

                  &:checked {
                    background: url(green-circle-checkbox..svg?77cd254d452ed9517739) no-repeat center / cover;
                    background-size: 16px;
                  }
                }
              }
            }

            &.coupon-content {
              gap: 0;

              .coupon-dropbox-trigger {
                width: 100%;
                height: 52px;
                border: 1px solid #d9d9d9;
                border-radius: 8px;

                display: flex;
                justify-content: space-between;
                padding: 0 20px;
                align-items: center;

                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: #262626;

                .arrow-icon {
                  width: 20px;
                  height: 20px;
                  background-color: lightgray;
                  background: url(arrow-black-down..svg?b7a737aed4b7bc4134fd) no-repeat center / cover;

                  transition: transform 0.3s ease;
                }

                &.is-open {
                  .arrow-icon {
                    transform: rotate(180deg);
                  }
                }
              }

              .coupon-dropbox-list-wrap {
                width: 100%;
                padding: 10px 20px;

                .coupon-list-direct {
                  display: flex;
                  flex-direction: column;
                  gap: 4px;
                }

                .coupon-dropbox-item {
                  width: 100%;
                  padding: 12px 20px;
                  display: flex;
                  flex-direction: column;
                  gap: 4px;

                  font-size: 14px;
                  line-height: 1.5;
                  color: #111111;

                  &:hover {
                    background-color: #f5f5f5;
                  }
                }
              }
            }
          }
        }
      }
    }

    .settings-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 32px;

      .settings-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .label-row {
          width: 100%;
          display: flex;
          gap: 4px;
          align-items: center;
          position: relative;

          .main-label {
            font-size: 18px;
            font-weight: 700;
            color: #262626;
          }

          i {
            width: 20px;
            height: 20px;
            background: url(InformationCircle..svg?e1a31a826730cc928113) no-repeat center / cover;
            cursor: pointer;
          }

          .info-tooltip {
            position: absolute;
            top: 100%;
            width: 100%;

            padding: 16px 25px 16px 16px;
            background-color: #f5f5f5;
            border-radius: 8px;
            z-index: 2;

            display: flex;
            flex-direction: column;
            gap: 8px;

            .tooltip-header {
              display: flex;
              width: 100%;
              justify-content: space-between;
              align-items: center;

              .header-left {
                display: flex;
                gap: 8px;

                span {
                  background-color: #434343;
                  width: 41px;
                  height: 22px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 30px;

                  color: #fff;
                  font-size: 12px;
                  font-weight: 700;
                }

                strong {
                  font-size: 15px;
                  font-weight: 600;
                  color: #000;
                }
              }

              button {
                position: absolute;
                right: 15px;
                top: 14px;
                width: 20px;
                height: 20px;
                background: url(close-icon..svg?ac31fd4edde2efe08a29) no-repeat center / cover;
              }
            }

            .tooltip-body {
              p {
                font-size: 13px;
                font-weight: 500;
                line-height: 1.3;
                color: #757575;

                strong {
                  font-weight: 700;
                }
              }
            }
          }
        }

        .custom-select {
          width: 100%;
          height: 52px;
          border: 1px solid #d9d9d9;
          border-radius: 8px;
          position: relative;

          padding: 0 20px;
          align-items: center;

          font-size: 14px;
          font-weight: 400;
          line-height: 1.5;
          color: #262626;

          display: flex;
          justify-content: space-between;
          align-items: center;

          .select-title-wrap {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;

            .selected-value {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              >span {
                padding: 4px 10px;
                background-color: #fff9f8;
                border: 1px solid #ffe5e2;
                color: #bb132d;
                border-radius: 30px;

                font-size: 12px;
                font-weight: 700;
              }
            }
          }

          .arrow-icon {
            width: 20px;
            height: 20px;
            background-color: lightgray;
            background: url(arrow-black-down..svg?b7a737aed4b7bc4134fd) no-repeat center / cover;

            transition: transform 0.3s ease;
          }

          &.active {
            .arrow-icon {
              transform: rotate(180deg);
            }
          }

          .dropdown-menu {
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            margin-top: 4px;
            z-index: 10;

            li {
              padding: 12px 20px;

              font-size: 14px;
              font-weight: 400;
              line-height: 1.5;
              color: #111111;

              &:hover {
                background-color: #f5f5f5;
              }
            }
          }

          .switch {
            position: relative;
            width: 28px;
            height: 16px;
            border-radius: 16px;
            cursor: pointer;
            background-color: #d9d9d9;

            &.on {
              background-color: #0d5611;

              .handle {
                transform: translateX(12px);
              }
            }

            .handle {
              position: absolute;
              top: 2px;
              left: 2px;
              width: 12px;
              height: 12px;
              background-color: #fff;
              border-radius: 50%;
              transition: transform 0.2s ease-in-out;
            }
          }
        }
      }
    }

    .order-sheet__payment-info {
      padding: 0;

      .price-tag {
        border: none;
        border-radius: unset;
        padding: 0;

        .order-result-accordian {
          gap: 16px;

          .accordion__title {
            width: 100%;
            padding-right: 26px;

            .price-tag__final-amount {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              dt {
                font-size: 18px;
                font-weight: 700;
                color: #262626;
              }

              dd {
                font-size: 16px;
                font-weight: 700;
                color: #111;
              }
            }
          }

          .accordion__items {
            border-radius: 12px;
            padding: 16px 20px 19px;
            border: 1px solid #d9d9d9;

            display: flex;
            flex-direction: column;
            gap: 12px;

            .price-tag__discount-summary {
              width: 100%;
              height: 44px;
              border-radius: 8px;
              border: 1px solid #dbe6db;
              background-color: #f3f7f3;

              display: flex;
              justify-content: center;
              align-items: center;

              font-size: 14px;
              font-weight: 700;
              line-height: 1.3;
              color: #0d5611;
            }

            .price-tag__details {
              display: flex;
              flex-direction: column;
              row-gap: unset;
              gap: 10px;

              div {
                display: flex;
                width: 100%;
                justify-content: space-between;

                dd,
                dt {
                  font-size: 14px;
                  font-weight: 400;
                  color: #262626;
                  line-height: 1;

                  &.total-discount-highlight {
                    font-weight: 700;
                    color: #c31212;
                  }

                  &.is-sub {
                    color: #c31212;
                  }
                }
              }

              .price-tag__division {
                margin: 10px 0 2px;
              }
            }
          }
        }
      }
    }

    .order-sheet__terms {
      display: none;
    }

    .payment-footer-container {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: 360px;
      z-index: 3;

      @media (max-width: 700px) {
        max-width: unset;
      }

      .payment-footer-wrap {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        .discount-badge {
          padding: 0 16px;
          border: 1px solid #c91b1b;
          border-radius: 40px;
          background-color: #fcf6f6;
          width: fit-content;
          height: 29px;

          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 14px;
          font-weight: 700;
          color: #c91b1b;
        }

        .btn-wrap {
          width: 100%;
          padding: 14px 20px 20px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          background-color: #0d5611;

          display: flex;
          flex-direction: column;
          gap: 12px;

          button {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 52px;
            border: none;
            background-color: #fff;

            border-radius: 10px;

            font-size: 16px;
            font-weight: 700;
            color: #0d5611;
          }

          span {
            font-size: 13px;
            font-weight: 500;
            line-height: 1.3;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  }
}

/* E::: 정기구독 결제 페이지 :::E */

/* S::: 배송주기 변경 :::S */
.update-date-container {
  .title-wrap {
    margin-bottom: 24px !important;
  }

  .label {
    font-size: 18px;
    font-weight: 700;
    color: #262626;
  }

  .frequency-selection {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;

    .method-group {
      display: flex;
      gap: 8px;

      button {
        height: 52px;
        width: 100%;
        border-radius: 10px;
        border: 1px solid #d9d9d9;
        padding: 0 16px;

        display: flex;
        align-items: center;
        gap: 6px;

        font-size: 15px;
        font-weight: 600;
        color: #111;

        .radio-circle {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #d4d4d4;
        }

        &.active {
          border: 1px solid #0d5611;

          .radio-circle {
            background: url(green-radio-selected..svg?127f270b7d58da146a02) no-repeat center / cover;
          }
        }
      }
    }
  }

  .subscribe-highlight-box {
    margin-top: 11px;
  }

  .select-date-wrap {
    margin-top: 24px;

    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* E::: 배송주기 변경 :::E */
/* S ::: 마이페이지 메인 /my-page ::: S */
.mypage-container {
  padding-bottom: 140px;
  .mypage-wrapper {
    padding: 10px 20px 32px;
    .my-info {
      padding: 0;
      background: transparent;
      .my-info__summary {
        padding: 20px;
        border-radius: 12px;
        align-items: flex-start;
        background: url(mypage-main-bg..png?72ba62c6c398b6c1e11c) no-repeat center / cover;
        min-height: 130px;
        .my-info__greeting {
          display: flex;
          flex-direction: column;
          margin-bottom: 0;

          gap: 8px;
          p {
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
            &:last-of-type {
              font-size: 15px;
              font-weight: 600;
            }
          }
        }
      }
      .grade-wrapper {
        border-radius: 12px 12px 0 0;
        border: 1px solid #d9d9d9;
        /* margin: 12px 20px 0; */
        margin-top: 12px;
        border-bottom: 0;
        padding: 16px 20px 13px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .grade-text-wrap {
          display: flex;
          flex-direction: column;
          gap: 7px;
          span {
            font-size: 14px;
            line-height: 1.5;
            color: #333;
          }
          p {
            font-size: 18px;
            line-height: 1.1;
            font-weight: 700;
            color: #000;
          }
        }
        button {
          padding: 6px 10px;
          background: #efefef;
          border-radius: 6px;
          font-size: 13px;
          color: #111;
          border: 0 none;
          width: auto;
          height: auto;
        }
      }
    }
    .rolling-banner-wrap {
      ul {
        width: 100%;
      }
      li {
        padding: 14px 8px 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #efefef;
        border-radius: 8px;
        width: 100%;
        p {
          font-size: 14px;
          font-weight: 600;
          line-height: 1;
          color: #262626;
        }
      }
    }
    .my-coupon-data-wrapper {
      /* margin: 0 20px; */
      border: 1px solid #d9d9d9;
      border-radius: 0 0 12px 12px;
      padding: 16px 20px 18px;
      .my-coupon-data__link {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        align-items: flex-start;
        &::before {
          display: none;
        }
        em {
          margin-top: 0;
          font-size: 16px;
          font-weight: 700;
          color: #000;
          line-height: 1;
        }
      }
    }
    .divider {
      width: calc(100% + 40px);
      margin-top: 28px;
      margin-bottom: 32px;
      margin-left: -20px;
    }
    .panel-container {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .panel-wrapper {
      display: flex;
      flex-direction: column;
      gap: 16px;
      > .title {
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        color: #0d5611;
      }
      .l-panel {
        display: flex;
        flex-direction: column;
        border: 1px solid #d9d9d9;
        border-radius: 12px;
        box-shadow: none;
        margin-bottom: 0;
        .my-link {
          padding: 16px 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          line-height: 1.5;
          font-weight: 700;
          color: #000;
          &:first-of-type {
            border-top: 0 none;
          }
          & + .my-link {
            border-color: #f5f5f5;
          }
        }
      }
    }

    .my-membership-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 40px;

      .half-button-wrap {
        display: flex;
        width: 100%;
        gap: 8px;
        a {
          width: calc(50% - 4px);
          padding: 0;
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          &.my-link {
            border: 1px solid #cadacb;
            font-size: 16px;
            font-weight: 700;
            color: #0d5611;
          }
          &.kakao {
            background: #feeb00;
            gap: 11px;
            font-size: 15px;
            font-weight: 700;
            color: #3b1e1e;
          }
        }
      }
      .my-membership__btn {
        width: 100%;
        border: 1px solid #d4d4d4;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        color: #111;
        border-radius: 10px;
      }
    }
  }
  .mypage-footer {
    border-top: 1px solid #e0e0e0;
    padding: 0;
    padding: 50px 20px 10px;
    .top {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-bottom: 32px;
      border-bottom: 1px solid #f0f0f0;
      .title-wrap {
        span {
          font-size: 12px;
          line-height: 22px;
          font-weight: 700;
          color: #757575;
        }
        h6 {
          font-size: 24px;
          line-height: 1;
          font-weight: 700;
          color: #111;
          margin-top: 11px;
        }
        p {
          font-size: 14px;
          line-height: 24px;
          color: #111;
          margin-top: 13px;
        }
      }
      > p {
        font-size: 12px;
        line-height: 22px;
        font-weight: 400;
        color: #757575;
      }
    }
    .bottom {
      padding-top: 20px;
      .info-wrap {
        > p {
          display: flex;
          align-items: center;
          font-size: 12px;
          line-height: 1.75;
          font-weight: 400;
          color: #757575;
          i {
            display: block;
            width: 16px;
            height: 16px;
          }
        }
        .text-list {
          margin-top: 8px;
          p {
            font-size: 12px;
            line-height: 1.5;
            color: #111;
            opacity: 0.4;
          }
        }
        .link-wrap {
          display: flex;
          align-items: center;
          gap: 6px;
          margin-top: 20px;
          a {
            font-size: 11px;
            font-weight: 400;
            color: #757575;
            text-decoration: underline;
            &:not(:last-child) {
              &::after {
                content: '|';
                display: inline-block;
                margin-left: 6px;
                color: #757575;
              }
            }
          }
        }
      }
      .copyright {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.75;
        color: #ccc;
        font-weight: 400;
      }
    }
  }
}
/* E ::: 마이페이지 메인 /my-page ::: E */

/* S ::: 마이페이지 할인혜택 /my-page/benefit ::: S */
.mypage-benefit-container {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  .info-msg {
    padding: 8px 11px;
    border-radius: 11px;
    background: #f7f7f7;
    text-align: center;
    p {
      font-size: 13px;
      line-height: 1.3;
      font-weight: 500;
      color: #525252;
    }
  }
  .check-radio__ico {
    width: 20px;
    height: 20px;
    border: 0 none;
    background: url(default-checkbox..svg?953dc38e1c5fffffc983) no-repeat center / cover;
    margin-right: 6px;
    .ico--check-white {
      display: none;
    }
  }
  .check-radio input:checked ~ :where(.check-radio__ico) {
    background: red;
  }
  .marketing-agreement-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    label {
      cursor: pointer;
    }
    > label {
      padding: 10px 0;
      .check-radio__label {
        font-size: 14px;
        font-weight: 600;
        color: #434343;
      }
    }
    .agreement-wrap {
      .agreement-sub-list {
        display: flex;
        align-items: center;
        padding: 6px 20px;
        gap: 27px;
        background: #f7f7f7;
        border-radius: 8px;
        label {
          padding: 10px 0;
          .check-radio__label {
            font-size: 13px;
            font-weight: 400;
            color: #434343;
          }
        }
      }
    }
  }
  @media (max-width: 700px) {
    .check-btn {
      width: 100% !important;
      margin: 0 auto;
    }
  }
  .check-btn {
    position: fixed;
    bottom: 98px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    button {
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d5611;
      color: #fff;
    }
  }
}
/* E ::: 마이페이지 할인혜택 /my-page/benefit ::: E */

/* S ::: 마이페이지 쿠폰 /my-page/coupon ::: S */
.mypage-coupon-wrapper {
  .divider {
    width: calc(100% + 40px);
    margin-top: 20px;
    margin-bottom: 24px;
    margin-left: -20px;
  }
  .my-page-coupon__wrap {
    .coupon-top-wrap {
      .msg-wrap {
        padding: 11px 16px;
        border-radius: 8px;
        background: #f7f7f7;
        p {
          font-size: 13px;
          font-weight: 500;
          line-height: 1.3;
          color: #525252;
          text-align: center;
        }
      }
      .my-page-coupon__registration-button {
        margin-top: 12px;
        height: 52px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        background: #0d5611;
        border-radius: 10px;
      }
    }
  }
  .empty-list {
    border: 0 none;
  }
  .my-page__total-count {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;

    .my-page__count {
      margin-left: 0;
      padding: 3px 5px;
      border-radius: 4px;
      background: #e6eee7;
      span {
        font-size: 14px;
        font-weight: 700;
        color: #0d5611;
      }
    }
  }

  .coupon-more-wrap {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    .coupon-more-btn {
      padding: 13px 0;
      width: auto;
      display: flex;
      gap: 6px;
      align-items: center;
      p {
        font-size: 14px;
        font-weight: 700;
        color: #000;
      }
    }
  }
  .my-page-coupon__list {
    .my-page-coupon__list-item + .my-page-coupon__list-item {
      margin-top: 12px;
    }
    .my-page-coupon__list-item {
      &::before,
      &::after {
        display: none;
      }
      .my-page-coupon__box {
        border: 1px solid #d4d4d4;
        border-radius: 12px;
      }

      .my-page-coupon__box--left {
        width: 100%;
        padding: 24px 20px;
        .my-page-coupon__discounted-price {
          display: none;
        }

        .my-page-coupon__content {
          margin-top: 0;
          display: flex;
          flex-direction: column;
          gap: 6px;
          .my-page-coupon__name {
            font-size: 15px;
            font-weight: 700;
            color: #111;
            line-height: 1;
          }
          .my-page-coupon__limit-sale-price {
            font-size: 13px;
            font-weight: 500;
            color: #111;
            line-height: 1;
          }
        }
        .my-page-coupon__date {
          margin-top: 14px;
          font-size: 12px;
          line-height: 1.3;
          color: #939393;
        }
      }
    }
  }
}

.coupon-registration-modal {
  &.coupon-registration-modal-wrapper {
    width: 320px;
    min-width: 320px;
    min-height: 1px;
    .title-modal__header {
      display: none;
    }
    .my-page-coupon-registration__title {
      margin: 0;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 700;
    }
    .my-page-coupon-registration .text-field {
      margin-top: 0;
      height: 48px;
      border: 1px solid #d4d4d4;
      border-radius: 8px;
      input {
        height: 48px;
        padding: 0 16px;
      }
    }
    .my-page-coupon-registration__buttons {
      margin-top: 40px;
      justify-content: flex-end;
      gap: 8px;
      button {
        width: 61px;
        height: 40px;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 700;
        &.btn--dark {
          background: #f3f7f3;
          color: #0d5611;
        }
        &.btn--caution {
          background: #0d5611;
          color: #fff;
        }
      }
    }
  }
}
/* E ::: 마이페이지 쿠폰 /my-page/coupon ::: E */

/* S ::: 마이페이지 적립금 /my-page/accumulation ::: S */
.mypage-accumulation-wrapper {
  .empty-list {
    border: 0 none;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: #a3a3a3;
  }
  .my-page-accumulation {
    padding: 0;
    .accumulation-top-wrap {
      padding: 10px 20px 20px;
      .amount-wrap {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        h6 {
          font-size: 14px;
          line-height: 1.5;
          color: #434343;
        }
        .my-page-accumulation__amount {
          margin: 0;
          font-size: 24px;
          line-height: 1.3;
          font-weight: 700;
          color: #000;
          span {
            margin: 0;
            color: #000;
          }
        }
      }
    }
    .info-wrap {
      padding: 24px 16px 20px;
      background: #f7f7f7;
      border-radius: 20px;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      .title-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        p {
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }
        span {
          padding: 5px 10px;
          display: block;
          font-size: 12px;
          font-weight: 700;
          color: #c31212;
          background: #fcf6f6;
          border: 1px solid #f8e9e9;
          border-radius: 30px;
        }
      }
      .content-wrap {
        background: #fff;
        padding: 16px;
        border-radius: 8px;
        .text-wrap {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          span {
            padding: 5px 10px;
            background: #434343;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
          }
          p {
            font-size: 15px;
            font-weight: 600;
            color: #000;
          }
        }
        > p {
          word-break: keep-all;
          font-size: 14px;
          line-height: 1.5;
          color: #525252;
        }
      }
    }
    .accumulation-list-wrap {
      padding: 28px 20px 120px;
      > h4 {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 700;
        color: #000;
        margin-bottom: 24px;
      }
      .my-page-accumulation__item {
        margin-top: 0;
        padding: 16px 0;
        border: 0 none;
        gap: 20px;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        .text-wrap {
          display: flex;
          flex-direction: column;
          gap: 8px;
          .my-page-accumulation__date {
            font-size: 12px;
            line-height: 1.3;
            color: #525252;
          }
          .my-page-accumulation__reason-detail {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            color: #111;
            text-align: left;
          }
        }

        .my-page-accumulation__accumulation-amount {
          font-size: 14px;
          line-height: 1.3;
          font-weight: 700;
          color: #0d5611;
        }
        .my-page-accumulation__accumulation-point--subtraction {
          color: #a3a3a3;
        }
      }
    }
    .accumulation-more-wrap {
      margin-top: 12px;
      display: flex;
      justify-content: center;
      .accumulation-more-btn {
        padding: 13px 0;
        width: auto;
        display: flex;
        gap: 6px;
        align-items: center;
        p {
          font-size: 14px;
          font-weight: 700;
          color: #000;
        }
      }
    }
  }
}
/* E ::: 마이페이지 적립금 /my-page/accumulation ::: E */

/* S ::: 마이페이지 부분 미출고 환불 방법 /my-page/refund ::: S */
.mypage-refund-wrapper {
  padding: 10px 20px;
  .msg-wrap {
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
    .text-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      span {
        padding: 5px 10px;
        background: #434343;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
      }
      p {
        font-size: 15px;
        font-weight: 600;
        color: #000;
      }
    }
    p {
      word-break: keep-all;
      font-size: 13px;
      line-height: 1.5;
      color: #757575;
    }
  }
  .refund-dropdown {
    margin-top: 20px;
  }

  .refund-dropdown .title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
  }

  .dropdown-box {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    position: relative;
  }

  .selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 52px;
    gap: 8px;
  }

  .label {
    color: #262626;
    font-size: 14px;
    line-height: 1.5;
  }

  .badge {
    background: #fff9f8;
    color: #bb132d;
    border: 1px solid #ffe5e2;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 30px;
  }

  .arrow-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .arrow {
    margin-left: 8px;
  }

  .dropdown-list {
    border-top: 1px solid #eee;
  }

  .dropdown-list li {
    padding: 0 16px;
    height: 52px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
  }

  .dropdown-list li:hover {
    background: #f9f9f9;
  }

  @media (max-width: 700px) {
    .check-btn {
      width: 100% !important;
      margin: 0 auto;
    }
  }

  .check-btn {
    position: fixed;
    bottom: 98px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    button {
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d5611;
      color: #fff;
    }
  }
}
/* E ::: 마이페이지 부분 미출고 환불 방법 /my-page/refund ::: E */

/* S ::: 마이페이지 회원정보수정 체크 /member-modification ::: S */
.member-modification-check-wrapper {
  .password-authentication__info-text {
    border-radius: 8px;
    padding: 11px 16px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
    color: #525252;
  }
  .password-authentication {
    margin-top: 10px;
  }
  .password-authentication-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    .password-authentication-form__item {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;

      label {
        font-size: 16px;
        font-weight: 700;
        color: #262626;
        line-height: 1;
      }
      .text-field {
        border-radius: 8px;
        border: 1px solid #d9d9d9;
        height: 52px;
        input {
          padding: 0 20px;
          height: 52px;
          &:disabled {
            background: #efefef;
          }
        }
      }
    }
  }
  .password-authentication__button-wrap {
    margin-top: 4px;
    .verification {
      width: 100%;
      height: 52px;
      border-radius: 10px;
      background: #0d5611;
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      color: #fff;
      border: 0 none;
    }
  }
}
/* E ::: 마이페이지 회원정보수정 체크 /member-modification ::: E */

/* S ::: 마이페이지 회원정보수정 /member-modification ::: S */
.member-modification-form-wrapper {
  padding-bottom: 140px;

  .member-modification {
    .l-panel {
      border: 0;
      margin-bottom: 0;
      padding-top: 20px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
  .member-modification-name {
    display: none;
  }
  .text-field {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
  }
  .member-modification-form__input-wrap input {
    height: 52px;
    padding: 0 20px;
    font-size: 14px;
    color: #000;
  }
  .label-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    > p {
      font-size: 16px;
      font-weight: 700;
      color: #262626;
    }
    .msg-wrap {
      font-size: 13px;
      font-weight: 500;
      line-height: 1.3;
      color: #757575;
      padding: 11px 16px;
      border: 1px solid #e5e5e5;
      background: #f7f7f7;
      border-radius: 8px;
      text-align: center;
    }
  }
  .member-modification-form__btn--certificate {
    margin-top: 0;
    color: #fff;
    background: #0d5611;
    border: 0 none;
    border-radius: 8px;
  }

  .sign-up-form__item {
    margin-top: 20px;
  }
  .member-modification-form__input-wrap {
    margin-top: 12px;
  }
  .member-modification-form__tit {
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    .required {
      display: none;
    }
  }
  .description.alert {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    color: #757575;
    margin: 0;
    margin-top: 5px;
  }
  .select-box {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    height: 52px;
  }
  .address-form__zip-code > .text-field {
    width: 230px;
  }
  .address-form__zip-code > .btn {
    width: 80px;
    color: #fff;
    background: #0d5611;
    border: 0 none;
    border-radius: 8px;
  }
  .member-modification-form__input-wrap select {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  .password-wrap {
    .member-modification-form__tit {
      display: none;
    }
    .sign-up-form__item {
      margin-top: 8px;
    }
    .member-modification-form__input-wrap {
      margin-top: 0;
    }
    .description {
      display: none;
    }
  }
  .member-modification-form__checkbox--check-single {
    cursor: pointer;
    padding: 10px 0;
    .disabled {
      opacity: 1;
    }
    .check-radio__ico {
      width: 20px;
      height: 20px;
      border: 0 none;
      background: url(default-checkbox..svg?953dc38e1c5fffffc983) no-repeat center / cover;
      .ico--check-white {
        display: none;
      }
    }
    .check-radio input:checked ~ :where(.check-radio__ico) {
      background: red;
    }
    .check-radio {
      font-size: 13px;
      font-weight: 400;
      color: #434343;
      span {
        font-size: 13px;
        font-weight: 400;
        color: #434343;
      }
    }
    button {
      color: #0d5611;
      font-size: 13px;
      font-weight: 700;
    }
  }
  .marketing-receive-agreement__sub-list {
    gap: 14px;
  }
  .marketing-receive-agreement__item {
    margin-top: 0;
    padding: 10px 0;
    .check-radio__ico {
      width: 20px;
      height: 20px;
    }
    .marketing-receive-agreement__sub-item-result {
      display: none;
    }
    .check-radio {
      font-size: 13px;
      font-weight: 400;
      color: #434343;
      span {
        font-size: 13px;
        font-weight: 400;
        color: #434343;
      }
    }
  }
  .member-modification-form {
    .member-modification-form__button-wrap {
      margin-top: 40px;
      button {
        border-radius: 10px;
        font-size: 16px;
        font-weight: 700;
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0d5611;
        color: #fff;
        border: 0 none;
      }
    }
  }
  .sign-out-btn {
    padding: 0;
    border: 0 none;
    height: auto;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 400;
    color: #111;
    margin: 21px 0 auto;
    text-align: left;
    width: fit-content;
  }
}
/* E ::: 마이페이지 회원정보수정 /member-modification ::: E */

/* E ::: 마이페이지 회원탈퇴 /member-withdrawal ::: E */
.member-withdrawal-wrapper {
  .password-authentication__info-text {
    border-radius: 8px;
    padding: 11px 16px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
    color: #525252;
  }
  .password-authentication {
    margin-top: 10px;
  }
  .password-authentication-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    .password-authentication-form__item {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;

      label {
        font-size: 16px;
        font-weight: 700;
        color: #262626;
        line-height: 1;
      }
      .text-field {
        border-radius: 8px;
        border: 1px solid #d9d9d9;
        height: 52px;
        input {
          padding: 0 20px;
          height: 52px;
          &:disabled {
            background: #efefef;
          }
        }
      }
    }
  }
  .password-authentication__button-wrap {
    margin-top: 4px;
    .verification {
      width: 100%;
      height: 52px;
      border-radius: 10px;
      background: #0d5611;
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      color: #fff;
      border: 0 none;
    }
  }
  .title-text-wrap {
    margin: 0 20px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    h6 {
      font-size: 16px;
      line-height: 1;
      color: #262626;
      font-weight: 700;
    }
    .msg-wrap {
      padding: 16px;
      background: #f5f5f5;
      border-radius: 8px;
      .text-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        span {
          padding: 5px 10px;
          background: #434343;
          border-radius: 30px;
          font-size: 12px;
          font-weight: 700;
          color: #fff;
        }
        p {
          font-size: 15px;
          font-weight: 600;
          color: #000;
        }
      }
      .text-list-wrap {
        display: flex;
        flex-direction: column;
        gap: 18px;
        p {
          word-break: keep-all;
          font-size: 13px;
          line-height: 1.5;
          color: #757575;
        }
      }
    }
  }
  .member-withdrawal-form {
    padding: 0;
    background: transparent;
    border-radius: 0px;
    .member-withdrawal-form__item {
      label {
        font-size: 16px;
        line-height: 1;
        color: #262626;
        font-weight: 700;
      }
    }
    .text-field {
      border: 1px solid #d9d9d9;
      border-radius: 8px;
    }
    .member-withdrawal-form__input-wrap input {
      height: 52px;
    }
    .member-withdrawal-form__input-wrap textarea {
      min-height: 120px;
      border: 1px solid #d9d9d9;
      border-radius: 8px;
    }
    .member-withdrawal-form__tit + .member-withdrawal-form__input-wrap {
      margin-top: 12px;
    }
  }
  .member-withdrawal__btn-wrap {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    margin-top: 0;
    button {
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d5611;
      color: #fff;
      border: 0 none;
    }
  }
}
/* E ::: 마이페이지 회원탈퇴 /member-withdrawal ::: E */

/* S ::: 에러페이지 /not-found ::: S */
.not-found-wrapper {
  max-width: 360px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  .not-found {
    margin: 0;
    width: 100%;
    padding: 0;
    margin-top: 14px;
    .not-found-text-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      h6 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
        color: #111;
      }
      p {
        font-size: 14px;
        line-height: 1.5;
        color: #757575;
        margin-bottom: 0;
      }
    }
    .not-found__btns {
      margin-top: 24px;
      display: flex;
      align-items: center;
      gap: 8px;
      button {
        width: calc(50% - 4px);
        height: 52px;
        padding: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        border-radius: 10px;
        &:first-child {
          border: 1px solid #d4d4d4;
          background: #fff;
          color: #111;
        }
        &:last-child {
          background: #0d5611;
          color: #fff;
        }
      }
    }
  }
}
/* E ::: 에러페이지 /not-found ::: E */

/* S ::: 공지사항 /notice ::: S */
.notice-wrapper {
  padding: 12px 0;
  .notice__list {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    li {
      padding: 0;
      padding-bottom: 11px;
      border-bottom: 1px solid #e5e5e5;
      .notice__list-button {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .title-text-wrap {
        display: flex;
        align-items: center;
        gap: 4px;
        .notice__category-label {
          background: #ebf3ef;
          padding: 5px 10px;
          justify-content: flex-start;
          font-size: 12px;
          font-weight: 700;
          color: #0d5611;
          border-radius: 30px;
        }
        .notice__tit {
          margin-top: 0;
          font-size: 15px;
          font-weight: 600;
          color: #111;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .notice__date {
        font-size: 14px;
        line-height: 1.5;
        color: #525252;
      }
    }
  }
  .view-more-wrap {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    .view-more-btn {
      padding: 13px 0;
      width: auto;
      display: flex;
      gap: 6px;
      align-items: center;
      p {
        font-size: 14px;
        font-weight: 700;
        color: #000;
      }
    }
  }
}
.notice-min-modal {
  .title-modal--full {
    max-width: 360px;
    min-width: 360px;
    .title-modal__content {
      min-width: 360px;
    }
    .l-panel {
      border-top: 0;
      border: 0;
      margin: 0;
      box-shadow: unset;
    }
    .title-modal__header {
      height: 52px;
      border-bottom: 0 none;
      .title-modal__title {
        font-size: 15px;
        font-weight: 700;
        .ico--x-black {
          transform: scale(0.7);
        }
      }
    }
    .notice-detail__title-box {
      padding: 10px 0 16px;
    }
    .notice-min-modal-wrapper {
      padding: 0 20px;
      .notice-detail__title {
        margin-top: 0;
        font-size: 15px;
        font-weight: 600;
        color: #111;
      }
      .notice-detail__date {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
        color: #525252;
      }
    }
    .notice-detail__content {
      padding: 0;
      padding-top: 16px;
      margin-bottom: 30px;
    }
    .notice-detail__index {
      display: none;
    }
    .go-to-list {
      opacity: 1;
      height: 52px;
      border-radius: 10px;
      border: 1px solid #d4d4d4;
      font-size: 16px;
      font-weight: 700;
      color: #111;
      .go-to-list__angle-r {
        display: none;
      }
    }
  }
}
/* E ::: 공지사항 /notice ::: E */

/* S ::: 자주 묻는 질문 /faq ::: S */
.faq-wrapper {
  .faq__search {
    padding: 12px 20px 10px;
    background: #fff;
    position: relative;
    .text-field {
      height: 44px;
      border: 0;
      width: 100%;
      margin-right: 0;
      background: #f7f7f7;
      input {
        background: #f7f7f7;
        padding-left: 48px;
      }
    }
    button {
      position: absolute;
      top: 50%;
      left: 36px;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: url(search-icon..svg?3c5387032693adeacfb9) no-repeat center center;
      font-size: 0;
    }
  }
  .faq-list {
    margin-top: 20px;
    padding: 0 20px;
    border-top: 0;
    li {
      border-bottom: 1px solid #e5e5e5;
      &:last-child {
        border-bottom: 0 none;
      }
      &.is-open {
        img {
          transform: rotate(180deg);
        }
      }
      .ico--q {
        display: none;
      }
      .faq-list__question {
        padding: 11px 0;
      }
    }
  }
  .faq-list__question p {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: #111;
  }
  .faq-list__answer {
    padding: 20px;
    border-radius: 12px;
    background: #f7f7f7;
    p,
    span {
      font-size: 14px;
      line-height: 1.5;
      color: #171717;
      word-break: keep-all;
    }
    .ico--a {
      display: none;
    }
  }
  .empty-list {
    border: 0 none;
    font-size: 15px;
    font-weight: 700;
    color: #a3a3a3;
  }
}
/* E ::: 자주 묻는 질문 /faq ::: E */

/* S ::: 1:1문의 /personal-inquiry ::: S */
.personal-inquiry-wrapper {
  .personal-inquiry {
    padding: 10px 20px;
  }
  .my-page__total-count {
    display: flex;
    margin-bottom: 16px;
    gap: 8px;
    align-items: center;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    span {
      margin-left: 0;

      border-radius: 4px;
      background: #e6eee7;
      font-size: 14px;
      font-weight: 700;
      color: #0d5611;
      padding: 0;
      > span {
        padding: 3px 5px;
      }
    }
  }
  .personal-inquiry__registration-button {
    margin: 0;
    border-radius: 10px;
    height: 52px;
    background: #0d5611;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .inquiry-list__empty {
    padding: 75px 0;
    .product-board-list__empty-notes {
      padding: 0;
      font-size: 15px;
      font-weight: 700;
      color: #a3a3a3;
      line-height: 1;
    }
  }
  .personal-inquiry-list-wrapper {
    margin-top: 24px;
    .personal-inquiry-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .inquiry-item {
      padding-bottom: 0;
      .badge {
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        border-radius: 30px;

        background: #deeeff;
        color: #005ac3;
        border: 0 none;
        &.badge--line-point {
          color: #fff;
          background: #434343;
        }
      }
    }
    .inquiry-item + .inquiry-item {
      margin-top: 0;
      border-top: 0;
    }
    .inquiry-item .inquiry-item__bottom {
      margin: 0;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border: 1px solid #d4d4d4;
      border-radius: 12px;
      gap: 4px;
      .img-wrap {
        display: block;
        width: 100%;
      }
      .inquiry-item__inquiry-info {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        .inquiry-item__inquiry-type {
          font-size: 12px;
          font-weight: 700;
          color: #0d5611;
        }
        .inquiry-item__inquiry-info-title {
          padding: 0;
          font-size: 16px;
          font-weight: 700;
          color: #111;
          line-height: 1.3;
        }
      }
      .inquiry-item__date {
        margin-top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        line-height: 1.3;
        color: #525252;
      }
    }
  }
}
.personal-modal {
  .personal-inquiry-form {
    padding: 16px 20px;
    > h6 {
      font-size: 16px;
      font-weight: 700;
      color: #262626;
      line-height: 1;
      margin-bottom: 12px;
    }
    .text-field {
      border: 1px solid #d9d9d9;
      border-radius: 8px;
      height: 52px;
      margin-top: 0;
      input {
        padding: 0 20px;
        margin-bottom: 20px;
      }
    }
    .board-form__top {
      margin-bottom: 20px;
    }
    .board-form__type-selector {
      margin-bottom: 12px;
      border: 1px solid #d9d9d9;
      border-radius: 8px;
      height: 52px;
      padding-top: 0;
      select {
        height: 52px;
        padding: 18px 40px 15px 20px;
      }
    }

    .character-counter__status--character {
      display: none;
    }
    .text-area {
      margin: 0;
      border: 1px solid #d9d9d9;
      border-radius: 8px;
      max-height: 120px;
      min-height: 120px;
    }
  }
  .file-msg-text {
    margin: 22px 0 34px;
    font-size: 16px;
    font-weight: 700;
    color: #262626;
  }
  .file-wrapper {
    display: flex;
    gap: 16px;
    overflow-x: scroll;
    margin-bottom: 30px;
    padding-bottom: 10px;

    .board-form__upload-btn {
      margin-top: 0;
      min-width: 100px;
      width: 100px;
      height: 100px;
      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
      background: #fff;
      border: 0 none;
      padding: 0;
      border-radius: 8px;
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 32px;
        height: 32px;
        background-image: url(green-plus-btn..svg?ef68651e5963876506f3) !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      &::before {
        content: '사진 등록';
        display: block;

        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        line-height: 1.3;
        font-weight: 700;
        color: #757575;
      }
    }
    .board-form__image-files {
      display: flex;
      margin: 0;
      flex-wrap: nowrap;
      flex: 1;
      gap: 16px;
      li {
        padding: 0;
        border: 0;
        &.attach-file__item {
          height: auto;
          width: 100px;
          display: flex;
          flex-direction: column;
          .img-wrap {
            position: relative;
            width: 100px;
            height: 100px;
          }
          img {
            width: 100%;
            height: 100%;
            margin-right: 0;
          }
        }
        .attach-file__remove-button {
          position: absolute;
          top: 8px;
          right: 8px;
          span {
            background-image: url(grey-circle-x..svg?4209d5d6265dfa6606e3) !important;
            background-position: unset;
            background-size: cover;
            width: 24px;
            height: 24px;
          }
        }
        .attach-file__name {
          width: 100%;
          color: #acacac;
          font-size: 12px;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 8px;
        }
      }
    }
  }
  .board-form__buttons {
    width: 360px;
    margin: 0;
    margin-left: -20px;
    padding: 14px 20px;
    background: #0d5611;
    border-radius: 10px 10px 0 0;
    position: fixed;
    bottom: 0;
    .btn-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      > p {
        font-size: 13px;
        font-weight: 500;
        color: #fff;
      }
    }
    .btn--dark {
      display: none;
    }
    .btn--caution {
      border-radius: 10px;
      height: 52px;
      background: #fff;
      font-size: 16px;
      font-weight: 700;
      color: #0d5611;
    }
  }
}
.personal-inquiry-detail-wrapper {
  .inquiry-item__top {
    padding: 0;
  }
  .personal-inquiry {
    .inquiry-item__inquiry-info {
      padding: 0;
    }
    .inquiry-item__inquiry-type {
      padding: 0;
      font-size: 12px;
      font-weight: 700;
      color: #0d5611;
      margin-bottom: 4px;
    }
    .inquiry-item__inquiry-title {
      font-size: 16px;
      line-height: 1.3;
      font-weight: 700;
      color: #111;
    }
    .inquiry-item {
      padding-bottom: 24px;
      border-bottom: 1px solid #e5e5e5;
      .badge {
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        border-radius: 30px;

        background: #deeeff;
        color: #005ac3;
        border: 0 none;
        &.badge--line-point {
          color: #fff;
          background: #434343;
        }
      }
    }
  }
  .inquiry-item__date {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-top: 4px;
    .inquiry-item__top-writer {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.3;
      color: #525252;
    }
  }
  .inquiry-item__reply {
    &.question {
      background: transparent;
      padding: 0;
      border: 0;
      padding-top: 16px;
      margin-bottom: 20px;
    }
    &.answer {
      background: #f3f6f3;
      border: 1px solid #cadacb;
      padding: 20px;
      border-radius: 12px;
      width: 100%;
      .inquiry-item__reply-content {
        width: 100%;
        .editor {
          padding-top: 16px;

          p {
            margin: 0;
          }
        }
      }
      .inquiry-item__top-writer {
        padding-bottom: 20px;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 0;
        width: 100%;
        span {
          display: none;
        }
        .inquiry-item__date {
          display: flex;
          align-items: flex-start;
          &::before {
            display: none;
          }
        }
      }
    }
    .reply-icon {
      display: none;
    }
  }
  .personal-inquiry-detail__btn-group {
    .personal-inquiry-detail__list-btn {
      height: 52px;
      border: 1px solid #d4d4d4;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      color: #111;
    }
  }
}
/* E ::: 1:1문의 /personal-inquiry ::: E */

/* S ::: 찜 페이지 /like ::: S */
.profile-like {
  padding: 0;
  padding-bottom: 200px;
  .like-wrapper {
    .empty-list {
      border: none;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      font-weight: 700;
      font-size: 15px;
      line-height: 1;
      > p {
        margin-top: 74px;
        margin-bottom: 40px;
        color: #a3a3a3;
      }
      > button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        width: 100%;
        background-color: #f3f6f3;
        border-radius: 10px;
        color: #0d5611;
      }
    }
    .like-toolbar {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      border-bottom: 1px solid #efefef;
      height: 50px;
      > div {
        display: flex;
        gap: 6px;
        justify-content: center;
        align-items: center;
        color: #434343;
      }
      > button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 65px;
        height: 30px;
        background-color: #f5f5f5;
        border-radius: 6px;
        font-weight: 500;
      }
    }

    .profile-like-list {
      margin: 0;

      .profile-like-list-item {
        display: flex;
        align-items: center;
        margin: 0 20px;
        padding: 16px 0px 20px;
        &:not(:last-child) {
          border-bottom: 1px solid #efefef;
        }
      }
    }

    .check-box {
      appearance: none;
      -webkit-appearance: none;

      min-width: 20px;
      height: 20px;

      background: url(checked-off-icon..svg?c7ce7a948c1bc5cebfad) no-repeat center / cover;
      cursor: pointer;
    }
    .check-box:checked {
      background: url(checked-icon..svg?c034c0628d063a8cf1db) no-repeat center / cover;
    }

    .thumb-item {
      position: relative;
      width: 100%;
      border: none;
      padding: 0;

      .discount-badge {
        position: absolute;
        top: 4px;
        left: 16px;

        display: flex;
        width: 32px;
        height: 19px;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-color: #ff3d25;
        color: #ffffff;
        font-weight: 700;
        font-size: 12px;
        line-height: 1;
        letter-spacing: -3%;
        border-radius: 99px;
        padding-top: 1px;
      }
      .brand-badge {
        position: absolute;
        top: 83px;
        left: 12px;
        display: flex;
        max-width: 84px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        background: linear-gradient(90deg, #34c26f, #1d916c);
        color: #ffffff;
        font-weight: 700;
        font-size: 12px;
        line-height: 1;
        letter-spacing: -3%;
        padding: 3.5px 4px;
        padding-top: 5px;
        border-radius: 0 8px;
      }

      .thumb-item__media {
        border-radius: 10px;
        overflow: hidden;
        margin-left: 12px;
      }
      .thumb-item__info {
        padding-left: 8px;
        max-height: 85px;
        height: 85px;
        width: 100%;
        min-width: 0;

        div {
          width: 100%;
        }
      }
      .product-thumb-item-wrapper {
        /* display: flex;
        flex-direction: column;
        gap: 4px; */
        width: 100%;

        .badge-wrap {
          display: flex;
          gap: 3px;
          margin-bottom: 4px;
          .badge {
            padding: 1.5px 2.5px;
            font-weight: 600;
            font-size: 10px;
            text-align: center;
            line-height: 1;
            border-radius: 4px;
            border: none;
            padding-top: 3px;
            &.blue {
              background: #dfeef6;
              color: #2070a0;
            }
            &.red {
              background: #ffe3d9;
              color: #c23100;
            }
          }
        }

        .product-thumb-item__name {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 4px;
          width: 100%;

          .product-name {
            font-weight: 600;
            font-size: 16px;
            display: block;
            width: 100%;
            max-width: 100%;

            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          > span:last-child {
            font-size: 11px;
            font-weight: 400;
            color: #757575;
            line-height: 1;
          }
        }
      }
      .item-amount-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        > li {
          font-weight: 700;
          font-size: 13px;
          line-height: 1.3;
          &:last-child {
            font-weight: 400;
            font-size: 11px;
            color: #a3a3a3;
            text-decoration: line-through;
            line-height: 1;
          }
        }
      }
    }
    .more-btn-wrap {
      border-top: 1px solid #efefef;
      padding-top: 12px;
      .more-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 59px;
        height: 40px;
        font-weight: 700;
        line-height: 1;
        margin: 0 auto;
      }
    }
    .cart-btn {
      position: fixed;
      bottom: 100px;
      width: 100%;
      max-width: 320px;
      margin: 0 20px;
      padding: 16px 19px;
      height: 52px;
      display: flex;
      align-items: center;
      gap: 16.5px;
      background-color: #0d5611;
      border-radius: 10px;
      font-weight: 700;
      color: #fff;
      > span {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e6eee7;
        color: #0d5611;
        border-radius: 4px;
      }
    }
  }
}
/* E ::: 찜 페이지 /like ::: E */

/* S ::: 주문,배송 변경 페이지 /like ::: S */
.orders {
  padding: 0 0 120px;

  .displaynone {
    display: none !important;
  }

  .orders__tabs {
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    button {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      font-size: 14px;
      font-weight: 400;
      color: #111;
      line-height: 1.4;

      border-bottom: 1px solid #e5e5e5;

      span {
        display: none;
      }

      &.active {
        font-weight: 700;
        color: #0d5611;
        display: flex;
        align-items: center;
        gap: 4px;
        border-bottom: 2px solid #0d5611;

        span {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #e6eee7;
          width: 20px;
          height: 20px;

          border-radius: 4px;

          line-height: 1;
        }
      }
    }
  }

  .select-box.start-ymd-selector {
    display: none;
  }

  .orders-inner {
    padding: 0 20px;

    .orders-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .orders__item {
        &:first-child {
          margin-top: 48px;
        }

        &.orders__item--subscription {
          &:first-child {
            margin-top: 28px;
          }
        }

        padding: 16px 20px 24px;
        border-radius: 12px;
        border: 1px solid #d9d9d9;
        box-shadow: 0 4px 34px rgba(0, 0, 0, 0.05);
        position: relative;
        display: flex;
        flex-direction: column;

        .orders_product {
          display: flex;
          gap: 10px;

          img {
            font-size: 0;
            width: 68px;
            min-width: 68px;
            height: 68px;
            background-color: lightgray;
            border-radius: 10px;
          }

          .orders__product-description {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .orders__status-wrap {
              .badge {
                height: 22px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                border: none;
                background-color: #ebf3ef;
                border-radius: 30px;

                font-size: 12px;
                font-weight: 700;
                color: #0d5611;
              }

              a {
                position: absolute;
                top: 16px;
                right: 14px;

                font-size: 12px;
                font-weight: 700;
                color: #757575;

                display: flex;
                align-items: center;

                i {
                  display: inline-block;
                  width: 18px;
                  height: 18px;
                  background-color: lightgray;
                  background: url(arrow-right-icon..svg?1cf33d0fc5c003bd1059) no-repeat center / cover;
                }
              }
            }

            .orders__product-name {
              font-size: 16px;
              font-weight: 700;
              color: #111;
              width: 148px;
            }

            .subscribe-status {
              display: flex;
              gap: 6px;
              align-items: center;

              p {
                font-size: 13px;
                font-weight: 700;
                color: #0d5611;
              }
            }
          }
        }

        .orders__delivery-info-box {
          margin-top: 13px;
        }

        .orders__buttons {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          margin-top: 10px;
          margin-bottom: -10px;

          button {
            font-size: 12px;
            font-weight: 700;
            color: #111;

            display: flex;
            gap: 4px;
            align-items: center;

            i {
              width: 20px;
              height: 20px;
              display: inline-block;
              background-color: lightgray;
              background: url(arrow-right-circle..svg?4bedae9da69075ba7961) no-repeat center / cover;
            }
          }
        }

        .orders__manage-btn {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
          margin-bottom: -10px;

          font-size: 12px;
          font-weight: 700;
          color: #111;

          display: flex;
          gap: 4px;
          align-items: center;

          i {
            width: 20px;
            height: 20px;
            display: inline-block;
            background-color: lightgray;
            background: url(arrow-right-circle..svg?4bedae9da69075ba7961) no-repeat center / cover;
          }
        }

        .orders__sub-details {
          margin-top: 10px;
          width: 100%;

          .subscription-details {
            padding: 12px;
            background-color: #f5f5f5;
            border-radius: 8px;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;

            font-size: 12px;
            line-height: 1.3;
            color: #111;
            font-weight: 400;

            > div {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
}
/* E ::: 주문,배송 변경 페이지 /like ::: E */

/* :::: 상품후기 페이지 -> 작성 가능한 후기 S :::: */

.product-review-page-wrap {
  min-height: calc(100vh - 52px);
  .profile-product-review {
    .tabs {
      /* position: fixed;
      width: 100%;
      max-width: 360px; */
      background-color: #fff;
      height: unset;
      line-height: 1.4;
      border-bottom: 1px solid #e5e5e5;

      box-shadow: 0px 10px 15px 0px #00000008;

      .tabs__item {
        color: #111111;
        padding: 19px 0 13px;
        &.on {
          color: #0d5611;
          font-weight: 700;
          border-bottom: 2px solid #0d5611;
        }
        button {
          font-size: 14px;
          font-weight: unset;
        }
        .tab-label {
          .count {
            margin-left: 4px;
            background-color: #e6eee7;
            border-radius: 4px;
            padding: 3px 5.5px;
            color: #0d5611;
            font-weight: 700;
          }
        }
      }
      li:not(:first-child):before {
        display: none;
      }
    }
    .profile-list {
      .thumb-LIST {
        display: flex;
        flex-direction: column;
        gap: 12px;
        .reviewable-box {
          border: 1px solid #d9d9d9;
          border-radius: 12px;
          background-color: #fff;
          padding: 18px 20px 20px;
          .dlivery-date-box {
            width: 100%;
            padding: 15px 0;
            border-radius: 8px;
            background: linear-gradient(90deg, #34c26f, #1d916c);
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
          }
          .profile-product-review__list-item {
            border: none;
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .product-thumb-item {
              padding: 0;
            }
            .thumb-item__media {
              width: 65px;
              height: 65px;
              border-radius: 8px;
              overflow: hidden;
            }
            .thumb-item__info {
              padding-left: 12px;
              text-align: left;
              .product-thumb-item__name {
                display: flex;
                flex-direction: column;
                gap: 4px;

                line-height: 1;
                > span {
                  font-size: 11px;
                  color: #757575;
                }
                .product-name {
                  font-weight: 600;
                  font-size: 16px;
                  color: #111111;
                }
              }
            }
            .profile-product-review__register-button {
              min-width: 41px;
              min-height: 41px;
              align-items: center;
              border-radius: 14px;
              text-align: center;
              &.subscribe {
                background-color: #f3f6f3;
                border: 1px solid #cadacb;
              }
              &.basic {
                background-color: #5a5a5a;
              }
            }
            &.gray {
              background-color: #f7f7f7;
              padding: 12px;
              gap: 10px;

              border: 1px solid #e5e5e5;
              border-radius: 10px;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
}
.preview-modal-wrap {
  .title-modal--full {
    max-width: 360px;
    min-width: 360px;
  }
  .title-modal__content {
    max-width: 360px;
    min-width: 360px;
  }
  .title-modal__header {
    height: 52px;
    border: none;
    .title-modal__title {
      font-weight: 700;
      font-size: 15px;
    }
    .title-modal__close-btn {
      right: 16px;
      .ico {
        background: url(close-icon..svg?ac31fd4edde2efe08a29) no-repeat center center;
        width: 20px;
        height: 20px;
      }
    }
  }

  .review-form {
    .board-product-item__description {
      padding: 10px 20px 24px;
      border: none;
      .board-product-item-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: #f5f5f5;
        border-radius: 10px;
        padding: 10px;
        width: 100%;
        .board-product-item__image {
          height: 52px;
          width: 52px;
        }
        .board-product-item__product {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin: 0;

          .board-product-item__product-name {
            font-weight: 600;
            font-size: 16px;
            line-height: 1;
            color: #111111;
          }
          .board-product-item-sub-title {
            font-weight: 400;
            font-size: 11px;
            line-height: 1;
          }
        }
      }
    }
    .l-panel {
      margin: 0;
    }
  }

  .review-form__content {
    box-shadow: 0 12px 1px #f5f5f5;
    border: none;
    border-top: 1px solid #e5e5e5;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;

    .review-form__evaluation {
      padding: 0;
      display: flex;
      flex-direction: column;

      .question-title-wrap {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: flex-end;

        .question-box {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 26px;
          width: 26px;
          background-color: #0d5611;
          border-radius: 50%;
        }
        .review-form__title {
          padding: 0;
          margin: 0;
          font-weight: 700;
          font-size: 20px;
          line-height: 1.2;
          display: flex;
          align-items: center;
          > span {
            margin-left: 4px;
            font-size: 14px;
            color: #287cff;
            line-height: 1;
            justify-content: center;
          }
        }
      }
      .rating-star {
        margin: 0 auto;
        margin-top: 20px;
        width: 200px;
        height: 40px;
        .rating-star__progress {
          background-position: -10px -89px;
          background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
          background-size: auto 100%;
        }
        &::before {
          background-position: -10px -141px;
          background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
          background-size: auto 100%;
        }
      }
      > span {
        margin-top: 4px;
        margin-bottom: 8px;
      }

      .flavor-review-wrapper {
        .flavor-review-wrap::before {
          content: '';
          position: absolute;
          top: 0;
          left: -20px;
          right: -20px;
          height: 1px;
          background: #f5f5f5;
        }

        .flavor-review-wrap:first-child::before {
          display: none;
        }

        .flavor-review-wrap:first-child {
          margin-top: 9px;
        }

        .flavor-review-wrap {
          display: flex;
          flex-direction: column;
          padding-top: 23px;
          padding-bottom: 18px;
          position: relative;
          /* border-top: 1px solid #f5f5f5; */

          .flavor {
            font-weight: 700;
            font-size: 16px;
          }

          .flavor-review {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 10px;
            .flavor-scale {
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative;
              width: 224px;
              .flavor-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                z-index: 1;

                .circle {
                  width: 28px;
                  height: 28px;
                  border-radius: 50%;
                  background: #d9d9d9 url(check-white-icon..svg?bca2f55e680b17da5e03) no-repeat center;
                  &.active {
                    background-color: #0d5611;
                  }
                }
              }
            }

            .flavor-scale::before {
              content: '';
              position: absolute;
              top: 14px;
              left: 0;
              right: 0;
              height: 1px;
              background: #d9d9d9;
              z-index: 0;
            }
          }
          .flavor-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            height: 20px;
            max-width: 247px;
            min-width: 240px;
            margin-right: 4px;
            margin-left: auto;
            .label {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }

      .review-form__text-area {
        margin-top: 24px;
        position: relative;
        .text-area {
          height: 144px;
          border-radius: 12px;
          text-align: left;
          padding: 14px 16px;
          font-size: 14px;
          font-weight: 400;
          line-height: 1.6;
          white-space: pre-wrap;
          word-break: break-word;
          overflow-wrap: break-word;

          border: 1px solid #d4d4d4;
        }
        &.empty .text-area {
          border-color: #d4d4d4;
        }

        &.error .text-area {
          border-color: #bd2420;
        }

        &.normal .text-area {
          border-color: #525252;
        }
        .character-counter__status {
          margin-top: 8px;
          .character-counter__count,
          .character-counter__limit-count {
            font-weight: 400;
            font-size: 12px;
            line-height: 1;
            letter-spacing: 0;
            color: #757575;
          }
        }
        .warning {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 12px;
          line-height: 1;
          color: #bd2420;
        }
      }
    }

    .add-image-wrap {
      display: flex;
      flex-direction: column;
      gap: 30px;
      > h3 {
        font-weight: 780;
        font-size: 18px;
        line-height: 1.1;
        color: #262626;
      }
      .review-form__image-files {
        margin: 0;
        gap: 16px;
        align-items: flex-start;

        .review-form__upload-btn {
          width: 100px;
          height: 100px;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          justify-content: center;
          align-items: center;
          padding-top: 5px;
          position: relative;
          margin: 0;

          box-shadow: 0px 2px 20px 0px #0000001a;

          .tooltip {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);

            background: #0b5d1e;
            color: #fff;
            font-size: 12px;
            font-weight: 400;
            /* padding: 10px 16px; */
            border-radius: 999px;
            white-space: nowrap;
            line-height: 24px;
            display: flex;
            gap: 4px;
            justify-content: flex-start;
            align-items: center;
            padding-left: 4px;
            width: 127px;

            > div > span {
              font-weight: 700;
            }

            &::after {
              content: '';
              position: absolute;
              bottom: -6px;
              left: 50%;
              transform: translateX(-50%);

              width: 0;
              height: 0;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
              border-top: 6px solid #0b5d1e;
            }
          }
          .plus {
            width: 32px;
            height: 32px;
            background: #ebf3ef url(plus-green-icon..svg?f0dcb96b59ebbd435884) no-repeat center center;
            border-radius: 50%;
          }
          > span {
            font-weight: 700;
            font-size: 12px;
            line-height: 1.3;
            color: #757575;
          }
        }
        .review-form__image-wrap {
          width: 100px;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .review-form__image {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;

            .delete-btn {
              position: absolute;
              top: 8px;
              right: 8px;
            }
          }
          .file-name {
            width: 100%;
            font-size: 12px;
            color: #acacac;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .note-box {
      align-items: center;
      padding: 15px 20px;

      background-color: #f5f5f5;
      border: 1px solid #d9d9d9;
      border-radius: 8px;
      /* max-height: 52px; */

      .note-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        > span {
          font-weight: 600;
          line-height: 1;
        }

        img {
          transition: transform 0.25s ease;
        }

        img.open {
          transform: rotate(180deg);
        }
      }

      .note-content {
        max-height: 0;
        overflow: hidden;
        counter-reset: item;

        transition: max-height 0.4s ease;
        li {
          position: relative;
          padding-left: 15px;
          font-size: 12px;
          color: #666;
          line-height: 1.4;
          letter-spacing: 0;

          white-space: pre-line;
          counter-increment: item;

          font-family: Pretendard, sans-serif;

          &::before {
            content: counter(item) '.';
            position: absolute;
            left: 4px;
            top: 0;
          }
        }
        &.open {
          max-height: 150px;
          margin-top: 11px;
        }
      }

      &.open {
        padding-bottom: 13px;
      }
    }
  }
  .board-form__button-group {
    position: sticky;
    z-index: 10;
    bottom: 0;
    background-color: #0d5611;
    width: 100%;
    margin: 0;
    padding: 14px 20px 20px;

    border-radius: 10px 10px 0 0;

    display: flex;
    flex-direction: column;
    gap: 12px;

    align-items: center;

    > button {
      width: 100%;
      background-color: #fff;
      height: 52px;
      color: #0d5611;
      border-radius: 10px;
      font-weight: 700;
      font-size: 16px;
    }
    > span {
      color: #fff;
      font-weight: 500;
      font-size: 13px;
      line-height: 1.3;
    }
  }
}

/* :::: 상품후기 페이지 -> 작성 가능한 후기 E :::: */

/* :::: 상품후기 페이지 -> 내가 작성한 후기 S :::: */
.product-review-page-wrap .complete-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 128px;
  .empty-list {
    border: none;
  }
  .product-board-list__items {
    padding: 12px 20px 0 20px;
    /* padding-bottom: 116px; */
    margin: 0;
    .thumb-LIST:last-child {
      /* border-bottom: 1px solid #e5e5e5; */
      > .product-review-item {
        border: none;
      }
    }
  }

  .product-review-item {
    border-bottom: 1px solid #e5e5e5;
  }

  .product-review-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    width: 100%;
    gap: 16px;
    .product-review-item-info {
      display: flex;
      height: 70px;
      gap: 12px;
      width: 100%;
      /* align-items: center; */

      > img {
        width: 70px;
        min-width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 12px;
      }
      .text-wrap {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 12px;
        width: 100%;

        .product-name {
          font-weight: 600;
          font-size: 18px;
          line-height: 1;
        }
        > div {
          display: flex;
          justify-content: space-between;

          > div {
            display: flex;
            gap: 8px;
            height: 16px;
            justify-content: center;
            align-items: center;

            .product-review-item-member-id {
              font-weight: 700;
              font-size: 14px;
              line-height: 1;
            }
            .product-review-item__rating {
              .rating-star {
                width: 80px;
                height: 16px;

                margin: 0;

                &::before {
                  background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
                  /* background: url('../../../public/assets/svg/star-gray-icon.svg') repeat-x; */
                  background-size: auto 100%;
                  inset: 0;
                  background-position: unset !important;
                }

                .rating-star__progress {
                  background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
                  /* background: url('../../../public/assets/svg/star-green-icon.svg') repeat-x; */
                  background-size: auto 100%;
                  inset: 0;
                  background-position: unset !important;
                }
              }
            }
          }

          .product-review-item-date {
            display: flex;
            align-items: center;
            font-family: Pretendard, sans-serif;
            font-weight: 700;
            font-size: 12px;
            line-height: 1;
            color: #a3a3a3;
          }
        }
      }
    }

    .product-review-item-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
      border-radius: 12px;
      background-color: #f7f7f7;
      line-height: 1.5;
      color: #333333;
    }

    .product-review-item-image {
      ul {
        border: none;
        display: flex;
        gap: 10px;

        > li {
          width: 92px;
          height: 92px;
          border-radius: 12px;
          overflow: hidden;
        }
      }
    }
  }

  .bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 360px;
    margin-left: 0 auto;
    height: 100%;

    background: rgba(0, 0, 0, 0.4);
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

    &.open {
      opacity: 1;
      pointer-events: auto;
    }

    .bottom-sheet {
      width: 100%;
      max-height: 90vh;

      background: #fff;
      border-radius: 20px 20px 0 0;
      box-sizing: border-box;
      overflow-y: auto;

      display: flex;
      flex-direction: column;

      transform: translateY(100%);
      transition: transform 0.3s ease;

      .bottom-sheet-header {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 20px;
        padding-top: 20px;
        width: 100%;
        touch-action: none;

        > span {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          font-weight: 700;
        }

        > img {
          margin-left: auto;
        }
      }

      .content-wrap {
        padding: 20px 20px 40px 20px;

        .slider {
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;

          gap: 12px;

          scrollbar-width: none;

          .slide {
            flex: 0 0 100%;
            aspect-ratio: 1 / 1;

            border-radius: 4px;

            scroll-snap-align: center;
          }
        }

        .slider::-webkit-scrollbar {
          display: none;
        }

        .arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;

          &.left {
            left: 0;
          }

          &.right {
            right: 0;
          }
        }

        .review-img-wrap {
          margin-top: 8px;
          display: flex;
          gap: 8px;

          .review-img {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            width: 56px;
            height: 56px;

            &.active::after {
              content: '';
              position: absolute;
              inset: 0;
              background: #43434399 url(check-white-icon..svg?bca2f55e680b17da5e03) no-repeat center;
              background-size: 20px 20px;
            }
          }
        }

        .product-review-item {
          display: flex;
          flex-direction: column;
          border: none;
          padding: 0;
          margin-top: 24px;

          .product-review-item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .product-review-item-info {
              display: flex;
              height: 20px;
              gap: 8px;
              justify-content: center;
              align-items: center;

              .product-review-item-member-id {
                font-weight: 600;
                font-size: 15px;
                line-height: 1;
              }

              .count-badge {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 4px 5px;

                background-color: #e6eee7;

                color: #0d5611;

                font-size: 12px;
                line-height: 1;
              }

              .product-review-item__rating {
                .rating-star {
                  width: 80px;
                  height: 16px;

                  margin: 0;

                  &::before {
                    background: url(gray-stars..svg?b3caf5cd7fa0e6f9c2bd) no-repeat;
                    background-size: auto 100%;
                    inset: 0;
                    background-position: unset !important;
                  }

                  .rating-star__progress {
                    background: url(green-stars..svg?d6853039eedf84481e2e) no-repeat;
                    background-size: auto 100%;
                    inset: 0;
                    background-position: unset !important;
                  }
                }
              }
            }

            .product-review-item-date {
              font-family: Pretendard, sans-serif;
              font-size: 13px;
              line-height: 1;
              color: #a3a3a3;
            }
          }

          .product-review-item-content {
            margin-top: 16px;
            line-height: 1.5;
            color: #333333;
          }
        }
      }
    }
  }

  .more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    font-weight: 700;
    line-height: 1;
    margin-top: 6px;
  }
}
/* :::: 상품후기 페이지 -> 내가 작성한 후기 E :::: */

.subscription-management-wrap {
  width: 100%;
  height: auto;
}

.subscription-management-wrap h3 {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
  margin-bottom: 16px;
}

.subscription-management-wrap .container {
  padding: 0 20px;
}

.subscription-management-wrap .info-box {
  width: 100%;
  height: auto;
  margin-top: 24px;
}

.subscription-management-wrap .info-box h4 {
  font-weight: 700;
  font-size: 15px;
  color: #0d5611;
  margin-bottom: 13px;
}

.subscription-management-wrap .info-box ul {
  width: 100%;
  height: auto;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
}

.subscription-management-wrap .info-box ul li {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.subscription-management-wrap .info-box ul li:not(:last-child) {
  border-bottom: 1px solid #f5f5f5;
}

.subscription-management-wrap .info-box ul li p {
  font-weight: 700;
  font-size: 14px;
  color: #000000;
  line-height: 1.5;
}

.subscription-management-wrap .info-box ul li .info span {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  color: #111111;
  line-height: 1.3;
  margin-right: 8px;
}

.subscription-management-wrap .btn-wrap button {
  width: 100%;
  height: 48px;
  border: 1px solid #cadacb;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0d5611;
  text-align: center;
  margin-top: 20px;
}

.subscription-management-wrap .unsubscribe {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: #111111;
  text-decoration: underline;
  margin-top: 23px;
}

/* S::: 배송지 삭제 모달 :::S */

.modal__box:has(.delivery-delete-specific-modal) {
  padding: 0;
  max-width: 320px;
  min-width: 320px;
  min-height: 100%;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 20px;

  .modal__content {
    min-height: unset;
    padding: 0;
    justify-content: unset;
    text-align: left;

    span {
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.1;
      color: #000;
    }
  }

  .modal__btns {
    display: flex;
    border: none;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;

    .btn {
      border: none !important;
      width: fit-content;
      height: 40px;
      padding: 13px 18px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;

      background-color: #0d5611;
      color: #fff;

      &:first-child {
        background-color: #f3f6f3;
        color: #0d5611;
      }
    }
  }
}

/* .title-modal--full {
    max-width: 360px;
    min-width: 360px;

    .title-modal__content {
        min-width: 320px;
    }
} */

/* E::: 배송지 삭제 모달 :::E */

/* S::: 배송지 목록 페이지 :::S */
.profile-shipping-address {
  width: 100%;
  height: 100%;
  padding: 4px 0 50px;

  .address-inner {
    width: 100%;
    height: 100%;
    padding: 0 20px;

    display: flex;
    flex-direction: column;
    gap: 20px;

    .registration-wrap {
      width: 100%;
      position: relative;

      .search-icon {
        position: absolute;
        width: 24px;
        height: 24px;
        left: 16px;
        top: 10px;
        background: url(search-icon-gray..svg?3c5387032693adeacfb9) no-repeat center / cover;
      }

      .registration-button {
        width: 100%;
        height: 44px;
        border: none;
        background-color: #f7f7f7;

        padding: 0 16px 0 48px;

        font-size: 14px;
        line-height: 1.3;
        font-weight: 700;
        color: #a3a3a3;

        text-align: left;
      }
    }

    .profile-shipping-address__list {
      margin: 0;
      gap: 12px;
      display: flex;
      flex-direction: column;

      .profile-shipping-address__list-item {
        margin: 0;
        padding: 24px 34px 24px 20px;
        border-radius: 12px;
        border: 1px solid #d9d9d9;
        gap: 8px;

        &.is-default {
          border: 1px solid #0d5611;

          .item-title-wrap {
            .title-wrap {
              .profile-shipping-address__receiver {
                color: #44883e;
              }
            }
          }
        }

        .item-title-wrap {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-wrap {
            display: flex;
            gap: 8px;
            align-items: center;

            .profile-shipping-address__default-address {
              width: 41px;
              height: 22px;
              display: flex;
              align-items: center;
              justify-content: center;

              border-radius: 30px;
              background-color: #deeeff;

              font-size: 12px;
              font-weight: 700;
              color: #005ac3;
            }

            .profile-shipping-address__receiver {
              font-size: 15px;
              font-weight: 700;
              color: #111;
            }
          }

          .default-icon-wrap {
            display: flex;
            gap: 2px;
            align-items: center;

            i {
              width: 20px;
              height: 20px;
              background: url(check-green-icon..svg?b689497c80d8cebeaf51);
            }

            span {
              font-size: 14px;
              font-weight: 700;
              color: #0d5611;
            }
          }
        }

        .item-desc-wrap {
          display: flex;
          flex-direction: column;
          gap: 2px;

          p {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #434343;
          }
        }

        .delivery-info {
          margin-top: 2px;
          display: flex;
          flex-direction: column;
          gap: 4px;

          strong {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.3;
            color: #0d5611;
          }

          span {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #434343;
          }
        }

        .profile-shipping-address__buttons--sm {
          position: unset;
          gap: 4px;

          button {
            width: 43px;
            height: 26px;
            display: flex;
            justify-content: center;
            align-items: center;

            border-radius: 6px;
            border: 1px solid #d9d9d9;

            font-size: 13px;
            font-weight: 400;
            color: #111;
          }
        }
      }
    }
  }
}

/* E::: 배송지 목록 페이지 :::E */

/* S::: 주소 검색 페이지 :::S */
.address-search-container {
  width: 100%;
  height: 100%;

  .search-zip-code-form {
    .search-zip-code-form__search {
      padding: 0 20px;
      background-color: #fff;
    }
  }
}

/* E::: 주소 검색 페이지 :::E */

/* S::: 주소 폼 페이지 :::S */
.address-form-container {
  width: 100%;
  height: 100%;
  padding: 12px 0 84px;

  .address-form-inner {
    width: 100%;
    padding: 0 20px;

    .title-wrap {
      width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 17px;

      h2 {
        font-size: 18px;
        font-weight: 700;
        color: #262626;
        line-height: 1.1;
      }

      .address-desc {
        width: 100%;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        gap: 3px;

        strong {
          width: 100%;
          font-size: 20px;
          font-weight: 700;
          line-height: 1.2;
          color: #111;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        span {
          font-size: 14px;
          line-height: 1.5;
          font-weight: 400;
          color: #434343;

          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .text-field {
      border-radius: 8px;
      border: none;
      height: 52px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0;

      font-size: 14px;
      line-height: 1.5;
      font-weight: 400;
      color: #111;

      input {
        border-radius: 8px;
        border: 1px solid #d9d9d9;
        height: 52px;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 20px;

        &:focus {
          border: 1px solid #111;
        }
      }

      &::placeholder {
        color: #a3a3a3;
      }
    }

    .address-top-wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .shipping-address-form {
      padding: 0;

      .shipping-address-form__item {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .shipping-address-form__item--label {
          margin: 0;
          font-size: 18px;
          font-weight: 700;
          line-height: 1.1;
          color: #262626;
        }

        .address-form {
          margin-top: 16px;

          .address-form__zip-code,
          .address-info-field {
            display: none;
          }

          .address-detail-field {
            margin: 0;
          }
        }

        .check-radio {
          display: flex;
          gap: 6px;
          align-items: center;

          input[type='radio'] {
            margin: 0;

            &:checked {
              background: url(green-radio-selected..svg?127f270b7d58da146a02) no-repeat center / cover;
              border: none;

              &::before {
                display: none;
              }
            }
          }

          .check-radio__ico {
            display: none;
          }

          input[type='checkbox'] {
            position: unset;
            z-index: 1;
            width: 20px;
            height: 20px;
            background: url(checked-off-icon..svg?c7ce7a948c1bc5cebfad) no-repeat center / cover;

            &:checked {
              background: url(checked-icon..svg?c034c0628d063a8cf1db) no-repeat center / cover;
            }
          }
        }

        .address-tag-group {
          width: 100%;
          display: flex;
          gap: 8px;

          > button {
            width: 100%;
            height: 52px;
            border: 1px solid #a3a3a3;
            border-radius: 10px;

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 15px;
            font-weight: 700;
            color: #111;

            &.active {
              border: 1px solid #0d5611;
              color: #0d5611;
            }
          }
        }

        &.information-item {
          margin-top: 28px;

          .info-wrap {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .select-box {
              height: 52px;
              border: 1px solid #d9d9d9;
              border-radius: 8px;

              select {
                padding: 0 30px 0 10px;
              }

              &::after {
                width: 18px;
                height: 18px;
                background: url(arrow-bottom-icon..svg?c0be5de78f0958e56a50) no-repeat center / cover;
                right: 10px;
              }
            }
          }
        }

        &.delivery-select-section {
          margin-top: 29px;
          width: 100%;

          .delivery-section__item {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 18px;

            .delivery-method-group {
              width: 100%;
              display: flex;
              gap: 8px;

              .method-box {
                width: 100%;
                position: relative;
                height: 52px;
                border-radius: 10px;
                border: 1px solid #d9d9d9;
                padding: 17px 16px;
                cursor: pointer;

                &.active {
                  border: 1px solid #0d5611;
                }

                .badge {
                  position: absolute;
                  top: -10px;
                  right: 8px;
                  height: 22px;
                  padding: 0 10px;

                  display: flex;
                  align-items: center;

                  border: 1px solid #f8e9e9;
                  border-radius: 30px;
                  background-color: #fcf6f6;

                  font-size: 12px;
                  font-weight: 700;
                  color: #c31212;
                }

                .check-radio {
                  span {
                    font-size: 15px;
                    font-weight: 600;
                    color: #111;
                  }
                }
              }
            }
          }

          .dawn-only-fields {
            width: 100%;

            .info-banner {
              width: 100%;
              height: 44px;
              border-radius: 8px;
              border: 1px solid #e5e5e5;
              background-color: #f7f7f7;
              padding: 0 16px;

              position: relative;
              display: flex;
              gap: 10px;
              align-items: center;

              .info-tag {
                border-radius: 30px;
                height: 22px;
                width: 41px;
                background-color: #434343;

                font-size: 12px;
                font-weight: 700;
                color: #fff;

                display: flex;
                align-items: center;
                justify-content: center;
              }

              p {
                font-size: 13px;
                line-height: 1.3;
                font-weight: 700;
                color: #525252;
              }

              i {
                width: 18px;
                height: 18px;
                background: url(arrow-right-gray-icon..svg?c2e2cd7e724c86caf29e) no-repeat center / cover;
                position: absolute;
                right: 10px;
                top: 13px;
              }
            }

            .enter-item {
              margin-top: 12px;

              .select-box {
                border: 1px solid #d9d9d9;
                border-radius: 8px;
                width: 100%;
                height: 52px;

                display: flex;
                align-items: center;

                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: #262626;

                select {
                  padding: 16px 20px;
                }

                &::after {
                  width: 20px;
                  height: 20px;
                  background: url(arrow-bottom-icon..svg?c0be5de78f0958e56a50) no-repeat center / cover;
                  right: 20px;
                }
              }
            }

            .delivery-message-item {
              width: 100%;
              margin: 19px 0 17px;
              display: flex;
              flex-direction: column;
              gap: 22px;

              .message-wrap {
                width: 100%;
                display: flex;
                justify-content: space-between;

                > h3 {
                  font-size: 15px;
                  font-weight: 700;
                  color: #111;
                }

                .select-wrap {
                  display: flex;
                  gap: 20px;
                  align-items: center;

                  .check-radio {
                    span {
                      font-size: 14px;
                      font-weight: 700;
                      color: #111;
                    }

                    &.afternoon {
                      span {
                        font-weight: 600;
                        color: #434343;
                      }
                    }

                    &.saveMessage {
                      span {
                        font-size: 14px;
                        font-weight: 600;
                        color: #434343;
                      }
                    }
                  }
                }
              }
            }
          }

          .delivery-request-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .request-wrap {
              width: 100%;
              display: flex;
              flex-direction: column;
              gap: 12px;

              .section-title {
                font-size: 15px;
                font-weight: 700;
                color: #111111;
              }

              .textarea-wrapper {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 10px;

                textarea {
                  padding: 12px 16px;
                  width: 100%;
                  border-radius: 8px;
                  border: 1px solid #d4d4d4;
                  min-height: 100px;

                  font-size: 14px;
                  line-height: 1.5;
                  font-weight: 400;
                  color: #111;

                  &::placeholder {
                    color: #a3a3a3;
                  }
                }

                .char-count {
                  width: 100%;
                  text-align: right;

                  font-size: 12px;
                  font-weight: 400;
                  color: #757575;
                }
              }
            }
          }
        }

        &.save-address-wrap {
          margin-top: 12px;
        }
      }
    }
  }
}

@media (max-width: 700px) {
  .toast-added {
    max-width: calc(100% - 40px) !important;
    margin: 0 auto;
  }
}

.toast-added {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;
  width: 320px;
  max-width: 320px;
  padding: 20px 0;

  border-radius: 12px;
  background-color: #262626;

  span {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
  }

  i {
    width: 20px;
    height: 20px;
    background: url(checked-circle-icon..svg?95bb7964f34ae73d5c30) no-repeat center / cover;
  }

  /* 애니메이션 적용: 3초 동안 slideUp 효과 */
  animation: slideUp 3s ease-in-out forwards;
}

@keyframes slideUp {
  0% {
    /* 시작: 화면 밖 아래쪽에 숨어 있음 (Y축 100% 지점) */
    transform: translate(-50%, 100%);
    opacity: 0;
  }

  15% {
    /* 나타남: 원래 위치로 올라옴 */
    transform: translate(-50%, 0);
    opacity: 1;
  }

  85% {
    /* 유지: 85% 시점까지 그 자리에 머뭄 */
    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {
    /* 퇴장: 다시 아래로 내려가며 사라짐 */
    transform: translate(-50%, 100%);
    opacity: 0;
  }
}

/* E::: 주소 폼 페이지 :::E */

/* 식단 카드 공용 */
.current-plan-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;

  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 16px 20px;

  .card-info-wrap {
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: center;

    .plan-img {
      width: 68px;
      min-width: 68px;
      height: 68px;
      background-color: lightgray;
      border-radius: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        font-size: 0;
      }
    }
  }

  .plan-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;

    strong {
      font-size: 16px;
      font-weight: 700;
      color: #111111;
    }

    .plan-badges {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 6px;

      .badge-count {
        width: 34px;
        height: 16px;
        border-radius: 4px;
        background-color: #434343;
        color: #fff;

        font-size: 10px;
        font-weight: 600;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .delivery-days {
        font-size: 13px;
        font-weight: 700;
        color: #0d5611;
      }
    }
  }
}

/* 공용 스위치 */
.custom-switch-subs {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 16px;
  cursor: pointer;
  background-color: #d9d9d9;

  &.on {
    background-color: #0d5611;

    .handle {
      transform: translateX(12px);
    }
  }

  .handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
  }
}

/* 공용 안내 뱃지 */
.subs-info-badge {
  border-radius: 30px;
  height: 22px;
  width: 41px;
  background-color: #434343;

  font-size: 12px;
  font-weight: 700;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  &.sm {
    width: 34px;
    height: 16px;
    border-radius: 4px;

    font-size: 10px;
    font-weight: 600;
  }
}

/* 캘린더 공용 */
.calendar-wrap {
  border: 1px solid #d9d9d9;
  border-radius: 10px;

  .calendar-header-date {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 14px 20px;

    > div {
      width: 100%;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
      color: #0d5611;
      text-align: center;
    }
  }

  .calendar-body {
    padding: 25px 20px 26px;
    width: 100%;
    background-color: #f9f9f9;

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      row-gap: 18px;

      .date-cell {
        position: relative;
        width: 100%;
        height: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 400;
        color: #cfcfcf;

        &.is-delivery {
          color: #111;
          display: flex;
          justify-content: center;
          cursor: pointer;

          span {
            background-color: #e8f5e9;
            border-radius: 10px;
            width: 32px;
            height: 32px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        &.is-selected {
          span {
            background-color: #0d5611;
            color: #fff;
          }

          .badge-changing {
            position: absolute;
            top: -7px;
            right: -17px;
            background: #0d5611;
            border: 1px solid #fff;
            color: #fff;
            font-size: 10px;
            line-height: 1.3;
            font-weight: 600;
            width: 34px;
            height: 17px;
            border-radius: 60px;
          }
        }

        &.is-today {
          span {
            color: #338b60 !important;
          }

          .today-label {
            position: absolute;
            bottom: -4px;
            font-size: 10px;
            line-height: 1.3;
            font-weight: 600;
          }
        }

        &.is-disabled {
          pointer-events: none;

          span {
            background-color: unset;
            color: #cfcfcf;
          }
        }
      }
    }
  }
}

.swap-visual {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  border-radius: 10px;
  border: 1px solid #d9d9d9;

  position: relative;

  .current-dish {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;

    img {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      border: 1px dashed #a3a3a3;
    }

    strong {
      font-size: 15px;
      font-weight: 600;
      color: #d1d1d1;
    }

    &.is-selected {
      img {
        background: lightgray;
        border: none;
      }

      strong {
        color: #111111;
      }
    }

    &:first-child {
      border-bottom: 1px solid #d9d9d9;
    }
  }

  .swap-icon {
    position: absolute;
    background: #525252;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    right: 13px;
    top: 50%;
    transform: translateY(-50%);

    i {
      background: url(swap-icon..svg?570962c4a744c97ab8f5) no-repeat center / cover;
      width: 24px;
      height: 24px;
    }
  }
}

/* S::: 반찬 변경 페이지 :::S */
.side-dish-change-container {
  width: 100%;
  height: 100%;
  padding: 10px 0 0;

  .side-dish-change-inner {
    padding: 0 20px;
    width: 100%;

    .side-dish-wrap {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .title-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;

      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: #000000;
      }

      .info-box {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background-color: #f6f7f9;
        padding: 0 12px;

        font-size: 14px;
        line-height: 1.5;
        color: #000;

        i {
          width: 16px;
          height: 16px;
          background: url(InformationCircle..svg?e1a31a826730cc928113) no-repeat center / cover;
        }
      }
    }

    .calendar-section {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .calendar-header {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        span {
          font-size: 16px;
          font-weight: 700;
          color: #000;
        }

        button {
          width: 14px;
          height: 14px;
          font-size: 0;
          background-color: red;
          background: url(grey-circle-right-arrow..svg?ee731e0b3bb6a1def844) no-repeat center / cover;

          &:first-child {
            transform: rotate(-180deg);
          }
        }
      }

      .dish-list-section {
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        > h3 {
          font-size: 18px;
          font-weight: 700;
          color: #262626;
        }

        .empty-placeholder {
          border-radius: 8px;
          background-color: #f6f7f9;
          width: 100%;
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 14px;
          font-weight: 700;
          line-height: 1.5;
          color: #a3a3a3;
        }

        .selected-date-wrap {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 12px;

          > span {
            font-size: 14px;
            font-weight: 700;
            color: #0d5611;
          }

          ul {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .dish-item {
              display: flex;
              align-items: center;
              gap: 12px;
              position: relative;
              width: 100%;
              height: 52px;
              padding: 0 12px;

              border-radius: 10px;
              border: 1px solid #d9d9d9;

              img {
                width: 36px;
                height: 36px;
                background-color: lightgray;
                border-radius: 6px;
                font-size: 0;
              }

              span {
                font-size: 15px;
                color: #111;
                font-weight: 600;
              }

              button {
                position: absolute;
                right: 12px;
                top: 13px;
                width: 43px;
                height: 26px;

                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 6px;
                background-color: #efefef;

                font-size: 13px;
                font-weight: 400;
                color: #111;
              }
            }
          }
        }
      }
    }

    .swap-section {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 24px;

      .alternative-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        > h3 {
          margin-bottom: 8px;
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }

        label {
          width: 100%;
          height: 52px;
          border: 1px solid #d9d9d9;
          border-radius: 10px;
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 0 12px;

          position: relative;

          img {
            font-size: 0;
            width: 36px;
            height: 36px;
            background-color: lightgray;
            border-radius: 6px;
          }

          span {
            font-size: 15px;
            font-weight: 600;
            color: #111;
          }

          i {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 14px;
            right: 12px;

            background: url(grey-circle-checkbox..svg?48e33416b10c305b02c4) no-repeat center / cover;
          }

          &.is-active {
            border: 1px solid #0d5611;

            i {
              background: url(green-circle-checkbox..svg?77cd254d452ed9517739) no-repeat center / cover;
            }
          }
        }
      }
    }

    @media (max-width: 700px) {
      .bottom-buttons {
        max-width: calc(100% - 40px) !important;
        margin: 0 auto;
      }
    }

    .bottom-buttons {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;

      max-width: 320px;
      width: 320px;

      button {
        width: 100%;
        height: 52px;
        border-radius: 10px;
        background-color: #0d5611;
        color: #fff;

        font-size: 16px;
        font-weight: 700;

        display: flex;
        align-items: center;
        justify-content: center;

        &.btn-cancel {
          background-color: #fff;
          border: 1px solid #cadacb;
          color: #0d5611;
        }
      }
    }
  }
}

/* E::: 반찬 변경 페이지 :::E */

/* S::: 배송 날짜 변경 페이지 :::S */
.delivery-date-change-container {
  width: 100%;
  height: 100%;
  padding: 10px 0 50px;

  .delivery-date-change-inner {
    width: 100%;
    height: 100%;
    padding: 0 20px;

    .delivery-date-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;

      .title-wrap {
        display: flex;
        flex-direction: column;
        gap: 12px;

        h2 {
          font-size: 20px;
          line-height: 1.2;
          font-weight: 700;
          color: #000;
        }

        .info-wrapper {
          width: 100%;
          height: 56px;

          background-color: #f7f7f7;
          border: 1px solid #e5e5e5;
          border-radius: 8px;

          display: flex;
          align-items: center;
          gap: 8px;

          padding: 0 16px;

          span {
            border-radius: 30px;
            width: 41px;
            height: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #434343;

            font-size: 12px;
            font-weight: 700;
            color: #fff;
          }

          p {
            font-size: 13px;
            font-weight: 700;
            color: #262626;
            line-height: 1.3;
          }
        }
      }

      .calendar-section {
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .calendar-header {
          display: flex;
          width: 100%;
          justify-content: center;

          span {
            font-size: 16px;
            font-weight: 700;
            color: #000;
          }
        }

        .calendar-wrap {
          border: none;
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    /* 아래쪽 정렬 */
    z-index: 1000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;

    &.active {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0s 0s;

      .bottom-sheet {
        transform: translateY(0);
      }
    }

    .bottom-sheet {
      width: 100%;
      background: #fff;
      padding: 24px 20px 22px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      max-width: 360px;
      margin: 0 auto;

      transform: translateY(100%);
      transition: transform 0.3s ease-out;

      display: flex;
      flex-direction: column;
      gap: 20px;

      position: relative;

      .sheet-header {
        width: 100%;
        height: 56px;
        background-color: #f7f7f7;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
        display: flex;
        align-items: center;

        .preview-box {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;

          div {
            width: 100%;
            text-align: center;
            font-size: 15px;
            font-weight: 600;

            &.date-current {
              color: #111;
            }

            &.date-new {
              color: #d1d1d1;

              &.is-active {
                color: #287cff;
              }
            }
          }

          .ico-swap {
            position: absolute;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #525252;

            display: flex;
            align-items: center;
            justify-content: center;

            left: 50%;
            transform: translateX(-50%);

            i {
              display: inline-block;
              width: 24px;
              height: 24px;
              background: url(left-right-swap-icon..svg?ee2bc1faf5bf7852485a) no-repeat center / cover;
            }
          }
        }
      }

      .sheet-content {
        display: flex;
        flex-direction: column;
        gap: 11px;

        h3 {
          font-size: 18px;
          font-weight: 700;
          color: #262626;
        }

        .option-group {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;

          button {
            width: 72px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;

            border: 1px solid #d9d9d9;
            border-radius: 10px;

            font-size: 15px;
            white-space: nowrap;
            font-weight: 600;
            color: #111;

            &.is-active {
              border: 1px solid #0d5611;
              color: #0d5611;
            }
          }
        }
      }

      .sheet-footer {
        width: 100%;
        display: flex;
        gap: 8px;
        height: 52px;

        button {
          width: 100%;
          border-radius: 10px;
          border: 1px solid #cadacb;
          font-size: 16px;
          font-weight: 700;
          color: #0d5611;

          display: flex;
          align-items: center;
          justify-content: center;

          &:disabled {
            background-color: #d4d4d4;
            border: none;
            color: #fff;
          }

          &.btn-submit {
            background-color: #0d5611;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}

/* E::: 배송 날짜 변경 페이지 :::E */

/* S::: 정기구독 시 적립금 자동 할인 페이지 :::S */
.auto-discount-container {
  width: 100%;
  height: 100%;
  padding: 14px 0 50px;

  .auto-discount-inner {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .title-wrap {
      display: flex;
      flex-direction: column;
      gap: 20px;

      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: #000000;
      }

      .custom-toggle-wrap {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        height: 52px;

        border-radius: 12px;
        border: 1px solid #d9d9d9;
        background-color: #f3f7f3;

        p {
          display: flex;
          gap: 7px;
          align-items: center;

          font-size: 14px;
          font-weight: 700;
          color: #000;
          line-height: 1.5;
        }
      }
    }

    .info-box {
      width: 100%;
      height: 100%;
      padding: 16px 25px 16px 16px;

      display: flex;
      flex-direction: column;
      gap: 8px;

      border-radius: 8px;
      background-color: #f5f5f5;

      .info-title {
        width: 100%;
        display: flex;
        gap: 8px;
        align-items: center;

        p {
          font-size: 15px;
          font-weight: 600;
          color: #000;
        }
      }

      .desc {
        span {
          font-size: 14px;
          font-weight: 400;
          line-height: 1.5;
          color: #525252;
        }
      }
    }
  }
}

/* E::: 정기구독 시 적립금 자동 할인 페이지 :::E */

/* S::: 식단해지 페이지 :::S */
.cancel-meal-plan-container {
  width: 100%;
  height: 100%;
  padding: 10px 0 92px;

  .cancel-meal-plan-inner {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;

    .title-wrap {
      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: #000;
      }
    }

    .reason-input-section {
      width: 100%;
      height: 100%;

      .textarea-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;

        textarea {
          width: 100%;
          min-height: 100px;
          border-radius: 12px;
          border: 1px solid #d4d4d4;

          padding: 12px 24px 12px 16px;

          font-size: 14px;
          line-height: 1.5;
          color: #111;

          &::placeholder {
            color: #a3a3a3;
          }
        }

        span {
          width: 100%;
          text-align: right;

          font-size: 12px;
          font-weight: 400;
          color: #757575;
        }
      }
    }
  }
}

/* E::: 식단해지 페이지 :::E */

@charset 'utf-8';

:root {
  --whole-color: #fff;
  --background-color: #f5f6f8;
  --point-color: #f92626;
  --point-color-secondary: #2869f7;
  --black-color: #111;
  --dark-gray-color: #262626;

  --empty-color: #f5f6f8;
  --default-color: #ddd;
  --blue-gray-color: #3f434c;
  --gray-color: #999;
  --gray-font-color: #828282;
  --tooltip-bg-color: #f7f7f7;

  --default-font-color: #181818;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@media (max-width: 700px) {
  .toast-wrapper {
    max-width: calc(100% - 40px) !important;
    margin: 0 auto;
  }
}

.toast-wrapper {
  position: fixed;
  /* bottom: 103px; */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0 12px;
  max-width: 360px;
  z-index: 20;
  .toast {
    height: 60px;
    width: 100%;

    padding: 0 20px;
    background: #262626;
    opacity: 90%;
    border-radius: 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    animation: toastUp 0.35s ease;

    line-height: 1.3;

    touch-action: none;
    > div {
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
      text-align: center;
      > span {
        color: white;
        font-weight: 700;
      }
    }

    > button {
      color: #2aa68e;
    }
  }
}

@keyframes toastUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}