@font-face { font-family: "Pretendard Variable"; src: url("/fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: #fff; font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all;
  background: radial-gradient(900px 520px at 90% -10%, rgba(124,58,237,.5), transparent 60%), radial-gradient(760px 460px at -10% 110%, rgba(79,70,229,.5), transparent 60%), linear-gradient(135deg, #0b1020, #111a35 55%, #171236); }
.landing { position: relative; display: grid; place-items: center; min-height: 100vh; padding: max(24px, env(safe-area-inset-top)) 20px 32px; overflow: hidden; }
.glow { position: absolute; inset: 0; 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: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); pointer-events: none; }
.card { position: relative; width: min(560px, 100%); padding: 40px 36px 32px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: rgba(255,255,255,.06); box-shadow: 0 30px 80px rgba(0,0,0,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 14px; }
.mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 8px 24px rgba(99,102,241,.45); font-size: 24px; font-weight: 800; }
.brand b { display: block; font-size: 18px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
h1 { margin: 36px 0 0; font-size: clamp(36px, 8vw, 52px); line-height: 1.14; font-weight: 800; letter-spacing: -.035em; }
h1 em { font-style: normal; background: linear-gradient(90deg, #a5b4fc, #c4b5fd 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 18px 0 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; }
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-top: 30px; border-radius: 16px; background: #fff; color: #0f172a; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .15s, box-shadow .15s; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,0,0,.32); }
.cta:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.cta svg { width: 22px; height: 22px; }
.notice { display: flex; align-items: center; gap: 10px; margin: 26px 0 -8px; padding: 12px 14px; border: 1px solid rgba(52,211,153,.35); border-radius: 14px; background: rgba(16,185,129,.12); color: #d1fae5; font-size: 14px; font-weight: 600; }
.notice::before { content: "✓"; display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: #10b981; color: #fff; font-size: 13px; font-weight: 800; }
.note { margin: 12px 0 0; color: rgba(255,255,255,.5); font-size: 13px; text-align: center; }
.features { display: grid; gap: 10px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; }
.features li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.features b { font-weight: 700; }
.features span { color: rgba(255,255,255,.6); text-align: right; }
footer { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); color: rgba(255,255,255,.4); font-size: 13px; font-weight: 600; letter-spacing: .03em; }
@media (max-width: 480px) { .card { padding: 30px 22px 26px; border-radius: 24px; } .features li { flex-direction: column; gap: 2px; } .features span { text-align: left; } }