/* =====================================================================
   style.css — パスワード強度チェッカー ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* 数値はタブ幅数字で桁を揃える */
.sg-result-row__value {
  font-variant-numeric: tabular-nums;
}

/* プライバシー注記（送信しない旨）を目立たせる */
.sg-privacy {
  margin: 0 0 var(--sg-space-4);
  padding: var(--sg-space-3) var(--sg-space-4);
  border-radius: var(--sg-radius);
  background: var(--sg-warm-soft);
  border: 1px solid var(--sg-warm);
  color: var(--sg-text, inherit);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* 入力欄＋表示トグルの横並び */
.pw-input-wrap {
  display: flex;
  gap: var(--sg-space-2);
  align-items: stretch;
}
.pw-input-wrap .sg-input {
  flex: 1 1 auto;
  min-width: 0;
}
.pw-toggle {
  flex: 0 0 auto;
  padding: 0 var(--sg-space-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  color: var(--sg-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.pw-toggle:hover {
  background: var(--sg-accent);
}
.pw-toggle:focus-visible {
  outline: 2px solid var(--sg-warm);
  outline-offset: 2px;
}

/* 強度メーター */
.pw-meter {
  height: 10px;
  margin: var(--sg-space-3) 0 var(--sg-space-2);
  border-radius: 999px;
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-border);
  overflow: hidden;
}
.pw-meter__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--sg-muted);
  transition: width 0.25s ease, background-color 0.25s ease;
}
.pw-meter__bar--lv1 { background: #d23b3b; }
.pw-meter__bar--lv2 { background: #e8743b; }
.pw-meter__bar--lv3 { background: #e8b23b; }
.pw-meter__bar--lv4 { background: #6bbf59; }
.pw-meter__bar--lv5 { background: #1f9d57; }

/* 改善アドバイス */
.pw-advice {
  margin-top: var(--sg-space-4);
  padding: var(--sg-space-3) var(--sg-space-4);
  border-radius: var(--sg-radius);
  background: var(--sg-surface-2);
  border: 1px solid var(--sg-border);
  text-align: left;
}
.pw-advice__title {
  margin: 0 0 var(--sg-space-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sg-muted);
}
.pw-advice__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
  line-height: 1.7;
}