/* ── 칠 창 — Photoshop 의 같은 창 모양 (사진 대조 2026-08-27) ─────────────
   묶음 테두리(옵션·혼합) · 오른쪽 위 세로 단추 · 이름표 오른쪽 맞춤 · 단축 글자 */
.filldlg-modal { width: auto; min-width: 360px; }
/* 획 창은 `.modal` 의 기본 920px 를 그대로 물려받아 오른쪽 700px 가 비어 있었다
   (창을 열어 찍어 보고 찾았다). 안쪽 폼이 220px 이므로 내용에 맞춘다.
   체크상자는 `.newdoc-form input{width:100%}` 이 늘려 이름표를 두 줄로 밀어냈다. */
.stroke-modal { width: auto; min-width: 280px; }
/* `.opt-color` 의 높이 20px 가 옆 칸(29px)보다 낮아 색 견본이 선처럼 보였다 */
.stroke-form input[type="color"] { height: 28px; }
.fd-body { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 14px 16px; align-items: start; }
.fd-main { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.fd-row { display: flex; align-items: center; gap: 8px; }
/* 이름표는 오른쪽으로 맞춘다 — Photoshop 은 값 칸이 세로로 줄을 맞춘다 */
/* "사용자 정의 패턴:" 이 가장 길다 — 그 폭에 맞춘다 (짧게 잡으면 두 줄로 접힌다) */
.fd-label { flex: none; width: 104px; text-align: right; color: var(--text); white-space: nowrap; }
.fd-row .opt-select { flex: 1; min-width: 130px; }
.fd-row .opt-num { width: 60px; }
.fd-group {
  border: 1px solid var(--line); border-radius: 3px; margin: 4px 0 0;
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
}
.fd-group > legend { padding: 0 4px; color: var(--text-dim); font-size: 11px; }
/* gap 을 0 으로 둔다 — flex 의 gap 은 글자와 단축 글자 사이에도 벌어져
   "색상 적용 (C)" 가 됐다. Photoshop 은 "색상 적용(C)" 로 붙어 있다. */
.fd-check { display: flex; align-items: center; gap: 0; }
.fd-check input { flex: none; margin: 0 6px 0 0; }
/* 단축 글자 — Windows 가속 키 표시. Alt+글자로 실제로 움직인다 */
.fd-key { color: var(--text-dim); }
.fd-sep { color: var(--text-dim); }
.fd-buttons { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.fd-buttons button { min-width: 84px; }
.filldlg-adapt-row.dim, .filldlg-output-row.dim, .filldlg-mirror-row.dim,
.filldlg-modal label.dim, .filldlg-modal legend.dim { opacity: 0.45; }

/* ── 패턴 고르개 — Photoshop 의 "사용자 정의 패턴" 목록 (사진 대조 2026-08-27) ──
   견본 단추를 누르면 뜨고, 묶음(폴더)으로 나뉘며 접었다 펼 수 있다. */
.pat-swatch-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 2px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
}
.pat-swatch-btn:hover { border-color: var(--text-dim); }
.pat-swatch { display: block; border: 1px solid var(--line); background: #fff; }
.pat-swatch-arrow { color: var(--text-dim); font-size: 10px; }
.opts-bucket .pat-swatch-btn { vertical-align: middle; }
.opts-bucket .bucket-pattern-row { display: inline-flex; align-items: center; }
.pat-picker {
  position: fixed; z-index: 280; width: 300px; max-height: 340px; overflow-y: auto;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .6);
}
.pat-picker[hidden] { display: none; }
.pat-picker-head { display: flex; justify-content: flex-end; padding: 4px 6px 0; }
.pat-gear { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.pat-gear:hover { color: var(--text); }
.pat-picker-body { padding: 2px 6px 8px; }
.pat-folder-head {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 2px;
  background: none; border: none; color: var(--text); cursor: pointer; text-align: left;
}
.pat-folder-head:hover { background: var(--panel3, rgba(255, 255, 255, .05)); }
.pat-caret { display: inline-block; transition: transform .1s; color: var(--text-dim); }
.pat-folder.closed .pat-caret { transform: rotate(-90deg); }
.pat-folder.closed .pat-folder-grid { display: none; }
.pat-folder-icon { color: var(--text-dim); }
.pat-folder-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 6px 18px; }
.pat-item { padding: 0; background: none; border: 1px solid transparent; cursor: pointer; line-height: 0; }
.pat-item:hover { border-color: var(--blue); }
.pat-item canvas { display: block; border: 1px solid var(--line); }
.pat-gear-menu {
  position: absolute; right: 6px; top: 24px; z-index: 1;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); padding: 3px 0;
}
.pat-gear-menu[hidden] { display: none; }
.pat-gear-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); font-size: 12px; padding: 4px 14px; cursor: pointer; white-space: nowrap;
}
.pat-gear-menu button:hover { background: var(--blue); color: #fff; }