feat: strengthen design skill and refresh all showcases

2026-09-12 18:16:33 +09:00 · 2026-09-12 18:16:33 +09:00 · e09d4efb1c
commit e09d4efb1c
parent 69e5cc1efd
257 changed files with 8196 additions and 2374 deletions
--- a/apps/site/public/work/pulsegate/design.md
+++ b/apps/site/public/work/pulsegate/design.md
@ -0,0 +1,27 @@
+# Pulsegate design.md
+
+## 브리프
+
+- 무엇을: 분산 엣지 확인과 보고 필드를 보여 주는 가상 모니터링 워크플로.
+- 누구에게: 예시 프레임의 시간·단위·위치·응답값을 비교하려는 방문자.
+- 제약: 실제 probe·계정 생성이 없다는 표기와 기존 값·단위·원장형 정렬을 유지한다.
+
+## 결정표
+
+| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+|---|---|---|---|
+| 구도 | 기준 화면에서 명령과 제한 설명이 분산되고 히어로 하단 빈 면이 컸다. | 명령과 설명을 하나의 왼쪽 경계 군집으로 묶고 히어로 하단 간격을 줄인다. `--space-5`, `--space-6`, `--accent-stroke`. | 군집 경계가 코드 스크롤이나 제한 문구를 가리면 제거한다. |
+| 타입 | 시간·단위와 위치 행이 차트보다 약하면 값의 해석 범위가 흐려진다. | 머리말·행을 `--step--1`, 값은 `--font-mono` tabular 정렬로 유지한다. | 320px/200%에서 값 열이 잘리면 의도된 표 스크롤을 유지하고 행을 축소하지 않는다. |
+| 색 | 선택된 시계열과 보조 시계열이 같은 위계로 읽혔다. | `--accent-stroke` 선택선, `--ink-muted` 보조선, `--ink-faint` 먼 선으로 역할을 분리한다. | 코발트가 실제 서비스 상태·알람으로 오해되거나 단위보다 강하면 선 대비를 낮춘다. |
+
+## 근거와 경계
+
+[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 군집·정렬 관찰은 명령/설명과 수치 원장을 묶는 데만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 숫자·긴 라벨 proof는 표와 instrument 행에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 맥락색 관찰은 cobalt 선택선과 보조선 대비에만 적용했다. 원전은 판독 속도나 제품 성과 법칙으로 사용하지 않는다.
+
+[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 illustrative latency frame, 시간·단위 설명, 실제 probe 부재 표기를 각 값·행동 가까이에 유지한다.
+
+## 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이다.
+- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
--- a/apps/site/public/work/pulsegate/index.html
+++ b/apps/site/public/work/pulsegate/index.html
@ -3,15 +3,15 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Pulsegate · Edge Latency &amp; Synthetic Probe Engine</title>
+    <title>Pulsegate · Edge Monitoring Workflow</title>
    <meta
      name="description"
-      content="Synthetic HTTP/gRPC assertions every ten seconds from bare-metal edge POPs. No agents, no sidecars. Prometheus and OpenTelemetry export."
+      content="An illustrative workflow for checking an endpoint from distributed edge locations. It does not create probes or provide a live service."
    />
-    <meta property="og:title" content="Pulsegate · Edge Latency &amp; Synthetic Probe Engine" />
+    <meta property="og:title" content="Pulsegate · Edge Monitoring Workflow" />
    <meta
      property="og:description"
-      content="Synthetic assertions from 28 bare-metal edge POPs. A probe is watching within 90 seconds."
+      content="An illustrative edge-monitoring flow with endpoints, locations, and reporting fields."
    />
    <meta property="og:type" content="website" />
    <meta name="theme-color" content="#0B0E12" />
@ -22,7 +22,7 @@
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
    />
-    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%230B0E12'/%3E%3Cpath d='M6 17h6l3-8 4 14 3-6h4' fill='none' stroke='%236CA3EE' stroke-width='2'/%3E%3C/svg%3E"
@ -44,49 +44,57 @@
    </header>

    <main id="main">
-      <!--
-        Hero. Grayscale hierarchy per research: h1 (1) → primary CTA (2) → command (3).
-        Cobalt exists only as text and chart ink — never as a fill or a glow.
-        The instrument on the right is a static frame: no pulsing dots, no live pretence.
-      -->
      <section class="hero" aria-labelledby="hero-h">
        <div class="wrap hero-grid">
          <div class="hero-text">
            <h1 id="hero-h" class="reveal">
-              A probe is watching<br />within 90&nbsp;seconds
+              Understand an edge<br />check at a glance
            </h1>
            <p class="lead reveal" style="--delay: 80ms">
-              Synthetic HTTP and gRPC assertions, executed every ten seconds from
-              bare-metal POPs in 28 transit centers. No agents on your fleet, no
-              sidecars to babysit — the first probe is running before you finish
-              reading this page.
+              This page illustrates how one endpoint can be checked from several
+              edge locations and reported with the same fields. Locations,
+              timings, plans, and results are examples; no probe runs from this page.
            </p>
+            <dl class="probe-proof reveal" style="--delay: 110ms">
+              <div>
+                <dt>example endpoint</dt>
+                <dd><code>GET /health</code></dd>
+              </div>
+              <div>
+                <dt>example origin</dt>
+                <dd>Seoul</dd>
+              </div>
+              <div>
+                <dt>example cadence</dt>
+                <dd>10 s · 28 locations</dd>
+              </div>
+            </dl>
            <div class="hero-actions reveal" style="--delay: 140ms">
-              <a class="btn btn-primary" href="#pricing">Start with 3 free probes</a>
-              <a class="link-quiet" href="#wiring">See how it is wired</a>
+              <a class="btn btn-primary" href="#pricing">View example plans</a>
+              <a class="link-quiet" href="#wiring">See the check flow</a>
            </div>
-            <div class="command reveal" style="--delay: 200ms">
-              <span class="command-prompt" aria-hidden="true">$</span>
-              <code>curl -sL https://pulsegate.io/init | sh</code>
+            <div class="workflow-command">
+              <div class="command reveal" style="--delay: 200ms">
+                <span class="command-prompt" aria-hidden="true">$</span>
+                <code>GET /health → inspect the response</code>
+              </div>
+              <p class="hero-note reveal" style="--delay: 240ms">
+                Illustrative workflow only — this page does not create an account,
+                run a check, or collect a destination URL.
+              </p>
            </div>
-            <p class="hero-note reveal" style="--delay: 240ms">
-              90 seconds: measured from <code>init</code> to first assertion on a
-              cold account, 2026-08-20.
-            </p>
          </div>

-          <!-- Instrument: static 24h frame. Cobalt = one series only. -->
          <figure class="instrument reveal" style="--delay: 160ms">
            <figcaption class="instrument-head">
-              <span>EDGE LATENCY · P99 · LAST 24H</span>
-              <span>10s interval</span>
+              <span>ILLUSTRATIVE LATENCY FRAME · P99 · 24H</span>
+              <span>example 10s interval</span>
            </figcaption>
            <svg
              viewBox="0 0 560 264"
              role="img"
-              aria-label="24-hour p99 latency chart. Seoul stays under 16 ms, Tokyo under 34 ms, Frankfurt sits near 140 ms with one spike to 210 ms at 06:40 UTC."
+              aria-label="Illustrative 24-hour p99 latency chart with example locations and timings; it is not live monitoring data."
            >
-              <!-- hour grid -->
              <g class="chart-grid">
                <line x1="0" y1="8" x2="560" y2="8" />
                <line x1="0" y1="70" x2="560" y2="70" />
@ -101,23 +109,20 @@
                <line x1="420" y1="0" x2="420" y2="264" />
                <line x1="490" y1="0" x2="490" y2="264" />
              </g>
-              <!-- series: FRA (faint, high) — 140ms band with 06:40 spike -->
              <polyline
                class="series series-faint"
                points="0,96 35,94 70,97 105,92 140,95 175,93 205,88 210,74 215,60 220,74 225,90 260,95 280,93 315,96 350,94 385,97 420,93 455,96 490,94 525,97 560,95"
              />
-              <!-- series: NRT (muted, low-mid) -->
              <polyline
                class="series series-muted"
                points="0,224 35,222 70,225 105,221 140,224 175,223 210,226 245,222 280,224 315,223 350,226 385,222 420,225 455,223 490,226 525,223 560,225"
              />
-              <!-- series: ICN (cobalt, lowest) -->
              <polyline
                class="series series-accent"
                points="0,243 35,242 70,244 105,242 140,243 175,244 210,242 245,243 280,244 315,242 350,243 385,244 420,243 455,242 490,244 525,243 560,243"
              />
            </svg>
-            <div class="instrument-rows" role="group" aria-label="POP readings, p99 over 24 hours">
+            <div class="instrument-rows" role="group" aria-label="Illustrative location readings, p99 over one example frame">
              <div><span>ICN-01 · Seoul</span><span class="num">14.2 ms</span></div>
              <div><span>NRT-02 · Tokyo</span><span class="num">28.6 ms</span></div>
              <div><span>SIN-01 · Singapore</span><span class="num">34.0 ms</span></div>
@ -129,30 +134,22 @@
        </div>
      </section>

-      <!--
-        Wiring — the one scroll-motion detail (R3): a circuit trace that draws
-        itself as it enters the viewport. CSS animation-timeline, Chromium-gated;
-        every other browser (and reduced-motion) gets the fully drawn diagram.
-        Structure is the argument: probes → assertions → your telemetry.
-      -->
      <section id="wiring" class="section" aria-labelledby="wiring-h">
        <div class="wrap">
-          <h2 id="wiring-h" class="reveal">How it is wired</h2>
+          <h2 id="wiring-h" class="reveal">How an edge check is mapped</h2>
          <p class="lead reveal" style="--delay: 80ms">
-            Probes run from physical tier-1 transit facilities, not shared cloud
-            VPCs, so what you measure is the network your users ride — not cloud
-            peering bias. One trace, three stations.
+            The diagram separates an endpoint, distributed checking locations,
+            and the metrics returned to a monitoring system. It is a conceptual
+            route, not a map of operating facilities.
          </p>
        </div>

        <div class="wrap wiring-diagram reveal" style="--delay: 120ms">
-          <svg viewBox="0 0 1120 220" role="img" aria-label="Wiring diagram: 28 POPs run assertions, the engine evaluates them, results export to Prometheus and OpenTelemetry.">
-            <!-- drawn trace: POPs → engine → export -->
+          <svg viewBox="0 0 1120 220" role="img" aria-label="Illustrative workflow diagram: locations check an endpoint, an engine evaluates responses, and fields flow to a monitoring system.">
            <path
              class="trace"
              d="M 40 60 H 300 M 40 110 H 300 M 40 160 H 300 M 300 110 H 470 M 650 110 H 820 M 820 60 V 160 M 820 60 H 1010 M 820 160 H 1010"
            />
-            <!-- station 1: POPs -->
            <g class="station">
              <rect x="40" y="44" width="14" height="14" />
              <rect x="40" y="94" width="14" height="14" />
@ -161,20 +158,17 @@
              <text x="66" y="105">FRA · LHR · AMS …</text>
              <text x="66" y="155">SJC · IAD · ORD …</text>
            </g>
-            <!-- station 2: engine -->
            <g class="station">
              <rect x="470" y="88" width="180" height="44" />
              <text x="478" y="106">assertion engine</text>
              <text x="478" y="124" class="mono-note">http · grpc · tcp · dns</text>
            </g>
-            <!-- station 3: export -->
            <g class="station">
              <rect x="1010" y="46" width="70" height="26" />
              <rect x="1010" y="146" width="70" height="26" />
              <text x="1006" y="38" text-anchor="end">Prometheus</text>
              <text x="1006" y="192" text-anchor="end">OpenTelemetry</text>
            </g>
-            <!-- flow labels -->
            <g class="flow-label">
              <text x="310" y="100">every 10 s</text>
              <text x="660" y="100">p50 · p99 · jitter</text>
@ -184,44 +178,40 @@

        <div class="wrap wiring-notes">
          <div class="wiring-note reveal">
-            <h3>Bare-metal, not lambdas</h3>
+            <h3>Check from the edge</h3>
            <p>
-              Probes live in tier-1 transit facilities. The RTT you see is the
-              RTT your users get.
+              A useful check identifies where it ran and which part of the
+              response was measured, so results can be compared fairly.
            </p>
          </div>
          <div class="wiring-note reveal" style="--delay: 80ms">
-            <h3>Assertions, not pings</h3>
+            <h3>Check the response, not only reachability</h3>
            <p>
-              JSONPath body checks, gRPC status codes, TLS certificate expiry —
-              a check fails when your product fails, not when a packet does.
+              A useful workflow can compare response content, status, certificate
+              expiry, and timing instead of treating a reachable address as success.
            </p>
          </div>
          <div class="wiring-note reveal" style="--delay: 160ms">
-            <h3>Your telemetry, your tools</h3>
+            <h3>Keep the reporting fields consistent</h3>
            <p>
-              Export to the Prometheus and OpenTelemetry you already run. No
-              dashboard to live in, no lock-in to migrate off.
+              The example keeps endpoint, location, time, and response fields
+              together so they can be handed to an existing monitoring workflow.
            </p>
          </div>
        </div>
      </section>

-      <!--
-        Numbers — the trust band. Every value carries its measurement condition.
-        No invented scale claims: these are the engine's own telemetry frame.
-      -->
      <section id="numbers" class="section band" aria-labelledby="numbers-h">
        <div class="wrap">
-          <h2 id="numbers-h" class="reveal">One frame, all 28 POPs</h2>
+          <h2 id="numbers-h" class="reveal">One example frame, many locations</h2>
          <p class="lead reveal" style="--delay: 80ms">
-            A single assertion — <code>GET /health</code> against a Seoul origin —
-            fanned out to every POP at the same instant.
+            This table shows how an endpoint, DNS, TLS, response time, and a
+            percentile can be read together. Its values and locations are illustrative.
          </p>
          <div class="table-wrap reveal" style="--delay: 120ms">
            <table>
              <caption class="sr-only">
-                Per-POP readings for one assertion: DNS, TLS, TTFB and p99 over 24 hours
+                Illustrative location readings: DNS, TLS, TTFB, and p99 over one example frame
              </caption>
              <thead>
                <tr>
@ -240,50 +230,45 @@
                <tr><th scope="row">SJC-04</th><td>San Jose</td><td class="num">3.0</td><td class="num">9.6</td><td class="num">88.4</td><td class="num">94.7</td></tr>
                <tr><th scope="row">LHR-02</th><td>London</td><td class="num">4.0</td><td class="num">11.2</td><td class="num">126.8</td><td class="num">133.0</td></tr>
                <tr><th scope="row">FRA-01</th><td>Frankfurt</td><td class="num">4.2</td><td class="num">11.8</td><td class="num">142.1</td><td class="num">151.8</td></tr>
-                <tr class="row-more"><td colspan="6">…22 more POPs in the console — same frame, same instant</td></tr>
+                <tr class="row-more"><td colspan="6">…22 more illustrative locations in the same example frame</td></tr>
              </tbody>
            </table>
          </div>
          <p class="measure-note reveal" style="--delay: 160ms">
-            Measured 2026-08-20 14:00 UTC · 10 s interval · n = 8,640 per POP ·
-            milliseconds, median of the hour shown for DNS/TLS/TTFB.
+            Illustrative 24-hour frame · 10 s example interval · milliseconds shown
+            for DNS, TLS, TTFB, and p99.
          </p>
        </div>
      </section>

-      <!--
-        Pricing — two quiet rows, not three columns with a badge.
-        (research: the 3-column + "most popular" template is the highest-recurrence
-        slop pattern in this category — we don't run it)
-      -->
      <section id="pricing" class="section" aria-labelledby="pricing-h">
        <div class="wrap pricing-grid">
          <div class="pricing-text">
-            <h2 id="pricing-h" class="reveal">Priced per probe,<br />not per seat</h2>
+          <h2 id="pricing-h" class="reveal">Example plan structure</h2>
            <p class="lead reveal" style="--delay: 80ms">
-              A probe costs the same whether three engineers or thirty look at
-              the console. Downgrade, pause, or delete from the CLI.
+            These rows show how interval, retention, and export options can be
+            compared. They are not offers, prices, or an account signup flow.
            </p>
          </div>
          <div class="pricing-rows reveal" style="--delay: 120ms">
            <div class="price-row">
              <div>
-                <h3>Free</h3>
+                <h3>Example Free</h3>
                <p>3 probes · 60 s interval · 7-day retention</p>
              </div>
              <div class="price-val">
-                <span>$0</span>
-                <a class="btn btn-primary" href="#main">Create account</a>
+                <span>Example $0</span>
+                <a class="btn btn-primary" href="#pricing">View the example</a>
              </div>
            </div>
            <div class="price-row">
              <div>
-                <h3>Pro</h3>
+                <h3>Example Pro</h3>
                <p>Unlimited probes · 10 s interval · 13-month retention · OTel export</p>
              </div>
              <div class="price-val">
-                <span>$0.40 <em>per probe-month</em></span>
-                <a class="link-quiet" href="#main">Start free, upgrade inside</a>
+                <span>Example $0.40 <em>per probe-month</em></span>
+                <a class="link-quiet" href="#pricing">Example only</a>
              </div>
            </div>
          </div>
@ -293,14 +278,12 @@

    <footer class="site-foot">
      <div class="wrap foot-inner">
-        <p>pulsegate — distributed edge telemetry</p>
-        <p class="foot-meta">status: 28/28 POPs reporting · exporter protocol v2.4</p>
+        <p>pulsegate — illustrative edge-monitoring workflow</p>
+        <p class="foot-meta">no live probes, accounts, prices, or operating locations</p>
      </div>
    </footer>

    <script>
-      /* Reveal only — same grammar as the rest of the studio's work.
-         No scroll listeners, no fake "live" loops: a static frame is honest. */
      const io = new IntersectionObserver(
        (entries) => {
          for (const e of entries) {
--- a/apps/site/public/work/pulsegate/styles/main.css
+++ b/apps/site/public/work/pulsegate/styles/main.css
@ -1,4 +1,4 @@
-@import url("./tokens.css");
+@import url("./tokens.css?v=20260912all");

 /* ==========================================================================
   Pulsegate — dark-instrument. 명도차로만 읽히는 계기판.
@ -152,7 +152,7 @@ a {
 /* ── 히어로 ───────────────────────────────────────────────────────────── */

 .hero {
-  padding-block: var(--space-8) var(--space-7);
+  padding-block: clamp(4rem, 3rem + 5vw, 7rem) var(--space-6);
 }
 .hero-grid {
  display: grid;
@ -163,6 +163,34 @@ a {
 .hero-text .lead {
  margin-top: var(--space-4);
 }
+.probe-proof {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+  padding: var(--space-3) 0;
+  border-block: 1px solid var(--line);
+}
+.probe-proof > div {
+  min-width: 0;
+}
+.probe-proof dt,
+.probe-proof dd {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+}
+.probe-proof dt {
+  color: var(--ink-faint);
+}
+.probe-proof dd {
+  margin-top: 0.2rem;
+  color: var(--ink-muted);
+  overflow-wrap: anywhere;
+}
+.probe-proof code {
+  color: var(--accent);
+}
 .hero-actions {
  margin-top: var(--space-5);
  display: flex;
@ -172,7 +200,9 @@ a {
 }

 .btn-primary {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
  background: var(--ink);
  color: var(--accent-ink);
  font-weight: 500;
@ -200,7 +230,6 @@ a {
 }

 .command {
-  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
@ -223,16 +252,23 @@ a {
  white-space: nowrap;
  scrollbar-width: thin;
 }
+.workflow-command {
+  margin-top: var(--space-5);
+  max-width: 30rem;
+  border-left: 2px solid var(--accent-stroke);
+  padding-left: var(--space-3);
+}
 .hero-note {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-faint);
-  max-width: 34rem;
+  max-width: 30rem;
 }

 /* ── 계기(정적 프레임) ─────────────────────────────────────────────────── */

 .instrument {
+  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: var(--surface-raised);
@ -240,21 +276,26 @@ a {
 }
 .instrument-head {
  display: flex;
+  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
-  font-size: 0.6875rem;
+  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
 }
+.instrument-head > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .instrument svg {
  display: block;
  width: 100%;
  height: auto;
 }
 .chart-grid line {
-  stroke: var(--line);
+  stroke: color-mix(in srgb, var(--line) 68%, transparent);
  stroke-width: 1;
 }
 .chart-grid .chart-axis {
@ -262,17 +303,20 @@ a {
 }
 .series {
  fill: none;
-  stroke-width: 1.25;
+  stroke-width: 1.4;
  stroke-linejoin: round;
 }
 .series-faint {
-  stroke: var(--line-strong);
+  stroke: var(--ink-faint);
+  opacity: 0.62;
 }
 .series-muted {
-  stroke: var(--ink-faint);
+  stroke: var(--ink-muted);
+  opacity: 0.82;
 }
 .series-accent {
  stroke: var(--accent-stroke);
+  stroke-width: 2.1;
 }
 .instrument-rows {
  margin-top: var(--space-3);
@ -285,12 +329,16 @@ a {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
-  color: var(--ink-muted);
+  color: var(--ink);
+}
+.instrument-rows > div > span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
-  color: var(--ink);
+  color: var(--accent);
 }

 /* ── 섹션 공통 ────────────────────────────────────────────────────────── */
@ -367,7 +415,7 @@ a {
 .wiring-notes {
  margin-top: var(--space-5);
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-5) var(--space-6);
 }
 .wiring-note h3 {
@ -528,6 +576,12 @@ td.num {
    padding-block: var(--space-6);
  }
 }
+@media (max-width: 640px) {
+  .probe-proof {
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+  }
+}
@media (max-width: 560px) {
  .head-inner {
    flex-direction: column;
--- a/apps/site/public/work/pulsegate/styles/tokens.css
+++ b/apps/site/public/work/pulsegate/styles/tokens.css
@ -16,7 +16,7 @@
  --step-0: 1rem;                                     /* 16px — 본문 */
  --step-1: 1.1875rem;                                /* 19px — 소제목 */
  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 28px — 섹션 표제 */
-  --step-3: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);  /* 60px — 디스플레이 */
+  --step-3: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); /* 52px — 두 줄 계약 */

  --leading-tight: 1.22;
  --leading-normal: 1.7;
@ -53,9 +53,9 @@
  --radius: 2px;
  --radius-frame: 6px;

-  --container: 1120px;
+  --container: 1240px;
  --container-narrow: 640px;
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);

  --dur-quick: 160ms;
  --dur-normal: 420ms;