:root{--cream:#FFF6EC;--card:#FFFDF9;--pink:#F7A8C0;--pinkd:#D9668F;--pinkl:#FDE3EB;--mint:#9ED9C8;--mintl:#E1F5EF;--mintd:#3E9C83;--purple:#B9A3E0;--purplel:#EEE7FA;--purpled:#7A5DB5;--ink:#4A3B47;--soft:#8C7A86;--line:#F1E3D6;--ok:#3E9C83;--bad:#D9668F;--r:20px;--sh:0 6px 20px rgba(140,90,110,.10)}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--cream);color:var(--ink);font:500 16px/1.5 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ko,[lang=ko]{font-family:"Gowun Dodum",Nunito,sans-serif;font-weight:400}
h1,h2,h3{font-family:Nunito;font-weight:900;margin:0 0 .3em;line-height:1.2}
h1{font-size:26px}h2{font-size:21px}h3{font-size:17px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.shell{min-height:100vh}
main{max-width:560px;margin:0 auto;padding:18px 16px 110px}
/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;background:rgba(255,253,249,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.nav .brand{display:none}
.nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 8px;border-radius:14px;min-width:60px;color:var(--soft)}
.nav button i{font-style:normal;font-size:20px;filter:grayscale(.6);opacity:.8}
.nav button b{font-size:11.5px;font-weight:800}
.nav button.on{color:var(--pinkd);background:var(--pinkl)}.nav button.on i{filter:none;opacity:1}
.nav em{position:absolute;top:2px;right:10px;background:var(--pinkd);color:#fff;font:800 10px/16px Nunito;min-width:16px;height:16px;border-radius:8px;padding:0 4px;font-style:normal}
@media(min-width:900px){
 .nav{top:0;right:auto;width:220px;flex-direction:column;justify-content:flex-start;gap:6px;border-top:0;border-right:1px solid var(--line);padding:24px 14px}
 .nav .brand{display:flex;align-items:center;gap:10px;margin:0 6px 18px;font:900 18px/1.1 Nunito;color:var(--ink)}
 .nav .brand img{width:46px;height:46px;border-radius:50%;background:var(--pinkl)}
 .nav .brand small{font-size:12px;color:var(--soft);font-weight:800}
 .nav button{flex-direction:row;gap:12px;min-width:0;padding:11px 14px;width:100%}
 .nav button b{font-size:15px}.nav em{top:12px;right:12px}
 main{margin-left:220px;max-width:none;padding:36px 48px 48px}
 .wrap{max-width:820px;margin:0 auto}
}
/* cards */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:14px;border:1px solid #fff}
.muted{color:var(--soft)}.small{font-size:13.5px}
.pill{display:inline-flex;align-items:center;gap:6px;font:800 12px Nunito;padding:4px 10px;border-radius:99px;background:var(--pinkl);color:var(--pinkd)}
.pill.mint{background:var(--mintl);color:var(--mintd)}.pill.purple{background:var(--purplel);color:var(--purpled)}.pill.gray{background:#F3ECE6;color:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:16px;background:var(--pinkd);color:#fff;font-weight:900;box-shadow:0 4px 0 #B84E76;transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #B84E76}
.btn.ghost{background:#fff;color:var(--pinkd);box-shadow:0 0 0 2px var(--pinkl) inset}
.btn.mint{background:var(--mintd);box-shadow:0 4px 0 #2D7461}.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:default}
/* home */
.hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FDE3EB,#FFF1E2 60%,#E1F5EF);border-radius:26px;padding:20px;margin-bottom:16px;overflow:hidden}
.hero img{width:118px;flex:none;margin:-6px -6px -20px 0}
.hero h1 span{color:var(--pinkd)}
.usage{display:flex;align-items:center;gap:10px}
.dots{display:flex;gap:5px}.dots i{width:12px;height:12px;border-radius:50%;background:var(--pink)}.dots i.used{background:#EADFD7}
.grid3{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.grid3{grid-template-columns:repeat(3,1fr)}}
.feature{display:flex;gap:12px;align-items:center;text-align:left;width:100%}
@media(min-width:620px){.feature{flex-direction:column;text-align:center}}
.feature .ic{font-size:28px;width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:16px;background:var(--pinkl)}
.family{display:flex;gap:10px;justify-content:space-between}
.member{flex:1;text-align:center;border-radius:18px;padding:10px 6px}
.member img{height:92px;object-fit:contain}
.member b{display:block;font-weight:900}.member span{font-size:12px;color:var(--soft);display:block;line-height:1.3}
.m-mochi{background:var(--pinkl)}.m-dodam{background:var(--mintl)}.m-mom{background:var(--purplel)}
.levels{display:grid;gap:8px}
.lv{display:flex;gap:10px;align-items:baseline}.lv b{min-width:58px}
/* converter */
.inputbox{display:flex;flex-direction:column;gap:10px}
textarea{width:100%;min-height:84px;resize:vertical;border:2px solid var(--line);border-radius:16px;padding:12px 14px;font:20px/1.4 "Gowun Dodum",sans-serif;background:#fff;color:var(--ink);outline:none}
textarea:focus{border-color:var(--pink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 12px;border-radius:99px;background:#fff;border:1.5px solid var(--line);font-family:"Gowun Dodum";font-size:15px}
.chip:hover{border-color:var(--pink)}
.res{border-radius:18px;padding:14px 14px 12px;margin-bottom:10px;position:relative}
.res .lab{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.res .lab b{font-weight:900}.res .lab span{font-size:12px;color:var(--soft)}
.res .say{font:24px/1.35 "Gowun Dodum";word-break:keep-all}
.res .who{font-size:13px;color:var(--soft);margin-top:4px}
.r1{background:var(--mintl)}.r2{background:var(--pinkl)}.r3{background:var(--purplel)}
.speak{font-size:18px;padding:4px 8px;border-radius:10px;background:rgba(255,255,255,.7)}
.why{background:#FFF8E8;border-radius:16px;padding:12px 14px;border:1px dashed #F0D9A8}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.notice{background:#FFF8E8;border-radius:14px;padding:10px 12px;font-size:14px}
/* chat */
.scen{display:flex;gap:14px;align-items:center;width:100%;text-align:left}
.scen img{width:64px;height:64px;border-radius:50%;flex:none}
.scen .t{flex:1}.scen .t .ko{font-size:15px;color:var(--soft)}
.chatwrap{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:88%}
.msg img{width:40px;height:40px;border-radius:50%;flex:none;background:#fff}
.bub{background:#fff;border-radius:18px 18px 18px 6px;padding:10px 13px;box-shadow:var(--sh)}
.bub .ko{font-size:19px;line-height:1.4;word-break:keep-all}.bub .en{font-size:13px;color:var(--soft)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}.msg.me .bub{background:var(--pink);color:#fff;border-radius:18px 18px 6px 18px}.msg.me .bub .en{color:#FFF0F5}
.msg.mom .bub{background:var(--purplel)}.msg.dodam .bub{background:var(--mintl)}.msg.mochi .bub{background:var(--pinkl)}
.fb{align-self:center;max-width:94%;font-size:14px;border-radius:14px;padding:9px 12px;display:flex;gap:8px}
.fb.ok{background:#E3F4EE;color:#2D6E5C}.fb.bad{background:#FFEFF4;color:#A3405F}
.fb .ko{font-size:16px}
.note{align-self:center;font-size:13px;color:var(--soft);background:#FFF8E8;padding:6px 12px;border-radius:99px;text-align:center}
.choices{display:grid;gap:8px;position:sticky;bottom:78px;background:linear-gradient(transparent,var(--cream) 14px);padding-top:16px}
@media(min-width:900px){.choices{bottom:0}}
.choice{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 14px;text-align:left}
.choice:hover{border-color:var(--pink)}.choice .ko{font-size:18px;display:block}.choice .en{font-size:12.5px;color:var(--soft)}
.chathead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.chathead img{width:48px;height:48px;border-radius:50%}
.back{font-weight:900;color:var(--pinkd);padding:6px 0}
.score{text-align:center}.score img{width:130px}
/* notebook */
.nitem{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.nitem:first-child{border-top:0}
.nitem .x{flex:1}.wrong{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1.5px}.right{font-size:19px}
.stage{display:flex;gap:4px;margin-top:4px}.stage i{width:22px;height:6px;border-radius:3px;background:#EADFD7}.stage i.on{background:var(--mintd)}
.del{color:var(--soft);font-size:18px;padding:2px 6px}
.flash{text-align:center;padding:26px 18px}
.flash .q{font:26px/1.4 "Gowun Dodum";margin:10px 0}
.flash .a{font:26px/1.4 "Gowun Dodum";color:var(--mintd)}
.empty{text-align:center;padding:24px}.empty img{width:120px}
/* pro */
.plans{display:grid;gap:12px}@media(min-width:620px){.plans{grid-template-columns:1fr 1fr}}
.plan{border:2px solid var(--line);border-radius:20px;padding:18px;background:#fff;position:relative}
.plan.best{border-color:var(--pinkd)}.plan .tag{position:absolute;top:-11px;right:14px;background:var(--pinkd);color:#fff;font:900 11px Nunito;padding:3px 10px;border-radius:99px}
.price{font:900 32px Nunito}.price small{font-size:14px;color:var(--soft)}
.strike{text-decoration:line-through;color:var(--soft);font-size:16px;margin-left:6px}
ul.ticks{list-style:none;padding:0;margin:8px 0 0}ul.ticks li{padding:3px 0 3px 26px;position:relative}ul.ticks li:before{content:"✓";position:absolute;left:4px;color:var(--mintd);font-weight:900}
input.code{flex:1;min-width:150px;border:2px solid var(--line);border-radius:14px;padding:11px 12px;font:800 15px Nunito;text-transform:uppercase;outline:none}
input.code:focus{border-color:var(--pink)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-weight:800;z-index:50;max-width:90vw;text-align:center}
@media(min-width:900px){.toast{bottom:30px;left:calc(50% + 110px)}}
.modalbg{position:fixed;inset:0;background:rgba(74,59,71,.35);z-index:40;display:grid;place-items:center;padding:20px}
.modal{background:var(--card);border-radius:24px;max-width:400px;width:100%;padding:22px;text-align:center}
.modal img{width:110px}
.ko,[lang=ko],.fb,.bub,.say,.notice,.why{word-break:keep-all;overflow-wrap:anywhere}
.toast{top:calc(14px + env(safe-area-inset-top));bottom:auto}
@media(min-width:900px){.toast{top:20px;bottom:auto}}
.spk{display:inline-flex;gap:4px;vertical-align:middle}.speak.slow{font-size:16px}
.microw{align-items:stretch;flex-wrap:nowrap}.mic{font-size:22px;min-width:48px;border-radius:14px;background:#fff;border:2px solid var(--pink,#F7A8C0);cursor:pointer}
.mic.on{background:#ff5d7a;color:#fff;animation:mp 1s infinite}@keyframes mp{50%{box-shadow:0 0 0 8px rgba(255,93,122,.25)}}.mictip{margin-top:6px}