style : 운영 유지보수 다이어그램 크기 수정

src/css/common.css

@@ -1028,7 +1028,7 @@ body{overflow-x:hidden;}
 .mt-intro__cta:hover { gap:14px; }
  
 /* ── 벤다이어그램 ── */
-.mt-venn { position:relative; width:100%; max-width:640px; }
+.mt-venn { position:relative; width:100%; max-width:600px; }
 .mt-venn__svg { width:100%; height:auto; display:block; overflow:visible; }
  
 /* ── KPI 바 ── */
@@ -1254,3 +1254,101 @@ body{overflow-x:hidden;}
 .utm-cap__card-tags { list-style: none; display: flex; flex-direction: column; gap: 7px; }
 .utm-cap__card-tags li { font-size: 13px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
 .utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 6px; opacity: 0.6; }
+
+@media (max-width: 1200px) {
+  .utm-intro__cards { grid-template-columns: repeat(2, 1fr); }
+  .utm-intro__card { width: 100%; }
+ 
+  .utm-what__body { grid-template-columns: 180px 1fr 180px; gap: 12px; }
+ 
+  .utm-evo { gap: 48px; padding: 80px 32px; }
+  .utm-evo__left { flex: 0 0 340px; }
+ 
+  .utm-cap__cards { grid-template-columns: repeat(3, 1fr); }
+}
+ 
+@media (max-width: 1024px) {
+  .utm-intro { gap: 36px; padding: 60px 0; }
+  .utm-intro__title { font-size: 32px; }
+  .utm-intro__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+  .utm-intro__card { width: 100%; height: auto; min-height: 180px; }
+ 
+  .utm-what { padding: 80px 0; }
+  .utm-what__title { font-size: 32px; }
+  .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-evo { flex-direction: column; gap: 40px; padding: 80px 24px; }
+  .utm-evo__left { flex: 0 0 auto; width: 100%; }
+  .utm-evo__title { font-size: 28px; }
+ 
+  .utm-cap { padding: 60px 0; }
+  .utm-cap__title { font-size: 32px; }
+  .utm-cap__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 24px; }
+}
+ 
+@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__card-num { font-size: 40px; }
+  .utm-intro__card-label { font-size: 15px; }
+ 
+  .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__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__card--right { flex-direction: row; }
+  .utm-what__mockup { order: -1; }
+  .utm-what__img-wrap { min-height: 300px; }
+ 
+  .utm-evo { padding: 60px 0; }
+  .utm-evo__title { font-size: 24px; }
+  .utm-evo__item { grid-template-columns: 1fr 44px; }
+  .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__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-cap { padding: 48px 0; }
+  .utm-cap__title { font-size: 26px; }
+  .utm-cap__cards { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
+  .utm-cap__card-num { font-size: 52px; }
+  .utm-cap__card-name { font-size: 16px; }
+}
+ 
+@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-intro__card-label { font-size: 13px; }
+ 
+  .utm-what__title { font-size: 22px; }
+  .utm-what__card { flex: 1 1 100%; }
+  .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-evo__title { font-size: 20px; }
+  .utm-evo__item { grid-template-columns: 1fr 36px; padding: 28px 0; }
+  .utm-evo__dot { width: 36px; height: 36px; font-size: 11px; }
+  .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-cap__title { font-size: 22px; }
+  .utm-cap__cards { padding: 16px; }
+  .utm-cap__card { padding: 20px 16px; }
+}
+