:root { --ink: #1c2932; --accent: #26718e; --accent-strong: #1c607a; --action: #71ad45; --action-strong: #5d9735; --tint: #f0f7fa; }
.rest-layout { grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); }
.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; }
#record-status { color: #7d8992; }
.transport-badge { display:inline-block; padding:.15rem .45rem; border-radius:4px; font-size:.65rem; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.transport-multipart { background:#e8eef2; color:#4e6a78; }
.transport-info { display:none; } /* _initTransportSelect가 audio-select-wrap으로 대체 */

/* sr/assess 참조 방식 모드 탭 */
.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; }

/* 결과 렌더러 영역 */
.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; }
.result-preview.is-error .op-raw { color: #f5dfe1; }
.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; }
/* recognize 결과 — 종합점수/어절/어절점수/음소/음소점수 행 */
.intonation-canvas { display: block; width: 100%; height: 250px; border-radius: 6px; background: #eaeff7; }
.recog-scroll { overflow-x: auto; width: 100%; }
.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; }

/* sr/assess 미발화 어절 */
.assess-unspoken { opacity:.4; }

/* phonics/analyze — 테이블 레이아웃 (old_sample page.tsx 구조 참고) */
/* .ph-table: labels 고정열 + 단어별 수평 열 */
.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; }

/* phonics 토큰 버튼 */
.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; }

/* phonics 점수 텍스트 */
.ph-score { font-size:.75rem; font-weight:800; min-width:2.4rem; text-align:center; color:#45525b; flex-shrink:0; }

/* phonics 피드백 패널 (하단 단일) */
.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-section { }
.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; }

/* rfa 준비중 페이지 */
/* ── RFA 점수 표 ── */
.rfa-table-wrap { overflow-x: auto; }
.rfa-score-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.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 단어별 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; }