/* bg-remover.css - 공개 도구 "AI 배경 제거" 조각(WEB-INF/jsp/homepage/tool/bgRemover.jsp)의 스타일.
   2026.10.14 도구 개편 : P3 이미지 작업형 뼈대로 옮겼다(본보기 = 픽셀아트 & 모자이크).

   뿌리 : <div class="nxt nxt-bg-remover nxt-normal nxt-light" data-nxt="bg-remover" …>   작업대가 보이는 동안 data-nxt-dock="on", 지금 상태는 data-bgr-state
   걸리는 순서 : tool-common.css(토큰 · 패널) → tool-parts.css(공통 부품 · P3 뼈대) → tool-p3.css(P3 공통 부품) → 이 파일
                 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다)

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 단계 표시 · 올리기 칸 · 미리보기 무대 · 그림 상자 · 조절 패널 · 범위 입력 줄 · 아래 고정 줄은 tool-p3.css,
     단추 · 전환 단추 · 칩 · 안내 상자 · 진행 막대 · 실패 안내 · 토스트 · 확인창 · 안내 본문은 tool-parts.css 가 정한다 - 여기 다시 적지 않는다.
     ① 결과 - 비교 : 가름선 · 결과 칸의 잘라내기 · 꼬리표 · 가름선 막대      (시안 renewal-p3.css ⑤ 그대로)
     ② 결과 - 다듬기 : 배경색 견본                                          (시안 ⑤ 그대로)
     ③ 처리 중 · 실패 : 조절 패널 안에서의 여백                               (시안 ⑤ 그대로)
     ④ 가름선의 터치 동작
     ⑤ 900px 이하 : 미리보기 아래 줄이 한 줄에 들어오게(남길 부분 · 비교) · 남길 부분 단계의 토스트 자리
     (그림 상자의 터치 동작 · 단계 표시의 scroll-margin-top 은 2026.10.15 공용 수거로 tool-p3.css 에 올라갔다 - 여기 두지 않는다)
   [지운 것] 옛 규칙 전부 : 인라인 display 를 읽던 [style*="none"] · [style*="block"] 규칙, .dropzone · .dz-*, #fileInput 시각 숨김, .quality-row · .tool-toggle · .tt-btn,
     .mode-hint · .perf-note, .edit-canvas-wrap, .roi-skip-row, #progressWrap · .progress-*, .nxt-bgr-done, 빈 상태 바꾸기, .split-*, .section-title,
     .swatch-row · .bg-swatch, .slider-row, .btn-main · .btn-sub, .toolbar-row · .export-row.
   [규칙] 전부 .nxt-light.nxt-bg-remover 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다(② 의 견본 색은 데이터라 예외).

   ★ 여닫기는 전부 hidden 속성이다(스크립트가 data-when 을 보고 바꾼다). 이 파일은 display 로 화면을 바꾸지 않는다.
   ★ 스크립트가 캔버스에 그리는 색(CSS 가 닿지 않는다) : 남길 부분 박스 = 박스 밖 --nxt-photo-dim + 흰 선 --nxt-on-photo + 어두운 겉선 --nxt-on-photo-line,
     붓 자국 = 지우개 --nxt-mark-erase / 복원 --nxt-mark-restore (전부 tool-p3.css ① 의 토큰을 읽어 쓴다). */

/* ============ ① 결과 - 비교 (가름 보기) ============ */
/* <div class="nxt-canvas-box nxt-checker" style="--nxt-ar-w:…;--nxt-ar-h:…;--nxt-split:50%">       --nxt-split = 가름선 자리(왼쪽에서). 선을 끌어도, 아래 막대를 움직여도 이 값 하나가 바뀐다
     <canvas id="origCanvas"></canvas>                                                                  원본
     <div class="nxt-canvas-layer nxt-split-after nxt-checker" data-color="transparent"><canvas id="afterCanvas"></canvas></div>   결과(가름선 오른쪽만 보인다)
     <div class="nxt-split-line"><span class="nxt-split-grip" aria-hidden="true"><i class="bi bi-arrow-left-right"></i></span></div>
     <span class="nxt-split-tag" data-side="before">원본</span><span class="nxt-split-tag" data-side="after">결과</span>
   </div>
   가름선은 포인터로만 끈다(포커스를 받지 않는다). 키보드 · 낭독기는 미리보기 아래 줄의 막대를 쓴다 :
   <label class="nxt-split-range"><span>가름선</span><input type="range" min="0" max="100" value="50" aria-label="가름선 위치" aria-valuetext="왼쪽에서 50%"></label> */
.nxt-light.nxt-bg-remover .nxt-split-after{clip-path:inset(0 0 0 var(--nxt-split,50%))}
.nxt-light.nxt-bg-remover .nxt-split-after>canvas,
.nxt-light.nxt-bg-remover .nxt-split-after>svg{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none}
.nxt-light.nxt-bg-remover .nxt-split-line{position:absolute;top:0;bottom:0;left:var(--nxt-split,50%);width:3px;margin-left:-1.5px;background:var(--nxt-on-photo);box-shadow:0 0 0 1px var(--nxt-on-photo-line);cursor:ew-resize}
.nxt-light.nxt-bg-remover .nxt-split-grip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid var(--nxt-on-photo);border-radius:50%;
	background:var(--nxt-primary);color:#fff;font-size:16px;line-height:1;box-shadow:0 4px 12px rgba(15,23,42,.35)}
.nxt-light.nxt-bg-remover .nxt-split-tag{position:absolute;top:10px;padding:3px 10px;border-radius:999px;background:var(--nxt-inverse);color:#fff;font-size:13px;font-weight:700;line-height:1.5;pointer-events:none}
.nxt-light.nxt-bg-remover .nxt-split-tag[data-side="before"]{left:10px}
.nxt-light.nxt-bg-remover .nxt-split-tag[data-side="after"]{right:10px}
.nxt-light.nxt-bg-remover .nxt-split-range{flex:1 1 160px;display:flex;align-items:center;gap:8px;min-width:0;max-width:340px;margin:0;font-size:13px;line-height:1.3;color:var(--nxt-text-3)}
.nxt-light.nxt-bg-remover .nxt-split-range>input[type="range"]{flex:1 1 auto;width:100%;min-width:0;height:var(--nxt-h);margin:0;padding:0;accent-color:var(--nxt-primary);cursor:pointer}
.nxt-light.nxt-bg-remover .nxt-split-range>input[type="range"]:focus-visible{outline-offset:-2px;border-radius:var(--nxt-r)}
/* 막대 앞의 이름("가름선")은 줄어들지 않는다 - 좁은 칸에서 막대가 폭을 다 가져가 이름이 글자 단위로 꺾이던 것(375px 에서 확인) */
.nxt-light.nxt-bg-remover .nxt-split-range>span{flex:none;white-space:nowrap}

/* ============ ② 결과 - 다듬기 : 배경색 고르기 ============ */
/* <span class="nxt-label" id="x">배경색</span>
   <div class="nxt-colors" role="group" aria-labelledby="x">
     <button type="button" class="nxt-color" data-color="transparent" aria-pressed="true" aria-label="투명" title="투명"><i class="bi bi-check-lg" aria-hidden="true"></i></button>…
     <input type="color" class="nxt-color-pick" aria-label="배경색 직접 고르기" value="#fbbf24">
   </div>
   고른 것 = 흰 띠 + 파란 2px 띠 + 어두운 원 안의 체크(어떤 색 위에서도 보인다). 이름은 aria-label · title 로 준다. 44 × 44px.
   견본의 색은 옛 화면의 값 그대로다(값 자체가 데이터 - bg-remover.js 의 BG_COLORS 와 같아야 한다).
   결과 칸(.nxt-split-after)과 다듬기 동안의 그림 상자(.nxt-canvas-box)에도 같은 data-color 를 준다. 직접 고른 색(data-color="custom")만 인라인 background 다. */
.nxt-light.nxt-bg-remover .nxt-colors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:2px}
.nxt-light.nxt-bg-remover .nxt-color{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--nxt-field-line);border-radius:var(--nxt-r);cursor:pointer}
.nxt-light.nxt-bg-remover .nxt-color:hover{border-color:var(--nxt-text)}
.nxt-light.nxt-bg-remover .nxt-color>.bi{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--nxt-inverse);color:#fff;font-size:14px;line-height:1;visibility:hidden}
.nxt-light.nxt-bg-remover .nxt-color[aria-pressed="true"]{box-shadow:0 0 0 2px var(--nxt-panel),0 0 0 4px var(--nxt-primary)}
.nxt-light.nxt-bg-remover .nxt-color[aria-pressed="true"]>.bi{visibility:visible}
.nxt-light.nxt-bg-remover .nxt-color-pick{flex:none;width:44px;height:44px;margin:0;padding:2px;border:1px solid var(--nxt-field-line);border-radius:var(--nxt-r);background:var(--nxt-panel);cursor:pointer}
.nxt-light.nxt-bg-remover [data-color="transparent"]{background:var(--nxt-checker)}
.nxt-light.nxt-bg-remover [data-color="white"]{background:#FFFFFF}
.nxt-light.nxt-bg-remover [data-color="black"]{background:#000000}
.nxt-light.nxt-bg-remover [data-color="blue"]{background:#3B82F6}
.nxt-light.nxt-bg-remover [data-color="green"]{background:#22C55E}
.nxt-light.nxt-bg-remover [data-color="red"]{background:#F43F5E}

/* ============ ③ 처리 중 · 실패 : 조절 패널 안, 같은 자리 ============ */
/* 처리 중 : tool-parts.css 의 .nxt-progress (머리에 단계 글 + %). 낭독기 알림은 p.sr-only[role=status] 에 단계가 바뀔 때만 쓴다(% 마다 알리지 않는다).
   실패   : tool-parts.css 의 .nxt-state.nxt-state-fail[role=alert] + [다시 시도](이때의 주 단추). */
.nxt-light.nxt-bg-remover .nxt-controls .nxt-state{min-height:0;padding:8px 0 0}
.nxt-light.nxt-bg-remover .nxt-controls .nxt-progress{margin:0 0 12px}

/* ============ ④ 가름선의 터치 동작 ============ */
/* 그림 상자는 data-tool 이 달린 동안에만 touch-action:none 이다(tool-p3.css ③-3). 이 도구는 끌 일이 있을 때만 스크립트가 data-tool 을 단다 :
   남길 부분 단계 = rect(박스 그리기) / 다듬기에서 지우개 · 복원을 골랐을 때 = brush. 그 밖(처리 중 · 실패 · 비교 · 붓을 쓰지 않는 다듬기)에는 달지 않는다 -
   900px 이하에서 미리보기가 화면 위 40% 를 차지해, 늘 막으면 그림 위에서 손가락으로 화면을 굴릴 수 없다.
   비교에서 끄는 것은 가름선(손잡이 44px)뿐이라 그 선에만 건다. 그림을 톡 누르면 가름선이 그 자리로 온다(끌지 않는다). */
.nxt-light.nxt-bg-remover .nxt-split-line{touch-action:none}

/* ============ ⑤ 900px 이하 ============ */
@media (max-width:900px){
	/* 남길 부분 단계의 미리보기 아래 줄 : [박스 지우기] + 켜는 칩 [박스 없이 전체에서 찾기]가 375px(안쪽 325px)에서 한 줄에 들어오게 좌우 여백을 줄인다.
	   넘치면 두 줄이 되어 그만큼(52px) 그림이 작아진다. 칩의 높이(44px)는 그대로다 */
	.nxt-light.nxt-bg-remover .nxt-preview-bar{gap:6px}
	.nxt-light.nxt-bg-remover .nxt-preview-bar>.nxt-btn{padding-left:10px;padding-right:10px}
	.nxt-light.nxt-bg-remover .nxt-preview-bar>.nxt-chip{padding-left:12px;padding-right:12px}
	/* 비교의 미리보기 아래 줄 : 보기 전환(126px) + 가름선 막대가 한 줄에 들어온다 - 막대 쪽의 바탕 폭 120px 는 tool-p3.css ③-3 의 900px 이하 규칙이다(2026.10.15 공용으로 올림) */
	/* 남길 부분 단계는 아래 고정 줄이 높다(375px 에서 용량 안내 두 줄 60 + 단추 44 + 사이 · 여백 · 테두리 26 = 130px, 바닥에서 8px 떠 있다).
	   토스트([박스 지우기]의 확인)가 그 줄을 덮지 않게 그 위로 올린다. 공통(tool-p3.css ②)은 단추 한 줄(62px)만큼만 올린다 */
	.nxt-light.nxt-bg-remover[data-bgr-state="roi"] .nxt-toasts{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}