@charset "UTF-8"; /* ========================================================================= 로그인 (Login) 대상 : /login/loginWeb.html (WEB 전용. CLIENT 는 loginOn.html + /css/login.css) 접두사 : mgo-login- body : — 공통 크롬 리셋(components.css)과 모비고 토큰(base-mobigo.css)을 그대로 쓴다. [로드 순서] 1. /css/components.css 공통 크롬 (--lp-* 소비) — lpHead() 가 자동으로 붙임 2. /css/base-mobigo.css 모비고 토큰 (--mgo-* 정의 + --lp-* 매핑) 3. /css/login-renew.css 이 파일 [기존 login.css 를 쓰지 않는 이유] /css/login.css 는 .login-wrap(로그인) 외에 .search-wrap(아이디·비밀번호 찾기)· .search-ok-wrap·.search-fail-wrap 을 한 파일에 담고 있어 5개 페이지가 공유한다. 로그인만 새 디자인으로 바꾸는 단계라 그 파일을 고치면 나머지 4개가 함께 깨진다. 접두사를 분리한 새 파일을 두고, 나머지 화면이 개편될 때 합칠지 판단한다. [Figma] 데스크톱 node 675-1116 (1280x902) 모바일 node 706-5357 (360x987) ========================================================================= */ /* ========================================================================= 1. 이 화면에서만 쓰는 토큰 Figma 변수인데 다른 화면에 쓰이는 곳이 없어 여기 둔다. ※ --mgo-bg-light 는 SSO 약관동의 화면도 쓰게 되어 base-mobigo.css 로 올렸다 (2026-07-31). 같은 일이 또 생기면 같은 판단을 적용할 것. ========================================================================= */ .mgo-lp { --mgo-border-strong: #aaaaaa; /* color/border/strong — 입력 필드 테두리 */ --mgo-text-tertiary: #a3a3a3; /* color/text/tertiary — placeholder */ } /* ========================================================================= 2. 레이아웃 Figma 는 1280 폭 안에 768 짜리 블록을 가운데 두고, 그 블록이 좌우 40 패딩을 갖는다(콘텐츠 실폭 688). 페이지 컨테이너(--lp-container 1280)와 다른 값이라 .lp-container 를 쓰지 않고 여기서 따로 잡는다. ========================================================================= */ .mgo-login { display: flex; flex-direction: column; gap: 64px; width: 100%; max-width: 768px; margin: 0 auto; padding: 120px 40px; } /* ========================================================================= 3. 페이지 타이틀 ========================================================================= */ .mgo-login-head { display: flex; flex-direction: column; gap: 8px; text-align: center; } .mgo-login-head__title { font-size: 32px; font-weight: var(--mgo-fw-bold); line-height: 1.6; color: var(--mgo-text); } /* 서브 카피는 접속 경로에 따라 문구가 바뀐다(세무회계·공구하자·모비셀).
이 들어오므로 줄바꿈을 막지 않는다. */ .mgo-login-head__desc { font-size: 18px; font-weight: var(--mgo-fw-light); line-height: 1.8; color: var(--mgo-text); } /* ========================================================================= 4. 본문 2단 — 왼쪽 로그인 폼 / 오른쪽 모비셀 배너 두 칸은 flex:1 로 같은 폭(319.5px)을 갖고, 가운데 1px 선이 둘을 나눈다. ========================================================================= */ .mgo-login-body { display: flex; align-items: stretch; gap: 24px; } .mgo-login-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .mgo-login-divider { flex-shrink: 0; width: 1px; background: var(--mgo-border-default); } /* ========================================================================= 5. 폼 ========================================================================= */ .mgo-login-fields { display: flex; flex-direction: column; gap: 12px; } .mgo-login-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--mgo-border-strong); border-radius: 8px; background: var(--mgo-bg); font-size: 14px; font-weight: var(--mgo-fw-light); line-height: normal; color: var(--mgo-text); } /* placeholder 색은 시안 값(#a3a3a3). 입력된 글자색은 시안에 없어 본문색을 쓴다. */ .mgo-login-input::placeholder { color: var(--mgo-text-tertiary); opacity: 1; /* Firefox 기본 투명도 해제 */ } .mgo-login-submit { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; padding: 0 20px; border-radius: 8px; background: var(--mgo-primary); font-size: 15px; font-weight: var(--mgo-fw-semi); line-height: normal; color: var(--mgo-text-inverse); } /* 로그인 실패 문구 — 서버가 $_GET['m'] 으로 내려주는 메시지 자리. 시안에 없는 요소라 최소한의 형태만 준다(폼 흐름을 밀지 않도록 비어 있으면 숨김). */ .mgo-login-result:empty { display: none; } .mgo-login-result { font-size: 14px; font-weight: var(--mgo-fw-light); line-height: 1.6; color: #e02020; } /* ========================================================================= 6. 폼 아래 — 자동로그인 · 구분선 · 보조 링크 ========================================================================= */ .mgo-login-sub { display: flex; flex-direction: column; gap: 12px; } /* ── 로그인 상태 유지 ───────────────────────────────────────────────────── 실제 를 화면에서만 감추고 라벨이 대신 그린다. (display:none 이면 폼 전송·포커스에서 빠지므로 clip 방식을 쓴다.) */ .mgo-login-keep { display: flex; align-items: center; } .mgo-login-keep input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mgo-login-keep label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--mgo-fw-semi); line-height: normal; color: #000; cursor: pointer; } .mgo-login-keep label::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px; background: var(--mgo-bg-light) no-repeat center; /* 체크 표시 11.25x8.44 (Figma 실측). 항상 흰색이라 파일 대신 인라인으로 둔다. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.4L4.05 7.45L10 1.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 체크된 상태의 색은 시안에 없다(미체크 상태 하나만 그려져 있다). 기본 액션 색을 쓰는 것이 이 디자인 시스템에서 자연스러워 primary 로 두었다. ※ 디자이너 확인 필요 — 확정되면 이 주석과 함께 값을 정리할 것. */ .mgo-login-keep input:checked + label::before { background-color: var(--mgo-primary); } .mgo-login-keep input:focus-visible + label::before { outline: 3px solid #0b63d6; outline-offset: 2px; } .mgo-login-hr { height: 1px; background: var(--mgo-border-default); } .mgo-login-links { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: var(--mgo-fw-light); line-height: normal; color: #000; } .mgo-login-links__find { display: flex; align-items: stretch; justify-content: center; gap: 8px; } .mgo-login-links__sep { flex-shrink: 0; width: 1px; background: var(--mgo-border-default); } /* ========================================================================= 7. 모비셀 배너 [미확정] '모비셀로 로그인하기' 의 목적지가 정해지지 않았다. 단순 링크인지 모비셀 SSO 연동인지에 따라 마크업이 달라질 수 있다. ========================================================================= */ .mgo-login-promo { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; border-radius: 16px; background: linear-gradient(180deg, var(--mgo-primary) 0%, var(--mgo-primary-light) 100%); } .mgo-login-promo__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .mgo-login-promo__logo { width: 105px; height: 17px; } /* 두 줄은 gap 없이 각자의 line-height(1.8)로 붙는다 — 시안 구조 그대로. */ .mgo-login-promo__copy { width: 100%; font-weight: var(--mgo-fw-semi); line-height: 1.8; color: var(--mgo-text-inverse); text-align: center; } .mgo-login-promo__title { font-size: 24px; } .mgo-login-promo__desc { font-size: 16px; } .mgo-login-promo__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; padding: 0 16px; border-radius: 8px; background: var(--mgo-text-inverse); font-size: 15px; font-weight: var(--mgo-fw-semi); line-height: normal; color: var(--mgo-primary); text-align: center; } /* ========================================================================= 8. 모바일 (767px 이하) Figma node 706-5357. 2단이 1단으로 쌓이고 가운데 세로선이 사라진다. 글자 크기·입력 높이는 데스크톱과 같다(축소하지 않는다). ========================================================================= */ @media screen and (max-width: 767px) { /* 시안: 좌우 16 (--mgo-gutter 가 이미 16px 로 바뀐다) / 상단 64. 타이틀~폼 간격 64 는 데스크톱과 같아 여기서 다시 쓰지 않는다. */ .mgo-login { padding: 64px var(--mgo-gutter); } /* 폼과 배너 사이 간격 64 — 시안 실측(폼 블록 끝 240 → 배너 시작 304) */ .mgo-login-body { flex-direction: column; gap: 64px; } .mgo-login-divider { display: none; } /* 데스크톱에서는 배너가 왼쪽 칸(240px)을 따라 늘어나 높이가 맞는다. 세로로 쌓이면 기댈 대상이 없어져 내용 높이(219px)로 줄어드는데, 시안 모바일 (node 706:5389)도 240px 다 — 안쪽이 justify-center 라 위아래 여백으로 나뉜다. 고정이 아니라 최소값으로 둬서 문구가 늘어나면 따라 커지게 한다. */ .mgo-login-promo { min-height: 240px; } }