@ihabdevteam/core 0.184.0 → 0.186.0

package/dist/ihabdevteam-core.d.ts

@@ -809,6 +809,12 @@ export declare interface ButtonProps {
      * 크기. 숫자는 CSS 의 크기 사다리(.button24 … .button72)와 짝을 이룬다 — **사다리에
      * 없는 숫자를 넣으면 그 버튼은 크기·모서리 규칙을 하나도 못 받는다.**
      *
+     * **숫자 size 는 좁은 화면에서 한 급씩 줄어든다.** 1024px 이하에서 56→50 · 48→44 · 40→36 · 32→30,
+     * 768px 이하에서 56→46 · 48→40 · 40→34 · **32→28** 이다. `'Keyboard'`(32px)·`'Word'`(72px) 는
+     * **줄어들지 않는다** — 그 둘에는 반응형 규칙이 없다. 그래서 폰에서 `size={32}` 와 `size="Keyboard"` 를
+     * 한 줄에 세우면 28 과 32 로 4px 어긋난다(말귀 '표 설정' 패널 실측 2026-09-22). 나란히 세워야 하면
+     * 양쪽 다 숫자 size 를 쓰거나 양쪽 다 Keyboard 를 쓴다.
+     *
      * 목록이 사실과 두 군데 어긋나 있었다. 72 는 CSS 에 있는데 목록에 없었고, 52 는
      * 목록에도 CSS 에도 없는데 BottomNav 가 쓰고 있었다(그쪽은 자체 클래스가 !important
      * 로 크기를 다시 잡아 겉으로는 멀쩡했다). 둘 다 사실에 맞춘다 — 52 는 CSS 에 칸을
@@ -1600,7 +1606,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.184.0";
+export declare const CORE_VERSION = "0.186.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2734,7 +2740,7 @@ export declare function hasStructureContrast(A: Decomp, B: Decomp): boolean;
  *
  * @public
  */
-export declare function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange, scrollContainer }: {
+export declare function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, onFeedback, appMode, onAppModeChange, scrollContainer }: {
     activeKey?: string | null;
     onChange?: (key?: string) => void;
     /** 지금 모드의 내비 항목. 데스크톱은 SideNav, 모바일은 BottomNav 가 이 목록을 그린다. */
@@ -2752,6 +2758,8 @@ export declare function Header({ activeKey, onChange, items, malgwiItems: _malgw
     onAccount?: () => void;
     onSetting?: () => void;
     onHelp?: () => void;
+    /** 주면 도움말과 계정 **사이** 에 '버그신고' 를 그린다 — 냅 바닥과 모바일 '…' 메뉴 둘 다. */
+    onFeedback?: () => void;
     appMode?: 'malgwi' | 'manager';
     onAppModeChange?: (mode: 'malgwi' | 'manager') => void;
     /**
@@ -5878,6 +5886,11 @@ export declare interface SegmentedControlProps {
     /** 버튼 높이 — Button 과 같은 숫자 size (24 / 32 / 40 / 48). **기본 40.** **겉높이가 곧 size 다**(0.159.0 부터 판 여백 없음) —
      *  옆에 `Button size={32}` 를 세우면 셈 없이 나란히 선다.
      *
+     *  **다만 768px 이하에서는 숫자 size 가 한 급 줄어든다**(Button 의 반응형 사다리: 48→40 · 40→34 · **32→28**; 1024px 이하에서는 32→30).
+     *  고르개는 그 Button 을 그대로 쓰므로 함께 줄어든다. 그래서 폰에서 `size={32}` 는 **28px** 로 선다.
+     *  같은 줄에 `size="Keyboard"`(32px 고정, 줄어들지 않는다) 단추를 세우면 폰에서만 4px 어긋난다 —
+     *  나란히 세워야 하면 양쪽 다 숫자 size 를 쓰거나 양쪽 다 Keyboard 를 쓴다(말귀 '표 설정' 패널 실측 2026-09-22).
+     *
      *  기본이 48 이던 것을 40 으로 내렸다(사용자 지시 2026-09-21). 코어가 제 안에서 세우는 고르개는 이미 **전부 40**
      *  이었고(`Toolbar`·`FilterPanel`·`BarChart`·`PanelRow`…), 옆에 서는 `Dropdown`·`TextField` 도 40 이다 —
      *  기본값만 혼자 48 이라 안 주고 쓴 자리가 한 급 크게 섰다. */
@@ -6082,6 +6095,8 @@ export declare interface SideNavProps {
     onAccount?: () => void;
     onSetting?: () => void;
     onHelp?: () => void;
+    /** 주면 도움말과 계정 사이에 '버그신고' 를 그린다. 안 주면 그 자리가 없다(`onDebug` 와 같은 결). */
+    onFeedback?: () => void;
     /** 현재 앱 모드 ('malgwi' | 'manager') */
     appMode?: 'malgwi' | 'manager';
     /** 앱 모드 전환 콜백 */
@@ -6850,9 +6865,12 @@ export declare type TableProps<T extends {
     draggingId?: string | number | null;
     gridTemplateColumns?: string;
     /**
-     * 좁은 화면(767px 이하)에서 쓸 열 틀. 주면 그 폭에서는 이 틀을 쓰고 **끌어 둔 폭(저장값)은 무시**한다 —
-     * 폭 조절 손잡이와 '칸 너비 초기화' 단추도 숨겨, 좁은 화면에서 끈 값이 넓은 화면의 저장값을 덮지 않게 한다.
-     * 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다. 미지정이면 좁은 화면도 넓은 화면과 같다(기본).
+     * 좁은 화면(767px 이하)에서 쓸 열 틀. 주면 그 폭에서는 이 틀을 쓴다.
+     *
+     * **안 줘도 좁은 화면에서는 끌어 둔 폭(저장값)을 안 쓰고, 손잡이와 '칸 너비 초기화' 단추도 숨긴다** —
+     * 이 prop 과 무관하게 늘 그렇다. 그래서 안 주면 좁은 화면에서는 `gridTemplateColumns` 가 그대로 서고,
+     * 그 틀의 `minmax(…px, …fr)` 밑값이 지켜지며 넘치는 만큼은 표가 제 가로 스크롤로 보여 준다.
+     * 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다.
      *
      * 열 틀은 인라인 CSS 변수로 들어가므로 앱 CSS 로는 `!important` 없이 못 이긴다 — 그래서 prop 이다.
      * 숨길 칸은 `renderRow` 의 `className`·`fields[].className` 으로 앱이 가린다.
@@ -7898,7 +7916,7 @@ export declare interface TrainingItemResult {
 export declare const TrainingPagePopup: TrainingPagePopupComponent;
 
 /** @public */
-export declare function TrainingPagePopupBottom({ useNoiseSettingBtn, onSettings, onNext, onResult, stepIndex, stepCount, pageIndex, pageCount, }: TrainingPagePopupBottomProps): JSX.Element;
+export declare function TrainingPagePopupBottom({ useNoiseSettingBtn, onSettings, onNext, onResult, stepIndex, stepCount, pageIndex, pageCount, resultOpen, }: TrainingPagePopupBottomProps): JSX.Element;
 
 /** @public */
 export declare type TrainingPagePopupBottomProps = {
@@ -7907,6 +7925,8 @@ export declare type TrainingPagePopupBottomProps = {
     onNext?: () => void;
     onResult?: () => void;
     stepIndex?: number;
+    /** 결과 창이 떠 있는가 — 뜨는 순간 오디오 미터를 끈다(사용자 지시 2026-09-22). */
+    resultOpen?: boolean;
     stepCount?: number;
     pageIndex?: number;
     /** 쪽 수. 0(쪽이 없음)이어도 '결과보기'(완료) 단추는 보이고, '다음 문제'(쪽 이동)만 숨는다. 기본 1. */

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

@@ -23,43 +23,55 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
     const nextMode = appMode === 'manager' ? 'malgwi' : 'manager';
     const modeIcon = appMode === 'manager' ? 'arrow-left' : 'arrow-right';
     const modeLabel = appMode === 'manager' ? t('nav.modeLabelMalgwi', '말귀') : t('nav.modeLabelManager', '말귀 매니저');
-    // 컨테이너 너비 측정 → 들어갈 수 있는 버튼 수 계산
-    const itemsRef = useRef(null);
-    const [containerWidth, setContainerWidth] = useState(0);
+    /* **항목이 쓸 수 있는 폭은 "…" 유무와 무관한 자리에서 잰다.**
+       예전에는 `.bottom-nav__items` 를 쟀는데, 그 상자는 `flex:1` 이라 "…"(구분선 1px + 52px 칸)가
+       서면 53px 줄어든다 — 즉 **판정 결과가 다시 잰 값을 바꾸는 순환**이었다. 지난 렌더에 "…" 가
+       섰는지 기억해 53 을 되돌리는 보정을 뒀지만, 그 기억이 맞지 않는 길(유틸이 뒤늦게 붙는 화면,
+       화면을 옮기며 항목 수가 바뀌는 길)에서는 보정이 어긋나 **다섯 칸을 249px 상자에 그려 양끝이
+       잘렸다**(말귀 375px /word-training 실측 — 잘린 만큼은 누를 수도 없다). 화면마다 결과가 달랐다.
+       이제 바 전체에서 왼쪽 묶음(모드 단추 + 구분선)만 뺀 값을 쓴다. 이 값은 몇 칸을 그리든,
+       "…" 가 섰든 아니든 같다. 그래서 기억도 보정도 필요 없다. */
+    const rootRef = useRef(null);
+    const [avail, setAvail] = useState(0);
     const itemsLen = items.length;
     useEffect(() => {
-        const el = itemsRef.current;
-        if (!el)
+        const root = rootRef.current;
+        if (!root)
             return;
-        setContainerWidth(el.clientWidth);
+        const 재기 = () => {
+            const cs = typeof getComputedStyle === 'function' ? getComputedStyle(root) : null;
+            const 안쪽 = root.clientWidth - (parseFloat(cs?.paddingLeft ?? '') || 0) - (parseFloat(cs?.paddingRight ?? '') || 0);
+            // 왼쪽 묶음은 항목 수와 무관하게 늘 같은 폭이다(모드 전환을 안 쓰면 아예 없다)
+            const 왼 = root.querySelector('.bottom-nav__left');
+            const 왼구분선 = 왼?.nextElementSibling;
+            const 왼폭 = (왼?.offsetWidth ?? 0)
+                + (왼 && 왼구분선?.classList.contains('bottom-nav__divider') ? 왼구분선.offsetWidth : 0);
+            setAvail(Math.max(0, 안쪽 - 왼폭));
+        };
+        재기();
         // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
         // 그대로 던져 렌더가 통째로 깨진다. 위에서 초기값은 이미 쟀으므로 추적만 포기한다
         // (Popup·CrosswordGame·Tooltip 과 같은 처리).
         if (typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(entries => setContainerWidth(entries[0].contentRect.width));
-        ro.observe(el);
+        const ro = new ResizeObserver(재기);
+        ro.observe(root);
         return () => ro.disconnect();
     }, []);
-    /* 잰 폭은 "…"(구분선 1px + 52px 칸)가 서 있으면 그만큼 줄어든 값이다. 그 폭으로만 판정하면 같은 폭·같은 항목인데 지나온 길에 따라
-       넘침이 달랐다(13개 매니저 메뉴 → 8개 말귀 메뉴로 바꾸면 들어갈 8개 중 하나가 "…" 에 갇힘). 유틸이 없을 때 지난 렌더에 "…" 가
-       서 있었다면(넘침 때문이든 그때의 유틸 때문이든) 그 폭을 되돌려 **"…" 없는 폭** 으로 판정하고, 넘치면 "…" 자리를 뺀 폭으로 센다. */
     const MORE_W = BTN_SIZE + 1;
-    const 더보기섰음Ref = useRef(false);
-    const 온폭 = containerWidth > 0 && moreItems.length === 0 && 더보기섰음Ref.current ? containerWidth + MORE_W : containerWidth;
-    const 다들어감 = itemsLen * (BTN_SIZE + BTN_GAP) - BTN_GAP <= 온폭;
-    // n개 버튼: n*52 + (n-1)*10 <= W → n <= (W + 10) / 62
-    const n = containerWidth <= 0 ? itemsLen
-        : moreItems.length > 0 ? Math.floor((containerWidth + BTN_GAP) / (BTN_SIZE + BTN_GAP))
-            : 다들어감 ? itemsLen
-                : Math.floor((온폭 - MORE_W + BTN_GAP) / (BTN_SIZE + BTN_GAP));
-    const overflow = containerWidth > 0 && n < itemsLen;
+    /** 폭 w 에 들어가는 칸 수 — n칸은 n*52 + (n-1)*10 을 쓰므로 n <= (w + 10) / 62 */
+    const 칸수 = (w) => Math.max(0, Math.floor((w + BTN_GAP) / (BTN_SIZE + BTN_GAP)));
+    const 다들어감 = itemsLen * (BTN_SIZE + BTN_GAP) - BTN_GAP <= avail;
+    const n = avail <= 0 ? itemsLen
+        : (moreItems.length === 0 && 다들어감) ? itemsLen
+            // "…" 가 설 자리를 뺀 폭으로 센다 — 유틸이 있으면 "…" 는 늘 선다
+            : Math.min(itemsLen, 칸수(avail - MORE_W));
+    const overflow = avail > 0 && n < itemsLen;
     const maxVisible = overflow ? n : itemsLen;
     const visibleItems = items.slice(0, maxVisible);
     const hiddenItems = items.slice(maxVisible);
     // 넘친 nav 항목이 있거나 유틸(moreItems)이 있으면 더보기(…) 버튼을 노출
     const showMore = overflow || moreItems.length > 0;
-    useEffect(() => { 더보기섰음Ref.current = showMore; });
     const computeMenuStyle = useCallback((rect, trigger) => ({
         position: 'fixed',
         bottom: window.innerHeight - rect.top + 8,
@@ -114,7 +126,7 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
         }], [hiddenItems, moreItems, activeKey, onChange, handleCloseMore]);
     // "…" 단추 배지 — 메뉴 안에서만 보이는 개수(넘친 항목 + 유틸)를 닫힌 채로도 알린다.
     const moreBadge = [...hiddenItems, ...moreItems].reduce((sum, it) => sum + badgeOf(it.badgeCount), 0);
-    return (_jsxs("nav", { className: "bottom-nav", "aria-label": t('nav.bottomNav', '하단 네비게이션'), children: [onAppModeChange && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__left", children: _jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: modeIcon, ariaLabel: modeLabel, className: "bottom-nav-item", onClick: handleModeChange }) }), _jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" })] })), _jsx("div", { className: "bottom-nav__items", ref: itemsRef, children: visibleItems.map((it, i) => {
+    return (_jsxs("nav", { className: "bottom-nav", ref: rootRef, "aria-label": t('nav.bottomNav', '하단 네비게이션'), children: [onAppModeChange && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__left", children: _jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: modeIcon, ariaLabel: modeLabel, className: "bottom-nav-item", onClick: handleModeChange }) }), _jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" })] })), _jsx("div", { className: "bottom-nav__items", children: visibleItems.map((it, i) => {
                     const count = badgeOf(it.badgeCount);
                     return (
                     // key 는 선택 prop 이다 — 없으면 자리 번호로(형제 key 가 모두 undefined 가 되던 것)

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

@@ -74,8 +74,15 @@
 .calendar-day-header:first-child { color: var(--color-error); }
 .calendar-day-header:last-child  { color: var(--color-main); }
 
+/* **칸은 제 폭을 우기지 않는다.** 예전에는 `min-width: 118px` 이 박혀 있고 그 상한을
+   767px 이하에서만 풀었다. 그런데 칸이 좁아지는 것은 창이 아니라 **담긴 자리**가 정한다 —
+   768px 태블릿에서 카드 안쪽이 555px 이라(1108px 창에서도 707px) 일곱 칸이 850px 를 우겨
+   목·금·토가 조상의 `overflow: hidden` 에 잘려 나갔다(말귀 2026-09-22 실측). 창 기준
+   중단점으로는 못 막는 자리라 상한 자체를 걷는다 — 넓은 화면에서는 `1fr` 이 알아서 118 을 넘는다.
+   칸을 컨테이너로 삼아, 좁아지면 방문 이름표를 '몇 건' 으로 접는다(아래 컨테이너 질의). */
 .calendar-cell {
-  min-width: 118px;
+  min-width: 0;
+  container-type: inline-size;
   min-height: 118px;
   border-radius: var(--radius-s);
   padding: 8px;
@@ -126,6 +133,28 @@
   gap: 4px;
 }
 
+/* 몇 건인지 — **좁은 칸에서만** 선다. 넓은 칸에서는 이름표가 그 자리를 한다. */
+.calendar-cell__visit-count {
+  display: none;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-main);
+}
+.calendar-cell__visit-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+/* 이름표 한 줄("13시 33분 · 지한")이 담기려면 100px 은 있어야 한다 — 그 밑에서는 접는다.
+   창이 아니라 **칸 제 폭**으로 정한다: 같은 창에서도 담긴 카드가 좁으면 칸이 좁아진다.
+   재는 값은 칸의 **안쪽**(여백 8px씩 뺀 값)이라, 118px 짜리 칸이면 102 로 이 문턱을 넘는다. */
+@container (max-width: 96px) {
+  .calendar-cell__badges { display: none; }
+  .calendar-cell__visit-count { display: inline-flex; }
+}
+
 .calendar-visit-badge {
   color: var(--color-main);
   background: var(--color-main-a10);
@@ -235,10 +264,8 @@
     justify-content: center;
   }
 
-  /* 셀 min-width 118px × 7 + gap = 850px라, 좁은 화면에선 격자가 줄어들지 못하고
-     그대로 잘렸다(320px에서 620px가 화면 밖 — 조상이 hidden이라 스크롤도 안 돼
-     토요일 쪽 요일이 **아예 보이지 않았다**). 좁을 땐 상한을 풀어 1fr로 나눠 갖게 한다. */
-  .calendar-cell,
+  /* 칸의 min-width 는 이제 어느 폭에서도 0 이다(위 `.calendar-cell` 주석) — 여기서는
+     요일 머리만 함께 풀고, 좁은 칸의 높이·여백을 줄인다. */
   .calendar-day-header {
     min-width: 0;
   }

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

@@ -83,7 +83,7 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
                                     dragVisitId.current = null;
                                 }
                                 setDragOverDate(null);
-                            } : undefined, children: [_jsx("div", { className: "calendar-cell__number body-3", children: day }), _jsx("div", { className: "calendar-cell__badges", children: dayVisits.map((v, vi) => (_jsxs("div", { draggable: !!onVisitMove, className: `calendar-visit-badge${v.status === 'noVisit' ? ' calendar-visit-badge--no-visit' : v.status === 'scheduled' ? ' calendar-visit-badge--scheduled' : ''}${onVisitClick ? ' calendar-visit-badge--clickable' : ''}${onVisitMove ? ' calendar-visit-badge--draggable' : ''}`, onDragStart: onVisitMove ? (e) => {
+                            } : undefined, children: [_jsx("div", { className: "calendar-cell__number body-3", children: day }), dayVisits.length > 0 && (_jsxs("span", { className: "calendar-cell__visit-count caption-1", "aria-label": t('calendar.visitCount', { count: dayVisits.length, defaultValue: '방문 {{count}}건' }), children: [_jsx("span", { className: "calendar-cell__visit-dot", "aria-hidden": "true" }), dayVisits.length] })), _jsx("div", { className: "calendar-cell__badges", children: dayVisits.map((v, vi) => (_jsxs("div", { draggable: !!onVisitMove, className: `calendar-visit-badge${v.status === 'noVisit' ? ' calendar-visit-badge--no-visit' : v.status === 'scheduled' ? ' calendar-visit-badge--scheduled' : ''}${onVisitClick ? ' calendar-visit-badge--clickable' : ''}${onVisitMove ? ' calendar-visit-badge--draggable' : ''}`, onDragStart: onVisitMove ? (e) => {
                                             dragVisitId.current = v.id;
                                             e.dataTransfer.effectAllowed = 'move';
                                         } : undefined, onDragEnd: onVisitMove ? () => {

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

@@ -86,8 +86,14 @@
 }
 
 @media (max-width: 767px) {
+  /* **세로로 세울 때는 줄바꿈을 끈다.** 기본 규칙의 `flex-wrap: wrap` 은 가로(row)에서
+     오른쪽 묶음을 아랫줄로 내리려고 둔 것인데, 여기서 방향만 세로로 바꾸면 그 줄바꿈이
+     **오른쪽 새 칸**을 만든다 — 머리 높이가 정해지는 자리에서 셋째인 설명(`__disc`)이
+     아랫줄이 아니라 옆 칸으로 빠져 카드 밖 141px 까지 나갔다(말귀 375px 문장훈련 분석
+     갈래 카드 실측 2026-09-22). 세로에서는 줄을 바꿀 일이 없다. */
   .manager-section__head {
     flex-direction: column;
+    flex-wrap: nowrap;
     align-items: flex-start;
     gap: var(--spacing-s);
   }

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

@@ -78,8 +78,11 @@ export default function FilterPanel({ title, headerAction, collapsible = false,
                                                 /* 아무것도 안 골랐으면 빈 값 — undefined 를 넘기면 SegmentedControl 의 기본값(첫 보기)이 걸려, 상태는
                                                    비었는데 첫 보기가 골라진 것처럼 보였다(필터는 걸리지 않았는데 걸린 듯). */
                                                 value: isAllSelected && section.allOption ? FILTER_ALL_VALUE : selected[section.label] ?? '', onChange: (value) => onSelect?.(value, section.label), 
-                                                /* 옆 Dropdown·TextField(40)와 같은 높이 — 0.159.0 에서 고르개 여백이 빠져 겉높이가 곧 size 다(32 면 8px 낮아진다) */
-                                                size: 40 })) : (!section.multiple && section.display === 'dropdown') ? (_jsx(Dropdown, { className: "filter-panel__dropdown", size: 40, options: [
+                                                /* 같은 패널의 항목 단추(size "keyboard" = 32)와 같은 높이다(사용자 지시 2026-09-22).
+                                                   전에는 40 이었는데, 그 까닭으로 적힌 "옆 Dropdown·TextField(40)와 맞춘다" 는
+                                                   실제와 달랐다 — 세그먼트를 쓰는 패널(단어표 '표 설정')에는 Dropdown 도 TextField 도
+                                                   없고 32 짜리 항목 단추만 있어, 한 줄에 32 와 40 이 섞여 세그먼트만 커 보였다. */
+                                                size: 32 })) : (!section.multiple && section.display === 'dropdown') ? (_jsx(Dropdown, { className: "filter-panel__dropdown", size: 40, options: [
                                                     ...(section.allOption ? [{ value: FILTER_ALL_VALUE, label: section.allLabel ?? t('common.all', '전체'), disabled: section.allOptionDisabled }] : []),
                                                     ...items.map(item => {
                                                         const value = typeof item === 'string' ? item : item.value;

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

@@ -19,7 +19,7 @@ export declare function BrandIdentity({ appMode }: {
  *
  * @public
  */
-export default function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange, scrollContainer }: {
+export default function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, onFeedback, appMode, onAppModeChange, scrollContainer }: {
     activeKey?: string | null;
     onChange?: (key?: string) => void;
     /** 지금 모드의 내비 항목. 데스크톱은 SideNav, 모바일은 BottomNav 가 이 목록을 그린다. */
@@ -37,6 +37,8 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
     onAccount?: () => void;
     onSetting?: () => void;
     onHelp?: () => void;
+    /** 주면 도움말과 계정 **사이** 에 '버그신고' 를 그린다 — 냅 바닥과 모바일 '…' 메뉴 둘 다. */
+    onFeedback?: () => void;
     appMode?: 'malgwi' | 'manager';
     onAppModeChange?: (mode: 'malgwi' | 'manager') => void;
     /**

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

@@ -42,7 +42,7 @@ export function BrandIdentity({ appMode }) {
  *
  * @public
  */
-export default function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange, scrollContainer }) {
+export default function Header({ activeKey, onChange, items, malgwiItems: _malgwiItems, managerItems: _managerItems, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, onFeedback, appMode, onAppModeChange, scrollContainer }) {
     const { t } = useTranslation();
     const isMobile = useMediaQuery("(max-width: 767px)");
     /* **모바일 하단 내비에 SideNav 항목을 옮겨 적는다.** 예전에는 `SideNavItem` 을 `NavItem` 으로
@@ -91,10 +91,12 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
             list.push({ key: 'settings', icon: 'settings', label: t('nav.settings', '설정'), onClick: onSetting });
         if (onHelp)
             list.push({ key: 'help', icon: 'message-circle-question-mark', label: t('nav.help', '도움말'), onClick: onHelp });
+        if (onFeedback)
+            list.push({ key: 'feedback', icon: 'bug', label: t('nav.feedback', '버그신고'), onClick: onFeedback });
         if (onAccount)
             list.push({ key: 'account', icon: 'user-round', label: t('nav.account', '계정'), onClick: onAccount });
         return list;
-    }, [t, onDebug, onNotification, onSetting, onHelp, onAccount, unreadCount]);
+    }, [t, onDebug, onNotification, onSetting, onHelp, onFeedback, onAccount, unreadCount]);
     // 헤더 햄버거 — SideNav 푸터에 해당하는 유틸(알림·설정·도움말·계정·디버그)을 띄운다.
     // 데스크톱에선 SideNav 푸터에 늘 보이지만 모바일에선 그 자리가 없어, 같은 항목을
     // 하단 더보기(…)와 동일한 구성(bottomMoreItems)으로 재사용한다.
@@ -116,9 +118,9 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
                 onClick: () => { it.onClick?.(); closeUtilMenu(); },
             })),
         }], [bottomMoreItems, activeKey, closeUtilMenu]);
-    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { htmlType: "button", size: 48, type: "dot", shape: "pill", variant: "default", icon: 'menu', ariaLabel: onNotification && unreadCount && unreadCount > 0
+    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { htmlType: "button", size: 48, type: "dot", shape: "pill", variant: "default", useBorder: false, icon: 'menu', ariaLabel: onNotification && unreadCount && unreadCount > 0
                                     ? t('nav.badgeLabel', { label: t('header.menuOpen', '메뉴 열기'), count: unreadCount, defaultValue: '{{label}}, {{count}}개' })
-                                    : t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu, "aria-expanded": utilOpen, "aria-controls": utilOpen ? utilMenuId : undefined }), !!onNotification && !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true })), utilOpen && createPortal(_jsx("div", { id: utilMenuId, role: "group", "aria-label": t('header.utilMenu', '유틸리티 메뉴'), className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { scrollContainer: scrollContainer, items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, scrollContainer: scrollContainer, appMode: appMode, onAppModeChange: onAppModeChange })] }));
+                                    : t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu, "aria-expanded": utilOpen, "aria-controls": utilOpen ? utilMenuId : undefined }), !!onNotification && !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true })), utilOpen && createPortal(_jsx("div", { id: utilMenuId, role: "group", "aria-label": t('header.utilMenu', '유틸리티 메뉴'), className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { scrollContainer: scrollContainer, items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, onFeedback: onFeedback, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, scrollContainer: scrollContainer, appMode: appMode, onAppModeChange: onAppModeChange })] }));
 }
 /**
  * `Header`의 alias입니다. 프로젝트 내 `Header`라는 이름이 이미 사용 중일 때 충돌 없이 임포트할 수 있습니다.

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

@@ -20,9 +20,13 @@
   }
   .page-title__action {
     margin-left: 0;
-    /* 세로로 내려오면 제목과 같은 선에서 시작하게 한다 — 우측에 붙여 두면
-       제목과 어긋나 화면 오른쪽에 홀로 떠 있는 것처럼 보인다. */
-    align-self: flex-start;
+    /* 세로로 내려오면 **가운데**에 둔다(사용자 지시 2026-09-22).
+       한때는 `flex-start` 였다 — 오른쪽에 붙여 두면 제목과 어긋나 화면 오른쪽에 홀로 떠
+       있는 것처럼 보였기 때문이다. 그 진단은 맞았지만 답이 한 칸 모자랐다: 왼쪽에 붙이면
+       제목 줄과는 맞아도, 여기 서는 것(세그먼트 고르개·단추 하나)은 제목처럼 줄글이 아니라
+       **덩어리**라 한쪽에 몰린 것으로 읽힌다. 가운데가 그 둘 사이다.
+       실측(375px, 제목 줄 335px · 고르개 160px): 왼쪽 20~180 → 가운데 107~267. */
+    align-self: center;
   }
 }
 

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

@@ -63,9 +63,12 @@
   gap: var(--spacing-xs);
 }
 .popup-title { padding: var(--spacing-l); display: block; text-align: center; flex-shrink: 0; }
-.popup-header { padding: var(--spacing-l) var(--spacing-l) 0; display: flex; align-items: center; gap: var(--spacing-s); flex-shrink: 0; }
+/* 좁아지면 **오른쪽 묶음이 아랫줄로 내려간다**. 예전에는 묶음이 `flex-shrink: 0` 이라 제 속 너비를
+   끝까지 우기고 제목 칸만 0 까지 눌려, 좁은 화면에서 제목이 한 글자씩 세로로 쏟아졌다
+   (말귀 2026-09-22 실측). 제목에 밑바닥(220px)을 줘 그 아래로는 줄을 바꾸게 한다. */
+.popup-header { padding: var(--spacing-l) var(--spacing-l) 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-s); flex-shrink: 0; }
 .popup-header--with-subtitle { align-items: flex-start; }
-.popup-header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.popup-header-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
 .popup-title--left { padding: 0; text-align: left; flex: 1; min-width: 0; }
 .popup-header-main .popup-title--left { flex: none; }
 .popup-header .popup-title--left { margin: 0; }
@@ -73,7 +76,9 @@
 /* 머리 오른쪽 고르개(headerSegment) — 닫기·headerActions 앞. 좁으면 제목 아래로 줄을 바꾸고
    제목을 밀어내지 않는다(제목 칸이 flex:1 로 먼저 줄어든다). */
 .popup-header-segment { flex-shrink: 0; }
-.popup-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+/* 줄이 바뀌면 오른쪽 끝에 선다. 안에서도 한 번 더 줄을 바꿀 수 있어야 한다 — 앱이 고르개처럼
+   넓은 것을 얹는 자리다. 닫기(✕)는 어느 경우에도 이 묶음 안에 있어 손이 닿는다. */
+.popup-header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; min-width: 0; }
 .popup-content {
   padding: 20px 20px 0;
   flex: 1;
@@ -91,7 +96,9 @@
 }
 /* 세로는 가운데 — 안 적어 두면 stretch 라, 키가 다른 것(보조 글월 + 단추)을 나란히 두면 늘어난다.
    소비자 셋이 이 자리를 각자 `align-items: center` 로 칠하고 있었다(2026-09-17 말귀 전수). */
-.popup-footer { padding: 0 20px 20px; display:flex; gap:8px; justify-content:center; align-items:center }
+/* 좁으면 **줄을 바꾼다.** 안 바꾸면 단추 셋(120×3 + 사이 = 408px)이 353px 바닥에 그대로 서서
+   마지막 단추의 오른쪽 55px 이 잘렸다 — 잘린 쪽은 눌리지도 않는다(말귀 375px 채점 창 실측). */
+.popup-footer { padding: 0 20px 20px; display:flex; flex-wrap: wrap; gap:8px; justify-content:center; align-items:center }
 /* 바닥 배치(footerLayout) */
 .popup-footer--fill > * { flex: 1 }
 .popup-footer--between {
@@ -99,8 +106,10 @@
   padding-left: var(--spacing-xl);
   padding-right: var(--spacing-xl);
 }
-/* 표준 buttons 배열만 폭/정렬 제약 — 커스텀 footer는 자유 배치 */
-.popup-footer--buttons > * { max-width: 200px; flex: 1; }
+/* 표준 buttons 배열만 폭/정렬 제약 — 커스텀 footer는 자유 배치.
+   `flex: 1` 의 기본 바닥(min-width: auto)은 글자 길이만큼 버틴다 — 0 으로 내려 줄이 바뀌기 전에
+   먼저 줄어들게 하고, 그래도 모자라면 위의 `flex-wrap` 이 아랫줄로 내린다. */
+.popup-footer--buttons > * { max-width: 200px; flex: 1 1 auto; min-width: 0; }
 .popup--closing { opacity: 0; transition: opacity 260ms ease }
 
 @media (max-width: 767px) {

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

@@ -28,11 +28,15 @@
   width: 100%;
 }
 
+/* **줄어들 수 있어야 한다.** flex 항목의 min-width 기본값은 auto 라, 설명(`disc`)이 길면
+   그 자연 폭만큼 버텨 카드 밖으로 밀려 나갔다(말귀 375px 분석 창 갈래 카드 실측 2026-09-22).
+   글은 줄을 바꾸면 되는 것이라 바닥을 0 으로 내린다. */
 .section__title-row {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-s);
   flex: 1;
+  min-width: 0;
 }
 
 .section__icon {
@@ -52,6 +56,8 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+  /* 위와 같은 까닭 — 제목·설명이 담긴 칸도 줄어들 수 있어야 한다 */
+  min-width: 0;
 }
 
 .section__title {

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

@@ -20,6 +20,11 @@ export interface SegmentedControlProps {
     /** 버튼 높이 — Button 과 같은 숫자 size (24 / 32 / 40 / 48). **기본 40.** **겉높이가 곧 size 다**(0.159.0 부터 판 여백 없음) —
      *  옆에 `Button size={32}` 를 세우면 셈 없이 나란히 선다.
      *
+     *  **다만 768px 이하에서는 숫자 size 가 한 급 줄어든다**(Button 의 반응형 사다리: 48→40 · 40→34 · **32→28**; 1024px 이하에서는 32→30).
+     *  고르개는 그 Button 을 그대로 쓰므로 함께 줄어든다. 그래서 폰에서 `size={32}` 는 **28px** 로 선다.
+     *  같은 줄에 `size="Keyboard"`(32px 고정, 줄어들지 않는다) 단추를 세우면 폰에서만 4px 어긋난다 —
+     *  나란히 세워야 하면 양쪽 다 숫자 size 를 쓰거나 양쪽 다 Keyboard 를 쓴다(말귀 '표 설정' 패널 실측 2026-09-22).
+     *
      *  기본이 48 이던 것을 40 으로 내렸다(사용자 지시 2026-09-21). 코어가 제 안에서 세우는 고르개는 이미 **전부 40**
      *  이었고(`Toolbar`·`FilterPanel`·`BarChart`·`PanelRow`…), 옆에 서는 `Dropdown`·`TextField` 도 40 이다 —
      *  기본값만 혼자 48 이라 안 주고 쓴 자리가 한 급 크게 섰다. */

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

@@ -23,6 +23,8 @@ export interface SideNavProps {
     onAccount?: () => void;
     onSetting?: () => void;
     onHelp?: () => void;
+    /** 주면 도움말과 계정 사이에 '버그신고' 를 그린다. 안 주면 그 자리가 없다(`onDebug` 와 같은 결). */
+    onFeedback?: () => void;
     /** 현재 앱 모드 ('malgwi' | 'manager') */
     appMode?: 'malgwi' | 'manager';
     /** 앱 모드 전환 콜백 */

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

@@ -14,7 +14,7 @@ function nameWithCount(t, label, count) {
 }
 function SideNavFooter(props) {
     const { t } = useTranslation();
-    const { activeKey, unreadCount, onDebug, onNotification, onSetting, onHelp, onAccount } = props || {};
+    const { activeKey, unreadCount, onDebug, onNotification, onSetting, onHelp, onFeedback, onAccount } = props || {};
     const variant = 'default';
     /* **핸들러를 준 것만 그린다.**
        예전에는 디버그만 이 규칙을 따르고 나머지 넷은 핸들러와 무관하게 늘 그렸다.
@@ -22,11 +22,11 @@ function SideNavFooter(props) {
        넷 서 있었다 — 눌러도 아무 일이 없으니 사람은 고장으로 읽고, 낭독기에는
        '알림 단추' 라고 읽히는데 실제로는 아무 데도 못 간다.
        **없는 단추가 죽은 단추보다 낫다.** */
-    const 그릴것 = onDebug || onNotification || onSetting || onHelp || onAccount;
+    const 그릴것 = onDebug || onNotification || onSetting || onHelp || onFeedback || onAccount;
     // 하나도 없으면 바닥 자체를 비운다 — 빈 채로 두면 여백(margin-top + padding)만 남는다.
     if (!그릴것)
         return null;
-    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: nameWithCount(t, t('nav.notifications', '알림'), unreadCount), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true }))] })), onSetting && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onAccount && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
+    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: nameWithCount(t, t('nav.notifications', '알림'), unreadCount), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true }))] })), onSetting && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onFeedback && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bug", ariaLabel: t('nav.feedback', '버그신고'), onClick: onFeedback, selected: activeKey === 'feedback' })), onAccount && (_jsx(Button, { htmlType: "button", size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
 }
 function SideNavButton(props) {
     const { t } = useTranslation();
@@ -58,7 +58,7 @@ function SideNavButton(props) {
 /** @public */
 export default function SideNav(props) {
     const { t } = useTranslation();
-    const { items = [], activeKey, onChange, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange, scrollContainer } = props || {};
+    const { items = [], activeKey, onChange, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, onFeedback, appMode, onAppModeChange, scrollContainer } = props || {};
     /* 모드를 안 주면 말귀로 본다 — Header(브랜드)·BottomNav 와 같게. 전에는 여기만 매니저로 봐 같은 화면에서
        데스크톱은 '말귀로 이동', 모바일은 '말귀 매니저' 로 서로 반대를 가리켰다. */
     const isManager = appMode === 'manager';
@@ -118,5 +118,5 @@ export default function SideNav(props) {
                             key: '__mode-switch__',
                             label: isManager ? t('nav.goToMalgwi', '말귀로 이동') : t('nav.goToManager', '말귀매니저로 이동'),
                             icon: isManager ? 'arrow-left' : 'arrow-right',
-                        }, onClick: handleModeSwitch }))] }), _jsx(SideNavFooter, { activeKey: activeKey, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp })] }));
+                        }, onClick: handleModeSwitch }))] }), _jsx(SideNavFooter, { activeKey: activeKey, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, onFeedback: onFeedback })] }));
 }

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

@@ -54,9 +54,12 @@ export type TableProps<T extends {
     draggingId?: string | number | null;
     gridTemplateColumns?: string;
     /**
-     * 좁은 화면(767px 이하)에서 쓸 열 틀. 주면 그 폭에서는 이 틀을 쓰고 **끌어 둔 폭(저장값)은 무시**한다 —
-     * 폭 조절 손잡이와 '칸 너비 초기화' 단추도 숨겨, 좁은 화면에서 끈 값이 넓은 화면의 저장값을 덮지 않게 한다.
-     * 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다. 미지정이면 좁은 화면도 넓은 화면과 같다(기본).
+     * 좁은 화면(767px 이하)에서 쓸 열 틀. 주면 그 폭에서는 이 틀을 쓴다.
+     *
+     * **안 줘도 좁은 화면에서는 끌어 둔 폭(저장값)을 안 쓰고, 손잡이와 '칸 너비 초기화' 단추도 숨긴다** —
+     * 이 prop 과 무관하게 늘 그렇다. 그래서 안 주면 좁은 화면에서는 `gridTemplateColumns` 가 그대로 서고,
+     * 그 틀의 `minmax(…px, …fr)` 밑값이 지켜지며 넘치는 만큼은 표가 제 가로 스크롤로 보여 준다.
+     * 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다.
      *
      * 열 틀은 인라인 CSS 변수로 들어가므로 앱 CSS 로는 `!important` 없이 못 이긴다 — 그래서 prop 이다.
      * 숨길 칸은 `renderRow` 의 `className`·`fields[].className` 으로 앱이 가린다.