/* 뜻 탁구 — /grammar/gerund/pong.jsp 전용 모양 (2026-10-19). 틀 모양(css/ps2-gerund-arcade.css) 다음에 읽는다.
   색(--ga-*) · 문장 줄의 빈칸 표시 · 아래 단추 둘(왼쪽 칸 to [] · 오른쪽 칸 ~ing) · 남은 공 · 로비 그림(SVG + 움직임). 움직임 줄이기 설정이면 로비 그림은 멈춘다. */
#main .gi .pa.ga--pong { --ga-bg1: #0a1433; --ga-bg2: #172554; --ga-glow: #67e8f9; --ga-halo: rgba(34, 211, 238, .26); --ga-accent: #0891b2; --ga-win: #155e75; --ga-hot: #f472b6; }

/* 문장 줄: 빈칸 · 맞음 · 틀림 */
#main .gi .pa.ga--pong .ga-q .gpo-sent mark { min-width: 64px; }
#main .gi .pa.ga--pong .ga-q .gpo-sent mark.gpo-ok { background: rgba(74, 222, 128, .18); color: #bbf7d0; border: 1px solid rgba(74, 222, 128, .75); }
#main .gi .pa.ga--pong .ga-q .gpo-sent mark.gpo-bad { background: rgba(248, 113, 113, .16); color: #fecaca; border: 1px solid rgba(248, 113, 113, .75); text-decoration: line-through; }
#main .gi .pa.ga--pong .ga-q .gpo-hint { font-size: 12.5px; }

/* 캔버스 */
#main .gi .pa.ga--pong .gpo-cv { background: #050a1c; }

/* 아래 단추: 왼쪽 칸(to []) · 오른쪽 칸(~ing) */
#main .gi .pa.ga--pong .gpo-pad { flex: 1 1 0; min-width: 0; max-width: 340px; height: 58px; padding: 6px 12px; display: grid; align-content: center; gap: 3px; text-align: center; }
#main .gi .pa.ga--pong .gpo-pad b { display: block; font-size: 17px; font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#main .gi .pa.ga--pong .gpo-pad small { margin-top: 0; font-size: 11px; }
#main .gi .pa.ga--pong .gpo-pad--l { border-color: rgba(34, 211, 238, .7); background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%); color: #155e75; }
#main .gi .pa.ga--pong .gpo-pad--l small { color: #0e7490; }
#main .gi .pa.ga--pong .gpo-pad--r { border-color: rgba(244, 114, 182, .7); background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%); color: #9d174d; }
#main .gi .pa.ga--pong .gpo-pad--r small { color: #be185d; }
#main .gi .pa.ga--pong .gpo-pad:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }

/* 남은 공 */
#main .gi .pa.ga--pong .gpo-balls { color: #b45309; letter-spacing: 1px; font-variant-numeric: tabular-nums; }

/* 로비 그림 */
#main .gi .pa .ga-hero__art.gpo-hero { background: #060b1f; }
#main .gi .pa .ga-hero__art.gpo-hero svg { display: block; width: 100%; height: 100%; }
#main .gi .pa .gpo-hero .gpo-h-ball { animation: gpo-ball 3.6s linear infinite; }
#main .gi .pa .gpo-hero .gpo-h-zl { animation: gpo-zone 3.6s linear infinite; }
#main .gi .pa .gpo-hero .gpo-h-lbl rect { animation: gpo-lbl 3.6s linear infinite; }
#main .gi .pa .gpo-hero .gpo-h-pop { opacity: 0; animation: gpo-pop 3.6s ease-out infinite; }
#main .gi .pa .gpo-hero .gpo-h-pp { transform-box: fill-box; transform-origin: 50% 90%; animation: gpo-pp 3.6s ease-in-out infinite; }
#main .gi .pa .gpo-hero .gpo-h-op { transform-box: fill-box; transform-origin: 50% 50%; animation: gpo-op 3.6s ease-in-out infinite; }
#main .gi .pa .gpo-hero .gpo-h-crowd circle { animation: gpo-twinkle 2.4s ease-in-out infinite alternate; }
#main .gi .pa .gpo-hero .gpo-h-crowd circle:nth-child(2n) { animation-delay: -1.2s; }
@keyframes gpo-ball {
    0% { transform: translate(258px, 92px) scale(.65); }
    9% { transform: translate(246px, 128px) scale(.78); }
    20% { transform: translate(232px, 184px) scale(.95); }
    27% { transform: translate(228px, 172px) scale(1.02); }
    34% { transform: translate(226px, 176px) scale(1.05); }
    44% { transform: translate(196px, 120px) scale(.92); }
    54% { transform: translate(158px, 128px) scale(.8); }
    62% { transform: translate(176px, 104px) scale(.74); }
    74% { transform: translate(228px, 86px) scale(.66); }
    86% { transform: translate(258px, 92px) scale(.65); }
    100% { transform: translate(258px, 92px) scale(.65); }
}
@keyframes gpo-zone { 0%, 53% { fill-opacity: .2; fill: #22d3ee; } 56% { fill-opacity: .75; fill: #4ade80; } 80% { fill-opacity: .35; fill: #4ade80; } 92%, 100% { fill-opacity: .2; fill: #22d3ee; } }
@keyframes gpo-lbl { 0%, 53% { stroke: #22d3ee; } 56%, 82% { stroke: #4ade80; } 92%, 100% { stroke: #22d3ee; } }
@keyframes gpo-pop { 0%, 54% { opacity: 0; transform: translateY(6px); } 60% { opacity: 1; transform: translateY(0); } 82% { opacity: 1; transform: translateY(-8px); } 92%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes gpo-pp { 0%, 28% { transform: rotate(10deg); } 34% { transform: rotate(-28deg) translateY(-6px); } 46%, 100% { transform: rotate(10deg); } }
@keyframes gpo-op { 0%, 82% { transform: rotate(-20deg); } 88% { transform: rotate(25deg); } 96%, 100% { transform: rotate(-20deg); } }
@keyframes gpo-twinkle { from { opacity: .35; } to { opacity: 1; } }

@media (max-width: 560px) {
    #main .gi .pa.ga--pong .gpo-pad { height: 56px; padding: 5px 8px; }
    #main .gi .pa.ga--pong .gpo-pad b { font-size: 15px; }
    #main .gi .pa.ga--pong .gpo-pad small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa .gpo-hero .gpo-h-ball { animation: none; transform: translate(158px, 128px) scale(.8); }
    #main .gi .pa .gpo-hero .gpo-h-zl, #main .gi .pa .gpo-hero .gpo-h-lbl rect, #main .gi .pa .gpo-hero .gpo-h-pp, #main .gi .pa .gpo-hero .gpo-h-op, #main .gi .pa .gpo-hero .gpo-h-crowd circle { animation: none; }
    #main .gi .pa .gpo-hero .gpo-h-pop { animation: none; opacity: 1; }
}