:root{--mint: #4eba97;--mint-soft: #d6f5ec;--mint-deep: #002117;--on-soft: #002117;--honey: #f4b042;--coral: #ff6b6b;--coral-soft: #ffe5e5;--canvas: #f8f9fa;--surface: #ffffff;--variant: #eaeff0;--text: #1a1c1e;--text-soft: #44474e;--radius: 24px;--pet-top: #fff3ea;--pet-bottom: #ffe8dd;--warn-bg: #fdf0d9;--warn-text: #8a5a00;--mark: #fff3a3;--danger: #b3261e;--heat0: #eceff0;--heat1: #d6f5ec;--heat2: #a9dfca;--heat3: #6fbb9f;--heat4: #337c5e;--scrim: 255, 255, 255;--lv1: #2f8f72;--lv2: #2b8aa8;--lv3: #4f63c4;--lv4: #8250be;--lv5: #b64f5c;color-scheme:light}:root[data-theme=dark]{--mint: #6fd3b1;--mint-soft: #1f4a3d;--on-soft: #d6f5ec;--coral-soft: #5a2a2a;--canvas: #121416;--surface: #1e2123;--variant: #2b3033;--text: #e3e3e3;--text-soft: #c4c7ce;--pet-top: #2a2f32;--pet-bottom: #232729;--warn-bg: #4a3a1a;--warn-text: #f4c870;--mark: rgba(255, 243, 163, .32);--danger: #ff8a8a;--heat0: #2b3033;--heat1: #1f4a3d;--heat2: #2e7a62;--heat3: #4eba97;--heat4: #8ee5c8;--scrim: 30, 33, 35;--lv1: #6fd3b1;--lv2: #6cc4e0;--lv3: #9daef0;--lv4: #c39cf0;--lv5: #f09aa6;color-scheme:dark}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--mint: #6fd3b1;--mint-soft: #1f4a3d;--on-soft: #d6f5ec;--coral-soft: #5a2a2a;--canvas: #121416;--surface: #1e2123;--variant: #2b3033;--text: #e3e3e3;--text-soft: #c4c7ce;--pet-top: #2a2f32;--pet-bottom: #232729;--warn-bg: #4a3a1a;--warn-text: #f4c870;--mark: rgba(255, 243, 163, .32);--danger: #ff8a8a;--heat0: #2b3033;--heat1: #1f4a3d;--heat2: #2e7a62;--heat3: #4eba97;--heat4: #8ee5c8;--scrim: 30, 33, 35;--lv1: #6fd3b1;--lv2: #6cc4e0;--lv3: #9daef0;--lv4: #c39cf0;--lv5: #f09aa6;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;background:var(--canvas);color:var(--text);font-family:Pretendard,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;-webkit-text-size-adjust:100%}#root{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}.screen{padding:16px 16px 96px}.screen.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:80vh;gap:12px}h1,h2,h3{margin:0}.brand{color:var(--mint);font-size:26px;padding:8px 4px 12px}.muted{color:var(--text-soft)}.muted-on{color:#ffffffe6}.small{font-size:13px}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}.primary,.white,.danger{border:0;border-radius:999px;padding:14px 22px;font-weight:700;font-size:16px}.primary{background:var(--mint);color:#fff}.link-btn{display:inline-block;text-decoration:none}.white{background:#fff;color:var(--mint);width:100%;margin-top:12px}.danger{background:var(--coral-soft);color:var(--danger)}.link{background:none;border:0;color:var(--mint);font-weight:600;padding:8px}.icon-btn{background:none;border:0;font-size:22px;padding:8px;color:var(--text)}.pet-card,.panel,.stat,.level-pick,.get-app,.card{background:var(--surface);border-radius:var(--radius);box-shadow:0 1px 4px #00000014}.pet-card{padding:16px;text-align:center;margin-bottom:14px;background:linear-gradient(180deg,var(--pet-top) 0%,var(--pet-bottom) 100%)}.bubble{display:table;margin-left:auto;margin-right:auto;background:var(--mint-soft);padding:8px 16px;border-radius:999px;font-weight:600;margin-bottom:16px}.pet-btn{display:block;margin:0 auto;background:none;border:0;padding:0}.pet{width:180px;height:180px;object-fit:contain}.pet.bounce{animation:bounce .6s}@keyframes bounce{50%{transform:translateY(-14px)}}.pet-name{font-size:20px;font-weight:700}.lv{margin:6px 0 4px;font-weight:600}.bar{height:12px;background:var(--variant);border-radius:999px;position:relative}.bar.thin{height:8px;margin:0 auto 4px;max-width:280px}.bar .fill{height:100%;background:var(--mint);border-radius:999px;transition:width .3s}.pet-mark{position:absolute;top:-16px;width:40px;height:40px;transform:translate(-50%);transition:left .3s}.round-card{background:var(--mint);color:#fff;border-radius:var(--radius);padding:20px;margin-bottom:14px}.round-card h2{font-size:22px;margin-bottom:6px}.me{font-weight:600}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.stat{padding:14px 8px;text-align:center}.stat .num{font-size:22px;font-weight:800}.level-pick,.get-app,.panel{padding:16px;margin-bottom:14px}.levels{display:flex;gap:8px;margin:8px 0}.level-btn,.species-btn{flex:1;border:2px solid var(--variant);background:var(--surface);border-radius:16px;padding:10px;font-weight:600}.level-btn.on,.species-btn.on{border-color:var(--mint);background:var(--mint-soft)}.onboarding{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:stretch}.onboarding .logo{width:96px;height:96px;margin:8px auto 0;border-radius:24px}.species{display:flex;gap:10px}.species-btn img{display:block;width:100%;max-width:130px;margin:0 auto 6px}.field{display:flex;flex-direction:column;gap:4px;text-align:left;font-weight:600}.field input,.typing{font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--variant);background:var(--surface)}.typing{width:100%;margin:16px 0 8px;font-size:18px}.typing:focus,.field input:focus{outline:none;border-color:var(--mint)}.study{padding-bottom:24px}.progress-row{display:flex;align-items:center;gap:8px;margin:4px 0 24px}.progress-row .bar{flex:1}.card{padding:22px 18px;text-align:center}.tag{display:inline-block;background:var(--mint-soft);color:var(--on-soft);border-radius:999px;padding:4px 12px;font-size:13px;margin-bottom:14px}.tag.new{background:var(--warn-bg);color:var(--warn-text)}.term{font-size:38px;line-height:1.2;margin:4px 0;word-break:keep-all}.term.ko{font-size:28px}.pos{color:var(--coral);font-weight:600}.speaker{border:0;background:var(--mint-soft);border-radius:999px;width:44px;height:44px;font-size:20px;margin:8px 0}.sense{margin:10px 0}.sense .meaning{font-size:22px;font-weight:700}.ex{margin-top:6px}.ex mark{background:var(--mark);font-weight:700;padding:0 2px}.exko{color:var(--text-soft);font-size:14px}.sentence{font-size:20px;line-height:1.5;margin:8px 0}.choices{display:flex;flex-direction:column;gap:10px;margin-top:18px}.choice{border:2px solid var(--variant);background:var(--surface);border-radius:18px;padding:14px;font-size:17px;font-weight:600}.choice.ok{border-color:var(--mint);background:var(--mint-soft)}.choice.no{border-color:var(--coral);background:var(--coral-soft)}.slots{display:flex;gap:6px;justify-content:center;margin:14px 0;flex-wrap:wrap}.slot{width:36px;height:44px;border-bottom:3px solid var(--mint);font-size:26px;font-weight:700;line-height:44px}.tiles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tile{width:46px;height:52px;border:2px solid var(--mint);background:var(--surface);border-radius:12px;font-size:22px;font-weight:700}.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.feedback{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;padding:18px 18px 22px;border-radius:24px 24px 0 0;box-shadow:0 -4px 16px #0000001f}.feedback.good{background:var(--mint-soft)}.feedback.bad{background:var(--coral-soft)}.feedback .fb-head{display:flex;justify-content:space-between;align-items:center;font-size:20px;color:var(--mint)}.feedback.bad .fb-head{color:var(--danger)}.feedback .primary{width:100%;margin-top:12px}.fb-answer{font-weight:700;margin:4px 0}.fb-next{color:var(--text-soft);font-size:14px}.mood{width:160px;height:160px;object-fit:contain}.mood.big{width:200px;height:200px}.xp-pill{background:var(--warn-bg);color:var(--warn-text);border-radius:999px;padding:6px 16px;font-weight:800}.levelup{background:var(--mint-soft);border-radius:20px;padding:12px;font-weight:700}.levelup img{display:block;margin:8px auto 0;width:120px}.tabs{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;display:flex;background:var(--surface);box-shadow:0 -1px 6px #0000001a;padding-bottom:env(safe-area-inset-bottom)}.tabs button{flex:1;border:0;background:none;padding:10px 0 12px;color:var(--text-soft);font-size:13px}.tabs button span{display:block;font-size:22px}.tabs button.on{color:var(--mint);font-weight:700}.pet-card{background-size:cover;background-position:center}.friends{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px}.friends img{width:34px;height:34px;object-fit:contain}.bar.left{margin:4px 0;max-width:none}.quests h3,.panel h3{margin-bottom:8px}.quest{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--variant)}.quest:first-of-type{border-top:0}.q-main{flex:1;min-width:0}.q-title{font-weight:600}.primary.sm{padding:8px 16px;font-size:14px}.preview{border-radius:var(--radius);padding:16px 8px;text-align:center;background:var(--surface);background-size:cover;background-position:center;margin-bottom:8px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 16px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tile-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);border:2px solid var(--variant);border-radius:18px;padding:10px 6px;font:inherit}.tile-item img{width:56px;height:56px;object-fit:contain}.tile-item .emo{font-size:36px;line-height:56px}.tile-item.on{border-color:var(--mint);background:var(--mint-soft)}.tile-item.locked{opacity:.55}.tile-item small{color:var(--text-soft);font-size:11px;text-align:center}.wardrobe h3,.stats h3{margin:14px 0 4px}.stats .stat{background:var(--surface);box-shadow:none;border:1px solid var(--variant)}.heat{display:flex;gap:3px;justify-content:center;overflow-x:auto;padding:4px 0}.heat-col{display:flex;flex-direction:column;gap:3px}.heat-cell{width:16px;height:16px;border-radius:4px;display:inline-block;background:var(--heat0)}.heat-cell.h1{background:var(--heat1)}.heat-cell.h2{background:var(--heat2)}.heat-cell.h3{background:var(--heat3)}.heat-cell.h4{background:var(--heat4)}.heat-cell.hf{background:transparent}.heat-legend{display:flex;gap:4px;align-items:center;justify-content:flex-end;margin-top:6px}.medals{list-style:none;padding:0;margin:0}.medals li{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--variant)}.tabs button{font-size:12px}.tabs button span{font-size:20px}.card{position:relative}.level-badge{position:absolute;top:10px;right:10px;border:1px solid;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}.level-note{color:var(--mint);font-weight:600;margin:4px 0}.link-on{background:none;border:0;color:#fff;font:inherit;font-weight:600;padding:0;text-align:left;text-decoration:underline dotted}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:flex-end;justify-content:center;z-index:50}.sheet{color:var(--text);background:var(--surface);width:100%;max-width:480px;max-height:88vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:16px 18px 28px;display:flex;flex-direction:column;gap:10px}.sheet-head{display:flex;justify-content:space-between;align-items:center}.level-row{border:1px solid var(--variant);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:4px}.row-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tag-s{font-size:11px;padding:1px 8px;border-radius:999px;background:var(--variant);color:var(--text-soft)}.ach{margin:8px 0}.theme-pick{display:flex;gap:8px;margin:6px 0}.theme-pick button{flex:1;border:1px solid var(--variant);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 4px;font:inherit}.theme-pick button.on{background:var(--mint);border-color:var(--mint);color:#002117;font-weight:600}.login-hint{border:1px dashed var(--mint);border-radius:16px;padding:10px 14px;margin-bottom:14px;display:flex;gap:10px;align-items:center;justify-content:space-between}.login-hint p{margin:0;flex:1}.onboarding .welcome{display:block;width:100%;max-width:320px;margin:0 auto 8px;border-radius:16px}.medal-img{height:22px;width:auto;vertical-align:middle}.feedback .report{display:block;text-align:center;margin-top:6px;color:var(--text-soft)}
