/* 고쳐 쓰기 우주선 (/grammar/relative/galaxy.jsp, 2026-10-18). 틀(.ra-*)은 css/ps2-relative-arcade.css, 여기는 색 · 로비 그림 · 문장 표시(.rj-*) */
#main .gi .ra--galaxy { --ra-bg1: #020617; --ra-bg2: #1e1b4b; --ra-glow: #a5f3fc; --ra-halo: rgba(168, 85, 247, .28); --ra-win: #4c1d95; --ra-accent: #7c3aed; }

/* 로비 그림: 별 · 덩어리 우주선 대열 · 유도탄 · 고침 캡슐 · 내 우주선 */
#main .gi .ra--galaxy .rj-hero { background: radial-gradient(60% 50% at 25% 30%, rgba(56, 189, 248, .2), transparent 70%), radial-gradient(60% 50% at 80% 70%, rgba(168, 85, 247, .22), transparent 70%), #020617; }
#main .gi .ra--galaxy .rj-hero__stars { position: absolute; inset: 0; background: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 75% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 60%, #fff, transparent),
    radial-gradient(1px 1px at 45% 85%, #fff, transparent), radial-gradient(1px 1px at 20% 50%, #fff, transparent); background-size: 100% 100%; animation: rj-stars 6s linear infinite; }
@keyframes rj-stars { from { background-position: 0 0; } to { background-position: 0 240px; } }
#main .gi .ra--galaxy .rj-hero__row { position: absolute; left: 50%; top: 18%; display: flex; gap: 8px; transform: translateX(-50%) scale(.86); }
#main .gi .ra--galaxy .rj-s { display: inline-grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 10px; font-weight: 800; font-size: 12px; line-height: 1; font-style: normal; color: #0f172a; white-space: nowrap;
    background: #fff; box-shadow: 0 0 0 4px #7c3aed, 0 0 16px rgba(168, 85, 247, .7); animation: rj-hover 2.4s ease-in-out infinite; }
#main .gi .ra--galaxy .rj-s--a { box-shadow: 0 0 0 4px #059669, 0 0 16px rgba(16, 185, 129, .6); }
#main .gi .ra--galaxy .rj-s--b { animation: rj-hit 4s ease-in-out infinite; }
#main .gi .ra--galaxy .rj-s--c { box-shadow: 0 0 0 4px #2563eb, 0 0 16px rgba(59, 130, 246, .6); animation-delay: -.8s; }
@keyframes rj-hover { 50% { transform: translateY(-4px); } }
@keyframes rj-hit { 0%, 28% { transform: none; opacity: 1; } 34% { transform: scale(1.25); box-shadow: 0 0 0 4px #ef4444, 0 0 30px #f87171; } 40%, 70% { transform: scale(.2); opacity: 0; }
    82%, 100% { transform: none; opacity: 1; box-shadow: 0 0 0 4px #16a34a, 0 0 20px #86efac; } }
#main .gi .ra--galaxy .rj-hero__laser { position: absolute; left: 50%; bottom: 22%; width: 3px; height: 34px; margin-left: -1.5px; border-radius: 2px; background: #fde047; box-shadow: 0 0 10px #fde047; opacity: 0;
    animation: rj-laser 4s linear infinite; }
@keyframes rj-laser { 0%, 8% { opacity: 0; bottom: 22%; } 10% { opacity: 1; } 30% { opacity: 1; bottom: 72%; } 31%, 100% { opacity: 0; } }
#main .gi .ra--galaxy .rj-hero__cap { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; line-height: 1; color: #082f49; white-space: nowrap;
    background: linear-gradient(#cffafe, #0891b2); box-shadow: 0 0 14px rgba(34, 211, 238, .8); opacity: 0; animation: rj-cap 4s ease-in infinite; }
@keyframes rj-cap { 0%, 40% { opacity: 0; top: 26%; } 44% { opacity: 1; } 66% { opacity: 1; top: 70%; } 70%, 100% { opacity: 0; top: 74%; } }
#main .gi .ra--galaxy .rj-hero__me { position: absolute; left: 50%; bottom: 8%; width: 0; height: 0; margin-left: -18px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 34px solid #e2e8f0;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, .8)); }
#main .gi .ra--galaxy .rj-hero__me::after { content: ""; position: absolute; left: -4px; top: 12px; width: 8px; height: 12px; border-radius: 50%; background: #38bdf8; }

/* 한 판 */
#main .gi .ra--galaxy .ra-q { min-height: 104px; }        /* 문제 ↔ 답 · 까닭으로 바뀔 때 판이 덜 움직이게 */
#main .gi .ra--galaxy .rj-ask { line-height: 1.7; }
#main .gi .ra--galaxy .rj-ask .rj-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: rgba(165, 243, 252, .16); color: #a5f3fc; font-size: .78em; vertical-align: 2px; }
#main .gi .ra--galaxy .rj-ask .rj-cut { color: #fca5a5; text-decoration-thickness: 2px; }
#main .gi .ra--galaxy .rj-ask .rj-ok { color: #86efac; }
#main .gi .ra--galaxy .rj-q { color: #a5f3fc; font-weight: 700; }
#main .gi .ra--galaxy .rj-stage { display: inline-flex; align-items: center; gap: 6px; }
#main .gi .ra--galaxy .rj-stage b { padding: 1px 9px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; font-size: 12px; }
#main .gi .ra--galaxy .rj-stage b.is-on { background: #7c3aed; color: #fff; }
#main .gi .ra--galaxy .rj-stage i { font-style: normal; color: #cbd5e1; }

/* 카드 · 결과: 잘못 쓴 덩어리에 줄, 고친 말에 밑줄 */
#main .gi .ra--galaxy .rj-sent .rj-cut { color: #be123c; text-decoration-thickness: 2px; }
#main .gi .ra--galaxy .rj-sent .rj-full { display: block; margin-top: 2px; font-size: .9em; font-weight: 700; color: #334155; }
#main .gi .ra--galaxy .rj-sent .rj-okflag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 8px; background: #fef3c7; color: #92400e; font-size: .8em; vertical-align: 2px; }
#main .gi .ra--galaxy .rj-mine s { color: #b91c1c; }
@media (max-width: 760px) {
    #main .gi .ra--galaxy .ra-q { min-height: 124px; }
    #main .gi .ra--galaxy .rj-hero__row { transform: translateX(-50%) scale(.78); }
}