@charset "utf-8";

/* =========================================================
   [공통] 로그인 컨테이너
========================================================= */
/* 화면 중앙 정렬 및 배경 세팅 */
#mb_login.mbskin {display: flex;justify-content: center;align-items: center;height: 100vh;padding: 8rem 2rem;background: #f8fafc;}
#mb_login .sound_only{position:absolute; height:0; overflow:hidden;}

/* 폼 박스 메인 스타일 (이전 게시판 뷰/글쓰기 톤과 동일) */
.mbskin_box { position: relative; width: 100%; max-width: 48rem; background: #ffffff; border-radius: 2rem; border: 1px solid #e2e8f0; padding: 5rem 4rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.03); box-sizing: border-box; }

/* =========================================================
   타이틀 및 회원가입 링크
========================================================= */
.mbskin_box h1 { font-size: 3.2rem; color: #0f172a; font-weight: 700; text-align: left; margin-bottom: 3rem; letter-spacing: -0.05rem;     text-align: center;}
.mbskin_box h1 img{width:20rem;}

.mb_log_cate { position: absolute; top: 6rem; right: 4rem; }
.mb_log_cate h2 { display: none;}
.mb_log_cate .join { display: none; font-size: 1.5rem; color: #005FDE; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.6rem; background: rgba(0, 95, 222, 0.05); transition: background 0.3s; }
.mb_log_cate .join:hover { background: rgba(0, 95, 222, 0.1); }

/* =========================================================
   입력 폼 (Input & Button)
========================================================= */
#login_fs { border: none; padding: 0; margin: 0; }
#login_fs legend { display: none; }

/* 텍스트 입력창 */
.frm_input { width: 100%; height: 5.4rem; border: 1px solid #cbd5e1; border-radius: 0.8rem; padding: 0 2rem; font-size: 1.6rem; color: #1e293b; box-sizing: border-box; margin-bottom: 1.5rem; transition: all 0.3s; background: #fff; }
.frm_input:focus { border-color: #005FDE; outline: none; box-shadow: 0 0 0 0.3rem rgba(0, 95, 222, 0.1); }
.frm_input::placeholder { color: #94a3b8; }

/* 로그인 버튼 */
.btn_submit { width: 100%; height: 5.6rem; background: #005FDE; color: #fff; font-size: 1.8rem; font-weight: 700; border: none; border-radius: 0.8rem; cursor: pointer; margin-top: 1rem; transition: all 0.3s; box-shadow: 0 0.4rem 1.5rem rgba(0, 95, 222, 0.2); }
.btn_submit:hover { background: #004bb5; transform: translateY(-0.2rem); box-shadow: 0 0.6rem 2rem rgba(0, 95, 222, 0.3); }

/* =========================================================
   하단 옵션 (자동로그인 & 정보찾기)
========================================================= */
#login_info { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }

/* 커스텀 체크박스 (프라이버시 동의와 동일한 구조) */
.login_if_auto.chk_box input[type="checkbox"] { display: none; }
.login_if_auto.chk_box label { display: flex; align-items: center; font-size: 1.5rem; color: #475569; cursor: pointer; font-weight: 500; }
.login_if_auto.chk_box label span { display: inline-block; width: 2.2rem; height: 2.2rem; border: 2px solid #cbd5e1; border-radius: 0.6rem; margin-right: 0.8rem; background: #fff; position: relative; transition: all 0.3s; box-sizing: border-box; }
.login_if_auto.chk_box input:checked + label span { background: #005FDE; border-color: #005FDE; }
.login_if_auto.chk_box input:checked + label span::after { content: ''; position: absolute; left: 0.6rem; top: 0.2rem; width: 0.5rem; height: 1rem; border: solid white; border-width: 0 0.2rem 0.2rem 0; transform: rotate(45deg); }
login_info .site_move{}
#login_info .site_move a{
    font-size: 1.2rem;
    color: #fff;
    background: #19376e;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

/* 아이디/비밀번호 찾기 링크 */
.login_if_lpl a { font-size: 1.4rem; color: #64748b; font-weight: 500; transition: color 0.3s; text-decoration: none; }
.login_if_lpl a:hover { color: #0f172a; text-decoration: underline; }
.login_if_lpl{display:none;}

/* =========================================================
   모바일 반응형 조절
========================================================= */
@media screen and (max-width: 480px) {
    #mb_login.mbskin { padding: 4rem 2rem; }
    .mbskin_box { padding: 4rem 2.5rem; border-radius: 1.6rem; }
    .mbskin_box h1 { font-size: 2.8rem; margin-bottom: 2.5rem; }
    .mb_log_cate { top: 4.5rem; right: 2.5rem; }
    .mb_log_cate .join { font-size: 1.4rem; }
    .frm_input { height: 5rem; }
    .btn_submit { height: 5rem; font-size: 1.6rem; }
}