/****************************
*******PC(1920 ~ 1441)********
****************************/
/* 공용 css */
.text-bold {
  font-weight: 700;
}
.flex {
  display: flex;
  align-items: center;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.required {
  color: #007aff;
  margin-left: 2px;
}

/* KV 텍스트 */
.registration .kv__title {
  color: #000;
}
.registration .kv__desc {
  color: #000;
}

/* 회원가입 스텝 1,2 */
.registration-step-wrap {
  position: relative;
}
.registration-step1 {
  visibility: visible;
  position: static;
}
.registration-step2 {
  visibility: hidden;
  position: absolute;
}

/* step 01 cscs */
/* section inner */
.registration-form-wrapper .inner {
  min-width: 1140px;
  width: fit-content;
  padding: 0 32px 0 32px;
  /* padding-bottom: 40px; */
}

/* 회원가입 서브 타이틀 */
.registration .sub-title {
  margin-bottom: 40px;
  font-family: "SamsungSharpSans";
  font-size: 18px;
  letter-spacing: -1px;
  text-align: center;
}
.registration .sub-title h2 {
  margin-bottom: 24px;

  font-weight: 700;
  font-size: 38px;
}
.registration .sub-title p {
  font-family: "SamsungOne";
}

/* 회원가입 폼 */
.form__group {
  background-color: #f7f7f7;
  border-radius: 20px;
  margin-bottom: 40px;
  padding: 40px 32px 32px 32px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  gap: 56px;
}
.registration .form__col {
  /* flex: 1; */
  height: fit-content;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}
.form__col .regist-form-input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form__col .custom-input-wrap.none {
  display: none;
}
.form__col .regist-form-label {
  font-family: "SamsungOne";
  font-weight: 700;
  font-size: 18px;
  line-height: 100%;
  width: 186px;
  box-sizing: border-box;
}
.form__group .custom__select,
.custom__input {
  height: 100%;
}
.registration .custom__select {
  border: none;
}
.regist-form-input-wrap.custom__select,
.regist-form-input-wrap.custom__input {
  flex-direction: row;
  border-bottom: none;
}
.form__group .form__col .regist-form-input-wrap .input-wrap {
  height: 100%;
  min-height: 26px;
  color: #000e;
  border-bottom: 1px solid #aaa;
  flex-grow: 1;
  position: relative;
}
.form__group .form__col .regist-form-input-wrap input {
  width: 100%;
  background-color: transparent;
  font-size: 18px;
}
.form__group .form__col .regist-form-input-wrap input::placeholder {
  color: #aaa;
}
.organization-label {
  font-family: "SamsungOne";
  font-weight: 400;
  font-size: 18px;
  white-space: nowrap;
}
.organization-list {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}
.organization-list li label {
  font-family: "SamsungOne";
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
.organization-list li label input {
  margin-right: 4px;
  cursor: pointer;
}

/* 개인 정보 보호 공지 영역 */
.privacy-noti-box {
  font-family: "SamsungOne";
  color: #666;
  text-align: center;
  line-height: 140%;

  background-color: #edf1f5;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 32px 24px;
  margin-bottom: 40px;
}
.privacy-noti-box p a {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #666;
}

/* check box 동의 영역 */
.checkbox-wrapper {
  gap: 16px;
  border-bottom: 1px solid #00000026;
  padding-bottom: 40px;
}
.custom-checkbox {
  width: fit-content;
}

/* 하단 submit 버튼 영역 */
.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 0;
}
.btn-wrapper button {
  width: 93px;
  height: 40px;
  padding: 10px 0;
  border-radius: 20px;
  border: 1px solid #00000026;

  text-align: center;
  font-family: "SamsungOne";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 19.6px */
}
.btn-wrapper .btn__submit {
  background-color: #000;
  color: #f7f7f7;
  border: none;
}
/* email input custom placeholder */
.input-wrap:has(.email-input) {
  position: relative;
}
.input-wrap:has(.email-input)::before {
  content: "Please write in E-mail format.";
  background-color: transparent;
  white-space: pre-line;
  font-size: 18px;
  color: #aaa;
  font-family: "SamsungOne";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  line-height: 100%;
  z-index: 0;
  width: 100%;
}
.input-wrap:has(.email-input:not(:placeholder-shown))::before {
  opacity: 0;
}

/* 스텝2 css */
.registration-step2 .active-email-noti {
  background-color: #edf1f5;
  border-radius: 20px;
  padding: 60px 24px;
  box-sizing: border-box;

  font-family: SamsungOne;
  text-align: center;
  color: #666;
  font-size: 18px;

  display: flex;
  flex-direction: column;
  gap: 30px;
}
.registration-step2 .noti-title {
  font-family: SamsungSharpSans;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}
.registration-step2 .email-info-wrapper {
  font-family: SamsungOne;
  line-height: 140%;
}
.registration-step2 .email-info {
  color: #2189ff;
  font-weight: 700;
}
.registration-step2 .noti-date-wrapper {
  font-family: SamsungOne;
  line-height: 140%;
}
.registration-step2 .noti-date {
  color: #2189ff;
}
.registration-step2 .btn-wrapper button.resend-btn {
  width: fit-content;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/****************************
*********(1440 ~ 768)********
****************************/

@media only screen and (min-width: 769px) and (max-width: 1440px) {
  .registration-form-wrapper .inner {
    width: fit-content;
    min-width: 79.17vw;
    max-width: 79.1667vw;
    padding: 0 2.2222vw 0 2.2222vw;
  }
  .registration .sub-title {
    margin-bottom: 2.78vw;
  }
  .registration .sub-title h2 {
    font-size: 2.64vw;
    margin-bottom: 1.67vw;
  }
  .registration .sub-title p {
    font-size: 1.25vw;
  }
  .form__group {
    background-color: #f7f7f7;
    border-radius: 1.39vw;
    margin-bottom: 2.78vw;
    padding: 2.78vw 2.22vw 2.22vw 2.22vw;
    gap: 3.89vw;
  }
  .registration .form__col {
    gap: 2.5vw;
  }
  .form__group .form__col .regist-form-input-wrap .input-wrap {
    min-height: 1.81vw;
    height: 1.81vw;
    display: flex;
    align-items: center;
  }
  .registration .custom__select {
    min-height: 1.81vw;
    height: 1.81vw;
  }
  .registration .form__col .regist-form-label {
    width: 13vw;
    font-weight: 700;
    font-size: 1.25vw;
  }
  .organization-list {
    display: flex;
    align-items: center;
    gap: 0.83vw;
    font-size: 1.25vw;
  }
  .organization-label {
    font-size: 1.25vw;
  }
  .organization-list li label input {
    width: 0.9vw;
    height: 0.9vw;
  }
  .form__group .form__col .regist-form-input-wrap input {
    font-size: 1.25vw;
  }
  .input-wrap:has(.email-input)::before {
    font-size: 1.25vw;
    /* white-space: nowrap; */
    top: 10%;
  }
  .privacy-noti-box {
    padding: 2.22vw 1.67vw;
    margin-bottom: 2.78vw;
    border-radius: 1.39vw;
    font-size: 1.11vw;
  }
  .checkbox-wrapper {
    gap: 1.11vw;
    padding-bottom: 2.7778vw;
  }
  .btn-wrapper button {
    width: 6.46vw;
    height: 2.78vw;
    padding: 0.69vw 0;
    border-radius: 1.39vw;
    font-size: 0.97vw;
    white-space: nowrap;
  }

  /* step2 css */
  .registration-step2 .active-email-noti {
    padding: 4.1667vw 1.6667vw;
    gap: 2.0833vw;
    font-size: 1.25vw;
  }
  .registration-step2 .noti-title {
    font-size: 1.6667vw;
  }
}

/****************************
***********(767 ~)***********
****************************/

@media only screen and (max-width: 768px) {
  /* .registration .kv__title {
    color: #fff;
  }
  .registration .kv__desc {
    color: #fff;
  } */
  .registration .sub-title {
    margin-bottom: 6.6667vw;
  }
  .registration .sub-title h2 {
    font-size: 6.67vw;
    margin-bottom: 5.56vw;
  }
  .registration .sub-title p {
    font-size: 3.89vw;
  }
  .registration-form-wrapper .inner {
    width: 86.67vw;
    min-width: auto;
    padding: 0;
  }
  .form__group {
    padding: 11.1111vw 5vw;
    gap: 11.1111vw;
    grid-template-columns: repeat(1, 1fr);
  }
  .registration .form__col {
    gap: 8.8889vw;
  }
  .form__col .regist-form-input-wrap {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 4.44vw;
  }
  .form__col .regist-form-input-wrap:has(.email-input) {
    min-height: 21.6667vw;
    height: 21.6667vw;
  }
  .registration .form__col > li:has(.organization-label) {
    height: 100%;
    flex-direction: column;
    gap: 4.44vw;
  }
  .form__col .regist-form-input-wrap input::placeholder {
    font-size: 5vw;
  }
  .input-wrap:has(.email-input) {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
  }
  .organization-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4.44vw;
  }
  .organization-list > li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 4.44vw;
    gap: 4.44vw;
  }
  .form__col .regist-form-label {
    width: 100%;
    font-size: 5vw;
    padding: 0;
  }
  .organization-list li label input {
    width: 4.44vw;
    height: 4.44vw;
    margin-right: 2.11vw;
  }
  .form__group .form__col .regist-form-input-wrap .input-wrap {
    width: 100%;
    min-height: 7.2222vw;
  }
  .custom-input-wrap.custom__select::after,
  .custom__input.filled::after {
    top: 80%;
  }
  .form__group .form__col .regist-form-input-wrap input {
    font-size: 5vw;
  }
  .registration .custom__select.search input {
    min-height: 6.51vw;
  }
  .last-name-input {
    margin-top: -6.9444vw;
  }
  .privacy-noti-box {
    padding: 8.89vw;
    font-size: 3.89vw;
    text-align: left;
  }
  .btn-wrapper button {
    width: 21.67vw;
    height: 11.11vw;
    padding: 2.78vw 0;
    border-radius: 5.56vw;
    font-size: 3.89vw;
  }
  /* placeholder email input 줄바꿈 */
  .input-wrap:has(.email-input) {
    position: relative;
  }
  .input-wrap:has(.email-input)::before {
    content: "Length should be 4 to 25 \A characters.";
    font-size: 5vw;
  }

  /* step 02 css */
  .registration-step2 .active-email-noti {
    border-radius: 5.5556vw;
    padding: 16.6667vw 6.6667vw;

    font-size: 5vw;
    text-align: left;

    gap: 8.3333vw;
  }
  .registration-step2 .noti-title {
    font-size: 6.6667vw;
    line-height: 140%;
  }
  .registration-step2 .btn-wrapper {
    gap: 2.2222vw;
  }
  .registration-step2 .btn-wrapper button {
    font-size: 3.8889vw;
  }
  .registration-step2 .btn-wrapper button.resend-btn {
    padding: 3.6111vw 5.5556vw;
  }
}