/* 생일 축하카드: 시안(design/app-prototype.html)과 같은 색·글꼴·컴포넌트 */
:root{
  --night:#18204a; --candle:#ffc93c; --frost:#ff8fab; --paper:#fffaf2; --paperline:#ecdcc4; --cocoa:#3a2a22; --cocoa2:#7a6556;
  --display:"Jua","IBM Plex Sans KR",system-ui,sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:#efe6d8;color:var(--cocoa);font-family:var(--body);font-size:15px;line-height:1.55;word-break:keep-all;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
#app{position:relative;max-width:480px;min-height:100dvh;margin:0 auto;background:var(--paper);overflow-x:hidden}
#app.full{height:100dvh;overflow:hidden}
button{font:inherit}
img{max-width:100%}

/* ===== 만드는 화면 공통 ===== */
.screen{min-height:100dvh;display:flex;flex-direction:column;padding:calc(22px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));gap:16px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;font-size:13px;color:var(--cocoa2)}
.bar>*{flex:none}
.back{border:0;background:none;color:var(--cocoa2);cursor:pointer;padding:6px 8px 6px 0;white-space:nowrap;font-size:14px;min-height:32px}
.steps{display:flex;gap:4px}
.steps i{width:18px;height:4px;border-radius:2px;background:var(--paperline)}
.steps i.on{background:var(--cocoa)}
.h{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.25;margin:0;text-wrap:balance;color:var(--cocoa)}
.p{margin:0;color:var(--cocoa2);font-size:14px}
.btn{font-weight:700;font-size:16px;border:0;border-radius:14px;padding:15px 16px;background:var(--cocoa);color:var(--paper);cursor:pointer;width:100%}
.btn.ghost{background:transparent;color:var(--cocoa);border:1.5px solid var(--cocoa)}
.btn.candle{background:var(--candle);color:#2a1d00}
.btn.kakao{background:#fee500;color:#191600}
.btn[disabled],.btn.dim{opacity:.35}
.btn[disabled]{cursor:not-allowed}
.btn:focus-visible,.back:focus-visible,.lnk:focus-visible{outline:3px solid var(--frost);outline-offset:2px}
.foot{margin-top:auto;display:grid;gap:10px}
.lnk{font-size:13px;color:var(--cocoa2);background:none;border:0;text-decoration:underline;cursor:pointer;padding:2px}
.made{font-size:11.5px;color:var(--cocoa2);text-align:center;opacity:.85;margin:0}
.made a{color:inherit}
.field{display:grid;gap:5px}
.field label{font-size:13px;font-weight:700}
.field small{font-size:12px;color:var(--cocoa2)}
.in{font:inherit;font-size:16px;border:1.5px solid var(--paperline);background:#fff;border-radius:11px;padding:11px 12px;color:var(--cocoa);width:100%}
.in:focus{outline:none;border-color:var(--cocoa)}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--cocoa);color:var(--paper);font-size:13.5px;padding:10px 16px;border-radius:999px;max-width:calc(100% - 32px);text-align:center;z-index:50;animation:tin .25s}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--paperline);border-top-color:var(--cocoa);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(1turn)}}

/* 카운터: 맨 위 가로 띠 */
.counter{align-self:stretch;margin:calc(-22px - env(safe-area-inset-top,0px)) -20px 0;display:flex;justify-content:center;align-items:center;gap:6px;font-size:11.5px;color:var(--cocoa2);border-bottom:1px solid var(--paperline);padding:calc(7px + env(safe-area-inset-top,0px)) 12px 7px;background:#fff}
.counter b{font-family:var(--mono);font-weight:500;color:var(--cocoa);letter-spacing:.06em;font-size:12px}
.counter i{width:6px;height:6px;border-radius:50%;background:#2f9e62}

/* 시작 */
.occ{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.occ button{text-align:left;border:1.5px solid var(--paperline);background:#fff;border-radius:14px;padding:14px;display:grid;gap:4px;cursor:pointer;color:var(--cocoa)}
.occ button b{font-family:var(--display);font-weight:400;font-size:19px}
.occ button span{font-size:12px;color:var(--cocoa2)}
.occ button.on{border-color:var(--cocoa);box-shadow:inset 0 0 0 1.5px var(--cocoa)}
.occ button[disabled]{opacity:.5;cursor:default}
.hero{border-radius:18px;background:var(--night);padding:18px;display:flex;gap:4px;align-items:flex-end;justify-content:center;height:170px;overflow:hidden}
.hero img{height:118px;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)}
.hero img:nth-child(2){height:140px}

/* 권리 안내 */
.rule{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.rule li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:14px}
.rule li em{font-style:normal;font-family:var(--display);font-size:18px;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--paperline);display:grid;place-items:center}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;background:#fff;border:1.5px solid var(--paperline);border-radius:12px;padding:12px;cursor:pointer}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--cocoa);flex:none}

/* 사진 슬롯 */
.slots{display:grid;gap:12px}
.slot{background:#fff;border:1.5px solid var(--paperline);border-radius:16px;padding:12px;display:grid;grid-template-columns:86px 1fr;gap:12px;position:relative;transition:box-shadow .15s,transform .15s}
.slot.err{border-color:#d9534f}
.slot.dragging{z-index:5;box-shadow:0 12px 28px rgba(58,42,34,.25);transform:scale(1.02);transition:none}
.ph{width:86px;height:86px;border-radius:12px;background:repeating-conic-gradient(#f3ece1 0 25%,#fff 0 50%) 0 0/14px 14px;display:grid;place-items:center;position:relative;overflow:hidden;cursor:pointer}
.ph img{width:100%;height:100%;object-fit:contain}
.ph .add{font-size:12px;color:var(--cocoa2);display:grid;gap:2px;justify-items:center;text-align:center;line-height:1.3}
.ph .add b{font-size:24px;line-height:1;font-weight:400}
.rank{position:absolute;top:-8px;left:-6px;background:var(--cocoa);color:var(--paper);font-family:var(--display);font-size:13px;border-radius:999px;padding:1px 8px}
.rm{position:absolute;left:84px;top:4px;width:24px;height:24px;border-radius:50%;border:0;background:var(--cocoa);color:var(--paper);font-size:14px;line-height:1;cursor:pointer;z-index:2}
.grip{position:absolute;right:6px;top:6px;width:30px;height:30px;border:0;border-radius:8px;background:#f5eee3;color:var(--cocoa2);font-size:16px;line-height:1;cursor:grab;touch-action:none;display:grid;place-items:center}
.slot .fs{display:grid;gap:6px;min-width:0;padding-right:30px}
.slot .in{padding:8px 10px;font-size:16px}
.errmsg{grid-column:1/-1;font-size:12.5px;color:#b52b27;margin:0}
.tonelbl{font-size:11.5px;color:var(--cocoa2)}
.tones{display:flex;flex-wrap:wrap;gap:4px}
.tones button{font-size:12px;border:1.5px solid var(--paperline);background:#fff;border-radius:999px;padding:2px 9px;cursor:pointer;color:var(--cocoa2)}
.tones button.on{border-color:var(--cocoa);color:var(--cocoa);font-weight:700}

/* 배경 다듬기 */
.cuttabs{display:flex;gap:8px}
.cuttabs button{flex:1;font-size:13px;border:1.5px solid var(--paperline);background:#fff;border-radius:12px;padding:6px;display:grid;justify-items:center;gap:3px;cursor:pointer;color:var(--cocoa)}
.cuttabs button img{height:44px;object-fit:contain}
.cuttabs button.on{border-color:var(--cocoa)}
.cuttabs button[disabled]{opacity:.4;cursor:not-allowed}
.cv{width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:repeating-conic-gradient(#f3ece1 0 25%,#fff 0 50%) 0 0/18px 18px;touch-action:none;position:relative}
.cv canvas{width:100%;height:100%;display:block;cursor:crosshair}
.cv .proc{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;background:rgba(255,250,242,.88);font-size:14px;text-align:center}
.tools{display:flex;gap:8px;align-items:center}
.seg{display:flex;background:#f1e7d8;border-radius:12px;padding:3px;flex:none}
.seg button{font-size:14px;font-weight:700;border:0;background:transparent;border-radius:9px;padding:7px 12px;cursor:pointer;color:var(--cocoa2)}
.seg button.on{background:#fff;color:var(--cocoa);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tools input[type=range]{flex:1;accent-color:var(--cocoa);min-width:0}
.reset{font-size:13px;border:0;background:none;color:var(--cocoa2);text-decoration:underline;cursor:pointer;padding:4px;flex:none}
.navrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.swipehint{font-size:12px;color:var(--cocoa2);text-align:center;margin:0}

/* 문구 미리 읽기 */
.script{background:#fff;border:1.5px dashed var(--paperline);border-radius:14px;padding:12px 14px;font-size:14px;display:grid;gap:4px}
.script b{font-size:12px;color:var(--cocoa2);font-weight:500}
.script span i{font-style:normal;font-size:12px;color:var(--cocoa2);margin-right:6px}

/* 완료 */
.linkbox{display:flex;gap:6px;align-items:center;background:#fff;border:1.5px solid var(--paperline);border-radius:12px;padding:6px 6px 6px 12px}
.linkbox code{font-family:var(--mono);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.linkbox button{font-size:13px;font-weight:700;border:0;border-radius:9px;background:var(--cocoa);color:var(--paper);padding:8px 12px;cursor:pointer;flex:none}
.info{display:grid;gap:8px;font-size:13.5px;background:#f6efe4;border-radius:14px;padding:12px 14px}
.info div{display:flex;gap:8px}
.info span{flex:none;width:92px;color:var(--cocoa2)}
.state{align-items:center;text-align:center;justify-content:center}
.state .ico{font-size:52px;line-height:1}
.state .foot{width:100%}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(20,16,12,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet>div{background:var(--paper);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}

/* ===== 받는 화면 ===== */
.stage{position:absolute;inset:0;background:var(--sbg,#18204a);transition:background .5s;color:#fff;overflow:hidden;user-select:none}
.stage .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.stage .floor{position:absolute;left:0;right:0;bottom:0;height:calc(34% + 26px);background:rgba(255,255,255,.14);border-top:3px solid rgba(0,0,0,.15)}
.top2{position:absolute;top:calc(58px + env(safe-area-inset-top,0px));left:14px;right:14px;display:grid;justify-items:center;gap:14px;z-index:5;transition:top .5s}
.big{font-family:var(--display);font-size:44px;line-height:1.05;text-align:center;color:#fffaf2;-webkit-text-stroke:2px #1b1430;paint-order:stroke fill;text-shadow:3px 3px 0 #1b1430,6px 6px 0 var(--frost);text-wrap:balance;min-height:1em;transition:font-size .4s}
.big small{display:block;font-size:.45em;margin-top:.35em;-webkit-text-stroke:1px #1b1430;text-shadow:2px 2px 0 #1b1430}
.big.pop{animation:pop2 .5s cubic-bezier(.2,1.6,.4,1) both}
.big.shake{animation:jit .09s infinite}
.load2{width:80%;text-align:center;font-size:14px;text-shadow:1px 1px 0 #1b1430}
.load2 .bar{height:20px;border:3px solid #1b1430;background:#fffaf2;margin-top:8px;padding:3px;border-radius:99px;overflow:hidden;box-shadow:3px 3px 0 #1b1430}
.load2 .bar i{display:block;height:100%;width:0;background:var(--frost);border-radius:99px;transition:width 1.1s cubic-bezier(.2,.9,.2,1)}
.cast{position:absolute;left:8px;right:8px;bottom:34%;display:flex;justify-content:center;align-items:flex-end;gap:4px;z-index:3;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.ch{width:31%;position:relative;transition:width .55s cubic-bezier(.2,1.3,.4,1),opacity .4s,filter .4s}
.ch img{display:block;width:100%;aspect-ratio:1;object-fit:contain;object-position:50% 100%;transform-origin:50% 90%;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(4px 7px 0 rgba(0,0,0,.25))}
.ch.main{order:2}.ch.l{order:1}.ch.r{order:3}
.tagname{position:absolute;left:50%;transform:translateX(-50%);bottom:-26px;background:var(--candle);color:#2a1d00;font-family:var(--display);font-size:14px;border-radius:999px;padding:1px 10px;white-space:nowrap}
.stage[data-mode="idle"] .ch img{animation:bob 2.2s ease-in-out infinite}
.stage[data-mode="idle"] .ch.l img{animation-delay:-.7s}.stage[data-mode="idle"] .ch.r img{animation-delay:-1.4s}
.stage[data-mode="drum"] .cast{transform:scale(1.08)}
.stage[data-mode="drum"] .ch img{animation:drum .2s ease-in-out infinite alternate}
.stage[data-mode="drum"] .ch.l img{animation-delay:-.1s}
.stage[data-mode="panic"] .ch img{animation:shiver .07s linear infinite}
.stage[data-mode="panic"] .ch.l img{rotate:8deg}.stage[data-mode="panic"] .ch.r img{rotate:-8deg}
.stage[data-mode="jump"] .ch img{animation:hop .5s cubic-bezier(.3,0,.3,1) infinite alternate}
.stage[data-mode="jump"] .ch.l img{animation-delay:-.25s}.stage[data-mode="jump"] .ch.main img{animation:hopspin 1s ease-in-out 1}
.stage[data-mode="talk"] .ch.main{width:54%}
.stage[data-mode="talk"] .ch:not(.main){width:21%;opacity:.75;filter:saturate(.8)}
.stage[data-mode="talk"] .ch img{animation:bob 2.4s ease-in-out infinite}
.stage[data-mode="talk"] .ch.main.speaking img{animation:speak .26s ease-in-out infinite alternate}
.stage[data-mode="dance"] .ch img{animation:dance .9s ease-in-out infinite}
.stage[data-mode="dance"] .ch.l img{animation-delay:-.3s}.stage[data-mode="dance"] .ch.r img{animation-delay:-.6s}
.sub2{position:absolute;left:12px;right:12px;top:calc(66% + 34px);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:7}
.sub2 .who:empty{display:none}
.sub2 .who{background:var(--candle);color:#1b1430;border:2px solid #1b1430;padding:2px 10px;font-size:13px;transform:rotate(-1.5deg);border-radius:8px}
.sub2 .line{background:rgba(20,16,40,.9);padding:9px 14px;font-size:18px;line-height:1.35;text-align:center;border-radius:12px;text-wrap:balance}
.flash2{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8}
.flash2.go{animation:flash .6s ease-out}
.soundbtn{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:9;font-size:13px;font-weight:700;border:2px solid #1b1430;background:var(--candle);color:#1b1430;border-radius:999px;padding:6px 12px;cursor:pointer;animation:nudge 1.2s ease-in-out infinite}
.pvbar{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:9;display:flex;gap:8px;align-items:center}
.pvbar .lnk{color:#fff}
.pvbar .tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:#ffe4bf;color:#8a4b00}
.stage.ended .cast{transform:translateY(-70px) scale(.8)}
.stage.ended .top2{top:calc(22px + env(safe-area-inset-top,0px))}
.stage.ended .big{font-size:32px}
@keyframes bob{50%{transform:translateY(-5%)}}
@keyframes drum{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-8%) rotate(5deg)}}
@keyframes shiver{0%{translate:1px 0}50%{translate:-2px 1px}100%{translate:1px -1px}}
@keyframes hop{from{transform:translateY(0) scale(1.05,.95)}to{transform:translateY(-38%) scale(.96,1.05)}}
@keyframes hopspin{0%{transform:none}40%{transform:translateY(-45%) rotate(200deg)}80%{transform:translateY(-10%) rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes speak{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-3%) scale(1.04,.97)}}
@keyframes dance{0%,100%{transform:rotate(-10deg) translateY(0)}25%{transform:rotate(0) translateY(-14%)}50%{transform:rotate(10deg) translateY(0)}75%{transform:rotate(0) translateY(-14%)}}
@keyframes pop2{from{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes jit{0%{transform:translate(2px,-1px) rotate(-1deg)}50%{transform:translate(-2px,2px) rotate(1deg)}100%{transform:translate(1px,1px)}}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes nudge{50%{transform:rotate(-3deg) scale(1.06)}}
.endsheet{position:absolute;left:0;right:0;bottom:0;z-index:8;background:var(--paper);color:var(--cocoa);border-radius:24px 24px 0 0;padding:20px 20px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;animation:up .4s cubic-bezier(.3,1.2,.5,1)}
@keyframes up{from{transform:translateY(100%)}}
.vers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vers button{border:1.5px solid var(--paperline);background:#fff;border-radius:14px;padding:8px;display:flex;gap:8px;align-items:center;cursor:pointer;color:var(--cocoa);text-align:left;font-size:13px}
.vers img{width:40px;height:40px;object-fit:contain}
.vers b{display:block;font-family:var(--display);font-weight:400;font-size:16px}
.expline{font-size:12px;color:var(--cocoa2);text-align:center;margin:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.btn,.seg button,.tools button,.linkbox button,.pvbar button{white-space:nowrap}