/* 모든 화면이 함께 쓰는 바탕: 글꼴(앱 안에 넣음) · 크래프트지 · 테이프 · 폴라로이드 · 포스트잇.
   스탠바이미(크로미움 87)에서 돌아야 해서 inset·aspect-ratio·:has·:is·dvh 를 쓰지 않는다. */
@font-face{font-family:'Gowun Dodum';src:url(fonts/gowun.woff) format('woff');font-display:swap}
@font-face{font-family:'Gaegu';font-weight:700;src:url(fonts/gaegu-bold.woff) format('woff');font-display:swap}
@font-face{font-family:'Jua';src:url(fonts/jua.woff) format('woff');font-display:swap}
:root{
  --kraft:#C6A06C; --ink:#2B2622; --ink2:#4A3A26; --ink3:#6B5A3C; --paper:#FBFAF6; --memo:#FFFEF8; --red:#C23B2E;
  --P:#E8574A; --S:#3F7CC4; --T:#4C9A6A; --G:#E59A1E;
  --f-body:'Gowun Dodum','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --f-hand:'Gaegu','Gowun Dodum',cursive; --f-round:'Jua','Gowun Dodum',sans-serif;
}
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f-body);color:var(--ink);background:var(--kraft);word-break:keep-all;overflow-wrap:break-word;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.kraft{background-color:var(--kraft)}
.abs{position:absolute}
.ph-img{position:relative;overflow:hidden;background:#8d7a5c}
.ph-img>img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.tape{position:absolute;height:40px;width:150px;background:rgba(244,214,120,.85);box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:3;pointer-events:none;
  -webkit-clip-path:polygon(2% 0,98% 0,100% 15%,97% 32%,100% 50%,97% 68%,100% 85%,98% 100%,2% 100%,0 85%,3% 68%,0 50%,3% 32%,0 15%);
  clip-path:polygon(2% 0,98% 0,100% 15%,97% 32%,100% 50%,97% 68%,100% 85%,98% 100%,2% 100%,0 85%,3% 68%,0 50%,3% 32%,0 15%)}
.tape.mint{background:rgba(150,212,190,.85)} .tape.pink{background:rgba(245,170,180,.85)} .tape.blue{background:rgba(150,190,235,.85)}
.doodle{position:absolute;color:var(--red);pointer-events:none}
.doodle svg{width:100%;height:100%;overflow:visible}
.polar{position:absolute;background:var(--paper);box-shadow:0 2px 2px rgba(0,0,0,.12),0 18px 26px -14px rgba(50,30,10,.6)}
.hl{background:linear-gradient(transparent 58%,rgba(250,214,70,.85) 58%,rgba(250,214,70,.85) 88%,transparent 88%);padding:0 6px}
.hl.pink{background:linear-gradient(transparent 58%,rgba(245,170,180,.9) 58%,rgba(245,170,180,.9) 88%,transparent 88%)}
.tapebtn{border:0;background:rgba(244,214,120,.97);font-family:var(--f-hand);font-weight:700;color:var(--ink);cursor:pointer;box-shadow:0 6px 10px -6px rgba(0,0,0,.5);
  -webkit-clip-path:polygon(1% 0,99% 0,100% 20%,98.5% 50%,100% 80%,99% 100%,1% 100%,0 80%,1.5% 50%,0 20%);
  clip-path:polygon(1% 0,99% 0,100% 20%,98.5% 50%,100% 80%,99% 100%,1% 100%,0 80%,1.5% 50%,0 20%)}
.tapebtn:disabled{opacity:.55;cursor:default}
.dot{border-radius:50%;border:0;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-round);box-shadow:0 3px 0 rgba(0,0,0,.18);line-height:1.05;padding:0}
.qrcard{background:#fff;box-shadow:0 14px 22px -12px rgba(50,30,10,.6);text-align:center;background-image:repeating-linear-gradient(transparent 0 38px,#CFE0EF 38px 39px)}
.qrcard .qr svg{display:block;margin:0 auto;width:100%;height:100%}
.qrcard b{display:block;font-family:var(--f-hand);font-weight:700;line-height:1.2}

/* 사진 위 스티커 */
.sc-name{position:absolute;font-family:var(--f-hand);font-weight:700;background:rgba(244,214,120,.94);padding:.05em 1em;white-space:nowrap;transform:rotate(-4deg);
  -webkit-clip-path:polygon(2% 0,98% 0,100% 15%,97% 32%,100% 50%,97% 68%,100% 85%,98% 100%,2% 100%,0 85%,3% 68%,0 50%,3% 32%,0 15%);
  clip-path:polygon(2% 0,98% 0,100% 15%,97% 32%,100% 50%,97% 68%,100% 85%,98% 100%,2% 100%,0 85%,3% 68%,0 50%,3% 32%,0 15%)}
.sc-msg{position:absolute;font-family:var(--f-hand);font-weight:700;background:var(--memo) repeating-linear-gradient(transparent 0 1.3em,#BFD3E6 1.3em,#BFD3E6 calc(1.3em + 1px),transparent calc(1.3em + 1px));
  line-height:1.3em;padding:.2em .6em;max-width:11em;transform:rotate(2deg);box-shadow:0 6px 10px -4px rgba(0,0,0,.4)}
.sc-ico{position:absolute;width:1.9em;height:1.9em;border-radius:50%;background:#E8574A;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.sc-ico svg{width:58%;height:58%}

/* 응원 포스트잇 */
.note{position:absolute;padding:30px 22px 16px;display:flex;flex-direction:column;box-shadow:0 2px 2px rgba(0,0,0,.12),0 16px 20px -12px rgba(50,30,10,.55)}
.note.postit{width:250px;min-height:236px}
.note.memo{width:290px;min-height:200px;background-image:repeating-linear-gradient(transparent 0 38px,#BFD3E6 38px 39px)!important;background-position:0 14px!important}
.note.origami{width:240px;min-height:240px;-webkit-clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.note.origami:after{content:"";position:absolute;right:0;bottom:0;width:18%;height:18%;background:linear-gradient(135deg,rgba(0,0,0,.18) 50%,rgba(255,255,255,.5) 50%)}
.note .tape{width:96px;height:30px;left:50%;top:-12px;margin-left:-48px}
.note .say{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;word-break:keep-all}
.note .say.typed{font-family:var(--f-body);font-size:26px;line-height:1.45}
.note .say img{width:100%;height:auto;display:block;max-height:220px;object-fit:contain}
.note .by{font-family:var(--f-round);font-size:18px;color:var(--ink3);text-align:right;margin-top:8px}
.note.memo .by{color:#5E6E80}

/* TV 고정 무대(1920×1080)를 화면에 맞춰 키운다 */
.tvbody{background:#2b2116;overflow:hidden;width:100vw;height:100vh;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;transform-origin:0 0;background-color:var(--kraft)}
.stage:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(90% 80% at 40% 40%,transparent 50%,rgba(60,35,10,.35));pointer-events:none;z-index:50}
.net{position:absolute;left:24px;bottom:16px;z-index:70;font:18px var(--f-round);color:#fff;background:rgba(43,38,34,.75);padding:4px 14px;border-radius:999px}
.rbtn{width:76px;height:76px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);font:40px/1 var(--f-round);cursor:pointer;box-shadow:0 6px 10px -5px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:0}
.rbtn:disabled{opacity:.35;cursor:default}

/* 크게 보기 */
.ov{position:absolute;left:0;top:0;right:0;bottom:0;z-index:60;background:rgba(43,30,15,.66);display:flex;align-items:center;justify-content:center}
.ov .side{position:absolute;top:50%;margin-top:-60px;width:120px;height:120px;font-size:60px}
.ov .prev{left:200px} .ov .next{right:200px}
.ov .close{position:absolute;right:60px;top:50px;height:84px;padding:0 36px;font-size:38px}
.ov .play{position:absolute;left:60px;top:50px;height:84px;padding:0 30px;font-size:34px}
.ov .pos{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-family:var(--f-round);font-size:30px;color:var(--paper)}

.toast{position:fixed;left:16px;right:16px;bottom:24px;margin:0 auto;max-width:420px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font:17px var(--f-round);text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;z-index:99}
.toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}