/* 조동사 사다리 (/grammar/modal/ladder.jsp, 2026-10-21) — 틀 css/ps2-modal-arcade.css 위에 이 게임의 색 · 로비 그림 · 보기 칩 · 단추 · 옆 표시만 더한다.
   틀이 상자에 'ga ga--ladder' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--ladder { --ga-bg1: #160d2e; --ga-bg2: #4a1d5e; --ga-glow: #fbbf24; --ga-halo: rgba(251, 191, 36, .2); --ga-accent: #e11d48; --ga-win: #9a3412; --ga-hot: #fb923c; }

/* ── 로비 그림: 밤 공사장 · 기울어진 철골 · 사다리 · 굴러가는 통 · 오르는 일꾼 ── */
#main .gi .ga--ladder .mld-hero { position: absolute; inset: 0; overflow: hidden;
    background: radial-gradient(1.5px 1.5px at 12% 14%, rgba(255, 255, 255, .8) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 32% 8%, rgba(255, 255, 255, .7) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 55% 18%, rgba(255, 255, 255, .6) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 72% 6%, rgba(255, 255, 255, .8) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 90% 26%, rgba(255, 255, 255, .6) 50%, transparent 51%), linear-gradient(180deg, #1b1036 0%, #5b2a6e 58%, #e0744a 100%); }
#main .gi .ga--ladder .mld-hero__moon { position: absolute; right: 12%; top: 12%; width: 30px; height: 30px; border-radius: 50%; background: #fde7c2; box-shadow: 0 0 26px 8px rgba(253, 231, 194, .35); }
#main .gi .ga--ladder .mld-hero__city { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: #170d2b;
    clip-path: polygon(0 100%, 0 46%, 7% 46%, 7% 24%, 13% 24%, 13% 52%, 19% 52%, 19% 12%, 26% 12%, 26% 40%, 33% 40%, 33% 30%, 40% 30%, 40% 58%, 47% 58%, 47% 18%, 53% 18%, 53% 44%, 61% 44%, 61% 8%, 66% 8%, 66% 36%, 74% 36%, 74% 50%, 81% 50%, 81% 22%, 88% 22%, 88% 42%, 94% 42%, 94% 30%, 100% 30%, 100% 100%); }
#main .gi .ga--ladder .mld-hero__girder { position: absolute; left: 6%; right: 6%; height: 12px; border-radius: 2px;
    background: repeating-linear-gradient(60deg, transparent 0 7px, rgba(143, 29, 44, .9) 7px 9px), linear-gradient(180deg, #ff9a9a 0%, #e8414f 40%, #8f1d2c 100%); box-shadow: 0 6px 14px rgba(2, 6, 23, .35); }
#main .gi .ga--ladder .mld-hero__girder--1 { top: 78%; transform: rotate(2.5deg); }
#main .gi .ga--ladder .mld-hero__girder--2 { top: 46%; transform: rotate(-2.5deg); }
#main .gi .ga--ladder .mld-hero__girder--3 { top: 14%; transform: rotate(2.5deg); }
#main .gi .ga--ladder .mld-hero__ladder { position: absolute; width: 20px; top: calc(46% + 4px); height: calc(32% - 2px); border-left: 3px solid #22d3ee; border-right: 3px solid #22d3ee;
    background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(34, 211, 238, .85) 9px 11px); filter: drop-shadow(0 0 6px rgba(34, 211, 238, .45)); }
#main .gi .ga--ladder .mld-hero__ladder--a { left: 28%; }
#main .gi .ga--ladder .mld-hero__ladder--b { left: 66%; border-color: #fbbf24; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(251, 191, 36, .85) 9px 11px); filter: drop-shadow(0 0 6px rgba(251, 191, 36, .45)); }
#main .gi .ga--ladder .mld-hero__tag { position: absolute; top: 56%; padding: 3px 10px; border-radius: 999px; background: rgba(6, 10, 24, .85); color: #fff; font-weight: 800; font-size: 13px; line-height: 1.3; white-space: nowrap; animation: mld-float 3s ease-in-out infinite; }
#main .gi .ga--ladder .mld-hero__tag--a { left: calc(28% - 16px); border: 1.5px solid #22d3ee; }
#main .gi .ga--ladder .mld-hero__tag--b { left: calc(66% - 18px); border: 1.5px solid #fbbf24; animation-delay: -1.5s; }
#main .gi .ga--ladder .mld-hero__guy { position: absolute; left: calc(28% + 1px); top: calc(78% - 36px); width: 18px; height: 30px; animation: mld-climb 2.6s ease-in-out infinite; }
#main .gi .ga--ladder .mld-hero__guy::before { content: ''; position: absolute; left: 2px; top: 0; width: 14px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #fcd9b6 0 45%, transparent 46%), linear-gradient(180deg, #facc15 0 50%, transparent 50%); }
#main .gi .ga--ladder .mld-hero__guy::after { content: ''; position: absolute; left: 3px; top: 12px; width: 12px; height: 13px; border-radius: 4px; background: linear-gradient(180deg, #ef4444 0 30%, #2563eb 30%); }
#main .gi .ga--ladder .mld-hero__guy b { position: absolute; left: 4px; bottom: 0; width: 10px; height: 6px; border-left: 3px solid #1e3a8a; border-right: 3px solid #1e3a8a; }
#main .gi .ga--ladder .mld-hero__barrel { position: absolute; left: 0; top: calc(78% - 21px); width: 20px; height: 20px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #f2a65a 0 20%, #b8651f 55%, #6b3410 100%); box-shadow: inset 0 0 0 2px #4a230a; animation: mld-roll 4.2s linear infinite; }
#main .gi .ga--ladder .mld-hero__barrel::before, #main .gi .ga--ladder .mld-hero__barrel::after { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: #4a230a; }
#main .gi .ga--ladder .mld-hero__barrel::after { transform: rotate(90deg); }
#main .gi .ga--ladder .mld-hero__q { position: absolute; left: 14px; bottom: 12px; padding: 5px 12px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fde68a; font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
@keyframes mld-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mld-climb { 0%, 12% { transform: translateY(0); } 55%, 70% { transform: translateY(-72px); } 100% { transform: translateY(0); } }
@keyframes mld-roll { from { transform: translateX(-30px) rotate(0deg); } to { transform: translateX(520px) rotate(1080deg); } }

/* ── 위 상자: 빈칸 · 사다리 칩 ── */
#main .gi .ga--ladder .ga-q .mld-ask mark.mld-blank { min-width: 72px; }
#main .gi .ga--ladder .ga-q .mld-ask mark.mld-blank.is-ok { background: rgba(34, 197, 94, .2); color: #bbf7d0; border: 1px solid rgba(134, 239, 172, .75); }
#main .gi .ga--ladder .ga-q .mld-ask mark.mld-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--ladder .mld-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 3px 0 1px; }
#main .gi .ga--ladder .mld-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--ladder .mld-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--ladder .mld-opt.is-ok { background: rgba(34, 197, 94, .22); border-color: #86efac; }
#main .gi .ga--ladder .mld-opt.is-bad { background: rgba(239, 68, 68, .22); border-color: #fca5a5; }
#main .gi .ga--ladder .mld-opt.is-bad span { text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--ladder .mld-opt.is-dim { opacity: .45; }

/* ── 옆 표시 · 캔버스 · 단추 ── */
#main .gi .ga--ladder .mld-floor b { color: var(--ga-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
#main .gi .ga--ladder .mld-hammer { padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, #f97316, #e11d48); color: #fff; font-weight: 900; box-shadow: 0 0 14px rgba(249, 115, 22, .45); animation: mld-hot 1s ease-in-out infinite alternate; }
@keyframes mld-hot { from { filter: brightness(1); } to { filter: brightness(1.25); } }
#main .gi .ga--ladder .mld-cv { background: #160d2e; }
#main .gi .ga--ladder .mld-pad { min-width: 84px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#main .gi .ga--ladder .mld-pad.is-main { background: linear-gradient(180deg, #be123c, #4c0519); border-color: #881337; color: #fff; }
#main .gi .ga--ladder .mld-pad.is-main small { color: rgba(255, 255, 255, .75); }

@media (max-width: 560px) {
    #main .gi .ga--ladder .mld-opt { font-size: 12.5px; padding: 2px 9px 2px 3px; }
    #main .gi .ga--ladder .mld-opt i { width: 18px; height: 18px; font-size: 11px; }
    #main .gi .ga--ladder .mld-pad { min-width: 0; }
    #main .gi .ga--ladder .mld-hero__tag { font-size: 12px; }
    #main .gi .ga--ladder .mld-hero__q { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--ladder .mld-hero__tag, #main .gi .ga--ladder .mld-hero__guy, #main .gi .ga--ladder .mld-hero__barrel, #main .gi .ga--ladder .mld-hammer { animation: none; }
    #main .gi .ga--ladder .mld-hero__barrel { left: 40%; }
}