@ihabdevteam/core 0.178.0 → 0.180.0

package/dist/ihabdevteam-core.d.ts

@@ -847,6 +847,15 @@ export declare interface ButtonProps {
     ariaLabel?: string;
     variant?: ButtonVariant;
     align?: 'center' | 'left' | 'right' | 'grid';
+    /** 라벨을 **줄바꿈하지 않는다**(`white-space: nowrap`).
+     *
+     *  기본은 줄바꿈이다 — 표 칸처럼 좁은 자리에서 라벨이 길면 두 줄로 흐르는 편이 잘려 안 보이는 것보다 낫다.
+     *  하지만 '문자'·'카카오' 처럼 **두 글자가 한 낱말**인 단추는 갈리면 우습다. 그 자리에 켠다.
+     *  소비자 둘이 `.button__label-text { white-space: nowrap }` 로 각자 칠하고 있었다(2026-09-17 말귀 전수).
+     *
+     *  기본을 nowrap 으로 바꾸지 않은 까닭: 두 줄 라벨(`subLabel`·설명 붙은 단추)이 이미 선 화면이 있고,
+     *  좁은 자리에서 nowrap 은 **넘쳐 잘린다**(줄바꿈은 키만 늘어난다). 어느 쪽이 나은지는 그 자리가 안다. */
+    nowrap?: boolean;
     selected?: boolean;
     toggleable?: boolean;
     /**
@@ -1585,7 +1594,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.178.0";
+export declare const CORE_VERSION = "0.180.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3779,6 +3788,15 @@ declare type PanelRowChildren = {
     children?: ReactNode;
     align?: 'horizontal' | 'vertical';
     icon?: ReactNode;
+    /** 라벨을 고정 폭으로 두고 **오른쪽이 남는 폭을 채운다** — 그 안의 입력칸도 함께 늘어난다.
+     *
+     *  기본은 오른쪽이 **제 폭만** 차지한다(`flex: 0 0 auto`). 그래서 `TextField`·`Dropdown`·`form-input` 을
+     *  children 으로 넣으면 줄마다 오른쪽 끝이 들쭉날쭉했고, 소비자가 `.panel-row__right { display: flex }` +
+     *  `> * { flex: 1 }` 을 손으로 붙여 왔다 — 같은 한 줄이 말귀 앱 넷 · 어드민 셋에 흩어져 있었다(2026-09-18 전수).
+     *
+     *  `variant='input'`·`'dropdown'` 행은 늘 이 꼴이고, `'text'`·`'custom'` 은 같은 이름의 prop 으로 켠다 —
+     *  children 모드에만 통로가 없었다. 라벨 폭은 `Panel labelWidth` 로 정한다(기본 120px). */
+    useFullWidth?: boolean;
 };
 
 declare type PanelRowCustom = Base & {
@@ -4527,6 +4545,16 @@ export declare interface PopupProps {
     footer?: ReactNode | ((opts: PopupOptions) => ReactNode);
     /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
     footerClassName?: string;
+    /** 바닥 줄의 가로 배치 — `'center'`(기본) · `'fill'` · `'between'`.
+     *
+     *  - `'center'`: 지금까지와 같다(가운데 모음).
+     *  - `'fill'`: 바닥의 것들이 폭을 **똑같이 나눈다** — 단추 둘을 반반 세우는 창.
+     *  - `'between'`: 양 끝으로 밀고(왼쪽 보조 · 오른쪽 주액션) 양옆에 `--spacing-xl` 을 둔다.
+     *    끝으로 붙은 것이 창 테두리에 닿아 보이던 자리를 코어가 쥔다.
+     *
+     *  `buttons` 배열을 쓸 때도 듣는다(그쪽은 `max-width: 200px` 제약이 따로 있어 `'fill'` 은 그 안에서 나눈다).
+     *  세로는 이제 늘 가운데다(0.179.0) — 소비자 셋이 이 자리를 각자 칠하고 있었다. */
+    footerLayout?: 'center' | 'fill' | 'between';
     onClose?: () => void;
     /** true면 X 버튼/ESC로 닫는 것을 막는다 — 이미 시작된 서버 요청(확인 버튼 클릭 등)이
      * 진행 중일 때, "취소했다고 믿었는데 요청은 계속 진행돼 완료 후 결과가 반영되는" 상황을
@@ -5731,7 +5759,7 @@ export declare interface SearchSummaryProps {
 export declare type SearchSummaryStatus = 'ready' | 'guide' | 'error';
 
 /** @public */
-export declare function Section({ type, title, headingLevel, icon, action, disc, children, className, style }: SectionProps): JSX.Element;
+export declare function Section({ type, title, headingLevel, icon, action, disc, children, inGrid, className, style }: SectionProps): JSX.Element;
 
 /**
  * 섹션·페이지의 머리 — 머리말 · 제목 · 설명.
@@ -5779,6 +5807,17 @@ export declare interface SectionProps {
     action?: ReactNode;
     disc?: ReactNode;
     children?: ReactNode;
+    /**
+     * CSS 격자(한 줄에 여러 칸) 안에 세울 때 켠다 — 아래 여백(`--spacing-page`)을 푼다.
+     *
+     * `Section` 은 **세로로 이어 놓는 것**을 전제로 아래 여백을 두고, 마지막 것만 `:last-child` 로 뺀다.
+     * 격자에 넣으면 그 규칙이 **마지막 칸에만** 걸려 넷 중 셋만 여백을 달고 선다 — 카드 바닥선이 어긋나고
+     * 줄 사이 간격도 달라 보인다(말귀 문장훈련 분석 2×2 실측 2026-09-18: 카드 506 vs 566px).
+     * 격자에서는 칸 사이를 `gap` 이 맡으므로 이 여백은 할 일이 없다.
+     *
+     * `ChartSection inGrid` 와 같은 뜻이다(그쪽은 최소 폭·바닥 맞춤도 함께 푼다).
+     */
+    inGrid?: boolean;
     className?: string;
     style?: CSSProperties;
 }
@@ -7873,6 +7912,10 @@ export declare type TrainingPagePopupProps = {
     }) => ReactNode);
     /** 대화상자 이름(낭독기가 읽는 이름). 주면 title·label·시나리오 제목보다 이긴다 — 보이는 제목과 다른 이름이 필요할 때. 없으면 보이는 제목. */
     ariaLabel?: string;
+    /** 속 통의 폭·여백 제약을 푼다 — 기본은 `max-width: 800px` + `--spacing-page` 여백이다.
+     *  안에 넣는 화면이 **제 폭과 여백을 그대로 쓰는** 쓰임에서 켠다(표 한 판을 꽉 채우는 창 등).
+     *  소비자 둘이 `.page-popup__content { padding: 0; max-width: none }` 로 각자 풀고 있었다(2026-09-17). */
+    contentFull?: boolean;
     label?: string;
     buildResults?: (answers: Record<string, unknown>, meta?: Record<string, unknown>) => unknown;
     onResult?: (result?: unknown) => unknown;
@@ -9719,7 +9762,7 @@ export declare type WordTableOrientation = 'landscape' | 'portrait';
  * 표 내부에는 제목을 두지 않아 팝업 헤더 제목과 중복되지 않는다.
  * @public
  */
-export declare function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): JSX.Element;
+export declare function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, footerLayout, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): JSX.Element;
 
 /** @public */
 export declare interface WordTablePopupActions {
@@ -9751,6 +9794,10 @@ export declare interface WordTablePopupProps {
     renderFooter?: (actions: WordTablePopupActions) => PopupProps['footer'];
     /** renderFooter 사용 시 footer 래퍼에 추가할 클래스(정렬·간격 override용). */
     footerClassName?: string;
+    /** 바닥 줄의 가로 배치 — `Popup footerLayout` 을 그대로 내려보낸다(`'center'` 기본 · `'fill'` · `'between'`).
+     *  이 감싸개만 `footerClassName` 을 소비자에게 열고 있어, 여기 없으면 **이 창만** 앱 CSS 로 정렬을 칠해야 했다
+     *  (말귀 단어표 미리보기 창, 2026-09-18). */
+    footerLayout?: PopupProps['footerLayout'];
     /** 지정하면 하단에 "인쇄하기"·"새 창으로 보기" 버튼을 추가하고, 이 값을 PDF 저장 기본 파일명으로 쓴다. */
     printFileName?: string;
     /** 표 위에 '표 설정'(구성·용지 방향·외곽선 등) FilterPanel을 노출한다. */

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

@@ -76,6 +76,22 @@
     gap: 3px;
 }
 
+/* 라벨 줄바꿈 금지(nowrap) — '문자'·'카카오' 처럼 두 글자가 한 낱말인 단추가 표 칸에서 갈리던 자리 */
+.button--nowrap .button__label-text {
+    white-space: nowrap;
+}
+
+/* align='left' 는 **교차축까지** 왼쪽이다 — 두 줄 라벨(제목+설명)이 가운데로 모여
+   소비자 둘이 `align-items: flex-start` 를 다시 칠하고 있었다(2026-09-17 말귀 전수).
+   한 줄 라벨에서는 가로 자리만 바뀐다(세로 가운데는 그대로) — `--has-sub` 는 세로 쌓임이라 그때만 교차축이 가로다. */
+.button--align-left .button__label-text {
+    justify-content: flex-start;
+}
+.button--align-left .button__label-text--has-sub {
+    align-items: flex-start;
+    text-align: left;
+}
+
 .button__count {
     margin-left: 4px;
     color: var(--color-main);

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', 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, 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);
@@ -28,6 +28,7 @@ function ButtonInner(props, forwardedRef) {
         : variant;
     const variantClass = effectiveVariant ? `button--variant-${effectiveVariant}` : '';
     const alignClass = align ? `button--align-${align}` : '';
+    const nowrapClass = nowrap ? 'button--nowrap' : '';
     const shapeClass = shape ? `button--shape-${shape}` : '';
     const resolvedIconColor = typeof iconColor === 'string' && iconColor.startsWith('--')
         ? `var(${iconColor})`
@@ -115,7 +116,7 @@ function ButtonInner(props, forwardedRef) {
         : (toggleable || typeof selected === 'boolean')
             ? (isSelected ? 'true' : 'false')
             : rest['aria-pressed'];
-    const classes = cx('button', sizeBase, sizeTypeClass, variantClass, alignClass, shapeClass, isSelected ? 'is-selected' : null, !useBG ? 'button--no-bg' : null, tooltipOnly ? 'button--tooltip-only' : null, className);
+    const classes = cx('button', sizeBase, sizeTypeClass, variantClass, alignClass, nowrapClass, shapeClass, isSelected ? 'is-selected' : null, !useBG ? 'button--no-bg' : null, tooltipOnly ? 'button--tooltip-only' : null, className);
     const iconClassName = `button__icon button__icon--${iconSize}`;
     const subLabels = Array.isArray(subLabel) ? subLabel : (subLabel !== undefined ? [subLabel] : []);
     const renderLabelContent = () => {

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

@@ -236,6 +236,25 @@
   flex: 1;
   min-width: 0;
 }
+/* 오른쪽 칸이 남은 폭을 채우는 줄(useFullWidth) — **그 안의 것도 함께 늘어난다.**
+   오른쪽 칸만 늘리면 입력칸은 제 폭에 머물러 줄마다 끝이 들쭉날쭉했고, 소비자 일곱 자리가 이
+   `flex: 1` 한 줄을 각자 붙이고 있었다(말귀 앱 넷 · 어드민 셋, 2026-09-18 전수).
+   직계만 본다 — 안쪽 어디까지 늘릴지는 그 입력칸이 정한다(`TextField` 는 제 감싸개를 채운다). */
+.panel-row--fill .panel-row__right {
+  display: flex;
+  align-items: center;
+}
+.panel-row--fill .panel-row__right > * {
+  flex: 1;
+  min-width: 0;
+}
+/* 입력칸을 감싸개 없이 줄에 바로 넣는 자리도 같이 본다(앱이 `.panel-row > .text-field` 를 덮던 꼴) */
+.panel-row--fill > .text-field,
+.panel-row--fill > .dropdown,
+.panel-row--fill > .form-input {
+  flex: 1;
+  min-width: 0;
+}
 .panel-row--clickable {
   cursor: pointer;
   transition: background 0.1s, box-shadow 0.1s;

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

@@ -130,6 +130,15 @@ export type PanelRowChildren = {
     children?: ReactNode;
     align?: 'horizontal' | 'vertical';
     icon?: ReactNode;
+    /** 라벨을 고정 폭으로 두고 **오른쪽이 남는 폭을 채운다** — 그 안의 입력칸도 함께 늘어난다.
+     *
+     *  기본은 오른쪽이 **제 폭만** 차지한다(`flex: 0 0 auto`). 그래서 `TextField`·`Dropdown`·`form-input` 을
+     *  children 으로 넣으면 줄마다 오른쪽 끝이 들쭉날쭉했고, 소비자가 `.panel-row__right { display: flex }` +
+     *  `> * { flex: 1 }` 을 손으로 붙여 왔다 — 같은 한 줄이 말귀 앱 넷 · 어드민 셋에 흩어져 있었다(2026-09-18 전수).
+     *
+     *  `variant='input'`·`'dropdown'` 행은 늘 이 꼴이고, `'text'`·`'custom'` 은 같은 이름의 prop 으로 켠다 —
+     *  children 모드에만 통로가 없었다. 라벨 폭은 `Panel labelWidth` 로 정한다(기본 120px). */
+    useFullWidth?: boolean;
 };
 export type PanelRowProps = PanelRowToggle | PanelRowSegmented | PanelRowDropdown | PanelRowButton | PanelRowText | PanelRowInput | PanelRowCustom | PanelRowDescription | PanelRowEmpty | PanelRowLoading | PanelRowChildren;
 export declare function PanelRow(props: PanelRowProps): import("react").JSX.Element;

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

@@ -27,7 +27,7 @@ export function PanelRow(props) {
     const uid = useId();
     // children 기반 하위 호환 모드
     if (!('variant' in props)) {
-        const { label, sub, onClick, children, align = 'horizontal', icon } = props;
+        const { label, sub, onClick, children, align = 'horizontal', icon, useFullWidth = false } = props;
         const handleKeyDown = (e) => {
             if (!onClick)
                 return;
@@ -40,7 +40,7 @@ export function PanelRow(props) {
                 onClick();
             }
         };
-        return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), label != null && (_jsxs("div", { className: "panel-row__left", children: [_jsx("div", { className: "panel-row__label body-3", children: label }), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] })), _jsx("div", { className: "panel-row__right", children: children })] }));
+        return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', useFullWidth ? 'panel-row--label-fixed panel-row--fill' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), label != null && (_jsxs("div", { className: "panel-row__left", children: [_jsx("div", { className: "panel-row__label body-3", children: label }), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] })), _jsx("div", { className: "panel-row__right", children: children })] }));
     }
     // 설명 전용 행 — 라벨/우측 구조 없이 문단만 렌더
     if (props.variant === 'description') {

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

@@ -86,7 +86,16 @@
 .popup-content__inner {
   padding-bottom: 20px;
 }
-.popup-footer { padding: 0 20px 20px; display:flex; gap:8px; justify-content:center }
+/* 세로는 가운데 — 안 적어 두면 stretch 라, 키가 다른 것(보조 글월 + 단추)을 나란히 두면 늘어난다.
+   소비자 셋이 이 자리를 각자 `align-items: center` 로 칠하고 있었다(2026-09-17 말귀 전수). */
+.popup-footer { padding: 0 20px 20px; display:flex; gap:8px; justify-content:center; align-items:center }
+/* 바닥 배치(footerLayout) */
+.popup-footer--fill > * { flex: 1 }
+.popup-footer--between {
+  justify-content: space-between;
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
 /* 표준 buttons 배열만 폭/정렬 제약 — 커스텀 footer는 자유 배치 */
 .popup-footer--buttons > * { max-width: 200px; flex: 1; }
 .popup--closing { opacity: 0; transition: opacity 260ms ease }

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

@@ -38,6 +38,16 @@ export interface PopupProps {
     footer?: ReactNode | ((opts: PopupOptions) => ReactNode);
     /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
     footerClassName?: string;
+    /** 바닥 줄의 가로 배치 — `'center'`(기본) · `'fill'` · `'between'`.
+     *
+     *  - `'center'`: 지금까지와 같다(가운데 모음).
+     *  - `'fill'`: 바닥의 것들이 폭을 **똑같이 나눈다** — 단추 둘을 반반 세우는 창.
+     *  - `'between'`: 양 끝으로 밀고(왼쪽 보조 · 오른쪽 주액션) 양옆에 `--spacing-xl` 을 둔다.
+     *    끝으로 붙은 것이 창 테두리에 닿아 보이던 자리를 코어가 쥔다.
+     *
+     *  `buttons` 배열을 쓸 때도 듣는다(그쪽은 `max-width: 200px` 제약이 따로 있어 `'fill'` 은 그 안에서 나눈다).
+     *  세로는 이제 늘 가운데다(0.179.0) — 소비자 셋이 이 자리를 각자 칠하고 있었다. */
+    footerLayout?: 'center' | 'fill' | 'between';
     onClose?: () => void;
     /** true면 X 버튼/ESC로 닫는 것을 막는다 — 이미 시작된 서버 요청(확인 버튼 클릭 등)이
      * 진행 중일 때, "취소했다고 믿었는데 요청은 계속 진행돼 완료 후 결과가 반영되는" 상황을

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

@@ -15,7 +15,7 @@ const ANIM_MS = 260;
 /** @public */
 export default function Popup(props) {
     const { t } = useTranslation();
-    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, layer = 'modal', height, fillBody = false, resetScrollKey } = props || {};
+    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", footerLayout = 'center', onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, layer = 'modal', height, fillBody = false, resetScrollKey } = props || {};
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
     // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -211,7 +211,7 @@ export default function Popup(props) {
             e.preventDefault(); }, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}${height != null ? ' popup-panel--has-height' : ''}${fillBody ? ' popup-panel--fill-body' : ''}`, 
             /* 높이는 **CSS 변수로** 넘긴다 — 인라인 height 로 박으면 앱의 미디어 규칙(좁은 화면만 다른 높이)이 못 이겼다.
                max-height(CSS)가 height 보다 이기므로 화면보다 크게 줘도 화면에 맞춰진다 */
-            style: height != null ? { '--popup-height': typeof height === 'number' ? `${height}px` : height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && useTitle && title ? titleId : undefined, "aria-label": !inline && !(useTitle && title) ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: "popup-footer popup-footer--buttons", children: buttons.map((btn, i) => (_jsx(Button, { htmlType: "button", size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
+            style: height != null ? { '--popup-height': typeof height === 'number' ? `${height}px` : height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && useTitle && title ? titleId : undefined, "aria-label": !inline && !(useTitle && title) ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: `popup-footer popup-footer--buttons${footerLayout !== 'center' ? ` popup-footer--${footerLayout}` : ''}`, children: buttons.map((btn, i) => (_jsx(Button, { htmlType: "button", size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerLayout !== 'center' ? ` popup-footer--${footerLayout}` : ''}${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
     if (inline || typeof document === 'undefined')
         return el;
     return createPortal(el, document.body);

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

@@ -12,6 +12,10 @@
 
 .section:last-child { padding-bottom: 0; }
 
+/* 격자 칸 안(inGrid) — 아래 여백을 푼다. `:last-child` 는 격자에서 **마지막 칸에만** 걸려
+   넷 중 셋만 여백을 달고 선다(카드 바닥선이 어긋난다). 칸 사이는 격자의 gap 이 맡는다. */
+.section--in-grid { padding-bottom: 0; }
+
 .section {
 }
 

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

@@ -15,8 +15,19 @@ export interface SectionProps {
     action?: ReactNode;
     disc?: ReactNode;
     children?: ReactNode;
+    /**
+     * CSS 격자(한 줄에 여러 칸) 안에 세울 때 켠다 — 아래 여백(`--spacing-page`)을 푼다.
+     *
+     * `Section` 은 **세로로 이어 놓는 것**을 전제로 아래 여백을 두고, 마지막 것만 `:last-child` 로 뺀다.
+     * 격자에 넣으면 그 규칙이 **마지막 칸에만** 걸려 넷 중 셋만 여백을 달고 선다 — 카드 바닥선이 어긋나고
+     * 줄 사이 간격도 달라 보인다(말귀 문장훈련 분석 2×2 실측 2026-09-18: 카드 506 vs 566px).
+     * 격자에서는 칸 사이를 `gap` 이 맡으므로 이 여백은 할 일이 없다.
+     *
+     * `ChartSection inGrid` 와 같은 뜻이다(그쪽은 최소 폭·바닥 맞춤도 함께 푼다).
+     */
+    inGrid?: boolean;
     className?: string;
     style?: CSSProperties;
 }
 /** @public */
-export default function Section({ type, title, headingLevel, icon, action, disc, children, className, style }: SectionProps): import("react").JSX.Element;
+export default function Section({ type, title, headingLevel, icon, action, disc, children, inGrid, className, style }: SectionProps): import("react").JSX.Element;

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, className, style }) {
+export default function Section({ type = 'page', title, headingLevel, icon, action, disc, children, inGrid = false, className, style }) {
     const titleClass = TITLE_CLASS[type];
     // action·icon 만 줘도 머리를 그린다 — 제목·설명이 없으면 추가 단추가 조용히 버려졌다
     const hasHeader = title || disc || action || icon;
@@ -16,5 +16,5 @@ export default function Section({ type = 'page', title, headingLevel, icon, acti
        부르는 쪽이 정한다 — 안 주면 예전 그대로 div. 모양은 클래스(h3/h4/h5)가 정하고
        제목 태그의 기본 여백은 .section__title 의 margin:0 이 지운다. */
     const TitleTag = headingLevel ? `h${headingLevel}` : 'div';
-    return (_jsxs("div", { className: cx('section', `section--${type}`, className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx(TitleTag, { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
+    return (_jsxs("div", { className: cx('section', `section--${type}`, inGrid && 'section--in-grid', className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx(TitleTag, { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
 }

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

@@ -16,6 +16,26 @@
     gap: 10px;
 }
 
+/* 폰에서는 **두 열**이다(2026-09-18, 말귀 청).
+   전에는 `flex-wrap` 과 단추의 `width: calc(50% - 5px)` 로 두 열을 노렸는데, 둘 합이 폭과 **딱 같아서**
+   테두리·반올림 한 픽셀에 밀려 한 열로 떨어졌다. 소비자는 그래서 `.page .training-list` 로 특이도를
+   못박아 격자를 다시 깔고 있었다 — 그 앞에 앱 이름을 세운 것은 코어와 같은 셈수(0,1,0)로는 청크 차례가
+   승자를 정했기 때문이다. 코어가 제 화면 규칙을 쥐면 그 두 규칙이 걷힌다.
+   감싸개를 한 겹 두는 화면도 있어(단어훈련) 셀을 채우는 규칙은 **손자까지** 본다. */
+@media (max-width: 767px) {
+    .training-list {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .training-list > * {
+        min-width: 0;
+    }
+    .training-list > .training-block-button,
+    .training-list > * > .training-block-button {
+        width: 100%;
+    }
+}
+
 .training-block__more {
     display: flex;
     justify-content: center;

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

@@ -154,6 +154,12 @@
   min-width: 0;
 }
 
+/* 속 제약을 푼 통(contentFull) — 안에 넣는 화면이 제 폭·여백을 그대로 쓴다 */
+.page-popup__content--full {
+  padding: 0;
+  max-width: none;
+}
+
 .page-popup__content--center {
   margin-top: auto;
   margin-bottom: auto;

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

@@ -67,6 +67,10 @@ export type TrainingPagePopupProps = {
     }) => ReactNode);
     /** 대화상자 이름(낭독기가 읽는 이름). 주면 title·label·시나리오 제목보다 이긴다 — 보이는 제목과 다른 이름이 필요할 때. 없으면 보이는 제목. */
     ariaLabel?: string;
+    /** 속 통의 폭·여백 제약을 푼다 — 기본은 `max-width: 800px` + `--spacing-page` 여백이다.
+     *  안에 넣는 화면이 **제 폭과 여백을 그대로 쓰는** 쓰임에서 켠다(표 한 판을 꽉 채우는 창 등).
+     *  소비자 둘이 `.page-popup__content { padding: 0; max-width: none }` 로 각자 풀고 있었다(2026-09-17). */
+    contentFull?: boolean;
     label?: string;
     buildResults?: (answers: Record<string, unknown>, meta?: Record<string, unknown>) => unknown;
     onResult?: (result?: unknown) => unknown;

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

@@ -855,7 +855,7 @@ function TrainingPagePopupInner(props) {
     const scenarioContent = hasScenario
         ? scenarioPages.length > 0
             ? _jsx("div", { className: "training-steps", children: currentScenarioSteps.map((step, index) => renderScenarioStep(step, index)) }, `replay-${replayCount}`)
-            : (_jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "pp-empty", children: scenario?.emptyMessage || t('training.noQuestions', '문제가 없습니다.') }) }))
+            : (_jsx("div", { className: `page-popup__content page-popup__content--center${props.contentFull ? ' page-popup__content--full' : ''}`, children: _jsx("div", { className: "pp-empty", children: scenario?.emptyMessage || t('training.noQuestions', '문제가 없습니다.') }) }))
         : null;
     const childrenContent = isChildrenMode
         ? (_jsxs(TrainingPagePopupContext.Provider, { value: childrenContextValue, children: [currentChildrenPage?.pageTop ? (_jsx("div", { className: "training-page-top", children: currentChildrenPage.pageTop })) : null, _jsx("div", { className: "training-steps", children: compoundChildrenSteps.map((child, index) => {
@@ -905,7 +905,7 @@ function TrainingPagePopupInner(props) {
        아무 데도 닿지 않았다** — 낭독기는 이것을 그냥 대화상자로 읽고 가상 커서가
        뒤 화면으로 새어 나간다(Tab 가둠은 `useFocusTrap` 이 따로 하고 있었다).
        둘을 한 요소에 모은다. */
-    _jsxs("div", { className: `page-popup${closing ? ' page-popup--closing' : ''}`, role: "dialog", "aria-modal": "true", "aria-label": resolvedTitle, children: [_jsxs("div", { ref: panelRef, className: `page-popup__panel ${!measured ? 'page-popup__panel--measuring' : ''} ${mode === 'center' ? 'page-popup__panel--center' : mode === 'top' ? 'page-popup__panel--top' : ''}`, children: [_jsx(TrainingPagePopupTitle, { title: titleForHeader, subtitle: hasScenario ? (scenarioMeta.subtitle || scenarioMeta.label) : (Array.isArray(depth) ? depth.join(' / ') : undefined), desc: !hasScenario ? subTitle : undefined, depth: (hasScenario ? scenarioMeta.depth : depth), icon: hasScenario ? scenarioMeta.icon : icon, wrapperStyle: hasScenario ? scenarioMeta.wrapperStyle : wrapperStyle, iconTooltip: hasScenario ? scenarioMeta.iconTooltip : iconTooltip, progressMax: effectivePageCount, progressIndex: effectivePageIndex, pageIndex: effectivePageIndex, pageCount: effectivePageCount, onBack: handleCloseBack, onClose: handleCloseBack }), _jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content ${mode === "center" ? "page-popup__content--center" : "page-popup__content--top"}`, children: isChildrenMode ? childrenContent : (hasScenario ? scenarioContent : (typeof children === 'function' ? children({ registerOnNext, registerOnResult: registerOnResult, panelRef, setResultOverlay }) : children)) }) }), _jsx(TrainingPagePopupBottom, { onSettings: onSettings, onNext: handleNext, onResult: handleViewResults, useNoiseSettingBtn: Boolean(hasScenario ? (scenarioMeta.useNoiseSetting ?? true) : useNoiseSetting), stepIndex: effectiveStepIndex, stepCount: effectiveStepCount, pageIndex: effectivePageIndex, pageCount: effectivePageCount })] }), (resultOverlay && !resultOverlay.isEmpty && (renderResultPopup ?? defaultRenderResult)({
+    _jsxs("div", { className: `page-popup${closing ? ' page-popup--closing' : ''}`, role: "dialog", "aria-modal": "true", "aria-label": resolvedTitle, children: [_jsxs("div", { ref: panelRef, className: `page-popup__panel ${!measured ? 'page-popup__panel--measuring' : ''} ${mode === 'center' ? 'page-popup__panel--center' : mode === 'top' ? 'page-popup__panel--top' : ''}`, children: [_jsx(TrainingPagePopupTitle, { title: titleForHeader, subtitle: hasScenario ? (scenarioMeta.subtitle || scenarioMeta.label) : (Array.isArray(depth) ? depth.join(' / ') : undefined), desc: !hasScenario ? subTitle : undefined, depth: (hasScenario ? scenarioMeta.depth : depth), icon: hasScenario ? scenarioMeta.icon : icon, wrapperStyle: hasScenario ? scenarioMeta.wrapperStyle : wrapperStyle, iconTooltip: hasScenario ? scenarioMeta.iconTooltip : iconTooltip, progressMax: effectivePageCount, progressIndex: effectivePageIndex, pageIndex: effectivePageIndex, pageCount: effectivePageCount, onBack: handleCloseBack, onClose: handleCloseBack }), _jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content ${mode === "center" ? "page-popup__content--center" : "page-popup__content--top"}${props.contentFull ? ' page-popup__content--full' : ''}`, children: isChildrenMode ? childrenContent : (hasScenario ? scenarioContent : (typeof children === 'function' ? children({ registerOnNext, registerOnResult: registerOnResult, panelRef, setResultOverlay }) : children)) }) }), _jsx(TrainingPagePopupBottom, { onSettings: onSettings, onNext: handleNext, onResult: handleViewResults, useNoiseSettingBtn: Boolean(hasScenario ? (scenarioMeta.useNoiseSetting ?? true) : useNoiseSetting), stepIndex: effectiveStepIndex, stepCount: effectiveStepCount, pageIndex: effectivePageIndex, pageCount: effectivePageCount })] }), (resultOverlay && !resultOverlay.isEmpty && (renderResultPopup ?? defaultRenderResult)({
                 score: resultOverlay.score,
                 results: (resultOverlay.results || resultOverlay.answers || []),
                 contextsLength: resultOverlay.results ? resultOverlay.results.length : (resultOverlay.answers ? resultOverlay.answers.length : 0),
@@ -941,7 +941,7 @@ function TrainingPagePopupInner(props) {
                 },
                 onClose: handleResultDone,
                 pending: resultOverlay === 결과계산중,
-            })), (resultOverlay?.isEmpty && (_jsx("div", { className: "page-popup page-popup--result-empty", role: "dialog", "aria-modal": "true", "aria-label": t('training.result.eyebrow', '훈련 완료'), children: _jsxs("div", { className: "page-popup__panel page-popup__panel--center", children: [_jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "page-popup__empty", children: t('training.result.eyebrow', '훈련 완료') }) }) }), _jsx("div", { className: "page-popup__bottom", children: _jsx(Button, { htmlType: "button", variant: "main", size: 48, onClick: handleResultDone, label: t('training.result.done', '완료') }) })] }) }))), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+            })), (resultOverlay?.isEmpty && (_jsx("div", { className: "page-popup page-popup--result-empty", role: "dialog", "aria-modal": "true", "aria-label": t('training.result.eyebrow', '훈련 완료'), children: _jsxs("div", { className: "page-popup__panel page-popup__panel--center", children: [_jsx("div", { className: "page-popup__scroll", children: _jsx("div", { className: `page-popup__content page-popup__content--center${props.contentFull ? ' page-popup__content--full' : ''}`, children: _jsx("div", { className: "page-popup__empty", children: t('training.result.eyebrow', '훈련 완료') }) }) }), _jsx("div", { className: "page-popup__bottom", children: _jsx(Button, { htmlType: "button", variant: "main", size: 48, onClick: handleResultDone, label: t('training.result.done', '완료') }) })] }) }))), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
     const portalContent = (_jsx(NoisePlayerContext.Provider, { value: noiseContextValue, children: jsx }));
     if (typeof document !== 'undefined' && document.body)
         return createPortal(portalContent, document.body);

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

@@ -32,6 +32,10 @@ export interface WordTablePopupProps {
     renderFooter?: (actions: WordTablePopupActions) => PopupProps['footer'];
     /** renderFooter 사용 시 footer 래퍼에 추가할 클래스(정렬·간격 override용). */
     footerClassName?: string;
+    /** 바닥 줄의 가로 배치 — `Popup footerLayout` 을 그대로 내려보낸다(`'center'` 기본 · `'fill'` · `'between'`).
+     *  이 감싸개만 `footerClassName` 을 소비자에게 열고 있어, 여기 없으면 **이 창만** 앱 CSS 로 정렬을 칠해야 했다
+     *  (말귀 단어표 미리보기 창, 2026-09-18). */
+    footerLayout?: PopupProps['footerLayout'];
     /** 지정하면 하단에 "인쇄하기"·"새 창으로 보기" 버튼을 추가하고, 이 값을 PDF 저장 기본 파일명으로 쓴다. */
     printFileName?: string;
     /** 표 위에 '표 설정'(구성·용지 방향·외곽선 등) FilterPanel을 노출한다. */
@@ -58,4 +62,4 @@ export interface WordTablePopupProps {
  * 표 내부에는 제목을 두지 않아 팝업 헤더 제목과 중복되지 않는다.
  * @public
  */
-export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): import("react").JSX.Element;
+export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, footerLayout, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): import("react").JSX.Element;

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

@@ -19,7 +19,7 @@ import { useToastState } from '../../hooks/useToastState';
  * 표 내부에는 제목을 두지 않아 팝업 헤더 제목과 중복되지 않는다.
  * @public
  */
-export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, printFileName, showSettings, autoPrint, className, onClose, scoring = false, onScoreChange, printHeader, beforeClose }) {
+export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, footerLayout, printFileName, showSettings, autoPrint, className, onClose, scoring = false, onScoreChange, printHeader, beforeClose }) {
     const { t } = useTranslation();
     // items 우선, 없으면 문자열 words → 한 단어=한 칸으로 매핑
     const tableItems = useMemo(() => {
@@ -115,5 +115,5 @@ export default function WordTablePopup({ items, words, title, subtitle, emptyTex
         }, 100);
         return () => window.clearTimeout(id);
     }, [autoPrint]);
-    return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, scoring: scoring, scoreIndexOffset: pageStart[i], marks: 표에줄채점, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: 표에줄채점, onMarkClick: handleMarkClick }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
+    return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, footerLayout: footerLayout, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, scoring: scoring, scoreIndexOffset: pageStart[i], marks: 표에줄채점, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: 표에줄채점, onMarkClick: handleMarkClick }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
 }

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

@@ -64,6 +64,15 @@ export interface ButtonProps {
     ariaLabel?: string;
     variant?: ButtonVariant;
     align?: 'center' | 'left' | 'right' | 'grid';
+    /** 라벨을 **줄바꿈하지 않는다**(`white-space: nowrap`).
+     *
+     *  기본은 줄바꿈이다 — 표 칸처럼 좁은 자리에서 라벨이 길면 두 줄로 흐르는 편이 잘려 안 보이는 것보다 낫다.
+     *  하지만 '문자'·'카카오' 처럼 **두 글자가 한 낱말**인 단추는 갈리면 우습다. 그 자리에 켠다.
+     *  소비자 둘이 `.button__label-text { white-space: nowrap }` 로 각자 칠하고 있었다(2026-09-17 말귀 전수).
+     *
+     *  기본을 nowrap 으로 바꾸지 않은 까닭: 두 줄 라벨(`subLabel`·설명 붙은 단추)이 이미 선 화면이 있고,
+     *  좁은 자리에서 nowrap 은 **넘쳐 잘린다**(줄바꿈은 키만 늘어난다). 어느 쪽이 나은지는 그 자리가 안다. */
+    nowrap?: boolean;
     selected?: boolean;
     toggleable?: boolean;
     /**

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

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

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

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