/* 쉽게 바꾸는 값: 색상, 캐릭터 크기, 모바일 페이지 폭 */
:root{--paper:#f7fbff;--sky:#5b95d6;--sky-dark:#3d6fae;--sky-light:#bcd7f2;--sky-soft:#e3effb;--ink:#3b3a44;--muted:#737c8c;--track:#e4edf7;--peach:#f2a65a;--character-size:270px;--page-width:440px}
*{box-sizing:border-box}
html{background:#edf3fa;color:var(--ink);font-family:"Galmuri11","Galmuri9",system-ui,sans-serif;font-synthesis:none;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:grid;place-items:center}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--sky);outline-offset:4px}
::selection{background:#cfe2f7;color:var(--ink)}
[hidden]{display:none!important}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:var(--page-width);min-height:100svh;background:var(--paper);padding:max(28px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center}
.intro{width:100%;text-align:center;z-index:2}
.eyebrow{margin:0 0 8px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.intro h1{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.38;margin:0;text-wrap:balance;transition:color .3s}
.accent{color:var(--sky)}

/* 무대 */
.scene{width:calc(100% + 56px);height:300px;position:relative;flex-shrink:0;margin-top:clamp(18px,3svh,28px);display:grid;place-items:center}
.scene-glow{position:absolute;width:280px;height:240px;bottom:9px;border-radius:50%;background:#e7f1fb;opacity:.8;transform:scale(calc(1 + var(--charge,0)*.12));transition:background .4s}
.ground{position:absolute;bottom:40px;width:150px;height:13px;background:#dbe7f3;border-radius:50%;opacity:.8;transition:transform .2s}
.scene-star{position:absolute;fill:none;stroke:#8fb3d9;stroke-width:1.3;stroke-linejoin:round;width:22px;height:22px}
.star-one{left:52px;top:92px;transform:rotate(12deg)}
.star-two{right:56px;bottom:70px;width:14px;height:14px}
.character-button{position:absolute;bottom:16px;width:var(--character-size);height:calc(var(--character-size)*1.0625);padding:0;border:0;background:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.character,.character-image{display:block;width:100%;height:100%;pointer-events:none;transform-origin:50% 90%;animation:breathe 3s ease-in-out infinite}
.character-image{object-fit:contain}
.app.use-images .character{display:none}
.shake-lines{position:absolute;width:290px;height:270px;bottom:12px;pointer-events:none;opacity:0;transition:opacity .2s}
.speech{position:absolute;top:0;right:22px;width:138px;height:86px;display:grid;place-items:center;padding:0 14px 20px;font-size:15px;color:#3f4b5e;z-index:2;line-height:1.35;isolation:isolate;pointer-events:none;transform:rotate(-2deg);transition:transform .25s}
.speech-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.speech-contour{fill:#fff;stroke:#4a3a35;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.speech-fluster{fill:none;stroke:#4a3a35;stroke-width:1.8;stroke-linecap:round;opacity:0}
.speech span{display:block;text-align:center;white-space:nowrap}
.holding .speech{transform:rotate(0) translateY(-2px)}
.scene-caption{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;min-height:22px;margin-top:6px;text-align:center}
.tiny-star svg{width:11px;height:11px;fill:none;stroke:#8fb3d9;stroke-width:1.6;display:block}

/* 캐릭터 부위 (인라인 SVG) */
.c-root,.c-eyes,.c-arm,.c-tail,.c-face{transform-box:fill-box;transform-origin:center}
.c-root{transform-origin:50% 90%}
.c-eyes{animation:blink 4.2s ease-in-out infinite}
.c-arm-l{transform-box:view-box;transform-origin:82px 256px}
.c-arm-r{transform-box:view-box;transform-origin:238px 256px}
.c-tail{transform-origin:0% 100%;animation:wag 2.6s ease-in-out infinite}
.c-blush,.c-sweat,.c-mouth-open{opacity:0;transition:opacity .2s}
.c-mouth-closed{opacity:1;transition:opacity .2s}
.app[data-state=think] .c-root{transform:rotate(-5deg)}
.app[data-state=think] .c-eyes{transform:translate(4px,-5px)}
.app[data-state=think] .c-sweat{opacity:1}
.app[data-state=torn] :is(.character,.character-image){animation:sway 1.1s ease-in-out infinite}
.app[data-state=torn] .c-sweat{opacity:1}
.app[data-state=torn] .c-eyes{animation:dart 1.1s ease-in-out infinite}
.app[data-state=tremble] :is(.character,.character-image){animation:tremble .19s linear infinite}
.app[data-state=tremble] .c-sweat,.app[data-state=tremble] .c-blush{opacity:1}
.app[data-state=tremble] .speech-fluster{opacity:1}
.app[data-state=tremble] .shake-lines{opacity:1}
.app[data-state=ready] :is(.character,.character-image){animation:tremble .13s linear infinite}
.app[data-state=ready] .c-eyes{transform:scale(1.15)}
.app[data-state=ready] .c-mouth-open,.app[data-state=ready] .c-blush{opacity:1}
.app[data-state=ready] .c-mouth-closed,.app[data-state=ready] .c-sweat{opacity:0}
.app[data-state=ready] .speech-fluster{opacity:1}
.app[data-state=ready] .shake-lines{opacity:1}
.app[data-state=happy] .c-mouth-open,.app[data-state=happy] .c-blush{opacity:1}
.app[data-state=happy] .c-mouth-closed,.app[data-state=happy] .c-sweat{opacity:0}
.app[data-state=happy] .c-arm-l{transform:rotate(95deg)}
.app[data-state=happy] .c-arm-r{transform:rotate(-95deg)}
.app[data-state=happy] .c-tail{animation:wag 1.1s ease-in-out infinite}
.app[data-phase=burst] :is(.character,.character-image){animation:jump .48s cubic-bezier(.16,1,.3,1) infinite}
.app[data-phase=burst] .c-arm-l{animation:wave-l .48s ease-in-out infinite}
.app[data-phase=burst] .c-arm-r{animation:wave-r .48s ease-in-out infinite}
.app[data-phase=burst] .speech,.app[data-phase=burst] .scene-star{opacity:0}
.app[data-phase=burst] .ground{transform:scale(.7)}
.app[data-phase=burst] .intro{opacity:.25}
.app[data-phase=result] :is(.character,.character-image){animation:bob 2.4s ease-in-out infinite}
.app[data-phase=result] .speech{opacity:1}

/* 펑! 메시지 */
.burst-message{position:absolute;top:2px;left:0;width:100%;text-align:center;z-index:8;color:var(--sky);pointer-events:none;visibility:hidden}
.burst-message small{display:block;margin-bottom:6px;font-size:20px;line-height:1.1;-webkit-text-stroke:4px var(--paper);paint-order:stroke fill}
.burst-message strong{display:block;color:#1f2a3a;font-size:var(--burst-size,56px);font-weight:700;line-height:1.1;letter-spacing:-.04em;-webkit-text-stroke:7px var(--paper);paint-order:stroke fill;overflow-wrap:anywhere;padding:0 16px}
.app[data-phase=burst] .burst-message{visibility:visible;animation:shout 1.3s cubic-bezier(.16,1,.3,1) both}

/* 결과 카드 */
.result{width:100%;margin-top:14px;text-align:center}
.result-card{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;border:2px solid var(--sky-light);border-radius:20px;padding:14px 18px;animation:card-in .5s cubic-bezier(.16,1,.3,1) both}
.result-emoji{font-size:34px;line-height:1}
.result-name{font-size:26px;font-weight:700;letter-spacing:-.02em;color:#1f2a3a}
.result-tag{font-size:11px;color:var(--sky-dark);background:var(--sky-soft);border-radius:999px;padding:4px 9px;white-space:nowrap}
.result-comment{margin:12px 8px 0;font-size:13px;line-height:1.65;color:var(--muted)}

/* 조작부 */
.controls{width:100%;margin-top:clamp(16px,3svh,26px)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:18px}
.chip{border:1.5px solid var(--sky-light);background:#fff;color:var(--sky-dark);border-radius:999px;padding:7px 12px;font-size:12px;line-height:1;transition:background .15s,color .15s,transform .15s}
.chip:hover{background:var(--sky-soft)}
.chip[aria-checked=true]{background:var(--sky);border-color:var(--sky);color:#fff}
.chip:active{transform:scale(.96)}
.app[data-phase=result] .chips,.app[data-phase=burst] .chips,.app[data-mode=receive] .chips{display:none}
.meter-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:12px}
.meter-meta strong{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;color:var(--sky)}
.percent-mark{font-size:11px;margin-left:3px;color:var(--sky)}
.meter{position:relative;width:100%;height:7px;border-radius:10px;background:var(--track)}
.meter-fill{height:100%;width:0;border-radius:inherit;background:var(--sky-light)}
.meter-star{position:absolute;left:0;top:-6px;width:19px;height:19px;fill:var(--sky);stroke:var(--paper);stroke-width:2;transform:translateX(-35%);opacity:0}
.app[data-mode=receive] .meter-meta,.app[data-mode=receive] .meter{display:none}
.hold-button,.replay-button,.action-button{width:100%;min-height:62px;border:0;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600;margin-top:22px;padding:10px 16px;transition:background .2s,transform .2s,box-shadow .2s}
.hold-button{background:var(--sky);color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 5px 0 var(--sky-dark)}
.hold-button:hover{background:#5089c9}
.hold-button:active,.app.holding .hold-button{transform:translateY(4px);box-shadow:0 1px 0 var(--sky-dark);background:#4c84c4}
.app[data-phase=burst] .hold-button{background:#9cbfe3;box-shadow:none;transform:none;cursor:default}
.hold-dots{display:none;gap:3px;margin-left:2px}
.hold-dots i{width:3px;height:3px;background:currentColor;border-radius:50%;animation:dots 1s ease-in-out infinite}
.hold-dots i:nth-child(2){animation-delay:.15s}.hold-dots i:nth-child(3){animation-delay:.3s}
.holding .hold-dots{display:flex}
.replay-button{background:var(--sky-soft);color:var(--sky-dark);box-shadow:none;margin-top:18px}
.replay-button:hover{background:#d6e6f7}
.replay-button:active{transform:scale(.98)}
.action-button{background:var(--sky);color:#fff;box-shadow:0 5px 0 var(--sky-dark)}
.action-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sky-dark)}
.share-row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:10px}
.outline-button{min-height:50px;border:0;border-radius:16px;background:#fff;border:1.5px solid var(--sky-light);color:var(--sky-dark);display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;padding:8px 12px}
.outline-button:hover{background:var(--sky-soft)}
.link-status{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 0;text-align:center;min-height:0}
.link-status:empty{display:none}
.credit{margin-top:18px;font-size:10px;color:#9aa6b6;letter-spacing:.02em}

/* 파티클 */
.particles{position:absolute;inset:-230px -20px -240px;z-index:7;pointer-events:none;overflow:hidden}
.particle{position:absolute;top:49%;left:50%;width:8px;height:13px;background:var(--particle-color);border-radius:2px;animation:confetti var(--duration) cubic-bezier(.16,.65,.4,1) var(--delay) both}
.particle.star{width:21px;height:21px;background:none;fill:none;stroke:var(--particle-color);stroke-width:1.6}
.particle.heart{width:16px;height:16px;background:none;fill:var(--particle-color)}

@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012,.994)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes wag{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(2px)}}
@keyframes dart{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes tremble{0%,100%{transform:translateX(-1.5px) rotate(-.5deg)}50%{transform:translateX(1.5px) rotate(.5deg)}}
@keyframes dots{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes jump{0%,100%{transform:translateY(8px) scale(1.05,.94)}45%{transform:translateY(-30px) scale(.97,1.04)}}
@keyframes wave-l{0%,100%{transform:rotate(85deg)}50%{transform:rotate(115deg)}}
@keyframes wave-r{0%,100%{transform:rotate(-85deg)}50%{transform:rotate(-115deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shout{0%{transform:scale(.4) rotate(-7deg);opacity:0}20%{transform:scale(1.06) rotate(3deg);opacity:1}35%,85%{transform:scale(1) rotate(-3deg);opacity:1}100%{transform:scale(1.12);opacity:0}}
@keyframes card-in{from{transform:translateY(16px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}

@media(min-width:600px){body{padding:24px 0}.app{min-height:min(840px,calc(100svh - 48px));border-radius:32px;box-shadow:0 18px 70px #3d6fae14}}
@media(max-height:760px){.intro h1{font-size:29px}.scene{height:250px;margin-top:16px;--character-size:230px}.speech{top:-4px;right:20px;width:124px;height:78px;font-size:14px}.scene-glow{width:260px;height:220px}}
@media(max-height:680px){.scene{height:220px;--character-size:200px}.scene-glow{height:190px;width:240px}.hold-button,.replay-button,.action-button{min-height:54px;margin-top:16px}.chips{margin-bottom:12px}}
@media(max-width:350px){.app{padding-left:22px;padding-right:22px}.scene{width:calc(100% + 44px)}.intro h1{font-size:28px}.speech{right:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.app[data-phase=burst] .burst-message{animation:none;opacity:1}.particle{display:none}}

/* 이미지 모드: SVG 부위 연출을 대신하는 보조 연출 */
.app.use-images .character-button{transform-origin:50% 95%;transition:transform .3s}
.app.use-images[data-state=think] .character-button{transform:rotate(-6deg)}
.app.use-images[data-state=torn] .character-button{transform:rotate(4deg)}
.sweat-drop{position:absolute;right:calc(50% - var(--character-size)*.42);top:calc(50% - var(--character-size)*.38);width:22px;height:30px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3}
.app.use-images[data-state=think] .sweat-drop,.app.use-images[data-state=torn] .sweat-drop,.app.use-images[data-state=tremble] .sweat-drop{opacity:1;animation:drip 1.4s ease-in-out infinite}
@keyframes drip{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}