@ihabdevteam/core 0.322.0 → 0.324.0

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

@@ -26,11 +26,11 @@ export const pctToLevel = (pct) => (pct / 100) * LEVEL_MAX;
 export const NOISE_RATIO_MAX = 2;
 /** @public 소음 비율 칸(배). */
 export const NOISE_RATIO_STEP = 0.1;
-const 비율자르기 = (r) => Math.min(NOISE_RATIO_MAX, Math.max(0, r));
+const clampRatio = (r) => Math.min(NOISE_RATIO_MAX, Math.max(0, r));
 /** 옛 기록에서 옮긴 비율의 범위 — 말귀 noiseRatioOfPct 와 같다(0.1~2). */
-const 옛비율최소 = 0.1;
+const LEGACY_RATIO_MIN = 0.1;
 /* 부동소수 찌꺼기만 턴다(0.30000000000000004 → 0.3) — 0.1 칸으로 반올림하지는 않는다 */
-const 찌꺼기털기 = (r) => Math.round(r * 1e6) / 1e6;
+const roundOff = (r) => Math.round(r * 1e6) / 1e6;
 /**
  * @public 설정의 소음 비율(배). `noiseRatio` 가 있으면 그것(0~2 로 자름), 없으면 **옛 값에서
  * 들리던 그대로** 옮긴다 — (level/9) ÷ mainVolume 을 **반올림 없이** 0.1~2 로 조인다(말귀 `noiseRatioOfPct` 와 같은 범위).
@@ -40,26 +40,26 @@ const 찌꺼기털기 = (r) => Math.round(r * 1e6) / 1e6;
 export function noiseRatioOf(settings) {
     const { noiseRatio } = settings;
     if (typeof noiseRatio === 'number' && Number.isFinite(noiseRatio))
-        return 비율자르기(noiseRatio);
-    const 소음 = Math.min(LEVEL_MAX, Math.max(0, Number(settings.level) || 0)) / LEVEL_MAX;
-    const 전체 = Number(settings.mainVolume);
-    if (!(전체 > 0))
+        return clampRatio(noiseRatio);
+    const noise = Math.min(LEVEL_MAX, Math.max(0, Number(settings.level) || 0)) / LEVEL_MAX;
+    const main = Number(settings.mainVolume);
+    if (!(main > 0))
         return 1;
-    if (!(소음 > 0))
+    if (!(noise > 0))
         return 0;
-    return 찌꺼기털기(Math.min(NOISE_RATIO_MAX, Math.max(옛비율최소, 소음 / 전체)));
+    return roundOff(Math.min(NOISE_RATIO_MAX, Math.max(LEGACY_RATIO_MIN, noise / main)));
 }
-const 전체소리 = (settings) => Math.min(1, Math.max(0, Number(settings.mainVolume) || 0));
+const mainVolumeOf = (settings) => Math.min(1, Math.max(0, Number(settings.mainVolume) || 0));
 /** @public 문제 소리 볼륨(0~1) = mainVolume. 비율과 상관없다. */
 export function effectiveSpeechVolume(settings) {
-    return 전체소리(settings);
+    return mainVolumeOf(settings);
 }
 /**
  * @public 소음이 **들리는 크기**(0~2, 원본 소음 파일 기준) = mainVolume × 비율. 켜짐 여부는 보지
  * 않는다. 결과 기록·파형이 쓴다. 소음 `<audio>` 에 거는 값은 `noiseElementVolume`.
  */
 export function effectiveNoiseVolume(settings) {
-    return 전체소리(settings) * noiseRatioOf(settings);
+    return mainVolumeOf(settings) * noiseRatioOf(settings);
 }
 /**
  * @public 소음 `<audio>` 볼륨(0~1) = min(1, 들리는 크기 ÷ gain). gain 은 소음 파일이 원본보다 몇 배

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

@@ -76,9 +76,9 @@ export default function NoiseSettingsTooltip({ anchorRect, onClose, hideNoiseRow
         catch (e) { }
     }, [noisePlayer]);
     /* 소음 종류 보기 — **한 곳**이다. 아래 참 줄과 폭 그림자 줄이 같은 배열을 쓴다 */
-    const 종류옵션 = [
+    const kindOptions = [
         { key: NONE_KEY, label: t('training.noise.type.none', '없음') },
         ...getNoiseTypeOptions(t).map(opt => ({ key: opt.value, label: opt.label })),
     ];
-    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: 12, onClose: onClose, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), isMobilePopup: false, closeOnOutsideClick: false, header: _jsxs("div", { className: "noise-settings__header", children: [_jsx("span", { children: t('training.trainingSettingsTitle', '훈련 설정') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, ariaLabel: t('common.close', '닫기'), onClick: onClose })] }), children: _jsxs(Panel, { className: "noise-settings", useBorder: false, labelWidth: 72, children: [_jsx(SliderPanelRow, { title: t('training.playVolumeTitle', '전체 소리'), valueLabel: `${volPct}%`, value: volPct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handlePlayVolumeChange }), _jsx(SliderPanelRow, { title: t('training.playSpeedTitle', '재생 속도'), valueLabel: `${playbackRate.toFixed(2)}x`, value: playbackRate, min: PLAY_SPEED_MIN, max: PLAY_SPEED_MAX, step: PLAY_SPEED_STEP, size: sliderSize, onChange: handlePlaySpeedChange }), !hideNoiseRows && (_jsxs(_Fragment, { children: [_jsx(PanelRow, { variant: "custom", label: t('training.noiseTypeTitle', '소음 종류'), useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: t('training.noiseTypeTitle', '소음 종류'), size: 40, shape: "rounded", options: 종류옵션, value: noiseEnabled ? noiseType : NONE_KEY, onChange: handleTypeChange }) }), _jsx(SliderPanelRow, { title: t('training.noiseRatioTitle', '소음 비율'), valueLabel: t('training.noiseRatioValue', '{{ratio}}배', { ratio: ratio.toFixed(1) }), value: ratio, min: 0, max: NOISE_RATIO_MAX, step: NOISE_RATIO_STEP, size: sliderSize, disabled: !noiseEnabled, onChange: handleRatioChange })] })), hideNoiseRows && (_jsx("div", { className: "noise-settings__width-ghost", "aria-hidden": "true", inert: true, children: _jsx(PanelRow, { variant: "custom", label: '\u00a0', useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: "width-ghost", size: 40, shape: "rounded", options: 종류옵션, value: NONE_KEY, onChange: () => { } }) }) }))] }) }));
+    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: 12, onClose: onClose, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), isMobilePopup: false, closeOnOutsideClick: false, header: _jsxs("div", { className: "noise-settings__header", children: [_jsx("span", { children: t('training.trainingSettingsTitle', '훈련 설정') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, ariaLabel: t('common.close', '닫기'), onClick: onClose })] }), children: _jsxs(Panel, { className: "noise-settings", useBorder: false, labelWidth: 72, children: [_jsx(SliderPanelRow, { title: t('training.playVolumeTitle', '전체 소리'), valueLabel: `${volPct}%`, value: volPct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handlePlayVolumeChange }), _jsx(SliderPanelRow, { title: t('training.playSpeedTitle', '재생 속도'), valueLabel: `${playbackRate.toFixed(2)}x`, value: playbackRate, min: PLAY_SPEED_MIN, max: PLAY_SPEED_MAX, step: PLAY_SPEED_STEP, size: sliderSize, onChange: handlePlaySpeedChange }), !hideNoiseRows && (_jsxs(_Fragment, { children: [_jsx(PanelRow, { variant: "custom", label: t('training.noiseTypeTitle', '소음 종류'), useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: t('training.noiseTypeTitle', '소음 종류'), size: 40, shape: "rounded", options: kindOptions, value: noiseEnabled ? noiseType : NONE_KEY, onChange: handleTypeChange }) }), _jsx(SliderPanelRow, { title: t('training.noiseRatioTitle', '소음 비율'), valueLabel: t('training.noiseRatioValue', '{{ratio}}배', { ratio: ratio.toFixed(1) }), value: ratio, min: 0, max: NOISE_RATIO_MAX, step: NOISE_RATIO_STEP, size: sliderSize, disabled: !noiseEnabled, onChange: handleRatioChange })] })), hideNoiseRows && (_jsx("div", { className: "noise-settings__width-ghost", "aria-hidden": "true", inert: true, children: _jsx(PanelRow, { variant: "custom", label: '\u00a0', useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: "width-ghost", size: 40, shape: "rounded", options: kindOptions, value: NONE_KEY, onChange: () => { } }) }) }))] }) }));
 }

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

@@ -31,24 +31,24 @@ export default function TrainingBlock(props) {
     /* eslint-enable react-hooks/set-state-in-effect */
     useWindowEvent('speechear.data.updated', () => setDataTick((v) => v + 1));
     /* 마지막 '더보기' 는 누르면 사라진다 — 초점이 거기 있었으면 새로 붙은 첫 항목으로 옮긴다(안 옮기면 body 로 떨어졌다) */
-    const 목록Ref = useRef(null);
-    const 더보기초점Ref = useRef(null);
+    const listRef = useRef(null);
+    const moreFocusRef = useRef(null);
     function loadMore() {
-        const 단추 = document.activeElement;
-        더보기초점Ref.current = wasKeyboardPress() && 단추 && 단추.closest?.('.training-block__more') ? visible : null;
+        const button = document.activeElement;
+        moreFocusRef.current = wasKeyboardPress() && button && button.closest?.('.training-block__more') ? visible : null;
         setVisible((v) => Math.min(total, v + BTN_COUNT_MAX));
     }
     useEffect(() => {
-        const 첫새 = 더보기초점Ref.current;
-        if (첫새 == null)
+        const firstNew = moreFocusRef.current;
+        if (firstNew == null)
             return;
-        더보기초점Ref.current = null;
-        const 지금 = document.activeElement;
-        if (지금 && 지금 !== document.body)
+        moreFocusRef.current = null;
+        const active = document.activeElement;
+        if (active && active !== document.body)
             return;
-        목록Ref.current?.querySelectorAll('.training-block-button')[첫새]?.focus();
+        listRef.current?.querySelectorAll('.training-block-button')[firstNew]?.focus();
     }, [visible]);
-    return (_jsxs(Section, { type: sectionType, title: type?.label, icon: type?.icon, disc: type?.desc, className: "training-block", children: [_jsx("div", { className: "training-list", ref: 목록Ref, children: (itemsAll || []).slice(0, visible).map((item, idx) => {
+    return (_jsxs(Section, { type: sectionType, title: type?.label, icon: type?.icon, disc: type?.desc, className: "training-block", children: [_jsx("div", { className: "training-list", ref: listRef, children: (itemsAll || []).slice(0, visible).map((item, idx) => {
                     const itemForBtn = item;
                     const depthForBtn = depthLabel;
                     return (_jsx(TrainingBlockButton, { index: idx, type: type, trainingData: itemForBtn, depth: depthForBtn, renderPopup: renderPopup, completedIds: completedIds, selectedIds: selectedIds, size: size, useDescriptionTooltip: useDescriptionTooltip, onRemove: typeof onRemove === 'function' && selectedIds != null && itemForBtn?.id != null && selectedIds.has(String(itemForBtn.id))

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

@@ -179,18 +179,18 @@ export default function TrainingBlockButton(props) {
     const isCompact = size === 'compact';
     const isSmall = size === 'small';
     // 유형 이름은 지금 언어로 — 등록된 원본의 한국어 라벨을 써 영어 화면 계획 바구니에 '소음 하 문장 듣기' 가 떴다
-    const 유형원본 = isSmall && type?.key ? getTrainingTypes().find(x => x.key === type.key) : undefined;
-    const 유형열쇠 = 유형원본 ? TRAINING_TYPE_I18N_KEY[유형원본.key] : undefined;
-    const trainingTypeName = 유형원본
-        ? (유형열쇠 ? t(`trainingType.${유형열쇠}.title`, { defaultValue: 유형원본.label }) : (유형원본.label ?? ''))
+    const typeSource = isSmall && type?.key ? getTrainingTypes().find(x => x.key === type.key) : undefined;
+    const typeI18nKey = typeSource ? TRAINING_TYPE_I18N_KEY[typeSource.key] : undefined;
+    const trainingTypeName = typeSource
+        ? (typeI18nKey ? t(`trainingType.${typeI18nKey}.title`, { defaultValue: typeSource.label }) : (typeSource.label ?? ''))
         : '';
     // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
-    const 갈래글 = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ? String(type.label)
+    const typeText = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ? String(type.label)
         : (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle)) ? trainingTypeName
             : '';
-    const typeLabelRendered = !!갈래글;
+    const typeLabelRendered = !!typeText;
     /* 그려지는 수 — 아래 본문과 **같은 값을 본다.** 전에는 JSX 안에서만 셈해서 이름이 못 썼다. */
-    const 그려지는수 = countLabelOverride !== undefined ? countLabelOverride : countLabel;
+    const shownCount = countLabelOverride !== undefined ? countLabelOverride : countLabel;
     /**
      * **눈에 보이는 줄 그대로 이름을 짓는다**(말귀 요청 (65) 의 뒷자락, 2026-10-02).
      *
@@ -209,11 +209,11 @@ export default function TrainingBlockButton(props) {
      * 때만 넣는다. 그래야 이름과 눈이 어긋나지 않는다(WCAG 2.5.3, 보이는 이름이 읽히는 이름
      * 안에 들어 있어야 한다). 부르는 쪽이 `ariaLabel` 을 주면 그쪽이 먼저다.
      */
-    const 지은이름 = [갈래글, typeof itemTitle === 'string' ? itemTitle : '', 그려지는수]
+    const ariaParts = [typeText, typeof itemTitle === 'string' ? itemTitle : '', shownCount]
         .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), 
+    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 : (ariaParts || 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: [그려지는수 ? (_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, 
+                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: [shownCount ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: shownCount })) : 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/TrainingBlockGrid.js

@@ -4,13 +4,13 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { cx } from '../../utils/cx';
 import { balancedColumns, columnsFitting } from '../../utils/blockGrid';
 import './TrainingBlock.css';
-function 자식수(children) {
+function countChildren(children) {
     let n = 0;
-    const 세기 = (c) => { if (Array.isArray(c))
-        c.forEach(세기);
+    const walk = (c) => { if (Array.isArray(c))
+        c.forEach(walk);
     else if (c != null && c !== false && c !== true && c !== '')
         n++; };
-    세기(children);
+    walk(children);
     return n;
 }
 /**
@@ -30,36 +30,36 @@ function 자식수(children) {
  */
 export default function TrainingBlockGrid({ gap = 10, count, className, children }) {
     const ref = useRef(null);
-    const [잰것, set잰것] = useState({ 폭: 0, 카드: 0 });
-    const 장수 = count ?? 자식수(children);
+    const [measured, setMeasured] = useState({ width: 0, card: 0 });
+    const itemCount = count ?? countChildren(children);
     useLayoutEffect(() => {
         const el = ref.current;
         if (!el)
             return;
-        const 재기 = () => {
+        const measure = () => {
             /* 걸어 둔 max-width 가 제 폭을 가리지 않게 잠깐 푼다 */
-            const 전 = el.style.maxWidth;
+            const before = el.style.maxWidth;
             el.style.maxWidth = 'none';
-            const 폭 = el.clientWidth;
-            el.style.maxWidth = 전;
-            const 첫 = el.firstElementChild;
-            const 카드 = 첫?.offsetWidth ?? 0;
-            set잰것(prev => (prev.폭 === 폭 && prev.카드 === 카드 ? prev : { 폭, 카드 }));
+            const width = el.clientWidth;
+            el.style.maxWidth = before;
+            const firstChild = el.firstElementChild;
+            const card = firstChild?.offsetWidth ?? 0;
+            setMeasured(prev => (prev.width === width && prev.card === card ? prev : { width, card }));
         };
-        재기();
+        measure();
         if (typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(재기);
+        const ro = new ResizeObserver(measure);
         ro.observe(el);
         return () => ro.disconnect();
-    }, [장수, gap]);
-    const 카드폭 = 잰것.카드 > 0 ? 잰것.카드 : 0;
-    const 한줄 = 카드폭 > 0 ? columnsFitting(잰것.폭, 카드폭, gap) : 0;
+    }, [itemCount, gap]);
+    const cardWidth = measured.card > 0 ? measured.card : 0;
+    const perRow = cardWidth > 0 ? columnsFitting(measured.width, cardWidth, gap) : 0;
     /* 아직 못 쟀으면(카드가 없거나 첫 틀) 안 건다 — 0 으로 걸면 다 숨는다 */
-    const 칸수 = 한줄 > 0 ? balancedColumns(장수, 한줄) : 0;
+    const columns = perRow > 0 ? balancedColumns(itemCount, perRow) : 0;
     const style = {
         '--block-grid-gap': `${gap}px`,
-        ...(칸수 > 0 ? { '--block-grid-cols': 칸수, '--block-grid-card': `${카드폭}px` } : {}),
+        ...(columns > 0 ? { '--block-grid-cols': columns, '--block-grid-card': `${cardWidth}px` } : {}),
     };
-    return (_jsx("div", { ref: ref, className: cx('training-block-grid', 칸수 > 0 && 'training-block-grid--measured', className), style: style, "data-cols": 칸수 > 0 ? 칸수 : undefined, children: children }));
+    return (_jsx("div", { ref: ref, className: cx('training-block-grid', columns > 0 && 'training-block-grid--measured', className), style: style, "data-cols": columns > 0 ? columns : undefined, children: children }));
 }

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

@@ -110,7 +110,19 @@
 
 .training-card__description {
   margin: 0;
-  color: var(--color-gray);
+  /* **곁들이는 줄이라 제목보다 흐리다**(사장님 지시 2026-10-13, 말귀_2 청).
+     제목이 `--color-darkGray`(#434d56)인데 설명이 `--color-gray`(#64748b)로 **두 급 차이가
+     한 급도 안 돼** 제목과 설명이 한 덩어리로 읽혔다. 한 급 내려 제목이 먼저 잡히게 한다.
+
+     > **흰 바탕 2.53:1 로 본문 기준(4.5)에 못 미치는 것을 알고 그렇게 둔다.** 이 색이 닿는
+     > 것은 **문자열 한 줄로 거드는 설명**뿐이다 — 본문이 필요한 자리는 `description` 에
+     > `ReactNode` 를 넘기고, 그때는 이 클래스가 **아예 안 붙는다**(`TrainingCard.tsx` 의
+     > `typeof description === 'string'` 가름). 그래서 소비처가 열 몇이어도 무게는
+     > `WordTableButton` 설명 줄과 같다. 사장님이 그 셈을 보신 뒤 기본값으로 정하셨다.
+
+     이 줄을 본문으로 승격하거나 옮길 일이 생기면 **대비를 먼저 다시 본다** —
+     `--color-gray`(4.8:1)가 그때의 기본이다. 코어에는 대비를 세는 못이 없어 사람이 본다. */
+  color: var(--color-lightGray);
   text-align: left;
   /* 폰트는 body-3 토큰(14px/22px) 그대로 사용 — override 제거 */
   /* 한 줄 말줄임 + 빈 설명도 한 줄 높이 유지(설명 유무로 카드 높이 불변) */

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

@@ -5,7 +5,7 @@ import './TrainingCard.css';
 import { useCallback } from 'react';
 /** @public */
 export default function TrainingCard({ title, titleLevel = 3, description, topActions, children, footerLeft, footerRight, ariaLabel, onClick, draggable, onDragStart, onDragEnd, className, }) {
-    const 제목태그 = titleLevel ? `h${titleLevel}` : 'div';
+    const TitleTag = titleLevel ? `h${titleLevel}` : 'div';
     const hasFooter = footerLeft != null || footerRight != null;
     const hasBody = children != null && children !== false;
     const handleKeyDown = useCallback((e) => {
@@ -21,7 +21,7 @@ export default function TrainingCard({ title, titleLevel = 3, description, topAc
         }
     }, [onClick]);
     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 })
+                                ? _jsx(TitleTag, { 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'
                             ? _jsx("p", { className: "training-card__description body-3", children: description })

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

@@ -9,24 +9,24 @@ import { useId } from 'react';
 /** @public */
 export default function TrainingCardGroup({ title, titleLevel = 3, count, collapsed = false, onToggle, beforeSort, sort, actions, empty = false, emptyContent, dragOver = false, onDragOver, onDragLeave, onDrop, children, className, }) {
     const { t } = useTranslation();
-    const 제목id = useId();
-    const 제목태그 = titleLevel ? `h${titleLevel}` : 'span';
+    const titleId = useId();
+    const TitleTag = titleLevel ? `h${titleLevel}` : 'span';
     /* 접을 수 있는가 — `onToggle` 유무가 그것을 말한다. 새 prop 을 두지 않는다. */
-    const 접을수있다 = onToggle != null;
-    const cls = cx('training-card-group', dragOver && 'training-card-group--dragover', collapsed && 'training-card-group--collapsed', 접을수있다 && 'training-card-group--collapsible', className);
+    const collapsible = onToggle != null;
+    const cls = cx('training-card-group', dragOver && 'training-card-group--dragover', collapsed && 'training-card-group--collapsed', collapsible && 'training-card-group--collapsible', className);
     return (
     /* **제목이 이 묶음의 이름이 된다**(말귀 요청 (54)①). 이름 없는 묶음은 지역으로 안
        잡혀, 안의 `접기`·`정렬` 이 그룹마다 같은 이름으로 서도 가릴 길이 없었다 —
        `ChartSection` 에 (51) 로 한 것과 같은 자다. 글자 제목일 때만 건다(마디를 가리키므로
        글이 아닌 제목이면 이름이 안 선다). */
-    _jsxs("div", { className: cls, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, role: typeof title === 'string' && title ? 'group' : undefined, "aria-labelledby": typeof title === 'string' && title ? 제목id : undefined, children: [_jsxs("header", { className: "training-card-group__header", children: [접을수있다 && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', 
+    _jsxs("div", { className: cls, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, role: typeof title === 'string' && title ? 'group' : undefined, "aria-labelledby": typeof title === 'string' && title ? titleId : undefined, children: [_jsxs("header", { className: "training-card-group__header", children: [collapsible && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', 
                         /* **묶음 이름을 단다** — 그룹이 셋 서면 `접기` 도 셋이라 단추 목록에서 못 가린다.
                            지역(`role="group"`)이 가려 주지 않는다(위 `titleLevel` 머리글). 제목이 글자일
                            때만 — 마디 제목이면 이름을 못 짓는다. */
                         ariaLabel: typeof title === 'string' && title
                             ? (collapsed ? t('common.expandFor', { name: title }) : t('common.collapseFor', { name: title }))
                             : (collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기')), className: "training-card-group__chevron", "aria-expanded": !collapsed, onClick: onToggle })), typeof title === 'string'
-                        ? _jsx(제목태그, { id: 제목id, className: "training-card-group__title h5b", children: title })
+                        ? _jsx(TitleTag, { id: titleId, className: "training-card-group__title h5b", children: title })
                         : title, count !== undefined && _jsx("span", { className: "training-card-group__count body-3b", children: count }), (beforeSort != null || sort || actions != null) && (_jsxs("span", { className: "training-card-group__actions", onClick: e => e.stopPropagation(), children: [beforeSort, sort && (_jsx(Dropdown, { size: 40, options: sort.options, value: sort.value, placeholder: sort.placeholder, onChange: sort.onChange, 
                                 /* 접기와 같은 까닭으로 묶음 이름을 단다 — 그룹마다 `정렬` 이 하나씩 선다 */
                                 ariaLabel: typeof title === 'string' && title ? t('common.sortFor', { name: title }) : undefined })), actions] }))] }), !collapsed && (empty