/*
 * 영어 교육 브랜드 사이트 공통 — okayteacher.com(layouts.okayteacher) · okaystudy.com(layouts.okaystudy), SSOT 11절 "영어 교육 브랜드 사이트".
 * 여기는 두 레이아웃이 같이 쓰는 것만 둔다: 브랜드 색 토큰 · 로고 · 메뉴 항목 색 · 본문 · 바닥글. 틀의 모양은 okayteacher.css · okaystudy.css.
 * 본문은 메인·서브도메인과 같은 위젯이고, 위젯은 브랜드를 모른다 — 브랜드 색은 여기서 Web Awesome brand · --sonub-* · --shell-bar-* 를 다시 정해 입힌다.
 * 논리 속성만 쓴다(RTL).
 */
.okay {
	--site-on-accent: var(--wa-color-neutral-95);
	--okay-soft: color-mix(in srgb, var(--site-accent) 12%, var(--wa-color-surface-raised));
	--site-soft: var(--okay-soft);
	--okay-ink: color-mix(in srgb, var(--site-accent) 72%, var(--wa-color-text-normal));
	/* theme.css·content.css·app.css 의 값은 html 에서 이미 풀린 채 물려 오므로, 같은 이름을 여기서 다시 정해야 이 안에서 바뀐다 */
	--wa-color-brand-fill-loud: var(--site-accent);
	--wa-color-brand-fill-normal: var(--okay-soft);
	--wa-color-brand-fill-quiet: var(--okay-soft);
	--wa-color-brand-on-loud: var(--site-on-accent);
	--wa-color-brand-on-normal: var(--okay-ink);
	--wa-color-brand-on-quiet: var(--okay-ink);
	--wa-color-brand-border-normal: color-mix(in srgb, var(--site-accent) 35%, var(--wa-color-surface-border));
	--wa-color-brand-border-quiet: var(--wa-color-surface-border);
	--wa-color-brand-border-loud: var(--site-accent);
	--sonub-accent: var(--site-accent);
	--sonub-accent-hover: color-mix(in srgb, var(--site-accent) 86%, var(--wa-color-neutral-05));
	--sonub-accent-soft: var(--okay-soft);
	--sonub-accent-ink: var(--okay-ink);
	--sonub-on-accent: var(--site-on-accent);
	--linkify-accent: var(--site-accent);
	--shell-bar-cta-bg: var(--site-accent);
	--shell-bar-cta-ink: var(--site-on-accent);
	--shell-bar-focus: var(--site-accent);
	--shell-bar-active-bg: var(--okay-soft);
	--shell-bar-active-ink: var(--okay-ink);
	--shell-bar-active-line: color-mix(in srgb, var(--site-accent) 28%, transparent);
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	margin: 0;
}
/* 브랜드 색 — 강사 파랑 · 학생 초록. 다크에서는 40 단계가 묻히므로 밝은 단계로, 그 위 글자는 어둡게 */
.okay[data-brand='okayteacher'] { --site-accent: var(--wa-color-blue-40); }
.okay[data-brand='okaystudy'] { --site-accent: var(--wa-color-green-40); }
html[data-sonub-theme='dark'] .okay { --site-on-accent: var(--wa-color-neutral-05); }
html[data-sonub-theme='dark'] .okay[data-brand='okayteacher'] { --site-accent: var(--wa-color-blue-70); }
html[data-sonub-theme='dark'] .okay[data-brand='okaystudy'] { --site-accent: var(--wa-color-green-70); }

/* ── 위 막대 공통 ─────────────────────────────── */
.okay-bar {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: var(--wa-color-surface-raised);
	border-block-end: 1px solid var(--wa-color-surface-border);
}
.okay-bar-inner {
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
	box-sizing: border-box;
	max-inline-size: var(--okay-width);
	margin-inline: auto;
	padding: var(--wa-space-xs) var(--wa-space-l);
}
.okay-bar .site-tools { margin-inline-start: auto; }

/* 로고 */
.okay-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	min-block-size: 2.5rem;
	color: var(--wa-color-text-normal);
	font-size: calc(1.3rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-bold);
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}
.okay-brand i,
.okay-brand b { color: var(--site-accent); }
.okay-brand:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; border-radius: var(--wa-border-radius-s); }

/* 메뉴 항목 색 — 모양(줄·탭)은 레이아웃 CSS */
.okay .site-nav-item {
	min-block-size: 2.5rem;
	box-sizing: border-box;
	color: var(--wa-color-text-quiet);
	transition: background 160ms ease, color 160ms ease;
}
.okay .site-nav-item:hover { color: var(--wa-color-text-normal); background: color-mix(in srgb, var(--site-accent) 10%, transparent); }
.okay .site-nav-item[aria-current='page'] { color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 12%, transparent); }

/* ── 본문 ─────────────────────────────── */
.okay-content {
	flex: 1 0 auto;
	max-inline-size: var(--okay-width);
	margin-inline: auto;
	padding: var(--wa-space-2xl) var(--wa-space-l);
}

/* ── 바닥글 — 저작권 · 약관 · 사업자 정보(SSOT 0절 "사업자") ─────────────── */
.okay-foot {
	border-block-start: 1px solid var(--wa-color-surface-border);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
}
.okay-foot-inner {
	display: grid;
	gap: var(--wa-space-xs);
	box-sizing: border-box;
	max-inline-size: var(--okay-width);
	margin-inline: auto;
	padding: var(--wa-space-l);
}
.okay-foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s) var(--wa-space-l); }
.okay-foot-line nav { display: flex; gap: var(--wa-space-m); }
.okay-foot a { color: inherit; }
.okay-foot a:hover { color: var(--site-accent); }
.okay-foot .footer-business { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs) var(--wa-space-m); margin: 0; }
.okay-foot .footer-business div { display: flex; gap: var(--wa-space-2xs); min-inline-size: 0; }
.okay-foot .footer-business dt::after { content: ':'; }
.okay-foot .footer-business dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 48rem) {
	.okay-bar-inner { padding-inline: var(--wa-space-m); }
	.okay-content { padding: var(--wa-space-l) var(--wa-space-m); }
	.okay-foot-inner { padding: var(--wa-space-m); }
}

@media (prefers-reduced-motion: reduce) {
	.okay .site-nav-item { transition: none; }
}