/* tool-p3.css - 공개 도구 프로그램(/tool/{이름}.do) 조각 중 "이미지 작업형(P3)"의 공통 규칙 (밝은 테마 전용). 도구 16개 개편. 쓰는 도구 : 픽셀아트 & 모자이크(본보기 - pixelArtMosaic.jsp) · AI 배경 제거. 편집기형(P4 - 솔스 캔버스)은 이 파일을 걸지 않는다. 담는 것 : ① 토큰(P3 가 더한 것) ② P3 뼈대에서 고친 값(감싸개 둘 · 900px 이하) ③ P3 공통 부품 : ③-1 단계 되돌아가기 단추 ③-2 올리기 칸 ③-3 미리보기 무대 · 그림 상자 · 미리보기 아래 줄 ③-4 조절 패널(묶음 · 범위 입력 줄 · 색 띠) ③-5 아래 고정 줄 뿌리 :
작업대가 보이는 동안만 data-nxt-dock="on" [거는 순서] tool-common.css → tool-parts.css → tool-p3.css → {이름}.css (tool-calc.css · sols-tool-guide.css 는 걸지 않는다) 순서를 바꾸면 안 된다 - 이 파일은 tool-parts.css 의 P3 뼈대(.nxt-preview · .nxt-drop · .nxt-dock)와 단계 표시(.nxt-steps)를 뒤에서 덮는다. 뼈대를 덮는 곳은 클래스 둘(.nxt-light .nxt-panel.nxt-preview, 0,3,0)로 적었다 - 순서가 아니라 무게로 이긴다. [출처] docs/design/2026-10-14_tool_renewal_시안/renewal-p3.css ①②③ (④ 픽셀아트 · ⑤ 배경 제거는 각 도구 CSS, ⑥ P4 · 캔버스는 sols-canvas.css 로 간다) 시안 노트 C = design-notes-p3.md (2절 치수 · 3절 단계 표시 · 4.1 부품 표 · 8절 토큰 · 9절 접근성 · 11절 1~5) 배정 docs/design/2026-10-14_tool_renewal_배정서.md 1절 (a) [시안에서 옮기지 않은 줄] tool-parts.css 가 이미 그 값으로 갖고 있어 다시 덮지 않는다(인계 메모 1A) : ① --nxt-shadow-dock ② PC 의 .nxt-panel.nxt-preview(위 고정 · 세로 flex · 안 여백 16px) · .nxt-p3 .nxt-dock(세로 flex) · 900px 이하의 .nxt-p3{display:block} 과 .nxt-dock 의 sticky 묶음 ③-4 전환 단추 안 아이콘의 여백(.nxt-seg>button>.bi) 그리고 ① 의 P4 토큰 넷(--nxt-p4-top · --nxt-p4-min · --nxt-cv-h · --nxt-cv-fs)은 캔버스가 이 파일을 걸지 않으므로 ⑥ 과 함께 sols-canvas.css 로 간다. [시안과 다르게 둔 값] 900px 이하 미리보기의 층 : 5 → 아래 고정 줄(40)보다 한 층 위(41). 실제 화면(375 × 812)에서 작업대를 지나 안내 본문으로 굴릴 때 아래 고정 줄이 붙어 있던 미리보기의 아래쪽을 덮었다 - 조절 패널처럼 미리보기 밑으로 지나가게 했다(② 의 주석). 그 밖의 값은 시안 그대로다. [이름 · 상태] tool-parts.css 와 같다. 새 부품은 nxt- 접두, 상태는 속성으로 그린다 : [aria-pressed] 고름 · [aria-selected] 탭 · [aria-current="step"] 지금 단계 · [data-done="true"] 끝난 단계 · [hidden] 숨김 · [aria-busy="true"] 진행 중 · [data-drag="true"] 끌어놓는 중 · [data-tool="rect|brush"] 그림 상자의 포인터 모양 · [disabled] [범위] 선택자는 .nxt-light … 로 시작한다(토큰만 .nxt.nxt-light). 틀 선택자(.bbs-*, .nxf-*, body, main)를 쓰지 않는다. 도구 하나만의 규칙을 두지 않는다(→ {이름}.css, .nxt-light.nxt-{이름} …). 색은 ① 과 tool-common.css ④ · tool-parts.css ① 의 --nxt-* 만 읽는다. ★ 붙는 요소(미리보기 = 위, 아래 고정 줄 = 아래)는 position:sticky 다. .nxt-p3 와 그 조상 어디에도 overflow:hidden|auto · transform 을 주지 않는다 - 붙지 않는다. ★ 900px 이하에서 .nxt-p3 는 블록, .nxt-p3-main 은 display:contents, .nxt-p3-side 는 블록이다. .nxt-p3-main 에 테두리 · 바탕 · 여백을 주지 않는다(모바일에서 사라진다). ★ 그림 상자의 크기는 CSS 가 정한다. 스크립트는 --nxt-ar-w · --nxt-ar-h(이미지의 가로 · 세로)만 넣는다. 포인터 좌표는 getBoundingClientRect() 로 환산한다. ★ 그림 상자는 data-tool 이 달린 동안에만 touch-action:none 이다(끌어서 고르는 동안 화면이 굴러가지 않게). 끌 일이 있을 때 스크립트가 data-tool 을 달고, 없을 때는 뗀다 - 그동안은 그림 위에서 손가락으로 화면을 굴린다. 그림 상자 밖에서 끄는 것(가름선 등)은 도구 CSS 가 그 요소에 건다. (2026.10.15 공용 수거 : 전에는 늘 none 이고 도구 CSS 가 :not([data-tool]) 로 풀었다 - 그 줄은 이제 없어도 된다) [공용 수거 2026.10.15] .nxt-steps 의 scroll-margin-top(②) · 그림 상자의 touch-action 을 data-tool 일 때만(③-3) [명도 대비 - 상대휘도 계산. 글자 4.5:1 / 비텍스트 3:1] 이 파일이 더한 조합 : 올리기 칸(옅은 회색 #F5F7FB) : 안심 글 #0F766E 5.1 · 도움 글 #475569 7.1 · 오류 글 #B42318 6.1 올리기 칸 hover · 끌어놓는 중(옅은 파랑 #EAF1FE) : 안심 글 4.8 · 도움 글 6.7 · 오류 글 5.8 · 테두리 #1A56DB 5.5(비텍스트) 아래 고정 줄의 진행 중 단추 : #1445B0 / #EAF1FE 7.4 · 용량 안내 #334155 / #EAF1FE 9.1 사진 위에 얹는 것 = 흰 선 + 어두운 겉선을 함께 그린다(밝은 사진 · 어두운 사진 어디서나 3:1) 2026.10.14 최초 생성 (시안 renewal-p3.css ①②③ 이식) */ /* ========================================================================================== ① 토큰 (P3 가 더한 것만) ========================================================================================== */ .nxt.nxt-light{ /* P3 미리보기 무대(그림이 놓이는 칸)의 높이. PC = 화면 높이에서 틀 머리 · 단계 표시 · 안내 · 미리보기 아래 줄(합 약 470px)을 뺀 값. 1400 × 900 에서 430px → 미리보기 패널(무대 + 90px)의 아래 끝이 첫 화면 안에 온다 */ --nxt-p3-stage-h:clamp(300px,calc(100vh - 470px),640px); --nxt-p3-stage-vh:40vh; /* 900px 이하 : 위에 붙는 미리보기 패널의 높이(확정값 = 화면 높이의 40%) */ --nxt-p3-stage-min:240px; /* 그 최소 높이 (낮은 화면에서 그림이 아래 줄에 눌리지 않게) */ --nxt-checker:repeating-conic-gradient(var(--nxt-line) 0 25%,var(--nxt-panel) 0 50%) 0 0/16px 16px; /* 투명 바탕 무늬 */ /* 사진 위에 얹는 표시 : 흰 선 + 어두운 겉선을 함께 그린다 */ --nxt-on-photo:#FFFFFF; --nxt-on-photo-line:rgba(15,23,42,.6); --nxt-photo-dim:rgba(15,23,42,.5); /* 박스 밖 어둡게 */ /* 붓 자국(끄는 동안만 보인다. 캔버스에 그리는 스크립트가 이 값을 읽는다) : 가리는 붓 = 금색 / 지우개 = 빨강 / 복원 = 청록 */ --nxt-mark:rgba(251,191,36,.55); --nxt-mark-erase:rgba(180,35,24,.4); --nxt-mark-restore:rgba(15,118,110,.4); } /* ========================================================================================== ② P3 뼈대에서 고친 값 ==========================================================================================
    …3칸…
…올리기 한 장…
1단계
2단계부터(작업대)
…축소 안내…
미리보기 "위". 줄였을 때만
무대(.nxt-preview-stage) + 아래 줄(.nxt-preview-bar)
…조절…
…[다른 이미지] + 주 단추…
(가) .nxt-p3 의 자식이 감싸개 둘(.nxt-p3-main · .nxt-p3-side)이다. 축소 안내를 미리보기 칸 위에만 놓고, 아래 고정 줄을 조절 칸 아래에 놓기 위해서다. (나) .nxt-dock 은 .nxt-p3 밖이 아니라 .nxt-p3-side 의 마지막 자식이다. (다) 900px 이하 : 미리보기 쪽 감싸개(.nxt-p3-main)를 display:contents 로 푼다. 미리보기가 .nxt-p3 의 자식처럼 놓여 작업대가 끝날 때까지 위에 붙는다. 조절 쪽 감싸개(.nxt-p3-side)는 블록으로 둔다 - 아래 고정 줄이 붙는 범위다. (라) 아래 고정 줄은 position:sticky; bottom 이다(tool-parts.css) - 조절 칸이 화면에 있는 동안만 아래에 붙고, 조절 칸이 끝나면 제자리에 놓여 함께 올라간다. 미리보기 · 안내 본문 · 푸터를 가리지 않고, 숨기는 스크립트가 필요 없다. */ .nxt-light .nxt-p3-main{display:flex;flex-direction:column;gap:12px;min-width:0;align-self:stretch} /* stretch : 조절 칸이 더 길 때 미리보기가 붙어 있을 자리 */ .nxt-light .nxt-p3-side{display:flex;flex-direction:column;gap:12px;min-width:0} /* 단계를 바꿀 때 스크립트가 단계 표시를 화면에 들인다(scrollIntoView). PC 에서는 붙어 있는 틀 헤더에 가리지 않게 그만큼 띄운다 (2026.10.15 공용 수거 - 픽셀아트에서 올림) */ .nxt-light .nxt-steps{scroll-margin-top:var(--nxt-sticky-top)} @media (max-width:900px){ .nxt-light .nxt-steps{scroll-margin-top:12px} /* 틀 헤더가 붙지 않는다 - 화면 맨 위에 바짝 붙지 않을 만큼만 */ .nxt-light .nxt-p3-main{display:contents} .nxt-light .nxt-p3-side{display:block} /* 아래 고정 줄이 붙는 범위 = 이 감싸개(조절 패널 + 아래 줄) */ .nxt-light .nxt-p3 .nxt-preview-note{margin:0 0 12px} /* 미리보기 : 위에 붙는다(틀 헤더는 900px 이하에서 붙지 않는다 - top:0). 패널 높이 = 화면 높이의 40% (그 안에 무대 + 아래 줄 44px) 층 : 아래 고정 줄(--nxt-z-bar 40)보다 한 층 위다(시안은 5). 미리보기는 작업대(.nxt-p3)가 끝날 때까지 붙어 있어, 작업대를 지나 안내 본문으로 굴리는 동안 작업대의 마지막 부분(조절 패널 아래쪽 + 아래 줄)과 겹친다 - 그때 아래 줄이 미리보기 위를 덮지 않고 조절 패널처럼 미리보기 밑으로 지나가게 한다. 둘이 함께 붙어 있는 동안(미리보기 = 화면 위 40%, 아래 줄 = 화면 아래)에는 겹치지 않는다. 틀의 서랍 단추(60) · 덮개(65) · 서랍(70), 창 · 토스트(1000)보다 아래다 */ .nxt-light .nxt-panel.nxt-preview{top:0;z-index:calc(var(--nxt-z-bar) + 1);height:var(--nxt-p3-stage-vh);min-height:var(--nxt-p3-stage-min);padding:8px;gap:8px;box-shadow:0 6px 16px rgba(15,23,42,.1)} .nxt-light .nxt-controls{margin-top:var(--nxt-gap)} /* 아래 줄이 있는 동안(뿌리 data-nxt-dock="on") 토스트는 그 위로 올라간다 */ .nxt-light[data-nxt-dock="on"] .nxt-toasts{bottom:calc(var(--nxt-bar-h) + 28px + env(safe-area-inset-bottom,0px))} } /* ========================================================================================== ③-1 단계 표시 : 지난 단계로 되돌아가기 ========================================================================================== 끝난 단계(li[data-done="true"]) 안에 단추를 둔다. 지금 단계 · 아직인 단계는 tool-parts.css 의 마크업 그대로(글자만).
    • 돌아가면 작업물이 사라지는 곳(다른 이미지, 결과 → 남길 부분)은 확인창(NxTool.confirm)을 거친다. 칸 전체(44px)가 눌린다. */ .nxt-light .nxt-steps>li>.nxt-step-btn{flex:1 1 auto;align-self:stretch;display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;margin:-7px -13px;padding:7px 13px;border:0;border-radius:var(--nxt-r); background:none;color:inherit;font:inherit;line-height:1.3;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease} .nxt-light .nxt-steps>li>.nxt-step-btn:hover{background:var(--nxt-tint);color:var(--nxt-primary-dk)} .nxt-light .nxt-steps>li>.nxt-step-btn:active{background:var(--nxt-tint-dk)} .nxt-light .nxt-step-btn>.nxt-step-n{flex:none;border-color:var(--nxt-primary);background:var(--nxt-tint);color:var(--nxt-primary)} .nxt-light .nxt-step-btn>.nxt-step-label{min-width:0;text-decoration:underline;text-underline-offset:3px} @media (max-width:600px){ .nxt-light .nxt-steps>li>.nxt-step-btn{flex-direction:column;gap:4px;margin:-9px -5px;padding:9px 5px;text-align:center} } /* ========================================================================================== ③-2 올리기 칸 (1단계. 전체 폭 한 장) ==========================================================================================
    끌어놓는 동안 data-drag="true"

    이미지를 끌어다 놓거나 눌러서 고릅니다

    Tab 으로 닿고 Enter · Space 로 파일 창이 열린다 이미지가 아니거나 열지 못했을 때. 토스트가 아니라 이 자리

    사진은 서버로 보내지 않고 이 브라우저에서 처리합니다.

    JPG · PNG · WEBP …

    칸 어디를 눌러도 파일 창이 열린다(포인터). 키보드 사용자는 단추로 연다 - 칸 자체에는 tabindex 를 주지 않는다(같은 일을 하는 멈춤이 둘이 되지 않게). ★ 파일 입력이 칸 안에 있다 - 칸의 click 리스너는 e.target 이 파일 입력이면 돌아간다(input.click() 이 낸 click 이 칸으로 올라와 다시 여는 것을 막는다). 상태 : 기본(점선 + 옅은 회색) / hover(파란 점선 + 옅은 파랑) / 끌어놓는 중(파란 실선 + 옅은 파랑) / 오류(글 + 느낌표). */ .nxt-light .nxt-panel.nxt-drop{min-height:300px;padding:32px 16px;cursor:pointer;transition:border-color .15s ease,background .15s ease} .nxt-light .nxt-panel.nxt-drop:hover, .nxt-light .nxt-panel.nxt-drop[data-drag="true"]{border-color:var(--nxt-primary);background:var(--nxt-tint)} .nxt-light .nxt-panel.nxt-drop[data-drag="true"]{border-style:solid} .nxt-light .nxt-drop-ico{font-size:44px;line-height:1;color:var(--nxt-primary)} .nxt-light .nxt-drop-title{margin:0;font-size:18px;font-weight:700;line-height:1.4;color:var(--nxt-text)} .nxt-light .nxt-drop>.nxt-error{justify-content:center;margin:0} .nxt-light .nxt-drop-safe{display:flex;align-items:flex-start;justify-content:center;gap:6px;max-width:100%;margin:4px 0 0;font-size:14px;font-weight:700;line-height:1.5;color:var(--nxt-ok)} .nxt-light .nxt-drop-safe>.bi{flex:none;margin-top:3px;font-size:15px;line-height:1} .nxt-light .nxt-drop-hint{margin:0;font-size:13px;line-height:1.5;color:var(--nxt-text-3)} /* ========================================================================================== ③-3 미리보기 무대 · 그림 상자 · 미리보기 아래 줄 ==========================================================================================

    미리보기

    높이가 정해진 칸. 그림은 이 안에 비율을 지켜 가장 크게 놓인다
    스크립트가 이미지 크기를 --nxt-ar-w · --nxt-ar-h 로 넣는다 작업 캔버스 + 덧그림 캔버스(겹친다)
    …미리보기에 딸린 단추(실행취소 · 다시실행 · 박스 지우기 · 보기 전환)……오른쪽 끝…
    그림 상자의 크기 : 무대를 크기 컨테이너로 두고 width = min(무대 폭, 무대 높이 × 가로 ÷ 세로). 가로 그림 · 세로 그림 모두 잘리지 않는다. cq 단위를 모르는 브라우저에서는 폭 100% + 비율(세로로 긴 그림은 무대 아래가 잘린다 - 내려받는 결과에는 영향이 없다). 미리보기 아래 줄(44px)에는 미리보기에 딸린 것만 둔다. 되돌릴 것이 없으면 단추에 disabled. */ .nxt-light .nxt-preview-stage{position:relative;flex:none;display:grid;place-items:center;height:var(--nxt-p3-stage-h);min-width:0;border-radius:10px;background:var(--nxt-soft);overflow:hidden;container-type:size} .nxt-light .nxt-canvas-box{position:relative;width:100%;aspect-ratio:var(--nxt-ar-w,4)/var(--nxt-ar-h,3);border-radius:8px;box-shadow:0 0 0 1px var(--nxt-line-dk);overflow:hidden; -webkit-user-select:none;user-select:none} /* 끌어서 고르거나 칠하는 동안(스크립트가 data-tool 을 단 동안)에만 화면 굴리기를 막는다. 끌 일이 없는 상태(data-tool 없음)에서는 손가락으로 화면을 굴린다 - 900px 이하에서 미리보기가 화면 위 40% 를 차지해, 늘 막으면 그림 위에서 화면을 굴릴 수 없다. (2026.10.15 공용 수거 - 전에는 늘 막고 도구 CSS 가 풀었다) */ .nxt-light .nxt-canvas-box[data-tool]{touch-action:none} @supports (width:1cqw){ .nxt-light .nxt-canvas-box{width:min(100cqw - 2px,calc((100cqh - 2px) * var(--nxt-ar-w,4) / var(--nxt-ar-h,3)))} } .nxt-light .nxt-canvas-box>canvas, .nxt-light .nxt-canvas-box>svg, .nxt-light .nxt-canvas-layer{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none} .nxt-light .nxt-canvas-box[data-tool="rect"]{cursor:crosshair} .nxt-light .nxt-canvas-box[data-tool="brush"]{cursor:cell} .nxt-light .nxt-checker{background:var(--nxt-checker)} .nxt-light .nxt-preview-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:var(--nxt-h)} .nxt-light .nxt-preview-bar>.nxt-seg{margin:0} .nxt-light .nxt-preview-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;margin-left:auto} .nxt-light .nxt-preview-end.nxt-preview-grow{flex:1 1 200px} /* 남는 폭을 다 쓰는 것(가름선 막대) */ @media (max-width:900px){ .nxt-light .nxt-preview-stage{flex:1 1 0;height:auto;min-height:0} .nxt-light .nxt-preview-bar .nxt-btn{padding:8px 12px;font-size:14px} /* 남는 폭을 쓰는 것의 바탕 폭을 줄인다 - 200px 로는 375px(안쪽 326px)에서 보기 전환 옆의 막대가 둘째 줄로 떨어져 그만큼 그림이 작아진다 (2026.10.15 묶음 5 - 배경 제거의 CSS 에 있던 줄을 올렸다) */ .nxt-light .nxt-preview-end.nxt-preview-grow{flex-basis:120px} } /* ========================================================================================== ③-4 조절 패널 ==========================================================================================

    조절

    [전체 리셋]
    (.nxt-tabs + .nxt-tabpanel) 방식이 둘일 때. 탭은 칸을 반씩 나눈다

    …이 단계에서 할 일 한두 문장…

    선택 도구
    …

    …

    44px
    …다른 형식으로 저장(.nxt-actions)…
    범위 입력은 지금의 input[type=range] 그대로다(새 조절을 만들지 않는다). 줄 높이만 44px 로 잡아 손가락으로 잡기 쉽게 했다. 값은 output 에 쓴다. 전환 단추 · 고르는 칩을 NxTool.toggle 에 넘기려면 단추마다 data-value 와 aria-pressed 가 있어야 한다(tool-common.js 머리 주석). */ .nxt-light .nxt-controls .nxt-tabs>[role="tab"]{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px} .nxt-light .nxt-controls-lead{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--nxt-text-2)} .nxt-light .nxt-ctrl-group{min-width:0;margin:0 0 16px} .nxt-light .nxt-ctrl-group>.nxt-seg, .nxt-light .nxt-ctrl-group>.nxt-chips{margin:0} .nxt-light .nxt-range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;min-width:0;margin:0 0 12px} .nxt-light .nxt-range>.nxt-label{margin:0} .nxt-light .nxt-range-val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--nxt-primary-dk)} .nxt-light .nxt-range>input[type="range"]{grid-column:1/-1;width:100%;min-width:0;height:var(--nxt-h);margin:0;padding:0;accent-color:var(--nxt-primary);cursor:pointer} .nxt-light .nxt-range>input[type="range"]:focus-visible{outline-offset:-2px;border-radius:var(--nxt-r)} .nxt-light .nxt-range>.nxt-hint{grid-column:1/-1;margin:0} .nxt-light .nxt-controls-foot{min-width:0;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--nxt-line)} /* 색 띠 : 고르는 칩(.nxt-chip[aria-pressed]) 안에서 팔레트의 색을 보인다. 색은 도구 CSS 에서 data-palette 로 준다 */ .nxt-light .nxt-swatch{flex:none;display:block;width:28px;height:14px;border:1px solid var(--nxt-field-line);border-radius:4px} /* ========================================================================================== ③-5 아래 고정 줄 ==========================================================================================

    …주 단추를 누르기 전에 알아야 하는 한 줄…

    있을 때만(배경 제거 2단계)
    화면의 주 단추는 여기 하나다
    PC : 조절 패널 바로 아래(같은 칸). 900px 이하 : 화면 아래에 붙는다(tool-parts.css ② P3 의 sticky; bottom). 주 단추가 남는 폭을 다 쓴다. 진행 중 : 주 단추에 aria-busy="true" + aria-disabled="true" (흐리게 하지 않는다 - 글자를 읽어야 한다. P2 무대 주 단추와 같은 모양) */ .nxt-light .nxt-dock-row{display:flex;gap:8px;min-width:0} .nxt-light .nxt-dock-row>.nxt-btn{flex:0 1 auto;min-width:0} .nxt-light .nxt-dock-row>.nxt-btn-primary, .nxt-light .nxt-dock-row>.nxt-btn:only-child{flex:1 1 auto} .nxt-light .nxt-dock .nxt-btn[aria-busy="true"]{opacity:1;border-color:var(--nxt-tint-line);background:var(--nxt-tint);color:var(--nxt-primary-dk);cursor:progress} .nxt-light .nxt-dock-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border:1px solid var(--nxt-tint-line);border-radius:var(--nxt-r);background:var(--nxt-tint); font-size:13px;font-weight:700;line-height:1.5;color:var(--nxt-text-2)} .nxt-light .nxt-dock-note>.bi{flex:none;margin-top:2px;font-size:15px;line-height:1;color:var(--nxt-primary-dk)}