/* 색상 믹서 */
.cm-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--spacing-md, 1rem); }
.cm-pair { display: flex; gap: .5rem; }
.cm-picker { flex: 0 0 3.25rem; padding: .125rem; height: 2.375rem; }
.cm-hex { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace; text-transform: uppercase; }
.cm-mid {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 1.5rem; border-radius: var(--radius-md, 8px); margin-bottom: var(--spacing-md, 1rem);
}
.cm-mid span { font-size: var(--text-ui-sm, .8125rem); opacity: .85; }
.cm-mid strong { font-size: 1.5rem; font-family: ui-monospace, monospace; }
.cm-swatches { display: flex; flex-wrap: wrap; gap: .25rem; }
.cm-swatch {
    flex: 1 1 5rem; min-width: 4.5rem; height: 4rem; cursor: pointer;
    border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-sm, 6px);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: .375rem;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cm-swatch:hover, .cm-swatch:focus-visible { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,.15); outline: none; }
.cm-swatch.is-copied { box-shadow: 0 0 0 3px var(--accent-success, #2f9e5f); }
.cm-swatch span { font-size: .6875rem; font-family: ui-monospace, monospace; font-weight: 600; }
.cm-compare, .cm-contrast { margin: var(--spacing-md, 1rem) 0 0; font-size: var(--text-sm, .875rem); color: var(--text-secondary, #3d434d); line-height: 1.6; }
.cm-contrast { padding: .5rem .75rem; background: var(--surface-2, #f1f3f7); border-radius: var(--radius-sm, 6px); }