/* 이미지 색상 추출 */
.ce-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); }
.ce-drop:hover, .ce-drop:focus-visible, .ce-drop.is-over { border-color: var(--accent-primary, #3b6fe0); background: var(--accent-soft, #eef3fd); outline: none; }
.ce-drop > i { font-size: 2rem; color: var(--accent-primary, #3b6fe0); margin-bottom: var(--spacing-sm, .5rem); }
.ce-drop-title { margin: 0 0 .25rem; font-weight: 600; }
.ce-drop-hint { margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.ce-empty { text-align: center; padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem); color: var(--text-muted, #626977); }
.ce-empty > i { font-size: 1.75rem; display: block; margin-bottom: .5rem; opacity: .6; }
.ce-empty > p { margin: 0; font-size: var(--text-sm, .875rem); }
.ce-preview { text-align: center; background: #edeff2; border-radius: var(--radius-sm, 6px); padding: .75rem; }
#cePreviewImg { max-width: 100%; max-height: 22rem; height: auto; border-radius: 4px; }
.ce-info { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.ce-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .375rem; margin-top: var(--spacing-md, 1rem); }
.ce-swatch { display: flex; flex-direction: column; gap: .0625rem; align-items: flex-start; padding: .625rem .5rem; cursor: pointer; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-sm, 6px); transition: transform .12s ease, box-shadow .12s ease; }
.ce-swatch:hover, .ce-swatch:focus-visible { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,.15); outline: none; }
.ce-swatch.is-copied { box-shadow: 0 0 0 3px var(--accent-success, #2f9e5f); }
.ce-swatch strong { font-family: ui-monospace, monospace; font-size: var(--text-sm, .875rem); }
.ce-swatch span { font-size: .6875rem; opacity: .85; font-family: ui-monospace, monospace; }
.ce-share { font-weight: 600; }
.ce-avg { margin-top: .625rem; padding: .625rem; border-radius: var(--radius-sm, 6px); text-align: center; font-family: ui-monospace, monospace; font-size: var(--text-sm, .875rem); font-weight: 600; }
.ce-alert { margin-bottom: var(--spacing-md, 1rem); }
.ce-note { margin-top: var(--spacing-lg, 1.5rem); }