:root{--bg:#f7f2e8;--card:#fffdf8;--ink:#262421;--muted:#7c766d;--green:#315d50;--blue:#2f658a;--gold:#d59c38;--pink:#df7d83;--line:rgba(50,45,38,.09);--shadow:0 12px 32px rgba(48,42,33,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard","Noto Sans KR",sans-serif}body{overscroll-behavior-y:none}button,input{font:inherit}button{border:0;cursor:pointer}
.app{width:min(100%,480px);min-height:100dvh;margin:0 auto;background:radial-gradient(circle at 100% 0%,rgba(49,93,80,.12),transparent 32%),linear-gradient(180deg,#fbf8f0 0%,#f5efe5 100%);position:relative;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:20;padding:calc(10px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between;background:rgba(251,248,240,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.04)}
.brand{display:flex;gap:10px;align-items:center}.brand-avatar{width:42px;height:42px;border-radius:16px;object-fit:cover;box-shadow:0 5px 15px rgba(0,0,0,.13)}.brand h1{font-size:19px;margin:0;letter-spacing:-.03em}.brand small{display:block;color:var(--muted);margin-top:2px;font-size:11px}
.coin{display:flex;align-items:center;gap:6px;background:#fff5dc;padding:8px 11px;border-radius:999px;font-weight:800;font-size:13px;color:#7b5716}.page{display:none;padding:14px 14px 20px}.page.active{display:block}
.hero{position:relative;height:310px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);background:#ddd}.hero img{width:100%;height:100%;object-fit:cover;display:block}.hero:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.hero-info{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;display:flex;align-items:end;justify-content:space-between;gap:10px}.hero-name{font-weight:900;font-size:28px;letter-spacing:-.04em;text-shadow:0 2px 8px rgba(0,0,0,.3)}.hero-sub{font-size:12px;opacity:.9;margin-top:3px}
.level-chip{background:rgba(255,255,255,.2);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);padding:8px 10px;border-radius:14px;font-size:12px;font-weight:800;white-space:nowrap}
.today{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:13px 14px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 7px 18px rgba(70,60,45,.06)}.today .bubble{font-size:19px}.today strong{display:block;font-size:12px;color:var(--green);margin-bottom:3px}.today span{font-size:13px;line-height:1.45}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}.stat-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;margin-bottom:8px}.stat-head b{font-size:11px;color:var(--muted)}
.bar{height:8px;background:#ece8df;border-radius:999px;overflow:hidden}.fill{height:100%;border-radius:999px;transition:width .35s ease}.fill.hunger{background:#d79b45}.fill.happy{background:#df7d83}.fill.energy{background:#4d7fb4}.fill.clean{background:#62a292}.fill.bond{background:#8a67b5}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:18px 3px 9px}.section-title h2{font-size:16px;margin:0;letter-spacing:-.025em}.section-title small{color:var(--muted);font-size:11px}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.action{min-height:78px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink);box-shadow:0 5px 15px rgba(60,52,42,.05);transition:transform .12s ease,background .12s ease}.action:active{transform:scale(.95);background:#f4efe7}.action .emoji{font-size:25px}.action span:last-child{font-size:11px;font-weight:800}
.progress-card{background:linear-gradient(135deg,#315d50,#4f7a6d);border-radius:22px;color:#fff;padding:14px;margin-top:12px}.progress-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800}.xpbar{height:8px;margin-top:8px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}.xpfill{height:100%;background:#fff;border-radius:999px;transition:width .3s ease}
.walk-cover{height:220px;border-radius:28px;overflow:hidden;position:relative;box-shadow:var(--shadow)}.walk-cover img{width:100%;height:100%;object-fit:cover}.walk-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.62))}.walk-copy{position:absolute;z-index:2;left:16px;bottom:16px;color:#fff}.walk-copy h2{margin:0 0 4px;font-size:24px}.walk-copy p{margin:0;font-size:12px;opacity:.9}
.route-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}.route{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:21px;padding:14px;display:flex;align-items:center;gap:12px;color:var(--ink)}.route-icon{width:48px;height:48px;border-radius:16px;background:#eef2ec;display:grid;place-items:center;font-size:24px}.route strong{display:block;font-size:14px;margin-bottom:3px}.route span{font-size:11px;color:var(--muted)}.route em{margin-left:auto;font-style:normal;font-size:11px;color:var(--green);font-weight:800}
.event-card{margin-top:14px;background:#fff8e8;border:1px solid #f0dfb9;border-radius:22px;padding:15px;display:none}.event-card.show{display:block;animation:pop .22s ease}.event-card h3{margin:0 0 7px;font-size:15px}.event-card p{margin:0;font-size:12px;line-height:1.5;color:#665a48}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.item{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px;min-height:165px;display:flex;flex-direction:column}.item-icon{font-size:36px}.item h3{font-size:14px;margin:9px 0 4px}.item p{font-size:11px;line-height:1.4;color:var(--muted);margin:0 0 10px}.item button{margin-top:auto;background:var(--green);color:#fff;border-radius:14px;padding:10px;font-size:12px;font-weight:800}.item button:disabled{opacity:.35}
.missions{display:grid;gap:8px}.mission{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}.mission-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.mission strong{font-size:12px}.mission b{font-size:11px;color:var(--green)}.mission .bar{margin-top:8px;height:6px}
.log{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 12px}.log-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.log-row:last-child{border-bottom:0}.log-time{font-size:10px;color:var(--muted);width:45px;flex:0 0 auto}.log-text{font-size:11px;line-height:1.4}
.album-head{display:flex;gap:8px;margin-bottom:10px}.upload-btn,.ghost-btn{flex:1;border-radius:16px;padding:11px 12px;font-size:12px;font-weight:800}.upload-btn{background:var(--green);color:#fff}.ghost-btn{background:#ebe6dd;color:#544e46}.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.photo{position:relative;aspect-ratio:1/1.13;border-radius:20px;overflow:hidden;background:#ddd}.photo img{width:100%;height:100%;object-fit:cover}.photo .photo-actions{position:absolute;left:7px;right:7px;bottom:7px;display:flex;gap:5px}.photo button{flex:1;padding:7px 5px;border-radius:10px;background:rgba(25,25,25,.72);color:#fff;font-size:9px;font-weight:800;backdrop-filter:blur(8px)}
.badge-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.badge{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;min-height:88px}.badge.locked{opacity:.45;filter:grayscale(.6)}.badge .bi{font-size:22px}.badge strong{display:block;font-size:11px;margin-top:6px}.badge span{font-size:10px;color:var(--muted)}
.settings{display:grid;gap:8px}.setting{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:12px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}.switch{width:45px;height:27px;background:#d8d3ca;border-radius:999px;padding:3px;transition:.2s}.switch i{display:block;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.2s}.switch.on{background:var(--green)}.switch.on i{transform:translateX(18px)}
.nav{position:fixed;z-index:40;left:50%;transform:translateX(-50%);width:min(100%,480px);bottom:0;height:calc(72px + env(safe-area-inset-bottom));padding:8px 10px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,253,248,.92);backdrop-filter:blur(22px);border-top:1px solid rgba(0,0,0,.06)}.nav button{background:transparent;color:#9a948c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:800}.nav button .ni{font-size:20px;line-height:1}.nav button.active{color:var(--green)}
.toast{position:fixed;z-index:80;left:50%;transform:translate(-50%,20px);bottom:calc(88px + env(safe-area-inset-bottom));background:#282522;color:#fff;border-radius:999px;padding:10px 14px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;max-width:88%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.fx{position:fixed;z-index:70;pointer-events:none;font-size:21px;animation:float 1s ease forwards}
.overlay{position:fixed;inset:0;z-index:100;background:rgba(28,27,24,.72);backdrop-filter:blur(12px);display:none;align-items:flex-end;justify-content:center}.overlay.show{display:flex}.sheet{width:min(100%,480px);background:#fffdf8;border-radius:30px 30px 0 0;padding:22px 18px calc(24px + env(safe-area-inset-bottom));animation:slide .28s ease}.sheet .slide-visual{height:220px;border-radius:24px;overflow:hidden;background:#eee;margin-bottom:18px}.sheet .slide-visual img{width:100%;height:100%;object-fit:cover}.sheet h2{font-size:24px;margin:0 0 8px}.sheet p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.dots{display:flex;gap:6px;justify-content:center;margin-bottom:15px}.dots i{width:7px;height:7px;border-radius:50%;background:#d8d3ca}.dots i.on{width:20px;border-radius:99px;background:var(--green)}.primary{width:100%;border-radius:17px;padding:14px;background:var(--green);color:#fff;font-size:14px;font-weight:900}
.modal{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-box{width:min(100%,390px);background:#fffdf8;border-radius:24px;padding:18px;box-shadow:var(--shadow)}.modal-box h3{margin:0 0 8px;font-size:17px}.modal-box p{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 14px}.modal-actions{display:flex;gap:8px}.modal-actions button{flex:1;border-radius:14px;padding:11px;font-weight:800;font-size:12px}.danger{background:#b84e50;color:#fff}.cancel{background:#ece7de}
@keyframes float{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.25)}}@keyframes pop{from{transform:scale(.96);opacity:.2}to{transform:scale(1);opacity:1}}@keyframes slide{from{transform:translateY(45px)}to{transform:translateY(0)}}
@media (min-width:700px){body{padding:20px 0}.app{min-height:calc(100dvh - 40px);border-radius:32px;overflow:hidden;box-shadow:0 25px 70px rgba(40,35,28,.2)}.nav{bottom:20px;border-radius:0 0 32px 32px}.topbar{border-radius:32px 32px 0 0}}

.pet-stage{margin-bottom:12px;background:linear-gradient(180deg,#fffdf8,#f7f1e7);border:1px solid rgba(50,45,38,.08);border-radius:26px;padding:12px;box-shadow:0 8px 20px rgba(50,45,38,.06)}
.pet-stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:800;color:#315d50}.pet-stage-top small{font-size:10px;color:#8d877e;font-weight:700}
.pet-stage-wrap{position:relative;height:250px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#dff1ff 0%,#f7f2e8 68%)}
.pet-stage-bg{position:absolute;left:0;right:0;bottom:0;height:78px;background:repeating-linear-gradient(90deg,#cbb59c 0 18px,#c4ad93 18px 20px);border-top:2px solid rgba(73,57,38,.12)}
.pet-sprite{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:200px;max-width:68%;filter:drop-shadow(0 16px 16px rgba(0,0,0,.16));transition:transform .25s ease}
.pet-sprite.idle{animation:petBob 2.2s ease-in-out infinite}.pet-sprite.walking{animation:petWalk 1s linear infinite}.pet-sprite.sleep{animation:petSleep 2.2s ease-in-out infinite}.pet-sprite.happy{animation:petHappy .55s ease-in-out 3}
.walk-stage{margin-bottom:12px;border-radius:24px;background:linear-gradient(180deg,#eef7ff,#fff7ef);padding:10px 12px;border:1px solid rgba(50,45,38,.08);overflow:hidden}
.walk-lane{height:120px;border-radius:18px;position:relative;background:linear-gradient(180deg,#dff0ff 0%,#f5efe5 70%)}
.walk-lane:after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;background:repeating-linear-gradient(90deg,#d5bd9e 0 22px,#cdb390 22px 24px)}
.walk-sprite{position:absolute;bottom:14px;left:12px;width:112px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.15))}
.walk-sprite.go{animation:laneWalk 3.2s linear}
@keyframes petBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes petWalk{0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}25%{transform:translateX(-50%) translateY(-3px) rotate(-2deg)}75%{transform:translateX(-50%) translateY(-1px) rotate(2deg)}}
@keyframes petSleep{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.985)}}
@keyframes petHappy{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@keyframes laneWalk{0%{left:12px}50%{left:calc(100% - 124px)}100%{left:12px}}