/* =====================================================================
   style.css — カメラ・マイクテスト ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   色は正規のCSS変数（--sg-*）＋フォールバックのみ使用（ダーク対応）。
   ===================================================================== */

/* プライバシー注記 */
.sg-privacy {
  margin: 12px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: 10px;
  background: var(--sg-surface-2, #f4f6fb);
  color: var(--sg-fg, #333);
  font-size: 0.9rem;
  line-height: 1.7;
}
.sg-env-note {
  margin: 8px 0;
  color: var(--sg-accent, #c92a2a);
}

/* ボタン行 */
.sg-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 0;
}

/* カメラ映像 */
.sg-video-wrap {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
.sg-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.sg-meta {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--sg-muted, #777);
}
.sg-status {
  margin: 8px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--sg-muted, #555);
}

/* マイク入力レベルメーター */
.sg-meter {
  margin-top: 12px;
  height: 20px;
  border-radius: 999px;
  background: var(--sg-surface-2, #eef1f7);
  border: 1px solid var(--sg-border, #e5e7eb);
  overflow: hidden;
}
.sg-meter__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--sg-primary, #3b5bdb),
    var(--sg-accent, #f76707)
  );
  transition: width 60ms linear;
}
.sg-meter-val {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--sg-muted, #777);
}
.sg-meter-val span {
  font-weight: 600;
  color: var(--sg-fg, #333);
}