From 672a99ef80ab23d147bd7111111b041012de6c84 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Fri, 22 May 2026 01:19:19 +0900
Subject: [PATCH] =?UTF-8?q?design:=20shape-8=20=EC=82=AD=EC=A0=9C,=20?=
 =?UTF-8?q?=EB=B3=84=20=EC=9C=84=EC=B9=98=20=EC=9A=B0=EC=B8=A1=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99,=20King=20=EB=B0=98=EC=A7=9D=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/styles.css     | 62 ++++++++++++++++++++++++++-------------
 app/templates/denied.html |  2 +-
 app/templates/login.html  |  2 +-
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index f671063..dfd7202 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -665,27 +665,29 @@ a { color: inherit; text-decoration: none; }
   animation: shapeFloat6 12s ease-in-out infinite;
 }
 
-/* 7. 별 — 좌측 중앙 */
+/* 7. 별 — 우측 중앙 (녹색 화살표 위치) */
 .shape-7 {
-  width: 60px;
-  height: 60px;
-  background: rgba(253, 224, 71, .3);
+  width: 64px;
+  height: 64px;
+  background: rgba(253, 224, 71, .38);
   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-  top: 52%;
-  left: 10%;
+  top: 50%;
+  right: 9%;
   animation: shapeFloat7 10s ease-in-out infinite;
 }
 
-/* 8. 큰 세모 테두리 — 상단 중앙 (outline 효과) */
-.shape-8 {
-  width: 110px;
-  height: 110px;
-  background: transparent;
-  border-left:  4px solid rgba(99, 179, 237, .3);
-  border-bottom: 4px solid rgba(99, 179, 237, .3);
-  top: 8%;
-  left: 38%;
-  animation: shapeFloat8 14s ease-in-out infinite;
+/* King 텍스트 — 반짝이며 유동 */
+.shape-king {
+  font-size: 30px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, .9);
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  top: 28%;
+  right: 7%;
+  animation: kingFloat 13s ease-in-out infinite, kingSparkle 2.4s ease-in-out infinite;
+  white-space: nowrap;
+  user-select: none;
 }
 
 @keyframes shapeFloat1 {
@@ -720,12 +722,30 @@ a { color: inherit; text-decoration: none; }
 }
 @keyframes shapeFloat7 {
   0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
-  33%       { transform: translate(20px, -16px) rotate(36deg) scale(1.15); }
-  66%       { transform: translate(-14px, 18px) rotate(-18deg) scale(0.9); }
+  33%       { transform: translate(-20px, -18px) rotate(36deg) scale(1.15); }
+  66%       { transform: translate(14px, 16px) rotate(-18deg) scale(0.9); }
 }
-@keyframes shapeFloat8 {
-  0%, 100% { transform: rotate(0deg) translate(0, 0); }
-  50%       { transform: rotate(30deg) translate(18px, 22px); }
+@keyframes kingFloat {
+  0%, 100% { transform: translate(0, 0); }
+  25%       { transform: translate(-12px, 16px); }
+  50%       { transform: translate(8px, 10px); }
+  75%       { transform: translate(-6px, -12px); }
+}
+@keyframes kingSparkle {
+  0%, 100% {
+    text-shadow:
+      0 0 8px  rgba(255, 255, 255, .6),
+      0 0 18px rgba(99, 179, 237, .5);
+    opacity: .75;
+  }
+  50% {
+    text-shadow:
+      0 0 16px rgba(255, 255, 255, 1),
+      0 0 36px rgba(99, 179, 237, 1),
+      0 0 56px rgba(147, 197, 253, .9),
+      0 0 80px rgba(59, 130, 246, .6);
+    opacity: 1;
+  }
 }
 
 /* ════════════════════════════════════════════════════
diff --git a/app/templates/denied.html b/app/templates/denied.html
index fb81f1b..64c6b31 100644
--- a/app/templates/denied.html
+++ b/app/templates/denied.html
@@ -20,7 +20,7 @@
           <div class="shape shape-5"></div>
           <div class="shape shape-6"></div>
           <div class="shape shape-7"></div>
-          <div class="shape shape-8"></div>
+          <div class="shape shape-king">King</div>
         </div>
 
         <div class="brand-logo">
diff --git a/app/templates/login.html b/app/templates/login.html
index 5ba940f..2776e16 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -20,7 +20,7 @@
           <div class="shape shape-5"></div>
           <div class="shape shape-6"></div>
           <div class="shape shape-7"></div>
-          <div class="shape shape-8"></div>
+          <div class="shape shape-king">King</div>
         </div>
 
         <div class="brand-logo">