/* ============================================================================
   rolebar.css — 테스트 모드 상단 바 (모든 화면 공용)
   색 토큰은 apple.css 가 출처다. 이 바는 **개발·시연 중에만** 뜬다.
   실제 초대 링크로 들어온 응시자에게는 절대 보이면 안 된다(js/rolebar.js 가 막는다).
   ============================================================================ */

.mec-bar{
  position:relative;z-index:1000;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;
  background:var(--ap-label);color:var(--ap-on-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Pretendard Variable',Pretendard,Inter,'Segoe UI',sans-serif;
  font-size:12px;line-height:1.5;
}
.mec-bar .lead{
  font-weight:700;color:var(--ap-on-ink-accent);white-space:nowrap;
}
.mec-bar .note{color:var(--ap-on-ink-2);margin-right:auto}
.mec-bar nav{display:flex;gap:6px;flex-wrap:wrap}
.mec-bar a,.mec-bar button{
  font-family:inherit;font-size:12px;font-weight:600;line-height:1;
  padding:6px 12px;border-radius:var(--ap-r-pill);
  border:1px solid rgba(255,255,255,.22);
  background:transparent;color:var(--ap-on-ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease;
}
.mec-bar a:hover,.mec-bar button:hover{background:rgba(255,255,255,.12)}
.mec-bar a.on{
  background:var(--ap-on-ink);color:var(--ap-label);border-color:var(--ap-on-ink);
}
.mec-bar .off{border-color:transparent;color:var(--ap-on-ink-2)}
.mec-bar .off:hover{color:var(--ap-on-ink)}
.mec-bar a:focus-visible,.mec-bar button:focus-visible{
  outline:2px solid var(--ap-on-ink-accent);outline-offset:2px;
}
.mec-bar .lock{opacity:.6}

@media (max-width:560px){
  .mec-bar{font-size:11.5px;padding:8px 10px;gap:7px}
  .mec-bar .note{width:100%;margin:0}
  .mec-bar a,.mec-bar button{padding:5px 10px;font-size:11.5px}
}
@media print{ .mec-bar{display:none} }