/*
 * 전치사 자석 (/grammar/structure/magnet.jsp, 2026-10-31) — 게임 js/ps2-structure-magnet.js 의 꾸밈. 틀의 꾸밈은 css/ps2-structure-arcade.css (.ga-*)
 *   공방의 짙은 쇳빛 #1f2937 · 은빛 철판 #cbd5e1 · 빨강 N 극 #ef4444 · 파랑 S 극 #3b82f6 · 고른 자석의 빛 #fde68a
 */
#main .gi .ga--magnet { --ga-bg1: #111827; --ga-bg2: #1f2937; --ga-glow: #fde68a; --ga-halo: rgba(96, 165, 250, .24); --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--magnet .smg-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#main .gi .ga--magnet .ga-q { min-height: 104px; }
#main .gi .ga--magnet .ga-q .smg-sent { margin: 2px 0 0; font-size: clamp(16px, 2.1vw, 19px); font-weight: 700; line-height: 1.55; color: #f8fafc; letter-spacing: -0.005em; text-align: center; }
#main .gi .ga--magnet .ga-q .smg-sent mark { display: inline-block; min-width: 52px; 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--magnet .ga-q .smg-sent mark.smg-blank { color: rgba(253, 230, 138, .75); }
#main .gi .ga--magnet .ga-q .smg-sent.is-ok { color: #a7f3d0; }
#main .gi .ga--magnet .ga-q .smg-sent.is-ok mark { background: #dcfce7; color: #14532d; border-color: transparent; }
#main .gi .ga--magnet .smg-sent mark.smg-none { font-weight: 900; }
#main .gi .ga--magnet .smg-cond { justify-self: center; padding: 1px 10px; border-radius: 999px; background: #1e3a8a; color: #dbeafe; font-size: 12.5px; font-weight: 800; }
#main .gi .ga--magnet .ga-q .smg-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--magnet .smg-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--magnet .smg-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.6; color: #0f172a; background: #e2e8f0; white-space: nowrap; }
#main .gi .ga--magnet .smg-chip--ok { background: #fde68a; }
#main .gi .ga--magnet .smg-chip--bad { background: #fecaca; color: #991b1b; }
#main .gi .ga--magnet .smg-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(59, 130, 246, .14); color: #1e40af; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--magnet .smg-tries i { font-style: normal; color: #2563eb; font-size: 11px; transition: color .2s, transform .2s; }
#main .gi .ga--magnet .smg-tries i.is-off { color: #cbd5e1; transform: scale(.8); }
#main .gi .ga--magnet .smg-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--magnet .smg-pad { min-width: 150px; height: 56px; }
#main .gi .ga--magnet .smg-pad b { font-size: 19px; }
#main .gi .ga--magnet .smg-pad.is-wait { opacity: .55; }
#main .gi .ga--magnet .smg-pad--side { min-width: 58px; font-size: 20px; }
#main .gi .ga--magnet .smg-pad--side:disabled, #main .gi .ga--magnet .smg-pad:disabled { cursor: default; }
#main .gi .ga--magnet .smg-pad--side:disabled { opacity: .45; }
#main .gi .ga--magnet .ga-card .smg-sent, #main .gi .ga--magnet .ga-wrong .smg-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--magnet .ga-card .ga-sent mark, #main .gi .ga--magnet .ga-wrong .ga-sent mark { background: #dcfce7; color: #14532d; border: 0; }

/* 로비 그림: 철판 · 쇳조각 · 홈 · 떠다니는 자석 셋 */
#main .gi .ga--magnet .smg-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 60% at 50% 70%, rgba(96, 165, 250, .18), transparent 65%), linear-gradient(#1f2937, #0b1220); }
#main .gi .ga--magnet .smg-hero__plate { position: absolute; left: 7%; right: 7%; top: 12%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 12px; background: linear-gradient(#e2e8f0, #94a3b8); box-shadow: 0 10px 20px -8px rgba(2, 6, 23, .7); }
#main .gi .ga--magnet .smg-hero__word { font-size: 14px; font-weight: 800; color: #0f172a; }
#main .gi .ga--magnet .smg-hero__iron { padding: 2px 8px; border-radius: 6px; background: linear-gradient(#475569, #1e293b); color: #f8fafc; font-size: 14px; font-weight: 900; }
#main .gi .ga--magnet .smg-hero__slot { width: 52px; height: 26px; border-radius: 13px; background: rgba(15, 23, 42, .55); border: 2px dashed #fde68a; box-shadow: 0 0 14px rgba(253, 230, 138, .7); }
#main .gi .ga--magnet .smg-hero__mag { position: absolute; display: grid; place-items: center; width: 64px; height: 30px; border-radius: 15px; font-size: 14px; font-weight: 900; color: #0f172a;
    background: linear-gradient(90deg, #ef4444 0 22%, #f8fafc 22% 78%, #3b82f6 78%); box-shadow: 0 6px 12px -4px rgba(2, 6, 23, .7); animation: smg-drift 5s ease-in-out infinite; }
#main .gi .ga--magnet .smg-hero__mag--ok { left: 18%; top: 62%; box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(253, 230, 138, .9); }
#main .gi .ga--magnet .smg-hero__mag--a { left: 46%; top: 72%; animation-delay: -1.6s; }
#main .gi .ga--magnet .smg-hero__mag--b { left: 70%; top: 58%; animation-delay: -3s; }
#main .gi .ga--magnet .smg-hero__field { position: absolute; left: 24%; top: 32%; width: 20%; height: 30%; border-left: 2px dashed rgba(253, 230, 138, .6); border-radius: 50% 0 0 50%; animation: smg-pulse 2s ease-in-out infinite; }
@keyframes smg-drift { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(14px, -10px) rotate(3deg); } }
@keyframes smg-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
#main .gi .ga--magnet.smg-lv1 .ga-q { min-height: 112px; }
#main .gi .ga--magnet.smg-lv3 .ga-q { min-height: 120px; }
@media (max-width: 760px) {
    #main .gi .ga--magnet .ga-q { min-height: 96px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--magnet.smg-lv1 .ga-q { min-height: 116px; }
    #main .gi .ga--magnet.smg-lv3 .ga-q { min-height: 124px; }
    #main .gi .ga--magnet .ga-q .ga-ask { font-size: 13.5px; }
    #main .gi .ga--magnet .ga-q .smg-sent { font-size: 15px; line-height: 1.45; }
    #main .gi .ga--magnet .ga-ko { font-size: 13px; }
    #main .gi .ga--magnet .ga-side { display: none; }
    #main .gi .ga--magnet .smg-pad { min-width: 0; height: 50px; }
    #main .gi .ga--magnet .smg-pad--side { flex: 0 0 58px; }
    #main .gi .ga--magnet .smg-hero__word, #main .gi .ga--magnet .smg-hero__iron { font-size: 12px; }
    #main .gi .ga--magnet .smg-hero__mag { width: 54px; height: 26px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--magnet .smg-hero__mag, #main .gi .ga--magnet .smg-hero__field { animation: none; }
}