/* ── 브러시 사전 설정 ── */
.brush-preset-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px 2px 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
/* hidden 을 주면 감춰져야 한다 — display 규칙이 UA 의 [hidden] 을 이겨서 제거 도구에서 안 사라졌다 */
.optionsbar .brush-preset-btn[hidden] { display: none; }
.brush-preset-btn:hover { border-color: var(--text-dim); }
.brush-preset-thumb { width: 44px; height: 22px; display: block; border-radius: 2px; }
.brush-presets {
  /* 대화상자(레이어 스타일) 위에 떠야 한다 — 무늬 고르는 창이 그 안에서 열린다 */
  position: fixed; z-index: 210; width: 340px; max-height: 560px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column;
}
.brush-presets[hidden] { display: none; }
.bp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text);
}
.bp-import { cursor: pointer; }
/* 위쪽 조절부 — 붓끝 모양 · 크기 · 경도 (Photoshop 붓 창과 같은 자리) */
.bp-top { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.bp-tip { width: 72px; height: 72px; flex: none; cursor: grab; background: var(--panel2); border-radius: 3px; }
.bp-tip:active { cursor: grabbing; }
.bp-sliders { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bp-row { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
.bp-row > span:first-child { flex: 1 1 auto; }
.bp-row .opt-num { width: 62px; }
.bp-unit { color: var(--text-dim); font-size: 11px; }
.bp-sliders .opt-range { width: 100%; }
.bp-tools { display: flex; flex-direction: column; gap: 4px; }
.bp-tools .bp-import { display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; }
.bp-tools svg { width: 15px; height: 15px; fill: none; stroke: var(--text); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; }
/* 검색 칸 */
.bp-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-bottom: 1px solid var(--line); }
.bp-search svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--text-dim);
  stroke-width: 1.4; stroke-linecap: round; }
.bp-search-input { flex: 1 1 auto; min-width: 0; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; font-size: 12px; }
/* 최근 쓴 붓끝 줄 */
.bp-recent { display: flex; gap: 4px; padding: 6px 10px; overflow-x: auto;
  border-bottom: 1px solid var(--line); scrollbar-width: none; }
.bp-recent::-webkit-scrollbar { display: none; }
.bp-recent[hidden] { display: none; }
.bp-recent-item { flex: none; width: 30px; height: 30px; padding: 1px; cursor: pointer;
  background: var(--panel2); border: 1px solid transparent; border-radius: 3px; }
.bp-recent-item.on { border-color: var(--blue); }
.bp-recent-item canvas { width: 26px; height: 26px; display: block; }
/* 묶음별 목록 — 접었다 펼 수 있다 */
.bp-groups { padding: 4px 0; overflow-y: auto; flex: 1 1 auto; }
.bp-group-head { display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 5px 10px; background: var(--panel2); border: none; cursor: pointer;
  color: var(--text); font-size: 12px; text-align: left; }
.bp-group-head:hover { filter: brightness(1.15); }
/* 묶음 접기 화살표 — 사용자 요청으로 두 배 (2026-08-24). 작아서 눈에 안 띄었다 */
.bp-arrow { width: 20px; font-size: 21px; line-height: 1; color: var(--text-dim); }
.bp-folder { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-dim);
  stroke-width: 1.3; stroke-linejoin: round; }
.bp-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; }
/* 붓 하나 — 그어 본 자국과 이름 (동그란 붓끝만 보면 어떤 붓인지 알 수 없다) */
.bp-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  padding: 3px; background: var(--panel2); border: 1px solid transparent; border-radius: 2px;
  color: var(--text-dim); cursor: pointer; font-size: 10.5px; text-align: left;
}
.bp-item:hover { filter: brightness(1.2); }
.bp-item.on { border-color: var(--blue); color: var(--text); }
/* 높이는 항목이 스스로 정한다 (바닥 슬라이더가 배율을 바꾼다) */
.bp-item canvas { width: 100%; display: block;
  /* 획을 흰색으로 그리므로 칸은 어두워야 보인다 (Photoshop 은 흰 칸에 검은 획인데,
     우리 창이 어두운 쪽이라 반대로 두는 편이 눈에 편하다) */
  background: #1c1c1c; border-radius: 2px; }
.bp-item { position: relative; }
.bp-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 도구 설정을 담은 붓 표시 — 오른쪽 위 작은 붓 */
.bp-tool-mark { position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; opacity: .65; }
.bp-tool-mark svg { width: 12px; height: 12px; fill: currentColor; }
/* 끌어서 차례 바꾸기 — 놓을 자리를 파란 선으로 */
.bp-item.dragging { opacity: 0.4; }
.bp-item.drop-before { box-shadow: inset 2px 0 0 var(--blue); }
.bp-item.drop-after { box-shadow: inset -2px 0 0 var(--blue); }
/* 묶음 머리를 끌어 차례 바꿀 때 — 위/아래 어느 쪽에 놓일지 파란 줄로 */
.bp-group-head.drop-above { box-shadow: inset 0 2px 0 var(--blue); }
.bp-group-head.drop-below { box-shadow: inset 0 -2px 0 var(--blue); }
.bp-group-head.dragging { opacity: .5; }
/* 붓끝만 보기 — 그림과 이름을 한 줄에 */
.bp-item:has(canvas[style*="width"]) { flex-direction: row; align-items: center; gap: 5px; }
/* 획 미리 보기 — 지금 설정으로 그으면 무엇이 나오는지 (Photoshop 도 패널 아래에 둔다).
   바탕을 체크무늬로 깔아 반투명한 획이 얼마나 비치는지 보인다. */
.bp-preview-row { padding: 7px 10px; border-top: 1px solid var(--line); }
.bp-stroke-preview { display: block; width: 100%; height: 56px; border-radius: 4px;
                     border: 1px solid var(--line);
                     background-color: var(--panel);
                     background-image:
                       linear-gradient(45deg, var(--line) 25%, transparent 25%),
                       linear-gradient(-45deg, var(--line) 25%, transparent 25%),
                       linear-gradient(45deg, transparent 75%, var(--line) 75%),
                       linear-gradient(-45deg, transparent 75%, var(--line) 75%);
                     background-size: 10px 10px;
                     background-position: 0 0, 0 5px, 5px -5px, -5px 0; }
/* 붓에 마우스를 올리면 뜨는 큰 획 (Adobe: "Hover over a brush to see a live stroke
   preview"). 붓 창 밖으로 나가야 해서 body 에 붙인다 — 창 안에 두면 옆 붓에 가린다. */
.bp-hover { position: fixed; z-index: 2200; pointer-events: none;
            padding: 6px; border-radius: 6px; border: 1px solid var(--line);
            background: var(--panel); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.bp-hover canvas { display: block; border-radius: 3px; background: var(--bg); }
.bp-hover-name { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
/* 크기 되돌리기 화살표 — 숫자 칸 옆에 작게 */
.bp-size-reset { padding: 2px; line-height: 0; }
.bp-size-reset svg { width: 13px; height: 13px; fill: none;
                     stroke: currentColor; stroke-width: 1.5;
                     stroke-linecap: round; stroke-linejoin: round; }
/* 간격 체크칸 — 값 줄 바로 아래에 붙여 무엇을 켜고 끄는지 보이게 */
.bp-spacing-on { margin: -2px 0 4px 0; font-size: 11px; }
.bp-note { margin: 0; padding: 6px 10px; border-top: 1px solid var(--line);
           color: var(--text-dim); font-size: 11px; }
/* 바닥의 축소판 크기 슬라이더 */
.bp-zoom { padding: 4px 10px 7px; border-top: 1px solid var(--line); }
.bp-zoom-range { width: 100%; }

/* 자동 선택으로 커서 아래에 든 레이어 — 패널에서도 같이 표시한다
   (Adobe: "the corresponding layer is highlighted in the Layers panel") */
.layer-row.hovered { outline: 1px solid #2f7fe8; outline-offset: -1px; }

/* 뒤틀기 옵션바 — 톱니바퀴를 누르면 격자선 보기 설정이 아래로 펼쳐진다 */
.opts-warp .opt-icon { width: 14px; height: 14px; display: block; }
.opts-warp .warp-splits { display: inline-flex; gap: 2px; }
.warp-gear-menu {
  /* 옵션바는 좌우로 밀리게 되어 있어(overflow) 안쪽에 띄우면 잘린다 — 화면에 붙인다 */
  position: fixed; z-index: 60;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* display:flex 가 [hidden] 을 이긴다 — 숨김을 다시 못 박는다 */
.warp-gear-menu[hidden] { display: none; }
.warp-gear-menu label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.warp-gear-menu .opt-num { width: 56px; }