/* ── 옵션바 ── */
/* 유령 단추 — 테두리만 있는 보조 단추. 바탕 규칙이 없어서 30곳이 브라우저
   기본(밝은 회색)으로 떠 있었다 — 어두운 붓 창에서 흰 네모로 보였다 (사용자 신고). */
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 3px 8px; cursor: pointer; font-size: 12px;
}
.ghost-btn:hover { background: var(--panel2); border-color: var(--text-dim); }
/* 대화상자 안 단추 — 확인·취소(·저장 안 함) 크기를 같게. primary 는 9×26px/14.5px,
   ghost 는 3×8px/12px 라 확인만 크게 보였다 (일부러가 아니라 규칙 차이 — 사용자 지적).
   Photoshop 은 확인·취소가 같은 크기고 확인만 파랗다.
   ctx-btn 도 같은 자리에 쓰이므로 함께 맞춘다 — 빼 놓았더니 "닫기 전에 저장할까요?"
   창에서 확인만 113×25, 취소·저장 안 함은 68×21 이었다 (사용자 재지적). */
.modal .primary-btn, .modal .ghost-btn, .modal .ctx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  min-width: 84px; border-radius: 5px;
  /* 테두리 두께까지 같아야 높이가 같다 — primary 만 border:none 이라 2px 낮았다 */
  border-width: 1px; border-style: solid;
}
.modal .primary-btn { border-color: var(--blue); }
.ghost-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* 브러시 창 — 오른쪽 아래 크기 조정 손잡이 */
.bp-resize {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px;
  cursor: nwse-resize; color: var(--text-dim, #8a8a8a);
}
.bp-resize svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.brush-presets .bp-groups { flex: 1; min-height: 0; overflow-y: auto; }

/* 새 브러시 창 */
.newbrush-modal { width: 460px; }
/* 이름 묻는 창 — 내용에 맞는 너비 (축소판이 있으면 조금 넓어진다) */
.namedlg-modal { width: auto; min-width: 380px; }
/* 이름 창은 다른 창(붓 창 210 · 조정/레벨 90) 위에서 열린다 — 같은 90 이면
   문서 순서에 밀려 뒤에 깔려 보이지도 눌리지도 않았다 (코드 리뷰에서 잡음) */
.namedlg-backdrop { z-index: 270; }
/* 픽셀 유동화의 옛 규칙(왼쪽 붓 목록·가운데 그림·오른쪽 값 셋으로 된 작은 창)은
   2026-09-04 에 원문 창으로 다시 만들면서 지웠다 — 새 규칙은 이 파일 끝에 있다.
   남겨 뒀더니 `.lq-tools .lq-tool` 이 더 세서 도구 막대가 글자 너비로 벌어지고,
   `.lq-canvas` 의 max-height 가 미리 보기를 반 토막 냈다 */
/* 기록 줄의 왼쪽 칸 — 히스토리 브러시가 뜰 시점 고르기 (Photoshop 과 같은 자리) */
.history-row { display: flex; align-items: center; gap: 6px; }
.history-src { width: 16px; height: 16px; flex: 0 0 16px; padding: 0;
               background: var(--panel2); border: 1px solid var(--line); border-radius: 3px;
               color: transparent; cursor: pointer; display: inline-flex;
               align-items: center; justify-content: center; }
.history-src svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.history-src.on { color: var(--blue); border-color: var(--blue); }
.history-src:hover { border-color: var(--text-dim); }
/* 액션 패널 — 담은 것 목록과 기록 단추 */
.action-list { overflow-y: auto; flex: 1; padding: 4px; }
.action-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px;
              border-bottom: 1px solid var(--line); font-size: 12px; }
.action-row .action-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-row.recording { color: var(--blue); }
/* 액션의 명령 목록 — ▸ 를 누르면 펼친다 (책 1117쪽 D.3) */
.action-twirl { background: none; border: 0; color: var(--fg-dim); cursor: pointer;
  padding: 0; width: 12px; font-size: 9px; line-height: 1; }
.action-twirl.open { color: var(--fg); }
.action-step { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 24px;
  color: var(--fg-dim); font-size: 11px; }
.action-step .action-step-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-buttons { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--line); }
/* 레이어 컴프 패널 — 액션과 같은 생김새 */
.comp-list { overflow-y: auto; flex: 1; padding: 4px; }
.comp-row { display: flex; align-items: center; gap: 4px; padding: 4px 6px;
            border-bottom: 1px solid var(--line); font-size: 12px; }
.comp-row .comp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-empty { padding: 10px; color: var(--text-dim); font-size: 12px; }
.comp-buttons { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--line); }
.namedlg-modal .namedlg-input { min-width: 220px; }
.nb-body { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; padding: 12px; align-items: start; }
/* 선택 영역 수정 (확대·축소·페더·매끄럽게) — Photoshop 과 같은 모양 */
.selmod-modal { width: auto; min-width: 340px; }
.selmod-backdrop { z-index: 270; }
.selmod-body { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 12px; align-items: start; }
.selmod-fields { display: flex; flex-direction: column; gap: 10px; }
.selmod-row { display: flex; align-items: center; gap: 8px; }
.selmod-row .opt-num { width: 64px; }
.selmod-buttons { display: flex; flex-direction: column; gap: 6px; }
.selmod-edge[hidden] { display: none; }
/* 미리보기를 안 쓰는 창(값 묻기 등)은 칸이 둘이다 — 셋으로 두면 값 칸이 84px 로 눌린다 */
.nb-body.no-thumb { grid-template-columns: 1fr auto; }
.nb-left { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nb-preview { background: #fff; border: 1px solid var(--line); }
.nb-size { color: var(--text-dim, #9a9a9a); font-size: 12px; }
.nb-right { display: flex; flex-direction: column; gap: 6px; }
.nb-row { display: flex; align-items: center; gap: 8px; }
.nb-row input { flex: 1; }
.nb-sub { margin-left: 18px; }
.nb-buttons { display: flex; flex-direction: column; gap: 6px; }

/* 검수 목록 창 */
.review-modal { width: 560px; max-height: 70vh; display: flex; flex-direction: column; }
.review-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; }
.review-note { margin: 0 10px 6px; color: var(--text-dim, #9a9a9a); font-size: 12px; }
.review-rows { overflow-y: auto; padding: 0 10px 10px; }
.review-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.review-row.done .review-name { color: var(--text-dim, #8a8a8a); text-decoration: line-through; }
.review-name { min-width: 190px; }
.review-desc { flex: 1; color: var(--text-dim, #9a9a9a); font-size: 12px; }
.review-go { white-space: nowrap; }

/* 버전 정보 창 — 도움말 › 버전 정보 (2026-09-11).
   세 자료 어디에도 원문 창 그림이 없어 짜임은 「미확인」이다.
   우리가 아는 값(이름·판·저작권)만 담고 크기·여백만 여기서 잡는다. */
.about-modal { width: 320px; }
.about-body { padding: 18px 20px 14px; text-align: center; }
.about-name { font-size: 20px; font-weight: 600; letter-spacing: 0.2px; }
.about-tagline { margin-top: 4px; color: var(--text-dim, #9a9a9a); font-size: 12px; }
.about-version { margin-top: 14px; font-size: 13px; }
.about-copyright { margin-top: 10px; color: var(--text-dim, #8a8a8a); font-size: 11px; }
.about-modal .modal-foot { justify-content: center; }

/* 문제 알리기 창 — 도움말 › 문제 알리기 (2026-09-11).
   창 껍데기는 JS(lib/editor/bug_report.js)가 만든다. 여기서는 크기와 여백만 잡는다. */
.bugreport-modal { width: 520px; display: flex; flex-direction: column; }
.bugreport-desc { margin: 10px 16px 0; color: var(--text-dim, #9a9a9a); font-size: 12px; line-height: 1.5; }
.bugreport-modal textarea {
  margin: 8px 16px 0; resize: vertical; font: inherit; line-height: 1.45;
}
.bugreport-ctx-label { margin: 12px 16px 0; color: var(--text-dim, #9a9a9a); font-size: 11px; }
.bugreport-context { color: var(--text-dim, #9a9a9a); font-size: 11px; }
.bugreport-note { margin: 8px 16px 0; color: var(--warn, #e0a33e); font-size: 12px; }
.bugreport-foot .bugreport-community { margin-right: auto; text-decoration: none; }
.rasterize-confirm {
  width: min(480px, 90vw); padding: 20px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--text); font-size: 13px;
}
.rasterize-confirm::backdrop { background: rgba(0,0,0,.35); }
.rasterize-confirm p { margin: 0 0 18px; line-height: 1.6; }
.rasterize-detail { color: var(--text-dim); }
.rasterize-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rasterize-actions button { padding: 6px 16px; cursor: pointer; }