/* ============================================================
  mnc-company-search — スタイル（全クラス mnc- で名前空間化）
  テーマCSSに依存しない自己完結スタイル。Academia 等と衝突しない。
  配色: ニュートラル + 製造業らしいネイビー系アクセント。
============================================================ */

/* 変数（このモジュール内スコープ） */
.mnc-filter,
.mnc-company-list,
.mnc-company-list__empty {
  --mnc-accent: #1a3d6d;
  --mnc-line: #e3e6ea;
  --mnc-ink: #1f2733;
  --mnc-muted: #5b6472;
}

/* --- 非表示制御（JS が hidden 属性を付与） --- */
.mnc-company-list__item[hidden] { display: none !important; }
.mnc-company-list__empty[hidden] { display: none; }

/* ============ フィルタ UI ============ */
.mnc-filter {
  background: #f7f8fa;
  border: 1px solid var(--mnc-line);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 0 28px;
}

.mnc-filter__group { border: 0; padding: 0; margin: 0 0 16px; }
.mnc-filter__group:last-of-type { margin-bottom: 0; }

.mnc-filter__legend {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--mnc-accent);
  letter-spacing: .03em;
  margin: 0 0 10px;
  padding: 0;
}

/* チェックボックスをチップ表示に */
.mnc-filter__label {
  display: inline-flex;
  align-items: center;
  margin: 0 8px 8px 0;
  padding: 7px 15px;
  border: 1px solid #d5d9df;
  border-radius: 999px;
  background: #fff;
  color: var(--mnc-ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.mnc-filter__label:hover { border-color: var(--mnc-accent); }
/* 選択中（:has でチップ全体を反転） */
.mnc-filter__label:has(input:checked) {
  background: var(--mnc-accent);
  border-color: var(--mnc-accent);
  color: #fff;
}
/* ネイティブ checkbox は視覚的に隠す（label クリックで切替） */
.mnc-filter__label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
/* :has 非対応ブラウザ向けフォールバック（チェックを小さく表示） */
@supports not (selector(:has(*))) {
  .mnc-filter__label input[type="checkbox"] {
    position: static; opacity: 1; width: auto; height: auto; margin-right: 6px;
  }
}

/* --- ツールバー: 件数 + リセット --- */
.mnc-filter__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--mnc-line);
}
.mnc-filter__count {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mnc-ink);
}
.mnc-filter__reset {
  margin-left: auto;
  cursor: pointer;
  padding: 8px 18px;
  border: 1px solid #cfd4da;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--mnc-muted);
  transition: border-color .15s, color .15s;
}
.mnc-filter__reset:hover { border-color: var(--mnc-accent); color: var(--mnc-accent); }

/* ============ 一覧グリッド ============ */
.mnc-company-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.mnc-company-list__item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mnc-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mnc-company-list__item:hover {
  box-shadow: 0 8px 24px rgba(20, 35, 60, .10);
  transform: translateY(-2px);
}
/* カード画像は企業ロゴを想定（企業情報掲載イメージ①準拠）。
   ロゴは縦横比がまちまちで cover だと切れてしまうため contain にし、
   余白を取って中央に置く。写真を入れた場合も破綻しない。 */
.mnc-company-list__img { overflow: hidden; background: #f2f5f8; }
.mnc-company-list__img img {
  display: block;
  box-sizing: border-box;   /* padding で幅がはみ出さないように */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: 18px 22px;
  background: #fff;
}
.mnc-company-list__noimg {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef1f4, #dfe4ea);
}
.mnc-company-list__text {
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto;   /* タグ数が違ってもボタン位置が揃うように */
}
.mnc-company-list__more { margin-top: auto; }
.mnc-company-list__area { font-size: 12px; color: var(--mnc-muted); }
.mnc-company-list__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--mnc-ink);
  text-decoration: none;
  line-height: 1.4;
}
.mnc-company-list__title:hover { color: var(--mnc-accent); }
.mnc-company-list__intro {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--mnc-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* タグ下に余白を確保し、「詳細を見る」ボタンが詰まって見えないようにする
   （ボタンは margin-top:auto で下端に揃うため、ここで最小の間隔を担保する） */
.mnc-company-list__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; margin-bottom: 14px; }
.mnc-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  background: #eef2f7;
  color: var(--mnc-accent);
}
/* 「詳細を見る」はボタンデザイン（イメージ資料①準拠）。
   margin-top:auto でカード下端に揃うため、紹介文の長さが違っても位置が一致する。 */
.mnc-company-list__more {
  display: block;
  margin-top: auto;
  padding: 11px 14px;
  border: 1px solid var(--mnc-accent);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--mnc-accent);
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mnc-company-list__more:hover {
  background: var(--mnc-accent);
  color: #fff;
  text-decoration: none;
}

/* --- 該当なし --- */
.mnc-company-list__empty {
  margin: 8px 0;
  padding: 40px 20px;
  text-align: center;
  font-size: 15px;
  color: var(--mnc-muted);
  background: #f7f8fa;
  border: 1px dashed var(--mnc-line);
  border-radius: 12px;
}

/* ============ レスポンシブ ============ */
@media screen and (max-width: 600px) {
  .mnc-filter { padding: 18px; }
  .mnc-company-list { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mnc-company-list__text { padding: 12px 12px 14px; }
  .mnc-company-list__title { font-size: 15px; }
}
@media screen and (max-width: 380px) {
  .mnc-company-list { grid-template-columns: 1fr; }
}

/* スマホでの絞り込みチップ・ボタンのタップ領域を広げる */
@media screen and (max-width: 768px) {
  .mnc-filter__label { min-height: 44px; display: inline-flex; align-items: center; }
  #mnc-filter-reset { min-height: 44px; }
  .mnc-company-list__title { display: inline-block; padding: 6px 0; }
}

/* キーボード操作時に、いまどの絞り込み項目にいるかが分かるようにする。
   チェックボックス本体は1×1pxで隠しているため、ラベル側に枠を出す。
   （これが無いと、Tabで移動しても画面上の変化が一切なかった） */
.mnc-filter__label:has(input:focus-visible) {
  outline: 2px solid var(--a, #1a3d6d);
  outline-offset: 2px;
}