/* modal popup */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay.show {
  display: flex;
}
.modal-overlay .form-pop {
  position: relative;
  flex-shrink: 0;
  transform-origin: center center;
}
#formModal .form-pop {
  width: 672px;
  height: 608px;
}
#formModalMb .form-pop {
  width: 543px;
  height: 570px;
}

/* === form PC === */
#formModal .form-pop .group,
#formModal .form-pop form {
  position: absolute;
  top: 0;
  left: 0;
  width: 672px;
  height: 608px;
  margin: 0;
}
#formModal .form-pop form {
  z-index: 5;
}
#formModal .form-pop .group .rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 672px;
  height: 608px;
  background-color: #500b00;
  border-radius: 25.77px;
}
#formModal .form-pop .group .div {
  position: absolute;
  top: 0;
  left: 0;
  width: 672px;
  height: 94px;
  border-radius: 25.77px 25.77px 0px 0px;
  background: linear-gradient(90deg, rgba(117, 3, 3, 1) 0%, rgba(23, 9, 0, 1) 100%);
}
#formModal .form-pop .group .ng-k {
  position: absolute;
  top: 17px;
  left: 235px;
  font-family: "UTM Avo-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 41.8px;
  letter-spacing: 0;
  line-height: 59.8px;
  white-space: nowrap;
  z-index: 2;
}
#formModal .form-pop .group .image-photoroom {
  position: absolute;
  top: 472px;
  left: 111px;
  width: 442px;
  height: 114px;
  aspect-ratio: 3.87;
  animation: ctaPulse 1.5s ease-in-out infinite;
}
#formModal .form-pop .group .rectangle-2 {
  position: absolute;
  top: 119px;
  left: 33px;
  width: 604px;
  height: 88px;
  background-color: #ffffff;
}
#formModal .form-pop .group .rectangle-3 {
  position: absolute;
  top: 237px;
  left: 34px;
  width: 604px;
  height: 87px;
  background-color: #ffffff;
}
#formModal .form-pop .group .group-2 {
  position: absolute;
  top: 353px;
  left: 34px;
  width: 604px;
  height: 88px;
  background-color: #ffffff;
}
#formModal .form-pop .group .image {
  position: absolute;
  top: 385px;
  left: 61px;
  width: 29px;
  height: 29px;
  object-fit: cover;
}
#formModal .form-pop .group .img {
  position: absolute;
  top: 150px;
  left: 56px;
  width: 29px;
  height: 29px;
  object-fit: cover;
}
#formModal .form-pop .group .image-2 {
  position: absolute;
  top: 260px;
  left: 56px;
  width: 39px;
  height: 39px;
  object-fit: cover;
}
#formModal .form-pop .group .group-wrapper {
  position: absolute;
  top: 15px;
  left: 629px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffb650;
  border: none;
  border-radius: 14.1px;
  cursor: pointer;
  z-index: 6;
  padding: 0;
  transition: filter 0.15s;
}
#formModal .form-pop .group .group-wrapper:hover {
  filter: brightness(1.15);
}
#formModal .form-pop .group .group-wrapper span {
  position: absolute;
  width: 5px;
  height: 19px;
  background-color: #ffffff;
  border-radius: 2.42px;
}
#formModal .form-pop .group .group-wrapper span:first-child {
  transform: rotate(-51.91deg);
}
#formModal .form-pop .group .group-wrapper span:last-child {
  transform: rotate(-130.23deg);
}
#formModal .form-pop .form-input {
  position: absolute;
  width: 604px;
  height: 88px;
  background: transparent;
  border: none;
  outline: none;
  font-family: "UTM Avo-Regular", Helvetica;
  font-weight: 400;
  font-size: 27.4px;
  color: #000000;
  padding: 0 88px 0 78px;
  z-index: 2;
  caret-color: #ffb650;
  box-sizing: border-box;
}
#formModal .form-pop .form-input:focus,
#formModal .form-pop .form-input:not(:placeholder-shown) {
  color: #000000;
}
#formModal .form-pop .input-1 {
  top: 119px;
  left: 33px;
  height: 88px;
}
#formModal .form-pop .input-2 {
  top: 237px;
  left: 34px;
  height: 87px;
}
#formModal .form-pop .input-3 {
  top: 353px;
  left: 34px;
  height: 88px;
}
#formModal .form-pop .text-wrapper,
#formModal .form-pop .text-wrapper-2,
#formModal .form-pop .text-wrapper-3 {
  position: absolute;
  pointer-events: none;
  font-family: "UTM Avo-Regular", Helvetica;
  font-weight: 400;
  color: #a1a1a1;
  font-size: 27.4px;
  letter-spacing: 0;
  line-height: 39.2px;
  white-space: nowrap;
  z-index: 3;
}
#formModal .form-pop .text-wrapper {
  top: 143px;
  left: 111px;
}
#formModal .form-pop .text-wrapper-2 {
  top: 260px;
  left: 111px;
}
#formModal .form-pop .text-wrapper-3 {
  top: 377px;
  left: 112px;
}
#formModal .form-pop .input-1:focus + .text-wrapper,
#formModal .form-pop .input-1:not(:placeholder-shown) + .text-wrapper,
#formModal .form-pop .input-2:focus + .text-wrapper-2,
#formModal .form-pop .input-2:not(:placeholder-shown) + .text-wrapper-2,
#formModal .form-pop .input-3:focus + .text-wrapper-3,
#formModal .form-pop .input-3:not(:placeholder-shown) + .text-wrapper-3 {
  display: none;
}
#formModal .form-pop .toggle-pwd {
  position: absolute;
  left: 559px;
  top: 250px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 4;
}
#formModal .form-pop .toggle-pwd:hover {
  opacity: 1;
}
#formModal .form-pop .toggle-pwd .icon-eyeslash {
  width: 37.48px;
  height: 22px;
}
#formModal .form-pop .toggle-pwd .icon-eye {
  width: 37.48px;
  height: 22px;
  display: none;
}
#formModal .form-pop .toggle-pwd.open .icon-eyeslash {
  display: none;
}
#formModal .form-pop .toggle-pwd.open .icon-eye {
  display: block;
}
#formModal .form-pop .error-msg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "UTM Avo-Regular", Helvetica;
  font-size: 13px;
  line-height: 13px;
  color: #fff;
  text-shadow: 0px 1px 4px #000;
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
}
#formModal #error-username-pc {
  top: 213px;
}
#formModal #error-password-pc {
  top: 330px;
}
#formModal #error-phone-pc {
  top: 447px;
}
#formModal .form-pop .cta {
  position: absolute;
  top: 472px;
  left: 111px;
  width: 442px;
  height: 114px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  transition: filter 0.15s;
  animation: ctaPulse 1.5s ease-in-out infinite;
}
#formModal .form-pop .cta:hover {
  filter: brightness(1.12);
}
#formModal .form-pop .cta:active {
  filter: brightness(0.9);
}
#formModal .form-pop .cta:disabled {
  cursor: not-allowed;
}

/* === form mobile === */
#formModalMb .form-pop .group,
#formModalMb .form-pop form {
  position: absolute;
  top: 0;
  left: 0;
  width: 543px;
  height: 570px;
  margin: 0;
}
#formModalMb .form-pop form {
  z-index: 5;
}
#formModalMb .form-pop .group .rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 543px;
  height: 570px;
  background-color: #500c00;
  border-radius: 29.53px;
}
#formModalMb .form-pop .group .div {
  position: absolute;
  top: 0;
  left: 0;
  width: 543px;
  height: 114px;
  border-radius: 29.53px 29.53px 0px 0px;
  background: linear-gradient(90deg, rgba(117, 3, 3, 1) 0%, rgba(23, 9, 0, 1) 100%);
}
#formModalMb .form-pop .group .ng-k {
  position: absolute;
  top: 22px;
  left: 156px;
  font-family: "UTM Avo-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 47.9px;
  letter-spacing: 0;
  line-height: 68.5px;
  white-space: nowrap;
  z-index: 2;
}
#formModalMb .form-pop .group .image-photoroom {
  position: absolute;
  top: 453px;
  left: 92px;
  width: 356px;
  height: 94px;
  aspect-ratio: 3.79;
  animation: ctaPulse 1.5s ease-in-out infinite;
}
#formModalMb .form-pop .group .rectangle-2 {
  position: absolute;
  top: 154px;
  left: 26px;
  width: 490px;
  height: 75px;
  background-color: #ffffff;
}
#formModalMb .form-pop .group .rectangle-3 {
  position: absolute;
  top: 254px;
  left: 26px;
  width: 490px;
  height: 75px;
  background-color: #ffffff;
}
#formModalMb .form-pop .group .rectangle-4 {
  position: absolute;
  top: 353px;
  left: 26px;
  width: 490px;
  height: 75px;
  background-color: #ffffff;
}
#formModalMb .form-pop .group .image {
  position: absolute;
  top: 380px;
  left: 49px;
  width: 25px;
  height: 25px;
  object-fit: cover;
}
#formModalMb .form-pop .group .img {
  position: absolute;
  top: 176px;
  left: 42px;
  width: 34px;
  height: 34px;
  object-fit: cover;
}
#formModalMb .form-pop .group .image-2 {
  position: absolute;
  top: 274px;
  left: 45px;
  width: 34px;
  height: 34px;
  object-fit: cover;
}
#formModalMb .form-pop .group .group-wrapper {
  position: absolute;
  top: 18px;
  left: 489px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffb650;
  border: none;
  border-radius: 16.15px;
  cursor: pointer;
  z-index: 6;
  padding: 0;
  transition: filter 0.15s;
}
#formModalMb .form-pop .group .group-wrapper:hover {
  filter: brightness(1.15);
}
#formModalMb .form-pop .group .group-wrapper span {
  position: absolute;
  width: 6px;
  height: 22px;
  background-color: #ffffff;
  border-radius: 2.77px;
}
#formModalMb .form-pop .group .group-wrapper span:first-child {
  transform: rotate(-51.91deg);
}
#formModalMb .form-pop .group .group-wrapper span:last-child {
  transform: rotate(-130.23deg);
}
#formModalMb .form-pop .form-input {
  position: absolute;
  width: 490px;
  height: 75px;
  background: transparent;
  border: none;
  outline: none;
  font-family: "UTM Avo-Regular", Helvetica;
  font-weight: 400;
  font-size: 23.3px;
  color: #000000;
  padding: 0 62px 0 66px;
  z-index: 2;
  caret-color: #ffb650;
  box-sizing: border-box;
}
#formModalMb .form-pop .form-input:focus,
#formModalMb .form-pop .form-input:not(:placeholder-shown) {
  color: #000000;
}
#formModalMb .form-pop .input-1 {
  top: 154px;
  left: 26px;
}
#formModalMb .form-pop .input-2 {
  top: 254px;
  left: 26px;
}
#formModalMb .form-pop .input-3 {
  top: 353px;
  left: 26px;
}
#formModalMb .form-pop .text-wrapper,
#formModalMb .form-pop .text-wrapper-2,
#formModalMb .form-pop .text-wrapper-3 {
  position: absolute;
  pointer-events: none;
  font-family: "UTM Avo-Regular", Helvetica;
  font-weight: 400;
  color: #a1a1a1;
  font-size: 23.3px;
  letter-spacing: 0;
  line-height: 33.3px;
  white-space: nowrap;
  z-index: 3;
}
#formModalMb .form-pop .text-wrapper {
  top: 174px;
  left: 92px;
}
#formModalMb .form-pop .text-wrapper-2 {
  top: 274px;
  left: 92px;
}
#formModalMb .form-pop .text-wrapper-3 {
  top: 373px;
  left: 92px;
}
#formModalMb .form-pop .input-1:focus + .text-wrapper,
#formModalMb .form-pop .input-1:not(:placeholder-shown) + .text-wrapper,
#formModalMb .form-pop .input-2:focus + .text-wrapper-2,
#formModalMb .form-pop .input-2:not(:placeholder-shown) + .text-wrapper-2,
#formModalMb .form-pop .input-3:focus + .text-wrapper-3,
#formModalMb .form-pop .input-3:not(:placeholder-shown) + .text-wrapper-3 {
  display: none;
}
#formModalMb .form-pop .toggle-pwd {
  position: absolute;
  width: 51px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 4;
}
#formModalMb .form-pop .toggle-pwd:hover {
  opacity: 1;
}
#formModalMb .form-pop .toggle-pwd[data-target="passwordMb"] {
  top: 269px;
  left: 439px;
}
#formModalMb .form-pop .toggle-pwd .icon-eyeslash {
  width: 32px;
  height: 18.8px;
}
#formModalMb .form-pop .toggle-pwd .icon-eye {
  width: 32px;
  height: 18.8px;
  display: none;
}
#formModalMb .form-pop .toggle-pwd.open .icon-eyeslash {
  display: none;
}
#formModalMb .form-pop .toggle-pwd.open .icon-eye {
  display: block;
}
#formModalMb .form-pop .error-msg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "UTM Avo-Regular", Helvetica;
  font-size: 13px;
  line-height: 13px;
  color: #fff;
  text-shadow: 0px 1px 4px #000;
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
  margin-top: -3px;
}
#formModalMb #error-username-mb {
  top: 235px;
}
#formModalMb #error-password-mb {
  top: 335px;
}
#formModalMb #error-phone-mb {
  top: 434px;
}
#formModalMb .form-pop .cta {
  position: absolute;
  top: 453px;
  left: 92px;
  width: 356px;
  height: 94px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  transition: filter 0.15s;
  animation: ctaPulse 1.5s ease-in-out infinite;
}
#formModalMb .form-pop .cta:hover {
  filter: brightness(1.12);
}
#formModalMb .form-pop .cta:active {
  filter: brightness(0.9);
}
#formModalMb .form-pop .cta:disabled {
  cursor: not-allowed;
}

/* toast */
.toast {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 8px;
  font-family: "UTM Avo-Regular", Helvetica;
  font-size: 18px;
  color: #fff;
  text-align: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, top 0.4s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.toast.show {
  opacity: 1;
  pointer-events: auto;
}
.toast.success {
  background: linear-gradient(135deg, #1a8a3f, #28a745);
}
.toast.error {
  background: linear-gradient(135deg, #a13030, #dc3545);
}

/* cta pulse */
@keyframes ctaPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}