/* 게임 장면 카드 (2026-11-02) — 단원 게임 모음(/grammar/<단원>/games.jsp)의 '움직이는 게임'. js/ps2-unit-scenes.js 가 그린다.
   문법 게임 모음(/grammar/games.jsp)의 .gh-card 와 같은 꼴 · 같은 값(9:16 실제 장면 + 이름 + 한 줄). 근거: coach-engine.html 26절 ⑪ · ⑫.
   단원 CSS(.igm · .vgm · .tgm 의 h2 · a 규칙)보다 앞서도록 #main .gi .sc-sec 아래로 묶는다. */
#main .gi .sc-sec { margin: 6px 0 26px; }
#main .gi .sc-sec--rest { margin: 30px 0 12px; }
#main .gi .sc-sec .sc-h { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; color: var(--ps-ink); }
#main .gi .sc-sec .sc-lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--ps-ink-3); }
#main .gi .sc-sec .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; margin: 0; padding: 0; list-style: none; }
#main .gi .sc-sec .sc-grid > li { margin: 0; padding: 0; list-style: none; }
#main .gi .sc-sec .sc-card { display: flex; flex-direction: column; gap: 6px; color: var(--ps-brand-strong); font-weight: 700; text-decoration: none; border-radius: 14px; outline-offset: 3px; }
#main .gi .sc-sec .sc-card:hover, #main .gi .sc-sec .sc-card:focus { color: var(--ps-brand-strong); text-decoration: none; }
#main .gi .sc-sec .sc-pic { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0b1324; box-shadow: var(--ps-shadow-sm); transition: transform .2s var(--ps-ease), box-shadow .2s var(--ps-ease); }
#main .gi .sc-sec .sc-card:hover .sc-pic, #main .gi .sc-sec .sc-card:focus-visible .sc-pic { transform: translateY(-3px); box-shadow: var(--ps-shadow); }
#main .gi .sc-sec .sc-pic img, #main .gi .sc-sec .sc-pic video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; display: block; }
#main .gi .sc-sec .sc-pic video { opacity: 0; transition: opacity .25s; }
#main .gi .sc-sec .sc-card.is-playing .sc-pic video { opacity: 1; }
#main .gi .sc-sec .sc-play { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ps-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: opacity .2s; }
#main .gi .sc-sec .sc-play svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
#main .gi .sc-sec .sc-card.is-playing .sc-play { opacity: 0; }
#main .gi .sc-sec .sc-name { margin-top: 2px; font-size: 15px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; color: var(--ps-brand-strong); }
#main .gi .sc-sec .sc-how { font-size: 12.5px; line-height: 1.45; color: var(--ps-ink-3); }
#main .gi .sc-sec .sc-prog { font-size: 12px; line-height: 1.4; color: var(--ps-ink-2); }
/* 단원 게임 모음 손질: 아홉 단원(igm)의 '오늘의 도전' 날짜 띠는 어두운 머리글용 색(#e2e8f0 · 흰 14%)을 밝은 노란 카드에서 그대로 써 거의 보이지 않았다
   (대비 약 1.2:1, WCAG 1.4.3 은 4.5:1) → 카드 글과 같은 갈색 계열로. */
#main .gi .igm .igm-daily .igm-eyebrow { justify-self: start; background: rgba(146, 64, 14, .1); color: #92400e; }
@media (prefers-reduced-motion: reduce) { #main .gi .sc-sec .sc-pic, #main .gi .sc-sec .sc-card:hover .sc-pic { transition: none; transform: none; } }
@media (max-width: 640px) {
    #main .gi .sc-sec .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
    #main .gi .sc-sec .sc-name { font-size: 13.5px; }
    #main .gi .sc-sec .sc-how { font-size: 11.5px; }
    #main .gi .sc-sec .sc-play { width: 26px; height: 26px; right: 6px; bottom: 6px; }
}