@charset "UTF-8"; /* ========================================================================= 모비고 메인 랜딩 (비로그인 대상) 대상 파일 : /index.html (URL "/" — 비로그인 랜딩. 2026.08.03 main-landing.html 에서 이동) Figma : 모비고 / 데스크톱 node 516-22468 (1920x5825) 모바일 node 610-966 (360x8045.5) 접두사 : mgo-lp- [접두사를 mgo-lp- 로 쓰는 이유] `main-` 은 css/style.css(1~484줄)와 css/main.css 가 이미 선점했다. 또 css/common-renew.css:9 의 `[class^='btn-style'], [class*='btn-style']` 가 부분 매칭 attribute 선택자이므로 클래스명에 'btn-style' 문자열이 들어가면 width:100px/height:50px 가 강제된다 — 절대 쓰지 말 것. [격리 정책 — 2026-08-03 폐기됨] ※ 아래 「자립형」 결정은 2026-08-03 에 뒤집혔다. "레거시 구조 유지 · 코드 수정 최소화"로 방침이 바뀌어, 지금은 include/components/header/Header.php 가 레거시 header.html 과 같은 골격(레거시 CSS 15장 + #wrap 래퍼 포함)을 낸다. ①②는 실제로 다시 발생하는 조건이며, 페이지 CSS 를 레거시 15장 뒤에 싣고 (Header.php 의 'css' 옵션) 래퍼 폭 고정을 푸는 것으로(/css/main-header.css 9-1) 막고 있다. ③ TopBar 는 헤더 컴포넌트가 직접 낸다(9-6). 아래 원문은 당시 판단 근거로 남긴다. [격리 정책 — 자립형] include/header.html · footer.html 을 쓰지 않는다. 이유 3가지: ① 캐스케이드 역전 — home/index.html:85 가 head 에서 페이지 CSS 를 걸고 home/index.html:89 의 header.html 컴포넌트 모드가 안에서 공통 CSS 9장(header.html:303-312)을 출력한다. 페이지 CSS 를 head 에 둬도 공통 리셋이 나중에 로드되어 이긴다. ② 공통 리셋 충돌 — common.css:18-51 이 약 70개 태그에 리셋을 박고 html,body{font-size:12px} / body{font-weight:300; letter-spacing:.02em} 를 지정한다. 이 시안은 Pretendard 16px 기준이다. ③ 시안에 40px TopBar 가 추가됐다 — 현 header.html 에는 없는 영역이라 어차피 헤더를 새로 만들어야 한다. [토큰·문서 기본] /css/base-mobigo.css 로 옮겼다. pricing.css 와 값까지 같은 70줄이 두 벌로 있던 상태였다. --mgo-* 는 그 파일이 정의한다. [브레이크포인트] 데스크톱 우선 — 768 이상 / 767 이하, 거터 40 / 16, max-width 1280 [빌드] /css/ 에 두면 uglify.bat:88-92 가 /build/css/main-landing.css 압축본을 만들지만, renewal CSS 는 BUILD_DIR 없이 직접 경로로 로드하는 것이 확립된 관례다(header.html:307-309, myinfo-level.css 등). 압축본은 쓰지 않는다. ========================================================================= */ /* ========================================================================= 1. 페이지 전용 포커스 링 반전 리셋 · 포커스 링 기본값 · .lp-skip · .lp-sr 은 /css/components.css (§1) 로 이동했다. 라서 .lp 규칙이 그대로 적용된다. ========================================================================= */ /* 파란 면 위에서는 흰 링으로 반전. 대상 클래스가 페이지마다 달라 여기 남긴다. ※ 알려진 문제: 공통 CSS 의 `.lp a:focus-visible`(0,2,1)이 이 규칙(0,2,0)보다 특이도가 높아 에서는 흰 링이 적용되지 않는다. 공통화 이전에도 동일한 상태였다(같은 관계였음) — 별도로 고칠 것. */ .mgo-lp-btn:focus-visible, .mgo-lp-service a:focus-visible { outline-color: #ffffff; } /* ========================================================================= 2~4. 디자인 토큰 · 문서 기본 → /css/base-mobigo.css 로 이동 레이아웃 프리미티브 · 조건부 줄바꿈 → /css/components.css (§2) 마크업에서는 .lp-container / .lp-br-d / .lp-br-m / .lp-only-d 를 쓴다. ========================================================================= */ /* ========================================================================= 5. 버튼 — 240x56 / radius 999 / 20px SemiBold ========================================================================= */ .mgo-lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 240px; height: 56px; padding: 0 40px; border-radius: 999px; background: var(--mgo-primary); box-shadow: var(--mgo-btn-shadow); color: var(--mgo-white); font-size: 20px; font-weight: var(--mgo-fw-semi); white-space: nowrap; } /* 시큐어 섹션 '자세히 보기' — 검정 배경, 그림자 없음 */ .mgo-lp-btn--dark { background: var(--mgo-text); box-shadow: none; } /* ========================================================================= 6. 공통 타이포 ========================================================================= */ /* 40px Bold lh1.6 — Hero / History / Secure / Community / 최종 CTA */ .mgo-lp-display { font-size: 40px; font-weight: var(--mgo-fw-bold); line-height: 1.6; } /* 32px Bold lh1.6 — 패밀리 서비스 */ .mgo-lp-title { font-size: 32px; font-weight: var(--mgo-fw-bold); line-height: 1.6; } /* ========================================================================= 7. TopBar → /css/components.css (§3) 로 이동 마크업은 include/components/topbar/Topbar.php 가 출력한다. ========================================================================= */ /* ========================================================================= 8. GNB → /css/main-header.css 로 이동 마크업은 include/components/header/Header.php(lpHeader) 가 출력한다 — 레거시 헤더(include/header.html)와 같은 .main-header 마크업이다. ========================================================================= */ /* ========================================================================= 9. Hero — bg #ecf4ff + 하단 내부 광원, 대형 스크린샷 2:1 ========================================================================= */ .mgo-lp-hero { position: relative; background: var(--mgo-primary-bg1); /* ::after 내부 광원과 자체 완결형 히어로 PNG 의 하단(baked 글로우 포함)이 아래 History 섹션으로 번지지 않게 자른다. 이미지 하단이 섹션 바닥에 정확히 붙어 있어 클립이 없으면 그대로 넘어간다. 시안도 프레임 클리핑 상태다 — node 516:22479 QA 주석이 이 현상을 지적한다. */ overflow: hidden; } /* Figma: inset 0 -80px 100px rgba(47,139,255,.15) — 프레임의 마지막 자식이라 스크린샷 위에 얹힌다. __inner 가 z-index:1 이므로 그보다 높아야 가려지지 않는다. */ .mgo-lp-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 -80px 100px 0 rgba(47, 139, 255, .15); } .mgo-lp-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 64px; padding-top: var(--mgo-section-y); /* 하단 패딩 없음 — 이미지가 바닥에 붙는다 */ } .mgo-lp-hero__head { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; } .mgo-lp-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; } .mgo-lp-hero__sub { font-size: 20px; font-weight: var(--mgo-fw-regular); line-height: 1.8; } .mgo-lp-hero__shot { width: 100%; aspect-ratio: 2560 / 1280; /* Figma 주석: 이미지 비율 2:1 */ /* [2026.08.11 — 이미지 교체] 새 히어로 PNG(2560x1280)는 Figma 노드 598:24498 "모비고홈 2"를 drop shadow 효과 포함 · 라운드 사각형으로 export 한 자체 완결형 이미지다. 즉 파란 글로우(#2F8BFF4D ≈ 30%, blur 40)와 상단 라운드 코너가 이미 이미지 안에 baked-in 되어 있다. → 그래서 여기서 box-shadow / border-radius / overflow 로 글로우·라운딩을 다시 주지 않는다. 다시 주면 글로우가 이중으로 겹쳐 시안보다 진해지고, 컨테이너 라운딩 클립이 baked 투명여백과 어긋난다(실측 확인). 하단은 콘텐츠가 이미지 가장자리까지(flush) 차 있고, 섹션 바닥 정렬·잘림은 .mgo-lp-hero 의 overflow:hidden 이 담당한다(예전과 동일). ※ 이미지를 drop shadow 없이(콘텐츠 풀블리드로) 다시 export 하면, 예전처럼 box-shadow + border-radius(top) + overflow:hidden 를 되살려야 한다. */ } .mgo-lp-hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= 10. History & Trust — bg #fafafa, 지표 카드 3개 ========================================================================= */ .mgo-lp-history { background: var(--mgo-bg-secondary); } .mgo-lp-history__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: var(--mgo-section-y); padding-bottom: var(--mgo-section-y); text-align: center; } .mgo-lp-history__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .mgo-lp-history__sub { font-size: 18px; font-weight: var(--mgo-fw-regular); line-height: 1.8; } .mgo-lp-history__stats { display: flex; align-items: flex-start; gap: 24px; width: 100%; } .mgo-lp-history__stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; border: 1px solid var(--mgo-border-sub); border-radius: 24px; background: var(--mgo-white); } .mgo-lp-history__stat-num { width: 100%; font-size: 32px; font-weight: var(--mgo-fw-bold); line-height: 1.6; color: var(--mgo-primary); } .mgo-lp-history__stat-label { width: 100%; font-size: 16px; font-weight: var(--mgo-fw-semi); line-height: 1.4; } /* ========================================================================= 11. Secure Summary — bg white, 검정 CTA, 스크린샷 16:9 ========================================================================= */ .mgo-lp-secure { background: var(--mgo-bg); } .mgo-lp-secure__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: var(--mgo-section-y); padding-bottom: var(--mgo-section-y); /* 시안 변경: 목업이 더 이상 바닥에 붙지 않는다 */ } .mgo-lp-secure__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; } .mgo-lp-secure__sub { font-size: 18px; font-weight: var(--mgo-fw-regular); line-height: 1.8; } /* [2026.08.11 시안 변경] 목업 리디자인 (Figma node 1160:4832): 회색(#f6f6f6) 라운드-24 카드 안에 스크린샷을 인셋한 형태. - 데스크톱: 컨테이너 거터(40px)를 뚫고 full-bleed 1280 으로 확장한다 (Figma 에서 헤더/카피는 40px 패딩 안이지만 목업만 x0 width1280 로 꽉 찬다). - 하단: 섹션 padding-bottom 80 으로 바닥에서 띄운다(예전엔 flush). - 모바일(≤767): 거터(16px) 안으로 되돌린다(§20). */ .mgo-lp-secure__shot { position: relative; width: calc(100% + 80px); /* 좌우 거터(40)만큼 확장 → 1200+80 = 1280 */ margin: 20px -40px 0; /* 버튼↔목업 gap 60(inner 40 + 20), 좌우 -40 로 full-bleed */ aspect-ratio: 2 / 1; /* Figma: 목업 2:1 고정(lockAspectRatio) */ overflow: hidden; border-radius: 24px; background: #f6f6f6; /* Figma color/bg/secondary_2 */ box-shadow: inset 0 -40px 70px 0 rgba(0, 0, 0, .02); } /* 인셋 스크린샷 — 카드 하단 정렬, 폭 80% 중앙 (Figma: top 13.28%, 비율 2046/1113, 그림자 0 0 24 rgba(0,0,0,.05)). 폭 80% + 자체 비율이면 이미지 하단이 카드 바닥에 맞물린다. */ .mgo-lp-secure__shot img { position: absolute; top: 13.28%; left: 50%; transform: translateX(-50%); width: 80%; height: auto; aspect-ratio: 2046 / 1113; box-shadow: 0 0 24px 0 rgba(0, 0, 0, .05); } /* full-bleed 는 컨테이너가 최대폭(1280)에 닿는 뷰포트 ≥1280 에서만. 태블릿(768~1279)·모바일(≤767)은 거터 안으로 되돌린다 — Figma 768 시안은 목업이 헤더와 같은 폭(패딩 안)이다. 저장소는 헤더 거터도 1279 를 쓴다. margin-top 20(=버튼↔목업 gap 60)은 유지, 좌우만 0 으로. */ @media screen and (max-width: 1279px) { .mgo-lp-secure__shot { width: 100%; margin-left: 0; margin-right: 0; } } /* ========================================================================= 12. Community Preview — bg #ecf4ff, 게시글 카드 6개 (본문 블러) ========================================================================= */ .mgo-lp-community { background: var(--mgo-primary-bg1); } .mgo-lp-community__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; padding-top: var(--mgo-section-y); padding-bottom: var(--mgo-section-y); } .mgo-lp-community__group { display: flex; flex-direction: column; gap: 40px; width: 100%; } .mgo-lp-community__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; } .mgo-lp-community__head em { font-style: normal; color: var(--mgo-primary); } .mgo-lp-community__sub { font-size: 16px; font-weight: var(--mgo-fw-regular); line-height: 1.8; } /* 비로그인 안내 노티 + CTA 래퍼 (2026.08.11 시안 추가) */ .mgo-lp-community__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .mgo-lp-community__notice { font-size: 14px; font-weight: var(--mgo-fw-regular); line-height: 1.8; color: var(--mgo-text-sub); text-align: center; } .mgo-lp-community__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; } .mgo-lp-post { display: flex; flex-direction: column; align-self: start; gap: 24px; padding: 32px 24px; border-radius: 16px; background: var(--mgo-white); } .mgo-lp-post__body { display: flex; flex-direction: column; gap: 16px; } .mgo-lp-post__tag { align-self: flex-start; height: 36px; padding: 8px 16px; border-radius: 4px; background: var(--mgo-bg-tertiary); color: var(--mgo-text); font-size: 14px; font-weight: var(--mgo-fw-semi); line-height: 1.4; white-space: nowrap; } /* 질문글 — 파랑 틴트 */ .mgo-lp-post__tag--q { background: var(--mgo-primary-bg1); color: var(--mgo-primary); } .mgo-lp-post__title { font-size: 24px; font-weight: var(--mgo-fw-semi); line-height: 1.8; } /* 본문 블러 — 비로그인에게 내용을 가리는 시안 의도(Figma blur-[6px]). 실제 본문 텍스트가 DOM 에 남으므로, 노출을 막아야 하는 내용이면 연동 단계에서 서버에서 잘라 보내야 한다(CSS 블러는 가림막이 아니다). */ .mgo-lp-post__excerpt { font-size: 16px; font-weight: var(--mgo-fw-regular); line-height: 1.8; color: var(--mgo-text-sub); filter: blur(6px); user-select: none; } .mgo-lp-post__divider { width: 100%; height: 1px; background: var(--mgo-border-default); } .mgo-lp-post__meta { font-size: 18px; font-weight: var(--mgo-fw-semi); line-height: 1.4; white-space: nowrap; } /* ========================================================================= 13. Service Introduction — 파랑 그라디언트 배경, 흰 카드 2x2 ========================================================================= */ .mgo-lp-service { background: linear-gradient(to bottom, var(--mgo-primary), var(--mgo-primary-light)); } .mgo-lp-service__inner { padding-top: var(--mgo-section-y); padding-bottom: var(--mgo-section-y); } .mgo-lp-service__group { display: flex; flex-direction: column; gap: 24px; } .mgo-lp-service__title { color: var(--mgo-text-inverse); } .mgo-lp-service__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .mgo-lp-service__card { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 48px 40px; border: 1px solid var(--mgo-border-sub); border-radius: 12px; background: var(--mgo-bg); } .mgo-lp-service__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 16px; background: linear-gradient(to bottom, var(--mgo-primary-bg1), var(--mgo-primary-bg2)); opacity: .8; } .mgo-lp-service__icon img { width: 48px; height: 48px; } .mgo-lp-service__card-text { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: center; } .mgo-lp-service__card-title { font-size: 28px; font-weight: var(--mgo-fw-bold); line-height: 1.6; } .mgo-lp-service__card-desc { font-size: 20px; font-weight: var(--mgo-fw-regular); line-height: 1.8; } /* ========================================================================= 14. Partners — 섹션 래퍼만 이 파일이 갖는다. 안쪽 블록(라벨·그리드·로고 크기)은 /css/components.css (§6) 로 옮겼다. 마크업은 include/landing/partners/Partners.php 가 출력한다. ========================================================================= */ .mgo-lp-partners { background: var(--mgo-bg); } .mgo-lp-partners__inner { padding-top: 64px; padding-bottom: 64px; } /* ========================================================================= 15. 최종 CTA — bg #ecf4ff, 로고 + 카피 + 버튼 ========================================================================= */ .mgo-lp-cta { background: var(--mgo-primary-bg1); } .mgo-lp-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: 120px; padding-bottom: 120px; } .mgo-lp-cta__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .mgo-lp-cta__logo { height: 28px; width: auto; } .mgo-lp-cta__title { width: 100%; text-align: center; } /* ========================================================================= 16. Footer · 패밀리 사이트 셀렉트 → /css/components.css (§4, §5) 로 이동 마크업은 include/components/footer/Footer.php · FamilySelect.php 가 출력한다. ========================================================================= */ /* ========================================================================= 17. 모바일 사이드 메뉴 → /css/main-header.css (9-3) 로 이동 마크업은 include/components/header/MobileMenu.php 가 출력한다(lpHeader 가 함께 낸다). ========================================================================= */ /* ========================================================================= 20. 모바일 (<= 767px) — Figma node 610-966 "360" (360x8045.5) 실측 반영 데스크톱과 다른 점은 다음 다섯 가지뿐이다. ① 좌우 거터 40px → 16px (base-mobigo.css §4) ② GNB 구성이 바뀐다 — 메뉴(모비고 시큐어/요금안내)와 로그인/회원가입이 사라지고 24px 햄버거 아이콘 하나로 대체된다 (components.css §9) ③ 다단 → 1단 : 지표 3열, 게시글 3열×2행, 서비스 2×2 (협력사만 2열 유지) ④ 지표 카드 간격만 24 → 16 (게시글·서비스는 24 유지) ⑤ 제목·서브카피의 줄바꿈 위치 (.lp-br-*, components.css §9) ①②⑤ 는 공통 CSS 가 처리한다. 이 블록에는 ③④ 만 남는다. 폰트 크기(40/32/28/24/20/18/16/14), py-80 섹션 여백, 카드 padding, 버튼 240x56 은 데스크톱과 같다 — 축소하지 않는다. ========================================================================= */ @media screen and (max-width: 767px) { /* History — 지표 3열 → 1열, 이 섹션만 gap 24 → 16 */ .mgo-lp-history__stats { flex-direction: column; gap: 16px; } /* 세로 flex 에서는 align-items:flex-start(데스크톱 값)가 자식을 콘텐츠 폭으로 수축시킨다(실측 158/141/204px). 시안은 카드에 w-full 이 걸려 있다. */ .mgo-lp-history__stat { width: 100%; } /* Community — 3열×2행 → 1열 (gap 24 유지) */ .mgo-lp-community__grid { grid-template-columns: 1fr; } /* Service — 2x2 → 1열 (gap 24 유지) */ .mgo-lp-service__grid { grid-template-columns: 1fr; } /* Partners 의 4열 → 2열 전환은 /css/components.css (§9) 로 옮겼다 */ /* Footer · 셀렉트의 모바일 규칙은 /css/components.css (§6) 로 이동 */ }