/*
 * 공통 레이아웃 — 왼쪽 라리아 챗봇 사이드바 + 오른쪽 페이지(상단 메인 메뉴 + 본문).
 * 방향이 바뀌는 곳은 논리 속성(inline·block)만 쓴다 — RTL(ar·ur) 대응. 색·간격은 Web Awesome 토큰.
 */
:root {
	--chat-width: 300px;
	--bar-height: 80px; /* 챗봇 헤더와 메인 메뉴가 같은 높이라 아래 선이 한 줄로 이어진다(이전 사이트 --topbar-height) */

	/* 상단 막대 — 세 테마 모두 공통 표면·글자 토큰을 따른다. */
	--shell-bar-bg: color-mix(in srgb, var(--wa-color-surface-raised) 96%, transparent);
	--shell-bar-ink: var(--wa-color-text-normal);
	--shell-bar-muted: var(--wa-color-text-quiet);
	--shell-bar-tab: color-mix(in srgb, var(--wa-color-text-normal) 88%, var(--wa-color-text-quiet));
	--shell-bar-line: var(--wa-color-surface-border);
	--shell-bar-hover: var(--wa-color-surface-lowered);
	--shell-bar-hover-line: var(--wa-color-surface-border);
	--shell-bar-active-bg: var(--wa-color-brand-fill-quiet);
	--shell-bar-active-ink: var(--wa-color-brand-on-quiet);
	--shell-bar-active-line: color-mix(in srgb, var(--wa-color-brand-fill-loud) 28%, transparent);
	--shell-bar-shadow: none;
	--shell-bar-tool-bg: var(--wa-color-surface-lowered);
	--shell-bar-tool-line: var(--wa-color-surface-border);
	--shell-bar-cta-bg: var(--wa-color-brand-fill-loud);
	--shell-bar-cta-ink: var(--wa-color-brand-on-loud);
	--shell-bar-sun: var(--wa-color-warning-on-quiet);
	--shell-bar-focus: var(--wa-color-brand-fill-loud);
	/* 대분류 아이콘 3색(보라·민트·앰버)이 차례로 돈다 */
	--shell-cat-1: var(--wa-color-brand-fill-loud);
	--shell-cat-2: var(--wa-color-success-on-quiet);
	--shell-cat-3: var(--wa-color-warning-on-quiet);
}

[x-cloak] { display: none !important; }

body {
	margin: 0;
	font-family: var(--wa-font-family-body);
	color: var(--wa-color-text-normal);
	background: var(--wa-color-surface-default);
	line-height: 1.65;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-weight: var(--wa-font-weight-bold);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

/* ── 라리아 챗봇 사이드바 ─────────────────────────── */
.chat {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	inline-size: var(--chat-width);
	background: var(--wa-color-surface-raised);
	border-inline-end: 1px solid var(--wa-color-surface-border);
}

.chat-header {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	flex: none;
	block-size: var(--bar-height);
	padding-inline: var(--wa-space-m);
	border-block-end: 1px solid var(--wa-color-surface-border);
}
.chat-title {
	display: inline-flex;
	align-items: baseline;
	gap: var(--wa-space-2xs);
	min-inline-size: 0;
	font-weight: var(--wa-font-weight-semibold);
	white-space: nowrap;
}
.chat-title small {
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--wa-font-size-xs);
	font-weight: normal;
	color: var(--wa-color-text-quiet);
}
.chat-close { display: none; margin-inline-start: auto; }

.chat-body { display: flex; flex-direction: column; flex: 1; min-block-size: 0; }

.chat-log {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
	padding: var(--wa-space-m);
	background: var(--wa-color-surface-lowered);
}
.chat-empty { margin-block: auto; text-align: center; color: var(--wa-color-text-quiet); }
.chat-empty i { font-size: 2rem; color: var(--wa-color-brand-fill-loud); }
.chat-empty p { margin: var(--wa-space-2xs) 0 0; }
.chat-empty-title { font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-text-normal); }

.chat-bubble {
	max-inline-size: 85%;
	margin: 0;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-l);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: var(--wa-color-surface-raised);
}
.chat-bubble[data-role='user'] {
	align-self: flex-end;
	color: var(--wa-color-brand-on-loud);
	background: var(--wa-color-brand-fill-loud);
}

.chat-form {
	display: flex;
	align-items: flex-end;
	gap: var(--wa-space-xs);
	flex: none;
	padding: var(--wa-space-s);
	border-block-start: 1px solid var(--wa-color-surface-border);
}
.chat-form textarea {
	flex: 1;
	max-block-size: 10rem;
	padding: var(--wa-space-xs) var(--wa-space-s);
	font: inherit;
	color: inherit;
	background: var(--wa-color-surface-default);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	resize: none;
}
.chat-form textarea:focus-visible { outline: var(--wa-focus-ring); }

.chat-backdrop { display: none; }

/* ── 오른쪽 페이지 ─────────────────────────────── */
.page {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	margin-inline-start: var(--chat-width);
}

.topbar {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	block-size: var(--bar-height);
	padding-inline: var(--wa-space-m);
	background: var(--shell-bar-bg);
	border-block-end: 1px solid var(--shell-bar-line);
	box-shadow: var(--shell-bar-shadow);
	backdrop-filter: blur(14px) saturate(140%);
	color: var(--shell-bar-ink);
}
.topbar-brand { display: none; }

/* 오른쪽 도구 묶음 — 이전 사이트 .menu-right: 42px 네모 도구 버튼, 로그인은 보라색 버튼 */
.topbar-tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	margin-inline-start: auto;
	padding-inline-start: 0.9rem;
	border-inline-start: 1px solid var(--shell-bar-line);
}
/* Web Awesome 등록 전에는 언어 목록을 접고 버튼 크기를 잡아 상단 메뉴가 밀리지 않게 한다. */
.locale-switcher:not(:defined) { display: inline-flex; }
.locale-switcher:not(:defined) > :not([slot='trigger']) { display: none; }
.search-link,
.theme-trigger,
.topbar-tools .locale-switcher > wa-button:not(:defined),
.topbar-tools .locale-switcher > wa-button::part(base),
.topbar-tools .menu-toggle::part(base),
.topbar-tools .chat-toggle::part(base) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 1px solid var(--shell-bar-tool-line);
	border-radius: 0.85rem;
	background: var(--shell-bar-tool-bg);
	color: var(--shell-bar-ink);
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms, border-color 160ms;
}
.topbar-tools .locale-switcher > wa-button:not(:defined),
.topbar-tools .locale-switcher > wa-button::part(base) { padding-inline: 0.65rem; gap: 0.45rem; }
.locale-code { font-size: 0.7rem; font-weight: 750; letter-spacing: 0.025em; }
.search-link:hover,
.theme-trigger:hover,
.topbar-tools .locale-switcher > wa-button:hover::part(base),
.topbar-tools .menu-toggle:hover::part(base) {
	background: var(--shell-bar-hover);
	border-color: var(--shell-bar-active-line);
}
.search-link:focus-visible,
.theme-trigger:focus-visible { outline: 2px solid var(--shell-bar-focus); outline-offset: 2px; }
.topbar-tools .menu-toggle::part(base) { background: var(--shell-bar-cta-bg); color: var(--shell-bar-cta-ink); border-color: transparent; }
.chat-toggle,
.menu-toggle { display: none; }

/* 계정 — 손님은 보라색 [로그인] 버튼, 회원은 사진(없으면 사람 아이콘)과 [회원 정보] 버튼(SSOT 1절 "회원 정보") */
.account { color: var(--shell-bar-ink); }
.account-member {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	box-sizing: border-box;
	block-size: 42px;
	padding-inline: 0.3rem 0.8rem;
	border: 1px solid var(--shell-bar-tool-line);
	border-radius: 0.85rem;
	background: var(--shell-bar-tool-bg);
	color: var(--shell-bar-ink);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 160ms, border-color 160ms;
}
.account-member:hover { background: var(--shell-bar-hover); border-color: var(--shell-bar-active-line); }
.account-member:focus-visible { outline: 2px solid var(--shell-bar-focus); outline-offset: 2px; }
.account-member img,
.account-member i { inline-size: 30px; block-size: 30px; border-radius: 50%; }
.account-member img { object-fit: cover; }
.account-member i { display: inline-grid; place-items: center; font-size: 1.55rem; color: var(--shell-bar-cta-bg); }
.account span > a:first-child {
	display: inline-flex;
	align-items: center;
	min-block-size: 42px;
	padding-inline: 0.9rem;
	border-radius: 0.85rem;
	background: var(--shell-bar-cta-bg);
	box-shadow: 0 8px 18px -10px var(--shell-bar-cta-bg);
	color: var(--shell-bar-cta-ink);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* 화면 테마 선택 */
.theme-picker { position: relative; }
.theme-trigger { inline-size: 42px; color: var(--shell-bar-sun); }
.theme-menu {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	z-index: 40;
	display: grid;
	gap: 0.1rem;
	min-inline-size: 11rem;
	padding: 0.4rem;
	background: var(--wa-color-surface-raised);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1rem;
	box-shadow: var(--wa-shadow-l);
}
.theme-menu p { margin: 0.25rem 0.6rem 0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--wa-color-text-quiet); }
.theme-menu button {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border: 0;
	border-radius: 0.6rem;
	background: none;
	color: var(--wa-color-text-normal);
	font: inherit;
	font-size: 0.85rem;
	text-align: start;
	cursor: pointer;
}
.theme-menu button:hover { background: var(--wa-color-surface-lowered); }
.theme-menu button span { flex: 1; }
.theme-menu button > i:first-child { inline-size: 1.25em; text-align: center; }
.theme-menu button[data-tone='default'] > i:first-child { color: #d69616; }
.theme-menu button[data-tone='dark'] > i:first-child { color: #6250c7; }
.theme-menu button[data-tone='pink'] > i:first-child { color: #aa4075; }
.theme-menu .fa-check { color: var(--wa-color-brand-fill-loud); }

/* 메인 메뉴 — 대분류 탭(아이콘 위·글자 아래, 이전 사이트 .cat-head) + 펼침 패널 */
.main-menu { flex: 1; align-self: stretch; display: flex; align-items: center; min-inline-size: 0; }
.menu-tabs { display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.menu-cat { --category-color: var(--shell-cat-1); position: relative; margin: 0; }
.menu-cat:nth-child(3n + 2) { --category-color: var(--shell-cat-2); }
.menu-cat:nth-child(3n) { --category-color: var(--shell-cat-3); }
.menu-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	box-sizing: border-box;
	min-inline-size: 3.9rem;
	block-size: 64px;
	padding: 0.45rem 0.45rem;
	border: 1px solid transparent;
	border-radius: var(--wa-border-radius-m);
	color: var(--shell-bar-tab);
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
}
.menu-tab i {
	--fa-primary-color: var(--category-color);
	--fa-secondary-color: var(--category-color);
	--fa-secondary-opacity: 0.4;
	font-size: 1.15rem;
	color: var(--category-color);
}
.menu-cat:hover > .menu-tab,
.menu-tab:focus-visible {
	background: var(--shell-bar-hover);
	border-color: var(--shell-bar-hover-line);
	color: var(--shell-bar-ink);
	transform: none;
}
.menu-tab:focus-visible { outline: 2px solid var(--shell-bar-focus); outline-offset: -3px; }
/* 지금 있는 대분류는 카테고리 색 밑줄로 — 글자 굵기는 바꾸지 않는다(폭이 변하면 탭이 넘친다) */
.menu-cat[data-active] > .menu-tab {
	background: var(--shell-bar-active-bg);
	border-color: var(--shell-bar-active-line);
	color: var(--shell-bar-active-ink);
	box-shadow: inset 0 -2px 0 var(--category-color);
}

.menu-panel {
	position: absolute;
	inset-block-start: calc(100% + 4px);
	inset-inline-start: 0;
	display: none;
	min-inline-size: 13rem;
	margin: 0;
	padding: var(--wa-space-xs);
	list-style: none;
	background: var(--wa-color-surface-raised);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1rem;
	box-shadow: var(--wa-shadow-l);
}
.menu-panel::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: -8px; block-size: 8px; }
.menu-cat:hover > .menu-panel,
.menu-cat:focus-within > .menu-panel { display: block; }
.menu-panel a {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	padding: var(--wa-space-xs) var(--wa-space-s);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--wa-border-radius-s);
}
.menu-panel a i { inline-size: 1.25em; text-align: center; color: var(--category-color); --fa-primary-color: var(--category-color); --fa-secondary-color: var(--category-color); --fa-secondary-opacity: 0.4; }
.menu-panel a:hover { background: var(--wa-color-surface-lowered); }
.menu-panel a[aria-current] { font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-brand-on-quiet); }

.content { flex: 1; inline-size: 100%; max-inline-size: 72rem; margin-inline: auto; padding: clamp(1rem, 2.1vw, 2rem); box-sizing: border-box; }
/* 바닥글 — 이전 사이트 shell-modern.css(.site-footer · .footer-*) */
.site-footer {
	display: grid;
	gap: var(--wa-space-l);
	padding: var(--wa-space-2xl) clamp(1rem, 2.1vw, 2rem);
	color: var(--wa-color-text-quiet);
	background: var(--wa-color-surface-raised);
	border-block-start: 1px solid var(--wa-color-surface-border);
}
.site-footer .footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--wa-space-l); }
.site-footer .footer-about,
.site-footer .footer-links { display: grid; align-content: start; gap: var(--wa-space-2xs); }
.site-footer .footer-brand { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); font-size: var(--wa-font-size-l); color: var(--wa-color-text-normal); }
.site-footer .footer-brand i { color: var(--wa-color-brand-fill-loud); }
.site-footer .footer-links strong { font-size: 0.88rem; color: var(--wa-color-text-normal); }
.site-footer a { font-size: 0.86rem; line-height: 1.8; color: var(--wa-color-text-quiet); text-decoration: none; }
.site-footer a:hover { color: var(--wa-color-brand-on-quiet); text-decoration: underline; }
.site-footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
	padding-block-start: var(--wa-space-m);
	border-block-start: 1px solid var(--wa-color-surface-border);
}
.site-footer .footer-bottom nav { display: flex; gap: var(--wa-space-s); }

/* 전체 메뉴 서랍 */
.drawer-group h2 { margin: var(--wa-space-m) 0 var(--wa-space-2xs); font-size: var(--wa-font-size-m); }
.drawer-group h2 a { display: flex; align-items: center; gap: var(--wa-space-xs); color: inherit; text-decoration: none; }
.drawer-group h2:not(:has(a)) { display: flex; align-items: center; gap: var(--wa-space-xs); }
.drawer-group ul { margin: 0; padding-inline-start: 1.75rem; list-style: none; }
.drawer-group li a { display: block; padding-block: var(--wa-space-3xs); color: var(--wa-color-text-quiet); text-decoration: none; }
.drawer-group li a[aria-current] { font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-brand-on-quiet); }

/* ── 반응형 ───────────────────────────────────── */

/* 넓은 화면(펼침 패널): 아이콘 탭 10개가 1,440px 에서 대부분의 언어로 한 줄에 들어간다. 긴 언어(ru·tr)가 넘치면
   오른쪽 도구와 겹치거나(ltr) 화면 밖으로 밀리지 않게(rtl) 두 줄로 내린다 — 숨는 탭이 없다. */
@media (min-width: 1440px) {
	.topbar { block-size: auto; min-block-size: var(--bar-height); }
	.menu-tabs { flex-wrap: wrap; }
}

/* 1,439px 이하: 대분류가 한 줄에 다 못 들어가므로 펼침 패널을 끄고 탭을 가로 스크롤, 서브메뉴는 서랍으로(이전 사이트 .mega-heads) */
@media (max-width: 1439px) {
	.main-menu { overflow-x: auto; scrollbar-width: none; }
	.menu-panel { display: none !important; }
	.menu-toggle { display: inline-flex; }
}

/* 좁은 화면: 챗봇 사이드바를 숨기고 상단 버튼으로 연다 */
@media (max-width: 1099px) {
	.page { margin-inline-start: 0; }
	.topbar-brand,
	.chat-toggle,
	.chat-close { display: inline-flex; }

	.chat { display: none; inline-size: min(100%, 24rem); box-shadow: var(--wa-shadow-l); }
	body[data-chat-open='true'] .chat { display: flex; }
	body[data-chat-open='true'] .chat-backdrop {
		position: fixed;
		inset: 0;
		z-index: 25;
		display: block;
		background: rgb(0 0 0 / 0.35);
	}
}

@media (max-width: 599px) {
	.locale-name { display: none; }
	/* 휴대폰: 긴 언어(ar·de·bn·ru)에서 로그인 글자가 상단 막대를 넘기지 않게 */
	.topbar { gap: var(--wa-space-2xs); padding-inline: var(--wa-space-s); }
	.topbar-tools,
	.account { min-inline-size: 0; }
	/* 도구 버튼을 34px 로 줄이고 언어는 지구본만(언어 이름은 버튼의 설명에 남는다) */
	.topbar-tools { gap: 0.2rem; padding-inline-start: 0; border-inline-start: 0; }
	.search-link,
	.theme-trigger,
	.topbar-tools .locale-switcher > wa-button:not(:defined),
	.topbar-tools .locale-switcher > wa-button::part(base),
	.topbar-tools .menu-toggle::part(base),
	.topbar-tools .chat-toggle::part(base) { min-inline-size: 34px; inline-size: 34px; block-size: 34px; border-radius: 0.7rem; font-size: 0.9rem; }
	.topbar-tools .locale-switcher > wa-button:not(:defined),
	.topbar-tools .locale-switcher > wa-button::part(base) { padding-inline: 0; }
	.topbar-tools .locale-switcher > wa-button::part(caret),
	.locale-code { display: none; }
	.account span > a:first-child { min-block-size: 34px; padding-inline: 0.6rem; border-radius: 0.7rem; }
	/* 휴대폰의 [회원 정보]는 사진(아이콘)만 — 글자는 버튼 설명(aria-label)에 남는다 */
	.account-member { justify-content: center; inline-size: 34px; block-size: 34px; padding: 0; border-radius: 0.7rem; }
	.account-member span { display: none; }
	.account-member img,
	.account-member i { inline-size: 26px; block-size: 26px; }
	.account-member i { font-size: 1.35rem; }
}

/* 로그인 — [Google 로그인]·[Apple 로그인] 버튼, 이메일·비밀번호 폼(로그인·회원가입), 가입한 뒤의 인증 대기 화면(SSOT 1절) */
.login { display: grid; gap: var(--wa-space-m); max-inline-size: 28rem; }
.login h1 { margin: 0; }
.login .form { max-inline-size: none; }
.login .form small { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.login > .form-status { margin: 0; }
.login-choose { display: grid; gap: var(--wa-space-m); }
.login-buttons { display: grid; gap: var(--wa-space-xs); }
.login-buttons wa-button { inline-size: 100%; }
.login-switch { margin: 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
/* 개발용 테스트 로그인(로컬에서만) — 로그인 화면 맨 아래, 눈에 덜 띄게 */
.login-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-s); margin: 0; padding-block-start: var(--wa-space-s); border-block-start: 1px dashed var(--wa-color-surface-border); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }

/* 폼 — 로그인·강사 프로필·시간표 */
.form { display: grid; gap: var(--wa-space-m); max-inline-size: 36rem; }
.form label { display: grid; gap: var(--wa-space-3xs); }
.form .form-check { display: flex; align-items: center; gap: var(--wa-space-2xs); }
.form fieldset { display: grid; gap: var(--wa-space-s); margin: 0; padding: var(--wa-space-s); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); }
.form .form-checks { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs) var(--wa-space-m); }
.form-inline { display: flex; flex-wrap: wrap; align-items: end; gap: var(--wa-space-s); max-inline-size: none; }
/* 선택 칸 — Web Awesome 은 꺾쇠를 오른쪽(물리)에, 여백은 끝(논리)에 둔다. RTL(ar·ur)에서는 꺾쇠가 글자와 겹치므로 왼쪽으로 옮긴다 */
[dir='rtl'] select:not([multiple]) { background-position: center left var(--wa-form-control-padding-inline); }
.form-errors { margin: 0; padding: var(--wa-space-s) var(--wa-space-l); color: var(--wa-color-danger-on-quiet); background: var(--wa-color-danger-fill-quiet); border-radius: var(--wa-border-radius-m); }
.form-status { color: var(--wa-color-success-on-quiet); }
.link-button { padding: 0; border: 0; background: none; color: var(--wa-color-text-link); cursor: pointer; font: inherit; }
.button { display: inline-block; padding: var(--wa-space-xs) var(--wa-space-m); border-radius: var(--wa-border-radius-m); background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); text-decoration: none; }
.account { display: flex; align-items: center; gap: var(--wa-space-xs); }
.account > span { display: flex; align-items: center; gap: var(--wa-space-xs); }

/* 강사 */
.stars { color: var(--wa-color-warning-fill-loud); }
.tutor-photo { inline-size: 8rem; block-size: 8rem; object-fit: cover; border-radius: 50%; }
.tutor-avatar { display: grid; place-items: center; overflow: hidden; background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-quiet); font-size: 2.5rem; }
.tutor-avatar > :is(img, i) { grid-area: 1 / 1; }
.tutor-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
.tutor-avatar:has(img:not([hidden])) > i { visibility: hidden; }
.tutor-video { inline-size: 100%; max-inline-size: 36rem; }
iframe.tutor-video { display: block; aspect-ratio: 16 / 9; block-size: auto; border: 0; border-radius: var(--wa-border-radius-m); }   /* YouTube 소개 영상 */
/* 강사 프로필 — 요약 카드 + 항목 카드. 항목 줄을 누르면 그 항목만 고치는 창(wa-dialog)이 뜬다.
   배치는 본문 폭으로 고른다(@container) — 챗봇 사이드바가 있어도 없어도 맞게 나뉜다. */
.tutor-profile { container: tutor-profile / inline-size; }
.profile-layout { display: grid; gap: var(--wa-space-l); max-inline-size: 64rem; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-l); }
.profile-head h1 { margin: 0; }
.profile-head .form-status { margin: 0; }
.profile-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--wa-space-m); padding: var(--wa-space-l); 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); }
.profile-avatar { position: relative; display: grid; place-items: center; inline-size: 5rem; block-size: 5rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-quiet); font-size: 2rem; cursor: pointer; transform: none; }
.profile-avatar img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
.profile-avatar-edit { position: absolute; inset-block-end: 0; inset-inline-end: 0; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border: 2px solid var(--wa-color-surface-raised); border-radius: 50%; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-size: var(--wa-font-size-xs); }
.profile-who { display: grid; gap: var(--wa-space-3xs); min-inline-size: 0; }
.profile-who p { margin: 0; }
.profile-name { font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-bold); }
.profile-headline { color: var(--wa-color-text-quiet); overflow-wrap: anywhere; }
.profile-stars { font-size: var(--wa-font-size-s); }
.profile-score { grid-column: 1 / -1; display: grid; gap: var(--wa-space-xs); }
.profile-score p { margin: 0; }
.profile-score-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wa-space-xs); }
.profile-score-bar { position: relative; }
.profile-score-bar wa-progress-bar { --track-height: .625rem; }
.profile-score[data-ready] wa-progress-bar { --indicator-color: var(--wa-color-success-fill-loud); }
.profile-score-bar::after { content: ''; position: absolute; inset-block: -3px; inset-inline-start: calc(var(--goal) * 1%); border-inline-start: 2px dashed var(--wa-color-text-quiet); }
.profile-score-hint { font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); }
.profile-sections { display: grid; gap: var(--wa-space-l); min-inline-size: 0; }
.profile-section { 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); overflow: hidden; }
.profile-section h2 { display: flex; align-items: center; gap: var(--wa-space-xs); margin: 0; padding: var(--wa-space-s) var(--wa-space-m); border-block-end: 1px solid var(--wa-color-surface-border); background: var(--wa-color-surface-lowered); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.profile-items { margin: 0; padding: 0; list-style: none; }
.profile-item { margin: 0; }   /* Web Awesome 기본 li 들여쓰기를 없앤다 */
.profile-item + .profile-item { border-block-start: 1px solid var(--wa-color-surface-border); }
/* 줄 전체가 버튼 — Web Awesome 의 버튼 기본 모양(고정 높이·한 줄·색)을 걷어 낸다 */
.profile-item-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--wa-space-m); inline-size: 100%; height: auto; margin: 0; padding: var(--wa-space-s) var(--wa-space-m); border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: start; white-space: normal; cursor: pointer; transform: none; }
.profile-item-row:hover { background: var(--wa-color-surface-lowered); }
.profile-item-status { color: var(--wa-color-text-quiet); font-size: 1.125rem; }
.profile-item[data-done] .profile-item-status { color: var(--wa-color-success-fill-loud); }
.profile-item-text { display: grid; gap: var(--wa-space-3xs); min-inline-size: 0; }
.profile-item-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); font-weight: var(--wa-font-weight-semibold); }
.profile-item-points { padding: 0 var(--wa-space-xs); border-radius: var(--wa-border-radius-pill); background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); font-weight: var(--wa-font-weight-normal); }
.profile-item[data-done] .profile-item-points { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.profile-item-value { color: var(--wa-color-text-quiet); overflow-wrap: anywhere; }
.profile-item-value[data-empty] { opacity: .6; }
.profile-item-edit { color: var(--wa-color-text-quiet); }
.profile-item-row:hover .profile-item-edit { color: var(--wa-color-brand-on-quiet); }
.profile-thumb { display: block; inline-size: 3rem; block-size: 3rem; border-radius: 50%; object-fit: cover; }
/* 수정 창 */
.profile-item wa-dialog { --width: 34rem; }
.dialog-help { display: flex; gap: var(--wa-space-xs); margin: 0; padding: var(--wa-space-s) var(--wa-space-m); border-radius: var(--wa-border-radius-m); background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-s); }
.dialog-help i { margin-block-start: .25em; }
.profile-help { margin: 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.subject-picker { display: contents; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-2xs); margin: 0; }
.chips strong { inline-size: 100%; font-size: var(--wa-font-size-s); }
.chip { height: auto; margin: 0; padding: var(--wa-space-3xs) var(--wa-space-s); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-pill); background: var(--wa-color-surface-default); color: inherit; font: inherit; font-size: var(--wa-font-size-s); cursor: pointer; transform: none; }
.chip:hover { border-color: var(--wa-color-brand-border-loud); }
.chip[aria-pressed="true"] { border-color: var(--wa-color-brand-border-loud); background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.chip[aria-pressed="true"]::before { content: '\2713'; margin-inline-end: .25em; }
/* 본문이 넓으면: 왼쪽 요약 카드(스크롤해도 따라온다), 오른쪽 항목 카드 */
@container tutor-profile (min-width: 52rem) {
	.profile-layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
	.profile-head { grid-column: 1 / -1; }
	.profile-summary { position: sticky; inset-block-start: calc(var(--bar-height) + var(--wa-space-m)); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.profile-avatar { inline-size: 7rem; block-size: 7rem; font-size: 2.75rem; }
	.profile-score { justify-self: stretch; text-align: start; }
}
.slot-list { margin: 0; padding: 0; list-style: none; }
.slot-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); padding-block: var(--wa-space-2xs); }
.slot-list details { flex-basis: 100%; }
/* 규칙 한 줄: 요일·시각·길이·가격 [삭제] → 예약 N건 알림 → [고치기] 창. [삭제]가 규칙 옆에 붙게 순서를 정한다 */
.slot-list li > form { order: 1; }
.slot-list li > .notice { order: 2; flex-basis: 100%; margin: 0; }
.slot-list li > details { order: 3; }
/* 내 시간표의 절 제목 — 앞의 폼·안내와 붙지 않게(Web Awesome 은 제목의 위 여백이 0 이다) */
.content:has(> .slot-list) > h2 { margin-block-start: var(--wa-space-2xl); }
.content:has(> .slot-list) > h3 { margin-block-start: var(--wa-space-l); }
.slot-list details > summary { inline-size: fit-content; color: var(--wa-color-text-link); cursor: pointer; }
/* 강사 시간표 규칙 입력 — 요일 여러 개를 한 줄에(SSOT 6절 Ontue 방식) */
.schedule-form { margin-block: var(--wa-space-s); }
.weekday-picker { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs) var(--wa-space-m); }
.weekday-picker legend { padding-inline: var(--wa-space-2xs); }
/* 시간표 표를 감싸는 칸 — 안내 · 범례 · [이전]·[다음] · 표(강사 시간표와 강사 상세) */
.timetable { display: grid; gap: var(--wa-space-s); min-inline-size: 0; }
.tutor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--wa-space-m); margin: var(--wa-space-l) 0; padding: 0; list-style: none; }
.tutor-card { padding: var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); }
.tutor-card a { display: grid; justify-items: center; gap: var(--wa-space-2xs); text-decoration: none; }
.tutor-detail header { display: flex; align-items: center; gap: var(--wa-space-l); }
/* 이름 — 값 표. 이름이 긴 언어에서도 값 칸이 화면 밖으로 밀리지 않게 이름 칸은 너비의 65% 까지만(넘으면 줄바꿈) */
.tutor-facts { display: grid; grid-template-columns: fit-content(65%) minmax(0, 1fr); gap: var(--wa-space-2xs) var(--wa-space-m); }
.tutor-facts dd { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); }
.tag { padding: 0 var(--wa-space-xs); border-radius: var(--wa-border-radius-pill); background: var(--wa-color-surface-lowered); }
.notice { padding: var(--wa-space-s); border-radius: var(--wa-border-radius-m); background: var(--wa-color-warning-fill-quiet); }
.pre-line { white-space: pre-line; }
.pager { display: flex; gap: var(--wa-space-m); justify-content: center; }
.time-buttons { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs); }
.entries { inline-size: 100%; border-collapse: collapse; }
.entries th, .entries td { padding: var(--wa-space-2xs) var(--wa-space-xs); border-block-end: 1px solid var(--wa-color-surface-border); text-align: start; }
.entries .amount { text-align: end; font-variant-numeric: tabular-nums; }

/* ── 예약(SSOT 6·8·9절) — 강사 상세의 칸·예약 확인·내 수업·받은 예약·사라진 예약 ─────────── */
/* 시간표 표(SSOT 6절 "시간표 표") — 강사 시간표(/tutor/schedule)와 강사 상세(booking.js)가 같은 모양이다(Ontue 처럼).
   줄 = 매주 수업 칸(시작 · 길이), 열 = 날짜. 좁은 화면에서는 표만 가로로 스크롤되고 첫 열(시각)은 붙어 있다 */
.schedule-table { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); }
.schedule-table:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 2px; }
.schedule-table table { inline-size: max-content; min-inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--wa-font-size-s); }
.schedule-table th, .schedule-table td { padding: var(--wa-space-3xs); border-block-end: 1px solid var(--wa-color-surface-border); text-align: center; vertical-align: middle; }
.schedule-table tbody tr:last-child > * { border-block-end: 0; }
.schedule-table thead th { background: var(--wa-color-surface-lowered); font-weight: var(--wa-font-weight-semibold); line-height: 1.3; white-space: nowrap; }
.schedule-table thead th span { display: block; }
.schedule-table thead th span + span { color: var(--wa-color-text-quiet); font-weight: var(--wa-font-weight-normal); }
.schedule-table thead th[data-weekend] span + span { color: var(--wa-color-danger-on-quiet); }
.schedule-table thead th[data-today] { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
/* 첫 열 — 가로로 스크롤해도 시각이 보이게 붙여 둔다 */
.schedule-table tr > :first-child { position: sticky; inset-inline-start: 0; z-index: 1; min-inline-size: 4.5rem; border-inline-end: 1px solid var(--wa-color-surface-border); background: var(--wa-color-surface-default); }
.schedule-table thead tr > :first-child { background: var(--wa-color-surface-lowered); }
/* 줄 머리 — 시작 시각 · 길이(강사 표에서는 누르면 그 규칙의 창) */
.slot-rule { display: grid; justify-items: center; gap: 0; inline-size: 100%; padding: var(--wa-space-2xs); border: 0; border-radius: var(--wa-border-radius-m); background: none; color: inherit; font: inherit; line-height: 1.25; }
.slot-rule small { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); }
.slot-rule .slot-trial { color: var(--wa-color-success-on-quiet); font-weight: var(--wa-font-weight-semibold); }
button.slot-rule { cursor: pointer; }
button.slot-rule:hover { background: var(--wa-color-brand-fill-quiet); }
/* 칸 하나 — 위에 상태 아이콘, 아래에 가격과 짧은 이름(강사·자기 예약)·메모 */
.slot { display: grid; justify-items: center; align-content: center; gap: 0.15rem; box-sizing: border-box; min-inline-size: 3.4rem; min-block-size: 3.4rem; padding: var(--wa-space-3xs); border: 0; border-radius: var(--wa-border-radius-m); background: none; color: inherit; font: inherit; line-height: 1.2; text-decoration: none; }
.slot-price { font-variant-numeric: tabular-nums; }
.slot-time { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); font-variant-numeric: tabular-nums; }
.slot-name { max-inline-size: 4.5rem; overflow: hidden; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); text-overflow: ellipsis; white-space: nowrap; }
:is(a.slot, button.slot) { cursor: pointer; }
:is(a.slot, button.slot):hover { background: var(--wa-color-brand-fill-quiet); }
:is(a.slot, button.slot):focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: -2px; }
.slot[data-state="past"], .slot[data-state="closed"], .slot[data-state="off"] { color: var(--wa-color-text-quiet); }
.schedule-extra td { vertical-align: top; }
.schedule-extra th { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); font-weight: var(--wa-font-weight-normal); }
/* 상태 아이콘 — 칸과 범례가 같다(SSOT 6절 "시간표의 표시").
   ○ 예약 가능 · ◷ 대기 중 · … 입금 확인 대기(파랑) · ✓ 결제됨(초록) · × 다른 예약(회색) · 선택한 미결제 칸은 스피너.
   흐린 ○ 아직 예약을 받지 않음 · 점선 ○ 휴무일 · 회색 네모 지난 시간 · 점선 네모 수업 없음 */
:is(.slot, .timetable-legend .tag)::before { content: ""; display: grid; place-items: center; box-sizing: border-box; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; font-size: 0.9rem; font-weight: var(--wa-font-weight-bold); line-height: 1; }
:is(.slot, .timetable-legend .tag)[data-state="open"]::before { border: 2px solid var(--wa-color-brand-fill-loud); }
:is(.slot, .timetable-legend .tag)[data-state="pending"]::before { content: "◷"; background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
:is(.slot, .timetable-legend .tag)[data-state="closed"]::before { border: 2px solid var(--wa-color-neutral-border-quiet); }
:is(.slot, .timetable-legend .tag)[data-state="off"]::before { border: 2px dashed var(--wa-color-warning-border-loud); }
:is(.slot, .timetable-legend .tag)[data-state="booked"]::before { content: "…"; background: var(--wa-color-blue-90); color: var(--wa-color-blue-30); }
:is(.slot, .timetable-legend .tag)[data-state="paid"]::before { content: "✓"; background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); }
:is(.slot, .timetable-legend .tag)[data-state="past"]::before { border-radius: var(--wa-border-radius-s); background: var(--wa-color-neutral-fill-normal); }
:is(.slot, .timetable-legend .tag)[data-state="none"]::before { border: 2px dashed var(--wa-color-neutral-border-quiet); border-radius: var(--wa-border-radius-s); }
.slot[data-state="none"]::before { opacity: 0.7; }
:is(.slot, .timetable-legend .tag)[data-owner="other"]::before { content: "×"; background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet); }
:is(.slot, .timetable-legend .tag)[data-loading]:not([data-state="paid"])::before { content: ""; border: 2px solid var(--wa-color-brand-fill-loud); border-inline-end-color: transparent; background: none; animation: timetable-slot-spin 0.8s linear infinite; }
@keyframes timetable-slot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	:is(.slot, .timetable-legend .tag)[data-loading]::before { animation: none; }
}
/* 범례 — 아이콘 + 이름 */
.timetable-legend { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs) var(--wa-space-m); margin: 0; font-size: var(--wa-font-size-s); }
.timetable-legend .tag { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); padding: 0; background: none; }
.timetable-legend .tag::before { inline-size: 1.1rem; block-size: 1.1rem; font-size: 0.75rem; }
/* [이전]·[다음] — 강사 표는 링크, 강사 상세는 버튼 */
.schedule-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-m); }
.schedule-pager[hidden], .schedule-pager [disabled] { opacity: 0.45; }
.schedule-pager a[aria-current="page"] { font-weight: var(--wa-font-weight-semibold); text-decoration: none; color: inherit; }
:dir(rtl) :is(.schedule-pager, .schedule-bar) .fa-chevron-left, :dir(rtl) :is(.schedule-pager, .schedule-bar) .fa-chevron-right { transform: scaleX(-1); }
/* 내 수업·받은 예약 — 예약 하나가 카드 하나. 수락을 기다리는 요청은 앞선에 색, 취소된 예약은 흐리게 */
.booking-list { display: grid; gap: var(--wa-space-s); max-inline-size: 48rem; margin: var(--wa-space-m) 0; padding: 0; list-style: none; }
.booking { display: grid; gap: var(--wa-space-2xs); padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-inline-start-width: 4px; border-radius: var(--wa-border-radius-l); }
.booking p { margin: 0; }
.booking[data-status="booked"] { border-inline-start-color: var(--wa-color-warning-fill-loud); }
.booking[data-status="pending"] { border-inline-start-color: var(--wa-color-warning-fill-loud); }
.booking[data-status="paid"] { border-inline-start-color: var(--wa-color-success-fill-loud); }
.booking[data-status="cancelled"] { color: var(--wa-color-text-quiet); background: var(--wa-color-surface-lowered); }
.booking .form-inline { margin-block-start: var(--wa-space-2xs); }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); }
/* [수업 입장] — 그 예약의 화상 교실로(SSOT 18절). 카드에서 가장 먼저 눈에 띄게 */
.booking .enter-lesson a { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); padding: var(--wa-space-2xs) var(--wa-space-m); border-radius: var(--wa-border-radius-m); background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-weight: var(--wa-font-weight-semibold); text-decoration: none; }
/* 끝난 수업의 결과 한 줄 — 올바로 진행됨은 초록, 결석은 빨강, 모자람은 노랑(SSOT 5·9절) */
.booking .lesson-summary[data-outcome="success"] { color: var(--wa-color-success-on-quiet); }
.booking .lesson-summary:is([data-outcome="tutor_absent"], [data-outcome="learner_absent"], [data-outcome="both_absent"]) { color: var(--wa-color-danger-fill-loud); }
.booking .lesson-summary[data-outcome="short"] { color: var(--wa-color-warning-on-quiet); }
.booking .complete-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-2xs) var(--wa-space-s); margin: 0; }
/* 결제 — 카드의 [결제하기]와 기한, 그리고 결제 창(SSOT 4·8절 "결제 버튼"). PayPal 은 창 안의 링크가 새 탭으로 연다 */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-s); }
.pay-dialog { box-sizing: border-box; inline-size: min(32rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem); padding: var(--wa-space-l); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); color: inherit; }
.pay-dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.pay-dialog h2 { margin: 0 0 var(--wa-space-s); font-size: var(--wa-font-size-l); }
.pay-dialog dl { margin: 0; }
.pay-dialog > p { margin-block: var(--wa-space-s) 0; }
.pay-steps { display: grid; gap: var(--wa-space-s); margin-block: var(--wa-space-m) 0; padding-inline-start: var(--wa-space-l); }
.pay-steps li { display: grid; gap: var(--wa-space-2xs); }
/* PayPal 로 내기 — 창에서 가장 눈에 띄는 버튼처럼 */
.pay-form { margin: 0; }
.pay-link { justify-self: start; padding: var(--wa-space-xs) var(--wa-space-m); border: 0; border-radius: var(--wa-border-radius-m); background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font: inherit; font-weight: var(--wa-font-weight-semibold); text-decoration: none; cursor: pointer; }
/* 단서 — PayPal 에서 결제를 마쳤는지 반드시 확인(SSOT 8절). 목록 번호는 그대로 두고 경고 색으로 */
.pay-steps .pay-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); }
.pay-link:hover { background: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal); }
.pay-link:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 2px; }
.pay-dialog menu { display: flex; justify-content: flex-end; margin: var(--wa-space-m) 0 0; padding: 0; }
.booking-cancel-dialog menu { gap: var(--wa-space-s); flex-wrap: wrap; }
/* 강사 취소 조건 — 시간 경계를 나눈 평판 감점 표(SSOT 9절) */
.booking-cancel-dialog .tutor-cancel-terms { inline-size: 100%; margin-block-start: var(--wa-space-m); border-collapse: collapse; }
.booking-cancel-dialog .tutor-cancel-terms :is(th, td) { padding: var(--wa-space-xs); border-block-end: 1px solid var(--wa-color-surface-border); text-align: start; }
.booking-cancel-dialog .tutor-cancel-terms th { background: var(--wa-color-surface-lowered); }
.booking-cancel-dialog .tutor-cancel-terms tr > :last-child { text-align: center; }

/* 거래번호 — 긴 번호도 좁은 화면에서 줄바꿈, 입력은 확인 전에만(SSOT 8절) */
.booking-transaction { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wa-space-xs); }
:is(.booking, .booking-details) code { overflow-wrap: anywhere; unicode-bidi: isolate; }
.transaction-editor { margin-block-start: var(--wa-space-m); }
.transaction-editor form[hidden] { display: none; }
.booking-details > :is(p, dl, details, div, menu) { margin-block-start: var(--wa-space-s); }
.booking-details .pay-link { display: inline-block; }
.booking .refund-cancel { inline-size: 100%; }
.booking .refund-cancel summary { cursor: pointer; }
.booking .refund-cancel .form { margin-block-start: var(--wa-space-s); }
.booking .refund-cancel input[type="file"] { max-inline-size: 100%; }
.booking .booking-refund { margin-block-start: var(--wa-space-s); }
.transaction-editor .form { margin-block-start: var(--wa-space-s); }
.booking-details menu { gap: var(--wa-space-m); flex-wrap: wrap; }
/* 취소·환불 조건 — 접어 두고 보여 주기만 한다(PES 는 계산하지 않는다 — SSOT 9절) */
.cancel-terms { margin-block: var(--wa-space-2xs); }
.cancel-terms > summary { inline-size: fit-content; color: var(--wa-color-text-link); cursor: pointer; }
.cancel-terms ul { margin-block: var(--wa-space-2xs); padding-inline-start: var(--wa-space-l); }
.cancel-terms .profile-help { margin: 0; }
/* 사라진 예약 상황판 — 강사 시간표 맨 위(SSOT 6절) */
.lost-bookings { display: grid; gap: var(--wa-space-xs); margin-block: var(--wa-space-m); padding: var(--wa-space-m); border: 1px solid var(--wa-color-danger-border-quiet); border-radius: var(--wa-border-radius-l); background: var(--wa-color-danger-fill-quiet); }
.lost-bookings h2 { margin: 0; font-size: var(--wa-font-size-l); }
.lost-bookings p, .lost-bookings ul { margin: 0; }
.lost-bookings ul { padding-inline-start: var(--wa-space-l); }
/* 시간표의 예약된 수업 — 지난 수업은 흐리게 */
.slot-list li[data-past] { color: var(--wa-color-text-quiet); }

/* ── 채팅(SSOT 13절) — 윗줄 배지·방 목록·채팅방 ─────────────────── */
/* 읽지 않은 채팅 배지 — 상단 도구 버튼과 같은 틀, 수는 빨간 알약 */
.talk-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	box-sizing: border-box;
	min-inline-size: 42px;
	block-size: 42px;
	padding-inline: 0.6rem;
	border: 1px solid var(--shell-bar-tool-line);
	border-radius: 0.85rem;
	background: var(--shell-bar-tool-bg);
	color: var(--shell-bar-ink);
	text-decoration: none;
}
.talk-badge:hover { background: var(--shell-bar-hover); border-color: var(--shell-bar-active-line); }
.talk-badge:focus-visible { outline: 2px solid var(--shell-bar-focus); outline-offset: 2px; }
.talk-badge span,
.talk-unread {
	min-inline-size: 1.25rem;
	padding-inline: 0.3rem;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-danger-fill-loud);
	color: var(--wa-color-danger-on-loud);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
}
@media (max-width: 599px) {
	.talk-badge { min-inline-size: 34px; block-size: 34px; padding-inline: 0.35rem; border-radius: 0.7rem; }
}
/* 강사 상세의 [이 강사와 채팅] */
.talk-start {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-xs) var(--wa-space-m);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-weight: 600;
	text-decoration: none;
}
/* 방 목록 — 1:1 · 그룹 · 오픈 탭(그룹·오픈은 안내만) */
.talk-tabs { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); margin-block: var(--wa-space-m); }
.talk-tabs a { padding: var(--wa-space-2xs) var(--wa-space-m); border-radius: var(--wa-border-radius-pill); background: var(--wa-color-surface-lowered); color: inherit; text-decoration: none; }
.talk-tabs a[aria-current="page"] { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.talk-rooms { display: grid; gap: var(--wa-space-2xs); max-inline-size: 40rem; margin: 0; padding: 0; list-style: none; }
.talk-rooms a { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); color: inherit; text-decoration: none; }
.talk-rooms a:hover { background: var(--wa-color-surface-lowered); }
/* 채팅방 — 메시지 목록은 화면 높이에 맞춘 칸 안에서 스크롤하고, 보내기 칸은 그 바로 아래에 온다(위에 다른 막대가 붙어도 화면 밖으로 밀리지 않게) */
.talk-room { display: grid; gap: var(--wa-space-s); max-inline-size: 48rem; }
.talk-room-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs) var(--wa-space-m); }
.talk-room-head h1 { margin: 0; font-size: var(--wa-font-size-l); }
.talk-log { display: flex; flex-direction: column; gap: var(--wa-space-xs); block-size: clamp(16rem, calc(100dvh - var(--bar-height) - 22rem), 44rem); margin: 0; padding: var(--wa-space-s); overflow-y: auto; border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); list-style: none; }
.talk-message { display: grid; gap: var(--wa-space-3xs); max-inline-size: min(34rem, 85%); align-self: flex-start; padding: var(--wa-space-xs) var(--wa-space-s); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-lowered); }
.talk-message[data-mine] { align-self: flex-end; background: var(--wa-color-brand-fill-quiet); }
.talk-message[data-mine] .talk-sender { display: none; }
.talk-message[data-kind="bot"] { background: var(--wa-color-warning-fill-quiet); }
.talk-sender { font-size: var(--wa-font-size-xs); font-weight: 700; }
.talk-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.talk-link { justify-self: start; font-size: var(--wa-font-size-s); }
.talk-link[data-booking-link="true"] {
	display: inline-flex;
	padding-block: var(--wa-space-xs);
	padding-inline: var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	text-decoration: none;
}
.talk-message time { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); }
.talk-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wa-space-xs); align-items: end; }
.talk-composer .form-errors { grid-column: 1 / -1; }
.talk-composer textarea { box-sizing: border-box; inline-size: 100%; min-block-size: 3rem; padding: var(--wa-space-xs); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); font: inherit; resize: vertical; }
/* 보내기 칸 — 글 칸과 [보내기]가 한 줄, 답장·고치기 안내와 첨부·진행 막대는 줄 전체(빈 칸을 채우도록 dense) */
.talk-composer { grid-auto-flow: row dense; }
.talk-composer > textarea { grid-column: 1; }
.talk-composer > button[type="submit"] { grid-column: 2; }
.talk-composer > .talk-composing,
.talk-composer > .talk-attach,
.talk-composer > progress { grid-column: 1 / -1; }
.talk-composing { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); margin: 0; padding: var(--wa-space-2xs) var(--wa-space-s); border-inline-start: 3px solid var(--wa-color-brand-fill-loud); border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); font-size: var(--wa-font-size-s); }
.talk-composing span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-attach { display: flex; flex-wrap: wrap; gap: var(--wa-space-m); font-size: var(--wa-font-size-s); }
.talk-attach label { position: relative; cursor: pointer; }
/* 파일 칸은 글자 버튼([사진]·[동영상])으로만 보인다 — Web Awesome 의 input[type='file'] 스타일이 hidden 속성을 덮으므로 여기서 감춘다.
   display: none 이 아니라 눈에만 안 보이게 두어 키보드(Tab → Enter)로도 고른다 */
.talk-attach input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.talk-attach label:focus-within { outline: var(--wa-focus-ring); outline-offset: 2px; border-radius: var(--wa-border-radius-s); }
.talk-composer progress { inline-size: 100%; block-size: 0.5rem; }

/* 메시지 안 — 인용(답장)·사진·동영상·아래 줄(수정됨·시각·동작) */
.talk-quote { display: grid; gap: 0; padding: var(--wa-space-3xs) var(--wa-space-xs); border: 0; border-inline-start: 3px solid var(--wa-color-brand-border-quiet); border-radius: var(--wa-border-radius-s); background: color-mix(in srgb, var(--wa-color-surface-default) 60%, transparent); color: inherit; font: inherit; font-size: var(--wa-font-size-xs); text-align: start; cursor: pointer; }
.talk-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wa-color-text-quiet); }
.talk-media { display: block; max-inline-size: min(100%, 20rem); border-radius: var(--wa-border-radius-m); overflow: hidden; }
.talk-media img { display: block; inline-size: 100%; block-size: auto; }
video.talk-media { inline-size: min(100%, 20rem); max-block-size: 24rem; background: #000; }
.talk-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--wa-space-2xs) var(--wa-space-s); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); }
.talk-actions { display: inline-flex; flex-wrap: wrap; gap: var(--wa-space-xs); }
.talk-actions .link-button { font-size: var(--wa-font-size-2xs); }
/* 손으로 누를 때만 보이게 하지 않는다 — 휴대폰에는 마우스 올리기가 없다. 대신 넓은 화면에서는 올렸을 때만 진하게 */
@media (hover: hover) {
	.talk-actions { opacity: 0.35; transition: opacity 0.15s; }
	.talk-message:hover .talk-actions,
	.talk-actions:focus-within { opacity: 1; }
}
.talk-message[data-kind="deleted"],
.talk-message[data-hidden] { background: transparent; border: 1px dashed var(--wa-color-surface-border); }
.talk-message[data-kind="deleted"] .talk-text,
.talk-message[data-hidden] .talk-text { color: var(--wa-color-text-quiet); font-style: italic; }
.talk-older { align-self: center; list-style: none; }
/* 방 안내(들어옴·나감·내보냄·방장 바뀜) — 말풍선 없이 가운데 작은 글씨 */
.talk-message[data-kind="system"] { align-self: center; padding-block: 0; background: none; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); text-align: center; }
.talk-message[data-kind="system"] .talk-meta { display: none; }

/* 방 머리·메뉴 — 설명, 멤버(방장 표시·일대일·차단·방장 넘기기·내보내기), 초대 링크, 나가기 */
.talk-room-head .talk-count { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.talk-room-description { margin: 0; color: var(--wa-color-text-quiet); white-space: pre-line; }
.talk-panel { display: grid; gap: var(--wa-space-s); margin: 0; }
details.talk-panel { padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); }
details.talk-panel > summary { cursor: pointer; font-weight: 600; }
/* details 는 grid 의 gap 이 안쪽(열린 내용)까지 가지 않는다 — 멤버 목록·초대 링크·방 이름 폼·나가기 사이를 따로 띄운다 */
details.talk-panel > :not(summary) { margin-block-start: var(--wa-space-m); }
.talk-members { display: grid; gap: var(--wa-space-2xs); margin: 0; padding: 0; list-style: none; }
.talk-members li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); }
.talk-member-actions { display: inline-flex; flex-wrap: wrap; gap: var(--wa-space-s); margin-inline-start: auto; font-size: var(--wa-font-size-s); }
.talk-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); margin: 0; }
.talk-invite input { flex: 1 1 16rem; min-inline-size: 0; padding: var(--wa-space-2xs) var(--wa-space-xs); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); font: inherit; font-size: var(--wa-font-size-s); }
/* [새 메시지 ↓] — 위로 올려 읽는 동안 새 메시지가 오면 목록 아래 가운데 */
.talk-new-below { justify-self: center; padding: var(--wa-space-3xs) var(--wa-space-m); border: 0; border-radius: var(--wa-border-radius-pill); background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font: inherit; font-size: var(--wa-font-size-s); cursor: pointer; }
/* 입력 중 표시(v1) — 메시지 목록 바로 아래 한 줄 */
.talk-typing { margin: 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); font-style: italic; }
/* 방마다 알림 끄기(SSOT 13절 "푸시 알림") — 머리글 오른쪽 끝. 꺼 둔 방은 버튼을 흐리게 */
.talk-mute { margin-inline-start: auto; }
.talk-mute button { font-size: var(--wa-font-size-s); }
.talk-mute button[aria-pressed="true"] { color: var(--wa-color-text-quiet); }

/* 목록 화면 — 방 인원, 그룹·오픈 만들기, 오픈 채팅 목록·검색, 차단 목록 */
.talk-tabs .talk-blocks-link { margin-inline-start: auto; background: transparent; color: var(--wa-color-text-link); }
.talk-count { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); }
/* 방 줄 — 윗줄: 이름·인원·고정·알림 끔 … 시각, 아랫줄: 마지막 메시지 … 읽지 않은 수(v1). 옆에 [고정] */
.talk-rooms li { display: flex; align-items: stretch; gap: var(--wa-space-2xs); }
.talk-rooms li > a { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; column-gap: var(--wa-space-xs); row-gap: var(--wa-space-3xs); min-inline-size: 0; }
.talk-rooms li[data-pinned] > a { border-inline-start: 3px solid var(--wa-color-brand-fill-loud); }
.talk-rooms a strong { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-pinned,
.talk-muted { padding-inline: var(--wa-space-2xs); border-radius: var(--wa-border-radius-pill); background: var(--wa-color-surface-lowered); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); white-space: nowrap; }
.talk-time { order: 4; margin-inline-start: auto; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); white-space: nowrap; }
.talk-preview { order: 5; flex: 1 0 calc(100% - 2.5rem); min-inline-size: 0; overflow: hidden; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); text-overflow: ellipsis; white-space: nowrap; }
.talk-rooms a .talk-unread { order: 6; margin-inline-start: auto; }
.talk-pin { display: flex; align-items: center; margin: 0; }
.talk-pin button { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); white-space: nowrap; }
.talk-create { max-inline-size: 40rem; margin-block: var(--wa-space-m); }
/* Web Awesome 의 details(테두리 상자·꺾쇠)를 그대로 쓴다 — 멤버 패널(details.talk-panel)과 같은 모양 */
.talk-create > summary { font-weight: 600; cursor: pointer; }
/* "참여할 수 있는 오픈 채팅" — 페이지 제목(h1)보다 한 단계 작게 */
h2:has(+ .talk-search) { margin-block: var(--wa-space-xl) var(--wa-space-s); font-size: var(--wa-font-size-l); }
.talk-create > .form { margin-block-start: var(--wa-space-s); }
.talk-search input[type="search"] { flex: 1 1 14rem; min-inline-size: 0; }
.talk-open-list,
.talk-blocks { display: grid; gap: var(--wa-space-2xs); max-inline-size: 40rem; margin: var(--wa-space-s) 0; padding: 0; list-style: none; }
/* Web Awesome 의 목록 항목 왼쪽 여백(ul li)을 없앤다 — 채팅의 목록은 카드처럼 제목과 같은 선에서 시작한다 */
.talk-rooms li,
.talk-members li,
.talk-open-list li,
.talk-blocks li,
.talk-log > li { margin-inline-start: 0; }
.talk-open-list li,
.talk-blocks li { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); }
.talk-open-list li > div { display: grid; gap: var(--wa-space-3xs); min-inline-size: 0; }
.talk-open-list p { margin: 0; overflow: hidden; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); text-overflow: ellipsis; white-space: nowrap; }
/* 이 기기의 채팅 알림 켜기 — 탭 아래 한 줄 */
.talk-push { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); margin: 0 0 var(--wa-space-s); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }

/* 신고 창 */
.talk-report { max-inline-size: min(28rem, calc(100vw - 2rem)); padding: var(--wa-space-l); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); color: inherit; }
.talk-report::backdrop { background: rgb(0 0 0 / 0.4); }
.talk-report form { display: grid; gap: var(--wa-space-s); }
.talk-report h2 { margin: 0; font-size: var(--wa-font-size-l); }
.talk-report fieldset { display: grid; gap: var(--wa-space-2xs); margin: 0; padding: var(--wa-space-s); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); }
.talk-report textarea { box-sizing: border-box; inline-size: 100%; padding: var(--wa-space-xs); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); font: inherit; }
.talk-report menu { display: flex; justify-content: flex-end; gap: var(--wa-space-s); margin: 0; padding: 0; }

/* ── 화면 공용 — 제목 · 폼 · 카드의 읽기 리듬 ───────────── */
body { line-height: 1.65; }
.content { min-inline-size: 0; padding: clamp(1rem, 2.1vw, 2rem); }
.content :where(h1, h2, h3, h4) { text-wrap: balance; overflow-wrap: anywhere; }
.content :where(h1) { font-size: clamp(1.8rem, 2.5vw, 2.65rem); line-height: 1.3; letter-spacing: -0.035em; }
.content :where(h2) { font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.4; }
.content > h1 { margin-block: 0 var(--wa-space-l); padding-block-end: var(--wa-space-m); border-block-end: 1px solid var(--wa-color-surface-border); }
.content > h2 { margin-block: var(--wa-space-xl) var(--wa-space-s); }
.content :where(p, dd) { overflow-wrap: anywhere; }
.content :where(a, button, summary):focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 3px; }
.content :where(input, select, textarea) { max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
.content .form label { gap: var(--wa-space-2xs); font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); }
.content .form :is(small, .profile-help) { font-weight: var(--wa-font-weight-normal); line-height: 1.7; }
.content .form input:not([type='checkbox'], [type='radio'], [type='file'], [type='range']),
.content .form select,
.content .form textarea { inline-size: 100%; min-block-size: 2.75rem; font-size: 1rem; background-color: var(--wa-color-surface-raised); }
.content .form button[type='submit'] { justify-self: start; min-block-size: 2.75rem; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); border-color: transparent; white-space: normal; }
.content .form button[type='submit']:hover { background: var(--theme-accent-hover); }
.content .form button[type='submit']:disabled { opacity: 0.5; cursor: not-allowed; }
.form-inline label { flex: 1 1 12rem; min-inline-size: 0; }
.form-inline button { flex: 0 0 auto; }
.form fieldset { background: var(--wa-color-surface-raised); }
.form-errors { line-height: 1.75; }
.notice { border: 1px solid color-mix(in srgb, var(--wa-color-warning-on-quiet) 18%, var(--wa-color-surface-border)); line-height: 1.8; }
.tag { display: inline-flex; align-items: center; padding: var(--wa-space-3xs) var(--wa-space-xs); font-size: var(--wa-font-size-s); line-height: 1.5; }
.pager { flex-wrap: wrap; align-items: center; padding-block: var(--wa-space-m); }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding-inline: var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-raised); text-decoration: none; }
.content .entries :is(th, td) { padding: var(--wa-space-s); }
.content .entries thead { background: var(--wa-color-surface-lowered); }

/* ── 로그인 — 가운데 카드 · 소셜 로그인 · 이메일 폼 ───────── */
.login { box-sizing: border-box; margin-inline: auto; margin-block: var(--wa-space-l); max-inline-size: 31rem; padding: clamp(1.25rem, 3vw, 2.25rem); 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); }
.login h1 { padding-block-end: var(--wa-space-s); }
.login-buttons wa-button::part(base) { min-block-size: 2.9rem; background: var(--wa-color-surface-raised); color: var(--wa-color-text-normal); border-color: var(--wa-color-surface-border); }
.login-buttons wa-button:hover::part(base) { background: var(--wa-color-surface-lowered); border-color: var(--wa-color-brand-border-normal); }
.login .login-choose > .form { padding-block-start: var(--wa-space-l); border-block-start: 1px solid var(--wa-color-surface-border); }
.login .form button[type='submit'] { inline-size: 100%; }
.login-switch { line-height: 1.85; }

/* ── 강사 찾기 · 상세 — 표면 · 정보 묶음 ───────────────── */
.content:has(> .tutor-cards) > .form-inline { 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); }
.tutor-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.tutor-cards > li { margin-inline-start: 0; }
.tutor-card { display: flex; flex-direction: column; gap: var(--wa-space-s); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); transition: border-color 160ms, box-shadow 160ms; }
.tutor-card:has(a:hover), .tutor-card:focus-within { border-color: var(--wa-color-brand-border-normal); box-shadow: var(--wa-shadow-m); }
.tutor-card a { min-inline-size: 0; grid-template-columns: minmax(0, 1fr); color: var(--wa-color-text-normal); }
.tutor-card a strong { inline-size: 100%; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: var(--wa-font-size-l); }
.tutor-card .tutor-photo { inline-size: 6rem; block-size: 6rem; border: 4px solid var(--wa-color-brand-fill-quiet); }
.tutor-card p { margin: 0; line-height: 1.75; }
.tutor-card .tutor-last-login { display: flex; align-items: center; justify-content: center; gap: var(--wa-space-2xs); margin-block-start: calc(-1 * var(--wa-space-2xs)); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); text-align: center; }
.tutor-last-login[data-activity]:not([data-activity='unknown'])::before { content: ''; flex-shrink: 0; inline-size: .5rem; block-size: .5rem; border-radius: var(--wa-border-radius-circle); }
.tutor-last-login[data-activity='recent']::before { background: var(--wa-color-success-fill-loud); }
.tutor-last-login[data-activity='away']::before { background: var(--wa-color-orange-50); }
.tutor-last-login[data-activity='inactive']::before { background: var(--wa-color-danger-fill-loud); }
.tutor-card .tags { margin-block-start: auto; }
.tutor-detail { max-inline-size: 60rem; }
.tutor-detail > header { flex-wrap: wrap; 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); }
.tutor-detail > header > div { flex: 1 1 13rem; min-inline-size: 0; }
.tutor-detail > header h1 { margin-block: 0 var(--wa-space-xs); }
.tutor-detail > h2 { margin-block: var(--wa-space-xl) var(--wa-space-s); }
.tutor-detail > .pre-line { max-inline-size: 70ch; line-height: 1.9; }
.tutor-detail > .tutor-facts { padding: var(--wa-space-l); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); }
.tutor-facts { row-gap: var(--wa-space-s); }
.tutor-facts dt { color: var(--wa-color-text-quiet); }
.tutor-facts :is(dt, dd) { overflow-wrap: anywhere; }

/* ── 예약 · 시간표 — 상태색을 지키면서 카드 여백을 통일 ─────── */
.booking { gap: var(--wa-space-xs); padding: var(--wa-space-l); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.booking-list > li { margin-inline-start: 0; }
.booking .booking-actions { margin-block-start: var(--wa-space-xs); }
.schedule-table { background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.schedule-table thead th { padding-block: var(--wa-space-s); }
.pay-dialog, .talk-report { background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-l); }
.pay-dialog { overflow-y: auto; }
.slot-list li { margin-inline-start: 0; padding-block: var(--wa-space-s); }

/* ── 채팅 — 대화목록 · 입력 · 메시지 ──────────────────── */
.talk-rooms a, .talk-open-list li, .talk-blocks li, details.talk-panel, .talk-create { background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.talk-rooms { gap: var(--wa-space-xs); }
.talk-rooms li > a { padding-block: var(--wa-space-m); }
.talk-log { padding: var(--wa-space-m); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.talk-message { padding: var(--wa-space-s) var(--wa-space-m); }
.talk-text { line-height: 1.8; }
.talk-composer textarea { color: var(--wa-color-text-normal); background: var(--wa-color-surface-raised); font-size: 1rem; }
.talk-tabs { padding: var(--wa-space-2xs); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); }
.talk-tabs a { display: inline-flex; align-items: center; min-block-size: 2.5rem; box-sizing: border-box; }

/* ── 모바일 · 긴 언어 · 움직임 줄이기 ─────────────────── */
@media (max-width: 599px) {
	.topbar { flex-wrap: wrap; block-size: auto; min-block-size: var(--bar-height); padding-block: var(--wa-space-xs); }
	.topbar .main-menu { order: 3; flex: 1 0 100%; }
	.topbar .menu-tab { flex-direction: row; gap: var(--wa-space-xs); block-size: 2.5rem; min-inline-size: 0; padding-inline: var(--wa-space-s); }
	.topbar .menu-tab i { font-size: 0.95rem; }
	.topbar-tools { flex-wrap: wrap; }
	.topbar-brand { font-size: var(--wa-font-size-m); }
	.tutor-detail > header { gap: var(--wa-space-m); }
	.tutor-detail > .tutor-facts { padding: var(--wa-space-m); }
	.booking { padding: var(--wa-space-m); }
	.form-inline { align-items: stretch; }
	.form-inline label { flex-basis: 100%; }
}
:lang(ur) .content :where(h1, h2, h3, label) { letter-spacing: normal; line-height: 2; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; }
	.menu-tab, .tutor-card, .page-guide-speak, .pes-button, .pes-card { transition: none; }
	.menu-tab:hover, .pes-card:hover, .pes-button:hover { transform: none; }
}

/* ── 공통 폼 · 키보드 탐색 — 선명한 경계와 일정한 여백 ───── */
.content .form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 3px;
}
:where(.topbar, .site-footer, .quickbar, .lyen, .drawer-group) :is(a, button, summary):focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 3px;
}