/*
 * 영어 강사 사이트(okayteacher.com · layouts.okayteacher)의 틀 — 위 막대(로고 · 단계 안내 · 도구) 아래에 왼쪽 강사 메뉴(강사 사이트와 같은 묶음 다섯 개 · 사이트 통계)와 넓은 본문.
 * 좁은 화면(60rem 미만)에서는 메뉴가 막대 아래로 올라와 가로로 흐른다. SSOT 11절 "영어 교육 브랜드 사이트". 색·로고·바닥글은 okay.css, 메뉴 묶음 제목·통계 모양은 sites.css.
 */
.okay-teacher {
	--okay-width: 92rem;
	--okay-side: 15rem;
	background: var(--wa-color-surface-default);
}

/* 위 막대 — 단계 안내(x-widget.teach.signup-steps)는 로고와 도구 사이 가운데 */
.okay-teacher .okay-bar .site-tools { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.okay-teacher .okay-bar .teach-signup-steps { margin-inline: auto; }

/* 왼쪽 메뉴 + 본문 */
.okay-work {
	display: grid;
	grid-template-columns: var(--okay-side) minmax(0, 1fr);
	flex: 1 0 auto;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--okay-width);
	margin-inline: auto;
}
.okay-side {
	position: sticky;
	inset-block-start: var(--okay-bar-height, 3.6rem);
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-xl);
	box-sizing: border-box;
	max-block-size: calc(100vh - var(--okay-bar-height, 3.6rem));
	padding: var(--wa-space-l) var(--wa-space-s);
	overflow-y: auto;
	border-inline-end: 1px solid var(--wa-color-surface-border);
	scrollbar-width: thin;
}
.okay-side .site-nav { flex-direction: column; gap: var(--wa-space-l); }
.okay-side .site-nav-item {
	gap: var(--wa-space-s);
	padding: var(--wa-space-2xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	line-height: 1.35;
}
.okay-side .site-nav-item i { flex-shrink: 0; inline-size: 1.25rem; text-align: center; color: var(--site-accent); }
.okay-teacher .okay-content { inline-size: 100%; max-inline-size: none; box-sizing: border-box; }

/* 좁은 화면 — 메뉴가 막대 아래 가로 줄이 되고(묶음 제목은 sites.css 가 숨기고 세로선으로 나눈다), 통계는 숨긴다 */
@media (max-width: 60rem) {
	.okay-work { grid-template-columns: minmax(0, 1fr); }
	.okay-side {
		position: static;
		max-block-size: none;
		padding: var(--wa-space-xs) var(--wa-space-m);
		overflow: visible;
		border-inline-end: 0;
		border-block-end: 1px solid var(--wa-color-surface-border);
		background: var(--wa-color-surface-raised);
	}
	.okay-side .site-nav { flex-direction: row; gap: var(--wa-space-xs); overflow-x: auto; padding-block: var(--wa-space-2xs); }
	.okay-side .site-nav-item { flex: 0 0 auto; white-space: nowrap; }
	/* 막대 — 단계 안내가 맨 위 한 줄, 그 아래 로고 · 도구. 도구 묶음을 풀어(display: contents) 안내가 막대 폭을 다 쓰게 한다 */
	.okay-teacher .okay-bar-inner { flex-wrap: wrap; gap: var(--wa-space-2xs) var(--wa-space-xs); }
	.okay-teacher .okay-bar .site-tools { display: contents; }
	.okay-teacher .okay-brand { margin-inline-end: auto; }
	.okay-teacher .okay-bar .teach-signup-steps { order: -1; flex: 1 0 100%; justify-content: center; margin: 0; padding-block: var(--wa-space-3xs); white-space: normal; text-align: center; }
}