안에서만 유효 ============================================================ */ .mo-renew { /* ---------- 컬러 (실사용 팔레트) ---------- */ --mo-red: #ff0000; /* 포인트: CTA·강조·할인가 */ --mo-ink: #323232; /* 위딩/본문 다크 1차 */ --mo-ink-2: #3c3c3c; /* 위딩/본문 다크 2차 */ --mo-sub: #777777; /* 서브 텍스트 그레이 */ --mo-line: #cccccc; /* 라인/비활성/플레이스홀더 */ --mo-line-2: #e5e5e5; /* 구분선/보더 */ --mo-bg: #f5f5f5; /* 카드/카테고리 배경(라이트그레이) */ --mo-bg-2: #fafafa; /* 오프화이트 배경 */ --mo-white: #ffffff; --mo-black: #000000; --mo-near-black: #171716; /* 멤버십 등급 카드 배경 (밝음→어두움) */ --mo-tier-500: #ffffff; --mo-tier-700: #ede9e5; /* 웜베이지 */ --mo-tier-1000: #b7b3ae; --mo-tier-1500: #726f6b; /* 다크그레이 */ --mo-tier-2000: #171716; /* 블랙 */ /* ---------- 타이포 ---------- */ /* 합성글꼴 스택: 라틴=Haas, 한글=Noto 폴백 */ --mo-font: "NeueHaasUnicaPro", "Noto Sans KR", sans-serif; --mo-font-kr: "Noto Sans KR", sans-serif; --mo-font-en: "NeueHaasUnicaPro", sans-serif; /* 굵기 (2026-06 가이드 영문명/수치): DemiLight350·Regular400·Medium500·Bold700·Black900. ⚠️ Noto DemiLight 350 정적 woff2 미보유 → 브라우저가 인접 300 으로 매핑. EN Black 900 없음(Haas 최대 700). */ --mo-w-light: 350; /* DemiLight (가이드 "얇게") */ --mo-w-regular: 400; --mo-w-medium: 500; --mo-w-bold: 700; /* 가이드 "Bold" (구 Semibold) */ --mo-w-black: 900; /* 가이드 "Black" (구 Bold) */ --mo-tracking: -0.02em; /* 공통 자간 -2% (전 영역) */ /* 폰트 사이즈 — PC 기준 8위계 (MO 는 .mo-renew 미디어쿼리에서 h1/h2 만 재정의) */ --mo-fs-h1: 35px; /* 메인 강조 */ --mo-fs-h2: 30px; /* 강조 */ --mo-fs-h3: 20px; /* 영역 제목1 (PC=MO) */ --mo-fs-h4: 17px; /* 영역 제목2 (MO 전용 제목) */ --mo-fs-point: 15px; /* 포인트(빨강) */ --mo-fs-body: 17px; /* 본문1 (P1) */ --mo-fs-body-sm: 15px; /* 본문2 (P2) */ --mo-fs-caption: 13px; /* 주석 (Comment) */ /* 행간 (배수 = px행간/크기) */ --mo-lh-h1: 1.571; /* 35/55 */ --mo-lh-h2: 1.5; /* 30/45 */ --mo-lh-h3: 1.55; /* 20/31 */ --mo-lh-h4: 1.647; --mo-lh-48: 48px; --mo-lh-31: 31px; --mo-lh-35: 35px; --mo-lh-29: 29px; --mo-lh-45: 45px; --mo-lh-15: 15px; /* 17/28 */ --mo-lh-point: 1; /* 15/15 */ --mo-lh-body: 1.824; /* 17/31 */ --mo-lh-body-sm: 1.933; /* 15/29 */ --mo-lh-caption: 1.154; /* 13/15 */ /* ---------- 코너 라운드 (PC) ---------- */ --mo-r-lg: 120px; /* 큰 이미지 */ --mo-r-md: 50px; /* 중간 */ --mo-r-sm: 35px; /* 작은 */ --mo-r-xs: 20px; /* 더 작은 */ --mo-r-ui: 8px; /* 버튼/인풋/소형카드 */ /* ---------- 레이아웃 메트릭 (PC 1920 기준) ---------- */ --mo-base-w: 1920px; --mo-base-w1680: 1680px; --mo-base-w1600: 1600px; /* 디자인 기준폭 */ --mo-fullbleed-w: 1850px; /* 풀블리드(좌우 35) */ --mo-fullbleed-margin: 35px; --mo-content-w: 960px; /* 콘텐츠/카드 컬럼(좌우 480 센터) */ --mo-wide-w: 1440px; /* 캐러셀 밴드(BA/data) — Figma 좌측 x240 시작, 우측 오버플로 */ --mo-gutter: 38px; /* 2-up 거터 */ /* ---------- 모션 ---------- */ --mo-fade-dur: 0.7s; /* 페이드인업 기본(디자이너 확정 전 잠정) */ --mo-fade-ease: cubic-bezier(0.16, 1, 0.3, 1); --mo-fade-shift: 24px; /* 업 이동량 */ /* ---------- 베이스 리셋 (스코프 한정) ---------- */ font-family: var(--mo-font); font-weight: var(--mo-w-regular); letter-spacing: var(--mo-tracking); color: var(--mo-ink); -webkit-font-smoothing: antialiased; } /* box-sizing 은 하위 전체에 적용하되 .mo-renew 안으로만 한정 */ .mo-renew *, .mo-renew *::before, .mo-renew *::after { box-sizing: border-box; } /* ---------- 타이포 헬퍼 클래스 (선택적 사용) ---------- */ .mo-renew .mo-h1 { font-size: var(--mo-fs-h1); line-height: var(--mo-lh-h1); font-weight: var(--mo-w-regular); } /* h2~h4 는

/

요소의 UA 기본 bold 를 덮어 가이드대로 Regular(400) 고정. 필요한 곳에서만 개별적으로 더 굵게 지정. (Figma Dev: 섹션 제목 Weight 400) / .mo-renew .mo-h2 { font-size: var(--mo-fs-h2); line-height: var(--mo-lh-h2); font-weight: var(--mo-w-regular); margin: 0; } .mo-renew .mo-h3 { font-size: var(--mo-fs-h3); line-height: var(--mo-lh-h3); font-weight: var(--mo-w-regular); } / H4 = 영역 제목2 (가이드상 MO 전용 제목, PC 에서 쓰면 동일 스펙) / .mo-renew .mo-h4 { font-size: var(--mo-fs-h4); line-height: var(--mo-lh-h4); font-weight: var(--mo-w-regular); } .mo-renew .mo-body { font-size: var(--mo-fs-body); line-height: var(--mo-lh-body); } .mo-renew .mo-body-sm { font-size: var(--mo-fs-body-sm); line-height: var(--mo-lh-body-sm); } / 주석 = DemiLight 350, 색은 본문 ink(#323232) 상속 (가이드: Comment 색 rgb50,50,50) / .mo-renew .mo-caption { font-size: var(--mo-fs-caption); line-height: var(--mo-lh-caption); font-weight: var(--mo-w-light); } .mo-renew .mo-point { font-size: var(--mo-fs-h4); line-height: var(--mo-lh-point); color: var(--mo-red); font-weight: var(--mo-w-medium); } / ---------- 모바일 재정의 (390 디자인 기준) ---------- 실제 전환 폭은 디자이너 확정 전 잠정 768px. MO 사이즈/행간/라운드/콘텐츠 메트릭만 덮어쓰기. / @media (max-width: 768px) { .mo-renew { / 타이포: H1/H2 만 MO 축소(35/55→26/38, 30/45→22/35). H3(20/31)·H4(17/28)·본문(17/15)·포인트(15)·주석(13)은 PC=MO 동일 → 재정의 없음. / --mo-fs-h1: 26px; / 메인 강조 MO / --mo-fs-h2: 22px; / 강조 MO / --mo-lh-h1: 1.462; / 26/38 / --mo-lh-h2: 1.591; / 22/35 / / MO 라운드: 큰 50, 작은 30, 더작은 20 / --mo-r-lg: 50px; --mo-r-md: 35px; --mo-r-sm: 30px; --mo-r-xs: 20px; / MO 레이아웃: 390 기준 350 콘텐츠(좌우 20) / --mo-base-w: 390px; --mo-fullbleed-w: 390px; --mo-fullbleed-margin: 0px; --mo-content-w: 350px; --mo-wide-w: 350px; --mo-gutter: 16px; } } / ---------- 접근성: 모션 최소화 선호 시 페이드 비활성 ---------- */ @media (prefers-reduced-motion: reduce) { .mo-renew { --mo-fade-dur: 0.001s; --mo-fade-shift: 0px; } }