/* 採用29｜RT-60 紙面のように収まるモーダル（shimairoパターン sp-29）
   書き方の決まり：library/shimairo-patterns/README.md「3.」。すべて .sp-29 の中だけに効く。
   RT シリーズ共通の .rt-wrap はそのまま残し、.sp-29 の下に入れた（色などの名前は --sp29-…）。
   詳細のパネルは、カードの下の「詳細のステージ」の中に重ねて出す（position:absolute。型のまま）。Noppo camera 1.7.1 から、JS が動くときは画面に重ねる（下）。

   Noppo camera テーマ 1.7.0 で入れたとき（型の保管庫 claude/shimairo-patterns 0700ba6 から。mock/patterns/README.md「司令塔が決めたこと」）
   - 色：--sp29-* と中の色を、テーマの :root の変数（--ink・--muted・--line・--wash・--accent・--white）に替えた。影・背景の暗さも --ink の色で
   - 外側の .rt-wrap の地は透明に（テーマの地の上で、白い四角が出ないように）
   - パネルの文は、JS なしの一覧（.rt60-detail）の中身を写す（金額・【要確認】【仮】の印・内容の箇条・補足）。その見た目（.rt60-price など）を足した
   - 舞台の札・パネルの下の注意書き・「状態」「開いた詳細」の行・見本の説明は HTML に入れない
   - JS が動かないときは、「内容を見る」と空の舞台を出さない（下の一覧で全部読める）
   1.7.1（CEO「19個目」：押した場所でモーダルに）
   - JS が動くときは、舞台を画面に重ねる層（position:fixed）にした。パネルは画面の真ん中に出る。カードの下の点線の舞台は出さない
   - PC（幅 720px 以上）では、カードを 2〜3列に（minmax(280px, 1fr)）
   1.14.0：「内容を見る」の地を黒から --y-btn（線 --y-line・文字 --ink）に。押したときは --y-btn-press（CEO ボードQ79 A：トップの黄色に合わせる）
   1.15.0：小窓の下に「このプランで予約する」（.rt60-foot・.rt60-book。下のほう） */
/* 型の中の要素を、まずブラウザの標準に戻す（テーマの h3{…}・p{…}・button{…} を受け継がない。README.md「3-2.」） */
.sp-29 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, figcaption, table, caption, th, td, hr, img, a, button, input, select, textarea, label, fieldset, legend, small, strong, em, details, summary):where(:not([data-slot] *)) { all: revert; }
/* 元は body の余白・文字の指定がなく、ブラウザの標準（余白 8px・16px・行の高さ normal など）で見えていた。テーマの値を受け継がず、どこに置いても同じに見えるよう、箱に持たせる */
.sp-29 { display: flow-root; padding: 0 8px; color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 400; font-style: normal; letter-spacing: normal; line-height: normal; text-align: start; text-transform: none; }
.sp-29 .rt-wrap { --sp29-brand: var(--ink); --sp29-ink: var(--ink); --sp29-sub: var(--muted); --sp29-line: var(--line); --sp29-soft: var(--wash); --sp29-accent: var(--accent); --sp29-accent2: var(--line); font-family: var(--sans); color: var(--sp29-ink); background: transparent; line-height: 1.75; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; box-sizing: content-box; }
.sp-29 .rt-wrap * { box-sizing: border-box; }
/* 外側の余白：元の body の margin（8px）と同じく、中の部品の margin と重なる形（上下は .rt-wrap の margin、左右は箱の padding。README.md「3-2.」） */
.sp-29 > .rt-wrap { margin: 8px 0; }
/* 文字の要素の書体は .rt-wrap から受け継ぐ（テーマの .entry-content p{font-family} などより強く。型のクラスの指定はこの後に書く） */
.sp-29 .rt-wrap :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, small, strong, label) { font-family: inherit; }
/* RT-60 紙面のように収まるモーダル */
.sp-29 .rt60-cards { display: grid; gap: 10px; margin-top: 12px; }
/* PC ではカードを 2〜3列に（1.7.1。v6 の点検の気になる所 1：1列で長い） */
@media (min-width: 720px) {
  .sp-29 .rt60-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.sp-29 .rt60-card { border: 1px solid var(--sp29-line); border-radius: 14px; padding: 12px 14px; background: var(--white); box-shadow: 0 6px 16px rgba(48, 47, 42, .06); }
.sp-29 .rt60-card h3 { margin: 0 0 4px; font-size: 15.5px; color: var(--sp29-ink); line-height: 1.75; }
.sp-29 .rt60-card p { margin: 0 0 10px; font-size: 13px; color: var(--sp29-sub); line-height: 1.75; }
.sp-29 .rt60-open { min-height: 52px; border: 2px solid var(--y-line); background: var(--y-btn); color: var(--ink); border-radius: 999px; font: inherit; font-weight: 800; font-size: 14px; line-height: normal; letter-spacing: normal; text-transform: none; text-align: center; margin: 0; box-shadow: none; padding: 10px 22px; cursor: pointer; }
.sp-29 .rt60-open:active { transform: scale(.98); background: var(--y-btn-press); }
.sp-29 .rt60-stage { position: relative; margin-top: 14px; border: 1px dashed var(--sp29-line); border-radius: 14px; background: var(--sp29-soft); min-height: 120px; overflow: hidden; }
.sp-29 .rt60-js .rt60-stage { min-height: 300px; }
.sp-29 .rt60-stage-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--sp29-sub); padding: 10px 12px; }
.sp-29 .rt60-backdrop { position: absolute; inset: 0; background: rgba(48, 47, 42, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.sp-29 .rt60-backdrop.is-show { opacity: 1; pointer-events: auto; }
/* 閉じている間は visibility:hidden（中の ✕ に Tab で入らないように）。消えるのは、うすくなり終わってから */
.sp-29 .rt60-panel { position: absolute; left: 12px; right: 12px; top: 38px; background: var(--white); border-radius: 12px; border-top: 6px solid var(--sp29-brand); box-shadow: 0 18px 40px rgba(48, 47, 42, .25); padding: 18px 16px 14px; opacity: 0; visibility: hidden; pointer-events: none; transform: rotate(-2.6deg) scale(.94) translateY(14px); transition: transform .38s cubic-bezier(.2, .8, .25, 1), opacity .25s ease, visibility 0s linear .25s; }
.sp-29 .rt60-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: rotate(0deg) scale(1) translateY(0); transition: transform .38s cubic-bezier(.2, .8, .25, 1), opacity .25s ease, visibility 0s; }
.sp-29 .rt60-panel h3 { margin: 0 30px 6px 0; font-size: 17px; color: var(--sp29-ink); line-height: 1.75; }
.sp-29 .rt60-panel p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; }
.sp-29 .rt60-panel [data-rt60-body] { color: var(--sp29-ink); }
/* 1.7.1（CEO「19個目」）：JS が動くときは、舞台を「画面に重ねる層」にする。パネルは押した所（画面の真ん中）に出て、後ろは背景で薄く暗くなる。
   層は画面全体（背景は画面下の LINE の帯もおおう）、パネルは --sp-offset-top／--sp-offset-bottom（テーマの style.css が決める）の内側に出て、帯とは重ならない。
   中身が長いときは、パネルの中の文（[data-rt60-body]）だけがスクロールする。z-index 60：テーマの画面下の LINE の帯（50）より上 */
.sp-29 .rt60-js .rt60-stage { position: fixed; inset: 0; z-index: 60; margin: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; display: flex; align-items: center; justify-content: center; padding: calc(var(--sp-offset-top, 0px) + 16px) 16px calc(var(--sp-offset-bottom, 0px) + 16px); pointer-events: none; }
.sp-29 .rt60-js .rt60-panel { position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; }
.sp-29 .rt60-js .rt60-panel h3 { flex: 0 0 auto; }
.sp-29 .rt60-js .rt60-panel [data-rt60-body] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sp-29 .rt60-panel-note { font-size: 11.5px; color: var(--sp29-sub); }
.sp-29 .rt60-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sp29-line); background: var(--white); color: var(--ink); font: inherit; font-size: 19px; line-height: 1; letter-spacing: normal; text-transform: none; text-align: center; margin: 0; padding: 0; box-shadow: none; cursor: pointer; }
.sp-29 .rt60-details { display: grid; gap: 10px; margin-top: 12px; }
.sp-29 .rt60-js .rt60-details { display: none; }
.sp-29 .rt60-detail { border: 1px solid var(--sp29-line); border-radius: 12px; padding: 10px 12px; background: var(--white); }
.sp-29 .rt60-detail h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--sp29-ink); line-height: 1.75; }
.sp-29 .rt60-detail p { margin: 0; font-size: 13px; color: var(--sp29-sub); line-height: 1.75; }
.sp-29 .rt60-state { font-size: 13px; margin: 14px 0 2px; color: var(--sp29-ink); line-height: 1.75; }
.sp-29 .rt60-count { font-size: 13px; margin: 2px 0 10px; color: var(--sp29-ink); line-height: 1.75; }
.sp-29 .rt60-list { display: grid; gap: 8px; margin-top: 6px; }
.sp-29 .rt60-li { border: 1px solid var(--sp29-line); border-radius: 12px; padding: 9px 12px; background: var(--white); }
.sp-29 .rt60-li h3 { margin: 0 0 3px; font-size: 13.5px; color: var(--sp29-ink); line-height: 1.75; }
.sp-29 .rt60-li p { margin: 0; font-size: 12.5px; color: var(--sp29-sub); line-height: 1.75; }

/* パネルと JS なしの一覧の中身（Noppo camera で足した。テーマ 1.6.0 のプランのカードの中身：金額・印・内容の箇条・補足） */
.sp-29 .rt60-detail .rt60-price, .sp-29 .rt60-panel .rt60-price { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--sp29-ink); }
.sp-29 .rt60-detail .rt60-facts-mark, .sp-29 .rt60-panel .rt60-facts-mark { margin: 0 0 6px; }
.sp-29 .rt60-facts { list-style: none; margin: 0; padding: 0; }
.sp-29 .rt60-facts li { margin: 0; padding: 4px 0; border-top: 1px solid var(--sp29-line); font-size: 13.5px; line-height: 1.75; color: var(--sp29-ink); }
.sp-29 .rt60-detail .rt60-note, .sp-29 .rt60-panel .rt60-note { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: var(--sp29-sub); }
/* 1.15.0（CEO 2026-11-09）：小窓の下の「このプランで予約する」。v17 のクリーム黄のボタン（style.css の .btn--primary と同じ地・線・文字）を、幅いっぱいの主役に。
   小窓では、文（[data-rt60-body]）がスクロールしても、ボタンはパネルの下にいつも見える（.rt60-foot は縮まない） */
.sp-29 .rt60-js .rt60-panel .rt60-foot { flex: 0 0 auto; padding-top: 14px; }
.sp-29 .rt60-foot:empty { display: none; }
.sp-29 .rt60-detail-foot { margin-top: 12px; }
.sp-29 .rt60-book {
  display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  width: 100%; min-height: 52px; margin: 0; padding: 12px 20px;
  border: 1px solid var(--y-line); border-radius: 0; background: var(--y-btn); color: var(--ink);
  font: 15px/1.5 var(--sans); letter-spacing: .06em; text-align: center; text-decoration: none; text-transform: none;
  box-shadow: none; cursor: pointer; transition: background-color .25s ease;
}
.sp-29 .rt60-book:hover, .sp-29 .rt60-book:active { background: var(--y-btn-press); }
.sp-29 .rt60-book:focus-visible { outline: 2px solid #5f5341; outline-offset: 3px; }
/* JS が動かないとき（.rt60-js がない）：押しても開かない「内容を見る」と、空の舞台は出さない。中身は下の一覧で全部読める（Noppo camera で足した） */
.sp-29 .rt60-box:not(.rt60-js) .rt60-open, .sp-29 .rt60-box:not(.rt60-js) .rt60-stage { display: none; }
.sp-29 .rt60-box:not(.rt60-js) .rt60-card p { margin-bottom: 0; }

/* 動きを控えめにする設定（元はなし）：紙が傾いて収まる動きと、背景がうすく出る動きを止める（すぐに正面で出る） */
@media (prefers-reduced-motion: reduce) {
  .sp-29 .rt60-panel, .sp-29 .rt60-panel.is-open { transform: none; transition: none; }
  .sp-29 .rt60-backdrop { transition: none; }
}