/*
 * 공부 게임(/game) — resources/views/game/index.blade.php 만 읽는다(SONUB-SSOT.md 23절 "공부 게임"). 선택자는 .study-games 아래로 좁힌다.
 * 게임 카드의 모양은 위젯 CSS(public/css/pages/typing-game-cards.css)가 맡는다. 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 공부 게임 ───────────────────────────────────── */
.study-games {
	display: grid;
	gap: var(--wa-space-2xl);
	max-inline-size: 70rem;
}

.study-games .games-section {
	display: grid;
	gap: var(--wa-space-m);
}

.study-games .games-section-head {
	display: grid;
	gap: var(--wa-space-2xs);
}

.study-games .games-section-head h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	font-size: var(--wa-font-size-xl);
}

.study-games .games-section-head h2 .fa-keyboard {
	color: var(--wa-color-brand-fill-loud);
}

.study-games .games-section-head p {
	margin: 0;
	color: var(--wa-color-text-quiet);
}

.study-games .games-more {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	justify-self: start;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}

.study-games .games-more:hover {
	text-decoration: underline;
}

/* ── 스터디 타운 카드 — 농장(/study-town)으로 가는 문 ─────── */
.study-games .games-section-head h2 .fa-egg {
	color: var(--wa-color-warning-fill-loud);
}

.study-games .games-town-card {
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
	padding: var(--wa-space-l);
	color: inherit;
	text-decoration: none;
}

.study-games .games-town-card:hover {
	border-color: var(--wa-color-brand-border-loud);
}

.study-games .games-town-icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-success-fill-quiet);
	color: var(--wa-color-success-on-quiet);
	font-size: var(--wa-font-size-xl);
}

.study-games .games-town-text {
	display: grid;
	flex: 1;
	gap: var(--wa-space-3xs);
}

.study-games .games-town-text small {
	color: var(--wa-color-text-quiet);
}

.study-games .games-town-go {
	color: var(--wa-color-brand-fill-loud);
}

/* ── 게임으로 공부하는 요령 — 그림 옆에 요령 넷(좁은 화면은 그림 위, 요령 아래) ─────── */
.study-games .games-tips-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wa-space-l);
	align-items: start;
}

.study-games .games-tips-body .sonub-figure {
	margin: 0;
}

.study-games .games-tip-list {
	display: grid;
	gap: var(--wa-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.study-games .games-tip-list li {
	display: grid;
	gap: var(--wa-space-3xs);
	margin: 0;
	padding: var(--wa-space-s) var(--wa-space-m);
	border-radius: var(--wa-border-radius-l);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	background: var(--wa-color-surface-default);
}

.study-games .games-tip-list h3 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	font-size: var(--wa-font-size-m);
}

.study-games .games-tip-list h3 .fa-solid {
	color: var(--wa-color-brand-fill-loud);
}

.study-games .games-tip-list p {
	margin: 0;
	line-height: 1.7;
	color: var(--wa-color-text-quiet);
}

.study-games .games-tip-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	justify-self: start;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}

.study-games .games-tip-list a:hover {
	text-decoration: underline;
}

@media (max-width: 760px) {
	.study-games .games-tips-body {
		grid-template-columns: minmax(0, 1fr);
	}
}