/* where 하키 (/grammar/relative/hockey.jsp, 2026-10-18). 틀(.ra-*)은 css/ps2-relative-arcade.css, 여기는 색 · 로비 그림 · 문장 표시(.rk-*) */
#main .gi .ra--hockey { --ra-bg1: #020617; --ra-bg2: #0c4a6e; --ra-glow: #22d3ee; --ra-halo: rgba(34, 211, 238, .28); --ra-win: #0e7490; --ra-accent: #0891b2; }

/* 로비 그림: 네온 하키 판 · 골문 둘 · 퍽 · 채 */
#main .gi .ra--hockey .rk-hero { background: radial-gradient(80% 70% at 50% 20%, rgba(34, 211, 238, .18), transparent 70%), #020617; }
#main .gi .ra--hockey .rk-hero__table { position: absolute; left: 12%; right: 12%; top: 34%; bottom: 6%; border-radius: 18px; border: 3px solid #38bdf8;
    background: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 16px 16px, linear-gradient(#0c4a6e, #082f49); box-shadow: 0 0 18px rgba(56, 189, 248, .55), inset 0 0 18px rgba(56, 189, 248, .25); }
#main .gi .ra--hockey .rk-hero__table::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: rgba(125, 211, 252, .45); }
#main .gi .ra--hockey .rk-hero__goal { position: absolute; top: -5px; width: 30%; height: 8px; border-radius: 4px; background: #020617; }
#main .gi .ra--hockey .rk-hero__goal b { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 2px 10px; border-radius: 8px; font-style: normal; font-weight: 900; font-size: 12px; line-height: 1.2; color: #fff; white-space: nowrap;
    background: #020617; border: 2px solid #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, .6); }
#main .gi .ra--hockey .rk-hero__goal--a { left: 12%; animation: rk-goal 3.2s ease-in-out infinite; }
#main .gi .ra--hockey .rk-hero__goal--b { right: 12%; }
#main .gi .ra--hockey .rk-hero__goal--b b { border-color: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, .6); }
@keyframes rk-goal { 0%, 55% { box-shadow: none; } 62%, 80% { box-shadow: 0 0 0 3px #86efac, 0 0 22px #86efac; } 100% { box-shadow: none; } }
#main .gi .ra--hockey .rk-hero__puck { position: absolute; left: 50%; top: 70%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef9c3, #eab308);
    box-shadow: 0 0 14px rgba(253, 224, 71, .8); animation: rk-puck 3.2s ease-in infinite; }
@keyframes rk-puck { 0%, 18% { left: 50%; top: 70%; opacity: 1; } 40% { left: 4%; top: 36%; } 58% { left: 27%; top: 0%; opacity: 1; } 62%, 100% { left: 27%; top: -4%; opacity: 0; } }
#main .gi .ra--hockey .rk-hero__me { position: absolute; left: 54%; top: 82%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, #164e63 0 40%, #0891b2 42%, #cffafe 100%);
    box-shadow: 0 0 16px rgba(34, 211, 238, .8); animation: rk-me 3.2s ease-in-out infinite; }
@keyframes rk-me { 0%, 8% { left: 58%; top: 86%; } 18% { left: 52%; top: 74%; } 40%, 100% { left: 56%; top: 84%; } }
#main .gi .ra--hockey .rk-hero__ai { position: absolute; left: 62%; top: 16%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, #7f1d1d 0 40%, #dc2626 42%, #fecaca 100%);
    box-shadow: 0 0 14px rgba(248, 113, 113, .7); animation: rk-ai 3.2s ease-in-out infinite; }
@keyframes rk-ai { 0%, 30% { left: 62%; } 55%, 100% { left: 44%; } }
#main .gi .ra--hockey .rk-hero__sent { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); padding: 4px 12px; border-radius: 10px; background: rgba(15, 23, 42, .9); color: #fff;
    font-weight: 800; font-size: 13px; line-height: 1.4; white-space: nowrap; border: 1px solid rgba(34, 211, 238, .35); }
#main .gi .ra--hockey .rk-hero__sent mark { padding: 0 6px; border-radius: 6px; background: rgba(34, 211, 238, .2); color: #67e8f9; }

/* 한 판 */
#main .gi .ra--hockey .ra-q { min-height: 112px; }        /* 문제 ↔ 답 · 까닭으로 바뀔 때 판이 덜 움직이게 */
#main .gi .ra--hockey .rk-ask { line-height: 1.7; }
#main .gi .ra--hockey .rk-ask u { text-decoration: none; padding: 0 6px; border-radius: 6px; background: rgba(134, 239, 172, .22); color: #bbf7d0; }
#main .gi .ra--hockey .rk-ask mark.is-bad { background: rgba(248, 113, 113, .25); color: #fecaca; border: 0; }
#main .gi .ra--hockey .rk-backq { color: #a5f3fc; font-weight: 700; }
#main .gi .ra--hockey .rk-backq small, #main .gi .ra--hockey .rk-back small { margin-right: 4px; font-weight: 600; opacity: .75; }
#main .gi .ra--hockey .rk-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 14px; color: #e2e8f0; }
#main .gi .ra--hockey .rk-balls { display: inline-flex; align-items: center; gap: 3px; }
#main .gi .ra--hockey .rk-balls i { font-style: normal; color: #cbd5e1; font-size: 13px; }
#main .gi .ra--hockey .rk-balls i.is-on { color: #eab308; }
#main .gi .ra--hockey .ra-cv { cursor: none; }

/* 카드 · 결과: 앞의 명사를 넣은 문장 */
#main .gi .ra--hockey .rk-sent .rk-back { display: block; margin-top: 2px; font-size: .88em; font-weight: 700; color: #334155; }
#main .gi .ra--hockey .rk-mine s { color: #b91c1c; }
@media (max-width: 760px) {
    #main .gi .ra--hockey .ra-q { min-height: 132px; }
    #main .gi .ra--hockey .rk-hero__sent { font-size: 11.5px; }
}