[hidden]{display:none !important}   /* v0.28.2 hidden 표시는 항상 숨김 (칸마다 display 를 정해도 덮어쓰지 않게) */
/* CSS 안내
   · 색은 :root 변수(--pink, --yellow, --mint …)로 맞춤. 아이용이라 둥근 모서리 · 큰 글씨 · 그림자 0 4px 0 #0001 통일
   · 화면은 .screen 하나만 .active (show(id)로 전환). 양치 화면은 C(클로즈업) 하나 (v0.20.1 부터)
   · 새 기능 CSS는 맨 끝쪽에 버전 이름(v0.19 등) 주석을 단 묶음으로 추가 (어느 버전에서 생겼는지 찾기 쉽게)
   · 움직임은 CSS 애니메이션 위주 (휴대폰에서 가볍게). prefers-reduced-motion 이면 일부 끔 */
:root{
  --sky1:#8fd3ff; --sky2:#e3f5ff; --ink:#24324a; --title:#1f5f99;
  --pink:#ff7aa8; --pink-d:#e85d8f; --mint:#3ccf9c; --yellow:#ffd54a; --yellow-d:#d9ad1f;
  --card:#ffffffee;
  --font:'Jua';
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font),system-ui,-apple-system,'Apple SD Gothic Neo','Hiragino Maru Gothic ProN','Malgun Gothic',sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 70%);
  overflow:hidden; -webkit-user-select:none; user-select:none; touch-action:manipulation;
  word-break:keep-all;
}
button,select{font-family:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}

/* 배경 구름 */
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden}
body.brushing .sky,body.brushing #fx{display:none}   /* 양치 중엔 배경 효과를 멈춰 그리기 부담 줄임 */
.cloud{position:absolute;left:0;background:#fff;border-radius:999px;opacity:.75;animation:drift 45s linear infinite;will-change:transform}
.cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.c1{width:120px;height:36px;top:7%}
.c1::before{width:56px;height:56px;left:18px;top:-26px}
.c1::after{width:40px;height:40px;left:62px;top:-16px}
.c2{width:90px;height:28px;top:34%;animation-duration:60s;animation-delay:-25s}
.c2::before{width:42px;height:42px;left:14px;top:-20px}
.c2::after{width:30px;height:30px;left:46px;top:-12px}
.c3{width:140px;height:40px;top:66%;animation-duration:75s;animation-delay:-50s;opacity:.55}
.c3::before{width:64px;height:64px;left:22px;top:-30px}
.c3::after{width:44px;height:44px;left:76px;top:-18px}
@keyframes drift{from{transform:translateX(-170px)}to{transform:translateX(110vw)}}

/* 이벤트 화면 효과 */
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.fxp{position:absolute;top:-40px;animation:fxFall linear forwards;line-height:1}
@keyframes fxFall{to{transform:translate(var(--dx),calc(100vh + 80px)) rotate(var(--rot))}}
.fx-snow{border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.fx-petal{background:#ffc1d9;border-radius:70% 0 70% 0}
.fx-star{color:#ffd54a;text-shadow:0 0 6px #fff}
.fx-balloon{top:auto;bottom:-90px;width:34px;height:42px;border-radius:50% 50% 50% 50%/45% 45% 55% 55%;animation-name:fxRise}
.fx-balloon::after{content:'';position:absolute;left:50%;top:100%;width:1.5px;height:40px;background:#9aa8bd}
@keyframes fxRise{to{transform:translate(var(--dx),calc(-100vh - 160px)) rotate(var(--rot))}}

/* v0.25 가로로 눕힌 폰 (세로 600px 이하): 첫 화면 · 완료 화면을 왼쪽 그림 / 오른쪽 단추 두 칸으로
   의도: 세로 화면 배치를 그대로 쓰면 제목이 잘리고 반짝이가 시간 단추를 가렸음 */
@media (orientation:landscape) and (max-height:600px){
  #home.screen{max-width:960px}
  #home.screen.active{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:20px;align-items:center}
  #home .topbar{grid-column:1 / -1}
  #home .hero{grid-column:1;grid-row:2;height:100%;gap:4px}
  #home h1{font-size:clamp(20px,6.5vh,32px)}
  #home .home-stage{width:min(30vw,46vh,230px)}
  #home .today{font-size:16px;padding:5px 12px}
  #home .event-badge{font-size:15px;padding:4px 12px}
  #home .bottom{grid-column:2;grid-row:2;gap:10px}
  #home .big-btn{font-size:24px;padding:12px}
  #done.screen{max-width:960px}
  #done.screen.active{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;overflow:hidden;align-items:stretch}
  #done .done-l,#done .done-r{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0}
  #done .done-l{justify-content:center}
  #done .done-r{overflow-y:auto;padding-top:6px}
  #done h2{font-size:clamp(26px,8vh,38px)}
  #done .gift-stage{width:min(34vw,44vh,220px)}
  #done .bottom{bottom:0;padding-bottom:4px}
}
.done-l,.done-r{display:contents}                                  /* 세로 화면에선 없는 것처럼 */

/* 화면 공통 */
.screen{
  position:fixed;inset:0;max-width:520px;margin:0 auto;
  display:none;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.screen.active{display:flex;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}
.topbar .right{display:flex;gap:8px}
.pill{background:var(--card);padding:8px 16px;border-radius:999px;font-size:20px;box-shadow:0 4px 0 #0001;white-space:nowrap}
.icon-btn{width:46px;height:46px;border-radius:50%;background:var(--card);font-size:20px;box-shadow:0 4px 0 #0001;flex-shrink:0}
@media (max-width:375px){                                        /* v0.25 좁은 폰(360px 등): 위쪽 단추가 화면 밖으로 밀리던 것 */
  .topbar{gap:6px} .topbar .right{gap:6px}
  .icon-btn{width:40px;height:40px;font-size:18px}
  #home .pill{padding:7px 11px;font-size:18px}
  #home .tb-left{gap:6px;min-width:0}
  #home .gbar{width:30px}
}
.title-sm{font-size:24px;color:var(--title);text-align:center}
.spacer{width:46px;flex-shrink:0}

.hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
h1,h2{font-weight:normal;text-align:center;color:var(--title);text-shadow:0 3px 0 #fff,0 6px 14px #fff8;line-height:1.1}
h1{font-size:clamp(30px,9vw,44px)}
h2{font-size:clamp(32px,9.5vw,44px)}
.event-badge{background:#fff;color:#d6336c;padding:6px 14px;border-radius:999px;font-size:17px;box-shadow:0 3px 0 #0001;animation:pop .5s}
.event-badge[hidden]{display:none}

.stage{position:relative;width:min(70vw,38vh,320px);aspect-ratio:1/1;display:block;padding:0}
.home-stage{width:min(60vw,30vh,270px)}
.closet-stage{width:min(52vw,27vh,240px);flex-shrink:0}
.char-wrap{position:absolute;inset:4%}
.char{width:100%;height:100%;overflow:visible;display:block}

.today,#doneMsg{background:var(--card);padding:8px 16px;border-radius:999px;font-size:19px;text-align:center}
#doneMsg{border-radius:20px;max-width:100%;line-height:1.35}

.bottom{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.chip{padding:10px 20px;border-radius:999px;background:var(--card);font-size:20px;box-shadow:0 4px 0 #0001;transition:background .15s}
.chip.active{background:var(--yellow);box-shadow:0 4px 0 var(--yellow-d)}

.big-btn{
  width:min(100%,360px);padding:18px;border-radius:28px;background:var(--pink);color:#fff;font-size:30px;
  box-shadow:0 8px 0 var(--pink-d);transition:transform .1s,box-shadow .1s;animation:breathe 2s ease-in-out infinite;
}
.big-btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--pink-d)}
@keyframes breathe{50%{scale:1.03}}
.sub-btn{padding:12px 24px;border-radius:999px;background:var(--yellow);font-size:21px;box-shadow:0 5px 0 var(--yellow-d)}
.sub-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--yellow-d)}
.ver{font-size:12px;opacity:.45;padding:2px 10px}
.test-mode .ver::after{content:' · TEST';font-weight:800;color:#e85d8f}

/* 톡 튀어나오기 */
@keyframes pop{0%{scale:.6}70%{scale:1.1}100%{scale:1}}

/* 캐릭터 애니메이션 */
.char .body{transform-box:fill-box;transform-origin:50% 100%;animation:float 2.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.char.brushing .body{animation:wiggle .44s ease-in-out infinite}
@keyframes wiggle{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.char.happy .body{animation:jump .7s ease-in-out infinite}
.char.cheer .body{animation:jump .6s ease-in-out 1}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}
.char .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.char .m-open,.char .tool{display:none}
.char.brushing .m-open,.char.brushing .tool{display:inline}
.char.brushing .m-smile,.char.brushing .hand-r,.char.brushing [data-slot="hand"]{display:none}
.char .brush{transform-box:fill-box;transform-origin:center;animation:scrub .22s ease-in-out infinite alternate}
@keyframes scrub{from{transform:translateX(-8px) rotate(-5deg)}to{transform:translateX(6px) rotate(5deg)}}
.char .hands circle{transform-box:fill-box;transform-origin:center;animation:handBob 2.6s ease-in-out infinite}
.char .hands .hand-r{animation-delay:-1.3s}
@keyframes handBob{50%{transform:translateY(-4px)}}
.char .spark{transform-box:fill-box;transform-origin:center;animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.5) rotate(45deg);opacity:.5}}
.char .wing-l{transform-box:fill-box;transform-origin:100% 60%;animation:flapL 1.2s ease-in-out infinite}
.char .wing-r{transform-box:fill-box;transform-origin:0% 60%;animation:flapR 1.2s ease-in-out infinite}
@keyframes flapL{50%{transform:rotate(12deg)}}
@keyframes flapR{50%{transform:rotate(-12deg)}}
.char .flame{transform-box:fill-box;transform-origin:50% 0;animation:flame .22s ease-in-out infinite alternate}
@keyframes flame{to{transform:scaleY(.55)}}
.char .spin{transform-box:fill-box;transform-origin:center;animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.char .glow{animation:glow 1.4s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.55}}
.char.paused .body,.char.paused .brush{animation-play-state:paused}

.char{transition:transform .45s ease}
.char.z-ul{transform:rotate(-6deg)}
.char.z-ur{transform:rotate(6deg)}
.char.z-ll{transform:rotate(-6deg) translateY(3%)}
.char.z-lr{transform:rotate(6deg) translateY(3%)}

/* ===== 양치 화면 C: 클로즈업 ===== */
.brushC{max-width:none;padding:0;justify-content:flex-start;overflow:hidden;
  background:repeating-linear-gradient(115deg,#fff0 0 140px,#ffffff59 140px 175px,#fff0 175px 380px),#d9f1ff}
/* 카메라 층: 1em = 그림 1단위 (화면 크기에 맞춰 font-size로 조절) */
.c-cam{position:absolute;left:0;top:0;width:1120em;height:640em;transform-origin:0 0;will-change:transform;
  transition:transform 1s cubic-bezier(.45,.05,.3,1),opacity .6s ease}
#cScene,#cOver{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block}
#cOver{display:none}
.inner-mode #cOver{display:block}
#cOver .czone-ov{display:none}
#cOver .czone-ov.row{display:inline}
/* 앞니 안쪽: 칫솔 머리가 입 안 경계(위 190, 아래 530) 밖으로 보이지 않게. 손잡이 쪽은 열어 둠 */
.c-bclip{position:absolute;inset:0}
#brushC.front-u .c-bclip{clip-path:inset(150em -2000em -2000em -2000em)}
#brushC.front-l .c-bclip{clip-path:inset(-2000em -2000em 150em -2000em)}
.c-bpose{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;
  transition:transform .8s cubic-bezier(.45,.05,.3,1)}
.c-travel,.c-scrub{position:absolute;left:0;top:0;width:0;height:0}
.c-bsvg{position:absolute;left:-95em;top:-75em;width:750em;height:105em;overflow:visible}
.c-bsvg .b-face{display:none}
.inner-mode .c-bsvg .b-face{display:inline}
.inner-mode .c-bsvg .b-side{display:none}
.c-foam{position:absolute;inset:0;pointer-events:none}
.c-foam .fb{position:absolute;border-radius:50%;border:4.5em solid #24324a;
  background:radial-gradient(ellipse 28% 18% at 34% 30%,#fff 60%,#fff0 64%),#f2faff;
  transform:scale(0);opacity:0;transition:transform .5s cubic-bezier(.3,1.7,.5,1),opacity .4s}
.c-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;will-change:transform;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left))}
.c-top .icon-btn{width:44px;height:44px;display:grid;place-items:center}
.c-top .icon-btn svg{width:18px;height:18px;fill:var(--ink)}
.c-track{position:relative;flex:1;height:10px;border-radius:999px;background:#ffffffaa;box-shadow:inset 0 0 0 2px #fff;margin:0 28px 0 34px}
.c-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:var(--mint);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.c-mark{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:3px solid #d6e6f2;display:grid;place-items:center;font-style:normal}
.c-mark.done{background:var(--mint);border-color:#fff}
.c-mark.done::after{content:'✓';color:#fff;font-size:12px;line-height:1}
.c-pill{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);background:#fff;padding:5px 12px;border-radius:999px;font-size:21px;
  box-shadow:0 3px 0 #0002;white-space:nowrap;color:var(--title);z-index:1}
.brushC.hurry .c-pill{background:var(--pink);color:#fff}
.c-zone{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--card);padding:8px 20px;
  border-radius:999px;font-size:clamp(20px,5.5vw,28px);box-shadow:0 4px 0 #0001;z-index:3;white-space:nowrap}
.c-rider{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom));left:calc(10px + env(safe-area-inset-left));
  width:min(30vw,30vh,170px);aspect-ratio:1/1;z-index:3;transition:left .8s ease;will-change:transform}
.c-rider.right{left:calc(100% - min(30vw,30vh,170px) - 10px - env(safe-area-inset-right))}
.c-rider .char-wrap{inset:0}
/* 폰 깜빡임 방지: 구석 반짝이는 그림 안쪽 애니메이션을 끄고, 통째로 GPU로만 움직임 */
.c-rider .char .body,.c-rider .char .brush,.c-rider .char .eyes,.c-rider .char .spark,.c-rider .char .hands circle,
.c-rider .char .wing-l,.c-rider .char .wing-r,.c-rider .char .flame,.c-rider .char .spin,.c-rider .char .glow{animation:none!important}
.c-rider .char-wrap{will-change:transform;animation:riderBob .9s ease-in-out infinite}
@keyframes riderBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.is-paused .c-rider .char-wrap{animation-play-state:paused}
/* v0.54.0 구석 반짝이 춤 · 대결: 그림 안쪽은 그대로, 바깥 상자(.c-move)만 GPU 로 움직임. --d = 대장 세균 쪽 방향 */
.c-move{position:absolute;inset:0;will-change:transform;transform-origin:50% 90%;--d:1}
.c-rider.right .c-move{--d:-.4}
.c-move.mv-hop{animation:mvHop 1s ease-in-out}
@keyframes mvHop{0%,100%{transform:none}18%{transform:translateY(3%) scale(1.1,.88)}45%{transform:translateY(-30%) scale(.94,1.08)}72%{transform:translateY(2%) scale(1.08,.92)}}
.c-move.mv-spin{animation:mvSpin 1.1s ease-in-out}
@keyframes mvSpin{0%{transform:translateY(0) rotate(0deg)}35%{transform:translateY(-22%) rotate(180deg)}65%{transform:translateY(-22%) rotate(360deg)}100%{transform:translateY(0) rotate(360deg)}}
.c-move.mv-sway{animation:mvSway 1.6s ease-in-out}
@keyframes mvSway{0%,100%{transform:none}20%{transform:translateX(-10%) rotate(-14deg)}45%{transform:translateX(10%) rotate(14deg)}70%{transform:translateX(-10%) rotate(-14deg)}88%{transform:translateX(6%) rotate(8deg)}}
.c-move.mv-shimmy{animation:mvShimmy 1.2s ease-in-out}
@keyframes mvShimmy{0%,100%{transform:none}15%,45%,75%{transform:scale(1.1,.9) rotate(-6deg)}30%,60%,90%{transform:scale(.92,1.08) rotate(6deg)}}
.c-move.mv-look{animation:mvLook 1.4s ease-in-out}
@keyframes mvLook{0%,100%{transform:none}15%{transform:translateY(-12%) scale(1.06)}35%,80%{transform:translateX(calc(var(--d)*8%)) rotate(calc(var(--d)*12deg))}}
.c-move.mv-fight{animation:mvFight .7s ease-in-out infinite}
@keyframes mvFight{0%,100%{transform:none}35%{transform:translate(calc(var(--d)*-4%),4%) rotate(calc(var(--d)*-8deg)) scale(1.05,.95)}60%{transform:translate(calc(var(--d)*16%),-14%) rotate(calc(var(--d)*16deg))}}
.c-move.mv-win{animation:mvWin 1.3s ease-out}
@keyframes mvWin{0%{transform:translateY(0) rotate(0deg) scale(1)}40%{transform:translateY(-40%) rotate(360deg) scale(1.15)}70%{transform:translateY(0) rotate(360deg) scale(1.1,.9)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
.is-paused .c-move{animation-play-state:paused}
.c-shot{position:absolute;z-index:5;width:min(15vw,10vh,64px);filter:drop-shadow(0 0 6px #fff6);pointer-events:none;will-change:transform}
.c-shot svg{display:block;width:100%;height:auto}
@media (orientation:landscape){
  .c-zone{top:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
  .brushC .c-tech{top:auto;bottom:calc(64px + env(safe-area-inset-bottom))}
}
.c-say{position:absolute;bottom:calc(100% - 4px);left:0;background:#fff;padding:8px 14px;border-radius:16px;font-size:18px;width:max-content;max-width:min(76vw,320px);box-shadow:0 4px 0 #0001;line-height:1.3}
.c-rider.right .c-say{left:auto;right:0}
.c-say:empty{display:none}
.c-say.pop{animation:pop .4s}
:root{--bh:#ff7aa8;--bs:#3ccf9c;--bb:#3ccf9c;--bbd:#2fb487;--bk:#fff;--bks:#bfe3f7;--dd:#fff;--d-dots:0;--d-stars:0;--d-stripes:0;--d-rainbow:0}
.c-cam .tf{fill:#f6edd0;stroke:#24324a;stroke-width:6}            /* v0.20.3 그림체 B: 진한 테두리 */
.c-cam .oc{fill:#fbf4df;stroke:#24324a;stroke-width:3}
.c-cam .groove{fill:none;stroke:#c9b48a;stroke-width:3;stroke-linecap:round}
.c-cam .clean .tf{fill:#fff}
.c-cam .clean .oc{fill:#fff}
.c-cam .clean .groove{stroke:#dde8f0}
.c-cam .czone.active .tf,.c-cam .czone-ov.active .tf{stroke:#ffb800;stroke-width:9}
/* 이빨 얼굴: 더러우면 울상, 다 닦으면 웃음 */
.c-cam .tooth.happy .tf{fill:#fff}
.c-cam .tooth.happy .oc{fill:#fff}
.c-cam .tooth.happy .groove{stroke:#dde8f0}
.c-cam .fc .m-happy{display:none}
.c-cam .tooth.happy .fc .m-happy{display:inline}
.c-cam .tooth.happy .fc .m-sad{display:none}
.c-cam .fc .eye{fill:#24324a}
.c-cam .fc .lid{fill:none;stroke:#24324a;stroke-width:3.2;stroke-linecap:round}
.c-cam .fc .mouth{fill:none;stroke:#24324a;stroke-width:3.2;stroke-linecap:round}
.c-cam .fc .cheek{fill:#ffb3c7;opacity:.85}
.c-cam .fc .sweat{fill:#9fdcff;stroke:#24324a;stroke-width:1.6}
.c-cam .gloss{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:.8}
/* 칫솔 움직임: c-travel(이빨을 따라 천천히 이동) + c-scrub(방법별 동작) */
.c-travel{animation:cTravel 2.6s ease-in-out infinite alternate}
@keyframes cTravel{from{transform:translateX(-28em)}to{transform:translateX(28em)}}
.c-scrub{animation:jigH .13s linear infinite alternate}                              /* 짧게 앞뒤로 */
@keyframes jigH{from{transform:translateX(-6em)}to{transform:translateX(6em)}}
.tech-circle .c-scrub{animation:circ .55s linear infinite}                              /* 작은 원 */
@keyframes circ{0%{transform:translate(10em,0)}12.5%{transform:translate(7em,7em)}25%{transform:translate(0,10em)}37.5%{transform:translate(-7em,7em)}
  50%{transform:translate(-10em,0)}62.5%{transform:translate(-7em,-7em)}75%{transform:translate(0,-10em)}87.5%{transform:translate(7em,-7em)}100%{transform:translate(10em,0)}}
.tech-roll .c-scrub{animation:roll .75s ease-in infinite}                               /* 쓸어내리기: 잇몸 → 이 끝 */
@keyframes roll{0%{transform:translateY(-24em) rotate(-5deg)}65%{transform:translateY(22em) rotate(4deg)}100%{transform:translateY(-24em) rotate(-5deg)}}
#brushC.surf-chew .c-scrub{animation:cScrubH .26s ease-in-out infinite alternate}      /* 씹는 면은 모두 앞뒤로 */
#brushC.surf-chew .c-travel{animation:none}
#brushC.surf-front .c-scrub{animation:cScrubF .3s ease-in-out infinite alternate}       /* 앞니 안쪽: 세워서 위아래로 */
@keyframes cScrubF{from{transform:translateX(-9em)}to{transform:translateX(9em)}}
#brushC.surf-front .c-travel{animation:none}
@keyframes cScrubH{from{transform:translateX(-16em)}to{transform:translateX(16em)}}
.is-paused .c-scrub,.is-paused .c-travel{animation-play-state:paused}
.c-tech{position:absolute;left:50%;top:calc(112px + env(safe-area-inset-top));transform:translateX(-50%);z-index:3;white-space:nowrap;
  background:#fffbea;border:2px solid var(--yellow);padding:5px 14px;border-radius:999px;font-size:17px;box-shadow:0 3px 0 #0001}
.c-tech:empty{display:none}
.c-foam .fb.on{transform:scale(1);opacity:1}
.c-foam.off .fb{transform:scale(1.4);opacity:0;transition:transform .9s ease,opacity .9s ease}
.c-sparkles path{transform-box:fill-box;transform-origin:center;opacity:0}
.c-sparkles.show path{animation:cSpark 1.1s ease-in-out infinite}
.c-cam .plq circle{fill:#efd35a;stroke:#24324a;stroke-width:2.6}
.c-cam .plq .eye{fill:#6b5a1f;stroke:none}
.c-cam .crumb circle{fill:#b98352;stroke:#24324a;stroke-width:2.2}
.c-cam .fis circle{fill:#8a5a32;stroke:#24324a;stroke-width:2.2}
.c-cam .dw.gone{display:none}      /* 한 번에 사라짐 (그림을 여러 번 다시 그리지 않게) */
.c-pops{position:absolute;inset:0;pointer-events:none}
.dpop{position:absolute;width:44em;height:44em;margin:-22em 0 0 -22em;will-change:transform,opacity;animation:dPop .7s ease-out 1 forwards}
.dpop::before{content:'';position:absolute;inset:0;background:#ffd54a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.dpop::after{content:'';position:absolute;inset:7em;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.dpop.crumb{width:30em;height:30em;margin:-15em 0 0 -15em}
@keyframes dPop{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.15) rotate(30deg)}100%{opacity:0;transform:scale(.6) rotate(60deg)}}
@keyframes cSpark{0%,100%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* ===== 양치 전 준비: 치약 짜기 ===== */
#prep{justify-content:safe center;gap:14px;overflow-y:auto}
.prep-card{width:100%;background:var(--card);border-radius:28px;padding:18px 16px;box-shadow:0 6px 0 #0001;display:flex;flex-direction:column;align-items:center;gap:12px}
.prep-step{font-size:15px;color:var(--mint)}
.prep-title{font-size:clamp(24px,7vw,32px);text-align:center;color:var(--title);line-height:1.25}
.prep-scene{width:100%;max-width:420px}
.prep-scene svg{width:100%;display:block;overflow:hidden}
.paste{transform-box:fill-box;transform-origin:85% 50%;transform:scale(0);animation:pasteOut 1.6s .4s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes pasteOut{to{transform:scale(1)}}
.tube{animation:tubeSq 1.6s .3s ease-in-out forwards;transform-box:fill-box;transform-origin:100% 50%}
@keyframes tubeSq{0%{transform:translateX(0) scaleY(1)}40%{transform:translateX(-6px) scaleY(.82)}100%{transform:translateX(0) scaleY(.9)}}
.prep-compare{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;background:#fffbea;border:2px solid var(--yellow);border-radius:999px;padding:8px 18px}
.prep-compare svg{width:34px;height:34px;flex-shrink:0}
.prep-note{font-size:14px;opacity:.7;text-align:center;line-height:1.45}
.prep-tips{display:flex;gap:8px;width:100%;justify-content:center}
.prep-tip{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:4px;background:#f3f9fe;border-radius:16px;padding:8px 4px;font-size:14px;text-align:center;line-height:1.2}
.prep-tip svg{width:44px;height:44px}
.prep-tip.on{background:#fffbea;box-shadow:0 0 0 3px var(--yellow)}
.listen-btn{font-size:17px;padding:8px 16px;border-radius:999px;background:#eef6fc}
.rec-list{display:flex;flex-direction:column;gap:8px}
.rec-row{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px dashed #dbe8f2}
.rec-row .rt{flex:1;min-width:0;font-size:15px;line-height:1.3}
.rec-row .rt small{display:block;font-size:12px;opacity:.55}
.rec-row .rt.mine small{color:var(--mint);opacity:1}
.rec-row button{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#eef6fc;font-size:16px}
.rec-row button.rec{background:#ffe3ec;color:#e0245e}
.rec-row button.rec.on{background:#e0245e;color:#fff;animation:breathe .8s infinite}
.rec-row button:disabled{opacity:.3}
/* 소리 설정 창 */
.audio-pop{position:fixed;inset:0;background:#24324a66;display:none;align-items:flex-start;justify-content:center;z-index:25;
  padding:calc(68px + env(safe-area-inset-top)) 16px 16px}
.audio-pop.show{display:flex}
.ap-box{background:#fff;border-radius:24px;padding:16px 18px;width:min(100%,340px);display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px #0002;animation:pop .25s}
.ap-title{font-size:20px;color:var(--title);text-align:center}
.ap-box .set-row select{max-width:62%}
.ap-close{align-self:center;font-size:17px;opacity:.65;padding:6px 14px}
.file-name{font-size:14px;opacity:.7;word-break:break-all}
.spit-pill{display:flex;align-items:center;gap:6px;background:#fff;padding:6px 14px;border-radius:999px;font-size:17px;box-shadow:0 3px 0 #0001}
.spit-pill svg{width:30px;height:30px}

/* ===== 보너스: 혀 닦기 ===== */
#tongue{justify-content:safe center;gap:14px;overflow-y:auto}
.tg-title{font-size:clamp(22px,7vw,34px);color:var(--title);text-align:center;max-width:100%;overflow-wrap:anywhere;line-height:1.2}   /* v0.25: 일본어 제목이 오른쪽으로 잘리던 것 */
.tg-stage{position:relative;width:min(80vw,44vh,340px);aspect-ratio:1/1;overflow:hidden;border-radius:32px;background:#ffe9ef;box-shadow:0 6px 0 #0001}
.tg-stage > svg{position:absolute;inset:0;width:100%;height:100%}
.tg-brush{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity;transform:translate(150em,128em);transition:opacity .5s}
.tg-stage.end .tg-brush{opacity:0}
.tg-brush svg{position:absolute;left:-26em;top:-40em;width:52em;height:330em;overflow:visible}
.tg-stage.go .tg-brush{animation:tgSweep 1.6s cubic-bezier(.4,0,.3,1) 3}
@keyframes tgSweep{0%{transform:translate(150em,128em)}70%{transform:translate(150em,236em)}100%{transform:translate(150em,128em)}}
.tg-stage .coat{transition:opacity .4s}
.tg-stage .coat.gone{opacity:0}
.tg-count{display:flex;gap:10px}
.tg-count i{width:16px;height:16px;border-radius:50%;background:#e3eef7}
.tg-count i.on{background:var(--mint)}
.tg-say{background:var(--card);padding:8px 16px;border-radius:16px;font-size:19px;text-align:center;box-shadow:0 3px 0 #0001}
.tg-tip{font-size:14px;opacity:.7;text-align:center}
/* v0.53.0 마무리 정리 */
#wrap{justify-content:safe center;gap:14px;overflow-y:auto}
.wr-art{width:min(62vw,36vh,260px);aspect-ratio:1/1;border-radius:32px;background:#e9f8ff;box-shadow:0 6px 0 #0001;display:flex;align-items:center;justify-content:center}
.wr-art svg{width:78%;height:78%;animation:pop .4s}
.wr-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center;max-width:min(100%,420px)}
.wr-steps li{background:var(--card);border-radius:14px;padding:6px 10px;font-size:14px;opacity:.55;box-shadow:0 2px 0 #0001}
.wr-steps li.on{opacity:1;background:#fff7d6;transform:scale(1.06)}
.wr-steps li.ok{opacity:.9}
.wr-steps li.ok::before{content:'✓ ';color:var(--mint)}
#wrDone.ready{animation:likeBeat 1.2s ease-in-out infinite}

/* 꾸미기 화면 */
#closet{justify-content:flex-start}
.closet-panel{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;background:var(--card);border-radius:24px;padding:12px;box-shadow:0 6px 0 #0001}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex-shrink:0;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0;padding:8px 16px;border-radius:999px;background:#eef6fc;font-size:18px;white-space:nowrap}
.tab.active{background:var(--pink);color:#fff}
.grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start;padding:2px}
.item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;border-radius:18px;background:#fff;border:3px solid #e3f1fb}
.item .thumb{width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.item .thumb svg{width:84%;height:84%;overflow:visible}
.item .thumb svg.bthumb{width:112%;height:auto;transform:rotate(-28deg)}
.item.locked .thumb:has(.bthumb){opacity:.8;filter:grayscale(.25)}
.item .name{font-size:14px;line-height:1.2;text-align:center}
.item .tag{font-size:13px;color:#7a8aa3}
.item.equipped{border-color:var(--yellow);background:#fffbea}
.item.equipped .tag{color:#d99a00}
.item.locked .thumb{opacity:.45;filter:grayscale(.6)}
.item.locked .tag{color:var(--pink-d)}
.item.event{border-color:#ffc9dc}
.item.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.none-icon{font-size:30px;color:#b9c6d6}

/* 완료 화면 */
/* 완료: 선물 상자 보상 */
#done{justify-content:flex-start;gap:8px;overflow-y:auto}
.done-head{width:100%;display:flex;justify-content:center}
.star-pill{font-size:24px;padding:8px 22px}
.star-pill.bump{animation:pop .3s}
.gift-stage{position:relative;width:min(58vw,25vh,230px);aspect-ratio:1/1;flex-shrink:0;margin-top:4px}
.rays{position:absolute;inset:-28%;border-radius:50%;opacity:0;transition:opacity .6s;
  background:repeating-conic-gradient(from 0deg,#ffffffaa 0 9deg,#fff0 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 14s linear infinite}
.gift-stage.open .rays{opacity:1}
.gift-stage .char-wrap{inset:6%;transform:scale(0);opacity:0}
.gift-stage.open .char-wrap{animation:charPop .8s .25s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes charPop{to{transform:scale(1);opacity:1}}
.gift{position:absolute;left:14%;right:14%;bottom:6%;height:64%;padding:0;animation:giftBob .9s ease-in-out infinite}
@keyframes giftBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.gift svg{position:absolute;display:block}
.gift .gbody{left:0;right:0;bottom:0;height:70%;width:100%}
.gift .glid{left:-7%;width:114%;top:0;height:40%}
.gift-stage.open .gift{animation:none}
.gift-stage.open .glid{animation:lidOff .7s cubic-bezier(.2,.7,.4,1) forwards}
.gift-stage.open .gbody{animation:bodyOut .5s .2s ease-in forwards}
@keyframes lidOff{to{transform:translate(40%,-170%) rotate(35deg);opacity:0}}
@keyframes bodyOut{to{transform:translateY(30%) scale(.6);opacity:0}}
.gift-hint{font-size:18px;background:#fffbea;padding:6px 16px;border-radius:999px;border:2px solid var(--yellow);animation:breathe 1.2s ease-in-out infinite}
.gift-hint[hidden]{display:none}
.rw-list{list-style:none;width:min(100%,340px);display:flex;flex-direction:column;gap:6px}
.rw-list li{display:flex;justify-content:space-between;align-items:center;background:var(--card);padding:7px 14px;border-radius:14px;font-size:17px;
  opacity:0;transform:translateY(10px) scale(.95);transition:opacity .35s,transform .35s cubic-bezier(.3,1.6,.5,1);box-shadow:0 3px 0 #0001}
.rw-list li.show{opacity:1;transform:none}
.rw-list li b{color:#e0a100;font-weight:normal}
.rw-list li.lucky{background:linear-gradient(90deg,#fff3c4,#ffe0f0)}
.rw-list li.total{background:var(--yellow);font-size:20px;justify-content:center;gap:10px}
.rw-list li.total b{color:#b0400f}
#doneMsg:empty{display:none}
.flystar{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:16;pointer-events:none;will-change:transform,opacity}
.fwp{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:14;pointer-events:none;will-change:transform,opacity}
@keyframes spin{to{transform:rotate(360deg)}}
.done-btns{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}

/* 설정 화면 */
#settings{justify-content:flex-start}
.set-scroll{flex:1;min-height:0;width:100%;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.set-card{background:var(--card);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 5px 0 #0001}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:19px}
.set-row select{font-size:17px;padding:8px 10px;border-radius:12px;border:2px solid #d6e9f7;background:#fff;max-width:58%}
.set-sub{font-size:16px;opacity:.7}
.set-note{font-size:14px;opacity:.65;line-height:1.45}
.pack{display:flex;justify-content:space-between;align-items:center;font-size:17px;padding-top:10px;border-top:1px dashed #dbe8f2}
.pack small{opacity:.55;font-size:13px;margin-left:6px}
.pack button{padding:6px 16px;border-radius:999px;background:var(--yellow);font-size:16px;box-shadow:0 3px 0 var(--yellow-d)}
.pack .ok{color:var(--mint);font-size:15px}
.tgl{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:999px;background:#cfdbe6;position:relative;transition:.2s;flex-shrink:0;cursor:pointer}
.tgl::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px #0002}
.tgl:checked{background:var(--mint)}
.tgl:checked::after{left:25px}
.dev{background:#ffffffaa;border:2px dashed #c9d8e6;box-shadow:none}

/* 대화 창 */
/* 세균 */
.germ svg,.germ-hud svg,.boss svg,.rw-list .gi{display:block;overflow:visible}
.c-germs{position:absolute;left:0;top:0;width:1120em;height:640em;pointer-events:none}
.c-germs .germ{position:absolute;width:62em;height:62em}
.c-germs .germ svg{width:100%;height:100%;will-change:transform}
[data-gz="ul"] .germ[data-z="ul"] svg,[data-gz="ur"] .germ[data-z="ur"] svg,[data-gz="lr"] .germ[data-z="lr"] svg,[data-gz="ll"] .germ[data-z="ll"] svg{animation:germWig 1s ease-in-out infinite}
.c-germs .germ.pop svg{animation:germPop .45s ease-out forwards!important}
.c-germs .germ.raid{animation:raidIn .5s cubic-bezier(.3,1.7,.5,1) backwards}      /* v0.26 보스 기습 세균: 뿅 */
@keyframes raidIn{from{transform:translateY(-120em) scale(.2);opacity:0}to{transform:none;opacity:1}}
.boss-fly{position:absolute;z-index:6;top:calc(150px + env(safe-area-inset-top));left:0;width:min(24vw,18vh,110px);pointer-events:none;animation:bossFly 1.7s ease-in-out forwards}
.boss-fly svg{width:100%;height:auto;display:block;overflow:visible;animation:bossWig .5s ease-in-out infinite}
.boss-fly.rtl{animation-name:bossFlyR}
@keyframes bossFly{0%{transform:translate(-120%,20px) rotate(-10deg)}50%{transform:translate(calc(50vw - 50%),-6px) rotate(8deg)}100%{transform:translate(calc(100vw + 20%),24px) rotate(-6deg)}}
@keyframes bossFlyR{0%{transform:translate(calc(100vw + 20%),20px) rotate(10deg)}50%{transform:translate(calc(50vw - 50%),-6px) rotate(-8deg)}100%{transform:translate(-120%,24px) rotate(6deg)}}
.is-paused .germ svg{animation-play-state:paused}
@keyframes germWig{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) scale(1.06,.94)}}
@keyframes germPop{0%{transform:scale(1)}30%{transform:scale(1.4) rotate(15deg)}100%{transform:scale(0) rotate(-30deg);opacity:0}}
.germ-hud{position:absolute;z-index:4;top:calc(64px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));display:flex;align-items:center;gap:3px;
  background:#fff;border-radius:999px;padding:2px 12px 2px 3px;font-size:20px;color:#6b3fa0;box-shadow:0 3px 0 #0001;pointer-events:none}
.germ-hud svg{width:32px;height:32px}
.germ-hud span{font-size:14px;color:#a593c4}
.germ-hud.bump{animation:hudBump .35s ease-out}
@keyframes hudBump{40%{transform:scale(1.28)}}
.brushC .germ-hud{top:calc(150px + env(safe-area-inset-top))}
@media (orientation:landscape){ .brushC .germ-hud{top:calc(64px + env(safe-area-inset-top))} }
.boss{position:absolute;z-index:4;right:calc(8px + env(safe-area-inset-right));top:calc(196px + env(safe-area-inset-top));width:min(30vw,22vh,130px);pointer-events:none;
  animation:bossIn .7s cubic-bezier(.3,1.6,.5,1) both}
@media (orientation:landscape){ .brushC .boss{top:calc(108px + env(safe-area-inset-top))} }
.boss .bimg svg{width:100%;height:auto;will-change:transform;animation:bossWig .8s ease-in-out infinite}
.boss.hit .bimg svg{animation:bossHit .35s ease-out}
.boss .hp{display:flex;gap:3px;justify-content:center;margin-top:2px;background:#fff;border-radius:999px;padding:4px 6px;box-shadow:0 3px 0 #0001}
.boss .hp i{flex:1;height:9px;border-radius:5px;background:#ff5d8f;transition:background .2s}
.boss .hp i.off{background:#eee6f5}
.boss.down .bimg svg{animation:bossDown .9s ease-in forwards}
.boss.down .hp{opacity:0;transition:opacity .3s}
.is-paused .boss .bimg svg{animation-play-state:paused}
@keyframes bossIn{0%{transform:translateY(-60px) scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes bossWig{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.04,.96)}}
@keyframes bossHit{0%{transform:scale(1)}30%{transform:scale(.82,1.12) rotate(-12deg);filter:brightness(1.6)}100%{transform:scale(1)}}
@keyframes bossDown{0%{transform:scale(1)}25%{transform:scale(1.35) rotate(20deg)}100%{transform:scale(0) rotate(-200deg);opacity:0}}
.germ-badge{position:absolute;left:-14%;top:2%;z-index:2;display:flex;align-items:center;gap:2px;background:#fff;border-radius:999px;padding:2px 12px 2px 3px;
  font-size:20px;color:#6b3fa0;box-shadow:0 3px 0 #0001;animation:cardIn .5s .3s cubic-bezier(.3,1.5,.5,1) both}
.germ-badge[hidden]{display:none}
.germ-badge b{font-weight:normal}
.germ-badge .gi{width:34px;height:34px;display:block;overflow:visible}
#nextRow:not([hidden]) ~ #doneMsg{display:none}
/* 알 · 펫 */
.pet-wrap{position:relative}
.pet-spot{position:absolute;bottom:0;width:40%;aspect-ratio:1/1;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pet-spot svg,.pet-ride svg,.pc-art svg,.ps-stage svg{width:100%;height:100%;display:block;overflow:visible}
.pal-spot{right:-24%}
.egg-spot{left:-20%;width:32%}
.pet-spot svg{animation:petBob 1.8s ease-in-out infinite;transform-origin:50% 92%}
.egg-spot svg{animation:eggWob 2.6s ease-in-out infinite}
.pet-spot.hop svg{animation:petHop .55s ease-out}
.pet-spot.sleep svg{animation:petSleep 3s ease-in-out infinite}
.pet-spot.sleep::after{content:'z z';position:absolute;top:-6%;right:2%;font-size:clamp(14px,4vw,20px);color:#7f8fb8;animation:zz 2s ease-in-out infinite}
.pdots{display:flex;gap:4px;justify-content:center}
.pdots i{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #ffcf5a}
.pdots i.on{background:#ffcf5a}
.pet-spot .pdots{position:absolute;left:0;right:0;bottom:-10px}
.pet-bub{position:absolute;bottom:46%;z-index:2;max-width:min(64vw,240px);width:max-content;background:#fff;border-radius:16px;padding:8px 13px;font-size:16px;line-height:1.3;
  box-shadow:0 4px 0 #0001;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.pet-bub.show{opacity:1;transform:none}
.pet-bub.r{right:-22%}
.pet-bub.l{left:-20%}
.pet-ride{position:absolute;bottom:-2%;width:46%;aspect-ratio:1/1;pointer-events:none;z-index:1}
.pet-ride svg{animation:petBob 1.2s ease-in-out infinite;transform-origin:50% 92%;will-change:transform}
.pet-ride.egg svg{animation:eggWob 2s ease-in-out infinite}
.pet-ride.hop svg{animation:petHop .55s ease-out}
.is-paused .pet-ride svg{animation-play-state:paused}
.c-rider .pet-ride{right:-44%;bottom:0;width:50%}
.c-rider.right .pet-ride{right:auto;left:-44%}
@keyframes petBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%) scale(1.02,.98)}}
@keyframes eggWob{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-8deg)}84%{transform:rotate(7deg)}92%{transform:rotate(-4deg)}}
@keyframes petHop{0%{transform:translateY(0)}35%{transform:translateY(-22%) scale(.95,1.06)}70%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
@keyframes petSleep{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.96)}}
@keyframes zz{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.pc-art{width:62px;height:62px;flex-shrink:0}
.pc-art svg{animation:petBob 1.6s ease-in-out infinite;transform-origin:50% 92%}
@keyframes cardIn{0%{transform:translateY(16px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.pet-show{position:fixed;inset:0;z-index:21;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 50% 40%,#fffbe6 0,#ffe3f0 50%,#c9e9ff 100%)}
.pet-show.show{display:flex;animation:fadeIn .3s ease}
.ps-box{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,360px);text-align:center}
.ps-stage{position:relative;width:min(70vw,40vh,280px);aspect-ratio:1/1}
.ps-stage>div{position:absolute;inset:0}
.ps-stage::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff0 65%);opacity:0;transition:opacity .4s}
.ps-stage.burst::before,.ps-stage.grown::before{opacity:1}
.hatching .ps-egg svg{animation:eggShake .6s ease-in-out 4;transform-origin:50% 90%}
.hatching .ps-pet{opacity:0;transform:scale(.3)}
.hatching.burst .ps-egg{animation:eggBurst .45s ease-out forwards}
.hatching.burst .ps-pet,.growing.grown .after{animation:petPopIn .9s cubic-bezier(.3,1.7,.5,1) forwards}
.growing .after{opacity:0;transform:scale(.6)}
.growing .before svg{animation:petGlow .5s ease-in-out 3}
.growing.grown .before{opacity:0;transition:opacity .15s}
@keyframes eggShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}
@keyframes eggBurst{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1.5);opacity:0}}
@keyframes petPopIn{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
@keyframes petGlow{50%{transform:scale(1.12);filter:brightness(1.3) drop-shadow(0 0 12px #ffd54a)}}
.ps-title{font-size:clamp(22px,6.5vw,28px);color:var(--title);background:#fff;border-radius:20px;padding:10px 18px;box-shadow:0 4px 0 #0001;margin:0;line-height:1.3}
.ps-title:empty{visibility:hidden}
.ps-name{display:flex;flex-direction:column;gap:6px;font-size:17px;align-items:center}
.ps-name[hidden],.ps-box [hidden]{display:none}
.ps-name input{font:inherit;font-size:22px;text-align:center;padding:8px 12px;border-radius:14px;border:2px solid #d6e9f7;width:11em;max-width:100%}
/* v0.15 게임 요소 */
.tb-left{display:flex;gap:8px;align-items:center}
.flame{display:flex;align-items:center;gap:3px;transition:transform .2s}
.flame.off{opacity:.55;filter:grayscale(.7)}
.flame.l1{background:#fff3d6}
.flame.l2{background:linear-gradient(90deg,#ffe2a8,#ffc9a8);transform:scale(1.06)}
.flame.l3{background:linear-gradient(90deg,#ffcf7a,#ff9e7a);transform:scale(1.12);box-shadow:0 0 0 3px #ffd54a66,0 4px 0 #0001}
.menu-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,420px)}
.menu-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px 8px;border-radius:18px;background:var(--card);box-shadow:0 4px 0 #0001;font-size:15px}
.menu-btn:first-child{background:var(--yellow);box-shadow:0 4px 0 var(--yellow-d)}
.menu-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0001}
.menu-btn .mi{font-size:24px;line-height:1.1}
.mbadge{position:absolute;top:-6px;right:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--pink);color:#fff;font-size:13px;font-style:normal;line-height:22px}
.mbadge:empty{display:none}
.combo{position:absolute;z-index:5;left:calc(14px + env(safe-area-inset-left));pointer-events:none;font-size:26px;color:#ff5d8f;text-shadow:0 2px 0 #fff,0 0 8px #fff;opacity:0}
.brushC .combo{top:calc(150px + env(safe-area-inset-top))}
.combo.go{animation:comboUp .9s ease-out}
@keyframes comboUp{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.25)}70%{opacity:1;transform:translateY(-14px)}100%{opacity:0;transform:translateY(-26px)}}
.screen.active.shake{animation:shakeV .32s ease-out}
@keyframes shakeV{20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.flash{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 75% 30%,#fff 0,#fffbe0cc 30%,#fff0 70%);animation:flashOut .8s ease-out forwards}
@keyframes flashOut{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.boss.down .bimg svg{animation:bossDown 1.3s cubic-bezier(.2,.0,.2,1) forwards}
.fairy{position:absolute;z-index:6;top:22%;left:0;width:min(22vw,90px);pointer-events:none;animation:fairyFly 5.5s ease-in-out forwards}
.fairy svg{width:100%;display:block;overflow:visible;animation:fairyBob .6s ease-in-out infinite alternate}
@keyframes fairyFly{0%{transform:translateX(-30vw)}45%,55%{transform:translateX(38vw)}100%{transform:translateX(120vw)}}
@keyframes fairyBob{to{transform:translateY(-10px) rotate(6deg)}}
body.eve{background:linear-gradient(180deg,#25336a,#5b4d9c 80%)}
body.eve::before{content:'';position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 12% 12%,#fff,#fff0),radial-gradient(2px 2px at 30% 30%,#fffbe0,#fff0),radial-gradient(2.5px 2.5px at 72% 10%,#fff,#fff0),radial-gradient(2px 2px at 86% 34%,#fff,#fff0),radial-gradient(1.5px 1.5px at 52% 18%,#fff,#fff0),radial-gradient(2px 2px at 8% 62%,#fff,#fff0),radial-gradient(2px 2px at 92% 70%,#fffbe0,#fff0),radial-gradient(1.5px 1.5px at 60% 88%,#fff,#fff0)}
body.eve .brushC{background:radial-gradient(2px 2px at 14% 8%,#fff,#fff0),radial-gradient(2.5px 2.5px at 82% 6%,#fff,#fff0),radial-gradient(2px 2px at 60% 94%,#fffbe0,#fff0),radial-gradient(2px 2px at 8% 90%,#fff,#fff0),linear-gradient(180deg,#2b3a72,#5b4d9c)}
#done .done-btns{flex-direction:row;gap:10px;width:min(100%,420px)}
#done .done-btns .big-btn{flex:1;min-width:0}
#done .done-btns .sub-btn{flex-shrink:0;padding:12px 16px}
#done .bottom{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));margin-top:auto;padding:10px 0 calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#e3f5ff00,#e3f5ffee 22%)}
.germ.gold svg{filter:drop-shadow(0 0 4px #fff3a0)}
.rare{filter:drop-shadow(0 0 6px #ffe680)}   /* 귀한 색 펫 · 특별한 알 */
.pet-tools{display:flex;gap:8px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.pet-tools[hidden]{display:none}
.pet-tools input{flex:1;min-width:0;font:inherit;font-size:17px;padding:8px 12px;border-radius:12px;border:2px solid #d6e9f7}
.pet-tools p{margin:0;font-size:15px;color:#5a6a82}
.pal-btn{flex-shrink:0;padding:9px 14px;border-radius:999px;background:var(--pink);color:#fff;font-size:16px;box-shadow:0 3px 0 var(--pink-d)}
.pal-btn.on{background:#e9f7ef;color:#2f9c66;box-shadow:none}
.pet-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;width:100%}
.pet-strip::-webkit-scrollbar{display:none}
.pet-strip button{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:#f4faff;border:3px solid #e3f1fb;padding:2px}
.pet-strip button.on{border-color:var(--yellow);background:#fffbea}
.pet-strip svg{width:100%;height:100%;display:block;overflow:visible}
.room-pet.big{left:30%;width:40%;bottom:6%}
.stage-name{position:absolute;left:50%;top:6%;transform:translateX(-50%);background:#ffffffe6;border-radius:999px;padding:4px 14px;font-size:17px;white-space:nowrap;box-shadow:0 3px 0 #0001}
.stage-name small{font-size:13px;color:#7a8aa3}
.item.egg-card .thumb svg{width:70%}
.pal-change{position:absolute;right:-24%;top:20%;z-index:2;padding:4px 10px;border-radius:999px;background:#ffffffee;font-size:13px;color:#5a6a82;box-shadow:0 3px 0 #0001}
.pal-change[hidden]{display:none}
.egg-mini{font-size:12px;color:#8a7a5a;margin-left:6px;white-space:nowrap}
.next-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,340px)}
.next-row[hidden]{display:none}
.next-card{display:flex;flex-direction:column;align-items:center;gap:3px;background:linear-gradient(180deg,#fff7d6,#ffe9f3);border-radius:18px;padding:6px 8px 8px;box-shadow:0 4px 0 #0001;animation:cardIn .5s cubic-bezier(.3,1.5,.5,1)}
.next-card[hidden]{display:none}
.next-card:only-child{grid-column:1/-1}
.next-card .pc-art{width:58px;height:58px}
.next-card p{font-size:14px;line-height:1.3;margin:0;text-align:center}
.boss-next{background:linear-gradient(180deg,#efe6ff,#e3f3ff)}
.boss-next svg{filter:brightness(0) opacity(.75)}
.boss-next .pc-art{position:relative}
.boss-next .pc-art::after{content:'?';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:26px}
.stamp-btn{position:relative;width:min(100%,340px);border-radius:16px;padding:7px 12px;background:#ffffffcc;box-shadow:0 3px 0 #0001;overflow:hidden;font-size:14px;color:#5a6a82;opacity:.55;transition:opacity .3s}
.stamp-btn.ready{opacity:1}
.stamp-btn::before{content:'';position:absolute;inset:0;background:#ffd54a;transform-origin:left;transform:scaleX(var(--p,0))}
.stamp-btn .sb-txt{position:relative;display:flex;flex-direction:column;gap:1px}
.stamp-btn small{font-size:13px;color:#e0607f}
.stamp-btn.done small{visibility:hidden}
.stamp{position:absolute;right:-10%;top:-2%;z-index:3;width:46%;opacity:0;pointer-events:none}
.stamp svg{width:100%;display:block}
.stamp.show{animation:stampIn .45s cubic-bezier(.5,0,.6,1.6) forwards}
@keyframes stampIn{0%{opacity:0;transform:scale(2.6) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(-14deg)}}
.book-tip{min-height:2.6em;margin:0;font-size:16px;line-height:1.3;text-align:center;background:#f4faff;border-radius:14px;padding:8px 10px}
.book-tip:empty{visibility:hidden}
.item.unseen .thumb svg{filter:brightness(0) opacity(.16)!important}
.item.unseen .thumb{position:relative}
.item.unseen .thumb::after{content:'?';position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:#9aaccc}
.item.shinyc{border-color:#ffe08a;background:#fffbea}
.room-scene{position:relative;width:100%;max-width:440px;aspect-ratio:400/260;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 #0001;flex-shrink:0}
.room-scene>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.room-pet{position:absolute;bottom:4%;width:22%;aspect-ratio:1/1;padding:0;border:0;background:none}
.room-pet svg{width:100%;height:100%;display:block;overflow:visible;animation:petBob 1.8s ease-in-out infinite;transform-origin:50% 92%}
.room-pet.hop svg{animation:petHop .55s ease-out}
.room-empty{position:absolute;left:6%;right:6%;top:10%;text-align:center;background:#ffffffdd;border-radius:14px;padding:8px;font-size:15px}
.map-chips{display:flex;gap:6px;overflow-x:auto;width:100%;scrollbar-width:none;flex-shrink:0;padding-bottom:2px}
.map-chips::-webkit-scrollbar{display:none}
.map-chip{flex-shrink:0;padding:6px 12px;border-radius:999px;background:var(--card);font-size:15px;box-shadow:0 3px 0 #0001}
.map-chip.cur{background:var(--pink);color:#fff}
.map-chip.view{outline:3px solid var(--yellow);outline-offset:1px}
.map-reward{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#fff7d6,#ffe9f3);border-radius:16px;padding:6px 14px;box-shadow:0 4px 0 #0001;font-size:15px;flex-shrink:0}
.map-reward b{font-weight:normal;color:#8a6a2a}
.map-reward svg{width:34px;height:34px;display:block;overflow:visible}
.map-how{margin:0;font-size:13px;color:#5a6a82;text-align:center;flex-shrink:0}
.map-chip.lock{opacity:.5}
.map-scene{flex:1;min-height:0;width:100%;display:flex;justify-content:center}
.map-scene svg{height:100%;max-width:100%;display:block}
.map-me{animation:petBob 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.map-left{font-size:20px;background:var(--card);border-radius:999px;padding:8px 18px;margin:0;box-shadow:0 4px 0 #0001}
.week{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.wk{display:grid;grid-template-columns:42px repeat(7,1fr);gap:3px;align-items:center;text-align:center;font-size:14px}
.wk i{font-style:normal;background:#f4faff;border-radius:8px;padding:4px 0;line-height:1.15}
.wk:first-child i{background:none}
.wk i.today{background:#fff3c4}
.wk i small{display:block;font-size:11px;color:#8a9ab3}
.wk b{font-weight:normal;font-size:13px;color:#5a6a82}
/* v0.19 변신 · 이번 주 · 팀 합체 · 동물 집 · 간식 */
.char .aura-glow{transform-box:fill-box;transform-origin:center;animation:auraPulse 2s ease-in-out infinite}
.char .aura-spin{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
@keyframes auraPulse{50%{transform:scale(1.06);opacity:.7}}
.tab.has-new{position:relative}
.tab.has-new::after{content:'';position:absolute;top:3px;right:5px;width:9px;height:9px;border-radius:50%;background:#ff5d6e;box-shadow:0 0 0 2px #fff}
.grid-note{grid-column:1/-1;margin:0;font-size:14px;line-height:1.35;color:#5a6a82;background:#f4faff;border-radius:14px;padding:7px 10px;text-align:center}
.wk-note{background:linear-gradient(90deg,#fff7d6,#ffe9f3);color:#8a5a2a}
.item.hero-i .tag{color:#3a7fd6}
.item.hero-card{grid-column:1/-1;flex-direction:row;gap:10px;padding:8px 12px;text-align:left;border-color:var(--ha)}
.item.hero-card .thumb{width:30%;flex-shrink:0}
.item.hero-card .thumb svg{width:100%;height:100%}
.item.hero-card.equipped{box-shadow:0 0 0 3px var(--ha) inset,0 0 16px var(--ha)}
.item.hero-card.locked .thumb{opacity:.55;filter:grayscale(.4)}
.hc-txt{flex:1;display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.hc-txt .name{font-size:18px}
.hc-parts{display:flex;gap:4px}
.hc-parts i{width:34px;height:34px;border-radius:10px;background:#f4f6fa;display:grid;place-items:center;opacity:.35;filter:grayscale(1)}
.hc-parts i.on{opacity:1;filter:none;background:#fff7d6}
.hc-parts svg{width:86%;height:86%;overflow:visible}
.ps-stage>.ps-rays{inset:-28%;border-radius:50%;opacity:0;background:repeating-conic-gradient(var(--tc,#ffe68a) 0 9deg,#fff0 9deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 25%,#0000 70%);mask-image:radial-gradient(circle,#000 25%,#0000 70%);transition:opacity .4s}
.ps-stage.grown>.ps-rays,.ps-stage.merged>.ps-rays{opacity:.5;animation:spin 9s linear infinite}
.ps-stage>.ps-flash{inset:-25%;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 35%,#fff0 70%);opacity:0;pointer-events:none;z-index:5}
.ps-stage.grown>.ps-flash,.ps-stage.merged>.ps-flash{animation:psFlash .9s ease-out}
@keyframes psFlash{0%{opacity:0;transform:scale(.3)}18%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.ps-stage.hero .before svg{animation:heroCharge 1.6s ease-in forwards}
.ps-stage.hero.grown .before{opacity:0}
.ps-stage.hero.grown .after{animation:heroIn 1s cubic-bezier(.3,1.6,.5,1) forwards}
.ps-stage.hero.grown .after svg{filter:drop-shadow(0 0 10px var(--tc,#ffe680))}
@keyframes heroCharge{0%{transform:none}55%{transform:scale(1.08) rotate(-10deg);filter:brightness(1.3) drop-shadow(0 0 10px #fff)}100%{transform:scale(.25) rotate(720deg);filter:brightness(3);opacity:0}}
@keyframes heroIn{0%{opacity:0;transform:scale(.2) rotate(-300deg)}100%{opacity:1;transform:none}}
.ps-stage>.ps-mem{inset:auto;aspect-ratio:1/1;opacity:0;animation:memIn .6s var(--d) cubic-bezier(.3,1.7,.5,1) forwards;transition:transform .9s cubic-bezier(.6,0,.4,1)}
.ps-stage.merge>.ps-mem{transform:translate(var(--mx),var(--my)) scale(.3) rotate(540deg)}
.ps-stage.merged>.ps-mem svg{animation:petHop .55s ease-out 3;filter:drop-shadow(0 0 8px var(--tc,#ffe680))}
.ps-stage.team.merged::after{content:'';position:absolute;inset:-6%;border-radius:50%;border:6px solid var(--tc);box-shadow:0 0 24px var(--tc),inset 0 0 24px var(--tc);opacity:.7;animation:ringIn .6s ease-out}
@keyframes memIn{0%{opacity:0;scale:.3;translate:0 40%}100%{opacity:1;scale:1;translate:0 0}}
@keyframes ringIn{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:.7}}
.pet-spot[class*="tk-"] svg,.room-pet[class*="tk-"] svg{transform-origin:50% 60%!important}
.tk-spin svg{animation:tkSpin 1.1s ease-in-out!important}
.tk-jump svg{animation:tkJump 1.1s ease-out!important}
.tk-dance svg{animation:tkDance 1.1s ease-in-out!important}
.tk-flip svg{animation:tkFlip 1.1s ease-in-out!important}
@keyframes tkSpin{0%{transform:none}45%{transform:translateY(-14%) rotate(200deg)}100%{transform:rotate(360deg)}}
@keyframes tkJump{0%,100%{transform:none}18%{transform:scale(1.12,.84)}50%{transform:translateY(-48%) scale(.94,1.08)}80%{transform:scale(1.08,.92)}}
@keyframes tkDance{0%,100%{transform:none}20%,60%{transform:translateX(-10%) rotate(-14deg)}40%,80%{transform:translateX(10%) rotate(14deg)}}
@keyframes tkFlip{0%{transform:none}50%{transform:translateY(-42%) rotate(-180deg)}100%{transform:rotate(-360deg)}}
.treat-row{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap}
.treat-row small{font-size:12px;color:#7a8aa3;flex-basis:100%}
.hearts{font-size:18px;color:#ff5d8f;letter-spacing:1px;white-space:nowrap}
.hearts s{text-decoration:none;color:#e3e9f1}
.treat-btn{padding:7px 14px;border-radius:999px;background:#ffe2a8;color:#8a5a2a;font-size:16px;box-shadow:0 3px 0 #e8c070}
.treat-btn.trick{background:linear-gradient(90deg,#ffe68a,#ffc2e0);color:#7a3a8a;box-shadow:0 3px 0 #e8b0d0}
.treat-wait{font-size:14px;color:#7a8aa3}
.look-row{display:flex;align-items:center;gap:8px;width:100%}
.look-row>span{font-size:15px;color:#5a6a82;flex-shrink:0}
.look-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 6px;border-radius:14px;background:#f1f7fc;border:3px solid transparent;font-size:14px;color:#3a4a62;min-width:0}
.look-btn svg{width:46px;height:46px;display:block;overflow:visible}
.look-btn b{font-weight:normal}
.look-btn.on{border-color:var(--pink);background:#fff0f6}
.look-btn.lock{opacity:.55;font-size:22px;justify-content:center;min-height:68px}
.look-btn.lock b{font-size:14px}
.item .lv{position:absolute;top:4px;right:6px;z-index:1;font-style:normal;font-size:12px;color:#ff5d8f;background:#fff;border-radius:999px;padding:0 5px;box-shadow:0 1px 0 #0001}
.heart-fly{position:absolute;z-index:6;font-style:normal;color:#ff5d8f;font-size:26px;pointer-events:none;opacity:0;animation:heartUp 1.2s ease-out forwards}
@keyframes heartUp{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-10px) scale(1.2)}100%{opacity:0;transform:translateY(-80px) scale(.9)}}
#bookGrid.teams{grid-template-columns:repeat(2,1fr)}
.item.team-c .thumb{aspect-ratio:2/1}
.item.team-c .thumb svg{width:100%;height:100%}
.item.team-c.done{border-color:#ffe08a;background:#fffbea}
.house-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
.house-chips::-webkit-scrollbar{display:none}
.h-chip{flex-shrink:0;padding:6px 11px;border-radius:999px;background:#f4faff;border:2px solid #e3f1fb;font-size:15px;white-space:nowrap}
.h-chip.on{background:#fffbea;border-color:var(--yellow)}
.h-chip.lock{color:#7a8aa3}
.h-chip small{font-size:12px;color:var(--pink-d)}
.room-scene .hab-off{filter:grayscale(.55) brightness(1.05)}
.hab-lock{position:absolute;left:10%;right:10%;top:12%;display:flex;flex-direction:column;align-items:center;gap:6px;background:#ffffffee;border-radius:18px;padding:10px 12px;box-shadow:0 4px 0 #0001;text-align:center}
.hab-lock b{font-weight:normal;font-size:19px}
.hab-lock span{font-size:14px;color:#5a6a82}
.hab-build{padding:8px 18px;border-radius:999px;background:var(--pink);color:#fff;font-size:17px;box-shadow:0 3px 0 var(--pink-d)}
.hab-goal{padding:4px 12px;border-radius:999px;background:#f4faff;font-size:14px;color:#5a6a82}
.hab-goal.on{background:#fff3c4;color:#8a5a2a}
.room-pet.hab-p svg{animation-delay:var(--bd,0s)}
.room-scene.hab .room-empty{top:auto;bottom:10%}
.hab-tag{position:absolute;left:3%;top:4%;background:#ffffffdd;border-radius:999px;padding:3px 10px;font-size:13px;box-shadow:0 2px 0 #0001}
.hab-nav{position:absolute;top:40%;z-index:3;width:34px;height:44px;border-radius:12px;background:#ffffffcc;font-size:26px;line-height:40px;color:#5a6a82;box-shadow:0 2px 0 #0001}
.hab-nav.prev{left:2%}
.hab-nav.next{right:2%}
.hab-pg{position:absolute;right:3%;top:4%;background:#ffffffdd;border-radius:999px;padding:3px 10px;font-size:13px}
.goal-pill{display:flex;align-items:center;gap:4px}
.gbar{display:inline-block;width:38px;height:9px;border-radius:5px;background:#eef3f8;overflow:hidden;box-shadow:inset 0 0 0 1px #dfe8f2}
.gbar[hidden]{display:none}
.gbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd54a,#ff9e7a);border-radius:5px;transition:width .6s}
#goalIc{font-size:16px}
.gbar[hidden]+#goalIc{display:none}
.goal-pill.ready{animation:goalGlow 1.4s ease-in-out infinite}
@keyframes goalGlow{50%{box-shadow:0 0 0 4px #ffd54a99,0 4px 0 #0001}}
.rw-list li.goal{background:#fff7d6;color:#8a5a2a;font-size:15px;justify-content:center}
.egg-spot.feat svg{filter:drop-shadow(0 0 6px #ffd54a)}
/* v0.22 스페셜 영상 (세로 9:16) */
#special{max-width:none;padding:0;justify-content:center;align-items:center;gap:10px;background:#2a2350}
.sp-stage{position:relative;height:min(calc(100vh - 170px),calc((100vw - 24px) * 16 / 9));height:min(calc(100dvh - 170px),calc((100vw - 24px) * 16 / 9));aspect-ratio:9/16;overflow:hidden;border-radius:20px;border:4px solid #24324a;background:#1a1638}
@media (orientation:landscape){ .sp-stage{height:calc(100vh - 24px);height:calc(100dvh - 24px)} #special .th-head{display:none} }
.sp-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#1a1638;opacity:0;transition:opacity .4s}
.sp-stage.open video{opacity:1}
.sp-stage.open .th-cur.l{transform:translateX(-100%)}
.sp-stage.open .th-cur.r{transform:translateX(100%)}
.sp-stage.open .th-title{opacity:0;transform:translate(-50%,-90%) scale(.8)}
#special .sp-sound{right:auto;left:calc(14px + env(safe-area-inset-left));background:#ffd54a}
#special .sp-sound[hidden]{display:none}
.sp-part{position:absolute;left:50%;top:9%;transform:translateX(-50%);z-index:12;background:#fff8d6;border:3px solid #24324a;border-radius:999px;padding:4px 16px;font-size:clamp(16px,4.5vw,22px);opacity:0;pointer-events:none}   /* v0.27 2부 표시 */
.sp-part.show{animation:spPart 1.8s ease forwards}
@keyframes spPart{0%{opacity:0;transform:translate(-50%,-8px) scale(.8)}15%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}
/* v0.21 반짝이 극장 */
#theater{max-width:none;padding:0;justify-content:center;align-items:center;gap:14px;background:#2a2350}
.th-head{color:#fff8d6;font-size:clamp(18px,5vw,24px);text-align:center;padding:0 16px;line-height:1.3;min-height:1.3em}
.th-head small{display:block;font-size:.75em;color:#c8c0ff}
@media (orientation:landscape){ .th-head{display:none} }
.th-stage{position:relative;width:min(100vw,86vh,560px);aspect-ratio:1/1;overflow:hidden;border-radius:20px;background:#cdeefc;border:4px solid #24324a}
@media (orientation:landscape){ .th-stage{width:min(96vw,calc(86vh * 4 / 3),760px);aspect-ratio:4/3} }
.th-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.th-night{position:absolute;inset:0;background:#2a3a8a26;pointer-events:none;z-index:1}
.th-a{position:absolute;pointer-events:none}
.th-in{transform-origin:50% 100%}
.th-in svg{width:100%;height:auto;display:block;overflow:visible}
.th-a .flame{transform-box:fill-box;transform-origin:50% 0;animation:flame .18s ease-in-out infinite alternate}
.th-bub{position:absolute;z-index:8;transform:translateX(-50%);background:#fff;border:3px solid #24324a;border-radius:16px;padding:6px 12px;
  font-size:clamp(15px,4.4vw,22px);max-width:64%;width:max-content;text-align:center;line-height:1.25;animation:pop .3s;box-shadow:0 3px 0 #0002}
.th-bub.nar{left:50%;top:5%;background:#fff8d6}
.th-fx{position:absolute;z-index:7;pointer-events:none;width:6%;margin:0 0 -3% -3%}
.th-fx svg{width:100%;display:block;overflow:visible}
.th-cur{position:absolute;top:0;bottom:0;width:51%;z-index:10;border:4px solid #24324a;
  background:repeating-linear-gradient(90deg,#e8455f 0 22px,#c8324a 22px 30px);transition:transform .8s cubic-bezier(.6,0,.3,1)}
.th-cur.l{left:-4px;border-radius:0 0 34px 0}
.th-cur.r{right:-4px;border-radius:0 0 0 34px}
.th-stage.open .th-cur.l{transform:translateX(-100%)}
.th-stage.open .th-cur.r{transform:translateX(100%)}
.th-title{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:11;background:#fff8d6;border:4px solid #24324a;border-radius:20px;
  padding:12px 22px;text-align:center;box-shadow:0 6px 0 #0003;width:max-content;max-width:86%;animation:pop .5s;transition:opacity .4s,transform .4s}
.th-title b{display:block;font-weight:normal;font-size:clamp(26px,7.5vw,38px);color:#e8455f}
.th-title span{font-size:clamp(17px,4.8vw,24px)}
.th-stage.open .th-title{opacity:0;transform:translate(-50%,-90%) scale(.8)}
.th-skip{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));padding:10px 18px;border-radius:999px;
  background:#ffffffe6;font-size:17px;z-index:12;box-shadow:0 3px 0 #0003}
.th-like{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));width:64px;height:64px;border-radius:50%;
  background:#ffffffe6;font-size:38px;line-height:1;color:#e8455f;z-index:12;box-shadow:0 3px 0 #0003;animation:pop .4s, likeBeat 1.2s ease-in-out .4s infinite}   /* v0.52.0 좋아요 */
.th-like.on{background:#ffe0ea;animation:pop .35s}
@keyframes likeBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.gift-peek{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:min(24vw,24vh,120px);aspect-ratio:1/1;
  border-radius:28px;background:#ffffffb3;box-shadow:0 4px 0 #0001;z-index:3;pointer-events:none}   /* v0.53.2 선물 펫 미리 보기 */
.gift-peek.left{right:auto;left:calc(12px + env(safe-area-inset-left))}
.gift-peek .gp-art{position:absolute;inset:10%}
.gift-peek .gp-art svg{width:100%;height:100%;display:block;overflow:visible;animation:petBob 1.6s ease-in-out infinite;transform-origin:50% 92%}
.gift-peek span{position:absolute;top:-10px;right:-6px;font-size:22px}
.gift-peek .pdots{position:absolute;left:0;right:0;bottom:-14px}
.modal{position:fixed;inset:0;background:#24324a88;display:none;align-items:center;justify-content:center;z-index:20;padding:24px}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:28px;padding:24px 22px;text-align:center;width:min(100%,340px);display:flex;flex-direction:column;align-items:center;gap:14px;animation:pop .3s}
.modal-box p{font-size:23px;line-height:1.35}
.dlg-icon:empty{display:none}
.dlg-icon svg{width:96px;height:96px;overflow:visible}
.dlg-icon svg.bthumb{width:220px;height:auto}
.big-btn.small{font-size:24px;padding:16px;animation:none}
.text-btn{font-size:18px;opacity:.6;padding:8px}
/* v0.28.5 부모 확인 (곱셈) */
#gate{z-index:25}
/* v0.32.0 반짝이 클럽 */
#subIntro{z-index:24}
.sub-box{gap:10px;max-width:360px;max-height:92vh;overflow:auto}
.sub-who{font-size:15px;opacity:.7}
.sub-box .set-note{font-size:14px;line-height:1.45;margin:0}
.sub-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:16px;line-height:1.4}
.sub-list li::before{content:'⭐ '}
.sub-agree{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:14px;line-height:1.45;background:#f3f8fd;border-radius:14px;padding:10px 12px}
.sub-agree input{width:22px;height:22px;flex-shrink:0;margin-top:1px}
.sub-start{font-size:22px;padding:14px 18px}
.sub-start:disabled{opacity:.45}
.sub-links{font-size:13px;opacity:.6}
.sub-links a{color:inherit}
.sub-st{font-size:17px;font-weight:800}
.sub-btns{display:flex;justify-content:space-between;flex-wrap:wrap}
.sub-btns .text-btn{font-size:15px}
.legal-links a,.sub-links a{color:inherit;text-decoration:underline;cursor:pointer}
.bk-warn{opacity:1;color:#b2405a;font-weight:700}
/* v0.31.0 아이 여럿 */
#kidPick{z-index:23}
.kid-chip{align-self:center;background:var(--card);border-radius:999px;padding:6px 16px;font-size:17px;font-weight:800;color:var(--ink);box-shadow:0 3px 0 #0001;margin-bottom:4px}
.kid-box{gap:14px}
.kid-pick{display:flex;flex-direction:column;gap:10px;width:min(280px,72vw)}
.kid-pick button{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:20px;background:#eef4fb;font-size:22px;font-weight:800;color:var(--ink);box-shadow:0 4px 0 #0001;text-align:left}
.kid-pick button .ka{font-size:34px}
.kid-pick button .ks{margin-left:auto;font-size:16px;opacity:.7;white-space:nowrap}
.kid-pick button.on{background:var(--mint);color:#fff}
.kid-rows{display:flex;flex-direction:column;gap:8px}
.kid-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#f3f8fd}
.kid-row.on{background:#e3f6ee;box-shadow:inset 0 0 0 2px var(--mint)}
.kid-row .kn{flex:1;min-width:0;font-size:17px;font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kid-row .ka{font-size:24px}
.kid-row small{font-size:13px;opacity:.6;white-space:nowrap}
.kid-row .kd{font-size:14px;padding:4px 10px;border-radius:999px;background:#fde8ec;color:#b2405a;flex-shrink:0}
.gate-title{font-size:22px;font-weight:800;color:var(--title)}
.modal-box p.gate-note{font-size:16px;line-height:1.4;opacity:.7}
.modal-box p.gate-note.bad{color:var(--pink-d);opacity:1}
.modal-box p.gate-q{font-size:36px;font-weight:800;letter-spacing:1px}
.gate-ans{min-width:130px;font-size:32px;font-weight:800;padding:6px 18px;border-radius:16px;background:#eef4fb;color:var(--ink)}
.gate-pad{display:grid;grid-template-columns:repeat(3,68px);gap:10px}
.gate-pad button{height:58px;border-radius:18px;font-size:26px;font-weight:800;background:#eef4fb;color:var(--ink);box-shadow:0 4px 0 #0001}
.gate-pad button:active{transform:translateY(2px);box-shadow:none}
.gate-pad [data-k=ok]{background:var(--mint);color:#fff}
.gate-box.shake{animation:shake .3s 2}
/* v0.30.0 오늘의 퀴즈 */
.bday-sels{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.quiz-pill{background:var(--yellow);box-shadow:0 4px 0 var(--yellow-d);border-radius:999px;padding:10px 22px;font-size:20px;font-weight:800;color:var(--ink);animation:pop .4s}
.share-pill{background:#ffb3cf;box-shadow:0 4px 0 #e98bb0;margin-left:6px}  /* v0.45.0 자랑하기 */
#quiz{z-index:22}
.quiz-pic{font-size:40px;line-height:1.25;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;max-width:300px;min-height:56px}
.quiz-pic .qp-plus{font-size:34px;font-weight:800;color:var(--title);padding:0 6px}
.quiz-pic .qp-num{font-size:46px;font-weight:800;color:var(--ink);letter-spacing:2px}
.modal-box p.quiz-q{font-size:21px;line-height:1.35}
.quiz-hear{font-size:22px;background:#eef4fb;border-radius:999px;padding:4px 14px}
.quiz-opts{display:flex;gap:12px;justify-content:center}
.quiz-opts button{width:76px;height:72px;border-radius:20px;font-size:34px;font-weight:800;background:#eef4fb;color:var(--ink);box-shadow:0 5px 0 #0001}
.quiz-opts button:active{transform:translateY(2px);box-shadow:none}
.quiz-opts button.no{opacity:.35;animation:shake .3s 1}
.quiz-opts button.yes{background:var(--mint);color:#fff}
.modal-box p.quiz-msg{font-size:18px;min-height:1.3em;color:var(--title)}
.modal-box p.quiz-msg.bad{color:var(--pink-d)}
.quiz-stamps{display:flex;gap:6px;align-items:center;font-size:15px;opacity:.85}
.quiz-stamps i{width:16px;height:16px;border-radius:50%;background:#dfe7f1;display:inline-block}
.quiz-stamps i.on{background:var(--pink)}

/* 알림 */
#toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translate(-50%,-20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:22px;font-size:17px;opacity:0;pointer-events:none;transition:.25s;z-index:30;width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.35}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* 색종이 */
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:15}
.cf{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}

@media (max-height:700px){
  .big-btn{padding:13px;font-size:26px}
  .sub-btn{padding:9px 20px;font-size:19px}
  h1{font-size:28px}
  .today{font-size:16px;padding:6px 12px}
  .event-badge{font-size:15px;padding:4px 12px}
}
@media (prefers-reduced-motion:reduce){
  .cloud,.big-btn,.char .body,.char .hands circle{animation:none}
  #fx{display:none}
}
/* v0.41.0 그림이 그려지기 전 자리 (화면에 보이면 그림으로 바뀜) */
i.lz{display:block;width:84%;height:84%;border-radius:50%;background:#0000000a}
.pet-strip i.lz{width:100%;height:100%}
/* v0.42.0 요금제 고르기 (연 구독 · 월 구독 · 평생 이용권) */
.sub-plans{display:flex;flex-direction:column;gap:8px;text-align:left}
.sub-plan{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:10px 14px;border-radius:16px;border:3px solid #e3f1fb;background:#fff;text-align:left}
.sub-plan.on{border-color:var(--pink);background:#fff4f8}
.sub-plan .sp-name{font-size:16px;font-weight:800}
.sub-plan .sp-price{font-size:18px;grid-row:span 2;align-self:center}
.sub-plan small{font-size:13px;opacity:.75;line-height:1.35}
.sub-plan .sp-best{font-style:normal;font-size:12px;background:var(--yellow);border-radius:999px;padding:2px 8px;margin-left:4px;white-space:nowrap}
/* v0.47.0 웹 막기 */
.web-gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(#8fd3ff,#e9f8ff)}
.web-gate[hidden]{display:none}
.wg-box{background:#fff;border-radius:28px;padding:28px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 8px 0 #bfe3f7}
.wg-box img{border-radius:22px}
.wg-box h1{font-size:26px;margin:12px 0 8px;color:var(--ink)}
.wg-box p{font-size:17px;line-height:1.5;color:var(--ink)}
.wg-store{display:inline-block;margin-top:14px;text-decoration:none}
.wg-soon{margin-top:14px;font-weight:800}
.wg-links{margin-top:18px;font-size:14px}
.wg-links a{color:var(--ink)}
/* v0.50.0 극장 2.0: 카메라 층 · 말하기 · 표정 */
.th-world{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.th-a.talk .char .m-smile{display:none}
.th-a.talk .char .m-open{display:inline;transform-box:fill-box;transform-origin:50% 0;animation:thTalk .26s ease-in-out infinite alternate}
@keyframes thTalk{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
.th-a.talk:not(:has(.char)) .th-in{animation:thBob .3s ease-in-out infinite alternate}
@keyframes thBob{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-4%) scale(1.03,.97)}}
.char.face-happy .m-smile,.char.face-sad .m-smile,.char.face-surprised .m-smile,.char.face-determined .m-smile,.char.face-sleep .m-smile{display:none}
.char.face-happy .eyes,.char.face-sleep .eyes{display:none}
.char.face-wink .eyes ellipse:last-of-type,.char.face-wink .eyes circle:nth-of-type(3),.char.face-wink .eyes circle:nth-of-type(4){display:none}
.char.face-surprised .eyes{animation:none;transform:scale(1.15)}
.th-a.talk .char .th-face .mo{display:none}
.th-a.sleeping .th-in{animation:thBreath 2.6s ease-in-out infinite}
@keyframes thBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.96)}}