/* 이미지 색상 추출기 전용 CSS (2026-10-14). 2패널(이미지·무대·읽는 범위 | 결과·최근 색) + 주요 색 팔레트. 공용 부품은 assets/v2.css.
   두 열/한 열은 툴 폭 컨테이너 쿼리(@container cpk)로 나눈다. 움직임: 색 견본 배경 전환·점유율 막대 차오름(transitions.dev 토큰값, reduced-motion 정지). */
.cpk-work{container:cpk / inline-size}
.cpk-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.cpk-in{padding:16px 18px 18px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.cpk-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft)}
.cpk-stick{display:flex;flex-direction:column}
@container cpk (min-width:780px){.cpk-stick{position:sticky;top:calc(var(--hd-h,52px) + 16px)}}
.cpk-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.cpk-dropbox{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);text-align:center;cursor:pointer;transition:background 150ms ease-in-out,border-color 150ms ease-in-out}
.cpk-dropbox .i{width:22px;height:22px;color:var(--muted)}
.cpk-dropbox b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.cpk-dropbox span{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.cpk-dropbox:hover,.cpk-drop.is-over .cpk-dropbox{background:var(--wash);border-color:var(--ink)}
.cpk-file:focus-visible + .cpk-dropbox{outline:2px solid var(--accent);outline-offset:2px}
.cpk-srcline{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-family:var(--sans);font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.cpk-srcline span:empty{display:none}
.cpk-srcline span + span{color:var(--muted)}
.cpk-hint{display:block;margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.cpk-hint:empty{display:none}
.cpk-stagebox{min-width:0}
.cpk-stage{position:relative;min-height:120px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper) repeating-conic-gradient(var(--soft) 0 25%,transparent 0 50%) 0 0/16px 16px;overflow:hidden;cursor:crosshair;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.cpk-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpk-stage canvas{display:block;max-width:100%;height:auto;margin:0 auto}
.cpk-stage.is-empty canvas{display:none}
.cpk-stageempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:16px;text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted);background:var(--paper)}
.cpk-stage:not(.is-empty) .cpk-stageempty{display:none}
.cpk-mark{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px #000,inset 0 0 0 1.5px #000;pointer-events:none}
.cpk-mark::before,.cpk-mark::after{content:"";position:absolute;background:#fff;box-shadow:0 0 0 1px #000}
.cpk-mark::before{left:50%;top:-9px;width:1px;height:6px;margin-left:-.5px}
.cpk-mark::after{left:50%;bottom:-9px;width:1px;height:6px;margin-left:-.5px}
.cpk-busy{position:absolute;inset:0;background:var(--paper);opacity:.75}
.cpk-hover{margin:6px 0 0;min-height:18px;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cpk-hover b{color:var(--ink);font-weight:700}
.cpk-mode .v2-label{display:block;margin-bottom:6px}
.cpk-acts{display:flex;flex-wrap:wrap;gap:8px}
.cpk-stick > .v2-label{display:block;margin-bottom:8px}
.cpk-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px}
.cpk-swatch{flex:0 0 auto;width:132px;height:132px;border-radius:var(--radius);border:1px solid var(--soft);background:repeating-conic-gradient(var(--soft) 0 25%,var(--paper) 0 50%) 0 0/16px 16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background-color 250ms cubic-bezier(.22,1,.36,1)}
.cpk-swatch.is-set{background:var(--cpk-c,transparent)}
.cpk-loupebox{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.cpk-loupebox small{font-family:var(--sans);font-size:11.5px;color:var(--muted);text-align:center}
.cpk-loupe{display:block;width:132px;height:132px;border-radius:var(--radius);border:1px solid var(--soft);background:var(--paper);image-rendering:pixelated}
.cpk-out .v2-big{font-size:34px;letter-spacing:0}
.cpk-out .v2-big span{overflow-wrap:anywhere}
.cpk-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.cpk-out .v2-sub{margin:4px 0 8px;overflow-wrap:anywhere}
.cpk-rows li{align-items:center;gap:8px}
.cpk-rows li[hidden]{display:none}
.cpk-rows li span{flex:0 0 auto}
.cpk-rows li b{flex:1 1 auto;text-align:right;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:13px}
.cpk-rows li code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.cpk-rows .cpk-copy{flex:0 0 auto;height:24px;padding:0 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.cpk-rows .cpk-copy:hover{background:var(--btn);color:var(--ink)}
.cpk-rows .cpk-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpk-rows .cpk-copy:disabled{opacity:.4;cursor:default}
.cpk-sub{display:block;margin:12px 0 6px}
.cpk-ct{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cpk-ct li{display:flex;flex-direction:column;gap:2px;padding:10px 10px 9px;border-radius:var(--radius);border:1px solid var(--soft);background:var(--cpk-c,var(--paper));font-family:var(--sans);min-width:0}
.cpk-ct li b{font-size:16px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--cpk-t,var(--ink))}
.cpk-ct li span{font-size:11.5px;line-height:1.35;color:var(--cpk-t,var(--muted))}
.cpk-ct li.is-empty{background:var(--paper)}
.cpk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.cpk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:14px 0 6px}
.cpk-head .v2-label{display:block}
.cpk-link{padding:0;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cpk-link:hover{color:var(--ink)}
.cpk-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpk-recent{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
.cpk-recent li{margin:0}
.cpk-recent button{display:block;width:34px;height:34px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--cpk-c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);cursor:pointer}
.cpk-recent button:hover{border-color:var(--ink)}
.cpk-recent button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 1px var(--ink)}
.cpk-recent button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpk-recent .cpk-hint{margin:0;align-self:center}
.cpk-palbox{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.cpk-palbox .cpk-head{margin:0 0 6px}
.cpk-bar{display:flex;height:18px;margin:8px 0 10px;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.cpk-bar i{display:block;min-width:0;flex-basis:0;flex-grow:0;transition:flex-grow 500ms cubic-bezier(.22,1,.36,1)}
.cpk-bar i.is-dim{opacity:.25}
.cpk-pal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:6px}
.cpk-pal button{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:0 8px;align-items:center;width:100%;padding:6px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;cursor:pointer;font-family:var(--sans)}
.cpk-pal button:hover{background:var(--wash)}
.cpk-pal button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cpk-pal button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpk-pal i{width:24px;height:24px;border-radius:4px;background:var(--cpk-c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cpk-pal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;font-weight:700;color:var(--ink)}
.cpk-pal small{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cpk-palacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
@container cpk (max-width:779px){
  .cpk-grid{grid-template-columns:minmax(0,1fr)}
  .cpk-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container cpk (max-width:359px){
  .cpk-top{flex-direction:column}
  .cpk-ct{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){.cpk-swatch,.cpk-bar i,.cpk-dropbox{transition:none}}