chore : 베너변경

src/views/Main.vue

@@ -165,7 +165,6 @@ const menuItems = [
 
 const isLoggedIn = computed(() => !!authToken.value);
 
-// 🟢 [★변경] 원래 배너 문자열을 스크립트 단으로 격리
 const rawAscii = `
 ███████╗██████╗ ███████╗ ██████╗██╗ █████╗ ██╗
 ██╔════╝██╔══██╗██╔════╝██╔════╝██║██╔══██╗██║
@@ -173,7 +172,7 @@ const rawAscii = `
 ╚════██║██╔═══╝ ██╔══╝  ██║     ██║██╔══██║██║
 ███████║██║     ███████╗╚██████╗██║██║  ██║███████╗
 ╚══════╝╚═╝     ╚══════╝ ╚═════╝╚═╝╚═╝  ╚═╝╚══════╝
-███████╗██████╗  ██╗   ██╗██████╗  ██████╗███████╗
+███████╗██████╗ ██╗   ██╗██████╗  ██████╗███████╗
 ██╔════╝██╔═══██╗██║   ██║██╔══██╗██╔════╝██╔════╝
 ███████╗██║   ██║██║   ██║██████╔╝██║     █████╗
 ╚════██║██║   ██║██║   ██║██╔══██╗██║     ██╔══╝
@@ -186,8 +185,6 @@ const rawAscii = `
 ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║  ██║██║ ╚████║   ██║
  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝`;
 
-// 🟢 [★추가] 유저님의 아이디어를 100% 수렴한 치트키 필터
-// 공백(' ')을 동일한 물리 폭을 가진 블록 문자('█')로 바꾸고 클래스를 먹여 검은색 처리합니다.
 const formattedAscii = computed(() => {
   return rawAscii.replace(/ /g, '<span class="bg-block">█</span>');
 });
@@ -480,10 +477,9 @@ onMounted(() => {
   animation: once-cyber-glitch-wobble 2.5s linear 1 forwards !important;
 }
 
-/* 🟢 [★추가] 공백 치환용 백그라운드 클로킹 블록 CSS */
 :deep(.bg-block) {
-  color: #050505 !important;       /* 홈페이지 본체 배경색인 완벽한 검은색(#050505) 처리 */
-  text-shadow: none !important;    /* 부모 글리치 레이어의 빛 번짐(Glow) 차단 */
+  color: #050505 !important;
+  text-shadow: none !important;
 }
 
 /* 📺 유튜브 그리드 레이아웃 */
@@ -563,7 +559,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
   text-shadow: 0 0 5px rgba(51, 255, 51, 0.6) !important;
 }
 
-/* 📱 반응형 분기점 */
+/* 📱 반응형 분기점 (모바일 전체 레이아웃 짤림 디버깅 패치) */
 @media screen and (max-width: 1100px) {
   #videos-container { grid-template-columns: repeat(2, 1fr); }
   .project-grid { grid-template-columns: repeat(2, 1fr); }
@@ -571,7 +567,34 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
 @media screen and (max-width: 650px) {
   #videos-container { grid-template-columns: 1fr; }
   .project-grid { grid-template-columns: 1fr; }
-  .auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; }
+
+  /* 🟢 1) GNB 세로 배치 시 각 구성원이 정중앙 정렬되고 여백을 최적화하도록 보정 */
+  .auth-nav {
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px 20px;
+    align-items: center;
+  }
+
+  /* 🟢 2) 모바일 가로폭이 아주 협소할 때 상단 메뉴 버튼들이 댕강 잘리는 것을 막기 위한 자동 유연 래핑 */
+  .nav-menu {
+    display: flex;
+    gap: 12px 16px;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+  }
+  .menu-btn {
+    font-size: 14px; /* 모바일 맞춤 폰트 다이어트 */
+  }
+  .auth-group {
+    width: 100%;
+    justify-content: center;
+    margin-top: 5px;
+  }
+  .nav-item {
+    margin: 0 6px;
+  }
 
   /* 쾌적한 모바일 가로 스크롤 뷰 복구 */
   .ascii-container {
@@ -591,12 +614,22 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
     word-break: keep-all !important;
     width: max-content !important;
     margin: 0 !important;
-
-    /* 모바일 크롬의 텍스트 오토-사이징 부스팅 버그 영구 무력화 */
     -webkit-text-size-adjust: none !important;
     text-size-adjust: none !important;
     max-height: 999999px !important;
   }
+
+  /* 🟢 3) [★핵심 패치] 하단 터미널 모니터 프레임 모바일 대적용
+     PC용 300px 높이와 40px이라는 과도한 사이드 마진이 화면 전체 레이아웃을 찌그러뜨리고 잘리게 만들었던 원인입니다.
+     모바일에서는 높이를 슬림화(180px)하고 마진을 대폭 압축하여 메인 스페이스 확보 완료. */
+  .crt-monitor-frame {
+    height: 180px !important;
+    margin: 10px 15px 15px !important;
+  }
+  .monitor-header {
+    padding: 4px 10px;
+    font-size: 10px;
+  }
 }
 @keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }