/* =====================================================================
   app.css — tokens.css / paybridge.css 가 제공하지 않는 레이아웃 보강.
   색·라운드·폰트는 전부 토큰 변수만 사용한다. 새 색상 정의 금지.
   ===================================================================== */

[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Lucide 아이콘 기본 크기 */
.lucide { width: 18px; height: 18px; flex: none; }
.pb-seg__item .lucide { width: 15px; height: 15px; }
.pb-mic .lucide { width: 26px; height: 26px; }
.pb-scrollfab .lucide { width: 22px; height: 22px; }

/* 공용 입력 필드 (select / input / textarea) */
.fld {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--fg1);
  font-size: 15px;
}
.fld:focus { outline: none; box-shadow: var(--shadow-focus); }

/* 임베드(키오스크 상담원 탭) — 브랜드 헤더·고지 배너 숨김, 셸 그림자 제거 */
body.embed .app__head { display: none; }
body.embed #noticeBanner { display: none; }
body.embed .app { box-shadow: none; max-width: none; }

/* ── 사용자 화면 셸 ─────────────────────────────────────────── */
.app {
  max-width: 780px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: var(--shadow-md);
}

.app__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.app__notice {
  margin: 10px 20px 0;
  font-size: 13px;
}

/* 언어 페어 */
.langbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.langbar .lucide { color: var(--fg3); }
.langbar select { max-width: 52%; min-width: 0; }
.langbar__peer {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.langbar__peer small { font-weight: 500; color: var(--fg3); margin-left: 6px; }

/* 대화 스트림 래퍼 */
.streamwrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.stream-empty {
  margin: auto;
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--fg3);
  line-height: 1.7;
}

/* 턴 메타 행 (방향 칩 · 배지 · 화자) */
.turnmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-turn--remote .turnmeta { justify-content: flex-end; }
.turnmeta__who { font-size: 12px; font-weight: 700; color: var(--fg2); }
.turnmeta__time { font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; }

/* 모달리티 토글 행 — 4조합의 정체. 항상 노출한다 */
.modality {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.modality__group { display: flex; align-items: center; gap: 10px; }
.modality__label { font-size: 12px; font-weight: 700; color: var(--fg3); letter-spacing: 0.04em; }

/* 하단 입력 영역 */
.app__foot { padding: 10px 16px 16px; background: var(--surface); }
.textbar { display: flex; gap: 10px; }
.textbar .fld { flex: 1; min-width: 0; }
.pb-voicebar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 스트림 하단 상태(상대 입력 중) */
.stream-typing { padding: 4px 0 12px; }

/* ── 상담원 콘솔 ────────────────────────────────────────────── */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.login__card { width: min(400px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login__err { font-size: 13px; color: var(--danger); min-height: 18px; }

.pb-console__list { display: flex; flex-direction: column; min-height: 0; }
.listhead {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.list-empty { padding: 28px 16px; font-size: 13px; color: var(--fg3); text-align: center; }
.listfoot {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.listfoot__label { font-size: 12px; font-weight: 700; color: var(--fg3); letter-spacing: 0.04em; }

.pb-sessionitem__meta .lucide { width: 13px; height: 13px; }

.sessionhead__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sessionhead__name { font-size: 15px; font-weight: 700; }
.sessionhead__sub { font-size: 12px; color: var(--blue-200); display: flex; align-items: center; gap: 6px; }
.sessionhead__sub .lucide { width: 13px; height: 13px; }
.sessionhead__time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 대화 뷰 + (다음 단계) 미러 패널 자리.
   --mirror-w 를 키우면 우측에 미러 패널 컬럼이 열린다 — 지금은 대화 뷰가 폭을 다 쓴다 */
.workarea {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr var(--mirror-w, 0px);
}
.mirror-slot { overflow: hidden; border-left: 1px solid var(--border); }

.work { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.main-empty {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--fg3);
}

/* 콘솔의 대화 타이포는 사용자 화면보다 한 단계 작게 */
.pb-stream--console .pb-turn__primary { font-size: 18px; line-height: 1.4; }
.pb-stream--console .pb-turn--remote .pb-turn__body { max-width: 72%; }

.main-banner { margin: 12px 16px 0; }

/* ── TTS 보이스 테스트 페이지 ───────────────────────────────── */
.ttslab {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ttslab__controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ttslab__text { flex: 1; min-width: 220px; }
.ttslab__rate { display: flex; align-items: center; gap: 10px; }
.ttslab__rate input[type="range"] { accent-color: var(--primary); width: 140px; }
.ttslab__rows { display: flex; flex-direction: column; }
.ttslab__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}
.ttslab__row:last-child { border-bottom: none; }
.ttslab__pick { width: 18px; height: 18px; accent-color: var(--primary); flex: none; cursor: pointer; }
.ttslab__info { flex: 1; min-width: 0; }
.ttslab__name { font-size: 15px; font-weight: 600; color: var(--fg1); word-break: break-all; }
.ttslab__meta { font-size: 12px; color: var(--fg3); margin-top: 2px; }
.ttslab__note { flex-basis: 100%; font-size: 12px; color: var(--fg3); padding-left: 30px; }
.ttslab__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app__head a.pb-btn { text-decoration: none; }

/* ── TRS FAQ 모바일 페이지 (P7 T4) ──────────────────────────── */
body.faqpage { background: var(--bg-subtle); }
.faq { max-width: 680px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.faq__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.faq__lang { max-width: 150px; }
.faq__list { flex: 1; padding: 12px 16px 8px; }
/* P10 T8: 카테고리 아코디언 */
.faq__cat { margin-bottom: 14px; }
.faq__catbox { border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--bg-subtle); overflow: hidden; }
.faq__cathead { cursor: pointer; padding: 16px 18px; font-size: 17px; font-weight: 800; color: var(--nice-navy); list-style: none; display: flex; align-items: center; gap: 10px; }
.faq__cathead::-webkit-details-marker { display: none; }
.faq__catbox[open] > .faq__cathead { border-bottom: 1px solid var(--border); }
.faq__catn { font-size: 13px; font-weight: 700; color: var(--blue-700); background: var(--blue-100); border-radius: var(--r-full); padding: 2px 10px; }
.faq__catbox .faq__item { margin: 10px 12px; }
.faq__item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.faq__item summary { cursor: pointer; padding: 16px 18px; font-size: 16px; font-weight: 700; color: var(--fg1); list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item[open] summary { border-bottom: 1px dashed var(--border); color: var(--primary); }
.faq__a { padding: 14px 18px 16px; font-size: 15px; line-height: 1.6; color: var(--fg2); }
.faq__src { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.faq__chat { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.faq__bubble { max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: 15px; line-height: 1.55; }
.faq__bubble--q { align-self: flex-end; background: var(--blue-50); border: 1px solid var(--blue-100); border-bottom-right-radius: 4px; }
.faq__bubble--a { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.faq__foot { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.faq__foot .fld { flex: 1; min-width: 0; }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pb-brand__tag { display: none; }
  .app__head { padding: 10px 14px; gap: 8px; }
  .langbar { gap: 8px; padding: 10px 14px; }
  .pb-stream { padding: 12px 14px 8px; }
  .modality { gap: 10px; padding: 8px 14px; }
  .app__foot { padding: 8px 10px 12px; }
  .pb-voicebar { gap: 10px; padding: 12px 14px; }
  .pb-turn--remote .pb-turn__body { max-width: 96%; }
}

@media (max-width: 900px) {
  .pb-console__list { max-height: 40dvh; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── P18: 상담원 콘솔 음성 — 4상태 마이크(키오스크 2a 규격)·리스닝바·축 토글 ── */
.agent-toggles { display: flex; gap: 8px; }
.agent-tgl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; font-size: 13px; font-weight: 700; color: var(--fg2); background: var(--gray-0); border: 1.5px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: all 150ms ease-out; }
.agent-tgl[aria-pressed="true"] { background: var(--blue-50); border-color: var(--primary); color: var(--blue-700); }
.agent-tgl i { width: 16px; height: 16px; }
.agent-mic { width: 44px; height: 44px; border-radius: var(--r-full); background: var(--primary); color: var(--gray-0); border: none; transition: background 180ms ease-out, transform 120ms ease-out; }
.agent-mic:active { transform: scale(0.98); }
.agent-mic[data-state="listening"] { background: var(--danger); animation: pbRing 1.6s ease-out infinite; } /* 녹음 전용 빨강 — 토큰 --danger 사용 (앱 셸은 새 색 정의 금지) */
.agent-mic[data-state="recog"] { background: var(--nice-navy); pointer-events: none; }
.agent-mic[data-state="recog"] i { animation: pbSpin 1s linear infinite; }
.agent-mic[data-state="speaking"] { background: var(--primary); }
.agent-mic[data-state="speaking"] i { animation: pbPulse 0.9s ease-in-out infinite; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
@keyframes pbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.agent-listen { display: flex; align-items: center; gap: 11px; background: var(--nice-navy); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.agent-listen__dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--danger); animation: pbPulse 1s ease-in-out infinite; flex: none; }
.agent-listen__text { flex: 1; min-width: 0; color: var(--gray-0); font-size: 14px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-listen__cancel { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; flex: none; }

/* ════════════════════════════════════════════════════════════════
   P19 — 상담원 콘솔 컴포저 재설계 (8a·⑱⑲) + 7a 버튼·아이콘 규칙
   ════════════════════════════════════════════════════════════════ */

/* ── 7a-2·4: 즉각 피드백 100ms · pressed scale 0.97 + 명도 −8% (120ms in / 200ms out) ── */
button { transition: transform 200ms ease-out, filter 200ms ease-out, background 150ms ease-out, box-shadow 200ms ease-out; }
button:active { transform: scale(0.97); filter: brightness(0.92); transition-duration: 120ms; box-shadow: none; }
/* 7a-6: 포커스 링 제거 금지 — 3px 링 */
button:focus-visible, .fld:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; box-shadow: none; }
/* 7a-3: 상태 6종 — disabled·loading·success 공통 */
button:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.is-loading { pointer-events: none; }
.is-success { background: var(--success) !important; color: var(--gray-0) !important; }
/* ⑰: 스트로크 1.75 고정 */
.lucide { stroke-width: 1.75; }

/* ── ⑱ 레일 ── */
.ac-item__pair { font-size: 11px; padding: 2px 8px; }
.ac-item__time { margin-left: auto; font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.ac-item__preview { font-size: 13px; color: var(--fg2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item__tag { margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--fg3); }
.ac-item__tag--wait { color: var(--danger); }
.ac-profile { flex-direction: row; align-items: center; gap: 10px; }
.ac-profile__avatar { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--blue-50); color: var(--blue-700); font-size: 13px; font-weight: 800; display: grid; place-items: center; flex: none; }
.ac-profile__meta b { display: block; font-size: 13px; color: var(--fg1); }
.ac-profile__state { font-size: 11px; color: var(--success); font-weight: 700; }

/* ── ⑱ 헤더 설정 팝오버 ── */
.ac-settings { position: relative; }
.ac-settings__btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.14); color: var(--gray-0); border: none; border-radius: var(--r-full); padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ac-settings__btn .lucide { width: 18px; height: 18px; }
.ac-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; gap: 10px; }
.ac-pop__label { font-size: 12px; font-weight: 700; color: var(--fg3); }

/* ── ⑱⑲ 컴포저 ── */
.ac-composer__quickhint { font-size: 11px; color: var(--fg3); margin: 2px 0 6px; display: block; }
.ac-composer__row { display: flex; gap: 10px; align-items: stretch; }
.ac-composer__field { position: relative; flex: 1; min-width: 0; }
.ac-composer__field .pb-composer__input { width: 100%; height: 100%; }
.ac-ptt {
  flex: none; width: 150px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--primary); color: var(--gray-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10px 12px; user-select: none; touch-action: none;
}
.ac-ptt .lucide { width: 24px; height: 24px; }
.ac-ptt__label { font-size: 15px; font-weight: 800; }
.ac-ptt__sub { font-size: 10px; opacity: 0.75; }
.ac-ptt[data-state="listening"] { background: var(--danger); animation: pbRing 1.6s ease-out infinite; }
.ac-ptt[data-state="recog"] { background: var(--nice-navy); pointer-events: none; }
.ac-ptt[data-state="speaking"] { background: var(--primary); }
.ac-ptt[data-state="speaking"] .lucide { animation: pbPulse 0.9s ease-in-out infinite; }
.ac-send { flex: none; align-self: stretch; }
.ac-composer__keys { font-size: 11px; color: var(--fg3); margin-left: auto; }
/* ⑲: 녹음 중 — 입력창 자리가 파형+자막으로 */
.ac-rec { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; background: var(--nice-navy); border-radius: var(--r-md); padding: 0 16px; }
.ac-rec__wave { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.ac-rec__wave i { width: 3px; height: 8px; border-radius: 2px; background: var(--danger); animation: acWave 0.9s ease-in-out infinite; }
.ac-rec__wave i:nth-child(2) { animation-delay: 0.12s; height: 14px; }
.ac-rec__wave i:nth-child(3) { animation-delay: 0.24s; height: 18px; }
.ac-rec__wave i:nth-child(4) { animation-delay: 0.36s; height: 12px; }
.ac-rec__wave i:nth-child(5) { animation-delay: 0.48s; height: 8px; }
@keyframes acWave { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1.4); } }
.ac-rec__text { flex: 1; min-width: 0; color: var(--gray-0); font-size: 14px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-rec__meta { flex: none; font-size: 12px; color: rgba(255,255,255,0.75); }
.ac-rec__meta b { color: var(--gray-0); font-variant-numeric: tabular-nums; }

/* ── ⑱ 버블 라벨·전달 상태·다시 듣기 ── */
.ac-turn__label { font-size: 11px; font-weight: 800; color: var(--fg3); letter-spacing: 0.02em; margin-top: 6px; }
.pb-turn--remote .ac-turn__label { color: var(--blue-100); }
.ac-turn__status { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--blue-100); }
.ac-turn__listen { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); border: none; border-radius: var(--r-full); padding: 6px 12px; cursor: pointer; }
.ac-turn__listen .lucide { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
   P20 — 11a 콘솔 레드라인(전부 px·1600 기준) + 10a 데스크톱 인터랙션
   ════════════════════════════════════════════════════════════════ */

/* ── P21 13a·14a: 전문가 밀도 콘솔 토큰 (L64 폐기 → h44) · 전 요소 토큰만 사용 ── */
.pb-console, .ac-dialog {
  --con-fs-body: 15px; --con-fs-sub: 14px; --con-fs-label: 11px; --con-fs-meta: 12px;
  --con-fs-btn: 14px; --con-fs-title: 15px; --con-fs-chip: 13px;
  --con-h-ctrl: 44px; --con-h-header: 56px; --con-h-chip: 28px;
  --con-r-ctrl: 10px; --con-icon: 18px;
  --con-lh: 1.5;
  /* 14a 지정색 — 컴포넌트 토큰 정의부만 hex */
  --ac-border: #C5CEDA; --ac-border-1: #DDE3EC; --ac-ghost: #F1F4F9;
  --ac-sub2: #44546A; --ac-meta: #5C6B82; --con-tint: #F6F8FB;
}
/* 11a 레드라인 지정색 — 컴포넌트 토큰 정의부 (정본 명시 수치) */
.pb-console, .ac-dialog {
  --ac-border: #C5CEDA; --ac-ghost: #F1F4F9; --ac-sub2: #44546A; --ac-meta: #5C6B82;
}
/* ── 레이아웃: 사이드바 320 · 헤더 76 · 트랜스크립트 좌우 28 · 버블 max 640 ── */
.pb-console { grid-template-columns: 320px 1fr; }
.pb-console__list { width: 320px; }
.pb-sessionhead { height: 76px; padding: 0 20px; box-sizing: border-box; }
.pb-stream--console { padding-left: 28px; padding-right: 28px; }
.pb-stream--console .pb-turn__body { max-width: 640px; }
.pb-stream--console .pb-turn--remote .pb-turn__body { max-width: 640px; }
.ac-composer { padding: 16px 28px 20px !important; }
.ac-composer__row { gap: 12px; }

/* ── 컨트롤 3단계: L64/r14/icon24 · M44/r10~12/icon20 · S32~36/r999/icon14 ── */
.ac-composer__field .pb-composer__input { height: 64px !important; min-height: 64px; border-radius: 14px !important; border: 1.5px solid var(--ac-border) !important; font-size: 17px; padding: 10px 16px; box-sizing: border-box; resize: none; }
.ac-composer__field .pb-composer__input:focus-visible { border-color: var(--primary); outline: 3px solid var(--primary); outline-offset: 0; }
.ac-ptt { width: auto; height: 64px; border-radius: 14px; padding: 0 26px; flex-direction: row; gap: 10px; }
.ac-ptt .lucide { width: 24px; height: 24px; }
.ac-ptt__label { font-size: 17px; font-weight: 800; }
.ac-ptt__sub { font-size: 14px; color: rgba(255,255,255,0.85); } /* 9a-P2: 저대비 12px → 14/0.85 */
.ac-send { height: 64px; border-radius: 14px; font-size: 17px; font-weight: 800; padding: 0 26px; }
.ac-send .lucide { width: 24px; height: 24px; }
.ac-settings__btn, .ac-end { height: 44px; border-radius: 10px; font-size: 14px; }
.ac-settings__btn .lucide, .ac-end .lucide { width: 20px; height: 20px; }
.pb-sessionhead .pb-iconbtn { width: 44px; height: 44px; border-radius: 10px; }
.ac-turn__listen { height: 32px; border-radius: 999px; }
.ac-turn__listen .lucide { width: 14px; height: 14px; }
.pb-composer__quick .pb-chip { height: 34px; display: inline-flex; align-items: center; border-radius: 999px; }

/* ── 타이포: 버블 18/400/1.55 · 원문 17 #44546A · 언어라벨 12/800/+4% · 메타 13/600 #6B7A90 ── */
.pb-stream--console .pb-turn__primary { font-size: 18px; font-weight: 400; line-height: 1.55; }
.pb-stream--console .pb-turn__secondary { font-size: 17px; font-weight: 400; color: var(--ac-sub2); }
.ac-turn__label { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.turnmeta__time, .ac-item__time { font-size: 13px; font-weight: 600; color: var(--ac-meta); }

/* ── 9a-P1: primary 1개 — 전송 3상태 · 말하기 강등 ── */
.ac-send { background: var(--ac-ghost); color: var(--fg2); border: none; box-shadow: none; }
.pb-console .ac-send.ac-send--active, .ac-send.ac-send--active { background: var(--primary) !important; color: var(--gray-0) !important; } /* paybridge .pb-btn--primary 캐스케이드 대응 */
.ac-ptt--outline { background: var(--gray-0); color: var(--primary); border: 1.5px solid var(--primary); }
.ac-ptt--outline .ac-ptt__sub { color: var(--fg3); }
.ac-ptt, .ac-send { transition: background 120ms ease-out, color 120ms ease-out, border 120ms ease-out; }
/* 말하기 holding: 링 펄스 1.2s */
.ac-ptt[data-state="listening"] { animation: acRing 1.2s ease-out infinite; }
@keyframes acRing { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.45); } 100% { box-shadow: 0 0 0 14px rgba(229,72,77,0); } }

/* ── 10a-1: 호버 의무 (진입 120ms/이탈 200ms) ── */
.pb-sessionitem, .pb-chip--action, .ac-turn__listen, .agent-tgl { transition: background 200ms ease-out, border-color 200ms ease-out; cursor: pointer; }
.pb-sessionitem:hover, .ac-turn__listen:hover, .pb-composer__quick .pb-chip:hover { background: var(--bg-subtle); transition-duration: 120ms; }
.ac-ptt:hover:not([data-state="listening"]) { filter: brightness(0.92); }
.ac-send:hover { filter: brightness(0.96); }
button:hover { cursor: pointer; }

/* ── 10a-3: 툴팁 — 아이콘 단독 버튼만 · 500ms 지연 ── */
.ac-tip { position: relative; }
.ac-tip::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  background: var(--gray-900); color: var(--gray-0); font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 120ms ease-out 0ms;
}
.ac-tip:hover::after { opacity: 1; transition-delay: 500ms; }

/* ── 10a-4·㉔: 종료 = 파괴적 — 빨강 + 8px 이격 + 다이얼로그 ── */
.ac-end { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; background: var(--danger); color: var(--gray-0); border: none; padding: 0 16px; font-weight: 800; cursor: pointer; }
.ac-dialog { position: fixed; inset: 0; z-index: 100; background: rgba(11,27,51,0.5); display: grid; place-items: center; }
.ac-dialog__card { width: 380px; background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-xl); }
.ac-dialog__card b { font-size: 17px; color: var(--fg1); }
.ac-dialog__card p { font-size: 14px; color: var(--fg2); line-height: 1.6; margin: 10px 0 18px; }
.ac-dialog__row { display: flex; gap: 10px; justify-content: flex-end; }
.ac-dialog__stay { height: 44px; border-radius: 10px; padding: 0 18px; background: var(--blue-50); color: var(--blue-700); border: none; font-weight: 800; cursor: pointer; }
.ac-dialog__end { height: 44px; border-radius: 10px; padding: 0 18px; background: var(--danger); color: var(--gray-0); border: none; font-weight: 800; cursor: pointer; }

/* ── ㉒ 세션 카드 상태 ── */
.pb-sessionitem[aria-selected="true"] { border-color: var(--primary); background: var(--blue-50); }
.ac-item__badge { min-width: 20px; height: 20px; border-radius: 999px; background: var(--danger); color: var(--gray-0); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; padding: 0 6px; margin-left: 6px; }
.ac-item--flash { animation: acFlash 0.9s ease-out 1; }
@keyframes acFlash { 0% { background: var(--blue-50); } 100% { background: transparent; } }
.ac-item__tag--wait .lucide { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

/* ── ⑳ 빈 상태 카드 ── */
.ac-empty { align-self: center; text-align: center; margin: 48px auto; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ac-empty__chip { font-size: 12px; font-weight: 700; color: var(--fg3); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.ac-empty b { font-size: 17px; color: var(--fg1); }
.ac-empty p { font-size: 14px; color: var(--fg2); line-height: 1.7; margin: 0; }
.ac-empty__greet { margin-top: 8px; height: 44px; border-radius: 10px; padding: 0 16px; background: var(--blue-50); color: var(--blue-700); border: none; font-weight: 700; cursor: pointer; }

/* ── 기타: 배지 줄바꿈 방지 · 칩 헬퍼 같은 행 · 임시 버블 ── */
#agentIdChip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pb-composer__quick { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.ac-composer__quickhint { margin-left: auto; white-space: nowrap; flex: none; }
.ac-temp { opacity: 0.85; }
.ac-dots { display: inline-flex; }
.pb-composer__quick + .ac-composer__quickhint { display: none; } /* 같은 행 배치로 이동 */

/* ── P21 밀도 오버라이드 (13a — 이후 규칙이 우선) ── */
.pb-console { grid-template-columns: 280px 1fr; }        /* 320 → 280 */
.pb-console__list { width: 280px; }
.pb-sessionhead { height: var(--con-h-header); }          /* 76 → 56 */
.pb-stream--console { padding-left: 20px; padding-right: 20px; }
.pb-stream--console .pb-turn__body { max-width: 560px; padding: 10px 14px; }
.pb-stream--console .pb-turn { margin-bottom: 10px; }     /* gap 16 → 10 */
.ac-composer { padding: 12px 16px 14px !important; }
.ac-composer__row { gap: 10px; }
/* 컨트롤 L64 → h44 · radius 10 · 아이콘 18 */
.ac-composer__field .pb-composer__input { height: var(--con-h-ctrl) !important; min-height: var(--con-h-ctrl); border-radius: var(--con-r-ctrl) !important; font-size: var(--con-fs-btn); padding: 11px 14px; }
.ac-ptt { height: var(--con-h-ctrl); border-radius: var(--con-r-ctrl); padding: 0 16px; gap: 8px; }
.ac-ptt .lucide { width: var(--con-icon); height: var(--con-icon); }
.ac-ptt__label { font-size: var(--con-fs-btn); font-weight: 700; }
.ac-ptt__sub { display: none; }                           /* 13a: 힌트는 버튼에서 빼고 툴팁으로 */
.ac-send { height: var(--con-h-ctrl); border-radius: var(--con-r-ctrl); font-size: var(--con-fs-btn); font-weight: 700; padding: 0 16px; }
.ac-send .lucide { width: var(--con-icon); height: var(--con-icon); }
.ac-settings__btn, .ac-end, .pb-sessionhead .pb-iconbtn { height: 36px; border-radius: 8px; font-size: var(--con-fs-meta); }
.ac-settings__btn .lucide, .ac-end .lucide, .pb-sessionhead .pb-iconbtn .lucide { width: var(--con-icon); height: var(--con-icon); }
.pb-composer__quick .pb-chip, .ac-turn__listen { height: var(--con-h-chip); font-size: var(--con-fs-chip); }
/* 타이포 밀도 다운 */
.pb-stream--console .pb-turn__primary { font-size: var(--con-fs-body); line-height: var(--con-lh); }
.pb-stream--console .pb-turn__secondary { font-size: var(--con-fs-sub); color: var(--ac-sub2); }
.ac-turn__label { font-size: var(--con-fs-label); color: var(--ac-meta); }
.turnmeta__time, .ac-item__time, .turnmeta__who { font-size: var(--con-fs-meta); }
.sessionhead__name { font-size: var(--con-fs-title); }
.sessionhead__sub { font-size: var(--con-fs-meta); }
.pb-sessionitem { padding: 10px 12px; }                   /* 세션 카드 14/16 → 10/12 */
.ac-item__preview { font-size: var(--con-fs-meta); }
/* 14a: 그림자 제거·보더 위주 · 호버 틴트만 · 포커스 2px offset 1 · pressed 100ms */
.pb-console .pb-sessionitem, .pb-console .ac-send, .pb-console .ac-ptt, .ac-composer__field .pb-composer__input { box-shadow: none !important; }
.pb-console button:active { transform: none; filter: brightness(0.92); transition-duration: 100ms; }
.pb-console button:focus-visible, .pb-console .fld:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pb-console .pb-sessionitem:hover { background: var(--con-tint); }
/* 14a: 본문 영역 네이비 금지 — 사용자 버블도 파랑 계열(내 버블=파랑 유지, 사용자=흰 카드+보더) */
.pb-stream--console .pb-turn:not(.pb-turn--remote) .pb-turn__body { background: var(--gray-0); border: 1px solid var(--ac-border-1); }

/* ── P21 T3 (14a): 단축키 배지 · 토스트 · 색 규칙 ── */
.ac-kbd { font-size: 11px; font-weight: 700; font-family: inherit; line-height: 1; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,0.22); color: inherit; }
.ac-send .ac-kbd { background: rgba(255,255,255,0.22); }
.ac-ptt--outline .ac-kbd, .ac-send:not(.ac-send--active) .ac-kbd { background: rgba(11,27,51,0.08); color: var(--fg3); }
.ac-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 10px; }
.ac-toast { width: 280px; background: var(--gray-900); color: var(--gray-0); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-xl); animation: acToastIn 200ms ease-out; }
.ac-toast__msg { flex: 1; font-size: 13px; }
.ac-toast__undo { background: none; border: none; color: var(--blue-300, #8CB4FF); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; flex: none; }
@keyframes acToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 14a 초록 = 전달 완료·온라인 dot+12px 만 */
.ac-turn__status { color: var(--success); font-size: var(--con-fs-meta); display: inline-flex; align-items: center; gap: 6px; }
.ac-turn__status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--success); flex: none; }
.ac-profile__state { display: inline-flex; align-items: center; gap: 5px; }
.ac-profile__state::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--success); }
/* 시스템 버블 (T4) — 회색 중앙 정렬 */
.ac-sysbubble { align-self: center; margin: 10px auto; font-size: var(--con-fs-meta); color: var(--fg3); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; }
.ac-item__tag--left { color: var(--fg3); }
.ac-item__tag--left::before { content: "○ "; }

/* deploy-readiness G1: QR 정적 FAQ footer (챗바 대신 안내) */
.faq__foot--static { padding: 16px; text-align: center; }
.faq__askkiosk { font-size: 14px; color: var(--fg2); }