/* ── 혼합 모드 목록 (우리가 그린다) ──
   브라우저가 그리는 select 는 항목 위에 마우스가 올라간 것을 알 수 없어 미리 보기를
   못 한다. Photoshop 은 목록을 훑기만 해도 그림에 바로 비치므로 같은 방식으로 만든다. */
.blend-select { display: none; }
.blend-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-size: 12px; padding: 2px 6px; cursor: pointer;
  height: 22px; text-align: left;
}
.blend-btn:hover { border-color: var(--text-dim); }
.blend-btn-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blend-btn-arrow { flex: none; color: var(--text-dim); font-size: 10px; }
.blend-pop {
  /* fixed 다 — 자리를 화면 좌표(getBoundingClientRect)로 잡기 때문이다.
     .panels 가 position: relative 라 absolute 로 두면 패널 왼쪽 끝만큼 더 밀려
     화면 밖(창 폭 1500 인데 x=2476)에 열렸다. 열려도 안 보이니 "단추가 안 먹는다"
     로 보였다 (사용자 지적 2026-08-26). */
  position: fixed; z-index: 60; min-width: 150px; max-height: 70vh; overflow-y: auto;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .6); padding: 3px 0;
}
.blend-pop[hidden] { display: none; }
.blend-pop button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); font-size: 12px; padding: 3px 12px; cursor: pointer; white-space: nowrap;
}
.blend-pop button:hover, .blend-pop button.hot { background: var(--blue); color: #fff; }
.editor :is(.blend-btn, .font-pick-btn, .tp-font-btn, .mdl-row, .gallery-cell,
  .bp-item, .bp-recent-item, .pat-item, .contour-cell, .tpp-row, .grad-preset-chip,
  .sw-cell, .ls-preset, .ctx-menu button, .warp-pop button):focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px;
}
.blend-pop button.on { font-weight: 600; }
.blend-pop .blend-sep { height: 1px; background: var(--line); margin: 3px 0; }
/* 텍스트 뒤틀기 스타일 목록 — 혼합 모드 목록과 같은 결에, 항목마다 그 뒤틀기 모양 그림
   (사장님 화면 #52, 2026-09-02). 값을 드는 select 는 숨긴다. */
.warp-style-btn { width: 100%; flex: none; }
.warp-style[hidden] { display: none; }
.warp-pop button { display: flex; align-items: center; gap: 8px; }
.warp-ico { flex: none; width: 16px; height: 10px; color: var(--text-dim); }
.warp-pop button:hover .warp-ico, .warp-pop button.on .warp-ico, .warp-style-btn .warp-ico { color: inherit; }