/*
 * choiwaza TOPページ スタイル
 * tools.html（artifacts/doms/tools_template.html 2980-3041行）のインラインstyleを
 * クラス化したもの。数値・色は原本と完全一致させること。
 */

body { margin: 0; }

.page {
  --accent: oklch(0.55 0.14 250);
  min-height: 100vh;
  background: oklch(0.965 0.005 250);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding: 64px 24px 96px;
  box-sizing: border-box;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
}

/* ---- header ---- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font: 700 24px 'Space Mono', monospace;
  color: oklch(0.3 0.02 250);
}
.tagline {
  font: 400 12.5px 'Zen Kaku Gothic New', sans-serif;
  color: oklch(0.5 0.02 250);
}

/* ---- search ---- */
.search-box {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid oklch(0.86 0.012 250);
  border-radius: 10px;
  padding: 17px 20px;
  box-shadow: 0 1px 3px rgba(20, 40, 80, .05);
}
.search-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex: none;
}
.tool-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: 400 15px 'Zen Kaku Gothic New', sans-serif;
  color: oklch(0.25 0.02 250);
}
.tool-search::placeholder { color: oklch(0.62 0.02 250); }
.search-icon {
  /* ユーザ指示（2026-07-05）: ⌘K バッジの代わりに検索アイコンを表示 */
  width: 16px;
  height: 16px;
  color: oklch(0.55 0.02 250);
  flex: none;
}

/* ---- filter row ---- */
.filter-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap; /* PC/タブレット(601px+): カウンタを折り返させず右端に固定。600px以下は display:block で下段配置 */
}
.chips {
  display: flex;
  gap: 8px;
  /* チップ増加へのレスポンシブ対応（2026-07-18 ユーザ指示）: 折返さず1行の横スクロールにする */
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox: スクロールバー非表示（チップ列の標準的UI） */
}
.chips::-webkit-scrollbar { display: none; } /* Chrome/Safari: 同上 */
.chip {
  /* button要素の既定styleを打ち消し原本<div>チップと一致させる */
  appearance: none;
  margin: 0;
  /* 縮小・折返しを禁止しピル型の形状を維持（横スクロール前提） */
  flex: none;
  white-space: nowrap;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12.5px;
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color .15s;
  font-weight: 400;
  color: oklch(0.4 0.02 250);
  background: #fff;
  border: 1px solid oklch(0.86 0.012 250);
}
.chip.active {
  font-weight: 500;
  color: #fff;
  background: oklch(0.35 0.03 250);
  border: 1px solid oklch(0.35 0.03 250);
}
.counter {
  font: 400 12px 'Space Mono', monospace;
  color: oklch(0.55 0.02 250);
}

/* ---- grid / card ---- */
.grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card {
  background: #ffffff;
  border: 1px solid oklch(0.9 0.008 250);
  border-radius: 11px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-decoration: none;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(40, 70, 130, .1);
  transform: translateY(-2px);
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 14px;
}
.card-code {
  font: 700 11px 'Space Mono', monospace;
  color: var(--accent);
}
.card-en {
  font: 400 10px 'Space Mono', monospace;
  letter-spacing: .04em;
  color: oklch(0.68 0.02 250);
}
.card-name {
  font: 500 16px 'Zen Kaku Gothic New', sans-serif;
  color: oklch(0.25 0.02 250);
}
.card-desc {
  font: 400 12.5px/1.6 'Zen Kaku Gothic New', sans-serif;
  color: oklch(0.52 0.02 250);
}

/* ---- no results ---- */
.no-results {
  margin-top: 64px;
  text-align: center;
  font: 400 14px 'Zen Kaku Gothic New', sans-serif;
  color: oklch(0.55 0.02 250);
}

/* ---- footer ---- */
.site-footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid oklch(0.9 0.008 250);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-en {
  font: 400 12px 'Space Mono', monospace;
  color: oklch(0.6 0.02 250);
}
.footer-ja {
  font: 400 12px 'Zen Kaku Gothic New', sans-serif;
  color: oklch(0.6 0.02 250);
}

/* ---- responsive（要件4.7: PC/タブレット/スマホ対応。原本は3列固定のため狭幅のみ変更）---- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  /* ユーザ指示（2026-07-18）: スマホではカウンタをチップの1行下（右寄せ）に置き、
     チップのスクロール領域をコンテナ全幅に広げる（PC/タブレットは同一行のまま） */
  .filter-row { display: block; }
  .chips { flex: none; min-width: unset; } /* blockコンテキストでは flex:1/min-width:0 が無効のため明示リセット */
  .counter { margin-top: 8px; text-align: right; }
}