/* resistor-color-code — ツール固有スタイル */
.rc-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sg-surface-2, #eef1f6);
  border-radius: 999px;
}
.rc-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  color: var(--sg-muted, #66707a);
  cursor: pointer;
}
.rc-tab[aria-selected="true"] {
  background: var(--sg-surface, #fff);
  color: var(--sg-fg, #1c2430);
  box-shadow: var(--sg-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.08));
}

/* 抵抗図 */
.rc-resistor {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 14px auto 8px;
  height: auto;
}
.rc-svg-band { transition: fill 0.1s; }

/* 帯select */
.rc-bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.rc-band { display: flex; flex-direction: column; gap: 4px; }
.rc-band__label { font-size: .8rem; font-weight: 700; color: var(--sg-muted, #66707a); }

/* 出力 */
.rc-out { margin-top: 16px; }
.rc-val {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sg-fg, #1c2430);
}
.rc-tol { font-size: 1.1rem; font-weight: 700; color: var(--sg-primary, #3b5bdb); margin-left: 6px; }
.rc-sub { margin-top: 6px; font-size: .9rem; color: var(--sg-muted, #66707a); }
.rc-plain {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sg-surface-2, #f4f6fb);
  border-radius: 8px;
  padding: 7px 10px;
  display: inline-block;
}
.rc-err { color: var(--sg-danger, #c92a2a); }

/* 逆引きオプション */
.rc-rev-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 逆引き 色チップ */
.rc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.rc-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 56px;
  padding: 8px 6px;
  border: 1px solid var(--sg-border, #e2e6ee);
  border-radius: 10px;
  background: var(--sg-surface, #fff);
}
.rc-chip__sw { width: 30px; height: 18px; border-radius: 3px; }
.rc-chip__ja { font-size: .82rem; font-weight: 700; }
.rc-chip__rd { font-size: .72rem; color: var(--sg-muted, #66707a); }

@media (max-width: 420px) {
  .rc-rev-opts { grid-template-columns: 1fr; }
}