/*
 * GIT 교재(/git, /git/{단계}) — 이전 사이트 routes/git/+page.svelte · routes/git/[step]/+page.svelte 의 스타일을 옮겼다.
 * 선택자는 .git-hub · .git-lesson 아래로 좁힌다(app.css 의 .pager 등과 겹치지 않게).
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur). 명령어는 어느 언어에서나 왼쪽→오른쪽으로 읽는다.
 */

.git-hub,
.git-lesson {
	--git-accent: #f05033; /* GIT 브랜드 계열 주황 */
	--git-accent-2: #b4351f;
	--git-accent-ink: color-mix(in srgb, var(--git-accent) 82%, var(--wa-color-text-normal));
	--git-accent-soft: color-mix(in srgb, var(--git-accent) 8%, var(--wa-color-surface-default));
	--git-accent-line: color-mix(in srgb, var(--git-accent) 22%, var(--wa-color-surface-border));
	display: grid;
	gap: var(--wa-space-2xl);
}

.git-hub :is(h2, h3),
.git-lesson :is(h2, h3) {
	margin: 0;
}

/* ── 허브 ─────────────────────────────────────── */
.git-hub {
	max-inline-size: 72rem;
}
.git-hero .pes-eyebrow {
	color: var(--git-accent-ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.git-hero h1 {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	background: linear-gradient(135deg, var(--git-accent), var(--git-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	inline-size: fit-content;
}
.git-hero .git-tagline {
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-normal);
}
.git-hero .git-intro {
	max-inline-size: 46rem;
}

.git-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
	margin: var(--wa-space-2xs) 0 0;
}
.git-facts > div {
	display: grid;
	gap: 2px;
	padding: var(--wa-space-xs) var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
}
.git-facts dt {
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
}
.git-facts dd {
	margin: 0;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}

.git-why {
	padding: var(--wa-space-l);
	border: var(--wa-border-width-s) solid var(--git-accent-line);
	border-radius: var(--wa-border-radius-l);
	background: var(--git-accent-soft);
}
.git-why h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin-block-end: var(--wa-space-2xs);
	font-size: var(--wa-font-size-l);
	color: var(--git-accent-ink);
}
.git-why p {
	margin: 0;
	line-height: 1.75;
}

.git-steps-section h2 {
	margin-block-end: var(--wa-space-m);
	font-size: var(--wa-font-size-xl);
}
.git-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.git-steps > li {
	display: flex;
	min-inline-size: 0;
	margin: 0; /* Web Awesome 기본 목록 여백을 지운다 — 카드가 머리와 같은 선에서 시작한다 */
}
.git-step-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wa-space-2xs);
	inline-size: 100%;
	padding: var(--wa-space-l);
	box-sizing: border-box;
	color: inherit;
}
.git-hub :is(a, button).git-step-card:hover {
	border-color: color-mix(in srgb, var(--git-accent) 50%, transparent);
}
.git-step-level {
	position: absolute;
	inset-block-start: var(--wa-space-m);
	inset-inline-end: var(--wa-space-m);
	display: inline-grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-bold);
}
.git-step-icon {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--wa-border-radius-l);
	background: linear-gradient(135deg, var(--git-accent), var(--git-accent-2));
	color: #fff;
	font-size: 1.25rem;
}
.git-step-title {
	margin-block-start: var(--wa-space-2xs);
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.45;
}
.git-step-summary {
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
	color: var(--wa-color-text-quiet);
}
.git-step-go {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-3xs);
	margin-block-start: auto;
	padding-block-start: var(--wa-space-2xs);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--git-accent-ink);
}

@media (max-width: 1000px) {
	.git-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.git-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── 단계 상세 ─────────────────────────────────── */
.git-lesson {
	gap: var(--wa-space-xl);
}
.git-lesson code {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--wa-font-family-code);
}
.git-back {
	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);
	color: var(--wa-color-text-quiet);
	text-decoration: none;
}
.git-back:hover {
	color: var(--git-accent-ink);
}

.git-lesson-head {
	margin: 0;
}
.git-level-pill {
	justify-self: start;
	padding: var(--wa-space-3xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-pill);
	background: linear-gradient(135deg, var(--git-accent), var(--git-accent-2));
	color: #fff;
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-bold);
}
.git-lesson-head h1 {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}
.git-lesson-head .pes-lead {
	font-size: var(--wa-font-size-l);
	line-height: 1.7;
}

.git-goals {
	padding: var(--wa-space-l);
	border: var(--wa-border-width-s) solid var(--git-accent-line);
	border-radius: var(--wa-border-radius-l);
	background: var(--git-accent-soft);
}
.git-goals h2,
.git-commands h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin-block-end: var(--wa-space-s);
	font-size: var(--wa-font-size-l);
	color: var(--git-accent-ink);
}
.git-goals ul {
	display: grid;
	gap: var(--wa-space-2xs);
	margin: 0;
	padding-inline-start: 1.25rem;
	line-height: 1.65;
}

.git-body {
	display: grid;
	gap: var(--wa-space-m);
}
.git-body p {
	margin: 0;
	line-height: 1.85;
}
/* 본문 속 명령어 — 짧은 것은 한 덩어리로 줄을 넘기고(git / add 로 갈라지지 않게), 한 줄보다 긴 것만 안에서 줄을 바꾼다 */
.git-lesson :is(.git-body, .git-goals, .git-cmd dd) code {
	display: inline-block;
	max-inline-size: 100%;
	box-sizing: border-box;
	padding: 0 0.35em;
	border-radius: var(--wa-border-radius-s);
	background: color-mix(in srgb, var(--git-accent) 10%, var(--wa-color-surface-raised));
	font-size: 0.9em;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.git-commands dl {
	display: grid;
	gap: var(--wa-space-xs);
	margin: 0;
}
.git-commands-note {
	margin: 0 0 var(--wa-space-m);
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-text-quiet);
}
.git-cmd {
	display: grid;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	min-inline-size: 0;
}
.git-cmd dt {
	overflow-x: auto;
}
.git-cmd dt code {
	display: inline-block;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--git-accent-ink);
	white-space: pre;
}
.git-cmd dd {
	margin: 0;
	font-size: var(--wa-font-size-s);
	line-height: 1.65;
	color: var(--wa-color-text-quiet);
}

.git-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.git-pager-link {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-inline-size: 0;
	padding: var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--pes-motion);
}
.git-pager-link:hover {
	border-color: color-mix(in srgb, var(--git-accent) 50%, transparent);
}
.git-pager-link.next {
	grid-column: 2;
	justify-content: flex-end;
	text-align: end;
}
.git-pager-link > span {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}
.git-pager-link small {
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
}
.git-pager-link strong {
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}

@media (max-width: 700px) {
	.git-pager {
		grid-template-columns: minmax(0, 1fr);
	}
	.git-pager > span:empty {
		display: none;
	}
	.git-pager-link.next {
		grid-column: auto;
	}
}