/* 1. 기본 설정 및 레이아웃 */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Apple SD Gothic Neo', sans-serif; }
body { background-color: #f0f2f5; height: 100vh; width: 100vw; display: flex; overflow: hidden; }

.app-wrapper { display: flex; width: 100%; height: 100%; }

/* 2. 사이드바 (고정) */
.left-sidebar { width: 250px; background-color: #2c3e50; color: white; padding: 40px 25px; flex-shrink: 0; z-index: 10; }
.left-sidebar .logo { font-size: 1.8rem; font-weight: bold; margin-bottom: 50px; color: #2cabff; }
.menu-list { list-style: none; }
.menu-list li { padding: 15px 20px; cursor: pointer; border-radius: 12px; margin-bottom: 10px; color: #bdc3c7; transition: 0.3s; }
.menu-list li.active { background-color: #007aff; color: white; font-weight: bold; }

/* 3. 중앙 콘텐츠 영역 (가변) */
.main-content { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    overflow: hidden; 
    gap: 20px; 
    padding: 20px;
}

/* 4. 게임창 및 랭킹카드 공통 스타일 */
.game-container, .ranking-card { 
    width: 480px; height: 85vh; background: white; border-radius: 24px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; 
}
.ranking-card { width: 100%; max-width: 800px; height: auto; max-height: 85vh; }

header, .ranking-card-header { 
    background-color: #3b5998; color: white; padding: 20px 25px; 
    display: flex; justify-content: space-between; align-items: center; 
}

/* 5. 요청하신 토글 디자인 */
.toggle-wrapper { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
[type="checkbox"] {
    appearance: none; width: 50px; height: 26px; background: #666; border-radius: 15px;
    position: relative; cursor: pointer; transition: 0.3s;
}
[type="checkbox"]::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    background: white; border-radius: 50%; transition: 0.3s;
}
[type="checkbox"]:checked { background: #68f04d; }
[type="checkbox"]:checked::before { left: 27px; }

/* 6. 채팅 및 테이블 스타일 */
/* 6. 채팅 영역 수정 */
.chat-box { 
    flex: 1; 
    padding: 20px; 
    background: #e9e9eb; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

/* 채팅 버블 - 글자수에 맞게 조절 */
.message { display: flex; width: 100%; margin-bottom: 8px; }
.pc-message { justify-content: flex-start; }
.user-message { justify-content: flex-end; }

.bubble { 
    width: fit-content;    /* 글자 길이에 맞춤 */
    max-width: 80%; 
    padding: 10px 16px; 
    border-radius: 20px; 
    font-size: 0.95rem; 
    line-height: 1.4; 
    word-break: break-word;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pc-message .bubble { background: white; color: #333; border-bottom-left-radius: 4px; }
.user-message .bubble { background: #007aff; color: white; border-bottom-right-radius: 4px; }

.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table thead { background-color: #4a69ad; }
.ranking-table th { color: white; padding: 15px; font-weight: 600; text-align: center; }
.ranking-table td { padding: 18px; text-align: center; border-bottom: 1px solid #eee; color: #333; }

/* 오른쪽 랭킹 패널 (게임 중 열리는 창) */
/* 랭킹 패널 기본 상태 (숨김) */
.right-panel {
    display: none; /* 기본적으로 안 보임 */
    width: 320px;
    height: 85vh;
    background: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    flex-direction: column;
    flex-shrink: 0;
}

/* 토글이 켜졌을 때 나타나게 하는 클래스 (JS에서 추가함) */
.right-panel.active {
    display: flex; /* 토글 시 나타남 */
}

/* 게임창과 랭킹 패널이 나란히 있게 하는 부모 설정 */
.main-content {
    flex: 1;
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center;
    gap: 20px; /* 게임창과 랭킹창 사이 간격 */
}

.input-area { padding: 15px 20px; display: flex; gap: 10px; border-top: 1px solid #eee; }
.input-area input { flex: 1; padding: 10px 15px; border-radius: 20px; border: 1px solid #ddd; outline: none; }
.input-area button { width: 40px; height: 40px; border-radius: 50%; background: #007aff; color: white; border: none; cursor: pointer; font-size: 1.2rem;}

#ranking-list {
    padding: 0;
    margin: 0;
}
#ranking-list li:last-child {
    border-bottom: none;
}