/* * web 디자인 시스템 — tokens.css * * 모든 사이트(iteach4u, neis.me, sw4u)가 공통으로 import 해서 사용한다. * 색/폰트/간격을 직접 하드코딩하지 말고 반드시 이 파일의 변수를 통해 참조한다. * * 사용 예 (각 사이트): * * * * data-brand: "iteach" | "neisme" | "sw4u" (생략 시 기본값 = iteach 팔레트) * data-theme: "light" | "dark" (생략 시 light, 향후 dark 단계적 도입) * * 작성: designer / 버전: 0.1.0 / 마지막 수정: 2026-04-29 */ /* ───────────────────────────────────────────────────────────── * 1. 공통 토큰 (모든 사이트, 모든 브랜드) * ───────────────────────────────────────────────────────────── */ :root { /* ── Typography ── */ --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* font-size scale (rem 기반, 16px = 1rem) */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 1.875rem; /* 30 */ --fs-3xl: 2.25rem; /* 36 */ --fs-4xl: 3rem; /* 48 */ /* line-height */ --line-tight: 1.3; --line-base: 1.65; /* 한국어 본문 권장 */ --line-loose: 1.8; /* letter-spacing — 한국어 헤딩 살짝 좁게 */ --letter-tight: -0.02em; --letter-normal: 0; --letter-wide: 0.02em; /* font-weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Spacing (4px 기반 8단계) ── */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ── Radius ── */ --radius-sm: 0.25rem; /* 4 — 작은 뱃지/버튼 */ --radius-md: 0.5rem; /* 8 — 기본 버튼/카드 */ --radius-lg: 0.75rem; /* 12 — 큰 카드/모달 */ --radius-xl: 1rem; /* 16 — 히어로/패널 */ --radius-full: 9999px; /* 알약형 */ /* ── Shadow ── */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-focus: 0 0 0 3px rgb(79 70 229 / 0.25); /* indigo focus ring 기본 */ /* ── Layout ── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-max: 1400px; --header-height: 64px; --header-height-mobile: 56px; /* ── Z-index 레이어 ── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 1000; --z-modal: 1100; --z-popover: 1200; --z-toast: 1300; /* ── Transition ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; /* ── Breakpoints (참고용 — CSS 변수는 @media 에 직접 못 씀) ── * sm: 640px * md: 768px * lg: 1024px * xl: 1280px * 2xl: 1536px */ /* ── Brand 중립 그레이 (모든 브랜드 공유) ── */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; /* ── 의미 색 (라이트 테마 기본) ── * 모든 사이트가 이 의미 변수를 사용. 실제 hex 는 브랜드 override 에서. */ --color-bg: #ffffff; --color-fg: var(--gray-900); --color-fg-muted: var(--gray-500); --color-fg-subtle: var(--gray-400); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-surface: var(--gray-50); /* 카드/패널 배경 */ --color-surface-2: var(--gray-100); /* 한 단계 더 강조 */ /* primary — 기본은 indigo (iteach4u 기준). 브랜드 override 에서 덮음. */ --color-primary: #4f46e5; /* indigo-600 */ --color-primary-hover: #4338ca; /* indigo-700 */ --color-primary-active: #3730a3; /* indigo-800 */ --color-primary-fg: #ffffff; --color-primary-soft: #eef2ff; /* indigo-50 — 배경/뱃지용 */ --color-primary-soft-fg: #3730a3; /* accent — 보조 강조색 (CTA, 하이라이트). 브랜드별 override 가능. */ --color-accent: #f59e0b; /* amber-500 */ --color-accent-fg: #ffffff; /* status — 각 상태는 base / hover / active / fg / soft 5단계 */ --color-success: #16a34a; --color-success-hover: #15803d; --color-success-active: #166534; --color-success-fg: #ffffff; --color-success-soft: #dcfce7; --color-warn: #d97706; --color-warn-hover: #b45309; --color-warn-active: #92400e; --color-warn-fg: #ffffff; --color-warn-soft: #fef3c7; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-active: #991b1b; --color-danger-fg: #ffffff; --color-danger-soft: #fee2e2; --color-info: #0284c7; --color-info-hover: #0369a1; --color-info-active: #075985; --color-info-fg: #ffffff; --color-info-soft: #e0f2fe; /* on-dark (그라데이션/짙은 배경 위에 올라가는 텍스트/테두리) */ --color-on-dark: #ffffff; --color-on-dark-muted: rgb(255 255 255 / 0.7); --color-on-dark-border: rgb(255 255 255 / 0.5); --color-on-dark-soft: rgb(255 255 255 / 0.1); --color-on-dark-soft-2: rgb(255 255 255 / 0.15); /* ── Gradient 라이브러리 (선택형 토큰) ── * 의미: 사이트 별로 hero/heading 섹션에서 골라 쓰는 옵션. * 기본 적용은 브랜드 override 에서 --gradient-hero 로 매핑. */ --gradient-purple-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* neis.me 기존 */ --gradient-purple-2: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); --gradient-indigo-1: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --gradient-blue-1: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); --gradient-sky-1: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); --gradient-sunset-1: linear-gradient(135deg, #f97316 0%, #ec4899 100%); --gradient-mint-1: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); --gradient-slate-soft: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #eef2ff 100%); /* iteach 현행 */ /* 브랜드 기본 hero 그라데이션 (브랜드 override 에서 덮음) */ --gradient-hero: var(--gradient-slate-soft); } /* ───────────────────────────────────────────────────────────── * 2. 브랜드 override * ───────────────────────────────────────────────────────────── */ /* iteach4u — indigo 계열, 학습 플랫폼 */ [data-brand="iteach"] { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3; --color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3; --gradient-hero: var(--gradient-slate-soft); } /* neis.me — Bootstrap blue 유지 + 보라 그라데이션 헤더 */ [data-brand="neisme"] { --color-primary: #0d6efd; --color-primary-hover: #0a58ca; --color-primary-active: #084298; --color-primary-soft: #e7f0ff; --color-primary-soft-fg: #0a58ca; /* neis.me 시그니처 보라 그라데이션 (#667eea → #764ba2) */ --gradient-hero: var(--gradient-purple-1); --gradient-navbar: var(--gradient-purple-1); } /* sw4u — sky 계열, 대시보드/시스템 톤 */ [data-brand="sw4u"] { --color-primary: #0ea5e9; --color-primary-hover: #0284c7; --color-primary-active: #0369a1; --color-primary-soft: #e0f2fe; --color-primary-soft-fg: #0369a1; --gradient-hero: var(--gradient-sky-1); } /* ───────────────────────────────────────────────────────────── * 3. 다크 테마 (단계적 도입 — 향후 확장) * * 사용 시점이 오면 [data-theme="dark"] 의 의미 변수를 채운다. * 현재는 자리만 잡아두고 비활성. * ───────────────────────────────────────────────────────────── */ /* [data-theme="dark"] { --color-bg: var(--gray-900); --color-fg: var(--gray-50); --color-fg-muted: var(--gray-400); --color-border: var(--gray-700); --color-surface: var(--gray-800); --color-surface-2: var(--gray-700); } */ /* ───────────────────────────────────────────────────────────── * 4. 베이스 리셋 — 한국어 가독성 최소 보정 * * 모든 사이트에 공통 적용되어야 하는 최소한의 본문 룰. * Bootstrap/Tailwind reset 위에 얹히는 가벼운 보정 레이어. * ───────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--line-base); color: var(--color-fg); background-color: var(--color-bg); word-break: keep-all; /* 한국어 줄바꿈 자연스럽게 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { letter-spacing: var(--letter-tight); line-height: var(--line-tight); word-break: keep-all; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }