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.
65 lines
2.4 KiB
CSS
65 lines
2.4 KiB
CSS
/* 스튜디오 폼 — 토큰. 색·크기·간격은 여기서만 정한다(05 Q-25). */
|
|
:root {
|
|
/* 서체: Gothic A1 한 패밀리, 두 웨이트. 표제·워드마크는 300(가늘고 넓게), 본문·색인은 400 */
|
|
--font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
|
--weight-light: 300;
|
|
--weight-body: 400;
|
|
|
|
/* 색: 밝은 중립 종이 위에 먹만 쓴다. 강조색 없음(배정). */
|
|
--surface: #fcfcfb;
|
|
--sheet: #ffffff;
|
|
--ink: #161716;
|
|
--ink-muted: #585b58;
|
|
--ink-faint: #6b6e6b;
|
|
--line: #d9dad7;
|
|
--line-strong: #9a9c99;
|
|
--ink-rgb: 22 23 22;
|
|
|
|
/* 타입 스케일. 한글 캡션 하한 13px, 본문 16px(typography §6-5) */
|
|
--step--1: 0.8125rem;
|
|
--step-0: 1rem;
|
|
--step-1: 1.125rem;
|
|
--step-2: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
|
|
--step-display: clamp(3.25rem, 1rem + 11vw, 11rem);
|
|
--leading-body: 1.7;
|
|
--leading-title: 1.55;
|
|
--leading-tight: 1.25;
|
|
|
|
/* 폭: 긴 문장 표제·본문 measure는 em(한글 32~40자) */
|
|
--measure: 36em;
|
|
--measure-title: 30em;
|
|
--rail-w: 15rem;
|
|
--sheet-max: 56rem;
|
|
--pad: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
|
|
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 1rem;
|
|
--space-4: 1.5rem;
|
|
--space-5: 2.5rem;
|
|
--space-6: clamp(3rem, 2rem + 3vw, 5rem);
|
|
--space-7: clamp(5rem, 3rem + 7vw, 10rem);
|
|
|
|
/* 모서리: 도면·종이. 0 고정(배정) */
|
|
--radius: 0;
|
|
|
|
/* 무대 비율: 넓은 화면은 극단 파노라마, 세로 화면은 띠가 되지 않게 다시 정한다 */
|
|
--stage-ratio: 3.6 / 1;
|
|
--panel-ratio: 2.4 / 1;
|
|
|
|
/* 모션: 상태 전환만 시간 기반. 진행선·도면 선은 스크롤 축 */
|
|
--dur-quick: 140ms;
|
|
--ease: cubic-bezier(0.25, 1, 0.35, 1);
|
|
|
|
/* 재질: 종이 결. feTurbulence 한 장을 타일로 굽는다(런타임 필터 없음). 아주 약하게 */
|
|
--grain-opacity: 0.08;
|
|
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@media (max-width: 64rem) {
|
|
:root { --stage-ratio: 2.4 / 1; --panel-ratio: 2 / 1; }
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
:root { --stage-ratio: 16 / 10; --panel-ratio: 16 / 10; }
|
|
}
|