feat: refine desktop layouts and data pages

src/routes/+layout.svelte

@@ -17,6 +17,11 @@
 <slot />
 
 <style>
+  :global(:root) {
+    --page-max-width: 1520px;
+    --page-gutter: clamp(40px, 5vw, 96px);
+  }
+
   :global(*) { box-sizing: border-box; }
   :global(body) { margin: 0; background: #101319; color: #e8ebf1; font-family: Pretendard, "Noto Sans KR", sans-serif; }
 
@@ -33,8 +38,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: min(1120px, calc(100% - 40px));
-    min-height: 58px;
+    width: min(var(--page-max-width), calc(100% - var(--page-gutter)));
+    min-height: 62px;
     margin: 0 auto;
   }
 
@@ -62,8 +67,9 @@
   a:focus-visible { outline: 3px solid rgb(239 139 182 / 28%); outline-offset: 2px; }
 
   @media (max-width: 560px) {
+    :global(:root) { --page-gutter: 24px; }
     .nav-inner { width: calc(100% - 24px); min-height: 54px; }
     .brand { font-size: 15px; }
-    nav a { padding: 7px 9px; font-size: 12px; }
+    nav a { padding: 7px 9px; font-size: 14px; }
   }
 </style>