14cb138e1a
- HIG(탭바 5~6·시트)·M3(바텀내비 3~5·48dp)·NN/g·CSS-Tricks 조사(research/mobile-app-ux-v1.md) 후 Nielsen 10 감사로 위반 도출 - 바텀 내비 5탭 + 더보기 바텀 시트(그룹 헤더), 뷰·다이얼로그 pushState/popstate — 안드로이드 백 키가 앱 내 뒤로 작동 - safe area(env+max)·입력 16px(iOS 확대 방지)·coarse 44px 타깃·tap-highlight·overscroll 위생, 인쇄에서 모바일 크롬 제거 - PWA: manifest + sharp 생성 아이콘(가온=장부 문항, 두레=시간표 블록) - tools/e2e.mjs L6 시나리오: RED 1,742 단언 318 실패 → GREEN 1,762/0, verify 체인 7계층 통과 - 실기기(안드로이드 에뮬레이터·Chrome) 텍스트 근거 검증 — 백 키·시트·탭 전환, iOS 는 WebKit(L4) 대체 - 스킬 내재화: mobile-app-ux.md, audit-gate 7계층·하니스 12~14, design-gate 터치타깃 검사, SKILL.md 규칙 7 - 도그푸드: 게이트가 죽은 선택자 8종·thresholds 병합 버그 적발 — CSS v22(양앱) 범프 후 전체 재검증
85 lines
3.5 KiB
CSS
85 lines
3.5 KiB
CSS
/* ==========================================================================
|
|
두레대학 수강신청 — 디자인 토큰 (v3: 프로덕션 콘솔)
|
|
프리셋: production-console — shadcn/ui (new-york) zinc 스키마 + 벽돌 액센트 1.
|
|
컨셉 한 문장: 실제 대학이 쓰는 것 같은 수강신청 — 도장은 액센트 하나로 남고
|
|
나머지는 완성도로 말한다.
|
|
레퍼런스: shadcn/ui 디자인 시스템. 종이/배판 컨셉은 철회(사용자 판정).
|
|
하지 않은 것: 신문 배판 마스트헤드, 세리프 마스트, 전공별 색, 진행바 게이지.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
--step--2: 0.6875rem; /* 11px */
|
|
--step--1: 0.75rem; /* 12px */
|
|
--step-0: 0.875rem; /* 14px — 본문 */
|
|
--step-1: 1rem; /* 16px */
|
|
--step-2: 1.125rem; /* 18px */
|
|
--step-3: 1.5rem; /* 24px */
|
|
--step-4: 1.875rem; /* 30px */
|
|
|
|
--leading-tight: 1.3;
|
|
--leading-normal: 1.6;
|
|
|
|
--font-body: "IBM Plex Sans KR", "Pretendard Variable", -apple-system, sans-serif;
|
|
--font-display: "Noto Serif KR", "IBM Plex Sans KR", serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono-size: 0.8125rem;
|
|
|
|
--background: #fafafa;
|
|
--card: #ffffff;
|
|
--foreground: #09090b;
|
|
--muted: #fafafa;
|
|
--muted-2: #f4f4f5;
|
|
--muted-foreground: #64646e; /* zinc-50/gray-100 위 5.2:1 이상 */
|
|
--faint: #6e6e77; /* WCAG 4.5:1 보정 */
|
|
--border: #e4e4e7;
|
|
--border-strong: #d4d4d8;
|
|
--primary: #18181b;
|
|
--primary-foreground: #fafafa;
|
|
--ring: #a1a1aa;
|
|
--accent: #c2410c; /* 벽돌 — 申 도장과 신청 액션만 */
|
|
--accent-soft: #fff7ed;
|
|
--accent-ink: #9a3412;
|
|
--on-accent: #ffffff; /* 벽돌·남색 배경 위 잉크 */
|
|
--accent-tint-2: color-mix(in srgb, var(--accent) 55%, var(--on-accent)); /* 평가 막대 농도 2단 */
|
|
--accent-tint-3: color-mix(in srgb, var(--accent) 22%, var(--on-accent)); /* 평가 막대 농도 3단 */
|
|
--success: #059669; --success-soft: #ecfdf5; --success-ink: #065f46;
|
|
--warning: #b45309; --warning-soft: #fffbeb; --warning-ink: #92400e;
|
|
--danger: #dc2626; --danger-soft: #fef2f2; --danger-ink: #991b1b;
|
|
|
|
/* 표지판(남색 잉크판) 위 잉크 — 모달 왼쪽 판 전용 */
|
|
--panel-muted: #a1a1aa;
|
|
--panel-faint: #71717a;
|
|
--panel-line: rgb(250 250 250 / 0.12);
|
|
--panel-mark: rgb(250 250 250 / 0.05); /* 표지판 물마크 */
|
|
--backdrop-dim: rgb(9 9 11 / 0.55);
|
|
|
|
/* 인쇄 매체 — 종이 위 잉크 */
|
|
--print-line: #c9cdd3;
|
|
--print-paper: #ffffff;
|
|
|
|
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
|
|
--space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
|
|
|
|
/* 반지름 — 5종 규모 (가온과 같은 문법) */
|
|
--radius-xs: 4px;
|
|
--radius: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-pill: 999px;
|
|
|
|
/* 모션 문법 — 한 곡선·세 지속시간 */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--dur-1: 80ms;
|
|
--dur-2: 140ms;
|
|
--dur-3: 200ms;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
|
|
/* 안전 영역 — viewport-fit=cover 선언 후에만 0이 아닌 값이 온다(WebKit 공식·MDN env()) */
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-left: env(safe-area-inset-left, 0px);
|
|
--safe-right: env(safe-area-inset-right, 0px);
|
|
}
|