/* 이미지 도트화 도구 전용 CSS (2026-10-12). 2패널(이미지·설정 | 원본 비교 무대·결과) + 색별 칸 수 + 팔레트별 미리 보기. 공용 부품은 assets/v2.css.
   두 열/한 열은 툴 폭 컨테이너 쿼리(@container pa)로 나눈다(셸 폭이 아니라 툴 폭 기준). */
.pa-work{container:pa / inline-size}
.pa-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.pa-in{padding:16px 18px 18px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.pa-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft)}
.pa-stick{display:flex;flex-direction:column}
@container pa (min-width:780px){.pa-stick{position:sticky;top:calc(var(--hd-h,52px) + 16px)}}
.pa-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.pa-dropbox{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);text-align:center;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.pa-dropbox .i{width:22px;height:22px;color:var(--muted)}
.pa-dropbox b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.pa-dropbox span{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pa-dropbox:hover,.pa-drop.is-over .pa-dropbox{background:var(--wash);border-color:var(--ink)}
.pa-file:focus-visible + .pa-dropbox{outline:2px solid var(--accent);outline-offset:2px}
.pa-srcline{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pa-srcline span + span{font-family:var(--mono, ui-monospace, monospace);font-weight:500;color:var(--muted)}
.pa-hint[hidden]{display:none}
.pa-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.pa-block{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.pa-block > .v2-label{display:block}
.pa-block .pa-hint{margin-top:0}
.pa-range{display:block;width:100%;margin:2px 0 0;accent-color:var(--ink)}
.pa-chips button{min-width:40px}
.pa-nrow{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:4px}
.pa-nrow[hidden]{display:none}
.pa-olopt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-left:40px}
.pa-olopt[hidden]{display:none}
.pa-sub{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.pa-oc{width:30px;height:30px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer}
.pa-oc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-block .v2-switch small{font-size:11.5px}
.pa-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* 원본 비교 무대: 아래 원본, 위 도트(clip-path로 왼쪽을 걷어 냄) */
.pa-wrap{width:100%;min-width:0;display:flex;justify-content:center}
.pa-stage{position:relative;max-width:100%;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden;background:repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 16px 16px;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.pa-orig,.pa-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.pa-orig{object-fit:fill}
.pa-cv{image-rendering:pixelated;image-rendering:crisp-edges}
.pa-handle{position:absolute;top:0;bottom:0;left:0;width:0;pointer-events:none}
.pa-handle i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.pa-handle i::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pa-handle.is-edge i{display:none}
.pa-tag{position:absolute;top:8px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.62);font-family:var(--sans);font-size:11px;font-weight:700;color:#fff;white-space:nowrap}
.pa-tag--o{right:8px}
.pa-tag--p{left:8px}
.pa-handle.is-edge .pa-tag{display:none}
.pa-busy{position:absolute;left:50%;top:50%;margin:0;padding:6px 12px;transform:translate(-50%,-50%);border-radius:var(--radius);background:rgba(0,0,0,.66);font-family:var(--sans);font-size:12px;color:#fff}
.pa-stage.is-stale .pa-cv,.pa-stage.is-stale .pa-orig{opacity:.3}
.pa-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-cmphint{margin:8px 0 14px;text-align:center}
.pa-stick > .v2-label{display:block;margin-bottom:6px;overflow-wrap:anywhere}
.pa-out .v2-big span{overflow-wrap:anywhere}
.pa-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.pa-foot{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.pa-foot .v2-status{flex-basis:100%}
.pa-savesize{font-family:var(--mono, ui-monospace, monospace);font-size:12px;color:var(--muted)}
.pa-pick{display:none;cursor:pointer}
/* 아래 상자 */
.pa-box{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.pa-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.pa-headhint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pa-bar{display:flex;height:16px;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden;margin-bottom:10px}
.pa-bar i{display:block;min-width:1px;flex-basis:0;transition:opacity .2s var(--ease,ease)}
.pa-bar i.is-dim{opacity:.18}
.pa-bar i.is-rest{background:repeating-linear-gradient(45deg,var(--soft) 0 4px,var(--paper) 4px 8px)}
.pa-cnt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.pa-cnt button{display:grid;grid-template-columns:20px minmax(0,1fr) auto;grid-template-rows:auto 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;color:var(--ink)}
.pa-cnt button:hover{background:var(--wash)}
.pa-cnt button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pa-cnt button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-cnt i{grid-row:1 / 3;width:20px;height:20px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pa-cnt code{font-family:var(--mono, ui-monospace, monospace);font-size:12.5px;font-weight:600}
.pa-cnt span{grid-column:2;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.pa-cnt small{grid-row:1 / 3;grid-column:3;font-family:var(--mono, ui-monospace, monospace);font-size:12px;font-weight:600;color:var(--ink)}
.pa-more{margin:8px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.pa-styles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pa-styles button{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;padding:6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);cursor:pointer;text-align:left;color:var(--ink)}
.pa-styles button:hover{background:var(--wash)}
.pa-styles button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pa-styles button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-styles canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 10px 10px;border-radius:3px}
.pa-styles b{font-family:var(--sans);font-size:12px;font-weight:700;overflow-wrap:anywhere}
.pa-styles small{font-family:var(--sans);font-size:11px;color:var(--muted)}
@container pa (max-width:779px){
  .pa-grid{grid-template-columns:minmax(0,1fr)}
  .pa-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
  .pa-pick{display:inline-flex}
}
@container pa (max-width:599px){
  .pa-styles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){.pa-bar i{transition:none}}