@ihabdevteam/core 0.188.0 → 0.190.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.190.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3165,6 +3176,93 @@ 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;
+    }[];
+    /**
+     * 세로축 이름 — **안 주면 아무것도 안 그린다**(코어는 부르는 쪽의 사전을 모른다).
+     *
+     * **재는 것이 정답률이 아니면 반드시 준다.** 이름이 없으면 보는 사람이 정답률로 읽는다
+     * (말귀 실측: 순서화는 '전부 맞힘' 비율인데 정답률로 읽혀 "문장별로는 정답률이 낮은데 왜
+     * 전체 정답률은 높아?" 라는 물음이 나왔다 — 2026-09-17). 늘 같은 말이 붙는 화면이라면
+     * 감싸개에서 기본값을 들어 주는 편이 낫다.
+     */
+    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;
 
@@ -4613,6 +4711,22 @@ export declare interface PopupProps {
     };
     /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
     footerClassName?: string;
+    /**
+     * 바닥 줄 **왼쪽 덩이** — 보조 단추(아이콘 단추 여럿)가 서는 자리.
+     *
+     * `footerLayout: 'between'` 은 **직계 자식만** 양끝으로 민다. 그래서 "왼쪽 여럿 · 오른쪽 여럿" 을
+     * 만들려면 부르는 쪽이 덩이 둘을 손수 지어야 했고, 그 규칙이 창마다 한 벌씩 생겼다(말귀 다섯 쌍,
+     * 쌍마다 한 글자도 안 달랐다 — 2026-09-24). 바닥 줄의 자리 잡기는 **창의 일**이라 여기로 들인다.
+     *
+     * 덩이 안쪽 간격은 코어가 정한다 — 왼쪽은 촘촘히(`--spacing-xs`), 오른쪽은 한 눈금 넓게(`--spacing-s`),
+     * 두 덩이 사이는 그보다 넓게(`--spacing-l`). 그래야 좁아져 줄이 바뀌어도 **두 덩이가 섞여 보이지 않는다.**
+     * 좁으면 덩이째 줄을 바꾸고 오른쪽 덩이는 그 줄에서도 오른쪽 끝에 선다.
+     *
+     * 둘 중 하나만 줘도 된다. 주면 `footer`·`buttons` 보다 이쪽이 그려진다.
+     */
+    footerStart?: ReactNode | ((opts: PopupOptions) => ReactNode);
+    /** 바닥 줄 **오른쪽 덩이** — 주 단추가 서는 자리. 자세한 것은 `footerStart`. */
+    footerEnd?: ReactNode | ((opts: PopupOptions) => ReactNode);
     /** 바닥 줄의 가로 배치 — `'center'`(기본) · `'fill'` · `'between'`.
      *
      *  - `'center'`: 지금까지와 같다(가운데 모음).
@@ -5861,6 +5975,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 +10111,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,84 @@
+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;
+    }[];
+    /**
+     * 세로축 이름 — **안 주면 아무것도 안 그린다**(코어는 부르는 쪽의 사전을 모른다).
+     *
+     * **재는 것이 정답률이 아니면 반드시 준다.** 이름이 없으면 보는 사람이 정답률로 읽는다
+     * (말귀 실측: 순서화는 '전부 맞힘' 비율인데 정답률로 읽혀 "문장별로는 정답률이 낮은데 왜
+     * 전체 정답률은 높아?" 라는 물음이 나왔다 — 2026-09-17). 늘 같은 말이 붙는 화면이라면
+     * 감싸개에서 기본값을 들어 주는 편이 낫다.
+     */
+    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/Popup/Popup.css

@@ -110,6 +110,44 @@
    `flex: 1` 의 기본 바닥(min-width: auto)은 글자 길이만큼 버틴다 — 0 으로 내려 줄이 바뀌기 전에
    먼저 줄어들게 하고, 그래도 모자라면 위의 `flex-wrap` 이 아랫줄로 내린다. */
 .popup-footer--buttons > * { max-width: 200px; flex: 1 1 auto; min-width: 0; }
+
+/* **바닥 줄의 두 덩이**(`footerStart` · `footerEnd`) — 왼쪽 보조, 오른쪽 주 단추.
+   창마다 한 벌씩 베껴 적히던 규칙이다(말귀 다섯 쌍, 쌍마다 한 글자도 안 달랐다 — 2026-09-24).
+
+   간격은 **안쪽보다 사이가 넓다**(xs·s < l). 좁아져 줄이 바뀌어도 두 덩이가 한 덩이로 섞여
+   보이지 않게 하는 것이 이 차이의 일이다. 줄은 바꾸되(넘쳐 잘리는 것보다 낫다 — 0.185.0 에서
+   바닥이 잘려 못 누르던 자리를 겪었다) 오른쪽 덩이는 새 줄에서도 오른쪽 끝에 선다. */
+.popup-footer--bar {
+  justify-content: space-between;
+  gap: var(--spacing-l);
+  flex-wrap: wrap;
+}
+.popup-footer__start {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  /* 글자가 길어도 줄이 바뀌기 전에 먼저 줄어들게 — 기본값(auto)은 글자 길이만큼 버틴다 */
+  min-width: 0;
+}
+.popup-footer__end {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  flex-wrap: wrap;
+  /* 왼쪽이 비었거나 줄이 바뀌어도 오른쪽 끝에 선다 */
+  margin-left: auto;
+  justify-content: flex-end;
+  min-width: 0;
+}
+/* **덩이째 줄을 바꾸고도 넘치면 안쪽에서 한 번 더 바꾼다.** 단추는 제 최소 폭(120px)으로 버티므로
+   덩이에 `flex-shrink: 0` 을 두면 그대로 창 밖으로 나가 잘린다 — 375px 에서 오른쪽 단추 둘이
+   25px 넘쳐 잘렸다(실측 2026-09-24). 0.185.0 에서 바닥이 잘려 못 누르던 그 꼴이다.
+   최소 폭을 0 으로 내려, 줄이 바뀌든 줄어들든 **잘리지는 않게** 한다. */
+.popup-footer__start > *,
+.popup-footer__end > * {
+  min-width: 0;
+}
 .popup--closing { opacity: 0; transition: opacity 260ms ease }
 
 @media (max-width: 767px) {

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

@@ -52,6 +52,22 @@ export interface PopupProps {
     };
     /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
     footerClassName?: string;
+    /**
+     * 바닥 줄 **왼쪽 덩이** — 보조 단추(아이콘 단추 여럿)가 서는 자리.
+     *
+     * `footerLayout: 'between'` 은 **직계 자식만** 양끝으로 민다. 그래서 "왼쪽 여럿 · 오른쪽 여럿" 을
+     * 만들려면 부르는 쪽이 덩이 둘을 손수 지어야 했고, 그 규칙이 창마다 한 벌씩 생겼다(말귀 다섯 쌍,
+     * 쌍마다 한 글자도 안 달랐다 — 2026-09-24). 바닥 줄의 자리 잡기는 **창의 일**이라 여기로 들인다.
+     *
+     * 덩이 안쪽 간격은 코어가 정한다 — 왼쪽은 촘촘히(`--spacing-xs`), 오른쪽은 한 눈금 넓게(`--spacing-s`),
+     * 두 덩이 사이는 그보다 넓게(`--spacing-l`). 그래야 좁아져 줄이 바뀌어도 **두 덩이가 섞여 보이지 않는다.**
+     * 좁으면 덩이째 줄을 바꾸고 오른쪽 덩이는 그 줄에서도 오른쪽 끝에 선다.
+     *
+     * 둘 중 하나만 줘도 된다. 주면 `footer`·`buttons` 보다 이쪽이 그려진다.
+     */
+    footerStart?: ReactNode | ((opts: PopupOptions) => ReactNode);
+    /** 바닥 줄 **오른쪽 덩이** — 주 단추가 서는 자리. 자세한 것은 `footerStart`. */
+    footerEnd?: ReactNode | ((opts: PopupOptions) => ReactNode);
     /** 바닥 줄의 가로 배치 — `'center'`(기본) · `'fill'` · `'between'`.
      *
      *  - `'center'`: 지금까지와 같다(가운데 모음).

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

@@ -16,7 +16,7 @@ const ANIM_MS = 260;
 /** @public */
 export default function Popup(props) {
     const { t } = useTranslation();
-    const { title, subtitle, headerActions, headerSegment, 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 { title, subtitle, headerActions, headerSegment, children, buttons, footer, footerStart, footerEnd, 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(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -212,7 +212,10 @@ 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 })] }), headerSegment && (_jsx("div", { className: "popup-header-segment", children: _jsx(SegmentedControl, { size: 40, ariaLabel: headerSegment.ariaLabel, options: headerSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headerSegment.value, onChange: headerSegment.onChange }) })), _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] }) }));
+            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 })] }), headerSegment && (_jsx("div", { className: "popup-header-segment", children: _jsx(SegmentedControl, { size: 40, ariaLabel: headerSegment.ariaLabel, options: headerSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headerSegment.value, onChange: headerSegment.onChange }) })), _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 }) }), (footerStart || footerEnd) ? (
+                /* 왼쪽·오른쪽 덩이 — 빈 덩이도 그린다(자리를 지켜야 오른쪽이 끝에 선다).
+                   `footerLayout` 은 보지 않는다: 이 줄 자체가 배치다. */
+                _jsxs("div", { className: `popup-footer popup-footer--bar${footerClassName ? ` ${footerClassName}` : ''}`, children: [_jsx("div", { className: "popup-footer__start", children: typeof footerStart === 'function' ? footerStart({ animateThen, closeWithAnimation }) : footerStart }), _jsx("div", { className: "popup-footer__end", children: typeof footerEnd === 'function' ? footerEnd({ animateThen, closeWithAnimation }) : footerEnd })] })) : 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/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;
+  }
+}