@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;600;700&family=Outfit:wght@300;400;600;700&display=swap');
:root {
  --bg:#0f1117;--surface:#1a1d27;--surface2:#22263a;
  --accent:#7c6af7;--accent2:#56c8ff;--red:#ef476f;
  --text:#e8eaf6;--muted:#7880a0;--border:#2d3154;--radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans KR','Outfit',sans-serif;min-height:100vh;}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;
  background:linear-gradient(135deg,#1a1d27,#12152a);border-bottom:1px solid var(--border);}
.logo{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.header-user{display:flex;align-items:center;gap:12px;}
.header-user span{font-size:0.85rem;color:var(--muted);}

.btn{padding:12px 26px;border-radius:50px;border:none;font-family:inherit;
  font-size:0.92rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
.btn-primary:hover{opacity:0.9;transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,106,247,0.3);}
.btn-secondary{background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
.btn-secondary:hover{color:var(--text);border-color:var(--accent);}

.name-input{width:100%;padding:12px 18px;border-radius:50px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-size:1rem;font-family:inherit;
  margin:14px 0 20px;outline:none;text-align:center;display:block;}
.name-input:focus{border-color:var(--accent);}

/* Auth screen */
#auth-screen{min-height:calc(100vh - 0px);display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:40px;text-align:center;max-width:360px;width:100%;}
.auth-box h2{font-size:1.4rem;margin-bottom:18px;}
.auth-switch{font-size:0.85rem;color:var(--muted);margin-top:16px;}
.auth-switch a{color:var(--accent2);text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.auth-error{color:var(--red);font-size:0.85rem;margin-top:14px;min-height:1.2em;}
.field-hint{font-size:0.75rem;color:var(--muted);text-align:left;margin:-14px 0 14px;}

/* Feature picker */
main{text-align:center;padding:60px 20px;max-width:900px;margin:0 auto;}
h1{font-size:2.4rem;font-weight:700;font-family:'Outfit',sans-serif;margin-bottom:12px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
p.subtitle{color:var(--muted);font-size:1.05rem;margin-bottom:44px;}

.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (min-width:700px){
  .feature-grid{grid-template-columns:repeat(5,1fr);}
}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 20px;cursor:pointer;transition:all 0.3s;}
.feature-card:hover{border-color:var(--accent);transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(124,106,247,0.2);}
.feature-icon{font-size:2.2rem;margin-bottom:10px;}
.feature-card h3{font-size:1rem;margin-bottom:6px;}
.feature-card span{font-size:0.78rem;color:var(--muted);}

.feature-toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  padding:12px 26px;border-radius:50px;font-size:0.9rem;
  animation:toastIn 0.3s ease, toastOut 0.4s ease 2.2s forwards;
  z-index:1000;pointer-events:none;white-space:nowrap;}
@keyframes toastIn{from{opacity:0;bottom:20px;}to{opacity:1;bottom:36px;}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;}}