프로그램 페이지 부제가 컨테이너보다 훨씬 일찍 줄바꿈됨

DaleStudy/daleui#1214에 취합된 피드백에서 옮긴 이슈입니다.
원 댓글: @RiaOh (4번 항목)

현상

프로그램 페이지에서 "프로그램" 제목 아래 문구와 "후기" 제목 아래 문구가 화면 너비를 다 쓰지 않고 중간에서 갑자기 줄바꿈됩니다. 제목은 컨테이너 왼쪽 끝부터 오른쪽 끝까지의 폭을 기준으로 놓여 있는데 부제만 훨씬 일찍 접혀서, 의도한 줄바꿈이 아니라 레이아웃이 깨진 것처럼 보입니다.

원인

두 문구가 담긴 컨테이너는 1120px인데, 문구 자체에 그보다 훨씬 좁은 max-width가 걸려 있습니다.

.container {
  max-width: 1120px;
}

.page-intro {
  max-width: 620px;
}

.section-sub {
  max-width: 560px;
}

max-width 자체는 긴 문장의 가독성을 위한 의도된 제약입니다. 다만 프로그램 부제는 3문장 130자가 넘어서 620px에서 여러 줄로 접히고, 마지막 줄에만 짧게 남는 어절이 생기면서 어색해 보입니다.

제안

읽기 좋은 줄 길이라는 원래 의도는 지키되 줄 사이 균형을 잡는 방향이 좋겠습니다.

• text-wrap: pretty를 text-wrap: balance로 바꾸면 각 줄 길이가 고르게 분배됩니다 (balance는 대체로 4~6줄 이하에만 적용되므로 짧은 부제에 적합합니다)
• 그래도 어색하면 max-width를 소폭 넓히거나(예: 720px), 원문 자체를 짧게 줄이는 것도 방법입니다

#7(히어로 서브카피)과 같은 성격의 문제입니다. 히어로는 .hero-sub(site.css:384, max-width: 560px, text-wrap: pretty)로 별도 클래스지만 원인이 동일하므로, text-wrap: balance 도입 여부를 사이트 전체 기준으로 한 번에 정하고 두 이슈를 함께 처리하는 편이 좋겠습니다.

Start with the subtitle elements in ProgramsPage.tsx at lines 16 and 68, then inspect the page-intro and section-sub rules in site.css at lines 293 and 309. Compare their wrapping with the related hero-sub rule at line 384 and issue #7, then verify that the program and review subtitles have balanced, intentional line breaks across the shown page widths.