대시보드 UI 개선, 한글깨짐 처리.

WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp

@@ -481,10 +481,10 @@
         border-top: 2px solid #fd7e14;
     }
 
-    /* 서버 그리드 - 한 줄에 3개씩 표시 */
+    /* 서버 그리드 - 한 줄에 2개씩 표시 */
     .server-grid {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         gap: 0.75rem;
     }
 
@@ -521,83 +521,130 @@
 
     /* 메트릭 스타일 조정 */
     .server-metrics {
-        padding: 0.3rem 0;
+        padding: 0.5rem 0;
         display: flex;
         flex-direction: column;
         gap: 0.0rem;
+        border-top: 1px solid var(--color-gray-200);
+        border-bottom: 1px solid var(--color-gray-200);
     }
 
-    .metrics-row {
+    .metrics-row,
+    .sparklines-row {
         display: flex;
-        justify-content: space-between;
-        gap: 0.5rem;
+        justify-content: space-around;
+        gap: 0;
     }
 
     .sparklines-row {
-        display: flex;
-        justify-content: space-between;
-        gap: 0.5rem;
+        padding-top: 0.5rem;
     }
 
     .server-metric {
         flex: 1;
         min-width: 0; /* 오버플로우 방지 */
+        text-align: center;
+        padding: 0 0.5rem;
+        border-right: 1px solid var(--color-gray-200);
+    }
+
+    .server-metric:last-child {
+        border-right: none;
     }
 
     .metric-header {
         margin-bottom: 0.2rem;
         display: flex;
-        justify-content: flex-start;
-        align-items: center;
+        flex-direction: column; /* 아이콘과 값을 수직으로 정렬 */
+        justify-content: center; /* 수직 중앙 정렬 */
+        align-items: center; /* 수평 중앙 정렬 */
         white-space: nowrap;
         overflow: hidden;
     }
 
     .sparkline {
         flex: 1;
-        min-width: 0; /* 오버플로우 방지 */
+        min-width: 0;
+        padding: 0.25rem 0.5rem;
+        border-right: 1px solid var(--color-gray-200);
+    }
+
+    .sparkline:last-child {
+        border-right: none;
     }
 
     .metric-name {
         display: flex;
         align-items: center;
+        margin-bottom: 0.2rem; /* 아이콘과 값 사이 간격 조정 */
     }
 
     .metric-value {
-        margin-left: 0.5rem;
+        margin-left: 0; /* 이전 margin-left 제거 */
+        font-size: 1.1rem; /* 값 폰트 크기 약간 키움 */
+        font-weight: 600; /* 값 폰트 굵기 */
     }
 
     /* 인스턴스 테이블 스타일 */
     .server-instances {
-        padding: 0.3rem 0;
+        padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* 패딩 조정 */
         max-height: 120px;
     }
 
     .instance-table {
-        font-size: 0.8rem;
+        width: 100%; /* 테이블 전체 너비 */
+        font-size: 0.85rem; /* 폰트 크기 약간 키움 */
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    .instance-table th {
+        background-color: var(--color-gray-100); /* 헤더 배경색 */
+        font-weight: 600; /* 헤더 폰트 굵기 */
+        padding: 0.4rem 0.5rem; /* 헤더 패딩 조정 */
+        border-bottom: 1px solid var(--color-gray-200); /* 헤더 아래 보더 */
+        text-align: center; /* 모든 헤더 가운데 정렬 */
+        
+        width: 33.3333%; /* 인스턴스 th 각 영역 균등하게, 위쪽 요소와 맞춤 */
+        box-sizing: border-box;
     }
 
-    .instance-table th,
     .instance-table td {
-        padding: 0.2rem 0.3rem;
+        padding: 0.4rem 0.5rem; /* 셀 패딩 조정 */
         white-space: nowrap;
+        border-bottom: 1px solid var(--color-gray-100); /* 셀 아래 보더 */
+        vertical-align: middle;
+        text-align: center; /* 모든 셀 내용 가운데 정렬 */
+        white-space: nowrap;      /* 줄바꿈 방지 */
+        overflow: hidden;         /* 칸을 넘어가는 글자 숨김 */
+        text-overflow: ellipsis;  /* 넘어가는 글자를 ...으로 표시 */
+    }
+
+    .instance-table tbody tr:nth-child(odd) {
+        background-color: var(--color-gray-50); /* 홀수 행 배경색 */
+    }
+
+    .instance-table tbody tr:hover {
+        background-color: var(--color-gray-100); /* 호버 효과 */
     }
 
     /* 인스턴스 상태 점 스타일 */
     .instance-status {
         display: inline-block;
-        width: 8px;
-        height: 8px;
+        width: 10px; /* 크기 키움 */
+        height: 10px; /* 크기 키움 */
         border-radius: 50%;
-        margin-right: 4px;
+        margin-right: 6px; /* 간격 조정 */
+        vertical-align: middle; /* 텍스트와 세로 정렬 */
     }
 
-    /* 오류 상태일 때 인스턴스 ID 색상 변경 */
+    /* 오류 상태일 때 인스턴스 ID 색상 변경 - :has()는 구형 브라우저에서 문제를 일으킬 수 있어 주석 처리
     tr:has(.status-error) .instance-id,
     tr:has(.status-inactive) .instance-id {
         color: #dc3545;
         font-weight: 600;
     }
+    */
 </style>
 
 <script>