/* ~ing 나선 탑 (/grammar/gerund/helix.jsp, 2026-10-19) — 틀 css/ps2-gerund-arcade.css 위에 이 게임의 색 · 로비 그림 · 보기 칩 · 단추 · 옆 표시만 더한다.
   틀이 상자에 'ga ga--helix' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--helix { --ga-bg1: #061a2e; --ga-bg2: #1d1655; --ga-glow: #fde047; --ga-halo: rgba(253, 224, 71, .2); --ga-accent: #0284c7; --ga-win: #0e7490; --ga-hot: #fb923c; }

/* ── 로비 그림: 도는 탑과 튀는 공 ── */
#main .gi .ga--helix .ghx-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(90% 70% at 50% 0%, rgba(125, 211, 252, .22) 0%, transparent 70%), linear-gradient(180deg, #04192e 0%, #0a3d5c 60%, #0e6b74 100%); }
#main .gi .ga--helix .ghx-hero__pillar { position: absolute; left: 50%; top: -10px; bottom: -10px; width: 44px; margin-left: -22px; background: linear-gradient(90deg, #5aa9d6 0%, #f8fafc 30%, #cfe9fb 62%, #3d86ad 100%); box-shadow: 0 0 24px rgba(186, 230, 253, .25); }
#main .gi .ga--helix .ghx-hero__disk { position: absolute; left: 50%; width: 220px; height: 220px; margin-left: -110px; transform: scaleY(.36); }
#main .gi .ga--helix .ghx-hero__disk--1 { top: -40px; }
#main .gi .ga--helix .ghx-hero__disk--2 { top: 48px; opacity: .82; }
#main .gi .ga--helix .ghx-hero__disk--3 { top: 136px; opacity: .6; }
#main .gi .ga--helix .ghx-hero__disk::before { content: ''; position: absolute; inset: 0; border-radius: 50%; transform: translateY(30px); background: #0b5f86;
    -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 27%); mask: radial-gradient(circle, transparent 0 26%, #000 27%); }
#main .gi .ga--helix .ghx-hero__plate { position: absolute; inset: 0; border-radius: 50%; animation: ghx-spin 10s linear infinite;
    background: conic-gradient(from 0deg, #7dd3fc 0deg 36deg, rgba(34, 211, 238, .5) 36deg 96deg, #8ed8fd 96deg 150deg, #ef4444 150deg 164deg, #7dd3fc 164deg 212deg, rgba(251, 191, 36, .55) 212deg 272deg, #93dcfd 272deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 27%); mask: radial-gradient(circle, transparent 0 26%, #000 27%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); }
#main .gi .ga--helix .ghx-hero__disk--2 .ghx-hero__plate, #main .gi .ga--helix .ghx-hero__disk--3 .ghx-hero__plate { animation-delay: -1.2s; }
#main .gi .ga--helix .ghx-hero__ball { position: absolute; left: 50%; top: 82px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fffbe0 0%, #fde047 45%, #ca8a04 100%); box-shadow: 0 0 18px rgba(253, 224, 71, .7); animation: ghx-bounce .78s cubic-bezier(.33, 0, .67, 1) infinite alternate; }
#main .gi .ga--helix .ghx-hero__shadow { position: absolute; left: 50%; top: 99px; width: 26px; height: 8px; margin-left: -13px; border-radius: 50%; background: rgba(2, 6, 23, .38); animation: ghx-shadow .78s cubic-bezier(.33, 0, .67, 1) infinite alternate; }
#main .gi .ga--helix .ghx-hero__tag { position: absolute; top: 44px; padding: 4px 11px; border-radius: 999px; background: rgba(6, 10, 24, .8); color: #fff; font-weight: 800; font-size: 13px; line-height: 1.3; white-space: nowrap; animation: ghx-float 3.2s ease-in-out infinite; }
#main .gi .ga--helix .ghx-hero__tag--a { left: calc(50% - 150px); border: 1.5px solid #22d3ee; }
#main .gi .ga--helix .ghx-hero__tag--b { left: calc(50% + 62px); border: 1.5px solid #fbbf24; animation-delay: -1.6s; }
#main .gi .ga--helix .ghx-hero__q { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fde68a; font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
@keyframes ghx-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ghx-bounce { from { transform: translateY(0) scale(1.12, .86); } 12% { transform: translateY(-4px) scale(1, 1); } to { transform: translateY(-46px) scale(.96, 1.05); } }
@keyframes ghx-shadow { from { transform: scale(1); opacity: 1; } to { transform: scale(.55); opacity: .45; } }
@keyframes ghx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── 판 위 상자: 빈칸 · 보기 칩 ── */
#main .gi .ga--helix .ga-q .ghx-ask mark.ghx-blank { min-width: 64px; }
#main .gi .ga--helix .ga-q .ghx-ask mark.ghx-blank.is-ok { background: rgba(34, 197, 94, .2); color: #bbf7d0; border: 1px solid rgba(134, 239, 172, .75); }
#main .gi .ga--helix .ga-q .ghx-ask mark.ghx-blank.is-bad { background: rgba(239, 68, 68, .2); color: #fecaca; border: 1px solid rgba(252, 165, 165, .75); text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--helix .ghx-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 3px 0 1px; }
#main .gi .ga--helix .ghx-opt { --c: #22d3ee; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1.5px solid var(--c); color: #fff; font-weight: 800; font-size: 14px; line-height: 1.35; transition: opacity .2s, background .2s; }
#main .gi .ga--helix .ghx-opt i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #0b1020; font-style: normal; font-size: 12px; font-weight: 900; }
#main .gi .ga--helix .ghx-opt.is-ok { background: rgba(34, 197, 94, .22); border-color: #86efac; }
#main .gi .ga--helix .ghx-opt.is-bad { background: rgba(239, 68, 68, .22); border-color: #fca5a5; }
#main .gi .ga--helix .ghx-opt.is-bad span { text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--helix .ghx-opt.is-dim { opacity: .45; }

/* ── 옆 표시 · 캔버스 · 단추 ── */
#main .gi .ga--helix .ghx-depth b { color: var(--ga-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
#main .gi .ga--helix .ghx-fire { padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, #f97316, #ef4444); color: #fff; font-weight: 900; box-shadow: 0 0 14px rgba(249, 115, 22, .45); animation: ghx-hot 1s ease-in-out infinite alternate; }
@keyframes ghx-hot { from { filter: brightness(1); } to { filter: brightness(1.25); } }
#main .gi .ga--helix .ghx-cv { background: #04192e; }
#main .gi .ga--helix .ghx-pad { min-width: 92px; }
#main .gi .ga--helix .ghx-pad.is-main { background: linear-gradient(180deg, #0c4a6e, #061a2e); border-color: #0c4a6e; }

@media (max-width: 560px) {
    #main .gi .ga--helix .ghx-opt { font-size: 12.5px; padding: 2px 9px 2px 3px; }
    #main .gi .ga--helix .ghx-opt i { width: 18px; height: 18px; font-size: 11px; }
    #main .gi .ga--helix .ghx-pad { min-width: 0; }
    #main .gi .ga--helix .ghx-hero__disk { width: 190px; height: 190px; margin-left: -95px; }
    #main .gi .ga--helix .ghx-hero__tag--a { left: calc(50% - 132px); }
    #main .gi .ga--helix .ghx-hero__tag--b { left: calc(50% + 44px); }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--helix .ghx-hero__plate, #main .gi .ga--helix .ghx-hero__ball, #main .gi .ga--helix .ghx-hero__shadow, #main .gi .ga--helix .ghx-hero__tag, #main .gi .ga--helix .ghx-fire { animation: none; }
}