@ihabdevteam/core 0.265.0 → 0.267.0

package/dist/ihabdevteam-core.d.ts

@@ -1651,7 +1651,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.265.0";
+export declare const CORE_VERSION = "0.267.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -8926,7 +8926,7 @@ declare function TrainingStep_2({ index, stepIndex, isLast, title, titleProps, c
 export { TrainingStep_2 as TrainingStep }
 
 /** @public */
-declare function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled, ttsText, className, showSoundWaveForm, showNoiseWaveForm }: TrainingStepAudioPlayerProps): JSX.Element;
+declare function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled, ttsText, className, showSoundWaveForm, showNoiseWaveForm, leadInMs, tailMs }: TrainingStepAudioPlayerProps): JSX.Element;
 export { TrainingStepAudioPlayer as AudioPlayer }
 export { TrainingStepAudioPlayer }
 
@@ -8944,6 +8944,29 @@ export declare interface TrainingStepAudioPlayerProps {
     showSoundWaveForm?: boolean;
     /** 소음 waveform 표시 여부. 기본 true. */
     showNoiseWaveForm?: boolean;
+    /**
+     * **소리가 나기 전 뜸**(밀리초). 기본 0 — 안 주면 전과 같다(말귀 요청 (74), 2026-10-05).
+     *
+     * 단어 음원은 앞뒤 무음이 **50~70ms** 뿐이라 누르는 순간 소리가 터진다(말귀 실측:
+     * 648ms 중 앞 60·뒤 59, 480ms "굴" 중 앞 71·뒤 52, 최고 진폭의 1% 를 소리 있음 선으로).
+     * 듣는 사람이 채비할 틈이 없어 **첫 음절을 놓친다.** 문장 음원은 녹음에 뜸이 있어 괜찮다.
+     *
+     * **음원 파일은 안 고친다**(사용자 판단) — 수천 개고, 무음을 넣으면 길이를 쓰는 자리
+     * (숙제·인쇄·분석)가 함께 틀어진다. 그래서 **재생기가 뜸을 준다.**
+     *
+     * 이 뜸은 **파형과 재생바에도 그대로 보인다** — 2초 단어에 앞뒤 1초면 **4초가 한 폭**에
+     * 들어가고, 재생바는 **뜸이 시작될 때** 출발한다(소리가 날 때가 아니다).
+     */
+    leadInMs?: number;
+    /**
+     * **소리가 끝난 뒤 뜸**(밀리초). 기본 0. 위 `leadInMs` 와 같은 자리에서 왔다.
+     *
+     * 여러 소리를 잇따라 틀면 앞 것의 뒤 뜸 + 뒤 것의 앞 뜸이 놓여 **사이가 둘을 더한 만큼**
+     * 된다(각 1000 이면 2000ms). **누를 때의 뜸과 사이의 뜸은 다른 것**이라 가른다 — 앞엣것은
+     * 채비할 틈이고, 사이의 것은 들은 것을 붙들고 다음 것과 **견주는 틈**이다(같은지 다른지
+     * 맞히기는 그 견줌이 과제 자체다).
+     */
+    tailMs?: number;
 }
 
 /** @public */
@@ -9016,7 +9039,7 @@ export declare type TrainingStepConfirmWithTextProps = {
 };
 
 /** @public */
-export declare function TrainingStepListen({ index, stepIndex, isLast, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm }: TrainingStepListenProps): JSX.Element;
+export declare function TrainingStepListen({ index, stepIndex, isLast, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm, leadInMs, tailMs }: TrainingStepListenProps): JSX.Element;
 
 /** @public */
 export declare type TrainingStepListenProps = {
@@ -9040,6 +9063,19 @@ export declare type TrainingStepListenProps = {
     showSoundWaveForm?: boolean;
     /** 소음 waveform 표시 여부. 기본 true. */
     showNoiseWaveForm?: boolean;
+    /**
+     * **소리 앞에 두는 뜸**(밀리초). 기본 0 — 안 주면 전과 똑같이 돈다.
+     * 그대로 `TrainingStepAudioPlayer` 로 간다.
+     *
+     * 앱은 재생기를 직접 세우지 않는다 — 훈련 러너 여섯이 전부
+     * `TrainingPagePopup.ListenStep` 으로 짓고 그 길이 여기를 지난다. 그래서 재생기에만
+     * 더하면 **앱까지 닿지 않는다**(말귀 실측, 2026-10-05: (74) 가 0.266.0 으로 나갔는데
+     * 앱은 임시 자를 못 걷었다). 재생기에 프롭을 더하면 여기도 함께 더한다 —
+     * `test/trainingStepListenForwards.test.ts` 가 빠진 것을 센다.
+     */
+    leadInMs?: number;
+    /** **소리가 끝난 뒤 뜸**(밀리초). 기본 0. 위 `leadInMs` 와 같은 자리에서 왔다. */
+    tailMs?: number;
 };
 
 export declare function TrainingStepOrderList({ index, stepIndex, isLast, title, onDone, onChange, context, }: TrainingStepOrderListProps): JSX.Element;

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

@@ -15,4 +15,9 @@ export default function WaveForm(props: {
     mainVolume?: number;
     onReadyChange?: (ready: boolean) => void;
     showSoundWaveForm?: boolean;
+    /** 앞뒤 뜸(ms) — 파형이 그 구간까지 한 폭에 그린다(말귀 요청 (74), 2026-10-05) */
+    leadInMs?: number;
+    tailMs?: number;
+    /** 지금 트랙 소리의 길이(초) — 뜸과 견주어 막대를 나눈다 */
+    trackDurationSec?: number;
 }): import("react").JSX.Element;

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { computePeaksFromUrl } from '../../utils/audioPeaks';
 import { waveBarPx, waveBarVal, WAVE_H1_PX } from './waveScale';
+import { padBarSpans } from './audioPlaybackRules';
 import { getNoiseFileGain } from '../../utils/storage';
 import './TrainingStepAudioPlayer.css';
 /**
@@ -10,8 +11,10 @@ import './TrainingStepAudioPlayer.css';
  * 그려지는 바는 항상 이 값을 넘는 높이만 표시하며(가로 폭은 BAR_WIDTH=3px), 그 이하는 숨긴다.
  */
 const MIN_BAR_PX = 4;
+/** 막대가 아무리 작아도 그려지는 바닥 — 뜸 구간이 빈 칸으로 남지 않게((74)) */
+const BAR_FLOOR_VAL = waveBarVal(MIN_BAR_PX / WAVE_H1_PX);
 export default function WaveForm(props) {
-    const { src, segments, progress = 0, waveProgressRef, noiseSrc, noiseRatio = 0, noiseSpeed = 1, totalDuration = 0, mainVolume = 1, onReadyChange, showSoundWaveForm = true } = props;
+    const { src, segments, progress = 0, waveProgressRef, noiseSrc, noiseRatio = 0, noiseSpeed = 1, totalDuration = 0, mainVolume = 1, onReadyChange, showSoundWaveForm = true, leadInMs = 0, tailMs = 0, trackDurationSec = 0 } = props;
     const waveformRef = useRef(null);
     const outerRef = useRef(null);
     const [wavePeaks, setWavePeaks] = useState(null);
@@ -186,20 +189,43 @@ export default function WaveForm(props) {
     const barsCountForMix = barsTotal || 40;
     // 최대 300개 바가 재생/미재생 두 레이어에 그려지므로, 볼륨 슬라이더 드래그 등으로 부모가
     // 연속 재렌더될 때 매번 전체 JSX를 재생성하지 않도록 입력값이 바뀔 때만 다시 만든다.
+    /**
+     * **앞·소리·뒤로 나눈 막대 수**(말귀 요청 (74), 2026-10-05).
+     *
+     * 뜸을 주면 파형도 그 전체를 그려야 한다 — 2초 단어에 앞뒤 1초면 **4초가 한 폭**이고
+     * 소리는 가운데 절반만 차지한다. 뜸이 0 이면 `{ lead: 0, sound: 전부, tail: 0 }` 이라
+     * 아래 셈이 **전과 똑같이** 돈다.
+     */
+    const 구간 = useMemo(() => padBarSpans({ bars: barsCountForMix, trackDurationSec, leadInMs, tailMs }), [barsCountForMix, trackDurationSec, leadInMs, tailMs]);
     const bars = useMemo(() => Array.from({ length: barsCountForMix }).map((_, i) => {
-        const peak = wavePeaks && wavePeaks[i] != null ? wavePeaks[i] : null;
+        /* 뜸 구간 막대는 소리가 없다 — 봉우리 0. 그 자리는 **소음 파형이 채운다**(아래 바닥값).
+           소리 구간은 봉우리를 그 폭에 다시 고른다(전에는 막대 번호가 곧 봉우리 번호였다). */
+        const 소리안 = i >= 구간.lead && i < 구간.lead + 구간.sound;
+        const 봉우리번호 = 구간.sound > 0 && 소리안
+            ? Math.min(barsCountForMix - 1, Math.round(((i - 구간.lead) / 구간.sound) * barsCountForMix))
+            : -1;
+        const peak = 소리안
+            ? (wavePeaks && wavePeaks[봉우리번호] != null ? wavePeaks[봉우리번호] : null)
+            : (wavePeaks ? 0 : null);
         const eff = peak == null ? null : Math.min(1, (peak / sentenceMaxPeak) * mainAmp);
         // 로딩 시 placeholder(0.15); 계산 후엔 렌더 높이(waveBarPx)가 MIN_BAR_PX 이하면 숨김(0).
         // waveHeightPx 는 "칸이 배치됐나" 만 본다 — 모를 때(0) 지우면 안 된다.
         const belowMin = eff != null && waveHeightPx > 0 && waveBarPx(eff) <= MIN_BAR_PX;
-        const val = eff == null ? 0.15 : (belowMin ? 0 : waveBarVal(eff));
+        /* **문장 막대를 숨기는 까닭은 뒤에 소음 층이 깔려 있어서다** — 뜻 없는 1px 막대를
+           지워도 바탕 결이 그 자리를 지킨다. 소음 층이 **없으면 지킬 것이 없다**: 숨긴 자리가
+           그대로 구멍이 된다. 실측(2026-10-05, 13.09초 문장 · 앞뒤 뜸 1000ms · noiseSrc 없음):
+           94칸 중 **앞 0~15 · 뒤 81~93** 이 `--hidden` 이었다 — 눈에는 양끝이 잘려 보인다.
+           그래서 깔개가 없을 때만 문장 막대가 바닥값을 진다. */
+        const 깔개없다 = !noiseSrc;
+        const val = eff == null ? 0.15 : (belowMin ? (깔개없다 ? BAR_FLOOR_VAL : 0) : waveBarVal(eff));
+        const 숨긴다 = belowMin && !깔개없다;
         // 가로 위치 비율(0=왼쪽 lightMain ~ 1=오른쪽 lightSub) — 바 색을 위치에 따라 믹스
         const mix = barsCountForMix > 1 ? i / (barsCountForMix - 1) : 0;
         const style = { ['--val']: val, ['--i']: i, ['--mix']: mix };
         // MIN_BAR_PX 이하로 숨겨지는 바는 최초 등장 애니메이션에서도 잠깐 비쳐 보이지 않도록 애니메이션 자체를 건너뛴다
-        const className = belowMin ? 'audio-player__bar audio-player__bar--hidden' : 'audio-player__bar';
+        const className = 숨긴다 ? 'audio-player__bar audio-player__bar--hidden' : 'audio-player__bar';
         return _jsx("div", { className: className, style: style }, i);
-    }), [barsCountForMix, wavePeaks, sentenceMaxPeak, mainAmp, waveHeightPx]);
+    }), [barsCountForMix, wavePeaks, sentenceMaxPeak, mainAmp, waveHeightPx, 구간, noiseSrc]);
     // 초기 progress CSS 변수 값 (React 상태 기준 — RAF 루프가 이후 직접 갱신합니다)
     const progressStyle = { '--progress': String(Math.max(0, Math.min(1, progress))) };
     // 컨테이너 실제 폭에 맞춰 정밀 계산한 바 간격 — outer에 걸어 .audio-player__wave-inner 등
@@ -240,9 +266,13 @@ export default function WaveForm(props) {
     const noiseBars = useMemo(() => Array.from({ length: noiseCount }).map((_, i) => {
         const peak = noisePeaks && noisePeaks[i] != null ? noisePeaks[i] : null;
         const eff = peak == null ? 0 : (peak / sentenceMaxPeak) * noiseAmp;
-        // 렌더 높이(waveBarPx — 2 에서 자름)가 MIN_BAR_PX 이하면 숨김(0)
-        const belowMin = waveHeightPx > 0 && waveBarPx(eff) <= MIN_BAR_PX;
-        const val = belowMin ? 0 : waveBarVal(eff);
+        /* **소음 막대는 안 숨긴다**(말귀 요청 (74), 2026-10-05). 전에는 렌더 높이가 작으면
+           통째로 안 그려(`--hidden`) **왼쪽이 비어 보였다** — 말귀 실측(480ms "굴"): 소음 층
+           99칸 중 **앞 15칸**, 단어 층 **앞 30칸**이 0. 사용자가 그 빈 자리를 짚었다.
+           소음은 바탕 결이라 작아도 **자리는 채워야 한다** — 바닥값으로 내린다.
+           문장 막대는 이 층이 있을 때만 숨긴다(위 `깔개없다`). */
+        const val = Math.max(BAR_FLOOR_VAL, waveBarVal(eff));
+        const belowMin = false;
         // 가로 위치 비율(0=왼쪽 deepMain ~ 1=오른쪽 deepSub) — 바 색을 위치에 따라 믹스
         const mix = noiseCount > 1 ? i / (noiseCount - 1) : 0;
         const style = { ['--val']: val, ['--i']: i, ['--mix']: mix };

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

@@ -2,4 +2,4 @@ import './TrainingStepAudioPlayer.css';
 export type { SoundSource, TrainingStepAudioPlayerProps } from './trainingStepAudioPlayerTypes';
 import type { TrainingStepAudioPlayerProps } from './trainingStepAudioPlayerTypes';
 /** @public */
-export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled, ttsText, className, showSoundWaveForm, showNoiseWaveForm }: TrainingStepAudioPlayerProps): import("react").JSX.Element;
+export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled, ttsText, className, showSoundWaveForm, showNoiseWaveForm, leadInMs, tailMs }: TrainingStepAudioPlayerProps): import("react").JSX.Element;

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

@@ -26,7 +26,7 @@ import { useAnchorRect } from './useAnchorRect';
 import { useProgressTicker } from './useProgressTicker';
 import { nextTrackIndex, shouldIgnorePause, buildSegments, totalDurationOf, normalizeSources } from './audioPlaybackRules';
 /** @public */
-export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled = false, ttsText = null, className, showSoundWaveForm = true, showNoiseWaveForm = true }) {
+export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath, onDone, disabled = false, ttsText = null, className, showSoundWaveForm = true, showNoiseWaveForm = true, leadInMs = 0, tailMs = 0 }) {
     const { t } = useTranslation();
     const label = btnLabel;
     // 소음 재생
@@ -130,7 +130,40 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
        아홉 군데에 흩어져 있었다. */
     /* 함수만 꺼내 쓴다 — 훅이 돌려주는 객체는 매 렌더 새것이라 그대로 의존성에 넣으면
        이벤트 배선이 매 렌더 다시 붙는다. 안쪽 셋은 useCallback 이라 안정적이다. */
-    const { start: startTicker, stop: stopTicker, settleTo: settleTicker, } = useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesRef, currentIndexRef });
+    /**
+     * **앞뒤 뜸 시간선에서 지금 어느 구간인가**(말귀 요청 (74), 2026-10-05).
+     * 진행바(`useProgressTicker`)가 이것을 읽어 **소리가 안 나는 동안에도** 움직인다.
+     */
+    const 뜸Ref = useRef({ phase: 'sound', at: 0 });
+    /* 이벤트 손잡이는 한 번만 붙으므로 prop 을 ref 로 들고 본다 — 안 그러면 낡은 값을 쓴다
+       (이 파일이 `disabledRef`·`noiseSettingsRef` 에 쓰는 것과 같은 결). */
+    const leadInMsRef = useRef(leadInMs);
+    const tailMsRef = useRef(tailMs);
+    useEffect(() => { leadInMsRef.current = Math.max(0, leadInMs || 0); }, [leadInMs]);
+    useEffect(() => { tailMsRef.current = Math.max(0, tailMs || 0); }, [tailMs]);
+    const 뜸타이머Ref = useRef(null);
+    const 뜸취소 = useCallback(() => {
+        if (뜸타이머Ref.current) {
+            clearTimeout(뜸타이머Ref.current);
+            뜸타이머Ref.current = null;
+        }
+        뜸Ref.current = { phase: 'sound', at: 0 };
+    }, []);
+    /** 뜸만큼 기다린다 — 그 사이 **재생 의도가 바뀌면 거짓**을 돌려 부르는 쪽이 그만둔다 */
+    const 뜸기다리기 = useCallback((ms, phase) => {
+        if (!(ms > 0))
+            return Promise.resolve(true);
+        const 의도 = 재생의도Ref.current;
+        뜸Ref.current = { phase, at: Date.now() };
+        return new Promise((res) => {
+            뜸타이머Ref.current = setTimeout(() => {
+                뜸타이머Ref.current = null;
+                res(mountedRef.current && 의도 === 재생의도Ref.current);
+            }, ms);
+        });
+    }, []);
+    useEffect(() => () => 뜸취소(), [뜸취소]);
+    const { start: startTicker, stop: stopTicker, settleTo: settleTicker, } = useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesRef, currentIndexRef, padRef: 뜸Ref, leadInMs, tailMs });
     /* 파형이 자리를 잡을 때까지 기다리는 규칙은 useWaveReady 가 들고 있다 —
        ref 둘·함수 둘에 "준비 안 됨으로 되돌리기"가 일곱 군데 흩어져 있던 것을 모았다. */
     const { onReadyChange: handleWaveReadyChange, waitForReady: waitForWaveReady, markNotReady: markWaveNotReady, } = useWaveReady({ showSoundWaveForm, showNoiseWaveForm });
@@ -207,7 +240,9 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
     /* 재생 의도 — 멈춤·정지·완료·트랙 이동이 올린다. 대기 중이던 play() 는 멈추면 AbortError 로 거절되는데, 그것을 "다시 시도할
        오류" 로만 보고 다시 부르면 **정지를 눌렀는데 소리가 다시 났다**. 시작할 때의 의도가 그대로일 때만 다시 시도한다. */
     const 재생의도Ref = useRef(0);
-    const 멈춤의도 = () => { 재생의도Ref.current += 1; jumpTokenRef.current += 1; };
+    /* 뜸도 함께 끊는다((74)) — 의도가 바뀌면 `뜸기다리기` 가 거짓을 주지만, 타이머를 남겨
+       두면 뜸만큼 늦게 깨어나 쓸데없이 한 번 돈다. 여기서 바로 지운다. */
+    const 멈춤의도 = () => { 재생의도Ref.current += 1; jumpTokenRef.current += 1; 뜸취소(); };
     /* 스피커는 하나(currentSound.ts) — 한 화면의 다른 재생기(문장 듣기·문제 듣기)·낱말 카드·미리 듣기가 울리면 이 재생기는
        멈춘다. 전에는 낱말 카드만 자물쇠를 잡아, 듣기 단계가 둘인 화면·듣기+카드 단계에서 두 소리가 함께 울렸다.
        멈춤 단추와 같게 멈춘다(이어 듣기 가능). 함수는 한 벌이어야 자물쇠가 '내 것' 을 알아본다. */
@@ -247,6 +282,16 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         stopSoundIfOwner(소리멈춤Ref.current); }, []);
     const tryPlayWithRetry = useCallback(async (a, attempts = 3, delayMs = 50) => {
         const 의도 = 재생의도Ref.current;
+        /* **앞 뜸** — 소리를 틀기 전에 기다린다. 기다리는 동안 진행바는 돌아야 하므로
+           먼저 켠다(소리가 날 때 오는 `play` 이벤트가 아니라 **여기**가 시작이다). */
+        if (leadInMsRef.current > 0) {
+            startTicker();
+            if (!(await 뜸기다리기(leadInMsRef.current, 'lead')))
+                return false;
+            if (!mountedRef.current || 의도 !== 재생의도Ref.current)
+                return false;
+        }
+        뜸Ref.current = { phase: 'sound', at: Date.now() };
         for (let i = 0; i < attempts; i++) {
             if (!mountedRef.current || 의도 !== 재생의도Ref.current)
                 return false;
@@ -282,7 +327,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         }
         catch (_) { }
         return false;
-    }, [t]);
+    }, [t, startTicker, 뜸기다리기]);
     const attachAudioListeners = useCallback(() => {
         const a = audioRef.current;
         if (!a)
@@ -321,45 +366,63 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
             // 소음 동기 일시정지
             fadeOutNoise();
         };
+        /* **뒤 뜸**((74), 2026-10-05) — 소리가 끝나도 바로 넘기지 않는다. 그 사이 진행바는
+           계속 돌아(`뜸Ref.phase = 'tail'`) 뜸이 시간선의 일부로 보인다.
+           다음 소리가 있으면 그 소리의 **앞 뜸**이 이어 붙어 사이가 둘을 더한 만큼이 된다 —
+           누를 때의 뜸과 사이의 뜸을 가르는 자리가 여기다. */
         const onEnded = () => {
-            try {
-                const sref = sourcesRef.current;
-                const next = nextTrackIndex(sref, currentIndexRef.current);
-                if (next !== null) {
-                    currentIndexRef.current = next;
-                    setCurrentIndex(next);
-                    set구간표시(true);
-                    const nextSrc = sref?.[next] && sref[next].src;
-                    if (nextSrc && a) {
-                        a.src = nextSrc;
-                        a.load();
-                        tryPlayWithRetry(a).catch(() => { });
-                        return;
+            const 이어가기 = () => {
+                try {
+                    const sref = sourcesRef.current;
+                    const next = nextTrackIndex(sref, currentIndexRef.current);
+                    if (next !== null) {
+                        currentIndexRef.current = next;
+                        setCurrentIndex(next);
+                        set구간표시(true);
+                        const nextSrc = sref?.[next] && sref[next].src;
+                        if (nextSrc && a) {
+                            a.src = nextSrc;
+                            a.load();
+                            tryPlayWithRetry(a).catch(() => { });
+                            return;
+                        }
                     }
                 }
+                catch (e) { }
+                setPlaybackState("stopped");
+                setProgress(1);
+                try {
+                    if (a)
+                        try {
+                            a.currentTime = 0;
+                        }
+                        catch (e) { }
+                }
+                catch (e) { }
+                stopTicker();
+                set구간표시(false);
+                // 마지막 트랙 종료 시 소음 정지
+                fadeOutNoise();
+                // Route through handleEnd (via ref) so stateLocal transitions to 'active' before onDone fires.
+                // Direct onDoneRef.current(true) would fire while stateLocal === 'playMode'.
+                try {
+                    if (!disabledRef.current && handleEndRef.current)
+                        handleEndRef.current();
+                }
+                catch (e) { }
+            };
+            if (tailMsRef.current > 0) {
+                /* 기다리는 동안 진행바를 돌린다 — `pause` 가 이미 세웠을 수 있어 다시 켠다.
+                   그 사이 멈추거나 떠나면 `뜸기다리기` 가 거짓을 주고 아무 일도 안 한다. */
+                startTicker();
+                뜸기다리기(tailMsRef.current, 'tail').then((이어도되나) => {
+                    뜸Ref.current = { phase: 'sound', at: 0 };
+                    if (이어도되나)
+                        이어가기();
+                }).catch(() => { });
+                return;
             }
-            catch (e) { }
-            setPlaybackState("stopped");
-            setProgress(1);
-            try {
-                if (a)
-                    try {
-                        a.currentTime = 0;
-                    }
-                    catch (e) { }
-            }
-            catch (e) { }
-            stopTicker();
-            set구간표시(false);
-            // 마지막 트랙 종료 시 소음 정지
-            fadeOutNoise();
-            // Route through handleEnd (via ref) so stateLocal transitions to 'active' before onDone fires.
-            // Direct onDoneRef.current(true) would fire while stateLocal === 'playMode'.
-            try {
-                if (!disabledRef.current && handleEndRef.current)
-                    handleEndRef.current();
-            }
-            catch (e) { }
+            이어가기();
         };
         a.addEventListener("play", onPlay);
         a.addEventListener("pause", onPause);
@@ -373,7 +436,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
             }
             catch (e) { }
         };
-    }, [fadeInNoise, fadeOutNoise, tryPlayWithRetry, noiseSettingsRef, startTicker, stopTicker]);
+    }, [fadeInNoise, fadeOutNoise, tryPlayWithRetry, noiseSettingsRef, startTicker, stopTicker, 뜸기다리기]);
     useEffect(() => {
         const cleanup = attachAudioListeners();
         return cleanup;
@@ -1167,7 +1230,9 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, inert: !(stateLocal === "playMode" || displayedPlaying) || undefined, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), "aria-pressed": displayedPlaying, width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
                                                 handleJumpTo(idx);
                                             }
-                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseRatio: noisePlayer ? noiseRatioOf(noisePlayer.settings) : 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, 
+                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, 
+                                        /* 뜸도 파형에 그린다((74)) — 2초 단어에 앞뒤 1초면 4초가 한 폭에 들어간다 */
+                                        leadInMs: leadInMs, tailMs: tailMs, trackDurationSec: sources?.[currentIndex]?.duration ?? 0, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseRatio: noisePlayer ? noiseRatioOf(noisePlayer.settings) : 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, 
                                         /* 그림은 "문장 = 기준" — 문제 소리(M÷R)가 아니라 전체 소리 M 으로 문장을 그리고 소음을 R 배로 키운다 */
                                         mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
 }

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

@@ -22,6 +22,19 @@ export type TrainingStepListenProps = {
     showSoundWaveForm?: boolean;
     /** 소음 waveform 표시 여부. 기본 true. */
     showNoiseWaveForm?: boolean;
+    /**
+     * **소리 앞에 두는 뜸**(밀리초). 기본 0 — 안 주면 전과 똑같이 돈다.
+     * 그대로 `TrainingStepAudioPlayer` 로 간다.
+     *
+     * 앱은 재생기를 직접 세우지 않는다 — 훈련 러너 여섯이 전부
+     * `TrainingPagePopup.ListenStep` 으로 짓고 그 길이 여기를 지난다. 그래서 재생기에만
+     * 더하면 **앱까지 닿지 않는다**(말귀 실측, 2026-10-05: (74) 가 0.266.0 으로 나갔는데
+     * 앱은 임시 자를 못 걷었다). 재생기에 프롭을 더하면 여기도 함께 더한다 —
+     * `test/trainingStepListenForwards.test.ts` 가 빠진 것을 센다.
+     */
+    leadInMs?: number;
+    /** **소리가 끝난 뒤 뜸**(밀리초). 기본 0. 위 `leadInMs` 와 같은 자리에서 왔다. */
+    tailMs?: number;
 };
 /** @public */
-export default function TrainingStepListen({ index, stepIndex, isLast, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm }: TrainingStepListenProps): import("react").JSX.Element;
+export default function TrainingStepListen({ index, stepIndex, isLast, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm, leadInMs, tailMs }: TrainingStepListenProps): import("react").JSX.Element;

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

@@ -5,9 +5,9 @@ import TrainingStepAudioPlayer from './TrainingStepAudioPlayer';
 import "./TrainingStep.css";
 import TrainingStep from "./TrainingStep";
 /** @public */
-export default function TrainingStepListen({ index, stepIndex, isLast = false, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText = null, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm }) {
+export default function TrainingStepListen({ index, stepIndex, isLast = false, title, onDone, btnLabel, soundSrc, bucketPath, usePreviewTextBtn, previewText = null, onPreviewTextBtn, disabled, _pageIndex, showSoundWaveForm, showNoiseWaveForm, leadInMs, tailMs }) {
     const { t } = useTranslation();
     const resolvedTitle = title ?? t('training.listenTitle', '제시하는 문장을 들어주세요.');
     const effectiveDisabled = disabled ?? (typeof stepIndex === 'number' && typeof index === 'number' ? index > stepIndex : false);
-    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, onDone: onDone, titleProps: { usePreviewTextBtn, previewText, onPreviewTextBtn }, children: _jsx(TrainingStepAudioPlayer, { soundSrc: soundSrc, ttsText: !soundSrc ? (previewText ?? resolvedTitle) : null, bucketPath: bucketPath, btnLabel: btnLabel || t('training.listenButton', '문장 듣기'), disabled: effectiveDisabled, className: "training-step__listen-sticky", showSoundWaveForm: showSoundWaveForm, showNoiseWaveForm: showNoiseWaveForm }, `audio-p${_pageIndex ?? 0}-s${index}`) }));
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, onDone: onDone, titleProps: { usePreviewTextBtn, previewText, onPreviewTextBtn }, children: _jsx(TrainingStepAudioPlayer, { soundSrc: soundSrc, ttsText: !soundSrc ? (previewText ?? resolvedTitle) : null, bucketPath: bucketPath, btnLabel: btnLabel || t('training.listenButton', '문장 듣기'), disabled: effectiveDisabled, className: "training-step__listen-sticky", showSoundWaveForm: showSoundWaveForm, showNoiseWaveForm: showNoiseWaveForm, leadInMs: leadInMs, tailMs: tailMs }, `audio-p${_pageIndex ?? 0}-s${index}`) }));
 }

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

@@ -26,6 +26,51 @@ export declare function progressOf({ currentTime, sources, index, audioDuration,
     /** `<audio>` 가 알려 주는 길이 — 트랙별 길이를 모를 때만 쓴다 */
     audioDuration: number;
 }): number;
+/**
+ * **앞뒤 뜸을 포함한 한 트랙의 진행** — 0~1(말귀 요청 (74), 2026-10-05).
+ *
+ * 단어 음원은 앞뒤 무음이 **50~70ms** 뿐이라 누르는 순간 소리가 터진다(말귀 실측:
+ * 648ms 중 앞 60·뒤 59, 480ms "굴" 중 앞 71·뒤 52). 듣는 사람이 채비할 틈이 없어 첫
+ * 음절을 놓치고, 비교 과제(1·2 두 소리)에서는 둘 사이도 붙어 어디서 끊겼는지 헷갈린다.
+ * **음원 파일은 안 고친다** — 수천 개고, 무음을 넣으면 길이를 쓰는 자리(숙제·인쇄·분석)가
+ * 함께 틀어진다. 그래서 **재생기가 뜸을 준다.**
+ *
+ * 그러면 진행도 **뜸을 포함한 시간선**으로 재야 한다. 전에는 `currentTime` 을 그대로 따라
+ * **소리가 안 나는 동안은 움직일 길이 없었다**(말귀 실측: 누른 뒤 2029ms 에 `play`, 그때까지
+ * 채움 0%). 재생바는 **뜸이 시작될 때 출발한다.**
+ *
+ *     0ms        leadIn            leadIn+소리        leadIn+소리+tail
+ *     |  앞 뜸   |      소리        |      뒤 뜸      |
+ *     └────────────── 이 전체가 1 이다 ──────────────┘
+ */
+export declare function progressWithPad({ phase, phaseElapsedMs, currentTime, trackDurationSec, leadInMs, tailMs, }: {
+    /** 지금 어느 구간인가 */
+    phase: 'lead' | 'sound' | 'tail';
+    /** 뜸 구간에서 흐른 밀리초(`sound` 에서는 안 본다) */
+    phaseElapsedMs: number;
+    /** `<audio>` 의 `currentTime`(초) */
+    currentTime: number;
+    /** 이 트랙 소리의 길이(초). 모르면 0 */
+    trackDurationSec: number;
+    leadInMs: number;
+    tailMs: number;
+}): number;
+/**
+ * **파형이 그릴 막대 수를 앞·소리·뒤로 나눈다**((74) 참고).
+ *
+ * 2초 단어에 앞뒤 1초씩이면 **4초가 한 폭**에 들어가고, 소리는 가운데 절반만 차지한다.
+ * 뜸 구간 막대는 소리가 없으니 봉우리가 0 이다 — 거기는 **소음 파형이 채운다.**
+ */
+export declare function padBarSpans({ bars, trackDurationSec, leadInMs, tailMs, }: {
+    bars: number;
+    trackDurationSec: number;
+    leadInMs: number;
+    tailMs: number;
+}): {
+    lead: number;
+    sound: number;
+    tail: number;
+};
 /**
  * 한 트랙이 끝났다 — 이어서 틀 것이 있는가.
  *

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

@@ -32,6 +32,59 @@ export function progressOf({ currentTime, sources, index, audioDuration, }) {
     const t = Number.isFinite(currentTime) ? currentTime : 0;
     return Math.max(0, Math.min(1, t / 길이));
 }
+/**
+ * **앞뒤 뜸을 포함한 한 트랙의 진행** — 0~1(말귀 요청 (74), 2026-10-05).
+ *
+ * 단어 음원은 앞뒤 무음이 **50~70ms** 뿐이라 누르는 순간 소리가 터진다(말귀 실측:
+ * 648ms 중 앞 60·뒤 59, 480ms "굴" 중 앞 71·뒤 52). 듣는 사람이 채비할 틈이 없어 첫
+ * 음절을 놓치고, 비교 과제(1·2 두 소리)에서는 둘 사이도 붙어 어디서 끊겼는지 헷갈린다.
+ * **음원 파일은 안 고친다** — 수천 개고, 무음을 넣으면 길이를 쓰는 자리(숙제·인쇄·분석)가
+ * 함께 틀어진다. 그래서 **재생기가 뜸을 준다.**
+ *
+ * 그러면 진행도 **뜸을 포함한 시간선**으로 재야 한다. 전에는 `currentTime` 을 그대로 따라
+ * **소리가 안 나는 동안은 움직일 길이 없었다**(말귀 실측: 누른 뒤 2029ms 에 `play`, 그때까지
+ * 채움 0%). 재생바는 **뜸이 시작될 때 출발한다.**
+ *
+ *     0ms        leadIn            leadIn+소리        leadIn+소리+tail
+ *     |  앞 뜸   |      소리        |      뒤 뜸      |
+ *     └────────────── 이 전체가 1 이다 ──────────────┘
+ */
+export function progressWithPad({ phase, phaseElapsedMs, currentTime, trackDurationSec, leadInMs, tailMs, }) {
+    const 앞 = Math.max(0, leadInMs);
+    const 뒤 = Math.max(0, tailMs);
+    const 소리 = Math.max(0, (Number.isFinite(trackDurationSec) ? trackDurationSec : 0) * 1000);
+    const 총 = 앞 + 소리 + 뒤;
+    /* 길이를 모르면(소리 0) 뜸만으로는 진행을 그릴 수 없다 — 0 을 준다. 모르는 것을
+       100% 로 그리면 마커가 끝에 붙어 있다가 튄다(`progressOf` 와 같은 판단). */
+    if (!(총 > 0) || !(소리 > 0))
+        return 0;
+    const 흐름 = phase === 'lead' ? Math.min(Math.max(0, phaseElapsedMs), 앞)
+        : phase === 'sound' ? 앞 + Math.min(Math.max(0, (Number.isFinite(currentTime) ? currentTime : 0) * 1000), 소리)
+            : 앞 + 소리 + Math.min(Math.max(0, phaseElapsedMs), 뒤);
+    return Math.max(0, Math.min(1, 흐름 / 총));
+}
+/**
+ * **파형이 그릴 막대 수를 앞·소리·뒤로 나눈다**((74) 참고).
+ *
+ * 2초 단어에 앞뒤 1초씩이면 **4초가 한 폭**에 들어가고, 소리는 가운데 절반만 차지한다.
+ * 뜸 구간 막대는 소리가 없으니 봉우리가 0 이다 — 거기는 **소음 파형이 채운다.**
+ */
+export function padBarSpans({ bars, trackDurationSec, leadInMs, tailMs, }) {
+    const 칸 = Math.max(0, Math.floor(bars));
+    const 앞 = Math.max(0, leadInMs);
+    const 뒤 = Math.max(0, tailMs);
+    const 소리 = Math.max(0, (Number.isFinite(trackDurationSec) ? trackDurationSec : 0) * 1000);
+    const 총 = 앞 + 소리 + 뒤;
+    /* 뜸이 없거나 길이를 모르면 전과 같다 — 소리가 폭을 다 쓴다 */
+    if (칸 === 0 || !(총 > 0) || (앞 === 0 && 뒤 === 0) || !(소리 > 0))
+        return { lead: 0, sound: 칸, tail: 0 };
+    const 앞칸 = Math.round((앞 / 총) * 칸);
+    const 뒤칸 = Math.round((뒤 / 총) * 칸);
+    /* 소리 막대가 **하나는 남아야 한다** — 반올림이 겹쳐 0 이 되면 파형이 통째로 빈다 */
+    const 소리칸 = Math.max(1, 칸 - 앞칸 - 뒤칸);
+    const 넘침 = 앞칸 + 소리칸 + 뒤칸 - 칸;
+    return { lead: Math.max(0, 앞칸 - Math.ceil(넘침 / 2)), sound: 소리칸, tail: Math.max(0, 뒤칸 - Math.floor(넘침 / 2)) };
+}
 /**
  * 한 트랙이 끝났다 — 이어서 틀 것이 있는가.
  *

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

@@ -32,6 +32,29 @@ export interface TrainingStepAudioPlayerProps {
     showSoundWaveForm?: boolean;
     /** 소음 waveform 표시 여부. 기본 true. */
     showNoiseWaveForm?: boolean;
+    /**
+     * **소리가 나기 전 뜸**(밀리초). 기본 0 — 안 주면 전과 같다(말귀 요청 (74), 2026-10-05).
+     *
+     * 단어 음원은 앞뒤 무음이 **50~70ms** 뿐이라 누르는 순간 소리가 터진다(말귀 실측:
+     * 648ms 중 앞 60·뒤 59, 480ms "굴" 중 앞 71·뒤 52, 최고 진폭의 1% 를 소리 있음 선으로).
+     * 듣는 사람이 채비할 틈이 없어 **첫 음절을 놓친다.** 문장 음원은 녹음에 뜸이 있어 괜찮다.
+     *
+     * **음원 파일은 안 고친다**(사용자 판단) — 수천 개고, 무음을 넣으면 길이를 쓰는 자리
+     * (숙제·인쇄·분석)가 함께 틀어진다. 그래서 **재생기가 뜸을 준다.**
+     *
+     * 이 뜸은 **파형과 재생바에도 그대로 보인다** — 2초 단어에 앞뒤 1초면 **4초가 한 폭**에
+     * 들어가고, 재생바는 **뜸이 시작될 때** 출발한다(소리가 날 때가 아니다).
+     */
+    leadInMs?: number;
+    /**
+     * **소리가 끝난 뒤 뜸**(밀리초). 기본 0. 위 `leadInMs` 와 같은 자리에서 왔다.
+     *
+     * 여러 소리를 잇따라 틀면 앞 것의 뒤 뜸 + 뒤 것의 앞 뜸이 놓여 **사이가 둘을 더한 만큼**
+     * 된다(각 1000 이면 2000ms). **누를 때의 뜸과 사이의 뜸은 다른 것**이라 가른다 — 앞엣것은
+     * 채비할 틈이고, 사이의 것은 들은 것을 붙들고 다음 것과 **견주는 틈**이다(같은지 다른지
+     * 맞히기는 그 견줌이 과제 자체다).
+     */
+    tailMs?: number;
 }
 export declare const STATUS_MESSAGES: Record<FetchDebugStatus, string>;
 export declare const STATUS_COLORS: Record<FetchDebugStatus, string>;

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

@@ -1,6 +1,6 @@
 import { type RefObject } from 'react';
 import type { Source } from './trainingStepAudioPlayerTypes';
-export declare function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesRef, currentIndexRef, }: {
+export declare function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesRef, currentIndexRef, padRef, leadInMs, tailMs, }: {
     audioRef: RefObject<HTMLAudioElement | null>;
     /** 진행 마커 — `left` 를 퍼센트로 민다 */
     fillRef: RefObject<HTMLDivElement | null>;
@@ -8,6 +8,18 @@ export declare function useProgressTicker({ audioRef, fillRef, waveProgressRef,
     waveProgressRef: RefObject<HTMLDivElement | null>;
     sourcesRef: RefObject<Source[] | null>;
     currentIndexRef: RefObject<number>;
+    /**
+     * **앞뒤 뜸을 포함한 시간선에서 지금 어느 구간인가**(말귀 요청 (74), 2026-10-05).
+     *
+     * 뜸을 주면 **소리가 안 나는 동안에도 재생바가 움직여야 한다** — 전에는 `currentTime` 을
+     * 그대로 따라 멈춰 있었다(말귀 실측: 누른 뒤 2029ms 에 `play`, 그때까지 채움 0%).
+     */
+    padRef?: RefObject<{
+        phase: 'lead' | 'sound' | 'tail';
+        at: number;
+    }>;
+    leadInMs?: number;
+    tailMs?: number;
 }): {
     start: () => void;
     stop: () => void;