/* ── 색상 선택기 ── */
/* 에디터 대화상자는 뒤를 어둡게 덮지 않는다. 캔버스를 보면서 미리보기를 확인하고
   스포이드로 색을 찍어야 하기 때문이다 (Photoshop 도 덮지 않는다).
   .modal-backdrop 규칙이 이 파일 뒤에 나오므로 한 칸 더 좁힌 선택자로 이긴다.
   상자 자체는 그림자와 테두리로 떠 보이게 한다. */
body.editor-body .modal-backdrop { background: transparent; }
/* 색상 선택기는 늘 다른 대화상자 위에 온다 — 레이어 스타일 창 안에서 열리기 때문이다.
   .modal-backdrop 과 무게가 같으면 문서에 늦게 적힌 창이 이겨서 뒤에 깔렸다 —
   그래서 두 이름을 같이 적어 무게를 올린다. */
.modal-backdrop.picker-backdrop { z-index: 92; }
.picker-backdrop.over-canvas { cursor: crosshair; }
.modal.picker-modal { width: 570px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6); }

/* 수치 칸: 왼쪽 HSB·RGB·HEX, 오른쪽 Lab·CMYK 두 줄 (Photopea 배치) */
.picker-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-top: 8px; }
.picker-field i { font-style: normal; color: var(--text-dim); font-size: 11px; width: 10px; }
/* 값 이름(H·S·B…)은 또렷하게, 너비를 고정해 칸이 한 줄로 선다 */
.picker-key {
  width: 12px; flex: none; text-align: right;
  color: var(--text); font-size: 12px; line-height: 1;
}
/* HSB·Lab 묶음과 RGB·CMYK 묶음 사이를 띄운다 (Photoshop 색상 피커와 같은 배치) */
.picker-field.group-start { margin-top: 10px; }
.picker-checks {
  display: flex; align-items: center; gap: 14px; padding: 6px 16px 0;
  color: var(--text-dim); font-size: 12px;
}
.picker-ink-flag { color: var(--red); }
/* 내보내기 경고 — 막지는 않고 알려만 준다 */
.export-warn {
  margin: 2px 0 0; padding: 7px 10px;
  background: rgba(229, 83, 75, 0.12); border: 1px solid var(--red); border-radius: 5px;
  color: var(--text); font-size: 12px; line-height: 1.5;
}
.export-warn[hidden] { display: none; }

/* 재단 대화상자 — 기준은 세로로, 잘라낼 방향은 두 칸으로 (Photoshop 배치) */
.trim-backdrop .newdoc-form { width: 260px; }
.trim-group { display: flex; flex-direction: column; gap: 5px; }
.trim-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
/* .newdoc-form input 의 width:100% 가 라디오·체크까지 늘려서 글자를 밀어낸다.
   그 규칙이 이 파일 뒤에 있어 순위가 같으면 지므로, 속성 선택자로 한 칸 더 좁힌다. */
.trim-group input[type="radio"], .trim-sides input[type="checkbox"] {
  width: auto; flex: none; margin: 0;
}
.trim-group .opt-check, .trim-sides .opt-check {
  justify-content: flex-start; white-space: nowrap;
  color: var(--text); font-size: 12.5px; margin-top: 0;
}
.trim-basis-row.disabled { opacity: 0.4; }
.trim-preview {
  margin: 8px 0 0; color: var(--text-dim); font-size: 12px;
}

/* 글을 쓰는 동안의 아래 막대 — 정렬·기타 옵션 */
.task-text { display: inline-flex; align-items: center; gap: 4px; }
.task-text[hidden] { display: none; }
.task-btn.task-text-align.on { background: var(--panel2); border-color: var(--text-dim); }
.task-more-wrap { position: relative; display: inline-flex; }
/* 기타 옵션 풀다운 — 막대 위로 펼친다 (막대가 화면 아래에 있어서) */
.text-more-pop {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 190px; padding: 10px 12px 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.text-more-pop[hidden] { display: none; }
.text-more-title { color: var(--text-dim); font-size: 11.5px; margin-bottom: 8px; }
.text-more-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--text-dim); font-size: 12px; margin-bottom: 6px;
}
.text-more-row .opt-num { width: 68px; }
.text-more-marks { display: flex; gap: 4px; margin-top: 8px; }
.text-mark {
  flex: 1; padding: 4px 0; border-radius: 4px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1;
}
.text-mark:hover { background: var(--panel2); }
.text-mark.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 텍스트 편집 중에만 나오는 취소·확인 (Photoshop 옵션바 오른쪽) */
.text-edit-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.text-edit-actions[hidden] { display: none; }
.text-edit-actions button {
  padding: 3px 12px; border-radius: 4px; font: inherit; font-size: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.text-edit-actions .text-commit { background: var(--blue); border-color: var(--blue); color: #fff; }
.text-edit-actions button:hover { filter: brightness(1.15); }

/* 글자 스타일 갤러리 */
.modal.gallery-modal { width: min(620px, calc(100vw - 40px)); }
.gallery-body { padding: 14px 16px 18px; overflow-y: auto; }
.gallery-note { margin: 0 0 12px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-cell {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text-dim); font: inherit; font-size: 11.5px; cursor: pointer;
}
.gallery-cell:hover { border-color: var(--blue); color: var(--text); }
.gallery-thumb {
  display: block; width: 132px; height: 74px; border-radius: 4px; overflow: hidden;
}
.gallery-canvas { display: block; width: 132px; height: 74px; }
.gallery-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px; }

/* 가장자리 다듬기 */
/* 선택 및 마스크 — 오른쪽 패널을 덮는다 (모달이 아니다: 캔버스를 계속 만져야 한다) */
.refine-panel {
  position: absolute; inset: 0; z-index: 6;
  background: var(--panel); display: flex; flex-direction: column; min-height: 0;
}
.refine-panel[hidden] { display: none; }
.refine-panel-head {
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: #fff;
  border-bottom: 1px solid var(--line); flex: none;
}
.refine-panel .refine-form {
  padding: 12px; overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.refine-panel .crange-actions { margin-top: auto; padding-top: 8px; }
.panels { position: relative; }

/* 접기(») 는 오른쪽 도크 **맨 위 제 줄**에 오른쪽 끝으로 (사용자가 보낸 Photoshop 화면).
   전에는 위 무리 탭 줄 안에 있어서 탭 자리를 먹었다. */
/* 이 패널만 도로 아이콘으로 («) — 튀어나온 상태에서만 나온다.
   »(전부 접기) 와 다르다: 그건 오른쪽 기둥 통째다. */
.panel-flyout-btn { display: none; }
body.panel-flyout .panel-flyout-btn {
  display: inline-block; background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0 4px; margin-right: auto;
}
body.panel-flyout .panel-flyout-btn:hover { color: var(--text); }
body.panel-flyout .panel-collapse-btn { display: none; }

/* 옛 통짜 머리줄 — 이제 접기(»)는 기둥마다 .col-head 에 있다. 이 줄은
   **빌리기(다 접힘 + 튀어나옴) 모드**에서 « 를 보이는 데만 쓴다. */
.panel-collapse-row {
  flex: none; display: none; justify-content: flex-end; align-items: center;
  height: 18px; padding: 0 4px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
body.panels-collapsed.panel-flyout .panel-collapse-row { display: flex; }
/* 패널 접기 — Photoshop 도크 머리의 « 와 같은 뜻. 접으면 캔버스가 그만큼 넓어진다 */
.panel-collapse-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 13px; padding: 2px 6px; flex: none;
}
.panel-collapse-btn:hover { color: var(--text); }
body.panels-collapsed .panels { display: none; }
.panels-collapsed-strip {
  grid-area: panels; background: var(--panel); border-left: 1px solid var(--line);
  cursor: pointer; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; color: var(--text-dim); font-size: 13px;
}
.panels-collapsed-strip:hover { color: var(--text); }
/* 접힘/펼침은 **body.panels-collapsed 하나가 정한다.**
   전에는 body 클래스와 띠의 hidden 속성 둘이 따로 놀아서, 하나만 바뀌면
   아이콘 띠와 패널이 같은 칸에 겹쳐 뜨는 어긋난 상태가 될 수 있었다 (사용자 지적). */
.panels-collapsed-strip { display: none; }
body.panels-collapsed .panels-collapsed-strip { display: flex; }

/* 검토에서 잡음: display:flex 가 걸린 줄들이 [hidden] 을 이겨 숨겨도 보였다.
   하나씩 덧대는 대신 통째로 막는다 — hidden 속성은 뜻 자체가 "안 보인다" 다. */
[hidden] { display: none !important; }

/* 다듬기 모드 — 두 칸을 나란히, 고른 쪽만 밝게 (Photoshop 도 두 칸짜리 전환이다) */
.refine-mode-row { display: flex; align-items: center; gap: 8px; }
.refine-mode-group { display: inline-flex; gap: 2px; margin-left: auto; }
.refine-mode { padding: 3px 10px; }
/* 다듬기 브러시 — 더하기·빼기 동그라미 */
.refine-brush-mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.refine-brush-size { width: 52px; }
.refine-quick { display: flex; gap: 6px; }
.refine-quick .ghost-btn { flex: 1; }
.refine-row { margin-top: 4px; }
.refine-row label { display: flex; justify-content: space-between; }
.refine-val { color: var(--text); font-variant-numeric: tabular-nums; }
.refine-note {
  margin: 10px 0 0; color: var(--text-dim); font-size: 11.5px; line-height: 1.5;
}
.refine-preview-row {
  margin-top: 8px; color: var(--text); font-size: 12.5px;
  justify-content: flex-start; white-space: nowrap;
}
.refine-preview-row input[type="checkbox"] { width: auto; flex: none; margin: 0; }

/* 색상 범위 — 상자 밖 캔버스를 눌러 색을 찍으므로 뒤를 덮지 않는다 */
/* .modal 의 기본 폭이 920px 이라 그대로 두면 오른쪽이 크게 빈다.
   .modal.resize-modal 처럼 두 칸으로 잡아야 그 규칙보다 뒤에서 이긴다. */
.modal.crange-modal { width: 260px; }
.crange-backdrop.over-canvas { cursor: crosshair; }
.crange-backdrop .newdoc-form { width: 224px; }
.crange-preview {
  width: 224px; height: 150px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 4px; background: #000;
}
.crange-pickers { display: flex; align-items: center; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.crange-pickers[hidden] { display: none; }
.crange-hint { flex: 1 0 100%; color: var(--text-dim); font-size: 11px; margin-bottom: 2px; }
.crange-eye {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 24px; padding: 0;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); cursor: pointer;
}
.crange-eye svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
}
.crange-eye.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.crange-reset {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 11.5px; padding: 2px 4px;
}
.crange-reset:hover { color: var(--text); }
.crange-invert-row {
  margin-top: 8px; color: var(--text); font-size: 12.5px;
  justify-content: flex-start; white-space: nowrap;
}
.crange-invert-row input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.crange-actions { display: flex; gap: 6px; margin-top: 10px; }
.crange-actions button {
  flex: 1; padding: 7px 10px; border-radius: 5px; font: inherit; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
}
/* 색상 범위 창은 260px 폭에 단추 셋을 flex 로 똑같이 나눠 쓴다 (셋 다 57px).
   여기까지 min-width 84 를 걸면 10px 넘친다 — 이 줄은 이미 크기가 같으니 뺀다. */
.modal .crange-actions .primary-btn, .modal .crange-actions .ctx-btn { min-width: 0; }
.crange-actions .primary-btn { border-color: var(--blue); }

.picker-ink-flag[hidden] { display: none; }
/* align-items 를 두지 않으면 stretch 라, 오른쪽 칸 높이에 맞춰 캔버스가 세로로 늘어난다.
   늘어나면 canvas 속성 크기와 화면 크기가 달라져 동그란 표식이 타원이 된다. */
.picker-body { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 6px; }
/* 캔버스 속성(width/height)과 같은 값을 못 박아 둔다 — 어긋나면 그림이 찌그러진다 */
.picker-sv {
  flex: none; width: 260px; height: 260px;
  border: 1px solid var(--line); cursor: crosshair;
}
.picker-hue {
  flex: none; width: 18px; height: 260px;
  border: 1px solid var(--line); cursor: pointer;
}
/* Reference: stacked new/current swatches beside the actions, numeric fields below. */
.picker-side { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px 10px; width: 240px; min-width: 0; }
.picker-side .picker-compare { grid-column: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 60px; }
.picker-side .picker-compare-label { padding: 2px 0; }
.picker-side .picker-preview, .picker-side .picker-was { height: 34px; border-radius: 0; }
.picker-actions { grid-column: 2; display: flex; flex-direction: column; gap: 8px; }
.picker-actions > button { width: 100%; min-width: 0; }
.picker-side .picker-fields { grid-column: 1 / -1; margin-top: 0; }
.picker-side .picker-field { gap: 4px; }
.picker-side .picker-field input { padding: 2px 4px; height: 23px; border-radius: 0; }
.picker-side .picker-ok { margin-top: 0; }
.picker-preview { height: 44px; border: 1px solid var(--line); border-radius: 3px; }
.picker-field {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 12px;
}
.picker-field input {
  width: 100%; min-width: 0;
  background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 4px 7px; font: inherit; font-size: 13px;
}
.picker-ok { margin-top: auto; }
.picker-swatches { display: flex; gap: 5px; padding: 8px 16px 14px; }
.picker-preset {
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer; padding: 0;
}
.picker-preset:hover { outline: 1px solid var(--blue); }

/* ── 텍스트 찾기/바꾸기 ── 짜임은 원문 창 그림대로 (사장님이 주심 2026-08-31)
   왼쪽에 입력 두 줄 + 체크 두 단, 오른쪽에 세로 단추 다섯. */
.modal.findtext-modal { width: auto; min-width: 520px; }
.findtext-body { display: grid; grid-template-columns: 1fr auto; gap: 18px;
                 padding: 14px 16px 16px; align-items: start; }
.findtext-main { display: flex; flex-direction: column; gap: 4px; min-width: 300px; }
.findtext-lab { color: var(--text-dim); font-size: 11.5px; margin-top: 6px; }
.findtext-main input[type="text"] {
  background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 6px 10px; font: inherit; width: 100%;
}
.findtext-main input[type="text"]:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
.findtext-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 12px; }
.findtext-checks .opt-check { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.findtext-checks input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.findtext-checks .opt-check.dim { opacity: 0.45; }
.findtext-count { color: var(--text-dim); font-size: 11.5px; margin: 10px 0 0; }
/* `.modal button` 이 white-space:nowrap 이라 좁히면 글자가 잘려 나간다 —
   세로로 쌓고 가장 긴 이름에 폭을 맞춘다 (원문도 세로다). */
.findtext-buttons { display: flex; flex-direction: column; gap: 7px; min-width: 116px; }
/* `.ghost-btn` 의 gap:4px 가 단추 안에서 이름과 단축 글자를 벌린다
   ("다음 찾기 (1)"). 원문은 붙어 있다 */
.findtext-buttons button { width: 100%; gap: 0; }
.findtext-buttons button:disabled { opacity: 0.45; cursor: default; }

/* ── 파일 정보 창 ── 기본 판 하나 (Photoshop 은 갈래 열둘, 우리는 못 채우는 것이 많다) */
.modal.fileinfo-modal { width: 480px; }
.fileinfo-form { padding: 12px 14px; overflow-y: auto; }
.fileinfo-form .export-field > span { width: 92px; }
.fileinfo-form textarea {
  flex: 1; min-width: 0; resize: vertical;
  background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 5px 7px; font: inherit; font-size: 11.5px; line-height: 1.5;
}
.export-field-tall { align-items: flex-start; }
.export-field-tall > span { padding-top: 5px; }
.fileinfo-note { color: var(--text-dim); font-size: 10.5px; line-height: 1.5; margin: 2px 0 6px 98px; }
.fileinfo-read {
  display: grid; grid-template-columns: 92px 1fr; gap: 3px 6px;
  font-size: 11.5px; color: var(--text-dim);
}
.fileinfo-read b { color: var(--text); font-weight: 600; }

/* ── 일괄 처리 파일 이름 지정 ── 조각 여섯 칸 (Photoshop 과 같은 짜임) */
.batch-naming-head { color: var(--text-dim); font-size: 11.5px; margin-top: 8px; }
.batch-name-sample {
  color: var(--text); font-size: 11.5px; margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
}
.batch-name-rows { display: flex; flex-direction: column; gap: 4px; }
.batch-name-row { display: flex; gap: 6px; }
.batch-name-row .batch-name-token { flex: 1; min-width: 0; }
.batch-name-row .batch-name-text {
  flex: 1; min-width: 0;
  background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 4px 7px; font: inherit; font-size: 11.5px;
}
.batch-name-row .batch-name-text:disabled { opacity: .4; }

/* ── 무료 이미지 창 ── 찾기 줄 · 격자 · 출처 (Pixabay 약관이 출처 표시를 요구한다) */
.modal.stock-modal { width: min(760px, calc(100vw - 40px)); }
.stock-search { display: flex; gap: 8px; padding: 12px 14px 8px; }
.stock-search .stock-q {
  flex: 1; background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 6px 10px; font: inherit; font-size: 12.5px;
}
.stock-search .stock-q:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
.stock-note { color: var(--text-dim); font-size: 12px; margin: 0; padding: 0 14px 8px; }
.stock-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px; padding: 0 14px 12px; overflow-y: auto; flex: 1; min-height: 220px;
}
.stock-item {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 4 / 3;
}
.stock-item:hover { border-color: var(--blue); }
.stock-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stock-foot {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: 11px;
}

/* ── 정보 패널 ── 커서 자리의 색·좌표, 선택 크기, 샘플러·눈금자·카운트 */
.info-panel { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.info-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.info-row b { color: var(--text); font-weight: 600; }
.info-rgb { flex: 1; }
.info-hex { text-transform: uppercase; }
.info-swatch {
  width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line);
  flex: none; background: transparent;
}
.info-size-label { width: 34px; flex: none; }
.info-samplers { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.info-sampler {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.info-sampler i { width: 11px; height: 11px; border-radius: 2px; border: 1px solid var(--line); flex: none; }
.info-sampler b { color: var(--text); font-weight: 600; margin-left: auto; }

/* ── 내보내기 형식 창 ── (Photoshop 화면 대조, 2026-08-30)
   왼쪽 상대 크기 · 가운데 미리 보기 · 오른쪽 설정, 세 칸.
   720p 노트북에서도 세로가 넘치지 않게 칸마다 따로 굴러간다. */
.modal.export-modal { width: min(860px, calc(100vw - 40px)); }
.export-body { display: flex; min-height: 0; flex: 1; }
.export-col { padding: 12px 14px; min-width: 0; overflow-y: auto; }
.export-col-scales { width: 210px; border-right: 1px solid var(--line); flex: none; }
.export-col-preview { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.export-col-settings { width: 240px; border-left: 1px solid var(--line); flex: none; }
.export-group {
  color: var(--text-dim); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.export-col > .export-group:first-child { margin-top: 0; }
.export-field { display: flex; align-items: center; gap: 6px; margin: 5px 0; font-size: 11.5px; }
.export-field > span { color: var(--text-dim); width: 62px; flex: none; }
.export-field > em { color: var(--text-dim); font-style: normal; font-size: 11px; }
.export-field input, .export-field select {
  background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 4px 7px; font: inherit; font-size: 11.5px; min-width: 0; flex: 1;
}
.export-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin: 6px 0; }
.export-check input { flex: none; }
.export-quality-row { margin: 6px 0; font-size: 11.5px; }
.export-quality-row label { color: var(--text-dim); display: block; margin-bottom: 2px; }
.export-quality-row input { width: 100%; }
.export-note { color: var(--text-dim); font-size: 10.5px; line-height: 1.5; margin: 4px 0 6px; }
.export-canvas-reset {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); cursor: pointer; padding: 4px 10px; font: inherit; font-size: 11.5px;
}
.export-canvas-reset:hover { border-color: var(--blue); }
/* 상대 크기 한 줄 — 배율 · 접미어 · 지움 */
.export-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.export-row select, .export-row input {
  background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 4px 6px; font: inherit; font-size: 11.5px; min-width: 0;
}
.export-row .export-row-scale { width: 62px; flex: none; }
.export-row .export-row-suffix { flex: 1; }
.export-row .export-row-del {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  padding: 2px 4px; font-size: 12px; flex: none;
}
.export-row .export-row-del:hover:not(:disabled) { color: var(--red); }
.export-row .export-row-del:disabled { opacity: .3; cursor: default; }
.export-add {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); cursor: pointer; padding: 4px 8px; font: inherit; font-size: 11.5px;
  width: 100%; margin-top: 4px;
}
.export-add:hover { border-color: var(--blue); }
.export-count { color: var(--text-dim); font-size: 11px; margin: 8px 0 0; }
/* 미리 보기 — 바둑판을 깔아 투명한 곳이 눈에 보이게 한다 */
.export-preview {
  flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px;
  background-color: #6b6b6b;
  background-image:
    linear-gradient(45deg, #555 25%, transparent 25%, transparent 75%, #555 75%),
    linear-gradient(45deg, #555 25%, transparent 25%, transparent 75%, #555 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.export-preview-img { max-width: 100%; max-height: 320px; object-fit: contain; }
.export-preview-info {
  color: var(--text); font-size: 11.5px; margin: 0; text-align: center;
  font-variant-numeric: tabular-nums;
}
.export-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
/* ── 인쇄 창 ── 왼쪽에 용지 미리 보기, 오른쪽에 설정 */
.modal.print-modal { width: 560px; }
.print-body { display: flex; gap: 14px; padding: 14px; }
.print-preview {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; min-width: 0;
}
/* 용지 크기 — Photoshop 인쇄 설정도 미리 보기 바로 위에 적는다 */
.print-paper-info {
  color: var(--text-dim); font-size: 11px; margin: 0;
  font-variant-numeric: tabular-nums;
}
/* 용지 — 비율은 JS 가 aspect-ratio 로 정한다 (A4 세로/가로가 다르다) */
.print-paper-box {
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.4);
  width: 100%; max-width: 200px; max-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.print-preview-img { object-fit: contain; }
.print-form { width: 240px; flex: none; display: flex; flex-direction: column; }
.print-size-info { color: var(--text); font-size: 11.5px; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
/* 인쇄할 때만 나오는 판 — 화면에서는 아예 안 보인다 */
.print-sheet { display: none; }
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  body > .print-sheet { display: block !important; margin: 0; }
  .print-sheet img { display: block; }
}

/* 레이어를 파일로 — 칸이 좁아 기본 920px 를 그대로 두면 오른쪽이 텅 빈다 */
.layersout-backdrop .modal { width: 320px; }
.layersout-backdrop .newdoc-form { width: auto; }
.layersout-count { color: var(--text-dim); font-size: 11.5px; margin: 10px 0 0; }

/* ── 크기 변경 대화상자 ── */
.modal.resize-modal { width: 300px; }
/* 캔버스 크기·이미지 크기 창은 원문이 넓다 (사장님 화면: 캔버스 474px) */
.modal.resize-modal:has(.resize-current:not([hidden])) { width: 474px; }
.resize-form { width: auto; }
.anchor-grid {
  display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; margin-top: 4px;
}
.anchor-cell {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel2); cursor: pointer;
}
.anchor-cell:hover { border-color: var(--text-dim); }
.anchor-cell.on { background: var(--blue); border-color: var(--blue); }
/* 칸마다 어느 쪽으로 늘어나는지 화살표를 보인다 — 원문도 화살표를 넣는다.
   빈 네모만 있으면 어느 칸이 무슨 뜻인지 알 수 없었다 */
.anchor-mark { font-size: 10px; line-height: 1; color: var(--text-dim); letter-spacing: -1px; }
.anchor-cell.on .anchor-mark { color: #fff; }
/* 창 안 묶음 테두리 (원문의 Based On / Trim Away 같은 것) */
.dlg-fieldset {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px 10px; margin: 6px 0 0;
}
.dlg-fieldset > legend { color: var(--text-dim); font-size: 11.5px; padding: 0 4px; }
/* 해상도·상대값·늘어난 자리 줄 */
.resize-res-row, .resize-extend-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.resize-res-row label, .resize-extend-row label { color: var(--text-dim); font-size: 11.5px; flex: none; }
.resize-res-row input { width: 84px; }
.resize-extend-row select { flex: 1; min-width: 0; }
/* 이름 창의 라디오 줄 (임의 각도의 시계/반시계) */
.namedlg-radios { display: flex; gap: 14px; margin-top: 8px; }
.namedlg-radios input[type="radio"] { width: auto; flex: none; margin: 0; accent-color: var(--blue); }

/* ── 우클릭 메뉴 ── */
.ctx-menu {
  /* 붓 창(210)·대화상자(90)보다 위여야 한다 — 그 안에서 오른쪽 클릭한 메뉴가
     창 뒤에 깔리면 못 누른다 (붓 우클릭 메뉴를 넣다가 잡았다) */
  position: fixed; z-index: 260;
  min-width: 180px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
}
.ctx-menu[hidden] { display: none; }
.ctx-menu button {
  /* 왼쪽부터 채운다. space-between 을 쓰면 아이콘+글자 두 개짜리 항목에서 글자가
     오른쪽 끝으로 밀린다 — 단축키는 아래 .dd-key 가 스스로 오른쪽에 붙는다. */
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: 6px 14px; font: inherit; cursor: pointer;
}
.ctx-menu button:hover { background: var(--blue); color: #fff; }
.ctx-menu button:disabled { opacity: .45; }
.ctx-menu button:disabled:hover { background: none; color: inherit; }
.ctx-menu .dd-key { margin-left: auto; padding-left: 18px; }
/* 하위 메뉴 — 마우스를 올리면 오른쪽으로 펼쳐진다 (Photoshop 의 "색상 ▸") */
.ctx-menu button.has-sub { position: relative; }
.ctx-menu .ctx-sub { position: absolute; left: 100%; top: -5px; display: none; }
.ctx-menu button.sub-left > .ctx-sub { left: auto; right: 100%; }
.ctx-menu button.has-sub:hover > .ctx-sub { display: block; }
.ctx-menu .ctx-sub button { color: var(--text); background: none; }
.ctx-menu .ctx-sub button:hover { background: var(--blue); color: #fff; }
.ctx-menu button:hover .dd-key { color: #ffffffbb; }
/* 색상 표시 항목: 체크 자리 · 네모 견본 · 이름 (Photoshop 눈 칸 우클릭 메뉴) */
.ctx-menu button:has(.ctx-swatch) { justify-content: flex-start; gap: 0; }
/* 메뉴 항목의 작은 그림 (대칭 메뉴) — 없는 항목도 칸을 차지해 글자 줄이 맞는다 */
/* 옵션바 토글(필압·에어브러시·톱니·나비) — 켠 것은 파란 테로 보인다 */
.press-btn svg, .air-btn svg, .smooth-gear svg, .sym-btn svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.press-btn.on, .air-btn.on { outline: 1px solid var(--blue); border-radius: 3px; color: var(--text); }
.ctx-icon { display: inline-flex; width: 16px; height: 12px; margin-right: 4px;
  align-items: center; flex: none; }
.ctx-icon svg { width: 12px; height: 12px; }
.ctx-check { width: 14px; flex: none; font-size: 11px; line-height: 1; }
.ctx-swatch {
  width: 13px; height: 13px; flex: none; margin-right: 9px;
  border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 2px;
}
/* 색상 없음: 대각선을 그은 빈 네모 (Photoshop 과 같은 표시) */
.ctx-swatch.none {
  background: var(--panel);
  background-image: linear-gradient(to bottom right,
    transparent calc(50% - 1px), var(--text-dim) calc(50% - 1px),
    var(--text-dim) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ── 새 문서 모달 ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
/* 뒤를 어둡게 덮지 않으므로 상자가 떠 보이려면 그림자가 있어야 한다 */
.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--text);
  /* 제목줄을 잡으면 창을 옮긴다 (그림을 보면서 값을 고칠 수 있어야 한다) */
  cursor: move; user-select: none;
}
/* 한 번 옮긴 창은 가운데 맞춤을 끄고 좌표로 세운다.
   좌표를 안 넣고 맞춤만 끄면 왼쪽 위로 튄다 — 떠 있는 툴바에서 겪은 것과 같다. */
.modal.dragged { position: fixed; margin: 0; }
.modal-x {
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.modal-x:hover { color: var(--text); }
.delconfirm-modal {
  width: min(480px, calc(100vw - 32px));
}
.delconfirm-modal .modal-head { padding: 8px 12px; }
.delconfirm-modal .newdoc-form {
  width: auto; min-width: 0; padding: 12px;
  overflow-y: auto;
}
.delconfirm-modal .delconfirm-text {
  margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere;
}
.delconfirm-modal .adjust-actions { margin-top: 0; gap: 8px; }
.delconfirm-modal .adjust-actions button { gap: 4px; flex: none; }
.delconfirm-modal .dd-key::before { content: "("; }
.delconfirm-modal .dd-key::after { content: ")"; }
.modal-body { display: flex; min-height: 0; }
.preset-col {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  border-right: 1px solid var(--line);
  max-height: 480px;
}
.preset-group {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-dim); text-transform: uppercase;
  margin: 14px 0 8px;
}
.preset-group:first-child { margin-top: 0; }
.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.preset {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 6px 8px; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit;
}
.preset:hover { border-color: var(--text-dim); }
.preset.on { border-color: var(--blue); outline: 1px solid var(--blue); }
.preset {
  justify-content: flex-end;
}
.preset-box {
  display: block; border: 1px solid var(--text-dim); border-radius: 2px;
  margin: auto 0;
}
.preset-name { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.preset-size { font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.newdoc-form {
  width: 220px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.newdoc-form label { color: var(--text-dim); font-size: 11.5px; margin-top: 6px; }
.newdoc-form input, .newdoc-form select {
  /* 입력칸은 --sunken 이다. --deep 은 **탭 줄처럼 들어간 면**이라 뜻이 다르고,
     같은 창 안에서 칸마다 색이 갈렸다 (코드 리뷰에서 잼: 대화상자 입력칸이
     #424242 · #454545 · #535353 · #3b3b3b · #6b6b6b 다섯 가지였다) */
  background: var(--sunken); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 6px 10px; font: inherit; width: 100%;
}
/* 규칙이 없어 브라우저 기본색으로 그려지던 칸들을 한 번에 묶는다.
   창을 새로 만들 때마다 손으로 붙이지 않아도 색이 딸려 온다. */
.modal input[type="text"], .modal input[type="number"], .modal input[type="search"],
.modal select, .modal textarea {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); font: inherit;
}
.newdoc-form input:focus, .newdoc-form select:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
/* 위 줄의 width:100% 가 체크상자·라디오까지 늘려 이름표를 옆으로 밀고 두 줄로 깨뜨린다.
   창마다 따로 막고 있었는데 (안내선·뒤틀기·저장) 막지 않은 창에서 그대로 나왔다 —
   획·레이어 자동 혼합 창을 열어 찍어 보고 찾았다. 여기서 한 번에 막는다. */
.newdoc-form input[type="checkbox"],
.newdoc-form input[type="radio"] { width: auto; flex: none; margin: 0; }
.newdoc-form label.opt-check { display: flex; align-items: center; gap: 6px; }
/* 대화상자 안의 설명 한 줄. 220px 폭 안에서 줄바꿈되어야 한다 */
.modal-note {
  color: var(--text-dim); font-size: 11px; line-height: 1.5;
  margin: 8px 0 0; white-space: normal;
}
.dim-row { display: flex; align-items: flex-end; gap: 8px; }
.dim-row > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.swap-btn {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); cursor: pointer; padding: 6px 9px; font: inherit;
}
.swap-btn:hover { border-color: var(--blue); }
.newdoc-note { color: var(--text-dim); font-size: 11px; margin: 4px 0 8px; }

/* 무늬 고르기 줄 — 갈래 목록 옆에 "담아 둔 무늬" 단추 (칠·획 대화상자) */
.pat-pick-row { display: flex; align-items: center; gap: 6px; }
.pat-pick-row select { flex: 1; min-width: 0; }
.pat-pick-row .ghost-btn { white-space: nowrap; padding: 6px 8px; }

/* 분할 영역 옵션의 치수 네 칸 (X · Y · W · H) */
.slice-bounds-row { display: flex; gap: 4px; align-items: center; }
.slice-bounds-row input { min-width: 0; }
/* 칸마다 붙은 한 글자 이름표 (W·H·X·Y). 이것이 스크러비 손잡이가 된다 —
   placeholder 로만 두면 값을 넣는 순간 사라져서 무엇인지도 못 알아보고,
   끌 자리도 없다 (2026-08-29 검수). */
.opt-mini-name { flex: none; color: var(--text-dim); font-size: 11px; user-select: none; }

/* 색상 샘플러가 읽은 색 — 옵션바에 네 칸까지 (Photoshop 의 정보 패널 자리) */
.sampler-readout { display: inline-flex; gap: 8px; align-items: center; }
.sampler-chip { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; }
.sampler-chip i {
  width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid var(--line); display: inline-block;
}
.sampler-chip b { font-weight: 500; color: var(--text-dim); }
.autoblend-modal { width: 330px; max-width: calc(100vw - 24px); }
.autoblend-content { display: flex; gap: 18px; padding: 12px; align-items: flex-start; }
.autoblend-methods { flex: 1; min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--line); }
.autoblend-methods legend { color: var(--text-dim); font-size: 12px; }
.autoblend-choice { display: block; cursor: pointer; font-size: 12px; }
.autoblend-choice + .autoblend-choice { margin-top: 12px; }
.autoblend-choice > span { display: flex; align-items: center; gap: 5px; }
.autoblend-example { display: block; width: 150px; max-width: 100%; height: 64px; margin: 6px auto 0; }
.autoblend-example rect { fill: var(--text); stroke: var(--panel); stroke-width: 2; }
.autoblend-example path, .autoblend-example circle { fill: var(--panel); }
.autoblend-example .blend-arrow { fill: none; stroke: var(--text-dim); stroke-width: 2; }
.autoblend-actions { display: flex; flex-direction: column; gap: 8px; }
.autoblend-actions button { min-width: 65px; }
.autoblend-options { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 14px; font-size: 12px; }

/* ── 패스가 필요하다는 안내 (2026-09-18) ──
   불꽃처럼 패스를 따라 그리는 렌더 필터를 패스 없이 부르면 뜬다.
   느낌표는 그림 파일 없이 글자로 낸다 — 아이콘 하나 때문에 파일을 늘리지 않는다. */
.pathneed-modal { width: 400px; max-width: calc(100vw - 32px); }
.pathneed-msg { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.pathneed-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red, #c0392b); color: #fff;
  font-weight: 700; font-size: 14px; line-height: 22px; text-align: center;
}
.pathneed-text { line-height: 1.55; }
.pathneed-how { margin: 10px 0 0 32px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }

.picker-hue-wrap { position: relative; flex: none; width: 18px; height: 260px; }
.picker-hue-wrap::before, .picker-hue-wrap::after {
  content: ""; position: absolute; top: var(--picker-hue-position, 100%);
  width: 0; height: 0; transform: translateY(-50%); pointer-events: none;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  filter: drop-shadow(0 0 1px #000);
}
.picker-hue-wrap::before { left: -7px; border-left: 5px solid #eee; }
.picker-hue-wrap::after { right: -7px; border-right: 5px solid #eee; }