@ihabdevteam/core 0.255.0 → 0.257.0

package/dist/ihabdevteam-core.d.ts

@@ -844,7 +844,7 @@ export declare interface ButtonProps {
     type?: ButtonLayoutType;
     /**
      * DOM 의 button type 속성. `type` 은 레이아웃 종류라 이름이 겹쳐 따로 둔다.
-     * 폼 안에서는 지정하지 않으면 브라우저 기본값인 'submit' 으로 동작한다.
+     * 기본값은 'button'. 폼을 제출하려면 'submit', 초기화하려면 'reset'을 명시한다.
      */
     htmlType?: 'button' | 'submit' | 'reset';
     /**
@@ -1651,7 +1651,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.255.0";
+export declare const CORE_VERSION = "0.257.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -4204,8 +4204,16 @@ export declare type PanelElement = HTMLDivElement & {
 };
 
 /** @public */
-export declare function PanelGrid({ cols, children }: {
+export declare function PanelGrid({ cols, layout, gap, collapseAt, className, style, children, }: {
     cols?: number;
+    /** grid: 기존 행·셀 배치. columns: 콘텐츠 높이를 유지하며 위에서 아래로 배치 */
+    layout?: 'grid' | 'columns';
+    /** 숫자는 px, 문자열은 CSS 길이 또는 디자인 토큰. 기본 1px */
+    gap?: number | string;
+    /** 컨테이너 너비가 이 값(px) 이하이면 1열. 생략하면 열 개수 유지 */
+    collapseAt?: number;
+    className?: string;
+    style?: CSSProperties;
     children: ReactNode;
 }): JSX.Element;
 
@@ -6409,11 +6417,24 @@ export declare interface SectionProps {
     type?: SectionType;
     title?: ReactNode;
     /**
-     * 제목을 이 단계의 제목 태그(`h1`~`h6`)로 그린다 — **주는 것을 권한다.** 페이지 제목 아래 구획이면 2, 그 아래면 3 처럼 문서의 제목 순서에 맞춰 주면 낭독기의 제목 목록으로 이 구획에 바로 갈 수 있다.
+     * 제목을 이 단계의 제목 태그(`h1`~`h6`)로 그린다. **기본 2** — 페이지 제목(`h1`) 아래 구획을
+     * 가리킨다. 그 아래로 들어가면 3·4 로 내린다. 글자 모양은 어느 쪽이든 `type` 이 정한다.
+     *
+     * **전에는 기본이 `div` 였고 "주는 것을 권한다" 고만 적어 두었다**(2026-10-02 바꿈).
+     * 그 권고를 **아무도 안 따랐다** — 말귀 앱 쉰일곱 자리 중 주는 자리가 **0**, 그리고
+     * **코어 제 안의 열네 자리도 0** 이었다. 그래서 칸 다섯이 선 화면에 머리글이 `h1` 하나뿐인
+     * 꼴이 났다. 형제 다섯(`ChartSection` 3 · `Panel` 2 · `FilterPanel` 2 · `TrainingCard` 3 ·
+     * `TrainingCardGroup` 3)은 전부 **안 줘도 머리글이 서는데** 이것만 달랐다 —
+     * 같은 물음에 한 집안이 두 가지로 답하고 있었다.
+     *
+     * **값을 치른다**: 급을 안 주던 자리가 한꺼번에 `h2` 가 된다. 깊이 든 구획이면 층이 한 급
+     * 건너뛴 것처럼 읽힐 수 있다 — 그 자리는 숫자를 적어 고친다. **급이 틀린 것은 머리글이
+     * 아예 없는 것보다 가볍다**: 틀려도 건너뛸 자리는 생기고, 없으면 길이 없다.
      *
-     * 주지 않으면 `div` 로 그려 제목 목록에 안 나온다. 글자 모양은 어느 쪽이든 `type` 이 정한다.
+     * `0` 을 주면 전과 같이 `div` 로 그린다(급을 부르는 쪽이 못 정하는 자리용 —
+     * `ChartSection.titleLevel` 과 같은 탈출구).
      */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    headingLevel?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     icon?: string;
     action?: ReactNode;
     disc?: ReactNode;
@@ -7428,10 +7449,26 @@ export declare type TableProps<T extends {
      */
     headerGroups?: TableHeaderGroup[];
     items?: T[];
+    /**
+     * 줄 하나를 칸 배열로 그린다.
+     *
+     * **`rowLabel` 을 준 칸은 그 안이 진짜 `<button>` 이 된다**(말귀 요청 (56)(나), 2026-10-02).
+     * (가) 에서 줄이 `role="button"` 을 잃으면서 **"눌릴 수 있다" 는 말**이 사라졌고,
+     * `aria-describedby` 로 메워 뒀다. 그 자리를 제대로 메우는 길이 이것이다 — 줄 안에
+     * **이름 있는 진짜 단추**를 세운다.
+     *
+     * 왜 코어가 못 정하고 부르는 쪽이 짚어야 하나: **단어 관리의 첫 칸은 체크박스**다.
+     * 첫 칸을 단추로 감싸면 단추 안에 조작이 또 들어간다(오늘 (65)·0.254.0 에서 걷은 그 꼴).
+     * 그리고 코어는 `content` 가 사람 이름인지 날짜인지 모른다. 그래서 **어느 칸이 줄을
+     * 가리키는 이름인지**를 부르는 쪽이 적는다.
+     *
+     * 안 주면 전과 같다 — 줄이 `tabIndex` 와 설명으로만 눌린다((가) 그대로).
+     */
     renderRow: (item: T) => Array<{
         content: ReactNode;
         className?: string;
         style?: CSSProperties;
+        rowLabel?: string;
     }>;
     onRowClick?: (item: T) => void;
     /**
@@ -8323,7 +8360,7 @@ export declare interface TrainingBlockProps {
 }
 
 /** @public */
-export declare function TrainingCard({ title, titleLevel, description, topActions, children, footerLeft, footerRight, onClick, draggable, onDragStart, onDragEnd, className, }: TrainingCardProps): JSX.Element;
+export declare function TrainingCard({ title, titleLevel, description, topActions, children, footerLeft, footerRight, ariaLabel, onClick, draggable, onDragStart, onDragEnd, className, }: TrainingCardProps): JSX.Element;
 
 /** @public */
 export declare function TrainingCardGroup({ title, titleLevel, count, collapsed, onToggle, sort, actions, empty, emptyContent, dragOver, onDragOver, onDragLeave, onDrop, children, className, }: TrainingCardGroupProps): JSX.Element;
@@ -8337,7 +8374,14 @@ declare type TrainingCardGroupProps = {
      *  안 잡혔다. 그 안의 `접기`·`정렬` 은 그룹마다 같은 이름이라, 낭독기로 단추 목록을
      *  부르면 `접기` 가 세 번 선다 — **어느 그룹의 것인지 가릴 길이 없었다.**
      *
-     *  이름 있는 지역이 서면 단추 이름은 짧은 채로 둬도 된다(지역이 가린다).
+     *  **전에 여기 "이름 있는 지역이 서면 단추 이름은 짧은 채로 둬도 된다(지역이 가린다)" 고
+     *  적어 두었는데, 그 말이 틀렸다**(2026-10-02 바로잡음). `role="group"` 은 **landmark 가
+     *  아니다.** 초점이 묶음 안으로 들어가 읽을 때는 묶음 이름이 먼저 읽히니 맞지만,
+     *  **낭독기로 단추 목록을 훑는 길**에서는 묶음 맥락이 안 따라온다 — 바로 윗줄에 적은
+     *  "`접기` 가 세 번 선다" 가 그대로 남는다. 말귀가 그 한 줄을 믿고 앱 세 파일에서 그룹
+     *  이름을 걷으려다 물어 와서 드러났다.
+     *  그래서 **이 조각이 제 단추에 묶음 이름을 직접 단다**(아래 `접기`·`정렬`). 부르는 쪽이
+     *  actions 로 넘기는 단추에도 묶음 이름을 다는 쪽이 맞다 — 걷지 마라.
      *  `0` 을 주면 전과 같이 `span` 으로 그린다. */
     titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     /** 그룹 제목 — 문자열이면 제목으로 감싸고, 노드면 그대로 렌더(예: 인라인 이름변경 입력) */
@@ -8411,6 +8455,20 @@ export declare type TrainingCardProps = {
     description?: ReactNode;
     /** 우측 상단 액션 영역 (좋아요/다운로드, ⋯ 메뉴 등) — 클릭이 카드로 전파되지 않음 */
     topActions?: ReactNode;
+    /**
+     * **카드가 눌릴 때 읽히는 이름**(말귀 요청 (65), 2026-10-02).
+     *
+     * 안 주면 `title` 을 쓴다. 안 쓰고 두면 `role="button"` 의 이름이 **안 글자 전부**로
+     * 지어지는데, 이 카드는 안에 `topActions`(진짜 `<button>`)를 품으므로 **그 단추의 이름까지
+     * 삼킨다** — 말귀 실측(나의 단어훈련 375px, 카드 여섯 장 전부):
+     * `훈련하자!! (복사) 훈련하자!! (복사) 더보기 음절 2개 합치기 1 …` 로, 제목이 두 번 읽히고
+     * 사이에 `더보기` 가 꼈다. `TrainingBlockButton` 이 이미 같은 길로 풀어 둔 자리다.
+     *
+     * **값을 치른다** — 갈래별 수와 마지막 쓴 날이 이름에서 빠진다. 그것까지 들려주려면
+     * 부르는 쪽이 여기에 **갖춰 쓴 이름**을 넘겨라(`'훈련하자!! · 음절 합치기 1 · 3개월 전'`).
+     * 코어는 children 의 뜻을 모르므로 제목까지만 지을 수 있다.
+     */
+    ariaLabel?: string;
     /** 본문 영역 콘텐츠 (타입 칩, 단어 뱃지, 빈 상태 등) */
     children?: ReactNode;
     /** 풋터 좌측 (게시자·날짜 등) */

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

@@ -10,7 +10,7 @@ import { isTouchPointer, recentlyTouched, useTouchToggle } from '../hooks/touchT
 /* **ref 는 forwardRef 로 받는다** — React 19 는 ref 를 props 로 넘기지만 peer 는 16.8~ 라, React 18(kscan) 에서는 함수 컴포넌트에 준
    ref 가 버려진다. 게다가 전에는 안쪽 ref(`btnRef`)가 props 에서 온 ref 를 덮어써 19 에서도 부르는 쪽 ref 가 비었다. 두 ref 를 잇는다. */
 function ButtonInner(props, forwardedRef) {
-    const { size = 48, type: explicitType, htmlType, href, target, rel, icon, rightIcon, label: labelProp, count, subLabel, children, ariaLabel, variant = 'default', align = 'center', nowrap = false, selected, toggleable = false, ariaExpanded, ariaControls, disabled = false, useLabel = true, useBorder = true, useBG = true, useDisabledCovered = false, useDisabledInvisible = false, width, minWidth, onClick, onDisabledClick, showTooltipInfo = false, tooltipInfoText = null, tooltipDescription = null, tooltipOnly = false, iconSize = 'medium', iconColor, shape = 'rounded', color, className, ...rest } = props;
+    const { size = 48, type: explicitType, htmlType = 'button', href, target, rel, icon, rightIcon, label: labelProp, count, subLabel, children, ariaLabel, variant = 'default', align = 'center', nowrap = false, selected, toggleable = false, ariaExpanded, ariaControls, disabled = false, useLabel = true, useBorder = true, useBG = true, useDisabledCovered = false, useDisabledInvisible = false, width, minWidth, onClick, onDisabledClick, showTooltipInfo = false, tooltipInfoText = null, tooltipDescription = null, tooltipOnly = false, iconSize = 'medium', iconColor, shape = 'rounded', color, className, ...rest } = props;
     const sizeKey = typeof size === 'string' && isNaN(Number(size))
         ? size.toLowerCase()
         : String(Number(size) || 48);

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

@@ -147,6 +147,12 @@
   background: currentColor;
   flex-shrink: 0;
 }
+/* **범례와 같은 세 색**((66), 2026-10-02). 전에는 `currentColor` 하나라 예약·미방문도
+   '방문' 색으로 섰다 — 머리 바로 위 범례는 셋이라고 적어 둔 채로. 범례의
+   `--main`·`--sub`·`--disabled` 와 **같은 값을 쓴다**: 둘이 갈리면 범례가 거짓말이 된다. */
+.calendar-cell__visit-dot--visited   { background: var(--color-main); }
+.calendar-cell__visit-dot--scheduled { background: var(--color-sub); }
+.calendar-cell__visit-dot--noVisit   { background: var(--color-disabled); }
 /* 이름표 한 줄("13시 33분 · 지한")이 담기려면 100px 은 있어야 한다 — 그 밑에서는 접는다.
    창이 아니라 **칸 제 폭**으로 정한다: 같은 창에서도 담긴 카드가 좁으면 칸이 좁아진다.
    재는 값은 칸의 **안쪽**(여백 8px씩 뺀 값)이라, 118px 짜리 칸이면 102 로 이 문턱을 넘는다. */

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

@@ -85,7 +85,29 @@ 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 && (() => {
+                                    /* **접힌 꼴이 세 갈래를 하나로 뭉갰다**(말귀 요청 (66), 2026-10-02).
+                                       점은 늘 `--color-main`(= 범례의 '방문') 이고 이름표는 늘 `방문 N건` 이라,
+                                       **아직 안 온 예약과 안 온 것(미방문)을 치료사가 "왔다" 로 읽었다** —
+                                       말귀 실측: 그 달 자취가 예약 하나뿐인데 `방문 1건` · `rgb(73,156,223)`.
+                                       드문 자리가 아니다: 375 에서 칸이 37px, **1189 에서도 111px** 이라 둘 다
+                                       이 꼴이 선다. 넓은 칸의 이름표는 멀쩡해서 그쪽만 보면 안 보인다.
+                                       갈래가 하나면 그 갈래 말로, 섞였으면 갈라 센다. */
+                                    const 갈래 = [
+                                        { key: 'visited', 말: t('calendar.legend.visited', '방문'),
+                                            수: dayVisits.filter(v => (v.status ?? 'visited') === 'visited').length },
+                                        { key: 'scheduled', 말: t('calendar.legend.scheduled', '예약'),
+                                            수: dayVisits.filter(v => v.status === 'scheduled').length },
+                                        { key: 'noVisit', 말: t('calendar.legend.noVisit', '미방문'),
+                                            수: dayVisits.filter(v => v.status === 'noVisit').length },
+                                    ].filter(g => g.수 > 0);
+                                    /* 방문뿐인 날은 전 글귀 그대로 간다 — 그 열쇠의 뜻("방문 N건")이 실제로 맞는
+                                       자리이고, 부르는 쪽이 덮어 둔 글도 그대로 산다. */
+                                    const 센말 = 갈래.length === 1 && 갈래[0].key === 'visited'
+                                        ? t('calendar.visitCount', { count: dayVisits.length, defaultValue: '방문 {{count}}건' })
+                                        : 갈래.map(g => t('calendar.statusCount', { label: g.말, count: g.수, defaultValue: '{{label}} {{count}}건' })).join(' · ');
+                                    return (_jsxs("span", { className: "calendar-cell__visit-count caption-1", "aria-label": `${날짜말} ${센말}`, children: [갈래.map(g => (_jsx("span", { className: `calendar-cell__visit-dot calendar-cell__visit-dot--${g.key}`, "aria-hidden": "true" }, g.key))), 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/Panel.css

@@ -129,18 +129,40 @@
 .panel-grid {
   display: grid;
   grid-template-columns: repeat(var(--panel-grid-cols, 2), 1fr);
-  gap: 1px;
+  gap: var(--panel-grid-gap, 1px);
   padding-bottom: 1px;
   background: var(--color-darkWhite);
   overflow: hidden;
 }
-.panel-grid .panel-row {
+.panel-grid:not(.panel-grid--columns) .panel-row {
   background: var(--color-white);
 }
-.panel-grid .panel-row + .panel-row {
+.panel-grid:not(.panel-grid--columns) .panel-row + .panel-row {
   border-top: none;
 }
 
+/* 독립 카드: 행 높이를 맞추지 않고 열 안에서 위→아래 순서로 쌓는다. */
+.panel-grid--columns {
+  display: block;
+  column-count: var(--panel-grid-cols, 2);
+  column-gap: var(--panel-grid-gap, 1px);
+  padding-bottom: 0;
+  background: transparent;
+  overflow: visible;
+}
+.panel-grid--columns > * {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
+  break-inside: avoid;
+  margin-bottom: var(--panel-grid-gap, 1px);
+}
+.panel-grid--columns > :last-child {
+  margin-bottom: 0;
+}
+
 /* ── Panel row state (loading / empty) ──────────────────────────────── */
 .panel-row--empty {
   justify-content: center;

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type CSSProperties } from 'react';
 import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {
@@ -64,8 +64,16 @@ interface PanelProps {
 }
 export default function Panel({ title, titleLevel, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
 /** @public */
-export declare function PanelGrid({ cols, children }: {
+export declare function PanelGrid({ cols, layout, gap, collapseAt, className, style, children, }: {
     cols?: number;
+    /** grid: 기존 행·셀 배치. columns: 콘텐츠 높이를 유지하며 위에서 아래로 배치 */
+    layout?: 'grid' | 'columns';
+    /** 숫자는 px, 문자열은 CSS 길이 또는 디자인 토큰. 기본 1px */
+    gap?: number | string;
+    /** 컨테이너 너비가 이 값(px) 이하이면 1열. 생략하면 열 개수 유지 */
+    collapseAt?: number;
+    className?: string;
+    style?: CSSProperties;
     children: ReactNode;
 }): import("react").JSX.Element;
 export { PanelRow, PanelRowDevice } from './PanelRow';

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
 import { PanelRow } from './PanelRow';
-import { Children } from 'react';
+import { Children, useEffect, useRef, useState } from 'react';
 import Icon from './Icon';
 import './Panel.css';
 export default function Panel({ title, titleLevel = 2, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, scrollbarGutter = 'auto', compactRows = false, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
@@ -23,7 +23,25 @@ export default function Panel({ title, titleLevel = 2, icon, disc, actions, size
 }
 // ── PanelGrid ──────────────────────────────────────────────────────────────
 /** @public */
-export function PanelGrid({ cols = 2, children }) {
-    return (_jsx("div", { className: "panel-grid", style: { '--panel-grid-cols': cols }, children: children }));
+export function PanelGrid({ cols = 2, layout = 'grid', gap = 1, collapseAt, className, style, children, }) {
+    const ref = useRef(null);
+    const [width, setWidth] = useState();
+    useEffect(() => {
+        const element = ref.current;
+        if (collapseAt === undefined || !element)
+            return;
+        setWidth(element.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [collapseAt]);
+    const collapsed = collapseAt !== undefined && width !== undefined && width <= collapseAt;
+    return (_jsx("div", { ref: ref, className: cx('panel-grid', layout === 'columns' && 'panel-grid--columns', className), style: {
+            '--panel-grid-cols': collapsed ? 1 : cols,
+            '--panel-grid-gap': typeof gap === 'number' ? `${gap}px` : gap,
+            ...style,
+        }, children: children }));
 }
 export { PanelRow, PanelRowDevice } from './PanelRow'; // 갈라 나간 뒤에도 이 경로로 나간다

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

@@ -140,12 +140,16 @@
   justify-content: flex-end;
   min-width: 0;
 }
-/* **덩이째 줄을 바꾸고도 넘치면 안쪽에서 한 번 더 바꾼다.** 단추는 제 최소 폭(120px)으로 버티므로
-   덩이에 `flex-shrink: 0` 을 두면 그대로 창 밖으로 나가 잘린다 — 375px 에서 오른쪽 단추 둘이
-   25px 넘쳐 잘렸다(실측 2026-09-24). 0.185.0 에서 바닥이 잘려 못 누르던 그 꼴이다.
-   최소 폭을 0 으로 내려, 줄이 바뀌든 줄어들든 **잘리지는 않게** 한다. */
-.popup-footer__start > *,
-.popup-footer__end > * {
+/* **덩이째 줄을 바꾸고도 넘치면 안쪽에서 한 번 더 바꾼다** — 375px 에서 오른쪽 단추 둘이 25px 넘쳐
+   잘렸다(실측 2026-09-24). 0.185.0 에서 바닥이 잘려 못 누르던 그 꼴이다.
+   그 몫은 **덩이 제 `min-width: 0`(위) + `flex-wrap: wrap`** 이 한다 — 덩이가 줄면 안쪽 단추가
+   **줄을 바꿔** 서지, 글자가 쪼그라들지 않는다.
+
+   그래서 아래 `min-width: 0` 은 **단추가 아닌 것에만** 건다. 2026-09-24 에는 단추까지 눌렀는데,
+   그러면 넉넉한 폭에서도 `.button48--bar` 의 제 밑폭(160px)이 사라져 글자 폭까지 쪼그라들었다
+   (말귀 실측 2026-10-02: '저장' 95px). 잘림은 줄바꿈으로 막고, 밑폭은 단추가 지킨다. */
+.popup-footer__start > *:not(.button),
+.popup-footer__end > *:not(.button) {
   min-width: 0;
 }
 .popup--closing { opacity: 0; transition: opacity 260ms ease }

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

@@ -6,11 +6,24 @@ export interface SectionProps {
     type?: SectionType;
     title?: ReactNode;
     /**
-     * 제목을 이 단계의 제목 태그(`h1`~`h6`)로 그린다 — **주는 것을 권한다.** 페이지 제목 아래 구획이면 2, 그 아래면 3 처럼 문서의 제목 순서에 맞춰 주면 낭독기의 제목 목록으로 이 구획에 바로 갈 수 있다.
+     * 제목을 이 단계의 제목 태그(`h1`~`h6`)로 그린다. **기본 2** — 페이지 제목(`h1`) 아래 구획을
+     * 가리킨다. 그 아래로 들어가면 3·4 로 내린다. 글자 모양은 어느 쪽이든 `type` 이 정한다.
      *
-     * 주지 않으면 `div` 로 그려 제목 목록에 안 나온다. 글자 모양은 어느 쪽이든 `type` 이 정한다.
+     * **전에는 기본이 `div` 였고 "주는 것을 권한다" 고만 적어 두었다**(2026-10-02 바꿈).
+     * 그 권고를 **아무도 안 따랐다** — 말귀 앱 쉰일곱 자리 중 주는 자리가 **0**, 그리고
+     * **코어 제 안의 열네 자리도 0** 이었다. 그래서 칸 다섯이 선 화면에 머리글이 `h1` 하나뿐인
+     * 꼴이 났다. 형제 다섯(`ChartSection` 3 · `Panel` 2 · `FilterPanel` 2 · `TrainingCard` 3 ·
+     * `TrainingCardGroup` 3)은 전부 **안 줘도 머리글이 서는데** 이것만 달랐다 —
+     * 같은 물음에 한 집안이 두 가지로 답하고 있었다.
+     *
+     * **값을 치른다**: 급을 안 주던 자리가 한꺼번에 `h2` 가 된다. 깊이 든 구획이면 층이 한 급
+     * 건너뛴 것처럼 읽힐 수 있다 — 그 자리는 숫자를 적어 고친다. **급이 틀린 것은 머리글이
+     * 아예 없는 것보다 가볍다**: 틀려도 건너뛸 자리는 생기고, 없으면 길이 없다.
+     *
+     * `0` 을 주면 전과 같이 `div` 로 그린다(급을 부르는 쪽이 못 정하는 자리용 —
+     * `ChartSection.titleLevel` 과 같은 탈출구).
      */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    headingLevel?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     icon?: string;
     action?: ReactNode;
     disc?: ReactNode;

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

@@ -8,7 +8,7 @@ const TITLE_CLASS = {
     popup: 'h5',
 };
 /** @public */
-export default function Section({ type = 'page', title, headingLevel, icon, action, disc, children, inGrid = false, className, style }) {
+export default function Section({ type = 'page', title, headingLevel = 2, icon, action, disc, children, inGrid = false, className, style }) {
     const titleClass = TITLE_CLASS[type];
     // action·icon 만 줘도 머리를 그린다 — 제목·설명이 없으면 추가 단추가 조용히 버려졌다
     const hasHeader = title || disc || action || icon;

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

@@ -34,10 +34,26 @@ export type TableProps<T extends {
      */
     headerGroups?: TableHeaderGroup[];
     items?: T[];
+    /**
+     * 줄 하나를 칸 배열로 그린다.
+     *
+     * **`rowLabel` 을 준 칸은 그 안이 진짜 `<button>` 이 된다**(말귀 요청 (56)(나), 2026-10-02).
+     * (가) 에서 줄이 `role="button"` 을 잃으면서 **"눌릴 수 있다" 는 말**이 사라졌고,
+     * `aria-describedby` 로 메워 뒀다. 그 자리를 제대로 메우는 길이 이것이다 — 줄 안에
+     * **이름 있는 진짜 단추**를 세운다.
+     *
+     * 왜 코어가 못 정하고 부르는 쪽이 짚어야 하나: **단어 관리의 첫 칸은 체크박스**다.
+     * 첫 칸을 단추로 감싸면 단추 안에 조작이 또 들어간다(오늘 (65)·0.254.0 에서 걷은 그 꼴).
+     * 그리고 코어는 `content` 가 사람 이름인지 날짜인지 모른다. 그래서 **어느 칸이 줄을
+     * 가리키는 이름인지**를 부르는 쪽이 적는다.
+     *
+     * 안 주면 전과 같다 — 줄이 `tabIndex` 와 설명으로만 눌린다((가) 그대로).
+     */
     renderRow: (item: T) => Array<{
         content: ReactNode;
         className?: string;
         style?: CSSProperties;
+        rowLabel?: string;
     }>;
     onRowClick?: (item: T) => void;
     /**

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

@@ -22,8 +22,13 @@ import useMediaQuery from '../hooks/useMediaQuery';
 /* 칸 하나 — `role="cell"` 이라야 낭독기가 **낱낱으로** 읽는다(말귀 요청 (56), 2026-10-02).
    역할이 없던 때는 줄 전체가 한 덩어리 글로 읽혀 `홍길동 010-1234-5678 2026-09-30 활성`
    이 한 호흡에 나갔다 — 어디까지가 이름이고 어디부터 전화인지 소리로는 알 수 없었다. */
-function TableCell({ children, className, style }) {
-    return _jsx("div", { role: "cell", className: className ? `table-cell ${className}` : 'table-cell', style: style, children: children });
+function TableCell({ children, className, style, rowLabel, onRowClick }) {
+    return (_jsx("div", { role: "cell", className: className ? `table-cell ${className}` : 'table-cell', style: style, children: rowLabel && onRowClick
+            /* **진짜 `<button>` 이라 Enter·Space 는 브라우저가 처리한다** — 손으로 키를 붙이지
+               않는다(`TableField` 의 머리 단추와 같은 본). 클릭은 줄로 올라가 `onRowClick` 이
+               한 번 불린다. 겉모양은 CSS 가 지운다(`.table-cell__row-button`). */
+            ? _jsx("button", { type: "button", className: "table-cell__row-button", "aria-label": rowLabel, children: children })
+            : children }));
 }
 /**
  * 줄 하나 — **`role="row"` 다. 전에는 눌릴 수 있으면 `role="button"` 이었다**(말귀 요청 (56)).
@@ -40,7 +45,7 @@ function TableCell({ children, className, style }) {
  * `aria-describedby` 로 "줄을 누르면 자세히 본다" 를 붙여 메운다. 진짜 단추를 줄 안에
  * 세우는 쪽은 다음 걸음이다 — 그때는 줄 이름을 알려 주는 prop 이 하나 필요하다.
  */
-function TableRow({ variant = 'default', children, className, draggable, onClick, onMouseEnter, onMouseLeave, onDragStart, onDragEnd, expandedContent, colSpan, describedBy }) {
+function TableRow({ variant = 'default', children, className, draggable, onClick, onMouseEnter, onMouseLeave, onDragStart, onDragEnd, expandedContent, colSpan, describedBy, rowHasButton }) {
     const handleKeyDown = useCallback((e) => {
         if (!onClick)
             return;
@@ -64,7 +69,10 @@ function TableRow({ variant = 'default', children, className, draggable, onClick
     return (
     /* 겉싸개는 **나무에서 지운다** — `table > row` 사슬 사이에 역할 없는 마디가 끼면
        그 아래 `row` 가 표의 줄로 안 잡힌다. 자리 잡기(테두리·세로 쌓기)는 그대로다. */
-    _jsxs("div", { role: "presentation", className: "table-row-wrap", children: [_jsx("div", { className: className ? `table-row ${className}` : 'table-row', draggable: draggable, onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDragStart: onDragStart, onDragEnd: onDragEnd, role: "row", tabIndex: onClick ? 0 : undefined, "aria-describedby": onClick ? describedBy : undefined, children: children }), expandedContent && (_jsx("div", { role: "row", className: "table-row-expand", children: _jsx("div", { role: "cell", "aria-colspan": colSpan, className: "table-row-expand__cell", children: expandedContent }) }))] }));
+    _jsxs("div", { role: "presentation", className: "table-row-wrap", children: [_jsx("div", { className: className ? `table-row ${className}` : 'table-row', draggable: draggable, onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDragStart: onDragStart, onDragEnd: onDragEnd, role: "row", 
+                /* 줄 안에 이름 있는 단추가 섰으면 **그쪽이 자판 길이다** — 줄까지 정지점이면 한 줄에
+                   두 번 멈춘다. 마우스로 줄 아무 데나 누르는 길은 `onClick` 으로 그대로 남는다. */
+                tabIndex: onClick && !rowHasButton ? 0 : undefined, "aria-describedby": onClick && !rowHasButton ? describedBy : undefined, children: children }), expandedContent && (_jsx("div", { role: "row", className: "table-row-expand", children: _jsx("div", { role: "cell", "aria-colspan": colSpan, className: "table-row-expand__cell", children: expandedContent }) }))] }));
 }
 function SortArrow({ dir }) {
     const Icon = dir === 'asc' ? ChevronUp : ChevronDown;
@@ -540,6 +548,10 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
                                         // 옆의 핸들러들처럼 있을 때만 넘긴다. 항상 함수를 만들어 넘기면
                                         // TableRow 가 "클릭 가능"으로 보고 role="button" · tabIndex=0 을 붙여,
                                         // 클릭 동작이 없는 표의 모든 행이 버튼으로 읽히고 탭 정지점이 된다.
-                                        onClick: 눌림 ? () => onRowClick(item) : undefined, colSpan: fields.length || undefined, describedBy: 줄설명id, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, children: cell.content }, i))) }, item.id != null ? `${typeof item.id}:${item.id}` : `__idx:${idx}`));
+                                        onClick: 눌림 ? () => onRowClick(item) : undefined, colSpan: fields.length || undefined, 
+                                        /* **줄 안에 진짜 단추가 서면 줄은 정지점에서 내린다** — 한 가지 일에
+                                           정지점이 둘이면 자판으로 도는 사람이 같은 줄을 두 번 잡는다(0.254.0 에서
+                                           접기 머리에 걷은 그 꼴). 설명도 그때는 필요 없다 — 단추가 제 이름으로 말한다. */
+                                        rowHasButton: renderRow(item).some(c => !!c.rowLabel), describedBy: 줄설명id, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, rowLabel: 눌림 ? cell.rowLabel : undefined, onRowClick: 눌림 ? () => onRowClick(item) : undefined, children: cell.content }, i))) }, item.id != null ? `${typeof item.id}:${item.id}` : `__idx:${idx}`));
                                 }) })] }))] })] }));
 }

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

@@ -10,3 +10,32 @@
      그려져 두 열의 글자가 포개졌다(머리는 멀쩡한데 본문만). 같은 규칙으로 맞춘다. */
   overflow: hidden;
 }
+
+/* **줄을 가리키는 칸의 진짜 단추**(말귀 요청 (56)(나), 2026-10-02).
+   (가) 에서 줄이 `role="button"` 을 잃어 "눌릴 수 있다" 는 말이 사라졌다 —
+   `aria-describedby` 로 메워 뒀던 자리를 이름 있는 진짜 단추로 제대로 메운다.
+   **겉모양은 그대로여야 한다** — 칸 안 글자가 단추처럼 보이면 표가 단추밭이 된다.
+   그래서 단추의 기본 꼴을 다 걷고 글자만 남긴다. 초점 테두리는 남긴다(어디 있는지 보여야 한다). */
+.table-cell__row-button {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  /* **칸을 꽉 채운다** — 글자 옆 빈 자리를 눌러도 줄이 열리던 것이 그대로 산다. 세로도
+     채워야 누름감이 줄 키(48~64px)를 그대로 받는다(`test/rawButtonHitArea.test.ts` 가 이
+     `align-self: stretch` 를 키의 바닥으로 읽는다 — `.table-field__button` 과 같은 본).
+     속은 칸과 **같은 결로** 놓는다: 칸이 `flex` + 가운데 맞춤이라 단추도 그래야 글이 안 뜬다. */
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: inherit;
+  word-break: inherit;
+}

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

@@ -182,15 +182,35 @@ export default function TrainingBlockButton(props) {
         ? (유형열쇠 ? t(`trainingType.${유형열쇠}.title`, { defaultValue: 유형원본.label }) : (유형원본.label ?? ''))
         : '';
     // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
-    const typeLabelRendered = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ||
-        (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isRow ? ' training-block-button--row' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), 
+    const 갈래글 = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ? String(type.label)
+        : (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle)) ? trainingTypeName
+            : '';
+    const typeLabelRendered = !!갈래글;
+    /* 그려지는 수 — 아래 본문과 **같은 값을 본다.** 전에는 JSX 안에서만 셈해서 이름이 못 썼다. */
+    const 그려지는수 = countLabelOverride !== undefined ? countLabelOverride : countLabel;
+    /**
+     * **눈에 보이는 줄 그대로 이름을 짓는다**(말귀 요청 (65) 의 뒷자락, 2026-10-02).
+     *
+     * 전에는 `itemTitle` 하나였다. 그런데 한 세트 안에서 **같은 낱말이 여러 갈래에 쓰이는 것은
+     * 드문 일이 아니라**, 눈으로는 갈래가 왼쪽에 또렷이 보이는데 **소리로는 안 갈렸다** —
+     * 말귀 실측(말귀자료실 미리보기, `종성 ㅁ vs 종성 ㅇ` 카드, 375px):
+     *
+     *   소음 하 문장 듣기 · 김밥 · 5문장  →  김밥
+     *   문장 순서화      · 김밥 · 5문장  →  김밥   ← 같다 (이런 쌍이 셋)
+     *
+     * `TrainingCard` 는 children 의 뜻을 몰라 부르는 쪽이 넘겨야 하지만, **여기는 코어가
+     * 재료를 다 쥐고 있다** — 갈래(`type`·`trainingData`)도 수(`countLabel`)도. 그러니 코어가
+     * 짓는다. 가름은 **누가 재료를 들고 있나** 였다.
+     *
+     * **보이는 것만 담는다** — 갈래글은 실제로 그려질 때만(`typeLabelRendered`), 수도 그려질
+     * 때만 넣는다. 그래야 이름과 눈이 어긋나지 않는다(WCAG 2.5.3, 보이는 이름이 읽히는 이름
+     * 안에 들어 있어야 한다). 부르는 쪽이 `ariaLabel` 을 주면 그쪽이 먼저다.
+     */
+    const 지은이름 = [갈래글, typeof itemTitle === 'string' ? itemTitle : '', 그려지는수]
+        .map(x => String(x ?? '').trim()).filter(Boolean).join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isRow ? ' training-block-button--row' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (지은이름 || undefined), 
                 /* tooltipText 만 주고 useDescriptionTooltip 을 안 켜면 글이 어디에도 안 떴다 — 그때는 title(가리키면 뜨고 낭독기엔 설명)로 준다 */
-                title: !useDescriptionTooltip && tooltipText ? (Array.isArray(tooltipText) ? tooltipText.filter(Boolean).join('\n') : tooltipText) || undefined : undefined, children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { className: onRemove ? 'training-block-button__check--removable' : undefined, type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && (_jsx(Badge, { className: `training-block-button__remove${btnHover ? ' is-hover' : ''}`, type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
-                                        const countText = countLabelOverride !== undefined ? countLabelOverride : countLabel;
-                                        // 정해진 문항수가 없으면(빈 값) 카운트 요소 자체를 그리지 않는다.
-                                        return countText ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: countText })) : null;
-                                    })(), _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), ((isList && !isRow) || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { htmlType: "button", size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, 
+                title: !useDescriptionTooltip && tooltipText ? (Array.isArray(tooltipText) ? tooltipText.filter(Boolean).join('\n') : tooltipText) || undefined : undefined, children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { className: onRemove ? 'training-block-button__check--removable' : undefined, type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && (_jsx(Badge, { className: `training-block-button__remove${btnHover ? ' is-hover' : ''}`, type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [그려지는수 ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: 그려지는수 })) : null, _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), ((isList && !isRow) || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { htmlType: "button", size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, 
                                     /* **칸 이름을 넣는다**(말귀 요청 (54)②, 2026-10-02). 묶음 칸이 스물넷이면
                                        낭독기로 단추 목록을 불렀을 때 `미리 듣기` 가 **스물네 번** 선다. 바로 옆
                                        '더보기' 는 ㊺ 에서 이미 칸 이름을 달았는데 이쪽만 안 따라왔다 — 고칠 값은

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

@@ -16,6 +16,20 @@ export type TrainingCardProps = {
     description?: ReactNode;
     /** 우측 상단 액션 영역 (좋아요/다운로드, ⋯ 메뉴 등) — 클릭이 카드로 전파되지 않음 */
     topActions?: ReactNode;
+    /**
+     * **카드가 눌릴 때 읽히는 이름**(말귀 요청 (65), 2026-10-02).
+     *
+     * 안 주면 `title` 을 쓴다. 안 쓰고 두면 `role="button"` 의 이름이 **안 글자 전부**로
+     * 지어지는데, 이 카드는 안에 `topActions`(진짜 `<button>`)를 품으므로 **그 단추의 이름까지
+     * 삼킨다** — 말귀 실측(나의 단어훈련 375px, 카드 여섯 장 전부):
+     * `훈련하자!! (복사) 훈련하자!! (복사) 더보기 음절 2개 합치기 1 …` 로, 제목이 두 번 읽히고
+     * 사이에 `더보기` 가 꼈다. `TrainingBlockButton` 이 이미 같은 길로 풀어 둔 자리다.
+     *
+     * **값을 치른다** — 갈래별 수와 마지막 쓴 날이 이름에서 빠진다. 그것까지 들려주려면
+     * 부르는 쪽이 여기에 **갖춰 쓴 이름**을 넘겨라(`'훈련하자!! · 음절 합치기 1 · 3개월 전'`).
+     * 코어는 children 의 뜻을 모르므로 제목까지만 지을 수 있다.
+     */
+    ariaLabel?: string;
     /** 본문 영역 콘텐츠 (타입 칩, 단어 뱃지, 빈 상태 등) */
     children?: ReactNode;
     /** 풋터 좌측 (게시자·날짜 등) */
@@ -29,4 +43,4 @@ export type TrainingCardProps = {
     className?: string;
 };
 /** @public */
-export default function TrainingCard({ title, titleLevel, description, topActions, children, footerLeft, footerRight, onClick, draggable, onDragStart, onDragEnd, className, }: TrainingCardProps): import("react").JSX.Element;
+export default function TrainingCard({ title, titleLevel, description, topActions, children, footerLeft, footerRight, ariaLabel, onClick, draggable, onDragStart, onDragEnd, className, }: TrainingCardProps): import("react").JSX.Element;

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

@@ -4,7 +4,7 @@ import { cx } from '../../utils/cx';
 import './TrainingCard.css';
 import { useCallback } from 'react';
 /** @public */
-export default function TrainingCard({ title, titleLevel = 3, description, topActions, children, footerLeft, footerRight, onClick, draggable, onDragStart, onDragEnd, className, }) {
+export default function TrainingCard({ title, titleLevel = 3, description, topActions, children, footerLeft, footerRight, ariaLabel, onClick, draggable, onDragStart, onDragEnd, className, }) {
     const 제목태그 = titleLevel ? `h${titleLevel}` : 'div';
     const hasFooter = footerLeft != null || footerRight != null;
     const hasBody = children != null && children !== false;
@@ -20,7 +20,7 @@ export default function TrainingCard({ title, titleLevel = 3, description, topAc
             onClick();
         }
     }, [onClick]);
-    return (_jsxs("div", { className: cx('training-card', onClick ? 'training-card--clickable' : '', className), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, draggable: draggable, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsxs("div", { className: "training-card__header", children: [_jsxs("div", { className: "training-card__title-row", children: [typeof title === 'string'
+    return (_jsxs("div", { className: cx('training-card', onClick ? 'training-card--clickable' : '', className), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, "aria-label": onClick ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, tabIndex: onClick ? 0 : undefined, draggable: draggable, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsxs("div", { className: "training-card__header", children: [_jsxs("div", { className: "training-card__title-row", children: [typeof title === 'string'
                                 ? _jsx(제목태그, { className: "training-card__title h4", children: title })
                                 : title, topActions != null && (_jsx("div", { className: "training-card__top-actions", onClick: (e) => e.stopPropagation(), children: topActions }))] }), description != null
                         ? (typeof description === 'string'

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

@@ -20,7 +20,14 @@ export type TrainingCardGroupProps = {
      *  안 잡혔다. 그 안의 `접기`·`정렬` 은 그룹마다 같은 이름이라, 낭독기로 단추 목록을
      *  부르면 `접기` 가 세 번 선다 — **어느 그룹의 것인지 가릴 길이 없었다.**
      *
-     *  이름 있는 지역이 서면 단추 이름은 짧은 채로 둬도 된다(지역이 가린다).
+     *  **전에 여기 "이름 있는 지역이 서면 단추 이름은 짧은 채로 둬도 된다(지역이 가린다)" 고
+     *  적어 두었는데, 그 말이 틀렸다**(2026-10-02 바로잡음). `role="group"` 은 **landmark 가
+     *  아니다.** 초점이 묶음 안으로 들어가 읽을 때는 묶음 이름이 먼저 읽히니 맞지만,
+     *  **낭독기로 단추 목록을 훑는 길**에서는 묶음 맥락이 안 따라온다 — 바로 윗줄에 적은
+     *  "`접기` 가 세 번 선다" 가 그대로 남는다. 말귀가 그 한 줄을 믿고 앱 세 파일에서 그룹
+     *  이름을 걷으려다 물어 와서 드러났다.
+     *  그래서 **이 조각이 제 단추에 묶음 이름을 직접 단다**(아래 `접기`·`정렬`). 부르는 쪽이
+     *  actions 로 넘기는 단추에도 묶음 이름을 다는 쪽이 맞다 — 걷지 마라.
      *  `0` 을 주면 전과 같이 `span` 으로 그린다. */
     titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     /** 그룹 제목 — 문자열이면 제목으로 감싸고, 노드면 그대로 렌더(예: 인라인 이름변경 입력) */