/* ── 소실점 창 ──────────────────────────────────────────────────────
   독일어 책 587쪽 그림 17.44 와 사장님 화면(2026-09-04)의 배치 —
   위 옵션 막대(왼쪽 끝 ▾≡ · 오른쪽에 확인·취소 세로 둘) · 그 아래 ⓘ 안내 한 줄 ·
   왼쪽 도구 열(구분선 셋) · 가운데 그림 · 왼쪽 아래 [−][+] 배율. */
.modal.vanish-modal {
  width: min(1160px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 50px));
  max-height: calc(100vh - 40px);
}
.vp-optbar {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 5px 10px; border-bottom: 1px solid var(--line);
  flex-wrap: nowrap; min-height: 52px;
}
/* 옵션 막대의 칸들은 제 너비만 차지한다 — 늘어나는 것은 가운데 빈 칸뿐이다 */
.vp-optbar > * { flex: 0 0 auto; }
.vp-optbar .vp-spacer { flex: 1 1 auto; }
.vp-opt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-dim); white-space: nowrap; margin-top: 3px;
}
/* 도구에 안 맞는 칸은 감춘다 — display 를 박아 둔 탓에 hidden 만으로는 안 사라진다 */
.vp-opt[hidden], .vp-okbox [hidden] { display: none !important; }
.vp-num { width: 56px; height: 22px; font-size: 11.5px; text-align: left; }
.vp-num:disabled { opacity: .45; }
.vp-sel { height: 22px; font-size: 11.5px; }
.modal .vp-optbar .ctx-btn { min-width: 0; padding: 3px 10px; font-size: 11.5px; font-weight: 400; }

/* ▾≡ 플라이아웃 — 책 587쪽이 번호 ③ 으로 짚는 자리. 「가장자리 표시」가 든다 */
.vp-flyout-wrap { position: relative; margin-top: 2px; }
.vp-flyout-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 4px 2px;
}
.vp-flyout-btn:hover { color: var(--text); }
.vp-flyout {
  position: absolute; top: 100%; left: 0; z-index: 30; min-width: 160px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); padding: 3px 0;
}
.vp-flyout-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 12px; text-align: left; padding: 5px 10px;
}
.vp-flyout-item:hover { background: var(--blue); color: #fff; }
.vp-check { width: 10px; visibility: hidden; }
.vp-flyout-item[aria-checked="true"] .vp-check { visibility: visible; }

/* 확인·취소는 오른쪽에 세로로 둘 (그림 17.44 · 사장님 화면) */
.vp-okbox { display: flex; flex-direction: column; gap: 4px; }
.modal .vp-okbox .primary-btn,
.modal .vp-okbox .ctx-btn { min-width: 96px; padding: 3px 12px; font-size: 12px; }
.vp-measure-out { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }

/* ⓘ 안내 줄 — 원문에서는 옵션 막대 아래 **파인 상자** 하나다
   (책 그림 17.44 · 사장님 화면 둘 다 테두리가 있다) */
.vp-hintbar {
  display: flex; align-items: center; gap: 6px;
  margin: 0 10px 6px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--deep, rgba(0, 0, 0, .18));
  font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-info { color: var(--blue); }
.vp-body { flex: 1; display: flex; min-height: 0; }
.vp-tools {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 4px; border-right: 1px solid var(--line); background: var(--panel2);
}
/* 도구 열의 구분선 셋 — 2|3 · 5|6 · 8|9 사이에 있다 (그림 17.44 · 사장님 화면) */
.vp-tool-sep { height: 1px; background: var(--line); margin: 3px 2px; }
.modal .vp-tool { min-width: 0; width: 26px; height: 24px; padding: 0; border-radius: 4px;
                  display: flex; align-items: center; justify-content: center; }
.vp-tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3;
               stroke-linecap: round; stroke-linejoin: round; }
.vp-tool.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.vp-stage { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--canvas-bg, #2b2b2b); }
.vp-canvas { flex: 1; width: 100%; min-height: 0; display: block; cursor: crosshair; touch-action: none; }
.vp-foot {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-top: 1px solid var(--line);
}
.vp-zoom-btn {
  background: none; border: 1px solid var(--line); color: var(--text);
  width: 20px; height: 20px; line-height: 1; border-radius: 3px; cursor: pointer;
}
.vp-zoom-select { height: 20px; font-size: 11px; }

/* 얼굴 인식 픽셀 유동화 — 책 670쪽 그림 20.67 의 배치.
   좌우 쌍은 값 칸 둘 사이에 사슬이 서고, 슬라이더가 그 아래로 내려간다. */
.lq-face-top { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px; align-items: center; margin-bottom: 6px; }
.lq-face-select { min-width: 0; height: 20px; font-size: 11px; }
.modal .lq-face-top .ctx-btn { min-width: 0; padding: 3px 7px; font-size: 11px; font-weight: 400; }
.lqf-group { margin-bottom: 8px; }
.lqf-group-name { font-size: 11px; color: var(--text-dim); margin: 4px 0 3px; }
.lqf-row { display: grid; gap: 2px 4px; margin-bottom: 5px; align-items: center; }
.lqf-row.single { grid-template-columns: 1fr 46px; }
.lqf-row.paired { grid-template-columns: 1fr 40px 24px 40px; }
.lqf-row .lq-field-label { text-align: right; font-size: 11px; }
.lqf-row .opt-range { grid-column: 1 / -1; width: 100%; }
.lqf-row .lq-num { height: 18px; font-size: 11px; text-align: right; }
.modal .lqf-link {
  min-width: 0; width: 16px; height: 16px; padding: 0; font-size: 9px; line-height: 1;
  background: none; border: 1px solid transparent; color: var(--text-dim); cursor: pointer;
}
.modal .lqf-link.on { color: var(--blue); border-color: var(--line); }