/* =====================================================================
   style.css — カラーツールボックス ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* HEX入力 + カラーピッカーの横並び */
.cs-row--hex {
  align-items: center;
  gap: var(--sg-space-2, 8px);
  flex-wrap: wrap;
}
.cs-row--hex > .sg-input {
  flex: 1;
  min-width: 120px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ネイティブ color input を正方形タイルに整形 */
.sg-color {
  flex: 0 0 auto;
  width: 52px;
  height: 44px;
  padding: 2px;
  background: var(--sg-surface, #fff);
  border: 1px solid var(--sg-border, #e2e6ee);
  border-radius: var(--sg-radius, 8px);
  cursor: pointer;
}
.sg-color::-webkit-color-swatch-wrapper { padding: 0; }
.sg-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.sg-color::-moz-color-swatch { border: none; border-radius: 6px; }

.cs-swap {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* メイン色の大判プレビュー */
.cs-swatch-preview {
  width: 100%;
  height: 96px;
  margin-bottom: var(--sg-space-3, 12px);
  border: 1px solid var(--sg-border, #e2e6ee);
  border-radius: var(--sg-radius, 8px);
  box-shadow: var(--sg-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  background: #1e90ff;
}

/* 変換・カラー名の出力行 */
.cs-out-row {
  display: flex;
  align-items: center;
  gap: var(--sg-space-2, 8px);
  padding: 6px 0;
}
.cs-out-row + .cs-out-row {
  border-top: 1px solid var(--sg-border, #e2e6ee);
}
.cs-out-row__label {
  flex: 0 0 auto;
  width: 64px;
  font-weight: 600;
  color: var(--sg-muted, #777);
  font-size: 0.85rem;
}
.cs-out-row__value {
  flex: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.cs-name { font-weight: 600; font-size: 1.05rem; }

.sg-copy--mini {
  margin-top: 0;
  padding: 2px 10px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* コントラストのプレビュー */
.cs-contrast-preview {
  margin: var(--sg-space-3, 12px) 0;
  padding: 20px 16px;
  border: 1px solid var(--sg-border, #e2e6ee);
  border-radius: var(--sg-radius, 8px);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  color: #1e90ff;
  background: #ffffff;
}
.cs-ratio { margin-top: var(--sg-space-2, 8px); }

/* WCAG 判定 */
.cs-wcag {
  margin-top: var(--sg-space-3, 12px);
}
.cs-wcag__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sg-space-2, 8px);
  padding: 8px 0;
  border-top: 1px solid var(--sg-border, #e2e6ee);
  font-size: 0.9rem;
}
.cs-pass { color: #1a7f37; font-weight: 700; }
.cs-fail { color: #b42318; font-weight: 700; }

/* スウォッチ共通（パレット・色覚） */
.cs-swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 84px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--sg-border, #e2e6ee);
  border-radius: var(--sg-radius, 8px);
  cursor: pointer;
  font: inherit;
  gap: 2px;
}
.cs-swatch--light-text { color: #fff; }
.cs-swatch--dark-text { color: #1a1a1a; }
.cs-swatch__hex {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cs-swatch__sub { font-size: 0.7rem; opacity: 0.9; }
.cs-swatch.is-copied { outline: 2px solid var(--sg-accent, #3b5bdb); }

/* パレット配置 */
.cs-palette { margin-top: var(--sg-space-2, 8px); }
.cs-scheme { margin-top: var(--sg-space-4, 16px); }
.cs-scheme:first-child { margin-top: var(--sg-space-2, 8px); }
.cs-scheme__title { margin: 0 0 2px; font-size: 0.95rem; font-weight: 700; }
.cs-scheme__desc { margin: 0 0 8px; font-size: 0.82rem; color: var(--sg-muted, #777); }
.cs-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2, 8px);
}
.cs-swatch-row .cs-swatch { flex: 1 1 84px; }

/* 色覚グリッド */
.cs-cvd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sg-space-3, 12px);
  margin-top: var(--sg-space-2, 8px);
}
.cs-cvd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-cvd__block {
  width: 100%;
  min-height: 72px;
  margin-bottom: 4px;
}
.cs-cvd__name { font-size: 0.85rem; font-weight: 600; }
.cs-cvd__desc { font-size: 0.75rem; color: var(--sg-muted, #777); }