/* 세이프존 드래그 편집 박스 — js/zone-box.js 가 만드는 노드의 스타일.
   조회 확대 드로어(mockup-zoom.js)가 쓴다(데이터 관리의 세이프존 하위 탭은 제거).
   부모(스테이지)는 각 모드가 자기 CSS에서 position:relative 를 준다. */
.zone-box{
  position:absolute;border:2px solid var(--primary);background:rgba(27,111,183,.18);
  cursor:move;box-sizing:border-box;
}
/* "조정 모드"가 꺼진 상태 — 위치만 보여주고 드래그/리사이즈/라운드 조절은 막는다.
   허브의 zoom-highlight 펄스처럼 테두리 링이 반복해서 퍼지며 사라져 눈에
   띄게 한다 — 조정 모드를 켜면(.not-editable 이 빠지면) 자동으로 멈춘다. */
.zone-box.not-editable{cursor:default;background:rgba(27,111,183,0);animation:zonePulse 2s ease-in-out infinite}
.zone-box.not-editable .zone-box-handle,
.zone-box.not-editable .zone-box-radius-handle{display:none}
@keyframes zonePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(27,111,183,.5)}
  50%{box-shadow:0 0 0 8px rgba(27,111,183,0)}
}
.zone-box-handle{
  position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;
  border:2px solid var(--bg);border-radius:3px;background:var(--primary);cursor:nwse-resize;
}
/* 모서리 라운드 조절 핸들 — 좌상단, 곡선이 시작하는 지점을 js가 계산해 배치한다. */
.zone-box-radius-handle{
  position:absolute;width:11px;height:11px;transform:translate(-50%,-50%);
  border:2px solid var(--bg);border-radius:50%;background:var(--success);cursor:nwse-resize;
}

/* 허브의 zoom-highlight 라벨/coord 칩 — showOverlay 를 켠 호출부(확대 드로어)의
   조정 모드에서만 보인다. label 이 빈 문자열이면(데이터 관리 모드) 항상 숨는다. */
.zone-box-label,.zone-box-coord{
  display:none;position:absolute;font-size:11px;font-weight:700;color:#fff;
  background:var(--primary);padding:3px 8px;border-radius:3px;white-space:nowrap;
  line-height:1.4; /* 부모가 line-height:0 인 캔버스(데이터 관리)에서도 글자가 눌리지 않게 */
}
.zone-box-label:empty{display:none}
.zone-box-label{top:-26px;left:0}
.zone-box-coord{
  bottom:-24px;right:0;font-weight:600;font-size:10.5px;
  font-family:'SF Mono',Consolas,monospace;
}
.zone-box.zone-box-overlay-active{border-style:dashed}
.zone-box.zone-box-overlay-active .zone-box-label:not(:empty),
.zone-box.zone-box-overlay-active .zone-box-coord{display:block}