/* =====================================================================
   style.css — メトロノーム ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 補助ラベルを入力直下に詰める */
.sg-field .sg-help {
  margin-top: var(--sg-space-1);
}

/* 本体カード */
.metro {
  text-align: center;
}

/* 拍インジケータ */
.metro-beats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 26px;
  margin-bottom: var(--sg-space-3);
}
.metro-beat {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sg-border, #e5e7eb);
  transition: transform 0.05s ease, background-color 0.05s ease, box-shadow 0.05s ease;
}
/* 通常拍が鳴った瞬間 */
.metro-beat.is-active {
  background: var(--sg-primary, #3b5bdb);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(59, 91, 219, 0.18);
}
/* 1拍目（アクセント）は色を変える */
.metro-beat--accent {
  background: #c3ccea;
}
.metro-beat--accent.is-active {
  background: #e8590c;
  box-shadow: 0 0 0 4px rgba(232, 89, 12, 0.2);
}

/* 大きな BPM 表示 */
.metro-bpm {
  margin: var(--sg-space-2) 0 0;
  font-size: clamp(3.6rem, 20vw, 6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.metro-bpm-unit {
  margin: 0 0 var(--sg-space-4);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sg-muted, #777);
}

.metro-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: var(--sg-space-2);
}
.metro-controls .sg-btn {
  min-width: 130px;
}
.sg-btn.is-running {
  /* 実行中のスタートボタンを控えめな停止色に */
  background: #e8590c;
  border-color: #e8590c;
  color: #fff;
}

.metro-tap-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sg-muted, #777);
  min-height: 1.2em;
}

/* テンポ入力行 */
.metro-range {
  width: 100%;
  margin: var(--sg-space-2) 0;
}
.metro-bpm-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.metro-bpm-input {
  max-width: 120px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.metro-step {
  min-width: 48px;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0;
}

/* テンポの目安（速度標語）プリセット */
.metro-tempo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: var(--sg-space-3);
}
.metro-tempo-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  font-weight: 700;
  height: auto;
  padding: 10px 12px;
  line-height: 1.3;
}
.metro-tempo-meta {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--sg-muted, #777);
}

/* ダークテーマ微調整 */
.sg-dark .metro-beat {
  background: #3a3f4b;
}
.sg-dark .metro-beat--accent {
  background: #4b4f66;
}
@media (prefers-color-scheme: dark) {
  html:not(.sg-light) .metro-beat {
    background: #3a3f4b;
  }
  html:not(.sg-light) .metro-beat--accent {
    background: #4b4f66;
  }
}