From 495280d1b564bf1d4bf7e0c3c880cd8b0cded4a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?=
 <siyeon00@palnet.co.kr>
Date: Tue, 9 Jun 2026 11:14:04 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20utm/uatm=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/common.css | 69 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/css/common.css b/src/css/common.css
index 188a753..5b73f5c 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -1292,8 +1292,8 @@ body{overflow-x:hidden;}
 @media (max-width: 768px) {
   .utm-intro { gap: 28px; padding: 48px 0; }
   .utm-intro__title { font-size: 26px; }
-  .utm-intro__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
-  .utm-intro__card { padding: 20px 16px 24px; min-height: 160px; }
+  .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; }
  
@@ -1301,23 +1301,40 @@ body{overflow-x:hidden;}
   .utm-what__top { margin-bottom: 40px; }
   .utm-what__title { font-size: 26px; }
   .utm-what__body { grid-template-columns: 1fr; gap: 20px; }
-  .utm-what__cards { flex-direction: row; flex-wrap: wrap; gap: 10px; }
-  .utm-what__card { height: 52px; flex: 1 1 calc(50% - 5px); min-width: 140px; }
+  .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 { flex-direction: row; }
+  .utm-what__card--right .utm-what__card-icon { order: -1; }
   .utm-what__mockup { order: -1; }
   .utm-what__img-wrap { min-height: 300px; }
  
+  .drone--1 { left: 35% !important; }
+  .drone--2 { left: 5% !important; }
+  .drone--3 { top: 24% !important; right: 20% !important; }
+
+  .drone__badge { min-width: 90px; }
+  .drone__badge-id { font-size: 9px; }
+  .drone__badge-status { font-size: 8px; }
+
+
+
   .utm-evo { padding: 60px 0; }
   .utm-evo__title { font-size: 24px; }
-  .utm-evo__item { grid-template-columns: 1fr 44px; }
+  .utm-evo__item { grid-template-columns: 44px 1fr; }
   .utm-evo__empty { display: none; }
   .utm-evo__card-wrap--right { padding-left: 0; grid-column: 1; grid-row: 1; }
-  .utm-evo__dot-wrap { grid-column: 2; grid-row: 1; }
+  .utm-evo__dot-wrap { grid-column: 1; grid-row: 1; }
   .utm-evo__card { flex-direction: column; align-items: flex-start; gap: 12px; }
   .utm-evo__card-img { width: 80px; height: 80px; }
-  .utm-evo__line-bg { left: calc(100% - 22px); }
-  .utm-evo__line-fill { left: calc(100% - 22px); }
- 
+  .utm-evo__line-bg { left: 22px; }
+  .utm-evo__line-fill { left: 22px; }
+
+ .utm-evo__card-wrap--left { padding-right: 0; }
+
+  .utm-evo__card-wrap--left,
+  .utm-evo__card-wrap--right { grid-column: 2; grid-row: 1; padding: 0 0 0 16px; }
+  .utm-evo__card { width: 100%; box-sizing: border-box; }
+
   .utm-cap { padding: 48px 0; }
   .utm-cap__title { font-size: 26px; }
   .utm-cap__cards { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
@@ -1327,26 +1344,40 @@ body{overflow-x:hidden;}
  
 @media (max-width: 480px) {
   .utm-intro__title { font-size: 22px; }
-  .utm-intro__cards { grid-template-columns: 1fr 1fr; gap: 8px; }
-  .utm-intro__card { padding: 16px 12px 20px; }
+  .utm-what__cards { flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
   .utm-intro__card-label { font-size: 13px; }
  
   .utm-what__title { font-size: 22px; }
-  .utm-what__card { flex: 1 1 100%; }
+  .utm-what__card { flex: 1 1 calc(50% - 5px); min-width: 0; justify-content: flex-start;}
   .utm-what__img-wrap { min-height: 240px; }
- 
-  .drone__badge { min-width: 110px; }
-  .drone__badge-id { font-size: 10px; }
-  .drone__badge-status { font-size: 9px; }
- 
+  .utm-what__card--right { flex-direction: row;}
+  .utm-what__card--right .utm-what__card-icon { order: -1; }
+  .drone--1 { left: 35% !important; }
+  .drone--2 { left: 5% !important; }
+  .drone--3 { top: 24% !important; right: 20% !important; }
+
+  .drone__badge { min-width: 90px; }
+  .drone__badge-id { font-size: 9px; }
+  .drone__badge-status { font-size: 8px; }
+  
   .utm-evo__title { font-size: 20px; }
-  .utm-evo__item { grid-template-columns: 1fr 36px; padding: 28px 0; }
+  .utm-evo__item { grid-template-columns: 36px 1fr; }
   .utm-evo__dot { width: 36px; height: 36px; font-size: 11px; }
+  .utm-evo__dot-wrap { grid-column: 1; grid-row: 1; }
+
   .utm-evo__card { padding: 14px; }
   .utm-evo__card-img { width: 64px; height: 64px; }
   .utm-evo__card-name { font-size: 14px; }
   .utm-evo__card-desc { font-size: 12px; }
- 
+
+  .utm-evo__card-wrap--left { padding-right: 0; }
+  .utm-evo__card-wrap--left,
+  .utm-evo__card-wrap--right { grid-column: 2; grid-row: 1; padding: 0 0 0 12px; }
+  .utm-evo__card { width: 100%; box-sizing: border-box; }
+
+  .utm-evo__line-bg { left: 18px; }
+  .utm-evo__line-fill { left: 18px; }
+
   .utm-cap__title { font-size: 22px; }
   .utm-cap__cards { padding: 16px; }
   .utm-cap__card { padding: 20px 16px; }