/* ── 초점 영역 (선택 › 초점 영역) ───────────────────────────────────────────
   배치 근거: 독일어 책 333쪽 그림 8.61 · photoshopessentials 의
   focus-area-dialog-box.gif. 왼쪽 도구 넷, 오른쪽에 묶음 셋(보기 모드 · 매개 변수 ·
   출력)과 묶음 밖 「가장자리 부드럽게」 체크 하나. 뒤를 어둡게 덮지 않는다 —
   캔버스에 결과가 바로 비치고 그 위에 붓질도 한다. */
.modal.focus-modal { width: 430px; }
.focus-backdrop { background: none; }
.focus-body { display: flex; gap: 10px; padding: 14px 16px 6px; }
/* 왼쪽 도구 줄 — 돋보기·손 위, 붓 둘 아래 (원문도 사이가 떨어져 있다) */
.focus-tools { display: flex; flex-direction: column; gap: 4px; flex: none; }
.focus-tools-gap { height: 14px; }
.focus-tool {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-dim); cursor: pointer; padding: 0;
}
.focus-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.focus-tool:hover { color: var(--text); background: var(--sunken); }
.focus-tool.on { color: #fff; background: var(--sunken); border-color: var(--line); }
.optionsbar .focus-tool.on { color: #fff; }
/* 오른쪽 칸들 */
.focus-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.focus-group {
  border: 1px solid var(--line); border-radius: 5px; margin: 0;
  padding: 4px 10px 9px; min-width: 0;
}
.focus-group legend { color: var(--text); font-size: 11.5px; font-weight: 600; padding: 0 4px; }
.focus-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
.focus-lab { color: var(--text-dim); font-size: 11.5px; flex: none; }
.focus-row .opt-range { flex: 1; min-width: 40px; }
.focus-row .opt-select { flex: 1; min-width: 0; }
.focus-row .opt-num { width: 58px; flex: none; text-align: right; }
.focus-adv { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.focus-adv summary {
  color: var(--text); font-size: 11.5px; font-weight: 600; cursor: pointer;
  list-style: none; padding: 2px 0;
}
.focus-adv summary::-webkit-details-marker { display: none; }
.focus-adv summary::before { content: "▶"; font-size: 8px; margin-right: 5px; color: var(--text-dim); }
.focus-adv[open] summary::before { content: "▼"; }
.focus-soft-row { margin-top: -2px; }
/* 아래 줄 — 왼쪽에 도는 점과 「선택 및 마스크…」, 오른쪽에 취소·OK */
.focus-foot { justify-content: flex-start; }
.focus-foot-gap { flex: 1; }
.focus-busy { display: inline-flex; gap: 3px; align-items: center; }
.focus-busy[hidden] { display: none; }
.focus-busy i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim);
  animation: focus-dot 1s infinite ease-in-out;
}
.focus-busy i:nth-child(2) { animation-delay: .15s; }
.focus-busy i:nth-child(3) { animation-delay: .3s; }
@keyframes focus-dot { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
/* 캔버스 위에서는 지금 든 도구의 커서를 쓴다 (창 바탕을 지나 그림에 닿는다) */
.focus-backdrop.over-canvas { cursor: crosshair; }
.focus-backdrop.over-canvas[data-ftool="zoom"] { cursor: zoom-in; }
.focus-backdrop.over-canvas[data-ftool="hand"] { cursor: grab; }
/* 돋보기·손을 든 동안에는 붓 굵기가 할 일이 없다 — 흐리게 둔다 */
.opts-focus.nav-tool .focus-brush-size,
.opts-focus.nav-tool .scrub-label { opacity: .45; }