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

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;
-  text-align: center;
+  // Figma: API Portal 텍스트 숨김 (로고에 포함)
+  display: none;
 
   .mobile-title {
     font-size: 18px;
@@ -229,9 +258,15 @@
 }
 
 .mobile-right {
+  display: flex;
+  align-items: center;
+
   .mobile-menu-btn {
-    width: 40px;
-    height: 40px;
+    // Figma: 24x24px 터치 영역, 16x16px 아이콘
+    // 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;
-    padding: 8px;
-    border-radius: 8px;
+    // 3/375*100 ≈ 0.8vw, 범위: 3px ~ 5px
+    gap: clamp(3px, 0.8vw, 5px);
+    // 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;
-      height: 60px;
+      // Figma: 좌 20px, 우 16px 패딩
+      // 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)
 // ===========================