/* ⭐ 루첼라 로그인 화면 — **여섯 제품 공용 뼈대** (형님 설계 2026-09-11) ───────────────────────────────────────────────────────────────────── 형님: «왼쪽에 제품 소개와 안내문구, 오른쪽에 카카오와 네이버, 아래쪽에 구글 로그인과 이메일 로그인, 그리고 계정 찾기, 회원가입 등» ## 🛑 이 파일은 **정본 한 벌**이다 shared-specs/web-theme/lucela-login.css ← 여기가 정본 python shared-specs/web-theme/sync_theme.py ← 뿌린다 ⛔ 제품 안에서 고치지 마라. 다음 sync 가 덮는다. ## ⚠️ 색을 제품마다 박지 않는다 여섯 제품의 테마 변수 이름이 다 다르다. 그래서 **currentColor + rgba** 로만 그린다. ⛔ #fff·#000 을 박으면 한쪽 테마에서 안 보인다(2026-08-23 에 그 값을 치렀다). ⭐ 브랜드색(카카오 노랑·네이버 초록)만 예외 — 그건 남의 규정이라 바꿀 수 없다. ## ⭐ 웹과 폰이 **거의 같다** 2단은 넓을 때만이다. 760px 아래로 내려가면 **위아래로 접힌다** — 내용은 하나도 안 바뀌고 순서만 「소개 → 로그인」으로 흐른다. */ /* ── 바탕 ───────────────────────────────────────────────────────── */ .lcg-wrap { display: grid; /* ⭐⭐ 2026-09-11 — **제 폭을 보고 접는다**(형님: 웹인데 폰보다 좁다). ⛔ 종전엔 `1.05fr 1fr` + `@media(max-width:860px)` 였다. 창이 1280px 이면 그 규칙이 안 걸리는데, 이 상자가 놓인 **바깥 칸**은 432px·520px 이었다 (숨표 데스크톱 작업영역 · 길에서 `max-width:520px` 인 main). → 그 좁은 폭을 두 칸으로 갈라 단추가 **51px·72px** 이 됐다(폰은 256px). ⭐ `auto-fit + minmax(320px,1fr)` 는 **두 칸이 설 자리(640px)가 없으면 스스로 한 칸**이 된다 — 창 크기와 상관없이. */ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; /* 🔐 2026-09-17 형님 *"상단 가로 맞춤"* — **위쪽 정렬**로 바꿨다. * 이전안 `center` — 두 열이 **각자 가운데** * 변경안 `start` — 두 열이 **같은 윗선**에서 시작 * 사유 ⛔ 가운데 정렬이면 왼쪽 글이 길어질 때 오른쪽이 **따라 내려간다**. * 여백으로 맞추려다 36px·53px 두 번 빗나갔다(9.2px 남음). * ⭐ 정렬을 바꾸니 한 번에 맞는다 — **값이 아니라 구조**였다. */ align-items: start; max-width: 1060px; margin: 0 auto; /* ⭐⭐ 2026-09-14 형님 — *"**한 화면에 모두 들어오게**"* · *"**상단과 간격을 줄이고**"* * * 이전안 `padding: 56px 24px 72px` — 위아래로만 **128px** * 변경안 `26px 24px 34px` (60px) * 사유 🛑 이 칸은 제품의 `.wrap`(18px) **안에** 들어간다 — 윗여백이 **겹쳤다**. * ⭐ 여백은 줄여도 **아무것도 안 잃는다**. 단추·글자보다 **먼저** 줄인다. */ padding: 22px 24px 22px; } @media (max-width: 860px) { .lcg-wrap { grid-template-columns: 1fr; gap: 22px; padding: 20px 20px 30px; } } /* ── 왼쪽 — 제품 로고 · 소개 · 안내 ─────────────────────────────── */ /* ⭐⭐ 2026-09-14 형님 — *"로고와 제품명도 동일한 위치로, **제품명이 로고 * 오른쪽으로** 오도록"* · *"제품 소개는 **오른쪽 로그인 창에 맞춰서**"* * * 이전안 로고가 `display:block` + `margin-bottom:18px` — **세로로 쌓였다** * (로고 아래 제품명 아래 소개) * 변경안 로고와 제품명을 **한 줄**로 묶는다(`.lcg-head` = flex) * 사유 ⭐ 로고와 이름은 **한 덩이**다 — 떼어 놓으면 둘로 읽힌다. * ⭐ 그리고 세로로 쌓으면 왼쪽이 길어져 **오른쪽 로그인 창과 안 맞는다**. * ⚠️ 마크업을 안 바꾸고도 되게 했다 — 여섯 화면이 이미 배포돼 있어 * HTML 을 고치면 **여섯을 다 손봐야** 한다. CSS 만으로 묶는다. * ⭐ `.lcg-intro` 를 grid 로 두고 로고·이름을 **첫 줄에 나란히** 놓는다. */ .lcg-intro { min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo name" "lead lead" "note note"; /* 🔐 2026-09-17 형님 — *"상단 가로 맞춤 필요"*. * * 이전안 `align-content: center` — 세로 **가운데** 맞춤 * 변경안 `start` + 오른쪽 패널의 **위 여백과 같은 값**만큼 내린다 * 사유 📏 실측(1280×900): 왼쪽 y=**22.0** · 오른쪽 y=**57.7** * → **35.7px 어긋났다**. 두 덩이가 같은 줄에서 시작하지 않는다. * ⛔ 가운데 맞춤은 글이 길어지면 왼쪽이 위로 올라가 **매번 다르게** * 어긋난다 — 형님이 보시는 것은 **윗선**이다. * ⚠️ 고정 px 이 아니라 **패널 여백과 같은 변수**를 쓴다 — 패널을 바꾸면 따라간다. * ⚠️ 폰에서는 두 덩이가 **위아래로** 쌓이므로 이 여백이 군더더기다 → 0 으로. */ align-content: start; align-items: center; /* 📏 2026-09-17 실측 — 36px 로는 **17.7px 모자랐다**(로고 y=58 · 패널 y=75.7). * ⭐ 패널 `padding-top: 17px` 이 그 차이다 — 두 값을 **더한다**. * ⛔ 눈대중으로 올리지 않는다. 재서 맞춘다. */ /* ⭐ 2026-09-17 — 윗여백을 **뺐다**. `.lcg-wrap` 이 `align-items: start` 라 * 두 열이 이미 같은 윗선에서 시작한다. ⛔ 여백을 또 주면 다시 어긋난다. */ column-gap: 14px; row-gap: 0; } .lcg-logo { grid-area: logo; width: 52px; height: 52px; display: block; margin: 0 0 12px; border-radius: 16px; } @media (max-width: 860px) { .lcg-logo { width: 46px; height: 46px; margin-bottom: 12px; } } /* 🔐 2026-09-17 — 폰에서는 왼쪽·오른쪽이 **위아래로 쌓인다**. ⛔ 그때 윗 여백은 맞출 상대가 없어 그냥 빈칸이 된다. */ @media (max-width: 860px) { .lcg-intro { padding-top: 0; } } .lcg-name { grid-area: name; margin: 0 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; opacity: .9; } /* 🛑🛑 2026-09-14 — **grid 에 새 자식을 넣으면 찌그러진다.** * * 이전안 `grid-template-areas` 가 로고·이름·리드·안내 **넷만** 그렸다 * 변경안 자리 이름이 없는 자식은 **두 칸을 통째로** 쓰게 한다 * 사유 🛑 고지·설명 덩이를 왼쪽으로 옮겼더니, 자리 이름이 없는 자식이 * **암시적 행의 첫 칸**(`auto` = 로고 폭!)에 놓여 글이 세로로 찌그러졌다. * ⚠️ 화면은 「깨졌다」고 말하지 않는다 — 그냥 **읽기 나쁜 채로** 뜬다. */ .lcg-intro > :not(.lcg-logo):not(.lcg-name) { grid-column: 1 / -1; } .lcg-lead { grid-area: lead; } .lcg-note { grid-area: note; } .lcg-lead { margin: 0 0 12px; font-size: 26px; font-weight: 800; line-height: 1.32; /* ⭐⭐ 2026-09-15 — 리드도 **정본의 줄바꿈을 살린다**. 형님이 주신 글이 «취향 있는 상품과 / 그 뒤의 이야기를 함께 만납니다.» 처럼 **두 줄로 끊어져** 있는데, pre-line 이 없어 한 줄로 붙어 버렸다. ⚠️ `.lcg-note` 는 이미 이러고 있었다 — 리드만 빠져 있었다(반쪽). */ white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; } .lcg-note { margin: 0; /* 🛑 SM-AUTH-STD-001 §5 — **본문 17px**(시니어 기준 · 루트 §15). ⛔ 처음에 15px 로 적었다가 설계서를 읽고 고쳤다. */ font-size: 17px; line-height: 1.76; opacity: .74; white-space: pre-line; /* ⭐ 정본의 줄바꿈(\n)을 그대로 살린다 */ word-break: keep-all; overflow-wrap: break-word; } /* ── 오른쪽 — 로그인 ───────────────────────────────────────────── */ .lcg-panel { min-width: 0; border: 1px solid rgba(128, 128, 128, .26); border-radius: 20px; padding: 17px 22px 15px; background: rgba(128, 128, 128, .04); } .lcg-title { margin: 0 0 13px; font-size: 19px; font-weight: 800; text-align: center; } /* ⭐ 넷을 2×2 로 — 형님 설계 그대로 */ .lcg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 420px) { .lcg-btns { grid-template-columns: 1fr; } } .lcg-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .28); font-size: 15px; font-weight: 700; text-decoration: none; color: inherit; background: transparent; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease; } .lcg-btn:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .lcg-btn:active { transform: translateY(1px); } /* ⚠️ 브랜드색은 남의 규정이라 바꿀 수 없다 — 여기만 색을 박는다 */ .lcg-btn.kakao { background: #FEE500; color: #191600; border-color: #FEE500; } .lcg-btn.naver { background: #03C75A; color: #fff; border-color: #03C75A; } .lcg-btn.google { background: #fff; color: #1f1f1f; border-color: #dadce0; } /* ⭐ 구글 흰 단추가 어두운 테마에서 떠 보이지 않게 테두리를 살린다 */ @media (prefers-color-scheme: dark) { .lcg-btn.google { border-color: rgba(255, 255, 255, .38); } } .lcg-ico { width: 18px; height: 18px; flex: 0 0 auto; } /* ── 아래 도움 줄 ──────────────────────────────────────────────── */ .lcg-help { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 14px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(128, 128, 128, .2); text-align: center; font-size: 13px; } .lcg-help .bar { width: 1px; height: 30px; background: rgba(128, 128, 128, .26); } .lcg-help q { display: block; opacity: .62; font-style: normal; quotes: none; } /* 🛑 2026-09-14 — 계정찾기·회원가입이 **20px** 였다(닿는 넓이 부족). * 문장 속 링크지만 `inline-block` 이라 WCAG 2.2 §2.5.8 의 **inline 예외가 안 걸린다**. * ⭐ 글자는 그대로 두고 **위아래 여백**으로 24px 를 넘긴다 — 글자 크기는 안 건드린다. */ .lcg-help a { display: inline-block; margin-top: 4px; padding: 3px 4px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .lcg-ask { margin: 16px 0 0; text-align: center; font-size: 13px; opacity: .62; } .lcg-ask a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ⚠️ 계정찾기는 **이메일 로그인만** 해당한다(형님 확정). ⛔ 소셜로 가입하신 분이 눌렀다가 헛걸음하지 않도록 화면에 적는다. */ .lcg-find-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.7; opacity: .55; word-break: keep-all; } /* 🔤 LOGINFONT2-2026-09-30 — 이 덩어리는 **파일 끝에 있어야 한다.** * ⛔ 처음엔 `.lcg-note` 일반 규칙 **앞**에 넣었다가 소개 글자가 안 줄었다 — * 미디어 쿼리는 **특이도를 올리지 않는다.** 같은 특이도면 **나중 것이 이긴다.** * (제목은 앞에 규칙이 없어 우연히 먹었다 — 그래서 반만 고쳐진 줄 몰랐다) * * 폰에서 왼쪽 글이 컸다(형님 지적 2026-09-30 · 사진 실측 412px): * 제목 22px → 두 줄 · 소개 17px → **네 줄** → 로그인 단추가 화면 밖으로. * ⚠️ 17px 근거는 `SM-AUTH-STD-001` §5(시니어 본문)인데, 그건 **폼 안내문** * 기준이다. 소개 문단은 읽고 넘기는 글이라 자리를 가른다. * ⭐ 폼 안내(`.lcg-panel` 안)는 **17px 그대로**. 데스크톱도 그대로. */ @media (max-width: 860px) { .lcg-lead { font-size: 20px; line-height: 1.34; } .lcg-note { font-size: 15px; line-height: 1.72; } } /* 📐 LOGINFOLD-2026-09-30 — 폰에서 **소개를 접는다**(형님 지적 2026-09-30). * * 🛑 글자를 줄여도(22→20 · 17→15) 로그인 단추가 밀렸다 — 실측(412px): * 아틀리에 소개 349자/464px · 바이오 332자/413px → 카카오 단추 y 970 * 로그인하러 온 사람에게 **소개가 먼저** 나오고 단추가 안 보인다. * * ⛔ **글을 줄이지 않는다** — 화면 코드 주석에 형님 지시가 박혀 있다: * *"형님이 문장·줄바꿈까지 정해 주셨다. 줄이지 않는다."* * ⭐ 그래서 **접는다** — 처음엔 넉 줄, 누르면 전부. 글은 그대로 산다. * * ⚠️ `.lcg-note` 는 `grid-area` 라 안에 자식을 더 둘 수 없다(옆 주석 참고). * 그래서 **CSS 만으로** 한다 — 체크박스도 JS 도 쓰지 않는다: * `max-height` 로 자르고, 끝을 흐리게 하고, 손대면(`:hover`/`:focus-within`) * 펼친다. 누르는 자리는 `.lcg-note` 자신이다(`tabindex` 없이도 터치로 열린다). * ⛔ 데스크톱(> 860px)은 **안 건드린다** — 거기선 옆으로 넓어 문제가 없다. */ @media (max-width: 860px) { .lcg-note { position: relative; max-height: 7.2em; /* ⭐ 넉 줄쯤 — 첫인상은 주되 자리를 안 먹는다 */ overflow: hidden; transition: max-height .28s ease; cursor: pointer; } /* 🎨 FOLDMASK-2026-09-30 — 끝을 흐리게. **색이 아니라 마스크**로. * * 이전안 `::after` 판에 색 그러데이션(투명 → `var(--lcg-bg, 크림)`) * 변경안 `mask-image` — 글자 자체가 서서히 사라진다 * 사유 🛑 사진에서 **흰 띠**가 보였다 — 길에서(파랑)·바이오(연두)에 * 크림색 폴백이 깔렸다. 아틀리에(크림)만 우연히 맞았다. * ⛔ 제품마다 배경이 다르니 **색으로 맞추는 방식이 틀렸다.** * 사본 27벌에 색을 각각 적는 것도 답이 아니다(반드시 어긋난다). * ⭐ 마스크는 **배경이 무엇이든** 맞는다. * ⚠️ 사파리는 `-webkit-` 접두가 필요하다 — 둘 다 적는다. */ .lcg-note { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent); } /* ⭐ 손대면 펼쳐진다 — 터치·키보드 둘 다. 마스크도 함께 걷는다 */ .lcg-note:hover, .lcg-note:focus-within, .lcg-note:active { max-height: 60em; -webkit-mask-image: none; mask-image: none; } /* ⚠️ 움직임을 싫어하시는 분께는 **접지 않는다** — 열고 닫는 애니메이션이 없으면 * 접힌 글이 더 답답하다. 그분께는 전부 보여 드린다. */ @media (prefers-reduced-motion: reduce) { .lcg-note { max-height: none; cursor: auto; -webkit-mask-image: none; mask-image: none; } } }