/* 줄이기 캔디 (/grammar/relative/candy.jsp, 2026-10-18). 틀(.ra-*)은 css/ps2-relative-arcade.css, 여기는 색 · 로비 그림 · 문장 표시(.rh-*) */
#main .gi .ra--candy { --ra-bg1: #500724; --ra-bg2: #831843; --ra-glow: #fde68a; --ra-halo: rgba(244, 114, 182, .3); --ra-win: #be185d; --ra-accent: #db2777; }

/* 로비 그림: 낱말 사탕 줄 · 터지는 who is · 미끄러져 붙는 사탕 · 초콜릿 '그대로' */
#main .gi .ra--candy .rh-hero { background: radial-gradient(90% 80% at 30% 20%, #fbcfe8 0%, #f9a8d4 45%, #db2777 100%); }
#main .gi .ra--candy .rh-hero__row { position: absolute; left: 50%; top: 40%; display: flex; gap: 5px; transform: translateX(-50%) scale(.78); }
#main .gi .ra--candy .rh-c { display: inline-grid; place-items: center; height: 32px; padding: 0 10px; border-radius: 16px; font-weight: 900; font-size: 12px; line-height: 1; font-style: normal; color: #fff; white-space: nowrap;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), inset 0 6px 0 rgba(255, 255, 255, .35), 0 6px 12px -6px rgba(80, 7, 36, .6); }
#main .gi .ra--candy .rh-c--a { background: linear-gradient(#93c5fd, #2563eb); }
#main .gi .ra--candy .rh-c--b { background: linear-gradient(#fda4af, #e11d48); }
#main .gi .ra--candy .rh-c--c { background: linear-gradient(#fde68a, #f59e0b); color: #422006; }
#main .gi .ra--candy .rh-c--d { background: linear-gradient(#86efac, #16a34a); }
#main .gi .ra--candy .rh-c--e { background: linear-gradient(#d8b4fe, #9333ea); }
#main .gi .ra--candy .rh-c--pop { animation: rh-pop 4s ease-in-out infinite; }
#main .gi .ra--candy .rh-c--c.rh-c--pop { animation-delay: .25s; }
#main .gi .ra--candy .rh-c--slide { animation: rh-slide 4s ease-in-out infinite; }
@keyframes rh-pop { 0%, 30% { transform: scale(1); opacity: 1; } 38% { transform: scale(1.35); opacity: 1; } 44%, 88% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rh-slide { 0%, 44% { transform: translateX(0); } 56%, 88% { transform: translateX(-90px); } 100% { transform: translateX(0); } }
#main .gi .ra--candy .rh-hero__keep { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 8px 22px; border-radius: 14px; font-weight: 900; font-size: 14px; line-height: 1; color: #fef3c7;
    background: radial-gradient(circle at 20% 30%, #f472b6 0 2px, transparent 3px), radial-gradient(circle at 70% 70%, #60a5fa 0 2px, transparent 3px), radial-gradient(circle at 85% 25%, #a3e635 0 2px, transparent 3px),
    linear-gradient(#a16207, #3f1d0b); box-shadow: 0 8px 16px -8px rgba(63, 29, 11, .8); }
#main .gi .ra--candy .rh-hero__spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255, 255, 255, .8); opacity: 0; animation: rh-spark 4s ease-out infinite; }
#main .gi .ra--candy .rh-hero__spark--a { left: 42%; top: 40%; }
#main .gi .ra--candy .rh-hero__spark--b { left: 54%; top: 46%; animation-delay: .25s; }
@keyframes rh-spark { 0%, 34% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.6); } 52%, 100% { opacity: 0; transform: scale(2.4); } }
#main .gi .ra--candy .rh-hero__sent { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); padding: 4px 12px; border-radius: 10px; background: rgba(80, 7, 36, .78); color: #fff;
    font-weight: 800; font-size: 13px; line-height: 1.4; white-space: nowrap; }
#main .gi .ra--candy .rh-hero__sent s { color: #fda4af; text-decoration-thickness: 2px; }

/* 한 판 */
#main .gi .ra--candy .ra-q { min-height: 108px; }        /* 문제 ↔ 답 · 까닭으로 바뀔 때 판이 덜 움직이게 */
#main .gi .ra--candy .rh-ask { line-height: 1.6; }
#main .gi .ra--candy .rh-ask b { color: var(--ra-glow); }
#main .gi .ra--candy .rh-ask .rh-choco { padding: 0 8px; border-radius: 8px; background: #713f12; color: #fef3c7; }
#main .gi .ra--candy .rh-ask .rh-ok { color: #86efac; }
#main .gi .ra--candy .rh-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: rgba(253, 230, 138, .18); color: #fde68a; font-size: .8em; vertical-align: 2px; }
#main .gi .ra--candy .rh-q { color: #fbcfe8; font-weight: 700; }
#main .gi .ra--candy .rh-sugar { display: inline-flex; align-items: center; gap: 2px; }
#main .gi .ra--candy .rh-sugar i { font-style: normal; color: #e2e8f0; font-size: 12px; }
#main .gi .ra--candy .rh-sugar i.is-on { color: #ec4899; }
#main .gi .ra--candy .rh-rush { padding: 1px 10px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #a855f7); animation: rh-rush 1s linear infinite; }
@keyframes rh-rush { 50% { filter: brightness(1.25); } }

/* 카드 · 결과: 터뜨린 말에 줄, 바뀐 모양 */
#main .gi .ra--candy .rh-sent .rh-cut { color: #be123c; text-decoration-thickness: 2px; }
#main .gi .ra--candy .rh-sent .rh-to { display: block; margin-top: 2px; font-size: .9em; font-weight: 700; color: #334155; }
#main .gi .ra--candy .rh-sent .rh-keep { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 8px; background: #713f12; color: #fef3c7; font-size: .8em; vertical-align: 2px; }
#main .gi .ra--candy .rh-mine s { color: #b91c1c; }
@media (max-width: 760px) {
    #main .gi .ra--candy .ra-q { min-height: 128px; }
    #main .gi .ra--candy .rh-hero__sent { font-size: 11.5px; }
}