/* 색상 견본 패널 (Photoshop 의 Window > Swatches) */
.swatch-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.swatch-panel[hidden] { display: none; }
.swatch-grid {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 8px;
  overflow-y: auto; align-content: flex-start; flex: 1;
}
.swatch-grid .sw-group {
  flex: 0 0 100%; padding: 4px 2px 2px; color: var(--text-dim);
  font-size: 11px; cursor: pointer; user-select: none;
}
.swatch-grid .sw-cell {
  width: 20px; height: 20px; border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 2px; padding: 0; cursor: pointer;
}
.swatch-grid .sw-cell.on { outline: 2px solid var(--blue); outline-offset: 1px; }
.swatch-grid .sw-empty {
  width: 20px; height: 20px; border: 1px dashed var(--line);
  border-radius: 2px; background: none; cursor: cell;
}
.swatch-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 2px 8px; border-top: 1px solid var(--line);   /* 레이어 막대와 같게 */
}
.swatch-actions .sw-btn {
  background: none; border: 1px solid transparent; color: var(--text-dim);
  border-radius: 4px; padding: 0 6px; cursor: pointer; font-size: 13px;
  height: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.swatch-actions .sw-btn:hover { border-color: var(--blue); color: var(--text); }

/* 윤곽선 곡선 그림 — 네모난 칸을 지킨다 (칸이 눌리면 곡선이 찌그러져 보인다) */
.ls-contour-thumb {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 3px; margin-left: 8px;
}
.ls-contour-curve { width: 60px; height: 60px; }

/* 그림 ↔ 마스크 사슬 (Photoshop: 두 썸네일 사이). 끊어도 자리는 남는다 — 다시 눌러 잇는다 */
.mask-link {
  width: 14px; align-self: stretch; flex: none; padding: 0; margin: 0 -2px;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* 사슬은 두 축소판 사이를 잇는 표시라, 세로로 길어야 잇는다는 뜻이 보인다
   (Photoshop 것도 축소판 높이에 가깝다). 가로는 그대로 두어 줄이 안 밀린다. */
.mask-link svg { width: 12px; height: 20px; visibility: hidden;
                 stroke: var(--text); fill: none; stroke-width: 1.3; stroke-linecap: round; }
/* 마스크만 보는 중 — 왜 화면이 회색인지 축소판에서 알 수 있어야 한다 */
.layer-thumb.mask.solo { outline: 2px solid var(--blue); outline-offset: -2px; }
/* 벡터 마스크 축소판 — 픽셀 마스크와 나란히.
   꺼 둔 표시(빨간 X)는 캔버스에 직접 그린다 (픽셀 마스크와 같은 그림이어야 한다) */
.layer-thumb.vmask { border-radius: 2px; }
.mask-link.on svg { visibility: visible; }
/* 묶여 있다는 표시 — 이름 오른쪽, 자물쇠 앞. 보여 주기만 한다.
   pointer-events 를 끄는 까닭: 누르면 그냥 줄이 골라져야 한다. 여기에 따로 반응이
   있으면 줄을 고르려다 잘못 눌러 묶음이 깨진다. 푸는 것은 아래 사슬 단추에서만 한다. */
.link-badge { width: 16px; flex: none; margin-left: auto; color: var(--text);
  pointer-events: none; display: flex; align-items: center; justify-content: center; }
.link-badge svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
                  stroke-width: 1.5; stroke-linecap: round; }
/* 마스크를 이 줄로 끌어 왔을 때 — 줄 사이에 끼우는 게 아니라 이 줄이 받는다는 표시라
   선이 아니라 줄 전체를 밝힌다 */
.layer-row.drop-onto { outline: 2px solid var(--blue); outline-offset: -2px;
                       background: color-mix(in srgb, var(--blue) 18%, transparent); }
/* 커서를 올려도 흐린 사슬을 미리 보여 주지 않는다. 끊어 둔 상태에서 그것이 보이면
   이어져 있는 줄과 헷갈린다 — 지금 이어져 있는지가 한눈에 보이는 편이 낫다.
   누를 수 있다는 것은 커서 모양(pointer)과 설명 글이 알려 준다. */

/* 스마트 필터 줄 (Photoshop: 스마트 오브젝트 아래). 높이·들여쓰기는 효과 줄과 한 규칙에 모아 두었다 */
.sf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
/* 효과·스마트 필터 줄의 눈 — 레이어 눈과 같은 그림, 크기만 작다 */
.sf-eye {
  width: 18px; height: 16px; flex: none; padding: 0;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sf-eye svg { width: 13px; height: 13px; visibility: hidden;
              stroke: var(--text); fill: none; stroke-width: 1.4; }
.sf-eye svg .pupil { fill: var(--text); stroke: none; }
.sf-eye.visible svg { visibility: visible; }
.sf-eye:hover { background: var(--panel2); }
.sf-blend, .sf-del {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 0 4px; font-size: 12px;
}
.sf-blend:hover, .sf-del:hover { color: var(--text); }

/* 색상 선택기 — 새로 고른 색(위)과 열 때의 색(아래)을 나란히 (Photoshop 과 같다) */
.picker-compare { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; }
.picker-compare-label { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.picker-compare .picker-preview { height: 30px; border-radius: 3px 3px 0 0; border-bottom: none; }
.picker-was { height: 30px; border: 1px solid var(--line); border-radius: 0 0 3px 3px; }

/* 레이어 스타일 창 — Photoshop 처럼 칸을 테두리로 묶는다 */
.ls-fieldset {
  border: 1px solid var(--line); border-radius: 6px;
  margin: 0 0 12px; padding: 10px 12px 6px;
}
.ls-fieldset legend { padding: 0 6px; color: var(--text-dim); font-size: 12px; }
.ls-radios { display: flex; align-items: center; gap: 16px; flex: 1; }
.ls-angle-row { align-items: center; }
.ls-angle-dial {
  width: 46px; height: 46px; flex: none; cursor: crosshair;
  border-radius: 50%;
}
/* 각도 칸: [숫자] ° 가 한 줄, 그 아래 전체 조명 사용 (Photoshop 배치) */
.ls-angle-side {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: 6px 4px; align-items: center; flex: 1;
}
.ls-angle-side .opt-num { width: 56px; }
.ls-angle-side .opt-check { grid-column: 1 / -1; white-space: nowrap; }
.adjust-row .opt-num { width: 56px; }
.adjust-row .unit { color: var(--text-dim); font-size: 11px; }
/* 칸 이름은 줄바꿈하지 않는다 — 앤티 앨리어스가 석 줄로 접혔다 */
.ls-panel .opt-check { white-space: nowrap; flex: none; }
/* 줄 하나에 든 것이 많으면 좁혀 넣는다 (광택 윤곽선 줄) */
.ls-panel .adjust-row { flex-wrap: wrap; row-gap: 6px; }
.ls-panel .adjust-input { min-width: 0; }
.ls-panel .adjust-row .ls-contour-pick { flex: 0 1 130px; }
/* fx 단추 — 작은 칸에서도 읽히게 */
.panel-actions .fx-btn svg { overflow: visible; }

/* 새 레이어 창 — 불투명도 칸과 단위를 한 줄로.
   클리핑 마스크 줄은 배경에서 못 쓰므로 흐리게 두고, 글이 접히지 않게 폭을 준다. */
.newlayer-backdrop .modal { width: min(420px, calc(100vw - 40px)); }
.nl-opacity-row { display: flex; align-items: center; gap: 6px; }
.nl-clip-row { color: var(--text-dim); white-space: normal; }

/* 윤곽선 고르개 — 곡선 그림 단추와 펼쳐지는 그림 목록 (Photoshop 과 같다) */
.ls-contour-box { display: inline-flex; align-items: center; }
.ls-contour-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px 2px 2px; cursor: pointer; color: var(--text-dim);
}
.ls-contour-btn:hover { border-color: var(--blue); }
.contour-popup {
  position: fixed; z-index: 96;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); padding: 8px;
}
.contour-popup[hidden] { display: none; }
.contour-grid { display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; }
.contour-cell {
  background: none; border: 1px solid transparent; border-radius: 3px;
  padding: 1px; cursor: pointer; line-height: 0;
}
.contour-cell:hover { border-color: var(--blue); }
.contour-cell.on { border-color: var(--blue); background: rgba(61, 132, 255, 0.2); }
.contour-load { margin-top: 8px; width: 100%; }

/* 숫자 칸의 위아래 화살표는 안 보이게 (Photoshop 에는 없다) */
.opt-num::-webkit-outer-spin-button,
.opt-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opt-num { -moz-appearance: textfield; appearance: textfield; }

/* 슬라이더 — 가는 홈에 작은 세모 손잡이 (Photoshop 배치).
   홈은 **2px 선**이고 세모는 선 아래에 매달려 꼭지가 선에 닿는다 (사장님 지적 2026-09-02:
   "가로줄 두께가 더 가늘어야지" → 1px 로 했더니 "너무 가늘어 조금 더 굵게" → 2px.
   전에는 3px 둥근 홈에 세모가 겹쳐 있었다). */
.ls-range { -webkit-appearance: none; appearance: none; background: none; height: 16px; }
.ls-range::-webkit-slider-runnable-track {
  height: 2px; background: var(--line); border-radius: 0;
}
.ls-range::-moz-range-track { height: 2px; background: var(--line); border-radius: 0; }
.ls-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 9px; margin-top: 0;      /* 세모 꼭지가 선에 닿고 몸은 선 아래 */
  background: #d8d8d8; border: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ls-range::-moz-range-thumb {
  width: 11px; height: 9px; border: none; border-radius: 0;
  background: #d8d8d8; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* 스타일 목록 — 찾기 칸 · 폴더로 묶은 목록 · 톱니바퀴 (Photoshop 배치) */
.ls-preset-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ls-preset-search {
  flex: 1; background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 4px 8px; font: inherit; font-size: 12px;
}
.ls-preset-gear {
  background: none; border: 1px solid transparent; color: var(--text-dim);
  border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 14px;
}
.ls-preset-gear:hover { border-color: var(--blue); color: var(--text); }
.ls-preset-groups { overflow-y: auto; max-height: 320px; }
.ls-preset-group {
  padding: 5px 6px; color: var(--text); font-size: 12px; cursor: pointer;
  background: rgba(128, 128, 128, 0.1); border-radius: 4px; margin: 6px 0 4px;
  user-select: none;
}
.ls-preset-group:hover { background: rgba(128, 128, 128, 0.18); }

/* 효과 줄 (Photoshop: fx 를 걸면 레이어 아래에 "효과" 와 걸린 효과가 늘어선다) */
/* 레이어 줄보다 촘촘하다 (Photoshop 과 같다) — 위아래 여백을 없애고 줄 높이만 남긴다 */
.layer-row.fx-head, .layer-row.fx-row,
.layer-row.sf-head, .layer-row.sf-row {
  padding: 0 10px 0 22px; gap: 5px; min-height: 18px; cursor: pointer;
}
.layer-row.fx-row, .layer-row.sf-row { padding-left: 40px; }
/* 효과·스마트 필터 줄 사이에는 칸막이 선이 없다.
   .layer-row 가 아래 테두리를 갖고 있어서 효과 줄마다 선이 그어졌다 — 한 레이어에
   딸린 목록인데 따로 노는 줄처럼 보였다. 선은 목록이 끝난 자리(fx-last)에만 둔다. */
.layer-row.fx-head, .layer-row.fx-row,
.layer-row.sf-head, .layer-row.sf-row { border-bottom: none; }
.layer-row.fx-last { border-bottom: 1px solid var(--line); }
.layer-row.fx-head .sf-name, .layer-row.sf-head .sf-name { color: var(--text-dim); }
.layer-row.fx-head .sf-name, .layer-row.fx-row .sf-name,
.layer-row.sf-head .sf-name, .layer-row.sf-row .sf-name { font-size: 11px; }
/* 줄 오른쪽 끝의 fx 와 꺾쇠 */
.layer-row.has-effects { position: relative; padding-right: 48px; }
.layer-fx-controls {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 4px;
  background: inherit; color: var(--text-dim);
}
.layer-fx-mark { font-style: italic; font-family: Georgia, serif; font-size: 13px; cursor: pointer; }
.layer-fx-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch; width: 20px; height: auto; padding: 3px;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: rgba(0,0,0,.12); color: var(--text); cursor: pointer;
}
.layer-fx-toggle:hover { background: rgba(255,255,255,.1); }
.layer-fx-toggle:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
.layer-fx-caret svg { width: 12px; height: 12px; pointer-events: none; }
.layer-fx-caret[aria-expanded="false"] svg { transform: rotate(180deg); }

/* 새 레이어 창 — 이름표를 칸 왼쪽에 둔다 (Photoshop 과 같은 가로 배치).
   위아래로 쌓으면 줄이 두 배가 되어 창이 쓸데없이 길어졌다 (416px). */
.newdoc-form.nl-form {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 9px 12px; width: auto; min-width: 0;
}
.nl-form > :not(.nl-cap) { grid-column: 2; min-width: 0; }
.nl-form > .nl-cap { grid-column: 1; }
/* Optional rows must not leave an empty label that shifts later grid cells. */
.nl-form > .nl-cap:empty, .nl-form > [hidden] { display: none; }
.nl-form .nl-cap {
  color: var(--text-dim); font-size: 11.5px; margin-top: 0;
  white-space: nowrap; text-align: right;
}
.nl-form .nl-clip-row { justify-content: flex-start; font-size: 11.5px; margin-top: 0; }
/* .newdoc-form input 의 width:100% 가 체크박스까지 늘려 글자를 밀어낸다 */
.nl-form .nl-clip-row input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.nl-mode-row { display: flex; align-items: center; gap: 8px; }
.nl-mode-row .nl-mode { flex: 1; min-width: 96px; }
.nl-mode-row .nl-opacity { width: 58px; flex: none; }
.nl-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* 배경 레이어 변환 안내 — 그림 하나에 글 두 줄, 단추는 오른쪽 아래 */
.bgconvert-modal { max-width: 460px; }
.bgconvert-body { display: flex; gap: 14px; padding: 18px 18px 4px; }
.bgconvert-icon { flex: none; width: 26px; height: 26px; }
.bgconvert-icon svg { width: 100%; height: 100%; }
.bgconvert-text p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.bgconvert-text p:last-child { margin-bottom: 0; color: var(--text-dim); }
.bgconvert-actions { padding: 8px 18px 18px; }

/* 문자 스타일 · 단락 스타일 패널 — 이름 붙인 설정 목록 */
.style-panel { display: flex; flex-direction: column; min-height: 0; }
.style-list { flex: 1; overflow-y: auto; }
.style-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.style-row:hover { background: var(--panel2); }
.style-sample {
  flex: none; width: 44px; font-size: 15px; line-height: 1;
  overflow: hidden; white-space: nowrap;
}
.style-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-hint { flex: none; font-size: 11px; color: var(--text-dim); }
.style-rename {
  flex: 1; min-width: 0; background: var(--panel2); color: var(--text);
  border: 1px solid var(--blue); border-radius: 3px; font-size: 12px; padding: 1px 4px;
}
.style-actions { display: flex; justify-content: flex-end; padding: 2px 8px; border-top: 1px solid var(--line); }
.style-actions button {
  width: 24px; height: 20px; background: none; border: 1px solid transparent;
  border-radius: 3px; color: var(--text-dim); font-size: 15px; cursor: pointer;
}
.style-actions button:hover { color: var(--text); border-color: var(--line); }

/* 정렬·고르게 늘어놓기 단추 — 쓸 수 없을 때는 흐리게 (Photoshop 과 같다) */
.align-group button:disabled { opacity: 0.35; cursor: default; }
.align-group button:disabled:hover { background: none; border-color: transparent; }
.align-group .opt-icon { width: 15px; height: 15px; display: block; }
.align-group [data-o] { fill: none; }

/* 하단 막대의 글자 칸 — 글꼴 · 크기 · 색 (Photoshop 의 상황별 작업 표시줄과 같은 차례) */
.task-text-font {
  height: 24px; max-width: 130px; padding: 0 4px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 3px; font-size: 12px;
}
.task-size {
  position: relative;
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  height: 24px; padding: 0 5px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px;
}
.task-size .task-icon-svg {
  width: 14px; height: 14px; flex: none;
  stroke: var(--text-dim); fill: none; stroke-width: 1.3;
}
.task-text-size {
  width: 38px; padding: 0; border: none; background: none;
  color: var(--text); font-size: 12px; text-align: right;
}
/* 숫자 칸 오른쪽의 아래위 화살표는 안 나오게 (Photoshop 과 같다) */
.task-text-size::-webkit-inner-spin-button,
.task-text-size::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.task-text-size { -moz-appearance: textfield; appearance: textfield; }
.task-size-unit { color: var(--text-dim); font-size: 11px; }
.task-text-color {
  width: 22px; height: 22px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 3px; background: #ffffff;
}
.task-text-color:hover { border-color: var(--text-dim); }

/* Layer effects use the same compact structure / quality groups as the reference. */
.ls-reference-group { border-radius: 0; padding: 6px 10px; margin-bottom: 12px; min-width: 0; }
.ls-reference-group .adjust-row { min-height: 26px; margin: 4px 0; }
.ls-reference-group .ls-fx-blend { flex: 0 1 160px; }
.ls-reference-group .ls-color { width: 32px; height: 25px; flex: none; }
.ls-effect-angle-dial { width: 40px; height: 40px; flex: none; touch-action: none; cursor: crosshair; }
.ls-panel .ls-range[hidden] { display: none; }
.ls-panel .opt-num { flex: 0 0 54px; min-width: 0; }
.ls-panel .unit { flex: none; min-width: 14px; }
/* Adjustment panels put sliders on a second line; layer styles keep one row. */
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) { flex-wrap: nowrap; gap: 6px; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > * { order: 0; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > .adjust-label { flex: 0 0 92px; min-width: 0; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > input[type="range"] { flex: 1 1 50px; width: auto; }
.styles-modal .ls-panel .adjust-row:has(.ls-effect-angle-dial) { justify-content: flex-start; }
.styles-modal .ls-panel:has(.ls-reference-group) { gap: 5px; }
.styles-modal .ls-reference-group { margin-bottom: 5px; padding: 4px 8px; }
.styles-modal .ls-reference-group .adjust-row { margin: 1px 0; min-height: 24px; }
.styles-modal .ls-reference-group .ls-check-row { margin: 3px 0 3px 98px; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > .adjust-label { order: 1; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > input[type="range"],
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > .ls-effect-angle-dial { order: 2; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > .opt-num { order: 3; }
.styles-modal .ls-panel .adjust-row:has(input[type="range"]) > .unit { order: 4; }