/*
 * 두 갈래 풍선 (/grammar/modal/pang.jsp, 2026-10-21) — 게임 js/ps2-modal-pang.js 의 꾸밈. 틀의 꾸밈은 css/ps2-modal-arcade.css (.ga-*)
 *   갈래 색: 사람의 일 #fb7185 (산호) · 말하는 사람의 판단 #a78bfa (보라), 밑줄 친 조동사 = 노란 밑줄
 */
#main .gi .ga--pang { --ga-bg1: #0e1a36; --ga-bg2: #17305a; --ga-glow: #67e8f9; --ga-halo: rgba(103, 232, 249, .2); --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--pang .mpg-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; }
#main .gi .ga--pang .ga-q { min-height: 104px; }
#main .gi .ga--pang .ga-q .mpg-sent { margin: 2px 0 0; font-size: clamp(16.5px, 2.3vw, 21px); font-weight: 700; line-height: 1.5; color: #f8fafc; text-align: center; letter-spacing: -0.005em; }
#main .gi .ga--pang .ga-q .mpg-sent mark.mpg-tg { padding: 0 3px; border-radius: 0; background: transparent; color: #fde68a; font-weight: 800; text-decoration: underline; text-decoration-color: #fbbf24; text-decoration-thickness: 3px; text-underline-offset: 4px; }
#main .gi .ga--pang .ga-q .mpg-sent.is-ok mark.mpg-tg { color: #a7f3d0; text-decoration-color: #34d399; }
#main .gi .ga--pang .ga-card .mpg-sent mark.mpg-tg, #main .gi .ga--pang .ga-view--result .mpg-sent mark.mpg-tg { padding: 0 4px; border-radius: 5px; background: #fef3c7; color: #92400e; text-decoration: underline; text-decoration-color: #f59e0b; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#main .gi .ga--pang .mpg-full { display: grid; gap: 4px; }
#main .gi .ga--pang .mpg-full .ga-sent { margin: 0; }
#main .gi .ga--pang .mpg-ans { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
#main .gi .ga--pang .mpg-ans__k { font-weight: 800; color: #334155; }
#main .gi .ga--pang .mpg-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; line-height: 1.6; color: #1e1b2e; white-space: nowrap; }
#main .gi .ga--pang .mpg-chip b { font-weight: 900; }
#main .gi .ga--pang .mpg-chip--0 { background: #fecdd3; box-shadow: inset 0 0 0 1.5px #fb7185; }
#main .gi .ga--pang .mpg-chip--1 { background: #ddd6fe; box-shadow: inset 0 0 0 1.5px #a78bfa; }
#main .gi .ga--pang .ga-q .mpg-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--pang .mpg-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--pang .mpg-speed { padding: 2px 9px; border-radius: 999px; background: rgba(103, 232, 249, .14); color: #0e7490; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--pang .mpg-gold { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
#main .gi .ga--pang .mpg-gold small { margin-right: 3px; font-size: 12px; font-weight: 800; color: var(--ga-mute); }
#main .gi .ga--pang .mpg-gold i { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; box-shadow: inset 0 0 0 1px #cbd5e1; }
#main .gi .ga--pang .mpg-gold i.is-on { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, .7); }
#main .gi .ga--pang .mpg-gold.is-gold small { color: #b45309; }
#main .gi .ga--pang .mpg-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; width: 100%; }
#main .gi .ga--pang .mpg-legend__i { padding: 4px 12px; border-radius: 999px; font-size: 13px; line-height: 1.5; color: #334155; background: #f8fafc; }
#main .gi .ga--pang .mpg-legend__i b { margin-right: 4px; font-weight: 900; }
#main .gi .ga--pang .mpg-legend__i--0 { box-shadow: inset 0 0 0 1.5px #fda4af; }
#main .gi .ga--pang .mpg-legend__i--0 b { color: #be123c; }
#main .gi .ga--pang .mpg-legend__i--1 { box-shadow: inset 0 0 0 1.5px #c4b5fd; }
#main .gi .ga--pang .mpg-legend__i--1 b { color: #6d28d9; }

/* 로비 그림: 가시 천장 · 풍선 둘 · 작살 발사대 */
#main .gi .ga--pang .mpg-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(110% 70% at 50% 100%, rgba(251, 191, 36, .2), transparent 60%), linear-gradient(#0b1430, #17305a 55%, #2c4d78); }
#main .gi .ga--pang .mpg-hero__spikes { position: absolute; left: 0; right: 0; top: 0; height: 22px; background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 0H16L8 12Z' fill='%23cbd5e1'/%3E%3C/svg%3E") repeat-x 0 10px; }
#main .gi .ga--pang .mpg-hero__b { position: absolute; bottom: 74px; width: 92px; height: 104px; margin-left: -46px; border-radius: 50% 50% 47% 47% / 52% 52% 48% 48%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; color: #fff;
    animation: mpg-rise 3.2s ease-in-out infinite; }
#main .gi .ga--pang .mpg-hero__b::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 46px; background: rgba(226, 232, 240, .55); }
#main .gi .ga--pang .mpg-hero__b small { padding: 1px 8px; border-radius: 999px; background: rgba(15, 23, 42, .32); font-size: 11px; font-weight: 800; }
#main .gi .ga--pang .mpg-hero__b b { font-size: 14px; font-weight: 900; text-shadow: 0 1px 0 rgba(15, 23, 42, .4); }
#main .gi .ga--pang .mpg-hero__b--0 { left: 30%; background: radial-gradient(circle at 34% 28%, #ffe4e6 0 8%, #fb7185 46%, #9f1239 100%); }
#main .gi .ga--pang .mpg-hero__b--1 { left: 70%; background: radial-gradient(circle at 34% 28%, #ede9fe 0 8%, #a78bfa 46%, #5b21b6 100%); animation-delay: -1.4s; }
#main .gi .ga--pang .mpg-hero__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(#13233f, #0a1428); box-shadow: 0 -2px 0 rgba(103, 232, 249, .5); }
#main .gi .ga--pang .mpg-hero__gun { position: absolute; left: 70%; bottom: 14px; width: 46px; height: 20px; margin-left: -23px; border-radius: 10px; background: linear-gradient(#94a3b8, #1e293b); animation: mpg-slide 3.2s ease-in-out infinite; }
#main .gi .ga--pang .mpg-hero__gun::before { content: ''; position: absolute; left: 50%; bottom: 14px; width: 10px; height: 26px; margin-left: -5px; border-radius: 4px; background: linear-gradient(90deg, #475569, #e2e8f0, #334155); }
#main .gi .ga--pang .mpg-hero__line { position: absolute; left: 70%; bottom: 60px; width: 0; height: 60px; border-left: 2px dashed rgba(255, 255, 255, .45); animation: mpg-slide 3.2s ease-in-out infinite; }
#main .gi .ga--pang .mpg-hero__shot { position: absolute; left: 70%; bottom: 60px; width: 2px; height: 0; margin-left: -1px; background: #e2e8f0; animation: mpg-shot 3.2s ease-in infinite; }
#main .gi .ga--pang .mpg-hero__cap { position: absolute; left: 10px; bottom: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(15, 23, 42, .55); color: #e2e8f0; font-size: 12.5px; font-weight: 800; }
#main .gi .ga--pang .mpg-hero__cap u { color: #fde68a; text-decoration-color: #fbbf24; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@keyframes mpg-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mpg-slide { 0%, 20% { transform: translateX(-40px); } 45%, 100% { transform: translateX(0); } }
@keyframes mpg-shot { 0%, 55% { height: 0; opacity: 1; } 70% { height: 60px; opacity: 1; } 80%, 100% { height: 60px; opacity: 0; } }
@media (max-width: 760px) {
    #main .gi .ga--pang .ga-q { min-height: 116px; padding: 10px 12px; }
    #main .gi .ga--pang .mpg-hero__b { bottom: 60px; width: 78px; height: 88px; margin-left: -39px; }
    #main .gi .ga--pang .mpg-gold small { display: none; }
    #main .gi .ga--pang .mpg-legend__i { font-size: 12.5px; padding: 3px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--pang .mpg-hero * { animation: none !important; }
}