/*
 * 강사·학생·학생관리자 사이트(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: calc(1rem * var(--wa-font-size-scale, 1));
	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; }
}

/* ── 학생·강사·스쿨 작업 공간 — 차분한 메뉴 표면과 명확한 현재 위치(SSOT 11절) ── */
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-side {
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	border-inline-end: 1px solid var(--wa-color-surface-border);
	padding-block: var(--wa-space-l);
	gap: var(--wa-space-xl);
}
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-brand { padding-block: var(--wa-space-xs); gap: var(--wa-space-s); }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-brand img { inline-size: 2.6rem; block-size: 2.6rem; }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-brand small { color: var(--wa-color-text-quiet); letter-spacing: 0.025em; margin-block-start: var(--wa-space-2xs); }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-side .site-nav { gap: var(--wa-space-xs); }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-nav-item {
	min-block-size: 2.85rem;
	box-sizing: border-box;
	gap: var(--wa-space-s);
	padding: var(--wa-space-xs) var(--wa-space-s);
	white-space: normal;
	line-height: 1.45;
	opacity: 1;
	color: var(--wa-color-text-quiet);
	border: 1px solid transparent;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-nav-item i { flex-shrink: 0; color: var(--site-accent); }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-side .site-nav-item:hover { background: var(--site-soft); color: var(--wa-color-text-normal); }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-side .site-nav-item[aria-current='page'] {
	background: var(--site-soft);
	color: var(--wa-color-text-normal);
	border-color: color-mix(in srgb, var(--site-accent) 28%, var(--wa-color-surface-border));
	box-shadow: inset 0 0 0 1px var(--site-soft);
}
html[data-sonub-theme='dark'] .site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-nav-item i { color: color-mix(in srgb, var(--site-accent) 45%, var(--wa-color-text-normal)); }
.site:is([data-site='student'], [data-site='teacher'], [data-site='school']) .site-content { margin-inline: auto; padding: clamp(1rem, 2.5vw, 2.25rem); }
@media (max-width: 60rem) {
	.site[data-site='student'] .site-side { padding: var(--wa-space-s) var(--wa-space-m); border-inline-end: 0; border-block-end: 1px solid var(--wa-color-surface-border); }
	.site[data-site='student'] .site-side .site-nav {
		justify-content: flex-start;
		gap: var(--wa-space-2xs);
		padding-block-end: max(var(--wa-space-2xs), env(safe-area-inset-bottom));
		scrollbar-width: thin;
		box-shadow: var(--wa-shadow-m);
	}
	.site[data-site='student'] .site-side .site-nav-item {
		flex: 1 0 4.75rem;
		min-block-size: 3.5rem;
		justify-content: center;
		gap: var(--wa-space-2xs);
		padding: var(--wa-space-xs) var(--wa-space-2xs);
		text-align: center;
	}
	.site[data-site='student'] .site-content { padding-block-end: calc(7rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .site[data-site='student'] .site-nav-item { transition: none; } }

/* 강사 메뉴 묶음 — 성격별로 제목을 달고 묶음 사이를 띄운다. 좁은 화면에서는 제목을 숨기고 세로선으로 나눈다(SSOT 11절 "강사 사이트 메뉴 묶음") */
.site .site-side .site-nav:has(> .site-nav-group) { gap: var(--wa-space-l); }
.site-nav-group { display: flex; flex-direction: column; gap: var(--wa-space-2xs); }
.site-nav-heading {
	margin: 0;
	padding-inline: calc(var(--wa-space-s) + 1px);
	padding-block-end: var(--wa-space-2xs);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
@media (max-width: 60rem) {
	.site .site-side .site-nav:has(> .site-nav-group) { gap: var(--wa-space-xs); }
	.site-nav-group { flex: 0 0 auto; flex-direction: row; align-items: center; }
	.site-nav-group + .site-nav-group { padding-inline-start: var(--wa-space-xs); border-inline-start: 1px solid var(--wa-color-surface-border); }
	.site-nav-heading { display: none; }
}

/* 강사 모바일 메뉴는 위쪽에서 가로로 흐른다. 학생 하단 탭과 같은 아이콘·선택 상태를 쓴다. */
@media (max-width: 60rem) {
	.site:is([data-site='teacher'], [data-site='school']) .site-side { padding: var(--wa-space-s); gap: var(--wa-space-s); border-inline-end: 0; border-block-end: 1px solid var(--wa-color-surface-border); }
	.site:is([data-site='teacher'], [data-site='school']) .site-side .site-nav { padding-block: var(--wa-space-2xs); scrollbar-width: thin; }
	.site:is([data-site='teacher'], [data-site='school']) .site-nav-item { flex: 0 0 auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .site:is([data-site='teacher'], [data-site='school']) .site-nav-item { transition: none; } }

/* 강사 사이트 SONUB 아래(사이트 이름 자리) SONUB 약자 — 다섯 단어를 2초씩 차례로 보인다(transform·opacity 만, SSOT 11절 "강사 사이트 로고 문구") */
.site-brand .site-motto {
	display: grid;
	margin-block-start: var(--wa-space-2xs);
	overflow: hidden;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1.5;
}
.site-brand .site-motto span { display: block; grid-area: 1 / 1; opacity: 0; animation: site-motto 10s ease-in-out infinite; }
.site-motto span:nth-child(2) { animation-delay: 2s; }
.site-motto span:nth-child(3) { animation-delay: 4s; }
.site-motto span:nth-child(4) { animation-delay: 6s; }
.site-motto span:nth-child(5) { animation-delay: 8s; }
.site-motto b { color: var(--site-accent); font-size: 1.15em; font-weight: var(--wa-font-weight-bold); }
@keyframes site-motto {
	0% { opacity: 0; transform: translateY(0.6em); }
	4%, 17% { opacity: 1; transform: none; }
	21%, 100% { opacity: 0; transform: translateY(-0.6em); }
}
/* 움직임 줄이기 — 돌리지 않고 약자 전체를 한 줄로 */
@media (prefers-reduced-motion: reduce) {
	.site-brand .site-motto { display: flex; flex-wrap: wrap; column-gap: 0.3em; white-space: normal; }
	.site-brand .site-motto span { display: inline; opacity: 1; animation: none; }
}

/* 학생 사이트 로고 아래 "1:1 화상 수업" — 한 줄 전체에 큰 글씨, 사이트 색에서 분홍·보라로 흐르는 빛과 살짝 떠오르는 움직임(SSOT 11절 "학생 사이트 로고 문구") */
.site-brand:has(.site-tagline) { flex-wrap: wrap; row-gap: var(--wa-space-2xs); }
.site-brand .site-tagline {
	flex-basis: 100%;
	padding-block: var(--wa-space-2xs);
	font-size: var(--wa-font-size-xl);
	font-weight: var(--wa-font-weight-bold);
	letter-spacing: -0.01em;
	line-height: 1.2;
	white-space: normal;
	color: var(--site-accent);
	background: linear-gradient(90deg, var(--site-accent) 0%, var(--wa-color-pink-50) 25%, var(--wa-color-indigo-50) 50%, var(--wa-color-pink-50) 75%, var(--site-accent) 100%) 0 0 / 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: site-tagline-shine 4s linear infinite, site-tagline-float 3s ease-in-out infinite;
}
html[data-sonub-theme='dark'] .site-brand .site-tagline { --site-accent: var(--wa-color-orange-60); }
@keyframes site-tagline-shine { to { background-position: -200% 0; } }
@keyframes site-tagline-float {
	0%, 100% { transform: none; }
	50% { transform: translateY(-0.12em) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
	.site-brand .site-tagline { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}

/* 손님(로그인 표시 쿠키 없음)에게도 모든 메뉴를 보이되, 로그인해야 쓰는 메뉴는 흐리게·자물쇠로 비활성 표시한다 — 누르면 site-navigation.js 가 로그인 안내를 띄운다.
   sites/head 가 <html data-signed-in> 을 붙인다(SSOT 11절 "강사 사이트 첫 화면", 2026-10-26 사용자 지시) */
.site-nav-lock { display: none; }
html[data-signed-in='0'] .site-nav-item[data-member] { opacity: 0.5; }
html[data-signed-in='0'] .site-nav-item[data-member]:hover { opacity: 0.7; }
html[data-signed-in='0'] .site-nav-item[data-member] .site-nav-lock { display: inline-block; margin-inline-start: auto; padding-inline-start: var(--wa-space-2xs); font-size: 0.75em; }
/* 로그인 안내 — 화면 아래 가운데에 뜨는 작은 상자 */
.site-nav-login:not([hidden]) {
	position: fixed;
	inset-block-end: var(--wa-space-l);
	inset-inline: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	inline-size: fit-content;
	max-inline-size: calc(100% - 2 * var(--wa-space-m));
	margin-inline: auto;
	padding: var(--wa-space-s) var(--wa-space-s) var(--wa-space-s) var(--wa-space-m);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-l);
	color: var(--wa-color-text-normal);
	animation: site-nav-login-in 0.2s ease-out;
}
.site-nav-login > i { color: var(--site-accent, var(--wa-color-brand-fill-loud)); font-size: var(--wa-font-size-l); }
.site-nav-login p { margin: 0; font-weight: var(--wa-font-weight-semibold); }
.site-nav-login-go {
	flex-shrink: 0;
	padding: var(--wa-space-2xs) var(--wa-space-m);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-weight: var(--wa-font-weight-bold);
	text-decoration: none;
	white-space: nowrap;
}
.site-nav-login-go:hover { background: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)); color: var(--wa-color-brand-on-loud); }
.site-nav-login-close { flex-shrink: 0; padding: var(--wa-space-2xs); border: 0; background: none; color: var(--wa-color-text-quiet); cursor: pointer; font-size: var(--wa-font-size-m); }
.site-nav-login-close:hover { color: var(--wa-color-text-normal); }
@keyframes site-nav-login-in { from { opacity: 0; transform: translateY(0.75rem); } }
@media (prefers-reduced-motion: reduce) { .site-nav-login:not([hidden]) { animation: none; } }
/* 다크 — 사이트 색(cyan-30)이 어두운 사이드바에 묻히므로 로고 문구의 첫 글자는 밝은 단계로 */
html[data-sonub-theme='dark'] .site[data-site='teacher'] .site-motto b { color: var(--wa-color-cyan-70); }

/* 강사 사이드바(강사 사이트 .site-side · okayteacher.com .okay-side) 맨 아래 사이트 통계(x-widget.site.stats — 학생 수 · 회원 수 · 총 수업 수, SSOT 11절 "강사 사이트 통계").
   메뉴가 짧으면 사이드바 바닥에 붙고, 길면 메뉴 뒤로 따라 내려간다. 좁은 화면(위쪽 가로 메뉴)에서는 숨긴다 */
:is(.site-side, .okay-side) .quick-stats {
	margin-block-start: auto;
	padding: var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--site-soft);
}
:is(.site-side, .okay-side) .quick-stats-heading {
	margin: 0 0 var(--wa-space-2xs);
	padding-inline: var(--wa-space-xs);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
:is(.site-side, .okay-side) .quick-stats dl { display: grid; gap: var(--wa-space-2xs); margin: 0; }
:is(.site-side, .okay-side) .quick-stats dl > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
}
:is(.site-side, .okay-side) .quick-stats dl > div + div { border-block-start: 1px solid var(--wa-color-surface-border); }
:is(.site-side, .okay-side) .quick-stats dt {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-inline-size: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	overflow-wrap: anywhere;
}
:is(.site-side, .okay-side) .quick-stats dt > i { flex: none; color: var(--site-accent); --fa-primary-color: var(--site-accent); --fa-secondary-color: var(--site-accent); }
:is(.site-side, .okay-side) .quick-stats dd {
	margin: 0;
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-bold);
	font-variant-numeric: tabular-nums;
}
html[data-sonub-theme='dark'] :is(.site-side, .okay-side) .quick-stats dt > i { color: color-mix(in srgb, var(--site-accent) 45%, var(--wa-color-text-normal)); --fa-primary-color: currentColor; --fa-secondary-color: currentColor; }
@media (max-width: 60rem) {
	:is(.site-side, .okay-side) .quick-stats { display: none; }
}