fix : main banner modify

src/views/Main.vue

@@ -158,7 +158,7 @@ const loginPw = ref('1234');
 const activeMenu = ref('main');
 const authToken = ref(localStorage.getItem('token'));
 
-// 🟢 [NEW] 메뉴 아이템 배열에 YOUTUBE 명시적으로 배치
+// 메뉴 아이템 배열
 const menuItems = [
   { id: 'main', name: 'HOME' },
   { id: 'youtube', name: 'YOUTUBE' },
@@ -324,32 +324,39 @@ onMounted(() => {
 .sub-page { max-width: 1000px; margin: 0 auto; padding-top: 15px; width: 100%; }
 .page-title { font-family: monospace; border-bottom: 1px solid #113311; padding-bottom: 10px; margin-bottom: 20px; color: #00ff00;}
 
-/* 🟢 [NEW] 메인 홈 아스키 전광판 전용 스타일 클래스 양식 */
+/* 메인 홈 아스키 전광판 레이아웃 */
 .main-page {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
+  position: relative;
 }
 .ascii-container {
   width: 100%;
-  overflow-x: auto;
+  overflow: auto;
   padding: 20px;
   box-sizing: border-box;
+  position: relative;
 }
 .ascii-art {
   font-family: 'Courier New', Courier, monospace !important;
-  color: #33ff33 !important;
-  line-height: 1.25;
-  font-size: 13px;
   font-weight: bold;
-  text-shadow: 0 0 8px rgba(51, 255, 51, 0.8) !important;
-  background: transparent;
-  border: none;
-  margin: 0 auto;
   white-space: pre;
   display: block;
+  margin: 0 auto;
   width: max-content;
+
+  /* 🟢 [핵심 오버라이드] 도트 단위 흔들림과 화려한 RGB 스플릿 애니메이션 */
+  color: #00ff00 !important; /* 베이스 색상 강제 */
+  font-size: 14px;
+  line-height: 1.2;
+  border: none;
+  background: transparent;
+  transform-origin: center;
+
+  /* 🌟 압도적인 존재감의 애니메이션 적용 (2초 주기로 폭발적인 반짝임) */
+  animation: extreme-cyber-glitch-wobble 2s linear infinite !important;
 }
 
 /* 📺 유튜브 그리드 레이아웃 */
@@ -376,12 +383,6 @@ onMounted(() => {
 .video-title { color: #00aa00; margin-top: 10px; font-size: 14px; height: 40px; overflow: hidden; font-family: sans-serif; }
 iframe { width: 100%; height: 180px; border-radius: 4px; }
 
-.new-item::before {
-  content: 'NEW'; position: absolute; top: -5px; left: -5px;
-  background: #00ff00; color: #000; font-size: 10px; font-weight: bold;
-  padding: 2px 5px; box-shadow: 0 0 5px #00ff00; z-index: 10;
-}
-
 /* 보안 로그인 프레임 */
 .login-terminal-frame {
   max-width: 550px; margin: 40px auto;
@@ -398,7 +399,6 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
   flex: 1; background: none; border: none; color: #00ff00;
   font-family: 'Courier New', Courier, monospace; font-size: 15px; outline: none;
 }
-.login-input::placeholder { color: #004400; }
 .login-submit-btn {
   margin-top: 15px; background: none; border: 1px solid #00ff00;
   color: #00ff00; padding: 12px; font-family: 'Courier New', Courier, monospace;
@@ -406,7 +406,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
 }
 .login-submit-btn:hover { background: #00ff00; color: #000; box-shadow: 0 0 15px #00ff00; }
 
-/* 프로젝트 리스트 및 기타 소형 요소 */
+/* 프로젝트 리스트 */
 .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
 .project-item { border: 1px solid #113311; padding: 15px; background: #080808; font-family: monospace;}
 .item-header { font-weight: bold; margin-bottom: 10px; color: #00ff00; }
@@ -437,7 +437,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); }
@@ -446,7 +446,85 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
   #videos-container { grid-template-columns: 1fr; }
   .project-grid { grid-template-columns: 1fr; }
   .auth-nav { flex-direction: column; gap: 12px; padding: 15px 20px; }
-  .ascii-art { font-size: 8px; /* 모바일 대응 크기 축소 */ }
+  .ascii-art { font-size: 7px; line-height: 1.1; }
 }
 @keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
+
+/* 🟢 [NEW] 압도적으로 티가 나는 "익스트림 사이버 글리치 Wobble" 애니메이션 정의 */
+@keyframes extreme-cyber-glitch-wobble {
+  /* [정상 구간 - 20%] 차분하게 시작 */
+  0%, 10%, 100% {
+    transform: translate(0) scale(1) skewX(0deg);
+    color: #00ff00 !important;
+    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
+    opacity: 1;
+  }
+
+  /* [스파이크 구간 1] 순식간에 티가 팍팍 나는 RGB 팝 */
+  11% {
+    transform: translate(-3px, 1.5px) scale(1.02) skewX(2deg);
+    color: #ffffff !important; /* 완전 하얀색으로 한순간 팝! */
+    text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; /* 리얼 RGB 스플릿 */
+    opacity: 0.95;
+  }
+
+  /* [복구 1] 빠르게 오리지널 형광 그린 복귀 */
+  13% {
+    transform: translate(3px, -1.5px) scale(0.98) skewX(-2deg);
+    color: #00ff00 !important;
+    text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important;
+  }
+
+  /* [정상 유지] 조금 긴 호흡 */
+  15%, 25% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
+  }
+
+  /* [빅 글리치 타이밍 1 - 색상 반전] */
+  26% {
+    transform: translate(0);
+    color: #00ffff !important; /* 사이버 청록색으로 색상 확 튀게 변환 */
+    text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important;
+    opacity: 1;
+  }
+
+  /* [초고속 지지직] 0.02초 단위 도트 단위 흔들림 */
+  27% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;}
+  28% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;}
+
+  /* [복구 2] 다시 베이스 녹색으로 터미널 숨쉬기 */
+  29% {
+    transform: translate(0);
+    color: #00ff00 !important;
+    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
+  }
+
+  /* [안정화] */
+  30%, 40% { transform: translate(0); }
+
+  /* [펄스 암전 타이밍 - 하드웨어 지지직] */
+  41% {
+    transform: scale(1.05) skewY(1deg);
+    color: #ffffff !important;
+    opacity: 0.1; /* 완전 꺼지기 직전 시스템 오류 */
+  }
+
+  /* [암전 복구] */
+  42% {
+    opacity: 1;
+    color: #00ff00 !important;
+  }
+
+  /* [색상 대반전 2 - 형광 연두] */
+  55% {
+    color: #bfff00 !important; /* 강렬한 산성 황록색 */
+    text-shadow: 0 0 15px #bfff00, 0 0 30px rgba(191, 255, 0, 0.7) !important;
+  }
+
+  /* [최종 글리치 루프 시작] */
+  90% { transform: translate(0); }
+  91% { transform: translate(-2px, 0); color: #ff00ff !important; text-shadow: 2px 0 red, -2px 0 blue;}
+  92% { transform: translate(2px, 0); color: #00ffff !important; text-shadow: -2px 0 red, 2px 0 blue;}
+}
 </style>