/* ── 글자 뒤틀기 ── */
.modal.warp-modal { width: 320px; }
.warp-modal .newdoc-form { width: auto; }
.warp-modal .warp-dir { display: flex; gap: 14px; margin-top: 8px; }
.warp-modal .newdoc-form input[type="radio"] { width: auto; flex: none; margin: 0; }
.warp-modal .opt-range { width: 100%; }
/* 텍스트 뒤틀기 — 사장님 화면 #53 (2026-09-02) 배치.
   스타일 줄은 이름+목록 단추 한 줄, 값 줄은 [이름 ……… 숫자칸 %] 위에 세모 손잡이 슬라이더 아래 */
.warp-style-row { display: flex; align-items: center; gap: 10px; }
.warp-style-row .warp-row-label { flex: none; margin: 0; white-space: nowrap; }
.warp-style-row .warp-style-btn { flex: 1; width: auto; }
.warp-slider { margin-top: 12px; }
.warp-slider-head { display: flex; align-items: center; gap: 6px; }
.warp-slider-label { flex: 1; color: var(--text-dim); font-size: 11.5px; }
.warp-modal .newdoc-form .warp-num { width: 48px; flex: none; text-align: right; padding: 2px 6px; }
.warp-unit { flex: none; color: var(--text-dim); font-size: 11.5px; }
/* .newdoc-form input 의 칸 모양(배경·테두리·둥근 모서리)이 슬라이더에도 씌워져 굵은
   막대로 보였다 — 슬라이더는 선 하나만 남긴다 */
.warp-modal .newdoc-form .warp-range {
  width: 100%; margin: 4px 0 0; padding: 0; height: 16px;
  background: none; border: none; border-radius: 0;
}
.warp-modal .newdoc-form .warp-range:focus { outline: none; }
.warp-modal .warp-range:disabled { opacity: .4; }
/* 단축 글자 밑줄 — 포토샵 창의 (Y)·(H) 처럼 글자 밑에 줄 (사장님 지적 2026-09-02) */
u.mn { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ── 패스 칠 · 패스 획 ── */
.modal.fillpath-modal, .modal.strokepath-modal { width: 300px; }
.fillpath-modal .newdoc-form, .strokepath-modal .newdoc-form { width: auto; }
/* 대화상자 안의 묶음 제목 (내용 / 혼합 / 렌더링) — Photoshop 과 같은 구분선 */
.dlg-section {
  color: var(--text); font-size: 11.5px; font-weight: 600;
  margin-top: 12px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.dlg-section:first-child { margin-top: 0; }
.fillpath-modal .opt-check, .strokepath-modal .opt-check {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  color: var(--text-dim); font-size: 11.5px;
}
.fillpath-modal .opt-check input, .strokepath-modal .opt-check input { width: auto; flex: none; margin: 0; }
.fillpath-modal .fill-color-input { padding: 2px; height: 28px; }

/* ── 그레이디언트 편집기 ── */
/* 일괄 처리 창 — 왼쪽 이름표, 오른쪽 값 (다른 대화상자와 같은 짜임) */
.modal.batch-modal { width: 430px; }
.batch-form { align-items: center; }
.batch-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.batch-row b { color: var(--text-dim); font-weight: 400; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.batch-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 11px; }
.batch-prefix { width: 100%; }
/* 어디까지 됐는지 — 도는 동안만 보인다 */
.batch-progress {
  padding: 6px 14px; color: var(--text-dim); font-size: 12px;
  border-top: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-progress[hidden] { display: none; }

.modal.grad-editor-modal { width: 420px; }
/* 옵션바 견본에서 열면 그 밑에 붙는 풀다운이 된다 (Photoshop 도 그렇다).
   바탕은 그대로 두어 바깥을 누르면 닫히는 길을 지킨다 — 다만 가운데 정렬만 끈다. */
.grad-editor-backdrop.as-pop { display: block; }
.grad-editor-backdrop.as-pop .grad-editor-modal {
  position: fixed; margin: 0; max-height: calc(100vh - 24px); overflow-y: auto;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
}
.grad-editor-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.grad-ed-label { color: var(--text-dim); font-size: 11.5px; margin-top: 8px; }
.grad-presets {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
  padding: 6px; background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  /* 사전 설정이 일흔 개가 넘는다 — 다 펴 두면 창이 화면보다 길어진다.
     여기서만 굴리고 창 높이는 그대로 둔다 (사장님 요청으로 늘림, 2026-08-29). */
  max-height: 168px; overflow-y: auto;
}
.grad-preset-chip {
  height: 22px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 3px;
  background-size: cover; background-position: center;
}
.grad-preset-chip:hover { border-color: var(--blue); }
/* 내가 저장한 것 — 오른쪽 클릭으로 지울 수 있다는 표시 */
.grad-preset-chip.mine { border-color: var(--blue); }
.grad-save-row { display: flex; gap: 6px; margin-top: 6px; }
.grad-save-row .grad-save-name {
  flex: 1; min-width: 0;
  background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 4px 8px; font: inherit;
}
.grad-save-row .grad-save-name:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
/* 노이즈 설정 — 유형이 노이즈일 때만 보인다 */
.grad-noise-box[hidden], .grad-solid-box[hidden] { display: none; }
.grad-noise-box { display: flex; flex-direction: column; gap: 4px; }
.grad-noise-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.grad-noise-row .opt-select { max-width: 110px; }
.grad-ranges { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.grad-range-row { display: flex; align-items: center; gap: 8px; }
.grad-range-row > span { width: 14px; color: var(--text-dim); font-size: 11.5px; }
.grad-range-row .opt-num { width: 62px; }
.grad-editor-body .grad-kind { max-width: 140px; }
/* 색 띠와 정지점 두 줄. 정지점은 띠 위·아래에 걸친다. */
.grad-bar-wrap { position: relative; padding: 12px 0; }
.grad-bar { display: block; width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 3px; }
.grad-stops-row { position: relative; height: 12px; cursor: copy; }
.grad-mark {
  position: absolute; top: 0; width: 11px; height: 11px; padding: 0;
  transform: translateX(-50%); cursor: pointer;
  border: 1px solid #000; border-radius: 2px; box-shadow: 0 0 0 1px #fff inset;
}
.grad-mark.on { outline: 2px solid var(--blue); outline-offset: 1px; }
/* 띠에서 멀리 끌면 뺀다는 뜻 — 손을 떼기 전에 보여 준다 */
.grad-mark.dropping { opacity: 0.35; }
/* 색 사이의 중간점 마름모 (Photoshop 편집기와 같다) */
.grad-mid {
  position: absolute; top: 2px; width: 8px; height: 8px; padding: 0;
  transform: translateX(-50%) rotate(45deg); cursor: ew-resize;
  background: var(--text-dim); border: 1px solid #000; border-radius: 1px;
}
.grad-mid:hover { background: var(--text); }
.grad-alpha-row .grad-mark { border-radius: 2px 2px 0 0; }
.grad-color-row .grad-mark { border-radius: 0 0 2px 2px; }
.grad-ed-fields {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line);
}
.grad-ed-fields[hidden] { display: none; }
/* .opt-inline 이 inline-flex 라 hidden 이 안 먹는다 — 색/불투명도 칸을 번갈아 보이려면 필요하다 */
.grad-ed-fields .opt-inline[hidden] { display: none; }
.grad-ed-kind { color: var(--text-dim); font-size: 11.5px; }
.grad-ed-color {
  width: 30px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 3px;
}
.grad-ed-fields .opt-num { width: 58px; }
.grad-ed-del:disabled { opacity: .4; cursor: default; }
/* 옵션바의 견본은 이제 단추다 (전에는 위에 겹쳐 둔 select 였다) */
.opts-gradient .grad-preset {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.modal.shapesize-modal { width: 300px; max-width: calc(100vw - 32px); }
.shapesize-modal .newdoc-form { width: auto; min-width: 0; }