* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  /* 이 파일과 params-form.js 의 인라인 스타일은 폰트 크기를 전부 rem 으로 지정한다.
     따라서 루트 크기만 올리면 글자·여백이 함께 비례해 커지고 레이아웃 비율은 유지된다.
     112.5% = 18px (브라우저 기본 16px 대비 +12.5%). 개별 값을 손대지 않는 이유는
     수십 곳에 흩어진 rem 값의 상대 비율을 그대로 보존하기 위해서다. */
  font-size: 112.5%;
  font-family: Pretendard, Inter, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
body { margin: 0; min-width: 1200px; color: var(--ink); background: #f4f6f8; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; font-weight: 700; transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { opacity: .42; cursor: not-allowed; }
.demo-header { padding: 1.65rem 2rem 1rem; text-align: center; background: transparent; }
.demo-header > p { margin: 0 0 .32rem; color: #84909a; font-size: .66rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.demo-header > div { display: flex; justify-content: center; align-items: center; gap: .8rem; }
.demo-header h1 { margin: 0; color: #17212b; font-size: clamp(1.45rem, 2.4vw, 2.05rem); font-weight: 650; letter-spacing: -.035em; }
.status-stack { display: flex; gap: .35rem; }
.status-pill { padding: .3rem .58rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, #d8dee3); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); font-size: .66rem; font-weight: 750; }
.status-pill.off { color: #7c8791; border-color: #d5dade; background: #fff; }
main { width: min(1480px, calc(100% - 2rem)); min-width: 1200px; margin: 0 auto 3rem; }
.connection-bar { display: grid; grid-template-columns: 1.15fr 1.15fr 1.15fr auto; gap: .85rem; align-items: end; margin-bottom: 1rem; padding: 1rem; border: 1px solid #e0e5e9; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 6px 22px rgba(28,40,50,.05); }
/* connection-bar: endpoint-field(좁게) + creds-box(넓게) 2열 구조 */
.rest-connection-bar { grid-template-columns: minmax(340px, 1.2fr) minmax(400px, 1.2fr); }
.ws-connection-bar { grid-template-columns: minmax(260px, .8fr) minmax(480px, 1.6fr); }
/* 직접 입력 체크박스 */
.creds-override-wrap { display: flex; align-items: center; flex-shrink: 0; align-self: center; }
.creds-override-wrap label { display: flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 600; color: #7a8e99; cursor: pointer; white-space: nowrap; letter-spacing: 0; line-height: 1; }
.creds-override-wrap input[type=checkbox] { width: .78rem; height: .78rem; margin: 0; cursor: pointer; accent-color: #3a7bd5; flex-shrink: 0; outline: none; }
.creds-override-wrap input[type=checkbox]:focus { outline: none; box-shadow: none; }
/* endpoint-box / creds-box: connection-bar 내 그룹 박스 공통 스타일 */
.endpoint-box { display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid #dde5ea; border-radius: 10px; padding: .45rem .75rem .55rem; background: #f8fafb; min-width: 0; }
.endpoint-box .endpoint-field { min-width: 0; flex: 1; }
/* creds-box: 직접 입력 체크박스 + api-key + user-sid를 감싸는 그룹 박스 */
.creds-box { display: flex; border: 1px solid #dde5ea; border-radius: 10px; padding: .45rem .75rem .55rem; background: #f8fafb; min-width: 0; }
.creds-box .creds-fields { display: flex; gap: .6rem; align-items: end; width: 100%; }
.creds-box .creds-fields > label { flex: 1; min-width: 0; }
.creds-box .creds-fields .creds-override-wrap { align-self: flex-end; padding-bottom: .5rem; flex-shrink: 0; }
.creds-box.creds-box--editing { border-color: #aaccde; background: #f0f6fb; }
/* endpoint-select: url-composer 안에서 input과 같은 스타일 */
.endpoint-select { width: 100%; min-height: 2.4rem; margin-top: .35rem; border: 1px solid #d8dee3; border-radius: 8px; padding: .66rem .72rem; color: #1d2933; background: #fff; font-size: .72rem; cursor: pointer; }
/* url-composer 안에 select 가 들어올 때 input 과 동일하게 처리 */
.url-composer select { margin: 0; border: 0; border-radius: 0; box-shadow: none; font: .72rem/1 "Cascadia Code", Consolas, monospace; color: #1d2933; background: #fff; padding: .66rem .72rem; min-height: 2.4rem; width: 100%; cursor: pointer; }
.url-composer select:focus { box-shadow: none; outline: 0; }
label, legend { min-width: 0; color: #59656f; font-size: .7rem; font-weight: 750; letter-spacing: -.005em; }
small { color: #8a949d; font-weight: 500; }
input, select, textarea { width: 100%; min-width: 0; min-height: 2.4rem; margin-top: .35rem; border: 1px solid #d8dee3; border-radius: 8px; padding: .66rem .72rem; color: #1d2933; background: #fff; outline: 0; transition: border-color .16s, box-shadow .16s, background-color .16s; }
input:hover, select:hover, textarea:hover { border-color: #bec8cf; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.endpoint-field { min-width: 0; }
.url-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: .35rem; overflow: hidden; border: 1px solid #d8dee3; border-radius: 8px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.url-composer:hover { border-color: #bec8cf; }
.url-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.url-composer input { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.url-composer input:focus { box-shadow: none; }
.url-composer code { display: flex; align-items: center; padding: 0 .72rem; border-left: 1px solid color-mix(in srgb, var(--accent) 18%, #d8dee3); color: var(--accent); background: var(--tint); white-space: nowrap; font: 700 .67rem/1 "Cascadia Code", Consolas, monospace; }
fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.grid { display: grid; gap: .72rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-layout { display: grid; gap: 1rem; align-items: start; }
.workbench, .communication-panel { min-width: 0; border: 1px solid #dfe5e9; border-radius: 16px; background: #fff; box-shadow: 0 10px 32px rgba(27,39,49,.055); }
.workbench { padding: 1.1rem; }
.communication-panel { position: sticky; top: .75rem; padding: .95rem; background: rgba(255,255,255,.94); height: calc(100vh - 1.5rem); display: flex; flex-direction: column; overflow: hidden; }
.communication-panel .result-preview { flex: 1 1 0; margin-top: 0; margin-bottom: .75rem; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.communication-panel .result-preview .result-body { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.communication-panel .log { flex: 1 1 0; min-height: 0; max-height: unset; overflow-y: auto; }
.panel-heading, .communication-title, .subheading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
/* ── 언어 선택 버튼 그룹 (RFA 파라미터 섹션 상단) ── */
.lang-selector { display: flex; gap: .3rem; margin-bottom: .6rem; padding: .55rem .65rem; background: #f8fafc; border: 1px solid #dfe5e9; border-radius: 10px; }
.lang-btn { padding: .28rem .72rem; border: 1px solid #d0d8de; border-radius: 999px; background: #f5f8fa; color: #5a6b76; font-size: .72rem; font-weight: 600; cursor: pointer; transition: background .13s, color .13s, border-color .13s; }
.lang-btn:hover { background: #e8eef2; border-color: #b8c5cd; color: #2d3e49; }
.lang-btn--active { background: #1a6ed8; border-color: #1a6ed8; color: #fff; }
.lang-btn--active:hover { background: #1560c0; border-color: #1560c0; }
.panel-heading { flex-direction: column; align-items: flex-start; gap: .3rem; margin-bottom: .95rem; padding-bottom: .75rem; border-bottom: 1px solid #edf0f2; }
.panel-heading > div { display: flex; align-items: center; gap: .6rem; }
.panel-heading span { display: none; }
h2, h3 { margin: 0; }
.panel-heading h2 { color: #202c35; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.panel-heading code { color: #75818a; font: .65rem "Cascadia Code", Consolas, monospace; word-break: break-all; }
.communication-title { margin-bottom: .75rem; }
.communication-title h2 { color: #202c35; font-size: 1.15rem; font-weight: 680; letter-spacing: -.025em; }
.subheading { margin: .6rem 0 0; padding: .55rem .75rem .45rem; background: #f8fafc; border: 1px solid #dfe5e9; border-radius: 10px 10px 0 0; border-bottom: none; }
#params-fields { border: 1px solid #dfe5e9; border-radius: 0 0 10px 10px; padding: .65rem .75rem .75rem; background: #fafbfc; }
.subheading h3 { color: #26323b; font-size: .88rem; font-weight: 720; }
.subheading p { margin: .18rem 0 0; color: #849099; font-size: .68rem; line-height: 1.45; }
.segmented { display: flex; gap: .2rem; margin-top: .35rem; padding: .22rem; border-radius: 8px; background: #f0f3f5; }
.segmented label { flex: 1; }
.segmented input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.segmented span { display: block; padding: .47rem .35rem; border-radius: 6px; color: #63707a; text-align: center; cursor: pointer; transition: color .16s, background-color .16s, box-shadow .16s; }
.segmented input:checked + span { color: #fff; background: var(--accent); box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 22%, transparent); }
.transport-field { margin-bottom: .72rem; }
.client-info-grid { margin-top: .72rem; }
.notice { margin: .8rem 0 0; padding: .66rem .75rem; border-left: 3px solid color-mix(in srgb, var(--accent) 78%, #fff); border-radius: 0 7px 7px 0; color: #64717a; background: var(--tint); font-size: .72rem; line-height: 1.55; }
.outline-button, .step-button, .send-button, .danger-button { min-height: 36px; padding: .56rem .85rem; border-radius: 8px; }
.outline-button { border: 1px solid #d6dce1; color: #52606a; background: #fff; }
.outline-button:not(:disabled):hover { border-color: #b9c3ca; background: #f8fafb; }
.outline-button.small { min-height: 30px; padding: .36rem .58rem; border-radius: 7px; font-size: .66rem; }
.step-button { color: #fff; background: var(--accent); }
.step-button:not(:disabled):hover { background: var(--accent-strong); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent); }
.send-button { color: #fff; background: var(--action); }
.send-button:not(:disabled):hover { background: var(--action-strong); box-shadow: 0 4px 12px color-mix(in srgb, var(--action) 22%, transparent); }
.danger-button { color: #fff; background: #c65b64; }
.danger-button:not(:disabled):hover { background: #ae4650; }
.action-row, .record-row, .button-grid { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
#send-area:not(.audio-box-send) { margin: .6rem 0; padding: .6rem .75rem; background: #f3f8fc; border: 1px solid #ccdce8; border-radius: 10px; }
#send-area.audio-box-send { background: none; border: none; padding: 0; margin: 0; }
.action-row .send-button { min-width: 122px; }
.record-row span { color: #7d8992; font-size: .7rem; }
.audio-box { margin: .6rem 0; padding: .85rem; border: 1px solid #e0e5e8; border-radius: 10px; background: #f9fafb; }
.audio-box-top { display: flex; align-items: flex-start; gap: .75rem; }
.audio-box-controls { flex: 1 1 0; min-width: 0; }
.audio-box-send { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding-top: .1rem; }
.audio-box-send .action-row { flex-direction: column; align-items: flex-end; gap: .4rem; margin: 0; }
.audio-box-send .send-button, .audio-box-send .danger-button, .audio-box-send .outline-button { white-space: nowrap; }
.result-preview { min-height: 190px; margin-top: 1rem; overflow: hidden; border: 1px solid #dce3e0; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(24,42,33,.07); transition: border-color .18s, box-shadow .18s; }
.result-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .82rem 1rem; border-bottom: 1px solid #e8ecea; }
.result-header > div { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.result-kicker { padding: .22rem .4rem; border-radius: 5px; color: #fff; background: #337555; font-size: .56rem; font-weight: 850; letter-spacing: .1em; }
.result-header strong { overflow: hidden; color: #26342d; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.result-meta { display: flex; justify-content: space-between; align-items: center; padding: .58rem 1rem .52rem; color: #7b8780; font-size: .64rem; }
#result-status { padding: .2rem .42rem; border-radius: 999px; color: #357454; background: #e7f2eb; font-weight: 750; }
.result-preview pre { min-height: 105px; max-height: 220px; margin: 0 .85rem .85rem; padding: .85rem; overflow: auto; border-radius: 9px; color: #dcebe2; background: #17251e; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-color: #50645a transparent; font: .68rem/1.6 "Cascadia Code", Consolas, monospace; }
.result-preview.is-empty { border-style: dashed; box-shadow: none; }
.result-preview.is-empty .result-kicker { color: #6f7c75; background: #e9eeeb; }
.result-preview.is-empty #result-status { color: #7a8680; background: #edf0ef; }
.result-preview.is-empty pre { display: grid; place-items: center; color: #89948e; background: #f3f5f4; text-align: center; }
.result-preview.is-success { border-color: #b7d3c1; box-shadow: 0 9px 24px rgba(35,102,65,.09); }
.result-preview.is-error { border-color: #e0b9bd; box-shadow: 0 9px 24px rgba(150,55,64,.08); }
.result-preview.is-error .result-kicker { background: #b9515a; }
.result-preview.is-error #result-status { color: #a23f48; background: #f8e9eb; }
.result-preview.is-error pre { color: #f5dfe1; background: #321e21; }.field-form { display: grid; gap: .58rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.field-group { padding: .68rem; border: 1px solid #dfe5e8; border-radius: 10px; background: #f7f9fa; }
.field-group .field-group { margin-top: .5rem; background: #fff; }
.field-group-head, .field-item-head { display: flex; justify-content: space-between; align-items: center; gap: .45rem; }
.field-group-head { margin-bottom: .52rem; }
.field-group-head h3 { color: #35424b; font-size: .76rem; font-weight: 720; }
.field-group-head code { color: #8b969e; font-size: .58rem; }
.field-item { min-width: 0; padding: .58rem; border: 1px solid #e0e5e8; border-radius: 9px; background: #fff; transition: border-color .16s, opacity .16s, box-shadow .16s; }
.field-item:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, #dfe5e8); box-shadow: 0 3px 10px rgba(31,43,52,.045); }
.field-item.is-excluded { opacity: .48; border-style: dashed; box-shadow: none; }
.field-name { display: flex; min-width: 0; align-items: center; gap: .3rem; color: #33414a; overflow-wrap: anywhere; }
.field-type { padding: .1rem .28rem; border-radius: 4px; color: #71808a; background: #eef2f4; font: 600 .54rem "Cascadia Code", Consolas, monospace; }
.field-type-boolean { color: #287057; background: #e6f3ed; }
.field-type-number { color: #66528d; background: #eeeaf6; }
.field-include { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .22rem; color: #7a8790; font-size: .6rem; cursor: pointer; }
.field-include input { width: .86rem; height: .86rem; margin: 0; accent-color: var(--accent); }
.field-item > input, .field-item > select, .field-item > textarea { min-height: 2.2rem; margin-top: .44rem; padding: .54rem .58rem; border-color: #e0e5e8; background: #fbfcfc; }
.field-json-value { min-height: 3rem; resize: vertical; }
.empty { margin: 0; padding: 2.2rem 1rem; color: #8a959e; text-align: center; }
.log-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; padding: .5rem .62rem; border: 1px solid #e2e7ea; border-radius: 8px; color: #7c8891; background: #f8fafb; font-size: .65rem; }
.log-summary span { display: inline-flex; align-items: center; gap: .38rem; }
.log-summary span::before { width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); content: ""; }
.log-summary strong { color: #53616b; font-size: .66rem; }
.log { display: flex; flex-direction: column; gap: .68rem; overflow-y: auto; scrollbar-color: #c7cfd5 transparent; scrollbar-width: thin; }
.entry, .log-row, .exchange-group { flex: 0 0 auto; animation: log-enter .2s ease-out; }
@keyframes log-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.exchange-group { overflow: hidden; border: 1px solid #dfe5e8; border-radius: 11px; background: #f8fafb; }
.exchange-group.is-error { border-color: #e2c3c6; }
.exchange-group details { list-style: none; }
.exchange-group details > summary { list-style: none; }
.exchange-group details > summary::-webkit-details-marker { display: none; }
.exchange-head { display: flex; gap: .7rem; padding: .55rem .68rem; border-bottom: 1px solid #e8ecef; color: #53616b; background: #f4f7f8; font-size: .64rem; cursor: pointer; user-select: none; }

/* audio select wrap: audio-source-tabs / audio-fmt-tabs 대체 select UI */
.audio-select-wrap { display: flex; flex-direction: column; gap: .18rem; margin-bottom: .45rem; }
.audio-select-label { font-size: .65rem; font-weight: 700; color: #7a8e99; letter-spacing: .01em; }
.audio-select-box { min-height: unset; margin-top: 0; padding: .28rem .4rem; font-size: .72rem; border: 1px solid #c8d4db; border-radius: 6px; background: #f4f7f9; color: #2a3a45; cursor: pointer; width: auto; min-width: 8rem; }
/* 오디오 소스 탭 (REST·WS 공통) */
.audio-source-tabs { display: flex; gap: .35rem; margin-bottom: .6rem; }
.audio-tab { display: flex; align-items: center; gap: .38rem; padding: .32rem .75rem; border: 1px solid #cdd5db; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #6d7d87; background: #f5f8fa; cursor: pointer; user-select: none; transition: background .13s, color .13s, border-color .13s; }
.audio-tab input[type="radio"] { display: none; }
.audio-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent-strong); }
.audio-tab:not(.active):not(.disabled):hover { border-color: #a8bdc7; background: #eef3f6; }
.audio-tab.disabled { opacity: .45; cursor: not-allowed; }
.audio-panel { margin-bottom: .4rem; }
.audio-format-hint { margin: .3rem 0 0; color: #8a9499; font-size: .66rem; font-family: "Cascadia Code", Consolas, monospace; }
.audio-fmt-tabs { display: flex; gap: .28rem; margin-bottom: .45rem; }
.audio-fmt-tab { display: flex; align-items: center; gap: .3rem; padding: .22rem .58rem; border: 1px solid #cdd5db; border-radius: 999px; font-size: .7rem; font-weight: 600; color: #6d7d87; background: #f5f8fa; cursor: pointer; user-select: none; transition: background .13s, color .13s, border-color .13s; }
.audio-fmt-tab input[type="radio"] { display: none; }
.audio-fmt-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent-strong); }
.audio-fmt-tab:not(.active):hover { border-color: #a8bdc7; background: #eef3f6; }
.audio-file-error { margin: .3rem 0 0; color: #b85059; font-size: .68rem; }

/* 현재 mode에서 사용하지 않는 파라미터 필드 */
.result-status-block { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .52rem .72rem; border: 1px solid #e0b9bd; border-radius: 8px; background: #f9edef; }
.result-status-badge { padding: .18rem .42rem; border-radius: 4px; color: #fff; background: #c65b64; white-space: nowrap; font: 700 .65rem "Cascadia Code", Consolas, monospace; }
.result-status-msg { color: #7a3040; font-size: .76rem; }
.field-muted { opacity: .42; }
.field-muted input, .field-muted select { cursor: not-allowed; }
.exchange-head strong { min-width: 0; overflow: hidden; color: #37454f; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.exchange-head span { flex: 0 0 auto; color: #89949c; margin-left: auto; }
.exchange-messages { display: grid; gap: .55rem; padding: .6rem; }
.wire-message { overflow: hidden; border: 1px solid #e0e5e8; border-radius: 9px; background: #fff; }
.log-row details { list-style: none; }
.log-row details > summary { list-style: none; }
.log-row details > summary::-webkit-details-marker { display: none; }
.wire-message details { list-style: none; }
.wire-message details > summary { list-style: none; }
.wire-message details > summary::-webkit-details-marker { display: none; }
.wire-message-title { display: flex; justify-content: space-between; align-items: center; gap: .55rem; min-height: 34px; padding: .46rem .58rem; border-bottom: 1px solid #e9edef; color: #53616a; background: #f7f9fa; font-size: .63rem; cursor: pointer; user-select: none; }
.wire-message-title::after { content: "▾"; flex-shrink: 0; font-size: .7rem; color: #9aa5ac; transition: transform .15s; }
details:not([open]) .wire-message-title::after { transform: rotate(-90deg); }
.exchange-head::after { content: "▾"; flex-shrink: 0; font-size: .7rem; color: #9aa5ac; transition: transform .15s; }
details:not([open]) .exchange-head::after { transform: rotate(-90deg); }
.wire-message-title strong { color: #fff; font-size: .64rem; }
.wire-message-title span { margin-right: auto; color: #718089; }
.wire-message.request .wire-message-title { background: #edf5f8; }
.wire-message.request .wire-message-title strong { padding: .18rem .38rem; border-radius: 4px; background: #26718e; }
.wire-message.response .wire-message-title { background: #edf4f7; }
.wire-message.response .wire-message-title strong { padding: .18rem .38rem; border-radius: 4px; background: #3d7a96; }
.wire-message.system .wire-message-title { background: #eef0f2; }
.wire-message.system .wire-message-title strong { padding: .18rem .38rem; border-radius: 4px; color: #fff; background: #5a6b76; }
.wire-message.error .wire-message-title { background: #f9edef; }
.wire-part { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: .45rem; padding: .5rem; }
.wire-part + .wire-part { border-top: 1px solid #edf0f2; }
.wire-part h3 { margin: 0; padding: .5rem .35rem; color: #66737c; font-size: .61rem; font-weight: 780; text-transform: uppercase; }
.wire-part pre { min-height: 52px; margin: 0; padding: .58rem; overflow: auto; border-radius: 7px; color: #45525b; background: #f4f6f7; white-space: pre-wrap; overflow-wrap: anywhere; font: .63rem/1.52 "Cascadia Code", Consolas, monospace; }
.wire-part:last-child pre { background: #edf1f2; }
.params { min-height: 150px; resize: vertical; font: .7rem/1.55 "Cascadia Code", Consolas, monospace; }

/* ── 결과 모달 ── */
#result-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,22,18,.58); z-index: 900; align-items: center; justify-content: center; padding: 1rem; }
#result-modal-overlay.open { display: flex; }
#result-modal { display: flex; flex-direction: column; width: min(980px,100%); height: 92vh; background: #fff; border-radius: 16px; box-shadow: 0 28px 72px rgba(10,22,18,.3); overflow: hidden; }
#result-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; background: #f5f8f6; border-bottom: 1px solid #dce3e0; flex-shrink: 0; }
.result-modal-title { font-size: 1rem; font-weight: 720; color: #202c35; letter-spacing: -.02em; }
#result-modal-close { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 6px; font-size: .95rem; color: #6b7e74; cursor: pointer; flex-shrink: 0; }
#result-modal-close:hover { background: #e9ecea; color: #202c35; }
#result-modal-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 1.25rem; }
/* 모달 내 result-preview: 모달 body 전체를 채우도록 */
#result-modal-body { padding: 0; display: flex; flex-direction: column; }
#result-modal-body .result-preview { margin: 0; min-height: 0; flex: 1 1 0; display: flex; flex-direction: column; border-radius: 0; border: none; box-shadow: none; }
#result-modal-body .result-preview .result-body { flex: 1 1 0; min-height: 640px; overflow-y: auto; padding: .85rem 1rem 1.25rem; border: 1px solid #dce3e0; border-radius: 10px; margin: 0 1rem 1rem; }
/* 모달에선 pre 높이 제한 없이 전체 내용 표시 */
#result-modal-body .result-preview pre { max-height: none; min-height: 200px; }
/* 결과 처리 예제 버튼 — 눈에 띄는 채움 색상 */
.result-modal-btn-row { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.result-modal-btn { background: #e8f4f8; border-color: #26718e; color: #26718e; font-weight: 660; transition: background .15s, border-color .15s, color .15s; min-height: 18px; padding: .1rem .48rem; font-size: .62rem; line-height: 1.3; }
.result-modal-btn:hover:not(:disabled) { background: #26718e; color: #fff; border-color: #26718e; }
.result-modal-btn.has-result { background: #26718e; color: #fff; border-color: #1f5a72; }
.result-modal-btn.has-result:hover { background: #1f5a72; border-color: #1a4d60; }
.result-modal-btn:disabled { background: #f0f2f3; border-color: #c8d0d5; color: #a0adb5; cursor: not-allowed; }

/* ── 녹음 팝업 트리거 버튼 ── */
#open-recorder { min-height: 28px; padding: .2rem .65rem; font-size: .74rem; line-height: 1.3; }
#record-status { font-size: .6rem !important; }

/* ── 녹음 팝업 dialog ── */
/* 오른쪽 정렬: margin auto left 로 화면 오른쪽에 배치 */
#recorder-dialog { margin: auto 1.5rem auto auto; }
/* 오버레이(backdrop) 투명도 최소화 */
#recorder-dialog::backdrop { background: rgba(10,22,18,.12); }