/* AI 교수 라이브 — 디자인 시스템(다크 네이비+골드) 위에 강의실 한 칸을 얹는다. */
:root {
  --pf-line: rgba(255, 255, 255, .09);
  --pf-card: rgba(19, 27, 46, .88);
  --pf-mint: #5fe3c0;
}

body { background: #090e19; }
.pf-app { min-height: 100vh; padding-top: 58px; }
.pf-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.pf-hero {
  padding: 52px 0 38px;
  border-bottom: 1px solid var(--pf-line);
  background:
    radial-gradient(720px 320px at 78% 0, rgba(95, 227, 192, .12), transparent 62%),
    radial-gradient(620px 300px at 18% 0, rgba(212, 168, 67, .10), transparent 62%),
    linear-gradient(180deg, #0d1422, #090e19);
}
.pf-hero .pf-shell { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; flex-wrap: wrap; }
.pf-kicker { display: flex; align-items: center; gap: 9px; color: var(--pf-mint); font-size: 12px; font-weight: 750; letter-spacing: .15em; margin-bottom: 14px; }
.pf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-mint); box-shadow: 0 0 0 5px rgba(95, 227, 192, .12); }
.pf-hero h1 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.045em; line-height: 1.1; }
.pf-hero h1 em { color: var(--gold2); font-style: normal; }
.pf-hero-copy > p { max-width: 560px; margin-top: 16px; color: var(--dim); font-size: 16px; }

.pf-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--pf-line); border-radius: 16px; background: rgba(8, 13, 24, .6); }
.pf-avatar {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(212, 168, 67, .35);
}
.pf-card figcaption { display: grid; gap: 3px; }
.pf-card strong { font-size: 16px; }
.pf-card span { font-size: 12px; color: var(--pf-mint); letter-spacing: .02em; }
.pf-card em { font-style: normal; font-size: 12px; line-height: 1.55; color: var(--faint); max-width: 320px; }

/* ── 교수 프로필 (ceobizschool.kr/faculty 정리본) ── */
/* 디자인 시스템의 section 기본 여백(72px)을 그대로 두면 접힌 띠가 화면을 먹는다. */
.pf-bio { padding: 0; border-bottom: 1px solid var(--pf-line); background: rgba(8, 13, 24, .35); }
.pf-bio details { padding: 14px 0 16px; }
.pf-bio summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--gold2);
}
.pf-bio summary::-webkit-details-marker { display: none; }
.pf-bio summary::before { content: "▸"; color: var(--faint); font-weight: 400; }
.pf-bio details[open] summary::before { content: "▾"; }
.pf-bio summary em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--faint); }
.pf-bio-intro { margin-top: 14px; font-size: 14px; line-height: 1.75; color: var(--dim); max-width: 62em; word-break: keep-all; }
.pf-bio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 26px; margin-top: 18px; }
.pf-bio-grid h3 { font-size: 11.5px; letter-spacing: .12em; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.pf-bio-grid ul { list-style: none; display: grid; gap: 5px; }
.pf-bio-grid li { font-size: 13px; line-height: 1.6; color: var(--dim); padding-left: 11px; position: relative; word-break: keep-all; }
.pf-bio-grid li::before { content: "·"; position: absolute; left: 0; color: var(--faint); }
.pf-bio-src { margin-top: 16px; font-size: 12px; color: var(--faint); }
.pf-bio-src a { color: var(--dim); border-bottom: 1px dashed rgba(255, 255, 255, .2); }
.pf-bio-src a:hover { color: var(--gold2); }

.pf-workspace { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 26px; align-items: start; padding-top: 30px; padding-bottom: 80px; }

.pf-sidebar { display: grid; gap: 20px; min-width: 0; }
.pf-desk { background: var(--pf-card); border: 1px solid var(--pf-line); border-radius: 18px; padding: 20px; }
.pf-book { padding: 24px 20px; border: 1px solid rgba(212,168,67,.3); border-radius: 18px; background: linear-gradient(145deg,rgba(212,168,67,.09),rgba(19,27,46,.95) 65%); }
.pf-book-eyebrow { color: var(--gold2); font-size: 12px; letter-spacing: .06em; }
.pf-book h2 { margin: 8px 0 12px; font-size: 28px; font-weight: 750; letter-spacing: -.04em; }
.pf-book-intro { color: var(--dim); font-size: 14px; line-height: 1.7; }
.pf-book-prompts { list-style: none; display: grid; gap: 8px; }
.pf-book-note { border-top: 1px solid var(--pf-line); padding-top: 14px; margin-top: 18px; color: #a7b2c9; font-size: 13px; }
/* 책 상자 맨 아래 - 더 알고 싶으면 도서 홈페이지로 간다. 새 탭으로 연다. */
.pf-book-site { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 16px;
  border: 1px solid rgba(212,168,67,.45); border-radius: 999px; color: var(--gold2);
  font-size: 13.5px; font-weight: 700; transition: border-color .2s, background .2s; }
.pf-book-site:hover { border-color: var(--gold2); background: rgba(212,168,67,.1); }
.pf-book-site em { font-style: normal; font-size: 12px; }
.pf-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-book .pf-chip { padding: 8px 11px; font-size: 13px; }
.pf-book .pf-ask { width: 100%; text-align: left; }
.pf-chip:focus-visible,.pf-ask:focus-visible,.pf-textonly:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
.pf-say textarea { min-width: 0; }
.pf-h { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 18px; }
.pf-chip {
  border: 1px solid var(--pf-line); background: rgba(255, 255, 255, .035); color: var(--dim);
  padding: 7px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.pf-chip:hover:not([disabled]) { color: var(--text); border-color: rgba(255, 255, 255, .25); }
.pf-chip[disabled] { opacity: .45; cursor: not-allowed; }
.pf-chip[aria-checked="true"] { background: rgba(212, 168, 67, .14); border-color: rgba(212, 168, 67, .45); color: var(--gold2); font-weight: 650; }

.pf-scope { font-size: 12.5px; line-height: 1.6; color: var(--faint); margin: -8px 0 16px; }

.pf-actions { display: flex; gap: 9px; margin: 18px 0 12px; }
.pf-actions .btn { flex: 1; text-align: center; cursor: pointer; font-family: inherit; font-size: 14px; }
.pf-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

.pf-status { font-size: 13px; color: var(--dim); min-height: 38px; }
.pf-status.err { color: var(--red); }
.pf-mode { font-size: 12px; line-height: 1.6; color: var(--faint); border-top: 1px solid var(--pf-line); margin-top: 8px; padding-top: 10px; }


.pf-meter { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--faint); border-top: 1px solid var(--pf-line); margin-top: 10px; padding-top: 10px; }
.pf-meter b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-audio { width: 100%; margin-top: 12px; display: none; }
.pf-audio.show { display: block; }

.pf-tips { border-top: 1px solid var(--pf-line); margin-top: 16px; padding-top: 14px; }
.pf-tips-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-tips h3 { font-size: 12px; letter-spacing: .1em; color: var(--faint); font-weight: 700; }
.pf-tips-head button { border: 0; background: none; color: var(--gold2); font: inherit; font-size: 11.5px; cursor: pointer; padding: 4px; }
.pf-tips-head button:hover { text-decoration: underline; }
.pf-tips-head button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.pf-tips-note { margin-top: 5px; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.pf-tips ul { list-style: none; display: grid; gap: 7px; margin-top: 10px; }
.pf-tips li { font-size: 13px; color: var(--dim); padding-left: 13px; position: relative; }
.pf-tips li::before { content: "“"; position: absolute; left: 0; color: var(--gold); }

.pf-board { background: var(--pf-card); border: 1px solid var(--pf-line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; position: sticky; top: 88px; min-height: min(520px, calc(100dvh - 108px)); max-height: calc(100dvh - 108px); }
.pf-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pf-board-head > div { display: flex; align-items: center; gap: 10px; }
.pf-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; letter-spacing: .12em; color: #ff7a7a; }
.pf-live[hidden] { display: none; }
.pf-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5d5d; animation: pf-pulse 1.4s infinite; }
@keyframes pf-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pf-live i, .pf-tips { animation: none; } }
.pf-ghost { background: none; border: 1px solid var(--pf-line); color: var(--faint); font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.pf-ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, .25); }

.pf-log { flex: 1; margin: 16px 0 12px; overflow-y: auto; max-height: 60vh; display: grid; gap: 12px; align-content: start; padding-right: 4px; }
.pf-empty { color: var(--faint); font-size: 14px; }
.pf-row { border: 1px solid var(--pf-line); border-radius: 14px; padding: 12px 15px; background: rgba(255, 255, 255, .025); }
.pf-row.you { background: rgba(76, 141, 255, .07); border-color: rgba(76, 141, 255, .22); }
.pf-row.prof { background: rgba(212, 168, 67, .07); border-color: rgba(212, 168, 67, .22); }
.pf-row .who { display: block; font-size: 11px; letter-spacing: .1em; font-weight: 700; margin-bottom: 5px; }
.pf-row.you .who { color: #8fb4ff; }
.pf-row.prof .who { color: var(--gold2); }
.pf-row p { font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-row.work { background: rgba(95, 227, 192, .06); border-color: rgba(95, 227, 192, .2); }
.pf-row.work .who { color: var(--pf-mint); }
.pf-row.work p { font-size: 13px; color: var(--dim); }
.pf-note { font-size: 12px; color: var(--faint); line-height: 1.6; border-top: 1px solid var(--pf-line); padding-top: 12px; }

@media (max-width: 900px) {
  .pf-workspace { grid-template-columns: minmax(0, 1fr); }
  .pf-desk { position: static; }
  .pf-log { max-height: 60vh; }
  .pf-board { min-height: 0; max-height: none; position: static; }
  /* 한 줄로 서면 예시 질문 상자 둘이 앞을 막아, 말을 걸려면 두 번을 스크롤해야 했다.
     좁은 화면에서는 대화 자리를 맨 위로 올린다 - 여기 온 사람이 하려던 일이 그것이다.
     예시는 아래로 내려가지만 입력칸 바로 다음이라 눌러 담으면 그 자리가 곧 보인다. */
  .pf-board { order: -1; }
}
@media (max-width: 640px) {
  .pf-shell { width: calc(100% - 32px); }
  .pf-hero { padding: 40px 0 30px; }
  .pf-card em { max-width: none; }
}


/* 풀어쓴 소개 — 목록보다 먼저 읽히는 자리 */
.pf-bio-text { display: grid; gap: 12px; margin-top: 16px; max-width: 62em; }
.pf-bio-text p { font-size: 14.5px; line-height: 1.85; color: var(--text); word-break: keep-all; }
.pf-bio-text p:first-child::first-line { font-weight: 600; }

/* ── 글로 묻기 ── */
/* 사무실에서 말하기 어려울 때를 위한 자리. 말과 글이 한 창에서 오간다. */
.pf-say { display: flex; gap: 9px; align-items: flex-end; margin-top: 14px; }
.pf-say textarea {
  flex: 1; resize: none; font-family: inherit; font-size: 14.5px; line-height: 1.6;
  color: var(--text); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--pf-line); border-radius: 12px; padding: 11px 14px;
  min-height: 44px; max-height: 132px; overflow-y: auto;
}
.pf-say textarea::placeholder { color: var(--faint); }
.pf-say textarea:focus { outline: none; border-color: rgba(212, 168, 67, .45); background: rgba(255, 255, 255, .06); }
.pf-say textarea:disabled { opacity: .5; cursor: not-allowed; }
.pf-say .btn { flex: 0 0 auto; cursor: pointer; font-family: inherit; font-size: 14px; padding: 11px 18px; }
.pf-say .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* 마이크를 켜지 않고 시작하는 길 */
.pf-textonly {
  width: 100%; margin-top: 9px; background: none; cursor: pointer; font-family: inherit;
  border: 1px dashed var(--pf-line); color: var(--dim); font-size: 13px;
  padding: 9px 12px; border-radius: 10px;
}
.pf-textonly:hover:not([disabled]) { color: var(--gold2); border-color: rgba(212, 168, 67, .4); }
.pf-textonly[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) { .pf-say { flex-wrap: wrap; } .pf-say .btn { width: 100%; } }

/* 로그인하기 전에 먼저 알려 줄 것 - 들어 보고 정하시라는 말 */
.pf-free {
  margin-top: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.6;
  color: var(--pf-mint); word-break: keep-all;
  background: rgba(95, 227, 192, .07); border: 1px solid rgba(95, 227, 192, .22);
  border-radius: 10px;
}
.pf-free[hidden] { display: none; }
.pf-free b { color: inherit; }

/* 남은 시간과, 막혔을 때의 다음 걸음 */
.pf-left { font-size: 12px; color: var(--pf-mint); margin-top: 6px; min-height: 16px; }
/* 끝이 가까우면 호박색으로. 빨강은 쓰지 않는다 - 놀라게 할 일이 아니라 알려 줄 일이다. */
.pf-left.soon { color: var(--gold2); font-weight: 700; }
.pf-gate { margin-top: 12px; }
.pf-gate[hidden] { display: none; }
.pf-gate .btn { display: block; text-align: center; font-size: 14px; }

/* 충전은 이 자리에서 바로. 셋을 나란히 놓고 몇 분어치인지 함께 적는다 -
   크레딧 숫자만으로는 얼마나 더 들을 수 있는지 가늠이 서지 않는다. */
.pf-packs p { font-size: 12.5px; line-height: 1.6; color: var(--dim); word-break: keep-all; }
.pf-pack-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.pf-pack-row .btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 12.5px; padding: 9px 4px; cursor: pointer; font-family: inherit; text-align: center;
}
.pf-pack-row .btn span { font-size: 11px; font-weight: 400; opacity: .72; }
.pf-pack-row .btn em {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(0, 0, 0, .22); border-radius: 999px; padding: 1px 7px; margin-top: 1px;
}
.pf-packs small { display: block; margin-top: 9px; font-size: 11.5px; color: var(--faint); }
.pf-packs small.err { color: var(--red); }
.pf-packs small a { color: var(--gold2); text-decoration: underline; }
.pf-gate-link {
  display: inline-block; margin-top: 10px; font-size: 11.5px;
  color: var(--faint); text-decoration: underline;
}

/* 친구 초대 — 충전 말고도 이어 듣는 길 */
.pf-invite { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pf-line); }
.pf-invite p { font-size: 12.5px; line-height: 1.6; color: var(--dim); word-break: keep-all; }
.pf-invite-row { display: flex; gap: 7px; margin-top: 9px; }
.pf-invite-row input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 12px; color: var(--dim);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--pf-line);
  border-radius: 9px; padding: 8px 10px;
}
.pf-invite-row .btn { flex: 0 0 auto; font-size: 12.5px; padding: 8px 12px; cursor: pointer; font-family: inherit; }
.pf-invite small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--faint); }

/* 예시 질문은 읽을 거리가 아니라 누를 거리다 */
.pf-tips li { padding-left: 0; }
.pf-tips li::before { content: none; }
.pf-ask {
  width: 100%; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.55;
  color: var(--dim); background: none; border: 1px solid transparent; border-radius: 9px;
  padding: 7px 10px 7px 21px; cursor: pointer; position: relative; word-break: keep-all;
}
.pf-ask::before { content: "“"; position: absolute; left: 8px; top: 7px; color: var(--gold); }
.pf-ask:hover { color: var(--text); background: rgba(255, 255, 255, .04); border-color: var(--pf-line); }
.pf-ask:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* 소리 켜고 끄기 — 글로 물어도 답은 목소리로 온다 */
.pf-board-tools { display: flex; gap: 7px; align-items: center; }
.pf-sound { white-space: nowrap; }
.pf-sound.off { color: var(--faint); border-style: dashed; }
@media (max-width: 640px) { .pf-sound span + span { display: none; } }

.pf-theme-switch{margin:20px 0 12px}.pf-theme-switch .pf-chips{margin-bottom:8px}.pf-theme-switch p{margin:6px 0;color:var(--muted,#9ba8bf);font-size:14px}.pf-theme-help{font-size:12px!important}.pf-topic-badge{display:inline-block;margin:0 0 8px 12px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#203655;color:#b8d0ff}.pf-topic-badge.book{background:#413923;color:#f0d483}.pf-row .who{display:inline-block}

.pf-conversation-controls{border-bottom:1px solid var(--pf-line);padding-bottom:10px;margin-bottom:14px}.pf-conversation-controls .pf-actions{flex-wrap:wrap;margin:8px 0}.pf-conversation-controls .pf-actions .btn{flex:1 1 130px}.pf-conversation-controls .pf-status{min-height:0;margin:8px 0}.pf-conversation-controls .pf-mode{margin:6px 0;font-size:12px}.pf-conversation-controls .pf-meter{margin:8px 0 4px;padding-top:8px}.pf-conversation-controls .pf-left{margin:4px 0}