/* ============================================================
   vc-refresh.css  -  수업 중(in-call) 화면 비주얼 리프레시
   - body.vc-in-call 에만 적용 = 로비/홈 화면에는 영향 없음
   - 색/모양 + 데스크톱 플로팅 독 + 휴대폰 세로/가로 새 톤 (추가형, 되돌리기 쉬움)
   - 문제 시 index.html 에서 이 <link> 한 줄만 빼면 즉시 원복
   ============================================================ */

/* ---------- 상단 툴바: 글래스 ---------- */
body.vc-in-call .toolbar{
  background:linear-gradient(180deg,rgba(20,28,44,.92),rgba(16,22,36,.9)) !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  box-shadow:0 2px 18px rgba(0,0,0,.30);
}
body.vc-in-call .toolbar .room-info{font-weight:600;letter-spacing:-.1px}

/* ---------- 컨트롤 버튼: 크고 둥글게 ---------- */
body.vc-in-call .toolbar-center{gap:10px !important}
body.vc-in-call .toolbar-center .ctrl-btn{
  width:46px !important;height:46px !important;border-radius:14px !important;
  font-size:20px !important;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
body.vc-in-call .toolbar-center .ctrl-btn:hover{transform:translateY(-2px)}
body.vc-in-call .ctrl-btn.on{
  background:rgba(59,130,246,.95) !important;color:#fff !important;border:none !important;
  box-shadow:0 6px 16px rgba(59,130,246,.38);
}
body.vc-in-call .ctrl-btn.danger,
body.vc-in-call #vc-exit-btn-v34{
  background:rgba(239,68,68,.96) !important;color:#fff !important;border:none !important;
  border-radius:14px !important;box-shadow:0 6px 16px rgba(239,68,68,.38);
}
body.vc-in-call .ctrl-select{
  border-radius:14px !important;background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;color:#e8edf5 !important;padding:0 12px !important;height:40px !important;
}

/* ---------- 데스크톱: 컨트롤을 하단 가운데 플로팅 독으로 ---------- */
@media (min-width:1024px){
  body.vc-in-call .toolbar-center{
    position:fixed !important;left:50% !important;bottom:20px !important;top:auto !important;
    transform:translateX(-50%) !important;
    background:linear-gradient(180deg,rgba(20,28,44,.92),rgba(12,18,30,.92)) !important;
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.1) !important;border-radius:20px !important;
    padding:9px 14px !important;gap:10px !important;z-index:300 !important;
    box-shadow:0 18px 48px rgba(0,0,0,.45) !important;
  }
  body.vc-in-call .toolbar-center .ctrl-btn:hover{transform:translateY(-3px)}
}

/* ---------- 데스크톱 1:1(나+선생님): 선생님 메인 + 내 화면 작은 PIP ---------- */
@media (min-width:1024px){
  body.vc-in-call #vc-video-grid[data-count="2"]{
    position:relative !important;display:block !important;grid-template-columns:none !important;
  }
  body.vc-in-call #vc-video-grid[data-count="2"] .video-box{
    position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
    max-width:none !important;border-radius:0 !important;box-shadow:none !important;
  }
  body.vc-in-call #vc-video-grid[data-count="2"] #vc-local-box{
    inset:auto 14px 14px auto !important;width:24% !important;max-width:210px !important;
    height:auto !important;aspect-ratio:4/3 !important;border-radius:14px !important;overflow:hidden;z-index:40 !important;
    box-shadow:0 0 0 2px rgba(251,191,36,.6),0 10px 26px rgba(0,0,0,.5) !important;
  }
}

/* ---------- 탭바: pill + 활성 앰버 ---------- */
body.vc-in-call .tab-bar .tab-btn{
  border-radius:11px !important;padding:7px 13px !important;font-weight:600 !important;
  transition:background .12s ease, color .12s ease;
}
body.vc-in-call .tab-bar .tab-btn:hover{background:rgba(255,255,255,.06)}
/* 🎨 (2026-08-21 사장님 「이것만 주변과 안 어울린다」) 활성 탭 알약 다듬기.
   [무엇이 보였나] 「📖 교재」 하나만 «앰버 상자 + 파란 밑줄» 로 튀었다.
   [원인] 스타일이 두 세대 겹쳐 있었다 —
     ① 옛 세대: .tab-btn.active { color:#38bdf8; border-bottom-color:#38bdf8 }  ← 파란 «밑줄» 탭
     ② 이 파일: 앰버 «알약» 으로 다시 디자인했는데, ①의 파란 밑줄을 끄지 않았다.
     → 앰버 알약 아래에 파란 줄이 남아 두 색이 싸웠다. 라이트 테마는 더 심해서
       글자까지 파랑으로 덮여(«앰버 배경 + 파란 글자») 완전히 따로 놀았다.
   [왜 이제야 보였나] 교재 탭에는 버튼이 없어서(2026-06-27 제거) 첫 화면에 활성 탭이
     하나도 없었다. 2026-08-20 에 「📖 교재」 버튼을 되살리자 수업 내내 화면에 남게 됐다.
   [고침] 알약 하나만 남긴다 — 밑줄은 끄고, 테두리는 각 테마의 «자기 강조색» 으로.
   ⚠️ 링을 box-shadow 로 그리면 안 된다 — 저사양 모드(html.lite-mode)가
      `box-shadow:none !important` 로 전부 지워서 테두리가 사라진다(실측).
      outline + outline-offset:-1px 은 레이아웃도 안 밀고 lite-mode 에서도 살아남는다. */
body.vc-in-call .tab-bar .tab-btn.active{
  background:rgba(251,191,36,.16) !important;color:#fcd34d !important;
  border-bottom-color:transparent !important;   /* ① 옛 파란 밑줄 끄기 */
  outline:1px solid rgba(251,191,36,.45); outline-offset:-1px;
}
/* 라이트 테마는 탭 강조색이 하늘색(--mlt-sky-deep)이다. 그 테마의 뜻을 존중해
   «앰버 배경 + 파란 글자» 대신 하늘색 알약으로 맞춘다.
   ⚠️ 선택자를 mango-theme-light.css 와 «같은 무게» 로 맞춰야 한다 —
      그 파일의 body.vc-theme-light.vc-in-call … 규칙도 !important 라, 가벼우면 진다.
      이 파일이 문서상 뒤에 오므로 같은 무게면 이쪽이 이긴다. */
body.vc-theme-light.vc-in-call .tab-bar .tab-btn.active{
  background:rgba(14,165,233,.10) !important;color:var(--mlt-sky-deep) !important;
  border-bottom-color:transparent !important;
  outline:1px solid rgba(14,165,233,.35); outline-offset:-1px;
}

/* ---------- 영상/콘텐츠: 라운드 카드 + 그림자 ---------- */
body.vc-in-call .video-box{
  border-radius:16px !important;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
}
body.vc-in-call #vc-local-box{ box-shadow:0 0 0 2px rgba(251,191,36,.55), 0 8px 26px rgba(0,0,0,.34) !important; }
body.vc-in-call .video-label{
  background:rgba(10,14,22,.62) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:9px !important;font-weight:600;padding:3px 9px !important;
}
body.vc-in-call .content-pane{border-radius:16px}
body.vc-in-call .video-size-bar button{border-radius:10px !important}

/* ---------- 1:3 그룹 스포트라이트 (선생님 감지 시에만: #vc-video-grid.vc-has-teacher) ---------- */
@media (min-width:1024px){
  body.vc-in-call #vc-video-grid.vc-has-teacher[data-count="3"],
  body.vc-in-call #vc-video-grid.vc-has-teacher[data-count="4"]{
    display:flex !important;flex-wrap:wrap !important;gap:8px !important;align-content:stretch !important;
    grid-template-columns:none !important;
  }
  body.vc-in-call #vc-video-grid.vc-has-teacher[data-count="3"] .video-box[data-role="teacher"],
  body.vc-in-call #vc-video-grid.vc-has-teacher[data-count="4"] .video-box[data-role="teacher"]{
    flex:0 0 100% !important;height:60% !important;max-width:none !important;order:0 !important;border-radius:14px !important;
  }
  body.vc-in-call #vc-video-grid.vc-has-teacher[data-count="3"] .video-box:not([data-role="teacher"]),
  body.vc-in-call #vc-video-grid.vc-has-teacher[data-count="4"] .video-box:not([data-role="teacher"]){
    flex:1 1 0 !important;height:calc(40% - 8px) !important;min-width:0 !important;order:1 !important;border-radius:12px !important;
  }
}

/* ---------- 📱 휴대폰 가로(Landscape): 영상 왼쪽 + 새 톤 ---------- */
@media (max-width:920px) and (orientation:landscape){
  /* 영상 왼쪽 + 콘텐츠 오른쪽 (목업처럼) */
  body.vc-in-call .vc-main-row{ flex-direction:row !important; }
  /* 상단바 글래스 */
  body.vc-in-call .toolbar{
    background:linear-gradient(180deg,rgba(20,28,44,.94),rgba(14,20,34,.92)) !important;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  /* 영상 타일 — 라운드 + 그림자, 내 화면(나)은 앰버 링 */
  body.vc-in-call #vc-video-grid .video-box{
    border-radius:12px !important;box-shadow:0 4px 14px rgba(0,0,0,.38) !important;
  }
  body.vc-in-call #vc-video-grid #vc-local-box{
    box-shadow:0 0 0 2px rgba(251,191,36,.6),0 4px 14px rgba(0,0,0,.38) !important;
  }
  body.vc-in-call #vc-video-grid .video-label{
    background:rgba(10,14,22,.62) !important;border-radius:7px !important;font-weight:600 !important;
  }
  /* 하단 액션바 — 글래스 플로팅 톤 + 둥근 버튼 */
  body.vc-in-call .vc-bottom-actions{
    background:linear-gradient(180deg,rgba(20,28,44,.92),rgba(12,18,30,.96)) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.10) !important;
  }
  body.vc-in-call .vc-bottom-actions button{ border-radius:14px !important;transition:transform .1s ease; }
  body.vc-in-call .vc-bottom-actions button:active{ transform:scale(.95) !important; }
  body.vc-in-call .vc-bottom-actions button.primary{ background:rgba(251,191,36,.16) !important; }
  body.vc-in-call #vc-bottom-grip .grip-bar{ background:rgba(251,191,36,.55) !important; }
}

/* ---------- 📱 휴대폰 세로(Portrait): 선생님 메인 + 내 화면 작은 PIP ---------- */
@media (max-width:900px) and (orientation:portrait){
  body.vc-in-call #vc-video-grid[data-count="2"]{ position:relative !important; }
  body.vc-in-call #vc-video-grid[data-count="2"] .video-box{ border-radius:12px !important; }
  body.vc-in-call #vc-video-grid[data-count="2"] #vc-local-box{
    display:block !important;position:absolute !important;right:10px;bottom:10px;top:auto !important;left:auto !important;
    width:34% !important;max-width:130px !important;aspect-ratio:4/3 !important;height:auto !important;min-height:0 !important;
    z-index:30 !important;border-radius:12px !important;overflow:hidden;
    box-shadow:0 0 0 2px rgba(251,191,36,.6),0 6px 16px rgba(0,0,0,.45) !important;
  }
}

/* ---------- 📱 휴대폰 세로: 상단 컨트롤을 하단 플로팅 독으로 이동 (목업처럼) ---------- */
@media (max-width:1023px) and (orientation:portrait){
  body.vc-in-call .toolbar-center{
    position:fixed !important;left:50% !important;bottom:14px !important;top:auto !important;
    transform:translateX(-50%) !important;width:auto !important;max-width:94vw !important;
    background:linear-gradient(180deg,rgba(20,28,44,.95),rgba(12,18,30,.96)) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.12) !important;border-radius:18px !important;
    padding:8px 12px !important;gap:10px !important;z-index:400 !important;
    box-shadow:0 14px 40px rgba(0,0,0,.5) !important;flex-wrap:nowrap !important;justify-content:center !important;
  }
  /* 마이크 선택 드롭다운은 독에서 숨김(공간 절약) */
  body.vc-in-call .toolbar-center .ctrl-select{ display:none !important; }
  body.vc-in-call .toolbar-center .ctrl-btn{ width:46px !important;height:46px !important; }
}

/* ---------- 수업 컨트롤 버튼: 이모지 → 라인 아이콘 (CSS mask, JS 텍스트 토글에도 안전) ---------- */
body.vc-in-call{
  --ic-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cline x1='12' y1='18' x2='12' y2='21'/%3E%3C/svg%3E");
  --ic-micoff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='8' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 11 5'/%3E%3Cline x1='12' y1='18' x2='12' y2='21'/%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3C/svg%3E");
  --ic-cam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='12' height='12' rx='2.5'/%3E%3Cpath d='M15 10.5l6-3v9l-6-3z'/%3E%3C/svg%3E");
  --ic-camoff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h4a2.5 2.5 0 0 1 2 1.5M15 13.5V18H5a2 2 0 0 1-2-2V8'/%3E%3Cpath d='M15 10.5l6-3v9'/%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3C/svg%3E");
  --ic-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8 8 0 0 1-11.5 7.2L4 20l1.3-4.3A8 8 0 1 1 21 11.5z'/%3E%3C/svg%3E");
  --ic-exit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='6' y1='18' x2='18' y2='6'/%3E%3C/svg%3E");
}
body.vc-in-call #vc-btn-mic,
body.vc-in-call #vc-btn-cam,
body.vc-in-call #vc-btn-chat,
body.vc-in-call #vc-exit-btn-v34{ font-size:0 !important;position:relative; }
body.vc-in-call #vc-btn-mic::before,
body.vc-in-call #vc-btn-cam::before,
body.vc-in-call #vc-btn-chat::before,
body.vc-in-call #vc-exit-btn-v34::before{
  content:"";display:inline-block;width:21px;height:21px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:21px 21px;mask-size:21px 21px;
}
body.vc-in-call #vc-btn-mic::before{ -webkit-mask-image:var(--ic-mic);mask-image:var(--ic-mic); }
body.vc-in-call #vc-btn-mic.off::before{ -webkit-mask-image:var(--ic-micoff);mask-image:var(--ic-micoff); }
body.vc-in-call #vc-btn-cam::before{ -webkit-mask-image:var(--ic-cam);mask-image:var(--ic-cam); }
body.vc-in-call #vc-btn-cam.off::before{ -webkit-mask-image:var(--ic-camoff);mask-image:var(--ic-camoff); }
body.vc-in-call #vc-btn-chat::before{ -webkit-mask-image:var(--ic-chat);mask-image:var(--ic-chat); }
body.vc-in-call #vc-exit-btn-v34::before{ -webkit-mask-image:var(--ic-exit);mask-image:var(--ic-exit); }
/* 채팅 배지 글자는 다시 보이게, 음소거/카메라 끔은 빨강 */
body.vc-in-call #vc-btn-chat .chat-badge{ font-size:10px !important; }
body.vc-in-call .ctrl-btn.off{ background:rgba(239,68,68,.92) !important;color:#fff !important;border:none !important; }

/* ---------- 수업시간/경과 배지 정제 ---------- */
body.vc-in-call #mango-class-time{
  border-radius:14px !important;box-shadow:0 6px 16px rgba(0,0,0,.30) !important;
}

/* 🌐 (2026-09-10) 얼굴칸 안내의 «영어 줄» — 한/영 병기(idx-main.js vcApplyRemoteCamHint).
   ⛔ 인라인 style 로 주지 말 것: 그 파일은 첫 화면 예산이라 바이트가 비싸다(2026-09-10 여유 186B).
   ⚠️ 좁은 타일에서 4줄이 되면 넘치므로 상자에 overflow:hidden 을 함께 둔다. */
.vc-camoff-hint { overflow: hidden; }
.vc-camoff-hint i {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 11px; font-weight: 600; opacity: .82; line-height: 1.3;
}