@charset "UTF-8";
/* =========================================================================
공통 크롬 (Common Chrome)
대상 : include/components/ 컴포넌트가 출력하는 마크업 전용
접두사 : lp- ← landing page 에서 유래한 역사적 이름이다. 지금은 자립형 골격
페이지가 공유하는 네임스페이스이며 랜딩 전용이 아니다.
쓰는 페이지 : / (index.html) · /pricing/ · /secure/ · /login/loginWeb.html (.mgo-lp)
/mobitax/landing.html (.mtx-lp)
[이 파일이 생긴 이유]
main-landing.css 와 mobitax/css/landing.css 의 공통 크롬(리셋·container·
TopBar·Footer·패밀리 셀렉트) 규칙 25개를 정규화 비교한 결과:
· 선택자·선언 완전 동일 8
· 토큰 '이름'만 다르고 값 동일 12
· 값이 실제로 다름 5 ← 전부 표류(하드코딩·토큰명 불일치)
즉 같은 디자인을 두 번 적어둔 상태였고, 실제로 어긋나기 시작했다
(모바일 gap 16px 이 main 에만 있었음 등). 정본은 main 쪽 값이다.
2차로 GNB(§7)와 모바일 사이드 메뉴(§8)를 들여왔다. pricing 을 퍼블리싱할 때
두 영역이 main-landing 에서 통째로 복사돼 완전히 같은 규칙이 두 벌이 됐다.
마크업도 include/components/ 로 함께 올렸다.
3차(2026-08-03)로 헤더가 레거시 마크업(include/header.html 의 .main-header)으로
돌아갔다. 그때 §7 GNB·§8 모바일 사이드 메뉴를 이 파일에서 빼
/css/main-header.css 로 옮겼다 — 헤더 컴포넌트의 스타일은 레거시 헤더가 이미
쓰던 그 파일 한 곳에 모은다. 여기 남은 것은 페이지 공통 크롬뿐이다.
[토큰 계약 — 페이지가 채운다]
이 파일은 --lp-* 만 소비한다. 각 페이지(또는 브랜드 CSS)가 자기 Figma
토큰을 --lp-* 에 매핑한다(/css/base-mobigo.css · mobitax/css/landing.css).
커스텀 프로퍼티는 '사용 시점'에 해석되므로, 767px 에서 브랜드 CSS 가
--mgo-gutter 를 16px 로 바꾸면 --lp-gutter 도 자동으로 따라온다.
필요한 계약:
색 --lp-bg --lp-white --lp-black --lp-text --lp-text-sub
--lp-border --lp-border-sub --lp-hover-bg --lp-topbar-bg --lp-primary
서체 --lp-fw-light --lp-fw-regular --lp-fw-semi --lp-fw-bold
레이아웃 --lp-container --lp-gutter --lp-section-y
[로드 순서] 이 파일 먼저, 브랜드 CSS, 페이지 CSS 나중.
뒤에 오는 쪽이 덮어쓸 수 있게 한다.
[빌드] renewal CSS 관례대로 BUILD_DIR 없이 직접 경로로 로드한다.
========================================================================= */
/* =========================================================================
1. 리셋 — 타입 선택자는 전부 :where() 로 감싸 특이도 0 을 유지한다.
`.lp a` 처럼 쓰면 (0,1,1) 이 되어 페이지의 컴포넌트 클래스(0,1,0)를
눌러버린다(mobitax 랜딩에서 CTA 글자색이 실제로 뒤집혔다).
========================================================================= */
.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }
.lp { margin: 0; padding: 0; }
.lp :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, address) { margin: 0; }
/* 제목 태그의 UA 기본 font-size(1.5em 등)·bold 중화 — 크기는 각 클래스가 지정 */
.lp :where(h1, h2, h3, h4) { font-size: inherit; font-weight: inherit; }
.lp :where(address) { font-style: normal; }
.lp :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
/* 자간 0 — .lp 골격을 쓰는 화면 전체 (2026-08-06 방침).
앞으로 모든 페이지를 0 으로 통일해 가며, 지금은 새 골격(.lp) 화면이 대상이다.
랜딩 4종 · 로그인 · SSO 동의가 여기 해당하고, 레거시 페이지는 body 에 .lp 가
없어 영향받지 않는다. 페이지마다 같은 규칙을 복제하지 않기 위해 여기 둔다.
.lp-menu 를 따로 적은 이유: 모바일 사이드 메뉴는 /css/main-header.css 가
(0,2,0) 으로 자간을 줘서 .lp *(0,1,0) 으로는 덮이지 않는다. 그 파일은 레거시
~50개 페이지가 함께 쓰므로 고칠 수 없다. 레거시까지 0 으로 통일되면
그쪽 선언을 지우고 이 줄도 함께 없앨 것. */
.lp,
.lp *,
.lp .lp-menu .lp-menu__item,
/* 에 .lp 를 붙이지 않고 이 파일의 헤더·TopBar 만 가져다 쓰는 화면
(회원가입 /join/joinStep*.html). 본문은 예전 자간(common.css:50 의 .02em)을
그대로 두고 헤더 영역만 0 으로 맞춘다. 이 선언이 없으면 같은 메뉴가 로그인
화면보다 3px 넓게 그려진다(실측 203px vs 200px).
.lp-menu 만 선택자를 길게 잡는 이유는 위 문단과 같다. */
.lp-topbar,
.lp-topbar *,
.main-header--responsive,
.main-header--responsive *,
.mgo-lp .lp-menu .lp-menu__item {
letter-spacing: 0;
}
/* 글자 렌더링 방식 — 위 자간과 같은 사정이다. base-mobigo.css §2 가 에 주는
antialiased 를 .lp 가 없는 화면은 받지 못하고, 기본값 auto 는 서브픽셀 렌더링이라
글자 획이 도톰하게 깔린다. 굵기 값(600)은 같은데도 회원가입 헤더가 로그인 헤더보다
굵어 보이던 원인이다. 이 속성은 자식에게 상속되므로 바깥 요소만 지정하면 된다. */
.lp-topbar,
.main-header--responsive,
.lp-menu {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 이미지 드래그 방지 — -webkit-user-drag 는 Chrome/Safari 만 먹으므로
Firefox 용으로 각 ![]()
에 draggable="false" 속성도 함께 넣어 뒀다.
pointer-events 는 건드리지 않는다(로고 등이 링크로 감싸여 있다). */
.lp :where(img, svg) {
display: block;
max-width: 100%;
-webkit-user-drag: none;
user-select: none;
}
.lp :where(a) { color: inherit; text-decoration: none; }
.lp :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
.lp :where(button) { border: 0; background: none; cursor: pointer; }
.lp :where(table) { width: 100%; border-collapse: collapse; }
/* 포커스 링 (WCAG 2.4.7 / 2.4.11)
※ 파란 면 위에서 흰 링으로 반전하는 규칙은 페이지 CSS 가 갖는다
(.mgo-lp-btn:focus-visible 등). 대상 클래스가 페이지마다 다르다. */
.lp a:focus-visible,
.lp button:focus-visible {
outline: 3px solid #0b63d6;
outline-offset: 2px;
border-radius: 4px;
}
/* 본문 바로가기 (WCAG 2.4.1) */
.lp-skip {
position: absolute;
left: 8px; top: -60px;
z-index: 100;
padding: 10px 16px;
border-radius: 8px;
background: #0b63d6;
color: #fff;
font-size: 14px;
font-weight: var(--lp-fw-semi);
}
.lp-skip:focus { top: 8px; }
/* 스크린리더 전용 */
.lp-sr {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* =========================================================================
2. 레이아웃 프리미티브
Figma 내부 프레임은 w-1280 + px-40 → 콘텐츠 실폭 1200
좌우 패딩은 컨테이너가 단독 소유한다. 섹션 __inner 에서 padding 단축을
쓰면 컨테이너의 좌우 값을 덮어써 버린다(mobitax 에서 실제로 발생).
========================================================================= */
.lp-container {
width: 100%;
max-width: var(--lp-container);
margin: 0 auto;
padding-left: var(--lp-gutter);
padding-right: var(--lp-gutter);
}
/* ── 조건부 줄바꿈 ────────────────────────────────────────────────────────
데스크톱과 모바일의 줄바꿈 위치가 섹션마다 다르다. 각 조건부
뒤에는
공백을 하나 두어, 숨겨진 쪽에서 단어 사이 띄어쓰기가 되도록 한다
(줄 첫머리 공백은 브라우저가 무시한다).
세 랜딩이 각자 mgo-lp-br-m / mtx-lp-br-m 로 같은 규칙을 갖고 있었다.
브레이크포인트 계약(§6)을 이 파일이 갖고 있으니 유틸리티도 여기 둔다. */
.lp-br-d { display: inline; } /* 데스크톱에서만 줄바꿈 */
.lp-br-m { display: none; } /* 모바일에서만 줄바꿈 */
.lp-only-d { display: inline; } /* 데스크톱에서만 보이는 글자 */
/* =========================================================================
3. TopBar — 40px, 패밀리 사이트 스위처
========================================================================= */
.lp-topbar { background: var(--lp-topbar-bg); }
.lp-topbar__list {
display: flex;
align-items: center;
gap: 16px;
height: 40px;
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
}
.lp-topbar__link {
font-weight: var(--lp-fw-regular);
color: var(--lp-text-sub);
}
.lp-topbar__link--current {
font-weight: var(--lp-fw-semi);
color: var(--lp-text);
}
/* =========================================================================
4. Footer
========================================================================= */
.lp-footer { background: var(--lp-bg); }
.lp-footer__inner {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: var(--lp-section-y);
padding-bottom: var(--lp-section-y);
}
.lp-footer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.lp-footer__links {
display: flex;
align-items: center;
gap: 24px;
font-size: 14px;
font-weight: var(--lp-fw-bold);
line-height: 1.6;
white-space: nowrap;
}
.lp-footer__divider {
flex-shrink: 0;
width: 1px;
height: 16px;
background: var(--lp-text);
}
.lp-footer__company {
font-size: 13px;
font-weight: var(--lp-fw-regular);
line-height: 1.6;
color: var(--lp-text-sub);
}
/* =========================================================================
5. 패밀리 사이트 셀렉트 (include/components/footer/FamilySelect.php)
Figma 는 닫힌 상태만 디자인했다. 열린 목록은 사내 Select 컴포넌트
(mobisell-front packages/ui/src/components/Select)를 기준으로 맞춘다.
그 컴포넌트는 react-select 래퍼이고 menu 는 zIndex(10) 외에 재정의가 없어
react-select v5 기본 menu/menuList/option 값이 곧 사내 표준이다.
menu : bg #fff, radius 4, shadow 0 0 0 1px + 0 4px 11px (각 black 10%),
컨트롤과의 간격 8px(menuGutter), width 100%, z-index 10
menuList : padding 4px 0, max-height 300px, overflow-y auto
option : padding 8px 12px, cursor default, focus 시 배경 틴트
========================================================================= */
.lp-select { position: relative; width: 200px; flex-shrink: 0; }
.lp-select__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid var(--lp-border);
border-radius: 8px;
background: var(--lp-white);
color: var(--lp-black);
font-size: 13px;
font-weight: var(--lp-fw-semi);
line-height: normal;
text-align: left;
}
/* SVG 실크기 11×6 — Figma inset 29.17%/14.58%/33.33%/16.67% 복원 */
.lp-select__toggle img {
flex-shrink: 0;
width: 16px; height: 16px;
padding: 4.67px 2.33px 5.33px 2.67px;
}
.lp-select__list {
position: absolute;
left: 0; right: 0;
bottom: calc(100% + 8px); /* 위로 열림 + menuGutter 8px */
z-index: 10;
display: none;
max-height: 300px;
overflow-y: auto;
padding: 4px 0;
border-radius: 4px;
background: var(--lp-white);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 11px rgba(0, 0, 0, .1);
}
.lp-select[data-open="true"] .lp-select__list { display: block; }
.lp-select__list li { display: block; }
.lp-select__item {
display: block;
padding: 8px 12px;
font-size: 13px;
font-weight: var(--lp-fw-light);
line-height: normal;
color: var(--lp-black);
cursor: default;
}
.lp-select__item:hover,
.lp-select__item:focus-visible { background: var(--lp-hover-bg); }
.lp-select__toggle:focus-visible {
outline: 1px solid var(--lp-black);
outline-offset: 0;
border-radius: 8px;
}
/* =========================================================================
6. Partners — 협력사 로고 4열 (include/landing/partners/Partners.php)
바깥 섹션(배경·여백)은 페이지가 갖는다. 여기는 안쪽 블록만 담당한다.
========================================================================= */
.lp-partners {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
/* 크기는 페이지마다 다르다 — main-landing 20px / secure 24px. 기본은 20px 이고
secure.css 가 덮어쓴다. 자간은 이 디자인 시스템 규칙대로 글자 크기의 2%. */
.lp-partners__label {
width: 100%;
font-size: 20px;
font-weight: var(--lp-fw-semi);
line-height: 1.8;
color: var(--lp-text-sub);
text-align: center;
}
.lp-partners__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
/* Figma: mix-blend-luminosity + opacity 80% — 로고를 무채색으로 눌러 통일 */
mix-blend-mode: luminosity;
opacity: .8;
}
.lp-partners__cell {
display: flex;
align-items: center;
justify-content: center;
height: 90px;
overflow: hidden;
}
.lp-partners__cell img { object-fit: contain; }
/* Figma 실측 크기 — 로고마다 다르다 */
.lp-partners__cell--1 img { width: 121.5px; height: 121.5px; }
.lp-partners__cell--2 img { width: 44px; height: 36px; }
.lp-partners__cell--3 img { width: 128px; height: 32px; }
.lp-partners__cell--4 img { width: 128.35px; height: 120.8px; }
/* =========================================================================
7·8. (이전) GNB · 모바일 사이드 메뉴 → /css/main-header.css 로 이동 (2026-08-03)
헤더가 레거시 마크업(include/header.html 의 .main-header)으로 돌아가면서,
헤더 컴포넌트의 스타일은 레거시 헤더가 이미 쓰던 /css/main-header.css 한 곳에
모으기로 했다. 그래서 이 파일에 있던
· §7 자체 GNB(.lp-gnb …) — 쓰는 마크업이 사라져 폐기
· §7 햄버거(.lp-gnb__menu) — main-header.css 로 이동
· §8 모바일 사이드 메뉴(.lp-menu …) — main-header.css 로 이동
가 여기서 빠졌다. 절 번호는 아래 §9 이하의 상호 참조가 어긋나지 않도록
비워 두기만 했다.
이 파일에 남은 것은 페이지 공통 크롬(리셋·container·Footer·패밀리 셀렉트·
협력사)뿐이다. 헤더/모바일 메뉴 스타일을 고칠 일이 생기면 main-header.css 를 본다.
========================================================================= */
/* =========================================================================
9. 모바일 (767px 이하)
========================================================================= */
@media screen and (max-width: 767px) {
/* 조건부 줄바꿈 반전 (§2) */
.lp-br-d { display: none; }
.lp-br-m { display: inline; }
.lp-only-d { display: none; }
/* 헤더·모바일 사이드 메뉴의 모바일 규칙은 /css/main-header.css 에 있다
(헤더 컴포넌트 스타일을 한 파일에 모으는 정책 — 위 §7·8 참고). */
/* 협력사 — 4열 → 2열 2행 */
.lp-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-footer__top {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
/* 패밀리 셀렉트는 모바일에서도 200px 를 유지한다 — 랜딩 4종 시안 공통
(mobitax 모바일 Figma 911:25246 · 2026-08-05 사용자 확인).
이전에는 여기서 width:100% 로 늘리고 있었다. */
/* 링크 묶음 — 시안은 한 줄이지만 gap 24 로는 360px 에서 들어가지 않는다.
항목 실폭 합 252px + 간격 4개 × 24 = 348px > 콘텐츠 328px.
gap 을 16 으로 줄이면 316px 로 한 줄이 유지된다(시안이 의도한 배치).
줄바꿈으로 처리하면 3줄로 감겨 시안과 훨씬 크게 벌어진다.
flex-wrap 은 320px 급 더 좁은 기기용 안전장치로만 남긴다.
※ 이 규칙은 이전에 main-landing.css 에만 있었다 — mobitax 는 gap 24 로
남아 모바일에서 더 크게 감기고 있었다. 공통화로 함께 고쳐진다. */
.lp-footer__links {
gap: 16px;
flex-wrap: wrap;
}
}