/* === デモ: 縦並びレイアウト（4パターン） === */
.demo-container {
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
}

/* 各パターンを囲むカード */
.sb-pattern {
  margin-bottom: 16px;
  padding: 20px;
  background: #F4F6F9;
  border-radius: 8px;
  max-width: 560px;
}
.sb-pattern:last-child { margin-bottom: 0; }

.sb-pattern-label {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sb-sub-label {
  margin: 16px 0 12px;
  font-size: 12px;
  color: #5A6A7A;
}

/* ========== ステータスバッジ 共通 ========== */

/* バッジの並びコンテナ。色を変えたいときはここの --status-* 変数を書き換えるだけでOK */
.sb-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  --status-progress: #1E40AF;      --status-progress-soft: #DBEAFE;
  --status-done:     #065F46;      --status-done-soft:     #D1FAE5;
  --status-error:    #991B1B;      --status-error-soft:    #FEE2E2;
  --status-warning:  #92400E;      --status-warning-soft:  #FEF3C7;
  --status-hold:     #6B7280;      --status-hold-soft:     #F3F4F6;
}

/* ステータスごとに中間変数（--_main / --_soft）へマッピングする。
   分岐はここに集約し、型別スタイル（.sb-soft 等）には書かない */
.sb-badge[data-status="progress"] { --_main: var(--status-progress); --_soft: var(--status-progress-soft); }
.sb-badge[data-status="done"]     { --_main: var(--status-done);     --_soft: var(--status-done-soft); }
.sb-badge[data-status="error"]    { --_main: var(--status-error);    --_soft: var(--status-error-soft); }
.sb-badge[data-status="warning"]  { --_main: var(--status-warning);  --_soft: var(--status-warning-soft); }
.sb-badge[data-status="hold"]     { --_main: var(--status-hold);     --_soft: var(--status-hold-soft); }

/* 共通形状＋塗りつぶし（既定） */
.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid transparent;
  background: var(--_main);
  color: #fff;
}

/* ソフト（薄背景＋濃文字） */
.sb-badge.sb-soft {
  background: var(--_soft);
  color: var(--_main);
}

/* アウトライン（白背景＋濃色の枠線） */
.sb-badge.sb-outline {
  background: #fff;
  color: var(--_main);
  border-color: var(--_main);
}

/* 色だけに意味を依存させないためのドット（文字色と同じ色で描画） */
.sb-badge.sb-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ========== Pattern 4: ステータス切替 ========== */

.sb-switch {
  display: inline-flex;
  border: 1.5px solid #D0D7E0;
  border-radius: 8px;
  overflow: hidden;
}
.sb-switch-btn {
  padding: 8px 16px;
  font-size: 13px;
  background: #fff;
  color: #5A6A7A;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.sb-switch-btn + .sb-switch-btn {
  border-left: 1.5px solid #D0D7E0;
}
.sb-switch-btn.is-active {
  background: #2B7FE8;
  color: #fff;
}

.sb-preview {
  margin-top: 16px;
}

/* ========== 共通パーツ ========== */

.source-hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: #5A6A7A;
  background: #F4F6F9;
  border-left: 3px solid #2B7FE8;
  border-radius: 0 6px 6px 0;
  line-height: 1.7;
}
.source-hint code {
  font-family: monospace;
  background: #E8EDF4;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* 複数プロンプトブロック */
.prompt-block { margin-bottom: 20px; }
.prompt-block:last-child { margin-bottom: 0; }
.prompt-block-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.04em;
}

/* プロンプト補足 */
.prompt-notes {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #F4F6F9;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
}
.prompt-note-caution {
  margin: 0 0 8px;
  color: #E65100;
}
.prompt-note-tip {
  margin: 0;
  color: #5A6A7A;
}

/* リセットボタン */
.demo-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.reset-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}
.reset-btn:hover {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

/* レスポンシブ */
@media (max-width: 480px) {
  .sb-pattern { max-width: 100%; padding: 16px; }
  .demo-container { padding: 16px; }
}