.membership-payment {
  .wrapper {
    height: 1338px;
  }

  .toggle-buttons {
    width: 222px;
    height: 46px;
    border-radius: 2000em;
    background-color: #b2d2eb;
    display: flex;
    align-items: center;
    margin-top: 92px;
    margin-inline: auto;

    > button {
      position: relative;
      flex: 1;
      height: 100%;
      font-size: 18px;
      border-radius: 2000em;
      text-align: center;
      letter-spacing: -0.72px;
      color: #12171b;

      &.active {
        font-weight: 700;
        background-color: #fff;
      }

      &:last-child {
        &::before {
          content: "16% OFF";
          position: absolute;
          top: -42px;
          right: 0;
          width: 72px;
          height: 28px;
          background-color: #58ef0d;
          border-radius: 2000em;
          color: #0d2600;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: -0.12cqw;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          letter-spacing: -0.12cqw;
        }

        &::after {
          content: "";
          position: absolute;
          top: -20px;
          right: 7px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 10px 0 10px;
          border-color: #58ef0d transparent transparent transparent;
        }
      }
    }
  }

  .price-box {
    position: absolute;
    left: 50%;
    bottom: 236px;
    transform: translateX(-50%);
    width: 1162px;

    &.monthly {
      display: none;
    }
  }

  .card {
    position: relative;
    width: 266px;
    height: 489px;
    container-type: inline-size;
    margin-inline: 2.083cqw;

    &.best {
      .card-inner {
        background-color: #12171b;
      }

      .title h3,
      .price-info .price-number,
      .benefit-list > li {
        color: #fff;
      }

      .title p {
        color: #a3aeb7;
      }

      .price-info .price-unit {
        color: #788086;
      }

      .buy-button {
        background-color: #0589f9;
        color: #fff;
      }

      .price-message .price-description {
        background-color: #2d363e;
        color: #fff;
      }

      .badge-list {
        li {
          &:nth-child(1) {
            background: #0589f9;
          }

          &:nth-child(2) {
            background-color: #ebf2f8;
            color: #2c3b48;
          }
        }
      }

      .benefit-list {
        border-color: #4b5258;
      }
    }

    &.vip {
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        top: 35.049cqw;
        width: 82.363cqw;
        height: 29.714cqw;
        background: rgba(18, 23, 27, 0.6);
        backdrop-filter: blur(3.761cqw);
        -webkit-backdrop-filter: blur(3.761cqw);
        border-radius: 2.257cqw;
        background-image: url("https://english.yanadoocdn.com/upload/yafit/images/web/promotion/yafitMoney/img_secret.png");
        background-repeat: no-repeat;
        background-size: 47.549cqw;
        background-position: center;
      }

      &::after {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 33.088cqw;
        content: "*상담 신청 시에만 열리는 전용 혜택입니다.";
        color: #acb0b3;
        font-size: 4.412cqw;
        letter-spacing: -0.176cqw;
      }

      .price-unit {
        display: none;
      }
    }
  }

  .card-inner {
    display: flex;
    flex-direction: column;
    padding: 9.804cqw;
    border-radius: 6.765cqw;
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
  }

  .title {
    > div {
      display: flex;
      align-items: center;
      gap: 2.451cqw;
    }
    h3 {
      font-size: 6.863cqw;
      font-weight: 700;
      line-height: 129.927%;
      letter-spacing: -0.275cqw;
    }

    p {
      color: #565656;
      font-size: 4.901cqw;
      line-height: 110.729%;
      letter-spacing: -0.196cqw;
      margin-top: 2.451cqw;
    }
  }

  .badge-list {
    display: flex;
    gap: 1.127cqw;

    li {
      color: #fff;
      text-align: center;
      font-size: 4.167cqw;
      font-weight: 700;
      letter-spacing: -0.167cqw;
      border-radius: 2000em;
      background: #3b444c;
      padding-inline: 2.941cqw;
      height: 7.353cqw;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      line-height: 7.353cqw;
    }
  }

  .price-info {
    margin-top: 9.314cqw;
    display: flex;
    align-items: flex-end;

    .price-number {
      font-size: 13.725cqw;
      font-weight: 700;
      line-height: 125.567%;
      letter-spacing: -0.549cqw;
    }

    .price-unit {
      color: #565656;
      font-size: 5.882cqw;
      font-weight: 400;
      line-height: 129.956%;
      letter-spacing: -0.235cqw;
      transform: translateY(-2cqw);
      margin-left: 2.941cqw;
    }
  }

  .price-message {
    margin-top: 1.716cqw;
    display: flex;
    align-items: center;
    gap: 1.569cqw;
    height: 9.804cqw;

    p {
      font-size: 5.392cqw;
      line-height: 131%;
      font-weight: 700;
      background: linear-gradient(90deg, #0589f9 0%, #00d211 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .price-description {
      color: #2c3b48;
      font-size: 4.167cqw;
      height: 7.843cqw;
      font-weight: 700;
      letter-spacing: -0.167cqw;
      padding-inline: 1.961cqw;
      background-color: #ebf2f8;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1.127cqw;
      box-sizing: border-box;
    }
  }

  .benefit-list {
    display: flex;
    flex-direction: column;
    gap: 3.676cqw;
    padding-top: 7.353cqw;
    margin-top: 7.353cqw;
    border-top: 1px solid #d8d8d8;

    > li {
      font-size: 5.637cqw;
      font-weight: 500;
      letter-spacing: -0.113cqw;
      padding-left: 6.863cqw;
      box-sizing: border-box;
      background-image: url("https://english.yanadoocdn.com/upload/yafit/images/web/promotion/yafitMoney/ico_able.svg");
      background-repeat: no-repeat;
      background-size: 4.902cqw;
      background-position: left;
      line-height: 1.5;

      &.disabled {
        background-image: url("https://english.yanadoocdn.com/upload/yafit/images/web/promotion/yafitMoney/ico_disable.svg");
        color: #a8b3bc;
      }
    }
  }

  .buy-button {
    height: 19.118cqw;
    width: 110%;
    color: #2c3b48;
    font-size: 5.882cqw;
    font-weight: 700;
    letter-spacing: -0.118cqw;
    border-radius: 2.451cqw;
    background: #ebf2f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-left: -5%;
  }

  .membership-message {
    color: #89a1b4;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 166px;
    left: 50%;
    transform: translateX(-50%);

    br {
      display: none;
    }
  }

  @media (max-width: 1200px) {
    .wrapper {
      height: 285.667cqw;
    }

    .toggle-buttons {
      margin-top: 21.333cqw;
      width: 51cqw;
      height: 10.667cqw;

      > button {
        font-size: 4cqw;
        letter-spacing: -0.16cqw;

        &:last-child {
          &::before {
            top: -10cqw;
            width: 16.667cqw;
            height: 6.667cqw;
            font-size: 3cqw;
          }

          &::after {
            top: -5cqw;
            right: 1.75cqw;
            border-width: 2.5cqw 2.5cqw 0 2.5cqw;
          }
        }
      }
    }

    .price-box {
      bottom: 48cqw;
      width: 100%;
      overflow: hidden;
    }

    .card {
      width: 68cqw;
      height: 125cqw;
      margin-inline: 2.167cqw;
    }

    .membership-message {
      bottom: 28.667cqw;
      font-size: 3cqw;
      letter-spacing: -0.06cqw;
      line-height: 1.5;

      br {
        display: block;
      }
    }
  }
}