해방 진행도 UI 세부 조정

- 라벨/밑줄과 세그먼트 바 간격 조정
- 1차/2차 밑줄 사이 간격을 세그먼트 바와 동일하게 맞춤
- 세그먼트 진행도 색상을 인라인 스타일로 변경 (Tailwind 컴파일 이슈 회피)
- 예상 해방 날짜 표시 위치/스타일 다듬기

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/features/liberation/components/ProgressBar.jsx

@@ -22,14 +22,12 @@ export default function ProgressBar({ totalAccumulated, completionDate }) {
 
   const renderSegment = ({ chapter, status, current }) => {
     const pct = (current / chapter.required) * 100
+    const bg = status === 'done' ? '#10b981' : status === 'active' ? '#fbbf24' : 'transparent'
     return (
       <div key={`seg-${chapter.idx}`} className="flex-1 h-2 rounded bg-gray-900 overflow-hidden">
         <div
-          className={`h-full transition-all ${
+          className="h-full transition-all"
-            status === 'done' ? 'bg-emerald-500' :
+          style={{ width: `${pct}%`, background: bg }}
-            status === 'active' ? 'bg-amber-400' : 'bg-transparent'
-          }`}
-          style={{ width: `${pct}%` }}
         />
       </div>
     )
@@ -62,24 +60,23 @@ export default function ProgressBar({ totalAccumulated, completionDate }) {
       {/* 섹션 제목 */}
       <div className="text-lg font-semibold text-emerald-300">퀘스트 진행 상황</div>
 
-      {/* 1차 / 2차 라벨 */}
+      {/* 1차 / 2차 라벨 + 세그먼트 바 */}
-      <div className="flex items-center gap-3">
+      <div className="space-y-3">
-        <div className="flex-1 flex flex-col items-center gap-2">
+        <div className="flex items-center gap-1">
-          <span className="text-base font-bold" style={{ color: '#5eead4' }}>1차 해방</span>
+          <div className="flex-1 flex flex-col items-center gap-2">
-          <div style={{ width: '100%', height: 3, background: 'rgba(94, 234, 212, 0.5)', borderRadius: 999 }} />
+            <span className="text-base font-bold" style={{ color: '#5eead4' }}>1차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'rgba(94, 234, 212, 0.5)', borderRadius: 999 }} />
+          </div>
+          <div className="flex-1 flex flex-col items-center gap-2">
+            <span className="text-base font-bold" style={{ color: '#fda4af' }}>2차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'rgba(253, 164, 175, 0.5)', borderRadius: 999 }} />
+          </div>
         </div>
-        <div className="w-2" />
+        <div className="flex gap-1">
-        <div className="flex-1 flex flex-col items-center gap-2">
+          {chapterStates.map(renderSegment)}
-          <span className="text-base font-bold" style={{ color: '#fda4af' }}>2차 해방</span>
-          <div style={{ width: '100%', height: 3, background: 'rgba(253, 164, 175, 0.5)', borderRadius: 999 }} />
         </div>
       </div>
 
-      {/* 세그먼트 바 (붙어있음) */}
-      <div className="flex gap-1">
-        {chapterStates.map(renderSegment)}
-      </div>
-
       {/* 초상화 (붙어있음) */}
       <div className="flex gap-1">
         {chapterStates.map(renderPortrait)}