/* ── 측정 화면 톤 맞추기 (안) 2026-08-05 ─────────────────────────────
 *
 * 왜 — 랜딩과 설문앱은 흰 배경 + 연노랑(#fff6ab)인데 측정 화면만 검정 헤더 +
 * 형광 청록이라 회원이 보기에 다른 서비스로 넘어온 것처럼 보인다.
 *
 * 이 파일은 styles.css **뒤에** 얹는 덮개다. 원래 스타일은 건드리지 않았으므로
 * 이 한 줄만 빼면 그대로 되돌아간다. 최종 확정 전까지 이렇게 둔다.
 *
 * 강사 화면(coach-mode)의 어두운 계기판 느낌은 그대로 둔다 — 거기서는 숫자를
 * 읽는 게 목적이고, 어두운 배경이 오히려 낫다.
 */

:root {
  --brand-lime: #fff6ab;
  --brand-yellow: #ffe45c;
  --ink: #191919;
  --muted: #5b6068;
  --line: #e5e7eb;
  --bg: #f2f5fa;
  --blue: #005fcc;
  --blue-soft: #eef3fb;
  /* 형광 청록·자홍을 회원 화면에서 뺀다. 상태색은 신호등 세 가지로만. */
  --cyan: #4e7a3c;
  --magenta: #a84d00;
  --yellow: #c98a00;
  --red: #b42318;
  --green: #4e7a3c;
}

/* 머리띠 — 검정 + 형광 대신 흰 배경 + 연노랑 */
.app-header {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.app-index {
  font: 800 11px "Pretendard", system-ui, sans-serif;
  letter-spacing: 0;
  color: #6b5d00;
  background: var(--brand-lime);
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
}
.title-block h1 { font-weight: 800; letter-spacing: -.5px; }
.title-block p {
  font: 600 11.5px "Pretendard", system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--muted);
}
.header-state {
  font: 600 11.5px "Pretendard", system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--muted);
}
.header-state b { color: var(--ink); font-weight: 700; }
.state-dot { background: #4e7a3c; box-shadow: 0 0 0 4px rgba(78,122,60,.14); }

/* 단계 표시 — 형광 밑줄 대신 연노랑 알약 */
.capture-step.is-active { background: var(--brand-lime); }
.capture-step.is-active b { color: var(--ink); }
.capture-step.is-complete span { color: #4e7a3c; }

/* 버튼 — 파랑 대신 검정(랜딩 CTA와 같은 모양) */
.primary-button {
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
}
.primary-button:hover:not(:disabled) { background: #000; }
.secondary-button {
  border-radius: 999px;
  border: 1.5px solid #d5d9df;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

/* 작은 대문자 라벨(01 · LIVE 같은 것)을 우리말로 읽히게 */
.section-label span {
  background: var(--brand-lime);
  color: #6b5d00;
  font-weight: 800;
  border-radius: 999px;
}

/* 회원 화면에서 눈에 띄는 형광 요소 줄이기 */
body.member-mode .live-status-card { border-color: var(--line); }
body.member-mode .viewer-toolbar { background: #fff; }
body.member-mode .audience-switch button.is-active {
  background: var(--brand-lime);
  color: var(--ink);
}

/* 사진·3D가 보이는 무대는 어두운 채로 둔다 — 뼈대와 선이 잘 보인다 */