/* 공개 강사 목록과 검색(SSOT 3·5·7·11절). 다른 강사 화면의 카드는 건드리지 않는다. */
.teacher-directory.sonub-page { display: grid; gap: var(--wa-space-l); max-inline-size: 76rem; margin-inline: auto; min-inline-size: 0; }
.teacher-directory .sonub-page-header { margin: 0; }
.directory-search { 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); }
.directory-search h2 { display: flex; align-items: center; gap: var(--wa-space-s); margin: 0; font-size: var(--wa-font-size-l); }
.teacher-directory .directory-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-m); max-inline-size: none; }
.directory-filter > label:first-child { grid-column: 1 / -1; }
.directory-filter > label { min-inline-size: 0; gap: var(--wa-space-s); }
.directory-filter :is(input[type='search'], select) { min-inline-size: 0; inline-size: 100%; box-sizing: border-box; }
.directory-filter .form-check { 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); line-height: 1.7; background: var(--sonub-canvas); }
.directory-filter button { min-block-size: 2.75rem; }
.directory-results { min-inline-size: 0; scroll-margin-block-start: 10rem; }
.teacher-directory .teacher-cards { margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.teacher-directory .teacher-card { padding: 0; min-inline-size: 0; border-radius: var(--sonub-radius-panel); overflow: hidden; }
.teacher-directory .directory-card-link { display: flex; flex-direction: column; align-items: center; gap: var(--wa-space-m); padding: var(--wa-space-l); block-size: 100%; min-inline-size: 0; color: var(--sonub-ink); }
.teacher-directory .directory-card-link strong { font-size: var(--wa-font-size-l); }
.directory-card-link .teacher-avatar { flex: none; }
.directory-card-link :is(p, .tag) { max-inline-size: 100%; overflow-wrap: anywhere; }
.teacher-directory .directory-card-link .tags { margin-block: 0; justify-content: center; }
.teacher-directory .directory-card-link .teacher-last-login { margin: 0; }
.directory-verified { display: inline-flex; align-items: center; gap: var(--wa-space-xs); background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.directory-reputation { color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.directory-headline { align-self: stretch; line-height: 1.8; }
.directory-card-link .directory-subjects { align-self: stretch; padding-block-start: var(--wa-space-m); border-block-start: 1px solid var(--sonub-border); }
.directory-empty { grid-column: 1 / -1; }
.teacher-directory .pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wa-space-s); margin-block: var(--wa-space-m); }
.teacher-directory .pager a { display: inline-flex; align-items: center; 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); background: var(--sonub-surface); text-decoration: none; }
@media (max-width: 40rem) { .directory-search { padding: var(--wa-space-m); } .teacher-directory .directory-filter { grid-template-columns: minmax(0, 1fr); } }

/* 검색 조건과 실행을 분리하고 결과에서 검색으로 쉽게 돌아온다. */
.directory-filter :is(.directory-options, .directory-filter-actions) { grid-column: 1 / -1; }
.directory-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wa-space-s); }
.teacher-directory .directory-options .form-check { inline-size: auto; margin: 0; align-self: stretch; }
.directory-filter-actions { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); padding-block-start: var(--wa-space-m); border-block-start: 1px solid var(--sonub-border); }
.directory-filter-actions > :is(button, a) { min-block-size: 2.75rem; }
.directory-results-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--wa-space-s); margin-block-end: var(--wa-space-m); padding: var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); position: sticky; inset-block-start: calc(var(--bar-height) + var(--wa-space-s)); z-index: 4; box-shadow: var(--sonub-shadow-card); }
.directory-results-heading h2 { display: flex; align-items: center; gap: var(--wa-space-s); margin: 0; font-size: var(--wa-font-size-l); }
.directory-results-heading h2 > .fa-solid { color: var(--sonub-accent-ink); }
.directory-search { scroll-margin-block-start: 10rem; }
.teacher-directory .directory-card-link { box-sizing: border-box; block-size: auto; flex: 1; }
.teacher-directory .directory-card-link:focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: -3px; border-radius: var(--sonub-radius-panel); }
.teacher-directory .directory-card-link .directory-subjects { margin-block-start: auto; }
.directory-empty { display: grid; justify-items: center; text-align: center; gap: var(--wa-space-m); padding: var(--wa-space-2xl) var(--wa-space-l); border: 1px dashed var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); }
.directory-empty h2 { margin: 0; font-size: var(--wa-font-size-l); }
@media (max-width: 64rem) { .directory-options { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
    .directory-filter-actions > :is(button, a) { flex: 1 1 10rem; }
    .directory-results-heading { inset-block-start: 5rem; }
    body:not(.site) .directory-results-heading { inset-block-start: 9rem; }
    .directory-results-heading h2 { font-size: var(--wa-font-size-m); }
}

/* 공용 section[id] 앵커 여백보다 이 화면의 사이트별 막대 높이를 우선한다. */
@media (max-width: 40rem) { .teacher-directory :is(#directory-search, #directory-results) { scroll-margin-block-start: 10rem; } }
.site-content .teacher-directory :is(#directory-search, #directory-results) { scroll-margin-block-start: 5rem; }