/* ════════════════════════════════════════════════════════════════
 * 3. 캔버스 무대 + 그 위에 떠 있는 표시 (줌·실행 배지·배속)
 * ════════════════════════════════════════════════════════════════ */
#canvas-wrapper { flex: 1; overflow: hidden; position: relative; background: var(--bg-stage); }

#gridCanvas, #mainCanvas { position: absolute; top: 0; left: 0; display: block; }
#gridCanvas { z-index: 1; }
#mainCanvas { z-index: 2; }

/* 줌 레벨 표시 — 오른쪽 아래 */
#zoom-indicator {
  position: absolute; bottom: 8px; right: 8px; z-index: 5;
  background: var(--bg-glass); color: var(--text-dim);
  font-size: 10px; padding: 3px 7px; border-radius: var(--radius-sm);
  pointer-events: none; border: 1px solid var(--border-base); backdrop-filter: blur(8px);
}

/* 배속·한 스텝 — 오른쪽 아래, 줌 표시 위 (실행·일시정지 중에만 JS 가 보인다) */
.float-btn {
  position: absolute; right: 8px; z-index: 20;
  background: var(--bg-glass) !important; border: 1px solid var(--border-base) !important;
  color: var(--text-accent) !important; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-panel); font-size: 11px !important; padding: 5px 10px !important;
}
#btn-speed { bottom: 36px; }
#btn-step  { bottom: 70px; }

/* 실행 상태 배지 — 상단 중앙 (EDIT 모드에서는 JS가 display:none) */
#run-indicator {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 21;
  display: none; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: var(--radius-pill);
  background: var(--bg-glass); border: 1px solid var(--border-base);
  backdrop-filter: var(--blur); box-shadow: 0 2px 12px rgba(0,0,0,0.14);
  font-size: 11px; letter-spacing: 0.02em; pointer-events: none; white-space: nowrap;
}
#run-indicator .ri-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 8px currentColor; }
#run-indicator .ri-time { color: var(--text-dim); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
#run-indicator.is-running { color: #10b981; border-color: rgba(16,185,129,0.45); }
#run-indicator.is-running .ri-dot { animation: ri-pulse 1.1s ease-in-out infinite; }
#run-indicator.is-paused  { color: #d97706; border-color: rgba(217,119,6,0.45); }
@keyframes ri-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { #run-indicator.is-running .ri-dot { animation: none; } }