/* 포춘쿠키 (/palja/cookie/) — 쿠키가 둘로 갈라지고 종이쪽지가 미끄러져 나와요. 3D(공용 ritual3d)가 열리면 캔버스가 CSS 쿠키를 대신한다 */
.ck { display: flex; flex-direction: column; gap: 16px; }
.ck-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ck-cookie { appearance: none; position: relative; display: flex; justify-content: center; width: 240px; max-width: 100%; height: 150px; margin: 8px auto 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.ck-cookie:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 6px; border-radius: 30px; }
.ck-half { display: block; width: 120px; height: 150px; flex: none; transition: transform .7s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 8px 10px rgba(120, 80, 40, .25)); }
.ck-half--l { transform-origin: 100% 100%; }
.ck-half--r { transform-origin: 0 100%; }
.ck-half-svg { display: block; width: 120px; height: 150px; }
.ck-hint { margin: 6px 0 4px; color: var(--pm-sub-text); font-size: 14.5px; }
.ck-actions { margin: 10px 0 0; }
.ck-crack { min-width: 160px; }

/* 쪽지: 처음엔 접혀 있다가 쿠키가 갈라지면 아래로 미끄러져 나와요 */
.ck-slipwrap { width: 100%; max-height: 0; overflow: hidden; transition: max-height .9s ease .25s; margin-top: 0; padding: 0 2px; }
.ck-slip { box-sizing: border-box; width: min(100%, 360px); margin: 0 auto; padding: 18px 20px 14px; border-radius: 10px; background: #fffaf0; border: 2px dashed #e5c48f; box-shadow: var(--pm-shadow-sm); transform: translateY(-80px); opacity: 0; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .3s, opacity .5s ease .3s; }
.ck-line { margin: 0 0 8px; font-size: 18px; line-height: 1.65; color: var(--pm-ink); word-break: keep-all; overflow-wrap: anywhere; }
.ck-no { display: block; color: var(--pm-sub-text); font-size: 12.5px; letter-spacing: .04em; }

/* 자바스크립트가 있을 때만 쪽지를 숨겨 두고 연출한다(없으면 처음부터 보인다) */
.ck-stage:not(.ck-js) .ck-slipwrap { max-height: none; margin-top: 8px; }
.ck-stage:not(.ck-js) .ck-slip { transform: none; opacity: 1; }
.ck-stage:not(.ck-js) .ck-hint, .ck-stage:not(.ck-js) .ck-actions { display: none; }
.ck-stage:not(.ck-js) .ck-after[hidden] { display: block; }

.ck-stage.is-shake .ck-cookie { animation: ck-shake .6s ease-in-out; }
.ck-stage.is-open .ck-half--l { transform: translate(-38px, 4px) rotate(-24deg); }
.ck-stage.is-open .ck-half--r { transform: translate(38px, 4px) rotate(24deg); }
.ck-stage.is-open .ck-slipwrap { max-height: 260px; }
.ck-stage.is-open .ck-slip { transform: none; opacity: 1; }
.ck-stage.is-open .ck-hint, .ck-stage.is-open .ck-actions { display: none; }
.ck-stage.is-open .ck-cookie { cursor: default; margin-bottom: 44px; transition: margin .5s ease; }
.ck-stage.is-instant .ck-half, .ck-stage.is-instant .ck-slip, .ck-stage.is-instant .ck-slipwrap { transition: none; }

.ck-after { width: 100%; margin-top: 16px; }
.ck-note { margin: 0 0 12px; color: var(--pm-sub-text); font-size: 14.5px; }
.ck-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ck-share .pm-btn { flex: 1 1 140px; max-width: 220px; }
.ck-msg { min-height: 1.4em; margin: 8px 0 10px; }
.ck-after > .pm-btn { margin-top: 4px; }

@keyframes ck-shake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-9deg) translateX(-3px); }
    30% { transform: rotate(8deg) translateX(3px); }
    45% { transform: rotate(-7deg) translateX(-2px); }
    60% { transform: rotate(6deg) translateX(2px); }
    80% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ck-half, .ck-slip, .ck-slipwrap { transition: none !important; }
    .ck-stage.is-shake .ck-cookie { animation: none; }
}
@media (max-width: 420px) {
    .ck-line { font-size: 17px; }
}

/* 3D 쪼개기: 준비되면(.ck-3d) 캔버스가 CSS 쿠키 자리를 이어받는다. 못 열면 위의 CSS 쿠키 그대로 */
.ck-gl { position: relative; width: 100%; max-width: 560px; height: 300px; margin: 0 auto; background: radial-gradient(ellipse at 50% 72%, rgba(242, 193, 78, .24), rgba(242, 193, 78, 0) 62%); }
.ck-gl[hidden], .ck-skip[hidden], .ck-replay[hidden] { display: none; }
.ck-stage.is-playing .ck-hint, .ck-stage.is-playing .ck-actions { display: none; }
.ck-stage.ck-3d .ck-cookie { display: none; }
.ck-skipwrap { display: flex; justify-content: center; }
.ck-skipwrap:empty, .ck-skipwrap:has(.ck-skip[hidden]) { display: none; }
.ck-skip, .ck-replay { min-height: 44px; }
.ck-replay { margin: 0 0 10px; }
@media (max-width: 420px) {
    .ck-gl { height: 270px; }
}