.bokchae{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;margin:0 auto 70px;padding:48px 24px 34px;max-width:560px;text-align:center;border-block:1px solid #c8aa602e;background:radial-gradient(ellipse at 50% 53%,#682b192c,transparent 66%),#0c0d0c;color:#eee4d3}
.bokchae .bokchae-eyebrow{font-size:12px;letter-spacing:.17em;color:#c7a66d}
.bokchae h2{font-size:clamp(24px,5.5vw,30px);font-weight:500;line-height:1.6;margin:17px 0 10px;letter-spacing:-.035em;word-break:keep-all}
.bokchae .bokchae-intro{font-size:14px;color:#b9aea0;margin:0;line-height:1.7}
.bokchae-stage{position:relative;width:260px;max-width:100%;height:260px;margin:4px auto 0;perspective:900px}
.bokchae-halo{position:absolute;inset:20px -30px -10px;border-radius:50%;background:radial-gradient(ellipse,#ca94301a,transparent 68%);transition:opacity .6s;opacity:.4}
.bokchae-envelope{position:absolute;width:226px;height:146px;bottom:20px;left:50%;transform:translateX(-50%);border-radius:6px;background:#63251f;box-shadow:0 20px 38px #0009,inset 0 0 0 1px #c2724e55}
.bokchae-lid{position:absolute;inset:0 0 auto;height:90px;z-index:4;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(160deg,#b34e37,#873325);transform-origin:top;transition:transform .65s,filter .65s;backface-visibility:visible}
.bokchae-pocket{position:absolute;inset:0;z-index:3;border-radius:5px;background:linear-gradient(32deg,#7c2b24 49.5%,transparent 50%) left/50.2% 100% no-repeat,linear-gradient(-32deg,#94392b 49.5%,transparent 50%) right/50.2% 100% no-repeat;pointer-events:none}
.bokchae-pocket:after{content:"";position:absolute;inset:auto 0 0;height:62px;background:linear-gradient(0deg,#8e3528,#993e2e);clip-path:polygon(0 100%,0 35%,50% 0,100% 35%,100% 100%);border-radius:0 0 5px 5px}
.bokchae-pocket>span{position:absolute;bottom:15px;left:0;right:0;z-index:1;font-size:10px;letter-spacing:.2em;color:#e1b888}
.bokchae-ticket{box-sizing:border-box;position:absolute;inset:8px 16px auto;height:176px;padding:15px 10px;background:linear-gradient(115deg,#f8eac9,#e9d3a0);color:#493321;border:1px solid #ffedbb;border-radius:3px;box-shadow:0 1px 12px #0004;z-index:2;opacity:0;transform:translateY(18px);transition:transform .8s .25s,opacity .2s .3s}
.bokchae-ticket:after{content:"";position:absolute;inset:5px;border:1px solid #ab834d66;pointer-events:none}
.bokchae-ticket>span{display:block;font-size:11px;letter-spacing:.05em;line-height:1.7}
.bokchae-ticket>strong{display:block;font-size:34px;line-height:1.5;font-family:Georgia,serif;letter-spacing:-.03em}
.bokchae-ticket strong small{font-size:14px;margin-left:3px}
.bokchae-ticket>b{display:inline-block;border:1px solid #aa3c2d;border-radius:3px;color:#a53227;font-size:15px;padding:1px 12px;margin:0 0 7px;transform:rotate(-7deg)}
.bokchae .bokchae-seal{position:absolute;z-index:5;left:50%;top:142px;transform:translateX(-50%);border:1px solid #e4b678;border-radius:50%;width:64px;height:64px;background:radial-gradient(circle at 30% 20%,#e3bb76,#b17d3f);box-shadow:0 4px 14px #42120d88,inset 0 0 0 4px #966630,inset 0 0 0 5px #e6bd7c;cursor:pointer;color:#662c20;padding:0;touch-action:manipulation;transition:filter .2s}
.bokchae-seal>span{display:block;font-size:29px;line-height:1.2}.bokchae-seal>small{display:block;font-size:9px;line-height:1.6;letter-spacing:.04em}
.bokchae-seal:hover{filter:brightness(1.13)}.bokchae-seal:focus-visible{outline:2px solid #fff0c6;outline-offset:6px}
.bokchae-open .bokchae-lid{transform:rotateX(180deg);filter:brightness(.7);z-index:1}.bokchae-open .bokchae-ticket{transform:translateY(-98px);opacity:1}.bokchae-open .bokchae-halo{opacity:1}
.bokchae-result{min-height:55px;margin:4px 0 14px}.bokchae .bokchae-result>strong{font-size:21px;color:#eed19a;line-height:1.5}.bokchae .bokchae-result p{font-size:13px;line-height:1.8;color:#b9aea0;margin:6px 0}
.bokchae .bokchae-start{width:100%;max-width:340px;min-height:52px;justify-content:center;gap:12px;margin:6px auto 18px;font-size:15px}
.bokchae .bokchae-note{display:block;font-size:10px;line-height:1.9;color:#a19888;word-break:keep-all}
.bokchae-sparks{position:absolute;inset:40px 0;pointer-events:none}.bokchae-sparks i{position:absolute;left:50%;top:45%;height:7px;width:3px;background:#efc77d;opacity:0;transform:rotate(calc(var(--i)*45deg));animation:bokchae-spark 1s .2s ease-out both}
@keyframes bokchae-spark{15%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--i)*45deg)) translateY(-125px)}}
@media(prefers-reduced-motion:reduce){.bokchae *{animation:none!important;transition:none!important}}