사이트 3차 수정

frontend/pages/culture.vue

@@ -198,25 +198,25 @@ onMounted(() => {
             <circle class="dot-end" cx="940" cy="80" r="5" />
 
             <!-- 라벨 (연도 + 값) -->
-            <text class="lbl" x="60" y="344" text-anchor="middle" style="transition-delay: 0.25s">
+            <text class="lbl" x="60" y="330" text-anchor="middle" style="transition-delay: 0.25s">
               <tspan class="lbl-year" x="60">2023년</tspan>
-              <tspan class="lbl-val" x="60" dy="20">창립</tspan>
+              <tspan class="lbl-val" x="60" dy="38">창립</tspan>
             </text>
-            <text class="lbl" x="280" y="314" text-anchor="middle" style="transition-delay: 0.65s">
+            <text class="lbl" x="280" y="300" text-anchor="middle" style="transition-delay: 0.65s">
               <tspan class="lbl-year" x="280">2024년</tspan>
-              <tspan class="lbl-val" x="280" dy="20">55억</tspan>
+              <tspan class="lbl-val" x="280" dy="38">55억</tspan>
             </text>
-            <text class="lbl" x="500" y="261" text-anchor="middle" style="transition-delay: 1.05s">
+            <text class="lbl" x="500" y="231" text-anchor="middle" style="transition-delay: 1.05s">
               <tspan class="lbl-year" x="500">2026년 목표</tspan>
-              <tspan class="lbl-val" x="500" dy="20">150억(e)</tspan>
+              <tspan class="lbl-val" x="500" dy="38">150억(e)</tspan>
             </text>
-            <text class="lbl" x="730" y="186" text-anchor="middle" style="transition-delay: 1.45s">
+            <text class="lbl" x="730" y="150" text-anchor="middle" style="transition-delay: 1.45s">
               <tspan class="lbl-year" x="730">2027년 목표</tspan>
-              <tspan class="lbl-val" x="730" dy="20">300억</tspan>
+              <tspan class="lbl-val" x="730" dy="38">300억</tspan>
             </text>
-            <text class="lbl" x="940" y="36" text-anchor="end" style="transition-delay: 1.85s">
+            <text class="lbl" x="940" y="22" text-anchor="end" style="transition-delay: 1.85s">
               <tspan class="lbl-year" x="940">2028년 목표</tspan>
-              <tspan class="lbl-val lbl-val--hl" x="940" dy="20">1000억+</tspan>
+              <tspan class="lbl-val lbl-val--hl" x="940" dy="38">1000억+</tspan>
             </text>
           </svg>
         </div>
@@ -276,7 +276,7 @@ onMounted(() => {
           <hr class="panel-divider" >
           <div v-reveal="{ delay: 80 }" class="promise-body">
             <p>ITAB은 Level 제도를 운영중이며,<br ><strong>연차가 아닌 실력으로 승진합니다.</strong></p>
-            <p>업계 3~4년차 수준의 역량을 1년 안에 얻어갈 수 있도록<br >밀도있고 효율적으로 업무를 진행하게 됩니다.</p>
+            <p>업계 3~4년차 수준의 역량을 1년 안에 얻어갈 수 있도록 <br class="br-pc" >밀도있고 효율적으로 업무를 진행하게 됩니다.</p>
             <p class="promise-emph">물경력? 그런건 우리 사전에 없습니다.</p>
           </div>
         </div>
@@ -659,13 +659,13 @@ onMounted(() => {
 
 .chart-svg .lbl-val {
   fill: #ffffff;
-  font-size: 19px;
+  font-size: 38px; /* 19px 대비 2배 */
   font-weight: 800;
   letter-spacing: -0.02em;
 }
 
 .chart-svg .lbl-val--hl {
-  font-size: 21px;
+  font-size: 42px; /* 21px 대비 2배 */
 }
 
 /* 모션 최소화 선호 시 모든 차트 전환 제거 */
@@ -838,6 +838,12 @@ onMounted(() => {
     align-items: flex-start;
     gap: 0.5rem;
   }
+
+  /* 모바일: 문장 중간 강제 줄바꿈 제거 → 자연스럽게 이어 흐르도록
+     (br 앞 공백이 남아 단어가 붙지 않음) */
+  .br-pc {
+    display: none;
+  }
 }
 
 /* ── 둘째 — 커리어 성장(회색 섹션) ── */
@@ -1043,6 +1049,9 @@ onMounted(() => {
   font-weight: 700;
   color: #1b1f27;
   line-height: 1.45;
+  /* 한글이 글자 단위로 끊기지 않고 어절(공백) 단위로만 줄바꿈되도록 */
+  word-break: keep-all;
+  text-wrap: balance; /* 여러 줄일 때 줄 길이를 고르게 분배 */
 }
 
 .wi-sub {
@@ -1050,6 +1059,8 @@ onMounted(() => {
   font-size: clamp(0.75rem, 1.2vw, 0.875rem); /* 12~14px */
   color: #8a909c;
   line-height: 1.45;
+  word-break: keep-all;
+  text-wrap: balance;
 }
 
 /* 좁은 화면 — 배지/그리드 열 축소 */
@@ -1057,6 +1068,26 @@ onMounted(() => {
   .welfare-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  /* 버블 배지 — 좁은 화면에서 원이 작아져 제목이 줄바꿈되던 문제 해결:
+     간격·안쪽 여백을 줄여 원을 키우고, 제목 폰트를 줄여 한 줄로 유지 */
+  .welfare-badges {
+    gap: 0.5rem;
+  }
+
+  .wbadge {
+    padding: 0.25rem;
+    gap: 0.25rem;
+  }
+
+  .wbadge strong {
+    font-size: 0.8125rem; /* 13px — 한 줄에 맞춤 */
+    white-space: nowrap; /* 제목 줄바꿈 방지 */
+  }
+
+  .wbadge span {
+    font-size: 0.6875rem; /* 11px */
+  }
 }
 
 /* ===================== 마무리 CTA ===================== */