/* =============================================================
 * 案件情報テーブル 記事部品（オファーウォール）
 * 神ゲー攻略 Wiki 用 カスタムCSS部品
 * v4.6 / 2026-08-03
 *
 * 設計方針
 * - すべて .kgow 名前空間の配下。裸タグセレクタは使用しない。
 * - kg_* クラスは再定義しない（サイトCSSと競合させない）。
 * - サイト側の .article table 等に負けないよう .kgow を必ず前置し詳細度を確保。
 * - 事業者切り替えは .kgow--zucks / .kgow--gmo のCSS変数のみ。
 * ============================================================= */

.kgow {
  /* 事業者アクセント（既定＝Zucks系ブルー） */
  --kgow-accent: #2f6fed;
  --kgow-accent-weak: #eaf1fe;
  /* 共通トーン */
  --kgow-ink: #23293a;
  --kgow-sub: #6b7488;
  --kgow-line: #e2e6ec;
  --kgow-bg: #f6f8fa;
  --kgow-point: #e0521c;
  --kgow-time: #12795a;

  box-sizing: border-box;
  border: 1px solid var(--kgow-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kgow-ink);
}
.kgow *,
.kgow *::before,
.kgow *::after { box-sizing: border-box; }

/* 事業者別アクセント */
.kgow.kgow--zucks { --kgow-accent: #2f6fed; --kgow-accent-weak: #eaf1fe; }
.kgow.kgow--gmo   { --kgow-accent: #0f8f86; --kgow-accent-weak: #e6f5f3; }

/* ---------- エラー時の見出し（データが取れなかった場合のみ表示） ---------- */
.kgow .kgow__error {
  margin: 0;
  padding: 10px 12px;
  background: #fdf1ec;
  color: #c04a18;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- ヒーロー（アイコン＋達成条件＋バッジ） ---------- */
.kgow .kgow__hero {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--kgow-line);
}
.kgow .kgow__icon {
  flex: none;
  width: 56px;
  height: 56px;
  max-width: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--kgow-line);
}
.kgow .kgow__heroBody { flex: 1; min-width: 0; }
.kgow .kgow__cond {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.kgow .kgow__condLabel {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--kgow-accent-weak);
  color: var(--kgow-accent);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}
/* バッジは div/span で組みます。
 * ul/li だと記事本文の箇条書きスタイル（マーカー等）がサイト側CSSから当たり、
 * 名前空間側の list-style では打ち消せないためです。 */
.kgow .kgow__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.kgow .kgow__badge {
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--kgow-line);
  border-radius: 999px;
  background: var(--kgow-bg);
  color: var(--kgow-sub);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.kgow .kgow__badge--os    { border-color: #cfd6e0; background: #fff; color: var(--kgow-ink); }
.kgow .kgow__badge--alert { border-color: #f3d2c6; background: #fdf1ec; color: #c04a18; }

/* ---------- 指標タイル（獲得ポイント／所要日数） ---------- */
.kgow .kgow__metrics {
  display: flex;
  gap: 8px;
  padding: 12px;
}
.kgow .kgow__metric {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--kgow-bg);
  border: 1px solid var(--kgow-line);
}
.kgow .kgow__metricLabel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--kgow-sub);
}
.kgow .kgow__metricValue {
  display: block;
  margin-top: 1px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  /* word-break は指定しません。break-all だと "658,108" が桁の途中で折れます */
}
.kgow .kgow__metricValue .kgow__unit {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
}
.kgow .kgow__metricSub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--kgow-sub);
}
.kgow .kgow__metric--point { background: #fdf3ee; border-color: #f4dcd0; }
.kgow .kgow__metric--point .kgow__metricValue { color: var(--kgow-point); }
.kgow .kgow__metric--point .kgow__metricSub   { color: var(--kgow-point); }
.kgow .kgow__metric--time  { background: #eff8f4; border-color: #cfe8dd; }
.kgow .kgow__metric--time .kgow__metricValue  { color: var(--kgow-time); }

/* ---------- 詳細テーブル ---------- */
.kgow .kgow__table {
  width: 100%;
  margin: 0;
  border: 0;
  /* 指標タイルとの境界に、他と同じ濃さの罫線を1本引く */
  border-top: 1px solid var(--kgow-line);
  border-collapse: collapse;
  background: #fff;
}
.kgow .kgow__table th,
.kgow .kgow__table td {
  padding: 8px 11px;
  border: 0;
  border-top: 1px solid var(--kgow-line);
  font-size: 12px;
  text-align: left;
  vertical-align: top;
}
.kgow .kgow__table tr:first-child th,
.kgow .kgow__table tr:first-child td { border-top: 0; }
.kgow .kgow__table th {
  width: 38%;
  background: var(--kgow-bg);
  color: var(--kgow-sub);
  font-weight: 700;
  white-space: nowrap;
}
.kgow .kgow__table td { background: #fff; }
.kgow .kgow__strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--kgow-point);
}
.kgow .kgow__yen {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--kgow-sub);
}

/* ---------- 成果ステップ ---------- */
.kgow .kgow__steps { border-top: 1px solid var(--kgow-line); }
.kgow .kgow__stepsHead {
  margin: 0;
  padding: 8px 12px;
  background: var(--kgow-bg);
  color: var(--kgow-sub);
  font-size: 12px;   /* テーブルの th と同サイズ */
  font-weight: 700;
  text-align: center;
}
.kgow .kgow__step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border-top: 1px solid var(--kgow-line);
  background: #fff;
  font-size: 12px;
}
.kgow .kgow__stepNo {
  flex: none;
  align-self: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kgow-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}
.kgow .kgow__stepName { flex: 1; min-width: 0; }
.kgow .kgow__stepPt {
  flex: none;
  font-weight: 800;
  color: var(--kgow-point);
}
.kgow .kgow__stepTime {
  flex: none;
  min-width: 64px;
  text-align: right;
  font-size: 11px;
  color: var(--kgow-sub);
}

/* ---------- CTA ---------- */
.kgow .kgow__cta {
  display: block;
  margin: 0;
  padding: 11px 14px;
  background: var(--kgow-accent);
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
}

/* ---------- 注記 ---------- */
.kgow .kgow__note {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--kgow-line);
  background: var(--kgow-bg);
  color: var(--kgow-sub);
  font-size: 11px;
  line-height: 1.6;
}

/* ---------- スマホ最適化 ---------- */
/* 指標タイルはスマホでも横並びを維持します（縦積みにしません）。
 * 狭い幅で収まるよう、余白と文字サイズだけ段階的に落とします。 */
@media screen and (max-width: 480px) {
  .kgow .kgow__hero { padding: 10px; }
  .kgow .kgow__icon { width: 48px; height: 48px; max-width: 48px; }
  .kgow .kgow__metrics { padding: 10px; gap: 6px; }
  .kgow .kgow__metric { padding: 8px 9px; }
  .kgow .kgow__metricLabel { font-size: 10px; }
  .kgow .kgow__metricValue { font-size: 19px; }
  .kgow .kgow__metricValue .kgow__unit { font-size: 12px; }
  .kgow .kgow__metricSub { font-size: 11px; }
  .kgow .kgow__table th { width: 34%; white-space: normal; }
  .kgow .kgow__table th,
  .kgow .kgow__table td { padding: 7px 9px; font-size: 12px; }
  .kgow .kgow__step { padding: 6px 9px; gap: 6px; }
  .kgow .kgow__stepTime { min-width: auto; }
}

/* さらに狭い端末（iPhone SE 等）向けの微調整 */
@media screen and (max-width: 360px) {
  .kgow .kgow__metric { padding: 7px 8px; }
  .kgow .kgow__metricValue { font-size: 17px; }
  .kgow .kgow__metricSub { font-size: 10px; }
}