/* compare.css — AIモデル比較ページ専用
   地・影・文字色は tokens.css をそのまま使う（このページ用に色を発明しない）。
   モデルバッジの4色だけが新規。いずれも白文字を載せて 4.5:1 以上を実測して選んでいる。 */

/* ── ヘッダー：戻るボタンを右に置く ───────────────── */
.cmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex: 0 0 auto;
}
.btn-ico {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmp-main { padding-block: var(--s-5) var(--s-6); }

/* ── カルーセル ───────────────────────────────── */
.cmp-stage { margin-bottom: var(--s-6); }

.cmp-viewport {
  position: relative;
  margin-inline: auto;
  width: min(100%, 460px);
  aspect-ratio: 9 / 16;
  background: var(--nm-sunk);
  box-shadow: var(--nm-in);
  overflow: hidden;
}
.cmp-track { position: absolute; inset: 0; margin: 0; }
.cmp-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 320ms ease;
}
.cmp-slide.is-on { opacity: 1; }
.cmp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

/* ── 左下のモデル名バッジ（色付き背景＋白抜き）───────── */
.cmp-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 4色。すべて白文字とのコントラストを実測（AA 4.5:1 以上） */
.cmp-badge-flux { background: #3B4A7A; }   /* 白文字 8.35:1 */
.cmp-badge-nano { background: #2F6E4E; }   /* 白文字 5.44:1 */
.cmp-badge-seed { background: #8E4F63; }   /* 白文字 6.09:1（tokens の accent-deep と同値） */
.cmp-badge-gpt  { background: #1F6F6B; }   /* 白文字 5.34:1 */

/* ── 左右送り ───────────────────────────────── */
.cmp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(43, 36, 39, .18);
  transition: background .15s, transform .15s;
}
.cmp-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cmp-arrow:hover { background: #fff; }
.cmp-arrow:active { transform: translateY(-50%) scale(.94); }
.cmp-prev { left: 10px; }
.cmp-next { right: 10px; }

/* ── ドットと枚数 ─────────────────────────────── */
.cmp-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 0;
}
.cmp-dot {
  /* 見た目は9pxの点のまま、当たり判定だけ48×48pxを確保する。
     正本の「小さく見せたい要素は padding で確保」に従う */
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
  display: grid;
  place-items: center;
}
.cmp-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nm-dark);
  transition: background .15s, transform .15s;
}
.cmp-dot.is-on::before { background: var(--accent-deep); transform: scale(1.25); }

.cmp-counter {
  margin-top: var(--s-2);
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}

/* ── 説明パネル ───────────────────────────────── */
.cmp-panel {
  background: var(--nm-bg);
  box-shadow: var(--nm-up);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.cmp-h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.cmp-h3 {
  margin-top: var(--s-5);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-2);
}

.cmp-spec { margin-top: var(--s-4); display: grid; gap: 1px; background: var(--line); }
.cmp-spec > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--s-3);
  background: var(--nm-bg);
  padding: 10px var(--s-2);
}
.cmp-spec dt { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; }
.cmp-spec dd { margin: 0; font-size: 13px; line-height: 1.9; color: var(--ink); }

.cmp-note { margin-top: var(--s-2); font-size: 12px; color: var(--ink-3); }

.cmp-prompt {
  margin: var(--s-3) 0 0;
  max-height: 40vh;
  overflow: auto;
  background: var(--nm-sunk);
  box-shadow: var(--nm-in-sm);
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 表（狭い画面では横スクロール）───────────────── */
.cmp-table-wrap { margin-top: var(--s-3); overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 460px; }
.cmp-table th, .cmp-table td {
  padding: 10px var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cmp-table th { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; white-space: nowrap; }
.cmp-table td { color: var(--ink); }

.cmp-chip {
  display: inline-block;
  padding: 4px 10px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cmp-facts { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.cmp-facts li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--ink-2);
}
.cmp-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 5px;
  height: 5px;
  background: var(--accent-deep);
}

.cmp-cta { margin-top: var(--s-5); text-align: center; }
.btn-primary {
  display: inline-block;
  text-decoration: none;
  background: var(--accent-deep);
  color: #fff;
  border: none;
  padding: 12px 26px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--r-btn, 12px);
  box-shadow: var(--nm-up-sm);
}
.btn-primary:hover { background: var(--accent-dark); }

@media (max-width: 600px) {
  .cmp-panel { padding: var(--s-4); }
  .cmp-spec > div { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-2); }
  /* ★タップ領域は 48×48px を下回らない（正本 WEB_PRODUCTION_BASICS §UI規格）。
     見た目を小さくしたい時も、寸法ではなく中の矢印を小さくして調整する */
  .cmp-arrow { width: 48px; height: 48px; }
  .cmp-arrow svg { width: 18px; height: 18px; }
  .cmp-prev { left: 6px; }
  .cmp-next { right: 6px; }
}

/* モデル別プロンプトの切り替え表示（カルーセルと連動） */
.cmp-pp { display: none; }
.cmp-pp.is-on { display: block; }
.cmp-pp-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
}
.cmp-pp-meta { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.cmp-ep { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ── スタイル切り替えタブ（5種）── 2026-09-06 追加 */
.cmp-styletabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.cmp-styletab {
  background: var(--nm-bg);
  box-shadow: var(--nm-up-sm);
  border: none;
  border-radius: var(--r-chip, 999px);
  min-height: 48px;
  padding: 10px 18px;
  font-size: 12.5px;
  color: var(--ink-2);
  transition: color .15s, background .15s;
}
.cmp-styletab:hover { color: var(--accent-deep); }
.cmp-styletab.is-on {
  background: var(--accent-deep);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--nm-in-sm);
}

.cmp-pane { margin-bottom: var(--s-6); }
.cmp-pane .cmp-panel { margin-top: var(--s-5); }
.cmp-why {
  margin-top: var(--s-3);
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--ink-2);
}
.cmp-summary { margin-top: var(--s-6); }

@media (max-width: 600px) {
  .cmp-styletab { font-size: 11.5px; padding: 10px 14px; min-height: 48px; }
}

/* ── 戻るボタンは中央（2026-09-06 岩田さん指示）───────── */
.cmp-head { display: block; text-align: center; }
.cmp-backrow { display: flex; justify-content: center; padding-bottom: var(--s-4); }

/* ── スタイル選択：数が増えることを前提にする ─────────
   正本 UI_PARTS_CATALOG「セレクト｜ネイティブ／カスタム（SPはネイティブ推奨）」
   SP＝ネイティブselect（選択肢が何個に増えても縦の場所を食わない・OS標準の操作）
   PC＝タブ（一覧性が価値になる幅なので残す）。900px を境に入れ替える。 */
.cmp-picker { margin-bottom: var(--s-5); }
.cmp-picker-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.cmp-select-wrap { position: relative; max-width: 460px; }
.cmp-select {
  width: 100%;
  min-height: 48px;
  padding: 0 44px 0 16px;
  background: var(--nm-bg);
  box-shadow: var(--nm-in-sm);
  border: none;
  border-radius: var(--r-chip, 999px);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.cmp-select-ico {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cmp-styletabs { display: none; }

@media (min-width: 900px) {
  .cmp-picker-label, .cmp-select-wrap { display: none; }
  .cmp-styletabs { display: flex; }
}

/* ── 表：スタイル名を4行くり返すと、狭い画面で1文字ずつ縦積みになる。
      スタイルごとの見出し行にして、列から外した（2026-09-06 改修）── */
.cmp-grouprow th {
  background: var(--nm-sunk);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 10px var(--s-3);
  text-align: left;
  white-space: nowrap;
}
.cmp-table { min-width: 380px; }
.cmp-table td:first-child { white-space: nowrap; }