/* ============ 떠 있는 패널 (HUD) ============
 *
 * z-index 200 인 이유:
 *   모달 오버레이가 100 이라 그 아래면 학습 화면에서 가려진다.
 *   로그인 게이트는 999 — 로그인 전에 이게 보이면 안 되므로 그 아래에 둔다.
 */

/* ---- 나브 레일 스톱워치 토글 ---- */
/*
   집중 토글(◉) 과 같은 자리·같은 성격이지만 색을 달리한다.
   붉은색은 "카메라가 켜져 있다"는 뜻으로 이미 쓰고 있어서,
   그 신호를 흐리면 안 된다.
*/
.nav-stopwatch {
  border-top: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 4px;
  padding-top: 4px;
  font-size: 15px;
}
.nav-stopwatch.on {
  opacity: 1;
  color: var(--success, #a3d9c0);
  background: var(--success-bg, rgba(163, 217, 192, 0.12));
  border-color: var(--success, #a3d9c0);
}

.hud {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 190px;
  z-index: 200;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  font-size: 12px;
}
.hud[hidden] { display: none; }

/* 잡고 끄는 손잡이. 여기만 드래그를 받는다 —
 * 패널 전체를 잡히게 하면 버튼을 누르려다 옮기게 된다. */
.hud-grip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: var(--bg-elev-2, rgba(255, 255, 255, 0.04));
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
}
.hud-grip:active { cursor: grabbing; }
.hud-grip-dots { color: var(--text-muted); font-size: 13px; line-height: 1; }
.hud-grip-title {
  flex: 1;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-mini {
  width: 18px;
  height: 18px;
  line-height: 1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
}
.hud-mini:hover { color: var(--text-primary); }

/* 드래그하는 동안 글자가 파랗게 잡히는 것을 막는다 */
body.hud-dragging { user-select: none; }
body.hud-dragging .hud { cursor: grabbing; }

.hud-cam {
  line-height: 0;
  background: #000;
  border-bottom: 1px solid var(--border);
}
/* 영상은 31-focus-engine.js 가 만든 요소를 그대로 옮겨 담는다.
 * 거울처럼 뒤집는 규칙은 11-focus.css 의 .focus-cam-video 가 이미 갖고 있다. */
.hud-cam .focus-cam-video { width: 100%; display: block; }
/* HUD 안에서는 미리보기 자체를 닫는 × 대신 손잡이의 ▾ 를 쓴다 */
.hud-cam .focus-cam-hide { display: none; }

.hud-loading {
  padding: 10px 9px;
  color: var(--text-muted);
  font-size: 11px;
}

.hud-section {
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
}
.hud-section:last-child { border-bottom: none; }

.hud-state {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 6px;
  white-space: nowrap;
}
.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  color: var(--text-muted);
  font-size: 11px;
}
.hud-row b {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.hud-btn {
  width: 100%;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
}
.hud-btn:hover { background: var(--bg-elev); color: var(--text-primary); }
.hud-btn.primary { border-color: var(--accent, #a3d9c0); color: var(--accent, #a3d9c0); }

/* 스톱워치 — 초가 흐르는 게 보여야 계속 앉아 있게 된다 */
.hud-sw-time {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-align: center;
  padding: 2px 0 4px;
  font-variant-numeric: tabular-nums;
}
/* 멈춰 있으면 흐릿하게 — 돌고 있는지 한눈에 구분돼야 한다 */
.hud-sw-time.paused { color: var(--text-muted); }
.hud-sw-actions { display: flex; gap: 6px; }
.hud-sw-actions .hud-btn { margin-top: 0; }
.hud-note {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  /* 레일이 가로로 눕는 화면에서는 구분선도 왼쪽으로 (nav-focus 와 같은 처리) */
  .nav-stopwatch {
    border-top: none;
    border-left: 1px solid var(--border);
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  /* 나브 레일이 아래에 깔리는 화면에서는 그 위로 띄운다 */
  .hud { width: 160px; bottom: 68px; }
  .hud-sw-time { font-size: 20px; }
}