/* ── 왼쪽 도크 (도구 막대 옆) ──
   근거: 책 175쪽 옆 상자 「Bedienfelder am linken Bildrand andocken」.
   비어 있으면 --left-dock 이 0 이라 칸 자체가 사라진다. */
.panels-left {
  grid-area: leftdock; background: var(--panel);
  border-right: 1px solid var(--line); position: relative;
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
body:not(.has-left-dock) .panels-left { display: none; }
.panels-left .panel-dock { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 폭 손잡이 — 오른쪽 모서리 */
.left-dock-resize {
  position: absolute; top: 0; bottom: 0; right: -3px; width: 6px;
  cursor: ew-resize; z-index: 5;
}
/* 왼쪽 가장자리에 놓을 때 뜨는 파란 띠 — 자리는 markPanelDrop 이 그때그때 잰다
   (한 줄 40px · 두 줄 74px · 떼기 0 이라 CSS 에 못 박아 둘 수 없다) */
.left-edge-mark {
  position: fixed; width: 3px;
  background: var(--blue); border-radius: 2px; z-index: 80;
}

/* 브러시 설정 창 (F5) — 붓 고르는 창과 **따로**다 (책 57쪽 표 1.2).
   같은 .brush-presets 껍데기를 쓰되 목록이 없어 짧다. */
.brush-settings { width: 320px; max-height: 78vh; overflow-y: auto; }
.brush-settings .bp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px;
}