/* ============================================================
   noneplace — shared design tokens & chrome
   Brand truth: frontend/src/lib/colors.ts + welcome.png
   ============================================================ */
:root{
  --bg:#ECF3FB;            /* page — white w/ a touch of sky */
  --bg2:#E3EEFB;
  --surface:#FFFFFF;
  --surface-alt:#F4F8FD;
  --border:#DCE7F4;
  --border-strong:#C7D7EA;
  --text:#1B2433;          /* dark navy */
  --sub:#6A7686;
  --faint:#9AA7B6;
  --accent:#7CC6FF;        /* sky blue — brand point */
  --accent-deep:#4FA8F0;
  --accent-text:#08243A;
  --pink:#FF4D8D;          /* CTA pink */
  --peach:#FFB59E;         /* logo heart peach */
  --mint:#36C9A0;          /* attending */
  --purple:#8E92FF;        /* interested */
  --red:#FF6B6B;           /* can't go */
  --orange:#FF9F43;        /* notify */
  --link:#4FA8F0;
  --pill-bg:rgba(255,255,255,.66);
  --pill-border:rgba(255,255,255,.85);
  --hover:rgba(124,198,255,.12);
  --radius-pill:800px;
  --font-body:'Noto Sans KR','Outfit',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --font-brand:'Jua',sans-serif;
  --shadow-card:0 1px 2px rgba(20,40,70,.04), 0 14px 36px -22px rgba(20,40,70,.22);
  --shadow-soft:0 8px 28px -12px rgba(80,140,220,.32);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px;
  min-height:100vh; -webkit-font-smoothing:antialiased; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,[contenteditable]{ font-family:inherit; outline:none; }
a{ color:inherit; text-decoration:none; }
::-webkit-scrollbar{ width:10px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }

/* ── soft ambient gradient field (fixed, behind everything) ── */
.np-ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.np-ambient .orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.np-ambient .o1{ width:520px; height:520px; left:-120px; top:-140px; background:radial-gradient(circle,#A6D2FF,transparent 70%); }
.np-ambient .o2{ width:460px; height:460px; right:-120px; top:40px; background:radial-gradient(circle,#FFC9DE,transparent 70%); }
.np-ambient .o3{ width:500px; height:500px; left:18%; bottom:-200px; background:radial-gradient(circle,#CBD6FF,transparent 70%); }
.np-ambient .o4{ width:360px; height:360px; right:14%; bottom:-120px; background:radial-gradient(circle,#CFF3E4,transparent 70%); }
.np-spark{ position:fixed; color:rgba(80,120,200,.22); pointer-events:none; z-index:0; }

/* ── top nav ── */
.np-nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:11px 22px; background:rgba(236,243,251,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(220,231,244,.7); }
.np-logo{ display:flex; align-items:center; gap:9px; }
.np-logo img{ width:30px; height:30px; border-radius:9px; box-shadow:0 2px 8px rgba(80,140,220,.28); }
.np-logo .wm{ font-family:var(--font-brand); font-size:20px; color:var(--accent-deep); letter-spacing:-.01em; }
.np-nav-right{ display:flex; align-items:center; gap:4px; }
.np-nav-btn{ padding:8px 14px; border-radius:var(--radius-pill); border:none; background:transparent;
  font-size:14px; font-weight:600; color:var(--text); transition:background .15s; }
.np-nav-btn:hover{ background:var(--hover); }
.np-nav-btn.active{ color:var(--accent-deep); }
.np-nav-btn.login{ background:var(--text); color:#fff; font-weight:700; }
.np-nav-btn.login:hover{ background:#2a3650; }
@media (max-width:560px){
  .np-nav{ padding:10px 14px; }
  .np-logo .wm{ font-size:18px; }
  .np-free{ font-size:0; gap:0; padding:7px; }
  .np-free .dot{ box-shadow:0 0 0 3px rgba(54,201,160,.25); }
  .np-nav-btn{ padding:7px 9px; font-size:13px; }
}
.np-free{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill);
  background:rgba(54,201,160,.14); border:1px solid rgba(54,201,160,.3); color:#1d9c79;
  font-size:12px; font-weight:800; white-space:nowrap; }
.np-free .dot{ width:7px; height:7px; border-radius:50%; background:#36C9A0; box-shadow:0 0 0 3px rgba(54,201,160,.25); }

/* ── shared pill button ── */
.np-pill{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border); background:var(--pill-bg); font-size:13px; font-weight:600;
  color:var(--text); transition:all .15s; white-space:nowrap; }
.np-pill:hover{ background:#fff; border-color:var(--border-strong); }
.np-pill.on{ background:var(--accent-deep); color:#fff; border-color:var(--accent-deep); }

/* ── toast ── */
.np-toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(14px);
  background:var(--text); color:#fff; padding:13px 22px; border-radius:14px; font-size:13.5px; font-weight:700;
  box-shadow:0 14px 38px rgba(20,40,70,.34); opacity:0; pointer-events:none; z-index:999;
  transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; }
.np-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@keyframes npFloatUp{ 0%{transform:translateY(0) rotate(0);opacity:0} 12%{opacity:.95} 88%{opacity:.95}
  100%{transform:translateY(var(--fy,-120px)) rotate(var(--fr,160deg));opacity:0} }
@keyframes npPop{ from{opacity:0;transform:scale(.9) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes npBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes npFade{ from{opacity:0} to{opacity:1} }