/* 부기사 오피스 통화 녹음 재생기·목록 단추 (솔루션 공통) 2026-11-12 — 오피스 화면 재생기와 같은 모양 */
.office-rec-open { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 4px; margin: 4px 0 0; border: 1px solid #d3e3fd; border-radius: 14px;
  background: #f0f6ff; color: #1b64da; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -.2px; cursor: pointer; white-space: nowrap; vertical-align: middle;
  font-family: inherit; transition: background .15s, border-color .15s; box-sizing: border-box; }
.office-rec-open::before { content: ""; width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  background: #3182f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11a1 1 0 0 0 1.5.86l8.6-5.5a1 1 0 0 0 0-1.72L10.5 5.64A1 1 0 0 0 9 6.5z'/%3E%3C/svg%3E") center / 12px no-repeat; }
.office-rec-open:hover { background: #e3eeff; border-color: #b7d1fb; }
.office-rec-open:focus-visible { outline: 2px solid #3182f6; outline-offset: 2px; }
.office-rec-player { display: grid; grid-template-columns: 30px minmax(60px, 1fr) auto; align-items: center; column-gap: 10px; box-sizing: border-box;
  width: 100%; max-width: 320px; height: 40px; margin: 6px 0 0; padding: 0 12px 0 5px; border: 1px solid #e3eaf3; border-radius: 20px; background: #f7f9fc; font-family: inherit; }
.office-rec-player audio { display: none; }
.office-rec-toggle { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #3182f6; color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(49, 130, 246, .28); transition: background .15s, transform .15s; }
.office-rec-toggle:hover { background: #1b64da; }
.office-rec-toggle:active { transform: scale(.94); }
.office-rec-toggle:focus-visible { outline: 2px solid #3182f6; outline-offset: 2px; }
.office-rec-toggle svg { display: block; }
.office-rec-track { position: relative; height: 18px; cursor: pointer; }
.office-rec-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: #dbe3ee; }
.office-rec-fill { position: absolute; left: 0; top: 7px; height: 4px; width: 0; border-radius: 2px; background: #3182f6; }
.office-rec-knob { position: absolute; top: 3px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #3182f6;
  box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .15s; }
.office-rec-player.is-playing .office-rec-knob, .office-rec-track:hover .office-rec-knob { opacity: 1; }
.office-rec-time { font-size: 12px; line-height: 1; color: #4e5968; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 9ch; text-align: right; }
.office-rec-player.is-error { grid-template-columns: 30px 1fr; }
.office-rec-player.is-error .office-rec-track { display: none; }
.office-rec-player.is-error .office-rec-time { color: #d22030; text-align: left; min-width: 0; }
.office-rec-player.is-error .office-rec-toggle { background: #b0b8c1; box-shadow: none; }
/* 녹음 파일 받기 단추 (재생기 오른쪽 끝) 2026-11-12 */
.office-rec-player { grid-template-columns: 30px minmax(60px, 1fr) auto 26px; }
.office-rec-download { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #4e5968; text-decoration: none; }
.office-rec-download:hover { background: #e8eef7; color: #1b64da; }
.office-rec-download:focus-visible { outline: 2px solid #3182f6; outline-offset: 1px; }
.office-rec-download svg { display: block; }
.office-rec-player.is-error .office-rec-download { display: none; }