/* 별 선물 연출: 색과 움직임은 화면에만 적용하며 뽑기 결과에는 관여하지 않아요. */
.sg-dialog { box-sizing:border-box; }
.sg-dialog.is-cinematic {
  box-sizing:border-box;
  width:calc(100% - 24px); max-width:640px; max-height:calc(100dvh - 24px);
  padding:14px 24px 26px; overflow:auto; border:0; border-radius:28px;
  background:transparent; box-shadow:none; color:#f5f6ff;
}
.sg-dialog.is-cinematic::backdrop { background:#101a2bde; backdrop-filter:blur(5px); }
.sg-dialog.is-cinematic header { position:relative; top:0; padding:0 0 8px; background:transparent; }
.sg-dialog.is-cinematic header h2 { color:#e1e9f3; font-size:16px; font-weight:650; letter-spacing:.025em; }
.sg-dialog.is-cinematic header button {
  color:#e1e9f3!important; background:#ffffff0a!important; border-color:#ffffff26!important;
  border-radius:999px; padding:8px 14px; font-size:13px;
}
.sg-dialog.is-cinematic header button:disabled { opacity:.35; }
.sg-dialog.is-cinematic .sg-dialog-body { padding:0; }
.sg-cinema {
  --egg-sky:#b9daed; --egg-shade:#88b1d0; --egg-line:#56758d; --egg-light:#ecf9ff;
  --egg-cream:#fff8dd; --egg-glow:#9bdcff;
  position:relative; isolation:isolate; text-align:center; padding:4px 0 8px;
}
.sg-cinema[data-mode="gift"] {
  --egg-sky:#d7c6f0; --egg-shade:#b49ad4; --egg-line:#77628f; --egg-light:#f8f0ff;
  --egg-cream:#fff3ce; --egg-glow:#e5c6ff;
}
.sg-cinema[data-mode="box"] {
  --egg-sky:#f2d598; --egg-shade:#d3b26f; --egg-line:#917446; --egg-light:#fff8dc;
  --egg-cream:#fff6df; --egg-glow:#ffe0a1;
}
.sg-cinema-kicker { margin:14px 0 0; color:#cfdef0; font-size:12px; font-weight:650; letter-spacing:.16em; }
.sg-egg-stage { position:relative; display:grid; place-items:center; width:min(100%,400px); height:300px; margin:0 auto; }
.sg-egg-halo {
  position:absolute; width:270px; height:270px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--egg-glow) 0%,transparent 66%); opacity:.17;
  animation:sg-fx-halo 2.8s ease-in-out 3;
}
.sg-egg-halo::before,.sg-egg-halo::after {
  content:""; position:absolute; inset:29px; border:1px solid var(--egg-glow); border-radius:50%; opacity:.23;
}
.sg-egg-halo::after { inset:12px; border-style:dashed; opacity:.14; }
.sg-orbit { position:absolute; inset:16px 0; pointer-events:none; }
.sg-orbit i {
  position:absolute; left:50%; top:50%; font-style:normal; color:var(--egg-cream); font-size:14px;
  transform:rotate(calc(var(--i) * 45deg)) translateY(-127px) rotate(calc(var(--i) * -45deg));
  opacity:.58; text-shadow:0 0 12px var(--egg-glow); animation:sg-fx-twinkle 2.4s ease-in-out 3;
  animation-delay:calc(var(--i) * 140ms);
}
.sg-orbit i:nth-child(2n) { font-size:8px; color:var(--egg-glow); }
.sg-egg-button {
  position:relative; z-index:2; display:grid; place-items:center; width:208px; height:236px;
  padding:0!important; margin:0!important; background:transparent!important; border:0!important;
  box-shadow:none!important; border-radius:46%; color:inherit; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; appearance:none; transition:filter .2s;
}
.sg-egg-button:disabled { cursor:wait; opacity:1; }
.sg-egg-button:focus-visible { outline:2px solid #e1f1ff; outline-offset:4px; }
.sg-egg { position:relative; display:block; width:138px; height:176px; filter:drop-shadow(0 10px 13px #0004); animation:sg-fx-float 2.8s ease-in-out 4; }
.sg-egg-top {
  position:absolute; z-index:2; top:0; left:0; width:138px; height:119px; overflow:hidden;
  border:3px solid var(--egg-line); border-bottom-width:2px; border-radius:54% 54% 28% 28% / 78% 78% 25% 25%;
  background:radial-gradient(ellipse at 34% 18%,var(--egg-light) 0%,transparent 24%),linear-gradient(135deg,var(--egg-sky) 35%,var(--egg-shade));
  box-shadow:inset 3px 2px 0 #ffffff80,inset -6px -2px 0 #50608015;
  transform-origin:55% 80%;
}
.sg-egg-top::before {
  content:""; position:absolute; width:15px; height:34px; left:25px; top:16px; border-radius:60%;
  transform:rotate(34deg); background:#fffaf0bc; box-shadow:17px -4px 0 -5px #fffaf080;
}
.sg-egg-top::after {
  content:""; position:absolute; width:5px; height:5px; left:19px; top:64px; border-radius:50%; background:var(--egg-cream);
  box-shadow:13px 16px var(--egg-cream),77px -22px var(--egg-cream),88px 14px var(--egg-cream),59px 23px #fff8dd99;
}
.sg-egg-top i { position:absolute; font-style:normal; color:var(--egg-cream); text-shadow:0 1px 0 #ffffff80; }
.sg-egg-top i:nth-child(1) { top:46px; left:29px; font-size:27px; transform:rotate(-13deg); }
.sg-egg-top i:nth-child(2) { top:31px; right:19px; font-size:20px; transform:rotate(15deg); }
.sg-egg-top i:nth-child(3) { top:64px; right:34px; font-size:30px; }
.sg-egg-bottom {
  position:absolute; z-index:1; left:2px; top:83px; width:134px; height:93px;
  border:3px solid var(--egg-line); border-radius:25% 25% 58% 58% / 20% 20% 85% 85%;
  background:linear-gradient(135deg,#fffdf2 12%,var(--egg-cream) 75%,#e4d6b7);
  box-shadow:inset 3px -5px 0 #ffffff80,inset -6px -3px 0 #65738013;
}
.sg-egg-bottom::after { content:"✧"; position:absolute; bottom:17px; left:20px; font-size:19px; color:var(--egg-shade); }
.sg-egg-ribbon {
  position:absolute; z-index:3; top:102px; left:2px; width:134px; height:18px;
  border:2px solid var(--egg-line); border-radius:20% 20% 45% 45%;
  background:linear-gradient(180deg,var(--egg-light),var(--egg-sky)); box-shadow:0 3px 0 #536c7d20;
}
.sg-egg-ribbon::before,.sg-egg-ribbon::after {
  content:""; position:absolute; top:-11px; width:29px; height:24px; border:2px solid var(--egg-line);
  background:var(--egg-sky); box-shadow:inset 2px 2px 0 var(--egg-light);
}
.sg-egg-ribbon::before { left:33px; border-radius:5px 65% 15% 55%; transform:rotate(14deg); }
.sg-egg-ribbon::after { right:32px; border-radius:65% 5px 55% 15%; transform:rotate(-14deg); }
.sg-egg-bow {
  position:absolute; z-index:4; display:grid; place-items:center; top:99px; left:52px; width:34px; height:36px;
  color:var(--egg-cream); font-size:34px; line-height:1; -webkit-text-stroke:1px var(--egg-line);
  filter:drop-shadow(0 2px 0 #536c7d50);
}
.sg-egg-crack {
  position:absolute; z-index:5; left:59px; top:39px; width:27px; height:65px; opacity:0;
  background:var(--egg-light); clip-path:polygon(55% 0,34% 30%,65% 44%,35% 67%,60% 100%,49% 66%,78% 43%,46% 28%);
  filter:drop-shadow(0 0 3px #fff); transition:opacity .2s;
}
.sg-cinema[data-taps="1"] .sg-egg-crack { opacity:.45; }
.sg-cinema[data-taps="2"] .sg-egg-crack,.sg-cinema[data-taps="3"] .sg-egg-crack { opacity:1; }
.sg-egg-shadow { position:absolute; z-index:0; bottom:30px; width:98px; height:15px; border-radius:50%; background:#0004; filter:blur(5px); }
.sg-egg-button.is-tapped .sg-egg { animation:sg-fx-tap .38s ease-out; }
.sg-tap-dots { display:flex; justify-content:center; align-items:center; gap:13px; height:24px; margin:0 auto 18px; }
.sg-tap-dots i { width:12px; height:12px; border:2px solid #b1c7dc; border-radius:50%; background:transparent; transition:background .2s,box-shadow .2s,transform .2s; }
.sg-tap-dots i.is-lit { border-color:#f8edd0; background:#f8edd0; box-shadow:0 0 12px #f8edd099; transform:scale(1.12); }
.sg-cinema .sg-opening { margin:0 0 9px; color:#fff9eb; font-size:clamp(20px,4.7vw,25px); line-height:1.5; text-wrap:balance; }
.sg-cinema .sg-wait-note { margin:0 auto; max-width:360px; color:#bdcbdc; font-size:13px; line-height:1.75; text-wrap:balance; }
.sg-skip {
  display:inline-block; margin:23px 0 0; padding:10px 18px; min-height:44px; font:inherit; font-size:13px;
  background:#ffffff08; color:#d2deeb; border:1px solid #ffffff24; border-radius:999px; cursor:pointer; touch-action:manipulation;
}
.sg-skip:disabled { opacity:.4; cursor:wait; }
.sg-skip:focus-visible { outline:3px solid #d5ecff; outline-offset:3px; }
.sg-cinema.is-opening .sg-egg-top { animation:sg-fx-open-top .55s cubic-bezier(.2,.65,.3,1) both; }
.sg-cinema.is-opening .sg-egg-bottom { animation:sg-fx-open-bottom .55s ease-in both; }
.sg-cinema.is-opening .sg-egg-ribbon,.sg-cinema.is-opening .sg-egg-bow,.sg-cinema.is-opening .sg-egg-crack { animation:sg-fx-ribbon .4s ease-out both; }
.sg-cinema.is-opening .sg-egg-halo { animation:sg-fx-bloom .55s ease-out both; }
.sg-cinema.is-opening .sg-orbit i { animation:sg-fx-twinkle .5s ease-out both; }

/* 축하 효과는 결과 카드 안에서만 재생되고 클릭을 가리지 않아요. */
.sg-dialog-body.is-celebrating { position:relative; isolation:isolate; overflow:hidden; padding:16px 2px 12px; }
.sg-result-banner {
  position:relative; z-index:1; display:table; max-width:100%; margin:0 auto 18px; padding:8px 18px;
  color:#73512b; background:#fff0c9; border:1px solid #ead29c; border-radius:999px;
  font-size:14px; font-weight:750; line-height:1.6; text-align:center; text-wrap:balance;
  animation:sg-fx-result-in .45s ease-out both;
}
.sg-dialog-body.is-rare .sg-result-banner { background:#eee5ff; border-color:#d6bdef; color:#6d4e8e; }
.sg-result-sparkles { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; user-select:none; }
.sg-result-sparkles i {
  position:absolute; top:-24px; left:var(--x,50%); font-style:normal; font-size:18px; color:#deb74d;
  opacity:0; animation:sg-fx-confetti 1.65s ease-out both; animation-delay:var(--delay,0ms);
}
.sg-result-sparkles i:nth-child(3n) { color:#9cbfb8; font-size:13px; }
.sg-result-sparkles i:nth-child(3n + 1) { color:#dca1b5; font-size:15px; }
.sg-dialog-body.is-celebrating .sg-item { animation:sg-fx-result-in .48s cubic-bezier(.2,.8,.3,1.1) both; animation-delay:calc(var(--reveal-index,0) * 90ms); }
.sg-dialog-body.is-celebrating .sg-results.is-many { display:block; }
.sg-dialog-body.is-celebrating .sg-results.is-many .sg-items { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.sg-dialog-body.is-celebrating .sg-results.is-many .sg-item { flex:0 1 210px; min-width:0; min-height:185px; padding:16px 10px; border:1px solid #e7d9bf; border-radius:20px; background:#fffdf8; }
.sg-dialog-body.is-celebrating .sg-results.is-single .sg-item { border:1px solid #e7d9bf; border-radius:24px; background:radial-gradient(ellipse at 50% 35%,#fff1c9,transparent 72%); }
.sg-dialog-body.is-rare .sg-results .sg-item { border-color:#c9b8e5; background:radial-gradient(ellipse at 50% 35%,#efe7ff,transparent 72%); }
.sg-dialog-body.is-celebrating .sg-receipt { position:relative; z-index:1; }
.sg-dialog-body.is-celebrating .sg-result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.sg-mode .sg-button { position:relative; overflow:hidden; transition:transform .18s,box-shadow .18s; }
.sg-mode .sg-button:not(:disabled):active { transform:scale(.98); }
.sg-balances strong { transition:color .2s; }
@media(hover:hover) {
  .sg-mode .sg-button:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 6px 16px #a54d3c28; }
  .sg-egg-button:not(:disabled):hover { filter:drop-shadow(0 0 13px #cfefff40); }
  .sg-skip:not(:disabled):hover { background:#ffffff12; border-color:#ffffff50; }
}
@keyframes sg-fx-float { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-11px) rotate(3deg); } }
@keyframes sg-fx-halo { 0%,100% { opacity:.14; transform:scale(.93); } 50% { opacity:.23; transform:scale(1.06); } }
@keyframes sg-fx-twinkle { 0%,100% { opacity:.3; } 45% { opacity:.95; } }
@keyframes sg-fx-tap { 0%,100% { transform:rotate(0); } 22% { transform:rotate(-10deg) scale(.96,1.03); } 48% { transform:rotate(9deg) scale(1.04,.96); } 74% { transform:rotate(-4deg); } }
@keyframes sg-fx-open-top { to { transform:translate(-12px,-76px) rotate(-20deg); opacity:0; } }
@keyframes sg-fx-open-bottom { to { transform:translate(8px,46px) rotate(12deg); opacity:0; } }
@keyframes sg-fx-ribbon { to { transform:translateY(-14px) scale(1.2); opacity:0; } }
@keyframes sg-fx-bloom { 0% { opacity:.2; transform:scale(.8); } 45% { opacity:.42; } 100% { opacity:0; transform:scale(1.4); } }
@keyframes sg-fx-result-in { from { opacity:0; transform:translateY(15px) scale(.93); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sg-fx-confetti { 0% { opacity:0; transform:translateY(0) rotate(0); } 15% { opacity:.9; } 75% { opacity:.7; } 100% { opacity:0; transform:translateY(420px) rotate(150deg); } }
@media(max-width:480px) {
  .sg-dialog.is-cinematic { width:calc(100% - 16px); padding:10px 12px 16px; }
  .sg-dialog.is-cinematic header h2 { font-size:14px; }
  .sg-egg-stage { height:272px; }
  .sg-egg-halo { width:248px; height:248px; }
  .sg-orbit { inset:5px 0; }
  .sg-tap-dots { margin-bottom:15px; }
  .sg-cinema-kicker { margin-top:12px; }
  .sg-cinema .sg-wait-note { font-size:12px; }
  .sg-dialog-body.is-celebrating .sg-results.is-many .sg-item { flex-basis:calc(50% - 7px); padding:12px 6px; }
  .sg-result-banner { padding:7px 12px; font-size:13px; }
}
@media(max-height:650px) {
  .sg-dialog.is-cinematic { padding-top:8px; padding-bottom:8px; }
  .sg-cinema-kicker { margin-top:4px; }
  .sg-egg-stage { height:230px; }
  .sg-egg-button { height:218px; }
  .sg-egg { transform:scale(.87); }
  .sg-egg-halo { width:220px; height:220px; }
  .sg-orbit { inset:0; transform:scale(.85); }
  .sg-egg-shadow { bottom:11px; }
  .sg-tap-dots { margin-bottom:8px; }
  .sg-skip { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .sg-cinema *,.sg-cinema *::before,.sg-cinema *::after,.sg-dialog-body.is-celebrating *,.sg-mode .sg-button,.sg-balances strong { animation:none!important; transition:none!important; }
  .sg-result-sparkles,.sg-orbit { display:none; }
  .sg-mode .sg-button:not(:disabled):hover,.sg-mode .sg-button:not(:disabled):active { transform:none; }
}
.sg-cinema.is-reduced *,.sg-cinema.is-reduced *::before,.sg-cinema.is-reduced *::after { animation:none!important; transition:none!important; }
.sg-cinema.is-reduced .sg-orbit { display:none; }