/*
 * 강사·학생·학생관리자 사이트(teacher·student·school 서브도메인)의 레이아웃 — SSOT 11절 "도메인·이름".
 * 본문은 메인과 같은 위젯이고, 여기서는 틀(메뉴·머리·본문 폭)과 사이트 색만 정한다. 논리 속성만 쓴다(RTL).
 * 세 사이트 모두 왼쪽 사이드바에 주요 메뉴를 세로로 두고, 사이트 색(--site-accent)과 본문 폭만 다르다(2026-10-14 사용자 지시).
 * 좁은 화면에서는 강사·학생관리자의 메뉴가 위로 올라와 가로로 흐르고, 학생 메뉴는 화면 아래 탭 막대가 된다.
 */
.site {
	--site-soft: color-mix(in srgb, var(--site-accent) 12%, var(--wa-color-surface-default));
	--site-on-accent: var(--wa-color-neutral-95);
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	min-block-size: 100vh;
	background: var(--wa-color-surface-lowered);
}
.site[data-site='teacher'] { --site-accent: var(--wa-color-cyan-30); }
.site[data-site='student'] { --site-accent: var(--wa-color-orange-40); }
.site[data-site='school'] { --site-accent: var(--wa-color-green-30); }

/* ── 공통 부품 ─────────────────────────────── */
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	color: inherit;
	font-weight: var(--wa-font-weight-bold);
	text-decoration: none;
	white-space: nowrap;
}
.site-brand img { inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--wa-border-radius-m); }
.site-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.site-brand small { font-size: var(--wa-font-size-2xs); font-weight: var(--wa-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }

.site-nav { display: flex; gap: var(--wa-space-2xs); }
.site-nav-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	color: inherit;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}
.site-nav-item i { inline-size: 1.25rem; text-align: center; }
.site-nav-item:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

.site-tools.topbar-tools {
	flex: 0 1 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	min-inline-size: 0;
	padding-inline-start: 0;
	border-inline-start: 0;
}
.site-main-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	padding-inline: var(--wa-space-s);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	text-decoration: none;
	white-space: nowrap;
}
.site-main-link:hover { color: var(--site-accent); }

.site-content {
	box-sizing: border-box;
	inline-size: 100%;
	padding: var(--wa-space-xl);
}
/* ── 왼쪽 사이드바(세로 메뉴) ─────────────────── */
.site-side {
	position: sticky;
	inset-block-start: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-l);
	box-sizing: border-box;
	block-size: 100vh;
	padding: var(--wa-space-l) var(--wa-space-s);
	overflow-y: auto;
	background: var(--site-accent);
	color: var(--site-on-accent);
}
.site-side .site-brand { padding-inline: var(--wa-space-s); }
.site-side .site-nav { flex-direction: column; }
.site-side .site-nav-item { opacity: 0.82; }
.site-side .site-nav-item:hover { opacity: 1; background: color-mix(in srgb, var(--site-on-accent) 10%, transparent); }
.site-side .site-nav-item[aria-current='page'] { opacity: 1; background: color-mix(in srgb, var(--site-on-accent) 18%, transparent); }
.site-main { display: flex; flex-direction: column; min-inline-size: 0; }
.site-bar {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	display: flex;
	justify-content: flex-end;
	padding: var(--wa-space-s) var(--wa-space-l);
	background: var(--wa-color-surface-raised);
	border-block-end: 1px solid var(--wa-color-surface-border);
}
/* 본문 폭 — 강사 작업 화면 · 학생은 읽기 좋게 좁게 · 학생관리자 콘솔은 넓게 */
.site[data-site='teacher'] .site-content { max-inline-size: 84rem; }
.site[data-site='student'] .site-content { max-inline-size: 64rem; }
.site[data-site='school'] .site-content { max-inline-size: 96rem; }

/* ── 좁은 화면 ─────────────────────────────── */
@media (max-width: 60rem) {
	.site-content { padding: var(--wa-space-m); }
	.site-main-link span { display: none; }

	.site { grid-template-columns: minmax(0, 1fr); align-content: start; }
	.site-side { position: static; block-size: auto; gap: var(--wa-space-s); padding: var(--wa-space-s); }
	.site-side .site-nav { flex-direction: row; overflow-x: auto; }

	/* 학생 — 메뉴가 화면 아래 탭 막대가 된다 */
	.site[data-site='student'] .site-side .site-nav {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 30;
		justify-content: space-around;
		margin: 0;
		padding: var(--wa-space-2xs);
		background: var(--wa-color-surface-raised);
		border-block-start: 1px solid var(--wa-color-surface-border);
		color: var(--wa-color-text-normal);
	}
	.site[data-site='student'] .site-side .site-nav-item {
		opacity: 1;
		flex-direction: column;
		gap: 0;
		padding: var(--wa-space-2xs);
		border-radius: var(--wa-border-radius-m);
		font-size: var(--wa-font-size-2xs);
	}
	.site[data-site='student'] .site-side .site-nav-item[aria-current='page'] { background: var(--site-accent); color: var(--site-on-accent); }
	.site[data-site='student'] .site-content { padding-block-end: 5.5rem; }
}