/* 목적어 종이 던지기 (/grammar/participle/toss.jsp, 2026-10-19). 틀(.pa-*)은 css/ps2-participle-arcade.css, 여기는 색과 로비 그림(.pto-*) */
#main .gi .pa--toss { --pa-bg1: #141b33; --pa-bg2: #3b2a1e; --pa-glow: #fcd34d; --pa-halo: rgba(252, 211, 77, .24); --pa-win: #92400e; --pa-accent: #b45309; }

/* 로비 그림: 사무실 바닥에 휴지통 둘(called | calling), 바람 알림, 종이 뭉치가 포물선을 그리며 맞는 말의 통에 들어간다 */
#main .gi .pa--toss .pa-hero__art { height: 250px; background: linear-gradient(180deg, #1b2440 0%, #222c4b 46%, #5e3d26 46%, #24160d 100%); box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .3); }
#main .gi .pa--toss .pto-hero__wall { position: absolute; left: 0; right: 0; top: 0; height: 46%; }
#main .gi .pa--toss .pto-hero__win { position: absolute; left: 30%; right: 30%; top: 16%; height: 58%; border: 3px solid #3b4670; border-radius: 3px;
    background: linear-gradient(180deg, #060a22, #1c2a5c); overflow: hidden; }
#main .gi .pa--toss .pto-hero__win::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(90deg, #0d1430 0 12%, transparent 12% 15%, #141d40 15% 30%, transparent 30% 33%, #0d1430 33% 52%, transparent 52% 55%, #141d40 55% 74%, transparent 74% 77%, #0d1430 77% 100%); }
#main .gi .pa--toss .pto-hero__win::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #3b4670; }
#main .gi .pa--toss .pto-hero__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 54%;
    background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(0, 0, 0, .25) 34px 35px), radial-gradient(60% 70% at 50% 30%, rgba(251, 191, 36, .2), transparent 70%); }
#main .gi .pa--toss .pto-hero__bin { position: absolute; top: 50%; width: 52px; height: 58px; margin-left: -26px; border-radius: 4px 4px 12px 12px / 4px 4px 8px 8px;
    background: linear-gradient(90deg, #b45309, #fbbf24 32%, #fff 50%, #fbbf24 62%, #b45309); box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .55); }
#main .gi .pa--toss .pto-hero__bin::before { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; height: 12px; border-radius: 50%; background: #0f172a; border: 2.5px solid rgba(255, 255, 255, .92); }
#main .gi .pa--toss .pto-hero__bin--1 { left: 33%; animation: pto-win 3.6s ease-out infinite; }
#main .gi .pa--toss .pto-hero__bin--2 { left: 69%; top: 46%; width: 44px; height: 48px; margin-left: -22px; background: linear-gradient(90deg, #0f766e, #2dd4bf 32%, #fff 50%, #2dd4bf 62%, #0f766e); }
#main .gi .pa--toss .pto-hero__bin b { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 8px;
    font-size: 12px; font-weight: 900; color: #fff; background: rgba(15, 23, 42, .9); box-shadow: 0 0 0 1.5px rgba(252, 211, 77, .85); }
#main .gi .pa--toss .pto-hero__bin--2 b { box-shadow: 0 0 0 1.5px rgba(45, 212, 191, .85); }
#main .gi .pa--toss .pto-hero__wind { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: rgba(15, 23, 42, .85);
    box-shadow: 0 0 0 1.5px #fde68a; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .pa--toss .pto-hero__wind i { display: inline-block; font-style: normal; color: #fde68a; animation: pto-gust 1s ease-in-out infinite alternate; }
#main .gi .pa--toss .pto-hero__fly { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 0; animation: pto-flyx 3.6s linear infinite; }
#main .gi .pa--toss .pto-hero__ball { position: absolute; left: -15px; top: 84%; width: 30px; height: 30px; border-radius: 46% 54% 50% 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e9eef5 60%, #a8b4c4 100%); box-shadow: 0 0 0 1px rgba(100, 116, 139, .3); animation: pto-flyy 3.6s infinite; }
#main .gi .pa--toss .pto-hero__pop { position: absolute; z-index: 3; left: 33%; top: 19%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 19px; color: #fde68a;
    text-shadow: 0 2px 10px rgba(2, 6, 23, .9); opacity: 0; animation: pto-pop 3.6s ease-out infinite; }
@keyframes pto-flyx { 0%, 8% { left: 50%; } 52%, 100% { left: 33%; } }
@keyframes pto-flyy {
    0%, 8% { top: 84%; transform: scale(1) rotate(0); opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
    30% { top: 14%; transform: scale(.62) rotate(200deg); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    50% { top: 47%; transform: scale(.42) rotate(380deg); opacity: 1; }
    54%, 100% { top: 52%; transform: scale(.38) rotate(400deg); opacity: 0; }
}
@keyframes pto-win { 0%, 50% { filter: none; } 55%, 84% { filter: drop-shadow(0 0 10px rgba(253, 230, 138, .95)); } 92%, 100% { filter: none; } }
@keyframes pto-pop { 0%, 52% { opacity: 0; transform: translate(-50%, 10px); } 58%, 84% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes pto-gust { from { transform: translateX(2px); } to { transform: translateX(-3px); } }

/* 한 판 */
#main .gi .pa--toss .pto-cv { touch-action: none; }
#main .gi .pa--toss .pa-side { display: none; }
@media (max-width: 760px) {
    #main .gi .pa--toss .pa-hero__art { height: 210px; }
    #main .gi .pa--toss .pto-hero__win { left: 22%; right: 22%; }
    #main .gi .pa--toss .pto-hero__bin--1 { left: 28%; }
    #main .gi .pa--toss .pto-hero__bin--2 { left: 74%; }
    #main .gi .pa--toss .pto-hero__pop { left: 28%; font-size: 17px; }
    @keyframes pto-flyx { 0%, 8% { left: 50%; } 52%, 100% { left: 28%; } }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa--toss .pto-hero__ball, #main .gi .pa--toss .pto-hero__fly { animation: none; }
    #main .gi .pa--toss .pto-hero__fly { left: 33%; }
    #main .gi .pa--toss .pto-hero__ball { top: 40%; transform: scale(.45); }
}