/* 회원가입 */

/* 텍스트 타이틀 영역 */
.loginTitArt {
  width: 70%;
  max-width: 1400px;
  margin: 100px auto 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.loginTitArt > p:first-child {
  color: var(--titColor);
  font-size: 24px;
  font-weight: 700;
}
.loginTitArt > p:nth-child(2) {
  color: var(--orangeColor);
  font-size: 15px;
  font-weight: 400;
}

/* 로그인/회원가입 메뉴 영역 */
.menusArt {
  width: 70%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divMenus {
  display: flex;
}

.divMenu {
  background-color: var(--whiteColor);
  width: 240px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-bottom: 2px solid var(--backColor1);
}
.divMenu > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txtColor);
  font-weight: 500;
}
.divMenu.on {
  background-color: var(--whiteColor);
  border-bottom: 2px solid var(--mainColor);
}
.divMenu.on > a {
  color: var(--mainColor);
}

/* 회원가입 영역 */
.joinArt {
  width: 480px;
  border-left: 1px solid var(--backColor1);
  border-right: 1px solid var(--backColor1);
  border-bottom: 1px solid var(--backColor1);
  margin: 0 auto 100px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.joinPsTxt {
  font-size: 13px;
  text-align: right;
  color: var(--redColor);
  font-weight: 500;
}

.joinBoxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.joinBox {
  width: 100%;
  height: 40px;
  background-color: var(--backColor1);
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.joinContent {
  display: none;
  margin: 10px 0 0 0;
}
.joinContent.on {
  display: flex;
}

.joinBoxTit {
  padding: 10px;
  font-size: 14px;
  color: var(--titColor);
  font-weight: 600;
  flex-shrink: 0;
}

.joinBoxTxt {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 5px;
}


/* 회원구분 */
.joinDivTxt {
  justify-content: space-between;
  padding: 0 20px 0 0;
}
.joinDivCheck {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.joinDivCheck label {
  color: var(--txt6Color);
  font-weight: 600;
  cursor: pointer;
}
.joinDivCheck input[type='radio'] {
  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none; 
  width: 14px;
  height: 14px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none; 
  cursor: pointer;
  background-color: var(--whiteColor);
}

.joinDivCheck input[type='radio']:checked {
  background-color: var(--mainColor); 
  border: 3px solid white;
  box-shadow: 0 0 0 1.2px var(--mainColor); 
}
.joinDivCheck input[type='radio']:checked + label {
  color: var(--txtColor);
}


/* 아이디 */
.joinInputTxt input {
  flex: 1;
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: 14px;
}

.joinNumTxt input {
  flex: 1;
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: 14px;
}

/* 비밀번호 */
.passwords {
  flex: 1;
  display: flex;
  
}
.passwords input {
  width: 90%;
  border: none;
  background-color: transparent;
  font-size: 14px;
}

.eyeBox {
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backColor1);
  padding: 8px;
  cursor: pointer;
}

.eyeBox > div {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.eyeOnBox {
  display: none;
}

/* 이메일 */
.emailTxtInput {
  flex: 1;
  display: none;
  border: none;
  background-color: transparent;
}

.joinEmailTxt {
  gap: 5px;
}
.emailInput {
  width: 40%;
  height: 100%;
  border: none;
  background-color: transparent;
}
.at {
  color: var(--txtColor);
  font-size: 14px;
  font-weight: 500;
}

.emailSelect {
  flex: 1;
  height: 100%;
  border: none;
  background-color: transparent;
  color: var(--titColor);
  font-weight: 500;
}

/* 휴대전화번호 */
.phoneInput {
  width: 75%;
  height: 100%;
  background-color: transparent;
  border: none;
}

.codeBtn {
  width: 25%;
  height: 100%;
  background-color: var(--mainColor);
  border: none;
  color: var(--txtColor);
  font-weight: 500;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.codeBtn:disabled {
  background-color: var(--backColor1);
  border: 1px solid var(--txt9Color);
}

.codeBox {
  border: 1px solid var(--mainColor);
}

/* 인증번호 */
.phoneCodeInput {
  width: 60%;
  height: 100%;
  background-color: transparent;
  border: none;
}

.timerBox {
  width: 15%;
  font-size: 13px;
  color: var(--redColor);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}


.addressSearch {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addressBox {
  font-size: 14px;
  color: var(--txtColor);
  font-weight: 500;
}

.searchIcon {
  width: 30px;
  height: 30px;
  background-color: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.searchIcon > svg {
  fill: #fff;
}

.addressTxtInput {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
}
.addressTxtBox {
  display: none;
}

.genderBoxTxt {
  gap: 25px;
}

.birthBoxTxt input {
  width: 100px;
  height: 100%;
  border: none;
  background-color: transparent;
  text-align: center;
}
.birthBar {
  color: var(--txtColor);
}

/* 이용약관 동의 */
.clauseBox {
  margin: 10px 0 0 0;
}

.clauseBoxTit {
  font-size: 15px;
  color: var(--titColor);
  font-weight: 600;
}

.clauseChecks {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clausePsTxt {
  font-size: 13px;
  color: var(--txt9Color);
  word-break: keep-all;
}

.clauseCheck {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.clauseAllCheck {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--txtColor);
  font-weight: 500;
  margin: 0 0 5px 0;
}
.clauseAllCheck > div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.clauseCheck > div:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--txtColor);
  font-weight: 500;
}

.clauseChecks input[type='checkbox'] {
  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none; 
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none; 
  cursor: pointer;
  background-image: url(/img/icon/checkNone.png);
  background-size: cover;
}

.clauseChecks input[type='checkbox']:checked {
  background-image: url(/img/icon/check.png);
  background-size: cover;
}
.clauseChecks label {
  cursor: pointer;
}

.clauseContext {
  text-decoration: underline;
  font-size: 14px;
  color: var(--txtColor);
  font-weight: 600;
  cursor: pointer;
}

/* 필수값 확인 텍스트 */
.inputCheckTxt {
  text-align: center;
  color: var(--redColor);
  font-size: 14px;
  font-weight: 500;
}
.inputCheckPs {
  visibility: hidden;
}

/* 가입하기 버튼 */
.joinBtn {
  width: 100%;
  height: 40px;
  border: none;
  background-color: var(--mainColor);
  color: var(--whiteColor);
  font-weight: 600;
}

/* 회원 파일 */
.joinDivBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.joinDivTit {
  font-size: 15px;
  color: var(--titColor);
  font-weight: 600;
}

.fileBoxTxt input[type=file]::file-selector-button {
  display: none;
}
.fileBoxTxt input[type=file] {
  width: 80%;
  color: var(--txtColor);
  font-weight: 400;
}

.fileBoxTxt label {
  background-color: var(--subColor);
  font-size: 13px;
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--whiteColor);
  font-weight: 500;
  cursor: pointer;
}

.popupContents {
  padding: 10px;
}

.popClauseBox {
  width: 100%;
  height: 400px;
  background-color: var(--backColor2);
  padding: 10px;
  border: 1px solid var(--backColor1);
  font-size: 14px;
  color: var(--titColor);
  font-weight: 400;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 약관 테이블 */
.clauseTable > table tbody tr:hover {
  background-color: transparent;
}
.clauseTable > table {
  text-align: left;
}
.clauseTable > table thead {
  text-align: center;
}
.clauseTable > table tbody td {
  padding: 5px;
}

.popClausePsTxt {
  color: var(--txt9Color);
}

/* 본인인증 */
.userDivBox {
  margin: 0 0 15px 0;
}

.inputDiv {
  font-size: 14px;
  color: var(--txtColor);
}

.nameBoxTxt .inputDiv {
  width: 75%;
}
.userBtn {
  width: 25%;
  height: 100%;
  background-color: var(--mainColor);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
}

.idBtn {
  width: 25%;
  height: 100%;
  background-color: var(--mainColor);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
}

.joinGTxt {
  font-size: 13px;
  color: var(--txt9Color);
  margin: 3px 0 0 0;
}

/* 회원 계좌 인증 */
.accountContent {
  margin: 10px 0 0 0;
}

.accountSelect {
  width: 100%;
  height: 100%;
  border: 1px solid var(--borderLine);
}

.accountBoxTxt {
  gap: 5px;
}
.accountInput {
  width: 75%;
  height: 100%;
  border: 1px solid var(--borderLine);
  padding: 0 5px;
  background-color: transparent;
  border: none;
}

.accountBtn {
  width: 25%;
  height: 100%;
  background-color: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--whiteColor)
}

/* 값 체크 텍스트 */
.inputChecks {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.pwInfo {
  display: block;
}
.pwInputNot {
  color: var(--redColor);
  margin: 8px 0 0 0;
  display: none;
}

.idCheck > p {
  display: none;
}

.idCheckNot {
  color: var(--redColor);
}
.idCheckOk {
  color: var(--menuColor);
}

.pwCheckInfo {
  color: var(--txt9Color);
}

.pwCheckNot {
  color: var(--redColor);
}

/* 반응형 */
@media screen and (max-width: 1000px) {
  .loginTitArt > p:first-child {
    font-size: 20px;
  }
  .loginTitArt > p:nth-child(2) {
    font-size: 14px;
  }
}

@media screen and (max-width: 800px) {
  .loginTitArt {
    width: 85%;
    margin: 50px auto 30px;
    gap: 6px
  }
  .menusArt {
    width: 85%;
  }
  .divMenus {
    width: 100%;
  }
  .divMenu {
    width: 50%;
    height: 40px;
  }
  .joinArt {
    width: 85%;
  }

  .loginTitArt > p:first-child {
    font-size: 17px;
  }
  .loginTitArt > p:nth-child(2) {
    font-size: 13px;
  }

  .inputChecks {
    font-size: 13px;
  }
}

@media screen and (max-width: 600px) {
  .joinBox {
    height: 40px;
  }

  .joinBoxTit {
    font-size: 13px;
  }
  .joinInputTxt input {
    width: 75%;
    font-size: 13px;
  }

  .joinNumTxt input {
    font-size: 13px;
  }
  .passwords input {
    flex: 1;
    font-size: 13px;
  }
  .eyeBox {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  .joinDivCheck {
    font-size: 13px;
  }

  .addressBox {
    font-size: 13px;
  }

  .birthBoxTxt input {
    width: 30%;
  }

  .fileBoxTxt input[type=file] {
    font-size: 13px;
  }

  .accountSelect select {
    font-size: 13px;
  }

  .clauseAllCheck > div {
    font-size: 13px;
  }
  .clauseCheck {
    font-size: 13px;
  }

  .inputChecks {
    font-size: 12px;
    word-break: keep-all;
  }
}

@media screen and (max-width: 500px) {
  .menusArt {
    width: 90%;
  }

  .joinArt {
    width: 90%;
  }

  .joinBoxTit {
    font-size: 13px;
    width: max-content;
  }

  .joinPsTxt {
    font-size: 12px;
  }


  .joinArt > .joinBoxes:nth-child(3) .joinBox {
    flex-direction: column;
    height: fit-content;
  }
  .joinArt > .joinBoxes:nth-child(3) .joinBox .joinBoxTit {
    width: 100%;
  }
  .joinArt > .joinBoxes:nth-child(3) .joinBox .joinDivTxt {
    height: auto;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
  }

  .joinContent .joinBox {
    flex-direction: column;
    height: fit-content;
  }
  .joinContent .joinBoxTit {
    width: 100%;
  }
  .joinContent .fileBoxTxt {
    height: 40px;
  }
  .joinBoxTxt {
    padding: 5px 10px;
  }

  .userBtn {
    width: 75px;
  }
  .idBtn {
    width: 75px;
  }
  .accountBtn {
    width: 75px;
  }

  .fileBoxTxt label {
    width: 70px;
  }

  .emailInput {
    width: 40%;
  }
  .emailTxtInput {
    width: 50%;
    flex: auto;
  }


  .popClauseBox {
    height: 300px;
  }

  .clauseContext {
    font-size: 13px;
  }

}