@ihabdevteam/core 0.247.0 → 0.249.0

package/dist/ihabdevteam-core.d.ts

@@ -310,7 +310,7 @@ export declare type BadgeType = 'bar' | 'dot';
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(월~일) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export declare function BarChart({ focusableBars, size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
+export declare function BarChart({ focusableBars, size, barWidth, titleKey, titleLevel, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
 
 /** @public */
 export declare interface BarChartControl {
@@ -376,6 +376,12 @@ export declare interface BarChartProps {
     barWidth?: number;
     /** 섹션 제목 i18n 키 */
     titleKey: string;
+    /** 제목을 머리글 몇 급으로 그릴지 — 그대로 `ChartSection` 에 넘긴다(말귀 요청 (60)③, 2026-10-02).
+     *
+     *  `ChartSection` 은 (51) 에서 급을 열었는데 **막대·링은 그 문을 안 달았다.** 그래서 칸을
+     *  부르는 쪽이 급을 못 정하고 늘 기본 3 이 나갔다 — 대시보드 제목이 `h1` 이면 층이
+     *  h1 → h3 로 한 급 비어 읽힌다. 자세한 뜻은 `ChartSectionProps.titleLevel` 참고. */
+    titleLevel?: ChartSectionProps['titleLevel'];
     /** 구간(월) 키 → 주별/일별 데이터 */
     data: Record<string, MonthBarData>;
     colorA: string;
@@ -1645,7 +1651,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.247.0";
+export declare const CORE_VERSION = "0.249.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -4359,7 +4365,12 @@ declare type PanelRowInput = Base & {
     disabled?: boolean;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     autoComplete?: string;
-    helperText?: string;
+    /** 칸 아래 안내 한 줄 — `aria-describedby` 로 **칸과 이어진다**(말귀 요청 (60)①, 2026-10-02).
+     *
+     *  `ReactNode` 다 — 앱이 `<span role="status">` 로 감싸 **값에 따라 바뀌는 안내**를
+     *  그 자리에서 알릴 수 있게 한 것이다. `error` 로 보내면 될 일이 아니다: `error` 는
+     *  `aria-invalid` 까지 세워 "틀린 값" 이라고 말하는데, 안내는 틀렸다는 말이 아니다. */
+    helperText?: ReactNode;
     /** 최대 글자 수 — 설정 시 입력 제한 + 박스 안쪽 글자수 카운터 표시 */
     maxLength?: number;
     /** 글자수 카운터 표시 여부 (maxLength 설정 시, 기본 true) */
@@ -6067,7 +6078,7 @@ export declare function reviewTableName(original: string | ReviewSource, today:
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export declare function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, onClick, ariaLabel, tooltip, ...ringProps }: RingChartProps): JSX.Element;
+export declare function RingChart({ titleKey, titleLevel, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, onClick, ariaLabel, tooltip, ...ringProps }: RingChartProps): JSX.Element;
 
 /** @public */
 export declare interface RingChartProps {
@@ -6104,6 +6115,8 @@ export declare interface RingChartProps {
      * 감싼 카드로 렌더. 미지정 시 헤더 없는 순수 링만 렌더(기존 동작과 동일).
      */
     titleKey?: string;
+    /** 제목 머리글 급 — 그대로 `ChartSection` 에 넘긴다(`titleKey` 지정 시에만). `BarChartProps.titleLevel` 과 같은 뜻 */
+    titleLevel?: ChartSectionProps['titleLevel'];
     /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등 (titleKey 지정 시에만 사용) */
     headRight?: ReactNode;
     /** 제목 옆 아이콘(옅게 표시, StatChart와 동일한 톤) — 지정 시 headRight 자리에 렌더(titleKey 지정 시에만 사용) */
@@ -7588,6 +7601,12 @@ export declare interface TextFieldProps {
     label?: string;
     /** 화면에 보이는 라벨 없이(placeholder만 쓸 때) 스크린리더용 이름을 지정. label이 있으면 무시됨 */
     ariaLabel?: string;
+    /** **바깥에서 그린 설명**의 id — 이 칸 안의 `helperText`·`error` id 와 **함께** 걸린다(덮지 않는다).
+     *
+     *  `PanelRow` 처럼 감싸는 쪽이 도움말을 제 자리에 그리는 자리가 있다. 전에는 그 글이 칸과
+     *  이어지지 않아, 보이기만 하고 낭독기에는 영 안 갔다(말귀 요청 (60)①, 2026-10-02).
+     *  빈칸 띄움으로 여러 개도 된다 — `aria-describedby` 는 id 목록이다. */
+    ariaDescribedBy?: string;
     /** 필수 항목 표시 (*) */
     required?: boolean;
     /** placeholder 텍스트 */

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

@@ -41,13 +41,16 @@
   color: var(--color-darkGray);
 }
 
+/* **같은 집안의 또 한 자리다**((61) 을 고치며 셈이 찾았다, 2026-10-02). 20 x 20px 으로
+   2.5.8 의 24 에 4px 모자랐다. 글자(x)는 18px 에 line-height 1 이라 **보이는 모양은
+   안 바뀐다** — 투명한 상자만 24 가 된다. 줄 폭이 4px 늘지만 알림은 그만큼 여유가 있다. */
 .alert__dismiss {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border: none;
   background: transparent;
   color: var(--color-gray);

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

@@ -13,4 +13,4 @@ import type { BarChartProps } from './barChartTypes';
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(월~일) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export default function BarChart({ focusableBars, size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;
+export default function BarChart({ focusableBars, size, barWidth, titleKey, titleLevel, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;

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

@@ -290,7 +290,7 @@ const BAR_SIZE_PRESET = {
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(월~일) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export default function BarChart({ focusableBars, size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, rateAgg = 'dayMean', tightMax = false, avgMode = false, totalFormat, series, seriesMode = 'stack', loading = false, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
+export default function BarChart({ focusableBars, size = 'medium', barWidth, titleKey, titleLevel, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, rateAgg = 'dayMean', tightMax = false, avgMode = false, totalFormat, series, seriesMode = 'stack', loading = false, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
     const { t, i18n } = useTranslation();
     const sizePreset = BAR_SIZE_PRESET[size];
     // 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
@@ -428,7 +428,7 @@ export default function BarChart({ focusableBars, size = 'medium', barWidth, tit
         .filter(Boolean).join(' ') || undefined;
     return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, icon: icon, disc: disc, onClick: onClick, ariaLabel: cardAriaLabel, tooltip: cardTooltip, headSegment: headSegment, 
         /* 좁아 고르개가 '⋯' 로 접히면 상세보기도 그 메뉴로 들어간다 — 머리에 단추 둘이 남지 않게 */
-        headMenuItems: onDetail ? [{ label: t('trainingStatus.detail', '상세보기'), icon: 'list', onClick: onDetail, closeOnSelect: true }] : undefined, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? (headExtra ?? undefined) : ({ collapsed }) => _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), headExtra, onDetail && !collapsed && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { htmlType: "button", size: detailSize, type: "dot", icon: "list", ariaLabel: t('trainingStatus.detail', '상세보기'), showTooltipInfo: t('trainingStatus.detail', '상세보기'), onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
+        headMenuItems: onDetail ? [{ label: t('trainingStatus.detail', '상세보기'), icon: 'list', onClick: onDetail, closeOnSelect: true }] : undefined, title: t(titleKey), titleLevel: titleLevel, titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? (headExtra ?? undefined) : ({ collapsed }) => _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), headExtra, onDetail && !collapsed && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { htmlType: "button", size: detailSize, type: "dot", icon: "list", ariaLabel: t('trainingStatus.detail', '상세보기'), showTooltipInfo: t('trainingStatus.detail', '상세보기'), onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
                 // 진행률/평균 모드 또는 totalLabelKey+totalFormat 조합: 라벨(윗줄) + 값(아랫줄). size='small'은 라벨 생략
                 _jsx(ChartTotal, { label: isSmall ? undefined : `${t(control.period === 'week' ? 'manager.chart.weeklyPrefix' : 'manager.chart.monthlyPrefix')} ${t(totalLabelKey ?? labelAKey)}`, children: totalFormat ? (
                     // 숫자는 h0, 단위(시간/분/초 등)는 h5로 분리

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

@@ -85,8 +85,14 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
         /* 기기를 돌리면(가로↔세로) 옛 좌표에 남아 메뉴가 엉뚱한 곳·화면 밖에 떴다 — 다시 잰다 */
         onResize: 'reposition',
     });
-    /* 단추 이름에 개수를 붙인다 — 배지는 aria-hidden 이라 개수는 이름으로만 전해진다. */
+    /* 단추 이름에 개수를 붙인다 — 배지는 aria-hidden 이라 개수는 이름으로만 전해진다.
+       **그 칸의 수일 때만** 쓴다(`알림, 3개`). 닫힌 메뉴처럼 수가 남의 것이면 아래 `안에든수` 를 쓴다. */
     const nameWithCount = useCallback((label, count) => count > 0 ? t('nav.badgeLabel', { label, count, defaultValue: '{{label}}, {{count}}개' }) : label, [t]);
+    /* **같은 자리가 하나 더 있었다**((62) 를 고치며 셈이 찾았다, 2026-10-02). `…` 단추의 수는
+       넘친 항목·유틸 항목의 배지를 **합한** 것이라 그 단추의 수가 아니다 — `더보기, 3개` 는
+       "더보기에 3개가 들어 있다" 로 읽히는데, 안에 든 항목 수와도 다르다. `activeMore` 가
+       있을 때는 더 어긋났다: `설정, 3개` 의 3 은 알림의 것이었다. */
+    const 안에든수 = useCallback((label, count) => count > 0 ? t('nav.badgeInsideLabel', { label, count, defaultValue: '{{label}}, 안에 알림 {{count}}개' }) : label, [t]);
     const handleModeChange = useCallback(() => onAppModeChange?.(nextMode), [onAppModeChange, nextMode]);
     // 넘친 nav 항목 또는 유틸 항목이 현재 활성 상태면 … 버튼에 그 아이콘/선택표시를 반영
     const activeMore = useMemo(() => hiddenItems.find(it => !!it.key && it.key === activeKey) ?? moreItems.find(it => it.selected || (it.key && it.key === activeKey)), [hiddenItems, activeKey, moreItems]);
@@ -134,5 +140,5 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
                                     onChange?.(it.key);
                                     scrollNavTargetToTop(scrollContainer, 'BottomNav');
                                 } } }), count > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(count, 99), size: 24 }) }))] }, it.key ?? `__slot-${i}`));
-                }) }), showMore && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" }), _jsx("div", { className: "bottom-nav__right", children: _jsxs("div", { ref: moreRef, className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: activeMore?.icon ?? 'ellipsis', ariaLabel: nameWithCount(activeMore?.label ?? t('nav.more', '더보기'), moreBadge), selected: !!activeMore, className: "bottom-nav-item", onClick: handleToggleMore, "aria-expanded": moreOpen, "aria-controls": moreOpen ? moreMenuId : undefined }), moreBadge > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(moreBadge, 99), size: 24 }) })), moreOpen && createPortal(_jsx("div", { id: moreMenuId, role: "group", "aria-label": t('nav.moreMenu', '더보기 메뉴'), className: "tooltip-content", style: menuStyle, ref: menuRef, children: _jsx(MenuTooltip, { columns: moreColumns, onClose: handleCloseMore }) }), document.body)] }) })] }))] }));
+                }) }), showMore && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" }), _jsx("div", { className: "bottom-nav__right", children: _jsxs("div", { ref: moreRef, className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: activeMore?.icon ?? 'ellipsis', ariaLabel: 안에든수(activeMore?.label ?? t('nav.more', '더보기'), moreBadge), selected: !!activeMore, className: "bottom-nav-item", onClick: handleToggleMore, "aria-expanded": moreOpen, "aria-controls": moreOpen ? moreMenuId : undefined }), moreBadge > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(moreBadge, 99), size: 24 }) })), moreOpen && createPortal(_jsx("div", { id: moreMenuId, role: "group", "aria-label": t('nav.moreMenu', '더보기 메뉴'), className: "tooltip-content", style: menuStyle, ref: menuRef, children: _jsx(MenuTooltip, { columns: moreColumns, onClose: handleCloseMore }) }), document.body)] }) })] }))] }));
 }

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

@@ -4,14 +4,14 @@ import { useCallback, useMemo, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
 import { formatTimeHM } from '../utils/format';
-import { todayYmdOr } from '../utils/date';
+import { todayYmdOr, formatDateLocale } from '../utils/date';
 import './Calendar.css';
 import { pressable } from '../utils/pressable';
 function daysInMonth(year, month) { return new Date(year, month + 1, 0).getDate(); }
 function firstDayOfMonth(year, month) { return new Date(year, month, 1).getDay(); }
 /** @public */
 export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDayClick, today, }) {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
     /* '오늘' 은 KST 의 날 — 방문 날짜가 KST 달력(toKstYmd)이라, 기기 달력으로 열면 해외 기기에서 오늘 방문이 안 보이는 달에 있고
        오늘 표시가 다른 날에 붙었다(해외 기기 공식 지원) */
@@ -61,6 +61,8 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
                         const day = d;
                         const dateKey = fmtDate(day);
                         const dayVisits = visitsByDate[dateKey] ?? [];
+                        /* 낭독기에 나가는 '며칠' — 보는 locale 을 따라 글자꼴만 바뀌고 가리키는 날은 KST 하나다(utils/date 머리글) */
+                        const 날짜말 = formatDateLocale(dateKey, i18n.language);
                         const isDragOver = dragOverDate === dateKey;
                         return (_jsxs("div", { className: `calendar-cell${isToday(day) ? ' today' : ''}${isDragOver ? ' drag-over' : ''}${onDayClick ? ' calendar-cell--clickable' : ''}`, role: onDayClick ? 'button' : undefined, tabIndex: onDayClick ? 0 : undefined, "aria-label": onDayClick ? t('calendar.addOnDate', { date: dateKey }) : undefined, "aria-current": isToday(day) ? 'date' : undefined, onClick: onDayClick ? () => onDayClick(dateKey) : undefined, 
                             /* `<div role="button">` 은 브라우저가 Enter·Space 를 눌림으로 바꿔 주지 않는다 */
@@ -83,13 +85,18 @@ 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 }), 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) => {
+                            } : 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 ? () => {
                                             dragVisitId.current = null;
                                             setDragOverDate(null);
                                         } : undefined, onClick: onVisitClick ? (e) => { e.stopPropagation(); onVisitClick(v); } : undefined, ...pressable(onVisitClick ? () => onVisitClick(v) : undefined), "aria-label": [
+                                            // **며칠**이 빠져 있었다 — 칸 번호(1~31)는 `aria-hidden` 도 아니지만 이름표의
+                                            // 이름을 대체하므로 낭독기에는 "12시 55분 지한 예약" 만 가고, 어느 날 것인지는
+                                            // 안 간다. 격자 꼴(`gridcell`)로 날을 함께 읽히는 길도 있지만 그건 화살표
+                                            // 이동까지 약속하는 것이라, 지금은 이름 안에 날을 적는다(말귀 요청 (60)②).
+                                            날짜말,
                                             v.time ? formatTimeHM(v.time, t) : null,
                                             v.customer,
                                             t(v.status === 'noVisit' ? 'calendar.legend.noVisit'

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

@@ -55,6 +55,9 @@
   color: var(--color-main);
   padding: var(--spacing-xs) var(--spacing-m);
   cursor: pointer;
+  /* 안쪽 여백(8px)만으로도 이미 24 를 넘지만, **바닥을 적어 둔다** — 글꼴이 작아지면
+     조용히 24 아래로 내려가는 자리다(`test/rawButtonHitArea.test.ts` 가 이것을 묻는다). */
+  min-height: 24px;
 }
 
 .file-upload__browse-button:disabled {
@@ -97,6 +100,10 @@
   color: var(--color-darkGray);
 }
 
+/* 안에 든 것이 `<Icon size={14} />` 하나이고 여백이 없어 **14 x 14px** 이었다
+   ((61) 을 고치며 셈이 찾았다, 2026-10-02). 파일 목록은 줄마다 이 단추 하나뿐이라
+   옆으로 빗나가도 다른 단추를 누르지는 않지만, 2.5.8 의 24 에 한참 못 미친다.
+   아이콘은 그대로 14px — 투명한 상자만 24 가 된다. */
 .file-upload__remove-button {
   appearance: none;
   border: none;
@@ -107,6 +114,8 @@
   color: var(--color-gray);
   cursor: pointer;
   flex-shrink: 0;
+  min-width: 24px;
+  min-height: 24px;
 }
 
 .file-upload__remove-button:hover {

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

@@ -124,8 +124,15 @@ 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", useBorder: false, icon: 'menu', ariaLabel: onNotification && unreadCount && unreadCount > 0
-                                    ? t('nav.badgeLabel', { label: t('header.menuOpen', '메뉴 열기'), count: unreadCount, defaultValue: '{{label}}, {{count}}개' })
+    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', 
+                                /* **수가 이 단추의 것이 아니다**(말귀 요청 (62), 2026-10-02). `nav.badgeLabel` 은
+                                   "칸 이름 + 그 칸의 수" 라는 뜻이고, `SideNav`·`BottomNav`·`MenuTooltip` 셋은
+                                   `label` 이 그 수를 가진 칸의 이름이라 `알림, 3개` 로 말이 된다. 이 단추만
+                                   `label` 이 `메뉴 열기` 여서 "메뉴에 3개가 들어 있다" 로 읽혔다 — 열면 다섯이다.
+                                   그래서 **닫힌 것 안에 든 수**를 말하는 열쇠를 따로 쓴다(`nav.badgeLabel` 은
+                                   손대지 않는다 — 거기에 다른 뜻을 겹치면 맞는 세 쓰임이 서로를 막는다). */
+                                ariaLabel: onNotification && unreadCount && unreadCount > 0
+                                    ? t('nav.badgeInsideLabel', { 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, onFeedback: onFeedback, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, scrollContainer: scrollContainer, appMode: appMode, onAppModeChange: onAppModeChange })] }));
 }
 /**

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

@@ -62,7 +62,16 @@
   line-height: 1;
   color: var(--color-lightGray);
   cursor: pointer;
-  padding: 2px 6px;
+  /* 18px 글자에 위아래 2px 뿐이라 **22px** 이었다 — 2.5.8 의 24 에 2px 모자랐다
+     ((61) 을 고치며 셈이 찾았다, 2026-10-02). 보이는 것은 x 하나이고 배경이 없어,
+     상자만 24 로 키우면 눈에는 아무 변화가 없다. `top`·`right` 가 모서리를 잡으므로
+     자리도 안 밀린다. */
+  min-width: 24px;
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   border-radius: var(--radius-xs);
   transition: color 0.12s;
 }

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

@@ -99,7 +99,12 @@ export type PanelRowInput = Base & {
     disabled?: boolean;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     autoComplete?: string;
-    helperText?: string;
+    /** 칸 아래 안내 한 줄 — `aria-describedby` 로 **칸과 이어진다**(말귀 요청 (60)①, 2026-10-02).
+     *
+     *  `ReactNode` 다 — 앱이 `<span role="status">` 로 감싸 **값에 따라 바뀌는 안내**를
+     *  그 자리에서 알릴 수 있게 한 것이다. `error` 로 보내면 될 일이 아니다: `error` 는
+     *  `aria-invalid` 까지 세워 "틀린 값" 이라고 말하는데, 안내는 틀렸다는 말이 아니다. */
+    helperText?: ReactNode;
     /** 최대 글자 수 — 설정 시 입력 제한 + 박스 안쪽 글자수 카운터 표시 */
     maxLength?: number;
     /** 글자수 카운터 표시 여부 (maxLength 설정 시, 기본 true) */

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

@@ -74,6 +74,8 @@ export function PanelRow(props) {
     const toggleId = variant === 'toggle' ? `panel-toggle-${uid}` : undefined;
     // 오류 문구 id — 드롭다운 행은 트리거가 이 문구를 설명으로 잇는다(aria-invalid 만으로는 무엇이 틀렸는지 안 들린다)
     const errorId = error ? `panel-error-${uid}` : undefined;
+    /* 도움말은 variant 와 무관하게 한 자리에서 짓는다 — id 는 그릴 때와 걸 때 **같아야** 한다 */
+    const helperId = `panel-helper-${uid}`;
     if (variant === 'toggle') {
         const p = props;
         right = _jsx(Toggle, { checked: p.checked, onChange: p.onChange, id: toggleId });
@@ -111,7 +113,7 @@ export function PanelRow(props) {
     }
     else if (variant === 'input') {
         const p = props;
-        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, ghostText: p.ghostText, ghostHint: p.ghostHint, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
+        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, ghostText: p.ghostText, ghostHint: p.ghostHint, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required, ariaDescribedBy: p.helperText ? helperId : undefined }), p.helperText && _jsx("div", { id: helperId, className: "panel-row__helper caption-1", children: p.helperText })] }));
     }
     else if (variant === 'custom') {
         const p = props;

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

@@ -1,6 +1,6 @@
 import './RingChart.css';
 import type { ReactNode } from 'react';
-import type { ChartLegendItem } from './ChartSection';
+import type { ChartLegendItem, ChartSectionProps } from './ChartSection';
 /** 시맨틱 사이즈 → 지름(px)·링 두께(px) 프리셋 */
 export type RingChartSize = 'small' | 'medium' | 'large';
 /** @public */
@@ -44,6 +44,8 @@ export interface RingChartProps {
      * 감싼 카드로 렌더. 미지정 시 헤더 없는 순수 링만 렌더(기존 동작과 동일).
      */
     titleKey?: string;
+    /** 제목 머리글 급 — 그대로 `ChartSection` 에 넘긴다(`titleKey` 지정 시에만). `BarChartProps.titleLevel` 과 같은 뜻 */
+    titleLevel?: ChartSectionProps['titleLevel'];
     /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등 (titleKey 지정 시에만 사용) */
     headRight?: ReactNode;
     /** 제목 옆 아이콘(옅게 표시, StatChart와 동일한 톤) — 지정 시 headRight 자리에 렌더(titleKey 지정 시에만 사용) */
@@ -73,4 +75,4 @@ export interface RingChartProps {
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, onClick, ariaLabel, tooltip, ...ringProps }: RingChartProps): import("react").JSX.Element;
+export default function RingChart({ titleKey, titleLevel, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, onClick, ariaLabel, tooltip, ...ringProps }: RingChartProps): import("react").JSX.Element;

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

@@ -51,7 +51,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid = false, onClick, ariaLabel, tooltip, ...ringProps }) {
+export default function RingChart({ titleKey, titleLevel, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid = false, onClick, ariaLabel, tooltip, ...ringProps }) {
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
@@ -66,7 +66,7 @@ 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, onClick: onClick, ariaLabel: ariaLabel, tooltip: tooltip, 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 ? (
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, onClick: onClick, ariaLabel: ariaLabel, tooltip: tooltip, title: t(titleKey), titleLevel: titleLevel, 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 ? (
         /* 링도 같은 병이 있었다 — 기다림 상자 186px, 그려진 링은 지름(medium 120px)이다.
            **그려질 링과 같은 자리·같은 지름**의 뼈대를 세우고 그 안에서 기다린다
            (BarChart 와 같은 결, 사용자 지시 2026-09-17 "뼈대 먼저, 그 안에서 로딩"). */

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

@@ -17,6 +17,12 @@ export interface TextFieldProps {
     label?: string;
     /** 화면에 보이는 라벨 없이(placeholder만 쓸 때) 스크린리더용 이름을 지정. label이 있으면 무시됨 */
     ariaLabel?: string;
+    /** **바깥에서 그린 설명**의 id — 이 칸 안의 `helperText`·`error` id 와 **함께** 걸린다(덮지 않는다).
+     *
+     *  `PanelRow` 처럼 감싸는 쪽이 도움말을 제 자리에 그리는 자리가 있다. 전에는 그 글이 칸과
+     *  이어지지 않아, 보이기만 하고 낭독기에는 영 안 갔다(말귀 요청 (60)①, 2026-10-02).
+     *  빈칸 띄움으로 여러 개도 된다 — `aria-describedby` 는 id 목록이다. */
+    ariaDescribedBy?: string;
     /** 필수 항목 표시 (*) */
     required?: boolean;
     /** placeholder 텍스트 */

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

@@ -13,7 +13,7 @@ import { useIsoLayoutEffect } from '../hooks/useIsoLayoutEffect';
 import './TextField.css';
 /** @public */
 export default function TextField(props) {
-    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, ghostText, ghostHint, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, filterSuggestions, onSelectSuggestion, autoActiveFirst, openOnFocus = false, } = props;
+    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, ariaDescribedBy, required, placeholder, ghostText, ghostHint, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, filterSuggestions, onSelectSuggestion, autoActiveFirst, openOnFocus = false, } = props;
     // 읽기 전용·꺼진 칸은 후보로 값을 바꾸지 못한다 — 전에는 ↓·Enter·후보 누름으로 onChange 가 나갔다
     const suggestions = readOnly || disabled ? undefined : suggestionsProp;
     const { t } = useTranslation();
@@ -164,7 +164,9 @@ export default function TextField(props) {
         'aria-label': !label && ariaLabel ? ariaLabel : undefined,
         'aria-required': required,
         'aria-invalid': !!error,
-        'aria-describedby': (helperText || error) ? helperId : undefined,
+        /* 안의 것(helperText·error)과 바깥의 것(ariaDescribedBy)을 **잇는다** — 둘 중 하나로
+           덮으면 오류가 뜬 순간 바깥 도움말이 사라지거나, 반대로 오류가 안 읽힌다. */
+        'aria-describedby': [(helperText || error) ? helperId : null, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
         // aria-expanded·aria-controls·aria-activedescendant 는 콤보박스 속성이라 role 없이는
         // 스크린리더가 그냥 입력칸으로 읽고 "후보 n개"를 알리지 않는다 — 역할을 함께 준다.
         role: suggestions ? 'combobox' : undefined,

package/dist/packages/core/src/components/Tooltip/DebugTooltip.css

@@ -20,6 +20,7 @@
   background: var(--color-white);
   border: 1px solid rgba(11,43,47,0.06);
   padding: 8px 12px;
+  min-height: 24px;  /* 여백만으로 이미 넘지만 바닥을 적어 둔다 — test/rawButtonHitArea */
   border-radius: var(--radius-sm);
   font-size: 13px;
   cursor: pointer;

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

@@ -75,10 +75,26 @@
   margin-right: -8px;
 }
 
+/* 게시자 이름은 **글자 높이가 곧 누름감 높이**였다 — 320px 라이브 실측 29 x 13px
+   (말귀 요청 (61), 2026-10-02). WCAG 2.5.8(AA) 의 24x24 에 못 미치는데, 여기서는
+   **"사이가 떨어져 있으면 봐준다" 예외를 못 쓴다**: 빗나간 손가락이 빈 데가 아니라
+   260px 짜리 카드(`role="button"`)에 닿아 **게시자를 보려다 훈련 세트 상세가 열린다.**
+
+   `.top-banner__dot` 이 쓰는 투명 `::after` 는 여기서 못 쓴다 — 이 단추는 말줄임을
+   위해 `overflow: hidden` 이라 상자 밖으로 뻗은 의사요소가 **잘린다.** 그래서 안쪽
+   여백으로 넓히고 같은 값의 음수 바깥여백으로 되돌린다 — **보이는 자리와 자리차지는
+   그대로이고 누름감만 넓어진다**(카드 밑줄 간격이 안 밀린다).
+
+   **가로는 안 넓힌다.** 옆에 선 것(`.training-card__date`)은 누를 것이 아니라 그냥
+   글자라, 가로 방향은 2.5.8 의 간격 예외가 실제로 덮는다. 넓히면 날짜 글자 왼쪽을
+   눌러도 게시자가 열려 더 어긋난다. 막힌 쪽은 **세로** 였다. */
 .training-card__publisher {
   background: none;
   border: none;
   padding: 0;
+  min-height: 24px;
+  padding-block: 6px;
+  margin-block: -6px;
   color: var(--color-gray);
   cursor: pointer;
   font-size: 11px;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ChartHeadSegment } from './ChartSection';
+import type { ChartHeadSegment, ChartSectionProps } from './ChartSection';
 import type { MonthBarData } from './barChartData';
 /** @public */
 export interface BarChartControl {
@@ -61,6 +61,12 @@ export interface BarChartProps {
     barWidth?: number;
     /** 섹션 제목 i18n 키 */
     titleKey: string;
+    /** 제목을 머리글 몇 급으로 그릴지 — 그대로 `ChartSection` 에 넘긴다(말귀 요청 (60)③, 2026-10-02).
+     *
+     *  `ChartSection` 은 (51) 에서 급을 열었는데 **막대·링은 그 문을 안 달았다.** 그래서 칸을
+     *  부르는 쪽이 급을 못 정하고 늘 기본 3 이 나갔다 — 대시보드 제목이 `h1` 이면 층이
+     *  h1 → h3 로 한 급 비어 읽힌다. 자세한 뜻은 `ChartSectionProps.titleLevel` 참고. */
+    titleLevel?: ChartSectionProps['titleLevel'];
     /** 구간(월) 키 → 주별/일별 데이터 */
     data: Record<string, MonthBarData>;
     colorA: string;

package/dist/packages/core/src/i18n/locales/en.json

@@ -191,7 +191,8 @@
         "company": "Company Info",
         "more": "More",
         "moreMenu": "More menu",
-        "badgeLabel": "{{label}}, {{count}}"
+        "badgeLabel": "{{label}}, {{count}}",
+        "badgeInsideLabel": "{{label}}, {{count}} notifications inside"
     },
     "settings": {
         "language": {

package/dist/packages/core/src/i18n/locales/ko.json

@@ -189,7 +189,8 @@
         "company": "업체정보",
         "more": "더보기",
         "moreMenu": "더보기 메뉴",
-        "badgeLabel": "{{label}}, {{count}}개"
+        "badgeLabel": "{{label}}, {{count}}개",
+        "badgeInsideLabel": "{{label}}, 안에 알림 {{count}}개"
     },
     "settings": {
         "language": {

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.247.0";
+export declare const CORE_VERSION = "0.249.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.247.0';
+export const CORE_VERSION = '0.249.0';