:root{--ink:#292725;--muted:#716c65;--paper:#f4f2ee}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100dvh;background:var(--paper);color:var(--ink);font-family:Pretendard,system-ui,-apple-system,"Segoe UI",sans-serif;padding:calc(14px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}
button{font:inherit}
.stage{width:min(460px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:7px;color:#777169;font-size:12px;font-weight:800}
.brand-mark{width:10px;height:10px;border-radius:50%;background:#f2b84b}
.brand small{font-weight:600}
.date-line{margin:0;color:#68635d;font-size:13px;font-weight:750}
.guide{margin:0 0 2px;text-align:center;font-size:16px;line-height:1.35;font-weight:900;letter-spacing:-.2px}
.card{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:18px;background:#d8d5cf;box-shadow:0 8px 28px rgba(20,20,20,.11);touch-action:none}
.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fallback-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(145deg,#fff7ed,#f8dfb4);font-weight:900}
.fallback-poster span{font-size:14px;color:#76634c}
.sticker-layer{position:absolute;inset:0;z-index:5}
.draw-btn{position:absolute;z-index:30;left:50%;bottom:16px;transform:translateX(-50%);width:min(72%,250px);min-height:76px;border:2px solid rgba(255,255,255,.88);border-radius:18px;background:rgba(28,28,28,.78);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.2);backdrop-filter:blur(9px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.draw-btn[hidden]{display:none}
.draw-btn .dice{font-size:27px;line-height:1}
.draw-btn strong{font-size:16px;font-weight:900}
.draw-btn small{font-size:12px;font-weight:800;opacity:.86}
.draw-btn.is-drawing{animation:shake .12s linear infinite}
@keyframes shake{0%{transform:translateX(-50%) translate(-3px,1px) rotate(-1deg)}50%{transform:translateX(-50%) translate(3px,-1px) rotate(1deg)}100%{transform:translateX(-50%) translate(-2px,0) rotate(-1deg)}}

.peel-sticker{position:absolute;z-index:8;touch-action:none;transform-origin:center;cursor:grab;filter:drop-shadow(0 3px 0 rgba(255,255,255,.98)) drop-shadow(0 6px 2px rgba(60,45,32,.26)) drop-shadow(0 13px 18px rgba(0,0,0,.28));will-change:left,top,width,height,transform}
.peel-sticker.is-selected{z-index:20;filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 7px 2px rgba(60,45,32,.3)) drop-shadow(0 18px 25px rgba(0,0,0,.38))}

.peel-sticker.is-moving{cursor:grabbing;z-index:24;filter:drop-shadow(0 5px 0 rgba(255,255,255,.98)) drop-shadow(0 10px 4px rgba(60,45,32,.3)) drop-shadow(0 24px 30px rgba(0,0,0,.38))}
.peel-sticker.is-floating{z-index:26;filter:drop-shadow(0 6px 0 rgba(255,255,255,1)) drop-shadow(0 12px 4px rgba(60,45,32,.34)) drop-shadow(0 28px 35px rgba(0,0,0,.42))}
.peel-surface,.float-img{position:absolute;inset:0;width:100%;height:100%}
.peel-surface{touch-action:none}
.peel-surface canvas{width:100%!important;height:100%!important;display:block}
.float-img{object-fit:contain;display:none;pointer-events:none}
.peel-sticker.is-floating .peel-surface{display:none}
.peel-sticker.is-floating .float-img{display:block}
.peel-pop{animation:pop .42s cubic-bezier(.2,1.35,.4,1)}
@keyframes pop{0%{opacity:0;scale:.35;rotate:-13deg}70%{opacity:1;scale:1.1}100%{scale:1}}
.peel-stick{animation:stick .34s cubic-bezier(.2,1.3,.4,1)}
@keyframes stick{0%{scale:1.1;translate:0 -5px}55%{scale:.93}100%{scale:1;translate:0 0}}

.status{width:100%;min-height:20px;margin:0;text-align:center;color:#625d57;font-size:13px;font-weight:750;line-height:1.45}
.edit-tools{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px 7px 14px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(255,255,255,.72);opacity:.55}
.edit-tools.is-active{opacity:1;box-shadow:0 6px 18px rgba(0,0,0,.07)}
.edit-tools>span{min-width:0;color:#625d57;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edit-buttons{display:flex;gap:5px;flex:0 0 auto}
.edit-buttons button{width:38px;height:36px;border:1px solid rgba(0,0,0,.1);border-radius:10px;background:#fff;color:#292725;font-size:19px;font-weight:900;cursor:pointer}
.card-actions{width:100%;display:flex;gap:8px}
.save,.share{flex:1;min-height:46px;border-radius:14px;font-size:14px;font-weight:900;cursor:pointer}
.save{border:1px solid rgba(0,0,0,.1);background:#fff;color:#292725}
.share{border:0;background:#2f2d2a;color:#fff}

.hm-share-inline{width:100%;padding:14px 10px 5px;border-top:1px solid rgba(0,0,0,.07);text-align:center}
.hm-share-title{margin:0 0 12px;color:#716c65;font-size:12px;font-weight:700}
.hm-share-buttons,.hm-share-more{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hm-share-more{display:none;margin-top:10px}.hm-share-more.is-on{display:flex}
.hm-btn{width:44px;height:44px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 9px rgba(0,0,0,.13);transition:.18s}
.hm-btn:hover{transform:translateY(-2px);box-shadow:0 7px 15px rgba(0,0,0,.17)}
.hm-btn svg{width:21px;height:21px}.hm-kakao{background:#FEE500}.hm-naver{background:#03C75A}.hm-facebook{background:#1877F2}.hm-x,.hm-threads{background:#000}.hm-more,.hm-copy{background:#666}.hm-band{background:#44DA5B}.hm-telegram{background:#0088CC}
@media(max-width:480px){body{padding-left:10px;padding-right:10px}.stage{width:100%}.hm-btn{width:42px;height:42px}.hm-share-buttons,.hm-share-more{gap:9px}}


/* v41: one active Forge only. All stickers stay lightweight until selected. */
.peel-sticker .float-img { display:block; }
.peel-sticker .peel-surface { display:none; }
.peel-sticker.is-forge .float-img { display:none; }
.peel-sticker.is-forge .peel-surface { display:block; }
.peel-sticker.is-floating .float-img { display:block; }
.peel-sticker.is-floating .peel-surface { display:none; }
.peel-sticker.is-forge {
  filter:
    drop-shadow(0 3px 0 rgba(255,255,255,1))
    drop-shadow(0 8px 3px rgba(60,45,32,.34))
    drop-shadow(0 18px 26px rgba(0,0,0,.36));
}

.fallback-poster[hidden]{display:none!important}


/* v43 mobile sticker controls: artwork border only; no artificial selection ring. */
.peel-sticker,
.peel-sticker *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
.peel-sticker{touch-action:none}
.peel-sticker.is-selected{
  outline:none!important;
  border:none!important;
  filter:
    drop-shadow(0 3px 0 rgba(255,255,255,.98))
    drop-shadow(0 6px 2px rgba(60,45,32,.24))
    drop-shadow(0 15px 20px rgba(0,0,0,.31));
}
.peel-sticker.is-moving,
.peel-sticker.is-floating{
  outline:none!important;
  border:none!important;
  filter:
    drop-shadow(0 5px 0 rgba(255,255,255,.98))
    drop-shadow(0 10px 3px rgba(60,45,32,.28))
    drop-shadow(0 24px 30px rgba(0,0,0,.38));
}
.peel-sticker.is-forge{
  outline:none!important;
  border:none!important;
}
.peel-surface{touch-action:none}


/* v45: app owns gesture routing; Forge only renders the 3D peel. */
.peel-surface,.peel-surface canvas{pointer-events:none!important}
.peel-sticker{
  filter:drop-shadow(0 5px 3px rgba(67,48,34,.28)) drop-shadow(0 13px 18px rgba(0,0,0,.24))!important;
}
.peel-sticker.is-selected{
  filter:drop-shadow(0 7px 4px rgba(67,48,34,.3)) drop-shadow(0 17px 24px rgba(0,0,0,.32))!important;
}
.peel-sticker.is-moving,.peel-sticker.is-floating,.peel-sticker.is-peeling{
  filter:drop-shadow(0 9px 5px rgba(67,48,34,.32)) drop-shadow(0 23px 30px rgba(0,0,0,.38))!important;
}


/* v48: one-tap 3-card draw + date navigation + mobile-first gestures */
.date-nav{
  width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
}
.date-nav button{
  min-height:36px;border:1px solid rgba(0,0,0,.08);border-radius:11px;
  background:rgba(255,255,255,.72);color:#5f5a54;font-size:12px;font-weight:800;cursor:pointer;
}
.date-nav button:first-child{text-align:left;padding-left:14px}
.date-nav button:last-child{text-align:right;padding-right:14px}
.date-nav #todayBtn{padding:0 16px}
.date-nav #todayBtn.is-current{background:#2f2d2a;color:#fff;border-color:#2f2d2a}
.peel-pop{animation:none!important}
.peel-sticker{touch-action:none!important}
@media(max-width:480px){
  .edit-tools>span{font-size:11px}
  .edit-buttons button{width:36px;height:36px}
}