/* ============================================================
   お申し込み（！154 第1便・2026-08-28 新設）

   **寸法は実測に合わせてある**
   （他社の実測ログ）。
     ・左＝入力／右＝金額の2列        … Stripe 公式の見本
     ・内訳の行 14px/400、合計は 14px/600 … 同上。**合計は大きくせず、太くする**
     ・価格の数字を大きく、単位は小さく   … ロリポップ（40px/700 ＋「円/月〜」）

   手順バーの見た目は既存の `.step`（user.css）をそのまま使う。
   **ここで作り直さない。**
   ============================================================ */

/* ------------------------------------------------ 手順1：プランの並び */
.sb-plans{
  display:grid; gap:16px; list-style:none; padding:0;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.sb-plan{
  display:flex; flex-direction:column; gap:6px;
  padding:24px; background:var(--card);
  border:2px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.sb-plan-name{ font-size:var(--fs-lg); }
/* **数字を大きく、単位を小さく**（ロリポップ実測 40px/700）。
   こちらの本文は 14px なので、そのまま 40px だと浮く。**32px に落とす。**
   他社の値をそのまま持ってこない（ロゴのときと同じ失敗をしない）。 */
.sb-plan-price{ display:flex; align-items:baseline; gap:2px; }
.sb-plan-price em{ font-size:32px; font-weight:700; font-style:normal; line-height:var(--lh-tight); }
.sb-plan-unit{ font-size:var(--fs-sm); color:var(--ink-2); }
.sb-plan-tax{ font-size:var(--fs-sm); color:var(--ink-3); }
.sb-plan-note{ font-size:var(--fs-sm); color:var(--ink-2); }
.sb-plan .btn{ margin-top:auto; }

/* -------------------------------------------- 手順2・3：左入力／右金額 */
.sb-cols{ display:grid; gap:28px; grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
.sb-main{ min-width:0; }
.sb-side{ min-width:0; }
/* **入らなくなったら1列に畳む。**カード入力欄が潰れると入力できない。
   境界は決めた3つのうち 1024px を使う（tests_css_breakpoints）。
   768px まで2列を保つと、入力側が約380pxになりカード欄が窮屈になる。 */
@media (max-width:1024px){
  .sb-cols{ grid-template-columns:minmax(0,1fr); }
  .sb-side{ order:-1; }        /* 畳んだときは金額を先に見せる */
}

/* ------------------------------------------------------------ クーポン */
.sb-coupon{ margin-bottom:24px; }
.sb-coupon-lb{ display:block; font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:6px; }
.sb-coupon-row{ display:flex; gap:8px; flex-wrap:wrap; }
.sb-coupon-row .inp{ flex:1 1 200px; min-width:0; }
.sb-coupon-msg{ font-size:var(--fs-sm); margin-top:8px; }
.sb-coupon-msg[data-ok="1"]{ color:var(--green); font-weight:700; }
.sb-coupon-msg[data-ok="0"]{ color:var(--clay); font-weight:700; }

/* カード入力欄の器。**中身は Stripe の iframe。**高さは中身が決める。
   **中身が無いときは場所を取らせない。**出せなかったときに 220px の空白だけが
   残り、下の説明とエラーを画面の外へ押し出していた（実ブラウザで発見）。 */
.sb-pay:not(:empty){ min-height:220px; }
.sb-note{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:12px; }

.sb-acts{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.sb-agree{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:14px; }

.sb-err{
  margin-top:14px; padding:12px 14px; border-radius:var(--radius);
  /* **色は既存の `.qerr` に合わせる**（--clay）。新しい赤を作らない。 */
  border:1px solid var(--clay); color:var(--clay);
  font-size:var(--fs-sm); font-weight:700;
}

/* ---------------------------------------------------- 金額の内訳（右） */
/* **中身が無ければ、枠も出さない。**空の枠だけが残ると
   「読み込み中」なのか「出せなかった」のか分からない。 */
.sb-sum:empty{ display:none; }
.sb-sum{
  padding:20px; background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--radius);
}
.sb-sum-h{ font-size:var(--fs-md); font-weight:600; margin-bottom:14px; }
.sb-sum-list{ margin:0; }
.sb-sum-row{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.sb-sum-row dt{ font-size:var(--fs-sm); font-weight:400; }
.sb-sum-row dd{ font-size:var(--fs-sm); font-weight:400; margin:0; }
/* **合計は大きくせず、太くする**（Stripe 公式の見本の実測）。 */
.sb-sum-row.is-total dt,
.sb-sum-row.is-total dd{ font-weight:600; }
/* **数字ではない行**（「決済時に加算されます」）は、金額と見分けが付くよう薄くする。 */
.sb-sum-row.is-quiet dd{ color:var(--ink-3); }
.sb-sum-note{ display:block; font-size:var(--fs-xs); color:var(--ink-3); font-weight:400; }
.sb-sum-line{ height:1px; background:var(--line); margin:10px 0; }
.sb-sum-foot{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:12px; }

/* ------------------------------------------------------ 確認・完了の表 */
.sb-review{ display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0; }
.sb-review dt{ font-size:var(--fs-sm); color:var(--ink-2); }
.sb-review dd{ font-size:var(--fs-md); margin:0; }