:root {
  --bg: #0b0d10;
  --panel: #14171d;
  --line: #252a33;
  --text: #e8ecf1;
  --muted: #8b95a3;
  --accent: #22d3ee;
  --header: 54px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", "Pretendard", -apple-system,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 헤더 ─────────────────────────────────────────────── */

header {
  flex: 0 0 auto;
  height: var(--header);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.back {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #14171d;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.back:hover { color: var(--text); border-color: #39414f; }

.who {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.who b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.who span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 본문 배치 ────────────────────────────────────────── */

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0 14px 14px;
}

/* 뷰어는 무대를 가운데 두기만 하는 투명한 틀이다.
   여기에 배경이나 테두리를 주면 영상 위아래로 검은 띠가 생긴다. */
.viewer {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

/* 무대는 실제 카메라 비율을 따라간다.
   폭을 직접 지정하지 않으면 캔버스의 원본 픽셀 크기(예: 1280)에서 멈춰
   큰 화면에서 좌우로 빈 공간이 남는다. 남는 자리를 끝까지 쓰도록
   틀의 높이·폭 중 먼저 걸리는 쪽에 맞춘 폭을 계산해 준다. */
.stage {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  width: min(100cqw, 100cqh * var(--arn, 1.7778));
  max-width: 100%;
  max-height: 100%;
  display: flex;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

#video {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
  left: -9999px;
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 20px 20px 90px;
  pointer-events: none;
}

.status[hidden] { display: none; }

/* ── 화면 위 표시 ─────────────────────────────────────── */

.rec-dot {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rec-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink { 50% { opacity: 0.25; } }

.detect {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.7);
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 600;
}

.detect.off {
  background: rgba(69, 26, 3, 0.7);
  color: #fdba74;
}

.detect[hidden] { display: none; }

/* ── 단추 ─────────────────────────────────────────────── */

button {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: #1c212a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

button:hover:not(:disabled) { background: #262d38; }

button:disabled { opacity: 0.4; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #06232a;
  font-weight: 700;
}

button.primary:hover:not(:disabled) { background: #0fbcd6; }

button.primary.off {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  color: var(--text);
  font-weight: 500;
}

button.primary.off:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }

/* ── 아래 툴바 (몰입 모드와 같은 모양을 기본으로 쓴다) ── */

.bar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 9px;
  border-radius: 999px;
  background: rgba(12, 15, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  transition: opacity 0.35s, transform 0.35s;
}

.ficon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

.ficon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }

/* 웹캠 단추 — 꺼져 있을 때가 눌러야 할 때라 이때 강조한다.
   켜지면 평범한 단추로 물러나고, 붉은 테두리로 끄는 자리임을 알린다. */
.ficon.primary,
.ficon.primary:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}

.ficon.primary.off {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(239, 68, 68, 0.55);
}

.ficon.primary.off:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.8);
}

.ficon.is-on {
  background: var(--accent);
  border-color: var(--accent);
}

/* 켜고 끄는 단추 — 배경을 칠하면 웹캠 단추만큼 눈에 띄어 주객이 바뀐다.
   켜짐은 아이콘을 또렷하게, 꺼짐은 흐리게 두는 정도로만 알린다. */
.ficon.toggle.is-on {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

.ficon.toggle.is-on:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }

.ficon.toggle:not(.is-on) { opacity: 0.38; }
.ficon.toggle:not(.is-on):hover:not(:disabled) { opacity: 0.7; }

.ficon.recording {
  background: #ef4444;
  border-color: #ef4444;
}

.pill {
  height: 46px;
  flex: 0 0 auto;
  padding: 0 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.fsep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 2px;
}

/* ── 툴팁 ─────────────────────────────────────────────────
   브라우저 기본 title 툴팁은 뜨는 데 1초쯤 걸리고 생김새도 페이지와
   맞지 않는다. 단추 위에 바로 띄운다. */

.ficon[data-tip] { position: relative; }

.ficon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: 3;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(16, 19, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8ecf1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* 꼬리 */
.ficon[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 3;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg) translateY(3px);
  background: rgba(16, 19, 24, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.ficon[data-tip]:hover:not(:disabled)::after,
.ficon[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ficon[data-tip]:hover:not(:disabled)::before,
.ficon[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg) translateY(0);
}

/* 손가락으로 누르는 화면에서는 툴팁이 눌린 뒤에도 남아 거슬린다 */
@media (hover: none) {
  .ficon[data-tip]::after,
  .ficon[data-tip]::before { display: none; }
}

/* ── 진단 메시지 ──────────────────────────────────────── */

.diag {
  position: absolute;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(340px, calc(100% - 24px));
  padding: 9px 11px;
  background: #2a1416;
  border: 1px solid #7f1d1d;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #fca5a5;
  word-break: break-all;
}

/* 오류가 아니라 알려만 주는 소식 — 붉게 띄우면 놀란다 */
.diag.info {
  background: rgba(16, 19, 25, 0.94);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.diag[hidden] { display: none; }

/* ── 몰입 모드 (전체 화면) ────────────────────────────── */

.viewer:fullscreen { background: #000; }

.viewer:fullscreen .stage {
  border: 0;
  border-radius: 0;
}

.viewer:fullscreen .bar { bottom: 26px; }

/* 잠시 조작이 없으면 조용히 사라진다 */
.viewer:fullscreen.idle .bar {
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  pointer-events: none;
}

.viewer:fullscreen.idle { cursor: none; }

/* ── 좁은 화면 ────────────────────────────────────────── */

@media (max-width: 900px) {
  main { padding: 0 10px 10px; }

  header { height: 48px; padding: 0 12px; gap: 10px; }

  /* 좁은 화면에서는 작품 이름만 남긴다 */
  .who span { display: none; }

  /* 툴바는 한 줄을 넘기지 않는다 — 접히면 작품을 가린다 */
  .bar {
    bottom: 12px;
    gap: 5px;
    padding: 6px;
    flex-wrap: nowrap;
  }

  .ficon { width: 38px; height: 38px; font-size: 16px; }

  .pill { height: 38px; padding: 0 12px; font-size: 13px; }

  .fsep { display: none; }

  .diag { bottom: 68px; }

  .rec-dot, .detect {
    top: 8px;
    padding: 4px 9px;
    font-size: 11px;
  }

  .rec-dot { left: 8px; }
  .detect { right: 8px; }
}