/* ==========================================================================
   mic-camera-test / style.css — 이 도구에만 필요한 것. 색·간격은 common.css 변수만.
   🔴 인라인 style 이 CSP 로 막혀 상태는 클래스·hidden·aria-pressed 로만 바꿉니다.
   ========================================================================== */

.mc-warn {
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.mc-steps {
  display: grid;
  gap: var(--space-4);
}
.mc-step {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.mc-step__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.mc-step__title .step-number { margin: 0; }
.mc-step__text { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

.mc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 760px) {
  .mc-row .button { flex: 1 1 100%; }
}

.mc-ask { margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-bold); }

/* 고른 답: 색만이 아니라 두꺼운 테두리 + 채운 바탕 */
.mc-answer[aria-pressed="true"] {
  border: 2px solid var(--color-primary);
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

.mc-status {
  min-height: 24px;
  margin: var(--space-3) 0 0;
  font-weight: var(--weight-bold);
}
.mc-status--warn { color: var(--color-warning); }

.mc-gap { margin-top: var(--space-4); }

/* 소리 크기 막대(<meter>) */
.mc-meter {
  display: block;
  width: 100%;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  overflow: hidden;
}
.mc-meter::-webkit-meter-bar {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--color-surface-soft);
}
.mc-meter::-webkit-meter-optimum-value { background: var(--color-success); }
.mc-meter::-moz-meter-bar { background: var(--color-success); }

.mc-device { margin-top: var(--space-4); }

.mc-video-box {
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
  aspect-ratio: 16 / 9;
}
.mc-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mc-video--mirror { transform: scaleX(-1); }

.mc-check {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.mc-check input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  accent-color: var(--color-primary);
}

.mc-summary {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.mc-cherry {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.mc-cherry a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: var(--weight-bold);
}

.mc-related {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.mc-related__title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.mc-related__list { margin: 0; padding: 0; list-style: none; }
.mc-related__list a {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.mc-rules { padding-left: 1.2em; }
.mc-rules li + li { margin-top: var(--space-2); }

@media print {
  .site-header, .mc-steps, .mc-row, .mc-related, .copy-feedback, .mc-cherry { display: none !important; }
}

/* 빵부스러기 ‘홈’ 누르는 영역 44px (dday·timezone 과 같은 방식) */
.breadcrumbs a { min-width: 44px; justify-content: center; }