기술 역량 카테고리 메뉴 상단 배치 및 간격 개선

- 카테고리 선택 메뉴를 상단 헤더 아래로 이동
- 카테고리 메뉴와 본문의 좌우 여백을 공통 기준으로 정렬
- 메뉴와 아이브로우 사이 여백 확대
- 제목, 부제, 본문의 간격과 줄간격 조정
- 자동 재생 제어 버튼은 하단 위치 유지
- 모바일 카테고리를 4열로 정렬하고 본문과 좌우 여백 통일

검증: git diff --check 통과. 브라우저 연결 제한으로 화면 검증은 수행하지 못함.

css/styles.css

@@ -791,12 +791,12 @@ p {
 
 .feature-content {
   position: absolute;
-  top: 108px;
-  left: clamp(56px, 7vw, 132px);
+  top: var(--capabilities-content-top);
+  left: var(--capabilities-gutter);
   z-index: 2;
   align-self: flex-start;
   width: min(720px, 54%);
-  max-height: calc(100dvh - 204px);
+  max-height: calc(100dvh - var(--capabilities-content-top) - 96px);
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
@@ -804,24 +804,24 @@ p {
 
 .feature-content h1 {
   max-width: 760px;
-  margin: 14px 0 8px;
+  margin: 18px 0 12px;
   font-size: 42px;
-  line-height: 1.16;
+  line-height: 1.2;
 }
 
 .feature-content p {
   white-space: pre-line;
   font-size: 15px;
-  line-height: 1.68;
+  line-height: 1.8;
 }
 
 .feature-content .feature-subtitle {
-  margin: 0 0 44px;
+  margin: 0 0 40px;
   max-width: 660px;
   color: rgba(255, 255, 255, .62);
   font-size: 16px;
   font-weight: 800;
-  line-height: 1.35;
+  line-height: 1.5;
   white-space: normal;
 }
 
@@ -981,16 +981,17 @@ p {
 .capabilities-toolbar {
   position: absolute;
   z-index: 2;
-  left: clamp(24px, 5vw, 72px);
-  right: clamp(24px, 5vw, 72px);
-  bottom: 28px;
+  left: var(--capabilities-gutter);
+  right: var(--capabilities-gutter);
+  top: 90px;
   display: flex;
   gap: 8px;
-  padding-top: 18px;
-  border-top: 1px solid rgba(255, 255, 255, .24);
+  padding-bottom: 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, .24);
 }
 
-.capabilities-toolbar button {
+.capabilities-toolbar button,
+.autoplay-toggle {
   min-width: 86px;
   min-height: 40px;
   padding: 0 16px;
@@ -1008,8 +1009,11 @@ p {
   font-weight: 800;
 }
 
-.capabilities-toolbar .autoplay-toggle {
-  margin-left: auto;
+.workbench-stage > .autoplay-toggle {
+  position: absolute;
+  z-index: 2;
+  right: clamp(24px, 5vw, 72px);
+  bottom: 28px;
   color: var(--text);
   background: rgba(255, 255, 255, .12);
 }
@@ -1080,6 +1084,8 @@ p {
 }
 
 .capabilities-workbench {
+  --capabilities-gutter: clamp(56px, 7vw, 132px);
+  --capabilities-content-top: 212px;
   position: fixed;
   inset: 0;
   height: 100dvh;
@@ -1096,7 +1102,7 @@ p {
   display: flex;
   align-items: center;
   overflow: hidden;
-  padding: 108px clamp(24px, 5vw, 72px) 96px clamp(56px, 7vw, 132px);
+  padding: var(--capabilities-content-top) var(--capabilities-gutter) 96px;
 }
 
 .project-dots {
@@ -2266,7 +2272,7 @@ html.has-site-dialog,
     display: none;
   }
 
-  .capabilities-toolbar .autoplay-toggle {
+  .workbench-stage > .autoplay-toggle {
     display: none;
   }
 
@@ -2747,6 +2753,7 @@ h1, h2, h3, p, a, button, label, span, strong, small, dt, dd, li, td, th {
   }
 
   .capabilities-body .capabilities-workbench {
+    --capabilities-gutter: 20px;
     position: fixed;
     inset: 72px 0 0;
     height: calc(100dvh - 72px);
@@ -2772,19 +2779,20 @@ h1, h2, h3, p, a, button, label, span, strong, small, dt, dd, li, td, th {
     min-height: 0;
     max-height: none;
     width: 100%;
-    padding: 24px 20px 84px;
+    padding: 32px var(--capabilities-gutter) 84px;
     overflow-y: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }
 
   .capabilities-body .feature-content h1 {
+    margin-top: 16px;
     font-size: 28px;
     line-height: 1.3;
   }
 
   .capabilities-body .feature-subtitle {
-    margin-bottom: 24px;
+    margin-bottom: 28px;
     font-size: 14px;
   }
 
@@ -2794,7 +2802,7 @@ h1, h2, h3, p, a, button, label, span, strong, small, dt, dd, li, td, th {
     min-width: 0;
     width: 100%;
     margin: 0;
-    padding: 24px 16px 84px;
+    padding: 32px var(--capabilities-gutter) 84px;
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -2837,9 +2845,9 @@ h1, h2, h3, p, a, button, label, span, strong, small, dt, dd, li, td, th {
     grid-row: 1;
     inset: auto;
     display: grid;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 4px;
-    padding: 10px 12px;
+    padding: 14px var(--capabilities-gutter);
     background: #101419;
     overflow: visible;
   }
@@ -2852,7 +2860,7 @@ h1, h2, h3, p, a, button, label, span, strong, small, dt, dd, li, td, th {
     border-radius: 4px;
   }
 
-  .capabilities-body .capabilities-toolbar .autoplay-toggle {
+  .capabilities-body .workbench-stage > .autoplay-toggle {
     display: none;
   }