*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#101422;--card:#171d31;--line:#2a3352;--ink:#eaeef8;--dim:#93a0c0;--vio:#8f9dff;--vio2:#b7c1ff;
  --green:#3ecf8e;--amber:#ffca5f}
body{background:radial-gradient(800px 500px at 50% -10%,#1a2138 0%,var(--bg) 60%);color:var(--ink);
  font-family:'Noto Sans KR',sans-serif;min-height:100vh;line-height:1.65}
.wrap{max-width:560px;margin:0 auto;padding:24px 16px 54px}
.hidden{display:none!important}
.top{text-align:center;padding:2px 0 14px}
h1{font-size:33px;font-weight:900}
.tg{color:var(--dim);font-size:14px;margin-top:6px}
.tg b{color:var(--vio2)}
.dim{font-size:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;
  box-shadow:0 12px 36px #0009}
.ch{font-size:13.5px;font-weight:800;color:var(--vio2);margin-bottom:10px}
.opt{color:var(--dim);font-weight:400;font-size:11.5px}
input,textarea{width:100%;background:#0c1120;border:1.5px solid var(--line);border-radius:12px;color:var(--ink);
  padding:12px;font-size:15px;font-family:inherit;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--vio)}
.prime{display:block;width:100%;margin-top:11px;background:linear-gradient(135deg,var(--vio),#5e6fe8);
  color:#fff;border:none;border-radius:12px;padding:14px;font-size:15.5px;font-weight:800;font-family:inherit;
  cursor:pointer;box-shadow:0 6px 20px #8f9dff33}
.prime:disabled{opacity:.55}
.ghost{display:block;width:100%;margin-top:8px;background:none;border:1px solid var(--line);color:var(--dim);
  border-radius:12px;padding:12px;font-family:inherit;font-size:13.5px;cursor:pointer}
.joinrow{display:flex;gap:8px}
.joinrow input{text-align:center;font-size:19px;font-weight:800;letter-spacing:5px}
.joinrow button{background:var(--card);border:1.5px solid var(--vio);color:var(--vio2);border-radius:12px;
  padding:0 22px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.roomhead{text-align:center;margin-bottom:14px}
.codebadge{display:inline-block;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:100px;
  padding:4px 14px;margin-bottom:8px}
.codebadge b{color:var(--amber);font-size:15px;letter-spacing:3px}
.roomhead h2{font-size:21px;font-weight:900}
.cnt{font-size:12.5px;color:var(--dim);margin-top:4px}
.cnt b{color:var(--green)}
.opmsg{margin-top:8px;font-size:12.5px;color:var(--green);text-align:center;min-height:16px}
.hostrow{display:flex;flex-direction:column}

.synwrap{animation:fadein .5s}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.secbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px}
.secbox .sh{font-size:12.5px;font-weight:800;margin-bottom:7px}
.secbox.common .sh{color:var(--green)}
.secbox.conf .sh{color:var(--amber)}
.secbox li{list-style:none;font-size:13.5px;padding:3px 0}
.secbox li::before{content:"— "}
.optcard{background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:15px;margin-bottom:10px;
  cursor:pointer;transition:.15s;position:relative}
.optcard:hover{border-color:var(--vio)}
.optcard.win{border-color:var(--green);box-shadow:0 0 22px #3ecf8e22}
.optcard .ot{font-size:16px;font-weight:800}
.optcard .ow{font-size:13px;color:var(--dim);margin:4px 0}
.optcard .og{font-size:12px;color:var(--green)}
.optcard .oc{font-size:12px;color:var(--amber)}
.optcard .vb{position:absolute;top:12px;right:12px;background:#0c1120;border:1px solid var(--line);
  border-radius:100px;padding:4px 12px;font-size:12.5px;color:var(--vio2);font-weight:800}
.pickbox{background:linear-gradient(135deg,#1d2440,#171d31);border:1px solid var(--vio);border-radius:15px;
  padding:15px;font-size:14px;margin-bottom:10px}
.pickbox b{color:var(--vio2)}
.finalbox{background:#12301f;border:1.5px solid var(--green);border-radius:15px;padding:18px;text-align:center;
  font-size:16px;font-weight:800;margin-bottom:10px}
.foot{text-align:center;color:#5a6688;font-size:11px;margin-top:30px;line-height:1.8}
@media(max-width:420px){h1{font-size:27px}}