@ihabdevteam/core 0.187.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.187.0";
+export declare const CORE_VERSION = "0.189.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1690,11 +1701,11 @@ export declare type CoreScopeStorageConfig = {
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
  *
- * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
- * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
+ * `plan` 을 주면 마우스를 얹었을 때 **담긴 훈련**(`TrainingTooltip`)이 뜬다 — 늦춤은 다른
+ * 자리와 같은 상수를 쓴다(지나가다 스치는 것에 번쩍이지 않게).
  * @public
  */
-export declare function CountTile({ icon, count, title, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): JSX.Element;
+export declare function CountTile({ icon, count, title, plan, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): JSX.Element;
 
 /** @public */
 export declare interface CountTileProps {
@@ -1703,21 +1714,25 @@ export declare interface CountTileProps {
     /** 우측 하단 숫자 */
     count: number | string;
     /**
-     * 갈래 이름 — 낭독기가 읽는 이름이자 **눈으로 보는 사람에게 뜨는 툴팁의 글**이다.
+     * 갈래 이름 — 낭독기가 읽는 이름이다(`"이름 수"` 로 읽힌다).
      *
      * **필수다.** 72×72 안에는 아이콘과 수뿐이라, 이 값이 없으면 그 아이콘이 무슨 갈래인지
-     * 알 길이 화면에도 낭독기에도 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
-     * 예전에는 선택값이었고 `aria-label` 로만 나가, 마우스 쓰는 사람은 **아무것도 못 봤다**
-     * (사용자 지시 2026-09-23: "호버시 tooltip 은 무조건 나와야 해").
+     * 낭독기로는 알 길이 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
      */
     title: string;
     /**
-     * 호버 툴팁을 끈다(기본 켬).
+     * 호버하면 보여 줄 **담긴 훈련**.
+     *
+     * 주면 마우스를 얹었을 때 `TrainingTooltip` 이 뜬다 — 그 안에 훈련 블록이 서고, 블록의
+     * 갈래 아이콘(`CategoryIcon`)에 다시 마우스를 얹으면 제 이름이 작은 툴팁으로 뜬다
+     * (사용자 지시 2026-09-23). 안 주면 아무것도 안 뜬다 — 타일 이름만 띄우는 글자 툴팁은
+     * **두지 않는다**(0.187.0 에 잠깐 있었고, 그건 요청을 잘못 읽은 것이었다).
      *
-     * 부르는 쪽이 **제 툴팁**을 띄우는 자리에서만 쓴다 — 말귀의 숙제 확인창 미리보기는
-     * `onMouseEnter` 로 무엇이 담겼는지 보여 주는 큰 툴팁(`TrainingTooltip`)을 띄우는데,
-     * 여기 기본 툴팁까지 뜨면 둘이 겹친다. 그 자리만 끈다.
+     * 이 타일이 세는 그 갈래의 항목만 담은 `plan` 을 준다 — `TrainingTooltip` 은 받은 `plan.items`
+     * 를 갈래별로 묶어 그리므로, 카드 전체의 `plan` 을 그대로 주면 타일마다 같은 것이 뜬다.
      */
+    plan?: TrainingPlan;
+    /** 호버 툴팁을 끈다(기본 켬) — 부르는 쪽이 제 툴팁을 띄우는 자리용 */
     tooltip?: boolean;
     className?: string;
     /** 클릭 핸들러 — 설정 시 버튼처럼 동작 */
@@ -3161,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;
 
@@ -5857,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;
@@ -9965,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/CountTile.d.ts

@@ -1,4 +1,5 @@
 import './CountTile.css';
+import type { TrainingPlan } from '../types/training';
 import type { ReactNode, MouseEvent } from 'react';
 /** @public */
 export interface CountTileProps {
@@ -7,21 +8,25 @@ export interface CountTileProps {
     /** 우측 하단 숫자 */
     count: number | string;
     /**
-     * 갈래 이름 — 낭독기가 읽는 이름이자 **눈으로 보는 사람에게 뜨는 툴팁의 글**이다.
+     * 갈래 이름 — 낭독기가 읽는 이름이다(`"이름 수"` 로 읽힌다).
      *
      * **필수다.** 72×72 안에는 아이콘과 수뿐이라, 이 값이 없으면 그 아이콘이 무슨 갈래인지
-     * 알 길이 화면에도 낭독기에도 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
-     * 예전에는 선택값이었고 `aria-label` 로만 나가, 마우스 쓰는 사람은 **아무것도 못 봤다**
-     * (사용자 지시 2026-09-23: "호버시 tooltip 은 무조건 나와야 해").
+     * 낭독기로는 알 길이 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
      */
     title: string;
     /**
-     * 호버 툴팁을 끈다(기본 켬).
+     * 호버하면 보여 줄 **담긴 훈련**.
      *
-     * 부르는 쪽이 **제 툴팁**을 띄우는 자리에서만 쓴다 — 말귀의 숙제 확인창 미리보기는
-     * `onMouseEnter` 로 무엇이 담겼는지 보여 주는 큰 툴팁(`TrainingTooltip`)을 띄우는데,
-     * 여기 기본 툴팁까지 뜨면 둘이 겹친다. 그 자리만 끈다.
+     * 주면 마우스를 얹었을 때 `TrainingTooltip` 이 뜬다 — 그 안에 훈련 블록이 서고, 블록의
+     * 갈래 아이콘(`CategoryIcon`)에 다시 마우스를 얹으면 제 이름이 작은 툴팁으로 뜬다
+     * (사용자 지시 2026-09-23). 안 주면 아무것도 안 뜬다 — 타일 이름만 띄우는 글자 툴팁은
+     * **두지 않는다**(0.187.0 에 잠깐 있었고, 그건 요청을 잘못 읽은 것이었다).
+     *
+     * 이 타일이 세는 그 갈래의 항목만 담은 `plan` 을 준다 — `TrainingTooltip` 은 받은 `plan.items`
+     * 를 갈래별로 묶어 그리므로, 카드 전체의 `plan` 을 그대로 주면 타일마다 같은 것이 뜬다.
      */
+    plan?: TrainingPlan;
+    /** 호버 툴팁을 끈다(기본 켬) — 부르는 쪽이 제 툴팁을 띄우는 자리용 */
     tooltip?: boolean;
     className?: string;
     /** 클릭 핸들러 — 설정 시 버튼처럼 동작 */
@@ -33,8 +38,8 @@ export interface CountTileProps {
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
  *
- * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
- * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
+ * `plan` 을 주면 마우스를 얹었을 때 **담긴 훈련**(`TrainingTooltip`)이 뜬다 — 늦춤은 다른
+ * 자리와 같은 상수를 쓴다(지나가다 스치는 것에 번쩍이지 않게).
  * @public
  */
-export default function CountTile({ icon, count, title, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): import("react").JSX.Element;
+export default function CountTile({ icon, count, title, plan, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): import("react").JSX.Element;

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

@@ -4,47 +4,79 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '../utils/cx';
 import './CountTile.css';
 import Icon from './Icon';
-import InfoTooltip from './Tooltip/InfoTooltip';
-import { TRAINING_TOOLTIP_HOVER_DELAY_MS } from './Tooltip/TrainingTooltip';
+import TrainingTooltip, { TRAINING_TOOLTIP_HOVER_DELAY_MS } from './Tooltip/TrainingTooltip';
+/** 타일과 툴팁 사이 틈(12px)을 건너는 동안 툴팁을 살려 두는 시간 */
+const 건너가는틈_MS = 200;
 /**
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
  *
- * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
- * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
+ * `plan` 을 주면 마우스를 얹었을 때 **담긴 훈련**(`TrainingTooltip`)이 뜬다 — 늦춤은 다른
+ * 자리와 같은 상수를 쓴다(지나가다 스치는 것에 번쩍이지 않게).
  * @public
  */
-export default function CountTile({ icon, count, title, tooltip = true, className = '', onClick, onMouseEnter, onMouseLeave }) {
+export default function CountTile({ icon, count, title, plan, tooltip = true, className = '', onClick, onMouseEnter, onMouseLeave }) {
     const cls = cx('count-tile', onClick && 'count-tile--clickable', className);
     const ref = useRef(null);
     const [anchorRect, setAnchorRect] = useState(null);
     const 늦춤 = useRef(null);
-    const 닫기 = useCallback(() => {
+    const 닫힘 = useRef(null);
+    const 켜짐 = Boolean(anchorRect && plan && tooltip);
+    const 시계끄기 = useCallback(() => {
         if (늦춤.current) {
             clearTimeout(늦춤.current);
             늦춤.current = null;
         }
-        setAnchorRect(null);
+        if (닫힘.current) {
+            clearTimeout(닫힘.current);
+            닫힘.current = null;
+        }
     }, []);
+    const 닫기 = useCallback(() => { 시계끄기(); setAnchorRect(null); }, [시계끄기]);
     /* 늦춰서 연다 — 타일이 열 개 붙어 서는 자리라, 지나가기만 해도 뜨면 줄줄이 번쩍인다. */
-    const 열기 = useCallback((바로) => {
-        if (!tooltip)
+    const 열기 = useCallback(() => {
+        if (!tooltip || !plan)
             return;
-        if (늦춤.current)
+        시계끄기();
+        늦춤.current = setTimeout(() => {
+            늦춤.current = null;
+            setAnchorRect(ref.current?.getBoundingClientRect() ?? null);
+        }, TRAINING_TOOLTIP_HOVER_DELAY_MS);
+    }, [tooltip, plan, 시계끄기]);
+    /**
+     * **바로 닫지 않는다.** 툴팁은 타일에서 12px 떨어져 뜨므로, 타일을 벗어나자마자 닫으면
+     * 그 틈을 건너는 동안 사라져 **툴팁 안의 갈래 아이콘에 마우스를 올릴 수가 없다** — 그
+     * 아이콘에 다시 뜨는 작은 이름표가 이 툴팁을 다는 까닭의 절반이다(사용자 지시 2026-09-23).
+     * 잠깐 두고, 그 사이 툴팁 안으로 들어오면 아래 지킴이가 예약을 무른다.
+     */
+    const 닫기예약 = useCallback(() => {
+        if (늦춤.current) {
             clearTimeout(늦춤.current);
-        const 띄우기 = () => setAnchorRect(ref.current?.getBoundingClientRect() ?? null);
-        if (바로) {
             늦춤.current = null;
-            띄우기();
-            return;
         }
-        늦춤.current = setTimeout(() => { 늦춤.current = null; 띄우기(); }, TRAINING_TOOLTIP_HOVER_DELAY_MS);
-    }, [tooltip]);
+        if (닫힘.current)
+            return;
+        닫힘.current = setTimeout(() => { 닫힘.current = null; setAnchorRect(null); }, 건너가는틈_MS);
+    }, []);
     /* 떠난 뒤에 타이머가 터지면 아무도 안 보는 자리에 툴팁이 남는다 */
-    useEffect(() => () => { if (늦춤.current)
-        clearTimeout(늦춤.current); }, []);
-    useEffect(() => { if (!tooltip)
-        닫기(); }, [tooltip, 닫기]);
+    useEffect(() => () => { 시계끄기(); }, [시계끄기]);
+    useEffect(() => { if (!tooltip || !plan)
+        닫기(); }, [tooltip, plan, 닫기]);
+    /* 툴팁이 떠 있는 동안 **포인터가 어디에 있는지** 본다 — 타일이나 툴팁 안이면 살려 두고,
+       둘 다 아니면 닫기를 예약한다. 툴팁은 포털로 body 끝에 나가 타일의 자식이 아니라서,
+       타일에 건 mouseleave 만으로는 "툴팁으로 건너갔다" 를 알 수 없다. */
+    useEffect(() => {
+        if (!켜짐)
+            return;
+        const 살릴자리 = (t) => t instanceof Element && (ref.current?.contains(t) || Boolean(t.closest('.tooltip-training')));
+        const 보기 = (e) => { if (살릴자리(e.target)) {
+            시계끄기();
+        }
+        else
+            닫기예약(); };
+        document.addEventListener('pointerover', 보기, true);
+        return () => document.removeEventListener('pointerover', 보기, true);
+    }, [켜짐, 시계끄기, 닫기예약]);
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: cls, onClick: onClick ? (e) => { 닫기(); onClick(e); } : undefined, 
                 /* role="button" + tabIndex 만 있고 키 처리가 없으면, 키보드 사용자는 여기 멈추고도
                    누를 수가 없다 — `<div>` 는 브라우저가 Enter·Space 를 대신 처리해 주지 않는다.
@@ -67,7 +99,5 @@ export default function CountTile({ icon, count, title, tooltip = true, classNam
                 onPointerEnter: (e) => { if (e.pointerType === 'touch' || e.pointerType === 'pen')
                     닫기();
                 else
-                    열기(false); }, onMouseEnter: onMouseEnter, onMouseLeave: (e) => { 닫기(); onMouseLeave?.(e); }, 
-                /* 키보드로 옮겨 온 사람에게도 보여야 한다 — 멈춘 자리라 늦출 까닭이 없어 바로 연다. */
-                onFocus: onClick ? () => 열기(true) : undefined, onBlur: onClick ? 닫기 : undefined, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": `${title} ${count}`, children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }), anchorRect && _jsx(InfoTooltip, { anchorRect: anchorRect, text: title })] }));
+                    열기(); }, onMouseEnter: onMouseEnter, onMouseLeave: (e) => { 닫기예약(); onMouseLeave?.(e); }, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": `${title} ${count}`, children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }), anchorRect && plan && _jsx(TrainingTooltip, { plan: plan, anchorRect: anchorRect, onClose: 닫기 })] }));
 }

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;