@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../../../static/mall/public/font/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}

*{margin:0;padding:0;font-family: 'Pretendard';text-decoration: none;box-sizing: border-box;}

.social-login {
  width: 100%;
  height: 55px;
}

.social-login:hover {
  cursor: pointer;
}

/* 비밀번호 찾기 링크 스타일 */
.forgot-password {
  margin-top: 10px; /* 위쪽 여백 */
}

/* 비밀번호 찾기 링크 텍스트 스타일 */
.forgot-password a {
  color: #2376f9; /* 파란색 링크 */
  text-decoration: none; /* 기본 밑줄 제거 */
  font-size: 16px; /* 글자 크기 */
}

/* 링크에 마우스를 올렸을 때 밑줄 표시 */
.forgot-password a:hover {
  text-decoration: underline; /* 마우스를 올리면 밑줄 표시 */
}

/* 고객센터 안내문 스타일 */
.customer-service {
  margin-top: 20px; /* 위쪽 여백 */
  font-size: 14px; /* 글자 크기 */
  color: #888; /* 회색 텍스트 */
}

/*sns 로그인*/
.sns_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sns_wrap > p {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  color: #222;
}
.sns_wrap > p::before {
  content: "";
  width: 180px;
  height: 1px;
  background: #ddd;
  position: absolute;
  right: 120px;
  top: 10px;
}
.sns_wrap > p::after {
  content: "";
  width: 180px;
  height: 1px;
  background: #ddd;
  position: absolute;
  left: 120px;
  top: 10px;
}
.sns_login_items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.sns_login_items .sns_item {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #222;
}
.sns_login_items .sns_item img {
  width: 45px;
}
.sns_login_items .sns_item p {
  font-size: 14px;
  margin: 5px 0;
}

/* 페이지 전체 설정 */
body {
  font-family: 'Pretendard', sans-serif; /* 기본 폰트 Pretendard 설정 */
  background-color: #f0f4fa; /* 배경색 설정 */
  display: flex; /* 중앙 정렬을 위한 Flexbox 사용 */
  flex-direction: column; /* 타이틀과 로그인 박스를 위아래로 배치 */
  justify-content: center; /* 가로축 중앙 정렬 */
  align-items: center; /* 세로축 중앙 정렬 */
  height: 100%;
  min-height: 100vh;
  margin: 0; /* 기본 여백 제거 */
}

/* "관리자 로그인" 텍스트 스타일 */
.login-title {
  font-family: 'Pretendard', sans-serif; /* Pretendard 폰트 적용 */
  font-size: 22px; /* 글자 크기 */
  color: #888888; /* 글자 색상 (진한 회색) */
  /*padding-top: 4%;*/
  padding-bottom: 20px;
  font-weight: 600;
}

/* "대도매" 텍스트 스타일 */
.market-title {
  font-family: 'Pretendard', sans-serif; /* Black Han Sans 폰트 적용 */
  font-weight: 900;
  color: #6d6bd1; /* 보라색 텍스트 */
  font-size: 58px; /* 글자 크기 */
  margin-bottom: 5px; /* 아래쪽 여백 */
  line-height: 1.2; /* 줄 간격 설정 */
}

/* 로그인 박스 설정 */
.login-container {
  background-color: white; /* 로그인 박스 배경색 */
  padding: 40px 40px; /* 내부 여백 */
  border-radius: 10px; /* 모서리를 둥글게 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  text-align: center; /* 텍스트 중앙 정렬 */
  width: 500px; /* 박스 너비 */
  margin-bottom: 120px;
}

/* 아이디 및 비밀번호 입력창 스타일 */
input[type='text'],
input[type='password'] {
  width: 100%; /* 입력창 너비 100% */
  padding: 17px; /* 입력창 내부 여백 */
  margin: 7px 0; /* 위아래 여백 */
  /*border-radius: 5px; !* 모서리를 둥글게 *!*/
  border: none;
  /*border: 1px solid #8585ff; !* 입력창 테두리 *!*/
  box-shadow: 0 -1px 0 0 #8585ff inset;
  /*background-color: #f4f4ff; !* 배경색 *!*/
  box-sizing: border-box; /* 패딩과 보더를 포함한 크기 설정 */
  font-size: 16px; /* 글자 크기 */
  transition: all 0.3s;
}

/* 입력창 포커스 시 테두리 색상 변경 */
input[type='text']:focus,
input[type='password']:focus {
  /*border: 2px solid #6d6bd1; !* 포커스 시 테두리 색상을 파란색으로 변경 *!*/
  border: none;
  box-shadow: 0 -2px 0 0 #8585ff inset;
  outline: none; /* 기본 포커스 효과 제거 */
}

.find-account {
  :not(:last-child){
    position: relative;
    &::after {
      content: '';
      position: absolute;
      right: -12px;
      top: 0;
      width: 1px;
      height: 100%;
      background: #717171;
    }
  }
  a {
    text-decoration: none;
    color: #717171;
    margin: 0 10px;
    font-size: 13px;
    &:hover {
      text-decoration: underline;
    }
  }
}

/* 로그인 버튼 스타일 */
.login-btn {
  width: 100%; /* 버튼 너비 100% */
  padding: 10px; /* 버튼 내부 여백 */
  background-color: #6d6bd1; /* 보라색 배경 */
  color: white; /* 텍스트 색상은 흰색 */
  border: none; /* 테두리 제거 */
  border-radius: 5px; /* 모서리를 둥글게 */
  cursor: pointer; /* 마우스를 올렸을 때 포인터 표시 */
  font-size: 18px; /* 글자 크기 */
  margin: 12px 0;
  font-family: 'Pretendard', sans-serif; /* 버튼의 폰트 Pretendard */
}

.social-login {
  width: 100%;
  height: 55px;
}

.social-login:hover {
  cursor: pointer;
}

/* 버튼에 마우스를 올렸을 때 배경색 변화 */
.login-btn:hover {
  background-color: #504eaf; /* 어두운 보라색으로 변경 */
}

/* 비밀번호 찾기 링크 스타일 */
.forgot-password {
  margin-top: 10px; /* 위쪽 여백 */
}

/* 비밀번호 찾기 링크 텍스트 스타일 */
.forgot-password a {
  color: #2376f9; /* 파란색 링크 */
  text-decoration: none; /* 기본 밑줄 제거 */
  font-size: 16px; /* 글자 크기 */
}

/* 링크에 마우스를 올렸을 때 밑줄 표시 */
.forgot-password a:hover {
  text-decoration: underline; /* 마우스를 올리면 밑줄 표시 */
}

/* 고객센터 안내문 스타일 */
.customer-service {
  margin-top: 20px; /* 위쪽 여백 */
  font-size: 14px; /* 글자 크기 */
  color: #888; /* 회색 텍스트 */
}

/*입점신청버튼*/
.apply-btn {
  background: #ff9b34;
  color: white;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  margin: 12px 0;
  font-family: 'Pretendard', sans-serif;
}

/*아이디 비번 찾기*/
#find-page {
  font-size: 16px;
}
#find-page .logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#find-page .login-container {
  margin-bottom: 20px;
}
#find-page .login-container .input-title {
  text-align: left;
  color: #595959;
  padding-left: 10px;
}
#find-page .login-container input~.input-title {
  margin-top: 20px;
}
#find-page .login-container:has(.cnt-title) {
  padding-top: 16px;
}
#find-page .login-container .cnt-title {
  padding: 10px 0;
  margin-bottom: 20px;
  p {
    font-size: 18px;
  }
}
#find-page .login-container .btn-gray {
  background: #a3a3a3;
  color: white;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 12px 0;
  font-family: 'Pretendard', sans-serif;
}
#find-page .login-container .btn-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#find-page .login-container .btn-wrap *:not(:first-child) {
  margin-left: 5px;
}
#find-page .login-container .btn-comment {
  font-size: 14px;
  color: red;
}
#find-page .login-container .input-comment {
  font-size: 13px;
  text-align: left;
  color: #ababab;
  padding-left: 10px;
}

#find-page .login-container .error-comment {
  margin-top: 20px;
}

#password-reform {
  width: auto;
  max-width: 500px;
  min-width: 350px;
  overflow: clip;
}