/* BASIC css start */


#loginWrap .page-body {
    display: flex !important;
    justify-content: center !important; /* 가로 중앙 */
    align-items: center !important;     /* 세로 중앙 */
    min-height: calc(100vh - 140px);
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    width: 100%;
    margin: 0 auto;
}

.mlog-sign {
    width: 360px;
    max-width: 100%;
    background: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}
/* 페이지 배경 및 가운데 정렬 */
#loginWrap .page-body {

    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    min-height: calc(100vh - 140px);
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
}

/* 전체 로그인 컨테이너 하나로 합침 */
.mlog-sign {

    width: 360px;
    background: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 로그인 폼 */
.mlog {

$sans-serif: 'Open Sans', sans-serif;
      font-size: 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 30px;
}

/* 입력창 스타일 */
.mlog input[type="text"],
.mlog input[type="password"] {
  font-family: 'Open Sans', Sans-serif;
    width: 100%;
    padding: 12px 12px;
    margin-top: 6px;
    margin-bottom: 18px;
    font-size: 13px;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
  border-bottom: 2px solid #646464; /* 선 두께, 스타일, 색상 */
  padding-bottom: 12px; /* 텍스트와 선 사이 간격 */

}

/* 로그인 버튼 */
.mlog .btn-mlog {
    width: 100%;
    height: 50px;
    cursor: pointer;
    border-radius: 5px;
    color: #FFF;
    font-size: 25px;
    transition: background-color 0.3s ease;
    text-align: center;
 font-family: "Noto Sans Korean", sans-serif;
}


.submit-btn {
      background-color: rgba(0,0,0,0.4);
      color: rgba(256,256,256,0.7);
      border:0;
      border-radius: 10px;
      display: block;
      margin: 15px auto; 
      padding: 15px 45px;
      width: 100%;
      font-size: 13px;
 font-family: "Noto Sans Korean", sans-serif;
font-color: #fff;
      font-weight: bold;
      cursor: pointer;
      opacity: 1;
      visibility: visible;
      -webkit-transition: all .3s ease;
      
      &:hover {
        transition: all .3s ease;
        background-color: rgba(0,0,0,0.8);
      }
    }
  }

.mlog .btn-mlog:hover {
    filter: brightness(0.9);
}

/* 보안접속 */
.se-log {
    font-size: 10px;
    color: #646464;
    margin: 10
 font-family: "Noto Sans Korean", sans-serif;
}

/* 회원가입 안내 */
.sign {
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #646464;
    line-height: 1.5;
  font-family: "Noto Sans Korean", sans-serif;
}

/* 회원가입 및 아이디 찾기 버튼 */
.sign .btns {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
font-family: "Noto Sans KR", sans-serif;
}

.sign .btns a {
      border-radius: 3px;
background-color: #000 ;
      color: #FFF;
font-size: 13px;
      display: block;
      margin: 10px auto; 
      padding: px;
    flex: 1;
    display: inline-block;
    text-align: center;
 font-family: "Noto Sans Korean", sans-serif;
}

.sign .btns a img {
    max-width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.sign .btns a hover {
      cursor: pointer;
      opacity: 1;
      visibility: visible;
      -webkit-transition: all .3s ease;
      
      &:hover {
        transition: all .3s ease;
        background-color: rgba(0,0,0,0.8);
}

/* 반응형 */
@media (max-width: 480px) {
    .mlog-sign {
        width: 90%;
        padding: 30px 20px;
    }
}
/* BASIC css end */