/* charset: "utf-8"; */
:root { --bg:#0b1020; --fg:#e9eef5; --muted:#9fb1c9; --acc:#6aa7ff; }
* {box-sizing: border-box;}
html {font-size: 62.5%;}
body {margin: 0;font-family: Nanum Gothic, "나눔고딕";background: var(--bg);color: var(--fg);}
header {padding: 10px 15px;display: flex;align-items: center;justify-content: space-between;}
header h1 {font-size: 2.0rem;font-weight: 400;margin: 0;padding: 0;}
header .controls {display: flex;flex-wrap: wrap;gap: 8px;}
header button {font-size: 1.4rem;background:#111a39;border: 1px solid #2a3a6b;color:var(--fg);border-radius: 5px;padding: 8px 10px;cursor: pointer;}
header button:hover {border-color:#3e56a6;}
header button.primary {background: linear-gradient(180deg, #2a62ff, #1a49c8);border-color:#2a62ff;}
header button.danger {background: linear-gradient(180deg, #ff4d4d, #c83a3a);border-color:#ff4d4d;}
header button.ghost {background: transparent;border-color:#2a3a6b;}

.stage {position: relative;background:#0e1530;padding: 0 10px;}
.stage span {position: absolute;top: 10px;left: 20px;z-index: 10;}
.stage span.dot {background: #36b368;display: inline-block;color: #fff;padding: 2px 5px;border-radius: 5px;font-size: 1.4rem;}
.stage span.dot.online {background:#dc3067;color: #fff;font-weight: 500;}

.stage .video_wrap {position: relative;background: #0a0f24;border: 1px solid #1c2745;border-radius: 12px;overflow: hidden;}
.stage .video_wrap video {width: 100%;height: auto;background: #0a0f24;}
.stage .video_wrap audio {display: none;}

.stage .text_wrap {display: none;padding: 10px 5px;gap: 5px;}
.stage .text_wrap input[type="text"] {flex: 1;background:#1a1a1a;color:#eee;border: none;padding: 0 5px;}
.stage .text_wrap button {font-size: 1.4rem;background:#111a39;border: 1px solid #2a3a6b;color:var(--fg);border-radius: 5px;padding: 8px 10px;cursor: pointer;}

.stage .log_wrap {display: none;background:#0a0f24; border: 1px solid #1c2745;overflow: auto;height: 200px;}
.stage .log_wrap div.log {padding: 5px 10px;font-size: 1.3rem;line-height: 1.6rem;}