/* 이미지 자르기 — 선택 영역 오버레이 */

.crop-stage {
    position: relative;
    margin: 0 auto;
    /* 투명 배경 확인용 체커보드 */
    background-color: var(--surface-inset);
    background-image:
        linear-gradient(45deg, var(--border) 25%, transparent 25%),
        linear-gradient(-45deg, var(--border) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border) 75%),
        linear-gradient(-45deg, transparent 75%, var(--border) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    border-radius: var(--radius);
    touch-action: none;   /* 모바일에서 드래그가 페이지 스크롤로 가로채이지 않도록 */
    overflow: hidden;
    user-select: none;
}

.crop-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--accent);
    /* 선택 영역 밖을 어둡게 덮습니다. 별도 오버레이 요소 없이 그림자 하나로 처리합니다 */
    box-shadow: 0 0 0 9999px rgba(3, 12, 24, 0.52);
    cursor: move;
}

.crop-box:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* 삼분할 안내선 */
.crop-box::before,
.crop-box::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
}

.crop-box::before {
    background-image:
        linear-gradient(to right, transparent 33.33%, #fff 33.33%, #fff calc(33.33% + 1px), transparent calc(33.33% + 1px)),
        linear-gradient(to right, transparent 66.66%, #fff 66.66%, #fff calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

.crop-box::after {
    background-image:
        linear-gradient(to bottom, transparent 33.33%, #fff 33.33%, #fff calc(33.33% + 1px), transparent calc(33.33% + 1px)),
        linear-gradient(to bottom, transparent 66.66%, #fff 66.66%, #fff calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

.crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 2px solid var(--accent);
    border-radius: 50%;
}

.crop-handle[data-handle="nw"] { top: -9px;    left: -9px;    cursor: nwse-resize; }
.crop-handle[data-handle="ne"] { top: -9px;    right: -9px;   cursor: nesw-resize; }
.crop-handle[data-handle="sw"] { bottom: -9px; left: -9px;    cursor: nesw-resize; }
.crop-handle[data-handle="se"] { bottom: -9px; right: -9px;   cursor: nwse-resize; }