메인 화면 모바일 디자인 적용

src/main/resources/static/sass/base/_utilities.scss

@@ -438,6 +438,23 @@
   }
 }
 
+// PC/Mobile visibility classes
+.pc {
+  display: block;
+
+  @include respond-to('sm') {
+    display: none !important;
+  }
+}
+
+.mobile {
+  display: none;
+
+  @include respond-to('sm') {
+    display: block !important;
+  }
+}
+
 // Cursor utilities
 .cursor-pointer {
   cursor: pointer;

src/main/resources/static/sass/layout/_footer.scss

@@ -139,40 +139,125 @@
   }
 }
 
-// Mobile responsive adjustments
+// Mobile responsive adjustments (sm: 768px)
-@media (max-width: 576px) {
+@include respond-to('sm') {
+  .global-footer {
+    .container {
+      padding: 0 20px;
+    }
+  }
+
   .footer-content {
+    // Figma 모바일: 세로 배치, gap 12px
+    flex-direction: column;
+    align-items: flex-start;
     padding: 24px 0;
-    gap: 24px;
+    gap: 12px;
+    min-height: auto;
   }
 
   .footer-left {
-    gap: 12px;
+    // Figma 모바일: 로고와 링크/저작권 분리
+    gap: 8px;
+    width: 100%;
+    order: 1;
 
     .footer-logo {
-      width: 90px;
+      // Figma 모바일: 72px 너비
+      width: 72px;
+      order: -2;
     }
 
     .footer-links {
-      flex-wrap: wrap;
+      gap: 9px;
-      gap: 6px;
+      order: 1;
+
+      .footer-link {
+        // Figma 모바일: 11px, #212529
+        font-size: 11px;
+        color: #212529;
+      }
 
-      .footer-link,
       .footer-separator {
-        font-size: 14px;
+        font-size: 11px;
+        color: #212529;
       }
     }
 
     .footer-copyright {
-      font-size: 12px;
+      // Figma 모바일: 10px, #5f666c
+      font-size: 10px;
+      color: #5f666c;
+      order: 3;
     }
   }
 
   .footer-right {
-    gap: 12px;
+    // Figma 모바일: 관련사이트가 로고 아래, 고객센터가 링크 아래
+    width: 100%;
+    align-items: flex-start;
+    gap: 8px;
+    order: 0;
+
+    .footer-related-sites {
+      width: 100%;
+      order: -1;
+
+      .related-sites-select {
+        // Figma 모바일: 전체 너비, 44px 높이, border-radius 8px, 12px 폰트
+        width: 100%;
+        height: 44px;
+        font-size: 12px;
+        border-radius: 8px;
+        border-color: #dadada;
+        color: #8c959f;
+      }
+    }
 
     .footer-contact {
-      font-size: 20px;
+      // Figma 모바일: 11px, #212529
+      font-size: 11px;
+      font-weight: 400;
+      color: #212529;
+      order: 2;
+    }
+  }
+}
+
+// Figma 모바일 레이아웃 재정렬 (flex order 사용)
+@include respond-to('sm') {
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+
+    // 순서: 로고 → 드롭다운 → 링크 → 고객센터 → 저작권
+    .footer-left {
+      display: contents;
+
+      .footer-logo {
+        order: 1;
+      }
+
+      .footer-links {
+        order: 3;
+      }
+
+      .footer-copyright {
+        order: 5;
+      }
+    }
+
+    .footer-right {
+      display: contents;
+
+      .footer-related-sites {
+        order: 2;
+        width: 100%;
+      }
+
+      .footer-contact {
+        order: 4;
+      }
     }
   }
 }

src/main/resources/static/sass/layout/_header.scss

@@ -207,18 +207,47 @@
 }
 
 // ===========================
-// Mobile Header Components
+// Mobile Header Components (Figma Design)
+// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
 // ===========================
 .mobile-left {
+  display: flex;
+  align-items: center;
+  // 375px 기준 8px → 8/375*100 ≈ 2.13vw, 범위: 8px ~ 12px
+  gap: clamp(8px, 2.13vw, 12px);
+
+  .mobile-logo-link {
+    display: flex;
+    align-items: center;
+  }
+
   .mobile-logo {
-    height: 32px;
+    // Figma: 로고 이미지 - 375px 기준 16px
+    // 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
+    height: clamp(16px, 4.27vw, 24px);
     width: auto;
+    object-fit: contain;
+  }
+
+  .mobile-logo-text {
+    // Figma: API Portal 텍스트 - 375px 기준 14px
+    // 14/375*100 ≈ 3.73vw, 범위: 14px ~ 18px
+    font-family: 'Noto Sans KR', sans-serif;
+    font-size: clamp(14px, 3.73vw, 18px);
+    font-weight: 700;
+    color: #212529;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      color: #0049B4;
+    }
   }
 }
 
 .mobile-center {
-  flex: 1;
+  // Figma: API Portal 텍스트 숨김 (로고에 포함)
-  text-align: center;
+  display: none;
 
   .mobile-title {
     font-size: 18px;
@@ -229,9 +258,15 @@
 }
 
 .mobile-right {
+  display: flex;
+  align-items: center;
+
   .mobile-menu-btn {
-    width: 40px;
+    // Figma: 24x24px 터치 영역, 16x16px 아이콘
-    height: 40px;
+    // 375px 기준 반응형 - clamp() 사용
+    // 24/375*100 ≈ 6.4vw, 범위: 24px ~ 32px
+    width: clamp(24px, 6.4vw, 32px);
+    height: clamp(24px, 6.4vw, 32px);
     background: transparent;
     border: none;
     cursor: pointer;
@@ -239,19 +274,23 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 4px;
+    // 3/375*100 ≈ 0.8vw, 범위: 3px ~ 5px
-    padding: 8px;
+    gap: clamp(3px, 0.8vw, 5px);
-    border-radius: 8px;
+    // 4/375*100 ≈ 1.07vw, 범위: 4px ~ 6px
+    padding: clamp(4px, 1.07vw, 6px);
+    border-radius: 4px;
     transition: background-color 0.3s ease;
 
     &:hover {
-      background: var(--gray-bg);
+      background: rgba(0, 0, 0, 0.05);
     }
 
     .hamburger-line {
-      width: 24px;
+      // Figma: 햄버거 라인 스타일 - 375px 기준 16px
+      // 16/375*100 ≈ 4.27vw, 범위: 16px ~ 22px
+      width: clamp(16px, 4.27vw, 22px);
       height: 2px;
-      background: var(--text-dark);
+      background: #515961;
       transition: all 0.3s ease;
       border-radius: 1px;
     }
@@ -259,13 +298,13 @@
     &.active {
       .hamburger-line {
         &:nth-child(1) {
-          transform: rotate(45deg) translateY(6px);
+          transform: rotate(45deg) translateY(5px);
         }
         &:nth-child(2) {
           opacity: 0;
         }
         &:nth-child(3) {
-          transform: rotate(-45deg) translateY(-6px);
+          transform: rotate(-45deg) translateY(-5px);
         }
       }
     }
@@ -789,37 +828,40 @@ body {
 
 // ===========================
 // Mobile Responsive Design
+// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
 // ===========================
 @media (max-width: 768px) {
   .global-header {
-    height: 90px;
+    // Figma: 44px 높이, 반투명 배경
+    // 375px 기준 44px → 44/375*100 ≈ 11.73vw, 범위: 44px ~ 60px
+    height: clamp(44px, 11.73vw, 60px);
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: none;
+
+    .container {
+      padding: 0;
+      max-width: 100%;
+      background-color: #FEFEFE;
+    }
 
     .container .header-content {
-      padding: 0 16px;
+      // Figma: 좌 20px, 우 16px 패딩
-      height: 60px;
+      // 20/375*100 ≈ 5.33vw, 범위: 20px ~ 28px
+      // 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
+      padding: 0 clamp(16px, 4.27vw, 24px) 0 clamp(20px, 5.33vw, 28px);
+      height: clamp(44px, 11.73vw, 60px);
+      margin-top: 0;
     }
   }
 
   body {
-    padding-top: 60px; // Smaller header on mobile
+    // 헤더 높이와 동일하게 반응형 적용
+    padding-top: clamp(44px, 11.73vw, 60px);
   }
 }
 
-@media (max-width: 480px) {
-  .global-header {
-    .header-content {
-      padding: 0 12px;
-    }
-  }
-
-  .logo {
-    .logo-text {
-      display: none; // Hide logo text on very small screens
-    }
-  }
-
-}
-
 // ===========================
 // Header User Info (Authenticated State)
 // ===========================

src/main/resources/templates/views/apps/main/index.html

@@ -181,8 +181,7 @@
             <span class="title-highlight">광주은행 API Portal</span>
           </h2>
           <p class="info-description">
-            광주은행 API Portal은 기업이 금융 서비스를 편리하게 개발할 수<br>
+            광주은행 API Portal은 기업이 금융 서비스를 편리하게 개발할 수 있도록 차별화된 API와 테스트환경을 제공합니다.
-            있도록 차별화된 API와 테스트환경을 제공합니다.
           </p>
 
           <div class="action-buttons">
@@ -220,7 +219,8 @@
           </div>
           <div class="card-content">
             <h3>공지사항</h3>
-            <p>광주은행 API의 새로운 소식을 확인해보세요.</p>
+            <p class="pc">광주은행 API의 새로운 소식을 확인해보세요.</p>
+            <p class="mobile">광주은행 API의 <br/>새로운 소식</p>
           </div>
         </a>
 

src/main/resources/templates/views/fragment/kjbank/header_container.html

@@ -76,20 +76,17 @@
           </div>
         </div>
 
-        <!-- Mobile Header Layout -->
+        <!-- Mobile Header Layout (Figma Design) -->
         <div class="mobile-header">
           <div class="mobile-left">
             <a th:href="@{/}" class="mobile-logo-link">
               <img src="/img/logo/logo.png" alt="광주은행" class="mobile-logo">
             </a>
-          </div>
+            <a th:href="@{/}" class="mobile-logo-text">API Potal</a>
-
-          <div class="mobile-center">
-            <h1 class="mobile-title">개발자 포털</h1>
           </div>
 
           <div class="mobile-right">
-            <button class="mobile-menu-btn" id="mobileMenuToggle">
+            <button class="mobile-menu-btn" id="mobileMenuToggle" aria-label="메뉴">
               <span class="hamburger-line"></span>
               <span class="hamburger-line"></span>
               <span class="hamburger-line"></span>