:root { --bg:#14161a; --panel:#1e2228; --line:#323843; --text:#e8eaed; --muted:#9aa3ad; --accent:#4c8dff; --bad:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text);
  font:16px/1.4 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
button { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 12px; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.on { background:var(--accent); border-color:var(--accent); }
input { font:inherit; color:var(--text); background:#0f1114; border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; width:100%; }

/* 로그인 */
.login { min-height:100%; display:flex; align-items:center; justify-content:center; padding:16px; }
.card { width:100%; max-width:340px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; }
.card h1 { font-size:18px; margin:0 0 16px; }
.card label { display:block; font-size:13px; color:var(--muted); margin:12px 0 4px; }
.card button { width:100%; margin-top:18px; background:var(--accent); border-color:var(--accent); font-weight:600; }
.msg { min-height:20px; margin-top:12px; font-size:14px; color:var(--bad); }

/* 조종 화면 */
#app { position:fixed; inset:0; display:flex; flex-direction:column; }
#bar { display:flex; flex-wrap:wrap; gap:6px; padding:6px; background:var(--panel); border-bottom:1px solid var(--line); align-items:center; }
#bar .sep { width:1px; align-self:stretch; background:var(--line); margin:0 4px; }
#bar select, #bar select { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 8px; }
#status { margin-left:auto; font-size:13px; color:var(--muted); }
#screen { flex:1; min-height:0; background:#000; position:relative; }
#screen > div { position:absolute !important; inset:0; overflow:hidden !important; display:flex; align-items:center; justify-content:center; }

#kb { display:none; background:var(--panel); border-top:1px solid var(--line); padding:6px; user-select:none; }
#kb.open { display:block; }
#kb .row { display:flex; gap:4px; margin-bottom:4px; justify-content:center; }
#kb button { flex:1 1 0; min-width:0; padding:9px 2px; font-size:14px; max-width:64px; }
#kb button.wide { flex:2 1 0; max-width:130px; }
#kb button.space { flex:8 1 0; max-width:420px; }

#cred, #sendbox { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:16px; z-index:10; }
#cred.open, #sendbox.open { display:flex; }
#sendbox textarea { width:100%; height:120px; font:inherit; color:var(--text); background:#0f1114; border:1px solid var(--line); border-radius:8px; padding:10px; resize:vertical; }
.row2 { display:flex; gap:8px; margin-top:12px; }
.row2 button { flex:1; margin-top:0; }

/* 빠른 방식 화면 */
#screen { display:flex; align-items:center; justify-content:center; overflow:hidden; }
#screen canvas.fast { display:block; outline:none; cursor:default; touch-action:none; image-rendering:auto; }
#bar button:disabled { opacity:.4; cursor:default; }
#notice { display:none; padding:8px 12px; background:#4a3b12; color:#ffe7a3; font-size:14px; border-bottom:1px solid var(--line); }
#notice.open { display:block; }