/* 이미지 자르기 */
.ic-drop {
    border: 2px dashed var(--border-color, #d8dce3);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    text-align: center; cursor: pointer;
    background: var(--bg-subtle, #f8f9fb);
    transition: border-color .15s ease, background-color .15s ease;
    margin-bottom: var(--spacing-lg, 1.5rem);
}
.ic-drop:hover, .ic-drop:focus-visible, .ic-drop.is-over {
    border-color: var(--accent-primary, #3b6fe0); background: var(--accent-soft, #eef3fd); outline: none;
}
.ic-drop > i { font-size: 2rem; color: var(--accent-primary, #3b6fe0); margin-bottom: var(--spacing-sm, .5rem); }
.ic-drop-title { margin: 0 0 .25rem; font-weight: 600; }
.ic-drop-hint { margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

.ic-empty { text-align: center; padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem); color: var(--text-muted, #626977); }
.ic-empty > i { font-size: 1.75rem; display: block; margin-bottom: .5rem; opacity: .6; }
.ic-empty > p { margin: 0; font-size: var(--text-sm, .875rem); }

.ic-stage { background: #edeff2; border-radius: var(--radius-sm, 6px); padding: var(--spacing-md, 1rem); text-align: center; overflow: auto; }
#icCanvas { max-width: 100%; height: auto; cursor: crosshair; touch-action: none; display: inline-block; box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.ic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-md, 1rem); }
.ic-actions { margin-top: var(--spacing-md, 1rem); flex-wrap: wrap; }
.ic-info { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); font-variant-numeric: tabular-nums; }
.ic-alert { margin-bottom: var(--spacing-md, 1rem); }
.ic-note { margin-top: var(--spacing-lg, 1.5rem); }

.ic-preview { margin-top: var(--spacing-lg, 1.5rem); text-align: center; }
.ic-preview h3 { font-size: var(--text-base, 1rem); margin: 0 0 .5rem; color: var(--success-text, #1f7a48); }
.ic-preview img { max-width: 100%; height: auto; border: 1px solid var(--border-color, #e5e8ed); border-radius: var(--radius-sm, 6px); background: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 50%/16px 16px; }
.ic-outsize { margin: .5rem 0 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

@media (max-width: 768px) { .ic-grid { grid-template-columns: 1fr 1fr; } }