@charset "utf-8";

/* 현재접속자 */
#current_connect {width:100%; height:100%; overflow:auto; list-style:none;}
#current_connect ul {display:grid ; margin:0px 0px 100px; grid-template-columns:repeat(auto-fill, minmax(300px, auto)); grid-gap:10px; scrollbar-width:none;-webkit-box-pack:center;}
#current_connect li {display:flex; align-items:center; position:relative; padding:10px 0; border:1px solid var(--ui-color-gray-200); box-sizing:border-box; gap:20px;}
#current_connect .crt_num {line-height:45px; color:var(--ui-color-gray-600); font-weight:bold}
#current_connect .crt_profile {display:flex; align-items:center;}
#current_connect .crt_profile > img {width:45px;height:45px;border-radius:50%}
#current_connect .crt_info {display:flex; flex-direction:column; line-height:1.2;}
#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:var(--ui-color-gray-600); word-break:break-all;}
#current_connect li.empty_li {width:100%;padding:200px 0;border:0;color:var(--ui-color-gray-600);text-align:center}


.sideConnectWrap {display:flex; flex-direction:column; padding:10px; border:1px solid var(--layout-gray-300); border-radius:8px; background:var(--layout-white); gap:8px;}

/* 아이콘 표시 영역 */
.connect-icon-display {display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center;}

/* 개별 유저 아이콘 */
.connect-user-icon {font-size:24px; color:var(--ui-color-primary); transition:all 0.3s ease; cursor:pointer;}
.connect-user-icon:hover {transform:scale(1.2); color:var(--ui-color-primary-dark);}

/* 아이콘별 색상은 PHP에서 인라인 스타일로 적용 */

/* 10명 이상일 때 추가 표시 */
.connect-more-users {font-size:14px; font-weight:bold; color:var(--ui-color-gray-600); margin-left:4px;}

/* 전체 접속자 수 텍스트 */
.connect-total-count {text-align:center; font-size:12px; color:var(--ui-color-gray-500); margin-top:4px;}

/* 툴팁 컨테이너 (봇과 유저 공통) */
.bot-with-tooltip,
.user-with-tooltip {position:relative; display:inline-block;}

/* 메시지 툴팁 스타일 (공통) */
.message-tooltip {
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    background:var(--ui-color-gray-800);
    color:var(--ui-color-white);
    padding:6px 12px;
    border-radius:6px;
    font-size:12px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
    margin-bottom:8px;
}

/* 툴팁 화살표 */
.message-tooltip::after {
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:var(--ui-color-gray-800);
}

/* 호버 시 툴팁 표시 */
.bot-with-tooltip:hover .message-tooltip,
.user-with-tooltip:hover .message-tooltip {opacity:1;}