/* 문장 뼈대 엑스레이 (/grammar/structure/xray.jsp) — 문장구조 단원(G.U11) 대표 움직이는 게임. 2026-10-29
 * 틀(ps2-structure-arcade.css)이 놀이판 뿌리에 .ga--xray 를 붙인다. 이 파일은 .sxr-* 만 꾸민다. */
#main .gi .ga--xray .sxr-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #0f2c52 0%, #071528 72%); }
#main .gi .ga--xray .sxr-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(103, 232, 249, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .07) 1px, transparent 1px); background-size: 24px 24px; }
#main .gi .ga--xray .sxr-hero__film { position: absolute; left: 6%; top: 50%; display: flex; gap: 8px; padding: 16px 12px; white-space: nowrap; background: rgba(15, 23, 42, .82); border-top: 1px solid rgba(103, 232, 249, .2); border-bottom: 1px solid rgba(103, 232, 249, .2); transform: translateY(-50%); animation: sxr-flow 18s linear infinite alternate; }
#main .gi .ga--xray .sxr-hero__w { padding: 6px 9px; border: 1px solid rgba(148, 163, 184, .32); border-radius: 8px; background: rgba(148, 163, 184, .12); color: #cbd5e1; font-weight: 700; font-size: 15px; line-height: 1; }
#main .gi .ga--xray .sxr-hero__w.is-v { border-color: #38bdf8; background: rgba(14, 165, 233, .32); color: #f0f9ff; box-shadow: 0 0 14px rgba(56, 189, 248, .55); }
#main .gi .ga--xray .sxr-hero__w.is-s { border-color: #fbbf24; background: rgba(245, 158, 11, .28); color: #fffbeb; box-shadow: 0 0 12px rgba(251, 191, 36, .45); }
#main .gi .ga--xray .sxr-hero__w.is-x { opacity: .45; }
#main .gi .ga--xray .sxr-hero__lens { position: absolute; left: 50%; top: 50%; width: 84px; height: 104px; margin: -52px 0 0 -42px; border: 2.5px solid #67e8f9; border-radius: 13px; background: rgba(8, 47, 73, .28); box-shadow: 0 0 20px rgba(103, 232, 249, .6), inset 0 0 26px rgba(34, 211, 238, .28); animation: sxr-scan 6s ease-in-out infinite; }
#main .gi .ga--xray .sxr-hero__bone { position: absolute; left: 50%; bottom: 16%; width: 120px; height: 6px; margin-left: -60px; border-radius: 3px; background: #e0f2fe; box-shadow: 0 0 12px #38bdf8; opacity: .8; }
#main .gi .ga--xray .sxr-hero__bone::before, #main .gi .ga--xray .sxr-hero__bone::after { content: ''; position: absolute; top: -4px; width: 10px; height: 14px; border-radius: 5px; background: inherit; }
#main .gi .ga--xray .sxr-hero__bone::before { left: -5px; }
#main .gi .ga--xray .sxr-hero__bone::after { right: -5px; }
@keyframes sxr-flow { from { transform: translate(0, -50%); } to { transform: translate(-28%, -50%); } }
@keyframes sxr-scan { 0%, 100% { transform: translateX(-70px); } 50% { transform: translateX(70px); } }

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

/* 물음 칸: 걸음 · 문장(찾은 것 표시) · 뜻 */
#main .gi .ga--xray .sxr-q { display: grid; gap: 6px; text-align: left; }
#main .gi .ga--xray .sxr-q__step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: #e2e8f0; font-size: 15px; font-weight: 600; line-height: 1.5; }
#main .gi .ga--xray .sxr-step { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
#main .gi .ga--xray .sxr-step--v { background: #0369a1; }
#main .gi .ga--xray .sxr-step--s { background: #b45309; }
#main .gi .ga--xray .sxr-step--c { background: #6d28d9; }
#main .gi .ga--xray .sxr-step--m { background: #15803d; }
#main .gi .ga--xray .sxr-q__sent { margin: 0; color: #f8fafc; font-size: 17px; font-weight: 600; line-height: 1.8; }
#main .gi .ga--xray .sxr-w { padding: 1px 2px; border-radius: 4px; }
#main .gi .ga--xray .sxr-w.is-v { background: #e0f2fe; color: #075985; font-weight: 700; box-shadow: inset 0 -2px 0 #0284c7; }
#main .gi .ga--xray .sxr-w.is-s { background: #fef3c7; color: #92400e; font-weight: 700; box-shadow: inset 0 -2px 0 #d97706; }
#main .gi .ga--xray .sxr-w.is-c { background: #ede9fe; color: #5b21b6; font-weight: 700; }
#main .gi .ga--xray .sxr-w.is-m { background: #dcfce7; color: #166534; font-weight: 700; box-shadow: inset 0 -2px 0 #16a34a; }
#main .gi .ga--xray .sxr-w.is-x { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
#main .gi .ga--xray .sxr-q__ko { margin: 0; color: #cbd5e1; font-size: 14px; line-height: 1.6; }

/* 조작 칸 */
#main .gi .ga--xray .sxr-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#main .gi .ga--xray .sxr-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--xray .sxr-btn:hover:not(:disabled) { background: #f1f5f9; }
#main .gi .ga--xray .sxr-btn--scan { min-width: 108px; border-color: #0e7490; background: #0891b2; color: #fff; }
#main .gi .ga--xray .sxr-btn--scan:hover:not(:disabled) { background: #0e7490; }
#main .gi .ga--xray .sxr-btn--none { border-color: #fdba74; background: #fff7ed; color: #9a3412; }
#main .gi .ga--xray .sxr-btn--none:hover:not(:disabled) { background: #ffedd5; }
#main .gi .ga--xray .sxr-btn:disabled { opacity: .45; cursor: default; }
#main .gi .ga--xray .sxr-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
#main .gi .ga--xray .sxr-btn[hidden] { display: none; }

/* '왜' 카드: 내가 비춘 것 · 맞는 문장 */
#main .gi .ga--xray .sxr-mine__w { color: #b91c1c; font-weight: 700; }
#main .gi .ga--xray .sxr-mine__tag { display: inline-block; margin: 0 4px; padding: 0 7px; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: 12px; font-weight: 700; vertical-align: 1px; }
#main .gi .ga--xray .sxr-full { font-weight: 600; }
#main .gi .ga--xray .ga-card .sxr-full { display: block; margin: 8px 0 2px; font-size: 17px; line-height: 1.5; color: var(--ga-ink, #0f172a); }

@media (max-width: 560px) {
    #main .gi .ga--xray .sxr-q__sent { font-size: 15.5px; line-height: 1.7; }
    #main .gi .ga--xray .sxr-q__step { font-size: 14px; }
    #main .gi .ga--xray .sxr-btn { padding: 0 12px; font-size: 14px; }
    #main .gi .ga--xray .sxr-btn--scan { min-width: 84px; }
    #main .gi .ga--xray .sxr-hero__w { font-size: 13px; padding: 5px 7px; }
    /* 휴대폰: '왜' 카드가 판 높이 안에 들어가도록 줄인다 */
    /* 판이 낮아서 긴 카드는 판 아래(조작 단추 위)까지 내려와도 되게 한다 — 카드 안 스크롤 없이 [이어서]가 보인다 */
    #main .gi .ga--xray .ga-overlay { padding: 6px; bottom: auto; min-height: 100%; }
    #main .gi .ga--xray .ga-overlay .ga-card { max-height: none; }
    #main .gi .ga--xray .ga-card { padding: 11px 13px; }
    #main .gi .ga--xray .ga-card .sxr-full { margin: 4px 0 0; font-size: 15.5px; }
    #main .gi .ga--xray .ga-card .ga-card__tag { margin-bottom: 2px; }
    #main .gi .ga--xray .ga-card .ga-card__ko { margin: 4px 0 0; font-size: 13.5px; }
    #main .gi .ga--xray .ga-card .ga-card__why { margin-top: 6px; padding: 7px 10px; font-size: 14px; line-height: 1.5; }
    #main .gi .ga--xray .ga-card .ga-card__mine { margin-top: 6px; font-size: 13px; line-height: 1.45; }
    /* 뜻이 물음 칸에 이미 보이면(1단계) 카드에서는 되풀이하지 않는다 */
    #main .gi .ga--xray:has(.sxr-q__ko:not([hidden])) .ga-card .ga-card__ko { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--xray .sxr-hero__film, #main .gi .ga--xray .sxr-hero__lens { animation: none; }
}