fix(B06): 접기 손잡이를 패널 밖으로 내보내 리사이저 hover가 비치던 문제 해결

손잡이 뒤에 보이던 보라색 바는 리사이저의 hover 색이었다. B05 하단 패널은 손잡이를 패널 밖에
두어 리사이저를 z축으로 덮지만, B06은 손잡이를 패널 안 흐름에 넣고 리사이저를 그 위에 나란히
옮겨 놔서 손잡이를 누르러 가는 길에 hover가 먼저 켜졌다.

B05와 같은 구조로 상하만 뒤집는다: 공용 --bottom 손잡이를 패널 경계 바깥 아래로 내보내고
(border-top 제거, 아래쪽 모서리 둥금) 리사이저는 경계(bottom: 0)로 되돌린다. 패널에는
overflow: hidden이 없어 밖으로 나가도 잘리지 않는다.

손잡이가 흐름 높이를 먹지 않으므로 PANEL_CHROME_PX를 줄이고, 선택 카드 스크롤 여백은 손잡이가
아래로 나온 만큼 더한다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts

@@ -66,7 +66,7 @@ export type { CrossDesignChange, DesignChangeHandler, RockBoundaryControl };
  * 유토곡선 아래에 빈 공간이 남는다). 화면에 붙기 전이라 잴 수 없는 첫 렌더에서만 쓰는
  * 출발값이고, 최소 패널 높이 계산의 기준이기도 하다.
  */
-const PANEL_CHROME_PX = 126;
+const PANEL_CHROME_PX = 102;
 /** 손대지 않았을 때의 패널 높이 — 이 값이 축소 비례의 기준(H₀)이 된다. */
 const BASE_PANEL_HEIGHT = LONG_HEIGHT + MASS_HAUL_HEIGHT + PANEL_CHROME_PX;
 const MIN_LONG_HEIGHT = 110;
@@ -489,8 +489,9 @@ export function createSectionView(
     }
     chartWrap.scrollLeft = keepScrollLeft;
     // 상단 패널이 sticky라 선택 카드가 그 아래로 숨는다 — 패널 높이만큼 스크롤 여백을 잡아 준다.
+    // 접기 손잡이가 패널 아래 24px 밖으로 나와 있으므로 그 몫까지 더한다.
     const panelPx = panel.getBoundingClientRect().height || panelHeight();
-    root.style.setProperty("--b06-cross-scroll-margin", `${Math.round(panelPx + 12)}px`);
+    root.style.setProperty("--b06-cross-scroll-margin", `${Math.round(panelPx + 32)}px`);
 
     // 첫 렌더(detached)나 패널 높이 변경 직후에는 위에서 잰 값이 아직 옛 레이아웃일 수 있다.
     // 다음 프레임에 한 번만 다시 재서 어긋나면 고쳐 그린다. `chartWrap` 높이는 내용과 무관하니

B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css

@@ -60,8 +60,8 @@
    잘려 나가 잡히지 않는다 — 안쪽에 붙여 전체가 클릭 영역으로 남게 한다. */
 .b06-section__panel > .ui-resizer--vertical {
   top: auto;
-  /* 하단 가운데 접기 손잡이(24px) 위에 얹는다 — 겹치면 어느 쪽이 잡히는지 헷갈린다. */
-  bottom: var(--spacing-24);
+  /* 경계에 그대로 둔다 — 손잡이가 패널 밖으로 나가 z축으로 덮으므로 자리를 비켜 줄 필요가 없다. */
+  bottom: 0;
   height: 8px;
 }
 
@@ -100,25 +100,23 @@
 /* 접기 손잡이 — 패널 하단 가운데. 모양은 좌측 사이드 패널과 같은 삼각형 손잡이를 90° 돌린
    것이라 공용 컴포넌트를 그대로 쓰고, 위치만 여기서 흐름 배치로 되돌린다(원본은 absolute).
    `ui-collapsible__title`이 붙여 주는 캐럿은 삼각형 아이콘과 겹치므로 지운다. */
+/* B05 하단 패널 손잡이와 **같은 구조**로, 상하만 뒤집는다: 공용 `--bottom` 손잡이(64×24)를
+   패널 경계 **바깥**으로 내보내 리사이저를 z축으로 덮는다. 패널 안 흐름에 두면 리사이저와
+   위아래로 나란히 서서, 손잡이를 누르러 가는 길에 리사이저 hover 색이 먼저 켜진다
+   (2026-08-02 사용자 지적). 패널에는 `overflow: hidden`이 없어 밖으로 나가도 잘리지 않는다. */
 .b06-section__panel-toggle {
-  position: relative;
-  inset: auto;
   z-index: 3;
-  /* `ui-collapsible__title`이 flex + space-between을 걸어 두므로 아이콘을 가운데로 되돌린다. */
-  justify-content: center;
-  align-self: center;
-  /* 좌측 사이드 손잡이(24×64, 오른쪽 모서리 둥금)를 시계방향 90° 돌린 값 —
-     가로 64 × 세로 24, 아래쪽 모서리가 둥글다. */
-  width: var(--spacing-64);
-  height: var(--spacing-24);
-  margin-top: auto;
+  top: auto;
+  bottom: calc(-1 * var(--spacing-24));
+  border-top: 0;
+  border-bottom: 1px solid var(--color-border);
   border-radius: 0 0 var(--radius-buttons) var(--radius-buttons);
 }
 
 /* 접혀도 손잡이는 남아야 한다. 전역 `.ui-collapsible.is-collapsed > :not(.ui-collapsible__title)`이
    나머지 자식을 모두 숨기므로 이 하나만 다시 켠다(클래스 3개라 전역보다 특정도가 높다). */
 .b06-section__panel.is-collapsed > .b06-section__panel-toggle {
-  display: flex;
+  display: block;
 }
 
 /* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야