/* 혼합 브러시 — 지금 붓에 묻은 물감 견본 + 화살표 (책 716쪽 ③).
   무엇이 발리는지 보여 준다: 전경색일 수도, 그림에서 집어 온 색일 수도,
   둘이 섞인 색일 수도 있다. */
.mixer-ink-btn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px;
                 border: 1px solid var(--line); border-radius: 4px; background: none;
                 cursor: pointer; height: 22px; }
.mixer-ink-btn:hover { background: var(--hover, rgba(255,255,255,0.08)); }
.mixer-ink-swatch { width: 18px; height: 14px; border-radius: 2px; background: #000;
                    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); }
.mixer-ink-btn .ob-caret { width: 7px; height: 5px; fill: currentColor; opacity: 0.7; }

/* 색을 다루는 슬라이더 트랙 색 띠 — 원문 색상 균형·흑백 창이 이렇다.
   accent-color 로는 트랙 그림을 못 넣어서 트랙·손잡이를 직접 그린다. */
.opt-range.tinted { -webkit-appearance: none; appearance: none; background: transparent; }
.opt-range.tinted::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--track); border: 1px solid var(--line);
}
.opt-range.tinted::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 14px; margin-top: -5px;
  border-radius: 2px; background: var(--panel2); border: 1px solid #2b2b2b;
}
.opt-range.tinted::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--track); border: 1px solid var(--line);
}
.opt-range.tinted::-moz-range-thumb {
  width: 11px; height: 14px; border-radius: 2px; background: var(--panel2); border: 1px solid #2b2b2b;
}
/* 체크 칸은 "☑ 이름" 한 덩어리다 — 이름표가 왼쪽 고정 칸을 먹지 않는다 */
.adjust-row-check { gap: 6px; }
.adjust-row-check .adjust-label { min-width: 0; }
/* 조정 창 안 단추 (흑백의 자동 등) — 표 한 줄로 놓는다 */
.adjust-btn { padding: 3px 12px; font-size: 12px; }
/* 색 견본은 원문처럼 작은 사각형이다 (창 폭 전체로 늘어나면 안 된다) */
.adjust-row input.adjust-color { width: 40px; height: 22px; padding: 1px; flex: none; }

/* 조명 효과의 광원 패널 — 레이어 패널과 같은 규칙이라 생김새도 그쪽에 맞춘다.
   목록에서 활성 하나가 밝게 서고, 아래 단추 넷으로 종류별 추가와 삭제를 한다 */
.adjust-row:has(.adjust-lights) { flex-wrap: wrap; row-gap: 4px; }
.adjust-row:has(.adjust-lights) > .adjust-label { flex: 1 1 100%; }
.adjust-lights { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.adjust-lights-list {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 108px; overflow-y: auto;
  border: 1px solid var(--line, #444); border-radius: 3px; padding: 2px;
}
.adjust-light-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px; border: 0; border-radius: 2px;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.adjust-light-row:hover { background: rgba(255, 255, 255, 0.06); }
.adjust-light-row.on { background: rgba(255, 255, 255, 0.14); }
.adjust-light-eye { width: 12px; opacity: 0.35; }
.adjust-light-eye.on { opacity: 1; }
.adjust-lights-buttons { display: flex; gap: 4px; justify-content: flex-end; }
.adjust-lights-buttons button {
  width: 26px; height: 22px; padding: 0; line-height: 1;
  border: 1px solid var(--line, #444); border-radius: 3px;
  background: transparent; color: inherit; cursor: pointer;
}
.adjust-lights-buttons button:hover { background: rgba(255, 255, 255, 0.08); }

/* 사용자 정의 필터의 5×5 행렬 — 다섯 칸씩 다섯 줄. 가운데 칸이 그 화소 자신이라
   테두리를 진하게 해 눈에 띄게 한다.
   이름을 위에 두고 행렬을 아래에 깐다 — 한 줄에 나란히 두면 행렬이 왼쪽 열을 넘어
   오른쪽 단추(확인·취소) 위로 겹쳤다 (실측 2026-09-05, 창을 열어 눈으로 봤다). */
.adjust-row:has(.adjust-matrix5) { flex-wrap: wrap; row-gap: 4px; }
.adjust-row:has(.adjust-matrix5) > .adjust-label { flex: 1 1 100%; }
.adjust-matrix5 {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px;
  flex: 1 1 100%; max-width: 100%; min-width: 0;
}
.adjust-matrix5 input.adjust-mx {
  width: 100%; min-width: 0; height: 22px; padding: 1px 3px; flex: none;
  text-align: center; font-variant-numeric: tabular-nums;
}
.adjust-matrix5 input.adjust-mx-center { border-color: var(--fg, #ddd); font-weight: 600; }
/* 숫자 셋을 한 줄에 모아 두는 칸 (원문 색상 균형의 Color Levels) */
.adjust-row input.adjust-numrow-box { width: 52px; }
/* JS 로 만드는 작은 창들 — 창 안 여백과 단추 줄 (ERB 창은 자기 CSS 가 있다) */
.cleanup-modal, .copy-text-modal, .locklayers-modal { width: min(420px, calc(100vw - 40px)); padding: 14px 16px 12px; gap: 10px; }
/* ── 레이어 정리 창 — **레이어 패널 옆**에 뜬다 ──
   근거: adobe-help `ly-layer-cleanup.png` — 창이 화면 한가운데가 아니라 레이어 패널
   바로 왼쪽, 패널 위쪽 높이에 있다. 사장님 지적 2026-09-14
   ("이거 누르면 해당 속성 설정 창은 떠있는 패널로 나온다 항상 포토샵은").
   전에는 자리 지정이 없어 편집기 흐름에 끼어 세로로 908px 늘어나 있었다. */
.cleanup-modal {
  position: fixed; z-index: 60; width: 300px; padding: 0; gap: 0;
  height: auto; max-height: none; align-self: flex-start;
}
.cleanup-modal .cleanup-head { padding: 8px 10px 8px 12px; cursor: default; font-size: 13px; }
.cleanup-modal .cleanup-body { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 9px; }
.cleanup-modal .cleanup-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cleanup-modal .cleanup-row .opt-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cleanup-modal .cleanup-info { flex: none; color: var(--text-dim); cursor: help; font-size: 13px; }
.cleanup-modal .cleanup-scope-row > span { flex: none; color: var(--text-dim); }
.cleanup-modal .cleanup-scope { flex: 1 1 auto; min-width: 0; }
.cleanup-modal .modal-actions { padding: 4px 12px 12px; margin: 0; }
.copy-text-modal { width: min(680px, calc(100vw - 40px)); }
.cleanup-modal h3, .copy-text-modal h3, .locklayers-modal h3 { margin: 0; font-size: 14px; }
.copy-text-area { width: 100%; height: 320px; font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* 속성 패널 마스크 칸 — 원문(독일어 책 379쪽 그림 9.22)처럼 패널 안에 펼친다 */
.props-mask .props-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.props-mask .props-cap { min-width: 52px; font-size: 11px; color: var(--text-dim); }
.props-mask .opt-range { flex: 1; width: auto; }
.props-mask input.adjust-value-num { width: 46px; }
.props-mask-refine { display: block; margin: 6px 0 3px; }
.props-mask-btns, .props-adjust-btns { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px;
  border-top: 1px solid var(--line); padding-top: 6px; }
/* 조정 속성 아래 단추 다섯 (책 402쪽 그림 10.9 ②~⑥) — 켜진 것과 꺼진 것을 나타낸다 */
.props-adjust-btns .pm-btn.on { background: var(--panel2); border-color: var(--accent, #2d8cf0); }
.props-adjust-btns .pm-btn.on svg { stroke: var(--accent, #2d8cf0); }
.props-adjust-btns .pm-btn.off svg { stroke: var(--line); }
.props-adjust-btns .pm-btn[disabled] { opacity: .35; pointer-events: none; }
.pm-btn { width: 24px; height: 22px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.pm-btn:hover { background: var(--panel2); border-color: var(--line); }
.pm-btn svg { width: 14px; height: 14px; fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
/* 필터 창 안 미리 보기 — 원문(독일어 책 618쪽 그림 19.7)처럼 창 안에서 본다 */
.adjust-preview-box { margin-bottom: 8px; min-width: 0; max-width: 280px; }
.filter-smart-sharpen .adjust-preview-box { max-width: none; }
.adjust-preview-canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; cursor: grab;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 3px; }
.adjust-preview-canvas.dragging { cursor: grabbing; }
.adjust-preview-zoom { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.adjust-preview-zoom .ctx-btn { width: 24px; padding: 1px 0; }
.adjust-preview-pct { min-width: 46px; text-align: center; font-size: 12px; color: var(--text-dim); }
/* 소실점 창의 옛 규칙(창을 만들기 전에 미리 적어 둔 것)은 2026-09-04 에 지웠다.
   창을 책 587쪽 그림 17.44 대로 만들면서 새 규칙을 이 파일 끝에 뒀다.
   남겨 뒀더니 `.vp-paste-btn { width: 100% }` 가 옵션 막대의 붙여넣기 단추를
   막대 전체로 늘려, 확인·취소가 창 밖으로 밀려났다 (실측: 단추 폭 1038px) */

/* PDF 가져오기 창 — 원문 창(독일어 책 74쪽 그림 2.1)의 두 칸 배치.
   왼쪽에 쪽 미리보기 격자, 오른쪽에 쪽 옵션. */
.pdf-modal { width: min(880px, 92vw); }
.pdf-body { display: flex; gap: 12px; padding: 10px 12px; }
.pdf-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pdf-pages { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  max-height: 46vh; overflow-y: auto; padding: 8px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 4px; }
.pdf-page { position: relative; padding: 0; background: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 3px; line-height: 0; }
.pdf-page canvas { display: block; max-width: 100%; }
.pdf-page.on { border-color: var(--blue); }
.pdf-page-no { position: absolute; left: 3px; bottom: 3px; padding: 0 4px;
  font-size: 10px; line-height: 14px; color: #fff; background: rgba(0, 0, 0, .6);
  border-radius: 2px; }
.pdf-count-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pdf-count-row .pdf-count { flex: 1; }
.pdf-right { width: 220px; display: flex; flex-direction: column; gap: 4px; }
.pdf-right label:not(.opt-check) { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }

/* Median / Dust & Scratches: square preview left, actions right, values below.
   Photoshop reference: Rheinwerk p.635 and Essentials stubble/dust-scratches.jpg. */
.adjust-backdrop .adjust-form.filter-classic {
  grid-template-areas: "preview actions" "fields fields";
  grid-template-columns: minmax(0, 1fr) 100px;
  width: 360px;
  max-width: 100%;
}
.adjust-backdrop .filter-classic .adjust-actions { width: 100px; min-width: 100px; }
.adjust-backdrop .filter-classic .adjust-preview-canvas { height: auto; aspect-ratio: 1; }

.adjust-backdrop .filter-classic .adjust-preview-zoom .ctx-btn { min-width: 24px; width: 24px; flex: none; }

/* Smart Sharpen: large preview on the left, settings and confirmation on the right. */
.adjust-backdrop .adjust-form.filter-smart-sharpen {
  width: min(900px, calc(100vw - 80px));
  grid-template-columns: minmax(160px, 1fr) minmax(240px, 320px) 126px;
  grid-template-areas: "preview fields actions";
}
.adjust-backdrop .filter-smart-sharpen .adjust-actions { width: 126px; min-width: 126px; }
.adjust-backdrop .filter-smart-sharpen .adjust-preview-canvas { height: auto; aspect-ratio: 1; }
@media (max-width: 700px) {
  .adjust-backdrop .adjust-form.filter-smart-sharpen {
    grid-template-columns: minmax(0, 1fr) 126px;
    grid-template-areas: "preview preview" "fields actions";
  }
}

.adjust-backdrop .filter-smart-sharpen .adjust-preview-zoom .ctx-btn { min-width: 24px; width: 24px; flex: none; }

.adjust-point { width: 160px; height: 140px; max-width: 100%; cursor: crosshair; touch-action: none; border: 1px solid var(--line); }
.adjust-point:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Rheinwerk p.754: a small square picks the center of the filter preview. */
.adjust-backdrop.filter-preview-active:not([hidden]) { cursor: default; }
.adjust-backdrop.filter-preview-active.over-filter-preview:not([hidden]) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M3 3h12v12H3z' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M3 3h12v12H3z' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 9 9, crosshair;
}