/* ===== 원격 조사 연결 막대 (원격 데스크톱의 연결 막대처럼 화면 위 가운데) ===== */
.remote-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px 0 8px;
  background: rgba(32, 36, 44, 0.95);
  color: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  user-select: none;
}

html[data-shell="mac"] .remote-bar { top: 24px; border-radius: 8px; margin-top: 4px; }

.rb-icon svg { width: 18px; height: 18px; }
.rb-text { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rb-label { font-weight: 700; color: #ffd166; }
.rb-target { color: #e6edf3; }
.rb-rec { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #9ca3af; margin-left: 6px; white-space: nowrap; }
.rb-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: rb-blink 1.4s infinite; }
@keyframes rb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.rb-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 11.5px;
}
.rb-btn:hover { background: rgba(255, 255, 255, 0.14); }
.rb-close { border-color: #ef4444; color: #ffb4b4; }
.rb-close:hover { background: #ef4444; color: #fff; }

/* 연결 막대가 창 제목·단추와 바탕화면 아이콘·위젯을 가리지 않게 그만큼 내린다 */
html.is-remote[data-shell="windows"] .window-layer { top: 30px; }
html.is-remote .desktop-icons { top: 36px; }
html.is-remote .todo-widget { top: 38px; }
html.is-remote[data-shell="mac"] .window-layer { top: calc(var(--menubar-h) + 36px); }
html.is-remote[data-shell="mac"] .desktop-icons { top: 40px; }

/* 원격 접속 중에는 바탕화면 가장자리에 띠를 두른다 */
html.is-remote .desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(255, 209, 102, 0.75);
}

/* ===== 연결 연출 ===== */
.remote-overlay {
  position: fixed;
  inset: 0;
  z-index: 16000;
  background: rgba(10, 14, 20, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6edf3;
}
.ro-box { width: min(460px, calc(100vw - 24px)); padding: 26px 30px; background: #161b22; border: 1px solid #30363d; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.ro-spinner { width: 28px; height: 28px; border: 3px solid #30363d; border-top-color: #ffd166; border-radius: 50%; animation: ro-spin 0.9s linear infinite; margin-bottom: 14px; }
@keyframes ro-spin { to { transform: rotate(360deg); } }
.ro-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.ro-lines { font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.7; color: #9ca3af; min-height: 60px; }

/* ===== 바탕화면 색 (PC 마다 다르게) =====
   조사 대상 PC 는 셸(윈도·맥) 기본 배경보다 앞서야 해서 html[data-shell] 을 붙인다. 내 PC(audit)는 셸 기본 배경을 그대로 쓴다. */
html[data-wallpaper="audit"] .desktop {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(150deg, #1b2a41 0%, #24405e 50%, #2e5c86 100%);
}
html[data-wallpaper="green"] .desktop,
html[data-shell][data-wallpaper="green"] .desktop {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(150deg, #0f3d2e 0%, #1e6b4f 55%, #3aa17a 100%);
}
html[data-wallpaper="pink"] .desktop,
html[data-shell][data-wallpaper="pink"] .desktop {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(150deg, #5b2a4f 0%, #9b4d7f 55%, #e08ab4 100%);
}
html[data-wallpaper="orange"] .desktop,
html[data-shell][data-wallpaper="orange"] .desktop {
  background:
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(150deg, #5a2d0c 0%, #b4581a 55%, #f0a04b 100%);
}
html[data-wallpaper="navy"] .desktop,
html[data-shell][data-wallpaper="navy"] .desktop {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(150deg, #0b1d3a 0%, #16366b 55%, #2b5aa8 100%);
}
html[data-wallpaper="teal"] .desktop,
html[data-shell][data-wallpaper="teal"] .desktop {
  background:
    radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(150deg, #0c3b40 0%, #17686e 55%, #3aa3a3 100%);
}