:root{font-family:Pretendard,Noto Sans KR,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#0f172a;background-color:#f5f7fb}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#edf2ff,#f5f7fb 55%)}#root{min-height:100vh}.app-shell{max-width:1200px;margin:0 auto;padding:48px 20px 96px;display:flex;flex-direction:column;gap:48px}.hero{background:linear-gradient(135deg,#1d4ed8,#7c3aed);color:#fff;border-radius:32px;padding:40px;box-shadow:0 30px 80px #4338ca40}.hero h1{margin:12px 0 16px;font-size:clamp(28px,4vw,44px);line-height:1.25}.lead{font-size:17px;max-width:720px;line-height:1.6;color:#ffffffd9}.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}.btn.primary{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:999px;font-weight:600;background:#fff;color:#1d4ed8;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 15px 35px #0f172a40}.btn.primary:hover{transform:translateY(-2px)}.hint{font-size:14px;color:#ffffffe6}.eyebrow{font-size:13px;letter-spacing:.25em;text-transform:uppercase;margin:0;opacity:.85}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.demo-card{background:#fff;border-radius:28px;padding:28px;box-shadow:0 40px 80px #0f172a14;display:flex;flex-direction:column;gap:20px}.card-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.card-head h2{margin:4px 0 0}.subtitle{margin:0;color:#475569;font-size:14px;max-width:220px}.mobile-shell{position:relative;background:#05080f;border-radius:36px;padding:20px 20px 32px;min-height:560px;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 0 2px #ffffff0d}.mobile-notch{position:absolute;top:12px;left:50%;transform:translate(-50%);width:150px;height:18px;background:#ffffff17;border-radius:999px}.mobile-content{background:#f7f8fb;border-radius:28px;width:100%;height:100%;padding:28px;display:flex;flex-direction:column;gap:16px}.mobile-form label{display:flex;flex-direction:column;gap:10px;font-weight:600;color:#1f2937}.mobile-form virtual-input{border:1px solid #d0d7e3;padding:14px 16px;background:#fff}.mobile-form virtual-input .placeholder{color:#9ca3af!important}.mobile-help{margin:0;font-size:14px;line-height:1.5;color:#475569;padding:12px 16px;background:#e0e7ff;border-radius:16px}.mode-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.mode-button{border:1px solid #dbe4ff;border-radius:16px;padding:12px 16px;text-align:left;background:#f8f9ff;font-weight:600;color:#1e1b4b;display:flex;flex-direction:column;gap:6px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.mode-button small{font-weight:400;color:#475569}.mode-button.is-active{border-color:#7c3aed;background:linear-gradient(135deg,#7c3aed26,#3b82f626);box-shadow:0 20px 35px #6366f126;transform:translateY(-2px)}.mode-description{margin:0;font-size:15px;color:#475569}.mode-input{display:flex;flex-direction:column}.mode-input virtual-input{border:2px solid #d4d8f0;padding:18px 20px;border-radius:24px;background:#fbfcff}.guide{background:#0f172a;color:#fff;border-radius:32px;padding:32px;line-height:1.7;box-shadow:0 40px 80px #0f172a59}.guide h3{margin-top:0}.guide ol{padding-left:18px}.guide code{background:#ffffff26;padding:3px 6px;border-radius:6px}@media(max-width:640px){.hero{padding:28px}.demo-card{padding:22px}.mobile-shell{padding:14px;min-height:480px}.mobile-content{padding:18px}}