/* BASIC css start */
#login .login #keyboard {margin-top:20px; padding:0 15px;}
#login .tab {padding:0 15px; margin-top:30px;}
#login .tab a {width:50%; height:34px; border:1px solid #bdbdbd; border-top:3px solid #bdbdbd; border-bottom:1px solid #ab3e41; display: inline-block; text-align: center; line-height: 30px; box-sizing: border-box; background-color:#fbfbfb; }
#login .tab a.act {color:#ab3e41; background-color:#fff; border:1px solid #ab3e41;  border-top:3px solid #ab3e41; border-bottom:0px none; font-weight:bold;}
#login .login .loginInput {margin-top: 10px;}
#login .nonmember {margin-top:20px; display:none;}
#login .nonmember fieldset {padding:0 15px;}

#inquiryOrder { display:none; }
#inquiryOrder .txt { margin:15px 15px 0; padding:0; }
#inquiryOrder .frm { overflow:hidden; width:200px; margin:35px auto 0; }
#inquiryOrder .frm dt, 
#inquiryOrder .frm dd { float:left; }
#inquiryOrder .frm dt { width:60px; margin-top:5px; line-height:32px; font-weight:bold; letter-spacing:-1px; }
#inquiryOrder .frm dd { width:140px; }
#inquiryOrder .frm input[type=text] { width:100%; height:32px; line-height:32px; margin-top:5px; padding:0 5px; border:1px solid #c6c6c6; background:#fbfbfb; border-radius:0; }
#inquiryOrder .btns { margin:40px 10px 20px; }
#inquiryOrder .btns a { margin-top:10px; }


.login-container {
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
}
.login-container .h_title {
    text-align: center;
    margin-bottom: 24px;
}
.login-container .h_title h3 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

/* 1. 알약 형태(Pill 스타일) 세그먼트 탭 */
.modern-tabs {
    display: flex;
    background: #f1f1f5;
    padding: 4px;
    border-radius: 24px;
    margin-bottom: 24px;
}
.modern-tabs .tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #767676;
    cursor: pointer;
    border-radius: 20px;
    text-align: center;
    transition: all 0.2s ease;
}
/* 활성화된 탭 스타일 */
.modern-tabs .tab-btn.act {
    background: #ffffff;
    color: #111111;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 컨텐츠 박스 공통 스타일 */
.login-box-content {
    /* background: #fbfbfb;
    border: 1px solid #ebebeb; */
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
}
.login-box-content form {
    display: block;
    margin: 0;
    padding: 0;
}

/* 인풋 공통 (둥근 모서리) */
.login-box-content .loginInput input {
    width: 100%;
    height: 52px;
    border: 1px solid #e2e2e2;
    border-radius: 26px; /* 인풋창 좌우를 둥글게 */
    padding: 0 20px;
    margin-bottom: 12px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #fff;
}
.login-box-content .loginInput input:last-child {
    margin-bottom: 0;
}

/* 체크박스 영역 */
.login-box-content .loginCheck {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    margin: 16px 0 24px 0;
    padding: 0 8px;
}
.login-box-content .loginCheck label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* 하단 버튼 공통 스타일 */
.login-box-content .loginMiddle {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-box-content .btn_Red {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f49ca2; /* 소프트 핑크 */
    color: #fff;
    height: 52px;
    border-radius: 26px; /* 버튼 둥글게 */
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
}
.login-box-content .btn_White {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #777;
    height: 52px;
    border-radius: 26px;
    text-decoration: none;
    border: 1px solid #e2e2e2;
    font-size: 14px;
}

/* 2. 가로 구분선 스타일 */
.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 30px 0;
    color: #b5b5b5;
    font-size: 13px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ebebeb;
}
.login-divider:not(:empty)::before { margin-right: .5em; }
.login-divider:not(:empty)::after { margin-left: .5em; }

/* 3. SNS 영역 스타일 */
.sns-login {
    padding: 0;
    margin-bottom: 35px;
}
.sns-login ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.sns-login ul li a {
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}
.sns-login ul li a:hover { transform: scale(1.05); }
.sns-login ul li a::before {
    text-indent: 0;
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}
.sns-login ul li.kakaotalk a { background-color: #FEE500 !important; }
.sns-login ul li.kakaotalk a::before { content: '拓'; }
.sns-login ul li.naver a { background-color: #03C75A !important; }
.sns-login ul li.naver a::before { content: 'N'; color: #ffffff; font-weight: bold; font-family: 'Arial'; }

/* 4. 최하단 회원가입 안내 */
.loginBottom {
    text-align: center;
    border-top: 1px solid #f5f5f5;
    padding-top: 25px;
}
.loginBottom h4 { font-size: 15px; margin: 0 0 6px 0; color: #333; }
.loginBottom p { font-size: 12px; color: #888; line-height: 1.5; margin: 0 0 16px 0; }
.loginBottom .btn_Black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    color: #fff;
    width: 130px;
    height: 40px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
}


/* 3. 하단 원형 SNS 로그인 버튼 그룹 */
.sns-circle-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 35px;
}
.btn-sns-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%; /* 완벽한 원형 생성 */
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}
.btn-sns-circle:hover {
    transform: scale(1.05);
}
/* 카카오 원형 버튼 색상 */
.btn-sns-circle.btn-kakao {
    background-color: #FEE500;
    color: #191919;
}
/* 네이버 원형 버튼 색상 */
.btn-sns-circle.btn-naver {
    background-color: #03C75A;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

/* BASIC css end */