:root{
  --bg:#f6f8ff;--card:#fff;--ink:#1f2a44;--muted:#6b7694;--brand:#4f6df5;--brand2:#7c5cf0;
  --ok:#1fa971;--bad:#e5484d;--line:#dfe5f5;--warn:#f5a623;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#10141f;--card:#1a2030;--ink:#eef1fb;--muted:#9aa5c4;--line:#2a3350}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif;background:var(--bg);color:var(--ink);font-size:18px;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px}
.brand{background:none;border:0;font-weight:800;font-size:1.1rem;padding:8px}
nav{display:flex;flex-wrap:wrap;gap:6px}
nav button{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:10px 16px;min-height:44px}
nav button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
main{max-width:860px;margin:0 auto;padding:16px 16px 60px}
h1{font-size:1.6rem;margin:.4em 0}h2{font-size:1.25rem;margin:1em 0 .4em}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:12px 0;box-shadow:0 2px 8px rgba(30,40,90,.06)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.tile{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;min-height:110px}
.tile b{display:block;font-size:1.2rem}.tile span{color:var(--muted);font-size:.9rem}
.tile .em{font-size:2rem}
.btn{background:var(--brand);color:#fff;border:0;border-radius:14px;padding:14px 22px;min-height:52px;font-weight:700}
.btn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}
.btn:disabled{opacity:.45}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.muted{color:var(--muted);font-size:.9rem}
.pill{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.85rem;margin:2px}
.progress{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.q{font-size:1.35rem;font-weight:600;margin:6px 0 12px}
.big-emoji{font-size:4.5rem;text-align:center;margin:6px 0}
.opts{display:grid;gap:10px}
.opt{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px;text-align:left;min-height:56px;font-size:1.1rem}
.opt.right{border-color:var(--ok);background:rgba(31,169,113,.14)}
.opt.wrong{border-color:var(--bad);background:rgba(229,72,77,.12)}
.fb{margin-top:12px;padding:12px 14px;border-radius:12px;font-weight:600}
.fb.ok{background:rgba(31,169,113,.15);color:var(--ok)}
.fb.bad{background:rgba(229,72,77,.12);color:var(--bad)}
.display{font-size:2.2rem;text-align:center;border:2px solid var(--line);border-radius:14px;min-height:64px;padding:8px;margin:8px 0;letter-spacing:2px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:0 auto}
.pad button{background:var(--card);border:1px solid var(--line);border-radius:14px;min-height:60px;font-size:1.5rem;font-weight:700}
input[type=text],input[type=password],textarea{width:100%;font:inherit;padding:12px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
textarea{min-height:130px}
.mic{width:96px;height:96px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:2.4rem}
.mic.rec{background:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.bubble{padding:10px 14px;border-radius:16px;margin:8px 0;max-width:85%;white-space:pre-wrap}
.bubble.ai{background:var(--card);border:1px solid var(--line)}
.bubble.me{background:var(--brand);color:#fff;margin-left:auto}
.chatlog{min-height:240px;max-height:48vh;overflow:auto;padding:4px}
.timer{font-size:2rem;font-weight:800;text-align:center}
.model{background:rgba(79,109,245,.1);border-left:4px solid var(--brand);padding:10px 14px;border-radius:8px;margin:10px 0}
details{margin:8px 0}summary{cursor:pointer;font-weight:600;padding:6px 0}
.stars{font-size:2.6rem;text-align:center}
@media (max-width:560px){body{font-size:17px}.brand{width:100%}}

/* ===== 게임 요소 ===== */
.chip{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 14px 2px 6px;min-height:44px}
.chip .char{width:36px;height:36px}.chip .pts{font-weight:700}
.boost,.boostpill{color:#b45f00;background:#fff1d6;border-radius:999px;padding:2px 8px;font-weight:700}
.char{display:block}.char.big{width:150px;height:150px}.char.mid{width:96px;height:96px;margin:0 auto}.char.mini{width:46px;height:46px}
.hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.herochar{width:150px;flex:none}
.char.hop{animation:hop .6s ease}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-22px) scale(1.06)}60%{transform:translateY(0) scale(.96)}}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.qhead>div:first-child{flex:1}
.coin{position:fixed;z-index:50;font-size:1.6rem;pointer-events:none;animation:coinfly 1.1s ease-in forwards}
@keyframes coinfly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.4);opacity:.2}}
.confetti{position:fixed;top:-30px;z-index:49;font-size:1.6rem;pointer-events:none;animation:fall var(--dur) ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(540deg);opacity:.8}}
.floatpts{position:fixed;z-index:50;font-weight:800;font-size:1.6rem;color:var(--ok);transform:translateX(-50%);pointer-events:none;animation:floatup 1s ease-out forwards}
@keyframes floatup{to{transform:translate(-50%,-60px);opacity:0}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#1f2a44;color:#fff;padding:12px 20px;border-radius:999px;z-index:60;font-weight:600;animation:fadeout 2.6s forwards}
@keyframes fadeout{0%,80%{opacity:1}100%{opacity:0}}
.overlay{position:fixed;inset:0;background:rgba(10,15,40,.55);z-index:55;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--card);border-radius:24px;padding:28px;text-align:center;max-width:380px;width:100%}
.giftanim{font-size:5rem;animation:hop .9s infinite}
.opts-big{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.opts-big .opt{font-size:2rem;text-align:center;min-height:84px}
.opts-row{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}
.blk{font-size:2.2rem;text-align:center}.blk.used{opacity:.35}
.canvaswrap{margin:10px auto;display:flex;justify-content:center}
canvas#cv{touch-action:none;border:2px solid var(--line);border-radius:18px;background:#fff;max-width:100%}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
body.k{font-size:20px}body.k .opt{font-size:1.3rem}body.k .btn{min-height:60px}
@media (prefers-reduced-motion:reduce){.char.hop,.giftanim,.confetti,.coin{animation:none}}

.char.cool{animation:floaty 3.2s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.char.cool{animation:none}}

/* ===== 모션 (숨쉬기, 눈 깜빡임, 날개/꼬리/방망이) ===== */
.char{transform-origin:50% 100%;animation:breathe 3.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.025,1.04)}}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.flap{animation:flap 1.7s ease-in-out infinite}
@keyframes flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
.tail{animation:wag 1.9s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
.batswing{animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,70%,100%{transform:rotate(0)}85%{transform:rotate(-16deg)}}
.char.still,.char.still *{animation:none!important}
@media (prefers-reduced-motion:reduce){.char,.eyes,.flap,.tail,.batswing{animation:none!important}}

/* ===== 상점 / 배경 / 효과 ===== */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shopcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.shopcard .btn{min-height:46px;padding:8px 12px;font-size:.95rem}
.muted2{opacity:.8;font-size:.8rem}
.herochar,.bgprev{position:relative;border-radius:22px}
.bgprev{padding:4px 10px;width:100%;display:flex;justify-content:center}
.bg_space{background:radial-gradient(circle at 30% 20%,#2b3a8c,#0b1033)}
.bg_sea{background:linear-gradient(#7fd3ff,#1b7fc4 70%,#0e4f8a)}
.bg_forest{background:linear-gradient(#bff0a8,#4cae5a 75%,#2f7d3d)}
.bg_sunset{background:linear-gradient(#ffd27a,#ff8a5c 55%,#a24bb8)}
.fx_sparkle::before,.fx_sparkle::after,.fx_hearts::before,.fx_hearts::after{position:absolute;font-size:1.3rem;pointer-events:none}
.fx_sparkle::before{content:'✨';left:6px;top:8px;animation:twinkle 2s ease-in-out infinite}
.fx_sparkle::after{content:'✨';right:8px;bottom:14px;animation:twinkle 2s ease-in-out 1s infinite}
.fx_hearts::before{content:'💗';left:10px;bottom:10px;animation:floatheart 3s ease-in infinite}
.fx_hearts::after{content:'💗';right:10px;bottom:10px;animation:floatheart 3s ease-in 1.5s infinite}
@keyframes twinkle{50%{transform:scale(1.5) rotate(20deg);opacity:.5}}
@keyframes floatheart{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
.char.mid{width:96px;height:96px}

/* ===== Kangs링고 학습 길 / 순위 ===== */
.unithead{color:#fff;border-radius:16px;padding:12px 16px;margin:18px 0 6px}
.path{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.pnode{display:flex;align-items:center;gap:12px}
.pnode.l{margin-left:8%}.pnode.r{margin-left:32%}
.pbtn{width:72px;height:72px;border-radius:50%;border:0;background:var(--c,#4f6df5);color:#fff;font-size:1.8rem;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.25);flex:none}
.pbtn.done{background:#ffc83d;color:#7a4b00}
.pbtn.cur{animation:hop 1.4s infinite}
.pbtn:disabled{background:#8a90a8;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.plabel{line-height:1.3}
.cnword{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:6px 0;min-height:56px}
.cnword .zh{font-size:1.6rem;font-weight:800;min-width:90px}.cnword .py{color:var(--brand);min-width:110px}.cnword .ko{flex:1;color:var(--muted)}
.cnslots{font-size:1.8rem;letter-spacing:4px}
.opt.cn{display:flex;flex-direction:column;align-items:center;font-size:1.8rem;padding:10px 16px;min-width:84px}
.opt.cn small{font-size:.8rem;color:var(--muted)}
.rankrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rankrow.me{border:2px solid var(--brand)}
.rk{font-size:2rem;width:44px;text-align:center}.rkchar .char{width:72px;height:72px}
.famcard{background:linear-gradient(135deg,rgba(255,184,77,.15),rgba(255,107,214,.15))}
.weekdots{display:flex;gap:4px;margin-top:4px}
.wd{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--muted)}
.wd.hit{background:var(--ok);color:#fff;border-color:var(--ok)}
@media (max-width:560px){.pnode.l{margin-left:2%}.pnode.r{margin-left:18%}.cnword .py{min-width:80px}}