/* ============================================================ 까투리 & 대박산업식품 — 디자인 토큰 (단일 진실 원천) 모든 색상·간격·타이포는 반드시 이 변수로만 참조한다. 테마 스왑: | ============================================================ */ /* ---------- 디스플레이 서체: G마켓 산스 ---------- 한국 대기업 브랜드·프로모션 헤드라인 관용 서체. 헤드라인/워드마크/버튼/뱃지 전용. 본문은 Pretendard 유지(국내 기업 UI 표준). 가중치는 Medium(500)/Bold(700)만 로드. */ @font-face { font-family: "GmarketSans"; font-weight: 500; font-style: normal; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-display: swap; } @font-face { font-family: "GmarketSans"; font-weight: 700; font-style: normal; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); font-display: swap; } :root { /* ---------- 공통 뉴트럴 ---------- */ --ink: #221F1F; /* 본문 텍스트 (양 브랜드 공통) */ --ink-soft: #4A4644; --ink-mute: #8A8480; --paper: #FFFFFF; --line: rgba(34, 31, 31, 0.10); --line-strong: rgba(34, 31, 31, 0.18); /* 다크 섹션(프리미엄 무드)용 */ --dark-bg: #171414; --dark-bg-soft: #211D1C; --dark-text: #F5F2EF; --dark-text-mute: rgba(245, 242, 239, 0.62); --dark-line: rgba(245, 242, 239, 0.14); /* ---------- 타이포그래피 ---------- */ --font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* 헤드라인·워드마크·버튼·뱃지 전용 (GmarketSans는 300/500/700만 존재 — 700 초과 금지) */ --font-display: "GmarketSans", "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif; /* 유동 타입 스케일 — OS 글자 키우기 대응: rem 기반 + clamp (2026-07-25 사용자 지시로 전 단계 약 20% 상향 — 대기업 사이트 체감 크기) */ --fs-hero: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem); /* 44→88 */ --fs-display: clamp(2.25rem, 1.3rem + 3.8vw, 4rem); /* 36→64 */ --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); /* 32→52 */ --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); /* 28→40 */ --fs-h3: clamp(1.4375rem, 1.25rem + 0.75vw, 1.75rem);/* 23→28 */ --fs-lg: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);/* 19→22 */ --fs-md: 1.0625rem; /* 17 */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.875rem; /* 14 */ --fs-overline: 0.8125rem; /* 13 — 자간 넓힘용 */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.65; --ls-tight: -0.02em; --ls-overline: 0.18em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* ---------- 간격 (8pt 기반) ---------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ /* 섹션 수직 패딩: 모바일→데스크탑 유동 */ --sect-pad: clamp(4rem, 2.5rem + 6vw, 8.5rem); --sect-pad-sm: clamp(2.5rem, 1.75rem + 3vw, 5rem); /* ---------- 레이아웃 ---------- */ --container: 75rem; /* 1200px */ --container-wide: 87.5rem; /* 1400px */ --container-narrow: 50rem; /* 800px */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --header-h: 6rem; /* 96px — 실측 벤치마크(BBQ 138/굽네 120) 반영, 모바일 4.5rem */ /* ---------- 형태 ---------- */ --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-pill: 62.4375rem; /* ---------- 그림자 (인쇄물 느낌 — 낮고 부드럽게) ---------- */ --shadow-card: 0 1px 2px rgba(34, 31, 31, 0.05), 0 8px 24px rgba(34, 31, 31, 0.07); --shadow-lift: 0 2px 6px rgba(34, 31, 31, 0.08), 0 18px 44px rgba(34, 31, 31, 0.14); --shadow-cta: 0 10px 28px var(--point-glow, rgba(34, 31, 31, 0.25)); /* ---------- 모션 ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-reveal: 900ms; /* z-index 계층 */ --z-header: 100; --z-cta: 90; --z-modal: 200; --z-popup: 300; } /* ============================================================ 까투리 — 음식 브랜드 (레드 테마) [고정값] ============================================================ */ [data-theme="katoori"] { --point: #980A18; --point-deep: #6E0711; /* hover/그라데이션 하단 */ --point-tint: #FBEDEE; /* 연한 배경 틴트 */ --point-glow: rgba(152, 10, 24, 0.28); --sub: #EFAF18; /* 골드 — 뱃지·강조·디바이더 */ --sub-tint: #FDF6E3; --bg: #F7F5F3; --text: #221F1F; --card-bg: #FFFFFF; --on-point: #FFF8F0; /* 포인트 컬러 위 텍스트 */ } /* ============================================================ 대박산업식품 — 식품 제조 기업 (그린 테마) [고정값] ============================================================ */ [data-theme="daebak"] { --point: #33AC45; --point-deep: #22833A; --point-tint: #EAF7ED; --point-glow: rgba(51, 172, 69, 0.26); --sub: #EFECE6; /* 웜 베이지 — 섹션 배경·카드 */ --sub-tint: #F7F5F0; --bg: #FFFFFF; --text: #221F1F; --card-bg: #FFFFFF; --on-point: #F4FFF6; } /* 게이트웨이(중립) — 브랜드 선택 전 */ [data-theme="gateway"] { --point: #221F1F; --point-deep: #000000; --point-tint: #F1EFED; --point-glow: rgba(34, 31, 31, 0.25); --sub: #B9B2AC; --sub-tint: #F7F5F3; --bg: #171414; --text: #F5F2EF; --card-bg: #211D1C; --on-point: #FFFFFF; /* 게이트웨이 hover 시 살아나는 각 브랜드 컬러 */ --katoori-point: #980A18; --katoori-sub: #EFAF18; --daebak-point: #33AC45; --daebak-sub: #EFECE6; }