@charset "utf-8";
/* 로그인 위젯 폼 기본 레이아웃 */
.login_default { position:relative; padding:15px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.03); box-sizing:border-box; }
.login_default fieldset { margin:0; padding:0; border:0; }
.login_default fieldset legend { display:none; }

/* 아이디/비밀번호와 로그인 버튼 감싸는 영역 (Flexbox 배치) */
.login_default fieldset .idpwWrap { 
    display: flex; 
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 5px; 
}

/* 아이디/비밀번호 입력칸 묶음 (왼쪽) */
.login_default fieldset .idpwWrap .idpw { 
    width: calc(100% - 78px); 
    display: flex; 
    flex-direction: column; 
}
.login_default fieldset .idpwWrap .idpw input[type="text"],
.login_default fieldset .idpwWrap .idpw input[type="password"] {
    width: 100%; height:34px; padding:0 10px; margin-bottom:6px; font-size:13px;
    border:1px solid #cbd5e1; border-radius:4px; box-sizing:border-box;
    transition:all 0.2s ease;
}
.login_default fieldset .idpwWrap .idpw input[type="text"]:focus,
.login_default fieldset .idpwWrap .idpw input[type="password"]:focus {
    border-color:#3b82f6; outline:none; box-shadow:0 0 0 2px rgba(59,130,246,0.1);
}

/* ========================================================= */
/* 🎯 CSS 텍스트 로그인 버튼 (여기서 색상을 변경하세요)      */
/* ========================================================= */
.login_default fieldset .idpwWrap button.btn_login {
    width: 68px; 
    height: 74px; /* 입력칸 2개 높이에 딱 맞춤 */
    margin: 0; padding: 0;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 1px solid #cbd5e1; /* 기본적으로 옅은 테두리 추가 */
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;

    /* 👇 아래 background와 color를 원하는 테마로 수정하세요 👇 */
    
    background: #94a3b8;
    color: #ffffff;
    border: none;

    /* ----------------------------------------------------
       🎨 색상 제안 리스트 (위 background, color, box-shadow를 아래 코드로 교체) 
       ----------------------------------------------------

       1. [스틸 그레이] - 살짝 무게감 있는 연회색 (무난함의 끝판왕)
       background: #e2e8f0; 
       color: #334155;
       border-color: #cbd5e1;

       2. [다크 슬레이트] - 검은색에 가까운 진한 남회색 (시크한 느낌)
       background: #334155; 
       color: #ffffff;
       border: none;

       3. [뮤트 네이비] - 톤다운된 차분한 네이비 (홈페이지 상단 메뉴바와 어울림)
       background: #475569;
       color: #ffffff;
       border: none;
       
       4. [소프트 블루그레이] - 파란빛이 살짝 도는 세련된 회색
       background: #94a3b8;
       color: #ffffff;
       border: none;
       
       ---------------------------------------------------- */
}

/* 버튼에 마우스 올렸을 때 효과 */
.login_default fieldset .idpwWrap button.btn_login:hover {
    background: #64748b;
    color: #FFFFFF;
    /* 
    다른 테마를 선택했다면 hover 색상도 아래와 같이 맞춰주세요.
    1. 스틸 그레이용 hover  -> background: #cbd5e1;
    2. 다크 슬레이트용 hover -> background: #1e293b;
    3. 뮤트 네이비용 hover   -> background: #334155;
    4. 소프트 블루그레이용   -> background: #64748b;
    */
}
/* ========================================================= */

/* 로그인 유지 체크박스 */
.login_default fieldset .idpwWrap .idpw .keep { 
    margin: 2px 0 0 0; padding: 0; 
    display: flex; align-items: center; 
}
.login_default fieldset .idpwWrap .idpw .keep input { margin:0 6px 0 0; width:13px; height:13px; }
.login_default fieldset .idpwWrap .idpw .keep label { font-size:12px; color:#64748b; cursor:pointer; }
.login_default fieldset .keep_msg { display:none; margin:10px 0; padding:10px; background:#fffbdd; border:1px solid #f6e690; font-size:11px; color:#555; line-height:1.4; border-radius:4px; }

/* 보안로그인 사용 버튼 (우측 정렬) */
.login_default fieldset p.securitySignIn { 
    margin: 10px 0 5px 0; padding: 0; 
    display: flex; justify-content: flex-end; 
}
.login_default fieldset p.securitySignIn button.text {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 12px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px;
    color: #64748b; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
}
.login_default fieldset p.securitySignIn button.text:hover { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }

/* 회원가입, 아이디/비밀번호 찾기 */
.login_default fieldset ul.help { margin:10px 0 0 0; padding:10px 0 0 0; border-top:1px solid #e2e8f0; display:flex; justify-content:center; gap:15px; list-style:none; }
.login_default fieldset ul.help li { margin:0; padding:0; position:relative; }
.login_default fieldset ul.help li::after { content:"|"; position:absolute; right:-9px; color:#cbd5e1; font-size:11px; }
.login_default fieldset ul.help li:last-child::after { display:none; }
.login_default fieldset ul.help li a { color:#64748b; font-size:12px; text-decoration:none; transition:color 0.2s; }
.login_default fieldset ul.help li a:hover { color:#1d4ed8; text-decoration:underline; }

/* ================================================================= */
/* 로그인 완료 후 사용자 정보 화면 */
/* ================================================================= */
.login_default fieldset .userName { border-bottom:1px solid #e2e8f0; padding-bottom:10px; margin-bottom:10px; position:relative; }
.login_default fieldset .userName a.member_4,
.login_default fieldset .userName a[class*="member_"] { font-size:15px; font-weight:700; color:#0f172a; text-decoration:none; }
.login_default fieldset .userName a[href*="Logout"] { 
    float:right; font-size:12px; padding:3px 8px; background:#f1f5f9; color:#475569; 
    border-radius:4px; text-decoration:none; transition:all 0.2s ease; border:1px solid #e2e8f0; 
}
.login_default fieldset .userName a[href*="Logout"]:hover { background:#e2e8f0; color:#334155; }
.login_default fieldset .userName p.latestLogin { margin:5px 0 0 0; font-size:11px; color:#94a3b8; }

.login_default fieldset ul.userMenu { margin:0; position:relative; padding:0; }
.login_default fieldset ul.userMenu li { list-style:none; margin-bottom:2px; }
.login_default fieldset ul.userMenu li a { color:#475569; text-decoration:none; font-size:13px; display:block; padding:2px 0; transition:all 0.2s ease; }
.login_default fieldset ul.userMenu li a:hover { color:#1d4ed8; font-weight:600; padding-left:5px; }