/* WebSocket Demo — 추가 스타일 (base.css + common 스타일 위에 덮어씀) */
:root { --ink: #1c2932; --accent: #26718e; --accent-strong: #1c607a; --action: #71ad45; --action-strong: #5d9735; --tint: #f0f7fa; }

/* connection-bar: base.css 3열 구조를 그대로 사용 */

.ws-layout { grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); }

/* ── WS 연결 박스 ── */
.ws-conn-box { border: 1px solid #dde5ea; border-radius: 10px; padding: .55rem .85rem .65rem; margin-bottom: .9rem; background: #f8fafb; }
.ws-conn-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .45rem; }
.ws-conn-head > div > strong { display: block; font-size: .75rem; color: #1d2b35; margin-bottom: .08rem; }
.ws-conn-head > div > p { margin: 0; font-size: .65rem; color: #7d8992; }
.status-stack { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.ws-conn-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.session-id-inline { font-size: .62rem; color: #7d8992; font-family: 'Cascadia Code', Consolas, monospace; }

/* ── 상태 필 ── */
.status-pill { display: inline-block; padding: .16rem .45rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.status-pill.off      { background: #e8edef; color: #7d8992; }
.status-pill.on       { background: #e2f4e8; color: #1a5232; }
.status-pill.connecting { background: #fef3cd; color: #7a5200; }
.status-pill.error    { background: #f8edef; color: #9f424b; }

/* ── 청크 전송 설정 ── */
.chunk-settings { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin-top: .55rem; }
.frame-progress { font-size: .7rem; color: #7d8992; margin-top: .3rem; min-height: 1.1em; }

/* ── 전송 방식 배지 ── */
.transport-badge { display:inline-block; padding:.15rem .45rem; border-radius:4px; font-size:.65rem; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.transport-websocket { background: #e8eef8; color: #2d5fa0; }
.transport-info { display:flex; align-items:center; gap:.35rem; font-size:.7rem; color:#8a9499; white-space:nowrap; }

/* ── 오류 상태 ── */
.exchange-group.is-error .exchange-head { background: #f8edef; }
.exchange-group.is-error .exchange-head strong { color: #9f424b; }
.wire-message.response.error .wire-message-title { background: #f9edef; }
.wire-message.response.error .wire-message-title strong { background: #b85059; }
.wire-message.type-binary .wire-message-title strong { background: #5a7a9e; }
.wire-message.type-send-binary .wire-message-title { background: #eef3f8; }
.wire-message.type-send-binary .wire-message-title strong { background: #5a7a9e; }

/* ── 결과 렌더러 영역 ── */
.result-body { min-height: 105px; max-height: 340px; margin: 0 .85rem .85rem; padding: .75rem; overflow: auto; border-radius: 9px; background: #f4f6f7; scrollbar-color: #c5cdd2 transparent; scrollbar-width: thin; }
.result-preview.is-empty .result-body { display: grid; place-items: center; background: #f3f5f4; }
.result-preview.is-error .result-body { background: #321e21; }
.op-result { display: flex; flex-direction: column; gap: .6rem; }
.op-text { margin: 0; color: #1d2b35; font-size: .92rem; line-height: 1.5; }
.op-empty { margin: 0; color: #9aa3ab; font-size: .75rem; }
.op-raw { margin: 0; color: #45525b; white-space: pre-wrap; overflow-wrap: anywhere; font: .63rem/1.52 "Cascadia Code", Consolas, monospace; }
.op-partial { margin: 0; padding: .4rem .2rem; color: #6b7a86; font-style: italic; font-size: .85rem; }
.result-preview.is-error .op-raw { color: #f5dfe1; }
.op-error { color: #e8b4b8; }
.score-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.score-chip { display: inline-flex; align-items: center; gap: .28rem; padding: .24rem .52rem; border-radius: 999px; border: 1px solid #d0dfe8; background: #eef5f9; color: #45616e; font-size: .72rem; }
.score-chip.overall { border-color: #b7d3c1; background: #e8f4ed; color: #285e3c; }
.score-chip strong { font-size: .82rem; color: #1d2b35; }
.score-chip.overall strong { color: #1a5232; }
.word-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.word-chip { padding: .22rem .42rem; border-radius: 5px; border: 1px solid #dde4e8; background: #f8fafb; color: #3a4a55; font-size: .72rem; cursor: default; }
.word-diff { display: flex; flex-direction: column; gap: .3rem; }
.word-diff-label { font-size: .6rem; font-weight: 720; color: #8a9499; letter-spacing: .05em; margin-bottom: -.1rem; }
.diff-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.word-chip.match { border-color: #b7d3c1; background: #e8f4ed; color: #285e3c; }
.word-chip.miss { border-color: #e0b9bd; background: #f8eaec; color: #923540; text-decoration: line-through; }
/* change: RFA 의 대치(sub/merge-sub/split-sub) — 읽었지만 제시문과 다르게 발화한 어절.
   match(맞음)/miss(누락) 사이의 중간 판정이라 취소선 없이 주황 계열로만 구분한다. */
.word-chip.change { border-color: #e6c9a0; background: #fbf1e3; color: #8a5220; }
/* ── RFA 결과 레이아웃 ── */
.rfa-summary { padding: .55rem .7rem; border-radius: 8px; background: #eef5f9; border: 1px solid #d0dfe8; display: flex; flex-direction: column; gap: .45rem; }
.rfa-summary-title { font-size: .6rem; font-weight: 720; letter-spacing: .07em; color: #6a7e8c; text-transform: uppercase; margin-bottom: .05rem; }
.rfa-sentences { display: flex; flex-direction: column; gap: .7rem; }
.rfa-sentences-title { font-size: .6rem; font-weight: 720; letter-spacing: .07em; color: #6a7e8c; text-transform: uppercase; }
.rfa-sentence-card { padding: .55rem .7rem; border-radius: 8px; background: #fff; border: 1px solid #dde4e8; display: flex; flex-direction: column; gap: .4rem; min-width: 0; overflow: hidden; }
.rfa-sentence-no { font-size: .6rem; font-weight: 720; color: #8a9499; letter-spacing: .04em; }
.transcript-box { color: #1d2b35; font-size: .9rem; }
.intonation-canvas { display: block; width: 100%; height: 250px; border-radius: 6px; background: #eaeff7; }
.recog-scroll { overflow-x: auto; width: 100%; }
/* ── 행 기반 레이아웃 (assess 등 기존 페이지 유지) ── */
.recog-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid #e0e5e8; border-radius: 8px; overflow: hidden; width: max-content; min-width: 100%; }
.recog-row-label { flex-shrink: 0; width: 4.2rem; padding: .3rem .45rem; background: #f0f4f7; border-right: 1px solid #e0e5e8; font-size: .62rem; font-weight: 720; color: #5a6b74; display: flex; align-items: center; }
.recog-total-score { font-size: .88rem; font-weight: 800; color: #1d2b35; }
.recog-row { display: flex; }
.recog-row + .recog-row { border-top: 1px solid #e8ecef; }
.recog-cell { display: flex; align-items: center; justify-content: center; padding: .3rem .2rem; min-width: 2.8rem; text-align: center; }
.recog-cell + .recog-cell { border-left: 1px solid #e8ecef; }
.recog-word { background: #f4f7f9; font-size: .76rem; font-weight: 700; color: #1d2b35; white-space: nowrap; min-width: 3.5rem; }
.recog-wscore { background: #fff; font-size: .75rem; font-weight: 800; }
.recog-ph-group { display: flex; background: #fff; padding: 0; min-width: 2.8rem; }
.recog-ph-cell { display: flex; flex: 1 0 auto; min-width: 1.6rem; align-items: center; justify-content: center; padding: .28rem .1rem; font-size: .68rem; font-family: 'Cascadia Code', Consolas, monospace; color: #3a4a55; }
.recog-ph-cell + .recog-ph-cell { border-left: 1px solid #f0f3f5; }
/* 음소 그룹을 flex 열 너비 안에서 균등 분할 */
.recog-ph-group--fill { display: flex; }
.recog-ph-group--fill .recog-ph-cell { flex: 1 1 0; min-width: 1.4rem; }
.assess-unspoken { opacity:.4; }
/* assess 직접 전달 모드 참조 음성 영역 — audio-box 내 구분선 */
#reference-wrap { border-top: 1px solid #e8ecef; padding-top: .6rem; margin-bottom: 0; }
/* ── ws-overview: 중간 인식 결과 오버뷰 박스 ── */
.ws-overview { background: #f0f7fa; border: 1px solid #c5dce8; border-radius: 8px; padding: .45rem .7rem; margin-bottom: .55rem; }
.ws-overview--hidden { display: none; }
.ws-overview-label { display: block; font-size: .6rem; font-weight: 700; color: #5a8095; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .12rem; }
.ws-overview-text { margin: 0; font-size: .75rem; color: #1c3040; line-height: 1.45; min-height: 1.2em; word-break: break-word; }
.assess-ref-mode { margin-bottom:.55rem; }
.assess-mode-btn { padding:.28rem .72rem; border:1px solid #d0d8de; border-radius:5px; background:#f4f6f7; color:#53616a; font-size:.72rem; font-weight:600; cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.assess-mode-btn:hover { background:#e8eef2; border-color:#b8c6ce; }
.assess-mode-btn.active { background:#26718e; border-color:#26718e; color:#fff; }
.assess-script-display { display:flex; align-items:baseline; gap:.45rem; padding:.35rem .55rem; margin-bottom:.45rem; background:#f0f4f7; border-left:3px solid #26718e; border-radius:0 4px 4px 0; font-size:.85rem; }
.assess-script-label { font-weight:700; color:#26718e; white-space:nowrap; flex-shrink:0; font-size:.75rem; }
.assess-script-value { color:#2d3e49; word-break:break-word; font-size:.9rem; }

/* ── Phonics 테이블 ── */
.ph-table { display:flex; overflow-x:auto; gap:0; align-items:flex-start; padding-right:.75rem; box-sizing:border-box; }
.ph-col { display:flex; flex-direction:column; gap:.45rem; flex-shrink:0; }
.ph-col--labels { padding-right:.75rem; border-right:1px solid #e0e5e8; margin-right:.75rem; }
.ph-col--word + .ph-col--word { border-left:1px solid #e8ecef; padding-left:.75rem; margin-left:.75rem; }
.ph-col-word-title { font-size:.8rem; font-weight:720; color:#1d2b35; min-height:1.5rem; display:flex; align-items:center; }
.ph-row-label { font-size:.7rem; color:#5a6b74; white-space:nowrap; height:2.2rem; display:flex; align-items:center; }
.ph-row-label--score { height:1.6rem; }
.ph-token-list { display:flex; flex-wrap:nowrap; gap:.35rem; }
.ph-token-list--score { gap:.35rem; align-items:center; height:1.6rem; }
.ph-token { width:2.4rem; height:2.2rem; border-radius:4px; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:outline .1s,opacity .1s; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ph-token--answer { background:#f0f4f7; color:#43474d; }
.ph-token--soundlike { background:#26718e; color:#fff; }
.ph-token--selected { outline:2px solid #334155; outline-offset:2px; }
.ph-token:hover { opacity:.85; }
.ph-score { font-size:.75rem; font-weight:800; min-width:2.4rem; text-align:center; color:#45525b; flex-shrink:0; }
.ph-feedback-panel { display:flex; flex-direction:column; gap:.55rem; margin-top:.75rem; padding:.65rem .75rem; border-radius:8px; background:#f4f6f7; border:1px solid #e0e5e8; }
.ph-target-section { display:flex; align-items:baseline; gap:.6rem; }
.ph-target-answer { font-size:1.15rem; font-weight:800; color:#1d2b35; font-family:'Cascadia Code',Consolas,monospace; }
.ph-target-desc { margin:0; font-size:.76rem; color:#45525b; line-height:1.5; }
.ph-feedback-grid { display:grid; grid-template-columns:1fr 1fr 2fr; gap:.4rem .5rem; }
.ph-fb-header { margin:0; font-size:.68rem; font-weight:720; color:#5a6b74; background:#e8eef2; padding:.25rem .4rem; border-radius:4px; }
.ph-fb-cell { font-size:.75rem; color:#3a4a55; border:1px solid #dde4e8; border-radius:4px; padding:.3rem .45rem; line-height:1.5; background:#fff; }
.ph-fb-perfect { grid-column:1/-1; font-size:.78rem; color:#285e3c; padding:.2rem 0; }

/* 오버뷰 토글 버튼 — result-header 우측 정렬 */
.result-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

/* ── RFA 점수 표 ── */
.rfa-table-wrap { overflow-x: auto; }
.rfa-score-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
/* 가로 헤더 표 (Overall / 문장별 점수 공통) */
.rfa-score-table--row thead th { text-align: center; color: #6a7e8c; font-weight: 650; font-size: .68rem; border-bottom: 1px solid #dde4e8; padding: .18rem .6rem .22rem; white-space: nowrap; }
.rfa-score-table--row tbody td { text-align: center; color: #1d2933; font-weight: 750; padding: .22rem .6rem; font-variant-numeric: tabular-nums; }
.rfa-score-table--row tbody tr + tr { border-top: none; }

/* ── RFA 라이브 오버뷰 (result-content 내부 인식 중 표시) ── */
.rfa-live { padding: .6rem .75rem; }
.rfa-live-transcript { margin: 0; font-size: .88rem; color: #1d2933; line-height: 1.6; word-break: break-word; min-height: 1.4rem; }

/* ── RFA 단어별 3행 표 (Correct / Sound-Like / 발성 점수) ── */
.rfa-word-table-wrap { overflow-x: auto; margin-bottom: .4rem; }
.rfa-word-table { border-collapse: separate; border-spacing: .18rem .18rem; font-size: .74rem; white-space: nowrap; }
.rfa-word-table th { font-size: .63rem; font-weight: 700; color: #8a9499; padding: .1rem .55rem .1rem 0; text-align: right; vertical-align: middle; white-space: nowrap; border-right: 1px solid #dde4e8; }
.rfa-word-table td { padding: .1rem .32rem; text-align: center; vertical-align: middle; border-radius: .2rem; }
.rfa-wtd        { background: #eef1f3; color: #2d3e49; }
.rfa-wtd--num   { background: transparent; color: #8a9499; font-variant-numeric: tabular-nums; font-size: .7rem; }
.rfa-score--good { background: #dff0e4; color: #1e6b3a; }
.rfa-score--fair { background: #fef3cd; color: #7a5c00; }
.rfa-score--poor { background: #fae0e2; color: #8a2530; }