.cl-era-play{--cl-ink:#211d19;--cl-paper:#f7f0e4;--cl-surface:#fffaf2;--cl-line:rgba(49,39,29,.14);--cl-accent:#5f46a8;--cl-warm:#c99634;background:linear-gradient(180deg,#f8f2e8 0%,#f5eddf 100%);border:1px solid var(--cl-line);border-radius:22px;padding:16px;color:var(--cl-ink);max-width:920px;margin:14px auto;box-shadow:0 8px 30px rgba(66,48,31,.055)}
.cl-era-play *{box-sizing:border-box}.cl-era-play[hidden],.cl-era-play [hidden]{display:none!important}
.cl-era-play__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.cl-era-play__meta{min-width:0}.cl-era-play__eyebrow{margin:0 0 2px;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#73665b}.cl-era-play__lead{margin:0;color:#4f473f;font-size:.94rem;line-height:1.35}.cl-era-play__round-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:5px}.cl-era-play__round-face{display:inline-flex;margin:0;padding:3px 8px;border-radius:999px;background:rgba(201,150,52,.10);border:1px solid rgba(201,150,52,.18);font-size:.68rem;font-weight:750;color:#795a20;line-height:1.25}.cl-sound-toggle{width:38px;height:38px;min-width:38px;border:1px solid var(--cl-line);background:rgba(255,255,255,.7);border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;box-shadow:0 2px 8px rgba(40,30,20,.04);transition:transform .16s ease,background .16s ease}.cl-sound-toggle:active{transform:scale(.94)}
.cl-era-play__statusbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px;padding:8px 10px 8px 12px;border-radius:13px;background:rgba(95,70,168,.075);border:1px solid rgba(95,70,168,.08)}.cl-era-play__prompt{font-size:.9rem;font-weight:700;line-height:1.35}.cl-era-play__progress{display:flex;align-items:center;gap:5px;white-space:nowrap}.cl-progress-dot{width:8px;height:8px;border-radius:50%;background:rgba(95,70,168,.18);box-shadow:inset 0 0 0 1px rgba(95,70,168,.16);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.cl-progress-dot.is-done{background:var(--cl-accent);box-shadow:0 0 0 3px rgba(95,70,168,.10);transform:scale(1.08)}.cl-progress-count{font-size:.76rem;color:#6c5c88;margin-left:2px}
.cl-era-play__board{position:relative}.cl-era-play__snap-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}.cl-snap-beam{position:absolute;height:3px;transform-origin:0 50%;border-radius:999px;background:linear-gradient(90deg,rgba(212,164,71,0),rgba(255,238,180,.95),rgba(212,164,71,0));box-shadow:0 0 12px rgba(212,164,71,.55);animation:clSnapBeam .5s ease-out forwards}
.cl-era-play__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;perspective:1100px}.cl-scene-slot{position:relative;min-width:0;min-height:188px;aspect-ratio:1.42/1;border-radius:16px;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}.cl-scene-slot.is-empty{background:rgba(115,96,76,.035);box-shadow:inset 0 0 0 1px rgba(115,96,76,.10)}.cl-scene-slot.is-refilling{animation:clSlotRefill .55s ease}.cl-scene-slot>.cl-scene-card{width:100%;height:100%}.cl-scene-card{position:relative;appearance:none;border:1px solid rgba(45,35,25,.13);background:#d9cfbf;border-radius:16px;overflow:hidden;padding:0;text-align:left;color:#fff;cursor:pointer;min-height:188px;aspect-ratio:1.42/1;box-shadow:0 7px 17px rgba(30,23,16,.08);transform-origin:50% 85%;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease,filter .18s ease,opacity .18s ease}.cl-scene-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,8,6,.02) 38%,rgba(17,13,9,.78) 100%);pointer-events:none}.cl-scene-card:hover{transform:translateY(-3px) rotateX(1.4deg);box-shadow:0 13px 26px rgba(30,23,16,.14)}.cl-scene-card:active{transform:translateY(-1px) scale(.985)}.cl-scene-card:focus-visible{outline:3px solid rgba(95,70,168,.4);outline-offset:3px}.cl-scene-card.is-dealing{opacity:0;transform:translateY(-18px) rotateZ(calc((var(--deal-index) - 1.5) * 1.3deg)) scale(.97)}.cl-scene-card.is-dealt{animation:clDeal .25s cubic-bezier(.2,.8,.2,1)}.cl-scene-card.is-refill-card.is-dealing{opacity:0;transform:translateY(-12px) scale(.965) rotateZ(calc((var(--deal-index) - .5) * 1.1deg))}.cl-scene-card.is-refill-card.is-refilled{animation:clRefill .32s cubic-bezier(.18,.85,.22,1)}.cl-scene-card.is-selected{transform:translateY(-7px) rotateX(2.2deg) scale(1.018);border-color:#8c74d4;box-shadow:0 0 0 3px rgba(95,70,168,.17),0 16px 30px rgba(47,33,87,.17)}.cl-scene-card.is-selected::after{content:"고름";position:absolute;z-index:5;top:8px;left:8px;padding:3px 7px;border-radius:999px;background:rgba(51,38,92,.88);color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.02em}.cl-scene-card.is-matched{border-color:#d4a447;box-shadow:0 0 0 3px rgba(212,164,71,.2),0 10px 25px rgba(80,62,26,.13);filter:saturate(1.06)}.cl-scene-card.is-matched::after{content:"연결!";position:absolute;z-index:5;top:8px;right:8px;padding:4px 8px;border-radius:999px;background:rgba(255,250,242,.95);color:#75530f;font-size:.68rem;font-weight:850;box-shadow:0 2px 8px rgba(48,35,17,.12)}.cl-scene-card.is-snapping{animation:clSnap .42s cubic-bezier(.18,.85,.22,1)}.cl-scene-card.is-captured{opacity:.34;filter:saturate(.72) brightness(.92);transform:scale(.985);pointer-events:none}.cl-scene-card.is-miss{animation:clMiss .28s ease}.cl-scene-card__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#eee4d4,#cfc3b1)}.cl-scene-card__media img{width:100%;height:100%;object-fit:cover;display:block}.cl-scene-card__emoji{font-size:4rem;line-height:1}.cl-scene-card__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:26px 12px 11px;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 3px rgba(0,0,0,.52)}.cl-scene-card__body strong{font-size:.98rem;line-height:1.25}.cl-scene-card__body span{font-size:.78rem;color:rgba(255,255,255,.84);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-capture-tray{display:flex;align-items:center;gap:9px;margin-top:9px;padding:7px 8px;border-radius:13px;background:rgba(255,250,242,.72);border:1px dashed rgba(126,99,59,.20)}.cl-capture-tray__label{flex:0 0 auto;font-size:.66rem;font-weight:800;color:#81715f}.cl-capture-tray__slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0;flex:1}.cl-capture-slot{height:43px;min-width:0;border-radius:10px;background:rgba(116,94,70,.055);border:1px solid rgba(116,94,70,.08);display:flex;align-items:center;gap:6px;padding:4px 6px;overflow:hidden;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.cl-capture-slot.is-filled{background:#fffaf2}.cl-capture-slot.is-receiving{transform:scale(1.035);box-shadow:0 0 0 3px rgba(201,150,52,.12);background:#fff5d9}.cl-capture-pair{display:flex;align-items:center;gap:2px;flex:0 0 auto}.cl-capture-thumb{width:29px;height:28px;border-radius:7px;overflow:hidden;background:#e7dccb;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem}.cl-capture-thumb img{width:100%;height:100%;object-fit:cover}.cl-capture-link{font-size:.58rem;font-weight:900;color:#b18430}.cl-capture-label{min-width:0;font-size:.65rem;line-height:1.18;color:#5e5248;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-capture-ghost{position:fixed;z-index:999999;pointer-events:none;overflow:hidden;border-radius:16px;box-shadow:0 16px 32px rgba(43,31,20,.18);transition:transform .43s cubic-bezier(.22,.8,.22,1),opacity .38s ease}.cl-capture-ghost .cl-scene-card__body{opacity:.8}
.cl-era-play__result{padding-top:2px}.cl-era-play__result-head{position:relative;display:flex;align-items:center;gap:10px;margin:2px 0 10px}.cl-era-play__result-mark{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff7e5;border:1px solid rgba(201,150,52,.25);color:#8c6415;font-weight:900;font-size:1rem}.cl-era-play__result-kicker{margin:0 0 1px;color:#80601f;font-weight:850;font-size:.74rem;letter-spacing:.03em}.cl-era-play__result h3{margin:0;font-size:1.02rem;line-height:1.3}.cl-era-play__pair-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cl-pair-result{display:flex;align-items:center;gap:9px;min-width:0;border:1px solid var(--cl-line);border-radius:14px;background:rgba(255,250,242,.9);padding:8px;animation:clResultIn .28s ease both}.cl-pair-result:nth-child(2){animation-delay:.08s}.cl-pair-result__thumbs{display:flex;align-items:center;gap:3px;flex:0 0 auto}.cl-pair-mini{width:42px;height:36px;border-radius:8px;background:#e7dccb;display:flex;align-items:center;justify-content:center;font-size:1.35rem;overflow:hidden}.cl-pair-mini img{width:100%;height:100%;object-fit:cover}.cl-pair-result__join{font-size:.68rem;font-weight:800;color:#99846a}.cl-pair-result__copy{min-width:0;display:flex;flex-direction:column;gap:1px}.cl-pair-result__copy strong{font-size:.78rem;line-height:1.22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-pair-result__copy span{font-size:.68rem;color:#817468}.cl-pair-result__cta{margin-left:auto;flex:0 0 auto;font-size:.7rem;text-decoration:none;color:#5b468b;border-bottom:1px solid currentColor}
.cl-context-bridge{margin-top:10px;padding:11px 12px;border:1px solid rgba(95,70,168,.16);border-radius:15px;background:rgba(255,255,255,.58)}.cl-context-bridge__lead{margin:0;color:#62584f;font-size:.84rem;line-height:1.45}.cl-context-bridge__actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.cl-context-bridge__cta,.cl-era-play__restart{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:999px;padding:8px 13px;font-size:.82rem;text-decoration:none;font-weight:800;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.cl-context-bridge__cta{border:1px solid #171411;background:#171411;color:#fff;box-shadow:0 4px 12px rgba(20,16,12,.12)}.cl-context-bridge__cta:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(20,16,12,.16)}.cl-era-play__restart{border:1px solid rgba(34,34,34,.15);background:#fff;color:#40372f;cursor:pointer}.cl-era-play__restart:hover{transform:translateY(-1px);background:#fffdf9}.cl-era-play-notice{padding:12px 14px;border-left:4px solid #dba617;background:#fff8da}
.cl-complete-burst{position:absolute;left:17px;top:18px;width:1px;height:1px;pointer-events:none}.cl-complete-burst i{--angle:calc(var(--i) * 45deg);position:absolute;width:5px;height:5px;border-radius:50%;background:#d8a642;transform:rotate(var(--angle)) translateX(0);animation:clBurst .72s ease-out forwards;opacity:0}.cl-complete-burst i:nth-child(even){background:#8067c0;width:4px;height:4px}
@keyframes clDeal{0%{opacity:0;transform:translateY(-18px) rotateZ(1.2deg) scale(.97)}72%{opacity:1;transform:translateY(2px) rotateZ(-.35deg) scale(1.006)}100%{opacity:1;transform:none}}@keyframes clRefill{0%{opacity:0;transform:translateY(-13px) scale(.96)}70%{opacity:1;transform:translateY(2px) scale(1.012)}100%{opacity:1;transform:none}}@keyframes clSlotRefill{0%,100%{background:transparent;box-shadow:none}45%{background:rgba(201,150,52,.07);box-shadow:inset 0 0 0 2px rgba(201,150,52,.10)}}@keyframes clSnap{0%{transform:translateY(-5px) scale(1.015)}45%{transform:translateY(-7px) scale(1.05)}100%{transform:translateY(-2px) scale(1)}}@keyframes clSnapBeam{0%{opacity:0;transform-origin:0 50%;filter:blur(2px)}25%{opacity:1;filter:blur(0)}100%{opacity:0}}@keyframes clMiss{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px) rotate(-.35deg)}70%{transform:translateX(3px) rotate(.35deg)}}@keyframes clResultIn{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}@keyframes clBurst{0%{opacity:0;transform:rotate(var(--angle)) translateX(2px) scale(.6)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(34px) scale(1)}}
@media(max-width:640px){.cl-era-play{padding:12px;border-radius:18px;margin:10px auto}.cl-era-play__header{margin-bottom:8px}.cl-era-play__lead{font-size:.88rem}.cl-era-play__round-face{font-size:.62rem;margin-top:4px}.cl-era-play__statusbar{margin:7px 0 9px;padding:7px 9px}.cl-era-play__prompt{font-size:.82rem}.cl-era-play__grid{gap:7px}.cl-scene-slot{min-height:138px;aspect-ratio:1.27/1;border-radius:13px}.cl-scene-card{min-height:138px;aspect-ratio:1.27/1;border-radius:13px}.cl-scene-card__body{padding:23px 9px 9px}.cl-scene-card__body strong{font-size:.86rem}.cl-scene-card__body span{font-size:.7rem}.cl-scene-card.is-matched::after{top:6px;right:6px;font-size:.62rem;padding:3px 6px}.cl-scene-card.is-selected::after{top:6px;left:6px;font-size:.57rem}.cl-capture-tray{padding:6px;gap:6px}.cl-capture-tray__label{display:none}.cl-capture-slot{height:39px;padding:3px 4px}.cl-capture-thumb{width:26px;height:25px}.cl-capture-label{font-size:.58rem}.cl-era-play__pair-results{grid-template-columns:1fr;gap:6px}.cl-pair-mini{width:38px;height:32px}.cl-context-bridge{padding:10px}.cl-context-bridge__actions{display:grid;grid-template-columns:1fr 1fr}.cl-context-bridge__cta,.cl-era-play__restart{padding:7px 9px;font-size:.76rem}.cl-era-play__result h3{font-size:.96rem}}
@media(max-width:380px){.cl-era-play__statusbar{align-items:flex-start}.cl-era-play__progress{padding-top:2px}.cl-scene-slot,.cl-scene-card{min-height:128px}.cl-scene-card__body span{display:none}.cl-capture-label{display:none}.cl-context-bridge__actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cl-scene-card,.cl-sound-toggle,.cl-context-bridge__cta,.cl-era-play__restart,.cl-progress-dot{transition:none}.cl-scene-card.is-dealing{opacity:1;transform:none}.cl-scene-card.is-dealt,.cl-scene-card.is-refilled,.cl-scene-card.is-snapping,.cl-scene-card.is-miss,.cl-scene-slot.is-refilling,.cl-pair-result,.cl-complete-burst i,.cl-snap-beam{animation:none}.cl-capture-ghost{display:none}}