:root{
  --bg: #efe9da;            /* 전체 배경 - 따뜻한 베이지 */
  --panel: #faf7ef;          /* 패널 카드 배경 - 밝은 크림 */
  --panel-2: #e9e1cb;        /* 입력/버튼 배경 - 진한 베이지 */
  --border: #ddd2b3;
  --text: #2c2a23;          /* 본문 - 다크 브라운 */
  --text-dim: #74705f;
  --text-faint: #a39c87;
  --accent: #2f5fa3;         /* 포인트 블루 */
  --accent-strong: #234a85;
  --accent-soft: rgba(47,95,163,0.12);
  --online: #3e8e73;         /* 상태색 - 그린 */
  --offline: #a39c87;
  --danger: #c62828;         /* 상태색 - 레드 (경고/오류/삭제) */
  --danger-bg: #fdecea;
  --success: #1e7e45;        /* 상태색 - 그린 (성공/완료) */
  --success-bg: #eafaf1;
  --warning: #856404;        /* 상태색 - 옐로우 (대기/주의) */
  --warning-bg: #fff3cd;
  --screen: #11151c;         /* 디바이스 화면(캔버스) 영역 - 다크 유지 */
  --font-ui: -apple-system, "Apple SD Gothic Neo", "Pretendard", system-ui, "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; background:var(--bg); }
body{ font-family: var(--font-ui); color: var(--text); }

.app{ display:flex; flex-direction:column; height:100vh; height:100dvh; }

/* ---------- 상단바 ---------- */
.topbar{
  display:flex; align-items:center; gap:24px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink:0;
  position:relative;
  position:relative;
}
.topbar-brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{
  font-family: var(--font-mono);
  font-weight:700; font-size:13px;
  background: var(--accent); color:#fff;
  padding: 4px 8px; border-radius:6px; letter-spacing:0.5px;
}
.brand-text{ font-weight:700; font-size:14px; color:var(--text); }

.topbar-device{ display:flex; align-items:center; gap:10px; }
.topbar-label{ font-size:11px; color:var(--text-faint); }
.topbar-device-name{ font-size:13px; font-weight:600; }

.badge{
  font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600;
  border:1px solid transparent;
}
.badge-online{ background: rgba(62,142,115,0.13); color:var(--online); border-color: rgba(62,142,115,0.3); }
.badge-offline{ background: var(--panel-2); color:var(--text-faint); border-color: var(--border); }
.badge-role{ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(47,95,163,0.3); }

.topbar-actions{ margin-left:auto; }

.btn{
  font-family: var(--font-ui);
  font-size:12px; font-weight:600;
  padding: 8px 15px; border-radius:7px;
  border:1px solid var(--border);
  background: var(--panel-2); color:var(--text);
  cursor:pointer;
  transition: filter 0.15s, border-color 0.15s;
}
.btn:hover{ border-color: var(--text-faint); }
.btn-accent{ background: var(--accent); color:#fff; border-color: var(--accent); }
.btn-accent:hover{ filter: brightness(1.08); }
.btn-accent.is-connected{ background: var(--panel-2); color:var(--accent-strong); border-color: var(--accent); }

/* ---------- 레이아웃 (카드형) ---------- */
.layout{
  flex:1; display:flex; gap:14px; overflow:hidden;
  background: var(--bg);
  padding: 14px;
}
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(44,42,35,0.02), 0 8px 24px -16px rgba(44,42,35,0.18);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.panel-title{
  font-size:12px; font-weight:700; letter-spacing:0.2px;
  padding: 14px 14px 8px;
  display:flex; align-items:baseline; justify-content:space-between;
  color: var(--text);
}
.panel-title-sub{ font-size:11px; font-weight:400; color:var(--text-faint); }

/* ---------- 좌측: 디바이스 목록 ---------- */
.device-list{ width: 240px; flex-shrink:0; }
.device-search{ padding: 0 14px 10px; }
.device-search input{
  width:100%; padding:7px 10px; font-size:12px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:7px;
  color: var(--text); font-family: var(--font-ui);
}
.device-search input::placeholder{ color: var(--text-faint); }
.device-search input:focus{ outline:none; border-color: var(--accent); }
.company-filter{
  width:100%; margin-top:6px; padding:7px 10px; font-size:12px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:7px;
  color: var(--text); font-family: var(--font-ui);
}

.device-group-header{
  padding: 12px 14px 4px;
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:10.5px; font-weight:700; color: var(--text-faint);
  letter-spacing:0.2px;
}
.device-group-header span.count{ font-weight:400; color: var(--text-faint); }

.device-items{ list-style:none; margin:0; padding:0 8px 8px; overflow-y:auto; flex:1; min-height:0; }
.device-item{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; cursor:pointer;
  border-radius: 8px;
  border-left: 2px solid transparent;
}
.device-item:hover{ background: var(--panel-2); }
.device-item.is-active{ background: var(--accent-soft); border-left-color: var(--accent); }
.device-item.is-offline{ opacity:0.55; }

.dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot-online{ background: var(--online); box-shadow: 0 0 0 2px rgba(62,142,115,0.16); }
.dot-offline{ background: var(--offline); }

.device-item-name{ font-size:12.5px; font-weight:600; }
.device-item-id{ font-size:10.5px; color:var(--text-faint); font-family: var(--font-mono); margin-top:1px; }

/* ---------- 중앙: 제어 화면 ---------- */
.control-panel{ flex:1; align-items:center; }

.control-toolbar{
  width:100%; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 11px 18px; border-bottom:1px solid var(--border);
  font-size:11.5px;
}
.control-toolbar-group{ display:flex; align-items:center; gap:8px; }
.control-toolbar-label{ color:var(--text-faint); }
.control-toolbar select{
  background: var(--panel-2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:5px 8px; font-size:11.5px; font-family: var(--font-ui);
}
.control-toolbar-stats{ display:flex; gap:16px; color:var(--text-faint); font-family: var(--font-mono); }
.control-toolbar-stats b{ color: var(--accent-strong); font-weight:700; }

.canvas-wrap{
  position:relative; flex:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:0;
  background:
    repeating-linear-gradient(45deg, rgba(44,42,35,0.025) 0 1px, transparent 1px 14px);
}
#screenCanvas{
  background: var(--screen);
  border:1px solid #06080c;
  border-radius:6px;
  cursor: crosshair;
  box-shadow: 0 0 0 1px rgba(44,42,35,0.08), 0 24px 50px -24px rgba(44,42,35,0.45);
}
#screenVideo{
  background: var(--screen);
  border:1px solid #06080c;
  border-radius:6px;
  cursor: crosshair;
  box-shadow: 0 0 0 1px rgba(44,42,35,0.08), 0 24px 50px -24px rgba(44,42,35,0.45);
  object-fit: contain;
}
.canvas-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; color: var(--text-faint);
  background: rgba(239,233,218,0.4);
  pointer-events:none;
}
.canvas-overlay.is-hidden{ display:none; }

.control-footer{
  width:100%; flex-shrink:0;
  padding: 9px 18px; border-top:1px solid var(--border);
}
.hint{ font-size:11px; color:var(--text-faint); }

/* 탭 리플 효과 (시그니처 요소) */
.tap-ripple{
  position:absolute; pointer-events:none;
  width:26px; height:26px; margin-left:-13px; margin-top:-13px;
  border-radius:50%;
  border: 1.5px solid #6fa3e8;
  background: radial-gradient(circle, rgba(111,163,232,0.4), transparent 70%);
  animation: ripple-anim 0.5s ease-out forwards;
}
@keyframes ripple-anim{
  0%{ transform: scale(0.3); opacity:1; }
  100%{ transform: scale(1.8); opacity:0; }
}

/* ---------- 우측: 명령 + 로그 ---------- */
.side-panel{ width: 280px; flex-shrink:0; }

.cmd-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  padding: 0 14px 10px;
}
.cmd-btn{
  font-family: var(--font-ui); font-size:11.5px; font-weight:600;
  padding: 9px 6px; border-radius:7px;
  border:1px solid var(--border); background: var(--panel-2); color: var(--text);
  cursor:pointer;
}
.cmd-btn:hover{ border-color: var(--accent); color: var(--accent-strong); }
.cmd-btn.active{ border-color: var(--accent); background: var(--accent); color: #fff; }

.screenshot-preview{
  padding: 0 14px 10px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.screenshot-preview img{
  width:64px; height:36px; object-fit:cover;
  border-radius:5px; border:1px solid var(--border);
}

.log-title{ border-top:1px solid var(--border); padding-top:13px; }

.log-list{
  flex:1; overflow-y:auto;
  padding: 0 14px 14px;
  display:flex; flex-direction:column; gap:6px;
  font-family: var(--font-mono); font-size:10.5px;
}
.log-entry{
  border-left: 2px solid var(--border);
  padding: 4px 8px;
  color: var(--text-dim);
  line-height:1.5;
}
.log-entry .log-time{ color: var(--text-faint); margin-right:6px; }
.log-entry .log-tag{
  display:inline-block; font-weight:700; margin-right:6px;
  padding: 0 4px; border-radius:3px; font-size:9.5px;
}
.log-entry.tag-tap .log-tag{ background: var(--accent-soft); color: var(--accent-strong); }
.log-entry.tag-swipe .log-tag{ background: rgba(111,163,232,0.18); color:#3d6fb0; }
.log-entry.tag-cmd .log-tag{ background: rgba(176,71,59,0.13); color: var(--danger); }
.log-entry.tag-sys .log-tag{ background: rgba(62,142,115,0.13); color: var(--online); }

/* 스크롤바 공통 */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius:3px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ---------- 로그인 화면 ---------- */
.login-body{ height:100%; }
.login-screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 18% 20%, rgba(47,95,163,0.07), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(47,95,163,0.06), transparent 45%);
  padding: 24px;
}
.login-card{
  width: 100%; max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(44,42,35,0.02), 0 24px 48px -28px rgba(44,42,35,0.35);
  padding: 32px 28px 26px;
}
.login-brand{ display:flex; align-items:center; gap:9px; justify-content:center; }
.login-sub{
  text-align:center; margin: 10px 0 26px;
  font-size:12px; color: var(--text-faint);
}

.login-form{ display:flex; flex-direction:column; gap:14px; }
.login-field{ display:flex; flex-direction:column; gap:6px; }
.login-field span{ font-size:11.5px; font-weight:600; color: var(--text-dim); }
.login-field input{
  padding: 10px 12px; font-size:13px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:8px;
  color: var(--text); font-family: var(--font-ui);
}
.login-field input::placeholder{ color: var(--text-faint); }
.login-field input:focus{ outline:none; border-color: var(--accent); background: var(--panel); }
.login-pw-wrap{ position:relative; }
.login-pw-wrap input{ width:100%; box-sizing:border-box; padding-right:38px; }
.login-pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none; cursor:pointer; font-size:15px; line-height:1; padding:6px; color:var(--text-faint); }
.login-pw-toggle:hover{ color:var(--text-dim); }

.login-row{ display:flex; align-items:center; justify-content:space-between; margin-top:-2px; }
.login-check{ display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-dim); cursor:pointer; }
.login-check input{ accent-color: var(--accent); }

.login-error{
  font-size:11.5px; color: var(--danger);
  background: rgba(176,71,59,0.1);
  border: 1px solid rgba(176,71,59,0.25);
  border-radius:8px; padding: 8px 10px;
}

.login-submit{ width:100%; padding:11px; font-size:13px; border-radius:8px; margin-top:4px; }
.login-submit:disabled{ opacity:0.6; cursor:default; }

.login-footer{
  text-align:center; margin: 18px 0 0;
  font-size:10.5px; color: var(--text-faint);
}

.login-card.is-shaking{ animation: shake-anim 0.4s; }
@keyframes shake-anim{
  0%, 100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(5px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(3px); }
}

/* ---------- 반응형 ---------- */
@media (max-width: 980px){
  .layout{ flex-direction:column; overflow-y:auto; }
  .device-list, .side-panel{ width:100%; }
}

/* ---- 퀵버튼 ---- */
.quick-btns{display:flex;gap:8px;margin-bottom:8px}
.quick-btn{font-family:var(--font-ui);font-size:12px;font-weight:600;padding:7px 14px;border-radius:7px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;transition:border-color 0.15s}
.quick-btn:hover{border-color:var(--accent);color:var(--accent-strong)}

/* ---- 전체화면 모드 ---- */
.control-panel:fullscreen {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
}
.control-panel:fullscreen .canvas-wrap {
  flex: 1;
  min-height: 0;
}
.control-panel:fullscreen .control-footer {
  flex-shrink: 0;
}

/* ---- 반응형 ---- */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .device-list { width: 100%; max-height: 260px; overflow-y: auto; }
  .control-panel { min-height: 420px; }
  .side-panel { display: none; }
  .topbar { flex-wrap: wrap; gap: 6px; }
  .topbar-device { order: 3; width: 100%; }
}
@media (max-width: 600px) {
  .topbar-brand .brand-text { display: none; }
  .quick-btns { flex-wrap: wrap; }
  .control-toolbar { flex-direction: column; gap: 6px; }
}

.file-transfer-box{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--panel-2);border-radius:8px;margin-bottom:10px}
.file-transfer-box input[type="file"]{font-size:12px;color:var(--text-faint)}
.file-transfer-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-faint);cursor:pointer}

.file-drop-zone{border:1.5px dashed var(--border);border-radius:8px;padding:48px 10px;min-height:80px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--text-faint);cursor:pointer;transition:border-color 0.15s,background 0.15s}
.file-drop-zone:hover{border-color:var(--accent)}
.file-drop-zone.is-dragover{border-color:var(--accent);background:var(--panel-2);color:var(--accent-strong)}

.ss-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:999}
.ss-modal-overlay.hidden{display:none}
.ss-modal{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;gap:12px;align-items:center}
.ss-modal img{max-width:90vw;max-height:78vh;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.ss-modal-actions{display:flex;gap:8px}
.screenshot-preview img{cursor:pointer}

.ss-thumb-wrap{position:relative;display:inline-block}
.ss-thumb-del{position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:16px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;font-size:13px;cursor:pointer;opacity:0;transition:opacity 0.15s}
.ss-thumb-wrap:hover .ss-thumb-del{opacity:1}

/* ── 모니터 탭 (Windows) ── */
.monitor-tabs{display:flex;gap:6px;padding:7px 14px;background:var(--panel-2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.monitor-tabs.hidden{display:none}
.monitor-tab{font-family:var(--font-ui);font-size:12px;font-weight:600;padding:5px 13px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;}
.monitor-tab:hover{border-color:var(--accent);color:var(--accent-strong);}
.monitor-tab.active{border-color:var(--accent);background:var(--accent);color:#fff;}
.monitor-tab.full{color:var(--text-sub);font-weight:500;}
.monitor-tab.full.active{color:#fff;}

/* ── 유틸리티: 안내/결과 메시지 박스 (성공/오류/경고) ── */
.msg-box{display:none;margin-top:24px;padding:20px;border-radius:10px;font-size:15px;line-height:1.7}
.msg-box.show{display:block}
.msg-box.success{background:var(--success-bg);color:var(--success)}
.msg-box.danger{background:var(--danger-bg);color:var(--danger)}
.msg-box.warning{background:var(--warning-bg);color:var(--warning)}
.empty-hint{text-align:center;color:var(--text-faint)}

/* ── 유틸리티: 관리자 페이지 반복 패턴 ── */
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-header h4{margin:0}
.text-faint-sm{color:var(--text-faint);font-size:11px}
.row-actions{display:flex;gap:6px}

.text-faint{color:var(--text-faint)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-warning{color:var(--warning)}
.text-faint-md{color:var(--text-faint);font-size:12.5px}

/* ── 유틸리티: 확인 모달 (회원탈퇴 등) ── */
.confirm-fab-group{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;gap:8px}
.confirm-fab{background:#fff;color:var(--danger);border:1px solid #f0c0c0;padding:8px 14px;border-radius:20px;font-size:12px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.confirm-fab.confirm-fab-neutral{color:#0d47a1;border-color:#c9d9f0}
.confirm-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:901}
.confirm-modal-overlay.show{display:flex}
.confirm-modal-box{background:#fff;border-radius:12px;padding:28px;width:340px;max-width:90vw}
.confirm-modal-box h3{margin:0 0 10px;font-size:16px}
.confirm-modal-desc{font-size:13px;color:#666;line-height:1.6}
.confirm-modal-code-line{font-size:13px;margin:10px 0 6px}
.confirm-modal-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;border:1px solid #ddd;font-size:14px}
.confirm-modal-msg{font-size:12.5px;color:var(--danger);margin:8px 0;display:none}
.confirm-modal-msg.show{display:block}
.confirm-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btn-outline-sm{padding:8px 16px;border-radius:8px;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn-danger-sm{padding:8px 16px;border-radius:8px;border:none;background:var(--danger);color:#fff;cursor:pointer}
.table-wrap{overflow-x:auto}