/* * 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 가능. * iteach4u 의 "premium editorial" 톤을 위해 amber 대신 brass 골드를 기본으로. * 다른 사이트는 브랜드 override 에서 다시 덮어쓸 수 있음. */ --color-accent: #b8893a; /* brass / aged gold */ --color-accent-hover: #a37828; --color-accent-soft: #f6ecd6; /* hero 뱃지/하이라이트 배경 */ --color-accent-soft-fg: #6e5018; --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; /* rose — "사람/연결/관계" 톤. danger(빨강 = 위험)와 의미 분리. * iteach4u 의 과외 섹션 등 "사람을 잇다" 메타포 영역에서 사용. */ --color-rose: #e11d48; /* rose-600 */ --color-rose-hover: #be123c; /* rose-700 */ --color-rose-fg: #ffffff; --color-rose-soft: #ffe4e6; /* rose-100 */ --color-rose-soft-fg: #be123c; /* 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 현행 */ --gradient-paper-warm: linear-gradient(160deg, #fbfaf6 0%, #ffffff 45%, #f0eefc 100%); /* iteach premium light */ --gradient-ink-deep: linear-gradient(160deg, #0f1226 0%, #1b1f44 55%, #2a2356 100%); /* iteach premium dark */ /* 브랜드 기본 hero 그라데이션 (브랜드 override 에서 덮음) */ --gradient-hero: var(--gradient-slate-soft); } /* ───────────────────────────────────────────────────────────── * 2. 브랜드 override * ───────────────────────────────────────────────────────────── */ /* iteach4u — indigo 계열 + brass 액센트, "premium editorial" 톤 */ [data-brand="iteach"] { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3; --color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3; /* brass 액센트는 :root 에서 이미 기본값. 명시적으로 한 번 더 고정해 다른 브랜드와의 차이를 분명히 함 */ --color-accent: #b8893a; --color-accent-hover: #a37828; --color-accent-soft: #f6ecd6; --color-accent-soft-fg: #6e5018; --gradient-hero: var(--gradient-paper-warm); } /* 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 는 amber 액센트 유지 (학사일정 highlight 톤) */ --color-accent: #f59e0b; --color-accent-hover: #d97706; --color-accent-soft: #fef3c7; --color-accent-soft-fg: #92400e; /* 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; /* sw4u 는 cyan 계열 액센트 (대시보드 톤) */ --color-accent: #06b6d4; --color-accent-hover: #0891b2; --color-accent-soft: #cffafe; --color-accent-soft-fg: #155e75; --gradient-hero: var(--gradient-sky-1); } /* ───────────────────────────────────────────────────────────── * 3. 다크 테마 (활성) * * 발동 조건: * 의미 변수만 덮어쓴다. light 토큰은 절대 건드리지 않음. * * 디자인 결정: * - 배경은 순회색이 아닌, 인디고 살짝 머금은 ink (warm). 종이 → 책가방 안 톤 전환. * - primary 는 light 의 indigo-600(#4f46e5) 그대로 두면 다크 위에서 명도 부족. * → indigo-400~500 사이로 한 단계 밝힘. 본문 대비 4.5:1 확보. * - 그림자는 거의 무효(검정 위 검정). 대신 미세한 inset 하이라이트로 입체. * - shadow-focus 의 alpha 도 다크에서 보이도록 강화. * ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* 표면 / 텍스트 */ --color-bg: #0b0e1a; /* 잉크 (순검정 X, 미세 인디고) */ --color-fg: #e8eaf3; /* 따뜻한 백색 */ --color-fg-muted: #9ba3c2; --color-fg-subtle: #6c7596; --color-border: #232846; --color-border-strong: #2f365e; --color-surface: #131730; /* 카드 1단 */ --color-surface-2: #1c2140; /* 카드 2단 / 강조 */ /* primary — 다크 보정. light 색을 그대로 쓰면 본문 대비 부족 → 한 단계 밝힘 */ --color-primary: #818cf8; /* indigo-400 */ --color-primary-hover: #a5b0fb; --color-primary-active: #c7cdfd; --color-primary-fg: #0b0e1a; /* 다크 위 indigo 버튼 위 텍스트는 어두운 잉크 */ --color-primary-soft: #1f2750; /* indigo soft 의 다크 등가물 */ --color-primary-soft-fg: #c7d2fe; /* accent (brass) — 다크에서는 살짝 더 밝게 */ --color-accent: #d9a85a; --color-accent-hover: #e8be77; --color-accent-soft: #2a2114; --color-accent-soft-fg: #f0d699; --color-accent-fg: #0b0e1a; /* status — 다크에서 보이도록 한 단계 밝힘 */ --color-success: #34d399; --color-success-hover: #6ee7b7; --color-success-soft: #0c2e22; --color-warn: #fbbf24; --color-warn-hover: #fcd34d; --color-warn-soft: #2a1f0a; --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-soft: #2a1010; --color-info: #38bdf8; --color-info-hover: #7dd3fc; --color-info-soft: #082230; /* rose 다크 보정 */ --color-rose: #fb7185; /* rose-400 — 다크에서 가독성 확보 */ --color-rose-hover: #fda4af; --color-rose-fg: #0b0e1a; --color-rose-soft: #2a1015; /* rose 그늘 톤 */ --color-rose-soft-fg: #fda4af; /* on-dark 계열은 light 와 동일 (이미 흰색 기준) */ /* 그림자: 검정 위 검정은 무의미. alpha 살짝 + 위쪽 하이라이트 inset 으로 입체 */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.6); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.04); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.04); --shadow-lg: 0 10px 30px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.05); --shadow-xl: 0 20px 50px rgb(0 0 0 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.06); --shadow-focus: 0 0 0 3px rgb(129 140 248 / 0.45); /* 기본 hero 그라데이션을 잉크 톤으로 (브랜드 override 가 없으면 적용) */ --gradient-hero: var(--gradient-ink-deep); } /* 브랜드별 다크 보정 — primary 와 hero 만 미세 조정 */ [data-theme="dark"][data-brand="iteach"] { /* iteach4u 다크 — premium ink + warm brass */ --color-primary: #818cf8; /* indigo-400 */ --color-primary-hover: #a5b0fb; --color-primary-active: #c7cdfd; --color-primary-soft: #1f2750; --color-primary-soft-fg: #c7d2fe; --gradient-hero: var(--gradient-ink-deep); } [data-theme="dark"][data-brand="neisme"] { /* neis.me 다크 — 보라 그라데이션은 그대로(이미 충분히 어두운 톤) */ --color-primary: #6ea8fe; --color-primary-hover: #9ec5fe; --color-primary-active: #cfe2ff; --color-primary-soft: #0d2447; --color-primary-soft-fg: #cfe2ff; /* neis.me 의 시그니처 보라 그라데이션은 광원이 더 강해야 다크에서 살아남음 */ --gradient-hero: linear-gradient(135deg, #4c4ea8 0%, #5a3478 100%); --gradient-navbar: linear-gradient(135deg, #4c4ea8 0%, #5a3478 100%); } [data-theme="dark"][data-brand="sw4u"] { /* sw4u 다크 — sky-400 으로 한 단계 밝힘 */ --color-primary: #38bdf8; --color-primary-hover: #7dd3fc; --color-primary-active: #bae6fd; --color-primary-soft: #082f49; --color-primary-soft-fg: #bae6fd; --gradient-hero: linear-gradient(135deg, #0c4a6e 0%, #155e75 100%); } /* prefers-color-scheme 자동 적용 — html 에 data-theme 미지정 시에만 동작 */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; } } /* ───────────────────────────────────────────────────────────── * 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; }