/*
 * 튜터 메뉴의 화면(SSOT 11절 "튜터 메뉴") — 내 예약(/class/bookings) · 강사 페이지(/tutor) · 학생 페이지(/student) · 결제 창구 안내(/class/payment).
 * 예약 카드(.booking-list · .booking)와 결제 창은 app.css 가 맡는다. 선택자는 .lessons · .payguide 아래로 좁힌다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 목록 화면 — 내 예약 · 강사 페이지 · 학생 페이지 ─────────────── */
.lessons {
	display: grid;
	gap: var(--wa-space-l);
	max-inline-size: 48rem;
}
.lessons > h1,
.lessons > p,
.lessons section > h2,
.lessons section > p {
	margin: 0;
}
.lessons section {
	display: grid;
	gap: var(--wa-space-s);
}
.lessons .booking-list {
	margin: 0;
}

/* 관리로 가는 길 — 강사 프로필·시간표·결제 창구 / 강사 찾기·내 예약. 좁은 화면에서는 한 줄에 하나 */
.lessons-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: var(--wa-space-s);
}
.lessons-links a {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	padding: 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-s);
	color: inherit;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.lessons-links a:hover {
	border-color: var(--wa-color-brand-border-loud);
	background: var(--wa-color-brand-fill-quiet);
}
.lessons-links a:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.lessons-links i {
	color: var(--wa-color-brand-on-quiet);
	font-size: 1.25rem;
}

/* ── 결제 창구 안내 ─────────────────────────────── */
.payguide {
	display: grid;
	gap: var(--wa-space-s);
	max-inline-size: 48rem;
}
.payguide :is(h1, h2, p, ol, ul) {
	margin: 0;
}
.payguide h2 {
	margin-block-start: var(--wa-space-l);
}
.payguide :is(ol, ul) {
	display: grid;
	gap: var(--wa-space-xs);
	padding-inline-start: var(--wa-space-l);
}
.payguide-steps li::marker {
	font-weight: var(--wa-font-weight-bold);
	color: var(--wa-color-brand-on-quiet);
}
/* 단서 — PayPal 에서 결제를 마쳤는지 반드시 확인(SSOT 8절). 결제 창의 .pay-check 와 같은 모양 */
.payguide-check {
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-warning-fill-quiet);
	font-weight: var(--wa-font-weight-semibold);
}
.payguide .profile-help {
	display: block;
}

/* ── 수업 목록 · 결제 안내 — 구획과 읽기 폭 ─────────────── */
.lessons { inline-size: 100%; min-inline-size: 0; }
.lessons section > h2 { padding-block-end: var(--wa-space-xs); border-block-end: 1px solid var(--wa-color-surface-border); }
.lessons .lessons-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.payguide { box-sizing: border-box; padding: clamp(1.25rem, 2.5vw, 2rem); 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-s); }
.payguide p, .payguide li { line-height: 1.9; }