/* Archipela SEO — サービス個別スタイル
 * ブランド共通のデザインシステムを読み込み、SEOツール固有の
 * コンポーネント（コード出力・SERPプレビュー・キーワード表など）を追加する。 */
@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; }

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

/* 入力用フルワイド要素 */
.seo-input, .seo-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ks-border);
  border-radius: 10px; font-size: 0.95rem; font-family: inherit;
}
textarea.seo-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.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; }

/* ---------- SEO固有：生成コード出力 ---------- */
/* <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;
}

/* ---------- SEO固有：SERPプレビュー ---------- */
/* 検索結果の見た目を再現するコンテナ。 */
.serp {
  background: var(--ks-card); border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius); padding: 16px 18px; max-width: 600px;
}
/* .serp-title / .serp-url / .serp-desc の色は実際の検索結果の色を
   意図的に再現するリテラル（ブランドトークン外）。 */
.serp-title {
  color: #1a0dab;               /* Google のリンク青 */
  font-size: 1.15rem; line-height: 1.3; font-weight: 400; margin-bottom: 3px;
}
.serp-title:hover { text-decoration: underline; cursor: pointer; }
.serp-url {
  color: #006621;               /* Google の URL 緑 */
  font-size: 0.82rem; margin-bottom: 3px; word-break: break-all;
}
.serp-desc {
  color: #4d5156;               /* Google のスニペット灰 */
  font-size: 0.88rem; line-height: 1.57;
}
/* Yahoo! JAPAN 風バリアント（パレット外の実SERP色） */
.serp--yahoo .serp-title { color: #2a44c0; }   /* Yahoo のタイトル青紫 */
.serp--yahoo .serp-url { color: #4b7d5a; }     /* Yahoo の URL 灰緑 */

/* ---------- SEO固有：キーワード密度表 ---------- */
.kw-table { width: 100%; border-collapse: collapse; }
.kw-table th, .kw-table td { padding: 8px 10px; border-bottom: 1px solid var(--ks-border); }
.kw-table th {
  text-align: left; background: var(--ks-indigo-soft); font-weight: 700; font-size: 0.9rem;
}
.kw-table td { font-size: 0.9rem; }
.kw-table tbody tr:nth-child(even) { background: var(--ks-card-2); }

/* ---------- SEO固有：統計タイル ---------- */
.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; }

/* ---------- SEO固有：タグ / チップ ---------- */
.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; }
  .seo-layout { gap: 16px; }
  .serp { padding: 14px 14px; }
}