/* UI部品（ボタン・バッジ・カード・入力・セレクト・スイッチ等）
   新部品はユーザー承認後にここへ追加し、catalog.htmlにも登録すること */
/* プライマリCTA（全幅・最上部） */
  .btn-primary-lg {
    margin-top: 20px; height: 48px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 6px; background: var(--primary); color: var(--primary-foreground);
    font-size: 16px; font-weight: 500; transition: background 0.15s;
  }
  .btn-primary-lg:hover { background: var(--primary-hover); }


  /* セクション見出し */
  .section-head { margin-top: 32px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .section-head h2 { font-size: 16px; font-weight: 700; }
  .section-head p { font-size: 13px; color: var(--muted-foreground); }

  /* フィルタバー */
  .filterbar {
    margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--muted-30);
    padding: 12px 16px;
  }
  .search-input { position: relative; flex: 1; min-width: 180px; }
  .search-input svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
  .search-input input {
    width: 100%; height: 36px; padding: 4px 12px 4px 32px;
    border: 1px solid var(--input); border-radius: 6px; background: var(--background);
    font-size: 14px; font-family: inherit; outline: none; box-shadow: var(--shadow-xs);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .search-input input::placeholder { color: var(--muted-foreground); }
  .search-input input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33,110,189,0.2); }
  .filter-group { display: flex; align-items: center; gap: 6px; }
  .filter-group label { font-size: 14px; color: var(--muted-foreground); }
  .select {
    height: 36px; min-width: 120px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid var(--input); border-radius: 6px; background: var(--background);
    font-size: 14px; color: var(--foreground); box-shadow: var(--shadow-xs);
  }
  .select svg { color: var(--muted-foreground); opacity: 0.5; }
  .count { margin-left: auto; white-space: nowrap; font-size: 14px; color: var(--muted-foreground); }

  .list-label { margin-top: 20px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }

  /* ===== 分析カード ===== */
  .card-list { display: flex; flex-direction: column; gap: 12px; }
  .card {
    position: relative; background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-sm); padding: 20px 24px 20px 28px;
    cursor: pointer; transition: background 0.15s; overflow: hidden;
  }
  .card:hover { background: var(--muted-40); }
  .card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  }
  .card.is-running::before { background: var(--primary); }
  .card.is-done::before { background: var(--border); }

  .card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .card-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
  .card-title-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; }
  .card-title-row h3 { font-size: 14px; font-weight: 700; }
  .card-meta { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 4px; font-size: 12px; color: var(--muted-foreground); }

  .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 9999px; padding: 2px 8px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
  .badge-running { background: #eef4fa; color: #1a5897; border-color: #c7dbee; }
  .badge-running .dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--primary); }
  .badge-done { background: var(--secondary); color: var(--secondary-foreground); }
  .badge-done svg { color: var(--muted-foreground); }

  .card-desc { font-size: 14px; }
  .card-desc .label { color: var(--muted-foreground); }
  .card-note { font-size: 12px; color: var(--muted-foreground); }

  .card-action { flex-shrink: 0; align-self: center; }
  .btn-outline {
    height: 36px; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 6px; font-size: 14px; font-weight: 500;
    background: var(--background); color: var(--foreground); border: 1px solid var(--border);
    transition: background 0.15s;
  }
  .btn-outline:hover { background: var(--muted-40); }
  .btn-outline.emphasized { border-color: var(--primary); color: var(--primary); }
  .btn-outline.emphasized:hover { background: #eef4fa; }

  .card-footer { margin-top: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 12px; color: var(--muted-foreground); }
  .card-footer button { border: none; background: transparent; color: var(--muted-foreground); font-size: 12px; padding: 0; }
  .card-footer button:hover { color: var(--foreground); }
  .card-footer button.danger:hover { color: var(--destructive); }
  .switch-row { display: flex; align-items: center; gap: 6px; }
  .switch { position: relative; width: 32px; height: 18px; border-radius: 9999px; background: var(--switch-background); border: 1px solid transparent; transition: background 0.15s; padding: 0; }
  .switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 9999px; background: var(--background); transition: transform 0.15s; box-shadow: var(--shadow-xs); }
  .switch[aria-checked="true"] { background: var(--primary); }
  .switch[aria-checked="true"]::after { transform: translateX(14px); }