/* color-picker.css — 컬러 피커 전용 */
.cp-top{display:flex;gap:16px;align-items:center}
.cp-swatch{--c:#3b82f6;position:relative;width:110px;height:110px;flex:none;border-radius:18px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#888 0 25%,#ccc 0 50%) 0 0/16px 16px}
.cp-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cp-native:focus-visible{opacity:0}
.cp-swatch:focus-within{outline:3px solid rgba(var(--primary-rgb),.7);outline-offset:2px}
.cp-native-lbl{position:absolute;left:0;right:0;bottom:0;font-size:11px;text-align:center;background:rgba(0,0,0,.45);color:#fff;padding:3px 0;pointer-events:none}
.cp-top-info{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.cp-big{font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:.02em;word-break:break-all}
.cp-line{display:flex;gap:8px}
.cp-line .pk-input{flex:1;min-width:0}
.cp-mono{font-family:var(--mono)}
.pk-input[aria-invalid="true"]{border-color:var(--danger)}
.cp-sec{margin-top:14px}
.cp-h{font-size:15px;font-weight:800}
.cp-h small{font-size:12px;font-weight:500;color:var(--dim);margin-left:6px}
.cp-contrast{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.cp-contrast{grid-template-columns:1fr}}
.cp-sample{border-radius:12px;padding:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border:1px solid var(--line)}
.cp-sample span{font-size:18px;font-weight:800;width:100%}
.cp-sample strong{font-family:var(--mono);font-size:14px;background:rgba(0,0,0,.55);color:#fff;padding:2px 8px;border-radius:6px}
.cp-badge{font-style:normal;font-size:12.5px;font-weight:800;padding:2px 9px;border-radius:999px;background:#0a0b16}
.cp-badge.good{color:var(--accent)}
.cp-badge.mid{color:var(--primary)}
.cp-badge.bad{color:var(--danger)}
.cp-scale{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
@media (max-width:620px){.cp-scale{grid-template-columns:repeat(3,1fr)}}
.cp-chip{height:54px;border-radius:9px;font-family:var(--mono);font-size:11.5px;font-weight:700;border:1px solid rgba(255,255,255,.08);padding:0 2px}
.cp-scale .cp-chip:nth-child(5){outline:2px solid var(--primary);outline-offset:1px}
.cp-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.cp-pal-item{position:relative;display:flex;flex-direction:column;gap:4px;align-items:center}
.cp-pal-sw{width:100%;height:52px;border-radius:10px;border:1px solid var(--line)}
.cp-pal-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--card-2);color:var(--muted);border:1px solid var(--line);font-size:14px;line-height:1;padding:0}
.cp-pal-x:hover{color:var(--danger)}
.cp-pal-item span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pk-article code{font-family:var(--mono);font-size:.92em;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}