/* 개체 틀 - 동작은 object-frame.js(React판 claude_common/react/components/ObjectFrame.tsx), 규칙은 claude_common/ui/object-frame.md
   고른 개체 둘레 선 + 손잡이 8개(동그라미) + 위쪽 회전 손잡이. 손잡이는 돌린 개체를 따라 돈다 */
.object-frame { position: relative; box-sizing: border-box; user-select: none; touch-action: none; }
.object-frame > img, .object-frame > svg, .object-frame > canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.object-frame.is-selected { outline: 1px solid var(--uk-brand); outline-offset: 0; }
.object-frame.is-movable { cursor: move; }
.object-frame-handle {
  position: absolute; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box;
  border-radius: 50%; background: var(--uk-surface); border: 1.5px solid var(--uk-brand); box-shadow: var(--uk-up-sm);
}
.object-frame-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.object-frame-handle.is-n  { left: 50%; top: 0; cursor: ns-resize; }
.object-frame-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.object-frame-handle.is-e  { left: 100%; top: 50%; cursor: ew-resize; }
.object-frame-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.object-frame-handle.is-s  { left: 50%; top: 100%; cursor: ns-resize; }
.object-frame-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.object-frame-handle.is-w  { left: 0; top: 50%; cursor: ew-resize; }
/* 회전 손잡이: 위 가운데에서 24px 위, 가는 줄기로 잇는다 */
.object-frame-rotate {
  position: absolute; z-index: 2; left: 50%; top: -30px; width: 16px; height: 16px; margin-left: -8px; box-sizing: border-box;
  border-radius: 50%; background: var(--uk-surface); border: 1.5px solid var(--uk-brand); box-shadow: var(--uk-up-sm); cursor: grab;
}
.object-frame-rotate::before { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; margin-left: -0.5px; background: var(--uk-brand); }
.object-frame-rotate::after {
  content: ''; position: absolute; inset: 2px; background: var(--uk-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.object-frame-rotate:active { cursor: grabbing; }
/* 손가락 화면: 손잡이를 크게 */
@media (pointer: coarse) {
  .object-frame-handle { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  .object-frame-rotate { width: 24px; height: 24px; margin-left: -12px; top: -40px; }
  .object-frame-rotate::before { height: 16px; }
}
/* 선 틀: 네모 틀 대신 두 끝점 손잡이 (React판 LineFrame) */
.line-frame { position: absolute; box-sizing: border-box; touch-action: none; cursor: move; }
.line-frame .object-frame-handle.line-end { cursor: crosshair; }
/* 여러 개 고름: 개체마다 가는 선, 감싼 틀 하나에 손잡이 */
.object-frame.is-multi-member { outline: 1px solid var(--uk-brand); outline-offset: 0; }
.object-frame.is-group-box { outline: 1px dashed var(--uk-brand); pointer-events: none; }
.object-frame.is-group-box .object-frame-handle, .object-frame.is-group-box .object-frame-rotate { pointer-events: auto; }
/* 안내선 - 다른 개체·가운데에 붙었을 때 */
.snap-guide { position: absolute; pointer-events: none; background: var(--uk-danger); z-index: 50; }
.snap-guide.is-x { top: 0; bottom: 0; width: 1px; }
.snap-guide.is-y { left: 0; right: 0; height: 1px; }
/* 끌어서 고르기 네모 */
.marquee { position: absolute; border: 1px solid var(--uk-brand); background: var(--uk-pick-light); opacity: .6; pointer-events: none; z-index: 40; }