@charset "UTF-8";
:root{--ff:'Courier New',Courier,monospace;--fs:16px;}
body{font-family:var(--ff);color:#666;font-size:14px;line-height:1;background:#000;box-sizing:border-box;height:100dvh;margin:0;overflow:hidden;}
button{cursor:pointer;}
.login_main{display:flex;justify-content:center;align-items:center;height:100dvh}
.login_box{border:2px solid var(--main);padding:30px;width:min(600px,90%);box-sizing:border-box}
.login_box h1{margin:0 0 30px 0px;color:var(--main);}
.form_group{margin-bottom:25px}
.form_group label{display:block;margin-bottom:10px;text-transform:uppercase;}
.nickname_box{display:flex;align-items:center;background:#171717;}
.nickname_box input{width:100%;padding:15px 20px;background:none;border:none;color:var(--main);font-family:var(--ff);font-size:var(--fs);}
.nickname_box input:focus{outline:none}
.nickname_box button{flex-shrink:0;padding:7px 14px;margin-right:7px;background:#1e1e1e;border:none;color:#ccc;font-family:var(--ff);border-radius:5px;}
.theme_select{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.theme_select .theme_color{width:100%;height:30px;cursor:pointer;border:2px solid #fff;padding:2px;box-sizing:border-box;}
.theme_select .theme_color.selected{border:2px solid var(--main);}
.login_button{background:var(--main);border:none;width:100%;padding:12px 0px;font-family:var(--ff);font-size:var(--fs);color:#000}
.login_button:disabled{opacity:0.5;cursor:not-allowed;}
.chat_main{display:none;flex-direction:column;height:100dvh;}
.chat_header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #ffffff1a;}
.chat_title{color:var(--main);font-size:18px;font-weight:bold;}
.chat_onlne{color:var(--main);position:relative;}
.chat_onlne_btn{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;}
.chat_onlne_show{display:none;position:absolute;right:0;top:100%;background:#000;border:1px solid var(--main);padding:15px 18px;z-index:100;min-width:150px;margin-top:10px;}
.chat_onlne_line{padding:8px 5px;color:var(--main);white-space:nowrap;}
.chat_onlne_line span{margin-right: 10px;}
.chat_body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:5px;}
.message_line{display:flex;gap:10px;margin-bottom:15px;font-size:var(--fs);line-height:1.4;}
.message_time{color:#555;}
.message_nickname{}
.message_content{}
.chat_footer{padding:15px 20px;border-top:1px solid #ffffff1a;display:flex;align-items:center;}
.chat_footer label{color:var(--main);margin-right:5px;font-family:var(--ff);font-size:var(--fs);}
.chat_footer input{flex:1;padding:10px 15px;border:none;font-family:var(--ff);color:var(--main);background:none;font-size:var(--fs);}
.chat_footer input:focus{outline:none;}

@media (max-width:768px){
.location_label{display:none}
.message_line{display:block;margin-bottom:15px}
.message_time{font-size:12px;display:block;width:100%;margin-bottom:5px;}
.message_nickname{margin-right:8px;}
.chat_footer label{display:none}
}