Update index.html

index.html

@@ -283,12 +283,161 @@
             left: 20px;
             width: 200px;
             height: 200px;
-            background: rgba(0,20,0,0.3);
+            background: rgba(30, 30, 30, 0.9); /* 더 어두운 회색 배경 */
             border: 2px solid #0f0;
             border-radius: 50%;
             z-index: 1001;
             overflow: hidden;
         }
+        
+        /* RWR 디스플레이 스타일 */
+        .rwr-display {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+        
+        /* RWR 중앙 항공기 심볼 */
+        .rwr-center {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 15px;  /* 더 작게 */
+            height: 15px; /* 더 작게 */
+            z-index: 10;
+        }
+        
+        .rwr-aircraft-symbol {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .rwr-aircraft-symbol img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            filter: drop-shadow(0 0 2px #00ff00); /* 초록색 빛나는 효과 */
+        }
+        
+        /* RWR 거리 링 */
+        .rwr-range-ring {
+            position: absolute;
+            border: 1px solid rgba(0, 255, 0, 0.4);
+            border-radius: 50%;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        
+        .rwr-ring-inner {
+            width: 60px;
+            height: 60px;
+        }
+        
+        .rwr-ring-middle {
+            width: 120px;
+            height: 120px;
+        }
+        
+        .rwr-ring-outer {
+            width: 180px;
+            height: 180px;
+        }
+        
+        /* RWR 중앙에 작은 원 추가 */
+        .rwr-center-dot {
+            position: absolute;
+            top: calc(50% + 4px); /* 4px 아래로 이동 */
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 4px;
+            height: 4px;
+            background: #00ff00;
+            border-radius: 50%;
+            z-index: 11;
+        }
+        
+        /* RWR 방향 표시 */
+        .rwr-direction-marks {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        
+        .rwr-direction-text {
+            position: absolute;
+            color: #0f0;
+            font-size: 12px;
+            font-weight: bold;
+            transform: translate(-50%, -50%);
+            text-shadow: 0 0 2px #0f0;
+        }
+        
+        .rwr-north {
+            top: 15px;
+            left: 50%;
+        }
+        
+        .rwr-east {
+            top: 50%;
+            right: 15px;
+            left: auto;
+            transform: translateY(-50%);
+        }
+        
+        .rwr-south {
+            bottom: 15px;
+            left: 50%;
+            top: auto;
+            transform: translateX(-50%);
+        }
+        
+        .rwr-west {
+            top: 50%;
+            left: 15px;
+        }
+        
+        /* RWR 위협 표시 */
+        .rwr-threat {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            font-size: 14px;
+            font-weight: bold;
+            z-index: 5;
+        }
+        
+        /* 위협 레벨별 색상 */
+        .rwr-threat.level-low {
+            color: #ffff00; /* 노란색 */
+            text-shadow: 0 0 3px #ffff00;
+        }
+        
+        .rwr-threat.level-medium {
+            color: #ff8800; /* 주황색 */
+            text-shadow: 0 0 3px #ff8800;
+        }
+        
+        .rwr-threat.level-high {
+            color: #ff0000; /* 빨간색 */
+            text-shadow: 0 0 3px #ff0000;
+        }
+        
+        .rwr-threat.missile-lock {
+            animation: rwr-flash 0.3s infinite;
+        }
+        
+        @keyframes rwr-flash {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0.3; }
+        }
       
         #mission {
             position: absolute;