/* 1:1アスペクト比の維持（Tailwind v3での補助用） */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Cropper.jsのカスタマイズ: コラージュ風UIにするため不要なUIを隠す */
.cropper-view-box {
    border-radius: 0;
    outline: none !important;
}

.cropper-face {
    background-color: transparent !important;
    opacity: 1 !important;
}

/* モーダル（暗い背景）を透明にする */
.cropper-modal {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* 点線やコントロールポイントを非表示 */
.cropper-dashed,
.cropper-point, 
.cropper-line,
.cropper-center {
    display: none !important;
}

/* コンテナが100%に広がるように強制 */
.cropper-container {
    width: 100% !important;
    height: 100% !important;
}

/* ドラッグ時のカーソル */
.cropper-drag-box.cropper-move {
    cursor: move;
    cursor: grab;
}
.cropper-drag-box.cropper-move:active {
    cursor: grabbing;
}

/* スライダーのスタイリング */
input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #2563eb; /* Tailwind blue-600 */
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #2563eb;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}