/*
 * 짝 저울 (/grammar/structure/scale.jsp, 2026-10-29) — 게임 js/ps2-structure-scale.js 의 꾸밈. 틀의 꾸밈은 css/ps2-structure-arcade.css (.ga-*)
 *   밤의 청록 #12485c · 놋쇠 #f6d77a · 수평의 빛 #86efac · 고른 추의 빛 #fde68a
 */
#main .gi .ga--scale { --ga-bg1: #0b2230; --ga-bg2: #12485c; --ga-glow: #fde68a; --ga-halo: rgba(134, 239, 172, .24); --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--scale .ssc-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#main .gi .ga--scale .ga-q { min-height: 104px; }
#main .gi .ga--scale .ga-q .ssc-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--scale .ga-q .ssc-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--scale .ga-q .ssc-sent.is-ok { color: #a7f3d0; }
#main .gi .ga--scale .ga-q .ssc-sent.is-ok mark { background: #dcfce7; color: #14532d; border-color: transparent; }
#main .gi .ga--scale .ga-q .ssc-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--scale .ssc-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--scale .ssc-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--scale .ssc-chip--ok { background: #fde68a; }
#main .gi .ga--scale .ssc-chip--bad { background: #fecaca; color: #991b1b; }
#main .gi .ga--scale .ssc-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(20, 184, 166, .14); color: #115e59; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--scale .ssc-tries i { font-style: normal; color: #0d9488; font-size: 11px; transition: color .2s, transform .2s; }
#main .gi .ga--scale .ssc-tries i.is-off { color: #cbd5e1; transform: scale(.8); }
#main .gi .ga--scale .ssc-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--scale .ssc-pad { min-width: 150px; height: 56px; }
#main .gi .ga--scale .ssc-pad b { font-size: 19px; }
#main .gi .ga--scale .ssc-pad.is-wait { opacity: .55; }
#main .gi .ga--scale .ssc-pad--side { min-width: 58px; font-size: 20px; }
#main .gi .ga--scale .ssc-pad--side:disabled, #main .gi .ga--scale .ssc-pad:disabled { cursor: default; }
#main .gi .ga--scale .ssc-pad--side:disabled { opacity: .45; }
#main .gi .ga--scale .ga-card .ssc-sent, #main .gi .ga--scale .ga-wrong .ssc-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--scale .ga-card .ga-sent mark, #main .gi .ga--scale .ga-wrong .ga-sent mark { background: #dcfce7; color: #14532d; border: 0; }

/* 로비 그림: 레일 · 내려오는 추 둘 · 기둥 · 지렛대와 접시 둘 · 불 */
#main .gi .ga--scale .ssc-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(80% 60% at 50% 62%, rgba(255, 255, 255, .12), transparent 62%), linear-gradient(#1b6a85, #12485c 55%, #081d29); }
#main .gi .ga--scale .ssc-hero__rail { position: absolute; top: 12px; left: -4%; right: -4%; height: 8px; border-radius: 4px; background: linear-gradient(#e2e8f0, #64748b); }
#main .gi .ga--scale .ssc-hero__wt { position: absolute; top: 30px; width: 72px; height: 42px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #3b2a06;
    background: linear-gradient(#f6d77a, #b7862a); border-radius: 10px 10px 8px 8px; box-shadow: 0 0 0 5px #1f2937, 0 8px 14px -4px rgba(2, 6, 23, .6); animation: ssc-down 6s ease-in-out infinite; }
#main .gi .ga--scale .ssc-hero__wt::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 400px; margin-left: -1px; margin-bottom: 5px; background: repeating-linear-gradient(#a8b4c6 0 5px, transparent 5px 8px); }
#main .gi .ga--scale .ssc-hero__wt--0 { left: 8%; }
#main .gi .ga--scale .ssc-hero__wt--1 { left: 58%; animation-delay: -1.4s; }
#main .gi .ga--scale .ssc-hero__wt.is-ok { box-shadow: 0 0 0 5px #1f2937, 0 0 0 8px rgba(253, 230, 138, .9), 0 0 26px rgba(253, 230, 138, .8); }
#main .gi .ga--scale .ssc-hero__post { position: absolute; left: 50%; bottom: 8%; width: 12px; height: 38%; margin-left: -6px; border-radius: 4px; background: linear-gradient(90deg, #7a5414, #e9c46a, #7a5414); }
#main .gi .ga--scale .ssc-hero__post::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 120px; height: 14px; margin-left: -60px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #7a5414, #e9c46a, #7a5414); }
#main .gi .ga--scale .ssc-hero__beam { position: absolute; left: 20%; right: 20%; top: 52%; height: 9px; border-radius: 5px; background: linear-gradient(#f6d77a, #7a5414); transform-origin: 50% 50%; animation: ssc-tilt 6s ease-in-out infinite; }
#main .gi .ga--scale .ssc-hero__pan { position: absolute; top: 40px; width: 104px; height: 40px; margin-left: -52px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding-bottom: 6px;
    border-bottom: 9px solid #b7862a; border-radius: 0 0 50% 50% / 0 0 14px 14px; color: #f8fafc; }
#main .gi .ga--scale .ssc-hero__pan::before { content: ""; position: absolute; left: 50%; top: -40px; width: 0; height: 40px; border-left: 1px solid rgba(226, 232, 240, .7); }
#main .gi .ga--scale .ssc-hero__pan--l { left: 0; }
#main .gi .ga--scale .ssc-hero__pan--r { left: 100%; }
#main .gi .ga--scale .ssc-hero__pan b { padding: 1px 8px; border-radius: 6px; background: linear-gradient(#f6d77a, #b7862a); color: #3b2a06; font-size: 13px; }
#main .gi .ga--scale .ssc-hero__pan small { order: -1; padding: 0 7px; border-radius: 9px; border: 1px solid rgba(186, 230, 253, .6); background: rgba(186, 230, 253, .16); color: #e0f2fe; font-size: 11px; animation: ssc-float 3s ease-in-out infinite; }
#main .gi .ga--scale .ssc-hero__lamp { position: absolute; left: 50%; top: calc(52% - 34px); width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #86efac 60%, #15803d); animation: ssc-lamp 6s ease-in-out infinite; }
@keyframes ssc-down { 0% { transform: translateY(-20px); } 45%, 100% { transform: translateY(26px); } }
@keyframes ssc-tilt { 0%, 40% { transform: rotate(-7deg); } 55%, 85% { transform: rotate(0deg); } 100% { transform: rotate(-7deg); } }
@keyframes ssc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ssc-lamp { 0%, 48% { opacity: .25; box-shadow: none; } 58%, 85% { opacity: 1; box-shadow: 0 0 22px 6px rgba(134, 239, 172, .75); } 100% { opacity: .25; box-shadow: none; } }
#main .gi .ga--scale.ssc-lv1 .ga-q { min-height: 112px; }
#main .gi .ga--scale.ssc-lv3 .ga-q { min-height: 124px; }
@media (max-width: 760px) {
    #main .gi .ga--scale .ga-q { min-height: 96px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--scale.ssc-lv1 .ga-q { min-height: 116px; }
    #main .gi .ga--scale.ssc-lv3 .ga-q { min-height: 132px; }
    #main .gi .ga--scale .ga-q .ga-ask { font-size: 13.5px; }
    #main .gi .ga--scale .ga-q .ssc-sent { font-size: 15.5px; line-height: 1.45; }
    #main .gi .ga--scale .ga-ko { font-size: 13px; }
    #main .gi .ga--scale .ga-side { display: none; }
    #main .gi .ga--scale .ssc-pad { min-width: 0; height: 50px; }
    #main .gi .ga--scale .ssc-pad--side { flex: 0 0 58px; }
    #main .gi .ga--scale .ssc-hero__wt { width: 60px; height: 36px; font-size: 13px; }
    #main .gi .ga--scale .ssc-hero__pan { width: 86px; margin-left: -43px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--scale .ssc-hero__wt, #main .gi .ga--scale .ssc-hero__beam, #main .gi .ga--scale .ssc-hero__pan small, #main .gi .ga--scale .ssc-hero__lamp { animation: none; }
    #main .gi .ga--scale .ssc-hero__lamp { box-shadow: 0 0 18px 4px rgba(134, 239, 172, .6); }
}