/* ============================================ Connectia Design Tokens ============================================ */ /* -------------------------------------------- board-proto-delivery.zip 이후 추가된 항목 --color-on-primary-faint : rgba(255,255,255,0.2) — 어두운 배경 위 장식 아이콘 --color-banner-gradient : linear-gradient(135deg, purple-700 → purple-900) — 배너 배경 -------------------------------------------- */ @font-face { font-family: 'Pretendard'; src: url('https://jober-chat-documents.s3.ap-northeast-2.amazonaws.com/fonts/PretendardVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ========================================== PALETTE raw 색상값. 시맨틱 토큰에서만 참조할 것. ========================================== */ /* Purple */ --palette-purple-50: #ededfb; --palette-purple-100: #d5d5f5; --palette-purple-200: #a9a9ee; --palette-purple-300: #8a8ae5; --palette-purple-400: #6b6be1; --palette-purple-500: #5555cc; --palette-purple-600: #4242a6; --palette-purple-700: #2d2d7a; --palette-purple-800: #1e1e5a; --palette-purple-900: #121238; /* Gray */ --palette-gray-0: #ffffff; --palette-gray-50: #f2f2f7; --palette-gray-100: #ecedf5; --palette-gray-200: #d8d9e7; --palette-gray-300: #b3b5c4; --palette-gray-500: #767985; --palette-gray-700: #252638; --palette-gray-900: #111318; /* Stone — 카드형 프로필 템플릿의 따뜻한 중립색 */ --palette-stone-100: #efece5; --palette-stone-400: #a39d93; --palette-stone-500: #8b857b; /* Red */ --palette-red-100: #fde2dc; --palette-red-400: #f87171; --palette-red-500: #c94022; /* Orange */ --palette-orange-400: #fb923c; --palette-orange-500: #f97316; /* Amber */ --palette-amber-100: #fef3c7; --palette-amber-300: #fcd34d; --palette-amber-400: #f59e0b; --palette-amber-600: #d97706; --palette-amber-700: #b45309; /* Yellow */ --palette-yellow-400: #facc15; --palette-yellow-500: #eab308; /* Green */ --palette-green-100: #dcfce7; --palette-green-400: #4ade80; --palette-green-500: #22c55e; --palette-green-600: #16a34a; --palette-green-700: #15803d; /* Emerald */ --palette-emerald-400: #34d399; --palette-emerald-500: #10b981; --palette-emerald-600: #059669; /* Teal */ --palette-teal-400: #2dd4bf; /* Cyan */ --palette-cyan-400: #22d3ee; /* Blue */ --palette-blue-300: #93c5fd; --palette-blue-400: #60a5fa; --palette-blue-500: #3b82f6; /* Violet */ --palette-violet-50: #f5f3ff; --palette-violet-200: #ddd6fe; --palette-violet-500: #8b5cf6; --palette-violet-700: #6d28d9; /* Pink */ --palette-pink-300: #f9a8d4; --palette-pink-500: #ec4899; /* Rose */ --palette-rose-400: #fb7185; --palette-rose-500: #f43f5e; --palette-rose-600: #e11d48; /* Slate */ --palette-slate-50: #f8fafc; --palette-slate-300: #cbd5e1; --palette-slate-500: #64748b; --palette-slate-700: #334155; --palette-slate-900: #0f172a; /* Zinc */ --palette-zinc-800: #27272a; --palette-zinc-900: #18181b; /* Brand — 외부 서비스(소셜 로그인) 고정 브랜드 컬러 */ --palette-kakao-yellow: #fee500; --palette-kakao-ink: #191919; --palette-coral-500: #ef5a4e; /* 다홍 — 알림 신청 같은 눈에 띄는 보조 강조 */ --palette-apple-black: #000000; --palette-facebook-blue: #1877f2; --palette-linkedin-blue: #0a66c2; /* Fellows — 펠로우즈 로고 올리브 그린 (#5a7344) 기준 */ --palette-olive-50: #f1f4ec; --palette-olive-100: #dfe7d4; --palette-olive-500: #5a7344; --palette-olive-700: #3f5230; /* Warm — 캠퍼스 선배 카드 문장 강조 (Chocolate / Peach Glow / Pale Amber / Muted Olive) */ --palette-warm-chocolate: #d57530; --palette-warm-peach: #ffbc92; --palette-warm-amber: #eee47d; --palette-warm-olive: #9fb768; /* Forest — 펠로우즈 캠퍼스 (로고를 이 초록으로 칠한 판) */ --palette-forest-50: #f3f8f0; --palette-forest-100: #eaf3ec; --palette-forest-500: #2f7a3f; --palette-forest-700: #225c2f; --palette-lime-100: #edf7be; --palette-sage-200: #c9d8a5; --palette-sage-400: #7fa05a; /* Pastel — 프로필 페이지 배경용 저채도 색 */ /* 대화하기 버튼 — 파스텔 배경과 어울리도록 채도를 낮춘 깊은 색 */ --palette-soft-apricot: #f0c9a4; --palette-soft-blossom: #f6c3cd; --palette-deep-plum: #6a5b9a; --palette-deep-ocean: #4a6f96; --palette-deep-forest: #4e7d63; --palette-deep-clay: #b5824f; --palette-pastel-cream: #fdf4e7; --palette-pastel-blush: #fdeef1; --palette-pastel-lilac: #f1eefb; --palette-pastel-sky: #e9f2fb; --palette-pastel-mint: #e8f5ee; /* ========================================== SEMANTIC COLORS 용도 기반. 실제 코드에서 이 변수를 사용. ========================================== */ /* Brand */ --color-primary: var(--palette-purple-400); --color-primary-dark: var(--palette-purple-600); --color-primary-light: var(--palette-purple-50); --color-primary-subtle: var(--palette-purple-100); --color-brand-gradient: linear-gradient(135deg, #6b6be1 0%, #e94f6e 100%); /* Surface */ --color-bg: var(--palette-gray-50); --color-surface: var(--palette-gray-0); --color-surface-sub: var(--palette-gray-100); --color-surface-strong: var(--palette-gray-200); /* 회색 면끼리 구분이 필요할 때 한 단계 진한 면 */ --color-card: #fefefe; --color-surface-dark: var(--palette-gray-900); /* 카메라 뷰 등 어두운 면 */ /* Text */ --color-text: var(--palette-gray-900); --color-text-sub: var(--palette-gray-700); --color-text-muted: var(--palette-gray-500); --color-text-faint: var(--palette-gray-300); /* 아직 못 고르는 탭처럼 한 단계 더 물러난 글자 */ --color-text-warm-sub: var(--palette-stone-500); /* 카드형 프로필의 보조 글자 — 화살표·작성자·전체보기 */ --color-text-warm-faint: var(--palette-stone-400); /* 카드형 프로필의 날짜처럼 가장 물러난 글자 */ /* Border & Input */ --color-border: var(--palette-gray-200); --color-border-subtle: var(--palette-gray-100); /* 버튼 등 면이 넓은 컨트롤의 옅은 테두리 */ --color-input: var(--palette-gray-200); --color-line-warm: var(--palette-stone-100); /* 카드형 프로필의 행 구분선·옅은 테두리 */ /* Status */ --color-destructive: var(--palette-red-500); --color-destructive-subtle: var(--palette-red-100); --color-success: var(--palette-green-500); --color-success-dark: var(--palette-deep-forest); /* 흰 배경 위 성공 텍스트·채워진 성공 버튼 */ --color-success-subtle: var(--palette-green-100); --color-warning: var(--palette-amber-400); /* 주의 — 중복 스캔 등 */ --color-warning-dark: var(--palette-deep-clay); --color-warning-subtle: var(--palette-amber-100); --color-star: var(--palette-amber-400); --color-star-empty: var(--palette-gray-200); /* Inverse / On-Color */ --color-on-primary: var(--palette-gray-0); /* 채워진 버튼·배지 위 텍스트·아이콘 */ --color-on-primary-sub: rgba(255,255,255,0.75); /* 브랜드 배경 위 보조 텍스트 */ --color-on-primary-faint: rgba(255,255,255,0.2); /* 어두운 배경 위 장식 아이콘 */ --color-card-stack: rgba(26,20,10,0.07); /* 명함 카드 아래로 한 장 더 비치는 종이 */ --color-scrim: rgba(0,0,0,0.4); /* 이미지 위 삭제 버튼 등 어두운 스크림 */ --color-scrim-strong: rgba(0,0,0,0.6); /* 사진 위 글자가 묻힐 때 쓰는 진한 스크림 */ --color-scrim-heavy: rgba(0,0,0,0.85); /* 배경이 복잡한 사진 위에 글자를 얹을 때 */ --color-surface-glass: rgba(255,255,255,0.92); /* 이미지·영상 위에 얹는 반투명 흰 배경 (play 버튼 등) */ --color-surface-veil: rgba(255,255,255,0.7); /* 페이지 배경 위에 얹는 반투명 흰 면 — 배경 색조가 비쳐 어떤 테마에도 어울린다 */ --color-surface-haze: rgba(255,255,255,0.45); /* veil 보다 한 단계 옅은 면 — 목록을 묶되 면처럼 보이지 않는다 */ --color-glass-fill: rgba(255,255,255,0.14); /* 사진 위 유리 버튼의 면 */ --color-glass-line: rgba(255,255,255,0.35); /* 사진 위 유리 버튼의 테두리 */ /* Social Brand — 소셜 로그인 버튼 (브랜드 가이드상 색 고정) */ --color-kakao: var(--palette-kakao-yellow); --color-on-kakao: var(--palette-kakao-ink); --color-apple: var(--palette-apple-black); --color-on-apple: var(--palette-gray-0); --color-facebook: var(--palette-facebook-blue); /* 페이스북 공유 버튼 (브랜드 색 고정) */ --color-on-facebook: var(--palette-gray-0); --color-linkedin: var(--palette-linkedin-blue); /* 링크드인 공유 버튼 (브랜드 색 고정) */ --color-on-linkedin: var(--palette-gray-0); /* Coral — 다홍. 알림 신청 등 눈에 띄는 보조 강조 */ --color-coral: var(--palette-coral-500); --color-on-coral: var(--palette-gray-0); /* Fellows — 펠로우즈가 여는 공식 모임에만 쓰는 브랜드색 (앱 기본색은 primary 유지) */ --color-fellows: var(--palette-olive-500); --color-fellows-dark: var(--palette-olive-700); --color-fellows-light: var(--palette-olive-100); --color-fellows-subtle: var(--palette-olive-50); --color-on-fellows: var(--palette-gray-0); /* Mark — 선배 카드 문장에서 핵심 단어 밑에 까는 형광펜 색. 카드마다 돌아가며 쓴다 */ --color-mark-chocolate: var(--palette-warm-chocolate); --color-mark-peach: var(--palette-warm-peach); --color-mark-amber: var(--palette-warm-amber); --color-mark-olive: var(--palette-warm-olive); /* Campus — 펠로우즈 캠퍼스 화면 전용 초록 */ --color-campus: var(--palette-forest-500); --color-campus-dark: var(--palette-forest-700); --color-campus-weak: var(--palette-forest-100); /* 약한 버튼 면 */ --color-campus-subtle: var(--palette-forest-50); /* 고른 선택지 면 */ --color-campus-lime: var(--palette-lime-100); /* 곧 열리는 모임 띠 */ --color-campus-arrow: var(--palette-sage-400); --color-campus-arrow-off: var(--palette-sage-200); --color-on-campus: var(--palette-gray-0); /* Brand Extended */ --color-banner-gradient: linear-gradient(135deg, var(--palette-purple-700) 0%, var(--palette-purple-900) 100%); /* Profile Page Background — 사용자가 프로필 페이지 배경으로 고르는 파스텔 프리셋 */ --color-page-mist: var(--palette-gray-50); /* board.html 프로필 페이지와 동일한 기본 배경 */ --color-page-cream: var(--palette-pastel-cream); --color-page-blush: var(--palette-pastel-blush); --color-page-lilac: var(--palette-pastel-lilac); --color-page-sky: var(--palette-pastel-sky); --color-page-mint: var(--palette-pastel-mint); /* Chat CTA — 대화하기 버튼 색상 프리셋 */ --color-chat-apricot: var(--palette-soft-apricot); --color-chat-blossom: var(--palette-soft-blossom); --color-chat-plum: var(--palette-deep-plum); --color-chat-ocean: var(--palette-deep-ocean); --color-chat-forest: var(--palette-deep-forest); /* ========================================== TYPOGRAPHY ========================================== */ --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Noto Serif KR', serif; /* 에디토리얼 제목 (공유 텍스트 썸네일 등) — 쓰는 화면에서 Google Fonts로 로드 */ /* display 홈·친구 섹션 제목 "인기 아바타", "친구" title 네비바 페이지명, 시트 제목 heading 카드 섹션명, 리스트 아이템 제목 body-lg 채팅 메시지, 프로필 본문 body 카드 설명, 폼 입력 label 폼 라벨, 탭, 필터칩 caption 메타정보, 날짜, 부제목, 토글 설명 badge 뱃지·칩 텍스트 metric 통계 숫자 nav 하단 탭바 */ /* Font Size */ --fs-hero: 44px; /* 랜딩 히어로 대형 제목 (PC) — 유틸 없이 토큰만 */ --fs-display: 26px; --fs-title: 19px; --fs-title-sm: 18px; --fs-lead: 17px; /* 캠퍼스 — 입력값·선택지·주요 버튼 */ --fs-title-lg: 22px; /* 캠퍼스 — 선배 이야기 본문 */ --fs-headline: 24px; /* 캠퍼스 — 화면 제목 */ --fs-heading: 16px; --fs-body-lg: 15px; --fs-body: 14px; --fs-label: 13px; --fs-caption: 12px; --fs-badge: 11px; --fs-metric: 32px; --fs-nav: 10px; /* Font Weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line Height */ --lh-hero: 1.25; --lh-display: 1.35; --lh-title: 1.4; --lh-title-sm: 1.4; --lh-lead: 1.5; --lh-title-lg: 1.55; --lh-headline: 1.4; --lh-heading: 1.45; --lh-body-lg: 1.65; --lh-body: 1.6; --lh-label: 1.4; --lh-caption: 1.5; --lh-badge: 1.2; --lh-metric: 1.1; --lh-nav: 1.2; /* Letter Spacing */ --ls-hero: -1.2px; --ls-display: -0.5px; --ls-title: -0.3px; --ls-title-sm: -0.25px; --ls-lead: -0.2px; --ls-title-lg: -0.6px; --ls-headline: -0.7px; --ls-heading: -0.2px; --ls-body-lg: -0.1px; --ls-body: -0.1px; --ls-label: 0px; --ls-caption: 0px; --ls-badge: 0.1px; --ls-metric: -1px; --ls-nav: 0.2px; --ls-wide: 1px; /* 영문 대문자 장식 문구(리본·마퀴 등) 트래킹 */ --ls-namecard: 0.14em; /* 명함 위 이름 — 넓게 벌린 트래킹 */ --ls-namecard-sub: 0.06em; /* 명함 위 직함 */ /* ========================================== FORM CONTROL ========================================== */ --input-h: 40px; /* input·select 높이 */ --input-h-lg: 56px; /* 큰 입력 — 한 화면에 입력 하나만 크게 받을 때 */ --input-px: 16px; /* input·select 좌우 여백 */ --textarea-py: 8px; /* textarea 상하 여백 */ --textarea-h: 68px; /* textarea 최소 높이 */ /* ========================================== BLUR ========================================== */ --blur-fill: 24px; /* 포스터 썸네일 배경 레이어 블러 반경 */ --blur-dim: 2px; /* 편집 중 나머지 요소를 뒤로 물릴 때의 블러 반경 */ --blur-veil: 16px; /* 화면 전체를 흐리고 그 위에 문구를 띄울 때의 블러 반경 */ --blur-glass: 8px; /* 사진 위 유리 버튼이 뒤를 살짝 흐릴 때의 반경 */ /* ========================================== RADIUS ========================================== */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-tile: 12px; /* 카드형 프로필의 SNS 타일 */ --r-section: 26px; /* 카드형 프로필의 섹션 카드 */ --r-full: 9999px; /* ========================================== SHADOW ========================================== */ --shadow-lift: 0 18px 40px -22px rgba(26,20,10,0.28), inset 0 1px 0 rgba(255,255,255,0.9); /* 카드형 프로필의 명함 카드가 배경 사진 위로 떠 보이게 */ --shadow-1: 0px 1px 3px rgba(0,0,0,0.06); --shadow-2: 0px 2px 8px rgba(0,0,0,0.08); --shadow-3: 0px 4px 12px rgba(0,0,0,0.12); --shadow-4: 0px 8px 24px rgba(0,0,0,0.16); /* ========================================== MOTION ========================================== */ --motion-fast: 150ms; --motion-standard: 250ms; --motion-slow: 400ms; --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0); --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); } /* ========================================== TYPOGRAPHY UTILITY CLASSES ========================================== */ .text-display { font-family: var(--font-base); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--color-text); } .text-title { font-family: var(--font-base); font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-title); letter-spacing: var(--ls-title); color: var(--color-text); } .text-heading { font-family: var(--font-base); font-size: var(--fs-heading); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-text); } .text-body-lg { font-family: var(--font-base); font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); color: var(--color-text); } .text-body { font-family: var(--font-base); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-text); } .text-label { font-family: var(--font-base); font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: var(--lh-label); letter-spacing: var(--ls-label); color: var(--color-text-sub); } .text-caption { font-family: var(--font-base); font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-text-muted); } .text-badge { font-family: var(--font-base); font-size: var(--fs-badge); font-weight: var(--fw-medium); line-height: var(--lh-badge); letter-spacing: var(--ls-badge); } .text-link { font-family: var(--font-base); font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: var(--lh-label); letter-spacing: var(--ls-label); color: var(--color-primary); } .text-metric { font-family: var(--font-base); font-size: var(--fs-metric); font-weight: var(--fw-bold); line-height: var(--lh-metric); letter-spacing: var(--ls-metric); color: var(--color-text); } .text-nav { font-family: var(--font-base); font-size: var(--fs-nav); font-weight: var(--fw-medium); line-height: var(--lh-nav); letter-spacing: var(--ls-nav); color: var(--color-text-muted); }