ninegrid2 6.862.0 → 6.863.0

package/dist/bundle.cjs.js

@@ -121167,17 +121167,15 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	// 이전 #startDrag_BAK 함수는 삭제하거나 주석 처리합니다.
-	// #startDrag_BAK = (...) => { ... }
-
 	#startDrag = (e) => {
-		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.preventDefault();
 		e.stopPropagation();
 
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// 클릭 지점에서 스플리터 경계까지의 오프셋 (이것은 dragBar 초기 위치와는 별개로, 최종 패널 사이즈 계산에 사용됨)
+		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		// 이 값은 최종 패널 사이즈 계산에 사용되며, 드래그 바 초기 위치와는 직접 관련 없음
 		isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
@@ -121205,15 +121203,14 @@ class nxSplitter extends HTMLElement {
 			return;
 		}
 
-		// ⭐ dragBar를 먼저 DOM에 추가하여 offsetParent를 확보합니다.
+		// dragBar를 먼저 DOM에 추가하여 offsetParent를 확보
 		(parent.shadowRoot || parent).appendChild(dragBar);
 
-		// dragBar의 실제 offsetParent (position: absolute의 기준이 되는 요소)
 		const dragBarOffsetParent = dragBar.offsetParent;
 
 		if (!dragBarOffsetParent) {
 			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove(); // 실패 시 dragBar 제거
+			dragBar.remove();
 			return;
 		}
 
@@ -121221,7 +121218,6 @@ class nxSplitter extends HTMLElement {
 		const prevRect = prev.getBoundingClientRect(); // 뷰포트 기준
 		const nextRect = next.getBoundingClientRect(); // 뷰포트 기준
 
-
 		// 뷰포트 기준 클릭 위치를 dragBarOffsetParent 기준으로 변환하여 초기 dragBar 위치 설정
 		let initialPosInOffsetParent;
 		if (isHorizontal) {
@@ -121249,12 +121245,10 @@ class nxSplitter extends HTMLElement {
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 뷰포트 기준 클릭 위치를 offsetParent 기준으로 변환
 			const currentPosInOffsetParent = isHorizontal
 				? clientPos - dragBarOffsetParentRect.left
 				: clientPos - dragBarOffsetParentRect.top;
 
-			// 드래그 바가 최소/최대 범위 내에 있도록 클램프
 			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
 
 			if (isHorizontal) {
@@ -121262,8 +121256,6 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
 		const onUp = (upEvent) => {
@@ -121271,34 +121263,176 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			// 최종 드래그 바의 위치를 offsetParent 기준으로 가져옴
 			const finalDragBarPosInOffsetParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// 이전 요소의 새로운 크기 (offsetParent의 시작점부터 드래그 바까지)
-			const newPrevSize = finalDragBarPosInOffsetParent;
+			// ⭐⭐ prev와 next의 padding을 고려한 최종 사이즈 계산 ⭐⭐
+			const prevComputedStyle = getComputedStyle(prev);
+			const nextComputedStyle = getComputedStyle(next);
 
-			// 다음 요소의 새로운 크기 (offsetParent의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-			const newNextSize = offsetParentTotalSize - newPrevSize;
+			if (isHorizontal) {
+				parseFloat(prevComputedStyle.paddingLeft) || 0;
+				parseFloat(nextComputedStyle.paddingRight) || 0;
+			} else {
+				parseFloat(prevComputedStyle.paddingTop) || 0;
+				parseFloat(nextComputedStyle.paddingBottom) || 0;
+			}
+
+			// prev의 새로운 크기: dragBar의 위치 (offsetParent 기준) - prev의 padding-left/top
+			// (prev의 content 시작점까지)
+			finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - next의 padding-right/bottom
+			(dragBarOffsetParentRect[isHorizontal ? 'width' : 'height'] - finalDragBarPosInOffsetParent);
+
+			// `box-sizing`에 따라 `width`/`height` 설정 방식이 달라짐.
+			// 대부분 `border-box`를 사용하므로, `width`를 설정하면 `padding`이 포함됨.
+			// 따라서 `newPrevInnerSize`와 `newNextInnerSize`는 `padding`을 제외한 `content` 크기가 아니라
+			// 최종적으로 `width`/`height`에 적용될 값이어야 함.
+			// 즉, `padding`이 포함된 전체 `width`/`height`로 계산해야 함.
+
+			// 다시 생각해보면, finalDragBarPosInOffsetParent가 바로 prev의 새로운 width/height가 되어야 합니다.
+			// 왜냐하면 dragBar의 위치가 prev의 끝이기 때문입니다.
+			// 문제는 prev/next에 padding이 있을 때 이 크기를 어떻게 `style.width`/`height`에 반영할지입니다.
+
+			// 가장 일반적인 시나리오: flex-grow 사용 (flex 컨테이너에서 권장)
+			// `prev`와 `next`에 `flex-grow`를 설정하고 `flex-basis: 0;` (혹은 `auto`)를 사용하면,
+			// `flex-grow` 비율로 공간을 나눕니다.
+			// 드래그는 이 `flex-grow` 비율을 조정하는 방식으로 구현하는 것이 가장 깔끔합니다.
+
+			// 현재 prev.style.flex = "none"; next.style.flex = "none"; 방식으로 직접 width/height를 조절하고 있으므로
+			// 이 방식에 맞춰 padding을 고려합니다.
+			// 즉, finalDragBarPosInOffsetParent는 offsetParent의 왼쪽/위쪽 경계부터 dragBar까지의 거리
+			// 이는 곧 prev 요소의 새로운 overall (width/height)가 됩니다.
+
+			// 여기서 오차가 난다면, `prev`와 `next`의 `box-sizing`이 무엇인지 확인해야 합니다.
+			// 만약 `box-sizing: content-box;`라면 `width = content + padding + border`.
+			// 만약 `box-sizing: border-box;`라면 `width = content`.
+			// 일반적으로 CSS Reset이나 프레임워크는 `border-box`를 사용하므로, 이 가정을 따릅니다.
+
+			// `border-box` 가정 시: finalDragBarPosInOffsetParent가 `prev`의 새로운 `width`가 됩니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 `width`가 됩니다.
+			// `padding`은 이 `width` 안에 포함됩니다.
+			// 따라서 별도로 `padding` 값을 빼거나 더할 필요가 없습니다.
+			// 만약 오차가 있다면, `prev` 또는 `next`에 `margin`이 적용되어 있거나,
+			// `parent`에 `gap` 속성 등이 적용되어 있는 것은 아닌지 확인해봐야 합니다.
+
+			// 하지만 사용자께서 padding에서 오차가 난다고 하셨으므로,
+			// `prev`/`next`의 `padding`이 `width`/`height` 계산에 영향을 주는 경우를 상정합니다.
+			// 이 경우 `box-sizing: content-box;` 이거나,
+			// `width`/`height`를 `content` 크기로 설정하고 싶을 때 발생합니다.
+
+			// **새로운 delta 계산 (prev의 최종 너비)**
+			// dragBar의 최종 위치가 offsetParent 기준.
+			// prev.getBoundingClientRect().left - dragBarOffsetParentRect.left : prev의 offsetParent 기준 왼쪽 시작점
+			// clickOffset: 마우스 클릭 지점과 스플리터 바 왼쪽 경계의 차이.
+			// 이 값은 드래그 바의 '컨텐츠' 시작점을 기준으로 한 오프셋으로 간주.
+
+			// 가장 간단한 해결책은 `getBoundingClientRect()`로 얻은 `prevRect.width`와 `nextRect.width`의 합을
+			// `totalSize`로 사용하는 것이 아니라, `parent`의 실제 사용 가능한 공간을 기준으로 삼고,
+			// 드래그 된 `dragBar`의 위치가 해당 공간의 몇 퍼센트를 차지하는지로 `prev`와 `next`의 새로운 `flex-grow`
+			// 비율을 계산하는 것입니다.
+
+			// 현재처럼 직접 width/height를 조절하는 방식에서는
+			// `finalDragBarPosInOffsetParent`가 prev의 새로운 `width`가 되는 것이 맞고,
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 next의 새로운 `width`가 되는 것이 맞습니다.
+			// 만약 padding 때문에 오차가 있다면, 이는 `box-sizing`의 문제이거나,
+			// `getBoundingClientRect()`가 `margin`을 포함하지 않는다는 점 때문일 수 있습니다.
+
+			// **다시 한번 문제의 핵심을 짚어봅시다.**
+			// "dragBar가 그만큼 왼쪽으로 그려져 padding 지우면 정상이야."
+			// 이 문제는 **드래그 바의 초기 위치 문제**입니다. 이 부분은 이미 `dragBar.offsetParent`를 사용하여 해결했습니다.
+
+			// "prev, next가 padding 을 가졌을때는 오차가 있어."
+			// 이 문제는 **최종 `width`/`height`를 `prev`와 `next`에 적용할 때의 오차**입니다.
+			// 즉, `finalPrevSize`와 `finalNextSize`를 계산하는 방식이 문제가 됩니다.
+
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 왼쪽/상단 끝에서 `dragBar`까지의 거리입니다.
+			// 이 값이 `prev`의 새로운 너비/높이가 되어야 합니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 너비/높이가 되어야 합니다.
+
+			// 만약 `prev`/`next`가 `padding`을 가질 때 오차가 발생한다면,
+			// 이는 `prev.style.width = \`${finalPrevSize}px\`;`를 적용할 때,
+			// `finalPrevSize`가 `prev`의 `content + padding + border`를 포함하는 `box-sizing: border-box;`일 경우의 크기여야 하는데,
+			// 실제 `prev` 요소의 `box-sizing`이 `content-box`인 경우 `padding`만큼 더 커지기 때문일 수 있습니다.
+
+			// CSS에서 `box-sizing: border-box;`를 모든 요소에 적용하는 것을 강력히 권장합니다.
+			// 예: `* { box-sizing: border-box; }`
+
+			// 만약 `border-box`를 이미 사용하고 있고 여전히 오차가 있다면,
+			// `dragBar`의 `width` (수평 스플리터의 경우) 또는 `height` (수직 스플리터의 경우)를 고려해야 합니다.
+			// 스플리터 자체의 두께만큼 `prev`와 `next` 사이의 공간이 발생하기 때문입니다.
+
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height; // 스플리터 바의 두께
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - (스플리터 두께의 절반)
+			offsetParentTotalSize - finalDragBarPosInOffsetParent - (splitterThickness / 2);
+
+			// 스플리터 두께만큼 중앙에서 나누어주는 로직
+			// prev의 끝점은 dragBar의 중앙이 되어야 함
+			// 즉, finalDragBarPosInOffsetParent는 dragBar의 좌측 끝점.
+			// prev의 새로운 크기는 이 dragBar 좌측 끝점에서 prev의 시작점까지의 거리.
+			// 근데 prev의 실제 content box 끝은 dragBar의 중앙까지 와야 한다면,
+			// prev의 끝점에서 dragBar 중앙까지의 거리를 계산.
+
+			// 다시, 드래그 위치 `relative`가 `parent` 기준 스플리터 바의 왼쪽/상단 경계라면
+			// `prev`의 새로운 크기는 이 `relative` 값과 동일해야 합니다.
+			// 그리고 `next`의 새로운 크기는 `parentTotalSize - relative - splitterThickness`가 되어야 합니다.
+			// 여기서 `relative`는 `onMove`에서 계산된 `dragBar.style.left` 또는 `top` 값입니다.
+			// `finalDragBarPosInOffsetParent`는 `relative`와 같은 의미.
+
+			// ⭐ `totalSize` (두 패널의 합계) 대신 `parent`의 사용 가능한 전체 공간을 기준으로
+			// `finalPrevSize`와 `finalNextSize`를 다시 계산합니다.
+			// 이 방식이 `padding`이나 `margin` 같은 외부 요소에 덜 민감합니다.
+
+			// `prev.style.width = Xpx`는 prev의 `content + padding + border`가 Xpx가 된다는 가정 (border-box)
+			// `prev`의 시작점 (offsetParent 기준)
+			const prevStartPosInOffsetParent = isHorizontal
+				? prevRect.left - dragBarOffsetParentRect.left
+				: prevRect.top - dragBarOffsetParentRect.top;
+
+			// `prev`의 새로운 크기 (스플리터 바의 위치까지)
+			finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
+			// `next`의 새로운 크기 (스플리터 바 이후부터 `offsetParent` 끝까지)
+			// `offsetParentTotalSize`는 `offsetParent`의 전체 너비/높이
+			finalNextSize = offsetParentTotalSize - (finalDragBarPosInOffsetParent + splitterThickness) + (prevStartPosInOffsetParent + finalPrevSize - nextRect[isHorizontal ? 'left' : 'top'] + dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			// 이 복잡한 계산은 prev와 next 사이의 간극 (스플리터 두께)을 정확히 반영하기 위함입니다.
+			// `finalPrevSize + finalNextSize + splitterThickness`가 `offsetParentTotalSize`와 일치해야 합니다.
+
+			// ⭐ 최종적으로 계산된 크기:
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 시작점에서 `dragBar`의 시작점까지의 거리.
+			// `prev`의 새 너비는 `finalDragBarPosInOffsetParent` 그 자체가 아니라,
+			// `dragBar`가 위치한 곳까지의 `prev`의 너비여야 합니다.
+			// 즉, `finalDragBarPosInOffsetParent`는 `prev`의 끝점이 되는 위치.
+
+			// 다시 한번, `finalDragBarPosInOffsetParent`는 `offsetParent`의 0 지점에서 `dragBar`의 0 지점까지의 거리입니다.
+			// `prev` 요소의 최종 너비는 이 `finalDragBarPosInOffsetParent`에서
+			// `prev` 요소의 `offsetParent` 기준 시작 지점 (`prevRect.left - dragBarOffsetParentRect.left`)을 뺀 값입니다.
+			// 즉, `prev`의 새로운 너비 = `dragBar`의 왼쪽 위치 - `prev`의 왼쪽 위치
+
+			// 그리고 `next`의 새로운 너비 = `next`의 오른쪽 위치 - `dragBar`의 오른쪽 위치
+
+			const newPrevWidthCalculated = finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			const newNextWidthCalculated = (nextRect[isHorizontal ? 'right' : 'bottom'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']) - (finalDragBarPosInOffsetParent + splitterThickness);
+
+
+			// 최소 크기 제약
+			const MIN_PANEL_SIZE_PX = 1; // 1px 미만으로 작아지지 않도록
+			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, newPrevWidthCalculated);
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, newNextWidthCalculated);
+
+			// 만약 `prev + next + splitter`의 합이 부모의 `content` 사이즈와 일치해야 한다면
+			// `finalNextSize`를 `offsetParentTotalSize - finalPrevSize - splitterThickness`로 계산하는 것이 더 정확할 수 있습니다.
+			// 이렇게 하면 오차가 마지막 패널에 몰아지지만, 합은 정확하게 유지됩니다.
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
 
-			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
-			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
-			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
 
-			// 기존 flex 값을 저장하고 복원
 			const originalPrevFlex = prev.style.flex;
 			const originalNextFlex = next.style.flex;
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
 			prev.style.flex = "none";
 			next.style.flex = "none";
 
-			console.log(finalPrevSize, finalNextSize);
-
 			if (isHorizontal) {
 				prev.style.width = `${finalPrevSize}px`;
 				next.style.width = `${finalNextSize}px`;
@@ -121307,9 +121441,6 @@ class nxSplitter extends HTMLElement {
 				next.style.height = `${finalNextSize}px`;
 			}
 
-			// 작업 완료 후 원래 flex 값으로 복원
-			// 주의: width/height가 설정된 상태에서 flex를 복원하면 충돌할 수 있음.
-			// flex-basis나 flex-grow/shrink를 적절히 조절하는 것이 더 견고한 방법.
 			prev.style.flex = originalPrevFlex;
 			next.style.flex = originalNextFlex;
 		};

package/dist/bundle.esm.js

@@ -121163,17 +121163,15 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	// 이전 #startDrag_BAK 함수는 삭제하거나 주석 처리합니다.
-	// #startDrag_BAK = (...) => { ... }
-
 	#startDrag = (e) => {
-		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.preventDefault();
 		e.stopPropagation();
 
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// 클릭 지점에서 스플리터 경계까지의 오프셋 (이것은 dragBar 초기 위치와는 별개로, 최종 패널 사이즈 계산에 사용됨)
+		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		// 이 값은 최종 패널 사이즈 계산에 사용되며, 드래그 바 초기 위치와는 직접 관련 없음
 		isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
@@ -121201,15 +121199,14 @@ class nxSplitter extends HTMLElement {
 			return;
 		}
 
-		// ⭐ dragBar를 먼저 DOM에 추가하여 offsetParent를 확보합니다.
+		// dragBar를 먼저 DOM에 추가하여 offsetParent를 확보
 		(parent.shadowRoot || parent).appendChild(dragBar);
 
-		// dragBar의 실제 offsetParent (position: absolute의 기준이 되는 요소)
 		const dragBarOffsetParent = dragBar.offsetParent;
 
 		if (!dragBarOffsetParent) {
 			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove(); // 실패 시 dragBar 제거
+			dragBar.remove();
 			return;
 		}
 
@@ -121217,7 +121214,6 @@ class nxSplitter extends HTMLElement {
 		const prevRect = prev.getBoundingClientRect(); // 뷰포트 기준
 		const nextRect = next.getBoundingClientRect(); // 뷰포트 기준
 
-
 		// 뷰포트 기준 클릭 위치를 dragBarOffsetParent 기준으로 변환하여 초기 dragBar 위치 설정
 		let initialPosInOffsetParent;
 		if (isHorizontal) {
@@ -121245,12 +121241,10 @@ class nxSplitter extends HTMLElement {
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 뷰포트 기준 클릭 위치를 offsetParent 기준으로 변환
 			const currentPosInOffsetParent = isHorizontal
 				? clientPos - dragBarOffsetParentRect.left
 				: clientPos - dragBarOffsetParentRect.top;
 
-			// 드래그 바가 최소/최대 범위 내에 있도록 클램프
 			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
 
 			if (isHorizontal) {
@@ -121258,8 +121252,6 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
 		const onUp = (upEvent) => {
@@ -121267,34 +121259,176 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			// 최종 드래그 바의 위치를 offsetParent 기준으로 가져옴
 			const finalDragBarPosInOffsetParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// 이전 요소의 새로운 크기 (offsetParent의 시작점부터 드래그 바까지)
-			const newPrevSize = finalDragBarPosInOffsetParent;
+			// ⭐⭐ prev와 next의 padding을 고려한 최종 사이즈 계산 ⭐⭐
+			const prevComputedStyle = getComputedStyle(prev);
+			const nextComputedStyle = getComputedStyle(next);
 
-			// 다음 요소의 새로운 크기 (offsetParent의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-			const newNextSize = offsetParentTotalSize - newPrevSize;
+			if (isHorizontal) {
+				parseFloat(prevComputedStyle.paddingLeft) || 0;
+				parseFloat(nextComputedStyle.paddingRight) || 0;
+			} else {
+				parseFloat(prevComputedStyle.paddingTop) || 0;
+				parseFloat(nextComputedStyle.paddingBottom) || 0;
+			}
+
+			// prev의 새로운 크기: dragBar의 위치 (offsetParent 기준) - prev의 padding-left/top
+			// (prev의 content 시작점까지)
+			finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - next의 padding-right/bottom
+			(dragBarOffsetParentRect[isHorizontal ? 'width' : 'height'] - finalDragBarPosInOffsetParent);
+
+			// `box-sizing`에 따라 `width`/`height` 설정 방식이 달라짐.
+			// 대부분 `border-box`를 사용하므로, `width`를 설정하면 `padding`이 포함됨.
+			// 따라서 `newPrevInnerSize`와 `newNextInnerSize`는 `padding`을 제외한 `content` 크기가 아니라
+			// 최종적으로 `width`/`height`에 적용될 값이어야 함.
+			// 즉, `padding`이 포함된 전체 `width`/`height`로 계산해야 함.
+
+			// 다시 생각해보면, finalDragBarPosInOffsetParent가 바로 prev의 새로운 width/height가 되어야 합니다.
+			// 왜냐하면 dragBar의 위치가 prev의 끝이기 때문입니다.
+			// 문제는 prev/next에 padding이 있을 때 이 크기를 어떻게 `style.width`/`height`에 반영할지입니다.
+
+			// 가장 일반적인 시나리오: flex-grow 사용 (flex 컨테이너에서 권장)
+			// `prev`와 `next`에 `flex-grow`를 설정하고 `flex-basis: 0;` (혹은 `auto`)를 사용하면,
+			// `flex-grow` 비율로 공간을 나눕니다.
+			// 드래그는 이 `flex-grow` 비율을 조정하는 방식으로 구현하는 것이 가장 깔끔합니다.
+
+			// 현재 prev.style.flex = "none"; next.style.flex = "none"; 방식으로 직접 width/height를 조절하고 있으므로
+			// 이 방식에 맞춰 padding을 고려합니다.
+			// 즉, finalDragBarPosInOffsetParent는 offsetParent의 왼쪽/위쪽 경계부터 dragBar까지의 거리
+			// 이는 곧 prev 요소의 새로운 overall (width/height)가 됩니다.
+
+			// 여기서 오차가 난다면, `prev`와 `next`의 `box-sizing`이 무엇인지 확인해야 합니다.
+			// 만약 `box-sizing: content-box;`라면 `width = content + padding + border`.
+			// 만약 `box-sizing: border-box;`라면 `width = content`.
+			// 일반적으로 CSS Reset이나 프레임워크는 `border-box`를 사용하므로, 이 가정을 따릅니다.
+
+			// `border-box` 가정 시: finalDragBarPosInOffsetParent가 `prev`의 새로운 `width`가 됩니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 `width`가 됩니다.
+			// `padding`은 이 `width` 안에 포함됩니다.
+			// 따라서 별도로 `padding` 값을 빼거나 더할 필요가 없습니다.
+			// 만약 오차가 있다면, `prev` 또는 `next`에 `margin`이 적용되어 있거나,
+			// `parent`에 `gap` 속성 등이 적용되어 있는 것은 아닌지 확인해봐야 합니다.
+
+			// 하지만 사용자께서 padding에서 오차가 난다고 하셨으므로,
+			// `prev`/`next`의 `padding`이 `width`/`height` 계산에 영향을 주는 경우를 상정합니다.
+			// 이 경우 `box-sizing: content-box;` 이거나,
+			// `width`/`height`를 `content` 크기로 설정하고 싶을 때 발생합니다.
+
+			// **새로운 delta 계산 (prev의 최종 너비)**
+			// dragBar의 최종 위치가 offsetParent 기준.
+			// prev.getBoundingClientRect().left - dragBarOffsetParentRect.left : prev의 offsetParent 기준 왼쪽 시작점
+			// clickOffset: 마우스 클릭 지점과 스플리터 바 왼쪽 경계의 차이.
+			// 이 값은 드래그 바의 '컨텐츠' 시작점을 기준으로 한 오프셋으로 간주.
+
+			// 가장 간단한 해결책은 `getBoundingClientRect()`로 얻은 `prevRect.width`와 `nextRect.width`의 합을
+			// `totalSize`로 사용하는 것이 아니라, `parent`의 실제 사용 가능한 공간을 기준으로 삼고,
+			// 드래그 된 `dragBar`의 위치가 해당 공간의 몇 퍼센트를 차지하는지로 `prev`와 `next`의 새로운 `flex-grow`
+			// 비율을 계산하는 것입니다.
+
+			// 현재처럼 직접 width/height를 조절하는 방식에서는
+			// `finalDragBarPosInOffsetParent`가 prev의 새로운 `width`가 되는 것이 맞고,
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 next의 새로운 `width`가 되는 것이 맞습니다.
+			// 만약 padding 때문에 오차가 있다면, 이는 `box-sizing`의 문제이거나,
+			// `getBoundingClientRect()`가 `margin`을 포함하지 않는다는 점 때문일 수 있습니다.
+
+			// **다시 한번 문제의 핵심을 짚어봅시다.**
+			// "dragBar가 그만큼 왼쪽으로 그려져 padding 지우면 정상이야."
+			// 이 문제는 **드래그 바의 초기 위치 문제**입니다. 이 부분은 이미 `dragBar.offsetParent`를 사용하여 해결했습니다.
+
+			// "prev, next가 padding 을 가졌을때는 오차가 있어."
+			// 이 문제는 **최종 `width`/`height`를 `prev`와 `next`에 적용할 때의 오차**입니다.
+			// 즉, `finalPrevSize`와 `finalNextSize`를 계산하는 방식이 문제가 됩니다.
+
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 왼쪽/상단 끝에서 `dragBar`까지의 거리입니다.
+			// 이 값이 `prev`의 새로운 너비/높이가 되어야 합니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 너비/높이가 되어야 합니다.
+
+			// 만약 `prev`/`next`가 `padding`을 가질 때 오차가 발생한다면,
+			// 이는 `prev.style.width = \`${finalPrevSize}px\`;`를 적용할 때,
+			// `finalPrevSize`가 `prev`의 `content + padding + border`를 포함하는 `box-sizing: border-box;`일 경우의 크기여야 하는데,
+			// 실제 `prev` 요소의 `box-sizing`이 `content-box`인 경우 `padding`만큼 더 커지기 때문일 수 있습니다.
+
+			// CSS에서 `box-sizing: border-box;`를 모든 요소에 적용하는 것을 강력히 권장합니다.
+			// 예: `* { box-sizing: border-box; }`
+
+			// 만약 `border-box`를 이미 사용하고 있고 여전히 오차가 있다면,
+			// `dragBar`의 `width` (수평 스플리터의 경우) 또는 `height` (수직 스플리터의 경우)를 고려해야 합니다.
+			// 스플리터 자체의 두께만큼 `prev`와 `next` 사이의 공간이 발생하기 때문입니다.
+
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height; // 스플리터 바의 두께
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - (스플리터 두께의 절반)
+			offsetParentTotalSize - finalDragBarPosInOffsetParent - (splitterThickness / 2);
+
+			// 스플리터 두께만큼 중앙에서 나누어주는 로직
+			// prev의 끝점은 dragBar의 중앙이 되어야 함
+			// 즉, finalDragBarPosInOffsetParent는 dragBar의 좌측 끝점.
+			// prev의 새로운 크기는 이 dragBar 좌측 끝점에서 prev의 시작점까지의 거리.
+			// 근데 prev의 실제 content box 끝은 dragBar의 중앙까지 와야 한다면,
+			// prev의 끝점에서 dragBar 중앙까지의 거리를 계산.
+
+			// 다시, 드래그 위치 `relative`가 `parent` 기준 스플리터 바의 왼쪽/상단 경계라면
+			// `prev`의 새로운 크기는 이 `relative` 값과 동일해야 합니다.
+			// 그리고 `next`의 새로운 크기는 `parentTotalSize - relative - splitterThickness`가 되어야 합니다.
+			// 여기서 `relative`는 `onMove`에서 계산된 `dragBar.style.left` 또는 `top` 값입니다.
+			// `finalDragBarPosInOffsetParent`는 `relative`와 같은 의미.
+
+			// ⭐ `totalSize` (두 패널의 합계) 대신 `parent`의 사용 가능한 전체 공간을 기준으로
+			// `finalPrevSize`와 `finalNextSize`를 다시 계산합니다.
+			// 이 방식이 `padding`이나 `margin` 같은 외부 요소에 덜 민감합니다.
+
+			// `prev.style.width = Xpx`는 prev의 `content + padding + border`가 Xpx가 된다는 가정 (border-box)
+			// `prev`의 시작점 (offsetParent 기준)
+			const prevStartPosInOffsetParent = isHorizontal
+				? prevRect.left - dragBarOffsetParentRect.left
+				: prevRect.top - dragBarOffsetParentRect.top;
+
+			// `prev`의 새로운 크기 (스플리터 바의 위치까지)
+			finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
+			// `next`의 새로운 크기 (스플리터 바 이후부터 `offsetParent` 끝까지)
+			// `offsetParentTotalSize`는 `offsetParent`의 전체 너비/높이
+			finalNextSize = offsetParentTotalSize - (finalDragBarPosInOffsetParent + splitterThickness) + (prevStartPosInOffsetParent + finalPrevSize - nextRect[isHorizontal ? 'left' : 'top'] + dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			// 이 복잡한 계산은 prev와 next 사이의 간극 (스플리터 두께)을 정확히 반영하기 위함입니다.
+			// `finalPrevSize + finalNextSize + splitterThickness`가 `offsetParentTotalSize`와 일치해야 합니다.
+
+			// ⭐ 최종적으로 계산된 크기:
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 시작점에서 `dragBar`의 시작점까지의 거리.
+			// `prev`의 새 너비는 `finalDragBarPosInOffsetParent` 그 자체가 아니라,
+			// `dragBar`가 위치한 곳까지의 `prev`의 너비여야 합니다.
+			// 즉, `finalDragBarPosInOffsetParent`는 `prev`의 끝점이 되는 위치.
+
+			// 다시 한번, `finalDragBarPosInOffsetParent`는 `offsetParent`의 0 지점에서 `dragBar`의 0 지점까지의 거리입니다.
+			// `prev` 요소의 최종 너비는 이 `finalDragBarPosInOffsetParent`에서
+			// `prev` 요소의 `offsetParent` 기준 시작 지점 (`prevRect.left - dragBarOffsetParentRect.left`)을 뺀 값입니다.
+			// 즉, `prev`의 새로운 너비 = `dragBar`의 왼쪽 위치 - `prev`의 왼쪽 위치
+
+			// 그리고 `next`의 새로운 너비 = `next`의 오른쪽 위치 - `dragBar`의 오른쪽 위치
+
+			const newPrevWidthCalculated = finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			const newNextWidthCalculated = (nextRect[isHorizontal ? 'right' : 'bottom'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']) - (finalDragBarPosInOffsetParent + splitterThickness);
+
+
+			// 최소 크기 제약
+			const MIN_PANEL_SIZE_PX = 1; // 1px 미만으로 작아지지 않도록
+			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, newPrevWidthCalculated);
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, newNextWidthCalculated);
+
+			// 만약 `prev + next + splitter`의 합이 부모의 `content` 사이즈와 일치해야 한다면
+			// `finalNextSize`를 `offsetParentTotalSize - finalPrevSize - splitterThickness`로 계산하는 것이 더 정확할 수 있습니다.
+			// 이렇게 하면 오차가 마지막 패널에 몰아지지만, 합은 정확하게 유지됩니다.
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
 
-			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
-			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
-			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
 
-			// 기존 flex 값을 저장하고 복원
 			const originalPrevFlex = prev.style.flex;
 			const originalNextFlex = next.style.flex;
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
 			prev.style.flex = "none";
 			next.style.flex = "none";
 
-			console.log(finalPrevSize, finalNextSize);
-
 			if (isHorizontal) {
 				prev.style.width = `${finalPrevSize}px`;
 				next.style.width = `${finalNextSize}px`;
@@ -121303,9 +121437,6 @@ class nxSplitter extends HTMLElement {
 				next.style.height = `${finalNextSize}px`;
 			}
 
-			// 작업 완료 후 원래 flex 값으로 복원
-			// 주의: width/height가 설정된 상태에서 flex를 복원하면 충돌할 수 있음.
-			// flex-basis나 flex-grow/shrink를 적절히 조절하는 것이 더 견고한 방법.
 			prev.style.flex = originalPrevFlex;
 			next.style.flex = originalNextFlex;
 		};

package/dist/nx/nxSplitter.js

@@ -22,17 +22,15 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	// 이전 #startDrag_BAK 함수는 삭제하거나 주석 처리합니다.
-	// #startDrag_BAK = (...) => { ... }
-
 	#startDrag = (e) => {
-		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.preventDefault();
 		e.stopPropagation();
 
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// 클릭 지점에서 스플리터 경계까지의 오프셋 (이것은 dragBar 초기 위치와는 별개로, 최종 패널 사이즈 계산에 사용됨)
+		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		// 이 값은 최종 패널 사이즈 계산에 사용되며, 드래그 바 초기 위치와는 직접 관련 없음
 		const clickOffset = isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
@@ -60,15 +58,14 @@ class nxSplitter extends HTMLElement {
 			return;
 		}
 
-		// ⭐ dragBar를 먼저 DOM에 추가하여 offsetParent를 확보합니다.
+		// dragBar를 먼저 DOM에 추가하여 offsetParent를 확보
 		(parent.shadowRoot || parent).appendChild(dragBar);
 
-		// dragBar의 실제 offsetParent (position: absolute의 기준이 되는 요소)
 		const dragBarOffsetParent = dragBar.offsetParent;
 
 		if (!dragBarOffsetParent) {
 			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove(); // 실패 시 dragBar 제거
+			dragBar.remove();
 			return;
 		}
 
@@ -76,7 +73,6 @@ class nxSplitter extends HTMLElement {
 		const prevRect = prev.getBoundingClientRect(); // 뷰포트 기준
 		const nextRect = next.getBoundingClientRect(); // 뷰포트 기준
 
-
 		// 뷰포트 기준 클릭 위치를 dragBarOffsetParent 기준으로 변환하여 초기 dragBar 위치 설정
 		let initialPosInOffsetParent;
 		if (isHorizontal) {
@@ -104,12 +100,10 @@ class nxSplitter extends HTMLElement {
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 뷰포트 기준 클릭 위치를 offsetParent 기준으로 변환
 			const currentPosInOffsetParent = isHorizontal
 				? clientPos - dragBarOffsetParentRect.left
 				: clientPos - dragBarOffsetParentRect.top;
 
-			// 드래그 바가 최소/최대 범위 내에 있도록 클램프
 			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
 
 			if (isHorizontal) {
@@ -117,8 +111,6 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
 		const onUp = (upEvent) => {
@@ -126,34 +118,187 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			// 최종 드래그 바의 위치를 offsetParent 기준으로 가져옴
 			const finalDragBarPosInOffsetParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// 이전 요소의 새로운 크기 (offsetParent의 시작점부터 드래그 바까지)
-			const newPrevSize = finalDragBarPosInOffsetParent;
+			// ⭐⭐ prev와 next의 padding을 고려한 최종 사이즈 계산 ⭐⭐
+			const prevComputedStyle = getComputedStyle(prev);
+			const nextComputedStyle = getComputedStyle(next);
+
+			let prevPaddingStart = 0; // padding-left 또는 padding-top
+			let nextPaddingEnd = 0;   // padding-right 또는 padding-bottom
 
-			// 다음 요소의 새로운 크기 (offsetParent의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-			const newNextSize = offsetParentTotalSize - newPrevSize;
+			if (isHorizontal) {
+				prevPaddingStart = parseFloat(prevComputedStyle.paddingLeft) || 0;
+				nextPaddingEnd = parseFloat(nextComputedStyle.paddingRight) || 0;
+			} else {
+				prevPaddingStart = parseFloat(prevComputedStyle.paddingTop) || 0;
+				nextPaddingEnd = parseFloat(nextComputedStyle.paddingBottom) || 0;
+			}
+
+			// prev의 새로운 크기: dragBar의 위치 (offsetParent 기준) - prev의 padding-left/top
+			// (prev의 content 시작점까지)
+			let newPrevInnerSize = finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			newPrevInnerSize -= prevPaddingStart; // prev의 padding-left/top을 제외
+
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - next의 padding-right/bottom
+			let newNextInnerSize = (dragBarOffsetParentRect[isHorizontal ? 'width' : 'height'] - finalDragBarPosInOffsetParent);
+			newNextInnerSize -= nextPaddingEnd; // next의 padding-right/bottom을 제외
+
+			// 최종 패널 크기에 MIN_PANEL_SIZE 적용 (padding이 적용된 후의 최소 크기)
+			const MIN_PANEL_SIZE = 1;
+
+			// `box-sizing`에 따라 `width`/`height` 설정 방식이 달라짐.
+			// 대부분 `border-box`를 사용하므로, `width`를 설정하면 `padding`이 포함됨.
+			// 따라서 `newPrevInnerSize`와 `newNextInnerSize`는 `padding`을 제외한 `content` 크기가 아니라
+			// 최종적으로 `width`/`height`에 적용될 값이어야 함.
+			// 즉, `padding`이 포함된 전체 `width`/`height`로 계산해야 함.
+
+			// 다시 생각해보면, finalDragBarPosInOffsetParent가 바로 prev의 새로운 width/height가 되어야 합니다.
+			// 왜냐하면 dragBar의 위치가 prev의 끝이기 때문입니다.
+			// 문제는 prev/next에 padding이 있을 때 이 크기를 어떻게 `style.width`/`height`에 반영할지입니다.
+
+			// 가장 일반적인 시나리오: flex-grow 사용 (flex 컨테이너에서 권장)
+			// `prev`와 `next`에 `flex-grow`를 설정하고 `flex-basis: 0;` (혹은 `auto`)를 사용하면,
+			// `flex-grow` 비율로 공간을 나눕니다.
+			// 드래그는 이 `flex-grow` 비율을 조정하는 방식으로 구현하는 것이 가장 깔끔합니다.
+
+			// 현재 prev.style.flex = "none"; next.style.flex = "none"; 방식으로 직접 width/height를 조절하고 있으므로
+			// 이 방식에 맞춰 padding을 고려합니다.
+			// 즉, finalDragBarPosInOffsetParent는 offsetParent의 왼쪽/위쪽 경계부터 dragBar까지의 거리
+			// 이는 곧 prev 요소의 새로운 overall (width/height)가 됩니다.
+
+			// 여기서 오차가 난다면, `prev`와 `next`의 `box-sizing`이 무엇인지 확인해야 합니다.
+			// 만약 `box-sizing: content-box;`라면 `width = content + padding + border`.
+			// 만약 `box-sizing: border-box;`라면 `width = content`.
+			// 일반적으로 CSS Reset이나 프레임워크는 `border-box`를 사용하므로, 이 가정을 따릅니다.
+
+			// `border-box` 가정 시: finalDragBarPosInOffsetParent가 `prev`의 새로운 `width`가 됩니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 `width`가 됩니다.
+			// `padding`은 이 `width` 안에 포함됩니다.
+			// 따라서 별도로 `padding` 값을 빼거나 더할 필요가 없습니다.
+			// 만약 오차가 있다면, `prev` 또는 `next`에 `margin`이 적용되어 있거나,
+			// `parent`에 `gap` 속성 등이 적용되어 있는 것은 아닌지 확인해봐야 합니다.
+
+			// 하지만 사용자께서 padding에서 오차가 난다고 하셨으므로,
+			// `prev`/`next`의 `padding`이 `width`/`height` 계산에 영향을 주는 경우를 상정합니다.
+			// 이 경우 `box-sizing: content-box;` 이거나,
+			// `width`/`height`를 `content` 크기로 설정하고 싶을 때 발생합니다.
+
+			// **새로운 delta 계산 (prev의 최종 너비)**
+			// dragBar의 최종 위치가 offsetParent 기준.
+			// prev.getBoundingClientRect().left - dragBarOffsetParentRect.left : prev의 offsetParent 기준 왼쪽 시작점
+			// clickOffset: 마우스 클릭 지점과 스플리터 바 왼쪽 경계의 차이.
+			// 이 값은 드래그 바의 '컨텐츠' 시작점을 기준으로 한 오프셋으로 간주.
+
+			// 가장 간단한 해결책은 `getBoundingClientRect()`로 얻은 `prevRect.width`와 `nextRect.width`의 합을
+			// `totalSize`로 사용하는 것이 아니라, `parent`의 실제 사용 가능한 공간을 기준으로 삼고,
+			// 드래그 된 `dragBar`의 위치가 해당 공간의 몇 퍼센트를 차지하는지로 `prev`와 `next`의 새로운 `flex-grow`
+			// 비율을 계산하는 것입니다.
+
+			// 현재처럼 직접 width/height를 조절하는 방식에서는
+			// `finalDragBarPosInOffsetParent`가 prev의 새로운 `width`가 되는 것이 맞고,
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 next의 새로운 `width`가 되는 것이 맞습니다.
+			// 만약 padding 때문에 오차가 있다면, 이는 `box-sizing`의 문제이거나,
+			// `getBoundingClientRect()`가 `margin`을 포함하지 않는다는 점 때문일 수 있습니다.
+
+			// **다시 한번 문제의 핵심을 짚어봅시다.**
+			// "dragBar가 그만큼 왼쪽으로 그려져 padding 지우면 정상이야."
+			// 이 문제는 **드래그 바의 초기 위치 문제**입니다. 이 부분은 이미 `dragBar.offsetParent`를 사용하여 해결했습니다.
+
+			// "prev, next가 padding 을 가졌을때는 오차가 있어."
+			// 이 문제는 **최종 `width`/`height`를 `prev`와 `next`에 적용할 때의 오차**입니다.
+			// 즉, `finalPrevSize`와 `finalNextSize`를 계산하는 방식이 문제가 됩니다.
+
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 왼쪽/상단 끝에서 `dragBar`까지의 거리입니다.
+			// 이 값이 `prev`의 새로운 너비/높이가 되어야 합니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 너비/높이가 되어야 합니다.
+
+			// 만약 `prev`/`next`가 `padding`을 가질 때 오차가 발생한다면,
+			// 이는 `prev.style.width = \`${finalPrevSize}px\`;`를 적용할 때,
+			// `finalPrevSize`가 `prev`의 `content + padding + border`를 포함하는 `box-sizing: border-box;`일 경우의 크기여야 하는데,
+			// 실제 `prev` 요소의 `box-sizing`이 `content-box`인 경우 `padding`만큼 더 커지기 때문일 수 있습니다.
+
+			// CSS에서 `box-sizing: border-box;`를 모든 요소에 적용하는 것을 강력히 권장합니다.
+			// 예: `* { box-sizing: border-box; }`
+
+			// 만약 `border-box`를 이미 사용하고 있고 여전히 오차가 있다면,
+			// `dragBar`의 `width` (수평 스플리터의 경우) 또는 `height` (수직 스플리터의 경우)를 고려해야 합니다.
+			// 스플리터 자체의 두께만큼 `prev`와 `next` 사이의 공간이 발생하기 때문입니다.
+
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height; // 스플리터 바의 두께
+
+			// prev의 새로운 크기: dragBar 위치 - (스플리터 두께의 절반)
+			let newPrevWidth = finalDragBarPosInOffsetParent - (splitterThickness / 2);
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - (스플리터 두께의 절반)
+			let newNextWidth = offsetParentTotalSize - finalDragBarPosInOffsetParent - (splitterThickness / 2);
+
+			// 스플리터 두께만큼 중앙에서 나누어주는 로직
+			// prev의 끝점은 dragBar의 중앙이 되어야 함
+			// 즉, finalDragBarPosInOffsetParent는 dragBar의 좌측 끝점.
+			// prev의 새로운 크기는 이 dragBar 좌측 끝점에서 prev의 시작점까지의 거리.
+			// 근데 prev의 실제 content box 끝은 dragBar의 중앙까지 와야 한다면,
+			// prev의 끝점에서 dragBar 중앙까지의 거리를 계산.
+
+			// 다시, 드래그 위치 `relative`가 `parent` 기준 스플리터 바의 왼쪽/상단 경계라면
+			// `prev`의 새로운 크기는 이 `relative` 값과 동일해야 합니다.
+			// 그리고 `next`의 새로운 크기는 `parentTotalSize - relative - splitterThickness`가 되어야 합니다.
+			// 여기서 `relative`는 `onMove`에서 계산된 `dragBar.style.left` 또는 `top` 값입니다.
+			// `finalDragBarPosInOffsetParent`는 `relative`와 같은 의미.
+
+			// ⭐ `totalSize` (두 패널의 합계) 대신 `parent`의 사용 가능한 전체 공간을 기준으로
+			// `finalPrevSize`와 `finalNextSize`를 다시 계산합니다.
+			// 이 방식이 `padding`이나 `margin` 같은 외부 요소에 덜 민감합니다.
+
+			// `prev.style.width = Xpx`는 prev의 `content + padding + border`가 Xpx가 된다는 가정 (border-box)
+			// `prev`의 시작점 (offsetParent 기준)
+			const prevStartPosInOffsetParent = isHorizontal
+				? prevRect.left - dragBarOffsetParentRect.left
+				: prevRect.top - dragBarOffsetParentRect.top;
+
+			// `prev`의 새로운 크기 (스플리터 바의 위치까지)
+			finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
+			// `next`의 새로운 크기 (스플리터 바 이후부터 `offsetParent` 끝까지)
+			// `offsetParentTotalSize`는 `offsetParent`의 전체 너비/높이
+			finalNextSize = offsetParentTotalSize - (finalDragBarPosInOffsetParent + splitterThickness) + (prevStartPosInOffsetParent + finalPrevSize - nextRect[isHorizontal ? 'left' : 'top'] + dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			// 이 복잡한 계산은 prev와 next 사이의 간극 (스플리터 두께)을 정확히 반영하기 위함입니다.
+			// `finalPrevSize + finalNextSize + splitterThickness`가 `offsetParentTotalSize`와 일치해야 합니다.
+
+			// ⭐ 최종적으로 계산된 크기:
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 시작점에서 `dragBar`의 시작점까지의 거리.
+			// `prev`의 새 너비는 `finalDragBarPosInOffsetParent` 그 자체가 아니라,
+			// `dragBar`가 위치한 곳까지의 `prev`의 너비여야 합니다.
+			// 즉, `finalDragBarPosInOffsetParent`는 `prev`의 끝점이 되는 위치.
+
+			// 다시 한번, `finalDragBarPosInOffsetParent`는 `offsetParent`의 0 지점에서 `dragBar`의 0 지점까지의 거리입니다.
+			// `prev` 요소의 최종 너비는 이 `finalDragBarPosInOffsetParent`에서
+			// `prev` 요소의 `offsetParent` 기준 시작 지점 (`prevRect.left - dragBarOffsetParentRect.left`)을 뺀 값입니다.
+			// 즉, `prev`의 새로운 너비 = `dragBar`의 왼쪽 위치 - `prev`의 왼쪽 위치
+
+			// 그리고 `next`의 새로운 너비 = `next`의 오른쪽 위치 - `dragBar`의 오른쪽 위치
+
+			const newPrevWidthCalculated = finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			const newNextWidthCalculated = (nextRect[isHorizontal ? 'right' : 'bottom'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']) - (finalDragBarPosInOffsetParent + splitterThickness);
+
+
+			// 최소 크기 제약
+			const MIN_PANEL_SIZE_PX = 1; // 1px 미만으로 작아지지 않도록
+			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, newPrevWidthCalculated);
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, newNextWidthCalculated);
+
+			// 만약 `prev + next + splitter`의 합이 부모의 `content` 사이즈와 일치해야 한다면
+			// `finalNextSize`를 `offsetParentTotalSize - finalPrevSize - splitterThickness`로 계산하는 것이 더 정확할 수 있습니다.
+			// 이렇게 하면 오차가 마지막 패널에 몰아지지만, 합은 정확하게 유지됩니다.
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
 
-			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
-			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
-			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
 
-			// 기존 flex 값을 저장하고 복원
 			const originalPrevFlex = prev.style.flex;
 			const originalNextFlex = next.style.flex;
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
 			prev.style.flex = "none";
 			next.style.flex = "none";
 
-			console.log(finalPrevSize, finalNextSize);
-
 			if (isHorizontal) {
 				prev.style.width = `${finalPrevSize}px`;
 				next.style.width = `${finalNextSize}px`;
@@ -162,9 +307,6 @@ class nxSplitter extends HTMLElement {
 				next.style.height = `${finalNextSize}px`;
 			}
 
-			// 작업 완료 후 원래 flex 값으로 복원
-			// 주의: width/height가 설정된 상태에서 flex를 복원하면 충돌할 수 있음.
-			// flex-basis나 flex-grow/shrink를 적절히 조절하는 것이 더 견고한 방법.
 			prev.style.flex = originalPrevFlex;
 			next.style.flex = originalNextFlex;
 		};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.862.0",
+  "version": "6.863.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxSplitter.js

@@ -22,17 +22,15 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	// 이전 #startDrag_BAK 함수는 삭제하거나 주석 처리합니다.
-	// #startDrag_BAK = (...) => { ... }
-
 	#startDrag = (e) => {
-		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.preventDefault();
 		e.stopPropagation();
 
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// 클릭 지점에서 스플리터 경계까지의 오프셋 (이것은 dragBar 초기 위치와는 별개로, 최종 패널 사이즈 계산에 사용됨)
+		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		// 이 값은 최종 패널 사이즈 계산에 사용되며, 드래그 바 초기 위치와는 직접 관련 없음
 		const clickOffset = isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
@@ -60,15 +58,14 @@ class nxSplitter extends HTMLElement {
 			return;
 		}
 
-		// ⭐ dragBar를 먼저 DOM에 추가하여 offsetParent를 확보합니다.
+		// dragBar를 먼저 DOM에 추가하여 offsetParent를 확보
 		(parent.shadowRoot || parent).appendChild(dragBar);
 
-		// dragBar의 실제 offsetParent (position: absolute의 기준이 되는 요소)
 		const dragBarOffsetParent = dragBar.offsetParent;
 
 		if (!dragBarOffsetParent) {
 			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove(); // 실패 시 dragBar 제거
+			dragBar.remove();
 			return;
 		}
 
@@ -76,7 +73,6 @@ class nxSplitter extends HTMLElement {
 		const prevRect = prev.getBoundingClientRect(); // 뷰포트 기준
 		const nextRect = next.getBoundingClientRect(); // 뷰포트 기준
 
-
 		// 뷰포트 기준 클릭 위치를 dragBarOffsetParent 기준으로 변환하여 초기 dragBar 위치 설정
 		let initialPosInOffsetParent;
 		if (isHorizontal) {
@@ -104,12 +100,10 @@ class nxSplitter extends HTMLElement {
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 뷰포트 기준 클릭 위치를 offsetParent 기준으로 변환
 			const currentPosInOffsetParent = isHorizontal
 				? clientPos - dragBarOffsetParentRect.left
 				: clientPos - dragBarOffsetParentRect.top;
 
-			// 드래그 바가 최소/최대 범위 내에 있도록 클램프
 			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
 
 			if (isHorizontal) {
@@ -117,8 +111,6 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
 		const onUp = (upEvent) => {
@@ -126,34 +118,187 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			// 최종 드래그 바의 위치를 offsetParent 기준으로 가져옴
 			const finalDragBarPosInOffsetParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// 이전 요소의 새로운 크기 (offsetParent의 시작점부터 드래그 바까지)
-			const newPrevSize = finalDragBarPosInOffsetParent;
+			// ⭐⭐ prev와 next의 padding을 고려한 최종 사이즈 계산 ⭐⭐
+			const prevComputedStyle = getComputedStyle(prev);
+			const nextComputedStyle = getComputedStyle(next);
+
+			let prevPaddingStart = 0; // padding-left 또는 padding-top
+			let nextPaddingEnd = 0;   // padding-right 또는 padding-bottom
 
-			// 다음 요소의 새로운 크기 (offsetParent의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-			const newNextSize = offsetParentTotalSize - newPrevSize;
+			if (isHorizontal) {
+				prevPaddingStart = parseFloat(prevComputedStyle.paddingLeft) || 0;
+				nextPaddingEnd = parseFloat(nextComputedStyle.paddingRight) || 0;
+			} else {
+				prevPaddingStart = parseFloat(prevComputedStyle.paddingTop) || 0;
+				nextPaddingEnd = parseFloat(nextComputedStyle.paddingBottom) || 0;
+			}
+
+			// prev의 새로운 크기: dragBar의 위치 (offsetParent 기준) - prev의 padding-left/top
+			// (prev의 content 시작점까지)
+			let newPrevInnerSize = finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			newPrevInnerSize -= prevPaddingStart; // prev의 padding-left/top을 제외
+
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - next의 padding-right/bottom
+			let newNextInnerSize = (dragBarOffsetParentRect[isHorizontal ? 'width' : 'height'] - finalDragBarPosInOffsetParent);
+			newNextInnerSize -= nextPaddingEnd; // next의 padding-right/bottom을 제외
+
+			// 최종 패널 크기에 MIN_PANEL_SIZE 적용 (padding이 적용된 후의 최소 크기)
+			const MIN_PANEL_SIZE = 1;
+
+			// `box-sizing`에 따라 `width`/`height` 설정 방식이 달라짐.
+			// 대부분 `border-box`를 사용하므로, `width`를 설정하면 `padding`이 포함됨.
+			// 따라서 `newPrevInnerSize`와 `newNextInnerSize`는 `padding`을 제외한 `content` 크기가 아니라
+			// 최종적으로 `width`/`height`에 적용될 값이어야 함.
+			// 즉, `padding`이 포함된 전체 `width`/`height`로 계산해야 함.
+
+			// 다시 생각해보면, finalDragBarPosInOffsetParent가 바로 prev의 새로운 width/height가 되어야 합니다.
+			// 왜냐하면 dragBar의 위치가 prev의 끝이기 때문입니다.
+			// 문제는 prev/next에 padding이 있을 때 이 크기를 어떻게 `style.width`/`height`에 반영할지입니다.
+
+			// 가장 일반적인 시나리오: flex-grow 사용 (flex 컨테이너에서 권장)
+			// `prev`와 `next`에 `flex-grow`를 설정하고 `flex-basis: 0;` (혹은 `auto`)를 사용하면,
+			// `flex-grow` 비율로 공간을 나눕니다.
+			// 드래그는 이 `flex-grow` 비율을 조정하는 방식으로 구현하는 것이 가장 깔끔합니다.
+
+			// 현재 prev.style.flex = "none"; next.style.flex = "none"; 방식으로 직접 width/height를 조절하고 있으므로
+			// 이 방식에 맞춰 padding을 고려합니다.
+			// 즉, finalDragBarPosInOffsetParent는 offsetParent의 왼쪽/위쪽 경계부터 dragBar까지의 거리
+			// 이는 곧 prev 요소의 새로운 overall (width/height)가 됩니다.
+
+			// 여기서 오차가 난다면, `prev`와 `next`의 `box-sizing`이 무엇인지 확인해야 합니다.
+			// 만약 `box-sizing: content-box;`라면 `width = content + padding + border`.
+			// 만약 `box-sizing: border-box;`라면 `width = content`.
+			// 일반적으로 CSS Reset이나 프레임워크는 `border-box`를 사용하므로, 이 가정을 따릅니다.
+
+			// `border-box` 가정 시: finalDragBarPosInOffsetParent가 `prev`의 새로운 `width`가 됩니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 `width`가 됩니다.
+			// `padding`은 이 `width` 안에 포함됩니다.
+			// 따라서 별도로 `padding` 값을 빼거나 더할 필요가 없습니다.
+			// 만약 오차가 있다면, `prev` 또는 `next`에 `margin`이 적용되어 있거나,
+			// `parent`에 `gap` 속성 등이 적용되어 있는 것은 아닌지 확인해봐야 합니다.
+
+			// 하지만 사용자께서 padding에서 오차가 난다고 하셨으므로,
+			// `prev`/`next`의 `padding`이 `width`/`height` 계산에 영향을 주는 경우를 상정합니다.
+			// 이 경우 `box-sizing: content-box;` 이거나,
+			// `width`/`height`를 `content` 크기로 설정하고 싶을 때 발생합니다.
+
+			// **새로운 delta 계산 (prev의 최종 너비)**
+			// dragBar의 최종 위치가 offsetParent 기준.
+			// prev.getBoundingClientRect().left - dragBarOffsetParentRect.left : prev의 offsetParent 기준 왼쪽 시작점
+			// clickOffset: 마우스 클릭 지점과 스플리터 바 왼쪽 경계의 차이.
+			// 이 값은 드래그 바의 '컨텐츠' 시작점을 기준으로 한 오프셋으로 간주.
+
+			// 가장 간단한 해결책은 `getBoundingClientRect()`로 얻은 `prevRect.width`와 `nextRect.width`의 합을
+			// `totalSize`로 사용하는 것이 아니라, `parent`의 실제 사용 가능한 공간을 기준으로 삼고,
+			// 드래그 된 `dragBar`의 위치가 해당 공간의 몇 퍼센트를 차지하는지로 `prev`와 `next`의 새로운 `flex-grow`
+			// 비율을 계산하는 것입니다.
+
+			// 현재처럼 직접 width/height를 조절하는 방식에서는
+			// `finalDragBarPosInOffsetParent`가 prev의 새로운 `width`가 되는 것이 맞고,
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 next의 새로운 `width`가 되는 것이 맞습니다.
+			// 만약 padding 때문에 오차가 있다면, 이는 `box-sizing`의 문제이거나,
+			// `getBoundingClientRect()`가 `margin`을 포함하지 않는다는 점 때문일 수 있습니다.
+
+			// **다시 한번 문제의 핵심을 짚어봅시다.**
+			// "dragBar가 그만큼 왼쪽으로 그려져 padding 지우면 정상이야."
+			// 이 문제는 **드래그 바의 초기 위치 문제**입니다. 이 부분은 이미 `dragBar.offsetParent`를 사용하여 해결했습니다.
+
+			// "prev, next가 padding 을 가졌을때는 오차가 있어."
+			// 이 문제는 **최종 `width`/`height`를 `prev`와 `next`에 적용할 때의 오차**입니다.
+			// 즉, `finalPrevSize`와 `finalNextSize`를 계산하는 방식이 문제가 됩니다.
+
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 왼쪽/상단 끝에서 `dragBar`까지의 거리입니다.
+			// 이 값이 `prev`의 새로운 너비/높이가 되어야 합니다.
+			// `offsetParentTotalSize - finalDragBarPosInOffsetParent`가 `next`의 새로운 너비/높이가 되어야 합니다.
+
+			// 만약 `prev`/`next`가 `padding`을 가질 때 오차가 발생한다면,
+			// 이는 `prev.style.width = \`${finalPrevSize}px\`;`를 적용할 때,
+			// `finalPrevSize`가 `prev`의 `content + padding + border`를 포함하는 `box-sizing: border-box;`일 경우의 크기여야 하는데,
+			// 실제 `prev` 요소의 `box-sizing`이 `content-box`인 경우 `padding`만큼 더 커지기 때문일 수 있습니다.
+
+			// CSS에서 `box-sizing: border-box;`를 모든 요소에 적용하는 것을 강력히 권장합니다.
+			// 예: `* { box-sizing: border-box; }`
+
+			// 만약 `border-box`를 이미 사용하고 있고 여전히 오차가 있다면,
+			// `dragBar`의 `width` (수평 스플리터의 경우) 또는 `height` (수직 스플리터의 경우)를 고려해야 합니다.
+			// 스플리터 자체의 두께만큼 `prev`와 `next` 사이의 공간이 발생하기 때문입니다.
+
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height; // 스플리터 바의 두께
+
+			// prev의 새로운 크기: dragBar 위치 - (스플리터 두께의 절반)
+			let newPrevWidth = finalDragBarPosInOffsetParent - (splitterThickness / 2);
+			// next의 새로운 크기: (offsetParent 전체 크기 - dragBar 위치) - (스플리터 두께의 절반)
+			let newNextWidth = offsetParentTotalSize - finalDragBarPosInOffsetParent - (splitterThickness / 2);
+
+			// 스플리터 두께만큼 중앙에서 나누어주는 로직
+			// prev의 끝점은 dragBar의 중앙이 되어야 함
+			// 즉, finalDragBarPosInOffsetParent는 dragBar의 좌측 끝점.
+			// prev의 새로운 크기는 이 dragBar 좌측 끝점에서 prev의 시작점까지의 거리.
+			// 근데 prev의 실제 content box 끝은 dragBar의 중앙까지 와야 한다면,
+			// prev의 끝점에서 dragBar 중앙까지의 거리를 계산.
+
+			// 다시, 드래그 위치 `relative`가 `parent` 기준 스플리터 바의 왼쪽/상단 경계라면
+			// `prev`의 새로운 크기는 이 `relative` 값과 동일해야 합니다.
+			// 그리고 `next`의 새로운 크기는 `parentTotalSize - relative - splitterThickness`가 되어야 합니다.
+			// 여기서 `relative`는 `onMove`에서 계산된 `dragBar.style.left` 또는 `top` 값입니다.
+			// `finalDragBarPosInOffsetParent`는 `relative`와 같은 의미.
+
+			// ⭐ `totalSize` (두 패널의 합계) 대신 `parent`의 사용 가능한 전체 공간을 기준으로
+			// `finalPrevSize`와 `finalNextSize`를 다시 계산합니다.
+			// 이 방식이 `padding`이나 `margin` 같은 외부 요소에 덜 민감합니다.
+
+			// `prev.style.width = Xpx`는 prev의 `content + padding + border`가 Xpx가 된다는 가정 (border-box)
+			// `prev`의 시작점 (offsetParent 기준)
+			const prevStartPosInOffsetParent = isHorizontal
+				? prevRect.left - dragBarOffsetParentRect.left
+				: prevRect.top - dragBarOffsetParentRect.top;
+
+			// `prev`의 새로운 크기 (스플리터 바의 위치까지)
+			finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
+			// `next`의 새로운 크기 (스플리터 바 이후부터 `offsetParent` 끝까지)
+			// `offsetParentTotalSize`는 `offsetParent`의 전체 너비/높이
+			finalNextSize = offsetParentTotalSize - (finalDragBarPosInOffsetParent + splitterThickness) + (prevStartPosInOffsetParent + finalPrevSize - nextRect[isHorizontal ? 'left' : 'top'] + dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			// 이 복잡한 계산은 prev와 next 사이의 간극 (스플리터 두께)을 정확히 반영하기 위함입니다.
+			// `finalPrevSize + finalNextSize + splitterThickness`가 `offsetParentTotalSize`와 일치해야 합니다.
+
+			// ⭐ 최종적으로 계산된 크기:
+			// `finalDragBarPosInOffsetParent`는 `offsetParent`의 시작점에서 `dragBar`의 시작점까지의 거리.
+			// `prev`의 새 너비는 `finalDragBarPosInOffsetParent` 그 자체가 아니라,
+			// `dragBar`가 위치한 곳까지의 `prev`의 너비여야 합니다.
+			// 즉, `finalDragBarPosInOffsetParent`는 `prev`의 끝점이 되는 위치.
+
+			// 다시 한번, `finalDragBarPosInOffsetParent`는 `offsetParent`의 0 지점에서 `dragBar`의 0 지점까지의 거리입니다.
+			// `prev` 요소의 최종 너비는 이 `finalDragBarPosInOffsetParent`에서
+			// `prev` 요소의 `offsetParent` 기준 시작 지점 (`prevRect.left - dragBarOffsetParentRect.left`)을 뺀 값입니다.
+			// 즉, `prev`의 새로운 너비 = `dragBar`의 왼쪽 위치 - `prev`의 왼쪽 위치
+
+			// 그리고 `next`의 새로운 너비 = `next`의 오른쪽 위치 - `dragBar`의 오른쪽 위치
+
+			const newPrevWidthCalculated = finalDragBarPosInOffsetParent - (prevRect[isHorizontal ? 'left' : 'top'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']);
+			const newNextWidthCalculated = (nextRect[isHorizontal ? 'right' : 'bottom'] - dragBarOffsetParentRect[isHorizontal ? 'left' : 'top']) - (finalDragBarPosInOffsetParent + splitterThickness);
+
+
+			// 최소 크기 제약
+			const MIN_PANEL_SIZE_PX = 1; // 1px 미만으로 작아지지 않도록
+			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, newPrevWidthCalculated);
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, newNextWidthCalculated);
+
+			// 만약 `prev + next + splitter`의 합이 부모의 `content` 사이즈와 일치해야 한다면
+			// `finalNextSize`를 `offsetParentTotalSize - finalPrevSize - splitterThickness`로 계산하는 것이 더 정확할 수 있습니다.
+			// 이렇게 하면 오차가 마지막 패널에 몰아지지만, 합은 정확하게 유지됩니다.
+			finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
 
-			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
-			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
-			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
 
-			// 기존 flex 값을 저장하고 복원
 			const originalPrevFlex = prev.style.flex;
 			const originalNextFlex = next.style.flex;
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
 			prev.style.flex = "none";
 			next.style.flex = "none";
 
-			console.log(finalPrevSize, finalNextSize);
-
 			if (isHorizontal) {
 				prev.style.width = `${finalPrevSize}px`;
 				next.style.width = `${finalNextSize}px`;
@@ -162,9 +307,6 @@ class nxSplitter extends HTMLElement {
 				next.style.height = `${finalNextSize}px`;
 			}
 
-			// 작업 완료 후 원래 flex 값으로 복원
-			// 주의: width/height가 설정된 상태에서 flex를 복원하면 충돌할 수 있음.
-			// flex-basis나 flex-grow/shrink를 적절히 조절하는 것이 더 견고한 방법.
 			prev.style.flex = originalPrevFlex;
 			next.style.flex = originalNextFlex;
 		};