:root{
  --bg:#fdf6ec; --panel:#ffffff; --line:#eadfce; --ink:#3a3226; --sub:#7a6f5c; --faint:#a89c85;
  --green:#57b877; --pink:#ff8fab; --blue:#6fa8ff; --gold:#f2b807;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); min-height:100vh; padding-bottom:30px;
  background:radial-gradient(circle at 50% -10%, #fff3d8, transparent 60%), var(--bg);}
.wrap{max-width:480px; margin:0 auto; padding:0 16px;}
.top{text-align:center; padding:34px 0 0;}
.top h1{font-size:28px; font-weight:900; margin:0;}
.top .tg{color:var(--sub); font-size:13.5px; margin-top:8px; line-height:1.8;}

/* 부화 */
.card{background:var(--panel); border:1.5px solid var(--line); border-radius:18px; padding:20px; margin-top:18px; box-shadow:0 4px 18px rgba(58,50,38,.06);}
.card input{width:100%; font:inherit; font-size:18px; font-weight:700; text-align:center; background:#fffdf8; border:2px solid var(--line); border-radius:12px; padding:13px; outline:none;}
.card input:focus{border-color:var(--gold)}
.big-btn{width:100%; margin-top:12px; font:inherit; font-size:16.5px; font-weight:900; color:#4a3a08; background:linear-gradient(180deg,#ffdf7e,#f2b807); border:0; border-radius:14px; padding:15px; cursor:pointer;}
.big-btn:disabled{opacity:.5}
.eggwrap{text-align:center; font-size:90px; margin:8px 0;}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.egg-wob{display:inline-block; animation:wobble 1.2s infinite;}

/* 펫 무대 */
.stagebox{position:relative; background:linear-gradient(180deg,#e8f6ff, #fdf6ec 70%); border:1.5px solid var(--line); border-radius:20px; margin-top:16px; padding:16px 12px 10px; text-align:center; overflow:hidden;}
.petname{font-size:19px; font-weight:900;}
.petmeta{color:var(--sub); font-size:12px; margin-top:2px;}
.petsvg{margin:6px auto; width:190px; height:190px;}
@keyframes idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.02,0.98)}}
.petsvg svg{animation:idle 2.6s ease-in-out infinite; overflow:visible;}
@keyframes happyjump{0%,100%{transform:translateY(0)}30%{transform:translateY(-22px) rotate(-5deg)}60%{transform:translateY(0)}80%{transform:translateY(-10px) rotate(4deg)}}
.petsvg.happy svg{animation:happyjump .8s ease-in-out 2;}
.bubble{position:absolute; top:12px; left:50%; transform:translateX(-50%); max-width:86%; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:9px 14px; font-size:13.5px; line-height:1.6; box-shadow:0 4px 12px rgba(0,0,0,.08); opacity:0; transition:opacity .25s; z-index:5;}
.bubble.show{opacity:1}
.moodtag{display:inline-block; font-size:12px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:4px 12px; color:var(--sub); margin-top:2px;}

/* 상태바 */
.bars{display:flex; gap:10px; margin-top:12px;}
.bar{flex:1; background:var(--panel); border:1.5px solid var(--line); border-radius:12px; padding:9px 12px; text-align:left;}
.bar .bk{font-size:11px; font-weight:800; color:var(--faint);}
.bar .bt{height:8px; background:#f2ead9; border-radius:5px; margin-top:5px; overflow:hidden;}
.bar .bf{height:100%; border-radius:5px; transition:width .4s;}
.actrow{display:flex; gap:9px; margin-top:12px;}
.actrow button{flex:1; font:inherit; font-size:14.5px; font-weight:800; background:var(--panel); border:1.5px solid var(--line); border-radius:13px; padding:13px 4px; cursor:pointer;}
.actrow button:active{transform:scale(.96)}
.growth{margin-top:12px; text-align:center; color:var(--faint); font-size:12px;}
.growth b{color:var(--gold)}

/* 대화 */
.chatrow{display:flex; gap:8px; margin-top:12px;}
.chatrow input{flex:1; font:inherit; font-size:14.5px; background:#fffdf8; border:1.5px solid var(--line); border-radius:12px; padding:12px 13px; outline:none;}
.chatrow input:focus{border-color:var(--pink)}
.chatrow button{font:inherit; font-size:14px; font-weight:800; background:var(--pink); color:#fff; border:0; border-radius:12px; padding:0 17px; cursor:pointer;}
.memories{margin-top:14px;}
.memories .mh{font-size:12.5px; font-weight:900; color:var(--sub); margin-bottom:5px;}
.mem{font-size:12.5px; color:var(--sub); background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:7px 11px; margin:5px 0; line-height:1.6;}
.traitrow{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px;}
.trait{font-size:11.5px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:4px 11px; color:var(--sub);}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}
.foot{margin-top:26px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.8;}
.hidden{display:none}