Implement global table sorting, dashboard UI enhancements, and secret cloud access

src/styles/table.css

@@ -64,11 +64,14 @@
   background-color: var(--white);
   border-top: 1px solid var(--border-color);
   overflow: auto;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
 }
 
 table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   table-layout: auto;
 }
 
@@ -79,15 +82,21 @@ th, td {
   white-space: nowrap;
 }
 
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
 th {
-  background-color: #FAFAFA;
+  background-color: #FAFAFA !important;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
   position: sticky;
   top: 0;
-  z-index: 10;
-  box-shadow: inset 0 -1px 0 var(--border-color);
+  z-index: 50;
+  box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color); /* 상하 테두리 보정 */
   text-transform: none;
 }
 
@@ -123,3 +132,40 @@ tbody tr:hover {
   width: 16px;
   height: 16px;
 }
+
+/* --- Table Sorting --- */
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s;
+  position: relative;
+  padding-right: 1.8rem !important; /* 아이콘 공간 확보 */
+}
+
+th.sortable:hover {
+  background-color: #F3F4F6;
+  color: var(--primary-color);
+}
+
+th.sortable::after {
+  content: '↕';
+  position: absolute;
+  right: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 11px;
+  opacity: 0.3;
+  transition: all 0.2s;
+}
+
+th.sortable.asc::after {
+  content: '▲';
+  opacity: 1;
+  color: var(--primary-color);
+}
+
+th.sortable.desc::after {
+  content: '▼';
+  opacity: 1;
+  color: var(--primary-color);
+}