/* ===== 申込ページのビルダー（トップページの #tool に埋め込む） =====
   紹介ページ(landing.css)の中で動くので、申込ページ用の styles.css には頼らない。
   色の変数は landing.css のものをそのまま使う。 */

.tool{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* 節の幅は他と同じ。プレビューの実寸はカラム比で稼ぐ（squeezeと同じ考え方）。 */
.tool .secIn{max-width:1180px}
.bd-lead{color:var(--ink-soft); font-size:.9rem; margin:-6px 0 26px; max-width:46em; line-height:2;
  word-break:auto-phrase; text-wrap:pretty}   /* 1文字だけ次行に落ちるのを避ける */

.bd-layout{max-width:1460px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start}
@media(min-width:1250px){ .bd-layout{grid-template-columns:minmax(0,460px) minmax(0,1fr)} }

/* --- 左：入力 --- */
.bd-form{min-width:0}
.bd-step{background:var(--paper); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 1px 2px rgba(20,60,80,.04); padding:22px; margin-bottom:20px}
/* 見出しはカードの上辺に敷いた帯として見せる（枠線で囲い直さない） */
.bd-step > h3{font-size:.92rem; font-weight:600; letter-spacing:.04em; line-height:1.6;
  margin:-22px -22px 20px; padding:15px 22px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--accent) 5%, #fff); border-radius:18px 18px 0 0;
  display:flex; align-items:center; gap:10px}
.bd-step > h3 .n{width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:600}
.bd-step > .lead{color:var(--ink-3); font-size:.78rem; line-height:1.9; margin:-6px 0 16px}

.bd-form .field{margin-bottom:18px}
.bd-form .field:last-child{margin-bottom:6px}
.bd-form label{display:block; font-size:.78rem; color:var(--ink-soft); letter-spacing:.08em;
  font-weight:600; margin-bottom:8px}
.bd-form .opt{margin-left:6px; font-size:.66rem; letter-spacing:.06em; color:var(--ink-3);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; vertical-align:1px; font-weight:400}
.bd-form .help{font-size:.77rem; color:var(--ink-3); margin-top:6px; line-height:1.8}
.bd-form input[type=text],.bd-form input[type=email],.bd-form input[type=password],
.bd-form input[type=number],.bd-form input[type=date],.bd-form input[type=time],.bd-form textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  font-size:.95rem; font-family:inherit; background:var(--paper); color:var(--ink); transition:.14s;
}
.bd-form textarea{resize:vertical; min-height:84px; line-height:1.9}
.bd-form input:hover,.bd-form textarea:hover{background:var(--paper); border-color:#cadfea}
.bd-form input:focus,.bd-form textarea:focus{outline:none; background:var(--paper); border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
.bd-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.bd-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}

.bd-radios{display:flex; flex-wrap:wrap; gap:8px}
.bd-radio{display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--paper);
  border-radius:11px; padding:10px 14px; cursor:pointer; font-size:.88rem; transition:.13s}
.bd-radio:hover{border-color:var(--accent)}
.bd-radio:has(input:checked){background:var(--paper); border-color:var(--accent); font-weight:600;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent)}
.bd-radio input{accent-color:var(--accent)}

.bd-slots{display:flex; flex-direction:column; gap:8px}
.bd-slot{display:flex; gap:8px; align-items:center}
.bd-slot input{flex:1}
.bd-slot .del{border:1px solid var(--line); background:var(--paper); color:var(--ink-3); cursor:pointer;
  border-radius:10px; width:38px; height:44px; flex:none; font-size:1rem; font-family:inherit}
.bd-slot .del:hover{color:#c0492b; border-color:#e6c3ba}
.bd-add{border:1px dashed var(--line); background:var(--paper); color:var(--navy); cursor:pointer;
  border-radius:11px; padding:11px 0; width:100%; font-family:inherit; font-size:.86rem; margin-top:6px}
.bd-add:hover{border-color:var(--accent); color:var(--accent)}

.bd-picks{display:flex; flex-wrap:wrap; gap:8px}
.bd-pick{border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:8px 13px;
  cursor:pointer; font-size:.83rem; color:var(--ink); font-family:inherit; transition:.13s}
.bd-pick:hover{border-color:var(--accent)}
.bd-pick.on{background:var(--accent); border-color:var(--accent); color:#fff}
.bd-file{font-size:.84rem}
.bd-thumb{width:74px; height:74px; border-radius:50%; object-fit:cover; margin:-6px 0 16px; display:block;
  box-shadow:0 4px 14px -6px rgba(20,15,25,.3)}
.bd-thumb.sq{width:auto; max-width:260px; height:auto; border-radius:12px}

.bd-themes{display:flex; flex-wrap:wrap; gap:8px}
.bd-theme{border:1px solid var(--line); background:var(--paper); border-radius:11px; padding:7px 10px 6px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; width:78px; font-family:inherit}
.bd-theme.on{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent)}
.bd-theme .sw{display:flex; width:100%; height:16px; border-radius:5px; overflow:hidden}
.bd-theme .sw i{flex:1}
.bd-theme .nm{font-size:.66rem; color:var(--ink-3); letter-spacing:.02em}
.bd-colors{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px}
.bd-color{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:11px; padding:7px 12px; background:var(--paper); cursor:pointer}
.bd-color input[type=color]{width:34px; height:26px; padding:0; border:1px solid var(--line);
  border-radius:7px; background:none; cursor:pointer}
.bd-color-note{font-size:.74rem; color:var(--ink-3)}

/* ボタン（landing.css の .cta とは別物として持つ） */
.bd-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none;
  border-radius:13px; padding:15px 26px; font-size:.96rem; font-weight:600; letter-spacing:.06em;
  cursor:pointer; background:var(--accent); color:#fff; font-family:inherit; transition:.15s;
  box-shadow:0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent); text-decoration:none}
.bd-btn:hover{transform:translateY(-1px); background:var(--accent-d)}
.bd-btn:disabled{opacity:.5; cursor:default; transform:none}
.bd-btn.block{width:100%}
.bd-btn.gh{background:var(--paper); color:var(--navy); border:1px solid var(--line); box-shadow:none}
.bd-btn.gh:hover{background:var(--cream); color:var(--navy)}
.bd-btn.navy{background:var(--navy)} .bd-btn.navy:hover{background:var(--navy-d)}

/* --- 右：プレビュー ---
   額縁で囲って小さく見せない。中身は端末の実寸（PC760 / スマホ390）で描き、
   枠に収まるぶんだけ縮める。広い画面では等倍で出る。 */
.bd-prev{position:sticky; top:70px; min-width:0}
.bd-panel{background:var(--paper); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 1px 2px rgba(20,60,80,.04); padding:22px}
.bd-prev-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.bd-prev-ttl{font-size:.9rem; font-weight:600; letter-spacing:.04em; color:var(--ink); margin-right:auto}
.bd-zoom{font-size:.72rem; color:var(--ink-3); letter-spacing:.02em; white-space:nowrap}
.bd-zoom.full{color:#2e7d52; font-weight:600}
.bd-device{display:flex; gap:3px; background:var(--cream-2); border:1px solid var(--line);
  border-radius:999px; padding:3px}
.bd-device button{border:0; background:none; color:var(--ink-soft); border-radius:999px; padding:6px 14px;
  font-size:.74rem; cursor:pointer; font-family:inherit; transition:.18s}
.bd-device button.on{background:var(--paper); color:var(--ink); font-weight:600;
  box-shadow:0 1px 4px rgba(20,60,80,.14)}
.bd-stage{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:0; overflow:hidden; display:flex; justify-content:center}
.bd-wrap{overflow:hidden; border-radius:10px; background:#fff; transition:width .2s, height .2s}
.bd-stage iframe{border:0; display:block; background:#fff; transform-origin:top left}
.bd-prev-note{font-size:.74rem; color:var(--ink-3); margin:12px 0 0; line-height:1.9}
.bd-save{display:block; font-size:.72rem; color:var(--ink-3); text-align:center; margin-top:10px; height:1.2em}
.bd-save.on{color:#2e7d52}

/* 狭い画面では左右に並べられないので、入力とプレビューを切り替える */
.bd-seg{display:none; gap:6px; margin:0 0 16px}
.bd-seg button{flex:1; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  border-radius:11px; padding:11px 0; font-size:.88rem; cursor:pointer; font-family:inherit}
.bd-seg button.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}

@media(max-width:920px){
  .bd-layout{grid-template-columns:1fr}
  .bd-seg{display:flex}
  .bd-prev{position:static}
  .bd-layout.show-prev .bd-form{display:none}
  .bd-layout:not(.show-prev) .bd-prev{display:none}
}

/* --- 公開モーダル --- */
.bd-modal-bg{position:fixed; inset:0; background:rgba(40,26,32,.42); z-index:60; display:flex;
  align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto}
.bd-modal{background:var(--paper); border-radius:18px; width:100%; max-width:480px; padding:26px 26px 22px;
  box-shadow:0 30px 70px -20px rgba(20,15,25,.4)}
.bd-modal h3{font-size:1.12rem; letter-spacing:.05em; margin:0 0 6px}
.bd-modal .lead{color:var(--ink-soft); font-size:.86rem; line-height:1.9; margin:0 0 18px}
.bd-url{display:flex; align-items:center; border:1px solid var(--line); border-radius:12px;
  background:var(--cream); padding-left:14px; overflow:hidden}
.bd-url .host{font-size:.85rem; color:var(--ink-3); white-space:nowrap}
.bd-modal .bd-url input{border:none; background:transparent; border-radius:0; padding-left:2px}
.bd-modal .bd-url input:focus{box-shadow:none; background:transparent}
.bd-done{text-align:center}
.bd-done .mark{width:64px; height:64px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:1.7rem}
.bd-done .u{background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  word-break:break-all; font-size:.9rem; margin:14px 0 18px}

/* --- トースト --- */
.bd-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:12px; opacity:0;
  pointer-events:none; transition:.25s; font-size:.9rem; z-index:70; max-width:90vw}
.bd-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.bd-toast.err{background:#c0492b}

/* 曜日ルール（編集画面でだけ出る） */
.bd-week{display:flex; flex-direction:column; gap:8px}
.bd-wday{display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:start;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--cream)}
.bd-wday.on{background:var(--paper); border-color:color-mix(in srgb, var(--accent) 26%, #fff)}
.bd-wday .wd{font-weight:600; font-size:.88rem; letter-spacing:.06em; padding-top:9px}
.bd-wday .wd.sun{color:#c0492b} .bd-wday .wd.sat{color:#3f6ea8}
.bd-wslots{display:flex; flex-direction:column; gap:6px; min-width:0}
.bd-wslot{display:flex; align-items:center; gap:8px}
.bd-wslot select{flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 10px;
  font-family:inherit; font-size:.88rem; background:var(--paper); color:var(--ink)}
.bd-wslot span{color:var(--ink-3); font-size:.85rem}
.bd-wslot .del{border:1px solid var(--line); background:var(--paper); color:var(--ink-3); cursor:pointer;
  border-radius:9px; width:34px; height:38px; flex:none; font-family:inherit}
.bd-wslot .del:hover{color:#c0492b; border-color:#e6c3ba}
/* 申し込みが入っている枠は消せない */
.bd-locked{flex:none; font-size:.74rem; color:var(--accent-d); background:color-mix(in srgb, var(--accent) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--accent) 20%, #fff); border-radius:8px; padding:6px 10px; white-space:nowrap}

/* 書式ボタン・雛形ボタン（タグを覚えなくても書けるように） */
.bd-bar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; align-items:center}
.bd-tag{border:1px solid var(--line); background:var(--paper); border-radius:9px; padding:6px 11px;
  font-size:.76rem; color:var(--ink-soft); cursor:pointer; font-family:inherit; transition:.13s;
  display:inline-flex; align-items:center; gap:6px}
.bd-tag:hover{border-color:var(--accent); color:var(--accent-d)}
.bd-tag b{font-weight:700; color:var(--ink)}
.bd-tag .sw{width:12px; height:12px; border-radius:4px; display:inline-block;
  border:1px solid rgba(0,0,0,.12)}
.bd-bar input[type=color]{width:30px; height:26px; padding:0; border:1px solid var(--line);
  border-radius:7px; background:none; cursor:pointer}

/* 書き方が足りていないことを、その場で知らせる（消せる注意なので赤くしすぎない） */
.bd-warn{margin-top:8px; padding:10px 12px; border-radius:10px; font-size:.78rem; line-height:1.85;
  background:color-mix(in srgb, #c9772f 8%, #fff); border:1px solid color-mix(in srgb, #c9772f 26%, #fff);
  color:color-mix(in srgb, #c9772f 62%, #333)}
.bd-warn b{display:block; font-weight:600; margin-bottom:2px}