/* 짝 도르래 (/grammar/expression/pulley.jsp) — 특이한 표현 단원(G.U12) 움직이는 게임. 2026-10-31 * 틀(ps2-expression-arcade.css)이 놀이판 뿌리에 .ga--pulley 를 붙인다. 이 파일은 .epl-* 만 꾸민다. */ #main .gi .ga--pulley .epl-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(253, 230, 138, .18) 0, transparent 46%), linear-gradient(180deg, #0b3340 0%, #06222b 70%); } #main .gi .ga--pulley .epl-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(125, 211, 252, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .07) 1px, transparent 1px); background-size: 24px 24px; } #main .gi .ga--pulley .epl-hero__rail { position: absolute; left: 0; right: 0; top: 22px; height: 12px; background: linear-gradient(180deg, #94a3b8, #e2e8f0 50%, #475569); } #main .gi .ga--pulley .epl-hero__trolley { position: absolute; top: 14px; left: 30%; width: 60px; height: 150px; margin-left: -30px; animation: epl-move 6s ease-in-out infinite; } #main .gi .ga--pulley .epl-hero__wheel { position: absolute; left: 50%; top: 14px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fde68a, #b45309); border: 1.5px solid #78350f; } #main .gi .ga--pulley .epl-hero__rope { position: absolute; left: 50%; top: 34px; width: 3px; height: 62px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, #e7d8b0 0 5px, transparent 5px 8px); animation: epl-rope 6s ease-in-out infinite; transform-origin: top center; } #main .gi .ga--pulley .epl-hero__crate { position: absolute; left: 50%; top: 94px; padding: 7px 12px; margin-left: -26px; border-radius: 6px; background: linear-gradient(180deg, #d97706, #92400e); color: #fffbeb; font-weight: 800; font-size: 15px; line-height: 1; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .7); animation: epl-drop 6s ease-in-out infinite; } #main .gi .ga--pulley .epl-hero { --epl-dx: 80px; } #main .gi .ga--pulley .epl-hero__shelf { position: absolute; left: calc(30% + var(--epl-dx) - 110px); bottom: 18%; display: flex; justify-content: flex-start; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 12px solid #8a5a2e; } #main .gi .ga--pulley .epl-hero__tile { padding: 7px 10px; border-radius: 6px; background: #fffbeb; color: #1e293b; font-weight: 800; font-size: 15px; line-height: 1; } #main .gi .ga--pulley .epl-hero__slot { color: #5eead4; font-size: 18px; text-shadow: 0 0 10px #2dd4bf; animation: epl-glow 1.4s ease-in-out infinite alternate; } @keyframes epl-move { 0%, 15% { transform: translateX(0); } 45%, 100% { transform: translateX(var(--epl-dx, 80px)); } } @keyframes epl-rope { 0%, 45% { height: 62px; } 60%, 90% { height: 112px; } 100% { height: 62px; } } @keyframes epl-drop { 0%, 45% { transform: translateY(0); opacity: 1; } 60%, 90% { transform: translateY(50px); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } } @keyframes epl-glow { from { opacity: .55; } to { opacity: 1; } } /* 놀이 칸 */ #main .gi .ga--pulley .epl-cv { display: block; width: 100%; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; } #main .gi .ga--pulley .epl-cv:active { cursor: grabbing; } /* 물음 칸 */ #main .gi .ga--pulley .epl-q { display: grid; gap: 6px; text-align: left; } #main .gi .ga--pulley .epl-q__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: #f8fafc; font-size: 16px; font-weight: 700; line-height: 1.5; } #main .gi .ga--pulley .epl-step { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #0f766e; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .01em; } #main .gi .ga--pulley .epl-q__mean { padding: 1px 8px; border-radius: 8px; background: rgba(253, 224, 71, .18); color: #fde68a; border: 1px dashed rgba(253, 230, 138, .6); } #main .gi .ga--pulley .epl-q__sent { margin: 0; color: #e2e8f0; font-size: 15px; font-weight: 600; line-height: 1.55; } #main .gi .ga--pulley .epl-q__sent[hidden] { display: none; } #main .gi .ga--pulley .epl-q__ko { margin: 0; color: #ccfbf1; font-size: 14.5px; line-height: 1.6; } #main .gi .ga--pulley .epl-q__ko[hidden] { display: none; } /* 조작 칸 */ #main .gi .ga--pulley .epl-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } #main .gi .ga--pulley .epl-btn { min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; color: #0f172a; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } #main .gi .ga--pulley .epl-btn:hover:not(:disabled) { background: #f1f5f9; } #main .gi .ga--pulley .epl-btn--drop { min-width: 112px; border-color: #115e59; background: #0f766e; color: #fff; } #main .gi .ga--pulley .epl-btn--drop:hover:not(:disabled) { background: #115e59; } #main .gi .ga--pulley .epl-btn:disabled { opacity: .45; cursor: default; } #main .gi .ga--pulley .epl-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; } /* '왜' 카드 · 결과 */ #main .gi .pa.ga--pulley .epl-full mark { padding: 0 5px; border-radius: 6px; background: #fef3c7; color: #92400e; box-shadow: inset 0 -2px 0 #d97706; } #main .gi .ga--pulley .epl-alt { display: block; margin-top: 4px; color: #0f766e; font-size: 13.5px; font-weight: 600; line-height: 1.5; } #main .gi .ga--pulley .epl-mine__w { color: #b91c1c; font-weight: 700; } #main .gi .ga--pulley .ga-card .epl-full { display: block; margin: 8px 0 2px; font-size: 17px; line-height: 1.55; color: var(--ga-ink, #0f172a); } @media (max-width: 560px) { #main .gi .ga--pulley .epl-q__ask { font-size: 14.5px; } #main .gi .ga--pulley .epl-btn { padding: 0 12px; font-size: 14px; } #main .gi .ga--pulley .epl-btn--drop { min-width: 92px; } #main .gi .ga--pulley .epl-hero__tile, #main .gi .ga--pulley .epl-hero__crate { font-size: 13px; } #main .gi .ga--pulley .epl-hero { --epl-dx: 60px; } #main .gi .ga--pulley .ga-overlay { padding: 6px; bottom: auto; min-height: 100%; } #main .gi .ga--pulley .ga-overlay .ga-card { max-height: none; } #main .gi .ga--pulley .ga-card { padding: 11px 13px; } #main .gi .ga--pulley .ga-card .epl-full { margin: 4px 0 0; font-size: 15.5px; } #main .gi .ga--pulley .ga-card .ga-card__ko { margin: 4px 0 0; font-size: 13.5px; } #main .gi .ga--pulley .ga-card .ga-card__why { margin-top: 6px; padding: 7px 10px; font-size: 14px; line-height: 1.5; } #main .gi .ga--pulley .ga-card .ga-card__mine { margin-top: 6px; font-size: 13px; line-height: 1.45; } #main .gi .ga--pulley:has(.epl-q__ko:not([hidden])) .ga-card .ga-card__ko { display: none; } } @media (prefers-reduced-motion: reduce) { #main .gi .ga--pulley .epl-hero__trolley, #main .gi .ga--pulley .epl-hero__rope, #main .gi .ga--pulley .epl-hero__crate, #main .gi .ga--pulley .epl-hero__slot { animation: none; } }