@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap");

body.user-auth-redesign {
  min-height: 100vh;
  margin: 0;
  position: relative;
  overflow-x: hidden;
  font-family: "Outfit", "Noto Sans KR", sans-serif;
  background: linear-gradient(140deg, #eff4ff 0%, #f7f1ff 48%, #eef6ff 100%);
}

body.user-auth-redesign::before,
body.user-auth-redesign::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(78px);
  opacity: 0.62;
  pointer-events: none;
}

body.user-auth-redesign::before {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, #a6b9ff 0%, #b788ff 60%, transparent 100%);
}

body.user-auth-redesign::after {
  right: -140px;
  bottom: -160px;
  background: radial-gradient(circle, #7ad0ff 0%, #a48dff 58%, transparent 100%);
}

body.user-auth-redesign #wraper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: 100%;
  padding: 44px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

body.user-auth-redesign #wraper .joinArea,
body.user-auth-redesign #wraper .joinArea2 {
  position: relative;
  width: min(100%, 470px) !important;
  margin: 0 !important;
  padding: 24px 24px 28px !important;
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid rgba(166, 178, 241, 0.32) !important;
  border-radius: 30px !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 252, 255, 0.92) 100%);
  box-shadow: 0 26px 72px rgba(69, 87, 170, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.user-auth-redesign #wraper .joinArea > div:first-child,
body.user-auth-redesign #wraper .joinArea2 > div:first-child {
  margin-bottom: 6px;
}

body.user-auth-redesign #wraper .joinArea > div:first-child a,
body.user-auth-redesign #wraper .joinArea2 > div:first-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(243, 247, 255, 0.94);
  border: 1px solid rgba(198, 211, 245, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.user-auth-redesign #wraper .joinArea > div:first-child a:hover,
body.user-auth-redesign #wraper .joinArea2 > div:first-child a:hover {
  transform: translateY(-1px);
  border-color: rgba(144, 165, 234, 0.9);
  box-shadow: 0 10px 20px rgba(88, 105, 186, 0.16);
}

body.user-auth-redesign #wraper .joinArea > div:first-child a img,
body.user-auth-redesign #wraper .joinArea2 > div:first-child a img {
  width: 18px !important;
  height: 18px !important;
  opacity: 0.74;
}

body.user-auth-redesign #wraper .join_title.ty_logo,
body.user-auth-redesign #wraper .joinArea2 .join_title.ty_logo {
  justify-content: center;
  margin: 4px 0 14px !important;
}

body.user-auth-redesign #wraper .join_title.ty_logo:not([style*="display:none"]):not([style*="display: none"]),
body.user-auth-redesign #wraper .joinArea2 .join_title.ty_logo:not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
}

body.user-auth-redesign #wraper .join_title.ty_logo:not([style*="display:none"]):not([style*="display: none"]) + .join_title.ty_logo,
body.user-auth-redesign #wraper .joinArea2 .join_title.ty_logo:not([style*="display:none"]):not([style*="display: none"]) + .join_title.ty_logo {
  display: none !important;
}

body.user-auth-redesign #wraper .join_title.ty_logo img {
  width: 88px;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(112, 125, 193, 0.25));
}

body.user-auth-redesign #wraper .joinArea .join_title:not(.ty_logo),
body.user-auth-redesign #wraper .joinArea2 .join_title:not(.ty_logo) {
  margin-top: 8px !important;
  color: #111827 !important;
  font-family: "Outfit", "Noto Sans KR", sans-serif !important;
  font-size: 33px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

body.user-auth-redesign #wraper .joinArea .join_subTitle,
body.user-auth-redesign #wraper .joinArea2 .join_subTitle {
  margin-top: 14px !important;
  color: #5b6479 !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  letter-spacing: -0.18px !important;
  text-align: center !important;
}

body.user-auth-redesign #wraper .joinArea .join_subTitle p,
body.user-auth-redesign #wraper .joinArea2 .join_subTitle p {
  margin-top: 6px !important;
  color: #5b6479 !important;
  line-height: 1.62 !important;
  text-align: center !important;
}

body.user-auth-redesign #wraper .joinArea .join_subTitle a,
body.user-auth-redesign #wraper .joinArea2 .join_subTitle a,
body.user-auth-redesign #wraper .pwd_btn a {
  color: #586bff !important;
  font-weight: 700 !important;
  text-underline-offset: 2px;
}

body.user-auth-redesign #wraper .joinArea .inputArea,
body.user-auth-redesign #wraper .joinArea2 .inputArea {
  margin-top: 32px !important;
}

body.user-auth-redesign #wraper .joinArea .inputArea.ty_pw {
  margin-top: 36px !important;
}

body.user-auth-redesign #wraper .joinArea .inputArea2,
body.user-auth-redesign #wraper .joinArea2 .inputArea2 {
  margin-bottom: 14px !important;
}

body.user-auth-redesign #wraper .joinArea .inputArea .inputBox,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox {
  position: relative;
  height: 58px !important;
  border: 1px solid #d9e2fb !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}

body.user-auth-redesign #wraper .joinArea .inputArea .inputBox:last-child,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox:last-child {
  margin-bottom: 0;
}

body.user-auth-redesign #wraper .joinArea .inputArea .inputBox input,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox input {
  padding: 0 50px 0 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #172035 !important;
}

body.user-auth-redesign #wraper .joinArea .inputArea .inputBox input::placeholder,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox input::placeholder {
  color: #91a0bc !important;
  font-weight: 500 !important;
}

body.user-auth-redesign #wraper .joinArea .inputArea .inputBox input:hover,
body.user-auth-redesign #wraper .joinArea .inputArea .inputBox input:focus,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox input:hover,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox input:focus {
  box-shadow: 0 0 0 3px rgba(129, 114, 255, 0.16) !important;
}

body.user-auth-redesign #wraper .joinArea .inputArea .inputBox #input_img,
body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox #input_img {
  position: absolute;
  right: 14px;
  top: 50%;
  margin: 0;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-50%);
  opacity: 0.65;
  pointer-events: none;
}

body.user-auth-redesign #wraper .joinArea .login_btn,
body.user-auth-redesign #wraper .joinArea2 .login_btn2 {
  position: relative;
  width: 100% !important;
  height: 58px !important;
  line-height: 56px !important;
  margin-top: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #f3d85a !important;
  background-color: #fee500 !important;
  color: #2b2e35 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.24px !important;
  box-shadow: 0 10px 20px rgba(209, 184, 38, 0.3);
  background-position: 18px 50% !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.user-auth-redesign #wraper .joinArea .login_btn:hover,
body.user-auth-redesign #wraper .joinArea2 .login_btn2:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(209, 184, 38, 0.36);
}

body.user-auth-redesign #wraper .joinArea .join_btn,
body.user-auth-redesign #wraper .joinArea2 .join_btn2 {
  width: 100% !important;
  height: 58px !important;
  line-height: 56px !important;
  margin-top: 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.24px !important;
  background: linear-gradient(95deg, #5f7dff 0%, #7358ff 42%, #9548ff 100%) !important;
  box-shadow: 0 16px 28px rgba(95, 92, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.user-auth-redesign #wraper .joinArea .join_btn:hover,
body.user-auth-redesign #wraper .joinArea2 .join_btn2:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 32px rgba(95, 92, 255, 0.4);
}

body.user-auth-redesign #wraper .joinArea .findpw_btn {
  width: 100% !important;
  height: 58px !important;
  line-height: 56px !important;
  margin-top: 12px !important;
  border-radius: 14px !important;
  border: 1px solid #7688ff !important;
  background: rgba(246, 249, 255, 0.8) !important;
  color: #5a67d8 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

body.user-auth-redesign #wraper .joinArea .pwd_btn {
  padding-top: 16px !important;
}

body.user-auth-redesign #wraper .joinArea .agree {
  margin-top: 16px !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

body.user-auth-redesign #wraper .joinArea .agree p {
  margin: 0;
  color: #5e667d !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.1px !important;
}

body.user-auth-redesign #wraper .joinArea .agree input + label {
  margin-top: 1px;
}

body.user-auth-redesign .info-box {
  margin: 20px auto !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 188, 85, 0.45) !important;
  border-left: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(170deg, #fff8ea 0%, #fffdf8 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.user-auth-redesign .info-box p {
  color: #6e6457 !important;
}

body.user-auth-redesign #resendMessage {
  color: #2d9364 !important;
  font-weight: 600;
  text-align: center;
}

body.user-auth-redesign #resendError {
  color: #c53a60 !important;
  font-weight: 600;
  text-align: center;
}

body.user-auth-redesign #coverBG {
  background: rgba(17, 24, 40, 0.56) !important;
}

body.user-auth-redesign .pop-layer {
  border-radius: 18px !important;
  border: 1px solid rgba(208, 218, 248, 0.8);
  box-shadow: 0 24px 52px rgba(43, 60, 120, 0.26) !important;
}

@media (max-width: 1024px) {
  body.user-auth-redesign #wraper {
    align-items: flex-start;
    padding: 26px 14px;
  }

  body.user-auth-redesign #wraper .joinArea,
  body.user-auth-redesign #wraper .joinArea2 {
    width: min(100%, 560px) !important;
  }
}

@media (max-width: 768px) {
  body.user-auth-redesign #wraper .joinArea,
  body.user-auth-redesign #wraper .joinArea2 {
    border-radius: 22px !important;
    padding: 20px 16px 22px !important;
  }

  body.user-auth-redesign #wraper .joinArea .join_title:not(.ty_logo),
  body.user-auth-redesign #wraper .joinArea2 .join_title:not(.ty_logo) {
    font-size: 28px !important;
    line-height: 1.32 !important;
    text-align: left !important;
  }

  body.user-auth-redesign #wraper .joinArea .join_subTitle,
  body.user-auth-redesign #wraper .joinArea2 .join_subTitle,
  body.user-auth-redesign #wraper .joinArea .join_subTitle p,
  body.user-auth-redesign #wraper .joinArea2 .join_subTitle p {
    text-align: left !important;
  }

  body.user-auth-redesign #wraper .joinArea .inputArea,
  body.user-auth-redesign #wraper .joinArea2 .inputArea {
    margin-top: 24px !important;
  }
}

@media (max-width: 430px) {
  body.user-auth-redesign #wraper {
    padding: 18px 10px;
  }

  body.user-auth-redesign #wraper .joinArea,
  body.user-auth-redesign #wraper .joinArea2 {
    border-radius: 18px !important;
    padding: 16px 12px 18px !important;
  }

  body.user-auth-redesign #wraper .join_title.ty_logo {
    margin-bottom: 10px !important;
  }

  body.user-auth-redesign #wraper .join_title.ty_logo img {
    width: 78px;
  }

  body.user-auth-redesign #wraper .joinArea .join_title:not(.ty_logo),
  body.user-auth-redesign #wraper .joinArea2 .join_title:not(.ty_logo) {
    font-size: 24px !important;
  }

  body.user-auth-redesign #wraper .joinArea .join_subTitle,
  body.user-auth-redesign #wraper .joinArea2 .join_subTitle {
    font-size: 14px !important;
  }

  body.user-auth-redesign #wraper .joinArea .inputArea .inputBox,
  body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox,
  body.user-auth-redesign #wraper .joinArea .join_btn,
  body.user-auth-redesign #wraper .joinArea2 .join_btn2,
  body.user-auth-redesign #wraper .joinArea .findpw_btn,
  body.user-auth-redesign #wraper .joinArea .login_btn,
  body.user-auth-redesign #wraper .joinArea2 .login_btn2 {
    height: 54px !important;
    line-height: 52px !important;
  }

  body.user-auth-redesign #wraper .joinArea .inputArea .inputBox input,
  body.user-auth-redesign #wraper .joinArea2 .inputArea .inputBox input {
    font-size: 16px !important;
  }
}