/* Dev ツール — サービス個別スタイル
 * ブランド共通のデザインシステムを読み込み、開発者ツール固有の
 * コンポーネント（コード出力・入出力レイアウト・キー/値テーブルなど）を追加する。 */
@import url("../../shared/kit.css");

/* 旧トークン名のエイリアス（ページ内インラインスタイルとの後方互換） */
:root {
  --primary: var(--ks-indigo);
  --primary-dark: var(--ks-indigo-deep);
  --primary-light: var(--ks-indigo-soft);
  --text: var(--ks-ink);
  --text-sub: var(--ks-ink-sub);
  --bg: var(--ks-paper);
  --card-bg: var(--ks-card);
  --border: var(--ks-border);
  --danger: var(--ks-danger);
  --success: var(--ks-success);
  --radius: var(--ks-radius);
  --shadow: var(--ks-shadow);
  --shadow-lg: var(--ks-shadow-lg);
}

/* ---------- ツールページ共通 ---------- */
.tool-main { padding: 40px 0 56px; }
.tool-head { text-align: center; margin-bottom: 28px; }
.tool-head h1 { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800; margin-bottom: 8px; }
.tool-head p { color: var(--ks-ink-sub); max-width: 640px; margin: 0 auto; }

/* パンくず */
.breadcrumb { font-size: 0.82rem; color: var(--ks-ink-sub); margin-bottom: 6px; }
.breadcrumb a { color: var(--ks-ink-sub); }
.breadcrumb a:hover { color: var(--ks-indigo); }

/* パネル */
.panel {
  background: var(--ks-card); border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--ks-shadow);
}
.panel h2 { font-size: 1.05rem; margin-bottom: 12px; }

/* オプションフォーム */
.opt-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px;
}
.opt-row:last-child { margin-bottom: 0; }
.opt-row label { font-size: 0.9rem; font-weight: 600; }
.opt-row select, .opt-row input[type="text"], .opt-row input[type="number"],
.opt-row input[type="url"], .opt-row input[type="password"] {
  padding: 8px 10px; border: 1px solid var(--ks-border); border-radius: 8px;
  font-size: 0.9rem; font-family: inherit;
}
.opt-row input[type="range"] { vertical-align: middle; }
.opt-row input[type="color"] {
  width: 40px; height: 32px; border: 1px solid var(--ks-border);
  border-radius: 6px; padding: 2px; background: #fff; cursor: pointer;
}

.actions { text-align: center; margin-top: 20px; }

/* ---------- Dev固有：入出力レイアウト ---------- */
/* 広い画面では 2 カラム（入力 | 出力）、モバイルでは 1 カラムに折り返す。 */
.io-layout {
  display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px;
}
@media (min-width: 860px) {
  .io-layout { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* 入力用フルワイド要素 */
.dev-input, .dev-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ks-border);
  border-radius: 10px; font-size: 0.95rem; font-family: inherit;
}
textarea.dev-textarea {
  min-height: 160px; resize: vertical; line-height: 1.6;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.dev-io { width: 100%; }
.field-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.seo-hint { font-size: 0.82rem; color: var(--ks-ink-sub); margin-top: 6px; }

/* ---------- Dev固有：生成コード出力 ---------- */
/* <textarea> と <pre> の両方に使う。等幅フォントの読み取り専用ブロック。 */
.code-output {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--ks-border); border-radius: 10px; padding: 14px;
  background: var(--ks-card-2); color: var(--ks-ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem; line-height: 1.6;
  overflow: auto; white-space: pre-wrap; word-break: break-word;
  min-height: 180px;
}
textarea.code-output { resize: vertical; }

/* コピー / ダウンロードボタンの小さな横並び */
.copy-bar {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 8px 0; flex-wrap: wrap;
}

/* ---------- Dev固有：等幅ヘルパー ---------- */
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

/* 結果 / エラー行 */
.result-line {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem; line-height: 1.6; word-break: break-word;
}
.error-line {
  color: var(--ks-danger); font-size: 0.9rem; line-height: 1.6;
  margin-top: 6px; word-break: break-word;
}

/* カラーツール用の見本ボックス */
.swatch {
  width: 36px; height: 36px; border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-sm); display: inline-block; vertical-align: middle;
}

/* ---------- Dev固有：キー/値テーブル ---------- */
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table th, .kv-table td { padding: 8px 10px; border-bottom: 1px solid var(--ks-border); }
.kv-table th {
  text-align: left; background: var(--ks-indigo-soft); font-weight: 700; font-size: 0.9rem;
}
.kv-table td {
  font-size: 0.9rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  word-break: break-word;
}
.kv-table tbody tr:nth-child(even) { background: var(--ks-card-2); }

/* ---------- Dev固有：統計タイル ---------- */
.count-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
}
.count-tile {
  background: var(--ks-card-2); border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-sm); padding: 16px 12px; text-align: center;
}
.count-tile .num {
  font-size: 1.6rem; font-weight: 800; color: var(--ks-indigo); line-height: 1.1;
}
.count-tile .label { font-size: 0.8rem; color: var(--ks-ink-sub); margin-top: 4px; }

/* ---------- Dev固有：タグ / チップ ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ks-indigo-soft); color: var(--ks-indigo);
  border-radius: 999px; padding: 4px 10px; font-size: 0.82rem;
}
.chip button {
  border: none; background: transparent; color: var(--ks-indigo);
  font-weight: 700; cursor: pointer; line-height: 1; padding: 0;
}

@media (max-width: 600px) {
  .tool-head h1 { font-size: 1.4rem; }
  .io-layout { gap: 16px; }
}