/* 첫 화면(/) 소개와 시작하기. 규칙은 docs/디자인_시스템.md, 공통 값은 tokens.css. */
:root{
 --lp-bg:#fff;--lp-soft:var(--bg-layer-sunken);--lp-ink:var(--fg-default);--lp-sub:var(--fg-muted);--lp-mute:var(--fg-subtle);--lp-line:var(--stroke-neutral-weak);
 --lp-brand:var(--bg-brand-solid);--lp-brand-ink:var(--fg-brand-contrast);--lp-brand-soft:var(--bg-brand-weak);--lp-glow:#bb00f01f;
 --lp-card:var(--bg-layer-default);--lp-shadow:var(--s1);--lp-shadow-lg:0 30px 60px -20px #3a1a5a40,var(--s3);
 --g-bg:#fff;--g-line:#747775;--g-ink:#1f1f1f;
 --phone:#0f0d10;--screen:#fff;--screen-ink:var(--fg-default);--screen-sub:var(--fg-subtle);--dm-card:var(--bg-neutral-weak);--dm-btn:var(--bg-neutral-weak-pressed)
}
/* 다크: 색 단계는 tokens.css가 바꾸고, 여기서는 첫 화면만의 값(바탕, 구글 버튼 다크 규격, 휴대폰)만 */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--lp-bg:var(--bg-layer-basement);--lp-glow:#bb00f033;--lp-shadow-lg:0 30px 60px -20px #000c;--g-bg:#131314;--g-line:#8e918f;--g-ink:#e3e3e3;--phone:#000;--screen:#161416}}
:root[data-theme=dark]{--lp-bg:var(--bg-layer-basement);--lp-glow:#bb00f033;--lp-shadow-lg:0 30px 60px -20px #000c;--g-bg:#131314;--g-line:#8e918f;--g-ink:#e3e3e3;--phone:#000;--screen:#161416}

.landing{background:var(--lp-bg);color:var(--lp-ink);font-family:var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden}
.landing a{color:inherit}

/* 위쪽 */
.lp-top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--lp-bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.lp-top-in{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:12px 20px}
.lp-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.2rem;letter-spacing:-.03em;text-decoration:none}
/* 관리 화면 .brandmark·앱 아이콘과 같은 "R" 표시 */
.lp-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lp-brand);color:#fff;font-size:16px;font-weight:800;letter-spacing:0}
.lp-top-login{font-weight:700;font-size:.9rem;text-decoration:none;padding:9px 16px;border-radius:99px;background:var(--lp-brand);color:#fff!important}

main{max-width:1120px;margin:0 auto;padding:0 20px;overflow-x:clip}
.landing{overflow-x:clip}

/* 첫 화면 위쪽 */
.lp-hero{position:relative;display:grid;gap:20px;padding:24px 0 56px}
.lp-glow{position:absolute;inset:-80px -40% auto;height:640px;background:radial-gradient(closest-side,var(--lp-glow),transparent 70%);pointer-events:none;z-index:0}
.lp-hero>*{position:relative;z-index:1}
.lp-hero>.lp-glow{position:absolute;z-index:0}
.lp-hero h1{font-size:clamp(1.85rem,8vw,3.5rem);line-height:1.2;font-weight:800;letter-spacing:-.045em;margin:0 0 14px}
.lp-hero h1 em{font-style:normal;color:var(--lp-brand)}
.lp-lead{color:var(--lp-sub);font-size:clamp(.98rem,3.9vw,1.15rem);line-height:1.65;margin:0 0 22px;max-width:34em}
/* 시작하기: 로그인 창을 연다(전문가 피드백 2026-10-17: 맨 위는 서비스를 보여 주는 자리, 로그인은 창으로) */
.lp-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;border:0;border-radius:16px;background:var(--lp-brand);color:#fff;font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--lp-brand) 70%,transparent);transition:transform .15s,filter .15s}
.lp-cta:hover{filter:brightness(1.06)}
.lp-cta:active{transform:scale(.98)}
.lp-cta-note{margin:12px 0 0;color:var(--lp-mute);font-size:.88rem}
/* 돈 이야기(2026-10-19 사용자 "돈에 대한 얘기가 너무 안보이는데"): 제목 위 무료 표시 + 장면 다음 가격 칸 */
.lp-badge{display:inline-flex;align-items:center;margin:0 0 14px;padding:6px 12px;border-radius:99px;background:var(--lp-brand-soft);color:var(--lp-brand-ink);font-weight:700;font-size:.88rem}
.lp-price{margin:8px 0 40px;text-align:center}
.lp-price h2{font-size:clamp(1.45rem,6vw,2.3rem);line-height:1.3;font-weight:800;letter-spacing:-.04em;margin:0 0 10px}
.lp-price-sub{margin:0 0 24px;color:var(--lp-sub)}
.lp-plans{display:grid;gap:12px;max-width:720px;margin:0 auto;text-align:left}
@media(min-width:640px){.lp-plans{grid-template-columns:1fr 1fr}}
.lp-plan{background:var(--lp-soft);border-radius:20px;padding:22px 22px 20px;display:grid;gap:6px;align-content:start}
.lp-plan.is-main{background:var(--lp-brand-soft);box-shadow:inset 0 0 0 2px var(--lp-brand)}
.lp-plan p{margin:0}
.lp-plan-name{font-weight:700;color:var(--lp-sub)}
.lp-plan-price{font-size:clamp(1.8rem,8vw,2.4rem);font-weight:800;letter-spacing:-.04em;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.lp-plan.is-main .lp-plan-price{color:var(--lp-brand-ink)}
.lp-plan-desc{color:var(--lp-sub);font-size:.93rem;line-height:1.6}
.lp-plan-day{color:var(--lp-brand-ink);font-weight:700;font-size:.9rem}
.lp-price-foot{margin:16px 0 0;color:var(--lp-mute);font-size:.84rem}
.lp-top-login{border:0;font-family:inherit;cursor:pointer}
/* 가운데 "시작하기"가 화면에 보이는 동안은 숨기고, 스크롤해서 지나가면 나타난다(index.js, 2026-10-18 사용자 "하나만 넣는게 맞지 않나?") */
.lp-top-login.is-off{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.lp-top-login{transition:opacity .2s,visibility .2s}}

.lp-start{max-width:400px}
.lp-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:0 18px;border-radius:14px;font-weight:700;font-size:1rem;text-decoration:none;transition:transform .15s,filter .15s}
.lp-btn:active{transform:scale(.985)}
.lp-btn svg{width:20px;height:20px;flex:none}
/* 구글 로그인 버튼: 표준 색 G, 라이트 #FFF/#747775/#1F1F1F, 다크 #131314/#8E918F/#E3E3E3 (developers.google.com/identity/branding-guidelines) */
.lp-google{background:var(--g-bg);border:1px solid var(--g-line);color:var(--g-ink)!important;box-shadow:var(--lp-shadow)}
.lp-google:hover{filter:brightness(.98)}
/* 카카오: 배경 #FEE500, 글자 검정 85% (카카오 디자인 가이드) */
.lp-btn.kakao-btn{margin-top:10px;background:#FEE500;color:rgba(0,0,0,.85)!important;border:0;box-shadow:var(--lp-shadow)}
.lp-btn.kakao-btn:hover{filter:brightness(.97)}
.lp-invited{font-weight:700;color:var(--lp-brand-ink);margin:0 0 12px}
.lp-alert{background:var(--lp-soft);border:1px solid var(--lp-line);border-radius:12px;padding:12px 14px;font-size:.9rem;color:var(--lp-sub);margin:0 0 12px}
.lp-alert.bad{color:#d93a3a;border-color:#f3c9c9}
.lp-consent{color:var(--lp-mute);font-size:.8rem;line-height:1.6;margin:14px 0 0;text-align:center}
.lp-consent a{text-decoration:underline;text-underline-offset:2px}

/* 예시 화면 */
.lp-demo{position:relative;display:flex;justify-content:center;padding:78px 0 8px} /* 위 78px: 댓글·답글 말풍선 두 개가 휴대폰 DM 머리(가게 이름)를 가리지 않게 */
.lp-phone{position:relative;display:flex;flex-direction:column;width:min(250px,64vw);aspect-ratio:9/19.5;background:var(--screen);border:9px solid var(--phone);border-radius:42px;padding:38px 12px 12px;box-shadow:var(--lp-shadow-lg);color:var(--screen-ink);overflow:hidden}
.lp-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.lp-compose{flex:none;margin-top:10px;border:1px solid color-mix(in srgb,var(--screen-sub) 30%,transparent);border-radius:99px;padding:8px 14px;font-size:.66rem;color:var(--screen-sub)}
.lp-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:72px;height:20px;border-radius:99px;background:var(--phone)}
.lp-dm-head{flex:none;display:flex;align-items:center;gap:9px;padding:0 2px 10px;margin-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--screen-sub) 22%,transparent)}
.lp-dm-head svg{width:20px;height:20px;color:var(--screen-ink)}
.lp-dm-head b{display:block;font-size:.84rem;line-height:1.2}
.lp-dm-head small{display:block;font-size:.7rem;color:var(--screen-sub)}
.lp-av{display:block;width:30px;height:30px;border-radius:50%;flex:none}
.lp-av.me{background:linear-gradient(135deg,#ffd27a,#ff7a59 55%,#c13584)}
.lp-av.a1{background:linear-gradient(135deg,#9be7c4,#3aa6a0)}
.lp-sys{font-size:.66rem;line-height:1.5;color:var(--screen-sub);text-align:center;margin:0 10px 12px}
.lp-card{width:88%;margin-left:auto;background:var(--dm-card);border-radius:20px;overflow:hidden}
.lp-card-img{background:linear-gradient(160deg,#f9efff,#f0dcff 60%,#e6c8ff);aspect-ratio:1.2;display:grid;place-items:center}
.lp-card-img svg{width:78%;height:auto}
.lp-card-copy{padding:10px 12px 2px}
.lp-card-copy strong{font-size:.86rem;display:block}
.lp-card-copy p{font-size:.68rem;color:var(--screen-sub);margin:5px 0 0;line-height:1.45}
.lp-card-btn{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:10px;padding:9px 6px;border-radius:11px;background:var(--dm-btn);text-align:center;font-weight:700;font-size:.76rem}

.lp-float{position:absolute;display:flex;align-items:center;gap:10px;background:var(--lp-card);color:var(--lp-ink);border:1px solid var(--lp-line);border-radius:16px;padding:10px 14px 10px 10px;box-shadow:var(--lp-shadow);font-size:.8rem;z-index:2}
.lp-float p{margin:0;line-height:1.35}
.lp-float b{display:block;font-size:.76rem}
.lp-float small{display:block;color:var(--lp-mute);font-size:.7rem}
.lp-float-comment{top:4px;left:max(0px,calc(50% - 200px))}
/* 자동 답글: 댓글 바로 아래, 답글처럼 조금 들여서 */
.lp-float-reply{top:60px;left:max(28px,calc(50% - 172px))}
.lp-float-sent{top:58%;right:max(0px,calc(50% - 190px))}
.lp-float-sent svg{width:26px;height:26px;flex:none}

/* 세 장면: 그림 하나 + 짧은 말 */
.lp-scenes{display:grid;gap:72px;padding:40px 0 80px}
.lp-scene{display:grid;justify-items:center;gap:26px;text-align:center}
.lp-scene h2{font-size:clamp(1.5rem,6.4vw,2.3rem);line-height:1.3;font-weight:800;letter-spacing:-.04em;margin:0 0 10px}
.lp-scene p{margin:0;color:var(--lp-sub);font-size:clamp(.98rem,3.9vw,1.1rem);line-height:1.6}
.lp-shot{margin:0;width:min(250px,64vw);aspect-ratio:9/19.5;border:9px solid var(--phone);border-radius:42px;overflow:hidden;background:var(--screen);box-shadow:var(--lp-shadow-lg)}
.lp-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

.lp-final h2{font-size:clamp(1.45rem,6vw,2.3rem);line-height:1.3;font-weight:800;letter-spacing:-.04em;margin:0 0 24px}
.lp-final-btn{border:0;font-family:inherit;font-size:1rem;cursor:pointer}
.lp-final{margin:16px 0 72px;padding:48px 24px;border-radius:28px;text-align:center;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#d54dff 0%,#bb00f0 45%,#8600ad 100%);box-shadow:var(--lp-shadow-lg)}
.lp-final h2{color:#fff;margin-bottom:12px}
.lp-final p{max-width:30em;margin:0 auto 26px;color:#f6e3ff;line-height:1.7}
.lp-final-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:99px;background:#fff;color:#8600ad!important;font-weight:800;text-decoration:none;box-shadow:0 8px 20px #3a0a5a40}

.lp-foot{border-top:1px solid var(--lp-line)}
.lp-foot-in{max-width:1120px;margin:0 auto;padding:26px 20px 40px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;color:var(--lp-mute);font-size:.84rem}
.lp-foot-brand{font-weight:800;color:var(--lp-ink)}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.lp-foot a{text-decoration:none}
.lp-foot a:hover{color:var(--lp-ink)}
.lp-theme{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.lp-theme svg{width:14px;height:14px}
.lp-theme:hover{color:var(--lp-ink)}

@media(max-width:380px){.lp-float{font-size:.74rem;padding:8px 10px 8px 8px}.lp-float-comment{left:-4px}.lp-float-reply{left:22px}.lp-float-sent{right:-4px}}
@media(min-width:720px){
 .lp-final{padding:64px 40px}
}
@media(min-width:960px){
 .lp-top-in{padding:16px 28px}
 main{padding:0 28px}
 .lp-hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding:56px 0 96px}
 .lp-scenes{gap:96px;padding:56px 0 110px}
 .lp-scene{grid-template-columns:1fr 1fr;align-items:center;justify-items:start;text-align:left;gap:56px;max-width:880px;margin:0 auto;width:100%}
 .lp-scene .lp-shot{justify-self:center;width:280px}
 .lp-scene:nth-child(even) .lp-scene-copy{order:2}
 .lp-phone{width:280px}
 .lp-float-comment{left:0}
 .lp-float-reply{left:28px}
 .lp-float-sent{right:0}
}
/* 다크: 검은 휴대폰 테두리가 배경에 묻히지 않게 윤곽선 */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .lp-phone{box-shadow:0 0 0 1px #352f37,var(--lp-shadow-lg)}}
:root[data-theme=dark] .lp-phone{box-shadow:0 0 0 1px #352f37,var(--lp-shadow-lg)}

/* 로그인 창: 휴대폰은 아래에서 올라오는 시트, 넓은 화면은 가운데 창 */
.lp-sheet{border:0;padding:0;background:var(--lp-card);color:var(--lp-ink);width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;box-shadow:var(--lp-shadow-lg)}
.lp-sheet::backdrop{background:#0008}
.lp-sheet[open]{animation:lp-up .26s cubic-bezier(.2,.8,.2,1)}
.lp-sheet .lp-start{position:relative;max-width:none;padding:30px 20px calc(24px + env(safe-area-inset-bottom))}
.lp-sheet h2{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.lp-sheet-sub{color:var(--lp-sub);margin:0 0 20px;line-height:1.6}
.lp-sheet-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--lp-sub);cursor:pointer}
.lp-sheet-close:hover{background:var(--lp-soft)}
.lp-sheet-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lp-beta{color:var(--lp-sub);font-size:.84rem;line-height:1.6;margin:16px 0 0;text-align:center}
@keyframes lp-up{from{transform:translateY(40px);opacity:0}}
@media(min-width:600px){
 .lp-sheet{width:420px;margin:auto;border-radius:24px}
 .lp-sheet .lp-start{padding:34px 28px 28px}
 .lp-sheet[open]{animation-name:lp-pop}
 @keyframes lp-pop{from{transform:scale(.96);opacity:0}}
}

/* 예시가 움직이며 반복: 댓글 → 안내 → 카드 → 보냈어요. 움직임 줄이기 설정이면 다 보이는 그림 하나. */
@media(prefers-reduced-motion:no-preference){
 .lp-float-comment{animation:lp-in-comment 8s infinite both}
 .lp-float-reply{animation:lp-in-reply 8s infinite both}
 .lp-sys{animation:lp-in-sys 8s infinite both}
 .lp-card{animation:lp-in-card 8s infinite both}
 .lp-float-sent{animation:lp-in-sent 8s infinite both}
}
@keyframes lp-in-comment{0%{opacity:0;transform:translateY(10px)}6%,86%{opacity:1;transform:none}93%,100%{opacity:0}}
@keyframes lp-in-reply{0%,8%{opacity:0;transform:translateY(8px)}14%,86%{opacity:1;transform:none}93%,100%{opacity:0}}
@keyframes lp-in-sys{0%,16%{opacity:0}22%,86%{opacity:1}93%,100%{opacity:0}}
@keyframes lp-in-card{0%,24%{opacity:0;transform:translateY(18px) scale(.97)}32%,86%{opacity:1;transform:none}93%,100%{opacity:0}}
@keyframes lp-in-sent{0%,38%{opacity:0;transform:scale(.85)}44%,86%{opacity:1;transform:none}93%,100%{opacity:0}}
/* 세 장면: 휴대폰 틀 안 화면이 보일 때 천천히 위아래로 스크롤(움직이는 그림으로 설명, 전문가 피드백). 움직임 줄이기면 멈춤 */
@media(prefers-reduced-motion:no-preference){.lp-shot.play img{animation:lp-pan 14s ease-in-out .6s infinite alternate}}
@keyframes lp-pan{0%,12%{object-position:50% 0%}88%,100%{object-position:50% 100%}}