/*
 * 학생 영어 사이트(okaystudy.com · layouts.okaystudy)의 틀 — 두 줄 머리(로고 · 도구 / 가운데 알약 탭)와 읽기 좋은 좁은 본문.
 * 좁은 화면에서는 탭이 화면 아래 고정 탭 막대(아이콘 위 · 글자 아래)가 된다. SSOT 11절 "영어 교육 브랜드 사이트". 색·로고·바닥글은 okay.css.
 */
.okay-study {
	--okay-width: 64rem;
	background: color-mix(in srgb, var(--site-accent) 4%, var(--wa-color-surface-default));
}

/* 가운데 알약 탭 */
.okay-tabs { padding-block-end: var(--wa-space-xs); }
.okay-tabs .site-nav { justify-content: center; flex-wrap: wrap; gap: var(--wa-space-xs); padding-inline: var(--wa-space-m); }
.okay-tabs .site-nav-item {
	padding-inline: var(--wa-space-m);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-surface-raised);
}
.okay-tabs .site-nav-item[aria-current='page'] { border-color: transparent; background: var(--site-accent); color: var(--site-on-accent); }

/* 좁은 화면 — 탭이 화면 아래 고정 탭 막대가 된다 */
@media (max-width: 48rem) {
	.okay-tabs {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 30;
		padding: 0;
		background: var(--wa-color-surface-raised);
		border-block-start: 1px solid var(--wa-color-surface-border);
	}
	.okay-tabs .site-nav { flex-wrap: nowrap; justify-content: space-around; gap: 0; padding: var(--wa-space-3xs) var(--wa-space-2xs); overflow-x: auto; }
	.okay-tabs .site-nav-item {
		flex-direction: column;
		flex: 1 0 auto;
		gap: var(--wa-space-3xs);
		min-block-size: 3.25rem;
		padding: var(--wa-space-2xs) var(--wa-space-xs);
		border: 0;
		background: none;
		font-size: var(--wa-font-size-2xs);
	}
	.okay-tabs .site-nav-item i { font-size: var(--wa-font-size-l); }
	.okay-tabs .site-nav-item[aria-current='page'] { background: none; color: var(--site-accent); }
	.okay-study .okay-content { padding-block-end: 5.5rem; }
	.okay-study .okay-foot { padding-block-end: 4.5rem; }
}