@charset "UTF-8"; /* ========================================================================= 모비고 브랜드 기반 (Mobigo Base) 접두사 : mgo- (디자인 토큰과 문서 기본만. 컴포넌트 클래스는 여기 없다) 쓰는 페이지 : / (index.html) · /pricing/ · /secure/ · /login/loginWeb.html — 전부 [이 파일이 생긴 이유] pricing 을 퍼블리싱할 때 main-landing.css 의 디자인 토큰(§1)·문서 기본(§2)· 공통 크롬 토큰 매핑(§3)이 통째로 복사됐다. 세 블록 약 70줄이 값까지 완전히 같아서, 브랜드 색이나 거터를 한 번 고치면 두 파일을 함께 고쳐야 하는 상태였다. 여기 한 벌만 둔다. mobitax 는 이 파일을 쓰지 않는다. Figma 변수 이름 체계가 --mtx-* 로 다르고 (값은 대체로 같지만) 서체 주석·hero 전용 색 등 자기 사정이 있어 mobitax/css/landing.css 가 자기 토큰과 --lp-* 매핑을 직접 갖는다. [로드 순서] 1. /css/components.css 공통 크롬 (--lp-* 소비) 2. /css/base-mobigo.css 이 파일 (--mgo-* 정의 + --lp-* 매핑) 3. /css/{main-landing|pricing}.css 페이지 고유 섹션 include/components/head/Head.php 의 lpHead(css: [...]) 가 1번을 자동으로 앞에 붙이므로, 페이지는 2·3번만 배열로 넘긴다. [빌드] renewal CSS 관례대로 BUILD_DIR 없이 직접 경로로 로드한다. ========================================================================= */ /* ========================================================================= 1. 디자인 토큰 — Figma 변수 원본 :root 가 아니라 .mgo-lp 에 정의해 다른 스타일시트와 함께 로드돼도 전역으로 새지 않는다(common.css:3-6 의 --fw-* 와 무충돌). ========================================================================= */ .mgo-lp { --mgo-primary: #2f8bff; /* color/primary/default */ --mgo-primary-light: #77b4ff; /* color/primary/light */ --mgo-primary-bg1: #ecf4ff; /* color/primary/bg1 */ --mgo-primary-bg2: #f6faff; /* color/primary/bg2 */ --mgo-text: #292929; /* color/text/default */ --mgo-text-sub: #696969; /* color/text/sub (=secondary) */ --mgo-text-tertiary: #a3a3a3; /* color/text/tertiary */ --mgo-text-inverse: #ffffff; /* color/text/inverse */ --mgo-black: #212121; /* Black */ --mgo-white: #ffffff; /* White */ --mgo-bg: #ffffff; /* color/bg/default */ --mgo-bg-secondary: #fafafa; /* color/bg/secondary */ --mgo-bg-tertiary: #f1f1f1; /* color/bg/tertiary */ --mgo-border-sub: #eeeeee; /* color/border/sub */ --mgo-border-default: #e0e0e0; /* color/border/default */ --mgo-topbar-bg: #f5f5f5; /* TopBar 배경 (변수 미등록, 실측) */ --mgo-bg-light: #d3d3d3; /* color/bg/light — 체크박스 미체크 바탕. 로그인·SSO 약관동의가 함께 쓴다 */ /* 서체 — Pretendard: Bold 700 / SemiBold 600 / Regular 400 / Light 300 */ --mgo-font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif; --mgo-fw-light: 300; --mgo-fw-regular: 400; --mgo-fw-semi: 600; --mgo-fw-bold: 700; /* 레이아웃 — Figma: Breakpoint 1280 / Padding 40 */ --mgo-container: 1280px; --mgo-gutter: 40px; --mgo-section-y: 80px; /* 버튼 그림자 — Figma "파란그림자 (버튼)" #2F8BFF66 blur 24 */ --mgo-btn-shadow: 0 0 24px rgba(47, 139, 255, .4); } /* ========================================================================= 2. 문서 기본 — 글꼴 · 글자 크기 · 행간 선택자가 .mgo-lp 가 아니라 .lp.mgo-lp 다. §1·§3 의 변수만 쓰고 본문 글자 모양은 예전 그대로 둬야 하는 화면이 생겼기 때문이다 — 회원가입(/join/joinStep*.html)은 화면 위쪽 TopBar 를 그리려고 이 파일의 변수를 받아가지만, 본문 입력 폼은 예전 join.css 가 그린다. 아래 값이 그 화면의 에 걸리면 기준 글자 크기가 12px 에서 16px 로, 행간이 1.8 로 바뀌어 폼의 줄 간격이 전부 벌어진다 (제목 높이 35px → 45px, 폼 전체 566px → 605px 로 실측됨). 그래서 변수만 필요한 화면은 만 주고, 이 파일을 온전히 쓰는 화면 6종(랜딩 3 · 로그인 · SSO 약관동의)은 지금처럼 class="lp mgo-lp" 라 아래 값이 그대로 걸린다. ========================================================================= */ .lp.mgo-lp { font-family: var(--mgo-font); font-size: 16px; font-weight: var(--mgo-fw-light); line-height: 1.8; color: var(--mgo-text); background: var(--mgo-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* 한글 어절 단위 줄바꿈. normal 로 두면 음절 사이에서 끊겨 단어가 갈라진다. */ word-break: keep-all; overflow-wrap: break-word; } /* ========================================================================= 3. 공통 크롬 토큰 계약 (/css/components.css 가 소비한다) 공통 CSS 는 --lp-* 만 읽는다. 여기서 모비고 Figma 토큰을 매핑한다. 커스텀 프로퍼티는 '사용 시점'에 해석되므로, 아래 §4 에서 --mgo-gutter 가 16px 로 바뀌면 --lp-gutter 도 자동으로 따라온다. ========================================================================= */ .mgo-lp { --lp-bg: var(--mgo-bg); --lp-white: var(--mgo-white); --lp-black: var(--mgo-black); --lp-text: var(--mgo-text); --lp-text-sub: var(--mgo-text-sub); --lp-primary: var(--mgo-primary); --lp-border: var(--mgo-border-default); --lp-border-sub: var(--mgo-border-sub); --lp-hover-bg: var(--mgo-primary-bg1); --lp-topbar-bg: var(--mgo-topbar-bg); --lp-fw-light: var(--mgo-fw-light); --lp-fw-regular: var(--mgo-fw-regular); --lp-fw-semi: var(--mgo-fw-semi); --lp-fw-bold: var(--mgo-fw-bold); --lp-container: var(--mgo-container); --lp-gutter: var(--mgo-gutter); --lp-section-y: var(--mgo-section-y); } /* ========================================================================= 4. 모바일 (767px 이하) — 거터만 바꾼다 폰트 크기·섹션 여백·버튼 크기는 데스크톱과 같다(축소하지 않는다). 섹션별 1단 전환 등 나머지 모바일 규칙은 각 페이지 CSS 가 갖는다. [브레이크포인트를 767/1279 로 잡은 이유 — 2026-08-03] .lp 계열 CSS(이 파일 · components.css · main-header.css · main-landing.css · pricing.css · secure.css · mobitax/css/landing.css)의 유일한 브레이크포인트는 767px 이고, 헤더 거터만 1279px 을 추가로 쓴다. 저장소의 기존 손코딩 CSS 는 max-width:768px(style.css 2곳 · rn_style.css 1곳)·1240px(3곳)이라 값이 다르다. Figma 시안 폭을 그대로 경계로 쓴다: 데스크톱 1280 · 태블릿 768 · 모바일 360. 시안 폭 자체는 데스크톱 쪽에 들어가야 하므로 "그 미만"을 잡아 1279 / 767 이 된다. 768 로 쓰면 시안 폭 768 에서 모바일 규칙이 걸려 시안과 어긋난다. 기존 768/1240 을 따르지 않은 것은 이 이유이며, .lp 스코프 밖에는 규칙이 걸리지 않으므로 레거시 화면에 두 값이 섞이는 일은 없다. ========================================================================= */ @media screen and (max-width: 767px) { .mgo-lp { --mgo-gutter: 16px; } }