/* ═══════════════════════════════════════════════════════════
   tokens.css — 세 화면(콘솔 · 입장/로그인 · 뷰어)이 공유하는 디자인 토큰
   ═══════════════════════════════════════════════════════════
   기준은 **운영자 콘솔**이다. 콘솔이 토큰이 가장 많고 모든 컴포넌트가 그 값에 맞춰
   조정돼 있어, 콘솔을 기준으로 삼으면 가장 복잡한 화면이 한 줄도 바뀌지 않는다.

   왜 파일 하나인가: 같은 값을 4개 템플릿에 복붙하던 동안 "값은 다른데 눈에는 같은"
   상태가 계속 생겼다(실측: 콘솔 #0b1012 vs 입장 #0c1214 는 ΔE 0.85 — 사람 눈으로
   구분 불가인데 코드로는 다른 색이었다). 이제 색을 바꿀 곳은 여기 한 곳이다.

   서빙 경로(같은 파일):
     * 콘솔·입장·로그인 → CP 의 /assets/tokens.css
     * 뷰어             → 세션 dashboard 의 /static/tokens.css

   여기 두지 않는 것 — **각 화면의 고유 기능 값**은 그 화면에 남긴다:
     * 뷰어: --text-font-size(참가자가 슬라이더로 바꾼다) · --transcript-max-h ·
       --header-h(JS 실측) · --watermark-opacity · --event-title-size
     * 뷰어의 px 단위 글자 크기: 자막 크기 조절과 얽혀 있어 rem 으로 옮기지 않는다.
     * 화면별 레이아웃(카드 폭, 그리드, 탭, 테이블)도 각자 유지한다.
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ─── 색 ─────────────────────────────────────────────── */
  --bg: #0b1012;
  /* 같은 색의 rgba 용 채널 — 반투명 표면(고정 헤더 등)이 배경을 덮지 않게 쓴다.
     --bg 를 바꿀 때 이 값도 함께 바꿔야 한다(rgba() 는 hex 변수를 받지 못한다). */
  --bg-rgb: 11, 16, 18;
  --surface: #12191c;      /* 카드·패널 표면 */
  --surface2: #182226;     /* 입력 위에 얹히는 한 단 밝은 표면(버튼 등) */
  --ink: #eff7f4;
  --muted: #8fa19d;
  --line: #29373b;
  --mint: #43dfbb;         /* 강조·활성·라이브 */
  --mint-rgb: 67, 223, 187;/* 위 색의 rgba 용 채널(글로우·링) — 함께 바꿔야 한다 */
  --mint2: #153f38;        /* 민트 계열 어두운 면 */
  --red: #ff8585;
  --amber: #ffc66d;
  --blue: #83b7ff;
  /* 입력 내부 배경 — 표면보다 한 단 어둡게 눌러 "쓸 수 있는 곳"을 구분한다. */
  --field: #0c1315;
  /* 배경 글로우. 좌상단에서 번지고 콘텐츠 영역에는 닿지 않는다.
     크기·중심을 **절대 길이로 못 박는다**(2026-08-18). 예전 값
     `circle at 15% -10%, … transparent 31%` 은 크기를 지정하지 않아 farthest-corner 로
     결정됐고, 31% 는 그 반지름의 비율이었다 — body 가 길어질수록(세션 목록·긴 자막)
     반지름이 함께 커져 같은 화면이 페이지 길이에 따라 다르게 보였다(실측: 900×620 기준
     짧은 페이지 대비 긴 페이지에서 글로우가 화면 대부분을 덮었다). 중심의 -10% 도 세로
     길이에 비례해 위로 밀려 위치까지 달라졌다.
     이제 반지름은 뷰포트 **폭**만 보고(clamp: 모바일 300px … 데스크톱 480px), 중심은
     좌상단에서 픽셀로 고정한다 — 문서가 아무리 길어져도, 세로가 어떻게 바뀌어도 좌상단
     모습이 같다. 값은 기존 데스크톱(1440×900)·모바일 렌더와 같은 크기로 맞춘 것이다. */
  --glow: radial-gradient(circle clamp(300px, 34vw, 480px) at clamp(56px, 15%, 220px) -80px, #143630 0, transparent 100%);

  /* 옛 이름 별칭 — 화면마다 --accent/--danger/--panel 로 부르던 것들을 한 값에 묶는다.
     새 코드에서는 쓰지 말고, 남아 있는 참조가 자동으로 같은 색을 받게 하는 용도다. */
  --accent: var(--mint);
  --danger: var(--red);
  --panel: var(--surface);

  /* ─── 글꼴 ───────────────────────────────────────────── */
  --font-stack: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  /* 기본 크기는 화면 성격에 따라 각자 정한다(밀도 높은 운영 화면 14px, 참가자 화면 16px).
     비율 스케일은 공유하므로 두 화면의 위계가 같아 보인다. */
  --fs-xs: .72rem;
  --fs-sm: .8rem;
  --fs-md: .91rem;
  --fs-lg: 1.05rem;
  --fs-title: 1.65rem;

  /* ─── 모양 ───────────────────────────────────────────── */
  --r-sm: 9px;             /* 입력·버튼 */
  --r-md: 10px;            /* 안내 상자 */
  --r-lg: 15px;            /* 카드 */
  --r-pill: 999px;
  --dot: 7px;              /* 상태 점(라이브·마이크) */
  --shadow-card: 0 24px 80px #0008;
}

/* ─── 공통 리셋 ─────────────────────────────────────────── */
* { box-sizing: border-box; }

/* ─── 공통 컴포넌트 ─────────────────────────────────────── */
/* 버튼은 채우지 않고 호버에서만 테두리가 물든다 — 화면마다 채워진 버튼이 있으면 정작
   급한 상태 컨트롤(라이브·마이크 송신)이 묻힌다. 예외는 그 화면의 유일한 동작을 가진
   진입 버튼(로그인·자막 입장)이고, 그때는 .filled 를 붙인다. */
button, .btn {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface2);
  color: var(--ink);
  padding: 9px 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
button:hover:not(:disabled), .btn:hover { border-color: #527069; }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button.filled {
  background: var(--mint);
  border-color: var(--mint);
  color: #07110f;
  font-weight: 750;
}
button.filled:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--mint); }
button.danger { color: var(--red); border-color: #6d3d43; }

input, textarea, select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field);
  color: var(--ink);
  padding: 10px 12px;
}
button, input, textarea, select { font: inherit; }

/* 상태 알약 — 콘솔에만 있던 것을 공용으로 내린다(입장 화면의 상태 표시도 같은 어법). */
.pill {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* 상태 점 — 켜짐(민트+글로우)과 꺼짐(회색)만 구분한다. */
.dot, .live-dot, .mic-dot {
  display: inline-block;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
  flex: none;
}
.mic-dot { background: #4a5a5e; box-shadow: none; }

/* ─── 접근성 ─────────────────────────────────────────────
   포커스 링은 세 화면 공통이다 — 콘솔에는 아예 없어서 키보드 사용자가 지금 어디에
   있는지 알 수 없었다. */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 1px;
}
/* 애니메이션을 줄여 달라고 한 사용자에게는 깜빡임·전환을 멈춘다(뷰어에만 있던 규칙). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
/* 대비를 높여 달라고 한 사용자에게는 배경 장식을 걷어낸다 — 자막 가독성이 우선이다. */
@media (prefers-contrast: more) {
  body { background-image: none !important; }
}

/* ─── 언어 전환 ───────────────────────────────────────────
   여섯 화면(콘솔·입장·로그인·마이크·뷰어·오버레이)이 같은 모양을 쓴다. 두 칸 세그먼트인
   이유는 **각 칸이 그 언어로 제 이름을 말하기 때문**이다 — 지금 화면이 무슨 언어로
   떠 있든 읽을 수 있다. 드롭다운은 닫혀 있는 동안 "다른 언어가 있다"는 사실 자체를
   감추고, 국기는 언어가 아니라 나라를 말한다(영어를 성조기로 그릴 수는 없다). */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px;
  gap: 2px;
  background: var(--field);
  flex: none;
}
.lang-switch button {
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 99px;
  padding: 4px 11px;
  font-size: .76rem;
  line-height: 1.4;
  white-space: nowrap;
}
.lang-switch button:hover:not([aria-current]) { color: var(--ink); border-color: transparent; }
/* 선택된 칸만 채운다 — 테두리로 구분하면 알약 안에 알약이 생겨 두 겹으로 보인다. */
.lang-switch button[aria-current] {
  background: var(--surface2);
  color: var(--ink);
  cursor: default;
}