From c5874330469a86c9fd452eebe44504fd0c13782f Mon Sep 17 00:00:00 2001
From: TtiPo <kysung114y@gmail.com>
Date: Wed, 3 Jun 2026 23:47:49 +0900
Subject: [PATCH] =?UTF-8?q?Culture=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/pages/culture.vue | 43 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/culture.vue b/frontend/pages/culture.vue
index bebc1fa..7edfa6a 100644
--- a/frontend/pages/culture.vue
+++ b/frontend/pages/culture.vue
@@ -210,7 +210,7 @@ onMounted(() => {
               <tspan class="lbl-year" x="500">2026년 목표</tspan>
               <tspan class="lbl-val" x="500" dy="38">150억(e)</tspan>
             </text>
-            <text class="lbl" x="730" y="150" text-anchor="middle" style="transition-delay: 1.45s">
+            <text class="lbl" x="730" y="138" text-anchor="middle" style="transition-delay: 1.45s">
               <tspan class="lbl-year" x="730">2027년 목표</tspan>
               <tspan class="lbl-val" x="730" dy="38">300억</tspan>
             </text>
@@ -218,6 +218,15 @@ onMounted(() => {
               <tspan class="lbl-year" x="940">2028년 목표</tspan>
               <tspan class="lbl-val lbl-val--hl" x="940" dy="38">1000억+</tspan>
             </text>
+
+            <!-- 모바일 전용 — 년도 라벨을 그래프 하단(축)에 배치 -->
+            <g class="lbl-years-bottom">
+              <text class="lbl-year-b" x="60" y="442" text-anchor="middle">2023년</text>
+              <text class="lbl-year-b" x="280" y="442" text-anchor="middle">2024년</text>
+              <text class="lbl-year-b" x="500" y="442" text-anchor="middle">2026년 목표</text>
+              <text class="lbl-year-b" x="730" y="442" text-anchor="middle">2027년 목표</text>
+              <text class="lbl-year-b" x="940" y="442" text-anchor="end">2028년 목표</text>
+            </g>
           </svg>
         </div>
       </div>
@@ -657,6 +666,17 @@ onMounted(() => {
   font-weight: 500;
 }
 
+/* 하단 년도 축 — 데스크톱에서는 숨김(라벨 내 .lbl-year 사용), 모바일에서만 표시 */
+.chart-svg .lbl-years-bottom {
+  display: none;
+}
+
+.chart-svg .lbl-year-b {
+  fill: rgba(255, 255, 255, 0.75);
+  font-size: 24px; /* 상단 인라인 년도(13px)보다 키움 */
+  font-weight: 600;
+}
+
 .chart-svg .lbl-val {
   fill: #ffffff;
   font-size: 38px; /* 19px 대비 2배 */
@@ -668,6 +688,27 @@ onMounted(() => {
   font-size: 42px; /* 21px 대비 2배 */
 }
 
+/* 모바일 — SVG가 작게 축소되므로 매출 값 텍스트를 키워 가독성 확보
+   (연도↔값 간격 dy=38 안에서 윗줄 연도와 겹치지 않는 최대치 수준) */
+@media (max-width: 32.5rem) {
+  .chart-svg .lbl-val {
+    font-size: 50px;
+  }
+
+  .chart-svg .lbl-val--hl {
+    font-size: 54px;
+  }
+
+  /* 모바일: 라벨 내 상단 년도는 숨기고, 그래프 하단 년도 축을 표시 */
+  .chart-svg .lbl-year {
+    display: none;
+  }
+
+  .chart-svg .lbl-years-bottom {
+    display: block;
+  }
+}
+
 /* 모션 최소화 선호 시 모든 차트 전환 제거 */
 @media (prefers-reduced-motion: reduce) {
   .chart-svg * {