/* 채널 패널 — RGB 셋과 알파 채널 줄 */
.channel-list { overflow-y: auto; flex: 1; }
.channel-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px; cursor: pointer;
}
.channel-row:hover { background: var(--panel-2); }
.channel-row.on { background: var(--sel, #2f4f7f); }
.channel-eye { background: none; border: 0; padding: 0; width: 18px; height: 18px;
  color: var(--text-dim, #8a8a8a); cursor: pointer; }
.channel-eye.on { color: var(--text); }
.channel-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.channel-thumb { border: 1px solid var(--line); background: #000; }
.channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 아래 아이콘 막대는 패널마다 높이가 달랐다 — 레이어 25 · 색상 견본 34 · 채널 35 ·
   문자 스타일 31 (실측 2026-09-01, 사장님 지적 "a높이 B에 맞쳐죠 다른것들도").
   레이어 막대(.panel-actions, 25px)에 다 맞춘다. 아이콘 크기는 그대로 둔다. */
.channel-actions { display: flex; gap: 4px; padding: 2px 6px; border-top: 1px solid var(--line); }
.channel-actions button {
  height: 20px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.channel-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
/* display:flex 는 [hidden] 의 display:none 보다 세다 — 숨겨도 보이는 채로 남아,
   다른 탭에서도 액션·컴프·채널 단추 줄이 떠 있었다 (사용자가 "이게 왜 여기 있나" 로 신고).
   Ctrl+F 검색 창(.cmdk-overlay)에서 이미 한 번 겪은 것과 같은 문제다. */
.action-buttons[hidden], .comp-buttons[hidden], .channel-actions[hidden],
/* ── 도구 사전 설정 · 메모 · 측정 로그 패널 ────────────────────────────── */
.toolpreset-panel, .note-panel, .measurelog-panel {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
}
.tpp-list, .np-list, .ml-list { flex: 1; min-height: 0; overflow-y: auto; padding: 3px; }
.tpp-only { padding: 5px 6px 3px; font-size: 11px; }
.tpp-empty { padding: 10px 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.tpp-row {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 5px;
  background: none; border: 1px solid transparent; border-radius: 2px;
  color: var(--text); cursor: pointer; text-align: left; font-size: 11px;
}
.tpp-row:hover { background: var(--hover); border-color: var(--line); }
.tpp-row.on { background: var(--sel); }
.tpp-chip { width: 11px; height: 11px; flex: none; border: 1px solid var(--line); }
.tpp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.np-row { display: flex; align-items: center; gap: 5px; padding: 2px 4px; }
.np-row:hover { background: var(--hover); }
.np-n { width: 16px; flex: none; text-align: right; color: var(--muted); font-size: 10px; }
.np-text {
  flex: 1; min-width: 0; padding: 2px 4px; background: none; border: none;
  color: var(--text); cursor: pointer; text-align: left; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-text:hover { text-decoration: underline; }
.np-x {
  flex: none; width: 16px; padding: 0; background: none; border: none;
  color: var(--muted); cursor: pointer;
}
.np-x:hover { color: var(--red); }

.ml-actions { display: flex; gap: 4px; padding: 4px 5px 2px; }
.ml-row { display: flex; gap: 6px; padding: 2px 4px; font-size: 11px; }
.ml-row.ml-head { color: var(--muted); border-bottom: 1px solid var(--line); }
.ml-n { width: 18px; flex: none; text-align: right; color: var(--muted); }
.ml-kind { width: 62px; flex: none; }
.ml-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 사전 설정 패널 공통 (스타일 · 앞으로 패턴 · 그레이디언트) ─────────────
   책 187~190쪽 4.6 절: 그룹(접었다 펴는 폴더) + 보기 갈래 다섯 */
.style-panel, .gradient-panel, .pattern-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.style-list, .gradient-list, .pattern-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.sp-group {
  display: flex; align-items: center; gap: 4px; padding: 3px 4px; cursor: pointer;
  font-size: 11px; color: var(--muted); user-select: none;
}
.sp-group:hover { color: var(--text); }
.sp-items.as-grid { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 4px 6px; }
.sp-items.as-list { display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 6px; }
.sp-item {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px; background: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; color: var(--text); text-align: left;
}
.sp-items.as-list .sp-item { width: 100%; padding: 2px 4px; }
.sp-item:hover { border-color: var(--line); background: var(--hover); }
.sp-item canvas { display: block; border: 1px solid var(--line); }
.sp-name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-x {
  position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; line-height: 12px;
  text-align: center; font-size: 11px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); display: none;
}
.sp-item:hover .sp-x { display: block; }
.sp-x:hover { color: var(--red); }

/* ── 내비게이터 패널 (창 › 내비게이터) ──────────────────────────────────
   책 145쪽 그림 3.33: 위는 그림 한 장(보이는 자리를 테두리로), 아래는
   배율 칸 · 산 그림 · 미끄럼자 · 산 그림 한 줄 */
.nav-panel { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; }
.nav-preview {
  flex: 1; min-height: 90px; width: 100%; display: block; cursor: grab;
  border: 1px solid var(--line); background: var(--bg);
}
.nav-foot { display: flex; align-items: center; gap: 6px; }
.nav-zoom-num { width: 58px; flex: none; }
.nav-step {
  flex: none; width: 20px; height: 18px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer;
}
.nav-step:hover { color: var(--text); }
.nav-step svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.nav-step-out svg { width: 10px; height: 10px; }
.nav-zoom-range { flex: 1; min-width: 0; }

/* ── 색상 패널 (창 › 색상, F6) ────────────────────────────────────────────
   책 698쪽 그림 21.9 짜임: 왼쪽에 전경·배경 상자, 오른쪽에 슬라이더 줄,
   그 아래 왼쪽 모서리에 경고 둘, 맨 아래에 색상 경사도가 남는 높이를 다 먹는다 */
.color-panel { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; }
.cp-top { display: flex; gap: 10px; align-items: flex-start; }

/* 전경·배경 상자 — 원문처럼 겹쳐 놓는다. 활성 쪽에 검정 윤곽선 */
.cp-swatches { position: relative; width: 46px; height: 46px; flex: none; }
.cp-fg, .cp-bg {
  position: absolute; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.cp-fg { left: 0; top: 0; z-index: 2; }
.cp-bg { right: 0; bottom: 0; z-index: 1; }
.cp-fg.on, .cp-bg.on { outline: 2px solid var(--text); outline-offset: 1px; z-index: 3; }

.cp-sliders { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-row { display: flex; align-items: center; gap: 6px; }
.cp-name { width: 12px; flex: none; font-size: 11px; color: var(--muted); text-align: center; }
.cp-unit { width: 12px; flex: none; font-size: 11px; color: var(--muted); }
/* 띠는 배경(그 칸을 움직였을 때 나올 색)을 그대로 보이고, 손잡이만 얹는다 */
.cp-range {
  flex: 1; min-width: 0; height: 12px; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 2px; background-size: 100% 100%;
}
.cp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 16px; cursor: ew-resize;
  background: var(--panel); border: 1px solid var(--text); border-radius: 2px;
}
.cp-range::-moz-range-thumb {
  width: 11px; height: 16px; cursor: ew-resize;
  background: var(--panel); border: 1px solid var(--text); border-radius: 2px;
}
.cp-num { width: 46px; flex: none; }

/* 경고 둘 — 경사도 왼쪽 모서리 위 (adobe-help 화면의 C 자리) */
.cp-warns { display: flex; gap: 6px; min-height: 18px; align-items: center; }
.cp-warn {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 3px;
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px;
}
.cp-warn:hover { color: var(--text); }
.cp-warn-chip { width: 11px; height: 11px; border: 1px solid var(--line); display: inline-block; }

/* 색상 경사도 — 남은 높이를 다 먹는다 (책 그림 21.9 처럼 판 아래를 채운다) */
.cp-ramp {
  touch-action: none;
  flex: 1; min-height: 26px; width: 100%; display: block;
  border: 1px solid var(--line); border-radius: 2px;
}
.cp-cube { display: none; position: relative; min-height: 0; flex: 1; gap: 14px; }
.cp-cube-mode .cp-cube { display: flex; }
.cp-cube-mode .cp-sliders, .cp-cube-mode .cp-ramp { display: none; }
.cp-cube-mode .cp-top { min-height: 35px; }
.cp-field, .cp-hue { position: absolute; top: 0; touch-action: none; cursor: crosshair; min-height: 0; height: 100%; }
.float-body > .color-panel.cp-cube-mode { min-height: 260px; }
.cp-field { left: 0; width: calc(100% - 34px); }
.cp-hue { right: 0; width: 20px; }

.style-panel[hidden], .gradient-panel[hidden], .pattern-panel[hidden],
.toolpreset-panel[hidden], .note-panel[hidden], .measurelog-panel[hidden] { display: none; }
.nav-panel[hidden] { display: none; }
.color-panel[hidden] { display: none; }
.swatch-panel[hidden] { display: none; }

/* 붓 창의 동적 요소 — 접었다 펴는 세 갈래 */
.bp-dyn { border-top: 1px solid var(--line); }
.bp-dyn-head {
  display: flex; align-items: center; gap: 5px; width: 100%;
  background: none; border: 0; color: var(--text); padding: 6px 8px;
  cursor: pointer; font-size: 12px; text-align: left;
}
.bp-dyn-head:hover { background: var(--panel-2); }
.bp-dyn-body { padding: 2px 8px 8px; }
.bp-dyn-group { margin-bottom: 8px; }
.bp-dyn-title {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-weight: 600; margin: 4px 0 2px;
}
.bp-dyn-val { width: 42px; text-align: right; color: var(--text-dim, #9a9a9a); }
.bp-dyn-reset { width: 100%; }

/* 마스크 속성 대화상자 — 밀도·페더 슬라이더 두 단 */
.maskprops-modal { width: 300px; }
.mp-head { font-weight: 600; display: block; margin: 6px 0 2px; }
.mp-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.mp-row > span:first-child { width: 40px; }
.mp-row .opt-range { flex: 1; }
.mp-val { width: 44px; text-align: right; color: var(--text-dim, #9a9a9a); }

/* 도구 사전 설정 단추 — 옵션바 맨 왼쪽, 지금 도구 그림과 작은 화살표 */
.tool-preset-btn {
  display: flex; align-items: center; gap: 3px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 4px; height: 24px; cursor: pointer; color: var(--text);
}
.tool-preset-btn:hover { border-color: var(--blue); }
.tool-preset-icon { display: flex; width: 18px; height: 18px; }
/* 툴바에서 그림을 복사해 오는 자리다. 색 규칙(.tool svg)은 툴바 단추에만 걸려 있어
   여기서는 SVG 기본값(검정)으로 나왔다 — 툴바와 같은 규칙을 여기에도 둔다. */
.tool-preset-icon svg { width: 18px; height: 18px; fill: var(--text); stroke: none; }

/* ── 떠 있는 판의 맨 위 얇은 줄 ── 원문(사장님 그림 2026-08-31)에는 판 이름 줄
   위에 **색이 다른 얇은 띠**가 있고 오른쪽에 접기·닫기가 붙는다.
   레이어를 떼어 내도 도구 막대를 떼어 내도 이 줄은 똑같이 붙는다 — 기본 구조다. */
.float-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  height: 18px; padding: 0 3px;
  background: var(--deep);                 /* 이름 줄(--panel)보다 한 단 어둡다 */
  border-bottom: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  cursor: grab;                            /* 이 줄을 잡아 옮긴다 */
}
.float-bar:active { cursor: grabbing; }
.float-collapse, .float-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 0 4px; line-height: 1;
  font: inherit; display: inline-flex; align-items: center;
}
/* 접기 화살촉 — X 와 같은 높이(11px)로 그린다. 글자 `‹` 로는 못 맞춘다 */
.fc-ico { width: 10px; height: 11px; display: block; }
.float-collapse.flip .fc-ico { transform: scaleX(-1); }
.float-close { font-size: 15px; }
.float-collapse:hover, .float-close:hover { color: var(--text); }
/* 접힌 기둥 맨 위 잡는 줄 — 점 무늬 (사장님 포토샵 화면 2026-09-02:
   "탭 최소 축소일때 쩜쩜쩜이 있어 잡을게 있다"). 펼치면 숨는다. */
.float-grab { display: none; }
.float-panel.collapsed .float-grab {
  display: flex; align-items: center; justify-content: center;
  height: 10px; flex: none; cursor: grab;
  background: var(--deep); border-bottom: 1px solid var(--line);
}
.float-panel.collapsed .float-grab::before {
  content: ""; width: 18px; height: 4px;
  background-image: radial-gradient(circle, var(--text-dim) 1px, transparent 1.3px);
  background-size: 4px 4px; background-position: 0 0;
}
.float-panel.collapsed .float-grab:active { cursor: grabbing; }


/* 접으면 세로 아이콘 기둥이 된다 — 사장님 포토샵 화면 (2026-09-02):
   « 를 누르면 폭까지 아이콘 너비(40px 짜리)로 줄고, 위에 » X, 아래에 판 아이콘.
   (전에는 260px 가로 막대 그대로였다 — 몸통만 감추고 폭을 안 줄였다.) */
.float-panel.collapsed .float-head,
.float-panel.collapsed .float-body,
.float-panel.collapsed .float-grip,
.float-panel.collapsed .float-foot { display: none; }
.float-panel.collapsed { height: auto !important; min-height: 0; width: 40px !important; }
.float-icons { display: none; }
.float-panel.collapsed .float-icons { display: flex; flex-direction: column; padding: 3px 0; }
.float-ico {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  width: 100%; height: 30px; display: flex; align-items: center; justify-content: center;
}
.float-ico svg { width: 18px; height: 18px; flex: none; }
.float-ico:hover { color: var(--text); background: var(--hover, rgba(255,255,255,.07)); }
/* 접힌 기둥의 위 줄은 좁다 — 단추 둘이 딱 맞게 */
.float-panel.collapsed .float-bar { padding: 0 2px; justify-content: center; }