/* 문장 기차 (/grammar/relative/train.jsp, 2026-10-18). 틀(.ra-*)은 css/ps2-relative-arcade.css, 여기는 색 · 로비 그림 · 문장 표시(.rc-*) */
#main .gi .ra--train { --ra-bg1: #0c1a2e; --ra-bg2: #134e4a; --ra-glow: #fde047; --ra-halo: rgba(253, 224, 71, .22); --ra-win: #0f766e; --ra-accent: #2563eb; }

/* 문장: 두 문장 + 이을 자리 */
#main .gi .ra--train .rc-pair { margin: 0; font: 700 14.5px/1.5 inherit; color: rgba(255, 255, 255, .78); }
#main .gi .ra--train .rc-pair b { color: #fde047; font-weight: 900; }
#main .gi .ra--train .rc-pair em { font-style: normal; padding: 0 5px; border-radius: 6px; background: rgba(253, 224, 71, .2); color: #fde68a; box-shadow: inset 0 -2px 0 #facc15; }
#main .gi .ra--train .rc-ask .rc-n { box-shadow: inset 0 -3px 0 rgba(253, 224, 71, .7); }
#main .gi .ra--train .rc-ask u, #main .gi .ra--train .rc-sent u { text-decoration: none; padding: 0 6px; border-radius: 7px; background: rgba(134, 239, 172, .18); color: #86efac; box-shadow: inset 0 -2px 0 #86efac; }
#main .gi .ra--train .rc-sent u { background: #dcfce7; color: #166534; box-shadow: inset 0 -2px 0 #22c55e; }
#main .gi .ra--train .rc-src { display: block; margin-top: 4px; font: 600 13.5px/1.5 inherit; color: var(--ra-mute); }
#main .gi .ra--train .ra-card__mine s { color: #b91c1c; }

/* 머리 오른쪽: 신호까지 남은 거리 */
#main .gi .ra--train .rc-sig { display: inline-flex; align-items: center; gap: 6px; }
#main .gi .ra--train .rc-sig b { position: relative; display: inline-block; width: 84px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
#main .gi .ra--train .rc-sig i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #a3e635); transition: width .2s linear; }
#main .gi .ra--train .rc-sig i.is-low { background: linear-gradient(90deg, #ef4444, #f97316); }
#main .gi .ra--train .rc-go { min-width: 120px; }

/* 로비 그림: 하늘 · 세 갈래 선로 · 칸 셋 · 들어가는 기차 */
#main .gi .ra--train .rc-hero { background: linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 46%, #65a30d 47%, #3f6212 100%); }
#main .gi .ra--train .rc-hero__sky { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: radial-gradient(circle at 84% 30%, rgba(255, 255, 255, .95) 0 26px, transparent 60px); }
#main .gi .ra--train .rc-hero__rail { position: absolute; left: 34%; right: 2%; height: 12px; border-top: 3px solid #e2e8f0; border-bottom: 3px solid #e2e8f0;
    background: repeating-linear-gradient(90deg, #78350f 0 4px, transparent 4px 14px); }
#main .gi .ra--train .rc-hero__rail--a { top: 52%; }
#main .gi .ra--train .rc-hero__rail--b { top: 68%; }
#main .gi .ra--train .rc-hero__rail--c { top: 84%; }
#main .gi .ra--train .rc-hero__rail--b::before { content: ''; position: absolute; right: 100%; top: -3px; width: 340px; height: 12px; border-top: 3px solid #e2e8f0; border-bottom: 3px solid #e2e8f0;
    background: repeating-linear-gradient(90deg, #78350f 0 4px, transparent 4px 14px); }
#main .gi .ra--train .rc-hero__car { position: absolute; left: 58%; padding: 5px 12px; border-radius: 9px; background: linear-gradient(#fffbeb, #cbd5e1); border: 1.5px solid #64748b; color: #0f172a;
    font: 800 13px/1.3 inherit; white-space: nowrap; box-shadow: 0 6px 12px rgba(0, 0, 0, .25); transform: translateY(-100%); }
#main .gi .ra--train .rc-hero__car--a { top: 53%; }
#main .gi .ra--train .rc-hero__car--b { top: 69%; animation: rc-ok 6s ease-in-out infinite; }
#main .gi .ra--train .rc-hero__car--c { top: 85%; }
@keyframes rc-ok { 0%, 48% { background: linear-gradient(#fffbeb, #cbd5e1); border-color: #64748b; } 56%, 92% { background: linear-gradient(#dcfce7, #86efac); border-color: #16a34a; box-shadow: 0 0 18px rgba(134, 239, 172, .9); } 100% { background: linear-gradient(#fffbeb, #cbd5e1); } }
#main .gi .ra--train .rc-hero__train { position: absolute; top: 69%; left: 4%; display: flex; align-items: flex-end; gap: 4px; transform: translateY(-100%); animation: rc-run 6s ease-in-out infinite; }
#main .gi .ra--train .rc-hero__train i { width: 54px; height: 30px; border-radius: 8px 16px 4px 4px; background: linear-gradient(#0ea5e9, #075985); box-shadow: inset 0 -5px 0 #fde047; }
#main .gi .ra--train .rc-hero__train b { padding: 6px 12px; border-radius: 9px; background: linear-gradient(#fef9c3, #fde68a); border: 2px solid #b45309; color: #0f172a; font: 900 13px/1.3 inherit; white-space: nowrap; }
@keyframes rc-run { 0% { transform: translate(0, -100%); } 46%, 100% { transform: translate(min(26vw, 230px), -100%); } }
#main .gi .ra--train .rc-hero__sent { position: absolute; left: 0; right: 0; top: 10px; text-align: center; color: #0f172a; font: 800 15px/1.4 inherit; }
#main .gi .ra--train .rc-hero__sent em { font-style: normal; padding: 0 5px; border-radius: 6px; background: rgba(250, 204, 21, .35); }
@media (prefers-reduced-motion: reduce) {
    #main .gi .ra--train .rc-hero * { animation: none !important; }
}