@ihabdevteam/core 0.149.0 → 0.151.0

package/dist/packages/core/src/components/PromoBannerBg/promoBannerBg.d.ts

@@ -13,7 +13,10 @@ export interface PromoBannerBgOption {
     /** 이 배경 위에 얹을 제목/설명 텍스트가 밝은 색(light)이어야 하는지, 어두운 색(dark)이어야 하는지 */
     textTone: 'light' | 'dark';
 }
-/** @public */
+/**
+ * 배경 고르개 보기 목록. `label` 은 읽는 때의 i18n 언어를 따른다(`promoBannerBg.<key>`, ko 는 한국어 이름 그대로).
+ * @public
+ */
 export declare const PROMO_BANNER_BG_OPTIONS: PromoBannerBgOption[];
 import type { ComponentType } from 'react';
 /** key → 실제 배경 컴포넌트. PromoBanner 등 사용처가 이걸로 렌더한다. 각 컴포넌트는 자신의

package/dist/packages/core/src/components/PromoBannerBg/promoBannerBg.js

@@ -1,19 +1,31 @@
-/** @public */
+import i18n from '../../i18n';
+/* 라벨은 **읽는 때의 언어**로 — 전에는 한국어가 박혀 영어 화면의 배경 고르개(어드민 공지 폼·놀이터)도 한국어였다.
+   배열·항목 모양(key·label·textTone)은 그대로 두고 label 만 읽을 때 사전(`promoBannerBg.<key>`)에서 꺼내는 getter 로 둔다
+   — 모듈을 읽은 순간의 언어로 굳지 않고, `{ ...o }` 로 펼치면 그때의 글자가 담긴다. ko 글자는 전과 같다. */
+const 배경 = (key, 한국어, textTone) => ({
+    key,
+    get label() { return i18n.t(`promoBannerBg.${key}`, 한국어); },
+    textTone,
+});
+/**
+ * 배경 고르개 보기 목록. `label` 은 읽는 때의 i18n 언어를 따른다(`promoBannerBg.<key>`, ko 는 한국어 이름 그대로).
+ * @public
+ */
 export const PROMO_BANNER_BG_OPTIONS = [
-    { key: 'main', label: '메인 그라디언트', textTone: 'light' },
-    { key: 'soft', label: '소프트', textTone: 'dark' },
-    { key: 'sub', label: '서브 컬러', textTone: 'light' },
-    { key: 'deep', label: '딥 그라디언트', textTone: 'light' },
-    { key: 'softSub', label: '소프트 서브', textTone: 'dark' },
-    { key: 'warm', label: '웜(강조)', textTone: 'dark' },
-    { key: 'dark', label: '다크', textTone: 'light' },
-    { key: 'radial', label: '방사형 그라디언트', textTone: 'light' },
-    { key: 'diagonal', label: '대각선 패턴', textTone: 'dark' },
-    { key: 'dots', label: '도트 패턴', textTone: 'dark' },
-    { key: 'outline', label: '아웃라인', textTone: 'dark' },
-    { key: 'success', label: '성공/완료', textTone: 'light' },
-    { key: 'naver', label: '네이버 블로그 안내', textTone: 'light' },
-    { key: 'instagram', label: '인스타그램 안내', textTone: 'light' },
+    배경('main', '메인 그라디언트', 'light'),
+    배경('soft', '소프트', 'dark'),
+    배경('sub', '서브 컬러', 'light'),
+    배경('deep', '딥 그라디언트', 'light'),
+    배경('softSub', '소프트 서브', 'dark'),
+    배경('warm', '웜(강조)', 'dark'),
+    배경('dark', '다크', 'light'),
+    배경('radial', '방사형 그라디언트', 'light'),
+    배경('diagonal', '대각선 패턴', 'dark'),
+    배경('dots', '도트 패턴', 'dark'),
+    배경('outline', '아웃라인', 'dark'),
+    배경('success', '성공/완료', 'light'),
+    배경('naver', '네이버 블로그 안내', 'light'),
+    배경('instagram', '인스타그램 안내', 'light'),
 ];
 import PromoBannerBgMain from './PromoBannerBgMain';
 import PromoBannerBgSoft from './PromoBannerBgSoft';

package/dist/packages/core/src/components/Rating.d.ts

@@ -3,9 +3,15 @@ import './Rating.css';
 export type RatingSize = 'small' | 'medium' | 'large';
 /** @public */
 export interface RatingProps {
-    /** 현재 별점 (0 ~ max). 읽기 전용 모드에서는 소수점(예: 4.5) 허용 */
+    /**
+     * 현재 별점 (0 ~ max). 읽기 전용 모드에서는 소수점(예: 4.5)을 그대로 그린다.
+     * 고르는 모드에서는 **가장 가까운 정수로 반올림해** 그리고 키보드도 그 값에서 옮긴다(3.4 → 별 셋).
+     */
     value: number;
-    /** 값 변경 콜백. 생략 시 읽기 전용 모드로 동작 */
+    /**
+     * 값 변경 콜백. 생략 시 읽기 전용 모드로 동작.
+     * **값이 바뀔 때만** 부른다 — 지금 값과 같은 별을 다시 누르거나 끝에서 화살표를 눌러 머물면 부르지 않는다.
+     */
     onChange?: (value: number) => void;
     /** 별 개수. 기본값 5 */
     max?: number;

package/dist/packages/core/src/components/Rating.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
+import { recentlyTouched } from '../hooks/touchToggle';
 import './Rating.css';
 const ICON_SIZE = {
     small: 14,
@@ -14,16 +15,25 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
     const { t } = useTranslation();
     const isReadOnly = readOnly || !onChange;
     const [hoverValue, setHoverValue] = useState(null);
-    const displayValue = hoverValue ?? value;
+    /* 고르는 모드는 별 하나 단위라 **반올림한 값**으로 그리고 옮긴다 — 소수 value(3.4)를 그대로 두면 별 셋 반쯤이 칠해지는데
+       어느 라디오도 골라지지 않았고(aria-checked 없음), 화살표는 4.4·2.4 로 옮겨 가 정수 별과 어긋났다. 읽기 전용은 소수 그대로. */
+    const 값 = isReadOnly ? value : (Number.isFinite(value) ? Math.round(value) : 0);
+    const displayValue = hoverValue ?? 값;
     const iconSize = ICON_SIZE[size];
+    /* 값이 바뀔 때만 onChange(2026-09-15 결정) — 소수 value 3.4 에서 별 3 을 누르면 3 으로 바뀌는 것이라 부른다 */
+    const 알림 = (다음) => { if (다음 !== value)
+        onChange?.(다음); };
     const handleClick = (star) => {
         if (isReadOnly)
             return;
-        onChange?.(star);
+        알림(star);
     };
     const handleMouseEnter = (star) => {
         if (isReadOnly)
             return;
+        // 톡 뒤 따라오는 호환 mouseenter 로는 미리보기를 켜지 않는다 — mouseleave 가 안 와 고른 값 대신 미리보기가 남았다
+        if (recentlyTouched())
+            return;
         setHoverValue(star);
     };
     /* **라디오 무리는 Tab 자리 하나 + 화살표**가 ARIA 규칙이다. `role="radiogroup"` 만
@@ -34,7 +44,7 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
     const 그룹 = useRef(null);
     const 옮기기 = (다음) => {
         const 잡은값 = Math.min(max, Math.max(1, 다음));
-        onChange?.(잡은값);
+        알림(잡은값);
         const 칸 = Array.from(그룹.current?.querySelectorAll('[data-star]') ?? [])
             .find((el) => el.dataset.star === String(잡은값));
         칸?.focus();
@@ -45,11 +55,11 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
         switch (e.key) {
             case 'ArrowRight':
             case 'ArrowUp':
-                옮기기((value || 0) + 1);
+                옮기기((값 || 0) + 1);
                 break;
             case 'ArrowLeft':
             case 'ArrowDown':
-                옮기기((value || 1) - 1);
+                옮기기((값 || 1) - 1);
                 break;
             case 'Home':
                 옮기기(1);
@@ -62,7 +72,7 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
         e.preventDefault();
     };
     /* Tab 자리를 받을 한 칸 — 고른 별, 없으면 첫 별 */
-    const 탭자리 = value >= 1 && value <= max ? Math.round(value) : 1;
+    const 탭자리 = 값 >= 1 && 값 <= max ? Math.round(값) : 1;
     const handleMouseLeave = () => {
         if (isReadOnly)
             return;
@@ -75,7 +85,11 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
        (별을 하나씩 읽히게 하면 "별·별·별…" 이 다섯 번 나올 뿐이라 묶음에 준다.) */
     _jsx("div", { className: `rating rating--${size}${isReadOnly ? ' rating--readOnly' : ''} ${className}`.trim(), ref: 그룹, onKeyDown: 키, role: isReadOnly ? 'img' : 'radiogroup', "aria-label": isReadOnly
             ? t('rating.valueLabel', { value, max })
-            : (ariaLabel ?? t('rating.groupLabel', '별점')), onMouseLeave: handleMouseLeave, children: Array.from({ length: max }, (_, i) => {
+            : (ariaLabel ?? t('rating.groupLabel', '별점')), onMouseLeave: handleMouseLeave, 
+        /* 터치를 떼거나 취소되면 미리보기를 푼다 */
+        onPointerUp: (e) => { if (e.pointerType === 'touch')
+            handleMouseLeave(); }, onPointerCancel: (e) => { if (e.pointerType === 'touch')
+            handleMouseLeave(); }, children: Array.from({ length: max }, (_, i) => {
             const star = i + 1;
             const fillRatio = Math.max(0, Math.min(1, displayValue - i));
             const isHalf = fillRatio > 0 && fillRatio < 1;
@@ -85,6 +99,6 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
             if (isReadOnly) {
                 return (_jsx("span", { className: "rating__item", "aria-hidden": "true", children: starNode }, star));
             }
-            return (_jsx("button", { type: "button", className: "rating__item rating__item--interactive", role: "radio", "aria-checked": value === star, "aria-label": t('rating.starLabel', { n: star }), "data-star": star, tabIndex: star === 탭자리 ? 0 : -1, onClick: () => handleClick(star), onMouseEnter: () => handleMouseEnter(star), children: starNode }, star));
+            return (_jsx("button", { type: "button", className: "rating__item rating__item--interactive", role: "radio", "aria-checked": 값 === star, "aria-label": t('rating.starLabel', { n: star }), "data-star": star, tabIndex: star === 탭자리 ? 0 : -1, onClick: () => handleClick(star), onMouseEnter: () => handleMouseEnter(star), children: starNode }, star));
         }) }));
 }

package/dist/packages/core/src/components/Report/ReportDocument.d.ts

@@ -15,7 +15,8 @@ export interface ReportBlock {
     /**
      * 쪽을 나눌 때 한 덩어리로 다룰 묶음. 표 머리와 그 행들처럼 갈라지면 읽을 수
      * 없는 것들에 같은 값을 준다 — 남은 자리가 모자라면 통째로 다음 장으로 간다.
-     * 묶음 하나가 한 장보다 크면 어쩔 수 없이 블록 단위로 쪼갠다. `section` 이 다르면 같은 값이어도 한 묶음이 아니다.
+     * 묶음 하나가 한 장보다 크면 어쩔 수 없이 블록 단위로 쪼갠다 — 이때는 앞 장에 남은 자리부터 이어 채운다.
+     * `section` 이 다르면 같은 값이어도 한 묶음이 아니다.
      */
     group?: string;
 }
@@ -53,12 +54,14 @@ export interface ReportDocumentProps {
  * 순서대로 채우다 넘치면 다음 장으로 넘긴다. 장마다 머리(제목 + 로고)와
  * 바닥(로고·저작권 + 쪽 번호)이 반복된다.
  *
- * 재는 방식이라 글꼴이 늦게 오거나 이미지가 나중에 뜨면 쪽이 밀릴 수 있다.
- * 다시 재는 때는 블록들의 `id`·`section`·`group` 구성이나 장 규격(`pageWidth`·`pageHeight`·`margin`)이 바뀔 때와
- * 처음 그릴 때(숨겨져 있다 보이게 될 때 포함)뿐이다 —
- * 같은 구성으로 다시 그리거나 `content` 만 바뀌어서는 다시 재지 않는다(렌더마다 재면
- * 재기 → 쪽 나눔 → 렌더가 끝없이 돈다). 글꼴·이미지가 다 온 뒤 다시 재야 하면
- * `key` 를 바꿔 새로 붙인다.
+ * 다시 재는 때는 블록들의 `id`·`section`·`group` 구성이나 장 규격(`pageWidth`·`pageHeight`·`margin`)이 바뀔 때,
+ * 처음 그릴 때(숨겨져 있다 보이게 될 때 포함), 그리고 **블록의 높이가 바뀔 때**다 — 재기 사본 블록마다
+ * ResizeObserver 를 걸어 `content` 가 바뀌어 높이가 달라지거나 글꼴·이미지가 늦게 와 커지면 다시 나눈다
+ * (여러 번 울려도 다음 틀(rAF)에 한 번). 렌더마다 재지는 않는다(재기 → 쪽 나눔 → 렌더가 끝없이 돈다).
+ * ResizeObserver 가 없는 환경에서는 높이만 바뀐 것은 못 알아채므로 `key` 를 바꿔 새로 붙인다.
+ *
+ * 쪽 나눔: 블록을 순서대로 채우다 넘치면 다음 장. `group` 이 남은 자리에 안 들어가면 통째로 다음 장으로 가는데,
+ * 묶음이 **한 장보다 크면** 어차피 쪼개야 하므로 앞 장에 남은 자리부터 이어 채운다.
  *
  * 화면에 그린 쪽 수는 다른 도구로 만든 PDF 와 다를 수 있다. 같은 내용을 그리는
  * 높이가 서로 달라서인데, 쪽 수까지 맞춰야 하면 양쪽 본문 높이를 견줘야 한다.

package/dist/packages/core/src/components/Report/ReportDocument.js

@@ -14,12 +14,14 @@ const DEFAULT_PAGE_LABEL = (page, total) => `${page} / ${total}`;
  * 순서대로 채우다 넘치면 다음 장으로 넘긴다. 장마다 머리(제목 + 로고)와
  * 바닥(로고·저작권 + 쪽 번호)이 반복된다.
  *
- * 재는 방식이라 글꼴이 늦게 오거나 이미지가 나중에 뜨면 쪽이 밀릴 수 있다.
- * 다시 재는 때는 블록들의 `id`·`section`·`group` 구성이나 장 규격(`pageWidth`·`pageHeight`·`margin`)이 바뀔 때와
- * 처음 그릴 때(숨겨져 있다 보이게 될 때 포함)뿐이다 —
- * 같은 구성으로 다시 그리거나 `content` 만 바뀌어서는 다시 재지 않는다(렌더마다 재면
- * 재기 → 쪽 나눔 → 렌더가 끝없이 돈다). 글꼴·이미지가 다 온 뒤 다시 재야 하면
- * `key` 를 바꿔 새로 붙인다.
+ * 다시 재는 때는 블록들의 `id`·`section`·`group` 구성이나 장 규격(`pageWidth`·`pageHeight`·`margin`)이 바뀔 때,
+ * 처음 그릴 때(숨겨져 있다 보이게 될 때 포함), 그리고 **블록의 높이가 바뀔 때**다 — 재기 사본 블록마다
+ * ResizeObserver 를 걸어 `content` 가 바뀌어 높이가 달라지거나 글꼴·이미지가 늦게 와 커지면 다시 나눈다
+ * (여러 번 울려도 다음 틀(rAF)에 한 번). 렌더마다 재지는 않는다(재기 → 쪽 나눔 → 렌더가 끝없이 돈다).
+ * ResizeObserver 가 없는 환경에서는 높이만 바뀐 것은 못 알아채므로 `key` 를 바꿔 새로 붙인다.
+ *
+ * 쪽 나눔: 블록을 순서대로 채우다 넘치면 다음 장. `group` 이 남은 자리에 안 들어가면 통째로 다음 장으로 가는데,
+ * 묶음이 **한 장보다 크면** 어차피 쪼개야 하므로 앞 장에 남은 자리부터 이어 채운다.
  *
  * 화면에 그린 쪽 수는 다른 도구로 만든 PDF 와 다를 수 있다. 같은 내용을 그리는
  * 높이가 서로 달라서인데, 쪽 수까지 맞춰야 하면 양쪽 본문 높이를 견줘야 한다.
@@ -88,6 +90,28 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         ro.observe(ruler);
         return () => ro.disconnect();
     }, []);
+    /* **내용 높이가 바뀌면 다시 잰다** — 짜임(id·section·group)이 같아도 메모가 길어지거나 글꼴·이미지가 늦게 와 블록 높이가 달라지면
+       예전 나눔 그대로 장이 넘쳤다(소리방향성은 id 에 메모 길이를 넣어 짜임을 바꾸는 우회를 썼다 — 그 길도 그대로 된다).
+       재기 사본 블록마다 ResizeObserver 를 걸고, 여러 번 울려도 다시 나눔은 rAF 한 번으로 모은다. 없는 환경에서는 지금처럼. */
+    const [다시재기, set다시재기] = useState(0);
+    useEffect(() => {
+        const el = measureRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        let 틀 = null;
+        const 미루기 = typeof requestAnimationFrame === 'function'
+            ? (f) => requestAnimationFrame(f)
+            : (f) => setTimeout(f, 16);
+        const 거두기 = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
+        const ro = new ResizeObserver(() => {
+            if (틀 != null)
+                return;
+            틀 = 미루기(() => { 틀 = null; set다시재기((n) => n + 1); });
+        });
+        Array.from(el.children).forEach((c) => ro.observe(c));
+        return () => { ro.disconnect(); if (틀 != null)
+            거두기(틀); };
+    }, [shape]);
     useLayoutEffect(() => {
         const el = measureRef.current;
         const ruler = rulerRef.current;
@@ -134,12 +158,9 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
             // 갈래가 바뀌면 새 장에서 시작한다.
             if (cur.length && blocks[cur[0]].section !== blocks[grp[0]].section)
                 flush();
-            // 덩어리 전체가 남은 자리에 안 들어가면 통째로 다음 장으로.
-            // 소수 높이는 배율(transform: scale) 안에서 요소마다 1/64px 안팎 오차가 붙는다 — 딱 찬 결과지가 두 장이 되지 않게 조금 봐준다
-            if (cur.length && used + groupH > budget + 0.01)
-                flush();
             if (groupH > budget) {
-                // 덩어리 하나가 한 장보다 크면 쪼갤 수밖에 없다.
+                /* 덩어리 하나가 한 장보다 크면 쪼갤 수밖에 없다 — 그러니 **앞 장에 남은 자리부터** 이어 채운다. 전에는 먼저 새 장으로
+                   넘긴 뒤 쪼개, 앞 장 아래가 비고 장이 하나 더 생겼다. */
                 grp.forEach((i) => {
                     if (cur.length && used + heights[i] > budget + 0.01)
                         flush();
@@ -148,16 +169,21 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
                 });
             }
             else {
+                // 덩어리 전체가 남은 자리에 안 들어가면 통째로 다음 장으로.
+                // 소수 높이는 배율(transform: scale) 안에서 요소마다 1/64px 안팎 오차가 붙는다 — 딱 찬 결과지가 두 장이 되지 않게 조금 봐준다
+                if (cur.length && used + groupH > budget + 0.01)
+                    flush();
                 grp.forEach((i) => cur.push(i));
                 used += groupH;
             }
         });
         flush();
-        setMeasured({ shape, pages: packed });
+        /* 같은 나눔이면 상태를 그대로 둔다 — 다시 재기(ResizeObserver 첫 울림 등)마다 새 객체로 렌더가 한 번 더 도는 것을 막는다 */
+        setMeasured((앞) => (앞 && 앞.shape === shape && JSON.stringify(앞.pages) === JSON.stringify(packed) ? 앞 : { shape, pages: packed }));
         // blocks 는 위 shape 로 대신 본다.
         // eslint-disable-next-line react-hooks/exhaustive-deps
         // 장 규격이 바뀌면 글이 다시 흘러 블록 높이가 달라진다 — 자(세로) 높이는 그대로라 자크기만으로는 다시 재지 않아 장이 넘쳤다
-    }, [shape, 자크기, pageWidth, pageHeight, margin]);
+    }, [shape, 자크기, pageWidth, pageHeight, margin, 다시재기]);
     /* 번들러마다 SVG import 결과가 다르다 — Vite 는 문자열, Next 는 `{ src }` 객체다.
        문자열만 보면 Next 앱에서 fallback 경로(`/logo/...`)로 떨어져 404 가 난다
        (kscan 결과지의 바닥 로고가 실제로 깨졌다). 둘 다 받는다. */

package/dist/packages/core/src/components/RingChart.d.ts

@@ -35,7 +35,7 @@ export interface RingChartProps {
     strokeWidth?: number;
     /** 중앙 숫자 아래 라벨 (기본: "%") */
     label?: string;
-    /** 중앙 텍스트(숫자+라벨) 전체 숨김 (기본: false) */
+    /** 중앙 텍스트(숫자+라벨) 전체 숨김 (기본: false — 단 `titleKey` 섹션의 `size="small"` 은 기본 숨김이고, `false` 를 명시하면 그린다) */
     hideCenter?: boolean;
     /** 중앙 숫자는 유지하고 아래 라벨("%")만 숨김 (기본: false) */
     hideLabel?: boolean;

package/dist/packages/core/src/components/RingChart.js

@@ -64,5 +64,5 @@ export default function RingChart({ titleKey, headRight, icon, showTotal, totalL
         .filter(Boolean).join(' ') || undefined;
     // StatChart(.manager-stat-card__icon)와 동일한 톤 — headRight 자리에 렌더(둘 중 하나만 사용)
     const iconNode = icon && (_jsx("span", { className: "chart-section-icon", children: _jsx(Icon, { icon: icon, className: "chart-section-icon-inner" }) }));
-    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: isSmall || ringProps.hideCenter }) })) }));
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: ringProps.hideCenter ?? isSmall }) })) }));
 }

package/dist/packages/core/src/components/SegmentedControl.d.ts

@@ -11,6 +11,10 @@ export type SegmentedOption = {
 export interface SegmentedControlProps {
     options?: SegmentedOption[];
     value?: string;
+    /**
+     * 누른 칸의 key 로 불린다. **이미 고른 칸을 다시 눌러도 부른다**(화살표가 같은 칸에 머물 때도) — 다시 누름을
+     * "새로 고침" 으로 쓰는 자리가 있어 지금 동작을 지킨다. Dropdown·Rating·Tabs 는 값이 바뀔 때만 부른다.
+     */
     onChange?: (v: string) => void;
     className?: string;
     /** 버튼 높이 — Button과 동일한 숫자 size (32 / 40 / 48) */

package/dist/packages/core/src/components/SegmentedControl.js

@@ -54,8 +54,16 @@ export default function SegmentedControl(props) {
         }
         e.preventDefault();
     };
+    const 이름 = (opt) => {
+        const 글자 = (v) => typeof v === 'string' || typeof v === 'number';
+        if (!글자(opt.label) || opt.count == null || opt.count === false || !글자(opt.count))
+            return undefined;
+        return `${opt.label}, ${opt.count}`;
+    };
     /* Tab 자리를 받을 한 칸 — 고른 것이 있으면 그것, 없으면 고를 수 있는 첫 칸 */
     const 탭자리 = 고를수있는.some((o) => o.key === value) ? value : 고를수있는[0]?.key;
-    return (_jsx("div", { ref: 그룹, onKeyDown: 키, className: cx('segmented-control', `segmented-control--${shape}`, `segmented-control--${size}`, fullWidth && 'segmented-control--full', !useBG && 'segmented-control--no-bg', className), role: "radiogroup", "aria-label": ariaLabel ?? t('segmentedControl.ariaLabel', '선택 탭'), children: options.map((opt) => (_jsx(Button, { htmlType: "button", role: "radio", "aria-checked": opt.key === value, "data-segkey": opt.key, tabIndex: opt.key === 탭자리 ? 0 : -1, label: opt.label, count: opt.count, disabled: opt.disabled, className: opt.key === value ? 'is-selected' : '', onClick: () => { if (!opt.disabled)
+    return (_jsx("div", { ref: 그룹, onKeyDown: 키, className: cx('segmented-control', `segmented-control--${shape}`, `segmented-control--${size}`, fullWidth && 'segmented-control--full', !useBG && 'segmented-control--no-bg', className), role: "radiogroup", "aria-label": ariaLabel ?? t('segmentedControl.ariaLabel', '선택 탭'), children: options.map((opt) => (_jsx(Button, { htmlType: "button", role: "radio", "aria-checked": opt.key === value, "data-segkey": opt.key, tabIndex: opt.key === 탭자리 ? 0 : -1, label: opt.label, count: opt.count, 
+            /* 수를 이름에 넣는다 — 글자 이름표는 단추의 aria-label 이 되어 내용(수)이 이름 계산에서 빠졌다("전체" 로만 읽힘) */
+            ariaLabel: 이름(opt), disabled: opt.disabled, className: opt.key === value ? 'is-selected' : '', onClick: () => { if (!opt.disabled)
                 onChange(opt.key); }, size: size, shape: shape, useBorder: false, useBG: false }, opt.key))) }));
 }

package/dist/packages/core/src/components/ShortcutBadge.css

@@ -39,7 +39,22 @@
   bottom: 0;
   transform: translate(25%, 25%) scale(var(--shortcut-badge-scale, 1));
 }
-/* static — 흐름 안에 배치(별도 규칙 없음, position: static 기본). */
+/* static — 흐름 안에 배치(position: static 기본). 배율은 transform 이 아니라 **크기**에 곱한다 — 흐름 안에서 scale() 을 걸면
+   그리는 모양만 커지고 차지하는 자리는 그대로라 옆 글자를 덮었다. 전에는 static 에 배율 규칙이 아예 없어 scale 이 안 먹었다. */
+.shortcut-badge--static,
+.shortcut-badge--static .shortcut-badge__group {
+  gap: calc(4px * var(--shortcut-badge-scale, 1));
+}
+.shortcut-badge--static .shortcut-badge__key {
+  min-width: calc(24px * var(--shortcut-badge-scale, 1));
+  min-height: calc(24px * var(--shortcut-badge-scale, 1));
+  padding: 0 calc(5px * var(--shortcut-badge-scale, 1));
+  border-width: calc(2px * var(--shortcut-badge-scale, 1));
+  font-size: calc(11px * var(--shortcut-badge-scale, 1));
+}
+.shortcut-badge--static .shortcut-badge__plus {
+  font-size: calc(11px * var(--shortcut-badge-scale, 1));
+}
 
 .shortcut-badge__group {
   display: inline-flex;

package/dist/packages/core/src/components/ShortcutBadge.d.ts

@@ -19,6 +19,7 @@ export interface ShortcutBadgeProps {
      * **`transform` 으로 키우지 말 것** — 배지가 모서리에 걸치는 `translate` 와 같은
      * 속성이라 한쪽이 다른 쪽을 통째로 지운다. 이 prop 은 `--shortcut-badge-scale` 로
      * 내려가고, 자리와 배율은 CSS 한 곳에서 합쳐 적힌다.
+     * `anchor="static"` 에서는 키캡 크기·글자에 곱해 흐름 안에서 차지하는 자리도 함께 커진다.
      */
     scale?: number;
     className?: string;

package/dist/packages/core/src/components/SideNav.js

@@ -6,6 +6,7 @@ import Button from './Button';
 import Badge from './Badge';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isSafeOpenHref } from '../utils/safeHref';
 /** 단추 이름에 개수를 붙인다 — 뱃지는 aria-hidden 이라 개수는 이름으로만 전해진다(BottomNav 와 같은 문구). */
 function nameWithCount(t, label, count) {
     return count && count > 0 ? t('nav.badgeLabel', { label, count, defaultValue: '{{label}}, {{count}}개' }) : label;
@@ -67,7 +68,9 @@ export default function SideNav(props) {
                                     if (it.disabled)
                                         return;
                                     if (it.href) {
-                                        window.open(it.href, '_blank', 'noopener,noreferrer');
+                                        // http(s)·상대 경로·mailto·tel 만 연다 — javascript: 같은 주소가 그대로 열렸다
+                                        if (isSafeOpenHref(it.href))
+                                            window.open(it.href, '_blank', 'noopener,noreferrer');
                                         if (fromPointer) {
                                             try {
                                                 btnEl?.blur();
@@ -104,7 +107,10 @@ export default function SideNav(props) {
                                     const headerEl = document.querySelector('.header');
                                     if (headerEl) {
                                         const supportsMatches = typeof headerEl.matches === 'function';
-                                        const isHovered = supportsMatches ? headerEl.matches(':hover') : false;
+                                        /* :hover 는 **호버가 되는 기기에서만** 믿는다 — iPad 는 톡한 요소에 :hover 가 붙어 남아, "마우스가 레일 위에 있다" 로
+                                           읽혀 강제 접힘을 건너뛰었다(메뉴를 골라도 레일이 펼친 채 본문을 가림) */
+                                        const 호버기기 = window.matchMedia('(hover: hover)').matches;
+                                        const isHovered = 호버기기 && supportsMatches ? headerEl.matches(':hover') : false;
                                         if (!isHovered) {
                                             headerEl.classList.add('header--force-collapsed');
                                             const onEnter = () => {

package/dist/packages/core/src/components/SummaryStrip.d.ts

@@ -38,7 +38,7 @@ export interface SummaryStripProps {
 /**
  * 화면 위쪽에 놓이는 한 줄 요약 — "지금 다루고 있는 대상"을 이름표와 값으로 늘어놓는다.
  *
- * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다.
+ * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다 — 글자·수 값이면 `title` 로 전체 값을 단다.
  *
  * 값의 서식은 부르는 쪽이 정해 넘긴다 — 빈 값을 `-` 로 적을지, 날짜를 어떻게 쓸지,
  * 여러 값을 한 칸에 묶을지(`오른손 / NC / 연구실 내`)는 화면마다 다르다.

package/dist/packages/core/src/components/SummaryStrip.js

@@ -4,7 +4,7 @@ import './SummaryStrip.css';
 /**
  * 화면 위쪽에 놓이는 한 줄 요약 — "지금 다루고 있는 대상"을 이름표와 값으로 늘어놓는다.
  *
- * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다.
+ * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다 — 글자·수 값이면 `title` 로 전체 값을 단다.
  *
  * 값의 서식은 부르는 쪽이 정해 넘긴다 — 빈 값을 `-` 로 적을지, 날짜를 어떻게 쓸지,
  * 여러 값을 한 칸에 묶을지(`오른손 / NC / 연구실 내`)는 화면마다 다르다.
@@ -30,5 +30,5 @@ import './SummaryStrip.css';
  */
 export default function SummaryStrip({ items, actions, columns, flat = false, className, style, }) {
     const cols = columns ?? items.length;
-    return (_jsx("section", { className: cx('summary-strip', flat && 'summary-strip--flat', className), style: { ['--summary-strip-cols']: String(cols), ...style }, children: _jsxs("div", { className: "summary-strip__row", children: [_jsx("div", { className: "summary-strip__items", children: items.map((item, i) => (_jsxs("div", { className: "summary-strip__item", children: [_jsx("p", { className: "summary-strip__label caption-1", children: item.label }), _jsx("p", { className: "summary-strip__value body-3b", children: item.value })] }, i))) }), actions && _jsx("div", { className: "summary-strip__actions", children: actions })] }) }));
+    return (_jsx("section", { className: cx('summary-strip', flat && 'summary-strip--flat', className), style: { ['--summary-strip-cols']: String(cols), ...style }, children: _jsxs("div", { className: "summary-strip__row", children: [_jsx("div", { className: "summary-strip__items", children: items.map((item, i) => (_jsxs("div", { className: "summary-strip__item", children: [_jsx("p", { className: "summary-strip__label caption-1", children: item.label }), _jsx("p", { className: "summary-strip__value body-3b", title: typeof item.value === 'string' || typeof item.value === 'number' ? String(item.value) : undefined, children: item.value })] }, i))) }), actions && _jsx("div", { className: "summary-strip__actions", children: actions })] }) }));
 }

package/dist/packages/core/src/components/Table.d.ts

@@ -108,7 +108,7 @@ export type TableProps<T extends {
     onDrop?: (e: DragEvent<HTMLDivElement>) => void;
     /** 펼쳐진 행에 렌더할 콘텐츠. expandedId와 함께 사용 */
     renderExpandedRow?: (item: T) => ReactNode;
-    /** 현재 펼쳐진 행의 id */
+    /** 현재 펼쳐진 행의 id(여럿이면 Set). 글자로 견준다 — '5' 와 5 는 같은 줄. */
     expandedId?: string | number | Set<string | number> | null;
 };
 /** @public */

package/dist/packages/core/src/components/Table.js

@@ -326,7 +326,10 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
                                             ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), 폭조절 && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: "chevrons-left-right-ellipsis", ariaLabel: t('table.resetColumns', '칸 너비 초기화'), showTooltipInfo: t('table.resetColumns', '칸 너비 초기화'), className: "table-fields__reset", onClick: 자동맞춤 }))] }), _jsx("div", { className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading" })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", children: empty })) : items.map((item, idx) => {
                                 const isDragging = draggingId != null && item.id === draggingId;
                                 const 눌림 = !!onRowClick && (isRowClickable ? isRowClickable(item) : true);
-                                const isExpanded = expandedId != null && (expandedId instanceof Set ? expandedId.has(item.id) : item.id === expandedId);
+                                /* 글자로 견준다 — URL·폼에서 온 '5' 와 자료의 5 가 같은 줄인데 `===` 로는 안 펴졌다 */
+                                const isExpanded = expandedId != null && item.id != null && (expandedId instanceof Set
+                                    ? expandedId.has(item.id) || [...expandedId].some(x => String(x) === String(item.id))
+                                    : String(item.id) === String(expandedId));
                                 return (_jsx(TableRow
                                 // 타입까지 열쇠에 — id 없는 줄(idx 0)과 id:0, 1 과 '1' 이 같은 열쇠가 되어 목록을 바꾼 뒤 옛 줄이 남았다
                                 , { className: `${눌림 ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 

package/dist/packages/core/src/components/Tabs.d.ts

@@ -11,6 +11,7 @@ export type TabItem = {
 export interface TabsProps {
     items?: TabItem[];
     value?: string;
+    /** 고른 탭의 key 로 불린다. **값이 바뀔 때만** — 지금 탭을 다시 누르거나 화살표가 지금 탭에 머물면 부르지 않는다. */
     onChange?: (key: string) => void;
     className?: string;
     /** 탭 버튼 높이 — SegmentedControl과 동일 체계 (32 / 40 / 48) */

package/dist/packages/core/src/components/Tabs.js

@@ -63,5 +63,8 @@ export default function Tabs({ items = [], value, onChange, className = '', size
             focusTabAt(tabs.length - 1, tabs);
     };
     const activeItem = items.find(item => item.key === activeKey);
-    return (_jsxs("div", { className: `tabs ${className}`.trim(), children: [_jsx("div", { ref: listRef, className: `tabs__list tabs__list--${size}`, role: "tablist", "aria-label": t('tabs.ariaLabel', '탭'), children: items.map(item => (_jsx("button", { id: `tabs__tab-${uid}-${item.key}`, type: "button", role: "tab", "aria-selected": item.key === activeKey, "aria-controls": `tabs__panel-${uid}-${item.key}`, disabled: item.disabled, tabIndex: item.key === 탭자리키 ? 0 : -1, className: `tabs__tab body-2${item.key === activeKey ? ' tabs__tab--active' : ''}`, onClick: () => onChange?.(item.key), onKeyDown: handleKeyDown, children: item.label }, item.key))) }), activeItem && (_jsx("div", { id: `tabs__panel-${uid}-${activeItem.key}`, role: "tabpanel", "aria-labelledby": `tabs__tab-${uid}-${activeItem.key}`, tabIndex: 0, className: "tabs__panel", children: activeItem.panel }, activeItem.key))] }));
+    return (_jsxs("div", { className: `tabs ${className}`.trim(), children: [_jsx("div", { ref: listRef, className: `tabs__list tabs__list--${size}`, role: "tablist", "aria-label": t('tabs.ariaLabel', '탭'), children: items.map(item => (_jsx("button", { id: `tabs__tab-${uid}-${item.key}`, type: "button", role: "tab", "aria-selected": item.key === activeKey, "aria-controls": `tabs__panel-${uid}-${item.key}`, disabled: item.disabled, tabIndex: item.key === 탭자리키 ? 0 : -1, className: `tabs__tab body-2${item.key === activeKey ? ' tabs__tab--active' : ''}`, 
+                    /* 값이 바뀔 때만 onChange(2026-09-15 결정) — 지금 탭을 다시 누르면 아무 일도 없다 */
+                    onClick: () => { if (item.key !== value)
+                        onChange?.(item.key); }, onKeyDown: handleKeyDown, children: item.label }, item.key))) }), activeItem && (_jsx("div", { id: `tabs__panel-${uid}-${activeItem.key}`, role: "tabpanel", "aria-labelledby": `tabs__tab-${uid}-${activeItem.key}`, tabIndex: 0, className: "tabs__panel", children: activeItem.panel }, activeItem.key))] }));
 }

package/dist/packages/core/src/components/TextField.css

@@ -193,13 +193,12 @@
   margin-right: 10px;
 }
 
-/* 자동완성 드롭다운 (suggestions) */
+/* 자동완성 드롭다운 (suggestions) — body 로 포털되어 칸 좌표에 fixed 로 뜬다(TextField.tsx 가 left·top·width·z-index 를 준다).
+   팝업 본문의 overflow 에 잘리지 않게 칸 곁이 아니라 body 끝에 둔다. */
 .text-field__suggestions {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 100%;
-  margin-top: var(--spacing-xs);
+  position: fixed;
+  box-sizing: border-box;
+  margin: 0;
   background: var(--color-white);
   border: 1px solid var(--color-whiteLine);
   box-shadow: var(--shadow-dropdown);

package/dist/packages/core/src/components/TextField.js

@@ -4,7 +4,9 @@ import { cx } from '../utils/cx';
 import { useId, useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react';
 import { devWarnOnce } from '../utils/devWarn';
 import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
 import Icon from './Icon';
+import { anchoredMenuZIndex } from '../hooks/useAnchoredMenu';
 import Button from './Button';
 import { useComboboxSuggestions } from './useComboboxSuggestions';
 import './TextField.css';
@@ -43,6 +45,44 @@ export default function TextField(props) {
     });
     /* 후보 목록이 지금 DOM 에 있는가 — 아래 렌더 조건과 **같은 식**이어야 한다 */
     const 목록떴나 = !!suggestions && combobox.open && combobox.filtered.length > 0;
+    /* 후보 목록은 **body 로 빼서** 칸 좌표에 fixed 로 띄운다 — 칸 아래 absolute 로 두었더니 팝업 본문(overflow: auto)에
+       잘려 창 아래쪽 칸(훈련 묶음의 그룹 이름)에서 후보가 보이지 않았다. Dropdown 메뉴와 같은 방식(층·data-tooltip-ignore). */
+    const rootRef = useRef(null);
+    const [listStyle, setListStyle] = useState(null);
+    const 목록자리재기 = useCallback(() => {
+        const root = rootRef.current;
+        if (!root || typeof window === 'undefined')
+            return;
+        const r = root.getBoundingClientRect();
+        const 최대높이 = 220 + 8 + 2; // max-height + padding + 테두리
+        const 아래 = window.innerHeight - r.bottom;
+        const 위로 = 아래 < 최대높이 + 8 && r.top > 최대높이 + 8;
+        setListStyle({
+            position: 'fixed',
+            left: r.left,
+            width: r.width,
+            ...(위로 ? { bottom: window.innerHeight - r.top + 8 } : { top: r.bottom + 8 }),
+            zIndex: anchoredMenuZIndex(root),
+        });
+    }, []);
+    useIsoLayoutEffect(() => {
+        if (!목록떴나)
+            return;
+        목록자리재기();
+        /* 굴리거나 창 크기가 바뀌면 칸을 따라간다 — 목록 안을 굴리는 것은 무시 */
+        const 굴림 = (e) => {
+            const t = e.target;
+            if (t && t.nodeType === 1 && t.closest?.('.text-field__suggestions'))
+                return;
+            목록자리재기();
+        };
+        window.addEventListener('scroll', 굴림, true);
+        window.addEventListener('resize', 목록자리재기);
+        return () => {
+            window.removeEventListener('scroll', 굴림, true);
+            window.removeEventListener('resize', 목록자리재기);
+        };
+    }, [목록떴나, 목록자리재기]);
     // 외부 inputRef + 내부 autoRef 동시 연결 — 외부에서 전달받은 ref 객체(.current)에 노드를 채우는
     // React의 표준 ref 병합/전달(forwarding) 패턴이며, 이 외에 구현할 방법이 없다
     /* eslint-disable react-hooks/immutability */
@@ -146,6 +186,9 @@ export default function TextField(props) {
                 });
             }
         },
+        /* 조합 중 중간값('삭')에서 후보 목록이 깜빡이지 않게 — 훅이 조합 중에는 직전 목록을 둔다 */
+        onCompositionStart: suggestions ? combobox.handleCompositionStart : undefined,
+        onCompositionEnd: suggestions ? combobox.handleCompositionEnd : undefined,
         onFocus: ((e) => {
             onFocus?.(e);
             if (suggestions)
@@ -189,7 +232,7 @@ export default function TextField(props) {
     // 값이 있으면(:placeholder-shown 해제) CSS로 숨긴다.
     const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!placeholder;
     const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: placeholder }))] }));
-    return (_jsxs("div", { className: cls, children: [label && (_jsxs("label", { htmlFor: inputId, className: "text-field__label caption-1", children: [label, required && _jsx("span", { className: "text-field__required", children: "*" })] })), _jsxs("div", { className: "text-field__wrap", children: [leftIcon && (_jsx("span", { className: "text-field__icon text-field__icon--left", children: _jsx(Icon, { icon: leftIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) })), renderInputArea(), maxLength != null && showCount && (_jsxs("span", { className: `text-field__count caption-2${isOver ? ' text-field__count--over' : ''}`, children: [len, "/", maxLength] })), showClear && (_jsx(Button, { size: 24, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, className: "text-field__clear", ariaLabel: t('textField.clearAriaLabel', '입력값 지우기'), 
+    return (_jsxs("div", { ref: rootRef, className: cls, children: [label && (_jsxs("label", { htmlFor: inputId, className: "text-field__label caption-1", children: [label, required && _jsx("span", { className: "text-field__required", children: "*" })] })), _jsxs("div", { className: "text-field__wrap", children: [leftIcon && (_jsx("span", { className: "text-field__icon text-field__icon--left", children: _jsx(Icon, { icon: leftIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) })), renderInputArea(), maxLength != null && showCount && (_jsxs("span", { className: `text-field__count caption-2${isOver ? ' text-field__count--over' : ''}`, children: [len, "/", maxLength] })), showClear && (_jsx(Button, { size: 24, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, className: "text-field__clear", ariaLabel: t('textField.clearAriaLabel', '입력값 지우기'), 
                         // 폼 안에서 쓰일 때 기본값(submit)으로 눌려 폼이 제출되지 않도록.
                         htmlType: "button", 
                         // mousedown 은 포커스가 입력에서 떠나는 것만 막는다(preventDefault 는 click 을 막지 않는다).
@@ -204,10 +247,10 @@ export default function TextField(props) {
                                 setInnerLen(0);
                             }
                             onChange?.('');
-                        }, tabIndex: -1 })), rightIcon && !showClear && (_jsx("span", { className: "text-field__icon text-field__icon--right", children: _jsx(Icon, { icon: rightIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) }))] }), suggestions && combobox.open && combobox.filtered.length > 0 && (_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
+                        }, tabIndex: -1 })), rightIcon && !showClear && (_jsx("span", { className: "text-field__icon text-field__icon--right", children: _jsx(Icon, { icon: rightIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) }))] }), 목록떴나 && (typeof document === 'undefined' ? null : createPortal(_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", style: listStyle ?? { position: 'fixed', visibility: 'hidden' }, "data-tooltip-ignore": true, children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
                     // 선택은 click 에서 한다. onMouseDown 만 두면 마우스로는 눌리지만 스크린리더가
                     // 이 option 을 활성화할 때는 click 만 발생해 아무 일도 일어나지 않는다.
                     // mousedown 에서는 기본 동작(포커스 이동 → 입력 blur)을 막아, click 이 도달하기
                     // 전에 목록이 닫히지 않게 한다 — blur 쪽 120ms 딜레이에 기대지 않아도 된다.
-                    onMouseDown: e => e.preventDefault(), onClick: () => { combobox.handleSelect(s); autoRef.current?.focus(); }, children: s }, `${s}-${i}`))) })), (helperText || error) && (_jsx("div", { className: "text-field__footer", children: _jsx("span", { id: helperId, className: "text-field__helper caption-1", role: error ? 'alert' : undefined, children: error || helperText }) }))] }));
+                    onMouseDown: e => e.preventDefault(), onClick: () => { combobox.handleSelect(s); autoRef.current?.focus(); }, children: s }, `${s}-${i}`))) }), document.body)), (helperText || error) && (_jsx("div", { className: "text-field__footer", children: _jsx("span", { id: helperId, className: "text-field__helper caption-1", role: error ? 'alert' : undefined, children: error || helperText }) }))] }));
 }