/* 강사 사이트 위쪽 막대의 단계 안내(x-widget.teach.signup-steps — SSOT 11절 "강사 사이트 첫 화면").
   손님 안내(a)는 손님에게만, 회원 안내(.teach-member-steps)는 로그인한 회원에게만 보인다
   — sites/head 의 스크립트가 CSS 보다 먼저 <html data-signed-in="0|1"> 을 붙인다(값이 없으면 둘 다 숨김) */
html:not([data-signed-in='0']) .teach-signup-steps:not(.teach-member-steps) { display: none; }
html:not([data-signed-in='1']) .teach-member-steps { display: none; }

/* 본문과 같은 시작선 — 본문은 가운데 정렬이라 시작선이 (막대 너비 − 본문 너비) ÷ 2 다. 막대를 컨테이너로 삼아(100cqi = 막대 안쪽 너비)
   어느 화면 너비에서나 같은 값을 계산한다. 본문 너비 = min(막대 너비 − 본문 여백×2, 84rem − 본문 여백×2, 페이지 최대 폭)
   — 본문 여백·84rem 은 sites.css 의 .site-content, 광고 랜딩은 .teach 의 78rem(public/css/pages/teach.css).
   좁은 화면은 본문 여백이 막대 여백보다 작아 여백이 음수가 된다(카드가 막대 안쪽보다 넓다) */
.site-bar:has(.teach-signup-steps) { container-type: inline-size; }
.site-tools:has(.teach-signup-steps) { flex: 1 1 auto; }
.teach-signup-steps {
	--page-pad: clamp(1rem, 2.5vw, 2.25rem);
	--page-max: 84rem;
	--page-width: min(calc(100cqi + 2 * var(--wa-space-l) - 2 * var(--page-pad)), calc(84rem - 2 * var(--page-pad)), var(--page-max));
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wa-space-2xs);
	margin-inline: calc((100cqi - var(--page-width)) / 2) auto;
	position: relative;
	min-block-size: 2rem;
	padding: 0 var(--wa-space-s);
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--wa-color-brand-on-quiet) 45%, transparent);
	border-radius: var(--wa-border-radius-pill);
	color: var(--wa-color-brand-on-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-normal);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}
html:has(.sonub-page.teach) .teach-signup-steps { --page-max: 78rem; }
.teach-signup-steps i { color: var(--wa-color-text-quiet); font-size: 0.75em; }
.teach-signup-steps strong { color: color-mix(in srgb, var(--wa-color-brand-on-quiet) 75%, var(--wa-color-pink-60)); font-weight: inherit; }
/* 겉모양은 얇게(2rem), 누르는 영역은 2.5rem — 보이지 않는 가상 요소로 위아래를 넓힌다 */
.teach-signup-steps::before { content: ''; position: absolute; inset: -0.25rem 0; }
.teach-signup-steps:hover { border-color: var(--wa-color-brand-on-quiet); }
.teach-signup-steps:hover :is(span, strong) { text-decoration: underline; text-underline-offset: 0.25em; }
.teach-signup-steps:focus-visible { outline: 2px solid var(--wa-color-brand-on-quiet); outline-offset: 2px; }
/* 회원 안내 — 단계마다 링크라 알약 전체가 아니라 링크마다 누르는 영역(2.5rem)과 밑줄·초점선을 둔다 */
.teach-member-steps::before { content: none; }
.teach-member-steps:hover strong { text-decoration: none; }
.teach-member-steps a { position: relative; color: inherit; text-decoration: none; }
.teach-member-steps a::before { content: ''; position: absolute; inset: -0.25rem -0.125rem; }
.teach-member-steps a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.teach-member-steps a:focus-visible { outline: 2px solid var(--wa-color-brand-on-quiet); outline-offset: 2px; border-radius: var(--wa-border-radius-s); }
/* 좁은 화면 — 도구 위의 한 줄, 본문 카드와 같은 폭(양 끝이 카드와 맞는다). 긴 언어는 줄을 바꾼다 */
@media (max-width: 60rem) {
	.teach-signup-steps { order: -1; flex: 0 0 var(--page-width); justify-content: center; margin-inline-end: calc((100cqi - var(--page-width)) / 2); padding-block: var(--wa-space-3xs); white-space: normal; text-align: center; }
}