feat: strengthen design skill and refresh all showcases

apps/site/public/work/twentyoz-corp/design.md

@@ -0,0 +1,31 @@
+# TWENTYOZ — 2026-09-12 화면 보정 기록
+
+## 구도·타입·색 관찰
+
+- 기존 Amber 계열 현장 이미지와 짙은 잉크·적색 신호는 실제 기업의 시각 자산으로 보존한다.
+- 기준 첫 화면은 히어로가 과도하게 높아 현장 선택과 제품 상세 진입이 배경 이미지보다 늦게 읽힌다.
+- 현장 패널과 제품 원장은 값·라벨·본문 크기가 작고 열 정렬이 약해 기술·납품·성숙도 정보를 비교하기 어렵다.
+
+## 근거 확인 범위
+
+- `outputs/full-showcase-upgrade-20260912/screenshots/twentyoz-corp/1440x1000-first.png`
+- `index.html`, `products.html`, `styles/main.css`, `styles/catalog.css`
+- `twentyoz.kr/news/100`의 2026-02-24 표창, `twentyoz.kr/news/101`의 일자리 우수 인증, `twentyoz.kr/products/3`의 XD Hub(최대 100만 포인트·6 프로토콜), `twentyoz.kr/products/1`의 VIVEN(최대 100명·PC/VR/mobile) 공식 원문
+
+## 결정 / 기각 조건
+
+- 히어로를 약 640px로 제한하고, 네 현장 탭과 해당 제품 과업을 첫 화면의 주요 행동으로 둔다.
+- 패널과 제품 상세는 15px 본문, 1.6행간, 라벨·값 열을 고정해 비교 가능한 원장으로 강화한다.
+- 실제 기업 기록을 예시·가상 기업처럼 바꾸거나 Amber 정체성을 새로운 브랜드 언어로 대체하는 변경은 기각한다.
+
+## 토큰·규칙
+
+- 기존 `--signal`, `--surface`, `--ink`, `--space-*`, `--text-*` 토큰을 유지한다.
+- 현장 탭의 최소 높이와 focus 계약을 보존하며, `minmax(0, …)`로 320px·200% 확대에서 열을 수축한다.
+- `products.html`도 동일한 15px 본문과 라벨·값 열 규칙을 적용한다.
+
+## 2026-09-12 현재 검증 기록
+
+- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
+- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
+- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.

apps/site/public/work/twentyoz-corp/index.html

@@ -20,8 +20,8 @@
     <meta name="theme-color" content="#e9e7e2" media="(prefers-color-scheme: light)" />
 
     <link rel="preload" href="./assets/pretendard-twentyoz.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="stylesheet" href="./styles/tokens.css" />
-    <link rel="stylesheet" href="./styles/main.css" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
     <link
       rel="icon"
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23151616'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23F6F4EF' stroke-width='2'/%3E%3Cpath d='M16 5v22M5 16h22' stroke='%23B9362B'/%3E%3C/svg%3E"
@@ -232,7 +232,7 @@
           <div class="section-intro section-intro-wide">
             <p class="eyebrow">Product system · 04</p>
             <h2 id="productsHeading">한 번 납품하고 끝내지 않는 네 개의 시스템</h2>
-            <p>특정 고객의 요구에서 시작했지만, 지금도 각자의 개발 주기로 계속 고치고 있습니다.</p>
+            <p>특정 고객의 요구에서 시작했지만, 현장 요구와 운영 환경의 변화에 맞춰 계속 개선하고 있습니다.</p>
           </div>
 
           <ol class="product-list">

apps/site/public/work/twentyoz-corp/products.html

@@ -13,9 +13,9 @@
     <meta name="theme-color" content="#0d0f0f" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#e9e7e2" media="(prefers-color-scheme: light)" />
     <link rel="preload" href="./assets/pretendard-twentyoz.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="stylesheet" href="./styles/tokens.css" />
-    <link rel="stylesheet" href="./styles/main.css" />
-    <link rel="stylesheet" href="./styles/catalog.css" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/catalog.css?v=20260912all" />
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23151616'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23F6F4EF' stroke-width='2'/%3E%3Cpath d='M16 5v22M5 16h22' stroke='%23B9362B'/%3E%3C/svg%3E" />
   </head>
   <body class="catalog-page">

apps/site/public/work/twentyoz-corp/styles/catalog.css

@@ -277,6 +277,22 @@
   text-underline-offset: 0.2em;
 }
 
+/* 제품 원장은 현장 선택 패널과 같은 15px 본문·행간·열 정렬 규칙을 따른다. */
+.catalog-page .capability-list li,
+.catalog-page .spec-list div,
+.catalog-page .operation-flow span {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+
+.catalog-page .capability-list li {
+  grid-template-columns: 5rem minmax(10rem, 0.8fr) minmax(0, 1.2fr);
+}
+
+.catalog-page .spec-list div {
+  grid-template-columns: 7.5rem minmax(0, 1fr);
+}
+
 @media (max-width: 62rem) {
   .catalog-hero-grid,
   .specimen-heading,
@@ -318,6 +334,17 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .catalog-index,
+  .catalog-index a,
+  .vital-grid > *,
+  .operation-flow li {
+    min-width: 0;
+  }
+
+  .catalog-index a {
+    overflow-wrap: anywhere;
+  }
+
   .catalog-index a:nth-child(3),
   .vital-grid div:nth-child(3),
   .operation-flow li:nth-child(3) {

apps/site/public/work/twentyoz-corp/styles/main.css

@@ -6,7 +6,6 @@
 }
 
 html {
-  min-width: 20rem;
   scroll-behavior: smooth;
   background: var(--page);
   color: var(--ink);
@@ -1119,6 +1118,10 @@ button[hidden] {
   gap: var(--space-7);
 }
 
+.contact-grid > * {
+  min-width: 0;
+}
+
 .contact .eyebrow {
   margin-block-end: var(--space-4);
   color: var(--signal-ink);
@@ -1161,11 +1164,18 @@ button[hidden] {
   font-size: var(--text-sm);
 }
 
+.contact-list div > *,
+.contact-list dd {
+  min-width: 0;
+}
+
 .contact-list dt {
   color: inherit;
 }
 
 .contact-list a {
+  max-width: 100%;
+  overflow-wrap: anywhere;
   text-underline-offset: var(--space-1);
 }
 
@@ -1281,12 +1291,15 @@ button[hidden] {
 
   .nav {
     width: 100%;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: flex-start;
     gap: var(--space-2);
   }
 
   .nav a {
+    min-width: 0;
     min-height: var(--control-min);
+    flex: 1 1 5rem;
   }
 
   .hero {
@@ -1324,7 +1337,7 @@ button[hidden] {
   .hero-copy h1 {
     max-width: none;
     font-size: clamp(1.75rem, 8.8vw, 2.35rem);
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .hero-lead {
@@ -1346,7 +1359,7 @@ button[hidden] {
     align-items: flex-start;
     justify-content: center;
     gap: 0;
-    padding: var(--space-2);
+    padding: var(--space-2) calc(var(--space-2) + 2px);
   }
 
   .field-radio {
@@ -1361,6 +1374,10 @@ button[hidden] {
     display: block;
     max-width: 100%;
     font-size: var(--text-xs);
+    overflow: visible;
+    overflow-wrap: anywhere;
+    text-overflow: clip;
+    white-space: normal;
   }
 
   .tab-num {
@@ -1384,6 +1401,11 @@ button[hidden] {
     display: none;
   }
 
+  .sr-only {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+
   .panel-facts div {
     grid-template-columns: 4rem minmax(0, 1fr);
   }
@@ -1465,7 +1487,7 @@ button[hidden] {
 
   .ledger th,
   .ledger td {
-    padding: 0;
+    padding: 0 var(--space-2);
     border: 0;
   }
 
@@ -1483,8 +1505,9 @@ button[hidden] {
   .ledger td:nth-child(3) {
     position: absolute;
     inset-block-start: var(--space-4);
-    inset-inline-end: 0;
+    inset-inline-end: var(--space-2);
     width: auto;
+    padding-inline: 0;
     font-size: var(--text-xs);
   }
 
@@ -1582,6 +1605,68 @@ button[hidden] {
   }
 }
 
+/* 현장 선택은 히어로의 보조 장식이 아니라 제품 상세로 이어지는 첫 과업이다. */
+@media (min-width: 43.0625rem) {
+  .hero,
+  .hero-grid {
+    min-height: 40rem;
+  }
+
+  .hero-grid {
+    padding-block: calc(var(--header-h) + var(--space-5)) var(--space-3);
+    gap: var(--space-3);
+  }
+
+  .hero-copy {
+    align-self: start;
+    max-width: 42rem;
+    padding-block: var(--space-3);
+  }
+
+  .hero-copy h1 {
+    font-size: clamp(2.45rem, 4vw, 4.1rem);
+  }
+
+  .hero-lead {
+    margin-block-start: var(--space-3);
+    font-size: 0.9375rem;
+    line-height: 1.65;
+  }
+
+  .hero-actions {
+    margin-block-start: var(--space-3);
+  }
+
+  .field-tabs label {
+    min-height: calc(var(--control-min) + var(--space-3));
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .field-panels {
+    min-height: 10.5rem;
+    margin-block-end: 0;
+  }
+
+  .field-panel {
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(7rem, 0.55fr);
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .panel-what,
+  .panel-facts div,
+  .product-meta div {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+  }
+
+  .panel-facts div,
+  .product-meta div {
+    grid-template-columns: 5.5rem minmax(0, 1fr);
+    padding-block: var(--space-2);
+  }
+}
+
 @media print {
   .site-head,
   .motion-toggle,

apps/site/public/work/twentyoz-corp/styles/tokens.css

@@ -100,6 +100,20 @@
   --stagger: 60ms;
 }
 
+/* 초광폭에서는 현장 선택기와 기록 표가 지나치게 중앙에 몰리지 않게 한다.
+   카피와 코어의 별도 폭 제한은 유지한다. */
+@media (min-width: 120rem) {
+  :root {
+    --wide: 96rem;
+  }
+}
+
+@media (min-width: 150rem) {
+  :root {
+    --wide: 102rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --page: #0d0f0f;