.popup-wrap{
  position: fixed; left: 0; top: 0%;
  width: 100%; height: 100%;
  z-index: 10000001; 
  display: none;

  .popup-bg{
    position: absolute; 
    width: 100%;
    height: 100%;
    background: var(--alpha-black-60);
  }

  .popup-container{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--alpha-black-30);
    /* width: 42rem; */
    width: 50rem;
    z-index: 10000002;

    .popup-content {
      text-align: center;

      figure{
        position: relative;
        margin: 0;

        img{
          width: 100%;
          border-radius: 10px 10px 0 0;
        }

        a{
          position: absolute;
          left: 50%;
          bottom: 7.8%;
          transform: translateX(-50%);
          width: 80%;
          height: 5rem;
        }
      }

      figure.text{
        background-color: var(--color-white);
        border-radius: 10px 10px 0 0;
        padding: 2rem;

        .tit{
          font-size: clamp(20px, 3vw, 26px);
          font-weight: var(--font-weight-bold);
          color: var(--color-purple-dark);
          margin-bottom: 2rem;
        }

        .conts{
          display: flex;
          flex-direction: column;
          gap: 1.2rem;

          p{
            font-size: clamp(13px, 3vw, 16px);
            font-weight: var(--font-weight-regular);
            color: var(--color-gray-03);
            line-height: 1.3;
            word-break: keep-all;
          }

          .point{
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-02);
          }
        }
      }

      figcaption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        font-size: var(--font-size-xxs);
        background: var(--color-white);
        border-radius: 0 0 10px 10px;

        label{
          display: flex;
          align-items: center;
          cursor: pointer;
          color: var(--color-gray-06);
          gap: 6px;

          input[type="checkbox"] {
            appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid var(--color-gray-09);
            border-radius: 50%;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease-in-out;

            &:checked {
              background-color: var(--color-black);
              border-color: var(--color-black);
            }

            &::after {
              content: "✔";
              font-size: 12px;
              color: var(--color-white);
              font-weight: bold;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }

        button{
          background: none;
          border: none;
          font-size: var(--font-size-xxs);
          cursor: pointer;
          color: var(--color-gray-03);
        }
      } 
    }
  }
}

@media screen and (max-width: 780px) {
  .popup-wrap{
    .popup-container{
      left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 60%;
    }
  }
}

@media screen and (max-width: 600px) {
  .popup-wrap{
    display: none; 

    .popup-container{
      width: 80vw;
    }
  }
}