#login {
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 32;
}

#join {
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 32;
}

#login2 {
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 32;
}

#login:before {
  background-color: rgba(0, 0, 0, 0.7);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#login .login-wrap {
  background-color: #fff;
  border-radius: 16px;
  left: 50%;
  padding: 20px 30px;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 503px;
}

#login .login-wrap .logo-wrap {
  margin: auto;
  margin-bottom: 40px;
  text-align: center;
  width: 177px;
}


#login .login-wrap .title {
  font-size: 24px;
  font-weight: 600;
}

#login .login-wrap .title > span {
  color: #767676;
  display: block;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 10px;
}

#login .login-wrap .title > span.mention {
  color: #5D7966;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 20px;
}

#login .login-wrap .btn-login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: auto;
  margin-bottom: 16px;
  padding: 0 100px;
  width: 100%;
}

#login .login-wrap .btn-login button {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
  height: 44px;
  overflow: hidden;
  width: 100%;
}

#login .login-wrap .btn-login button span {
  font-size: 16px;
}

#login .login-wrap .btn-login button.btn-login-naver {
  background-color: #00BF18;
  color: #FFFFFF;
}

#login .login-wrap .btn-login button.btn-login-naver span {
  color: #FFFFFF;
}

#login .login-wrap .btn-login button.btn-login-kakao {
  background-color: #f9e000;
  color: #371c1c;
}

#login .login-wrap .btn-login button.btn-login-kakao span {
  color: #371c1c;
}

#login .login-wrap .btn-login button .img-box {
  height: 44px;
  width: 44px;
}

#login .login-wrap .btn-login .btn-login-naver .img-box {
  background: url('../images/icons/fix-talktalk.svg') no-repeat center / cover;
}

#login .login-wrap .btn-login .btn-login-kakao .img-box {
  background: url('../images/icons/fix-kakao.svg') no-repeat center / cover;
}


#login .login-wrap .btn-login button .login-img, #login .login-wrap .btn-login button object {
  height: 100%;
  width: 44px;
}


#login .login-wrap .btn-next-wrap .btn-next {
  font-size: 16px;
  text-decoration: underline;
}

@media screen and (max-width: 820px) {
  #login .login-wrap {
    width: 450px;
  }

  #login .login-wrap .btn-login {
    padding: 0 50px;
  }
}

@media screen and (max-width: 460px) {
  #login .login-wrap {
    border-radius: 16px;
    padding: 20px 10px;
    width: 300px;
  }

  #login .login-wrap .logo-wrap {
    width: 120px;
  }

  #login .login-wrap .title {
    font-size: 20px;
  }

  #login .login-wrap .title > span {
    font-size: 14px;
  }

  #login .login-wrap .btn-login button span {
    font-size: 14px;
  }

  #login .login-wrap .btn-login {
    padding: 0 10px;
  }

}

#join:before {
  background-color: rgba(0, 0, 0, 0.7);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#join .login-wrap {
  background-color: #fff;
  border-radius: 16px;
  left: 50%;
  padding: 20px 30px;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 503px;
}

#join .login-wrap .logo-wrap {
  margin: auto;
  margin-bottom: 40px;
  text-align: center;
  width: 177px;
}


#join .login-wrap .title {
  font-size: 24px;
  font-weight: 600;
}

#join .login-wrap .title > span {
  color: #767676;
  display: block;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 10px;
}

#join .login-wrap .btn-login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: auto;
  margin-bottom: 16px;
  padding: 0 100px;
  width: 100%;
}

#join .login-wrap .btn-login button {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
  height: 44px;
  overflow: hidden;
  width: 100%;
}

#join .login-wrap .btn-login button span {
  font-size: 16px;
}

#join .login-wrap .btn-login button.btn-login-naver {
  background-color: #00BF18;
  color: #FFFFFF;
}

#join .login-wrap .btn-login button.btn-login-naver span {
  color: #FFFFFF;
}

#join .login-wrap .btn-login button.btn-login-kakao {
  background-color: #f9e000;
  color: #371c1c;
}

#join .login-wrap .btn-login button.btn-login-kakao span {
  color: #371c1c;
}

#join .login-wrap .btn-login button img {
  height: 100%;
  width: auto;
}


#join .login-wrap .btn-next-wrap .btn-next {
  font-size: 16px;
  text-decoration: underline;
}

@media screen and (max-width: 820px) {
  #join .login-wrap {
    width: 450px;
  }

  #join .login-wrap .btn-login {
    padding: 0 50px;
  }
}

@media screen and (max-width: 460px) {
  #join .login-wrap {
    border-radius: 16px;
    padding: 20px 10px;
    width: 300px;
  }

  #join .login-wrap .logo-wrap {
    width: 120px;
  }

  #join .login-wrap .title {
    font-size: 20px;
  }

  #join .login-wrap .title > span {
    font-size: 14px;
  }

  #join .login-wrap .btn-login button span {
    font-size: 14px;
  }

  #join .login-wrap .btn-login {
    padding: 0 10px;
  }

}

section.foreign-login {
  margin-bottom: 40px;
  @media (max-width: 1016px) {
  }

  & .foreign-login-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin: 0 auto;
    max-width: 1016px;
    padding: 20px;
  }

  & .title-wrap {

    & h1 {
      border-bottom: 1px solid #e0e0e0;
      font-size: 42px;
      font-weight: 600;
      margin-bottom: 40px;
      padding-bottom: 20px;
    }
  }

  & .verification-wrap {
    & .title-wrap {
      & h2 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 4px;
        padding: 0;
        position: relative;
        width: fit-content;
        z-index: 2;

        &:after {
          background-color: #86efac;
          border-radius: 2px;
          bottom: 2px;
          content: '';
          display: block;
          height: 14px;
          left: 50%;
          opacity: 0.5;
          position: absolute;
          transform: translateX(-50%);
          width: calc(100% + 10px);
          z-index: -1;
        }
      }

      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }

    & .button-wrap {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;

      & label {
        align-items: center;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        font-size: 16px;
        font-weight: 600;
        gap: 10px;
        justify-content: center;
        min-height: 40px;
        padding: 0 20px;
        transition: all 0.3s;
        @media (max-width: 1016px) {
          font-size: 14px;
          padding: 0;
          width: 100%;
        }

        & input[type="radio"] {
          display: none;
        }

        & i {
          height: 24px;
          width: 24px;

          & svg {
            height: 100%;
            width: 100%;

            & path {
              transition: all 0.3s;
            }
          }
        }

        &:hover {
          background-color: #f0f0f0;
          border: 1px solid #e0e0e0;

          & i {

            & svg path {
              fill: #000;
            }
          }
        }

        &:has(input[type="radio"]:checked) {
          background-color: #f0fdf4;
          border-color: #22c55e;

          & i {

            & svg path {
              fill: #22c55e;
            }
          }
        }
      }
    }

    & .information-wrap {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-top: 20px;
      @media screen and (max-width: 768px) {
        gap: 20px;
      }

      & .row {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 1fr;
        @media screen and (max-width: 768px) {
          grid-template-columns: 1fr;
        }

        & .input-wrap {
          display: flex;
          flex-direction: column;
          gap: 10px;

          & > p {
            color: #ef4444;
          }

          & .input-box {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 7px;

            & > div {
              display: flex;
              gap: 10px;

              &.flex {
                display: grid;
                grid-template-columns: 1fr 1fr;

                & > select {
                  background: #ffffff;
                  background: url(/images/icons/arrow-down-gray.svg) no-repeat right 12px center;
                  border: 1px solid #ededed;
                  border-radius: 6px;
                  color: #243b54;
                  cursor: pointer;
                  font-family: inherit;
                  font-size: 14px;
                  height: 44px;
                  line-height: 32px;
                  outline: 0;
                  padding: 0 14px;
                  position: relative;
                  text-decoration: none;
                }

                & .select2-selection {
                  background: none;
                  border: 1px solid #ededed;
                  border-radius: 6px;
                  color: #243b54;
                  height: 44px;

                  & .select2-selection__rendered {
                    line-height: 43px;
                  }

                  & .select2-selection__arrow {
                    top: 50%;
                    transform: translate(0, -50%);
                  }
                }
              }
            }

            & span.required {
              &::after {
                color: #dc2626;
                content: "*";
                display: inline-block;
                font-size: 12px;
                margin-left: 2px;
              }
            }

            & input {
              /*min-width: 300px;*/
            }

            & input[type="date"] {
              background: none;
              border: 1px solid #ededed;
              border-radius: 6px;
              color: #243b54;
              cursor: pointer;
              font-family: inherit;
              font-size: 14px;
              height: 44px;
              line-height: 32px;
              outline: 0;
              padding: 0 14px;
              position: relative;
              text-decoration: none;
              width: 100%;
            }
          }

          & .input-with-button {
            align-items: flex-end;
            display: flex;
            gap: 10px;


            & button {
              align-items: center;
              background: #22c55e;
              border-radius: 6px;
              color: #ffffff;
              display: flex;
              height: 44px;
              justify-content: center;
              min-width: 100px;
              padding: 0 20px;
            }
          }
        }
      }
    }

    & .agreement-wrap {
      & .agreement-box {
        margin-bottom: 10px;
      }

      & .term-wrap {
        display: flex;
        gap: 10px;

        & button {
          color: #bbbbbb;
          text-decoration: underline;
        }
      }
    }

    & .other-channels {
      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 10px;
      }

      & .application-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        & button {
          align-items: center;
          border-radius: 20px;
          display: flex;
          gap: 10px;
          height: 40px;
          justify-content: center;
          padding: 0 20px;

          &.whatsapp {
            background: #23CD63;
          }

          &.instagram {
            background: #BF1FD6;
          }

          &.facebook {
            background: #405FA1;
          }

          &.xtwitter {
            background: #080808;
          }

          &.wechat {
            background: #1DC91C;
          }

          &.weibo {
            background: #E82334;
          }

          &.line {
            background: #30BC56;
          }

          &.zalo {
            background: #216DFF;
          }

          & img {
            height: 24px;
            width: 24px;
          }

          & span {
            color: #ffffff;
          }
        }
      }
    }
  }

  & .manage-schedule {
    display: flex;
    gap: 20px;
    margin-top: 100px;
    @media screen and (max-width: 1016px) {
      flex-direction: column;
      row-gap: 60px;
    }

    & .title-wrap {
      margin-bottom: 20px;

      & h2 {
        margin-bottom: 4px;
        text-align: left;

        & strong {
          color: #22c55e;
        }
      }

      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }

    & .treatment-wrap {
      flex: 1;

      & .content-wrap {

        & .treatment-menu {
          align-items: center;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          & .left {
            align-items: center;
            display: flex;
            gap: 4px;
          }
        }

        & .treatment-list {
          border: 1px solid #e0e0e0;
          border-radius: 6px;
          padding: 10px;

          & ul {

            & li {
              align-items: center;
              border-bottom: 1px solid #e0e0e0;
              display: grid;
              gap: 10px;
              grid-template-columns: 1fr 80px 100px 40px;
              margin-bottom: 10px;
              min-height: 80px;
              padding-bottom: 10px;

              & .title-box {
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding-left: 10px;

                & h3 {
                  font-size: 16px;
                  font-weight: 600;
                }

                & p {
                  color: #767676;
                  font-size: 14px;
                }
              }

              & select {
                background: url(/images/icons/unfold.svg) no-repeat right 4px center;
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                font-size: 14px;
                padding: 6px 10px 6px 12px;
                width: 100%;
              }

              &:last-child {
                border-bottom: none;
                margin-bottom: 0;
                min-height: 70px;
                padding-bottom: 0;
              }

              & .price-box {
                align-items: flex-end;
                display: flex;
                flex-direction: column;
                gap: 4px;
                justify-content: center;

                & span {
                  color: #dddddd;
                  text-decoration: line-through;
                }

                & p {
                  font-size: 16px;
                  font-weight: 600;
                }
              }

              & button.remove {
                align-items: center;
                border-radius: 50%;
                display: flex;
                height: 40px;
                justify-content: center;
                transition: all 0.2s;
                width: 40px;

                &:hover {
                  background: #e0e0e0;
                }
              }
            }
          }
        }
      }

      & .add-button-wrap {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 10px;

        & button {
          align-items: center;
          border: 1px solid #e0e0e0;
          border-radius: 6px;
          color: #cccccc;
          display: flex;
          gap: 8px;
          height: 44px;
          justify-content: center;
          min-width: 100px;
          padding: 0 20px;
          transition: all 0.3s ease-in-out;
          width: fit-content;

          & i {
            height: 24px;
            width: 24px;

            & svg {
              fill: #cccccc;
              height: 100%;
              width: 100%;

              & path {
                transition: all 0.3s;
              }
            }
          }

          &:hover {
            background: #f0f0f0;
            border-color: #e0e0e0;
            color: #111111;

            & i svg path {
              fill: #111111;
            }
          }

          &:active {
            background-color: #22c55e;
            border: 1px solid transparent;
            color: #ffffff;

            & i svg path {
              fill: #ffffff;
            }
          }
        }
      }
    }

    & .calendar-wrap {
      & .content-wrap {
        & .calendar-box {
          background: #e0e0e0;
          height: 400px;
          min-width: 300px;
        }
      }
    }
  }

  & .memo-wrap {
    margin-top: 60px;

    & .title-wrap {
      margin-bottom: 20px;

      & h2 {
        margin-bottom: 4px;
        text-align: left;
      }

      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }

    & .content-wrap {
      & textarea {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        min-height: 80px;
        padding: 10px;
        resize: none;
        width: 100%;
      }
    }
  }

  & .guardian-wrap {
    margin-top: 60px;

    & .title-wrap {
      margin-bottom: 20px;

      & h2 {
        margin-bottom: 4px;
        text-align: left;
      }

      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }

    & .content-wrap {
      & button.guardian-consent {
        align-items: center;
        background: #22c55e;
        border-radius: 6px;
        color: #ffffff;
        display: flex;
        height: 44px;
        justify-content: center;
        min-width: 100px;
        padding: 0 20px;
      }
    }
  }

  & .agreement-wrap {
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    padding: 20px 0;

    & .agree-all {
      label {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: 10px;

        & input[type="checkbox"] {
          height: 20px;
          width: 20px;
        }

        & span {
          font-size: 16px;
          font-weight: 600;
        }
      }
    }

    & .agree-list {
      column-gap: 10px;
      display: flex;
      row-gap: 4px;
      @media screen and (max-width: 768px) {
        display: grid;
        flex-wrap: wrap;
        justify-items: stretch;
      }

      label {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: 10px;

        & input[type="checkbox"] {
          height: 20px;
          width: 20px;
        }

        & span {
          flex: 1;
          font-size: 16px;
          font-weight: 500;
          @media screen and (max-width: 768px) {
            font-size: 14px;
          }
        }
      }

      button {
        color: #22c55e;
        justify-self: flex-end;
        text-decoration: underline;
      }
    }
  }

  .treatment-price-wrap {
    margin-top: 60px;

    & .title-wrap {
      margin-bottom: 20px;

      & h2 {
        margin-bottom: 4px;
        text-align: left;
      }

      & p {
        color: #767676;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }

    & .content-wrap {
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      margin-bottom: 20px;
      padding: 20px 10px;

      & .price-box {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 0 10px;

        & span {
          color: #767676;
          font-size: 14px;
        }

        & p {
          font-size: 16px;
          font-weight: 600;
        }

        & > div {
          align-items: flex-end;
          display: flex;
          flex-direction: column;
          gap: 4px;

          & > span {
            color: #767676;
            font-size: 14px;
          }
        }

        &:nth-last-child(1) {
          border-top: 1px solid #e0e0e0;
          margin-bottom: 0;
          margin-top: 20px;
          padding-top: 20px;

          & p {
            font-size: 24px;
            font-weight: 600;
          }
        }
      }
    }

    & > p {
      color: #767676;
      font-size: 14px;
      margin-bottom: 20px;
    }

    & > button.confirm-reservation {
      align-items: center;
      background: #22c55e;
      border-radius: 6px;
      color: #ffffff;
      display: flex;
      font-size: 18px;
      font-weight: 700;
      height: 52px;
      justify-content: center;
      margin-bottom: 10px;
      margin-top: 20px;
      min-width: 100px;
      padding: 0 20px;
      width: 100%;
    }

    .error-box {
      color: #ef4444;
      font-size: 14px;
      margin-top: 10px;
    }
  }

  & .submit-wrap {
    margin-top: 40px;

    & button {
      align-items: center;
      background: #22c55e;
      border: 1px solid transparent;
      border-radius: 6px;
      color: #ffffff;
      display: flex;
      gap: 8px;
      height: 44px;
      justify-content: center;
      min-width: 100px;
      padding: 0 20px;
      transition: all 0.3s ease-in-out;
      width: 100%;
    }
  }
}