/*
 * 균형 다리 (/grammar/structure/bridge.jsp, 2026-10-31) — 게임 js/ps2-structure-bridge.js 의 꾸밈. 틀의 꾸밈은 css/ps2-structure-arcade.css (.ga-*)
 *   해 질 녘 강 #2b6f8f · 나무 판 #e9c08a · 잇는 말 #fde68a · 이어진 다리의 빛 #86efac
 */
#main .gi .ga--bridge { --ga-bg1: #0c2d40; --ga-bg2: #2b6f8f; --ga-glow: #fde68a; --ga-halo: rgba(134, 239, 172, .24); --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--bridge .sbr-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#main .gi .ga--bridge .ga-q { min-height: 104px; }
#main .gi .ga--bridge .ga-q .sbr-sent { margin: 2px 0 0; font-size: clamp(16px, 2.2vw, 20px); font-weight: 700; line-height: 1.5; color: #f8fafc; letter-spacing: -0.005em; text-align: center; }
#main .gi .ga--bridge .ga-q .sbr-sent mark { display: inline-block; min-width: 64px; padding: 0 9px; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fde68a; border: 1px dashed rgba(253, 230, 138, .6); }
#main .gi .ga--bridge .ga-q .sbr-sent.is-ok { color: #a7f3d0; }
#main .gi .ga--bridge .ga-q .sbr-sent.is-ok mark { background: #dcfce7; color: #14532d; border-color: transparent; }
#main .gi .ga--bridge .ga-q .sbr-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--bridge .sbr-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--bridge .sbr-chip { display: inline-block; max-width: 100%; padding: 1px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; line-height: 1.6; color: #0f172a; background: #e2e8f0; white-space: normal; }
#main .gi .ga--bridge .sbr-chip--ok { background: #fde68a; }
#main .gi .ga--bridge .sbr-chip--bad { background: #fecaca; color: #991b1b; }
#main .gi .ga--bridge .sbr-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(14, 165, 233, .14); color: #075985; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--bridge .sbr-tries i { font-style: normal; color: #0284c7; font-size: 11px; transition: color .2s, transform .2s; }
#main .gi .ga--bridge .sbr-tries i.is-off { color: #cbd5e1; transform: scale(.8); }
#main .gi .ga--bridge .sbr-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--bridge .sbr-pad { min-width: 150px; height: 56px; }
#main .gi .ga--bridge .sbr-pad b { font-size: 19px; }
#main .gi .ga--bridge .sbr-pad.is-wait { opacity: .55; }
#main .gi .ga--bridge .sbr-pad--side { min-width: 58px; font-size: 20px; }
#main .gi .ga--bridge .sbr-pad--side:disabled, #main .gi .ga--bridge .sbr-pad:disabled { cursor: default; }
#main .gi .ga--bridge .sbr-pad--side:disabled { opacity: .45; }
#main .gi .ga--bridge .ga-card .sbr-sent, #main .gi .ga--bridge .ga-wrong .sbr-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--bridge .ga-card .ga-sent mark, #main .gi .ga--bridge .ga-wrong .ga-sent mark { background: #dcfce7; color: #14532d; border: 0; }

/* 로비 그림: 해 · 강 · 다리(판 · and · 빈자리) · 떠 있는 판 둘 · 길잡이 */
#main .gi .ga--bridge .sbr-hero { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#6d4c8f, #f59e6b 52%, #2b6f8f 52%, #0c2d40); }
#main .gi .ga--bridge .sbr-hero__sun { position: absolute; left: 50%; top: 34%; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #fbbf24 70%); box-shadow: 0 0 34px 10px rgba(251, 191, 36, .45); }
#main .gi .ga--bridge .sbr-hero__water { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; background: repeating-linear-gradient(transparent 0 14px, rgba(255, 255, 255, .08) 14px 16px); animation: sbr-flow 4s linear infinite; }
#main .gi .ga--bridge .sbr-hero__deck { position: absolute; left: 6%; right: 6%; top: 40%; display: flex; gap: 4px; justify-content: center; }
#main .gi .ga--bridge .sbr-hero__plank { padding: 5px 10px; border-radius: 6px; background: linear-gradient(#e9c08a, #a8693a); color: #2a1806; font-size: 13px; font-weight: 800; }
#main .gi .ga--bridge .sbr-hero__plank--c { background: rgba(15, 23, 42, .85); color: #fde68a; box-shadow: inset 0 0 0 1.5px #fde68a; }
#main .gi .ga--bridge .sbr-hero__gap { width: 72px; border-radius: 6px; border: 2px dashed rgba(253, 230, 138, .8); animation: sbr-pulse 1.6s ease-in-out infinite; }
#main .gi .ga--bridge .sbr-hero__float { position: absolute; padding: 4px 10px; border-radius: 6px; background: linear-gradient(#e9c08a, #a8693a); color: #2a1806; font-size: 13px; font-weight: 800; animation: sbr-bob 3s ease-in-out infinite; }
#main .gi .ga--bridge .sbr-hero__float--0 { left: 22%; top: 66%; box-shadow: 0 0 0 2px #fde68a, 0 0 18px rgba(253, 230, 138, .7); }
#main .gi .ga--bridge .sbr-hero__float--1 { left: 56%; top: 78%; animation-delay: -1.2s; }
#main .gi .ga--bridge .sbr-hero__walker { position: absolute; left: 10%; top: calc(40% - 30px); width: 14px; height: 30px; border-radius: 7px 7px 3px 3px; background: linear-gradient(#fde7c8 0 30%, #2563eb 30%); box-shadow: 10px 6px 14px rgba(255, 225, 140, .8); animation: sbr-walk 5s linear infinite; }
@keyframes sbr-flow { from { background-position: 0 0; } to { background-position: 0 32px; } }
@keyframes sbr-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes sbr-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes sbr-walk { 0% { transform: translateX(0); } 100% { transform: translateX(260%); } }
#main .gi .ga--bridge.sbr-lv1 .ga-q { min-height: 112px; }
#main .gi .ga--bridge.sbr-lv3 .ga-q { min-height: 124px; }
@media (max-width: 760px) {
    #main .gi .ga--bridge .ga-q { min-height: 96px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--bridge.sbr-lv1 .ga-q { min-height: 116px; }
    #main .gi .ga--bridge.sbr-lv3 .ga-q { min-height: 132px; }
    #main .gi .ga--bridge .ga-q .ga-ask { font-size: 13.5px; }
    #main .gi .ga--bridge .ga-q .sbr-sent { font-size: 15.5px; line-height: 1.45; }
    #main .gi .ga--bridge .ga-ko { font-size: 13px; }
    #main .gi .ga--bridge .ga-side { display: none; }
    #main .gi .ga--bridge .sbr-pad { min-width: 0; height: 50px; }
    #main .gi .ga--bridge .sbr-pad--side { flex: 0 0 58px; }
    #main .gi .ga--bridge .sbr-hero__plank, #main .gi .ga--bridge .sbr-hero__float { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--bridge .sbr-hero__water, #main .gi .ga--bridge .sbr-hero__gap, #main .gi .ga--bridge .sbr-hero__float, #main .gi .ga--bridge .sbr-hero__walker { animation: none; }
}