/* 억양·강세 뷰: 원어민 억양 F0 곡선 + 단어별 강세(글자 크기)를 함께 보여준다.
   stress.js와 짝이다 — 두 파일을 같이 불러야 뷰가 완성된다.
   (연습 화면 index.html과 수업 리뷰 lesson.html이 공용으로 쓴다.) */
.stress-view { margin-top: 0.75rem; }
.stress-graph-label { font-size: 11px; color: #aaa; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.stress-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; background: #f9f8f5; border-radius: 8px; }
.stress-word { color: #3a3a38; line-height: 1.5; transition: color .08s ease; }
.stress-word.faint { color: #b4b2a8; }              /* 강세 약한 단어는 흐리게 */
.stress-word.speaking { color: #378add; }           /* 재생 중인 단어 하이라이트 (마지막 정의라 faint를 이김) */

/* 억양 F0 곡선 (강세 뷰 위에 함께 표시). 재생되는 만큼 왼쪽부터 파랗게 채워진다. */
.pitch-graph-svg { width: 100%; height: 56px; display: block; background: #f9f8f5; border-radius: 8px; }
.pitch-words { position: relative; height: 16px; margin: 3px 0 10px; }
.pitch-word { position: absolute; transform: translateX(-50%); font-size: 11px; color: #9a978e; white-space: nowrap; }