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

- 카테고리 선택 메뉴를 상단 헤더 아래로 이동 - 카테고리 메뉴와 본문의 좌우 여백을 공통 기준으로 정렬 - 메뉴와 아이브로우 사이 여백 확대 - 제목, 부제, 본문의 간격과 줄간격 조정 - 자동 재생 제어 버튼은 하단 위치 유지 - 모바일 카테고리를 4열로 정렬하고 본문과 좌우 여백 통일 검증: git diff --check 통과. 브라우저 연결 제한으로 화면 검증은 수행하지 못함.
2026-09-29 15:17:58 +09:00
parent 484216b3e3
commit 51932269c7
2 changed files with 56 additions and 48 deletions
--- a/capabilities.html
+++ b/capabilities.html
@@ -74,6 +74,15 @@
            alt=""
            aria-hidden="true"
          />
+          <div class="capabilities-toolbar" aria-label="기술 역량 분류">
+            <button type="button" class="is-active" data-filter="automotive">
+              AUTOMOTIVE
+            </button>
+            <button type="button" data-filter="solution">SOLUTION</button>
+            <button type="button" data-filter="si">SI</button>
+            <button type="button" data-filter="robotics">ROBOTICS</button>
+            <!-- <button type="button" data-filter="certifications">PATENTS</button> -->
+          </div>
          <div class="feature-content">
            <p class="eyebrow" data-feature-category>Automotive</p>
            <h1 data-feature-title>전장 기술 역량</h1>
@@ -86,14 +95,6 @@
            </p>
          </div>
          <div class="feature-table-wrap" data-feature-table hidden></div>
-          <div class="capabilities-toolbar" aria-label="기술 역량 분류">
-            <button type="button" class="is-active" data-filter="automotive">
-              AUTOMOTIVE
-            </button>
-            <button type="button" data-filter="solution">SOLUTION</button>
-            <button type="button" data-filter="si">SI</button>
-            <button type="button" data-filter="robotics">ROBOTICS</button>
-            <!-- <button type="button" data-filter="certifications">PATENTS</button> -->
          <button
            type="button"
            class="autoplay-toggle"
@@ -110,7 +111,6 @@
            <span data-autoplay-label>멈춤</span>
          </button>
        </div>
-        </div>
        <nav
          class="project-dots"
          aria-label="프로젝트 목록"
--- a/css/styles.css
+++ b/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;
  }