/* Pastel purple theme */
:root{
  --bg1:#f7f2ff;
  --bg2:#efe6ff;
  --card:#ffffff;
  --text:#1f1633;
  --muted:#6a5a8c;
  --primary:#7c4dff;
  --primary2:#a78bfa;
  --border:#e7dcff;
  --shadow: 0 20px 50px rgba(31, 22, 51, 0.12);
  --radius: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, var(--bg2), transparent 60%),
              radial-gradient(1000px 700px at 80% 20%, #f3e8ff, transparent 55%),
              linear-gradient(135deg, var(--bg1), #ffffff);
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

.card{
  width:min(760px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 22px;
  text-align:center;
}

.badge{
  display:inline-block;
  margin:0 auto 10px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:-0.2px;
  color:#3b2466;
  background: linear-gradient(90deg, #efe6ff, #f5efff);
  border:1px solid var(--border);
}

.title{
  margin:8px 0 18px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height:1.2;
  letter-spacing:-0.6px;
}

.code{
  color:var(--primary);
}

.copyRow{
  display:flex;
  gap:12px;
  align-items:stretch;
  justify-content:center;
  flex-wrap:wrap;
  margin: 14px auto 10px;
}

.codeBox{
  min-width:min(460px, 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #fbf9ff, #f6f0ff);
}

.codeLabel{
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}

.codeValue{
  font-size:20px;
  font-weight:800;
  letter-spacing:0.3px;
}

.btn{
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(124, 77, 255, 0.35);
  background: linear-gradient(180deg, var(--primary2), var(--primary));
  color:white;
  font-weight:800;
  cursor:pointer;
  min-width:140px;
  transition: transform 0.08s ease, filter 0.12s ease;
}

.btn:hover{filter:brightness(1.03)}
.btn:active{transform: translateY(1px)}
.btn:focus{outline:3px solid rgba(124, 77, 255, 0.25); outline-offset:2px}

.hint{
  margin: 14px auto 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width: 60ch;
}

.toast{
  margin: 14px auto 0;
  min-height: 24px;
  font-weight:800;
  color:#2e1f4d;
}

.foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed var(--border);
}

.small{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}