/* 덩어리 포장 (/grammar/expression/wrap.jsp) — 특이한 표현 단원(G.U12) 대표 움직이는 게임. 2026-10-31
 * 틀(ps2-expression-arcade.css)이 놀이판 뿌리에 .ga--wrap 을 붙인다. 이 파일은 .ewr-* 만 꾸민다. */
#main .gi .ga--wrap .ewr-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, rgba(253, 224, 71, .16) 0, transparent 40%), radial-gradient(ellipse at 80% 30%, rgba(244, 114, 182, .16) 0, transparent 42%), linear-gradient(180deg, #2e1240 0%, #1f0d33 70%); }
#main .gi .ga--wrap .ewr-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #a8693a 0, #7c4a24 22%, #5b3317 23%, #3b1f0c 100%); }
#main .gi .ga--wrap .ewr-hero__row { position: absolute; left: 6%; bottom: 30%; z-index: 1; display: flex; gap: 6px; animation: ewr-push 9s ease-in-out infinite alternate; }
#main .gi .ga--wrap .ewr-hero__box { position: relative; padding: 9px 9px 6px; border-radius: 5px; background: #fde68a; color: #3b0764; font-weight: 800; font-size: 14px; line-height: 1; box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .6); }
#main .gi .ga--wrap .ewr-hero__box::before { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; height: 7px; border-radius: 4px; background: #f59e0b; }
#main .gi .ga--wrap .ewr-hero__box--1 { background: #fbcfe8; } #main .gi .ga--wrap .ewr-hero__box--1::before { background: #ec4899; }
#main .gi .ga--wrap .ewr-hero__box--2 { background: #bae6fd; } #main .gi .ga--wrap .ewr-hero__box--2::before { background: #0ea5e9; }
#main .gi .ga--wrap .ewr-hero__box--3 { background: #bbf7d0; } #main .gi .ga--wrap .ewr-hero__box--3::before { background: #22c55e; }
#main .gi .ga--wrap .ewr-hero__box--4 { background: #ddd6fe; } #main .gi .ga--wrap .ewr-hero__box--4::before { background: #8b5cf6; }
#main .gi .ga--wrap .ewr-hero__box--5 { background: #fed7aa; } #main .gi .ga--wrap .ewr-hero__box--5::before { background: #f97316; }
#main .gi .ga--wrap .ewr-hero__grp { position: relative; display: inline-flex; gap: 6px; }
#main .gi .ga--wrap .ewr-hero__paper { position: absolute; z-index: 2; left: -4px; right: -4px; top: -6px; bottom: -2px; border-radius: 8px; background: repeating-linear-gradient(135deg, #be123c 0 9px, #e11d48 9px 15px); box-shadow: 0 0 18px rgba(244, 63, 94, .55); transform-origin: left center; animation: ewr-wrap 4.5s ease-in-out infinite; }
#main .gi .ga--wrap .ewr-hero__paper::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; background: linear-gradient(90deg, #f59e0b, #fde68a, #d97706); }
#main .gi .ga--wrap .ewr-hero__bow { position: absolute; z-index: 3; left: 50%; top: -20px; width: 26px; height: 16px; margin-left: -13px; animation: ewr-bow 4.5s ease-in-out infinite; }
#main .gi .ga--wrap .ewr-hero__bow::before, #main .gi .ga--wrap .ewr-hero__bow::after { content: ''; position: absolute; top: 0; width: 14px; height: 12px; border-radius: 50%; background: #fbbf24; border: 1.5px solid #b45309; }
#main .gi .ga--wrap .ewr-hero__bow::before { left: -2px; transform: rotate(-25deg); }
#main .gi .ga--wrap .ewr-hero__bow::after { right: -2px; transform: rotate(25deg); }
@keyframes ewr-push { from { transform: translateX(0); } to { transform: translateX(-18px); } }
@keyframes ewr-wrap { 0%, 18% { transform: scaleX(0); opacity: 0; } 40%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ewr-bow { 0%, 38% { transform: scale(0); } 50%, 88% { transform: scale(1); } 100% { transform: scale(1); opacity: 0; } }

/* 놀이 칸 */
#main .gi .ga--wrap .ewr-cv { display: block; width: 100%; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }

/* 물음 칸: 할 일 · 뜻 */
#main .gi .ga--wrap .ewr-q { display: grid; gap: 6px; text-align: left; }
#main .gi .ga--wrap .ewr-q__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: #f8fafc; font-size: 16px; font-weight: 700; line-height: 1.5; }
#main .gi .ga--wrap .ewr-step { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #be123c; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
#main .gi .ga--wrap .ewr-step--v { background: #0369a1; }
#main .gi .ga--wrap .ewr-q__mean { padding: 1px 8px; border-radius: 8px; background: rgba(253, 224, 71, .18); color: #fde68a; border: 1px dashed rgba(253, 230, 138, .6); }
#main .gi .ga--wrap .ewr-q__ko { margin: 0; color: #e9d5ff; font-size: 14.5px; line-height: 1.6; }
#main .gi .ga--wrap .ewr-q__ko[hidden] { display: none; }

/* 조작 칸 */
#main .gi .ga--wrap .ewr-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#main .gi .ga--wrap .ewr-btn { min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; color: #0f172a; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
#main .gi .ga--wrap .ewr-btn:hover:not(:disabled) { background: #f1f5f9; }
#main .gi .ga--wrap .ewr-btn--tap { min-width: 108px; border-color: #9f1239; background: #be123c; color: #fff; }
#main .gi .ga--wrap .ewr-btn--tap:hover:not(:disabled) { background: #9f1239; }
#main .gi .ga--wrap .ewr-btn:disabled { opacity: .45; cursor: default; }
#main .gi .ga--wrap .ewr-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* '왜' 카드 · 결과: 맞는 문장(덩어리 표시 · 동사 밑줄) · 내가 감싼 범위 */
#main .gi .pa.ga--wrap .ewr-full mark { padding: 0 5px; border-radius: 6px; background: #ffe4e6; color: #9f1239; box-shadow: inset 0 -2px 0 #e11d48; }
#main .gi .pa.ga--wrap .ewr-full u { padding: 0; border-radius: 0; background: none; color: inherit; text-decoration: underline; text-decoration-color: #0369a1; text-decoration-thickness: 3px; text-underline-offset: 4px; }
#main .gi .ga--wrap .ewr-mine__w { color: #b91c1c; font-weight: 700; }
#main .gi .ga--wrap .ga-card .ewr-full { display: block; margin: 8px 0 2px; font-size: 17px; line-height: 1.55; color: var(--ga-ink, #0f172a); }

@media (max-width: 560px) {
    #main .gi .ga--wrap .ewr-q__ask { font-size: 14.5px; }
    #main .gi .ga--wrap .ewr-btn { padding: 0 12px; font-size: 14px; }
    #main .gi .ga--wrap .ewr-btn--tap { min-width: 84px; }
    #main .gi .ga--wrap .ewr-hero__box { font-size: 12px; padding: 8px 7px 5px; }
    /* 휴대폰: 긴 '왜' 카드는 판 아래까지 내려와도 되게 한다 (카드 안 스크롤 없이 [이어서]가 보인다) */
    #main .gi .ga--wrap .ga-overlay { padding: 6px; bottom: auto; min-height: 100%; }
    #main .gi .ga--wrap .ga-overlay .ga-card { max-height: none; }
    #main .gi .ga--wrap .ga-card { padding: 11px 13px; }
    #main .gi .ga--wrap .ga-card .ewr-full { margin: 4px 0 0; font-size: 15.5px; }
    #main .gi .ga--wrap .ga-card .ga-card__ko { margin: 4px 0 0; font-size: 13.5px; }
    #main .gi .ga--wrap .ga-card .ga-card__why { margin-top: 6px; padding: 7px 10px; font-size: 14px; line-height: 1.5; }
    #main .gi .ga--wrap .ga-card .ga-card__mine { margin-top: 6px; font-size: 13px; line-height: 1.45; }
    #main .gi .ga--wrap:has(.ewr-q__ko:not([hidden])) .ga-card .ga-card__ko { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--wrap .ewr-hero__row, #main .gi .ga--wrap .ewr-hero__paper, #main .gi .ga--wrap .ewr-hero__bow { animation: none; }
}