/* 공통 스플리터(드래그 리사이저) — 패널 경계에 얹는 얇은 손잡이.
   레이아웃을 밀지 않도록 경계 위에 절대배치하고, 평소에는 보이지 않다가
   마우스를 얹거나 끌 때만 색이 들어온다. */

.ui-resizer {
  position: absolute;
  z-index: 1;
  background: transparent;
  transition: background var(--transition-fast);
  touch-action: none;
}

.ui-resizer:hover,
.ui-resizer.is-dragging {
  background: var(--color-primary);
}

/* 위아래로 끌어 높이를 조절 — 패널 위쪽 경계에 가로로 눕는다. */
.ui-resizer--vertical {
  top: -3px;
  right: 0;
  left: 0;
  height: 6px;
  cursor: ns-resize;
}

/* 좌우로 끌어 폭을 조절 — 패널 왼쪽 경계에 세로로 선다. */
.ui-resizer--horizontal {
  top: 0;
  bottom: 0;
  left: -3px;
  width: 6px;
  cursor: ew-resize;
}