/* ── ColorPanel (spum-cp) ── */
.spum-cp__root { width: 100%; height: 100%; }
.spum-cp {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4px;
  font-family: inherit;
  font-size: 11px;
  color: var(--spum-text, #c8d4e0);
  align-items: stretch;
  overflow: hidden;
}

/* Mode tabs */
.spum-cp__modes {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.03);
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
}
.spum-cp__mode-btn {
  flex: 1;
  height: 20px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--spum-text-muted, #71829b);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.spum-cp__mode-btn:hover { color: var(--spum-text, #c8d4e0); }
.spum-cp__mode-btn.is-active {
  background: rgba(142,180,255,.12);
  color: var(--spum-accent, #8eb4ff);
}

/* Body */
.spum-cp__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: stretch;
  justify-content: flex-start;
}
.spum-cp__body > *:not(.spum-cp__grid) {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Grid mode — 가로폭 100%, aspect-ratio로 정사각 셀 보장 */
.spum-cp__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.spum-cp__grid-row {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.spum-cp__grid-row.is-gray {
  border-bottom: 2px solid var(--spum-bg-1, #0f131b);
}
.spum-cp__grid-cell {
  flex: 1;
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: transform .08s;
  outline: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
}
.spum-cp__grid-cell:hover {
  transform: scale(1.15);
  z-index: 1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}
.spum-cp__grid-cell.is-active {
  z-index: 2;
  box-shadow: 0 0 0 2px var(--spum-accent, #8eb4ff), 0 0 0 4px rgba(142,180,255,.3);
}

/* Spectrum mode */
.spum-cp__spectrum {
  width: 100%;
  aspect-ratio: 1;
  flex: 1;
  min-height: 0;
  border-radius: 6px;
  position: relative;
  cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--hue, 0), 100%, 50%));
}
.spum-cp__spectrum-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.spum-cp__hue-slider {
  width: 100%;
  height: 14px;
  margin-top: 6px;
  accent-color: var(--spum-accent, #8eb4ff);
  cursor: pointer;
}

/* Sliders mode */
.spum-cp__sliders { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; }
.spum-cp__slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.spum-cp__label {
  width: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--spum-text-muted, #71829b);
  text-align: center;
  flex-shrink: 0;
}
.spum-cp__slider {
  flex: 1;
  height: 6px;
  cursor: pointer;
}
.spum-cp__num {
  width: 44px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  background: rgba(0,0,0,.2);
  color: var(--spum-text, #c8d4e0);
  font-size: 10px;
  text-align: center;
  outline: none;
}
.spum-cp__num:focus { border-color: rgba(142,180,255,.3); }
.spum-cp__hex-input {
  flex: 1;
  height: 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  background: rgba(0,0,0,.2);
  color: var(--spum-text, #c8d4e0);
  font-size: 10px;
  font-family: 'SF Mono', Consolas, monospace;
  padding: 0 8px;
  outline: none;
}
.spum-cp__hex-input:focus { border-color: rgba(142,180,255,.3); }

/* Alpha row */
.spum-cp__alpha-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.spum-cp__alpha-val {
  width: 36px;
  font-size: 10px;
  color: var(--spum-text-muted, #71829b);
  text-align: right;
}

/* Footer: current + swatches + load button */
.spum-cp__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
}
.spum-cp__footer-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.spum-cp__current {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.spum-cp__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
  min-width: 0;
  flex: 1;
}
.spum-cp__swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color .1s, transform .1s;
  flex-shrink: 0;
}
.spum-cp__swatch:hover { border-color: rgba(255,255,255,.4); transform: scale(1.2); }
.spum-cp__swatch.is-active { border-color: var(--spum-accent, #8eb4ff); }
.spum-cp__swatch.is-selected { border-color: rgba(255,255,255,.6); outline: 1px solid rgba(255,255,255,.3); }
.spum-cp__swatch--add {
  background: rgba(255,255,255,.04);
  color: var(--spum-text-muted, #71829b);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.spum-cp__footer-tools {
  display: flex;
  gap: 4px;
}
.spum-cp__load-btn,
.spum-cp__del-btn {
  flex: 1;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--spum-text-muted, #71829b);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.spum-cp__load-btn:hover { color: var(--spum-text, #c8d4e0); background: rgba(255,255,255,.08); }
.spum-cp__del-btn { color: #ff6b6b; border-color: rgba(255,107,107,.15); }
.spum-cp__del-btn:hover { background: rgba(255,107,107,.1); }
.spum-cp__swatch--add:hover { background: rgba(255,255,255,.08); color: var(--spum-text, #c8d4e0); }


/* ── Palette Loader Modal ── */
.spum-cp__loader-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: grid;
  place-items: center;
  font-family: inherit;
}
.spum-cp__loader {
  width: min(480px, 90vw);
  max-height: 80vh;
  background: var(--spum-bg-2, #111723);
  border: 1px solid var(--spum-border-mid, rgba(255,255,255,.08));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.spum-cp__loader-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--spum-border, rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--spum-text, #edf3ff);
}
.spum-cp__loader-close {
  width: 24px; height: 24px;
  border: none; border-radius: 4px;
  background: transparent;
  color: var(--spum-text-muted, #71829b);
  font-size: 18px;
  cursor: pointer;
}
.spum-cp__loader-close:hover { color: var(--spum-text, #edf3ff); background: rgba(255,255,255,.06); }

.spum-cp__loader-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.spum-cp__loader-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spum-cp__loader-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--spum-text-muted, #71829b);
}

.spum-cp__loader-presets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.spum-cp__loader-preset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--spum-border, rgba(255,255,255,.06));
  background: var(--spum-bg-0, #0a0e14);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.spum-cp__loader-preset:hover {
  border-color: var(--spum-accent-border, rgba(142,180,255,.2));
  background: rgba(142,180,255,.04);
}
.spum-cp__loader-preset-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--spum-text, #edf3ff);
  width: 90px;
  text-align: left;
  flex-shrink: 0;
}
.spum-cp__loader-preset-colors {
  display: flex;
  flex: 1;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.spum-cp__loader-preset-colors span {
  flex: 1;
  display: block;
}

.spum-cp__loader-input {
  width: 100%;
  border: 1px solid var(--spum-border-mid, rgba(255,255,255,.08));
  background: var(--spum-bg-0, #0a0e14);
  color: var(--spum-text, #edf3ff);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: monospace;
  font-size: 11px;
  resize: vertical;
  outline: none;
}
.spum-cp__loader-input:focus { border-color: var(--spum-accent-border, rgba(142,180,255,.2)); }

.spum-cp__loader-actions {
  display: flex;
  gap: 6px;
}
.spum-cp__loader-btn {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--spum-border-mid, rgba(255,255,255,.08));
  background: var(--spum-bg-0, #0a0e14);
  color: var(--spum-text-muted, #71829b);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.spum-cp__loader-btn:hover {
  color: var(--spum-text, #edf3ff);
  background: rgba(255,255,255,.06);
}