feat : intro 반응형 완료

src/css/common.css

@@ -1221,6 +1221,9 @@ body{overflow-x:hidden;}
 .utm-weather-panel__status { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: rgba(52,211,153,0.1); border-radius: 8px; font-size: 11px; font-weight: 600; color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
 .utm-weather-panel__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex-shrink: 0; box-shadow: 0 0 6px rgba(52,211,153,0.8); animation: dotBlink 2s ease-in-out infinite; }ather-panel__icon { font-size: 36px; margin-bottom: 4px; }
 
+.utm-what__pc-only { display: block; }
+.utm-what__mobile-only { display: none; }
+
 @keyframes alertAppear { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
 @keyframes dotBlink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }
 @keyframes dronefloat1 { 0%,100%{transform:translate(0,0);} 33%{transform:translate(12px,-10px);} 66%{transform:translate(-8px,6px);} }
@@ -1309,8 +1312,21 @@ body{overflow-x:hidden;}
   .utm-what__body { grid-template-columns: 160px 1fr 160px; gap: 10px; }
   .utm-what__card { height: 68px; padding: 0 12px; }
   .utm-what__card-label { font-size: 13px; }
-  .utm-what__img-wrap { min-height: 440px; }
  
+  .utm-what__pc-only { display: none; }
+  .utm-what__mobile-only { display: block; width: 100%; }
+
+  .utm-what__m-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
+
+  .utm-what__m-tab { flex: 1 1 calc(50% - 4px); padding: 10px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; text-align: center; }
+
+  .utm-what__m-tab--active { background: #6366f1; border-color: #6366f1; color: #fff; }
+
+
+  .utm-what__m-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; border-radius: 12px; }
+
+  .utm-what__m-img--active { opacity: 1; }
+
   .utm-evo { flex-direction: column; gap: 40px; padding: 80px 24px; }
   .utm-evo__left { flex: 0 0 auto; width: 100%; }
   .utm-evo__title { font-size: 28px; }
@@ -1326,18 +1342,24 @@ body{overflow-x:hidden;}
   .utm-intro__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; margin-left: 0; }
   .utm-intro__card { width: 100%; height: auto; min-height: 160px; padding: 28px 24px 12px; }
   .utm-intro__card-num { font-size: 40px; }
-  .utm-intro__card-label { font-size: 15px; }
- 
+
+   .utm-what__card-icon { display: none; }
+  .utm-what__card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
+  .utm-what__card:hover .utm-what__card-label { color: #fff; }
   .utm-what { padding: 60px 0; }
   .utm-what__top { margin-bottom: 40px; }
   .utm-what__title { font-size: 26px; }
-  .utm-what__body { grid-template-columns: 1fr; gap: 20px; }
+  .utm-what__body { grid-template-columns: 1fr;  }
   .utm-what__cards { flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
   .utm-what__card { height: 52px; flex: 1 1 calc(50% - 5px); min-width: 140px; justify-content: flex-start;}
   .utm-what__card--right .utm-what__card-icon { order: -1; }
-  .utm-what__mockup { order: -1; }
-  .utm-what__img-wrap { min-height: 300px; }
- 
+  .utm-what__mockup { order: -1; margin-bottom: 12px;}
+  .utm-what__card-label { text-align: center; width: 100%; font-size: 12px;}
+  .utm-what__m-img-wrap { position: relative; width: 100%; border-radius: 12px; overflow: hidden; }
+ .utm-what__m-img { position: relative; width: 100%; height: auto; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; border-radius: 12px; display: none; }
+.utm-what__m-img--active { opacity: 1; display: block; }
+.utm-what__m-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 0; }
+
   .drone--1 { left: 35% !important; }
   .drone--2 { left: 5% !important; }
   .drone--3 { top: 24% !important; right: 20% !important; }

src/pages/utm/IntroPage.jsx

@@ -647,8 +647,9 @@ function IntroPage() {
                   animate={whatInView ? { opacity: 1, y: 0 } : {}}
                   transition={{ duration: 0.8, delay: 0.2, ease }}
                 >
+                  {/* PC 전용 — 애니메이션 맵 */}
                   <div
-                    className="utm-what__img-wrap"
+                    className="utm-what__img-wrap utm-what__pc-only"
                     style={{
                       backgroundImage: `url(${basePath}images/utm_what_img2.png)`,
                     }}
@@ -665,7 +666,6 @@ function IntroPage() {
                       >
                         <Cloud size={16} />
                       </button>
-
                       <button className="utm-map-menu__btn">
                         <Layers size={16} />
                       </button>
@@ -840,7 +840,6 @@ function IntroPage() {
                             )}
                           </AnimatePresence>
 
-                          {/* 커서 */}
                           <div className="utm-cursor" ref={fpCursorRef}>
                             <div className="utm-cursor__dot" />
                           </div>
@@ -848,7 +847,6 @@ function IntroPage() {
                       )}
                     </AnimatePresence>
 
-                    {/* 공역 탭 */}
                     <AnimatePresence>
                       {activeIndex === 2 && (
                         <motion.div
@@ -874,7 +872,6 @@ function IntroPage() {
                             />
                           ))}
 
-                          {/* 공역 정보 팝업 */}
                           <AnimatePresence>
                             {selectedAirspace && (
                               <motion.div
@@ -940,7 +937,6 @@ function IntroPage() {
                             )}
                           </AnimatePresence>
 
-                          {/* 커서 */}
                           <div className="utm-cursor" ref={airspaceCursorRef}>
                             <div className="utm-cursor__dot" />
                           </div>
@@ -948,8 +944,6 @@ function IntroPage() {
                       )}
                     </AnimatePresence>
 
-                    {/* 기상 정보 자동 연계 */}
-
                     <AnimatePresence>
                       {activeIndex === 3 && (
                         <motion.div
@@ -966,7 +960,6 @@ function IntroPage() {
                               2025-06-10 14:32
                             </span>
                           </div>
-
                           <div className="utm-weather-panel__main">
                             <div className="utm-weather-panel__icon">☀️</div>
                             <div className="utm-weather-panel__temp">18°</div>
@@ -974,7 +967,6 @@ function IntroPage() {
                               맑음 · 비행 적합
                             </div>
                           </div>
-
                           <div className="utm-weather-panel__grid">
                             <div className="utm-weather-panel__item">
                               <span className="utm-weather-panel__item-label">
@@ -1028,6 +1020,7 @@ function IntroPage() {
                         </motion.div>
                       )}
                     </AnimatePresence>
+
                     <div
                       className="drone drone--1"
                       style={{
@@ -1111,6 +1104,20 @@ function IntroPage() {
                       <div className="drone__ping drone__ping--orange drone__ping--delay" />
                     </div>
                   </div>
+
+                  {/* 모바일 전용 — 탭 이미지 */}
+                  <div className="utm-what__mobile-only">
+                    <div className="utm-what__m-img-wrap">
+                      {UTM_WHAT_LEFT.map((_, i) => (
+                        <img
+                          key={i}
+                          src={`${basePath}images/utm-mobile-img${i + 1}.png`}
+                          alt={`UTM 기능 ${i + 1}`}
+                          className={`utm-what__m-img${activeIndex === i ? " utm-what__m-img--active" : ""}`}
+                        />
+                      ))}
+                    </div>
+                  </div>
                 </motion.div>
 
                 <motion.ul