/* =============== 공통스타일 ===============*/
* {
  letter-spacing: -1px;
}

input {
  border: 1px solid var(--color-gary100);
  color: var(--color-black);
  border-radius: 50px;
  height: max(45px, 2.604vw);
  padding: 0 15px;

  @media screen and (min-width: 1921px) {
    height: 50px; 
  }
}

input:focus,
textarea:focus {
  border: 2px solid #AF9F8E;
}

.require {
  color: #FF5555;
  text-align: center;
  vertical-align: middle;
  padding-left: 2px;
}

input[type=text]:focus {
  background-color: #f5f5f5;
}

input[type=submit].disabled {
  background-color: #cfcfcf !important;
  color: #999 !important;
}

input[type="checkbox"]+label span {
  float: left;
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  border: 1px solid #d0d4df;
  border-radius: 3px;
}

input[type="checkbox"]:checked+label span {
  background: url(../../img/icon-check.png) no-repeat 50% 50% var(--primary);
  background-size: 85%;
  background-position-x: 1px;
  border-color: var(--primary);
  border-radius: 3px;
}

.title {
  font-family: 'Bebas neue pro-bd';
  font-size: max(95px, 10.417vw);
  margin-bottom: 44px;
  line-height: 11vw;

  @media screen and (min-width: 1921px) {
    line-height: 211px;
    font-size: 200px;
  }
}

form {
  width: 100%;
}

.input-item label {
  font-size: max(14px, 0.8vw);
  color: #A2A2A2;
  font-family: 'pretendard-medium';

  @media screen and (min-width: 1921px) {
    font-size: 16px;
  }
}

.input-item input {
  margin-top: max(4px, 0.2vw);

  @media screen and (min-width: 1921px) {
    margin-top: 4px;
  }
}

.com-input {
  width: 100%;
  height: 45px !important;
  padding-left: 25px;
  border-radius: 15px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 6px 0px inset;
  font-family: 'pretendard-medium';
  font-size: 18px !important;
}

.com-input.bg {
  background-color: #f5f5f5 !important;
}

input.com-input::placeholder {
  font-family: 'pretendard-medium';
  color: #cecece;
}

input:focus {
  outline: none;
  border: none;
}

input.com-input:not(.btn_submit):focus {
  border: 1px solid var(--primary);
}

.btn_submit {
  background-color: var(--primary);
  color: #fff;
}

.og-chkbox {
  display: none;
}

.find-result,
#reg-result,
#mb_confirm {
  width: 500px;
  margin: 0 auto;
  height: 100svh;
}

.find-result .title,
#mb_confirm .title {
  font-size: max(28px, 2vw);
  line-height: normal;
  font-family: 'pretendard-bold';
  margin-bottom: 0;

  @media screen and (min-width: 1921px) {
    font-size: 38.5px;
  }
}

/* 비밀번호 표시 버튼 */
.pw-btn-wrap {
  position: absolute;
  right: 25px;
  top: 53%;
  transform: translate(0,-50%);
}

.input-item .pw-btn-wrap #hidePw {
  opacity: 0;
}

.input-item .pw-btn-wrap.active #hidePw {
  opacity: 1;
}

.input-item pw-.btn-wrap.active #showPw {
  opacity: 0;
}

.input-item .pw-pw-wrap button {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.input-item .pw-pw-wrap button img {
  width: 22px;
}

/* =============== 로그인 페이지 ===============*/
#login-page {
  margin: 0 auto;
  width: 385px;
  height: 100svh;
}

.login-field {
  width: 100%;
}

.input-container {
  gap: 15px;
  margin-bottom: 44px;
}

.other-page {
  display: flex;
  padding-left: 25px;
}

.other-page a {
  color: #A2A2A2;
  font-family: 'pretendard-medium';
  font-size: 14px;
}

.other-page a:not(a:nth-of-type(3))::after {
  content: '';
  width: 1px;
  height: 14px;
  display: inline-flex;
  margin: 0 0.5vw;
  background-color: #A2A2A2;

  @media screen and (min-width: 1921px) {
    margin: 0 10px;
  }
}

.social-container {
  gap: 12px;
}

.com-input.social-btn {
  padding: 0;
}

.com-member-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px !important; 
  padding-left: unset;
}

.social-btn#naver-login {
  background-color: #1FC800;
  color: #fff;
}

.social-btn#naver-login svg {
  margin-right: 5px;
}

.social-btn#kakao-login {
  background-color: #FFEB00;
  color: var(--color-black);
}

.social-btn#kakao-login img {
  margin-right: 6px;
}
/* ============== END 로그인 페이지 ==============*/

/* =============== 회원가입 페이지 ===============*/
#register-page {
  width: 496px;
  height: 100svh;
  margin: 40px auto;
}

#register-page .input-container {
  flex-direction: column;
  margin-bottom: 24px;
}

#register-page .com-input {
  width: 385px;
}

#register-page .com-input:not(.btn_submit) {
  background-color: #F5F5F5;
}

#register-page label {
  font-size: 18px;
  color: #6A6A6A;
  font-family: 'pretendard-medium';
}

.agree-item:nth-of-type(1) {
  margin-bottom: 15px;
}

.agree-item .chk-wrap {
  width: 385px;
}

.agree-item p {
  font-family: 'pretendard-regular';
  color: #6A6A6A;
  font-size: 14px;
  margin: 0 10px;
}

.open-doc {
  width: 34px;
  height: 18px;
  border-radius: 3px;
  background-color: var(--color-gary100);
  font-family: 'pretendard-bold';
  font-size: 12px;
  color: #fff;
}

.btn-container {
  margin-top: 27px;
}
/* ============= END 회원가입 페이지 =============*/

/* ============= 회원가입 결과 페이지 =============*/
#reg-result {
  color: var(--color-black);
}

#reg-result h1 {
  font-size: max(28px, 2vw);
  margin:  0.8vw 0;
  text-align: center;

  @media screen and (min-width: 1921px) {
    font-size: 38.5px;
    margin: 16px 0;
  }
}

#reg-result h1 span {
  color: var(--primary);
}

#reg-result p {
  font-size: 18px;
  text-align: center;
  white-space: pre-line;
}

#reg-result .btn-container {
  margin-top: 1.8vw;

  @media screen and (min-width: 1921px) {
    margin-top: 35px;
  }
}

#reg-result .btn-container a {
  height: fit-content !important;
}
/* ============= END 회원가입 결과 페이지 =============*/

/* ============= 아이디찾기 페이지 =============*/
.find-form {
  margin: 0 auto;
  width: 425px;
  height: 100svh;
}

.find-form.pw {
  width: 500px;
}

.find-form .title {
  margin-bottom: 0;
}

.find-form h2 {
  font-size: max(14px, 1vw);
  margin: 0px 0 3.5vw 0;
  color: var(--color-gray500);

  @media screen and (min-width: 1921px) {
    font-size: 19px;
  }
}

.find-field {
  width: 385px;
}
/* ============= 아이디찾기 결과 =============*/
.find-result p {
  font-size: 1.5vw;
  margin: 1vw 0;

  @media screen and (min-width: 1921px) {
    font-size: 19px;
    margin: 19px 0;
  }
}

.find-result span {
  font-family: 'pretendard-bold';
  color: #965ac3;
  font-size: 2vw;

  @media screen and (min-width: 1921px) {
    font-size: 38.5px;
  }
}

.btn-container {
  margin-top: 0.7vw;
  gap: 15px; 

  @media screen and (min-width: 1921px) {
    margin-top: 14px;
  }
}

.btn-container a {
  font-size: max(15px, 1vw);
  padding: 6px 14px;
  color: #fff !important;
  border-radius: 20px;

  @media screen and (min-width: 1921px) {
    font-size: 19px;
  }
}

.go-login {
  background-color: #8b8b8b;
}

.go-pw {
  background-color: var(--color-gray500);
}

/* ============= 비번 찾기 결과 =============*/
.find-result.pw .title {
  margin-bottom: 44px;
}

.find-result.pw p {
  font-size: max(16px, 1.2vw);
  margin: 0.5vw 0;
  
  @media screen and (min-width: 1921px) {
    font-size: 23px;
    margin: 9.6px 0;
  }
}

.find-result.pw span {
  font-size: max(22px, 1.8vw);

  @media screen and (min-width: 1921px) {
    font-size: 35px;
  }
}

.find-result.pw .btn_submit {
  width: 385px;
}

.find-result.pw .btn-container {
  margin-top: 44px;
}

@media (max-width: 900px) {
  .find-form .title {
    margin-bottom: 1vw;
  }
}

/* ============= 마이페이지 =============*/
#mypage {
  margin: 120px auto;
  width: 385px;
  height: 100svh;
}

#mypage .title {
  font-size: max(90px, 7.417vw);
  line-height: normal;

  @media screen and (min-width: 1921px) {
    font-size: 143px;
  }
}

#mypage .input-container {
  width: 100%;
}

#mypage .input-item label {
  font-size: max(14px, 0.8vw);

  @media screen and (min-width: 1921px) {
    font-size: 16px;
  }
}

#mb_confirm #mb_confirm_id,
#mypage #mb_id {
  font-size: 18px;
  height: 45px;
  display: flex;
  align-items: center;
}

#register-page input::placeholder,
#mypage .input-item input::placeholder {
  font-size: 14px;
}

#mypage .pw-info-txt {
  font-size: 12px;
  color: #A2A2A2;
  line-height: 1.5;
}

#mypage .chgPwInput {
  border-radius: 15px 0 0 15px;
}

#mypage #chgPwBtn {
  width: 45px;
  background-color: #999;
  margin-top: max(4px, 0.2vw);
  border-radius: 0 8px 8px 0;
  color: #fff;
  padding-left: 0;

  @media screen and (min-width: 1921px) {
    margin-top: 4px;
  }
}

#mypage .BtnContainer {
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  gap: 15px;
}

#mypage .BtnContainer button {
  padding-left: 0;
}

#mypage .BtnContainer button#cancel {
  background: #999;
  color: #fff !important;
  width: 20%;
}

#mypage .BtnContainer button#chgInfoSubmit {
  width: 60%;
}

#mypage .BtnContainer button#leave {
  background-color: rgba(240, 102, 102, 0.3);
  color: rgba(240, 0, 0, 0.5);
  width: 20%;
}

#mypage .logout-btn {
  display: none;
}

/* ============= 소셜로그인 가입창 =============*/
.member_connect {
  width: 100%;
  margin-top: max(14px, 2vw);
  display: flex;
  align-items: center;

  @media screen and (min-width: 1921px) {
    margin-top: 38.4px;
  }
}

.member_connect * {
  font-size: 16px;
}

.member_connect p {
  font-family: 'pretendard-bold';
}

.member_connect button {
  color: var(--primary);
  text-decoration: underline;
  margin-left: max(9px, 0.3vw);

  @media screen and (min-width: 1921px) {
    margin-left: 6px;
  }
}

#sns-link-pnl button.connect-close {
  position: absolute;
  right: max(20px, 2vw);
  top: max(20px, 1.5vw);
  
  @media screen and (min-width: 1921px) {
    right: 38.4px;
    top: 29px;
  }
}

.connect-fg {
  margin-top:max(20px, 2vw);

  @media screen and (min-width: 1921px) {
    margin-top: 38.4px;
  }
}

.connect-fg .connect-title {
  font-size: max(1.3vw, 18px);

  @media screen and (min-width: 1921px) {
    font-size: 25px;
  }
}

.connect-fg .connect-desc {
  font-size: 16px;
  margin: max(12px, 1vw) 0;

  @media screen and (max-width: 691px) {
    font-size: 14px;
  }
  
  @media screen and (min-width: 1921px) {
    margin: 19.2px 0;
  }
}

.connect-fg .input-item,
.connect-fg .login_submit {
  width: 75%;

  @media screen and (max-width: 691px) {
    width: 100%;
  }
}

.connect-fg .input-item input {
  width: 385px;

  @media screen and (max-width: 691px) {
    width: 214px;
  }
}

/* 비밀번호 확인 페이지 */
#mb_confirm h2 {
  font-size: max(18px, 1.5vw);
  margin: 2vw 0 10px 0;
  
  @media screen and (min-width: 1921px) {
    font-size: 29px;
    margin: 38.4px 0 10px 0;
  }
}

#mb_confirm p {
  font-size: max(14px, 1vw);
  margin-bottom: 2.3vw;
  
  @media screen and (min-width: 1921px) {
    font-size: 19.2px;
    margin-bottom: 44px;
  }
}

#mb_confirm fieldset {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#mb_confirm .btn-container {
  margin-top: 2vw;
  width: 100%;

  @media screen and (min-width: 1921px) {
    margin-top: 38.4px;
  }
}

/* 반응형 */
@media (max-width: 499px) {
  .title {
    margin-bottom: 7vw !important;
    line-height: normal;
  }

  .find-form .title {
    margin-bottom: 0 !important;
  }

  #register-page {
    height: fit-content;
    margin: 85px auto;
  }

  #mypage {
    height: fit-content;
    margin: 85px auto;
  }

  #mypage > div {
    justify-content: flex-start;
  }

  .find-result.pw p {
    text-align: center;
  }

  #register-page input::placeholder,
  #mypage input::placeholder {
    font-size: 12px;
  }

  #mypage .BtnContainer {
    gap: 7px;
  }
}

@media (max-width: 500px) {
  input[type=text],
  input[type=password] {
    font-size: 14px !important;
  }

  #login-page,
  .find-form,
  #mypage {
    width: 70% !important;
  }
  
  #register-page {
    width: 85% !important;
  }

  .title {
    margin-bottom: 65px;
  }

  .other-page a:not(a:nth-of-type(3))::after {
    margin: 0 2.5vw;
  }

  #register-page .input-item {
    flex-direction: column;
    align-items: flex-start;
  }

  #register-page .pw-wrap{
    width: 100%;
  }

  #register-page label {
    font-size: 14px;
  }

  #register-page .com-input {
    width: 100%;
  }
  
  #reg-result .btn-container {
    margin-top: 18px;
  }

  .agree-item:nth-of-type(1) {
    margin-bottom: 8px;
  }

  .agree-item p {
    font-size: 12px;
    margin: 0 7px;
  }

  .btn-container {
    margin-top: max(20px, 0.7vw);
  }

  .btn-container .blank {
    display: none;
  }

  .find-form .title {
    line-height: normal;
  }

  .find-field {
    width: 100%;
  }

  .find-form h2 {
    font-size: max(16px, 1vw);
    margin: 0px 0 10.5vw 0;
  }

  .find-result,
  #reg-result {
    width: 80%;
  }

  .find-result p {
    font-size: max(18px, 1.5vw);
    margin: 4vw 0;
  }

  .find-result span {
    font-size: max(28px, 2vw);
  }

  .find-result.pw .title {
    font-size: max(24px, 2vw);
  }

  .find-result.pw .btn-container {
    width: 100%;
  }

  #mypage #mb_id,
  #mb_confirm #mb_confirm_id {
    font-size: 14px;
  }
}

@media (min-width: 691px) and (max-width: 767px) {
  #mypage {
    margin: 96px auto;
  }
}

@media (min-width: 691px) {
  #mypage .pw-wrap.mb_password2 {
    width: 100%;
  }
  
  #mypage .pw-btn-wrap.mb_password2 {
    right: 10px;
  }
  
  #mypage #chgPwBtn {
    width: 15%;
  }

}

@media (max-width: 767px) {
  #mypage .BtnContainer button#cancel,
  #mypage .BtnContainer button#leave {
    width: 30%;
  }

  #mypage .logout-btn {
    display: block;
    color: #A2A2A2;
    text-decoration: underline;
    font-size: 14px;
    text-align: left;
    width: 100%;
    margin: 3vw 0;
  }

  #mypage .pw-btn-wrap.mb_password2 {
    right: 10px;
  }

  div[data-remodal-id="snsModal"] .input-item label:nth-of-type(1) {
    width: 62px;
    text-align: left;
  }
}