/* ============================================================ * BLOS 랜딩페이지 — Global Styles * * 이 파일의 역할 = "디자인 시스템 + 공통 스타일" * * 구조: * 1) 디자인 토큰 (Figma에서 뽑은 색/폰트/간격을 CSS 변수로) * 2) Reset & 기본값 (브라우저 차이 통일) * 3) 타이포그래피 유틸 클래스 * 4) 공통 레이아웃 (.container, .section) * 5) Scroll Fade-In 인터랙션 클래스 (.reveal) * 6) (다음 단계) 각 섹션별 스타일은 아래에 추가됨 * ============================================================ */ /* ============================================================ * 1) 디자인 토큰 — CSS Custom Properties (변수) * * :root는 HTML 문서 전체를 가리키는 가장 바깥 스코프. * 여기 정의한 --변수명 은 페이지 어디서나 var(--변수명) 로 호출. * * 토큰을 쓰는 이유: * - 색/크기/간격을 한 곳에서 관리 (= 디자인 시스템) * - "메인 색 바꿔봐"라는 요청에 한 줄만 고치면 됨 * - Figma의 디자인 토큰 개념을 코드로 그대로 옮긴 것 * ============================================================ */ :root { /* ── Colors ── */ --color-bg: #FFFFFF; --color-text: #191C1D; /* Figma fill_YCB5CG */ --color-text-muted: #5A6166; --color-primary: #1B73E8; /* 임시 (Hero CTA용, 추후 조정) */ --color-overlay: rgba(0, 0, 0, 0.42); /* Hero 어두운 오버레이 */ /* Glass(유리) 효과용 — Hero의 Trust 카드 배경 */ --color-glass-bg: rgba(255, 255, 255, 0.1); --color-glass-border: rgba(255, 255, 255, 0.2); /* ── Typography ── */ --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-en: 'Inter', sans-serif; /* 반응형 타이포그래피 — 선형 보간 (Fluid Typography) 320px viewport에서 min, 1440px에서 max로 부드럽게 스케일. 공식: clamp(min, calc(slope×vw + base), max) slope = (max-min)/11.2, base = min - slope×3.2 (px) */ --fs-h1: clamp(28px, calc(2.86vw + 18.86px), 60px); /* 60 → 28 */ --fs-h2: clamp(22px, calc(2.32vw + 14.57px), 48px); /* 48 → 22 */ --fs-h3: clamp(18px, calc(1.25vw + 14px), 32px); /* 32 → 18 */ --fs-h4: clamp(16px, calc(0.89vw + 13.14px), 26px); /* 26 → 16 */ --fs-body-lg: clamp(15px, calc(0.45vw + 13.57px), 20px); /* 20 → 15 */ --fs-body: clamp(14px, calc(0.36vw + 12.86px), 18px); /* 18 → 14 */ --fs-small: clamp(13px, calc(0.27vw + 12.14px), 16px); /* 16 → 13 */ --fs-label: clamp(11px, calc(0.09vw + 10.71px), 12px); /* 12 → 11 */ /* ── Layout ── */ --container-max: 1280px; /* 컨텐츠 최대 가로폭 */ --container-padding: 80px; /* 좌우 패딩 */ /* ── Effects ── */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.12); --radius-card: 16px; --radius-pill: 9999px; /* 알약 모양 */ /* 애니메이션 곡선 (이징 함수) - cubic-bezier(x1, y1, x2, y2): 시간/속도 그래프의 곡선 - 이 값은 처음엔 빠르게 시작해서 끝에서 부드럽게 멈추는 ease-out 계열 - 페이드인에 자연스러운 느낌을 줌 */ --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ * 2) Reset & 기본값 * * 브라우저마다 마진,

크기,