:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #e8eaed;
  --muted: #9aa3b2;
  --accent: #6ee7b7;
  --accent-2: #60a5fa;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent-2); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

.top {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(15,17,21,.92);
  backdrop-filter: blur(8px); z-index: 20;
}
.top h1 { font-size: 1rem; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.top .home { color: var(--muted); text-decoration: none; font-weight: 600; }
.top .home:hover { color: var(--text); }
.spacer { flex: 1; }

.pill {
  font-size: .78rem; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line);
  padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
}

.btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .8rem; font-size: .88rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.btn:hover { border-color: #3a4150; background: #232833; }
.btn.primary { background: var(--accent); color: #07221a; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=color] {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .7rem; font-size: .9rem; font-family: inherit;
}
input[type=text]:focus { outline: 2px solid var(--accent-2); outline-offset: -1px; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}

.muted { color: var(--muted); }
.tiny { font-size: .8rem; }

/* 참가자 */
.peers { display: flex; flex-wrap: wrap; gap: .35rem; }
.peer {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .15rem .6rem; font-size: .8rem;
}
.dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.crown { font-size: .72rem; margin-left: .1rem; }

/* 채팅 */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-log {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: .35rem;
  padding-right: .25rem;
}
.chat-log .line { font-size: .88rem; word-break: break-word; }
.chat-log .line .who { font-weight: 700; }
.chat-log .sys { color: var(--muted); font-size: .8rem; }
.chat-form { display: flex; gap: .4rem; margin-top: .6rem; }
.chat-form input { flex: 1; min-width: 0; }

.status {
  padding: .4rem .7rem; border-radius: 8px; font-size: .82rem;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.status.bad { color: #fda4af; border-color: #5b2130; }
.status.good { color: var(--accent); border-color: #22503f; }