/* 주인 찾기 컨베이어 (/grammar/participle/sort.jsp, 2026-10-19). 틀(.pa-*)은 css/ps2-participle-arcade.css, 여기는 색 · 로비 그림 · 카드의 표시(.pso-*) */
#main .gi .pa--sort { --pa-bg1: #071c2c; --pa-bg2: #123b5c; --pa-glow: #7dd3fc; --pa-halo: rgba(250, 204, 21, .18); --pa-win: #0f5132; --pa-accent: #0284c7; }

/* 로비 그림: 문장 상자가 벨트를 타고 내려와 세 슈트 가운데 하나로 떨어진다 */
#main .gi .pa--sort .pa-hero__art { height: 250px; background: radial-gradient(90% 60% at 50% 0%, rgba(125, 211, 252, .22), transparent 70%), linear-gradient(180deg, #0b3a5b, #03111c);
    box-shadow: inset 0 0 0 1.5px rgba(125, 211, 252, .3); }
#main .gi .pa--sort .pso-hero__belt { position: absolute; left: 14%; right: 14%; top: 0; bottom: 30%; background: linear-gradient(90deg, #111827, #1f2937 50%, #111827);
    box-shadow: -6px 0 0 -1px #64748b, 6px 0 0 -1px #64748b; overflow: hidden; }
#main .gi .pa--sort .pso-hero__belt i { position: absolute; inset: -26px 0 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 2px, rgba(0, 0, 0, .35) 2px 4px, transparent 4px 26px);
    animation: pso-belt 1s linear infinite; }
#main .gi .pa--sort .pso-hero__gate { position: absolute; left: 10%; right: 10%; bottom: 30%; height: 3px; border-radius: 2px; background: #7dd3fc; box-shadow: 0 0 14px #7dd3fc; }
#main .gi .pa--sort .pso-hero__box { position: absolute; left: 17%; right: 17%; padding: 7px; border-radius: 10px; background: linear-gradient(180deg, #dcb07a, #a8743f); box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
    animation: pso-ride 6s cubic-bezier(.4, 0, .6, 1) infinite; }
#main .gi .pa--sort .pso-hero__box em { display: block; padding: 7px 9px; border-radius: 7px; background: #fffdf7; color: #1e293b; font-style: normal; font-weight: 800; font-size: 13.5px; line-height: 1.45; text-align: left; }
#main .gi .pa--sort .pso-hero__box u { text-decoration: underline; text-decoration-color: #f59e0b; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#main .gi .pa--sort .pso-hero__box b { padding: 0 3px; border-radius: 4px; background: #bbf7d0; color: #14532d; }
#main .gi .pa--sort .pso-hero__box--2 { animation-name: pso-ride2; }
#main .gi .pa--sort .pso-hero__chutes { position: absolute; left: 4%; right: 4%; bottom: 6px; height: 27%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#main .gi .pa--sort .pso-hero__chutes b { display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 10px 10px 14px 14px; font-weight: 900; font-size: 12.5px; color: #f8fafc;
    background: linear-gradient(180deg, var(--c), #020617); box-shadow: inset 0 0 0 1.5px var(--c); }
#main .gi .pa--sort .pso-hero__chutes b small { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #04111d; font-size: 11.5px; }
#main .gi .pa--sort .pso-hero__chutes .is-0 { --c: #22c55e; animation: pso-hit 6s linear infinite; }
#main .gi .pa--sort .pso-hero__chutes .is-1 { --c: #f97316; }
#main .gi .pa--sort .pso-hero__chutes .is-2 { --c: #38bdf8; animation: pso-hit 6s linear infinite; animation-delay: 3s; }
@keyframes pso-belt { to { transform: translateY(26px); } }
@keyframes pso-ride { 0% { top: -30%; opacity: 1; transform: none; } 38% { top: 34%; opacity: 1; transform: none; } 48% { top: 52%; opacity: 0; transform: translateX(-62%) scale(.35); } 49%, 100% { top: -30%; opacity: 0; } }
@keyframes pso-ride2 { 0%, 49% { top: -30%; opacity: 0; } 50% { top: -30%; opacity: 1; transform: none; } 88% { top: 34%; opacity: 1; transform: none; } 98% { top: 52%; opacity: 0; transform: translateX(62%) scale(.35); } 100% { opacity: 0; } }
@keyframes pso-hit { 0%, 44% { box-shadow: inset 0 0 0 1.5px var(--c); } 48% { box-shadow: inset 0 0 0 1.5px var(--c), 0 0 22px var(--c); } 60%, 100% { box-shadow: inset 0 0 0 1.5px var(--c); } }

/* 한 판 */
#main .gi .pa--sort .pa-ctl { display: none; }
#main .gi .pa--sort .pso-speed { padding: 3px 10px; border-radius: 999px; background: #e0f2fe; color: #075985; font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
#main .gi .pa--sort .pso-speed.is-fast { background: #ffedd5; color: #9a3412; }

/* 카드 · 결과의 문장: 분사 덩어리는 밑줄, 주인은 초록, 주인이 될 수 없는 주어는 빨강 */
#main .gi .pa--sort .pso-full { display: grid; gap: 6px; }
#main .gi .pa--sort .pa-sent u.pso-chunk { padding: 0; border-radius: 0; background: none; color: inherit; text-decoration: underline; text-decoration-color: #f59e0b; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
#main .gi .pa--sort .pa-sent mark.pso-own { background: #bbf7d0; color: #14532d; }
#main .gi .pa--sort .pa-sent.pso-orig { color: #64748b; font-size: .92em; }
#main .gi .pa--sort .pa-sent.pso-fixline { color: var(--pa-ink); }
#main .gi .pa--sort .pso-fixtag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 800; vertical-align: 2px; }
#main .gi .pa--sort .pso-ans { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 0; font-size: 13.5px; }
#main .gi .pa--sort .pso-ans__chute { padding: 2px 10px; border-radius: 999px; font-weight: 800; color: #04111d; }
#main .gi .pa--sort .pso-ans__chute.is-0 { background: #bbf7d0; }
#main .gi .pa--sort .pso-ans__chute.is-1 { background: #fed7aa; }
#main .gi .pa--sort .pso-ans__chute.is-2 { background: #bae6fd; }
#main .gi .pa--sort .pso-ans__own { padding: 2px 0; font-weight: 700; color: #334155; }
#main .gi .pa--sort .pa-wrong .pso-orig { font-size: 15px; }

@media (max-width: 760px) {
    #main .gi .pa--sort .pa-hero__art { height: 220px; }
    #main .gi .pa--sort .pso-hero__box em { font-size: 12.5px; }
    #main .gi .pa--sort .pso-hero__chutes b { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa--sort .pso-hero__box--2 { display: none; }
    #main .gi .pa--sort .pso-hero__box--1 { top: 22%; }
}