/* OX 팩토리 — 로그인 v2 · 🎨 디자인 #1 · 2026-10-25 밤 · 클래스 · 상태 모두 lg- (라이브 .coin · .on · .row 와 안 겹치게)
   대표님: 「로그인하라는 걸로 보기에 말도 너무 많고, 헷갈리고, 작았어」 → 그림(내 발명품) · 이름 · 「가입하면 🪙100」 · 동의 한 줄 · 큰 단추 둘 */
.lg{position:fixed;inset:0;z-index:65;display:flex;align-items:flex-end;justify-content:center;--lg-o:var(--o,#FF5A1F);--lg-x:var(--x,#1C1C1E);--lg-ink:var(--ink,#1D1F23);--lg-sub:var(--sub,#5B5F66)}
.lg-dim{position:absolute;inset:0;background:rgba(20,21,24,.5);opacity:0;transition:opacity .25s}
.lg.lg-on .lg-dim{opacity:1}
.lg-box{position:relative;width:100%;max-width:440px;max-height:94dvh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom));
 transform:translateY(100%);transition:transform .42s cubic-bezier(.2,1,.3,1);box-shadow:0 -10px 40px -18px rgba(0,0,0,.35)}
.lg.lg-on .lg-box{transform:none}
.lg.lg-out .lg-box{transform:translateY(100%);transition:transform .28s cubic-bezier(.5,0,.75,.3)}
.lg.lg-out .lg-dim{opacity:0}
.lg-grab{width:40px;height:5px;border-radius:5px;background:#E6E0D6;margin:0 auto 12px}
.lg-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F4F1EB;color:var(--lg-sub);font-size:18px;line-height:36px;cursor:pointer;z-index:2}

/* 맛보기 끝(벽) — 지금까지 그린 내 발명품을 크게 */
.lg-pic{position:relative;margin:4px 0 14px;border-radius:20px;overflow:hidden;background:#F3EFE8;aspect-ratio:4/3;max-height:34dvh;width:100%}
.lg-pic img{display:block;width:100%;height:100%;object-fit:cover}
.lg-name{font-size:25px;font-weight:850;letter-spacing:-.035em;line-height:1.25;color:var(--lg-ink);margin:0 2px 8px;word-break:keep-all}
.lg-was{display:block;font-size:14.5px;font-weight:700;color:#B3AC9F;margin:0 2px 2px;word-break:keep-all}
/* 처음부터 로그인(사람 단추) — 그림 대신 로고 */
.lg-mark{display:block;height:34px;width:auto;margin:22px auto 16px}
.lg-plain .lg-gift{text-align:center;margin:0 auto 20px;font-size:18px}

.lg-msg{margin:0 2px 10px;font-size:14.5px;font-weight:700;color:var(--lg-o)}.lg-plain .lg-msg{text-align:center}
.lg-gift{display:block;max-width:100%;margin:0 2px 18px;font-size:17px;line-height:1.5;font-weight:800;color:#8A5A00;word-break:keep-all}
.lg-gift i{display:inline-block;vertical-align:-5px;margin:0 3px 0 1px;width:22px;height:22px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#FFE38A,#F2B21B 60%,#D98E00);box-shadow:0 2px 6px -2px rgba(150,95,0,.5)}
.lg-gift b{font-weight:900;color:#B7791F}

/* 동의 한 줄 — 크게 눌리는 줄, 동그라미가 주황으로 찬다 */
.lg-agree{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border-radius:16px;background:#F7F4EE;cursor:pointer;margin:0 0 10px;transition:background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.lg-agree input{position:absolute;opacity:0;width:1px;height:1px}
.lg-agree .c{flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #CFC7BA;background:#fff;display:grid;place-items:center;transition:background .18s,box-shadow .18s}
.lg-agree .c svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:opacity .15s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.lg-agree span{font-size:16px;font-weight:700;color:var(--lg-ink);letter-spacing:-.01em}
.lg-agree.lg-ok{background:#FFF1EA}
.lg-agree.lg-ok .c{background:var(--lg-o);box-shadow:none}
.lg-agree.lg-ok .c svg{opacity:1;transform:none}
.lg-agree.lg-need{box-shadow:0 0 0 2px var(--lg-o);background:#FFF1EA;animation:lg-shake .42s}
.lg-agree.lg-need .c{box-shadow:inset 0 0 0 2.5px var(--lg-o)}
@keyframes lg-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.lg-agree:focus-within{box-shadow:0 0 0 2px rgba(255,90,31,.45)}

/* 큰 단추 둘 — 처음부터 진한 색(흐린 「안 눌리는」 단추 없음) */
.lg-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;border-radius:17px;font:inherit;font-size:18px;font-weight:800;letter-spacing:-.01em;text-decoration:none;cursor:pointer;margin:0 0 10px;border:0;transition:filter .15s,transform .1s}
.lg-go:active{filter:brightness(.95);transform:scale(.99)}
.lg-go svg{width:22px;height:22px}
.lg-k{background:#FEE500;color:#191919}
.lg-g{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1.5px #DDD6CB}
.lg-law{text-align:center;font-size:12.5px;color:#A39C91;margin:6px 0 2px}
.lg-law a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (min-width:861px){
 .lg{align-items:center}
 .lg-box{border-radius:28px;padding:18px 22px 22px;transform:translateY(24px) scale(.96);opacity:0;transition:transform .4s cubic-bezier(.2,1.2,.3,1),opacity .2s}
 .lg.lg-on .lg-box{transform:none;opacity:1}
 .lg.lg-out .lg-box{transform:scale(.96);opacity:0}
 .lg-grab{display:none}
 .lg-pic{max-height:300px}
}
@media (prefers-reduced-motion:reduce){.lg *,.lg{animation:none!important;transition-duration:.12s!important}.lg-box,.lg.lg-on .lg-box{transform:none!important}}