@charset "utf-8";

/* 현재접속자 */
#current_connect ul {margin:0;padding:0;list-style:none;zoom:1}
#current_connect ul:after {display:block;visibility:hidden;clear:both;content:""}
#current_connect li:after {display:block;visibility:hidden;clear:both;content:""}
#current_connect li {position:relative;padding:18px 0;border-bottom:1px solid #ececec;min-height:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
#current_connect li:first-child {border-top:1px solid #ececec}
#current_connect .crt_num {float:left;line-height:45px;margin-right:20px;color:#777;font-weight:bold}
#current_connect .crt_profile {float:left;margin-right:20px;line-height:45px}
#current_connect .crt_profile > img {width:45px;height:45px;border-radius:50%}
#current_connect .crt_info {float:left;margin-top:5px}
#current_connect .crt_name {display:block}
#current_connect .sv_member {font-weight:bold;line-height:20px;font-size:1.2em}
#current_connect .profile_img {display:none}
#current_connect .crt_lct {display:block}
#current_connect .crt_lct a {color:#797979}
#current_connect li.empty_li {width:100%;padding:200px 0;border:0;color:#666;text-align:center}

/* 버튼 전체 스타일 */
.realtime-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1e1e1e;
    color: #fff;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #333;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

/* 호버 시 애니메이션 */
.realtime-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0px 6px 18px rgba(0,0,0,0.35);
    background: #272727;
}

/* 숫자 뱃지 */
.realtime-count {
    background: #ff4757;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    transition: background 0.25s;
}

/* 호버 시 색 강조 */
.realtime-btn:hover .realtime-count {
    background: #ff2f44;
}