/* ── 흐림 효과 갤러리 ───────────────────────────────────────────────
   독일어 책 573~578쪽 17.6 절. 다섯이 창 하나를 나눠 쓴다.
   오른쪽 패널은 그림 17.36·17.38 — 도구 다섯 줄(각각 접히고 옆에 체크) +
   효과·동작 효과·노이즈 세 탭. */
.modal.bgal-modal {
  width: min(1120px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 50px));
  max-height: calc(100vh - 40px);
}
.bgal-body { flex: 1; display: flex; min-height: 0; }
.bgal-stage { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--canvas-bg, #2b2b2b); }
.bgal-canvas { flex: 1; width: 100%; min-height: 0; display: block; cursor: crosshair; touch-action: none; }
.bgal-foot { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-top: 1px solid var(--line); }
.bgal-zoom-select { height: 20px; font-size: 11px; }
.modal .bgal-foot .ctx-btn { min-width: 0; padding: 3px 8px; font-size: 11px; font-weight: 400; }
.bgal-side {
  flex: 0 0 286px; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); overflow-y: auto; min-height: 0;
}
.bgal-side-title { padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 11px; }
.bgal-tool { border-bottom: 1px solid var(--line); position: relative; }
.bgal-tool-head {
  display: flex; align-items: center; gap: 5px; width: 100%;
  background: none; border: 0; color: var(--text);
  padding: 5px 28px 5px 8px; font-size: 11px; cursor: pointer; text-align: left;
}
.bgal-tool.on .bgal-tool-head { color: var(--blue); }
.bgal-tool-tri { width: 9px; font-size: 9px; }
.bgal-tool-check { position: absolute; right: 8px; top: 6px; }
.bgal-tool-body { padding: 2px 10px 8px 22px; }
.bgal-field { display: grid; grid-template-columns: 1fr 50px; gap: 2px 6px; margin-bottom: 6px; align-items: center; }
.bgal-label { font-size: 11px; color: var(--text); text-align: right; }
.bgal-field .opt-range { grid-column: 1 / -1; width: 100%; }
.bgal-field-sel { grid-template-columns: 1fr 1.1fr; }
.bgal-field-sel select { grid-column: 2; height: 20px; font-size: 11px; }
.bgal-check { display: flex; align-items: center; gap: 4px; font-size: 11px; margin: 3px 0; }
.bgal-tabs { display: flex; border-bottom: 1px solid var(--line); margin-top: 6px; }
.bgal-tab {
  flex: 1; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-dim); padding: 5px 2px; font-size: 11px; cursor: pointer;
}
.bgal-tab.on { color: var(--text); border-bottom-color: var(--blue); }
.bgal-tabpane { padding: 8px 10px; }
.bgal-side-foot { margin-top: auto; padding: 8px; display: flex; gap: 6px; }
.bgal-side-foot > button { flex: 1; }

/* 변위 — 독일어 책 790쪽 그림 25.33. 값 둘 · 라디오 묶음 둘 · 체크 하나,
   오른쪽에 확인·취소가 세로로 선다 */
.modal.displace-modal { width: 480px; height: auto; }
.displace-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* .newdoc-form 이 폭을 220px 로 못 박고 있다 — 이 창은 두 칸이라 그것을 푼다
   (실측: 안 풀었더니 왼쪽 칸이 120px 로 눌려 확인 단추와 맞닿았다) */
.displace-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px;
                 align-items: start; width: auto; }
/* 값 칸은 왼쪽 칸 오른쪽 끝에 붙는다 — 확인·취소와 맞닿지 않게 (실측: 붙어 있었다) */
.displace-row { display: grid; grid-template-columns: 1fr 84px; gap: 10px; align-items: center; }
/* 이름이 줄바꿈되면 창이 갑갑해진다 — 한 줄로 붙인다 (실측: 「가로 비율」이 세 줄로 쪼개졌다) */
.displace-label { font-size: 12px; color: var(--text); white-space: nowrap; }
.displace-set legend { white-space: nowrap; }
.displace-set .opt-check, .displace-embed { white-space: nowrap; }
.displace-set {
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px 8px; margin: 2px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.displace-set legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.displace-set .opt-check, .displace-embed { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.displace-buttons { display: flex; flex-direction: column; gap: 6px; }