/**
 * choiwaza 共通デザインCSS v1（要件 F006・設計 02_detailed-design.md §5）
 * 配信: https://cdn.choiwaza.net/v1/embed.css
 *
 * 各ツールページが <link rel="stylesheet"> で明示的に読み込み、
 * choiwaza TOPページ（tools.html 原本）とデザインを揃えるためのスタイル。
 * 数値・色は原本（artifacts/doms/tools_template.html 2980-3111行）由来で、
 * site/assets/style.css と同一値を cwz- 名前空間で提供する。
 *
 * 【CSP 注意】読み込むツールページ側の _headers で以下の許可が必要:
 *   style-src に https://cdn.choiwaza.net https://fonts.googleapis.com
 *   font-src  に 'self' https://fonts.gstatic.com
 *
 * 【役割分担】共通ヘッダー/フッター（.cwz-header/.cwz-footer）のスタイルは
 * embed.js がインライン注入するため本ファイルには含めない（二重管理を避ける）。
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* ---- デザイントークン ---- */
:root {
  --cwz-accent: oklch(0.55 0.14 250);
  --cwz-bg: oklch(0.965 0.005 250);
  --cwz-surface: #ffffff;

  --cwz-text: oklch(0.25 0.02 250);          /* 本文・入力文字 */
  --cwz-text-strong: oklch(0.3 0.02 250);    /* 見出し・ロゴ相当 */
  --cwz-text-muted: oklch(0.5 0.02 250);     /* タグライン相当 */
  --cwz-text-dim: oklch(0.52 0.02 250);      /* 説明文（カードdesc相当） */
  --cwz-text-faint: oklch(0.55 0.02 250);    /* カウンタ・補助表示相当 */
  --cwz-text-en: oklch(0.68 0.02 250);       /* 英字サブ表示（カードen相当） */
  --cwz-placeholder: oklch(0.62 0.02 250);
  --cwz-label: oklch(0.4 0.02 250);          /* チップ非活性文字 */

  --cwz-border: oklch(0.86 0.012 250);       /* 入力枠・チップ枠 */
  --cwz-border-light: oklch(0.9 0.008 250);  /* カード枠・区切り線 */

  --cwz-chip-active-bg: oklch(0.35 0.03 250);

  --cwz-font-body: 'Zen Kaku Gothic New', sans-serif;
  --cwz-font-mono: 'Space Mono', monospace;

  --cwz-radius-box: 10px;
  --cwz-radius-card: 11px;
  --cwz-radius-chip: 20px;

  --cwz-shadow-box: 0 1px 3px rgba(20, 40, 80, .05);
  --cwz-shadow-hover: 0 6px 18px rgba(40, 70, 130, .1);
}

/* ---- レイアウト ---- */
.cwz-page {
  min-height: 100vh;
  background: var(--cwz-bg);
  font-family: var(--cwz-font-body);
  padding: 64px 24px 96px;
  box-sizing: border-box;
  /* body に直接 .cwz-page を適用するケースの余白リセット（原本は body { margin: 0 } で代替） */
  margin: 0;
}
.cwz-container {
  max-width: 1040px;
  margin: 0 auto;
}

/* ---- カード ---- */
.cwz-card {
  background: var(--cwz-surface);
  border: 1px solid var(--cwz-border-light);
  border-radius: var(--cwz-radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.cwz-card { cursor: pointer; text-decoration: none; }
a.cwz-card:hover {
  border-color: var(--cwz-accent);
  box-shadow: var(--cwz-shadow-hover);
  transform: translateY(-2px);
}
.cwz-card-code {
  font: 700 11px var(--cwz-font-mono);
  color: var(--cwz-accent);
}
.cwz-card-en {
  font: 400 10px var(--cwz-font-mono);
  letter-spacing: .04em;
  color: var(--cwz-text-en);
}
.cwz-card-name {
  font: 500 16px var(--cwz-font-body);
  color: var(--cwz-text);
}
.cwz-card-desc {
  font: 400 12.5px/1.6 var(--cwz-font-body);
  color: var(--cwz-text-dim);
}

/* ---- チップ ---- */
.cwz-chip {
  appearance: none;
  margin: 0;
  font-family: var(--cwz-font-body);
  font-size: 12.5px;
  border-radius: var(--cwz-radius-chip);
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color .15s;
  font-weight: 400;
  color: var(--cwz-label);
  background: var(--cwz-surface);
  border: 1px solid var(--cwz-border);
}
.cwz-chip.cwz-active {
  font-weight: 500;
  color: #fff;
  background: var(--cwz-chip-active-bg);
  border: 1px solid var(--cwz-chip-active-bg);
}

/* ---- 検索/入力ボックス ---- */
.cwz-search-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cwz-surface);
  border: 1px solid var(--cwz-border);
  border-radius: var(--cwz-radius-box);
  padding: 17px 20px;
  box-shadow: var(--cwz-shadow-box);
}
.cwz-search-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--cwz-accent);
  flex: none;
}
.cwz-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: 400 15px var(--cwz-font-body);
  color: var(--cwz-text);
}
.cwz-input::placeholder { color: var(--cwz-placeholder); }
.cwz-search-icon {
  width: 16px;
  height: 16px;
  color: var(--cwz-text-faint);
  flex: none;
}

/* ---- ボタン（派生。原本 tools.html に該当UIはなく、チップ/検索ボックス様式から導出） ---- */
.cwz-btn {
  appearance: none;
  margin: 0;
  font: 500 14px var(--cwz-font-body);
  color: var(--cwz-label);
  background: var(--cwz-surface);
  border: 1px solid var(--cwz-border);
  border-radius: var(--cwz-radius-box);
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cwz-btn:hover {
  border-color: var(--cwz-accent);
  box-shadow: var(--cwz-shadow-box);
}
.cwz-btn-primary {
  color: #fff;
  background: var(--cwz-chip-active-bg);
  border-color: var(--cwz-chip-active-bg);
}