/* 이미지 컬러 팔레트 생성기 전용 CSS (2026-10-20). '팔레트 카드 스튜디오': 사진 줄 → [카드 미리 보기 | 뽑은 색 목록] → 뽑는 성격 3 → 설정 → 저장·복사. 공용 부품은 assets/v2.css.
   카드 미리 보기 크기는 tool.js fitFrame()이 정한다(나란히: 카드 높이 520 안, 목록이 카드 높이를 채움 / 좁은 화면·가로 카드: 위아래).
   움직임: 점 미끄러짐·자리 밝히기·점유율 막대·띠 색 전환(transitions.dev 토큰값, reduced-motion 정지). */
.cpg-work{container:cpg / inline-size}
.cpg-work.is-over{outline:2px dashed var(--ink);outline-offset:-6px}
.cpg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.cpg-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.cpg-pick{cursor:pointer}
.cpg-file:focus-visible + .cpg-pick{outline:2px solid var(--accent);outline-offset:2px}
.cpg-src{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0;min-width:0;font-family:var(--sans);font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.cpg-src b{font-weight:700}
.cpg-src span{color:var(--muted);font-variant-numeric:tabular-nums}
.cpg-src :empty{display:none}
.cpg-hint{display:block;margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.cpg-barhint{flex:1 1 240px;text-align:right}

.cpg-main{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 16px;padding:16px 18px 14px}
.cpg-main.is-side{grid-template-columns:auto minmax(0,1fr)}
.cpg-cardcol{min-width:0;display:flex;justify-content:center;align-items:flex-start}
.cpg-frame{position:relative;max-width:100%;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 22px rgba(0,0,0,.10)}
.cpg-frame.is-empty{width:min(100%,456px);aspect-ratio:1080/1228}
.cpg-frame #cpgCv{display:block;width:100%;height:100%}
.cpg-frame.is-empty #cpgCv{visibility:hidden}
.cpg-busy{position:absolute;inset:0;background:var(--paper);opacity:.6}
.cpg-busy[hidden]{display:none}
.cpg-hl{position:absolute;pointer-events:none;opacity:0;transition:opacity 200ms cubic-bezier(.22,1,.36,1)}
.cpg-hl.is-on{opacity:1}
.cpg-dots{position:absolute;inset:0;pointer-events:none}
.cpg-dot{position:absolute;aspect-ratio:1;min-width:14px;padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle closest-side,var(--c) 72%,#fff 74%);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.25);cursor:grab;touch-action:none;pointer-events:auto;transition:left 420ms cubic-bezier(.22,1,.36,1),top 420ms cubic-bezier(.22,1,.36,1),transform 150ms ease-out}
.cpg-dot::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.cpg-dot[hidden]{display:none}
.cpg-dot:hover,.cpg-dot.is-hl{transform:translate(-50%,-50%) scale(1.22);z-index:1}
.cpg-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cpg-dots.is-drag .cpg-dot{transition:transform 150ms ease-out;cursor:grabbing}

.cpg-listcol{min-width:0;display:flex;flex-direction:column;padding:10px;border:1px solid var(--soft);border-radius:var(--radius)}
.cpg-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 8px}
.cpg-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}
.cpg-link:hover{color:var(--ink)}
.cpg-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:4px}
.cpg-list li{display:flex;margin:0;min-width:0}
.cpg-main.is-side .cpg-list{flex:1 1 auto;display:flex;flex-direction:column}
.cpg-main.is-side .cpg-list li{flex:1 1 0;min-height:30px}
.cpg-chip{position:relative;display:flex;align-items:center;gap:4px 10px;width:100%;min-height:52px;padding:6px 12px 8px;border:0;border-radius:var(--radius);background:var(--c);color:var(--t);text-align:left;cursor:pointer;font-family:var(--sans);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3);transition:background-color 250ms cubic-bezier(.22,1,.36,1)}
.cpg-main.is-side .cpg-chip{min-height:0}
.cpg-chip b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:700;letter-spacing:.02em}
.cpg-chip .cpg-pct{margin-left:auto;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.cpg-chip .cpg-man{font-size:11px;font-weight:650;padding:1px 5px;border:1px solid currentColor;border-radius:var(--radius);white-space:nowrap}
.cpg-chip .cpg-man[hidden]{display:none}
.cpg-chip .cpg-share{position:absolute;left:0;bottom:0;height:3px;background:currentColor;opacity:.55;transition:width 500ms cubic-bezier(.22,1,.36,1)}
.cpg-chip.is-hl{box-shadow:inset 0 0 0 2px var(--t)}
.cpg-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpg-dothint,.cpg-note{grid-column:1 / -1}
.cpg-note{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.cpg-note:empty{display:none}

.cpg-sec{padding:12px 18px 14px;border-top:1px solid var(--soft)}
.cpg-sec > .v2-label{display:block;margin-bottom:8px}
.cpg-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cpg-modes button{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:2px;min-width:0;padding:9px 10px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;cursor:pointer;font-family:var(--sans);transition:background-color 150ms ease-out,border-color 150ms ease-out}
.cpg-modes button:hover{background:var(--wash)}
.cpg-modes button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--wash)}
.cpg-modes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpg-modes b{font-size:13.5px;font-weight:750;color:var(--ink)}
.cpg-modes small{font-size:12px;line-height:1.45;color:var(--muted)}
.cpg-mini{display:flex;height:22px;margin-top:6px;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cpg-mini i{flex:1 1 0;min-width:0;transition:background-color 300ms cubic-bezier(.22,1,.36,1)}
.cpg-opts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 24px}
.cpg-opt{display:flex;flex-direction:column;gap:6px;min-width:0}
.cpg-opt > .v2-label{display:block}
.cpg-size{font-weight:500;font-variant-numeric:tabular-nums}
.cpg-size:empty{display:none}
.cpg-step{display:inline-flex;align-items:center;align-self:flex-start;height:30px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.cpg-step button{width:32px;height:100%;padding:0;border:0;background:none;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.cpg-step button:hover:not(:disabled){background:var(--btn)}
.cpg-step button:disabled{opacity:.35;cursor:default}
.cpg-step button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cpg-step output{min-width:30px;text-align:center;font-family:var(--sans);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.cpg-sw > div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:30px}
.cpg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 18px 16px;border-top:1px solid var(--soft)}
.cpg-acts .v2-btn:disabled{opacity:.45;cursor:default}

@container cpg (max-width:559px){
  .cpg-bar{padding:12px 14px}
  .cpg-barhint{flex-basis:100%;text-align:left}
  .cpg-main{padding:14px 14px 12px}
  .cpg-sec,.cpg-acts{padding-left:14px;padding-right:14px}
  .cpg-modes{grid-template-columns:minmax(0,1fr)}
  .cpg-modes button{grid-template-columns:minmax(0,1fr) minmax(0,42%);column-gap:12px}
  .cpg-modes small{grid-column:1}
  .cpg-mini{grid-column:2;grid-row:1 / span 2;align-self:center;margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .cpg-hl,.cpg-dot,.cpg-chip,.cpg-chip .cpg-share,.cpg-mini i,.cpg-modes button{transition:none}
}