:root{
  --bg:#f6f7ff;--ink:#1f2544;--muted:#7c84a6;--purple:#6c63ff;--purple2:#9a83ff;
  --mint:#67e8c8;--card:#fff;--line:#e6e8f7;--shadow:0 18px 45px rgba(85,78,170,.15)
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Inter,"Noto Sans KR",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
button,textarea{font:inherit}.hidden{display:none!important}
.welcome-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;background:linear-gradient(180deg,#f3efff 0%,#eefaff 100%)}
.welcome-glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.55}.glow-a{width:340px;height:340px;background:#b7a7ff;top:-120px;right:-110px}.glow-b{width:280px;height:280px;background:#9bf1dd;bottom:-120px;left:-80px}
.welcome-card{width:min(440px,100%);text-align:center;position:relative;z-index:2}
.welcome-badge{display:inline-block;padding:8px 13px;border-radius:999px;background:#fff;color:var(--purple);font-weight:900;font-size:12px;letter-spacing:.08em;box-shadow:var(--shadow)}
.welcome-card h1{font-size:38px;margin:20px 0 10px}.welcome-card p{color:var(--muted);line-height:1.7;font-size:16px}.welcome-card small{display:block;color:#9298b3;margin-top:15px}
.character-stage{width:180px;height:180px;margin:18px auto;display:grid;place-items:center;position:relative}
.character-ring{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 43%,#c8c2ff 44% 47%,transparent 48%);animation:pulse 2.4s ease-in-out infinite}
.bot-character{width:128px;height:128px;object-fit:cover;border-radius:30px;position:relative;z-index:2;box-shadow:0 14px 34px rgba(63,58,140,.25);animation:float 2.8s ease-in-out infinite}
.intro-stage{width:210px;height:210px}.intro-character{width:145px;height:145px}
.spark{position:absolute;color:var(--purple);font-size:20px;animation:twinkle 1.6s infinite}.s1{left:5px;top:35px}.s2{right:2px;top:60px;animation-delay:.4s}.s3{right:36px;bottom:12px;animation-delay:.8s}
.big-start{width:100%;border:0;border-radius:18px;padding:16px;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;font-weight:900;font-size:17px;box-shadow:0 15px 35px rgba(108,99,255,.3)}
.install-btn{margin-top:10px;width:100%;border:1px solid #d5d8ef;border-radius:16px;padding:13px;background:#fff;color:var(--ink);font-weight:800}
.app{max-width:760px;margin:0 auto;min-height:100dvh;padding-bottom:84px;background:linear-gradient(#f7f8ff,#fff)}
.app-header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;background:rgba(247,248,255,.93);backdrop-filter:blur(14px);z-index:20;border-bottom:1px solid rgba(230,232,247,.7)}
.brand-mini{display:flex;align-items:center;gap:10px}.brand-dot{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--purple),#9d85ff);color:#fff;font-weight:900}.brand-mini b,.brand-mini small{display:block}.brand-mini small{font-size:11px;color:var(--muted);margin-top:2px}
.header-btn{border:0;border-radius:12px;background:#ecebff;color:var(--purple);padding:9px 12px;font-weight:800}
.mobile-main{padding:16px}.view{display:none}.view.active{display:block}
.hero-bot{text-align:center;padding:8px 0 12px}.hero-bot .character-stage{width:160px;height:160px;margin:2px auto}.hero-bot .bot-character{width:116px;height:116px}
.bot-stage-talking .bot-character{animation:talk .45s ease-in-out infinite alternate}
.bot-greeting{display:inline-block;background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:16px;box-shadow:var(--shadow);font-weight:800}
.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 15px}.quick-row button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px 5px;font-size:12px;font-weight:800;color:var(--ink)}
.messages{min-height:240px;max-height:38dvh;overflow:auto;padding:6px 2px}.message{display:flex;margin:10px 0}.message.user{justify-content:flex-end}.bubble{max-width:84%;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);line-height:1.55;font-size:14px;box-shadow:0 8px 18px rgba(66,61,130,.06)}.message.user .bubble{background:var(--purple);color:#fff;border-color:transparent}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;position:sticky;bottom:76px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 25%);padding-top:12px}.composer textarea{resize:none;max-height:120px;border:1px solid var(--line);border-radius:18px;padding:13px 14px;outline:none;background:#fff}.send-btn{width:48px;border:0;border-radius:16px;background:var(--purple);color:#fff;font-size:20px}
.page-title{padding:8px 4px 14px}.page-title p{margin:0;color:var(--purple);font-size:12px;font-weight:900}.page-title h2{margin:5px 0 0;font-size:27px}
.create-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.create-card{min-height:150px;border:1px solid var(--line);border-radius:22px;background:#fff;text-align:left;padding:18px;box-shadow:0 10px 24px rgba(67,62,140,.08);color:var(--ink)}.create-card span{font-size:32px}.create-card b,.create-card small{display:block}.create-card b{font-size:17px;margin:18px 0 5px}.create-card small{color:var(--muted);line-height:1.4}.image-card{grid-column:1/-1;display:flex;align-items:center;gap:16px;min-height:auto}.image-card img{width:92px;height:92px;object-fit:cover;border-radius:18px}.image-card b{margin:0 0 5px}
.world-grid,.memory-grid{display:grid;gap:12px}.world-card,.memory-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:17px;box-shadow:0 8px 20px rgba(57,54,115,.07)}.world-card b,.memory-card b{display:block;font-size:17px;margin-bottom:6px}.world-card span,.memory-card span{color:var(--muted);font-size:13px;line-height:1.5}
.lab-banner{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#2c275f,#6c63ff);color:#fff;border-radius:22px;padding:14px;margin-bottom:14px}.lab-banner img{width:86px;height:86px;object-fit:cover;border-radius:18px}.lab-banner b,.lab-banner span{display:block}.lab-banner span{font-size:12px;opacity:.8;margin-top:6px;line-height:1.5}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,100%);height:74px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);z-index:30;padding-bottom:max(4px,env(safe-area-inset-bottom))}
.tab{border:0;background:transparent;color:#969cb8;font-size:11px;font-weight:800}.tab span{display:block;font-size:20px;margin-bottom:3px}.tab.active{color:var(--purple)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes pulse{0%,100%{transform:scale(.98);opacity:.85}50%{transform:scale(1.06);opacity:1}}@keyframes twinkle{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1.2);opacity:1}}@keyframes talk{from{transform:translateY(-2px) scale(1)}to{transform:translateY(3px) scale(1.03)}}
@media(max-width:430px){.quick-row{grid-template-columns:repeat(2,1fr)}.create-grid{grid-template-columns:1fr}.image-card{grid-column:auto}.welcome-card h1{font-size:34px}}