/*
 * 파이썬 공부(/python) — 이전 사이트 web/src/routes/python/+page.svelte · components/python/LiveCoder.svelte 의 스타일을 옮겼다.
 * resources/views/python/index.blade.php 만 읽는다. 선택자는 .python-course 아래로 좁힌다.
 * 방향이 있는 속성은 논리 속성만(ar·ur). 색은 --pes-* / Web Awesome 토큰 — 다크 테마에서도 읽혀야 한다.
 * 코드·출력·오류는 오른쪽→왼쪽 언어에서도 왼쪽부터 쓴다(dir="ltr").
 */

/* ── 틀 · 단계 색 ───────────────────────────────── */
.python-course {
	/* 코드·출력 글꼴. 설명 문장은 본문 글꼴로 둔다 — 고정폭 글꼴이 앞에 오면 크롬이 아랍 글자를 이어 쓰지 않는다 */
	--py-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	--accent: var(--pes-accent);
	max-inline-size: 72rem;
	display: grid;
	gap: var(--pes-space-6);
}
.python-course > section {
	display: grid;
	gap: var(--pes-space-6);
	min-inline-size: 0;
}

/* 단계마다 다른 색(학습을 다채롭게) — 카드의 data-accent, 실습 화면의 data-accent */
.python-course [data-accent='1'] { --accent: #6c8cff; }
.python-course [data-accent='2'] { --accent: #22c55e; }
.python-course [data-accent='3'] { --accent: #f59e0b; }
.python-course [data-accent='4'] { --accent: #ec4899; }
.python-course [data-accent='5'] { --accent: #14b8a6; }
.python-course [data-accent='6'] { --accent: #8b5cf6; }
.python-course [data-accent='7'] { --accent: #ef4444; }
.python-course [data-accent='8'] { --accent: #0ea5e9; }
.python-course [data-accent='9'] { --accent: #f5b301; }

/* 화살표는 오른쪽→왼쪽 언어에서 뒤집는다 */
[dir='rtl'] .python-course :is(.fa-arrow-left, .fa-arrow-right) { transform: scaleX(-1); }

/* ── 진도 대시보드 ──────────────────────────────── */
.python-course .py-hero { margin: 0; }
.python-course .py-hero .pes-lead strong { color: var(--pes-ink); }

.python-course .py-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pes-space-4);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-subtle);
}
.python-course .py-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0;
}
.python-course .py-stats > div {
	display: flex;
	flex-direction: column-reverse; /* 값이 위, 이름이 아래 */
	gap: 0.2rem;
}
.python-course .py-stats dt {
	font-size: 0.75rem;
	color: var(--pes-muted);
}
.python-course .py-stats dd {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.python-course .py-continue {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	padding: 0.55rem 1.1rem;
	border: none;
	border-radius: var(--pes-radius-card);
	background: linear-gradient(135deg, var(--pes-accent), #57d998);
	color: #fff;
	font: inherit;
	text-align: start;
	cursor: pointer;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--pes-accent) 35%, transparent);
	transition:
		transform var(--pes-motion-fast),
		box-shadow var(--pes-motion);
}
.python-course .py-continue:hover {
	transform: var(--pes-lift);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--pes-accent) 45%, transparent);
}
.python-course .py-continue-label { font-size: 0.88rem; font-weight: 800; }
.python-course .py-continue-step { font-size: 0.78rem; opacity: 0.92; }

.python-course .py-track {
	block-size: 0.55rem;
	border-radius: 999px;
	background: var(--pes-subtle);
	overflow: hidden;
}
.python-course .py-fill {
	--pct: 0%;
	inline-size: var(--pct);
	block-size: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pes-accent), #57d998);
	transition: inline-size 0.4s ease;
}

/* ── 단계 카드 ──────────────────────────────────── */
.python-course .py-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--pes-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.python-course .py-grid > li { display: flex; min-inline-size: 0; }
.python-course .py-card {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: 1.15rem 1.2rem 1.1rem;
	overflow: hidden;
	color: var(--pes-ink);
}
.python-course .py-card::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--accent);
	opacity: 0.85;
}
.python-course .py-card:hover { border-color: var(--accent); }
.python-course .py-card.done { border-color: var(--wa-color-success-fill-loud); }
.python-course .py-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 0.65rem;
}
.python-course .py-emoji {
	display: inline-grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 0.7rem;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	font-size: 1.6rem;
	line-height: 1;
}
.python-course .py-card-mark { color: var(--wa-color-success-fill-loud); font-size: 1.35rem; }
.python-course .py-card-arrow {
	color: var(--pes-muted);
	transition:
		transform var(--pes-motion),
		color var(--pes-motion);
}
.python-course .py-card:hover .py-card-arrow { color: var(--accent); transform: translateX(3px); }
[dir='rtl'] .python-course .py-card:hover .py-card-arrow { transform: translateX(-3px); }
.python-course .py-card-title {
	margin-block-end: 0.3rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}
.python-course .py-card-tagline {
	min-block-size: 2.4em;
	margin-block-end: 0.85rem;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--pes-muted);
}
.python-course .py-card-foot {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: auto;
	padding-block-start: 0.7rem;
	border-block-start: 1px solid var(--pes-border);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--pes-muted);
}
.python-course .py-card-foot i { color: var(--accent); }
.python-course .py-card.done .py-card-foot i { color: var(--wa-color-success-fill-loud); }

.python-course .py-footnote {
	display: flex;
	align-items: flex-start;
	gap: var(--pes-space-2);
	margin: 0;
	padding: var(--pes-space-4);
	border-radius: var(--pes-radius-control);
	background: var(--pes-subtle);
	color: var(--pes-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}
.python-course .py-footnote i { margin-block-start: 0.25rem; }
.python-course .py-footnote a { color: var(--pes-accent-ink); font-weight: 600; }

/* ── 실습 화면 ──────────────────────────────────── */
.python-course .py-lesson { display: grid; gap: var(--pes-space-4); }
.python-course .py-lesson-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pes-space-3);
}
.python-course .py-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0;
	border: none;
	background: none;
	color: var(--pes-muted);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.python-course .py-back:hover { color: var(--pes-accent-ink); }
.python-course .py-step {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--accent);
}
.python-course .py-step-done { color: var(--wa-color-success-fill-loud); }

.python-course .py-celebrate {
	display: flex;
	align-items: center;
	gap: var(--pes-space-2);
	margin: 0;
	padding: var(--pes-space-3) var(--pes-space-4);
	border: 1px solid var(--accent);
	border-radius: var(--pes-radius-control);
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
	font-size: 0.9rem;
	font-weight: 600;
	animation: py-pop 0.3s ease;
}
@keyframes py-pop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.python-course .py-lesson-head {
	display: flex;
	align-items: center;
	gap: var(--pes-space-4);
}
.python-course .py-lesson-head .py-emoji {
	flex: 0 0 auto;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
	border-radius: var(--pes-radius-card);
	background: color-mix(in srgb, var(--accent) 16%, var(--pes-surface));
	font-size: 2rem;
}
.python-course .py-lesson-head h2 {
	margin: 0;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-weight: 750;
	line-height: 1.3;
}
.python-course .py-tagline {
	margin: 0.2rem 0 0;
	color: var(--pes-muted);
	font-size: 0.9rem;
}

.python-course .py-concept {
	display: grid;
	gap: var(--pes-space-3);
	padding: var(--pes-space-6);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-accent-soft);
}
.python-course .py-brief { margin: 0; line-height: 1.75; }
.python-course .py-goal {
	display: flex;
	align-items: flex-start;
	gap: var(--pes-space-2);
	margin: 0;
	padding: var(--pes-space-3) var(--pes-space-4);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	font-size: 0.92rem;
	line-height: 1.6;
}
.python-course .py-goal i { margin-block-start: 0.25rem; color: var(--accent); }

/* "이렇게 나오면 성공!" — 무엇을 만들지 먼저 그려 본다 */
.python-course .py-expect {
	display: grid;
	gap: var(--pes-space-2);
	padding: var(--pes-space-3) var(--pes-space-4);
	border: 1px dashed color-mix(in srgb, var(--wa-color-success-fill-loud) 40%, transparent);
	border-radius: var(--pes-radius-control);
	background: color-mix(in srgb, var(--wa-color-success-fill-loud) 8%, var(--pes-surface));
}
.python-course .py-expect-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--pes-success);
	font-size: 0.9rem;
}
.python-course .py-expect-body { display: grid; gap: 0.1rem; }
.python-course .py-expect-body p,
.python-course .py-hint-list :is(p, pre) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--pes-ink);
	text-align: start;
	unicode-bidi: plaintext; /* 줄마다 첫 글자의 방향으로 — 코드는 왼쪽부터, 아랍어 설명은 오른쪽부터 */
}
.python-course .py-expect-body p,
.python-course .py-hint-list pre { font-family: var(--py-code-font); }
.python-course .py-expect-body .py-expect-note { font-family: inherit; color: var(--pes-muted); }

.python-course .py-hints { display: grid; gap: var(--pes-space-2); justify-items: start; }
.python-course .py-hint-button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.6rem;
	border: none;
	border-radius: var(--pes-radius-control);
	background: none;
	color: var(--pes-accent-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.python-course .py-hint-button:hover { background: var(--pes-accent-soft); }
.python-course .py-hint-button i,
.python-course .py-hint-all i { color: var(--wa-color-warning-fill-loud); }
.python-course .py-hint-all {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--pes-muted);
	font-size: 0.9rem;
}
.python-course .py-hint-list {
	display: grid;
	gap: var(--pes-space-2);
	margin: 0;
	padding-inline-start: var(--pes-space-6);
}

/* ── 실시간 코더 ────────────────────────────────── */
.python-course .py-coder { display: grid; gap: var(--pes-space-4); min-inline-size: 0; }
.python-course .py-status {
	display: flex;
	align-items: center;
	gap: var(--pes-space-3);
	margin: 0;
	padding: var(--pes-space-3) var(--pes-space-4);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	font-size: 0.9rem;
}
.python-course .py-status[data-state='ready'],
.python-course .py-status[data-state='passed'] { border-color: var(--wa-color-success-fill-loud); }
.python-course .py-status[data-state='error'] { border-color: var(--wa-color-danger-fill-loud); color: var(--pes-danger); }
.python-course .py-status[data-state='ready'] .py-status-icon,
.python-course .py-status[data-state='passed'] .py-status-icon { color: var(--wa-color-success-fill-loud); }
.python-course .py-status[data-state='waiting'] .py-status-icon { color: var(--pes-accent-ink); }

.python-course .py-panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pes-space-6);
	align-items: start;
}
.python-course .py-panel { display: grid; gap: var(--pes-space-3); min-inline-size: 0; }
.python-course .py-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pes-space-3);
	min-block-size: 2.2rem;
}
.python-course .py-panel-head h3 {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 650;
}
.python-course .py-actions { display: flex; flex-wrap: wrap; gap: var(--pes-space-2); }
.python-course .py-actions .pes-button { min-block-size: 2.25rem; padding: 0.35rem 0.8rem; font-size: 0.84rem; }
.python-course .py-actions .py-plain { border-color: transparent; background: none; }
.python-course .py-editor { min-block-size: 16rem; }
.python-course .py-editor .cm-editor { min-block-size: 16rem; }

.python-course .py-output {
	min-block-size: 12rem;
	max-block-size: 28rem;
	margin: 0;
	padding: var(--pes-space-4);
	overflow: auto;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	white-space: pre-wrap;
	word-break: break-word;
	font-family: var(--py-code-font);
	font-size: 0.88rem;
	line-height: 1.6;
	text-align: start;
}
.python-course .py-output.muted { color: var(--pes-muted); font-family: inherit; unicode-bidi: plaintext; }

.python-course .py-check-note,
.python-course .py-error {
	display: flex;
	align-items: flex-start;
	gap: var(--pes-space-2);
	margin: 0;
	padding: var(--pes-space-3) var(--pes-space-4);
	border-radius: var(--pes-radius-control);
	font-size: 0.88rem;
	line-height: 1.6;
}
.python-course .py-check-note i,
.python-course .py-error i { margin-block-start: 0.25rem; }
.python-course .py-check-note { background: var(--pes-accent-soft); color: var(--pes-accent-ink); }
.python-course .py-error { background: var(--pes-warning-soft); color: var(--pes-warning); }
.python-course .py-error span {
	white-space: pre-wrap;
	word-break: break-word;
	font-family: var(--py-code-font);
	text-align: start;
}

.python-course .py-figures { display: grid; gap: var(--pes-space-3); }
.python-course .py-figures img {
	max-inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: #fff; /* matplotlib 그림은 흰 바탕이다 */
}

.python-course .py-lesson-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pes-space-3);
	margin-block-start: var(--pes-space-2);
}

/* ── 좁은 화면 ──────────────────────────────────── */
@media (max-width: 800px) {
	.python-course .py-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
	.python-course .py-panels { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.python-course .py-progress { padding: var(--pes-space-3); }
	.python-course .py-continue { inline-size: 100%; }
	.python-course .py-concept { padding: var(--pes-space-4); }
}