8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
100 lines
5.1 KiB
CSS
100 lines
5.1 KiB
CSS
/* ==========================================================================
|
||
RFS — Realtime Fluid Simulator · 디자인 토큰 SSOT (2026-10-06 재작업)
|
||
|
||
컨셉 : 계기판 — 해석 캔버스와 제어 패널이 첫 화면의 주인이고, 표제는 작다.
|
||
페이지는 밝은 쿨 바탕 한 체제다. 어두운 면은 캔버스 화면(.hero-stage) 하나뿐이다.
|
||
이전 판의 "암실/사양서" 띠 교대(어두운 띠 4 + 밝은 띠 4)는 없앴다 —
|
||
쇼케이스 19종 계측에서 띠 교대·Pretendard·IBM Plex Mono·큰 고지 푸터가
|
||
saebyeok-cheonggwa 와 0.887 로 묶였기 때문이다(outputs/rework-2026-10-06/plan.md).
|
||
|
||
── 레퍼런스 실측 (2026-10-06, 1440×900 playwright)
|
||
R1′ 구도 · windy.com — 지도 캔버스 1440×900 이 첫 화면 전부. h1 없음.
|
||
제어는 가장자리 패널(왼쪽 위 검색·예보 390px 폭, 오른쪽 레이어 버튼 세로 열,
|
||
아래 시간축 띠 + 범례 kt 0~60). radius 0 이 384 : 83 으로 지배.
|
||
→ 가져온 것: 제어를 캔버스 옆 세로 열에, 범례·캡션을 캔버스 아래 띠에 둔다
|
||
→ 안 가져온 것: 전폭 오버레이(캔버스 위 글자는 어두운 스크림이 필요해 띠가 되살아난다)
|
||
R1′ 구도 · earth.nullschool.net — 캔버스 1440×900, h1 "earth" 18px 좌하단,
|
||
배경 #000005, radius 0 455 : 312.
|
||
→ 가져온 것: 표제는 도구 옆에 작게(18~22px)
|
||
R1 푸터 · luminary.ai / flexcompute.com / simscale.com (텍스트 페처) — 셋 다 5열 색인 푸터
|
||
(Platform·Resources·Industries·Company·Developers 등). → 다열 색인 형태의 근거
|
||
R2 톤 · 제품 실물 렌더(assets/sph-*.webp) — 어두운 바탕 위 시안→초록 입자.
|
||
캔버스 화면만 어둡게 두는 이유다. 온도 램프는 실물 렌더의 색 언어를 따른다.
|
||
|
||
── 강조색 246° (유지)
|
||
246° 는 tools/similarity.mjs 가 재는 LCh hue 다 — 이전 판의 계기 청색 #2a6b8a 가 바로 246° 다.
|
||
plan.md 의 "246° 청(유지)" 대로 값을 그대로 쓴다(출발점은 제품 에디터 테마 #3b82f6 에서
|
||
채도를 낮추고 청록 쪽으로 튼 것). 흰 글자 5.88:1, 바탕 #f3f6f8 위 글자로 5.42:1.
|
||
========================================================================== */
|
||
|
||
:root {
|
||
/* ── 타이포그래피 — 5단계. 표제가 작으므로 디스플레이 단계가 없다 ── */
|
||
--step--1: 0.8125rem; /* 13px — 라벨·캡션·표 머리 */
|
||
--step-0: 1rem; /* 16px — 본문 (한글 하한) */
|
||
--step-1: 1.1875rem; /* 19px — 리드·h3 */
|
||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 22 → 28px — h1(작게)·h2 */
|
||
--step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); /* 28 → 40px — 큰 수치 하나 */
|
||
/* 최대 ÷ 본문 = 40 ÷ 16 = 2.5배. 표제가 아니라 캔버스가 크기를 맡는다 */
|
||
|
||
--leading-tight: 1.3; /* 한글 제목 1.2~1.35 */
|
||
--leading-normal: 1.7;
|
||
--leading-loose: 1.85;
|
||
--measure: 36em;
|
||
|
||
/* 표제·본문 모두 Spoqa Han Sans Neo(OFL, jsdelivr spoqa/spoqa-han-sans). 모노 없음 —
|
||
한글이 섞이는 라벨을 모노에 두면 글자가 흩어진다. 숫자는 tabular-nums 로 정렬한다 */
|
||
--font-body: "Spoqa Han Sans Neo", -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||
--weight-strong: 700;
|
||
|
||
/* ── 색 · 밝음·쿨 한 체제 ── */
|
||
--surface: #f3f6f8;
|
||
--surface-2: #e8edf1;
|
||
--surface-3: #dde4e9;
|
||
--panel: #ffffff;
|
||
--line: #cfd8df;
|
||
--line-strong: #a9b6c0;
|
||
--ink: #121a21;
|
||
--ink-muted: #4a5a67; /* 바탕 6.56:1 · 패널 7.12:1 */
|
||
--ink-faint: #55656f; /* 바탕 5.56:1 · surface-2 5.12:1 — 13px 캡션도 AA */
|
||
--accent: #2a6b8a; /* LCh 246° · 흰 글자 5.88:1 · 바탕 #f3f6f8 위 5.42:1 · 푸터 면 #e8edf1 위 4.99:1 */
|
||
--accent-hover: #1f5069;
|
||
--accent-ink: #ffffff;
|
||
--accent-wash: #e3ecf1;
|
||
|
||
/* ── 캔버스 화면 — 페이지에서 유일한 어두운 면. 띠가 아니라 부품이다 ── */
|
||
--screen: #0e1114;
|
||
--screen-2: #1b2126;
|
||
--screen-line: #2c343a;
|
||
--screen-ink: #e8ecef; /* 15.94:1 */
|
||
--screen-ink-muted: #98a3ab; /* 7.36:1 */
|
||
--screen-accent: #3e8fb0; /* 어두운 화면 위 장비 표식 선 · 5.20:1 */
|
||
|
||
/* ── 온도 컬러맵 — 캔버스 안에서만 쓰는 데이터 인코딩. UI 강조색이 아니다 ── */
|
||
--temp-cold: #2f7d9e;
|
||
--temp-mid: #39a894;
|
||
--temp-warm: #8cc152;
|
||
--temp-hot: #d7d64a;
|
||
|
||
/* ── 형태 — radius 0 한 값 (plan.md 배정 · R1′ 둘 다 0 이 지배) ── */
|
||
--radius: 0;
|
||
|
||
/* ── 간격 ── */
|
||
--space-1: 0.25rem;
|
||
--space-2: 0.5rem;
|
||
--space-3: 1rem;
|
||
--space-4: 1.5rem;
|
||
--space-5: 2.5rem;
|
||
--space-6: 4rem;
|
||
--space-7: 6rem;
|
||
--space-8: clamp(4rem, 2.5rem + 5vw, 7rem);
|
||
|
||
--container: 1200px;
|
||
--container-wide: 1440px;
|
||
--pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
|
||
--panel-width: 22rem;
|
||
|
||
/* ── 모션 — 상태 전환만. 등장 모션 없음 ── */
|
||
--dur-quick: 160ms;
|
||
--dur-slow: 900ms;
|
||
--ease: cubic-bezier(0.2, 0, 0, 1);
|
||
}
|