/* pixel-art-mosaic.css - 공개 도구 "픽셀아트 & 모자이크" 조각(WEB-INF/jsp/homepage/tool/pixelArtMosaic.jsp)의 스타일.
   2026.10.14 도구 개편 : P3 이미지 작업형 뼈대로 옮겼다(이미지 작업형 도구의 본보기).

   뿌리 : <div class="nxt nxt-pixel-art-mosaic nxt-normal nxt-light" …>
   걸리는 순서 : tool-common.css(토큰 · 패널) → tool-parts.css(공통 부품 · P3 뼈대) → tool-p3.css(P3 공통 부품) → 이 파일
                 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다)

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 단계 표시 · 올리기 칸 · 미리보기 무대 · 그림 상자 · 조절 패널 · 범위 입력 줄 · 아래 고정 줄은 tool-p3.css,
     단추 · 전환 단추 · 탭 · 칩 · 안내 상자 · 토스트 · 확인창 · 안내 본문은 tool-parts.css 가 정한다 - 여기 다시 적지 않는다.
     ① 색 팔레트 5종의 색 띠(시안 renewal-p3.css ④ 그대로)
     (그림 상자의 터치 동작 - data-tool 이 달린 동안에만 화면 굴리기를 막는다 - 과 단계를 바꿀 때 화면을 옮기는 자리 - .nxt-steps 의 scroll-margin-top - 는
      tool-p3.css 로 올라갔다 - 2026.10.15. 이 도구는 부분 가리기 탭일 때만 스크립트가 그림 상자에 data-tool="rect|brush" 를 단다)
   [지운 것] 옛 규칙 전부 : #editor[style*="block"] 로 화면 바꾸기, .dropzone · .dz-*, #fileInput 시각 숨김, .tab-row · .tab-btn, .tool-toggle · .tt-btn,
     .mode-panel, .slider-row, .palette-row · .palette-chip · .swatch, .mode-hint, .perf-note, .canvas-wrap, .btn-main · .btn-sub, .toolbar-row, .export-row.
   [규칙] 전부 .nxt-light.nxt-pixel-art-mosaic 으로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다(①의 띠 색은 데이터라 예외).

   ★ 스크립트가 캔버스에 그리는 색(CSS 가 닿지 않는다) : 끄는 동안의 붓 자국은 토큰 --nxt-mark(tool-p3.css ①)를 읽어 쓴다.
     끄는 동안의 선택 사각형은 금색 선 rgba(251,191,36,.9) + 옅은 채움 rgba(251,191,36,.22) - 사용자의 사진 위에 그려지는 표시라 화면 바탕과 무관하다. */

/* ============ ① 색 팔레트의 색 띠 ============ */
/* <button type="button" class="nxt-chip" aria-pressed="true" data-value="original"><span class="nxt-swatch" data-palette="original" aria-hidden="true"></span>원본 색</button>
   띠의 색은 pixel-art-mosaic.js 의 팔레트 값이다(값 자체가 데이터라 토큰으로 두지 않는다). 띠의 크기 · 테두리는 tool-p3.css ③-4 */
.nxt-light.nxt-pixel-art-mosaic .nxt-swatch[data-palette="original"]{background:linear-gradient(90deg,#F8FAFC 0 33.4%,#94A3B8 0 66.7%,#334155 0)}
.nxt-light.nxt-pixel-art-mosaic .nxt-swatch[data-palette="gameboy"]{background:linear-gradient(90deg,#0F380F 0 25%,#306230 0 50%,#8BAC0F 0 75%,#9BBC0F 0)}
.nxt-light.nxt-pixel-art-mosaic .nxt-swatch[data-palette="cyberpunk"]{background:linear-gradient(90deg,#0D0221 0 33.4%,#FF2079 0 66.7%,#00F6FF 0)}
.nxt-light.nxt-pixel-art-mosaic .nxt-swatch[data-palette="gray8"]{background:linear-gradient(90deg,#111111 0 33.4%,#777777 0 66.7%,#DDDDDD 0)}
.nxt-light.nxt-pixel-art-mosaic .nxt-swatch[data-palette="gbawarm"]{background:linear-gradient(90deg,#2B1D0E 0 33.4%,#C97B3D 0 66.7%,#FDF1D6 0)}

/* ============ ② 부분 가리기 키보드 대안의 포커스 링 (2026.10.16) ============
   부분 가리기 탭에서만 덧그림 캔버스(#overlayCanvas)가 포커스를 받는다(pixel-art-mosaic.js). 그림 상자가 overflow:hidden 이라
   공통 링(.nxt-light :focus-visible - 바깥 2px)이 잘린다 - 안쪽으로 그린다. 색 · 굵기는 공통 그대로(--nxt-focus) */
.nxt-light.nxt-pixel-art-mosaic #overlayCanvas:focus-visible{outline-offset:-3px}