docs: Add documentation for category dropdown depth separation

- Introduced new documents detailing the implementation of visual separation for three-level category dropdowns.
- Updated the `flattenTree` function in both `V2Select.tsx` and `UnifiedSelect.tsx` to use Non-Breaking Space (`\u00A0`) for indentation, ensuring proper visual hierarchy.
- Included a checklist to track the implementation progress and verification of the changes.
- Documented the rationale behind the changes, including the issues with HTML whitespace collapsing and the decisions made to enhance user experience.

These updates aim to improve the clarity and usability of the category selection interface in the application.

frontend/lib/hooks/useDialogAutoValidation.ts

@@ -98,6 +98,16 @@ export function useDialogAutoValidation(contentEl: HTMLElement | null) {
       return el instanceof HTMLSelectElement && el.hasAttribute("aria-hidden");
     }
 
+    // 복합 입력 필드(채번 세그먼트 등)의 시각적 테두리 컨테이너 탐지
+    // input 자체에 border가 없고 부모가 border를 가진 경우 부모를 반환
+    function findBorderContainer(input: TargetEl): HTMLElement {
+      const parent = input.parentElement;
+      if (parent && parent.classList.contains("border")) {
+        return parent;
+      }
+      return input;
+    }
+
     function isEmpty(input: TargetEl): boolean {
       if (input instanceof HTMLButtonElement) {
         // Radix Select: data-placeholder 속성이 자식 span에 있으면 미선택 상태
@@ -120,20 +130,24 @@ export function useDialogAutoValidation(contentEl: HTMLElement | null) {
     }
 
     function markError(input: TargetEl) {
-      input.setAttribute(ERROR_ATTR, "true");
+      const container = findBorderContainer(input);
+      container.setAttribute(ERROR_ATTR, "true");
       errorFields.add(input);
       showErrorMsg(input);
     }
 
     function clearError(input: TargetEl) {
-      input.removeAttribute(ERROR_ATTR);
+      const container = findBorderContainer(input);
+      container.removeAttribute(ERROR_ATTR);
       errorFields.delete(input);
       removeErrorMsg(input);
     }
 
     // 빈 필수 필드 아래에 경고 문구 삽입 (레이아웃 영향 없는 zero-height wrapper)
+    // 복합 입력(채번 세그먼트 등)은 border 컨테이너 바깥에 삽입
     function showErrorMsg(input: TargetEl) {
-      if (input.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`)) return;
+      const container = findBorderContainer(input);
+      if (container.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`)) return;
 
       const wrapper = document.createElement("div");
       wrapper.className = MSG_WRAPPER_CLASS;
@@ -142,17 +156,19 @@ export function useDialogAutoValidation(contentEl: HTMLElement | null) {
       msg.textContent = "필수 입력 항목입니다";
       wrapper.appendChild(msg);
 
-      input.insertAdjacentElement("afterend", wrapper);
+      container.insertAdjacentElement("afterend", wrapper);
     }
 
     function removeErrorMsg(input: TargetEl) {
-      const wrapper = input.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`);
+      const container = findBorderContainer(input);
+      const wrapper = container.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`);
       if (wrapper) wrapper.remove();
     }
 
     function highlightField(input: TargetEl) {
-      input.setAttribute(HIGHLIGHT_ATTR, "true");
-      input.addEventListener("animationend", () => input.removeAttribute(HIGHLIGHT_ATTR), { once: true });
+      const container = findBorderContainer(input);
+      container.setAttribute(HIGHLIGHT_ATTR, "true");
+      container.addEventListener("animationend", () => container.removeAttribute(HIGHLIGHT_ATTR), { once: true });
 
       if (input instanceof HTMLButtonElement) {
         input.click();