:root {
  --cap-size: 46px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Pretendard', system-ui, 'Segoe UI', 'Malgun Gothic', sans-serif;
}

/* ---------- 공통 패널 (랜딩 / 캡처) ---------- */
body.capture,
body.landing {
  background: #0f1220;
  color: #e8ecf5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.panel {
  width: 100%;
  max-width: 480px;
  background: #181c2e;
  border: 1px solid #2a3050;
  border-radius: 18px;
  padding: 32px;
  text-align: center;
}
.panel h1 {
  margin: 0 0 8px;
  font-size: 26px;
}
.sub {
  color: #9aa3c4;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
}
.room-line {
  color: #9aa3c4;
  margin-bottom: 18px;
}
.room-line strong {
  color: #7cc4ff;
}
.big-btn {
  font-size: 22px;
  padding: 18px 28px;
  border: 0;
  border-radius: 14px;
  background: #3a6df0;
  color: #fff;
  cursor: pointer;
  width: 100%;
  font-weight: 700;
}
.big-btn:hover {
  background: #2f5fd6;
}
.status {
  margin-top: 18px;
  font-size: 16px;
  color: #c7cde6;
  min-height: 24px;
}
.status.live {
  color: #46e08a;
  font-weight: 700;
}
.status.warn {
  color: #ffb454;
  font-weight: 700;
}
.hint {
  margin-top: 18px;
  font-size: 13px;
  color: #6f779c;
  line-height: 1.55;
}
.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.links a {
  display: block;
  padding: 16px;
  border-radius: 12px;
  background: #222843;
  color: #e8ecf5;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #2f375c;
}
.links a:hover {
  background: #2a3150;
}
.field {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.field input {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #2f375c;
  background: #0f1220;
  color: #e8ecf5;
  font-size: 15px;
}
.room-note {
  font-size: 12px;
  color: #6f779c;
  margin: 6px 0 0;
  line-height: 1.5;
}
.panel.wide {
  max-width: 720px;
}
.choose {
  color: #c7cde6;
  font-weight: 700;
  margin: 24px 0 12px;
  text-align: left;
}
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.card {
  display: block;
  text-align: left;
  background: #1c2138;
  border: 1px solid #2f375c;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: #e8ecf5;
  transition: transform 0.12s, border-color 0.12s;
  position: relative;
}
.card:hover {
  transform: translateY(-2px);
  border-color: #3a6df0;
}
.card.recommend {
  border-color: #3a6df0;
  box-shadow: inset 0 0 0 1px #3a6df0;
}
.card-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #3a6df0;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
}
.card-emoji {
  font-size: 34px;
}
.card-title {
  font-size: 18px;
  font-weight: 800;
  margin: 8px 0 6px;
}
.card-desc {
  font-size: 13.5px;
  color: #b5bcdb;
  line-height: 1.55;
}
.card-when {
  font-size: 12px;
  color: #7b84ab;
  margin-top: 10px;
}
@media (max-width: 560px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- 자막 디스플레이 ---------- */
body.display {
  background: #000;
  color: #fff;
  min-height: 100vh;
  overflow: hidden;
}
.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap; /* @AI:INTENT 좁은 화면(폰/태블릿)에서 컨트롤 가로 넘침 대신 줄바꿈. 데스크톱 wide는 한 줄 유지(변화 없음). */
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10, 12, 20, 0.7);
  font-size: 13px;
  opacity: 0.12;
  transition: opacity 0.2s;
  z-index: 10;
}
.toolbar:hover {
  opacity: 1;
}
.toolbar .spacer {
  flex: 1;
}
.toolbar button,
.toolbar label {
  color: #cfd6f0;
  background: #1a2036;
  border: 1px solid #2f375c;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.toolbar .lang-toggle.on {
  background: #3a6df0;
  color: #fff;
  border-color: #3a6df0;
}
.conn.ok {
  color: #46e08a;
}
.conn.warn {
  color: #ffb454;
}

/* lower-third 자막 띠 — 화면 하단 고정, 위쪽은 투명 그라데이션 */
.captions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 62%, rgba(0, 0, 0, 0));
}
.cap-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.22;
}
/* 언어 라벨 (국기 이모지는 Windows에서 안 떠서 텍스트 라벨 사용) */
.cap-row .flag {
  font-size: calc(var(--cap-size) * 0.4);
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.5;
  min-width: 2.4em;
  letter-spacing: 0.03em;
  opacity: 0.85;
}
.cap-row.ko .flag {
  color: #8b93b5;
}
.cap-row.en .flag {
  color: #cfe0ff;
}
.cap-row.id .flag {
  color: #ffe9a8;
}
.cap-row.zh .flag {
  color: #d8c4ff;
}
.cap-row .lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* 2줄 롤링: 이전 문장(prev, 흐림) + 현재 문장(cur, 밝음) */
.line {
  font-weight: 800;
  letter-spacing: -0.01em;
  /* 강한 검정 외곽선 → 투명 배경/밝은 슬라이드 위에서도 또렷 */
  text-shadow:
    1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.85);
  word-break: break-word;
}
.line.prev {
  opacity: 0.42;
}
.line.cur {
  opacity: 1;
}
.line:empty {
  display: none;
}
.cap-row.ko .line {
  font-size: calc(var(--cap-size) * 0.62);
  color: #aeb6d6;
  font-weight: 600;
}
.cap-row.en .line {
  font-size: var(--cap-size);
  color: #ffffff;
}
.cap-row.id .line {
  font-size: var(--cap-size);
  color: #ffe9a8;
}
.cap-row.zh .line {
  font-size: var(--cap-size);
  color: #e6dcff;
}

/* ---------- 발표 뷰 (슬라이드 캡처 + 자막 합성) ---------- */
body.present {
  background: #000;
  color: #fff;
  height: 100vh;
  overflow: hidden;
}
.screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen .stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* @AI:INTENT object-fit:contain → 캡처된 슬라이드 원본 비율 보존(절대 늘어나지 않음, 레터박스) */
.screen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.pick-hint {
  position: absolute;
  color: #9aa3c4;
  font-size: 18px;
  text-align: center;
  padding: 24px;
  line-height: 1.6;
}
.caption-band {
  flex: 0 0 auto;
  background: #0a0d18;
  padding: 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 2px solid #222a44;
}
/* 분할 모드: 자막띠가 슬라이드 아래 자리 차지 → 슬라이드 안 가림(기본값) */
/* 오버레이 모드: 슬라이드를 꽉 채우고 자막은 위에 반투명으로 */
.layout-overlay .stage {
  flex: 1 1 100%;
}
.layout-overlay .caption-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 0));
  border-top: 0;
}
/* 발표 뷰 자막은 공통 .cap-row/.lines/.line 규칙을 그대로 사용 (위 통합 정의) */
/* 우측 패널 모드: 슬라이드 왼쪽(비율 보존) + 자막 오른쪽 세로 패널 */
.screen.layout-side {
  flex-direction: row;
}
.layout-side .caption-band {
  flex: 0 0 34%;
  max-width: 34%;
  height: 100vh;
  border-top: 0;
  border-left: 2px solid #222a44;
  justify-content: flex-end; /* 자막이 아래쪽부터 차오르게 */
  overflow: hidden;
}

/* ---------- 단일 화면 발표 (float) ---------- */
body.float {
  background: #0f1220;
  color: #e8ecf5;
  min-height: 100vh;
  margin: 0;
}
body.float .toolbar {
  position: static;
  opacity: 1;
  background: #181c2e;
  border-bottom: 1px solid #2a3050;
  flex-wrap: wrap;
}
body.float .room-line {
  color: #9aa3c4;
  font-size: 13px;
}
body.float .room-line strong {
  color: #7cc4ff;
}
body.float #micBtn,
body.float #pipBtn {
  background: #3a6df0;
  color: #fff;
  border: 0;
  font-weight: 700;
}
body.float #pipBtn[disabled] {
  background: #3a3f55;
  color: #8b93b5;
  cursor: not-allowed;
}
.capstage {
  padding: 28px 32px;
  min-height: 160px;
}
.capwrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.floating-msg {
  color: #7cc4ff;
  font-size: 16px;
  padding: 16px 0;
}
body.float .hint {
  padding: 0 32px 18px;
  color: #6f779c;
  font-size: 13px;
  line-height: 1.7;
}
.float-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 24px 6px;
}
.float-header .title {
  font-size: 18px;
  font-weight: 800;
  color: #e8ecf5;
}
.byline {
  font-size: 13px;
  color: #7cc4ff;
}
.byline strong {
  color: #9ad0ff;
}
.credit {
  text-align: center;
  padding: 0 0 22px;
  color: #5b628a;
  font-size: 12px;
}
.credit strong {
  color: #7cc4ff;
}
.byline-top {
  color: #7cc4ff;
  font-size: 13px;
  margin: -6px 0 14px;
}
.byline-top strong {
  color: #9ad0ff;
}

/* ---------- 플로팅 PiP 창 (전체화면 PPT 위에 떠다님) ---------- */
html.pip-root {
  background: transparent;
}
body.pip {
  margin: 0;
  /* 배경 슬라이더(--pip-bg-alpha)로 투명도 조절. 0 = 완전 투명, 글자는 외곽선으로 또렷 */
  background: rgba(8, 10, 18, var(--pip-bg-alpha, 0.45));
  color: #fff;
  padding: 12px 18px;
  font-family: system-ui, 'Segoe UI', 'Malgun Gothic', sans-serif;
  overflow: hidden;
}
body.pip .capwrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- 업로드 발표 (deck) — 슬라이드 + 진짜 투명 자막 ---------- */
body.deck {
  margin: 0;
  background: #000;
  color: #fff;
  height: 100vh;
  overflow: hidden;
}
.deck-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#pdfCanvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.upload-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f1220;
}
.upload-card {
  text-align: center;
  max-width: 440px;
  padding: 32px;
}
.upload-card h2 {
  margin: 0 0 10px;
  font-size: 24px;
}
.upload-card p {
  color: #9aa3c4;
  line-height: 1.6;
  margin: 0 0 18px;
}
.upload-card .big-btn {
  width: auto;
  padding: 14px 28px;
}
.upload-rec {
  font-size: 12.5px !important;
  color: #9aa3c4 !important;
  line-height: 1.55;
  margin: 14px 0 0 !important;
  padding: 10px 12px;
  background: #141a2e;
  border: 1px solid #2a3050;
  border-radius: 10px;
}
.upload-rec b {
  color: #ffd98a;
}
.upload-by {
  color: #7cc4ff !important;
  margin-top: 18px !important;
}
.upload-by strong {
  color: #9ad0ff;
}
/* 투명 자막 — 슬라이드 위. --cap-bg-alpha=0 이면 완전 투명(글자만, 외곽선으로 가독) */
.deck-captions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 44px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, var(--cap-bg-alpha, 0.22)) 55%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.deck-toolbar #micBtn {
  background: #3a6df0;
  color: #fff;
  border: 0;
  font-weight: 700;
}
.page-label {
  color: #cfd6f0;
  font-size: 13px;
  min-width: 5em;
  text-align: center;
}
.glossary-status {
  color: #9ad0ff;
  font-size: 12px;
  white-space: nowrap;
}
.upload-btn {
  cursor: pointer;
}

/* ---------- 엔진 A/B 비교 (Gemini vs Soniox 좌우) ---------- */
body.ab {
  background: #0f1220;
  color: #e8ecf5;
  min-height: 100vh;
  margin: 0;
  --ab-size: 26px;
}
.ab-toolbar {
  position: static;
  opacity: 1;
  background: #181c2e;
  border-bottom: 1px solid #2a3050;
  flex-wrap: wrap;
}
.ab-toolbar #micBtn {
  background: #3a6df0;
  color: #fff;
  border: 0;
  font-weight: 700;
}
.ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
}
.ab-col {
  background: #161a2b;
  border: 1px solid #2a3050;
  border-radius: 12px;
  padding: 14px 18px;
}
.ab-col.gemini {
  border-top: 3px solid #3a6df0;
}
.ab-col.soniox {
  border-top: 3px solid #46e08a;
}
.ab-head {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
  color: #cfd6f0;
}
.ab-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #232a44;
}
.ab-row .flag {
  font-size: 13px;
  font-weight: 800;
  color: #8b93b5;
  min-width: 2.2em;
  padding-top: 4px;
}
.ab-row .flag.en {
  color: #cfe0ff;
}
.ab-row .flag.id {
  color: #ffe9a8;
}
.ab-text {
  font-size: var(--ab-size);
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
  min-height: 1.3em;
}
.ab-text.en {
  color: #ffffff;
}
.ab-text.id {
  color: #ffe9a8;
}

/* ---------- 청중 자막 QR 오버레이 ---------- */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 18, 0.93);
}
.qr-overlay[hidden] {
  display: none;
}
.qr-box {
  text-align: center;
  background: #161a2b;
  border: 1px solid #2f375c;
  border-radius: 18px;
  padding: 28px 34px;
  max-width: 92vw;
}
.qr-title {
  font-size: 22px;
  font-weight: 800;
  color: #e8ecf5;
  margin-bottom: 18px;
}
.qr-code {
  display: inline-block;
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  line-height: 0;
}
.qr-code img,
.qr-code canvas {
  display: block;
}
.qr-hint {
  font-size: 15px;
  color: #b5bcdb;
  margin: 18px 0 6px;
  line-height: 1.5;
}
.qr-hint strong {
  color: #7cc4ff;
}
.qr-url {
  font-size: 11px;
  color: #5b628a;
  margin-bottom: 18px;
  word-break: break-all;
}
.qr-box .big-btn {
  width: auto;
  padding: 12px 44px;
}

/* ---------- 대화 번역기 (talk, 모바일 우선) ---------- */
body.talk {
  margin: 0;
  background: #0b0e1a;
  color: #fff;
  height: 100vh;
  height: 100dvh; /* 모바일 주소창 높이 보정 */
  overflow: hidden; /* 고정 뷰포트 — 자막은 각 행 안에서 클립 */
  display: flex;
  flex-direction: column;
}
.talk-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.talk-langs .lang-toggle {
  background: #1a2036;
  color: #8b93b5;
  border: 1px solid #2f375c;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* @AI:INTENT 모바일 터치 타깃 — 권장 44px 보장(기존 ~24px). talk은 실제 폰 페이지. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.talk-langs .lang-toggle.on {
  background: #3a6df0;
  color: #fff;
  border-color: #3a6df0;
}
.talk-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 토글 4개여도 줄바꿈으로 안전 */
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #9aa3c4;
  border-bottom: 1px solid #1c2238;
}
.talk-top .spacer {
  flex: 1;
}
.talk-top .talk-room strong {
  color: #7cc4ff;
}
.talk-top select {
  background: #1a2036;
  color: #cfd6f0;
  border: 1px solid #2f375c;
  border-radius: 8px;
  padding: 4px 8px;
}
.talk-caps {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
}
/* 각 언어 행이 화면을 균등 분할 — 켠 언어는 항상 보이고, 긴 문장은 행 안에서 최신만(아래) 클립 */
.talk-caps .cap-row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
  overflow: hidden;
}
.talk-caps .cap-row .flag {
  font-size: 13px;
  min-width: 2em;
  line-height: 1.4;
  opacity: 0.7;
  flex-shrink: 0;
  padding-top: 2px;
}
.talk-caps .cap-row .lines {
  flex: 1;
  min-width: 0;
  min-height: 0;
  justify-content: flex-end; /* 최신 텍스트가 아래 — 넘치면 위가 잘림 */
  overflow: hidden;
}
/* 폰 가로폭에 맞춰 자동 스케일 */
.talk-caps .cap-row.en .line,
.talk-caps .cap-row.id .line,
.talk-caps .cap-row.zh .line {
  font-size: clamp(16px, 5.6vw, 32px);
}
.talk-caps .cap-row.ko .line {
  font-size: clamp(14px, 4.6vw, 27px);
}
.talk-bar {
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #1c2238;
  background: #0f1322;
}
.talk-mic {
  width: 100%;
  font-size: 20px;
  font-weight: 800;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: #3a6df0;
  color: #fff;
  cursor: pointer;
}
.talk-mic.on {
  background: #e0464f;
}
.talk-pip {
  width: 100%;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 11px;
  border: 1px solid #2f375c;
  border-radius: 12px;
  background: #1a2036;
  color: #b9c4e6;
  cursor: pointer;
}
.talk-pip.on {
  background: #1d2942;
  border-color: #3a6df0;
  color: #cfe0ff;
}
.talk-status {
  text-align: center;
  color: #9aa3c4;
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
}
.talk-status.live {
  color: #46e08a;
  font-weight: 700;
}
.talk-status.warn {
  color: #ffb454;
  font-weight: 700;
}
.talk-credit {
  text-align: center;
  color: #5b628a;
  font-size: 11px;
  margin: 8px 0 0;
}
.talk-credit strong {
  color: #7cc4ff;
}
/* 랜딩의 대화 번역기 보조 진입 링크 */
.talk-entry {
  display: block;
  margin-top: 14px;
  padding: 14px;
  text-align: center;
  border-radius: 12px;
  background: #182338;
  border: 1px dashed #34406a;
  color: #b9c4e6;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.talk-entry:hover {
  background: #1d2942;
  border-color: #3a6df0;
}

/* ---------- 모바일 자막 최적화 (display) ---------- */
/* 폰에서 글자가 뷰포트를 넘지 않게 캡 + 패딩/플래그 축소 → 3개 언어가 다 보이고 여백 정상 */
@media (max-width: 640px) {
  body.display .toolbar {
    opacity: 0.92; /* 폰은 hover가 없어 항상 보이게 */
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
  }
  body.display .toolbar button,
  body.display .toolbar label {
    padding: 5px 8px;
    font-size: 12px;
  }
  .captions {
    padding: 10px 12px 16px;
    gap: 6px;
  }
  .captions .cap-row {
    gap: 8px;
  }
  .captions .cap-row .flag {
    font-size: 12px;
    min-width: 1.9em;
    line-height: 1.5;
    padding-top: 2px;
  }
  .captions .cap-row.en .line,
  .captions .cap-row.id .line,
  .captions .cap-row.zh .line {
    font-size: min(var(--cap-size), 7.2vw); /* 슬라이더 값과 뷰포트 중 작은 값 */
  }
  .captions .cap-row.ko .line {
    font-size: min(calc(var(--cap-size) * 0.62), 5vw);
  }
}