90 lines
3.6 KiB
CSS
90 lines
3.6 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);
|
|
|
|
--workspace-radius: 8px;
|
|
--workspace-rule: var(--border);
|
|
--workspace-body-size: 0.9375rem;
|
|
--workspace-meta-size: 0.8125rem;
|
|
|
|
/* 안전 영역 — 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);
|
|
}
|