/* ============================================================= * Design Tokens — extracted from Figma (file N2H7jFeGG09XXQJFtzNIxw, Design System node 18:102) * Source of truth: Figma Variables (see docs/components.md) * Edit Figma first, then re-extract; do not hand-tune values here without updating both. * ============================================================= */ :root { /* ----- Font family ----- */ --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif; /* ----- Brand color (Figma 18:102 · full Primary scale) ----- */ --color-primary: #ff8b00; --color-primary-25: #fffaf5; --color-primary-50: #fff4e0; --color-primary-100: #ffe5c2; --color-primary-200: #ffcf8f; --color-primary-300: #ffb55c; --color-primary-400: #ffa026; --color-primary-500: #ff8b00; --color-primary-550: #f08300; --color-primary-600: #d26900; --color-primary-700: #ad5200; --color-primary-800: #843d00; --color-primary-900: #5e2b00; --color-primary-950: #391900; /* CTA (버튼 강조) */ --color-cta: #f87e05; --color-brand-yellow: #fed211; /* All-in-one Yellow */ --color-brand-mint: #36d4ca; /* Global Mint */ --color-brand-pink: #fe5f8e; /* Happiness Pink */ --color-brand-purple: #bc74c2; /* Imagination Purple */ --color-secondary-50: #edfafd; /* ----- BI Color System (회사소개 > Color System 원색) ----- * 위 --color-brand-* 는 UI 용으로 밝게 조정된 값이라 원색과 다르다. * 상태 구분처럼 BI 원색이 필요한 곳은 아래 --color-bi-* 를 쓴다. */ --color-bi-mint: #41b9b2; /* Global Mint */ --color-bi-mint-50: #e6f5f4; --color-bi-mint-700: #1f7d77; --color-bi-mint-800: #16635e; /* 흰 글자 7.05 — 승인 버튼 hover */ --color-bi-green: #87ca37; /* All-in-one */ --color-bi-green-50: #eff7e3; --color-bi-green-700: #4e7a17; --color-bi-orange: #ef7e00; /* Challenge */ --color-bi-pink: #dd4973; /* Happiness */ --color-bi-pink-50: #fce9ef; --color-bi-pink-700: #b02a53; --color-bi-pink-800: #8e2143; /* 흰 글자 8.58 — 삭제 버튼 hover */ --color-bi-purple: #5a32b1; /* Imagination */ --color-bi-purple-50: #ece7f7; --color-bi-purple-700: #46268c; /* ----- Gray scale ----- */ --color-gray-25: #fdfdfd; --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #e9eaeb; --color-gray-300: #d5d7da; --color-gray-400: #a4a7ae; --color-gray-500: #717680; --color-gray-600: #535862; --color-gray-700: #414651; --color-gray-800: #252b37; --color-gray-900: #0a0d12; --color-white: #ffffff; /* ----- Alpha ----- */ --color-white-a80: #ffffffcc; /* ----- Surface / Border ----- */ --color-bg: #ffffff; --color-surface: #f8f8f8; --color-border: #e0e0e0; --color-border-strong: #d5d7da; /* ----- Text ----- */ --color-text-primary: #161616; /* ----- Status ----- */ --color-error: #f04343; --color-success: #17b26a; /* 유효성 통과 안내 (아이디 사용 가능 등) */ --color-status-negotiation: #37bab2; /* In Negotiation */ /* ----- Typography: Display (Hero / large) ----- */ --font-d1: 700 40px/1.4 var(--font-family); --font-d2: 700 32px/1.4 var(--font-family); --font-d3: 700 48px/1.4 var(--font-family); /* ----- Typography: Heading ----- */ --font-h1: 700 28px/1.4 var(--font-family); --font-h2: 700 24px/1.4 var(--font-family); --font-h3: 700 20px/1.4 var(--font-family); --font-h4: 700 18px/1.4 var(--font-family); /* ----- Typography: Body ----- */ --font-body1-sb: 600 18px/1.4 var(--font-family); --font-body1-md: 500 18px/1.4 var(--font-family); --font-body2-sb: 600 16px/1.5 var(--font-family); --font-body2-md: 500 16px/1.5 var(--font-family); --font-body3-sb: 600 14px/1.5 var(--font-family); --font-body3-md: 500 14px/1.5 var(--font-family); --font-body3-r: 400 14px/1.5 var(--font-family); /* ----- Typography: Caption ----- */ --font-caption1: 500 12px/1.5 var(--font-family); --font-caption2: 400 11px/1.5 var(--font-family); --font-caption3: 600 12px/1.5 var(--font-family); /* ----- Typography: Label ----- */ --font-label1: 600 14px/1.4 var(--font-family); --font-label2: 600 12px/1.4 var(--font-family); /* ----- Typography: Button ----- */ --font-btn-xl: 400 18px/1.4 var(--font-family); --font-btn-xl-active: 600 18px/1.4 var(--font-family); --font-btn-l: 500 16px/1.4 var(--font-family); --font-btn-l-active: 600 16px/1.4 var(--font-family); --font-btn-m: 500 14px/1.4 var(--font-family); --font-btn-m-active: 600 14px/1.4 var(--font-family); --font-btn-s: 500 12px/1.4 var(--font-family); --font-btn-s-active: 600 12px/1.4 var(--font-family); /* ----- Spacing (8px grid; provisional, adjust against Figma in P3) ----- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-30: 120px; /* ----- Radius (provisional) ----- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ----- Shadow (provisional) ----- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --shadow-card: 0 1px 3px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.05); /* ----- Layout (Figma Header is 1920 wide; content width TBD in P3) ----- */ /* ----- Breakpoints (RD-020) ----- * ⚠️ 커스텀 프로퍼티는 미디어쿼리 조건에서 평가되지 않는다. * @media (max-width: var(--bp-md)) 는 동작하지 않으므로 아래 값은 * "기록"일 뿐이고, 실제 미디어쿼리에는 리터럴을 쓴다. * 승인된 값 외 사용은 build.js 의 breakpoint 게이트가 빌드를 실패시킨다. * * --bp-lg 1024 → @media (max-width: 1023px) 태블릿 가로 이하 * 사이드바 → 드로어, 2단 그리드 → 1단 * --bp-md 768 → @media (max-width: 767px) 태블릿 세로 이하 * 헤더 → 햄버거, 표 → 가로 스크롤, 모달 → 바텀시트, 터치 타깃 44px * --bp-sm 480 → @media (max-width: 479px) 휴대폰 * 카드 비율·타이포 등 미관 조정 * * 이관 규칙: 붕괴 방지 규칙은 더 넓은 지점으로 올린다(일찍 접히는 건 안전). * 미관 규칙만 좁은 지점으로 내린다. */ --bp-lg: 1024px; --bp-md: 768px; --bp-sm: 480px; --container-app: 1920px; --container-page: 1440px; --container-text: 1200px; /* ----- Z-index ----- */ --z-header: 100; --z-dropdown: 200; --z-modal: 1000; --z-toast: 1100; }