/* ── 필터 갤러리 ────────────────────────────────────────────────────
   독일어 책 761쪽 그림 24.12 의 배치 그대로다 —
   왼쪽 미리 보기 · 가운데 썸네일 묶음 · 오른쪽(단추·이름 고르개·값·효과 레이어).
   사장님 화면(2026-09-04)에서 잰 것: 제목이 「필터이름 (배율%)」, 값 칸이 이름 줄
   오른쪽에 붙고 슬라이더가 그 아래로 내려간다, 효과 레이어 줄 왼쪽에 눈 아이콘. */
.modal.fgal-modal {
  width: min(1180px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 60px));
  max-height: calc(100vh - 40px);
  position: relative;
}
.fgal-head { padding: 8px 14px; font-weight: 500; }
.fgal-body { flex: 1; display: flex; min-height: 0; }

/* 왼쪽 — 미리 보기. 커서가 손이 된다 (책 761쪽) */
.fgal-preview {
  flex: 1 1 auto; min-width: 220px;
  display: flex; flex-direction: column;
  background: var(--canvas-bg, #2b2b2b);
  border-right: 1px solid var(--line);
}
.fgal-canvas { flex: 1; width: 100%; min-height: 0; cursor: grab; display: block; }
.fgal-canvas:active { cursor: grabbing; }
.fgal-preview-foot {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-top: 1px solid var(--line);
}
.fgal-zoom-btn {
  background: none; border: 1px solid var(--line); color: var(--text);
  width: 20px; height: 20px; line-height: 1; border-radius: 3px; cursor: pointer;
}
.fgal-zoom-select { height: 20px; font-size: 11px; }

/* 가운데 — 묶음 여섯과 썸네일 47장 */
.fgal-groups {
  flex: 0 0 268px; overflow-y: auto;
  background: var(--sunken);
  border-right: 1px solid var(--line);
}
.fgal-backdrop.thumbs-off .fgal-groups { display: none; }
.fgal-group-head {
  display: flex; align-items: center; gap: 4px; width: 100%;
  background: var(--panel-3, #444); border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); padding: 4px 6px; font-size: 11px; cursor: pointer; text-align: left;
}
.fgal-tri { width: 10px; font-size: 9px; }
.fgal-thumbs { display: none; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; }
.fgal-group.open .fgal-thumbs { display: grid; }
.fgal-thumb {
  background: none; border: 2px solid transparent; border-radius: 2px;
  padding: 1px; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
/* ③ 고른 필터의 썸네일이 도드라진다 (그림 24.12) */
.fgal-thumb.on { border-color: var(--accent, #2f7fd0); background: var(--accent-weak, #1d4f7a); }
.fgal-thumb-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fgal-thumb-name { font-size: 10px; line-height: 1.15; text-align: center; word-break: keep-all; }

/* 오른쪽 — 단추·이름 고르개·값·효과 레이어 */
.fgal-side {
  flex: 0 0 268px; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; min-height: 0;
}
.fgal-side-top { display: flex; align-items: flex-start; gap: 6px; }
/* ① 썸네일 목록 접기 */
.fgal-collapse {
  background: var(--panel-3, #444); border: 1px solid var(--line); color: var(--text);
  width: 20px; height: 20px; line-height: 1; border-radius: 3px; cursor: pointer; flex: 0 0 auto;
}
.fgal-buttons { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fgal-buttons > button { width: 100%; }
.fgal-filter-select { width: 100%; }
.fgal-fields { flex: 0 0 auto; overflow-y: auto; max-height: 46%; padding-top: 4px; }
.fgal-field { display: grid; grid-template-columns: 1fr 56px; gap: 3px 6px; margin-bottom: 8px; }
.fgal-field-label { font-size: 11px; color: var(--text); align-self: center; }
.fgal-num { grid-column: 2; height: 18px; font-size: 11px; text-align: right; }
.fgal-range { grid-column: 1 / -1; width: 100%; }
.fgal-field .fgal-select, .fgal-field .fgal-color { grid-column: 1 / -1; }
.fgal-field .fgal-check { grid-column: 2; justify-self: start; }

/* 효과 레이어 — 위가 나중에 걸린 것이다 (책 763쪽: "ganz ähnlich wie das Ebenen-Bedienfeld") */
.fgal-stack {
  flex: 1 1 auto; min-height: 60px; overflow-y: auto;
  background: var(--sunken); border: 1px solid var(--line);
}
.fgal-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px; cursor: pointer; font-size: 11px; }
.fgal-row.on { background: var(--sel, #5a5a5a); }
.fgal-eye { background: none; border: 0; color: var(--text); width: 18px; cursor: pointer; font-size: 11px; }
.fgal-row-name { flex: 1; }
.fgal-stack-foot { display: flex; justify-content: flex-end; gap: 6px; }
.fgal-stack-foot > button {
  background: none; border: 0; color: var(--text); cursor: pointer; font-size: 13px; padding: 2px 4px;
}
.fgal-stack-foot > button:disabled { opacity: 0.35; cursor: default; }

/* ④ 오른쪽 아래 모서리를 끌면 창이 커진다 (책 761쪽) */
.fgal-resize {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  cursor: nwse-resize;
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--line) 2px 3px);
}
/* 효과 레이어의 눈 — 레이어 패널과 같은 모양이라야 한 화면에서 따로 놀지 않는다 */
.fgal-eye svg { width: 14px; height: 14px; visibility: hidden; stroke: var(--text); fill: none; stroke-width: 1.3; }
.fgal-eye svg .pupil { fill: var(--text); stroke: none; }
.fgal-eye.visible svg { visibility: visible; }

/* 일하는 중인 AI 막대 단추 — 테두리 한 조각이 돈다.
   레이어 추출은 피사체 찾기와 채우기로 몇 초 걸리는데 아무 표시가 없었다 (사장님 지적 2026-09-04) */
.task-btn.running { position: relative; opacity: 0.75; pointer-events: none; }
.task-btn.running::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: task-spin 0.8s linear infinite;
}
.task-btn.running { padding-right: 24px; }
@keyframes task-spin { to { transform: rotate(360deg); } }