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

/* 페이지 전체 설정 */
@font-face {
  font-family: 'Paperlogy-8ExtraBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

*{margin:0;padding:0; font-family: 'Pretendard';}

:root {
  --main-color: #4A7BF8;
}
a, button {
  cursor: pointer;
}
/* 페이지 전체 설정 */
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; !* 보라색 텍스트 *!*/
  color: var(--main-color);
  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; !* 모서리를 둥글게 *!*/
  /*box-shadow: 0 -1px 0 0 #8585ff inset;*/
  box-shadow: 0 -1px 0 0 var(--main-color) inset;
  border: none;
  /*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; !* 포커스 시 테두리 색상을 파란색으로 변경 *!*/
  box-shadow: 0 -2px 0 0 var(--main-color) 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: var(--main-color); /* 보라색 배경 */
  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; !* 어두운 보라색으로 변경 *!*/
  background-color: #2058BA; /* 어두운 보라색으로 변경 */
  transition: all 0.4s;
}

/* 비밀번호 찾기 링크 스타일 */
.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: 18px;
  margin: 12px 0;
  font-family: 'Pretendard', sans-serif;
}

@media only screen and (max-width: 480px) {
  .login-container {
    width: calc(100% - 100px);
  }
  .btn-wrap {
    flex-direction: column;
    button {
      margin: 0;
    }
  }
}
/* 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;
}

.btn-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}

/*모달*/
.login-popup-wrap {
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  background: #00000060;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1005;
  transition: all ease 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-popup {
    opacity: 0;
    pointer-events: none;
    transition: all ease 0.5s;
    position: absolute;
    max-width: 500px;
    min-width: 300px;
    width: 100%;
    max-height: 80%;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    .popup-head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
      h4 {
        font-size: 18px;
        color: #515151;
      }
      a {
        display: inline-block;
        cursor: pointer;
        width: 42px;
        height: 42px;
        font-size: 0;
        background: url("../../public/images/icon_popup_close.png") no-repeat center / cover;
      }
    }
    .popup-content {
      .popup-inner {
        .popup-info {
          padding: 15px;
          border-radius: 10px;
          border: 1px solid #eee;
          margin-bottom: 10px;
          ul {
            display: flex;
            flex-direction: column;
            gap: 4px;
          }
          li {
            list-style: none;
            font-size: 13px;
            color: #6b6c75;
            span {
              color: #ec1717;
              font-weight: 700;
            }
          }
        }
        .popup-form {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 10px;
          dl {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            dd {
              width: calc(100% - 80px);
              &:first-child {
                width: 80px;
                font-weight: 700;
                color: #9799a5;
                font-size: 14px;
              }
              input {
                padding: 4px;
                box-shadow: 0 -1px 0 0 #eee inset;
                font-size: 14px;
                &:focus {
                  box-shadow: 0 -1px 0 0 var(--main-color) inset;
                }
                &::placeholder {
                  color: #aeaeae;
                }
              }
            }
          }
        }
      }
      .btn-wrap {
        margin-top: 40px;
        button {
          cursor: pointer;
          padding: 8px 14px;
          border: 1px solid var(--main-color);
          border-radius: 4px;
          background: #fff;
          color: var(--main-color);
          font-size: 14px;
          &:first-child {
            background: var(--main-color);
            color: #fff;
          }
        }
      }
    }
  }
  &.fixed {
    pointer-events: inherit;
    opacity: 1;
    .login-popup.active {
      pointer-events: inherit;
      opacity: 1;
    }
  }
}