/* ==========================================================================
   MIRACLE AD AI — 로그인(관리 앱 입구) · 판매본 리뉴얼(진우 판) 꼴 · 10-27 2차
   진우 판 토큰(검정 #050505 · 흰 강조 · 빨강은 경고)만 옮겼다 — style.css 통째는 싣지 않는다(커서·스크롤 연출이 로그인엔 필요 없다).
   ⛔글꼴은 자체 제공 «Pretendard Variable»(fonts.css) — 브라우저 기본 글꼴로 떨어지지 않게 첫 이름을 로드한 이름 그대로.
   ========================================================================== */
:root {
  --bg: #050505; --surface: #101010; --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .22);
  --text: #ffffff; --text-2: #a9a9a9; --text-3: #8c8c8c; --danger: #ff3b2f; --warn: #ffb35c;
  --font: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Space Grotesk', 'Pretendard Variable', Pretendard, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body.lg-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 88px 16px 40px; position: relative; overflow-x: hidden;
  background: var(--bg); color: var(--text); font-family: var(--font); word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.lg-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%);
}
.lg-glow { position: fixed; left: 50%; top: 38%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 38%, transparent 66%); }
.lg-home { position: fixed; left: max(16px, env(safe-area-inset-left)); top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color .3s, border-color .3s; }
.lg-home:hover, .lg-home:focus-visible { color: var(--text); border-color: var(--line-2); }

.card {
  position: relative; z-index: 1; width: min(400px, 100%); padding: 40px 34px 30px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 22, 22, .86), rgba(10, 10, 10, .82)); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: rise .7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lg-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.lg-logo b { font-weight: 700; }
.lg-mark { width: 28px; height: 28px; color: var(--text); }
.brand { margin: 22px 0 6px; font-size: 30px; font-weight: 750; letter-spacing: -.04em; line-height: 1.2; }
.sub { margin-bottom: 24px; color: var(--text-2); font-size: 14px; }
.lg-lab { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
input {
  display: block; width: 100%; height: 52px; margin-bottom: 14px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); color: var(--text); font: inherit; font-size: 16px;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
input::placeholder { color: var(--text-3); }
input:focus { outline: none; border-color: #fff; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
button {
  width: 100%; height: 54px; margin-top: 4px; border: 0; border-radius: 999px; background: #fff; color: #000;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .3s;
}
button:hover { box-shadow: 0 12px 30px rgba(255, 255, 255, .16); }
button:active { transform: scale(.985); }
button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.err { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6;
  background: rgba(255, 59, 47, .1); border: 1px solid rgba(255, 59, 47, .45); color: #ffb3a8; }
.err--warn { background: rgba(255, 179, 92, .08); border-color: rgba(255, 179, 92, .45); color: #ffd9a8; }
.foot { margin-top: 18px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.lg-cancel { display: block; margin-top: 12px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.lg-links { display: flex; justify-content: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--text-3); }
.lg-links a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.lg-links a:hover { color: var(--text); }
@media (max-width: 420px) { .card { padding: 32px 22px 26px; border-radius: 22px; } .brand { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } * { transition: none !important; } }