/* ============================================================ INNO&M — tokens.css (디자인 토큰 단일 소스) 모든 페이지는 이 값만 var()로 참조한다. 하드코딩(직접 hex/px 기입) 금지. 생성 근거 — 5개 실소스 파일 전수 조사 후 추출 (2026-07): css/common.css — 기존 :root 토큰(정본, 대부분 이미 존재) 그대로 승계 css/home.css — 1088줄 전수 스캔 css/about.css — 1258줄 전수 스캔 css/service.css — 1258줄 전수 스캔 (service/influencer/performance/search 4페이지 공유) css/contact.css — 105줄 전수 스캔 + HTML 인라인 style 속성(hex/rgba) grep 확인 — 대부분 카드별 고유 장식색(예: service-performance 갤러리 카드 --gsc, service.html 알림 아바타 배경)이라 토큰화 대상 아님, 목록에서 제외. 값이 여러 개로 갈린 경우 "가장 많이 쓰인 값"을 정본으로 잡고, 주석에 대체된 변형값과 등장 위치를 남긴다(감사 단계 — 아직 페이지에 반영 안 함). ============================================================ */ :root{ /* ------------------------------------------------------------ COLOR — 브랜드 / 캔버스 ------------------------------------------------------------ */ --color-brand: #0270ff; /* = common.css --accent. 최다 사용 블루(전 파일 100+회) */ --color-brand-deep: #0033a0; /* = --accent-2 / --accent-deep. CONTACT 배경 등 */ --color-brand-hover: #1f86ff; /* 블루 솔리드 버튼 hover(service.css pp-cta/cprm-cta 2곳 동일값). 변형: #1f82ff (home.css .wh-cta:hover, 1곳) · #0a63e6 (contact.css .cf-submit:hover, 1곳) — 3가지 서로 다른 hover 블루가 존재(드리프트, 아래 3단계 참고) */ --color-brand-mid1: #2f86ff; /* 블루 스케일 2단계 — about.css .cmix-seg--2/.cmix-dot--2, home.css #process 라인/뱃지 hover 다수 */ --color-brand-mid2: #5aa0ff; /* 블루 스케일 3단계 — about.css .cmix-seg--3/.cmix-dot--3 */ --color-brand-light: #8fc0ff; /* 블루 스케일 4단계 / 밝은 강조 텍스트 — about.css .cmix-seg--4, .tf-link, .svc4-arr:hover, .pl-... 등 라이트 블루 텍스트 전반에 반복 사용(about.css 8회+) */ --color-brand-soft: #3b96ff; /* 강조 서브 텍스트(about .dm-good .em, home .ib-copy .em 등) — --color-brand-light과 근접하나 about/home 여러 곳에서 별도로 쓰이는 3번째 밝은-블루 변형(드리프트 후보) */ --color-success: #39e0a0; /* LIVE/성공 그린 도트 — home.css .cw-livedot/.cx-livedot, service.css .cprm-dot 동일값 3회 */ --bg-canvas: #000000; /* = --canvas */ --bg-panel: #0a0a0c; /* = --panel / --surface-panel */ --bg-raised: #101218; /* = --surface-raised (폼 카드, PROPOSAL 카드 등) */ --bg-sunken: #06070c; /* = --surface-sunken (input 필드 배경 등) */ /* 카드형 패널(About 04-09 신규 섹션: .pc/.cn-card/.svc4-card/.tm-card/.ins-card) — common.css에 없던 "콘텐츠 카드" 전용 톤. rgba(255,255,255,.035)+.10) 조합이 about.css에서만 5개 컴포넌트에 걸쳐 리터럴로 5회 반복됨 → 신규 토큰화. */ --card-panel-bg: rgba(255,255,255,.035); --card-panel-border: rgba(255,255,255,.10); --text-primary: #ffffff; /* = --text */ --text-secondary: rgba(255,255,255,0.55); /* = --muted */ --text-muted: rgba(255,255,255,0.50); /* = --muted-2 */ --hairline: rgba(255,255,255,0.12); /* = --hair */ --hairline-strong: rgba(255,255,255,0.20); /* = --hair-2 / --border-strong */ --accent-line: rgba(2,112,255,0.28); --accent-wash: rgba(2,112,255,0.12); --accent-glow: rgba(2,112,255,0.45); /* ------------------------------------------------------------ TYPE — font-family ------------------------------------------------------------ */ --font-sans-ko: "Noto Sans KR", sans-serif; /* = --ff-ko. 본문/헤딩 기본 */ --font-sans-en: "Inter", sans-serif; /* = --ff-en. eyebrow/영문 라벨/버튼 */ --font-display: "Playfair Display", serif; /* = --ff-serif. 히어로 이탤릭, 빅넘버 */ /* ------------------------------------------------------------ TYPE — font-size 스케일 (common.css 정본 12단계 그대로 승계. 36개 이상의 산발적 px 값을 흡수한 스케일이며 이미 검증된 매핑.) ------------------------------------------------------------ */ --fs-micro: 11px; /* 10,11 */ --fs-xs: 13px; /* 12,13 */ --fs-sm: 14px; /* 14,15 */ --fs-base: 16px; /* 16,17 */ --fs-md: 18px; /* 18,19 */ --fs-lg: 20px; /* 20,21,22 */ --fs-xl: 24px; /* 23,24,26 */ --fs-2xl: 30px; /* 28,30,32 */ --fs-3xl: 40px; /* 34,36,38,40,44 */ --fs-4xl: 50px; /* 46,48,50 */ --fs-5xl: 60px; /* 58,60,64 */ --fs-6xl: 80px; /* 76,78,80,84,90 */ --fs-hero: 102px; /* 122 → 102 (Figma Display/Hero) */ /* 스케일 밖에 남아있는 반복 raw px (감사에서 발견, 아직 미흡수) — 참고용으로만 기록. 리팩터 시 아래 방향으로 흡수 검토: 9px, 10px → --fs-micro(11px)보다 작은 마이크로 라벨(뱃지 숫자, 캡션) 다수 (service.css 9~10px 4곳, home.css 9~10px 6곳) 38px / 42px → --fs-3xl(40px) 근접값(about.css .pc-metric b, .cn-sum-plus) 46px / 56px → --fs-4xl(50px) 근접값(about.css .cn-num, .cn-sum-big) 78px → --fs-6xl(80px) 근접값이나 common.css .ir-big(가정본, Contact)이 명시적으로 78px 고정 — about.css는 같은 자리에 --fs-6xl(80px) 사용 → 페이지 간 2px 드리프트(§3 참고) */ /* ------------------------------------------------------------ TYPE — letter-spacing / line-height (반복 패턴만 토큰화. 이탤릭 세리프 빅넘버·영문 eyebrow 자간은 컴포넌트별 clamp라 제외) ------------------------------------------------------------ */ --ls-tight: -1.2px; /* .h-section 기본(공통 섹션 헤딩) — common.css 87행 정본. 단 87행 자신은 var(--fs-5xl) 대신 리터럴 60px을 쓰고 있어 토큰 자기참조가 깨져 있음(§4 내부 불일치 참고) */ --ls-hero: -2.04px; /* 히어로 대형 헤드라인(about .hero-h1/.hero-accent, service .svc-hero-h1) 동일값 반복 */ --lh-tight: 1.2; /* 헤딩 라인하이트 표준(.h-section 등) */ --lh-base: 1.6; /* 본문 표준(.lead 등) */ --lh-relaxed: 1.7; /* 서브카피/설명문 표준(다수 .*-sub/.*-desc) */ /* ------------------------------------------------------------ RADIUS ------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 16px; --radius-card: 18px; /* 신규 — service.css body.svc-viral --card-radius 및 about.css 카드 패밀리(.founder-photo/.team-band/.ins-flow/ .trust-dash 등)에서 18px이 --radius-md(16px)만큼 자주 반복돼 사실상 별도 "카드" 반경으로 굳어짐(§3 참고) */ --radius-lg: 20px; --radius-pill: 999px; /* = 999px, 코드상 998~999 혼재 없이 일관 */ /* ------------------------------------------------------------ SPACING — 반복 gap/padding 스텝 (섹션 세로 리듬 + 카드 내부 여백에서 가장 자주 나온 값들을 8px 배수 스케일로 정리. 완전한 4/8pt 그리드는 아니며 기존 값 존중—추출값 그대로.) ------------------------------------------------------------ */ --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-section: 140px; /* .section 기본 세로 패딩(home/about/contact 공통) */ /* ------------------------------------------------------------ SHADOW ------------------------------------------------------------ */ --shadow-card: 0 18px 50px -28px rgba(0,0,0,.7); /* 카드 정지 상태 그림자 (service.css .str-img). 변형 다수 존재(카드마다 블러/확산 미세 조정) — 완전 통일은 아니고 대표값만 토큰화 */ --shadow-glow-accent: 0 0 40px rgba(2,112,255,.14); /* = --card-glow(svc-viral 스코프 변수). hover 시 블루 글로우 표준 */ /* ------------------------------------------------------------ MOTION — easing / duration ------------------------------------------------------------ */ --ease-standard: cubic-bezier(.22,.61,.36,1); /* 최다 사용(전 파일 40회+). common.css .reveal 기본 이징 — 페이드/슬라이드 표준 */ --ease-entrance: cubic-bezier(.22,.7,.25,1); /* 2번째로 흔한 이징(home/service 카드 입장 애니메이션 15회+) — standard와 의도적으로 다른 "묵직한" 느낌. 드리프트가 아니라 두 용도가 병존(표준 vs 카드 입장) */ --dur-fast: .2s; --dur-base: .35s; --dur-slow: .6s; /* 위 두 이징 외 커스텀 모션 전용 값들(REVIEWS 카드 휙 전환, FLIP 오버레이, 체크박스 overshoot 등)은 의도된 연출 전용이라 토큰화하지 않음: cubic-bezier(.4,0,1,1) / (.16,.9,.3,1) — REVIEWS 카드 스와이프 아웃/인 cubic-bezier(.7,0,.2,1) — FLIP 공유요소 전환(홈→서비스) cubic-bezier(.3,1.3,.5,1) — 체크박스/뱃지 overshoot(service.css) cubic-bezier(.16,1,.3,1) — WHO 키네틱 마스크리빌 cubic-bezier(.19,1,.22,1) — PROCESS kin 스윕 cubic-bezier(.45,0,.5,1) — eyebrow 흐르는 라이트 스윕 제거·통일 금지 — 각각 특정 커스텀 효과에 종속된 의도적 연출. ------------------------------------------------------------ */ /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ --content-max: 1248px; /* = --content */ --page-pad: 336px; /* = --pad (1920 캔버스 기준 좌우 여백) */ } /* ============================================================ 레거시 별칭(과도기) — common.css의 기존 변수명은 그대로 두고, 여기서 새 의미 기반 이름으로 "1:1 값 매핑"만 재확인한다. 실제 페이지가 var(--accent) 등 기존 이름을 계속 써도 값은 100% 동일(파괴적 변경 없음). 리팩터 단계에서 페이지 CSS를 var(--color-brand) 식으로 옮길 때 참고. ============================================================ */