* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070705; color: #e6dcc8; font-family: "Noto Sans KR", "Segoe UI", sans-serif; }
#gate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #070705; }
#gate[hidden], #hud[hidden], #toast[hidden], [hidden] { display: none !important; }
.gate-box { width: min(280px, 86vw); text-align: center; }
.logo-lg { width: 210px; height: auto; margin: 0 auto 12px; display: block; }
.gate-kicker { color: #8a7344; font-size: 12px; letter-spacing: 0.08em; margin: 0 0 20px; }
input, button, select { font: inherit; }
#gate input { width: 100%; background: transparent; color: #e6dcc8; border: 0; border-bottom: 1px solid #8a7344; padding: 10px 0; text-align: center; letter-spacing: 0.3em; outline: none; }
button { background: #c4a15a; color: #111; border: 0; padding: 8px 14px; cursor: pointer; }
#enter { width: 100%; margin-top: 16px; }
#gerr { color: #c47a6a; font-size: 12px; }

.workspace-shell { display: flex; min-height: 100dvh; width: 100%; background: #070705; }
.workspace-sidebar {
  width: 220px; flex-shrink: 0; height: 100dvh; position: sticky; top: 0;
  display: flex; flex-direction: column; padding: 28px 18px;
  background: #0c0c0a; border-right: 1px solid #3a3224;
}
.workspace-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; padding: 0 6px 28px; color: #e6dcc8; }
.workspace-brand small { display: block; font-size: 8px; letter-spacing: 1.4px; color: #c4a15a; margin-top: 3px; }
.workspace-brand-mark { width: 44px; height: 44px; object-fit: contain; }
.workspace-navigation { display: flex; flex-direction: column; gap: 7px; }
.workspace-navigation a {
  display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #8a7344; text-decoration: none;
}
.workspace-navigation a:hover { background: #14110c; color: #e6dcc8; }
.workspace-navigation a[aria-current="page"] { background: #2a2214; color: #c4a15a; }
.workspace-sidebar-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto;
  padding: 14px 6px 16px; border-top: 1px solid #2a261c;
}
.workspace-sidebar-action-link, #lang {
  padding: 6px 12px; font-size: 12px; color: #8a7344; background: #14110c; border: 0; border-radius: 4px; cursor: pointer;
}
#lang { color: #e6dcc8; }
.workspace-content { flex: 1; min-width: 0; min-height: 100dvh; position: relative; background: #070705; }
.workspace-page { min-height: 100dvh; padding: clamp(20px, 2.6vw, 44px); }
.workspace-page-inner { margin-inline: auto; width: 100%; max-width: 1200px; }
.workspace-page-inner--narrow { max-width: 560px; }
.workspace-content h1 { letter-spacing: -0.035em; font-size: clamp(24px, 2.3vw, 32px); margin: 0 0 8px; }
.lead { color: #8a7344; margin: 0 0 20px; }
.card { background: #14110c; border: 1px solid #3a3224; padding: 20px; border-radius: 8px; }
.muted { color: #8a7344; font-size: 13px; }
.char-logo { width: 96px; height: auto; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.emp-card { background: #14110c; border: 1px solid #3a3224; padding: 14px; border-radius: 8px; }
.emp-card b { color: #c4a15a; font-size: 11px; letter-spacing: 0.12em; display: block; margin-bottom: 8px; }
.emp-card p { margin: 4px 0; font-size: 13px; }

#stage-wrap { position: absolute; inset: 0; }
#stage { position: absolute; inset: 0; }
#view { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#stage header, #stage aside, #stage #chat, #stage #toast { pointer-events: auto; }
#stage { pointer-events: none; }
#stage header { pointer-events: auto; }
#hud { pointer-events: auto; }

header { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; gap: 12px; z-index: 6; pointer-events: none; }
#nowbar { flex: 1; font-size: 13px; color: #e6dcc8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#auto-lamp { font-size: 11px; letter-spacing: 0.22em; color: #6d5e42; border: 1px solid #3a3224; padding: 5px 9px; }
#auto-lamp.on { color: #c4a15a; border-color: #c4a15a; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.nametag { position: absolute; left: 0; top: 0; min-width: 88px; text-align: center; background: rgba(8,8,7,0.9); border: 1px solid #8a7344; padding: 3px 7px; }
.nametag b { display: block; font-size: 11px; color: #f0e6d0; font-weight: 500; }
.nametag span { display: block; font-size: 10px; color: #c4a15a; margin-top: 1px; }
.nametag.idle { border-color: #3a3224; opacity: 0.55; }
.nametag.idle span { color: #7a7162; }
#roster { position: absolute; left: 14px; top: 52px; width: 200px; background: rgba(8,8,7,0.78); border: 1px solid #3a3224; padding: 10px; max-height: calc(100% - 250px); overflow: auto; pointer-events: auto; }
.rteam { margin: 0 0 10px; }
.rteam b { display: block; font-size: 10px; letter-spacing: 0.12em; color: #c4a15a; margin-bottom: 2px; }
.rjob { font-size: 10px; color: #a8946c; margin: 0 0 4px; }
.rname { font-size: 12px; padding: 2px 0; color: #cfc4ae; display: flex; justify-content: space-between; gap: 6px; }
.rname em { font-style: normal; font-size: 10px; color: #8a7344; }
.rname.busy { color: #f0e6d0; }
.rname.busy em { color: #c4a15a; }
#panel { position: absolute; right: 14px; top: 52px; width: min(300px, 40vw); background: rgba(8,8,7,0.82); border: 1px solid #3a3224; padding: 14px; max-height: calc(100% - 250px); overflow: auto; pointer-events: auto; }
.kicker { letter-spacing: 0.16em; color: #c4a15a; margin: 0 0 4px; font-size: 12px; }
#panel h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.status { color: #c4a15a; font-size: 12px; margin: 0 0 8px; }
pre { white-space: pre-wrap; font-size: 12px; background: #0c0c0a; border: 1px solid #2a261c; padding: 8px; color: #d4cab6; }
.item { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 1px solid #2a261c; padding: 6px 0; font-size: 12px; }
.item.out { opacity: 0.35; text-decoration: line-through; }
.item button { padding: 3px 8px; font-size: 11px; }
.row { display: flex; gap: 8px; margin-top: 10px; }
#chat { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 148px; background: rgba(8,8,7,0.94); border: 1px solid #c4a15a; padding: 10px 12px; display: flex; flex-direction: column; z-index: 8; pointer-events: auto; }
#chatlog { flex: 1; overflow: auto; }
#cmdform { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
#cmd { flex: 1; text-align: left; letter-spacing: 0; background: #14110c; border: 1px solid #8a7344; padding: 10px 12px; color: #e6dcc8; outline: none; }
#cmdform button { flex-shrink: 0; }
.line { font-size: 12px; margin: 0 0 5px; color: #d8cfbc; }
.line em { font-style: normal; color: #c4a15a; margin-right: 6px; }
#toast { position: absolute; left: 50%; bottom: 170px; transform: translateX(-50%); background: #c4a15a; color: #111; padding: 7px 14px; pointer-events: none; }

@media (max-width: 760px) {
  .workspace-shell { flex-direction: column; }
  .workspace-sidebar { width: 100%; height: auto; border-right: 0; border-bottom: 1px solid #3a3224; padding: 12px; }
  .workspace-navigation { flex-direction: row; overflow-x: auto; }
}