/* ── 조정 창의 "넓은 것" 줄 — 이름·값은 첫 줄, 큰 것(히스토그램·색 띠)은 그 아래 통째로.
   원문 한계값(#73)·그레이디언트 맵(#74) 배치다 (2026-09-02).
   앞의 슬라이더 줄 규칙과 겹치므로 **파일 끝**에 두어 이기게 한다. */
.adjust-row:has(.adjust-hist), .adjust-row:has(.adjust-ramp) { flex-wrap: wrap; row-gap: 4px; }
.adjust-row:has(.adjust-hist) > .adjust-label,
.adjust-row:has(.adjust-ramp) > .adjust-label { order: 1; flex: 1 1 auto; min-width: 0; }
.adjust-row:has(.adjust-hist) > .adjust-value-num,
.adjust-row:has(.adjust-hist) > .adjust-value,
.adjust-row:has(.adjust-ramp) > .adjust-value-num { order: 2; flex: none; }
.adjust-fields .adjust-row:has(.adjust-hist) > .adjust-hist,
.adjust-fields .adjust-row:has(.adjust-ramp) > .adjust-ramp { order: 3; flex: 1 1 100%; width: 100%; }
.adjust-fields .adjust-row:has(.adjust-hist) > .adjust-value,
.adjust-fields .adjust-row:has(.adjust-ramp) > .adjust-value { order: 2; flex: none; }
.adjust-ramp { display: flex; flex-direction: column; gap: 4px; }
.adjust-ramp-canvas { width: 100%; height: 22px; border: 1px solid var(--line); border-radius: 2px; }

/* ── 곡선 창 (사장님 화면 #58, 2026-09-02) ──
   왼쪽에 도구 둘 + 격자 + 스포이드 · 가운데에 보기 설정 · 오른쪽에 단추 열 */
.curves-backdrop .adjust-modal { width: 700px; }
.curves-form { width: auto; }
.curves-body { display: flex; align-items: flex-start; gap: 14px; }
.curves-main { flex: none; width: 300px; }
.curves-tools { display: flex; gap: 4px; margin-bottom: 6px; }
.curves-tool { padding: 3px 7px; }
.curves-tool svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; }
.curves-tool.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.curves-plot { display: grid; grid-template-columns: auto 1fr; gap: 4px 6px; align-items: center; }
.curves-plot .curves-grid { grid-column: 2; width: 256px; height: 256px; border: 1px solid var(--line); }
.curves-axis { color: var(--text-dim); font-size: 11px; }
.curves-axis-out { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
.curves-spread { grid-column: 2; grid-row: 2; position: relative; height: 12px; width: 256px; cursor: ew-resize; }
.curves-axis-in { grid-column: 2; grid-row: 3; }
.curves-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.curves-foot .levels-droppers { margin: 0; flex: none; }
.curves-opts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.curves-opts .dlg-fieldset { padding: 6px 8px 8px; }
.curves-opts .opt-check { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.curves-grid-btns { display: flex; gap: 5px; }
.curves-gridbtn { padding: 3px 6px; }
.curves-gridbtn svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1; }
.curves-gridbtn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.curves-preview-label { margin-top: 8px; }
.curves-io { display: flex; gap: 10px; margin-top: 6px; }
.curves-io-row { display: flex; align-items: center; gap: 5px; }
.curves-backdrop.over-canvas { cursor: var(--eyedrop-cursor, crosshair); }
.curves-preset-menu { position: fixed; z-index: 95; min-width: 150px; }
/* 곡선 창 손질 — 폼 공통 규칙(width:100%)이 목록·단추를 늘렸다 */
.curves-form .curves-channel, .curves-form .curves-preset-select { width: auto; }
.curves-channel-fix { }
.curves-form .levels-channel-row .curves-channel { flex: 0 0 150px; }
.curves-form .levels-preset-row .curves-preset-select { flex: 1 1 auto; min-width: 0; }
.curves-tools .curves-tool { flex: none; width: 30px; justify-content: center; }
.curves-foot .levels-dropper { flex: none; width: 30px; }
.curves-foot .opt-check { white-space: nowrap; flex: none; }
.curves-axis-out { max-height: none; white-space: nowrap; overflow: visible; }   /* 세로 글이 꺾여 깨져 보였다 */
.curves-io .curves-input, .curves-io .curves-output { width: 66px; }
.curves-form .curves-tools .curves-tool,
.curves-form .curves-foot .levels-dropper { width: 32px; min-width: 32px; flex: 0 0 32px; padding: 3px 0; }
.curves-form .curves-plot .curves-axis-out { align-self: stretch; }

/* 어두운 영역/밝은 영역 창은 줄이 한 줄이다 — 이름 · 슬라이더 · 값 칸 (원문 화면 #77) */
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) { flex-wrap: nowrap; }
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) > .adjust-label { order: 1; flex: 0 0 92px; min-width: 0; }
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) > input[type="range"] { order: 2; flex: 1 1 auto; width: auto; }
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) > .adjust-value,
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) > .adjust-value-num { order: 3; flex: none; }
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) > .adjust-unit { order: 4; flex: none; }

/* ── HDR 토닝 창 (사장님 화면 #78, 2026-09-03) ── */
.adjust-group.collapsible > legend { cursor: pointer; user-select: none; }
.adjust-group.collapsible > legend::before { content: "▽ "; font-size: 9px; color: var(--text-dim); }
.adjust-group.collapsible.collapsed > legend::before { content: "▷ "; }
.adjust-group.collapsible.collapsed > :not(legend) { display: none; }
.adjust-row-curve { display: block; }
.tone-curve { display: flex; flex-direction: column; gap: 6px; }
.tone-curve-grid { width: 100%; max-width: 190px; aspect-ratio: 1; border: 1px solid var(--line); cursor: crosshair; align-self: center; }
.tone-curve-io { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-dim); font-size: 11.5px; }
.tone-curve-io label { display: flex; align-items: center; gap: 4px; }
.tone-curve-io .adjust-value-num { width: 58px; }
.tc-reset { padding: 2px 9px; margin-left: auto; min-width: 0; width: auto; flex: none; }
/* 무리가 넷이라 창이 길다 — 줄 사이를 좁혀 900px 화면에 들어가게 (원문 #78 도 빽빽하다) */
.adjust-group.collapsible { padding: 2px 10px 6px; margin: 2px 0 0; }
.adjust-group.collapsible .adjust-row { gap: 3px 10px; }
.adjust-group.collapsible .adjust-value-num { padding: 1px 4px; }   /* 0.52 같은 소수가 잘리지 않게 */
.adjust-backdrop .adjust-fields:has(.collapsible) { gap: 4px; }

/* HDR 토닝 창의 표시 방식 (화면 #78) — 세모 손잡이, "이름(R):" 쌍점·오른쪽 맞춤, 톱니 프리셋 단추 */
body.editor-body .adjust-backdrop .adjust-form.tri-thumbs input[type="range"]::-webkit-slider-thumb {
  width: 11px; height: 9px; margin-top: 0; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body.editor-body .adjust-backdrop .adjust-form.tri-thumbs input[type="range"]::-moz-range-thumb {
  width: 11px; height: 9px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.adjust-backdrop .adjust-form.label-colon .adjust-row > .adjust-label:not(:empty) { text-align: right; }
.adjust-backdrop .adjust-form.label-colon .adjust-row > .adjust-label:not(:empty)::after { content: ":"; }
.adjust-backdrop .adjust-form.label-colon .adjust-row-check > .adjust-label::after { content: none; }
.adjust-backdrop .adjust-form.hdr .adjust-group .adjust-row-check { margin-left: 100px; }   /* 체크는 슬라이더 시작선에 맞춘다 */
/* 폼 폭은 420px 고정인데 한 줄 배치(이름 92 + 슬라이더 + 값 58 + 단위)는 그보다 넓다 → 이 창만 넓힌다 (원문 #78 도 510px) */
.adjust-backdrop .adjust-form.hdr { width: 510px; }
/* fieldset 은 기본으로 min-inline-size: min-content 라 안쪽 줄이 길면 열 밖으로 넘친다 (단추와 겹쳤다) */
.adjust-form.hdr .adjust-group { min-inline-size: 0; }
.adjust-backdrop .adjust-form.inline-rows .adjust-row:has(input[type="range"]) > input[type="range"] { min-width: 0; }
.adjust-form.hdr .adjust-group .adjust-row { min-height: 26px; }
.adjust-form.hdr .tone-curve-io label { white-space: nowrap; }
.adjust-form.hdr .tone-curve-io .adjust-value-num { width: 50px; min-width: 50px; max-width: 50px; }
.adjust-form.hdr .tone-curve-io .tc-reset { width: 30px; min-width: 30px; padding: 2px 0; }   /* 원문은 작은 ↺ 아이콘 단추 */
.adjust-form.hdr .adjust-row[data-field-key="method"] > .adjust-label { text-align: left; flex: 0 0 auto; min-width: 0; }   /* "방법:" 은 무리 들여쓰기 자리에 왼쪽 맞춤 (#78) */
.adjust-form.hdr .tone-curve-plot {
  display: grid; grid-template-columns: 10px 1fr; grid-template-rows: 1fr 10px; gap: 3px;
  width: 100%; max-width: 275px; align-self: center;
}
.adjust-form.hdr .tone-curve-grid { grid-row: 1; grid-column: 2; max-width: none; border: 1px solid var(--line); }
.adjust-form.hdr .tc-vbar { grid-row: 1; grid-column: 1; background: linear-gradient(to top, #000, #fff); border-radius: 2px; }
.adjust-form.hdr .tc-hbar { grid-row: 2; grid-column: 2; background: linear-gradient(to right, #000, #fff); border-radius: 2px; }
.adjust-form.hdr .tone-curve-io { flex-wrap: nowrap; }

/* 곡선 창 세로 축 이름이 두 글자로 꺾여 깨져 보였다 */
.curves-axis-out { white-space: nowrap; }

/* 곡선 창: 점을 고르기 전에는 입력·출력 칸이 안 보인다 (화면 #58). 자리는 남겨 창이 안 흔들리게 */
.curves-io.hidden-io { visibility: hidden; }

/* 한계값 창의 손잡이는 세모다 (사장님 화면 #73) — 조정 창 공통 동그라미에서 이 슬라이더만 뺀다 */
body.editor-body .adjust-backdrop input[type="range"].adjust-hist-range::-webkit-slider-thumb {
  width: 11px; height: 9px; margin-top: 0; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body.editor-body .adjust-backdrop input[type="range"].adjust-hist-range::-moz-range-thumb {
  width: 11px; height: 9px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* 이름 뒤 글자 힌트는 붙여 쓴다 — .opt-check 가 flex 라 낱말과 힌트가 5px 벌어졌다 */
.opt-check .key-hint { margin-left: -5px; }
/* 흐린 단추 — 곡선 창의 매끄럽게는 연필 모드가 아니면 흐리다 (화면 #58) */
.ctx-btn:disabled { opacity: .45; cursor: default; }

/* 라디오 한 갈래와 그 갈래가 다루는 칸이 한 줄 (사진 필터 #68) */
.adjust-row.adjust-pair-row { display: flex; align-items: center; gap: 8px; }
.adjust-row.adjust-pair-row > .opt-check { flex: 0 0 92px; }
.adjust-row.adjust-pair-row > select { flex: 1 1 auto; min-width: 0; }
/* 색 견본은 작은 네모다 (#68) — 줄 폭을 다 먹지 않는다 */
.adjust-row.adjust-pair-row > .adjust-color { flex: 0 0 62px; width: 62px; height: 20px; padding: 0; }

/* 그레이디언트 맵의 띠 자리 — 넓은 띠 + 오른쪽 ⌄ 하나 (사장님 화면 #74) */
.adjust-ramp { position: relative; }
.adjust-ramp-row { display: flex; align-items: stretch; gap: 4px; }
.adjust-ramp-row > .adjust-ramp-canvas { flex: 1 1 auto; height: 22px; cursor: pointer; }
.adjust-ramp-arrow {
  flex: 0 0 18px; width: 18px; padding: 0; line-height: 1;
  background: var(--btn, #3a3a40); color: var(--text); border: 1px solid var(--line);
  border-radius: 2px; cursor: pointer; font-size: 11px;
}
.adjust-ramp-arrow:hover { background: var(--btn-hover, #45454c); }
.adjust-ramp-menu {
  position: absolute; top: 26px; right: 0; left: 0; z-index: 40;
  max-height: 240px; overflow-y: auto; padding: 3px;
}
.adjust-ramp-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.adjust-ramp-mini { width: 60px; height: 14px; flex: 0 0 60px; border: 1px solid var(--line); }

/* 곡선 창 격자 아래 손잡이 둘 — 레벨 창과 같은 모양이지만 이름은 따로 쓴다
   (같은 이름이면 레벨 창 손잡이를 찾는 querySelector 가 이것을 먼저 잡는다) */
.spread-handle.csp-black { border-bottom-color: #111; filter: drop-shadow(0 0 1.5px #fff); }
.spread-handle.csp-white { border-bottom-color: #fff; filter: drop-shadow(0 0 1px #000); }

/* 개체 선택 옵션바의 객체 찾기 단추 셋 (↻ · ⊞ · ⚙) 과 그 설정 메뉴 */
.objsel-finder-wrap { position: relative; display: inline-flex; }
.opts-objsel .objsel-refresh, .opts-objsel .objsel-showall, .opts-objsel .objsel-finder-btn {
  padding: 2px 6px; min-width: 24px;
}
.opts-objsel .objsel-showall.on, .opts-objsel .objsel-finder-btn.on { background: var(--blue); color: #fff; }
/* 자리는 열 때 자바스크립트가 잡는다 (.ctx-menu 는 화면 기준 position: fixed 다 —
   옵션바 안에 절대 자리로 붙이면 문서 탭 줄이 그 위에 깔려 안 보인다) */
.objsel-finder-menu { min-width: 210px; padding: 4px 0; }
.objsel-finder-menu .menu-head { padding: 4px 8px 2px; color: var(--text-dim); font-size: 11px; }
.objsel-finder-menu .menu-sep { height: 1px; margin: 4px 0; background: var(--line); }
/* 메뉴는 한 줄에 하나씩이다 — opt-check 가 inline-flex 라 그냥 두면 옆으로 늘어선다 */
.objsel-finder-menu .opt-check { display: flex; padding: 3px 8px; }
.objsel-finder-menu .of-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; white-space: nowrap; }
.objsel-finder-menu .of-row select { flex: 1 1 auto; }
.objsel-finder-menu .of-row input[type="number"] { width: 52px; }

/* 노출 창은 원문이 447px 이라 왼쪽 슬라이더가 길다 (사장님 화면 #59) */
.adjust-backdrop .adjust-form.exposure { width: 450px; }

/* 물체를 찾는 동안 ↻ 가 돈다 (원문도 그렇다 — 멈추면 다 찾은 것이다) */
@keyframes objsel-spin { to { transform: rotate(360deg); } }
.opts-objsel .objsel-refresh.spin { animation: objsel-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .opts-objsel .objsel-refresh.spin { animation: none; opacity: .6; } }

/* 조정 창 줄 높이를 원문에 맞춘다 (사장님 화면 실측 2026-09-03).
   우리 한 묶음이 68px 이라 흑백 창이 738px 까지 늘어났다 — 원문은 572px 다.
   값 칸 28→24, 슬라이더 24→18, 줄 사이 10→8 로 줄이면 묶음이 52px 가 된다.
   속성 패널(.props-adjust-fields)은 그대로 둔다 — 거기 배치는 원문도 다르다 */
.adjust-backdrop .adjust-fields { gap: 8px; }
.adjust-backdrop .adjust-value-num { padding: 1px 5px; height: 24px; }
.adjust-backdrop .adjust-row > input[type="range"] { height: 18px; }
/* 그레이디언트 맵의 색 띠가 왼쪽 칸을 넘어 확인 단추와 겹쳤다 (실측 294 > 272) */
.adjust-backdrop .adjust-row > .adjust-ramp { min-width: 0; max-width: 100%; }
.adjust-ramp-row { min-width: 0; }
.adjust-ramp-row > .adjust-ramp-canvas { min-width: 0; }

/* 만질 것이 없는 조정 — 원문은 기울임체로 "…의 옵션 없음" 이라고 적는다
   (사장님 포토샵 화면 13 「반전」, 2026-09-14). 빈 칸으로 두지 않는다. */
.adjust-no-options { margin: 18px 0; text-align: center; font-style: italic;
  font-size: 12px; color: var(--text-dim); }

/* 레벨 속성 패널의 입력·출력 줄 — 세 자료가 같은 배치다 (책 438쪽 그림 13.3 ⑤⑦⑧ ·
   photoshopessentials levels-input-sliders.gif · 사장님 포토샵 화면, 2026-09-14):
   바탕(히스토그램 또는 검정→흰색 띠) 바로 **아래**에 손잡이가 앉고, 그 아래가 숫자 칸이다. */
.adj-lv-row { display: block; }
.adj-lv { display: block; position: relative; }
.adj-lv-hist { display: block; width: 100%; height: 62px; background: var(--sunken);
  border: 1px solid var(--line); border-radius: 2px; }
.adj-lv-ramp { display: block; height: 12px; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(to right, #000, #fff); }
.adj-lv-handles { position: relative; display: block; height: 12px; margin-top: 2px; }
.adj-lv-handle { position: absolute; top: 0; width: 0; height: 0; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid var(--text-dim); cursor: ew-resize; }
.adj-lv-handle.lv-black, .adj-lv-handle.lv-outBlack { border-bottom-color: #111; }
.adj-lv-handle.lv-gamma { border-bottom-color: #8a8a8a; }
.adj-lv-handle.lv-white, .adj-lv-handle.lv-outWhite { border-bottom-color: #eee; }
.adj-lv-nums { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.adj-lv-nums .adj-lv-num { flex: 1 1 0; min-width: 0; text-align: center; }
.adj-lv-outlabel { flex: none; font-size: 11px; color: var(--text-dim); }
.adj-lv-out { margin-top: 10px; }

/* 곡선 창 몸통이 속성 패널에 들어왔을 때 — 좁은 칸에 맞게 세로로 쌓는다.
   근거: 책 452쪽 그림 14.2 · 사장님 최신판 화면 05 — 속성 패널에는
   **확인·취소·미리 보기가 없다** (창에만 있는 칸이다). 격자 크기·표시 옵션은
   원문에서 패널 메뉴(≡)의 「곡선 표시 옵션…」 안으로 들어가 있어 여기서는 접는다. */
.curves-form.in-props { width: auto; padding: 0; gap: 6px; }
.curves-form.in-props .curves-body { display: block; }
.curves-form.in-props .curves-opts { display: none; }
.curves-form.in-props .levels-side { display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 4px; margin-top: 8px; }
.curves-form.in-props .levels-side .primary-btn,
.curves-form.in-props .levels-side .curves-preview-label,
.curves-form.in-props .levels-side [data-alt-label] { display: none; }
.curves-form.in-props .curves-grid { width: 100%; height: auto; max-width: 236px; }
.curves-form.in-props .levels-preset-row,
.curves-form.in-props .levels-channel-row { flex-wrap: wrap; }

/* 목표 지향 보정 도구 (책 403쪽 그림 10.10 ⑧ · 452쪽 14.2 ⑤ · 482쪽 15.22 ①).
   켜면 캔버스 커서가 **끄는 방향**을 알려 준다 — 곡선은 위아래, 나머지는 좌우
   (책 458쪽: 단추 모양이 어느 쪽으로 끌지를 알려 준다). */
.targeted-btn { flex: none; width: 26px; height: 24px; display: grid; place-items: center; }
.targeted-btn svg { width: 15px; height: 15px; fill: none; stroke: var(--text-dim); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }
.targeted-btn.on { background: var(--panel2); border-color: var(--accent, #2d8cf0); }
.targeted-btn.on svg { stroke: var(--accent, #2d8cf0); }
.adjust-row-targeted { gap: 6px; }
.viewport.targeted-updown { cursor: ns-resize; }
.viewport.targeted-sideways { cursor: ew-resize; }

/* 조정 패널의 스포이드 — 노출 셋 (책 570쪽) · 색상 및 활기 하나 (책 517쪽) */
.adj-droppers { display: inline-flex; gap: 4px; }
.adj-droppers .adjust-dropper { width: 26px; height: 24px; display: grid; place-items: center; }
.adj-droppers .adjust-dropper svg { width: 14px; height: 14px; fill: none; stroke: var(--text-dim);
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* 켜진 표시는 창 단추와 같은 클래스를 쓰므로 여기서만 덧칠하지 않는다 —
   창 CSS(.adjust-dropper.on)가 이미 있으면 그것이 그대로 걸린다 */
.adj-droppers .adjust-dropper.on { background: var(--panel2); border-color: var(--accent, #2d8cf0); }
.adj-droppers .adjust-dropper.on svg { stroke: var(--accent, #2d8cf0); }
/* 스포이드 셋은 슬라이더 아래 **왼쪽**에 모인다 (화면 06) */
.adjust-row-droppers { justify-content: flex-start; }
.viewport.adj-picking { cursor: crosshair; }

/* 색 네모가 붙는 고르개 — 선택 색상의 「■ 빨강 계열」 (책 435쪽 · 사장님 화면 12).
   목록 안까지 색을 칠할 길은 브라우저마다 달라, 고른 색을 고르개 왼쪽에 낸다. */
.adjust-sel-swatch {
  flex: none; width: 14px; height: 14px; border-radius: 2px;
  border: 1px solid var(--line);
}

/* ── 두 보색 사이를 옮기는 슬라이더 (색상 균형) ──
   이름이 왼쪽 칸에 서지 않고 띠 **양 끝**에 하나씩 선다. 값 칸은 띠 밖 오른쪽이다.
   근거: 독일어 책 431쪽 그림 12.5 (Cyan…Rot / Magenta…Grün / Gelb…Blau) ·
   사장님 최신판 캡처 08 (녹청…빨강 / 마젠타…녹색 / 노랑…파랑), 2026-09-14.
   앞의 `.adjust-row:has(input[type="range"])` 두 줄 규칙을 이겨야 하므로 파일 끝에 둔다. */
.adjust-row.adjust-row-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.adjust-row-ends > .adjust-ends-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adjust-row-ends .adjust-ends { display: flex; justify-content: space-between; gap: 10px; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.adjust-row-ends .opt-range { width: 100%; min-width: 0; flex: none; }

/* 속성 패널의 「상대치 / 절대치」 줄 — 이름 없이 가운데로 선다
   (책 435쪽 그림 12.13 · 사장님 최신판 캡처 12, 2026-09-14) */
.adjust-row.adjust-row-center { justify-content: center; }

/* 속성 패널의 값 칸은 숫자를 **왼쪽**에 붙인다 (창은 오른쪽 그대로).
   근거: 사장님 최신판 캡처 04·06·08·09·12 와 책 435쪽 그림 12.13 ·
   482쪽 15.22 가 다 왼쪽이다 (2026-09-14). */
.props-adjust-fields .adjust-value-num { text-align: left; }

/* ── 한계값 — 히스토그램이 **위**, 「한계값 레벨 : [128]」 이 그 아래 한 줄 (캡처 15).
   창은 반대(이름·값이 위)라 패널에만 건다.
   앞 규칙(`:has(input[type="range"])`)이 이름표를 order 1 로 잡아 두므로
   같은 이름을 한 번 더 적어 힘을 높인다 — 안 그러면 이름이 히스토그램 위에 남는다. */
.props-adjust-fields .adjust-row:has(.adjust-hist) > .adjust-hist.adjust-hist { order: 1; }
.props-adjust-fields .adjust-row:has(.adjust-hist) > .adjust-label.adjust-label { order: 2; flex: 0 0 auto; }
.props-adjust-fields .adjust-row:has(.adjust-hist) > .adjust-value-num.adjust-value-num { order: 3; }

/* ── 색조/채도 — 「색상 범위 선택 :」 이 제 줄이고 스포이드 셋이 그 아래 줄이다 (캡처 07) */
.props-adjust-fields .adjust-row[data-field-key="hsToolsPanel"] { flex-wrap: wrap; row-gap: 4px; }
.props-adjust-fields .adjust-row[data-field-key="hsToolsPanel"] > .adjust-label { flex: 1 1 100%; }

/* ── 꺼진 줄은 값 칸이 **비어** 보이고 손잡이가 없다.
   근거: 사장님 최신판 캡처 03 (그레인) — 「양」이 0이면 「크기」·「거칠음」 칸이 비고
   슬라이더에 손잡이가 안 보인다. 값은 그대로 들고 있다가 켜지면 다시 나온다.
   근거가 **속성 패널** 화면이라 패널에만 건다 — 창 쪽 흐린 줄(HDR 토닝·어두운 영역)은
   값이 보이는 채로 둔다. 재어 본 화면이 없는 자리를 같이 바꾸지 않는다. */
.props-adjust-fields .adjust-row.dim .adjust-value-num { color: transparent; }
.props-adjust-fields .adjust-row.dim .opt-range::-webkit-slider-thumb { opacity: 0; }
.props-adjust-fields .adjust-row.dim .opt-range::-moz-range-thumb { opacity: 0; }

/* 곡선 속성 패널의 채널 줄 — 원문은 「[손] [RGB ▾] [자동]」 이고 **이름표가 없다**.
   근거 둘이 같다: 책 452쪽 그림 14.2 ⑤⑥⑦ · 사장님 최신판 캡처 05 (2026-09-14).
   창(Ctrl+M)에는 「채널(C):」 이름표가 그대로 있다. */
.curves-form.in-props .levels-channel-row > .levels-row-label { display: none; }
.curves-form.in-props .levels-channel-row { flex-wrap: nowrap; gap: 6px; }
.curves-form.in-props .levels-channel-row > .curves-channel { flex: 1 1 auto; min-width: 0; }
.curves-form.in-props .levels-channel-row > .curves-auto-btn { flex: none; margin-left: auto; }

/* ── 그레이디언트 조정 속성 패널 ──
   원문은 「☐ 반전  ☐ 디더」 가 한 줄이고 그 아래 나눔줄이 하나 있다.
   스타일 아이콘 줄 앞에도 이름표가 선다.
   근거 둘이 같다: 독일어 책 744쪽 **그림 23.13** · 사장님 최신판 캡처 18 (2026-09-14) */
.pf-divider { height: 1px; margin: 6px 0; background: var(--line); }
.pf-styles { display: flex; align-items: center; gap: 6px; }
.pf-styles-label { flex: 0 0 auto; min-width: 62px; color: var(--text-dim); font-size: 12px; }

/* ── 곡선 속성 패널의 **왼쪽 세로 도구 줄** ──
   원문은 격자 왼쪽에 도구를 세로로 세운다 — 위에서부터 스포이드 셋 · 곡선 · 연필 ·
   매끄럽게. 근거 둘이 같다: 독일어 책 452쪽 **그림 14.2** ①~⑤ ·
   사장님 최신판 캡처 05 (2026-09-14, 왼쪽 줄을 잘라 눈으로 확인함).
   창(Ctrl+M)은 그대로다 — 도구 둘이 격자 위, 스포이드가 격자 아래다. */
.curves-form.in-props .curves-main {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: start;
}
.curves-form.in-props .curves-tools {
  grid-column: 1; grid-row: 1; flex-direction: column; gap: 3px; margin: 0;
}
.curves-form.in-props .curves-tools .levels-droppers { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.curves-form.in-props .curves-plot { grid-column: 2; grid-row: 1; }
.curves-form.in-props .curves-foot { grid-column: 1 / -1; grid-row: 2; }
.curves-form.in-props .curves-io { grid-column: 1 / -1; grid-row: 3; }
/* 세로 줄에서는 「매끄럽게」가 글자 대신 그림이 된다 (원문 줄에 글자 자리가 없다) */
.curves-smooth-btn .csm-icon { display: none; }
.curves-form.in-props .curves-tools .curves-smooth-btn { width: 32px; min-width: 32px; flex: 0 0 auto; padding: 3px 0; justify-content: center; }
.curves-form.in-props .curves-tools .curves-smooth-btn .csm-text { display: none; }
.curves-form.in-props .curves-tools .curves-smooth-btn .csm-icon {
  display: block; width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}

/* ≡ 메뉴로 옮겨 온 「클리핑 표시」 줄 — 메뉴 안에서는 단추들과 같은 줄 모양이 되게 한다
   (책 452쪽 그림 14.2 의 메뉴 안 「Beschneidung für Schwarz-/Weißpunkt anzeigen」) */
.curves-preset-menu .curves-clip-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; white-space: nowrap; cursor: pointer;
}
.curves-preset-menu .curves-clip-row:hover { background: var(--row-on); }