fix(ui): 반응형 전수 조사에서 발견된 문제 4건 수정

전수 조사 범위: 앱 화면 14개 + 강좌 71개 + 학습 문서 17개 × 모바일(375)/태블릿(768)/데스크톱(1280)
— 가로 넘침 자동 검출(0건) + 주요 화면 육안 검증

수정:
- 문서 뷰어 '← 뒤로가기' 버튼 모바일에서 두 줄 꺾임 → nowrap
- 멘토 명단·퀴즈 표: '트랙'→'트/랙' 세로 꺾임 → .table--nowrap 유틸 신설
  (전역 td nowrap은 overflow:hidden 카드의 긴 셀을 잘라먹어 선택 적용)
- 가입 동의 체크박스: 두 줄 라벨에서 정렬 어긋남 → flex-start
- SQL 문제 설명 '왼쪽 아래' → '문제 아래' (실제 배치와 불일치, 시드+운영 DB 동시 수정)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

backend/src/main/resources/seed/coding-problems.json

@@ -702,7 +702,7 @@
     "title": "모든 직원 조회하기 (SELECT *)",
     "difficulty": "EASY",
     "topic": "sql",
-    "description": "employee 테이블의 모든 행, 모든 컬럼을 조회하세요.\n\n왼쪽 아래 [데이터 살펴보기]에서 테이블 구조와 데이터를 먼저 확인해 보세요.\n\n힌트: SELECT * 는 \"모든 컬럼\"이라는 뜻입니다. FROM 뒤에 테이블 이름을 씁니다.\nSQL 문장 끝에는 세미콜론(;)을 붙이는 습관을 들이세요.",
+    "description": "employee 테이블의 모든 행, 모든 컬럼을 조회하세요.\n\n문제 아래 [데이터 살펴보기]에서 테이블 구조와 데이터를 먼저 확인해 보세요.\n\n힌트: SELECT * 는 \"모든 컬럼\"이라는 뜻입니다. FROM 뒤에 테이블 이름을 씁니다.\nSQL 문장 끝에는 세미콜론(;)을 붙이는 습관을 들이세요.",
     "starterCode": "-- 여기에 SQL을 작성하세요\nSELECT ",
     "functionName": null,
     "tests": null,

frontend/src/pages/DocViewerPage.jsx

@@ -44,7 +44,8 @@ export default function DocViewerPage() {
   return (
     <div>
       <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-        <button className="btn" onClick={() => navigate(-1)}>
+        {/* whiteSpace: nowrap — 모바일에서 버튼 글자가 "뒤로가/기"로 꺾이는 것 방지 */}
+        <button className="btn" style={{ whiteSpace: 'nowrap', flexShrink: 0 }} onClick={() => navigate(-1)}>
           ← 뒤로가기
         </button>
         <h1 className="page-title" style={{ marginBottom: 0 }}>{doc.title}</h1>

frontend/src/pages/MentorPage.jsx

@@ -138,7 +138,8 @@ function WeeklyChecklistTable({ overview }) {
 
   return (
     <Card style={{ padding: 0, overflowX: 'auto' }}>
-      <table className="table table-static" style={{ minWidth: 640 }}>
+      {/* table--nowrap: 인적사항 표는 셀이 세로로 꺾이면 못 읽는다 — 가로 스크롤로 본다 */}
+      <table className="table table-static table--nowrap" style={{ minWidth: 640 }}>
         <thead>
           <tr>
             <th>학생</th>
@@ -205,7 +206,8 @@ function StudentRoster({ students }) {
           ⬇ CSV 내려받기 (경리용)
         </a>
       </div>
-      <table className="table table-static" style={{ minWidth: 720 }}>
+      {/* table--nowrap: "트랙"→"트/랙"처럼 셀이 세로로 꺾이지 않게. 가로 스크롤로 본다 */}
+      <table className="table table-static table--nowrap" style={{ minWidth: 720 }}>
         <thead>
           <tr>
             <th>이름</th>
@@ -242,7 +244,7 @@ function StudentRoster({ students }) {
 function QuizResultsTable({ quizResults }) {
   return (
     <Card style={{ padding: 0, overflowX: 'auto' }}>
-      <table className="table table-static" style={{ minWidth: 480 }}>
+      <table className="table table-static table--nowrap" style={{ minWidth: 480 }}>
         <thead>
           <tr>
             <th>학생</th>

frontend/src/pages/SignupPage.jsx

@@ -212,13 +212,15 @@ export default function SignupPage() {
               주민등록번호·계좌번호 같은 민감정보는 <strong>여기서 받지 않아요</strong> —
               근로계약서 작성 때 따로 받습니다.
             </div>
-            <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10,
+            {/* alignItems: flex-start — 모바일에서 라벨이 두 줄로 꺾여도 체크박스는 첫 줄에 붙는다 */}
+            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 10,
                             cursor: 'pointer', fontSize: 14, fontWeight: 600 }}>
               <input
                 type="checkbox"
                 checked={form.privacyConsent}
                 onChange={(e) => set('privacyConsent', e.target.checked)}
-                style={{ width: 16, height: 16, accentColor: 'var(--primary, #4f46e5)' }}
+                style={{ width: 16, height: 16, marginTop: 2, flexShrink: 0,
+                         accentColor: 'var(--primary, #4f46e5)' }}
               />
               위 개인정보 수집·이용에 동의합니다. (필수)
             </label>

frontend/src/styles/global.css

@@ -405,6 +405,13 @@ a {
   text-align: left;
 }
 
+/* 가로 스크롤 컨테이너 안에서 보는 표에만 붙인다 — 좁은 화면에서 "개발"→"개/발"처럼
+   세로로 꺾이지 않게 한다. (일반 .table에 전역으로 걸면 overflow: hidden 카드 안의
+   긴 제목 셀이 잘려 보이지 않게 되므로, 필요한 표에만 선택적으로 쓴다.) */
+.table--nowrap th, .table--nowrap td {
+  white-space: nowrap;
+}
+
 .table th {
   color: var(--muted);
   font-size: 13px;