/*============== お酒を比べる(/search/compare.html) ================*/
/* コードまたは銘柄名を入力 */
.cmp-add-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* モバイルは左右対称の余白に */
  margin: 12px var(--gap) 12px var(--gap);
}
.cmp-input-group {
  display: block;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* justify-content: center; */
}
.cmp-input-label {
  font-weight: 700;
}
.cmp-searchbox {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.cmp-search-input {
  width: 100%;
  padding: 10px 12px;
  padding-left: 34px; /* 左の虫眼鏡アイコン分 */
  padding-right: 34px; /* 右のクリアボタン分 */
  font-size: 1.05rem;
  border: 1.5px solid var(--border, #d0d8e0);
  border-radius: 100px;
  background: var(--surface-1, #fff);
  color: var(--text, inherit);
}
.cmp-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(0, 112, 243, 0.15));
  border-color: var(--accent, #0070f3);
}
.cmp-add-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
}
.cmp-add-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cmp-add-meta-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cmp-count {
  color: var(--muted, #666);
}

/* 全て外すボタンデザイン */
.cmp-clear {
  margin-left: 0;
  padding: 6px 16px;
  background: linear-gradient(135deg, var(--accent-soft, rgba(0, 0, 0, 0.06)), rgba(255, 255, 255, 0));
  color: var(--accent, #c00);
  border: 1.5px solid var(--border, #f5c2c7);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02em;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
  margin-right: 8px;
}
.cmp-clear:hover,
.cmp-clear:focus {
  background: linear-gradient(135deg, var(--accent, #c00), var(--accent-hover, #a00));
  color: var(--accent-contrast, #fff);
  border-color: var(--accent, #c00);
  box-shadow: 0 6px 16px var(--shadow, rgba(0, 0, 0, 0.18));
}

/* サジェストドロップダウン */
.cmp-suggest {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%; /* 入力ボックスの直下に配置 */
  max-height: 280px;
  overflow: auto;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #d0d8e0);
  border-radius: 6px;
  margin-top: 4px;
  padding: 4px 0;
  box-shadow: 0 10px 24px var(--shadow, rgba(0, 0, 0, 0.18));
  z-index: 10;
}
.cmp-suggest.open {
  display: block;
}
.cmp-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.cmp-suggest-item:hover,
.cmp-suggest-item.active {
  background: var(--accent-soft, #f0f6ff);
}
.cmp-suggest-item .name {
  font-weight: 700;
  color: var(--text, #111);
}
.cmp-suggest-item .meta {
  color: var(--muted, #666);
  font-size: 0.9rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* バッジとIDの間の余白 */
  white-space: nowrap; /* 1行に収める */
}
.cmp-suggest-empty {
  padding: 10px 12px;
  color: var(--muted, #666);
}
/* 既登録アイテムは薄くして選択不可に */
.cmp-suggest-item.disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}
.cmp-suggest-item.disabled:hover {
  background: transparent;
}
.cmp-suggest-item .badge-registered {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 100px;
  background: var(--accent-soft, #eef4ff);
  border: 1px solid var(--border, #d6e3ff);
  color: var(--accent, #0a66c2);
  font-weight: 700;
  font-size: 0.8rem;
}

/* 入力内のアイコン配置（base.cssのトップバー検索に準拠） */
.cmp-searchbox .search-icon {
  position: absolute;
  left: 10px;
  font-size: 16px;
  color: var(--muted, #6b7280);
  pointer-events: none;
}
.cmp-searchbox .clear-btn {
  position: absolute;
  right: 6px;
  display: none; /* 初期は非表示、入力時に表示 */
  align-items: center;
  justify-content: center;
  width: 32px; /* 視覚はアイコンのみ、ヒットエリアは十分に */
  height: 32px;
  padding: 0; /* 汎用ボタンスタイルを打ち消す */
  min-width: 0; /* 汎用のmin-widthを打ち消す */
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--muted, #6b7280); /* アイコン色 */
  font-size: 16px; /* アイコンサイズ */
  line-height: 1;
  cursor: pointer;
}
.cmp-searchbox .clear-btn:hover {
  background: transparent; /* 背景は変えない */
  color: var(--text, #374151); /* わずかに濃く */
  transform: none; /* 汎用ホバーの浮き上がりを無効化 */
  box-shadow: none;
}

/* 銘柄カード群 */

/* --- 比較画面ヘッダ領域 --- */
.cmp-head {
  margin: 8px 0;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #f8f9fb);
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  box-shadow: 0 2px 10px var(--shadow, rgba(0, 0, 0, 0.06));
}
.cmp-head-title {
  font-size: 18px; /* モバイルは控えめに */
  font-weight: 700;
  margin: 8px 0;
  color: var(--text, #234);
  text-align: center;
}
.cmp-head-cards {
  display: flex;
  gap: 12px; /* モバイルは間隔を詰める */
  margin-bottom: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 980px;
}
.cmp-card {
  position: relative;
  min-width: 150px; /* モバイルは小さめ */
  max-width: 180px;
  padding: 12px 10px;
  border: 1.5px solid var(--border, #234);
  border-radius: 8px;
  background: var(--surface-1, #fff);
  text-align: center;
  box-shadow: 0 2px 8px var(--shadow, rgba(0, 0, 0, 0.06));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cmp-card-empty {
  opacity: 0.5;
  color: var(--muted, #666);
  opacity: 0.55;
  cursor: default;
  pointer-events: none; /* クリック反応を完全に無効化 */
  font-weight: 700;
  color: var(--text, #111);
  text-decoration: none;
}
.cmp-card-name a:hover {
  text-decoration: underline;
}
.cmp-card-remove {
  position: absolute;
  right: 10px;
  top: 0px;
  color: var(--muted, #234);
  text-decoration: none;
  font-size: 1.5em;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
  z-index: 1;
}
.cmp-card-remove:hover {
  color: var(--accent, #c00);
}
.cmp-card-name {
  margin: 12px 0 6px 0;
  font-size: 1em; /* モバイルは少し小さく */
  text-align: center;
}
.cmp-card-meta {
  color: var(--muted, #666);
  font-size: 0.97em;
  margin-bottom: 8px;
  text-align: center;
}

/* ここから比較テーブル本体 */
/* ラッパー: 横スクロール可能に */
.cmp-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}
/* テーブル基本 */
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.cmp-table th,
.cmp-table td {
  border: 1px solid var(--border, #d4d7de);
  padding: 10px 12px;
  vertical-align: middle;
  background: var(--surface-1, #fff);
  width: max-content;
}
.cmp-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2, #f8f9fb);
}

/* 全ての見出し列を固定 */
.cmp-col-label {
  position: sticky;
  left: 0;
  background: var(--surface-2, #f8f9fb);
  z-index: 1;
  white-space: nowrap; /* 中身の横幅に応じた最小幅に固定 */
  width: 1%; /* テーブルレイアウト上、最小限の幅を確保して拡張しない */
  font-weight: 700;
}

/* 「銘柄名」(thead)の行 */
.cmp-col-brand {
  min-width: 220px;
}
.cmp-col-empty {
  min-width: 180px;
  color: var(--muted, #888);
  text-align: center;
}

/* 写真(プレースホルダ) */
.cmp-photo {
  width: 140px;
  height: 140px;
  background: var(--surface-2, #f0f2f5);
  border: 1px dashed var(--border, #c8ccd4);
  border-radius: 4px;
  margin: 0 auto;
}

/* セル共通 */
.cmp-cell {
  text-align: left;
}
.cmp-cell.name {
  font-weight: 700;
}
.cmp-cell.price {
  font-weight: 700;
  color: var(--accent, #2a7);
}

/* タグ共通（; 区切りの値たち） */
.cmp-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmp-tags li {
  background: var(--surface-2, #fafdff);
  border: 1px solid var(--border, #e0e6ef);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.95em;
  color: var(--text, inherit);
}

/* ===================- タブレット用（768px以上）======================== */
@media screen and (min-width: 768px) {
  .cmp-add-form {
    margin: 16px 50px 12px; /* 既存のデスクトップ寄り余白を復元 */
  }
  .cmp-head-title {
    font-size: 22px; /* タブレット以上で元のサイズに */
    margin: 10px 0;
  }
  .cmp-head-cards {
    gap: 16px; /* 余白を広げる */
  }
  .cmp-card {
    min-width: 180px;
    max-width: 220px;
    padding: 18px 12px;
    border-width: 2px;
  }
  .cmp-card-name {
    font-size: 1.12em; /* タブレット以上で読みやすく */
  }
}

/* ======================= PC用（1024px以上）======================== */
@media screen and (min-width: 1024px) {
  .cmp-head-title {
    font-size: 24px; /* PCでは見出しをやや大きく */
  }
  .cmp-head-cards {
    gap: 20px; /* PCではさらに余白を広げる */
  }
}