@ihabdevteam/core 0.183.2 → 0.185.0

package/dist/ihabdevteam-core.d.ts

@@ -1600,7 +1600,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.183.2";
+export declare const CORE_VERSION = "0.185.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2734,7 +2734,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 +2752,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;
     /**
@@ -6082,6 +6084,8 @@ export declare interface SideNavProps {
     onAccount?: () => void;
     onSetting?: () => void;
     onHelp?: () => void;
+    /** 주면 도움말과 계정 사이에 '버그신고' 를 그린다. 안 주면 그 자리가 없다(`onDebug` 와 같은 결). */
+    onFeedback?: () => void;
     /** 현재 앱 모드 ('malgwi' | 'manager') */
     appMode?: 'malgwi' | 'manager';
     /** 앱 모드 전환 콜백 */
@@ -7898,7 +7902,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 +7911,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/EmptyState.css

@@ -12,10 +12,13 @@
      빈 화면이 위에 붙어 아래가 휑하던 자리다. 자리가 빠듯하면 auto 가 0 이 되어 예전과 같다. */
   margin-block: auto;
 }
-/* 빈 화면 아이콘 — 40 은 제목(h4) 옆에서 작았다(사용자 지시 2026-09-21).
-   **그림 크기는 `Icon size` 가 정한다**(EmptyState.tsx) — 여기 폭·높이는 그 그림이 앉는 자리다.
-   0.183.0 은 이 자리만 56 으로 키우고 `size` 를 안 줘서 상자는 56, 그림은 20 이었다. */
-.empty-state__icon { width: 48px; height: 48px; color: var(--color-lightGray); display: inline-flex; align-items: center; justify-content: center; }
+/* 빈 화면 아이콘 — **크기를 여기서 박지 않는다.** 크기는 `Icon size` 한 곳이 정하고(48,
+   EmptyState.tsx · ErrorState.tsx) 이 상자는 그 그림에 맞춰 줄어든다.
+   상자와 그림이 따로 크기를 가지면 한쪽만 바뀔 때 조용히 어긋난다 — 실제로 두 번 어긋났다:
+   0.182.0 은 상자 40 · 그림 20(그림 둘레에 10px 빈 테가 생겨 제목과의 간격까지 벌어졌다),
+   0.183.0 은 상자 56 · 그림 20. 둘 다 화면에서 잡혔다(사용자 지시 2026-09-21 "아이콘 크기
+   지정하고 있는 것은 걷는다"). inline-flex 만 남기는 것은 글줄 기준선 아래 빈틈을 없애려는 것이다. */
+.empty-state__icon { color: var(--color-lightGray); display: inline-flex; }
 /* 제목과 본문은 **같은 색** 이다(사용자 지시 2026-09-21) — 전에는 제목이 한 단계 옅어(lightGray)
    제목이 본문보다 뒤로 물러나 보였다. 위계는 글자 등급(h4 · body-3)이 준다.
    같은 색으로 모을 때 gray 를 고른 것은 lightGray 가 흰 지면에서 AA(4.5:1)에 못 미치기 때문이다. */

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

@@ -9,7 +9,7 @@ import { usePendingPress } from '../hooks/usePendingPress';
 export default function ErrorState({ message, hint, icon = 'triangle-alert', onRetry, retryLabel, className }) {
     const { t } = useTranslation();
     const { pending, press } = usePendingPress(onRetry);
-    return (_jsxs("div", { className: cx('empty-state', 'error-state', className), role: "alert", children: [_jsx(Icon, { icon: icon, className: "empty-state__icon error-state__icon" }), _jsx("p", { className: "empty-state__message body-3", children: message ?? t('common.errorState.message', { defaultValue: '불러오지 못했습니다.' }) }), hint && _jsx("p", { className: "error-state__hint caption-1", children: hint }), onRetry && (_jsxs("button", { 
+    return (_jsxs("div", { className: cx('empty-state', 'error-state', className), role: "alert", children: [_jsx(Icon, { icon: icon, size: 48, className: "empty-state__icon error-state__icon" }), _jsx("p", { className: "empty-state__message body-3", children: message ?? t('common.errorState.message', { defaultValue: '불러오지 못했습니다.' }) }), hint && _jsx("p", { className: "error-state__hint caption-1", children: hint }), onRetry && (_jsxs("button", { 
                 // type="button" — 없으면 폼 안에서 다시 시도를 누르는 순간 폼이 제출된다
                 type: "button", className: "empty-state__action button button40 button40--bar button--variant-main button--align-center button--shape-rounded", onClick: press, disabled: pending, "aria-busy": pending || undefined, children: [_jsx(Icon, { icon: "rotate-cw", className: "button__icon" }), _jsx("span", { className: "button__label button-1", children: retryLabel ?? t('common.errorState.retry', { defaultValue: '다시 시도' }) })] }))] }));
 }

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/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/Toolbar.css

@@ -38,6 +38,27 @@
   gap: var(--spacing-s);
 }
 
+/* **안쪽 묶음이 줄 전체로 늘어나면 `justify-content` 가 먹을 여지가 없다.**
+   우측 묶음의 한 자식(예: 기간 조작 `.manager-section-controls`)이 제 안에서 줄을 바꾸면,
+   그 자식의 폭이 줄 전체가 되어(375px 에서 335px) 안의 항목들이 **왼쪽부터** 깔렸다 —
+   우측 묶음은 오른쪽에 붙었는데 그 안은 왼쪽에 붙는 꼴이다(말귀 실측 2026-09-22).
+   늘어나는 것 자체는 막지 않는다(막으면 좁은 화면에서 그 묶음이 제 줄을 못 쓴다).
+   대신 **늘어나도 안쪽이 오른쪽에 서게** 한다 — 원래 오른쪽 것이던 자리다. */
+.toolbar__row-end > * {
+  justify-content: flex-end;
+}
+
+/* 페이지 크기 + 쪽수 — 한 덩어리로 움직인다. 안에서는 줄을 바꾸지 않는다(`nowrap`):
+   둘이 갈라지면 "50개씩 보기" 만 남고 쪽수가 다음 줄로 떨어져, 같은 것을 다루는 짝이
+   따로 노는 것처럼 보였다(말귀 실측 2026-09-22). 좁으면 이 덩어리가 통째로 내려간다. */
+.toolbar__pager {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+
 .toolbar__count {
   flex-shrink: 0;
   margin: 0;

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

@@ -18,5 +18,5 @@ export default function Toolbar({ count, search, segment, filters, pageSize, pag
                             /* placeholder는 접근 가능한 이름이 아니다 — 입력이 시작되면 사라지고
                                화면낭독기 지원도 제각각이라, 같은 문구를 aria-label로도 준다.
                                (툴바 검색은 시각적 라벨이 따로 없는 자리라 이게 유일한 이름이 된다.) */
-                            ariaLabel: search.placeholder ?? t('common.search', '검색'), clearable: true })), filters?.map((f, i) => (_jsx(Dropdown, { size: 40, options: f.options, value: f.value, onChange: f.onChange, ariaLabel: f.ariaLabel }, i))), pageSize && _jsx(Dropdown, { size: 40, options: pageSize.options, value: pageSize.value, onChange: pageSize.onChange, ariaLabel: pageSize.ariaLabel ?? t('common.pageSizeSelect', '페이지당 표시 개수') }), pagination && (_jsx(Pagination, { page: pagination.page, totalPages: pagination.total, onChange: pagination.onChange, prevLabel: pagination.prevLabel, nextLabel: pagination.nextLabel })), actions] }) }))] }));
+                            ariaLabel: search.placeholder ?? t('common.search', '검색'), clearable: true })), filters?.map((f, i) => (_jsx(Dropdown, { size: 40, options: f.options, value: f.value, onChange: f.onChange, ariaLabel: f.ariaLabel }, i))), (pageSize || pagination) && (_jsxs("div", { className: "toolbar__pager", children: [pageSize && _jsx(Dropdown, { size: 40, options: pageSize.options, value: pageSize.value, onChange: pageSize.onChange, ariaLabel: pageSize.ariaLabel ?? t('common.pageSizeSelect', '페이지당 표시 개수') }), pagination && (_jsx(Pagination, { page: pagination.page, totalPages: pagination.total, onChange: pagination.onChange, prevLabel: pagination.prevLabel, nextLabel: pagination.nextLabel }))] })), actions] }) }))] }));
 }

package/dist/packages/core/src/components/Training/TrainingPagePopup.js

@@ -905,7 +905,9 @@ function TrainingPagePopupInner(props) {
        아무 데도 닿지 않았다** — 낭독기는 이것을 그냥 대화상자로 읽고 가상 커서가
        뒤 화면으로 새어 나간다(Tab 가둠은 `useFocusTrap` 이 따로 하고 있었다).
        둘을 한 요소에 모은다. */
-    _jsxs("div", { className: `page-popup${closing ? ' page-popup--closing' : ''}`, role: "dialog", "aria-modal": "true", "aria-label": resolvedTitle, children: [_jsxs("div", { ref: panelRef, className: `page-popup__panel ${!measured ? 'page-popup__panel--measuring' : ''} ${mode === 'center' ? 'page-popup__panel--center' : mode === 'top' ? 'page-popup__panel--top' : ''}`, children: [_jsx(TrainingPagePopupTitle, { title: titleForHeader, subtitle: hasScenario ? (scenarioMeta.subtitle || scenarioMeta.label) : (Array.isArray(depth) ? depth.join(' / ') : undefined), desc: !hasScenario ? subTitle : undefined, depth: (hasScenario ? scenarioMeta.depth : depth), icon: hasScenario ? scenarioMeta.icon : icon, wrapperStyle: hasScenario ? scenarioMeta.wrapperStyle : wrapperStyle, iconTooltip: hasScenario ? scenarioMeta.iconTooltip : iconTooltip, progressMax: effectivePageCount, progressIndex: effectivePageIndex, pageIndex: effectivePageIndex, pageCount: effectivePageCount, onBack: handleCloseBack, onClose: handleCloseBack }), _jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content ${mode === "center" ? "page-popup__content--center" : "page-popup__content--top"}${props.contentFull ? ' page-popup__content--full' : ''}`, children: isChildrenMode ? childrenContent : (hasScenario ? scenarioContent : (typeof children === 'function' ? children({ registerOnNext, registerOnResult: registerOnResult, panelRef, setResultOverlay }) : children)) }) }), _jsx(TrainingPagePopupBottom, { onSettings: onSettings, onNext: handleNext, onResult: handleViewResults, useNoiseSettingBtn: Boolean(hasScenario ? (scenarioMeta.useNoiseSetting ?? true) : useNoiseSetting), stepIndex: effectiveStepIndex, stepCount: effectiveStepCount, pageIndex: effectivePageIndex, pageCount: effectivePageCount })] }), (resultOverlay && !resultOverlay.isEmpty && (renderResultPopup ?? defaultRenderResult)({
+    _jsxs("div", { className: `page-popup${closing ? ' page-popup--closing' : ''}`, role: "dialog", "aria-modal": "true", "aria-label": resolvedTitle, children: [_jsxs("div", { ref: panelRef, className: `page-popup__panel ${!measured ? 'page-popup__panel--measuring' : ''} ${mode === 'center' ? 'page-popup__panel--center' : mode === 'top' ? 'page-popup__panel--top' : ''}`, children: [_jsx(TrainingPagePopupTitle, { title: titleForHeader, subtitle: hasScenario ? (scenarioMeta.subtitle || scenarioMeta.label) : (Array.isArray(depth) ? depth.join(' / ') : undefined), desc: !hasScenario ? subTitle : undefined, depth: (hasScenario ? scenarioMeta.depth : depth), icon: hasScenario ? scenarioMeta.icon : icon, wrapperStyle: hasScenario ? scenarioMeta.wrapperStyle : wrapperStyle, iconTooltip: hasScenario ? scenarioMeta.iconTooltip : iconTooltip, progressMax: effectivePageCount, progressIndex: effectivePageIndex, pageIndex: effectivePageIndex, pageCount: effectivePageCount, onBack: handleCloseBack, onClose: handleCloseBack }), _jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content ${mode === "center" ? "page-popup__content--center" : "page-popup__content--top"}${props.contentFull ? ' page-popup__content--full' : ''}`, children: isChildrenMode ? childrenContent : (hasScenario ? scenarioContent : (typeof children === 'function' ? children({ registerOnNext, registerOnResult: registerOnResult, panelRef, setResultOverlay }) : children)) }) }), _jsx(TrainingPagePopupBottom, { onSettings: onSettings, onNext: handleNext, onResult: handleViewResults, useNoiseSettingBtn: Boolean(hasScenario ? (scenarioMeta.useNoiseSetting ?? true) : useNoiseSetting), stepIndex: effectiveStepIndex, stepCount: effectiveStepCount, pageIndex: effectivePageIndex, pageCount: effectivePageCount, 
+                        /* 결과 창이 뜨면 바닥의 오디오 미터를 끈다 — 결과를 보는 동안 떠 있을 까닭이 없다 */
+                        resultOpen: Boolean(resultOverlay && !resultOverlay.isEmpty) })] }), (resultOverlay && !resultOverlay.isEmpty && (renderResultPopup ?? defaultRenderResult)({
                 score: resultOverlay.score,
                 results: (resultOverlay.results || resultOverlay.answers || []),
                 contextsLength: resultOverlay.results ? resultOverlay.results.length : (resultOverlay.answers ? resultOverlay.answers.length : 0),

package/dist/packages/core/src/components/Training/TrainingPagePopupBottom.css

@@ -43,3 +43,17 @@
 }
 
 .pp-bottom__tooltip-trigger { display: inline-block; }
+
+/* 폰에서 토글 단추 위에 떠서 보이는 미터 — 바닥 줄에 나란히 두면 미터 두 줄(222px)이
+   '다음 문제'(150px)를 화면 밖으로 밀어낸다(말귀 375px 실측: 보이는 폭 5px, 바닥이
+   overflow:visible 이라 굴려 꺼낼 수도 없었다). 떠 있는 판에서는 두 줄을 세로로 쌓는다. */
+.pp-bottom__meters--floating {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+/* 토글 단추 자리 — 떠 있는 판의 기준점이라 흐름에서 제 크기를 지킨다 */
+.pp-bottom__meter-trigger {
+  display: inline-flex;
+  flex-shrink: 0;
+}

package/dist/packages/core/src/components/Training/TrainingPagePopupBottom.d.ts

@@ -6,10 +6,12 @@ export type TrainingPagePopupBottomProps = {
     onNext?: () => void;
     onResult?: () => void;
     stepIndex?: number;
+    /** 결과 창이 떠 있는가 — 뜨는 순간 오디오 미터를 끈다(사용자 지시 2026-09-22). */
+    resultOpen?: boolean;
     stepCount?: number;
     pageIndex?: number;
     /** 쪽 수. 0(쪽이 없음)이어도 '결과보기'(완료) 단추는 보이고, '다음 문제'(쪽 이동)만 숨는다. 기본 1. */
     pageCount?: number;
 };
 /** @public */
-export default function TrainingPagePopupBottom({ useNoiseSettingBtn, onSettings, onNext, onResult, stepIndex, stepCount, pageIndex, pageCount, }: TrainingPagePopupBottomProps): import("react").JSX.Element;
+export default function TrainingPagePopupBottom({ useNoiseSettingBtn, onSettings, onNext, onResult, stepIndex, stepCount, pageIndex, pageCount, resultOpen, }: TrainingPagePopupBottomProps): import("react").JSX.Element;