:root{
  --bg:#0d1117;
  --panel:#141b22;
  --panel-2:#1a232c;
  --line:#222d38;
  --text:#e6edf3;
  --muted:#8b98a5;
  --accent:#2dd4bf;          /* recording / active */
  --danger:#f87171;
  --ko:#f0b866;              /* 한국어 hairline */
  --en:#6ea8fe;              /* English hairline */
  --ja:#f48fb1;              /* 日本語 hairline */
  /* 발화자(패널 모드) 팔레트 — 다크 배경에서 서로 구분되는 6색 */
  --spk-1:#2dd4bf; --spk-2:#f0b866; --spk-3:#6ea8fe;
  --spk-4:#f48fb1; --spk-5:#a78bfa; --spk-6:#86efac;
  --mark:#17b8a6;            /* 로고 마크(사람 기둥/머리) */
  --pill:#e7edf1;            /* 로고 마크(좌우 회색 알약) */
  --radius:10px;
  font-synthesis-weight:none;
}

*{box-sizing:border-box;}
/* hidden 속성이 항상 우선하도록 (display:flex 등으로 덮이는 것 방지) */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
    "Noto Sans KR","Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;row-gap:10px;
  padding:14px 22px;
  /* iOS 앱(viewport-fit=cover): 노치·다이내믹 아일랜드·가로 모드 측면을 피한다.
     웹 브라우저에선 env() 가 0 이라 기존 여백 그대로. */
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-left:calc(22px + env(safe-area-inset-left, 0px));
  padding-right:calc(22px + env(safe-area-inset-right, 0px));
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#10171e,#0d1117);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand-mark-svg{flex:0 0 auto;display:block;}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-weight:800;letter-spacing:.2px;font-size:19px;}
.brand-sub{color:var(--muted);font-size:11px;letter-spacing:.9px;text-transform:uppercase;margin-top:2px;}

.status{display:flex;align-items:center;gap:9px;margin-left:auto;}
.status-text{color:var(--muted);font-size:13px;min-width:64px;}
.dot{width:10px;height:10px;border-radius:50%;background:#3a4754;flex:0 0 auto;}
.dot.listening{background:var(--accent);box-shadow:0 0 0 0 rgba(45,212,191,.5);animation:pulse 2s infinite;}
.dot.speaking{background:var(--accent);box-shadow:0 0 10px 1px rgba(45,212,191,.7);}
.dot.processing{background:#e3b341;animation:pulse 1.2s infinite;}
.dot.error{background:var(--danger);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.45);}70%{box-shadow:0 0 0 8px rgba(45,212,191,0);}100%{box-shadow:0 0 0 0 rgba(45,212,191,0);}}
@media (prefers-reduced-motion:reduce){.dot{animation:none!important;}}

/* 컨트롤 줄: 폭이 모자라면 어떤 화면에서든 다음 줄로 접힌다.
   (예전엔 flex:0 0 auto 라 줄어들지 못해 내부 wrap 이 동작하지 않았고, iPhone·iPad 세로에서
    '강의 시작' 버튼이 화면 밖으로 밀려났다. 820px 미만에만 적용하면 iPad Pro 세로(834·1032px)를 놓친다.) */
.controls{flex:0 1 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0;}
.lang-select{
  font:inherit;font-size:13px;color:var(--text);background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;cursor:pointer;
}
.lang-select:disabled{opacity:.5;cursor:not-allowed;}
/* 패널 디스커션 토글 */
.toggle{
  display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 11px;cursor:pointer;user-select:none;white-space:nowrap;
}
.toggle input{accent-color:var(--accent);width:14px;height:14px;margin:0;cursor:pointer;}
.toggle:has(input:checked){color:var(--text);border-color:var(--accent);}
.toggle:has(input:disabled){opacity:.5;cursor:not-allowed;}
.toggle:has(input:disabled) input{cursor:not-allowed;}
.toggle:focus-within{outline:2px solid var(--accent);outline-offset:2px;}
.lang-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn{
  font:inherit;font-size:14px;font-weight:600;
  padding:9px 18px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .05s;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-start{background:var(--accent);color:#04201c;}
.btn-start:hover{background:#41e3d0;}
.btn-end{background:transparent;color:var(--danger);border-color:var(--danger);}
.btn-end:hover{background:rgba(248,113,113,.12);}
.btn-summary{background:var(--panel-2);color:var(--text);border-color:var(--accent);}
.btn-summary:hover{background:rgba(45,212,191,.12);}
.btn-summary:disabled{opacity:.55;cursor:not-allowed;}
.btn-ghost{background:var(--panel-2);color:var(--text);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent);}

/* ---------- Live strip ---------- */
.live-strip{
  display:flex;align-items:center;gap:12px;
  padding:9px 22px;background:var(--panel-2);border-bottom:1px solid var(--line);
  min-height:42px;
}
.live-label{
  font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--accent);
  border:1px solid rgba(45,212,191,.4);border-radius:20px;padding:2px 10px;flex:0 0 auto;
}
.live-text{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Board (3 columns) ---------- */
.board{
  flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);min-height:0;
}
.col{display:flex;flex-direction:column;background:var(--bg);min-height:0;position:relative;}
.col[hidden]{display:none;}   /* 표시 옵션에서 제외된 열 숨김 */
.col-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel);
}
.col-head h2{margin:0;font-size:15px;font-weight:650;letter-spacing:.3px;}
.col-rule{width:3px;height:18px;border-radius:2px;flex:0 0 auto;}
.col-ko .col-rule{background:var(--ko);}
.col-en .col-rule{background:var(--en);}
.col-ja .col-rule{background:var(--ja);}
.src-tag{
  margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--muted);
  opacity:0;transition:opacity .2s;
}
.src-tag.active{opacity:1;color:var(--accent);}

.panel{
  flex:1 1 auto;overflow-y:auto;padding:16px 18px;min-height:0;
  display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
}
.line{
  font-size:var(--cap-size,18px);line-height:1.5;color:var(--text);
  padding:9px 12px;border-radius:8px;background:var(--panel);
  border-left:2px solid transparent;animation:rise .2s ease;
}
.line.source{border-left-color:var(--accent);background:var(--panel-2);}
.line-text{display:inline;}

/* ---- 발화자 칩 (패널 모드) ---- */
.line.has-spk{display:flex;align-items:baseline;gap:9px;}
.spk{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.3px;line-height:1.6;
  padding:1px 9px;border-radius:20px;cursor:pointer;white-space:nowrap;
  border:1px solid currentColor;background:rgba(255,255,255,.04);
  transition:background .15s;
}
.spk:hover{background:rgba(255,255,255,.11);}
.spk-input{
  font:inherit;font-size:11px;font-weight:700;color:var(--text);background:transparent;
  border:none;outline:none;width:8.5em;padding:0;
}
.spk-1{color:var(--spk-1);} .spk-2{color:var(--spk-2);} .spk-3{color:var(--spk-3);}
.spk-4{color:var(--spk-4);} .spk-5{color:var(--spk-5);} .spk-6{color:var(--spk-6);}
/* .line.source 와 같은 명시도로 두고 뒤에 와서 이기게 한다(패널 모드에서는 화자색 우선) */
.line.spk-line-1{border-left-color:var(--spk-1);} .line.spk-line-2{border-left-color:var(--spk-2);}
.line.spk-line-3{border-left-color:var(--spk-3);} .line.spk-line-4{border-left-color:var(--spk-4);}
.line.spk-line-5{border-left-color:var(--spk-5);} .line.spk-line-6{border-left-color:var(--spk-6);}
@keyframes rise{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.line{animation:none;}}

.panel::-webkit-scrollbar{width:8px;}
.panel::-webkit-scrollbar-thumb{background:#2a3744;border-radius:4px;}

/* ---------- Summary overlay ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(5,9,13,.72);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;
  backdrop-filter:blur(3px);
}
.sheet{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.sheet-close{
  position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);
  font-size:18px;cursor:pointer;line-height:1;
}
.sheet-close:hover{color:var(--text);}
.sheet-body{overflow-y:auto;padding:30px 32px 8px;}
.sheet-body h2{margin:0 0 18px;font-size:21px;}
.sheet-body h3{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin:24px 0 10px;}
.sheet-body p{line-height:1.7;color:#d4dde6;margin:0;font-size:15px;}
.terms{margin:0;padding-left:18px;line-height:1.8;color:#d4dde6;font-size:14.5px;}
.terms b{color:var(--text);}
.questions{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:14px;}
.questions li{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.q-ko{font-size:15.5px;line-height:1.55;color:var(--text);}
.q-num{display:inline-block;color:var(--accent);font-weight:700;margin-right:8px;}
.q-en{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.5;}
.loading,.err{padding:40px 10px;text-align:center;color:var(--muted);}
.err{color:var(--danger);}
.sheet-foot{padding:16px 32px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}

/* ---- 제3자 AI 데이터 전송 동의 ---- */
.consent-sheet{width:min(560px,100%);}
.consent-lead{margin-bottom:14px !important;}
.consent-list{margin:0 0 16px;padding-left:20px;line-height:1.85;color:#d4dde6;font-size:14.5px;}
.consent-list b{color:var(--text);}
.consent-note{font-size:13.5px !important;color:var(--muted) !important;}
.consent-note b{color:#e3b341;}
.consent-note a{color:var(--accent);margin-left:4px;}

/* 아이콘 버튼(ⓘ 데이터 사용 안내) */
.btn-icon{
  font:inherit;font-size:16px;line-height:1;width:34px;height:34px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--panel-2);border:1px solid var(--line);
  border-radius:50%;cursor:pointer;
}
.btn-icon:hover{color:var(--text);border-color:var(--accent);}
.btn-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 하단 홈 인디케이터 영역 (iOS 앱). .board 에 주면 격자 배경색이 띠로 드러나므로
   스크롤 영역인 .panel 에 준다. */
.panel{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));}
.sheet-foot{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  /* 좁은 화면: JS 인라인 grid 설정을 이기고(!important) 세로 스택으로 */
  .board{grid-template-columns:1fr !important;grid-auto-rows:minmax(160px,1fr);}
  .brand-sub{display:none;}
  .line{font-size:var(--cap-size,16px);}
  .topbar{flex-wrap:wrap;gap:12px;}
  /* 폰: 컨트롤이 한 줄 전체를 쓰고, 선택 상자는 남는 폭을 나눠 가진다 */
  .controls{flex:1 1 100%;justify-content:flex-start;gap:8px;}
  .controls .lang-select{flex:1 1 150px;min-width:0;}
}

/* ---- 접근 키 게이트 ---- */
.auth-gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.auth-gate[hidden]{display:none!important;}
.auth-card{
  width:min(360px,86vw); display:flex; flex-direction:column; gap:14px;
  padding:28px 26px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.auth-brand{display:flex;align-items:center;gap:10px;color:var(--text);}
.auth-brand .brand-name{font-weight:800;font-size:20px;}
.auth-desc{margin:0;color:var(--text-dim);font-size:14px;}
.auth-input{
  font:inherit;font-size:15px;color:var(--text);background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;
}
.auth-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.auth-btn{width:100%;justify-content:center;}
.auth-err{color:#ff6b6b;font-size:13px;}
.auth-err[hidden]{display:none;}

/* ---- 활성(현재 발화) 행 — 확정 전 임시 표시 ---- */
/* 제자리에서 갱신되므로 진입 애니메이션은 끄고 opacity만 부드럽게 전환해 흔들림↓ */
.line.active{
  opacity:.6; font-style:italic; border-left-color:var(--text-dim);
  background:transparent; animation:none; transition:opacity .15s ease;
}
.line.active.source{ opacity:.75; }        /* 원문(인식)은 조금 더 또렷하게 */
.line.active::after{ content:" ⋯"; opacity:.6; }
.line.active.empty{ display:none; }         /* 비었을 때 공간 접힘 */

/* ---- 최신 자막으로 돌아가기 (사용자가 위로 스크롤해 따라가기가 멈춘 칸) ---- */
.jump-latest{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:5;
  font:inherit;font-size:13px;font-weight:700;color:#04201c;background:var(--accent);
  border:none;border-radius:20px;padding:7px 14px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.jump-latest:hover{background:#41e3d0;}
.jump-latest:focus-visible{outline:2px solid var(--text);outline-offset:2px;}

/* ---- 발화자 메뉴 (이름 바꾸기 / 합치기) ---- */
.spk-menu{
  position:fixed;z-index:60;min-width:200px;max-width:min(300px,calc(100vw - 16px));
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 14px 36px rgba(0,0,0,.5);display:flex;flex-direction:column;
}
.spk-menu-head{font-size:11px;color:var(--muted);padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:4px;line-height:1.4;}
.spk-menu-item{
  font:inherit;font-size:13.5px;color:var(--text);background:none;border:none;text-align:left;
  padding:8px 10px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:8px;
}
.spk-menu-item:hover,.spk-menu-item:focus-visible{background:rgba(255,255,255,.07);outline:none;}
.spk-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto;}

/* ---- 마이크 입력 레벨 / 경고 ---- */
.mic-meter{
  width:44px;height:6px;border-radius:3px;background:#26313c;overflow:hidden;flex:0 0 auto;
}
.mic-meter > span{
  display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left center;transform:scaleX(var(--lv,0));transition:transform .08s linear;
}
.mic-warn{
  padding:8px 22px;font-size:13.5px;font-weight:600;color:#1f1500;background:#e3b341;
  padding-left:calc(22px + env(safe-area-inset-left, 0px));
}

/* ---- 이전 기록 복원 막대 ---- */
.restore-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 22px;background:var(--panel-2);border-bottom:1px solid var(--line);
  padding-left:calc(22px + env(safe-area-inset-left, 0px));
}
.restore-text{font-size:13.5px;color:var(--text);flex:1 1 220px;}
.restore-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn-sm{font-size:13px;padding:6px 12px;}

/* ---- 글자 크기 / 발표 모드 ---- */
.icon-group{display:inline-flex;gap:4px;}
.btn-txt{font-size:12.5px;font-weight:700;width:auto;min-width:34px;padding:0 8px;border-radius:17px;}
#presentBtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);}
.present-bar{display:none;}
body.present .topbar,
body.present .live-strip,
body.present .restore-bar{display:none !important;}
body.present .col-head{padding:6px 18px;}
body.present .src-tag{display:none;}   /* 오른쪽 위 조작 막대와 겹치지 않게 */
body.present .present-bar{
  display:flex;align-items:center;gap:6px;position:fixed;z-index:40;
  top:calc(8px + env(safe-area-inset-top, 0px));right:calc(10px + env(safe-area-inset-right, 0px));
  background:rgba(20,27,34,.85);border:1px solid var(--line);border-radius:22px;padding:4px 4px 4px 12px;
  opacity:.45;transition:opacity .2s;
}
body.present .present-bar:hover,body.present .present-bar:focus-within{opacity:1;}
.present-status{font-size:12px;color:var(--muted);white-space:nowrap;}
.present-status[data-state="listening"],.present-status[data-state="speaking"]{color:var(--accent);}
.present-status[data-state="processing"]{color:#e3b341;}
.present-status[data-state="error"]{color:var(--danger);}

/* ---- 참석자 공유 (발표자) ---- */
.btn-share{font-size:13px;padding:8px 13px;white-space:nowrap;}
.btn-share.on{border-color:var(--accent);color:var(--accent);}
.share-sheet{width:min(820px,100%);}
.share-lead{margin-bottom:18px !important;}
.share-lead b{color:var(--text);}
.share-main{display:flex;gap:28px;align-items:center;flex-wrap:wrap;}
.share-qr{
  width:min(300px,70vw);aspect-ratio:1;background:#fff;border-radius:12px;padding:10px;flex:0 0 auto;
}
.share-info{flex:1 1 240px;min-width:0;}
.share-pin-label{font-size:12px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;}
.share-pin{
  font-size:clamp(40px,8vw,64px);font-weight:800;letter-spacing:4px;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:4px 0 12px;
}
.share-url{font-size:12.5px;color:var(--muted);word-break:break-all;line-height:1.5;}
.share-viewers{margin-top:10px;font-size:14px;color:var(--text);}
.share-bar-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.share-hint{margin-top:12px !important;font-size:13px !important;color:var(--muted) !important;line-height:1.65 !important;}
.share-hint b{color:var(--text);}

/* ---- 참석자 화면: 조작 기능 잠금(보기 전용) ---- */
body.viewer #langSelect,
body.viewer #panelModeLabel,
body.viewer #startBtn,
body.viewer #endBtn,
body.viewer #downloadBtn,
body.viewer #infoBtn,
body.viewer #shareBtn,
body.viewer #micMeter,
body.viewer .live-strip,
body.viewer .restore-bar,
body.viewer .mic-warn,
body.viewer #summaryOverlay .sheet-foot{display:none !important;}
body.viewer .spk{cursor:default;}
body.viewer .spk:hover{background:rgba(255,255,255,.04);}
.auth-gate.ended .auth-input,
.auth-gate.ended .auth-btn,
.auth-gate.ended .auth-err{display:none !important;}

/* ---- 자막 바 (?view=…&bar=1) — 강의자료와 함께 띄우는 자막 전용 화면 ----
   강의자료를 덜 가리도록 설계:
   · 언어마다 '두 줄 높이'의 롤링 자막 — 앞 문장과 지금 말하는 문장을 이어 쓰고, 오래된 글은
     위로 밀려 사라진다. 문장마다 상자를 쌓지 않으므로 창 높이를 최소로 둘 수 있다.
   · 글자 크기는 창 높이 ÷ (언어 수 × 2줄) 로 자동 — 창을 얇게 줄이면 글자도 맞춰 줄어든다.
   · 언어가 둘 이상일 때만 작은 KO/EN/JA 표시, 화자 칩 대신 작은 색 점. 배경은 검정(프로젝터에서
     빛을 가장 덜 냄). */
body.bar{
  background:#000;overflow:hidden;
  --bar-lines:2;
  --bar-lh:1.28;
  --bar-fs:clamp(13px, calc((100vh - 8px) / (var(--rows, 1) * (var(--bar-lines) * var(--bar-lh) + .3))), 64px);
}
body.bar .topbar,
body.bar .live-strip,
body.bar .restore-bar,
body.bar .mic-warn,
body.bar .present-bar,
body.bar .col-head,
body.bar .jump-latest,
body.bar .spk,
body.bar #summaryOverlay{display:none !important;}
body.bar .board{
  display:flex !important;flex-direction:column;justify-content:flex-end;gap:calc(var(--bar-fs) * .3);
  height:100vh;background:transparent;padding:4px .9em;
}
body.bar .col{flex:0 0 auto;display:flex;flex-direction:row;align-items:flex-end;gap:.7em;min-height:0;background:transparent;}
body.bar .panel{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;padding:0;gap:0;scroll-behavior:auto;
  height:calc(var(--bar-fs) * var(--bar-lh) * var(--bar-lines));
}
/* 확정 문장 + 라이브 문장을 이어 쓰는 글 상자(오래된 줄은 위로 밀려 잘림) */
body.bar .bar-flow{font-size:var(--bar-fs);line-height:var(--bar-lh);text-align:left;color:#fff;}
body.bar .bar-flow .line{
  display:inline;font-size:inherit !important;line-height:inherit;font-style:normal;font-weight:600;
  margin:0 .12em 0 0;padding:.02em .22em;border:none;border-radius:.15em;animation:none;opacity:1;
  color:rgba(255,255,255,.58);background:rgba(0,0,0,var(--bga,1)) !important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  /* 8방향 외곽선(글자 크기에 비례) + 그림자: 배경을 0% 로 내려도 밝은 슬라이드 위에서 또렷 */
  --o:max(1.5px,.045em);
  text-shadow:
    var(--o) 0 0 #000, calc(var(--o) * -1) 0 0 #000, 0 var(--o) 0 #000, 0 calc(var(--o) * -1) 0 #000,
    var(--o) var(--o) 0 #000, calc(var(--o) * -1) var(--o) 0 #000,
    var(--o) calc(var(--o) * -1) 0 #000, calc(var(--o) * -1) calc(var(--o) * -1) 0 #000,
    0 .06em .25em rgba(0,0,0,.85);
}
body.bar .bar-flow .line:nth-last-child(-n+2),
body.bar .bar-flow .line.active{color:#fff;}   /* 직전 문장·지금 문장은 또렷, 그 전은 글자만 흐리게(배경 상자는 그대로) */
body.bar .bar-flow .line.active.empty{display:none;}
body.bar .bar-flow .line.active::after{content:none;}
body.bar .bar-flow .line-text{display:inline;}
/* 화자: 이름 칩 대신 문장 앞 작은 색 점 */
body.bar .bar-flow .line.has-spk::before{
  content:"●";font-size:.5em;vertical-align:.28em;margin-right:.4em;color:var(--dot, #8b98a5);text-shadow:none;
}
body.bar .line.spk-line-1{--dot:var(--spk-1);} body.bar .line.spk-line-2{--dot:var(--spk-2);}
body.bar .line.spk-line-3{--dot:var(--spk-3);} body.bar .line.spk-line-4{--dot:var(--spk-4);}
body.bar .line.spk-line-5{--dot:var(--spk-5);} body.bar .line.spk-line-6{--dot:var(--spk-6);}
/* 언어가 둘 이상일 때만 줄 앞에 작은 언어 표시 */
body.bar .col::before{
  display:none;flex:0 0 2.1em;font-size:calc(var(--bar-fs) * .4);font-weight:800;letter-spacing:.08em;
  color:#7d8b99;padding-bottom:calc(var(--bar-fs) * .42);
}
body.bar.bar-multi .col::before{display:block;}
body.bar #sec-ko::before{content:"KO";}
body.bar #sec-en::before{content:"EN";}
body.bar #sec-ja::before{content:"JA";}
html.bar-clear,
html.bar-clear body{background:transparent !important;}

/* ---- 슬라이드 + 자막 합성 화면 (…&bar=1&compose=1) ---- */
body.compose{background:#000;overflow:hidden;--bar-fs:var(--fs,4.5vh);}
#slideVideo{position:fixed;inset:0;width:100vw;height:100vh;object-fit:contain;background:#000;z-index:0;}
body.compose .board{
  position:fixed;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  height:auto;padding:0 3vw 1vh;
}
body.compose.cap-top .board{top:0;bottom:auto;padding:1vh 3vw 0;}
/* 분리 배치: 자막 띠 높이 = 언어 수 × 줄 수 × 줄 높이(+여백). 슬라이드는 남은 높이에 비율을 지켜 맞춘다
   → 자막이 슬라이드를 전혀 가리지 않는다(좌우에 생기는 검은 여백은 정상). */
body.compose.split{
  --band-h:calc(var(--rows, 1) * var(--bar-lines) * var(--bar-lh) * var(--bar-fs)
    + (var(--rows, 1) - 1) * .3 * var(--bar-fs) + 2.4vh);
}
body.compose.split #slideVideo{top:0;height:calc(100vh - var(--band-h));}
body.compose.split.cap-top #slideVideo{top:var(--band-h);}
body.compose.split .board{
  height:var(--band-h);padding:1.2vh 3vw;background:#000;justify-content:center;
}
body.compose.split .bar-flow .line{background:transparent !important;}   /* 띠가 이미 검정 */
body.compose.split .c-bga-wrap{display:none;}                          /* 분리 모드엔 배경 조절 불필요 */
.compose-start{
  position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:24px;background:var(--bg);color:var(--text);
}
.compose-start[hidden]{display:none;}
.compose-start h2{margin:0;font-size:24px;}
.compose-start p{margin:0;color:var(--muted);line-height:1.7;}
.compose-start b{color:var(--text);}
.compose-note{color:#e3b341 !important;min-height:1.4em;}
.compose-ctl{
  position:fixed;top:12px;right:12px;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:rgba(20,27,34,.92);border:1px solid var(--line);border-radius:12px;padding:8px 12px;
  font-size:13px;color:var(--text);transition:opacity .3s;max-width:calc(100vw - 24px);
}
.compose-ctl label{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.compose-ctl input[type=range]{width:110px;accent-color:var(--accent);}
.c-bga-v{min-width:3em;color:var(--muted);}
body.compose.idle{cursor:none;}
body.compose.idle .compose-ctl{opacity:0;pointer-events:none;}
body.compose:not(.captured) .board{display:none;}

/* 공유 창: 배경 진하기 슬라이더 */
.share-range{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--text);}
.share-range input{width:180px;accent-color:var(--accent);}
#barBgaVal{min-width:3em;color:var(--accent);font-weight:700;}
.share-range-note{flex-basis:100%;font-size:12px;color:var(--muted);}

/* 공유 창: QR 저장 · 고정 안내 */
.share-save{display:inline-block;margin-top:12px;font-size:13px;color:var(--accent);}
.share-fixed{margin:10px 0 0 !important;font-size:12.5px !important;color:var(--muted) !important;line-height:1.6 !important;}
.share-fixed b{color:var(--text);}
.share-fixed code{font-size:12px;color:var(--text);background:var(--panel-2);padding:1px 5px;border-radius:4px;}

/* ---- 참석자: 자막 언어 선택 칩(여러 개 선택) ---- */
.lang-chips{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;}
.lang-chips[hidden]{display:none;}
.lang-chips .chip{
  font:inherit;font-size:13px;padding:7px 13px;border-radius:18px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
}
.lang-chips .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#04201c;font-weight:700;}
.lang-chips .chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.lang-chips-label{flex-basis:100%;font-size:12px;color:var(--muted);}
.gate-langs{justify-content:center;}
.gate-langs .chip{font-size:14px;padding:9px 16px;}
.auth-desc{white-space:pre-line;}
body.viewer #viewSelect{display:none !important;}
@media (max-width:820px){
  /* 참석자 상단: 언어 칩 + 글자 크기 + 발표 모드가 휴대폰 한 줄에 들어가게 */
  #viewLangs .chip{padding:6px 10px;font-size:12.5px;}
  body.viewer .controls{gap:6px;}
  body.viewer .controls .btn-icon{width:32px;height:32px;}
  body.viewer .controls .btn-txt{min-width:32px;padding:0 6px;}
}