/* 운영자 문의 회원 정보 띠(x-widget.talk.support-member) — 전체 화면 채팅방과 떠 있는 채팅 창(관리자·사이트)이 같이 쓴다(SSOT 13절 "운영자 문의 회원 정보").
   자산은 x-widget.talk.support-member-assets 한 곳에서 싣는다. */
/* 운영자 문의 방의 회원 정보 — 운영자에게만, 대화 칸을 가리지 않게 이름 한 줄 · 숫자 한 줄 · 상세 두 줄(SSOT 13절 "운영자 문의 회원 정보").
   강약: 이름·숫자·값은 진하고 굵게, 필드 이름은 작고 옅게. 상세는 항목마다 칩으로 묶어 이름과 값이 섞이지 않게 한다. */
.talk-support-member { --support-chip: 2rem; container-type: inline-size; display: grid; flex: 0 1 auto; align-content: start; gap: var(--wa-space-s); min-block-size: 3rem; overflow: auto; padding: var(--wa-space-s) var(--wa-space-m); border-block-end: 1px solid var(--sonub-border); background: color-mix(in srgb, var(--sonub-accent) 3%, var(--sonub-surface)); color: var(--sonub-ink); font-size: calc(.86rem * var(--wa-font-size-scale,1)); line-height: 1.4; }
.talk-support-member-head { display: flex; align-items: center; gap: var(--wa-space-s); min-inline-size: 0; }
.talk-support-member-head .talk-room-avatar { --size: 2.25rem; flex: none; box-shadow: 0 0 0 2px var(--sonub-surface), 0 0 0 3px color-mix(in srgb, var(--sonub-accent) 25%, var(--sonub-border)); }
.talk-support-member-head h2 { flex: 0 1 auto; min-inline-size: 0; margin: 0; overflow: hidden; font-size: calc(1.05rem * var(--wa-font-size-scale,1)); font-weight: 800; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.talk-support-member-kind { flex: none; margin: 0; padding: var(--wa-space-3xs) var(--wa-space-xs); border-radius: var(--wa-border-radius-s); background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); font-size: calc(.76rem * var(--wa-font-size-scale,1)); font-weight: 700; white-space: nowrap; }
.talk-support-member-links { display: flex; flex: none; gap: var(--wa-space-2xs); margin-inline-start: auto; }
.talk-support-member-links a { display: inline-flex; align-items: center; gap: var(--wa-space-xs); min-block-size: 2.25rem; padding-inline: var(--wa-space-s); border: 1px solid var(--wa-color-brand-border-normal); border-radius: var(--wa-border-radius-pill); background: var(--sonub-surface); color: var(--wa-color-text-link); font-size: calc(.8rem * var(--wa-font-size-scale,1)); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--wa-transition-fast, 150ms), border-color var(--wa-transition-fast, 150ms); }
.talk-support-member-links a:hover { border-color: var(--sonub-accent); background: color-mix(in srgb, var(--sonub-accent) 10%, var(--sonub-surface)); }
.talk-support-member-links a:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
.talk-support-member dl { display: flex; flex-wrap: wrap; margin: 0; }
.talk-support-member dl > div { display: inline-flex; min-inline-size: 0; }
.talk-support-member dt { flex: none; color: var(--wa-color-text-quiet); font-weight: 500; }
.talk-support-member dd { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; }
/* 숫자 한 줄 — 큰 숫자 + 작은 이름, 항목 사이 세로선 */
.talk-support-stats { gap: var(--wa-space-xs) 0; padding-block: var(--wa-space-2xs) var(--wa-space-xs); border-block-end: 1px solid color-mix(in srgb, var(--sonub-accent) 12%, var(--sonub-border)); }
.talk-support-stats > div { align-items: baseline; gap: var(--wa-space-xs); padding-inline: var(--wa-space-m); }
.talk-support-stats > div:first-child { padding-inline-start: 0; }
.talk-support-stats > div + div { border-inline-start: 1px solid var(--sonub-border); }
.talk-support-stats dt { font-size: calc(.78rem * var(--wa-font-size-scale,1)); }
.talk-support-stats dd { order: -1; color: var(--wa-color-brand-on-quiet); font-size: calc(1.25rem * var(--wa-font-size-scale,1)); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
/* 국가·완성도·평판·SONUB 별점은 운영자가 먼저 찾는 정보. */
.talk-support-stats > [data-highlight] { align-items: center; margin-inline-start: var(--wa-space-xs); padding: var(--wa-space-2xs) var(--wa-space-s); border: 1px solid var(--wa-color-brand-border-normal); border-radius: var(--wa-border-radius-s); background: var(--wa-color-brand-fill-quiet); }
.talk-support-stats [data-highlight] dt { color: var(--wa-color-brand-on-quiet); font-weight: 650; }
.talk-support-stats [data-highlight] dd { font-size: calc(1.4rem * var(--wa-font-size-scale,1)); font-weight: 800; }
/* 상세 두 줄 — 항목마다 칩: 작고 옅은 필드 이름 | 진하고 굵은 값. 넘치면 이 칸 안에서 스크롤 */
.talk-support-facts { gap: var(--wa-space-2xs); max-block-size: calc(2 * var(--support-chip) + var(--wa-space-2xs)); overflow: auto; overscroll-behavior-block: contain; scrollbar-width: thin; scrollbar-color: var(--sonub-border) transparent; scroll-padding-block: var(--wa-space-2xs); }
.talk-support-facts > div { box-sizing: border-box; align-items: center; gap: var(--wa-space-xs); max-inline-size: 100%; min-block-size: var(--support-chip); padding: var(--wa-space-3xs) var(--wa-space-xs); border: 1px solid color-mix(in srgb, var(--sonub-border) 75%, var(--sonub-surface)); border-radius: var(--wa-border-radius-s); background: var(--sonub-surface); }
.talk-support-facts dt { padding-inline-end: var(--wa-space-xs); border-inline-end: 1px solid var(--sonub-border); font-size: calc(.78rem * var(--wa-font-size-scale,1)); }
.talk-support-facts dd { color: var(--wa-color-text-normal); font-weight: 650; }
.talk-support-facts > [data-highlight] { border-color: var(--wa-color-brand-border-normal); background: var(--wa-color-brand-fill-quiet); }
.talk-support-facts [data-highlight] dt { border-color: var(--wa-color-brand-border-normal); color: var(--wa-color-brand-on-quiet); font-weight: 650; }
.talk-support-facts [data-highlight] dd { color: var(--wa-color-brand-on-quiet); font-weight: 800; }
.talk-support-facts [data-tone] dd { display: inline-flex; align-items: center; gap: .4em; padding-inline: var(--wa-space-2xs); border-radius: var(--wa-border-radius-s); background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); white-space: nowrap; }
.talk-support-facts [data-tone="no"] dd { background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet); }
.talk-support-facts [data-tone] dd::before { content: ''; flex: none; inline-size: .5em; block-size: .5em; border-radius: var(--wa-border-radius-circle); background: var(--wa-color-success-fill-loud); }
.talk-support-facts [data-tone="no"] dd::before { background: var(--wa-color-danger-fill-loud); }
.talk-support-facts:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
.talk-support-member-note { margin: 0; color: var(--wa-color-text-quiet); }
/* 강사 사진·소개 동영상 — 업로드가 잘 됐는지 운영자가 바로 본다. 사진·동영상 모두 크게, 동영상(MP4·YouTube)은 누르면 그 자리에서 재생(SSOT 13절 "운영자 문의 회원 정보").
   정보 칸도 컨테이너라 아래 @container 규칙은 사진·동영상을 뺀 정보 칸의 폭으로 맞춘다. */
.talk-support-member-body { container-type: inline-size; display: grid; align-content: start; gap: var(--wa-space-s); min-inline-size: 0; }
.talk-support-member-media { --support-media: min(14rem, 100cqi * 27 / 160); grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--wa-space-m); }
.talk-support-media { display: flex; gap: var(--wa-space-xs); min-inline-size: 0; }
.talk-support-photo { box-sizing: border-box; display: grid; flex: none; place-content: center; justify-items: center; gap: var(--wa-space-3xs); inline-size: calc(var(--support-media) * 16 / 9); block-size: var(--support-media); overflow: hidden; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-lowered); box-shadow: var(--wa-shadow-s); }
.talk-support-photo img { display: block; inline-size: calc(var(--support-media) * 16 / 9); block-size: var(--support-media); object-fit: cover; object-position: var(--teacher-photo-focus); } /* 강사 사진 16:9(SSOT 3절 "사진") */
button.talk-support-photo:hover { border-color: var(--sonub-accent); }
button.talk-support-photo:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
.talk-support-media .admin-teacher-video-inline { box-sizing: border-box; flex: none; inline-size: calc(var(--support-media) * 16 / 9); block-size: var(--support-media); border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-s); }
.talk-support-media .admin-teacher-youtube { flex: none; align-self: start; inline-size: calc(var(--support-media) * 16 / 9); }
.talk-support-media .admin-teacher-youtube-player { border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-s); }
.talk-support-media .admin-teacher-video-start .fa-play { inline-size: 3rem; block-size: 3rem; }
.talk-support-media-empty, .talk-support-media .admin-teacher-video-empty { color: var(--wa-color-text-quiet); font-size: calc(.76rem * var(--wa-font-size-scale,1)); text-align: center; }
.talk-support-media-empty > .fa-solid { font-size: calc(1.5rem * var(--wa-font-size-scale,1)); }
.talk-support-media .admin-teacher-video-empty { box-sizing: border-box; display: grid; flex: none; place-content: center; inline-size: calc(var(--support-media) * 16 / 9); block-size: var(--support-media); border: 1px dashed var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-lowered); }
@media (max-width: 599px) {
 .talk-support-member-media { --support-media: min(14rem, (100cqi - var(--wa-space-xs)) * 9 / 32); grid-template-columns: minmax(0, 1fr); row-gap: var(--wa-space-xs); }
 .talk-support-media .admin-teacher-video-start .fa-play { inline-size: 2.5rem; block-size: 2.5rem; font-size: calc(1rem * var(--wa-font-size-scale, 1)); }
}
/* 창 너비가 아니라 실제 정보 띠의 폭으로 조절 — 메인·역할 사이트에서 같은 배치. */
@container (max-width: 48rem) {
 .talk-support-member-links { gap: var(--wa-space-3xs); }
 .talk-support-member-links a { justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: 0; }
 .talk-support-member-links span { display: none; }
}
@container (max-width: 35rem) {
 .talk-support-member-head { gap: var(--wa-space-xs); }
 .talk-support-member-kind { display: none; }
 .talk-support-member .talk-support-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .talk-support-stats > div { grid-column: span 2; flex-direction: column; align-items: start; gap: var(--wa-space-3xs); padding-inline: var(--wa-space-xs); }
 .talk-support-stats > div:nth-child(n+4) { grid-column: span 3; }
 .talk-support-stats > div:nth-child(4) { padding-inline-start: 0; border-inline-start: 0; }
 .talk-support-stats > [data-highlight] { align-items: start; margin-inline-start: 0; padding-inline: var(--wa-space-xs); }
 .talk-support-stats > [data-highlight]:nth-child(4) { margin-inline-end: var(--wa-space-xs); padding-inline-start: var(--wa-space-xs); border-inline-start: 1px solid var(--wa-color-brand-border-normal); }
 .talk-support-stats dt { flex: auto; }
}
@media (max-width: 599px) {
 .talk-support-member { gap: var(--wa-space-xs); padding-inline: var(--wa-space-s); }
}
@media (prefers-reduced-motion: reduce) {
 .talk-support-member-links a { transition: none; }
}
/* 떠 있는 채팅 창 — 좁은 창이라 사진·동영상을 정보 위에 두고, 대화 칸이 남게 띠를 창 높이의 절반 아래로 둔다(넘치면 띠 안에서 스크롤) */
.floating-talk .talk-support-member { flex: 0 1 auto; max-block-size: 50%; min-block-size: 0; gap: var(--wa-space-xs); padding: var(--wa-space-s); }
.floating-talk .talk-support-member-media { --support-media: min(7.5rem, (100cqi - var(--wa-space-xs)) * 9 / 32); grid-template-columns: minmax(0, 1fr); row-gap: var(--wa-space-xs); }
.floating-talk .talk-support-media .admin-teacher-video-start .fa-play { inline-size: 2.5rem; block-size: 2.5rem; font-size: calc(1rem * var(--wa-font-size-scale, 1)); }
/* 창 머리에 이미 회원 이름이 있어 띠의 이름이 잘리지 않게 링크는 아이콘 단추로(이름은 title·aria-label) */
.floating-talk .talk-support-member-links { gap: var(--wa-space-3xs); }
.floating-talk .talk-support-member-links a { justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: 0; }
.floating-talk .talk-support-member-links span { display: none; }