/* 탭을 끌어 옮기는 중 — 놓을 자리를 파란 금과 테두리로 알린다
   (docs/adobe-help/md/move-panels.md: "blue drop zones show where you can place them") */
body.panel-dragging { cursor: grabbing; user-select: none; }
/* 손을 따라다니는 그림자 — 무엇을 끌고 있는지 보여 준다 */
/* 끌 때 따라다니는 탭 잔상 — **탭 모양 그대로** 뜬다 (배경·테두리·글자).
   선택자에 .panel-tab 을 같이 적는다: 잔상은 `panel-tab on tab-ghost` 세 클래스를
   달고 있는데, `.panel-tab.on` 이 클래스 둘이라 클래스 하나짜리 `.tab-ghost` 를
   이겨 position 이 relative 로 덮였다. 그래서 잔상이 화면 밖(y 1267, 창 높이 950)
   에 놓여 안 보였다 — 사장님이 "글자만 따라온다" 고 하신 그것이다
   (실측 2026-09-01). */
.panel-tab.tab-ghost {
  position: fixed; z-index: 300; pointer-events: none;
  border: 1px solid var(--accent, #3d84ff); border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  /* 그냥 끌고 다닐 때는 **탭 모양 그대로** — 흐리지 않는다
     (사장님 지시 2026-09-01 "드래그 해서 이동할때는 탭 통채 그대로"). */
  opacity: 1; overflow: hidden;
  /* 켜진 탭은 안 줄어들지만 잔상은 제 크기를 style 로 받아 쓴다 */
  flex: none; margin: 0;
}
/* 놓을 자리에 들어가면 옅어진다 — "여기 놓으면 앉는다" 는 신호
   (사장님 지시 2026-09-01 "자리가 잡히는 구역 들어갈때 오피시 70"). */
.panel-tab.tab-ghost.over-drop { opacity: .7; }
/* 탭을 끌 때 따라오는 **판 전체** 미리보기 (사장님 지시 2026-09-04:
   "탭 이름 + 바디 전체가 같이 움직여야 한다"). 탭 조각만 뜨던 것을 판 통째로 바꿨다.
   편집기 밖(body)에 붙는다 — 안에 두면 베낀 판의 data-editor-target 이 진짜 패널의
   표적을 가로챈다. 그래서 색은 변수로만 쓴다 (변수는 :root 에 있어 밖에서도 읽힌다). */
.panel-ghost {
  position: fixed; z-index: 300; pointer-events: none;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--accent, #3d84ff); border-radius: 4px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  overflow: hidden; opacity: .92;
}
.panel-ghost-tabs { display: flex; gap: 2px; padding: 3px 4px 0; background: var(--panel2); }
.panel-ghost-tabs .panel-tab { position: static; }
.panel-ghost-body { overflow: hidden; }
.panel-ghost.over-drop { opacity: .55; }
/* 끌고 있는 원래 탭은 흐려 둔다 — 어디서 떠났는지 남는다 */
.panel-tab.dragging-from { opacity: .35; }
body.panel-dragging .panel-tab { pointer-events: none; }
.panel-tabs.drop-here { box-shadow: inset 0 0 0 1px var(--accent, #3d84ff); }
.panel-drop-mark {
  flex: none; width: 2px; align-self: stretch; margin: 3px 0;
  background: var(--accent, #3d84ff); border-radius: 1px;
}

/* 떠 있는 패널 — 무리에서 떼어 내면 편집기 안에 뜬다
   (docs/adobe-help/md/stack-floating-panels.md). 브라우저라 창 밖으로는 못 나간다. */
.float-panels { position: absolute; inset: 0; pointer-events: none; z-index: 45; }
.float-panel {
  /* 70% 는 **처음 값**이다 — 안 그러면 내용 긴 패널이 화면을 다 덮는다.
     손으로 높이를 끌면(style.height) 그 한계를 벗긴다 (아래 [style*="height"]) —
     Photoshop 은 떠 있는 창을 바닥까지 늘릴 수 있다 (사용자 지적 2026-08-29). */
  position: absolute; pointer-events: auto; width: 260px; max-height: 70%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line);
  /* 위만 둥글고 **아래는 직각**이다 (사장님 지시 2026-09-02: "패널 잡기 아래 끝은
     직각으로 처리한다"). 아래 잡는 줄이 모서리를 따라 깎여 보이던 것도 없어진다. */
  border-radius: 8px 8px 0 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.float-head {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 10px; cursor: grab;
  background: var(--panel2); border-radius: 7px 7px 0 0; border-bottom: 1px solid var(--line);
}
.float-head:active { cursor: grabbing; }
.float-title { flex: 1; font-size: 12px; color: var(--text); }
/* 이름 줄 오른쪽 ≡ — 포토샵 뜬 패널마다 있는 패널 메뉴 (사장님 화면 2026-09-02) */
.float-menu {
  flex: none; background: none; border: none; color: var(--text-dim);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 3px;
}
.float-menu:hover { color: var(--text); background: var(--hover, rgba(255,255,255,.1)); }
.float-close {
  flex: none; background: none; border: none; color: var(--text-dim);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 3px;
}
.float-close:hover { color: var(--text); background: var(--hover, rgba(255,255,255,.1)); }
.float-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}

/* 쌓기 — 맨 위 하나만 × 를 갖는다. 아래것은 제목줄만 (원문 그림 ws-stack-floating-panels.png).
   근거: stack-floating-panels.md */
.float-head:not(.top) { border-radius: 0; }
.float-head:not(.top) .float-close { display: none; }
.float-head:not(.top) + .float-body { border-bottom: 1px solid var(--line); }

/* 아래 가장자리에 놓으면 그 밑에 쌓인다 — 파란 테두리로 알린다
   ("Drop it on the lower edge of another panel when a blue outline appears") */
.float-panel.stack-here { box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 3px 0 0 var(--accent, #2d8cf0); }

/* 두 번 눌러 접은 것 — 제목줄만 남는다
   ("Double-click a tab to minimize or maximize a panel, group, or stack") */
.float-body.min { display: none; }
.float-panel.all-min { height: auto !important; }
/* 손으로 높이를 정한 상자 — 70% 한계를 벗기고 화면 밖으로만 안 나가게 */
.float-panel[style*="height"] { max-height: calc(100% - 8px); }

/* 쌓인 것 안에서 놓일 자리 ("To change the stacking order, drag a panel by its tab") */
.stack-drop-mark { height: 2px; margin: 0 6px; background: var(--accent, #2d8cf0); border-radius: 1px; }

/* 가장자리 잡이 ("Drag any panel edge to resize it") */
/* 레이어 패널 옵션 모달 — 사장님이 보낸 포토샵 모달(2026-09-02)의 짜임 */
.lpo-modal { width: 320px; }
.lpo-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.lpo-group { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin: 0; }
.lpo-group legend { font-size: 12px; color: var(--text-dim); padding: 0 4px; }
.lpo-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; cursor: pointer; }
/* 크기 라디오의 네모 — 포토샵은 그림 미리 보기인데 우리는 크기만 빈 네모로 보여 준다 */
.lpo-box { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 2px; }

/* 떠 있는 판 **맨 아래 잡는 줄**. 단추 줄과 따로 있는 한 줄이고 가운데에 짧은 세로
   눈금이 있다 — 원문 그림 둘(adobe-help ws-stack-floating-panels.png · 독일어 책 58쪽
   그림 1.23)과 사장님 포토샵 화면이 다 같은 모양이다.
   전에도 끌 수는 있었지만(.float-grip.s, 판 밖 7px) 눈에 안 보여 있는 줄을 몰랐다
   (사장님 지적 2026-09-02 "여기 하단에 잡는 얇은 바 잡고 내리는 기능 있었는데?"). */
.float-foot {
  flex: none; height: 11px; cursor: ns-resize;
  background: var(--panel2); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.float-foot::before {
  content: ""; width: 17px; height: 5px; opacity: .55;
  background: repeating-linear-gradient(90deg,
    var(--text-dim) 0 1px, transparent 1px 3px);
}
.float-foot:hover::before { opacity: 1; }

.float-grip { position: absolute; z-index: 2; }
.float-grip.e { top: 0; bottom: 0; right: -3px; width: 7px; cursor: ew-resize; }
.float-grip.w { top: 0; bottom: 0; left: -3px; width: 7px; cursor: ew-resize; }
.float-grip.s { left: 0; right: 0; bottom: -3px; height: 7px; cursor: ns-resize; }
.float-grip.se { right: -3px; bottom: -3px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 3; }
body.workspace-locked .float-grip,
body.workspace-locked .dock-resize,
body.workspace-locked .dock-split { display: none; }
body.workspace-locked .float-head { cursor: default; }

/* 무리 몸통을 두 번 눌러 접으면 탭 줄만 남는다 */
.dock-body.min { display: none; }