/* onsaede 랜딩 전용 스타일. 폰트는 base.html의 Pretendard 사용.
메인 홈=.lp-home / 주요기능=.lp-feature 로 페이지별 구분(.hero 충돌 방지).
★2026-07-29 팔레트 전환: 세이지 그린 → ★네이비.
이유: tokens.css에 "그린 모방 금지(우리 브랜드)" · CLAUDE.md §2-5 "흰 배경·네이비 포인트 고정"
이라고 명시돼 있는데 공개 랜딩만 그린이라 ★바깥(랜딩)과 안(앱)이 다른 제품처럼 보였다.
변수 이름도 --green → --brand로 바꿨다(네이비를 담은 변수가 --green이면 다음 사람이 속는다).
⚠️ 되돌리려면 ★이 블록의 값만 원래 그린으로 되돌리면 된다(사용처는 전부 변수 참조).
⚠️ --logo-*는 브랜드 마크(onsaede 새) 색이라 ★그대로 둔다 — 마크는 바뀌지 않았다. */
.lp {
/* 네이비 팔레트 — 랜딩 전용 토큰(tokens.css와 같은 축, 랜딩 스코프 격리 유지) */
--brand:#1E3A5F; --brand-d:#16294A; --brand-dd:#0F1E38; --brand-l:#38BDF8;
--mint:#EEF3FB; --ink:#1F2937; --ink-2:#6B7280; --line:#E5E7EB;
--bg:#FFFFFF; --gray-bg:#F7F9FC;
--logo-green:#3C7A26; --logo-lime:#8FC646;
background:var(--bg); color:var(--ink);
font-size:14px; line-height:1.5;
}
.lp *, .lp *::before, .lp *::after { box-sizing:border-box; }
.lp img { max-width:100%; display:block; }
.lp .in { max-width:1120px; margin:0 auto; padding-inline:24px; }
/* ── 유틸바 ── */
.lp-util { border-bottom:1px solid var(--line); background:#fff; }
.lp-util .in { display:flex; justify-content:flex-end; align-items:center; height:36px; }
.lp-util a { font-size:12px; color:var(--ink-2); text-decoration:none; padding:0 14px; position:relative; }
.lp-util a + a::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:1px; height:11px; background:var(--line); }
.lp-util a:hover { color:var(--brand-d); }
/* ── 헤더 ── */
.lp-hdr { border-bottom:2px solid var(--brand); background:#fff; position:relative; z-index:20; }
/* ★3열 그리드 (2026-08-19 겹침 수정)
전에는 GNB를 position:absolute로 ★중앙에 못 박았다. 그러면 메뉴가 늘어나
폭이 커져도 ★좌우를 밀어내지 못해 겹친다 — 실제로 '지문분석지 제작의뢰'와
크레딧 칩을 넣자마자 두 요소가 포개졌다(화면을 찍어 발견).
1fr auto 1fr 이면 가운데 칸이 ★정확히 중앙이면서 좌우 칸을 밀어낸다.
(로고·우측 버튼 폭이 달라도 가운데가 맞는다 — 절대배치를 쓴 원래 이유가 해결된다.) */
.lp-hdr .in { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
position:relative; height:88px; gap:24px; }
.lp-hdr .in > :last-child { justify-self:end; }
.lp-logo { display:flex; align-items:center; gap:11px; text-decoration:none; }
.lp-logo img { width:auto; height:56px; }
.lp-logo .bird { width:56px; height:56px; flex:none; } /* 38→56: 새 심볼이 너무 작다는 피드백 */
.lp-logo .wm { font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--logo-green); }
/* 로고·시작하기 버튼 폭이 서로 달라 flex만으로는 가운데가 안 맞음 → 절대 중앙 고정 */
.lp-gnb { display:flex; align-items:center; gap:28px; margin:0; white-space:nowrap; }
/* ── GNB 하이라이트 (2026-07-21) ─────────────────────────────────────
커서를 올리면 밑줄이 ★가운데에서 좌우로 뻗어나가고, 글자가 살짝 떠오르며 빛난다.
::after = 움직이는 밑줄(그라데이션+글로우) / ::before = 은은한 배경 하이라이트.
scaleX 변환만 애니메이션해서(레이아웃 재계산 없음) 60fps로 부드럽게 돈다. */
.lp-gnb a {
font-size:16px; font-weight:600; color:var(--ink); text-decoration:none;
padding:8px 4px; position:relative; display:inline-block;
transition:color .22s ease, transform .22s ease;
}
/* 배경 하이라이트 — 아래에서 위로 옅게 차오른다 */
.lp-gnb a::before {
content:""; position:absolute; left:-6px; right:-6px; bottom:0; top:2px;
border-radius:8px; background:linear-gradient(180deg, transparent 30%, rgba(30,58,95,.10) 100%);
opacity:0; transform:scaleY(.6); transform-origin:bottom;
transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
/* 움직이는 밑줄 — 가운데에서 양쪽으로 */
.lp-gnb a::after {
content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:2px;
background:linear-gradient(90deg, var(--brand-d), var(--brand) 45%, #7DD3FC 100%);
box-shadow:0 2px 10px rgba(30,58,95,.45);
transform:scaleX(0); transform-origin:center;
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.lp-gnb a:hover { color:var(--brand-d); transform:translateY(-2px); }
.lp-gnb a:hover::after { transform:scaleX(1); }
.lp-gnb a:hover::before { opacity:1; transform:scaleY(1); }
.lp-gnb a:focus-visible { outline:2px solid var(--brand-d); outline-offset:4px; border-radius:6px; }
/* 현재 메뉴 — 밑줄은 항상 펼쳐진 상태로 고정 */
.lp-gnb a.on { color:var(--brand-d); }
.lp-gnb a.on::after { transform:scaleX(1); }
.lp-burger { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex;
align-items:center; justify-content:center; color:var(--ink-2); cursor:pointer; background:#fff; }
.lp-burger svg { width:18px; height:18px; }
.lp-hdr-start { display:inline-flex; align-items:center; height:42px; padding:0 22px; border-radius:22px;
border:1.5px solid var(--brand); color:var(--brand-d); font-size:14px; font-weight:700; text-decoration:none; }
.lp-hdr-start:hover { background:var(--mint); }
/* ── 입체 버튼(로그인/회원가입 공용 톤) ── */
/* width:100% — button은 블록 채움이 기본이 아니라 회원가입(a)보다 좁게 잡히던 것 통일.
★border도 맞춘다: 회원가입(a)은 1.5px 실선 테두리가 있는데 로그인(button)은 border:0이라,
box-sizing이 같아도 안쪽 여백이 3px 차이 나 눈으로는 크기가 달라 보였다.
같은 두께의 '투명' 테두리를 줘서 배경 색만 다르고 박스는 완전히 동일하게 만든다. */
.lp-btn-login { display:flex; width:100%; box-sizing:border-box;
align-items:center; justify-content:center; height:48px; border-radius:12px;
border:1.5px solid transparent;
font-family:inherit; cursor:pointer;
background:linear-gradient(180deg, #4A6A95 0%, var(--brand) 52%, var(--brand-d) 100%);
color:#fff; font-size:15.5px; font-weight:700; text-decoration:none; margin-bottom:9px; letter-spacing:.01em;
box-shadow:0 4px 12px rgba(30,58,95,.30), inset 0 1px 0 rgba(255,255,255,.30);
transition:transform .12s ease, box-shadow .12s ease; }
.lp-btn-login:hover { transform:translateY(-1.5px); box-shadow:0 8px 20px rgba(30,58,95,.40), inset 0 1px 0 rgba(255,255,255,.34); }
.lp-btn-login:active { transform:translateY(0); box-shadow:0 2px 7px rgba(30,58,95,.30); }
.lp-btn-signup { display:flex; width:100%; box-sizing:border-box;
align-items:center; justify-content:center; height:48px; border-radius:12px;
background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%); color:var(--brand-d);
font-size:15.5px; font-weight:700; text-decoration:none; border:1.5px solid var(--line);
box-shadow:0 2px 8px rgba(31,41,55,.06); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.lp-btn-signup:hover { transform:translateY(-1.5px); border-color:var(--brand); box-shadow:0 6px 16px rgba(30,58,95,.18); }
.lp-btn-signup:active { transform:translateY(0); box-shadow:0 2px 6px rgba(31,41,55,.08); }
/* ── 푸터 ── */
.lp-foot { background:var(--gray-bg); border-top:1px solid var(--line); padding-block:28px; }
.lp-foot .in { font-size:12px; color:var(--ink-2); line-height:1.8; }
.lp-foot-links { display:flex; gap:14px; margin-bottom:8px; }
.lp-foot-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:12.5px; }
.lp-foot-links a:hover { color:var(--brand-d); }
.lp-foot-brand { margin:0; font-size:12.5px; color:var(--ink-2); }
/* 고객문의·사업자정보 블록(_biz_info.html)은 style.css의 .biz-* 를 그대로 쓴다.
여기서는 앱 푸터와 같은 리듬이 되도록 위 구분선과 여백만 준다. */
.lp-foot-biz { margin-top:16px; padding-top:18px; border-top:1px solid var(--line); }
.lp-foot-copy { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); color:#9AA3B2; }
/* prefers-reduced-motion: 버튼 리프트/전환 최소화 */
@media (prefers-reduced-motion: reduce) {
.lp-btn-login, .lp-btn-signup { transition:none; }
.lp-btn-login:hover, .lp-btn-signup:hover { transform:none; }
/* GNB 하이라이트 — 움직임에 민감한 이용자에겐 애니메이션 없이 결과 상태만 보여준다
(효과를 없애는 게 아니라 '즉시 적용'으로 바꾼다). */
.lp-gnb a, .lp-gnb a::before, .lp-gnb a::after { transition:none; }
.lp-gnb a:hover { transform:none; }
}
/* ═══════════ 메인 홈 전용 (.lp-home) ═══════════ */
/* ── 히어로 슬라이드(배너 통이미지) ── */
.lp-home .lp-hero { position:relative; }
/* ★360 → 540 (2026-08-16): 배너 문구를 2배로 키우면서 높이도 같이 올렸다.
배경 이미지는 문구가 없는 그라데이션이라 object-fit:cover로 잘려도 문제 없다. */
.lp-slides { position:relative; width:100%; aspect-ratio:1920/540; overflow:hidden; background:var(--gray-bg); }
/* ★2026-08-18 버그 수정: 꺼진 슬라이드가 클릭을 가로채고 있었다.
3장이 같은 자리에 겹쳐 있는데 opacity:0은 ★투명할 뿐 클릭은 그대로 받는다.
그래서 DOM 마지막(3번 배너)이 항상 맨 위에 깔려, 1번(주요기능)을 눌러도
3번의 링크(/lounge)로 갔다. 보이는 슬라이드만 클릭을 받게 한다. */
.lp-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.lp-slide.on { opacity:1; pointer-events:auto; }
.lp-slide img { width:100%; height:100%; object-fit:cover; }
.lp-slide-empty { display:flex; align-items:center; justify-content:center; height:100%;
color:var(--ink-2); font-size:14px; background:var(--mint); }
/* 로그인 박스 오버레이 */
/* ★2026-08-19 사장님 지시 #5: 로그인 박스를 ★우상단으로 올려 슬라이드가 잘 보이게.
전에는 top:50%(세로 가운데)라 ★배너 그래픽의 한가운데를 덮고 있었다.
위로 올리면 ① 배너 그림이 드러나고 ② 좌우 화살표(세로 가운데)와도 안 겹친다.
★로그인한 회원용 박스(.lp-userbox)는 이미 top:26px라, 이제 두 상태가 ★같은 자리에
뜬다 — 로그인 전후로 화면이 튀지 않는다. */
.lp-loginbox { position:absolute; z-index:10; top:24px; right:calc((100% - 1120px)/2);
transform:none; width:270px; background:#fff; border-radius:14px;
box-shadow:0 12px 34px rgba(0,0,0,.16); padding:22px; border:1px solid var(--line); }
.lp-loginbox .fld { height:44px; border:1px solid var(--line); border-radius:8px; width:100%;
padding:0 13px; font-size:13px; margin-bottom:9px; background:var(--gray-bg); color:var(--ink); }
.lp-loginbox .fld::placeholder { color:#9aa1ab; }
.lp-loginbox .save { font-size:12px; color:var(--ink-2); margin:2px 0 12px; display:flex; align-items:center; gap:6px; }
.lp-loginbox .find { display:flex; justify-content:center; gap:14px; margin-top:14px; font-size:12px; }
.lp-loginbox .find a { color:var(--ink-2); text-decoration:none; }
.lp-loginbox .find a:hover { color:var(--brand-d); }
/* 로그인 상태로 홈에 왔을 때의 바로가기 카드(2026-07-29) — 로그인 폼 자리를 그대로 쓴다.
버튼(.lp-btn-login/.lp-btn-signup)은 a 태그라 세로 정렬만 보정한다. */
/* ★2026-08-18 사장님 지시: 로그인 회원의 바로가기 박스를 ★최상단 오른쪽으로 올리고 키운다.
가운데(top:50%)에 있으면 배너 문구와 겹쳐 읽히고, 270px·48px 버튼은 '첫 화면의 주인공'
치고는 작았다. 로그인 폼(비로그인)은 전환율 검증이 끝난 배치라 ★그대로 둔다. */
/* top·transform은 이제 .lp-loginbox가 같은 값을 가지므로 여기서는 ★크기만 키운다
(로그인 회원 박스는 버튼이 커서 더 넓다). 값을 두 곳에 적어 두면 한쪽만 고쳐 어긋난다. */
.lp-userbox { width:326px; padding:26px 24px; }
.lp-userbox .lp-userbox-hi { font-size:17px; color:var(--ink); margin:0 0 16px; text-align:center; }
.lp-userbox .lp-userbox-hi strong { color:var(--brand-d); }
.lp-userbox .lp-btn-login,
.lp-userbox .lp-btn-signup { height:54px; font-size:17px; text-decoration:none; }
.lp-userbox .lp-btn-login { margin-bottom:10px; }
/* 관리자 전용 진입 버튼 — 회원 버튼과 확실히 구분되게 색을 달리한다(오조작 방지). */
.lp-btn-admin { display:flex; width:100%; box-sizing:border-box; align-items:center;
justify-content:center; gap:8px; height:46px; border-radius:12px; margin-top:10px;
background:var(--gray-bg); color:var(--brand-d); border:1.5px dashed var(--brand-l);
font-size:14.5px; font-weight:700; text-decoration:none; }
.lp-btn-admin:hover { background:#fff; border-style:solid; }
.lp-btn-admin svg { width:17px; height:17px; }
/* 슬라이드 컨트롤 */
.lp-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:9; width:46px; height:46px;
border-radius:50%; background:rgba(255,255,255,.55); border:0; cursor:pointer; display:flex;
align-items:center; justify-content:center; color:var(--brand-dd); }
.lp-arrow:hover { background:rgba(255,255,255,.85); }
.lp-arrow:focus-visible { outline:2px solid var(--brand-d); outline-offset:2px; }
.lp-arrow.prev { left:20px; } .lp-arrow.next { right:20px; }
.lp-arrow svg { width:22px; height:22px; }
.lp-dots { position:absolute; z-index:9; bottom:18px; left:50%; transform:translateX(-50%);
display:flex; gap:9px; align-items:center; }
.lp-dot { width:9px; height:9px; border-radius:50%; border:0; background:rgba(0,0,0,.22); cursor:pointer; padding:0; }
.lp-dot[aria-current="true"] { background:var(--brand-d); width:26px; border-radius:5px; }
.lp-dot:focus-visible { outline:2px solid var(--brand-d); outline-offset:2px; }
.lp-pause { margin-left:5px; width:22px; height:22px; border:0; background:transparent; cursor:pointer; color:rgba(0,0,0,.4); }
.lp-pause svg { width:13px; height:13px; }
.lp-pause:focus-visible { outline:2px solid var(--brand-d); outline-offset:2px; }
/* ── 무료 이벤트 띠 (2026-08-19 #19) ──────────────────────────────────
배너 바로 아래, 탭 스트립 위. ★항상 보이는 자리라 슬라이드보다 노출이 확실하다.
색은 브랜드 네이비 축 — 위 배너(초록 이미지)와 아래 회색 탭 사이에서
★한 줄만 진하게 떠 보이게 해 시선을 잡는다(§2-5 흰 배경·네이비 포인트). */
/* ★띠는 --brand(밝은 네이비), 아래 활성 탭은 --brand-dd(가장 짙은 네이비)로 ★색을 가른다.
같은 색이면 띠와 탭이 한 덩어리로 붙어 보여 어디까지가 이벤트인지 알 수 없다
(실제로 그렇게 나와서 고쳤다). 아래 선까지 그어 경계를 확실히 한다. */
/* ★이벤트 띠 배경 (2026-08-19) — 단색 남색이라 '이벤트'로 안 읽혔다.
금색 광채가 든 배경을 얹는다. ★글자는 굽지 않았다(금액·문구가 바뀌면 이미지를 다시
만들어야 하므로) — 배경만 이미지고 문구는 그대로 HTML이다.
이미지를 못 받아도 var(--brand) 단색으로 떨어져 ★띠가 사라지지 않는다. */
.lp-gift { background:var(--brand) url("../img/landing/gift-band.webp") center/cover no-repeat;
color:#fff; box-shadow:inset 0 -1px 0 rgba(255,255,255,.16); }
/* ★칸을 키우고 밝게 (2026-08-19 사장님 지시)
"무료 이벤트 칸을 조금 더 크게 해서 더 잘 보이게 … 더 튀고 더 밝고 잘 보이는 색"
★브랜드를 벗어나지 않으면서 튀게 하는 법: 바탕은 네이비 계열로 두되
★금색(앰버)을 포인트로 키운다. 금색은 '혜택·선물'의 관습색이라 눈이 먼저 간다.
띠 전체를 금색으로 칠하면 브랜드가 무너지므로 ★배지·숫자·테두리에만 쓴다. */
.lp-gift .in { max-width:1120px; margin:0 auto; padding:22px 24px; /* 14 → 22 : 칸을 키운다 */
display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.lp-gift { border-top:2px solid rgba(255,216,77,.55); /* 금색 경계로 띠를 도드라지게 */
border-bottom:2px solid rgba(255,216,77,.30); }
.lp-gift-tag { flex:none; font-size:13px; font-weight:800; letter-spacing:.02em;
background:linear-gradient(180deg,#FFE479,#FFC93D); color:#3A2E00;
border-radius:999px; padding:7px 15px;
box-shadow:0 2px 0 #D9A21B, 0 4px 10px rgba(255,201,61,.35); }
.lp-gift-txt { margin:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; flex:1 1 auto; }
/* 숫자를 ★금색으로 키운다 — 이 띠에서 가장 먼저 읽혀야 하는 것이 '1,000 크레딧'이다. */
.lp-gift-txt b { font-size:23px; font-weight:900; letter-spacing:-.02em; color:#FFD84D;
text-shadow:0 2px 10px rgba(255,201,61,.35); }
.lp-gift-sub { font-size:14px; color:rgba(255,255,255,.86); }
.lp-gift-cta { flex:none; display:inline-flex; align-items:center; gap:8px;
background:linear-gradient(180deg,#FFE479 0%,#FFC93D 55%,#F0B01F 100%);
color:#3A2E00; font-size:15.5px; font-weight:900;
text-decoration:none; border-radius:999px; padding:13px 24px;
box-shadow:0 4px 0 #C98E12, 0 8px 20px rgba(255,201,61,.38),
inset 0 1px 0 rgba(255,255,255,.55);
transition:transform .14s, box-shadow .14s, filter .14s;
position:relative; overflow:hidden; }
/* ★은은한 빛 (2026-08-20 사장님 지적: "너무 딱딱 끊겨서 유치해 보여")
전에는 box-shadow를 0 → 9px로 ★계단처럼 키웠다. 그림자 크기가 튀니 끊겨 보인다.
★부드럽게 만드는 세 가지:
① 그림자 크기를 ★바꾸지 않는다 — 대신 ★투명도만 서서히 오르내린다
(opacity는 GPU가 부드럽게 보간한다. box-shadow 크기 변화는 그렇지 않다.)
② 주기를 ★길게(2.6초 → 5.2초). 짧으면 깜빡이는 것처럼 읽힌다.
③ ease-in-out 대신 ★cubic-bezier로 양 끝을 더 완만하게 — 시작·끝의 '툭' 느낌을 없앤다.
빛 훑기(::after)도 ★훨씬 옅게(0.55 → 0.22) 하고 주기를 늘렸다. */
.lp-gift-cta { position:relative; }
.lp-gift-cta::before {
content:""; position:absolute; inset:-3px; border-radius:999px; pointer-events:none;
box-shadow:0 0 0 6px rgba(255,201,61,.28);
opacity:0; animation:lp-gift-breathe 5.2s cubic-bezier(.4,0,.5,1) infinite;
}
.lp-gift-cta::after { content:""; position:absolute; top:0; bottom:0; width:34%;
left:-45%; transform:skewX(-16deg); pointer-events:none;
background:linear-gradient(90deg, transparent,
rgba(255,255,255,.22), transparent);
animation:lp-gift-shine 6.5s cubic-bezier(.45,0,.35,1) infinite; }
.lp-gift-cta svg { width:18px; height:18px; transition:transform .18s ease; }
.lp-gift-cta:hover { transform:translateY(-1.5px); filter:brightness(1.03); }
.lp-gift-cta:hover::before { animation-play-state:paused; opacity:.5; }
.lp-gift-cta:hover svg { transform:translateX(3px); }
.lp-gift-cta:active { transform:translateY(1px); }
/* ★크기가 아니라 ★투명도만 오간다 — 그래서 끊기지 않고 숨 쉬듯 보인다. */
@keyframes lp-gift-breathe {
0%, 100% { opacity:0; }
50% { opacity:1; }
}
@keyframes lp-gift-shine {
0% { left:-45%; }
38% { left:125%; }
100% { left:125%; }
}
@media (prefers-reduced-motion: reduce) {
.lp-gift-cta::before, .lp-gift-cta::after { animation:none; opacity:0; }
.lp-gift-cta:hover { transform:none; }
}
}
@media (max-width:640px){
/* 폰에서는 한 줄에 안 들어간다 — 태그·문구·버튼을 세로로 쌓고 버튼을 전폭으로.
(헤더가 글자 단위로 쪼개졌던 것과 ★같은 실수를 반복하지 않는다) */
.lp-gift .in { flex-direction:column; align-items:stretch; gap:10px; padding:14px 16px; }
.lp-gift-tag { align-self:flex-start; }
.lp-gift-txt b { font-size:16px; }
.lp-gift-cta { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
.lp-gift-cta { transition:none; }
.lp-gift-cta:hover { transform:none; }
}
/* ── 탭 스트립(진입점 3개) ── */
.lp-tabs { display:grid; grid-template-columns:repeat(3,1fr); background:var(--gray-bg); border-bottom:1px solid var(--line); }
.lp-tab { text-align:center; padding:20px 12px; font-size:15px; font-weight:600; color:var(--ink-2);
text-decoration:none; border-right:1px solid var(--line); }
.lp-tab:last-child { border-right:0; }
.lp-tab:hover { color:var(--brand-d); background:#fff; }
.lp-tab.on { background:var(--brand-dd); color:#fff; }
/* ── 하단: 주요메뉴 + 공지 ── */
.lp-below { padding-block:52px; }
.lp-below .in { display:grid; grid-template-columns:1fr 1fr; gap:52px; }
.lp-sec-t { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink); }
.lp-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lp-menu-card { background:var(--gray-bg); border-radius:12px; padding:20px; display:flex;
justify-content:space-between; align-items:flex-start; text-decoration:none; border:1px solid transparent; }
.lp-menu-card:hover { border-color:var(--brand); background:#fff; }
.lp-menu-card b { font-size:16px; font-weight:700; color:var(--ink); display:block; }
.lp-menu-card span { font-size:12.5px; color:var(--ink-2); margin-top:4px; display:block; }
/* ★아이콘 v3 — 단색 → 그라디언트 라인(정의는 _lp_header.html의 #lp-grad). */
.lp-menu-card .ico { width:40px; height:40px; flex:none; }
.lp-menu-card .ico svg { width:100%; height:100%; fill:none;
stroke:url(#lp-grad); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lp-notice-head { display:flex; justify-content:space-between; align-items:baseline; }
.lp-notice-head a { font-size:20px; color:var(--ink-2); text-decoration:none; }
.lp-notice-list { list-style:none; margin:6px 0 0; padding:0; }
.lp-notice-list li { padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:baseline; }
.lp-notice-list li:first-child { border-top:1px solid var(--line); }
.lp-n-badge { font-size:11px; font-weight:700; color:#fff; background:var(--brand); padding:2px 8px; border-radius:4px; flex:none; }
.lp-notice-list a { font-size:14.5px; color:var(--ink); text-decoration:none; }
.lp-notice-list a:hover { color:var(--brand-d); }
.lp-notice-list .em { font-weight:700; }
/* ★1500px 미만 — 로그인 박스를 ★배너 밖으로 내린다 (2026-08-20).
★왜 필요한가
로그인 박스는 ★270px 고정인데 배너는 화면 폭에 ★비례해 줄어든다.
그래서 좁아질수록 박스가 배너에서 차지하는 비중이 커져 ★그림을 덮는다.
실측: 1920에서는 안 겹치는데 1440·1280에서는 그림 절반이 가려졌다.
★배너 아래로 내리면 셋 다 산다 — 그림도 보이고, 문구도 넓어지고, 로그인도 그대로 쓴다. */
/* ★1700px 미만부터 배너 높이를 확보한다 (2026-08-20 검사가 잡았다).
눈으로는 1440만 봤는데, 검사를 돌리니 ★1600에서도 배지가 잘리고 버튼이 삐져나왔다.
비율만 쓰면 폭이 줄 때 높이가 같이 주는데 ★문구는 그만큼 안 줄기 때문이다. */
@media (max-width:1700px){
.lp-slides { min-height:500px; }
/* ★그림이 오른쪽에서 잘리지 않게 안으로 들인다 (2026-08-20 실측).
배너 이미지는 화면 폭에 맞춰 늘어나는데, 그림이 오른쪽 끝에 붙어 있어
좁아질수록 ★잘려 나갔다. object-position으로 ★보여줄 쪽을 옮긴다. */
.lp-slide img { object-position:88% center; }
}
@media (max-width:1280px){
.lp-slide img { object-position:80% center; }
}
@media (max-width:1500px){
.lp-loginbox { position:static; width:min(420px,92%); margin:20px auto 4px;
box-shadow:0 6px 20px rgba(0,0,0,.10); }
/* 로그인이 배너 밖으로 나갔으니 ★오른쪽 여백도 돌려준다 — 문구가 더 넓어진다 */
.lp-promo-in { padding-right:60px; }
/* ★배너 높이를 확보한다 — 폭에 비례해 줄이면 ★문구가 넘쳐 배지가 잘린다(실측 1440px).
비율만 쓰면 화면이 좁아질수록 높이가 같이 줄어드는데, 문구 크기는 그만큼 안 줄어든다.
그래서 ★최소 높이를 준다(이그잼포유도 배너 높이가 사실상 고정이다). */
.lp-slides { min-height:470px; }
}
@media (max-width:1180px){
.lp-promo-in { padding-right:40px; }
.lp-slides { min-height:440px; }
.lp-promo-title { font-size:clamp(34px,4.6vw,58px); }
}
@media (max-width:900px){
.lp-below .in { grid-template-columns:1fr; gap:36px; }
/* ★로그인을 숨기지 않는다 — 전에는 display:none이라 폰에서 ★로그인 자체가 불가능했다.
위 규칙으로 이미 배너 밖에 있으므로 그대로 쓰면 된다. */
.lp-promo-in { padding-right:24px; }
/* 좁은 폭에선 절대 중앙배치가 로고·시작하기와 겹친다 → 일반 흐름으로 복귀 */
.lp-gnb { position:static; transform:none; gap:20px; margin:0 auto; }
.lp-hdr .in { height:72px; gap:16px; }
.lp-logo .bird { width:42px; height:42px; }
.lp-logo img { height:42px; }
.lp-logo .wm { font-size:21px; }
.lp-slides { aspect-ratio:1120/420; } /* 문구 2배에 맞춰 높이 확보(2026-08-16) */
}
/* ★폰 폭(≤640px) 헤더 깨짐 수정 (2026-08-19 발견 — 원래부터 있던 결함)
★증상: 로고 + 메뉴 3개 + '시작하기'가 한 줄에 안 들어가자 flex가 항목을 눌러
★글자가 한 자씩 세로로 쪼개졌다("주/요/기/능"). 로고와도 겹쳐 읽을 수가 없었다.
★원인은 두 가지가 겹친 것: ① 줄바꿈을 못 하게 한 줄로 묶여 있고
② 링크에 nowrap이 없어 글자 단위로 접힌다.
★고침: 좁으면 2줄로 흐르게 하고(로고·버튼 / 메뉴), 링크는 nowrap +
메뉴 줄은 가로 스크롤. 메뉴가 늘어도 다시 깨지지 않는다. */
/* ★2026-08-30 — 이 고침이 ★작동하지 않고 있었다 (사장님 신고로 발견).
"모바일에서 로고와 주요기능 버튼이 겹쳐서 나온다"
★왜 안 먹었나: 위 규칙은 `flex-wrap:wrap` + `order`로 2줄을 만든다.
그런데 그 뒤(2026-08-19 겹침 수정) `.lp-hdr .in`이 ★display:grid로 바뀌었다.
★flex-wrap 은 grid 에서 ★아무 일도 하지 않는다 — 조용히 무시된다.
그래서 3열 그리드에 로고·메뉴·시작하기가 ★한 줄로 들어갔고,
메뉴가 제 칸을 넘어 로고·버튼 쪽으로 흘렀다.
★실측(375px 폰): 화면은 375인데 메뉴 링크가 x287~569 — ★194px가 밖으로 나갔다.
★교훈: 배치 방식을 바꿀 때는 ★그 배치에 기대던 옛 규칙을 함께 본다.
오류도 경고도 없이 조용히 죽는다.
★고침: grid 답게 ★칸 이름으로 2줄을 못 박는다. flex-wrap 에 기대지 않는다. */
@media (max-width:640px){
.lp-hdr .in {
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:"logo right"
"gnb gnb";
height:auto; gap:10px; row-gap:10px; padding-top:12px; padding-bottom:10px;
}
.lp-logo { grid-area:logo; }
/* 비로그인=시작하기 버튼 / 로그인=크레딧+문제생성 — ★둘 다 같은 칸에 온다. */
.lp-hdr-start{ grid-area:right; justify-self:end;
height:38px; padding:0 16px; font-size:14px; }
.lp-hdr-right{ grid-area:right; justify-self:end; }
.lp-gnb {
grid-area:gnb;
/* ★min-width:0 이 있어야 넘칠 때 ★스스로 스크롤한다.
없으면 칸이 내용 크기까지 늘어나 ★페이지가 옆으로 밀린다. */
width:auto; min-width:0; margin:0; gap:20px; justify-content:flex-start;
overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none; /* 메뉴 아래 스크롤바가 보이면 지저분하다 */
}
.lp-gnb::-webkit-scrollbar { display:none; }
.lp-gnb a { white-space:nowrap; } /* ★글자 단위 줄바꿈 차단 */
.lp-util .in { height:32px; }
.lp-util a { padding:0 10px; }
/* ★배너 높이 — aspect-ratio는 폭에 비례해서 줄어든다. 390px 폰에서
1120/420이면 높이가 ★146px밖에 안 되는데 내용(킥커+제목 2줄+버튼)은
250px가 넘어서 ★CTA 버튼과 킥커가 잘려 나갔다.
좁은 폭에서는 비율을 버리고 ★내용이 들어갈 최소 높이를 준다. */
.lp-slides { aspect-ratio:auto; min-height:330px; }
/* 화살표를 작게 — 그만큼 제목이 쓸 폭이 늘어 줄 수가 줄어든다. */
.lp-arrow { width:34px; height:34px; }
.lp-arrow svg { width:17px; height:17px; }
.lp-arrow.prev { left:6px; } .lp-arrow.next { right:6px; }
.lp-promo-in { padding-left:48px; padding-right:48px; }
/* 탭 3개가 한 줄에 안 들어가 '만/들기'처럼 어색하게 접혔다 — 글자를 줄인다. */
.lp-tab { font-size:13px; padding:14px 6px; }
}
/* 좁은 화면: 로그인 폼은 계속 숨기되, ★로그인 회원의 바로가기는 살린다.
폰에서 '문제 생성 / 내 자료함'까지 사라지면 홈에서 할 수 있는 일이 없어진다.
오버레이를 풀고 배너 아래 일반 블록으로 흐르게 한다. */
@media (max-width:900px){
.lp-userbox {
display:block; position:static; transform:none;
width:auto; max-width:520px; margin:16px auto 0;
}
}
@media (prefers-reduced-motion: reduce){ .lp-slide { transition:none; } }
/* ═══════════ 주요기능 전용 (.lp-feature) ═══════════ */
.lp-feature .lp-hero { position:relative; overflow:hidden;
background:radial-gradient(90% 120% at 100% -10%, #E8EFFA 0%, transparent 55%), #fff; }
.lp-feature .lp-hero .in { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
min-height:420px; padding-block:60px; }
.lpf-kick { font-size:15px; font-weight:700; color:var(--brand-l); margin:0 0 14px; }
.lpf-h1 { font-size:44px; font-weight:800; line-height:1.18; letter-spacing:-.03em; margin:0 0 20px; color:var(--ink); }
.lpf-h1 .g { color:var(--brand-d); }
.lpf-lead { font-size:16.5px; line-height:1.7; color:var(--ink-2); margin:0 0 26px; max-width:44ch; }
.lpf-chips { display:flex; flex-wrap:wrap; gap:9px; }
.lpf-chip { font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; background:var(--gray-bg);
color:var(--ink-2); border:1px solid var(--line); }
.lpf-chip.hot { background:var(--brand-d); color:#fff; border-color:var(--brand-d); }
/* 히어로 제품 목업(추후 실제 스크린샷 교체) */
.lpf-art { position:relative; height:100%; min-height:340px; }
.lpf-shot { position:absolute; border-radius:10px; box-shadow:0 20px 44px rgba(44,58,46,.16);
border:1px solid var(--line); background:#fff; overflow:hidden; }
/* ★실제 그림이 있을 때(2026-08-21) — 도형 목업 대신 한 장을 그대로 보여 준다.
height:100%를 그대로 두면 세로가 늘어나 그림이 찌그러진다. 그래서 auto로 푼다. */
.lpf-art.has-img { height:auto; min-height:0; display:flex; align-items:center; }
.lpf-hero-img { width:100%; height:auto; border-radius:14px; display:block;
box-shadow:0 20px 44px rgba(44,58,46,.16); }
.lpf-shot.a { width:88%; top:20px; left:0; z-index:2; }
.lpf-shot.b { width:62%; top:120px; right:-6%; z-index:3; }
.lpf-paper { padding:16px; }
.lpf-paper.lg { padding:24px; }
.lpf-paper.cols { columns:2; column-gap:20px; }
.lpf-ph { height:8px; background:var(--brand); width:40%; border-radius:3px; margin-bottom:12px; }
.lpf-ph.w55 { width:55%; } .lpf-ph.sage { background:var(--brand-l); }
.lpf-row { height:6px; background:#E5E9F0; border-radius:3px; margin-bottom:7px; }
.lpf-row.s { width:60%; } .lpf-row.m { width:85%; } .lpf-row.q { background:#BFD9F2; width:72%; height:8px; }
.lpf-box { height:34px; background:#EFF3F9; border-radius:4px; margin:8px 0; }
/* 서비스 한눈에 */
.lpf-overview { padding-block:70px; text-align:center; }
.lpf-lbl { font-size:14px; font-weight:700; color:var(--brand-l); margin:0 0 12px; }
.lpf-overview h2 { font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink); }
.lpf-overview p { font-size:16px; line-height:1.7; color:var(--ink-2); max-width:60ch; margin:0 auto; }
/* 기능 카드 4 */
.lpf-cards { padding-bottom:80px; }
.lpf-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lpf-card { border:1px solid var(--line); border-radius:14px; padding:24px 20px; background:#fff; transition:.15s; }
.lpf-card:hover { border-color:var(--brand); box-shadow:0 12px 28px rgba(44,58,46,.08); transform:translateY(-2px); }
.lpf-card .tag { font-size:12px; font-weight:700; color:var(--brand-l); margin:0 0 10px; }
/* ★아이콘 v3 — 연한 칩 배경 제거 + 그라디언트 라인. 칩이 있으면 라인 아이콘이 눌려 보인다. */
.lpf-card .ico { width:34px; height:34px;
display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.lpf-card .ico svg { width:32px; height:32px; fill:none;
stroke:url(#lp-grad); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lpf-card h3 { font-size:17px; font-weight:800; margin:0 0 8px; color:var(--ink); }
.lpf-card p { font-size:13px; line-height:1.65; color:var(--ink-2); margin:0; }
/* 기능 상세(좌우 번갈아) */
.lpf-detail { padding-block:64px; border-top:1px solid var(--line); }
.lpf-detail.alt { background:var(--gray-bg); }
.lpf-detail .in { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.lpf-detail.flip .txt { order:2; }
.lpf-detail .lbl { display:inline-block; font-size:13px; font-weight:800; color:#fff; background:var(--brand);
padding:4px 12px; border-radius:16px; margin:0 0 16px; }
.lpf-detail h3 { font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.3; margin:0 0 14px; color:var(--ink); }
.lpf-detail .d-lead { font-size:15.5px; line-height:1.7; color:var(--ink-2); margin:0 0 22px; }
.lpf-detail ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
/* 🐞 굵은 글자 앞뒤에 ★없는 띄어쓰기가 생기던 것 (2026-08-22)
전에는 li가 flex였다. flex는 자식 ★요소마다 칸을 나누므로 …가 별도 칸이 되고,
gap:11px가 그 앞뒤로 붙어 "유형마다 더 잘하는 AI 에 배정"처럼 벌어져 보였다.
글자를 잘못 친 것처럼 읽힌다. 문제제작의뢰·주요기능 두 페이지에 모두 있었다.
→ li는 ★보통 글줄로 두고 체크 아이콘만 왼쪽에 세운다. 그러면 문장이 한 덩어리로 흐른다. */
.lpf-detail li { display:block; position:relative; padding-left:31px;
font-size:14.5px; line-height:1.55; color:var(--ink); }
.lpf-detail li svg { position:absolute; left:0; top:2px;
width:20px; height:20px; color:var(--brand); flex:none; }
.lpf-detail .shot { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line);
box-shadow:0 18px 40px rgba(44,58,46,.12); background:#fff; min-height:300px; }
/* 추천 대상 */
.lpf-recommend { padding-block:76px; background:var(--brand-dd); color:#fff; text-align:center; }
.lpf-recommend h2 { font-size:30px; font-weight:800; margin:0 0 40px; letter-spacing:-.02em; }
.lpf-quotes { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:820px; margin:0 auto; }
.lpf-quote { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:14px;
padding:24px; font-size:15px; line-height:1.6; }
.lpf-quote b { color:#CFE6FA; }
/* CTA */
.lpf-cta { padding-block:88px; text-align:center; background:var(--mint); }
.lpf-cta .z { font-size:52px; font-weight:900; color:var(--brand-d); letter-spacing:-.03em; margin:0 0 8px; }
.lpf-cta h2 { font-size:30px; font-weight:800; margin:0 0 14px; color:var(--ink); letter-spacing:-.02em; }
.lpf-cta p { font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 28px; }
.lpf-cta .btn-z { display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 34px; border-radius:28px;
background:var(--brand-d); color:#fff; font-size:17px; font-weight:800; text-decoration:none; }
.lpf-cta .btn-z:hover { background:var(--brand-dd); }
.lpf-cta .note { display:block; margin-top:14px; font-size:13px; color:var(--ink-2); }
/* ★‘0원’ 좌우 장식 그림 (2026-08-21 사장님 그림) — ★문구를 절대 가리지 않는다.
그림은 문단 뒤(z-index 0)에 두고, 글자 쪽은 z-index로 위에 올린다.
좁은 화면에서는 아예 숨긴다 — 겹쳐서 읽기 어려워지는 쪽이 손해가 크다. */
.lpf-cta.has-art .in { position:relative; }
.lpf-cta.has-art .in > :not(.lpf-cta-art) { position:relative; z-index:1; }
/* ★가장자리를 부드럽게 풀어 배경에 녹인다 — 원본 그림의 배경이 ★연회색이라
그냥 얹으면 민트색 바탕 위에 ★회색 네모가 보인다(실측으로 확인).
그림을 고치지 않고 화면에서만 푼다 — 원본은 그대로 두는 편이 나중에 안전하다. */
.lpf-cta-art { position:absolute; top:50%; transform:translateY(-50%); z-index:0;
width:auto; height:min(112%,430px); object-fit:contain; pointer-events:none;
opacity:.9;
-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,
#000 52%, rgba(0,0,0,0) 100%);
mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,
#000 52%, rgba(0,0,0,0) 100%); }
.lpf-cta-art.l { left:0; }
.lpf-cta-art.r { right:0; }
/* ★선택자를 두 겹으로 쓴다 — `.lp img { display:block }`(0,1,1)이 이미 있어서
`.lpf-cta-art`(0,1,0) 한 겹으로는 ★진다(실측: 390px에서도 그림이 안 숨었다).
!important로 덮지 않는다 — 우선순위를 맞추는 쪽이 다음 사람에게 안전하다. */
@media (max-width:1080px){ .lpf-cta .lpf-cta-art { display:none; } }
/* ── 유형 전체 공개 + 핵심 3가지 (2026-08-18) ────────────────────────── */
.lpf-types { padding-block:64px 8px; }
.lpf-types h2 { font-size:clamp(26px,3vw,40px); margin:6px 0 10px; color:var(--ink); }
.lpf-types h2 .g { color:var(--brand); }
.lpf-types-lead { color:var(--ink-2); font-size:16px; margin:0 0 28px; }
.lpf-typegrid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.lpf-typecat { border:1px solid var(--line); border-radius:14px; padding:18px 16px; background:#fff; }
.lpf-typecat h3 { display:flex; align-items:center; gap:8px; margin:0 0 12px;
font-size:15px; color:var(--brand-d); }
.lpf-typecat h3 .n { display:inline-flex; align-items:center; justify-content:center;
min-width:22px; height:22px; padding:0 6px; border-radius:999px;
background:var(--brand); color:#fff; font-size:12px; }
.lpf-typecat ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.lpf-typecat li { font-size:13.5px; color:var(--ink-2); padding-left:12px; position:relative; }
.lpf-typecat li::before { content:""; position:absolute; left:0; top:8px; width:5px; height:5px;
border-radius:50%; background:var(--brand-l); }
/* 옵션 띠 — '유형만 고르는 게 아니라 세부까지 정한다'를 한 줄로 보여 준다. */
.lpf-optbar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.lpf-opt { border:1px dashed var(--line); border-radius:12px; padding:14px 16px; background:var(--gray-bg); }
.lpf-opt b { display:block; font-size:13px; color:var(--brand-d); margin-bottom:4px; }
.lpf-opt span { font-size:13px; color:var(--ink-2); }
.lpf-three { padding-block:56px; }
.lpf-three .in { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lpf-three-item { border-radius:16px; padding:26px 22px; background:var(--gray-bg); border:1px solid var(--line); }
.lpf-three-item .k { font-size:13px; font-weight:700; color:var(--brand-l); margin:0 0 8px; }
.lpf-three-item h3 { font-size:clamp(19px,1.7vw,24px); color:var(--ink); margin:0 0 10px; line-height:1.3; }
.lpf-three-item p { font-size:14.5px; color:var(--ink-2); margin:0; line-height:1.65; }
@media (max-width:900px){
.lp-feature .lp-hero .in, .lpf-grid, .lpf-detail .in { grid-template-columns:1fr; }
.lpf-grid { grid-template-columns:1fr 1fr; }
.lpf-detail.flip .txt { order:0; }
/* ★.has-img(0,2,0)도 같이 잡아야 한다 — `.lpf-art` 한 겹으로는 진다.
폰에서는 히어로 그림을 접는 것이 원래 동작이고, 바로 아래 유형 섹션이
같은 내용을 글로 보여 준다. */
.lpf-art, .lpf-art.has-img { display:none; }
.lpf-quotes { grid-template-columns:1fr; }
/* 유형 5칸·옵션 4칸·핵심 3칸은 폰에서 글자가 뭉개진다 → 2칸/1칸으로 접는다. */
.lpf-typegrid { grid-template-columns:1fr 1fr; }
.lpf-optbar { grid-template-columns:1fr 1fr; }
.lpf-three .in { grid-template-columns:1fr; }
}
@media (max-width:560px){
.lpf-typegrid { grid-template-columns:1fr; }
}
/* ── 문제제작의뢰 소개 (2026-07-21) ─────────────────────────────── */
.ord-steps-lbl { text-align:center; font-size:13px; font-weight:700; letter-spacing:.08em;
color:var(--brand-d); margin:0 0 22px; text-transform:uppercase; }
.ord-step { position:relative; }
.ord-step-no {
position:absolute; top:14px; right:16px;
width:28px; height:28px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--brand); color:#fff; font-size:14px; font-weight:800;
}
/* ★진행 순서 3칸은 페이지 ★가운데로 (2026-08-22 사장님 지적).
.lpf-grid는 원래 ★4칸짜리 격자다. 여기는 카드가 3개뿐이라 앞 3칸만 채워져
오른쪽 한 칸이 빈 채로 남았고, 그 탓에 묶음 전체가 ★왼쪽으로 쏠려 보였다.
칸 수를 3으로 맞추고 묶음 자체를 가운데에 놓는다(max-width + auto 여백). */
.lpf-grid.cols-3 { grid-template-columns:repeat(3,1fr); max-width:900px; margin-inline:auto; }
.lpf-grid.cols-3 .lpf-card { text-align:center; }
.lpf-grid.cols-3 .lpf-card .ico { margin-inline:auto; }
/* 번호 배지는 카드 오른쪽 위 고정 — 가운데 정렬과 부딪히지 않게 그대로 둔다. */
.lpf-grid.cols-3 .lpf-card h3 { margin-bottom:0; }
/* ── 진행 순서 카드 — 단계마다 커서를 올리면 그 단계가 살아난다 (2026-08-23) ──
사장님 지시: "단계별로 애니메이션을 화려하게 넣어서 단계별로 커서를 가져가면
효과가 작동되게". 화려하되 ★읽는 것을 방해하지 않게 — 글자는 안 움직이고
그림·번호·화살표만 움직인다. */
.ord-steps { max-width:1000px; }
/* ★카드에는 overflow:hidden을 걸지 않는다 — 걸었더니 카드 밖으로 나가는
단계 화살표가 ★잘려서 안 보였다. 잘라내기는 그림 상자(.ord-shot)에만 건다. */
.ord-steps .lpf-card {
cursor:default; outline:none;
transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
/* ★번호 배지는 감춘다 — 그림 안에 이미 ①②③이 그려져 있어 ★두 번 나온다. */
.ord-steps .ord-step-no { display:none; }
.ord-steps .lpf-card:hover,
.ord-steps .lpf-card:focus-visible {
transform:translateY(-8px);
border-color:var(--brand);
box-shadow:0 22px 44px rgba(30,58,95,.20);
}
/* 그림 — 커서를 올리면 살짝 확대되며 또렷해진다 */
.ord-shot { position:relative; overflow:hidden; border-radius:12px;
border:1px solid var(--line); background:#fff; margin-bottom:14px; }
.ord-shot img { display:block; width:100%; height:auto;
transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .4s;
filter:saturate(.88); }
.ord-steps .lpf-card:hover .ord-shot img,
.ord-steps .lpf-card:focus-visible .ord-shot img { transform:scale(1.07); filter:saturate(1.08); }
/* 빛줄기 — 커서를 올린 순간 한 번 훑고 지나간다 */
.ord-sheen { position:absolute; inset:0; pointer-events:none;
background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
transform:translateX(-120%); }
.ord-steps .lpf-card:hover .ord-sheen,
.ord-steps .lpf-card:focus-visible .ord-sheen { animation:ord-sheen .75s ease-out 1; }
@keyframes ord-sheen { to { transform:translateX(120%); } }
/* 아이콘 — 살짝 떠오른다 */
.ord-steps .ico { transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.ord-steps .lpf-card:hover .ico,
.ord-steps .lpf-card:focus-visible .ico { transform:translateY(-4px) scale(1.12); }
/* 단계 사이 화살표 — 카드 밖 오른쪽에 그린다(그림에 구운 초록 화살표는 잘라 냈다).
★칸 사이 틈(18px)보다 크면 다음 카드에 ★가려진다 — 실제로 8px 잘렸다.
틈 안에 들어가도록 16px로 맞추고, 겹칠 때를 대비해 z-index도 올려 둔다. */
.ord-arrow { position:absolute; top:50%; right:-17px; width:16px; height:16px;
margin-top:-8px; z-index:5;
background:var(--brand); clip-path:polygon(0 22%,55% 22%,55% 0,100% 50%,55% 100%,55% 78%,0 78%);
}
.ord-steps .lpf-card { position:relative; z-index:1; }
.ord-steps .lpf-card:hover, .ord-steps .lpf-card:focus-visible { z-index:4; }
.ord-steps .lpf-card:hover .ord-arrow,
.ord-steps .lpf-card:focus-visible .ord-arrow { animation:ord-nudge .6s ease-in-out infinite; }
@keyframes ord-nudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(5px); } }
/* ★움직임을 원치 않는 분에게는 전부 끈다 — 멀미·주의력 문제로 설정해 둔 분들이 있다. */
@media (prefers-reduced-motion: reduce){
.ord-steps .lpf-card, .ord-shot img, .ord-steps .ico {
transition:none;
}
.ord-steps .lpf-card:hover, .ord-steps .lpf-card:focus-visible { transform:none; }
.ord-steps .lpf-card:hover .ord-shot img,
.ord-steps .lpf-card:focus-visible .ord-shot img { transform:none; }
.ord-steps .lpf-card:hover .ico,
.ord-steps .lpf-card:focus-visible .ico { transform:none; }
.ord-sheen, .ord-steps .lpf-card:hover .ord-sheen { animation:none; display:none; }
.ord-steps .lpf-card:hover .ord-arrow { animation:none; }
}
@media (max-width:900px){
/* 폰에는 커서가 없다 — 화살표를 아래로 돌리지 말고 그냥 감춘다(세로로 쌓이므로). */
.ord-arrow { display:none; }
}
/* ★폰에서는 한 줄로 세운다.
이 되돌림은 반드시 위 규칙 ★뒤에 와야 한다 — 미디어 쿼리는 우선순위를 올려 주지
않으므로, 앞에 적으면 같은 세기끼리 ★나중에 적힌 3칸 규칙이 이긴다.
실제로 앞쪽 미디어 블록에 적었다가 폰에서 3칸이 그대로 남아 가로 스크롤이 생겼다. */
@media (max-width:900px){
.lpf-grid.cols-3 { grid-template-columns:1fr; max-width:none; }
}
.ord-spec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
gap:12px; margin-top:22px; text-align:left; }
.ord-spec { display:flex; gap:12px; align-items:flex-start;
padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.ord-spec-k { flex:0 0 62px; font-weight:800; color:var(--brand-d); font-size:14px; }
.ord-spec-v { font-size:14px; color:var(--ink-2); line-height:1.6; }
.ord-spec-v em { font-style:normal; color:var(--ink); font-weight:600; }
.ord-preview { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.ord-shot { margin:0; text-align:center; }
.ord-shot figcaption { margin-top:10px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.ord-link-sub { margin-left:14px; font-size:14px; color:var(--ink-2); text-decoration:underline; }
/* 기능 소개 삽화(2026-08-10) — 목업 카드와 같은 자리·같은 톤으로 앉힌다.
width/height 속성을 함께 주어 로딩 중 레이아웃이 튀지 않게 한다(CLS 방지). */
.lpf-shot-img {
display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto;
border: 1px solid var(--gray-300); border-radius: var(--r-12);
background: var(--bg);
}
/* ── 배너 promo 오버레이 (2026-08-12) ────────────────────────────────────
문구를 이미지에 굽지 않고 HTML로 얹는다 — 저장소에 한글 TTF가 없어 PIL로 글자를
구우면 PC마다 결과가 달라진다(§2-6 한글 깨짐과 동형). 금액을 바꿔도 이미지를 다시
만들 필요가 없고, 검색·화면읽기에도 잡힌다.
★배치 주의: 우측 270px는 로그인 박스가 점유한다 → 문구는 반드시 왼쪽에 둔다. */
.lp-slide-link { display:block; position:absolute; inset:0; text-decoration:none; }
.lp-promo { position:absolute; inset:0; display:flex; align-items:center; overflow:hidden; }
/* 이미지가 없을 때는 promo 자체가 배너가 된다(회색 '준비 중' 박스 대신). */
.lp-promo--gift { background:linear-gradient(105deg,#2D5D44 0%,#3E7C5C 55%,#5FA07A 100%); }
.lp-promo--order { background:linear-gradient(105deg,#26543E 0%,#3A7157 55%,#508C69 100%); }
/* 첫 배너(대표 메시지) — 세 장이 한 벌로 보이게 같은 초록 축, 톤만 조금 더 깊게. */
.lp-promo--hero { background:linear-gradient(105deg,#1E4634 0%,#316049 55%,#488462 100%); }
/* 이미지가 있으면 배경을 지우고 왼쪽에만 어둡게 깔아 글자 가독성을 확보한다. */
/* 배경 이미지는 문구가 없는 그라데이션이라, 왼쪽만 살짝 눌러 대비를 준다. */
/* 문구가 얹히는 ★왼쪽을 눌러 흰 글씨 가독성을 확보한다. */
.lp-promo.has-img { background:linear-gradient(90deg,rgba(10,22,40,.60) 0%,rgba(10,22,40,.44) 42%,
rgba(10,22,40,.18) 66%,rgba(10,22,40,0) 82%); }
/* ★배치 개편 (2026-08-20, 사장님 지시: "족보닷컴·이그잼포유처럼")
★무엇이 문제였나
문구(왼쪽) + 그림(오른쪽) + 로그인(오른쪽) 구조라 ★그림과 로그인이 같은 자리를 다퉜다.
화면이 좁아지면 로그인 박스(270px 고정)가 그림을 통째로 덮었다 —
이미지 안에서 아무리 옮겨도 못 피했다(겹치지 않는 자리가 40px뿐).
★외부 실측
이그잼포유: ★그림(왼쪽) · 문구(가운데) · 로그인(오른쪽) 3분할. 셋이 자리를 안 다툰다.
족보닷컴 : 로그인이 아예 ★헤더 버튼 → 팝업. 배너가 전체 폭을 쓴다.
★우리 선택 = 이그잼포유식
승인제라 ★로그인이 항상 보여야 하고(비회원은 아무것도 못 한다), 바꿀 양도 적다.
대신 좁은 화면에서는 아래 규칙으로 로그인을 ★배너 밖으로 내린다. */
.lp-promo-in { width:100%; max-width:1120px; margin:0 auto;
/* ★문구가 주인공이다 — 왼쪽을 ★넓게 쓴다 (2026-08-20 되돌림).
가운데로 끼웠더니 제목 폭이 762px → 490px로 좁아져 답답해졌다.
오른쪽만 비운다(로그인 270px + 여백). */
padding:0 330px 0 28px;
display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
/* ★글자 크기 2배 이상 (2026-08-16 사장님 지시: "슬라이드 별 글자들을 2배이상 키우자").
기존: kicker 12 / title 19~34 / sub 11~15 / cta 13 → 배너에서 문구가 잘 안 보였다.
★배너 높이(.lp-slides aspect-ratio)도 함께 키웠다 — 글자만 2배로 하면 360px 높이를
넘쳐 잘린다. 실측: 2배 문구 총 높이가 약 420px라 배너를 540으로 올렸다. */
.lp-promo-kicker { display:inline-block; font-size:24px; font-weight:800; letter-spacing:.04em;
color:#0F2038; background:#FFD84D; border-radius:999px; padding:7px 20px; }
/* ★2026-08-18: 부제를 버린 대신 제목을 ★배너가 허용하는 최대치까지 키웠다.
"문구 텍스트가 가장 잘 보이도록 사이즈 안에서 가능한 가장 크게"(사장님 지시).
상한 68 → 86px, 뷰포트 비례도 4.6 → 5.6vw. 그림자를 진하게 해 밝은 배경
이미지 위에서도 흰 글자가 뭉개지지 않게 한다. */
/* ★배너 제목 줄바꿈 (2026-08-19 사장님 지적)
1단계(style.css 전역 keep-all)로 '반영한'이 반/영한으로 쪼개지는 것은 잡혔다.
그런데 어절 단위로만 끊으니 이런 줄이 남았다 —
"모든 문제유형을 완벽 / 대비" ← 둘째 줄에 낱말 하나만 떨어진다(고아 줄)
text-wrap:balance는 브라우저가 ★줄 길이를 고르게 나눠 준다.
→ "모든 문제유형을 / 완벽 대비"
지원하지 않는 브라우저는 이 줄을 ★무시할 뿐이라(위 keep-all은 그대로 적용) 안전하다.
제목처럼 ★짧은 덩어리에만 쓴다 — 본문에 쓰면 브라우저가 계산을 포기한다. */
.lp-promo-title { font-size:clamp(42px,5.6vw,86px); font-weight:800; color:#fff; line-height:1.1;
letter-spacing:-.025em; text-shadow:0 3px 16px rgba(0,0,0,.42);
text-wrap:balance; }
.lp-promo-sub { font-size:clamp(22px,2.1vw,31px); color:rgba(255,255,255,.92); line-height:1.4; }
.lp-promo-cta { display:inline-flex; align-items:center; gap:10px; margin-top:12px;
background:#fff; color:#25573F; font-weight:800; font-size:26px;
border-radius:999px; padding:15px 34px; box-shadow:0 6px 18px rgba(0,0,0,.22);
transition:transform .15s, box-shadow .15s; }
.lp-promo-cta svg { width:28px; height:28px; }
.lp-slide-link:hover .lp-promo-cta { transform:translateX(3px); box-shadow:0 8px 22px rgba(0,0,0,.30); }
/* 빛 쓸림 — '이벤트' 느낌을 주되 글자를 가리지 않게 아주 옅게. */
/* ★2026-08-18 사장님 지시: 반짝임을 ★세 배너 전부에 넣고 더 화려하게.
전에는 gift(가입) 배너에만 있었고 띠 하나가 옅게 지나갔다.
①넓고 밝은 주 띠 + ②뒤따르는 얇은 보조 띠 두 겹으로 '유리에 빛이 스치는' 느낌을 준다.
배너는 클릭 유도가 목적이라 시선을 끄는 값이 크지만, 접근성 설정은 그대로 존중한다. */
.lp-promo::after {
content:""; position:absolute; top:-60%; left:-40%; width:34%; height:220%;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 45%,
rgba(255,255,255,.46) 50%, rgba(255,255,255,.30) 55%, rgba(255,255,255,0) 100%);
transform:rotate(14deg); animation:lp-shine 3.2s ease-in-out infinite;
pointer-events:none;
}
.lp-promo::before {
content:""; position:absolute; top:-60%; left:-40%; width:10%; height:220%;
background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
transform:rotate(14deg); animation:lp-shine 3.2s ease-in-out .28s infinite;
pointer-events:none;
}
@keyframes lp-shine { 0%{left:-40%;} 55%,100%{left:130%;} }
/* 슬라이드가 ★바뀌는 순간의 번쩍임 — 켜진 슬라이드에 한 번만 재생된다.
자동 넘김이 지나가는 것을 눈이 알아채게 해 배너를 다시 보게 만든다. */
.lp-slide.on .lp-promo { animation:lp-flash .62s ease-out 1; }
@keyframes lp-flash {
0% { filter:brightness(1.9) saturate(1.25); }
45% { filter:brightness(1.15) saturate(1.08); }
100% { filter:none; }
}
.lp-slide.on img { animation:lp-zoom 5.2s ease-out 1; }
@keyframes lp-zoom { 0% { transform:scale(1.055); } 100% { transform:scale(1); } }
@media (max-width:900px){
/* 좁은 화면에선 로그인 박스가 아래로 내려가므로 오른쪽 여백을 되돌린다.
★단 좌우 화살표(46px, left/right:20px)가 배너 위에 떠 있어, 여백이 좁으면
제목이 화살표 ★아래로 파고들어 글자가 가려진다(모바일에서 '형' 자가 그랬다).
화살표 폭 + 여백만큼을 확보한다. */
.lp-promo-in { padding-right:76px; padding-left:76px; }
.lp-promo-sub { display:none; } /* 배너가 낮아져 부제는 넘친다 — 제목·CTA만 남긴다 */
/* 폭이 좁아도 ★기존(19px)보다는 확실히 크게 — 2배 지시의 취지를 모바일에서도 지킨다. */
.lp-promo-kicker { font-size:17px; padding:5px 14px; }
.lp-promo-title { font-size:clamp(28px,6.4vw,40px); }
.lp-promo-cta { font-size:19px; padding:11px 24px; margin-top:10px; }
.lp-promo-cta svg { width:21px; height:21px; }
}
/* 폰에서도 ★같은 효과가 보이게 키운다 (2026-08-22 사장님 지적).
"모바일에서는 슬라이드 이미지에 효과들이 없다"
★확인해 보니 효과는 폰에서도 ★똑같이 돌고 있었다(애니메이션 이름·시간 동일).
그런데 ★눈에 안 띄었다. 이유가 둘이다.
① 폰에서는 그림이 cover로 크게 잘려 들어가 ★이미 확대된 상태다.
거기에 1.055배 줌을 걸어 봐야 변화가 안 보인다.
② 빛 쓸림 띠(34%)가 ★좁은 화면을 순식간에 지나가 스치는 줄 모른다.
그래서 폰에서는 ★줌을 더 크게, ★띠를 더 넓고 느리게 준다.
(움직임 줄이기 설정은 아래에서 그대로 존중한다 — 그건 접근성이다.) */
@media (max-width:900px){
.lp-slide.on img { animation:lp-zoom-m 6s ease-out 1; }
@keyframes lp-zoom-m { 0% { transform:scale(1.14); } 100% { transform:scale(1); } }
.lp-promo::after { width:58%; animation-duration:4.2s; }
.lp-promo::before { width:20%; animation-duration:4.2s; }
}
/* 움직임에 민감한 사용자는 반짝임·번쩍임·줌을 전부 끈다(접근성).
효과를 화려하게 키운 만큼 이 예외도 함께 넓혀야 한다.
★폰에서 효과가 안 보인다면 ★기기의 '동작 줄이기' 설정을 먼저 확인해야 한다
(아이폰: 설정 > 손쉬운 사용 > 동작 > 동작 줄이기). 켜져 있으면 여기서 전부 꺼진다. */
@media (prefers-reduced-motion: reduce){
.lp-promo::before, .lp-promo::after { animation:none; }
.lp-slide.on .lp-promo, .lp-slide.on img { animation:none; }
/* 폰용 확대 줌도 함께 끈다 — 위에서 새로 준 것이라 여기 안 적으면 혼자 살아남는다. */
.lp-slide.on img { animation:none; }
}
/* ★상단 메뉴의 '준비중' 꼬리표 (2026-08-19 #17).
메뉴 글자와 같은 크기로 두면 무엇이 메뉴인지 흐려진다 — 작게, 옅게. */
/* ⚠️ 랜딩 헤더는 ★흰 배경이다. 처음에 흰 반투명 배경을 줬더니 ★보이지 않았다. */
.lp-gnb-soon {
margin-left: 5px; padding: 2px 7px; border-radius: 999px;
font-size: 11px; font-weight: 700; vertical-align: 2px; letter-spacing:-.01em;
background: var(--mint); color: var(--brand-d);
}
/* ── 지문분석지 '준비 중' 화면 (2026-08-19 #17) ─────────────────────────
★랜딩 CSS에는 .badge / .btn 이 없다(그건 계정 화면 전용 account.css다).
랜딩 템플릿에서 그 클래스를 쓰면 ★스타일 없는 맨 글자·맨 링크로 나온다
(실제로 그렇게 나왔다 — 화면을 찍어 보고 발견했다). 랜딩 전용으로 따로 둔다. */
.ana-soon { margin:14px 0 0; }
.ana-soon span {
display:inline-block; padding:7px 16px; border-radius:999px;
background:var(--mint); color:var(--brand-d);
font-size:13.5px; font-weight:800; letter-spacing:-.01em;
}
.ana-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.btn-z2 {
display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 26px;
border-radius:26px; border:1.5px solid var(--line); background:#fff; color:var(--brand-d);
font-size:16px; font-weight:700; text-decoration:none;
transition:border-color .15s, transform .15s, box-shadow .15s;
}
.btn-z2:hover { border-color:var(--brand); transform:translateY(-1.5px);
box-shadow:0 6px 16px rgba(30,58,95,.14); }
/* 항목이 5개라 4칸 격자에서 마지막 하나만 다음 줄로 떨어진다 — 이 화면만 5칸으로. */
.ana-parts .lpf-grid { grid-template-columns:repeat(5,1fr); }
@media (max-width:1000px){ .ana-parts .lpf-grid { grid-template-columns:repeat(2,1fr); } }
/* ── 12 STEP 워크북 단계 목록 (2026-08-29 #2) ─────────────────────────────
12줄을 한 줄씩 세로로 쌓으면 화면 절반을 잡아먹는다 → 두 칸으로 나눈다.
번호는 ★순서를 뜻하므로(1→12 실제 학습 순서) 번호를 지우지 않는다. */
.wb-steps {
list-style:none; margin:16px 0 0; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:8px 18px;
}
.wb-steps li {
display:flex; align-items:flex-start; gap:9px;
font-size:15px; line-height:1.5; color:var(--ink);
}
.wb-no {
flex:0 0 auto; min-width:22px; height:22px; padding:0 5px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:6px; background:var(--mint); color:var(--brand-d);
font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
@media (max-width:760px){ .wb-steps { grid-template-columns:1fr; } }
/* 랜딩 헤더의 크레딧 칩 — 앱 헤더(style.css .credit-chip)와 ★같은 모양을 쓰되,
랜딩은 별도 CSS 스코프라 배치만 여기서 잡는다(모양 규칙을 두 벌로 만들지 않는다). */
.lp-hdr-right { display:flex; align-items:center; gap:10px; }
/* ★랜딩 헤더는 메뉴가 4개라 자리가 빠듯하다 — 보조 정보(약 N문항)는 여기선 항상 접는다.
(앱 헤더는 메뉴가 없어 여유가 있으므로 그대로 보여 준다.)
실측: 접기 전에는 1440px에서 '충전'이 잘리고 '문제 생성'이 두 줄로 깨졌다. */
.lp-hdr-right .credit-chip-q { display:none; }
.lp-hdr-right .lp-hdr-start { white-space:nowrap; }
/* 헤더만 본문(1120px)보다 넓게 쓴다 — 메뉴·칩·버튼이 한 줄에 들어가야 한다. */
.lp-hdr .in { max-width:1340px; }
/* ── 랜딩 헤더 우측 액션 (2026-08-20 전면 재설계) ─────────────────────
★사장님 지적: "너무 유치해. ebsi와 족보닷컴을 보고 동일하게 만들자."
★외부 실측으로 근거를 잡았다(공개 CSS 계측):
EBSi — 그림자 ★없음 · 애니메이션 ★없음 · 모서리 0px 또는 pill · 굵기 400~600
이그잼포유 — 그림자 ★없음 · 애니메이션 ★없음 · 모서리 ★6px · 단색 배경 · 굵기 400
(두 곳 모두 ★그라디언트·입체 두께를 쓰지 않는다)
전에 만든 3D(그라디언트+두께+맥박)는 ★업계 관행과 정반대였다.
교육 서비스는 ★신뢰감이 자산이라 과한 장식이 곧 싸구려로 읽힌다.
→ ★단색 · 얇은 모서리 · 그림자 없음 · 절제된 굵기로 바꾼다.
통일감은 여전히 ★같은 높이·모서리·글자 크기로 낸다(색만 다르다). */
.lp-hdr-right { display:flex; align-items:center; gap:8px; }
.lp-hdr-right .credit-chip-top,
.lp-hdr-right .lp-hdr-start {
height:40px; padding:0 18px; border-radius:6px; /* 이그잼포유와 같은 6px */
font-size:15px; font-weight:600; letter-spacing:-.01em;
display:inline-flex; align-items:center; justify-content:center;
text-decoration:none; border:1px solid transparent; white-space:nowrap;
box-shadow:none; /* ★그림자 없음 */
transition:background-color .14s ease, border-color .14s ease;
}
/* 크레딧 충전 — 빨강(사장님 지정). ★단색이다. */
.lp-hdr-right .credit-chip-top { background:#DC3A32; color:#fff; }
.lp-hdr-right .credit-chip-top:hover { background:#C22F28; }
.lp-hdr-right .credit-chip-top:active { background:#A82822; }
/* 문제 생성 — 브랜드 네이비. 충전과 ★같은 규격, 색만 다르다. */
.lp-hdr-right .lp-hdr-start { background:var(--brand); color:#fff; }
.lp-hdr-right .lp-hdr-start:hover { background:var(--brand-d); }
.lp-hdr-right .lp-hdr-start:active { background:#0F1E38; }
/* 잔액은 ★정보다 — 버튼처럼 보이지 않게 테두리만 있는 조용한 칸으로. */
.lp-hdr-right .credit-chip {
border:1px solid var(--line); background:#fff; overflow:visible;
border-radius:6px; height:40px; margin-right:2px; gap:0; align-items:stretch;
}
.lp-hdr-right .credit-chip-bal {
height:38px; border-radius:5px; padding:0 13px; background:transparent;
color:var(--ink); font-size:14px; font-weight:600;
}
.lp-hdr-right .credit-chip-bal:hover { background:var(--gray-bg); }
.lp-hdr-right .credit-chip-num { font-size:15px; font-weight:700; color:var(--brand-d); }
.lp-hdr-right .credit-chip.is-zero { border-color:#F0C2C0; }
.lp-hdr-right .credit-chip.is-zero .credit-chip-num { color:#B42318; }
.lp-hdr-right .credit-chip.is-low { border-color:#F0D9A8; }
.lp-hdr-right .credit-chip.is-low .credit-chip-num { color:#B26A00; }
}
/* ── '12 STEP'의 숫자 강조 (2026-08-30 사장님 지시) ──────────────────────
★사장님: "12 STEP으로 띄어 쓰고, 12 숫자는 웹페이지에 잘 어울리는 골드색으로."
★왜 숫자만인가
이 메뉴가 파는 것은 ★'12단계'다. 숫자가 그 값을 한눈에 말한다.
문구 전체를 금색으로 하면 ★다른 메뉴와 무게가 안 맞아 화면이 기울어진다.
★두 배경을 갈라 쓴다
헤더·본문은 흰 배경 → 진한 금(--gold). 네이비 위에 올라가면 안 읽히므로
그때는 밝은 금(--gold-on-navy)으로 바꾼다.
★글꼴 크기는 안 키운다 — 색만으로 충분하고, 키우면 줄 높이가 흔들린다. */
.wb-12 {
color: var(--gold);
font-weight: 800;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
/* 네이비 위(짙은 바탕)에서는 밝은 금으로 — 안 그러면 글자가 묻힌다. */
.lp-hdr .lp-gnb a.on .wb-12,
.lpf-cta .wb-12,
[class*="navy"] .wb-12 { color: var(--gold-on-navy); }
/* ═══════════════════════════════════════════════════════════════════════
★로그인 박스 — 배너를 ★꽉 채우고 그 위에 올린다 (2026-08-30 사장님 지시)
★지시가 두 번 왔다. 두 번째가 최종이다.
① "로그인 박스를 가장 오른쪽 최상단쪽으로 변경할 수 있니?"
→ 겹치면 그림을 가려서, 배너와 ★나란히(2열) 놓았다.
② "로그인박스를 위해 ★슬라이드를 줄이지 말고 슬라이드를 이전처럼 ★꽉 채우고
그 위에 로그인 박스를 ★올려 크기를 살짝 줄이고"
→ 배너가 주인공이라는 판단이다. ★배너를 온전히 돌려주고
박스를 ★작게 만들어 덜 가린다.
★8/20에 이 방식을 뺐던 이유와 무엇이 다른가
그때는 박스가 270~420px이라 ★그림 절반을 덮었다.
지금은 ★244px로 줄이고 안쪽 여백·입력칸 높이도 함께 줄인다.
같은 자리에 있어도 ★덮는 넓이가 크게 준다.
★모바일은 건드리지 않는다 — 980px 아래는 지금처럼 배너 아래로 쌓인다.
★이 블록을 파일 끝에 두는 이유: 앞의 @media (max-width:1500px)가 같은 선택자로
position:static 을 건다. 특이도가 같으니 ★나중에 오는 쪽이 이긴다.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:981px){
/* 배너는 ★건드리지 않는다 — 예전처럼 화면을 꽉 채운다. */
.lp-home .lp-hero{ position:relative; }
.lp-home .lp-hero .lp-loginbox{
position:absolute; z-index:10;
top:18px;
/* ★헤더의 '시작하기' 버튼과 ★같은 세로선에 맞춘다.
사장님이 "가장 오른쪽"이라 하셨지만, ★화면 가장자리에 붙이면
바로 위 헤더와 어긋나 ★깨져 보인다. 헤더와 맞추는 것이 '가장 오른쪽'의 뜻이다.
실측: 1920px에서 헤더 오른쪽 끝이 1630 — 이 식이 1660으로 그 선에 붙는다.
★max 를 쓴다 — 안 쓰면 좁은 화면에서 음수가 되어 ★화면 밖으로 나간다. */
right:max(20px, calc((100% - 1400px) / 2));
/* ★살짝 줄인다 (사장님 지시) — 270px → 244px */
width:244px; margin:0; transform:none;
padding:16px 16px 14px;
box-shadow:0 10px 28px rgba(0,0,0,.18);
}
/* 안쪽도 함께 줄여야 실제 높이가 준다 — 폭만 줄이면 세로로 길어져 그림을 더 가린다. */
.lp-home .lp-hero .lp-loginbox .fld{ height:38px; font-size:12.5px; margin-bottom:7px; }
.lp-home .lp-hero .lp-loginbox .save{ font-size:11.5px; margin:0 0 9px; }
.lp-home .lp-hero .lp-loginbox .lp-btn-login,
.lp-home .lp-hero .lp-loginbox .lp-btn-signup{ height:40px; font-size:14px; }
.lp-home .lp-hero .lp-loginbox .find{ margin-top:10px; font-size:11.5px; }
/* 로그인한 회원 카드도 같은 자리·같은 축소 — 로그인 전후로 화면이 튀지 않는다. */
.lp-home .lp-hero .lp-userbox{ width:268px; padding:18px 16px; }
.lp-home .lp-hero .lp-userbox .lp-userbox-hi{ font-size:15px; margin:0 0 12px; }
.lp-home .lp-hero .lp-userbox .lp-btn-login,
.lp-home .lp-hero .lp-userbox .lp-btn-signup{ height:44px; font-size:15px; }
/* 배너 문구가 박스 밑으로 들어가지 않게 오른쪽을 비워 준다. */
.lp-home .lp-promo-in{ padding-right:290px; }
/* ★배너 넘김 화살표를 박스 아래로 내린다 (실측으로 잡았다).
화살표는 배너 ★세로 가운데에 있는데, 박스도 위에서 내려와 그 자리에 닿는다.
실측 1024·1180px: 오른쪽 화살표가 ★78~100% 가려져 ★다음 배너로 넘길 수가 없었다.
★보이는데 안 눌리는 것이 가장 나쁘다 — 회원은 "고장났다"고 읽는다.
★좌우를 ★함께 내린다 — 한쪽만 내리면 짝이 어긋나 더 이상해 보인다.
아래에서 24% 지점이면 박스 아래끝보다 확실히 아래이고, 점(dots)과도 안 겹친다. */
.lp-home .lp-hero .lp-arrow{ top:auto; bottom:24%; transform:none; }
}
/* ★좁은 폭에서는 박스가 ★배너 넘김 화살표를 덮는다 (실측으로 잡았다).
1180px·1024px에서 오른쪽 화살표(46x46)가 ★78%·100% 가려져
회원이 다음 배너로 넘길 수가 없었다. 보이는데 안 눌리는 것이 가장 나쁘다.
→ 이 구간에서는 박스를 ★더 줄이고 위로 붙여 ★화살표 위에서 끝나게 한다.
화살표는 배너 세로 가운데에 있으므로, 박스 아래끝이 그보다 위면 안 겹친다. */
@media (min-width:981px) and (max-width:1180px){
.lp-home .lp-hero .lp-loginbox{
width:206px; padding:11px 11px 10px; top:12px;
}
.lp-home .lp-hero .lp-loginbox .fld{ height:33px; font-size:12px; margin-bottom:5px; }
.lp-home .lp-hero .lp-loginbox .save{ font-size:11px; margin:0 0 7px; }
.lp-home .lp-hero .lp-loginbox .lp-btn-login,
.lp-home .lp-hero .lp-loginbox .lp-btn-signup{ height:34px; font-size:13px; }
.lp-home .lp-hero .lp-loginbox .find{ margin-top:7px; font-size:11px; }
.lp-home .lp-hero .lp-userbox{ width:226px; padding:12px 12px 10px; }
.lp-home .lp-hero .lp-userbox .lp-userbox-hi{ font-size:13.5px; margin:0 0 9px; }
.lp-home .lp-hero .lp-userbox .lp-btn-login,
.lp-home .lp-hero .lp-userbox .lp-btn-signup{ height:38px; font-size:13.5px; }
.lp-home .lp-promo-in{ padding-right:240px; }
}
/* ═══════════════════════════════════════════════════════════════════════
★헤더가 넘쳐 ★가로 스크롤이 생기던 구멍을 메운다 (2026-08-30 실측)
★증상: 820px·1024px에서 화면이 ★옆으로 밀렸다(가로 스크롤 153px·38px).
로그인 박스 때문이 아니다 — 재어 보니 넘치는 것은 ★헤더 메뉴와 '시작하기'였다.
820px : .lp-gnb 폭 675px가 우측끝 863까지 뻗음 (화면 820)
1024px : .lp-hdr-start 가 우측끝 1062까지 뻗음 (화면 1024)
★왜 지금 드러났나: 폰 폭(≤640px)은 2026-08-19에 ★2줄 + 메뉴 가로 스크롤로 고쳤다.
그런데 그 뒤 메뉴가 ★5개로 늘었다(내신 교재제작·지문분석지 제작·12 STEP 워크북제작).
641~1180px는 그 고침이 안 닿는 ★사이 구간이라 새 메뉴가 늘어난 만큼 넘쳤다.
★한 곳을 고쳤다면 같은 모양의 다른 곳도 본다 — 그 구간을 못 봤다.
★고침: 가운데 칸이 ★줄어들 수 있게 하고, 그래도 모자라면 메뉴만 옆으로 넘긴다.
페이지 전체가 밀리는 것보다 ★메뉴 줄만 스치는 편이 훨씬 낫다.
═══════════════════════════════════════════════════════════════════════ */
/* 그리드 칸은 기본 최소폭이 '내용 크기'라 ★줄어들지 않는다 — 그래서 밖으로 밀린다.
minmax(0,…)로 바꿔야 줄어들 수 있다.
★단 이것만 켜면 안 된다 (2026-08-30 회귀로 잡혔다). 칸이 줄어들 수 있게만 해 놓고
메뉴에 넘침 처리를 안 주면, 메뉴가 ★칸 밖으로 흘러 크레딧 칩과 겹친다(실측 16px).
★줄어들 수 있게 하는 것과 ★넘칠 때 처리하는 것은 ★함께 켜야 한다.
그래서 아래 한 구간 안에서만 ★둘을 같이 준다. */
@media (min-width:641px) and (max-width:1180px){
/* ★줄어들어야 하는 것은 ★메뉴뿐이다 (2026-08-30 실측으로 바로잡음).
처음엔 ★세 칸을 다 minmax(0,…)로 열었다. 그랬더니 641px에서
★로고 칸이 2px까지 눌리고 메뉴가 '시작하기'와 2,232px² 겹쳤다.
로고와 버튼은 ★줄어들면 안 되는 것이다 — auto 로 제 크기를 지킨다.
가운데 칸만 minmax(0,1fr)로 열어 두면, 남으면 넓게 쓰고 모자라면 스스로 스크롤한다. */
.lp-hdr .in{ gap:14px;
grid-template-columns:auto minmax(0,1fr) auto; }
/* 넘칠 때 왼쪽이 잘리지 않게 ★왼쪽부터 채운다(가운데 정렬은 넘치면 앞이 잘린다). */
/* ★margin:0 이 꼭 필요하다 (실측으로 잡았다).
앞의 @media (max-width:900px)가 `.lp-gnb{ margin:0 auto }`를 건다.
격자 칸 안에서 ★margin:auto 는 '칸을 채우지 말고 내용만큼만' 이라는 뜻이라
넘침 처리(overflow-x)가 ★일할 자리가 없어진다.
실측 641px: 칸은 347px인데 메뉴 박스가 ★560px로 삐져나와
'시작하기'와 2,808px² 겹쳤다. margin 을 0으로 되돌리면 칸에 딱 맞는다. */
.lp-gnb{ justify-content:flex-start; margin:0; }
.lp-gnb{
min-width:0; gap:16px;
overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.lp-gnb::-webkit-scrollbar{ display:none; }
.lp-gnb a{ white-space:nowrap; font-size:14px; }
.lp-hdr-start{ padding:0 14px; font-size:14px; }
}
@media (min-width:641px) and (max-width:900px){
.lp-gnb{ gap:13px; }
.lp-gnb a{ font-size:13px; }
.lp-logo .wm{ font-size:19px; }
}