// ─── 디버그 패널 ────────────────────────────
function DebugPanel() {
  const [open, setOpen] = useState(false);
  const [tick, setTick] = useState(0);
  const listRef = useRef(null);

  useEffect(() => {
    const cb = () => setTick(n => n + 1);
    _dbgListeners.add(cb);
    return () => _dbgListeners.delete(cb);
  }, []);

  useEffect(() => {
    if (open && listRef.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
  }, [open, tick]);

  return (
    <>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          position: 'absolute', bottom: 80, left: 12, zIndex: 50,
          width: 44, height: 26, borderRadius: 6,
          background: open ? '#1A1814' : 'rgba(26,24,20,0.65)',
          color: '#fff', border: 'none', fontSize: 11, fontWeight: 700,
          fontFamily: 'IBM Plex Mono, monospace', cursor: 'pointer',
          letterSpacing: '0.04em',
        }}
      >DBG</button>
      {open && (
        <div style={{
          position: 'absolute', inset: '56px 0 0 0', zIndex: 49,
          background: 'rgba(10,9,8,0.93)',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '5px 10px', borderBottom: '1px solid #2a2a2a', flexShrink: 0,
          }}>
            <span style={{ color: '#888', fontSize: 11, fontFamily: 'IBM Plex Mono, monospace' }}>
              로그 {_dbgLogs.length}건
            </span>
            <button
              onClick={() => { _dbgLogs.length = 0; setTick(n => n + 1); }}
              style={{
                background: 'none', border: '1px solid #333', borderRadius: 4,
                color: '#888', fontSize: 11, padding: '2px 8px', cursor: 'pointer',
                fontFamily: 'inherit',
              }}
            >지우기</button>
          </div>
          <div ref={listRef} style={{ flex: 1, overflow: 'auto', padding: '6px 10px' }}>
            {_dbgLogs.map((log, i) => (
              <div key={i} style={{
                color: log.level === 'error' ? '#ff6b6b' : log.level === 'warn' ? '#ffd93d' : '#9affb0',
                fontSize: 11, fontFamily: 'IBM Plex Mono, monospace',
                lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
                borderBottom: i < _dbgLogs.length - 1 ? '1px solid #1c1c1c' : 'none',
                paddingBottom: 2,
              }}>
                {log.text}
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  );
}