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.
131 lines
3.5 KiB
CSS
131 lines
3.5 KiB
CSS
/* 철판클럽 토큰 — 2026-10-06 재작업(outputs/rework-2026-10-06/plan.md 배정값).
|
|
색·서체·radius·모션 값은 이 파일에만 둔다. site.css·franchise.css는 var()만 쓴다. */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
/* 바탕 — 유채 크림. 쟁반 위 유산지의 색이다. 섹션 교대는 밝은 크림(surface)과 진한 크림(bg-deep)으로만 한다 */
|
|
--bg: #fbe9c8;
|
|
--bg-deep: #f4d9a3;
|
|
--surface: #fff7e8;
|
|
--surface-rgb: 255 247 232;
|
|
|
|
/* 먹 — 따뜻한 갈색 먹. 패티 가장자리의 색. 크림 위 대비 14.3:1 */
|
|
--ink: #26190f;
|
|
--ink-soft: #5c4a39; /* 7.0:1 */
|
|
--ink-faint: #6b5744; /* 5.7:1 — 보조 라벨 하한 */
|
|
--ink-rgb: 38 25 15;
|
|
--on-ink: #fbe9c8;
|
|
--on-ink-soft: #e9d2a8; /* 먹 위 11.6:1 */
|
|
--on-ink-faint: #c9b79b; /* 먹 위 8.7:1 */
|
|
|
|
/* 선 — 크림보다 한 단 진한 모래색 */
|
|
--line: #e2c99e;
|
|
--line-strong: #b89a6c;
|
|
|
|
/* 강조 — 코발트(유지). 쟁반과 클립의 색. 크림 위 5.6:1, 흰 글자 6.7:1 */
|
|
--blue: #2147e7;
|
|
--blue-dark: #1533ac;
|
|
--blue-pale: #dbe3ff;
|
|
--on-blue: #ffffff;
|
|
--on-blue-soft: #dbe3ff; /* 코발트 위 5.3:1 */
|
|
|
|
/* 치즈 — 스티커 한 장에만 쓴다 */
|
|
--cheese: #ffc642;
|
|
--on-cheese: #26190f; /* 10.9:1 */
|
|
|
|
/* 상태 */
|
|
--danger: #b33124; /* 크림 위 5.2:1 */
|
|
--success: #17683b; /* 5.7:1 */
|
|
--pause: #7a5a10; /* 5.3:1 */
|
|
--focus: #2147e7;
|
|
|
|
/* 서체 — 표제 Jua(한 굵기), 본문 Gothic A1. 둘 다 Google Fonts OFL, 한글 슬라이스 서브셋 */
|
|
--font-display: "Jua", "Gothic A1", "Apple SD Gothic Neo", sans-serif;
|
|
--font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
|
--weight-body: 500;
|
|
--weight-strong: 700;
|
|
--weight-heavy: 800;
|
|
|
|
/* 타입 스케일 — 본문 16, 표제는 vw 보간 */
|
|
--text-xs: 13px;
|
|
--text-sm: 14px;
|
|
--text-md: 16px;
|
|
--text-lg: clamp(17px, 1.4vw, 19px);
|
|
--text-h3: clamp(24px, 2.2vw, 30px);
|
|
--text-h2: clamp(36px, 4.4vw, 60px);
|
|
--text-h1: clamp(46px, 6.2vw, 92px);
|
|
--leading-body: 1.7;
|
|
--leading-tight: 1.2;
|
|
--leading-display: 1.14;
|
|
--tracking-display: -0.01em;
|
|
|
|
/* 폭 */
|
|
--wrap: 1180px;
|
|
--measure: 36em;
|
|
--hero-wide: 2160px;
|
|
--stage-wide: 1680px;
|
|
--workbench-wide: 1480px;
|
|
--copy-wide: 880px;
|
|
--media-wide: 1100px;
|
|
--gutter: clamp(18px, 4vw, 52px);
|
|
--section: clamp(72px, 9vw, 128px);
|
|
|
|
/* 간격 */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 24px;
|
|
--space-6: 32px;
|
|
--space-7: 48px;
|
|
--space-8: 72px;
|
|
|
|
/* radius — 알약과 16px, 둘뿐이다 */
|
|
--radius: 16px;
|
|
--radius-pill: 999px;
|
|
|
|
/* 깊이 — 그림자는 콜라주 조각에만 */
|
|
--shadow-piece: 0 24px 60px rgb(38 25 15 / 18%);
|
|
--shadow-card: 0 10px 30px rgb(38 25 15 / 10%);
|
|
|
|
/* 모션 — 스태거 등장(히어로 조각) + 마퀴. 감소 모션에서는 전부 0 */
|
|
--dur: 520ms;
|
|
--dur-fast: 180ms;
|
|
--stagger: 90ms;
|
|
--shift: 28px;
|
|
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
--marquee-dur: 32s;
|
|
|
|
--header-height: 72px;
|
|
--action-bar-height: 64px;
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
:root {
|
|
--header-height: 60px;
|
|
--section: 64px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 120rem) {
|
|
:root {
|
|
--wrap: 1320px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 150rem) {
|
|
:root {
|
|
--wrap: 1400px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--dur: 0.01ms;
|
|
--dur-fast: 0.01ms;
|
|
--stagger: 0ms;
|
|
--shift: 0px;
|
|
--marquee-dur: 0.01ms;
|
|
}
|
|
}
|