/* ============================================================================= * 디자인 토큰 — 영구크린 블로그 (mcyg-blog) * * v4.0.0 — 영구크린 Figma 디자인 시스템 정밀 정합 (메이저 변경). * 참조: references/Color.png · Typography.png · Typography-Mobile.png * · Button.png · Checkbox.png · Radio_button.png * · references/common_pc.css · common_mobile.css * * 핵심 * · Primary 10단계 + Gray 10단계 팔레트 (변경 없음 — v3.0.0 정의) * · 타이포 6계층 시스템: Display / Head / SubHead / Body / Caption / Label * × 사이즈 variant × weight × line-height × letter-spacing 차등 적용 * · 본문 베이스: PC 15px (Mobile 16px) — body-m 토큰 * · font-weight bold = 600 (700 사용 금지 — 영구크린 정책) * · 보더는 Gray 200·300 만 사용 (영구크린 정책) * * 명명 규칙 * --fs-{계층}-{사이즈} font-size * --lh-{계층}-{사이즈} line-height * --ls-{계층}-{사이즈} letter-spacing * --fw-{regular|medium|bold} * * 기존 --font-size-* / --line-height-* / --letter-spacing-* 토큰은 alias 로 보존. * 컴포넌트 CSS 는 var(--*) 만 참조. hex/px 직접 사용 금지. * ============================================================================= */ :root { /* ------------------------------------------------------------------------- * 1. 컬러 — Primary 10단계 (영구크린 본사) * ---------------------------------------------------------------------- */ --color-primary-50: #EBF6FF; --color-primary-100: #D7EAFF; --color-primary-200: #A7D3FF; --color-primary-300: #70B8FF; --color-primary-400: #338DFF; --color-primary-500: #0077FF; /* base */ --color-primary-600: #005BFF; /* hover · text */ --color-primary-700: #0040E6; /* active · text dark */ --color-primary-800: #0E1495; --color-primary-900: #080A5A; /* ------------------------------------------------------------------------- * 2. 컬러 — Gray 10단계 (영구크린 본사) * ---------------------------------------------------------------------- */ --color-gray-50: #F6F7F8; /* surface */ --color-gray-100: #EEF0F4; /* surface */ --color-gray-200: #DFE1E8; /* border (일반) */ --color-gray-300: #C3C6CE; /* border (강조) */ --color-gray-400: #AAAFBC; /* text light */ --color-gray-500: #687286; /* text soft */ --color-gray-600: #5A6275; --color-gray-700: #35425C; /* text muted (GNB·메뉴) */ --color-gray-800: #353849; /* text 본문 */ --color-gray-900: #151523; /* text strong */ /* ------------------------------------------------------------------------- * 3. White / Black * ---------------------------------------------------------------------- */ --white: #FFFFFF; --black: #000000; /* ------------------------------------------------------------------------- * 4. Alias — 용도 매핑 (영구크린 Color.png 라벨 기준) * 팔레트가 단일 진실 공급원. 컴포넌트는 alias 또는 팔레트 직접 참조. * ---------------------------------------------------------------------- */ /* base / primary */ --color-primary: var(--color-primary-500); /* base */ --color-primary-hover: var(--color-primary-600); --color-primary-active: var(--color-primary-700); --color-primary-soft: var(--color-primary-50); /* surface (배경) */ --color-bg: var(--white); --color-bg-alt: var(--color-gray-50); --color-bg-soft: var(--color-gray-100); --color-bg-footer: var(--color-gray-50); --color-bg-primary-soft: var(--color-primary-50); --color-bg-primary-light: var(--color-primary-100); /* surface — 사이드바 전용 (v4.1.2) 영구크린 본사 10단계 Gray 팔레트 외부 값. 본사 영구꿀팁 사이드바 실측 톤 #F5F7FA (gray-50 #F6F7F8 보다 한 단계 푸른 톤). 사이드바 컴포넌트에서만 사용. */ --color-bg-side-menu: #F5F7FA; /* border (보더) — 영구크린 정책: gray-200 / gray-300 만 사용 */ --color-border: var(--color-gray-200); /* 일반 */ --color-border-strong: var(--color-gray-300); /* 강조 */ /* text */ --color-text: var(--color-gray-800); /* 본문 */ --color-text-strong: var(--color-gray-900); /* 강조 본문 */ --color-text-muted: var(--color-gray-700); /* GNB·메뉴 (v3.1.5 → 토큰화) */ --color-text-soft: var(--color-gray-500); /* 보조 텍스트 */ --color-text-light: var(--color-gray-400); /* 더 옅은 보조 */ --color-text-primary: var(--color-primary-600); /* primary 텍스트 */ --color-text-primary-dark: var(--color-primary-700); --color-text-inverse: var(--white); /* ------------------------------------------------------------------------- * 5. 카테고리 컬러 (slug → 컬러 매핑) — 본사 badge 톤 * 값 변경 시 CLAUDE.md 2.2 표와 동기화 필수. * ---------------------------------------------------------------------- */ /* === 최상위 4개 (v4.1.20) === */ --color-cat-moving: var(--color-primary-500); /* 이사 — primary blue */ --color-cat-moving-soft: var(--color-primary-50); --color-cat-cleaning: #00A39E; /* 청소 — teal/cyan, 청량감 */ --color-cat-cleaning-soft: #DEF6F5; --color-cat-internet: #4A6BFF; /* 인터넷 — indigo, 디지털/통신 */ --color-cat-internet-soft: #E3E8FF; --color-cat-story: #189B22; /* 영구크린 스토리 — green */ --color-cat-story-soft: #E8FAE1; /* === 서브 — 이사 === */ --color-cat-guide: var(--color-primary-500); --color-cat-guide-soft: var(--color-primary-50); --color-cat-cost: #FF7224; --color-cat-cost-soft: #FFEFD7; --color-cat-region: #E8A800; --color-cat-region-soft: #FCF4DC; --color-cat-faq: #8060D3; --color-cat-faq-soft: #F3ECFF; /* === 서브 — 청소 (v4.1.20) === */ --color-cat-cleaning-guide: var(--color-cat-cleaning); --color-cat-cleaning-guide-soft: var(--color-cat-cleaning-soft); --color-cat-cleaning-faq: #8060D3; /* FAQ 톤 통일 (이사 FAQ 와 동일) */ --color-cat-cleaning-faq-soft: #F3ECFF; /* 카드 media 그라데이션 end-stop */ --color-cat-moving-grad: #D7E6FB; --color-cat-cleaning-grad: #C8EEEC; --color-cat-internet-grad: #D3DCFF; --color-cat-guide-grad: #DCEAFB; --color-cat-cost-grad: #FFE0CC; --color-cat-story-grad: #D8F1DE; --color-cat-region-grad: #FBEDC2; --color-cat-faq-grad: #E6DEF5; --color-cat-cleaning-guide-grad: #C8EEEC; --color-cat-cleaning-faq-grad: #E6DEF5; /* ------------------------------------------------------------------------- * 6. 시멘틱 (상태) * ---------------------------------------------------------------------- */ --color-success: #16A34A; --color-success-soft: #DCFCE7; --color-warning: var(--color-cat-region); --color-warning-soft: var(--color-cat-region-soft); --color-error: #DC2626; --color-error-soft: #FEE2E2; --color-info: var(--color-primary-500); --color-info-soft: var(--color-primary-50); /* ------------------------------------------------------------------------- * 7. Typography — 영구크린 6계층 시스템 (PC 기준) * * Display : 랜딩 메인 / 대형 헤딩 * Head : 페이지 제목 · 섹션 헤딩 · prose H2 * SubHead : 부제 · 카드 제목 · prose H3·H4 * Body : 본문 (body-m 이 base) * Caption : 메타 · 안내문 · 작성자 정보 * Label : 버튼 · 뱃지 · GNB · pill * ---------------------------------------------------------------------- */ /* Font family */ --font-family-base: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Font weight — 영구크린 정책: bold = 600 (700 사용 금지) */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* Display */ --fs-display-l: 34px; --lh-display-l: 1.3; --ls-display-l: -0.03em; --fs-display-m: 26px; --lh-display-m: 1.3; --ls-display-m: -0.03em; --fs-display-s: 20px; --lh-display-s: 1.3; --ls-display-s: -0.04em; /* Head */ --fs-head-xl: 28px; --lh-head-xl: 1.4; --ls-head-xl: -0.02em; --fs-head-l: 24px; --lh-head-l: 1.4; --ls-head-l: -0.02em; --fs-head-m: 22px; --lh-head-m: 1.3; --ls-head-m: -0.02em; --fs-head-s: 19px; --lh-head-s: 1.3; --ls-head-s: -0.03em; --fs-head-xs: 18px; --lh-head-xs: 1.3; --ls-head-xs: -0.02em; /* SubHead */ --fs-subhead-xl: 22px; --lh-subhead-xl: 1.3; --ls-subhead-xl: -0.03em; --fs-subhead-l: 18px; --lh-subhead-l: 1.2; --ls-subhead-l: -0.02em; --fs-subhead-m: 17px; --lh-subhead-m: 1.2; --ls-subhead-m: -0.02em; --fs-subhead-s: 14px; --lh-subhead-s: 1.3; --ls-subhead-s: -0.02em; --fs-subhead-xs: 13px; --lh-subhead-xs: 1.2; --ls-subhead-xs: 0; /* Body */ --fs-body-xl: 18px; --lh-body-xl: 1.5; --ls-body-xl: -0.02em; --fs-body-l: 16px; --lh-body-l: 1.5; --ls-body-l: -0.02em; --fs-body-m: 15px; --lh-body-m: 1.5; --ls-body-m: -0.02em; /* ★ 본문 base */ --fs-body-s: 14px; --lh-body-s: 1.5; --ls-body-s: -0.02em; /* Caption */ --fs-caption-xl: 14px; --lh-caption-xl: 1.5; --ls-caption-xl: 0; --fs-caption-l: 13px; --lh-caption-l: 1.3; --ls-caption-l: -0.02em; --fs-caption-m: 12px; --lh-caption-m: 1.5; --ls-caption-m: -0.02em; --fs-caption-s: 11px; --lh-caption-s: 1.2; --ls-caption-s: 0; /* Label */ --fs-label-xxl: 16px; --lh-label-xxl: 1.4; --ls-label-xxl: -0.02em; --fs-label-xl: 15px; --lh-label-xl: 1.4; --ls-label-xl: -0.02em; --fs-label-l: 14px; --lh-label-l: 1.4; --ls-label-l: -0.02em; --fs-label-m: 13px; --lh-label-m: 1.0; --ls-label-m: -0.02em; --fs-label-s: 12px; --lh-label-s: 1.0; --ls-label-s: -0.02em; --fs-label-xs: 11px; --lh-label-xs: 1.0; --ls-label-xs: -0.02em; /* ------------------------------------------------------------------------- * 8. Typography — Deprecated Alias (점진 마이그레이션) * 신규 코드는 영구크린 6계층 토큰(--fs-{계층}-{사이즈}) 직접 사용 권장. * 아래 alias 는 기존 컴포넌트 호환을 위해 보존. v5.x 에서 제거 예정. * ---------------------------------------------------------------------- */ /* 사용자 명세 짧은 alias */ --fs-xs: var(--fs-caption-l); /* 13px */ --fs-sm: var(--fs-body-s); /* 14px */ --fs-base: var(--fs-body-m); /* 15px ★ 본문 */ --fs-lg: var(--fs-body-l); /* 16px */ --fs-xl: var(--fs-subhead-l); /* 18px */ --fs-2xl: var(--fs-head-xl); /* 28px */ --fs-3xl: var(--fs-head-l); /* 24px */ --fs-display: var(--fs-display-l); /* 34px */ --lh-base: 1.5; --lh-snug: 1.3; --lh-relaxed: 1.7; --ls-base: -0.02em; --ls-tight: -0.03em; /* 기존 --font-size-* (v3.x 컴포넌트 호환) */ --font-size-xs: var(--fs-caption-m); /* 12px */ --font-size-sm: var(--fs-body-s); /* 14px */ --font-size-base: var(--fs-body-m); /* 15px ★ (이전 16px) */ --font-size-lg: var(--fs-subhead-l); /* 18px */ --font-size-xl: var(--fs-display-s); /* 20px */ --font-size-2xl: var(--fs-head-l); /* 24px */ --font-size-3xl: var(--fs-head-xl); /* 28px (이전 30px) */ --font-size-4xl: var(--fs-display-l); /* 34px (이전 36px) */ --font-size-5xl: 48px; /* 영구크린 미정의 — 폐기 예정 */ /* 기존 --line-height-* 알리아스 */ --line-height-tight: 1.3; --line-height-snug: 1.4; --line-height-base: 1.5; --line-height-loose: 1.7; /* 기존 --letter-spacing-* 알리아스 */ --letter-spacing-heading: -0.03em; --letter-spacing-base: -0.02em; /* 기존 --font-weight-* 알리아스 (semibold/bold 둘 다 600 — 영구크린 정책) */ --font-weight-normal: var(--fw-regular); --font-weight-medium: var(--fw-medium); --font-weight-semibold: var(--fw-bold); --font-weight-bold: var(--fw-bold); /* 600 — 영구크린 (이전 700) */ /* ------------------------------------------------------------------------- * 9. 간격 (4px 베이스) * ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; /* v4.0.1 — 헤더 padding-top/bottom */ --space-8: 32px; --space-10: 40px; --space-12: 48px; /* GNB 메뉴 사이 gap */ --space-15: 60px; /* v4.0.1 — 로고 ~ 메뉴 간격 */ --space-16: 64px; --space-20: 80px; /* 페이지 제목 top padding */ --space-24: 96px; /* ------------------------------------------------------------------------- * 10. 라운드 — 본사 시스템 (기본 4 / xlg 8) * ---------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; --radius-full: 9999px; /* ------------------------------------------------------------------------- * 11. 레이아웃 * ---------------------------------------------------------------------- */ --container-wide: 1136px; --container-prose: 760px; --container-mobile: 640px; --container-pad: var(--space-5); /* --header-height — v4.0.1 부터 deprecated. * .site-header__inner 가 padding-based 자연 확장(28+28+content)이므로 height 고정 토큰 불필요. * .tabs-sticky { top: var(--header-height) } 호환 위해 84px 값은 보존. */ --header-height: 84px; --sticky-tab-height: 52px; /* ------------------------------------------------------------------------- * 12. 버튼·입력 매트릭스 — 본사 시스템 * ---------------------------------------------------------------------- */ --btn-height-xlg: 64px; --btn-height-lg: 52px; --btn-height-md: 44px; --btn-height-sm: 38px; --btn-height-xs: 32px; --btn-fs-xlg: var(--fs-label-xxl); --btn-fs-lg: 17px; --btn-fs-md: var(--fs-label-xxl); /* 16 */ --btn-fs-sm: var(--fs-label-l); /* 14 */ --btn-fs-xs: var(--fs-label-m); /* 13 */ --input-height: 44px; /* ------------------------------------------------------------------------- * 13. 그림자 * ---------------------------------------------------------------------- */ --shadow-card: none; --shadow-card-hover: 0 4px 16px rgba(54, 57, 74, 0.10); --shadow-sticky: 0 1px 0 rgba(54, 57, 74, 0.06); --shadow-popover: 0 8px 24px rgba(54, 57, 74, 0.12); /* ------------------------------------------------------------------------- * 14. 트랜지션 * ---------------------------------------------------------------------- */ --transition-fast: 150ms; --transition-base: 200ms; --transition-slow: 300ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ------------------------------------------------------------------------- * 15. z-index * ---------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; } /* ----------------------------------------------------------------------------- * 모바일 오버라이드 — 영구크린 Typography-Mobile.png 매트릭스 * 본문 body-m 이 PC 15px → Mobile 16px 로 한 단계 커진다 (가독성 보상). * 헤딩(display/head) 은 모바일에서 한~두 단계 축소. * -------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { /* Display */ --fs-display-l: 26px; --lh-display-l: 1.3; --ls-display-l: -0.03em; /* Head */ --fs-head-xl: 20px; --lh-head-xl: 1.3; --ls-head-xl: -0.04em; --fs-head-l: 18px; --lh-head-l: 1.4; --ls-head-l: -0.02em; --fs-head-m: 16px; --lh-head-m: 1.3; --ls-head-m: -0.03em; --fs-head-s: 14px; --lh-head-s: 1.3; --ls-head-s: -0.03em; /* Body — 본문이 PC 15 → Mobile 16 으로 커짐 (가독성) */ --fs-body-m: 16px; --lh-body-m: 1.5; --ls-body-m: -0.02em; --fs-body-s: 14px; --lh-body-s: 1.5; --ls-body-s: -0.02em; /* Caption */ --fs-caption-m: 12px; --lh-caption-m: 1.2; --ls-caption-m: 0; /* Label */ --fs-label-m: 14px; --lh-label-m: 1.4; --ls-label-m: -0.02em; --fs-label-s: 12px; --lh-label-s: 1.0; --ls-label-s: -0.02em; } }