/* ── 패널 아이콘 도크 (Photoshop 의 접힌 도크) ──
   접으면 오른쪽에 아이콘 줄만 남고, 아이콘을 누르면 그 패널이 왼쪽으로 툭 나온다.
   화면을 넓게 쓰면서도 패널에 한 번에 닿는 자리다. */
/* 접힌 도크 폭 — 사용자가 왼쪽 모서리를 끌어 넓힌다.
   Photoshop 과 같다: 넓히면 아이콘 옆에 이름이 나오고, 좁히면 아이콘만 남는다
   (docs/adobe-help/md/expand-collapse-panel-icons.md —
    "adjust the dock width until the labels disappear / Widen the dock to display the labels again"). */
/* 접었을 때 칸 폭 — **격자 규칙을 새로 쓰지 않고 변수만 바꾼다.**
   전에는 `body.panels-collapsed .editor` 로 격자를 통째로 다시 썼는데 (0,2,1) 이라
   `body.tools-2col.with-ads .editor` 같은 (0,3,1) 규칙한테 졌다. 그 조합에서는
   손잡이를 끌어도 --dock-w 가 아예 안 먹어 폭이 안 변했다 (사용자 지적: "지금 안줌").
   덤으로 그 규칙이 도구 칸까지 40px 로 되돌려 도구를 띄운 상태를 망가뜨렸다.
   변수는 우선순위 싸움이 없으므로 어떤 조합에서든 그대로 먹는다. */
body.panels-collapsed { --panel-col: var(--dock-w, 39px); }

/* ── 무리마다 따로 접기 (사장님 지시 2026-09-02) ──────────────────────────
   접힌 기둥의 « 를 누르면 그 기둥만 펴지고, 펴진 패널은 **남은 아이콘 기둥의
   왼쪽**에 자리를 잡는다. 둘 다 접히면 예전과 같은 상태(body.panels-collapsed).

   .panels 와 띠는 같은 격자 칸(grid-area: panels)에 있다. 섞인 상태에서는
   띠를 오른쪽 끝에 --strip-w 폭으로 붙이고, .panels 에 같은 만큼 오른쪽 여백을
   줘서 서로 안 겹치게 한다. */
/* 펼친 기둥 수만큼 넓어진다 (--panels-row-w 는 JS 가 잰다) */
body:not(.panels-collapsed) { --panel-col: calc(var(--panels-row-w, var(--panels-w, 272px)) + var(--strip-w, 0px)); }
body.panels-mixed .panels { display: flex; margin-right: var(--strip-w, 0px); }
body.panels-mixed .panels-collapsed-strip {
  display: flex; justify-self: end; width: var(--strip-w, 39px);
}
/* 접힌 기둥이 펴진 것보다 **앞 차례**면 띠가 왼쪽에 선다 — 원래 차례를 지킨다
   (사장님 지시 2026-09-02: 오른쪽 바를 펴면 그 바로 왼쪽, 즉 두 줄 사이에 판이 선다). */
body.panels-mixed.strip-left .panels { margin-right: 0; margin-left: var(--strip-w, 0px); }
body.panels-mixed.strip-left .panels-collapsed-strip { justify-self: start; }
body.panels-mixed.strip-left .panels-collapsed-strip { border-left: 0; border-right: 1px solid var(--line); }
/* 접힌 무리의 판은 왼쪽 칸에서 빠진다 (아이콘 기둥으로 대신 나온다) */
.panel-dock.dock-off { display: none; }
/* 펴진 무리가 하나뿐이면 사이 막대는 뜻이 없다 */
.dock-split.one-open { display: none; }
/* 넓힌 상태 — 아이콘을 왼쪽에 두고 이름을 옆에 붙인다. 좁은 상태는 예전 그대로다 */
.dock-label { display: none; font-size: 12px; white-space: nowrap; overflow: hidden; }
body.dock-wide .panels-collapsed-strip { align-items: stretch; padding-left: 4px; padding-right: 4px; }
body.dock-wide .dock-icon {
  width: auto; height: 26px; justify-content: flex-start; gap: 8px; padding: 4px 6px;
}
body.dock-wide .dock-icon svg { width: 18px; height: 18px; flex: none; }
body.dock-wide .dock-label { display: inline; }
body.dock-wide .dock-expand { align-self: flex-end; }
/* 왼쪽 모서리를 잡아 끄는 자리 (Photoshop 도크 모서리와 같다) */
/* 접힌 도크의 왼쪽 모서리. **띠 밖에 있다** — 띠는 overflow-y:auto 라 안에 두면
   가장자리 쪽이 잘려 안 잡혔다 (실측: 보이는 가장자리와 그 왼쪽에서 안 잡힘).
   잡는 자리는 가장자리를 사이에 두고 양쪽으로 벌려 둔다 (5px 는 손이 못 잡는다는 지적).
   보이는 줄은 가늘게, 눌리는 자리만 넓게. */
.dock-resize {
  /* **격자 칸 안에 둔다** — 창 전체에 걸쳐 두었더니 파란 줄이 메뉴·눈금자 위까지
     지나가 패널과 따로 노는 것처럼 보였다 (사용자 지적: "싱크가 안 맞다").
     같은 칸에 두면 높이가 저절로 패널 자리와 같아진다. */
  grid-area: panels; position: relative; z-index: 50;
  justify-self: start; align-self: stretch;
  width: 12px; margin-left: -6px;
  cursor: ew-resize; display: none;
}
/* 근거: docs/adobe-help/md/stack-floating-panels.md — "Drag any panel edge to resize it."
   접었을 때(아이콘 폭)든 펼쳤을 때(패널 폭)든 **왼쪽 엣지를 잡아** 조절한다. */
.dock-resize { display: block; }
.dock-resize::after {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px;
}
.dock-resize:hover::after { background: var(--accent, #3d84ff); opacity: .6; }
.panels-collapsed-strip {
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding-top: 0;
  overflow-y: auto; scrollbar-width: none; position: relative;
}
/* 기둥마다 제 머리 — 점 무늬 잡이 한 줄 + « 한 줄 (사장님 화면 2026-09-02:
   "2줄이 생겨도 위에 « « 표시도 2개다"). 전에는 띠 하나에 « 가 하나였다.
   펼친 쪽의 .panel-collapse-row 와 높이를 맞춰 눌러도 단추가 안 움직인다. */
.dock-col-head {
  position: sticky; top: 0; z-index: 3; flex: none; width: 100%;
  background: var(--panel); margin-bottom: 2px;
}
.dock-col-grab {
  height: 9px; cursor: grab;
  display: flex; align-items: center; justify-content: center;
}
.dock-col-grab::before {
  content: ""; width: 14px; height: 4px; opacity: .8;
  background-image: radial-gradient(circle, var(--text-dim) 1px, transparent 1.3px);
  background-size: 4px 4px;
}
.dock-col-grab:active { cursor: grabbing; }
/* « 줄은 펼친 기둥의 » 줄(.col-head 18px + 금)과 같은 높이 — 한 줄로 이어진다
   (책 175쪽 그림 4.4). 금은 « 밑에, 점 손잡이는 금 아래 무리 쪽에 온다 (사장님 화면 #56) */
.dock-col-head > .dock-expand {
  height: 18px; width: 100%; flex: none; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px; margin: 0; border-bottom: 1px solid var(--line);
}
body.dock-wide .dock-col-head > .dock-expand { justify-content: flex-end; padding: 0 4px; }
.panels-collapsed-strip::-webkit-scrollbar { display: none; }
.dock-icon {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  /* 26/4 → 26/3. 최소 폭에서 그림이 18px 이라 좌우가 휑했다 (사용자 지적) — 20px 로 키운다 */
  width: 26px; height: 26px; padding: 3px; border-radius: 4px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.dock-icon svg { width: 18px; height: 18px; flex: none; }
.dock-icon:hover { color: var(--text); background: var(--hover, rgba(255,255,255,.07)); }
.dock-icon.on { color: var(--text); background: var(--hover, rgba(255,255,255,.12)); }
/* 아이콘을 끄는 동안 커서에 붙어 따라오는 그림 (사장님 지시 2026-09-04:
   "아이콘을 잡고 옆 여백으로 나오면 그동안 아이콘 모양이 커서에 붙어 있어야 한다").
   실제 아이콘과 같은 크기로 만든다 — 크기는 JS 가 잰 값을 넣는다. */
.dock-icon-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 3px;
  color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45); opacity: .92;
}
.dock-icon-ghost svg { width: 18px; height: 18px; flex: none; }
.dock-expand { font-size: 13px; margin-bottom: 4px; }

/* 아이콘을 무리별로 모으고 사이에 금을 하나 둔다 (사용자가 보낸 Photoshop 화면).
   차례는 짜임 그대로라 끌어 옮긴 것이 그대로 보인다 —
   expand-collapse-panel-icons.md: "Drag the panel icon up and down to reposition it within the dock." */
/* 띠는 align-items: center 라 폭이 없는 것은 0 으로 쭈그러든다 — 금과 놓을 자리
   표시가 실제로 폭 0 이었다 (34px 에서 실측). 늘어나라고 따로 일러 준다.
   아이콘도 26px 고정이라 33px 칸 안에서 왼쪽으로 3px 치우쳐 있었다 — 가운데로. */
/* 무리마다 제 기둥 — 옆으로 나란히 (사장님 포토샵 화면 2026-09-02).
   넓혀서 이름이 보이는 dock-wide 에서는 이름이 길어 두 기둥이 못 서니 세로로 쌓는다. */
.dock-cols {
  display: flex; flex-direction: row; align-items: stretch;
  width: 100%; flex: 1 1 auto; min-height: 0;
}
/* 바 하나 = 접힌 기둥 하나. 안에 무리별 아이콘 덩이(.dock-col)가 위아래로 선다 */
.dock-colbar { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.dock-colbar + .dock-colbar { border-left: 1px solid var(--line); }
.dock-colbar > .dock-sep { flex: none; height: 1px; width: auto; margin: 5px 4px; background: var(--line); }
.dock-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; flex: 1 1 0; min-width: 0;
}
/* 기둥 사이 세로 금 */
.dock-cols > .dock-sep { flex: none; align-self: stretch; width: 1px; height: auto; margin: 0; background: var(--line); }
body.dock-wide .dock-cols { flex-direction: column; }
body.dock-wide .dock-col { align-items: stretch; flex: none; width: 100%; }
body.dock-wide .dock-cols > .dock-sep { width: auto; height: 1px; margin: 5px 4px; }
.dock-icon-mark {
  flex: none; align-self: stretch; height: 2px; margin: 0 3px;
  background: var(--accent, #2d8cf0); border-radius: 1px;
}
.dock-icon.dragging-from { opacity: .35; }

/* 무리를 통째로 잡는 자리 — 탭 줄의 빈 자리 (Photoshop 방식, 점 손잡이는 뺐다).
   탭이 꽉 차도 잡을 자리가 남게 여백(spacer)을 하나 둔다 — 보이지는 않는다. */
.panel-tabs { cursor: grab; }
/* 무리를 통째로 끄는 손잡이 — 탭이 넘쳐 줄이 가로로 지나가면 이 여백이 오른쪽
   밖으로 밀려 잡을 수 없었다 (2026-08-31 탭 폭 고치다 겪음). ≡ 처럼 붙여 둔다. */
.tabs-spacer {
  flex: 1 0 12px; min-width: 12px; align-self: stretch;
  position: sticky; right: 34px; z-index: 1;
}
.panel-tabs:active { cursor: grabbing; }
.panel-tabs .panel-tab, .panel-tabs button { cursor: pointer; }
body.workspace-locked .panel-tabs { cursor: default; }

/* 무리가 통째로 비면 감춘다 — 탭 줄만 남으면 볼썽사납다.
   단, 탭을 끄는 동안에는 얇은 띠로 남긴다 — 안 그러면 한 칸으로 합친 뒤
   다시 나눌 길이 없다 (놓을 자리가 사라져서. 실측 2026-08-29). */
.panel-dock.empty { display: none; }
body.panel-dragging .panel-dock.empty {
  display: flex; flex: 0 0 30px;
}
body.panel-dragging .panel-dock.empty .panel-tabs {
  flex: 1 1 auto; border: 1px dashed var(--line); border-radius: 4px; margin: 2px;
}
.dock-split.hide { display: none; }
body.workspace-locked .dock-icon { cursor: pointer; }

/* 아이콘 하나를 누르면 **그 무리 하나만** 나온다
   (expand-collapse-panel-icons.md: "Select a single panel icon to expand only that panel.")
   전에는 위·아래가 같이 나와 아이콘 하나에 패널 둘이 떴다 (사용자 지적). */
/* 다 접힌 상태의 튀어나오기 — .panels 를 통째로 빌린다 (예전 그대로).
   **섞인 상태(panels-mixed)에서는 안 빌린다** — 펴져 있는 판이 사라지면 안 된다
   (사장님 지시 2026-09-02: "기본 패널이 없어지지 않고 b 패널을 유지하고"). */
body.panels-collapsed.panel-flyout .panels .panel-dock { display: none; }
body.panel-flyout[data-flyout-dock="a"] .panels .panel-dock[data-dock="a"],
body.panel-flyout[data-flyout-dock="b"] .panels .panel-dock[data-dock="b"],
/* 무리 셋(2026-09-02) — c 를 빠뜨려 레이어 아이콘을 눌러도 아무것도 안 나왔다 (검사가 잡음) */
body.panel-flyout[data-flyout-dock="c"] .panels .panel-dock[data-dock="c"],
body.panel-flyout[data-flyout-dock="d"] .panels .panel-dock[data-dock="d"],
body.panel-flyout[data-flyout-dock="e"] .panels .panel-dock[data-dock="e"] { display: flex; flex: 1 1 auto; }
body.panels-collapsed.panel-flyout .panels .dock-split { display: none; }

/* 섞인 상태의 튀어나오기 — 펴진 판은 그대로 두고, 누른 무리만 **겹쳐** 띄운다.
   자리는 아이콘 기둥 바로 왼쪽 (다 접힌 상태와 같은 자리 규칙). */
/* 자리는 **판 기둥 전체의 왼쪽(캔버스 쪽)** 이다. "띠 바로 왼쪽" 으로 두면
   띠가 오른쪽에 선 배치에서 그 자리가 곧 펴진 판들 자리라, 튀어나온 판이
   펴진 판을 통째로 덮어 사라져 보였다 (사장님 재지적 2026-09-02). */
body.panels-mixed.panel-flyout[data-flyout-dock="a"] .panels .panel-dock[data-dock="a"],
body.panels-mixed.panel-flyout[data-flyout-dock="b"] .panels .panel-dock[data-dock="b"],
body.panels-mixed.panel-flyout[data-flyout-dock="c"] .panels .panel-dock[data-dock="c"],
body.panels-mixed.panel-flyout[data-flyout-dock="d"] .panels .panel-dock[data-dock="d"],
body.panels-mixed.panel-flyout[data-flyout-dock="e"] .panels .panel-dock[data-dock="e"] {
  display: flex; position: absolute; top: 0; bottom: auto;
  left: calc(-1 * var(--panels-w, 272px) - 4px);
  width: var(--panels-w, 272px); max-height: 100%; z-index: 40;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: -6px 0 16px -6px rgba(0, 0, 0, .55);
}
/* 튀어나온 무리가 든 기둥은 접혀서(col-off) 안 보이는 그릇이다 — 그 그릇만 투명하게
   해서 안의 상자가 .panels 기준으로 겹쳐 뜨게 한다. 나머지(머리·막대·딴 상자)는 감춘다 */
body.panels-mixed.panel-flyout .dock-column.col-off.col-flyout { display: contents; }
body.panels-mixed.panel-flyout .dock-column.col-off .col-head,
body.panels-mixed.panel-flyout .dock-column.col-off .dock-split,
body.panels-mixed.panel-flyout .dock-column.col-off .panel-dock { display: none; }
/* 띠가 왼쪽에 선 경우(strip-left) — 띠 폭만큼 더 왼쪽으로 */
body.panels-mixed.strip-left.panel-flyout[data-flyout-dock="a"] .panels .panel-dock[data-dock="a"],
body.panels-mixed.strip-left.panel-flyout[data-flyout-dock="b"] .panels .panel-dock[data-dock="b"],
body.panels-mixed.strip-left.panel-flyout[data-flyout-dock="c"] .panels .panel-dock[data-dock="c"],
body.panels-mixed.strip-left.panel-flyout[data-flyout-dock="d"] .panels .panel-dock[data-dock="d"],
body.panels-mixed.strip-left.panel-flyout[data-flyout-dock="e"] .panels .panel-dock[data-dock="e"] {
  left: calc(-1 * var(--strip-w, 0px) - var(--panels-w, 272px) - 4px);
}

/* 툭 나온 패널 — 아이콘 줄 왼쪽에 겹쳐 뜬다 (자리를 차지하지 않는다) */
body.panels-collapsed.panel-flyout .dock-column { display: contents; }
body.panels-collapsed.panel-flyout .col-head { display: none; }
body.panels-collapsed.panel-flyout .panels {
  flex-direction: column;
}
body.panels-collapsed.panel-flyout .panels {
  /* 높이는 **알맹이에 맞춘다** — bottom: 0 으로 늘였더니 166px 짜리 문자 패널이
     808px 상자 안에 떠 있었다. Photoshop 도 아이콘에서 연 것은 제 키만큼만 나온다. */
  display: flex; position: absolute; top: 0; bottom: auto; max-height: 100%;
  /* 아이콘 띠 **바로 왼쪽**에 붙는다. 34px 로 박아 두었더니 띠를 넓히면(이름이 나오게)
     그만큼 띠 위로 겹쳐 올라와 이름을 가렸다 — 150px 로 넓히면 116px 겹쳤다 (실측). */
  /* 기둥이 둘이면 띠 실제 폭은 --dock-w 가 아니라 max(—dock-w, 기둥수×DOCK_MIN) 다 —
     --dock-w 만 보면 30px 겹쳐 아이콘 띠 왼쪽 기둥을 가렸다 (재검토 2026-09-02 실측) */
  right: var(--dock-w, 39px);
  width: 272px; z-index: 40; box-shadow: -6px 0 16px -6px rgba(0,0,0,.55);
  /* 아래 잡는 줄로 정한 높이 (없으면 알맹이 키만큼) */
  height: var(--flyout-h, auto);
}

/* 튀어나온 판 아래 잡는 줄 — 떠 있는 판의 .float-foot 과 같은 모양이다
   (사장님 지시 2026-09-02 화면 #33). 튀어나왔을 때만 보인다. */
.panels-foot { display: none; }
body.panels-collapsed.panel-flyout .panels-foot {
  display: flex; align-items: center; justify-content: center;
  flex: none; height: 11px; cursor: ns-resize;
  background: var(--panel2); border-top: 1px solid var(--line);
}
body.panels-collapsed.panel-flyout .panels-foot::before {
  content: ""; width: 17px; height: 5px; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--text-dim) 0 1px, transparent 1px 3px);
}
body.panels-collapsed.panel-flyout .panels-foot:hover::before { opacity: 1; }

/* 섞인 상태에서 튀어나온 판의 **아래 잡는 줄** (사장님 지시 2026-09-04).
   다 접힌 상태에서는 .panels 가 통째로 떠서 그 마지막 칸인 .panels-foot 이 밑에 왔지만,
   섞인 상태에서는 판 상자(.panel-dock)만 떠 있어 상자 밖의 .panels-foot 은 못 따라온다.
   그래서 상자마다 둔 .dock-foot 을 이 자리에서만 보인다 — 떠 있는 것은 접힌 무리(dock-off)
   뿐이고, 나머지 dock-off 상자는 display:none 이라 줄도 같이 숨는다. */
.dock-foot { display: none; }
body.panels-mixed.panel-flyout .panel-dock.dock-off > .dock-foot {
  display: flex; align-items: center; justify-content: center;
  flex: none; height: 11px; cursor: ns-resize;
  background: var(--panel2); border-top: 1px solid var(--line);
}
body.panels-mixed.panel-flyout .panel-dock.dock-off > .dock-foot::before {
  content: ""; width: 17px; height: 5px; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--text-dim) 0 1px, transparent 1px 3px);
}
body.panels-mixed.panel-flyout .panel-dock.dock-off > .dock-foot:hover::before { opacity: 1; }
/* 줄로 정한 키 (없으면 알맹이 키만큼 — 예전 그대로) */
body.panels-mixed.panel-flyout .panel-dock.dock-off { height: var(--flyout-dock-h, auto); }