/* LAB 게임 소개(2026-10-02, 일곱 게임). 게임 서재처럼 같은 무게의 카드: 무엇을 하는지 보이는 플레이 장면 한 장, 연습하는 것,
   한 줄 설명, 세 가지 사실, 바로 해 보기. 마지막 칸은 다음 게임 안내. 그 아래 게임들이 함께 쓰는 것, TOPIK 범위, 접은 연구 근거.
   색·선·글꼴은 homepage.css의 변수(--ink, --line, --hair, --radius, --accent-ink)를 따른다. 움직임은 없다.
   컴퓨터 4열, 태블릿 2열, 휴대폰은 작은 장면을 옆에 둔 한 줄 카드. */
.game-showcase{display:grid;gap:clamp(28px,3vw,44px);padding-top:clamp(40px,4.4vw,64px);border-top:var(--hair) solid var(--ink);color:var(--ink)}
.game-intro{display:grid;gap:14px;max-width:44em}
.game-intro h3{margin:4px 0 0;font:300 clamp(30px,3.4vw,50px)/1.16 var(--display);letter-spacing:-.035em;text-wrap:balance}
.game-intro h3 .title-lead{font-weight:700}
.game-intro>p{margin:0;font:400 clamp(16px,1.25vw,18px)/1.7 var(--sans);color:var(--ink-2)}

.game-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.game-card{display:flex;flex-direction:column;min-width:0;border:var(--hair) solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.game-card-image{display:block;aspect-ratio:16/10;background:#0e1116;overflow:hidden}
.game-card-image img{display:block;width:100%;height:100%;object-fit:cover}
.game-card-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 16px 18px}
/* 한글이 섞인 라벨은 고정폭 글꼴의 넓은 자간이 글자를 띄워 보이게 해서, 사이트의 작은 라벨처럼 본문 글꼴로 쓴다. */
.game-card-kicker{font:600 12px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink-3)}
.game-card h4{margin:0;font:700 clamp(19px,1.5vw,22px)/1.25 var(--display);letter-spacing:-.03em;word-break:keep-all}
.game-card p{margin:0;font:400 14.5px/1.65 var(--sans);color:var(--ink-2);word-break:keep-all}
.game-facts{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0;padding:0;list-style:none}
.game-facts li{padding:4px 9px;border:var(--hair) solid var(--line);border-radius:999px;font:500 12px/1.3 var(--sans);color:var(--ink)}
/* 설명 길이가 달라도 같은 줄의 카드 버튼이 같은 높이에 오도록 맨 아래로 민다. */
.game-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:8px}
.game-showcase .game-card .primary-link{min-height:44px}
.game-card-extra{font:500 14px/1.4 var(--sans);color:var(--ink-2);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:4px}
.game-card-extra:hover{color:var(--ink)}
/* 마지막 칸: 다음 게임 안내. 장면 없이 점선으로 비워 둔 자리. */
.game-card-next{justify-content:flex-end;gap:8px;padding:18px;border-style:dashed;background:transparent}
.game-card-next p{max-width:22em}

.game-practice{display:grid;gap:16px}
.game-practice h4{margin:0;font:600 13px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink-3)}
.game-practice ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:var(--hair) solid var(--ink)}
.game-practice li{display:grid;align-content:start;gap:8px;padding:20px 24px 4px 0}
.game-practice li+li{padding-left:24px;border-left:var(--hair) solid var(--line)}
.game-step{font:400 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.game-practice h5{margin:0;font:700 17px/1.4 var(--sans);letter-spacing:-.015em}
.game-practice p{margin:0;font:400 15px/1.65 var(--sans);color:var(--ink-2)}

.game-note{margin:0;max-width:62em;font:400 13px/1.75 var(--sans);color:var(--ink-3)}
.game-note strong{font-weight:600;color:var(--ink)}
.game-note a{color:inherit;text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:3px}

.game-research{border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.game-research summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;cursor:pointer;list-style:none;font:600 15px/1.5 var(--sans)}
.game-research summary::-webkit-details-marker{display:none}
.game-research[open] summary>span{transform:rotate(45deg)}
.game-research h4{margin:2px 0 18px;font:700 clamp(19px,1.7vw,23px)/1.4 var(--display);letter-spacing:-.02em}
.game-research-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-bottom:18px}
.game-research-grid article{display:grid;align-content:start;gap:8px}
.game-research-grid h5{margin:0;font:700 15px/1.45 var(--sans)}
.game-research-grid p{margin:0;font:400 14px/1.65 var(--sans);color:var(--ink-2)}
.game-research-grid a{font:400 12px/1.6 var(--sans);color:var(--ink-3);text-underline-offset:3px;overflow-wrap:anywhere}
.game-research>.game-note{padding-bottom:20px}

.game-showcase a:focus-visible,.game-showcase summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}

@media (max-width:1100px){
 .game-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .game-research-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
 /* 휴대폰: 작은 장면을 왼쪽에 둔 한 줄 카드로 일곱 게임을 한눈에. 사실 칩은 접는다. */
 .game-cards{grid-template-columns:1fr;gap:10px}
 .game-card{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start}
 .game-card-image{margin:12px 0 12px 12px;border-radius:calc(var(--radius) - 4px)}
 .game-card-body{gap:5px;padding:12px 14px 14px}
 .game-card h4{font-size:18px}
 .game-card p{font-size:14px;line-height:1.6}
 .game-facts{display:none}
 .game-card-actions{padding-top:4px}
 .game-showcase .game-card .primary-link{min-height:40px}
 .game-card-next{display:flex;padding:14px 16px}
 .game-practice ol{grid-template-columns:1fr}
 .game-practice li,.game-practice li+li{padding:16px 0;border-left:0;border-bottom:var(--hair) solid var(--line)}
}