@font-face{font-family:'Noto Sans KR';src:url('../fonts/NotoSansKR-VF.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Ghanachocolate;src:url('../fonts/Ghanachocolate.woff') format('woff');font-weight:400;font-display:swap}
:root{--font:'Noto Sans KR',sans-serif;--navy:#121733;--muted:rgba(255,255,255,.85);--border:rgba(255,255,255,.4);--lavender:#afaac6;--card-aspect-ratio:59/44}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--navy);color:#fff;font-family:var(--font)}
button,input{font:inherit}button{cursor:pointer;border:0;color:inherit}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #dcd3ff;outline-offset:5px}button:active:not(:disabled){filter:brightness(.9)}img{user-select:none;-webkit-user-drag:none}button{touch-action:manipulation}
.stage{position:absolute;width:1920px;height:1080px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));overflow:hidden}
.screen{position:absolute;inset:0;display:none}.screen.on{display:block;animation:appear .25s ease}@keyframes appear{from{opacity:0}to{opacity:1}}
.btn{height:84px;min-width:384px;padding:0 32px;border-radius:999px;display:inline-flex;gap:14px;align-items:center;justify-content:center;background:#fff;color:var(--navy);font-size:26px;font-weight:500;box-shadow:0 14px 30px #0a0e284d;white-space:nowrap}
.btn.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55);color:#fff;box-shadow:none}.btn:disabled{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#ffffff40;box-shadow:none}.btn:disabled img{opacity:.3}
.nav-back{position:absolute;left:50px;top:948px}.nav-next{position:absolute;right:50px;top:948px}.home{position:absolute;left:50px;top:24px;height:70px;min-width:187px;font-size:22px;gap:12px;z-index:10}.title{position:absolute;top:142px;left:200px;width:1520px;text-align:center}.title h1{font-size:52px;line-height:1.2;font-weight:700;letter-spacing:-1.32px}.title p{font-size:26px;font-weight:350;margin-top:10px;line-height:1.5;color:var(--muted)}
.card{position:relative;width:100%;aspect-ratio:var(--card-aspect-ratio);border-radius:22px;overflow:hidden;background-position:center;background-size:cover;box-shadow:0 0 0 1px #ffffff59,0 40px 80px #0a0e2873;isolation:isolate;touch-action:none}
.card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,23,51,.45),rgba(18,23,51,0) 38%);pointer-events:none}
.c-txt{position:absolute;max-width:90%;font-weight:700;line-height:1.25;letter-spacing:-.03em;white-space:pre-wrap;overflow-wrap:anywhere;touch-action:none}
.c-ph{position:absolute;aspect-ratio:4/3;background-size:cover;background-position:center;border:6px solid white;border-radius:4px;box-shadow:0 12px 24px #0a0e2840;transform-origin:center;touch-action:none;display:none}
.emo{position:absolute;transform:translate(-50%,-50%);line-height:1;touch-action:none}.ech{display:flex;align-items:center;justify-content:center;line-height:1;width:1em;height:1em}.edit .c-txt,.edit .c-ph,.edit .emo{cursor:grab}
.edit .sel{outline:2px dashed #fff;outline-offset:8px}.hd,.rot,.del{display:none}.sel>.hd{display:block;position:absolute;width:14px;height:14px;background:white;border-radius:3px;z-index:4}.hd::before{content:'';position:absolute;inset:-18px}.hd.tl{left:-15px;top:-15px}.hd.tr{right:-15px;top:-15px}.hd.bl{left:-15px;bottom:-15px}.hd.br{right:-15px;bottom:-15px}.sel>.rot,.sel>.del{position:absolute;display:grid;place-items:center;left:50%;top:-58px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:white;color:var(--navy);font-size:26px;font-style:normal;box-shadow:0 6px 15px #0a0e2840;z-index:5}.rot::before,.del::before{content:'';position:absolute;inset:-12px}
