feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
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.
This commit is contained in:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -2,26 +2,48 @@
|
|||
|
||||
## 브리프
|
||||
|
||||
- 무엇을: IOR와 분산을 조작하는 가상 광학 시험대.
|
||||
- 누구에게: 광선 모델의 조건과 결과물을 함께 읽으려는 방문자.
|
||||
- 제약: WebGL/정적 폴백, 기존 슬라이더와 가상·측정 아님 표기를 유지한다.
|
||||
- 무엇을: 굴절률과 분산을 직접 바꿔 보는 가상 광학 브랜드의 프리즘 시험대(L-85).
|
||||
- 누구에게: 렌즈 사양표의 숫자가 빛의 경로에서 무엇을 뜻하는지 손으로 확인하고 싶은 사진가·광학 입문자.
|
||||
- 제약: WebGL과 정적 폴백(움직임 줄이기·WebGL 불가), 기존 슬라이더 두 개(`#ior`, `#disp`)와 출력값 계약을 유지한다.
|
||||
- 기본 언어: 한국어(`lang="ko"`). 2026-09판은 영어였고 언어 결정 기록이 없었다(레드팀 06 P1-5). 브랜드명만 라틴으로 둔다.
|
||||
|
||||
## 2026-10 재작업 이유
|
||||
|
||||
2026-09판은 pulsegate·synapse-bci와 같은 틀이었다 — 니어블랙 바탕, 모노 소문자 워드마크, 왼쪽 글·오른쪽 다크 패널, radius 2px, IBM Plex. `tools/similarity.mjs` 기준 두 페이지와 유사도 0.84·0.83. 헤드라인 "bent honestly"는 정직함을 변명했고 히어로 본문이 면책 문구였다.
|
||||
|
||||
## 결정표
|
||||
|
||||
| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
|
||||
| 축 | 이 브리프의 재료 | 결정·역할 토큰 | 기각 조건 |
|
||||
|---|---|---|---|
|
||||
| 구도 | 기준 1440 화면에서 큰 프리즘이 제목과 조작을 폴드 아래로 밀었다. | 제목·한계 설명을 상단에 두고 `9:4` 캔버스/제어 프레임을 배치한다. `--container`, `--space-4`, `--space-6`. | 캔버스가 제어보다 큰 면적을 차지해 둘 중 하나가 첫 화면에서 사라지면 재조정한다. |
|
||||
| 타입 | 제목은 모델의 의미, 모노는 조건과 조작값을 읽게 해야 한다. | `--step-3` 제목, `--step--1` 시험대 원장과 제어 보조문을 유지한다. | 실제 긴 라벨이 320px 또는 200% 확대에서 제어를 밀면 폭·간격을 수정한다. |
|
||||
| 색 | 스펙트럼만 광학 결과를 나타내며 UI 색은 보조여야 한다. | `--surface`, `--surface-raised`, `--accent-stroke`을 프레임·포커스·입력에만 쓴다. | UI 색이 캔버스의 분산 광선보다 먼저 읽히면 채도를 줄인다. |
|
||||
| 바탕 | 사진가가 노출을 맞추는 18% 그레이 카드. 광학 시험은 중성 회색 위에서 색을 판단한다. | `--surface: #a6a9a9`(L*≈68). 카드 값(#777)은 본문 대비가 4.5:1에 못 미쳐 명도만 올렸다. | 회색 위 보조 글자 대비가 4.5:1 아래로 떨어지면 `--ink-muted`를 더 어둡게 한다. |
|
||||
| 색 | 기존 판의 기준광 632.8 nm는 헬륨네온 레이저의 빨강이다. | `--accent: #d4231a`는 입사 빔·눈금·손잡이에만. 글자에는 쓰지 않는다. 스펙트럼은 캔버스만 소유한다. | 빨강이 스펙트럼보다 먼저 읽히면 선 굵기를 줄인다. |
|
||||
| 구도 | 손잡이 두 개와 프리즘이 같은 장치라는 것이 이 페이지의 요점이다. | 표제가 폭을 가로지르고, 아래 검은 시험 상자(`--surface-chamber`, `--radius: 28px`) 안쪽 하단에 조작 레일을 넣는다(961px 이상). 1440×900에서 상자와 두 출력값이 첫 화면에 함께 보인다. | 레일이 프리즘을 가리면 카메라 `position.y`를 조정한다. 좁은 화면은 레일을 상자 밖으로 뺀다. |
|
||||
| 타입 | 출력값 `1.52`, `0.18`과 사양 `85 mm`·`6군 7매`가 페이지의 이미지다. | SUIT 한 가족(본문 400, 표제·숫자 900), `tabular-nums`. 모노를 쓰지 않는다 — 2026-09판의 모노 소문자 메타가 템플릿 지문이었다. | 숫자 폭이 흔들려 출력값이 좌우로 튀면 `font-variant-numeric`을 다시 확인한다. |
|
||||
| 형태 | 렌즈는 원이다. | 단면 사진을 원형으로 자르고, 워드마크도 원 + 빔 한 줄로 만든다. 조작부는 알약형. | 원형 크롭이 경통 구조를 잘라 단면이 읽히지 않으면 크롭 중심을 옮긴다. |
|
||||
| 모션 | 시험대는 사람이 만질 때만 움직인다. | 스크롤 등장 애니메이션을 전부 뺐다. 드래그·슬라이더 입력에만 다시 그린다. | — |
|
||||
|
||||
## 근거와 경계
|
||||
## 진실 범위
|
||||
|
||||
[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 구도·군집 관찰을 제목/작업면 분리에만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 실제 카피·수치 proof 범위를 타입 계층에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 색 맥락은 캔버스와 UI 표면의 대비 확인에만 적용했다. 이 세 자료는 성능·이해도 법칙으로 사용하지 않는다.
|
||||
헤더 아래 띠 한 곳이 페이지 전체의 가상 범위를 소유한다("렌즈 L-85의 구성·곡선·사양은 설명을 위해 만든 값"). 사양표는 열 머리글 `값(예시)`에서 한 번만 표기한다. 히어로 본문과 표제에는 고지 문구를 넣지 않는다([trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md) 공통 부모 1회 규칙).
|
||||
|
||||
[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)의 진실 범위에 따라 모델·사양·곡선의 illustrative 표기를 가까운 공통 표면에 유지한다. 캔버스 안에는 텍스트를 굽지 않는다.
|
||||
## 검증
|
||||
|
||||
## 2026-09-12 현재 검증 기록
|
||||
- `node tools/instrument-showcases-e2e.mjs` — 움직임 줄이기 정적 폴백(`#hud-note` 문구를 한국어로 바꿔 검사 정규식에 `움직임 줄이기`를 추가), 슬라이더 출력 변화.
|
||||
- `node tools/similarity.mjs` — 재작업 엄격 대상. 다른 20종과 유사도 임계 0.78 미만.
|
||||
|
||||
- `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이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
## 2026-10-02 카피 기준 수정 기록 (번역체·과장 카피 제거)
|
||||
|
||||
기준: `outputs/redteam-2026-10-01/copy-criteria.md`. 레이아웃·토큰은 바꾸지 않고 화면 문장만 고쳤다.
|
||||
|
||||
- h1 "흰 빛 한 줄이 색으로 갈라지는 각도"(명사 종결 수수께끼)를 "굴절률과 분산을 직접 바꿔 보세요"로 바꾸고, 키커에 "L-85 85mm f/1.8"을 넣어 렌즈 소개 페이지임을 먼저 밝혔다.
|
||||
- "유리 일곱 장이 빛의 길을 나눠 맡는다", "렌즈는 굴절의 사슬입니다", "색 번짐을 붙잡습니다"(무생물 주어 + 사람 동사·은유)를 "6군 7매 구성과 렌즈별 역할", "색 번짐을 줄였습니다"로 바꿨다.
|
||||
- "MTF는 조건과 함께 읽는다"(잠언형, 반말)를 "MTF 곡선과 측정 조건"으로 바꾸고 본문을 합니다체로 통일했다. "손잡이"는 화면 UI에 맞춰 "슬라이더"로 바꿨다.
|
||||
|
||||
## 내비·푸터 결정 (2026-10-06 연장)
|
||||
|
||||
- 내비: 상단 바 유지(시험대·단면·MTF·사양). 19종 분배표에서 상단 바 5종 안에 든다.
|
||||
- 푸터: 고지 띠(브랜드 한 줄 + "designpaca 쇼케이스") 유지. 근거는 마지막 섹션 `.closing`이 이미 행동을 끝냈다는 것 — h2 "굴절률을 바꿔 가며 다시 비교해 보세요" 아래 `.btn` "시험대로 돌아가기"(`#bench`) 하나가 있고, 이 페이지의 유일한 행동은 시험대를 만지는 것이다. 가상 브랜드라 자료 요청·문의 같은 행동을 두면 진실 범위(헤더 아래 띠 한 곳)와 어긋나므로 두지 않았다. 확인: `index.html` 마지막 `<section class="closing">`에 h2 + 버튼 1개, 푸터에는 링크 없음.
|
||||
|
||||
## 변경 기록
|
||||
|
||||
- 2026-10-06 연장: 토큰·서체·히어로·내비·푸터 모두 그대로. 푸터 고지 띠를 유지하는 근거(마지막 섹션의 행동)만 위에 적었다.
|
||||
|
|
|
|||
|
|
@ -1,229 +1,214 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Lumina Optics · Interactive Optical Study</title>
|
||||
<title>Lumina Optics · L-85 85mm f/1.8 렌즈</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="An interactive optical study of refraction and dispersion. The lens profile, curves, and specifications are illustrative."
|
||||
/>
|
||||
<meta property="og:title" content="Lumina Optics · Interactive Optical Study" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="An illustrative light path you can inspect and adjust."
|
||||
content="가상 광학 브랜드 Lumina Optics의 85mm f/1.8 렌즈 L-85 소개 페이지. 프리즘 시험대에서 굴절률과 분산을 바꿔 보고, 렌즈 구성·MTF·사양을 확인할 수 있습니다."
|
||||
/>
|
||||
<meta property="og:title" content="Lumina Optics · L-85 85mm f/1.8 렌즈" />
|
||||
<meta property="og:description" content="85mm f/1.8 렌즈 L-85의 굴절 시험대, 렌즈 구성, MTF 곡선과 사양." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#101214" />
|
||||
<meta property="og:image" content="./og.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#a6a9a9" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
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=20260912all" />
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261002" />
|
||||
<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='%23101214'/%3E%3Cpath d='M6 16h8m8 0h4M14 16l10-7v14z' fill='none' stroke='%23BFE8EE' stroke-width='1.4'/%3E%3C/svg%3E"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='16' fill='%23A6A9A9'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%230D0F10' stroke-width='2.4'/%3E%3Cpath d='M2 16h28' stroke='%23D4231A' stroke-width='2'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip" href="#main">Skip to main content</a>
|
||||
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a class="wordmark" href="#main">lumina<span class="wordmark-dot">·</span>optics</a>
|
||||
<nav class="nav" aria-label="Sections">
|
||||
<a href="#bench">Bench</a>
|
||||
<a href="#anatomy">Anatomy</a>
|
||||
<a class="wordmark" href="#main"><span class="wordmark-lens" aria-hidden="true"></span>Lumina Optics</a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#bench">시험대</a>
|
||||
<a href="#anatomy">단면</a>
|
||||
<a href="#mtf">MTF</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="#spec">사양</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="scope-note">
|
||||
<p class="wrap">가상 광학 브랜드의 쇼케이스입니다. 렌즈 L-85의 구성·곡선·사양은 설명을 위해 만든 값이며 실측이 아닙니다.</p>
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
<section id="bench" class="hero" aria-labelledby="hero-h">
|
||||
<div class="wrap hero-summary">
|
||||
<div class="hero-text">
|
||||
<p class="hero-kicker reveal">Interactive optical study</p>
|
||||
<h1 id="hero-h" class="reveal" style="--delay: 60ms">
|
||||
One beam,<br />bent honestly
|
||||
</h1>
|
||||
<p class="lead reveal" style="--delay: 120ms">
|
||||
Move the prism to compare how refractive index and dispersion
|
||||
redirect one beam. This view illustrates an optical model; it is
|
||||
not a measured photograph, a product specification, or a lab result.
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap hero-grid">
|
||||
<p class="hero-kicker">L-85 85mm f/1.8 · 굴절 시험대</p>
|
||||
<h1 id="hero-h">굴절률과 분산을<br />직접 바꿔 보세요</h1>
|
||||
<p class="lead">
|
||||
굴절률을 올리면 빛이 더 꺾이고, 분산을 키우면 색 사이가 더 벌어집니다.
|
||||
프리즘을 끌어 돌리거나 아래 슬라이더 두 개로 값을 바꿔 보세요.
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap bench-layout">
|
||||
<div class="bench-shell">
|
||||
<div class="bench-stage reveal">
|
||||
<canvas
|
||||
id="gl"
|
||||
aria-label="Illustrative interactive prism: a white beam enters from the left and exits as a spectrum. Drag to rotate the concept model."
|
||||
></canvas>
|
||||
<img
|
||||
class="bench-fallback"
|
||||
src="./assets/prism-bench.webp"
|
||||
alt="Illustrative glass prism on a dark optical surface splitting one collimated beam into a spectrum"
|
||||
width="1440"
|
||||
height="810"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="wrap bench">
|
||||
<div class="bench-stage">
|
||||
<canvas
|
||||
id="gl"
|
||||
aria-label="프리즘 시험대: 왼쪽에서 들어온 흰 빛이 프리즘을 지나 스펙트럼으로 갈라집니다. 끌어서 프리즘을 돌릴 수 있습니다."
|
||||
></canvas>
|
||||
<img
|
||||
class="bench-fallback"
|
||||
src="./assets/prism-bench.webp"
|
||||
alt="어두운 시험대 위 유리 프리즘이 평행광 한 줄을 스펙트럼으로 나누는 참고 이미지"
|
||||
width="1440"
|
||||
height="810"
|
||||
/>
|
||||
<p class="stage-label" aria-hidden="true"><span>입사광 632.8 nm</span><span>평행광</span></p>
|
||||
</div>
|
||||
<aside class="bench-controls">
|
||||
<div class="bench-ledger" role="group" aria-label="Bench configuration">
|
||||
<dl>
|
||||
<div>
|
||||
<dt>illustrative beam reference</dt>
|
||||
<dd>632.8 nm · collimated</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>variable</dt>
|
||||
<dd>index + dispersion</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>view</dt>
|
||||
<dd>interactive light study · static reference</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="hud reveal" style="--delay: 160ms">
|
||||
<div class="hud-row">
|
||||
<div class="hud-row-head"><label for="ior">Index of refraction</label><output id="ior-out" for="ior">1.52</output></div>
|
||||
<div class="rail" role="group" aria-label="시험대 조작">
|
||||
<div class="control">
|
||||
<div class="control-head"><label for="ior">굴절률 n</label><output id="ior-out" for="ior">1.52</output></div>
|
||||
<input type="range" id="ior" min="1.45" max="2.20" step="0.01" value="1.52" />
|
||||
<p class="control-hint">크라운 유리 1.52 · 고굴절 플린트 1.9 이상</p>
|
||||
</div>
|
||||
<div class="hud-row">
|
||||
<div class="hud-row-head"><label for="disp">Dispersion (Abbe ↓)</label><output id="disp-out" for="disp">0.18</output></div>
|
||||
<div class="control">
|
||||
<div class="control-head"><label for="disp">분산</label><output id="disp-out" for="disp">0.18</output></div>
|
||||
<input type="range" id="disp" min="0" max="0.6" step="0.01" value="0.18" />
|
||||
<p class="control-hint">값이 클수록 아베수가 낮은 유리</p>
|
||||
</div>
|
||||
<p class="hud-note" id="hud-note">Drag the prism to rotate · illustrative light path at a 632.8 nm reference</p>
|
||||
</div>
|
||||
</aside>
|
||||
<p class="hud-note" id="hud-note">프리즘을 좌우로 끌면 입사각이 바뀝니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="anatomy" class="section" aria-labelledby="anatomy-h">
|
||||
<div class="wrap two">
|
||||
<figure class="two-photo reveal">
|
||||
<img
|
||||
src="./assets/lens-section.webp"
|
||||
alt="Illustrative lens cutaway: a stack of glass elements in a metal barrel, edge-lit to show refraction paths"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>L-85 concept cutaway · illustrative element layout</figcaption>
|
||||
<div class="wrap anatomy-grid">
|
||||
<figure class="lens-figure">
|
||||
<div class="lens-disc">
|
||||
<img
|
||||
src="./assets/lens-section.webp"
|
||||
alt="금속 경통 안에 유리 요소가 층층이 쌓인 렌즈 단면, 가장자리 조명으로 굴절 경로가 드러난 참고 이미지"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<figcaption>L-85 렌즈 단면 · 6군 7매</figcaption>
|
||||
</figure>
|
||||
<div class="two-text">
|
||||
<h2 id="anatomy-h">Glass sets<br />the light path</h2>
|
||||
<div class="anatomy-text">
|
||||
<h2 id="anatomy-h">6군 7매 구성과<br />렌즈별 역할</h2>
|
||||
<p>
|
||||
A lens is a chain of refractions: every surface bends the path
|
||||
before an image is made. The L-85 concept uses low-dispersion
|
||||
elements to explain why a design can keep colours from spreading
|
||||
across the frame.
|
||||
</p>
|
||||
<p class="muted">
|
||||
The cutaway is a constructed reference image. Its element count
|
||||
and spacing are illustrative, not a measurement of a commercial lens.
|
||||
빛은 렌즈 면을 하나 지날 때마다 조금씩 꺾이고, 마지막 면을 지나
|
||||
센서에 상을 맺습니다. L-85는 저분산 유리 두 장으로 화면 가장자리의
|
||||
색 번짐을 줄였습니다.
|
||||
</p>
|
||||
<ol class="element-list">
|
||||
<li><b>1–2</b><span>앞 군 · 빛을 모으는 볼록 렌즈</span></li>
|
||||
<li><b>3–4</b><span>저분산 접합 · 색수차 보정</span></li>
|
||||
<li><b>5</b><span>조리개 뒤 렌즈 · 상면 평탄화</span></li>
|
||||
<li><b>6–7</b><span>뒤 군 · 초점 거리 결정</span></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="mtf" class="section band" aria-labelledby="mtf-h">
|
||||
<div class="wrap mtf-grid">
|
||||
<div class="mtf-text">
|
||||
<h2 id="mtf-h">MTF, read with conditions</h2>
|
||||
<p>
|
||||
Contrast transfer at stated line pairs per millimetre gives a
|
||||
clearer comparison than a slogan. These curves illustrate the
|
||||
labels a measured chart needs; they are not optical-bench results.
|
||||
</p>
|
||||
<ul class="mtf-legend">
|
||||
<li><span class="key key-solid" aria-hidden="true"></span>10 lp/mm · sagittal</li>
|
||||
<li><span class="key key-solid-m" aria-hidden="true"></span>10 lp/mm · meridional</li>
|
||||
<li><span class="key key-dash" aria-hidden="true"></span>30 lp/mm · sagittal</li>
|
||||
<li><span class="key key-dash-m" aria-hidden="true"></span>30 lp/mm · meridional</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="mtf-plot reveal">
|
||||
<svg viewBox="0 0 560 320" role="img" aria-label="Illustrative MTF curves showing how contrast can be compared from the centre to the corner; this is not a measured result.">
|
||||
<g class="chart-grid">
|
||||
<line x1="48" y1="16" x2="48" y2="272" />
|
||||
<line x1="48" y1="272" x2="536" y2="272" />
|
||||
<line x1="48" y1="88" x2="536" y2="88" stroke-dasharray="2 6" />
|
||||
<line x1="48" y1="160" x2="536" y2="160" stroke-dasharray="2 6" />
|
||||
<line x1="48" y1="232" x2="536" y2="232" stroke-dasharray="2 6" />
|
||||
<line x1="172" y1="16" x2="172" y2="272" stroke-dasharray="2 6" />
|
||||
<line x1="296" y1="16" x2="296" y2="272" stroke-dasharray="2 6" />
|
||||
<line x1="420" y1="16" x2="420" y2="272" stroke-dasharray="2 6" />
|
||||
</g>
|
||||
<g class="axis-labels">
|
||||
<text x="40" y="20" text-anchor="end">1.0</text>
|
||||
<text x="40" y="92" text-anchor="end">0.75</text>
|
||||
<text x="40" y="164" text-anchor="end">0.5</text>
|
||||
<text x="40" y="236" text-anchor="end">0.25</text>
|
||||
<text x="48" y="292">center</text>
|
||||
<text x="292" y="292" text-anchor="middle">image field (mm)</text>
|
||||
<text x="536" y="292" text-anchor="end">corner 21.6</text>
|
||||
</g>
|
||||
<polyline class="mtf mtf-10s" points="48,32 172,36 296,44 420,60 536,76" />
|
||||
<polyline class="mtf mtf-10m" points="48,34 172,40 296,52 420,72 536,96" />
|
||||
<polyline class="mtf mtf-30s" points="48,84 172,96 296,120 420,160 536,196" />
|
||||
<polyline class="mtf mtf-30m" points="48,90 172,108 296,140 420,186 536,232" />
|
||||
</svg>
|
||||
<figcaption>L-85 concept · f/1.8 · infinity focus · illustrative curve</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="spec-h">
|
||||
<section id="mtf" class="section" aria-labelledby="mtf-h">
|
||||
<div class="wrap">
|
||||
<h2 id="spec-h" class="reveal">Reference specification</h2>
|
||||
<div class="table-wrap reveal" style="--delay: 80ms">
|
||||
<table>
|
||||
<caption class="sr-only">L-85 concept specification — illustrative item, value, and condition</caption>
|
||||
<div class="section-head">
|
||||
<p class="index">02</p>
|
||||
<h2 id="mtf-h">MTF 곡선과 측정 조건</h2>
|
||||
<p>MTF는 선쌍 밀도와 방향을 함께 적어야 다른 렌즈와 비교할 수 있습니다. 아래 곡선은 f/1.8 개방, 무한 초점 기준입니다.</p>
|
||||
</div>
|
||||
<div class="mtf-panel">
|
||||
<figure class="mtf-plot">
|
||||
<svg viewBox="0 0 560 320" role="img" aria-label="L-85의 MTF 곡선: 중심에서 모서리로 갈수록 대비가 낮아지며, 30 lp/mm 곡선이 10 lp/mm보다 빨리 떨어집니다.">
|
||||
<g class="chart-grid">
|
||||
<line x1="48" y1="88" x2="536" y2="88" />
|
||||
<line x1="48" y1="160" x2="536" y2="160" />
|
||||
<line x1="48" y1="232" x2="536" y2="232" />
|
||||
<line x1="172" y1="16" x2="172" y2="272" />
|
||||
<line x1="296" y1="16" x2="296" y2="272" />
|
||||
<line x1="420" y1="16" x2="420" y2="272" />
|
||||
<line class="axis" x1="48" y1="16" x2="48" y2="272" />
|
||||
<line class="axis" x1="48" y1="272" x2="536" y2="272" />
|
||||
</g>
|
||||
<g class="axis-labels">
|
||||
<text x="40" y="20" text-anchor="end">1.0</text>
|
||||
<text x="40" y="92" text-anchor="end">0.75</text>
|
||||
<text x="40" y="164" text-anchor="end">0.5</text>
|
||||
<text x="40" y="236" text-anchor="end">0.25</text>
|
||||
<text x="48" y="296">중심</text>
|
||||
<text x="292" y="296" text-anchor="middle">상 높이 (mm)</text>
|
||||
<text x="536" y="296" text-anchor="end">모서리 21.6</text>
|
||||
</g>
|
||||
<polyline class="mtf mtf-10s" points="48,32 172,36 296,44 420,60 536,76" />
|
||||
<polyline class="mtf mtf-10m" points="48,34 172,40 296,52 420,72 536,96" />
|
||||
<polyline class="mtf mtf-30s" points="48,84 172,96 296,120 420,160 536,196" />
|
||||
<polyline class="mtf mtf-30m" points="48,90 172,108 296,140 420,186 536,232" />
|
||||
</svg>
|
||||
<figcaption>L-85 · f/1.8 · 무한 초점</figcaption>
|
||||
</figure>
|
||||
<div>
|
||||
<ul class="mtf-legend">
|
||||
<li><span class="key" aria-hidden="true"></span>10 lp/mm · 방사 방향</li>
|
||||
<li><span class="key key-m" aria-hidden="true"></span>10 lp/mm · 접선 방향</li>
|
||||
<li><span class="key key-dash" aria-hidden="true"></span>30 lp/mm · 방사 방향</li>
|
||||
<li><span class="key key-m key-dash" aria-hidden="true"></span>30 lp/mm · 접선 방향</li>
|
||||
</ul>
|
||||
<p class="mtf-read">
|
||||
두 방향 곡선이 모서리에서 벌어질수록 점이 한쪽으로 늘어져 찍힙니다.
|
||||
L-85는 상 높이 15 mm까지 두 곡선 차이를 0.1 이내로 맞췄습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="spec" class="section" aria-labelledby="spec-h">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<p class="index">03</p>
|
||||
<h2 id="spec-h">L-85 사양</h2>
|
||||
<p>위 시험대와 단면도에 쓴 것과 같은 설계값입니다.</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="spec-table">
|
||||
<caption class="sr-only">L-85 사양 — 항목, 값(예시), 기준</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Item</th>
|
||||
<th scope="col" class="num">Illustrative value</th>
|
||||
<th scope="col">Condition</th>
|
||||
<th scope="col">항목</th>
|
||||
<th scope="col">값(예시)</th>
|
||||
<th scope="col">기준</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th scope="row">Focal length</th><td class="num">85 mm</td><td>concept reference</td></tr>
|
||||
<tr><th scope="row">Aperture</th><td class="num">f/1.8 – f/16</td><td>concept reference</td></tr>
|
||||
<tr><th scope="row">Elements</th><td class="num">7 in 6</td><td>illustrative layout</td></tr>
|
||||
<tr><th scope="row">Close focus</th><td class="num">0.62 m</td><td>illustrative configuration</td></tr>
|
||||
<tr><th scope="row">Filter</th><td class="num">Ø 62 mm</td><td>illustrative configuration</td></tr>
|
||||
<tr><th scope="row">Weight</th><td class="num">438 g</td><td>illustrative configuration</td></tr>
|
||||
<tr><th scope="row">초점 거리</th><td class="num">85 mm</td><td>무한 초점</td></tr>
|
||||
<tr><th scope="row">조리개</th><td class="num">f/1.8–16</td><td>9엽 원형 조리개</td></tr>
|
||||
<tr><th scope="row">렌즈 구성</th><td class="num">6군 7매</td><td>저분산 2매 포함</td></tr>
|
||||
<tr><th scope="row">최단 초점</th><td class="num">0.62 m</td><td>센서면 기준</td></tr>
|
||||
<tr><th scope="row">필터 지름</th><td class="num">62 mm</td><td>앞 군 나사</td></tr>
|
||||
<tr><th scope="row">무게</th><td class="num">438 g</td><td>후드·캡 제외</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section band contact" aria-labelledby="contact-h">
|
||||
<div class="wrap contact-grid">
|
||||
<h2 id="contact-h">About this study</h2>
|
||||
<p>
|
||||
This is a concept page for reading an optical model. It does not
|
||||
schedule sample loans, measurements, or MTF requests.
|
||||
</p>
|
||||
<a class="btn" href="#bench">Return to the light study</a>
|
||||
<section class="closing" aria-labelledby="closing-h">
|
||||
<div class="wrap closing-grid">
|
||||
<h2 id="closing-h">굴절률을 바꿔 가며<br />다시 비교해 보세요</h2>
|
||||
<a class="btn" href="#bench">시험대로 돌아가기</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>lumina optics · optical study</p>
|
||||
<p class="foot-meta">illustrative model · no commercial measurement service</p>
|
||||
<p>Lumina Optics · L-85 85mm f/1.8</p>
|
||||
<p>designpaca 쇼케이스</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
|
@ -241,8 +226,8 @@
|
|||
canvas.remove();
|
||||
document.getElementById("hud-note").textContent =
|
||||
reduced
|
||||
? "Motion reduced — showing a static reference image instead."
|
||||
: "Interactive view unavailable — showing a static reference image instead.";
|
||||
? "움직임 줄이기 설정을 따라 정지한 참고 이미지를 보여 줍니다."
|
||||
: "이 브라우저에서는 3D 시험대를 열 수 없어 정지한 참고 이미지를 보여 줍니다.";
|
||||
} else {
|
||||
fallback.remove();
|
||||
const THREE = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js");
|
||||
|
|
@ -322,7 +307,7 @@
|
|||
);
|
||||
return m;
|
||||
};
|
||||
const beamIn = mkBeam(4.1, 0.12, 0xdfe8ec, 0xffffff, 0.92);
|
||||
const beamIn = mkBeam(4.1, 0.12, 0xff6a5a, 0xffffff, 0.92);
|
||||
beamIn.position.set(-3.05, 0, -0.34);
|
||||
beamGroup.add(beamIn);
|
||||
const spectrumRays = [0x7379e8, 0x62c9e8, 0x89dbaa, 0xf0da72, 0xee9866].map((color) => {
|
||||
|
|
@ -379,7 +364,9 @@
|
|||
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, aspect < 1.25 ? 1.25 : 1.5));
|
||||
renderer.setSize(r.width, h, false);
|
||||
camera.aspect = aspect;
|
||||
camera.position.z = aspect < 1.25 ? 15.5 : 9;
|
||||
camera.position.z = aspect < 1.25 ? 15.5 : 11;
|
||||
// 넓은 화면은 조작 레일이 상자 아래쪽을 덮으므로 장면을 위로 올린다.
|
||||
camera.position.y = aspect < 1.25 ? 0 : -0.7;
|
||||
camera.updateProjectionMatrix();
|
||||
renderFrame();
|
||||
}
|
||||
|
|
@ -392,18 +379,6 @@
|
|||
}
|
||||
renderFrame();
|
||||
}
|
||||
|
||||
const io2 = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const e of entries) {
|
||||
if (!e.isIntersecting) continue;
|
||||
e.target.classList.add("is-in");
|
||||
io2.unobserve(e.target);
|
||||
}
|
||||
},
|
||||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||||
);
|
||||
for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
BIN
apps/site/public/work/lumina-optics/og.png
Normal file
BIN
apps/site/public/work/lumina-optics/og.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
|
|
@ -1,7 +1,9 @@
|
|||
@import url("./tokens.css?v=20260912all");
|
||||
@import url("./tokens.css?v=20261002");
|
||||
|
||||
/* ==========================================================================
|
||||
Lumina Optics — 광학 시험대. 색은 캔버스 안에서만.
|
||||
Lumina Optics — 회색 카드 위의 시험 상자.
|
||||
구도: 표제가 화면 폭을 가로지르고, 그 아래 검은 시험 상자 하나가 첫 화면의
|
||||
시각 주체다. 조작부는 상자 바로 아래 가로 레일에 붙어 '같은 장치'로 읽힌다.
|
||||
========================================================================== */
|
||||
|
||||
*,
|
||||
|
|
@ -17,7 +19,7 @@ html {
|
|||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
background: var(--surface);
|
||||
color-scheme: dark;
|
||||
color-scheme: light;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
|
|
@ -28,46 +30,37 @@ html {
|
|||
body {
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
font-synthesis: none;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--step-0);
|
||||
line-height: var(--leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
:where(h1, h2) {
|
||||
font-weight: 500;
|
||||
:where(h1, h2, h3) {
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.015em;
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: balance;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--step-2);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
:where(p, th, td, figcaption, li) {
|
||||
overflow-wrap: break-word;
|
||||
line-height: var(--leading-normal);
|
||||
h3 {
|
||||
font-size: var(--step-1);
|
||||
font-weight: 700;
|
||||
}
|
||||
:where(p, th, td, figcaption, li, dd) {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--ink-muted);
|
||||
max-width: 36em;
|
||||
}
|
||||
.muted {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline: 3px solid var(--ink);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.skip {
|
||||
|
|
@ -75,383 +68,479 @@ a {
|
|||
left: -9999px;
|
||||
top: 0;
|
||||
background: var(--ink);
|
||||
color: var(--surface);
|
||||
color: var(--ink-on-dark);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
z-index: 100;
|
||||
}
|
||||
.skip:focus {
|
||||
left: 0;
|
||||
left: var(--space-3);
|
||||
top: var(--space-3);
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(100% - 2 * var(--pad-inline), var(--container));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── 헤더 ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* ── 머리 ── */
|
||||
.site-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: color-mix(in srgb, var(--surface) 86%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.head-inner {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-3);
|
||||
min-height: 4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wordmark {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55em;
|
||||
font-weight: 800;
|
||||
font-size: 1.125rem;
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wordmark-dot {
|
||||
color: var(--accent-stroke);
|
||||
.wordmark-lens {
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--ink);
|
||||
position: relative;
|
||||
}
|
||||
.wordmark-lens::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 50% -0.15em auto -0.5em;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
background: var(--accent);
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: clamp(var(--space-3), 2vw, var(--space-5));
|
||||
font-size: var(--step--1);
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding-inline: 0.85rem;
|
||||
border-radius: var(--radius-pill);
|
||||
text-decoration: none;
|
||||
color: var(--ink-muted);
|
||||
padding-block: 2px;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color var(--dur-quick) var(--ease-soft),
|
||||
border-color var(--dur-quick) var(--ease-soft);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: background-color var(--dur-quick) var(--ease-out);
|
||||
}
|
||||
.nav a:hover {
|
||||
color: var(--ink);
|
||||
border-color: var(--accent-stroke);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
/* ── 시험대(히어로) — 캔버스와 본문은 세로로 완전히 분리.
|
||||
R2 원칙(design.md): 3D 위에 본문을 얹지 않는다. ─────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding-block: var(--space-4);
|
||||
.scope-note {
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.hero-summary {
|
||||
margin-bottom: var(--space-4);
|
||||
.scope-note p {
|
||||
padding-block: 0.6rem;
|
||||
}
|
||||
.bench-layout {
|
||||
|
||||
/* ── 히어로 ── */
|
||||
.hero {
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 9fr) minmax(17rem, 4fr);
|
||||
gap: var(--space-4);
|
||||
align-items: stretch;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
column-gap: var(--space-4);
|
||||
row-gap: var(--space-4);
|
||||
align-items: end;
|
||||
}
|
||||
.bench-shell {
|
||||
min-width: 0;
|
||||
background:
|
||||
radial-gradient(72% 90% at 50% 22%, rgba(127, 185, 196, 0.06), transparent 66%),
|
||||
var(--surface);
|
||||
.hero-kicker {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-weight: 700;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
.hero-kicker::before {
|
||||
content: "";
|
||||
width: 3.5rem;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
}
|
||||
.hero h1 {
|
||||
grid-column: 1 / span 9;
|
||||
font-size: var(--step-3);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.hero .lead {
|
||||
grid-column: 10 / -1;
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
|
||||
/* ── 시험 상자 ── */
|
||||
.bench {
|
||||
position: relative;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.bench-stage {
|
||||
position: relative;
|
||||
height: clamp(20rem, 28vw, 22rem);
|
||||
background:
|
||||
radial-gradient(70% 88% at 50% 48%, rgba(127, 185, 196, 0.10), transparent 68%),
|
||||
var(--surface);
|
||||
border: 1px solid var(--line-strong);
|
||||
aspect-ratio: 16 / 6.4;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
/* 감사 도구가 조상 배경색으로 대비를 재므로 그라디언트 아래에 단색을 깐다. */
|
||||
background-color: var(--surface-chamber);
|
||||
background-image:
|
||||
radial-gradient(ellipse 60% 70% at 50% 50%, #151a1b 0%, var(--surface-chamber) 70%);
|
||||
}
|
||||
.bench-ledger {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.bench-ledger dl {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.bench-ledger dl > div {
|
||||
min-width: 0;
|
||||
padding: 0.85rem var(--space-3) 0.95rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.bench-ledger dl > div:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.bench-ledger dt,
|
||||
.bench-ledger dd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.045em;
|
||||
}
|
||||
.bench-ledger dt {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.bench-ledger dd {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
#gl,
|
||||
.bench-stage canvas,
|
||||
.bench-fallback {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.bench-fallback {
|
||||
object-fit: cover;
|
||||
}
|
||||
#gl {
|
||||
.bench-stage canvas {
|
||||
cursor: grab;
|
||||
}
|
||||
#gl:active {
|
||||
.bench-stage canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.hero-kicker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--accent-stroke);
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.hero .lead {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.hud {
|
||||
margin-top: var(--space-3);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-4);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.hud-row-head {
|
||||
.stage-label {
|
||||
position: absolute;
|
||||
left: var(--space-4);
|
||||
top: var(--space-4);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
.hud-row label {
|
||||
gap: var(--space-3);
|
||||
color: var(--ink-on-dark-muted);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
.stage-label span:first-child {
|
||||
color: var(--ink-on-dark);
|
||||
}
|
||||
|
||||
.rail {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr minmax(0, 0.9fr);
|
||||
gap: var(--space-4) var(--space-5);
|
||||
padding: var(--space-4) var(--space-2) 0;
|
||||
align-items: end;
|
||||
}
|
||||
.control-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.control-head label {
|
||||
font-weight: 700;
|
||||
}
|
||||
.control output {
|
||||
font-size: var(--step-num);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.control input[type="range"] {
|
||||
width: 100%;
|
||||
margin-top: var(--space-3);
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.control input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ink);
|
||||
}
|
||||
.control input[type="range"]::-moz-range-track {
|
||||
height: 6px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ink);
|
||||
}
|
||||
.control input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-top: -11px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--ink);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
.control input[type="range"]::-moz-range-thumb {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--ink);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
.control-hint {
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.hud-row output {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--ink);
|
||||
}
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--accent-stroke);
|
||||
}
|
||||
.hud-note {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--ink-muted);
|
||||
padding-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
|
||||
|
||||
/* ── 섹션 공통 ── */
|
||||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
.band {
|
||||
background: var(--surface-raised);
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* ── 단면 2단 ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.two {
|
||||
.section-head {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
|
||||
gap: var(--space-6) var(--space-7);
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.two-photo img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius);
|
||||
.section-head .index {
|
||||
grid-column: 1 / span 2;
|
||||
font-weight: 800;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
.two-photo figcaption {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
margin-top: var(--space-2);
|
||||
.section-head h2 {
|
||||
grid-column: 3 / span 6;
|
||||
}
|
||||
.two-text p + p {
|
||||
margin-top: var(--space-4);
|
||||
.section-head p {
|
||||
grid-column: 9 / -1;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* ── MTF ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
.mtf-grid {
|
||||
/* ── 단면 ── */
|
||||
.anatomy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||||
gap: var(--space-5) var(--space-7);
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
}
|
||||
.mtf-text p {
|
||||
margin-top: var(--space-3);
|
||||
color: var(--ink-muted);
|
||||
max-width: 30em;
|
||||
.lens-disc {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: var(--surface-chamber);
|
||||
outline: 2px solid var(--ink);
|
||||
outline-offset: 10px;
|
||||
}
|
||||
.mtf-legend {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-4);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-2) var(--space-4);
|
||||
.lens-disc img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.lens-figure figcaption {
|
||||
margin-top: var(--space-5);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
text-align: center;
|
||||
}
|
||||
.key {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 0;
|
||||
border-top: 2px solid var(--accent-stroke);
|
||||
margin-right: var(--space-2);
|
||||
vertical-align: middle;
|
||||
.element-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-5);
|
||||
border-top: 2px solid var(--ink);
|
||||
}
|
||||
.key-solid {
|
||||
border-top: 2.5px solid var(--accent-stroke);
|
||||
.element-list li {
|
||||
display: grid;
|
||||
grid-template-columns: 4.5rem minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
padding-block: var(--space-3);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.key-solid-m {
|
||||
border-top: 2.5px solid var(--ink-faint);
|
||||
.element-list b {
|
||||
font-size: var(--step-1);
|
||||
font-weight: 900;
|
||||
}
|
||||
.key-dash {
|
||||
border-top: 2px dashed var(--accent-stroke);
|
||||
.anatomy-text > p {
|
||||
max-width: 34em;
|
||||
}
|
||||
.key-dash-m {
|
||||
border-top: 2px dashed var(--ink-faint);
|
||||
|
||||
/* ── MTF ── */
|
||||
.mtf-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
.mtf-plot svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.mtf-plot figcaption {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.chart-grid line {
|
||||
stroke: var(--line);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.chart-grid line:first-child,
|
||||
.chart-grid line:nth-child(2) {
|
||||
stroke: var(--line-strong);
|
||||
.chart-grid .axis {
|
||||
stroke: var(--ink);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
.axis-labels text {
|
||||
font-size: 12px;
|
||||
fill: var(--ink-faint);
|
||||
fill: var(--ink-muted);
|
||||
font-size: 13px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.mtf {
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.mtf-10s {
|
||||
stroke: var(--accent-stroke);
|
||||
stroke: var(--ink);
|
||||
}
|
||||
.mtf-10m {
|
||||
stroke: var(--ink-faint);
|
||||
stroke: var(--accent);
|
||||
}
|
||||
.mtf-30s {
|
||||
stroke: var(--accent-stroke);
|
||||
stroke-dasharray: 6 5;
|
||||
stroke: var(--ink);
|
||||
stroke-dasharray: 8 6;
|
||||
}
|
||||
.mtf-30m {
|
||||
stroke: var(--ink-faint);
|
||||
stroke-dasharray: 6 5;
|
||||
stroke: var(--accent);
|
||||
stroke-dasharray: 8 6;
|
||||
}
|
||||
.mtf-plot figcaption {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
margin-top: var(--space-2);
|
||||
.mtf-legend {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
/* ── 사양 표 ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.table-wrap {
|
||||
.mtf-legend li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-weight: 600;
|
||||
}
|
||||
.key {
|
||||
width: 2.5rem;
|
||||
height: 0;
|
||||
border-top: 3px solid var(--ink);
|
||||
flex: none;
|
||||
}
|
||||
.key-m {
|
||||
border-top-color: var(--accent);
|
||||
}
|
||||
.key-dash {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
.mtf-read {
|
||||
margin-top: var(--space-4);
|
||||
overflow-x: auto;
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--ink-muted);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
table {
|
||||
|
||||
/* ── 사양 ── */
|
||||
.spec-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead th {
|
||||
.spec-table th,
|
||||
.spec-table td {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-faint);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-bottom: 1px solid var(--line-strong);
|
||||
}
|
||||
tbody th {
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
tbody td,
|
||||
tbody th {
|
||||
padding: var(--space-3);
|
||||
padding: var(--space-3) var(--space-2);
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
tbody td:not(.num) {
|
||||
color: var(--ink-muted);
|
||||
.spec-table thead th {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
color: var(--ink-muted);
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
.num {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
.spec-table tbody th {
|
||||
font-weight: 600;
|
||||
width: 28%;
|
||||
}
|
||||
.spec-table .num {
|
||||
font-size: var(--step-2);
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── 연락 ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: var(--space-4) var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
.contact-grid p {
|
||||
.spec-table td:last-child {
|
||||
color: var(--ink-muted);
|
||||
max-width: 34em;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* ── 마무리 ── */
|
||||
.closing {
|
||||
padding-block: var(--space-7);
|
||||
border-top: 2px solid var(--ink);
|
||||
}
|
||||
.closing-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.closing h2 {
|
||||
font-size: var(--step-3);
|
||||
font-weight: 900;
|
||||
max-width: 11em;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--accent-stroke);
|
||||
color: var(--accent);
|
||||
gap: 0.6em;
|
||||
min-height: 52px;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ink);
|
||||
color: var(--ink-on-dark);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background var(--dur-quick) var(--ease-soft),
|
||||
color var(--dur-quick) var(--ease-soft);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition: transform var(--dur-quick) var(--ease-out);
|
||||
}
|
||||
.btn::before {
|
||||
content: "";
|
||||
width: 1.4rem;
|
||||
height: 2px;
|
||||
background: var(--accent-on-dark);
|
||||
}
|
||||
.btn:hover {
|
||||
background: var(--accent-stroke);
|
||||
color: var(--surface);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* ── 푸터 ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.site-foot {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-block: var(--space-4);
|
||||
|
|
@ -460,81 +549,118 @@ tbody td:not(.num) {
|
|||
}
|
||||
.foot-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3) var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.foot-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* ── 등장 모션 ────────────────────────────────────────────────────────── */
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
translate: 0 12px;
|
||||
transition: opacity var(--dur-normal) var(--ease-soft),
|
||||
translate var(--dur-normal) var(--ease-soft);
|
||||
transition-delay: var(--delay, 0ms);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
transition: none;
|
||||
/* 넓은 화면: 조작 레일을 시험 상자 아래쪽 안으로 넣어 첫 화면에 상자와 손잡이가
|
||||
함께 들어오게 한다(1440×900 실측: 레일을 상자 밖에 두면 폴드 아래로 밀렸다). */
|
||||
@media (min-width: 961px) {
|
||||
.rail {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: var(--space-5) var(--space-5) var(--space-4);
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
background-color: var(--surface-chamber);
|
||||
color: var(--ink-on-dark);
|
||||
}
|
||||
/* 레일 위쪽만 상자 속으로 녹아들게 한다. 글자가 놓이는 면은 단색이다. */
|
||||
.rail::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
height: var(--space-6);
|
||||
background: linear-gradient(to top, var(--surface-chamber), rgb(7 8 8 / 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
.rail .control-hint,
|
||||
.rail .hud-note {
|
||||
color: var(--ink-on-dark-muted);
|
||||
}
|
||||
.rail input[type="range"]::-webkit-slider-runnable-track {
|
||||
background: var(--ink-on-dark-muted);
|
||||
}
|
||||
.rail input[type="range"]::-moz-range-track {
|
||||
background: var(--ink-on-dark-muted);
|
||||
}
|
||||
.rail input[type="range"]::-webkit-slider-thumb {
|
||||
border-color: var(--ink-on-dark);
|
||||
background: var(--accent);
|
||||
}
|
||||
.rail input[type="range"]::-moz-range-thumb {
|
||||
border-color: var(--ink-on-dark);
|
||||
background: var(--accent);
|
||||
}
|
||||
.rail :focus-visible {
|
||||
outline-color: var(--ink-on-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 반응형 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.bench-layout {
|
||||
grid-template-columns: 1fr;
|
||||
/* ── 반응형 ── */
|
||||
@media (max-width: 960px) {
|
||||
.bench-stage {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.hero h1,
|
||||
.hero .lead {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.rail {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.hud-note {
|
||||
grid-column: 1 / -1;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.section-head .index,
|
||||
.section-head h2,
|
||||
.section-head p {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.anatomy-grid,
|
||||
.mtf-panel {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.lens-figure {
|
||||
max-width: 26rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.hero {
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
.bench-stage {
|
||||
height: clamp(320px, 82vw, 540px);
|
||||
aspect-ratio: 4 / 3;
|
||||
min-height: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.two,
|
||||
.mtf-grid,
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-5);
|
||||
.rail {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding-inline: 0;
|
||||
}
|
||||
.section {
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.bench-ledger dl {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.bench-ledger dl > div,
|
||||
.bench-ledger dl > div:first-child {
|
||||
padding-inline: var(--space-3);
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.bench-ledger dl > div:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.head-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-1);
|
||||
.mtf-panel {
|
||||
padding: var(--space-4);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
column-gap: var(--space-4);
|
||||
row-gap: var(--space-2);
|
||||
margin-inline: calc(-1 * var(--space-2));
|
||||
}
|
||||
.head-inner {
|
||||
padding-block: var(--space-2);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.spec-table .num {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
}
|
||||
|
||||
.anatomy-text h2 {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,47 @@
|
|||
/* ==========================================================================
|
||||
Lumina Optics — 디자인 토큰
|
||||
프리셋: refraction / WebGL instrument
|
||||
컨셉 한 문장: 광학 시험대 — 유일한 색은 프리즘이 스스로 만드는 스펙트럼.
|
||||
레퍼런스: 방향 앵커 dogfood-optics(광학업종의 데이터 노출). 그 파일의 수치는
|
||||
audit-references.md 날조 판명 — 토큰은 브리프 재정의. UI는 무채색에
|
||||
가깝게: 색은 캔버스 안에서만 정당하다(design.md R2 원리와 같은 결).
|
||||
성능 예산: **상향 명시** — three.module.js ≈165KB(gzip) 지연 import.
|
||||
이 페이지의 제품이 WebGL 데모 자체이므로 데모 예산 상향 규칙 적용.
|
||||
UI JS(슬라이더 바인딩)는 인라인 <1KB.
|
||||
하지 않은 것: 스펙텔러 그라디언트 배경, 'unrivaled clarity' 카피,
|
||||
3열 카드. 이유: 광학은 곡선으로 말한다.
|
||||
Lumina Optics — 디자인 토큰 (2026-10 재작업)
|
||||
컨셉 한 문장: 18% 그레이 카드 위에 놓인 검은 시험 상자 — 색은 프리즘이 만든
|
||||
스펙트럼과 632.8 nm 헬륨네온 빨강 한 줄뿐이다.
|
||||
재작업 이유: 2026-09판은 pulsegate·synapse-bci와 같은 틀(니어블랙 바탕, 모노
|
||||
소문자 워드마크, 왼쪽 글·오른쪽 다크 패널, radius 2px, IBM Plex)
|
||||
이었다(레드팀 06 P0-1, tools/similarity.mjs 유사도 0.84).
|
||||
결정:
|
||||
- 바탕: 사진가가 노출을 맞추는 중성 회색 카드에서 출발해 본문 대비 7:1이
|
||||
나오도록 명도를 끌어올린 중간 회색(L*≈68). 어두운 면은 시험 상자 하나.
|
||||
- 서체: 한글 본문·표제 모두 SUIT. 숫자가 주인공인 페이지라 SUIT의 숫자 폭과
|
||||
900 굵기를 쓴다. 모노는 쓰지 않는다 — 수치는 tabular-nums로 맞춘다.
|
||||
- 형태: 렌즈는 원이다. 상자·패널은 큰 반경(28px), 조작부는 알약형.
|
||||
- 모션: 스크롤 등장 없음. 조작(슬라이더·드래그)에만 반응한다.
|
||||
하지 않은 것: 스펙트럼 그라디언트 배경, 'unrivaled clarity' 카피, 3열 카드,
|
||||
스크롤 리빌. 이유: 색과 움직임은 시험대가 소유한다.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* 타입 — 최대(58px) ÷ 본문(16px) ≈ 3.6배 */
|
||||
/* 타입 — 최대 표제(88px) ÷ 본문(17px) ≈ 5.2배. 숫자를 이미지로 쓴다. */
|
||||
--step--1: 0.8125rem;
|
||||
--step-0: 1rem;
|
||||
--step-1: 1.1875rem;
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
|
||||
--step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);
|
||||
--step-0: 1.0625rem;
|
||||
--step-1: 1.25rem;
|
||||
--step-2: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
|
||||
--step-3: clamp(2.375rem, 1.2rem + 4.6vw, 5.5rem);
|
||||
--step-num: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
|
||||
|
||||
--leading-tight: 1.24;
|
||||
--leading-normal: 1.72;
|
||||
--leading-tight: 1.08;
|
||||
--leading-normal: 1.7;
|
||||
|
||||
--font-body: "IBM Plex Sans", "IBM Plex Sans KR", Pretendard, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-body: "SUIT Variable", "SUIT", "Apple SD Gothic Neo", sans-serif;
|
||||
|
||||
/* 색 — 시험실 무채색. 살짝 청록 기운의 액센트는 '레이저 라인' 하나뿐. */
|
||||
--surface: #101214;
|
||||
--surface-raised: #15181b;
|
||||
--ink: #e8ecee;
|
||||
--ink-muted: #9ba4a9;
|
||||
--ink-faint: #849096;
|
||||
--line: #23272b;
|
||||
--line-strong: #394046;
|
||||
--accent: #bfe8ee; /* 레이저 라인(밝게 — 텍스트용) */
|
||||
--accent-stroke: #7fb9c4;
|
||||
/* 색 — 회색 카드와 검은 시험 상자 */
|
||||
--surface: #a6a9a9; /* 중간 회색 바탕 — 본문 잉크 대비 ≈7.8:1 */
|
||||
--surface-raised: #b9bcbc; /* MTF·표 면 */
|
||||
--surface-chamber: #070808; /* 시험 상자 */
|
||||
--ink: #0d0f10;
|
||||
--ink-muted: #2c3133; /* 회색 바탕 위 대비 ≈4.9:1 */
|
||||
--ink-on-dark: #e9eceb;
|
||||
--ink-on-dark-muted: #a9b0b1;
|
||||
--line: #7e8383;
|
||||
--line-strong: #0d0f10;
|
||||
--accent: #d4231a; /* 632.8 nm 헬륨네온 빨강 — 선·점·눈금 전용, 글자 금지 */
|
||||
--accent-on-dark: #ff5a4a;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
|
|
@ -44,14 +50,14 @@
|
|||
--space-5: 2.5rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 6rem;
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 8.5rem);
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
--radius: 2px;
|
||||
--radius: 28px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--container: 1240px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);
|
||||
--container: 1280px;
|
||||
--pad-inline: clamp(1rem, 0.6rem + 2.4vw, 4.5rem);
|
||||
|
||||
--dur-quick: 160ms;
|
||||
--dur-normal: 420ms;
|
||||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||||
--dur-quick: 140ms;
|
||||
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue