/* ── 공개 강사 상세 — 프로필 요약 · 오른쪽 도구 · 소개 창 ─────────────────── */
.teacher-detail {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.teacher-detail .teacher-reviews article {
	padding-block: var(--wa-space-m);
	border-block-end: 1px solid var(--wa-color-surface-border);
	overflow-wrap: anywhere;
}
.teacher-detail > header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
}
.teacher-detail .teacher-detail-summary p { margin-block: var(--wa-space-xs) 0; overflow-wrap: anywhere; }
.teacher-detail > :is(p, h2) { margin: 0; }
.teacher-detail .teacher-detail-actions { display: grid; gap: var(--wa-space-xs); }
.teacher-detail .teacher-detail-action {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--wa-color-brand-border-quiet);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font: inherit;
	font-size: var(--wa-font-size-l);
	text-decoration: none;
	cursor: pointer;
}
.teacher-detail .teacher-detail-actions a { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.teacher-detail .teacher-detail-action:hover { filter: brightness(0.95); }
.teacher-detail .teacher-detail-action:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 2px; }
.teacher-detail .teacher-detail-dialog {
	box-sizing: border-box;
	inline-size: min(44rem, calc(100vw - 2rem));
	max-block-size: calc(100dvh - 2rem);
	padding: var(--wa-space-l);
	overflow-y: auto;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--wa-shadow-l);
}
.teacher-detail .teacher-detail-dialog::backdrop { background: color-mix(in srgb, var(--sonub-ink) 45%, transparent); }
.teacher-detail .teacher-detail-dialog[open] { display: block; }
.teacher-detail .teacher-detail-dialog > header { inline-size: 100%; justify-content: space-between; gap: var(--wa-space-s); margin-block-end: var(--wa-space-l); }
.teacher-detail .teacher-detail-dialog > header h2 { margin: 0; font-size: var(--wa-font-size-xl); }
.teacher-detail .teacher-detail-dialog form { margin: 0; }
.teacher-detail .teacher-detail-dialog .teacher-facts { margin: 0; }
.teacher-detail .teacher-detail-dialog .pre-line { overflow-wrap: anywhere; }
.teacher-detail .teacher-detail-video-dialog { inline-size: min(52rem, calc(100vw - 2rem)); }
.teacher-detail .teacher-detail-video-dialog .teacher-video { display: block; inline-size: 100%; max-inline-size: none; border-radius: var(--wa-border-radius-m); }

@media (max-width: 599px) {
	.teacher-detail > header { grid-template-columns: minmax(0, 1fr) auto; }
	.teacher-detail > header .teacher-photo { inline-size: 5rem; block-size: 5rem; }
	.teacher-detail .teacher-detail-summary { grid-column: 1; }
	.teacher-detail .teacher-detail-actions { grid-column: 2; grid-row: 1 / 3; align-self: start; }
	.teacher-detail .teacher-detail-dialog { padding: var(--wa-space-m); }
	.teacher-detail .teacher-detail-dialog .teacher-facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--wa-space-2xs); }
	.teacher-detail .teacher-detail-dialog .teacher-facts dd { margin-block-end: var(--wa-space-s); }
}

/* 공개 프로필의 공통 카드와 이동. SSOT 3·5·6·9·11·16절. */
.teacher-detail.sonub-page { max-inline-size: 76rem; margin-inline: auto; }
.teacher-detail > .teacher-public-header { margin: 0; gap: var(--wa-space-l); align-items: start; }
.teacher-public-header > .sonub-eyebrow { grid-column: 1 / -1; }
.teacher-detail-summary { min-inline-size: 0; }
.teacher-detail-summary h1 { overflow-wrap: anywhere; line-height: 1.4; }
.teacher-detail > .teacher-public-header .teacher-photo { inline-size: 6rem; block-size: 6rem; border: 4px solid var(--sonub-accent-soft); }
.teacher-detail .teacher-detail-actions .teacher-detail-action { inline-size: auto; min-block-size: 2.75rem; block-size: auto; grid-auto-flow: column; justify-content: start; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); font-size: var(--wa-font-size-s); }
.teacher-detail-nav { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); padding: var(--wa-space-s); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); }
.teacher-detail-nav a { display: inline-flex; align-items: center; gap: var(--wa-space-s); min-block-size: 2.75rem; padding: var(--wa-space-s) var(--wa-space-m); border-radius: var(--wa-border-radius-m); font-size: var(--wa-font-size-s); text-decoration: none; }
.teacher-detail-nav a:hover { background: var(--sonub-accent-soft); }
.teacher-detail-section { display: grid; gap: var(--wa-space-l); min-inline-size: 0; padding: var(--wa-space-l); border: 1px solid var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); box-shadow: var(--sonub-shadow-card); }
.teacher-detail-section > :is(h2,p) { margin: 0; }
.teacher-detail-section > h2 { font-size: var(--wa-font-size-l); }
.teacher-detail .teacher-reputation-summary { display: grid; gap: var(--wa-space-m); }
.teacher-detail .teacher-reputation-summary > :is(h2,p) { margin: 0; }
.teacher-detail .teacher-reputation-summary h2 { font-size: var(--wa-font-size-l); }
.teacher-detail .teacher-reputation-summary ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--wa-space-s); padding: 0; margin: 0; list-style: none; }
.teacher-detail .teacher-reputation-summary li { margin: 0; padding: var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-canvas); line-height: 1.8; overflow-wrap: anywhere; }
.teacher-detail .reputation-status { justify-self: start; padding: var(--wa-space-xs) var(--wa-space-m); border-radius: var(--wa-border-radius-pill); background: var(--sonub-accent-soft); color: var(--sonub-accent-ink); }
.teacher-detail .teacher-reviews { display: grid; gap: var(--wa-space-m); min-inline-size: 0; }
.teacher-detail .teacher-reviews > h2 { margin: 0; font-size: var(--wa-font-size-l); }
.teacher-detail .teacher-reviews article { padding: var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-canvas); }
.teacher-detail .teacher-reviews article p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.teacher-detail .pager { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); align-items: center; justify-content: center; }
.teacher-detail .pager a { min-block-size: 2.75rem; display: inline-flex; align-items: center; padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); text-decoration: none; }
.teacher-detail .schedule-pager button { min-block-size: 2.75rem; padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); }
@media(max-width:40rem) {
    .teacher-detail > .teacher-public-header { grid-template-columns: auto minmax(0,1fr); }
    .teacher-detail .teacher-detail-summary { grid-column: 2; }
    .teacher-detail .teacher-detail-actions { grid-column: 1 / -1; grid-row: auto; display: flex; flex-wrap: wrap; }
    .teacher-detail-section { padding: var(--wa-space-m); }
    .teacher-detail .teacher-reputation-summary ul { grid-template-columns: minmax(0,1fr); }
}

/* 긴 이름·시간표·소개·후기의 읽기와 이동을 보완한다. */
.teacher-detail > .teacher-public-header { border-block-start: 3px solid var(--sonub-accent); border-radius: var(--sonub-radius-panel); box-shadow: var(--sonub-shadow-card); }
.teacher-detail-nav { position: sticky; inset-block-start: calc(var(--bar-height) + var(--wa-space-s)); z-index: 5; flex-wrap: nowrap; overflow: auto; box-shadow: var(--sonub-shadow-card); }
.teacher-detail-nav a { flex: none; white-space: nowrap; }
.teacher-detail :is(#teacher-times, #teacher-evidence, #teacher-reviews) { scroll-margin-block-start: 12rem; }
.teacher-detail .schedule-table { max-block-size: min(65dvb,36rem); overflow: auto; }
.teacher-detail .schedule-table thead th { position: sticky; inset-block-start: 0; z-index: 3; }
.teacher-detail .schedule-table thead th:first-child { z-index: 4; }
.teacher-detail :is(.slot-price, .slot-rule strong, .schedule-table thead th span:first-child) { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.teacher-detail .teacher-detail-dialog { overflow: hidden; }
.teacher-detail .teacher-detail-dialog[open] { display: flex; flex-direction: column; gap: var(--wa-space-l); }
.teacher-detail .teacher-detail-dialog > header { display: flex; align-items: center; flex: none; margin: 0; }
.teacher-detail .teacher-detail-dialog > header h2 { min-inline-size: 0; overflow-wrap: anywhere; }
.teacher-dialog-content { min-block-size: 0; min-inline-size: 0; overflow: auto; }
.teacher-dialog-content > :is(h2,p) { line-height: 1.8; }
.teacher-detail .teacher-facts dd { min-inline-size: 0; overflow-wrap: anywhere; }
.teacher-detail .teacher-detail-video-dialog .teacher-video { aspect-ratio: 16 / 9; background: var(--sonub-canvas); }
.teacher-review-list { display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--wa-space-m); min-inline-size: 0; max-block-size: min(75dvb,48rem); overflow: auto; padding: var(--wa-space-2xs); }
.teacher-review-list:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
.teacher-detail .teacher-reviews .teacher-review-list article { margin: 0; }
@media(max-width:40rem) {
    .teacher-detail > .teacher-public-header { grid-template-columns: minmax(0,1fr); }
    .teacher-detail .teacher-detail-summary { grid-column: 1; }
    .teacher-detail .teacher-detail-actions { grid-column: 1; }
    .teacher-detail-nav { inset-block-start: 9rem; }
    .teacher-detail :is(#teacher-times, #teacher-evidence, #teacher-reviews) { scroll-margin-block-start: 16rem; }
}
.site-content .teacher-detail-nav { inset-block-start: 5rem; }
.site-content .teacher-detail :is(#teacher-times, #teacher-evidence, #teacher-reviews) { scroll-margin-block-start: 12rem; }

.teacher-dialog-content:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: -2px; }