*{box-sizing:border-box}.chat-container{display:flex;width:100%;height:100vh;min-height:0;overflow:hidden;background:#f5f6f8;color:#222;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans KR,Arial,sans-serif}.sidebar{flex:0 0 240px;width:240px;height:100%;min-width:0;display:flex;flex-direction:column;background:#202225;color:#fff;border-right:1px solid #18191c;overflow:hidden}.sidebar h3{margin:0;padding:22px 20px 16px;font-size:18px;font-weight:700;color:#fff}.channel-create-form{display:flex;width:100%;gap:6px;margin:0;padding:0 12px 16px;align-items:center}.channel-create-input{min-width:0;flex:1;width:auto;height:36px;padding:0 10px;border:1px solid #444750;border-radius:6px;outline:none;background:#2f3136;color:#fff;font-size:13px}.channel-create-input:focus{border-color:#5865f2;background:#36393f}.channel-create-input::placeholder{color:#8e9297}.channel-create-button{flex:0 0 auto;height:36px;padding:0 12px;border:none;border-radius:6px;background:#5865f2;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .2s ease}.channel-create-button:hover{background:#4752c4}.channel-create-button:active{transform:translateY(1px)}.sidebar ul{list-style:none;margin:0;padding:0 8px;overflow-y:auto;overflow-x:hidden}.sidebar ul::-webkit-scrollbar{width:6px}.sidebar ul::-webkit-scrollbar-track{background:transparent}.sidebar ul::-webkit-scrollbar-thumb{background:#40444b;border-radius:4px}.sidebar li{width:100%;min-width:0;min-height:40px;display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:2px;border-radius:6px;color:#b9bbbe;font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease}.sidebar li:hover{background:#34373c;color:#fff}.sidebar li.active{background:#404249;color:#fff}.sidebar li>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar li button{flex:0 0 auto;padding:4px 6px!important;border:none!important;border-radius:4px;background:transparent!important;color:#ff6b6b!important;font-size:11px!important;cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease}.sidebar li:hover button{opacity:1}.sidebar li button:hover{background:#ff6b6b1f!important}.user-info{flex:0 0 auto;margin-top:auto;padding:14px 16px;border-top:1px solid #383a40;background:#1b1c1f}.user-info p{margin:4px 0;color:#b9bbbe;font-size:13px}.user-info strong{color:#fff}.status-indicator{display:flex;align-items:center;gap:5px}.online{color:#43b581;font-weight:600}.offline{color:#f04747;font-weight:600}.chat-main{flex:1 1 auto;width:auto;min-width:0;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff}.chat-header{flex:0 0 64px;width:100%;min-width:0;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid #e5e7eb;background:#fff}.chat-header h2{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#222;font-size:18px;font-weight:700}.chat-messages{flex:1 1 auto;width:100%;min-width:0;min-height:0;padding:20px 24px;overflow-x:hidden;overflow-y:auto;background:#f8f9fb}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#c7cbd1;border-radius:5px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#aeb3ba}.message-item{width:100%;max-width:850px;margin-bottom:16px;padding:10px 14px;border-radius:10px;background:#fff;border:1px solid #e7e9ed;box-shadow:0 1px 2px #0000000a}.message-item .sender{display:block;margin-bottom:4px;color:#5865f2;font-size:13px;font-weight:700}.message-item .content{margin:0;color:#333;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.message-item.my-message{margin-left:auto;background:#eef0ff;border-color:#dfe2ff}.message-item.my-message .sender{color:#4752c4}.chat-input-box{flex:0 0 auto;width:100%;min-width:0;display:flex;gap:10px;padding:14px 18px;border-top:1px solid #e5e7eb;background:#fff}.chat-input-box input{min-width:0;flex:1 1 auto;height:44px;padding:0 14px;border:1px solid #d5d9df;border-radius:8px;outline:none;background:#fff;color:#222;font-size:14px}.chat-input-box input:focus{border-color:#5865f2;box-shadow:0 0 0 2px #5865f21f}.chat-input-box input::placeholder{color:#9ca1a8}.chat-input-box button{flex:0 0 auto;height:44px;padding:0 20px;border:none;border-radius:8px;background:#5865f2;color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s ease}.chat-input-box button:hover{background:#4752c4}.chat-input-box button:active{transform:translateY(1px)}.participants-sidebar{flex:0 0 220px;width:220px;height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;padding:20px 18px;border-left:1px solid #e1e4e8;background:#fff}.participants-sidebar::-webkit-scrollbar{width:6px}.participants-sidebar::-webkit-scrollbar-thumb{background:#d0d4da;border-radius:4px}.participants-sidebar h4{margin:0;padding-bottom:12px;border-bottom:1px solid #eeeeee;color:#333;font-size:16px;font-weight:700}.participants-sidebar ul{list-style:none;margin:10px 0 0;padding:0}.participants-sidebar li{width:100%;min-width:0;padding:7px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4f545c;font-size:14px}@media (max-width: 900px){.sidebar{flex-basis:210px;width:210px}.participants-sidebar{flex-basis:180px;width:180px;padding:18px 14px}.chat-messages{padding:16px}.chat-header{padding:0 16px}}@media (max-width: 700px){.chat-container{position:relative}.sidebar{flex-basis:190px;width:190px}.participants-sidebar{display:none}.channel-create-form{padding-left:10px;padding-right:10px}.channel-create-input{width:0}.chat-header{flex-basis:56px;padding:0 14px}.chat-header h2{font-size:16px}.chat-messages{padding:12px}.message-item{max-width:100%;margin-bottom:10px}.chat-input-box{gap:6px;padding:10px}.chat-input-box button{padding:0 14px}}@media (max-width: 500px){.sidebar{flex-basis:160px;width:160px}.sidebar h3{padding-left:14px;font-size:16px}.sidebar li{padding-left:7px;padding-right:7px;font-size:13px}.channel-create-button{padding:0 9px}.chat-input-box input,.chat-input-box button{font-size:13px}}button,input{font-family:inherit}button:focus-visible,input:focus-visible{outline:2px solid #5865f2;outline-offset:2px}.login-container{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:#f5f6f8;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans KR,Arial,sans-serif}.login-box{width:100%;max-width:400px;padding:40px 30px;background:#fff;border:1px solid #e1e4e8;border-radius:12px;box-shadow:0 4px 12px #0000000d;text-align:center}.login-box h2{margin:0 0 10px;color:#222;font-size:22px;font-weight:700}.login-box p{margin:0 0 30px;color:#666;font-size:14px}.naver-login-btn{width:100%;height:48px;border:none;border-radius:8px;background:#03c75a;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s ease}.naver-login-btn:hover{background:#02b350}.naver-login-btn:active{transform:translateY(1px)}body,html,#root{margin:0;padding:0;height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f6f9}