/* =====================================================================
   style.css — テキスト加工オールインワン ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* パイプラインの各段をグループ枠で区切る */
.sg-group {
  border: 1px solid var(--sg-border, #e2e6ee);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: var(--sg-space-3, 12px);
}
.sg-group > .sg-label {
  padding: 0 4px;
}

/* 検索/置換など横並びのフィールド */
.sg-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
}
.sg-grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
}

/* チェックの縦積み */
.sg-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-check {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
}
.sg-check--nested {
  margin-left: 1.6em;
  font-size: 0.9rem;
  color: var(--sg-muted, #666);
}
.sg-check input[disabled] + span {
  opacity: 0.5;
}

/* 並べ替えの向き（ラジオ） */
.sg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* 副ラベル */
.sg-label--sub {
  display: block;
  font-size: 0.85rem;
  color: var(--sg-muted, #666);
  font-weight: 600;
}

/* 統計 */
.sg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: var(--sg-space-3, 12px);
}
.sg-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sg-stat__label {
  font-size: 0.8rem;
  color: var(--sg-muted, #777);
}
.sg-stat__val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 結果テキストは等幅寄りで折り返し */
.sg-textarea-lines {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  white-space: pre;
  overflow-wrap: normal;
}

/* エラー表示 */
#error {
  color: var(--sg-danger, #c0392b);
}

.sg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}