/* ============================================================================= * casty — Design Tokens (Fixed / 테마 무관 고정값) * ----------------------------------------------------------------------------- * 이 파일은 테마와 무관하게 고정인 값만 갖는다. 테마에 따라 바뀌는 토큰 * (표면·글자 위계·중립 알파·브랜드 알파·경고/위험/정보·툴팁 배경·on-brand· * pri-gradient 등)은 전부 v4.css 한 곳에서만 정의한다 * (:root 가 라이트/기준 · :root[data-theme="dark"] 가 다크) — F-1(2026-09-10). * * - 코드 전역에서 color/background/border 등은 var(--토큰)으로 참조한다. * - 정의서: planning-ws\서비스\캐스티\20_작업\디자인시스템_2026-09-10.md (§2·§9·§10) * - 값 정의 위치: 테마 의존 토큰 = v4.css, 고정값 = 이 파일 * - 최종 갱신: 2026-09-10 — F-1 토큰 정의 단일화(라이트 기준, D-654). 이전엔 이 파일이 * 다크를 기본으로 들고 [data-theme="light"] 로 재정의했는데, 나중에 실리는 * v4.css 가 이겨 실제 화면은 라이트 기본이었다(같은 이름의 값이 두 곳에 있었다). * ========================================================================== */ :root { /* --- Platform brand (SNS 채널 아이콘 고유색, 테마 무관) ---------------- */ --brand-instagram: #E1306C; /* Instagram 공식 브랜드색 */ --brand-youtube: #FF0000; /* YouTube 공식 브랜드색 */ --brand-threads: var(--text-1); /* Threads는 고유 브랜드색이 없어 모노톤 — 텍스트 톤을 따른다(테마 적응은 v4.css --text-1) */ --brand-instagram-bg: linear-gradient(45deg, #FEDA75 5%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%); --brand-threads-bg: #000000; /* --- 구글 로그인 버튼 — 구글 브랜드 가이드 규격, 남의 브랜드라 테마 무관 --- */ --brand-google-bg: #FFFFFF; --brand-google-ink: #1F1F1F; --brand-google-border: #DADCE0; --brand-google-hover: #F7F8F8; /* --- White alpha (미디어 위 오버레이 전용 흰색, 테마 무관) ------------- */ --white: #FFF; /* 이미지/오버레이 위 순수 흰색 */ --white-06: rgba(255,255,255,.06); --white-08: rgba(255,255,255,.08); --white-10: rgba(255,255,255,.1); --white-12: rgba(255,255,255,.12); --white-20: rgba(255,255,255,.2); --white-22: rgba(255,255,255,.22); --white-28: rgba(255,255,255,.28); --white-72: rgba(255,255,255,.72); --white-74: rgba(255,255,255,.74); --white-78: rgba(255,255,255,.78); --white-85: rgba(255,255,255,.85); /* --- Ink alpha (그라데이션 스크림·모달 백드롭, 테마 무관) --------------- */ --ink-50: rgba(6,8,11,.5); --ink-80: rgba(6,8,11,.8); --ink-82: rgba(6,8,11,.82); /* 모달 백드롭(레거시 app.css 값, 알파가 달라 별도 유지) */ --ink-85: rgba(6,8,11,.85); /* --- 그림자(반복 사용처만 토큰화, 테마 무관) ---------------------------- */ --shadow-tip: rgba(10,14,18,.25); /* 툴팁 박스 그림자 */ --shadow-ico: rgba(0,0,0,.35); /* 미디어 위 아이콘 드롭섀도 */ --shadow-menu: rgba(0,0,0,.45); /* 드롭다운·토스트 뜬 레이어 그림자 */ --shadow-float: rgba(0,0,0,.5); /* 선택 바·도움말 패널 등 강한 뜬 레이어 그림자 */ --shadow-thumb: rgba(0,0,0,.6); /* 썸네일 위 조회수 텍스트 그림자 */ /* --- 위험 버튼 위 텍스트 — 테마별 대응값 없이 원래도 고정 --------------- */ --on-danger: #1C0A0A; /* --- AD(광고) 배지 전용 인디고 — 시맨틱 --info 와 별개로 테마 무관 고정 --- */ --ad-a14: rgba(99,102,241,.14); --ad-a85: rgba(99,102,241,.85); /* --- 화면 안내 오버레이(tour.css) 전용 — 라이트 테마에서도 오버레이 안쪽은 늘 어둡다. 그래서 테마 무관 고정이고, 라이트 블록에서 재정의하지 않는다(기획 지시 2026-09-03) --- */ --tour-line: rgba(255,255,255,.62); /* 짚는 점선 테두리와 잇는 곡선 */ --tour-name: #FFFFFF; /* 설명 첫 줄(요소 이름)과 리드 문장 */ --tour-note: rgba(255,255,255,.58); /* 「화면마다 한 번만」 같은 덧말 */ --tour-dim: rgba(8,10,14,.58); /* 오버레이 칠 */ --tour-inside-bg: rgba(8,10,14,.72); /* 짚은 영역 안 설명 뒤 바탕 */ --tour-text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 16px rgba(0,0,0,.4); --tour-card-bg: rgba(20,24,31,.96); /* 아래 확인 카드 바탕 */ --tour-card-line: rgba(255,255,255,.16); /* 그 카드 테두리 */ /* --- 실험실(lab2·lab_guide) 다이어그램 전용 적/황 틴트 — 시맨틱 토큰과 다른 별도 분해값이라 그대로 고정한다(2026-08-25) --- */ --lab-red-a12: rgba(220,80,80,.12); --lab-red-a50: rgba(220,80,80,.5); --lab-amber-a08: rgba(201,162,39,.08); --lab-amber-a10: rgba(201,162,39,.1); --lab-amber-a18: rgba(201,162,39,.18); /* --- 미디어 뷰어 바탕(썸네일·상세) — 테마 무관, v4.css 에서 이 파일로 이관해 한 곳에만 둔다(F-1) --- */ --media-bg: #08090C; --media-bg-2: #0B0D10; /* --- 썸네일·상세 미리보기 바탕 그라디언트 — 미디어라 테마 무관(F-6 raw 색 정리) --- */ --thumb-gradient: linear-gradient(180deg, hsl(220 7% 17%), hsl(220 6% 12%)); } /* ============================================================================= * 토큰화하지 않고 raw 로 둔 색 (의도) * ----------------------------------------------------------------------------- * 재사용처가 1곳뿐이라 변수화 실익이 없는 값은 그대로 raw 로 남아 있다. * 반복 사용되는 썸네일·상세 미리보기 그라디언트는 위 --thumb-gradient 로 * 토큰화했다(F-6, 2026-09-10). * ========================================================================== */ /* 사용 예시 * .some-text { color: var(--text-1); } * .some-card { background: var(--card); border: 1px solid var(--w-12); } * .save-btn { background: var(--pri); color: var(--on-brand); } */ /* ============================================================================= * Typography / Radius / Spacing 스케일 * ----------------------------------------------------------------------------- * ⚠️ 색과 달리 아래는 CSS 변수로 구현돼 있지 않습니다(코드엔 px 값으로 직접 들어감). * "지켜야 할 스케일(규칙)"로 참조하세요. 새 작업 시 목록 밖 값은 쓰지 않습니다. * 상세: planning-ws\서비스\캐스티\20_작업\디자인시스템_2026-09-10.md (§3) * ========================================================================== */ /* --- Typography ----------------------------------------------------------- * * Font : Pretendard (가변, weight 45–920) · fallback system-ui, sans-serif * * Size scale (px) — 목록 밖 금지: * Caption 10 · 11 · 12 · 13 * Body 13 · 14 * Subtitle 15 · 16 · 18 · 20 * Title 20 · 24 · 28 · 32 * Display 36 · 40 * (현재 코드 사용: 10,11,12,13,14,15,16,18,20,24,28,32,40) * * Weight : 400(Regular·기본 본문, v4.css body) · 500(Medium·굵게 1단계·b/strong) · * 600(SemiBold·버튼/서브타이틀) · 700(Bold·제목/숫자) * ※ 800 폐지 * * Line-height : Display/Title 1.3 · Subtitle 1.4 · Body 1.45(v4.css body) · Caption 1.4 * * Letter-spacing (% = em, CSS는 %미지원이라 코드엔 em) : * Tight -2% (-0.02em) 큰 제목·서브타이틀(18px↑) * 전역 -2.5% (-0.025em) 본문 기본(v4.css body 에 적용, 2026-09-10 실측 반영) * Wide +2% ( 0.02em) 작은 라벨·메타(12px↓) * * Text color : v4.css --text-1 ~ --text-disabled 참조 * ------------------------------------------------------------------------- */ /* --- Radius (px) ---------------------------------------------------------- * * 6 tiny (진행바·v1.0 배지) * 8 작은 배지·칩 (타입라벨·AD·도달칩) * 10 버튼·컨트롤 (주력) * 12 카드·영상 썸네일·발굴 버튼 * 16 크리에이터 카드·모달 * 20 키워드 칩·라이트박스 (pill 성격) * 50% 원형 (아바타·라디오·국기 뱃지) * ------------------------------------------------------------------------- */ /* --- Spacing (px) — padding / gap / margin ------------------------------- * * 기본 4px 그리드 + 2(half-step). 컴포넌트 의도값으로 6·10·30 일부 잔존. * 2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 36 · 40 · 48 · 60 · 64 · 80 · 100 * - 주력: 8(최다) · 16 · 12 · 4 · 24 · 20 * - 잔존 off-grid(의도): 6(gap 다수) · 10(컨트롤) · 30(소수) * - 큰 값: 80(빈 상태) · 100(스크롤 영역 하단 여백) * ------------------------------------------------------------------------- */