/* ===== Panex — design tokens ===== */
@font-face{
  font-family:'Pretendard';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('fonts/PretendardVariable.woff2') format('woff2-variations');
}
:root{
  --bg:#FBFCFF;
  --surface:#FFFFFF;
  --surface-2:#F7F7FB;
  --ink:#0E1626;
  --ink-2:#585B75;
  --ink-3:#9598AD;
  --line:#ECEDF4;
  --line-2:#E2E3EE;

  --primary:#6C5DD8;
  --primary-600:color-mix(in srgb,var(--primary) 88%,#000);
  --primary-700:color-mix(in srgb,var(--primary) 72%,#000);
  --primary-soft:color-mix(in srgb,var(--primary) 13%,#fff);
  --primary-softer:color-mix(in srgb,var(--primary) 6%,#fff);
  --blue:#3D5AFE;
  --violet-soft:color-mix(in srgb,var(--primary) 38%,#fff);

  --good:#22C55E;
  --good-soft:#E4F8EC;
  --warn:#F59E0B;
  --warn-soft:#FDF1DE;
  --bad:#F4587E;
  --bad-soft:#FCE7EC;
  --star:var(--primary);
  --star-soft:var(--primary-soft);

  --grad-cta:linear-gradient(135deg,color-mix(in srgb,var(--primary) 82%,#fff) 0%,var(--primary-700) 100%);
  --grad-head:linear-gradient(92deg,var(--blue) 0%,var(--primary) 60%);
  --grad-temp:linear-gradient(90deg,#FFB23E 0%,#F4587E 45%,#6C5DD8 100%);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-card:0 2px 8px rgba(20,18,60,.04), 0 12px 30px rgba(20,18,60,.05);
  --sh-pop:0 8px 24px rgba(60,50,140,.16), 0 2px 6px rgba(60,50,140,.10);
  --sh-phone:0 30px 80px rgba(50,40,120,.22), 0 8px 24px rgba(50,40,120,.12);

  --maxw:1240px;
  --app-w:430px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
html{height:100%}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.01em;
}
#root{min-height:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:inherit}
img{display:block;max-width:100%}
::selection{background:#DAD4FA}

/* utility */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.spread{justify-content:space-between}
.center{justify-content:center;align-items:center}
.grad-text{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;
  border-radius:var(--r-pill);transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(20,18,60,.10)}
.btn-primary:hover{background:var(--primary-600);box-shadow:0 4px 12px rgba(20,18,60,.14)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--violet-soft);background:var(--primary-softer)}
.btn-soft{background:var(--primary-soft);color:var(--primary-700)}
.btn-soft:hover{background:#E6E1F8}
.btn-lg{height:54px;padding:0 26px;font-size:16.5px}
.btn-md{height:50px;padding:0 22px;font-size:16px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}

/* pills / badges */
.badge{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;background:var(--primary-soft);color:var(--primary-700)}
.tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;font-size:12.5px;font-weight:700}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card)}

/* scrollbar (app views) */
.noscroll::-webkit-scrollbar{width:0;height:0}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.animBlink{transform-origin:center;animation:blink 5.5s infinite}
.floaty{animation:floaty 4s ease-in-out infinite}