:root {
  --sai-brand-start:#5650ff;
  --sai-brand-end:#af4bff;
  --sai-brand-deep:#4536c9;
  --sai-bg:#f5f7fd;
  --sai-surface:#ffffff;
  --sai-surface-soft:#f0eeff;
  --sai-ink:#171527;
  --sai-ink-sub:#66647a;
  --sai-border:#e7e5f1;
  --sai-success:#23845d;
  --sai-gradient:linear-gradient(135deg,var(--sai-brand-start),var(--sai-brand-end));
}

html,body { min-height:100%; }
body {
  margin:0 !important;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:96px 24px 40px;
  box-sizing:border-box;
  color:var(--sai-ink) !important;
  background:
    radial-gradient(circle at 12% 18%,rgba(175,75,255,.13),transparent 30%),
    radial-gradient(circle at 88% 82%,rgba(86,80,255,.14),transparent 32%),
    var(--sai-bg) !important;
  font-family:'Noto Sans KR','Pretendard','Segoe UI',sans-serif !important;
}

.card,body > main {
  width:min(620px,100%);
  max-width:620px !important;
  margin:auto;
  padding:40px 32px !important;
  box-sizing:border-box;
  text-align:center;
  background:rgba(255,255,255,.96);
  border:1px solid var(--sai-border);
  border-radius:24px;
  box-shadow:0 16px 40px rgba(69,54,201,.12);
}

h1 { color:var(--sai-ink) !important; font-size:30px; line-height:1.35 !important; letter-spacing:-.5px; }
p,.steps { color:var(--sai-ink-sub) !important; }
.lesson { color:var(--sai-brand-deep) !important; }

a.btn,#share,body > main > div > a {
  border:0 !important;
  color:#fff !important;
  background:var(--sai-gradient) !important;
  box-shadow:0 10px 24px rgba(86,80,255,.24);
}

a.btn,#share,#copy,a.back,body > main > div > a,#qrStop {
  min-height:44px;
  border-radius:14px !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

#copy,a.back {
  color:var(--sai-brand-deep) !important;
  background:#fff !important;
  border:2px solid #d6d1ff !important;
  box-shadow:0 2px 8px rgba(23,21,39,.08);
}

a.back {
  min-height:48px !important;
  line-height:48px !important;
  margin-top:18px;
  padding:0 18px;
  text-decoration:none !important;
}

.note {
  color:#4f4b68 !important;
  background:var(--sai-surface-soft) !important;
  border-color:#d6d1ff !important;
}

.qr { border-color:#fff !important; box-shadow:0 8px 24px rgba(69,54,201,.16) !important; }
#msg { color:var(--sai-success) !important; }
#qrNote { color:var(--sai-ink-sub) !important; }
#qrStop { color:var(--sai-brand-deep) !important; padding:0 8px; }

a:focus-visible,button:focus-visible {
  outline:3px solid var(--sai-brand-deep) !important;
  outline-offset:3px !important;
}
a:not(.back):hover,button:hover { transform:translateY(-2px); }
a:active,button:active { transform:translateY(0) scale(.985); }

@media (max-width:620px) {
  body { padding:88px 16px 24px; }
  .card,body > main { padding:32px 20px !important; border-radius:20px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}