6e05e69ca4
정적 검사로는 안 잡히고 320px 실렌더에서만 나온 것들이다. 발견 내용은 페이지의 프리플라이트 로그 섹션에 그대로 실었다. 1. 320px 가로 오버플로 13px 표를 overflow 컨테이너로 감쌌는데도 넘쳤다. grid item 의 기본 min-width 가 auto 라 콘텐츠가 부모를 밀어낸다. min-width:0 이 있어야 overflow-x 가 실제로 작동한다. 2. 다크 밴드 버튼 대비 2.88:1 (기준 4.5:1) 밴드가 --accent 만 반전시키고 --accent-ink 는 흰색으로 뒀다. --accent-ink-inverse 토큰을 추가해 함께 반전시킨다. 6.21:1 로 회복. 3. 파이프라인 6단계 중 뒤 3개가 영영 opacity 0 ← 가장 심각 animation-range 의 cover 22% 에 페이지 하단 요소는 도달하지 못한다. 스크롤을 끝까지 내려도 이 페이지의 본체가 절반 사라진 상태였다. 이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다. 스크롤 진입 연출을 제거했다. 남은 모션은 호버·포커스뿐이다. 하드 게이트 12/12 전부 통과 (8개 정적 + 4개 실렌더). 실렌더 대비 최저 6.21:1, AA 미달 0건.
128 lines
5.4 KiB
CSS
128 lines
5.4 KiB
CSS
/* ============================================================
|
|
designpaca 소개 페이지 — 디자인 토큰
|
|
프리셋: swiss-minimal / 비율 1.25 / 강조색 1개 / radius 2종
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* ---- 폰트 패밀리 ---------------------------------------- */
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--mono-size: 0.9375em; /* 부모 대비. 새 스케일 단계를 만들지 않는다 */
|
|
|
|
/* ---- 색: 라이트 (기본) ----------------------------------- */
|
|
--surface: #FAF9F6; /* 웜 오프화이트. 순백 아님 (A-07) */
|
|
--surface-raised: #F2F0EA;
|
|
--surface-inverse: #14161A; /* 다크 밴드. 순흑 아님 */
|
|
--ink: #16181C; /* 대비 16.88:1 */
|
|
--ink-muted: #5A5F66; /* 대비 6.11:1 */
|
|
--ink-inverse: #E9E7E2; /* 밴드 위 14.66:1 */
|
|
--ink-muted-inverse: #9AA0A6; /* 밴드 위 6.86:1 */
|
|
--line: #DFDCD4; /* 1.30:1 — 장식 구분선 전용 */
|
|
--line-inverse: #2A2E34; /* 1.33:1 — 장식 구분선 전용 */
|
|
--line-strong: var(--ink-muted); /* 입력·컨트롤 테두리. WCAG 1.4.11 (3:1) */
|
|
--accent: #0E6B63; /* 딥 틸. 대비 6.04:1 */
|
|
--accent-ink: #FFFFFF; /* 강조 위 글자. 6.36:1 */
|
|
--accent-inverse: #3FA89D; /* 밴드 위 강조. 6.30:1 */
|
|
--accent-ink-inverse: #0B1A18; /* 밴드 위 강조 위의 글자. 6.43:1 */
|
|
|
|
/* ---- 형태: radius 2종 (게이트 #3) ------------------------ */
|
|
--radius-sm: 3px; /* 버튼·입력·배지 */
|
|
--radius-md: 6px; /* 카드·코드 블록 */
|
|
|
|
/* ---- 간격 ------------------------------------------------ */
|
|
--space-1: 0.25rem; /* 4 */
|
|
--space-2: 0.5rem; /* 8 */
|
|
--space-3: 1rem; /* 16 */
|
|
--space-4: 1.5rem; /* 24 */
|
|
--space-5: 2.5rem; /* 40 */
|
|
--space-6: 4rem; /* 64 */
|
|
--space-7: 6rem; /* 96 — 일반 섹션 상하 */
|
|
--space-8: 8rem; /* 128 — 다크 밴드 상하. 본문 간격의 8배 */
|
|
|
|
/* ---- 모션 ------------------------------------------------ */
|
|
--dur-instant: 100ms; /* 호버·포커스 */
|
|
--dur-quick: 200ms; /* 작은 등장·퇴장 */
|
|
--dur-normal: 320ms; /* 패널·전환. 2단계 상한 */
|
|
--dur-slow: 600ms; /* 이 프로젝트에서는 사용하지 않는다 */
|
|
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-in: cubic-bezier(0.64, 0, 0.78, 0);
|
|
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
|
|
/* bounce·elastic 없음 (E-02) */
|
|
}
|
|
|
|
/* ---- 색: 다크 테마 — 라이트와 동등하게 정의 ------------------ */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--surface: #14161A;
|
|
--surface-raised: #1C1F24;
|
|
--surface-inverse: #FAF9F6; /* 다크에서는 밴드가 밝아진다 */
|
|
--ink: #E9E7E2;
|
|
--ink-muted: #9AA0A6;
|
|
--ink-inverse: #16181C;
|
|
--ink-muted-inverse: #5A5F66;
|
|
--line: #2A2E34;
|
|
--line-inverse: #DFDCD4;
|
|
--line-strong: var(--ink-muted);
|
|
--accent: #3FA89D; /* 6.30:1 */
|
|
--accent-ink: #0B1A18; /* 6.21:1 */
|
|
--accent-inverse: #0E6B63;
|
|
--accent-ink-inverse: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
/* ---- 타입: 한국어판 --------------------------------------- */
|
|
[lang="ko"] {
|
|
--font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
|
|
|
|
--step-0: 1.0625rem; /* 17 — 본문 · eyebrow · 코드 */
|
|
--step-1: 1.328rem; /* 21.3 — 리드 */
|
|
--step-2: 1.660rem; /* 26.6 — h3 */
|
|
--step-3: 2.076rem; /* 33.2 — h2 */
|
|
--step-4: 2.595rem; /* 41.5 — h1 */
|
|
--display: clamp(2.595rem, 1.6rem + 4.2vw, 4.25rem); /* → 68 */
|
|
|
|
--leading-tight: 1.15;
|
|
--leading-normal: 1.7; /* 한글은 넉넉하게 */
|
|
--measure: 33em; /* ≈ 561px. 한글 글자폭 ≈ 1em */
|
|
|
|
--tracking-display: -0.01em; /* 한글은 음수 자간을 크게 주지 않는다 */
|
|
--tracking-body: 0; /* 한글 본문 음수 자간 금지 */
|
|
--tracking-label: 0.08em;
|
|
|
|
word-break: keep-all;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* ---- 타입: 영어판 ------------------------------------------ */
|
|
[lang="en"] {
|
|
--font-sans: "Switzer", system-ui, -apple-system, sans-serif;
|
|
|
|
--step-0: 1rem; /* 16 */
|
|
--step-1: 1.25rem; /* 20 */
|
|
--step-2: 1.5625rem; /* 25 */
|
|
--step-3: 1.953rem; /* 31.3 */
|
|
--step-4: 2.441rem; /* 39 */
|
|
--display: clamp(2.441rem, 1.5rem + 4vw, 4rem); /* → 64 */
|
|
|
|
--leading-tight: 1.1;
|
|
--leading-normal: 1.55;
|
|
--measure: 65ch; /* ≈ 640px */
|
|
|
|
--tracking-display: -0.025em;
|
|
--tracking-body: 0;
|
|
--tracking-label: 0.08em;
|
|
}
|
|
|
|
/* ---- 다크 밴드: 게이트 #4가 요구하는 "규칙으로 정의된 반전" ---- */
|
|
/* 사용처는 히어로와 설치 섹션 두 곳뿐이다. 그 외 사용 금지. */
|
|
.band-inverse {
|
|
--surface: var(--surface-inverse);
|
|
--ink: var(--ink-inverse);
|
|
--ink-muted: var(--ink-muted-inverse);
|
|
--line: var(--line-inverse);
|
|
--accent: var(--accent-inverse);
|
|
--accent-ink: var(--accent-ink-inverse);
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
padding-block: var(--space-8);
|
|
}
|