/*
 * 앱 개발 교재(/appdev, /appdev/{html,server,client} 와 그 탭 페이지 /appdev/<과목>/<탭>) — 이전 사이트 routes/appdev/+page.svelte · components/appdev/AppDevShell.svelte 의 스타일을 옮겼다.
 * 선택자는 .appdev-hub(허브)·.appdev(과목 화면) 아래로 좁힌다. 과목마다 강조색은 [data-topic] 이 정한다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur). 코드 창은 dir="ltr" 이라 그 안의 막대·점은 늘 왼쪽→오른쪽이다.
 * Web Awesome 의 기본 요소 스타일(li 들여쓰기·pre/code 바탕·작은 th 글자)은 이 화면의 블록 안에서 되돌린다.
 */

/* ── 과목 강조색 ─────────────────────────────────── */
/* --accent·--accent-2 는 과목의 색 그대로(테두리·옅은 배경), 나머지는 거기서 만든다 —
   글자·아이콘은 본문색과 섞어 밝은 화면·어두운 화면 모두에서 읽히게(--accent-ink),
   흰 글자를 올리는 채움은 어둡게 눌러 대비를 지킨다(--accent-fill). 같은 요소에서 다시 계산해야 과목마다 색이 바뀐다. */
.appdev,
:is(.appdev-hub, .appdev) [data-topic] {
	--accent: #f97316;
	--accent-2: #ef4444;
}
.appdev[data-topic='server'],
:is(.appdev-hub, .appdev) [data-topic='server'] {
	--accent: #0ea5e9;
	--accent-2: #2563eb;
}
.appdev[data-topic='client'],
:is(.appdev-hub, .appdev) [data-topic='client'] {
	--accent: #10b981;
	--accent-2: #0d9488;
}
.appdev,
:is(.appdev-hub, .appdev) [data-topic] {
	--accent-ink: color-mix(in srgb, var(--accent) 62%, var(--pes-ink));
	--accent-fill: color-mix(in srgb, var(--accent) 75%, #000);
	--accent-fill-2: color-mix(in srgb, var(--accent-2) 80%, #000);
}

/* ── 허브 ─────────────────────────────────────── */
.appdev-hub {
	max-inline-size: 68rem;
	display: grid;
	gap: var(--wa-space-2xl);
}
.appdev-hub .appdev-hub-tagline {
	margin: 0;
	font-size: var(--wa-font-size-l);
	font-weight: 600;
	color: var(--pes-ink);
}

/* 이 교재의 핵심 주장 — 주황(문서)에서 하늘(서버)로 번지는 상자 */
.appdev-hub .appdev-creed {
	display: grid;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-l);
	border: 1px solid color-mix(in srgb, #f97316 26%, var(--pes-border));
	border-radius: var(--pes-radius-card);
	background: linear-gradient(
		135deg,
		color-mix(in srgb, #f97316 12%, var(--pes-canvas)),
		color-mix(in srgb, #0ea5e9 8%, var(--pes-canvas))
	);
}
.appdev-creed strong {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	font-size: var(--wa-font-size-l);
	color: color-mix(in srgb, #ea580c 70%, var(--pes-ink));
}
.appdev-creed p {
	margin: 0;
	line-height: 1.8;
}

.appdev-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wa-space-l);
}
.appdev-hub-card .pes-icon-tile {
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--pes-radius-card);
	font-size: 1.4rem;
	color: #fff;
	background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2));
}
.appdev-hub a.appdev-hub-card:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.appdev-hub-title {
	font-size: var(--wa-font-size-l);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.appdev-hub-card .pes-card-link {
	color: var(--accent-ink);
}

/* 배우는 순서 — 세 칸, 번호는 과목 색 */
.appdev-order {
	display: grid;
	gap: var(--wa-space-m);
}
.appdev-order h2 {
	margin: 0;
	font-size: var(--wa-font-size-xl);
	font-weight: 700;
}
.appdev-order > p {
	margin: 0;
	line-height: 1.8;
	color: var(--pes-muted);
}
.appdev-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: appdev-step;
}
.appdev-steps li {
	position: relative;
	margin: 0;
	display: grid;
	gap: var(--wa-space-3xs);
	align-content: start;
	padding-block: var(--wa-space-l);
	padding-inline: 3rem var(--wa-space-l);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.appdev-steps li::before {
	counter-increment: appdev-step;
	content: counter(appdev-step);
	position: absolute;
	inset-inline-start: var(--wa-space-m);
	inset-block-start: var(--wa-space-l);
	inline-size: 1.6rem;
	block-size: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2));
}
.appdev-steps span {
	font-size: var(--wa-font-size-s);
	line-height: 1.7;
	color: var(--pes-muted);
}

/* 바이브 코딩(이 대분류의 머리)과 터미널 기초(쉘)로 가는 글자 링크 */
.appdev-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-m) var(--wa-space-xl);
}
.appdev-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	color: var(--pes-accent-ink);
	text-decoration: none;
}
.appdev-links a:hover {
	text-decoration: underline;
}

/* ── 과목 화면 틀 ─────────────────────────────────── */
.appdev {
	max-inline-size: 58rem;
	display: grid;
	gap: var(--wa-space-xl);
}
.appdev-back {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	justify-self: start;
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	color: var(--pes-muted);
	text-decoration: none;
}
.appdev-back:hover {
	color: var(--accent-ink);
}

.appdev .appdev-hero {
	gap: var(--wa-space-xs);
	margin: 0;
	padding-block-end: var(--wa-space-l);
}
.appdev-hero .pes-eyebrow {
	color: var(--accent-ink);
}
.appdev .appdev-hero h1 {
	font-size: clamp(1.6rem, 3.8vw, 2.5rem);
	background: linear-gradient(135deg, var(--accent-ink), color-mix(in srgb, var(--accent-2) 62%, var(--pes-ink)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.appdev .appdev-tagline {
	margin: 0;
	font-size: var(--wa-font-size-l);
	font-weight: 600;
	color: var(--pes-ink);
}
.appdev .appdev-intro {
	margin: 0;
	max-inline-size: none;
	line-height: 1.8;
	color: var(--pes-muted);
}

/* 탭바 — 이 과목의 하위 분류. 탭마다 주소가 있는 링크이고 지금 탭은 aria-current="page".
   누르면 새로 고침 없이 본문만 바뀐다. 좁은 화면에서는 가로로 밀어 본다(지금 탭은 public/js/pages/appdev.js 가 가운데로 민다). */
.appdev-tabbar {
	display: flex;
	gap: var(--wa-space-3xs);
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0.2rem 0.2rem var(--wa-space-xs);
	border-block-end: 1px solid var(--pes-border);
}
.appdev-tabbar::-webkit-scrollbar {
	display: none;
}
.appdev-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	flex: 0 0 auto;
	min-block-size: 2.5rem;
	padding: var(--wa-space-xs) var(--wa-space-m);
	border: none;
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	color: var(--pes-muted);
	font: inherit;
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--pes-motion),
		color var(--pes-motion);
}
.appdev-tab:hover {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent-ink);
}
.appdev-tab[aria-current='page'] {
	color: #fff;
	background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2));
}
.appdev-tab:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 1px;
}
.appdev-tab i {
	font-size: 0.95em;
}

.appdev-body {
	display: grid;
	min-inline-size: 0;
}
/* 탭 본문 — 한 페이지에 모두 있고 지금 탭만 보인다. 이전·다음을 누르면 탭바가 위에 오도록 올라간다(머리 메뉴에 가리지 않게) */
.appdev-panel {
	display: grid;
	gap: var(--wa-space-2xl);
	min-inline-size: 0;
}
.appdev-panel[hidden] {
	display: none;
}
.appdev-panel:focus {
	outline: none;
}
.appdev .appdev-tabbar {
	scroll-margin-block-start: 6rem;
}

/* ── 본문 블록 — 세 과목이 같은 블록을 쓴다 ─────────────── */
.appdev-section {
	display: grid;
	gap: var(--wa-space-m);
	min-inline-size: 0;
}
.appdev-section > h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	font-size: var(--wa-font-size-xl);
	font-weight: 700;
}
.appdev-section > h2 > i {
	color: var(--accent-ink);
}
.appdev-section > h3 {
	margin: var(--wa-space-s) 0 0;
	font-size: var(--wa-font-size-l);
	font-weight: 600;
}
.appdev-section > p {
	margin: 0;
	line-height: 1.85;
}
.appdev .appdev-quiet {
	color: var(--pes-muted);
}

/* 아이콘 글머리 목록 */
.appdev-points {
	display: grid;
	gap: var(--wa-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.appdev-points > li {
	display: flex;
	margin: 0;
	align-items: flex-start;
	gap: var(--wa-space-xs);
	line-height: 1.7;
}
.appdev-points > li > i {
	flex: 0 0 auto;
	margin-block-start: 0.35rem;
	color: var(--accent-ink);
}

/* 카드 */
.appdev-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.appdev-card {
	display: grid;
	align-content: start;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-l);
}
.appdev-card > strong {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	font-size: var(--wa-font-size-m);
	font-weight: 600;
}
.appdev-card > strong > i {
	color: var(--accent-ink);
}
.appdev-card > span {
	font-size: var(--wa-font-size-s);
	line-height: 1.7;
	color: var(--pes-muted);
}

/* 강조 상자 — 과목 색으로 물든 알림 */
.appdev .appdev-note {
	display: grid;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-l);
	border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--pes-border));
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--pes-radius-card);
	background: color-mix(in srgb, var(--accent) 9%, var(--pes-canvas));
}
.appdev-note > strong {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	color: var(--accent-ink);
}
.appdev-note p {
	margin: 0;
	line-height: 1.8;
}

/* 표 — 좁은 화면에서는 가로로 밀어 본다 */
.appdev-table {
	overflow-x: auto;
}
.appdev-table table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--wa-font-size-s);
}
.appdev-table :is(th, td) {
	padding: var(--wa-space-xs) var(--wa-space-s);
	font-size: inherit;
	text-align: start;
	vertical-align: top;
	line-height: 1.65;
	border-block-end: 1px solid var(--pes-border);
}
.appdev-table thead th {
	font-weight: 600;
	white-space: nowrap;
	color: var(--pes-muted);
}
.appdev-table tbody th {
	font-weight: 600;
}
/* 태그·명령어·상태 코드 칸 — 문서 방향(RTL)에 맡기면 읽을 수 없게 뒤집힌다 */
.appdev-table code {
	padding: 0;
	background: none;
	font-family: var(--wa-font-family-code);
	font-size: 0.95em;
	font-weight: 500;
	color: var(--accent-ink);
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap; /* -X POST -d 처럼 하이픈에서 줄이 끊기면 다른 옵션처럼 읽힌다 — 좁으면 표가 가로로 밀린다 */
}

/* ── 코드 창 — 예제 소스를 터미널 창 모양으로. 테마와 관계없이 늘 어둡다 ─── */
.appdev-code {
	margin: 0;
	min-inline-size: 0;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--pes-radius-card);
	overflow: hidden;
	background: #0d1117;
}
.appdev-code figcaption {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	padding: 0.55rem 0.9rem;
	border-block-end: 1px solid rgb(255 255 255 / 0.1);
	background: rgb(255 255 255 / 0.06);
	font-family: var(--wa-font-family-code);
	font-size: 0.78rem;
	color: rgb(230 237 243 / 0.75);
}
/* 창 막대의 점 세 개 — 점 하나를 그리고 그림자로 둘을 더한다 */
.appdev-code-dots {
	flex: 0 0 auto;
	inline-size: 2.44rem;
}
.appdev-code-dots::before {
	content: '';
	display: block;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.22);
	box-shadow:
		0.92rem 0 0 rgb(255 255 255 / 0.22),
		1.84rem 0 0 rgb(255 255 255 / 0.22);
}
.appdev-code pre {
	margin: 0;
	border-radius: 0;
	background: none;
	padding: 1rem 1.1rem;
	overflow-x: auto;
	text-align: start;
	tab-size: 4;
}
.appdev-code code {
	font-family: var(--wa-font-family-code);
	font-size: 0.8rem;
	line-height: 1.7;
	color: #e6edf3;
	white-space: pre;
}

/* ── 줄별 해설 · 단계 — 번호 동그라미 + 코드 조각(또는 소제목) + 설명 ─── */
.appdev-lines {
	display: grid;
	gap: var(--wa-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: appdev-line;
}
.appdev-lines > li {
	position: relative;
	margin: 0;
	display: grid;
	gap: 0.25rem;
	padding-block: 0.8rem;
	padding-inline: 2.6rem 1rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
}
.appdev-lines > li::before {
	counter-increment: appdev-line;
	content: counter(appdev-line);
	position: absolute;
	inset-inline-start: 0.75rem;
	inset-block-start: 0.8rem;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2));
}
.appdev-lines code {
	justify-self: start;
	padding: 0;
	background: none;
	font-family: var(--wa-font-family-code);
	font-size: 0.8rem;
	color: var(--accent-ink);
	direction: ltr;
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}
.appdev-lines > li > strong {
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	color: var(--accent-ink);
}
.appdev-lines > li > span {
	font-size: var(--wa-font-size-s);
	line-height: 1.7;
	color: var(--pes-muted);
}

/* 번호는 그 언어의 숫자로 — 벵골어만 사이트의 숫자 표기(Number::format)가 다르다 */
:lang(bn) .appdev-steps li::before {
	content: counter(appdev-step, bengali);
}
:lang(bn) .appdev-lines > li::before {
	content: counter(appdev-line, bengali);
}

/* 다음 과목·관련 화면으로 가는 단추 */
.appdev-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	justify-self: start;
	padding: var(--wa-space-xs) var(--wa-space-m);
	border-radius: var(--wa-border-radius-pill);
	background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2));
	color: #fff;
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	text-decoration: none;
	transition: filter var(--pes-motion);
}
.appdev-cta:hover {
	filter: brightness(1.12);
}

/* ── Docker 탭 ──────────────────────────────────── */
/* 낱말 네 개 — 번호 대신 낱말의 아이콘을 소제목 앞에 둔다 */
.appdev-words > li > strong {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
}
/* 프로젝트 1·2 — 앞 절과 가는 선으로 떼어 새 실습이 시작됨을 보인다 */
.appdev-panel > .appdev-project {
	padding-block-start: var(--wa-space-xl);
	border-block-start: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--pes-border));
}
.appdev-project > h2 {
	color: var(--accent-ink);
}
/* 되돌리기 어려운 일을 막는 경고 — 과목 색 대신 경고 색 */
.appdev .appdev-warn {
	border-color: color-mix(in srgb, var(--wa-color-warning-fill-loud) 35%, var(--pes-border));
	border-inline-start-color: var(--wa-color-warning-fill-loud);
	background: color-mix(in srgb, var(--wa-color-warning-fill-loud) 9%, var(--pes-canvas));
}
.appdev .appdev-warn > strong {
	color: var(--wa-color-warning-on-quiet);
}

/* ── 이전 · 다음 탭 ───────────────────────────────── */
.appdev-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.appdev-pager a {
	display: grid;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-m) var(--wa-space-l);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--pes-motion);
}
.appdev-pager a:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.appdev-pager a:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}
.appdev-pager small {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-size: var(--wa-font-size-xs);
	color: var(--pes-muted);
}
.appdev-pager strong {
	font-weight: 600;
	color: var(--accent-ink);
}
/* 다음 탭은 늘 끝 칸 — 첫 탭에서 "이전"이 없어도 오른쪽(ar·ur 은 왼쪽)에 붙는다 */
.appdev-pager-next {
	grid-column: 2;
	justify-items: end;
	text-align: end;
}
/* ── 이해했어요 · 다른 주제 ─────────────────────────── */
.appdev .study-step-check {
	margin: 0;
}
.appdev-siblings h2 {
	margin: 0 0 var(--wa-space-m);
	font-size: var(--wa-font-size-xl);
	font-weight: 700;
}
.appdev-sibling-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.appdev-sibling {
	display: grid;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-l);
}
.appdev a.appdev-sibling:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.appdev-sibling-icon {
	font-size: 1.4rem;
	color: var(--accent-ink);
}
.appdev-sibling small {
	line-height: 1.5;
	color: var(--pes-muted);
}

/* ── 좁은 화면 ─────────────────────────────────── */
@media (max-width: 900px) {
	.appdev-hub-grid,
	.appdev-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 800px) {
	.appdev-cards,
	.appdev-sibling-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 480px) {
	.appdev-pager a {
		padding: var(--wa-space-s) var(--wa-space-m);
	}
}
/* 코드 칸이 있는 표(태그·상태 코드·명령어·옵션)는 좁은 화면에서 줄마다 코드 → 설명으로 쌓는다 —
   코드를 한 줄로 지키면서 설명 칸이 몇 글자 폭으로 짜부라지지 않게 */
@media (max-width: 640px) {
	.appdev-table:has(tbody th code) :is(table, tbody, tr, th, td) {
		display: block;
	}
	.appdev-table:has(tbody th code) thead {
		display: none;
	}
	.appdev-table:has(tbody th code) tr {
		padding-block: var(--wa-space-xs);
		border-block-end: 1px solid var(--pes-border);
	}
	.appdev-table:has(tbody th code) :is(th, td) {
		padding-block: var(--wa-space-3xs);
		border-block-end: none;
	}
}

/* ── 앱 개발 — 탭과 작은 본문 대비 ───────────────────── */
.appdev .appdev-tabbar { scrollbar-width: thin; }
.appdev .appdev-tab { min-block-size: 2.75rem; }
.appdev-hub .appdev-hub-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.appdev .appdev-panel { line-height: 1.85; }