/* 캡슐 뽑기 — 클래스는 모두 gc- 접두사 (다른 사이트 CSS와 겹치지 않게) */
:root{--gc-ink:#4a3320;--gc-bg:#fff4e6;--gc-pink:#ff8fb1;--gc-gold:#ffcf5a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--gc-bg);color:var(--gc-ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-tap-highlight-color:transparent}
.gc-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:2px solid #f0dcc2}
.gc-top b{flex:1;text-align:center;font-size:17px}
.gc-brand{color:var(--gc-ink);text-decoration:none;font-weight:800;font-size:13px}
.gc-mute{border:0;background:#fff4e6;border-radius:10px;font-size:18px;padding:4px 8px;cursor:pointer}
.gc-main{max-width:440px;margin:0 auto;padding:12px 14px 28px;display:flex;flex-direction:column;gap:10px}
.gc-chips{display:flex;gap:8px;justify-content:center}
.gc-chip{background:#fff;border:2px solid #f0dcc2;border-radius:999px;padding:5px 14px;font-size:14px;display:flex;align-items:center;gap:6px}
.gc-chu{width:20px;height:20px;object-fit:contain}
.gc-machine{position:relative;touch-action:none;user-select:none}
#gcCv{display:block;width:100%;aspect-ratio:4/5;border-radius:22px;box-shadow:0 8px 24px rgba(120,60,30,.28);background:#ffe9d6;touch-action:none}
.gc-msg{position:absolute;left:0;right:0;bottom:6px;margin:0;text-align:center;font-size:13px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none}
.gc-ctrl{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:4px 6px}
.gc-dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:2px}
.gc-arrow{width:58px;height:58px;border-radius:16px;border:0;background:#fff;box-shadow:0 4px 0 #e2c9a6;font-size:22px;color:var(--gc-ink);cursor:pointer;touch-action:manipulation;user-select:none}
.gc-arrow.u{grid-column:2;grid-row:1}.gc-arrow.l{grid-column:1;grid-row:2}.gc-arrow.r{grid-column:3;grid-row:2}.gc-arrow.d{grid-column:2;grid-row:3}
.gc-arrow:active,.gc-arrow.on{transform:translateY(3px);box-shadow:0 1px 0 #e2c9a6}
.gc-go{width:128px;height:128px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffb3c9,#ff5f8f 70%);color:#fff;font:inherit;font-weight:900;font-size:24px;box-shadow:0 7px 0 #c8456f;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.gc-go small{font-size:13px;font-weight:700;opacity:.95}
.gc-go:active{transform:translateY(6px);box-shadow:0 1px 0 #c8456f}
.gc-go[disabled]{filter:grayscale(.7);opacity:.7;cursor:default}
/* 캡슐 열기 연출 */
.gc-rv{position:fixed;inset:0;z-index:9000;background:radial-gradient(circle at 50% 42%,rgba(60,40,24,.82),rgba(20,12,6,.94));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;cursor:pointer;animation:gcIn .25s ease-out}
.gc-rv[hidden]{display:none}
.gc-rv.out{opacity:0;transition:opacity .25s}
.gc-rv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gc-rv-title{font-weight:900;font-size:20px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.gc-rv-stage{position:relative;width:min(300px,74vw);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;perspective:900px}
.gc-cap{position:relative;width:62%;aspect-ratio:1;animation:gcDrop .55s cubic-bezier(.2,1.4,.4,1)}
.gc-cap i{position:absolute;left:0;right:0;height:50%;display:block;box-shadow:inset 0 -6px 12px rgba(0,0,0,.12)}
.gc-cap .t{top:0;border-radius:999px 999px 0 0;background:var(--gc-c1,#ff7fa8)}
.gc-cap .b{bottom:0;border-radius:0 0 999px 999px;background:var(--gc-c2,#fff3e0)}
.gc-cap::after{content:"";position:absolute;left:18%;top:12%;width:22%;height:14%;border-radius:50%;background:rgba(255,255,255,.7);transform:rotate(-30deg)}
.gc-cap.shake{animation:gcShake .22s linear infinite}
.gc-cap.glow{filter:drop-shadow(0 0 22px var(--gc-glow,#fff)) drop-shadow(0 0 50px var(--gc-glow,#fff))}
.gc-cap.crack .t{transition:transform .35s ease-in,opacity .35s;transform:translate(-40px,-120px) rotate(-40deg);opacity:0}
.gc-cap.crack .b{transition:transform .35s ease-in,opacity .35s;transform:translate(30px,120px) rotate(30deg);opacity:0}
.gc-rv.flash::after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:gcFlash .45s ease-out forwards}
.gc-card{position:absolute;inset:0;margin:auto;width:100%;height:auto;opacity:0;transform:scale(.4) rotateY(180deg);transition:transform .7s cubic-bezier(.2,1.3,.4,1),opacity .3s;border-radius:7%}
.gc-card.in{opacity:1;transform:scale(1) rotateY(0)}
.gc-card.aura{filter:drop-shadow(0 0 18px var(--gc-glow)) drop-shadow(0 0 40px var(--gc-glow))}
.gc-card.thump{animation:gcThump .35s}
.gc-rv-foot{text-align:center;max-width:90vw}
.gc-rv-foot p{margin:0 0 10px;font-size:15px;line-height:1.5}.gc-rv-foot small{opacity:.8}
.gc-rv-btns{display:flex;gap:10px;justify-content:center}
.gc-rv-btns button{border:0;border-radius:12px;background:#ffcf5a;color:#4a3320;font:inherit;font-weight:800;font-size:15px;padding:10px 26px;cursor:pointer}
.gc-rv-btns button.sub{background:rgba(255,255,255,.18);color:#fff}
.gc-rv-hint{opacity:.6;font-size:12px}.gc-rv-hint[hidden]{display:none}
@keyframes gcIn{from{opacity:0}to{opacity:1}}
@keyframes gcDrop{from{transform:translateY(-220px)}to{transform:none}}
@keyframes gcShake{0%{transform:rotate(-7deg) translateX(-3px)}50%{transform:rotate(7deg) translateX(3px)}100%{transform:rotate(-7deg) translateX(-3px)}}
@keyframes gcFlash{from{opacity:.95}to{opacity:0}}
@keyframes gcThump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
/* 안내 글: 모든 줄 같은 글꼴·크기, 줄은 의미 단위로 끊는다 */
.gc-chip{font-size:14px;font-weight:600}.gc-chip b{font-size:inherit;font-weight:inherit}
.gc-note{text-align:center;font-size:13px;font-weight:500;line-height:1.7;color:var(--gc-ink);opacity:.85;word-break:keep-all}
.gc-note p{margin:0 0 8px}.gc-note b{font-weight:700}.gc-note a{color:#c8456f;font-weight:700}