/*
 * 양보 모래시계 (/grammar/expression/hourglass.jsp, 2026-10-31) — 게임 js/ps2-expression-hourglass.js 의 꾸밈. 틀의 꾸밈은 css/ps2-expression-arcade.css (.ga-*)
 *   해 질 녘 사막 #5b2a5e · 모래 #f3d39b · 놋쇠 #d6a94a · 금빛 #fde68a
 */
#main .gi .ga--hourglass { --ga-bg1: #3a1d3f; --ga-bg2: #7a3b4e; --ga-glow: #fde68a; --ga-halo: rgba(253, 230, 138, .26); --ga-win: #92400e; --ga-hot: #f59e0b; --ga-accent: #b45309; }
#main .gi .ga--hourglass .ehg-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: default; }
#main .gi .ga--hourglass .ga-q { min-height: 104px; background: linear-gradient(160deg, #3a1d3f, #22112a); }
#main .gi .ga--hourglass .ga-q .ehg-ask { color: rgba(255, 247, 230, .78); font-size: 13.5px; }
#main .gi .ga--hourglass .ga-q .ehg-cue { justify-self: center; display: inline-block; padding: 1px 12px; border-radius: 999px; background: rgba(253, 230, 138, .16); color: #fde68a; font-size: 13.5px; font-weight: 800; }
#main .gi .ga--hourglass .ga-q .ehg-line { font-size: clamp(16px, 2.2vw, 20px); line-height: 1.65; color: #fff7e6; }
#main .gi .ga--hourglass .ga-q .ehg-line mark { display: inline-block; min-width: 40px; margin: 1px 0; padding: 0 7px; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fde68a; border: 1px dashed rgba(253, 230, 138, .6); line-height: 1.45; }
#main .gi .ga--hourglass .ga-q .ehg-line mark.is-in { border-style: solid; background: rgba(253, 230, 138, .2); color: #fff7d6; }
#main .gi .ga--hourglass .ga-q .ehg-line mark.is-bad { border: 1px solid #f87171; background: rgba(248, 113, 113, .25); color: #fecaca; text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--hourglass .ga-q .ehg-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; color: #fde68a; font-weight: 800; }
#main .gi .ga--hourglass .ga-q .ehg-okmark { color: #fbbf24; font-size: 1.15em; }
#main .gi .ga--hourglass .ga-q .ehg-sent { color: #fff7e6; text-align: center; font-size: clamp(15px, 2vw, 18px); }
#main .gi .ga--hourglass .ga-q .ehg-sent mark { background: #fde68a; color: #422006; }
#main .gi .ga--hourglass .ehg-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(245, 158, 11, .14); color: #92400e; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--hourglass .ehg-tries i { font-style: normal; font-size: 11px; transition: opacity .2s, transform .2s; }
#main .gi .ga--hourglass .ehg-tries i.is-off { opacity: .3; transform: scale(.8); filter: grayscale(1); }
#main .gi .ga--hourglass .ehg-speed { padding: 2px 9px; border-radius: 999px; background: rgba(180, 83, 9, .12); color: #b45309; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--hourglass .ga-card .ehg-sent, #main .gi .ga--hourglass .ga-wrong .ehg-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--hourglass .ga-card .ga-sent mark, #main .gi .ga--hourglass .ga-wrong .ga-sent mark { background: #fef3c7; color: #78350f; border: 0; }
#main .gi .ga--hourglass .ehg-mine { color: #b91c1c; }

/* 로비 그림: 해 질 녘 사막 · 모래시계 · 떠 있는 조각 */
#main .gi .ga--hourglass .ehg-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(50% 40% at 78% 26%, rgba(255, 214, 150, .5), transparent 62%), linear-gradient(#f59e6b, #7a3b4e 52%, #3a1d3f); }
#main .gi .ga--hourglass .ehg-hero__sun { position: absolute; right: 16%; top: 16%; width: 30px; height: 30px; border-radius: 50%; background: #ffe2b0; box-shadow: 0 0 30px 10px rgba(255, 214, 150, .55); }
#main .gi .ga--hourglass .ehg-hero__dune { position: absolute; left: -20%; right: -20%; border-radius: 50% 50% 0 0; }
#main .gi .ga--hourglass .ehg-hero__dune--1 { bottom: -30%; height: 58%; background: #a8683a; transform: translateX(-12%); }
#main .gi .ga--hourglass .ehg-hero__dune--2 { bottom: -38%; height: 58%; background: #e9b872; transform: translateX(16%); }
#main .gi .ga--hourglass .ehg-hero__glass { position: absolute; left: 50%; top: 12%; width: 76px; height: 136px; margin-left: -38px; animation: ehg-turn 7s ease-in-out infinite; }
#main .gi .ga--hourglass .ehg-hero__cap { position: absolute; left: -6px; right: -6px; height: 9px; border-radius: 4px; background: linear-gradient(#8a5a32, #4a2b14); }
#main .gi .ga--hourglass .ehg-hero__cap--t { top: -8px; }
#main .gi .ga--hourglass .ehg-hero__cap--b { bottom: -8px; }
#main .gi .ga--hourglass .ehg-hero__bulb { position: absolute; left: 4px; right: 4px; height: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .12); }
#main .gi .ga--hourglass .ehg-hero__bulb--t { top: 0; border-radius: 6px 6px 50% 50% / 6px 6px 90% 90%; background: linear-gradient(transparent 40%, #f3d39b 40%); }
#main .gi .ga--hourglass .ehg-hero__bulb--b { bottom: 0; border-radius: 50% 50% 6px 6px / 90% 90% 6px 6px; background: linear-gradient(transparent 62%, #d9a35a 62%); }
#main .gi .ga--hourglass .ehg-hero__stream { position: absolute; left: 50%; top: 48%; width: 2px; height: 30%; margin-left: -1px; background: #f3d39b; }
#main .gi .ga--hourglass .ehg-hero__chip { position: absolute; padding: 3px 11px; border-radius: 10px; border: 1.5px solid rgba(120, 72, 20, .65); background: linear-gradient(#fffaf0, #f1d8a8); color: #2a1606; font-size: 13px; font-weight: 800; animation: ehg-bob 3.2s ease-in-out infinite; }
#main .gi .ga--hourglass .ehg-hero__chip--0 { left: 14%; bottom: 16%; }
#main .gi .ga--hourglass .ehg-hero__chip--1 { left: 44%; bottom: 10%; animation-delay: -1s; }
#main .gi .ga--hourglass .ehg-hero__chip--2 { right: 12%; bottom: 18%; animation-delay: -2s; }
@keyframes ehg-turn { 0%, 80% { transform: rotate(0deg); } 92%, 100% { transform: rotate(180deg); } }
@keyframes ehg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#main .gi .ga--hourglass.ehg-lv1 .ga-q { min-height: 116px; }
#main .gi .ga--hourglass.ehg-lv3 .ga-q { min-height: 112px; }
@media (max-width: 760px) {
    #main .gi .ga--hourglass .ga-q { min-height: 100px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--hourglass.ehg-lv1 .ga-q { min-height: 118px; }
    #main .gi .ga--hourglass .ga-q .ehg-line { font-size: 15.5px; line-height: 1.55; }
    #main .gi .ga--hourglass .ga-q .ehg-line mark { min-width: 30px; padding: 0 5px; }
    #main .gi .ga--hourglass .ga-q .ehg-ask { font-size: 12.5px; }
    #main .gi .ga--hourglass .ga-ko { font-size: 13px; }
    #main .gi .ga--hourglass .ga-side { display: none; }
    #main .gi .ga--hourglass .ehg-hero__chip { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--hourglass .ehg-hero__glass, #main .gi .ga--hourglass .ehg-hero__chip { animation: none; }
}