/* 정렬 아이콘은 가로판·세로판을 한 svg 에 같이 넣어 두고 갈아 끼운다.
   세로 쓰기를 켜면 글이 위→아래로 흐르므로 정렬도 세로가 된다 (Photoshop 과 같다).
   두 벌을 겹쳐 두면 단추 크기가 안 흔들리고, JS 가 class 하나만 켜면 된다. */
.ico-v { display: none; }
body.text-vertical-on .text-align .ico-h { display: none; }
body.text-vertical-on .text-align .ico-v { display: inline; }

/* 옵션 막대 안의 고르개·입력칸은 다 **파인 면**이다.
   규칙이 없는 것(.text-style 처럼)은 브라우저 기본색(#6b6b6b)으로 그려져
   옆 칸과 따로 놀았다 — 막대 안 것을 한 번에 묶는다 (사장님 지적 2026-08-31) */
.optionsbar select, .optionsbar input[type="number"], .optionsbar input[type="text"] {
  background: var(--sunken); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 12px; padding: 2px 4px;
}
.optionsbar {
  grid-area: opts;
  /* 옵션 막대 바탕은 **패널 몸통색**이다 (사장님 그림 #535353) — 한 단 올라온
     면(--panel2 #5e5e5e)이 아니다. 안쪽 입력칸만 파인다 */
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  flex-wrap: nowrap; white-space: nowrap; min-width: 0;
  padding: 0 12px; color: var(--text-dim);
  /* Keep the controls at their natural width and clip the right-hand end.
     clip also prevents focusing an offscreen control from scrolling the row.
     잘린 쪽은 끌거나 쓸어서 본다 (lib/editor/bar_pan.js, 사장님 지시 2026-09-18).
     세로는 열어 둔다 — 막대 안에서 아래로 뜨는 것이 생기면 잘리지 않게. */
  overflow-x: clip; overflow-y: visible;
}
.optionsbar > * { flex-shrink: 0; }
.optionsbar::-webkit-scrollbar { display: none; }
.context-actions { margin-left: auto; }
/* 옵션바 오른쪽 끝 — 검색·작업 영역 단추 (메뉴바에서 옮김, 2026-09-02).
   옵션 항목이 많아 밀려도 이 둘은 줄지 않는다 */
.ob-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; }
.ob-right .ws-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; padding: 2px 6px; border-radius: 3px;
}
.ob-right .ws-btn:hover { background: var(--panel2); color: var(--text); }
.opt-check { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); cursor: pointer; }
.opt-check input { accent-color: var(--blue); }
.opt-group { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); }
.opt-group[hidden] { display: none; }
.opts-move[hidden] { display: none; }

/* ── 그레이디언트 옵션바 (Photoshop 배치) ── */
/* 견본은 지금 고른 색을 그대로 보여 준다. 목록은 위에 투명하게 겹쳐 둔 select 가 여는데,
   이렇게 해야 생김새는 포토샵처럼 두면서 키보드 조작과 접근성은 브라우저 것을 그대로 쓴다. */
.grad-swatch-box {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 5px 2px 3px;
}
.grad-swatch {
  position: relative; width: 62px; height: 16px; border-radius: 2px;
  border: 1px solid var(--line);
  /* 투명한 색이 있으면 뒤의 체크무늬가 비친다 */
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #cccccc 25%, transparent 25%),
    linear-gradient(-45deg, #cccccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cccccc 75%),
    linear-gradient(-45deg, transparent 75%, #cccccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.grad-swatch-fill { position: absolute; inset: 0; border-radius: 1px; }
.grad-swatch-arrow {
  width: 8px; height: 5px; flex: none;
  fill: none; stroke: var(--text-dim); stroke-width: 1.2; stroke-linecap: round;
}
.grad-swatch-box select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font: inherit;
}
.grad-swatch-box:hover { border-color: var(--text-dim); }

.grad-types { display: inline-flex; align-items: center; gap: 2px; }
.grad-type-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); cursor: pointer;
}
.grad-type-btn + .grad-type-btn { margin-left: -1px; }
.grad-type-btn:hover { background: var(--panel2); }
.grad-type-btn.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
  position: relative; z-index: 1;
}
.grad-type-btn svg { width: 15px; height: 15px; }
/* 입력칸은 패널보다 **어둡다** — 파인 면이라는 뜻이다
   (사장님 그림: 패널 #535353 · 입력칸 #454545) */
.opt-num {
  width: 54px; background: var(--sunken); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 1px 6px; font: inherit;
}
.opt-range { width: 80px; accent-color: var(--blue); }
/* ── 슬라이더 공통 모양 (확정 디자인, 2026-09-02) ──
   텍스트 뒤틀기 창에서 사장님과 맞춘 것: 2px 선 + 그 아래 매달린 세모 손잡이 (꼭지가 선에 닿음).
   포토샵은 옵션바·패널·대화상자 어디서나 이 슬라이더라 우리도 한 규칙으로 간다
   (사장님: "확정된 슬라이드 디자인 다른 데서 같은 경우에 적용"). 색 띠 슬라이더(.tinted)는
   띠를 그대로 두고 손잡이만 세모로 바꾼다 (포토샵 색상 균형도 색 띠 밑에 세모다). */
body.editor-body input[type="range"]:not(.tinted) {
  -webkit-appearance: none; appearance: none;
  background: none; border: none; border-radius: 0; padding: 0; height: 16px; margin: 0;
}
body.editor-body input[type="range"]:not(.tinted)::-webkit-slider-runnable-track {
  height: 2px; background: var(--slider-track); border-radius: 0;
}
body.editor-body input[type="range"]:not(.tinted)::-moz-range-track {
  height: 2px; background: var(--slider-track); border-radius: 0;
}
body.editor-body input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 10px; margin-top: 0; border: none; border-radius: 0;
  background: #ececec; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body.editor-body input[type="range"]::-moz-range-thumb {
  width: 13px; height: 10px; border: none; border-radius: 0;
  background: #ececec; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body.editor-body input[type="range"].tinted::-webkit-slider-thumb { margin-top: 5px; }
body.editor-body input[type="range"]:disabled { opacity: .4; }
body.editor-body input[type="range"]:focus { outline: none; }
body.editor-body input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--blue); }

/* ── 모양 도구 옵션바 ── */
.opts-shape .opt-num { width: 48px; }
.opt-select {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 2px 4px; font: inherit;
}
.opt-color {
  width: 26px; height: 20px; padding: 0; flex: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.opt-label { color: var(--text-dim); }
.opts-shape .unit { color: var(--text-dim); font-size: 12px; }
.shape-paint-wrap, .shape-sides-wrap, .shape-inner-wrap, .shape-radius-wrap {
  display: inline-flex; align-items: center; gap: 6px;
}
.shape-paint-wrap[hidden], .shape-sides-wrap[hidden],
.shape-inner-wrap[hidden], .shape-radius-wrap[hidden] { display: none; }

/* ── 색조 도구 옵션바 (흐림·선명·손가락 / 닷지·번·스폰지) ── */
.opts-tone .opt-num, .opts-dodge .opt-num { width: 48px; }
.opts-tone .unit, .opts-dodge .unit { color: var(--text-dim); font-size: 12px; }
.brush-mode-wrap, .brush-paint-wrap, .dodge-tone-wrap, .sponge-wrap, .tone-detail-wrap {
  display: inline-flex; align-items: center; gap: 8px;
}
.brush-mode-wrap[hidden], .brush-paint-wrap[hidden],
.dodge-tone-wrap[hidden], .sponge-wrap[hidden],
.tone-detail-wrap[hidden], .tone-finger-wrap[hidden] { display: none; }

/* ── 자유 변형 옵션바 (Photoshop 배치) ── */
.opts-transform[hidden] { display: none; }
.opt-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); white-space: nowrap; }
.opt-inline .opt-num { width: 62px; }
.opt-sep { width: 1px; height: 16px; background: var(--line); margin: 0 2px; }
.opt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); cursor: pointer;
}
.opt-btn:hover { border-color: var(--blue); }
.opt-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.opt-btn.primary { color: var(--blue); font-weight: 700; }
.opt-btn.primary:hover { background: var(--blue); color: #fff; }
/* 프레임 도구 옵션바 — 아이콘 두 개 (원문 옵션바도 아이콘만 둘이다) */
.frame-kind { padding: 3px 6px; display: inline-flex; align-items: center; }
.frame-kind svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.frame-kind svg [data-o] { fill: none; stroke: currentColor; }
/* 떠 있는 툴바는 좌우 여백이 0 이라 머리 줄의 음수 여백이 밖으로 삐져나온다 */
.toolbar.floating .toolbar-head { width: 100%; margin-left: 0; margin-right: 0; }
/* 기준점 3×3 — 아홉 자리 중 하나를 고른다. 8px 칸은 누르기 어려워 조금 키웠다. */
/* 기준점 고르는 3x3 — 옵션바가 32px 이라 42px 이던 것이 위아래로 삐져나왔다.
   칸 6 + 사이 1 + 안쪽 여백 2 + 테두리 1 = 26px 로 맞춘다. */
.ref-grid {
  display: grid; grid-template-columns: repeat(3, 6px); grid-template-rows: repeat(3, 6px);
  gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel);
  flex: none;
}
.ref-grid[hidden] { display: none; }
.ref-cell {
  width: 6px; height: 6px; padding: 0; cursor: pointer;
  background: var(--deep); border: 1px solid var(--line); border-radius: 1px;
}
.ref-cell:hover { border-color: var(--blue); background: var(--panel2); }
.ref-cell.on {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
.ctx-btn {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 2px 10px; cursor: pointer; font: inherit;
}
.ctx-btn:hover { border-color: var(--blue); }