UI 디자인 대대적으로 대시보드 형태의 전문적인 느낌으로 재구성

src/pages/lotto/Lotto.css

@@ -14,7 +14,7 @@
     text-transform: uppercase;
     letter-spacing: 0.3em;
     font-size: 12px;
-    color: var(--accent);
+    color: var(--accent-lotto);
     margin: 0 0 10px;
 }
 
@@ -63,10 +63,11 @@
 .lotto-panel {
     border: 1px solid var(--line);
     background: var(--surface);
-    border-radius: 24px;
+    border-radius: var(--radius-lg);
     padding: 20px;
     display: grid;
     gap: 16px;
+    box-shadow: var(--shadow-sm), var(--shadow-inset);
 }
 
 .lotto-panel--wide .lotto-chart {
@@ -94,7 +95,7 @@
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.22em;
-    color: var(--accent);
+    color: var(--accent-lotto);
 }
 
 .lotto-panel__sub {
@@ -213,7 +214,8 @@
 }
 
 .lotto-field input:focus {
-    border-color: rgba(247, 168, 165, 0.6);
+    border-color: rgba(52, 211, 153, 0.6);
+    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
 }
 
 .lotto-result {