@ihabdevteam/core 0.188.0 → 0.189.0

package/dist/ihabdevteam-core.d.ts

@@ -1088,7 +1088,7 @@ export declare interface ChartPoint {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): JSX.Element;
+export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): JSX.Element;
 
 /** @public */
 export declare interface ChartSectionProps {
@@ -1105,6 +1105,17 @@ export declare interface ChartSectionProps {
     headRight?: ReactNode | ((state: {
         collapsed: boolean;
     }) => ReactNode);
+    /**
+     * 머리 오른쪽에 **띄우는** 단추 줄 — `headRight` 와 달리 흐름에서 빠진다.
+     *
+     * 40px 짜리 단추를 제목 줄에 함께 세우면 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다.
+     * 띄우면 제목은 제 높이로 서고, 제목·곁줄은 이 줄의 **잰 폭만큼** 자리를 비운다. 좁은 화면
+     * (600px 이하)에서는 흐름으로 되돌아가 제목 아래에 선다. 자세한 것은 `SectionHeadFloat`.
+     *
+     * 고르개·상세보기처럼 **제목과 한 줄로 서야 하는 것**은 `headRight` 가 맞다. 이쪽은 '숙제 보내기'
+     * 처럼 카드 전체에 대고 누르는 단추 자리다.
+     */
+    headFloat?: ReactNode;
     /** 머리의 보기 고르개. 카드가 좁으면 '⋯' 한 단추로 접히고, 그 메뉴에 칸들이 들어간다. */
     headSegment?: ChartHeadSegment;
     /** 접힌 '⋯' 메뉴에서 칸들 **뒤** 에 구분선과 함께 붙는 항목(상세보기 등) */
@@ -1606,7 +1617,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.188.0";
+export declare const CORE_VERSION = "0.189.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3165,6 +3176,86 @@ export declare const LEVEL_MAX = 9;
 /** @public */
 export declare const levelToPct: (level: number) => number;
 
+/** 점 위에 잠깐 머물면 뜨는 뜸 — 지나가는 마우스에 툴팁이 번쩍이지 않을 만큼만 짧게 @public */
+export declare const LINE_CHART_HOVER_DELAY_MS = 120;
+
+/**
+ * **작은 선 그래프** — 시간·조건에 따라 값이 어떻게 흐르는지를 그린다.
+ * 세로는 0~100%로 고정이고, 가로 범위는 부르는 쪽이 준다.
+ *
+ * **제 상자를 재어 배율 1 로 그린다.** `viewBox` 를 상자보다 좁게 두면 SVG 가 통째로 늘어나
+ * **글자까지 커진다**(말귀 실측 1.22배 — 사용자 지적 2026-09-17 "이 그래프가 폰트가 크게 보이는게
+ * 스케일 되서 그런건가?"). 잰 픽셀을 그대로 쓰면 CSS 에 적은 12px 이 화면에서도 12px 이다.
+ * 못 재는 자리(첫 렌더·ResizeObserver 없는 틀)에서는 `fallbackWidth` 로 그린다 — 늘어날 뿐 안 깨진다.
+ *
+ * **면 칠하기·짚는 자리처럼 그 화면에만 있는 말은 `overlay` 로 덧그린다** — 자(`x`·`y`)를 받으므로
+ * 좌표 셈을 다시 하지 않는다.
+ * @public
+ */
+export declare function LineChart({ points, range, ticks, axisTitle, color, height, fallbackWidth, insets, overlay, ariaLabel, className, }: LineChartProps): JSX.Element;
+
+/** @public */
+export declare interface LineChartPoint {
+    /** 가로 자리 — `range` 안의 값 */
+    x: number;
+    /** 세로 자리 — 0~100(%) */
+    pct: number;
+    /** 속을 비워 그린다(믿기 이른 값 등). 비운 점은 **선에서도 뺀다** */
+    hollow?: boolean;
+    /** 마우스를 얹으면 뜰 글. 없으면 그 점에는 안 뜬다 */
+    description?: string;
+}
+
+/** @public */
+export declare interface LineChartProps {
+    /** 그릴 점들 — 비면 축과 눈금만 선다 */
+    points?: LineChartPoint[];
+    /** 가로 범위 `[처음, 끝]` — 어떤 축인지(조건·주차·문항 수…)는 부르는 쪽이 정한다 */
+    range: [number, number];
+    /** 가로 눈금 — 안 주면 가로 글자가 없다 */
+    ticks?: {
+        x: number;
+        label: string;
+    }[];
+    /** 세로축 이름. **재는 것이 정답률이 아니면 반드시 준다** — 이름이 없으면 보는 사람이 정답률로 읽는다 */
+    axisTitle?: ReactNode;
+    /** 선·점 색. 안 주면 주 색 */
+    color?: string;
+    /** 그림 높이(px) — 배율이 1 이라 이 수가 곧 화면 높이다 */
+    height?: number;
+    /** 제 상자를 **못 잴 때만** 쓰는 대비 폭(첫 렌더·시험 틀) */
+    fallbackWidth?: number;
+    /** 축 안쪽 여백 — 왼쪽은 "100%" 가 들어갈 만큼이 기본이다 */
+    insets?: Partial<{
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    }>;
+    /** 그림 위에 덧그릴 것 — 자를 받아 SVG 조각을 돌려준다(면 칠하기·짚는 자리 같은 **그 화면의 말**) */
+    overlay?: (scales: LineChartScales) => ReactNode;
+    /** 낭독기가 읽을 글 — 안 주면 점들의 `description` 을 한 줄로 잇는다 */
+    ariaLabel?: string;
+    className?: string;
+}
+
+/** 그림 칸 안에서 값을 픽셀 자리로 옮기는 자 — `overlay` 가 이것으로 제 것을 덧그린다 @public */
+export declare interface LineChartScales {
+    /** 가로 값 → x 픽셀 */
+    x: (v: number) => number;
+    /** 0~100 → y 픽셀 */
+    y: (pct: number) => number;
+    /** 그림이 그려지는 네모(축 안쪽) */
+    plot: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+}
+
 /** @public */
 export declare function ListenStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): JSX.Element;
 
@@ -5861,6 +5952,34 @@ export declare interface SectionHeaderProps {
 /** @public */
 export declare type SectionHeaderTone = 'dark' | 'light';
 
+/**
+ * **카드 머리 오른쪽에 띄우는 단추 줄.**
+ *
+ * 흐름에서 빼는 까닭은 자리가 아니라 **높이**다 — 40px 짜리 단추를 제목 줄에 함께 세우면
+ * 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다. 띄우면 제목은 제 높이로 선다.
+ *
+ * 세 가지를 이 조각이 맡는다. 앱마다 손으로 하다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌 —
+ * `top/right: 19px` 라는 **카드 안쪽 여백**을 베껴 적고 있었다. 그 수를 아는 쪽은 카드다).
+ *
+ * 1. **자리** — 카드 안쪽 여백에 맞춰 띄운다(`--card-pad`, 기본 19px). 카드가 여백을 고치면 함께 움직인다.
+ * 2. **좁은 화면(600px 이하)에서 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮는다.
+ *    문턱이 600 인 것은 이 줄이 대개 250px 안팎이라, 그 아래에서는 제목과 나란히 설 자리가 없어서다.
+ * 3. **제 폭을 재어 알린다** — 띄운 줄은 흐름에서 빠져 제목·곁줄을 덮으므로 그만큼 비워 둬야 하는데,
+ *    부르는 쪽이 눈대중으로 `padding-right: 260px` 같은 수를 적고 있었다. 잰 폭을 부모에
+ *    `--section-head-float-w` 로 적으므로, 비울 자리는 `padding-right: calc(var(--section-head-float-w, -12px) + 12px)`
+ *    한 줄이면 된다(안 띄운 카드에서는 0 이 된다). 코어 카드(`manager-section`)는 이미 그렇게 해 둔다.
+ *
+ * 기준점은 **부모가 준다** — 카드에 `position: relative` 가 있어야 한다(코어 카드에는 있다).
+ * @public
+ */
+export declare function SectionHeadFloat({ children, className }: SectionHeadFloatProps): JSX.Element;
+
+/** @public */
+export declare interface SectionHeadFloatProps {
+    children?: ReactNode;
+    className?: string;
+}
+
 /** @public */
 export declare interface SectionProps {
     type?: SectionType;
@@ -9969,8 +10088,23 @@ export declare interface WordTableProps {
     };
     /** 페이지 번호 위치 — 'none'이면 미표시 (기본 'right') */
     pageNumberPosition?: PageNumberPosition;
-    /** 컨테이너 높이에도 맞춰 축소한다(세로 용지가 넘쳐 잘리는 것 방지). 부모가 높이 제한 박스여야 한다. */
-    fitHeight?: boolean;
+    /**
+     * 정해진 세로 자리에 맞춰 줄인다(세로 용지가 넘쳐 잘리는 것 방지).
+     *
+     * - **수(px)** — 그 높이의 **담는 틀을 표가 스스로** 두른다. 표는 그 안에서 가로·세로 가운데에
+     *   선다. 부르는 쪽은 "이만큼 자리에 맞춰 줄여" 한 마디면 된다.
+     * - **`{ wide, narrow }`** — 좁은 화면(767px 이하)에서는 `narrow` 를 쓴다. 좁으면 **폭이 먼저
+     *   걸려** 표가 가로에 맞춰 줄고 상자 아래가 비므로, 상자를 그만큼 낮춰 빈 자리를 없앤다
+     *   (말귀 실측 375px: 320px 상자에 183px 표 — 137px 이 비었다).
+     * - **`true`** — 틀을 두르지 않는다. **부모가 높이 제한 박스여야 한다**(예전 동작).
+     *
+     * 앱마다 이 틀을 손수 만들다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌, 주석 문장까지 같았다)
+     * — 틀을 여기로 들인 까닭이다(2026-09-24).
+     */
+    fitHeight?: boolean | number | {
+        wide: number;
+        narrow: number;
+    };
 }
 
 /**

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

@@ -12,7 +12,12 @@
   /* 테두리 1px 만큼 padding 을 1px 줄인다(20 → 19). 전역 box-sizing:border-box 는
      **정한 폭**에만 테두리를 넣어 줄 뿐 높이가 auto 인 카드는 위아래 2px 커지고,
      안쪽 내용도 1px 씩 안으로 밀린다. 이렇게 두면 바깥 크기와 내용 자리가 전과 같다. */
-  padding: 19px;
+  /* 안쪽 여백을 변수로도 내보낸다 — 머리 오른쪽에 띄우는 줄(`SectionHeadFloat`)이 이 값에
+     맞춰 서야 제목 줄과 윗선이 맞는다. 부르는 쪽이 그 수를 베껴 적지 않게 한다(2026-09-24). */
+  --card-pad: 19px;
+  padding: var(--card-pad);
+  /* 머리 오른쪽에 띄우는 줄(`SectionHeadFloat`)의 기준점 — 없으면 창 구석으로 날아간다 */
+  position: relative;
   margin-bottom: 14px;
   /* 차트 카드 — inline 나열 가능하도록 최소 폭만 지정(최대 폭 제한 없음) */
   min-width: 320px;
@@ -37,6 +42,13 @@
   /* 머리 바로 아래가 합계 줄이라 12px 은 떠 보인다 — 한 눈금 줄인다 */
   margin-bottom: var(--spacing-xs);
 }
+/* **띄운 줄이 있으면 그만큼 비워 둔다.** 띄운 줄은 흐름에서 빠져 제목·곁줄을 덮는다.
+   `SectionHeadFloat` 이 잰 제 폭을 카드에 적어 두므로 눈대중으로 수를 적을 일이 없다 —
+   안 띄운 카드에서는 -12 + 12 = 0 이라 아무 일도 안 일어난다(2026-09-24). */
+.manager-section__title-row,
+.manager-section__disc {
+  padding-right: calc(var(--section-head-float-w, -12px) + 12px);
+}
 /* 제목은 줄어들 수 있어야 한다 — min-width 기본값(auto)이면 글자 길이만큼 버텨 넘친다 */
 .manager-section__title {
   min-width: 0;
@@ -106,7 +118,9 @@
     flex-wrap: nowrap;
   }
   .manager-section {
-    padding: 17px; /* 18 − 테두리 1px */
+    /* 띄운 줄도 이 값에 맞춰 선다 — 여백은 `--card-pad` 한 군데서 정한다 */
+    --card-pad: 17px; /* 18 − 테두리 1px */
+    padding: var(--card-pad);
     /* 기본 규칙의 min-width:320px는 "차트 카드를 가로로 나란히 놓을 수 있게" 잡아둔
        하한인데, 이 폭부터는 카드가 한 장씩 세로로 쌓여 그 이유가 사라진다. 그대로
        두면 320px 기기에서 카드가 부모(280px)를 40px 넘쳐 오른쪽이 잘렸다.
@@ -207,7 +221,8 @@
    패딩·헤더 높이·간격을 StatChart(.manager-stat-card)와 동일하게 맞춰, 같은 그리드 행에 나란히
    놓였을 때 숫자 세로 위치가 어긋나지 않게 한다 */
 .manager-section--compact {
-  padding: 19px; /* 20 − 테두리 1px */
+  --card-pad: 19px; /* 20 − 테두리 1px */
+  padding: var(--card-pad);
   min-width: 160px;
 }
 .manager-section--compact .manager-section__head {

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

@@ -50,6 +50,17 @@ export interface ChartSectionProps {
     headRight?: ReactNode | ((state: {
         collapsed: boolean;
     }) => ReactNode);
+    /**
+     * 머리 오른쪽에 **띄우는** 단추 줄 — `headRight` 와 달리 흐름에서 빠진다.
+     *
+     * 40px 짜리 단추를 제목 줄에 함께 세우면 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다.
+     * 띄우면 제목은 제 높이로 서고, 제목·곁줄은 이 줄의 **잰 폭만큼** 자리를 비운다. 좁은 화면
+     * (600px 이하)에서는 흐름으로 되돌아가 제목 아래에 선다. 자세한 것은 `SectionHeadFloat`.
+     *
+     * 고르개·상세보기처럼 **제목과 한 줄로 서야 하는 것**은 `headRight` 가 맞다. 이쪽은 '숙제 보내기'
+     * 처럼 카드 전체에 대고 누르는 단추 자리다.
+     */
+    headFloat?: ReactNode;
     /** 머리의 보기 고르개. 카드가 좁으면 '⋯' 한 단추로 접히고, 그 메뉴에 칸들이 들어간다. */
     headSegment?: ChartHeadSegment;
     /** 접힌 '⋯' 메뉴에서 칸들 **뒤** 에 구분선과 함께 붙는 항목(상세보기 등) */
@@ -105,4 +116,4 @@ export interface ChartSectionProps {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName, icon, disc, headRight, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;
+export default function ChartSection({ title, titleClassName, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;

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

@@ -4,6 +4,7 @@ import './ChartSection.css';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
+import SectionHeadFloat from './SectionHeadFloat';
 import Button from './Button';
 import SegmentedControl from './SegmentedControl';
 import Tooltip from './Tooltip/Tooltip';
@@ -28,7 +29,7 @@ export function ChartTotal({ label, children }) {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign = 'start', className, inGrid = false, children }) {
+export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign = 'start', className, inGrid = false, children }) {
     const { t } = useTranslation();
     const secRef = useRef(null);
     /* 설명 툴팁 — StatChart 와 같은 결(카드 사각형 기준, 포인터가 나가거나 초점이 빠지면 닫힘).
@@ -113,5 +114,5 @@ export default function ChartSection({ title, titleClassName = 'h3', icon, disc,
                     bottom: 설명자리.bottom,
                     width: 설명자리.width,
                     height: 설명자리.height,
-                }, text: tooltip })), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx("div", { className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), (수줄 || subRow) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), children: [수줄, subRow] })), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
+                }, text: tooltip })), headFloat && _jsx(SectionHeadFloat, { children: headFloat }), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx("div", { className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), (수줄 || subRow) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), children: [수줄, subRow] })), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
 }

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

@@ -0,0 +1,52 @@
+/* 작은 선 그래프 — 까닭과 쓰는 법은 `LineChart.tsx` 의 글에.
+   **글자 크기를 여기 px 로 적는 것이 뜻이 있으려면** 그림이 배율 1 이어야 한다(그래서 제 상자를 잰다). */
+.line-chart {
+  width: 100%;
+  height: auto;
+  display: block;
+  overflow: visible;
+}
+
+.line-chart__axis-title {
+  font-size: 12px;
+  fill: var(--color-gray);
+}
+
+.line-chart__tick {
+  font-size: 12px;
+  fill: var(--color-gray);
+}
+
+.line-chart__grid {
+  stroke: var(--color-whiteLine);
+  stroke-width: 1;
+}
+
+.line-chart__line {
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* 겨누는 자리 — 보이지 않지만 손이 닿는다 */
+.line-chart__dot-hit {
+  fill: transparent;
+}
+
+.line-chart__dot-main {
+  stroke-width: 1.5;
+}
+/* 속 빈 점 — 믿기 이른 값. 채움은 여기서 준다(선 색은 부르는 쪽이 정하므로 인라인이다) */
+.line-chart__dot-main.is-hollow {
+  fill: var(--color-white);
+}
+
+/* 점에 얹으면 뜨는 말풍선 — 좁은 카드 안에서 줄이 잘리지 않게 */
+.line-chart__tip {
+  max-width: 220px;
+  white-space: normal;
+}
+
+.line-chart__dot {
+  cursor: default;
+}

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

@@ -0,0 +1,77 @@
+import './LineChart.css';
+import type { ReactNode } from 'react';
+/** 점 위에 잠깐 머물면 뜨는 뜸 — 지나가는 마우스에 툴팁이 번쩍이지 않을 만큼만 짧게 @public */
+export declare const LINE_CHART_HOVER_DELAY_MS = 120;
+/** @public */
+export interface LineChartPoint {
+    /** 가로 자리 — `range` 안의 값 */
+    x: number;
+    /** 세로 자리 — 0~100(%) */
+    pct: number;
+    /** 속을 비워 그린다(믿기 이른 값 등). 비운 점은 **선에서도 뺀다** */
+    hollow?: boolean;
+    /** 마우스를 얹으면 뜰 글. 없으면 그 점에는 안 뜬다 */
+    description?: string;
+}
+/** 그림 칸 안에서 값을 픽셀 자리로 옮기는 자 — `overlay` 가 이것으로 제 것을 덧그린다 @public */
+export interface LineChartScales {
+    /** 가로 값 → x 픽셀 */
+    x: (v: number) => number;
+    /** 0~100 → y 픽셀 */
+    y: (pct: number) => number;
+    /** 그림이 그려지는 네모(축 안쪽) */
+    plot: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+}
+/** @public */
+export interface LineChartProps {
+    /** 그릴 점들 — 비면 축과 눈금만 선다 */
+    points?: LineChartPoint[];
+    /** 가로 범위 `[처음, 끝]` — 어떤 축인지(조건·주차·문항 수…)는 부르는 쪽이 정한다 */
+    range: [number, number];
+    /** 가로 눈금 — 안 주면 가로 글자가 없다 */
+    ticks?: {
+        x: number;
+        label: string;
+    }[];
+    /** 세로축 이름. **재는 것이 정답률이 아니면 반드시 준다** — 이름이 없으면 보는 사람이 정답률로 읽는다 */
+    axisTitle?: ReactNode;
+    /** 선·점 색. 안 주면 주 색 */
+    color?: string;
+    /** 그림 높이(px) — 배율이 1 이라 이 수가 곧 화면 높이다 */
+    height?: number;
+    /** 제 상자를 **못 잴 때만** 쓰는 대비 폭(첫 렌더·시험 틀) */
+    fallbackWidth?: number;
+    /** 축 안쪽 여백 — 왼쪽은 "100%" 가 들어갈 만큼이 기본이다 */
+    insets?: Partial<{
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    }>;
+    /** 그림 위에 덧그릴 것 — 자를 받아 SVG 조각을 돌려준다(면 칠하기·짚는 자리 같은 **그 화면의 말**) */
+    overlay?: (scales: LineChartScales) => ReactNode;
+    /** 낭독기가 읽을 글 — 안 주면 점들의 `description` 을 한 줄로 잇는다 */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * **작은 선 그래프** — 시간·조건에 따라 값이 어떻게 흐르는지를 그린다.
+ * 세로는 0~100%로 고정이고, 가로 범위는 부르는 쪽이 준다.
+ *
+ * **제 상자를 재어 배율 1 로 그린다.** `viewBox` 를 상자보다 좁게 두면 SVG 가 통째로 늘어나
+ * **글자까지 커진다**(말귀 실측 1.22배 — 사용자 지적 2026-09-17 "이 그래프가 폰트가 크게 보이는게
+ * 스케일 되서 그런건가?"). 잰 픽셀을 그대로 쓰면 CSS 에 적은 12px 이 화면에서도 12px 이다.
+ * 못 재는 자리(첫 렌더·ResizeObserver 없는 틀)에서는 `fallbackWidth` 로 그린다 — 늘어날 뿐 안 깨진다.
+ *
+ * **면 칠하기·짚는 자리처럼 그 화면에만 있는 말은 `overlay` 로 덧그린다** — 자(`x`·`y`)를 받으므로
+ * 좌표 셈을 다시 하지 않는다.
+ * @public
+ */
+export default function LineChart({ points, range, ticks, axisTitle, color, height, fallbackWidth, insets, overlay, ariaLabel, className, }: LineChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { cx } from '../utils/cx';
+import './LineChart.css';
+import Tooltip from './Tooltip/Tooltip';
+import { useDelayedHoverAnchor } from '../hooks/useHoverAnchor';
+/** 점 위에 잠깐 머물면 뜨는 뜸 — 지나가는 마우스에 툴팁이 번쩍이지 않을 만큼만 짧게 @public */
+export const LINE_CHART_HOVER_DELAY_MS = 120;
+const 기본여백 = { left: 38, right: 16, top: 26, bottom: 24 };
+/**
+ * **작은 선 그래프** — 시간·조건에 따라 값이 어떻게 흐르는지를 그린다.
+ * 세로는 0~100%로 고정이고, 가로 범위는 부르는 쪽이 준다.
+ *
+ * **제 상자를 재어 배율 1 로 그린다.** `viewBox` 를 상자보다 좁게 두면 SVG 가 통째로 늘어나
+ * **글자까지 커진다**(말귀 실측 1.22배 — 사용자 지적 2026-09-17 "이 그래프가 폰트가 크게 보이는게
+ * 스케일 되서 그런건가?"). 잰 픽셀을 그대로 쓰면 CSS 에 적은 12px 이 화면에서도 12px 이다.
+ * 못 재는 자리(첫 렌더·ResizeObserver 없는 틀)에서는 `fallbackWidth` 로 그린다 — 늘어날 뿐 안 깨진다.
+ *
+ * **면 칠하기·짚는 자리처럼 그 화면에만 있는 말은 `overlay` 로 덧그린다** — 자(`x`·`y`)를 받으므로
+ * 좌표 셈을 다시 하지 않는다.
+ * @public
+ */
+export default function LineChart({ points = [], range, ticks = [], axisTitle, color, height = 156, fallbackWidth = 320, insets, overlay, ariaLabel, className, }) {
+    /* **제 상자를 재어 그 픽셀 수를 그림 칸으로 쓴다.** `width: 100%` 는 그대로라 viewBox 를 바꿔도
+       가로가 다시 바뀌지 않는다(되먹임이 없다). */
+    const [잰폭, set잰폭] = useState(null);
+    const [칸, set칸] = useState(null);
+    useEffect(() => {
+        if (!칸)
+            return;
+        const 재기 = (w) => set잰폭(Math.round(w) || null);
+        재기(칸.getBoundingClientRect().width);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const 지켜보기 = new ResizeObserver(([e]) => 재기(e.contentRect.width));
+        지켜보기.observe(칸);
+        return () => { 지켜보기.disconnect(); };
+    }, [칸]);
+    const { payload: 짚은글, anchorRect: 짚은자리, openAfterDelay, close: 닫기 } = useDelayedHoverAnchor(LINE_CHART_HOVER_DELAY_MS);
+    const 얹힘 = useCallback((글, el) => {
+        if (글)
+            openAfterDelay(글, el.getBoundingClientRect());
+    }, [openAfterDelay]);
+    const W = 잰폭 ?? fallbackWidth, H = height;
+    const { left: 왼, right: 오른, top: 위, bottom: 아래 } = { ...기본여백, ...insets };
+    const [처음, 끝] = range;
+    /* 범위는 부르는 쪽이 적어도 한 칸 폭으로 준다(끝 > 처음) — 같으면 0 으로 나누므로 왼쪽 끝에 몰아 둔다 */
+    const x = (v) => (끝 === 처음 ? 왼 : 왼 + ((W - 왼 - 오른) * (v - 처음)) / (끝 - 처음));
+    const y = (pct) => 위 + ((H - 위 - 아래) * (100 - pct)) / 100;
+    const 자 = {
+        x, y,
+        plot: { left: 왼, right: W - 오른, top: 위, bottom: H - 아래, width: Math.max(0, W - 왼 - 오른), height: Math.max(0, H - 위 - 아래) },
+    };
+    /* 선은 **믿을 점만** 잇는다 — 속 빈 점까지 이으면 "이만큼 봤다" 는 말이 흐려진다 */
+    const 이을점 = points.filter(p => !p.hollow);
+    const 색 = color ?? 'var(--color-main)';
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { ref: set칸, className: cx('line-chart', className), viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": ariaLabel ?? points.map(p => p.description).filter(Boolean).join(', '), children: [axisTitle && _jsx("text", { className: "line-chart__axis-title", x: 0, y: 12, children: axisTitle }), [0, 100].map(v => (_jsxs("g", { children: [_jsx("line", { className: "line-chart__grid", x1: 왼, x2: W - 오른, y1: y(v), y2: y(v) }), _jsxs("text", { className: "line-chart__tick", x: 왼 - 6, y: y(v) + 4, textAnchor: "end", children: [v, "%"] })] }, v))), overlay?.(자), ticks.map(tk => (_jsx("text", { className: "line-chart__tick", x: x(tk.x), y: H - 5, textAnchor: "middle", children: tk.label }, tk.x))), 이을점.length > 1 && (_jsx("polyline", { className: "line-chart__line", fill: "none", stroke: 색, points: 이을점.map(p => `${x(p.x)},${y(p.pct)}`).join(' ') })), points.map(p => (_jsxs("g", { className: "line-chart__dot", onPointerEnter: e => 얹힘(p.description, e.currentTarget), onPointerLeave: 닫기, children: [_jsx("circle", { className: "line-chart__dot-hit", cx: x(p.x), cy: y(p.pct), r: 12 }), _jsx("circle", { className: cx('line-chart__dot-main', p.hollow && 'is-hollow'), cx: x(p.x), cy: y(p.pct), r: 4, stroke: 색, fill: p.hollow ? undefined : 색 })] }, p.x)))] }), 짚은글 != null && (_jsx(Tooltip, { anchorRect: 짚은자리, offset: 10, closeOnOutsideClick: false, className: "line-chart__tip", role: "tooltip", ariaLabel: 짚은글, children: 짚은글 }))] }));
+}

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

@@ -0,0 +1,25 @@
+/* 카드 머리 오른쪽에 띄우는 단추 줄 — 까닭과 쓰는 법은 `SectionHeadFloat.tsx` 의 글에. */
+.section-head-float {
+  position: absolute;
+  /* 카드 안쪽 여백과 같은 값이라야 제목 줄과 윗선이 맞는다 — 그 수는 카드가 알고 있다 */
+  top: var(--card-pad, 19px);
+  right: var(--card-pad, 19px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-m);
+  /* 제목이 설 자리는 남긴다 */
+  max-width: 50%;
+  z-index: 1;
+}
+
+/* **좁으면 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮고, 단추 이름도 두 줄로 갈린다.
+   이 줄은 대개 250px 안팎이라 600px 아래에서는 제목과 나란히 설 자리가 없다. */
+@media (max-width: 600px) {
+  .section-head-float {
+    position: static;
+    max-width: none;
+    margin-top: var(--spacing-m);
+    flex-wrap: wrap;
+  }
+}

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

@@ -0,0 +1,28 @@
+import './SectionHeadFloat.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface SectionHeadFloatProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * **카드 머리 오른쪽에 띄우는 단추 줄.**
+ *
+ * 흐름에서 빼는 까닭은 자리가 아니라 **높이**다 — 40px 짜리 단추를 제목 줄에 함께 세우면
+ * 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다. 띄우면 제목은 제 높이로 선다.
+ *
+ * 세 가지를 이 조각이 맡는다. 앱마다 손으로 하다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌 —
+ * `top/right: 19px` 라는 **카드 안쪽 여백**을 베껴 적고 있었다. 그 수를 아는 쪽은 카드다).
+ *
+ * 1. **자리** — 카드 안쪽 여백에 맞춰 띄운다(`--card-pad`, 기본 19px). 카드가 여백을 고치면 함께 움직인다.
+ * 2. **좁은 화면(600px 이하)에서 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮는다.
+ *    문턱이 600 인 것은 이 줄이 대개 250px 안팎이라, 그 아래에서는 제목과 나란히 설 자리가 없어서다.
+ * 3. **제 폭을 재어 알린다** — 띄운 줄은 흐름에서 빠져 제목·곁줄을 덮으므로 그만큼 비워 둬야 하는데,
+ *    부르는 쪽이 눈대중으로 `padding-right: 260px` 같은 수를 적고 있었다. 잰 폭을 부모에
+ *    `--section-head-float-w` 로 적으므로, 비울 자리는 `padding-right: calc(var(--section-head-float-w, -12px) + 12px)`
+ *    한 줄이면 된다(안 띄운 카드에서는 0 이 된다). 코어 카드(`manager-section`)는 이미 그렇게 해 둔다.
+ *
+ * 기준점은 **부모가 준다** — 카드에 `position: relative` 가 있어야 한다(코어 카드에는 있다).
+ * @public
+ */
+export default function SectionHeadFloat({ children, className }: SectionHeadFloatProps): import("react").JSX.Element;

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cx } from '../utils/cx';
+import './SectionHeadFloat.css';
+/**
+ * **카드 머리 오른쪽에 띄우는 단추 줄.**
+ *
+ * 흐름에서 빼는 까닭은 자리가 아니라 **높이**다 — 40px 짜리 단추를 제목 줄에 함께 세우면
+ * 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다. 띄우면 제목은 제 높이로 선다.
+ *
+ * 세 가지를 이 조각이 맡는다. 앱마다 손으로 하다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌 —
+ * `top/right: 19px` 라는 **카드 안쪽 여백**을 베껴 적고 있었다. 그 수를 아는 쪽은 카드다).
+ *
+ * 1. **자리** — 카드 안쪽 여백에 맞춰 띄운다(`--card-pad`, 기본 19px). 카드가 여백을 고치면 함께 움직인다.
+ * 2. **좁은 화면(600px 이하)에서 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮는다.
+ *    문턱이 600 인 것은 이 줄이 대개 250px 안팎이라, 그 아래에서는 제목과 나란히 설 자리가 없어서다.
+ * 3. **제 폭을 재어 알린다** — 띄운 줄은 흐름에서 빠져 제목·곁줄을 덮으므로 그만큼 비워 둬야 하는데,
+ *    부르는 쪽이 눈대중으로 `padding-right: 260px` 같은 수를 적고 있었다. 잰 폭을 부모에
+ *    `--section-head-float-w` 로 적으므로, 비울 자리는 `padding-right: calc(var(--section-head-float-w, -12px) + 12px)`
+ *    한 줄이면 된다(안 띄운 카드에서는 0 이 된다). 코어 카드(`manager-section`)는 이미 그렇게 해 둔다.
+ *
+ * 기준점은 **부모가 준다** — 카드에 `position: relative` 가 있어야 한다(코어 카드에는 있다).
+ * @public
+ */
+export default function SectionHeadFloat({ children, className }) {
+    const ref = useRef(null);
+    const [부모, set부모] = useState(null);
+    useEffect(() => { set부모(ref.current?.parentElement ?? null); }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !부모)
+            return;
+        /* 흐름으로 돌아간 좁은 화면에서는 비울 자리가 없다 — 그때 폭을 적어 두면 제목이 공연히 좁아진다.
+           `position` 을 보고 가른다(문턱을 두 군데 적지 않으려고 — CSS 가 정본이다). */
+        const 적기 = () => {
+            const 띄웠나 = typeof window !== 'undefined' && window.getComputedStyle(el).position === 'absolute';
+            const w = 띄웠나 ? Math.ceil(el.getBoundingClientRect().width) : 0;
+            if (w > 0)
+                부모.style.setProperty('--section-head-float-w', `${w}px`);
+            else
+                부모.style.removeProperty('--section-head-float-w');
+        };
+        적기();
+        if (typeof ResizeObserver === 'undefined')
+            return () => { 부모.style.removeProperty('--section-head-float-w'); };
+        /* 줄 자신과 카드를 함께 본다 — 단추 글자가 바뀌면 줄이, 창이 좁아지면 카드가 먼저 움직인다 */
+        const 지켜보기 = new ResizeObserver(() => 적기());
+        지켜보기.observe(el);
+        지켜보기.observe(부모);
+        return () => { 지켜보기.disconnect(); 부모.style.removeProperty('--section-head-float-w'); };
+    }, [부모, children]);
+    return _jsx("div", { ref: ref, className: cx('section-head-float', className), children: children });
+}

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

@@ -498,3 +498,13 @@
     border-color: var(--color-warn);
     --button-icon-color: #ffffff;
 }
+
+/* **미리보기를 담는 틀** — `fitHeight` 에 높이를 주면 표가 스스로 두른다.
+   부르는 쪽마다 이 상자를 손수 만들다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌, 주석 문장까지
+   같았다 — 2026-09-24). `useFitScale` 이 스케일러의 **부모**를 재므로 이 틀이 곧 그 자다. */
+.word-table__frame {
+  display: flex;
+  justify-content: center;
+  /* 남는 세로를 위아래로 나눈다 — 표가 상자보다 납작할 때 아래로만 쏠려 보이지 않게 */
+  align-items: center;
+}

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

@@ -69,8 +69,23 @@ export interface WordTableProps {
     };
     /** 페이지 번호 위치 — 'none'이면 미표시 (기본 'right') */
     pageNumberPosition?: PageNumberPosition;
-    /** 컨테이너 높이에도 맞춰 축소한다(세로 용지가 넘쳐 잘리는 것 방지). 부모가 높이 제한 박스여야 한다. */
-    fitHeight?: boolean;
+    /**
+     * 정해진 세로 자리에 맞춰 줄인다(세로 용지가 넘쳐 잘리는 것 방지).
+     *
+     * - **수(px)** — 그 높이의 **담는 틀을 표가 스스로** 두른다. 표는 그 안에서 가로·세로 가운데에
+     *   선다. 부르는 쪽은 "이만큼 자리에 맞춰 줄여" 한 마디면 된다.
+     * - **`{ wide, narrow }`** — 좁은 화면(767px 이하)에서는 `narrow` 를 쓴다. 좁으면 **폭이 먼저
+     *   걸려** 표가 가로에 맞춰 줄고 상자 아래가 비므로, 상자를 그만큼 낮춰 빈 자리를 없앤다
+     *   (말귀 실측 375px: 320px 상자에 183px 표 — 137px 이 비었다).
+     * - **`true`** — 틀을 두르지 않는다. **부모가 높이 제한 박스여야 한다**(예전 동작).
+     *
+     * 앱마다 이 틀을 손수 만들다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌, 주석 문장까지 같았다)
+     * — 틀을 여기로 들인 까닭이다(2026-09-24).
+     */
+    fitHeight?: boolean | number | {
+        wide: number;
+        narrow: number;
+    };
 }
 /**
  * 단어표(표 디자인) — A4 종이를 컨테이너에 맞춰 축소(scale)하고,