chore : 베너변경

src/views/Main.vue

@@ -34,26 +34,7 @@
 
         <div v-if="activeMenu === 'main'" class="sub-page main-page" key="main">
           <div class="ascii-container">
-            <pre class="ascii-art">
-███████╗██████╗ ███████╗ ██████╗██╗ █████╗ ██╗
-██╔════╝██╔══██╗██╔════╝██╔════╝██║██╔══██╗██║
-███████╗██████╔╝█████╗  ██║     ██║███████║██║
-╚════██║██╔═══╝ ██╔══╝  ██║     ██║██╔══██║██║
-███████║██║     ███████╗╚██████╗██║██║  ██║███████╗
-╚══════╝╚═╝     ╚══════╝ ╚═════╝╚═╝╚═╝  ╚═╝╚══════╝
-███████╗██████╗ ██╗   ██╗██████╗  ██████╗███████╗
-██╔════╝██╔═══██╗██║   ██║██╔══██╗██╔════╝██╔════╝
-███████╗██║   ██║██║   ██║██████╔╝██║     █████╗
-╚════██║██║   ██║██║   ██║██╔══██╗██║     ██╔══╝
-███████║╚██████╔╝╚██████╔╝██║  ██║╚██████╗███████╗
-╚══════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚══════╝
- ██████╗ ██████╗ ███╗   ███╗██████╗  █████╗ ███╗   ██╗██╗   ██╗
-██╔════╝██╔═══██╗████╗ ████║██╔══██╗██╔══██╗████╗  ██║╚██╗ ██╔╝
-██║     ██║   ██║██╔████╔██║██████╔╝███████║██╔██╗ ██║ ╚████╔╝
-██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██╔══██║██║╚██╗██║  ╚██╔╝
-╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║  ██║██║ ╚████║   ██║
- ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝
-            </pre>
+            <pre class="ascii-art" v-html="formattedAscii"></pre>
           </div>
         </div>
 
@@ -184,6 +165,33 @@ const menuItems = [
 
 const isLoggedIn = computed(() => !!authToken.value);
 
+// 🟢 [★변경] 원래 배너 문자열을 스크립트 단으로 격리
+const rawAscii = `
+███████╗██████╗ ███████╗ ██████╗██╗ █████╗ ██╗
+██╔════╝██╔══██╗██╔════╝██╔════╝██║██╔══██╗██║
+███████╗██████╔╝█████╗  ██║     ██║███████║██║
+╚════██║██╔═══╝ ██╔══╝  ██║     ██║██╔══██║██║
+███████║██║     ███████╗╚██████╗██║██║  ██║███████╗
+╚══════╝╚═╝     ╚══════╝ ╚═════╝╚═╝╚═╝  ╚═╝╚══════╝
+███████╗██████╗ ██╗   ██╗██████╗  ██████╗███████╗
+██╔════╝██╔═══██╗██║   ██║██╔══██╗██╔════╝██╔════╝
+███████╗██║   ██║██║   ██║██████╔╝██║     █████╗
+╚════██║██║   ██║██║   ██║██╔══██╗██║     ██╔══╝
+███████║╚██████╔╝╚██████╔╝██║  ██║╚██████╗███████╗
+╚══════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚══════╝
+ ██████╗ ██████╗ ███╗   ███╗██████╗  █████╗ ███╗   ██╗██╗   ██╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██╔══██╗████╗  ██║╚██╗ ██╔╝
+██║     ██║   ██║██╔████╔██║██████╔╝███████║██╔██╗ ██║ ╚████╔╝
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██╔══██║██║╚██╗██║  ╚██╔╝
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║  ██║██║ ╚████║   ██║
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝`;
+
+// 🟢 [★추가] 유저님의 아이디어를 100% 수렴한 치트키 필터
+// 공백(' ')을 동일한 물리 폭을 가진 블록 문자('█')로 바꾸고 클래스를 먹여 검은색 처리합니다.
+const formattedAscii = computed(() => {
+  return rawAscii.replace(/ /g, '<span class="bg-block">█</span>');
+});
+
 const changeMenu = (id) => {
   if (activeMenu.value === id) return;
 
@@ -350,7 +358,6 @@ onMounted(() => {
 <style>
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');
 
-/* GNB, 버튼, 인풋, 터미널 등 일반 텍스트 영역은 개발자 폰트 대통합 */
 .homepage-wrapper,
 .menu-btn,
 .nav-item,
@@ -364,12 +371,6 @@ onMounted(() => {
 :deep(.terminal span) {
   font-family: 'JetBrains Mono', monospace !important;
 }
-
-/* 🌟 [핵심 수정] 웹 폰트(JetBrains) 서브셋에서 특수문자 선 기호(╔, ═, ╝)가 빠지는 버그 차단.
-   배너 영역만큼은 모바일 크롬 내장 순수 모노스페이스 스택으로 완전 분리하여 1:1 완벽 정렬 강제 유도 */
-.ascii-art {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
-}
 </style>
 
 <style scoped>
@@ -479,6 +480,12 @@ 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) 차단 */
+}
+
 /* 📺 유튜브 그리드 레이아웃 */
 #videos-container {
   display: grid;
@@ -566,7 +573,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
   .project-grid { grid-template-columns: 1fr; }
   .auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; }
 
-  /* 🟢 [가로 스크롤 활성화] 원래 원하셨던 모바일 가로 스크롤 컨테이너 복구 */
+  /* 쾌적한 모바일 가로 스크롤 뷰 복구 */
   .ascii-container {
     width: 100%;
     overflow-x: auto !important;
@@ -578,14 +585,14 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
   }
 
   .ascii-art {
-    font-size: 10px !important; /* 가로 스크롤 시 한눈에 잡히는 모바일 최적 크기 */
+    font-size: 11px !important;
     line-height: 1.35 !important;
     white-space: pre !important;
     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;