/*
 * 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: wrap;
}
.chips { display: flex; gap: 8px; }
.chip {
  /* button要素の既定styleを打ち消し原本<div>チップと一致させる */
  appearance: none;
  margin: 0;
  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; }
}