feat: strengthen design skill and refresh all showcases

apps/site/public/work/griddle-club/styles/tokens.css

@@ -9,6 +9,7 @@
   --line-strong: #8a8379;
   --blue: #2147e7;
   --blue-dark: #1533ac;
+  --blue-soft: #8ea5ff;
   --blue-pale: #dce4ff;
   --steel: #d9dcda;
   --cheese: #ffc642;
@@ -18,6 +19,12 @@
   --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
   --wrap: 1180px;
+  /* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
+  --hero-wide: 2160px;
+  --stage-wide: 1680px;
+  --workbench-wide: 1480px;
+  --copy-wide: 900px;
+  --media-wide: 1120px;
   --gutter: clamp(18px, 4vw, 52px);
   --section: clamp(76px, 10vw, 144px);
   --space-1: 4px;
@@ -41,3 +48,15 @@
     --section: 72px;
   }
 }
+
+@media (min-width: 120rem) {
+  :root {
+    --wrap: 1320px;
+  }
+}
+
+@media (min-width: 150rem) {
+  :root {
+    --wrap: 1400px;
+  }
+}