.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: translateX(var(--cursor-x, 0px));
  will-change: transform;
}

.line {
  position: absolute;
  left: -1px;
  top: 991px;
  width: 2px;
  height: 37px;
  background: var(--color-cursor);
  z-index: 40;
  /* 라인을 직접 잡아 드래그 가능하게 */
  pointer-events: auto;
  cursor: ew-resize;
}

.badge {
  position: absolute;
  left: 0;
  /* 패널 상단(스테이지 980) 근처까지 키움 — 위 도구모음과는 안 겹치게 top 은 974 까지만. */
  top: 974px;
  transform: translateX(-50%);
  z-index: 41;
  /* 뱃지를 직접 잡아 드래그 가능하게 (라인과 동일) */
  pointer-events: auto;
  cursor: ew-resize;
  user-select: none;
  background: linear-gradient(180deg, #ff6a35 0%, #f8430d 45%, #ef3c08 100%);
  border-radius: 7px;
  height: 36px;
  min-width: 112px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* "노선밖 737m" 같은 긴 표기도 한 줄 유지 — 글자 축소 + 줄바꿈 금지(폭은 내용에 맞게 늘어남) */
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.45);

  &::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #ef3c08;
  }
}

/* 역방향(km 감소, 하늘색 구간) 통과 시 커서도 동일한 파란색으로 표시 */
.cursor.reverse {
  .line {
    background: #06a4c8;
  }
  .badge {
    background: linear-gradient(180deg, #3fb6d4 0%, #0a9bc0 45%, #067f9e 100%);

    &::after {
      border-top-color: #067f9e;
    }
  }
}
