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.
92 lines
4.6 KiB
CSS
92 lines
4.6 KiB
CSS
/*
|
|
목요일의 화원 — 디자인 토큰 (2026-10-06 재작업)
|
|
값의 근거는 design.md "토큰과 예산"에 있다. 토큰은 이 파일에만 정의한다 —
|
|
main.css 에서 같은 이름을 다시 정의하지 않는다(05 Q-25).
|
|
|
|
배경은 유채·분홍빛(#f7ebe9)이다. 흰 라넌큘러스·작약 사진의 바탕이 이미 크림이라
|
|
크림 종이 위에 놓으면 사진 가장자리가 사라졌다(이전 판 실측). 분홍은 흰 꽃을
|
|
띄우고, 잎의 녹색(120°)과 보색에 가까워 강조가 한 곳이면 충분히 보인다.
|
|
*/
|
|
:root {
|
|
/* ── 색 ──────────────────────────────────────────────
|
|
강조는 잎 녹색 하나. 예약 버튼·링크·선택 상태에만 쓴다.
|
|
분홍 바탕 위 녹색 글자 5.51:1, 녹색 버튼 위 흰 글자 6.42:1 (실측, scratch/contrast.mjs). */
|
|
--surface: #f7ebe9;
|
|
--surface-deep: #efd9d5; /* 사진 없는 아치 칸·띠. 먹 11.25:1, 녹색 4.75:1 */
|
|
--surface-card: #fcf5f3; /* 푸터 카드. 바탕보다 한 단 밝게 */
|
|
--ink: #2b2426;
|
|
--ink-muted: #5f5052; /* 바탕 위 6.54:1 */
|
|
--accent: #2f6b33;
|
|
--accent-deep: #255629; /* hover */
|
|
--accent-soft: #e4ece0; /* 녹색 위 글자 5.31:1 — 사진 없는 칸의 잎 표식 */
|
|
--line: #e2cdc8;
|
|
--arch-ring: rgb(43 36 38 / 0.08); /* 크림 사진이 분홍에 녹지 않게 아치 안쪽 1px */
|
|
--on-accent: #ffffff;
|
|
|
|
/* ── 타입 ────────────────────────────────────────────
|
|
표제 리디바탕 400 한 웨이트, 본문 Pretendard. 리디바탕은 전자책 본문용이라
|
|
대비가 낮고 1.25rem 이상에서 또렷하다 — 꽃 이름·표제에만 쓰고 본문에는 쓰지 않는다.
|
|
"RIDIBatang"은 설치본 패밀리명(로컬 폴백), "RIDI Batang"은 jsdelivr 배포 CSS의 이름이다. */
|
|
--font-display: "RIDI Batang", "RIDIBatang", "Nanum Myeongjo", serif;
|
|
--font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;
|
|
|
|
/* 표제는 작다(격자가 주인). 꽃 이름이 표제보다 크다 — 칸이 곧 내용이다. */
|
|
--step-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
|
|
--step-name: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
|
|
--step-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
|
|
--step-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
|
|
--step-body: 1rem;
|
|
--step-small: 0.875rem; /* 14px — 한글 보조 13px 이상 */
|
|
|
|
--track-display: -0.01em; /* 부리 표제, 2rem 이하라 -0.02em 까지 안 간다 */
|
|
--track-body: 0;
|
|
|
|
/* 본문 웨이트는 400 하나다. 가변 서브셋은 1440 첫 화면에서 349KB, 정적 400+600은 202KB 였다(실측).
|
|
굵기 대신 크기·색·부리/고딕 차이로 위계를 낸다. 토큰 이름은 역할로 남긴다 */
|
|
--weight-regular: 400;
|
|
--weight-medium: 400;
|
|
--weight-strong: 400;
|
|
|
|
--leading-tight: 1.3;
|
|
--leading-body: 1.7;
|
|
|
|
--measure: 34em; /* 한글 본문 32~40자 */
|
|
|
|
/* ── 간격·형태 ───────────────────────────────────────── */
|
|
--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(5rem, 3rem + 6vw, 9rem); /* 섹션 사이 */
|
|
|
|
--gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
|
|
--container: 1280px;
|
|
|
|
--radius: 12px; /* 버튼·카드·아치 아랫모서리 전부 이 값 하나 */
|
|
/* 아치: 윗모서리만 폭의 절반. 꽃다발을 세워 둔 실루엣(둥근 머리, 곧은 줄기)과 같다 */
|
|
--arch: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
|
|
--arch-ratio: 4 / 5;
|
|
|
|
/* ── 모션 ────────────────────────────────────────────
|
|
첫 화면의 아치 칸이 한 번 순서대로 떠오른다(스태거). 그 뒤는 hover 만.
|
|
감소 모션에서는 등장 애니메이션을 끄고 hover 색 변화만 남긴다. */
|
|
--dur: 220ms;
|
|
--dur-enter: 700ms;
|
|
--stagger: 70ms;
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
|
/* ── 모바일 하단 행동 바 ─────────────────────────────
|
|
env() 는 viewport-fit=cover 가 있어야 값이 들어온다(index.html meta). */
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--action-bar-h: 4.5rem;
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--ink-muted: #3f3537;
|
|
--line: #c9aea8;
|
|
}
|
|
}
|