/**
 * 좌우 칸 사이 조절 바 — 생김새.
 *
 * 움직임과 비율은 split_pane.js 가 맡는다. 여기서는 손잡이만 그린다.
 * 쓰는 쪽은 그리드 가운데 열에 이 바를 놓기만 하면 된다:
 *
 *   grid-template-columns: minmax(240px, var(--split-left, 40%)) 10px minmax(280px, 1fr);
 *
 * 바 자체는 10px 로 얇지만, 손으로 잡기 쉽게 가운데 선 양옆을 여백으로 넓혀
 * 실제로 잡히는 자리를 넓게 둔다(잡기 영역 ≠ 보이는 선).
 */

.split-handle {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;           /* 끌 때 화면이 함께 스크롤되지 않게 */
  -webkit-tap-highlight-color: transparent;
}

/* 보이는 선 — 가운데 1px. 평소에는 옅게 두고 가까이 가면 또렷해진다. */
.split-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--split-line, rgba(127, 127, 127, 0.28));
  transition: background 0.15s ease, width 0.15s ease;
}

/* 잡기 쉽도록 보이는 선보다 넓은 자리를 준다(마우스가 1px 을 겨냥하지 않게). */
.split-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 14px;
  transform: translateX(-50%);
}

.split-handle:hover::before,
.split-handle:focus-visible::before {
  width: 3px;
  background: var(--split-line-active, var(--primary-color, #2563eb));
}

.split-handle:focus-visible {
  outline: none;
}

/* 끄는 동안에는 바를 놓쳐도 선이 살아 있게 호스트가 표시를 단다. */
[data-split-dragging] .split-handle::before {
  width: 3px;
  background: var(--split-line-active, var(--primary-color, #2563eb));
}

/* 끄는 동안 글자가 잡히면 파란 선택 영역이 번진다. */
[data-split-dragging] {
  user-select: none;
  cursor: col-resize;
}

/* 손잡이 가운데의 점 세 개 — 끌 수 있다는 것을 눈으로 알린다. 숨겨 두면 바가 그냥 선으로 보여
   폭을 바꿀 수 있는 줄 모른다(2026-10-15 사용자 지적) — 늘 보이게 두고, 가까이 가면 강조색이 된다. */
.split-handle__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 3px;
  border: 1px solid var(--split-grip-border, rgba(127, 127, 127, 0.28));
  border-radius: 999px;
  background: var(--split-grip-bg, var(--surface-color, #ffffff));
  transition: background 0.15s ease, border-color 0.15s ease;
  pointer-events: none;
}

.split-handle:hover .split-handle__grip,
.split-handle:focus-visible .split-handle__grip,
[data-split-dragging] .split-handle__grip {
  border-color: var(--split-line-active, var(--primary-color, #2563eb));
  background: var(--split-line-active, var(--primary-color, #2563eb));
}

.split-handle__grip span {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--split-grip-dot, rgba(90, 90, 90, 0.75));
}

.split-handle:hover .split-handle__grip span,
.split-handle:focus-visible .split-handle__grip span,
[data-split-dragging] .split-handle__grip span {
  background: #ffffff;
}

[data-theme="dark"] .split-handle__grip span {
  background: var(--split-grip-dot, rgba(210, 210, 210, 0.7));
}

/* 칸이 위아래로 바뀌면 조절할 것이 없다. 열이 하나면 바를 숨긴다.
   (열 수는 쓰는 쪽 CSS 의 중단점이 정한다 — 여기서 너비를 다시 적지 않는다.) */
.split-handle[hidden] {
  display: none;
}