/* 조건 · 결과 톱니바퀴 (/grammar/conditional/gears.jsp, 2026-10-21) — js/ps2-conditional-gears.js 의 .cgr-* 모양. 틀(css/ps2-conditional-arcade.css 의 .ga-*) 위에 이 게임의 빛깔 · 문장 줄의 칩 · 단추 · 로비 그림만 얹는다.
   틀이 상자에 'ga ga--gears' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--gears { --ga-bg1: #0b1220; --ga-bg2: #1f2f4a; --ga-glow: #fcd34d; --ga-halo: rgba(252, 211, 77, .22); --ga-accent: #b45309; --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--gears .cgr-cv { max-width: 100%; background: #0b1220; }

/* 문장 줄: 빈칸 칩 (다음은 빛남, 맞으면 초록, 틀리면 빨강 줄 긋기, 보여 줄 때는 하늘색) */
#main .gi .ga--gears .ga-q .cgr-ask { line-height: 1.9; }
#main .gi .ga--gears .cgr-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--gears .cgr-chip.is-next { animation: cgr-next 1.2s ease-in-out infinite; }
#main .gi .ga--gears .cgr-chip.is-ok { border: 1.5px solid #4ade80; background: #dcfce7; color: #14532d; }
#main .gi .ga--gears .cgr-chip.is-bad { border: 1.5px solid #f87171; background: #fee2e2; color: #7f1d1d; text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--gears .cgr-chip.is-show { border: 1.5px solid #7dd3fc; background: #e0f2fe; color: #0c4a6e; }
@keyframes cgr-next { 50% { box-shadow: 0 0 0 4px rgba(253, 230, 138, .18); } }

/* 머리의 맞물림 수 · 단추 */
#main .gi .ga--gears .cgr-side { padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 800; white-space: nowrap; }
#main .gi .ga--gears .cgr-pad--num { min-width: 64px; }
#main .gi .ga--gears .cgr-pad--num.is-sel { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
#main .gi .ga--gears .cgr-pad--num[hidden] { display: none; }
#main .gi .ga--gears .cgr-pad--go { min-width: 128px; font-size: 16px; }
#main .gi .ga--gears .cgr-pad--go:disabled { opacity: .5; cursor: default; }
#main .gi .ga--gears .cgr-pad--go.is-hint { box-shadow: 0 0 0 3px rgba(245, 158, 11, .35); animation: cgr-hint 1s ease-in-out infinite; }
@keyframes cgr-hint { 50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, .1); } }

/* 로비 그림: 조건 톱니가 돌고, 사슬을 타고 내려온 결과 톱니가 맞물려 등이 켜진다 */
#main .gi .ga--gears .cgr-hero { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(70% 60% at 25% 20%, rgba(45, 212, 191, .2), transparent 70%), radial-gradient(60% 60% at 80% 85%, rgba(96, 165, 250, .22), transparent 70%), linear-gradient(180deg, #0b1220 0%, #13233a 60%, #0e3344 100%); }
#main .gi .ga--gears .cgr-hero__svg { width: 100%; height: 100%; display: block; }
#main .gi .ga--gears .cgr-hero__lamp { fill: rgba(255, 255, 255, .16); animation: cgr-lamp 5.2s ease-in-out infinite; }
#main .gi .ga--gears .cgr-hero__chain { fill: none; stroke: rgba(148, 163, 184, .6); stroke-width: 3; animation: cgr-chain 1.1s linear infinite; }
#main .gi .ga--gears .cgr-hero__face { fill: rgba(255, 255, 255, .32); stroke: rgba(0, 0, 0, .18); stroke-width: 1.5; }
#main .gi .ga--gears .cgr-hero__gear { stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
#main .gi .ga--gears .cgr-hero__gear--a { fill: #f59e0b; filter: drop-shadow(0 4px 0 #b45309) drop-shadow(0 0 14px rgba(251, 191, 36, .55)); }
#main .gi .ga--gears .cgr-hero__gear--b { fill: #60a5fa; filter: drop-shadow(0 4px 0 #1d4ed8); }
#main .gi .ga--gears .cgr-hero__gear--x { fill: #f472b6; filter: drop-shadow(0 4px 0 #be185d); }
#main .gi .ga--gears .cgr-hero__t { font-family: inherit; font-weight: 800; letter-spacing: -0.01em; }
#main .gi .ga--gears .cgr-hero__t--a { font-size: 14px; fill: #431407; }
#main .gi .ga--gears .cgr-hero__t--b { font-size: 11px; fill: #0c2a5e; }
#main .gi .ga--gears .cgr-hero__t--x { font-size: 10px; fill: #4a0f2b; }
#main .gi .ga--gears .cgr-hero__spin { transform-box: fill-box; transform-origin: center; }
#main .gi .ga--gears .cgr-hero__spin--a { animation: cgr-spin 9s linear infinite; }
#main .gi .ga--gears .cgr-hero__spin--b { animation: cgr-spin-b 9s linear infinite; }
#main .gi .ga--gears .cgr-hero__spin--x { animation: cgr-spin-x 7s linear infinite; }
#main .gi .ga--gears .cgr-hero__gb { animation: cgr-hb 5.2s cubic-bezier(.3, .7, .3, 1) infinite; }
#main .gi .ga--gears .cgr-hero__gx { animation: cgr-hx 5.2s linear infinite; }
#main .gi .ga--gears .cgr-hero__pop { position: absolute; left: calc(50% - 50px); top: 38%; font-weight: 900; font-size: 22px; color: #fde68a; text-shadow: 0 2px 0 rgba(2, 6, 23, .7); opacity: 0; animation: cgr-hpop 5.2s ease-out infinite; }
@keyframes cgr-spin { to { transform: rotate(360deg); } }
@keyframes cgr-spin-b { to { transform: rotate(-504deg); } }
@keyframes cgr-spin-x { to { transform: rotate(-300deg); } }
@keyframes cgr-hb {
    0% { transform: translate(252px, -50px); }
    34% { transform: translate(252px, 126px); }
    46%, 86% { transform: translate(197px, 128px); }
    100% { transform: translate(197px, 128px); opacity: 0; }
}
@keyframes cgr-hx {
    0% { transform: translate(252px, 60px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(252px, 290px); opacity: 0; }
}
@keyframes cgr-lamp {
    0%, 44% { fill: rgba(255, 255, 255, .16); }
    50%, 84% { fill: #4ade80; filter: drop-shadow(0 0 6px rgba(74, 222, 128, .9)); }
    92%, 100% { fill: rgba(255, 255, 255, .16); }
}
@keyframes cgr-chain { to { stroke-dashoffset: -14; } }
@keyframes cgr-hpop {
    0%, 46% { opacity: 0; transform: translateY(8px); }
    52% { opacity: 1; transform: translateY(0); }
    76% { opacity: 1; transform: translateY(-8px); }
    86%, 100% { opacity: 0; transform: translateY(-12px); }
}

@media (max-width: 760px) {
    #main .gi .ga--gears .cgr-pad--num { min-width: 0; }
    #main .gi .ga--gears .cgr-pad--go { min-width: 0; font-size: 15px; }
    #main .gi .ga--gears .cgr-pad--go small { display: none; }
    #main .gi .ga--gears .cgr-hero__pop { font-size: 18px; left: calc(50% - 40px); }
}
/* 휴대폰: 판이 낮아 '왜' 카드가 판 안에서 잘리지 않게, 카드를 판 위쪽에 붙이고 아래로 넘쳐 보이게 한다(단추 위를 덮음) */
@media (max-width: 600px) {
    #main .gi .ga--gears .ga-overlay { place-items: start center; padding: 8px; }
    #main .gi .ga--gears .ga-card { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--gears .cgr-chip.is-next, #main .gi .ga--gears .cgr-pad--go.is-hint { animation: none; }
    #main .gi .ga--gears .cgr-hero__spin--a, #main .gi .ga--gears .cgr-hero__spin--b, #main .gi .ga--gears .cgr-hero__spin--x, #main .gi .ga--gears .cgr-hero__chain, #main .gi .ga--gears .cgr-hero__lamp, #main .gi .ga--gears .cgr-hero__pop { animation: none; }
    #main .gi .ga--gears .cgr-hero__gb { animation: none; transform: translate(197px, 128px); }
    #main .gi .ga--gears .cgr-hero__gx { animation: none; transform: translate(252px, 150px); }
    #main .gi .ga--gears .cgr-hero__lamp { fill: #4ade80; }
}