/*
 * 도치 시소 (/grammar/structure/seesaw.jsp, 2026-10-31) — 게임 js/ps2-structure-seesaw.js 의 꾸밈. 틀의 꾸밈은 css/ps2-structure-arcade.css (.ga-*)
 *   보랏빛 저녁 #4a2f7a · 나무 판 #f6c98a · 앞에 둔 말 #fde68a · 수평의 빛 #86efac
 */
#main .gi .ga--seesaw { --ga-bg1: #2a1a4f; --ga-bg2: #4a2f7a; --ga-glow: #fde68a; --ga-halo: rgba(134, 239, 172, .24); --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--seesaw .ssw-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#main .gi .ga--seesaw .ga-q { min-height: 104px; }
#main .gi .ga--seesaw .ga-q .ssw-sent { margin: 2px 0 0; font-size: clamp(16px, 2.2vw, 20px); font-weight: 700; line-height: 1.6; color: #f8fafc; letter-spacing: -0.005em; text-align: center; }
#main .gi .ga--seesaw .ga-q .ssw-sent .ssw-front { color: #fde68a; font-weight: 900; }
#main .gi .ga--seesaw .ga-q .ssw-sent .ssw-if { color: #fca5a5; text-decoration-thickness: 2px; font-weight: 800; }
#main .gi .ga--seesaw .ga-q .ssw-sent mark { display: inline-block; min-width: 46px; padding: 0 7px; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fde68a; border: 1px dashed rgba(253, 230, 138, .6); line-height: 1.45; }
#main .gi .ga--seesaw .ga-q .ssw-sent mark.is-in { border-style: solid; background: rgba(253, 230, 138, .18); color: #fff7d6; }
#main .gi .ga--seesaw .ga-q .ssw-sent .ssw-nowrap { white-space: nowrap; }
#main .gi .ga--seesaw .ga-q .ssw-sent.is-ok { color: #a7f3d0; }
#main .gi .ga--seesaw .ga-q .ssw-sent.is-ok mark { background: #dcfce7; color: #14532d; border-color: transparent; }
#main .gi .ga--seesaw .ga-q .ssw-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--seesaw .ssw-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--seesaw .ssw-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; line-height: 1.6; color: #0f172a; background: #e2e8f0; white-space: nowrap; }
#main .gi .ga--seesaw .ssw-chip--ok { background: #fde68a; }
#main .gi .ga--seesaw .ssw-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(139, 92, 246, .14); color: #5b21b6; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--seesaw .ssw-tries i { font-style: normal; color: #7c3aed; font-size: 11px; transition: color .2s, transform .2s; }
#main .gi .ga--seesaw .ssw-tries i.is-off { color: #cbd5e1; transform: scale(.8); }
#main .gi .ga--seesaw .ssw-speed { padding: 2px 9px; border-radius: 999px; background: rgba(251, 191, 36, .14); color: #b45309; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--seesaw .ssw-pad { height: 56px; }
#main .gi .ga--seesaw .ssw-pad b { font-size: 19px; }
#main .gi .ga--seesaw .ssw-pad--keep { min-width: 170px; }
#main .gi .ga--seesaw .ssw-pad--undo { min-width: 96px; }
#main .gi .ga--seesaw .ssw-pad.is-wait { opacity: .5; }
#main .gi .ga--seesaw .ssw-pad:disabled { cursor: default; }
#main .gi .ga--seesaw .ssw-pad[hidden] { display: none; }
#main .gi .ga--seesaw .ga-card .ssw-sent, #main .gi .ga--seesaw .ga-wrong .ssw-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--seesaw .ga-card .ga-sent mark, #main .gi .ga--seesaw .ga-wrong .ga-sent mark { background: #dcfce7; color: #14532d; border: 0; }
#main .gi .ga--seesaw .ssw-mine { color: #b91c1c; }

/* 로비 그림: 달 · 언덕 · 시소 · 내려앉은 Never · 튀어 오른 조각 */
#main .gi .ga--seesaw .ssw-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 50% at 82% 16%, rgba(255, 248, 220, .22), transparent 60%), linear-gradient(#5b3a92, #2a1a4f 58%, #150c2e); }
#main .gi .ga--seesaw .ssw-hero__moon { position: absolute; right: 12%; top: 10%; width: 26px; height: 26px; border-radius: 50%; background: #fffaeb; box-shadow: 0 0 24px 6px rgba(255, 248, 220, .45); }
#main .gi .ga--seesaw .ssw-hero__hill { position: absolute; left: -10%; right: -10%; bottom: -22%; height: 48%; border-radius: 50% 50% 0 0; background: rgba(25, 14, 52, .9); }
#main .gi .ga--seesaw .ssw-hero__post { position: absolute; left: 50%; bottom: 10%; width: 0; height: 0; margin-left: -26px; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 64px solid #b06a2c; }
#main .gi .ga--seesaw .ssw-hero__plank { position: absolute; left: 10%; right: 10%; bottom: calc(10% + 62px); height: 10px; border-radius: 5px; background: linear-gradient(#f6c98a, #6b3b14); transform-origin: 50% 50%; animation: ssw-tilt 5s ease-in-out infinite; }
#main .gi .ga--seesaw .ssw-hero__front { position: absolute; left: 4%; bottom: 10px; padding: 3px 10px; border-radius: 8px; background: linear-gradient(#fde68a, #e0a530); color: #1c1206; font-size: 14px; font-weight: 900; animation: ssw-drop 5s ease-in infinite; }
#main .gi .ga--seesaw .ssw-hero__chip { position: absolute; padding: 3px 10px; border-radius: 9px; border: 1.5px solid #fbbf24; background: rgba(15, 23, 42, .92); color: #f8fafc; font-size: 13px; font-weight: 800; animation: ssw-float 5s ease-in-out infinite; }
#main .gi .ga--seesaw .ssw-hero__chip--0 { right: 30%; top: 22%; }
#main .gi .ga--seesaw .ssw-hero__chip--1 { right: 14%; top: 36%; border-color: #38bdf8; animation-delay: -.6s; }
#main .gi .ga--seesaw .ssw-hero__chip--2 { right: 40%; top: 42%; border-color: #a1a1aa; animation-delay: -1.2s; }
@keyframes ssw-tilt { 0%, 30% { transform: rotate(7deg); } 40%, 75% { transform: rotate(-7deg); } 88%, 100% { transform: rotate(0deg); } }
@keyframes ssw-drop { 0%, 22% { transform: translateY(-90px); opacity: 0; } 34%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes ssw-float { 0%, 35% { transform: translateY(40px); opacity: 0; } 50% { transform: translateY(-6px); opacity: 1; } 70% { transform: translateY(2px); } 100% { transform: translateY(-3px); opacity: 1; } }
#main .gi .ga--seesaw.ssw-lv1 .ga-q { min-height: 112px; }
#main .gi .ga--seesaw.ssw-lv3 .ga-q { min-height: 124px; }
@media (max-width: 760px) {
    #main .gi .ga--seesaw .ga-q { min-height: 96px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--seesaw.ssw-lv1 .ga-q { min-height: 116px; }
    #main .gi .ga--seesaw.ssw-lv3 .ga-q { min-height: 132px; }
    #main .gi .ga--seesaw .ga-q .ga-ask { font-size: 13.5px; }
    #main .gi .ga--seesaw .ga-q .ssw-sent { font-size: 15.5px; line-height: 1.55; }
    #main .gi .ga--seesaw .ga-q .ssw-sent mark { min-width: 34px; padding: 0 5px; }
    #main .gi .ga--seesaw .ga-ko { font-size: 13px; }
    #main .gi .ga--seesaw .ga-side { display: none; }
    #main .gi .ga--seesaw .ssw-pad { min-width: 0; height: 50px; }
    #main .gi .ga--seesaw .ssw-pad--undo { flex: 0 0 96px; }
    #main .gi .ga--seesaw .ssw-hero__chip { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--seesaw .ssw-hero__plank, #main .gi .ga--seesaw .ssw-hero__front, #main .gi .ga--seesaw .ssw-hero__chip { animation: none; }
}