:root {
  --bg: #12151c;
  --panel: #1e2330;
  --border: #2a3044;
  --accent: #4b8df8;
  --success: #34d399;
  --warn: #fbbf24;
  --text: #dde3ee;
  --text-dim: #6b7a99;
  --canvas-bg: #0a0c12;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--canvas-bg);
  overflow: hidden;
  font-family: "Segoe UI", -apple-system, sans-serif;
}

/* 스크롤 모드: JS가 html/body 모두에 이 클래스를 추가해 스크롤 허용 */
/* screenWrapper:
   - fit 모드  : display:contents → 래퍼가 박스를 생성하지 않음, canvas가 body 직속 자식처럼 동작
   - scroll 모드: display:block(fixed) → 독립 스크롤 컨테이너, topHScroll과 연동 */
#screenWrapper {
  display: contents;
}
html.scroll-mode #screenWrapper {
  display: block;
  position: fixed;
  top: 14px; left: 0; right: 0; bottom: 0;
  overflow: auto;
  background: var(--canvas-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
html.scroll-mode #screenWrapper::-webkit-scrollbar { width: 8px; height: 8px; }
html.scroll-mode #screenWrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

#screen {
  position: absolute;
  top: 0; left: 0;
  /* fit 모드 기본: CSS width/height로 창을 꽉 채움 */
  width: 100%; height: 100%;
  background: var(--canvas-bg);
  cursor: none;
}
/* scroll 모드: CSS width/height를 제거해 canvas의 픽셀 크기(원본 해상도)로 표시 */
body.scroll-mode #screen {
  position: static;
  width: auto !important;
  height: auto !important;
  display: block;
}

#hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}

#cursorImg {
  position: fixed;    /* viewport 기준 — getBoundingClientRect()와 좌표계 일치 */
  pointer-events: none;
  display: none;
  z-index: 50;
  image-rendering: pixelated;
}

/* 원격 PC 실제 커서 — 주황색 반투명으로 구분 */
#remoteCursorImg {
  position: fixed;
  pointer-events: none;
  display: none;
  z-index: 9999;
  image-rendering: auto;
  opacity: 0.85;
}

/* 상단 수평 스크롤바 — scroll 모드에서 window 가로 스크롤을 미러링 */
#topHScroll {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 99;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--panel);
}
#topHScroll::-webkit-scrollbar { height: 10px; }
#topHScroll::-webkit-scrollbar-track { background: var(--panel); }
#topHScroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
#topHScrollInner { height: 1px; }  /* 넓이는 JS가 canvas 크기에 맞게 동적으로 설정 */

/* ── 플로팅 툴바 ─────────────────────────────────────────────────────── */
#toolbar {
  position: fixed;   /* scroll 모드에서 스크롤해도 툴바는 항상 보임 */
  top: 0; left: 0;   /* 좌상단에 여백 없이 붙임 */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 0;   /* 좌상단은 직각, 나머지만 둥글게 */
  z-index: 100;
  user-select: none;
}

/* 드래그 핸들 — 툴바 맨 위 얇은 띠, 여기를 잡고 이동 */
#toolbarDragHandle {
  height: 7px;
  border-radius: 6px 6px 0 0;
  cursor: move;
  background: repeating-linear-gradient(
    90deg, var(--border) 0 6px, transparent 6px 12px
  );
}
#toolbarDragHandle:hover { background-color: rgba(75,141,248,0.15); }

#toolbarRow {
  display: flex;
  align-items: center;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}

#toolbarContent {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  padding: 4px 6px;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  flex: 1 1 0;
  min-width: 0;
}
/* toolbarContent 내 버튼 공통 기본 스타일 */
#toolbarContent button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#toolbarContent button:hover { background: var(--border); }
#toolbarContent::-webkit-scrollbar { height: 4px; }
#toolbarContent::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ✕ 버튼 — toolbarRow 오른쪽 끝 고정, 스크롤 영역에 묻히지 않음 */
.close-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  font-weight: bold;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.close-btn:hover { background: #d9534f; color: #fff; }

/* 가장 왼쪽: 로고 겸 최소화/펼치기 토글 버튼 (항상 보임) */
.logo-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: bold;
  font-size: 13px;
  padding: 6px 10px 6px 8px;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
}
.logo-btn:hover { background: var(--border); }

.pc-label-text {
  color: #fbbf24;
  font-size: 12px;
  font-weight: bold;
  padding-right: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.pc-label-text:hover { opacity: 0.8; }

/* ── 가상 키보드 패널 (드래그 이동 가능 플로팅 패널) ────────────────────── */
#keyPanel {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;     /* JS에서 scale() 로 좁은 화면에 맞춤 */
  background: #1a1e2b;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 2px 6px;
  z-index: 200;
  user-select: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7);
  touch-action: none;
  box-sizing: border-box;
  overflow: hidden;  /* 내용 넘침 방지 */
}
/* 드래그 핸들 */
.kpb-drag {
  height: 24px;
  background: #2c3147;
  border-radius: 10px 10px 0 0;
  cursor: move;
  display: flex; align-items: center; justify-content: center;
  margin: 0 -2px 3px;
  position: relative;
}
.kpb-drag::after {
  content: ""; width: 36px; height: 3px;
  background: #4a527a; border-radius: 2px;
}
/* 드래그 핸들 내 패널 닫기 버튼 */
.kpb-panel-close {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none;
  color: #6b7a99; font-size: 14px;
  cursor: pointer; padding: 2px 6px;
  line-height: 1;
}
.kpb-panel-close:hover { color: #f87171; }
/* 상태 힌트 */
.kp-mod-hint {
  flex: 1; min-width: 0;
  color: var(--accent); font-size: 9px;
  font-family: Consolas, monospace; text-align: center;
  overflow: hidden;
}
.kp-action-btn {
  background: var(--border); color: var(--text);
  border: none; border-radius: 5px;
  padding: 4px 6px; font-size: 13px; cursor: pointer;
  flex-shrink: 0; min-width: 28px;
}
/* 데스크탑(마우스)에서만 hover 색상 — 모바일 탭 후 hover 잔류 방지 */
@media (hover: hover) and (pointer: fine) {
  .kp-action-btn:hover { background: var(--accent); color: #fff; }
}
/* 활성 상태: 배경색만 accent, 아이콘 그대로 */
.kp-action-btn.kp-active { background: var(--accent) !important; color: #fff !important; }
/* X 버튼: 항상 표시, 비활성 시 흐릿하게 */
.kp-kb-close { opacity: 0.45; }
.kp-kb-close.kp-active-close { opacity: 1; }

/* 수식키 (Ctrl/Alt — 인라인 토글) */
.kp-mod.kp-active { background: var(--accent) !important; color: #fff !important; }

/* Shift 버튼 (인라인) */
.kp-shift-btn { font-size: 13px !important; }
.kp-shift-btn.kp-active { background: #f59e0b !important; color: #000 !important; border-color: #f59e0b !important; }

/* Caps 버튼 (인라인) */
.kp-caps-btn { font-size: 8px !important; }
.kp-caps-btn.kp-active { background: #10b981 !important; color: #fff !important; border-color: #10b981 !important; }

/* 키 행 */
.kp-row {
  display: flex; gap: 2px; margin-bottom: 2px;
  justify-content: center;
}
.kp-toprow { justify-content: flex-start; gap: 2px; overflow: hidden; }

/* 기본 키 — flex:1 로 행 너비를 균등하게 채움, max-width 로 너무 커지지 않게 제한 */
.kp-key {
  background: #2c3147; color: #dde3ee;
  border: 1px solid #3a4060; border-bottom: 2px solid #1a1e2b;
  border-radius: 4px;
  height: 34px; min-width: 0;  /* min-width:0 으로 flex shrink 허용 */
  font-size: clamp(9px, 2.8vw, 11px); font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  flex: 1;           /* 같은 행 내에서 균등 분배 */
  max-width: 34px;   /* 너무 넓어지지 않도록 */
  padding: 0; line-height: 1; touch-action: manipulation;
  box-sizing: border-box;
  overflow: hidden;  /* 내용 넘침 방지 */
}
.kp-key:active { background: var(--accent); color: #fff; }
.kp-key s { font-size: 7px; color: #6b7a99; text-decoration: none; line-height: 1.1; }
#keyPanel.kp-shifted .kp-key s { color: #fbbf24; }

/* 특수 너비 키 — max-width 만 지정, flex:1 은 유지해서 좁은 화면에서 자동 축소 */
.kp-bksp  { flex: 1.8; max-width: 52px; font-size: 14px; }
.kp-tab   { flex: 1.5; max-width: 46px; font-size: 9px; }
.kp-esc   { flex: 1.2; max-width: 38px; font-size: 9px; color: #f87171; }
.kp-fn    { flex: 1;   max-width: 32px; font-size: 9px; color: #93c5fd; }
.kp-nav   { flex: 1;   max-width: 32px; font-size: 8px; color: #a3e4d7; }
.kp-enter { flex: 3;   max-width: 96px; font-size: 14px; color: #34d399; }  /* legacy */
.kp-space { flex: 3.5; max-width: 130px; }
.kp-arr   { flex: 1;   max-width: 30px; font-size: 12px; }
.kp-ctrl  { flex: 1.3; max-width: 42px; font-size: 10px; }
.kp-alt   { flex: 1.1; max-width: 36px; font-size: 10px; }
.kp-hany  { flex: 1.4; max-width: 44px; font-size: 9px; color: #fbbf24; font-weight: bold; }
.kp-hany.kp-active { background: #fbbf24 !important; color: #000 !important; }
.kp-shift-btn { flex: 1.5 !important; max-width: 48px !important; }
.kp-caps-btn  { flex: 1.6 !important; max-width: 50px !important; }
.kp-bottom { gap: 2px; }
/* Row 3+4 컨테이너: Enter가 두 줄에 걸쳐 확장 */
.kp-rows34 {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}
.kp-rows34-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kp-rows34-left .kp-row { margin-bottom: 0; }

/* 세로 Enter 버튼 — 두 줄 높이 (34px × 2 + gap 2px) */
.kp-enter-tall {
  flex: none !important;
  width: 46px;
  height: calc(34px * 2 + 2px);
  max-width: none !important;
  font-size: 13px;
  color: #34d399;
  align-self: stretch;
  flex-direction: column;
  gap: 2px;
}

.kpb-top {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 5px; padding: 0 2px; flex-wrap: wrap;
}
.kp-mod-hint {
  flex: 1; color: var(--accent); font-size: 11px;
  font-family: Consolas, monospace; padding: 0 4px;
}
.kp-mod {
  background: #2c3147; color: var(--text);
  border: 1px solid #3a4060; border-radius: 5px;
  padding: 5px 9px; font-size: 11px; font-weight: bold;
  cursor: pointer; min-width: 44px;
  transition: background .12s, color .12s;
}
.kp-mod:hover             { background: var(--border); }
.kp-mod.kp-active         { background: var(--accent) !important; color: #fff !important; }
.kp-shift-btn, .kp-caps-btn {
  background: #2c3147; color: var(--text);
  border: 1px solid #3a4060; border-radius: 5px;
  padding: 5px 9px; font-size: 11px; font-weight: bold;
  cursor: pointer; min-width: 52px;
}
.kp-shift-btn.kp-active { background: #f59e0b; color: #000; border-color: #f59e0b; }
.kp-caps-btn.kp-active  { background: #10b981; color: #fff; border-color: #10b981; }
.kp-action-btn {
  background: var(--border); color: var(--text);
  border: none; border-radius: 5px;
  padding: 5px 9px; font-size: 14px; cursor: pointer;
}

.kp-row {
  display: flex; gap: 3px; margin-bottom: 3px;
  justify-content: center;
}
.kp-key {
  background: #2c3147; color: #dde3ee;
  border: 1px solid #3a4060; border-bottom: 2px solid #1a1e2b;
  border-radius: 5px; min-width: 26px; height: 36px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; flex: 1; max-width: 36px; padding: 0;
  line-height: 1; touch-action: manipulation;
}
.kp-key:active { background: var(--accent); color: #fff; }
.kp-key s { font-size: 7px; color: #6b7a99; text-decoration: none; line-height: 1.2; }
#keyPanel.kp-shifted .kp-key s { color: #fbbf24; }
.kp-bksp  { flex:1.8; max-width:54px; font-size:15px; }
.kp-tab   { flex:1.5; max-width:46px; font-size:10px; }
.kp-esc   { flex:1.5; max-width:46px; font-size:10px; color:#f87171; }
.kp-enter { flex:2;   max-width:62px; font-size:10px; color:#34d399; }
.kp-space { flex:4;   max-width:150px; }
.kp-arr   { flex:1;   max-width:33px; font-size:13px; }
.kp-nav   { flex:1.2; max-width:38px; font-size:9px; }
.kp-bottom { gap:3px; }


.sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
}

#toolbar button {
  background: var(--panel);
  color: var(--text);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
#toolbar button:hover { background: var(--border); }

#btnFullscreen {
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  min-width: 28px;
  padding: 4px 6px;
}
#btnFullscreen:hover { background: #3a7ae0; }

/* 📋 클립보드 동기화 버튼 */
#btnClipboard {
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-width: 28px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
#btnClipboard:hover { background: var(--border); }
#btnClipboard:active { background: var(--accent); color: #fff; }

#btnConnToggle.connected {
  background: #d9534f;
  color: #fff;
}
#btnConnToggle.connected:hover { background: #c9302c; }
#btnConnToggle:not(.connected) {
  background: var(--accent);
  color: #fff;
}
#btnConnToggle:not(.connected):hover { background: #3a7ae0; }

.slider-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 12px;
}
.slider-label input[type="range"] { width: 80px; }
.slider-label .val {
  color: var(--accent);
  font-weight: bold;
  font-size: 12px;
  min-width: 28px;
  display: inline-block;
}

.chk {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

#monitorSelect {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  padding: 3px;
}

.status { color: var(--text-dim); font-size: 12px; }
.ping   { color: var(--success); font-family: Consolas, monospace; font-size: 12px; }
.traffic{ color: var(--warn);    font-family: Consolas, monospace; font-size: 12px; }

/* 최소화 상태: 컨트롤 영역만 숨기고, 좌측 토글 버튼(로고)은 항상 노출 */
#toolbar.minimized #toolbarContent { display: none; }
#toolbar.minimized .close-btn      { display: none; }
#toolbar.minimized .logo-btn { border-radius: 4px; }

/* ── 로그인 / PC 선택 화면 ───────────────────────────────────────────── */
.hidden { display: none !important; }

#loginScreen, #pcScreen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10, 12, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.auth-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
  width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.pc-box { width: 720px; max-height: 90vh; overflow-y: auto; }


.connect-title {
  color: var(--accent);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
}
.connect-sub {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  margin-bottom: 20px;
}
.connect-field {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 14px;
}
.connect-field input {
  display: block;
  width: 100%;
  margin-top: 5px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
}
.connect-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.connect-btn {
  width: 100%;
  margin-top: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.connect-btn:hover { background: #3a7ae0; }
.connect-error {
  color: #f87171;
  font-size: 12px;
  margin-top: 10px;
  min-height: 14px;
  text-align: center;
}

.download-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}
.download-link:hover { text-decoration: underline; }
.auth-switch {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 14px;
}
.auth-switch a { color: var(--accent); text-decoration: none; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }

.pc-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  max-height: 60vh;
  min-height: 60px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* 3열 그리드 — 단일 PC 카드들을 3개씩 배치 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: start;
}
.pc-list::-webkit-scrollbar { width: 5px; }
.pc-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.pc-list .pc-empty {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  grid-column: 1 / -1;   /* 빈 상태 메시지는 전체 너비 */
}

/* 단일 모니터 PC 카드 */
.pc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 0;
  position: relative;
}
.pc-item:hover { border-color: var(--accent); }
.pc-item.pc-offline { opacity: 0.55; cursor: not-allowed; }
.pc-item.pc-offline:hover { border-color: var(--border); }

/* 복수 모니터 PC: 그룹 전체가 3열을 모두 차지하는 래퍼 */
.pc-group-row {
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 40px;
  box-sizing: border-box;
}
/* PC명 헤더: 왼쪽 고정 영역 */
.pc-group-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 120px;
  max-width: 200px;
}
.pc-group-header .pc-name  { color: var(--accent); font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-group-header .pc-addr  { display: none; }  /* 1줄 배치에서 활성수 숨김 */

/* 모니터 목록: 오른쪽 가로 배치 */
.pc-monitor-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 0;
}
.pc-item-monitor {
  flex: 1;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  margin: 0;
  padding: 0 12px;
  height: 100%;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.pc-item-monitor:last-child { border-right: none; }
.pc-item-monitor:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.pc-item-monitor.pc-offline { opacity: 0.55; cursor: not-allowed; }
.pc-item-monitor.pc-offline:hover { background: var(--bg); }
.pc-item-monitor .pc-name { font-weight: bold; }

.pc-item .pc-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pc-item .pc-name  { color: var(--text); font-size: 13px; font-weight: bold; }
.pc-item .pc-addr  { color: var(--text-dim); font-size: 11px; font-family: Consolas, monospace; }
.pc-item .pc-del,
.pc-group-header .pc-del {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  align-self: flex-start;
}
.pc-item .pc-del:hover,
.pc-group-header .pc-del:hover { color: #f87171; }

.pc-add-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.pc-add-row input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 8px;
  font-size: 12px;
  min-width: 0;   /* 입력 필드의 기본 min-width 때문에 flex 박스가 넘치는 문제 방지 */
}
.pc-add-row input#pcLabel { flex: 1.3 1 0; }
.pc-add-row input#pcHost  { flex: 1.3 1 0; }
.pc-add-row input#pcPort  { flex: 0 0 52px; width: 52px; text-align: center; padding: 7px 4px; }
.pc-add-row button {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.pc-add-row button:hover { background: #3a7ae0; }

.link-btn {
  display: block;
  margin: 18px auto 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: var(--text); }

.target {
  color: var(--text);
  font-size: 12px;
  font-family: Consolas, monospace;
}
#btnChangeTarget, #btnLogout {
  font-size: 11px;
  padding: 3px 6px;
}

/* 전체화면 모드: 스크롤바 완전 제거, 캔버스가 화면 전체를 채움 */
:fullscreen body,
:-webkit-full-screen body,
:-moz-full-screen body {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}
:fullscreen #screenWrapper,
:-webkit-full-screen #screenWrapper,
:-moz-full-screen #screenWrapper {
  display: contents !important;  /* fit 모드 강제 */
}
:fullscreen #screen,
:-webkit-full-screen #screen,
:-moz-full-screen #screen {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
}
:fullscreen #topHScroll,
:-webkit-full-screen #topHScroll,
:-moz-full-screen #topHScroll {
  display: none !important;
}

/* ── 파일 전송 토스트 ──────────────────────────────────────── */
#fileToast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  z-index: 300;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 440px;
}
#fileToast.hidden { display: none; }
#fileToast .toast-msg { flex: 1; }
#fileToast button {
  padding: 4px 10px;
  font-size: 12px;
  background: var(--accent);
  color: #fff;
  border: none; border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
#fileToast .toast-close {
  background: none; color: var(--text);
  border: none; cursor: pointer;
  font-size: 14px; padding: 0 4px;
}

/* 원격 화면 파일 드래그 오버레이 */
#screenWrapper.file-drag-over::after {
  content: "📁 파일을 놓으면 원격 Desktop에 저장됩니다";
  position: absolute;
  inset: 0;
  background: rgba(74,144,226,.25);
  border: 3px dashed var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 10;
}

/* 📁 버튼 — 파일 대기 배지 */
#btnFileTransfer { position: relative; }
#btnFileTransfer.has-file {
  background: var(--accent) !important;
  color: #fff !important;
  animation: pulse-file 1.5s ease-in-out infinite;
}
#btnFileTransfer.has-file::after {
  content: "●";
  position: absolute;
  top: -3px; right: -3px;
  font-size: 8px;
  color: #f55;
  line-height: 1;
}
@keyframes pulse-file {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

/* ── toolbarFixed: 항상 보이는 버튼 그룹 ─── */
#toolbarFixed {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 0 4px;
  border-left: 1px solid var(--border);
}
#toolbarFixed button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 26px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
#toolbarFixed button:hover { background: var(--border); }
#toolbar.minimized #toolbarFixed { display: none; }

/* PC 상하 이동 버튼 */
.pc-move-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-right: 6px;
  flex-shrink: 0;
}
.pc-move {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 9px;
  padding: 1px 4px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.6;
}
.pc-move:hover { background: var(--border); opacity: 1; }

/* 원격 클립보드 수신 시 복사 버튼 강조 */
.cb-has-remote {
  color: #4ade80 !important;
  animation: cb-pulse 1.5s ease-in-out infinite;
}
@keyframes cb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}