*{box-sizing:border-box}body{margin:0;font-family:Arial,'Noto Sans KR',sans-serif;background:#f4f6fb;color:#202638}button{cursor:pointer;border:0;border-radius:10px;padding:10px 14px;background:#6679e8;color:white;font-weight:600}button:hover{filter:brightness(.96)}.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#f8f9fc)}.login h1{font-size:34px}.login h1 b{color:#6679e8}.login p{color:#7d879b;margin-bottom:28px}.login button{padding:15px 28px}.login small{margin-top:30px;color:#9aa2b1}#app{height:100vh;display:grid;grid-template-columns:290px 1fr;padding:14px;gap:14px}aside,.chat{background:white;border:1px solid #e8ebf2;border-radius:18px;padding:18px;min-height:0}aside{display:flex;flex-direction:column}aside header,.chat header{display:flex;align-items:center;justify-content:space-between;gap:10px}aside h2{font-size:19px}aside h2 b{color:#6679e8}#profile{padding:14px;background:#f6f7fb;border-radius:12px;font-size:12px;color:#737e93}aside h4{font-size:11px;color:#9aa2b1;text-transform:uppercase;letter-spacing:1px;margin:25px 0 10px}#rooms{display:flex;flex-direction:column;gap:5px;overflow:auto;flex:1}#rooms button{text-align:left;background:transparent;color:#35405a}#rooms button:hover{background:#f0f2ff}aside>label{font-size:11px;color:#8992a3;margin-top:15px}select{padding:6px;border:1px solid #ddd;border-radius:8px}.chat{display:flex;flex-direction:column}.chat header{padding-bottom:15px;border-bottom:1px solid #edf0f5}#messages{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px}.msg{max-width:75%;align-self:flex-start}.msg p{background:#f0f2f8;padding:11px 14px;border-radius:14px;margin:5px 0;white-space:pre-wrap;overflow-wrap:anywhere}.msg small{color:#8992a3;font-size:10px}.msg.mine{align-self:flex-end}.msg.mine p{background:#6679e8;color:white}#sendForm{display:flex;gap:10px;border:1px solid #e5e8ef;border-radius:14px;padding:10px}#message{resize:vertical;min-height:42px;max-height:130px;flex:1;border:0;outline:0;padding:10px;font:inherit}dialog{border:0;border-radius:18px;padding:25px;box-shadow:0 20px 70px #20263844;width:min(90vw,400px)}dialog form{display:flex;flex-direction:column;gap:12px}dialog input{padding:12px;border:1px solid #dfe3ec;border-radius:9px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#252c3b;color:white;padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none}#toast.show{opacity:1}html[data-theme=dark] body{background:#171a21;color:#eee}html[data-theme=dark] aside,html[data-theme=dark] .chat{background:#222630;border-color:#333a48}html[data-theme=dark] .msg p{background:#333a48}html[data-theme=dark] .msg.mine p{background:#6679e8}@media(max-width:700px){#app{grid-template-columns:120px 1fr;padding:5px;gap:5px}aside,.chat{padding:10px;border-radius:12px}aside h2{font-size:13px}aside header button{padding:7px}#rooms button{font-size:11px;padding:8px 4px}.chat header{font-size:12px}.chat header button{padding:8px 6px}#messages{padding:10px}.msg{max-width:90%}}