/* 도치 팬케이크 (/grammar/conditional/pancake.jsp, 2026-10-21) — js/ps2-conditional-pancake.js 의 .cpk-* 모양. 틀(css/ps2-conditional-arcade.css 의 .ga-*) 위에 이 게임의 빛깔 · 문장 줄 · 칩 · 단추 · 로비 그림만 얹는다.
   틀이 상자에 'ga ga--pancake' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--pancake { --ga-bg1: #2b1d12; --ga-bg2: #6b4423; --ga-glow: #fde68a; --ga-halo: rgba(251, 191, 36, .24); --ga-accent: #b45309; --ga-win: #7c4a1a; --ga-hot: #f59e0b; }
#main .gi .ga--pancake .cpk-cv { max-width: 100%; background: #2b1d12; }

/* 문장 줄: 원래 문장(작게) + 뒤집은 틀의 빈칸 칩 (다음은 빛남, 맞으면 초록, 틀리면 빨강 줄 긋기, 보여 줄 때는 하늘색) */
#main .gi .ga--pancake .ga-q { gap: 4px; }
#main .gi .ga--pancake .cpk-orig { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); font-weight: 600; }
#main .gi .ga--pancake .cpk-orig small { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 11px; font-weight: 800; color: #fde68a; vertical-align: 1px; }
#main .gi .ga--pancake .cpk-orig b { color: #fff; font-weight: 700; }
#main .gi .ga--pancake .ga-q .cpk-ask { line-height: 1.9; }
#main .gi .ga--pancake .cpk-ask__lab { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: #f59e0b; color: #2b1d12; font-size: 11.5px; font-weight: 900; line-height: 1.7; vertical-align: 2px; }
#main .gi .ga--pancake .cpk-chip { display: inline-block; min-width: 2.4em; margin: 0 3px; padding: 0 9px; border-radius: 9px; font-weight: 800; line-height: 1.5; white-space: nowrap; text-align: center;
    border: 1.5px dashed rgba(253, 230, 138, .6); background: rgba(255, 255, 255, .1); color: rgba(253, 230, 138, .9); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
#main .gi .ga--pancake .cpk-chip.is-next { animation: cpk-next 1.2s ease-in-out infinite; }
#main .gi .ga--pancake .cpk-chip.is-ok { border: 1.5px solid #4ade80; background: #dcfce7; color: #14532d; }
#main .gi .ga--pancake .cpk-chip.is-bad { border: 1.5px solid #f87171; background: #fee2e2; color: #7f1d1d; text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--pancake .cpk-chip.is-show { border: 1.5px solid #7dd3fc; background: #e0f2fe; color: #0c4a6e; }
@keyframes cpk-next { 50% { box-shadow: 0 0 0 4px rgba(253, 230, 138, .18); } }

/* 머리의 뒤집은 수 · 단추 */
#main .gi .ga--pancake .cpk-side { padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 800; white-space: nowrap; }
#main .gi .ga--pancake .cpk-pad--flip { min-width: 150px; font-size: 17px; background: linear-gradient(180deg, #78350f, #2b1d12); border-color: #78350f; }
#main .gi .ga--pancake .cpk-pad--flip:disabled { opacity: .55; cursor: default; }
#main .gi .ga--pancake .cpk-pad--flip.is-hot { box-shadow: 0 0 0 3px rgba(74, 222, 128, .45); animation: cpk-hot .7s ease-in-out infinite; }
#main .gi .ga--pancake .cpk-pad--flip[hidden], #main .gi .ga--pancake .cpk-pad--num[hidden] { display: none; }
#main .gi .ga--pancake .cpk-pad--num { min-width: 64px; }
#main .gi .ga--pancake .cpk-pad--num.is-sel { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
@keyframes cpk-hot { 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, .12); } }

/* 로비 그림: 팬 위의 팬케이크가 떠올라 뒤집히고 맞는 접시에 놓인다 */
#main .gi .ga--pancake .cpk-hero { position: absolute; inset: 0; overflow: hidden;
    background: radial-gradient(70% 55% at 50% 0%, rgba(253, 224, 71, .22) 0%, transparent 70%), linear-gradient(180deg, #2b1d12 0%, #4a2f1c 60%, #6b4423 100%); }
#main .gi .ga--pancake .cpk-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, #8b5a2b, #5c3a1a); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18); }
#main .gi .ga--pancake .cpk-hero__stove { position: absolute; left: 50%; top: 52%; width: 150px; height: 20px; margin-left: -75px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; }
#main .gi .ga--pancake .cpk-hero__flame { display: block; width: 10px; height: 18px; border-radius: 50% 50% 40% 40%; background: linear-gradient(180deg, rgba(191, 219, 254, 0), #60a5fa 60%, #3b82f6); transform-origin: bottom; animation: cpk-flame .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.09s); }
#main .gi .ga--pancake .cpk-hero__pan { position: absolute; left: 50%; top: 34%; width: 170px; height: 150px; margin-left: -85px; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4b4b55, #23232b 70%, #0f0f14); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2); transform: scaleY(.58); }
#main .gi .ga--pancake .cpk-hero__handle { position: absolute; left: 150px; top: 60px; width: 110px; height: 22px; border-radius: 12px; background: linear-gradient(180deg, #3b2a22, #1f1410); transform: rotate(-6deg); }
#main .gi .ga--pancake .cpk-hero__cake { position: absolute; left: 50%; top: 46%; width: 130px; height: 70px; margin-left: -65px; z-index: 3; animation: cpk-cake 4.2s cubic-bezier(.4, 0, .4, 1) infinite; transform-style: preserve-3d; }
#main .gi .ga--pancake .cpk-hero__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 13px; letter-spacing: -.01em; backface-visibility: hidden; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
#main .gi .ga--pancake .cpk-hero__face--a { background: radial-gradient(circle at 35% 30%, #fff1c2, #fde68a 60%, #f6b73c); color: #4a2a10; animation: cpk-brown 4.2s linear infinite; }
#main .gi .ga--pancake .cpk-hero__face--b { background: radial-gradient(circle at 35% 30%, #e9a24a, #c9772a 65%, #9a5a1f); color: #fff7d6; transform: rotateX(180deg); }
#main .gi .ga--pancake .cpk-hero__plate { position: absolute; bottom: 18px; width: 140px; height: 44px; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #eef2ff 70%, #c7d2fe); box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 2.5px #93c5fd; }
#main .gi .ga--pancake .cpk-hero__plate span { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); padding: 4px 10px; border-radius: 9px; background: #fff; color: #1e1b4b; font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: 0 0 0 1.5px #93c5fd; }
#main .gi .ga--pancake .cpk-hero__plate:not(.cpk-hero__plate--x) { left: 10%; animation: cpk-plate 4.2s linear infinite; }
#main .gi .ga--pancake .cpk-hero__plate--x { right: 10%; }
#main .gi .ga--pancake .cpk-hero__pop { position: absolute; left: 10%; bottom: 70px; width: 140px; text-align: center; font-weight: 900; font-size: 22px; color: #fde68a; text-shadow: 0 2px 0 rgba(2, 6, 23, .7); opacity: 0; animation: cpk-pop 4.2s ease-out infinite; }
@keyframes cpk-flame { from { transform: scaleY(.7); } to { transform: scaleY(1.2); } }
@keyframes cpk-cake {
    0%, 42% { transform: translate(0, 0) rotateX(0deg); }
    58% { transform: translate(-40px, -120px) rotateX(180deg); }
    72% { transform: translate(-110px, -40px) rotateX(180deg); }
    74%, 90% { transform: translate(-112px, 24px) rotateX(180deg); }
    91%, 100% { transform: translate(0, 0) rotateX(0deg); opacity: 0; }
}
@keyframes cpk-brown { 0% { filter: brightness(1.05); } 42% { filter: brightness(.86) saturate(1.25); } 100% { filter: brightness(.86) saturate(1.25); } }
@keyframes cpk-plate { 0%, 72% { box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 2.5px #93c5fd; } 76%, 90% { box-shadow: 0 0 22px #86efac, inset 0 0 0 3px #86efac; } 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 2.5px #93c5fd; } }
@keyframes cpk-pop { 0%, 74% { opacity: 0; transform: translateY(8px); } 78% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(-10px); } 96%, 100% { opacity: 0; transform: translateY(-14px); } }

@media (max-width: 760px) {
    #main .gi .ga--pancake .cpk-pad--flip { min-width: 0; font-size: 16px; }
    #main .gi .ga--pancake .cpk-pad--num { min-width: 0; }
    #main .gi .ga--pancake .cpk-orig { font-size: 13px; }
    #main .gi .ga--pancake .cpk-hero__pan { width: 130px; height: 116px; margin-left: -65px; }
    #main .gi .ga--pancake .cpk-hero__handle { left: 112px; top: 46px; width: 80px; }
    #main .gi .ga--pancake .cpk-hero__cake { width: 100px; height: 56px; margin-left: -50px; }
    #main .gi .ga--pancake .cpk-hero__face { font-size: 11px; }
    #main .gi .ga--pancake .cpk-hero__plate { width: 110px; height: 36px; }
    #main .gi .ga--pancake .cpk-hero__plate span { font-size: 11.5px; bottom: 24px; }
    #main .gi .ga--pancake .cpk-hero__pop { width: 110px; font-size: 18px; }
}
/* 휴대폰: 판이 낮아 '왜' 카드가 판 안에서 잘리지 않게, 카드를 판 위쪽에 붙이고 아래로 넘쳐 보이게 한다(단추 위를 덮음) */
@media (max-width: 600px) {
    #main .gi .ga--pancake .ga-overlay { place-items: start center; padding: 8px; }
    #main .gi .ga--pancake .ga-card { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--pancake .cpk-chip.is-next, #main .gi .ga--pancake .cpk-pad--flip.is-hot { animation: none; }
    #main .gi .ga--pancake .cpk-hero__flame, #main .gi .ga--pancake .cpk-hero__cake, #main .gi .ga--pancake .cpk-hero__face--a, #main .gi .ga--pancake .cpk-hero__plate, #main .gi .ga--pancake .cpk-hero__pop { animation: none; }
    #main .gi .ga--pancake .cpk-hero__cake { transform: translate(-112px, 24px) rotateX(180deg); }
    #main .gi .ga--pancake .cpk-hero__plate:not(.cpk-hero__plate--x) { box-shadow: 0 0 22px #86efac, inset 0 0 0 3px #86efac; }
}