/* 개체 틀 - 동작은 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; }
}