/* 予約の入口ページ `/reserve/`（Issue#261）。
   `views/layout.php` の `$pageStyles` から読む。**このページでしか読まれない**ので、
   体験ページ・教室ページのHTMLと見た目は1バイトも変わらない。

   ## なぜ本家CSSに任せず自前で持つのか

   本家の `assets/css/vendor/original_style.css:2057-2109` には `.rs_*` の定義がある。
   だがそれは**本文領域では効かない**。`assets/css/vendor-scope.css` の `neutralize` レイヤーが
   `main.site-main` の中で本家CSSを `all: revert` で打ち消しているため（ADR-023 決定・
   同ファイル7-8行目）。ヘッダー／フッターは打ち消しの対象外なので本家CSSがそのまま効くが、
   本文は Form_v2 側が持つ。**一度「本家CSSに任せればよい」と考えて削ったが、
   実機で見たらページが素のまま（見出し24px・ボタンの背景なし）になり、誤りだと分かった。**

   ## 値はすべて本家の実測（2026-09-20 採寸・推測は入れない）

     `.rs_headerTitle`   16px / weight 400 / #000 / lh 28.8px / 游明朝 / 中央 / 上64px 下32px
     `.rs_txt`           上下 48px / 左右 32px（本文だけ節より内側。本家 幅578 ↔ 節642）
     `.rs_txt p`         12.8px / weight 400 / #000 / lh 23.04px / 上下 19.2px
     `.rs_btn`           300×61 / block / 中央 / 背景 #F4C5BF / #000 / 16px / weight 700
                         padding 16px / 角丸なし / 枠線なし / 上 96px
     `.rs_link`          中央 / 12.8px / #000 / 上19.2px 下12.8px
     `.rs_link a`        #000 / 下線は `border-bottom: 1px solid`（`text-decoration` ではない）

   本家との違いはボタンが1つ→2つになったことだけ。1つあたりの寸法・色・文字は本家のまま。

   ## 1点だけ本家CSSが貫通する

   vendor の `.rs_headerTitle { font-family: … !important }` は `!important` なので
   `neutralize` の `all: revert` を破って効く（vendor-scope.css 57-58行目）。
   指定内容は游明朝で、下の `var(--font-serif)` と同じものなので**結果は変わらない**。
   `tests/php/VendorCssSnapshotTest.php` F3-a に、理由つきの例外として登録してある。 */

.rs_headerTitle {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #000;
  text-align: center;
  margin: 64px 0 32px;
}

/* 左右 32px は本家の実測。本文だけが見出し・ボタンより内側に入る */
.rs_txt { margin: 48px 32px; }

.rs_txt p {
  font-size: 12.8px;
  font-weight: 400;
  line-height: 1.8;
  color: #000;
  margin: 19.2px 0;
}

/* ボタンを横並びに配置する。
   本家はボタン1つを `margin: 6em auto 0` で中央に置いていた。2つ並べると `auto` が
   左右に効いて離れてしまうので、**並べる役目を親に移す**。上の 96px は本家の 6em と同じ。 */
.rs_btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 96px;
}

.rs_btn {
  display: block;
  /* 横並びのとき**縮ませない**（#255 のサムネイルと同じ壊れ方を避ける）。
     flex の既定は `flex-shrink: 1` なので、入らない幅では黙って細くなり文字が折り返す。
     下のメディアクエリで縦積みに切り替えるのが本線だが、二重に塞いでおく。 */
  flex: 0 0 auto;
  width: 300px;
  padding: 16px;
  background: var(--color-reserve);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
}

/* スマホ幅では縦に積む。
   横並びには 300×2 + gap 20 = 620px 要る。`.site-main` は左右 20px の padding を持つので、
   画面幅 660px が境界になる。 */
@media (max-width: 660px) {
  .rs_btns { flex-direction: column; align-items: center; }
  /* 縦積みでは画面に合わせて伸ばす（300px 固定のままだと細い画面で窮屈に見える） */
  .rs_btn { width: 100%; max-width: 300px; }
}

.rs_link {
  text-align: center;
  font-size: 12.8px;
  line-height: 1.8;
  color: #000;
  margin: 19.2px 0 12.8px;
}

/* 本家の下線は `text-decoration` ではなく `border-bottom`（実測）。
   `text-decoration` だと文字の下に詰まって出るので、見た目が変わる。 */
.rs_link a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid;
}