/* 체험판 — style.css(학생 화면, 토큰 docs/19) 위에 얹는 것만. 새 색·새 글자 크기를 만들지 않는다:
   글자 12·14·16·20·28, 두께 500·600, 둥글기 8·12·16, 간격 4·8·12·16·20·24·32, 강조색은 Filled 면·고른 보기·켜진 스위치에만.
   카드는 테두리 없는 흰 면, 왼쪽 색 띠 없음. */

/* 배치 — 넓은 화면: 대화(최대 720)와 보고 칸(360)을 한 묶음으로 가운데(학생 화면의 메모 칸 자리) */
.trial .report { display: none; }
@media (min-width: 960px) {
  .app.trial { grid-template-columns: minmax(0, 1fr) minmax(0, 720px) 360px minmax(0, 1fr); }
  .trial .chat { grid-column: 2; }
  .trial .report { grid-column: 3; display: flex; flex-direction: column; gap: 12px; padding: 24px; height: 100%; overflow-y: auto; }
  #repBtn, .rep-close { display: none !important; }
}
/* 좁은 화면: 헤더의 [보고]로 대화 위에 펼친다(학생 화면의 메모 카드와 같은 방식) */
@media (max-width: 959px) {
  .trial .report.open { display: flex; flex-direction: column; gap: 12px; position: fixed; inset: 0; z-index: 20; overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--page); }
}
.rep-head { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.rep-head .side-title { margin-right: auto; }
.report #final { order: -1; }  /* 수업이 끝나면 수업 보고서를 실시간 보고 위에 */
.report .rep-head { order: -2; }
.trial .top-row { min-height: 40px; }
.side-title { font-size: 16px; font-weight: 600; }

/* 스위치 — 켜면 강조색 면(docs/17 스위치) */
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; color: var(--text); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--line-strong); transition: background-color .15s; }
.switch .track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); transition: transform .15s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 시작 장면 — 학생 화면의 시작 장면(.scene)과 같은 틀. 학생 유형·상태를 고르는 칸은 없다(진단·대화로 정함, 2026-11-05) */
.trial .scene .intro { display: flex; flex-direction: column; gap: 8px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:active { transform: none; background: var(--bg); }

/* 진행 막대 — 문제 수만큼(학생 화면의 진단·소수·소인수분해·정리 막대와 같은 꼴) */
.trial .steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.trial .step span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.now span { color: var(--text); font-weight: 600; }

/* 답하는 칸 */
.trial .aux:empty { display: none; }
.trial .ans .field .btn.primary { flex: none; }
.trial .ans .aux .btn.tool { min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }
.trial .ans .aux .btn.tool sup { font-size: 12px; font-weight: 600; align-self: flex-start; margin: 6px 0 0 1px; line-height: 1; }

/* 말풍선 — 문장마다 줄을 바꾸고, 다섯 문장까지는 문장 사이를 한 줄 띄운다(2026-11-05 사무엘님 "과감히 줄바꿈") */
.trial .ai p { white-space: pre-line; }
.trial .ai p + p { margin-top: 4px; }
.trial .ai.airy p + p { margin-top: 16px; }
/* 고르는 버튼은 AI 말 바로 아래(2026-11-05 사무엘님 "대화창 자체에 인공지능의 말 아래 버튼들이 나열되어서") */
.trial .opts.inline { margin-top: 4px; }
.log > .opts.inline { padding-left: 44px; } /* 아바타 36 + 간격 8 */

/* 판정 보기(교사용) — 말풍선 아래 보조 글자 */
.dbg { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; }

/* 오른쪽 보고 — 카드는 흰 면, 안 여백 16(폭 600 이상 20). 제목 14·600 보조색, 큰 수 20·600 */
.rep-body { display: flex; flex-direction: column; gap: 12px; }
.report .card h3 { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.report .card p, .report .card li { font-size: 14px; }
.report .card .big { font-size: 20px; font-weight: 600; line-height: 1.4; }
.report .card .muted { color: var(--text-2); }
.report .card .muted + .muted { margin-top: 4px; }
.report .card ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.report .card li { display: flex; justify-content: space-between; gap: 12px; }
.report .card li span:first-child { min-width: 0; }
.report .card li span:last-child { flex: none; max-width: 60%; color: var(--text-2); text-align: right; }
.report .card li.wrap { display: block; }
.report .card li.wrap span:last-child { max-width: none; text-align: left; }
.meter { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); transition: width .3s ease-out; }
.lv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; }
.lv span { font-size: 14px; color: var(--text-2); }
.lv b { font-weight: 600; color: var(--text); }
.report .card .said { display: block; margin-top: 2px; color: var(--text-2); }
.report .card .alert-line { font-size: 14px; color: var(--text); }
.rep-key { margin-top: 8px; font-size: 12px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after, .meter i { transition: none; } }