/* ============================================================
   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)}
body.vc-in-call .tab-bar .tab-btn.active{
  background:rgba(251,191,36,.20) !important;color:#fcd34d !important;
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.5);
}

/* ---------- 영상/콘텐츠: 라운드 카드 + 그림자 ---------- */
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;
}