@charset "utf-8";

@import url(global.css);
/* 📣 font, 공통값, semantic color, header => global.css */
.header_inner {
  justify-content: flex-end;
}

.page_title {
  display: none;
}

.btn_logout {
  display: none;
}

.find_section {
  width: 100%;
  height: calc(100vh - 58px);
  padding: 8vh 0;
}

.find_section {
  padding: 20px 0;
}

.find_section.edit_pw_section {
  padding: 120px 0;
}

.find_content {
  width: 600px;
  padding: 6.25vh 90px;
  border-radius: 20px;
  box-shadow: var(--shadow-heavy);
  margin: 0 auto;
}

.find_title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--label-normal);
  margin-bottom: 30px;
}

.auth_method {
  width: 100%;
  margin-bottom: 8.854vh;
}

.btn_wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

.btn_wrap::before {
  content: "";
  width: 2px;
  height: 22px;
  background-color: var(--line-normal);
  position: absolute;
  left: 50%;
}

.btn_wrap li {
  width: 50%;
  display: flex;
  justify-content: center;
}

.btn_wrap button {
  padding: 10px;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--label-alternative);
  cursor: pointer;
}

.btn_wrap li button.active {
  font-weight: 600;
  color: var(--primary-normal);
}

.find_pw_form {
  display: none;
  flex-direction: column;
  gap: 12vh;
}

.find_pw_form.active {
  display: flex;
}

.input_field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.id_container,
.tel_container,
.email_container,
.auth_container {
  width: 100%;
  height: 45px;
  position: relative;
}

.input_wrap {
  width: 100%;
  height: 100%;
}

.input_field input {
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--label-normal);
  border-bottom: 1px solid var(--line-normal);
  padding: 0 128px 0 10px;
}

.input_field input::placeholder {
  color: var(--label-alternative);
}

.input_field input:focus {
  border-bottom: 2px solid var(--primary-normal);
}

.input_field input.active {
  border-bottom: 2px solid var(--primary-normal);
  background-color: var(--background-alternative);
}

.input_field input.val {
  border-bottom: 2px solid var(--status-destructive);
}

.input_field .delete {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 102px;
  transform: translateY(-50%);
  cursor: pointer;
  display: none;
}

.id_container .input_wrap .delete {
  right: 10px;
}

.input_field .delete.active {
  display: block;
}

.input_field button {
  width: 84px;
  height: 33px;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--label-white);
  background-color: var(--label-assistive);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.mobile_btn {display: none;}

.input_field button.active {
  background-color: var(--primary-normal);
  cursor: pointer;
}

.auth_container button.active {
  background-color: #000;
  cursor: pointer;
}

.validation_wrap {
  height: 22px;
  transform: translateY(-12px);
  padding: 4px 10px;
}

.validation {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  color: var(--status-destructive);
}

.find_complete {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background-color: var(--primary-normal);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--label-white);
  cursor: pointer;
}

.complete_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.complete_content {
  width: 100%;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.description {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--label-normal);
  text-align: center;
}

.user_id_unique {
  color: var(--primary-normal);
}

.login_btn {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background-color: var(--primary-normal);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--label-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 비밀번호 변경 */
/* find_pw_edit.html */

.eidit_pw_section .find_title {
  margin-bottom: 80px;
}

.edit_pw_form {
  display: flex;
  flex-direction: column;
  gap: 140px;
}

.edit_pw_form .input_field {
  position: relative;
}


.input_field input.edit_password,
.input_field input.check_password {
  height: 45px;
}

.edit_pw_form .input_wrap {
  position: relative
}

.edit_pw_form .delete {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.input_field .chk_delete {
  right: 10px;
  top: 80%;
}

.link_btn.pc {display: none;}

@media (max-width: 1024px) {

.pc {display: none;}
.pc_btn {display: none;}
.mobile_btn {display: block;}

.find_section {
  width: 100%;
  height: calc(100vh - 8.625vh - 36px);
  padding : 30px 0 0;
}

.find_content {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  border-radius: 0;
  box-shadow: none;
}

.auth_method {
  width: 100%;
  height: auto;
  margin-bottom: 0;
}

.btn_wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

.btn_wrap::before {
  content: "";
  width: 1px;
  height: 14px;
  background-color: var(--label-normal);
  position: absolute;
  left: 50%;
}

.btn_wrap li {
  width: 50%;
  display: flex;
  justify-content: center;
}

.btn_wrap button {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--label-normal);
  cursor: pointer;
}

.btn_wrap li button.active {
  font-weight: 700;
  color: var(--label-normal);
}

.find_id_form {
  display: none;
  flex-direction: column;
  gap: 0;
}

.find_id_form.active {
  display: flex;
}

.input_field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.id_container,
.tel_container,
.email_container,
.auth_container {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: static;
}

.input_wrap {
  width: 100%;
  height: auto;
  position: relative;
}

.input_field input {
  width: 100%;
  height: 49px;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--label-normal);
  border: 1px solid var(--line-normal);
  border-radius: 10px;
  padding: 0 15px;
}

.input_field input::placeholder {
  color: var(--label-alternative);
}

.input_field input:focus {
  border: 2px solid var(--primary-normal);
}

.input_field input.val {
  border: 2px solid var(--status-destructive);
}

.input_field .delete {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  display: none;
}

.input_field .delete.active {
  display: block;
}

/***** 유효성 ******/
.validation_wrap {
  height: 12px;
  padding: 0 10px;
  transform: translate(0);
}
.validation {
  height: 12px;
  line-height: 1;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--status-destructive);
}
/******************/

.input_field .request_btn {
  width: 100%;
  height: 49px;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--label-white);
  background-color: #000!important;
  position: static;
  transform: translate(0);
}

.input_field button.active {
  background-color: var(--primary-normal);
}

.auth_container button.active {
  background-color: #000;
}

.complete_btn {display: none;}

.re-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.input_field button.re-request {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--primary-normal);
  text-decoration: underline;
  text-underline-offset: 6px;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  position: static;
  transform: translate(0);
}

.find_complete {
  width: calc(100% - 32px);
  height: 61px;
  border-radius: 10px;
  background-color: var(--primary-normal);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--label-white);
  position: absolute;
  left: 16px;
  bottom: 16px;
}

.complete_content {
  gap: 16px;
}

.complete_content figure {
  width: 22px;
}

.complete_content img {
  width: 100%;
}

.description {
  font-size: 2rem;
}

.login_btn {
  width: calc(100% - 32px);
  height: 61px;
  position: absolute;
  bottom: 16px;
}

.link_btn {
  width: auto;
  margin: 0;
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
}

.re-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.input_field button.re-request {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--primary-normal);
  text-decoration: underline;
  text-underline-offset: 6px;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  position: static;
  transform: translate(0);
}

/* 비밀번호 변경 */

.find_section.edit_pw_section {
  padding: 30px 0 0 ;
}

.new_container .validation_wrap,
.confirm_container .validation_wrap {
  padding: 8px 10px;
}

.new_container .validation,
.confirm_container .validation {
  height: auto;
}

}