/* ════════════════════════════════════════════════════════════════
 * 5. Undo/Redo + 표시 토글 바 (canvas-container 기준 absolute)
 *    left:8px = 캔버스 좌측 끝에서 8px → 사이드바와 분리
 * ════════════════════════════════════════════════════════════════ */
#undo-bar {
  position: absolute; bottom: 14px; left: 8px;
  z-index: 20; display: flex; gap: 2px;
  /* 버튼이 늘어 모드 바와 겹치지 않도록 두 줄로 접는다 (편집 보조 / 표기·공유·POE) */
  flex-wrap: wrap; width: 300px; row-gap: 6px; align-items: center;
}
/* 원형 버튼 공통 (undo·redo·가시토글 공유) */
.undo-btn, .vis-btn {
  width: var(--btn-size); height: var(--btn-size); border-radius: 18px;
  background: var(--bg-glass); border: 1px solid var(--border-base);
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; backdrop-filter: blur(8px);
}
.undo-btn { font-size: 14px; }
.vis-btn  { font-size: 15px; font-family: var(--font); font-weight: 700; }
.undo-btn:hover:not(:disabled),
.vis-btn:hover:not(.active) { color: var(--text-accent); border-color: var(--border-active); background: var(--btn-h); }
.undo-btn:disabled { opacity: 0.32; cursor: default; }
.vis-btn.active {
  color: var(--text-accent); border-color: var(--border-active);
  background: var(--sel-bg); box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}
.vis-btn .vis-label { display: none; }
#vis-sep { width: 1px; height: 24px; background: var(--border-base); margin: 0 4px; align-self: center; }

/* 표기 전환 버튼 앞 구분선 (#vis-sep 과 같은 모양) */
#vis-sep2 { width: 1px; height: 22px; background: var(--border-base); margin: 0 4px; }
#vis-sep3 { width: 1px; height: 22px; background: var(--border-base); margin: 0 4px; }
#poe-btn { font-size: 10px; letter-spacing: 0.5px; }