feat: refine desktop layouts and data pages

src/routes/+page.svelte

@@ -623,7 +623,7 @@
   }
 
   main {
-    width: min(1120px, calc(100% - 40px));
+    width: min(var(--page-max-width), calc(100% - var(--page-gutter)));
     margin: 0 auto;
     padding: 36px 0 80px;
   }
@@ -717,7 +717,7 @@
     color: #566074;
     background: #fff;
     font: inherit;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
@@ -764,7 +764,7 @@
     margin-bottom: 10px;
     padding: 0;
     color: #737d90;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 750;
   }
 
@@ -821,7 +821,7 @@
     border-radius: 6px;
     color: transparent;
     background: #fff;
-    font-size: 11px;
+    font-size: 13px;
     line-height: 1;
   }
 
@@ -848,7 +848,7 @@
   .list-header,
   .card-summary {
     display: grid;
-    grid-template-columns: 72px 84px 150px minmax(0, 1fr) 116px 36px;
+    grid-template-columns: clamp(72px, 5vw, 88px) clamp(84px, 6vw, 104px) clamp(150px, 11vw, 184px) minmax(280px, 1fr) clamp(116px, 9vw, 144px) 40px;
     align-items: center;
   }
 
@@ -978,7 +978,7 @@
     color: #7a8394;
     background: transparent;
     font: inherit;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 750;
     line-height: 1;
     cursor: pointer;
@@ -1023,7 +1023,7 @@
     place-items: center;
     border-radius: 8px;
     color: #fff;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 850;
   }
 
@@ -1039,7 +1039,7 @@
     border-radius: 999px;
     color: #3165c9;
     background: #edf3ff;
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 850;
   }
 
@@ -1097,7 +1097,7 @@
 
   .skill-spec dt {
     color: #7b8495;
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 700;
   }
 
@@ -1133,7 +1133,7 @@
   .effect-label {
     margin: 0 0 4px;
     color: #8a93a4;
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 800;
   }
 
@@ -1311,7 +1311,7 @@
     border-radius: 999px;
     color: #287f91;
     background: #e8f8fb;
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 800;
   }
 
@@ -1589,6 +1589,13 @@
     color: #778193;
   }
 
+  @media (max-width: 1100px) {
+    .list-header,
+    .card-summary {
+      grid-template-columns: 72px 84px 150px minmax(0, 1fr) 116px 36px;
+    }
+  }
+
   @media (max-width: 680px) {
     main {
       width: min(100% - 24px, 1120px);
@@ -1661,7 +1668,7 @@
       display: block;
       margin-bottom: 7px;
       color: #9299a8;
-      font-size: 11px;
+      font-size: 13px;
       font-weight: 700;
     }